/* ─────────────────────────────────────────────────────────────────────
   tomicome — Silent Atmosphere
   editorial japanese minimalism × architectural typography
   ───────────────────────────────────────────────────────────────────── */

:root {
  /* default palette: warm cream with moss accent (corporate color from logo) */
  --bg:           #f7f4ec;
  --bg-2:         #ede8db;
  --bg-soft:      #f1eee6;
  --paper:        #ffffff;
  --ink:          #1c1f17;
  --ink-2:        #3a3e34;
  --muted:        #7d7b6f;
  --rule:         #cfc9b8;
  --rule-soft:    #e3decf;
  --moss:         #4f5e3f;   /* corporate moss — from tomicome logo */
  --moss-deep:    #3a4830;
  --moss-soft:    #98a48a;
  --accent:       var(--moss);
  --accent-2:     #8a6a4a;
  --highlight:    #c9b88a;

  /* fonts — harmonize with rounded modern logo */
  --jp-base:    "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", sans-serif;
  --jp-display: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --en-base:    "Manrope", "Helvetica Neue", system-ui, sans-serif;
  --mono:       "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

  /* type role assignments — overridden by Tweak font-pair */
  --display-jp: var(--jp-base);
  --body-jp:    var(--jp-base);
  --display-en: var(--en-base);

  /* spatial */
  --gutter: clamp(20px, 4vw, 64px);
  --col:    minmax(0, 1fr);

  /* timing */
  --ease:   cubic-bezier(.4,.0,.0,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

/* palettes ---------------------------------------------------------- */
:root[data-palette="natural"] {
  --bg: #f7f4ec; --bg-2: #ede8db; --bg-soft: #f1eee6; --paper: #fff;
  --ink: #1c1f17; --ink-2: #3a3e34; --muted: #7d7b6f;
  --rule: #cfc9b8; --rule-soft: #e3decf;
  --moss: #4f5e3f; --moss-deep: #3a4830; --moss-soft: #98a48a;
  --accent: var(--moss); --accent-2: #8a6a4a; --highlight: #c9b88a;
}
:root[data-palette="mono"] {
  --bg: #fbfbfa; --bg-2: #efefee; --bg-soft: #f4f4f3; --paper: #fff;
  --ink: #0e0e0d; --ink-2: #2b2b2a; --muted: #6f6f6e;
  --rule: #d6d6d4; --rule-soft: #e8e8e6;
  --moss: #4f5e3f; --moss-deep: #3a4830; --moss-soft: #98a48a;
  --accent: var(--moss); --accent-2: #6f6f6e; --highlight: #b4b3ad;
}
:root[data-palette="forest"] {
  --bg: #f1eee2; --bg-2: #e0dcc8; --bg-soft: #ebe6d4; --paper: #faf8f0;
  --ink: #1a201b; --ink-2: #2d3530; --muted: #6d736d;
  --rule: #c9c5b3; --rule-soft: #ddd9c8;
  --moss: #4a5b3c; --moss-deep: #2e3a25; --moss-soft: #98a48a;
  --accent: var(--moss); --accent-2: #6e7a4f; --highlight: #a3a06b;
}
:root[data-palette="ink"] {
  --bg: #1a1c19; --bg-2: #232622; --bg-soft: #20231f; --paper: #1a1b1f;
  --ink: #f0ece2; --ink-2: #d2cebf; --muted: #918d82;
  --rule: #2e2f33; --rule-soft: #25262a;
  --moss: #98a48a; --moss-deep: #4f5e3f; --moss-soft: #d2cebf;
  --accent: var(--moss); --accent-2: #c9b88a; --highlight: #c9b88a;
}

/* font pairs -------------------------------------------------------- */
:root[data-fontpair="kaku-mincho"] {
  --display-jp: var(--jp-display);
  --body-jp:    var(--jp-base);
  --display-en: var(--en-base);
}
:root[data-fontpair="kaku-only"] {
  --display-jp: var(--jp-base);
  --body-jp:    var(--jp-base);
  --display-en: var(--en-base);
}
:root[data-fontpair="mincho-display"] {
  --display-jp: var(--jp-display);
  --body-jp:    var(--jp-base);
  --display-en: var(--en-base);
}

/* base ---------------------------------------------------------- */
em, i { font-style: normal; }
*,*::before,*::after { box-sizing: border-box; }
html, body { margin: 0; }
html { background: var(--bg); color: var(--ink); -webkit-font-smoothing: antialiased; }
body {
  font-family: var(--body-jp);
  font-size: 15px;
  line-height: 1.95;
  letter-spacing: .025em;
  text-rendering: optimizeLegibility;
  font-feature-settings: "palt" 1;
  overflow-x: hidden;
  font-weight: 400;
  /* keep CJK clauses (and Latin words) intact — break at 、。spaces, not mid-phrase.
     overflow-wrap:anywhere lets narrow screens break long runs so nothing overflows. */
  word-break: keep-all;
  overflow-wrap: anywhere;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

::selection { background: var(--accent); color: var(--bg); }

/* utility ----------------------------------------------------------- */
.mono   { font-family: var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.serif-en { font-family: var(--display-en); font-style: normal; letter-spacing: .005em; }
.cap    { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.num    { font-family: var(--display-en); font-feature-settings: "lnum" 1; font-style: normal; }
.rule   { border: 0; border-top: .5px solid var(--rule); margin: 0; }

.container {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* nav --------------------------------------------------------------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px var(--gutter);
  transition: background .4s var(--ease), border-color .4s var(--ease), backdrop-filter .4s var(--ease), padding .4s var(--ease);
  border-bottom: .5px solid transparent;
}
.nav.scrolled {
  background: color-mix(in oklab, var(--bg) 82%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--rule-soft);
  padding-top: 12px; padding-bottom: 12px;
}
.nav-brand {
  display: flex; align-items: center; gap: 12px;
}
.nav-brand img.logo {
  height: 26px; width: auto; display: block;
  transition: height .4s var(--ease);
}
.nav.scrolled .nav-brand img.logo { height: 22px; }
.nav-brand .divider { width: 1px; height: 16px; background: var(--rule); }
.nav-brand small {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em;
  color: var(--muted); text-transform: uppercase;
}
.nav-links { display: flex; gap: 28px; }
.nav-link {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-2); font-weight: 500;
  position: relative; padding: 4px 0;
}
.nav-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 1px; background: var(--moss); transform: scaleX(0); transform-origin: left;
  transition: transform .4s var(--ease);
}
.nav-link:hover { color: var(--moss); }
.nav-link:hover::after { transform: scaleX(1); }
.nav-cta {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; font-weight: 500;
  padding: 10px 18px; border: 1px solid var(--moss);
  color: var(--moss); background: transparent;
  border-radius: 999px;
  transition: background .35s var(--ease), color .35s var(--ease);
  display: inline-flex; align-items: center; gap: 8px;
}
.nav-cta:hover { background: var(--moss); color: var(--bg); }
@media (max-width: 820px) {
  .nav-links { display: none; }
}

/* hero -------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.hero-mist {
  position: absolute; inset: 0; pointer-events: none;
  opacity: .55; z-index: 0;
}
.hero-grid-marks {
  position: absolute; inset: 0; pointer-events: none;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 100px var(--gutter) 40px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; color: var(--muted);
  text-transform: uppercase; z-index: 1;
}
.hero-grid-marks .row { display: flex; justify-content: space-between; }
.hero-content {
  position: relative; z-index: 2;
  flex: 1; display: flex; align-items: center;
  padding: 120px var(--gutter) 80px;
}
.hero-foot {
  position: relative; z-index: 2;
  display: flex; justify-content: space-between; align-items: flex-end;
  padding: 0 var(--gutter) 28px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em; color: var(--muted);
  text-transform: uppercase;
}
.hero-foot .scroll-cue {
  display: inline-flex; align-items: center; gap: 8px;
}
.hero-foot .scroll-cue .line {
  display: inline-block; width: 28px; height: .5px; background: var(--muted);
  animation: scrollPulse 2.4s var(--ease) infinite;
}
@keyframes scrollPulse {
  0%, 100% { transform: scaleX(.4); transform-origin: left; opacity: .3; }
  50%      { transform: scaleX(1);  transform-origin: left; opacity: 1; }
}

/* hero h1 multi-line span */
.hero h1 .ln {
  display: block;
  white-space: nowrap;
}
.hero h1 .ln + .ln { margin-top: .12em; }

/* shared headline-line class — drives meaningful breaks regardless of viewport */
.section-head h2 .hl,
.philo-row h3 .hl {
  display: block;
  white-space: nowrap;
}
.section-head h2 .hl + .hl,
.philo-row h3 .hl + .hl { margin-top: .15em; }

/* drop text-wrap balance/max-width hacks on these (lines are now atomic) */
.section-head h2 {
  text-wrap: initial;
  max-width: none;
}
.philo-row h3 {
  text-wrap: initial;
}

/* mobile fallback — allow break inside long lines if they'd overflow */
@media (max-width: 720px) {
  .section-head h2 .hl,
  .philo-row h3 .hl,
  .hero h1 .ln {
    white-space: normal;
  }
}
.hero[data-layout="cinema"] .h-cinema { display: block; }
.hero[data-layout="editorial"] .h-editorial { display: grid; }
.hero[data-layout="vertical"] .h-vertical { display: flex; }
.hero[data-layout="overlap"] .h-overlap { display: grid; }
.hero[data-layout="type"] .h-type { display: block; }
.h-cinema, .h-editorial, .h-vertical, .h-overlap, .h-type { display: none; width: 100%; }

/* CINEMA: large image + overlay headline */
.h-cinema {
  position: relative; width: 100%;
}
.h-cinema .stage {
  position: relative;
  aspect-ratio: 16 / 8.5;
  width: 100%;
  overflow: hidden;
  background: var(--bg-2);
}
.h-cinema .stage .img-wrap { position: absolute; inset: 0; }
.h-cinema .stage::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 55%, rgba(0,0,0,.55) 100%);
}
.h-cinema .stage-mark {
  position: absolute; left: 0; right: 0;
  display: flex; justify-content: space-between;
  padding: 0 clamp(20px, 4vw, 56px);
  z-index: 3;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--bg);
  pointer-events: none;
}
.h-cinema .stage-mark.top    { top: clamp(20px, 3vw, 36px); }
.h-cinema .stage-mark.bottom { bottom: clamp(20px, 3vw, 36px); color: color-mix(in oklab, var(--bg) 75%, transparent); }
.h-cinema .stage-rail {
  position: absolute;
  top: 50%; right: clamp(16px, 3vw, 36px); transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 24px;
  writing-mode: vertical-rl;
  z-index: 3;
  font-family: var(--mono); font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: color-mix(in oklab, var(--bg) 70%, transparent);
  pointer-events: none;
}
.h-cinema .overlay {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 0 clamp(20px, 4vw, 56px) clamp(48px, 6vw, 96px);
  z-index: 4;
  display: flex; flex-direction: column; gap: clamp(20px, 3vw, 40px);
}
.h-cinema h1 {
  margin: 0; font-family: var(--display-jp);
  font-size: clamp(34px, 4.6vw, 72px); line-height: 1.35;
  font-weight: 500; letter-spacing: .035em; color: var(--bg);
  text-wrap: balance; max-width: 22ch;
  text-shadow: 0 2px 28px rgba(0,0,0,.35);
}
.h-cinema h1 em {
  color: var(--highlight); font-style: normal; font-weight: 600;
}
.h-cinema .overlay-foot {
  display: grid; grid-template-columns: 1fr auto;
  gap: clamp(20px, 4vw, 80px); align-items: end;
}
.h-cinema .sub {
  margin: 0; max-width: 520px;
  font-size: 14.5px; line-height: 2;
  color: color-mix(in oklab, var(--bg) 88%, transparent);
}
.h-cinema .overlay-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.h-cinema .overlay-cta .btn { color: var(--bg); border-color: color-mix(in oklab, var(--bg) 70%, transparent); }
.h-cinema .overlay-cta .btn:hover { background: var(--bg); color: var(--moss); border-color: var(--bg); }
.h-cinema .overlay-cta .btn.solid { background: var(--moss); border-color: var(--moss); color: var(--bg); }
.h-cinema .overlay-cta .btn.solid:hover { background: var(--moss-deep); }
.h-cinema .overlay-cta .btn.ghost { border-color: transparent; }

/* EDITORIAL: asymmetric grid */
.h-editorial {
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
}
.h-editorial .left .eyebrow {
  display: flex; align-items: center; gap: 10px; margin-bottom: 24px;
}
.h-editorial .left .eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.h-editorial .left h1 {
  margin: 0; font-family: var(--display-jp);
  font-size: clamp(34px, 4.6vw, 68px); line-height: 1.3;
  font-weight: 500; letter-spacing: .03em;
  text-wrap: balance;
  max-width: 14ch;
}
.h-editorial .left h1 em {
  font-family: var(--display-en); font-style: normal; font-weight: 400;
  color: var(--accent);
}
.h-editorial .left .en {
  font-family: var(--display-en); font-style: normal;
  font-size: clamp(15px, 1.4vw, 19px); color: var(--accent);
  margin-top: 20px;
}
.h-editorial .left .sub {
  margin-top: 28px; max-width: 460px;
  font-size: 14px; line-height: 2; color: var(--ink-2);
}
.h-editorial .right .img-card {
  position: relative; aspect-ratio: 4/5; background: var(--bg-2); overflow: hidden;
}
.h-editorial .right .img-card .placeholder { position: absolute; inset: 0; }
.h-editorial .right .caption {
  margin-top: 12px;
  display: flex; justify-content: space-between;
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
  color: var(--muted); text-transform: uppercase;
}

/* VERTICAL: 縦書き headline */
.h-vertical {
  width: 100%;
  flex-direction: row; gap: clamp(24px, 4vw, 64px);
  align-items: stretch; justify-content: center;
  min-height: 76vh;
}
.h-vertical .col-img {
  flex: 1; max-width: 360px;
  position: relative;
  background: var(--bg-2);
  overflow: hidden;
}
.h-vertical .col-img .img-wrap { position: absolute; inset: 0; }
.h-vertical .col-img::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 65%, rgba(0,0,0,.35) 100%);
  pointer-events: none;
}
.h-vertical .h-v-stamp {
  position: absolute; left: 16px; bottom: 14px; z-index: 3;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--bg);
}
.h-vertical .col-tategaki {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  gap: 12px;
  position: relative;
}
.h-vertical .h-v-pre {
  writing-mode: vertical-rl;
  font-family: var(--mono); font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--moss);
  margin-top: 16px;
}
.h-vertical .col-tategaki h1 {
  writing-mode: vertical-rl;
  font-family: var(--display-jp); font-weight: 500;
  font-size: clamp(36px, 4.6vw, 68px); line-height: 1.85;
  letter-spacing: .22em; margin: 0;
  max-height: 70vh;
  color: var(--ink);
}
.h-vertical .col-side {
  flex: 1; max-width: 360px;
  display: flex; flex-direction: column; justify-content: center; gap: 24px;
}
.h-vertical .col-side .en {
  font-family: var(--display-en); font-style: normal;
  font-size: clamp(16px, 1.5vw, 20px); color: var(--moss); line-height: 1.6;
}
.h-vertical .col-side .sub {
  font-size: 13.5px; line-height: 2; color: var(--ink-2);
}

