/* ===== HIKARI SUSHI — Design System ===== */
/* Washi-paper canvas · Sumi ink · Vermilion accent · Shippori Mincho display */
/* Structure adapted from the Ara Nori system; palette + type are Hikari's own. */

/* --- Tokens --- */
/* Palette (2026-07-25): black, light ivory, red. Neutral black rather than the
   earlier blue-black; ivory carries all the text; one red in two weights so it
   can be both readable type and a button that holds white. */
:root {
  --bg: #0a0a0a;
  --bg-alt: #101010;
  --surface: #161616;
  --surface-2: #1e1e1e;
  --fg: #f7f2e6;            /* light ivory - 17.7:1 on --bg */
  --fg-dim: #cfc7b5;        /* 11.8:1 */
  --muted: #999182;         /* 6.3:1 on --bg, 5.8:1 on --surface */
  --border: #262523;
  --border-light: #3a3835;
  --accent: #ef4444;        /* red as TYPE - 5.3:1 on --bg, 4.8:1 on --surface */
  --accent-hover: #f56565;
  --accent-strong: #c1272d; /* red BEHIND white - 5.8:1 with #fff */
  --accent-strong-hover: #d63038;
  --accent-subtle: rgba(239, 68, 68, 0.13);
  --indigo: #140a0a;        /* the dark band, tinted red rather than blue */
  --success: #5cb37d;
  --radius: 3px;
  --radius-lg: 6px;
  --font-display: 'Shippori Mincho', 'Hiragino Mincho ProN', Georgia, serif;
  --font-body: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, monospace;
  --max-w: 1200px;
  --max-w-narrow: 800px;
  --nav-h: 72px;
  --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* --- Custom Sushi Cursors --- */
/* Default: sushi nigiri cursor */
/* Pointer (links/buttons): chopsticks cursor */
/* Grabbing: onigiri cursor */
@media (pointer: fine) {
  html {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cellipse cx='16' cy='18' rx='11' ry='6' fill='%23f7f2e6' stroke='%230a0a0a' stroke-width='0.8'/%3E%3Cellipse cx='16' cy='17' rx='9' ry='4.5' fill='%23fffdf5'/%3E%3Cpath d='M8 17 Q10 12 16 11 Q22 12 24 17' fill='%23ef4444' stroke='%23c1272d' stroke-width='0.4'/%3E%3Cpath d='M10 15 Q12 13 16 12.5 Q20 13 22 15' fill='%23f56565' opacity='0.5'/%3E%3Cellipse cx='12' cy='14.5' rx='1.2' ry='0.6' fill='%23fff' opacity='0.3'/%3E%3C/svg%3E") 16 18, auto;
  }
  a, button, [role="button"], input[type="submit"], .btn, .nav-toggle,
  .menu-tab, .menu-item, .photo-card, summary, label[for], select,
  [onclick], .clickable {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cline x1='4' y1='2' x2='14' y2='28' stroke='%230a0a0a' stroke-width='1.8' stroke-linecap='round'/%3E%3Cline x1='18' y1='2' x2='20' y2='28' stroke='%230a0a0a' stroke-width='1.8' stroke-linecap='round'/%3E%3Cellipse cx='16' cy='22' rx='5' ry='2.5' fill='%23ef4444' opacity='0.4'/%3E%3C/svg%3E") 12 6, pointer !important;
  }
}

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; color-scheme: dark; }
body {
  font: 16px/1.65 var(--font-body);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img, video { max-width: 100%; display: block; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cline x1='4' y1='2' x2='14' y2='28' stroke='%230a0a0a' stroke-width='1.8' stroke-linecap='round'/%3E%3Cline x1='18' y1='2' x2='20' y2='28' stroke='%230a0a0a' stroke-width='1.8' stroke-linecap='round'/%3E%3Cellipse cx='16' cy='22' rx='5' ry='2.5' fill='%23ef4444' opacity='0.4'/%3E%3C/svg%3E") 12 6, pointer; }
ul, ol { list-style: none; }
::selection { background: rgba(224, 72, 59, 0.32); color: var(--fg); }

/* --- Typography --- */
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 400; }

.heading-xl {
  font: 400 clamp(32px, 4vw, 56px)/1.15 var(--font-display);
  letter-spacing: 0.02em;
}
.heading-lg {
  font: 400 clamp(24px, 3vw, 40px)/1.2 var(--font-display);
  letter-spacing: 0.02em;
}
.heading-md {
  font: 500 clamp(18px, 2vw, 24px)/1.3 var(--font-display);
}
.body-lg {
  font-size: clamp(16px, 1.1vw, 19px);
  line-height: 1.7;
  color: var(--fg-dim);
  max-width: 66ch;   /* hold the reading measure in the 65–72ch comfort band */
}
/* Center the measure only where the block is meant centered; left-aligned
   grid intros keep their flush edge under the heading above them. */
header .body-lg, .text-center .body-lg { margin-inline: auto; }
.label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}
.caption { font-size: 13px; color: var(--muted); }

/* --- Layout --- */
.container { max-width: var(--max-w); margin: 0 auto; padding: 0 24px; }
.container-narrow { max-width: var(--max-w-narrow); margin: 0 auto; padding: 0 24px; }
.section { padding: 120px 0; }
.section-sm { padding: 80px 0; }
.text-center { text-align: center; }

.grid { display: grid; gap: 32px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* --- Navigation --- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-h);
  z-index: 100;
  transition: background 0.4s var(--ease), border-color 0.4s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(10, 10, 10, 0.82);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom-color: var(--border);
}
.nav-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 24px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-logo {
  display: flex;
  align-items: center;
  white-space: nowrap;
}
.nav-logo img {
  height: 44px;
  width: auto;
  display: block;
}
.nav-links { display: flex; gap: 28px; align-items: center; }
.nav-links a {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-dim);
  transition: color 0.3s var(--ease);
  position: relative;
  padding: 4px 0;
}
.nav-links a:hover,
.nav-links a.active { color: var(--accent); }
.nav-links a.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0; right: 0;
  height: 1px;
  background: var(--accent);
}
.nav-links a.nav-cta {
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  background: var(--accent-strong);
  padding: 10px 24px;
  border-radius: var(--radius);
  transition: background 0.3s var(--ease);
  margin-left: 4px;
}
.nav-links a.nav-cta:hover { background: var(--accent-strong-hover); }
.nav-links a.nav-cta::after { display: none !important; }
.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  background: none;
  border: none;
  color: var(--fg);
  font-size: 22px;
  place-items: center;
}

