/* ============================================================
   Restaurant Template — warm modern bistro
   Fonts: Fraunces (headings) + Karla (body), Google Fonts

   RE-SKIN NOTE: to rebrand for a client, edit the VALUES in
   :root below and nothing else. Keep every variable NAME.
   ============================================================ */

:root {
  /* --- surfaces: cream / menu paper --- */
  --bg: #faf6ef;
  --surface: #fffdf8;
  --surface-2: #f3ecdf;
  --line: rgba(43, 37, 32, 0.10);
  --line-strong: rgba(43, 37, 32, 0.20);

  /* --- text --- */
  --text: #2b2520;
  --muted: #6d6259;

  /* --- accents: burnt terracotta (appetite) + deep olive (garden) --- */
  --accent: #b34724;
  --accent-dark: #93381b;
  --accent-2: #3f5a41;
  --accent-soft: rgba(179, 71, 36, 0.10);
  --accent-line: rgba(179, 71, 36, 0.40);
  /* text colour that sits ON --accent — must stay AA (4.5:1).
     NOTE: this accent is DARK, so --on-accent is light. If you re-skin to a
     BRIGHT accent (yellow, lime, hot orange), flip this to near-black. */
  --on-accent: #fff9f4;

  --font-head: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Karla', system-ui, sans-serif;
  --wrap: 1180px;
  --radius: 10px;
  --shadow: 0 18px 44px rgba(43, 37, 32, 0.12);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
html:focus-within { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.68;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-head);
  line-height: 1.12;
  letter-spacing: -0.01em;
  font-weight: 600;
  text-wrap: balance;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

::selection { background: var(--accent); color: var(--on-accent); }

/* ---------- skip link ---------- */
.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 200;
  background: var(--accent); color: var(--on-accent); padding: 10px 18px; border-radius: 0 0 10px 0;
  font-weight: 700;
}
.skip-link:focus { left: 0; }

/* ---------- reveal animations ---------- */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  transition-delay: var(--d, 0ms);
  will-change: opacity, transform;
}
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .marquee__track { animation: none !important; }
  .hero__bg img { animation: none !important; transform: none !important; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-body); font-weight: 700; font-size: 0.98rem;
  letter-spacing: 0.01em;
  padding: 15px 30px; border-radius: 999px; border: 1px solid transparent;
  cursor: pointer; transition: transform 0.25s var(--ease), background 0.25s, border-color 0.25s, color 0.25s;
  min-height: 48px;
}
.btn:active { transform: scale(0.97); }
.btn--primary { background: var(--accent); color: var(--on-accent); }
.btn--primary:hover { background: var(--accent-dark); transform: translateY(-2px); }
.btn--ghost { border-color: var(--line-strong); color: var(--text); background: transparent; }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); }
.btn--lg { padding: 18px 36px; font-size: 1.03rem; }
.btn:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--accent-2); outline-offset: 3px; border-radius: 6px;
}

/* ---------- header ---------- */
.header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  transition: background 0.35s var(--ease), border-color 0.35s, box-shadow 0.35s;
  border-bottom: 1px solid transparent;
}
.header.scrolled {
  background: rgba(250, 246, 239, 0.92);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
  box-shadow: 0 8px 26px rgba(43, 37, 32, 0.08);
}
.header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding: 14px 24px; max-width: 1320px; margin: 0 auto;
}

