/* ============================================================
   Betoya Foods — corporate site styles
   Token-driven (tokens.css). Light-first; dark mode via [data-theme="dark"].
   Prefix: bf-
   ============================================================ */

* { box-sizing: border-box; margin: 0; padding: 0; }
*::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; -webkit-tap-highlight-color: transparent; }
body {
  font-family: var(--font-jp);
  background: var(--surface-page);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* design-spec.md §4 "Ngắt dòng" — sitewide, not per-page (Issue #27) */
  line-break: strict;
  overflow-wrap: anywhere;
  word-break: normal;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
/* UA stylesheets only apply `[hidden]{display:none}` at the lowest (UA) cascade
   layer — any author rule of equal-or-higher specificity beats it (e.g.
   `.bf-langdd__list{display:flex}`), so a `hidden` element can still render.
   Issue #18 ship-grade reject: this exact gap left the closed language-dropdown
   popover visibly rendered on every page. Mirrors mockup site-chrome-17 §0. */
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }

.bf-container { max-width: var(--container-xl); margin: 0 auto; padding: 0 24px; }

.bf-skip-link {
  position: absolute; left: -9999px; top: 0; z-index: var(--z-tooltip);
  background: var(--brand-green); color: #fff; padding: 10px 16px; border-radius: 0 0 var(--radius-md) 0;
}
.bf-skip-link:focus { left: 0; }

/* ── Main heading baseline (design-spec.md §4) — shared by every `<main>` heading;
   a page's own class (`.bf-title`, `.hm-h2`, `.ab-part h2`, …) always wins on
   specificity, so this only fills in pages/blocks that don't set their own. ── */
html[lang="ja"] main { font-size: var(--fs-body-jp); }
main h1, main h2, main h3 { margin: 0; font-family: var(--font-display); font-weight: var(--fw-bold); line-height: var(--lh-snug); letter-spacing: var(--ls-tight); text-wrap: balance; color: var(--text-primary); }
html[lang="ja"] main h1, html[lang="ja"] main h2, html[lang="ja"] main h3 { font-family: var(--font-jp); letter-spacing: 0; }
main p { margin: 0; }

/* ── Buttons ── */
.bf-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-vn); font-weight: var(--fw-semibold);
  border: none; border-radius: var(--radius-md); cursor: pointer;
  text-decoration: none; padding: 10px 20px; font-size: var(--fs-body-sm);
  transition: transform var(--duration-fast) var(--ease-default), box-shadow var(--duration-base) var(--ease-default), background var(--duration-base);
  white-space: nowrap;
}
.bf-btn:hover { transform: translateY(-1px); }
.bf-btn:active { transform: scale(.97); }
html[lang="ja"] .bf-btn { font-family: var(--font-jp); } /* site-chrome-17-mockup.html:51 override, missing since #18 (Issue #27) */
.bf-btn-primary { background: var(--brand-green); color: var(--text-inverse); box-shadow: var(--shadow-green); }
.bf-btn-primary:hover { background: var(--green-400); }
/* Contact form in-flight state (Issue #43): locked, no hover lift / press scale. */
.bf-btn:disabled { cursor: progress; opacity: .7; transform: none; }
.bf-btn-primary:disabled:hover { background: var(--brand-green); }
.bf-btn-gold { background: var(--brand-gold); color: var(--neutral-900); box-shadow: var(--shadow-gold); }
.bf-btn-gold:hover { background: var(--gold-400); }
/* Light-surface outline (home-20-spec.md §1 block 5, Issue #22) — the dark-hero variant
   used on .bf-home-hero/.bf-home-cta is the separate .bf-home-btn-outline-light below;
   this bare class was unused before #22 gave it its first caller (PhotoBand "物件募集"). */
.bf-btn-outline { background: transparent; color: var(--text-primary); box-shadow: inset 0 0 0 1px var(--border-strong); }
.bf-btn-lg { padding: 15px 32px; font-size: var(--fs-body); border-radius: var(--radius-lg); }
.bf-btn-sm { padding: 8px 16px; font-size: var(--fs-body-sm); }
.bf-btn-md { padding: var(--space-3) var(--space-5); font-size: var(--fs-body); }

/* ============================================================
   Site chrome — set 1 (Issue #18), approved artifact
   docs/design/site-chrome-17-spec.md. Header · Locations ▾ mega panel ·
   mobile drawer + country accordion · footer (below). Hover rules for
   this whole section are gathered in one block (§ Hover, below) —
   design-spec.md §6 requires every :hover gated behind
   `@media (hover:hover) and (pointer:fine)`.
   ============================================================ */

/* ── Header ── */
.bf-header {
  position: sticky; top: 0; z-index: var(--z-sticky);
  background: color-mix(in srgb, var(--surface-card) 88%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-subtle);
}
.bf-header__inner { display: flex; align-items: center; gap: var(--space-4); height: 66px; }

/* BETOYA lockup = emblem + typeset wordmark (no "FOODS" at the network tier — ruling
   #13-1). A real BETOYA wordmark SVG is a brand asset for Boss/design-system, not this set. */
.bf-lockup { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text-primary); margin-right: var(--space-4); }
.bf-lockup img { height: 34px; width: 34px; display: block; }
.bf-lockup b { font-family: var(--font-vn); font-weight: var(--fw-extrabold); font-size: 19px; letter-spacing: .1em; line-height: 1; }
.bf-lockup--sm img { height: 28px; width: 28px; }
.bf-lockup--sm b { font-size: 16px; }
.bf-footer .bf-lockup { color: var(--ft-fg); }

.bf-nav { display: flex; align-items: center; gap: 2px; flex: 1; }
.bf-nav__link, .bf-nav__trigger {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: var(--space-2) var(--space-3); border: 0; background: none; cursor: pointer;
  font-size: var(--fs-body-sm); font-weight: var(--fw-medium); color: var(--text-secondary);
  text-decoration: none; border-radius: var(--radius-sm); white-space: nowrap;
  transition: background var(--motion-dur-feedback) var(--motion-ease-out), color var(--motion-dur-feedback) var(--motion-ease-out);
}
.bf-nav__link[aria-current="page"], .bf-nav__trigger[aria-expanded="true"] { background: var(--surface-brand-subtle); color: var(--text-brand); }
.bf-nav__trigger svg { width: 14px; height: 14px; transition: transform var(--motion-dur-ui) var(--motion-ease-out); }
.bf-nav__trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
.bf-header__actions { display: flex; align-items: center; gap: var(--space-3); }

/* Language dropdown — EVERY width (Boss round 1; pattern futurelastic/homepage #106).
   Trigger shows the current locale; popover holds the other two. Open/closed is JS
   state, never :hover/:focus-within — touch has no hover. */
.bf-langdd { position: relative; }
.bf-langdd__btn {
  display: inline-flex; align-items: center; gap: var(--space-1); height: 38px; padding: 0 var(--space-2) 0 var(--space-3);
  border: 1px solid var(--border-default); border-radius: var(--radius-sm); background: transparent; cursor: pointer;
  font-family: var(--font-vn); font-size: var(--fs-body-sm); font-weight: var(--fw-medium); color: var(--text-secondary); white-space: nowrap;
  transition: background var(--motion-dur-feedback) var(--motion-ease-out);
}
.bf-langdd__btn svg { width: 14px; height: 14px; transition: transform var(--motion-dur-ui) var(--motion-ease-out); }
.bf-langdd__btn[aria-expanded="true"] { background: var(--surface-brand-subtle); color: var(--text-brand); }
.bf-langdd__btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.bf-langdd__list {
  position: absolute; right: 0; top: calc(100% + var(--space-1)); z-index: var(--z-dropdown); min-width: 100%;
  display: flex; flex-direction: column; padding: var(--space-1); margin: 0; list-style: none;
  background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-md); box-shadow: var(--shadow-md);
}
.bf-langdd__list a {
  display: flex; align-items: center; min-height: 40px; padding: 0 var(--space-3); border-radius: var(--radius-sm);
  font-family: var(--font-vn); font-size: var(--fs-body-sm); font-weight: var(--fw-medium); color: var(--text-primary); text-decoration: none; white-space: nowrap;
}
.bf-langdd__list a[aria-current="true"] { display: none; } /* current locale already sits on the trigger */

/* Segmented language switcher (footer + mobile drawer full-width variant) */
.bf-lang { display: flex; border: 1px solid var(--border-default); border-radius: var(--radius-sm); overflow: hidden; background: var(--surface-card); }
.bf-lang a {
  padding: 7px 9px; font-family: var(--font-vn); font-size: var(--fs-label); font-weight: var(--fw-bold);
  letter-spacing: .03em; line-height: 1; color: var(--text-secondary); text-decoration: none;
  transition: background var(--motion-dur-feedback) var(--motion-ease-out), color var(--motion-dur-feedback) var(--motion-ease-out);
}
.bf-lang a + a { border-left: 1px solid var(--border-default); }
.bf-lang a[aria-current="true"] { background: var(--brand-green); color: var(--text-inverse); border-color: var(--brand-green); }
.bf-lang--full a { padding: var(--space-2) var(--space-3); font-size: var(--fs-body-sm); font-weight: var(--fw-semibold); letter-spacing: 0; text-align: center; white-space: nowrap; }
.bf-mpanel .bf-lang--full a { flex: 1; }

/* Theme toggle — SVG glyph (emoji ignores `color`) */
.bf-theme-toggle {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  width: 38px; height: 38px; border-radius: var(--radius-sm); background: transparent;
  border: 1px solid var(--border-default); cursor: pointer; color: var(--text-secondary);
  transition: background var(--motion-dur-feedback) var(--motion-ease-out);
}
.bf-theme-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
/* Header button shows the CHOSEN mode (data-theme-mode), not the theme currently displayed.
   Default (no attr / 'system') = monitor. */
.bf-theme-toggle .ico-sun, .bf-theme-toggle .ico-moon { display: none; }
[data-theme-mode="light"] .bf-theme-toggle .ico-system, [data-theme-mode="dark"] .bf-theme-toggle .ico-system { display: none; }
[data-theme-mode="light"] .bf-theme-toggle .ico-sun, [data-theme-mode="dark"] .bf-theme-toggle .ico-moon { display: block; }
/* Drawer: labelled 3-cell radiogroup (System · Light · Dark) */
.bf-theme-seg { display: flex; border: 1px solid var(--border-default); border-radius: var(--radius-sm); overflow: hidden; }
.bf-theme-seg__opt {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 44px; padding: var(--space-2) var(--space-2); background: transparent; border: 0; cursor: pointer;
  font-family: var(--font-vn); font-size: var(--fs-body-sm); font-weight: var(--fw-semibold); color: var(--text-secondary); white-space: nowrap;
  transition: background var(--motion-dur-feedback) var(--motion-ease-out), color var(--motion-dur-feedback) var(--motion-ease-out);
}
.bf-theme-seg__opt + .bf-theme-seg__opt { border-left: 1px solid var(--border-default); }
.bf-theme-seg__opt svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.bf-theme-seg__opt[aria-checked="true"] { background: var(--brand-green); color: var(--text-inverse); }
.bf-theme-seg__opt:focus-visible { outline-offset: -3px; } /* container clips overflow */

/* Hamburger */
.bf-hamburger { display: none; flex-direction: column; gap: 5px; width: 40px; height: 40px; align-items: center; justify-content: center; background: none; border: 0; cursor: pointer; margin-left: auto; }
.bf-hamburger span { display: block; width: 22px; height: 2px; background: var(--text-primary); border-radius: 2px; transition: transform var(--motion-dur-ui) var(--motion-ease-out), opacity var(--motion-dur-ui) var(--motion-ease-out); }
.bf-hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.bf-hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.bf-hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================================================
   Locations ▾ — the country ledger (mega panel)
   ============================================================ */