/* Mobile nav */
.nav-mobile {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 10, 0.97);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  z-index: 99;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
}
.nav-mobile.open { display: flex; }
.nav-mobile a {
  font: 400 24px/1.4 var(--font-display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-dim);
  transition: color 0.3s var(--ease);
}
.nav-mobile a:hover { color: var(--accent); }
.nav-mobile-close {
  position: absolute;
  top: 14px; right: 14px;
  width: 44px; height: 44px;
  background: none;
  border: none;
  color: var(--fg);
  font-size: 28px;
  cursor: pointer;
}

/* --- Hero --- */
.hero {
  overflow: hidden; /* parallax poster is scaled 1.16 — clip so it never widens the document (WCAG 1.4.10) */
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  padding: var(--nav-h) 24px 40px;
}
.hero-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 35%, rgba(180, 50, 43, 0.04) 0%, transparent 55%);
  pointer-events: none;
}
.hero-content { position: relative; z-index: 1; max-width: 900px; }
.hero-label {
  font-size: clamp(12px, 1vw, 14px);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 28px;
}
.hero-title {
  font: 300 clamp(52px, 9vw, 120px)/0.95 var(--font-display);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg);
  margin-bottom: 20px;
}
.hero-divider {
  width: 56px;
  height: 1px;
  background: var(--accent);
  margin: 0 auto 20px;
}
.hero-desc {
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.7;
  color: var(--fg-dim);
  max-width: 560px;
  margin: 0 auto 12px;
}
.hero-location {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 40px;
}
.hero-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 14px 28px;
  border-radius: var(--radius);
  border: none;
  transition: all 0.3s var(--ease);
  text-decoration: none;
  white-space: nowrap;
}
.btn-primary { background: var(--accent-strong); color: #fff; }
.btn-primary:hover { background: var(--accent-strong-hover); }
.btn-outline { background: transparent; border: 1px solid var(--border-light); color: var(--fg); }
.btn-outline:hover { border-color: var(--accent); color: var(--accent); }
.btn-lg { padding: 16px 36px; font-size: 13px; }

/* --- Dividers --- */
.divider { width: 48px; height: 1px; background: var(--accent); margin: 24px auto; }
.divider-full { width: 100%; height: 1px; background: var(--border); }

/* --- Cards --- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.card:hover { border-color: var(--border-light); }
.card-body { padding: 24px; }

/* --- Photo Placeholder --- */
.photo-placeholder {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
}
.photo-placeholder::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(145deg, transparent 50%, rgba(180, 50, 43, 0.03) 100%);
  pointer-events: none;
}

/* --- Real Photos --- */
.img-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.img-rounded {
  border-radius: var(--radius);
  overflow: hidden;
}
.photo-card {
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
}
.photo-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s var(--ease);
}
.photo-card:hover img { transform: scale(1.03); }

/* Full-width photo strip */
.photo-strip {
  width: 100%;
  overflow: hidden;
  position: relative;
}
.photo-strip img {
  width: 100%;
  height: clamp(280px, 35vw, 480px);
  object-fit: cover;
  display: block;
}
.photo-strip-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(22, 24, 28, 0.15), rgba(22, 24, 28, 0.4));
  pointer-events: none;
}

/* Photo hero variant */
.hero-photo {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  padding: var(--nav-h) 24px 40px;
  overflow: hidden;
}
.hero-photo-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-photo-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-photo-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(22, 24, 28, 0.45) 0%,
    rgba(22, 24, 28, 0.55) 50%,
    rgba(22, 24, 28, 0.7) 100%
  );
}
.hero-photo .hero-content {
  position: relative;
  z-index: 1;
  max-width: 900px;
}
.hero-photo .hero-label { color: rgba(255,255,255,0.85); }
.hero-photo .hero-title { color: #fff; text-shadow: 0 2px 40px rgba(0,0,0,0.15); }
.hero-photo .hero-desc { color: rgba(255,255,255,0.85); }
.hero-photo .hero-location { color: rgba(255,255,255,0.6); }
.hero-photo .hero-divider { background: rgba(255,255,255,0.4); }
.hero-photo .btn-outline {
  border-color: rgba(255,255,255,0.4);
  color: #fff;
}
.hero-photo .btn-outline:hover {
  border-color: #fff;
  background: rgba(255,255,255,0.1);
}

/* Page hero with background photo */
.page-hero-photo {
  padding: calc(var(--nav-h) + 80px) 0 80px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.page-hero-photo-bg {
  position: absolute;
  inset: 0;
}
.page-hero-photo-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.page-hero-photo-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(22, 24, 28, 0.5) 0%,
    rgba(22, 24, 28, 0.65) 100%
  );
}
.page-hero-photo .container { position: relative; z-index: 1; }
.page-hero-photo h1 {
  font: 300 clamp(40px, 6vw, 72px)/1.1 var(--font-display);
  letter-spacing: 0.04em;
  margin-bottom: 12px;
  color: #fff;
}
.page-hero-photo p { font-size: 16px; color: rgba(255,255,255,0.8); max-width: 520px; margin: 0 auto; }
.page-hero-photo .badge-gold {
  background: rgba(255,255,255,0.15);
  color: #fff;
  border-color: rgba(255,255,255,0.25);
}
.page-hero-photo .badge-green {
  background: rgba(255,255,255,0.15);
  color: #fff;
  border-color: rgba(255,255,255,0.25);
}

