/* ============================================================
   MANJE BRAND SITE
   Parent: Manje | Storefronts: Carmichael (Griyo Shack) + Express
   Default theme = purple dominant + yellow accent.
   Toggle to Express inverts: yellow dominant + purple accent.
   ============================================================ */

:root {
  /* Brand palette */
  --purple-950: #150620;
  --purple-900: #1f0a30;
  --purple-800: #2a0b3e;
  --purple-700: #3d1058;
  --purple-600: #4d1370;
  --purple-500: #6a1d97;
  --purple-400: #8826bd;
  --purple-300: #b070d8;
  --purple-200: #d6b1ef;
  --purple-100: #efe2f7;
  --purple-050: #f8f0fc;

  --gold-800: #8a6700;
  --gold-700: #b88a00;
  --gold-600: #d4a017;
  --gold-500: #f2c029;
  --gold-400: #ffd84d;
  --gold-300: #ffe27a;
  --gold-200: #ffeaa3;
  --gold-100: #fff5cc;

  --ink: #150a1f;
  --ink-soft: #2a1e36;
  --paper: #fffaf2;
  --line: rgba(24, 16, 31, 0.10);
  --line-strong: rgba(24, 16, 31, 0.22);

  --container: 1180px;
  --container-narrow: 880px;
  --gutter: clamp(16px, 4vw, 32px);

  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 28px;
  --shadow-sm: 0 2px 6px rgba(24, 16, 31, 0.06);
  --shadow: 0 14px 40px rgba(24, 16, 31, 0.10);
  --shadow-lg: 0 24px 70px rgba(24, 16, 31, 0.18);

  --font: 'Plus Jakarta Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

/* ===== PURPLE DOMINANT, YELLOW ACCENT (Manje Express) ===== */
body.theme-purple {
  --bg: #faf5ff;
  --bg-alt: #f0e1fa;
  --bg-deep: var(--purple-900);
  --surface: #ffffff;
  --surface-2: var(--purple-050);
  --text: var(--ink);
  --text-muted: #5f4e76;
  --text-inverse: #ffffff;

  --primary: var(--purple-600);
  --primary-strong: var(--purple-800);
  --primary-soft: var(--purple-100);
  --on-primary: #ffffff;

  --accent: var(--gold-500);
  --accent-strong: var(--gold-600);
  --accent-soft: var(--gold-100);
  --on-accent: var(--ink);

  --hero-bg: radial-gradient(120% 80% at 80% 0%, var(--purple-500) 0%, var(--purple-700) 40%, var(--purple-900) 100%);
  --hero-text: #ffffff;
  --hero-muted: #d6c4ec;

  --nav-bg: rgba(255, 255, 255, 0.86);
  --nav-text: var(--ink);
  --nav-border: var(--line);

  --footer-bg: var(--purple-950);
  --footer-text: #ece1f5;
  --footer-muted: #b89dd4;
}

/* ===== DEFAULT: YELLOW DOMINANT, PURPLE ACCENT (Carmichael / Da Griyo Shack) ===== */
body, body.theme-yellow {
  --bg: #fffaea;
  --bg-alt: #fff0b8;
  --bg-deep: var(--gold-600);
  --surface: #ffffff;
  --surface-2: #fff8d8;
  --text: var(--ink);
  --text-muted: #6a5a2f;
  --text-inverse: var(--ink);

  --primary: var(--gold-500);
  --primary-strong: var(--gold-600);
  --primary-soft: var(--gold-100);
  --on-primary: var(--ink);

  --accent: var(--purple-600);
  --accent-strong: var(--purple-800);
  --accent-soft: var(--purple-100);
  --on-accent: #ffffff;

  --hero-bg: radial-gradient(120% 80% at 80% 0%, var(--gold-400) 0%, var(--gold-500) 40%, var(--gold-700) 100%);
  --hero-text: var(--ink);
  --hero-muted: #5a3f08;

  --nav-bg: rgba(255, 255, 255, 0.9);
  --nav-text: var(--ink);
  --nav-border: var(--line);

  --footer-bg: #2a1c00;
  --footer-text: #fff2c4;
  --footer-muted: #d4b878;
}

/* ===== Reset & base ===== */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color .4s ease, color .4s ease;
}
img, svg, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
input, textarea, select { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 .5em;
  color: var(--text);
}
h1 { font-size: clamp(2.2rem, 5.5vw, 4rem); }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); }
h3 { font-size: clamp(1.2rem, 2.2vw, 1.5rem); }
p { margin: 0 0 1em; }
.muted { color: var(--text-muted); }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.container.narrow { max-width: var(--container-narrow); }
section { padding: clamp(56px, 8vw, 96px) 0; }
.section-tight { padding: clamp(36px, 6vw, 64px) 0; }
.bg-alt { background: var(--bg-alt); transition: background-color .4s ease; }
.bg-deep {
  background: var(--bg-deep);
  color: var(--text-inverse);
  transition: background-color .4s ease, color .4s ease;
}
.bg-deep h1, .bg-deep h2, .bg-deep h3 { color: var(--text-inverse); }
.bg-deep .muted { color: rgba(255,255,255,0.7); }
body.theme-yellow .bg-deep .muted { color: rgba(24,16,31,0.65); }

