/* =========================================================================
   Havana — Rabat Agdal
   =========================================================================
   Everything the site looks like starts in the :root block below. The palette
   is read off the venue's own material rather than chosen: the black is the
   black of their photographs, the gold is sampled from the wordmark, and the
   jade is the velvet of the banquette in their own booth shot.

   Gold is the brand. Jade is the action. Every button, link and focus ring on
   this site is jade; gold is kept for the mark, the hairlines and the prices,
   so the two never compete.

   One shape carries the whole thing: the ring. It is their logo, so it holds
   the section numerals, frames the hero, marks the map and draws the focus
   state. Nothing else is round.

   Assets are pinned with ?v=N in the HTML. After editing this file, bump every
   ?v= (they move together) or a returning browser keeps the old stylesheet.
   ========================================================================= */

:root {
  --bg: #0B0A0C;          /* the near-black every one of their photographs sits in */
  --bg-2: #131114;        /* one step up, for a raised panel */
  --panel: #17141A;
  --gold: #CBA968;        /* sampled off the wordmark */
  --gold-lift: #E7D2A4;   /* the lit edge of the same letters */
  --gold-dim: rgba(203, 169, 104, 0.42);
  --jade: #1F6B55;        /* the green velvet in their banquette */
  --jade-lift: #2E9476;
  --text: #F3EDE4;        /* warm white; pure white goes blue against black */
  --para: #A79E93;        /* oat */
  --ink: #06110D;         /* what sits on top of a jade fill */
  --line: rgba(203, 169, 104, 0.20);
  --line-soft: rgba(243, 237, 228, 0.08);
  --err: #D9603F;
  --ok: #3E9E7A;

  --display: 'Italiana', 'Times New Roman', serif;
  --serif: 'Prata', Georgia, serif;
  --ui: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --wrap: 1100px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --nav-h: 82px;
}

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

html { scroll-behavior: smooth; scroll-padding-top: var(--nav-h); }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--ui);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* The room, not a texture file. A warm pool of light top-centre, a colder one
   low and left, and a fine grain over both so the gradients never band. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(120% 62% at 50% -14%, rgba(203, 169, 104, 0.11), transparent 62%),
    radial-gradient(70% 48% at 6% 84%, rgba(31, 107, 85, 0.10), transparent 66%),
    var(--bg);
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.30;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.30'/%3E%3C/svg%3E");
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
::selection { background: var(--jade); color: var(--text); }

:focus-visible {
  outline: 2px solid var(--jade-lift);
  outline-offset: 3px;
  border-radius: 2px;
}

.container { width: min(var(--wrap), calc(100% - 44px)); margin-inline: auto; }
.hidden { display: none !important; }

/* --- Type ---------------------------------------------------------------- */
h1, h2, h3 { font-weight: 400; line-height: 1.12; }

.section-title {
  font-family: var(--display);
  font-size: clamp(2.1rem, 5.4vw, 3.4rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text);
}

/* One word per heading lifted into the serif italic, in gold. It is the only
   emphasis the site uses, so it has to stay rare to keep working. */
.t-script {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.82em;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--gold);
}

.serif { font-family: var(--serif); }

/* The ring that holds a section's numeral. Their logo, at 34px. */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--ui);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--gold);
}

.kicker::before {
  content: attr(data-n);
  flex: none;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--gold-dim);
  border-radius: 50%;
  font-family: var(--serif);
  font-size: 0.72rem;
  letter-spacing: 0;
  color: var(--gold-lift);
}

.kicker:not([data-n])::before { display: none; }

.section-head { margin-bottom: 44px; }
.section-head .section-title { margin-top: 16px; }
.section-head.center { text-align: center; }
.section-head.center .kicker { justify-content: center; }

.section-sub {
  margin-top: 14px;
  max-width: 56ch;
  color: var(--para);
  font-size: 0.98rem;
}

.section-head.center .section-sub { margin-inline: auto; }

section { padding: 104px 0; position: relative; }

/* --- Buttons ------------------------------------------------------------- */
/* Sharp rectangles with a hairline. Nothing on this site is a pill. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 30px;
  border: 1px solid var(--gold-dim);
  background: transparent;
  color: var(--text);
  font-family: var(--ui);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: color 0.4s var(--ease), border-color 0.4s var(--ease);
}

/* The fill arrives from the bottom rather than fading in, which reads as a
   deliberate press instead of a hover state. */
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--jade);
  transform: translateY(101%);
  transition: transform 0.45s var(--ease);
  z-index: -1;
}

.btn > * { position: relative; }
.btn:hover { color: var(--text); border-color: var(--jade); }
.btn:hover::before { transform: translateY(0); }

.btn.solid { background: var(--jade); border-color: var(--jade); color: var(--text); }
.btn.solid::before { background: var(--jade-lift); }
.btn.solid:hover { border-color: var(--jade-lift); }

.btn.ghost { border-color: var(--line-soft); color: var(--para); }
.btn.ghost:hover { color: var(--text); border-color: var(--gold-dim); }
.btn.ghost::before { background: rgba(243, 237, 228, 0.06); }

