/* =========================================================
 *  KOKORO — Bundled Stylesheet (style.css)
 *  ─────────────────────────────────────────────────────
 *  This file is GENERATED by build-css.sh from the source
 *  partials in this directory. Edit the partials, then
 *  re-run the build to regenerate this file.
 *
 *  Source order:
 *    1. variables.css
 *    2. reset.css
 *    3. base.css
 *    4. layout.css
 *    5. components.css
 * ========================================================= */

/* ──────── variables.css ──────── */
/* =========================================================
 *  KOKORO — Design Tokens
 *  All colours, typography stacks, and shared values live here.
 *  Imported first so every other file can reference them.
 * ========================================================= */

:root {
  /* Surfaces */
  --bg: #f7f3ec;
  --bg-2: #efe8dc;
  --paper: #fbf8f1;
  --paper-2: #f3ecde;

  /* Ink (text colours) */
  --ink: #2a2620;
  --ink-2: #4a4339;
  --ink-3: #7a6f60;
  --ink-4: #a89d8b;

  /* Brand accents */
  --gold: #b08c5a;
  --gold-2: #c9a674;
  --gold-soft: #e8d9bf;

  /* Rules / borders */
  --rule: #d9cdb6;
  --rule-soft: #e7dec9;

  /* Status colours (status badges, errors, certifications) */
  --green: #4a7654;
  --green-2: #3a6244;
  --blue: #345585;
  --blue-2: #294371;
  --red: #b73a36;

  /* Type stacks */
  --serif: 'Noto Serif JP', 'Shippori Mincho', serif;
  --display: 'Shippori Mincho', 'Noto Serif JP', serif;
  --en: 'Cormorant Garamond', 'Times New Roman', serif;
  --mono: 'JetBrains Mono', monospace;
}

/* ──────── reset.css ──────── */
/* =========================================================
 *  KOKORO — Minimal Reset
 *  Box-sizing inheritance, zero out browser defaults,
 *  enable smooth scroll. Heavier resets (e.g. normalize.css)
 *  are not needed for this single-page layout.
 * ========================================================= */

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--serif);
  background: var(--bg);
  color: var(--ink);
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Media defaults */
img,
svg,
video {
  display: block;
  max-width: 100%;
}

/* Form controls inherit font for visual consistency */
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

/* ──────── base.css ──────── */
/* =========================================================
 *  KOKORO — Base Layer
 *  - Language toggle utilities
 *  - Scroll reveal animation primitive
 *  - FAQ open/close visual baseline
 *  - Small utility classes used across the page
 * ========================================================= */

/* ─────────────────────────────────────────────────────────
 *  Language switching utilities
 *  Body carries `.lang-ja` or `.lang-en`. Elements that should
 *  appear in only one locale are tagged `.ja-only` / `.en-only`.
 * ───────────────────────────────────────────────────────── */
.lang-ja .en-only { display: none !important; }
.lang-en .ja-only { display: none !important; }

/* ─────────────────────────────────────────────────────────
 *  Scroll reveal — used by IntersectionObserver in main.js.
 *  Elements get `.reveal` applied via JS at boot, then
 *  `.is-visible` once they intersect the viewport.
 * ───────────────────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 720ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 720ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
/* Cascade child reveals with stagger via custom property `--reveal-i`. */
.reveal-group > .reveal { transition-delay: calc(var(--reveal-i, 0) * 80ms); }
/* Hero is above-the-fold — never fade. */
.hero .reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-group > .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ─────────────────────────────────────────────────────────
 *  FAQ open/close baseline
 *  JS toggles `.faq-answer` open/closed by display.
 *  Default state is closed (collapsed) via the inline-style
 *  fallback on the element; once visible, this rule applies.
 * ───────────────────────────────────────────────────────── */
.faq-answer {
  padding: 10px 16px 14px 32px;
  margin-top: -2px;
  border-left: 2px solid var(--gold);
  background: rgba(212, 175, 55, 0.04);
  font-size: 12.5px;
  line-height: 1.8;
  color: var(--ink-2, #666);
}
.faq-answer p { margin: 0; }
.faq-answer a {
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(176, 140, 90, 0.4);
  transition: text-decoration-color 200ms ease;
}
.faq-answer a:hover { text-decoration-color: var(--gold); }
.faq-answer--collapsed { display: none; }

/* ─────────────────────────────────────────────────────────
 *  Utility classes (replacing former inline `style="…"`).
 *  Prefixed with `u-` so they're easy to spot in markup.
 * ───────────────────────────────────────────────────────── */

/* Spacing */
.u-mt-8  { margin-top: 8px; }
.u-mt-10 { margin-top: 10px; }
.u-mt-14 { margin-top: 14px; }
.u-mt-16 { margin-top: 16px; }
.u-mb-12 { margin-bottom: 12px; }

/* Text */
.u-text-center { text-align: center; }
.u-text-red    { color: var(--red); }

/* Display */
.u-hidden { display: none; }

/* The required-asterisk used inside form labels */
.req-mark {
  color: var(--red);
  font-size: 10px;
}

/* Footer logo lockup that needs an explicit height */
.footer__logo-img {
  height: 64px;
  object-fit: contain;
}

/* Channel icons inside reservation buttons (LINE / WhatsApp) */
.res__icon {
  width: 18px;
  height: 18px;
  filter: none;
}

/* Inline-styled italic English subtitle inside the gallery panel.
 * Lives only here because it carries presentational nuance specific
 * to the gallery sidebar. */
.gallery__subtitle {
  font-family: var(--en);
  font-style: italic;
  color: var(--ink-3);
  font-size: 11.5px;
}

/* Gallery instagram handle — anchor that visually matches the
 * surrounding monospace text. */
.handle--link {
  color: inherit;
  text-decoration: none;
}

/* Small panel__body variant used by the gallery side rail */
.panel__body--gallery {
  margin-top: 8px;
  font-size: 12px;
}

/* Grid-row column-count modifiers (replaces former inline overrides) */
.grid-row--single  { grid-template-columns: 1fr; }
.grid-row--two-col { grid-template-columns: 1fr 1fr; }

/* ──────── layout.css ──────── */
/* =========================================================
 *  KOKORO — Layout Layer
 *  Structural building blocks: navigation, hero, grid rows,
 *  panel container, mobile drawer, footer, responsive rules.
 * ========================================================= */

/* ─────────────────────────────────────────────────────────
 *  NAV (sticky top bar)
 * ───────────────────────────────────────────────────────── */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(247, 243, 236, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rule-soft);
}
.nav__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 18px 36px;
  display: flex;
  align-items: center;
  gap: 36px;
}
.nav__logo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  text-decoration: none;
}
.nav__logo .kanji-mark {
  width: 32px;
  height: 32px;
  object-fit: contain;
}
.nav__logo .word { line-height: 1.1; }
.nav__logo .word .top {
  font-family: var(--display);
  font-size: 19px;
  letter-spacing: 0.18em;
  font-weight: 600;
  color: var(--ink);
}
.nav__logo .word .sub {
  font-family: var(--en);
  font-style: italic;
  font-size: 10px;
  letter-spacing: 0.32em;
  color: var(--ink-3);
  margin-top: 1px;
  text-transform: uppercase;
}
.nav__links {
  display: flex;
  gap: 26px;
  margin-left: 24px;
  flex: 1;
}
.nav__links a {
  text-decoration: none;
  color: var(--ink-2);
  font-size: 12.5px;
  letter-spacing: 0.06em;
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  transition: color 0.2s;
}
.nav__links a:hover { color: var(--gold); }
.nav__links a[aria-current="location"] {
  color: var(--gold);
  position: relative;
}
.nav__links a[aria-current="location"]::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 1.5px;
  background: var(--gold);
  transform-origin: center;
  animation: navUnderline 280ms ease-out;
}
@keyframes navUnderline {
  from { transform: scaleX(0); opacity: 0; }
  to   { transform: scaleX(1); opacity: 1; }
}
.nav__links a .num {
  font-family: var(--en);
  font-style: italic;
  font-size: 11px;
  color: var(--gold);
}
.nav__actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.nav__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  background: linear-gradient(135deg, var(--gold-2) 0%, var(--gold) 100%);
  color: #fff;
  text-decoration: none;
  font-family: var(--display);
  font-size: 12.5px;
  letter-spacing: 0.08em;
  font-weight: 500;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 3px 10px rgba(176, 140, 90, 0.22);
  transition: transform 360ms ease-out, box-shadow 360ms ease-out;
}
.nav__cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(176, 140, 90, 0.32);
}
.nav__cta:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.lang-toggle {
  display: inline-flex;
  border: 1px solid var(--rule);
  border-radius: 2px;
  overflow: hidden;
  font-size: 11.5px;
  letter-spacing: 0.1em;
  font-family: var(--en);
}
.lang-toggle button {
  background: transparent;
  border: 0;
  padding: 6px 14px;
  cursor: pointer;
  color: var(--ink-3);
}
.lang-toggle button.active {
  background: var(--ink);
  color: var(--paper);
}
.menu-btn {
  width: 40px;
  height: 40px;
  background: transparent;
  border: 1px solid var(--rule);
  cursor: pointer;
  display: grid;
  place-items: center;
  border-radius: 2px;
}
.menu-btn span {
  display: block;
  width: 16px;
  height: 1px;
  background: var(--ink-2);
  box-shadow: 0 -5px 0 var(--ink-2), 0 5px 0 var(--ink-2);
}