/* Header sits over dark hero art until scrolled — light lockup by default. */
.header .brand__name, .header .header__phone { color: #fdf8f1; transition: color 0.35s; }
.header .brand__tag { color: rgba(253, 248, 241, 0.72); transition: color 0.35s; }
.header .nav a { color: #fdf8f1; transition: color 0.35s; }
.header .nav-toggle { border-color: rgba(253, 248, 241, 0.42); }
.header .nav-toggle span { background: #fdf8f1; }
.header.scrolled .brand__name, .header.scrolled .header__phone, .header.scrolled .nav a { color: var(--text); }
.header.scrolled .brand__tag { color: var(--muted); }
.header.scrolled .nav-toggle { border-color: var(--line-strong); }
.header.scrolled .nav-toggle span { background: var(--text); }

/* ---------- brand: styled text mark (no logo file needed) ---------- */
.brand { display: inline-flex; align-items: center; gap: 12px; flex-shrink: 0; min-height: 44px; }
.brand__mark {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--font-head); font-weight: 600; font-size: 1.02rem; letter-spacing: 0.01em;
  box-shadow: 0 6px 18px rgba(179, 71, 36, 0.28);
}
.brand__text { display: flex; flex-direction: column; line-height: 1.16; }
.brand__name { font-family: var(--font-head); font-weight: 600; font-size: 1.18rem; letter-spacing: -0.01em; }
.brand__tag {
  font-size: 0.64rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted); font-weight: 600;
}

.nav { display: flex; align-items: center; gap: 4px; }
.nav a {
  font-family: var(--font-body); font-weight: 500; font-size: 0.97rem;
  padding: 10px 14px; border-radius: 8px;
  position: relative;
}
.nav a::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 5px; height: 1.5px;
  background: currentColor; border-radius: 2px;
  transform: scaleX(0); transform-origin: left; transition: transform 0.3s var(--ease);
}
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.header__cta { display: flex; align-items: center; gap: 18px; }
.header__phone {
  font-family: var(--font-body); font-weight: 700; font-size: 0.97rem; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.header__cta .btn { padding: 11px 22px; min-height: 44px; }

.nav-toggle {
  display: none; background: none; border: 1px solid var(--line-strong); border-radius: 10px;
  width: 46px; height: 44px; cursor: pointer; align-items: center; justify-content: center; flex-direction: column; gap: 5px;
}
.nav-toggle span { display: block; width: 20px; height: 2px; background: var(--text); transition: transform 0.3s var(--ease), opacity 0.2s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 940px) {
  .nav {
    position: fixed; top: 74px; left: 16px; right: 16px; z-index: 99;
    flex-direction: column; align-items: stretch; gap: 2px;
    background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
    padding: 12px; box-shadow: var(--shadow);
    opacity: 0; transform: translateY(-12px); pointer-events: none;
    transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
  }
  .nav.open { opacity: 1; transform: none; pointer-events: auto; }
  /* inside the dropped panel the background is always cream */
  .header .nav a, .header.scrolled .nav a { color: var(--text); padding: 13px 16px; }
  .nav a::after { display: none; }
  .nav a[aria-current="page"] { background: var(--accent-soft); color: var(--accent); }
  .nav-toggle { display: inline-flex; }
  .header__phone { display: none; }
}
@media (max-width: 560px) {
  .header__cta .btn { display: none; }
  .brand__mark { width: 40px; height: 40px; }
  .brand__name { font-size: 1.05rem; }
}

/* ---------- hero ---------- */
.hero {
  position: relative; display: flex; align-items: flex-end;
  min-height: min(92dvh, 900px); padding: 170px 0 90px; overflow: hidden; isolation: isolate;
  /* lighter accents so type stays AA over the dark scrim */
  --accent: #e07a4f;
  --accent-2: #b8c9a8;
  color: #fdf8f1;
}
.hero--page { min-height: min(58dvh, 600px); padding: 150px 0 64px; }
.hero__bg { position: absolute; inset: 0; z-index: -2; background: #2b2520; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; animation: heroZoom 9s var(--ease) forwards; }
@keyframes heroZoom { from { transform: scale(1.08); } to { transform: scale(1); } }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(28, 23, 19, 0.58) 0%, rgba(28, 23, 19, 0.28) 36%, rgba(28, 23, 19, 0.92) 100%),
    linear-gradient(100deg, rgba(28, 23, 19, 0.86) 6%, rgba(28, 23, 19, 0.18) 66%);
}
.hero__content { max-width: 800px; }
.hero h1 { font-size: clamp(2.6rem, 6vw, 4.4rem); margin-bottom: 22px; font-weight: 600; }
.hero h1 em { font-style: italic; color: var(--accent); font-weight: 500; }
.hero__lede { font-size: clamp(1.05rem, 1.6vw, 1.22rem); color: rgba(253, 248, 241, 0.88); max-width: 640px; margin-bottom: 34px; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 42px; }
.hero .btn--ghost { border-color: rgba(253, 248, 241, 0.45); color: #fdf8f1; }
.hero .btn--ghost:hover { border-color: #fdf8f1; background: rgba(253, 248, 241, 0.10); color: #fdf8f1; }
.hero__trust { display: flex; flex-wrap: wrap; gap: 12px 30px; padding-top: 26px; border-top: 1px solid rgba(253, 248, 241, 0.24); }
.hero__trust li { display: flex; align-items: center; gap: 10px; font-size: 0.94rem; color: rgba(253, 248, 241, 0.88); }
.hero__trust svg { width: 18px; height: 18px; color: var(--accent); flex-shrink: 0; }

/* eyebrow — used on dark hero and on cream sections */
.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-body); font-weight: 700; font-size: 0.8rem;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-2);
  margin-bottom: 20px;
}
.eyebrow::before { content: ""; width: 30px; height: 1.5px; background: var(--accent); border-radius: 2px; flex-shrink: 0; }

