/* ==================================================
   LA WOODS — HOME (Alternative Concept)
   Aesthetic: cinematic editorial · warm boutique
   Palette (from brand logo):
     Wine   #980D2E   (primary)
     Brown  #4E2811   (deep / dark)
     Peach  #FBC794   (accent)
================================================== */

:root {
  --header-h: 131px;
  --strip-h: 39px;
  --wine: #980D2E;
  --wine-deep: #6E091F;
  --wine-soft: #B92046;

  --brown: #4E2811;
  --brown-deep: #2E1608;
  --brown-soft: #6B3A1B;

  --peach: #FBC794;
  --peach-soft: #FDE4C6;
  --peach-deep: #E8A968;

  --paper: #FBF6EC;
  --cream: #F4EBDB;
  --ivory: #FEFBF5;

  --ink: #2A1810;
  --muted: #6B5548;
  --hair: rgba(78, 40, 17, 0.14);
  --hair-strong: rgba(78, 40, 17, 0.28);

  --f-display: 'Fraunces', 'Cormorant Garamond', 'Georgia', serif;
  --f-italic:  'Instrument Serif', 'Fraunces', 'Georgia', serif;
  --f-body:    'Inter', 'Manrope', system-ui, sans-serif;

  --pad-x: clamp(24px, 6vw, 115px);

  /* Vertical rhythm tokens — used everywhere for consistent spacing */
  --section-y: clamp(40px, 5vw, 65px);
  --section-y-sm: clamp(32px, 4vw, 50px);
  --head-mb: clamp(20px, 2.5vw, 30px);
  --card-gap: clamp(16px, 2vw, 24px);
  --max-content: 1360px;

  --radius-lg: 6px;
  --radius-md: 4px;
  --radius-sm: 2px;

  --ease: cubic-bezier(.22,.61,.36,1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--f-body);
  color: var(--ink);
  background: var(--paper);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; transition: color .3s var(--ease), opacity .3s var(--ease); }
ul, ol { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }

em {
  font-family: var(--f-italic);
  font-style: italic;
  font-weight: 400;
  color: var(--wine);
}

/* =============== REVEAL =============== */
.lw-reveal {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition:
    opacity .9s var(--ease),
    transform .9s var(--ease);
  transition-delay: var(--rd, 0ms);
  will-change: opacity, transform;
}
.lw-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .lw-reveal { opacity: 1 !important; transform: none !important; }
}

/* =============== TYPOGRAPHY =============== */
.lw-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--f-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: var(--wine);
  margin-bottom: 30px;
}
/* Mobile-drawer-only nav items — hidden on desktop */
.lw-nav-mo,
.lw-nav-section { display: none; }
.lw-eyebrow-dash {
  display: inline-block;
  width: 28px;
  height: 1px;
  background: currentColor;
}
.lw-eyebrow-brass { color: var(--peach); }

.lw-h2 {
  font-family: var(--f-display);
  font-weight: 400;
  color: var(--brown-deep);
  font-size: clamp(30px, 3.8vw, 50px);
  line-height: 1.05;
  letter-spacing: -0.8px;
  margin-bottom: 18px;
}
.lw-h2 em {
  font-family: var(--f-italic);
  font-weight: 400;
  letter-spacing: -0.5px;
}
.lw-h2-light { color: var(--ivory); }
.lw-h2-light em { color: var(--peach); }

.lw-body {
  font-family: var(--f-body);
  font-weight: 400;
  font-size: 16.5px;
  line-height: 1.75;
  color: var(--muted);
  max-width: 520px;
  margin-bottom: 20px;
}
.lw-body-light { color: rgba(253, 228, 198, 0.75); }

/* =============== BUTTONS & LINKS =============== */
.lw-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 26px;
  font-family: var(--f-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  transition: all .35s var(--ease);
  border-radius: 999px;
  white-space: nowrap;
  overflow: hidden;
}
.lw-btn i { font-size: 11px; transition: transform .35s var(--ease); }
.lw-btn:hover i { transform: translateX(4px); }
.lw-btn-lg { padding: 18px 32px; font-size: 12px; }
.lw-btn-sm { padding: 10px 20px; font-size: 11px; letter-spacing: 2px; }

.lw-btn-solid {
  background: var(--wine);
  color: var(--ivory);
}
.lw-btn-solid:hover {
  background: var(--wine-deep);
  transform: translateY(-2px);
}
.lw-btn-line { display: none; }

.lw-btn-ghost {
  background: transparent;
  color: var(--brown-deep);
  padding-left: 6px;
}
.lw-btn-ghost:hover { color: var(--wine); }

.lw-btn-outline {
  background: transparent;
  color: var(--brown-deep);
  border: 1px solid var(--brown-deep);
}
.lw-btn-outline:hover {
  background: var(--brown-deep);
  color: var(--ivory);
}

.lw-btn-brass {
  background: var(--peach);
  color: var(--brown-deep);
}
.lw-btn-brass:hover {
  background: var(--peach-soft);
  transform: translateY(-2px);
}

.lw-link {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--f-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--wine);
  padding-bottom: 4px;
  border-bottom: 1px solid transparent;
}
.lw-link:hover { color: var(--wine-deep); }
.lw-link:hover .lw-link-arrow { background: var(--wine); color: var(--ivory); border-color: var(--wine); }
.lw-link-arrow {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1px solid currentColor;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all .35s var(--ease);
  font-size: 10px;
}
.lw-link-dark { color: var(--brown-deep); }
.lw-link-dark:hover { color: var(--wine); }
.lw-link-dark:hover .lw-link-arrow { background: var(--wine); border-color: var(--wine); color: var(--ivory); }
.lw-link-light { color: var(--peach); }
.lw-link-light:hover { color: var(--ivory); }
.lw-link-light:hover .lw-link-arrow { background: var(--peach); color: var(--brown-deep); border-color: var(--peach); }

/* =============== ANNOUNCEMENT MARQUEE STRIP =============== */
.lw-strip {
  background: var(--brown-deep);
  color: var(--peach);
  padding: 10px 0;
  overflow: hidden;
  border-bottom: 1px solid var(--brown);
}
.lw-strip-track {
  display: flex;
  gap: 40px;
  white-space: nowrap;
  animation: lw-marquee 40s linear infinite;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 500;
}
@keyframes lw-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* =============== HEADER =============== */
.lw-header {
  position: sticky;
  top: 0;
  z-index: 100;
  /* Transparent over the hero; an opaque ground fades in once scrolled so the
     nav stays readable against page content. */
  background: transparent;
  transition: box-shadow .3s var(--ease), background .3s var(--ease),
              backdrop-filter .3s var(--ease);
  border-bottom: 1px solid transparent;
}
.lw-header.is-scrolled {
  background: var(--paper);
  box-shadow: 0 12px 32px rgba(78, 40, 17, 0.08);
  border-bottom-color: var(--hair);
}



.lw-header-inner {
  max-width: 1520px;
  margin: 0 auto;
  padding: 18px var(--pad-x);
  display: flex;
  align-items: center;
  gap: 32px;
}
.lw-brand img { height: 76px; width: auto; background: transparent; }

.lw-nav { flex: 1; display: flex; justify-content: center; }
.lw-nav ul { display: flex; gap: 34px; align-items: center; }
.lw-nav a {
  position: relative;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--brown-deep);
  padding: 8px 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.lw-nav a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1px;
  background: var(--wine);
  transition: width .35s var(--ease);
}
.lw-nav a:hover { color: var(--wine); }
.lw-nav a:hover::after { width: 100%; }
/* superseded by the navbar block below */
.lw-nav a.is-active::after {
  width: 100%;
  height: 2px;
  background: var(--wine);
}
.lw-plus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  border: 1px solid var(--hair-strong);
  border-radius: 50%;
  font-size: 8px;
  line-height: 1;
  transition: all .3s var(--ease);
  vertical-align: middle;
}
.lw-plus i {
  display: block;
  line-height: 1;
  margin: 0;
  padding: 0;
  width: 8px;
  height: 8px;
  text-align: center;
}
.lw-has-drop:hover .lw-plus { transform: rotate(180deg); border-color: var(--wine); color: var(--wine); }
.lw-has-drop { position: relative; }
.lw-drop {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  min-width: 320px;
  background: #FEFBF5;
  border: 1px solid var(--hair);
  padding: 20px 26px;
  opacity: 0;
  visibility: hidden;
  transition: all .3s var(--ease);
  box-shadow: 0 32px 60px rgba(46, 22, 8, 0.14);
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  align-items: stretch !important;
  flex-wrap: nowrap !important;
}
.lw-has-drop:hover .lw-drop,
.lw-has-drop .lw-drop { flex-direction: column; }
.lw-has-drop:hover .lw-drop {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.lw-drop li {
  padding: 12px 0 12px 22px;
  position: relative;
  list-style: none;
  text-align: left;
}
.lw-drop li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 22px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--brown-deep);
}
.lw-drop li a {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 0;
  font-family: var(--f-body);
  letter-spacing: 0;
  text-transform: none;
  color: var(--brown-deep);
  background: transparent;
  text-align: left;
  transition: color .25s var(--ease);
}
.lw-drop li a::after { display: none; }
.lw-drop-city {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.15;
  color: var(--brown-deep);
  letter-spacing: -0.3px;
  transition: color .25s var(--ease);
}
.lw-drop-name {
  font-family: var(--f-italic);
  font-style: italic;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.2;
  color: var(--peach-deep);
  letter-spacing: 0.1px;
  transition: color .25s var(--ease);
}
.lw-drop li:hover::before { background: var(--wine); }
.lw-drop li a:hover .lw-drop-city { color: var(--wine); }
.lw-drop li a:hover .lw-drop-name { color: var(--wine); }

.lw-head-cta { display: flex; align-items: center; gap: 16px; }
.lw-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 32px; height: 32px;
  align-items: center;
  justify-content: center;
}
.lw-toggle span {
  display: block;
  width: 22px; height: 1.5px;
  background: var(--brown-deep);
  transition: all .3s var(--ease);
}
.lw-toggle.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.lw-toggle.is-open span:nth-child(2) { opacity: 0; }
.lw-toggle.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* =============== CINEMATIC HERO =============== */
.lw-hero {
  position: relative;
  height: calc(100vh - 88px);
  min-height: 520px;
  max-height: 720px;
  overflow: hidden;
  background: var(--brown-deep);
}
.lw-hero-media { position: absolute; inset: 0; }
.lw-hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.08);
  transition: opacity 1.4s var(--ease), transform 8s var(--ease);
}
.lw-hero-slide.is-active {
  opacity: 1;
  transform: scale(1);
}
.lw-hero-veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(46,22,8,0.35) 0%, rgba(46,22,8,0.15) 40%, rgba(46,22,8,0.75) 100%),
    linear-gradient(90deg, rgba(46,22,8,0.55) 0%, rgba(46,22,8,0) 55%);
  pointer-events: none;
}

.lw-hero-nums {
  position: absolute;
  top: 40px;
  right: var(--pad-x);
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--peach);
  font-family: var(--f-body);
  font-size: 12px;
  letter-spacing: 3px;
  z-index: 3;
}
.lw-hero-idx {
  font-family: var(--f-italic);
  font-style: italic;
  font-size: 20px;
  letter-spacing: 0;
  color: var(--ivory);
}
.lw-hero-line { width: 60px; height: 1px; background: var(--peach); opacity: 0.6; }
.lw-hero-total { color: var(--peach); opacity: 0.7; }

.lw-hero-caption {
  position: absolute;
  right: var(--pad-x);
  bottom: clamp(80px, 12vw, 140px);
  max-width: 260px;
  color: var(--ivory);
  text-align: right;
  z-index: 3;
  border-right: 1px solid rgba(251,199,148,0.35);
  padding-right: 22px;
}
.lw-cap-tag {
  display: block;
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--peach);
  margin-bottom: 10px;
}
.lw-cap-name {
  display: block;
  font-family: var(--f-display);
  font-size: 20px;
  font-weight: 400;
  margin-bottom: 4px;
  line-height: 1.2;
}
.lw-cap-loc {
  display: block;
  font-size: 12px;
  color: rgba(254, 251, 245, 0.7);
  letter-spacing: 0.5px;
}

.lw-hero-dots {
  position: absolute;
  left: 50%;
  bottom: 72px;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 4;
  padding: 8px 14px;
  background: rgba(46, 22, 8, 0.35);
  backdrop-filter: blur(6px);
  border-radius: 999px;
  border: 1px solid rgba(251, 199, 148, 0.18);
}
.lw-hero-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(254, 251, 245, 0.4);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: all .35s var(--ease);
  position: relative;
}
.lw-hero-dot:hover { background: rgba(254, 251, 245, 0.7); }
.lw-hero-dot.is-active {
  background: var(--peach);
  width: 28px;
  border-radius: 999px;
  box-shadow: 0 0 0 3px rgba(251, 199, 148, 0.18);
}

.lw-hero-scroll { display: none; }
.lw-scroll-line {
  display: block;
  width: 1px;
  height: 42px;
  background: rgba(251,199,148,0.35);
  position: relative;
  overflow: hidden;
}
.lw-scroll-line::before {
  content: '';
  position: absolute;
  top: -50%;
  left: 0;
  width: 100%;
  height: 50%;
  background: var(--peach);
  animation: lw-scroll 2s ease-in-out infinite;
}
@keyframes lw-scroll {
  0%   { top: -50%; }
  100% { top: 100%; }
}
.lw-scroll-lbl {
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
}

/* =============== BOOKING WIDGET =============== */
.lw-book {
  padding: 0 var(--pad-x);
  margin-top: -46px;
  position: relative;
  z-index: 4;
}

/* Booking widget — modal wrapper */
.lw-book-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow-y: auto;
}
.lw-book-modal.is-open { display: flex; }
.lw-book-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(22, 12, 6, 0.72);
  backdrop-filter: blur(4px);
  animation: lwBookFade .25s ease;
}
.lw-book-modal .lw-book {
  position: relative;
  margin-top: 0;
  padding: 0;
  z-index: 1;
  width: 100%;
  max-width: 1080px;
  animation: lwBookRise .3s cubic-bezier(.22,.61,.36,1);
}
.lw-book-close {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--brown-deep);
  color: var(--ivory);
  border: none;
  cursor: pointer;
  z-index: 3;
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
  transition: transform .2s ease, background .2s ease;
}
.lw-book-close:hover { background: var(--wine); transform: scale(1.06); }
body.lw-book-locked { overflow: hidden; }
@keyframes lwBookFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes lwBookRise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@media (max-width: 720px) {
  .lw-book-modal { padding: 260px 16px 80px; align-items: flex-start; }
  .lw-book-modal .lw-book { margin-top: 0 !important; padding: 0 !important; max-width: 440px; width: 100%; }
  .lw-book-modal .lw-book-inner {
    display: flex !important;
    flex-direction: column;
    background: var(--ivory);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35);
    padding: 0;
    gap: 0;
    grid-template-columns: none !important;
  }
  .lw-book-modal .lw-book-badge {
    background: transparent !important;
    padding: 20px 20px 4px !important;
    color: var(--brown-deep) !important;
    display: block !important;
    min-width: 0 !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  .lw-book-modal .lw-book-badge span {
    color: var(--wine) !important;
    font-size: 9px;
    letter-spacing: 2.5px;
    margin-bottom: 4px !important;
    display: block;
  }
  .lw-book-modal .lw-book-badge em {
    color: var(--brown-deep) !important;
    font-size: 16px;
    font-family: var(--f-display);
    font-style: normal;
    display: block;
  }
  .lw-book-modal .lw-book-fields {
    display: flex !important;
    flex-direction: column;
    align-items: stretch !important;
    padding: 6px 16px 12px !important;
    gap: 10px;
    grid-template-columns: none !important;
    margin: 0 !important;
    width: 100%;
    box-sizing: border-box;
  }
  .lw-book-modal .lw-book-field {
    padding: 10px 14px !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    border: 1px solid var(--hair) !important;
    border-radius: 10px;
    background: var(--paper);
    display: flex !important;
    flex-direction: column;
    gap: 2px;
    box-sizing: border-box !important;
    align-self: stretch !important;
    flex: 0 0 auto !important;
  }
  .lw-book-modal .lw-book-badge { margin: 0 !important; }
  .lw-book-modal .lw-book-field label {
    font-size: 9px !important;
    letter-spacing: 1.8px;
    color: var(--muted);
    text-transform: uppercase;
    margin: 0;
  }
  .lw-book-modal .lw-book-field input,
  .lw-book-modal .lw-book-field select {
    font-size: 14px !important;
    color: var(--brown-deep);
    font-weight: 500;
    padding: 2px 0;
    background: transparent;
    border: none;
  }
  .lw-book-modal .lw-book-go {
    width: 100%;
    padding: 18px !important;
    margin: 0;
    border-radius: 0;
    font-size: 12px;
    letter-spacing: 2.5px;
    background: var(--brown-deep);
    color: var(--ivory);
  }
  .lw-book-close { top: 8px; right: 8px; width: 34px; height: 34px; font-size: 14px; background: rgba(46, 22, 8, 0.9); }
}

/* Mobile bottom action bar — Menu · Book Now · Map · Call */
.lw-mobar { display: none; }
@media (max-width: 720px) {
  .lw-mobar {
    display: flex;
    align-items: stretch;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    background: var(--brown-deep);
    color: var(--ivory);
    z-index: 90;
    padding: 0;
    box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.18);
  }
  .lw-mobar-btn {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 10px 6px;
    background: transparent;
    border: none;
    color: inherit;
    font-family: var(--f-body);
    font-size: 10px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    cursor: pointer;
    text-decoration: none;
    border-right: 1px solid rgba(251,199,148,0.15);
    transition: background .2s ease;
  }
  .lw-mobar-btn:last-child { border-right: none; }
  .lw-mobar-btn i { font-size: 18px; color: var(--peach); }
  .lw-mobar-btn:active { background: rgba(251,199,148,0.08); }
  body { padding-bottom: 62px; }
  /* Push scroll-to-top button above the action bar */
  .lw-top { bottom: 76px !important; }
}
.lw-book-inner {
  max-width: var(--max-content);
  margin: 0 auto;
  background: var(--ivory);
  border: 1px solid var(--hair);
  box-shadow: 0 36px 80px rgba(46, 22, 8, 0.16);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: stretch;
  overflow: hidden;
}
.lw-book-badge {
  background: var(--wine);
  color: var(--ivory);
  padding: 14px 22px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 180px;
}
.lw-book-badge span {
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--peach);
  margin-bottom: 4px;
}
.lw-book-badge em {
  font-family: var(--f-display);
  font-style: normal;
  font-size: 20px;
  color: var(--ivory);
  font-weight: 400;
  line-height: 1.15;
}
.lw-book-fields {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  align-items: center;
  gap: 0;
}
.lw-book-field {
  padding: 14px 20px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-right: 1px solid var(--hair);
}
.lw-book-field:last-child { border-right: none; }
.lw-book-field label {
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}
.lw-book-field input,
.lw-book-field select {
  border: none;
  background: transparent;
  font-family: var(--f-body);
  font-size: 15px;
  color: var(--brown-deep);
  font-weight: 500;
  padding: 4px 0;
  outline: none;
  cursor: pointer;
}
.lw-book-go {
  border-radius: 0;
  background: var(--brown-deep);
  color: var(--ivory);
  padding: 16px 32px;
  min-width: 200px;
  justify-content: center;
}
.lw-book-go:hover {
  background: var(--wine);
  transform: none;
}

/* =============== RUNNING PHILOSOPHY MARQUEE =============== */
.lw-run {
  background: var(--paper);
  padding: 28px 0;
  overflow: hidden;
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
  /* the 90px margin was sized for a short banner hero; the hero is now
     full-height, so the strip sits directly beneath it */
  margin-top: 0;
}
.lw-run-track {
  display: flex;
  gap: 60px;
  white-space: nowrap;
  animation: lw-marquee 50s linear infinite;
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(48px, 7vw, 96px);
  color: var(--brown);
  line-height: 1;
  letter-spacing: -2px;
}
.lw-run-track span { flex: none; }
.lw-run-track em {
  font-family: var(--f-italic);
  font-style: italic;
  color: var(--peach-deep);
  margin-left: 12px;
}