/* ─────────────────────────────────────────────────────────
 *  HERO
 * ───────────────────────────────────────────────────────── */
.hero {
  position: relative;
  max-width: 1440px;
  margin: 0 auto;
  padding: 28px 36px 0;
}
.hero__grid {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--rule-soft);
  min-height: 720px;
  overflow: hidden;
  isolation: isolate;
}
.hero__left {
  position: relative;
  z-index: 2;
  padding: 80px 64px 56px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  max-width: 640px;
  min-height: 720px;
}
.hero__left::before {
  content: '';
  position: absolute;
  top: 32px;
  left: 32px;
  width: 80px;
  height: 60px;
  background-image: url('../images/asset_05.png');
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.7;
  z-index: 3;
}
/* Large kokoro brush watermark behind the headline.
   Sits inside hero__left so it never reaches the photo column
   on the right; sits below text via z-index. */
.hero__left::after {
  content: '';
  position: absolute;
  right: -60px;
  top: 50%;
  transform: translateY(-50%);
  width: 560px;
  height: 560px;
  max-width: calc(100% - 40px);
  background: url('../images/asset_03.png') center/contain no-repeat;
  opacity: 0.55;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
/* Lift the actual content groups above the watermark */
.hero__left > * {
  position: relative;
  z-index: 1;
}
.hero__headline {
  font-family: var(--display);
  /* Fluid: 24px on a 320px screen → 46px on a 1440px screen */
  font-size: clamp(24px, 1rem + 2.2vw, 46px);
  line-height: 1.35;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink);
}
.hero__headline .punct { color: var(--ink-3); }
.hero__en {
  margin-top: 20px;
  font-family: var(--en);
  font-style: italic;
  font-size: 18px;
  color: var(--ink-3);
  letter-spacing: 0.01em;
  line-height: 1.5;
}
.hero__en .line2 {
  display: block;
  font-style: normal;
  font-family: var(--en);
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: none;
  color: var(--gold);
  margin-top: 4px;
  font-weight: 500;
}
.hero__body {
  margin-top: 36px;
  font-size: 13.5px;
  line-height: 2.1;
  color: var(--ink-2);
  max-width: 560px;
}
.hero__body-en {
  margin-top: 22px;
  font-family: var(--en);
  font-style: italic;
  font-size: 13px;
  line-height: 1.85;
  color: var(--ink-3);
  max-width: 560px;
}
.hero__badges {
  display: flex;
  gap: 18px;
  align-items: center;
  margin-top: 36px;
  flex-wrap: wrap;
}
.hero__badges img { height: 44px; }
.hero__badges .group-pill {
  display: inline-flex;
  align-items: center;
  gap: 0;
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 8px 18px;
  background: var(--paper);
  line-height: 1.15;
  flex-direction: column;
}
.hero__badges .group-pill .ja {
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--ink-2);
  font-weight: 500;
}
.hero__badges .group-pill .en {
  font-family: var(--en);
  font-size: 9.5px;
  letter-spacing: 0.22em;
  color: var(--gold);
}
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  /* "right center" keeps the chef + guests anchored on the right side
     of the frame regardless of viewport ratio. The cream wash on the
     left handles legibility for the headline copy. */
  background: url('../images/hero_bg.png') right center / cover no-repeat;
}
/* English locale swaps in a Western-guest scene. The selector is on
   <html class="lang-en">, set by main.js when the user toggles EN. */
.lang-en .hero__bg {
  background-image: url('../images/hero_bg_en.png');
}
/* Soft cream wash on the left so the body copy stays legible. */
.hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(95deg,
      rgba(251, 248, 241, 0.96) 0%,
      rgba(251, 248, 241, 0.92) 26%,
      rgba(251, 248, 241, 0.72) 42%,
      rgba(251, 248, 241, 0.30) 58%,
      rgba(251, 248, 241, 0.05) 72%,
      rgba(251, 248, 241, 0.00) 100%);
}
.vert-tag {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 56px;
  background: rgba(251, 248, 241, 0.88);
  backdrop-filter: blur(4px);
  border-left: 1px solid var(--rule-soft);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  z-index: 3;
}
.vert-tag .kanji-vertical {
  writing-mode: vertical-rl;
  font-family: var(--display);
  font-size: 19px;
  letter-spacing: 0.6em;
  color: var(--ink);
  font-weight: 500;
}
.vert-tag .seal {
  width: 28px;
  height: 28px;
  border: 1.5px solid var(--red);
  color: var(--red);
  font-family: var(--display);
  font-size: 9px;
  display: grid;
  place-items: center;
  line-height: 1;
  letter-spacing: -0.05em;
}

/* ─────────────────────────────────────────────────────────
 *  SECTION GRID + PANEL (the editorial spread)
 * ───────────────────────────────────────────────────────── */
