/* SOMENA — warm social-impact look.
   Base: cream paper + logo navy ink. Accent: persimmon "red thread" (縁).
   Logo gold is used sparingly for small highlights. */

:root {
  --paper: #F7F1E6;
  --paper-2: #EFE5D3;
  --card: #FFFBF4;
  --ink: #1F2A44;
  --ink-2: #3E4760;
  --muted: #776F60;
  --line: #E3D6C1;
  --thread: #C4532F;
  --thread-soft: #F3D9CC;
  --gold: #D6AA55;
  --gold-soft: #F4E6C4;
  --leaf: #5F7D4E;
  --leaf-soft: #DCE6CF;

  /* Humanist sans throughout: warm, hand-drawn strokes for headings, open forms for text. */
  --serif: "Alegreya Sans", "Zen Maru Gothic", "Noto Sans TC", system-ui, sans-serif;
  --sans: "Source Sans 3", "Zen Kaku Gothic New", "Noto Sans TC", system-ui, sans-serif;
  --mono: "Alegreya Sans", "Zen Kaku Gothic New", "Noto Sans TC", sans-serif;
  --code: "DM Mono", ui-monospace, monospace;

  --wrap: 76rem;
  --radius: 20px;
  --shadow: 0 1px 0 rgba(31, 42, 68, .04), 0 12px 32px -18px rgba(31, 42, 68, .28);
}
html[data-lang="zh"] { --serif: "Alegreya Sans", "Noto Sans TC", system-ui, sans-serif; --sans: "Source Sans 3", "Noto Sans TC", system-ui, sans-serif; --mono: "Alegreya Sans", "Noto Sans TC", sans-serif; }

/* Language switching: only the active language's blocks show. */
html[data-lang="ja"] [data-l]:not([data-l="ja"]),
html[data-lang="zh"] [data-l]:not([data-l="zh"]),
html[data-lang="en"] [data-l]:not([data-l="en"]) { display: none !important; }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--sans); font-size: 16px; line-height: 1.8;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
html[data-lang="en"] body { line-height: 1.65; }
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 700; line-height: 1.15; margin: 0; letter-spacing: -.01em; }
html[data-lang="ja"] h1, html[data-lang="ja"] h2, html[data-lang="ja"] h3,
html[data-lang="zh"] h1, html[data-lang="zh"] h2, html[data-lang="zh"] h3 { font-weight: 700; letter-spacing: .02em; line-height: 1.4; }
p { margin: 0 0 1em; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 16px; top: 16px; z-index: 100; background: var(--card); padding: 8px 12px; border-radius: 8px; }