.btn.danger { border-color: rgba(217, 96, 63, 0.5); color: #E9A38C; }
.btn.danger::before { background: var(--err); }
.btn.danger:hover { color: #fff; border-color: var(--err); }

.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn:disabled::before { transform: translateY(101%); }

/* --- Reveal -------------------------------------------------------------- */
.reveal, .reveal-left {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}

.reveal-left { transform: translateX(-18px); }
.reveal.visible, .reveal-left.visible { opacity: 1; transform: none; }
.reveal[data-delay='1'], .reveal-left[data-delay='1'] { transition-delay: 0.10s; }
.reveal[data-delay='2'], .reveal-left[data-delay='2'] { transition-delay: 0.20s; }
.reveal[data-delay='3'], .reveal-left[data-delay='3'] { transition-delay: 0.30s; }

/* --- Promotional strip --------------------------------------------------- */
.promo-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 120;
  height: 38px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: linear-gradient(90deg, #0E1A16, var(--jade) 50%, #0E1A16);
  border-bottom: 1px solid rgba(0, 0, 0, 0.4);
}

.promo-track { display: flex; gap: 70px; white-space: nowrap; animation: promo 34s linear infinite; }
.promo-banner:hover .promo-track { animation-play-state: paused; }

.promo-banner-text {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--text);
}

a.promo-banner-text:hover { color: var(--gold-lift); }

@keyframes promo { from { transform: translateX(0); } to { transform: translateX(-50%); } }

body.has-banner .nav { top: 38px; }

/* --- Nav ----------------------------------------------------------------- */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 110;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  transition: background 0.45s var(--ease), height 0.45s var(--ease), border-color 0.45s var(--ease);
  border-bottom: 1px solid transparent;
}

.nav.scrolled {
  height: 66px;
  background: rgba(11, 10, 12, 0.90);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
}

.nav .container { display: flex; align-items: center; gap: 26px; }
.nav-inner { display: contents; }

.nav-logo { flex: none; }
.nav-logo img { height: 30px; width: auto; transition: height 0.45s var(--ease); }
.nav.scrolled .nav-logo img { height: 24px; }

.nav-links {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 30px;
  margin-left: auto;
}

.nav-right { list-style: none; display: flex; align-items: center; gap: 22px; }
.nav-links li { position: relative; }

.nav-links a, .nav-right a {
  font-size: 0.70rem;
  font-weight: 500;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--para);
  transition: color 0.3s var(--ease);
}

.nav-links > li > a, .nav-right > li > a { display: inline-block; padding: 6px 0; }
.nav-links a:hover, .nav-right a:hover { color: var(--text); }

/* Underline grows from the left rather than fading, so it tracks the cursor */
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 0;
  background: var(--jade-lift);
  transition: width 0.35s var(--ease);
}

.nav-links a:hover::after { width: 100%; }

.nav-cta {
  padding: 10px 20px !important;
  border: 1px solid var(--gold-dim);
  color: var(--text) !important;
}

.nav-cta:hover { background: var(--jade); border-color: var(--jade); }
.nav-cta::after { display: none; }

.nav-deals { color: var(--gold) !important; }

.nav-auth {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--para);
}

.nav-auth:hover { color: var(--text); }
.nav-auth.signed-in { color: var(--gold); }

.nav-links .mobile-only { display: none; }

.burger { display: none; flex-direction: column; gap: 5px; padding: 8px; margin-left: auto; }
.burger span { display: block; width: 24px; height: 1px; background: var(--text); transition: transform 0.35s var(--ease), opacity 0.25s; }
.burger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* --- Language switch ----------------------------------------------------- */
.lang-switch {
  position: relative;
  display: inline-flex;
  border: 1px solid var(--line);
  padding: 3px;
}

.lang-switch::before {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: calc(50% - 3px);
  height: calc(100% - 6px);
  background: var(--jade);
  transition: transform 0.35s var(--ease);
}

.lang-switch.on-fr::before { transform: translateX(100%); }

.lang-switch button {
  position: relative;
  padding: 4px 11px;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--para);
  transition: color 0.3s var(--ease);
}

.lang-switch button.active { color: var(--text); }

/* =========================================================================
   Hero — the one bold thing on the site
   ========================================================================= */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: calc(var(--nav-h) + 40px) 0 90px;
  overflow: hidden;
}

.hero-bg { position: absolute; inset: 0; z-index: 0; }

.hero-bg img, .hero-bg video, .hero video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.20;
  filter: saturate(0.7);
}

.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(58% 52% at 50% 46%, transparent, rgba(11, 10, 12, 0.86) 78%),
    linear-gradient(180deg, rgba(11, 10, 12, 0.9), transparent 26%, rgba(11, 10, 12, 0.96));
}

.hero-content { position: relative; z-index: 2; text-align: center; }

.hero-content > * {
  opacity: 0;
  animation: rise 1.1s var(--ease) forwards;
}

.hero-content > *:nth-child(2) { animation-delay: 0.5s; }
.hero-content > *:nth-child(3) { animation-delay: 0.7s; }
.hero-content > *:nth-child(4) { animation-delay: 0.9s; }

@keyframes rise {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: none; }
}

/* The disc: their mark, at the size of a room. The photograph turns inside a
   hairline ring while the wordmark sits still on top of it. */
.hero-disc {
  position: relative;
  width: min(58vmin, 400px);
  aspect-ratio: 1;
  margin: 0 auto 34px;
  display: grid;
  place-items: center;
}