.bf-mega {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--surface-card); border-top: 1px solid var(--border-default); border-bottom: 1px solid var(--border-default);
  box-shadow: var(--shadow-lg); z-index: var(--z-dropdown);
}
.bf-mega__inner { padding-top: var(--space-8); padding-bottom: var(--space-6); }
.bf-countries { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0; }
.bf-country { padding: 0 var(--space-8); border-left: 1px solid var(--border-subtle); }
.bf-country:first-child { padding-left: 0; border-left: 0; }
.bf-country__head { display: flex; align-items: baseline; gap: var(--space-2); margin-bottom: var(--space-3); padding-bottom: var(--space-3); border-bottom: 1px solid var(--border-subtle); }
.bf-country__name { font-size: var(--fs-title); font-weight: var(--fw-bold); color: var(--text-primary); }
.bf-country__latin { font-family: var(--font-vn); font-size: var(--fs-label); font-weight: var(--fw-semibold); letter-spacing: var(--ls-overline); text-transform: uppercase; color: var(--text-secondary); }
html[lang="en"] .bf-country__latin { display: none; } /* EN: whisper would duplicate the name */
.bf-country__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.bf-country__list a {
  display: block; padding: var(--space-2) 0; font-size: var(--fs-body-sm); color: var(--text-secondary); text-decoration: none; border-radius: var(--radius-xs);
  transition: color var(--motion-dur-feedback) var(--motion-ease-out);
}
.bf-country__list a.bf-lead { font-weight: var(--fw-semibold); color: var(--text-primary); font-size: var(--fs-body); }
.bf-country__note { margin: var(--space-1) 0 0; font-size: var(--fs-caption); line-height: var(--lh-relaxed); color: var(--text-secondary); max-width: 28em; }
.bf-country__soon { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) 0; font-size: var(--fs-body-sm); color: var(--text-secondary); }
.bf-country__soon::before { content: ""; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--border-strong); }
.bf-mega__foot { display: flex; justify-content: flex-end; margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--border-subtle); }
.bf-mega__foot a { font-size: var(--fs-body-sm); font-weight: var(--fw-semibold); color: var(--text-brand); text-decoration: none; }
.bf-mega__foot a::after { content: "\2192"; display: inline-block; margin-left: .35em; }
.bf-ext::after { content: "\2197"; font-family: var(--font-vn); font-size: .85em; margin-left: .3em; opacity: .7; }
.bf-lead::after { content: "\2192"; font-family: var(--font-vn); margin-left: .35em; transition: transform var(--motion-dur-feedback) var(--motion-ease-out); }

/* ============================================================
   Mobile drawer (modal) + country accordion
   ============================================================ */
.bf-drawer {
  position: fixed; inset: 0; z-index: var(--z-modal); visibility: hidden; opacity: 0;
  transition: opacity var(--motion-dur-ui) var(--motion-ease-out), visibility 0s linear var(--motion-dur-ui);
}
.bf-drawer.is-open { visibility: visible; opacity: 1; transition-delay: 0s; }
.bf-drawer__overlay { position: absolute; inset: 0; background: var(--surface-overlay); border: 0; padding: 0; cursor: default; }
.bf-mpanel {
  position: absolute; top: 0; right: 0; height: 100dvh; width: min(88%, 360px); background: var(--surface-card); box-shadow: var(--shadow-xl);
  display: flex; flex-direction: column; padding: var(--space-5); padding-bottom: calc(var(--space-5) + env(safe-area-inset-bottom));
  overflow-y: auto; transform: translateX(100%); transition: transform var(--motion-dur-panel) var(--motion-ease-drawer);
}
.bf-drawer.is-open .bf-mpanel { transform: translateX(0); }
.bf-mpanel__head { display: flex; align-items: center; justify-content: space-between; padding-bottom: var(--space-4); border-bottom: 1px solid var(--border-subtle); }
.bf-mpanel__head img { height: 26px; width: auto; }
.bf-mpanel__close { width: 40px; height: 40px; background: none; border: 0; cursor: pointer; color: var(--text-secondary); border-radius: var(--radius-sm); display: inline-flex; align-items: center; justify-content: center; }
.bf-mpanel__close svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; }
.bf-mnav { list-style: none; margin: 0; padding: var(--space-3) 0; display: flex; flex-direction: column; gap: 2px; flex: 1; }
.bf-mnav__link { display: block; padding: var(--space-3) var(--space-2); font-size: var(--fs-body); font-weight: var(--fw-medium); color: var(--text-primary); text-decoration: none; border-radius: var(--radius-sm); }
.bf-mnav__link[aria-current="page"] { color: var(--text-brand); background: var(--surface-brand-subtle); }
.bf-mnav__group { margin-top: var(--space-2); padding-top: var(--space-2); border-top: 1px solid var(--border-subtle); }
.bf-mnav__label { display: block; padding: var(--space-2) var(--space-2) var(--space-1); font-family: var(--font-vn); font-size: var(--fs-label); font-weight: var(--fw-bold); letter-spacing: var(--ls-overline); text-transform: uppercase; color: var(--text-secondary); }
.bf-macc { border-bottom: 1px solid var(--border-subtle); }
.bf-macc__btn {
  display: flex; align-items: center; width: 100%; gap: var(--space-2); padding: var(--space-3) var(--space-2); background: none; border: 0; cursor: pointer; text-align: left;
  font-size: var(--fs-body); font-weight: var(--fw-medium); color: var(--text-primary); border-radius: var(--radius-sm);
}
.bf-macc__btn .bf-country__latin { margin-left: 0; }
.bf-macc__btn svg { width: 16px; height: 16px; margin-left: auto; flex: none; color: var(--text-tertiary); transition: transform var(--motion-dur-ui) var(--motion-ease-out); }
.bf-macc__btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.bf-macc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--motion-dur-ui) var(--motion-ease-in-out); }
.bf-macc__panel > div { overflow: hidden; }
.bf-macc__btn[aria-expanded="true"] + .bf-macc__panel { grid-template-rows: 1fr; }
.bf-macc__panel .bf-country__list { padding: 0 var(--space-2) var(--space-3) var(--space-5); }
.bf-macc__panel .bf-country__list a { padding: var(--space-2) 0; font-size: var(--fs-body-sm); }
.bf-macc__panel .bf-country__note { padding: 0 var(--space-2) var(--space-3) var(--space-5); }
.bf-macc--static { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--space-2); row-gap: 0; padding: var(--space-3) var(--space-2); font-size: var(--fs-body); font-weight: var(--fw-medium); color: var(--text-primary); }
.bf-macc--static .bf-country__soon { flex-basis: 100%; padding: var(--space-1) 0 0 var(--space-3); font-weight: var(--fw-regular); }
.bf-country__name, .bf-country__latin, .bf-macc__btn > span:first-child, .bf-macc--static > span:first-child { white-space: nowrap; }
.bf-mnav__all { display: block; padding: var(--space-3) var(--space-2); font-size: var(--fs-body-sm); font-weight: var(--fw-semibold); color: var(--text-brand); text-decoration: none; }
.bf-mnav__cta { display: flex; margin: var(--space-3) var(--space-2) 0; justify-content: center; padding: var(--space-3) var(--space-4); font-size: var(--fs-body); }
.bf-mpanel__foot { display: flex; flex-direction: column; gap: var(--space-3); padding-top: var(--space-4); border-top: 1px solid var(--border-subtle); }

/* ============================================================
   Chrome hover (pointer-gated) + motion opt-in / reduced-motion —
   design-spec.md §6: every :hover here is gated, every entrance
   @keyframes lives inside `no-preference`, with an explicit `reduce`
   override (checklist §6 of site-chrome-17-spec.md).
   ============================================================ */
@media (hover: hover) and (pointer: fine) {
  .bf-nav__link:hover, .bf-nav__trigger:hover { background: var(--surface-brand-subtle); color: var(--text-brand); }
  .bf-lang a:hover:not([aria-current="true"]) { background: var(--surface-brand-subtle); color: var(--text-brand); }
  .bf-langdd__btn:hover { background: var(--surface-brand-subtle); color: var(--text-brand); }
  .bf-langdd__list a:hover { background: var(--surface-brand-subtle); color: var(--text-brand); }
  .bf-theme-seg__opt[aria-checked="false"]:hover { background: var(--surface-brand-subtle); color: var(--text-brand); }
  .bf-theme-toggle:hover, .bf-mpanel__close:hover, .bf-macc__btn:hover { background: var(--surface-brand-subtle); }
  .bf-country__list a:hover { color: var(--text-brand); }
  .bf-country__list a.bf-lead:hover::after, .bf-mega__foot a:hover::after { transform: translateX(3px); }
  .bf-footer a:hover { color: var(--ft-accent); }
  .bf-mnav__link:hover { background: var(--surface-brand-subtle); }
}
@media (prefers-reduced-motion: no-preference) {
  .bf-mega { animation: bfMegaIn var(--motion-dur-ui) var(--motion-ease-out) both; }
  .bf-langdd__list { animation: bfMegaIn var(--motion-dur-ui) var(--motion-ease-out) both; }
  @keyframes bfMegaIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) {
  .bf-mega, .bf-langdd__list, .bf-macc__panel, .bf-mpanel, .bf-drawer,
  .bf-hamburger span, .bf-nav__trigger svg, .bf-langdd__btn svg, .bf-macc__btn svg, .bf-theme-toggle svg {
    animation-duration: .01ms !important; transition-duration: .01ms !important;
  }
}

/* ── Section scaffolding ── */
.bf-section { padding: 88px 0; }
.bf-section--tight { padding: 64px 0; }
.bf-label { font-family: var(--font-vn); font-size: var(--fs-overline); font-weight: var(--fw-bold); letter-spacing: var(--ls-overline); text-transform: uppercase; color: var(--text-gold); margin-bottom: 10px; }
.bf-title { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: var(--fw-bold); line-height: var(--lh-snug); color: var(--text-primary); }
.bf-sub { font-size: var(--fs-body-lg); color: var(--text-secondary); line-height: var(--lh-relaxed); margin-top: 14px; }
.bf-section__head { max-width: 720px; }
.bf-section--center .bf-label, .bf-section--center .bf-section__head { text-align: center; margin-left: auto; margin-right: auto; }

/* ── Company + profile table ── */
.bf-company__grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 56px; align-items: start; }
.bf-company__lead { font-size: var(--fs-body-lg); color: var(--text-secondary); line-height: var(--lh-relaxed); margin-top: 16px; }
.bf-company__more { display: inline-flex; align-items: center; gap: 6px; margin-top: 24px; font-family: var(--font-vn); font-weight: var(--fw-semibold); color: var(--text-brand); text-decoration: none; font-size: var(--fs-body-sm); }
.bf-company__more:hover { gap: 10px; }
.bf-profile { width: 100%; border-collapse: collapse; background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-lg); overflow: hidden; }
.bf-profile th, .bf-profile td { text-align: left; padding: 14px 18px; font-size: var(--fs-body-sm); line-height: var(--lh-snug); vertical-align: top; border-bottom: 1px solid var(--border-subtle); }
.bf-profile tr:last-child th, .bf-profile tr:last-child td { border-bottom: none; }
.bf-profile th { width: 34%; font-family: var(--font-jp); font-weight: var(--fw-semibold); color: var(--text-tertiary); background: var(--surface-sunken); white-space: nowrap; }
.bf-profile td { color: var(--text-primary); }