.grid-row {
  max-width: 1440px;
  margin: 0 auto;
  padding: 24px 36px 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
.panel {
  background: var(--paper);
  border: 1px solid var(--rule-soft);
  padding: 36px 40px;
  position: relative;
}
.panel__tag {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 24px;
}
.panel__tag .num {
  font-family: var(--en);
  font-style: italic;
  font-size: 22px;
  color: var(--gold);
  letter-spacing: 0.05em;
  font-weight: 400;
}
.panel__tag .label {
  font-family: var(--en);
  font-size: 12.5px;
  letter-spacing: 0.32em;
  color: var(--ink-2);
  text-transform: uppercase;
  font-weight: 500;
}
.panel__h {
  font-family: var(--display);
  /* Fluid heading scale */
  font-size: clamp(20px, 0.875rem + 1.2vw, 26px);
  line-height: 1.5;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: 0.03em;
}
.panel__h-en {
  margin-top: 8px;
  font-family: var(--en);
  font-style: italic;
  font-size: 14px;
  color: var(--ink-3);
  letter-spacing: 0.02em;
}
.panel__body {
  margin-top: 18px;
  font-size: 13px;
  line-height: 2;
  color: var(--ink-2);
}
.panel__body-en {
  margin-top: 14px;
  font-family: var(--en);
  font-style: italic;
  font-size: 12.5px;
  line-height: 1.9;
  color: var(--ink-3);
}

/* ─────────────────────────────────────────────────────────
 *  Footer
 * ───────────────────────────────────────────────────────── */
footer {
  margin-top: 64px;
  border-top: 1px solid var(--rule);
  padding: 36px 36px 28px;
  background: var(--paper);
}
.footer__inner {
  max-width: 1440px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 32px;
  align-items: center;
}
.footer__logo {
  display: flex;
  align-items: center;
  gap: 12px;
}
.footer__logo .word .top {
  font-family: var(--display);
  font-size: 19px;
  letter-spacing: 0.18em;
  font-weight: 600;
}
.footer__logo .word .sub {
  font-family: var(--en);
  font-style: italic;
  font-size: 9px;
  letter-spacing: 0.32em;
  color: var(--ink-3);
  text-transform: uppercase;
  margin-top: 2px;
}
.footer__links {
  display: flex;
  gap: 28px;
  justify-content: center;
  font-size: 11.5px;
  color: var(--ink-2);
  letter-spacing: 0.04em;
}
.footer__links a {
  color: var(--ink-2);
  text-decoration: none;
  cursor: pointer;
}
.footer__links a:hover { color: var(--gold); }
.footer__social {
  display: flex;
  gap: 8px;
}
.footer__social a img {
  width: 28px;
  height: 28px;
}
.footer__bottom {
  max-width: 1440px;
  margin: 22px auto 0;
  padding-top: 16px;
  border-top: 1px solid var(--rule-soft);
  text-align: center;
  font-family: var(--en);
  font-size: 10.5px;
  color: var(--ink-3);
  letter-spacing: 0.12em;
}

/* Decorative leaf overlay (kept for compatibility; unused at the moment). */
.deco-leaves {
  position: absolute;
  pointer-events: none;
  opacity: 0.6;
}

/* ─────────────────────────────────────────────────────────
 *  Mobile drawer (full-screen menu when nav__links collapse)
 * ───────────────────────────────────────────────────────── */
.nav-drawer {
  position: fixed;
  inset: 0;
  background: rgba(247, 243, 236, 0.97);
  backdrop-filter: blur(12px);
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  transform: translateX(100%);
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-drawer.open { transform: translateX(0); }
.nav-drawer a {
  font-family: var(--display);
  font-size: 20px;
  text-decoration: none;
  color: var(--ink);
  letter-spacing: 0.15em;
  display: flex;
  align-items: baseline;
  gap: 10px;
  transition: color 0.2s;
}
.nav-drawer a:hover { color: var(--gold); }
.nav-drawer a .num {
  font-family: var(--en);
  font-style: italic;
  font-size: 13px;
  color: var(--gold);
}
.drawer__close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  background: transparent;
  border: 1px solid var(--rule);
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 18px;
  color: var(--ink-2);
  border-radius: 2px;
  line-height: 1;
}
.drawer__lang { margin-top: 16px; }

/* ─────────────────────────────────────────────────────────
 *  Responsive — luxury brand layout
 *  ────────────────────────────────
 *  Strategy:
 *    Desktop ≥1024px : 2-col / 3-col side-by-side, generous
 *                      whitespace, broad typography
 *    Tablet  768-1024: condensed 2-col, slightly tighter pad
 *    Mobile  <768    : Stack vertically (text → image), keep
 *                      breathing room, fluid typography via
 *                      clamp(). Image subjects framed via
 *                      object-position so crops never lose
 *                      focal points (sushi, chef, faces).
 *
 *  Breakpoints: 320 / 768 / 1024 / 1440 (per design brief)
 * ───────────────────────────────────────────────────────── */

/* ============ ≤1440px : slight condensing ============ */
@media (max-width: 1440px) {
  .hero__headline { font-size: clamp(32px, 3.4vw, 46px); }
}

/* ============ ≤1200px : tablet-large ============ */
@media (max-width: 1200px) {
  .nav__links { gap: 16px; }
  .nav__links a { font-size: 11px; }
  .hero__left { padding: 56px 44px 40px; }
  .hero__headline { font-size: clamp(30px, 4vw, 40px); }
}

/* ============ ≤1024px : tablet (drawer activated) ============ */
@media (max-width: 1024px) {
  .nav__links { display: none; }

  .hero { padding: 18px 24px 0; }
  .hero__grid { min-height: 580px; }
  .hero__left {
    padding: 48px 40px 40px;
    min-height: 580px;
    max-width: 100%;
  }
  .hero__headline { font-size: clamp(28px, 4.2vw, 36px); }
  .hero__body, .hero__body-en { max-width: 480px; }

  .grid-row { padding: 18px 24px 0; gap: 18px; }

  .gallery__panel { grid-template-columns: 200px 1fr; }
  .gallery__left { padding: 28px 22px; }

  .footer__inner { gap: 20px; }
  .footer__links { gap: 16px; flex-wrap: wrap; justify-content: center; }
}

/* ============ ≤768px : MOBILE — vertical stacking ============ */
@media (max-width: 768px) {
  /* === NAV — compact but breathable === */
  .nav__inner { padding: 14px 18px; gap: 14px; }
  .nav__logo .word .top { font-size: 16px; letter-spacing: 0.16em; }
  .nav__logo .word .sub { font-size: 9px; letter-spacing: 0.26em; }
  .nav__logo .kanji-mark { width: 30px; height: 30px; }
  .nav__cta { padding: 9px 16px; font-size: 12px; letter-spacing: 0.08em; }
  .lang-toggle { font-size: 11px; }
  .lang-toggle button { padding: 6px 12px; }

  /* === HERO — stack: text on top, photo below === */
  .hero { padding: 16px 18px 0; }
  .hero__grid {
    display: grid;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr;
    min-height: 0;
    overflow: visible;
  }
  .hero__left {
    padding: 40px 28px 36px;
    min-height: 0;
    max-width: 100%;
    grid-row: 1;
    z-index: 2;
  }
  .hero__left::before { width: 56px; height: 42px; top: 18px; left: 18px; }
  .hero__left::after { width: 360px; height: 360px; right: -80px; opacity: 0.4; }
  .hero__headline {
    font-size: clamp(24px, 6.4vw, 32px);
    line-height: 1.4;
    letter-spacing: 0.04em;
  }
  .hero__en { font-size: clamp(13px, 3.6vw, 16px); margin-top: 14px; line-height: 1.55; }
  .hero__en .line2 { font-size: clamp(11px, 2.8vw, 13px); letter-spacing: 0.16em; margin-top: 4px; }
  .hero__body, .hero__body-en {
    font-size: clamp(12px, 3.2vw, 14px);
    line-height: 1.95;
    margin-top: 24px;
    max-width: 100%;
  }
  .hero__body br, .hero__body-en br { display: none; }
  .hero__bg {
    /* Photo becomes its own row below the text on mobile */
    position: relative;
    inset: auto;
    grid-row: 2;
    width: 100%;
    height: clamp(240px, 56vw, 380px);
    /* Frame the right-side subjects (chef + guests) on narrow screens */
    background-position: 70% center;
  }
  .hero__bg::after {
    /* Drop the cream wash entirely — the photo is its own row now */
    display: none;
  }
  .vert-tag { display: none; }
  .hero__badges {
    gap: 12px;
    margin-top: 28px;
    flex-wrap: wrap;
  }
  .cta--primary { padding: 13px 22px; gap: 10px; }
  .cta--primary .cta__label { font-size: 13px; letter-spacing: 0.06em; }
  .cta--primary .cta__sub { font-size: 9.5px; letter-spacing: 0.16em; }

  /* === SECTION GRID — generous mobile padding === */
  .grid-row { padding: 14px 18px 0; gap: 14px; }
  .panel { padding: 32px 24px; }
  .panel__tag { margin-bottom: 22px; gap: 12px; }
  .panel__tag .num { font-size: 20px; }
  .panel__tag .label { font-size: 11px; letter-spacing: 0.28em; }
  .panel__h { font-size: clamp(20px, 5.4vw, 26px); line-height: 1.5; }
  .panel__h-en { font-size: 12px; margin-top: 6px; }
  .panel__body { font-size: clamp(12.5px, 3.4vw, 14px); line-height: 1.95; }
  .panel__body-en { font-size: clamp(12px, 3.2vw, 13.5px); line-height: 1.85; }

  /* === CONCEPT — STACK (text → photo) === */
  .concept {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .concept__photo {
    min-height: 0;
    aspect-ratio: 4 / 3;
  }
  .concept__photo img { object-position: center 35%; }
  .concept .quote-zh { font-size: 13px; line-height: 1.75; margin-top: 12px; }
  /* Move enso to a more discrete spot when stacked */
  .concept::after {
    width: clamp(280px, 70vw, 420px);
    height: clamp(280px, 70vw, 420px);
    left: -10%;
    top: 30%;
    transform: none;
    opacity: 0.32;
  }

  /* === MENU — STACK course images, then composition cards === */
  .menu-panel { padding: 32px 24px; }
  .menu-meta-ja, .menu-meta { font-size: 11px; line-height: 1.7; margin-top: 10px; }
  .menu-courses {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 24px;
  }
  .menu-course-card .price-tag { font-size: 11.5px; padding: 6px 14px; }
  .menu-course-card .course-flag { font-size: 9.5px; padding: 4px 10px; }
  .menu-compose { margin-top: 28px; padding-top: 22px; }
  .menu-compose-head { font-size: 10.5px; letter-spacing: 0.26em; margin-bottom: 14px; }
  .menu-compose-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .menu-compose-card { padding: 22px 22px 20px; }
  .menu-compose-tier { font-size: 10px; letter-spacing: 0.26em; margin-bottom: 6px; }
  .menu-compose-name { font-size: clamp(15px, 4vw, 17px); line-height: 1.45; }
  .menu-compose-price { font-size: 13.5px; padding-bottom: 14px; margin-bottom: 14px; }
  .menu-compose-price small { font-size: 10.5px; }
  .menu-compose-list li { font-size: clamp(12px, 3.2vw, 13px); line-height: 1.95; }
  .menu-compose-tagline { font-size: 11.5px; margin-top: 16px; }
  .menu-table { margin-top: 28px; }
  .menu-table-head { font-size: 10px; letter-spacing: 0.26em; padding-top: 14px; }
  .menu-row {
    grid-template-columns: 32px 1fr auto;
    gap: 10px;
    padding: 14px 0;
  }
  .menu-row .mn { font-size: 13px; }
  .menu-row .mt { font-size: 13px; line-height: 1.5; }
  .menu-row .mt small { font-size: 10.5px; line-height: 1.55; margin-top: 4px; }
  .menu-row .mp { font-size: 13.5px; }
  .menu-row .mp small { font-size: 9.5px; }
  .menu-min { padding: 14px 16px; margin-top: 18px; }
  .menu-min-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .menu-min-label { font-size: 10px; letter-spacing: 0.22em; }
  .menu-min-value { font-size: 12.5px; }
  .menu-min-value strong { font-size: 15px; }
  .menu-min-note { font-size: 11px; line-height: 1.7; }
  .menu-foot { font-size: 11px; margin-top: 18px; line-height: 1.85; }

  /* === CHEF — STACK (photo → bio → journey → credentials) === */
  .chef__panel {
    grid-template-columns: 1fr;
  }
  .chef__photo {
    min-height: clamp(280px, 70vw, 420px);
    background-position: center 22%;
  }
  .chef__photo .ph-label { font-size: 9px; padding: 4px 8px; bottom: 12px; left: 12px; }
  .chef__info {
    padding: 32px 24px;
  }
  .chef__info::before {
    width: clamp(420px, 110vw, 720px);
    height: clamp(420px, 110vw, 720px);
    top: -120px;
    right: -160px;
    opacity: 0.32;
  }
  .chef__name { font-size: clamp(20px, 5.4vw, 24px); }
  .chef__name .en { font-size: clamp(13px, 3.6vw, 16px); margin-left: 8px; }
  .chef__role { font-size: 11px; }
  .chef__bio { font-size: clamp(12.5px, 3.4vw, 13.5px); line-height: 2; margin-top: 20px; }
  .chef__pull { padding: 16px 20px; font-size: 13px; margin-top: 22px; }
  .chef__pull .en { font-size: 11px; margin-top: 6px; }
  .chef__journey { padding: 22px 0 8px; margin-top: 24px; }
  .chef__journey-title { font-size: 10.5px; letter-spacing: 0.28em; margin-bottom: 14px; }
  .chef__journey-stats { gap: 8px; margin-bottom: 14px; }
  .chef__journey-stats .stat { padding: 16px 8px 14px; }
  .chef__journey-stats .stat-num { font-size: clamp(22px, 6vw, 28px); }
  .chef__journey-stats .stat-num sup { font-size: clamp(12px, 3vw, 14px); }
  .chef__journey-stats .stat-num small { font-size: 11px; }
  .chef__journey-stats .stat-label { font-size: 9.5px; line-height: 1.4; margin-top: 6px; }
  .chef__journey-regions { font-size: 10.5px; letter-spacing: 0.12em; margin: 8px 0 12px; }
  .chef__journey-quote { font-size: 12px; padding-left: 12px; line-height: 1.85; }
  .chef__creds { margin-top: 24px; padding-top: 18px; }
  .chef__creds h4, .chef__creds-title { font-size: 10.5px; letter-spacing: 0.26em; margin-bottom: 14px; }
  .cred__grid { gap: 12px; }
  .cred__meta { padding: 10px 12px 12px; }
  .cred__meta .cred__tag { font-size: 9px; letter-spacing: 0.18em; }
  .cred__meta .cred__title { font-size: 11px; line-height: 1.45; margin-top: 4px; }
  .cred__meta .cred__sub { font-size: 9.5px; }

  /* === HK — STACK badges (each badge full-width centred) === */
  .hk__h { font-size: clamp(18px, 4.8vw, 22px); line-height: 1.5; }
  .hk__en { font-size: 12px; margin-top: 6px; }
  .hk__body { font-size: clamp(12px, 3.2vw, 13px); line-height: 1.95; margin-top: 16px; }
  .hk__badges {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 24px;
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
  }
  .hk__badge-caption { padding: 12px 16px; }
  .hk__badge-caption .en { font-size: 11px; letter-spacing: 0.24em; }
  .hk__badge-caption .ja { font-size: 12px; margin-top: 4px; }
  .hk__protocols { margin-top: 26px; }
  .hk__proto-title { font-size: 11px; letter-spacing: 0.14em; margin-bottom: 10px; }
  .hk__proto-list { font-size: clamp(12px, 3.2vw, 13px); line-height: 2; padding-left: 16px; }
  .hk__message { margin-top: 26px; padding-top: 20px; }
  .hk__quote { font-size: 12.5px; line-height: 1.95; padding-left: 16px; }
  .hk__quote p { margin-bottom: 10px; }
  .hk__cite { font-size: 11px; }

  /* === GALLERY — STACK (sidebar above grid, 2-col grid below) === */
  .gallery__panel {
    grid-template-columns: 1fr;
  }
  .gallery__left {
    padding: 28px 22px 22px;
  }
  .panel__body--gallery { font-size: 12px; line-height: 1.85; }
  .gallery__left .insta { font-size: 12px; gap: 10px; margin-top: 18px; }
  .gallery__left .insta img { width: 22px; height: 22px; }
  .gallery__left .handle { font-size: 11px; margin-top: 12px; word-break: break-all; }
  .gallery__grid {
    border-left: none;
    border-top: 1px solid var(--rule-soft);
    grid-template-columns: repeat(2, 1fr);
  }

  /* === VOICES — STACK (1 column, generous padding) === */
  .voices__intro { font-size: 13px; margin-bottom: 20px; }
  .voices__intro em { font-size: 10px; letter-spacing: 0.22em; margin-top: 6px; }
  .voices__list {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .voice { padding: 28px 22px 20px; }
  .voice .voice__num { font-size: 10px; letter-spacing: 0.22em; }
  .voice .quote-glyph { font-size: 52px; line-height: 0.55; margin-bottom: 8px; }
  .voice .text { font-size: clamp(12px, 3.2vw, 13.5px); line-height: 1.95; }
  .voice .text-en { font-size: clamp(11.5px, 3vw, 13px); line-height: 1.75; }
  .voice-author { gap: 12px; margin-top: 18px; padding-top: 14px; }
  .voice .av { width: 38px; height: 38px; font-size: 14px; }
  .voice .name { font-size: 12.5px; line-height: 1.4; }
  .voice .name .en { font-size: 10.5px; }

  /* === FAQ === */
  .faq { padding: 14px 0; }
  .faq .q { font-size: clamp(12px, 3.2vw, 13.5px); }
  .faq .qmark { font-size: 13px; margin-right: 8px; }
  .faq .plus { width: 22px; height: 22px; font-size: 13px; }
  .faq-answer {
    padding: 12px 16px 14px 30px;
    font-size: clamp(11.5px, 3vw, 13px);
    line-height: 1.85;
  }

  /* === RESERVATION + FORM — STACK info above form === */
  .res__panel { padding: 32px 24px; }
  .res__intro { font-size: 13px; line-height: 1.95; margin-bottom: 12px; }
  .res__photo { height: 130px; margin-bottom: 18px; }
  .res__cta { font-size: 13px; padding: 13px 0; letter-spacing: 0.18em; margin-bottom: 22px; }
  .res__info { font-size: 12px; gap: 12px; }
  .res__info dt { font-size: 10.5px; letter-spacing: 0.14em; }
  .res__buttons {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .res__buttons a { padding: 12px 0; font-size: 12.5px; gap: 8px; }

  .form__section { padding-top: 22px; margin-top: 22px; }
  .form__section-title { font-size: 10.5px; letter-spacing: 0.28em; margin-bottom: 16px; }
  .form__row {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 14px;
  }
  .form__field { gap: 6px; }
  .form__label { font-size: 11.5px; }
  .form__input, .form__select, .form__textarea {
    padding: 10px 12px;
    font-size: 14px;
  }
  .form__textarea { min-height: 90px; }
  .phone-row { grid-template-columns: 110px 1fr; gap: 8px; }
  .date-cand-label { font-size: 11px; }
  .date-time-row { grid-template-columns: 1fr 110px; gap: 8px; }
  .form__note { font-size: 11px; line-height: 1.7; }
  .allergy-box { padding: 18px 18px; }
  .allergy-sub { font-size: 9.5px; letter-spacing: 0.18em; margin: 14px 0 8px; }
  .check-group {
    grid-template-columns: 1fr;
    gap: 6px 12px;
  }
  .check-group.col2 { grid-template-columns: 1fr; }
  .check-item { font-size: 12.5px; padding: 4px 0; gap: 8px; }
  .privacy-row { font-size: 12.5px; line-height: 1.7; gap: 10px; }
  .form__submit { padding: 14px 0; font-size: 13px; letter-spacing: 0.2em; }
  .form__nav { gap: 10px; }
  .form__nav-back { padding: 13px 18px; font-size: 12px; }
  .form__nav-next { padding: 14px 18px; font-size: 13px; letter-spacing: 0.16em; }

  .form__stepper { margin-bottom: 22px; }
  .form__stepper-item { padding: 12px 14px; }
  .form__stepper-num { width: 20px; height: 20px; font-size: 10.5px; margin-right: 10px; }
  .form__stepper-label { font-size: 10px; letter-spacing: 0.18em; }
  .form__stepper-sub { font-size: 11px; margin-left: 30px; margin-top: 3px; }

  /* === FOOTER — STACK === */
  footer { padding: 32px 22px 22px; margin-top: 48px; }
  .footer__inner {
    grid-template-columns: 1fr;
    gap: 22px;
    justify-items: center;
    text-align: center;
  }
  .footer__logo-img { height: 52px; }
  .footer__logo .word .top { font-size: 16px; letter-spacing: 0.18em; }
  .footer__logo .word .sub { font-size: 8.5px; }
  .footer__links {
    gap: 12px 18px;
    font-size: 11px;
    flex-wrap: wrap;
    justify-content: center;
  }
  .footer__social a img { width: 28px; height: 28px; }
  .footer__bottom {
    font-size: 9.5px;
    letter-spacing: 0.1em;
    padding-top: 16px;
    margin-top: 22px;
  }
}

/* ============ ≤600px : modals + lightbox ============ */
@media (max-width: 600px) {
  .policy__box { padding: 28px 22px 32px; }
  .policy__title { font-size: 13px; margin-bottom: 18px; }
  .policy__body p, .policy__body li { font-size: 12px; line-height: 1.85; }
  .policy__body h3 { font-size: 12.5px; margin: 18px 0 6px; }
  .policy__body table { font-size: 11px; }
  .policy__body th, .policy__body td { padding: 7px 9px; }
  .lightbox { padding: 16px; }
  .lightbox__close { top: 12px; right: 12px; width: 36px; height: 36px; font-size: 20px; }
  .lightbox__caption { font-size: 10.5px; letter-spacing: 0.18em; }
}

/* ============ ≤480px : small phones ============ */
@media (max-width: 480px) {
  .nav__inner { padding: 12px 14px; gap: 10px; }
  .nav__cta { padding: 7px 13px; font-size: 11px; }
  .lang-toggle button { padding: 5px 10px; font-size: 10.5px; }
  .menu-btn { width: 34px; height: 34px; }

  .hero { padding: 12px 14px 0; }
  .hero__left { padding: 32px 22px 28px; }
  .hero__bg { height: clamp(220px, 60vw, 320px); }

  .grid-row { padding: 12px 14px 0; gap: 12px; }
  .panel { padding: 26px 18px; }
  .menu-panel { padding: 26px 18px; }
  .res__panel { padding: 26px 18px; }

  /* HK — keep stacked, slightly tighter */
  .hk__badges { max-width: 320px; }
}

/* ============ ≤320px : tiny screens (iPhone SE 1st gen) ============ */
@media (max-width: 320px) {
  .nav__inner { padding: 10px 12px; }
  .nav__cta { padding: 6px 11px; font-size: 10.5px; }
  .nav__logo .word .top { font-size: 14px; }

  .hero__left { padding: 28px 18px 24px; }
  .hero__headline { font-size: 22px; }

  .panel { padding: 22px 14px; }
  .menu-panel { padding: 22px 14px; }
  .res__panel { padding: 22px 14px; }
  .grid-row { padding: 10px 12px 0; }
}

/* ──────── components.css ──────── */
/* =========================================================
 *  KOKORO — Components Layer
 *  Each block here is a self-contained UI unit (concept,
 *  menu, chef, halal/kosher, voices, gallery, faq, form,
 *  modal, lightbox, …). Page-wide responsive rules live in
 *  layout.css; component-specific tweaks stay here next to
 *  their owners.
 * ========================================================= */

/* ─────────────────────────────────────────────────────────
 *  CTA — primary hero call-to-action button
 * ───────────────────────────────────────────────────────── */
.cta--primary {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 14px 28px 14px 26px;
  background: linear-gradient(135deg, var(--gold-2) 0%, var(--gold) 100%);
  color: #fff;
  text-decoration: none;
  font-family: var(--display);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 6px 22px rgba(176, 140, 90, 0.28);
  position: relative;
  overflow: hidden;
  transition: transform 400ms ease-out, box-shadow 400ms ease-out, background 400ms ease-out;
}
.cta--primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 30%, rgba(255, 255, 255, 0.18) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 600ms ease-out;
}
.cta--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(176, 140, 90, 0.36);
}
.cta--primary:hover::before { transform: translateX(100%); }
.cta--primary:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}
.cta--primary .cta__label {
  font-size: 15px;
  letter-spacing: 0.06em;
  font-weight: 500;
  line-height: 1.15;
  color: #fff;
}
.cta--primary .cta__sub {
  display: block;
  margin-top: 2px;
  font-family: var(--en);
  font-style: italic;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
}
.cta--primary .cta__arrow {
  font-size: 16px;
  line-height: 1;
  transform: translateX(0);
  transition: transform 320ms ease-out;
  color: #fff;
}
.cta--primary:hover .cta__arrow { transform: translateX(3px); }

/* ─────────────────────────────────────────────────────────
 *  01 CONCEPT
 * ───────────────────────────────────────────────────────── */
.concept {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 44px;
  align-items: stretch;
}
.concept__text {
  position: relative;
  z-index: 1;
}
.concept__photo {
  position: relative;
  margin: 0;
  align-self: stretch;
  min-height: 420px;
  overflow: hidden;
  border: 1px solid var(--rule-soft);
  background: #ece3cf;
  z-index: 1;
}
.concept__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Keep the chef's hand & nigiri centred on any crop */
  object-position: center 40%;
  transition: transform 600ms ease;
}
.concept:hover .concept__photo img { transform: scale(1.02); }
.concept .quote-zh {
  margin-top: 14px;
  font-family: var(--display);
  font-size: 14px;
  color: var(--ink-2);
  letter-spacing: 0.06em;
}
/* Decorative enso (zen brush circle) — large background presence
   anchored within the text column. Sits behind text via z-index 0,
   sized so it never reaches the right-hand photo. */