.hero-disc img.kb {
  position: absolute;
  inset: 7%;
  width: 86%;
  height: 86%;
  object-fit: cover;
  border-radius: 50%;
  opacity: 0.5;
  filter: saturate(0.78) contrast(1.05);
  animation: turn 64s linear infinite;
}

@keyframes turn { to { transform: rotate(360deg); } }

.hero-disc::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(203, 169, 104, 0.62);
  box-shadow: 0 0 110px rgba(203, 169, 104, 0.20), inset 0 0 80px rgba(11, 10, 12, 0.92);
}

.hero-disc::after {
  content: '';
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  background: radial-gradient(circle, transparent 42%, rgba(11, 10, 12, 0.92) 80%);
}

.hero-mark {
  position: relative;
  z-index: 2;
  width: 64%;
  filter: drop-shadow(0 6px 30px rgba(0, 0, 0, 0.8));
}

/* Where the H site puts a script word, this puts the tracked display face. */
.hero-script {
  font-family: var(--display);
  font-size: clamp(1.4rem, 4vw, 2.2rem);
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 14px;
}

.hero-tag {
  font-size: 0.70rem;
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 30px;
}

.hero-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.hero-actions .btn { min-width: 190px; }

/* Live state: whether the room is open right now, which is real information
   at a place whose night starts at five and ends at two. */
.hero-hours {
  margin-top: 34px;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--para);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.hero-hours i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--jade-lift);
  box-shadow: 0 0 0 4px rgba(46, 148, 118, 0.16);
  animation: pulse 2.6s ease-in-out infinite;
}

@keyframes pulse { 50% { box-shadow: 0 0 0 9px rgba(46, 148, 118, 0); } }

.hero-video { position: absolute; inset: 0; }
.kb { animation: kenburns 26s ease-in-out infinite alternate; }
@keyframes kenburns { to { transform: scale(1.09); } }

/* --- Inner page hero ----------------------------------------------------- */
.page-hero {
  position: relative;
  min-height: 62svh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: calc(var(--nav-h) + 60px) 0 70px;
  overflow: hidden;
}

.page-hero .hero-bg img, .page-hero .hero-video { opacity: 0.26; }

.page-hero .hero-bg::after {
  background: linear-gradient(180deg, rgba(11, 10, 12, 0.94), rgba(11, 10, 12, 0.62) 42%, var(--bg));
}

.page-hero .kicker { position: relative; z-index: 2; }

.page-hero h1 {
  position: relative;
  z-index: 2;
  margin-top: 18px;
  font-family: var(--display);
  font-size: clamp(2.4rem, 7vw, 4.2rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* =========================================================================
   About
   ========================================================================= */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: center;
}

.about-text p { color: var(--para); margin-bottom: 20px; }

.about-sign {
  display: inline-block;
  margin-top: 12px;
  font-family: var(--display);
  font-size: 1.15rem;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: var(--gold);
}

.about-images { position: relative; }

/* The passe-partout: a hairline that sits a little outside the picture rather
   than on it. It is the site's second borrowed shape after the ring. */
.img-frame { position: relative; overflow: hidden; }

.img-frame::after {
  content: '';
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(243, 237, 228, 0.16);
  pointer-events: none;
  transition: inset 0.6s var(--ease);
}

.img-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease);
}

.img-frame:hover img { transform: scale(1.05); }
.img-frame:hover::after { inset: 18px; }

.about-images .img-main { aspect-ratio: 4 / 5; }

.about-images .img-accent {
  position: absolute;
  right: -34px;
  bottom: -46px;
  width: 46%;
  aspect-ratio: 3 / 4;
  border: 6px solid var(--bg);
}

/* =========================================================================
   Menu
   ========================================================================= */
.menu-section { position: relative; }

#menu.menu-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('/images/menu-bg.jpg') center / cover no-repeat fixed;
  opacity: 0.09;
  z-index: -1;
}

.menu-section:not(#menu) { padding-top: 60px; }

@media (max-width: 860px) {
  #menu.menu-section::before { background-attachment: scroll; }
}

.menu-tabs {
  display: inline-flex;
  border: 1px solid var(--line);
  margin-bottom: 44px;
}

.menu-tabs button {
  padding: 12px 30px;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--para);
  transition: color 0.3s var(--ease), background 0.3s var(--ease);
}

.menu-tabs button.active { background: var(--jade); color: var(--text); }

.menu-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 54px 60px;
}

.menu-cat h3 {
  font-family: var(--display);
  font-size: 1.4rem;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--gold-lift);
  padding-bottom: 14px;
  position: relative;
}

.menu-cat h3::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 40px;
  height: 1px;
  background: var(--gold-dim);
}

.menu-cat-sub {
  margin: 12px 0 20px;
  font-size: 0.84rem;
  font-style: italic;
  color: var(--para);
  font-family: var(--serif);
}

.menu-item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 20px;
}

.menu-item .mi-name {
  font-family: var(--serif);
  font-size: 1rem;
  color: var(--text);
  flex: none;
  max-width: 74%;
}

.menu-item .mi-dots {
  flex: 1;
  border-bottom: 1px dotted rgba(203, 169, 104, 0.30);
  transform: translateY(-4px);
}

.menu-item .mi-price {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.98rem;
  color: var(--gold);
  white-space: nowrap;
  flex: none;
}

.menu-item-desc {
  margin-top: 5px;
  font-size: 0.84rem;
  line-height: 1.6;
  color: var(--para);
  max-width: 52ch;
}