/* Photo gallery grid */
.photo-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.photo-gallery .photo-card { aspect-ratio: 4/3; }
.photo-gallery .photo-card.tall { grid-row: span 2; aspect-ratio: auto; }
.photo-gallery .photo-card.wide { grid-column: span 2; }
@media (max-width: 768px) {
  .photo-gallery { grid-template-columns: repeat(2, 1fr); }
  .photo-gallery .photo-card.wide { grid-column: span 1; }
}
@media (max-width: 480px) {
  .photo-gallery { grid-template-columns: 1fr; }
}

/* --- Badges --- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 2px;
}
.badge-gold {
  background: var(--accent-subtle);
  color: var(--accent);
  border: 1px solid rgba(180, 50, 43, 0.15);
}
.badge-green {
  background: rgba(61, 139, 94, 0.08);
  color: var(--success);
  border: 1px solid rgba(61, 139, 94, 0.2);
}

/* --- Form Elements --- */
.form-group { margin-bottom: 20px; }
.form-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin-bottom: 8px;
}
.form-input,
.form-textarea,
.form-select {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 16px;
  font-size: 15px;
  color: var(--fg);
  transition: border-color 0.3s var(--ease);
}
.form-input::placeholder,
.form-textarea::placeholder { color: var(--muted); }
.form-input:focus,
.form-textarea:focus,
.form-select:focus { border-color: var(--accent); } /* UA/:focus-visible outline kept (WCAG 2.4.7) */
.form-textarea { min-height: 120px; resize: vertical; }

/* --- Section Headers --- */
.section-header { text-align: center; margin-bottom: 64px; }
.section-header .label { margin-bottom: 16px; display: block; }
.section-header h2 { margin-bottom: 16px; }
.section-header p {
  max-width: 560px;
  margin: 0 auto;
  color: var(--fg-dim);
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.7;
}

/* --- Footer --- */
.footer {
  background: var(--bg-alt);
  border-top: 1px solid var(--border);
  padding: 72px 0 36px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr repeat(3, 1fr);
  gap: 48px;
  margin-bottom: 56px;
}
.footer-brand {
  margin-bottom: 14px;
}
.footer-brand img {
  height: 40px;
  width: auto;
  display: block;
}
.footer-tagline {
  font-size: 13px;
  line-height: 1.7;
  color: var(--muted);
  max-width: 260px;
}
.footer h2 {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin-bottom: 16px;
}
.footer ul { display: flex; flex-direction: column; gap: 2px; }
.footer li a {
  display: inline-block; padding-block: 5px; /* 24px+ target (WCAG 2.5.8) */
  font-size: 14px;
  color: var(--muted);
  transition: color 0.3s var(--ease);
}
.footer li a:hover { color: var(--accent); }
.footer-legal a { display: inline-block; padding-block: 6px; color: var(--muted); }
.footer-legal a:hover { color: var(--accent); }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 28px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--muted);
}

/* --- Scroll Animation --- */
/* Hidden states apply only once JS is confirmed running (html.fx-js) — without it
   the page must still render its content. */
.fx-js .fade-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.fx-js .fade-up.visible { opacity: 1; transform: translateY(0); }
.fade-up.delay-1 { transition-delay: 0.12s; }
.fade-up.delay-2 { transition-delay: 0.24s; }
.fade-up.delay-3 { transition-delay: 0.36s; }