.concept::after {
  content: '';
  position: absolute;
  left: -90px;
  top: 50%;
  transform: translateY(-50%);
  width: 720px;
  height: 720px;
  max-width: calc(100% - 480px);  /* never overlap the photo column */
  background: url('../images/concept_enso.png') center/contain no-repeat;
  opacity: 0.55;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
/*
 * Concept stays 2-col across viewports per the design directive
 * (PC structure preserved on mobile). The watermark and photo
 * scale via the responsive overrides in layout.css.
 */

/* ─────────────────────────────────────────────────────────
 *  02 MENU
 * ───────────────────────────────────────────────────────── */
.menu-panel {
  grid-column: span 1;
  padding: 36px 40px;
  overflow: hidden;
}
.menu-meta {
  margin-top: 4px;
  font-family: var(--en);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--ink-3);
  text-transform: uppercase;
}
.menu-meta-ja {
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--ink-2);
}
.menu-courses {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 28px;
}
.menu-course-card {
  position: relative;
  display: block;
  overflow: hidden;
  border: 1px solid var(--rule-soft);
  background: #f5efe2;
  cursor: pointer;
  transition: transform 320ms ease, box-shadow 320ms ease, border-color 320ms ease;
}
.menu-course-card:hover {
  transform: translateY(-3px);
  border-color: var(--rule);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.06);
}
.menu-course-card img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 480ms ease;
}
.menu-course-card:hover img { transform: scale(1.02); }
.menu-course-card .price-tag {
  position: absolute;
  top: 14px;
  right: 14px;
  background: rgba(251, 248, 241, 0.94);
  border: 1px solid var(--rule);
  padding: 6px 14px;
  font-family: var(--en);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--ink);
  font-weight: 500;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 2;
}
.menu-course-card .course-flag {
  position: absolute;
  top: 14px;
  left: 14px;
  font-family: var(--en);
  font-size: 10px;
  letter-spacing: 0.28em;
  color: var(--gold);
  text-transform: uppercase;
  font-weight: 500;
  background: rgba(251, 248, 241, 0.94);
  padding: 5px 11px;
  border: 1px solid var(--rule);
  z-index: 2;
}
/* Course composition cards (placed above the price table) */
.menu-compose {
  margin-top: 32px;
  padding-top: 26px;
  border-top: 1px solid var(--rule);
}
.menu-compose-head {
  font-family: var(--en);
  font-size: 10.5px;
  letter-spacing: 0.28em;
  color: var(--ink-3);
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 14px;
}
.menu-compose-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.menu-compose-card {
  position: relative;
  border: 1px solid var(--rule-soft);
  background: rgba(232, 217, 191, 0.12);
  padding: 24px 24px 22px;
  transition: transform 280ms ease, border-color 280ms ease, box-shadow 280ms ease;
}
.menu-compose-card:hover {
  transform: translateY(-2px);
  border-color: var(--rule);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.05);
}
.menu-compose-card--premium {
  background: rgba(176, 140, 90, 0.08);
  border-color: rgba(176, 140, 90, 0.3);
}
.menu-compose-card--premium::after {
  content: '★';
  position: absolute;
  top: 14px;
  right: 16px;
  font-size: 13px;
  color: var(--gold);
  letter-spacing: 0;
}
.menu-compose-tier {
  display: block;
  font-family: var(--en);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
  margin-bottom: 8px;
}
.menu-compose-name {
  font-family: var(--display);
  font-size: 17px;
  letter-spacing: 0.04em;
  color: var(--ink);
  font-weight: 500;
  line-height: 1.4;
  margin: 0 0 4px;
}
.menu-compose-price {
  font-family: var(--en);
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--ink-2);
  font-weight: 500;
  margin: 0 0 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rule-soft);
}
.menu-compose-price small {
  font-family: var(--display);
  font-size: 10.5px;
  color: var(--ink-3);
  letter-spacing: 0.04em;
  margin-left: 4px;
}
.menu-compose-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.menu-compose-list li {
  font-size: 12.5px;
  line-height: 2;
  color: var(--ink-2);
  padding-left: 18px;
  position: relative;
  letter-spacing: 0.02em;
}
.menu-compose-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 12px;
  width: 9px;
  height: 1px;
  background: var(--gold);
}
.menu-compose-tagline {
  text-align: center;
  margin-top: 18px;
  font-size: 11.5px;
  color: var(--ink-3);
  font-style: italic;
  letter-spacing: 0.04em;
}
.menu-compose-tagline strong {
  color: var(--gold);
  font-weight: 500;
  font-style: normal;
  font-family: var(--en);
  letter-spacing: 0.18em;
}
@media (max-width: 768px) {
  .menu-compose-grid { grid-template-columns: 1fr; gap: 12px; }
  .menu-compose-card { padding: 22px 20px 18px; }
  .menu-compose-name { font-size: 15px; }
}

