/* =====================================================
   GONO KARAOKE — STYLES (warm cream / family edition)
   ===================================================== */

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

:root {
  --primary:       #dc5028;
  --primary-dark:  #b03d1a;
  --primary-faint: #fdeee7;
  --secondary:     #14a08c;
  --cream:         #f7f2e8;
  --cream-light:   #fdfaf4;
  --ink:           #2b2620;
  --ink-soft:      #7a7060;
  --ink-muted:     #9a9080;
  --border-warm:   #e5dccb;
  --radius:        10px;
  --radius-sm:     7px;
  font-size: 16px;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--cream);
  line-height: 1.6;
}

.disp { font-family: "Bebas Neue", sans-serif; letter-spacing: 0.02em; font-weight: 400; }

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { cursor: pointer; font-family: inherit; }

/* ── NAV ── */
nav {
  position: sticky; top: 0; z-index: 100;
  /* A real gap, plus the links pushed left with margin-right:auto below.
     space-between alone let the logo and the first link touch once the nav
     got wide enough. */
  display: flex; align-items: center; gap: 30px;
  padding: 0 32px; height: 62px;
  background: var(--cream-light);
  border-bottom: 2px solid var(--primary);
}
.nav-logo { display: flex; align-items: center; }
.nav-logo-img {
  height: 34px;
  width: auto;
  display: block;
}

.nav-links { display: flex; gap: 26px; list-style: none; margin-right: auto; }
.nav-links a { font-size: 14px; color: var(--ink-soft); transition: color 0.2s; }
.nav-links a:hover, .nav-links a.active { color: var(--primary); font-weight: 500; }

.nav-cta {
  background: var(--primary); color: #fff;
  border: none; border-radius: var(--radius-sm);
  padding: 10px 20px; font-size: 13px; font-weight: 500;
  transition: background 0.2s;
}
.nav-cta:hover { background: var(--primary-dark); }

.nav-hamburger {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: none; padding: 6px;
}
.nav-hamburger span { width: 22px; height: 2px; background: var(--ink); border-radius: 2px; }

/* ── HERO ── */
#hero { position: relative; overflow: hidden; background: var(--cream); }
.hero-inner {
  position: relative; z-index: 1;
  max-width: 1100px; margin: 0 auto;
  padding: 56px 32px 64px;
}
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--primary); font-weight: 500;
  margin-bottom: 20px;
}
.hero-eyebrow::before { content: ''; width: 26px; height: 2px; background: var(--primary); }
/* The hero headline is the wordmark itself. It's an SVG, so it stays sharp
   at any width; the clamp lets it grow with the viewport but stops it
   dominating a wide screen. */
.hero-title { margin: 0 0 22px; line-height: 0; }
.hero-logo {
  display: block;
  width: clamp(210px, 34.5vw, 420px);
  height: auto;
}
.hero-sub {
  font-size: 15px; color: var(--ink-soft);
  line-height: 1.7; max-width: 440px;
  margin-bottom: 30px;
}
.hero-btns { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  border-radius: var(--radius-sm);
  padding: 13px 26px; font-size: 14px; font-weight: 500;
  border: none;
  transition: background 0.2s, border-color 0.2s, transform 0.15s;
}
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-dark); }
.btn-outline { background: transparent; color: var(--ink); border: 1px solid #d8cfc0; }
.btn-outline:hover { border-color: var(--ink-soft); }

.hero-badges { display: flex; gap: 10px; margin-top: 28px; flex-wrap: wrap; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--cream-light);
  border: 0.5px solid var(--border-warm);
  border-radius: 20px;
  padding: 6px 15px;
  font-size: 13px; color: #6d6353;
}
.hero-badge i { color: var(--secondary); font-size: 15px; }

/* ── EQ STRIP ── */
.eq-strip {
  display: flex; align-items: flex-end; gap: 3px;
  height: 34px;
  max-width: 1100px; margin: 0 auto;
  padding: 0 32px;
}
.eq-strip span {
  flex: 1;
  background: rgba(220, 80, 40, 0.22);
  border-radius: 2px 2px 0 0;
  transition: height 0.4s ease;
}

/* ── SECTIONS ── */
section.band       { background: var(--cream-light); }
section.band-alt   { background: var(--cream); }
.section {
  position: relative;
  max-width: 1100px; margin: 0 auto;
  padding: 64px 32px;
  overflow: hidden;
}
.section-title {
  font-size: clamp(30px, 4vw, 40px);
  color: var(--ink);
  margin-bottom: 30px;
}
.section-title .tick { color: var(--primary); }

/* ── ROOMS ── */
.rooms-grid {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 14px;
}
.room-card {
  background: #fff;
  border: 0.5px solid var(--border-warm);
  border-radius: var(--radius);
  padding: 20px;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
}
.room-card.has-photos {
  cursor: pointer;
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 0;
  height: 168px;
  overflow: hidden;
}
.room-card.has-photos .room-info {
  width: 52%;
  flex-shrink: 0;
  padding: 20px;
  display: flex; flex-direction: column;
  background: #fff;
  z-index: 5;
}
.room-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(43,38,32,0.07); }
.room-card.party {
  grid-column: span 2;
  border: 2px solid rgba(220, 80, 40, 0.5);
  background: #fdf1ea;
}
.room-card.party.has-photos {
  height: 188px;
}
.room-card.party.has-photos .room-info {
  width: 40%;
  background: transparent;
}