/* Enhanced reveals */
.fx-js .reveal-left {
  opacity: 0;
  transform: translateX(-32px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.fx-js .reveal-left.visible { opacity: 1; transform: translateX(0); }

.fx-js .reveal-scale {
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.fx-js .reveal-scale.visible { opacity: 1; transform: scale(1); }

/* Card hover lift */
.experience-item,
.concept-card,
.award-item {
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s var(--ease);
}
@media (hover: hover) {
  .experience-item:hover,
  .concept-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 48px rgba(22, 24, 28, 0.08);
  }
}

/* --- Mobile CTA Bar --- */
/* Flat 4-up bar: wide accent slot for the money action, three equal siblings.
   Text-only — icons at 10px labels read as noise on a dark bar at arm's length. */
.mobile-cta-bar {
  display: none;
  position: fixed;
  inset: auto 0 0 0;
  z-index: 98;
  grid-template-columns: 1.2fr 1fr 1fr 1fr;
  background: rgba(10, 10, 10, 0.94);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom);
}
.mobile-cta-bar a,
.mobile-cta-bar button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 0 4px;
  font: 600 11px/1 var(--font-body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--fg);
  text-decoration: none;
  background: none;
  border: 0;
  cursor: pointer;
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
/* Dividers between the three plain slots; the accent slot needs none. */
.mobile-cta-bar a:not(.cta-accent),
.mobile-cta-bar button { border-left: 1px solid var(--border); }
.mobile-cta-bar a:active,
.mobile-cta-bar button:active { background: var(--bg-alt); }
.mobile-cta-bar a.cta-accent {
  background: var(--accent-strong);
  color: #fff;
}
.mobile-cta-bar a.cta-accent:active { background: var(--accent-strong-hover); }
.mobile-cta-bar a:focus-visible,
.mobile-cta-bar button:focus-visible { outline: 2px solid var(--fg); outline-offset: -3px; }

/* On phones the chat lives in the bar, so the widget's own floating bubble stays
   hidden until tapped — otherwise it sits on top of the bar and covers a slot. */
@media (max-width: 768px) {
  chat-widget {
    display: none;
    position: fixed !important;
    right: 0 !important;
    bottom: calc(56px + env(safe-area-inset-bottom)) !important;
  }
  body.chat-open chat-widget { display: block; }
}

/* --- Responsive --- */
@media (max-width: 1024px) {
  .section { padding: 88px 0; }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  :root { --nav-h: 64px; }
  .nav-links { display: none; }
  .nav-toggle { display: grid; }
  .section { padding: 64px 0; }
  .section-sm { padding: 48px 0; }
  .section-header { margin-bottom: 40px; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .hero { min-height: 85vh; padding-top: 80px; }
  /* The fixed bottom bar carries Order / Menu / Call / Chat from the first
     pixel of the page, so a second stack of the same two buttons in the hero is
     duplicate tap targets and pushes the copy down. Hidden at the same
     breakpoint the bar appears — never hide these unless the bar is showing. */
  .hero-split .hero-actions { display: none; }   /* see the hero block below for the spacing that goes with it */
  .hero-actions { flex-direction: column; align-items: center; }
  .hero-actions .btn { width: 100%; max-width: 280px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; gap: 12px; text-align: center; }
  .mobile-cta-bar { display: grid; }
  body { padding-bottom: calc(56px + env(safe-area-inset-bottom)); }
  .footer { padding-bottom: 80px; }
}

@media (max-width: 480px) {
  .container { padding: 0 16px; }
  .hero-title { letter-spacing: 0.03em; }
  .footer-grid { grid-template-columns: 1fr; }
}

/* ===== Header lockup (mark + wordmark) — added in upgrade ===== */
.nav-logo{gap:12px;align-items:center}
.nav-mark{height:40px;width:40px;border-radius:50%;background:var(--surface);padding:4px;box-sizing:border-box;box-shadow:0 2px 10px rgba(22,24,28,.14)}
.nav-word{font:500 21px/1 var(--font-display);letter-spacing:.2em;padding-left:.2em;color:#fff;text-shadow:0 1px 14px rgba(0,0,0,.4);transition:color .4s var(--ease),text-shadow .4s var(--ease)}
.nav.scrolled .nav-word{color:var(--fg);text-shadow:none}
@media (max-width:768px){ .nav-word{font-size:18px;letter-spacing:.16em} .nav-mark{height:36px;width:36px} }

/* ===== Professional scroll effects (added in upgrade) ===== */
.scroll-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:200;background:linear-gradient(90deg,var(--accent),var(--accent-hover));transform:scaleX(0);transform-origin:0 50%;will-change:transform;pointer-events:none}
.nav{transition:background .4s var(--ease),border-color .4s var(--ease),transform .45s var(--ease)}
.nav.nav-hidden{transform:translateY(-100%)}
/* richer reveal (blur + travel), driven by existing .visible observer */
.fx-js .fade-up{opacity:0;transform:translateY(34px);filter:blur(6px);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1),filter .9s cubic-bezier(.16,1,.3,1)}
.fx-js .fade-up.visible{opacity:1;transform:none;filter:none}
/* clip-path image reveal — gated on .fx-on so content shows if JS is absent */
.fx-on .fx-clip{clip-path:inset(0 0 18% 0);opacity:.001;transform:scale(1.05);transition:clip-path 1.1s cubic-bezier(.16,1,.3,1),opacity .9s ease,transform 1.1s cubic-bezier(.16,1,.3,1)}
.fx-on .fx-clip.fx-in{clip-path:inset(0 0 0 0);opacity:1;transform:scale(1)}
@media (prefers-reduced-motion:reduce){
  .fx-js .fade-up{opacity:1!important;transform:none!important;filter:none!important}
  .fx-on .fx-clip{opacity:1!important;transform:none!important;clip-path:none!important}
  .nav.nav-hidden{transform:none}
}

/* ===== HIKARI additions ===== */

/* Accessibility: visible focus + skip link (base system had neither) */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 300;
  background: var(--accent-strong); color: #fff; padding: 10px 18px;
  border-radius: var(--radius); font-size: 13px; font-weight: 600;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 12px; }

/* Brand mark */
/* The brand lockup itself — brush roundel + HIKARI SUSHI wordmark, as supplied.
   It carries its own colour and its own ®, so nothing is drawn behind it. The
   locality line sits under it because the lockup has no city in it. */
.nav-logo { flex-direction: column; align-items: flex-start; gap: 0; }
/* Outranks the generic `.nav-logo img { height:44px }` above — at 44px the
   lockup plus the locality line fills the whole 72px bar edge to edge. */
.nav-logo .nav-lockup {
  height: 36px; width: auto; display: block; flex: none;
}
/* Sits under the HIKARI SUSHI letters, not under the roundel. In the lockup the
   wordmark starts 552px into a 2346px image, so 23.5% of the logo's width — a
   percentage, so it stays aligned at any lockup height. */
.nav-locale {
  font: 600 9px/1 var(--font-body);
  letter-spacing: .3em; color: var(--muted);
  margin-top: 2px; padding-left: 23.5%;
  transition: color .4s var(--ease);
}
.nav.scrolled .nav-locale { color: var(--muted); }
@media (max-width: 768px) {
  .nav-logo .nav-lockup { height: 30px; }
  .nav-locale { font-size: 8px; letter-spacing: .26em; margin-top: 2px; }
}
/* .nav-logo/.nav-word/.mark rules for the old glyph-plus-typeset lockup lived here.
   Removed with that markup — the stray `gap: 12px` was still adding 12px between
   the logo and the locality line, on top of the 2px margin. */

/* Video hero — dark, moody plated-sushi loop behind the wordmark.
   Poster paints first (and is the whole hero under reduced-motion); video fades in over it. */
/* Split composition: the dish holds the right, the type holds the left.
   The plate is anchored right and feathered into the page background, so the
   left side is real negative space for the wordmark rather than an overlay. */
.hero-picture { display: contents; }
.hero-split {
  background: var(--bg);
  justify-content: flex-start;
  text-align: left;
}
/* The plate is let float: the box keeps the clip's own 16:9-ish ratio so the
   whole dish stays in frame, and an elliptical mask dissolves every edge into
   the page instead of ending on a rectangle. */
/* Full-bleed frame. The plate already sits right-of-centre with dark negative
   space on the left, so no mask or floating box is needed. */