/* ===== Buttons ===== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: .01em;
  background: var(--primary);
  color: var(--on-primary);
  transition: transform .2s ease, box-shadow .2s ease, background-color .25s ease, color .25s ease, border-color .25s ease;
  box-shadow: var(--shadow-sm);
  border: 2px solid transparent;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow); background: var(--primary-strong); }
.btn:active { transform: translateY(0); }
.btn-accent { background: var(--accent); color: var(--on-accent); }
.btn-accent:hover { background: var(--accent-strong); color: var(--on-accent); }
.btn-ghost {
  background: transparent;
  color: var(--text);
  border: 2px solid var(--line-strong);
}
.btn-ghost:hover { background: var(--surface); border-color: var(--accent); color: var(--accent-strong); }
.bg-deep .btn-ghost { color: var(--text-inverse); border-color: rgba(255,255,255,.35); }
.bg-deep .btn-ghost:hover { background: rgba(255,255,255,.08); border-color: var(--accent); color: var(--accent); }
body.theme-yellow .bg-deep .btn-ghost { color: var(--ink); border-color: rgba(24,16,31,.35); }
body.theme-yellow .bg-deep .btn-ghost:hover { background: rgba(255,255,255,.4); border-color: var(--accent); color: var(--accent); }
.btn-sm { padding: 10px 16px; font-size: .9rem; }
.btn-lg { padding: 18px 28px; font-size: 1.05rem; }

/* ===== Nav ===== */
.nav {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--nav-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--nav-border);
  color: var(--nav-text);
  transition: background-color .35s ease, color .35s ease, border-color .35s ease;
}
.nav-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 74px;   /* locked nav height - identical on every page, never grows/shrinks */
}
.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: 1.1rem;
  margin-left: 4px;
}
.nav-logo img { height: 38px; width: auto; }
.nav-spacer { flex: 1; }
.nav-links {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;           /* even, comfortable spacing between every item */
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links li { display: flex; }
.nav-links a {
  padding: 9px 13px;
  border-radius: 999px;
  font-weight: 600;
  font-size: .92rem;
  color: var(--nav-text);
  white-space: nowrap;   /* keep "Kreyòl Corner" / "Meet the Fam" on one line */
  transition: background-color .2s ease, color .2s ease;
}
.nav-links a:hover { background: var(--primary-soft); color: var(--primary); }
.nav-links a.active { background: var(--primary); color: var(--on-primary); }
/* Accent button inside the nav (e.g. "Reviews"): keep readable text on the
   accent background. Without this, the higher-specificity ".nav-links a" rule
   forces dark --nav-text, giving black text on the purple accent. */
.nav-links a.btn-accent { color: var(--on-accent); }
.nav-links a.btn-accent:hover { background: var(--accent-strong); color: var(--on-accent); }
.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  border-radius: 12px;
  border: 1px solid var(--line-strong);
  align-items: center; justify-content: center;
  margin-left: auto;
}
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--text); position: relative; }
.nav-toggle span::before,
.nav-toggle span::after { content: ''; position: absolute; left: 0; width: 22px; height: 2px; background: var(--text); }
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after  { top:  6px; }

@media (max-width: 1200px) {
  .nav-toggle { display: inline-flex; }
  .nav-links {
    position: absolute;
    inset: 74px var(--gutter) auto var(--gutter);
    flex-direction: column;
    align-items: stretch;
    background: var(--surface);
    padding: 12px;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    border: 1px solid var(--line);
    display: none;
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 12px 14px; }
  .nav-spacer { flex: 0; }
  .nav-logo { margin-left: 0; }
  .nav-logo img { height: 32px; }
}

/* ===== Hero ===== */
.hero {
  position: relative;
  padding: clamp(64px, 10vw, 120px) 0 clamp(48px, 8vw, 96px);
  overflow: hidden;
  background: var(--hero-bg);
  color: var(--hero-text);
  transition: background .4s ease, color .4s ease;
}
.hero::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(40% 30% at 10% 90%, rgba(255, 216, 77, .25), transparent 60%),
    radial-gradient(50% 40% at 90% 100%, rgba(106, 29, 151, .4), transparent 60%);
  pointer-events: none;
}
body.theme-yellow .hero::before {
  background:
    radial-gradient(40% 30% at 10% 90%, rgba(77, 19, 112, .25), transparent 60%),
    radial-gradient(50% 40% at 90% 100%, rgba(255, 226, 122, .5), transparent 60%);
}
.hero > * { position: relative; }
.hero h1 { color: var(--hero-text); margin-bottom: 18px; }
.hero p.lead {
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  color: var(--hero-muted);
  max-width: 56ch;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  color: var(--accent);
  border: 1px solid rgba(255,255,255,.2);
  font-weight: 800;
  font-size: .75rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
body.theme-yellow .hero-eyebrow {
  background: rgba(24,16,31,.08);
  color: var(--accent);
  border-color: rgba(24,16,31,.15);
}
.hero-motto {
  display: inline-block;
  font-family: var(--font);
  font-weight: 900;
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  letter-spacing: .04em;
  color: var(--accent);
  margin-bottom: 14px;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.hero .btn-ghost { color: var(--hero-text); border-color: rgba(255,255,255,.35); }
.hero .btn-ghost:hover { background: rgba(255,255,255,.08); border-color: var(--accent); color: var(--accent); }
body.theme-yellow .hero .btn-ghost { color: var(--ink); border-color: rgba(24,16,31,.35); }
body.theme-yellow .hero .btn-ghost:hover { background: rgba(255,255,255,.5); border-color: var(--accent); color: var(--accent); }
.hero-media {
  position: relative;
  aspect-ratio: 4/5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: var(--surface);
  border: 6px solid rgba(255,255,255,.08);
}
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-badge {
  position: absolute;
  bottom: 18px; left: 18px;
  background: var(--accent);
  color: var(--on-accent);
  padding: 10px 16px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  font-weight: 800;
  font-size: .85rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}
@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-media { aspect-ratio: 4/3; order: -1; }
}

/* ===== Section heading ===== */
.section-head { text-align: center; margin-bottom: clamp(28px, 4vw, 48px); }
.section-head .eyebrow {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-weight: 800;
  letter-spacing: .14em;
  font-size: .72rem;
  text-transform: uppercase;
  margin-bottom: 14px;
  border: 1px solid var(--line);
}
.bg-deep .section-head .eyebrow {
  background: rgba(255,255,255,.12);
  color: var(--accent);
  border-color: rgba(255,255,255,.2);
}
body.theme-yellow .bg-deep .section-head .eyebrow {
  background: rgba(24,16,31,.1);
  color: var(--accent);
}
.section-head p { max-width: 60ch; margin-left: auto; margin-right: auto; color: var(--text-muted); }

/* ===== Storefront cards ===== */
.storefronts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 3vw, 32px);
}
@media (max-width: 820px) { .storefronts { grid-template-columns: 1fr; } }
.storecard {
  position: relative;
  display: block;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow);
  border: 1px solid var(--line);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.storecard:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--accent); }