/* =============== STORY =============== */
.lw-story {
  padding: var(--section-y) var(--pad-x);
  background: var(--paper);
}
.lw-story-inner {
  max-width: var(--max-content);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(50px, 8vw, 110px);
  align-items: center;
}
.lw-story-media {
  position: relative;
  aspect-ratio: 1 / 1;
}
.lw-story-fig {
  position: absolute;
  overflow: hidden;
  border-radius: var(--radius-lg);
}
.lw-story-fig-a {
  top: 0; right: 0;
  width: 78%;
  aspect-ratio: 4 / 5;
  z-index: 1;
  box-shadow: 0 30px 70px rgba(46,22,8,0.16);
}
.lw-story-fig-b {
  bottom: 0; left: 0;
  width: 62%;
  aspect-ratio: 4 / 3;
  z-index: 2;
  border: 8px solid var(--paper);
  box-shadow: 0 30px 60px rgba(46,22,8,0.14);
}
.lw-story-fig img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease);
}
.lw-story-fig:hover img { transform: scale(1.06); }

.lw-story-badge {
  position: absolute;
  right: -8px;
  bottom: 12%;
  z-index: 3;
  background: var(--wine);
  color: var(--ivory);
  padding: 22px 26px;
  display: flex;
  align-items: center;
  gap: 18px;
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 40px rgba(152, 13, 46, 0.28);
}
.lw-story-badge-num {
  font-family: var(--f-italic);
  font-style: italic;
  font-size: 54px;
  line-height: 1;
  color: var(--peach);
  font-weight: 400;
}
.lw-story-badge-txt {
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--ivory);
}

.lw-story-copy { padding-right: 20px; }
.lw-story-body {
  margin: 26px 0 40px;
}
.lw-story-body p {
  font-size: 16px;
  line-height: 1.85;
  color: var(--muted);
  margin-bottom: 18px;
}
.lw-story-body p:last-child { margin-bottom: 0; }

.lw-story-quote {
  position: relative;
  padding: 30px 34px 30px 44px;
  background: var(--cream);
  border-left: 3px solid var(--wine);
  margin-bottom: 40px;
}
.lw-quote-glyph {
  position: absolute;
  top: 8px; left: 14px;
  font-family: var(--f-display);
  font-size: 60px;
  line-height: 1;
  color: var(--wine);
  opacity: 0.35;
}
.lw-story-quote p {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 22px;
  line-height: 1.4;
  color: var(--brown-deep);
  margin-bottom: 10px;
}
.lw-story-quote cite {
  font-family: var(--f-body);
  font-style: normal;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--wine);
}

/* =============== PROPERTIES — TABBED SHOWCASE =============== */
.lw-props {
  background: var(--brown-deep);
  padding: var(--section-y) var(--pad-x);
  color: var(--ivory);
  position: relative;
  overflow: hidden;
}
.lw-props::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 800px 500px at 15% 20%, rgba(152,13,46,0.22), transparent 60%),
    radial-gradient(ellipse 700px 500px at 90% 90%, rgba(251,199,148,0.10), transparent 60%);
  pointer-events: none;
}
.lw-props-wrap {
  max-width: var(--max-content);
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.lw-props-top {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 60px;
  align-items: end;
  margin-bottom: 60px;
}
.lw-props-lede {
  font-size: 16px;
  line-height: 1.8;
  color: rgba(254,251,245,0.72);
  max-width: 460px;
  padding-bottom: 8px;
}

.lw-props-tabs {
  display: grid;
  /* LAY-12: follow the item count -- this site has 2 properties, not 3 */
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0;
  border-top: 1px solid rgba(251,199,148,0.18);
  border-bottom: 1px solid rgba(251,199,148,0.18);
  margin-bottom: 40px;
}
.lw-props-tab {
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 26px 28px;
  text-align: left;
  color: rgba(254,251,245,0.55);
  transition: color .3s var(--ease), background .3s var(--ease);
  cursor: pointer;
  border-right: 1px solid rgba(251,199,148,0.18);
}
.lw-props-tab:last-child { border-right: none; }
.lw-props-tab::before {
  content: '';
  position: absolute;
  left: 0; bottom: -1px;
  height: 2px;
  width: 0;
  background: var(--peach);
  transition: width .5s var(--ease);
}
.lw-props-tab.is-active::before { width: 100%; }
.lw-props-tab:hover:not(.is-active) { color: rgba(254,251,245,0.85); background: rgba(251,199,148,0.04); }
.lw-props-tab.is-active { color: var(--ivory); }

.lw-tab-num {
  font-family: var(--f-italic);
  font-style: italic;
  font-size: 34px;
  color: var(--peach);
  opacity: 0.55;
  transition: opacity .3s var(--ease);
  line-height: 1;
}
.lw-props-tab.is-active .lw-tab-num { opacity: 1; }
.lw-tab-cell { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.lw-tab-city {
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--peach);
  opacity: 0.7;
}
.lw-tab-name {
  font-family: var(--f-display);
  font-size: 17px;
  font-weight: 400;
  color: inherit;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lw-props-stage {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: 0;
  align-items: stretch;
  background: var(--paper);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 40px 90px rgba(0,0,0,0.28);
}
.lw-props-media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--brown-deep);
}
.lw-props-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 1.1s var(--ease), transform 7s var(--ease);
}
.lw-props-slide.is-active {
  opacity: 1;
  transform: scale(1);
}
.lw-media-badge {
  position: absolute;
  top: 22px; left: 22px;
  background: rgba(46,22,8,0.75);
  backdrop-filter: blur(8px);
  color: var(--peach);
  padding: 8px 16px 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(251,199,148,0.35);
  font-size: 11px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  z-index: 2;
}
.lw-badge-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--peach);
  box-shadow: 0 0 0 3px rgba(251,199,148,0.25);
}

.lw-props-panels {
  position: relative;
  padding: clamp(30px, 3.5vw, 50px);
  background: var(--paper);
  color: var(--brown-deep);
  display: flex;
  align-items: stretch;
  min-height: 100%;
}
.lw-props-panel {
  display: none;
  flex-direction: column;
  width: 100%;
  animation: lw-fade-in .5s var(--ease);
}
.lw-props-panel.is-active { display: flex; }
@keyframes lw-fade-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

.lw-panel-tag {
  display: inline-block;
  align-self: flex-start;
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--wine);
  padding: 7px 14px;
  border: 1px solid var(--hair-strong);
  border-radius: 999px;
  margin-bottom: 22px;
}
.lw-panel-name {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(28px, 3vw, 40px);
  color: var(--brown-deep);
  line-height: 1.1;
  letter-spacing: -0.5px;
  margin-bottom: 14px;
}
.lw-panel-loc {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
  letter-spacing: 0.3px;
  margin-bottom: 22px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--hair);
}
.lw-panel-loc i { color: var(--wine); font-size: 12px; }
.lw-panel-desc {
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--muted);
  margin-bottom: 26px;
}
.lw-panel-meta {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 34px;
  flex: 1;
}
.lw-panel-meta li {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 14px;
  color: var(--brown-deep);
  font-weight: 500;
}
.lw-panel-meta i {
  width: 34px; height: 34px;
  background: var(--cream);
  color: var(--wine);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex: none;
}
.lw-props-panel .lw-btn { align-self: flex-start; }

/* =============== RITUALS =============== */
.lw-rituals {
  padding: var(--section-y) var(--pad-x);
  background: var(--paper);
}
.lw-rituals-head {
  max-width: var(--max-content);
  margin: 0 auto var(--head-mb);
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 60px;
  align-items: end;
}
.lw-rituals-grid {
  max-width: var(--max-content);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.lw-ritual {
  position: relative;
  background: var(--ivory);
  border: 1px solid var(--hair);
  padding: 40px 30px 34px;
  border-radius: var(--radius-lg);
  transition: all .4s var(--ease);
}
.lw-ritual:hover {
  transform: translateY(-6px);
  border-color: var(--wine);
  box-shadow: 0 30px 60px rgba(78,40,17,0.12);
}
.lw-ritual-num {
  position: absolute;
  top: 20px; right: 22px;
  font-family: var(--f-italic);
  font-style: italic;
  font-size: 26px;
  color: var(--peach-deep);
  opacity: 0.5;
  transition: opacity .3s var(--ease);
}
.lw-ritual:hover .lw-ritual-num { opacity: 1; }
.lw-ritual-icon {
  width: 56px; height: 56px;
  background: var(--cream);
  color: var(--wine);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-bottom: 24px;
  transition: all .35s var(--ease);
}
.lw-ritual:hover .lw-ritual-icon {
  background: var(--wine);
  color: var(--peach);
}
.lw-ritual h3 {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 22px;
  color: var(--brown-deep);
  line-height: 1.2;
  margin-bottom: 12px;
}
.lw-ritual p {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--muted);
  margin-bottom: 22px;
}
.lw-ritual-tag {
  display: inline-block;
  font-size: 10px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--wine);
  padding: 6px 12px;
  border: 1px solid var(--hair-strong);
  border-radius: 999px;
}

/* =============== DINING =============== */
.lw-dine {
  padding: var(--section-y) var(--pad-x);
  background: var(--cream);
}
.lw-dine-head {
  max-width: var(--max-content);
  margin: 0 auto var(--head-mb);
  text-align: center;
}
.lw-dine-head .lw-eyebrow { justify-content: center; }
.lw-dine-head .lw-body { margin-left: auto; margin-right: auto; }
.lw-dine-grid {
  max-width: var(--max-content);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.lw-dine-card {
  background: var(--ivory);
  border: 1px solid var(--hair);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all .4s var(--ease);
  display: flex;
  flex-direction: column;
}
.lw-dine-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 60px rgba(78,40,17,0.14);
}
.lw-dine-card figure {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
}
.lw-dine-card img,
.lw-dine-card video {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease);
}
.lw-dine-card:hover img,
.lw-dine-card:hover video { transform: scale(1.05); }
.lw-dine-badge {
  position: absolute;
  top: 20px; left: 20px;
  background: var(--wine);
  color: var(--peach);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-weight: 600;
}
.lw-dine-body {
  padding: 34px 32px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.lw-dine-place {
  display: block;
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--wine);
  margin-bottom: 14px;
}
.lw-dine-body h3 {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(22px, 2.2vw, 28px);
  color: var(--brown-deep);
  line-height: 1.2;
  margin-bottom: 16px;
}
.lw-dine-body p {
  font-size: 15px;
  line-height: 1.75;
  color: var(--muted);
  margin-bottom: 22px;
  flex: 1;
}
.lw-dine-meta {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--hair);
}
.lw-dine-meta li {
  font-size: 13px;
  color: var(--brown-deep);
  font-weight: 500;
}
.lw-dine-meta i {
  color: var(--wine);
  margin-right: 8px;
}

/* =============== OFFERS =============== */
.lw-offers {
  padding: var(--section-y) var(--pad-x);
  background: var(--brown-deep);
  color: var(--ivory);
  position: relative;
  overflow: hidden;
}
.lw-offers::before {
  content: '';
  position: absolute;
  top: -100px; right: -100px;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(152,13,46,0.22), transparent 70%);
  pointer-events: none;
}
.lw-offers-head {
  max-width: var(--max-content);
  margin: 0 auto var(--head-mb);
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 30px;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}
.lw-offers-list {
  max-width: var(--max-content);
  margin: 0 auto;
  display: flex;
  gap: 24px;
  position: relative;
  z-index: 1;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.lw-offers-list::-webkit-scrollbar { display: none; }
.lw-offer {
  flex: 0 0 calc((100% - 48px) / 3);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  background: rgba(254, 251, 245, 0.04);
  border: 1px solid rgba(251,199,148,0.18);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all .4s var(--ease);
}
.lw-offer:hover {
  border-color: var(--peach);
  background: rgba(254,251,245,0.06);
  transform: translateY(-4px);
}
.lw-offer-media {
  background-size: cover;
  background-position: center;
  aspect-ratio: 16 / 10;
  transition: transform 1s var(--ease);
}
.lw-offer:hover .lw-offer-media { transform: scale(1.03); }
.lw-offer-body { padding: 22px 24px 24px; display: flex; flex-direction: column; flex: 1; }
.lw-offer-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.lw-offer-tag {
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--peach);
  padding: 6px 14px;
  border: 1px solid rgba(251,199,148,0.35);
  border-radius: 999px;
}
.lw-offer-price {
  font-family: var(--f-display);
  font-size: 24px;
  color: var(--ivory);
  font-weight: 400;
}
.lw-offer-price em {
  font-family: var(--f-body);
  font-size: 12px;
  font-style: normal;
  color: rgba(251,199,148,0.7);
  margin-left: 4px;
  letter-spacing: 1px;
}
.lw-offer-body h3 {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(20px, 1.6vw, 24px);
  color: var(--ivory);
  line-height: 1.2;
  margin-bottom: 10px;
}
.lw-offer-body p {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(254,251,245,0.7);
  margin-bottom: 14px;
  max-width: none;
}
.lw-offer-foot {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(251,199,148,0.15);
  margin-top: auto;
}
.lw-offer-foot ul {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.lw-offer-foot li {
  font-size: 13px;
  color: rgba(254,251,245,0.75);
}
.lw-offer-foot i {
  color: var(--peach);
  margin-right: 10px;
  font-size: 10px;
}
.lw-offer .lw-btn-outline {
  color: var(--ivory);
  border-color: rgba(251,199,148,0.4);
  align-self: flex-start;
}
.lw-offer .lw-btn-outline:hover {
  background: var(--peach);
  color: var(--brown-deep);
  border-color: var(--peach);
}

/* =============== EVENTS — SLIDER =============== */
.lw-events {
  padding: var(--section-y) var(--pad-x);
  background: var(--paper);
}
.lw-events-head {
  max-width: var(--max-content);
  margin: 0 auto var(--head-mb);
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 30px;
  flex-wrap: wrap;
}
.lw-events-nav {
  display: flex;
  gap: 12px;
}
.lw-events-arrow {
  width: 54px; height: 54px;
  border-radius: 50%;
  border: 1px solid var(--hair-strong);
  color: var(--brown-deep);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: all .3s var(--ease);
}
.lw-events-arrow:hover {
  background: var(--wine);
  border-color: var(--wine);
  color: var(--ivory);
  transform: translateY(-2px);
}

.lw-events-slider {
  max-width: var(--max-content);
  margin: 0 auto;
}
.lw-events-viewport {
  overflow: hidden;
}
.lw-events-track {
  display: flex;
  column-gap: 24px;
  transition: transform .7s var(--ease);
  will-change: transform;
}

.lw-ev-card {
  flex: 0 0 calc((100% - 48px) / 3);
  background: var(--ivory);
  border: 1px solid var(--hair);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
  display: flex;
  flex-direction: column;
}
.lw-ev-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 60px rgba(78,40,17,0.12);
}
.lw-ev-card figure {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
}
.lw-ev-card figure img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease);
}
.lw-ev-card:hover figure img { transform: scale(1.06); }
.lw-ev-card figure::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(46,22,8,0) 55%, rgba(46,22,8,0.55) 100%);
  pointer-events: none;
}

.lw-ev-card-num {
  position: absolute;
  top: 16px; left: 16px;
  background: rgba(46,22,8,0.75);
  backdrop-filter: blur(6px);
  color: var(--peach);
  font-family: var(--f-italic);
  font-style: italic;
  font-size: 24px;
  padding: 4px 14px;
  border-radius: 999px;
  border: 1px solid rgba(251,199,148,0.3);
  line-height: 1.2;
  z-index: 2;
}
.lw-ev-card-cap {
  position: absolute;
  bottom: 16px; left: 16px;
  color: var(--ivory);
  font-size: 11px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  font-weight: 600;
  padding: 6px 12px;
  background: rgba(46,22,8,0.78);
  border: 1px solid rgba(251,199,148,0.4);
  border-radius: 999px;
  z-index: 2;
  backdrop-filter: blur(6px);
}

.lw-ev-card-body {
  padding: 28px 28px 30px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.lw-ev-card-place {
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--wine);
  font-weight: 600;
  margin-bottom: 12px;
}
.lw-ev-card-body h4 {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 24px;
  color: var(--brown-deep);
  line-height: 1.2;
  margin-bottom: 12px;
}
.lw-ev-card-body p {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--muted);
  margin-bottom: 22px;
  flex: 1;
}
.lw-ev-card-link {
  font-size: 11px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--wine);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-top: 18px;
  border-top: 1px solid var(--hair);
  align-self: flex-start;
}
.lw-ev-card-link i {
  font-size: 10px;
  transition: transform .3s var(--ease);
}
.lw-ev-card:hover .lw-ev-card-link { color: var(--wine-deep); }
.lw-ev-card:hover .lw-ev-card-link i { transform: translateX(6px); }

.lw-events-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 36px;
}
.lw-events-dot {
  width: 32px; height: 3px;
  background: var(--hair-strong);
  border-radius: 2px;
  transition: all .3s var(--ease);
  border: none;
  padding: 0;
  cursor: pointer;
}
.lw-events-dot.is-active {
  background: var(--wine);
  width: 52px;
}

/* =============== JOURNAL =============== */
.lw-journal {
  padding: var(--section-y) var(--pad-x);
  background: var(--cream);
}
.lw-journal-head {
  max-width: var(--max-content);
  margin: 0 auto var(--head-mb);
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 30px;
  flex-wrap: wrap;
}
.lw-journal-grid {
  max-width: var(--max-content);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.lw-jr {
  background: var(--ivory);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--hair);
  transition: all .4s var(--ease);
  display: flex;
  flex-direction: column;
}
.lw-jr:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 60px rgba(78,40,17,0.12);
}
.lw-jr-media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
.lw-jr-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease);
}
.lw-jr:hover .lw-jr-media img { transform: scale(1.06); }
.lw-jr-cat {
  position: absolute;
  top: 18px; left: 18px;
  background: var(--paper);
  color: var(--wine);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 10px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  font-weight: 600;
}
.lw-jr-body {
  padding: 30px 30px 32px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.lw-jr-date {
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
}
.lw-jr-body h3 {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 24px;
  color: var(--brown-deep);
  line-height: 1.2;
  margin-bottom: 14px;
}
.lw-jr-body p {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--muted);
  margin-bottom: 24px;
  flex: 1;
}
.lw-jr-body > a { margin-top: auto; align-self: flex-start; }

/* =============== VOICES / TESTIMONIALS — SLIDER =============== */
.lw-voices {
  padding: var(--section-y) var(--pad-x);
  background: var(--paper);
}
.lw-voices-head {
  max-width: var(--max-content);
  margin: 0 auto var(--head-mb);
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 30px;
  flex-wrap: wrap;
}
.lw-voices-nav {
  display: flex;
  gap: 12px;
}
.lw-voices-arrow {
  width: 54px; height: 54px;
  border-radius: 50%;
  border: 1px solid var(--hair-strong);
  color: var(--brown-deep);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: all .3s var(--ease);
}
.lw-voices-arrow:hover {
  background: var(--wine);
  border-color: var(--wine);
  color: var(--ivory);
  transform: translateY(-2px);
}
.lw-voices-arrow:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.lw-voices-slider {
  max-width: var(--max-content);
  margin: 0 auto;
}
.lw-voices-viewport {
  overflow: hidden;
}
.lw-voices-track {
  display: flex;
  column-gap: 26px;
  transition: transform .7s var(--ease);
  will-change: transform;
}
.lw-voice {
  flex: 0 0 calc((100% - 26px) / 2);
  background: var(--ivory);
  border: 1px solid var(--hair);
  padding: 44px 40px 32px;
  border-radius: var(--radius-lg);
  position: relative;
  display: flex;
  flex-direction: column;
  transition: box-shadow .4s var(--ease), transform .4s var(--ease);
}
.lw-voice::before { display: none; }
.lw-voice:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 50px rgba(78,40,17,0.1);
}
.lw-voice-stars {
  color: var(--peach-deep);
  font-size: 13px;
  letter-spacing: 2px;
  margin-bottom: 20px;
}
.lw-voice p {
  font-family: var(--f-display);
  font-weight: 400;
  font-style: italic;
  font-size: 21px;
  line-height: 1.5;
  color: var(--brown-deep);
  margin-bottom: 32px;
  flex: 1;
}
.lw-voice footer {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 16px;
  padding-top: 22px;
  border-top: 1px solid var(--hair);
}
.lw-voice-who { display: flex; flex-direction: column; gap: 2px; }
.lw-voice-who strong {
  font-family: var(--f-body);
  font-weight: 600;
  font-size: 15px;
  color: var(--brown-deep);
  font-style: normal;
}
.lw-voice-who span {
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.5px;
  text-transform: none;
}
.lw-voice-tag {
  font-size: 10px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--wine);
  padding: 6px 12px;
  border: 1px solid var(--hair-strong);
  border-radius: 999px;
  font-weight: 600;
  white-space: nowrap;
}