/* ---------- sections ---------- */
.section { padding: clamp(72px, 9vw, 120px) 0; position: relative; }
.section--tint { background: var(--surface-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section--tight { padding: clamp(52px, 6vw, 80px) 0; }
.section__head { max-width: 700px; margin-bottom: clamp(40px, 5vw, 64px); }
.section__head h2 { font-size: clamp(1.95rem, 3.6vw, 2.85rem); margin-bottom: 16px; }
.section__head p { color: var(--muted); font-size: 1.06rem; }
.section__head--row {
  max-width: none; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.section__head--row > div { max-width: 640px; }
.section__head--centred { max-width: 660px; margin-left: auto; margin-right: auto; text-align: center; }
.section__head--centred .eyebrow { justify-content: center; }

/* hairline rule under headings — the "menu paper" signature */
.rule { border: 0; height: 1px; background: var(--line-strong); margin: 18px 0 0; }
.rule--short { width: 64px; height: 2px; background: var(--accent); }

/* ---------- info band (hours / find us / book) ---------- */
.info-band { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
@media (max-width: 820px) { .info-band { grid-template-columns: 1fr; } }
.info-tile { padding: 30px 28px; display: flex; gap: 16px; align-items: flex-start; border-right: 1px solid var(--line); }
.info-tile:last-child { border-right: 0; }
@media (max-width: 820px) { .info-tile { border-right: 0; border-bottom: 1px solid var(--line); } .info-tile:last-child { border-bottom: 0; } }
.info-tile svg { width: 24px; height: 24px; color: var(--accent); flex-shrink: 0; margin-top: 4px; }
.info-tile h3 { font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-2); font-family: var(--font-body); font-weight: 700; margin-bottom: 8px; }
.info-tile p, .info-tile a { font-size: 1.02rem; color: var(--text); }
.info-tile a { font-weight: 700; }
.info-tile a:hover { color: var(--accent); }
.info-tile small { display: block; color: var(--muted); font-size: 0.9rem; margin-top: 4px; }

/* ---------- dish cards ---------- */
.dishes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
@media (max-width: 900px) { .dishes { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; } }
.dish-card { display: flex; flex-direction: column; }
.dish-card__media { border-radius: var(--radius); overflow: hidden; aspect-ratio: 1 / 1; background: var(--surface-2); margin-bottom: 20px; }
.dish-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); }
.dish-card:hover .dish-card__media img { transform: scale(1.05); }
.dish-card__row { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.dish-card h3 { font-size: 1.28rem; }
.dish-card__price { margin-left: auto; font-family: var(--font-head); font-weight: 600; font-size: 1.12rem; color: var(--accent); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dish-card p { color: var(--muted); font-size: 0.97rem; }

/* ---------- diet pills ---------- */
.diet-pill {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; height: 20px; padding: 0 6px; margin-left: 6px;
  border: 1px solid var(--line-strong); border-radius: 999px;
  font-family: var(--font-body); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em;
  color: var(--muted); vertical-align: middle; line-height: 1;
}
.diet-pill--ve { border-color: var(--accent-2); color: var(--accent-2); }
.diet-key { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 26px; font-size: 0.9rem; color: var(--muted); }
.diet-key span { display: inline-flex; align-items: center; gap: 8px; }
.diet-key .diet-pill { margin-left: 0; }

/* ---------- provenance ticker (marquee) ---------- */
.marquee {
  overflow: hidden; padding: 22px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: var(--surface);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track { display: flex; gap: 0; width: max-content; animation: marquee 46s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.marquee__track span {
  font-family: var(--font-head); font-style: italic; font-weight: 500; font-size: 1.12rem; white-space: nowrap;
  color: var(--muted); display: inline-flex; align-items: center;
}
/* drawn, not a character, so no font can render it as a colour emoji */
.marquee__track span::after {
  content: ""; display: inline-block; flex-shrink: 0;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent); margin: 0 26px;
}

/* ---------- split (story) ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 5vw, 72px); align-items: center; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }
.split--flip .split__media { order: 2; }
@media (max-width: 900px) { .split--flip .split__media { order: 0; } }
.split__media { position: relative; }
.split__media img { border-radius: var(--radius); width: 100%; height: 100%; object-fit: cover; }
.split__media--arch img { border-radius: 999px 999px var(--radius) var(--radius); aspect-ratio: 3 / 4; }
.split__badge {
  position: absolute; left: -18px; bottom: 28px;
  background: var(--accent); color: var(--on-accent); border-radius: var(--radius); padding: 18px 22px;
  font-family: var(--font-head); box-shadow: var(--shadow);
}
.split__badge strong { display: block; font-size: 1.8rem; font-weight: 600; line-height: 1; }
.split__badge small { font-size: 0.82rem; font-weight: 500; opacity: 0.9; font-family: var(--font-body); }
@media (max-width: 560px) { .split__badge { left: 12px; } }
.split__content h2 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); margin-bottom: 20px; }
.split__content > p { color: var(--muted); margin-bottom: 18px; font-size: 1.04rem; }

.pullquote {
  font-family: var(--font-head); font-style: italic; font-weight: 500;
  font-size: clamp(1.2rem, 2vw, 1.5rem); line-height: 1.45; color: var(--text);
  border-left: 2px solid var(--accent); padding-left: 22px; margin: 26px 0;
}
.pullquote cite { display: block; font-family: var(--font-body); font-style: normal; font-size: 0.9rem; color: var(--muted); margin-top: 12px; }

.ticklist { margin-top: 26px; display: grid; gap: 14px; }
.ticklist li { display: flex; gap: 14px; align-items: flex-start; }
.ticklist svg { width: 20px; height: 20px; color: var(--accent); flex-shrink: 0; margin-top: 4px; }
.ticklist strong { font-family: var(--font-head); font-weight: 600; }
.ticklist span { color: var(--muted); }

/* ---------- stats ---------- */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 560px) { .stats { grid-template-columns: 1fr; } }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 24px; text-align: center; }
.stat strong { display: block; font-family: var(--font-head); font-weight: 600; font-size: 2.4rem; color: var(--accent); line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat span { font-size: 0.92rem; color: var(--muted); }

/* ---------- reviews ---------- */
.reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 900px) { .reviews { grid-template-columns: 1fr; } }
.review {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 32px 28px; display: flex; flex-direction: column; gap: 16px;
  transition: transform 0.3s var(--ease), border-color 0.3s, box-shadow 0.3s;
}
.review:hover { transform: translateY(-4px); border-color: var(--accent-line); box-shadow: var(--shadow); }
.review__stars { display: flex; gap: 3px; }
.review__stars svg { width: 17px; height: 17px; color: var(--accent); }
.review blockquote { font-family: var(--font-head); font-style: italic; font-weight: 400; font-size: 1.08rem; line-height: 1.55; flex-grow: 1; }
.review figcaption { display: flex; flex-direction: column; gap: 2px; padding-top: 14px; border-top: 1px solid var(--line); }
.review figcaption strong { font-family: var(--font-body); font-weight: 700; font-size: 0.95rem; }
.review figcaption span { font-size: 0.86rem; color: var(--muted); }

/* ---------- gallery: teaser strip ---------- */
.strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 820px) { .strip { grid-template-columns: 1fr 1fr; } }
.strip figure { margin: 0; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 5; background: var(--surface-2); }
.strip img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); }
.strip figure:hover img { transform: scale(1.05); }