.menu-table {
  margin-top: 32px;
  border-top: 1px solid var(--rule);
}
.menu-table-head {
  margin-bottom: 6px;
  padding-top: 14px;
  font-family: var(--en);
  font-size: 10.5px;
  letter-spacing: 0.28em;
  color: var(--ink-3);
  text-transform: uppercase;
  font-weight: 500;
}
.menu-row {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 14px;
  padding: 16px 4px;
  border-bottom: 1px solid var(--rule-soft);
  align-items: center;
}
.menu-row .mn {
  font-family: var(--en);
  font-style: italic;
  font-size: 14px;
  color: var(--gold);
}
.menu-row .mt {
  font-size: 13px;
  color: var(--ink);
  font-weight: 500;
  letter-spacing: 0.02em;
}
.menu-row .mt small {
  display: block;
  font-size: 11px;
  color: var(--ink-3);
  font-weight: 400;
  margin-top: 2px;
  letter-spacing: 0.04em;
}
.menu-row .mp {
  font-family: var(--en);
  font-size: 14px;
  color: var(--ink);
  letter-spacing: 0.04em;
  font-weight: 500;
  white-space: nowrap;
  text-align: right;
  line-height: 1.2;
}
.menu-row .mp small {
  display: block;
  font-family: var(--display);
  font-size: 10.5px;
  color: var(--ink-3);
  letter-spacing: 0.04em;
  font-weight: 400;
  margin-top: 2px;
}
.menu-min {
  margin-top: 18px;
  padding: 16px 18px;
  border: 1px solid var(--rule-soft);
  background: rgba(232, 217, 191, 0.18);
}
.menu-min-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}
.menu-min-label {
  font-family: var(--en);
  font-size: 10.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
}
.menu-min-value {
  font-size: 13px;
  color: var(--ink-2);
  font-family: var(--display);
  letter-spacing: 0.02em;
}
.menu-min-value strong {
  color: var(--ink);
  font-weight: 600;
  font-family: var(--en);
  font-size: 16px;
  letter-spacing: 0.04em;
}
.menu-min-note {
  margin-top: 6px;
  font-size: 11px;
  line-height: 1.7;
  color: var(--ink-3);
}
.menu-foot {
  margin-top: 18px;
  font-size: 11px;
  line-height: 1.8;
  color: var(--ink-3);
}
.menu-foot em {
  font-family: var(--en);
  font-style: italic;
  display: block;
  margin-top: 4px;
}