.hero-poster {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center; z-index: 0;
  /* Source frame is a dark room shot; lifted here rather than re-exported so the
     asset stays the untouched original. */
  filter: brightness(1.45) contrast(.9) saturate(1.08);
}
.hero-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  /* Light wash only — the frame is meant to read open. Legibility is carried by
     the feathered plate under the copy (.hero-content::before), not by dimming
     the whole photo, so the case and the warm counter light stay at strength. */
  background:
    linear-gradient(to right, rgba(10, 10, 10,.26) 0%, rgba(10, 10, 10,.10) 38%, rgba(10, 10, 10,0) 62%),
    linear-gradient(to bottom, rgba(10, 10, 10,.04) 0%, rgba(10, 10, 10,0) 16%, rgba(10, 10, 10,0) 78%, rgba(10, 10, 10,.24) 100%);
}
.hero .hero-content { z-index: 2; }
.hero-split .hero-content {
  max-width: min(560px, 42vw);   /* stays inside the plate, clear of the sushi case */
  margin-right: auto;
  padding-left: clamp(0px, 2.5vw, 44px);
}
/* Readability plate. This frame is bright exactly where the type sits (the lit
   window is behind the headline), so contrast has to come from a local, heavily
   feathered pool rather than from a scrim across the whole image — measured, not
   eyeballed: accent on this bed clears 3:1 at the photo's brightest decile. */
.hero-split .hero-content::before {
  content: "";
  position: absolute;
  /* The box is deliberately much larger than the ellipse so the gradient reaches
     zero well inside its own bounds — sized tight, the falloff gets clipped by
     the element edge and the plate shows up as a rectangle over the photo. */
  inset: -48% -85% -52% -45%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(54% 50% at 31% 50%,
    rgba(6, 6, 6,.97) 0%, rgba(6, 6, 6,.94) 36%, rgba(6, 6, 6,.60) 64%,
    rgba(6, 6, 6,.22) 84%, rgba(6, 6, 6,0) 100%);
}
/* Unwind the centered defaults for this variant. */
.hero-split .hero-divider { margin-left: 0; }
.hero-split .hero-desc { margin-left: 0; margin-right: 0; }
.hero-split .hero-meta,
.hero-split .hero-actions { justify-content: flex-start; }
/* Sentence headline, not the wordmark: smaller scale, sentence case, red on the hook. */
.hero-split .hero-title {
  font: 400 clamp(33px, 4.3vw, 58px)/1.06 var(--font-display);
  letter-spacing: 0;
  text-transform: none;
  margin-bottom: 18px;   /* the deck line now sits between title and CTAs */
  text-shadow: 0 2px 40px rgba(0,0,0,.55);
}
.hero-split .hero-desc { margin-bottom: 32px; max-width: 46ch; }
.hero-split .hero-desc { color: rgba(247,242,230,.92); text-shadow: 0 1px 22px rgba(0,0,0,.5); }
.hero-split .hero-meta strong { color: rgba(247,242,230,.95); }

/* Below ~1150px a side-by-side split can't hold both a readable measure and the
   whole plate, so the hero stacks: dish band on top, type beneath it on dark.
   The band is a fixed height, not a viewport fraction, so the type always starts
   below the dish regardless of how the copy wraps. */
@media (max-width: 1150px) {
  /* The band is sized as a share of the SCREEN, not of the photo's width — a
     16:9 frame at full width is only ~57vw tall, which reads as a strip on a
     tall phone. --band-h drives both the image height and the padding that
     clears it, so they can never drift apart. Each breakpoint is served a
     source cut close to its own box ratio, so `cover` trims little. */
  .hero-split {
    --band-h: clamp(340px, 50vh, 620px);
    align-items: flex-start;
    min-height: 0;
    padding-top: calc(var(--nav-h) + 8px + var(--band-h) + 10px);
    padding-bottom: 48px;
  }
  .hero-poster {
    top: calc(var(--nav-h) + 8px); inset-block-end: auto; transform: none;
    width: 100%; height: var(--band-h);
    object-fit: cover; object-position: center;
    -webkit-mask-image: linear-gradient(to bottom, #000 93%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 93%, transparent 100%);
  }
  /* Tied to the band, not to the hero's total height — a percentage-based ramp
     drifts into the middle of the photo as the copy below grows. Clear glass
     over the image, then one blend into the page exactly where the band ends. */
  .hero-scrim {
    background: linear-gradient(to bottom,
      rgba(10, 10, 10,.10) 0px,
      rgba(10, 10, 10,0) calc(var(--band-h) * .3),
      rgba(10, 10, 10,0) calc(var(--band-h) * .82),
      var(--bg) calc(var(--nav-h) + var(--band-h) + 8px));
  }
  .hero-split .hero-content { max-width: none; padding-left: 0; }
  /* Stacked layout puts the copy on the page background, not on the photo —
     the readability plate has nothing to do and only tints the black. */
  .hero-split .hero-content::before { display: none; }
  /* Same three facts lead the intent cards immediately below — keep the fold for the CTAs. */
  .hero-split .hero-meta { display: none; }
}
/* Phones get a 4:5 portrait cut of the same frame (the sign, the branch, the
   case, the counter seats) so a half-screen band stays a composition rather
   than a wide sliver. Must follow the block above to win on equal specificity. */
@media (max-width: 600px) {
  /* The hero's own CTAs are hidden at this width (the fixed bar carries them),
     so the band can take the space back and the photo keeps its presence. */
  .hero-split { --band-h: clamp(340px, 48vh, 520px); }
  .hero-split .hero-title { font-size: clamp(30px, 8.4vw, 40px); margin-bottom: 14px; }
  .hero-split .hero-desc { margin-bottom: 24px; }
}

/* Must sit after the two blocks above: same specificity, so source order is what
   decides. The hero CTAs are hidden wherever the fixed bar shows (<=768px), and
   the buttons were carrying the hero's bottom spacing — without this the deck
   line floats above ~90px of dead space. */
@media (max-width: 768px) {
  .hero-split { padding-bottom: 28px; }
  .hero-split .hero-desc { margin-bottom: 0; }
}
.hero-title { font-weight: 400; }
.hero-title em { font-style: normal; color: var(--accent); }
.hero-meta {
  display: flex; gap: 10px 22px; justify-content: center; flex-wrap: wrap;
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 34px;
}
.hero-meta strong { color: var(--fg-dim); font-weight: 600; }

/* Open-now pill */
.status-pill {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  padding: 7px 16px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--border); color: var(--fg-dim);
  margin-bottom: 22px;
}
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
.status-pill.is-open .status-dot { background: var(--success); box-shadow: 0 0 0 3px rgba(61,139,94,.18); }
.status-pill.is-closed .status-dot { background: var(--accent); box-shadow: 0 0 0 3px rgba(239,68,68,.22); }