/* ---------- small type ---------- */
.label {
  font-family: var(--mono); font-weight: 700; font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--thread); display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px;
}
.label::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.label.on-dark { color: var(--gold); }
.mono { font-family: var(--mono); font-weight: 700; font-size: 13px; letter-spacing: .06em; }
.lead { font-size: 1.125rem; color: var(--ink-2); max-width: 42rem; }
.muted { color: var(--muted); }
.em-thread { color: var(--thread); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px; border-radius: 999px;
  font-weight: 500; text-decoration: none; border: 1.5px solid transparent; transition: transform .2s, background .2s, color .2s;
  font-size: 15px; cursor: pointer; font-family: var(--sans);
}
.btn:hover { transform: translateY(-2px); }
.btn-thread { background: var(--thread); color: #FFF8F0; }
.btn-thread:hover { background: #A9441F; }
.btn-ghost { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn-ghost:hover { background: var(--ink); color: var(--paper); }
.btn-light { background: var(--paper); color: var(--ink); }
.arrow::after { content: "→"; transition: transform .2s; }
.btn:hover .arrow::after, a:hover > .arrow::after { transform: translateX(3px); }
.textlink { color: var(--thread); font-weight: 500; text-decoration: none; border-bottom: 1.5px solid currentColor; padding-bottom: 2px; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50; background: rgba(247, 241, 230, .9);
  backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid transparent; transition: border-color .2s;
}
.site-header.scrolled { border-bottom-color: var(--line); }
.header-row { display: flex; align-items: center; gap: 24px; height: 76px; }
.brand { display: flex; align-items: center; flex-shrink: 0; }
.brand img { height: 34px; width: auto; }
.mainnav { margin-left: auto; }
.mainnav > ul { list-style: none; display: flex; gap: 4px; margin: 0; padding: 0; }
.mainnav a, .mainnav button.navbtn {
  display: block; padding: 8px 12px; border-radius: 999px; text-decoration: none; font-size: 14.5px;
  font-weight: 500; color: var(--ink); background: none; border: 0; font-family: inherit; cursor: pointer;
}
.mainnav a:hover, .mainnav button.navbtn:hover, .mainnav .active > a, .mainnav .active > button { background: var(--paper-2); }
.has-sub { position: relative; }
.navbtn::after { content: "▾"; font-size: 10px; margin-left: 6px; opacity: .6; }
.sub {
  position: absolute; top: calc(100% + 8px); left: 0; min-width: 220px; list-style: none; margin: 0; padding: 8px;
  background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow);
  opacity: 0; visibility: hidden; transform: translateY(-4px); transition: .18s;
}
.sub::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
.has-sub:hover .sub, .has-sub:focus-within .sub, .has-sub.open .sub { opacity: 1; visibility: visible; transform: none; }
.sub a { border-radius: 10px; padding: 10px 12px; display: flex; justify-content: space-between; gap: 12px; }
.sub a small { font-family: var(--mono); font-size: 11px; color: var(--muted); letter-spacing: .08em; }
.header-tools { display: flex; align-items: center; gap: 12px; }
.langsw { display: flex; background: var(--paper-2); border-radius: 999px; padding: 3px; }
.langsw button {
  border: 0; background: none; font-family: var(--mono); font-size: 12px; padding: 6px 10px; border-radius: 999px;
  color: var(--muted); cursor: pointer;
}
.langsw button[aria-pressed="true"] { background: var(--card); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.header-cta { padding: 10px 18px; font-size: 14px; }
.burger { display: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); cursor: pointer; }
.burger span { display: block; width: 18px; height: 1.5px; background: var(--ink); margin: 4px auto; transition: .2s; }

@media (max-width: 1080px) {
  .burger { display: block; }
  .mainnav {
    position: fixed; inset: 76px 0 auto 0; background: var(--paper); border-bottom: 1px solid var(--line);
    padding: 12px 20px 24px; display: none; max-height: calc(100vh - 76px); overflow: auto;
  }
  .nav-open .mainnav { display: block; }
  .mainnav > ul { flex-direction: column; }
  .mainnav a, .mainnav button.navbtn { font-size: 17px; padding: 12px 8px; width: 100%; text-align: left; }
  .sub { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; background: none; padding: 0 0 0 12px; }
  .navbtn::after { display: none; }
  .header-tools { margin-left: auto; }
  .header-cta { display: none; }
}
@media (max-width: 520px) {
  .brand img { height: 28px; }
  .langsw button { padding: 6px 7px; }
  .header-row { gap: 10px; }
}

/* ---------- sections ---------- */
section { padding: 112px 0; }
.sec-tight { padding: 72px 0; }
.sec-alt { background: var(--paper-2); }
.sec-dark { background: var(--ink); color: #F3ECDF; }
.sec-dark .lead, .sec-dark .muted { color: #C9C3B6; }
.sec-head { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 24px; margin-bottom: 48px; }
.sec-head h2 { font-size: clamp(2rem, 4vw, 3.1rem); max-width: 22ch; }
html[data-lang="ja"] .sec-head h2, html[data-lang="zh"] .sec-head h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
@media (max-width: 720px) { section { padding: 80px 0; } .sec-head { grid-template-columns: 1fr; } }

/* page hero (inner pages) */
.page-hero { padding: 88px 0 64px; position: relative; overflow: hidden; }
.page-hero h1 { font-size: clamp(2.4rem, 6vw, 4.6rem); max-width: 18ch; }
html[data-lang="ja"] .page-hero h1, html[data-lang="zh"] .page-hero h1 { font-size: clamp(2rem, 4.8vw, 3.6rem); max-width: 20ch; }
.page-hero .lead { margin-top: 24px; }
.crumbs { font-family: var(--mono); font-size: 12px; color: var(--muted); margin-bottom: 28px; letter-spacing: .06em; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--thread); }
.thread-deco { position: absolute; right: -40px; top: 30px; width: 520px; max-width: 60vw; opacity: .9; pointer-events: none; }
@media (max-width: 720px) { .thread-deco { opacity: .35; } }

/* ---------- home hero ---------- */
.hero { padding: 64px 0 96px; position: relative; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; }
.hero h1 { font-size: clamp(3rem, 7.4vw, 6.2rem); line-height: 1.08; }
html[data-lang="ja"] .hero h1, html[data-lang="zh"] .hero h1 { font-size: clamp(2.8rem, 6.6vw, 5.4rem); line-height: 1.2; }
.hero h1 .underline { position: relative; white-space: nowrap; }
.hero h1 .underline svg { position: absolute; left: 0; bottom: -.12em; width: 100%; height: .3em; }
.hero .lead { margin: 28px 0 36px; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.pill-tag {
  display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12px;
  padding: 6px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); margin-bottom: 28px; color: var(--ink-2);
}
.pill-tag i { width: 7px; height: 7px; border-radius: 50%; background: var(--thread); }
.collage { position: relative; height: 560px; }
.collage .ph {
  position: absolute; border-radius: 22px; overflow: hidden; box-shadow: 0 30px 60px -30px rgba(31,42,68,.55);
  border: 6px solid var(--card); background: var(--card);
}
.collage .ph img { width: 100%; height: 100%; object-fit: cover; }
.collage .ph-a { width: 78%; height: 330px; right: 0; top: 10px; transform: rotate(2deg); }
.collage .ph-b { width: 50%; height: 250px; left: 0; bottom: 30px; transform: rotate(-4deg); }
.collage .ph-c { width: 38%; height: 200px; right: 6%; bottom: 0; transform: rotate(5deg); }
.sticker {
  position: absolute; background: var(--ink); color: var(--paper); border-radius: 14px; padding: 12px 16px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em; box-shadow: var(--shadow); z-index: 3;
}
.sticker b { display: block; font-family: var(--serif); font-size: 32px; letter-spacing: 0; font-weight: 800; line-height: 1.1; }
.sticker.gold { background: var(--gold-soft); color: var(--ink); }
.sticker.s1 { left: 6%; top: 40px; transform: rotate(-6deg); }
.sticker.s2 { right: -8px; top: 300px; transform: rotate(4deg); }
.collage svg.thread { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; }
  .collage { height: 440px; }
  .collage .ph-a { height: 260px; }
  .collage .ph-b { height: 200px; }
  .collage .ph-c { height: 160px; }
}
@media (max-width: 520px) { .collage { height: 380px; } .sticker.s2 { top: 220px; } }

/* thread line drawing */
.draw { stroke-dasharray: 1400; stroke-dashoffset: 1400; animation: draw 2.4s .3s ease forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .draw { animation: none; stroke-dashoffset: 0; } html { scroll-behavior: auto; } }

/* ---------- stats band ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stat { padding: 32px 24px; border-right: 1px solid var(--line); }
.stat:last-child { border-right: 0; }
.stat b { font-family: var(--serif); font-weight: 800; font-size: clamp(2.4rem, 4vw, 3.4rem); display: block; line-height: 1; color: var(--ink); }
.stat b small { font-size: .45em; margin-left: 4px; }
.stat span { display: block; margin-top: 12px; color: var(--ink-2); font-size: 14.5px; }
@media (max-width: 820px) { .stats { grid-template-columns: 1fr 1fr; } .stat:nth-child(2) { border-right: 0; } .stat:nth-child(-n+2) { border-bottom: 1px solid var(--line); } }

/* ---------- mission (dark) ---------- */
.mission-big { font-size: clamp(2rem, 4.6vw, 3.8rem); max-width: 20ch; color: #FFF8EE; }
html[data-lang="ja"] .mission-big, html[data-lang="zh"] .mission-big { font-size: clamp(1.8rem, 4vw, 3.2rem); }
.mission-big em { font-style: normal; color: var(--gold); }
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 56px; }
.pillar { border-top: 1px solid rgba(243,236,223,.25); padding-top: 24px; }
.pillar .num { font-family: var(--mono); font-size: 12px; color: var(--gold); letter-spacing: .14em; }
.pillar h3 { font-size: 1.45rem; margin: 10px 0 12px; color: #FFF8EE; }
.pillar p { color: #C9C3B6; font-size: 15px; }
.pillars.light .pillar { border-top-color: var(--line); }
.pillars.light .pillar h3 { color: var(--ink); }
.pillars.light .pillar p { color: var(--ink-2); }
.pillars.light .pillar .num { color: var(--thread); }
@media (max-width: 820px) { .pillars { grid-template-columns: 1fr; } }

/* ---------- cards / grids ---------- */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
@media (max-width: 960px) { .grid-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .grid-3, .grid-2 { grid-template-columns: 1fr; } }
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow); display: flex; flex-direction: column; text-decoration: none; color: inherit;
  transition: transform .25s, box-shadow .25s;
}
a.card:hover { transform: translateY(-4px); box-shadow: 0 30px 50px -28px rgba(31,42,68,.45); }
.card .media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--paper-2); }
.card .media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
a.card:hover .media img { transform: scale(1.04); }
.card .body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.card h3 { font-size: 1.3rem; }
.card p { font-size: 15px; color: var(--ink-2); margin: 0; }
.card .more { margin-top: auto; padding-top: 8px; font-weight: 500; color: var(--thread); font-size: 14.5px; }