/* A dish on a member price: the old one struck through, the new one in jade,
   so it reads as a change rather than as two prices. */
.mi-was { color: var(--para); opacity: 0.6; margin-right: 8px; font-style: normal; }
.mi-deal { color: var(--jade-lift); font-weight: 400; }

/* Spirits are quoted twice, glass and bottle */
.menu-item.mi-head { margin-top: 26px; }

.menu-item.mi-head .mi-price,
.menu-cat.two-way .mi-head .mi-price {
  font-family: var(--ui);
  font-style: normal;
  font-size: 0.6rem;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--para);
}

.menu-cat.two-way .menu-item { gap: 14px; }
.menu-cat.two-way .mi-name { max-width: 58%; }
.menu-cat.two-way .mi-dots { min-width: 20px; }
.menu-cat.two-way .mi-price { min-width: 74px; text-align: right; }
.menu-cat.two-way .mi-price.alt { color: var(--para); }

.menu-actions { margin-top: 56px; text-align: center; }

.menu-page { padding-top: 30px; }

.promo-notice {
  display: block;
  margin: 0 auto 40px;
  max-width: 640px;
  padding: 16px 22px;
  border: 1px solid var(--jade);
  background: rgba(31, 107, 85, 0.12);
  text-align: center;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text);
}

.promo-notice.hidden { display: none; }
.menu-page .promo-notice { margin-top: 10px; }

/* =========================================================================
   Afterwork
   ========================================================================= */
.afterwork { background: var(--bg-2); border-block: 1px solid var(--line); }

.afterwork-inner {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 64px;
  align-items: center;
}

.afterwork-copy .section-title { margin: 16px 0 18px; }
.afterwork-copy p { color: var(--para); margin-bottom: 26px; }
.afterwork-copy .btn { margin-top: 6px; }

.afterwork-time {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  border: 1px solid var(--gold-dim);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 24px;
}

.afterwork-list {
  padding: 34px 38px;
  background: var(--panel);
  border: 1px solid var(--line);
}

.aw-row { display: flex; align-items: baseline; gap: 10px; padding: 11px 0; }
.aw-row + .aw-row { border-top: 1px solid var(--line-soft); }
.aw-name { font-family: var(--serif); font-size: 0.98rem; }
.aw-dots { flex: 1; border-bottom: 1px dotted rgba(203, 169, 104, 0.26); transform: translateY(-4px); }
.aw-price { font-family: var(--serif); font-style: italic; color: var(--gold); white-space: nowrap; }

/* =========================================================================
   Spaces
   ========================================================================= */
.spaces-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.space-card {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  border: 1px solid var(--line-soft);
}

.space-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease), filter 0.6s var(--ease);
  filter: saturate(0.82) brightness(0.86);
}

.space-card:hover img { transform: scale(1.07); filter: saturate(1) brightness(1); }

.space-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 34%, rgba(11, 10, 12, 0.9));
  pointer-events: none;
}

.space-card figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 22px 20px;
  font-family: var(--display);
  font-size: 1.05rem;
  letter-spacing: 0.20em;
  text-transform: uppercase;
}

.space-card figcaption small {
  display: block;
  margin-top: 6px;
  font-family: var(--ui);
  font-size: 0.64rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  color: var(--gold);
}

.space-card figcaption small:empty { display: none; }

/* =========================================================================
   Gallery
   ========================================================================= */
.gallery-section { overflow: hidden; }
.gal-rows { display: grid; gap: 20px; }
.gal-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
.gal-track { display: flex; gap: 20px; width: max-content; animation: slide 52s linear infinite; }
.gal-marquee.reverse .gal-track { animation-direction: reverse; }
.gal-marquee:hover .gal-track { animation-play-state: paused; }

.gal-track img {
  width: 280px;
  height: 280px;
  object-fit: cover;
  cursor: pointer;
  filter: saturate(0.8) brightness(0.82);
  transition: filter 0.5s var(--ease), transform 0.5s var(--ease);
}

.gal-track img:hover { filter: none; transform: scale(1.03); }

@keyframes slide { to { transform: translateX(-50%); } }

.gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  place-items: center;
  background: rgba(6, 5, 7, 0.96);
  backdrop-filter: blur(6px);
  padding: 40px;
}

.lightbox.open { display: grid; }
.lightbox img { max-width: min(92vw, 900px); max-height: 86svh; object-fit: contain; }

.lightbox button {
  position: absolute;
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border: 1px solid var(--gold-dim);
  border-radius: 50%;
  color: var(--text);
  font-size: 1.2rem;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease);
}

.lightbox button:hover { background: var(--jade); border-color: var(--jade); }
.lb-close { top: 26px; right: 26px; }
.lb-prev { left: 26px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 26px; top: 50%; transform: translateY(-50%); }

/* =========================================================================
   Hours and map
   ========================================================================= */
.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.info-grid.no-map { grid-template-columns: 1fr; max-width: 620px; }

.hours-list { list-style: none; }

.hours-list li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line-soft);
}

.hours-list .day-col { display: flex; flex-direction: column; flex: none; }

.hours-list .day {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.20em;
  text-transform: uppercase;
}

.hours-list .day-note {
  margin-top: 3px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.8rem;
  color: var(--gold);
}