/* ── PHOTO PEEK (Option C — stepped staircase, full height, cascading right) ── */
.room-peek {
  position: relative;
  flex: 1;
  align-self: stretch;
}
.room-peek .peek-img {
  position: absolute;
  top: 0; bottom: 0;
  width: 74%;
  border-radius: 8px;
  border: 2px solid #fff;
  background-size: cover;
  background-position: center;
  box-shadow: -3px 2px 9px rgba(43,38,32,0.16);
  transition: transform 0.28s ease, right 0.28s ease, top 0.28s ease, bottom 0.28s ease;
}
/* front photo full-height on the right; layers behind step up-and-left */
.room-peek .peek-img:nth-child(1) { right: 0;   top: 0;    bottom: 0;    z-index: 3; }
.room-peek .peek-img:nth-child(2) { right: 16px; top: 10px; bottom: 10px; z-index: 2; opacity: 0.88; }
.room-peek .peek-img:nth-child(3) { right: 32px; top: 20px; bottom: 20px; z-index: 1; opacity: 0.76; }
.room-peek .peek-count {
  position: absolute;
  bottom: 8px; right: 8px;
  z-index: 6;
  background: rgba(43,38,32,0.82);
  color: #fff;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 20px;
  display: flex; align-items: center; gap: 4px;
  backdrop-filter: blur(2px);
}
/* spread the staircase a little more on hover */
.room-card.has-photos:hover .peek-img:nth-child(2) { right: 22px; }
.room-card.has-photos:hover .peek-img:nth-child(3) { right: 44px; }