.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em; padding: 4px 10px; border-radius: 999px;
  background: var(--thread-soft); color: #8A3418;
}
.tag.t-consult { background: var(--leaf-soft); color: #3A5230; }
.tag.t-media { background: var(--gold-soft); color: #6E5214; }
.tag.t-plain { background: var(--paper-2); color: var(--ink-2); }
.date { font-family: var(--mono); font-size: 12px; color: var(--muted); letter-spacing: .06em; }

/* filter bar */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 36px; }
.filters button {
  font-family: var(--sans); font-size: 14.5px; font-weight: 500; padding: 10px 18px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--card); color: var(--ink); cursor: pointer; transition: .2s;
}
.filters button:hover { border-color: var(--ink); }
.filters button[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.filters button .count { font-family: var(--mono); font-size: 11px; opacity: .6; margin-left: 6px; }
[data-cat].hidden { display: none !important; }

/* ---------- services rows ---------- */
.svc { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; padding: 72px 0; border-top: 1px solid var(--line); }
.svc:first-of-type { border-top: 0; }
.svc-visual { position: relative; }
.svc-visual .main { border-radius: 26px; overflow: hidden; aspect-ratio: 5 / 4; box-shadow: 0 40px 70px -40px rgba(31,42,68,.6); }
.svc-visual .main img { width: 100%; height: 100%; object-fit: cover; }
.svc-visual .inset {
  position: absolute; width: 46%; aspect-ratio: 4/3; right: -18px; bottom: -28px; border-radius: 16px; overflow: hidden;
  border: 6px solid var(--card); transform: rotate(4deg); box-shadow: var(--shadow);
}
.svc-visual .inset img { width: 100%; height: 100%; object-fit: cover; }
.svc-visual .badge {
  position: absolute; left: -14px; top: 22px; background: var(--card); border-radius: 14px; padding: 10px 14px;
  font-family: var(--mono); font-size: 11.5px; box-shadow: var(--shadow); transform: rotate(-4deg); letter-spacing: .06em;
}
.svc-num { font-family: var(--serif); font-weight: 800; font-size: 4.4rem; color: var(--thread); line-height: 1; display: block; margin-bottom: 12px; }
.svc h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); margin-bottom: 18px; }
.svc .en-sub { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; color: var(--muted); text-transform: uppercase; display: block; margin-bottom: 8px; }
.checklist { list-style: none; padding: 0; margin: 20px 0 28px; display: grid; gap: 10px; }
.checklist li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; font-size: 15.5px; }
.checklist li::before { content: ""; width: 14px; height: 14px; margin-top: 7px; border-radius: 50%; border: 1.5px solid var(--thread); background: radial-gradient(circle, var(--thread) 3px, transparent 3.5px); }
.svc.flip .svc-visual { order: 2; }
@media (max-width: 900px) { .svc { grid-template-columns: 1fr; gap: 56px; } .svc.flip .svc-visual { order: 0; } .svc-visual .inset { right: 8px; } }