/* OVERLAP: image + headline intentional overlap — cover-class */
.h-overlap {
  width: 100%;
  position: relative;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  min-height: 78vh;
  align-items: stretch;
}
.h-ov-edition {
  position: absolute;
  top: -28px; right: 0;
  display: flex; align-items: baseline; gap: 14px;
  z-index: 4;
  pointer-events: none;
  user-select: none;
}
.h-ov-edition .h-ov-edition-pre {
  font-family: var(--mono); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--muted);
}
.h-ov-edition .h-ov-edition-no {
  font-family: var(--en-base); font-weight: 200;
  font-size: clamp(80px, 9vw, 144px); line-height: .85;
  color: color-mix(in oklab, var(--moss) 32%, transparent);
  letter-spacing: -.04em;
}
.h-ov-edition .h-ov-edition-sub {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--muted);
}
.h-ov-figure {
  position: relative;
  width: clamp(260px, 32vw, 420px);
  aspect-ratio: 4/5.4;
  margin-left: 0;
  margin-top: clamp(40px, 5vw, 80px);
  z-index: 1;
}
.h-ov-figure-inner {
  position: relative; width: 100%; height: 100%; overflow: hidden;
}
.h-ov-figure::before {
  /* offset frame — pulled out diagonally */
  content: "";
  position: absolute;
  inset: -18px 18px 18px -18px;
  border: 1px solid color-mix(in oklab, var(--moss) 40%, transparent);
  pointer-events: none; z-index: 0;
}
.h-ov-rail {
  position: absolute;
  left: -42px; top: 0;
  height: 100%;
  display: flex; flex-direction: column; justify-content: space-between;
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-family: var(--mono); font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--muted);
}
.h-ov-headline {
  position: absolute;
  top: clamp(60px, 8vw, 120px);
  left: clamp(240px, 30vw, 400px);
  right: clamp(16px, 4vw, 48px);
  z-index: 3;
  max-width: 920px;
}
.h-ov-eyebrow {
  display: flex; align-items: center; gap: 10px; margin-bottom: 28px;
}
.h-ov-eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--moss); }
.h-ov-headline h1 {
  margin: 0; font-family: var(--display-jp);
  font-size: clamp(40px, 6vw, 96px); line-height: 1.25;
  font-weight: 500; letter-spacing: .03em;
  color: var(--ink); text-wrap: balance;
  max-width: 14ch;
  /* protective glow — keeps text legible if it kisses dark image edge */
  text-shadow:
    0 0 18px var(--bg),
    0 0 28px color-mix(in oklab, var(--bg) 80%, transparent);
}
.h-ov-headline h1 em {
  color: var(--moss); font-style: normal; font-weight: 700;
}
.h-ov-headline .en {
  margin-top: 20px;
  font-family: var(--display-en); font-style: normal;
  font-size: clamp(15px, 1.4vw, 19px);
  color: var(--moss); letter-spacing: .01em;
  text-shadow:
    0 0 12px var(--bg),
    0 0 24px color-mix(in oklab, var(--bg) 70%, transparent);
}
.h-ov-foot {
  position: absolute;
  right: clamp(16px, 4vw, 48px);
  bottom: clamp(48px, 5vw, 80px);
  width: clamp(280px, 38vw, 480px);
  z-index: 3;
}
.h-ov-foot .sub {
  margin: 0 0 24px;
  font-size: 14.5px; line-height: 2; color: var(--ink-2);
}
.h-ov-ctas { display: flex; gap: 12px; flex-wrap: wrap; }

@media (max-width: 1100px) {
  .h-ov-headline { left: clamp(220px, 28vw, 320px); }
  .h-ov-headline h1 { font-size: clamp(36px, 5.4vw, 64px); }
}
@media (max-width: 820px) {
  .h-overlap { min-height: auto; padding-bottom: 24px; }
  .h-ov-edition { top: -10px; }
  .h-ov-edition .h-ov-edition-no { font-size: 56px; }
  .h-ov-edition .h-ov-edition-sub { display: none; }
  .h-ov-figure { width: 60%; aspect-ratio: 4/5; }
  .h-ov-rail { display: none; }
  .h-ov-headline {
    position: relative;
    left: auto; right: auto; top: auto;
    margin-top: -10%;
    padding-left: 6vw;
  }
  .h-ov-headline h1 { font-size: clamp(30px, 7vw, 44px); max-width: 100%; }
  .h-ov-foot { position: relative; right: auto; bottom: auto; width: 100%; margin-top: 32px; padding: 0 4vw; }
}

/* TYPE: oversized type only */
.h-type {
  text-align: center;
  padding: 0 4vw;
}
.h-type .pre {
  font-family: var(--mono); font-size: 11px; letter-spacing: .22em;
  color: var(--muted); text-transform: uppercase; margin-bottom: 36px;
}
.h-type h1 {
  margin: 0; font-family: var(--display-jp); font-weight: 500;
  font-size: clamp(44px, 7.2vw, 120px); line-height: 1.1;
  letter-spacing: .02em;
  text-wrap: balance;
}
.h-type h1 .ln { display: block; }
.h-type h1 .ln + .ln { margin-top: .08em; }
.h-type h1 em {
  font-family: var(--display-en); font-style: normal; font-weight: 400;
  color: var(--accent);
}
.h-type .en {
  margin-top: 32px; font-family: var(--display-en); font-style: normal;
  font-size: clamp(16px, 1.6vw, 22px); color: var(--ink-2);
}
.h-type .sub {
  margin: 24px auto 0; max-width: 540px;
  font-size: 14px; line-height: 2; color: var(--ink-2);
}

/* button system ----------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 14px 22px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  border: .5px solid var(--ink); border-radius: 999px;
  transition: background .35s var(--ease), color .35s var(--ease), padding .35s var(--ease);
  cursor: pointer; background: transparent; color: var(--ink);
}
.btn .arrow { width: 18px; height: 1px; background: currentColor; position: relative; transition: width .35s var(--ease); }
.btn .arrow::after {
  content: ""; position: absolute; right: 0; top: 50%;
  width: 6px; height: 6px; border-top: 1px solid currentColor; border-right: 1px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}
.btn:hover { background: var(--ink); color: var(--bg); }
.btn:hover .arrow { width: 28px; }
.btn.solid { background: var(--ink); color: var(--bg); }
.btn.solid:hover { background: var(--accent); border-color: var(--accent); }
.btn.ghost { border-color: transparent; padding-left: 0; padding-right: 0; }
.btn.ghost:hover { background: transparent; color: var(--accent); }

/* section primitives ------------------------------------------------ */
.section {
  position: relative;
  padding: clamp(80px, 12vw, 180px) 0;
}
.section-head {
  display: grid; grid-template-columns: 1fr 2fr; gap: clamp(20px, 4vw, 80px);
  align-items: start;
  margin-bottom: clamp(40px, 6vw, 80px);
}
.section-head .num {
  font-family: var(--display-en); font-style: normal; font-weight: 300;
  font-size: clamp(32px, 4vw, 48px); line-height: 1;
  color: var(--moss);
  letter-spacing: -.02em;
}
.section-head .label {
  font-family: var(--mono); font-size: 11px; letter-spacing: .18em;
  color: var(--muted); text-transform: uppercase; margin-top: 14px;
}
.section-head h2 {
  margin: 0; font-family: var(--display-jp); font-weight: 500;
  font-size: clamp(24px, 2.8vw, 40px); line-height: 1.55; letter-spacing: .025em;
  color: var(--ink);
  text-wrap: balance;
  max-width: 22ch;
}
.section-head .lead {
  margin-top: 24px; max-width: 56ch;
  font-size: 14.5px; line-height: 2; color: var(--ink-2);
}

/* section-head plate: small editorial frontispiece image */
.section-head .plate {
  margin-top: 32px;
  max-width: 280px;
}
.section-head .plate .pframe {
  position: relative;
  aspect-ratio: 4/5;
  background: var(--bg-2);
  overflow: hidden;
}
.section-head .plate .pframe .placeholder { position: absolute; inset: 0; }
.section-head .plate .pcaption {
  margin-top: 10px;
  display: flex; justify-content: space-between; gap: 14px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted);
}
.section-head .plate.landscape {
  max-width: 340px;
}
.section-head .plate.landscape .pframe {
  aspect-ratio: 4/3;
}
.section-head .right-rail {
  display: flex; flex-direction: column; gap: 24px;
}
.section-head .marginalia {
  margin-top: 28px;
  padding-top: 20px;
  border-top: .5px solid var(--rule-soft);
  display: flex; gap: 18px; align-items: flex-start;
  max-width: 56ch;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted);
  line-height: 1.9;
}
.section-head .marginalia .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
  flex: 0 0 auto; margin-top: 8px;
}
@media (max-width: 820px) {
  .section-head { grid-template-columns: 1fr; gap: 16px; }
  .section-head .plate { max-width: 240px; }
}

/* philosophy -------------------------------------------------------- */
.philosophy {
  background: var(--bg);
  border-top: .5px solid var(--rule-soft);
  border-bottom: .5px solid var(--rule-soft);
}
.philo-rows {
  display: grid; grid-template-columns: 1fr; gap: 0;
}
.philo-row {
  display: grid; grid-template-columns: 64px 1fr 2fr;
  gap: clamp(20px, 4vw, 64px);
  padding: 36px 0;
  border-top: .5px solid var(--rule-soft);
  align-items: start;
}
.philo-row:first-child { border-top: 0; }
.philo-row .n {
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em; color: var(--muted);
  padding-top: 6px;
}
.philo-row h3 {
  margin: 0; font-family: var(--display-jp); font-weight: 400;
  font-size: clamp(22px, 2.4vw, 32px); line-height: 1.4; letter-spacing: .02em;
}
.philo-row h3 .en {
  display: block; font-family: var(--display-en); font-style: normal;
  font-size: 14px; color: var(--accent); margin-top: 6px;
}
.philo-row .body {
  font-size: 14.5px; line-height: 2; color: var(--ink-2);
}
@media (max-width: 820px) {
  .philo-row { grid-template-columns: 1fr; gap: 12px; }
}

/* services ---------------------------------------------------------- */
.services-list {
  display: grid; grid-template-columns: 1fr; gap: 0;
}
.svc-row {
  display: grid; grid-template-columns: 80px 1fr 1.4fr 200px;
  gap: clamp(16px, 3vw, 48px);
  padding: 32px 0;
  border-top: .5px solid var(--rule-soft);
  align-items: center;
  transition: padding .5s var(--ease), background .5s var(--ease);
  cursor: default;
}
.svc-row:last-child { border-bottom: .5px solid var(--rule-soft); }
.svc-row:hover {
  padding-left: 16px;
  background: linear-gradient(90deg, color-mix(in oklab, var(--accent) 6%, transparent) 0%, transparent 80%);
}
.svc-row .svc-n {
  font-family: var(--display-en); font-style: normal;
  font-size: 28px; color: var(--accent);
}
.svc-row .svc-title {
  font-family: var(--display-jp); font-size: clamp(18px, 1.6vw, 22px);
  letter-spacing: .02em;
}
.svc-row .svc-title small {
  display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
  color: var(--muted); text-transform: uppercase; margin-top: 6px;
}
.svc-row .svc-desc {
  font-size: 13.5px; line-height: 1.9; color: var(--ink-2);
}
.svc-row .svc-tags {
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end;
}
.svc-tag {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase;
  padding: 5px 9px; border: .5px solid var(--rule); border-radius: 999px;
  color: var(--muted);
}
@media (max-width: 1000px) {
  .svc-row { grid-template-columns: 60px 1fr; }
  .svc-row .svc-desc, .svc-row .svc-tags { grid-column: 2 / -1; }
}

/* industries -------------------------------------------------------- */
.industries-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: .5px solid var(--rule-soft);
  border-bottom: .5px solid var(--rule-soft);
}
.ind-card {
  position: relative;
  padding: 48px 36px 36px;
  border-left: .5px solid var(--rule-soft);
  cursor: pointer;
  transition: background .4s var(--ease);
  display: flex; flex-direction: column; gap: 22px;
  min-height: 460px;
}
.ind-card:first-child { border-left: 0; }
.ind-card:hover { background: color-mix(in oklab, var(--accent) 4%, transparent); }
.ind-card .ind-num {
  font-family: var(--display-en); font-style: normal;
  font-size: 22px; color: var(--accent);
}
.ind-card .ind-img {
  aspect-ratio: 4/3; background: var(--bg-2); position: relative; overflow: hidden;
}
.ind-card .ind-img .placeholder { position: absolute; inset: 0; }
.ind-card h3 {
  margin: 0; font-family: var(--display-jp); font-weight: 400;
  font-size: 22px; line-height: 1.45;
}
.ind-card h3 small {
  display: block; font-family: var(--display-en); font-style: normal;
  font-size: 13px; color: var(--accent); margin-top: 4px; letter-spacing: .01em;
}
.ind-card .ind-types {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.ind-card .ind-desc {
  font-size: 13.5px; line-height: 1.95; color: var(--ink-2);
}
.ind-card .ind-quote {
  margin-top: auto;
  padding-top: 18px;
  border-top: .5px solid var(--rule-soft);
  font-family: var(--display-jp); font-size: 14px; line-height: 1.9; color: var(--ink-2);
  font-style: normal;
}
.ind-card .ind-quote::before {
  content: "“"; font-family: var(--display-en); font-style: normal;
  color: var(--accent); font-size: 28px; margin-right: 4px; line-height: 0;
  position: relative; top: 6px;
}
@media (max-width: 900px) {
  .industries-grid { grid-template-columns: 1fr; }
  .ind-card { border-left: 0; border-top: .5px solid var(--rule-soft); min-height: 0; }
  .ind-card:first-child { border-top: 0; }
}

/* process ---------------------------------------------------------- */
.process {
  background: var(--bg-2);
}
.proc-track {
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 0;
  border-top: .5px solid var(--rule);
}
.proc-step {
  padding: 28px 18px 32px 0;
  border-right: .5px solid var(--rule-soft);
  position: relative;
}
.proc-step:last-child { border-right: 0; }
.proc-step .pn {
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em; color: var(--muted);
  margin-bottom: 16px;
}
.proc-step .pt {
  font-family: var(--display-jp); font-size: 15px; letter-spacing: .02em; line-height: 1.55;
}
.proc-step .pt small {
  display: block; font-family: var(--display-en); font-style: normal;
  font-size: 11.5px; color: var(--accent); margin-top: 4px;
}
.proc-step .pd {
  font-size: 12.5px; line-height: 1.8; color: var(--ink-2);
  margin-top: 10px;
}
.proc-step::before {
  content: ""; position: absolute; top: -3px; left: 0;
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
}
@media (max-width: 1100px) {
  .proc-track { grid-template-columns: repeat(2, 1fr); }
  .proc-step:nth-child(2n) { border-right: 0; }
  .proc-step:not(:last-child) { border-bottom: .5px solid var(--rule-soft); }
}

/* cases ------------------------------------------------------------- */
.cases-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-bottom: 48px; gap: 24px; flex-wrap: wrap;
}
.cases-filter {
  display: flex; gap: 4px;
}
.cases-filter button {
  appearance: none; background: transparent; border: .5px solid var(--rule);
  padding: 8px 14px; border-radius: 999px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); cursor: pointer;
  transition: all .3s var(--ease);
}
.cases-filter button.active, .cases-filter button:hover {
  background: var(--ink); color: var(--bg); border-color: var(--ink);
}

.cases-grid {
  display: grid; grid-template-columns: repeat(12, 1fr);
  gap: 32px 24px;
}
.case-card {
  cursor: pointer;
  display: flex; flex-direction: column; gap: 16px;
  transition: transform .5s var(--ease);
}
.case-card:hover { transform: translateY(-4px); }
.case-card .cc-img {
  aspect-ratio: 4/3; background: var(--bg-2); position: relative; overflow: hidden;
}
.case-card .cc-img .placeholder { position: absolute; inset: 0; transition: transform .8s var(--ease); }
.case-card:hover .cc-img .placeholder { transform: scale(1.04); }
.case-card .cc-meta {
  display: flex; justify-content: space-between;
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em; color: var(--muted);
  text-transform: uppercase;
}
.case-card h3 {
  margin: 0; font-family: var(--display-jp); font-weight: 400;
  font-size: 20px; line-height: 1.55; letter-spacing: .02em;
}
.case-card .cc-loc {
  font-family: var(--display-en); font-style: normal; color: var(--accent);
  font-size: 13px;
}
.case-card .cc-excerpt {
  font-size: 13.5px; line-height: 1.9; color: var(--ink-2);
}
.case-card.feat { grid-column: span 6; }
.case-card.feat .cc-img { aspect-ratio: 5/4; }
.case-card.feat h3 { font-size: 26px; }
.case-card.std { grid-column: span 3; }
@media (max-width: 1100px) {
  .case-card.feat { grid-column: span 12; }
  .case-card.std { grid-column: span 6; }
}
@media (max-width: 700px) {
  .case-card.std { grid-column: span 12; }
}