/* ---------- gallery: editorial grid ---------- */
.egrid { display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(20px, 3vw, 40px); align-items: start; }
@media (max-width: 900px) { .egrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .egrid { grid-template-columns: 1fr; } }
.egrid figure { margin: 0; }
.egrid img { width: 100%; border-radius: var(--radius); background: var(--surface-2); }
.egrid figcaption {
  font-family: var(--font-head); font-style: italic; font-size: 0.95rem;
  color: var(--muted); margin-top: 12px;
}
/* column spans give the page an editorial, uneven rhythm */
.egrid .e-wide { grid-column: span 4; }
.egrid .e-narrow { grid-column: span 2; }
.egrid .e-half { grid-column: span 3; }
.egrid .e-full { grid-column: span 6; }
@media (max-width: 900px) {
  .egrid .e-wide, .egrid .e-narrow, .egrid .e-half { grid-column: span 1; }
  .egrid .e-full { grid-column: span 2; }
}
@media (max-width: 560px) { .egrid .e-full { grid-column: span 1; } }
.egrid .arch img { border-radius: 999px 999px var(--radius) var(--radius); }
.egrid img.ratio-portrait { aspect-ratio: 3 / 4; object-fit: cover; }
.egrid img.ratio-landscape { aspect-ratio: 3 / 2; object-fit: cover; }
.egrid img.ratio-square { aspect-ratio: 1 / 1; object-fit: cover; }