.room-icon {
  width: 38px; height: 38px; border-radius: 9px;
  background: var(--primary-faint); color: var(--primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 19px;
  margin-bottom: 14px;
}
.room-card.party .room-icon { width: 42px; height: 42px; font-size: 21px; }
.room-name { font-size: 24px; color: var(--ink); margin-bottom: 2px; }
.room-card.party .room-name { font-size: 32px; }
.room-cap { font-size: 12px; color: var(--ink-muted); margin-bottom: 12px; }
.room-price { font-size: 27px; color: #c14318; }
.room-price small { font-size: 13px; color: var(--ink-muted); font-family: -apple-system, sans-serif; }
.room-card.party .room-price { font-size: 32px; }
.room-extra { font-size: 11px; color: #a89e8e; margin-top: 4px; }
.party-badge {
  display: inline-block;
  background: rgba(220, 80, 40, 0.12); color: var(--primary-dark);
  font-size: 11px; border-radius: 5px; padding: 5px 10px;
  margin-top: 10px;
  width: fit-content;
}

/* ── LIGHTBOX GALLERY ── */
.lightbox {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(20, 16, 12, 0.92);
  display: none;
  align-items: center; justify-content: center;
  padding: 24px;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.lightbox.open { display: flex; opacity: 1; }
.lightbox-inner {
  position: relative;
  max-width: 900px; width: 100%;
  display: flex; flex-direction: column; align-items: center;
}
.lightbox-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.lightbox-stage img {
  width: 100%; height: 100%;
  object-fit: contain;
  user-select: none;
}
.lightbox-title {
  position: absolute; left: 0; top: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.55), transparent);
  color: #fff;
  padding: 16px 20px 28px;
  width: 100%;
  font-size: 16px; font-weight: 500;
  font-family: "Bebas Neue", sans-serif;
  letter-spacing: 0.05em;
  font-size: 22px;
}
.lightbox-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  border: none;
  color: #fff; font-size: 20px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 0.2s;
  backdrop-filter: blur(4px);
}
.lightbox-nav:hover { background: rgba(255,255,255,0.3); }
.lightbox-nav.prev { left: 14px; }
.lightbox-nav.next { right: 14px; }
.lightbox-close {
  position: absolute; top: -44px; right: 0;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  border: none; color: #fff; font-size: 20px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.lightbox-close:hover { background: rgba(255,255,255,0.3); }
.lightbox-counter {
  color: rgba(255,255,255,0.7);
  font-size: 13px; margin-top: 16px;
}
.lightbox-thumbs {
  display: flex; gap: 8px; margin-top: 14px;
  flex-wrap: wrap; justify-content: center;
}
.lightbox-thumb {
  width: 60px; height: 42px;
  border-radius: 6px;
  background-size: cover; background-position: center;
  cursor: pointer;
  border: 2px solid transparent;
  opacity: 0.5;
  transition: opacity 0.2s, border-color 0.2s;
}
.lightbox-thumb.active { opacity: 1; border-color: var(--primary); }

/* ── CALCULATOR (visual) ── */
.calc {
  position: relative; z-index: 1;
  background: #fff;
  border: 0.5px solid var(--border-warm);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  margin-top: 18px;
  box-shadow: 0 4px 16px rgba(43,38,32,0.05);
}
.calc-left { flex: 1.6; padding: 22px 24px; }
.calc-title {
  font-size: 14px; font-weight: 600; color: var(--ink);
  display: flex; align-items: center; gap: 7px;
  margin-bottom: 18px;
}
.calc-title i { color: var(--primary); font-size: 16px; }
.c-lab { font-size: 11px; color: var(--ink-muted); margin-bottom: 7px; }

.c-rooms { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.c-room {
  position: relative;
  border: 1.5px solid var(--border-warm); border-radius: 11px;
  background: var(--cream-light);
  padding: 12px 12px 11px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.c-room .n { font-size: 17px; color: var(--ink); }
.c-room .cap { font-size: 10px; color: var(--ink-muted); margin: 1px 0 7px; }
.c-room .tot { font-size: 16px; font-weight: 700; color: var(--ink-soft); }
.c-room.best { border-color: var(--secondary); background: #f2faf8; }
.c-room.best .tot { color: #0d7a6a; }
.c-room.on { border-color: var(--primary); background: var(--primary-faint); }
.c-room.on .tot { color: var(--primary-dark); }
/* A quiet line beneath the price. The old solid pill sat on the card corner
   and pulled harder than the selected outline it was sitting next to. */
.c-best {
  display: block; margin-top: 5px;
  font-size: 9.5px; font-weight: 600; letter-spacing: 0.09em;
  color: var(--secondary); white-space: nowrap;
}
.c-note-extra { font-size: 10px; color: #c78a1a; margin-top: 4px; }

.c-steppers { display: flex; gap: 26px; flex-wrap: wrap; margin-bottom: 22px; }
.stepper {
  display: flex; align-items: center;
  border: 1.5px solid var(--border-warm); border-radius: 10px;
  overflow: hidden;
  background: var(--cream-light);
}
.stepper button {
  width: 40px; height: 42px;
  border: none; background: #fff;
  font-size: 18px; color: var(--primary);
  cursor: pointer;
}
.stepper button:active { background: var(--primary-faint); }
.stepper .val {
  min-width: 76px; text-align: center;
  font-size: 16px; font-weight: 600; color: var(--ink);
}
.stepper .val small { display: block; font-size: 9px; font-weight: 400; color: var(--ink-muted); }

.calc-right {
  flex: 1;
  background: var(--ink);
  padding: 22px 24px;
  display: flex; flex-direction: column; justify-content: center;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.cr-label { font-size: 11px; color: rgba(255,255,255,0.5); letter-spacing: 0.08em; text-transform: uppercase; }
.cr-amount { font-size: 52px; color: #ff9d7a; line-height: 1.1; margin: 4px 0 2px; }
.cr-breakdown { font-size: 12px; color: rgba(255,255,255,0.55); line-height: 1.6; }
.cr-cta {
  margin-top: 14px;
  background: var(--primary); color: #fff;
  border: none; border-radius: 9px;
  padding: 11px 16px; font-size: 13px; font-weight: 600;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
  width: fit-content;
  transition: background 0.2s;
}
.cr-cta:hover { background: var(--primary-dark); }

/* ── FAMILY CARDS ── */
.family-grid {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}
.family-card {
  background: #fff;
  border: 0.5px solid var(--border-warm);
  border-radius: var(--radius);
  padding: 20px;
}
.family-icon {
  width: 40px; height: 40px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  margin-bottom: 14px;
}
.family-icon.coral { background: var(--primary-faint); color: var(--primary); }
.family-icon.teal  { background: #eef7f5; color: var(--secondary); }
.family-icon.amber { background: #fdf4e0; color: #c78a1a; }
.family-card h4 { font-size: 15px; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.family-card p { font-size: 13px; color: var(--ink-soft); line-height: 1.65; }

/* ── MENU ── */
.menu-grid {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 28px;
}
.menu-category h3 {
  font-size: 20px;
  color: var(--primary);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--primary-faint);
}
.menu-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 0;
  border-bottom: 0.5px solid var(--border-warm);
  font-size: 14px;
}
.menu-item:last-child { border: none; }
.menu-item-price { font-weight: 600; color: #c14318; }
.late-badge {
  font-size: 10px;
  background: var(--primary-faint); color: var(--primary-dark);
  border-radius: 4px; padding: 2px 7px; margin-left: 8px;
}

/* ── REVIEWS ── */
/* ── WHERE WE ARE ── */
.find-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 26px; align-items: stretch; }
.find-map {
  width: 100%; min-height: 300px; height: 100%;
  border: 0; border-radius: 8px; display: block;
  background: var(--cream-light);
}
.find-map-off {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; text-align: center; padding: 24px;
  border: 1px dashed var(--border-warm); color: #a89e8e;
}
.find-map-off i { font-size: 26px; }
.find-map-off p { font-size: 13px; max-width: 260px; line-height: 1.5; }
.find-info { display: flex; flex-direction: column; justify-content: center; }
.find-addr { font-size: 17px; line-height: 1.55; color: var(--ink); margin-bottom: 4px; }
.find-row { display: flex; gap: 9px; align-items: flex-start; font-size: 13px; color: var(--ink-soft); margin-top: 12px; }
.find-row i { font-size: 15px; color: var(--secondary, #2DAFA3); flex-shrink: 0; margin-top: 1px; }
.find-row a { color: inherit; }
.find-row a:hover { color: var(--primary); }
.find-acts { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 22px; }
@media (max-width: 820px) {
  .find-grid { grid-template-columns: 1fr; }
  .find-map { min-height: 240px; }
}

/* ── RESERVATION ── */
.res-grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  margin-bottom: 24px;
}
.res-card {
  background: #fff;
  border: 0.5px solid var(--border-warm);
  border-radius: var(--radius);
  padding: 22px;
}
.res-icon {
  width: 40px; height: 40px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-size: 19px; margin-bottom: 12px;
}
.res-icon.coral { background: var(--primary-faint); color: var(--primary); }
.res-icon.teal { background: #eef7f5; color: var(--secondary); }
.res-card h4 { font-size: 15px; font-weight: 600; color: var(--ink); margin-bottom: 5px; }
.res-card p { font-size: 13px; color: var(--ink-soft); line-height: 1.6; margin-bottom: 12px; }
.res-card a { font-size: 14px; font-weight: 600; }
.res-card a.coral { color: var(--primary); }
.res-card a.teal { color: var(--secondary); }

.inquiry-form {
  position: relative; z-index: 1;
  background: #fff;
  border: 0.5px solid var(--border-warm);
  border-radius: var(--radius);
  padding: 26px;
  margin-bottom: 20px;
}
.inquiry-form h3 { font-size: 15px; font-weight: 600; color: var(--ink); margin-bottom: 18px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.form-row.three { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 640px) { .form-row, .form-row.three { grid-template-columns: 1fr; } }
.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-field label { font-size: 12px; color: var(--ink-soft); font-weight: 500; }
.form-field input, .form-field select, .form-field textarea {
  border: 0.5px solid var(--border-warm);
  border-radius: var(--radius-sm);
  padding: 10px 13px; font-size: 14px; font-family: inherit;
  background: var(--cream-light); color: var(--ink);
  transition: border-color 0.2s;
  /* Native date and select controls size themselves differently from text
     boxes; pinning the height keeps every box in a row level. */
  height: 42px; box-sizing: border-box; width: 100%; -webkit-appearance: none; appearance: none;
}
.form-field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%237a7060' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center; padding-right: 34px;
}
.form-field input[type="date"]::-webkit-calendar-picker-indicator { opacity: .55; cursor: pointer; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  outline: none; border-color: var(--primary);
}
.form-field textarea { height: 84px; resize: vertical; }
.form-submit {
  width: 100%;
  background: var(--primary); color: #fff;
  border: none; border-radius: var(--radius-sm);
  padding: 13px; font-size: 14px; font-weight: 500;
  margin-top: 8px;
  transition: background 0.2s;
}
.form-submit:hover { background: var(--primary-dark); }

/* ── FOOTER ── */
footer {
  background: var(--ink);
  padding: 40px 32px 28px;
}
.footer-inner { max-width: 1100px; margin: 0 auto; }
.footer-top {
  display: flex; justify-content: space-between; gap: 32px; flex-wrap: wrap;
  margin-bottom: 32px; padding-bottom: 32px;
  border-bottom: 0.5px solid rgba(255,255,255,0.1);
}
.footer-brand { max-width: 260px; }
.footer-logo { display: flex; align-items: center; margin-bottom: 12px; }
.footer-badge-img {
  height: 210px;
  width: auto;
  display: block;
  opacity: 0.95;
}
.footer-brand p { font-size: 13px; color: rgba(255,255,255,0.45); line-height: 1.6; }
.footer-col h4 {
  font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(255,255,255,0.55); margin-bottom: 14px;
}
.footer-col ul { list-style: none; }
.footer-col ul li { margin-bottom: 9px; }
.footer-col ul li a, .footer-col ul li span { font-size: 13px; color: rgba(255,255,255,0.45); transition: color 0.2s; }
.footer-col ul li a:hover { color: var(--primary); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
.footer-bottom p { font-size: 12px; color: rgba(255,255,255,0.3); }
.footer-social { display: flex; gap: 16px; }
.footer-social a { font-size: 13px; color: rgba(255,255,255,0.4); transition: color 0.2s; }
.footer-social a:hover { color: #fff; }

/* ── TOAST ── */
.toast {
  position: fixed; bottom: 24px; right: 24px;
  background: var(--ink); color: #fff;
  border-left: 3px solid var(--primary);
  border-radius: var(--radius-sm);
  padding: 14px 20px; font-size: 14px;
  z-index: 999; opacity: 0; transform: translateY(8px);
  transition: opacity 0.3s, transform 0.3s;
  pointer-events: none;
}
.toast.show { opacity: 1; transform: translateY(0); }

/* ── VIBE CARD (venue gallery, 1/3 next to party) ── */
.vibe-card {
  position: relative;
  background: var(--ink);
  border-radius: 10px;
  height: 188px;
  overflow: hidden;
  cursor: pointer;
  display: flex; align-items: flex-end;
}
.vibe-photo {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0.85;
  transition: transform 0.35s ease, opacity 0.25s;
}
.vibe-card:hover .vibe-photo { transform: scale(1.04); opacity: 0.95; }
.vibe-count {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  background: rgba(43,38,32,0.75); color: #fff;
  font-size: 11px; border-radius: 12px; padding: 3px 10px;
  display: flex; align-items: center; gap: 4px;
}
.vibe-cap {
  position: relative; z-index: 2;
  width: 100%;
  padding: 12px 14px;
  background: linear-gradient(transparent, rgba(20,15,10,0.78));
  color: #fff;
}
.vibe-cap .vt { font-size: 19px; margin: 0; }
.vibe-cap .vd { font-size: 10.5px; color: rgba(255,255,255,0.75); display: flex; align-items: center; gap: 5px; margin: 0; }

/* ── HERO HOURS CARD (always open) ── */
.hours-card {
  position: absolute;
  right: 40px; top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 268px;
  background: rgba(253, 250, 244, 0.88);
  backdrop-filter: blur(6px);
  border: 0.5px solid var(--border-warm);
  border-top: 3px solid var(--primary);
  border-radius: 14px;
  box-shadow: 0 8px 26px rgba(43,38,32,0.09);
  overflow: hidden;
}
.hc-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 18px 11px;
  border-bottom: 0.5px solid #eee5d4;
  background: rgba(255,255,255,0.55);
}
.hc-title {
  font-size: 22px; color: var(--ink);
  display: inline-flex; align-items: center; gap: 8px;
}
.hc-title i { color: var(--primary); font-size: 17px; }
.hc-body { padding: 8px 18px; }
.hc-row {
  display: flex; justify-content: space-between; gap: 14px;
  font-size: 13.5px; padding: 6px 0;
  border-bottom: 0.5px solid rgba(229,220,203,0.6);
}
.hc-row:last-child { border-bottom: none; }
.hc-row .d { color: var(--ink-muted); }
.hc-row .t { color: var(--ink-soft); font-weight: 500; white-space: nowrap; }
.hc-row.today {
  background: rgba(220,80,40,0.07);
  margin: 0 -10px; padding: 6px 10px;
  border-radius: 7px; border-bottom: none;
}
.hc-row.today .d, .hc-row.today .t { color: var(--primary-dark); font-weight: 600; }
.hc-foot {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 18px 13px;
  border-top: 0.5px solid #eee5d4;
  font-size: 13px; color: #1e7a44; font-weight: 600;
  background: rgba(46,163,110,0.06);
}
.hc-foot.closed { color: #b3402f; background: rgba(201,72,58,0.06); }
.hc-foot small { color: var(--ink-soft); font-weight: 400; }
.hc-dot { width: 9px; height: 9px; border-radius: 50%; background: #2ea36e; flex-shrink: 0; }
.hc-dot.closed { background: #c9483a; }

/* ── DECO SERVICES STRIP (inquiry form) ── */
.deco-strip {
  position: relative;
  background: linear-gradient(120deg, #2b2620 0%, #3d2a24 50%, #8a3a1e 100%);
  border-radius: 10px;
  padding: 18px 20px 15px;
  margin-bottom: 20px;
  overflow: hidden;
  color: #fff;
}
.deco-title {
  font-size: 18px; color: #fff;
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 2px;
}
.deco-title i { color: #ffc9a8; font-size: 15px; }
.deco-sub { font-size: 12.5px; color: rgba(255,255,255,0.72); line-height: 1.75; max-width: 620px; margin-bottom: 15px; }
.deco-items { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; position: relative; }
@media (max-width: 1080px) { .deco-items { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .deco-items { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 430px)  { .deco-items { grid-template-columns: 1fr; } }
.deco-item { display: flex; gap: 8px; align-items: center; min-width: 0; }
.deco-item .ic {
  width: 27px; height: 27px; border-radius: 7px; flex-shrink: 0;
  background: rgba(255,255,255,0.1);
  border: 0.5px solid rgba(255,255,255,0.16);
  color: #ffc9a8;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px;
}
.deco-item .t { font-size: 11.5px; font-weight: 600; color: #fff; margin: 0; line-height: 1.3; }
.deco-item .d { font-size: 10.5px; color: rgba(255,255,255,0.55); line-height: 1.45; margin: 0; }
.deco-foot { font-size: 11.5px; color: rgba(255,255,255,0.6); line-height: 1.6; margin: 14px 0 0; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.12); }
.deco-foot b { color: #4fd0b5; }

/* ── BOOKING FLOW (under calculator) ── */
#calc-box.flow-open { border-radius: 14px 14px 0 0; }
.bk-flow {
  background: var(--cream-light);
  border: 0.5px solid var(--border-warm);
  border-top: none;
  border-radius: 0 0 14px 14px;
  padding: 20px 24px 24px;
}
.bk-step-title {
  font-size: 13px; font-weight: 600; color: var(--ink);
  display: flex; align-items: center; gap: 7px;
  margin: 0 0 10px;
}
.bk-step-title .n {
  width: 19px; height: 19px; border-radius: 50%;
  background: var(--primary); color: #fff;
  font-size: 10px; display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.bw-dates { display: flex; gap: 6px; margin-bottom: 20px; overflow-x: auto; padding-bottom: 4px; }
.bw-date {
  flex-shrink: 0; width: 58px; padding: 8px 0;
  border-radius: 8px; border: 0.5px solid var(--border-warm);
  background: #fff; text-align: center; cursor: pointer;
}
.bw-date .d1 { font-size: 9.5px; color: var(--ink-muted); }
.bw-date .d2 { font-size: 17px; font-weight: 600; color: var(--ink); }
.bw-date .d3 { font-size: 8.5px; color: #c5bcac; }
.bw-date.sel { background: var(--primary); border-color: var(--primary); }
.bw-date.sel .d1, .bw-date.sel .d2, .bw-date.sel .d3 { color: #fff; }
.bw-date.dis { opacity: 0.4; cursor: not-allowed; }
.time-chips { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 20px; }
.t-chip {
  border: 1px solid var(--border-warm); border-radius: 8px;
  background: #fff; padding: 8px 14px; font-size: 13px;
  cursor: pointer; color: var(--ink);
}
.t-chip.sel { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 600; }
.t-chip.dis { opacity: 0.35; text-decoration: line-through; cursor: not-allowed; }
.t-loading, .t-none { font-size: 12px; color: var(--ink-muted); }
.bk-cols { display: grid; grid-template-columns: 1.1fr 1fr; gap: 26px; }
@media (max-width: 900px) { .bk-cols { grid-template-columns: 1fr; gap: 14px; } }
.f label { display: block; font-size: 11px; color: var(--ink-muted); margin-bottom: 4px; }
.f input {
  width: 100%; border: 0.5px solid var(--border-warm); border-radius: 8px;
  background: #fff; padding: 10px 12px; font-size: 13px; font-family: inherit; color: var(--ink);
}
.g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.sum { background: #fff; border: 0.5px solid var(--border-warm); border-radius: 10px; padding: 13px 15px; margin-bottom: 12px; }
.s-row { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; color: var(--ink-soft); padding: 3px 0; }
.s-row.tot { border-top: 0.5px solid var(--border-warm); margin-top: 5px; padding-top: 8px; font-size: 13px; font-weight: 600; color: var(--ink); }
.dep { color: var(--primary); font-weight: 600; }
.pol { font-size: 10.5px; color: var(--ink-muted); line-height: 1.55; margin: 0 0 12px; display: flex; gap: 6px; }
.pol i { color: #c78a1a; flex-shrink: 0; margin-top: 1px; }
.pay {
  width: 100%; background: var(--primary); color: #fff;
  border: none; border-radius: 9px; padding: 13px;
  font-size: 14px; font-weight: 600; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  font-family: inherit;
}
.pay:disabled { opacity: 0.7; cursor: wait; }
.bk-sec { text-align: center; font-size: 10.5px; color: var(--ink-muted); margin-top: 8px; }
.bk-error { color: #b3402f; font-size: 12.5px; margin-top: 12px; }
.bk-toast {
  position: fixed; bottom: 24px; left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--ink); color: #fff;
  padding: 14px 22px; border-radius: 10px;
  font-size: 14px; box-shadow: 0 8px 30px rgba(0,0,0,0.25);
  opacity: 0; transition: all 0.35s; z-index: 300; max-width: 90vw;
}
.bk-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── E-TRANSFER CONFIRMATION ── */
.etx { max-width: 620px; }
.etx-head { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 16px; }
.etx-head > i { font-size: 34px; color: #2ea36e; flex-shrink: 0; }
.etx-title { font-size: 18px; font-weight: 700; color: var(--ink); margin: 2px 0 2px; }
.etx-sub { font-size: 13px; color: var(--ink-muted); margin: 0; }
.etx-box {
  background: #fff;
  border: 1.5px solid var(--primary);
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 12px;
}
.etx-step { font-size: 13px; color: var(--ink-soft); margin: 0 0 6px; }
.etx-email {
  font-size: 20px; font-weight: 700; color: var(--primary-dark);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 10px;
  word-break: break-all;
}
.etx-copy {
  font-size: 11px; font-weight: 600;
  background: var(--primary); color: #fff;
  border: none; border-radius: 6px; padding: 5px 11px;
  cursor: pointer; font-family: inherit;
}
.etx-deadline { font-size: 12px; color: var(--ink-soft); margin: 0; display: flex; align-items: center; gap: 6px; }
.etx-deadline i { color: #c78a1a; }
.etx-note { font-size: 11.5px; color: var(--ink-muted); line-height: 1.55; margin: 0 0 6px; }
/* The one instruction that decides whether a payment confirms itself, so it
   gets its own box rather than sitting in the small print. */
.etx-must {
  display: flex; gap: 9px; align-items: flex-start;
  font-size: 12.5px; line-height: 1.55; color: var(--ink);
  background: #fdf4e3; border: 1px solid #efd9a8; border-radius: 7px;
  padding: 11px 13px; margin: 0 0 10px;
}
.etx-must i { color: #c78a1a; font-size: 15px; flex-shrink: 0; margin-top: 1px; }
.etx-must b { word-break: break-all; }
.f-hint { display: block; font-size: 11px; color: var(--ink-muted); margin-top: 4px; }

/* "paying from a different address" tick box, under the email field */
.bk-same { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; margin: 8px 0 10px; }
.bk-same input { margin-top: 2px; width: 15px; height: 15px; accent-color: var(--primary); flex-shrink: 0; }
.bk-same span { font-size: 12px; color: var(--ink); line-height: 1.45; }
.bk-same small { display: block; font-size: 11px; color: var(--ink-muted); }
.bk-alt {
  background: var(--primary-faint); border: 0.5px solid #f0c9b8;
  border-radius: 8px; padding: 10px 12px; margin-bottom: 10px;
}
.bk-alt label { color: #993c1d; }

.c-walkin {
  display: block; margin-top: 6px;
  font-size: 9.5px; font-weight: 700; color: #8a6410;
  background: #fdf6e4; border-radius: 4px; padding: 3px 6px;
  line-height: 1.3;
}
.stepper button:disabled { opacity: 0.3; cursor: not-allowed; }
.bw-date.dis .d3 { color: #8a6410; font-weight: 700; font-size: 8px; }
.bk-hint { font-size: 11px; color: var(--ink-muted); margin: -12px 0 18px; }

.nav-cross {
  font-size: 12px; color: var(--ink-muted); text-decoration: none;
  margin-right: 16px; white-space: nowrap;
}
.nav-cross b { color: var(--primary); font-weight: 600; }
.nav-cross:hover b { text-decoration: underline; }
.footer-col .cross-venue { color: #ff9455 !important; }
@media (max-width: 900px) { .nav-cross { display: none; } .nav-ig { margin-right: 10px; } }

.nav-ig {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 9px;
  margin-left: auto; margin-right: 12px;
  color: var(--primary); background: var(--primary-faint);
  text-decoration: none; font-size: 19px; flex-shrink: 0;
}
.nav-ig:hover { background: var(--primary); color: #fff; }

/* ── INSTAGRAM STRIP ──
   Each post loads in a fixed 400px-wide Instagram iframe. The tile is a
   square window; the iframe is scaled to fit and slid up so only the
   picture shows -- Instagram's header, caption and buttons are cropped off.
   --ig-head is the height of Instagram's header bar. If a sliver of the
   username row peeks in at the top, raise it a few px. */
#instagram .ig-wrap { max-width: 1100px; margin: 0 auto; padding: 0 32px; }
.ig-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0; margin-bottom: 20px;
}
/* Square tiles, touching each other, cropped to fill. The grid sits
   inside the page margins -- not edge to edge. object-fit: cover does
   the cropping, so no JavaScript sizing is needed. */
.ig-cell {
  position: relative;
  display: block;
  min-width: 0;
  aspect-ratio: 4 / 5;   /* same shape as Instagram's own grid */
  overflow: hidden;
  background: #efe7db;
}
.ig-img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.ig-veil {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px;
  background: rgba(0,0,0,.55); color: #fff;
  opacity: 0; transition: opacity .18s ease;
}
.ig-veil i { font-size: 26px; }
.ig-veil-t { font-size: 11px; font-weight: 600; letter-spacing: .09em; }
.ig-cell:hover .ig-veil, .ig-cell:focus-visible .ig-veil { opacity: 1; }
/* Meta asks for visible credit when thumbnails are shown on their own */
.ig-credit { font-size: 12px; color: #9a9080; margin: 10px 0 16px; }
.ig-credit a { color: #7a7268; text-decoration: underline; }
.ig-follow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 600; text-decoration: none;
  color: var(--primary); background: var(--primary-faint);
  border-radius: 9px; padding: 11px 20px;
  margin-bottom: 24px;
}
.ig-follow:hover { background: var(--primary); color: #fff; }
@media (max-width: 1180px) { .ig-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 760px)  { .ig-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* ── RESPONSIVE ── */
@media (max-width: 860px) {
  .rooms-grid { grid-template-columns: 1fr 1fr; }
  .room-card.party { grid-column: 1 / -1; }
  .vibe-card { grid-column: 1 / -1; height: 160px; }
}
@media (max-width: 768px) {
  nav { padding: 0 20px; }
  .nav-logo-img { height: 28px; }
  .nav-links, .nav-cta { display: none; }
  .nav-hamburger { display: flex; }
  .nav-links.open {
    display: flex; flex-direction: column;
    position: absolute; top: 62px; left: 0; right: 0;
    background: var(--cream-light);
    border-bottom: 0.5px solid var(--border-warm);
    padding: 18px 20px; gap: 16px;
  }
  .hero-inner { padding: 39px 20px 20px; }
  .hours-card { position: static; transform: none; width: auto; margin: 0 20px 28px; }
  .c-rooms { grid-template-columns: 1fr 1fr; }
  .section { padding: 48px 20px; }
  .rooms-grid { grid-template-columns: 1fr; }
  .room-card.party { grid-column: auto; }
  .room-card.party.has-photos .room-info { width: 52%; }
  .res-grid, .form-row { grid-template-columns: 1fr; }
  .calc { flex-direction: column; }
  .calc-right { padding-top: 18px; }
  .eq-strip { padding: 0 20px; }
  .lightbox-nav { width: 38px; height: 38px; }
  .lightbox-thumbs { display: none; }
}

/* ── BOOKING WIDGET ── */
.bw {
  background: #fff;
  border: 0.5px solid var(--border-warm);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 24px;
}
@media (max-width: 900px) {
  .bw-cols { grid-template-columns: 1fr; gap: 8px; }
}
.bw-dates {
  display: flex; gap: 6px; margin-bottom: 20px;
  overflow-x: auto; padding-bottom: 6px;
  scrollbar-width: thin;
}
.bw-date {
  flex-shrink: 0; width: 58px;
  padding: 8px 0;
  border-radius: 8px;
  border: 0.5px solid var(--border-warm);
  background: var(--cream-light);
  text-align: center; cursor: pointer;
  transition: border-color 0.15s;
}
.bw-date:hover { border-color: var(--primary); }
.bw-date .d1 { font-size: 9px; color: var(--ink-muted); }
.bw-date .d2 { font-size: 17px; font-weight: 600; color: var(--ink); }
.bw-date .d3 { font-size: 8.5px; color: var(--ink-muted); }
.bw-date.sel { background: var(--primary); border-color: var(--primary); }
.bw-date.sel .d1, .bw-date.sel .d2, .bw-date.sel .d3 { color: #fff; }
.bw-date.dis { opacity: 0.4; cursor: not-allowed; }
.tag {
  position: absolute; top: -9px; right: 10px;
  font-size: 9px; font-weight: 600;
  padding: 2px 9px; border-radius: 10px;
  color: #fff;
}
.tag.sel-t { background: var(--primary); }
.tag.rec-t { background: var(--secondary); }
.tag.full-t { background: var(--ink-muted); }
@keyframes bwspin { to { transform: rotate(360deg); } }
@media (max-width: 768px) {
  .bw-times { flex-direction: column; }
  .bw-rooms, .bw-grid2 { grid-template-columns: 1fr; }
  .bw-grid2 .span2 { grid-column: auto; }
}

/* ── MENU PAGES ──
   Uploaded pictures of the menu. Each page keeps its own proportions via the
   aspect-ratio set inline from the real image size, so nothing is ever
   squashed and the page doesn't jump while they load. Capped to the content
   column so an enormous upload can't stretch past the rest of the site. */
.menu-pages { display: grid; gap: 14px; max-width: 660px; }
.menu-pages.two-up { grid-template-columns: 1fr 1fr; }
.menu-page {
  width: 100%; height: auto; display: block;
  border-radius: 8px; background: var(--cream-light);
}
@media (max-width: 700px) {
  .menu-pages.two-up { grid-template-columns: 1fr; }
}

/* Unbookable dates. "full" and "closed" are told to us by the server before
   the guest clicks; "walk-in" is a rule, not availability, so it keeps the
   warmer colour it always had. */
.bw-date.dis.full,
.bw-date.dis.closed { opacity: 0.55; }

/* Enquiry form: the confirmation replaces the form outright, so there's no
   doubt it went. The old flow opened a mail app and left people guessing. */
.form-field .opt { font-weight: 400; color: var(--ink-muted); font-size: 11px; }
.sent-ok { text-align: center; padding: 34px 22px; }
.sent-ok i { font-size: 38px; color: #2DAFA3; display: block; margin-bottom: 12px; }
.sent-ok h3 { font-size: 20px; color: var(--ink); margin-bottom: 8px; }
.sent-ok p { font-size: 14px; color: var(--ink-soft); line-height: 1.6; max-width: 340px; margin: 0 auto; }

/* A room that can't hold the group: visible, so the guest understands why it
   isn't an option, but plainly not selectable. */
.c-room.too-many { opacity: .45; cursor: not-allowed; background: var(--cream-light); }
.c-room.too-many .tot { color: var(--ink-muted); }
.c-toomany { display: block; margin-top: 5px; font-size: 9.5px; font-weight: 700;
             letter-spacing: .08em; color: #b3402f; }