/* =================================================================
   HUMMUS VILLAGE — V2 STYLESHEET
   Editorial Mediterranean Warmth × Illustrated × Alive
   ================================================================= */

/* ---------- 1. DESIGN TOKENS ---------- */
:root {
  /* Brand colors */
  --c-cream:       #FAF6EE;
  --c-warm-white:  #FFFDF8;
  --c-pale-tan:    #F2EBD9;
  --c-gold:        #D4A017;
  --c-gold-light:  #E8C547;
  --c-coral:       #E85C3A;
  --c-coral-dark:  #C44A28;
  --c-sky:         #5BB8E8;
  --c-sky-light:   #A8D8F0;
  --c-olive:       #6B7C3A;
  --c-olive-dark:  #4A5828;
  --c-brown:       #2C1A0E;
  --c-black-off:   #1A1209;
  --c-tan-muted:   #E8DCC8;
  --c-sage:        #D6E0C2;
  --c-row-hover:   #F5EDD8;

  /* Typography */
  --f-display: 'Playfair Display', Georgia, serif;
  --f-script:  'Satisfy', 'Playfair Display', Georgia, cursive;
  --f-body:    'Lora', Georgia, serif;

  /* Spacing scale */
  --s-2: 4px;   --s-3: 8px;   --s-4: 12px;  --s-5: 16px;
  --s-6: 24px;  --s-7: 32px;  --s-8: 48px;  --s-9: 64px;
  --s-10: 96px; --s-11: 128px;

  /* Layout */
  --maxw-narrow:  640px;
  --maxw-read:    720px;
  --maxw-content: 1200px;
  --maxw-wide:    1400px;

  --nav-h-d: 80px;
  --nav-h-m: 64px;

  /* Animation */
  --ease-primary: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-soft:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --d-quick: 200ms;
  --d-mid:   300ms;
  --d-slow:  500ms;

  /* Warm shadows only */
  --sh-sm:  0 2px 8px   rgba(44, 26, 14, 0.08);
  --sh-md:  0 8px 24px  rgba(44, 26, 14, 0.10);
  --sh-lg:  0 16px 48px rgba(44, 26, 14, 0.14);
  --sh-xl:  0 24px 64px rgba(44, 26, 14, 0.18);
  --sh-nav: 0 2px 28px  rgba(44, 26, 14, 0.10);

  --z-bg: 0; --z-content: 10; --z-overlay: 20; --z-nav: 100; --z-modal: 200; --z-transition: 300;
}

/* ---------- 2. RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img, svg { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; border: none; background: none; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; margin: 0; }
input, textarea, select { font: inherit; color: inherit; }

html {
  scroll-behavior: smooth;
  overflow-x: hidden;  /* required alongside body — body alone is not reliable cross-browser */
}

body {
  font-family: var(--f-body);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.85;
  color: var(--c-brown);
  background-color: var(--c-cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.17 0 0 0 0 0.10 0 0 0 0 0.05 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--f-display);
  font-weight: 700;
  line-height: 1.12;
  color: var(--c-black-off);
  margin: 0;
}
p { margin: 0 0 1em 0; }
p:last-child { margin-bottom: 0; }
::selection { background: var(--c-coral); color: var(--c-warm-white); }

/* ---------- 3. UTILITIES ---------- */
.container {
  width: 100%;
  max-width: var(--maxw-wide);
  margin-inline: auto;
  padding-inline: var(--s-6);
}
@media (min-width: 768px) { .container { padding-inline: var(--s-7); } }
@media (min-width: 1024px) { .container { padding-inline: var(--s-8); } }

.eyebrow {
  font-family: var(--f-body);
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--c-olive);
  display: inline-flex;
  align-items: center;
  gap: var(--s-4);
  margin-bottom: var(--s-5);
}
.eyebrow::before {
  content: '';
  display: block;
  width: 32px;
  height: 2px;
  background: var(--c-coral);
  border-radius: 1px;
}
.eyebrow--gold { color: var(--c-gold); }
.eyebrow--gold::before { background: var(--c-coral); }
.eyebrow--centered { justify-content: center; }
.eyebrow--centered::after {
  content: '';
  display: block;
  width: 32px;
  height: 2px;
  background: var(--c-coral);
  border-radius: 1px;
}

.script {
  font-family: var(--f-script);
  font-weight: 400;
  letter-spacing: 0.02em;
}

/* Common SVG-draw setup — JS sets dasharray/offset and animates */
.draw-on-scroll path,
.draw-on-scroll line,
.draw-on-scroll circle,
.draw-on-scroll ellipse,
.draw-on-scroll rect {
  /* JS will set stroke-dasharray and stroke-dashoffset, GSAP animates */
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- 4. PAGE TRANSITION OVERLAY ---------- */
.page-overlay {
  position: fixed;
  inset: 0;
  background-color: var(--c-coral);
  z-index: var(--z-transition);
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
  will-change: transform;
}

/* ---------- 5. NAVIGATION ---------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-h-m);
  z-index: var(--z-nav);
  background-color: rgba(255, 253, 248, 0);
  border-bottom: 1px solid transparent;
  transition: background-color 400ms var(--ease-primary),
              box-shadow 400ms var(--ease-primary),
              border-color 400ms var(--ease-primary);
}
@media (min-width: 768px) { .nav { height: var(--nav-h-d); } }

.nav.is-scrolled,
.nav.is-solid {
  background-color: var(--c-warm-white);
  border-bottom-color: rgba(44, 26, 14, 0.08);
  box-shadow: var(--sh-nav);
}

.nav__inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
}

.nav__logo {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  flex-shrink: 0;
  transition: transform var(--d-mid) var(--ease-spring);
}
.nav__logo:hover { transform: rotate(2deg); }
.nav__logo img {
  height: 40px;
  width: auto;
}
@media (min-width: 768px) { .nav__logo img { height: 56px; } }
.nav__logo-text {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 18px;
  color: var(--c-black-off);
  letter-spacing: 0.01em;
  display: none;
}
@media (min-width: 1024px) { .nav__logo-text { display: block; } }

.nav__links {
  display: none;
  align-items: center;
  gap: var(--s-7);
}
@media (min-width: 1024px) { .nav__links { display: flex; } }

.nav__link {
  font-family: var(--f-body);
  font-size: 15px;
  font-weight: 500;
  color: var(--c-black-off);
  letter-spacing: 0.04em;
  position: relative;
  padding-block: 8px;
  transition: transform var(--d-quick) var(--ease-primary);
}
.nav__link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 2px;
  height: 6px;
  width: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 6' preserveAspectRatio='none'%3E%3Cpath d='M1 4 Q 25 1, 50 3 T 99 4' stroke='%23E85C3A' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  transition: width var(--d-mid) var(--ease-primary);
  pointer-events: none;
}
.nav__link:hover { transform: translateY(-2px); }
.nav__link:hover::after,
.nav__link.is-active::after { width: 100%; }

.nav__cta {
  display: none;
  align-items: center;
  background-color: var(--c-coral);
  color: var(--c-warm-white);
  font-family: var(--f-body);
  font-size: 14px;
  font-weight: 600;
  padding: 10px 22px;
  border-radius: 3px;
  letter-spacing: 0.02em;
  transition: background-color var(--d-quick), transform var(--d-quick), box-shadow var(--d-quick);
}
@media (min-width: 768px) { .nav__cta { display: inline-flex; } }
.nav__cta:hover {
  background-color: var(--c-coral-dark);
  transform: scale(1.03);
  box-shadow: var(--sh-md);
}

/* Mobile burger */
.nav__burger {
  display: inline-flex;
  width: 32px; height: 32px;
  align-items: center; justify-content: center;
  position: relative;
  z-index: calc(var(--z-modal) + 1);
}
@media (min-width: 1024px) { .nav__burger { display: none; } }
.nav__burger svg { width: 28px; height: 28px; overflow: visible; }
.nav__burger line {
  stroke: var(--c-brown);
  stroke-width: 2.4;
  stroke-linecap: round;
  transform-origin: center;
  transition: transform var(--d-mid) var(--ease-primary), opacity var(--d-mid);
}
.nav.is-scrolled .nav__burger line,
.nav.is-solid .nav__burger line { stroke: var(--c-brown); }
.nav__burger.is-open line { stroke: var(--c-cream); }
.nav__burger.is-open line:nth-child(1) { transform: translate(0, 9px) rotate(45deg); }
.nav__burger.is-open line:nth-child(2) { opacity: 0; }
.nav__burger.is-open line:nth-child(3) { transform: translate(0, -9px) rotate(-45deg); }

/* Mobile menu — full-screen overlay */
.mobile-menu {
  position: fixed;
  inset: 0;
  background-color: var(--c-black-off);
  z-index: var(--z-modal);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--s-10) var(--s-6) var(--s-7);
  transform: translateX(100%);
  transition: transform 400ms var(--ease-primary);
  visibility: hidden;
  overflow: hidden;
}
.mobile-menu.is-open { transform: translateX(0); visibility: visible; }
.mobile-menu__logo {
  height: 80px;
  width: auto;
  margin-bottom: var(--s-9);
  filter: drop-shadow(0 0 24px rgba(212, 160, 23, 0.3));
}
.mobile-menu__links {
  display: flex;
  flex-direction: column;
  gap: var(--s-7);
  align-items: center;
  text-align: center;
}
.mobile-menu__link {
  font-family: var(--f-display);
  font-size: 36px;
  font-weight: 600;
  color: var(--c-cream);
  letter-spacing: 0.01em;
  transition: color var(--d-quick), transform var(--d-quick);
}
.mobile-menu__link:hover,
.mobile-menu__link.is-active { color: var(--c-gold); }
.mobile-menu__cta {
  margin-top: var(--s-9);
  background-color: var(--c-coral);
  color: var(--c-warm-white);
  font-family: var(--f-body);
  font-size: 16px;
  font-weight: 600;
  padding: 16px 32px;
  border-radius: 3px;
  letter-spacing: 0.02em;
}
.mobile-menu__decor {
  position: absolute;
  bottom: -40px;
  right: -40px;
  width: 320px;
  pointer-events: none;
  opacity: 0.06;
}