/* ── Philosophy (dark) ── */
.bf-philosophy { background: var(--green-950); color: #fff; }
.bf-philosophy .bf-title { color: #fff; }
.bf-philosophy .bf-label { color: var(--gold-400); }
.bf-phil-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 48px; }
.bf-phil-card { border-left: 3px solid var(--gold-500); padding-left: 22px; }
.bf-phil-card__kicker { font-family: var(--font-vn); font-size: var(--fs-overline); font-weight: var(--fw-bold); letter-spacing: 0.12em; color: var(--gold-400); margin-bottom: 12px; }
.bf-phil-card__title { font-size: var(--fs-h4); font-weight: var(--fw-bold); color: #fff; margin-bottom: 10px; line-height: var(--lh-snug); }
.bf-phil-card__body { font-size: var(--fs-body-sm); color: rgba(255,255,255,0.66); line-height: var(--lh-loose); }

/* ── Brands (plain surface, reused by Franchise/RealEstate/Philosophy/Company
   pageheads — .bf-brand-grid/.bf-brand item styles lived here too until the
   Issue #2 homepage redesign removed their only caller; that dead CSS is
   removed below) ── */
.bf-brands { background: var(--surface-card); }

/* ── Business / DX pillars ── */
.bf-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 48px; }
.bf-pillar { background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-xl); padding: 28px; transition: box-shadow var(--duration-base); }
.bf-pillar:hover { box-shadow: var(--shadow-md); }
.bf-pillar__kicker { font-family: var(--font-vn); font-size: var(--fs-label); font-weight: var(--fw-bold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-gold); margin-bottom: 14px; }
.bf-pillar__title { font-size: var(--fs-h4); font-weight: var(--fw-bold); color: var(--text-primary); margin-bottom: 10px; line-height: var(--lh-snug); }
.bf-pillar__body { font-size: var(--fs-body-sm); color: var(--text-secondary); line-height: var(--lh-relaxed); }

/* ── Recruit band ── */
.bf-recruit { background: var(--surface-sunken); }
.bf-recruit__inner { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: center; }
.bf-recruit__body { font-size: var(--fs-body-lg); color: var(--text-secondary); line-height: var(--lh-relaxed); margin-top: 14px; }
.bf-recruit__highlight { display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; padding: 14px 18px; background: var(--surface-brand-subtle); border: 1px solid var(--border-brand); border-radius: var(--radius-md); font-size: var(--fs-body-sm); font-weight: var(--fw-medium); color: var(--text-brand); }
.bf-recruit__highlight::before { content: '★'; color: var(--brand-gold); }
.bf-recruit__cta { text-align: right; }
@media (max-width: 820px) { .bf-recruit__cta { text-align: left; } }

/* ── Franchise CTA (dark) ── */
.bf-franchise { background: linear-gradient(135deg, var(--green-600) 0%, var(--green-800) 100%); color: #fff; text-align: center; }
.bf-franchise .bf-title { color: #fff; }
.bf-franchise .bf-label { color: var(--gold-400); }
.bf-franchise__sub { font-size: var(--fs-body-lg); color: rgba(255,255,255,0.74); line-height: var(--lh-relaxed); margin: 14px auto 0; max-width: 680px; }
.bf-stats { display: flex; justify-content: center; gap: clamp(28px, 6vw, 72px); margin: 48px 0; flex-wrap: wrap; }
.bf-stat__num { font-family: var(--font-vn); font-size: 52px; font-weight: var(--fw-extrabold); color: var(--brand-gold); line-height: 1; }
.bf-stat__num span { font-size: 24px; }
.bf-stat__label { font-size: var(--fs-body-sm); color: rgba(255,255,255,0.62); margin-top: 8px; }
.bf-franchise__ctas { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ── News ── */
.bf-news { background: var(--surface-card); }
.bf-news__list { max-width: 760px; margin: 40px auto 0; display: flex; flex-direction: column; }
.bf-news__item { display: flex; gap: 22px; padding: 18px 4px; border-bottom: 1px solid var(--border-subtle); text-decoration: none; transition: background var(--duration-fast); align-items: flex-start; }
.bf-news__item:hover { background: var(--surface-brand-subtle); }
.bf-news__date { font-family: var(--font-vn); font-size: var(--fs-caption); color: var(--text-tertiary); white-space: nowrap; padding-top: 3px; min-width: 92px; }
.bf-news__tag { display: inline-block; font-family: var(--font-vn); font-size: 10px; font-weight: var(--fw-bold); letter-spacing: 0.05em; text-transform: uppercase; padding: 2px 8px; border-radius: var(--radius-xs); margin-bottom: 6px; background: var(--surface-brand-subtle); color: var(--text-brand); }
.bf-news__title { font-size: var(--fs-body-sm); line-height: var(--lh-relaxed); color: var(--text-primary); }
.bf-news__empty { text-align: center; color: var(--text-tertiary); margin-top: 32px; }
.bf-news__more { display: block; text-align: center; margin-top: 30px; font-family: var(--font-vn); font-weight: var(--fw-semibold); font-size: var(--fs-body-sm); color: var(--text-brand); text-decoration: none; }

/* ============================================================
   Footer — pinned dark field (both themes), same country ledger
   as Header's Locations ▾ panel / mobile accordion. Colours are local
   `--ft-*` tokens computed from the ramp (design-spec.md: no rgba trần).
   ============================================================ */
.bf-footer {
  --ft-bg: var(--green-950); --ft-fg: var(--neutral-100); --ft-muted: var(--neutral-300); --ft-faint: var(--neutral-400);
  --ft-rule: var(--green-800); --ft-accent: var(--gold-300); --ft-title: var(--green-300);
  background: var(--ft-bg); color: var(--ft-fg); padding: var(--space-16) 0 var(--space-8); border-top: 1px solid var(--ft-rule);
}
.bf-footer a { color: var(--ft-muted); text-decoration: none; transition: color var(--motion-dur-feedback) var(--motion-ease-out); }
.bf-footer__top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: var(--space-10); margin-bottom: var(--space-12); }
.bf-footer__network { margin: var(--space-4) 0 0; font-family: var(--font-vn); font-size: var(--fs-caption); letter-spacing: var(--ls-wide); color: var(--ft-faint); }
.bf-footer__network span + span::before { content: "\00b7"; margin: 0 .5em; }
.bf-footer__brandlinks { list-style: none; margin: var(--space-6) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }
.bf-footer__brandlinks a { font-size: var(--fs-body-sm); color: var(--ft-fg); }
.bf-footer__col-title { display: flex; align-items: baseline; gap: var(--space-2); margin-bottom: var(--space-4); padding-bottom: var(--space-3); border-bottom: 1px solid var(--ft-rule); }
.bf-footer__col-title b { font-size: var(--fs-body); font-weight: var(--fw-bold); color: var(--ft-fg); }
.bf-footer__col-title .bf-country__latin { color: var(--ft-title); }
.bf-footer__links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.bf-footer__links a { font-size: var(--fs-body-sm); }
.bf-footer__links a.bf-lead { color: var(--ft-fg); font-weight: var(--fw-semibold); }
.bf-footer__addr { font-style: normal; font-size: var(--fs-caption); line-height: var(--lh-relaxed); color: var(--ft-faint); margin: 0 0 var(--space-3); }
.bf-footer__note { font-size: var(--fs-caption); line-height: var(--lh-relaxed); color: var(--ft-faint); margin: 0; }
.bf-footer .bf-country__soon { color: var(--ft-faint); }
.bf-footer .bf-country__soon::before { border-color: var(--ft-faint); }
.bf-footer__bottom { border-top: 1px solid var(--ft-rule); padding-top: var(--space-5); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-6); }
.bf-footer__legal { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin: 0; padding: 0; list-style: none; }
.bf-footer__legal a { font-size: var(--fs-caption); }
.bf-footer__copy { width: 100%; margin: var(--space-2) 0 0; font-family: var(--font-vn); font-size: var(--fs-caption); color: var(--ft-faint); }
.bf-footer .bf-lang { background: transparent; border-color: var(--ft-rule); }
.bf-footer .bf-lang a { color: var(--ft-faint); border-color: var(--ft-rule); }
.bf-footer .bf-lang a[aria-current="true"] { background: var(--ft-fg); color: var(--green-950); border-color: var(--ft-fg); }

/* ── Chrome responsive — nav collapses at 1024 (VI labels are the widest) ── */
@media (max-width: 1023.98px) {
  .bf-nav, .bf-header__actions { display: none; }
  .bf-hamburger { display: flex; }
  .bf-footer__top { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
  .bf-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 639.98px) {
  .bf-header__inner { height: 60px; }
  .bf-lockup img { height: 30px; width: 30px; }
  .bf-footer { padding-top: var(--space-12); }
  .bf-footer__top { grid-template-columns: 1fr; gap: var(--space-8); }
  .bf-footer__bottom { flex-direction: column; align-items: flex-start; }
}

/* ── Responsive (non-chrome sections) ── */
@media (max-width: 960px) {
  .bf-company__grid { grid-template-columns: 1fr; gap: 36px; }
  .bf-recruit__inner { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 720px) {
  .bf-section { padding: 64px 0; }
  .bf-phil-grid, .bf-pillars { grid-template-columns: 1fr; }
}

/* ============================================================
   INNER PAGES (rebuild 2026-07) — pagehead, prose, model,
   values, execs, real-estate, contact form, news article
   ============================================================ */

/* Page header (sub-hero) */
.bf-pagehead {
  background: linear-gradient(135deg, var(--green-950) 0%, var(--green-800) 100%);
  color: #fff; padding: 64px 0 56px;
}
.bf-pagehead__title { font-family: var(--font-display); font-size: var(--fs-h1); font-weight: var(--fw-bold); color: #fff; line-height: var(--lh-snug); }
.bf-pagehead .bf-label { color: var(--gold-400); }

/* Prose blocks */
.bf-prose { max-width: 760px; }
.bf-message { font-size: var(--fs-body-lg); line-height: var(--lh-loose); color: var(--text-secondary); }
.bf-mission { font-family: var(--font-display); font-size: var(--fs-h4); font-weight: var(--fw-medium); line-height: var(--lh-relaxed); color: #fff; margin: 8px auto 0; }
.bf-philosophy .bf-mission { color: rgba(255,255,255,0.92); }
.bf-vision { font-size: var(--fs-body-lg); line-height: var(--lh-loose); color: var(--text-secondary); margin-top: 6px; }

/* Wide profile table (label column wider) */
.bf-profile--wide th { width: 26%; }

/* Executives */
.bf-execs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; max-width: 720px; }
.bf-exec { background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: 22px 24px; }
.bf-exec__role { font-family: var(--font-vn); font-size: var(--fs-caption); font-weight: var(--fw-semibold); color: var(--text-gold); letter-spacing: 0.04em; margin-bottom: 8px; }
.bf-exec__name { font-size: var(--fs-h4); font-weight: var(--fw-bold); color: var(--text-primary); }

/* Value creation model (5 stakeholders) */
.bf-model { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--border-default); }
.bf-model__row { display: grid; grid-template-columns: 260px 1fr; gap: 24px; padding: 22px 0; border-bottom: 1px solid var(--border-subtle); align-items: start; }
.bf-model__who { display: flex; align-items: baseline; gap: 12px; font-size: var(--fs-title); font-weight: var(--fw-bold); color: var(--text-primary); }
.bf-model__num { font-family: var(--font-vn); font-size: var(--fs-body-sm); font-weight: var(--fw-extrabold); color: var(--brand-gold); }
.bf-model__body { font-size: var(--fs-body); color: var(--text-secondary); line-height: var(--lh-relaxed); }

/* Core values chips */
.bf-values { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.bf-value { display: inline-flex; align-items: center; padding: 12px 22px; border-radius: var(--radius-pill); background: var(--surface-brand-subtle); border: 1px solid var(--border-brand); font-family: var(--font-vn); font-weight: var(--fw-semibold); font-size: var(--fs-body); color: var(--text-brand); }

/* Real estate */
.bf-re-brand { font-size: var(--fs-h3); font-weight: var(--fw-bold); color: var(--text-primary); margin-bottom: 24px; }
.bf-re-brand span { font-family: var(--font-jp); font-size: var(--fs-body); color: var(--text-tertiary); font-weight: var(--fw-regular); margin-left: 8px; }
.bf-re-formats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.bf-re-format__name { margin-top: 4px; }
.bf-re-format__name { font-family: var(--font-vn); font-size: var(--fs-body-sm); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-gold); margin-bottom: 12px; }

/* Contact form */
.bf-form-wrap { max-width: 640px; }
.bf-form { display: flex; flex-direction: column; gap: 20px; }
.bf-field { display: flex; flex-direction: column; gap: 8px; }
.bf-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.bf-field label { font-size: var(--fs-body-sm); font-weight: var(--fw-semibold); color: var(--text-primary); }
.bf-req { display: inline-block; font-family: var(--font-vn); font-size: 10px; font-weight: var(--fw-bold); color: var(--error); background: var(--error-bg); border: 1px solid var(--error-border); padding: 1px 7px; border-radius: var(--radius-xs); margin-left: 6px; vertical-align: middle; }
.bf-field input, .bf-field select, .bf-field textarea {
  width: 100%; padding: 12px 14px; font-family: var(--font-vn); font-size: var(--fs-body);
  color: var(--text-primary); background: var(--surface-card);
  border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}
.bf-field input:focus, .bf-field select:focus, .bf-field textarea:focus { outline: none; border-color: var(--border-focus); box-shadow: var(--shadow-focus); }
.bf-field textarea { resize: vertical; }
.bf-form-note { font-size: var(--fs-body-sm); color: var(--text-tertiary); background: var(--surface-sunken); padding: 12px 16px; border-radius: var(--radius-md); }

/* News list full + article */
.bf-news__list--full { max-width: 820px; margin-inline: auto; }
.bf-article { }
.bf-article__meta { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.bf-article__title { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: var(--fw-bold); line-height: var(--lh-snug); color: var(--text-primary); max-width: 820px; }
.bf-article__body { max-width: 760px; margin-top: 24px; font-size: var(--fs-body-lg); line-height: var(--lh-loose); color: var(--text-secondary); }
.bf-article__body p { margin-bottom: 1em; }

/* Responsive for inner pages */
@media (max-width: 820px) {
  .bf-model__row { grid-template-columns: 1fr; gap: 10px; }
  .bf-re-formats { grid-template-columns: 1fr; }
  .bf-execs { grid-template-columns: 1fr; }
  .bf-field-row { grid-template-columns: 1fr; }
}

/* Contact form — error banner + consent */
.bf-form-error { background: var(--error-bg); border: 1px solid var(--error-border); color: var(--text-error); padding: 14px 18px; border-radius: var(--radius-md); font-size: var(--fs-body-sm); margin-bottom: 20px; }
.bf-consent { display: flex; align-items: flex-start; gap: 10px; font-size: var(--fs-body-sm); color: var(--text-secondary); line-height: var(--lh-normal); cursor: pointer; }
.bf-consent input { width: 18px; height: 18px; margin-top: 2px; flex-shrink: 0; accent-color: var(--brand-green); }
.bf-consent a { color: var(--text-link); text-decoration: underline; }

/* ============================================================
   IMAGERY (2026-07) — brand photo, pagehead bg
   (the old autoplay hero slideshow + its dots — .bf-slideshow*/.bf-dot*/
   .bf-slide — were removed with the Issue #2 homepage redesign: no
   caller left, and it had 2 a11y violations flagged by that issue —
   auto-advance with no visible pause control, focusable dots inside an
   aria-hidden container.)
   ============================================================ */

/* Pagehead with background photo + dark overlay (text stays readable) */
.bf-pagehead--photo { position: relative; background-size: cover; background-position: center; padding: 96px 0 80px; }
.bf-pagehead--photo::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(3,15,9,0.90) 0%, rgba(12,50,32,0.76) 100%); }
.bf-pagehead--photo > .bf-container { position: relative; z-index: 1; }

/* Real-estate store photo */
.bf-re-photo { margin-bottom: 16px; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 16/9; box-shadow: var(--shadow-md); }
.bf-re-photo img { width: 100%; height: 100%; object-fit: cover; }

/* ============================================================
   HOMEPAGE REDESIGN (Issue #2, 2026-08-22) — bf-home-* namespace,
   deliberately separate from .bf-hero/.bf-brand-grid/.bf-franchise/
   .bf-news__list which other pages (Franchise/RealEstate/NewsList)
   still depend on for their own look — those are untouched.
   Source: ~/Design/betoya-group/betoyahq-com/2-homepage-redesign/
   (mockup + role→token spec + art direction). Motion tokens + grid
   margin live in tokens.css (§0 of the spec).
   ============================================================ */

.bf-home-overline {
  font-family: var(--font-vn); font-size: var(--fs-caption); font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-overline); text-transform: uppercase; color: var(--text-secondary);
  display: flex; align-items: center;
}
.bf-home-tick { display: inline-block; width: 22px; height: 3px; background: var(--brand-red-orange);
  margin-right: 10px; border-radius: 2px; flex-shrink: 0; }
