/* =========================================================
   Unified Demo — shared base + customizer
   Loaded as the FIRST stylesheet; variant styles.css override.
   ========================================================= */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { overflow-x: hidden; min-height: 100vh; }
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

/* ---------- Reveal base ---------- */
.reveal { opacity: 0; transform: translate3d(0, 16px, 0); transition: opacity 700ms cubic-bezier(.2,.6,.2,1), transform 700ms cubic-bezier(.2,.6,.2,1); will-change: opacity, transform; }
.reveal.is-in { opacity: 1; transform: translate3d(0, 0, 0); }
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.is-in { opacity: 1; transform: none; transition: none; }
}

/* =========================================================
   CUSTOMIZER (identical across variants)
   Edge hover trigger + slide-out panel on the left.
   Hidden below 768px (mobile).
   ========================================================= */
/* --- Desktop edge tab: vertical "CUSTOMIZE ◀" pill on left edge.
       Label is injected by script.js so HTML stays unchanged.
       Hidden on mobile — the bottom-left FAB handles touch access. --- */
.cz-edge {
  position: fixed;
  top: 50%; left: 0;
  transform: translateY(-50%);
  z-index: 1000;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 130px;
  min-width: 34px;
  padding: 14px 8px 14px 10px;
  background: #fff;
  color: #111;
  border: 1px solid rgba(0,0,0,0.08);
  border-left: 0;
  border-radius: 0 6px 6px 0;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
  outline: none;
  box-shadow: 4px 0 16px -6px rgba(0,0,0,0.22);
  transition: transform 220ms cubic-bezier(.22,.8,.2,1),
              box-shadow 220ms ease,
              background-color 200ms ease,
              opacity 220ms ease;
}
.cz-edge:hover {
  transform: translate(2px, -50%);
  box-shadow: 8px 0 24px -8px rgba(0,0,0,0.28);
}
.cz-edge:focus-visible {
  outline: 2px solid #111;
  outline-offset: 3px;
}
/* Hide the tab once the panel is open (panel itself is the affordance).
   Driven by a JS-toggled body class for universal browser support. */
body.cz-open .cz-edge {
  opacity: 0;
  pointer-events: none;
  transform: translate(-20px, -50%);
}