/* ---------- 6. BUTTONS ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  font-family: var(--f-body);
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 3px;
  padding: 16px 32px;
  font-size: 16px;
  cursor: pointer;
  text-align: center;
  transition: background-color var(--d-quick),
              color var(--d-quick),
              transform var(--d-quick) var(--ease-spring),
              box-shadow var(--d-quick),
              border-color var(--d-quick);
}
.btn--primary {
  background-color: var(--c-coral);
  color: var(--c-warm-white);
}
.btn--primary:hover {
  background-color: var(--c-coral-dark);
  transform: scale(1.03);
  box-shadow: var(--sh-md);
}
.btn--ghost {
  background: transparent;
  color: var(--c-brown);
  padding: 14px 0;
  border-radius: 0;
  border-bottom: 2px solid transparent;
  font-weight: 500;
  font-size: 15px;
}
.btn--ghost:hover {
  border-bottom-color: var(--c-gold);
  transform: translateY(-1px);
}
.btn--ghost strong {
  color: var(--c-gold);
  font-weight: 600;
  margin-left: 4px;
}
.btn--large { padding: 18px 44px; font-size: 16px; }
.btn--full { width: 100%; }

/* ---------- 7. SECTIONS ---------- */
.section { position: relative; padding-block: var(--s-10); }
@media (max-width: 767px) { .section { padding-block: var(--s-9); } }
.section--cream { background-color: var(--c-cream); }
.section--white { background-color: var(--c-warm-white); }
.section--tan   { background-color: var(--c-pale-tan); }
.section--dark  {
  background-color: var(--c-brown);
  color: var(--c-tan-muted);
  background-image:
    repeating-linear-gradient(45deg, transparent 0 1px, rgba(255,253,248,0.025) 1px 2px);
}
.section--dark h1, .section--dark h2, .section--dark h3 { color: var(--c-cream); }
.section--off-black {
  background-color: var(--c-black-off);
  color: var(--c-tan-muted);
}
.section--off-black h1, .section--off-black h2, .section--off-black h3 { color: var(--c-cream); }

.section-heading {
  font-family: var(--f-display);
  font-size: 44px;
  font-weight: 700;
  line-height: 1.08;
  margin-bottom: var(--s-3);
}
@media (min-width: 768px) { .section-heading { font-size: 56px; } }
@media (min-width: 1024px) { .section-heading { font-size: 64px; } }

.section-heading--xl { font-size: 56px; }
@media (min-width: 1024px) { .section-heading--xl { font-size: 72px; } }

.section-heading--underline { display: inline-block; }
.section-heading--underline::after {
  content: '';
  display: block;
  margin-top: var(--s-3);
  width: 80px;
  height: 6px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 6' preserveAspectRatio='none'%3E%3Cpath d='M1 4 Q 25 1, 50 3 T 99 4' stroke='%23E85C3A' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.section-sub {
  font-family: var(--f-body);
  font-size: 18px;
  color: var(--c-brown);
  opacity: 0.78;
  line-height: 1.85;
  max-width: 580px;
}
.section--dark .section-sub,
.section--off-black .section-sub { color: var(--c-tan-muted); opacity: 1; }

.section-head--center {
  text-align: center;
  max-width: 720px;
  margin-inline: auto;
  margin-bottom: var(--s-9);
}
.section-head--center .section-sub { margin-inline: auto; }

/* ---------- 8. HOME HERO ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  padding-top: calc(var(--nav-h-m) + var(--s-5));
  padding-bottom: var(--s-9);
  background-color: var(--c-cream);
  overflow: hidden;
}
@media (min-width: 768px) { .hero { padding-top: calc(var(--nav-h-d) + var(--s-5)); } }

.hero__dotgrid {
  position: absolute;
  top: 0; right: 0;
  width: 60%;
  height: 70%;
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(44,26,14,0.06) 1.4px, transparent 1.4px);
  background-size: 20px 20px;
  mask-image: linear-gradient(to bottom left, black, transparent 80%);
  -webkit-mask-image: linear-gradient(to bottom left, black, transparent 80%);
  z-index: var(--z-bg);
}

.hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-8);
  align-items: start;
  z-index: var(--z-content);
}
@media (min-width: 1024px) {
  .hero__inner { grid-template-columns: 55% 45%; gap: 0; }
}

.hero__text { position: relative; }
@media (min-width: 1024px) {
  .hero__text { padding-right: var(--s-7); margin-right: -32px; z-index: var(--z-overlay); }
}

.hero__h1 {
  font-family: var(--f-display);
  font-size: 52px;
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin-bottom: var(--s-6);
  color: var(--c-black-off);
}
@media (min-width: 768px) { .hero__h1 { font-size: 80px; } }
@media (min-width: 1024px) { .hero__h1 { font-size: 104px; } }

.hero__h1 .char { display: inline-block; will-change: transform, opacity; }

.hero__highlight {
  position: relative;
  display: inline-block;
}
.hero__highlight-line {
  position: absolute;
  left: -2%;
  bottom: -10px;
  width: 104%;
  height: 16px;
  pointer-events: none;
  overflow: visible;
}
.hero__highlight-line path {
  stroke: var(--c-gold);
  stroke-width: 4;
  stroke-linecap: round;
  fill: none;
}

.hero__sub {
  font-family: var(--f-body);
  font-size: 18px;
  line-height: 1.85;
  color: rgba(44, 26, 14, 0.8);
  max-width: 500px;
  margin-bottom: var(--s-7);
}
@media (min-width: 1024px) { .hero__sub { font-size: 19px; } }

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-7);
  align-items: center;
  margin-bottom: var(--s-7);
}

.hero__hours {
  display: inline-block;
  font-family: var(--f-body);
  font-size: 13px;
  color: var(--c-olive);
  border: 1px solid rgba(107, 124, 58, 0.4);
  padding: 9px 18px;
  border-radius: 2px;
  letter-spacing: 0.02em;
}

/* Three.js canvas wrapper */
.hero__canvas-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 4/5;
  z-index: var(--z-content);
}
@media (min-width: 1024px) {
  .hero__canvas-wrap {
    aspect-ratio: auto;
    height: calc(100vh - var(--nav-h-d) - var(--s-9));
    max-height: 720px;
  }
}
.hero__canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