.hours-list .dots { flex: 1; border-bottom: 1px dotted rgba(203, 169, 104, 0.22); transform: translateY(-4px); }
.hours-list .time { font-family: var(--serif); color: var(--text); white-space: nowrap; }
.hours-list .closed { font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--err); }

#map { height: 420px; border: 1px solid var(--line); background: var(--bg-2); }
.leaflet-tile-pane { filter: grayscale(0.9) invert(0.92) contrast(0.86) hue-rotate(180deg); }
.leaflet-control-zoom a { background: var(--panel) !important; color: var(--text) !important; border-color: var(--line) !important; }
.leaflet-control-attribution { background: rgba(11, 10, 12, 0.7) !important; color: var(--para) !important; }
.leaflet-control-attribution a { color: var(--gold) !important; }

.map-pin { position: relative; width: 22px; height: 22px; }

.map-pin::before {
  content: '';
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: var(--jade-lift);
}

.map-pin::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--jade-lift);
  animation: ping 2.4s ease-out infinite;
}

@keyframes ping { to { transform: scale(2.1); opacity: 0; } }

.leaflet-popup-content-wrapper { background: var(--panel); color: var(--text); border-radius: 0; border: 1px solid var(--line); font-family: var(--ui); }
.leaflet-popup-tip { background: var(--panel); }
.leaflet-popup-content a { color: var(--jade-lift); }

/* =========================================================================
   Reservation
   ========================================================================= */
.reserve-section { background: var(--bg-2); border-block: 1px solid var(--line); }

.reserve-panel {
  max-width: 780px;
  margin: 0 auto;
  padding: 52px 54px;
  background: var(--panel);
  border: 1px solid var(--line);
  position: relative;
}

/* A seal that follows you down the page: their disc again, with the invitation
   set around it. Hidden over the hero, where the two buttons already say it,
   and hidden on a phone, where it would sit on top of the content. */
.reserve-badge {
  position: fixed;
  right: 26px;
  bottom: 26px;
  z-index: 90;
  width: 92px;
  height: 92px;
  opacity: 0;
  transform: scale(0.8);
  pointer-events: none;
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}

body.scrolled-past-hero .reserve-badge { opacity: 1; transform: none; pointer-events: auto; }
.reserve-badge svg { width: 100%; height: 100%; animation: turn 40s linear infinite; }
.reserve-badge svg text { font-family: var(--ui); font-size: 8.6px; letter-spacing: 3.4px; text-transform: uppercase; fill: var(--gold-dim); }

.reserve-badge .badge-center {
  position: absolute;
  inset: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--panel);
  transition: transform 0.5s var(--ease);
}

.reserve-badge .badge-center img { width: 46px; border-radius: 50%; }
.reserve-badge:hover .badge-center { transform: scale(1.08); }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-field { display: flex; flex-direction: column; gap: 8px; }
.form-field.full { grid-column: 1 / -1; }

.form-field label, .auth-form label {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--para);
}

.form-field input, .form-field select, .auth-form input, .auth-form select {
  width: 100%;
  padding: 13px 15px;
  background: var(--bg);
  border: 1px solid var(--line-soft);
  color: var(--text);
  font-family: var(--ui);
  font-size: 0.94rem;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}

.form-field input::placeholder { color: rgba(167, 158, 147, 0.5); }

.form-field input:focus, .form-field select:focus,
.auth-form input:focus, .auth-form select:focus {
  outline: none;
  border-color: var(--jade-lift);
  background: #0F0D11;
}

.form-field input[type='date'], .form-field input[type='time'] { color-scheme: dark; }
.auth-form select option { background: var(--bg-2); }

.phone-row { display: grid; grid-template-columns: 116px 1fr; gap: 10px; }
.form-note { margin-top: 18px; font-size: 0.8rem; color: var(--para); text-align: center; }
.form-submit { grid-column: 1 / -1; margin-top: 8px; }
.form-submit .btn { width: 100%; }

.form-msg { margin-top: 14px; text-align: center; font-size: 0.86rem; min-height: 22px; }
.form-msg.ok { color: var(--ok); }
.form-msg.err { color: var(--err); }

.prefill-note {
  margin-bottom: 22px;
  padding: 11px 16px;
  border-left: 2px solid var(--jade);
  background: rgba(31, 107, 85, 0.10);
  font-size: 0.84rem;
  color: var(--para);
}

.field-note { font-size: 0.74rem; color: var(--para); }

/* Time picker: only the slots the house actually takes */
.timepick { position: relative; }

.timepick-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 15px;
  background: var(--bg);
  border: 1px solid var(--line-soft);
  color: var(--para);
  font-size: 0.94rem;
  text-align: left;
  transition: border-color 0.3s var(--ease);
}

.timepick-btn svg { width: 15px; height: 15px; flex: none; fill: var(--gold); }
.timepick-btn .tp-caret { margin-left: auto; transition: transform 0.3s var(--ease); fill: var(--para); }
.timepick-btn:hover { border-color: var(--gold-dim); }
.timepick-btn.chosen { color: var(--text); }
.timepick-btn.open { border-color: var(--jade-lift); }
.timepick-btn.open .tp-caret { transform: rotate(180deg); }

.timepick-panel {
  position: absolute;
  z-index: 40;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: 232px;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding: 8px;
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.6);
}

