/* ============================================================
   The Bronze Lily — Site Review Stylesheet (v2 — merged chassis)
   Locked typography: Cormorant Garamond (display) + Inter (body)
   Locked palette: black / cream / gold / forest / sage
   Chassis: v3 dark-hero + fixed transparent nav + trust bar
   ============================================================ */

:root {
  --black: #0D0D0D;
  --deep-charcoal: #1A1A1A;
  --ink: #1A1A1A;
  --new: #B85450; --ink-soft: rgba(13, 13, 13, 0.72);
  --cream: #F5F0EB;
  --cream-deep: #EDE4DA;
  --stone: #E8E0D8;
  --gold: #C9A96E;
  --gold-hover: #D4B97E;
  --gold-soft: rgba(201, 169, 110, 0.12);
  --forest: #1B3B2F;
  --sage: #6E8068;
  --sage-soft: rgba(110, 128, 104, 0.12);
  --bronze: #8B6914;
  --accent: var(--sage);

  --rule: rgba(13, 13, 13, 0.12);
  --rule-soft: rgba(13, 13, 13, 0.06);
  --rule-dark: rgba(245, 240, 235, 0.12);
  --rule-dark-soft: rgba(245, 240, 235, 0.06);
  --muted: rgba(13, 13, 13, 0.58);
  --muted-dark: rgba(245, 240, 235, 0.65);

  --maxw-narrow: 780px;
  --maxw: 1160px;
  --maxw-wide: 1320px;
  --maxw-content: 1200px;

  --radius-button: 4px;
  --radius-soft: 10px;
  --radius-organic: 20px 4px 20px 4px;
  --section-pad: clamp(60px, 8vw, 100px);
}

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

html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body {
  background: var(--black);
  color: var(--cream);
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.7;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; }

/* ---------- Display + bold text — LOCKED Pair A ---------- */
.display { font-family: 'Cormorant Garamond', serif; font-weight: 600; }
.display em, em.display, .display .italic { font-weight: 400; font-style: italic; }
.display-bold { font-family: 'Cormorant Garamond', serif; font-weight: 600; }

/* ---------- Review banner (sits above fixed nav) ---------- */
.review-banner {
  position: relative;
  z-index: 1100;
  background: var(--forest);
  color: var(--cream);
  padding: 10px 24px;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  text-align: center;
  border-bottom: 1px solid rgba(245, 240, 235, 0.15);
}
.review-banner strong { color: var(--gold); font-weight: 600; }
.review-banner a { color: var(--cream); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Fixed transparent nav (v3 chassis) ---------- */
.nav {
  position: fixed;
  top: 0; /* review banner removed — nav sits at the very top now */
  left: 0; right: 0;
  z-index: 1000;
  padding: 20px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background 0.4s ease, padding 0.3s ease, border-color 0.3s ease;
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(13, 13, 13, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 14px 40px;
  border-bottom-color: var(--rule-dark);
}
.nav-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.nav-logo-img {
  height: 32px; width: auto; object-fit: contain;
}
.nav-logo-placeholder {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  font-size: 22px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cream);
  padding: 6px 14px;
  border: 1px dashed rgba(201, 169, 110, 0.5);
  border-radius: 2px;
  white-space: nowrap;
}
.nav-logo-placeholder em {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--gold);
  font-size: 26px;
}
.nav-logo-placeholder::before {
  content: "LOGO";
  font-family: 'Inter', sans-serif;
  font-size: 8px;
  letter-spacing: 0.2em;
  color: rgba(201, 169, 110, 0.7);
  font-weight: 600;
  border-right: 1px solid rgba(201, 169, 110, 0.3);
  padding-right: 10px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: nowrap;
}
.nav-link {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-dark);
  transition: color 0.3s ease;
  position: relative;
  padding: 4px 0;
  white-space: nowrap;
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: -4px; left: 0;
  width: 0; height: 1px;
  background: var(--gold);
  transition: width 0.3s ease;
}
.nav-link:hover,
.nav-link.active { color: var(--cream); }
.nav-link:hover::after,
.nav-link.active::after { width: 100%; }

.nav-cta-cluster {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.nav-cta {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  background: var(--gold);
  color: var(--black);
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: var(--radius-button);
  transition: all 0.3s ease;
  white-space: nowrap;
}
.nav-cta:hover {
  background: var(--gold-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(201, 169, 110, 0.3);
}
.nav-cta-secondary {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  background: transparent;
  color: var(--cream);
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid rgba(245, 240, 235, 0.25);
  border-radius: var(--radius-button);
  transition: all 0.3s ease;
  white-space: nowrap;
}
.nav-cta-secondary:hover {
  border-color: var(--gold);
  color: var(--gold);
}

/* Mode toggle (sun/moon) */
.mode-toggle {
  background: transparent;
  border: 1px solid rgba(245, 240, 235, 0.2);
  border-radius: 50%;
  width: 36px; height: 36px;
  display: inline-flex;
  align-items: center; justify-content: center;
  color: rgba(245, 240, 235, 0.55);
  cursor: pointer;
  transition: all 0.3s ease;
  flex-shrink: 0;
}
.mode-toggle:hover {
  border-color: var(--gold);
  color: var(--gold);
}
.mode-toggle .icon-sun,
.mode-toggle .icon-moon { transition: opacity 0.3s ease; }
.mode-toggle .icon-sun { display: none; }
.mode-toggle .icon-moon { display: block; }

/* ---------- Nav scaling: keep ALL chrome visible (logo, links, Gift Cards, mode toggle, Book Now)
   from desktop down through iPad landscape (~1024px). Below 1024px the hamburger takes over.
   Shrink rather than hide. ---------- */
@media (max-width: 1440px) {
  .nav-links { gap: 18px; }
  .nav-link { font-size: 11.5px; letter-spacing: 0.10em; }
  .nav-logo { padding-right: 20px; }
  .nav-cta-secondary { padding: 6px 11px; font-size: 9.5px; letter-spacing: 0.10em; }
  .nav-cta { padding: 6px 12px; font-size: 9.5px; }
  .mode-toggle { width: 32px; height: 32px; }
  .nav-cta-cluster { gap: 7px; }
}
@media (max-width: 1280px) {
  .nav-links { gap: 14px; }
  .nav-link { font-size: 11px; letter-spacing: 0.08em; }
  .nav-logo-img { height: 30px; }
  .nav-logo { padding-right: 16px; }
  .nav-cta-secondary { padding: 5px 10px; font-size: 9px; letter-spacing: 0.08em; }
  .nav-cta { padding: 5px 11px; font-size: 9px; }
  .mode-toggle { width: 30px; height: 30px; }
  .mode-toggle svg { width: 14px; height: 14px; }
  .nav-cta-cluster { gap: 6px; }
}
@media (max-width: 1180px) {
  /* iPad landscape — aggressive tightening, everything still visible */
  .nav-links { gap: 10px; }
  .nav-link { font-size: 10.5px; letter-spacing: 0.06em; }
  .nav-logo-img { height: 28px; }
  .nav-logo { padding-right: 12px; }
  .nav-cta-secondary { padding: 5px 8px; font-size: 8.5px; letter-spacing: 0.06em; }
  .nav-cta { padding: 5px 9px; font-size: 8.5px; letter-spacing: 0.08em; }
  .mode-toggle { width: 28px; height: 28px; }
  .mode-toggle svg { width: 13px; height: 13px; }
  .nav-cta-cluster { gap: 5px; }
}
@media (max-width: 1080px) {
  /* Just above the hamburger breakpoint — last tightening pass */
  .nav-links { gap: 8px; }
  .nav-link { font-size: 10px; letter-spacing: 0.05em; }
  .nav-logo-img { height: 26px; }
  .nav-logo { padding-right: 10px; }
  .nav-cta-secondary { padding: 4px 7px; font-size: 8px; letter-spacing: 0.05em; }
  .nav-cta { padding: 4px 8px; font-size: 8px; }
  .mode-toggle { width: 26px; height: 26px; }
  .mode-toggle svg { width: 12px; height: 12px; }
  .nav-cta-cluster { gap: 4px; }
}

/* ---------- Section system ---------- */
main { display: block; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 40px; }
.wrap-narrow { max-width: var(--maxw-narrow); margin: 0 auto; padding: 0 40px; }
.wrap-content { max-width: var(--maxw-content); margin: 0 auto; padding: 0 40px; }

.section { padding: var(--section-pad) 0; }
.section-tight { padding: 56px 0; }
.section-dark { background: var(--black); color: var(--cream); }
.section-charcoal { background: var(--deep-charcoal); color: var(--cream); }
.section-cream { background: var(--cream); color: var(--black); }
.section-stone { background: var(--stone); color: var(--black); }
.section-forest { background: var(--forest); color: var(--cream); }
.section-sage { background: var(--sage); color: var(--cream); }

/* ---------- Hero (v3 dark chassis + Pair A type) ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  padding: 0 40px 80px;
  overflow: hidden;
  background: var(--black);
  color: var(--cream);
}
.hero-bg {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(13,13,13,0) 0%, rgba(13,13,13,0.25) 40%, rgba(13,13,13,0.9) 100%),
    radial-gradient(ellipse at 30% 30%, rgba(27, 59, 47, 0.4) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 60%, rgba(110, 128, 104, 0.2) 0%, transparent 50%),
    linear-gradient(135deg, #121a16 0%, #0D0D0D 40%, #181512 100%);
  pointer-events: none;
}
.hero-bg::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 70% 40%, rgba(201, 169, 110, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 20% 70%, rgba(110, 128, 104, 0.05) 0%, transparent 40%);
}
.hero-placeholder-label {
  position: absolute;
  bottom: 24px; right: 32px;
  z-index: 2;
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(245, 240, 235, 0.28);
}
.hero-content {
  position: relative;
  z-index: 2;
  max-width: var(--maxw-content);
  width: 100%;
  margin: 0 auto;
}
.hero-eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 24px;
}
.hero h1 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  font-size: clamp(48px, 6vw, 88px);
  line-height: 1.02;
  letter-spacing: -0.015em;
  color: var(--cream);
  margin: 0 0 28px;
  max-width: 16ch;
}
.hero h1 em {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 400;
  color: var(--gold);
  letter-spacing: -0.01em;
}
.hero-sub {
  font-family: 'Inter', sans-serif;
  font-size: clamp(15px, 1.2vw, 17px);
  font-weight: 300;
  line-height: 1.7;
  color: var(--muted-dark);
  max-width: 52ch;
  margin: 0 0 36px;
}
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; }

/* ---------- Trust bar (v3 chassis) — 5 items, single line on desktop/iPad ---------- */
.trust-bar {
  background: var(--deep-charcoal);
  border-top: 1px solid var(--rule-dark);
  border-bottom: 1px solid var(--rule-dark);
  padding: 26px 24px;
}
.trust-bar-inner {
  max-width: 1320px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: clamp(16px, 2.4vw, 36px);
  flex-wrap: nowrap;
}
.trust-item {
  text-align: center;
  padding: 4px 0;
  flex: 1 1 0;
  min-width: 0;
}
.trust-number {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  font-size: clamp(26px, 2.4vw, 32px);
  line-height: 1;
  color: var(--gold);
  letter-spacing: -0.01em;
}
.trust-label {
  font-family: 'Inter', sans-serif;
  font-size: clamp(9.5px, 0.78vw, 11px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-dark);
  font-weight: 500;
  margin-top: 8px;
  line-height: 1.4;
}
/* iPad portrait / smaller — wrap to 2 rows so labels stay legible */
@media (max-width: 900px) {
  .trust-bar-inner { flex-wrap: wrap; justify-content: center; gap: 18px 28px; }
  .trust-item { flex: 0 1 auto; min-width: 140px; }
}

/* ---------- Eyebrows + headings ---------- */
.eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sage);
  margin: 0 0 16px;
}
.section-dark .eyebrow,
.section-charcoal .eyebrow,
.section-forest .eyebrow,
.section-sage .eyebrow { color: var(--gold); }