/* Floating doodles */
.hero__doodles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: var(--z-overlay);
}
.hero__doodle {
  position: absolute;
  opacity: 0.85;
}
.hero__doodle svg { width: 100%; height: 100%; }
.hero__doodle--1 { top: 18%; right: 48%; width: 56px; animation: bob 6s var(--ease-primary) infinite; }
.hero__doodle--2 { top: 65%; right: 52%; width: 48px; animation: bob 8s var(--ease-primary) infinite -2s; }
.hero__doodle--3 { top: 38%; right: 4%; width: 64px; animation: bob 10s var(--ease-primary) infinite -3s; z-index: var(--z-content); }
@keyframes bob {
  0%, 100% { transform: translateY(-12px) rotate(-4deg); }
  50%      { transform: translateY(12px) rotate(4deg); }
}

.hero__olive-branch { display: none; }
.hero__olive-branch-original-IGNORE {
  .hero__olive-branch {
    left: 50%;
    bottom: 12px;
    width: 280px;
    max-width: 70%;
    opacity: 0.4;
    transform: translateX(-50%);
  }
}
.hero__olive-branch svg { width: 100%; height: auto; }

/* ---------- 9. MARQUEE STRIP ---------- */
.marquee {
  background-color: var(--c-brown);
  height: 56px;
  overflow: hidden;
  display: flex;
  align-items: center;
  position: relative;
  background-image:
    repeating-linear-gradient(45deg, transparent 0 1px, rgba(255,253,248,0.03) 1px 2px);
}
.marquee__track {
  display: flex;
  white-space: nowrap;
  animation: marquee 26s linear infinite;
  will-change: transform;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__group {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding-right: 0;
  flex-shrink: 0;
}
.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: var(--s-5);
  padding-right: var(--s-7);
  font-family: var(--f-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--c-gold);
  text-transform: uppercase;
  letter-spacing: 0.16em;
}
.marquee__item svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-left: var(--s-5);
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---------- 10. THREE PILLARS ---------- */
.pillars {
  position: relative;
  background-color: var(--c-warm-white);
}
.pillars__head {
  text-align: center;
  margin-bottom: var(--s-10);
  max-width: 720px;
  margin-inline: auto;
}
.pillars__head .script {
  display: block;
  font-size: 28px;
  color: var(--c-coral);
  margin-bottom: var(--s-3);
}
.pillars__head h2 {
  font-family: var(--f-display);
  font-size: 40px;
  font-weight: 700;
  line-height: 1.1;
}
@media (min-width: 768px) { .pillars__head h2 { font-size: 52px; } }

.pillars__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-9);
}
@media (min-width: 768px) {
  .pillars__grid {
    grid-template-columns: 1fr auto 1fr auto 1fr;
    gap: var(--s-8);
    align-items: start;
  }
}

.pillar {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-5);
  text-align: left;
}
.pillar__svg {
  width: 72px;
  height: 72px;
  color: var(--c-brown);
}
.pillar__svg svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pillar__heading {
  font-family: var(--f-display);
  font-size: 28px;
  font-weight: 700;
  color: var(--c-black-off);
}
.pillar__body {
  font-family: var(--f-body);
  font-size: 16px;
  color: rgba(44, 26, 14, 0.78);
  line-height: 1.85;
}
.pillar__divider {
  display: none;
  width: 32px;
  height: 80px;
  align-self: center;
  margin-top: var(--s-8);
}
@media (min-width: 768px) { .pillar__divider { display: block; } }
.pillar__divider svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: rgba(107, 124, 58, 0.5);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- 11. INTERACTIVE MENU PREVIEW ---------- */
.menu-preview {
  background-color: var(--c-pale-tan);
  position: relative;
}
.menu-preview__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-8);
  align-items: stretch;
}
@media (min-width: 1024px) {
  .menu-preview__inner { grid-template-columns: 5fr 7fr; gap: var(--s-9); align-items: center; }
}

.menu-preview__head .section-heading { margin-bottom: var(--s-5); }

.menu-preview__cats {
  display: flex;
  flex-direction: column;
  margin-block: var(--s-7);
  border-top: 1px solid rgba(44,26,14,0.12);
}
.cat-row {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-5) var(--s-5) var(--s-5) var(--s-6);
  border-bottom: 1px solid rgba(44,26,14,0.12);
  cursor: pointer;
  position: relative;
  transition: padding-left var(--d-mid) var(--ease-primary);
}
.cat-row::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background-color: var(--c-coral);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--d-mid) var(--ease-primary);
}
.cat-row:hover,
.cat-row.is-active {
  padding-left: var(--s-7);
}
.cat-row:hover::before,
.cat-row.is-active::before { transform: scaleY(1); }
.cat-row__name {
  font-family: var(--f-display);
  font-size: 26px;
  font-weight: 600;
  color: var(--c-black-off);
  transition: font-weight var(--d-quick);
}
.cat-row.is-active .cat-row__name { font-weight: 700; color: var(--c-coral-dark); }
.cat-row__desc {
  font-family: var(--f-body);
  font-size: 15px;
  color: rgba(44, 26, 14, 0.7);
  line-height: 1.6;
}

.menu-preview__panel {
  position: relative;
  background-color: var(--c-tan-muted);
  height: 480px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.menu-preview__illus {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  opacity: 0;
  transition: opacity 350ms var(--ease-primary);
}
.menu-preview__illus.is-active { opacity: 1; }
.menu-preview__illus svg {
  width: 100%;
  height: 100%;
  max-width: 380px;
  max-height: 380px;
  fill: none;
  stroke: var(--c-brown);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.menu-preview__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* ---------- 12. CHEF QUOTE SECTION ---------- */
.chef-quote {
  position: relative;
  overflow: hidden;
  padding-block: var(--s-11);
}
.chef-quote__watermark {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-script);
  font-size: 200px;
  color: rgba(255, 253, 248, 0.03);
  z-index: var(--z-bg);
  pointer-events: none;
  white-space: nowrap;
}
@media (min-width: 768px) { .chef-quote__watermark { font-size: 320px; } }

.chef-quote__inner {
  position: relative;
  z-index: var(--z-content);
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
  padding: var(--s-8) var(--s-5);
}
.chef-quote__mark {
  position: absolute;
  top: -20px;
  left: -10px;
  font-family: var(--f-display);
  font-size: 120px;
  color: rgba(212, 160, 23, 0.15);
  font-style: italic;
  line-height: 1;
  pointer-events: none;
}
@media (min-width: 768px) { .chef-quote__mark { font-size: 160px; left: -40px; top: -30px; } }

.chef-quote__text {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 24px;
  line-height: 1.55;
  color: var(--c-cream);
  font-weight: 500;
  margin-bottom: var(--s-7);
  position: relative;
  z-index: var(--z-overlay);
}
@media (min-width: 768px) { .chef-quote__text { font-size: 34px; } }
.chef-quote__text .word {
  display: inline-block;
  margin-right: 0.25em;
}

.chef-quote__attr {
  font-family: var(--f-body);
  font-size: 15px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-gold);
  font-weight: 500;
}

