/* в”Ђв”Ђ Variables в”Ђв”Ђ */
/* =========================================================
   styles.css — GLOBAL styles + HOME page content sections
   Map: PROJECT_MAP.md  ·  Rules: CLAUDE.md
   Find a section: grep "=== " in this file. Anchors:
     GLOBAL: VARIABLES / RESET / LAYOUT / HEADER / NAV /
             NAV TOGGLE / HERO BASE / FOOTER / RESERVATION MODAL / FORMS
     SHARED BUTTONS
     HOME:   DARK STRIP / GIFT BANNER / ABOUT FEATURE / WINE FEATURE /
             SERVICES / QUOTE STRIP / TESTIMONIAL
     RESPONSIVE / MOBILE blocks live lower (see CLAUDE.md §5).
     MOBILE: HOME (<=767px) now has greppable sub-anchors:
       "=== MOBILE: HOME - " {1.DARK STRIP, 2.FOOD FEATURE, 3.WINE FEATURE,
        3b.WINE CAROUSEL, 3c.BOTTLE CARDS, 4.SERVICES, 5.GIFT BANNER, HDR/CINEMATIC}
   NOTE: HOME content sections live HERE, not in index.css.
========================================================= */

/* === GLOBAL: VARIABLES & BRAND TOKENS === */
:root {
  --deep-wine:  #110305;
  --wine:       #2E0810;
  --burgundy:   #5A111A;
  --dark-brown: #160D0A;
  --cream:      #EFE2CF;
  --beige:      #D9C2A3;
  --muted-cream:#BFAE98;
  --border-dark: rgba(239,226,207,0.14);
  --border-cream: rgba(26,15,11,0.18);
  --text-light: #F4EBD9;
  --text-dark:  #1A0F0B;
  --muted:      #B09880;
}

/* в”Ђв”Ђ Reset в”Ђв”Ђ */
/* === GLOBAL: RESET & BASE === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--deep-wine);
  color: var(--text-light);
  font-family: 'Inter', system-ui, sans-serif;
  line-height: 1.6;
}
img { max-width: 100%; display: block; }
button, a { font: inherit; }

/* === GLOBAL: LAYOUT (page-width container) === */
.page-width {
  width: min(100%, 1200px);
  margin: 0 auto;
  padding-left: clamp(1.25rem, 5vw, 5rem);
  padding-right: clamp(1.25rem, 5vw, 5rem);
}
/* desktop-only line break (hidden on mobile) */
.br-desktop { display: none; }
@media (min-width: 768px) { .br-desktop { display: inline; } }
/* visually hidden but still readable by screen readers */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* в”Ђв”Ђ Header в”Ђв”Ђ */
/* === GLOBAL: HEADER === */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  /* cinematic top scrim — always present, replaced by solid on scroll */
  background: linear-gradient(
    to bottom,
    rgba(10, 4, 4, 0.92) 0%,
    rgba(10, 4, 4, 0.76) 55%,
    rgba(10, 4, 4, 0)    100%
  );
  transition: background 350ms ease;
}
.site-header.scrolled {
  background: rgba(17, 3, 5, 0.94);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 0;
  transition: padding 300ms ease;
}

/* Brand */
.brand {
  display: flex; flex-direction: column; gap: 0.12rem;
  color: var(--text-light); text-decoration: none; flex-shrink: 0;
}
.brand-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.70rem; font-weight: 600;
  letter-spacing: 0.24em; text-transform: uppercase; line-height: 1.1;
  white-space: nowrap;
}
.brand-subtitle {
  font-size: 0.66rem; color: var(--muted);
  letter-spacing: 0.2em; text-transform: uppercase;
  white-space: nowrap;
}

/* Nav — full-screen overlay on mobile; overridden to horizontal row at 768px */
/* === GLOBAL: NAV (mobile overlay + desktop row) === */
.site-nav {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  z-index: 200;
  background: linear-gradient(180deg, #160609 0%, #080303 100%);
  flex-direction: column;
  align-items: center;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.site-nav.is-open { display: flex; }
.site-nav a {
  color: var(--text-light); text-decoration: none;
  font-size: 0.75rem; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  opacity: 0.8; transition: opacity 200ms;
}
.site-nav a:hover { opacity: 1; }

/* Active page link — mobile overlay */
.site-nav a[aria-current="page"],
body:not(.page-home) .site-nav a.is-active {
  color: #c9a96e;
  opacity: 1;
  text-decoration: underline;
  text-decoration-color: #c9a96e;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* Overlay header row: X close button (left) + logo (center) */
.nav-overlay-header {
  display: flex; align-items: center; justify-content: center;
  position: relative; width: 100%; flex-shrink: 0;
 padding: 1.8rem clamp(1.25rem, 5vw, 2rem) 1rem; /*отступы внутри контейнера */
  border-bottom: 1px solid rgba(239,226,207,0.08); /* лингия снизу*/
}
.nav-close {
  position: absolute; left: clamp(1.25rem, 5vw, 2rem);
  top: 50%; transform: translateY(-50%);
  background: transparent;
  border: 1px solid rgba(239,226,207,0.25);
  color: var(--cream); cursor: pointer;
  width: 2.2rem; height: 2.2rem;
  display: flex; align-items: center; justify-content: center;
  transition: border-color 200ms;
}
.nav-close:hover { border-color: rgba(239,226,207,0.6); }
.nav-brand {
  display: flex; flex-direction: column; align-items: center; gap: 0.12rem;
  color: var(--text-light); text-decoration: none;
}

/* Links group: flex column on mobile, display:contents on desktop */
.nav-links-group {
  display: flex; 
  flex-direction: column; 
  align-items: center;
  /*flex: 1;  растягивает блок на все доступное пространство между шапкой и футеромы */
  width: 100%; 
   /*justify-content: center; центрирование по вертикали */
}

/* Bottom section: CTA button + phone */
.nav-footer {
  display: flex; flex-direction: column; align-items: center;
  gap: 2rem; 
  width: 100%; 
  flex-shrink: 0;
  padding: 2.4rem 1.5rem;
  /* border-top: 1px solid rgba(239,226,207,0.08); */
}
.nav-reserve-btn { width: 100%; max-width: 18rem; text-align: center; }
.nav-phone-link {
  display: flex; 
  align-items: center; 
  color: rgba(239,226,207,0.55);
  text-decoration: none;
  font-size: clamp(0.85rem, 3.5vw, 1rem) !important;
  letter-spacing: 0.08em;
  transition: color 200ms;
}
.nav-phone-link:hover { color: rgba(239,226,207,0.9); }
.nav-phone-link svg {
  width: 1rem;
  height: 1rem;
  margin-right: 0.45rem;
} 


/* Mobile toggle */
/* === GLOBAL: NAV TOGGLE (hamburger) === */
.nav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: clamp(2.4rem, 10vw, 3.4rem);
  height: clamp(2.4rem, 10vw, 3.4rem);
  background: transparent;
  /*border: 1px solid rgba(239,226,207,0.25);*/
  border: none;
  border-radius: 0; cursor: pointer; color: var(--text-light);
}
.hamburger { 
  position: relative; 
  width: clamp(1.2rem, 5vw, 1.6rem);
  height: 2px; 
  background: currentColor; 
}
.hamburger::before, .hamburger::after {
  content: ''; position: absolute; left: 0; width: 100%; height: 2px; 
  background: currentColor;
}
.hamburger::before { top: -7px}
.hamburger::after  { top: 7px; }

/* в”Ђв”Ђ Buttons в”Ђв”Ђ */
/* === SHARED BUTTONS === */
.button {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.75rem 1.4rem;
  border: 1px solid transparent;
  border-radius: 0;
  text-decoration: none; cursor: pointer;
  font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  transition: background 180ms, color 180ms, border-color 180ms;
}
.button-primary {
  background: var(--burgundy); color: var(--text-light); border-color: var(--burgundy);
}
.button-primary:hover { background: #6e1a26; border-color: #6e1a26; }
.button-outline {
  background: transparent; color: var(--text-light);
  border-color: rgba(239,226,207,0.5);
}
.button-outline:hover { background: rgba(239,226,207,0.08); }
/* .button-outline-sm removed (L4 dead-code cleanup): unused in all HTML/JS — 2026-06-02 */
.header-phone {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--cream);
  opacity: 0.82;
  flex-shrink: 0;
  transition: opacity 200ms;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-decoration: none;
  cursor: pointer;
}
.header-phone svg { flex-shrink: 0; }
.header-phone:hover { opacity: 1; }
.nav-reserve-btn.button {
    font-size: 1rem;
  }

/* Text links */
.link-arrow {
  display: inline-flex; align-items: center;
  color: var(--text-dark); text-decoration: none;
  font-size: 0.77rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  transition: opacity 180ms;
}
.link-arrow:hover { opacity: 0.6; }
.link-arrow-light {
  display: inline-flex; align-items: center;
  color: var(--muted-cream); text-decoration: none;
  font-size: 0.77rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  transition: opacity 180ms;
}
.link-arrow-light:hover { opacity: 0.7; }

/* в”Ђв”Ђ HERO в”Ђв”Ђ */
/* === GLOBAL: HERO BASE (shared by all pages) === */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  background: #080202;
  overflow: hidden;
}

/* Mobile: full-bleed photo */
.hero-photo {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Mobile: dark overlay */
.hero-vignette {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right,  rgba(14,4,4,0.92) 0%, rgba(14,4,4,0.72) 42%, rgba(14,4,4,0.22) 72%, rgba(14,4,4,0.04) 100%),
    linear-gradient(to top,    rgba(14,4,4,0.55) 0%, rgba(14,4,4,0) 45%);
}

/* Keep hero-overlay for any remaining usage */
.hero-overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(to right,  rgba(14,4,4,0.92) 0%, rgba(14,4,4,0.72) 42%, rgba(14,4,4,0.22) 72%, rgba(14,4,4,0.04) 100%),
    linear-gradient(to top,    rgba(14,4,4,0.55) 0%, rgba(14,4,4,0) 45%);
}

.hero-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  padding-top: 0;
  padding-bottom: 0;
}

.hero-content {
  position: relative;
  z-index: 1;
  padding: clamp(10rem, 17vh, 20rem) 0 4rem;
}
.hero-copy {
  max-width: 520px;
}

/* Desktop hero: unified menu-style layout (source of truth: menu.css .mn-hero) */
@media (min-width: 768px) {
  .hero {
    min-height: 45vh;
    align-items: stretch;
  }

  /* Photo panel: right 78% of viewport, starts below header */
  .hero-photo {
    inset: 80px 0 0 30%;
  }

  /* Cinematic vignette: strong left fade + soft bottom fade — matches Menu hero exactly */
  .hero-vignette {
    background:
        linear-gradient(
          to right,
         #080202 0%,
         #080202 10%,
         rgba(8,2,2,0.96) 24%,
         rgba(8,2,2,0.82) 40%,
         rgba(8,2,2,0.42) 58%,
         rgba(8,2,2,0.10) 76%,
      transparent 90%
      ),
      linear-gradient(
        to top,
        #080202 0%,
        rgba(8,2,2,0.75) 14%,
        rgba(8,2,2,0.2) 30%,
        transparent 48%
      );
  }

  /* All page hero text containers — same editorial left indent on desktop.
     Each page uses its own hero-inner class name; all share one rule here. */
  .hero-inner,
  .mn-hero-inner,
  .br-hero-inner,
  .catr-hero-inner,
  .ct-hero-inner,
  .pe-hero-inner,
  .wn-hero-inner,
  .gc-hero-inner {
    padding-left: 0;
    padding-right: 0;
    margin-left: clamp(2rem, 4vw, 4rem);
  }

  /* Text block: 52% wide — matches Menu hero content width */
  .hero-inner .hero-copy {
    width: min(52%, 560px);
    max-width: none;
    padding: clamp(10rem, 20vh, 16rem) 0 1.5rem;
  }

  .hero-eyebrow {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.25em;
    color: rgba(201,169,110,0.65);
    margin: 0 0 1.1rem;
    text-transform: uppercase;
  }

  /* H1 at 90% of original — unified 10% reduction across all page heroes */
  .hero-inner h1,
  .hero-inner .about-hero-title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(3.15rem, 6.3vw, 5.85rem);
    font-weight: 400;
    line-height: 0.9;
    letter-spacing: 0.04em;
    color: var(--cream, #EFE2CF);
    text-transform: uppercase;
    margin: 0 0 1.4rem;
  }

  .hero-rule {
    display: block;
    width: 4rem;
    height: 1px;
    background: linear-gradient(to right, #c9a96e, rgba(201,169,110,0.2));
    margin-bottom: 1.4rem;
  }

  .hero-inner .hero-text,
  .hero-inner .about-hero-body {
    font-family: 'Inter', sans-serif;
    font-size: clamp(0.93rem, 1.5vw, 1.05rem);
    font-style: normal;
    font-weight: 400;
    color: rgba(239,226,207,0.58);
    line-height: 1.74;
    max-width: none;     /* заполняет колонку 560px — текст не зажат (home/about) */
    margin-bottom: 2rem;
  }
}

.hero h1 span,
.feature-text h2 span,
.wine-text h2 span { display: block; }

.hero-text {
  color: rgba(244,235,217,0.78); font-size: 1.15rem;
  line-height: 1.75; margin-bottom: 2rem;
  max-width: 26rem;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-bottom: 1.6rem; }
.hero-actions .button { min-width: 10.5rem; }

.hero-secondary-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem;
}
.hero-sec-link {
  color: rgba(239,226,207,0.72);
  text-decoration: none;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: color 180ms, opacity 180ms;
}
.hero-sec-link:hover { color: var(--cream); opacity: 1; }
.hero-sec-link span { margin-left: 0.25rem; }

/* в”Ђв”Ђ DARK VALUES STRIP в”Ђв”Ђ */
/* === HOME: DARK STRIP (What makes us special) === */
.dark-strip {
  background: var(--wine);
  border-top: 1px solid rgba(239,226,207,0.06);
  border-bottom: 1px solid rgba(239,226,207,0.06);
}
.dark-strip-grid {
  display: grid;
  gap: 0;
  width: 100%;
}
.dark-strip-item {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 0.45rem;
  padding: 2.2rem clamp(1.5rem, 6vw, 3rem);
  border-bottom: 1px solid rgba(239,226,207,0.1);
}
.dark-strip-item:last-child { border-bottom: none; }
.strip-icon {
  width: 2.4rem; height: 2.4rem;
  display: grid; place-items: center;
  color: var(--muted-cream); margin-bottom: 0.3rem;
}
.dark-strip-item h3 {
  font-family: 'Inter', sans-serif;
  font-size: 0.68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.22em;
  color: var(--text-light);
}
.dark-strip-item p {
  color: var(--muted); font-size: 0.88rem; line-height: 1.5;
  max-width: 18ch;
}