/* case detail overlay ---------------------------------------------- */
.case-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: var(--bg);
  overflow-y: auto;
  opacity: 0; pointer-events: none;
  transition: opacity .5s var(--ease);
}
.case-overlay.open { opacity: 1; pointer-events: auto; }
.case-overlay-bar {
  position: sticky; top: 0; z-index: 5;
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px var(--gutter);
  background: color-mix(in oklab, var(--bg) 92%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: .5px solid var(--rule-soft);
}
.case-overlay-bar .close {
  appearance: none; border: .5px solid var(--ink); background: transparent;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase;
  padding: 8px 14px; border-radius: 999px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
}
.case-overlay-bar .close:hover { background: var(--ink); color: var(--bg); }

.case-article {
  max-width: 1240px; margin: 0 auto; padding: 60px var(--gutter) 120px;
}
.case-article .ca-head {
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px;
  align-items: end;
  padding-bottom: 40px; border-bottom: .5px solid var(--rule-soft);
  margin-bottom: 48px;
}
.case-article .ca-head .meta {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em;
  color: var(--muted); text-transform: uppercase; margin-bottom: 24px;
  display: flex; gap: 14px;
}
.case-article .ca-head h1 {
  margin: 0; font-family: var(--display-jp); font-weight: 400;
  font-size: clamp(28px, 3.4vw, 48px); line-height: 1.4; letter-spacing: .02em;
}
.case-article .ca-head .loc {
  font-family: var(--display-en); font-style: normal;
  color: var(--accent); font-size: 18px; margin-top: 8px;
}
.case-article .ca-head .right {
  font-size: 14px; line-height: 2; color: var(--ink-2);
}
.case-article .ca-hero {
  aspect-ratio: 16/8; background: var(--bg-2); position: relative; overflow: hidden;
  margin-bottom: 64px;
}
.case-article .ca-body {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0, 720px) minmax(0,1fr);
  row-gap: 28px;
}
.case-article .ca-body > * { grid-column: 2; }
.case-article .ca-body p { font-size: 15px; line-height: 2.1; color: var(--ink-2); margin: 0; }
.case-article .ca-body h3 {
  font-family: var(--display-jp); font-weight: 400;
  font-size: 22px; line-height: 1.55; margin: 24px 0 4px;
}
.case-article .ca-body h3 small {
  display: block; font-family: var(--display-en); font-style: normal;
  font-size: 12px; color: var(--accent); margin-bottom: 6px;
}
.case-article .ca-body blockquote {
  grid-column: 1 / -1;
  margin: 32px 0; padding: 0;
  font-family: var(--display-jp); font-weight: 400;
  font-size: clamp(20px, 2.4vw, 32px); line-height: 1.6; letter-spacing: .02em;
  text-align: center; color: var(--ink);
  max-width: 1000px; margin-left: auto; margin-right: auto;
}
.case-article .ca-body blockquote::before, .case-article .ca-body blockquote::after {
  content: ""; display: block; width: 32px; height: .5px; background: var(--accent);
  margin: 0 auto 24px;
}
.case-article .ca-body blockquote::after { margin: 24px auto 0; }
.case-article .ca-body .qa {
  display: grid; grid-template-columns: 80px 1fr; gap: 18px;
  padding: 22px 0; border-top: .5px solid var(--rule-soft);
}
.case-article .ca-body .qa .lbl {
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em; color: var(--accent);
  text-transform: uppercase; padding-top: 4px;
}
.case-article .ca-body .qa .txt { font-size: 14.5px; line-height: 2; color: var(--ink-2); }
.case-article .ca-body .qa.q .txt { font-family: var(--display-jp); color: var(--ink); font-size: 17px; }
.case-article .ca-img-pair {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  margin: 24px 0;
}
.case-article .ca-img-pair .ph { aspect-ratio: 4/3; background: var(--bg-2); position: relative; }
.case-article .ca-spec {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin: 48px 0 24px;
  border-top: .5px solid var(--rule);
  border-bottom: .5px solid var(--rule);
}
.case-article .ca-spec .cell {
  padding: 22px 18px;
  border-left: .5px solid var(--rule-soft);
}
.case-article .ca-spec .cell:first-child { border-left: 0; }
.case-article .ca-spec .cell .k {
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em; color: var(--muted);
  text-transform: uppercase; margin-bottom: 10px;
}
.case-article .ca-spec .cell .v {
  font-family: var(--display-jp); font-size: 16px; line-height: 1.55; color: var(--ink);
}
@media (max-width: 900px) {
  .case-article .ca-head { grid-template-columns: 1fr; }
  .case-article .ca-spec { grid-template-columns: repeat(2, 1fr); }
  .case-article .ca-spec .cell:nth-child(3) { border-left: 0; }
}

/* FAQ --------------------------------------------------------------- */
.faq-list {
  border-top: .5px solid var(--rule-soft);
}
.faq-item { border-bottom: .5px solid var(--rule-soft); }
.faq-q {
  display: flex; justify-content: space-between; align-items: center;
  padding: 28px 0; cursor: pointer;
  font-family: var(--display-jp); font-size: clamp(16px, 1.6vw, 21px); line-height: 1.5;
  letter-spacing: .02em; gap: 24px;
}
.faq-q .qnum {
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  color: var(--accent); flex: 0 0 auto; min-width: 32px;
}
.faq-q .qtext { flex: 1; }
.faq-q .qtoggle {
  flex: 0 0 auto;
  width: 32px; height: 32px; border-radius: 50%; border: .5px solid var(--rule);
  position: relative;
  transition: background .3s var(--ease), border-color .3s var(--ease);
}
.faq-q .qtoggle::before, .faq-q .qtoggle::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 10px; height: 1px; background: var(--ink);
  transform: translate(-50%, -50%);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.faq-q .qtoggle::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-item.open .qtoggle { background: var(--accent); border-color: var(--accent); }
.faq-item.open .qtoggle::before, .faq-item.open .qtoggle::after { background: var(--bg); }
.faq-item.open .qtoggle::after { opacity: 0; }
.faq-a {
  overflow: hidden;
  max-height: 0;
  transition: max-height .5s var(--ease);
}
.faq-item.open .faq-a { max-height: 360px; }
.faq-a-inner {
  padding: 0 0 32px 56px;
  font-size: 14.5px; line-height: 2; color: var(--ink-2);
  max-width: 60ch;
}

/* contact ----------------------------------------------------------- */
.contact {
  background: var(--ink); color: var(--bg);
  position: relative; overflow: hidden;
}
.contact[data-palette="ink"], :root[data-palette="ink"] .contact {
  background: var(--bg-2);
}
.contact .container { position: relative; z-index: 2; }
.contact .section-head h2, .contact .section-head .lead { color: var(--bg); }
.contact .section-head .label { color: color-mix(in oklab, var(--bg) 60%, transparent); }
.contact .section-head .num { color: var(--highlight); }
.contact-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.contact-ctas { display: flex; flex-direction: column; gap: 14px; }
.contact-cta {
  display: flex; justify-content: space-between; align-items: center;
  padding: 28px 0; border-top: .5px solid color-mix(in oklab, var(--bg) 18%, transparent);
  transition: padding .4s var(--ease);
  cursor: pointer; gap: 24px;
}
.contact-cta:last-child { border-bottom: .5px solid color-mix(in oklab, var(--bg) 18%, transparent); }
.contact-cta:hover { padding-left: 16px; }
.contact-cta .lhs {
  flex: 1;
  display: flex; align-items: baseline; gap: 18px;
}
.contact-cta .lhs .num {
  font-family: var(--display-en); font-style: normal;
  color: var(--highlight); font-size: 18px;
}
.contact-cta .lhs h4 {
  margin: 0; font-family: var(--display-jp); font-weight: 400;
  font-size: 18px; letter-spacing: .02em; color: var(--bg);
}
.contact-cta .lhs h4 small {
  display: block; font-family: var(--display-en); font-style: normal;
  color: color-mix(in oklab, var(--bg) 60%, transparent);
  font-size: 12px; margin-top: 4px;
}
.contact-cta .arr {
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  color: var(--bg); text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 8px;
}
.contact-cta .arr::after {
  content: ""; width: 6px; height: 6px;
  border-top: 1px solid var(--bg); border-right: 1px solid var(--bg);
  transform: rotate(45deg);
}
.contact .info {
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: color-mix(in oklab, var(--bg) 60%, transparent);
  line-height: 2.4;
}
.contact .info .lg {
  display: block; font-family: var(--display-jp); font-size: 20px;
  letter-spacing: .02em; text-transform: none;
  color: var(--bg); margin-bottom: 18px;
}
@media (max-width: 820px) {
  .contact-grid { grid-template-columns: 1fr; }
}

/* footer ------------------------------------------------------------ */
.footer {
  background: var(--bg);
  border-top: .5px solid var(--rule-soft);
  padding: 80px var(--gutter) 40px;
}
.footer .f-cols {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr;
  gap: clamp(28px, 4vw, 80px);
  padding-bottom: 48px;
  border-bottom: .5px solid var(--rule-soft);
}
.footer .f-brand .f-logo { height: 34px; width: auto; margin-bottom: 22px; }
.footer .f-brand .f-addr {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); line-height: 2.2;
}
.footer .f-social { display: flex; gap: 12px; margin-top: 20px; }
.footer .f-social a {
  width: 34px; height: 34px; border-radius: 50%;
  border: .5px solid var(--rule);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--muted);
  transition: color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.footer .f-social a:hover {
  color: var(--moss); border-color: var(--moss-soft);
  background: color-mix(in oklab, var(--moss) 6%, transparent);
}
.footer .f-social svg { width: 16px; height: 16px; display: block; }
.footer .f-nav { display: flex; flex-direction: column; gap: 12px; }
.footer .f-nav-h {
  font-family: var(--mono); font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--moss); margin-bottom: 8px;
}
.footer .f-nav a {
  font-family: var(--display-jp); font-size: 14px; letter-spacing: .02em;
  color: var(--ink-2);
  transition: color .25s var(--ease);
}
.footer .f-nav a:hover { color: var(--moss); }
.footer .f-foot {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding-top: 36px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
  color: var(--muted); text-transform: uppercase;
}
.footer .f-foot span:nth-child(2) {
  font-family: var(--display-jp); font-size: 14px; letter-spacing: .04em;
  color: var(--ink-2); text-transform: none;
}
@media (max-width: 820px) {
  .footer .f-cols { grid-template-columns: 1fr; }
}

/* placeholder image system ----------------------------------------- */
.placeholder {
  background:
    repeating-linear-gradient(
      135deg,
      color-mix(in oklab, var(--accent) 8%, var(--bg-2)) 0 1px,
      transparent 1px 18px
    ),
    var(--bg-2);
  display: flex; align-items: center; justify-content: center;
  color: var(--muted);
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; text-align: center;
  padding: 16px;
}
.placeholder.dark {
  background:
    repeating-linear-gradient(
      135deg,
      color-mix(in oklab, var(--accent) 24%, var(--ink-2)) 0 1px,
      transparent 1px 18px
    ),
    var(--ink-2);
  color: color-mix(in oklab, var(--bg) 60%, transparent);
}
.placeholder span {
  display: inline-block; padding: 6px 10px;
  background: color-mix(in oklab, var(--bg) 80%, transparent);
  border: .5px solid var(--rule);
  max-width: 80%;
  line-height: 1.6;
}

/* image system ------------------------------------------------------ */
.img-wrap {
  position: relative;
  width: 100%; height: 100%;
  overflow: hidden;
  background: var(--bg-2);
}
.img-wrap .img-el {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  transition: transform 1.4s var(--ease-out), opacity .6s var(--ease);
}
.img-wrap .img-el.fit-cover   { object-fit: cover; object-position: center; }
.img-wrap .img-el.fit-contain { object-fit: contain; object-position: center; }
.img-wrap .grad-plate {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}
.img-wrap .img-caption {
  position: absolute; left: 14px; bottom: 12px;
  z-index: 3;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(255,255,255,.75);
  text-shadow: 0 1px 4px rgba(0,0,0,.4);
  pointer-events: none;
}
/* image caption hidden on small inset images (plates, paired details) — only
   show on hero stages where caption is part of the design */
.section-head .plate .img-caption,
.case-mini .img-caption,
.ind-figure-circle .img-caption,
.case-article .ca-img-pair .img-caption { display: none; }
.img-fb { width: 100%; height: 100%; overflow: hidden; }
.img-fb .grad-plate { width: 100%; height: 100%; display: block; }

/* reveal ------------------------------------------------------------ */
/* opacity stays at 1 always (transition throttling in hidden tabs can leave
   opacity:0→1 transitions stuck at 0). Animate transform only. */
.reveal { transform: translateY(20px); transition: transform 1s var(--ease); }
.reveal.in { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-soft, .char-stagger > span {
    transform: none !important; transition: none !important;
  }
  .aroma-puff, .mist-band { animation: none !important; }
}

/* feature strip ----------------------------------------------------- */
.feature-strip {
  border-top: .5px solid var(--rule-soft); border-bottom: .5px solid var(--rule-soft);
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--bg);
}
.feature-strip .fcell {
  padding: 28px 32px; border-left: .5px solid var(--rule-soft);
  display: flex; flex-direction: column; gap: 8px;
}
.feature-strip .fcell:first-child { border-left: 0; }
.feature-strip .fcell .k { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; color: var(--muted); text-transform: uppercase; }
.feature-strip .fcell .v {
  font-family: var(--display-jp); font-size: 18px; letter-spacing: .02em; line-height: 1.5;
}
.feature-strip .fcell .v em {
  font-family: var(--display-en); font-style: normal; color: var(--accent);
}
@media (max-width: 900px) {
  .feature-strip { grid-template-columns: repeat(2, 1fr); }
  .feature-strip .fcell:nth-child(3) { border-left: 0; }
}

/* ticker / marquee -------------------------------------------------- */
.ticker {
  overflow: hidden; padding: clamp(28px, 4vw, 56px) 0;
  border-top: .5px solid var(--rule-soft); border-bottom: .5px solid var(--rule-soft);
  background: var(--bg);
  user-select: none;
}
.ticker-track {
  display: inline-flex; gap: 0;
  white-space: nowrap;
  cursor: grab;
  will-change: transform;
  touch-action: pan-y;
}
.ticker-item {
  display: inline-flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 0 clamp(28px, 3vw, 56px);
  position: relative;
  color: var(--ink-2);
}
.ticker-icon-frame {
  display: inline-flex; align-items: center; justify-content: center;
  width: clamp(56px, 6vw, 76px);
  height: clamp(56px, 6vw, 76px);
  border-radius: 50%;
  background: color-mix(in oklab, var(--moss) 6%, var(--bg));
  border: .5px solid color-mix(in oklab, var(--moss) 22%, transparent);
  transition: background .35s var(--ease), border-color .35s var(--ease), transform .5s var(--ease-out);
}
.ticker-item:hover .ticker-icon-frame {
  background: color-mix(in oklab, var(--moss) 14%, var(--bg));
  border-color: var(--moss);
  transform: translateY(-2px);
}
.ticker-icon {
  width: clamp(28px, 2.6vw, 36px);
  height: clamp(28px, 2.6vw, 36px);
  color: var(--moss);
  opacity: .9;
}
.ticker-label {
  font-family: var(--display-jp); font-size: 12.5px;
  letter-spacing: .04em; font-weight: 400;
  color: var(--muted);
  text-align: center;
}
.ticker-item::after {
  content: ""; position: absolute; right: 0; top: 24px;
  width: 3px; height: 3px; border-radius: 50%;
  background: color-mix(in oklab, var(--moss) 35%, transparent);
}
.ticker-item:last-child::after { display: none; }
.ticker-track:hover { /* paused via JS hover flag */ }
/* ─────────────────────────────────────────────────────────────────────
   Industries — magazine spread (alternating asymmetric rows)
   ───────────────────────────────────────────────────────────────────── */
.industries-section { padding-bottom: clamp(40px, 8vw, 120px); }