.timepick-panel[hidden] { display: none; }
.timepick-panel::-webkit-scrollbar { width: 5px; }
.timepick-panel::-webkit-scrollbar-thumb { background: var(--gold-dim); }

.timepick-slot {
  padding: 9px 4px;
  text-align: center;
  font-size: 0.84rem;
  color: var(--para);
  border: 1px solid transparent;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.timepick-slot:hover { background: rgba(243, 237, 228, 0.06); color: var(--text); }
.timepick-slot.on { background: var(--jade); color: var(--text); border-color: var(--jade); }

/* =========================================================================
   Contact
   ========================================================================= */
.contact-band { position: relative; overflow: hidden; }

.contact-band::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('/images/contact-bg.jpg') center / cover no-repeat;
  opacity: 0.11;
}

.contact-band > .container { position: relative; z-index: 2; }
.contact-inner { text-align: center; max-width: 780px; margin: 0 auto; }
.contact-inner .section-title { margin: 16px 0 18px; }
.contact-lead { color: var(--para); margin-bottom: 34px; }

.contact-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 38px; }

.contact-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border: 1px solid var(--line-soft);
  background: rgba(23, 20, 26, 0.7);
  text-align: left;
  transition: border-color 0.35s var(--ease), transform 0.35s var(--ease);
}

a.contact-card:hover { border-color: var(--jade); transform: translateY(-3px); }

.cc-icon { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--gold-dim); border-radius: 50%; }
.cc-icon svg { width: 15px; height: 15px; fill: var(--gold); }
.cc-body { display: flex; flex-direction: column; min-width: 0; }
.cc-body small { font-size: 0.58rem; font-weight: 600; letter-spacing: 0.20em; text-transform: uppercase; color: var(--para); }
.cc-body b { font-weight: 400; font-size: 0.9rem; overflow-wrap: anywhere; }

.contact-lines { display: grid; gap: 12px; margin-top: 26px; margin-bottom: 30px; color: var(--para); }
.contact-lines > div { display: flex; align-items: center; gap: 12px; }
.contact-lines strong { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid var(--gold-dim); border-radius: 50%; }
.contact-lines strong svg { width: 11px; height: 11px; fill: var(--gold); }
.contact-lines a:hover { color: var(--text); }

.contact-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.contact-actions .btn { min-width: 180px; }
.contact-band .socials { justify-content: center; margin-top: 34px; }

.socials { display: flex; gap: 14px; }

.socials a {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-soft);
  border-radius: 50%;
  transition: border-color 0.35s var(--ease), transform 0.35s var(--ease);
}

.socials a img { width: 22px; height: 22px; }
.socials a:hover { border-color: var(--gold-dim); transform: translateY(-3px); }

/* =========================================================================
   Footer
   ========================================================================= */
footer { padding: 74px 0 30px; border-top: 1px solid var(--line); background: var(--bg-2); }

.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 44px; }
.footer-logo { height: 26px; width: auto; margin-bottom: 20px; }
.footer-grid p { color: var(--para); font-size: 0.9rem; max-width: 34ch; }

.footer-grid h4 {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 16px;
}

.footer-grid ul { list-style: none; display: grid; gap: 10px; }
.footer-grid li { font-size: 0.88rem; color: var(--para); }
.footer-grid a { color: var(--para); transition: color 0.3s var(--ease); }
.footer-grid a:hover { color: var(--text); }

.footer-bottom {
  margin-top: 54px;
  padding-top: 22px;
  border-top: 1px solid var(--line-soft);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 0.74rem;
  color: var(--para);
}

.footer-bottom a:hover { color: var(--gold); }

/* =========================================================================
   Account, sign-in, deals
   ========================================================================= */
.page-boot { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; background: var(--bg); transition: opacity 0.4s ease; }
.page-boot.gone { opacity: 0; pointer-events: none; }

.boot-mark { position: relative; display: grid; place-items: center; width: 96px; height: 96px; }
.boot-mark img { width: 54px; }

.boot-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(203, 169, 104, 0.16);
  border-top-color: var(--gold);
  animation: turn 1.1s linear infinite;
}

.page-account { position: relative; min-height: 100svh; display: flex; flex-direction: column; }

.page-account::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background: url('/images/account-bg.jpg') center / cover no-repeat;
  opacity: 0.14;
}