/* в”Ђв”Ђ GIFT CARDS BANNER в”Ђв”Ђ */
/* === HOME: GIFT BANNER === */
.gift-banner {
  background: var(--cream);
  padding: 2.8rem 0;
  border-top: 1px solid var(--border-cream);
  border-bottom: 1px solid var(--border-cream);
}
.gift-banner-inner {
  display: grid;
  grid-template-columns: auto auto auto;
  justify-content: start;
  align-items: center;
  gap: 1.6rem;
}

/* Card image */
.gift-cards-mockup {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 230px;
  min-width: 340px;
}
.gift-card-img {
  position: absolute;
  width: 270px;
  height: auto;
  display: block;
}
.gift-card-img.card-back {
  transform: rotate(-5deg) translate(-55px, 14px);
  filter: drop-shadow(0 6px 20px rgba(0,0,0,0.40));
  z-index: 1;
}
.gift-card-img.card-front {
  transform: rotate(2deg) translate(28px, -8px);
  filter: drop-shadow(0 12px 30px rgba(0,0,0,0.22));
  z-index: 2;
  transition: transform 400ms ease;
}
.gift-cards-mockup:hover .card-front {
  transform: rotate(1deg) translate(28px, -16px) scale(1.04);
}

/* Center content */
.gift-banner-content {
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
  gap: 0.6rem;
}
.gift-icon { color: var(--burgundy); opacity: 1; margin-bottom: 0.2rem; }
.gift-eyebrow {
  font-size: 0.68rem; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: #7a5540; margin: 0;
}
.gift-heading {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.7rem, 2.6vw, 2.2rem);
  font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-dark); line-height: 1; margin: 0;
}
.gift-text {
  color: #3d2c22; font-size: 0.88rem; line-height: 1.65;
  max-width: 28ch; margin: 0.7rem 0 0;
}

/* Right CTA */
.gift-cta { display: flex; justify-content: center; align-items: center; }
.gift-learn-more { padding: 0.85rem 3.6rem; font-size: 0.72rem; letter-spacing: 0.18em; }

/* Gift banner — desktop one-line subtext (mobile wraps naturally via max-width) */
@media (min-width: 768px) {
  .gift-text { white-space: nowrap; max-width: none; }
}

/* в”Ђв”Ђ FOOD FEATURE в”Ђв”Ђ */
/* === HOME: ABOUT FEATURE === */
.feature-section { padding: 0; background: var(--deep-wine); }

.split-grid { display: grid; gap: 0; }

.feature-layout { align-items: stretch; min-height: 58vh; }

/* text comes first in HTML в†’ left column */
.feature-text {
  position: relative;
  padding: 3.5rem 3rem;
  background: var(--cream); color: var(--text-dark);
  overflow: hidden;
  display: flex; flex-direction: column; justify-content: center;
  order: 1;
}

.section-label {
  display: block; margin-bottom: 0.9rem;
  text-transform: uppercase; letter-spacing: 0.28em;
  color: #7a5540; font-size: 0.68rem; font-weight: 600;
}
.section-label-light {
  display: block; margin-bottom: 0.9rem;
  text-transform: uppercase; letter-spacing: 0.28em;
  color: var(--muted); font-size: 0.68rem; font-weight: 600;
}
/* "Our Cellar" eyebrow — same colour as "Made from tradition" (desktop) */
@media (min-width: 768px) {
  .page-home .wine-text .section-label-light { color: rgba(201,169,110,0.65); }
}

.feature-text h2 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(2.86rem, 4.62vw, 4.18rem);
  line-height: 1.0; letter-spacing: -0.02em;
  color: var(--text-dark); font-weight: 400;
  margin-bottom: 1.5rem;
}
.feature-text p {
  color: #3d2c22; font-size: 0.97rem;
  max-width: 30rem; line-height: 1.78; margin-bottom: 2rem;
}

/* photo comes second in HTML в†’ right column */
.feature-media { order: 2; }
.feature-image {
  width: 100%; height: 100%; min-height: 44vh;
  background-size: cover; background-position: center;
}

/* в”Ђв”Ђ WINE FEATURE в”Ђв”Ђ */
/* === HOME: WINE FEATURE === */
.wine-feature {
  background: var(--dark-brown);
  border-top: 1px solid rgba(239,226,207,0.05);
}
.wine-layout { align-items: stretch; min-height: 50vh; }

.wine-photo {
  min-height: 40vh;
  background-size: cover;
  background-position: center 30%;
}
.wine-text {
  padding: 3.5rem 3rem;
  display: flex; flex-direction: column; justify-content: center;
  background: var(--wine);
}
.wine-text h2 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(2.64rem, 4.18vw, 3.74rem);
  line-height: 1.05; letter-spacing: -0.02em;
  color: var(--text-light); font-weight: 400;
  margin-bottom: 1.4rem;
}
.wine-text p {
  color: var(--muted); font-size: 0.97rem;
  line-height: 1.75; max-width: 30rem; margin-bottom: 2rem;
}

/* в”Ђв”Ђ SERVICE CARDS в”Ђв”Ђ */
/* === HOME: SERVICES === */
.services-section { padding: 0; }

.services-grid {
  display: grid;
  grid-template-columns: 1fr 1.7fr;
  grid-template-rows: 1fr 1fr;
  gap: 1px;
  background: rgba(239,226,207,0.09);
}

.svc-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  text-decoration: none;
  color: var(--text-light);
  cursor: pointer;
  transition: filter 300ms ease;
}
.svc-card:hover { filter: brightness(1.09); }
.svc-card:hover .svc-link { color: var(--text-light); }

.svc-hero {
  grid-column: 1;
  grid-row: 1 / 3;
  min-height: 520px;
  padding: 3rem 2.8rem;
  background:
    linear-gradient(180deg,
      rgba(6,2,2,0.62) 0%,
      rgba(6,2,2,0.80) 55%,
      rgba(6,2,2,0.97) 100%),
    url('photos/main-page/private%20events.webp') center / cover no-repeat;
}

.svc-catering {
  background:
    linear-gradient(180deg,
      rgba(6,2,2,0.62) 0%,
      rgba(6,2,2,0.82) 55%,
      rgba(6,2,2,0.97) 100%),
    url('photos/main-page/catering.webp') center / cover no-repeat;
}

.svc-mornings {
  background:
    linear-gradient(180deg,
      rgba(6,2,2,0.62) 0%,
      rgba(6,2,2,0.82) 55%,
      rgba(6,2,2,0.97) 100%),
    url('photos/main-page/brunch3.webp') 70% 50% / 80% no-repeat;
}

.svc-inner {
  position: relative;
  z-index: 2;
  padding: 2rem 2.2rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
}

.svc-heading {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--cream);
  margin-bottom: 0.9rem;
  font-size: clamp(1.55rem, 2.2vw, 1.95rem);
}
.svc-hero .svc-heading {
  font-size: clamp(2.2rem, 3.4vw, 3.2rem);
  margin-bottom: 1rem;
}
.svc-heading em { font-style: normal; color: inherit; }

.svc-body {
  color: rgba(244,235,217,0.65);
  font-size: 0.85rem;
  line-height: 1.75;
  margin-bottom: 1.4rem;
  max-width: 28rem;
}

.svc-cta { display: flex; align-items: center; gap: 0.75rem; }

.svc-rule {
  width: 24px; height: 1px;
  background: rgba(239,226,207,0.25);
  flex-shrink: 0;
}
.svc-hero .svc-rule { width: 32px; }

.svc-link {
  font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted);
  transition: color 180ms;
}

.svc-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.svc-meta-item {
  font-size: 0.59rem; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: #6a4a38; white-space: nowrap;
}
.svc-meta-dot {
  width: 2.5px; height: 2.5px;
  border-radius: 50%;
  background: rgba(191,174,152,0.28);
  flex-shrink: 0;
}

/* в”Ђв”Ђ QUOTE STRIP в”Ђв”Ђ */
/* === HOME: QUOTE STRIP === */
.quote-strip {
  background: var(--cream);
  border-top: 1px solid var(--border-cream);
  border-bottom: 1px solid var(--border-cream);
  padding: 2.6rem 0;
}
.quote-strip-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.quote-strip-text {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.25rem, 2.1vw, 1.72rem);
  font-weight: 400;
  color: var(--text-dark);
  white-space: normal;
  max-width: 34rem;
  line-height: 1.45;
  margin: 0;
}
.quote-strip-text::before {
  content: '\201C\2009';
  color: #9b7b55;
}
.quote-strip-text::after {
  content: '\2009\201D';
  color: #9b7b55;
}
.quote-strip-credit {
  display: block;
  margin-top: 0.6rem;
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #9b7b55;
  font-style: normal;
  text-align: center;
}

/* в”Ђв”Ђ TESTIMONIAL в”Ђв”Ђ */
/* === HOME: TESTIMONIAL === */
/* Section removed (dead-code cleanup, group "testimonial/quote"): no testimonial/quote
   markup in any HTML — 0 refs in HTML/JS. Note: .quote-strip is a DIFFERENT, live
   section and is untouched. — 2026-06-02 */

/* в”Ђв”Ђ FOOTER в”Ђв”Ђ */
/* === GLOBAL: FOOTER === */
.site-footer {
  padding: 0 clamp(1.25rem, 5vw, 5rem);
  background: linear-gradient(to top, #060101 0%, #0d0208 100%);
}

.footer-grid {
  display: grid;
  grid-template-columns: 0.9fr 0.8fr 0.8fr 0.8fr 1.7fr;
  column-gap: 0;
  min-height: 360px;
  background: linear-gradient(to top, #060101 0%, #0d0208 100%);
}

/* 1. Brand panel — moody wine photo with text overlay */
.footer-brand-panel {
  position: relative;
  background-size: auto 70%;
  background-position: center 35%;
  background-repeat: no-repeat;
  display: grid;
  place-items: center;
  overflow: hidden;
  filter: brightness(0.92);   /* фото в футере видно лучше (было 0.70) */
  -webkit-mask-image: radial-gradient(ellipse 50% 38% at center 35%, #000 28%, rgba(0,0,0,0.35) 56%, transparent 86%);
          mask-image: radial-gradient(ellipse 50% 38% at center 35%, #000 28%, rgba(0,0,0,0.35) 56%, transparent 86%);
}

.footer-brand {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.85rem;
  padding: 2rem;
}
.footer-brand-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.4rem, 1.75vw, 1.85rem);
  font-weight: 500;
  color: #d9c2a3;
  letter-spacing: 0.16em;
  line-height: 1.05;
}
.footer-brand-divider {
  width: 32px;
  height: 1px;
  background: rgba(217, 194, 163, 0.45);
}
.footer-brand-subtitle {
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  color: rgba(217, 194, 163, 0.62);
  text-transform: uppercase;
}

/* 2 & 3. Info columns */
.footer-grid .footer-col {
 padding: 3.25rem 1.25rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.footer-grid h3 {
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: rgba(217, 194, 163, 0.48);
  margin-bottom: 1.5rem;
}
.footer-grid p {
  color: rgba(217, 194, 163, 0.62);
  font-size: 0.86rem;
  line-height: 1.75;
  margin: 0 0 0.35rem;
}
.footer-grid p a {
  color: inherit;
  text-decoration: none;
  transition: color 200ms;
}
.footer-grid p a:hover { color: #d9c2a3; }

/* Hours column */
.footer-grid .footer-hours {
  /* padding-left: 0.5rem; */
  margin-left: 0;
}

/* Hours table */
.footer-hours ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.footer-hours li {
  display: flex;
  align-items: baseline;
  font-size: 0.86rem;
  line-height: 1.45;
}
/* Dotted leader — injected between day and time via order trick */
.footer-hours li span:first-child {
  flex: none;
  order: 1;
  color: var(--cream);
  font-weight: 500;
  letter-spacing: 0.06em;
}
.footer-hours li::before {
  content: '';
  order: 2;
  flex: 1;
  border-bottom: 1.5px dotted rgba(201,169,110,0.32);
  margin: 0 0.45rem 0.18em;
}
.footer-hours li span:last-child {
  flex: none;
  order: 3;
  color: rgba(217, 194, 163, 0.62);
}

/* 4. Actions column */
.footer-actions {
  position: relative;
  padding: 3.25rem 2rem 3.25rem 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.5rem;
}
.footer-actions::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 70%;
  background: rgba(217, 194, 163, 0.12);
}
.footer-actions .social-icons {
  display: flex;
  gap: 0.5rem;
  margin: 0;
}
.footer-actions .social-icon {
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  border: 1px solid rgba(217, 194, 163, 0.22);
  display: grid;
  place-items: center;
  color: #d9c2a3;
  text-decoration: none;
  transition: border-color 200ms, background 200ms, transform 200ms;
}
.footer-actions .social-icon:hover {
  border-color: rgba(217, 194, 163, 0.6);
  background: rgba(217, 194, 163, 0.06);
}
.footer-map-btn {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  padding: 0.6rem 0.9rem;
  border: 1px solid rgba(217, 194, 163, 0.2);
  color: rgba(217, 194, 163, 0.72);
  text-decoration: none;
  font-size: 0.59rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  white-space: nowrap;
  min-width: 9rem;
  transition: background 200ms, border-color 200ms, color 200ms;
}
.footer-map-btn:hover {
  background: rgba(217, 194, 163, 0.06);
  border-color: rgba(217, 194, 163, 0.42);
  color: #d9c2a3;
}

/* 5. Map — framed, breathing room, rounded */
.footer-map {
  position: relative;
  min-height: 100%;
}
.footer-map iframe {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  width: 100%;
  height: 70%;
  transform: translateY(-50%);
  border: 0;
  display: block;
  filter: invert(0.92) hue-rotate(180deg) saturate(0.25) brightness(0.78) contrast(0.95);
}
.footer-map::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 70%;
  transform: translateY(-50%);
  background:
    linear-gradient(180deg, rgba(10, 4, 4, 0.3) 0%, transparent 20%, transparent 80%, rgba(10, 4, 4, 0.3) 100%);
  pointer-events: none;
}
.footer-map-pin {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -100%);
  z-index: 2;
  pointer-events: none;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.65));
}

/* Footer quick links */
.footer-quick-links {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  padding: 1.1rem 1rem 0;
  border-top: 1px solid rgba(244, 235, 217, 0.08);
}
.footer-quick-links a {
  color: rgba(244, 235, 217, 0.38);
  text-decoration: none;
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: color 200ms;
}
.footer-quick-links a:hover { color: rgba(244, 235, 217, 0.72); }
.footer-quick-dot {
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: rgba(244, 235, 217, 0.18);
  flex-shrink: 0;
}