.bf-home-more {
  display: inline-block; margin-top: var(--space-8); font-weight: var(--fw-bold);
  color: var(--text-link); text-decoration: none; border-bottom: 2px solid var(--brand-gold);
  padding-bottom: 2px;
}
.bf-home-more--center { display: block; text-align: center; }

/* ── outline-light button (used on the two dark fields: hero + CTA band) ── */
.bf-home-btn-outline-light { background: transparent; border: 1.5px solid rgba(255,255,255,.6); color: var(--neutral-25); }
@media (hover: hover) and (pointer: fine) {
  .bf-home-btn-outline-light:hover { border-color: var(--brand-gold); color: var(--brand-gold); background: transparent; }
}

/* ==========================================================
   1 · HERO — forest field green-800 (pin, both themes) + 3 photo
   cards zigzag; only the bottom (store) card breaks the field→cream
   boundary. One-shadow doctrine: hero cards carry NO shadow — depth
   comes from image⟷field contrast, a 1px light border, the break,
   and overlap at ≤900px. Suất --shadow-lg stays with diptych/news.
   ========================================================== */
.bf-home-hero {
  display: grid; grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 5vw, 4.5rem); min-height: 88svh;
  background: var(--green-800); color: var(--neutral-25);
  padding: clamp(2.5rem, 6vw, 4rem) var(--grid-margin) 0;
}
.bf-home-hero .bf-home-overline { color: var(--gold-300); }
.bf-home-hero__pane { display: flex; flex-direction: column; justify-content: center;
  padding-block: clamp(2rem, 5vw, 4rem) clamp(3rem, 8vw, 6rem); }
.bf-home-hero__title {
  font-family: var(--font-jp); font-weight: var(--fw-bold);
  font-size: clamp(2.3rem, 1rem + 4.4vw, 4.75rem);
  line-height: 1.16; letter-spacing: 0; margin-top: var(--space-5);
  color: var(--neutral-25); text-wrap: balance;
}
.bf-home-hero__title .hi { color: var(--gold-300); } /* 8.74:1 on green-800 */
.bf-home-hero__ctas { display: flex; gap: var(--space-4); margin-top: var(--space-10); flex-wrap: wrap; }

.bf-home-hero__cards { position: relative; align-self: end; z-index: 1;
  height: clamp(340px, 44vw, 520px); }
.bf-home-hcard { position: absolute; margin: 0; border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid rgba(255,255,255,.18); transform: rotate(var(--r, 0deg)); }
.bf-home-hcard img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bf-home-hcard--food { --r: -3deg; left: 0; top: -10%; width: min(46%, 250px); aspect-ratio: 3 / 4; z-index: 1; }
.bf-home-hcard--staff { --r: 2.5deg; right: 0; top: 14%; width: min(43%, 235px); aspect-ratio: 3 / 4; z-index: 2; }
.bf-home-hcard--store { --r: -1.5deg; left: 14%; bottom: -64px; width: min(72%, 400px); aspect-ratio: 16 / 10; z-index: 3; }

@keyframes bfHomeRiseIn { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes bfHomeCardIn { from { opacity: 0; transform: translateY(40px) rotate(var(--r, 0deg)); }
  to { opacity: 1; transform: translateY(0) rotate(var(--r, 0deg)); } }
.bf-home-hero [data-rise] { opacity: 0; animation: bfHomeRiseIn var(--motion-dur-reveal) var(--motion-ease-out) forwards; }
.bf-home-hero [data-rise="1"] { animation-delay: 80ms; }
.bf-home-hero [data-rise="2"] { animation-delay: 240ms; }
.bf-home-hero [data-rise="3"] { animation-delay: 420ms; }
.bf-home-hero [data-rise="4"] { animation-delay: 580ms; }
.bf-home-hcard { opacity: 0; animation: bfHomeCardIn var(--motion-dur-hero) var(--motion-ease-out) forwards; }
.bf-home-hcard--food { animation-delay: 240ms; }
.bf-home-hcard--staff { animation-delay: 400ms; }
.bf-home-hcard--store { animation-delay: 560ms; }

/* ==========================================================
   2 · MANIFESTO — statement band (cream); padding-top absorbs the
   hero card's -64px break-out.
   ========================================================== */
.bf-home-manifesto {
  padding: calc(clamp(5rem, 12vw, 9rem) + 40px) var(--grid-margin) clamp(5rem, 12vw, 9rem);
  text-align: center;
}
.bf-home-manifesto__title {
  font-family: var(--font-jp); font-weight: var(--fw-bold);
  font-size: clamp(1.5rem, 1rem + 2.2vw, 2.6rem); line-height: 1.4; margin-top: var(--space-5);
  max-width: 26em; margin-inline: auto; text-wrap: balance; color: var(--text-primary);
}
.bf-home-manifesto__body { max-width: 38em; margin: var(--space-8) auto 0; color: var(--text-secondary);
  font-size: var(--fs-body-jp); line-height: var(--lh-relaxed); }

/* ==========================================================
   3 · SIGNATURE — brand diptych. Field colour is a fixed brand
   statement ⇒ pinned to the raw ramp, not semantic surface tokens.
   ========================================================== */
.bf-home-brands-head { padding: clamp(3.5rem, 8vw, 6rem) var(--grid-margin) clamp(2.5rem, 5vw, 4rem);
  text-align: center; }
.bf-home-brands-head__title { font-family: var(--font-jp); font-weight: var(--fw-bold);
  font-size: clamp(1.6rem, 1rem + 2.4vw, 2.8rem); text-wrap: balance; margin-top: var(--space-5);
  color: var(--text-primary); }
.bf-home-diptych { display: grid; grid-template-columns: 1fr 1fr; }
.bf-home-panel { padding: clamp(2.5rem, 5vw, 5rem) var(--grid-margin) clamp(3rem, 6vw, 5.5rem);
  display: flex; flex-direction: column; gap: var(--space-6); }
.bf-home-panel__top { display: flex; align-items: center; gap: var(--space-4); }
.bf-home-panel__top img { height: 52px; width: auto; }
.bf-home-brand-name { font-family: var(--font-jp); font-weight: var(--fw-bold);
  font-size: clamp(1.7rem, 1rem + 2vw, 2.5rem); line-height: 1.2; }
.bf-home-brand-latin { font-family: var(--font-vn); font-weight: var(--fw-extrabold);
  font-size: var(--fs-body-sm); letter-spacing: var(--ls-overline); text-transform: uppercase; }
.bf-home-brand-tag { align-self: flex-start; padding: 6px 14px; border-radius: var(--radius-pill);
  font-size: var(--fs-body-sm); font-weight: var(--fw-semibold); }
.bf-home-brand-desc { max-width: 26em; font-size: var(--fs-body-jp); line-height: var(--lh-relaxed); }
.bf-home-brand-photo { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg);
  aspect-ratio: 4 / 3; }