/* ---------- ink band (find us / dark break) ---------- */
.band--ink {
  background: var(--text); color: #fdf8f1;
  /* lighter accents so type stays AA on the dark ground */
  --accent: #e07a4f;
  --accent-2: #b8c9a8;
  --muted: rgba(253, 248, 241, 0.72);
  --line: rgba(253, 248, 241, 0.16);
  --line-strong: rgba(253, 248, 241, 0.30);
}
.band--ink h2, .band--ink h3 { color: #fdf8f1; }
.band--ink .btn--ghost { border-color: rgba(253, 248, 241, 0.42); color: #fdf8f1; }
.band--ink .btn--ghost:hover { border-color: #fdf8f1; background: rgba(253, 248, 241, 0.10); color: #fdf8f1; }
.findus { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 5vw, 72px); align-items: start; }
@media (max-width: 900px) { .findus { grid-template-columns: 1fr; } }

/* ---------- opening hours (dot leaders) ---------- */
.hours { display: grid; gap: 2px; max-width: 420px; }
.hours li { display: flex; align-items: baseline; gap: 8px; padding: 7px 0; font-size: 1rem; }
.hours__day { flex: 0 0 auto; font-weight: 500; }
.hours__leader { flex: 1 1 12px; min-width: 12px; border-bottom: 1px dotted var(--line-strong); transform: translateY(-4px); }
.hours__time { flex: 0 0 auto; font-variant-numeric: tabular-nums; color: var(--muted); white-space: nowrap; }
.hours li.is-closed .hours__day, .hours li.is-closed .hours__time { color: var(--muted); font-style: italic; }
.hours__note { margin-top: 16px; font-size: 0.9rem; color: var(--muted); }

/* ---------- map placeholder ---------- */
.map-placeholder {
  margin-top: 24px; border: 1px dashed var(--line-strong); border-radius: var(--radius);
  min-height: 200px; display: grid; place-items: center; text-align: center; padding: 30px 24px; gap: 10px;
  background: rgba(253, 248, 241, 0.04);
}
.section .map-placeholder { background: var(--surface-2); }
.map-placeholder svg { width: 30px; height: 30px; color: var(--accent); }
.map-placeholder p { font-size: 0.94rem; color: var(--muted); max-width: 340px; }

/* ---------- menu page: sticky category nav ---------- */
.menu-nav {
  position: sticky; top: 68px; z-index: 60;
  background: rgba(250, 246, 239, 0.94);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.menu-nav__track {
  display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none;
  max-width: var(--wrap); margin: 0 auto; padding: 10px 24px;
}
.menu-nav__track::-webkit-scrollbar { display: none; }
.menu-nav a {
  flex: 0 0 auto; padding: 11px 16px; border-radius: 999px; min-height: 44px;
  display: inline-flex; align-items: center; white-space: nowrap;
  font-size: 0.94rem; font-weight: 500; color: var(--muted);
  transition: background 0.25s, color 0.25s;
}
.menu-nav a:hover { color: var(--text); background: var(--surface-2); }
.menu-nav a[aria-current="true"] { background: var(--accent); color: var(--on-accent); font-weight: 700; }

/* ---------- menu page: categories and items ---------- */
.menu-category { padding-top: clamp(56px, 7vw, 88px); scroll-margin-top: 130px; }
.menu-category:first-of-type { padding-top: 0; }
.menu-category__head { margin-bottom: 30px; }
.menu-category__head h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); }
.menu-category__note { color: var(--muted); font-size: 0.96rem; margin-top: 10px; font-style: italic; }
.menu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px clamp(32px, 5vw, 64px); }
@media (max-width: 820px) { .menu-grid { grid-template-columns: 1fr; } }
.menu-item { padding: 12px 0; border-bottom: 1px solid var(--line); }
.menu-item__top { display: flex; align-items: baseline; gap: 8px; }
.menu-item__name { flex: 0 1 auto; font-family: var(--font-head); font-weight: 600; font-size: 1.06rem; }
.menu-item__leader { flex: 1 1 14px; min-width: 14px; border-bottom: 1px dotted var(--line-strong); transform: translateY(-4px); }
.menu-item__price { flex: 0 0 auto; font-family: var(--font-head); font-weight: 600; font-size: 1.02rem; color: var(--accent); font-variant-numeric: tabular-nums; white-space: nowrap; }
.menu-item__desc { color: var(--muted); font-size: 0.94rem; margin-top: 2px; max-width: 46ch; }
/* On small screens the leader is dropped so long dish names can wrap cleanly. */
@media (max-width: 520px) {
  .menu-item__top { gap: 14px; justify-content: space-between; }
  .menu-item__leader { display: none; }
  .menu-item__name { flex: 1 1 auto; }
}