/* ---------- 13. STATS ---------- */
.stats {
  background-color: var(--c-cream);
}
.stats__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-9);
  text-align: center;
}
@media (min-width: 768px) {
  .stats__grid { grid-template-columns: repeat(3, 1fr); gap: var(--s-7); }
}
.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-4);
  padding-inline: var(--s-5);
  position: relative;
}
.stat:not(:last-child)::after {
  content: '';
  display: none;
  position: absolute;
  right: 0;
  top: 22%; bottom: 22%;
  width: 1px;
  background-color: rgba(44, 26, 14, 0.12);
}
@media (min-width: 768px) { .stat:not(:last-child)::after { display: block; } }
.stat__svg {
  width: 32px;
  height: 32px;
  color: var(--c-olive);
}
.stat__svg svg {
  width: 100%; height: 100%;
  fill: none; stroke: currentColor;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.stat__number {
  font-family: var(--f-display);
  font-size: 64px;
  font-weight: 900;
  color: var(--c-coral);
  line-height: 1;
  margin-block: var(--s-3);
}
@media (min-width: 768px) { .stat__number { font-size: 96px; } }
.stat__label {
  font-family: var(--f-body);
  font-size: 14px;
  color: rgba(44, 26, 14, 0.65);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
  max-width: 240px;
  line-height: 1.5;
}

/* ---------- 14. LOCATION ---------- */
.location {
  background-color: var(--c-warm-white);
}
.location__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-9);
  align-items: start;
}
@media (min-width: 1024px) {
  .location__grid { grid-template-columns: 5fr 7fr; gap: var(--s-9); }
}

.location__pin {
  width: 42px; height: 42px;
  margin-bottom: var(--s-5);
  color: var(--c-coral);
}
.location__pin svg {
  width: 100%; height: 100%;
  fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}

.hours-table { display: flex; flex-direction: column; }
.hours-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-5);
  padding: var(--s-5) 0;
  border-bottom: 1px dashed rgba(44, 26, 14, 0.18);
}
.hours-row:last-child { border-bottom: 0; }
.hours-row__day {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 18px;
  color: var(--c-black-off);
}
.hours-row__time {
  font-family: var(--f-body);
  font-size: 16px;
  color: var(--c-brown);
}
.hours-row--closed .hours-row__time {
  color: var(--c-coral);
  font-weight: 600;
}
.hours-note {
  font-family: var(--f-body);
  font-size: 13px;
  font-style: italic;
  color: rgba(44, 26, 14, 0.6);
  margin-top: var(--s-5);
}

.address-block {
  margin-top: var(--s-7);
  padding-top: var(--s-7);
  border-top: 1px dashed rgba(44, 26, 14, 0.18);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  font-family: var(--f-body);
  font-size: 16px;
}
.address-block a {
  color: var(--c-brown);
  border-bottom: 1px solid transparent;
  transition: border-color var(--d-quick), color var(--d-quick);
}
.address-block a:hover { color: var(--c-coral); border-bottom-color: var(--c-coral); }
.address-block .phone-link { color: var(--c-coral); font-weight: 500; }

.parking-note {
  font-family: var(--f-body);
  font-size: 14px;
  font-style: italic;
  color: rgba(44, 26, 14, 0.6);
  margin-top: var(--s-5);
}

.map-frame {
  width: 100%;
  height: 380px;
  border: 2px solid var(--c-tan-muted);
  background-color: var(--c-tan-muted);
}
@media (min-width: 1024px) { .map-frame { height: 480px; } }

/* ---------- 15. PAGE HEROES (non-home) ---------- */
.page-hero {
  position: relative;
  padding-top: calc(var(--nav-h-m) + var(--s-9));
  padding-bottom: var(--s-9);
  overflow: hidden;
  min-height: 320px;
}
@media (min-width: 768px) { .page-hero { padding-top: calc(var(--nav-h-d) + var(--s-9)); } }
.page-hero--cream { background-color: var(--c-cream); }
.page-hero--dark  { background-color: var(--c-brown); color: var(--c-cream); }
.page-hero--dark h1 { color: var(--c-cream); }
.page-hero--dark .section-sub,
.page-hero--dark .page-hero__sub { color: var(--c-tan-muted); }

.page-hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-8);
  align-items: center;
  position: relative;
  z-index: var(--z-content);
}
@media (min-width: 1024px) {
  .page-hero__inner--split { grid-template-columns: 60% 40%; }
  .page-hero__inner--split-narrow { grid-template-columns: 65% 35%; }
}

.page-hero__h1 {
  font-family: var(--f-display);
  font-size: 52px;
  font-weight: 900;
  line-height: 1.02;
  margin-bottom: var(--s-5);
  color: var(--c-black-off);
  letter-spacing: -0.01em;
}
@media (min-width: 768px) { .page-hero__h1 { font-size: 72px; } }
@media (min-width: 1024px) { .page-hero__h1 { font-size: 96px; } }
.page-hero--dark .page-hero__h1 { color: var(--c-cream); }

.page-hero__sub {
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.75;
  max-width: 560px;
  color: var(--c-brown);
  opacity: 0.85;
}
.page-hero--dark .page-hero__sub { color: var(--c-tan-muted); opacity: 1; }

.page-hero__canvas-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1/1;
  max-height: 400px;
}
.page-hero__canvas { width: 100% !important; height: 100% !important; }

.page-hero__decor-bottom {
  position: absolute;
  bottom: -20px;
  left: -20px;
  right: -20px;
  height: 80px;
  pointer-events: none;
  opacity: 0.18;
  z-index: var(--z-bg);
}
.page-hero__decor-bottom svg {
  width: 100%; height: 100%;
  fill: none; stroke: var(--c-gold);
  stroke-width: 1.5; stroke-linecap: round;
}

/* ---------- 16. MENU PAGE ---------- */
.menu-banner {
  background-color: var(--c-coral);
  padding: var(--s-6) var(--s-5);
  text-align: center;
}
.menu-banner__text {
  font-family: var(--f-script);
  font-size: 22px;
  color: var(--c-warm-white);
  line-height: 1.5;
  letter-spacing: 0.02em;
}
@media (min-width: 768px) { .menu-banner__text { font-size: 26px; } }

.menu-section { padding-block: var(--s-10); position: relative; }
@media (max-width: 767px) { .menu-section { padding-block: var(--s-9); } }

.menu-section__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-8);
  align-items: start;
}
@media (min-width: 1024px) {
  .menu-section__inner { grid-template-columns: 2fr 3fr; gap: var(--s-9); }
  .menu-section__inner--reverse { grid-template-columns: 3fr 2fr; direction: rtl; }
  .menu-section__inner--reverse > * { direction: ltr; }
}

.menu-section__visual {
  position: sticky;
  top: calc(var(--nav-h-d) + var(--s-7));
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
}
@media (max-width: 1023px) { .menu-section__visual { display: none; } }

.menu-section__photo {
  width: 100%;
  aspect-ratio: 4/5;
  overflow: hidden;
  box-shadow: var(--sh-lg);
}
.menu-section__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.menu-section__mini-canvas {
  width: 100%;
  height: 200px;
  position: relative;
}
.menu-section__mini-canvas canvas {
  width: 100% !important; height: 100% !important;
}

.menu-section__label {
  font-family: var(--f-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-coral);
  margin-bottom: var(--s-4);
  display: block;
}