.cz-panel {
  position: fixed;
  top: 0; left: 0;
  height: 100vh;             /* explicit height — safer than top:0;bottom:0
                                on iOS where dynamic-viewport interacts badly
                                with transform transitions on fixed elements */
  width: 340px;
  max-width: calc(100vw - 24px);
  background: var(--cz-bg, #12110F);
  color: var(--cz-fg, #F3EFE4);
  z-index: 1001;
  padding: 28px 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  /* Transform is owned by JS (script.js open/close via Web Animations API,
     plus an inline-style final-state safety net). We intentionally do NOT
     declare transform or transition on .cz-panel / .cz-panel.is-open in
     CSS — those were causing iOS Safari to stall the slide-in transition
     after a V2 variant-switch navigation, leaving the panel stuck off-
     screen while the backdrop was visible. With JS-driven animation the
     start value is explicit and cannot be skipped. */
  visibility: hidden;        /* hidden while closed so stray taps never
                                bleed through to the off-screen panel.
                                JS (`style.visibility = 'visible'` on open)
                                overrides this while the panel is on-screen. */
  box-shadow: 20px 0 60px -20px rgba(0,0,0,0.45);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.cz-head { display: flex; flex-direction: column; gap: 4px; padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.cz-head__eyebrow {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.55;
}
.cz-head__title { font-family: Georgia, 'Fraunces', serif; font-size: 28px; letter-spacing: -0.01em; line-height: 1; }
.cz-head__hint { margin-top: 6px; font-size: 12.5px; line-height: 1.55; opacity: 0.72; }

.cz-section { display: flex; flex-direction: column; gap: 10px; }
.cz-section__label {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.55;
}

/* --- Variant pills --- */
.var-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.var-pill {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between;
  gap: 14px; padding: 12px 12px 11px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 4px;
  text-align: left;
  font-size: 11.5px;
  line-height: 1.2;
  color: inherit;
  transition: background-color 200ms ease, border-color 200ms ease, transform 180ms ease;
  min-height: 78px;
}
.var-pill__code { font-family: ui-monospace, Menlo, monospace; font-size: 10px; letter-spacing: 0.14em; opacity: 0.6; }
.var-pill__name { font-weight: 500; letter-spacing: 0.01em; }
.var-pill:hover { background: rgba(255,255,255,0.08); }
.var-pill[aria-pressed="true"] {
  background: var(--cz-fg, #F3EFE4);
  color: var(--cz-bg, #12110F);
  border-color: var(--cz-fg, #F3EFE4);
}
.var-pill[aria-pressed="true"] .var-pill__code { opacity: 0.7; }

/* --- Practice image grid (5 options: 2+2+1 layout, last spans both cols) --- */
.prof-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
/* If there's an odd number of options, the last one spans both columns so
   it doesn't look orphaned on a half-width row by itself. */
.prof-grid .prof-option:last-child:nth-child(odd) { grid-column: 1 / -1; }
.prof-option {
  position: relative;
  display: block;
  text-align: left; /* critical — fixes default button text-align */
  height: 86px;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  transition: border-color 200ms ease, transform 180ms ease;
}
.prof-option__img {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  filter: saturate(0.92) brightness(0.85);
  transition: transform 500ms cubic-bezier(.2,.6,.2,1), filter 300ms ease;
}
.prof-option__scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.2) 60%, rgba(0,0,0,0.1) 100%); }
.prof-option__label {
  position: absolute; left: 14px; bottom: 10px; right: 14px;
  display: block;
  text-align: left;
  color: #fff;
  line-height: 1.15;
}
.prof-option__name { display: block; font-weight: 500; font-size: 13.5px; letter-spacing: 0.005em; }
.prof-option__sub  { display: block; margin-top: 2px; font-family: ui-monospace, Menlo, monospace; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.85; }
.prof-option:hover .prof-option__img { transform: scale(1.04); filter: saturate(1) brightness(0.9); }
.prof-option[aria-pressed="true"] {
  border-color: var(--cz-fg, #F3EFE4);
  box-shadow: 0 0 0 1px var(--cz-fg, #F3EFE4);
}

/* --- Theme swatch pills --- */
.theme-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.theme-pill {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 4px;
  font-size: 12px;
  transition: background-color 200ms ease, border-color 200ms ease;
}
.theme-pill__swatch {
  width: 16px; height: 16px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.25);
  background: #E8DFCE;
  flex-shrink: 0;
}
.theme-pill[data-val="light"] .theme-pill__swatch { background: #F4F1EA; border-color: rgba(0,0,0,0.25); }
.theme-pill[data-val="dark"]  .theme-pill__swatch { background: #141110; }
.theme-pill[data-val="warm"]  .theme-pill__swatch { background: linear-gradient(135deg, #D99A6C 0%, #E8DFCE 100%); }
.theme-pill:hover { background: rgba(255,255,255,0.08); }
.theme-pill[aria-pressed="true"] {
  background: var(--cz-fg, #F3EFE4);
  color: var(--cz-bg, #12110F);
  border-color: var(--cz-fg, #F3EFE4);
}
.theme-pill[aria-pressed="true"] .theme-pill__swatch { border-color: rgba(0,0,0,0.3); }

.cz-foot {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.08);
  font-family: ui-monospace, Menlo, monospace;
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.5;
}

/* --- Panel close button (X) — visible on mobile, hidden on desktop where
       hover handles it. Added by script.js at boot time. --- */
.cz-close {
  position: absolute;
  top: 14px; right: 14px;
  width: 36px; height: 36px;
  min-width: 44px; min-height: 44px;
  display: none;
  align-items: center;
  justify-content: center;
  color: inherit;
  font-size: 26px;
  line-height: 1;
  opacity: 0.7;
  border-radius: 6px;
  transition: opacity 200ms ease, background-color 200ms ease;
}
.cz-close:hover { opacity: 1; background: rgba(255,255,255,0.06); }

/* --- Mobile FAB (bottom-left "Customize" button) — hidden on desktop,
       visible below 768px so touch users have an obvious entry point. --- */
.cz-fab {
  display: none; /* flipped to inline-flex on mobile below */
  position: fixed;
  bottom: 20px; left: 20px;
  z-index: 1000;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 16px 10px 14px;
  background: var(--cz-bg, #12110F);
  color: var(--cz-fg, #F3EFE4);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1;
  box-shadow: 0 12px 32px -12px rgba(0,0,0,0.55);
  transition: transform 200ms cubic-bezier(.22,.8,.2,1), opacity 200ms ease, background-color 200ms ease;
}
.cz-fab:active { transform: scale(0.96); }
.cz-fab__dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--cz-fg, #F3EFE4);
  opacity: 0.9;
}
/* Hide the FAB while the panel is open (panel is now the affordance).
   Uses body class rather than sibling selectors so it works even when
   the FAB is appended after the panel and the :has()/~ selectors fail. */
body.cz-open .cz-fab { opacity: 0; pointer-events: none; transform: translateX(-8px); }

/* --- Panel: backdrop for tap-outside-to-close on mobile --- */
.cz-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0,0,0,0.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity 260ms ease;
  display: none; /* flipped on mobile */
}
.cz-backdrop.is-on { opacity: 1; pointer-events: auto; }

/* ---------- Mobile (<768px) ----------
   The customizer is a platform-level affordance, not variant UI. Variant
   stylesheets (v1/v2/v3/styles.css) must NOT restyle .cz-* classes. An
   earlier v2 rule set `display: none` on .cz-panel below 900px, which
   made every FAB tap on v2 mobile open an invisible panel — the user
   saw the customizer "disappear" after switching to v2. We use
   !important on the mobile display/flex rules as a guardrail so a
   stray variant rule at matching specificity can't silently kill
   mobile access again. */
@media (max-width: 767px) {
  .cz-edge { display: none !important; }   /* hover trigger inapplicable */
  .cz-fab { display: inline-flex !important; }
  .cz-backdrop { display: block !important; }
  .cz-close { display: inline-flex !important; }
  .cz-panel {
    display: flex !important;
    width: min(340px, calc(100vw - 32px));
    /* Shift content up so the "DEMO CONTROLS" eyebrow shares a row with
       the close X. X sits at top:14px with a 44px touch target (centered
       at y≈36). 30px panel padding-top puts the 10px eyebrow's vertical
       center right around y=35 — visually aligned. This also reveals
       the "03 — Finish" theme buttons without needing to scroll. */
    padding-top: 30px;
    /* Reserve a gutter on the head so longer eyebrow copy can't slide
       under the X button on very narrow devices. */
    /* Generous bottom clearance past the iOS home indicator / Android nav
       bar so the "03 — Finish" theme pills and B&L footer never clip.
       88px + safe-area comfortably covers the worst case without feeling
       empty on devices without a home indicator (env() falls back to 0). */
    padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px));
  }
  .cz-panel .cz-head { padding-right: 48px; }
  /* NOTE: we intentionally do NOT set body { overflow: hidden } while the
     panel is open. On iOS, body overflow:hidden combined with a fixed,
     transform-animated child breaks the second-and-subsequent open: the
     backdrop appears but the panel never slides in. The backdrop already
     provides enough visual separation — a mild scroll behind it is fine. */
}

/* =========================================================
   RESTAURANT: menu + gallery replaces the default three service
   detail blocks on the services page. Hide-default rule is
   scoped by profession; renderer (script.js) inserts the menu
   markup into [data-svc-menu].
   ========================================================= */
html[data-profession="restaurant"] [data-svc-default] { display: none !important; }

.menu {
  max-width: 1240px;
  margin: 0 auto;
  padding: 80px 24px 96px;
}
.menu__intro {
  max-width: 640px;
  margin: 0 auto 56px;
  text-align: center;
  color: var(--muted, #666);
  font-size: 15.5px;
  line-height: 1.7;
}
.menu__section {
  border-top: 1px solid var(--rule, #ddd);
  padding: 44px 0;
}
.menu__section:last-of-type { border-bottom: 1px solid var(--rule, #ddd); }
.menu__section-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: baseline;
  margin-bottom: 28px;
}
.menu__section-name {
  font-family: var(--font-display, Georgia, serif);
  font-weight: var(--display-weight, 500);
  color: var(--ink, #111);
  font-size: clamp(26px, 3vw, 36px);
  letter-spacing: -0.015em;
  line-height: 1.1;
  margin: 0;
}
.menu__section-note {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted, #666);
  font-weight: 500;
}
.menu__items {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px 48px;
}
.menu__item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 16px;
  align-items: baseline;
  padding-bottom: 2px;
}
.menu__item-name {
  font-family: var(--font-display, Georgia, serif);
  font-weight: 500;
  font-size: 18px;
  color: var(--ink, #111);
  letter-spacing: -0.005em;
}
.menu__item-price {
  font-variant-numeric: tabular-nums;
  font-size: 14.5px;
  color: var(--accent, #333);
  white-space: nowrap;
}
.menu__item-desc {
  grid-column: 1 / -1;
  color: var(--muted, #666);
  font-size: 14px;
  line-height: 1.55;
  max-width: 50ch;
}
.menu__gallery {
  margin-top: 64px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.menu__gallery img {
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  border-radius: 8px;
  transition: transform 600ms cubic-bezier(.2,.6,.2,1);
}
.menu__gallery img:hover { transform: scale(1.02); }
@media (max-width: 767px) {
  .menu { padding: 56px 20px 72px; }
  .menu__items { grid-template-columns: 1fr; gap: 24px; }
  .menu__gallery { grid-template-columns: 1fr 1fr; }
  .menu__section-head { grid-template-columns: 1fr; gap: 8px; }
}