.storecard-media { position: relative; aspect-ratio: 16/11; overflow: hidden; }
.storecard-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.storecard:hover .storecard-media img { transform: scale(1.05); }
.storecard-tag {
  position: absolute; top: 16px; left: 16px;
  padding: 8px 14px;
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: .08em;
  font-size: .72rem;
  text-transform: uppercase;
  box-shadow: var(--shadow-sm);
  background: var(--accent);
  color: var(--on-accent);
}
.storecard .storecard-logo {
  width: 64px; height: 64px;
  border-radius: 16px;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  position: absolute;
  top: 16px; right: 16px;
  z-index: 2; /* sit above the storefront photo instead of behind it */
  padding: 6px;
  box-shadow: var(--shadow-sm);
}
.storecard .storecard-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.storecard-body { padding: 24px 22px 26px; }
.storecard h3 { font-size: 1.6rem; margin-bottom: 4px; }
.storecard p { color: var(--text-muted); margin-bottom: 14px; }
.storecard-meta {
  display: flex; flex-wrap: wrap; gap: 14px 22px;
  font-size: .9rem; color: var(--text-muted); margin: 0 0 18px;
}
.storecard-meta span { display: inline-flex; align-items: center; gap: 6px; }

/* ===== Menu ===== */

.menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
}
.menu-card {
  position: relative;
  background: var(--surface);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--line);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  text-align: left;
  width: 100%;
  display: block;
}
.menu-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--accent); }
.menu-card-media { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--bg-alt); }
.menu-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.menu-card:hover .menu-card-media img { transform: scale(1.06); }
.menu-card-body { padding: 16px 18px 20px; }
.menu-card-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin-bottom: 6px;
}
.menu-card-title { font-weight: 800; font-size: 1.05rem; }
.menu-card-price {
  font-weight: 800;
  color: var(--accent-strong);
  background: var(--accent-soft);
  padding: 2px 10px;
  border-radius: 999px;
  font-size: .9rem;
  border: 1px solid var(--accent);
}
.menu-card-desc { color: var(--text-muted); font-size: .92rem; margin: 0; }
.menu-card-placeholder {
  position: absolute; top: 12px; left: 12px;
  background: rgba(0,0,0,.7); color: #fff;
  padding: 4px 10px; border-radius: 999px;
  font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}

/* ===== Lightbox ===== */
.lightbox {
  position: fixed; inset: 0;
  background: rgba(10, 4, 18, 0.92);
  display: none;
  align-items: center; justify-content: center;
  padding: 24px;
  z-index: 200;
}
.lightbox.open { display: flex; }
.lightbox-inner {
  max-width: 900px; width: 100%;
  background: var(--surface);
  color: var(--text);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  position: relative;
}
.lightbox-inner img { width: 100%; height: 100%; object-fit: cover; min-height: 320px; }
.lightbox-body { padding: 26px; display: flex; flex-direction: column; gap: 12px; }
.lightbox-close {
  position: absolute; top: 14px; right: 14px;
  width: 40px; height: 40px; border-radius: 50%;
  background: #fff; color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow);
  font-size: 22px; font-weight: 700;
  z-index: 2;
}
@media (max-width: 720px) {
  .lightbox-inner { grid-template-columns: 1fr; }
  .lightbox-inner img { aspect-ratio: 4/3; min-height: 0; }
}

/* ===== Google Review summary card + reviews ===== */
@media (max-width: 640px) {
}

.reviews-cta {
  text-align: center;
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

/* Per-location Google review cards (home page) */
.review-locs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  max-width: 880px;
  margin: 0 auto;
}
.review-loc {
  background: var(--surface);
  border: 2px solid var(--accent);
  border-radius: var(--radius-lg);
  padding: 26px 24px;
  box-shadow: var(--shadow-sm);
  text-align: center;
  transition: transform .25s ease, box-shadow .25s ease;
}
.review-loc:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.review-loc h3 { margin: 0 0 4px; }
.review-loc p { color: var(--text-muted); font-size: .92rem; margin: 0 0 16px; }
.review-loc-stars { color: var(--accent-strong); font-size: 1.35rem; letter-spacing: 3px; font-weight: 800; }
body.theme-yellow .review-loc-stars { color: var(--gold-700); }
.review-loc-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

/* ===== Info / location panel ===== */
.info-grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
}
@media (max-width: 860px) { .info-grid { grid-template-columns: 1fr; } }
.info-block {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow-sm);
}
.info-block h3 { margin-top: 0; }
.info-row {
  display: flex;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  align-items: flex-start;
}
.info-row:last-child { border-bottom: 0; }
.info-row strong { display: block; margin-bottom: 2px; }
.info-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; flex: none;
  border: 1px solid var(--accent);
}