/* DB mock (service 3 illustration) */
.dbmock {
  background: var(--ink); border-radius: 26px; padding: 22px; aspect-ratio: 5 / 4; color: #EDE6D8; position: relative;
  box-shadow: 0 40px 70px -40px rgba(31,42,68,.7); display: flex; flex-direction: column; gap: 14px; overflow: hidden;
  --mono: var(--code);
}
.dbmock .bar { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px; color: #A9A493; }
.dbmock .bar i { width: 9px; height: 9px; border-radius: 50%; background: #4A5370; }
.dbmock .bar i:first-child { background: var(--thread); }
.dbmock .search { background: #2A3654; border-radius: 12px; padding: 12px 14px; font-family: var(--mono); font-size: 12.5px; color: #DCD5C5; display: flex; justify-content: space-between; }
.dbmock .search span:last-child { color: var(--gold); }
.dbmock .rows { display: grid; gap: 10px; flex: 1; }
.dbrow { background: #263150; border-radius: 14px; padding: 12px 14px; display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: center; }
.dbrow .thumb { width: 40px; height: 40px; border-radius: 10px; background: #3A4566; display: grid; place-items: center; font-size: 18px; }
.dbrow b { font-weight: 500; font-size: 13.5px; display: block; color: #FFF8EE; }
.dbrow small { font-family: var(--mono); font-size: 10.5px; color: #A9A493; }
.dbrow .score { font-family: var(--mono); font-size: 12px; color: var(--ink); background: var(--gold); border-radius: 999px; padding: 4px 10px; }
.dbrow .score.mid { background: #8FA77E; }
.dbmock .checks { display: flex; flex-wrap: wrap; gap: 6px; }
.dbmock .checks span { font-family: var(--mono); font-size: 10.5px; padding: 4px 9px; border-radius: 999px; border: 1px solid #45507A; color: #CFC8B8; }
.dbmock .checks span.ok { border-color: #8FA77E; color: #C8DBB9; }
.dbmock .checks span.ok::before { content: "✓ "; }

/* funnel */
.funnel { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 24px; }
.funnel .step { padding: 28px; border: 1px solid var(--line); background: var(--card); position: relative; }
.funnel .step:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.funnel .step:last-child { border-radius: 0 var(--radius) var(--radius) 0; }
.funnel .step + .step { border-left: 0; }
.funnel .step .mono { color: var(--thread); }
.funnel .step h3 { font-size: 1.3rem; margin: 8px 0 10px; }
.funnel .step p { font-size: 15px; color: var(--ink-2); margin: 0; }
@media (max-width: 820px) {
  .funnel { grid-template-columns: 1fr; }
  .funnel .step, .funnel .step:first-child, .funnel .step:last-child { border-radius: 0; }
  .funnel .step:first-child { border-radius: var(--radius) var(--radius) 0 0; }
  .funnel .step:last-child { border-radius: 0 0 var(--radius) var(--radius); }
  .funnel .step + .step { border-left: 1px solid var(--line); border-top: 0; }
}

/* ---------- press list ---------- */
.press-list { display: grid; gap: 16px; }
.press-item {
  display: grid; grid-template-columns: 150px 1fr auto; gap: 28px; align-items: center; padding: 26px 28px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: inherit;
  transition: transform .2s, box-shadow .2s;
}
a.press-item:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.press-item .outlet { font-family: var(--mono); font-size: 12px; color: var(--ink-2); letter-spacing: .04em; }
.press-item h3 { font-size: 1.2rem; margin: 6px 0 10px; }
.press-item .sub-t { font-size: 14px; color: var(--muted); margin: 0 0 10px; }
.press-item .go { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; font-size: 18px; transition: .2s; }
a.press-item:hover .go { background: var(--thread); color: #FFF; border-color: var(--thread); }
.press-item .nolink { font-family: var(--mono); font-size: 11px; color: var(--muted); }
@media (max-width: 720px) { .press-item { grid-template-columns: 1fr; gap: 8px; } .press-item .go { display: none; } }

/* ---------- team ---------- */
.member { display: grid; grid-template-columns: 220px 1fr; gap: 36px; padding: 40px 0; border-top: 1px solid var(--line); }
.member:first-of-type { border-top: 0; }
.avatar { width: 220px; aspect-ratio: 1; border-radius: 24px; overflow: hidden; background: var(--paper-2); position: relative; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar.mono-av { display: grid; place-items: center; font-family: var(--serif); font-size: 5rem; color: var(--paper); }
.avatar.mono-av small { position: absolute; bottom: 14px; left: 0; right: 0; text-align: center; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; opacity: .7; }
.av-thread { background: var(--thread); }
.av-leaf { background: var(--leaf); }
.av-ink { background: var(--ink-2); }
.member .role { font-family: var(--mono); font-size: 12px; color: var(--thread); letter-spacing: .1em; text-transform: uppercase; }
.member h3 { font-size: 1.9rem; margin: 6px 0 4px; }
.member .romaji { color: var(--muted); font-size: 15px; margin-bottom: 18px; }
.member ul { padding-left: 1.1em; margin: 0 0 14px; color: var(--ink-2); font-size: 15.5px; }
.member ul li { margin-bottom: 6px; }
.member .inproj { background: var(--paper-2); border-radius: 12px; padding: 12px 16px; font-size: 14.5px; }
.member .inproj b { font-family: var(--mono); font-size: 11.5px; color: var(--thread); letter-spacing: .08em; margin-right: 8px; }
@media (max-width: 720px) { .member { grid-template-columns: 1fr; gap: 20px; } .avatar { width: 160px; } }
.team-faces { display: flex; flex-wrap: wrap; gap: 18px; }
.face { width: 132px; text-align: center; text-decoration: none; }
.face .avatar { width: 132px; border-radius: 50%; margin-bottom: 10px; }
.face .avatar.mono-av { font-size: 2.8rem; }
.face b { display: block; font-weight: 500; font-size: 15px; }
.face span { font-size: 12.5px; color: var(--muted); }

/* ---------- company table / info ---------- */
.info-table { width: 100%; border-collapse: collapse; background: var(--card); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.info-table th, .info-table td { text-align: left; vertical-align: top; padding: 22px 28px; border-bottom: 1px solid var(--line); }
.info-table tr:last-child th, .info-table tr:last-child td { border-bottom: 0; }
.info-table th { width: 220px; font-weight: 500; font-size: 14.5px; color: var(--muted); background: #FBF5EA; }
.info-table td { font-size: 15.5px; }
.info-table td ol, .info-table td ul { margin: 0; padding-left: 1.2em; }
.info-table .note { font-size: 13px; color: var(--muted); display: block; margin-top: 4px; }
@media (max-width: 640px) { .info-table th, .info-table td { display: block; width: 100%; padding: 14px 18px; } .info-table th { border-bottom: 0; padding-bottom: 0; background: none; } }

/* name origin */
.name-origin { display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px; align-items: stretch; }
.syll { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 32px; }
.syll .big { font-family: var(--serif); font-size: 4rem; line-height: 1; color: var(--thread); }
.syll .kanji { font-family: var(--serif); font-size: 2rem; margin: 10px 0 6px; }
.syll p { font-size: 15px; color: var(--ink-2); margin: 0; }
.plus { display: grid; place-items: center; font-family: var(--serif); font-size: 2.4rem; color: var(--gold); }
@media (max-width: 760px) { .name-origin { grid-template-columns: 1fr; } .plus { padding: 0; } }

/* big numbers row */
.bignums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.bignum { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px; }
.bignum b { font-family: var(--serif); font-weight: 800; font-size: 3.4rem; line-height: 1; display: block; color: var(--thread); }
.bignum span { display: block; margin-top: 12px; font-size: 15px; color: var(--ink-2); }
.bignum small { font-family: var(--mono); font-size: 11px; color: var(--muted); display: block; margin-top: 10px; }
@media (max-width: 760px) { .bignums { grid-template-columns: 1fr; } }

/* quote */
.quote { font-family: var(--serif); font-weight: 500; font-style: italic; font-size: clamp(1.5rem, 3vw, 2.2rem); line-height: 1.5; max-width: 30ch; }
.quote::before { content: "“"; color: var(--thread); }
.quote::after { content: "”"; color: var(--thread); }

/* ---------- case detail ---------- */
.case-meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); overflow: hidden; margin-top: 40px; }
.case-meta div { padding: 20px 22px; border-right: 1px solid var(--line); }
.case-meta div:last-child { border-right: 0; }
.case-meta small { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; color: var(--muted); display: block; text-transform: uppercase; }
.case-meta b { font-weight: 500; font-size: 15.5px; display: block; margin-top: 6px; }
@media (max-width: 760px) { .case-meta { grid-template-columns: 1fr 1fr; } .case-meta div:nth-child(2) { border-right: 0; } .case-meta div:nth-child(-n+2) { border-bottom: 1px solid var(--line); } }
.cover { border-radius: 28px; overflow: hidden; aspect-ratio: 21 / 9; margin-top: 48px; box-shadow: 0 40px 70px -45px rgba(31,42,68,.6); }
.cover img { width: 100%; height: 100%; object-fit: cover; }
.prose { max-width: 46rem; }
.prose h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 56px 0 18px; }
.prose h3 { font-size: 1.3rem; margin: 32px 0 12px; }
.prose p, .prose li { color: var(--ink-2); font-size: 16.5px; }
.two-col { display: grid; grid-template-columns: 1fr 22rem; gap: 64px; align-items: start; }
.aside { position: sticky; top: 100px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; }
.aside h4 { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; color: var(--thread); text-transform: uppercase; margin-bottom: 12px; font-weight: 400; }
.aside ul { list-style: none; padding: 0; margin: 0 0 20px; }
.aside li { padding: 9px 0; border-bottom: 1px dashed var(--line); font-size: 14.5px; }
.aside li:last-child { border-bottom: 0; }
.aside li small { display: block; color: var(--muted); font-size: 12.5px; }
@media (max-width: 960px) { .two-col { grid-template-columns: 1fr; } .aside { position: static; } }
.gallery { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; margin-top: 28px; }
.gallery figure { margin: 0; border-radius: 16px; overflow: hidden; position: relative; background: var(--paper-2); cursor: zoom-in; }
.gallery figure img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; transition: transform .5s; }
.gallery figure:hover img { transform: scale(1.04); }
.gallery figcaption { position: absolute; left: 10px; bottom: 10px; right: 10px; font-size: 12.5px; background: rgba(255,251,244,.92); padding: 6px 10px; border-radius: 8px; }
.gallery .g2 { grid-column: span 2; } .gallery .g3 { grid-column: span 3; } .gallery .g4 { grid-column: span 4; }
.gallery .tall img { aspect-ratio: 3/4; }
@media (max-width: 760px) { .gallery { grid-template-columns: 1fr 1fr; } .gallery .g2, .gallery .g3, .gallery .g4 { grid-column: span 1; } .gallery .wide-m { grid-column: span 2; } }
.feedback { display: grid; gap: 16px; margin-top: 20px; }
.fb { background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--thread); border-radius: 0 16px 16px 0; padding: 18px 22px; }
.fb b { display: block; font-weight: 500; margin-bottom: 6px; }
.fb p { margin: 0; font-size: 15px; }
.timeline { list-style: none; padding: 0; margin: 24px 0 0; border-left: 2px dashed var(--thread); }
.timeline li { padding: 0 0 26px 26px; position: relative; }
.timeline li::before { content: ""; position: absolute; left: -8px; top: 6px; width: 14px; height: 14px; border-radius: 50%; background: var(--paper); border: 2px solid var(--thread); }
.timeline .date { display: block; margin-bottom: 4px; }
.timeline b { font-weight: 500; }

/* lightbox */
.lightbox { position: fixed; inset: 0; background: rgba(20, 26, 42, .92); display: none; place-items: center; z-index: 200; padding: 24px; }
.lightbox.open { display: grid; }
.lightbox img { max-width: min(1200px, 100%); max-height: 86vh; border-radius: 12px; }
.lightbox button { position: absolute; top: 18px; right: 18px; width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--paper); font-size: 20px; cursor: pointer; }

/* ---------- access / contact ---------- */
.map { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); aspect-ratio: 16 / 10; background: var(--paper-2); }
.map iframe { width: 100%; height: 100%; border: 0; display: block; }
.routes { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.routes li { display: grid; grid-template-columns: 64px 1fr; gap: 14px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; font-size: 15px; }
.routes .min { font-family: var(--serif); font-weight: 800; font-size: 1.6rem; color: var(--thread); text-align: center; line-height: 1; }
.routes .min small { font-family: var(--mono); font-size: 10px; display: block; color: var(--muted); }
.form { display: grid; gap: 18px; background: var(--card); border: 1px solid var(--line); border-radius: 24px; padding: 32px; box-shadow: var(--shadow); }
.form label { display: grid; gap: 8px; font-size: 14px; font-weight: 500; }
.form input, .form select, .form textarea {
  font: inherit; font-weight: 400; padding: 13px 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--paper);
  color: var(--ink); width: 100%;
}
.form input:focus, .form select:focus, .form textarea:focus { outline: 2px solid var(--thread); outline-offset: 1px; border-color: transparent; }
.form textarea { min-height: 150px; resize: vertical; }
.form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form .err { color: #B3261E; font-size: 13px; display: none; }
.form .err.show { display: block; }
.form .note { font-size: 13px; color: var(--muted); margin: 0; }
@media (max-width: 640px) { .form .row2 { grid-template-columns: 1fr; } .form { padding: 22px; } }

/* ---------- CTA band ---------- */
.cta-band { background: var(--thread); color: #FFF6EC; border-radius: 32px; padding: 64px; display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center; position: relative; overflow: hidden; }
.cta-band h2 { font-size: clamp(1.8rem, 3.6vw, 2.8rem); color: #FFF8EE; }
.cta-band p { color: #FBE3D6; margin: 14px 0 0; max-width: 36rem; }
.cta-band svg { position: absolute; right: -30px; bottom: -40px; width: 340px; opacity: .25; }
@media (max-width: 760px) { .cta-band { grid-template-columns: 1fr; padding: 40px 28px; } }

/* ---------- footer ---------- */
.site-footer { background: var(--ink); color: #D9D2C3; padding: 80px 0 32px; margin-top: 0; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; }
.site-footer .flogo img { height: 44px; width: auto; margin-bottom: 20px; }
.site-footer .tagline { font-family: var(--serif); font-weight: 700; font-size: 1.5rem; color: #FFF8EE; margin-bottom: 12px; }
.site-footer p { font-size: 14px; color: #B9B2A3; }
.site-footer h4 { font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em; color: var(--gold); text-transform: uppercase; margin-bottom: 16px; font-weight: 400; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.site-footer a { text-decoration: none; font-size: 14.5px; color: #E7E0D2; }
.site-footer a:hover { color: var(--gold); }
.site-footer address { font-style: normal; font-size: 14px; line-height: 1.75; color: #D9D2C3; }
.site-footer address b { display: block; font-weight: 500; color: #FFF8EE; margin-bottom: 2px; }
.site-footer address + address { margin-top: 16px; }
.foot-bottom { margin-top: 56px; padding-top: 24px; border-top: 1px solid rgba(217,210,195,.18); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-family: var(--mono); font-size: 11.5px; color: #9A9384; letter-spacing: .04em; }
@media (max-width: 900px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .foot-grid { grid-template-columns: 1fr; } }

/* reveal on scroll */
html.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
html.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { html.js .reveal { opacity: 1; transform: none; transition: none; } }

/* CJK headings read better a little wider */
html[data-lang="ja"] .sec-head h2, html[data-lang="zh"] .sec-head h2 { max-width: 30ch; }
html[data-lang="ja"] .mission-big, html[data-lang="zh"] .mission-big { max-width: 26ch; }
html[data-lang="ja"] .hero h1, html[data-lang="zh"] .hero h1 { font-weight: 700; }
html[data-lang="ja"] .page-hero h1, html[data-lang="zh"] .page-hero h1 { max-width: 26ch; }

/* ---------- market & barrier stats (about page) ---------- */
.sub-head { font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin: 64px 0 24px; }
.sub-head em, .barrier h3 em { font-style: normal; color: var(--thread); }
.bignum b small { font-family: inherit; }
.barrier {
  display: grid; grid-template-columns: 1.25fr 1fr; gap: 48px; align-items: center; margin-top: 64px;
  background: var(--card); border: 1px solid var(--line); border-radius: 24px; padding: 40px; box-shadow: var(--shadow);
}
.barlist { display: grid; gap: 14px; }
.bar-row { display: grid; grid-template-columns: minmax(9rem, 13rem) 1fr 4rem; gap: 14px; align-items: center; font-size: 15px; }
.bar-row .bl { color: var(--ink-2); }
.bar-row .track { height: 14px; display: block; }
.bar-row .track i { display: block; height: 100%; border-radius: 0 4px 4px 0; background: #CFC4B0; }
.bar-row b { font-family: var(--serif); font-weight: 800; font-size: 1.15rem; text-align: right; color: var(--ink); }
.bar-row.key .bl { color: var(--ink); font-weight: 600; }
.bar-row.key .track i { background: var(--thread); }
.bar-row.key b { font-size: 1.5rem; }
.barrier-note { border-left: 2px dashed var(--thread); padding-left: 32px; }
.sixsix { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; font-size: 14.5px; color: var(--ink-2); }
.sixsix b { font-family: var(--serif); font-weight: 800; font-size: 3rem; color: var(--thread); line-height: 1; }
.sixsix b small { font-size: .5em; color: var(--muted); }
@media (max-width: 900px) {
  .barrier { grid-template-columns: 1fr; padding: 26px 22px; gap: 32px; }
  .barrier-note { border-left: 0; border-top: 2px dashed var(--thread); padding: 24px 0 0; }
}
@media (max-width: 520px) {
  .bar-row { grid-template-columns: 1fr 3.6rem; row-gap: 6px; }
  .bar-row .bl { grid-column: 1 / -1; }
}

/* compact related-page links (Mediator style) */
.mini-links { display: flex; flex-wrap: wrap; gap: 12px; border-top: 1px solid var(--line); padding-top: 28px; }
.mini-links a {
  display: inline-flex; align-items: center; gap: 12px; padding: 10px 14px 10px 16px; border: 1px solid var(--line);
  border-radius: 999px; background: var(--card); text-decoration: none; font-size: 14px; transition: border-color .2s, background .2s;
}
.mini-links a:hover { border-color: var(--thread); }
.mini-links .ml-en { font-family: var(--mono); font-weight: 700; font-size: 11px; letter-spacing: .1em; color: var(--thread); }
.mini-links .ml-t { font-weight: 500; }
.mini-links .ml-go { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--paper-2); font-size: 12px; transition: .2s; }
.mini-links a:hover .ml-go { background: var(--thread); color: #fff; }

/* compact access info */
.btn-sm { padding: 9px 16px; font-size: 13.5px; gap: 8px; }
.access-info h2 { font-size: 1.3rem; margin: 8px 0 10px; }
.access-info .addr { font-size: 14px; line-height: 1.7; color: var(--ink-2); margin-bottom: 18px; }
.access-info .routes { gap: 8px; margin: 0 0 18px; }
.access-info .routes li { grid-template-columns: 40px 1fr; gap: 10px; padding: 8px 12px; border-radius: 10px; font-size: 13.5px; }
.access-info .routes .min { font-size: 1.15rem; }
.access-info .routes .min small { font-size: 9px; }
.access-btns { display: flex; flex-wrap: wrap; gap: 8px; }

/* about page: compressed statistics */
.src { font-size: 12.5px; color: var(--muted); margin: 12px 0 0; }
.src a { color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
.src a:hover { color: var(--thread); text-decoration-color: currentColor; }
.why-stats .sec-head { margin-bottom: 24px; }
html[data-lang] .why-stats .sec-head h2, html[data-lang] .why-stats .sub-head { font-size: clamp(1.25rem, 2.2vw, 1.6rem); max-width: none; }
.why-stats .sub-head { margin: 48px 0 18px; }
.why-stats .bignums { gap: 16px; }
.why-stats .bignum { padding: 20px 22px; border-radius: 16px; }
.why-stats .bignum b { font-size: 2.3rem; }
.why-stats .bignum span { font-size: 14px; margin-top: 8px; }
.why-stats .bignum small { margin-top: 6px; }
.why-stats .barrier { margin-top: 48px; padding: 28px 30px; gap: 36px; border-radius: 18px; }
.why-stats .bar-row { font-size: 14px; gap: 12px; }
.why-stats .bar-row .track { height: 11px; }
.why-stats .bar-row b { font-size: 1rem; }
.why-stats .bar-row.key b { font-size: 1.2rem; }
.why-stats .barrier-note { padding-left: 26px; }
.why-stats .sixsix { font-size: 13.5px; }
.why-stats .sixsix b { font-size: 2.3rem; }
@media (max-width: 900px) { .why-stats .barrier-note { padding-left: 0; } }
.bignum small span, .why-stats .bignum small span { font-size: inherit; margin: 0; display: inline; color: inherit; }

/* services page: text first, photo underneath */
.svc.stacked { grid-template-columns: 1fr; gap: 40px; }
.svc.stacked .svc-visual { order: 2; }
.svc.stacked > .reveal:not(.svc-visual) { display: grid; grid-template-columns: 1fr 1fr; column-gap: 56px; align-items: start; }
.svc.stacked > .reveal:not(.svc-visual) > :not(.checklist) { grid-column: 1; }
.svc.stacked .checklist { grid-column: 2; grid-row: 1 / span 6; margin: 8px 0 0; }
.svc.stacked .svc-visual .main { aspect-ratio: 21 / 9; }
.svc.stacked .svc-visual .inset { width: 26%; right: 28px; bottom: -28px; }
.svc.stacked .svc-num { font-size: 3.4rem; }
.svc.stacked > .reveal > .btn { justify-self: start; margin-top: 8px; }
@media (max-width: 900px) {
  .svc.stacked > .reveal:not(.svc-visual) { grid-template-columns: 1fr; }
  .svc.stacked .checklist { grid-column: 1; grid-row: auto; margin: 16px 0 24px; }
  .svc.stacked .svc-visual .main { aspect-ratio: 4 / 3; }
  .svc.stacked .svc-visual .inset { width: 42%; right: 10px; }
}

/* anonymised buyer feedback cards */
.fb-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
.fb-grid .fb { border-left-width: 3px; padding: 16px 18px; }
.fb-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.fb-cat { font-weight: 700; font-size: 15px; color: var(--ink); }
.fb-grid .tag { font-size: 11px; padding: 3px 9px; }
.fb-grid p { font-size: 14.5px; color: var(--ink-2); }
.fb-q { margin-top: 8px !important; font-style: italic; color: var(--thread) !important; font-weight: 500; }
@media (max-width: 720px) { .fb-grid { grid-template-columns: 1fr; } }

/* gallery captions: overlaid on the photo, no white box */
.gallery figure { border-radius: 18px; }
.gallery figure::after {
  content: ""; position: absolute; inset: 45% 0 0 0; pointer-events: none;
  background: linear-gradient(to top, rgba(20, 27, 45, .82), rgba(20, 27, 45, 0));
  transition: opacity .3s;
}
.gallery figcaption {
  position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 1; padding: 0; background: none; border-radius: 0;
  color: #FFF8EE; font-size: 14px; font-weight: 600; line-height: 1.35; display: flex; flex-direction: column; gap: 4px;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .25);
}
.gallery figcaption small {
  align-self: flex-start; font-family: var(--mono); font-weight: 700; font-size: 10.5px; letter-spacing: .14em;
  color: var(--ink); background: var(--gold); padding: 2px 8px; border-radius: 999px; text-shadow: none;
}
.gallery figcaption .cap { display: flex; align-items: center; gap: 8px; }
.gallery figcaption .cap::before { content: ""; width: 14px; height: 2px; background: var(--thread); border-radius: 2px; flex-shrink: 0; }

/* event 2 gallery: 4-column mosaic, big lead photo */
.gallery.gx { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 210px; gap: 12px; }
.gallery.gx figure img { aspect-ratio: auto; height: 100%; }
.gallery.gx .gx-hero { grid-column: span 2; grid-row: span 2; }
.gallery.gx .gx-hero figcaption { font-size: 17px; left: 22px; bottom: 20px; }
.gallery.gx .gx-wide { grid-column: span 2; }
@media (max-width: 760px) {
  .gallery.gx { grid-template-columns: 1fr 1fr; grid-auto-rows: 150px; }
  .gallery.gx .gx-hero { grid-column: span 2; grid-row: span 2; }
  .gallery.gx figcaption { left: 10px; right: 10px; bottom: 10px; font-size: 12.5px; }
}

/* filter tabs: compact text tabs with a red-thread underline */
.filters { gap: 4px 26px; border-bottom: 1px solid var(--line); margin-bottom: 32px; padding: 0 2px; }
.filters button {
  font-size: 14px; font-weight: 500; padding: 10px 0 12px; border: 0; border-radius: 0; background: none;
  color: var(--muted); position: relative; display: inline-flex; align-items: baseline; gap: 6px;
}
.filters button:hover { color: var(--ink); border: 0; }
.filters button::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 2px;
  background: var(--thread); transform: scaleX(0); transform-origin: left; transition: transform .25s;
}
.filters button[aria-pressed="true"] { background: none; color: var(--ink); font-weight: 700; }
.filters button[aria-pressed="true"]::after { transform: scaleX(1); }
.filters button .count {
  font-family: var(--mono); font-size: 10.5px; font-weight: 700; opacity: 1; margin: 0;
  min-width: 18px; padding: 1px 5px; border-radius: 999px; background: var(--paper-2); color: var(--muted); text-align: center;
}
.filters button[aria-pressed="true"] .count { background: var(--thread); color: #FFF8EE; }

/* ---------- English: Margins-style type hierarchy ----------
   Titles: Source Serif, regular weight, size does the work.
   Body & nav: Nunito.  Small labels & buttons: Pontano Sans, uppercase, tracked. */
html[data-lang="en"] {
  --serif: "Source Serif 4", "Source Serif Pro", Georgia, serif;
  --sans: "Nunito", system-ui, sans-serif;
  --mono: "Pontano Sans", "Nunito", sans-serif;
}
html[data-lang="en"] body { font-size: 16.5px; line-height: 1.75; }
html[data-lang="en"] h1, html[data-lang="en"] h2, html[data-lang="en"] h3, html[data-lang="en"] h4 { font-weight: 400; letter-spacing: -.012em; }
html[data-lang="en"] .hero h1 { font-size: clamp(3rem, 6.6vw, 5.4rem); line-height: 1.06; }
html[data-lang="en"] .page-hero h1 { font-size: clamp(2.4rem, 5vw, 4rem); line-height: 1.1; }
html[data-lang="en"] .sec-head h2 { font-size: clamp(2rem, 3.6vw, 2.7rem); line-height: 1.15; }
html[data-lang="en"] .mission-big { font-size: clamp(2.1rem, 4.4vw, 3.6rem); line-height: 1.12; }
html[data-lang="en"] .card h3, html[data-lang="en"] .pillar h3 { font-size: 1.4rem; line-height: 1.25; }
html[data-lang="en"] .member h3 { font-size: 2rem; }
html[data-lang="en"] .lead { font-size: 1.15rem; line-height: 1.8; }
html[data-lang="en"] .label, html[data-lang="en"] .mono, html[data-lang="en"] .svc .en-sub,
html[data-lang="en"] .member .role, html[data-lang="en"] .aside h4, html[data-lang="en"] .site-footer h4 {
  font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
}
html[data-lang="en"] .btn { font-family: var(--sans); font-weight: 700; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; }
html[data-lang="en"] .btn-sm { font-size: 12px; }
html[data-lang="en"] .mainnav a, html[data-lang="en"] .mainnav button.navbtn { font-weight: 600; font-size: 15px; }
html[data-lang="en"] .stat b, html[data-lang="en"] .bignum b, html[data-lang="en"] .sticker b,
html[data-lang="en"] .svc-num, html[data-lang="en"] .routes .min, html[data-lang="en"] .bar-row b { font-weight: 500; }
html[data-lang="en"] .quote { font-weight: 400; font-style: italic; }
html[data-lang="en"] .site-footer .tagline { font-weight: 400; font-style: italic; }
html[data-lang="en"] .fb-cat, html[data-lang="en"] .face b { font-family: var(--serif); font-weight: 500; }
html[data-lang="en"] .gallery figcaption { font-family: var(--serif); font-weight: 500; }
html[data-lang="en"] .filters button { font-weight: 600; }

/* ---------- hand-drawn marks: underline (.mk-u) and circle (.mk-o) ---------- */
.mk-u, .mk-o { position: relative; white-space: nowrap; }
.mk-u::after, .mk-o::after { content: ""; position: absolute; pointer-events: none; background-repeat: no-repeat; background-size: 100% 100%; }
.mk-u::after {
  left: -3%; right: -3%; bottom: -.16em; height: .34em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M3 12 C 45 6, 110 4, 197 7' fill='none' stroke='%23C4532F' stroke-width='3.4' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M14 16 C 70 11, 130 12, 176 13' fill='none' stroke='%23C4532F' stroke-width='2.4' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}
.mk-o::after {
  left: -.32em; right: -.32em; top: -.2em; bottom: -.24em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 80' preserveAspectRatio='none'%3E%3Cpath d='M124 7 C 64 1, 8 16, 7 41 C 6 68, 84 78, 148 72 C 192 67, 199 34, 172 17 C 146 3, 96 3, 58 11' fill='none' stroke='%23C4532F' stroke-width='3' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}
html.js .mk-u::after, html.js .mk-o::after { clip-path: inset(0 100% 0 0); transition: clip-path 1.1s cubic-bezier(.6,.1,.3,1) .35s; }
html.js .mk-u.in::after, html.js .mk-o.in::after { clip-path: inset(0 0 0 0); }
@media (prefers-reduced-motion: reduce) { html.js .mk-u::after, html.js .mk-o::after { clip-path: none; transition: none; } }
.sec-dark .mk-u::after, .sec-dark .mk-o::after { filter: brightness(1.25); }
.mk-o { margin: 0 .22em; }
html[data-lang="ja"] .mk-o, html[data-lang="zh"] .mk-o { margin: 0 .12em; }
html[data-lang="en"] .mission-big { max-width: 24ch; }

/* ---------- 2027 Tokyo salon page ---------- */
.nav-new { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--thread); margin-left: 6px; vertical-align: super; }
.salon-hero-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 56px; align-items: center; }
.salon-hero .hero-ctas { margin-top: 28px; }
.salon-facts { background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 22px 24px 24px; box-shadow: var(--shadow); display: grid; gap: 2px; }
.sf-row { display: grid; grid-template-columns: 4.5rem 1fr; gap: 12px; align-items: baseline; padding: 10px 0; border-bottom: 1px dashed var(--line); }
.sf-row small { font-family: var(--mono); font-weight: 700; font-size: 11px; letter-spacing: .1em; color: var(--thread); text-transform: uppercase; }
.sf-row b { font-weight: 600; font-size: 15px; }
.sf-photo { margin-top: 14px; border-radius: 14px; overflow: hidden; aspect-ratio: 16 / 9; }
.sf-photo img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) { .salon-hero-grid { grid-template-columns: 1fr; gap: 36px; } }

.briefing { display: grid; grid-template-columns: auto 1fr; gap: 40px; align-items: center; background: var(--ink); color: #F3ECDF; border-radius: 28px; padding: 40px 44px; position: relative; overflow: hidden; }
.br-date { width: 132px; aspect-ratio: 1; border-radius: 22px; background: var(--paper); color: var(--ink); display: grid; place-items: center; align-content: center; gap: 2px; text-align: center; box-shadow: 0 0 0 6px rgba(214,170,85,.35); }
.br-mon { font-family: var(--mono); font-weight: 700; font-size: 13px; letter-spacing: .2em; color: var(--thread); }
.br-day { font-family: var(--serif); font-weight: 800; font-size: 3.6rem; line-height: 1; }
.br-wd { font-size: 12px; color: var(--muted); }
.briefing h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); color: #FFF8EE; margin-bottom: 10px; }
.br-time { color: #E7E0D2; margin-bottom: 12px; }
.br-time b { color: var(--gold); font-family: var(--serif); font-size: 1.25rem; margin-right: 4px; }
.br-list { list-style: none; padding: 0; margin: 0 0 22px; display: flex; flex-wrap: wrap; gap: 8px; }
.br-list li { font-size: 13.5px; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(243,236,223,.25); color: #E7E0D2; }
@media (max-width: 720px) { .briefing { grid-template-columns: 1fr; padding: 28px 24px; gap: 24px; } .br-date { width: 104px; } .br-day { font-size: 2.8rem; } }

.pain { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 24px 24px 26px; display: grid; gap: 10px; align-content: start; }
.pain-n { font-family: var(--serif); font-weight: 800; font-size: 2rem; color: var(--thread); line-height: 1; }
.pain h3 { font-size: 1.25rem; }
.pain p { font-size: 14.5px; color: var(--ink-2); margin: 0; }

.hl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.hl { background: var(--card); border: 1px solid var(--line); border-radius: 22px; overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow); }
.hl-img { aspect-ratio: 16 / 8; overflow: hidden; }
.hl-img img { width: 100%; height: 100%; object-fit: cover; }
.hl-body { padding: 24px 26px 6px; }
.hl-body h3 { font-size: 1.35rem; margin: 8px 0 4px; }
.hl .checklist li { font-size: 14.5px; }
@media (max-width: 900px) { .hl-grid { grid-template-columns: 1fr; } }

.proof { display: grid; grid-template-columns: 1fr 1.4fr; gap: 56px; align-items: center; }
.proof-big b { font-family: var(--serif); font-weight: 800; font-size: clamp(5rem, 11vw, 8rem); line-height: .9; color: var(--gold); display: block; }
.proof-big b small { font-size: .45em; }
.proof-big p { color: #E7E0D2; font-size: 1.1rem; margin-top: 16px; max-width: 26rem; }
.proof-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.proof-steps li { display: grid; grid-template-columns: 3.2rem 1fr; gap: 14px; align-items: center; padding: 14px 18px; border-radius: 14px; background: rgba(243,236,223,.06); border: 1px solid rgba(243,236,223,.14); color: #E7E0D2; font-size: 14.5px; }
.proof-steps b { font-family: var(--serif); font-weight: 800; font-size: 1.9rem; color: #FFF8EE; text-align: center; }
.proof-steps li:last-child { border-color: var(--thread); }
@media (max-width: 860px) { .proof { grid-template-columns: 1fr; gap: 28px; } }

.days { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-left: 2px dashed var(--thread); }
.day { padding: 4px 28px 8px; position: relative; display: grid; gap: 10px; align-content: start; }
.day::before { content: ""; position: absolute; left: -8px; top: 6px; width: 14px; height: 14px; border-radius: 50%; background: var(--paper); border: 2px solid var(--thread); }
.day + .day { border-left: 1px solid var(--line); }
.day-tag { font-family: var(--mono); font-weight: 700; font-size: 12px; letter-spacing: .08em; color: var(--thread); }
.day h3 { font-size: 1.25rem; }
.day p { font-size: 14.5px; color: var(--ink-2); margin: 0; }
.day .tag { justify-self: start; }
@media (max-width: 860px) { .days { grid-template-columns: 1fr; } .day { padding-bottom: 26px; } .day + .day { border-left: 0; } }

.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; }
.plan { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 26px 24px 18px; display: grid; gap: 8px; }
.plan-id { font-family: var(--serif); font-weight: 800; font-size: 1rem; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--paper-2); color: var(--ink); }
.plan h3 { font-size: 1.4rem; }
.plan-price { font-family: var(--serif); font-weight: 800; font-size: 2rem; margin: 2px 0; font-variant-numeric: tabular-nums; }
.plan-price small { font-family: var(--sans); font-weight: 500; font-size: 12.5px; color: var(--muted); margin-left: 6px; }
.plan-for { font-size: 14px; color: var(--ink-2); margin: 0; }
.plan-seats { font-family: var(--mono); font-weight: 700; font-size: 11.5px; letter-spacing: .06em; color: var(--thread); margin: 0; }
.plan .checklist { margin: 10px 0 8px; border-top: 1px solid var(--line); padding-top: 14px; }
.plan .checklist li { font-size: 14px; }
.plan-pop { border: 2px solid var(--thread); box-shadow: 0 30px 50px -30px rgba(196,83,47,.45); }
.plan-pop .plan-id { background: var(--thread); color: #FFF8EE; }
.plan-badge { position: absolute; top: -13px; right: 20px; background: var(--thread); color: #FFF8EE; font-size: 12px; font-weight: 700; padding: 4px 12px; border-radius: 999px; }
@media (max-width: 960px) { .plans { grid-template-columns: 1fr; max-width: 34rem; } }

.apply { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: center; }
.apply h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); margin-bottom: 20px; }
.apply-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.apply-steps li { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: center; font-size: 15px; }
.apply-steps b { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--paper); font-family: var(--serif); }
.apply-ctas { display: grid; gap: 12px; justify-items: start; }
@media (max-width: 860px) { .apply { grid-template-columns: 1fr; } }
.pill-news { text-decoration: none; transition: border-color .2s; max-width: 100%; }
.pill-news:hover { border-color: var(--thread); }
.pill-news b { font-family: var(--mono); font-weight: 700; font-size: 10.5px; letter-spacing: .1em; background: var(--thread); color: #FFF8EE; padding: 2px 8px; border-radius: 999px; }
html[data-lang="ja"] .sec-head h2, html[data-lang="zh"] .sec-head h2 { max-width: 40ch; }
html[data-lang="ja"] .page-hero h1, html[data-lang="zh"] .page-hero h1 { max-width: 36ch; }
html[data-lang] .salon-hero h1 { font-size: clamp(2rem, 3.8vw, 3.1rem); max-width: none; line-height: 1.3; }
html[data-lang="en"] .salon-hero h1 { line-height: 1.12; }
.early { font-size: 14px; color: var(--ink-2); margin: 16px 0 0; display: flex; align-items: center; gap: 8px; }
.early::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--thread); flex-shrink: 0; box-shadow: 0 0 0 4px var(--thread-soft); }
.early b { color: var(--thread); }
.sf-hot b { color: var(--thread); }
.lopia-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 6px; }
.lopia-facts div { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: grid; gap: 2px; }
.lopia-facts b { font-family: var(--serif); font-weight: 800; font-size: 1.5rem; color: var(--thread); line-height: 1.1; font-variant-numeric: tabular-nums; }
.lopia-facts b small { font-size: .5em; margin-left: 3px; color: var(--muted); }
.lopia-facts span { font-size: 12.5px; color: var(--ink-2); }
@media (max-width: 520px) { .lopia-facts { grid-template-columns: 1fr 1fr; } }
.lopia-facts b span { font-size: inherit; color: inherit; }

/* phones: long hand-drawn underlines may wrap, so use a plain thread underline instead */
.salon-hero-grid > *, .hero-grid > *, .two-col > *, .grid-2 > *, .grid-3 > * { min-width: 0; }
@media (max-width: 600px) {
  .mk-u { white-space: normal; text-decoration: underline; text-decoration-color: var(--thread); text-decoration-thickness: .1em; text-underline-offset: .2em; text-decoration-skip-ink: none; }
  .mk-u::after { display: none; }
  .thread-deco { width: 150px; max-width: 40vw; right: -24px; top: 12px; opacity: .45; }
}