/* ─────────────────────────────────────────────────────────
 *  03 CHEF (incl. JOURNEY + CREDENTIALS sub-blocks)
 * ───────────────────────────────────────────────────────── */
.chef__panel {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  padding: 0;
  overflow: hidden;
}
.chef__photo {
  /* Frame the chef's face & hands; "center 18%" keeps the head visible
     when the panel narrows on tablet/mobile widths. */
  background: #d8cdb7 url('../images/chef.png') center 18% / cover no-repeat;
  position: relative;
  min-height: 460px;
}
.chef__photo .ph-label {
  position: absolute;
  bottom: 18px;
  left: 18px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-2);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  background: rgba(251, 248, 241, 0.92);
  padding: 5px 10px;
  border: 1px solid var(--rule);
}
.chef__info {
  padding: 36px 40px;
  position: relative;
  overflow: hidden;
}
/* Decorative brushstroke watermark on the right side of the chef info column.
   Sits behind text via z-index 0; lifted children to z-index 1. */
.chef__info::before {
  content: '';
  position: absolute;
  top: -200px;
  right: -200px;
  width: 1200px;
  height: 1200px;
  background: url('../images/chef_brush.png') center/contain no-repeat;
  opacity: 0.4;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.chef__info > * { position: relative; z-index: 1; }
@media (max-width: 768px) {
  .chef__info::before {
    width: 620px;
    height: 620px;
    top: -120px;
    right: -120px;
    opacity: 0.28;
  }
}
.chef__name {
  margin-top: 6px;
  font-family: var(--display);
  font-size: 24px;
  color: var(--ink);
  font-weight: 500;
}
.chef__name .en {
  font-family: var(--en);
  font-style: italic;
  font-size: 18px;
  color: var(--ink-3);
  margin-left: 12px;
  font-weight: 400;
}
.chef__role {
  margin-top: 4px;
  font-size: 12px;
  color: var(--ink-3);
  letter-spacing: 0.1em;
}
.chef__role .en {
  font-family: var(--en);
  font-style: italic;
  margin-left: 10px;
}
.chef__bio {
  margin-top: 24px;
  font-size: 12.5px;
  line-height: 2;
  color: var(--ink-2);
}
.chef__pull {
  margin-top: 22px;
  padding: 18px 22px;
  background: var(--paper-2);
  border-left: 2px solid var(--gold);
  font-family: var(--display);
  font-size: 14px;
  color: var(--ink);
  letter-spacing: 0.04em;
  line-height: 1.7;
}
.chef__pull .en {
  display: block;
  margin-top: 8px;
  font-family: var(--en);
  font-style: italic;
  font-size: 12px;
  color: var(--ink-3);
  letter-spacing: 0.01em;
}
.chef__journey {
  margin-top: 28px;
  padding: 22px 0 8px;
  border-top: 1px solid var(--rule-soft);
}
.chef__journey-title {
  font-family: var(--en);
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
  margin-bottom: 16px;
}
.chef__journey-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 14px;
}
.chef__journey-stats .stat {
  text-align: center;
  padding: 18px 8px 16px;
  background: rgba(232, 217, 191, 0.18);
  border: 1px solid var(--rule-soft);
  transition: background 320ms ease, border-color 320ms ease;
}
.chef__journey-stats .stat:hover {
  background: rgba(232, 217, 191, 0.32);
  border-color: var(--rule);
}
.chef__journey-stats .stat-num {
  display: block;
  font-family: var(--en);
  font-size: 34px;
  letter-spacing: 0.02em;
  color: var(--ink);
  font-weight: 500;
  line-height: 1;
}
.chef__journey-stats .stat-num sup {
  font-size: 18px;
  color: var(--gold);
  vertical-align: super;
  margin-left: 1px;
  font-style: italic;
}
.chef__journey-stats .stat-num small {
  font-size: 13px;
  color: var(--ink-3);
  margin-left: 3px;
  letter-spacing: 0.04em;
}
.chef__journey-stats .stat-label {
  display: block;
  margin-top: 8px;
  font-size: 10px;
  color: var(--ink-3);
  letter-spacing: 0.06em;
  line-height: 1.45;
}
.chef__journey-regions {
  text-align: center;
  font-family: var(--en);
  font-style: italic;
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.16em;
  margin: 8px 0 12px;
}
.chef__journey-quote {
  margin-top: 6px;
  font-size: 12.5px;
  line-height: 1.85;
  color: var(--ink-2);
  font-style: italic;
  padding-left: 14px;
  border-left: 2px solid var(--gold-soft);
}
.chef__creds {
  margin-top: 24px;
  border-top: 1px solid var(--rule-soft);
  padding-top: 18px;
}
.chef__creds h4,
.chef__creds-title {
  font-size: 11px;
  letter-spacing: 0.3em;
  color: var(--ink-3);
  font-weight: 500;
  margin-bottom: 14px;
  font-family: var(--en);
  text-transform: uppercase;
}
.chef__creds--compact .cred__card { font-size: 92%; }
.chef__creds--compact .cred__thumb { aspect-ratio: 5 / 3; }
.chef__creds--compact .cred__meta { padding: 8px 10px 10px; }
.chef__creds--compact .cred__meta .cred__title {
  font-size: 11px;
  line-height: 1.4;
  margin-top: 2px;
}
.chef__creds--compact .cred__meta .cred__sub { font-size: 9.5px; }

/* ─────────────────────────────────────────────────────────
 *  CRED-CARD (used by chef credentials and similar tiles)
 * ───────────────────────────────────────────────────────── */
.cred__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.cred__card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  background: var(--paper-2, #fbf8f1);
  border: 1px solid var(--rule-soft);
  transition: transform 240ms ease, box-shadow 240ms ease, border-color 240ms ease;
}
.cred__card:hover {
  transform: translateY(-2px);
  border-color: var(--rule);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}
.cred__thumb {
  aspect-ratio: 4 / 3;
  background-color: #f5efe2;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-bottom: 1px solid var(--rule-soft);
  overflow: hidden;
}
.cred__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cred__meta { padding: 10px 12px 12px; }
.cred__meta .cred__tag {
  font-family: var(--en);
  font-size: 9.5px;
  letter-spacing: 0.22em;
  color: var(--gold);
  text-transform: uppercase;
  font-weight: 500;
}
.cred__meta .cred__title {
  margin-top: 4px;
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--ink-2);
  font-weight: 500;
}
.cred__meta .cred__sub {
  margin-top: 3px;
  font-family: var(--en);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  line-height: 1.5;
}

/* ─────────────────────────────────────────────────────────
 *  04 HALAL & KOSHER
 * ───────────────────────────────────────────────────────── */