.qr-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  text-align: center;
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.qr-card img { width: 200px; height: 200px; border-radius: 12px; background: #fff; padding: 10px; border: 2px solid var(--accent); }
.qr-card p { color: var(--text-muted); margin: 0; }

.map-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16/10;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.map-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ===== In-store menu board photo (Griyo Shack) ===== */
.menu-board {
  max-width: 460px;
  margin: 0 auto clamp(28px, 4vw, 44px);
  text-align: center;
}
.menu-board figcaption {
  margin-top: 12px;
  font-size: .9rem;
  font-weight: 600;
  color: var(--text-muted);
}

/* ===== Our Story prose ===== */
.story-prose { max-width: 68ch; margin: 0 auto; }
.story-prose p {
  color: var(--text-muted);
  line-height: 1.85;
  font-size: 1.02rem;
  margin: 0 0 1.15em;
}
.story-prose p:last-child { margin-bottom: 0; }

.story-values {
  max-width: 780px;
  margin: 0 auto;
  display: grid;
  gap: 20px;
}
.value {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 5px solid var(--accent);
  border-radius: var(--radius);
  padding: 24px 26px;
  box-shadow: var(--shadow-sm);
}
.value-eyebrow {
  display: inline-block;
  font-weight: 900;
  font-size: .85rem;
  letter-spacing: .14em;
  color: var(--accent-strong);
  margin-bottom: 6px;
}
.value h3 { margin: 0 0 10px; font-size: 1.2rem; }
.value p { margin: 0; color: var(--text-muted); line-height: 1.8; }

.story-closing {
  max-width: 780px;
  margin: 34px auto 0;
  text-align: center;
  background: var(--accent-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(26px, 4vw, 40px);
}
.story-closing-title { font-weight: 900; font-size: 1.15rem; margin: 0 0 4px; color: var(--text); }
.story-closing-tag { font-weight: 800; color: var(--accent-strong); letter-spacing: .04em; margin: 0 0 14px; }
.story-closing p:last-child { margin: 0; color: var(--text-muted); line-height: 1.8; }

/* ===== Meet the Fam: real family photos ===== */
.fam-hero {
  max-width: 560px;
  margin: 0 auto clamp(40px, 6vw, 68px);
  text-align: center;
}
.fam-hero-photo {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface);
  border: 6px solid var(--surface);
  box-shadow: var(--shadow-lg);
}
.fam-hero-photo img {
  width: 100%;
  max-height: 60vh;
  object-fit: cover;
  object-position: center top;
}
.fam-photo {
  max-width: 560px;
  margin: 0 auto clamp(36px, 5vw, 60px);
  text-align: center;
}
.fam-photo:last-child { margin-bottom: 0; }
.fam-photo--team { max-width: 900px; }
.fam-photo-frame {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.fam-photo-frame img {
  width: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.fam-photo-frame--portrait img { max-height: 62vh; }
.fam-caption { display: block; margin-top: 16px; }
.fam-caption-name {
  display: block;
  font-weight: 900;
  font-size: clamp(1.1rem, 2.6vw, 1.4rem);
  color: var(--text);
  line-height: 1.3;
}
.fam-caption-sub {
  display: block;
  margin-top: 5px;
  color: var(--accent-strong);
  font-weight: 700;
}

/* ===== Timeline ===== */
.timeline {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
  padding-left: 38px;
}
.timeline::before {
  content: ''; position: absolute; left: 12px; top: 0; bottom: 0;
  width: 4px; background: var(--accent); border-radius: 2px;
}
.timeline-item { position: relative; padding: 14px 0 26px; }
.timeline-item::before {
  content: ''; position: absolute; left: -32px; top: 22px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--primary); border: 3px solid var(--bg);
  box-shadow: 0 0 0 2px var(--accent);
}
.timeline-year {
  font-weight: 800;
  color: var(--accent-strong);
  letter-spacing: .08em;
  font-size: .9rem;
  text-transform: uppercase;
}

/* ===== Manje Moments / Videos ===== */
.moments {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 22px;
}
.moment {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .25s ease, box-shadow .25s ease;
}
.moment:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.moment-frame {
  position: relative;
  aspect-ratio: 16/9;
  background: var(--bg-alt);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted);
  text-align: center;
  padding: 16px;
}
.moment-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.moment-body { padding: 16px 18px 18px; }
.moment-body h3 { margin: 0 0 4px; font-size: 1.05rem; }
.moment-body p { margin: 0; color: var(--text-muted); font-size: .92rem; }
.moment-duration {
  display: inline-block;
  background: var(--accent-soft);
  color: var(--accent-strong);
  padding: 2px 10px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .06em;
  margin-bottom: 8px;
  border: 1px solid var(--accent);
}

/* ===== Vimeo responsive embeds ===== */
.video-embed {
  position: relative;
  margin: 0 auto;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: #000;
}
.video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
/* Landscape (16:9): full width in its container, capped for readability. */
.video-embed--wide {
  width: 100%;
  max-width: 960px;
  aspect-ratio: 16 / 9;
}
/* Portrait (9:16): never takes over the page. Width is derived so the height
   stays within ~70vh and the width within ~400px, whichever is smaller. */
.video-embed--portrait {
  width: min(400px, calc(70vh * 9 / 16));
  max-width: 100%;
  aspect-ratio: 9 / 16;
}

/* ===== Manje Fam customer wall ===== */
.fam-wall {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}
.fam-tile {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  color: #fff;
  font-weight: 700;
  transition: transform .25s ease, box-shadow .25s ease;
}
.fam-tile:hover { transform: scale(1.02); box-shadow: var(--shadow); }
.fam-tile img { width: 100%; height: 100%; object-fit: cover; }
.fam-tile .fam-overlay {
  position: absolute; inset: auto 0 0 0;
  padding: 12px 14px;
  background: linear-gradient(to top, rgba(0,0,0,.78), transparent);
  font-size: .85rem;
}
.fam-tile .placeholder-stamp {
  position: absolute; top: 10px; right: 10px;
  background: rgba(0,0,0,.7); color: #fff;
  padding: 3px 8px; border-radius: 999px;
  font-size: .65rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.fam-tile-decor {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: #fff;
  text-align: center;
  padding: 18px;
}

/* ===== Learning Creole bar ===== */
.creole {
  background: linear-gradient(135deg, var(--primary-soft), var(--surface));
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 4vw, 40px);
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 22px;
  align-items: center;
  box-shadow: var(--shadow-sm);
}
.creole-badge {
  width: 60px; height: 60px;
  border-radius: 50%;
  background: var(--accent); color: var(--on-accent);
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 1.05rem;
}
.creole-label {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  border: 1px solid var(--line);
  font-weight: 800;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.creole-word { font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 800; margin: 4px 0; color: var(--primary); }
.creole-meaning { color: var(--text-muted); margin: 0; }
.creole-shuffle { white-space: nowrap; }
.creole-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
@media (max-width: 720px) {
  .creole { grid-template-columns: auto 1fr; }
  .creole-actions { grid-column: 1 / -1; }
}

/* ===== Kreyòl Corner page word list ===== */
.kreyol-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}
.kreyol-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow-sm);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.kreyol-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--accent); }
.kreyol-card .kr-word { font-size: 1.3rem; font-weight: 800; color: var(--primary); margin: 0 0 4px; }
.kreyol-card .kr-pronounce { font-size: .82rem; color: var(--text-muted); font-style: italic; margin: 0 0 8px; }
.kreyol-card .kr-meaning { margin: 0; color: var(--text); }