/* Ink band (dark section) */
.band-ink { background: var(--indigo); color: #fff; }
.band-ink h2, .band-ink h3 { color: #fff; }
.band-ink p { color: rgba(255,255,255,.78); }
.band-ink .label { color: var(--accent); }
.band-ink .divider { background: var(--accent); }

/* Stat row */
.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; text-align: center; }
.stat-num { font: 300 clamp(34px,4vw,52px)/1 var(--font-display); color: var(--accent); display: block; margin-bottom: 8px; }
.band-ink .stat-num { color: var(--accent); }
.stat-label { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.band-ink .stat-label { color: rgba(255,255,255,.62); }
@media (max-width: 768px) { .stat-row { grid-template-columns: repeat(2, 1fr); gap: 32px 16px; } }

/* Concept / experience cards */
.concept-card, .experience-item {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 32px;
}
.concept-icon {
  width: 46px; height: 46px; border: 1px solid var(--border); border-radius: 50%;
  display: grid; place-items: center; font-size: 20px; color: var(--accent);
  margin-bottom: 20px; font-family: var(--font-display);
}
.concept-card h3 { font: 500 21px/1.3 var(--font-display); margin-bottom: 10px; }
.concept-card p { font-size: 15px; line-height: 1.7; color: var(--fg-dim); }

/* Signature roll list */
.roll-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 48px; }
.roll-row {
  display: flex; align-items: baseline; gap: 12px;
  padding: 18px 0; border-bottom: 1px solid var(--border);
}
.roll-row .rn { font: 500 17px/1.3 var(--font-display); letter-spacing: .01em; flex: 1; min-width: 0; }
.roll-row .rd { display: none; } /* ponytail: dotted leader dropped — names wrap, a leader would fight the wrap */
.roll-row .rp { font-size: 15px; color: var(--accent); font-variant-numeric: tabular-nums; }
.roll-row .rsub { display: block; font-size: 13px; color: var(--muted); margin-top: 4px; line-height: 1.5; }
@media (max-width: 768px) { .roll-list { grid-template-columns: 1fr; gap: 0; } }

/* --- Menu page --- */
.menu-nav {
  position: sticky; top: var(--nav-h); z-index: 60;
  background: rgba(10, 10, 10,.9);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--border);
  padding: 12px 0;
}
.menu-nav-inner {
  max-width: var(--max-w); margin: 0 auto; padding: 0 24px;
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
}
.menu-nav-inner::-webkit-scrollbar { display: none; }
.menu-tab {
  flex: none; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  padding: 9px 16px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface); color: var(--fg-dim); white-space: nowrap;
  transition: all .3s var(--ease);
}
.menu-tab:hover { border-color: var(--accent); color: var(--accent); }
.menu-tab.active { background: var(--accent-strong); border-color: var(--accent-strong); color: #fff; }

/* Three-tier vertical rhythm: generous category break · medium sub-block · tight rows. */
.menu-section { padding: 96px 0 8px; scroll-margin-top: calc(var(--nav-h) + 68px); }
.menu-section:first-of-type { padding-top: 44px; }        /* first sits right under the sticky tabs */
.menu-section-head { margin-bottom: 24px; }
.menu-section-head h2 { font: 400 clamp(26px,3.2vw,36px)/1.2 var(--font-display); letter-spacing: .02em; }
.menu-section-head .note { font-size: 13px; color: var(--muted); margin-top: 8px; line-height: 1.6; }
/* Sub-block within a category: subordinate to the category head in space and size. */
.menu-subhead { margin-top: 48px; }
.menu-subhead h2 { font-size: clamp(19px,2.2vw,24px); color: var(--fg-dim); }
.menu-subhead h2::before {
  content: ""; display: inline-block; width: 18px; height: 1px;
  background: var(--accent); vertical-align: middle; margin-right: 12px;
}
.menu-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 48px; }
@media (max-width: 768px) { .menu-grid { grid-template-columns: 1fr; } }
.menu-item {
  display: flex; align-items: baseline; gap: 10px;
  padding: 15px 0; border-bottom: 1px solid var(--border);
}
.menu-item .mi-body { flex: 1; min-width: 0; }
.menu-item .mi-name { font-size: 15px; font-weight: 600; color: var(--fg); letter-spacing: .01em; }
.menu-item .mi-desc { font-size: 13px; color: var(--muted); line-height: 1.55; margin-top: 4px; }
/* Owner request 2026-07-31: the pickable items on combos, bento and kid's meals
   read as one dim run-on line. The label stays muted; each choice is bold ivory
   so the eye lands on what you actually get to pick. */
.mi-choices { font-size: 13px; line-height: 1.7; margin-top: 6px; color: var(--muted); }
.mi-choices span { text-transform: uppercase; font-size: 10.5px; letter-spacing: .08em; font-weight: 600; color: var(--accent); margin-right: 2px; }
.mi-choices b { font-weight: 600; color: var(--fg-dim); white-space: nowrap; }
.mi-choices b:not(:last-child)::after { content: " ·"; font-weight: 400; color: var(--muted); }
.menu-item .mi-price { font-size: 15px; color: var(--accent); font-variant-numeric: tabular-nums; white-space: nowrap; }
.menu-item .mi-price span { display: block; font-size: 12px; color: var(--muted); text-align: right; }
/* Two-price sections (Regular Cut / Hand Rolls, Sashimi 6 pcs / 3 pcs) print two
   columns. Fixed widths so the numbers line up down the whole list. */