.bf-home-brand-photo img { width: 100%; height: 100%; object-fit: cover;
  transition: transform 600ms var(--motion-ease-out); }
@media (hover: hover) and (pointer: fine) { .bf-home-panel:hover .bf-home-brand-photo img { transform: scale(1.04); } }
.bf-home-brand-link { font-weight: var(--fw-bold); text-decoration: none; align-self: flex-start;
  border-bottom: 2px solid currentColor; padding-bottom: 2px; }

/* Viet Origin — forest field, pinned dark */
.bf-home-panel--vo { background: var(--green-800); color: var(--neutral-25); }
.bf-home-panel--vo .bf-home-brand-latin { color: var(--green-200); }
.bf-home-panel--vo .bf-home-brand-tag { background: rgba(255,255,255,.12); color: var(--green-100); }
.bf-home-panel--vo .bf-home-brand-desc { color: var(--green-100); }
.bf-home-panel--vo .bf-home-brand-link { color: var(--gold-300); }
.bf-home-vo-stat { display: flex; align-items: baseline; gap: var(--space-4); margin-top: var(--space-2); }
.bf-home-vo-stat__num { font-family: var(--font-vn); font-weight: var(--fw-extrabold);
  font-variant-numeric: tabular-nums; font-size: clamp(3.4rem, 2rem + 5vw, 6.5rem);
  line-height: 0.95; letter-spacing: var(--ls-tight); color: var(--gold-300); }
.bf-home-vo-stat__num small { font-family: var(--font-jp); font-weight: var(--fw-bold); font-size: 0.42em; }
.bf-home-vo-stat__label { font-size: var(--fs-body-sm-jp); color: var(--green-100); max-width: 14em;
  align-self: center; }

/* Viet Kitchen — orange field, pinned */
.bf-home-panel--vk { background: var(--brand-orange); color: var(--neutral-900); }
.bf-home-panel--vk .bf-home-brand-latin { color: var(--orange-800); }
.bf-home-panel--vk .bf-home-panel__top img { background: var(--neutral-0); border-radius: var(--radius-md);
  padding: 6px 10px; }
.bf-home-panel--vk .bf-home-brand-tag { background: rgba(255,255,255,.55); color: var(--orange-800); }
.bf-home-panel--vk .bf-home-brand-desc { color: var(--neutral-800); }
.bf-home-panel--vk .bf-home-brand-link { color: var(--neutral-900); }

/* ==========================================================
   4 · NEWS — horizontal timeline, scroll-snap, NOT auto-advancing,
   no aria-hidden on the control region (a11y floor, Issue #2).
   ========================================================== */
.bf-home-news { padding: clamp(4rem, 10vw, 7rem) 0; }
.bf-home-news__head { padding-inline: var(--grid-margin); display: flex; align-items: baseline;
  justify-content: space-between; gap: var(--space-6); flex-wrap: wrap; }
.bf-home-news__title { font-family: var(--font-jp); font-weight: var(--fw-bold);
  font-size: clamp(1.6rem, 1rem + 2vw, 2.4rem); margin-top: var(--space-4); color: var(--text-primary); }
.bf-home-news__subline { color: var(--text-secondary); margin-top: var(--space-2); }
.bf-home-news__more { font-weight: var(--fw-bold); text-decoration: none; color: var(--text-link);
  border-bottom: 2px solid var(--brand-gold); padding-bottom: 2px; white-space: nowrap; }
.bf-home-news__track { display: flex; gap: var(--space-5); overflow-x: auto;
  scroll-snap-type: x proximity; scroll-padding-inline: var(--grid-margin);
  padding: var(--space-8) var(--grid-margin) var(--space-4); }
.bf-home-news__card { flex: 0 0 min(78vw, 330px); scroll-snap-align: start;
  background: var(--surface-card); border: 1px solid var(--border-default);
  border-radius: var(--radius-lg); padding: var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-3); text-decoration: none;
  transition: transform var(--motion-dur-ui) var(--motion-ease-out),
              box-shadow var(--motion-dur-ui) var(--motion-ease-out); }
@media (hover: hover) and (pointer: fine) {
  .bf-home-news__card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } }
.bf-home-news__date { font-family: var(--font-vn); font-variant-numeric: tabular-nums;
  font-size: var(--fs-body-sm); color: var(--text-tertiary); }
.bf-home-chip { align-self: flex-start; font-family: var(--font-vn); font-size: var(--fs-label);
  font-weight: var(--fw-bold); letter-spacing: var(--ls-wide); text-transform: uppercase;
  padding: 4px 10px; border-radius: var(--radius-pill); }
.bf-home-chip.chip-vo { background: var(--green-50); color: var(--green-700); }
.bf-home-chip.chip-vk { background: var(--orange-50); color: var(--orange-700); }
.bf-home-chip.chip-px { background: var(--red-50); color: var(--red-700); }
[data-theme="dark"] .bf-home-chip.chip-vo { background: transparent; border: 1px solid var(--green-400); color: var(--green-300); }
[data-theme="dark"] .bf-home-chip.chip-vk { background: transparent; border: 1px solid var(--orange-400); color: var(--orange-300); }
[data-theme="dark"] .bf-home-chip.chip-px { background: transparent; border: 1px solid var(--red-400); color: var(--red-300); }
.bf-home-news__item-title { font-size: var(--fs-body-jp); font-weight: var(--fw-medium); line-height: var(--lh-normal); color: var(--text-primary); }

/* ==========================================================
   5 · FACT STRIP — trust; every value comes from i18n/content.ts,
   which mirrors company.ts (no invented numbers).
   ========================================================== */
.bf-home-facts { background: var(--surface-sunken); padding: clamp(3rem, 7vw, 5rem) var(--grid-margin); }
.bf-home-facts__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-8);
  max-width: 1200px; margin-inline: auto; }
.bf-home-fact__k { font-family: var(--font-vn); font-size: var(--fs-caption); font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-overline); text-transform: uppercase; color: var(--text-tertiary); }
.bf-home-fact__v { font-family: var(--font-jp); font-weight: var(--fw-bold);
  font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); margin-top: var(--space-2);
  font-variant-numeric: tabular-nums; color: var(--text-primary); }

/* ==========================================================
   6 · CTA BAND — inverted polarity, green-900 (pinned raw ramp)
   ========================================================== */
.bf-home-cta { background: var(--green-900); color: var(--neutral-25); text-align: center;
  padding: clamp(4.5rem, 12vw, 8.5rem) var(--grid-margin); }
.bf-home-cta .bf-home-overline { color: var(--gold-300); justify-content: center; }
.bf-home-cta__title { font-family: var(--font-jp); font-weight: var(--fw-bold);
  font-size: clamp(1.7rem, 1rem + 2.6vw, 3rem); margin-top: var(--space-4); text-wrap: balance; }
.bf-home-cta__sub { color: var(--green-100); margin-top: var(--space-5); }
.bf-home-cta__ctas { display: flex; gap: var(--space-4); justify-content: center;
  margin-top: var(--space-10); flex-wrap: wrap; }

/* ==========================================================
   SCROLL-REVEAL — CSS scroll-driven, 0 JS. Unsupported browsers see
   static content (nothing lost).

   This bare `[data-reveal]` rule is the SITEWIDE FALLBACK, kept deliberately
   (Issue #28) as the default for any page that has no route-scoped override
   below (`main[data-route="…"] [data-reveal]`). It is never the resolved
   style on home or about today — their scoped rules carry higher specificity
   (0,2,1 vs 0,1,0) and always win regardless of source order. If a new page
   ever adds `data-reveal` without its own `main[data-route="…"]` block, this
   is what it gets.
   ========================================================== */
@supports (animation-timeline: view()) {
  [data-reveal] { animation: bfHomeRevealIn linear both; animation-timeline: view();
    animation-range: entry 0% entry 55%; }
  @keyframes bfHomeRevealIn { from { opacity: 0; transform: translateY(44px); }
    to { opacity: 1; transform: none; } }
}

@media (prefers-reduced-motion: reduce) {
  .bf-home-hero [data-rise] { animation: none; opacity: 1; }
  .bf-home-hcard { animation: none; opacity: 1; }
  [data-reveal] { animation: none !important; opacity: 1; transform: none; }
  .bf-home-brand-photo img, .bf-home-news__card { transition-duration: 0.01ms; }
}

@media (max-width: 900px) {
  .bf-home-hero { grid-template-columns: 1fr; min-height: auto; padding-top: clamp(2rem, 6vw, 3rem); }
  .bf-home-hero__pane { padding-block: var(--space-6) var(--space-10); }
  .bf-home-hero__cards { height: clamp(280px, 64vw, 400px); width: 100%; }
  .bf-home-hcard--food { top: 0; }
  .bf-home-hcard--staff { top: 20%; }
  .bf-home-hcard--store { bottom: -48px; }
  .bf-home-diptych { grid-template-columns: 1fr; }
  .bf-home-facts__grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
}

/* Company page — message 2-col + workplace photo (match original structure) */
.bf-msg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; margin-top: 20px; }
.bf-msg-photo img { width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); display: block; aspect-ratio: 3/2; object-fit: cover; }
.bf-msg-grid .bf-message { margin: 0; }
.bf-company-photo { margin: 0 auto 36px; max-width: 760px; }
.bf-company-photo img { width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); display: block; aspect-ratio: 3/2; object-fit: cover; }
@media (max-width: 820px) {
  .bf-msg-grid { grid-template-columns: 1fr; gap: 24px; }
}

/* ============================================================
   HOME (set 2, #20 → #22) — approved artifact docs/design/home-20-spec.md.
   Verbatim port of docs/design/home-20-mockup.html's page CSS (prefix .hm-);
   `main h1/h2/h3`, `main p` and the JA main font-size are already in the shared
   baseline above, so they are not repeated here. `.bf-btn-outline`/`.bf-btn-md`
   live in the Buttons section (this page is their first caller).
   ============================================================ */
.hm-section { padding-block: var(--space-20); }
.hm-h2 { font-size: clamp(1.6rem, 1.05rem + 1.9vw, 2.4rem); }
.hm-body { color: var(--text-secondary); line-height: var(--lh-relaxed); max-width: 38em; }
html:not([lang="ja"]) .hm-body { max-width: 62ch; }
.hm-lead { font-weight: var(--fw-semibold); color: var(--text-brand); text-decoration: none; font-size: var(--fs-body-sm); white-space: nowrap; }
.hm-lead::after { content: "\2192"; font-family: var(--font-vn); margin-left: .35em; display: inline-block; transition: transform var(--motion-dur-feedback) var(--motion-ease-out); }
html[lang="ja"] .hm-hero h1, html[lang="ja"] .hm-who h2, html[lang="ja"] .hm-net h2, html[lang="ja"] .hm-h2 { word-break: keep-all; } /* JA display: hand breaks via <wbr> only */