/* ===== Forms ===== */
.form {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(20px, 3vw, 32px);
  display: grid;
  gap: 14px;
  box-shadow: var(--shadow-sm);
}
.form-row { display: grid; gap: 14px; }
@media (min-width: 640px) { .form-row.two { grid-template-columns: 1fr 1fr; } }
.form label { font-weight: 700; font-size: .9rem; }
.form input, .form textarea, .form select {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--line-strong);
  background: var(--bg);
  color: var(--text);
}
.form input:focus, .form textarea:focus, .form select:focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-color: var(--accent);
}
.form textarea { min-height: 130px; resize: vertical; }
.form-msg { font-size: .9rem; min-height: 1.2em; }
.form-msg.ok { color: #1b7a3a; }
.form-msg.err { color: #b8262a; }

/* ===== Footer ===== */
.footer {
  background: var(--footer-bg);
  color: var(--footer-text);
  padding: 64px 0 28px;
  margin-top: 60px;
  transition: background-color .35s ease, color .35s ease;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: 32px;
}
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }
.footer h4 { color: var(--footer-text); font-size: 1rem; margin: 0 0 14px; letter-spacing: .04em; }
.footer a { color: var(--footer-muted); transition: color .2s ease; }
.footer a:hover { color: var(--accent); }
.footer-logo img { height: 60px; margin-bottom: 14px; }
.footer-motto {
  font-weight: 900;
  font-size: 1.05rem;
  color: var(--accent);
  margin: 0 0 12px;
  letter-spacing: .02em;
}
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.1);
  margin-top: 40px;
  padding-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: space-between;
  font-size: .85rem;
  color: var(--footer-muted);
  align-items: center;
}
body.theme-yellow .footer-bottom { border-top-color: rgba(0,0,0,.18); }
.footer-social { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.footer-social a {
  padding: 8px 15px; border-radius: 999px;
  background: rgba(255,255,255,.08);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .82rem; letter-spacing: .01em;
}
body.theme-yellow .footer-social a { background: rgba(0,0,0,.14); }
.footer-social a:hover { background: var(--accent); color: var(--on-accent); }

/* ===== Floating action buttons ===== */
.fab-stack {
  position: fixed;
  right: 18px; bottom: 18px;
  display: flex; flex-direction: column; gap: 12px;
  z-index: 80;
}
.fab {
  width: 56px; height: 56px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff;
  font-weight: 800;
  box-shadow: 0 10px 30px rgba(0,0,0,.28);
  transition: transform .2s ease;
  border: 2px solid var(--accent);
}
.fab:hover { transform: scale(1.08); }
.fab.whatsapp { background: #25D366; border-color: #fff; }
.fab.call { background: var(--primary); color: var(--on-primary); }
.fab svg { width: 26px; height: 26px; }

/* ===== Call modal ===== */
.modal {
  position: fixed; inset: 0;
  background: rgba(10, 4, 18, 0.78);
  display: none;
  align-items: center; justify-content: center;
  padding: 24px;
  z-index: 220;
}
.modal.open { display: flex; }
.modal-inner {
  background: var(--surface);
  color: var(--text);
  border-radius: var(--radius-lg);
  max-width: 460px;
  width: 100%;
  padding: 26px;
  box-shadow: var(--shadow-lg);
  border-top: 6px solid var(--accent);
}
.modal h3 { margin-top: 0; }
.modal-actions { display: grid; gap: 10px; margin-top: 16px; }
.modal-actions a {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--bg);
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--line);
  font-weight: 700;
  transition: border-color .2s ease, background .2s ease;
}
.modal-actions a:hover { border-color: var(--accent); background: var(--surface); }
.modal-actions a strong + strong { color: var(--primary); }
.modal-actions span { color: var(--text-muted); font-weight: 500; font-size: .85rem; }
.modal-close { margin-top: 16px; }

/* ===== Reveal animation ===== */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
}

/* ===== Utility ===== */
.center { text-align: center; }
.placeholder-tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 6px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  border: 1px solid var(--accent);
}
.divider { height: 1px; background: var(--line); margin: 30px 0; border: 0; }
.brand-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
}
.brand-tile {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.brand-tile .num { font-size: 2.4rem; font-weight: 900; color: var(--primary); line-height: 1; }
.brand-tile .lbl { color: var(--text-muted); font-size: .9rem; font-weight: 600; margin-top: 6px; }
.hours-list { list-style: none; padding: 0; margin: 0; }
.hours-list li {
  display: flex; justify-content: space-between;
  padding: 8px 0; border-bottom: 1px dashed var(--line);
  font-size: .92rem;
}
.hours-list li:last-child { border-bottom: 0; }

/* ===== Menu chooser (menu.html) cards ===== */
.chooser-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 3vw, 32px);
  max-width: 980px;
  margin: 0 auto;
}
@media (max-width: 720px) { .chooser-grid { grid-template-columns: 1fr; } }
.chooser-card {
  display: block;
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.chooser-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--accent); }
.chooser-photo { aspect-ratio: 4/3; overflow: hidden; }
.chooser-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.chooser-card:hover .chooser-photo img { transform: scale(1.05); }
.chooser-body { padding: 24px 24px 28px; }
.chooser-body h3 { font-size: 1.8rem; margin: 0 0 6px; }
.chooser-body p { color: var(--text-muted); margin: 0 0 14px; }
.chooser-tag {
  position: absolute; top: 16px; left: 16px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 800;
  letter-spacing: .08em;
  font-size: .72rem;
  text-transform: uppercase;
  box-shadow: var(--shadow-sm);
}