.h-section {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  font-size: clamp(32px, 3.4vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 0 0 20px;
}
.h-section em { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 400; color: var(--gold); }
.section-cream .h-section em, .section-stone .h-section em { color: var(--bronze); }

.h-sub {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  font-size: clamp(24px, 2.2vw, 32px);
  line-height: 1.15;
  margin: 0 0 14px;
}
.h-sub em { font-style: italic; font-weight: 400; color: var(--gold); }
.section-cream .h-sub em, .section-stone .h-sub em { color: var(--bronze); }

.h-card {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -0.005em;
  margin: 0 0 10px;
}
.h-card em { font-style: italic; font-weight: 400; color: var(--gold); }

.lede {
  font-family: 'Inter', sans-serif;
  font-size: 17px;
  line-height: 1.65;
  color: var(--muted-dark);
  max-width: 58ch;
  margin: 0 0 28px;
  font-weight: 300;
}
.section-cream .lede, .section-stone .lede { color: var(--muted); }

.body p {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  line-height: 1.8;
  color: var(--cream);
  margin: 0 0 16px;
  max-width: 62ch;
  font-weight: 300;
}
.section-cream .body p, .section-stone .body p { color: var(--black); font-weight: 400; }
.body p strong { font-weight: 600; }

.pullquote {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-style: italic;
  font-size: clamp(28px, 2.8vw, 40px);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--cream);
  margin: 0 0 24px;
  max-width: 54ch;
}
.section-cream .pullquote, .section-stone .pullquote { color: var(--black); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  padding: 14px 28px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: var(--radius-button);
  border: 1px solid transparent;
  transition: all 0.3s ease;
}
.btn-primary { background: var(--gold); color: var(--black); }
.btn-primary:hover { background: var(--gold-hover); transform: translateY(-1px); box-shadow: 0 4px 20px rgba(201, 169, 110, 0.3); }
.btn-secondary {
  background: transparent;
  color: var(--cream);
  border-color: rgba(245, 240, 235, 0.25);
}
.btn-secondary:hover { border-color: var(--gold); color: var(--gold); }
/* Secondary (outlined) buttons on LIGHT-background sections must use dark text in any mode */
:is(.section-stone, .section-cream) .btn-secondary { color: #1B3B2F !important; border-color: rgba(26, 26, 26, 0.22) !important; }
:is(.section-stone, .section-cream) .btn-secondary:hover { color: var(--bronze) !important; border-color: var(--bronze) !important; }
.btn-on-light { color: var(--black); border-color: rgba(13, 13, 13, 0.2); }
.btn-on-light:hover { border-color: var(--bronze); color: var(--bronze); }
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------- Placeholder gradients (photos go here post-Mooi) ---------- */
.ph {
  max-width: 100%;
  position: relative;
  display: flex;
  align-items: flex-end;
  padding: 18px;
  min-height: 220px;
  background: linear-gradient(135deg, rgba(110, 128, 104, 0.35) 0%, rgba(27, 59, 47, 0.7) 100%);
  overflow: hidden;
}
.ph::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 30% 20%, rgba(201, 169, 110, 0.15) 0%, transparent 50%);
  pointer-events: none;
}
.ph-warm { background: linear-gradient(135deg, rgba(232, 224, 216, 0.9) 0%, rgba(201, 169, 110, 0.5) 100%); }
.ph-warm::after { background: radial-gradient(ellipse at 30% 20%, rgba(245, 240, 235, 0.4) 0%, transparent 60%); }
.ph-deep { background: linear-gradient(135deg, rgba(27, 59, 47, 0.9) 0%, rgba(13, 13, 13, 0.95) 100%); }
.ph-deep::after { background: radial-gradient(ellipse at 30% 20%, rgba(201, 169, 110, 0.18) 0%, transparent 55%); }

.ph-hero { aspect-ratio: 16 / 10; min-height: 420px; }
.ph-portrait { aspect-ratio: 4 / 5; min-height: 460px; border-radius: var(--radius-organic); }
.ph-square { aspect-ratio: 1 / 1; }
.ph-wide { aspect-ratio: 21 / 9; min-height: 320px; }
.ph-card { aspect-ratio: 4 / 3; min-height: 240px; }
.ph-tall { aspect-ratio: 3 / 4; min-height: 320px; }