/* Footer note */
.footer-note {
  margin: 0;
  padding: 1.5rem 1rem;
  color: rgba(244, 235, 217, 0.3);
  text-align: center;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* в”Ђв”Ђ Booking Modal в”Ђв”Ђ */
/* === GLOBAL: RESERVATION MODAL === */
.modal-overlay {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(8, 2, 2, 0.82);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  display: flex; align-items: center; justify-content: center;
  padding: 1.25rem;
  opacity: 0; pointer-events: none; /* closed state: invisible and non-interactive without display:none */
  transition: opacity 300ms ease;
}
.modal-overlay.is-open {
  opacity: 1; pointer-events: auto;
}
.modal {
  position: relative;
  background: linear-gradient(160deg, #2a0a0e 0%, #160406 55%, #0b0202 100%);
  border: 1px solid rgba(239,226,207,0.15);
  width: 100%; max-width: 580px;
  max-height: 92vh; overflow-y: auto;
  padding: 2.75rem 2.5rem 2.5rem;
  transform: translateY(24px) scale(0.98); /* entrance animation start — slides up and expands on open */
  transition: transform 300ms ease;
}
.modal-overlay.is-open .modal {
  transform: translateY(0) scale(1);
}
.modal-close {
  position: absolute; top: 1.1rem; right: 1.1rem;
  background: transparent;
  border: 1px solid rgba(239,226,207,0.18);
  color: var(--muted); cursor: pointer;
  width: 2.1rem; height: 2.1rem;
  display: grid; place-items: center;
  font-size: 1.15rem; line-height: 1;
  transition: color 180ms, border-color 180ms;
  border-radius: 0;
}
.modal-close:hover { color: var(--text-light); border-color: rgba(239,226,207,0.4); }

.modal-eyebrow {
  font-size: 0.64rem; font-weight: 600;
  letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 0.5rem;
}
.modal-header h2 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 2.64rem; font-weight: 400;
  color: var(--text-light); line-height: 1.0;
  letter-spacing: -0.01em; margin-bottom: 0.4rem;
}
.modal-subtitle {
  color: var(--muted); font-size: 0.88rem; margin-bottom: 2rem;
  border-bottom: 1px solid rgba(239,226,207,0.1);
  padding-bottom: 1.75rem;
}
/* === GLOBAL: FORMS (modal fields) === */
.modal-form { display: flex; flex-direction: column; gap: 1.1rem; }
.form-row { display: grid; gap: 1rem; }
.form-group { display: flex; flex-direction: column; gap: 0.35rem; }
.form-group label {
  font-size: 0.64rem; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted-cream);
}
.form-group input,
.form-group select,
.form-group textarea {
  padding: 0.72rem 0.9rem;
  background: rgba(239,226,207,0.05);
  border: 1px solid rgba(239,226,207,0.16);
  border-radius: 0;
  color: var(--text-light); font-size: 0.95rem;
  font-family: inherit; width: 100%;
  transition: border-color 180ms;
  -webkit-appearance: none; appearance: none; /* strips native browser chrome for consistent cross-browser styling */
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: rgba(239,226,207,0.42);
  background: rgba(239,226,207,0.07);
}
.form-group input::placeholder,
.form-group textarea::placeholder { color: rgba(244,235,217,0.28); }
.form-group textarea { resize: vertical; min-height: 80px; }
.form-group input.field-error,
.form-group select.field-error { border-color: #b83040; }
.form-group select { cursor: pointer; }
.form-group select option { background: #2E0810; color: var(--text-light); }
/* ── Browser autofill — inset box-shadow kills the white/yellow highlight ── */
/* Use the site's base dark colour; inputs have a matching dark bg so the
   solid box-shadow is invisible against the surrounding background */
.modal-content .form-group input,
.modal-content .form-group select {
  background: transparent;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px #080202 inset !important;
  -webkit-text-fill-color: var(--cream, #EFE2CF) !important;
  caret-color: var(--cream, #EFE2CF);
  transition: background-color 9999s ease-in-out 0s;
}

/* ── Date field: text input + Flatpickr calendar icon ── */
.date-field {
  position: relative;
}
.date-field #res-date {
  padding-right: 1.6rem;
  width: 100%;
  box-sizing: border-box;
  cursor: pointer;
}
.cal-icon {
  position: absolute;
  right: 0.05rem;
  bottom: 0.28rem;
  color: rgba(201,169,110,0.4);
  pointer-events: none;
  line-height: 0;
  transition: color 180ms;
}
.date-field:focus-within .cal-icon,
.date-field:hover .cal-icon { color: rgba(201,169,110,0.65); }

/* ── Reservation modal (desktop): Private Events field style — gold boxes, fonts, dark bg ── */
@media (min-width: 768px) {
  #reservation-modal .form-group label {
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--muted-cream, #c9b79a);
  }
  #reservation-modal .form-group input,
  #reservation-modal .form-group select,
  #reservation-modal .form-group textarea {
    background: rgba(239,226,207,0.05);
    border: 1px solid rgba(201,169,110,0.22);
    color: var(--text-light, #EFE2CF);
    font-size: 0.95rem;
    padding: 0.72rem 0.9rem;
  }
  #reservation-modal .form-group input::placeholder,
  #reservation-modal .form-group textarea::placeholder {
    color: rgba(244,235,217,0.28);
  }
  #reservation-modal .form-group input:focus,
  #reservation-modal .form-group select:focus,
  #reservation-modal .form-group textarea:focus {
    outline: none;
    border-color: rgba(201,169,110,0.6);
    background: rgba(90,17,26,0.14);
    box-shadow: 0 0 0 2px rgba(201,169,110,0.10), 0 0 18px rgba(90,17,26,0.32);
  }
  #reservation-modal .form-group select option {
    background: #2E0810;
    color: var(--text-light, #EFE2CF);
  }
  /* date field: keep room for the calendar icon, center it vertically */
  #reservation-modal .date-field #res-date { padding-right: 2rem; }
  #reservation-modal .cal-icon {
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    right: 0.8rem;
  }
}

/* ── Success state — fills the form panel, centred ── */
.modal-success {
  flex: 1; /* fill the modal-content flex column */
}

/* ── Flatpickr — Europa dark theme ── */
.flatpickr-calendar {
  background: #2E0810;
  border: 1px solid rgba(201,169,110,0.18);
  box-shadow: 0 16px 48px rgba(0,0,0,0.72);
  border-radius: 4px;
  font-family: 'Inter', sans-serif;
  z-index: 99999 !important;
}
.flatpickr-calendar.arrowTop::before,
.flatpickr-calendar.arrowTop::after,
.flatpickr-calendar.arrowBottom::before,
.flatpickr-calendar.arrowBottom::after { display: none; }