/* ============================================================
   PLACEHOLDER BOX SYSTEM
   Replaces all real images during build. Each .ph spells out
   exactly what asset belongs there so the client can see the
   layout and know what to provide.
   ============================================================ */
.ph {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 100%;
  min-height: 120px;
  padding: 18px;
  text-align: center;
  background-color: var(--surface);
  background-image:
    repeating-linear-gradient(45deg, transparent 0 16px, color-mix(in srgb, var(--primary) 5%, transparent) 16px 32px);
  border: 2px dashed var(--accent);
  border-radius: var(--radius);
  color: var(--text);
  overflow: hidden;
}
body.theme-yellow .ph {
  background-image:
    repeating-linear-gradient(45deg, transparent 0 16px, color-mix(in srgb, var(--accent) 12%, transparent) 16px 32px);
}
.ph::after {
  content: 'PLACEHOLDER';
  position: absolute;
  top: 10px; left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: var(--on-accent);
  font-size: .62rem;
  font-weight: 900;
  letter-spacing: .18em;
  padding: 3px 12px;
  border-radius: 999px;
  white-space: nowrap;
}
.ph-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--primary);
  color: var(--on-primary);
  display: flex; align-items: center; justify-content: center;
  font-weight: 900;
  font-size: 1.1rem;
  letter-spacing: .04em;
  margin-top: 16px;
}
.ph-label {
  font-weight: 800;
  font-size: 1rem;
  color: var(--text);
  max-width: 92%;
  line-height: 1.3;
  margin: 0;
}
.ph-sub {
  font-weight: 600;
  font-size: .82rem;
  color: var(--text-muted);
  margin: 0;
  max-width: 92%;
}

/* Aspect ratio variants */
/* A ratio variant governs the box height. The base .ph sets height:100%, which
   would otherwise win over aspect-ratio and stretch the media to fill its
   parent (overflowing cards and neighbouring sections), so opt back out here. */
.ph-1x1   { aspect-ratio: 1 / 1;   height: auto; }
.ph-4x3   { aspect-ratio: 4 / 3;   height: auto; }
.ph-4x5   { aspect-ratio: 4 / 5;   height: auto; }
.ph-16x9  { aspect-ratio: 16 / 9;  height: auto; }
.ph-16x10 { aspect-ratio: 16 / 10; height: auto; }
.ph-3x2   { aspect-ratio: 3 / 2;   height: auto; }
.ph-wide  { aspect-ratio: 21 / 9;  height: auto; }

/* Compact inline logo placeholder (nav, footer, brand strips) */
.ph-logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  min-height: 0;
  height: 40px;
  width: auto;
  background: transparent;
  border: 1px dashed var(--accent);
  border-radius: 10px;
  padding: 4px 12px;
  font-weight: 800;
  font-size: .78rem;
  letter-spacing: .04em;
  color: var(--accent-strong);
  background-image: none;
}
body.theme-yellow .ph-logo { background: rgba(0,0,0,.04); }
.ph-logo::after { display: none; }
.ph-logo .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent);
}

/* Footer / brand-area logo box (larger) */
.ph-logo-box {
  min-height: 80px;
  width: 100%;
  height: 100%;
  background: var(--bg);
  border: 1px dashed var(--accent);
  border-radius: 10px;
  padding: 12px;
  background-image: none;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800;
  font-size: .82rem;
  letter-spacing: .04em;
  text-align: center;
  color: var(--accent-strong);
}
.ph-logo-box::after { display: none; }

/* Small placeholder used INSIDE menu cards, hero badges, etc. */
.ph-inline {
  min-height: 0;
  padding: 10px 14px;
  border-width: 1px;
  background-image: none;
  background: var(--accent-soft);
  color: var(--accent-strong);
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 800;
  flex-direction: row;
}
.ph-inline::after { display: none; }

/* Make hero media accept placeholder cleanly */
.hero-media.ph {
  background-color: rgba(255,255,255,0.04);
}
body.theme-yellow .hero-media.ph {
  background-color: rgba(0,0,0,0.04);
}

/* Round placeholder (family tree circles, employee avatars) */
.ph-round {
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  width: 100%;
  height: auto;
  padding: 14px;
  overflow: hidden;
}
.ph-round::after {
  font-size: .55rem;
  padding: 2px 10px;
}

/* ============================================================
   FILLED PLACEHOLDERS - real media dropped into a .ph box
   ============================================================ */
.ph.is-filled { border:0; padding:0; background:none; background-image:none; }
.ph.is-filled::after { display:none; }
.ph.is-filled > img, .ph.is-filled > video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.ph.is-filled.is-contain { background: var(--surface); }
.ph.is-filled.is-contain > img { object-fit:contain; padding:14px; }

/* ============================================================
   BRAND MARK (fixed top-left logo, overlaps nav into body)
   ============================================================ */
.brand-mark {
  position: fixed;
  top: 10px;
  left: clamp(10px, 1.6vw, 22px);
  z-index: 90;
  width: 195px;
  height: 195px;
  border-radius: 26px;
  background: var(--surface);
  border: 4px solid var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  text-align: center;
  box-shadow: var(--shadow-lg);
  transition: transform .2s ease, border-color .25s ease, background-color .35s ease;
}
/* Neutral "manje logo" is trimmed of its white margin so it fills the badge
   flush, edge to edge, with only minimal even padding. */
.brand-mark img[data-brand-logo] { width: 100%; height: 100%; object-fit: contain; }
.brand-mark:hover { transform: scale(1.03); }
/* The Express corner logo now has a clean white ground, so give its tile a
   white background (matching the logo) with the gold accent border. This keeps
   the logo's white area flush with the tile: no dark edge shows around it. */
.brand-mark[data-brand="express"] {
  background: var(--surface);
  border-color: var(--gold-500);
}
.brand-mark .ph-logo-box {
  width: 100%;
  height: 100%;
  min-height: 0;
  border: 2px dashed var(--accent);
  background: var(--bg-alt);
  font-size: .85rem;
  font-weight: 900;
  letter-spacing: .05em;
  border-radius: 16px;
}