.hk__panel { background: var(--paper); }
.hk__h {
  font-family: var(--display);
  font-size: 24px;
  line-height: 1.5;
  color: var(--ink);
  font-weight: 500;
}
.hk__en {
  margin-top: 8px;
  font-family: var(--en);
  font-style: italic;
  font-size: 14px;
  color: var(--ink-3);
}
.hk__body {
  margin-top: 18px;
  font-size: 12.5px;
  line-height: 2;
  color: var(--ink-2);
}
.hk__badges {
  margin-top: 28px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.hk__badge {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--rule-soft);
  background: var(--paper);
  overflow: hidden;
  transition: transform 280ms ease, border-color 280ms ease, box-shadow 280ms ease;
  text-decoration: none;
  color: inherit;
  cursor: default;
}
.hk__badge:hover {
  transform: translateY(-2px);
  border-color: var(--rule);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.06);
}
.hk__badge-img {
  aspect-ratio: 1 / 1;
  width: 100%;
  overflow: hidden;
  background: #f5efe2;
}
.hk__badge-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hk__badge-caption {
  padding: 14px 16px;
  border-top: 1px solid var(--rule-soft);
  text-align: center;
  background: rgba(251, 248, 241, 0.6);
}
.hk__badge-caption .en {
  font-family: var(--en);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
  display: block;
}
.hk__badge-caption .ja {
  display: block;
  margin-top: 5px;
  font-family: var(--display);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink-2);
  font-weight: 500;
}
.hk__protocols { margin-top: 28px; }
.hk__proto-title {
  font-family: var(--en);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
}
.hk__proto-list {
  padding-left: 18px;
  margin: 0;
  font-size: 12.5px;
  line-height: 2;
  color: var(--ink-2, #555);
}
.hk__proto-list li { margin-bottom: 2px; }
.hk__message {
  margin-top: 32px;
  border-top: 1px solid rgba(212, 175, 55, 0.25);
  padding-top: 24px;
}
.hk__quote {
  margin: 0;
  padding: 0 0 0 20px;
  border-left: 3px solid var(--gold);
  font-size: 13px;
  line-height: 1.9;
  color: var(--ink-2, #555);
  font-style: normal;
}
.hk__quote p { margin: 0 0 12px; }
.hk__cite {
  display: block;
  margin-top: 10px;
  font-family: var(--en);
  font-size: 11.5px;
  color: var(--gold);
  font-style: normal;
  letter-spacing: 0.06em;
}

/* ─────────────────────────────────────────────────────────
 *  05 GALLERY
 * ───────────────────────────────────────────────────────── */
.gallery__panel {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 220px 1fr;
  padding: 0;
  overflow: hidden;
}
.gallery__left { padding: 36px 32px; }
.gallery__left .insta {
  margin-top: 28px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11.5px;
  color: var(--ink-2);
  letter-spacing: 0.05em;
}
.gallery__left .insta img { width: 26px; height: 26px; }
.gallery__left .handle {
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
  display: flex;
  align-items: center;
  gap: 8px;
}
.gallery__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  border-left: 1px solid var(--rule-soft);
}
.g-item {
  position: relative;
  border-right: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
  aspect-ratio: 1 / 1;
  overflow: hidden;
  cursor: pointer;
  transition: transform 320ms ease;
}
.g-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #f1ead8;
}
.g-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.18) 100%);
  opacity: 0;
  transition: opacity 320ms ease;
  pointer-events: none;
}
.g-item:hover { transform: scale(1.015); }
.g-item:hover::after { opacity: 1; }

/* ─────────────────────────────────────────────────────────
 *  06 VOICES
 * ───────────────────────────────────────────────────────── */
.voices__panel { grid-column: span 1; }
.voices__intro {
  margin-top: 2px;
  margin-bottom: 22px;
  font-family: var(--display);
  font-size: 13px;
  color: var(--ink-2);
  letter-spacing: 0.04em;
}
.voices__intro em {
  display: block;
  margin-top: 6px;
  font-family: var(--en);
  font-style: italic;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
}
.voices__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.voice {
  display: flex;
  flex-direction: column;
  padding: 32px 24px 22px;
  border: 1px solid var(--rule-soft);
  background: var(--paper);
  position: relative;
  transition: transform 260ms ease, box-shadow 260ms ease, border-color 260ms ease;
}
.voice:hover {
  transform: translateY(-3px);
  border-color: var(--rule);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}
.voice .voice__num {
  position: absolute;
  top: 14px;
  right: 16px;
  font-family: var(--en);
  font-style: italic;
  font-size: 10px;
  letter-spacing: 0.24em;
  color: var(--gold);
  text-transform: uppercase;
  font-weight: 500;
}
.voice .quote-glyph {
  font-family: var(--display);
  font-size: 60px;
  line-height: 0.55;
  color: rgba(180, 145, 70, 0.22);
  user-select: none;
  pointer-events: none;
  margin: 0 0 10px -2px;
}
.voice .text {
  flex: 1;
  margin: 0;
  font-family: var(--display);
  font-size: 12.5px;
  color: var(--ink);
  line-height: 1.95;
  letter-spacing: 0.02em;
}
.voice .text-en {
  flex: 1;
  margin: 0;
  font-family: var(--en);
  font-style: italic;
  font-size: 12px;
  color: var(--ink-2);
  line-height: 1.75;
}
.voice__author {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--rule-soft);
}
.voice .av {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #d8c9aa, #b9a079);
  display: grid;
  place-items: center;
  color: var(--paper);
  font-family: var(--display);
  font-size: 15px;
  font-weight: 500;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4) inset;
}
.voice .name {
  font-family: var(--display);
  font-size: 13px;
  color: var(--ink);
  font-weight: 500;
  line-height: 1.4;
}
.voice .name .en {
  display: block;
  margin-top: 1px;
  font-family: var(--en);
  font-style: italic;
  font-size: 10.5px;
  color: var(--ink-3);
  margin-left: 0;
  letter-spacing: 0.04em;
  font-weight: 400;
}

/* ─────────────────────────────────────────────────────────
 *  07 FAQ
 * ───────────────────────────────────────────────────────── */
.faq-panel { grid-column: span 1; }
.faq-list { margin-top: 8px; }
.faq {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule-soft);
  cursor: pointer;
  transition: color 0.2s;
}
.faq:hover { color: var(--gold); }
.faq .qmark {
  font-family: var(--en);
  font-style: italic;
  color: var(--gold);
  font-size: 14px;
  margin-right: 10px;
}
.faq .q {
  font-size: 12.5px;
  color: var(--ink);
  letter-spacing: 0.02em;
}
.faq .plus {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid var(--rule);
  display: grid;
  place-items: center;
  font-size: 14px;
  color: var(--gold);
  line-height: 1;
}

/* ─────────────────────────────────────────────────────────
 *  08 RESERVATION (panel + side info + form)
 * ───────────────────────────────────────────────────────── */
.res__panel {
  grid-column: span 1;
  padding: 40px 44px;
}
.res__photo {
  height: 132px;
  background:
    repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.025) 0 2px, transparent 2px 14px),
    linear-gradient(135deg, #ece3cf, #cebd99);
  margin-bottom: 22px;
  background-image: url('../images/asset_49.png');
  background-size: cover;
  background-position: center;
  background-color: #f1eada;
}
.res__cta {
  display: block;
  text-align: center;
  background: var(--gold);
  color: var(--paper);
  text-decoration: none;
  padding: 14px 0;
  font-size: 14px;
  letter-spacing: 0.18em;
  margin-bottom: 24px;
  transition: background 0.2s;
}
.res__cta:hover { background: var(--gold-2); }
.res__info {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  font-size: 11.5px;
  line-height: 1.7;
}
.res__info dt {
  font-family: var(--en);
  font-style: italic;
  font-size: 11px;
  color: var(--gold);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 2px;
}
.res__info dd { color: var(--ink-2); }
.res__buttons {
  margin-top: 22px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.res__buttons--top { margin-top: 16px; }
.res__buttons a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 0;
  text-decoration: none;
  font-size: 12.5px;
  letter-spacing: 0.06em;
  color: white;
}
.res__buttons .line { background: var(--green); }
.res__buttons .line:hover { background: var(--green-2); }
.res__buttons .wa { background: var(--green); }
.res__buttons .wa:hover { background: var(--green-2); }
.res__buttons a img {
  width: 16px;
  height: 16px;
  filter: brightness(0) invert(1);
}
.res__intro {
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.9;
  margin-bottom: 8px;
}
.res__form { margin-top: 8px; }
.res__contact {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--rule-soft);
}