.ph-label {
  position: relative;
  z-index: 2;
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(13, 13, 13, 0.42);
  background: rgba(245, 240, 235, 0.72);
  padding: 5px 10px;
  border-radius: 2px;
}
.ph-deep .ph-label,
.ph .ph-label {
  color: rgba(245, 240, 235, 0.7);
  background: rgba(13, 13, 13, 0.45);
}
.ph-warm .ph-label { color: rgba(13, 13, 13, 0.55); background: rgba(245, 240, 235, 0.85); }

/* ---------- Grid utilities ---------- */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
.grid-split { display: grid; grid-template-columns: 5fr 7fr; gap: 56px; align-items: center; }
.grid-split-reverse { display: grid; grid-template-columns: 7fr 5fr; gap: 56px; align-items: center; }

@media (max-width: 900px) {
  .grid-2, .grid-3, .grid-4, .grid-5 { grid-template-columns: 1fr; gap: 28px; }
  .grid-split, .grid-split-reverse { grid-template-columns: 1fr; gap: 32px; }
  .wrap, .wrap-narrow, .wrap-content { padding: 0 24px; }
}

/* ---------- Pillar cards (service grid) ---------- */
.pillar-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-decoration: none;
  color: inherit;
  border-top: 1px solid var(--rule-dark);
  padding-top: 20px;
  transition: border-top-color 0.3s ease;
  min-height: 100%;
}
.section-cream .pillar-card,
.section-stone .pillar-card { border-top-color: var(--rule); }
.pillar-card:hover { border-top-color: var(--gold); }
.pillar-hook {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  line-height: 1.65;
  color: var(--muted-dark);
  margin: 0;
  font-weight: 300;
}
.section-cream .pillar-hook, .section-stone .pillar-hook { color: var(--muted); }
.pillar-starting {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
}
.section-cream .pillar-starting, .section-stone .pillar-starting { color: var(--bronze); }
.pillar-link {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cream);
  margin-top: auto;
}
.section-cream .pillar-link, .section-stone .pillar-link { color: var(--black); }
.pillar-link::after { content: " →"; }

/* ---------- Pricing table ---------- */
.pricing { margin: 0; }
.pricing-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 22px 0; gap: 20px;
  border-bottom: 1px solid var(--rule-dark);
}
.section-cream .pricing-row, .section-stone .pricing-row { border-bottom-color: var(--rule); }
.pricing-row:last-child { border-bottom: none; }
.pricing-service {
  font-family: 'Inter', sans-serif;
  font-size: 18px; font-weight: 600;
  color: var(--cream);
  letter-spacing: -0.005em;
}
.section-cream .pricing-service, .section-stone .pricing-service { color: var(--black); }
.pricing-service-desc {
  display: block;
  font-weight: 300;
  color: var(--muted-dark);
  font-size: 12px;
  margin-top: 6px;
  line-height: 1.5;
  letter-spacing: 0;
}
.section-cream .pricing-service-desc, .section-stone .pricing-service-desc { color: var(--muted); }
.pricing-price {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-size: 38px;
  letter-spacing: -0.015em;
  line-height: 1;
  color: var(--cream);
  flex-shrink: 0;
}
.section-cream .pricing-price, .section-stone .pricing-price { color: var(--black); }

/* ---------- FAQ ---------- */
.faq-item { padding: 22px 0; border-bottom: 1px solid var(--rule-dark); }
.section-cream .faq-item, .section-stone .faq-item { border-bottom-color: var(--rule); }
.faq-item:last-child { border-bottom: none; }