.ind-spreads {
  display: flex; flex-direction: column;
  gap: clamp(80px, 12vw, 180px);
  margin-top: clamp(40px, 6vw, 96px);
}
.ind-spread {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(36px, 5vw, 96px);
  align-items: center;
  min-height: 480px;
  overflow: hidden;
}
.ind-spread.flip { grid-template-columns: 1fr 1.05fr; }
.ind-spread.flip .ind-figure { order: 2; }
.ind-spread.flip .ind-text   { order: 1; }

/* slow drift animation for the breeze arcs — like air currents */
@keyframes breezeDrift {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(-12px); }
}
.ind-arc, .area-arc {
  position: absolute;
  pointer-events: none;
  animation: breezeDrift 14s ease-in-out infinite;
}
.ind-arc {
  width: 70%; height: 90%;
  right: -10%; top: 5%;
}
.ind-spread.flip .ind-arc {
  right: auto; left: -10%; transform: scaleX(-1);
}
.section.area .area-arc {
  right: 0; top: 5%;
  width: 70%; height: 90%;
  opacity: .75;
}

/* figure block */
.ind-figure {
  position: relative;
  aspect-ratio: 4/5;
  z-index: 1;
}
.ind-figure-inner {
  position: relative;
  width: 100%; height: 100%;
  overflow: hidden;
}
/* offset frame — pulled away from photo (the "後一工夫") */
.ind-figure::before {
  content: "";
  position: absolute;
  inset: 18px -18px -18px 18px;
  border: 1px solid color-mix(in oklab, var(--moss) 28%, transparent);
  z-index: 0;
  pointer-events: none;
  transition: inset .6s var(--ease-out);
}
.ind-spread.flip .ind-figure::before { inset: 18px 18px -18px -18px; }
.ind-spread:hover .ind-figure::before { inset: 24px -24px -24px 24px; }
.ind-spread.flip:hover .ind-figure::before { inset: 24px 24px -24px -24px; }

/* vertical caption rail */
.ind-figure-rail {
  position: absolute;
  top: 0; right: -36px;
  height: 100%;
  display: flex; flex-direction: column; justify-content: space-between;
  writing-mode: vertical-rl;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--muted);
  z-index: 2;
}
.ind-spread.flip .ind-figure-rail { right: auto; left: -36px; }

/* huge edge number */
.ind-figure-num {
  position: absolute;
  top: -28px; left: -8px;
  font-family: var(--en-base); font-weight: 300;
  font-size: clamp(80px, 11vw, 168px); line-height: 1;
  color: color-mix(in oklab, var(--moss) 28%, var(--bg));
  letter-spacing: -.04em;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}
.ind-spread.flip .ind-figure-num { left: auto; right: -8px; }

/* small circular vignette overlapping main image */
.ind-figure-circle {
  position: absolute;
  bottom: -36px; right: -36px;
  width: 32%; aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  border: 6px solid var(--bg);
  box-shadow: 0 12px 40px rgba(20, 25, 18, .14);
  z-index: 3;
  transition: transform .6s var(--ease-out);
}
.ind-figure-circle .img-wrap { border-radius: 50%; }
.ind-spread.flip .ind-figure-circle { right: auto; left: -36px; }
.ind-spread:hover .ind-figure-circle { transform: translate(8px, 8px); }
.ind-spread.flip:hover .ind-figure-circle { transform: translate(-8px, 8px); }

/* text block */
.ind-text {
  position: relative; z-index: 1;
  max-width: 52ch;
}
.ind-text-eyebrow {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 22px;
}
.ind-text-eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--moss); }
.ind-text h3 {
  margin: 0; font-family: var(--display-jp); font-weight: 500;
  font-size: clamp(24px, 2.8vw, 36px); line-height: 1.5; letter-spacing: .025em;
  color: var(--ink); text-wrap: balance;
  max-width: 20ch;
}
.ind-text .ind-quote {
  margin: 24px 0 26px;
  padding: 18px 0 18px 24px;
  border-left: 1px solid var(--moss);
  font-family: var(--display-jp); font-weight: 400;
  font-size: 16px; line-height: 1.95; color: var(--ink-2);
  letter-spacing: .03em;
}
.ind-text .ind-desc {
  font-size: 14px; line-height: 2; color: var(--ink-2);
  max-width: 46ch;
}
.ind-text .ind-types {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 22px;
}

/* ─────────────────────────────────────────────────────────────────────
   Area — new poetic layout (prefecture cloud + remote subscription)
   ───────────────────────────────────────────────────────────────────── */
.section.area {
  background:
    radial-gradient(60% 60% at 80% 30%, color-mix(in oklab, var(--moss) 5%, transparent) 0%, transparent 70%),
    var(--bg);
  position: relative; overflow: hidden;
}

.area-layout {
  display: grid; grid-template-columns: 1fr 1.4fr;
  gap: clamp(40px, 6vw, 120px);
  margin-top: clamp(40px, 6vw, 80px);
  align-items: start;
}

/* prefecture cloud */
.area-prefs { position: relative; }
.area-prefs-h {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--moss);
  margin-bottom: 28px;
}
.area-prefs-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap;
  gap: 8px 14px;
  max-width: 380px;
}
.area-prefs-list li {
  font-family: var(--display-jp); font-weight: 500;
  font-size: clamp(18px, 1.8vw, 24px); letter-spacing: .04em;
  color: var(--ink-2);
  padding: 2px 0;
  transition: color .35s var(--ease);
  position: relative;
}
.area-prefs-list li:not(:last-child)::after {
  content: ""; display: inline-block;
  width: 4px; height: 4px; border-radius: 50%;
  background: color-mix(in oklab, var(--moss) 40%, transparent);
  margin-left: 14px; vertical-align: middle;
}
.area-prefs-list li.primary { color: var(--moss); font-weight: 700; }
.area-prefs-list li.primary::before {
  content: "—"; margin-right: 6px; color: var(--moss);
}
.area-prefs-list li.islands { color: var(--ink-2); }
.area-prefs-list li.islands::before {
  content: "✦"; margin-right: 5px;
  font-size: .8em; color: var(--moss);
  opacity: .7;
}
.area-prefs-note {
  display: flex; align-items: flex-start; gap: 12px;
  margin-top: 36px; padding-top: 22px;
  border-top: .5px solid var(--rule-soft);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted);
  line-height: 1.9;
}
.area-prefs-note .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--moss); flex: 0 0 auto; margin-top: 7px;
}

/* remote subscription highlight */
.area-remote { position: relative; }
.area-remote-tag {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--moss);
  margin-bottom: 18px;
}
.area-remote-card {
  position: relative;
  display: grid; grid-template-columns: 280px 1fr;
  gap: clamp(28px, 4vw, 64px);
  padding: clamp(28px, 4vw, 56px);
  background: var(--bg-soft);
  border: 1px solid var(--rule-soft);
  align-items: center;
}
.area-remote-card::before {
  /* corner curve cut */
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 56px; height: 56px;
  background: var(--bg);
  border-bottom-left-radius: 100%;
  border-left: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
}
.area-remote-circle {
  position: relative;
  aspect-ratio: 1;
}
.area-remote-circle svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  animation: slowSpin 64s linear infinite;
  z-index: 2;
}
@keyframes slowSpin {
  to { transform: rotate(360deg); }
}
.area-remote-circle::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 56%; aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(circle, var(--moss) 0%, var(--moss-deep) 100%);
  box-shadow:
    0 0 0 12px color-mix(in oklab, var(--moss) 18%, transparent),
    0 0 0 24px color-mix(in oklab, var(--moss) 8%, transparent),
    0 0 0 36px color-mix(in oklab, var(--moss) 4%, transparent);
  z-index: 1;
}
.area-remote-body h3 {
  margin: 0 0 18px;
  font-family: var(--display-jp); font-weight: 500;
  font-size: clamp(22px, 2.4vw, 32px); line-height: 1.55; letter-spacing: .025em;
  color: var(--ink);
}
.area-remote-body h3 small {
  display: block; font-family: var(--en-base);
  font-size: 13px; color: var(--moss); margin-top: 6px;
  letter-spacing: .04em; font-weight: 400;
}
.area-remote-body p {
  margin: 0 0 24px;
  font-size: 14px; line-height: 2; color: var(--ink-2);
  max-width: 44ch;
}
.area-remote-body em {
  color: var(--moss); font-style: normal; font-weight: 700;
}
.area-remote-cta {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 12px 22px;
  background: var(--moss); color: var(--bg);
  border-radius: 999px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; font-weight: 500;
  transition: background .35s var(--ease), padding .35s var(--ease);
}
.area-remote-cta:hover { background: var(--moss-deep); padding-right: 28px; }

/* Area — coming soon islands + Coming Soon badge */
.area-prefs-h.soon {
  margin-top: 40px;
  color: color-mix(in oklab, var(--moss) 55%, var(--muted));
}
.area-prefs-list.islands li {
  color: color-mix(in oklab, var(--ink-2) 55%, var(--muted));
  font-weight: 400;
  position: relative;
}
.area-prefs-list.islands li::before {
  content: "✦"; margin-right: 6px;
  font-size: .85em; color: var(--moss);
  opacity: .55;
}
.area-prefs-cta {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 18px;
  padding: 8px 16px;
  border: 1px solid color-mix(in oklab, var(--moss) 35%, transparent);
  border-radius: 999px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--moss);
  transition: background .3s var(--ease), color .3s var(--ease);
}
.area-prefs-cta:hover { background: var(--moss); color: var(--bg); }

/* Remote service "coming soon" badge replaces turntable */
.area-remote-badge {
  position: relative;
  aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
}
.area-remote-badge svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 1;
  animation: organicDrift 18s ease-in-out infinite alternate;
}
@keyframes organicDrift {
  0%   { transform: rotate(-3deg) scale(1); }
  50%  { transform: rotate(2deg)  scale(1.02); }
  100% { transform: rotate(-1deg) scale(.99); }
}
.area-remote-badge .rb-label {
  position: relative; z-index: 2;
  font-family: var(--display-jp); font-weight: 500;
  font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1.3; letter-spacing: .06em;
  color: var(--moss); text-align: center;
  padding: 18% 0;
}

/* Services — soon state */
.svc-row.soon { opacity: .72; }
.svc-row.soon .svc-title small { color: color-mix(in oklab, var(--moss) 55%, var(--muted)); }
.svc-tag.soon {
  background: var(--moss); color: var(--bg);
  border-color: var(--moss);
}

/* ─────────────────────────────────────────────────────────────────────
   Cases — horizontal scroll showcase
   ───────────────────────────────────────────────────────────────────── */
.cases-showcase { padding-bottom: clamp(60px, 8vw, 120px); }

.cases-rail-wrap {
  margin-top: clamp(32px, 4vw, 56px);
}
.cases-rail-mark {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0 var(--gutter);
  margin-bottom: 24px;
  max-width: 1440px; margin-left: auto; margin-right: auto;
}

/* auto marquee — JS-driven (allows drag + auto on same track) */
.cases-marquee {
  overflow: hidden;
  position: relative;
  width: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  padding: 8px 0 24px;
  user-select: none;
}
.cases-marquee-track {
  display: inline-flex;
  gap: clamp(20px, 2.2vw, 32px);
  padding-left: var(--gutter);
  will-change: transform;
  cursor: grab;
  touch-action: pan-y;
}

.case-tile {
  flex: 0 0 clamp(260px, 26vw, 340px);
  display: flex; flex-direction: column;
  position: relative;
}
.case-tile-img {
  position: relative;
  aspect-ratio: 3/4;
  overflow: hidden;
  margin-bottom: 18px;
}
.case-tile-img::before {
  content: "";
  position: absolute;
  inset: 12px -12px -12px 12px;
  border: 1px solid color-mix(in oklab, var(--moss) 22%, transparent);
  z-index: 0;
  pointer-events: none;
  transition: inset .5s var(--ease-out);
}
.case-tile:hover .case-tile-img::before {
  inset: 18px -18px -18px 18px;
}
.case-tile-img .grad-plate {
  position: relative; z-index: 1;
  width: 100%; height: 100%;
}
.case-tile-soon {
  position: absolute;
  top: 14px; left: 14px;
  z-index: 3;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--bg);
  background: color-mix(in oklab, var(--moss-deep) 78%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  padding: 6px 10px;
  border-radius: 999px;
}
.case-tile-meta {
  display: flex; justify-content: space-between;
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted);
  margin-bottom: 10px;
}
.case-tile h3 {
  margin: 0; font-family: var(--display-jp); font-weight: 500;
  font-size: clamp(18px, 1.8vw, 22px); line-height: 1.5; letter-spacing: .025em;
  color: var(--ink); text-wrap: balance;
}
.case-tile-loc {
  margin-top: 6px;
  font-family: var(--en-base); font-size: 12.5px; letter-spacing: .03em;
  color: var(--moss);
}
.case-tile-foot {
  margin-top: 10px;
  display: flex; align-items: center; gap: 12px;
}
.case-tile-pict-frame {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: color-mix(in oklab, var(--moss) 8%, var(--bg));
  border: .5px solid color-mix(in oklab, var(--moss) 22%, transparent);
  color: var(--moss);
}
.case-tile-pict { width: 16px; height: 16px; }
.case-tile-foot .case-tile-loc {
  margin: 0;
  font-family: var(--display-jp);
  color: var(--ink-2);
  font-size: 12.5px;
  letter-spacing: .025em;
}

/* "and more" tail card */
.case-tile-more {
  flex: 0 0 clamp(280px, 26vw, 360px);
}
.case-tile-more-inner {
  position: relative;
  height: 100%;
  display: flex; flex-direction: column; justify-content: center; gap: 16px;
  padding: 32px 28px;
  background: var(--bg-soft);
  border: 1px solid var(--rule-soft);
  aspect-ratio: 3/4;
}
.case-tile-more-inner::before {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 44px; height: 44px;
  background: var(--bg);
  border-bottom-left-radius: 100%;
  border-left: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
}
.case-tile-more h3 {
  margin: 0; font-family: var(--display-jp); font-weight: 500;
  font-size: clamp(18px, 1.8vw, 22px); line-height: 1.55; letter-spacing: .025em;
  color: var(--ink); text-wrap: balance;
}
.case-tile-more p {
  margin: 0; font-size: 13px; line-height: 1.95; color: var(--ink-2);
}
.case-tile-more-cta {
  margin-top: auto;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--moss);
  padding-bottom: 4px; border-bottom: 1px solid var(--moss);
  align-self: flex-start;
  transition: padding-right .3s var(--ease);
}
.case-tile-more-cta:hover { padding-right: 8px; }

@media (max-width: 720px) {
  .case-tile { flex-basis: 70vw; }
  .case-tile-more { flex-basis: 80vw; }
  .case-tile-img::before, .case-tile:hover .case-tile-img::before { inset: 8px -8px -8px 8px; }
}
.case-feature {
  position: relative;
  display: grid; grid-template-columns: 1.2fr 1fr;
  gap: clamp(36px, 5vw, 80px);
  align-items: center;
  padding: clamp(40px, 5vw, 60px) 0;
  cursor: pointer;
  margin-top: 28px;
}
.case-feature-arc {
  position: absolute; left: 0; right: 0; bottom: 0;
  width: 100%; height: 60%;
  pointer-events: none;
}
.case-feature-img {
  position: relative;
  aspect-ratio: 5/4;
  overflow: hidden;
  z-index: 1;
}
.case-feature-img::after {
  content: "";
  position: absolute;
  left: -12px; top: -12px; right: 12px; bottom: 12px;
  border: 1px solid color-mix(in oklab, var(--moss) 25%, transparent);
  pointer-events: none;
  transition: inset .5s var(--ease);
}
.case-feature:hover .case-feature-img::after { left: -18px; top: -18px; right: 6px; bottom: 6px; }
.case-feature-num {
  position: absolute;
  top: -52px; right: -8px;
  font-family: var(--en-base); font-weight: 300;
  font-size: clamp(56px, 7vw, 96px); line-height: 1;
  color: color-mix(in oklab, var(--moss) 30%, var(--bg));
  letter-spacing: -.03em;
  pointer-events: none;
}
.case-feature-text { z-index: 2; position: relative; }
.case-feature-text h3 {
  margin: 14px 0 14px;
  font-family: var(--display-jp); font-weight: 500;
  font-size: clamp(24px, 2.8vw, 36px); line-height: 1.5; letter-spacing: .025em;
  color: var(--ink); text-wrap: balance;
  max-width: 20ch;
}
.case-feature-text .case-feature-excerpt {
  margin: 18px 0 24px;
  font-size: 14.5px; line-height: 2; color: var(--ink-2);
  max-width: 50ch;
}
.case-feature-read {
  font-family: var(--mono); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--moss);
  display: inline-flex; align-items: center; gap: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--moss);
  transition: gap .35s var(--ease);
}
.case-feature:hover .case-feature-read { gap: 14px; }