.page-account::after { content: ''; position: fixed; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(11, 10, 12, 0.86), var(--bg)); }
.page-account .nav { position: sticky; background: rgba(11, 10, 12, 0.9); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.page-account .nav-logo img { height: 26px; }
.page-account footer { margin-top: auto; background: transparent; }

.nav-simple .nav-links { margin-left: auto; }
.nav-simple .nav-links li { list-style: none; }
.nav-simple .nav-links a { font-size: 0.68rem; }

.auth-wrap { flex: 1; display: grid; place-items: center; padding: 60px 22px 90px; }

.auth-card {
  width: min(520px, 100%);
  padding: 46px 44px;
  background: rgba(23, 20, 26, 0.86);
  border: 1px solid var(--line);
  backdrop-filter: blur(8px);
}

.auth-card .section-title { font-size: 1.7rem; text-align: center; }
.auth-logo { display: block; height: 26px; width: auto; margin: 0 auto 22px; }
.auth-sub { text-align: center; color: var(--para); font-size: 0.9rem; margin-top: 12px; margin-bottom: 30px; }
.auth-form { display: grid; gap: 18px; }
.auth-form .btn { width: 100%; margin-top: 6px; }
.auth-form .btn.ghost { margin-top: 0; }
.auth-form label { display: grid; gap: 8px; }
.auth-form label.stay-row { grid-template-columns: auto 1fr; align-items: center; gap: 10px; text-transform: none; letter-spacing: 0.04em; font-size: 0.8rem; font-weight: 400; }
.auth-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.auth-hint { font-size: 0.74rem; color: var(--para); }
.auth-switch { text-align: center; margin-top: 22px; font-size: 0.86rem; color: var(--para); }
.auth-switch a { color: var(--gold); }
.auth-switch a:hover { color: var(--gold-lift); }
.auth-msg { text-align: center; font-size: 0.86rem; min-height: 20px; }
.auth-msg.ok { color: var(--ok); }
.auth-msg.err { color: var(--err); }

#signupForm { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }
#signupForm .full { grid-column: 1 / -1; }

.gender-row { display: flex; gap: 8px; }
.gender-row button { flex: 1; padding: 11px; border: 1px solid var(--line-soft); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--para); transition: all 0.25s; }
.gender-row button:hover { border-color: var(--gold-dim); color: var(--text); }
.gender-row button.active { background: var(--jade); border-color: var(--jade); color: var(--text); }

.birthday-note { font-size: 0.74rem; color: var(--para); }
.stay-line {
  margin-top: 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

/* Beats the generic .auth-form label rule, which lays labels out as a stacked
   grid and would put the tick above its own wording. */
.auth-form .stay-line label.stay-row {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--para);
  margin: 0;
}

.stay-row input { width: auto; accent-color: var(--jade-lift); }
.stay-line .forgot-link { margin-top: 0; }

.forgot-link { display: inline-block; margin-top: 4px; font-size: 0.78rem; color: var(--para); }
.forgot-link:hover { color: var(--gold); }

.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 46px; }
.pw-eye { position: absolute; right: 10px; bottom: 9px; width: 30px; height: 30px; display: grid; place-items: center; opacity: 0.55; }
.pw-eye:hover { opacity: 1; }
.pw-eye svg { width: 17px; height: 17px; fill: var(--para); }
.pw-eye .eye-shut { display: none; }
.pw-eye.on .eye-open { display: none; }
.pw-eye.on .eye-shut { display: block; }

.pending-title { text-align: center; }

.account-main { flex: 1; padding: 40px 0 90px; }
.account-main > .container { display: grid; gap: 34px; }
.account-main section { padding: 0; }

.member-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 24px; }
.member-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }

.member-card { padding: 26px 28px; background: rgba(23, 20, 26, 0.8); border: 1px solid var(--line); }
.member-card h3 { font-family: var(--display); font-size: 1.1rem; letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 12px; }
.member-card .muted { color: var(--para); font-size: 0.88rem; }
.member-card .btn { margin-top: 18px; }

.fidelity-card { padding: 26px 28px; background: rgba(31, 107, 85, 0.10); border: 1px solid var(--jade); }
.fidelity-card .kicker { margin-bottom: 10px; }
.fidelity-card b { font-family: var(--serif); font-size: 1.9rem; color: var(--gold); display: block; }
.fidelity-card p { color: var(--para); font-size: 0.88rem; }
.fidelity-card.off b { color: var(--para); }

.res-list { display: grid; gap: 14px; }

.res-card {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 20px 24px;
  background: rgba(23, 20, 26, 0.8);
  border: 1px solid var(--line-soft);
  flex-wrap: wrap;
}

.res-when { display: flex; flex-direction: column; flex: none; min-width: 108px; }
.res-when b { font-family: var(--serif); font-size: 1.2rem; color: var(--gold); }
.res-when span { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--para); }
.res-meta { display: flex; gap: 20px; flex-wrap: wrap; flex: 1; }
.res-meta span { font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--para); }
.res-meta b { display: block; font-weight: 400; font-size: 0.94rem; color: var(--text); }

.res-badge { padding: 6px 14px; font-size: 0.6rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; border: 1px solid; }
.res-badge.pending { color: var(--gold); border-color: var(--gold-dim); }
.res-badge.confirmed { color: var(--ok); border-color: rgba(62, 158, 122, 0.5); }
.res-badge.cancelled { color: var(--err); border-color: rgba(217, 96, 63, 0.5); }

.deals-main { padding: 30px 0 90px; }
.deals-main .section-head { margin-bottom: 34px; }
.deal-group { margin-bottom: 46px; }
.deal-group h2 { font-family: var(--display); font-size: 1.3rem; letter-spacing: 0.20em; text-transform: uppercase; color: var(--gold-lift); margin-bottom: 20px; }
.deal-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; }

.deal-card { position: relative; background: rgba(23, 20, 26, 0.82); border: 1px solid var(--line-soft); transition: border-color 0.35s var(--ease), transform 0.35s var(--ease); }
.deal-card:hover { border-color: var(--jade); transform: translateY(-3px); }
.deal-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.deal-body { padding: 20px 22px; }
.deal-body h3 { font-family: var(--serif); font-size: 1.05rem; margin-bottom: 8px; }
.deal-body p { font-size: 0.84rem; color: var(--para); }
.deal-prices { display: flex; align-items: baseline; gap: 12px; margin-top: 14px; }
.deal-prices s { color: var(--para); opacity: 0.6; font-family: var(--serif); }
.deal-prices b { font-family: var(--serif); font-size: 1.3rem; color: var(--jade-lift); font-weight: 400; }
.deal-badge { position: absolute; top: 12px; right: 12px; padding: 5px 11px; background: var(--jade); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.14em; }