.menu-section__title {
  font-family: var(--f-display);
  font-size: 48px;
  font-weight: 900;
  margin-bottom: var(--s-3);
  color: var(--c-black-off);
}
@media (min-width: 768px) { .menu-section__title { font-size: 64px; } }

.menu-list { display: flex; flex-direction: column; }

.menu-item {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: var(--s-5);
  align-items: baseline;
  padding: var(--s-6) var(--s-5);
  border-bottom: 1px dashed rgba(44, 26, 14, 0.15);
  position: relative;
  transition: background-color 250ms var(--ease-primary);
}
.menu-item:hover {
  background-color: var(--c-row-hover);
}
.menu-item:hover .menu-item__price {
  transform: translateX(6px);
}
.menu-item:hover .menu-item__olive {
  opacity: 1;
  transform: translateX(0);
}
.menu-item__num {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 14px;
  color: rgba(44, 26, 14, 0.4);
  font-weight: 500;
}
.menu-item__name {
  font-family: var(--f-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--c-black-off);
  margin-bottom: var(--s-2);
}
.menu-item__desc {
  font-family: var(--f-body);
  font-size: 15px;
  line-height: 1.6;
  color: rgba(44, 26, 14, 0.6);
}
.menu-item__price {
  font-family: var(--f-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--c-gold);
  white-space: nowrap;
  transition: transform 250ms var(--ease-primary);
  position: relative;
}
.menu-item__olive {
  position: absolute;
  right: -28px;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translate(-8px, -50%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms var(--ease-primary), transform 200ms var(--ease-primary);
}
.menu-item__olive svg { width: 100%; height: 100%; }

.menu-item--simple { grid-template-columns: 1fr auto; }

/* Dark menu variant — Dessert section */
.dessert-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-7);
}
@media (min-width: 768px) {
  .dessert-grid {
    grid-template-columns: 60% 40%;
    grid-template-rows: 1fr 1fr;
    gap: var(--s-7);
  }
  .dessert-card--feature {
    grid-row: 1 / 3;
  }
}
.dessert-card {
  position: relative;
  padding: var(--s-8) var(--s-7);
  background-color: rgba(255, 253, 248, 0.04);
  border: 1px solid rgba(232, 220, 200, 0.15);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--s-5);
  min-height: 200px;
}
.dessert-card--feature { min-height: 320px; }
.dessert-card__name {
  font-family: var(--f-display);
  font-size: 26px;
  font-weight: 700;
  color: var(--c-cream);
  margin-bottom: var(--s-3);
}
.dessert-card--feature .dessert-card__name { font-size: 40px; }
.dessert-card__desc {
  font-family: var(--f-body);
  font-size: 15px;
  line-height: 1.7;
  color: var(--c-tan-muted);
}
.dessert-card--feature .dessert-card__desc { font-size: 17px; }
.dessert-card__price {
  font-family: var(--f-display);
  font-size: 28px;
  font-weight: 700;
  color: var(--c-gold);
}
.dessert-card--feature .dessert-card__price { font-size: 40px; }
.dessert-card__canvas {
  position: absolute;
  top: var(--s-5); right: var(--s-5);
  width: 90px; height: 90px;
}
.dessert-card__canvas canvas {
  width: 100% !important; height: 100% !important;
}

.menu-footnote {
  font-family: var(--f-body);
  font-style: italic;
  font-size: 17px;
  line-height: 1.85;
  color: rgba(44, 26, 14, 0.65);
  max-width: 680px;
  margin-inline: auto;
  text-align: center;
  padding-block: var(--s-7);
}

/* ---------- 17. ABOUT PAGE ---------- */
.story {
  background-color: var(--c-warm-white);
}
.story__inner {
  max-width: 720px;
  margin-inline: auto;
}
.story p {
  font-family: var(--f-body);
  font-size: 18px;
  line-height: 1.95;
  color: var(--c-brown);
  margin-bottom: var(--s-7);
}
.story__pullquote {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 26px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--c-gold);
  margin-block: var(--s-9);
  padding: var(--s-5) 0 var(--s-5) var(--s-7);
  border-left: 3px solid var(--c-gold);
}
@media (min-width: 768px) { .story__pullquote { font-size: 30px; } }

.timeline {
  margin-block: var(--s-10);
  padding: var(--s-7) 0;
  width: 100%;
}
.timeline svg {
  width: 100%; height: auto; max-height: 220px;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.values {
  background-color: var(--c-brown);
  color: var(--c-tan-muted);
  overflow: hidden;
}
.values__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-8);
}
@media (min-width: 768px) {
  .values__grid { grid-template-columns: repeat(3, 1fr); gap: var(--s-7); }
}
.value {
  position: relative;
  padding: var(--s-7) var(--s-5);
}
.value__num {
  position: absolute;
  top: -12px; left: -8px;
  font-family: var(--f-display);
  font-style: italic;
  font-size: 120px;
  font-weight: 900;
  color: rgba(212, 160, 23, 0.18);
  line-height: 1;
  pointer-events: none;
  z-index: var(--z-bg);
}
@media (min-width: 768px) { .value__num { font-size: 160px; } }
.value__h3 {
  font-family: var(--f-display);
  font-size: 28px;
  font-weight: 700;
  color: var(--c-cream);
  margin-bottom: var(--s-4);
  position: relative;
  z-index: var(--z-content);
}
.value__body {
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.85;
  color: var(--c-tan-muted);
  position: relative;
  z-index: var(--z-content);
}

.chef-banner {
  background-color: var(--c-pale-tan);
  padding-block: var(--s-11);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.chef-banner__inner {
  max-width: 880px;
  margin-inline: auto;
  position: relative;
  z-index: var(--z-content);
}
.chef-banner__svg {
  width: 100%;
  max-width: 500px;
  margin-inline: auto;
  margin-bottom: var(--s-8);
  color: var(--c-olive);
}
.chef-banner__svg svg {
  width: 100%; height: auto;
  fill: none; stroke: currentColor;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.chef-banner__quote {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 32px;
  font-weight: 500;
  color: var(--c-brown);
  line-height: 1.4;
  margin-bottom: var(--s-5);
}
@media (min-width: 768px) { .chef-banner__quote { font-size: 48px; } }
.chef-banner__attr {
  font-family: var(--f-body);
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-coral);
  font-weight: 600;
}

/* ---------- 18. CATERING PAGE ---------- */
.tier-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-7);
  margin-bottom: var(--s-8);
}
@media (min-width: 768px) {
  .tier-grid { grid-template-columns: 1fr 1fr; gap: var(--s-8); }
}
.tier {
  background-color: var(--c-warm-white);
  border-top: 3px solid var(--c-coral);
  padding: var(--s-9) var(--s-7);
  position: relative;
  box-shadow: var(--sh-sm);
  transition: transform var(--d-mid) var(--ease-primary), box-shadow var(--d-mid);
}
.tier:hover {
  transform: translateY(-6px);
  box-shadow: var(--sh-md);
}
.tier__count {
  font-family: var(--f-script);
  font-size: 30px;
  color: var(--c-olive);
  margin-bottom: var(--s-3);
}
.tier__heading {
  font-family: var(--f-display);
  font-size: 28px;
  font-weight: 700;
  color: var(--c-black-off);
  margin-bottom: var(--s-6);
}
.tier__price {
  font-family: var(--f-display);
  font-size: 88px;
  font-weight: 900;
  color: var(--c-gold);
  line-height: 1;
  margin-bottom: var(--s-3);
}
.tier__price-unit {
  font-family: var(--f-body);
  font-size: 16px;
  font-weight: 500;
  color: rgba(44, 26, 14, 0.7);
  margin-left: var(--s-3);
  letter-spacing: 0.02em;
}
.tier__detail {
  font-family: var(--f-body);
  font-size: 15px;
  line-height: 1.75;
  color: rgba(44, 26, 14, 0.78);
}