.case-others {
  display: grid; grid-template-columns: 1fr 1.4fr;
  gap: clamp(28px, 4vw, 64px);
  margin-top: clamp(64px, 8vw, 120px);
  align-items: start;
}
.case-mini { cursor: pointer; position: relative; transition: transform .5s var(--ease-out); }
.case-mini:hover { transform: translateY(-3px); }
.case-mini-img { position: relative; overflow: hidden; margin-bottom: 18px; }
.case-mini.portrait .case-mini-img { aspect-ratio: 3/4; }
.case-mini.landscape .case-mini-img { aspect-ratio: 4/3; }
.case-mini-meta {
  display: flex; gap: 14px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted);
  margin-bottom: 10px;
}
.case-mini h3 {
  margin: 0; font-family: var(--display-jp); font-weight: 500;
  font-size: clamp(18px, 1.8vw, 22px); line-height: 1.55; letter-spacing: .025em;
  color: var(--ink); text-wrap: balance;
}
.case-mini .cc-loc {
  font-family: var(--en-base); color: var(--moss);
  font-size: 13px; margin-top: 4px; letter-spacing: .03em;
}
.case-mini .cc-excerpt {
  margin: 16px 0 12px;
  font-size: 13.5px; line-height: 1.95; color: var(--ink-2);
}

/* ─────────────────────────────────────────────────────────────────────
   Responsive overrides for new layouts
   ───────────────────────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .ind-spread, .ind-spread.flip { grid-template-columns: 1fr; gap: 36px; }
  .ind-spread.flip .ind-figure { order: 1; }
  .ind-spread.flip .ind-text { order: 2; }
  .ind-spread .ind-arc { width: 80%; height: 60%; }
  .ind-figure-num { font-size: clamp(64px, 14vw, 100px); }
  .ind-figure-circle { width: 26%; right: -16px; bottom: -16px; }
  .ind-spread.flip .ind-figure-circle { left: -16px; }
  .ind-figure-rail { right: -22px; }
  .ind-spread.flip .ind-figure-rail { left: -22px; }
  .area-layout { grid-template-columns: 1fr; gap: 48px; }
  .area-remote-card { grid-template-columns: 200px 1fr; }
  .case-feature { grid-template-columns: 1fr; gap: 28px; }
  .case-feature-img { aspect-ratio: 16/10; }
  .case-feature-num { font-size: clamp(48px, 12vw, 72px); top: -36px; }
  .case-others { grid-template-columns: 1fr 1fr; gap: 24px; }
  .case-mini.portrait .case-mini-img,
  .case-mini.landscape .case-mini-img { aspect-ratio: 4/3; }
}
@media (max-width: 720px) {
  .ind-spreads { gap: 80px; }
  .ind-figure-num { top: -16px; }
  .ind-figure-rail { display: none; }
  .ind-figure::before, .ind-spread.flip .ind-figure::before { inset: 12px -12px -12px 12px; }
  .ind-figure-circle { width: 30%; }
  .area-remote-card { grid-template-columns: 1fr; padding: 28px; gap: 24px; }
  .area-remote-circle { max-width: 200px; margin: 0 auto; }
  .area-remote-card::before { width: 36px; height: 36px; }
  .case-others { grid-template-columns: 1fr; }
}
.section.area {
  background:
    radial-gradient(50% 70% at 50% 0%, color-mix(in oklab, var(--moss) 7%, transparent) 0%, transparent 70%),
    var(--bg);
  border-top: .5px solid var(--rule-soft);
  border-bottom: .5px solid var(--rule-soft);
}
.area-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: clamp(24px, 4vw, 48px);
  border-top: .5px solid var(--rule);
  border-bottom: .5px solid var(--rule);
}
.area-card {
  padding: 36px 32px 40px;
  border-left: .5px solid var(--rule-soft);
  display: flex; flex-direction: column; gap: 16px;
  position: relative;
  transition: background .5s var(--ease);
}
.area-card:first-child { border-left: 0; }
.area-card:hover { background: color-mix(in oklab, var(--moss) 4%, transparent); }
.area-h {
  display: flex; align-items: center; justify-content: space-between;
}
.area-n {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--moss);
}
.area-tag {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--bg);
  background: var(--moss);
  padding: 4px 10px; border-radius: 999px;
}
.area-card h3 {
  margin: 0; font-family: var(--display-jp); font-weight: 500;
  font-size: 22px; line-height: 1.45; letter-spacing: .025em;
}
.area-card h3 small {
  display: block; font-family: var(--en-base);
  font-size: 12.5px; color: var(--moss); margin-top: 4px;
  letter-spacing: .04em; font-weight: 400;
}
.area-card .area-desc {
  font-size: 13.5px; line-height: 1.95; color: var(--ink-2);
}
.area-card .area-keys {
  margin: 8px 0 0; padding: 16px 0 0;
  border-top: .5px solid var(--rule-soft);
  display: grid; grid-template-columns: auto 1fr;
  column-gap: 16px; row-gap: 10px;
}
.area-card .area-keys dt {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted);
  align-self: center;
}
.area-card .area-keys dd {
  margin: 0;
  font-family: var(--display-jp); font-size: 13.5px;
  color: var(--ink); letter-spacing: .025em; line-height: 1.5;
}
.area-card .area-note {
  margin-top: auto; padding-top: 16px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted);
}
@media (max-width: 900px) {
  .area-grid { grid-template-columns: 1fr; }
  .area-card { border-left: 0; border-top: .5px solid var(--rule-soft); }
  .area-card:first-child { border-top: 0; }
}

@keyframes tickerScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ─────────────────────────────────────────────────────────────────────
   Motion + atmosphere — aroma diffuse, forest breeze, half-fade
   ───────────────────────────────────────────────────────────────────── */

/* slow gentle horizontal drift like a forest breeze */
@keyframes breeze {
  0%, 100% { transform: translateX(-6px); }
  50%      { transform: translateX(6px); }
}

/* aroma diffuse — a soft radial blob that expands and fades */
@keyframes aromaPuff {
  0%   { transform: translate(-50%, -50%) scale(.1); opacity: 0; }
  20%  { opacity: .7; }
  100% { transform: translate(-50%, -50%) scale(8); opacity: 0; }
}
.aroma-puff {
  position: absolute; pointer-events: none;
  width: 60px; height: 60px; border-radius: 50%;
  background: radial-gradient(circle,
    color-mix(in oklab, var(--moss) 55%, transparent) 0%,
    color-mix(in oklab, var(--moss) 18%, transparent) 35%,
    transparent 70%);
  filter: blur(8px);
  animation: aromaPuff 11s var(--ease-out) infinite;
}