/* Form sections */
.form__section {
  border-top: 1px solid var(--rule-soft);
  padding-top: 24px;
  margin-top: 24px;
}
.form__section:first-child {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}
.form__section-title {
  font-family: var(--en);
  font-size: 10.5px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 18px;
}
.form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}
.form__row.full { grid-template-columns: 1fr; }
.form__row--mt-14 { margin-top: 14px; }
.form__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.form__label {
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--ink-2);
}
.form__label .req {
  color: var(--red);
  margin-left: 3px;
  font-size: 10px;
}
.form__input,
.form__select,
.form__textarea {
  background: var(--bg);
  border: 1px solid var(--rule);
  padding: 9px 12px;
  font-family: var(--serif);
  font-size: 13px;
  color: var(--ink);
  width: 100%;
  border-radius: 2px;
  transition: border-color 0.2s;
}
.form__input:focus,
.form__select:focus,
.form__textarea:focus {
  outline: none;
  border-color: var(--gold);
}
.form__input::placeholder,
.form__textarea::placeholder {
  color: var(--ink-4);
  font-size: 11.5px;
}
.form__select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23a89d8b'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  cursor: pointer;
}
.form__textarea {
  resize: vertical;
  min-height: 90px;
  line-height: 1.7;
}
.phone-row {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 8px;
}
.date-cand { margin-bottom: 12px; }
.date-cand-label {
  font-size: 11px;
  color: var(--ink-3);
  font-family: var(--en);
  letter-spacing: 0.1em;
  margin-bottom: 6px;
}
.date-time-row {
  display: grid;
  grid-template-columns: 1fr 120px;
  gap: 8px;
}
.form__note {
  font-size: 11px;
  color: var(--ink-3);
  font-style: italic;
  line-height: 1.6;
  margin-top: 6px;
}
.form__note--mb-12 { margin-bottom: 12px; }
.form__note--mt-8  { margin-top: 8px; }
.form__note--mt-10 { margin-top: 10px; }
.allergy-input--mb-12 { margin-bottom: 12px; }
.allergy-box {
  background: var(--bg);
  border: 1px solid var(--rule-soft);
  padding: 20px 22px;
  margin-top: 10px;
}
.allergy-sub {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.2em;
  color: var(--ink-3);
  text-transform: uppercase;
  margin: 16px 0 8px;
}
.allergy-sub:first-child { margin-top: 0; }
.check-group {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 6px 14px;
}
.check-group.col2 {
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}
.check-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: var(--ink-2);
  cursor: pointer;
  line-height: 1.4;
  padding: 3px 0;
}
.check-item input[type="checkbox"] {
  width: 14px;
  height: 14px;
  accent-color: var(--gold);
  flex-shrink: 0;
}
.privacy-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 12.5px;
  color: var(--ink-2);
  line-height: 1.65;
  margin-bottom: 18px;
}
.privacy-row input {
  width: 14px;
  height: 14px;
  accent-color: var(--gold);
  flex-shrink: 0;
  margin-top: 3px;
}
.privacy-row a {
  color: var(--gold);
  text-decoration: none;
}
.privacy-row a:hover { text-decoration: underline; }
.form__submit {
  display: block;
  width: 100%;
  background: var(--ink);
  color: var(--paper);
  border: none;
  padding: 15px 0;
  font-family: var(--en);
  font-size: 13.5px;
  letter-spacing: 0.22em;
  cursor: pointer;
  transition: background 0.2s;
  position: relative;
}
.form__submit:hover { background: var(--ink-2); }
.form__submit:disabled {
  background: var(--ink-4);
  cursor: not-allowed;
}
.form__submit.is-loading {
  color: transparent;
  pointer-events: none;
}
.form__submit.is-loading::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.32);
  border-top-color: #fff;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  margin-top: -9px;
  margin-left: -9px;
  animation: formSpin 720ms linear infinite;
}
@keyframes formSpin { to { transform: rotate(360deg); } }
.form__error-banner {
  margin-bottom: 18px;
  padding: 14px 18px;
  border: 1px solid var(--red);
  background: rgba(183, 58, 54, 0.06);
  color: var(--red);
  font-size: 12.5px;
  line-height: 1.7;
}
.form__error-banner strong {
  display: block;
  margin-bottom: 4px;
  font-size: 13px;
}
.form__error {
  font-size: 11px;
  color: var(--red);
  margin-top: 4px;
  display: none;
}
.form__error--privacy {
  font-size: 11px;
  color: var(--red);
  margin-bottom: 10px;
  display: none;
}
.form__error--privacy.is-visible { display: block; }
.form__field.has-error .form__input,
.form__field.has-error .form__select,
.form__field.has-error .form__textarea { border-color: var(--red); }
.form__field.has-error .form__error { display: block; }
.form__success {
  display: none;
  text-align: center;
  padding: 40px 20px;
  background: var(--bg);
  border: 1px solid var(--rule-soft);
}
.form__success .mark {
  font-size: 32px;
  margin-bottom: 14px;
}
.form__success p {
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.9;
}

/* Step navigation (2-step form) */
.form__stepper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin-bottom: 24px;
  border: 1px solid var(--rule-soft);
  list-style: none;
  padding: 0;
}
.form__stepper-item {
  padding: 14px 18px;
  background: rgba(232, 217, 191, 0.16);
  color: var(--ink-3);
  position: relative;
  transition: background 320ms ease, color 320ms ease;
}
.form__stepper-item.is-active {
  background: var(--paper);
  color: var(--ink);
}
.form__stepper-item.is-done {
  background: rgba(176, 140, 90, 0.08);
  color: var(--ink-2);
}
.form__stepper-item + .form__stepper-item {
  border-left: 1px solid var(--rule-soft);
}
.form__stepper-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--ink-4);
  color: var(--paper);
  font-family: var(--en);
  font-size: 11px;
  font-weight: 600;
  margin-right: 10px;
  transition: background 320ms ease;
}
.form__stepper-item.is-active .form__stepper-num { background: var(--gold); }
.form__stepper-item.is-done .form__stepper-num { background: var(--ink); }
.form__stepper-item.is-done .form__stepper-num::before {
  content: '✓';
  display: block;
}
.form__stepper-item.is-done .form__stepper-num span { display: none; }
.form__stepper-label {
  font-family: var(--en);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
}
.form__stepper-sub {
  display: block;
  margin-top: 3px;
  margin-left: 32px;
  font-family: var(--display);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
}
.form__stepper-item.is-active .form__stepper-sub { color: var(--ink-2); }

.form__step { display: none; }
.form__step.is-active {
  display: block;
  animation: stepFadeIn 360ms ease-out;
}
@keyframes stepFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .form__step.is-active { animation: none; }
}
.form__nav {
  display: flex;
  gap: 12px;
  margin-top: 12px;
}
.form__nav-back {
  flex: 0 0 auto;
  padding: 14px 22px;
  background: transparent;
  color: var(--ink-2);
  border: 1px solid var(--rule);
  font-family: var(--display);
  font-size: 13px;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background 280ms ease, border-color 280ms ease;
}
.form__nav-back:hover {
  background: rgba(232, 217, 191, 0.3);
  border-color: var(--ink-3);
}
.form__nav-next {
  flex: 1;
  padding: 16px 22px;
  background: var(--ink);
  color: var(--paper);
  border: 0;
  font-family: var(--display);
  font-size: 14px;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: background 280ms ease;
  position: relative;
}
.form__nav-next:hover { background: var(--ink-2); }
.form__nav-next::after {
  content: '→';
  margin-left: 10px;
  transition: transform 280ms ease;
  display: inline-block;
}
.form__nav-next:hover::after { transform: translateX(3px); }
.form__nav .form__submit {
  flex: 1;
  margin-top: 0;
}

/* ─────────────────────────────────────────────────────────
 *  Policy modal (privacy / terms / etc.)
 * ───────────────────────────────────────────────────────── */
.policy__overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  z-index: 9000;
  overflow-y: auto;
  padding: 40px 16px;
}
.policy__overlay.open {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.policy__box {
  background: var(--paper, #fff);
  color: var(--ink, #111);
  max-width: 680px;
  width: 100%;
  border-radius: 2px;
  padding: 40px 40px 48px;
  position: relative;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.3);
}
.policy__close {
  position: absolute;
  top: 16px;
  right: 20px;
  background: none;
  border: none;
  font-size: 22px;
  cursor: pointer;
  color: var(--ink-3, #999);
  line-height: 1;
  padding: 4px 8px;
}
.policy__close:hover { color: var(--ink, #111); }
.policy__title {
  font-family: var(--en);
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 24px;
}
.policy__body h3 {
  font-size: 13px;
  font-weight: 600;
  margin: 20px 0 6px;
  color: var(--ink, #111);
}
.policy__body p,
.policy__body li {
  font-size: 12.5px;
  line-height: 1.85;
  color: var(--ink-2, #555);
  margin: 0 0 8px;
}
.policy__body ul {
  padding-left: 18px;
  margin: 0 0 8px;
}
.policy__body table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  margin-bottom: 12px;
}
.policy__body th,
.policy__body td {
  padding: 8px 10px;
  border: 1px solid #ddd;
  text-align: left;
  vertical-align: top;
}
.policy__body th {
  background: rgba(212, 175, 55, 0.1);
  font-weight: 600;
}

/* ─────────────────────────────────────────────────────────
 *  Lightbox (image viewer)
 * ───────────────────────────────────────────────────────── */
.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(8, 6, 2, 0.88);
  z-index: 9500;
  padding: 24px;
  opacity: 0;
  transition: opacity 220ms ease;
}
.lightbox.open {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
}
.lightbox__stage {
  position: relative;
  max-width: min(92vw, 1100px);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.lightbox__img {
  display: block;
  max-width: 100%;
  max-height: 82vh;
  width: auto;
  height: auto;
  object-fit: contain;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.55);
  background: #fbf8f1;
  transform: scale(0.96);
  transition: transform 240ms ease;
}
.lightbox.open .lightbox__img { transform: scale(1); }
.lightbox__caption {
  font-family: var(--en);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
  text-align: center;
}
.lightbox__close {
  position: absolute;
  top: 16px;
  right: 18px;
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  border-radius: 999px;
  transition: background 200ms ease, border-color 200ms ease;
}
.lightbox__close:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.5);
}