.deals-empty { text-align: center; padding: 70px 0; color: var(--para); }
.deals-empty .contact-actions { margin-top: 26px; }

/* --- Delete account ------------------------------------------------------ */
.del-card { width: min(620px, 100%); padding: 46px 44px; background: rgba(23, 20, 26, 0.86); border: 1px solid var(--line); }
.del-card .section-title { font-size: 1.6rem; text-align: center; }
.del-card .auth-sub { margin-bottom: 24px; }
.del-card .btn { width: 100%; }
.del-block { margin-bottom: 28px; }
.del-block h2 { font-size: 0.66rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); margin-bottom: 12px; }
.del-list { list-style: none; display: grid; gap: 10px; }
.del-list li { position: relative; padding-left: 20px; font-size: 0.88rem; color: var(--para); }
.del-list li::before { content: ''; position: absolute; left: 0; top: 10px; width: 6px; height: 6px; border-radius: 50%; border: 1px solid var(--gold-dim); }
.del-note { font-size: 0.8rem; color: var(--para); margin-top: 14px; }
.del-or { text-align: center; font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--para); margin: 22px 0; }
.del-app { font-size: 0.86rem; color: var(--para); }

/* --- Legal --------------------------------------------------------------- */
.legal { max-width: 760px; margin: 0 auto; padding: 40px 0 90px; }
.legal h1 { font-family: var(--display); font-size: clamp(1.9rem, 5vw, 2.8rem); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 26px; }
.legal h2 { font-family: var(--display); font-size: 1.15rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-lift); margin: 34px 0 12px; }
.legal p { color: var(--para); margin-bottom: 14px; }
.legal ul { list-style: none; display: grid; gap: 8px; margin-bottom: 16px; }
.legal li { position: relative; padding-left: 18px; color: var(--para); }
.legal li::before { content: '—'; position: absolute; left: 0; color: var(--gold-dim); }

/* --- Toast --------------------------------------------------------------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 34px;
  transform: translate(-50%, 20px);
  z-index: 400;
  padding: 13px 26px;
  background: var(--panel);
  border: 1px solid var(--gold-dim);
  font-size: 0.82rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s, transform 0.3s;
}

.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 1000px) {
  .spaces-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .afterwork-inner { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 860px) {
  section { padding: 78px 0; }
  .about-grid, .info-grid { grid-template-columns: 1fr; gap: 44px; }
  .about-images .img-accent { right: 0; bottom: -30px; width: 40%; }
  .form-grid { grid-template-columns: 1fr; }
  .reserve-panel { padding: 46px 26px; }
  #signupForm { grid-template-columns: 1fr; }
  .auth-row { grid-template-columns: 1fr; }

  .burger { display: flex; }
  .nav-links {
    position: fixed;
    inset: 0;
    flex-direction: column;
    justify-content: center;
    gap: 22px;
    background: rgba(11, 10, 12, 0.98);
    backdrop-filter: blur(16px);
    transform: translateY(-100%);
    transition: transform 0.5s var(--ease);
    margin: 0;
  }
  .nav-links.open { transform: none; }
  .nav-links li { opacity: 0; transform: translateY(14px); }
  .nav-links.open li { animation: rise 0.5s var(--ease) forwards; }
  .nav-links.open li:nth-child(1) { animation-delay: 0.08s; }
  .nav-links.open li:nth-child(2) { animation-delay: 0.13s; }
  .nav-links.open li:nth-child(3) { animation-delay: 0.18s; }
  .nav-links.open li:nth-child(4) { animation-delay: 0.23s; }
  .nav-links.open li:nth-child(5) { animation-delay: 0.28s; }
  .nav-links.open li:nth-child(6) { animation-delay: 0.33s; }
  .nav-links.open li:nth-child(7) { animation-delay: 0.38s; }
  .nav-links a { font-size: 0.9rem; letter-spacing: 0.24em; }
  .nav-links .mobile-only { display: block; }
  .nav-links .lang-switch { margin-top: 10px; }
  .nav-right { display: none; }
  .nav.menu-open, .nav.scrolled.menu-open { background: transparent; border-bottom-color: transparent; }

  .auth-card, .del-card { padding: 36px 24px; }
  .gal-track img { width: 210px; height: 210px; }
  .menu-cols { grid-template-columns: 1fr; gap: 44px; }
  .res-card { gap: 14px; }
  #map { height: 320px; }
  .hero-disc { width: min(72vmin, 320px); }
}

@media (max-width: 560px) {
  .container { width: calc(100% - 32px); }
  .spaces-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 30px; }
  .hero-actions .btn, .contact-actions .btn { width: 100%; }
  .about-images .img-accent { display: none; }
  .contact-cards { grid-template-columns: 1fr; }
  .lightbox { padding: 16px; }
  .lb-prev { left: 10px; }
  .lb-next { right: 10px; }
  .lb-close { top: 12px; right: 12px; }
  .reserve-badge { display: none; }
}

/* Everything that moves, stops. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal, .reveal-left, .hero-content > * { opacity: 1; transform: none; }
}