.policy-notice {
  border-left: 2px solid var(--c-coral);
  background-color: rgba(232, 92, 58, 0.06);
  padding: var(--s-5) var(--s-6);
  font-family: var(--f-body);
  font-style: italic;
  font-size: 15px;
  color: var(--c-coral);
  text-align: center;
  max-width: 640px;
  margin-inline: auto;
}

.cat-list {
  max-width: 640px;
  margin-inline: auto;
}
.cat-item {
  padding: var(--s-5) var(--s-3);
  border-bottom: 1px dashed rgba(44, 26, 14, 0.15);
}
.cat-item__name {
  font-family: var(--f-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--c-black-off);
  margin-bottom: var(--s-3);
}
.cat-item__desc {
  font-family: var(--f-body);
  font-size: 15px;
  line-height: 1.6;
  color: rgba(44, 26, 14, 0.65);
}

.steps-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-9);
}
@media (min-width: 768px) {
  .steps-grid { grid-template-columns: repeat(3, 1fr); gap: var(--s-7); }
}
.step {
  position: relative;
  padding-top: var(--s-9);
}
.step__num {
  position: absolute;
  top: -14px; left: -10px;
  font-family: var(--f-display);
  font-size: 100px;
  font-weight: 900;
  color: rgba(232, 92, 58, 0.18);
  line-height: 1;
  z-index: var(--z-bg);
  pointer-events: none;
}
@media (min-width: 768px) { .step__num { font-size: 120px; } }
.step__heading {
  font-family: var(--f-display);
  font-size: 26px;
  font-weight: 700;
  color: var(--c-black-off);
  margin-bottom: var(--s-4);
  position: relative; z-index: var(--z-content);
}
.step__body {
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.75;
  color: rgba(44, 26, 14, 0.75);
  position: relative; z-index: var(--z-content);
}
.step__body a {
  color: var(--c-coral);
  font-weight: 600;
}

/* ---------- 19. CONTACT PAGE ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-9);
  align-items: start;
}
@media (min-width: 1024px) {
  .contact-grid { grid-template-columns: 5fr 7fr; gap: var(--s-9); }
}

.contact-block { margin-bottom: var(--s-7); }
.contact-block:last-child { margin-bottom: 0; }
.contact-block__heading {
  font-family: var(--f-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--c-black-off);
  margin-bottom: var(--s-4);
  display: inline-block;
  border-bottom: 2px solid var(--c-coral);
  padding-bottom: var(--s-3);
}
.contact-block p {
  font-family: var(--f-body);
  font-size: 15px;
  line-height: 1.75;
  color: var(--c-brown);
}
.contact-block a {
  color: var(--c-brown);
  border-bottom: 1px solid transparent;
  transition: color var(--d-quick), border-color var(--d-quick);
  font-weight: 500;
}
.contact-block a:hover {
  color: var(--c-coral);
  border-bottom-color: var(--c-coral);
}
.contact-phones {
  display: flex; flex-direction: column;
  gap: var(--s-3);
  margin-top: var(--s-3);
}
.contact-phone {
  font-family: var(--f-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--c-coral) !important;
  letter-spacing: 0.02em;
}

/* ---------- 20. WIZARD FORM ---------- */
.wizard-wrap {
  background-color: var(--c-pale-tan);
}
.wizard {
  max-width: 720px;
  margin-inline: auto;
}
.wizard__head {
  text-align: center;
  margin-bottom: var(--s-8);
}
.wizard__progress {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-4);
  margin-bottom: var(--s-9);
}
.wizard__step-num {
  font-family: var(--f-display);
  font-size: 24px;
  font-weight: 700;
  color: rgba(44, 26, 14, 0.3);
  transition: color var(--d-mid);
  letter-spacing: 0.04em;
}
.wizard__step-num.is-current { color: var(--c-coral); }
.wizard__step-num.is-done { color: var(--c-gold); }
.wizard__step-divider {
  width: 32px;
  height: 1px;
  background-color: rgba(44, 26, 14, 0.18);
}

.wizard__steps {
  position: relative;
  overflow: hidden;
}
.wizard__step {
  display: none;
  flex-direction: column;
  gap: var(--s-6);
}
.wizard__step.is-current { display: flex; }
.wizard__step-label {
  font-family: var(--f-body);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-coral);
  font-weight: 600;
}
.wizard__step-heading {
  font-family: var(--f-display);
  font-size: 32px;
  font-weight: 700;
  color: var(--c-black-off);
  margin-bottom: var(--s-3);
}
@media (min-width: 768px) { .wizard__step-heading { font-size: 40px; } }

.field {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.field label {
  font-family: var(--f-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--c-brown);
  letter-spacing: 0.04em;
}
.field input,
.field textarea,
.field select {
  width: 100%;
  font-family: var(--f-body);
  font-size: 16px;
  color: var(--c-brown);
  background-color: var(--c-warm-white);
  border: 1.5px solid rgba(44, 26, 14, 0.18);
  border-radius: 3px;
  padding: 14px 16px;
  transition: border-color 250ms, box-shadow 250ms;
}
.field textarea { resize: vertical; min-height: 140px; font-family: var(--f-body); }
.field select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%232C1A0E' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 44px;
}
.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--c-coral);
  box-shadow: 0 0 0 4px rgba(232, 92, 58, 0.10);
}
.field input::placeholder,
.field textarea::placeholder {
  color: rgba(44, 26, 14, 0.35);
  font-style: italic;
}

/* Visual radio tiles */
.radio-tiles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-4);
}
@media (min-width: 600px) {
  .radio-tiles { grid-template-columns: repeat(4, 1fr); }
}
.radio-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--s-3);
  padding: var(--s-6) var(--s-4);
  background-color: var(--c-warm-white);
  border: 1.5px solid rgba(44, 26, 14, 0.18);
  border-radius: 3px;
  cursor: pointer;
  transition: border-color 200ms, background-color 200ms, transform 200ms;
}
.radio-tile:hover { transform: translateY(-2px); border-color: rgba(232, 92, 58, 0.4); }
.radio-tile input { position: absolute; opacity: 0; pointer-events: none; }
.radio-tile.is-selected {
  background-color: var(--c-pale-tan);
  border-color: var(--c-coral);
  border-width: 2px;
}
.radio-tile__svg {
  width: 32px; height: 32px;
  color: var(--c-brown);
}
.radio-tile__svg svg {
  width: 100%; height: 100%;
  fill: none; stroke: currentColor;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.radio-tile.is-selected .radio-tile__svg { color: var(--c-coral); }
.radio-tile__label {
  font-family: var(--f-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--c-brown);
  line-height: 1.3;
}

/* Conditional fields */
.field--conditional { display: none; }
.field--conditional.is-visible { display: flex; }

/* Checkbox */
.field--check {
  flex-direction: row;
  align-items: flex-start;
  gap: var(--s-4);
}
.field--check label {
  font-weight: 400;
  font-size: 15px;
  letter-spacing: 0;
  cursor: pointer;
  flex: 1;
}
.checkbox {
  position: relative;
  width: 18px; height: 18px;
  flex-shrink: 0;
  cursor: pointer;
  margin-top: 2px;
}
.checkbox input {
  position: absolute;
  opacity: 0;
  inset: 0;
  cursor: pointer;
}
.checkbox__box {
  width: 100%; height: 100%;
  border: 1.5px solid rgba(44, 26, 14, 0.4);
  border-radius: 2px;
  background-color: var(--c-warm-white);
  transition: background-color 200ms, border-color 200ms;
  display: flex; align-items: center; justify-content: center;
}
.checkbox input:checked ~ .checkbox__box {
  background-color: var(--c-coral);
  border-color: var(--c-coral);
}
.checkbox__box::after {
  content: '';
  width: 10px; height: 6px;
  border-left: 2px solid white;
  border-bottom: 2px solid white;
  transform: rotate(-45deg) translate(1px, -1px) scale(0);
  transition: transform 200ms var(--ease-spring);
}
.checkbox input:checked ~ .checkbox__box::after {
  transform: rotate(-45deg) translate(1px, -1px) scale(1);
}

.wizard__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  margin-top: var(--s-6);
}
.wizard__back {
  font-family: var(--f-body);
  font-size: 15px;
  color: var(--c-brown);
  font-weight: 500;
  cursor: pointer;
  border-bottom: 1px solid transparent;
  padding: 12px 0;
  transition: color var(--d-quick), border-color var(--d-quick);
}
.wizard__back:hover { color: var(--c-coral); border-bottom-color: var(--c-coral); }
@media (max-width: 600px) {
  .wizard__nav .btn--full { flex: 1; }
}