.menu-item .mi-price-2col { display: flex; gap: 18px; }
.menu-item .mi-price-2col > .mi-price-alt {
  display: block; width: 58px; text-align: right;
  color: var(--muted); font-size: 15px;
}
.menu-item .mi-price-2col { width: 134px; justify-content: flex-end; }
/* Mirrors .menu-grid's track layout so each key sits over its own price stack. */
.menu-colkey {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 48px;
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 10px;
}
.menu-colkey .key { display: flex; gap: 18px; justify-content: flex-end; width: 134px; margin-left: auto; }
.menu-colkey .key > i { width: 58px; text-align: right; font-style: normal; }
@media (max-width: 768px) {
  .menu-colkey { grid-template-columns: 1fr; }
  .menu-colkey .key:last-child { display: none; }
  .menu-item .mi-price-2col, .menu-colkey .key { width: auto; gap: 12px; }
  .menu-item .mi-price-2col > .mi-price-alt, .menu-colkey .key > i { width: 52px; }
}
.spicy { color: var(--accent); font-size: 11px; letter-spacing: .08em; font-weight: 700; }

.menu-legal {
  font-size: 12px; color: var(--muted); line-height: 1.7;
  border-top: 1px solid var(--border); padding-top: 24px; margin-top: 40px;
}

/* --- Hours table --- */
.hours-table { width: 100%; border-collapse: collapse; }
.hours-table th { text-align: left; font: 600 11px/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); padding-bottom: 14px; }
.hours-table td { padding: 12px 0; border-bottom: 1px solid var(--border); font-size: 15px; }
.hours-table td:last-child { text-align: right; color: var(--fg-dim); font-variant-numeric: tabular-nums; }
.hours-table tr.today td { color: var(--accent); font-weight: 600; }
.hours-table tr.today td:last-child { color: var(--accent); }

/* Info list */
.info-list li { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--border); font-size: 15px; }
.info-list li span:first-child { color: var(--muted); min-width: 96px; font-size: 13px; }

/* Order option cards */
.order-card { display: flex; flex-direction: column; gap: 14px; padding: 34px; }
.order-card h2, .order-card h3 { font: 500 22px/1.3 var(--font-display); }
.order-card p { font-size: 15px; line-height: 1.7; color: var(--fg-dim); flex: 1; }
.order-card .btn { align-self: flex-start; }

/* Map */
.map-frame { width: 100%; height: 420px; border: 1px solid var(--border); border-radius: var(--radius); }

/* When the main nav auto-hides on scroll-down, the sticky category strip takes its place. */
.nav.nav-hidden ~ main .menu-nav { top: 0; }

/* ===== Conversion layer (catering / reserve / intent CTAs) — added 2026-07-25 ===== */

/* Nav: reserve sits between the links and the order button — quieter than the CTA, louder than a link */
.nav-links a.nav-ghost {
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  padding: 9px 18px;
  margin-left: 6px;
  font-size: 12px;
  letter-spacing: .12em;
  transition: border-color .3s var(--ease), color .3s var(--ease);
}
.nav-links a.nav-ghost::after { display: none; }
.nav-links a.nav-ghost:hover { border-color: var(--accent); color: var(--accent); }

/* Catering hero sits under the fixed nav on a page with no full-bleed hero */
.cater-hero { padding-top: calc(var(--nav-h) + 56px); }