/* Reserve nav space so links don't slide under the fixed brand-mark */
.nav-inner { padding-left: clamp(150px, 16vw, 210px); }

/* Collapsed nav (menu button): shrink the mark and reduce the reserved space
   so the location toggle and menu button sit cleanly beside it. */
@media (max-width: 1200px) {
  .brand-mark {
    width: 108px;
    height: 108px;
    border-radius: 20px;
    padding: 6px;
    top: 8px;
    left: 8px;
  }
  .brand-mark .ph-logo-box { font-size: .68rem; }
  .nav-inner { padding-left: 116px; min-height: 66px; }
}

@media (max-width: 600px) {
  .brand-mark { width: 84px; height: 84px; border-radius: 16px; padding: 5px; }
  .nav-inner { padding-left: 92px; }
}

/* ============================================================
   OTHER LOCATIONS MENU (location pages only)
   Hamburger (three lines) at top-right. Opens a small panel
   whose only action returns the visitor to the home chooser.
   ============================================================ */
.other-loc { position: relative; flex: none; margin-left: 8px; }
.other-loc-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 15px;
  min-height: 44px;
  border-radius: 999px;
  border: 2px solid var(--line-strong);
  background: var(--surface);
  color: var(--text);
  font-weight: 700;
  font-size: .85rem;
  transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}
.other-loc-btn:hover,
.other-loc-btn[aria-expanded="true"] { border-color: var(--accent); color: var(--accent-strong); }
.other-loc-lines { display: inline-flex; flex-direction: column; gap: 3px; }
.other-loc-lines span { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; }
.other-loc-label { white-space: nowrap; }
.other-loc-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 5px solid var(--accent);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 16px;
  min-width: 230px;
  z-index: 120;
}
.other-loc-panel[hidden] { display: none; }
.other-loc-heading {
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 10px;
}
.other-loc-link {
  display: block;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--bg);
  border: 1px solid var(--line);
  font-weight: 700;
  transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}
.other-loc-link:hover { border-color: var(--accent); color: var(--accent-strong); background: var(--surface); }
@media (max-width: 600px) {
  .other-loc-btn { padding: 8px 12px; font-size: .78rem; gap: 7px; }
}
/* Very narrow screens: collapse to the icon only (still returns home).
   The accessible name is preserved by the button's aria-label. */
@media (max-width: 360px) {
  .other-loc { margin-left: 6px; }
  .other-loc-label { display: none; }
  .other-loc-btn {
    gap: 0;
    padding: 0;
    min-width: 44px;
    min-height: 44px;
    justify-content: center;
  }
}

/* ============================================================
   DIRECTIONS BUTTON (replaces embedded map images)
   ============================================================ */
.directions-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
}
.directions-card h3 { margin: 0; }
.directions-card p { margin: 0; color: var(--text-muted); }
.btn-directions { align-self: flex-start; }
.btn-directions svg { width: 18px; height: 18px; }

/* ============================================================
   CATERING POPUP (home + location pages only)
   Fixed card at bottom-right, above the floating action buttons.
   ============================================================ */
.catering-pop[hidden] { display: none; }
@keyframes catering-pop-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
.catering-pop-x:hover { background: var(--bg-alt); color: var(--text); }
@media (max-width: 600px) {
}

/* ============================================================
   WELCOME / STORE CHOOSER POPUP (home page only)
   A full-viewport overlay (click the surrounding area to dismiss)
   with the chooser card fixed at bottom-right, the same spot the
   catering popup used to sit.
   ============================================================ */
.store-welcome[hidden] { display: none; }
@keyframes store-welcome-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.store-welcome-x:hover { background: var(--bg-alt); color: var(--text); }
@media (max-width: 600px) {
}

/* ============================================================
   REAL PRICED MENU (location pages) - categories + price lines
   ============================================================ */
.menu-full { max-width: 860px; margin: 0 auto; }
.menu-cat { margin-bottom: clamp(30px, 5vw, 52px); }
.menu-cat:last-child { margin-bottom: 0; }
.menu-cat-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 14px;
  border-bottom: 2px solid var(--accent);
  padding-bottom: 8px;
  margin-bottom: 14px;
}
.menu-cat-head h3 { margin: 0; font-size: clamp(1.15rem, 2.4vw, 1.5rem); }
.menu-cat-note {
  color: var(--text-muted);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-left: auto;
}
.menu-list { display: grid; gap: 0; }
.menu-line {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 16px;
  padding: 12px 0;
  border-bottom: 1px dashed var(--line);
  align-items: baseline;
}
.menu-line:last-child { border-bottom: 0; }
.menu-line-name { font-weight: 700; grid-column: 1; }
.menu-line-desc {
  grid-column: 1 / -1;
  color: var(--text-muted);
  font-size: .88rem;
  margin: 2px 0 0;
  max-width: 60ch;
}
.menu-line-price {
  grid-column: 2;
  grid-row: 1;
  font-weight: 800;
  color: var(--accent-strong);
  white-space: nowrap;
  text-align: right;
}
body.theme-yellow .menu-line-price { color: var(--gold-700); }
.menu-line-price small {
  display: inline;
  font-weight: 700;
  font-size: .68rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.menu-foot-note { text-align: center; color: var(--text-muted); font-size: .85rem; margin-top: 26px; }
.menu-vat-note {
  max-width: 860px;
  margin: 0 auto clamp(22px, 3.5vw, 34px);
  text-align: center;
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  border-radius: 999px;
  padding: 10px 20px;
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--accent-strong);
}
body.theme-yellow .menu-vat-note { color: var(--gold-800); }

/* ============================================================
   MENU: category spacing + sticky jump bar
   ============================================================ */
.menu-cat { scroll-margin-top: 150px; }

/* Sticky category jump bar. Sits directly under the nav, which is 74px tall
   at full width and 66px once the nav collapses at 1200px. The strip itself
   never widens the page: the pill row scrolls inside its own track. */