/* Success state */
.wizard__success {
  display: none;
  text-align: center;
  padding: var(--s-9) var(--s-5);
}
.wizard__success.is-visible { display: block; }
.wizard__success-svg {
  width: 140px; height: 140px;
  margin: 0 auto var(--s-7);
  color: var(--c-coral);
}
.wizard__success-svg svg {
  width: 100%; height: 100%;
  fill: none; stroke: currentColor;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.wizard__success-h {
  font-family: var(--f-display);
  font-size: 36px;
  font-weight: 700;
  color: var(--c-black-off);
  margin-bottom: var(--s-4);
}
.wizard__success-p {
  font-family: var(--f-body);
  font-size: 18px;
  color: var(--c-brown);
  margin-bottom: var(--s-7);
}
.wizard__success-link {
  font-family: var(--f-body);
  font-size: 16px;
  font-weight: 600;
  color: var(--c-coral);
  border-bottom: 2px solid var(--c-coral);
  padding-bottom: 2px;
}

/* ---------- 21. FOOTER ---------- */
.site-footer {
  background-color: var(--c-black-off);
  color: var(--c-tan-muted);
  position: relative;
  overflow: hidden;
  padding: var(--s-10) 0 var(--s-6);
  background-image:
    repeating-linear-gradient(45deg, transparent 0 1px, rgba(255,253,248,0.02) 1px 2px);
}
.footer-wave {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 24px;
  pointer-events: none;
}
.footer-wave svg {
  width: 100%; height: 100%;
  fill: none; stroke: var(--c-gold);
  stroke-width: 2; stroke-linecap: round;
  opacity: 0.35;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-8);
  margin-bottom: var(--s-9);
  position: relative;
  z-index: var(--z-content);
}
@media (min-width: 600px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .footer-grid { grid-template-columns: 1.4fr 0.8fr 0.8fr 1fr; gap: var(--s-7); }
}

.footer-col h4 {
  font-family: var(--f-body);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--c-gold);
  font-weight: 600;
  margin-bottom: var(--s-5);
}

.footer-logo {
  height: 72px;
  width: auto;
  margin-bottom: var(--s-5);
  filter: drop-shadow(0 0 16px rgba(212, 160, 23, 0.3));
}
.footer-tag {
  font-family: var(--f-body);
  font-style: italic;
  font-size: 14px;
  color: rgba(232, 220, 200, 0.65);
  margin-bottom: var(--s-5);
}
.footer-eco {
  font-family: var(--f-body);
  font-size: 13px;
  line-height: 1.7;
  color: rgba(232, 220, 200, 0.4);
  max-width: 260px;
  margin-bottom: var(--s-5);
}
.footer-social {
  display: flex;
  gap: var(--s-4);
}
.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border: 1px solid rgba(232, 220, 200, 0.25);
  color: rgba(232, 220, 200, 0.7);
  transition: color var(--d-quick), border-color var(--d-quick), background-color var(--d-quick), transform var(--d-quick) var(--ease-spring);
}
.footer-social a:hover {
  color: var(--c-gold);
  border-color: var(--c-gold);
  transform: scale(1.1);
}
.footer-social svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.footer-social .ic-fb { fill: currentColor; stroke: none; }

.footer-links {
  display: flex; flex-direction: column;
  gap: var(--s-4);
}
.footer-links a {
  font-family: var(--f-body);
  font-size: 15px;
  color: rgba(232, 220, 200, 0.7);
  transition: color var(--d-quick);
}
.footer-links a:hover { color: var(--c-gold); }

.footer-contact {
  font-family: var(--f-body);
  font-size: 14px;
  color: rgba(232, 220, 200, 0.7);
  line-height: 1.85;
  display: flex; flex-direction: column;
  gap: var(--s-3);
}
.footer-contact a { color: rgba(232, 220, 200, 0.7); transition: color var(--d-quick); }
.footer-contact a:hover { color: var(--c-gold); }
.footer-phone { color: var(--c-gold) !important; font-weight: 500; }

.footer-doodle {
  position: absolute;
  bottom: -40px; left: 0; right: 0;
  height: 220px;
  pointer-events: none;
  z-index: var(--z-bg);
}
.footer-doodle svg {
  width: 100%; height: 100%;
  fill: none; stroke: rgba(255, 253, 248, 0.045);
  stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round;
}

.footer-bottom {
  padding-top: var(--s-6);
  border-top: 1px solid rgba(232, 220, 200, 0.10);
  text-align: center;
  font-family: var(--f-body);
  font-size: 12px;
  color: rgba(232, 220, 200, 0.4);
  letter-spacing: 0.06em;
  position: relative;
  z-index: var(--z-content);
}

/* ---------- 22. PHOTO FILM STRIP ---------- */
.photo-strip {
  position: relative;
  overflow: hidden;
  height: 240px;
  display: flex;
  align-items: stretch;
  background-color: var(--c-black-off);
  cursor: grab;
}
.photo-strip:active { cursor: grabbing; }
@media (min-width: 768px) { .photo-strip { height: 300px; } }

.photo-strip__track {
  display: flex;
  gap: 6px;
  animation: photo-marquee 140s linear infinite;
  will-change: transform;
  flex-shrink: 0;
}
.photo-strip:hover .photo-strip__track { animation-play-state: paused; }

.photo-strip__img {
  height: 100%;
  width: auto;
  flex-shrink: 0;
  object-fit: cover;
  display: block;
  filter: brightness(0.85) saturate(1.05);
  transition: filter var(--d-slow) var(--ease-primary),
              transform var(--d-slow) var(--ease-primary);
}
.photo-strip__img:hover {
  filter: brightness(1) saturate(1.15);
  transform: scale(1.02);
  z-index: var(--z-content);
  position: relative;
}

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

/* ---------- 23. KITCHEN MOSAIC ---------- */
.kitchen-mosaic {
  background-color: var(--c-warm-white);
}
.kitchen-mosaic__head {
  text-align: center;
  margin-bottom: var(--s-8);
}
.kitchen-mosaic__sub {
  font-family: var(--f-body);
  font-size: 17px;
  color: rgba(44, 26, 14, 0.7);
  line-height: 1.75;
  max-width: 520px;
  margin-inline: auto;
  margin-top: var(--s-5);
}

.mosaic-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 200px;
  gap: 8px;
}
@media (min-width: 768px) {
  .mosaic-grid {
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: 300px 300px;
    gap: 12px;
  }
  .mosaic-grid__item--tall {
    grid-row: 1 / 3;
  }
}
@media (min-width: 1200px) {
  .mosaic-grid {
    grid-template-rows: 340px 340px;
    gap: 14px;
  }
}