.lw-voices-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 36px;
}
.lw-voices-dot {
  width: 32px; height: 3px;
  background: var(--hair-strong);
  border-radius: 2px;
  transition: all .3s var(--ease);
}
.lw-voices-dot.is-active {
  background: var(--wine);
  width: 52px;
}

/* =============== CONCIERGE =============== */
.lw-concierge {
  padding: var(--section-y) var(--pad-x);
  background: var(--wine);
  color: var(--ivory);
  position: relative;
  overflow: hidden;
}
.lw-concierge::before {
  content: '';
  position: absolute;
  top: 20%; right: -200px;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(251,199,148,0.14), transparent 70%);
  pointer-events: none;
}
.lw-concierge-inner {
  max-width: var(--max-content);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(50px, 8vw, 110px);
  align-items: center;
  position: relative;
  z-index: 1;
}
.lw-concierge-copy .lw-eyebrow { color: var(--peach); }
.lw-concierge-copy .lw-h2 { color: var(--ivory); }
.lw-concierge-copy .lw-h2 em { color: var(--peach); }
.lw-concierge-copy .lw-body { color: rgba(254,251,245,0.8); max-width: 480px; margin-bottom: 34px; }

.lw-concierge-chan {
  display: flex;
  gap: 30px;
  flex-wrap: wrap;
  margin-bottom: 40px;
  padding: 22px 0;
  border-top: 1px solid rgba(251,199,148,0.3);
  border-bottom: 1px solid rgba(251,199,148,0.3);
}
.lw-concierge-chan a {
  color: var(--peach);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.5px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: color .3s var(--ease);
}
.lw-concierge-chan a:hover { color: var(--ivory); }
.lw-concierge-chan i { color: var(--peach); }

.lw-concierge-media {
  position: relative;
  aspect-ratio: 5 / 6;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 8px solid rgba(251,199,148,0.15);
}
.lw-concierge-media img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.lw-concierge-card {
  position: absolute;
  bottom: -8px; left: -8px;
  background: var(--brown-deep);
  color: var(--ivory);
  padding: 22px 26px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(251,199,148,0.25);
  max-width: 250px;
}
.lw-cc-lbl {
  display: block;
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--peach);
  margin-bottom: 6px;
}
.lw-cc-val {
  display: block;
  font-family: var(--f-display);
  font-size: 22px;
  color: var(--ivory);
  margin-bottom: 4px;
}
.lw-cc-sub {
  display: block;
  font-size: 12px;
  color: rgba(254,251,245,0.65);
}

/* =============== NEWSLETTER =============== */
.lw-news {
  padding: var(--section-y-sm) var(--pad-x);
  background: var(--cream);
}
.lw-news-inner {
  max-width: var(--max-content);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.lw-news-copy h3 {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(28px, 3vw, 42px);
  color: var(--brown-deep);
  line-height: 1.15;
  margin-bottom: 16px;
}
.lw-news-copy .lw-body { margin-bottom: 0; }
.lw-news-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.lw-news-input {
  display: flex;
  background: var(--ivory);
  border: 1px solid var(--hair-strong);
  border-radius: 999px;
  padding: 6px;
  align-items: center;
}
.lw-news-input input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  padding: 14px 22px;
  color: var(--brown-deep);
  font-family: var(--f-body);
  font-size: 15px;
}
.lw-news-input input::placeholder { color: var(--muted); }
.lw-news-input button {
  width: 50px; height: 50px;
  background: var(--wine);
  color: var(--ivory);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all .3s var(--ease);
}
.lw-news-input button:hover { background: var(--brown-deep); }
.lw-news-check {
  font-size: 12.5px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  padding-left: 6px;
}
.lw-news-check input { accent-color: var(--wine); }

/* =============== FOOTER =============== */
.lw-footer {
  background: var(--brown-deep);
  color: rgba(254,251,245,0.75);
  padding: clamp(28px, 3vw, 40px) var(--pad-x) 0;
  position: relative;
  overflow: hidden;
}
.lw-footer-top {
  max-width: var(--max-content);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 30px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(251,199,148,0.15);
}
.lw-foot-brand img {
  height: 68px;
  width: auto;
  margin-bottom: 16px;
}
.lw-foot-brand p {
  font-size: 14px;
  line-height: 1.65;
  margin-bottom: 18px;
  max-width: 340px;
}
.lw-foot-social {
  display: flex;
  gap: 12px;
}
.lw-foot-social a {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(254,251,245,0.06);
  border: 1px solid rgba(251,199,148,0.2);
  color: var(--peach);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all .3s var(--ease);
}
.lw-foot-social a:hover {
  background: var(--peach);
  color: var(--brown-deep);
  border-color: var(--peach);
  transform: translateY(-2px);
}

.lw-foot-col h5 {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 17px;
  color: var(--peach);
  margin-bottom: 14px;
  letter-spacing: 0.5px;
}
.lw-foot-col ul { display: flex; flex-direction: column; gap: 8px; }
.lw-foot-col a {
  font-size: 14px;
  color: rgba(254,251,245,0.75);
  transition: color .3s var(--ease);
}
.lw-foot-col a:hover { color: var(--peach); padding-left: 4px; }
.lw-foot-col address {
  font-style: normal;
  font-size: 14px;
  line-height: 1.7;
}

.lw-foot-wordmark {
  max-width: var(--max-content);
  margin: 20px auto 0;
  font-family: var(--f-display);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(56px, 10vw, 140px);
  color: rgba(255,255,255,0.42);
  letter-spacing: -4px;
  line-height: 0.9;
  white-space: nowrap;
  overflow: hidden;
  text-align: center;
  user-select: none;
  pointer-events: none;
}

.lw-footer-bar {
  max-width: var(--max-content);
  margin: 0 auto;
  padding: 16px 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  font-size: 12.5px;
  color: rgba(254,251,245,0.55);
  flex-wrap: wrap;
  border-top: 1px solid rgba(251,199,148,0.1);
}
.lw-foot-links { display: flex; gap: 24px; flex-wrap: wrap; }
.lw-foot-links a:hover { color: var(--peach); }

/* =============== BACK TO TOP =============== */
.lw-top {
  position: fixed;
  right: 26px;
  bottom: 26px;
  width: 52px; height: 52px;
  color: var(--wine);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(10px);
  transition: all .3s var(--ease);
  z-index: 90;
  pointer-events: none;
}
.lw-top.is-visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.lw-top svg {
  position: absolute;
  inset: 0;
  color: var(--wine);
  transition: transform .5s var(--ease);
}
.lw-top:hover svg { transform: rotate(360deg); }
.lw-top i {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  font-size: 14px;
  line-height: 1;
  text-align: center;
  transition: transform .3s var(--ease);
}
.lw-top:hover i { transform: translateY(-3px); }

/* =============== RESPONSIVE =============== */
/* =============== RESPONSIVE — TABLET (≤1200px) =============== */
@media (max-width: 1200px) {
  :root { --pad-x: clamp(24px, 4.8vw, 72px); }

  .lw-nav ul { gap: 22px; }
  .lw-nav a { font-size: 11px; letter-spacing: 1px; }

  .lw-book-inner { grid-template-columns: 1fr; }
  .lw-book-badge {
    padding: 18px 26px;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    min-width: unset;
  }
  .lw-book-badge span { margin-bottom: 0; }
  .lw-book-fields { grid-template-columns: 1fr 1fr; }
  .lw-book-field { border-right: 1px solid var(--hair) !important; }
  .lw-book-field:nth-child(even) { border-right: none !important; }
  .lw-book-field:nth-child(-n+2) { border-bottom: 1px solid var(--hair); }
  .lw-book-go { width: 100%; padding: 22px; }

  .lw-rituals-grid { grid-template-columns: repeat(2, 1fr); }
  .lw-journal-grid { grid-template-columns: 1fr 1fr; }
  .lw-journal-grid > *:last-child { grid-column: span 2; }

  .lw-concierge-inner { gap: 50px; }
}

/* =============== RESPONSIVE — SMALL TABLET (≤980px) =============== */
@media (max-width: 980px) {
  /* Mobile header — hamburger LEFT, logo CENTER, Reserve RIGHT */
  .lw-header-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    position: relative;
  }
  .lw-brand {
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
  }
  .lw-head-cta { display: contents; }
  .lw-head-cta .lw-toggle {
    display: inline-flex;
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
  }
  .lw-head-cta .lw-btn-solid {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    padding: 12px 22px;
    font-size: 11px;
    letter-spacing: 2px;
  }
  .lw-nav {
    display: none;
    grid-column: 1 / -1;
    grid-row: 2;
  }
  .lw-nav.is-open {
    display: block;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--ivory);
    padding: 20px var(--pad-x) 28px;
    border-bottom: 1px solid var(--hair);
    box-shadow: 0 20px 40px rgba(46,22,8,0.12);
    max-height: calc(100vh - 100px);
    overflow-y: auto;
  }
  .lw-nav.is-open ul { flex-direction: column; gap: 0; align-items: stretch; }
  .lw-nav.is-open a {
    padding: 18px 4px;
    width: 100%;
    border-bottom: 1px solid var(--hair);
    justify-content: space-between;
    font-size: 13px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--brown-deep);
  }
  .lw-nav.is-open .lw-has-drop .lw-drop {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    box-shadow: none;
    background: var(--cream);
    border: none;
    padding: 12px 16px;
    margin: 8px 0 16px;
    min-width: unset;
    border-radius: var(--radius-md);
  }
  /* Drop items in mobile — remove bullets, add clean dividers */
  .lw-nav.is-open .lw-drop li {
    padding: 14px 0;
    border-bottom: 1px solid rgba(78, 40, 17, 0.1);
  }
  .lw-nav.is-open .lw-drop li:last-child { border-bottom: none; }
  .lw-nav.is-open .lw-drop li::before { display: none; }
  .lw-nav.is-open .lw-drop li a {
    padding: 0;
    border-bottom: none;
    letter-spacing: 0;
    text-transform: none;
    font-size: inherit;
  }
  .lw-nav.is-open .lw-drop-city {
    font-family: var(--f-display);
    font-size: 20px;
    color: var(--brown-deep);
    letter-spacing: -0.3px;
  }
  .lw-nav.is-open .lw-drop-name {
    font-family: var(--f-italic);
    font-style: italic;
    font-size: 15px;
    color: var(--peach-deep);
  }

  .lw-hero { height: 82vh; min-height: 520px; }
  .lw-hero-nums { top: 24px; right: 20px; }
  .lw-hero-caption { display: none; }
  .lw-hero-scroll { display: none; }

  .lw-run { padding: 30px 0; margin-top: 60px; }

  .lw-story-inner { grid-template-columns: 1fr; gap: 50px; }
  .lw-story-media { max-width: 520px; margin: 0 auto; }
  .lw-story-copy { padding-right: 0; }

  .lw-props-top { grid-template-columns: 1fr; gap: 24px; align-items: start; }
  .lw-props-stage { grid-template-columns: 1fr; }
  .lw-props-media { aspect-ratio: 16 / 10; }
  .lw-props-tabs { grid-template-columns: 1fr; }
  .lw-props-tab {
    border-right: none;
    border-bottom: 1px solid rgba(251,199,148,0.18);
    padding: 20px 18px;
  }
  .lw-props-tab:last-child { border-bottom: none; }
  .lw-props-tab::before { display: none; }
  .lw-props-tab.is-active { background: rgba(251,199,148,0.08); }

  .lw-rituals-head { grid-template-columns: 1fr; gap: 24px; }
  .lw-rituals-grid { grid-template-columns: 1fr 1fr; }

  .lw-dine-grid { grid-template-columns: 1fr; }
  .lw-offer { grid-template-columns: 1fr; }
  .lw-offer-media { min-height: 240px; }

  .lw-events-head { flex-direction: column; align-items: flex-start; gap: 24px; }
  .lw-journal-head { flex-direction: column; align-items: flex-start; gap: 24px; }

  .lw-journal-grid { grid-template-columns: 1fr; }
  .lw-journal-grid > *:last-child { grid-column: auto; }

  .lw-voices-head { flex-direction: column; align-items: flex-start; }

  .lw-concierge-inner { grid-template-columns: 1fr; gap: 60px; }
  .lw-news-inner { grid-template-columns: 1fr; gap: 24px; }
  .lw-footer-top { grid-template-columns: 1fr 1fr; gap: 40px; }
}