/* ---------- FAQ accordion pattern (used on head-spa, spray-tan, lash, brow-bar v3) ---------- */
.faq-accordion {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--rule-dark, rgba(245,240,235,0.12));
}
.faq-item-accordion {
  border-bottom: 1px solid var(--rule-dark, rgba(245,240,235,0.12));
}
.faq-item-accordion summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 0;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 20px;
  font-weight: 500;
  color: var(--cream, #f5ebe0);
  letter-spacing: 0.01em;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  transition: color 0.2s ease;
}
.faq-item-accordion summary::-webkit-details-marker { display: none; }
.faq-item-accordion summary::after {
  content: '+';
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 22px;
  color: var(--bronze, #c9a96e);
  transition: transform 0.3s ease;
  flex-shrink: 0;
}
.faq-item-accordion[open] summary::after { transform: rotate(45deg); }
.faq-item-accordion summary:hover { color: var(--bronze, #c9a96e); }
.faq-a-body {
  padding: 0 0 24px 0;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  line-height: 1.75;
  color: rgba(245, 240, 235, 0.78);
  max-width: 72ch;
}
.faq-a-body p + p { margin-top: 14px; }
.faq-a-body ul { margin: 10px 0 10px 20px; }
.faq-a-body ul li { margin-bottom: 6px; }
.faq-a-body a { color: var(--bronze, #c9a96e); text-decoration: underline; text-underline-offset: 3px; }

/* Light-section variants (when FAQ lives on cream / stone backgrounds) */
.section-cream .faq-accordion,
.section-stone .faq-accordion,
.section-cream .faq-item-accordion,
.section-stone .faq-item-accordion { border-color: rgba(26, 26, 26, 0.12); }
.section-cream .faq-item-accordion summary,
.section-stone .faq-item-accordion summary { color: #1a1a1a; }
.section-cream .faq-item-accordion summary:hover,
.section-stone .faq-item-accordion summary:hover { color: var(--bronze, #c9a96e); }
.section-cream .faq-a-body,
.section-stone .faq-a-body { color: rgba(26, 26, 26, 0.78); }

/* Light mode (manual mode toggle on dark sections) */
body.light-mode .faq-item-accordion summary { color: #1a1a1a; }
body.light-mode .faq-item-accordion summary:hover { color: var(--bronze, #c9a96e); }
body.light-mode .faq-a-body { color: rgba(26, 26, 26, 0.78); }
body.light-mode .faq-accordion,
body.light-mode .faq-item-accordion { border-color: rgba(26, 26, 26, 0.12); }
.faq-q {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  font-size: 22px;
  line-height: 1.3;
  margin: 0 0 12px;
  letter-spacing: -0.005em;
}
.faq-a {
  font-family: 'Inter', sans-serif;
  font-size: 14px; line-height: 1.7;
  color: var(--muted-dark); margin: 0;
  max-width: 62ch; font-weight: 300;
}
.section-cream .faq-a, .section-stone .faq-a { color: var(--muted); font-weight: 400; }

/* ---------- Booking bridge (4-path) ---------- */
.bridge-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgba(245, 240, 235, 0.18);
}
.bridge-card {
  padding: 44px 28px;
  border-right: 1px solid rgba(245, 240, 235, 0.18);
  border-bottom: 1px solid rgba(245, 240, 235, 0.18);
  display: flex;
  flex-direction: column;
  gap: 14px;
  color: var(--cream);
  transition: background 0.3s ease;
}
.bridge-card:last-child { border-right: none; }
.bridge-card:hover { background: rgba(245, 240, 235, 0.04); }
.bridge-card-num {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400; font-style: italic;
  font-size: 48px; line-height: 1;
  color: var(--gold);
}
.bridge-card-headline {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  font-size: 28px; line-height: 1.1;
}
.bridge-card-sub {
  font-family: 'Inter', sans-serif;
  font-size: 13px; line-height: 1.55;
  color: var(--muted-dark); margin: 0;
  font-weight: 300;
}
.bridge-card-cta {
  font-family: 'Inter', sans-serif;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold); margin-top: auto; padding-top: 14px;
}
.bridge-card-cta::after { content: " →"; }
@media (max-width: 900px) {
  .bridge-grid { grid-template-columns: 1fr 1fr; }
  .bridge-card:nth-child(2) { border-right: none; }
}
@media (max-width: 600px) { .bridge-grid { grid-template-columns: 1fr; } .bridge-card { border-right: none !important; } }

/* ---------- Strip (conditions / glossary) ---------- */
.strip {
  padding: 44px; border-radius: 2px;
  background: var(--sage-soft);
  border-left: 3px solid var(--sage);
}
.section-cream .strip, .section-stone .strip {
  background: var(--cream-deep);
}
.strip-prompt {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  font-size: 28px; line-height: 1.2;
  margin: 0 0 16px;
}
.strip-list {
  font-family: 'Inter', sans-serif;
  font-size: 14px; line-height: 1.95;
  color: var(--muted-dark); margin: 0 0 20px;
  font-weight: 300;
}
.section-cream .strip-list, .section-stone .strip-list { color: var(--muted); }
.strip-ctas { display: flex; gap: 28px; flex-wrap: wrap; }
.strip-ctas a {
  font-family: 'Inter', sans-serif;
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--cream); text-decoration: none;
  border-bottom: 1px solid var(--gold);
  padding-bottom: 3px;
}
.section-cream .strip-ctas a, .section-stone .strip-ctas a { color: var(--black); }

/* ---------- Badge ---------- */
.badge {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase; font-weight: 600;
  color: var(--gold);
  padding: 3px 9px;
  background: var(--gold-soft);
  border-radius: 2px;
}

/* ---------- Site footer ---------- */
.site-footer {
  background: var(--black);
  color: var(--cream);
  padding: 80px 0 40px;
  border-top: 1px solid var(--rule-dark);
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--rule-dark);
}
.footer-brand-block .brand-img {
  height: 40px;
  width: auto;
  margin-bottom: 18px;
}
.footer-brand-block .brand {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  font-size: 30px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.footer-brand-block .brand em { font-style: italic; font-weight: 400; color: var(--gold); }
.footer-brand-block p {
  font-family: 'Inter', sans-serif;
  font-size: 14px; line-height: 1.7;
  color: var(--muted-dark); max-width: 36ch;
  margin: 0 0 18px; font-weight: 300;
}
.footer-col h4 {
  font-family: 'Inter', sans-serif;
  font-size: 11px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--gold);
  font-weight: 600; margin: 0 0 18px;
}
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 10px; }
.footer-col a {
  font-family: 'Inter', sans-serif;
  font-size: 13px; color: var(--cream);
  text-decoration: none; transition: color 0.2s ease;
  font-weight: 300;
}
.footer-col a:hover { color: var(--gold); }
.footer-meta {
  padding-top: 32px;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px;
  font-family: 'Inter', sans-serif;
  font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted-dark);
}
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 600px) { .footer-grid { grid-template-columns: 1fr; } }

/* ---------- Stat row (kept for compatibility) ---------- */
.stat-row {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 24px; padding: 28px 0;
  border-top: 1px solid var(--rule-dark);
  border-bottom: 1px solid var(--rule-dark);
}
.section-cream .stat-row, .section-stone .stat-row { border-color: var(--rule); }
.stat { text-align: center; }
.stat-num {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600; font-size: 38px;
  line-height: 1; color: var(--gold);
}
.stat-label {
  font-family: 'Inter', sans-serif;
  font-size: 10px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--muted-dark);
  font-weight: 500; margin-top: 8px;
}
@media (max-width: 700px) { .stat-row { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Helpers ---------- */
.center { text-align: center; }
.muted { color: var(--muted-dark); }
.gold { color: var(--gold); }
.divider-line { border-top: 1px solid var(--rule-dark); margin: 56px 0; }
.section-cream .divider-line, .section-stone .divider-line { border-top-color: var(--rule); }

/* ---------- Review navigator cards ---------- */
.nav-index-card {
  display: flex; flex-direction: column; gap: 10px;
  padding: 28px; background: var(--deep-charcoal);
  border-left: 3px solid var(--sage);
  text-decoration: none; color: inherit;
  transition: border-left-color 0.2s ease, transform 0.2s ease;
}
.nav-index-card:hover { border-left-color: var(--gold); transform: translateX(4px); }
.nav-index-card .page-tag {
  font-family: 'Inter', sans-serif;
  font-size: 10px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--sage);
  font-weight: 600;
}
.nav-index-card h3 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600; font-size: 26px; line-height: 1.1; margin: 0;
}
.nav-index-card h3 em { font-style: italic; font-weight: 400; color: var(--gold); }
.nav-index-card p {
  font-family: 'Inter', sans-serif;
  font-size: 13px; line-height: 1.6;
  color: var(--muted-dark); margin: 0; font-weight: 300;
}
.nav-index-card .page-cta {
  font-family: 'Inter', sans-serif;
  font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--cream);
  font-weight: 600; margin-top: auto;
}
.nav-index-card .page-cta::after { content: " →"; }
.nav-index-card.pending { opacity: 0.5; pointer-events: none; }
.nav-index-card.pending .page-cta::after { content: " · coming next"; }

/* ============================================================
   LIGHT MODE — toggle with .mode-toggle in nav
   Dark-first build; .light-mode on <body> flips to warm cream
   ============================================================ */
body.light-mode {
  background: #FAF8F5;
  color: #1B3B2F;
}
body.light-mode .mode-toggle { border-color: rgba(26, 26, 26, 0.2); color: rgba(26, 26, 26, 0.55); }
body.light-mode .mode-toggle:hover { border-color: var(--bronze); color: var(--bronze); }
body.light-mode .mode-toggle .icon-sun { display: block; }
body.light-mode .mode-toggle .icon-moon { display: none; }

/* Nav */
body.light-mode .nav { color: #1B3B2F; }
body.light-mode .nav.scrolled { background: rgba(250, 248, 245, 0.95); border-bottom-color: rgba(26, 26, 26, 0.08); }
body.light-mode .nav-logo-placeholder { color: #1B3B2F; border-color: rgba(139, 105, 20, 0.4); }
body.light-mode .nav-logo-placeholder em { color: var(--bronze); }
body.light-mode .nav-logo-placeholder::before { color: rgba(139, 105, 20, 0.6); border-right-color: rgba(139, 105, 20, 0.3); }
body.light-mode .nav-link { color: rgba(26, 26, 26, 0.55); }
body.light-mode .nav-link:hover,
body.light-mode .nav-link.active { color: #1B3B2F; }
body.light-mode .nav-link::after { background: var(--bronze); }
body.light-mode .nav-cta-secondary { color: #1B3B2F; border-color: rgba(26, 26, 26, 0.2); }
body.light-mode .nav-cta-secondary:hover { border-color: var(--bronze); color: var(--bronze); }

/* Hero → warm cream */
body.light-mode .hero { background: #FAF8F5; color: #1B3B2F; }
body.light-mode .hero-bg {
  background:
    linear-gradient(180deg, rgba(250,248,245,0) 0%, rgba(250,248,245,0.2) 40%, rgba(250,248,245,0.9) 100%),
    radial-gradient(ellipse at 30% 30%, rgba(139, 105, 20, 0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 60%, rgba(201, 169, 110, 0.08) 0%, transparent 50%),
    linear-gradient(135deg, #F5EFE6 0%, #FAF8F5 40%, #F2EBE0 100%);
}
body.light-mode .hero-bg::before {
  background:
    radial-gradient(ellipse at 70% 40%, rgba(139, 105, 20, 0.05) 0%, transparent 50%),
    radial-gradient(ellipse at 20% 70%, rgba(201, 169, 110, 0.06) 0%, transparent 40%);
}
body.light-mode .hero-eyebrow { color: var(--bronze); }
body.light-mode .hero h1 { color: #1B3B2F; }
body.light-mode .hero h1 em { color: var(--bronze); }
body.light-mode .hero-sub { color: rgba(26, 26, 26, 0.55); }
body.light-mode .hero-placeholder-label { color: rgba(26, 26, 26, 0.28); }
body.light-mode .btn-secondary { color: #1B3B2F; border-color: rgba(26, 26, 26, 0.2); }
body.light-mode .btn-secondary:hover { border-color: var(--bronze); color: var(--bronze); }

/* Trust bar */
body.light-mode .trust-bar { background: #F0EDE8; border-color: rgba(26, 26, 26, 0.08); }
body.light-mode .trust-number { color: var(--bronze); }
body.light-mode .trust-label { color: rgba(26, 26, 26, 0.5); }

/* Dark sections → warm cream */
body.light-mode .section-dark,
body.light-mode .section-charcoal { background: #FAF8F5; color: #1B3B2F; }
body.light-mode .section-charcoal { background: #F5EFE6; }
body.light-mode .section-dark .eyebrow,
body.light-mode .section-charcoal .eyebrow { color: var(--bronze); }
body.light-mode .section-dark .h-section,
body.light-mode .section-charcoal .h-section { color: #1B3B2F; }
body.light-mode .section-dark .h-section em,
body.light-mode .section-charcoal .h-section em { color: var(--bronze); }
body.light-mode .section-dark .h-sub em,
body.light-mode .section-charcoal .h-sub em { color: var(--bronze); }
body.light-mode .section-dark .h-card em,
body.light-mode .section-charcoal .h-card em { color: var(--bronze); }
body.light-mode .section-dark .lede,
body.light-mode .section-charcoal .lede { color: rgba(26, 26, 26, 0.55); }
body.light-mode .section-dark .body p,
body.light-mode .section-charcoal .body p { color: #1B3B2F; font-weight: 400; }
body.light-mode .section-dark .pullquote,
body.light-mode .section-charcoal .pullquote { color: #1B3B2F; }
body.light-mode .section-dark .pillar-card,
body.light-mode .section-charcoal .pillar-card { border-top-color: rgba(26, 26, 26, 0.12); }
body.light-mode .section-dark .pillar-hook,
body.light-mode .section-charcoal .pillar-hook { color: rgba(26, 26, 26, 0.58); }
body.light-mode .section-dark .pillar-starting,
body.light-mode .section-charcoal .pillar-starting { color: var(--bronze); }
body.light-mode .section-dark .pillar-link,
body.light-mode .section-charcoal .pillar-link { color: #1B3B2F; }

/* Forest → deeper bronze-accented green (still readable in light) */
body.light-mode .section-forest { background: #E8E5DC; color: #1B3B2F; }
body.light-mode .section-forest .eyebrow { color: var(--bronze); }
body.light-mode .section-forest .h-section em,
body.light-mode .section-forest .h-sub em,
body.light-mode .section-forest .h-card em { color: var(--bronze); }
body.light-mode .section-forest .lede { color: rgba(26, 26, 26, 0.55); }
body.light-mode .section-forest .body p { color: #1B3B2F; }

/* Sage section → soft herbal */
body.light-mode .section-sage { background: #DFE4DA; color: #1B3B2F; }
body.light-mode .section-sage .eyebrow { color: var(--bronze); }

/* Booking bridge (forest) in light mode */
body.light-mode .bridge-grid { border-top-color: rgba(26, 26, 26, 0.15); }
body.light-mode .bridge-card { border-right-color: rgba(26, 26, 26, 0.15); border-bottom-color: rgba(26, 26, 26, 0.15); color: #1B3B2F; }
body.light-mode .bridge-card:hover { background: rgba(139, 105, 20, 0.04); }
body.light-mode .bridge-card-num { color: var(--bronze); }
body.light-mode .bridge-card-sub { color: rgba(26, 26, 26, 0.55); }
body.light-mode .bridge-card-cta { color: var(--bronze); }

/* Pricing + FAQ in dark-labeled sections */
body.light-mode .section-dark .pricing-service,
body.light-mode .section-charcoal .pricing-service,
body.light-mode .section-dark .pricing-price,
body.light-mode .section-charcoal .pricing-price { color: #1B3B2F; }
body.light-mode .section-dark .pricing-row,
body.light-mode .section-charcoal .pricing-row { border-bottom-color: rgba(26, 26, 26, 0.1); }
body.light-mode .section-dark .pricing-service-desc,
body.light-mode .section-charcoal .pricing-service-desc { color: rgba(26, 26, 26, 0.55); }
body.light-mode .section-dark .faq-item,
body.light-mode .section-charcoal .faq-item { border-bottom-color: rgba(26, 26, 26, 0.1); }
body.light-mode .section-dark .faq-a,
body.light-mode .section-charcoal .faq-a { color: rgba(26, 26, 26, 0.58); font-weight: 400; }

/* Strip boxes */
body.light-mode .strip { background: rgba(139, 105, 20, 0.06); border-left-color: var(--bronze); }
body.light-mode .strip-list { color: rgba(26, 26, 26, 0.55); }
body.light-mode .strip-ctas a { color: #1B3B2F; border-bottom-color: var(--bronze); }

/* Footer */
body.light-mode .site-footer { background: #F5EFE6; color: #1B3B2F; border-top-color: rgba(26, 26, 26, 0.1); }
body.light-mode .footer-grid { border-bottom-color: rgba(26, 26, 26, 0.1); }
body.light-mode .footer-brand-block .brand em { color: var(--bronze); }
body.light-mode .footer-brand-block p { color: rgba(26, 26, 26, 0.55); }
body.light-mode .footer-col h4 { color: var(--bronze); }
body.light-mode .footer-col a { color: #1B3B2F; }
body.light-mode .footer-col a:hover { color: var(--bronze); }
body.light-mode .footer-meta { color: rgba(26, 26, 26, 0.45); }

/* Review banner stays forest in light mode — anchor element */
body.light-mode .review-banner { background: var(--forest); color: var(--cream); }
body.light-mode .review-banner strong { color: var(--gold); }

/* Navigator cards */
body.light-mode .nav-index-card { background: #F0EDE8; border-left-color: var(--bronze); }
body.light-mode .nav-index-card h3 { color: #1B3B2F; }
body.light-mode .nav-index-card h3 em { color: var(--bronze); }
body.light-mode .nav-index-card p { color: rgba(26, 26, 26, 0.55); }
body.light-mode .nav-index-card .page-cta { color: #1B3B2F; }
body.light-mode .nav-index-card .page-tag { color: var(--bronze); }

/* ═══════════════════════════════════════════════
   LIGHT MODE — v3 CHASSIS OVERRIDES
   Applies to home-v3 + any page using the v3 nav/footer/logo pattern.
   Swap cream logo to dark logo; fix footer v3 text/chip colors;
   flip hamburger lines to dark.
   ═══════════════════════════════════════════════ */

/* Logo swap — cream PNG becomes dark PNG in light mode */
body.light-mode .nav-logo-img,
body.light-mode .footer-logo-img-v3,
body.light-mode .mobile-menu-header img {
  content: url('logo-dark.png');
}

/* Footer v3 tagline + address */
body.light-mode .footer-tagline-v3 { color: rgba(26, 26, 26, 0.75); }
body.light-mode .footer-address-block { color: rgba(26, 26, 26, 0.7); }
body.light-mode .footer-address-block a { color: #1B3B2F; }
body.light-mode .footer-address-block a:hover { color: var(--bronze); }

/* Footer chips (parking, google rating) */
body.light-mode .footer-chips { color: rgba(26, 26, 26, 0.75); }
body.light-mode .footer-chip {
  background: rgba(26, 26, 26, 0.04);
  border-color: rgba(26, 26, 26, 0.1);
  color: #1B3B2F;
}
body.light-mode .footer-chip svg { stroke: var(--bronze); }
body.light-mode .footer-chip-stars { color: var(--gold); }

/* Hamburger lines flip to dark in light mode */
body.light-mode .nav-hamburger { border-color: rgba(26, 26, 26, 0.2); }
body.light-mode .nav-hamburger:hover { border-color: var(--bronze); }
body.light-mode .nav-hamburger-lines span { background: #1A1A1A; }

/* Mobile menu panel stays dark by design (slide-out feels premium dark)
   but if we ever want it to flip, uncomment:
   body.light-mode .mobile-menu-panel { background: #FAF8F5; color: #1B3B2F; }
*/

/* ═══════════════════════════════════════════════════════════
   MOBILE MENU + REVIEW PREVIEW CHROME
   Previously inline in each v3 page — moved here so any new
   page that uses the v3 nav HTML pattern gets the right
   hide-by-default behavior without needing the inline block.
   Reason: without this CSS, .mobile-menu-panel and
   .mobile-preview-overlay render as visible blocks and the
   logo img inside renders huge at the top of the page.
   ═══════════════════════════════════════════════════════════ */

/* Review preview overlay — hidden by default, shown when .active */
.mobile-preview-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(13, 13, 13, 0.92);
  z-index: 10000;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
}
.mobile-preview-overlay.active { display: flex; }
.mobile-preview-frame {
  width: 390px;
  max-width: 100%;
  height: 844px;
  max-height: calc(100vh - 140px);
  background: #000;
  border: 10px solid #1a1a1a;
  border-radius: 40px;
  box-shadow: 0 20px 80px rgba(0, 0, 0, 0.6), 0 0 0 2px rgba(201, 169, 110, 0.3);
  overflow: hidden;
  position: relative;
}
.mobile-preview-frame::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 24px;
  background: #1a1a1a;
  border-radius: 0 0 14px 14px;
  z-index: 2;
}
.mobile-preview-frame iframe {
  width: 100%;
  height: 100%;
  border: none;
  background: #fff;
}
.mobile-preview-close {
  padding: 10px 20px;
  background: var(--gold);
  color: var(--black);
  border: none;
  border-radius: 3px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  cursor: pointer;
}
.mobile-preview-label {
  color: var(--cream);
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  opacity: 0.7;
}
.mobile-preview-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 16px;
  padding: 4px 10px;
  background: rgba(201, 169, 110, 0.15);
  border: 1px solid rgba(201, 169, 110, 0.4);
  color: var(--gold);
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.mobile-preview-btn:hover {
  background: rgba(201, 169, 110, 0.25);
  border-color: var(--gold);
}
body.embedded-preview .review-banner,
body.embedded-preview .mobile-preview-btn { display: none !important; }

/* Footer logo image */
.footer-logo-img-v3 {
  display: block;
  width: 180px;
  height: auto;
  margin-bottom: 18px;
}

/* Hamburger button — hidden on desktop, shown on mobile breakpoint */
.nav-hamburger {
  display: none;
  background: transparent;
  border: 1px solid rgba(245, 240, 235, 0.25);
  border-radius: 6px;
  width: 40px;
  height: 40px;
  padding: 0;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: border-color 0.3s ease;
}
.nav-hamburger:hover { border-color: var(--gold); }
.nav-hamburger-lines { width: 18px; height: 12px; position: relative; }
.nav-hamburger-lines span {
  position: absolute;
  left: 0;
  right: 0;
  height: 1.5px;
  background: var(--cream);
  transition: all 0.3s ease;
}
.nav-hamburger-lines span:nth-child(1) { top: 0; }
.nav-hamburger-lines span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.nav-hamburger-lines span:nth-child(3) { bottom: 0; }

/* Mobile menu panel — slides in from right when .open */
.mobile-menu-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(86vw, 360px);
  background: #0D0D0D;
  z-index: 9999;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  padding: 24px;
  box-shadow: -20px 0 60px rgba(0, 0, 0, 0.5);
  overflow-y: auto;
}
.mobile-menu-panel.open { transform: translateX(0); }
.mobile-menu-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(13, 13, 13, 0.7);
  z-index: 9998;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.mobile-menu-backdrop.open { opacity: 1; pointer-events: auto; }
.mobile-menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 20px;
  margin-bottom: 24px;
  border-bottom: 1px solid rgba(245, 240, 235, 0.1);
}
.mobile-menu-header img { height: 28px; width: auto; }
.mobile-menu-close {
  background: transparent;
  border: 1px solid rgba(245, 240, 235, 0.2);
  border-radius: 50%;
  width: 34px;
  height: 34px;
  color: var(--cream);
  font-size: 18px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.mobile-menu-close:hover { border-color: var(--gold); color: var(--gold); }
.mobile-menu-links {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 28px;
}
.mobile-menu-links a {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  font-weight: 400;
  color: var(--cream);
  padding: 12px 0;
  border-bottom: 1px solid rgba(245, 240, 235, 0.06);
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: color 0.2s ease, padding-left 0.2s ease;
}
.mobile-menu-links a:hover { color: var(--gold); padding-left: 4px; }
.mobile-menu-ctas {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: auto;
  padding-top: 20px;
}
.mobile-menu-ctas .nav-cta,
.mobile-menu-ctas .nav-cta-secondary {
  width: 100%;
  justify-content: center;
  padding: 14px 20px;
  font-size: 12px;
}
.mobile-menu-phone {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  letter-spacing: 0.15em;
  color: var(--gold);
  text-align: center;
  padding-top: 16px;
  text-decoration: none;
}

@media (max-width: 1024px) {
  /* Mobile hamburger kicks in */
  .nav { padding: 14px 18px !important; flex-wrap: nowrap !important; gap: 10px !important; }
  .nav-logo-img { height: 28px; }
  .nav-links { display: none !important; }
  .nav-cta-secondary { display: none !important; }
  .mode-toggle { display: none !important; }
  .nav-cta-cluster { gap: 8px; }
  .nav-cta { padding: 8px 14px !important; font-size: 10px !important; letter-spacing: 0.1em !important; }
  .nav-hamburger { display: inline-flex; }
  .review-banner { font-size: 10px; padding: 8px 12px; }
  .mobile-preview-btn { margin-left: 8px; padding: 3px 8px; font-size: 10px; }
}
body.mobile-menu-open { overflow: hidden; }

/* ── Calligraphy script words (hand-lettered hero accents) ── */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.script-word{display:inline-block;width:auto;height:1.5em;vertical-align:-0.35em;}
h1 .script-word{height:1.55em;}
@media(max-width:600px){.script-word{height:1.25em;}}


/* ── Footer chips (parking pill + Google review) — gold detail, all pages ── */
.footer-chips{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:16px;}
.footer-chip{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;background:rgba(201,169,110,0.08);border:1px solid rgba(201,169,110,0.22);border-radius:999px;font-family:'Inter',sans-serif;font-size:11px;font-weight:500;letter-spacing:0.08em;color:var(--gold);white-space:nowrap;}
.footer-chip svg{flex-shrink:0;}
.footer-chip-stars{color:var(--gold);letter-spacing:0;margin-right:2px;}


/* ── Footer brand-block typography (tagline + address) — base rules so all pages match ── */
.footer-tagline-v3{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:16px;color:var(--cream);line-height:1.4;margin:0 0 28px 0;white-space:nowrap;}
@media(max-width:640px){.footer-tagline-v3{white-space:normal;font-size:15px;}}
.footer-address-block{display:flex;flex-direction:column;gap:6px;font-size:13px;color:rgba(245,240,235,0.75);line-height:1.55;margin-bottom:28px;}
.footer-address-block a{color:inherit;text-decoration:none;}
.footer-address-block a:hover{color:var(--gold);}

/* --- Fix (photo studio): keep wide 21:9 boxes from overflowing multi-column grids --- */
/* Allow grid items to shrink instead of forcing the row wider than the screen */
.grid-2 > *, .grid-3 > *, .grid-4 > *, .grid-5 > *,
.grid-split > *, .grid-split-reverse > * { min-width: 0; }
/* Inside grids, wide image boxes follow the column width at 21:9 (no min-height push) */
.grid-2 .ph-wide, .grid-3 .ph-wide, .grid-4 .ph-wide,
.grid-split .ph-wide, .grid-split-reverse .ph-wide { min-height: 0; }

/* --- Magazine float: photo anchored right, text wraps beside then beneath it --- */
.bl-float-host { display: flow-root; }
.bl-float-right { float: right; width: 52%; margin: 8px 0 30px 48px; border-radius: var(--radius-organic); overflow: hidden; }
@media (max-width: 700px) { .bl-float-right { float: none; width: 100%; margin: 0 0 26px; } }

/* Author photos in journal articles are circles — never inherit portrait min-height */
.article-author-photo .ph { min-height: 0; }

/* --- Optional hero photos (set in the Photo Studio). Empty slot = the green stays. --- */
.hero > img.bl-photo, .hero-v3 > img.bl-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.hero > .bl-hero-shade, .hero-v3 > .bl-hero-shade { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(13,13,13,.35) 0%, rgba(13,13,13,.30) 45%, rgba(13,13,13,.72) 100%); }

/* --- OPT-IN frosted glass behind hero headline (toggle per hero in the Photo Studio) --- */
.bl-glass .hero-content { position: relative; z-index: 2; }
.bl-glass .hero-content::before {
  content: ''; position: absolute; inset: -30px -36px;
  background: rgba(13, 13, 13, 0.26);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid rgba(245, 240, 235, 0.08);
  border-radius: 18px;
  z-index: -1; pointer-events: none;
}
@media (max-width: 640px) { .bl-glass .hero-content::before { inset: -18px -16px; } }

/* --- Hide placeholder guidance text on empty photo spots (studio still shows it) --- */
.ph-label, .team-portrait-placeholder, .frenchie-photo-placeholder, .hero-placeholder-label { display: none !important; }

/* --- Gift Cards stays in the top bar at ALL mobile widths. ---
   Phones get a compact bar (smaller logo + tighter buttons) so
   logo + Gift Cards + Book Now + hamburger all fit without overflow. */
@media (max-width: 1024px) {
  .nav-cta-cluster .nav-cta-secondary {
    display: inline-flex !important; align-items: center;
    padding: 8px 11px !important; font-size: 9.5px !important;
    letter-spacing: 0.07em !important; white-space: nowrap;
  }
}
/* Book Now matches Gift Cards size on mobile (selector beats per-page .nav-cta rules) */
@media (max-width: 1024px) {
  .nav-cta-cluster .nav-cta {
    padding: 8px 11px !important; font-size: 9.5px !important; letter-spacing: 0.07em !important;
  }
}
/* compact bar on phones — both buttons identical size */
@media (max-width: 600px) {
  .nav { padding: 12px 10px !important; gap: 6px !important; }
  .nav .nav-logo-img { height: 22px; }
  .nav-cta-cluster { gap: 6px !important; }
  .nav-cta-cluster .nav-cta,
  .nav-cta-cluster .nav-cta-secondary { padding: 7px 8px !important; font-size: 8.5px !important; letter-spacing: 0.05em !important; }
}
/* smallest phones: trim once more so nothing clips */
@media (max-width: 380px) {
  .nav { padding: 12px 8px !important; }
  .nav .nav-logo-img { height: 19px; }
  .nav-cta-cluster .nav-cta,
  .nav-cta-cluster .nav-cta-secondary { padding: 6px 6px !important; font-size: 8px !important; }
}

/* === mobile layout fixes 2026-06-07 === */
/* Pillar/training cards: kill the stretched black gap on phones */
@media (max-width: 900px) {
  .pillar-card { min-height: 0; }
  .pillar-link { margin-top: 14px; }
}
/* Hero headline fits phones — shrink + allow the no-wrap line to wrap so calligraphy isn't cut off */
@media (max-width: 600px) {
  .hero h1, .hero-v3 h1 { font-size: 30px !important; letter-spacing: 0.02em !important; }
  .hero h1 span[style*="white-space:nowrap"], .hero-v3 h1 span[style*="white-space:nowrap"],
  .hero h1 span[style*="nowrap"], .hero-v3 h1 span[style*="nowrap"] { white-space: normal !important; }
}
/* Light/Dark toggle inside the mobile menu */
.mm-mode-toggle { width: 100%; text-align: center; background: transparent;
  border: 1px solid rgba(245,240,235,.28); color: var(--cream);
  font-family: 'Inter', sans-serif; font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  padding: 13px 20px; border-radius: 6px; cursor: pointer; margin-top: 4px; }
body.light-mode .mm-mode-toggle { border-color: rgba(26,26,26,.25); color: #1B3B2F; }

/* --- light-mode mobile menu text fix (menu panel turns light, so text must too) --- */
body.light-mode .mobile-menu-links a { color: #1B3B2F; }
body.light-mode .mobile-menu-links a:hover { color: var(--bronze); }
body.light-mode .mobile-menu-close { color: #1B3B2F; border-color: rgba(26,26,26,.2); }
body.light-mode .mobile-menu-phone { color: #1B3B2F; }
body.light-mode .mobile-menu-links a { border-color: rgba(26,26,26,.10); }

/* --- Light mode: force readable text on inline cream/muted styles inside flipped sections --- */
body.light-mode .section-charcoal [style*="var(--cream)"],
body.light-mode .section-charcoal [style*="var(--muted-dark)"],
body.light-mode .section-charcoal [style*="rgba(245"] { color: #1B3B2F !important; }
/* keep list bullets/accents gold, not forced dark */
body.light-mode .section-charcoal [style*="var(--gold)"] { color: var(--bronze) !important; }


/* === Light-mode readability pass (overnight 2026-06-07) — fills class-based gaps in flip sections === */
/* Faint body/content text -> readable dark */
body.light-mode :is(.section-charcoal) :is(.alacarte-detail,.alacarte-name,.bb-h3,.bb-product-title,.bridal-mini-facial-text,.chat-card-desc,.chat-card-headline,.condition-item,.condition-services,.contact-detail-value,.faq-q,.hours-list,.hours-time,.journal-card-meta-on-forest,.journal-featured-dek,.journal-featured-title,.mobile-service-name,.pull-quote,.stat-label,.timeline-combine-text,.timeline-detail,.timeline-name) { color: #1B3B2F !important; }
/* Gold accent text -> bronze (readable on cream, on-brand) */
body.light-mode :is(.section-charcoal) :is(.alacarte-card,.alacarte-eyebrow,.alacarte-link,.alacarte-price,.article-dropcap,.bb-menu-card-feature,.bridal-mini-facial-eyebrow,.chapter-num,.closing-italic,.condition-name,.contact-detail-label,.contact-detail-link,.day-label,.eyebrow-on-forest,.insider-num,.journal-card-byline,.journal-card-cat,.mobile-service-price,.price-amt,.price-display,.req,.rule-pullquote-q,.section-num,.stack-card,.stack-price,.stat,.stat-num,.step-num,.testimonial-stars,.tier-num,.timeline-combine-eyebrow,.timeline-when,.track-card-lg,.track-card-premium,.track-price,.trust-stat-num,.tw-menu-card-feature,.tw-why-num,.visit-card-link) { color: var(--bronze) !important; }
/* Broaden inline coverage: #fff / white / rgba(255 / cream-deep inside flip sections */
body.light-mode :is(.section-charcoal) [style*="#fff"], body.light-mode :is(.section-charcoal) [style*="rgba(255"], body.light-mode :is(.section-charcoal) [style*="var(--cream-deep)"] { color: #1B3B2F !important; }

/* === Light mode uses brand forest green for text (not flat black) === */
body.light-mode { --ink: #1B3B2F; }            /* light-mode forest ink — affects var(--ink) text only */

/* === Light mode: soft sage backgrounds + hero-photo text fix (2026-06-08) === */
/* sage wash + hero-photo readability */
/* Forest sections get a soft sage wash in light mode (sprinkles the 2nd green tastefully) */
body.light-mode .section-forest { background: var(--sage); color: var(--cream); }
/* Hero WITH a photo: text rides over the shaded photo, so keep it cream + gold (not forest green) */
body.light-mode .bl-has-hero .hero-content :is(h1,h2,h3,p,span,strong,em,.hero-eyebrow,.hero-sub,.hero-sub-italic,.hero-announce):not([class*="btn"]) { color: var(--cream) !important; }
body.light-mode .bl-has-hero .hero-content .hero-eyebrow,
body.light-mode .bl-has-hero .hero-content h1 em,
body.light-mode .bl-has-hero .hero-content .hero-sub-italic em { color: var(--gold) !important; }


/* === Light mode: forest sections = solid sage blocks, cream text + gold accents (forest sage block) === */
body.light-mode .section-forest.section-forest { background: #6E8068 !important; color: var(--cream); }
body.light-mode .section-forest.section-forest :is(p,li,h1,h2,h3,h4,h5,h6,span,strong,small,div,blockquote,figcaption,.lede,.h-card,.h-section,.h-sub,.pillar-hook,.pillar-link,.pricing-service,.pricing-service-desc,.body,.journal-featured-dek,.journal-featured-title,.condition-services,.stat-label,.timeline-detail,.timeline-name):not([class*="btn"]),
body.light-mode .section-forest.section-forest [style*="var(--cream)"],
body.light-mode .section-forest.section-forest [style*="var(--muted-dark)"],
body.light-mode .section-forest.section-forest [style*="rgba(245"] { color: var(--cream) !important; }
body.light-mode .section-forest.section-forest .eyebrow,
body.light-mode .section-forest.section-forest .h-section em,
body.light-mode .section-forest.section-forest .h-card em,
body.light-mode .section-forest.section-forest [class*="eyebrow"],
body.light-mode .section-forest.section-forest [class*="-num"],
body.light-mode .section-forest.section-forest [class*="price"] { color: var(--gold) !important; }

/* === Light mode: uniform solid white nav on every page (even at top / over hero photos) === */
/* uniform solid nav in light mode */
body.light-mode .nav {
  background: rgba(245, 240, 235, 0.96) !important;
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(26, 26, 26, 0.08) !important;
}
body.light-mode .nav-link { color: rgba(26, 26, 26, 0.72); }
body.light-mode .nav-link:hover, body.light-mode .nav-link.active { color: #1B3B2F; }
body.light-mode .mode-toggle { color: #1B3B2F; border-color: rgba(26,26,26,0.2); }
body.light-mode .mode-toggle:hover { border-color: var(--bronze); color: var(--bronze); }

/* === Light mode: section-dark also becomes a sage block (more sage, per request) === */
body.light-mode .section-dark.section-dark { background: #6E8068 !important; color: var(--cream); }
body.light-mode .section-dark.section-dark :is(p,li,h1,h2,h3,h4,h5,h6,span,strong,small,div,blockquote,figcaption,.lede,.h-card,.h-section,.h-sub,.pillar-hook,.pillar-link,.pricing-service,.pricing-service-desc,.body,.journal-featured-dek,.journal-featured-title,.condition-services,.stat-label,.timeline-detail,.timeline-name):not([class*="btn"]),
body.light-mode .section-dark.section-dark [style*="var(--cream)"],
body.light-mode .section-dark.section-dark [style*="var(--muted-dark)"],
body.light-mode .section-dark.section-dark [style*="rgba(245"] { color: var(--cream) !important; }
body.light-mode .section-dark.section-dark .eyebrow,
body.light-mode .section-dark.section-dark .h-section em,
body.light-mode .section-dark.section-dark .h-card em,
body.light-mode .section-dark.section-dark [class*="eyebrow"],
body.light-mode .section-dark.section-dark [class*="-num"],
body.light-mode .section-dark.section-dark [class*="price"] { color: var(--gold) !important; }

/* === Light mode: hero photo secondary buttons stay light (readable on the photo) === */
body.light-mode .bl-has-hero .btn-secondary,
body.light-mode .bl-has-hero .btn-tertiary,
body.light-mode .bl-has-hero .btn-on-dark { color: var(--cream) !important; border-color: rgba(245,240,235,0.5) !important; }
body.light-mode .bl-has-hero .btn-secondary:hover,
body.light-mode .bl-has-hero .btn-tertiary:hover { color: #fff !important; border-color: var(--gold) !important; }

/* === Light mode: gold-tint callout boxes readable in light mode (self-contained card) === */
body.light-mode [style*="rgba(201, 169, 110, 0.1"] { background: rgba(247, 242, 233, 0.92) !important; }
body.light-mode [style*="rgba(201, 169, 110, 0.1"] strong,
body.light-mode [style*="rgba(201, 169, 110, 0.1"] p,
body.light-mode [style*="rgba(201, 169, 110, 0.1"] span,
body.light-mode [style*="rgba(201, 169, 110, 0.1"] em { color: #1B3B2F !important; }
body.light-mode [style*="rgba(201, 169, 110, 0.1"] a { color: var(--bronze) !important; text-decoration-color: var(--bronze) !important; }

/* === Headlines in photo-column (grid-split) sections: wrap + shrink so calligraphy fits and doesn't overlap === */
:is(.grid-split, .grid-split-reverse) .h-section,
:is(.grid-split, .grid-split-reverse) .h-section span[style*="nowrap"] { white-space: normal !important; }
:is(.grid-split, .grid-split-reverse) .h-section { font-size: clamp(22px, 2.6vw, 34px) !important; line-height: 1.42 !important; }
:is(.grid-split, .grid-split-reverse) .h-section .script-word { max-width: 100%; }

/* ===================================================================
   SITE SEARCH — desktop magnifier + drop-down bar, mobile in-menu field
   =================================================================== */
/* Desktop trigger button (matches mode-toggle styling) */
.nav-search-btn {
  background: transparent;
  border: 1px solid rgba(245, 240, 235, 0.2);
  border-radius: 50%;
  width: 36px; height: 36px;
  display: inline-flex;
  align-items: center; justify-content: center;
  color: var(--cream);
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 0.3s ease, color 0.3s ease;
}
.nav-search-btn:hover { border-color: var(--gold); color: var(--gold); }
body.light-mode .nav-search-btn { border-color: rgba(26, 26, 26, 0.2); color: #1A1A1A; }
body.light-mode .nav-search-btn:hover { border-color: var(--bronze); color: var(--bronze); }

/* Drop-down search bar pinned under the header */
.nav-search-backdrop {
  position: fixed; inset: 0;
  background: rgba(13, 13, 13, 0.45);
  opacity: 0; visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
  z-index: 1200;
}
.nav-search-backdrop.open { opacity: 1; visibility: visible; }

.nav-search-bar {
  position: fixed; top: 0; left: 0; right: 0;
  background: var(--ink);
  border-bottom: 1px solid rgba(201, 169, 110, 0.35);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
  padding: 18px clamp(18px, 6vw, 80px) 0;
  transform: translateY(-110%);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 1300;
}
.nav-search-bar.open { transform: translateY(0); }
body.light-mode .nav-search-bar { background: #FBF8F4; border-bottom-color: rgba(139, 105, 20, 0.3); }

.nav-search-form {
  display: flex; align-items: center; gap: 12px;
  max-width: 760px; margin: 0 auto;
  border-bottom: 1px solid rgba(245, 240, 235, 0.2);
  padding-bottom: 14px;
}
body.light-mode .nav-search-form { border-bottom-color: rgba(26, 26, 26, 0.15); }
.nav-search-form-icon { color: var(--gold); flex-shrink: 0; }
.nav-search-input {
  flex: 1; background: transparent; border: none; outline: none;
  color: var(--cream);
  font-family: 'Cormorant Garamond', serif;
  font-size: 26px; font-weight: 400;
}
.nav-search-input::placeholder { color: rgba(245, 240, 235, 0.45); }
body.light-mode .nav-search-input { color: #1A1A1A; }
body.light-mode .nav-search-input::placeholder { color: rgba(26, 26, 26, 0.4); }
.nav-search-close {
  background: transparent; border: none; cursor: pointer;
  color: var(--cream); font-size: 28px; line-height: 1;
  opacity: 0.6; transition: opacity 0.2s ease; flex-shrink: 0;
}
.nav-search-close:hover { opacity: 1; }
body.light-mode .nav-search-close { color: #1A1A1A; }

.nav-search-suggest {
  list-style: none; margin: 0 auto; padding: 8px 0 16px;
  max-width: 760px; max-height: 50vh; overflow-y: auto;
}
.nav-search-item a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 11px 6px;
  border-bottom: 1px solid rgba(245, 240, 235, 0.07);
  text-decoration: none;
  transition: background 0.15s ease, padding-left 0.15s ease;
}
.nav-search-item a:hover { background: rgba(201, 169, 110, 0.1); padding-left: 14px; }
.nav-search-item-title {
  color: var(--cream);
  font-family: 'Cormorant Garamond', serif; font-size: 20px;
}
body.light-mode .nav-search-item-title { color: #1A1A1A; }
.nav-search-item-cat {
  color: var(--gold);
  font-family: 'Inter', sans-serif; font-size: 10px;
  letter-spacing: 0.12em; text-transform: uppercase;
  white-space: nowrap; flex-shrink: 0;
}
body.light-mode .nav-search-item-cat { color: var(--bronze); }

/* Hide desktop trigger once the hamburger takes over */
@media (max-width: 1024px) {
  .nav-search-btn { display: none !important; }
  .nav-search-input { font-size: 22px; }
}

/* Mobile in-menu search field (first item in the slide-out panel) */
.mobile-search-form {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 14px;
  padding: 11px 14px;
  border: 1px solid rgba(245, 240, 235, 0.22);
  border-radius: 6px;
  color: var(--gold);
}
.mobile-search-input {
  flex: 1; background: transparent; border: none; outline: none;
  color: var(--cream);
  font-family: 'Inter', sans-serif; font-size: 16px; /* 16px avoids iOS zoom-on-focus */
}
.mobile-search-input::placeholder { color: rgba(245, 240, 235, 0.5); }
body.light-mode .mobile-search-form { border-color: rgba(26, 26, 26, 0.2); }
body.light-mode .mobile-search-input { color: #1A1A1A; }


/* mobile guard: page never scrolls sideways (2026-07-11) */
html, body { overflow-x: clip; }