.mosaic-grid__item {
  overflow: hidden;
  background-color: var(--c-tan-muted);
  position: relative;
}
.mosaic-grid__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 700ms var(--ease-primary);
}
.mosaic-grid__item:hover img {
  transform: scale(1.06);
}

/* ---------- 24. DESSERT PHOTO PANEL ---------- */
.dessert-panel {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
}
.dessert-panel__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 450ms var(--ease-primary),
              transform 600ms var(--ease-primary);
}
.dessert-panel__img.is-active {
  opacity: 1;
  transform: scale(1);
}

/* ---------- 24b. DARK MENU ITEMS (Dessert section) ---------- */
.menu-list--dark .menu-item--dark {
  border-bottom-color: rgba(232, 220, 200, 0.15);
}
.menu-list--dark .menu-item--dark:hover {
  background-color: rgba(255, 253, 248, 0.05);
}
.menu-section__photo--dark {
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
}

/* ---------- 25. STOREFRONT PHOTO (About hero) ---------- */
.storefront-wrap {
  width: 100%;
  aspect-ratio: 3 / 4;
  max-height: 480px;
  overflow: hidden;
  box-shadow: var(--sh-xl);
}
@media (min-width: 1024px) {
  .storefront-wrap { max-height: 560px; }
}
.storefront-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  image-orientation: from-image;
}

/* ---------- 25. RESPONSIVE FINE-TUNING ---------- */
@media (max-width: 480px) {
  .section-heading { font-size: 36px; }
  .hero__h1 { font-size: 48px; }
  .stat__number { font-size: 56px; }
  .tier__price { font-size: 64px; }
}

/* =================================================================
   26. PRELOADER — cartoon tea-pour animation
   ================================================================= */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background-color: var(--c-coral);
  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='pn'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23pn)'/%3E%3C/svg%3E");
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  overflow: hidden;
  pointer-events: all;
}

.preloader.is-exiting {
  animation: pl-exit 0.8s cubic-bezier(0.4, 0, 1, 1) forwards;
  pointer-events: none;
}
@keyframes pl-exit {
  0%   { opacity: 1; transform: scale(1);    }
  100% { opacity: 0; transform: scale(1.04); }
}

.preloader__scene {
  position: relative;
  width: 240px;
  height: 240px;
}

.preloader__logo-svg {
  width: 240px;
  height: 240px;
  overflow: visible;
}

/* ── Cup — bounces up from below ── */
.pl-cup {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  opacity: 0;
  animation: pl-cup-in 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.25s forwards;
}
@keyframes pl-cup-in {
  0%   { opacity: 0; transform: scaleY(0.08) translateY(12px); }
  50%  { opacity: 1; }
  100% { opacity: 1; transform: scaleY(1) translateY(0); }
}

/* ── Kettle — swings in then gently wobbles while pouring ── */
.pl-jar {
  opacity: 0;
  transform-box: view-box;
  animation:
    pl-jar-in   0.72s cubic-bezier(0.34, 1.28, 0.64, 1) 0.88s forwards,
    pl-jar-pour 2.6s  ease-in-out                        1.66s infinite;
}
@keyframes pl-jar-in {
  0%   { opacity: 0; transform: translate(220px, 20px) rotate(-5deg); }
  50%  { opacity: 1; }
  100% { opacity: 1; transform: translate(175px, 70px) rotate(-38deg); }
}
@keyframes pl-jar-pour {
  0%, 100% { transform: translate(175px, 70px) rotate(-38deg); }
  38%       { transform: translate(174px, 72px) rotate(-40deg); }
  65%       { transform: translate(176px, 69px) rotate(-37deg); }
}

/* ── Pouring stream — draws in then stays solid ── */
.pl-stream {
  opacity: 0;
  stroke-dasharray: 90 90;
  stroke-dashoffset: 90;
  animation:
    pl-stream-show 0.05s linear                  1.54s forwards,
    pl-stream-draw 0.44s cubic-bezier(0.4,0,0.6,1) 1.54s forwards;
}
@keyframes pl-stream-show { to { opacity: 1; } }
@keyframes pl-stream-draw { to { stroke-dashoffset: 0; } }

/* ── Flowing shimmer dashes on stream ── */
.pl-stream-flow {
  opacity: 0;
  animation:
    pl-flow-show 0.2s  linear 1.98s forwards,
    pl-flow      0.48s linear 1.98s infinite;
}
@keyframes pl-flow-show { to { opacity: 1; } }
@keyframes pl-flow      { to { stroke-dashoffset: -18; } }

/* ── Splash ring at cup entry ── */
.pl-splash {
  transform-box: fill-box;
  transform-origin: center;
  animation: pl-splash-anim 0.8s ease-in-out 2.1s infinite;
}
@keyframes pl-splash-anim {
  0%, 100% { opacity: 0;    transform: scale(0.3); }
  35%, 65% { opacity: 0.85; transform: scale(1.6); }
}

/* ── Droplets that hop off the splash ── */
.pl-drop {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  animation: pl-drop-anim 0.8s ease-in-out infinite;
}
.pl-drop-a { animation-delay: 2.15s; }
.pl-drop-b { animation-delay: 2.38s; }
.pl-drop-c { animation-delay: 2.62s; }
@keyframes pl-drop-anim {
  0%   { opacity: 0; transform: translate(0, 0)    scale(1);   }
  20%  { opacity: 1; transform: translate(0, -4px) scale(1);   }
  60%  { opacity: 0; transform: translate(0, 4px)  scale(0.4); }
  100% { opacity: 0; transform: translate(0, 0)    scale(0);   }
}

/* ── Tea surface slosh ── */
.pl-tea-surface {
  transform-box: fill-box;
  transform-origin: center;
  animation: pl-slosh 2.1s ease-in-out 1.7s infinite;
}
@keyframes pl-slosh {
  0%, 100% { transform: scaleX(1)    scaleY(1);    }
  50%       { transform: scaleX(1.05) scaleY(1.14); }
}

/* ── Steam wisps rising from cup ── */
.pl-steam {
  opacity: 0;
  stroke-dasharray: 32 32;
  stroke-dashoffset: 32;
  animation:
    pl-steam-draw  1.1s ease-out 0.55s forwards,
    pl-steam-float 2.8s ease-in-out 1.8s infinite;
}
.pl-steam-b { animation-delay: 0.75s, 2.05s; }
.pl-steam-c { animation-delay: 0.95s, 2.30s; }
@keyframes pl-steam-draw {
  0%   { opacity: 0; stroke-dashoffset: 32; }
  40%  { opacity: 0.55; }
  100% { opacity: 0.5; stroke-dashoffset: 0; }
}
@keyframes pl-steam-float {
  0%, 100% { opacity: 0.45; transform: translateY(0); }
  50%       { opacity: 0.15; transform: translateY(-14px); }
}

/* Tagline */
.preloader__tagline {
  font-family: var(--f-script);
  font-size: 22px;
  color: rgba(255, 253, 248, 0.92);
  text-align: center;
  letter-spacing: 0.01em;
  text-shadow: 0 2px 14px rgba(44, 26, 14, 0.4);
  margin: 0;
  opacity: 0;
  transform: translateY(14px);
  animation: pl-tagline 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94) 2.2s forwards;
}
@keyframes pl-tagline {
  to { opacity: 1; transform: translateY(0); }
}

/* Progress bar */
.preloader__bar {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  width: 0%;
  background: linear-gradient(
    90deg,
    rgba(255, 253, 248, 0.15),
    rgba(255, 253, 248, 0.65) 50%,
    rgba(255, 253, 248, 0.15)
  );
  animation: pl-bar 2.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.15s forwards;
}
@keyframes pl-bar {
  0%   { width: 0%;   }
  50%  { width: 70%;  }
  82%  { width: 88%;  }
  100% { width: 100%; }
}