/* gradient half-fade mask — text appears half-revealed */
.fade-half {
  background: linear-gradient(180deg,
    var(--ink) 0%,
    var(--ink) 45%,
    color-mix(in oklab, var(--ink) 25%, transparent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.fade-half.accent {
  background: linear-gradient(180deg,
    var(--moss) 0%,
    var(--moss) 45%,
    color-mix(in oklab, var(--moss) 20%, transparent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* reveal — stronger, with translate on first viewport entry. opacity stays 1. */
.reveal-soft { transform: translateY(24px); transition: transform 1.2s var(--ease-out); }
.reveal-soft.in { transform: none; }

/* staggered headline reveal — character-level translate up */
.char-stagger > span {
  display: inline-block;
  transform: translateY(0.5em);
  transition: transform .9s var(--ease-out);
}
.char-stagger.in > span { transform: none; }

/* mist drift overlay — pure CSS soft horizontal pass */
.mist-band {
  position: absolute; inset: -10% -20%;
  pointer-events: none;
  background:
    radial-gradient(60% 80% at 20% 30%, color-mix(in oklab, var(--moss) 8%, transparent) 0%, transparent 60%),
    radial-gradient(40% 60% at 80% 70%, color-mix(in oklab, var(--accent-2) 6%, transparent) 0%, transparent 60%);
  animation: breeze 18s var(--ease) infinite;
  z-index: 0;
}

/* ─── Moss-band contrast section (heavy moss bg, light text) ─── */
.section.moss-band {
  background: var(--moss-deep);
  color: var(--bg);
  position: relative; overflow: hidden;
}
.section.moss-band::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(50% 60% at 80% 20%, color-mix(in oklab, var(--moss) 80%, transparent) 0%, transparent 70%),
    radial-gradient(40% 50% at 10% 80%, color-mix(in oklab, #1f2818 70%, transparent) 0%, transparent 70%);
  pointer-events: none; opacity: .55;
}
.section.moss-band .container { position: relative; z-index: 2; }
.section.moss-band .section-head h2,
.section.moss-band h3,
.section.moss-band .marginalia { color: var(--bg); }
.section.moss-band .section-head .lead {
  color: color-mix(in oklab, var(--bg) 78%, transparent);
}
.section.moss-band .section-head .label,
.section.moss-band .section-head .num,
.section.moss-band .marginalia {
  color: color-mix(in oklab, var(--bg) 72%, transparent);
}
.section.moss-band .marginalia { border-top-color: color-mix(in oklab, var(--bg) 18%, transparent); }
.section.moss-band .marginalia .dot { background: var(--highlight); }
.section.moss-band .section-head .num { color: var(--highlight); }
.section.moss-band .section-head .plate .pframe {
  background: color-mix(in oklab, var(--bg) 8%, transparent);
}
.section.moss-band .placeholder {
  background:
    repeating-linear-gradient(135deg,
      color-mix(in oklab, var(--bg) 18%, transparent) 0 1px,
      transparent 1px 18px),
    color-mix(in oklab, var(--bg) 6%, transparent);
  color: color-mix(in oklab, var(--bg) 60%, transparent);
}
.section.moss-band .placeholder span {
  background: color-mix(in oklab, var(--bg) 8%, transparent);
  border-color: color-mix(in oklab, var(--bg) 18%, transparent);
  color: color-mix(in oklab, var(--bg) 78%, transparent);
}

/* ─── Statement (large quiet quote band) ─── */
.statement {
  padding: clamp(80px, 12vw, 160px) 0;
  position: relative;
  overflow: hidden;
  background: var(--bg-soft);
  border-top: .5px solid var(--rule-soft);
  border-bottom: .5px solid var(--rule-soft);
}
.statement .container {
  display: grid; grid-template-columns: 1fr 2fr; gap: clamp(20px, 4vw, 80px);
  align-items: start;
}
.statement .cap {
  color: var(--moss);
}
.statement .quote {
  font-family: var(--display-jp); font-weight: 500;
  font-size: clamp(22px, 2.6vw, 38px); line-height: 1.85; letter-spacing: .03em;
  color: var(--ink); margin: 0;
  max-width: 28ch; text-wrap: balance;
}
.statement .quote em {
  color: var(--moss); font-style: normal;
  font-weight: 700;
}
.statement .byline {
  margin-top: 36px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  color: var(--muted); text-transform: uppercase;
}
.statement .puff-anchor {
  position: absolute; left: 18%; top: 30%;
}
.statement .puff-anchor .aroma-puff { animation-delay: 2s; }
.statement .puff-anchor.right { left: auto; right: 14%; top: 60%; }
.statement .puff-anchor.right .aroma-puff { animation-delay: 6s; }
@media (max-width: 820px) {
  .statement .container { grid-template-columns: 1fr; }
}

/* ─── 冨迫商店 EC feature ─── */
.tomisako {
  padding: clamp(80px, 10vw, 140px) 0;
  background: var(--bg);
  position: relative; overflow: hidden;
}
.tomisako .container {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 96px);
  align-items: center;
}
.tomisako .left { position: relative; }
.tomisako .frame {
  position: relative;
  aspect-ratio: 4/5;
  background: var(--bg-2);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.tomisako .frame::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(60% 70% at 50% 50%, color-mix(in oklab, var(--moss) 12%, transparent), transparent 70%),
    repeating-linear-gradient(135deg,
      color-mix(in oklab, var(--moss) 6%, transparent) 0 1px,
      transparent 1px 20px);
}
.tomisako .frame img {
  position: relative; z-index: 2;
  width: 56%; height: auto; max-width: 360px;
}
.tomisako .frame .caption {
  position: absolute; left: 16px; bottom: 14px; z-index: 3;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em;
  color: var(--moss); text-transform: uppercase;
}
.tomisako .right .label {
  font-family: var(--mono); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--moss); margin-bottom: 22px;
  display: inline-flex; align-items: center; gap: 12px;
}
.tomisako .right .label::before { content: ""; display: inline-block; width: 24px; height: 1px; background: var(--moss); }
.tomisako .right h2 {
  font-family: var(--display-jp); font-weight: 500;
  font-size: clamp(26px, 3vw, 42px); line-height: 1.55; letter-spacing: .025em;
  margin: 0 0 24px; color: var(--ink);
  text-wrap: balance; max-width: 18ch;
}
.tomisako .right .body {
  font-size: 14.5px; line-height: 2; color: var(--ink-2); max-width: 50ch;
}
.tomisako .right .lineup {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 16px; margin: 36px 0;
}
.tomisako .right .lineup .l-card {
  border: .5px solid var(--rule-soft);
  background: var(--bg-soft);
  padding: 18px 16px;
}
.tomisako .right .lineup .l-card .lt {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--moss); margin-bottom: 10px;
}
.tomisako .right .lineup .l-card .ld {
  font-family: var(--display-jp); font-size: 15px; letter-spacing: .02em; line-height: 1.55; color: var(--ink);
}
.tomisako .ec-cta {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 16px 24px;
  background: var(--moss); color: var(--bg);
  border-radius: 999px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; font-weight: 500;
  transition: background .35s var(--ease), padding .35s var(--ease);
  text-decoration: none;
  cursor: pointer; border: 0;
}
.ec-cta:hover { background: var(--moss-deep); padding-right: 32px; }
.ec-cta .ec-arr {
  display: inline-block; width: 12px; height: 12px; position: relative;
}
.ec-cta .ec-arr::before {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 12px; height: 1px; background: currentColor;
  transform: translateY(-50%);
}
.ec-cta .ec-arr::after {
  content: ""; position: absolute; right: 0; top: 50%;
  width: 6px; height: 6px; border-top: 1px solid currentColor; border-right: 1px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}
@media (max-width: 900px) {
  .tomisako .container { grid-template-columns: 1fr; }
  .tomisako .right .lineup { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
  .tomisako .right .lineup { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────────────────────────────────────
   Responsive — phone & tablet
   ───────────────────────────────────────────────────────────────────── */

@media (max-width: 1100px) {
  :root { --gutter: clamp(20px, 4vw, 48px); }
}

/* tablet */
@media (max-width: 980px) {
  .nav-links { gap: 18px; }
  .nav-link { font-size: 10px; letter-spacing: .12em; }
  .feature-strip { grid-template-columns: repeat(2, 1fr); }
  .feature-strip .fcell:nth-child(3) { border-left: 0; border-top: .5px solid var(--rule-soft); }
  .feature-strip .fcell:nth-child(4) { border-top: .5px solid var(--rule-soft); }
  .section-head { grid-template-columns: 1fr; gap: 24px; }
  .section-head .plate { max-width: 220px; margin-top: 8px; }
  .section-head .plate.landscape { max-width: 280px; }
}

/* phone */
@media (max-width: 720px) {
  body { font-size: 14.5px; line-height: 1.9; letter-spacing: .025em; }
  :root { --gutter: 18px; }

  /* nav: condense to logo + menu trigger */
  .nav { padding: 14px var(--gutter); }
  .nav-links { display: none; }
  .nav-brand img.logo { height: 22px; }
  .nav.scrolled .nav-brand img.logo { height: 20px; }
  .nav-brand .divider, .nav-brand small { display: none; }
  .nav-cta { padding: 8px 14px; font-size: 9.5px; }

  /* hero */
  .hero { min-height: auto; }
  .hero-content { padding: 110px var(--gutter) 60px; }
  .hero-foot { padding: 0 var(--gutter) 20px; font-size: 9px; gap: 8px; flex-wrap: wrap; }
  .hero-grid-marks { padding: 90px var(--gutter) 28px; font-size: 8.5px; gap: 12px; }
  .hero-grid-marks .row { flex-wrap: wrap; gap: 8px; }

  /* hero variants */
  .h-cinema .stage { aspect-ratio: 4/5; }
  .h-cinema h1 { font-size: clamp(26px, 8.5vw, 36px); line-height: 1.4; }
  .h-cinema .overlay { padding: 0 var(--gutter); bottom: 6%; }
  .h-cinema .sub { font-size: 13.5px; }

  .h-editorial { grid-template-columns: 1fr; gap: 24px; }
  .h-editorial .left h1 { font-size: clamp(28px, 8.5vw, 38px); line-height: 1.4; max-width: 100%; }
  .h-editorial .right .img-card { aspect-ratio: 4/5; }

  .h-vertical { flex-direction: column; gap: 24px; align-items: stretch; }
  .h-vertical .col-img { max-width: 100%; aspect-ratio: 4/3; min-height: 280px; }
  .h-vertical .col-tategaki { justify-content: flex-start; padding: 8px 0; }
  .h-vertical .col-tategaki h1 {
    writing-mode: horizontal-tb;
    font-size: clamp(28px, 7.5vw, 36px); line-height: 1.5; letter-spacing: .04em;
    max-height: none;
  }
  .h-vertical .col-side { max-width: 100%; }

  .h-type h1 { font-size: clamp(36px, 11vw, 56px); line-height: 1.2; }
  .h-type .pre { margin-bottom: 24px; font-size: 9.5px; }
  .h-type .sub { font-size: 13.5px; }

  /* sections */
  .section { padding: 64px 0; }
  .section-head h2 { font-size: clamp(22px, 5.4vw, 28px); line-height: 1.5; }
  .section-head .num { font-size: 30px; }
  .section-head .label { font-size: 10px; letter-spacing: .14em; }
  .section-head .lead { font-size: 13.5px; line-height: 1.9; }
  .section-head .plate, .section-head .plate.landscape { max-width: 180px; }

  /* feature-strip */
  .feature-strip { grid-template-columns: 1fr; }
  .feature-strip .fcell { border-left: 0; border-top: .5px solid var(--rule-soft); padding: 22px var(--gutter); }
  .feature-strip .fcell:first-child { border-top: 0; }

  /* philosophy */
  .philo-row { grid-template-columns: 1fr; gap: 10px; padding: 28px 0; }
  .philo-row .n { font-size: 10px; }
  .philo-row h3 { font-size: 18px; }

  /* services */
  .svc-row {
    grid-template-columns: 50px 1fr;
    gap: 12px;
    padding: 24px 0;
    align-items: start;
  }
  .svc-row .svc-n { font-size: 20px; }
  .svc-row .svc-title { font-size: 16px; }
  .svc-row .svc-desc, .svc-row .svc-tags { grid-column: 2 / -1; }
  .svc-row .svc-tags { justify-content: flex-start; margin-top: 4px; }
  .svc-row:hover { padding-left: 8px; }

  /* industries */
  .industries-grid { grid-template-columns: 1fr; }
  .ind-card { border-left: 0; border-top: .5px solid var(--rule-soft); min-height: 0; padding: 36px var(--gutter); }
  .ind-card:first-child { border-top: 0; }
  .ind-card .ind-img { aspect-ratio: 16/9; }
  .ind-card h3 { font-size: 19px; }

  /* process */
  .proc-track { grid-template-columns: repeat(2, 1fr); }
  .proc-step { padding: 22px 14px 26px 0; }
  .proc-step:nth-child(2n) { border-right: 0; }
  .proc-step:nth-child(-n+6) { border-bottom: .5px solid var(--rule-soft); }
  .proc-step .pt { font-size: 14px; }
  .proc-step .pd { font-size: 12px; }

  /* area */
  .area-grid { grid-template-columns: 1fr; }
  .area-card { border-left: 0; border-top: .5px solid var(--rule-soft); padding: 28px var(--gutter); }
  .area-card:first-child { border-top: 0; }
  .area-card h3 { font-size: 19px; }

  /* statement */
  .statement .container { grid-template-columns: 1fr; gap: 18px; }
  .statement .quote { font-size: clamp(20px, 5.6vw, 26px); line-height: 1.75; }

  /* tomisako */
  .tomisako { padding: 64px 0; }
  .tomisako .container { grid-template-columns: 1fr; gap: 28px; }
  .tomisako .frame { aspect-ratio: 4/3; }
  .tomisako .frame img { width: 50%; max-width: 240px; }
  .tomisako .right h2 { font-size: clamp(22px, 5.4vw, 28px); line-height: 1.5; max-width: 100%; }
  .tomisako .right .body { font-size: 13.5px; }
  .tomisako .right .lineup { grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 24px 0; }
  .tomisako .right .lineup .l-card { padding: 14px 12px; }
  .tomisako .right .lineup .l-card .ld { font-size: 13px; }
  .ec-cta { padding: 14px 18px; font-size: 10px; }

  /* cases */
  .cases-head { gap: 14px; }
  .cases-filter { flex-wrap: wrap; }
  .cases-filter button { padding: 6px 10px; font-size: 9.5px; }
  .cases-grid { gap: 28px 16px; }
  .case-card.feat, .case-card.std { grid-column: span 12; }
  .case-card h3 { font-size: 18px; }
  .case-card.feat h3 { font-size: 21px; }
  .case-card .cc-img { aspect-ratio: 16/10; }

  /* case overlay */
  .case-overlay-bar { padding: 12px var(--gutter); }
  .case-article { padding: 40px var(--gutter) 80px; }
  .case-article .ca-head { grid-template-columns: 1fr; gap: 24px; margin-bottom: 32px; padding-bottom: 28px; }
  .case-article .ca-head h1 { font-size: clamp(22px, 5.8vw, 30px); line-height: 1.5; }
  .case-article .ca-hero { aspect-ratio: 4/3; margin-bottom: 40px; }
  .case-article .ca-body { row-gap: 20px; }
  .case-article .ca-body p { font-size: 14px; line-height: 2; }
  .case-article .ca-body h3 { font-size: 18px; }
  .case-article .ca-body blockquote { font-size: clamp(17px, 5vw, 22px); line-height: 1.7; margin: 24px 0; }
  .case-article .ca-body .qa { grid-template-columns: 56px 1fr; gap: 12px; padding: 16px 0; }
  .case-article .ca-body .qa.q .txt { font-size: 15px; }
  .case-article .ca-body .qa .txt { font-size: 13.5px; }
  .case-article .ca-img-pair { grid-template-columns: 1fr; gap: 12px; }
  .case-article .ca-spec { grid-template-columns: repeat(2, 1fr); margin: 32px 0 16px; }
  .case-article .ca-spec .cell { padding: 16px 12px; }
  .case-article .ca-spec .cell:nth-child(3) { border-left: 0; }
  .case-article .ca-spec .cell .v { font-size: 14px; }

  /* faq */
  .faq-q { font-size: 15px; padding: 22px 0; gap: 14px; }
  .faq-q .qnum { font-size: 10px; min-width: 28px; }
  .faq-q .qtoggle { width: 28px; height: 28px; }
  .faq-a-inner { padding: 0 0 24px 42px; font-size: 13.5px; line-height: 1.95; }

  /* contact */
  .section.contact { padding: 64px 0; }
  .contact-grid { grid-template-columns: 1fr; gap: 32px; }
  .contact-cta { padding: 22px 0; gap: 14px; }
  .contact-cta .lhs { gap: 12px; }
  .contact-cta .lhs h4 { font-size: 16px; }
  .contact .info { font-size: 10px; line-height: 2.2; }
  .contact .info .lg { font-size: 17px; margin-bottom: 14px; }

  /* footer */
  .footer { padding: 56px var(--gutter) 32px; }
  .footer .f-cols { grid-template-columns: 1fr; gap: 32px; padding-bottom: 32px; }
  .footer .f-foot { padding-top: 28px; gap: 12px; }
  .footer .f-foot span:nth-child(2) { font-size: 13px; }

  /* ticker */
  .ticker-track > span { font-size: 15px; gap: 28px; }
  .ticker-track { gap: 28px; }
}

/* very small phones */
@media (max-width: 380px) {
  :root { --gutter: 14px; }
  .nav-brand img.logo { height: 20px; }
  .nav-cta { padding: 7px 12px; font-size: 9px; letter-spacing: .12em; }
  .tomisako .right .lineup { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────────────────────────────────────
   Sub-pages (about / greeting / philosophy / services / retail / legal)
   ───────────────────────────────────────────────────────────────────── */

.subpage-hero {
  position: relative;
  padding: clamp(140px, 14vw, 200px) 0 clamp(60px, 7vw, 110px);
  border-bottom: .5px solid var(--rule-soft);
  background:
    radial-gradient(60% 70% at 80% 30%, color-mix(in oklab, var(--moss) 5%, transparent) 0%, transparent 70%),
    var(--bg);
  overflow: hidden;
}
.subpage-hero::before {
  content: "";
  position: absolute;
  right: -8%; top: -10%;
  width: 600px; height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in oklab, var(--moss) 8%, transparent) 0%, transparent 65%);
  pointer-events: none;
}
.subpage-hero-inner {
  position: relative; z-index: 1;
  max-width: 920px;
}
.subpage-hero-mark {
  display: flex; align-items: baseline; gap: 14px;
  margin-bottom: 28px;
}
.subpage-hero-num {
  font-family: var(--en-base); font-weight: 200;
  font-size: clamp(38px, 4.6vw, 56px); line-height: 1;
  color: color-mix(in oklab, var(--moss) 50%, transparent);
  letter-spacing: -.02em;
}
.subpage-hero-label {
  font-family: var(--mono); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--moss);
}
.subpage-hero-title {
  margin: 0; font-family: var(--display-jp); font-weight: 500;
  font-size: clamp(32px, 4.6vw, 64px); line-height: 1.35; letter-spacing: .03em;
  color: var(--ink);
}
.subpage-hero-sub {
  margin: 28px 0 0; max-width: 56ch;
  font-size: 14.5px; line-height: 2; color: var(--ink-2);
}
.subpage-hero-back {
  display: inline-flex; margin-top: 36px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--muted);
  transition: color .3s var(--ease), gap .3s var(--ease);
  gap: 4px;
}
.subpage-hero-back:hover { color: var(--moss); gap: 10px; }

.subpage-body {
  padding: clamp(64px, 9vw, 128px) 0 clamp(80px, 10vw, 160px);
}

/* Info table */
.info-table {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 0;
  margin: 0;
  border-top: .5px solid var(--rule-soft);
}
.info-table dt {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted);
  padding: 24px 16px 24px 0;
  border-bottom: .5px solid var(--rule-soft);
}
.info-table dd {
  margin: 0;
  font-family: var(--display-jp); font-size: 15px; letter-spacing: .025em;
  line-height: 1.9; color: var(--ink);
  padding: 24px 0 24px 16px;
  border-bottom: .5px solid var(--rule-soft);
}
.info-table dd small { display: block; color: var(--muted); font-size: 12px; margin-top: 4px; }
@media (max-width: 720px) {
  .info-table { grid-template-columns: 1fr; }
  .info-table dt { padding: 18px 0 6px; border-bottom: 0; }
  .info-table dd { padding: 0 0 18px; }
}

/* Sub-page section primitives */
.sp-section {
  padding-top: clamp(60px, 8vw, 120px);
  margin-top: clamp(60px, 8vw, 120px);
  border-top: .5px solid var(--rule-soft);
}
.sp-section:first-child { padding-top: 0; margin-top: 0; border-top: 0; }
.sp-section-head {
  display: grid; grid-template-columns: 1fr 2fr;
  gap: clamp(20px, 4vw, 80px);
  align-items: baseline;
  margin-bottom: clamp(28px, 4vw, 56px);
}
.sp-section-head .n {
  font-family: var(--mono); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--moss);
}
.sp-section-head h2 {
  margin: 0; font-family: var(--display-jp); font-weight: 500;
  font-size: clamp(22px, 2.4vw, 30px); line-height: 1.55; letter-spacing: .03em;
  color: var(--ink);
}
@media (max-width: 720px) {
  .sp-section-head { grid-template-columns: 1fr; gap: 8px; }
}

/* Greeting layout */
.greeting-grid {
  display: grid; grid-template-columns: 320px 1fr;
  gap: clamp(40px, 5vw, 96px);
  align-items: start;
}
.greeting-portrait {
  position: relative;
  aspect-ratio: 4/5;
  background: var(--bg-2);
  overflow: hidden;
}
.greeting-portrait::before {
  content: "";
  position: absolute;
  inset: -18px 18px 18px -18px;
  border: 1px solid color-mix(in oklab, var(--moss) 35%, transparent);
  pointer-events: none;
  z-index: 2;
}
.greeting-portrait .placeholder {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background:
    repeating-linear-gradient(135deg, color-mix(in oklab, var(--moss) 8%, var(--bg-2)) 0 1px, transparent 1px 18px),
    var(--bg-2);
  color: var(--muted);
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
}
.greeting-portrait-caption {
  margin-top: 16px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted);
  display: flex; justify-content: space-between;
}
.greeting-text p {
  margin: 0 0 22px;
  font-size: 15px; line-height: 2.1; color: var(--ink-2);
  max-width: 56ch;
}
.greeting-text p:first-child::first-letter {
  font-family: var(--display-jp); font-weight: 500;
  font-size: 2.2em;
  float: left;
  margin: .12em 8px 0 -4px;
  color: var(--moss);
  line-height: 1;
}
.greeting-sig {
  margin-top: 40px; padding-top: 28px;
  border-top: .5px solid var(--rule-soft);
  display: flex; justify-content: space-between; align-items: flex-end;
  flex-wrap: wrap; gap: 16px;
}
.greeting-sig .role {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em;
  color: var(--muted); text-transform: uppercase;
}
.greeting-sig .name {
  font-family: var(--display-jp); font-size: 22px; letter-spacing: .06em;
  font-weight: 500; color: var(--ink); margin-top: 6px;
}
.greeting-sig .name-en {
  font-family: var(--en-base); font-size: 12px; color: var(--moss);
  margin-top: 2px; letter-spacing: .04em;
}
@media (max-width: 820px) {
  .greeting-grid { grid-template-columns: 1fr; }
  .greeting-portrait { max-width: 280px; }
}

/* Philosophy (principles) */
.principle-list {
  display: grid; grid-template-columns: 1fr;
  gap: 0;
  border-top: .5px solid var(--rule-soft);
}
.principle {
  display: grid; grid-template-columns: 80px 1fr 2fr;
  gap: clamp(20px, 3vw, 56px);
  padding: clamp(32px, 4vw, 56px) 0;
  border-bottom: .5px solid var(--rule-soft);
  align-items: start;
}
.principle .pn {
  font-family: var(--mono); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--moss);
}
.principle h3 {
  margin: 0; font-family: var(--display-jp); font-weight: 500;
  font-size: clamp(20px, 2vw, 26px); line-height: 1.5; letter-spacing: .03em;
  color: var(--ink);
}
.principle h3 small {
  display: block; font-family: var(--en-base);
  font-size: 13px; color: var(--moss); margin-top: 6px;
  letter-spacing: .04em; font-weight: 400;
}
.principle p {
  margin: 0; font-size: 14.5px; line-height: 2; color: var(--ink-2);
}
@media (max-width: 820px) {
  .principle { grid-template-columns: 1fr; gap: 12px; }
}

/* Service page detail rows */
.service-detail {
  display: grid; grid-template-columns: 200px 1fr 1.4fr;
  gap: clamp(20px, 3vw, 56px);
  padding: clamp(36px, 4vw, 56px) 0;
  border-top: .5px solid var(--rule-soft);
  align-items: start;
}
.service-detail:last-child { border-bottom: .5px solid var(--rule-soft); }
.service-detail .sd-id {
  font-family: var(--en-base); font-weight: 200;
  font-size: clamp(28px, 3vw, 40px); line-height: 1;
  color: var(--moss); letter-spacing: -.02em;
}
.service-detail h3 {
  margin: 0 0 6px; font-family: var(--display-jp); font-weight: 500;
  font-size: clamp(20px, 2vw, 26px); line-height: 1.5; letter-spacing: .03em;
  color: var(--ink);
}
.service-detail h3 small {
  display: block; font-family: var(--en-base);
  font-size: 13px; color: var(--moss); margin-top: 6px;
  letter-spacing: .04em; font-weight: 400;
}
.service-detail .sd-body p {
  margin: 0 0 14px; font-size: 14px; line-height: 2; color: var(--ink-2);
}
.service-detail .sd-body p:last-child { margin-bottom: 0; }
.service-detail .sd-pills {
  margin-top: 16px; display: flex; flex-wrap: wrap; gap: 6px;
}
@media (max-width: 820px) {
  .service-detail { grid-template-columns: 1fr; gap: 14px; padding: 32px 0; }
}

/* Retail / Shops */
.shop-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 64px);
}
.shop-card {
  position: relative;
  display: grid; grid-template-columns: 1fr;
  gap: 24px;
  padding-bottom: 24px;
}
.shop-card-img {
  position: relative;
  aspect-ratio: 16/10;
  overflow: hidden;
  background: var(--bg-2);
}
.shop-card-img::after {
  content: "";
  position: absolute;
  inset: 12px -12px -12px 12px;
  border: 1px solid color-mix(in oklab, var(--moss) 30%, transparent);
  pointer-events: none;
}
.shop-card-name {
  font-family: var(--display-jp); font-weight: 500;
  font-size: clamp(20px, 2vw, 26px); letter-spacing: .03em; line-height: 1.5;
  margin: 0 0 4px;
}
.shop-card-loc {
  font-family: var(--en-base); font-size: 13px; color: var(--moss);
  letter-spacing: .04em; margin-bottom: 16px;
}
.shop-card-info {
  display: grid; grid-template-columns: 90px 1fr;
  gap: 8px 16px;
  font-size: 13.5px; line-height: 1.8;
  margin-top: 12px;
  padding-top: 16px;
  border-top: .5px solid var(--rule-soft);
}
.shop-card-info dt {
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted);
  padding-top: 2px;
}
.shop-card-info dd { margin: 0; color: var(--ink-2); }
@media (max-width: 820px) {
  .shop-grid { grid-template-columns: 1fr; }
}