/* --- Tray comparison --- */
.tray-list { display: grid; gap: 18px; }
.tray {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 20px 40px;
  align-items: start;
  padding: 30px 32px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.tray:hover { border-color: var(--border-light); box-shadow: 0 10px 34px -22px rgba(22,24,28,.45); }
.tray-hero { background: var(--surface-2); border-color: var(--border-light); }
.tray-head h3 {
  font: 500 clamp(21px, 2vw, 26px)/1.2 var(--font-display);
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
}
.tray-tag {
  font: 600 10px/1 var(--font-body);
  letter-spacing: .14em; text-transform: uppercase;
  color: #fff; background: var(--accent-strong); /* 5.8:1 — was accent-on-subtle, failed 4.5:1 (WCAG 1.4.3) */
  padding: 5px 9px; border-radius: 2px;
}
.tray-sub { margin-top: 10px; font-size: 15px; line-height: 1.65; color: var(--fg-dim); }
.tray-note { grid-column: 1; font-size: 14px; line-height: 1.7; color: var(--muted); margin-top: -6px; }
.tray-foot {
  grid-column: 2; grid-row: 1 / span 2;
  display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
  text-align: right;
}
.tray-price { font: 400 clamp(28px, 3vw, 38px)/1 var(--font-display); color: var(--fg); font-variant-numeric: tabular-nums; }
.tray-unit { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.tray-btn { margin-top: 12px; }
@media (max-width: 760px) {
  .tray { grid-template-columns: 1fr; gap: 14px; padding: 26px 22px; }
  .tray-note { grid-column: 1; margin-top: 0; }
  .tray-foot { grid-column: 1; grid-row: auto; align-items: flex-start; text-align: left; }
  .tray-btn { width: 100%; text-align: center; }
}

/* --- Numbered steps --- */
.step-list { display: grid; gap: 4px; counter-reset: step; }
.step-list li { display: flex; gap: 22px; padding: 26px 0; border-bottom: 1px solid var(--border); }
.step-list li:last-child { border-bottom: 0; }
.step-n {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  font: 500 15px/1 var(--font-display); color: var(--accent);
  border: 1px solid var(--accent); opacity: .85;
}
.step-list h3 { font: 500 19px/1.3 var(--font-display); margin-bottom: 7px; }
.step-list p { font-size: 15px; line-height: 1.75; color: var(--fg-dim); }

/* --- FAQ --- */
.faq details { border-bottom: 1px solid var(--border); }
.faq summary {
  list-style: none; cursor: pointer;
  padding: 20px 34px 20px 0; position: relative;
  font: 500 17px/1.4 var(--font-display);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 6px; top: 50%;
  width: 9px; height: 9px; margin-top: -6px;
  border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted);
  transform: rotate(45deg); transition: transform .3s var(--ease), border-color .3s var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; border-color: var(--accent); }
.faq summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.faq details p { padding: 0 34px 22px 0; font-size: 15px; line-height: 1.8; color: var(--fg-dim); }

/* --- Catering form (lives on the ink band) --- */
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
@media (max-width: 640px) { .form-row { grid-template-columns: 1fr; } }
.cater-form .form-label { color: rgba(255,255,255,.72); }
.cater-form .form-input,
.cater-form .form-select,
.cater-form .form-textarea {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.24);
  color: #fff;
}
.cater-form .form-input::placeholder,
.cater-form .form-textarea::placeholder { color: rgba(255,255,255,.5); }
.cater-form .form-input:focus,
.cater-form .form-select:focus,
.cater-form .form-textarea:focus { border-color: var(--accent); background: rgba(255,255,255,.1); }
.cater-form .form-textarea { min-height: 92px; }
.cater-form .form-input:user-invalid,
.cater-form .form-select:user-invalid { border-color: #f0a39c; }
.form-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }
.form-status { margin-top: 16px; font-size: 14.5px; line-height: 1.6; color: var(--accent); min-height: 1.2em; }
.form-status.is-error { color: #f0a39c; }
.ink-btn { border-color: rgba(255,255,255,.45) !important; color: #fff !important; }
.ink-btn:hover { background: rgba(255,255,255,.1) !important; }
.ink-link { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* --- Home intent row: order / reserve / catering --- */
.intent-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 860px) { .intent-row { grid-template-columns: 1fr; } }
.intent {
  display: flex; flex-direction: column; gap: 9px;
  padding: 30px 30px 28px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  transition: transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.intent:hover { transform: translateY(-3px); border-color: var(--border-light); box-shadow: 0 16px 40px -28px rgba(22,24,28,.5); }
.intent h2, .intent h3 { font: 500 21px/1.25 var(--font-display); }
.intent p { font-size: 14.5px; line-height: 1.7; color: var(--fg-dim); flex: 1; }
.intent .intent-go {
  margin-top: 6px; font-size: 12px; font-weight: 600; letter-spacing: .13em;
  text-transform: uppercase; color: var(--accent);
}
.intent .intent-go::after { content: " →"; }
.intent-meta { font-size: 12.5px; color: var(--muted); }

/* --- Google review proof --- */
.proof { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 860px) { .proof { grid-template-columns: 1fr; } }
.proof blockquote {
  padding: 26px 28px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius);
  font-size: 15.5px; line-height: 1.75; color: var(--fg-dim);
}
.proof .stars { color: var(--accent); letter-spacing: .18em; font-size: 13px; display: block; margin-bottom: 12px; }
.proof cite { display: block; margin-top: 14px; font-style: normal; font-size: 13px; color: var(--muted); }
.proof-head { display: flex; align-items: baseline; justify-content: center; gap: 14px; flex-wrap: wrap; margin-bottom: 28px; }
.proof-score { font: 400 40px/1 var(--font-display); color: var(--accent); }

/* --- Catering page rhythm: the trays are the product, the hero shouldn't hoard the fold --- */
.cater-hero { padding: calc(var(--nav-h) + 40px) 0 4px; }
.cater-hero h1 { max-width: 16ch; margin-inline: auto; }
.cater-hero .body-lg { max-width: 62ch; margin-inline: auto; }
#trays { padding-top: 44px; }
#trays .section-header { margin-bottom: 36px; }

/* Price strip — the four numbers, visible before anyone scrolls */
.tray-strip {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px;
  max-width: 720px; margin: 26px auto 0;
}
@media (max-width: 760px) { .tray-strip { grid-template-columns: repeat(2, 1fr); } }
.tray-strip a {
  display: flex; align-items: baseline; justify-content: center; gap: 7px;
  padding: 11px 12px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface);
  font-size: 13px; color: var(--fg-dim);
  transition: border-color .3s var(--ease), color .3s var(--ease);
}
.tray-strip a:hover { border-color: var(--accent); color: var(--fg); }
.tray-strip strong { font: 400 17px/1 var(--font-display); color: var(--fg); font-variant-numeric: tabular-nums; }

/* Headings read better when the line breaks are chosen, not inherited */
h1, h2, h3, .heading-xl, .heading-lg { text-wrap: balance; }
/* Native select popups render with the OS palette — keep options legible off the ink band */
.cater-form .form-select option { color: var(--fg); background: #fff; }

/* --- Real photography (Google Business Profile) --- */
.photo-frame { margin: 0; border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.photo-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-frame figcaption {
  font-size: 13px; color: var(--muted); line-height: 1.6;
  padding: 12px 2px 0;
}
.photo-pair {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
  margin-bottom: 56px;
}
.photo-pair .photo-frame { aspect-ratio: 16 / 10; }
@media (max-width: 768px) {
  .photo-pair { grid-template-columns: 1fr; gap: 14px; margin-bottom: 40px; }
}

/* --- Seigaiha texture ---------------------------------------------------
   The wave-crest motif carried at the threshold of visibility: enough to keep
   large dark areas from reading as flat void, never enough to compete with the
   food. Sits on the page ground and on the ink band; opaque section fills
   (--bg-alt, cards) cover it, which gives the scroll some natural variation. */
body {
  background-image: url("../assets/seigaiha.svg");
  background-repeat: repeat;
  background-size: 200px 100px;
  background-attachment: fixed;   /* texture stays put, content moves over it */
}
.band-ink {
  background-image: url("../assets/seigaiha.svg");
  background-repeat: repeat;
  background-size: 200px 100px;
}
@media (prefers-reduced-motion: reduce) {
  body { background-attachment: scroll; }  /* fixed attachment can jitter on scroll */
}

/* Legal pages (privacy / accessibility) */
.legal-body { max-width: 680px; }
.legal-body p, .legal-body li { font-size: 16px; line-height: 1.75; color: var(--fg-dim); }
.legal-body a { color: var(--accent); text-underline-offset: 3px; text-decoration: underline; }
.legal-list { list-style: disc; padding-left: 22px; display: flex; flex-direction: column; gap: 10px; }

/* Native select popup: force dark scheme so options never render ivory-on-white (WCAG 1.4.3) */
.form-select, .cater-form select { color-scheme: dark; }
.form-select option, .cater-form select option { color: #f7f2e6; background: #1a1a1a; }