.menu-jump {
  position: sticky;
  top: 74px;
  z-index: 50;
  background: var(--nav-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--nav-border);
  border-bottom: 1px solid var(--nav-border);
  margin-bottom: clamp(22px, 3.5vw, 34px);
}
.menu-jump-inner {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 8px 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.menu-jump-inner::-webkit-scrollbar { display: none; }
.menu-jump a {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--text);
  font-weight: 700;
  font-size: .84rem;
  white-space: nowrap;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.menu-jump a:hover,
.menu-jump a:focus-visible {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
@media (max-width: 1200px) {
  .menu-jump { top: 66px; }
}

.menu-cat + .menu-cat { margin-top: clamp(32px, 4vw, 46px); }
.menu-cat-sub {
  color: var(--text-muted);
  font-size: .9rem;
  line-height: 1.55;
  margin: -4px 0 16px;
  max-width: 72ch;
}
.menu-serve-notes {
  display: grid;
  gap: 7px;
  margin: 0 0 20px;
  padding: 14px 16px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.menu-serve-note {
  margin: 0;
  font-size: .82rem;
  line-height: 1.5;
  color: var(--text-muted);
}
.menu-serve-note strong { color: var(--text); }


/* ============================================================
   MENU: three-price layout (Griyo/Snack, Dinner, Bowl)
   ============================================================ */
.menu3 { max-width: 860px; margin: 0 auto; }
.menu3-head,
.menu3-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 8rem 8rem 8rem;
  gap: 2px 14px;
}
.menu3-head {
  align-items: end;
  padding-bottom: 8px;
  margin-bottom: 4px;
  border-bottom: 2px solid var(--accent);
}
.menu3-h-item { font-weight: 800; }
.menu3-h-price {
  text-align: right;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--accent-strong);
  line-height: 1.2;
}
body.theme-yellow .menu3-h-price { color: var(--gold-700); }
.menu3-row {
  padding: 13px 0;
  border-bottom: 1px dashed var(--line);
  align-items: baseline;
}
.menu3-row:last-child { border-bottom: 0; }
.menu3-item { grid-column: 1; grid-row: 1; }
.menu3-name { font-weight: 700; }
.menu3-name small { font-weight: 600; color: var(--text-muted); font-size: .8rem; }
.menu3-desc {
  grid-column: 1 / -1;
  grid-row: 2;
  color: var(--text-muted);
  font-size: .88rem;
  margin: 4px 0 0;
  max-width: 60ch;
}
.menu3-price {
  text-align: right;
  font-weight: 800;
  font-size: .9rem;
  color: var(--accent-strong);
  line-height: 1.35;
}
body.theme-yellow .menu3-price { color: var(--gold-700); }

@media (max-width: 720px) {
  .menu3-head { display: none; }
  .menu3-row {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 15px 0;
  }
  .menu3-item { grid-column: 1; grid-row: auto; order: 1; }
  .menu3-desc { grid-column: 1; grid-row: auto; order: 2; margin: 4px 0 8px; }
  .menu3-price {
    grid-column: 1;
    grid-row: auto;
    order: 3;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    text-align: left;
    padding: 4px 0 0;
  }
  .menu3-price:empty { display: none; }
  .menu3-price::before {
    content: attr(data-label);
    font-weight: 700;
    font-size: .76rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted);
  }
}

/* ============================================================
   MENU: daily specials board
   ============================================================ */
.specials-board {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}
.special-day {
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 4px solid var(--accent);
  border-radius: var(--radius);
  padding: 16px 16px 18px;
  box-shadow: var(--shadow-sm);
}
.special-day h4 {
  margin: 0 0 10px;
  font-size: 1rem;
  color: var(--accent-strong);
  letter-spacing: .01em;
}
body.theme-yellow .special-day h4 { color: var(--gold-700); }
.special-day ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.special-day li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  font-size: .9rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.4;
}
/* Some specials carry no price in the source, so the row is name only. */
.special-price {
  font-weight: 800;
  white-space: nowrap;
  color: var(--accent-strong);
}
body.theme-yellow .special-price { color: var(--gold-700); }
@media (max-width: 900px) { .specials-board { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .specials-board { grid-template-columns: 1fr; } }

/* Menu bottom call to action */
.menu-cta { margin-top: clamp(30px, 5vw, 46px); text-align: center; }

/* ============================================================
   CONTRACTED SECTIONS: maps, QR, moments grid, menu photo cards
   ============================================================ */

/* Location blocks with an embedded map pin (home page) */
.loc-pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(24px, 4vw, 40px);
}
.loc-block {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow-sm);
}
.loc-block h3 { margin: 18px 0 6px; }
.loc-block .btn-directions { margin-top: 16px; }

/* Google Maps embed (location pin) */
.map-embed {
  position: relative;
  margin-top: 16px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg-alt);
  aspect-ratio: 16 / 10;
}
.map-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Menu QR code card */
.qr-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(20px, 4vw, 36px);
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(22px, 4vw, 36px);
  box-shadow: var(--shadow);
}
.qr-code {
  background: #fff;
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: var(--shadow-sm);
  line-height: 0;
}
.qr-code img { width: clamp(150px, 22vw, 210px); height: auto; display: block; }
.qr-body h2 { margin: 6px 0 10px; }
.qr-body p { color: var(--text-muted); margin: 0 0 18px; }
.qr-actions { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 680px) {
  .qr-card { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .qr-actions { justify-content: center; }
}

/* Manje Moments video grid */
.moments-pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(20px, 3vw, 32px);
  margin-top: clamp(28px, 4vw, 44px);
}
.moments-title {
  font-size: 1.05rem;
  margin: 0 0 12px;
  text-align: center;
}

/* Food photo cards above each location menu */
.menu-photos { margin-bottom: clamp(28px, 4vw, 44px); }
.menu-photos-note {
  text-align: center;
  color: var(--text-muted);
  font-size: .88rem;
  margin: 0 0 18px;
}
.menu-card { cursor: zoom-in; font: inherit; color: inherit; }
.menu-card:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

/* Footer opening-hours line */
.footer-hours { font-size: .86rem; color: var(--text-muted); }