/* lamp — nét = currentColor, bóng đèn = gold khi .is-lit (design-spec.md §2: gold = "đang sáng") */
@property --bulb { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --glow { syntax: '<color>'; inherits: true; initial-value: transparent; }
.lamp { display: block; width: var(--s, 64px); height: calc(var(--s, 64px) * 1.6); color: var(--text-primary); --lit: var(--brand-gold); --bulb: transparent; --glow: transparent; }
[data-theme="dark"] .lamp { --lit: var(--gold-300); }
.lamp.is-lit { --bulb: var(--lit); --glow: color-mix(in srgb, var(--lit) 26%, transparent); }

/* 1 · HERO — photo-first full-bleed, cream scrim on the left (measured: copy ends ≈44% at 1440) */
.hm-hero { position: relative; isolation: isolate; display: grid; align-items: center; min-height: min(84svh, 760px); overflow: hidden; }
.hm-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 78% 55%; z-index: -2; }
.hm-hero > .bf-container, .hm-jp > .bf-container { width: 100%; } /* grid item + margin:auto would shrink-to-fit */
.hm-hero__scrim { position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, var(--surface-page) 0%, var(--surface-page) 34%, color-mix(in srgb, var(--surface-page) 78%, transparent) 50%, transparent 66%); }
.hm-hero__copy { padding-block: var(--space-16); max-width: 36rem; }
.hm-hero h1 { font-size: clamp(1.4rem, 1rem + 1.6vw, 2rem); line-height: 1.2; }
.hm-hero__l1, .hm-hero__l2 { display: block; }
.hm-hero__l2 { font-size: clamp(2.2rem, 1.1rem + 4.2vw, 4.6rem); line-height: 1.12; margin-top: var(--space-2); }
.hm-hero__net { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); align-items: center; margin-top: var(--space-6); font-size: var(--fs-body-sm); color: var(--text-secondary); }
.hm-hero__net > span + span::before { content: "\00b7"; margin-right: var(--space-3); color: var(--border-strong); }
.hm-hero__net .bf-country__soon { padding: 0; font-size: var(--fs-caption); }
.hm-hero__net .bf-country__soon::before { margin-right: 0; }
.hm-hero__actions { display: flex; gap: var(--space-5); align-items: center; margin-top: var(--space-8); }

/* 2 · WHO — statement, two columns, thin (R) */
.hm-who { border-top: 1px solid var(--border-subtle); }
.hm-who__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-12); }
.hm-who h2 { font-size: clamp(1.5rem, 1rem + 1.7vw, 2.2rem); }
.hm-who__col { display: flex; flex-direction: column; gap: var(--space-5); align-items: flex-start; }

/* 3 · BRANDS — photo-is-card, 4px brand code bar, hairline, zero shadow */
.hm-brands { background: var(--surface-sunken); }
.hm-brands__head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-6); margin-bottom: var(--space-8); }
.hm-bgrid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }
.hm-bcard { display: grid; grid-template-rows: auto 1fr; background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-md); overflow: hidden; text-decoration: none; color: inherit; --code: var(--brand-green); }
.hm-bcard--vk { --code: var(--brand-orange); }
.hm-bcard__img { aspect-ratio: 3/2; object-fit: cover; width: 100%; height: 100%; display: block; }
.hm-bcard__body { padding: var(--space-6); border-top: 4px solid var(--code); display: flex; flex-direction: column; gap: var(--space-3); }
.hm-bcard__brand { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.hm-bcard__brand img { flex: none; height: 26px; width: auto; display: block; }
.hm-bcard__logo--dark { display: none; }
[data-theme="dark"] .hm-bcard--vo .hm-bcard__logo--light { display: none; }
[data-theme="dark"] .hm-bcard--vo .hm-bcard__logo--dark { display: block; }
.hm-bcard__jp { font-size: var(--fs-caption); color: var(--text-secondary); white-space: nowrap; }
.hm-bcard h3 { font-size: var(--fs-h4); }
.hm-bcard__desc { color: var(--text-secondary); font-size: var(--fs-body-sm); line-height: var(--lh-relaxed); }
html[lang="ja"] .hm-bcard__desc { font-size: var(--fs-body-sm-jp); }
.hm-bcard__where { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: auto; padding-top: var(--space-2); }
.hm-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--radius-pill); font-size: var(--fs-label); font-weight: var(--fw-semibold); font-family: var(--font-vn); color: var(--text-primary); border: 1px solid var(--border-default); }
.hm-chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--code); }
.hm-chip--site { border: 0; color: var(--text-brand); }
.hm-chip--site::before { display: none; }

/* 4 · NETWORK — CLIMAX: three country columns (set 1 object) + three lamps */
.hm-net { position: relative; padding-block: var(--space-24) var(--space-20); }
.hm-net__head { max-width: 40rem; margin-bottom: var(--space-12); }
.hm-net__head h2 { font-size: clamp(1.9rem, 1.1rem + 2.8vw, 3.2rem); }
.hm-net__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0; border-top: 1px solid var(--border-default); }
.hm-net__col { position: relative; padding: 0 var(--space-8) var(--space-6) 0; border-left: 1px solid var(--border-subtle); padding-left: var(--space-8); }
.hm-net__col:first-child { border-left: 0; padding-left: 0; }
.hm-net__lamp { height: 150px; display: flex; align-items: flex-start; margin-bottom: var(--space-4); }
.hm-net__lamp .lamp { --s: clamp(48px, 5vw, 64px); }
.hm-net__col .bf-country__head { margin-bottom: var(--space-3); }
.hm-net__col .bf-country__list a.bf-lead { font-size: var(--fs-body); }
.hm-net__col .bf-country__note { max-width: 22em; }
.hm-net__foot { display: flex; justify-content: flex-end; padding-top: var(--space-6); border-top: 1px solid var(--border-subtle); }

/* 5 · JAPAN — store photo band (Hongo, confirmed) + cream napkin with the two FC entrances */
.hm-jp { position: relative; isolation: isolate; display: grid; align-items: center; min-height: min(70svh, 640px); overflow: hidden; padding-block: var(--space-16); }
.hm-jp__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; z-index: -1; }
.hm-jp__card { max-width: 34rem; background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: var(--space-10); display: flex; flex-direction: column; gap: var(--space-4); align-items: flex-start; }
.hm-jp__where { display: flex; align-items: baseline; gap: var(--space-2); }
.hm-jp__where b { font-size: var(--fs-title); }
.hm-jp__card h2 { font-size: clamp(1.5rem, 1rem + 1.6vw, 2.1rem); }
.hm-jp__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-2); }
.hm-jp__cap { position: absolute; right: var(--space-6); bottom: var(--space-4); font-size: var(--fs-label); font-family: var(--font-vn); color: var(--text-inverse); opacity: .85; }

/* 6 · NEWS — ledger, three rows, sunken (R) */
.hm-news { background: var(--surface-sunken); }
.hm-news__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-12); }
.hm-news__side { display: flex; flex-direction: column; gap: var(--space-4); align-items: flex-start; }
.hm-ledger { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border-default); }
.hm-ledger li { display: grid; grid-template-columns: 7.5em auto minmax(0, 1fr); gap: var(--space-4); align-items: baseline; padding: var(--space-4) 0; border-bottom: 1px solid var(--border-default); }
.hm-ledger time { font-family: var(--font-vn); font-variant-numeric: tabular-nums; font-size: var(--fs-body-sm); color: var(--text-secondary); }
.hm-ledger a { font-size: var(--fs-body); color: var(--text-primary); text-decoration: none; text-wrap: pretty; }
.hm-tag { display: inline-block; padding: 2px 8px; border-radius: var(--radius-xs); font-family: var(--font-vn); font-size: var(--fs-label); font-weight: var(--fw-semibold); white-space: nowrap; color: var(--text-inverse); background: var(--brand-green); }
.hm-tag--vk { background: var(--brand-orange); color: var(--text-primary); }
[data-theme="dark"] .hm-tag--vk { color: var(--surface-page); }
.hm-tag--px { background: var(--brand-red-orange); color: var(--text-inverse); }

/* 7 · CONTACT — closing band, one green button, one small lit lamp echo */
.hm-contact { padding-block: var(--space-24); }
.hm-contact__in { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-10); align-items: center; max-width: 52rem; }
.hm-contact__in .lamp { --s: 44px; }
.hm-contact__copy { display: flex; flex-direction: column; gap: var(--space-4); align-items: flex-start; }
.hm-contact h2 { font-size: clamp(1.6rem, 1.05rem + 1.9vw, 2.4rem); }

[data-still] [data-reveal], [data-still] [data-rise], [data-still] .lamp, [data-still] .hm-hero__img { animation: none !important; }
@media (hover: hover) and (pointer: fine) {
  .hm-lead:hover::after { transform: translateX(3px); }
  .hm-bcard:hover { border-color: var(--border-strong); }
  .hm-ledger a:hover { color: var(--text-brand); }
  .bf-btn-outline:hover { background: var(--surface-brand-subtle); }
}
@media (prefers-reduced-motion: no-preference) {
  .hm-hero [data-rise] { animation: hmRise var(--motion-dur-hero) var(--motion-ease-out) both; animation-delay: calc(var(--d, 0) * 1ms); }
  @keyframes hmRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  .hm-hero__img { animation: hmSettle 1600ms var(--motion-ease-out) both; }
  @keyframes hmSettle { from { transform: scale(1.04); } to { transform: none; } }
  @supports (animation-timeline: view()) {
    main[data-route="home"] [data-reveal] { animation: hmIn linear both; animation-timeline: view(); animation-range: entry 0% entry 42%; }
    @keyframes hmIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
    .hm-net .lamp.is-lit { animation: hmLampOn linear both; animation-timeline: view(); animation-range: entry calc(30% + var(--i, 0) * 22%) entry calc(60% + var(--i, 0) * 22%); }
    @keyframes hmLampOn { from { --bulb: transparent; --glow: transparent; } to { --bulb: var(--lit); --glow: color-mix(in srgb, var(--lit) 26%, transparent); } }
  }
}
@media (max-width: 1023.98px) {
  .hm-who__grid, .hm-news__grid { grid-template-columns: 1fr; gap: var(--space-8); }
}
@media (max-width: 719.98px) {
  .hm-section { padding-block: var(--space-16); }
  .hm-hero { min-height: 0; grid-template-rows: auto auto; }
  .hm-hero__img { position: static; aspect-ratio: 4/3; height: auto; object-position: 60% 50%; }
  .hm-hero__scrim { display: none; }
  .hm-hero__copy { padding-block: var(--space-8) var(--space-12); }
  .hm-brands__head { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
  .hm-bgrid { grid-template-columns: 1fr; }
  .hm-net { padding-block: var(--space-16); }
  .hm-net__cols { grid-template-columns: 1fr; }
  .hm-net__col { border-left: 0; padding-left: 0; padding-top: var(--space-6); border-top: 1px solid var(--border-subtle); }
  .hm-net__col:first-child { border-top: 0; }
  .hm-net__lamp { height: 96px; }
  .hm-net__lamp .lamp { --s: 40px; }
  .hm-jp { min-height: 0; padding-block: var(--space-8); }
  .hm-jp__card { padding: var(--space-6); }
  .hm-ledger li { grid-template-columns: 1fr; gap: var(--space-1); }
  .hm-contact { padding-block: var(--space-16); }
  .hm-contact__in { grid-template-columns: 1fr; }
  .hm-contact__in .lamp { display: none; }
}

/* ============================================================
   ABOUT (set 2, #21 → #23) — approved artifact docs/design/about-21-spec.md.
   Verbatim port of docs/design/about-21-mockup.html's page CSS (prefix .ab-).
   ============================================================ */
.ab-body { color: var(--text-secondary); line-height: var(--lh-relaxed); max-width: 38em; }
html:not([lang="ja"]) .ab-body { max-width: 62ch; }
.ab-lead-link { font-weight: var(--fw-semibold); color: var(--text-brand); text-decoration: none; font-size: var(--fs-body-sm); }
.ab-lead-link::after { content: "\2192"; font-family: var(--font-vn); margin-left: .35em; display: inline-block; transition: transform var(--motion-dur-feedback) var(--motion-ease-out); }
.ab-label { font-family: var(--font-vn); font-size: var(--fs-label); font-weight: var(--fw-semibold); letter-spacing: var(--ls-overline); text-transform: uppercase; color: var(--text-secondary); }
.ab-section { padding-block: var(--space-20); }
.ab-narrow { max-width: 52rem; }

/* 1 · LEAD — page title small, the message as display (unlabeled, unsigned) */
.ab-lead { padding-block: var(--space-16) var(--space-20); border-bottom: 1px solid var(--border-subtle); }
.ab-lead h1 { font-size: var(--fs-body); font-weight: var(--fw-semibold); color: var(--text-secondary); letter-spacing: 0; margin-bottom: var(--space-8); }
.ab-lead__msg { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: clamp(1.55rem, 1rem + 2.1vw, 2.6rem); line-height: 1.4; max-width: 30em; text-wrap: balance; color: var(--text-primary); }
html[lang="ja"] .ab-lead__msg, html[lang="ja"] .ab-vision__body, html[lang="ja"] .ab-message h2 { font-family: var(--font-jp); word-break: keep-all; } /* JA display: hand breaks via <wbr> only (design-spec.md §4) */
html[lang="ja"] .ab-lead__msg { max-width: 24em; line-height: 1.5; }

/* part header ① ② */
.ab-part { display: flex; align-items: baseline; gap: var(--space-4); margin-bottom: var(--space-12); padding-bottom: var(--space-4); border-bottom: 1px solid var(--border-default); }
.ab-part__num { font-family: var(--font-vn); font-weight: var(--fw-extrabold); font-size: var(--fs-h3); color: var(--text-brand); line-height: 1; }
.ab-part h2 { font-size: clamp(1.7rem, 1.1rem + 2vw, 2.6rem); }
.ab-part__latin { margin-left: auto; }

/* 2 · MISSION + 5 stakeholders — statement then ledger */
.ab-mission { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-12); align-items: start; }
.ab-mission__head { display: flex; flex-direction: column; gap: var(--space-4); }
.ab-mission__body { font-size: clamp(1.1rem, 1rem + .5vw, 1.35rem); line-height: 1.6; color: var(--text-primary); max-width: 26em; }
.ab-ledger { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border-default); }
.ab-ledger li { display: grid; grid-template-columns: 2.5rem minmax(0, 11rem) minmax(0, 1fr); gap: var(--space-4); padding: var(--space-4) 0; border-bottom: 1px solid var(--border-default); }
.ab-ledger__n { font-family: var(--font-vn); font-variant-numeric: tabular-nums; font-size: var(--fs-label); font-weight: var(--fw-semibold); color: var(--text-secondary); padding-top: .35em; }
.ab-ledger__who { font-weight: var(--fw-bold); color: var(--text-primary); }
.ab-ledger__body { color: var(--text-secondary); line-height: var(--lh-relaxed); font-size: var(--fs-body-sm); }
html[lang="ja"] .ab-ledger__body { font-size: var(--fs-body-sm-jp); }