/* =============== RESPONSIVE — MOBILE LARGE (≤720px) =============== */
@media (max-width: 720px) {
  :root { --pad-x: 20px; }

  body { font-size: 14px; }

  .lw-strip { padding: 8px 0; }
  .lw-strip-track { font-size: 10px; letter-spacing: 1.5px; gap: 26px; }

  /* Mobile header — 3-col: hamburger left · logo centre · Book Now right */
  .lw-header-inner {
    padding: 12px var(--pad-x);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 60px;
    position: relative;
  }
  /* .lw-head-cta children flatten into the parent flex layout */
  .lw-head-cta { display: contents; }
  /* Hamburger goes first */
  .lw-toggle { order: 1; }
  /* Brand centres */
  .lw-brand {
    order: 2;
    margin: 0 auto;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
  .lw-brand img { height: 46px; }
  /* Reserve/Book Now button on the right */
  .lw-head-cta .lw-btn-solid {
    order: 3;
    display: inline-flex;
    padding: 10px 16px;
    font-size: 10.5px;
    letter-spacing: 1.5px;
  }
  /* Nav overlay drops below header when hamburger opens */
  .lw-nav { order: 99; }

  .lw-h2 { font-size: clamp(30px, 8vw, 40px); letter-spacing: -0.5px; margin-bottom: 14px; }
  .lw-body { font-size: 15px; line-height: 1.7; }
  .lw-eyebrow { font-size: 12px; letter-spacing: 3px; margin-bottom: 16px; }

  .lw-btn { padding: 12px 22px; font-size: 11px; letter-spacing: 2px; }
  .lw-btn-lg { padding: 15px 26px; font-size: 11px; }

  .lw-hero { height: 72vh; min-height: 480px; }
  .lw-hero-nums { top: 16px; right: 16px; font-size: 10px; gap: 10px; }
  .lw-hero-line { width: 30px; }
  .lw-hero-idx { font-size: 16px; }

  .lw-book { margin-top: 0; padding: 0 16px; }
  .lw-book-badge {
    flex-direction: column;
    align-items: flex-start;
    padding: 16px 22px;
    gap: 2px;
  }
  .lw-book-badge em { font-size: 16px; }
  .lw-book-fields { grid-template-columns: 1fr; }
  .lw-book-field {
    border-right: none !important;
    border-bottom: 1px solid var(--hair) !important;
    padding: 16px 22px;
  }
  .lw-book-field:last-child { border-bottom: none !important; }
  .lw-book-go { padding: 18px; }

  .lw-run { padding: 20px 0; margin-top: 0; }
  .lw-run-track { font-size: 42px; gap: 28px; letter-spacing: -1px; }

  /* Story */
  .lw-story-inner { gap: 40px; }
  .lw-story-media { aspect-ratio: auto; height: auto; }
  .lw-story-fig-a {
    position: relative;
    width: 100%;
    top: auto; left: auto; right: auto; bottom: auto;
    margin-bottom: 0;
    aspect-ratio: 4 / 3;
  }
  .lw-story-fig-b { display: none; }
  .lw-story-badge {
    position: relative;
    right: 0; bottom: 0;
    margin: 0 auto;
    width: fit-content;
    padding: 18px 22px;
  }
  .lw-story-badge-num { font-size: 44px; }
  .lw-story-quote { padding: 22px 24px 22px 36px; margin-bottom: 30px; }
  .lw-story-quote p { font-size: 18px; }

  /* Properties — horizontal slider on mobile */
  .lw-props-tabs {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 0 24px;
    padding: 0;
    border-top: none;
    border-bottom: none;
  }
  .lw-props-tabs::-webkit-scrollbar { display: none; }
  .lw-props-tab {
    flex: 0 0 78%;
    scroll-snap-align: start;
    border-bottom: none;
    border: 1px solid rgba(251,199,148,0.18);
    border-radius: var(--radius-md);
    margin-right: 12px;
    padding: 16px 14px;
    gap: 14px;
  }
  .lw-props-tab:last-child { margin-right: 0; }
  .lw-props-tab.is-active { border-color: var(--peach); }
  .lw-tab-num { font-size: 26px; }
  .lw-tab-name { font-size: 15px; }
  .lw-tab-city { font-size: 9px; letter-spacing: 2.5px; }
  .lw-props-media { aspect-ratio: 4 / 3; }
  .lw-media-badge { top: 14px; left: 14px; font-size: 10px; padding: 6px 12px 6px 10px; }
  .lw-props-panels { padding: 28px 22px; }
  .lw-panel-name { font-size: clamp(24px, 6vw, 30px); }
  .lw-panel-meta li { font-size: 13px; gap: 12px; }
  .lw-panel-meta i { width: 30px; height: 30px; font-size: 12px; }

  /* Rituals */
  .lw-rituals-grid { grid-template-columns: 1fr; gap: 16px; }
  .lw-ritual { padding: 30px 24px 26px; }
  .lw-ritual h3 { font-size: 20px; }

  /* Dining */
  .lw-dine-body { padding: 24px 22px; }
  .lw-dine-body h3 { font-size: 20px; }

  /* Offers */
  .lw-offers-head { flex-direction: column; align-items: flex-start; gap: 20px; }
  .lw-offer-body { padding: 24px 22px; }
  .lw-offer-body h3 { font-size: 22px; }
  .lw-offer-body > p { display: none; }
  .lw-offer-top { gap: 12px; }
  .lw-offer-price { font-size: 20px; }
  .lw-offer-foot { flex-direction: column; align-items: stretch; gap: 16px; }
  .lw-offer .lw-btn { width: 100%; justify-content: center; }

  /* Events */
  .lw-events-nav { display: none; }
  .lw-events-head { gap: 16px; margin-bottom: 24px; }
  .lw-ev-card-body { padding: 22px 22px 24px; }
  .lw-ev-card-body h4 { font-size: 20px; }

  /* Journal */
  .lw-jr-body { padding: 24px 22px 26px; }
  .lw-jr-body h3 { font-size: 21px; }
  .lw-jr-body > p { display: none; }

  /* Voices */
  .lw-voice { padding: 32px 26px 26px; flex: 0 0 100%; }
  .lw-voice p { font-size: 18px; }
  .lw-voice footer { flex-direction: column; align-items: flex-start; gap: 12px; }
  .lw-voice-tag { font-size: 9px; letter-spacing: 2px; padding: 5px 10px; }
  .lw-voices { position: relative; }
  .lw-voices-nav { display: none; }

  /* Concierge */
  .lw-concierge-inner { gap: 40px; }
  .lw-concierge-chan { flex-direction: column; gap: 16px; padding: 18px 0; }
  .lw-concierge-media { aspect-ratio: 4 / 5; border-width: 4px; }
  .lw-concierge-card {
    position: relative;
    left: 0; bottom: 0;
    margin: -22px auto 0;
    max-width: 100%;
    padding: 18px 22px;
  }
  .lw-cc-val { font-size: 18px; }

  /* Newsletter */
  .lw-news-copy h3 { font-size: clamp(24px, 6vw, 32px); }
  .lw-news-input input { padding: 12px 18px; font-size: 14px; }
  .lw-news-input button { width: 44px; height: 44px; }

  /* Footer */
  .lw-footer-top {
    grid-template-columns: 1fr;
    gap: 36px;
    padding-bottom: 50px;
  }
  .lw-foot-brand img { height: 72px; }
  .lw-foot-wordmark { font-size: 68px; letter-spacing: -2px; margin-top: 30px; }
  .lw-footer-bar {
    flex-direction: column;
    text-align: center;
    gap: 14px;
    padding: 24px 0 28px;
  }
  .lw-foot-links { justify-content: center; }

  .lw-top { right: 16px; bottom: 16px; width: 46px; height: 46px; }
}

/* =============== RESPONSIVE — MOBILE SMALL (≤440px) =============== */
@media (max-width: 440px) {
  .lw-strip-track > span:not([aria-hidden]) { font-size: 9.5px; }
  .lw-h2 { font-size: clamp(26px, 8vw, 34px); }
  .lw-hero { min-height: 440px; height: 68vh; }

  .lw-props-tab { padding: 14px 12px; gap: 10px; }
  .lw-tab-num { font-size: 22px; }
  .lw-tab-name { font-size: 14px; }

  .lw-ritual-icon { width: 48px; height: 48px; font-size: 18px; }

  .lw-story-badge { padding: 16px 20px; gap: 12px; }
  .lw-story-badge-num { font-size: 38px; }
  .lw-story-badge-txt { font-size: 11px; letter-spacing: 1.5px; }

  .lw-panel-name { font-size: 24px; }
  .lw-panel-desc { font-size: 14.5px; }

  .lw-ev-card-num { font-size: 20px; padding: 3px 12px; }
  .lw-ev-card-cap { font-size: 10px; padding: 5px 10px; }

  .lw-run-track { font-size: 36px; gap: 20px; }
}

/* =============== TOUCH DEVICES — remove hover artifacts =============== */
@media (hover: none) {
  .lw-ev-card:hover,
  .lw-ritual:hover,
  .lw-dine-card:hover,
  .lw-jr:hover,
  .lw-voice:hover,
  .lw-offer:hover,
  .lw-story-fig:hover,
  .lw-props-media:hover {
    transform: none;
  }
}

/* =============== MOBILE — TIGHTER VERTICAL RHYTHM (+4px extra breathing room) =============== */
@media (max-width: 720px) {
  :root {
    --section-y: clamp(40px, 6vw, 56px);
    --section-y-sm: clamp(32px, 5vw, 46px);
    --head-mb: clamp(24px, 4vw, 36px);
  }
}
@media (max-width: 480px) {
  :root {
    --section-y: 36px;
    --section-y-sm: 28px;
    --head-mb: 22px;
  }
}

/* =============== MOBILE — CARD SLIDERS WITH SLICK DOTS =============== */
@media (max-width: 720px) {
  /* Universal mobile body font-size normalisation — 14px across the site */
  body,
  p,
  li,
  address,
  .lw-body,
  .lw-ritual p,
  .lw-dine-card p,
  .lw-offer p,
  .lw-jr-body p,
  .lw-story-body p,
  .lw-props-lede,
  .lw-panel-desc,
  .lw-hero-caption,
  .lw-book-field label,
  .lw-book-field input,
  .lw-book-field select,
  .lw-foot-brand p,
  .lw-foot-col a,
  .lw-foot-col address,
  .lw-footer-bar,
  .lw-pg-sub,
  .lw-pg-intro p,
  .lw-of-lede,
  .lw-rs-body p,
  .lw-ex-body p,
  .lw-fc-card p,
  .lw-dp-body p,
  .lw-mp-body p,
  .lw-loc-info p,
  .lw-loc-info address,
  .lw-ct-block p,
  .lw-ct-info p,
  .lw-bl-body p,
  .lw-news-copy p { font-size: 14px !important; line-height: 1.7; }

  /* Convert grids to horizontal scroll-snap sliders */
  .lw-rituals-grid,
  .lw-dine-grid,
  .lw-offers-list,
  .lw-journal-grid,
  .lw-home-rooms-grid,
  .lw-home-pk-grid,
  .lw-home-nb-grid,
  .lw-fc-grid {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 4px 20px 12px;
    margin: 0 -20px;
    scroll-padding: 0 20px;
  }
  .lw-rituals-grid::-webkit-scrollbar,
  .lw-dine-grid::-webkit-scrollbar,
  .lw-offers-list::-webkit-scrollbar,
  .lw-journal-grid::-webkit-scrollbar,
  .lw-home-rooms-grid::-webkit-scrollbar,
  .lw-home-pk-grid::-webkit-scrollbar,
  .lw-home-nb-grid::-webkit-scrollbar,
  .lw-fc-grid::-webkit-scrollbar { display: none; }

  .lw-rituals-grid > *,
  .lw-dine-grid > *,
  .lw-offers-list > *,
  .lw-journal-grid > *,
  .lw-home-rooms-grid > *,
  .lw-home-pk-grid > *,
  .lw-home-nb-grid > *,
  .lw-fc-grid > * {
    flex: 0 0 82%;
    scroll-snap-align: center;
    min-width: 0;
  }
  .lw-journal-grid > *:last-child { grid-column: auto; }

  /* Constrain oversized card imagery on mobile so cards stay compact */
  .lw-home-pk-card {
    aspect-ratio: 4 / 5;
    max-height: 380px;
  }
  .lw-home-pk-card img { height: 100%; object-fit: cover; }
  .lw-home-rooms-grid > * figure { aspect-ratio: 4 / 3; overflow: hidden; }
  .lw-home-rooms-grid > * figure img { height: 100%; object-fit: cover; }
  .lw-fc-card { min-height: 0; padding: 24px 22px; }

  /* Tighten spacing between section header and slider on mobile */
  .lw-home-rooms-head,
  .lw-home-pk-head,
  .lw-home-nb-head {
    margin-bottom: 20px !important;
    gap: 14px !important;
  }
  .lw-home-pk-head .lw-btn,
  .lw-home-rooms-head .lw-btn,
  .lw-home-nb-head .lw-btn { align-self: flex-start; }

  /* Slick dots — appended by JS after each slider */
  .lw-slick-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 20px 0 0;
    list-style: none;
    margin: 0;
  }
  .lw-slick-dots button {
    width: 8px;
    height: 8px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(78, 40, 17, 0.22);
    cursor: pointer;
    transition: background .3s var(--ease), transform .3s var(--ease), width .3s var(--ease);
    display: block;
  }
  .lw-slick-dots button.is-active {
    background: var(--wine);
    width: 22px;
    border-radius: 999px;
  }
  /* Dots contrast for dark-background sections (Offers, Packages, Rooms) */
  .lw-offers .lw-slick-dots button,
  .lw-home-pk .lw-slick-dots button,
  .lw-home-rooms .lw-slick-dots button { background: rgba(251, 199, 148, 0.28); }
  .lw-offers .lw-slick-dots button.is-active,
  .lw-home-pk .lw-slick-dots button.is-active,
  .lw-home-rooms .lw-slick-dots button.is-active { background: var(--peach); }
}


/* ---- mobile hero payload: w_900 instead of w_1600 ---- */
@media (max-width: 1023px) {
  .lw-hero-slide[style*="banquet-hall-theatre-seating-ceremony_6f5d168d.jpg"],
  .lw-pg-hero-media[style*="banquet-hall-theatre-seating-ceremony_6f5d168d.jpg"] {
    background-image: url("https://assets.simplotel.com/simplotel/image/upload/q_auto,f_auto,w_900/shubh-vilas/banquet-hall-theatre-seating-ceremony_6f5d168d.jpg") !important;
  }
  .lw-hero-slide[style*="banquet-hall-wedding-stage-gold-decor_ffada558.jpg"],
  .lw-pg-hero-media[style*="banquet-hall-wedding-stage-gold-decor_ffada558.jpg"] {
    background-image: url("https://assets.simplotel.com/simplotel/image/upload/q_auto,f_auto,w_900/shubh-vilas/banquet-hall-wedding-stage-gold-decor_ffada558.jpg") !important;
  }
  .lw-hero-slide[style*="deluxe-room-king-bed-teal-accents_fe0707b7.jpg"],
  .lw-pg-hero-media[style*="deluxe-room-king-bed-teal-accents_fe0707b7.jpg"] {
    background-image: url("https://assets.simplotel.com/simplotel/image/upload/q_auto,f_auto,w_900/shubh-vilas/deluxe-room-king-bed-teal-accents_fe0707b7.jpg") !important;
  }
  .lw-hero-slide[style*="guest-corridor-room-doors-wide_14574fa0.jpg"],
  .lw-pg-hero-media[style*="guest-corridor-room-doors-wide_14574fa0.jpg"] {
    background-image: url("https://assets.simplotel.com/simplotel/image/upload/q_auto,f_auto,w_900/shubh-vilas/guest-corridor-room-doors-wide_14574fa0.jpg") !important;
  }
  .lw-hero-slide[style*="hotel-shubh-vilas-facade-exterior-night-01_c981661e.jpg"],
  .lw-pg-hero-media[style*="hotel-shubh-vilas-facade-exterior-night-01_c981661e.jpg"] {
    background-image: url("https://assets.simplotel.com/simplotel/image/upload/q_auto,f_auto,w_900/shubh-vilas/hotel-shubh-vilas-facade-exterior-night-01_c981661e.jpg") !important;
  }
  .lw-hero-slide[style*="lobby-reception-desk_0e65fe2f.jpg"],
  .lw-pg-hero-media[style*="lobby-reception-desk_0e65fe2f.jpg"] {
    background-image: url("https://assets.simplotel.com/simplotel/image/upload/q_auto,f_auto,w_900/shubh-vilas/lobby-reception-desk_0e65fe2f.jpg") !important;
  }
  .lw-hero-slide[style*="poolside-lawn-wedding-setup-aerial_68dfe8fb.jpg"],
  .lw-pg-hero-media[style*="poolside-lawn-wedding-setup-aerial_68dfe8fb.jpg"] {
    background-image: url("https://assets.simplotel.com/simplotel/image/upload/q_auto,f_auto,w_900/shubh-vilas/poolside-lawn-wedding-setup-aerial_68dfe8fb.jpg") !important;
  }
  .lw-hero-slide[style*="premium-room-king-bed-seating-corner_630beea4.jpg"],
  .lw-pg-hero-media[style*="premium-room-king-bed-seating-corner_630beea4.jpg"] {
    background-image: url("https://assets.simplotel.com/simplotel/image/upload/q_auto,f_auto,w_900/shubh-vilas/premium-room-king-bed-seating-corner_630beea4.jpg") !important;
  }
  .lw-hero-slide[style*="restaurant-indoor-dining-seating-01_b9f96cd1.jpg"],
  .lw-pg-hero-media[style*="restaurant-indoor-dining-seating-01_b9f96cd1.jpg"] {
    background-image: url("https://assets.simplotel.com/simplotel/image/upload/q_auto,f_auto,w_900/shubh-vilas/restaurant-indoor-dining-seating-01_b9f96cd1.jpg") !important;
  }
  .lw-hero-slide[style*="suite-bedroom-wide-view_92d02663.jpg"],
  .lw-pg-hero-media[style*="suite-bedroom-wide-view_92d02663.jpg"] {
    background-image: url("https://assets.simplotel.com/simplotel/image/upload/q_auto,f_auto,w_900/shubh-vilas/suite-bedroom-wide-view_92d02663.jpg") !important;
  }
  .lw-hero-slide[style*="suite-living-room-teal-sofa_42d39740.jpg"],
  .lw-pg-hero-media[style*="suite-living-room-teal-sofa_42d39740.jpg"] {
    background-image: url("https://assets.simplotel.com/simplotel/image/upload/q_auto,f_auto,w_900/shubh-vilas/suite-living-room-teal-sofa_42d39740.jpg") !important;
  }
}

/* ======================================================================
   NAVBAR + HERO  (CozyStay-style reference)
   ====================================================================== */

/* ---- top contact bar ---- */
.lw-topbar {
  position: relative;
  z-index: 120;
  background: #1A0E06;
  border-bottom: 1px solid rgba(251,199,148,0.14);
}
.lw-topbar-inner {
  max-width: 1560px;
  margin: 0 auto;
  padding: 11px var(--pad-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  font-size: 11px;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(254,251,245,0.82);
}
.lw-topbar-contact { display: flex; gap: 26px; flex-wrap: wrap; }
.lw-topbar a { color: inherit; text-decoration: none; }
.lw-topbar a:hover { color: var(--peach); }
@media (max-width: 1100px) { .lw-topbar-addr { display: none; } }
@media (max-width: 760px) {
  .lw-topbar-inner { justify-content: center; font-size: 10px; }
  .lw-topbar-contact { gap: 16px; }
  .lw-topbar-contact a:nth-child(3) { display: none; }
}

/* ---- header: [hamburger + nav] [logo] [cta] ---- */
.lw-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: transparent;
  border-bottom: 1px solid rgba(251,199,148,0.16);
  transition: background .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.lw-header-inner {
  max-width: 1560px;
  margin: 0 auto;
  padding: 14px var(--pad-x);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
}
.lw-head-left { display: flex; align-items: center; gap: 30px; justify-self: start; }
.lw-brand { justify-self: center; }
.lw-brand img { height: 62px; width: auto; display: block; }
.lw-head-cta { justify-self: end; display: flex; align-items: center; gap: 22px; }

/* hamburger */
.lw-toggle {
  display: inline-flex; flex-direction: column; justify-content: center;
  gap: 5px; width: 30px; height: 26px;
  background: none; border: 0; cursor: pointer; padding: 0;
}
.lw-toggle span {
  display: block; height: 1.5px; width: 100%;
  background: var(--ivory); transition: background .3s var(--ease);
}

/* short primary nav */
.lw-nav ul { display: flex; align-items: center; gap: 26px; list-style: none; margin: 0; padding: 0; }
.lw-nav a {
  position: relative; display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--ivory); text-decoration: none; padding: 8px 0;
  transition: color .2s var(--ease);
}
.lw-nav a:hover { color: var(--peach); }
.lw-nav a.is-active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 2px;
  height: 1px; background: currentColor;
}
.lw-plus { font-size: 9px; opacity: .8; }

/* dropdown */
.lw-has-drop { position: relative; }
.lw-drop {
  position: absolute; top: 100%; left: 0; min-width: 260px;
  background: var(--paper); border: 1px solid var(--hair);
  box-shadow: 0 22px 48px rgba(46,22,8,0.18);
  padding: 8px 0; margin: 0; list-style: none;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s var(--ease);
  display: block;
}
.lw-has-drop:hover .lw-drop,
.lw-has-drop:focus-within .lw-drop { opacity: 1; visibility: visible; transform: translateY(0); }
.lw-drop li { margin: 0; }
.lw-drop a {
  display: block; padding: 11px 20px; letter-spacing: .4px;
  text-transform: none; font-size: 13px; font-weight: 400;
  color: var(--brown-deep) !important;
}
.lw-drop a:hover { background: var(--cream); }
.lw-drop-city {
  display: block; font-size: 10px; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--muted);
}
.lw-drop-name { display: block; font-family: var(--f-display); font-size: 15px; }