/* ---------- feature / supplier cards ---------- */
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 900px) { .features { grid-template-columns: 1fr; } }
.feature {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 32px 28px; transition: transform 0.3s var(--ease), border-color 0.3s, box-shadow 0.3s;
}
.feature:hover { transform: translateY(-4px); border-color: var(--accent-line); box-shadow: var(--shadow); }
.feature__icon {
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent); margin-bottom: 20px;
}
.feature__icon svg { width: 25px; height: 25px; }
.feature h3 { font-size: 1.2rem; margin-bottom: 10px; }
.feature p { color: var(--muted); font-size: 0.96rem; }

/* ---------- pill list ---------- */
.pills { display: flex; flex-wrap: wrap; gap: 10px; }
.pills li {
  display: inline-flex; align-items: center; gap: 9px;
  border: 1px solid var(--line-strong); border-radius: 999px; padding: 10px 18px;
  font-size: 0.92rem; font-weight: 500;
  transition: border-color 0.25s, background 0.25s;
}
.pills li:hover { border-color: var(--accent); background: var(--accent-soft); }
.pills svg { width: 17px; height: 17px; color: var(--accent); flex-shrink: 0; }

/* ---------- CTA band ---------- */
.cta-band {
  position: relative; overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--accent-line);
  border-radius: 20px; padding: clamp(44px, 6vw, 72px); text-align: center;
}
.cta-band::before {
  content: ""; position: absolute; inset: -50%;
  background:
    radial-gradient(circle at 78% 18%, rgba(179, 71, 36, 0.14), transparent 44%),
    radial-gradient(circle at 18% 82%, rgba(63, 90, 65, 0.12), transparent 48%);
}
.cta-band > * { position: relative; }
.cta-band h2 { font-size: clamp(1.85rem, 3.6vw, 2.6rem); margin-bottom: 14px; }
.cta-band p { color: var(--muted); max-width: 560px; margin: 0 auto 30px; font-size: 1.05rem; }
.cta-band__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ---------- contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(32px, 5vw, 56px); align-items: start; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 34px 30px; }
.contact-card h3 { font-size: 1.35rem; margin-bottom: 20px; }
.contact-card ul { display: grid; gap: 18px; }
.contact-card li { display: flex; gap: 16px; align-items: flex-start; }
.contact-card li svg { width: 21px; height: 21px; color: var(--accent); flex-shrink: 0; margin-top: 4px; }
.contact-card li strong { display: block; font-family: var(--font-body); font-weight: 700; font-size: 0.94rem; }
.contact-card li a, .contact-card li span { color: var(--muted); font-size: 0.97rem; }
.contact-card li a:hover { color: var(--accent); }
.contact-card__hours { margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--line); }
.contact-card__hours h4 { font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-2); font-family: var(--font-body); font-weight: 700; margin-bottom: 12px; }
.contact-card__socials { display: flex; gap: 12px; margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--line); }
.contact-card__socials a {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-strong);
  display: grid; place-items: center; transition: border-color 0.25s, background 0.25s, transform 0.25s, color 0.25s;
}
.contact-card__socials a:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); transform: translateY(-3px); }
.contact-card__socials svg { width: 19px; height: 19px; }