/* Legal / privacy / tokushoho */
.legal-prose {
  max-width: 72ch;
}
.legal-prose h2 {
  font-family: var(--display-jp); font-weight: 500;
  font-size: clamp(18px, 1.8vw, 22px); letter-spacing: .03em; line-height: 1.6;
  margin: clamp(40px, 5vw, 64px) 0 14px;
  color: var(--ink);
}
.legal-prose h2:first-child { margin-top: 0; }
.legal-prose h2 .ln {
  font-family: var(--mono); font-size: 11px; letter-spacing: .18em;
  color: var(--moss); margin-right: 10px;
}
.legal-prose p, .legal-prose li {
  font-size: 14px; line-height: 2.05; color: var(--ink-2);
}
.legal-prose p { margin: 0 0 16px; }
.legal-prose ul, .legal-prose ol { margin: 0 0 16px; padding-left: 1.4em; }
.legal-prose li { margin-bottom: 6px; }
.legal-prose a { color: var(--moss); text-decoration: underline; text-underline-offset: 3px; }
.legal-prose .updated {
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: 24px;
  border-top: .5px solid var(--rule-soft);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted);
}

/* Sub-nav current state */
.sub-nav .nav-link.is-current { color: var(--moss); }
.sub-nav .nav-link.is-current::after { transform: scaleX(1); }

/* Pill list (for memberships / partners) */
.pill-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px 10px;
}
.pill-list li {
  display: inline-flex; align-items: center;
  padding: 9px 16px;
  border: 1px solid var(--rule-soft);
  border-radius: 999px;
  font-family: var(--display-jp); font-size: 13.5px; letter-spacing: .025em;
  color: var(--ink-2);
  background: var(--bg-soft);
  transition: background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.pill-list li:hover {
  background: color-mix(in oklab, var(--moss) 8%, var(--bg));
  border-color: color-mix(in oklab, var(--moss) 30%, transparent);
  color: var(--moss);
}

/* Timeline (沿革) */
.timeline {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 0;
  margin: 0;
  border-top: .5px solid var(--rule-soft);
}
.timeline dt {
  padding: 22px 16px 22px 0;
  border-bottom: .5px solid var(--rule-soft);
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  color: var(--moss);
  align-self: start;
}
.timeline dd {
  margin: 0;
  padding: 22px 0 22px 16px;
  border-bottom: .5px solid var(--rule-soft);
  font-family: var(--display-jp); font-size: 15px; letter-spacing: .025em;
  line-height: 1.8; color: var(--ink);
}
@media (max-width: 720px) {
  .timeline { grid-template-columns: 1fr; }
  .timeline dt { padding: 18px 0 4px; border-bottom: 0; }
  .timeline dd { padding: 0 0 18px; }
}

/* Greeting eyebrow above first paragraph */
.greeting-eyebrow {
  font-family: var(--mono); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--moss);
  margin-bottom: 18px;
}

/* ─────────────────────────────────────────────────────────────────────
   Greeting — tweakable canvas (mood × rhythm × portrait)
   ───────────────────────────────────────────────────────────────────── */

.greeting-canvas {
  position: relative;
  transition: background .8s var(--ease), color .8s var(--ease);
}

/* greeting-grid uses portrait-col + text */
.greeting-canvas .greeting-grid {
  display: grid; grid-template-columns: 320px 1fr;
  gap: clamp(40px, 5vw, 96px);
  align-items: start;
}
.greeting-portrait-col { position: relative; }
@media (max-width: 820px) {
  .greeting-canvas .greeting-grid { grid-template-columns: 1fr; }
  .greeting-portrait-col { max-width: 320px; }
}

/* prose used in message sections */
.greeting-prose {
  max-width: 62ch;
  transition: max-width .6s var(--ease), font-size .4s var(--ease);
}
.greeting-prose p {
  margin: 0 0 22px;
  font-size: 15px; line-height: 2.1; color: var(--ink-2);
  transition: line-height .4s var(--ease), margin .4s var(--ease), font-size .4s var(--ease);
}
.greeting-prose p .acc,
.greeting-prose em.acc {
  color: var(--moss); font-style: normal; font-weight: 600;
}
.greeting-prose .greeting-pull {
  font-family: var(--display-jp);
  font-size: clamp(20px, 2.2vw, 26px);
  color: var(--moss);
  margin-top: 28px;
  letter-spacing: .04em;
  font-weight: 500;
}

/* ─── Mood: warm (default unchanged) ─── */
.greeting-canvas[data-mood="warm"] { /* no overrides */ }

/* ─── Mood: mono — strip moss accents, ink + paper only ─── */
.greeting-canvas[data-mood="mono"] {
  --moss:       #2a2a28;
  --moss-deep:  #0e0e0d;
  --moss-soft:  #a8a8a4;
}
.greeting-canvas[data-mood="mono"] .greeting-prose .greeting-pull,
.greeting-canvas[data-mood="mono"] .greeting-prose em.acc,
.greeting-canvas[data-mood="mono"] .greeting-eyebrow,
.greeting-canvas[data-mood="mono"] .sp-section-head .n {
  color: #2a2a28;
}

/* ─── Mood: midnight — deep ink background within the canvas only ─── */
.greeting-canvas[data-mood="midnight"] {
  --bg:        #1a1c19;
  --bg-2:      #232622;
  --bg-soft:   #20231f;
  --ink:       #f0ece2;
  --ink-2:     #d2cebf;
  --muted:     #918d82;
  --rule:      #2e2f33;
  --rule-soft: #25262a;
  --moss:      #c9b88a;
  --moss-deep: #98a48a;
  background: var(--bg);
  color: var(--ink);
  padding: clamp(40px, 6vw, 96px) clamp(20px, 4vw, 56px);
  margin: 0 calc(var(--gutter) * -1);
  border-radius: 4px;
}
.greeting-canvas[data-mood="midnight"] .greeting-prose p { color: var(--ink-2); }
.greeting-canvas[data-mood="midnight"] .greeting-portrait::before { border-color: color-mix(in oklab, var(--moss) 60%, transparent); }
.greeting-canvas[data-mood="midnight"] .greeting-portrait { background: #2a2a28; }
.greeting-canvas[data-mood="midnight"] .greeting-portrait .placeholder {
  background:
    repeating-linear-gradient(135deg, color-mix(in oklab, var(--moss) 14%, var(--bg-2)) 0 1px, transparent 1px 18px),
    var(--bg-2);
  color: color-mix(in oklab, var(--bg) 60%, transparent);
}
.greeting-canvas[data-mood="midnight"] .greeting-portrait .placeholder span {
  background: color-mix(in oklab, var(--bg) 80%, transparent);
  border-color: var(--rule);
  color: var(--ink-2);
}
.greeting-canvas[data-mood="midnight"] .sp-section { border-top-color: color-mix(in oklab, var(--ink) 16%, transparent); }
.greeting-canvas[data-mood="midnight"] .greeting-sig { border-top-color: color-mix(in oklab, var(--ink) 16%, transparent); }
.greeting-canvas[data-mood="midnight"] .greeting-sig .name { color: var(--ink); }
.greeting-canvas[data-mood="midnight"] .greeting-portrait-caption,
.greeting-canvas[data-mood="midnight"] .greeting-sig .role { color: var(--muted); }

/* ─── Rhythm: intimate (tight, generous line-height) ─── */
.greeting-canvas[data-rhythm="intimate"] .greeting-prose {
  max-width: 50ch;
}
.greeting-canvas[data-rhythm="intimate"] .greeting-prose p {
  line-height: 2.35;
  margin-bottom: 26px;
  font-size: 14.5px;
}
.greeting-canvas[data-rhythm="intimate"] .greeting-grid { gap: clamp(28px, 3.5vw, 64px); }

/* ─── Rhythm: editorial (default-ish but a touch airier) ─── */
.greeting-canvas[data-rhythm="editorial"] .greeting-prose {
  max-width: 58ch;
}
.greeting-canvas[data-rhythm="editorial"] .greeting-prose p {
  line-height: 2.1;
  margin-bottom: 22px;
}

/* ─── Rhythm: formal (denser, smaller, more contained, with hanging indent) ─── */
.greeting-canvas[data-rhythm="formal"] .greeting-prose {
  max-width: 64ch;
}
.greeting-canvas[data-rhythm="formal"] .greeting-prose p {
  line-height: 1.95;
  margin-bottom: 16px;
  font-size: 14px;
  text-indent: 1em;
}
.greeting-canvas[data-rhythm="formal"] .greeting-prose p:first-child { text-indent: 1em; }
.greeting-canvas[data-rhythm="formal"] .greeting-pull { text-indent: 0; }
.greeting-canvas[data-rhythm="formal"] .greeting-text p { font-size: 14px; line-height: 1.95; }

/* ─── Portrait: offset (default — pulled diagonal frame) ─── */
.greeting-canvas[data-portrait="offset"] .greeting-portrait {
  position: relative; aspect-ratio: 4/5;
  background: var(--bg-2); overflow: hidden;
  border-radius: 0;
}
.greeting-canvas[data-portrait="offset"] .greeting-portrait::before {
  content: ""; position: absolute;
  inset: -18px 18px 18px -18px;
  border: 1px solid color-mix(in oklab, var(--moss) 35%, transparent);
  pointer-events: none; z-index: 2;
}

/* ─── Portrait: medallion (circular, soft shadow, with breeze ring) ─── */
.greeting-canvas[data-portrait="medallion"] .greeting-portrait {
  position: relative;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  background: var(--bg-2);
  box-shadow:
    0 30px 60px -28px rgba(20, 25, 18, .26),
    0 0 0 1px color-mix(in oklab, var(--moss) 18%, transparent);
}
.greeting-canvas[data-portrait="medallion"] .greeting-portrait::before {
  content: ""; position: absolute;
  inset: -22px;
  border-radius: 50%;
  border: 1px dashed color-mix(in oklab, var(--moss) 30%, transparent);
  pointer-events: none;
  animation: medallionSpin 80s linear infinite;
}
.greeting-canvas[data-portrait="medallion"] .greeting-portrait::after {
  content: ""; position: absolute;
  inset: 12px;
  border-radius: 50%;
  border: 1px solid color-mix(in oklab, var(--bg) 30%, transparent);
  pointer-events: none;
}
.greeting-canvas[data-portrait="medallion"] .greeting-portrait .placeholder { border-radius: 50%; }
.greeting-canvas[data-portrait="medallion"] .greeting-portrait-caption { justify-content: center; gap: 20px; }
@keyframes medallionSpin { to { transform: rotate(360deg); } }

/* ─── Portrait: cinema (full-width landscape band, text below) ─── */
.greeting-canvas[data-portrait="cinema"] .greeting-grid {
  display: block;
}
.greeting-canvas[data-portrait="cinema"] .greeting-portrait-col {
  max-width: none; margin-bottom: clamp(40px, 5vw, 80px);
}
.greeting-canvas[data-portrait="cinema"] .greeting-portrait {
  position: relative;
  aspect-ratio: 21/9;
  background: var(--bg-2);
  overflow: hidden;
}
.greeting-canvas[data-portrait="cinema"] .greeting-portrait::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,.18) 100%);
  pointer-events: none; z-index: 2;
}
.greeting-canvas[data-portrait="cinema"] .greeting-portrait-caption {
  margin-top: 14px;
  font-size: 10px;
}
.greeting-canvas[data-portrait="cinema"] .greeting-text {
  max-width: 64ch;
  margin: 0 auto;
}

.svc-row, .ind-card, .case-card, .proc-step, .philo-row, .contact-cta {
  position: relative;
}
.proc-step::before {
  transition: transform .6s var(--ease), background .6s var(--ease);
}
.proc-step:hover::before { transform: scale(1.6); background: var(--moss); }

/* faq-q hover */
.faq-q { transition: padding-left .4s var(--ease); }
.faq-q:hover { padding-left: 4px; }
.faq-q:hover .qtoggle { border-color: var(--moss); }

/* button: replace ink default to moss */
.btn { color: var(--ink); border-color: var(--ink); }
.btn:hover { background: var(--moss); color: var(--bg); border-color: var(--moss); }
.btn.solid { background: var(--moss); color: var(--bg); border-color: var(--moss); }
.btn.solid:hover { background: var(--moss-deep); border-color: var(--moss-deep); }

/* override contact to use moss-deep as bg if natural palette */
.section.contact { background: var(--moss-deep); }
.section.contact .lhs .num { color: var(--highlight); }

/* tighten philosophy section borders */
.philosophy { border-top: 0; border-bottom: 0; }

/* services: keep moss highlight on hover */
.svc-row:hover {
  background: linear-gradient(90deg, color-mix(in oklab, var(--moss) 8%, transparent) 0%, transparent 80%);
}
.svc-row .svc-n { color: var(--moss); }

/* industries: moss accents */
.ind-card .ind-num { color: var(--moss); }
.ind-card h3 small { color: var(--moss); }
.ind-card .ind-quote::before { color: var(--moss); }
.ind-card:hover { background: color-mix(in oklab, var(--moss) 5%, transparent); }

/* philo .en color */
.philo-row h3 .en { color: var(--moss); }

/* feature-strip em */
.feature-strip .fcell .v em { color: var(--moss); }

/* hero in editorial uses moss accent for em */
.h-editorial .left h1 em { color: var(--moss); }
.h-editorial .left .en { color: var(--moss); }

/* cases excerpt loc moss */
.case-card .cc-loc { color: var(--moss); }
.case-article .ca-head .loc { color: var(--moss); }
.case-article .ca-body h3 small { color: var(--moss); }

/* process small */
.proc-step .pt small { color: var(--moss); }

/* h-cinema .en moss */
.h-cinema .en { color: var(--moss); }
.h-vertical .col-side .en { color: var(--moss); }
.h-type h1 em { color: var(--moss); }