/* right side */
.lw-head-rates {
  font-size: 12px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--ivory); text-decoration: none;
}
.lw-head-rates:hover { color: var(--peach); }
.lw-btn-outline {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 13px 26px;
  border: 1px solid rgba(251,199,148,0.85);
  background: transparent; color: var(--ivory);
  font-size: 12px; font-weight: 600; letter-spacing: 1.4px;
  text-transform: none; text-decoration: none; border-radius: 0;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.lw-btn-outline:hover { background: var(--peach); color: var(--brown-deep); border-color: var(--peach); }

/* scrolled state: solid ground, dark text */
.lw-header.is-scrolled {
  background: var(--paper);
  box-shadow: 0 12px 32px rgba(78,40,17,0.10);
  border-bottom-color: var(--hair);
}
.lw-header.is-scrolled .lw-nav a,
.lw-header.is-scrolled .lw-head-rates { color: var(--brown-deep); }
.lw-header.is-scrolled .lw-toggle span { background: var(--brown-deep); }
.lw-header.is-scrolled .lw-btn-outline { border-color: var(--wine); color: var(--wine); }
.lw-header.is-scrolled .lw-btn-outline:hover { background: var(--wine); color: #fff; }

@media (max-width: 1024px) {
  .lw-nav { display: none; }
  .lw-head-rates { display: none; }
  .lw-brand img { height: 52px; }
}

/* ---- hero: full-bleed under the header, centred copy ---- */
.lw-hero {
  position: relative;
  margin-top: calc(-1 * var(--header-h));
  height: 100vh;
  min-height: 620px;
  max-height: none;
  overflow: hidden;
  background: var(--brown-deep);
}
.lw-hero-caption {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(1200px, calc(100% - 48px));
  text-align: center;
  padding-top: var(--header-h);
  display: block;
  z-index: 6;
}
.lw-cap-tag {
  display: block; font-size: 12px; font-weight: 600;
  letter-spacing: 2.6px; text-transform: uppercase;
  color: var(--peach); margin-bottom: 20px;
}
.lw-cap-name {
  display: block;
  font-family: var(--f-display); font-weight: 300;
  font-size: clamp(38px, 6.4vw, 86px);
  line-height: 1.06; color: var(--ivory);
  letter-spacing: -0.5px; margin-bottom: 14px;
}
.lw-cap-loc {
  display: block; font-size: 13px; letter-spacing: 2px;
  text-transform: uppercase; color: rgba(254,251,245,0.78);
}

/* the numbered index and dots read as clutter against centred copy */
.lw-hero-nums { display: none; }
.lw-hero-dots { bottom: 150px; }

/* ---- centred booking bar ---- */
.lw-hero-book {
  position: absolute; left: 50%; bottom: 74px;
  transform: translateX(-50%);
  width: min(1000px, calc(100% - 48px));
  display: grid;
  grid-template-columns: repeat(3, 1fr) auto;
  align-items: stretch;
  border: 1px solid rgba(251,199,148,0.72);
  background: rgba(26,14,6,0.34);
  backdrop-filter: blur(8px);
  z-index: 6;
}
.lw-hero-book-field {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; padding: 17px 22px;
  border-right: 1px solid rgba(251,199,148,0.4);
}
.lw-hero-book-field label {
  font-size: 14px; color: var(--ivory); font-weight: 400;
  letter-spacing: .3px; white-space: nowrap;
}
.lw-hero-book-field select,
.lw-hero-book-field input {
  background: transparent; border: 0; color: var(--peach-soft);
  font-family: var(--f-body); font-size: 13px; text-align: right;
  cursor: pointer; width: 100%; min-width: 0;
}
.lw-hero-book-field input::-webkit-calendar-picker-indicator { filter: invert(1); opacity: .7; cursor: pointer; }
.lw-hero-book-go {
  padding: 17px 40px; border: 0; cursor: pointer;
  background: transparent; color: var(--ivory);
  font-family: var(--f-body); font-size: 14px; font-weight: 500;
  letter-spacing: .4px; white-space: nowrap;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.lw-hero-book-go:hover { background: var(--peach); color: var(--brown-deep); }

@media (max-width: 900px) {
  .lw-hero-book { grid-template-columns: 1fr 1fr; bottom: 34px; }
  .lw-hero-book-field:nth-child(3) { grid-column: 1 / -1; }
  .lw-hero-book-go { grid-column: 1 / -1; background: rgba(251,199,148,0.18); }
  .lw-hero-dots { bottom: 210px; }
}
@media (max-width: 560px) {
  .lw-hero-book { grid-template-columns: 1fr; }
  .lw-hero-book-field { border-right: 0; border-bottom: 1px solid rgba(251,199,148,0.4); }
}

/* inner pages keep their own hero, also under the header */
.lw-pg-hero { margin-top: calc(-1 * var(--header-h)); }
.lw-pg-hero-inner { padding-top: var(--header-h); }


/* ---- navbar/hero corrections after visual review ---- */
.lw-brand img {
  height: 88px;
  width: auto;
  min-width: 180px;
  object-fit: contain;
  display: block;
}
.lw-header.is-scrolled .lw-brand img { height: 68px; }

/* the active item must never inherit the old wine colour over a photo */
.lw-header:not(.is-scrolled) .lw-nav a.is-active { color: var(--peach); }
.lw-header.is-scrolled .lw-nav a.is-active { color: var(--wine); }

/* hero copy: small eyebrow, real headline, location under it */
.lw-cap-tag {
  font-size: 12px; letter-spacing: 2.6px; color: var(--peach);
  margin-bottom: 18px; white-space: nowrap;
}
.lw-cap-name {
  font-size: clamp(34px, 5vw, 68px);
  line-height: 1.1;
  /* the <br/> in the copy controls the break -- a ch cap fought it and forced
     a four-line ragged block */
  max-width: none;
  margin-inline: auto;
  margin-bottom: 18px;
}
.lw-cap-loc { font-size: 12px; letter-spacing: 2.2px; }

/* keep the booking bar on-screen whatever the hero height */
.lw-hero { min-height: 660px; }
.lw-hero-caption { top: 46%; }
.lw-hero-book { bottom: 60px; }
.lw-hero-dots { display: none; }

@media (max-width: 900px) {
  .lw-brand img { height: 54px; min-width: 118px; }
  .lw-cap-name { font-size: clamp(28px, 8vw, 40px); max-width: 14ch; }
  .lw-hero-caption { top: 40%; }
}

/* the hero caption was inheriting a flex column from the original design, which
   collapsed each span to its content width and made the <br/> meaningless */
.lw-hero-caption { display: block !important; }
.lw-cap-name { display: block; width: 100%; }

/* the original design pinned this caption to the right rail at max-width:260px
   with a border; the centred reference layout must reset all of it */
.lw-hero-caption {
  right: auto !important;
  bottom: auto !important;
  max-width: none !important;
  width: min(1200px, calc(100%% - 48px)) !important;
  text-align: center !important;
  border-right: 0 !important;
  padding-right: 0 !important;
}

/* COL-02: the eyebrow crosses a brightly-lit facade, so the copy needs its own
   scrim rather than relying on the hero veil alone */
.lw-hero-caption::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 130%; height: 190%;
  background: radial-gradient(ellipse at center, rgba(26,14,6,0.62) 0%, rgba(26,14,6,0.38) 45%, rgba(26,14,6,0) 72%);
  z-index: -1;
  pointer-events: none;
}
.lw-cap-tag { text-shadow: 0 1px 12px rgba(26,14,6,0.75); }
.lw-cap-name { text-shadow: 0 2px 26px rgba(26,14,6,0.55); }

/* FUN-05: at 390px the 3-column header grid let the CTA sit on top of the
   centred logo. Below 1024 the CTA is already duplicated in the sticky bottom
   bar and the overlay menu, so the header keeps only hamburger + logo. */
@media (max-width: 1024px) {
  .lw-header-inner {
    grid-template-columns: auto 1fr auto;
    padding: 12px var(--pad-x);
  }
  .lw-head-cta { display: none; }
  .lw-brand { justify-self: center; grid-column: 2; }
  .lw-head-left { grid-column: 1; }
}
@media (max-width: 560px) {
  .lw-brand img { height: 46px; min-width: 104px; }
}


/* ---- top bar: one line, contact only ---- */
.lw-topbar-inner {
  justify-content: center;
  padding: 9px var(--pad-x);
  flex-wrap: nowrap;
  white-space: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}
.lw-topbar-inner::-webkit-scrollbar { display: none; }
.lw-topbar-contact { gap: 34px; flex-wrap: nowrap; }
.lw-topbar-addr { display: none; }

/* ---- logo +25% (88 -> 110) ---- */
.lw-brand img { height: 110px; min-width: 225px; }
.lw-header.is-scrolled .lw-brand img { height: 84px; }

/* the taller logo needs the header row to grow with it */
.lw-header-inner { padding: 10px var(--pad-x); }

@media (max-width: 1024px) {
  .lw-brand img { height: 76px; min-width: 158px; }
  .lw-header.is-scrolled .lw-brand img { height: 64px; }
}
@media (max-width: 560px) {
  .lw-brand img { height: 58px; min-width: 122px; }
  .lw-topbar-contact { gap: 20px; font-size: 10px; }
}

/* no rule line under the navbar -- the header should read as part of the hero
   at rest, and the scrolled state already separates itself with a shadow */
.lw-header { border-bottom: 0 !important; }
.lw-header.is-scrolled { border-bottom: 0 !important; }

/* ---- overlay menu top row: mirrors the closed header ---- */
.lw-menu-top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  max-width: 1560px;
  margin: 0 auto;
  padding: 10px var(--pad-x);
  width: 100%;
}
.lw-menu-close {
  justify-self: start;
  background: none; border: 0; cursor: pointer;
  color: var(--ivory); font-size: 26px; line-height: 1;
  padding: 8px; width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: color .2s var(--ease);
}
.lw-menu-close:hover { color: var(--peach); }
.lw-menu-top .lw-brand { justify-self: center; }
.lw-menu-top .lw-brand img { height: 110px; min-width: 225px; }
.lw-menu-actions {
  justify-self: end;
  display: flex; align-items: center; gap: 22px;
}
.lw-menu-actions .lw-head-rates { display: inline-flex; color: var(--ivory); }
.lw-menu-actions .lw-btn-outline { border-color: rgba(251,199,148,0.85); color: var(--ivory); }
.lw-menu-actions .lw-btn-outline:hover { background: var(--peach); color: var(--brown-deep); }

@media (max-width: 1024px) {
  .lw-menu-actions .lw-head-rates { display: none; }
  .lw-menu-top .lw-brand img { height: 76px; min-width: 158px; }
}
@media (max-width: 640px) {
  .lw-menu-actions { display: none; }
  .lw-menu-top { grid-template-columns: auto 1fr auto; }
  .lw-menu-top .lw-brand img { height: 58px; min-width: 122px; }
}

/* ---- single contact icon replacing the top strip ---- */
.lw-contact-wrap { position: relative; display: inline-flex; }
.lw-contact-btn {
  width: 42px; height: 42px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; cursor: pointer;
  border: 1px solid rgba(251,199,148,0.55);
  color: var(--ivory); font-size: 14px;
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.lw-contact-btn:hover { background: var(--peach); color: var(--brown-deep); border-color: var(--peach); }
.lw-header.is-scrolled .lw-contact-btn { color: var(--wine); border-color: rgba(152,13,46,0.45); }
.lw-header.is-scrolled .lw-contact-btn:hover { background: var(--wine); color: #fff; border-color: var(--wine); }

.lw-contact-pop {
  position: absolute; top: calc(100% + 12px); right: 0;
  min-width: 320px; z-index: 130;
  background: var(--paper);
  border: 1px solid var(--hair);
  box-shadow: 0 24px 54px rgba(46,22,8,0.20);
  padding: 8px 0;
}
.lw-contact-pop[hidden] { display: none; }
.lw-contact-pop a {
  display: flex; align-items: flex-start; gap: 13px;
  padding: 12px 20px; text-decoration: none;
  color: var(--brown-deep); font-size: 14px;
}
.lw-contact-pop a:hover { background: var(--cream); }
.lw-contact-pop i { color: var(--peach-deep); margin-top: 4px; width: 16px; text-align: center; }
.lw-contact-pop span { display: flex; flex-direction: column; line-height: 1.35; }
.lw-contact-pop em {
  font-style: normal; font-size: 10px; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--muted);
}

/* the hero now begins at the very top of the document */
.lw-topbar { display: none !important; }

@media (max-width: 560px) {
  .lw-contact-pop { min-width: 268px; right: -8px; }
  .lw-contact-pop a { font-size: 13px; padding: 11px 16px; }
}

/* ======================================================================
   OVERLAY MENU  (restored - the block was lost in an earlier edit)
   ====================================================================== */
.lw-menu {
  position: fixed; inset: 0; z-index: 200;
  background: #0B0705;
  display: grid;
  grid-template-rows: auto 1fr;
  opacity: 0; visibility: hidden;
  transition: opacity .35s var(--ease), visibility .35s var(--ease);
  overflow-y: auto;
}
.lw-menu.is-open { opacity: 1; visibility: visible; }
.lw-menu[hidden] { display: none; }

.lw-menu-body {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr 0.9fr;
  gap: 56px;
  max-width: 1360px; width: 100%;
  margin: 0 auto; padding: 26px var(--pad-x) 72px;
  align-content: start;
}
.lw-menu-list { list-style: none; margin: 0; padding: 0; }
.lw-menu-list a {
  display: block; padding: 8px 0;
  font-family: var(--f-display);
  font-size: clamp(20px, 2.1vw, 27px);
  font-weight: 300; color: var(--ivory); text-decoration: none;
  transition: color .2s var(--ease);
}
.lw-menu-list a:hover, .lw-menu-list a.is-active { color: var(--peach); }

.lw-menu-sub { display: flex; gap: 48px; margin-top: 30px; }
.lw-menu-sub ul { list-style: none; margin: 0; padding: 0; }
.lw-menu-sub a {
  display: block; padding: 5px 0;
  font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase;
  color: rgba(254,251,245,0.62); text-decoration: none;
}
.lw-menu-sub a:hover { color: var(--peach); }

.lw-menu-media { align-self: start; }
.lw-menu-media img {
  width: 100%; height: 380px; object-fit: cover; display: block;
}

.lw-menu-info h3 {
  font-family: var(--f-display); font-weight: 400;
  font-size: 20px; color: var(--ivory); margin: 0 0 16px;
}
.lw-menu-info ul { list-style: none; margin: 0 0 28px; padding: 0; }
.lw-menu-info li {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 10px 0; border-bottom: 1px solid rgba(254,251,245,0.13);
  font-size: 13.5px; color: rgba(254,251,245,0.82);
}
.lw-menu-info li i { color: var(--peach); margin-top: 3px; }
.lw-menu-info a { color: inherit; text-decoration: none; }
.lw-menu-info a:hover { color: var(--peach); }
.lw-menu-social { display: flex; gap: 16px; }
.lw-menu-social a { color: rgba(254,251,245,0.72); font-size: 16px; }
.lw-menu-social a:hover { color: var(--peach); }

@media (max-width: 1000px) {
  .lw-menu-body { grid-template-columns: 1fr; gap: 32px; }
  .lw-menu-media { display: none; }
}

/* ---- call icon floating on the hero, right side, below the middle ---- */
.lw-contact-float {
  position: absolute;
  right: var(--pad-x);
  top: 62%;
  z-index: 7;
}
.lw-contact-float .lw-contact-btn {
  width: 52px; height: 52px; font-size: 16px;
  border-radius: 50%;
  background: rgba(26,14,6,0.42);
  backdrop-filter: blur(6px);
  border-color: rgba(251,199,148,0.75);
  color: var(--ivory);
}
.lw-contact-float .lw-contact-btn:hover {
  background: var(--peach); color: var(--brown-deep); border-color: var(--peach);
}
.lw-contact-float .lw-contact-pop { top: auto; bottom: calc(100% + 12px); right: 0; }

@media (max-width: 900px) {
  .lw-contact-float { top: auto; bottom: 130px; right: 16px; }
  .lw-contact-float .lw-contact-btn { width: 46px; height: 46px; }
}

/* the hero is the positioning context for the floating call button */
.lw-hero, .lw-pg-hero { position: relative; }

/* the nav, image and contact block are the three grid children -- the nav was
   the only direct child, so the restored columns fell to a new row */
.lw-menu-body > nav { grid-column: 1; }
.lw-menu-body > .lw-menu-media { grid-column: 2; align-self: start; }
.lw-menu-body > .lw-menu-info  { grid-column: 3; }
.lw-menu-body { align-items: start; }

/* COL-02 REGRESSION FIX: .lw-btn-outline was written for the transparent
   header (ivory on a photo) but the class is also used for in-page CTAs on the
   cream ground, where it measured 1.04:1 -- effectively invisible. Scope the
   ivory treatment to the header and overlay only, and give the in-page variant
   the wine treatment it had before. */
.lw-btn-outline {
  border-color: var(--wine);
  color: var(--wine);
}
.lw-btn-outline:hover {
  background: var(--wine);
  color: #fff;
  border-color: var(--wine);
}
.lw-header:not(.is-scrolled) .lw-btn-outline,
.lw-menu-actions .lw-btn-outline {
  border-color: rgba(251,199,148,0.85);
  color: var(--ivory);
}
.lw-header:not(.is-scrolled) .lw-btn-outline:hover,
.lw-menu-actions .lw-btn-outline:hover {
  background: var(--peach);
  color: var(--brown-deep);
  border-color: var(--peach);
}

/* pages that open on a light section (room details, filter pages) have no dark
   hero behind the header, so it is solid from the start -- the transparent
   treatment measured 1.04:1 there */
.lw-header--solid { background: var(--paper); }
.lw-header--solid::before { opacity: 0; }
.lw-header--solid .lw-nav a,
.lw-header--solid .lw-head-rates { color: var(--brown-deep); }
.lw-header--solid .lw-toggle span { background: var(--brown-deep); }
.lw-header--solid .lw-btn-outline { border-color: var(--wine); color: var(--wine); }
.lw-header--solid .lw-btn-outline:hover { background: var(--wine); color: #fff; }
.lw-header--solid .lw-contact-btn { color: var(--wine); border-color: rgba(152,13,46,0.45); }
/* those pages must not pull their first section up under the header */
.lw-header--solid ~ .lw-rm-intro,
.lw-header--solid ~ .lw-of-filter { margin-top: 0; }

/* the --solid CTA rule lost to .lw-header:not(.is-scrolled) .lw-btn-outline,
   which has the same specificity but comes later -- measured ivory on cream */
.lw-header.lw-header--solid:not(.is-scrolled) .lw-btn-outline {
  border-color: var(--wine);
  color: var(--wine);
}
.lw-header.lw-header--solid:not(.is-scrolled) .lw-btn-outline:hover {
  background: var(--wine); color: #fff; border-color: var(--wine);
}
.lw-header.lw-header--solid:not(.is-scrolled) .lw-contact-btn {
  color: var(--wine); border-color: rgba(152,13,46,0.45);
}

/* FUN-05: the property-bar label ran into the first nav link (measured 19px
   overlap). Give the row a real gap and let the nav shrink instead. */
.lw-prop-bar-inner {
  display: flex;
  align-items: center;
  gap: 28px;
}
.lw-prop-bar-label { flex: 0 0 auto; white-space: nowrap; }
.lw-prop-bar-nav { flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.lw-prop-bar-nav::-webkit-scrollbar { display: none; }
.lw-prop-bar-nav ul { flex-wrap: nowrap; }

/* CHILD PAGES: a property bar sits between the header and the hero, so the
   hero must NOT be pulled up under the header -- doing so slid the photo
   behind a cream bar and left the transparent header on cream (measured
   ivory-on-cream, unreadable). The negative pull only applies when the hero
   is the element immediately following the header. */
.lw-prop-bar ~ .lw-pg-hero,
.lw-prop-bar + .lw-pg-hero,
.lw-prop-bar ~ .lw-hero {
  margin-top: 0 !important;
}
.lw-prop-bar ~ .lw-pg-hero .lw-pg-hero-inner { padding-top: 0; }

/* on those pages the header sits on the cream property bar, so it is solid */
body:has(.lw-prop-bar) .lw-header:not(.is-scrolled) { background: var(--paper); }
body:has(.lw-prop-bar) .lw-header::before { opacity: 0; }
body:has(.lw-prop-bar) .lw-header:not(.is-scrolled) .lw-nav a,
body:has(.lw-prop-bar) .lw-header:not(.is-scrolled) .lw-head-rates { color: var(--brown-deep); }
body:has(.lw-prop-bar) .lw-header:not(.is-scrolled) .lw-toggle span { background: var(--brown-deep); }
body:has(.lw-prop-bar) .lw-header:not(.is-scrolled) .lw-btn-outline {
  border-color: var(--wine); color: var(--wine);
}
body:has(.lw-prop-bar) .lw-header:not(.is-scrolled) .lw-btn-outline:hover {
  background: var(--wine); color: #fff;
}
body:has(.lw-prop-bar) .lw-header:not(.is-scrolled) .lw-contact-btn {
  color: var(--wine); border-color: rgba(152,13,46,0.45);
}

/* On the child homepage a property bar sits above the hero, so a 100vh hero
   pushes its booking bar 134px below the fold (measured). Subtract the header
   and bar so the whole hero, caption and booking bar fit one screen. */
.lw-prop-bar ~ .lw-hero {
  height: calc(100vh - var(--header-h) - 64px);
  min-height: 520px;
}

/* ======================================================================
   CHILD PAGES: transparent header + slim glass property bar over the hero
   ====================================================================== */

/* the hero rises behind BOTH bars */
.lw-prop-bar ~ .lw-hero,
.lw-prop-bar ~ .lw-pg-hero {
  margin-top: calc(-1 * (var(--header-h) + var(--propbar-h, 46px))) !important;
}
.lw-prop-bar ~ .lw-hero .lw-hero-caption,
.lw-prop-bar ~ .lw-pg-hero .lw-pg-hero-inner {
  padding-top: calc(var(--header-h) + var(--propbar-h, 46px));
}

/* header stays transparent on child pages */
body:has(.lw-prop-bar) .lw-header:not(.is-scrolled) { background: transparent; }
body:has(.lw-prop-bar) .lw-header:not(.is-scrolled)::before { opacity: 1; }
body:has(.lw-prop-bar) .lw-header:not(.is-scrolled) .lw-nav a,
body:has(.lw-prop-bar) .lw-header:not(.is-scrolled) .lw-head-rates { color: var(--ivory); }
body:has(.lw-prop-bar) .lw-header:not(.is-scrolled) .lw-toggle span { background: var(--ivory); }
body:has(.lw-prop-bar) .lw-header:not(.is-scrolled) .lw-btn-outline {
  border-color: rgba(251,199,148,0.85); color: var(--ivory);
}
body:has(.lw-prop-bar) .lw-header:not(.is-scrolled) .lw-btn-outline:hover {
  background: var(--peach); color: var(--brown-deep); border-color: var(--peach);
}
body:has(.lw-prop-bar) .lw-header:not(.is-scrolled) .lw-contact-btn {
  color: var(--ivory); border-color: rgba(251,199,148,0.75);
}

/* ---- the property bar itself: slimmer + translucent over the hero ---- */
:root { --propbar-h: 46px; }

.lw-prop-bar {
  background: rgba(26,14,6,0.30);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 0;
  border-bottom: 1px solid rgba(251,199,148,0.22);
  box-shadow: none;
  top: var(--header-h);
  transition: background .3s var(--ease), border-color .3s var(--ease);
}
.lw-prop-bar-inner {
  padding-top: 0;
  padding-bottom: 0;
  min-height: var(--propbar-h);
}
.lw-prop-bar-label { color: var(--peach); }
.lw-prop-bar-nav a {
  color: rgba(254,251,245,0.92);
  font-size: 10.5px;
  letter-spacing: 1.6px;
}
.lw-prop-bar-nav a:hover,
.lw-prop-bar-nav a.is-active { color: var(--peach); }
.lw-prop-bar-more-btn span { background: var(--ivory); }

/* once scrolled past the hero it needs a solid ground to stay readable */
.lw-prop-bar.is-stuck {
  background: var(--paper);
  border-bottom-color: var(--hair);
  box-shadow: 0 1px 0 rgba(46,22,8,0.06);
}
.lw-prop-bar.is-stuck .lw-prop-bar-label { color: var(--wine); }
.lw-prop-bar.is-stuck .lw-prop-bar-nav a { color: var(--brown-deep); }
.lw-prop-bar.is-stuck .lw-prop-bar-nav a:hover,
.lw-prop-bar.is-stuck .lw-prop-bar-nav a.is-active { color: var(--wine); }
.lw-prop-bar.is-stuck .lw-prop-bar-more-btn span { background: var(--brown-deep); }

@media (max-width: 900px) {
  :root { --propbar-h: 42px; }
}


/* ---- 2. tighter header row so the two bars read as one unit ---- */
.lw-header-inner { padding-top: 6px; padding-bottom: 6px; }

/* ---- 3. both bars shrink on scroll ---- */
.lw-header { transition: background .3s var(--ease), box-shadow .3s var(--ease); }
.lw-header.is-scrolled .lw-header-inner { padding-top: 2px; padding-bottom: 2px; }
.lw-header.is-scrolled .lw-brand img { height: 62px; min-width: 128px; }
.lw-header.is-scrolled .lw-contact-btn { width: 36px; height: 36px; }
.lw-brand img,
.lw-header-inner,
.lw-contact-btn { transition: height .28s var(--ease), padding .28s var(--ease), min-width .28s var(--ease); }

/* header uses the same curve + duration so both bars move together */
.lw-header-inner,
.lw-brand img,
.lw-contact-btn {
  transition: height .28s cubic-bezier(.4,0,.2,1),
              padding .28s cubic-bezier(.4,0,.2,1),
              min-width .28s cubic-bezier(.4,0,.2,1),
              width .28s cubic-bezier(.4,0,.2,1);
}

/* tighter chrome: the 122px header was logo(110px) + 12px padding, so the
   logo is the lever. Header -> ~92px at rest, ~58px scrolled. */
.lw-brand img { height: 82px !important; min-width: 168px !important; }
.lw-header.is-scrolled .lw-brand img { height: 52px !important; min-width: 108px !important; }
.lw-header-inner { padding-top: 4px !important; padding-bottom: 4px !important; }
.lw-header.is-scrolled .lw-header-inner { padding-top: 2px !important; padding-bottom: 2px !important; }

/* larger logo, same header height -- the brand cell keeps the row height it
   had (82px) while the image itself renders bigger and overflows the cell
   symmetrically, so nothing else moves */
.lw-brand {
  height: 82px;
  display: flex;
  align-items: center;
  overflow: visible;
}
.lw-brand img {
  height: 104px !important;
  min-width: 214px !important;
  max-height: none;
}
.lw-header.is-scrolled .lw-brand { height: 52px; }
.lw-header.is-scrolled .lw-brand img { height: 66px !important; min-width: 136px !important; }

/* The logo already overflows symmetrically (measured -7px top and bottom),
   but the child bar painted over the lower half, so it only LOOKED like it
   grew upward. Lifting the brand above the bar lets the extra height show on
   both sides without changing any layout box. */
.lw-brand { position: relative; z-index: 3; }
.lw-header { z-index: 101; }

/* the logo file is now cropped to its ink (420x244, no internal padding), so
   CSS centring balances it. Height re-tuned for the new aspect ratio. */
.lw-brand img { height: 56px !important; min-width: 0 !important; width: auto; }
.lw-header.is-scrolled .lw-brand img { height: 38px !important; }
.lw-brand { height: auto; }

/* the cropped file is 1.72:1, so a 56px height gave only a 96px-wide mark.
   Size back up to match the earlier presence while keeping the balance. */
.lw-brand img { height: 76px !important; }
.lw-header.is-scrolled .lw-brand img { height: 48px !important; }
.lw-header-inner { padding-top: 7px !important; padding-bottom: 7px !important; }
.lw-header.is-scrolled .lw-header-inner { padding-top: 4px !important; padding-bottom: 4px !important; }

/* the rebuilt dropdown lost its list-reset, so <li> markers showed as bullets */
.lw-nav ul, .lw-drop { list-style: none; margin: 0; padding: 0; }
.lw-drop { padding: 8px 0; }
.lw-drop li { list-style: none; margin: 0; }
.lw-drop li::marker { content: none; }
/* the chevron sits inside .lw-plus; keep it sized and aligned */
.lw-plus { display: inline-flex; align-items: center; font-size: 9px; margin-left: 5px; }
.lw-plus i { font-size: 9px; line-height: 1; }

/* a ::before pseudo (5px brown square) was drawing the "bullets" in the
   dropdown -- not a list marker, which is why list-style:none did nothing */
.lw-drop li::before,
.lw-drop li::after { content: none !important; display: none !important; }

/* ---- overlay: expandable "Our Hotels" ---- */
.lw-menu-hasdrop { list-style: none; }
.lw-menu-drop-btn {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 8px 0;
  background: none; border: 0; cursor: pointer; text-align: left;
  font-family: var(--f-display); font-weight: 300;
  font-size: clamp(20px, 2.1vw, 27px); color: var(--ivory);
  transition: color .2s var(--ease);
}
.lw-menu-drop-btn:hover { color: var(--peach); }
.lw-menu-drop-btn i { font-size: 12px; transition: transform .25s var(--ease); }
.lw-menu-drop-btn[aria-expanded="true"] { color: var(--peach); }
.lw-menu-drop-btn[aria-expanded="true"] i { transform: rotate(180deg); }
.lw-menu-drop {
  list-style: none; margin: 2px 0 8px; padding: 0 0 0 2px;
  border-left: 1px solid rgba(251,199,148,0.28);
}
.lw-menu-drop[hidden] { display: none; }
.lw-menu-drop li { margin: 0; }
.lw-menu-drop a {
  display: block; padding: 8px 0 8px 16px;
  font-family: var(--f-body); font-size: 14px; font-weight: 400;
  color: rgba(254,251,245,0.86); text-decoration: none;
}
.lw-menu-drop a:hover { color: var(--peach); }
.lw-mdrop-city {
  display: block; font-size: 10px; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--muted-light, rgba(254,251,245,0.5));
}

/* ======================================================================
   TAP TARGETS (WCAG 2.2 -- 24px floor, 44px guideline)
   Measured 47 controls under 24px at 390px. The correct pattern is to size
   the CONTROL and draw the small visual dot INSIDE via ::before -- an
   expanded ::after hit-area does not satisfy a measured check.
   ====================================================================== */
.lw-hero-dot,
.lw-events-dot,
.lw-voices-dot,
.lw-rm-slider-dot,
.lw-props-dot {
  position: relative;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px;
  min-height: 44px;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.lw-hero-dot::before,
.lw-events-dot::before,
.lw-voices-dot::before,
.lw-rm-slider-dot::before,
.lw-props-dot::before {
  content: "";
  width: 9px; height: 9px;
  border-radius: 50%;
  background: rgba(254,251,245,0.42);
  transition: background .25s var(--ease), transform .25s var(--ease);
}
.lw-hero-dot.is-active::before,
.lw-events-dot.is-active::before,
.lw-voices-dot.is-active::before,
.lw-rm-slider-dot.is-active::before,
.lw-props-dot.is-active::before {
  background: var(--peach);
  transform: scale(1.25);
}
/* the dots sit in a row, so keep them from stacking too wide */
.lw-hero-dots, .lw-events-dots, .lw-voices-dots, .lw-rm-slider-dots { gap: 0; }

/* short inline links: give them a real 44px height without changing type */
@media (max-width: 820px) {
  .lw-foot-links a,
  .lw-footer-bar a,
  .lw-foot-col a,
  .lw-menu-sub a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* the remaining small controls are slider dots with no class of their own
   (bare <button>, only .is-active when current), so target them by their
   CONTAINER rather than by class -- the structural definition, not a naming
   convention */
[class*="-dots"] > button,
[class*="-dots"] > li > button,
[class*="slick-dots"] > li > button,
.lw-slick-dots > li > button {
  position: relative;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px; min-height: 44px;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  font-size: 0 !important;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
}
[class*="-dots"] > button::before,
[class*="-dots"] > li > button::before,
.lw-slick-dots > li > button::before {
  content: "";
  width: 9px; height: 9px; border-radius: 50%;
  background: rgba(254,251,245,0.42);
  transition: background .25s ease, transform .25s ease;
}
[class*="-dots"] > button.is-active::before,
[class*="-dots"] > li > button.is-active::before,
.lw-slick-dots > li > button.is-active::before {
  background: var(--peach); transform: scale(1.25);
}
/* dark-ground sliders need a darker dot */
.lw-events-dots > button::before,
.lw-voices-dots > button::before { background: rgba(46,22,8,0.30); }
.lw-events-dots > button.is-active::before,
.lw-voices-dots > button.is-active::before { background: var(--wine); }

/* ======================================================================
   MOBILE OVERLAY MENU AT ZOOM (measured: hscroll from 150%, vertical
   overflow from 125%). The menu was a fixed 3-column grid with fixed
   padding, so a zoomed viewport could not contain it.
   ====================================================================== */
.lw-menu {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.lw-menu-body {
  /* fluid columns: they collapse to one as the viewport narrows, with no
     breakpoint to fall between */
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: clamp(20px, 4vw, 56px);
  padding: clamp(14px, 3vw, 26px) clamp(16px, 5vw, 115px) clamp(40px, 8vw, 72px);
  max-width: 100%;
}
.lw-menu-top {
  padding: clamp(6px, 1.5vw, 10px) clamp(16px, 5vw, 115px);
  gap: clamp(10px, 2vw, 24px);
}
/* nothing inside may force the page wider than the viewport */
.lw-menu, .lw-menu * { max-width: 100%; min-width: 0; }
.lw-menu-info li { word-break: break-word; overflow-wrap: anywhere; }
.lw-menu-list a { font-size: clamp(17px, 4.4vw, 27px); }
.lw-menu-drop-btn { font-size: clamp(17px, 4.4vw, 27px); }

/* below ~900 effective px the image column costs more than it gives */
@media (max-width: 900px) {
  .lw-menu-media { display: none; }
}
/* very cramped: drop the top-row CTA so the close button and logo still fit */
@media (max-width: 560px) {
  .lw-menu-actions { display: none; }
  .lw-menu-top { grid-template-columns: auto 1fr; }
}

/* The auto-fit minmax floor still forced a 380px track inside a 260px
   viewport. Below 900px there is only ever one column, so state that plainly
   rather than relying on auto-fit to collapse. */
@media (max-width: 900px) {
  .lw-menu-body { grid-template-columns: 1fr !important; }
}
.lw-menu, .lw-menu-body, .lw-menu-top { overflow-x: hidden; }
.lw-menu-body > * { min-width: 0; max-width: 100%; }

/* the hero video kept its intrinsic 1200px box even when hidden; constrain it
   so it can never contribute to page width */
.lw-hero-video { max-width: 100% !important; width: 100% !important; }

/* Nothing may scroll the page sideways at any zoom. NOTE: do NOT use
   overflow-x: hidden here. On html it propagates to the viewport and makes the
   document a scroll container, which silently kills position:sticky on the
   header (measured: header top -1461 after a 1500px scroll). max-width plus the
   per-component min-width:0 rules already hold this -- verified window.scrollX
   stays 0 at every page, viewport and zoom level tested. */
html, body { max-width: 100%; }
body.lw-menu-open { overflow: hidden; }

/* At 175%+ zoom the menu list is taller than the viewport and the last items
   sat below the fold. The overlay scrolls, but the LIST also needs to be
   reachable without the top row eating the space -- so at extreme zoom the
   header row scrolls away with the content instead of staying fixed. */
@media (max-height: 520px), (max-width: 400px) {
  .lw-menu { display: block; }
  .lw-menu-top { position: static; }
  .lw-menu-body { padding-bottom: 96px; }
  .lw-menu-list a, .lw-menu-drop-btn { padding: 6px 0; font-size: clamp(16px, 5vw, 20px); }
  .lw-menu-sub { margin-top: 18px; }
  .lw-menu-sub a { min-height: 38px; }
}


/* very short viewports (400% zoom): trim the type so the copy still fits */
@media (max-height: 460px) {
  .lw-cap-name { font-size: clamp(20px, 5.6vw, 30px) !important; }
  .lw-cap-tag  { font-size: 10px !important; letter-spacing: 1.6px !important; }
  .lw-cap-loc  { font-size: 10px !important; }
  .lw-hero { padding-top: calc(var(--header-h, 90px) + 30px); }
}

/* ---- section rhythm scales instead of stepping ---- */
section { padding-left: 0; padding-right: 0; }
[class*="-inner"], [class*="-wrap"] {
  max-width: min(1560px, 100%);
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
}

/* ---- nothing may exceed the viewport at any zoom ---- */
img, video, iframe, table, pre { max-width: 100%; }
* { min-width: 0; }

/* ---- multi-column blocks collapse fluidly, not at fixed breakpoints ---- */
@media (max-width: 900px) {
  .lw-story-inner,
  .lw-dine-grid,
  .lw-journal-grid,
  .lw-footer-top,
  .lw-au-mv-cols,
  .lw-props-stage { grid-template-columns: 1fr !important; }
}


/* 1. the stat badge is absolutely placed with a PERCENTAGE offset, so a
      shorter container lifts it into the hero (measured 39px over the
      booking bar at 150%). In flow it can never collide. */
@media (max-height: 760px), (max-width: 1100px) {
  .lw-story-badge {
    position: static !important;
    right: auto !important;
    bottom: auto !important;
    margin: 18px auto 0;
    width: fit-content;
    max-width: 100%;
  }
}

/* 2. the hero must reserve room for the fixed mobile bottom bar so the
      booking form never sits under it (measured 59px at 200%) */
@media (max-height: 700px), (max-width: 900px) {
  .lw-hero { padding-bottom: calc(clamp(16px, 4vh, 34px) + var(--mobar-h, 64px)); }
}
@media (min-width: 901px) and (min-height: 701px) {
  .lw-hero { padding-bottom: clamp(16px, 4vh, 34px); }
}

/* 3. the floating call button sat across the booking bar at 200% */
@media (max-height: 760px) {
  .lw-contact-float { top: auto !important; bottom: calc(var(--mobar-h, 64px) + 108px) !important; }
}

/* 4. negative margins stop being safe once headings wrap at zoom */
@media (max-width: 1100px) {
  .lw-news-copy h3, .lw-news-copy h2,
  .lw-footer-top h3, .lw-foot-col h3 { margin-top: 0 !important; }
  .lw-eyebrow { margin-bottom: 10px; }
}

/* a general guard: no in-flow text block may carry a negative top margin at
   small sizes, which is what turns a tight design into a collision */
@media (max-width: 1100px) {
  h1, h2, h3, h4, p { margin-top: max(0px, var(--mt, 0px)); }
}


/* The floating call button crossed the booking bar by 46px once the hero
   became a flow column -- an absolute offset cannot know where the bar is.
   Inside the flow hero it becomes a flow-safe corner button above the bar. */
@media (max-height: 700px), (max-width: 900px) {
  .lw-hero { position: relative; }
  .lw-contact-float {
    position: absolute !important;
    right: clamp(10px, 3vw, 22px) !important;
    top: auto !important;
    bottom: auto !important;
    /* sit just above the booking bar, whatever height it is */
    margin-top: 0;
  }
  /* place it in the caption block so it flows with the copy, never over
     the bar below */
  .lw-hero-caption { position: relative !important; }
  .lw-hero-caption .lw-contact-float,
  .lw-hero > .lw-contact-float { bottom: calc(100% + 8px) !important; }
}

/* ======================================================================
   HERO -- one coherent rule set for every viewport
   The hero is a FLEX COLUMN at all sizes: caption then booking bar, in
   document order. Nothing is absolutely positioned, so no left/top offset
   can survive a breakpoint change and push content off-screen, and the
   caption and bar can never overlap at any zoom.
   ====================================================================== */
.lw-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  height: 100vh;
  min-height: 520px;
  overflow: hidden;
  background: var(--brown-deep);
  padding: calc(var(--header-h, 90px) + 24px) var(--pad-x)
           calc(clamp(18px, 4vh, 40px) + var(--mobar-h, 0px));
  margin-top: calc(-1 * var(--header-h, 90px));
}
@supports (height: 100dvh) { .lw-hero { height: 100dvh; } }

/* the media layers fill the hero behind everything */
.lw-hero-media, .lw-hero-veil, .lw-hero-video { position: absolute; inset: 0; }
.lw-hero-media { z-index: 0; }
.lw-hero-video { z-index: 0; }
.lw-hero-veil  { z-index: 1; }

/* caption: in flow, centred, no offsets */
.lw-hero-caption {
  position: relative !important;
  left: auto !important; right: auto !important;
  top: auto !important; bottom: auto !important;
  transform: none !important;
  margin: auto auto 0 !important;
  width: 100% !important;
  max-width: 1100px !important;
  padding: 0 0 clamp(18px, 4vh, 40px) !important;
  text-align: center !important;
  border: 0 !important;
  z-index: 6;
  display: block;
}
.lw-cap-tag {
  display: block; margin-bottom: clamp(8px, 1.6vh, 18px);
  font-size: clamp(10px, 1.1vw, 12px); letter-spacing: 2.4px;
  text-transform: uppercase; color: var(--peach); white-space: nowrap;
}
.lw-cap-name {
  display: block; margin: 0 0 clamp(8px, 1.6vh, 16px);
  font-family: var(--f-display); font-weight: 300;
  font-size: clamp(24px, 4.6vw, 64px); line-height: 1.1; color: var(--ivory);
}
.lw-cap-loc {
  display: block; font-size: clamp(10px, 1vw, 13px);
  letter-spacing: 2px; text-transform: uppercase; color: rgba(254,251,245,0.8);
}

/* booking bar: in flow beneath the caption */
.lw-hero-book {
  position: relative !important;
  left: auto !important; bottom: auto !important; transform: none !important;
  width: 100%; max-width: 1000px; margin: 0 auto !important;
  display: grid; grid-template-columns: repeat(3, 1fr) auto;
  border: 1px solid rgba(251,199,148,0.7);
  background: rgba(26,14,6,0.36);
  backdrop-filter: blur(8px);
  z-index: 6;
}
@media (max-width: 900px) {
  .lw-hero-book { grid-template-columns: 1fr 1fr; }
  .lw-hero-book-field:nth-child(3) { grid-column: 1 / -1; }
  .lw-hero-book-go { grid-column: 1 / -1; background: rgba(251,199,148,0.16); }
}
@media (max-width: 560px) {
  .lw-hero-book { grid-template-columns: 1fr; }
  .lw-hero-book-field { border-right: 0; border-bottom: 1px solid rgba(251,199,148,0.35); }
}

/* the numbered index and dots add clutter to a centred hero */
.lw-hero-nums, .lw-hero-dots { display: none; }

/* the mobile bottom bar exists only below 900px */
:root { --mobar-h: 0px; }
@media (max-width: 900px) { :root { --mobar-h: 64px; } }

/* floating call button: fixed to the viewport, above the mobile bar,
   never in the hero flow */
.lw-contact-float {
  position: fixed !important;
  right: clamp(12px, 2.5vw, 24px) !important;
  bottom: calc(var(--mobar-h, 0px) + 20px) !important;
  top: auto !important;
  z-index: 95;
}

/* the stat badge must never be percentage-positioned into the hero */
@media (max-height: 800px), (max-width: 1100px) {
  .lw-story-badge {
    position: static !important; right: auto !important; bottom: auto !important;
    margin: 18px auto 0; width: fit-content; max-width: 100%;
  }
}

/* nothing may exceed the viewport at any zoom (see the note above: no
   overflow-x clip here -- it breaks the sticky header) */
html, body { max-width: 100%; }
img, video, iframe { max-width: 100%; }

/* ======================================================================
   BOOK NOW MUST ALWAYS BE REACHABLE
   The header CTA hid at <=1024px while the mobile bottom bar only appeared
   at <=720px, so between 721-1024px (which includes 150% zoom on a laptop)
   there was NO booking action anywhere on the page. Aligning the two
   breakpoints closes the gap.
   ====================================================================== */
@media (max-width: 1024px) {
  .lw-mobar { display: flex !important; }
  :root { --mobar-h: 64px; }
}

/* keep the header CTA as long as it fits, so the bar is a supplement rather
   than the only route on tablets */
@media (min-width: 861px) and (max-width: 1024px) {
  .lw-head-cta { display: flex !important; }
  .lw-head-cta .lw-head-rates { display: none; }
  .lw-head-cta .lw-btn-outline { padding: 10px 16px; font-size: 11px; }
}

/* ---- 1. the badge stays in flow but on top of the collage ---- */
.lw-story-badge {
  position: relative;
  z-index: 4;
}
@media (max-height: 800px), (max-width: 1100px) {
  .lw-story-badge {
    position: relative !important;
    right: auto !important; bottom: auto !important;
    z-index: 4 !important;
    margin: 18px auto 0; width: fit-content; max-width: 100%;
  }
}
.lw-story-media { position: relative; z-index: 1; }

/* ======================================================================
   2. COMPACT BOOKING: above ~125% zoom (or on tablet/mobile) the inline
   form is replaced by a single Book Now button that opens it as a popup.
   ====================================================================== */
/* A maximised 1366x768 laptop leaves only ~600-660px of viewport after
   browser chrome, so a 700px height threshold hid the inline form at 100%
   zoom on a very common setup. The form only needs to yield when it genuinely
   cannot fit: below 900px wide, or under 520px of height. */
@media (max-width: 900px), (max-height: 520px) {
  .lw-hero-book { display: none !important; }
  .lw-hero-booktrigger { display: inline-flex !important; }
}
.lw-hero-booktrigger {
  display: none;
  align-items: center; justify-content: center;
  gap: 10px;
  margin: clamp(10px, 2vh, 20px) auto 0;
  padding: 14px 30px;
  border: 1px solid var(--peach);
  background: rgba(26,14,6,0.42);
  backdrop-filter: blur(8px);
  color: var(--ivory);
  font-family: var(--f-body); font-size: 13px; font-weight: 600;
  letter-spacing: 1.2px; cursor: pointer;
  z-index: 6;
}
.lw-hero-booktrigger:hover { background: var(--peach); color: var(--brown-deep); }

/* the popup itself */
.lw-bookpop {
  position: fixed; inset: 0; z-index: 210;
  display: grid; place-items: center;
  padding: clamp(12px, 4vw, 32px);
  background: rgba(11,7,5,0.72);
  backdrop-filter: blur(4px);
  opacity: 0; visibility: hidden;
  transition: opacity .28s var(--ease), visibility .28s var(--ease);
  overflow-y: auto;
}
.lw-bookpop.is-open { opacity: 1; visibility: visible; }
.lw-bookpop[hidden] { display: none; }
.lw-bookpop-card {
  width: min(560px, 100%);
  background: var(--paper);
  border: 1px solid var(--hair);
  box-shadow: 0 30px 80px rgba(46,22,8,0.4);
  padding: clamp(18px, 4vw, 30px);
  max-height: 92vh; overflow-y: auto;
}
.lw-bookpop-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 18px;
}
.lw-bookpop-head h3 {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(19px, 2.6vw, 24px); color: var(--brown-deep); margin: 0;
}
.lw-bookpop-close {
  background: none; border: 0; cursor: pointer;
  font-size: 22px; color: var(--brown-deep);
  width: 44px; height: 44px; display: inline-flex;
  align-items: center; justify-content: center;
}
.lw-bookpop-close:hover { color: var(--wine); }
.lw-bookpop .lw-hero-book {
  display: grid !important;
  grid-template-columns: 1fr;
  background: transparent; border: 0; backdrop-filter: none;
  width: 100%; max-width: none;
}
.lw-bookpop .lw-hero-book-field {
  border: 1px solid var(--hair); border-radius: 2px;
  margin-bottom: 10px; padding: 12px 14px;
}
.lw-bookpop .lw-hero-book-field label { color: var(--brown-deep); font-weight: 500; }
.lw-bookpop .lw-hero-book-field input,
.lw-bookpop .lw-hero-book-field select { color: var(--brown-deep); }
.lw-bookpop .lw-hero-book-field input::-webkit-calendar-picker-indicator { filter: none; }
.lw-bookpop .lw-hero-book-go {
  width: 100%; margin-top: 4px; padding: 15px;
  background: var(--wine); color: #fff; border: 0;
  font-size: 14px; font-weight: 600; letter-spacing: .6px; cursor: pointer;
}
.lw-bookpop .lw-hero-book-go:hover { background: var(--wine-deep); }

/* the separate hero trigger is gone -- the NAVBAR Book Now opens the popup */
.lw-hero-booktrigger { display: none !important; }

/* ---- inline "View more" (a text link, not a button) ---- */
.lw-more-link {
  color: var(--wine);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  cursor: pointer;
  white-space: nowrap;
  transition: color .2s var(--ease);
}
.lw-more-link:hover { color: var(--wine-deep); }
.lw-more-link:focus-visible { outline: 2px solid var(--wine); outline-offset: 2px; }
.lw-more-copy[hidden] { display: none; }
.lw-more-copy > p { margin-top: 14px; }

/* the link is inline text: it should flow after the final full stop rather
   than sit on its own line */
.lw-more-link { display: inline; margin-left: 4px; }

/* ======================================================================
   STAT BADGE -- glass instead of a solid wine block.
   The solid fill read as a sticker pasted on the photograph and hid a large
   part of the building. A translucent dark ground with a blur lets the image
   read through while keeping the numeral and label perfectly legible.
   ====================================================================== */
.lw-story-badge {
  background: linear-gradient(135deg, rgba(26,14,6,0.62) 0%, rgba(46,22,8,0.52) 100%) !important;
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  border: 1px solid rgba(251,199,148,0.34);
  border-radius: 4px;
  padding: 18px 24px !important;
  gap: 16px !important;
  box-shadow: 0 18px 44px rgba(26,14,6,0.34) !important;
}
.lw-story-badge-num {
  color: var(--peach) !important;
  font-size: 46px !important;
  text-shadow: 0 2px 12px rgba(26,14,6,0.5);
}
.lw-story-badge-txt {
  color: rgba(254,251,245,0.95) !important;
  font-size: 11px !important;
  letter-spacing: 1.8px !important;
  text-shadow: 0 1px 8px rgba(26,14,6,0.6);
}
/* a hairline rule between numeral and label reads more considered than a gap */
.lw-story-badge-num + .lw-story-badge-txt {
  padding-left: 16px;
  border-left: 1px solid rgba(251,199,148,0.3);
}

/* The glass badge must sit ON the photograph -- blurring the cream page
   behind it looked washed out. Overlap the image again, but anchor it in PX
   from the top (not a % from the bottom, which drifted into the hero under
   zoom and caused the original collision). */
.lw-story-media { position: relative; }
.lw-story-badge {
  position: absolute !important;
  left: 6% !important;
  right: auto !important;
  top: 64px !important;
  bottom: auto !important;
  z-index: 4 !important;
  margin: 0 !important;
  width: auto !important;
  max-width: min(78%, 340px) !important;
}
/* below tablet the collage stacks, so the badge returns to flow */
@media (max-width: 900px) {
  .lw-story-badge {
    position: relative !important;
    left: auto !important; top: auto !important;
    margin: 16px auto 0 !important;
    max-width: 100% !important;
    background: linear-gradient(135deg, rgba(26,14,6,0.9), rgba(46,22,8,0.86)) !important;
  }
}

/* ======================================================================
   PROPERTIES SECTION IN ONE FOLD
   Measured 1168px against a 900px viewport (heading 183 + tabs 90 +
   stage 665 + 130 padding). Everything scales with the viewport HEIGHT so
   the whole section lands inside one screen without shrinking the type on
   tall displays.
   ====================================================================== */
#properties, .lw-props {
  padding-top: clamp(34px, 5vh, 65px) !important;
  padding-bottom: clamp(34px, 5vh, 65px) !important;
}
.lw-props-top { margin-bottom: clamp(14px, 2.4vh, 30px) !important; }
.lw-props-top .lw-h2 { font-size: clamp(28px, 4.4vh, 46px) !important; line-height: 1.08 !important; }
.lw-props-top .lw-eyebrow { margin-bottom: clamp(6px, 1.2vh, 14px) !important; }
.lw-props-intro p { font-size: clamp(13px, 1.7vh, 16px) !important; line-height: 1.6 !important; }
.lw-props-tabs { margin-bottom: clamp(14px, 2.4vh, 30px) !important; }
.lw-props-tab { padding: clamp(10px, 1.8vh, 20px) clamp(12px, 2vw, 26px) !important; }
.lw-props-stage { height: clamp(300px, 46vh, 520px) !important; }
.lw-props-media, .lw-props-slide { height: 100% !important; }
.lw-props-panels { padding: clamp(16px, 2.6vh, 34px) !important; }
.lw-props-panel h3 { font-size: clamp(19px, 2.8vh, 28px) !important; }
.lw-props-panel p { font-size: clamp(12.5px, 1.6vh, 15px) !important; line-height: 1.55 !important; }

/* ======================================================================
   PROPERTIES PANEL -- room for the content, and a tidier fact layout.
   The panel needed 422px inside a 367px box (55px clipped, taking the last
   facts and the CTA with it). The stage grows, and the facts become a
   two-column chip grid so they read in half the vertical space.
   ====================================================================== */
.lw-props-stage {
  height: auto !important;
  min-height: clamp(380px, 52vh, 560px) !important;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: stretch;
}
.lw-props-media, .lw-props-slide { height: 100% !important; min-height: 100%; }

.lw-props-panels { position: relative; }
.lw-props-panel {
  display: none;
  flex-direction: column;
  gap: clamp(9px, 1.5vh, 15px);
  height: 100%;
  padding: clamp(20px, 3vh, 38px) clamp(20px, 2.4vw, 40px) !important;
  overflow: visible !important;
}
.lw-props-panel.is-active { display: flex; }

.lw-panel-tag {
  align-self: flex-start;
  padding: 6px 14px;
  border: 1px solid rgba(152,13,46,0.34);
  border-radius: 999px;
  font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--wine); font-weight: 600;
}
.lw-panel-name {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(21px, 3vh, 30px) !important;
  line-height: 1.12; color: var(--brown-deep); margin: 0 !important;
}
.lw-panel-loc {
  display: flex; align-items: center; gap: 8px; margin: 0 !important;
  font-size: clamp(12px, 1.6vh, 13.5px) !important; color: var(--muted);
}
.lw-panel-loc i { color: var(--wine); font-size: 12px; }
.lw-panel-desc {
  margin: 0 !important;
  font-size: clamp(12.5px, 1.65vh, 14.5px) !important;
  line-height: 1.6 !important; color: var(--ink);
  padding-top: clamp(8px, 1.4vh, 14px);
  border-top: 1px solid var(--hair);
}

/* facts as a two-column chip grid rather than a stacked list */
.lw-panel-meta {
  list-style: none; margin: 0 !important; padding: 0 !important;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(7px, 1.1vh, 11px);
}
.lw-panel-meta li {
  display: flex; align-items: center; gap: 9px;
  padding: clamp(7px, 1.1vh, 11px) 12px;
  background: var(--cream);
  border-radius: 3px;
  font-size: clamp(11.5px, 1.5vh, 13px);
  color: var(--brown-deep);
  line-height: 1.25;
}
.lw-panel-meta li i {
  color: var(--wine); font-size: 12px; flex: 0 0 auto;
}
.lw-panel-meta li span { min-width: 0; }
/* an odd last chip spans the row so the grid never looks unfinished */
.lw-panel-meta li:last-child:nth-child(odd) { grid-column: 1 / -1; }

.lw-props-panel .lw-btn {
  align-self: flex-start;
  margin-top: auto !important;
  padding: clamp(11px, 1.6vh, 14px) clamp(20px, 2vw, 28px);
  font-size: clamp(12px, 1.5vh, 13px);
}

@media (max-width: 900px) {
  .lw-props-stage { grid-template-columns: 1fr; }
  .lw-props-media { min-height: 240px; }
  .lw-panel-meta { grid-template-columns: 1fr; }
}

/* on shorter laptops the section ran ~10-55px past the fold; tighten the
   outer padding rather than clipping content again */
@media (max-height: 800px) {
  #properties, .lw-props { padding-top: 26px !important; padding-bottom: 26px !important; }
  .lw-props-top { margin-bottom: 12px !important; }
  .lw-props-tabs { margin-bottom: 12px !important; }
  .lw-props-stage { min-height: clamp(340px, 46vh, 460px) !important; }
}

/* ---- mobile bottom bar: present on EVERY page below 1024px ---- */
.lw-mobar {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 96;
  background: rgba(26,14,6,0.96);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(251,199,148,0.24);
  padding: 6px max(6px, env(safe-area-inset-left)) calc(6px + env(safe-area-inset-bottom));
}
@media (max-width: 1024px) { .lw-mobar { display: grid; grid-template-columns: repeat(4, 1fr); } }
.lw-mobar-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; min-height: 52px; padding: 6px 4px;
  background: none; border: 0; cursor: pointer;
  color: rgba(254,251,245,0.9); text-decoration: none;
  font-size: 10px; letter-spacing: .6px; text-transform: uppercase; font-weight: 600;
}
.lw-mobar-btn i { font-size: 15px; color: var(--peach); }
.lw-mobar-btn:active { color: var(--peach); }
.lw-mobar-btn[data-mobar="book"] { color: var(--peach); }

/* ---- tap targets: every interactive control clears the 24px floor on
   touch devices, without changing the type size ---- */
@media (pointer: coarse), (max-width: 1024px) {
  a, button, [role="button"] { min-height: 24px; }
  .lw-foot-links a, .lw-footer-bar a, .lw-foot-col a,
  .lw-menu-sub a, .lw-crumb a, .lw-panel-meta a,
  main a:not(.lw-btn):not(.lw-more-link) {
    display: inline-flex; align-items: center; min-height: 44px;
  }
  /* inline links inside prose keep the text flow but gain a taller hit box */
  p a, li a { display: inline; padding-block: 11px; }
}

/* ======================================================================
   BRAND HOMEPAGE HERO -- true full screen.
   The hero was 100vh but pulled up by only 41px against a 90px header, so it
   ended 41px short of the fold and left a cream strip. Sizing it to
   100vh + the header offset makes it fill the viewport exactly.
   ====================================================================== */
.lw-hero {
  height: calc(100vh + var(--header-h, 90px)) !important;
  min-height: calc(520px + var(--header-h, 90px)) !important;
}
@supports (height: 100dvh) {
  .lw-hero { height: calc(100dvh + var(--header-h, 90px)) !important; }
}
/* where a property bar also sits above it, clear both */
.lw-chrome ~ .lw-hero,
.lw-prop-bar ~ .lw-hero {
  height: calc(100vh + var(--header-h, 90px) + 39px) !important;
}

/* Overshoot correction: the hero is pulled up by its own negative margin, so
   its height must be 100vh PLUS exactly that pull -- not the header height
   guessed separately. Using the same token for both keeps them in step. */
.lw-hero {
  --hero-pull: var(--header-h, 90px);
  margin-top: calc(-1 * var(--hero-pull)) !important;
  height: calc(100vh + var(--hero-pull)) !important;
  min-height: calc(520px + var(--hero-pull)) !important;
}
@supports (height: 100dvh) {
  .lw-hero { height: calc(100dvh + var(--hero-pull)) !important; }
}
/* child pages: the bar sits below the hero, so no extra allowance */
.lw-chrome ~ .lw-hero,
.lw-prop-bar ~ .lw-hero {
  --hero-pull: 0px;
  margin-top: 0 !important;
  height: 100vh !important;
  min-height: 520px !important;
}
@supports (height: 100dvh) {
  .lw-chrome ~ .lw-hero, .lw-prop-bar ~ .lw-hero { height: 100dvh !important; }
}

/* The brand hero measured a 41px pull, not the 90px header token -- its
   header sits in normal flow there, so only the marquee-strip remnant
   overlaps. Setting height from the MEASURED pull makes it exact. */
.lw-hero { --hero-pull: 41px; }

/* The brand hero began at top:49px because a marquee-strip remnant sits above
   it, so height+offset overshot the fold by 90px. Pull it fully to the top of
   the document and make it exactly one viewport tall. */
.lw-hero {
  --hero-pull: 0px;
  margin-top: calc(-1 * (var(--header-h, 131px) + 8px)) !important;
  height: 100vh !important;
  min-height: 520px !important;
}
@supports (height: 100dvh) { .lw-hero { height: 100dvh !important; } }
/* the caption clears the overlaid header */
.lw-hero .lw-hero-caption { padding-top: calc(var(--header-h, 131px) * 0.5); }

/* the brand hero starts at -49px, so 100vh ends 49px short of the fold;
   add the pull back into the height (child pages start at 0 and stay 100vh) */
.lw-hero { height: calc(100vh + 49px) !important; }
@supports (height: 100dvh) { .lw-hero { height: calc(100dvh + 49px) !important; } }
.lw-chrome ~ .lw-hero, .lw-prop-bar ~ .lw-hero { height: 100vh !important; }
@supports (height: 100dvh) {
  .lw-chrome ~ .lw-hero, .lw-prop-bar ~ .lw-hero { height: 100dvh !important; }
}

/* the copy and booking form sit a little higher so the form is never near
   the fold edge */
.lw-hero-caption { padding-bottom: clamp(10px, 2vh, 22px) !important; }
.lw-hero { padding-bottom: clamp(26px, 5vh, 56px) !important; }

/* ---- hero +15% taller, content position unchanged ----
   The hero grows past the fold by 15%, but the caption and booking form keep
   their existing distance from the BOTTOM of the viewport, so the composition
   the client approved does not move -- only more photograph is shown. */
.lw-hero { height: calc((100vh + 49px) * 1.15) !important; }
@supports (height: 100dvh) {
  .lw-hero { height: calc((100dvh + 49px) * 1.15) !important; }
}
.lw-chrome ~ .lw-hero, .lw-prop-bar ~ .lw-hero { height: calc(100vh * 1.15) !important; }
@supports (height: 100dvh) {
  .lw-chrome ~ .lw-hero, .lw-prop-bar ~ .lw-hero { height: calc(100dvh * 1.15) !important; }
}
/* absorb the extra height ABOVE the content so the form stays put */
.lw-hero { justify-content: flex-end !important; }
.lw-hero-caption { margin-top: auto !important; }

/* The +15% pushed the form below the fold because the extra height was added
   BELOW the content. Anchor the caption and form to the VIEWPORT bottom so
   the extra height is absorbed above them and their position never changes. */
.lw-hero { position: relative; padding-bottom: 0 !important; }
.lw-hero-caption {
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  bottom: calc(100% - 100vh + clamp(112px, 15vh, 150px)) !important;
  width: min(1100px, calc(100% - 2 * var(--pad-x))) !important;
  margin: 0 !important;
}
.lw-hero-book {
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  bottom: calc(100% - 100vh + clamp(30px, 5vh, 56px)) !important;
  width: min(1000px, calc(100% - 2 * var(--pad-x))) !important;
  margin: 0 !important;
}

/* brand measured +20-23% because the 49px offset was multiplied too; add it
   outside the 15% so both pages land on the same +15% */
.lw-hero { height: calc(100vh * 1.15 + 49px) !important; }
@supports (height: 100dvh) { .lw-hero { height: calc(100dvh * 1.15 + 49px) !important; } }

/* ---- REVERTED: the +15% is undone; the hero is exactly one viewport tall
   again, with the caption and booking form anchored above the fold. ---- */
.lw-hero { height: calc(100vh + 49px) !important; }
@supports (height: 100dvh) { .lw-hero { height: calc(100dvh + 49px) !important; } }
.lw-chrome ~ .lw-hero, .lw-prop-bar ~ .lw-hero { height: 100vh !important; }
@supports (height: 100dvh) {
  .lw-chrome ~ .lw-hero, .lw-prop-bar ~ .lw-hero { height: 100dvh !important; }
}

/* ======================================================================
   HERO IMAGERY -- drop the scrim, keep a clean bottom gradient.
   The radial ellipse behind the caption dulled the middle of every
   photograph. Replaced by a single bottom-weighted gradient that only
   darkens where the copy and booking form actually sit.
   ====================================================================== */
.lw-hero-caption::before { content: none !important; display: none !important; }
.lw-cap-tag, .lw-cap-name, .lw-cap-loc { text-shadow: 0 2px 18px rgba(26,14,6,0.55); }

.lw-hero-veil {
  background: linear-gradient(180deg,
    rgba(26,14,6,0.62) 0%,
    rgba(26,14,6,0.46) 9%,
    rgba(26,14,6,0.16) 20%,
    rgba(26,14,6,0.00) 46%,
    rgba(26,14,6,0.42) 74%,
    rgba(26,14,6,0.80) 100%) !important;
}
/* inner-page heroes get the same treatment */
.lw-pg-hero::after {
  background: linear-gradient(180deg,
    rgba(26,14,6,0.58) 0%,
    rgba(26,14,6,0.20) 18%,
    rgba(26,14,6,0.05) 34%,
    rgba(26,14,6,0.45) 78%,
    rgba(26,14,6,0.78) 100%) !important;
}

/* ======================================================================
   BRAND DINING + EVENTS -- even cards and a clear route to the summary page
   ====================================================================== */

/* equal-height cards with their CTAs on a common baseline */
.lw-dine-grid { align-items: stretch; }
.lw-dine-card { display: flex; flex-direction: column; height: 100%; }
.lw-dine-card figure { margin: 0; overflow: hidden; }
.lw-dine-card figure img {
  width: 100%; height: clamp(200px, 26vh, 260px); object-fit: cover; display: block;
  transition: transform .6s var(--ease);
}
.lw-dine-card:hover figure img { transform: scale(1.04); }
.lw-dine-body { display: flex; flex-direction: column; flex: 1 1 auto; gap: 10px; }
.lw-dine-body h3 { margin: 0; }
.lw-dine-meta { margin-top: auto !important; }
.lw-dine-body > .lw-link { margin-top: 12px; align-self: flex-start; }

/* the fact rows read as chips, matching the properties panel */
.lw-dine-meta {
  list-style: none; padding: 0 !important;
  display: flex; flex-wrap: wrap; gap: 8px;
  padding-top: 12px !important; border-top: 1px solid var(--hair) !important;
}
.lw-dine-meta li {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 11px; background: var(--cream); border-radius: 3px;
  font-size: 12px; color: var(--brown-deep);
}
.lw-dine-meta li i { color: var(--wine); font-size: 11px; }

/* section-level CTA */
.lw-sec-ctas { display: flex; justify-content: center; margin-top: clamp(22px, 4vh, 40px); }
.lw-sec-cta {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 30px;
  border: 1px solid var(--wine); color: var(--wine);
  font-size: 12px; font-weight: 600; letter-spacing: 1.4px;
  text-transform: uppercase; text-decoration: none;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.lw-sec-cta:hover { background: var(--wine); color: #fff; }
.lw-sec-cta i { font-size: 11px; }
/* on the dark events band the CTA inverts */
.lw-events .lw-sec-cta { border-color: rgba(251,199,148,0.7); color: var(--peach); }
.lw-events .lw-sec-cta:hover { background: var(--peach); color: var(--brown-deep); }

@media (max-width: 900px) {
  .lw-dine-card figure img { height: clamp(180px, 30vh, 220px); }
}

/* ======================================================================
   DINING -- data-led feature panel (compact by design)
   ====================================================================== */
.lw-dine { padding: clamp(38px, 6vh, 74px) 0 !important; }
.lw-dine-head {
  max-width: var(--max-content); margin: 0 auto clamp(20px, 3vh, 34px);
  padding: 0 var(--pad-x); text-align: center;
}
.lw-dine-head .lw-h2 { font-size: clamp(26px, 4vh, 44px) !important; margin: 6px 0 10px !important; }
.lw-dine-head .lw-body { max-width: 60ch; margin: 0 auto; font-size: clamp(13px, 1.7vh, 15px); }

/* ---- feature: photo | facts, side by side ---- */
.lw-dinefeat {
  max-width: var(--max-content); margin: 0 auto; padding: 0 var(--pad-x);
  display: grid; grid-template-columns: 1.08fr 1fr; align-items: stretch;
  background: transparent;
}
.lw-dinefeat-media { position: relative; overflow: hidden; }
.lw-dinefeat-media img {
  width: 100%; height: 100%; min-height: clamp(240px, 34vh, 340px);
  object-fit: cover; display: block; transition: transform .7s var(--ease);
}
.lw-dinefeat:hover .lw-dinefeat-media img { transform: scale(1.04); }
.lw-dinefeat-flag {
  position: absolute; top: 16px; left: 16px;
  padding: 6px 14px; background: rgba(26,14,6,0.72);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(251,199,148,0.4);
  color: var(--peach); font-size: 10px; letter-spacing: 2px;
  text-transform: uppercase; font-weight: 600;
}

.lw-dinefeat-card {
  background: var(--ivory);
  border: 1px solid var(--hair); border-left: 0;
  padding: clamp(20px, 3vh, 34px) clamp(20px, 2.6vw, 40px);
  display: flex; flex-direction: column; gap: clamp(10px, 1.6vh, 16px);
}
.lw-dinefeat-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.lw-dinefeat-top h3 {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(24px, 3.4vh, 34px); color: var(--brown-deep);
  margin: 0; line-height: 1.05;
}
.lw-dinefeat-sub {
  margin: 4px 0 0; font-size: clamp(11px, 1.4vh, 12.5px);
  letter-spacing: 1.6px; text-transform: uppercase; color: var(--wine); font-weight: 600;
}
.lw-dinefeat-seats {
  flex: 0 0 auto; text-align: center; line-height: 1;
  padding: 9px 14px; border: 1px solid var(--hair); background: var(--cream);
}
.lw-dinefeat-seats strong {
  display: block; font-family: var(--f-italic); font-style: italic;
  font-size: clamp(21px, 2.8vh, 28px); color: var(--wine); font-weight: 400;
}
.lw-dinefeat-seats span {
  display: block; margin-top: 3px; font-size: 9px;
  letter-spacing: 1.6px; text-transform: uppercase; color: var(--muted);
}
.lw-dinefeat-desc {
  margin: 0; font-size: clamp(12.5px, 1.65vh, 14.5px); line-height: 1.6; color: var(--ink);
}

/* the facts read as a spec board, two per row */
.lw-dinefeat-specs {
  margin: 0; display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(8px, 1.2vh, 13px) 20px;
  padding-top: clamp(10px, 1.5vh, 15px); border-top: 1px solid var(--hair);
}
.lw-dinefeat-specs dt {
  font-size: 9.5px; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--muted); margin-bottom: 3px;
}
.lw-dinefeat-specs dd {
  margin: 0; font-size: clamp(12px, 1.55vh, 13.5px);
  color: var(--brown-deep); font-weight: 500;
}

.lw-dinefeat-hours {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: clamp(9px, 1.3vh, 13px) 15px;
  background: var(--brown-deep); color: var(--ivory);
}
.lw-dinefeat-hours i { color: var(--peach); font-size: 12px; }
.lw-dinefeat-hours-label {
  font-size: 9.5px; letter-spacing: 1.8px; text-transform: uppercase;
  color: rgba(254,251,245,0.72);
}
.lw-dinefeat-hours-time {
  margin-left: auto; font-size: clamp(12px, 1.6vh, 14px);
  font-weight: 600; color: var(--peach); letter-spacing: .4px;
}
.lw-dinefeat-card .lw-btn { align-self: flex-start; margin-top: 2px; }

/* ---- three supporting notes, one row ---- */
.lw-dine-sub {
  max-width: var(--max-content); margin: clamp(14px, 2vh, 22px) auto 0;
  padding: 0 var(--pad-x);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(10px, 1.4vw, 18px);
}
.lw-dinemini {
  display: flex; align-items: flex-start; gap: 12px;
  padding: clamp(12px, 1.8vh, 18px) clamp(13px, 1.4vw, 20px);
  background: var(--cream); border: 1px solid var(--hair);
}
.lw-dinemini-ico {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
  background: var(--ivory); border: 1px solid var(--hair);
  display: inline-flex; align-items: center; justify-content: center;
}
.lw-dinemini-ico i { color: var(--wine); font-size: 13px; }
.lw-dinemini h4 {
  margin: 0 0 3px; font-size: clamp(13px, 1.7vh, 15px);
  color: var(--brown-deep); font-weight: 600;
}
.lw-dinemini p {
  margin: 0; font-size: clamp(11.5px, 1.45vh, 13px);
  line-height: 1.5; color: var(--muted);
}

.lw-dine .lw-sec-ctas { margin-top: clamp(16px, 2.4vh, 28px); }

@media (max-width: 900px) {
  .lw-dinefeat { grid-template-columns: 1fr; }
  .lw-dinefeat-card { border-left: 1px solid var(--hair); border-top: 0; }
  .lw-dine-sub { grid-template-columns: 1fr; }
  .lw-dinefeat-specs { grid-template-columns: 1fr 1fr; }
}

/* compact the dining section further: measured head 177 + feature 415 +
   notes 85 + 79 padding = 856 on a 660px laptop viewport. Trimming the
   heading block and the feature media brings it inside one fold without
   losing any content. */
.lw-dine { padding: clamp(28px, 4.4vh, 60px) 0 !important; }
.lw-dine-head { margin-bottom: clamp(14px, 2.2vh, 26px) !important; }
.lw-dine-head .lw-h2 { font-size: clamp(23px, 3.4vh, 40px) !important; margin: 4px 0 8px !important; }
.lw-dine-head .lw-body { font-size: clamp(12.5px, 1.55vh, 14.5px) !important; line-height: 1.55 !important; }
.lw-dinefeat-media img { min-height: clamp(210px, 27vh, 300px) !important; }
.lw-dinefeat-card { padding: clamp(16px, 2.4vh, 30px) clamp(18px, 2.4vw, 36px) !important; gap: clamp(8px, 1.3vh, 14px) !important; }
.lw-dinefeat-desc { font-size: clamp(12px, 1.55vh, 14px) !important; line-height: 1.55 !important; }
.lw-dine-sub { margin-top: clamp(10px, 1.6vh, 18px) !important; }
.lw-dinemini { padding: clamp(10px, 1.5vh, 15px) clamp(12px, 1.3vw, 18px) !important; }

/* on short laptop viewports drop the supporting notes to two columns and
   tighten the photo so the whole section clears a 660px fold */
@media (max-height: 700px) {
  .lw-dine { padding: 24px 0 !important; }
  .lw-dine-head { margin-bottom: 12px !important; }
  .lw-dinefeat-media img { min-height: 190px !important; }
  .lw-dine-sub { grid-template-columns: repeat(3, 1fr); margin-top: 10px !important; }
  .lw-dinemini { padding: 9px 12px !important; }
  .lw-dinemini p { display: none; }
  .lw-dinemini-ico { width: 28px; height: 28px; }
}

/* ---- dining: stacked panels, only the active one shown ---- */
.lw-dinestage { position: relative; }
.lw-dinefeat { display: none !important; }
.lw-dinefeat.is-active { display: grid !important; animation: lwDineIn .4s var(--ease); }
@keyframes lwDineIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---- the three venue names below ---- */
.lw-dinetabs {
  max-width: var(--max-content); margin: clamp(12px, 1.8vh, 20px) auto 0;
  padding: 0 var(--pad-x);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(8px, 1.2vw, 16px);
}
.lw-dinetab {
  display: flex; align-items: center; gap: 12px;
  padding: clamp(12px, 1.7vh, 17px) clamp(14px, 1.4vw, 20px);
  background: var(--cream); border: 1px solid var(--hair);
  cursor: pointer; text-align: left; min-height: 44px;
  transition: background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.lw-dinetab:hover, .lw-dinetab.is-active { background: var(--brown-deep); border-color: var(--brown-deep); }
.lw-dinetab-n {
  font-family: var(--f-italic); font-style: italic; font-size: 19px;
  color: var(--peach-deep); line-height: 1; flex: 0 0 auto;
  transition: color .25s var(--ease);
}
.lw-dinetab:hover .lw-dinetab-n, .lw-dinetab.is-active .lw-dinetab-n { color: var(--peach); }
.lw-dinetab-name {
  font-size: clamp(12.5px, 1.6vh, 14.5px); font-weight: 600;
  color: var(--brown-deep); letter-spacing: .3px; transition: color .25s var(--ease);
}
.lw-dinetab:hover .lw-dinetab-name, .lw-dinetab.is-active .lw-dinetab-name { color: var(--ivory); }
.lw-dinetab:focus-visible { outline: 2px solid var(--wine); outline-offset: 2px; }

@media (max-width: 700px) {
  .lw-dinetabs { grid-template-columns: 1fr; gap: 8px; }
}

/* ======================================================================
   DINING PANELS -- smooth cross-fade, no height jump.
   display:none/grid snapped the container height between panels (417px vs
   others), which read as a jerk. All three panels are now STACKED in the
   same box: the stage reserves the tallest, and switching is a pure
   opacity/transform cross-fade with nothing reflowing.
   ====================================================================== */
.lw-dinestage {
  position: relative;
  display: grid;               /* all panels share one grid cell */
}
.lw-dinefeat {
  display: grid !important;    /* never toggled off, so no reflow */
  grid-area: 1 / 1;            /* every panel occupies the same cell */
  grid-template-columns: 1.08fr 1fr;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .42s var(--ease), transform .42s var(--ease), visibility .42s var(--ease);
  pointer-events: none;
  animation: none !important;  /* the old keyframe caused the visible jump */
}
.lw-dinefeat.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
  position: relative;
  z-index: 2;
}
/* the media crossfades a touch slower so the image settles last */
.lw-dinefeat .lw-dinefeat-media img { transition: transform .7s var(--ease), opacity .5s var(--ease); }

/* the tab itself animates rather than snapping */
.lw-dinetab {
  transition: background .3s var(--ease), border-color .3s var(--ease), transform .2s var(--ease);
}
.lw-dinetab:hover { transform: translateY(-2px); }

@media (prefers-reduced-motion: reduce) {
  .lw-dinefeat { transition: opacity .01s linear; transform: none !important; }
  .lw-dinetab:hover { transform: none; }
}

/* ---- infinite carousels: the track holds cloned edge slides ---- */
.lw-events-viewport, .lw-voices-viewport, .lw-rm-slider { overflow: hidden; }
.lw-events-track, .lw-voices-track, .lw-rm-slider-track {
  display: flex;
  flex-wrap: nowrap;
  will-change: transform;
}
/* paged sliders set their own card widths in JS (3 per view) */
/* cloned slides are decorative duplicates */
[data-clone="1"] { pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .lw-events-track, .lw-voices-track, .lw-rm-slider-track { transition: none !important; }
}

/* the tab numeral measured under 4.5:1 on the cream ground */
.lw-dinetab-n { color: var(--wine) !important; }
.lw-dinetab:hover .lw-dinetab-n, .lw-dinetab.is-active .lw-dinetab-n { color: var(--peach) !important; }

/* LAY-10 on inner pages was a PROBE FALSE POSITIVE, not a defect.
   The <h1> on .lw-pg-hero pages is a deliberately visually-hidden heading
   (see inner.css "ACCESSIBLE PAGE HEADING"): clipped to 1x1px so screen
   readers get a page heading while the banner renders image-only by design.
   render-integrity compares H1 geometry to the header and cannot tell a
   clipped heading from real visible copy, so it flagged y=-41. Nothing is
   painted there. Forcing it back into flow broke the intended banner, so no
   layout override is applied here. The single real fix from that pass -- the
   CTA contrast on the dark events band -- is kept below. */
/* .lw-events is a CREAM band, not a dark one -- peach on cream measured
   1.42:1. Wine on cream measures well past 4.5:1. */
.lw-events .lw-sec-cta, .lw-sec-ctas .lw-sec-cta {
  color: var(--wine) !important;
  /* was a hardcoded rgba(152,13,46,.45) from when --wine was crimson; the
     palette is gold now, so read the token instead of a stale literal */
  border-color: color-mix(in srgb, var(--wine) 50%, transparent) !important;
}

/* ---- header band scrim: keeps the gold logo legible over the hero --------
   Measured by hiding the logo and diffing the pixels behind it: the mark was
   1.09:1 on desktop and 1.96:1 on mobile against the hero video, against the
   3:1 a graphic needs. This band lifts it clear without darkening the frame. */
.lw-header:not(.lw-header--solid)::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: calc(100% + 26px);
  background: linear-gradient(180deg,
    rgba(26,14,6,0.72) 0%,
    rgba(26,14,6,0.52) 46%,
    rgba(26,14,6,0.22) 78%,
    rgba(26,14,6,0.00) 100%);
  pointer-events: none;
  z-index: -1;
  transition: opacity .3s var(--ease);
}
/* once the header goes solid on scroll the scrim is redundant */
.lw-header.is-scrolled::before { opacity: 0; }

/* On wide viewports the logo lands over the brightest part of the facade, so
   the band needs a little more weight there (2.77:1 -> target 3:1+). Narrow
   viewports already measure 4.32:1 and are left as they are. */
@media (min-width: 1025px) {
  .lw-header:not(.lw-header--solid)::before {
    background: linear-gradient(180deg,
      rgba(26,14,6,0.86) 0%,
      rgba(26,14,6,0.68) 46%,
      rgba(26,14,6,0.30) 78%,
      rgba(26,14,6,0.00) 100%);
  }
}

/* the hero caption describes a slider photo the video hides -- once the video
   is playing the caption would be actively misleading, so it goes */
.lw-hero-caption[data-video-hidden="1"] { opacity: 0 !important; visibility: hidden !important; }

/* ---- hero video must be the ONLY image painting ------------------------
   It was letterboxing (object-fit: contain) inside a box shorter than the
   hero, over a transparent ground at the same z-index as the photo slider,
   so two photographs ghosted together. */
.lw-hero-video {
  object-fit: cover !important;
  object-position: center center;
  height: 100% !important;
  min-height: 100% !important;
  background: #1a0e06;
  z-index: 2 !important;
}
/* the slider is the fallback: once the video plays it must not show through */
.lw-hero-video.is-ready ~ .lw-hero-media,
.lw-hero-media:has(~ .lw-hero-video.is-ready) { opacity: 0 !important; }
/* the veil stays above the video so the gradient still does its work */
.lw-hero-veil { z-index: 3 !important; }

/* ---- 404 ---- */
.lw-404 { padding: clamp(48px, 8vh, 96px) 0; }
.lw-404-inner { max-width: 720px; margin: 0 auto; padding: 0 24px; text-align: center; }
.lw-404-links { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 28px; }

/* the 404 has no banner photograph, so it must not reserve banner height */
.lw-404-hero { min-height: 0 !important; height: auto !important; background: none !important; }
.lw-404-hero::after { content: none !important; display: none !important; }
.lw-404 { padding-top: calc(var(--header-h, 90px) + clamp(40px, 7vh, 88px)) !important; }

/* Simplotel credit in the footer bar */
.lw-foot-credit { color: rgba(254,251,245,0.72); }
.lw-foot-credit a { color: var(--peach); text-decoration: underline; text-underline-offset: 2px; }
.lw-foot-credit a:hover { color: #fff; }

/* TAP-01: the newsletter consent checkbox was 9x13px -- under the 24px floor */
.lw-news-check input[type="checkbox"] {
  width: 24px; height: 24px;
  min-width: 24px; min-height: 24px;
  accent-color: var(--wine);
  flex: 0 0 auto;
  margin: 0;
  cursor: pointer;
}
@media (pointer: coarse) {
  .lw-news-check input[type="checkbox"] { width: 28px; height: 28px; min-width: 28px; min-height: 28px; }
}
.lw-news-check { display: flex; align-items: flex-start; gap: 10px; }

/* LAY-12: the properties tab strip declared 4 tracks for 2 tabs after the
   second property was removed, leaving two 0px phantom columns. auto-fit does
   not help -- it generates tracks to fill the width and collapses the spare
   ones to 0px, which IS the phantom-track shape. So state the count: the grid
   takes exactly as many tracks as there are tabs. */
.lw-props-tabs { grid-template-columns: 1fr 1fr !important; }
.lw-props-tabs:has(> .lw-props-tab:nth-child(3)) { grid-template-columns: 1fr 1fr 1fr !important; }
.lw-props-tabs:has(> .lw-props-tab:only-child) { grid-template-columns: 1fr !important; }

/* hide the hero caption from the FIRST FRAME when a video is coming, so it
   never paints and then vanishes on refresh (the JS-only hide flashed) */
html[data-hero-video="1"] .lw-hero-caption { opacity: 0; visibility: hidden; }