.form { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 34px 30px; }
.form h3 { font-size: 1.35rem; margin-bottom: 8px; }
.form > p { color: var(--muted); font-size: 0.96rem; margin-bottom: 24px; }
.form-row { margin-bottom: 18px; }
.form-row label { display: block; font-family: var(--font-body); font-weight: 700; font-size: 0.9rem; margin-bottom: 8px; }
.form-row input, .form-row select, .form-row textarea {
  width: 100%; padding: 14px 16px; min-height: 48px;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--line-strong); border-radius: 8px;
  font-family: var(--font-body); font-size: 1rem;
  transition: border-color 0.25s, box-shadow 0.25s;
}
.form-row textarea { min-height: 120px; resize: vertical; }
.form-row input:focus, .form-row select:focus, .form-row textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(179, 71, 36, 0.18);
}
.form-row small { display: block; margin-top: 7px; font-size: 0.85rem; color: var(--muted); }
.form-row--pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-row--trio { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .form-row--pair, .form-row--trio { grid-template-columns: 1fr; } }
.form__aside { font-size: 0.92rem; color: var(--muted); margin-bottom: 18px; padding: 14px 16px; background: var(--accent-soft); border-radius: 8px; }
.form-note { margin-top: 16px; font-size: 0.95rem; color: var(--accent-2); font-weight: 500; min-height: 1.4em; }