.flatpickr-months {
  background: transparent;
  padding-top: 0.25rem;
}
.flatpickr-month { background: transparent; }
.flatpickr-current-month {
  color: var(--cream, #EFE2CF);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.1rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  padding-top: 5px;
}
.flatpickr-current-month input.cur-year,
.flatpickr-current-month select.cur-month {
  color: var(--cream, #EFE2CF);
  font-family: 'Cormorant Garamond', Georgia, serif;
}
.flatpickr-current-month .numInputWrapper span.arrowUp::after  { border-bottom-color: rgba(201,169,110,0.55); }
.flatpickr-current-month .numInputWrapper span.arrowDown::after { border-top-color:    rgba(201,169,110,0.55); }

/* Month dropdown native <select> — dark background so cream text is readable */
.flatpickr-monthDropdown-months {
  background: #130407 !important;
  color: var(--cream, #EFE2CF) !important;
}
.flatpickr-monthDropdown-months option,
.flatpickr-monthDropdown-months optgroup {
  background: #130407 !important;
  color: var(--cream, #EFE2CF) !important;
}

.flatpickr-prev-month svg,
.flatpickr-next-month svg { fill: rgba(201,169,110,0.55); }
.flatpickr-prev-month:hover svg,
.flatpickr-next-month:hover svg { fill: #c9a96e; }

.flatpickr-weekdays { background: transparent; }
span.flatpickr-weekday {
  background: transparent;
  color: rgba(201,169,110,0.48);
  font-family: 'Inter', sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.flatpickr-days { border-color: rgba(201,169,110,0.1); }
.dayContainer { background: transparent; }

.flatpickr-day {
  color: rgba(239,226,207,0.72);
  border-radius: 2px;
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
}
.flatpickr-day:hover,
.flatpickr-day:focus {
  background: rgba(201,169,110,0.12);
  border-color: rgba(201,169,110,0.2);
  color: var(--cream, #EFE2CF);
}
.flatpickr-day.selected,
.flatpickr-day.selected:hover {
  background: #7a1d30;
  border-color: #7a1d30;
  color: var(--cream, #EFE2CF);
}
.flatpickr-day.today {
  border-color: rgba(201,169,110,0.38);
  color: #c9a96e;
}
.flatpickr-day.today:hover {
  background: rgba(201,169,110,0.12);
  color: var(--cream, #EFE2CF);
  border-color: rgba(201,169,110,0.38);
}
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay { color: rgba(239,226,207,0.2); }
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover { color: rgba(239,226,207,0.14); cursor: not-allowed; }

.modal-submit {
  width: 100%; margin-top: 0.75rem;
  padding: 1rem 1.5rem;
  font-size: 0.79rem; letter-spacing: 0.16em;
}

.modal-success {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; padding: 2.5rem 1rem;
  gap: 1.1rem;
}
.modal-success[hidden] { display: none; }
/* [hidden] on form/header must beat the display:flex rules above */
.modal-form[hidden]   { display: none !important; }
.modal-header[hidden] { display: none !important; }
.success-check {
  width: 3.5rem; height: 3.5rem;
  border: 1px solid rgba(239,226,207,0.3);
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--muted-cream);
}
.modal-success h3 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 2.2rem; color: var(--text-light); font-weight: 400;
}
.modal-success p { color: var(--muted); font-size: 0.95rem; line-height: 1.65; }

@media (min-width: 500px) {
  .form-row { grid-template-columns: 1fr 1fr; }
}

/* ── Atmospheric panel — hidden on mobile, revealed on desktop ── */
.modal-atmosphere { display: none; }

/* ────────────────────────────────────────────────────────────────
   DESKTOP MODAL REDESIGN  (≥ 768px)
   Two-column cinematic layout:
     Left  — atmospheric image panel with editorial overlay
     Right — form panel (scrollable if content overflows)
──────────────────────────────────────────────────────────────── */
@media (min-width: 768px) {

  /* === RESPONSIVE: RESERVATION MODAL — DESKTOP (>=768px) === */
  /* Outer container: wider for two-column */
  .modal {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    max-width: 960px;
    max-height: 90vh;
    padding: 0;
    overflow: hidden; /* clips the atmosphere panel */
    border: 1px solid rgba(201,169,110,0.12);
  }

  /* Close button floats above both columns */
  .modal-close {
    position: absolute;
    top: 1.1rem;
    right: 1.1rem;
    z-index: 10;
    border-color: rgba(239,226,207,0.22);
    background: rgba(8,2,2,0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }

  /* ── Left: atmospheric image panel ── */
  .modal-atmosphere {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    position: relative;
    overflow: hidden;
    background:
      url('photos/reservation-form/reservation%20form.webp') center 30% / cover no-repeat;
    grid-column: 1;
    grid-row: 1;
  }

  .modal-atm-overlay {
    position: absolute;
    inset: 0;
    background:
      linear-gradient(
        to right,
        rgba(8,2,2,0.08) 0%,
        rgba(8,2,2,0.28) 70%,
        rgba(8,2,2,0.65) 100%
      ),
      linear-gradient(
        to top,
        rgba(8,2,2,0.92) 0%,
        rgba(8,2,2,0.55) 28%,
        rgba(8,2,2,0.18) 55%,
        transparent 78%
      );
    pointer-events: none;
  }

  .modal-atm-content {
    position: relative;
    z-index: 2;
    padding: 2.5rem 2rem;
  }

  .modal-atm-eyebrow {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: rgba(201,169,110,0.65);
    margin-bottom: 0.75rem;
  }

  .modal-atm-tagline {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(1.7rem, 2.8vw, 2.4rem);
    font-weight: 400;
    font-style: italic;
    line-height: 1.15;
    color: var(--cream, #EFE2CF);
    margin: 0;
    letter-spacing: 0.02em;
  }

  /* ── Right: form panel ── */
  .modal-content {
    grid-column: 2;
    grid-row: 1;
    overflow-y: auto;
    padding: 3rem 2.5rem 2.5rem;
    background: linear-gradient(160deg, #2a0a0e 0%, #160406 55%, #0b0202 100%);
    display: flex;
    flex-direction: column;
  }

  /* Tighten header on desktop — panel is narrower */
  .modal-header h2 {
    font-size: 2.1rem;
  }

  .modal-eyebrow {
    display: none; /* branding lives in the atmosphere panel */
  }

  .modal-subtitle {
    font-size: 0.84rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1.25rem;
  }

  /* Form fields — editorial underline style */
  .form-group label {
    font-size: 0.6rem;
    letter-spacing: 0.22em;
    color: rgba(201,169,110,0.6);
  }

  .form-group input,
  .form-group select,
  .form-group textarea {
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(239,226,207,0.18);
    border-radius: 0;
    padding: 0.55rem 0;
    font-size: 0.92rem;
    color: var(--cream, #EFE2CF);
  }

  .form-group input:focus,
  .form-group select:focus,
  .form-group textarea:focus {
    background: transparent;
    border-bottom-color: rgba(201,169,110,0.55);
  }

  .form-group textarea {
    border: 1px solid rgba(239,226,207,0.14);
    padding: 0.6rem 0.75rem;
    resize: none;
  }

  .form-group textarea:focus {
    border-color: rgba(201,169,110,0.42);
  }

  /* CTA button — full-width burgundy */
  .modal-submit {
    margin-top: 1rem;
    padding: 1rem 1.5rem;
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    background: linear-gradient(160deg, #5a1120 0%, #7a1d30 55%, #5a1120 100%);
    border: 1px solid rgba(122,29,48,0.4);
    box-shadow: 0 4px 24px rgba(70,12,24,0.45);
    transition: background 220ms, box-shadow 220ms;
  }

  .modal-submit:hover {
    background: linear-gradient(160deg, #6e1528 0%, #8e2238 55%, #6e1528 100%);
    box-shadow: 0 6px 32px rgba(70,12,24,0.60);
  }

  /* Success state still fills the right panel */
  .modal-success {
    padding: 4rem 1.5rem;
  }

}

/* (About page styles moved to about.css) */


/* в•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђ
   RESPONSIVE
в•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђ */

/* Tablet 768+ */
@media (min-width: 768px) {

  /* Nav — restore horizontal desktop layout */
  /* === RESPONSIVE: DESKTOP (>=768px) — nav row + section upgrades === */
  .site-nav {
    display: flex; position: static;
    width: auto; height: auto;
    background: transparent; border: none; padding: 0;
    gap: 1.4rem; flex-direction: row; flex-wrap: wrap;
    align-items: center; justify-content: center;
    overflow: visible; z-index: auto;
  }
  .nav-toggle { display: none; }
  .nav-overlay-header, .nav-footer { display: none; }
  .nav-links-group { display: contents; }

  /* Desktop nav — active & hover states */
  .site-nav a {
    position: relative;
    transition: color 250ms ease, opacity 250ms ease;
  }
  .site-nav a:hover {
    color: rgba(201, 169, 110, 0.85);
    opacity: 1;
  }
  .site-nav a[aria-current="page"],
  body:not(.page-home) .site-nav a.is-active {
    color: #c9a96e;
    opacity: 1;
    text-decoration: none;
    position: relative;
  }
  .site-nav a[aria-current="page"]::after,
  body:not(.page-home) .site-nav a.is-active::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    right: 0;
    height: 1px;
    background: #c9a96e;
    box-shadow: 0 0 8px rgba(201, 169, 110, 0.35);
  }

  /* ── Editorial left alignment (desktop only) ──────────────────────────────
     Logo and hero text both start at clamp(2rem, 4vw, 4rem) from the left
     viewport edge instead of the centered ~120px auto-margin dead zone.
     Header spans full available width (logo left ↔ nav/phone right).
     Hero text container keeps its 1200px width, anchored to the same left.
  ──────────────────────────────────────────────────────────────────────── */
  .header-inner {
    width: auto;
    max-width: none;
    margin-left: clamp(2rem, 4vw, 4rem);
    margin-right: clamp(1.5rem, 3vw, 3rem);
  }

  /* Hero — keep unified height from desktop rule */
  .hero { min-height: 45vh; }

  /* Dark strip — 4 equal columns, full-bleed */
  .dark-strip-grid { grid-template-columns: repeat(4, 1fr); }
  .dark-strip-item {
    border-bottom: none;
    border-right: none;
    position: relative;
    padding: 2.8rem clamp(1.5rem, 2.5vw, 3.5rem);
  }
  /* вертикальные разделители — стиль как .catr-events-sep (золотой градиент с затуханием) */
  .dark-strip-item:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 1px;
    background: linear-gradient(to bottom,
      transparent,
      rgba(201,169,110,0.22) 15%,
      rgba(201,169,110,0.22) 85%,
      transparent
    );
    pointer-events: none;
  }

  /* Food feature — text left (0.9fr), photo right (1.1fr) */
  .feature-layout { grid-template-columns: 0.92fr 1.08fr; }
  .feature-image { min-height: 58vh; }

  /* Wine feature — photo left (1fr), text right (1fr) */
  .wine-layout { grid-template-columns: 1fr 1fr; }
  .wine-photo { min-height: auto; }

  /* Service cards — 2-col grid on tablet+ */
  .services-grid { grid-template-columns: 1fr 1fr; }

  /* Testimonial desktop rules removed (dead-code cleanup, group "testimonial/quote") */

  /* .newsletter-form removed (dead-code cleanup): no newsletter markup in any HTML/JS — 2026-06-02 */

  /* ── Desktop typography normalization — reference: .hero-inner .hero-text ──
     Target: all major descriptive paragraph text on dark backgrounds.
     Reference: font Inter 400, clamp(0.93rem,1.5vw,1.05rem), line-height 1.74,
     max-width 38ch, color rgba(239,226,207,0.58), margin-bottom 2rem.     */

  /* Wine feature section — dark background */
  .wine-text p {
    font-family: 'Inter', sans-serif;
    font-size: clamp(0.93rem, 1.5vw, 1.05rem);
    font-style: normal;
    font-weight: 400;
    color: rgba(239,226,207,0.58);
    line-height: 1.74;
    max-width: 38ch;
    margin-bottom: 2rem;
  }

  /* Food feature section — cream/light background, keep dark text */
  .feature-text p {
    font-family: 'Inter', sans-serif;
    font-size: clamp(0.93rem, 1.5vw, 1.05rem);
    font-style: normal;
    font-weight: 400;
    line-height: 1.74;
    max-width: 38ch;
    margin-bottom: 2rem;
  }

  /* Service cards — dark overlay background */
  .svc-body {
    font-family: 'Inter', sans-serif;
    font-size: clamp(0.93rem, 1.5vw, 1.05rem);
    font-style: normal;
    font-weight: 400;
    color: rgba(239,226,207,0.58);
    line-height: 1.74;
  }
}

/* Desktop 1024+ */
@media (min-width: 1024px) {
  .site-nav { gap: 1.8rem; }
  .feature-text { padding: 4rem 3.5rem; }
  .wine-text { padding: 4rem 3.5rem; }
  .svc-hero { min-height: 580px; }
}

/* в•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђ
   MOBILE  (max-width: 767px)
в•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђ */
@media (max-width: 767px) {

  /* ── Header — transparent scrim, fades in on scroll (all pages) ── */
  /* === MOBILE: HEADER, NAV & GLOBAL (<=767px) === */
  .site-header {
    background: linear-gradient(
      to bottom,
      rgba(10, 4, 4, 0.82) 0%,
      rgba(10, 4, 4, 0.42) 60%,
      transparent           100%
    );
    transition: background 350ms ease;
  }
  /* Solid on scroll — .scrolled class added by script.js */
  .site-header.scrolled {
    background: rgba(14, 4, 5, 0.96);
  }
  .header-inner {
    padding: 1.15rem clamp(1rem, 4vw, 1.5rem) 1.25rem;
    position: relative;
    justify-content: space-between;
  }
  .brand {
    position: static;
    transform: none;
    align-items: flex-start;
    text-align: left;
  }
  /* Логотип на мобильной увеличен на 15% (01.09.2026): и в шапке, и в
     выпадающем меню — оба используют эти же классы. Трекинг в em, поэтому
     масштабируется сам. */
  .brand-name {
    font-size: clamp(1.15rem, 4.83vw, 1.55rem);
    letter-spacing: clamp(0.14em, 0.7vw, 0.20em);
  }
  .brand-subtitle {
    font-size: clamp(0.63rem, 2.76vw, 0.9rem);
    letter-spacing: clamp(0.14em, 0.6vw, 0.22em);
  }
  .nav-toggle { margin-left: auto; }
  .header-phone { display: none; }

  /* ── Hero overlay — cinematic vertical gradient on mobile ── */
  .hero-overlay {
    background:
      linear-gradient(
        to right,
        rgba(10,4,4,0.92) 0%,
        rgba(10,4,4,0.70) 38%,
        rgba(10,4,4,0.35) 60%,
        rgba(10,4,4,0) 100%
      ),
      linear-gradient(to bottom,
        rgba(14,4,4,0.30) 0%,
        rgba(14,4,4,0.48) 28%,
        rgba(14,4,4,0.74) 62%,
        rgba(14,4,4,0.93) 100%
      );
  }

  /* Overlay nav links */
  .nav-links-group {
    margin-top: clamp(1.5rem, 4vw, 45rem);
  }
  .nav-links-group a {
    font-size: clamp(0.9rem, 4.3vw, 1.2rem);
    letter-spacing: 0.12em;
    padding: 1rem 0rem;
    text-align: center;
    width: 100%;
    opacity: 0.9;
  }
  .nav-reserve-btn,
  .nav-phone-link {
    letter-spacing: 0.12em;
  }


  /* ── Gift Cards Banner — compact editorial banner ── */
  .gift-banner {
    padding: 1.5rem 0;
    overflow: hidden;
  }
  .gift-banner-inner {
    display: grid;
    grid-template-columns: 1fr 44%;
    grid-template-rows: auto auto;
    grid-template-areas:
      "content image"
      "cta     image";
    column-gap: 0;
    row-gap: 0;
    padding-right: 0;
    text-align: left;
    align-items: start;
  }
  .gift-banner-content {
    grid-area: content;
    text-align: left;
    align-items: flex-start;
    gap: 0.22rem;
    padding-bottom: 0.65rem;
    padding-right: 0.75rem;
  }
  .gift-cta {
    grid-area: cta;
    justify-content: flex-start;
  }
  .gift-cards-mockup {
    grid-area: image;
    min-height: 0;
    min-width: 0;
    width: auto;
    align-self: center;
  }
  .gift-card-img { width: 130px; }
  .gift-card-img.card-back  { transform: rotate(-5deg) translate(-28px, 10px); }
  .gift-card-img.card-front { transform: rotate(2deg) translate(16px, -6px); }
  .gift-icon svg { width: 20px; height: 20px; }
  .gift-eyebrow { font-size: 0.57rem; letter-spacing: 0.22em; margin-bottom: 0.05rem; }
  .gift-heading { font-size: clamp(1.55rem, 5.8vw, 1.9rem); letter-spacing: 0.1em; }
  .gift-text {
    font-size: 0.74rem;
    line-height: 1.52;
    max-width: 24ch;
    margin: 0.1rem 0 0;
  }
  .gift-learn-more { padding: 0.6rem 1.3rem; font-size: 0.65rem; letter-spacing: 0.16em; }

  /* в”Ђв”Ђ Hero в”Ђв”Ђ */
  .hero {
    min-height: 82svh;
    background-image: url('photos/main-page/hero-mobile.webp') !important;
    background-position: center 70%;
  }
  .hero-content {
    padding-top: clamp(9rem, 20vh, 13rem);
    padding-left: 1.5rem;
    padding-right: 7rem;
    padding-bottom: 5.5rem;
  }
  .hero-copy { max-width: 90vw; }
  .hero h1 {
    font-size: clamp(2rem, 8vw, 2.8rem);
    line-height: 1;
    letter-spacing: -0.02em;
    margin-bottom: 7vw;
  }
  .hero-text {
    font-size: 1.12rem;
    line-height: 1.72;
    max-width: 18rem;
    margin-bottom: 7vw;
  }
  .hero-actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 4vw;
    margin-bottom: 0;
  }
  .hero-actions .button {
    min-width: unset;
    width: clamp(13rem, 68vw, 20rem);
    padding: 1rem 1.4rem;
  }
  .hero-secondary-links { display: none; }

  /* Dark strip — mobile redesign handled below in MOBILE REDESIGN block */

  /* ── Quote strip — wrap on mobile ── */
  .quote-strip { padding: 2rem 0; }
  .quote-strip-text {
    font-size: clamp(1.15rem, 5vw, 1.42rem);
    line-height: 1.45;
    max-width: none;
  }
  .quote-strip-credit { margin-top: 0.85rem; }

  /* в”Ђв”Ђ Food feature в”Ђв”Ђ */
  .feature-text {
    order: 2;
    padding: 2.25rem 1.75rem;
  }
  .feature-media { order: 1; }
  .feature-image { min-height: 54vw; }
  .feature-text h2 { font-size: clamp(2rem, 8.5vw, 2.6rem); margin-bottom: 1.1rem; }
  .feature-text p { font-size: 0.95rem; margin-bottom: 1.5rem; }
  .feature-illustration { width: 72px; top: 1rem; right: 1rem; }

  /* в”Ђв”Ђ Wine feature в”Ђв”Ђ */
  .wine-feature .wine-layout { min-height: auto; }
  .wine-photo { min-height: 54vw; }
  .wine-text { padding: 2.25rem 1.75rem; }
  .wine-text h2 { font-size: clamp(2rem, 8vw, 2.5rem); margin-bottom: 1.1rem; }
  .wine-text p { font-size: 0.95rem; margin-bottom: 1.5rem; }

  /* в”Ђв”Ђ Service cards в”Ђв”Ђ */
  .services-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .svc-hero {
    grid-column: 1;
    grid-row: auto;
    min-height: 380px;
    padding: 2rem 1.75rem;
  }
  .svc-hero .svc-heading { font-size: clamp(2rem, 8vw, 2.6rem); }
  .svc-catering,
  .svc-mornings { min-height: 260px; }
  .svc-inner { padding: 1.75rem; }
  .svc-heading { font-size: clamp(1.5rem, 6vw, 1.85rem); }
  .svc-body { font-size: 0.82rem; margin-bottom: 1.1rem; }

  /* Testimonial mobile rules removed (dead-code cleanup; styles.css @media block, NOT mobile.css) */

  /* ── Premium mobile footer — info-card + mini-map ── */
  .site-footer {
    padding: 0;
    background:
      radial-gradient(ellipse 100% 60% at 50% 0%, rgba(90, 17, 26, 0.35) 0%, transparent 60%),
      linear-gradient(180deg, #18070a 0%, #0a0303 100%);
  }
  .footer-grid {
    /* Stack: 3-col info row в†’ map full-width */
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "info"
      "map";
    gap: 0.9rem;
    padding: 1.5rem 1.25rem 1.2rem;
    background: transparent;
    min-height: 0;
    align-items: stretch;
  }
  .footer-brand-panel { display: none; }

  /* Info card — unified 2-col panel: VISIT (with phone) | HOURS */
  .footer-info-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "visit hours";
    column-gap: 0;
    row-gap: 0;
    align-items: stretch;
    grid-area: info;
    height: auto;
    background:
      radial-gradient(ellipse 120% 100% at 50% 0%, rgba(140, 26, 42, 0.30) 0%, transparent 60%),
      linear-gradient(165deg, rgba(90, 17, 26, 0.42) 0%, rgba(26, 8, 12, 0.95) 60%, rgba(14, 4, 6, 1) 100%);
    border: 1px solid rgba(239, 226, 207, 0.16);
    border-radius: 18px;
    overflow: hidden;
    box-shadow:
      0 14px 32px rgba(0, 0, 0, 0.50),
      inset 0 1px 0 rgba(239, 226, 207, 0.08);
    position: relative;
  }
  .footer-info-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(217, 194, 163, 0.28), transparent);
    pointer-events: none;
  }
  /* Each cell — compact centered stack */
  .footer-info-card .footer-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    grid-template-columns: none;
    column-gap: 0;
    padding: 1rem 0.7rem 1.05rem;
    border: none;
    position: relative;
    margin: 0;
    min-width: 0;
  }
  /* Grid placement + internal divider */
  .footer-info-card > .footer-col:nth-child(1) {
    grid-area: visit;
    border-right: 1px solid rgba(239, 226, 207, 0.12);
  }
  .footer-info-card > .footer-col:nth-child(2) {
    grid-area: hours;
  }

  /* Compact icon circle */
  .footer-info-card .footer-row-icon {
    display: grid;
    place-items: center;
    width: 1.7rem;
    height: 1.7rem;
    margin-bottom: 0.45rem;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, rgba(217, 194, 163, 0.18) 0%, rgba(90, 17, 26, 0.25) 100%);
    border: 1px solid rgba(217, 194, 163, 0.18);
    color: var(--beige);
    flex-shrink: 0;
  }
  .footer-info-card .footer-row-icon svg { width: 12px; height: 12px; }
  .footer-info-card .footer-row-arrow { display: none; }

  /* Row icon — glowing burgundy circle */
  .footer-row-icon {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background:
      radial-gradient(circle at 35% 30%, rgba(217, 194, 163, 0.18) 0%, rgba(90, 17, 26, 0.25) 100%);
    border: 1px solid rgba(217, 194, 163, 0.16);
    color: var(--beige);
    box-shadow: inset 0 1px 0 rgba(239, 226, 207, 0.10);
    flex-shrink: 0;
  }
  .footer-row-icon svg { width: 14px; height: 14px; }

  .footer-row-body { min-width: 0; width: 100%; }
  .footer-info-card .footer-row-body h3 {
    font-size: 0.6rem;
    letter-spacing: 0.22em;
    margin-bottom: 0.35rem;
    color: var(--muted-cream);
    text-shadow: 0 0 16px rgba(217, 194, 163, 0.12);
    text-align: center;
  }
  .footer-info-card .footer-row-body p {
    font-size: 0.66rem;
    line-height: 1.4;
    color: rgba(244, 235, 217, 0.85);
    margin: 0.5;
    text-align: center;
  }
  .footer-info-card .footer-row-body p + p { margin-top: 0.1rem; }
  /* Phone shown under the address, separated by a hairline divider */
  .footer-info-card .footer-phone-inline {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(239, 226, 207, 0.12);
    font-size: 0.78rem;
    line-height: 1;
    color: var(--cream);
    letter-spacing: 0.01em;
    white-space: nowrap;
  }
  .footer-info-card .footer-phone-inline a {
    color: var(--cream);
    text-decoration: none;
    font-weight: 500;
  }
  .footer-phone-icon {
    display: inline-flex;
    align-items: center;
    color: var(--beige);
  }
  .footer-phone-icon svg { width: 13px; height: 13px; }

  /* Hours table — day + time as a compact pair centered in the column */
  .footer-info-card .footer-hours { padding: 0.85rem 0.575rem 0.9rem; }
  .footer-info-card .footer-hours ul {
    gap: 0.22rem;
    width: 100%;
    max-width: 100%;
    margin: 0;
  }
  .footer-info-card .footer-hours li {
    display: flex;
    align-items: baseline;
    font-size: 0.65rem;
    line-height: 1.3;
  }
  /* Dotted leaders — same pattern as desktop */
  .footer-info-card .footer-hours li::before {
    display: block;
    border-bottom-width: 1px;
  }
  .footer-info-card .footer-hours li span:first-child {
    font-size: 0.65rem;
    letter-spacing: 0.02em;
    color: var(--cream);
    font-weight: 500;
    white-space: nowrap;
    text-align: left;
  }
  .footer-info-card .footer-hours li span:last-child {
    white-space: nowrap;
    text-align: left;
    color: rgba(217, 194, 163, 0.78);
    font-size: 0.65rem;
  }

  /* Stand-alone Call cell removed — phone now lives under Visit address */

  /* Row chevron */
  .footer-row-arrow {
    display: grid;
    place-items: center;
    color: rgba(217, 194, 163, 0.42);
    width: 1.1rem;
    height: 1.1rem;
    flex-shrink: 0;
  }
  .footer-row-arrow svg { width: 12px; height: 12px; }

  /* Map — dark cinematic mini card */
  .footer-map {
    grid-area: map;
    height: auto;
    min-height: 200px;
    border: 1px solid rgba(239, 226, 207, 0.16);
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    background: var(--deep-wine);
    box-shadow:
      0 18px 40px rgba(0, 0, 0, 0.55),
      inset 0 1px 0 rgba(239, 226, 207, 0.06);
  }
  .footer-map iframe {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100%;
    height: 100%;
    transform: none;
    filter: invert(0.93) hue-rotate(180deg) saturate(0.25) brightness(0.55) contrast(1.02);
  }
  .footer-map::after {
    content: '';
    position: absolute;
    inset: 0;
    top: 0;
    height: 100%;
    transform: none;
    background:
      radial-gradient(ellipse at center, transparent 30%, rgba(10, 4, 4, 0.55) 100%),
      linear-gradient(180deg, rgba(10, 4, 4, 0.20) 0%, rgba(10, 4, 4, 0.40) 100%);
    pointer-events: none;
  }
  .footer-map-pin {
    top: 50%;
    filter:
      drop-shadow(0 0 22px rgba(220, 40, 60, 0.85))
      drop-shadow(0 0 8px rgba(220, 40, 60, 0.55))
      drop-shadow(0 4px 8px rgba(0, 0, 0, 0.65));
  }
  .footer-map-pin svg path:first-child { fill: #c93040; }
  .footer-map-pin svg circle { fill: #1a0608; }

  /* "Open in Maps" overlay button on the map card */
  .footer-map-cta {
    position: absolute;
    top: 0.7rem;
    left: 0.7rem;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 0.85rem;
    background: linear-gradient(180deg, rgba(90, 17, 26, 0.85) 0%, rgba(46, 8, 16, 0.92) 100%);
    border: 1px solid rgba(217, 194, 163, 0.22);
    border-radius: 8px;
    color: var(--cream);
    text-decoration: none;
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    box-shadow:
      0 6px 16px rgba(0, 0, 0, 0.45),
      inset 0 1px 0 rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(8px) saturate(140%);
    -webkit-backdrop-filter: blur(8px) saturate(140%);
    transition: background 200ms, border-color 200ms;
  }
  .footer-map-cta:active {
    background: linear-gradient(180deg, rgba(110, 22, 32, 0.95) 0%, rgba(60, 12, 22, 0.98) 100%);
    border-color: rgba(217, 194, 163, 0.4);
  }
  .footer-map-cta svg { flex-shrink: 0; }

  /* Hide social/actions area on mobile (info-card already covers contact) */
  .footer-actions { display: none; }

  /* Premium copyright strip — transparent, single line, hairline divider above */
  .footer-note {
    position: relative;
    margin: 0.85rem 0 0;
    padding: 1.25rem 0.4rem 1.4rem;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: clamp(0.42rem, 2vw, 0.58rem);
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    color: rgba(217, 194, 163, 0.42);
    background: transparent;
    text-shadow: 0 0 14px rgba(217, 194, 163, 0.12);
    grid-area: unset;
  }
  /* Hairline glow divider on top */
  .footer-note::before {
    content: '';
    position: absolute;
    top: 0;
    left: 12%;
    right: 12%;
    height: 1px;
    background: linear-gradient(
      to right,
      transparent 0%,
      rgba(217, 194, 163, 0.18) 25%,
      rgba(217, 194, 163, 0.32) 50%,
      rgba(217, 194, 163, 0.18) 75%,
      transparent 100%
    );
    box-shadow: 0 0 8px rgba(217, 194, 163, 0.08);
    pointer-events: none;
  }

} /* end mobile block */

/* ════════════════════════════════════════════════════════
   MOBILE RESERVATION MODAL — luxury cinematic fullscreen
   Scoped to @media (max-width: 767px)
════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* ── Overlay: atmospheric canvas with background photo ──
     Image pushed right so it doesn't sit behind the form text.
     Triple-layer gradient: heavy dark left veil, vertical fade top/bottom. */
  /* === MOBILE: RESERVATION MODAL (<=767px) === */
  .modal-overlay {
    padding: 0;
    align-items: stretch;
    justify-content: stretch;
    background:
      /* Left-side darkness so form text stays readable */
      linear-gradient(
        to right,
        rgba(5,1,1,0.97) 0%,
        rgba(5,1,1,0.88) 45%,
        rgba(5,1,1,0.60) 70%,
        rgba(5,1,1,0.30) 100%
      ),
      /* Top fade for header readability */
      linear-gradient(
        to bottom,
        rgba(5,1,1,0.85) 0%,
        rgba(5,1,1,0.22) 22%,
        transparent 50%,
        rgba(5,1,1,0.70) 82%,
        rgba(5,1,1,0.97) 100%
      ),
      /* Photo anchored top-right — wine glasses visible on right edge */
      url('photos/reservation-form/reservation%20form.webp') 82% 20% / cover no-repeat;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  /* ── Modal shell — fullscreen, slide-up entrance ── */
  .modal {
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transform: translateY(52px);
    transition: transform 440ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  .modal-overlay.is-open .modal {
    transform: translateY(0);
  }

  /* ── Close button — top-right, safe-area aware ── */
  .modal-close {
    top: max(env(safe-area-inset-top, 0px) + 0.7rem, 1.3rem);
    right: 1.4rem;
    background: rgba(5,1,1,0.35);
    border-color: rgba(201,169,110,0.30);
    color: rgba(201,169,110,0.80);
    width: 2rem;
    height: 2rem;
    font-size: 0.95rem;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 0;
    z-index: 10;
  }

  /* ── Scrollable form area — fills space above sticky button ── */
  .modal-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    /* Reserve bottom padding so last field isn't hidden behind sticky CTA */
    padding:
      max(env(safe-area-inset-top, 0px) + 0.5rem, 3.8rem)
      1.75rem
      1.5rem;
    display: flex;
    flex-direction: column;
  }

  /* ── Eyebrow "EUROPA" ── */
  .modal-eyebrow {
    display: block;
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: rgba(201,169,110,0.60);
    margin-bottom: 0.65rem;
  }

  /* ── Header ── */
  .modal-header {
    margin-bottom: 0.55rem;
  }

  .modal-header h2 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(2.4rem, 10.5vw, 3rem);
    font-weight: 400;
    line-height: 1.0;
    letter-spacing: -0.01em;
    color: var(--cream, #EFE2CF);
    margin-bottom: 0.3rem;
  }

  /* Gold rule beneath the heading — editorial accent */
  .modal-subtitle {
    position: relative;
    font-size: 0.82rem;
    color: rgba(239,226,207,0.40);
    line-height: 1.6;
    margin-bottom: 0;
    padding-bottom: 1.1rem;
    border-bottom: none;
  }
  /* Thin gold line under subtitle */
  .modal-subtitle::after {
    content: '';
    display: block;
    width: 2.8rem;
    height: 1px;
    background: linear-gradient(to right, rgba(201,169,110,0.75), rgba(201,169,110,0.12));
    margin-top: 0.9rem;
  }

  /* ── Form — single-column, editorial rhythm ── */
  .modal-form {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 1.1rem;
    flex: 1;
  }

  /* All rows become single-column stacks — no side-by-side pairs */
  .form-row {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 0;
  }

  /* Uniform spacing for every field */
  .form-row .form-group,
  .modal-form > .form-group {
    margin-bottom: 1rem;
  }

  /* ── Labels — uppercase warm gold ── */
  .form-group label {
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(201,169,110,0.68);
    margin-bottom: 0.25rem;
    display: block;
  }

  /* ── Inputs — underline only, no boxes ── */
  .form-group input,
  .form-group select,
  .form-group textarea {
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(239,226,207,0.20);
    border-radius: 0;
    padding: 0.48rem 0;
    font-size: 0.93rem;
    font-family: inherit;
    color: var(--cream, #EFE2CF);
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color 200ms ease, box-shadow 200ms ease;
  }

  .form-group input:focus,
  .form-group select:focus,
  .form-group textarea:focus {
    outline: none;
    background: transparent;
    border-bottom-color: rgba(201,169,110,0.65);
    box-shadow: 0 1px 0 rgba(201,169,110,0.22);
  }

  .form-group input::placeholder,
  .form-group textarea::placeholder {
    color: rgba(239,226,207,0.22);
  }

  .form-group select option {
    background: #180305;
    color: var(--cream, #EFE2CF);
  }

  .form-group input[type="date"] {
    color-scheme: dark;
  }

  /* ── Comments — single underline, compact ── */
  .form-group textarea {
    border: none;
    border-bottom: 1px solid rgba(239,226,207,0.20);
    padding: 0.48rem 0;
    resize: none;
    min-height: 0;
    height: 2.2rem;
    overflow: hidden;
    line-height: 1.5;
  }

  .form-group textarea:focus {
    border-bottom-color: rgba(201,169,110,0.65);
    box-shadow: 0 1px 0 rgba(201,169,110,0.22);
  }

  /* ── CTA — sticky at the bottom of the scroll container ──
     Dark shadow above it so scrolled content disappears cleanly behind it. */
  .modal-submit {
    position: sticky;
    bottom: max(env(safe-area-inset-bottom, 0px), 0px);
    width: 100%;
    padding: 1.05rem 1.5rem;
    margin-top: 1.2rem;
    font-size: 0.66rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    background: linear-gradient(160deg, #5c1122 0%, #7e2035 55%, #5c1122 100%);
    border: 1px solid rgba(140,35,58,0.40);
    border-radius: 10px;
    color: var(--cream, #EFE2CF);
    /* Shadow lifts it off the form; top shadow masks scrolling content */
    box-shadow:
      0 -16px 32px rgba(5,1,1,0.85),
      0 4px 24px rgba(70,12,24,0.52),
      inset 0 1px 0 rgba(255,255,255,0.06);
    transition: background 220ms ease, box-shadow 220ms ease;
    cursor: pointer;
    z-index: 5;
  }

  .modal-submit:active {
    background: linear-gradient(160deg, #701827 0%, #96263f 55%, #701827 100%);
    box-shadow:
      0 -16px 32px rgba(5,1,1,0.85),
      0 6px 28px rgba(70,12,24,0.65);
  }

  /* ── Success state ── */
  .modal-success {
    padding: 3rem 1.75rem;
  }

}

/* Unified 2Г—2 info-card is the default for all mobile widths */

/* ── Extra-small phones (≤ 380px) ── */
@media (max-width: 380px) {
  /* те же +15% для узких экранов */
  .brand-name {
    font-size: clamp(1.09rem, 4.83vw, 1.32rem);
    letter-spacing: 0.16em;
    white-space: nowrap;
  }
  .brand-subtitle {
    font-size: clamp(0.63rem, 2.76vw, 0.8rem);
    letter-spacing: 0.16em;
    white-space: nowrap;
  }
  .nav-toggle {
    width: 2.4rem;
    height: 2.4rem;
  }
  .hamburger {
    width: 1.25rem;
  }
  .hero h1 { font-size: clamp(1.8rem, 8vw, 2.3rem); }
}

/* в•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђ
   MOBILE-ONLY ELEMENTS (default hidden on desktop)
в•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђ */
.dark-strip-header,
.dark-strip-cta,
.wine-carousel-wrap { display: none; }

/* ════════════════════════════════════════════
   DESKTOP FOOTER  (≥ 768px) — Cinematic luxury
════════════════════════════════════════════ */
@media (min-width: 768px) {

  /* ── Mobile-only elements: hide ── */
  /* === RESPONSIVE: FOOTER — DESKTOP (>=768px) === */
  .footer-info-card { display: contents; }
  .footer-row-icon,
  .footer-row-arrow { display: none; }
  .footer-grid .footer-col-call { display: none; }
  .footer-phone-icon { display: none; }
  .footer-map-cta { display: none; }

  /* ── Background: layered warm depth ── */
  .site-footer {
    padding: 0 clamp(2rem, 5vw, 5.5rem);
    background:
      /* центр — насыщенный бордо */
      radial-gradient(ellipse 75% 85% at 50% 72%, rgba(108,20,32,0.34) 0%, rgba(90,17,26,0.12) 45%, transparent 72%),
      /* края слева/справа темнее, центр прозрачный */
      linear-gradient(to right, rgba(6,2,3,0.62) 0%, rgba(6,2,3,0.10) 30%, transparent 50%, rgba(6,2,3,0.10) 70%, rgba(6,2,3,0.62) 100%),
      /* верх чёрный → низ глубокий бордо */
      linear-gradient(to bottom, #070303 0%, #120508 40%, #220810 78%, #2c0b14 100%);
  }

  /* ── Grid: tight editorial proportions ── */
  .footer-grid {
    display: grid;
    grid-template-columns: 0.80fr 1fr 1.05fr 0.65fr 1.45fr;
    column-gap: 0;
    min-height: 340px;
    background: none;
    align-items: stretch;
    padding: clamp(1.75rem, 3vh, 2.75rem) 0;
  }

  /* ── Brand panel ── */
  .footer-brand-panel {
    background-size: auto 62%;
    background-position: center center;
    -webkit-mask-image: radial-gradient(ellipse 62% 48% at center 50%, #000 45%, rgba(0,0,0,0.5) 74%, transparent 100%);
    mask-image: radial-gradient(ellipse 62% 48% at center 50%, #000 45%, rgba(0,0,0,0.5) 74%, transparent 100%);
    align-self: stretch;
  }

  .footer-brand {
    gap: 1rem;
    padding: 2rem 1.5rem;
  }

  .footer-brand-name {
    font-size: clamp(1.4rem, 1.8vw, 1.95rem);
    letter-spacing: 0.18em;
    color: var(--cream, #EFE2CF);
    font-weight: 500;
  }

  .footer-brand-divider {
    width: 2.75rem;
    height: 1px;
    background: linear-gradient(to right, rgba(201,169,110,0.55), rgba(201,169,110,0.12));
  }

  .footer-brand-subtitle {
    font-size: 0.54rem;
    letter-spacing: 0.38em;
    color: rgba(201,169,110,0.50);
  }

  /* ── Info columns: Visit Us + Hours ── */
  .footer-grid .footer-col {
    padding: 2.5rem 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    border-left: 1px solid rgba(201,169,110,0.07);
  }

  .footer-grid .footer-col:nth-of-type(2) {
    padding: 2.5rem 1.5rem;
  }

  .footer-grid h3 {
    font-size: 0.56rem;
    font-weight: 700;
    letter-spacing: 0.42em;
    color: rgba(201,169,110,0.55);
    margin-bottom: 1.4rem;
    text-transform: uppercase;
  }

  .footer-grid p {
    color: rgba(239,226,207,0.50);
    font-size: 0.86rem;
    line-height: 1.80;
  }

  /* ── Hours: refined ── */
  .footer-grid .footer-hours {
    padding-left: 0;
    margin-left: 0;
  }

  /* центрируем таблицу часов в колонке; точечный лидер (flex:1) сохраняется */
  .footer-grid .footer-hours ul {
    width: min(100%, 14rem);
    margin-inline: auto;
  }

  .footer-hours ul { gap: 0.58rem; }

  .footer-hours li {
    font-size: 0.84rem;
    line-height: 1.5;
  }

  .footer-hours li span:first-child {
    color: rgba(239,226,207,0.76);
    font-weight: 500;
    font-size: 0.84rem;
    letter-spacing: 0.02em;
  }

  .footer-hours li span:last-child {
    color: rgba(201,169,110,0.60);
    font-size: 0.84rem;
  }

  /* ── Actions: social icons + map button ── */
  .footer-actions {
    padding: 2.5rem 1.75rem 2.5rem 2rem;
    gap: 1.75rem;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-left: 1px solid rgba(201,169,110,0.07);
  }

  /* Remove old pseudo-divider; border-left handles separation */
  .footer-actions::before { display: none; }

  /* Social icons: gold ring + hover glow */
  .footer-actions .social-icons { gap: 0.55rem; }

  .footer-actions .social-icon {
    width: 2.15rem;
    height: 2.15rem;
    border: 1px solid rgba(201,169,110,0.22);
    color: rgba(201,169,110,0.50);
    transition: border-color 220ms ease, background 220ms ease,
                color 220ms ease, box-shadow 220ms ease;
  }

  .footer-actions .social-icon svg { width: 14px; height: 14px; }

  .footer-actions .social-icon:hover {
    border-color: rgba(201,169,110,0.62);
    background: rgba(201,169,110,0.07);
    color: rgba(201,169,110,0.92);
    box-shadow: 0 0 14px rgba(201,169,110,0.12);
  }

  /* “View on Map” — cinematic ghost CTA */
  .footer-map-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.56rem 1rem;
    border: 1px solid rgba(201,169,110,0.18);
    background: transparent;
    color: rgba(201,169,110,0.60);
    font-size: 0.56rem;
    font-weight: 600;
    letter-spacing: 0.30em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 4px;
    transition: background 220ms ease, border-color 220ms ease, color 220ms ease;
  }

  .footer-map-btn:hover {
    background: rgba(201,169,110,0.05);
    border-color: rgba(201,169,110,0.44);
    color: rgba(201,169,110,0.92);
  }

  .footer-map-btn span:last-child {
    opacity: 0.65;
    transition: transform 220ms ease, opacity 220ms ease;
  }

  .footer-map-btn:hover span:last-child {
    transform: translateX(3px);
    opacity: 1;
  }

  /* ── Map card: luxury embedded frame ── */
  .footer-brand-panel,
  .footer-map { align-self: stretch; }

  .footer-map {
    margin: 2rem 0 2rem 0;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(201,169,110,0.15);
    box-shadow:
      0 0 0 1px rgba(0,0,0,0.45),
      0 12px 48px rgba(0,0,0,0.52),
      inset 0 1px 0 rgba(201,169,110,0.08);
    min-height: 0;
  }

  .footer-map iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: none;
    filter: invert(0.92) hue-rotate(180deg) saturate(0.22) brightness(0.70) contrast(1.02);
  }

  .footer-map::after {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    transform: none;
    background:
      linear-gradient(180deg,
        rgba(18,5,5,0.50) 0%,
        transparent 22%,
        transparent 70%,
        rgba(8,3,3,0.62) 100%),
      linear-gradient(to right,
        rgba(18,5,5,0.22) 0%,
        transparent 18%,
        transparent 82%,
        rgba(18,5,5,0.22) 100%);
    border-radius: 14px;
    pointer-events: none;
  }

  .footer-map-pin {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -100%);
  }

  /* ── Quick links: refined bottom bar ── */
  .footer-quick-links {
    padding: 1.2rem 0 0;
    border-top: 1px solid rgba(201,169,110,0.07);
    gap: 0.45rem 1rem;
  }

  .footer-quick-links a {
    font-size: 0.59rem;
    letter-spacing: 0.22em;
    color: rgba(239,226,207,0.28);
    font-weight: 500;
    transition: color 200ms ease;
  }

  .footer-quick-links a:hover { color: rgba(239,226,207,0.70); }

  .footer-quick-dot {
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: rgba(201,169,110,0.18);
  }

  /* ── Copyright: restrained and calm ── */
  .footer-note {
    padding: 1.1rem 0 2rem;
    color: rgba(239,226,207,0.18);
    font-size: 0.59rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    text-align: center;
  }
}

/* в•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђ
   MOBILE REDESIGN  (≤ 767px)
   Premium iPhone-optimized layout
в•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђ */
@media (max-width: 767px) {

  /* ════ 1. DARK STRIP — premium 2×2 cards ════ */
  /* === MOBILE: HOME SECTIONS (<=767px) === */
  /* -----------------------------------------------------------
     NAV-INDEX (greppable anchors below use prefix "MOBILE: HOME -"):
       1. DARK STRIP    2. FOOD FEATURE    3. WINE FEATURE
       3b. WINE CAROUSEL / BOTTLE CARDS     4. SERVICES (svc cards)
       5. GIFT BANNER   |   HDR/CINEMATIC OVERRIDES (re-skin of all above)
     Phase A (from here) = layout per section.
     Phase B (HDR/CINEMATIC) further down = glow/gradient re-skin of same blocks.
  ----------------------------------------------------------- */
  /* === MOBILE: HOME - 1. DARK STRIP === */
  .dark-strip {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--wine);
    border: none;
    padding: 2.25rem 1.25rem 2.5rem;
  }
  .dark-strip-header {
    display: block;
    text-align: center;
    margin: 0 auto 2.5rem;
    max-width: 30rem;
  }
  .dark-strip-eyebrow {
    display: block;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 0.9rem;
  }
  .dark-strip-header h2 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(1.95rem, 8vw, 2.45rem);
    font-weight: 400;
    line-height: 1.08;
    letter-spacing: -0.015em;
    color: var(--text-light);
  }
  .dark-strip-grid {
    grid-template-columns: 1fr 1fr;
    gap: 0.85rem;
    max-width: 28rem;
    margin: 0 auto;
  }
  .dark-strip-item {
    border: 1px solid rgba(239, 226, 207, 0.08);
    border-radius: 18px;
    background: linear-gradient(160deg, rgba(90, 17, 26, 0.45) 0%, rgba(34, 8, 12, 0.92) 100%);
    padding: 1.4rem 1.15rem 1.35rem;
    align-items: flex-start;
    text-align: left;
    gap: 0.6rem;
    box-shadow: inset 0 1px 0 rgba(239, 226, 207, 0.04);
  }
  .dark-strip-item .strip-icon {
    width: 1.9rem;
    height: 1.9rem;
    margin-bottom: 0.4rem;
    color: var(--beige);
    align-self: flex-start;
  }
  .dark-strip-item .strip-icon svg { width: 20px; height: 20px; }
  .dark-strip-item h3 {
    font-size: 0.64rem;
    line-height: 1.3;
    letter-spacing: 0.2em;
    color: var(--cream);
    max-width: none;
  }
  .dark-strip-item p {
    font-size: 0.72rem;
    line-height: 1.5;
    color: rgba(176, 152, 128, 0.82);
    max-width: none;
  }
  .dark-strip-cta {
    display: none;
  }
  .dark-strip-cta .button {
    width: 100%;
    min-height: 56px;
    padding: 1rem 1.5rem;
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    border-radius: 10px;
  }

  /* ════ 2. FOOD FEATURE — overlapping cream card ════ */
  /* === MOBILE: HOME - 2. FOOD FEATURE === */
  .feature-section {
    padding: 0 0 5rem;
    background: var(--deep-wine);
  }
  .feature-layout {
    grid-template-columns: 1fr;
    min-height: auto;
    gap: 0;
  }
  .feature-media { order: 1; }
  .feature-image {
    min-height: 0;
    width: 100%;
    aspect-ratio: 16 / 11;
  }
  .feature-text {
    order: 2;
    margin: -3.5rem 1.25rem 0;
    padding: 2.75rem 1.75rem 3rem;
    background: var(--cream);
    border-radius: 22px;
    box-shadow:
      0 24px 60px rgba(0, 0, 0, 0.55),
      0 0 0 1px rgba(0, 0, 0, 0.04);
    position: relative;
    z-index: 2;
  }
  .feature-text .section-label { margin-bottom: 0.85rem; }
  .feature-text h2 {
    font-size: clamp(2rem, 8vw, 2.45rem);
    margin-bottom: 1rem;
    line-height: 1.02;
  }
  .feature-text p {
    font-size: 0.95rem;
    line-height: 1.7;
    margin-bottom: 1.5rem;
  }

  /* ════ 3. WINE FEATURE — cinematic + horizontal carousel ════ */
  /* === MOBILE: HOME - 3. WINE FEATURE === */
  .wine-feature {
    padding: 4rem 0 5rem;
    background:
      radial-gradient(ellipse at 80% 0%, rgba(90, 17, 26, 0.30) 0%, transparent 60%),
      linear-gradient(180deg, var(--dark-brown) 0%, var(--deep-wine) 100%);
    border-top: none;
  }
  .wine-layout {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .wine-photo { display: none; }
  .wine-text {
    background: transparent;
    padding: 0 1.5rem 1.75rem;
  }
  .wine-text .section-label-light { margin-bottom: 0.85rem; }
  .wine-text h2 {
    font-size: clamp(2.1rem, 8.4vw, 2.5rem);
    margin-bottom: 1.1rem;
    line-height: 1.04;
  }
  .wine-text p {
    font-size: 0.95rem;
    line-height: 1.7;
    margin-bottom: 1.4rem;
    max-width: 28rem;
  }

  /* === MOBILE: HOME - 3b. WINE CAROUSEL === */
  /* NB: live carousel uses .bottle-card (below). .wine-card* here is orphaned in HTML
     but still queried by script.js:192 - NOT dead CSS, do not auto-remove. See KNOWN_PITFALLS P5. */
  /* Carousel */
  .wine-carousel-wrap {
    display: block;
    padding-top: 1rem;
  }
  .wine-carousel {
    display: flex;
    gap: 0.85rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0 1.5rem 1.25rem;
    scroll-padding-left: 1.5rem;
  }
  .wine-carousel::-webkit-scrollbar { display: none; }
  .wine-card {
    flex: 0 0 44%;
    max-width: 11rem;
    scroll-snap-align: start;
    aspect-ratio: 3 / 5;
    border-radius: 18px;
    overflow: hidden;
    position: relative;
    background-color: var(--wine);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 1px solid rgba(239, 226, 207, 0.08);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.5);
    padding: 1.2rem 1.1rem 1.2rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    text-decoration: none;
    color: var(--cream);
  }
  .wine-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
      rgba(10, 4, 4, 0.10) 0%,
      rgba(10, 4, 4, 0.20) 45%,
      rgba(10, 4, 4, 0.78) 78%,
      rgba(10, 4, 4, 0.92) 100%);
    pointer-events: none;
  }
  .wine-card-text {
    position: relative;
    z-index: 1;
    margin-bottom: 0.5rem;
  }
  .wine-card-country {
    display: block;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.35rem;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--cream);
    line-height: 1.1;
  }
  .wine-card-sub {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.7rem;
    line-height: 1.35;
    color: rgba(217, 194, 163, 0.72);
    max-width: 11ch;
  }
  .wine-card-arrow {
    position: relative;
    z-index: 1;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    background: rgba(217, 194, 163, 0.18);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(239, 226, 207, 0.22);
    display: grid;
    place-items: center;
    color: var(--cream);
    align-self: flex-start;
    margin-top: 0.6rem;
    transition: background 200ms;
  }
  .wine-card-arrow svg { width: 14px; height: 14px; }
  .wine-card:active .wine-card-arrow { background: rgba(217, 194, 163, 0.35); }
  .wine-carousel-dots {
    display: flex;
    gap: 0.4rem;
    justify-content: center;
    align-items: center;
    margin-top: 0.25rem;
  }
  .wine-carousel-dots span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(239, 226, 207, 0.22);
    transition: background 220ms ease, width 220ms ease, border-radius 220ms ease;
  }
  .wine-carousel-dots span.is-active {
    background: var(--cream);
    width: 22px;
    border-radius: 4px;
  }

  /* в•ђв•ђв•ђв•ђ Bottle cards inside wine-carousel в•ђв•ђв•ђв•ђ */
  /* === MOBILE: HOME - 3c. BOTTLE CARDS (live carousel cards) === */
  .bottle-card {
    flex: 0 0 40vw;
    max-width: 10rem;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.65rem;
    margin: 0;
  }
  .bottle-card img {
    width: 100%;
    height: 52vw;
    max-height: 13rem;
    object-fit: contain;
    object-position: bottom center;
  }
  .bottle-card figcaption {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.18rem;
    text-align: center;
  }
  .bottle-region {
    font-size: 0.54rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: rgba(217, 194, 163, 0.48);
  }
  .bottle-name {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 0.88rem;
    font-weight: 400;
    color: #d9c2a3;
  }

  /* ════ 4. SERVICES — horizontal split cards (text left, image right) ════ */
  /* === MOBILE: HOME - 4. SERVICES (svc cards) === */
  /* NB: svc-card DESKTOP backgrounds/layout live in index.css @media >=768 (.page-home .svc-*). */
  .services-section {
    padding: 4rem 1.25rem 4.5rem;
    background: var(--deep-wine);
  }
  .services-grid {
    gap: 0.85rem;
    background: transparent;
    grid-template-columns: 1fr;
  }
  .svc-card {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45);
    min-height: 188px;
    background-size: cover;
    background-position: right center;
    background-repeat: no-repeat;
    padding: 1.5rem 1.4rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    grid-column: 1;
    grid-row: auto;
  }
  .svc-hero {
    background:
      linear-gradient(to right,
        rgba(6, 2, 2, 0.97) 0%,
        rgba(6, 2, 2, 0.93) 38%,
        rgba(6, 2, 2, 0.55) 58%,
        rgba(6, 2, 2, 0.10) 95%,
        rgba(6, 2, 2, 0) 100%),
      url('photos/main-page/private%20events.webp') 95% center / cover no-repeat;
  }
  .svc-catering {
    background:
      linear-gradient(to right,
        rgba(6, 2, 2, 0.97) 0%,
        rgba(6, 2, 2, 0.93) 38%,
        rgba(6, 2, 2, 0.55) 58%,
        rgba(6, 2, 2, 0.10) 95%,
        rgba(6, 2, 2, 0) 100%),
      url('photos/main-page/catering.webp') right center / cover no-repeat;
  }
  .svc-mornings {
    background:
      linear-gradient(to right,
        rgba(6, 2, 2, 0.97) 0%,
        rgba(6, 2, 2, 0.93) 38%,
        rgba(6, 2, 2, 0.55) 58%,
        rgba(6, 2, 2, 0.10) 95%,
        rgba(6, 2, 2, 0) 100%),
      url('photos/main-page/brunch3.webp') 80% center / cover no-repeat;
  }
  .svc-inner { padding: 0; }
  .svc-card .sec-label,
  .svc-inner .sec-label {
    display: block;
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--beige);
    opacity: 0.78;
    margin-bottom: 0.55rem;
  }
  .svc-heading {
    font-size: clamp(1.45rem, 5.8vw, 1.7rem);
    line-height: 1.05;
    margin-bottom: 0.65rem;
    max-width: 50%;
  }
  .svc-hero .svc-heading {
    font-size: clamp(1.7rem, 6.6vw, 1.9rem);
    margin-bottom: 0.75rem;
  }
  .svc-body {
    font-size: 0.78rem;
    line-height: 1.55;
    margin-bottom: 0.9rem;
    max-width: 52%;
  }
  .svc-cta { gap: 0.55rem; align-items: center; }
  .svc-rule { width: 18px; }
  .svc-link {
    font-size: 0.62rem;
    letter-spacing: 0.22em;
  }
  /* meta dots inside Brunch card stay compact */
  .svc-meta { margin-bottom: 0.55rem; flex-wrap: wrap; row-gap: 0.3rem; max-width: 52%; }
  .svc-meta-item { font-size: 0.55rem; }

  /* ════ 5. GIFT CARDS — premium horizontal cream card ════ */
  /* === MOBILE: HOME - 5. GIFT BANNER === */
  .gift-banner {
    padding: 2.5rem 1.25rem 3rem;
    background:
      radial-gradient(ellipse 90% 50% at 50% 100%, rgba(140, 26, 42, 0.20) 0%, transparent 65%),
      var(--deep-wine);
    border: none;
  }
  .gift-banner-inner {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "icon    image"
      "content image"
      "cta     image";
    align-items: center;
    column-gap: 0.5rem;
    row-gap: 0;
    background:
      radial-gradient(ellipse at 30% 0%, #fdf3da 0%, #f6e9cf 55%, var(--cream) 100%);
    border-radius: 24px;
    padding: 1.75rem 1.4rem 1.85rem;
    box-shadow:
      0 26px 56px rgba(0, 0, 0, 0.55),
      0 0 0 1px rgba(140, 26, 42, 0.06),
      inset 0 1px 0 rgba(255, 255, 255, 0.7);
    text-align: left;
    position: relative;
    overflow: hidden;
  }
  .gift-banner-inner::before {
    content: '';
    position: absolute;
    top: -10%;
    left: -10%;
    width: 60%;
    height: 60%;
    background: radial-gradient(ellipse at center, rgba(255, 245, 222, 0.55) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
  }
  .gift-banner-content,
  .gift-cards-mockup,
  .gift-cta { position: relative; z-index: 1; }

  /* Icon row on its own */
  .gift-icon {
    grid-area: icon;
    margin: 0 0 0.85rem;
    color: var(--burgundy);
    filter: drop-shadow(0 1px 2px rgba(140, 26, 42, 0.18));
    align-self: end;
    justify-self: start;
  }
  .gift-icon svg { width: 24px; height: 24px; }

  .gift-banner-content {
    grid-area: content;
    text-align: left;
    align-items: flex-start;
    padding: 0;
    gap: 0.4rem;
    order: 0;
  }
  .gift-eyebrow { display: none; }
  .gift-heading {
    font-size: clamp(1.55rem, 6.3vw, 1.85rem);
    letter-spacing: 0.04em;
    line-height: 1;
    margin-bottom: 0.5rem;
    color: var(--text-dark);
    text-shadow: 0 1px 0 rgba(255, 248, 232, 0.6);
  }
  .gift-text {
    font-size: 0.76rem;
    line-height: 1.55;
    max-width: 22ch;
    margin: 0;
    text-align: left;
    color: #5a3f30;
  }

  .gift-cards-mockup {
    grid-area: image;
    order: 0;
    position: relative;
    width: 100%;
    min-width: 0;
    min-height: 170px;
    margin: 0;
    align-self: center;
  }
  .gift-card-img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 132px;
    height: auto;
    border-radius: 5px;
  }
  .gift-card-img.card-back {
    transform: translate(-72%, -50%) rotate(-12deg);
    filter:
      drop-shadow(0 3px 8px rgba(60, 10, 18, 0.30))
      drop-shadow(0 14px 28px rgba(60, 10, 18, 0.40));
    z-index: 1;
  }
  .gift-card-img.card-front {
    transform: translate(-26%, -50%) rotate(8deg);
    filter:
      drop-shadow(0 3px 8px rgba(0, 0, 0, 0.18))
      drop-shadow(0 14px 30px rgba(0, 0, 0, 0.26));
    z-index: 2;
  }

  .gift-cta {
    grid-area: cta;
    order: 0;
    justify-content: flex-start;
    margin-top: 1.15rem;
  }
  .gift-learn-more {
    padding: 0.85rem 1.4rem;
    font-size: 0.64rem;
    letter-spacing: 0.2em;
    min-height: 44px;
    border-radius: 6px;
    box-shadow:
      0 8px 20px rgba(90, 17, 26, 0.42),
      inset 0 1px 0 rgba(255, 255, 255, 0.10);
  }

  /* iPhone container refinement */
  .page-width {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  /* в•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђ
     CINEMATIC HDR UPGRADE — warm contrast, glow, depth
  в•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђ */

  /* Body — layered burgundy gradient backdrop */
  /* === MOBILE: HOME - HDR/CINEMATIC OVERRIDES (re-skin: body/hero/dark-strip/feature/wine/services/gift/buttons/footer) === */
  body {
    background:
      radial-gradient(ellipse 80% 50% at 50% 0%, rgba(140, 26, 42, 0.18) 0%, transparent 60%),
      linear-gradient(180deg, #140406 0%, #1c060a 30%, #110305 70%, #090203 100%);
  }

  /* Hero — boost contrast/warmth on image */
  .hero {
    background-blend-mode: normal;
  }
  .hero[style] {
    background-image: linear-gradient(180deg, rgba(14, 4, 4, 0.1) 0%, transparent 30%, rgba(14, 4, 4, 0.45) 100%), url('photos/main-page/hero-mobile.webp') !important;
  }
  .hero h1 {
    text-shadow: 0 2px 28px rgba(0, 0, 0, 0.6), 0 0 60px rgba(217, 194, 163, 0.10);
  }
  .hero-text { color: rgba(244, 235, 217, 0.88); }

  /* Photos throughout — HDR-like CSS filter */
  .feature-image,
  .svc-hero,
  .svc-catering,
  .svc-mornings,
  .wine-card[style],
  .gift-card-img {
    filter: saturate(1.18) contrast(1.08) brightness(1.04);
  }

  /* Dark strip cards — richer gradient + inner glow */
  .dark-strip {
    background:
      radial-gradient(ellipse 80% 80% at 50% 0%, rgba(140, 26, 42, 0.32) 0%, transparent 65%),
      linear-gradient(180deg, #1a0509 0%, #220810 50%, #160508 100%);
  }
  .dark-strip-header h2 {
    text-shadow: 0 0 40px rgba(217, 194, 163, 0.15);
  }
  .dark-strip-item {
    background:
      radial-gradient(ellipse at 30% 0%, rgba(217, 194, 163, 0.08) 0%, transparent 50%),
      linear-gradient(160deg, rgba(110, 26, 42, 0.45) 0%, rgba(34, 8, 12, 0.95) 100%);
    border: 1px solid rgba(239, 226, 207, 0.12);
    box-shadow:
      inset 0 1px 0 rgba(239, 226, 207, 0.08),
      0 8px 24px rgba(0, 0, 0, 0.45);
  }
  .dark-strip-item .strip-icon {
    filter: drop-shadow(0 0 8px rgba(217, 194, 163, 0.25));
  }

  /* Cream content card — soft warm glow + sharper edge */
  .feature-text {
    background:
      radial-gradient(ellipse at 50% 0%, #fcf2dc 0%, var(--cream) 60%);
    box-shadow:
      0 28px 70px rgba(0, 0, 0, 0.62),
      0 0 0 1px rgba(140, 26, 42, 0.06),
      inset 0 1px 0 rgba(255, 255, 255, 0.6);
  }
  .feature-text h2 {
    text-shadow: 0 1px 0 rgba(255, 248, 232, 0.5);
  }

  /* Wine section — cinematic burgundy depth + spotlight */
  .wine-feature {
    background:
      radial-gradient(ellipse 60% 40% at 80% 5%, rgba(180, 50, 70, 0.32) 0%, transparent 60%),
      radial-gradient(ellipse 60% 40% at 20% 95%, rgba(140, 26, 42, 0.25) 0%, transparent 65%),
      linear-gradient(180deg, #1c060a 0%, #0d0306 100%);
  }
  .wine-text h2 {
    text-shadow: 0 0 36px rgba(217, 194, 163, 0.16);
  }
  .wine-card {
    background-color: var(--wine);
    box-shadow:
      0 20px 44px rgba(0, 0, 0, 0.55),
      inset 0 1px 0 rgba(239, 226, 207, 0.10);
  }
  .wine-card::after {
    background: linear-gradient(180deg,
      rgba(10, 4, 4, 0.05) 0%,
      rgba(10, 4, 4, 0.12) 40%,
      rgba(10, 4, 4, 0.55) 70%,
      rgba(10, 4, 4, 0.95) 100%);
  }
  .wine-card-country {
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.7), 0 0 30px rgba(217, 194, 163, 0.18);
  }
  .wine-card-arrow {
    background: rgba(217, 194, 163, 0.22);
    border: 1px solid rgba(239, 226, 207, 0.32);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  }

  /* Service cards — depth + warm gradient overlay */
  .services-section {
    background:
      radial-gradient(ellipse 80% 40% at 50% 0%, rgba(90, 17, 26, 0.18) 0%, transparent 60%),
      var(--deep-wine);
  }
  .svc-card {
    box-shadow:
      0 18px 38px rgba(0, 0, 0, 0.55),
      inset 0 1px 0 rgba(239, 226, 207, 0.06);
  }
  .svc-card .svc-heading {
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.65), 0 0 28px rgba(217, 194, 163, 0.12);
  }

  /* Gift card — warm glowing cream + richer shadow */
  .gift-banner {
    background:
      radial-gradient(ellipse 70% 40% at 50% 100%, rgba(140, 26, 42, 0.20) 0%, transparent 60%),
      var(--deep-wine);
  }
  .gift-banner-inner {
    background:
      radial-gradient(ellipse at 50% 0%, #fcf2dc 0%, #f4e6cd 55%, var(--cream) 100%);
    box-shadow:
      0 26px 60px rgba(0, 0, 0, 0.55),
      0 0 0 1px rgba(140, 26, 42, 0.08),
      inset 0 1px 0 rgba(255, 255, 255, 0.6);
  }
  .gift-heading { text-shadow: 0 1px 0 rgba(255, 248, 232, 0.5); }

  /* Buttons — glowing burgundy gradient */
  .button-primary {
    background:
      radial-gradient(ellipse at 50% 0%, rgba(140, 26, 42, 1) 0%, var(--burgundy) 50%, #480e16 100%);
    border-color: rgba(140, 26, 42, 0.85);
    box-shadow:
      0 10px 24px rgba(90, 17, 26, 0.45),
      0 0 0 1px rgba(217, 194, 163, 0.06),
      inset 0 1px 0 rgba(255, 255, 255, 0.12);
    color: #fdf2dc;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  }
  .button-primary:hover {
    background:
      radial-gradient(ellipse at 50% 0%, rgba(160, 36, 56, 1) 0%, #6a1923 50%, #54101a 100%);
  }
  .button-outline {
    background: rgba(239, 226, 207, 0.04);
    border: 1px solid rgba(239, 226, 207, 0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }

  /* в”Ђ Header shrink on scroll в”Ђ */
  .site-header.scrolled .header-inner {
    padding-top: 0.6rem;
    padding-bottom: 0.65rem;
  }

  /* в”Ђ Scroll-to-top button в”Ђ */
  .scroll-top-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
    right: 1.25rem;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(239, 226, 207, 0.20);
    background: rgba(36, 6, 12, 0.88);
    backdrop-filter: blur(14px) saturate(130%);
    -webkit-backdrop-filter: blur(14px) saturate(130%);
    color: rgba(239, 226, 207, 0.88);
    box-shadow:
      0 4px 18px rgba(0, 0, 0, 0.38),
      inset 0 1px 0 rgba(239, 226, 207, 0.07);
    cursor: pointer;
    z-index: 90;
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
    transition: opacity 380ms ease, transform 380ms ease, background 200ms ease;
    padding: 0;
  }
  .scroll-top-btn.is-visible {
    opacity: 0.88;
    transform: translateY(0);
    pointer-events: auto;
  }
  .scroll-top-btn:active {
    opacity: 0.6;
    transform: scale(0.93);
    transition: opacity 80ms ease, transform 80ms ease;
  }

  /* Footer info card — warmer glow */
  .footer-info-card {
    background:
      radial-gradient(ellipse 120% 100% at 50% 0%, rgba(180, 50, 70, 0.32) 0%, transparent 65%),
      linear-gradient(165deg, rgba(110, 26, 42, 0.55) 0%, rgba(34, 8, 12, 0.96) 55%, rgba(14, 4, 6, 1) 100%);
    box-shadow:
      0 20px 44px rgba(0, 0, 0, 0.6),
      0 0 28px rgba(140, 26, 42, 0.10),
      inset 0 1px 0 rgba(239, 226, 207, 0.10);
  }
}


/* ════════════════════════════════════════════
   FORM CONSENT + COMPACT MODAL
   Чекбокс согласия с политикой конфиденциальности
   и уплотнённая вертикаль модалок: форма должна
   помещаться на экран без прокрутки.
   Блок добавлен последним — перебивает базовые правила выше.
════════════════════════════════════════════ */

.form-consent {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-top: 0.15rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.76rem;
  line-height: 1.5;
  color: rgba(239,226,207,0.6);
  cursor: pointer;
}

.form-consent input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  margin: 0.1rem 0 0;
  border: 1px solid rgba(239,226,207,0.35);
  background: rgba(239,226,207,0.05);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: border-color 180ms, background 180ms;
}

.form-consent input[type="checkbox"]:checked {
  background: #7a1d30;
  border-color: #c9a96e;
}

.form-consent input[type="checkbox"]:checked::after {
  content: "";
  width: 0.3rem;
  height: 0.58rem;
  border: solid var(--cream, #EFE2CF);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg) translate(-1px, -1px);
}

.form-consent input[type="checkbox"]:focus-visible {
  outline: 2px solid #c9a96e;
  outline-offset: 2px;
}

.form-consent input.field-error {
  border-color: #d84356;
  background: rgba(216,67,86,0.2);
  box-shadow: 0 0 0 3px rgba(216,67,86,0.22);
}

/* весь блок согласия подсвечивается, если галочку не поставили */
.form-consent.field-error { color: #e3919b; }
.form-consent.field-error a { text-decoration-color: #e3919b; }
.form-consent.field-error input { animation: consent-shake 420ms ease; }

@keyframes consent-shake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-3px); }
  40%      { transform: translateX(3px); }
  60%      { transform: translateX(-2px); }
  80%      { transform: translateX(2px); }
}

.form-consent a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: rgba(201,169,110,0.5);
}
.form-consent a:hover { color: #c9a96e; text-decoration-color: #c9a96e; }

/* ── компактная вертикаль модалок ── */
.modal { padding: 2rem 2.25rem 1.9rem; }
.modal-header h2 { font-size: 2.05rem; margin-bottom: 0.3rem; }
.modal-subtitle {
  font-size: 0.84rem;
  margin-bottom: 1rem;
  padding-bottom: 0.85rem;
}
.modal-form { gap: 0.7rem; }
.form-row { gap: 0.7rem; }
.form-group { gap: 0.25rem; }
.form-group input,
.form-group select,
.form-group textarea {
  padding: 0.52rem 0.8rem;
  font-size: 0.9rem;
}
.form-group textarea { min-height: 54px; }
.modal-submit { margin-top: 0.5rem; padding: 0.85rem 1.5rem; }
.catering-benefits { margin: 0.2rem 0 0; gap: 0.3rem 1.2rem; }

/* ── на невысоких экранах (ноутбуки 768–860px) ужимаем ещё, чтобы форма влезала целиком ── */
@media (max-height: 880px) {
  .modal { padding: 1.5rem 2rem 1.5rem; max-height: 94vh; }
  .modal-header h2 { font-size: 1.7rem; }
  .modal-eyebrow { margin-bottom: 0.3rem; font-size: 0.6rem; }
  .modal-subtitle {
    font-size: 0.8rem;
    margin-bottom: 0.7rem;
    padding-bottom: 0.6rem;
  }
  .modal-form { gap: 0.5rem; }
  .form-row { gap: 0.6rem; }
  .form-group input,
  .form-group select,
  .form-group textarea { padding: 0.42rem 0.7rem; font-size: 0.86rem; }
  .form-group label { font-size: 0.6rem; }
  .form-group textarea { min-height: 44px; }
  .form-consent { font-size: 0.7rem; margin-top: 0; }
  .modal-submit { margin-top: 0.35rem; padding: 0.7rem 1.5rem; }
  /* декоративный список преимуществ в модалке кейтеринга — не нужен, когда мало места */
  .catering-benefits { display: none; }
  .modal-close { top: 0.7rem; right: 0.7rem; }
}


/* ════════════════════════════════════════════
   FINAL QUOTE — общий блок цитаты во всю ширину
   с фоновым фото (About Us, Brunch).
   Перенесён из about.css, чтобы страницы не дублировали код.
════════════════════════════════════════════ */
.final-quote {
  position: relative;
  background-color: #0a0303;
  background-size: cover;
  background-position: center;
  padding: clamp(5rem, 14vh, 11rem) 0;
  overflow: hidden;
}
.final-quote-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, rgba(10, 4, 4, 0.55) 0%, rgba(10, 4, 4, 0.88) 75%, rgba(10, 4, 4, 0.96) 100%),
    linear-gradient(180deg, rgba(10, 4, 4, 0.50) 0%, rgba(10, 4, 4, 0.30) 50%, rgba(10, 4, 4, 0.55) 100%);
}
.final-quote-inner {
  position: relative;
  z-index: 1;
  text-align: center;
}
.final-quote-text {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.7rem, 3.2vw, 2.8rem);
  font-weight: 400;
  font-style: italic;
  line-height: 1.4;
  letter-spacing: -0.005em;
  color: var(--text-light);
  max-width: 30ch;
  margin: 0 auto;
}
.final-quote-text span { display: block; }
.final-quote-text::before {
  content: '\201C';
  display: block;
  font-size: 3em;
  line-height: 0.6;
  color: var(--beige);
  opacity: 0.6;
  margin-bottom: 0.4rem;
  font-style: normal;
  font-family: 'Cormorant Garamond', Georgia, serif;
}
.final-quote-text::after {
  content: '\201D';
  display: block;
  font-size: 3em;
  line-height: 0.6;
  color: var(--beige);
  opacity: 0.6;
  margin-top: 0.4rem;
  font-style: normal;
  font-family: 'Cormorant Garamond', Georgia, serif;
}

@media (min-width: 768px) {
  .final-quote {
    padding: 3.5rem 0;
    min-height: 0;
  }
  .final-quote-text {
    font-size: clamp(1.6rem, 2.4vw, 2.4rem);
  }
  .final-quote-text::before,
  .final-quote-text::after { content: none; }
  .final-quote-text span:first-child::before {
    content: '\201C\2009';
    color: #9b7b55;
    font-family: inherit;
  }
  .final-quote-text span:last-child::after {
    content: '\2009\201D';
    color: #9b7b55;
    font-family: inherit;
  }
}


/* ── Поля формы не меняют цвет при вводе ──
   Автозаполнение Chrome заливало поле почти чёрным (#080202), из-за чего
   заполненные поля выглядели темнее пустых. Берём цвет самого поля. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
select:-webkit-autofill,
textarea:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #2a1214 inset !important;
  -webkit-text-fill-color: var(--cream, #EFE2CF) !important;
  caret-color: var(--cream, #EFE2CF);
}

/* фокус тоже не подсвечивает фон — меняется только рамка */
.modal-content .form-group input:focus,
.modal-content .form-group select:focus,
.modal-content .form-group textarea:focus {
  background: transparent;
}


/* ════════════════════════════════════════════
   FLATPICKR — календарь в бордовой палитре формы.
   По умолчанию он белый с синим выделением; переопределяем
   после подключения его CSS (наш файл грузится позже).
════════════════════════════════════════════ */
.flatpickr-calendar {
  background: #1e070b;
  border: 1px solid rgba(201,169,110,0.28);
  border-radius: 0;
  box-shadow: 0 18px 44px rgba(0,0,0,0.55);
  color: var(--cream, #EFE2CF);
}
.flatpickr-calendar.arrowTop::before,
.flatpickr-calendar.arrowTop::after,
.flatpickr-calendar.arrowBottom::before,
.flatpickr-calendar.arrowBottom::after { display: none; }

.flatpickr-months,
.flatpickr-month,
.flatpickr-weekdays,
.flatpickr-weekdaycontainer {
  background: transparent;
  color: var(--cream, #EFE2CF);
  fill: var(--cream, #EFE2CF);
}

.flatpickr-current-month,
.flatpickr-current-month input.cur-year,
.flatpickr-current-month .numInputWrapper {
  color: var(--cream, #EFE2CF);
  font-family: 'Cormorant Garamond', Georgia, serif;
}
.flatpickr-current-month select.flatpickr-monthDropdown-months {
  background: #1e070b;
  color: var(--cream, #EFE2CF);
  font-family: 'Cormorant Garamond', Georgia, serif;
}
.flatpickr-current-month select.flatpickr-monthDropdown-months option {
  background: #1e070b;
  color: var(--cream, #EFE2CF);
}
.flatpickr-current-month input.cur-year { background: transparent; }

.flatpickr-prev-month svg,
.flatpickr-next-month svg { fill: rgba(239,226,207,0.7); }
.flatpickr-prev-month:hover svg,
.flatpickr-next-month:hover svg { fill: #c9a96e; }

.flatpickr-weekday {
  color: rgba(201,169,110,0.75);
  font-family: 'Inter', sans-serif;
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.flatpickr-day {
  color: rgba(239,226,207,0.85);
  border-radius: 0;
  border-color: transparent;
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
}
.flatpickr-day:hover,
.flatpickr-day:focus {
  background: rgba(201,169,110,0.16);
  border-color: transparent;
  color: var(--cream, #EFE2CF);
}
.flatpickr-day.today {
  border-color: rgba(201,169,110,0.55);
}
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
  background: linear-gradient(160deg, #7a1d30 0%, #5a1120 100%);
  border-color: #7a1d30;
  color: var(--cream, #EFE2CF);
}
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay,
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
  color: rgba(239,226,207,0.22);
  background: transparent;
}

.flatpickr-time input,
.flatpickr-time .flatpickr-am-pm,
.flatpickr-time .flatpickr-time-separator {
  background: transparent;
  color: var(--cream, #EFE2CF);
}
.flatpickr-time input:hover,
.flatpickr-time .flatpickr-am-pm:hover { background: rgba(201,169,110,0.14); }


/* ── Звёздочка у обязательных полей — ставится автоматически по атрибуту required,
   чтобы разметка и подписи не расходились ── */
.form-group:has(input:required, select:required, textarea:required) > label::after,
.pe-field:has(input:required, select:required, textarea:required) > label::after,
.gc-field:has(input:required, select:required, textarea:required) > label::after {
  content: " *";
  color: #c9a96e;
}


/* === GLOBAL: MOBILE ACTION BAR === */
/* Закреплённая нижняя панель «Reserve a Table / Call».
   Разметку создаёт script.js (единый источник на все страницы).
   На десктопе не существует визуально — скрыта по умолчанию. */
.mobile-action-bar { display: none; }

@media (max-width: 767px) {
  :root {
    --mab-height: 65px;   /* фактическая высота: кнопка 48 + отступы 16 + рамка 1 */
  }

  .mobile-action-bar {
    display: flex;
    /* Спрятана, пока страница не прокручена — класс is-visible ставит script.js */
    transform: translateY(115%);
    opacity: 0;
    visibility: hidden;
    transition: transform 260ms ease, opacity 200ms ease, visibility 0s linear 260ms;
    gap: 0.6rem;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;          /* ниже шапки (100), меню (200) и модалки (500) */
    box-sizing: border-box;
    padding: 0.5rem 1.25rem;
    padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(to top, #0b0203 55%, rgba(11,2,3,0.92) 100%);
    border-top: 1px solid rgba(201,169,110,0.20);
  }

  .mobile-action-bar .mab-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 48px;
    text-decoration: none;
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    transition: background 180ms, border-color 180ms, color 180ms;
  }

  .mobile-action-bar .mab-reserve {
    flex: 1 1 auto;
    background: linear-gradient(180deg, #7A2034 0%, #611A2B 100%);
    border: 1px solid rgba(110,24,40,0.55);
    color: var(--cream, #EFE2CF);
  }
  .mobile-action-bar .mab-reserve:active { background: #611A2B; }

  .mobile-action-bar .mab-call {
    flex: 0 0 auto;
    min-width: 104px;
    padding: 0 1rem;
    border: 1px solid rgba(201,169,110,0.45);
    color: var(--beige, #D9C2A3);
    background: transparent;
  }
  .mobile-action-bar .mab-call:active { background: rgba(201,169,110,0.10); }

  .mobile-action-bar .mab-btn:focus-visible {
    outline: 2px solid var(--beige, #D9C2A3);
    outline-offset: 2px;
  }

  .mobile-action-bar.is-visible {
    transform: none;
    opacity: 1;
    visibility: visible;
    transition: transform 260ms ease, opacity 200ms ease, visibility 0s;
  }

  /* Панель не должна перекрывать футер и последний блок контента */
  body {
    padding-bottom: calc(var(--mab-height) + env(safe-area-inset-bottom, 0px));
  }

  /* Кнопка «наверх» поднимается над панелью */
  .scroll-top-btn {
    bottom: calc(var(--mab-height) + 0.75rem + env(safe-area-inset-bottom, 0px));
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-action-bar,
  .mobile-action-bar.is-visible,
  .mobile-action-bar .mab-btn { transition: none; }
}

/* === GLOBAL: FOOTER QUICK ACTIONS === */
/* Кнопки «Get Directions / Call Us» — только мобильная (показ в mobile.css ≤767px) */
.footer-quick-actions { display: none; }

/* === GLOBAL: MOBILE RESERVATION WIZARD === */
/* Разметку шагов создаёт script.js для всех страниц. На десктопе она не нужна:
   там остаётся прежняя одноэкранная форма. Показ — в mobile.css при ≤767px. */
.rsv-steps,
.rsv-stepper,
.rsv-dates,
.rsv-times,
.rsv-continue,
.rsv-call,
.rsv-back,
.rsv-note { display: none; }