/* 3 · VISION — one sentence, thin (R) */
.ab-vision { padding-block: var(--space-24); text-align: left; }
.ab-vision__in { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: var(--space-8); align-items: baseline; }
.ab-vision__body { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: clamp(1.35rem, 1rem + 1.4vw, 2.1rem); line-height: 1.45; max-width: 26em; text-wrap: balance; }
html[lang="ja"] .ab-vision__body { font-family: var(--font-jp); }

/* 4 · 行動指針 — CLIMAX: five rows, one thread through 1·3·5 */
.ab-mottos { background: var(--surface-sunken); padding-block: var(--space-24); }
.ab-mottos__head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-12); margin-bottom: var(--space-12); }
.ab-mottos__head h2 { font-size: clamp(1.7rem, 1.1rem + 2vw, 2.6rem); }
.ab-mottos__head .ab-body { align-self: end; }
.ab-thread { list-style: none; margin: 0; padding: 0; position: relative; }
.ab-thread::before { content: ""; position: absolute; left: calc(var(--node) / 2); top: var(--space-6); bottom: var(--space-6); width: 2px; background: var(--brand-green); --node: 20px; }
.ab-motto { --node: 20px; position: relative; display: grid; grid-template-columns: var(--node) 2.5rem minmax(0, 15rem) minmax(0, 1fr); gap: 0 var(--space-5); padding: var(--space-6) 0; border-bottom: 1px solid var(--border-default); align-items: start; }
.ab-motto__node { position: relative; width: var(--node); height: var(--node); border-radius: 50%; margin-top: .3em; background: var(--surface-sunken); border: 2px solid var(--border-strong); }
.ab-motto.on-thread .ab-motto__node { background: var(--brand-green); border-color: var(--brand-green); }
.ab-motto__n { font-family: var(--font-vn); font-variant-numeric: tabular-nums; font-weight: var(--fw-extrabold); font-size: var(--fs-h4); color: var(--text-secondary); line-height: 1.5; }
.ab-motto.on-thread .ab-motto__n { color: var(--text-brand); }
.ab-motto h3 { font-size: var(--fs-h4); }
html[lang="ja"] .ab-motto h3 { font-size: var(--fs-title); }
.ab-motto__line { color: var(--text-secondary); line-height: var(--lh-relaxed); }
.ab-thread__key { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-5); font-size: var(--fs-caption); color: var(--text-secondary); }
.ab-thread__key i { display: inline-block; width: 20px; height: 2px; background: var(--brand-green); }

/* 5 · MBV — note (R) */
.ab-mbv { padding-block: var(--space-16); }
.ab-mbv__in { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: var(--space-8); border-left: 2px solid var(--brand-green); padding-left: var(--space-6); }
.ab-mbv__in b { font-family: var(--font-vn); font-size: var(--fs-title); }
.ab-mbv__col { display: flex; flex-direction: column; gap: var(--space-3); align-items: flex-start; }

/* 6 · 企業文化 — photo + three values (B) */
.ab-culture { border-top: 1px solid var(--border-default); }
.ab-culture__intro { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-12); align-items: end; margin-bottom: var(--space-10); }
.ab-culture__photo { width: 100%; aspect-ratio: 16/9; object-fit: cover; object-position: 50% 40%; border-radius: var(--radius-lg); display: block; margin-bottom: var(--space-12); }
.ab-values { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-10); }
.ab-value { display: flex; flex-direction: column; gap: var(--space-3); padding-top: var(--space-4); border-top: 2px solid var(--brand-green); }
.ab-value__kanji { font-family: var(--font-jp); font-weight: var(--fw-bold); font-size: clamp(2.2rem, 1.4rem + 2vw, 3.2rem); line-height: 1; color: var(--text-primary); }
.ab-value h3 { font-size: var(--fs-title); }
.ab-value p { color: var(--text-secondary); line-height: var(--lh-relaxed); font-size: var(--fs-body-sm); }
html[lang="ja"] .ab-value p { font-size: var(--fs-body-sm-jp); }

/* 7 · MESSAGE + careers — closing statement (B) */
.ab-message { background: var(--surface-sunken); padding-block: var(--space-24); }
.ab-message__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-12); align-items: start; }
.ab-message h2 { font-size: clamp(1.7rem, 1.1rem + 2vw, 2.6rem); }
.ab-message__col { display: flex; flex-direction: column; gap: var(--space-6); align-items: flex-start; }
.ab-careers { display: flex; flex-direction: column; gap: var(--space-2); padding-top: var(--space-6); border-top: 1px solid var(--border-default); width: 100%; }
.ab-careers .bf-ext { font-weight: var(--fw-semibold); color: var(--text-brand); text-decoration: none; }

[data-still] [data-reveal], [data-still] [data-rise], [data-still] .ab-thread::before { animation: none !important; }
@media (hover: hover) and (pointer: fine) { .ab-lead-link:hover::after { transform: translateX(3px); } .bf-ext:hover { text-decoration: underline; } }
@media (prefers-reduced-motion: no-preference) {
  .ab-lead [data-rise] { animation: abRise var(--motion-dur-hero) var(--motion-ease-out) both; animation-delay: calc(var(--d, 0) * 1ms); }
  @keyframes abRise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
  @supports (animation-timeline: view()) {
    main[data-route="about"] [data-reveal] { animation: abIn linear both; animation-timeline: view(); animation-range: entry 0% entry 40%; }
    @keyframes abIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
    .ab-thread::before { transform-origin: top; animation: abThread linear both; animation-timeline: view(); animation-range: entry 10% exit 70%; }
    @keyframes abThread { from { transform: scaleY(0); } to { transform: none; } }
  }
}
@media (max-width: 1023.98px) {
  .ab-mission, .ab-mottos__head, .ab-message__in, .ab-culture__intro { grid-template-columns: 1fr; gap: var(--space-6); }
  .ab-vision__in, .ab-mbv__in { grid-template-columns: 1fr; gap: var(--space-3); }
  .ab-values { grid-template-columns: 1fr; gap: var(--space-8); }
}
@media (max-width: 719.98px) {
  .ab-section, .ab-mottos, .ab-message, .ab-vision { padding-block: var(--space-16); }
  .ab-lead { padding-block: var(--space-10) var(--space-16); }
  .ab-ledger li { grid-template-columns: 2.5rem minmax(0, 1fr); grid-template-rows: auto auto; }
  .ab-ledger__body { grid-column: 2; }
  .ab-motto { grid-template-columns: var(--node) 2.5rem minmax(0, 1fr); }
  .ab-motto__line { grid-column: 3; }
  .ab-part__latin { display: none; }
}

/* ═══ Set 3 — Brands #32 · Locations #33 · Japan #34 ═══
   Ported from docs/design/{brands-29,locations-30,japan-31}/assets/set3.css, Part B (Part A
   already ships above). Deviations from the artifact, all deliberate: the two bare
   [data-reveal]/[data-rise] motion rules are page-scoped to main[data-route] (Issue #28 —
   a bare rule here would win by source order on every page); the shipped duplicates
   (still switch, .hm-lead / .bf-btn-outline hover, .ab-lead + .hm-contact mobile) are not
   repeated; + JA keep-all on the door values (spec §7). */
/* ───────── B · new in set 3 ───────── */

/* B0 · chrome addendum — 拠点 ▾ shows "current" on /locations/ and /japan/* (same paint as aria-expanded) */
.bf-nav__trigger[data-current]{background:var(--surface-brand-subtle);color:var(--text-brand)}

/* B1 · FactList — one dl ledger, two densities (Locations card = default · Japan profile = --lg) */
.bf-facts{margin:0;display:grid;grid-template-columns:max-content minmax(0,1fr);border-top:1px solid var(--border-default)}
.bf-facts > div{display:contents}
.bf-facts dt,.bf-facts dd{margin:0;padding:var(--space-3) 0;border-bottom:1px solid var(--border-default)}
.bf-facts dt{font-size:var(--fs-body-sm);color:var(--text-secondary);padding-right:var(--space-8);white-space:nowrap}
.bf-facts dd{color:var(--text-primary);min-width:0}
.bf-facts address{font-style:normal}
.bf-facts dd a{color:var(--text-brand);text-decoration:none;font-weight:var(--fw-semibold);white-space:nowrap;display:inline-block;margin-right:var(--space-4)}
.bf-facts__sub{display:block;font-size:var(--fs-body-sm);color:var(--text-secondary);margin-top:var(--space-1)}
.bf-facts--lg dt,.bf-facts--lg dd{padding-block:var(--space-5)}
.bf-facts--lg dt{padding-right:var(--space-12)}
.bf-facts--lg dd{font-size:var(--fs-body-lg)}
/* People — expands the 代表者 row (names only on the Japan card and on /japan/, ruling 4) */
.bf-people{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3) var(--space-6)}
.bf-people li{display:flex;flex-direction:column}
.bf-people__role{font-size:var(--fs-caption);color:var(--text-secondary)}
.bf-people__name{font-weight:var(--fw-bold);color:var(--text-primary)}
.bf-facts--lg .bf-people{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-8)}
.bf-facts--lg .bf-people__name{font-size:var(--fs-h4)}