/* ──────────────────────────────────────────────────────────────────
   Site search (⌘K) — nav trigger + overlay panel
   ────────────────────────────────────────────────────────────────── */
.nav-search {
  display: inline-flex; align-items: center; gap: 9px;
  background: transparent; border: .5px solid var(--rule);
  border-radius: 999px; padding: 7px 12px 7px 13px; cursor: pointer;
  color: var(--ink-2); transition: border-color .35s var(--ease), color .35s var(--ease), background .35s var(--ease);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
}
.nav-search:hover { border-color: var(--moss-soft); color: var(--ink); background: color-mix(in oklab, var(--moss) 5%, transparent); }
.nav-search svg { width: 15px; height: 15px; }
.nav-search .nav-search-kbd {
  display: inline-flex; gap: 2px; align-items: center;
  font-family: var(--mono); font-size: 9px; letter-spacing: .04em;
  color: var(--muted); border: .5px solid var(--rule); border-radius: 4px;
  padding: 1px 5px; line-height: 1.5;
}
.nav.scrolled .nav-search { border-color: var(--rule); }
@media (max-width: 900px) { .nav-search .nav-search-label, .nav-search .nav-search-kbd { display: none; } .nav-search { padding: 8px; } }

/* ──────────────────────────────────────────────────────────────────
   Mobile hamburger menu — toggle + drawer (shown ≤820px)
   reuses nav link/anchor definitions from app.jsx (home) & shell.jsx (sub-pages)
   ────────────────────────────────────────────────────────────────── */
.nav-actions { display: flex; align-items: center; gap: 10px; }

.nav-toggle {
  display: none;               /* shown ≤820px only (see media query) */
  position: relative;
  width: 40px; height: 40px;
  align-items: center; justify-content: center;
  padding: 0; border: 0; background: transparent; cursor: pointer;
  color: var(--ink);
}
.nav-toggle .bar {
  position: absolute; left: 10px; right: 10px; height: 1.5px;
  background: currentColor; border-radius: 2px;
  transition: transform .35s var(--ease), opacity .25s var(--ease);
}
.nav-toggle .bar:nth-child(1) { top: 14px; }
.nav-toggle .bar:nth-child(2) { top: 19.5px; }
.nav-toggle .bar:nth-child(3) { top: 25px; }
.nav-toggle[aria-expanded="true"] .bar:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .bar:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

.nav-drawer { position: fixed; inset: 0; z-index: 45; visibility: hidden; pointer-events: none; }
.nav-drawer.open { visibility: visible; pointer-events: auto; }
.nav-drawer-backdrop {
  position: absolute; inset: 0;
  background: color-mix(in oklab, var(--ink) 34%, transparent);
  opacity: 0; transition: opacity .35s var(--ease);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.nav-drawer.open .nav-drawer-backdrop { opacity: 1; }
.nav-drawer-panel {
  position: absolute; top: 0; right: 0; height: 100%;
  width: min(82vw, 360px);
  display: flex; flex-direction: column;
  background: var(--bg);
  border-left: .5px solid var(--rule);
  box-shadow: -24px 0 64px rgba(0,0,0,.14);
  padding: clamp(92px, 18vw, 116px) clamp(24px, 6vw, 40px) 40px;
  transform: translateX(100%);
  transition: transform .42s var(--ease);
  overflow-y: auto;
}
.nav-drawer.open .nav-drawer-panel { transform: none; }
.nav-drawer-panel a {
  display: block;
  padding: 17px 0;
  border-bottom: .5px solid var(--rule-soft);
  font-family: var(--display-jp); font-weight: 500;
  font-size: 18px; letter-spacing: .05em; line-height: 1.4;
  color: var(--ink); text-decoration: none;
  transition: color .25s var(--ease), padding-left .25s var(--ease);
}
.nav-drawer-panel a:hover,
.nav-drawer-panel a:focus-visible { color: var(--moss); padding-left: 6px; }
.nav-drawer-panel a.is-current { color: var(--moss); }

@media (max-width: 820px) { .nav-toggle { display: inline-flex; } }
@media (min-width: 821px) { .nav-drawer { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .nav-drawer-panel, .nav-drawer-backdrop, .nav-toggle .bar { transition: none; }
}

/* ──────────────────────────────────────────────────────────────────
   Number marks — never split a 2-digit number mid-digit.
   (body's overflow-wrap:anywhere was breaking "02" into "0"/"2".)
   ────────────────────────────────────────────────────────────────── */
.num, .sv-mark .n, .sv-process .step .pn, .ph-mark .n,
.subpage-hero-num { white-space: nowrap; overflow-wrap: normal; }
.sp-section-head .n { overflow-wrap: normal; }

/* ──────────────────────────────────────────────────────────────────
   Mobile type scale (≤640px) — high jump-rate: big display headings,
   readable body, slightly larger labels. Desktop unchanged.
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  /* ── middle: body & reading text ── */
  body { font-size: 19px; line-height: 1.8; }
  .section-head .lead,
  .h-editorial .left .sub, .h-vertical .col-side .sub,
  .h-ov-foot .sub, .h-type .sub,
  .subpage-hero-sub,
  .ph-prose p, .legal-prose p, .legal-prose li,
  .case-article .ca-body .qa .txt,
  .lead, .sub, p { font-size: 18.5px; line-height: 1.85; }
  .info-table dd { font-size: 19px; }

  /* ── small: mono labels (~1.5x) ── */
  .section-head .label, .nav-link, .cap,
  .info-table dt, .subpage-hero-label,
  .footer a, .f-nav a { font-size: 15.5px; letter-spacing: .1em; }
  .feature-strip .k { font-size: 14px; }

  /* ── large: display headings (big jump) ── */
  .section-head .num { font-size: 48px; }
  .section-head h2 { font-size: 31px; line-height: 1.45; }
  .sp-section-head h2 { font-size: 30px; line-height: 1.45; }
  .subpage-hero-title { font-size: 40px; line-height: 1.3; }
  .feature-strip .v { font-size: 23px; }

  /* cinema hero: on phones, stack text BELOW the image (no overlay bleed) */
  .h-cinema { display: flex; flex-direction: column; }
  .h-cinema .stage::after { display: none; }
  .h-cinema .overlay { position: static; padding: 26px var(--gutter) 0; gap: 18px; }
  .h-cinema .overlay-foot { grid-template-columns: 1fr; gap: 20px; }
  .h-cinema h1 { font-size: 33px; line-height: 1.4; color: var(--ink); text-shadow: none; }
  .h-cinema h1 em { color: var(--moss); }
  .h-cinema .sub { font-size: 16px; line-height: 1.9; color: var(--ink-2); max-width: none; }
  .h-cinema .overlay-cta .btn { color: var(--moss); border-color: var(--moss); }
  .h-cinema .overlay-cta .btn.solid { background: var(--moss); color: var(--bg); border-color: var(--moss); }
  .h-cinema .overlay-cta .btn.ghost { border-color: transparent; color: var(--moss); }
}

.sx-scrim {
  position: fixed; inset: 0; z-index: 1000;
  background: color-mix(in oklab, var(--ink) 32%, transparent);
  backdrop-filter: blur(3px) saturate(.9); -webkit-backdrop-filter: blur(3px) saturate(.9);
  display: flex; align-items: flex-start; justify-content: center;
  padding: clamp(64px, 14vh, 180px) 20px 20px;
  animation: sx-fade .22s var(--ease) both;
}
@keyframes sx-fade { from { opacity: 0; } to { opacity: 1; } }
.sx-panel {
  width: min(620px, 100%);
  background: var(--paper); color: var(--ink);
  border: .5px solid var(--rule); border-radius: 6px;
  box-shadow: 0 30px 80px -24px color-mix(in oklab, var(--ink) 60%, transparent), 0 4px 14px -8px rgba(0,0,0,.2);
  overflow: hidden; animation: sx-rise .26s var(--ease) both;
}
@keyframes sx-rise { from { opacity: 0; transform: translateY(-10px) scale(.985); } to { opacity: 1; transform: none; } }
.sx-inputrow {
  display: flex; align-items: center; gap: 12px;
  padding: 17px 18px; border-bottom: .5px solid var(--rule-soft);
}
.sx-inputrow .sx-ic { color: var(--moss); flex: none; }
.sx-input {
  flex: 1; min-width: 0; border: none; outline: none; background: transparent;
  font-family: var(--body-jp); font-size: 16px; color: var(--ink); letter-spacing: .01em;
}
.sx-input::placeholder { color: var(--muted); }
.sx-esc {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em; color: var(--muted);
  border: .5px solid var(--rule); border-radius: 4px; padding: 2px 7px; flex: none;
}
.sx-results { max-height: min(52vh, 440px); overflow-y: auto; padding: 8px; }
.sx-empty { padding: 26px 14px; text-align: center; color: var(--muted); font-size: 13.5px; }
.sx-item {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 14px; border-radius: 4px; text-decoration: none; color: var(--ink);
  transition: background .12s var(--ease);
}
.sx-item.is-active { background: color-mix(in oklab, var(--moss) 10%, transparent); }
.sx-item-main { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.sx-item-t { font-family: var(--display-jp); font-weight: 500; font-size: 14.5px; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sx-item-sub { font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; color: var(--muted); flex: none; }
.sx-item-g {
  font-family: var(--mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--moss); border: .5px solid color-mix(in oklab, var(--moss) 40%, var(--rule));
  border-radius: 999px; padding: 2px 9px; flex: none;
}
.sx-mark { background: color-mix(in oklab, var(--moss) 22%, transparent); color: inherit; border-radius: 2px; padding: 0 1px; }
.sx-foot {
  display: flex; gap: 18px; padding: 11px 18px; border-top: .5px solid var(--rule-soft);
  font-family: var(--mono); font-size: 10px; letter-spacing: .06em; color: var(--muted);
}
.sx-foot kbd {
  font-family: var(--mono); font-size: 10px; border: .5px solid var(--rule); border-radius: 3px;
  padding: 1px 5px; margin-right: 2px; color: var(--ink-2);
}
.sx-foot span { display: inline-flex; align-items: center; gap: 4px; }

/* ──────────────────────────────────────────────────────────────────
   Contact form — editorial, numbered fields. Uses sub-page shell.
   ────────────────────────────────────────────────────────────────── */
.contact-form { max-width: 760px; }
.cf-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 3vw, 36px) clamp(24px, 3.4vw, 48px);
}
.cf-field { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.cf-field.full { grid-column: 1 / -1; }
.cf-label {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  font-family: var(--display-jp); font-weight: 500;
  font-size: 14.5px; letter-spacing: .04em; color: var(--ink);
}
.cf-label .cf-n {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em;
  color: var(--moss); transform: translateY(-1px);
}
.cf-label .cf-req {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--bg);
  background: var(--moss); padding: 2px 7px; border-radius: 999px;
  line-height: 1.5; white-space: nowrap;
}
.cf-label .cf-opt {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted);
  border: .5px solid var(--rule); padding: 1px 7px; border-radius: 999px;
  line-height: 1.6; white-space: nowrap;
}
.cf-input, .cf-select, .cf-textarea {
  width: 100%;
  font-family: var(--body-jp); font-size: 15px; line-height: 1.7;
  color: var(--ink); background: var(--paper);
  border: .5px solid var(--rule);
  border-radius: 2px;
  padding: 14px 16px;
  transition: border-color .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease);
  -webkit-appearance: none; appearance: none;
}
.cf-input::placeholder, .cf-textarea::placeholder { color: var(--muted); opacity: .8; }
.cf-input:hover, .cf-select:hover, .cf-textarea:hover { border-color: var(--moss-soft); }
.cf-input:focus, .cf-select:focus, .cf-textarea:focus {
  outline: none; border-color: var(--moss);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--moss) 14%, transparent);
  background: var(--paper);
}
.cf-textarea { resize: vertical; min-height: 150px; }
.cf-select-wrap { position: relative; }
.cf-select { padding-right: 42px; cursor: pointer; }
.cf-select-wrap::after {
  content: ""; position: absolute; right: 18px; top: 50%;
  width: 8px; height: 8px;
  border-right: 1.5px solid var(--moss); border-bottom: 1.5px solid var(--moss);
  transform: translateY(-65%) rotate(45deg);
  pointer-events: none;
}
.cf-select:invalid { color: var(--muted); }

.cf-actions {
  margin-top: clamp(36px, 4.5vw, 56px);
  display: flex; align-items: center; gap: clamp(20px, 3vw, 36px);
  flex-wrap: wrap;
}
.cf-submit {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; font-weight: 500;
  padding: 17px 34px; border: 1px solid var(--moss);
  background: var(--moss); color: var(--bg);
  border-radius: 999px; cursor: pointer;
  transition: background .35s var(--ease), border-color .35s var(--ease), gap .35s var(--ease);
}
.cf-submit:hover { background: var(--moss-deep); border-color: var(--moss-deep); gap: 20px; }
.cf-submit .arrow { width: 18px; height: 1px; background: currentColor; position: relative; }
.cf-submit .arrow::after {
  content: ""; position: absolute; right: 0; top: 50%;
  width: 6px; height: 6px;
  border-top: 1px solid currentColor; border-right: 1px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}
.cf-actions .cf-actions-note {
  font-size: 12.5px; line-height: 1.7; color: var(--muted); max-width: 30ch;
}

/* privacy consent checkbox (required before submit) */
.cf-consent {
  margin-top: clamp(32px, 4vw, 48px);
  display: flex; align-items: flex-start; gap: 12px;
}
.cf-consent input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  flex: 0 0 auto;
  width: 20px; height: 20px; margin: 0;
  border: 1px solid var(--moss);
  border-radius: 4px;
  background: var(--paper);
  cursor: pointer;
  position: relative;
  transition: background .25s var(--ease), border-color .25s var(--ease);
}
.cf-consent input[type="checkbox"]:checked {
  background: var(--moss); border-color: var(--moss);
}
.cf-consent input[type="checkbox"]:checked::after {
  content: ""; position: absolute;
  left: 6px; top: 2px; width: 5px; height: 10px;
  border: solid var(--bg); border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}
.cf-consent input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--moss-soft); outline-offset: 2px;
}
.cf-consent label {
  font-size: 13.5px; line-height: 1.7; color: var(--ink-2);
  cursor: pointer; padding-top: 1px;
}
.cf-consent label a {
  color: var(--moss); text-decoration: underline; text-underline-offset: 3px;
}

/* assurance strip below form */
.cf-assure {
  margin-top: clamp(48px, 6vw, 80px);
  padding-top: clamp(32px, 4vw, 48px);
  border-top: .5px solid var(--rule-soft);
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px);
  max-width: 760px;
}
.cf-assure .cf-assure-item .h {
  display: flex; align-items: baseline; gap: 10px;
  font-family: var(--display-jp); font-weight: 500;
  font-size: 14.5px; letter-spacing: .03em; color: var(--ink);
  margin-bottom: 10px;
}
.cf-assure .cf-assure-item .h .ln {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; color: var(--moss);
}
.cf-assure .cf-assure-item p {
  margin: 0; font-size: 13px; line-height: 1.95; color: var(--ink-2);
}
.cf-assure .cf-assure-item p a { color: var(--moss); text-decoration: underline; text-underline-offset: 3px; }

/* success state (placeholder — shown after submit / on ?sent=1) */
.cf-success {
  display: none;
  padding: clamp(36px, 5vw, 64px);
  border: .5px solid var(--rule);
  background: var(--paper);
  border-radius: 3px;
  text-align: left;
}
.cf-success.is-on { display: block; }
.cf-success .cf-success-mark {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--moss); margin-bottom: 18px;
}
.cf-success h3 {
  margin: 0 0 14px; font-family: var(--display-jp); font-weight: 500;
  font-size: clamp(20px, 2.2vw, 26px); letter-spacing: .03em; line-height: 1.5; color: var(--ink);
}
.cf-success p { margin: 0; font-size: 14px; line-height: 2; color: var(--ink-2); max-width: 52ch; }

@media (max-width: 720px) {
  .cf-grid { grid-template-columns: 1fr; }
  .cf-assure { grid-template-columns: 1fr; }
}