/* ---------- page hero breadcrumbs ---------- */
.crumbs { display: flex; gap: 10px; align-items: center; font-size: 0.9rem; color: rgba(253, 248, 241, 0.7); margin-bottom: 8px; }
/* padding rather than height so the link keeps a 44px tap target without bulking the line */
.crumbs a { display: inline-block; padding: 10px 0; }
.crumbs a:hover { color: #fdf8f1; }
.crumbs span { color: var(--accent); }

/* ---------- footer ---------- */
.footer { border-top: 1px solid var(--line); background: var(--surface-2); padding: 64px 0 34px; }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.1fr; gap: 36px; margin-bottom: 44px; }
@media (max-width: 900px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer__grid { grid-template-columns: 1fr; } }
.footer__brand .brand { margin-bottom: 18px; }
.footer__brand p { color: var(--muted); font-size: 0.95rem; max-width: 320px; }
.footer h4 { font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-2); font-family: var(--font-body); font-weight: 700; margin-bottom: 18px; }
.footer ul { display: grid; gap: 11px; }
.footer ul a, .footer ul span { color: var(--muted); font-size: 0.95rem; transition: color 0.2s; }
.footer ul a:hover { color: var(--accent); }
.footer__bottom {
  border-top: 1px solid var(--line); padding-top: 26px;
  display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  color: var(--muted); font-size: 0.87rem;
}

/* ---------- floating call button (mobile) ---------- */
.call-fab {
  position: fixed; right: 18px; bottom: 18px; z-index: 90;
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--accent); color: var(--on-accent); display: none; place-items: center;
  box-shadow: 0 12px 30px rgba(179, 71, 36, 0.4);
  transition: transform 0.25s var(--ease);
}
.call-fab:hover { transform: scale(1.06); }
.call-fab svg { width: 24px; height: 24px; }
@media (max-width: 700px) {
  .call-fab { display: grid; }
  /* comfortable tap targets + clearance so the FAB never sits on the last line */
  .footer ul { gap: 2px; }
  .footer ul a, .footer ul span { display: inline-block; padding: 9px 0; }
  .contact-card li a, .info-tile a { display: inline-block; padding: 9px 0; }
  .demo-note { padding-bottom: 88px; }
  .menu-nav { top: 62px; }
}

/* ---------- demo ribbon (remove when handing a real site over) ---------- */
.demo-note {
  background: var(--surface-2); border-top: 1px solid var(--line);
  padding: 14px 24px; text-align: center; font-size: 0.84rem; color: var(--muted);
}
.demo-note strong { color: var(--accent); font-weight: 700; }

/* ---------- WhatsApp ---------- */
/* WhatsApp is how most South African guests actually book, so this float shows
   on every breakpoint, not just mobile. The green is WhatsApp's own brand colour
   and is deliberately NOT driven from the :root tokens — leave it when re-skinning. */
.wa-fab {
  position: fixed; right: 18px; bottom: 18px; z-index: 91;
  width: 58px; height: 58px; border-radius: 50%;
  background: #25d366; color: #04240f; display: grid; place-items: center;
  box-shadow: 0 12px 30px rgba(37, 211, 102, 0.42);
  transition: transform 0.25s var(--ease);
}
.wa-fab:hover { transform: scale(1.06); }
.wa-fab svg { width: 28px; height: 28px; }

.btn--whatsapp { background: #25d366; color: #04240f; border-color: #25d366; }
.btn--whatsapp:hover { background: #1fbe5b; border-color: #1fbe5b; color: #04240f; }
.btn--whatsapp svg { width: 20px; height: 20px; margin-right: 8px; vertical-align: -4px; }

@media (max-width: 700px) {
  /* stack the call button above the WhatsApp float so they never overlap */
  .call-fab { bottom: 86px; }
  .demo-note { padding-bottom: 152px; }
}