/* B2 · BRANDS — the home brand card, opened: photo | code bar at the seam | body */
.br-list{display:grid;gap:var(--space-10);padding-block:var(--space-16) var(--space-20)}
.br-sheet{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);background:var(--surface-card);border:1px solid var(--border-default);border-radius:var(--radius-md);overflow:hidden;--code:var(--brand-green);scroll-margin-top:calc(66px + var(--space-6))}
.br-sheet--vk{--code:var(--brand-orange)}
.br-sheet__img{width:100%;height:100%;min-height:27rem;object-fit:cover;display:block}
.br-sheet__body{padding:var(--space-10);border-left:4px solid var(--code);display:flex;flex-direction:column;gap:var(--space-4);align-items:flex-start}
.br-sheet.is-reversed{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.br-sheet.is-reversed .br-sheet__img{order:2}
.br-sheet.is-reversed .br-sheet__body{border-left:0;border-right:4px solid var(--code)}
.br-sheet__brand{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap}
.br-sheet__brand img{height:40px;width:auto;display:block;flex:none}
.br-sheet__logo--dark{display:none !important}
[data-theme="dark"] .br-sheet--vo .br-sheet__logo--light{display:none}
[data-theme="dark"] .br-sheet--vo .br-sheet__logo--dark{display:block !important}
.br-sheet__jp{font-size:var(--fs-body-sm);color:var(--text-secondary);white-space:nowrap}
.br-sheet__jp:empty{display:none}
.br-sheet h2{font-size:clamp(1.35rem,1.05rem + 1vw,1.75rem)}
.br-stat{display:flex;align-items:baseline;gap:var(--space-3);flex-wrap:wrap;width:100%;padding-block:var(--space-3);border-block:1px solid var(--border-subtle)}
.br-stat__num{font-family:var(--font-vn);font-weight:var(--fw-extrabold);font-size:clamp(2.4rem,1.6rem + 2.4vw,3.5rem);line-height:1;letter-spacing:var(--ls-tight);font-variant-numeric:tabular-nums;color:var(--text-brand)}
.br-stat__suffix{font-weight:var(--fw-bold);font-size:var(--fs-title);color:var(--text-brand);margin-left:calc(var(--space-2) * -1)}
.br-stat__label{font-size:var(--fs-body-sm);color:var(--text-secondary)}
.br-sheet__foot{display:flex;flex-direction:column;gap:var(--space-5);align-items:flex-start;margin-top:auto;padding-top:var(--space-2);width:100%}
.br-where{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap}
.br-where__label{font-size:var(--fs-caption);color:var(--text-secondary)}
.br-where__chips{display:flex;flex-wrap:wrap;gap:var(--space-2);list-style:none;margin:0;padding:0}
a.hm-chip{text-decoration:none}
.br-next .bf-country__soon{margin-left:var(--space-1)}
.br-next{display:flex;justify-content:space-between;align-items:center;gap:var(--space-6);flex-wrap:wrap;padding-block:var(--space-8);border-top:1px solid var(--border-default);margin-bottom:var(--space-20)}

/* B3 · LOCATIONS — the three country columns of the menu, opened into cards (bento 7/5) */
.lc-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--space-6);padding-block:var(--space-16) var(--space-20);align-items:stretch}
.lc-card{background:var(--surface-card);border:1px solid var(--border-default);border-radius:var(--radius-md);padding:var(--space-8);display:flex;flex-direction:column;gap:var(--space-5);scroll-margin-top:calc(66px + var(--space-6))}
.lc-card--wide{grid-row:span 2}
.lc-card__top{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-5);align-items:start}
.lc-card__lamp{margin-top:calc(var(--space-8) * -1)} /* the cord starts at the card's top hairline */
.lc-card__lamp .lamp{--s:56px}
.lc-card .bf-country__head{margin-bottom:var(--space-5)}
.lc-card__name{font-size:clamp(1.3rem,1.05rem + .9vw,1.7rem)}
.lc-card__name a{color:inherit;text-decoration:none}
.lc-card__name a::after{content:"\2192";font-family:var(--font-vn);margin-left:.35em;display:inline-block;color:var(--text-brand);transition:transform var(--motion-dur-feedback) var(--motion-ease-out)}
.lc-card__role{font-size:var(--fs-body-sm);font-weight:var(--fw-semibold);color:var(--text-primary);margin-top:var(--space-2)}
.lc-card__links{list-style:none;margin:auto 0 0;padding:var(--space-2) 0 0;display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-6)}
.lc-card__links a{font-size:var(--fs-body-sm);color:var(--text-secondary);text-decoration:none;display:inline-block;padding:var(--space-2) 0}
.lc-card .bf-country__soon{padding:0}
.lc-contact{border-top:1px solid var(--border-subtle)}
.hm-contact__in--plain{grid-template-columns:minmax(0,1fr)} /* ContactBand prop lamp={false} */

/* B4 · JAPAN — the Japan card, opened into a page */
.jp-lead{padding-block:var(--space-12) var(--space-16);border-bottom:1px solid var(--border-subtle)}
.jp-lead__in{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-8);align-items:start}
.jp-lead__lamp{margin-top:calc(var(--space-12) * -1)}
.jp-lead__lamp .lamp{--s:64px}
.jp-crumb{display:flex;align-items:baseline;gap:var(--space-3);margin-bottom:var(--space-6);font-size:var(--fs-body-sm);color:var(--text-secondary)}
.jp-crumb a{color:var(--text-secondary);text-decoration:none;font-weight:var(--fw-semibold)}
.jp-crumb__sep{color:var(--border-strong)}
.jp-crumb__here{display:inline-flex;align-items:baseline;gap:var(--space-2)}
.jp-lead h1{font-size:clamp(2rem,1.1rem + 3.4vw,3.5rem);line-height:1.2}
html[lang="ja"] .jp-lead h1,html[lang="ja"] .lc-card__name{word-break:keep-all} /* JA display: hand breaks via <wbr> only (design-spec §4) */
html:not([lang="ja"]) .jp-lead h1{font-size:clamp(1.8rem,1rem + 2.8vw,3rem)}
.jp-profile{padding-block:var(--space-20)}
.jp-profile__grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--space-12);align-items:start}
.jp-profile__photo{margin:0}
.jp-profile__photo img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;border-radius:var(--radius-lg);display:block}
.jp-profile__photo figcaption{margin-top:var(--space-2);font-family:var(--font-vn);font-size:var(--fs-label);color:var(--text-secondary)}
.jp-profile__col{display:flex;flex-direction:column;gap:var(--space-8)}
.jp-doors{background:var(--surface-sunken);padding-block:var(--space-24)}
.jp-doors__head{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--space-12);align-items:end;margin-bottom:var(--space-10)}
.jp-doors__grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-6)}
.jp-door{display:flex;flex-direction:column;gap:var(--space-5);background:var(--surface-card);border:1px solid var(--border-default);border-radius:var(--radius-md);padding:var(--space-8);text-decoration:none;color:inherit}
.jp-door h3{font-size:clamp(1.5rem,1.1rem + 1.4vw,2rem)}
.jp-door h3::after{content:"\2192";font-family:var(--font-vn);margin-left:.35em;display:inline-block;color:var(--text-brand);transition:transform var(--motion-dur-feedback) var(--motion-ease-out)}
.jp-door__lines{display:block}
html[lang="ja"] .jp-door dd{word-break:keep-all} /* japan-31-spec §7: ショッピングセンタータイプ must not break before イプ at 375 */
.jp-door__lines > span{display:block}
.jp-doors__more{display:flex;justify-content:flex-end;padding-top:var(--space-6)}
.jp-doors__more .bf-ext{font-weight:var(--fw-semibold);color:var(--text-brand);text-decoration:none;font-size:var(--fs-body-sm)}

/* still switch (design-spec §9) · hover · motion · reduced · responsive */
@media (hover:hover) and (pointer:fine){
  .lc-card__name a:hover::after,.jp-door:hover h3::after{transform:translateX(3px)}
  a.hm-chip:hover,.jp-door:hover{border-color:var(--border-strong)}
  .lc-card__links a:hover,.jp-crumb a:hover{color:var(--text-brand)}
  .bf-facts dd a:hover,.jp-doors__more .bf-ext:hover{text-decoration:underline}
}
@media (prefers-reduced-motion:no-preference){
  main[data-route="brands"] [data-rise],main[data-route="locations"] [data-rise],main[data-route="japan"] [data-rise]{animation:s3Rise var(--motion-dur-hero) var(--motion-ease-out) both;animation-delay:calc(var(--d,0)*1ms)}
  @keyframes s3Rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
  /* lamps above the fold light on LOAD, in the order of the sentence: 日本, then ベトナム (US never) */
  .lamp.is-lit[data-light]{animation:s3LampOn var(--motion-dur-reveal) var(--motion-ease-out) both;animation-delay:calc(500ms + var(--i,0)*450ms)}
  @keyframes s3LampOn{from{--bulb:transparent;--glow:transparent}to{--bulb:var(--lit);--glow:color-mix(in srgb,var(--lit) 26%,transparent)}}
  @supports (animation-timeline: view()){
    main[data-route="brands"] [data-reveal],main[data-route="locations"] [data-reveal],main[data-route="japan"] [data-reveal]{animation:s3In linear both;animation-timeline:view();animation-range:entry 0% entry 40%}
    @keyframes s3In{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
  }
}
@media (max-width:1023.98px){
  .br-sheet,.br-sheet.is-reversed{grid-template-columns:1fr}
  .br-sheet.is-reversed .br-sheet__img{order:0}
  .br-sheet__img{min-height:0;aspect-ratio:3/2;height:auto}
  .br-sheet__body,.br-sheet.is-reversed .br-sheet__body{border-left:0;border-right:0;border-top:4px solid var(--code)}
  .lc-grid{grid-template-columns:1fr}
  .lc-card--wide{grid-row:auto}
  .jp-profile__grid,.jp-doors__head{grid-template-columns:1fr;gap:var(--space-8)}
  .jp-profile__photo img{aspect-ratio:16/9}
}
@media (max-width:719.98px){
  .br-list,.lc-grid{padding-block:var(--space-10) var(--space-16)}
  .br-sheet__body{padding:var(--space-6)}
  .lc-card{padding:var(--space-6)}
  .lc-card__lamp{margin-top:calc(var(--space-6) * -1)}
  .lc-card__lamp .lamp{--s:40px}
  .jp-lead{padding-block:var(--space-8) var(--space-12)}
  .jp-lead__lamp{margin-top:calc(var(--space-8) * -1)}
  .jp-lead__lamp .lamp{--s:44px}
  .jp-profile,.jp-doors{padding-block:var(--space-16)}
  .jp-doors__grid{grid-template-columns:1fr}
  .jp-door{padding:var(--space-6)}
  .bf-facts--lg{grid-template-columns:1fr}
  .bf-facts--lg dt{border-bottom:0;padding-bottom:0}
  .bf-facts--lg dd{padding-top:var(--space-1)}
  .bf-people,.bf-facts--lg .bf-people{grid-template-columns:1fr;gap:var(--space-3)}
}