/* =========================================================
   日禾科研 Nihon Lab — base styles
   Brand colours come from the logo (#74160E) and the PIF profile PDF.
   ========================================================= */

:root {
  --c-brand: #74160e;
  --c-brand-deep: #5a1009;
  --c-brand-ink: #551209;
  --c-rose: #f2c9b8;
  --c-bg: #faf7f4;
  --c-beige: #f4efeb;
  --c-beige-2: #ede5df;
  --c-line: #d8c3ba;
  --c-line-soft: #e8ddd6;
  --c-text: #2a2220;
  --c-sub: #6b5f5a;
  --c-white: #ffffff;

  --f-serif: "Shippori Mincho B1", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
  --f-sans: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --f-en: "Jost", "Futura", "Century Gothic", sans-serif;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  --header-h: 88px;
  --gutter: clamp(16px, 5vw, 56px);
  --container: 1200px;
  --section-y: clamp(88px, 11vw, 168px);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--f-sans);
  font-size: 16px;
  line-height: 1.9;
  letter-spacing: 0.04em;
  font-feature-settings: "palt" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p, figure, dl, dd { margin: 0; }
/* Break Japanese headings at phrase (文節) boundaries where supported. */
h1, h2, h3, .concerns__list p, .hero__lead, .sec-head__lead { word-break: auto-phrase; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--c-brand); outline-offset: 3px; }
::selection { background: var(--c-brand); color: var(--c-white); }

.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 200;
  background: var(--c-brand); color: var(--c-white); padding: 10px 16px; font-size: 14px;
}
.skip-link:focus { top: 16px; }

.container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); position: relative; }
.muted { color: var(--c-sub); }
.small { font-size: 13px; line-height: 1.8; }

/* ---------- type helpers ---------- */
.eyebrow {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--f-en); font-size: 13px; font-weight: 400;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--c-brand);
  line-height: 1; margin-bottom: 22px;
}
.eyebrow:not(.hero__eyebrow)::before { content: ""; width: 28px; height: 1px; background: currentColor; }
.eyebrow__ja { padding-left: 14px; border-left: 1px solid var(--c-line); font-family: var(--f-sans); font-size: 12.5px; letter-spacing: 0.14em; text-transform: none; color: var(--c-sub); }
.eyebrow__line { width: 44px; height: 1px; background: currentColor; }

.sec-head { margin-bottom: clamp(44px, 6vw, 80px); }
.sec-head__title {
  font-family: var(--f-serif); font-weight: 600;
  font-size: clamp(24px, 3.1vw, 38px); line-height: 1.6; letter-spacing: 0.06em;
  word-break: auto-phrase;
}
.sec-head__lead { color: var(--c-sub); font-size: 15px; line-height: 2; max-width: 34em; }
.sec-head--split { display: grid; gap: 24px; }
@media (min-width: 900px) {
  .sec-head--split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: 64px; }
  .sec-head--split .sec-head__lead { justify-self: end; }
}
.sec-head--center { text-align: center; }
.sec-head--center .eyebrow { justify-content: center; }
.sec-head--center .sec-head__lead { margin: 18px auto 0; }
.sec-head--light .sec-head__title { color: var(--c-white); }
.sec-head--light .eyebrow { color: var(--c-rose); }
.sec-head--light .eyebrow__ja { border-color: rgba(255, 255, 255, 0.25); color: rgba(255, 255, 255, 0.72); }
.sec-head--light .sec-head__lead { margin-top: 24px; max-width: 46em; color: rgba(255, 255, 255, 0.78); }

.link-arrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 14px; font-weight: 500; letter-spacing: 0.08em; color: var(--c-text);
  padding-bottom: 6px; position: relative;
}
.link-arrow::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor;
  transform-origin: right; transition: transform 0.6s var(--ease-out);
}
.link-arrow:hover::after { transform: scaleX(0); }
.link-arrow svg { width: 18px; fill: none; stroke: var(--c-brand); stroke-width: 1.5; transition: transform 0.5s var(--ease-out); }
.link-arrow:hover svg { transform: translateX(5px); }

/* ---------- buttons ---------- */
.btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 16px;
  min-height: 56px; padding: 16px 28px;
  font-size: 15px; font-weight: 500; letter-spacing: 0.08em; line-height: 1.4;
  border-radius: 2px; transition: color 0.5s var(--ease-out), border-color 0.5s var(--ease-out);
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  transform: scaleX(0); transform-origin: right; transition: transform 0.6s var(--ease-out);
}
.btn:hover::before { transform: scaleX(1); transform-origin: left; }
.btn__arrow { width: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; transition: transform 0.5s var(--ease-out); }
.btn:hover .btn__arrow { transform: translateX(5px); }
.btn--primary { background: var(--c-brand); color: var(--c-white); }
.btn--primary::before { background: var(--c-brand-ink); }
.btn--ghost { border: 1px solid var(--c-text); color: var(--c-text); background: transparent; }
.btn--ghost::before { background: var(--c-text); }
.btn--ghost:hover { color: var(--c-white); }
.btn--sm { min-height: 46px; padding: 10px 20px; font-size: 14px; gap: 12px; }

/* =========================================================
   Language switch; Traditional Chinese typography
   ========================================================= */
html[lang="zh-Hant"] {
  --f-serif: "Noto Serif TC", "Songti TC", "PMingLiU", serif;
  --f-sans: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
}
html[lang="zh-Hant"] body { letter-spacing: 0.03em; }
.lang { display: none; align-items: center; gap: 10px; font-size: 13px; letter-spacing: 0.08em; white-space: nowrap; }
.lang__item { color: var(--c-sub); padding-block: 4px; transition: color 0.3s; }
.lang__item:hover { color: var(--c-brand); }
.lang__item.is-current { color: var(--c-text); font-weight: 500; border-bottom: 1px solid var(--c-brand); }
.lang__sep { width: 1px; height: 12px; background: var(--c-line); }
.lang--drawer { display: flex; justify-content: flex-end; margin-bottom: 20px; font-size: 14px; }
.lang--drawer .lang__item { color: rgba(255, 255, 255, 0.6); }
.lang--drawer .lang__item.is-current { color: var(--c-white); border-color: var(--c-rose); }
.lang--drawer .lang__sep { background: rgba(255, 255, 255, 0.25); }
@media (min-width: 640px) { .site-header .lang { display: flex; } }
@media (min-width: 1120px) { .site-header .lang { margin-left: auto; } .site-header__cta { margin-left: 0; } }

/* =========================================================
   Header / drawer
   ========================================================= */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 100; height: var(--header-h);
  transition: height 0.5s var(--ease-out), background-color 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
}
.site-header.is-scrolled {
  height: 70px; background: rgba(250, 247, 244, 0.95);
  box-shadow: 0 1px 0 var(--c-line-soft);
}
.site-header__inner {
  height: 100%; display: flex; align-items: center; gap: 32px;
  max-width: calc(1360px + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter);
}
.site-header__logo img { height: 52px; width: auto; transition: height 0.5s var(--ease-out); }
.site-header.is-scrolled .site-header__logo img { height: 44px; }
.gnav { margin-left: auto; display: none; }
@media (min-width: 1120px) { .gnav { margin-left: auto; } }
.gnav__list { display: flex; gap: clamp(18px, 2vw, 32px); }
.gnav__list a { position: relative; font-size: 14px; font-weight: 500; letter-spacing: 0.08em; padding-block: 6px; }
.gnav__list a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--c-brand);
  transform: scaleX(0); transform-origin: right; transition: transform 0.5s var(--ease-out);
}
.gnav__list a:hover::after { transform: scaleX(1); transform-origin: left; }
.site-header__cta { display: none; }
.menu-toggle { margin-left: auto; display: flex; align-items: center; gap: 12px; min-height: 44px; position: relative; z-index: 120; }
.menu-toggle__bars { position: relative; width: 28px; height: 10px; }
.menu-toggle__bars span { position: absolute; left: 0; width: 100%; height: 1px; background: currentColor; transition: transform 0.5s var(--ease-out), top 0.5s var(--ease-out); }
.menu-toggle__bars span:first-child { top: 0; }
.menu-toggle__bars span:last-child { top: 9px; }
.menu-toggle__label { font-family: var(--f-en); font-size: 12px; letter-spacing: 0.2em; }
.is-menu-open .menu-toggle { color: var(--c-white); }
.is-menu-open .menu-toggle__bars span:first-child { top: 5px; transform: rotate(20deg); }
.is-menu-open .menu-toggle__bars span:last-child { top: 5px; transform: rotate(-20deg); }
@media (min-width: 640px) { .site-header__cta { display: inline-flex; margin-left: auto; } .menu-toggle { margin-left: 0; } }
@media (min-width: 1120px) {
  .gnav { display: block; }
  .site-header__cta { margin-left: 0; }
  .menu-toggle { display: none; }
}

.drawer {
  position: fixed; inset: 0; z-index: 110; background: var(--c-brand-ink); color: var(--c-white);
  display: flex; align-items: center; padding: 100px var(--gutter) 48px;
  clip-path: inset(0 0 100% 0); transition: clip-path 0.8s var(--ease-in-out);
}
.drawer.is-open { clip-path: inset(0 0 0 0); }
.drawer[hidden] { display: none; }
.drawer__nav { width: 100%; max-width: 560px; margin-inline: auto; }
.drawer__nav li { border-bottom: 1px solid rgba(255, 255, 255, 0.14); opacity: 0; transform: translateY(16px); transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out); }
.drawer.is-open li { opacity: 1; transform: none; }
.drawer.is-open li:nth-child(2) { transition-delay: 0.05s; } .drawer.is-open li:nth-child(3) { transition-delay: 0.1s; }
.drawer.is-open li:nth-child(4) { transition-delay: 0.15s; } .drawer.is-open li:nth-child(5) { transition-delay: 0.2s; }
.drawer.is-open li:nth-child(6) { transition-delay: 0.25s; }
.drawer__nav a { display: flex; align-items: baseline; gap: 18px; padding: 18px 4px; font-family: var(--f-serif); font-size: 20px; letter-spacing: 0.08em; }
.drawer__en { width: 96px; flex: none; font-family: var(--f-en); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--c-rose); }
.drawer__cta { margin-top: 36px; width: 100%; background: var(--c-white); color: var(--c-brand); }
.drawer__cta::before { background: var(--c-beige); }
.is-menu-open { overflow: hidden; }
.is-menu-open .site-header { background: transparent; box-shadow: none; }
.is-menu-open .site-header__logo, .is-menu-open .site-header__cta { visibility: hidden; }

/* =========================================================
   Hero — copy on the left, a full-height portrait panel bleeding to the right edge
   ========================================================= */
.hero { position: relative; overflow: hidden; padding-top: var(--header-h); background: var(--c-bg); display: flex; flex-direction: column; }
.hero__network {
  position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.28) 30%, rgba(0, 0, 0, 0.28) 78%, #000 100%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.28) 30%, rgba(0, 0, 0, 0.28) 78%, #000 100%);
}
.hero__inner { order: 1; position: relative; z-index: 2; padding-block: clamp(36px, 7vw, 72px) 44px; }
.hero__eyebrow { margin-bottom: 30px; }
.hero__title {
  font-family: var(--f-serif); font-weight: 600;
  font-size: clamp(26px, 6.4vw, 44px); line-height: 1.55; letter-spacing: 0.05em;
  word-break: auto-phrase;
}
.hero__title .line { display: block; overflow: hidden; padding-bottom: 0.06em; }
.hero__title .line > span { display: inline-block; }
.hero__lead { margin-top: 30px; max-width: 32em; color: var(--c-sub); font-size: clamp(15px, 1.2vw, 16px); line-height: 2.1; }
.hero__actions { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 14px; }
.hero__assurances { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 8px 26px; font-size: 13px; color: var(--c-sub); }
.hero__assurances li { display: flex; align-items: center; gap: 10px; }
.hero__assurances li::before { content: ""; width: 14px; height: 1px; background: var(--c-brand); }

.hero__media { order: 2; position: relative; z-index: 1; margin: 0; aspect-ratio: 4 / 5; overflow: hidden; background: #d7dae3; }
.hero__media picture, .hero__media img { display: block; width: 100%; height: 100%; }
.hero__media img { object-fit: cover; object-position: 50% 12%; }
.hero__vertical { display: none; }
.hero__caption {
  order: 3; position: relative; z-index: 3; align-self: flex-start; margin: -40px 0 56px var(--gutter);
  display: grid; gap: 2px; padding: 14px 24px 14px 20px;
  background: var(--c-white); border-left: 2px solid var(--c-brand);
  box-shadow: 0 18px 40px -24px rgba(74, 15, 10, 0.35);
}
.hero__caption-role { font-size: 11.5px; color: var(--c-brand); letter-spacing: 0.12em; }
.hero__caption-name { font-family: var(--f-serif); font-size: 18px; font-weight: 600; letter-spacing: 0.1em; }
.hero__caption-name span { font-family: var(--f-en); font-size: 12px; font-weight: 400; letter-spacing: 0.14em; color: var(--c-sub); margin-left: 8px; }
.hero__scroll { display: none; }

@media (min-width: 960px) {
  :root { --hero-media-w: min(44vw, 720px); }
  .hero { display: block; min-height: min(100svh, 960px); }
  .hero__media { position: absolute; top: 0; right: 0; bottom: 0; width: var(--hero-media-w); aspect-ratio: auto; }
  .hero__media img { height: 108%; object-position: 50% 10%; }
  .hero .hero__inner {
    max-width: none; min-height: calc(min(100svh, 960px) - var(--header-h));
    display: flex; align-items: center;
    padding-left: max(var(--gutter), calc((100vw - var(--container)) / 2));
    padding-right: calc(var(--hero-media-w) + clamp(40px, 4vw, 72px));
    padding-block: 40px 96px;
  }
  .hero__title { font-size: clamp(28px, 2.85vw, 42px); }
  .hero__title .line > span { white-space: nowrap; }
  .hero__vertical {
    display: block; position: absolute; z-index: 2; right: 30px; top: calc(var(--header-h) + 48px);
    writing-mode: vertical-rl; font-family: var(--f-serif); font-size: 15px; letter-spacing: 0.42em; color: var(--c-brand);
  }
  /* Narrower desktops: keep the name card inside the photo panel so it never covers the copy. */
  .hero__caption { position: absolute; margin: 0; left: calc(100% - var(--hero-media-w) + 24px); bottom: 40px; }
  .hero__scroll {
    position: absolute; left: var(--gutter); bottom: 0; z-index: 4;
    display: flex; flex-direction: column; align-items: center; gap: 12px;
    font-family: var(--f-en); font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--c-sub);
  }
  .hero__scroll span { writing-mode: vertical-rl; }
  .hero__scroll i { position: relative; width: 1px; height: 64px; background: var(--c-line); overflow: hidden; }
  .hero__scroll i::after {
    content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 100%; background: var(--c-brand);
    animation: scrollLine 2.4s var(--ease-in-out) infinite;
  }
}
@keyframes scrollLine { 0% { transform: translateY(-100%); } 60%, 100% { transform: translateY(100%); } }
@media (min-width: 960px) and (max-width: 1199px) { .hero__scroll { display: none; } }
@media (min-width: 1200px) {
  /* Wide screens: the card straddles the edge between copy and photo. */
  .hero__caption { left: auto; right: calc(var(--hero-media-w) - 56px); bottom: 72px; }
}

/* =========================================================
   Information
   ========================================================= */
.info { background: var(--c-white); border-block: 1px solid var(--c-line-soft); }
.info__inner { display: grid; gap: 12px; padding-block: 36px; }
.info__title { display: flex; align-items: baseline; gap: 12px; font-family: var(--f-serif); font-weight: 600; font-size: 16px; letter-spacing: 0.12em; }
.info__title span { font-family: var(--f-en); font-weight: 400; font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--c-brand); }
.info__list li {
  display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; align-items: baseline;
  padding-block: 14px; border-bottom: 1px solid var(--c-line-soft); font-size: 14.5px;
}
.info__list li:last-child { border-bottom: 0; }
.info__list time { font-family: var(--f-en); letter-spacing: 0.1em; color: var(--c-sub); font-size: 14px; }
.info__tag { justify-self: start; font-size: 11.5px; padding: 1px 10px; border: 1px solid var(--c-line); color: var(--c-brand); letter-spacing: 0.1em; }
.info__list li > :last-child { grid-column: 1 / -1; }
.info__list a { text-decoration: underline; text-decoration-color: var(--c-line); text-underline-offset: 5px; transition: text-decoration-color 0.4s; }
.info__list a:hover { text-decoration-color: var(--c-brand); }
@media (min-width: 760px) {
  .info__inner { grid-template-columns: 200px minmax(0, 1fr); align-items: center; }
  .info__list li { grid-template-columns: 110px 96px minmax(0, 1fr); }
  .info__list li > :last-child { grid-column: auto; }
}

/* =========================================================
   Concerns
   ========================================================= */
.concerns__list { display: grid; border-top: 1px solid var(--c-line); }
.concerns__list li {
  display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 16px; align-items: start;
  padding: 26px 4px; border-bottom: 1px solid var(--c-line);
}
.concerns__check { width: 26px; height: 26px; margin-top: 3px; fill: none; stroke: var(--c-brand); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.concerns__list p { font-family: var(--f-serif); font-weight: 500; font-size: clamp(16px, 1.5vw, 19px); line-height: 1.8; letter-spacing: 0.05em; }
.concerns__closing { margin-top: 48px; text-align: center; font-family: var(--f-serif); font-size: clamp(16px, 1.6vw, 19px); color: var(--c-brand); letter-spacing: 0.08em; }
@media (min-width: 900px) {
  .concerns__list { grid-template-columns: 1fr 1fr; column-gap: 64px; border-top: 0; }
  .concerns__list li { border-top: 1px solid var(--c-line); border-bottom: 0; }
  .concerns__list li:nth-last-child(-n + 2) { border-bottom: 1px solid var(--c-line); }
}

/* =========================================================
   Approach: three pillars + conclusion band
   ========================================================= */
.approach { position: relative; overflow: hidden; background: var(--c-beige); }
.approach__watermark { position: absolute; right: -7%; top: -12%; width: min(540px, 70vw); opacity: 0.05; pointer-events: none; }
.approach .container { position: relative; }
.approach .sec-head--center .sec-head__lead { max-width: 42em; }
.approach__title { max-width: 24em; margin-inline: auto; }
.pillars { display: grid; gap: 16px; }
.pillar {
  position: relative; display: flex; flex-direction: column; padding: 30px 28px 26px;
  background: var(--c-white); border: 1px solid var(--c-line); border-top: 3px solid var(--c-brand);
  transition: transform 0.6s var(--ease-out), box-shadow 0.6s var(--ease-out);
}
.pillar:hover { transform: translateY(-6px); box-shadow: 0 30px 50px -36px rgba(74, 15, 10, 0.5); }
.pillar__no { font-family: var(--f-en); font-weight: 300; font-size: 44px; line-height: 1; color: var(--c-brand); letter-spacing: 0.02em; }
.pillar__icon { width: 46px; height: 46px; margin: 22px 0 18px; fill: none; stroke: var(--c-brand); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.pillar__icon circle { fill: var(--c-brand); stroke: none; }
.pillar__title { font-family: var(--f-serif); font-weight: 600; font-size: 21px; letter-spacing: 0.08em; line-height: 1.5; display: grid; gap: 4px; }
.pillar__title span { font-family: var(--f-en); font-weight: 400; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--c-sub); }
.pillar__desc { margin-top: 14px; font-size: 14.5px; line-height: 1.95; color: var(--c-sub); }
.pillar__benefit {
  margin-top: auto; padding-top: 18px; border-top: 1px solid var(--c-line-soft);
  display: flex; align-items: baseline; gap: 10px; font-weight: 500; font-size: 14px; letter-spacing: 0.04em; line-height: 1.7;
}
.pillar__benefit::before { content: ""; flex: none; width: 16px; height: 16px; border-radius: 50%; background: var(--c-brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px no-repeat; transform: translateY(2px); }
.pillar__desc + .pillar__benefit { margin-top: 22px; }
.approach__band {
  position: relative; margin-top: 28px; display: grid; gap: 28px; align-items: center;
  padding: clamp(36px, 5vw, 64px) clamp(24px, 5vw, 64px); background: var(--c-brand-ink); color: var(--c-white); overflow: hidden;
}
.approach__band::before { content: ""; position: absolute; inset: 14px; border: 1px solid rgba(255, 255, 255, 0.12); pointer-events: none; }
.venn-wrap { position: relative; width: min(100%, 420px); margin-inline: auto; }
.venn { width: 100%; overflow: visible; }
.venn__circle { fill: rgba(255, 255, 255, 0.045); stroke: var(--c-rose); stroke-width: 1.2; }
.venn__core-area circle { fill: var(--c-rose); opacity: 0.32; }
.venn__num { font-family: var(--f-en); font-size: 11px; letter-spacing: 0.24em; fill: var(--c-rose); text-anchor: middle; }
.venn__label { font-family: var(--f-serif); font-size: 15.5px; font-weight: 600; letter-spacing: 0.1em; fill: var(--c-white); text-anchor: middle; }
.venn__core circle { fill: var(--c-white); }
.approach__band-label { font-size: 13px; letter-spacing: 0.18em; color: var(--c-rose); display: flex; align-items: center; gap: 14px; }
.approach__band-label::before { content: ""; width: 28px; height: 1px; background: var(--c-rose); }
.approach__quote { margin-top: 18px; font-family: var(--f-serif); font-weight: 600; font-size: clamp(22px, 2.5vw, 32px); line-height: 1.7; letter-spacing: 0.08em; }
.approach__band-note { margin-top: 20px; max-width: 30em; font-size: 14px; line-height: 2; color: rgba(255, 255, 255, 0.72); }
@media (min-width: 760px) { .pillars { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
@media (min-width: 960px) { .approach__band { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(40px, 5vw, 80px); } }

/* =========================================================
   Taiwan PIF facts
   ========================================================= */
.pif-facts { background: var(--c-white); }
.facts { display: grid; gap: 0; border-top: 1px solid var(--c-line); }
.fact { padding: 40px 4px; border-bottom: 1px solid var(--c-line); }
.fact__figure { display: flex; align-items: baseline; gap: 6px; color: var(--c-brand); line-height: 1; margin-bottom: 22px; }
.fact__figure span { font-family: var(--f-en); font-weight: 300; font-size: clamp(46px, 5.4vw, 72px); letter-spacing: 0.02em; }
.fact__figure small { font-family: var(--f-serif); font-size: 18px; font-weight: 600; }
.fact__label { font-family: var(--f-serif); font-size: 19px; font-weight: 600; letter-spacing: 0.08em; margin-bottom: 12px; }
.fact p:last-child { font-size: 14.5px; color: var(--c-sub); line-height: 2; }
@media (min-width: 900px) {
  .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 0; }
  .fact { padding: 8px 40px 8px; border-bottom: 0; border-left: 1px solid var(--c-line); }
  .fact:first-child { border-left: 0; padding-left: 0; }
}
.pif-facts__foot { margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--c-line); display: flex; flex-wrap: wrap; gap: 24px 48px; align-items: center; justify-content: space-between; }
.pif-facts__note { font-size: 14px; line-height: 2; }
.pif-facts__note .muted { font-size: 12.5px; }

/* =========================================================
   Strength (dark)
   ========================================================= */
.strength { background: var(--c-brand-ink); color: var(--c-white); overflow: hidden; padding-top: 0; }
.strength__watermark {
  position: absolute; right: -18%; top: 34%; width: min(640px, 90vw); opacity: 0.022; pointer-events: none;
  animation: slowSpin 180s linear infinite;
}
@keyframes slowSpin { to { transform: rotate(360deg); } }
.marquee { overflow: hidden; padding-block: clamp(36px, 5vw, 64px) clamp(56px, 7vw, 96px); border-bottom: 1px solid rgba(255, 255, 255, 0.1); margin-bottom: var(--section-y); }
.marquee__track { display: flex; width: max-content; animation: marquee 60s linear infinite; }
.marquee__track span {
  display: flex; align-items: center; gap: 0.5em; padding-right: 0.5em; white-space: nowrap;
  font-family: var(--f-en); font-weight: 300; font-size: clamp(44px, 7vw, 104px); letter-spacing: 0.02em; line-height: 1;
  color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, 0.22);
}
.marquee__track i { width: 0.16em; height: 0.16em; border-radius: 50%; background: var(--c-rose); opacity: 0.6; flex: none; }
@keyframes marquee { to { transform: translateX(-50%); } }

.compare { display: grid; gap: 24px; position: relative; }
.compare__panel { border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 2px; padding: clamp(24px, 3vw, 40px); display: flex; flex-direction: column; }
.compare__panel--ours { border-color: rgba(255, 255, 255, 0.55); background: rgba(255, 255, 255, 0.05); }
.compare__title { display: block; font-size: 15px; letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.72); margin-bottom: 20px; }
.compare__panel--ours .compare__title { color: var(--c-white); font-weight: 500; }
.compare__svg { width: 100%; max-width: 330px; margin-inline: auto; overflow: visible; }
.compare__sub { display: block; margin-top: 4px; font-size: 12.5px; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.6); font-weight: 400; }
.compare__panel--ours .compare__sub { color: rgba(255, 255, 255, 0.78); }
.compare__title img { display: inline-block; vertical-align: -3px; margin-right: 8px; }
.cmp-node text.cmp-sub { font-size: 11.5px; fill: rgba(255, 255, 255, 0.6); letter-spacing: 0.1em; }
.cmp-node--key text.cmp-sub { fill: rgba(116, 22, 14, 0.75); font-weight: 500; }
.compare__note { margin-top: 16px; font-size: 12.5px; line-height: 1.8; color: rgba(255, 255, 255, 0.55); }
.compare__caption { margin-top: 22px; font-size: 14px; line-height: 1.95; color: rgba(255, 255, 255, 0.76); }
.cmp-node rect { fill: transparent; stroke: rgba(255, 255, 255, 0.34); stroke-width: 1; transition: fill 0.4s, stroke 0.4s; }
.cmp-node text, .cmp-badge text { font-family: var(--f-sans); font-size: 15px; letter-spacing: 0.06em; text-anchor: middle; fill: rgba(255, 255, 255, 0.86); }
.cmp-node.is-pulse rect { stroke: var(--c-rose); fill: rgba(242, 201, 184, 0.12); }
.cmp-node--ours rect { fill: rgba(255, 255, 255, 0.08); stroke: rgba(255, 255, 255, 0.85); }
.cmp-node--key rect { fill: var(--c-white); stroke: var(--c-white); }
.cmp-node--key text { fill: var(--c-brand); font-weight: 700; }
.cmp-node--key.is-pulse rect { fill: var(--c-rose); }
.cmp-line { stroke: rgba(255, 255, 255, 0.38); stroke-width: 1.5; stroke-dasharray: 3 6; }
.cmp-line--direct { stroke: var(--c-rose); stroke-width: 3; stroke-dasharray: none; stroke-linecap: round; }
.cmp-annot__tick { stroke: var(--c-rose); stroke-width: 1; }
.cmp-annot__main { font-family: var(--f-serif); font-weight: 700; font-size: 16px; letter-spacing: 0.06em; fill: var(--c-white); }
.cmp-annot__sub { font-family: var(--f-sans); font-size: 11.5px; letter-spacing: 0.1em; fill: var(--c-rose); }
.cmp-badge rect { fill: var(--c-beige); }
.cmp-badge text { fill: var(--c-brand); font-weight: 700; font-size: 14px; }
.cmp-dot { fill: var(--c-rose); }
@media (min-width: 820px) { .compare { grid-template-columns: 1fr 1fr; gap: 32px; } }

.strength__points { display: grid; gap: 36px; margin-top: clamp(56px, 7vw, 96px); }
.strength__points li { border-top: 1px solid rgba(255, 255, 255, 0.22); padding-top: 26px; }
.strength__points li:first-child { border-top-color: var(--c-rose); }
.strength__points h3 { font-family: var(--f-serif); font-weight: 600; font-size: 20px; letter-spacing: 0.06em; line-height: 1.6; margin-bottom: 12px; }
.strength__kicker { display: inline-block; margin-bottom: 14px; padding: 2px 12px; border: 1px solid var(--c-rose); border-radius: 999px; font-size: 12px; letter-spacing: 0.16em; color: var(--c-rose); }
.strength__points li:first-child .strength__kicker { background: var(--c-rose); color: var(--c-brand-ink); font-weight: 700; }
.strength__no { font-family: var(--f-en); font-weight: 400; font-size: 13px; letter-spacing: 0.1em; color: var(--c-rose); min-width: 22px; }
.strength__points p { font-size: 14.5px; line-height: 2; color: rgba(255, 255, 255, 0.74); }
@media (min-width: 900px) { .strength__points { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; } }

/* =========================================================
   Chinese home: Japanese documents → Nihon Lab → Taiwan PIF bridge; partner labs
   ========================================================= */
.bridge { display: grid; gap: 14px; }
.bridge__col { position: relative; display: flex; flex-direction: column; padding: 26px 24px 24px; border: 1px solid rgba(255, 255, 255, 0.18); }
.bridge__col--me { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.55); }
.bridge__col--me > img { width: 28px; height: auto; margin-bottom: 12px; }
.bridge__label { display: grid; gap: 2px; margin-bottom: 14px; font-family: var(--f-serif); font-weight: 600; font-size: 19px; letter-spacing: 0.08em; line-height: 1.4; }
.bridge__label span { font-family: var(--f-en); font-weight: 400; font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--c-rose); }
.bridge__list { display: grid; gap: 8px; font-size: 14px; line-height: 1.8; color: rgba(255, 255, 255, 0.82); }
.bridge__list li { position: relative; padding-left: 16px; }
.bridge__list li::before { content: ""; position: absolute; left: 0; top: 0.85em; width: 8px; height: 1px; background: var(--c-rose); }
.bridge__col--me .bridge__list { color: var(--c-white); }
.bridge__lang { margin-top: auto; align-self: flex-start; display: inline-block; }
.bridge__col .bridge__lang { margin-top: 18px; padding: 2px 12px; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 999px; font-size: 12px; letter-spacing: 0.14em; color: rgba(255, 255, 255, 0.8); }
.bridge__arrow { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--c-rose); font-size: 12.5px; letter-spacing: 0.1em; line-height: 1.6; text-align: center; }
.bridge__arrow svg { width: 24px; fill: none; stroke: var(--c-rose); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transform: rotate(90deg); }
@media (min-width: 960px) {
  .bridge { grid-template-columns: minmax(0, 1fr) 104px minmax(0, 1.15fr) 104px minmax(0, 1fr); gap: 0; align-items: stretch; }
  .bridge__arrow svg { transform: none; }
}
.lab { margin-top: clamp(48px, 6vw, 72px); padding-top: clamp(32px, 4vw, 48px); border-top: 1px solid rgba(255, 255, 255, 0.18); }
.lab .eyebrow { color: var(--c-rose); }
.lab .eyebrow__ja { color: rgba(255, 255, 255, 0.72); border-color: rgba(255, 255, 255, 0.25); }
.lab__title { margin-top: 4px; font-family: var(--f-serif); font-weight: 600; font-size: clamp(21px, 2.3vw, 28px); letter-spacing: 0.06em; line-height: 1.6; }
.lab__lead { margin-top: 14px; max-width: 46em; font-size: 14.5px; line-height: 2; color: rgba(255, 255, 255, 0.78); }
.lab + .strength__points { margin-top: 36px; }

/* =========================================================
   Numbers
   ========================================================= */
.numbers { background: var(--c-white); padding-block: clamp(64px, 8vw, 112px); }
.numbers__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px 0; }
.number { padding-inline: clamp(12px, 2.4vw, 36px); border-left: 1px solid var(--c-line); }
.number__value { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 4px; color: var(--c-brand); line-height: 1; }
.number__value span { font-family: var(--f-en); font-weight: 300; font-size: clamp(44px, 5.6vw, 76px); letter-spacing: 0.01em; font-variant-numeric: tabular-nums; }
.number__value .number__text { font-family: var(--f-serif); font-weight: 600; font-size: clamp(28px, 3vw, 40px); letter-spacing: 0.06em; }
.number__value sup { font-family: var(--f-en); font-weight: 300; font-size: clamp(22px, 2.4vw, 32px); top: -0.9em; position: relative; }
.number__value small { font-family: var(--f-serif); font-size: 16px; font-weight: 600; color: var(--c-text); margin-left: 4px; }
.number__label { margin-top: 18px; font-size: 13.5px; color: var(--c-sub); letter-spacing: 0.06em; line-height: 1.7; }
@media (min-width: 900px) { .numbers__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* =========================================================
   Service
   ========================================================= */
.service__list { border-top: 1px solid var(--c-line); }
.service__list a {
  position: relative; isolation: isolate; display: grid; grid-template-columns: 52px minmax(0, 1fr) 28px; gap: 18px; align-items: center;
  padding: 30px 8px; border-bottom: 1px solid var(--c-line);
}
.service__list a::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--c-white);
  transform: scaleY(0); transform-origin: bottom; transition: transform 0.6s var(--ease-out);
}
.service__list a:hover::before { transform: scaleY(1); }
.service__num { font-family: var(--f-en); font-size: 14px; letter-spacing: 0.12em; color: var(--c-brand); align-self: start; padding-top: 6px; }
.service__body { display: grid; gap: 8px; }
.service__name { font-family: var(--f-serif); font-weight: 600; font-size: clamp(18px, 1.8vw, 22px); letter-spacing: 0.06em; line-height: 1.6; }
.service__name small { display: block; margin-top: 2px; font-family: var(--f-sans); font-size: 12.5px; font-weight: 400; letter-spacing: 0.06em; color: var(--c-sub); }
.service__desc { font-size: 14.5px; color: var(--c-sub); line-height: 1.95; }
.service__arrow { width: 22px; fill: none; stroke: var(--c-brand); stroke-width: 1.4; transition: transform 0.5s var(--ease-out); }
.service__list a:hover .service__arrow { transform: translateX(6px); }
@media (min-width: 900px) {
  .service__list a { grid-template-columns: 88px minmax(0, 0.95fr) minmax(0, 1.05fr) 32px; padding: 36px 16px; }
  .service__body { display: contents; }
  .service__num { padding-top: 0; align-self: center; }
}

/* =========================================================
   Flow
   ========================================================= */
.flow { background: var(--c-beige); }
.flow__track { position: relative; }
.flow__rail { position: absolute; left: 7px; top: 8px; bottom: 8px; width: 1px; background: var(--c-line); }
.flow__progress { position: absolute; inset: 0; background: var(--c-brand); transform-origin: top; transform: scaleY(0); }
.no-gsap .flow__progress { transform: none; }
.flow__steps { display: grid; gap: 36px; }
.flow__step { position: relative; padding-left: 44px; }
.flow__dot {
  position: absolute; left: 0; top: 4px; width: 15px; height: 15px; border-radius: 50%;
  background: var(--c-beige); border: 1px solid var(--c-brand); transition: background-color 0.5s, box-shadow 0.5s;
}
.flow__step.is-active .flow__dot, .no-gsap .flow__dot { background: var(--c-brand); box-shadow: 0 0 0 6px rgba(116, 22, 14, 0.1); }
.flow__no { font-family: var(--f-en); font-size: 12px; letter-spacing: 0.2em; color: var(--c-brand); text-transform: uppercase; line-height: 1.6; }
.flow__step h3 { font-family: var(--f-serif); font-weight: 600; font-size: 18px; letter-spacing: 0.06em; margin: 8px 0 8px; line-height: 1.6; }
.flow__step p:last-child { font-size: 14px; color: var(--c-sub); line-height: 1.9; }
@media (min-width: 1000px) {
  .flow__rail { left: 0; right: 0; top: 7px; bottom: auto; width: auto; height: 1px; }
  .flow__progress { transform-origin: left; transform: scaleX(0); }
  .flow__steps { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 28px; }
  .flow__step { padding-left: 0; padding-top: 40px; }
  .flow__dot { top: 0; }
}

/* =========================================================
   Profile
   ========================================================= */
.profile { background: var(--c-white); }
.profile__inner { display: grid; gap: 56px; }
.profile__photo { position: relative; width: min(100%, 400px); justify-self: center; }
.profile__photo::before { content: ""; position: absolute; inset: 22px -22px -22px 22px; border: 1px solid var(--c-brand); z-index: 0; }
.profile__photo picture { position: relative; z-index: 1; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: #dcdfe6; }
.profile__photo img { width: 100%; height: 100%; object-fit: cover; }
.profile__name { display: grid; gap: 4px; margin: -12px 0 40px; }
.profile__role { font-size: 13px; color: var(--c-brand); letter-spacing: 0.1em; }
.profile__jp { font-family: var(--f-serif); font-weight: 600; font-size: 30px; letter-spacing: 0.16em; line-height: 1.5; }
.profile__en { font-family: var(--f-en); font-size: 14px; letter-spacing: 0.14em; color: var(--c-sub); }
.profile__text { margin: 40px 0 32px; font-size: 15px; line-height: 2.1; max-width: 36em; }
@media (min-width: 960px) {
  .profile__inner { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(56px, 7vw, 112px); align-items: start; }
  .profile__photo { position: sticky; top: 120px; justify-self: start; }
}

.journey { position: relative; display: grid; gap: 28px; }
.journey::before { content: ""; position: absolute; left: 7px; top: 10px; bottom: 10px; width: 1px; background: var(--c-line); }
.journey__line { position: absolute; left: 7px; top: 10px; bottom: 10px; width: 1px; background: var(--c-brand); transform-origin: top; transform: scaleY(0); }
.no-gsap .journey__line { transform: none; }
.journey__step { position: relative; padding-left: 40px; }
.journey__dot { position: absolute; left: 0; top: 8px; width: 15px; height: 15px; border-radius: 50%; background: var(--c-white); border: 1px solid var(--c-brand); transition: background-color 0.5s; }
.journey__step.is-active .journey__dot, .no-gsap .journey__dot { background: var(--c-brand); }
.journey__verb { font-family: var(--f-serif); font-weight: 600; font-size: 21px; letter-spacing: 0.1em; display: flex; align-items: baseline; gap: 12px; line-height: 1.6; }
.journey__verb span { font-family: var(--f-en); font-weight: 400; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--c-brand); }
.journey__place { display: inline-block; margin: 6px 0 8px; font-size: 12px; letter-spacing: 0.14em; padding: 0 10px; border: 1px solid var(--c-line); color: var(--c-sub); }
.journey__step p:last-child { font-size: 14.5px; color: var(--c-sub); line-height: 1.9; }
@media (min-width: 700px) {
  .journey { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
  .journey::before, .journey__line { left: 0; right: 0; top: 7px; bottom: auto; width: auto; height: 1px; }
  .journey__line { transform-origin: left; transform: scaleX(0); }
  .journey__step { padding-left: 0; padding-top: 36px; }
  .journey__dot { top: 0; }
}

/* =========================================================
   Confidentiality
   ========================================================= */
.confidentiality { background: var(--c-bg); padding-bottom: 0; }
.confidentiality__inner {
  display: grid; gap: 24px; padding: clamp(28px, 4vw, 52px);
  background: var(--c-white); border: 1px solid var(--c-line);
}
.confidentiality__icon { width: 48px; fill: none; stroke: var(--c-brand); stroke-width: 1.4; }
.confidentiality__icon circle { fill: var(--c-brand); stroke: none; }
.confidentiality__inner .eyebrow { margin-bottom: 14px; }
.confidentiality__title { font-family: var(--f-serif); font-weight: 600; font-size: clamp(20px, 2vw, 24px); letter-spacing: 0.06em; margin-bottom: 14px; }
.confidentiality__inner p { font-size: 14.5px; line-height: 2; }
.confidentiality__inner p + p { margin-top: 10px; }
@media (min-width: 900px) { .confidentiality__inner { grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 40px; } }

/* =========================================================
   FAQ
   ========================================================= */
.faq { background: var(--c-bg); }
.faq__inner { display: grid; gap: 8px; }
.faq .sec-head .link-arrow { margin-top: 28px; }
.faq__list { border-top: 1px solid var(--c-line); }
.faq__item { border-bottom: 1px solid var(--c-line); }
.faq__item summary {
  list-style: none; cursor: pointer; position: relative;
  display: flex; align-items: baseline; gap: 18px; padding: 26px 52px 26px 4px;
  font-weight: 500; font-size: 16px; line-height: 1.8;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__q { font-family: var(--f-en); font-size: 19px; color: var(--c-brand); line-height: 1; }
.faq__icon { position: absolute; right: 8px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); }
.faq__icon::before, .faq__icon::after { content: ""; position: absolute; left: 0; top: 50%; width: 100%; height: 1px; background: var(--c-brand); transition: transform 0.5s var(--ease-out); }
.faq__icon::after { transform: rotate(90deg); }
.faq__item[open] .faq__icon::after { transform: rotate(0); }
.faq__a { overflow: hidden; }
.faq__a p { padding: 0 52px 28px 40px; font-size: 14.5px; line-height: 2; color: var(--c-sub); }
@media (min-width: 960px) {
  .faq__inner { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: 72px; align-items: start; }
  .faq .sec-head { position: sticky; top: 120px; }
}

/* =========================================================
   Contact CTA
   ========================================================= */
.contact-cta { background: var(--c-beige); }
.cta-cards { display: grid; gap: 18px; }
.cta-card {
  display: flex; flex-direction: column; gap: 14px; padding: clamp(28px, 3vw, 40px);
  background: var(--c-white); border: 1px solid var(--c-line);
  transition: transform 0.6s var(--ease-out), border-color 0.6s var(--ease-out), box-shadow 0.6s var(--ease-out);
}
.cta-card:hover { transform: translateY(-6px); border-color: var(--c-brand); box-shadow: 0 28px 48px -32px rgba(74, 15, 10, 0.4); }
.cta-card__label { display: flex; align-items: center; gap: 10px; font-size: 12px; letter-spacing: 0.16em; color: var(--c-brand); }
.cta-card__label::before { content: ""; width: 18px; height: 1px; background: currentColor; }
.cta-card h3 { font-family: var(--f-serif); font-weight: 600; font-size: 20px; letter-spacing: 0.06em; line-height: 1.6; }
.cta-card p { font-size: 14px; line-height: 1.95; color: var(--c-sub); }
.cta-card__more { margin-top: auto; padding-top: 14px; display: flex; align-items: center; justify-content: space-between; font-size: 14px; font-weight: 500; letter-spacing: 0.08em; border-top: 1px solid var(--c-line-soft); }
.cta-card__more svg { width: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; transition: transform 0.5s var(--ease-out); }
.cta-card:hover .cta-card__more svg { transform: translateX(6px); }
.cta-card--main { background: var(--c-brand); border-color: var(--c-brand); color: var(--c-white); }
.cta-card--main .cta-card__label { color: var(--c-rose); }
.cta-card--main p { color: rgba(255, 255, 255, 0.82); }
.cta-card--main .cta-card__more { border-color: rgba(255, 255, 255, 0.24); }
.cta-card--main:hover { border-color: var(--c-brand-ink); background: var(--c-brand-deep); }
.contact-cta__note { margin-top: 36px; text-align: center; font-size: 14px; color: var(--c-sub); }
@media (min-width: 900px) { .cta-cards { grid-template-columns: 1.2fr 1fr 1fr; gap: 24px; } }

/* =========================================================
   Footer
   ========================================================= */
.site-footer { background: var(--c-brand-ink); color: rgba(255, 255, 255, 0.82); font-size: 14px; }
.site-footer__inner { display: grid; gap: 44px; padding-block: 80px 56px; }
.site-footer__brand img { width: 164px; }
.site-footer__tagline { margin-top: 16px; font-size: 13px; color: rgba(255, 255, 255, 0.62); letter-spacing: 0.08em; }
.site-footer__info { display: grid; gap: 10px; }
.site-footer__info div { display: grid; grid-template-columns: 84px 1fr; gap: 12px; }
.site-footer__info dt { font-size: 12px; color: rgba(255, 255, 255, 0.5); letter-spacing: 0.1em; padding-top: 2px; }
.site-footer__note { font-size: 12px; color: rgba(255, 255, 255, 0.5); }
.site-footer__nav { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 32px; }
.site-footer__nav li + li { margin-top: 10px; }
.site-footer__nav a { transition: color 0.3s; }
.site-footer__nav a:hover { color: var(--c-white); }
.site-footer__bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 24px 32px; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.site-footer__bottom small { font-family: var(--f-en); font-size: 12px; letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.5); }
.pagetop { display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-en); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; }
.pagetop svg { width: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; transition: transform 0.5s var(--ease-out); }
.pagetop:hover svg { transform: translateY(-4px); }
@media (min-width: 960px) { .site-footer__inner { grid-template-columns: 1fr 1.2fr 1fr; gap: 64px; } }

/* =========================================================
   Sub pages: hero, breadcrumb, article layout, prose, tables
   ========================================================= */
.page-hero { position: relative; overflow: hidden; padding: calc(var(--header-h) + 28px) 0 clamp(48px, 7vw, 88px); background: var(--c-beige); }
.page-hero__mark { position: absolute; right: -60px; top: 40px; width: 360px; opacity: 0.06; pointer-events: none; }
.page-hero__title { font-family: var(--f-serif); font-weight: 600; font-size: clamp(27px, 3.6vw, 44px); line-height: 1.5; letter-spacing: 0.06em; }
.page-hero__lead { margin-top: 22px; max-width: 42em; color: var(--c-sub); font-size: 15px; line-height: 2.05; }
.page-hero .eyebrow { margin-top: 36px; }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 4px 0; font-size: 12px; letter-spacing: 0.06em; color: var(--c-sub); }
.breadcrumb li + li::before { content: "/"; margin: 0 10px; color: var(--c-line); }
.breadcrumb a { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; transition: text-decoration-color 0.3s; }
.breadcrumb a:hover { text-decoration-color: currentColor; }

.article { padding-block: clamp(56px, 7vw, 96px) var(--section-y); background: var(--c-bg); }
.article__grid { display: grid; gap: 40px; }
.toc { font-size: 13.5px; }
.toc details { border: 1px solid var(--c-line); background: var(--c-white); }
.toc summary { cursor: pointer; padding: 14px 18px; font-weight: 500; letter-spacing: 0.08em; list-style: none; display: flex; justify-content: space-between; }
.toc summary::-webkit-details-marker { display: none; }
.toc summary::after { content: "+"; color: var(--c-brand); }
.toc details[open] summary::after { content: "−"; }
.toc ol { padding: 4px 18px 16px; counter-reset: toc; }
.toc li { counter-increment: toc; }
.toc a { display: grid; grid-template-columns: 28px 1fr; padding: 7px 0; line-height: 1.7; color: var(--c-sub); transition: color 0.3s; }
.toc a::before { content: counter(toc, decimal-leading-zero); font-family: var(--f-en); font-size: 12px; color: var(--c-brand); padding-top: 2px; }
.toc a:hover, .toc a.is-current { color: var(--c-text); }
@media (min-width: 1100px) {
  .article__grid { grid-template-columns: 240px minmax(0, 1fr); gap: 72px; align-items: start; }
  .toc { position: sticky; top: 104px; }
  .toc details { border: 0; background: none; }
  .toc summary { padding: 0 0 14px; border-bottom: 1px solid var(--c-line); pointer-events: none; }
  .toc details summary::after, .toc details[open] summary::after { content: none; }
  .toc ol { padding: 10px 0 0; }
}

.prose { max-width: 800px; font-size: 16px; line-height: 2.05; }
.prose > * + * { margin-top: 1.4em; }
.prose h2 {
  margin-top: 3.2em; padding-top: 1.4em; border-top: 1px solid var(--c-line);
  font-family: var(--f-serif); font-weight: 600; font-size: clamp(22px, 2.4vw, 28px); line-height: 1.6; letter-spacing: 0.05em;
}
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 2.4em; font-family: var(--f-serif); font-weight: 600; font-size: 19px; line-height: 1.7; letter-spacing: 0.05em; padding-left: 14px; border-left: 2px solid var(--c-brand); }
.prose a { color: var(--c-brand); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--c-line); }
.prose a:hover { text-decoration-color: var(--c-brand); }
.prose ul { display: grid; gap: 8px; }
.prose ul li { position: relative; padding-left: 20px; }
.prose ul li::before { content: ""; position: absolute; left: 4px; top: 0.85em; width: 6px; height: 6px; border-radius: 50%; background: var(--c-brand); }
.prose ol.steps { counter-reset: step; display: grid; gap: 10px; }
.prose ol.steps li { counter-increment: step; display: grid; grid-template-columns: 34px 1fr; }
.prose ol.steps li::before { content: counter(step); font-family: var(--f-en); color: var(--c-brand); }
.prose strong { font-weight: 700; background: linear-gradient(transparent 62%, rgba(242, 201, 184, 0.55) 62%); }
.prose .lead-answer { padding: 22px 26px; background: var(--c-white); border: 1px solid var(--c-line); border-left: 3px solid var(--c-brand); }
.prose .lead-answer::before { content: "結論"; display: block; font-size: 12px; letter-spacing: 0.16em; color: var(--c-brand); margin-bottom: 6px; }

.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--c-line); background: var(--c-white); }
.table-wrap table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 14px; line-height: 1.8; }
.table-wrap caption { caption-side: bottom; text-align: left; padding: 10px 14px; font-size: 12px; color: var(--c-sub); border-top: 1px solid var(--c-line-soft); }
.table-wrap th, .table-wrap td { padding: 12px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--c-line-soft); }
.table-wrap thead th { background: var(--c-beige); font-weight: 500; font-size: 13px; letter-spacing: 0.06em; white-space: nowrap; border-bottom: 1px solid var(--c-line); }
.table-wrap tbody th { font-weight: 500; white-space: nowrap; }
.table-wrap tr:last-child td, .table-wrap tr:last-child th { border-bottom: 0; }
.table-wrap .zh { display: block; font-size: 12px; color: var(--c-sub); }
.table-wrap .nowrap { white-space: nowrap; }
.page-guide .prose { max-width: 880px; }
.table-items { min-width: 820px !important; table-layout: fixed; }
/* table-layout: fixed sizes columns from the header row */
.table-items thead th:nth-child(1) { width: 52px; }
.table-items thead th:nth-child(2) { width: 24%; }
.table-items thead th:nth-child(3) { width: 27%; }
.table-items thead th:nth-child(4) { width: 14%; }
.table-items thead th { white-space: normal; }
.table-hint { margin-top: 8px; font-size: 12px; color: var(--c-sub); }
@media (min-width: 760px) { .table-hint { display: none; } }

.badge { display: inline-block; padding: 1px 10px; font-size: 11.5px; letter-spacing: 0.08em; border: 1px solid currentColor; border-radius: 999px; white-space: nowrap; }
.badge--done { color: var(--c-brand); }
.badge--muted { color: var(--c-sub); }

.callout { padding: 20px 24px; background: var(--c-white); border: 1px solid var(--c-line); }
.callout__title { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 14.5px; color: var(--c-brand); margin-bottom: 6px; }
.callout__title svg { width: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.callout p { font-size: 14.5px; line-height: 1.95; }

.byline { display: flex; gap: 18px; align-items: center; padding: 20px 22px; background: var(--c-white); border: 1px solid var(--c-line); max-width: 800px; }
.byline__photo { width: 72px; height: 90px; object-fit: cover; flex: none; background: #d7dae3; }
.byline__label { font-size: 11.5px; letter-spacing: 0.16em; color: var(--c-brand); }
.byline__name { font-family: var(--f-serif); font-weight: 600; font-size: 18px; letter-spacing: 0.1em; line-height: 1.6; }
.byline__name span { margin-left: 10px; font-family: var(--f-en); font-weight: 400; font-size: 12px; letter-spacing: 0.12em; color: var(--c-sub); }
.byline__role, .byline__date { font-size: 12.5px; color: var(--c-sub); line-height: 1.7; }

.sources { font-size: 13px; color: var(--c-sub); line-height: 1.9; }
.sources li { padding-left: 1em; text-indent: -1em; }
.sources li::before { content: "・"; }

.cta-band { margin-top: 72px; padding: clamp(28px, 4vw, 48px); background: var(--c-brand-ink); color: var(--c-white); display: grid; gap: 22px; }
.cta-band h2 { font-family: var(--f-serif); font-weight: 600; font-size: clamp(20px, 2.2vw, 26px); letter-spacing: 0.06em; line-height: 1.6; border: 0; padding: 0; margin: 0; }
.cta-band p { font-size: 14.5px; color: rgba(255, 255, 255, 0.8); }
.cta-band .btn--primary { background: var(--c-white); color: var(--c-brand); }
.cta-band .btn--primary::before { background: var(--c-beige); }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.cta-band .btn--ghost { border-color: rgba(255, 255, 255, 0.6); color: var(--c-white); }
.cta-band .btn--ghost::before { background: rgba(255, 255, 255, 0.12); }

/* =========================================================
   Taiwan PIF guide: key points, checker, myths, related guides
   ========================================================= */
.guide-intro { background: var(--c-bg); padding-block: clamp(40px, 5vw, 64px) clamp(56px, 7vw, 88px); }
.guide-intro .byline { margin-bottom: clamp(40px, 5vw, 64px); }
.guide-intro__title { font-family: var(--f-serif); font-weight: 600; font-size: clamp(21px, 2.2vw, 26px); letter-spacing: 0.06em; margin-bottom: 24px; }
.keypoints { display: grid; border-top: 1px solid var(--c-line); }
.keypoints li { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 16px; align-items: baseline; padding: 18px 4px; border-bottom: 1px solid var(--c-line); }
.keypoints__label { font-size: 12.5px; letter-spacing: 0.14em; color: var(--c-brand); font-weight: 500; }
.keypoints p { font-family: var(--f-serif); font-weight: 500; font-size: 16.5px; line-height: 1.8; letter-spacing: 0.04em; }
@media (min-width: 900px) {
  .keypoints { grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 0; }
  .keypoints li { grid-template-columns: 1fr; gap: 10px; padding: 0 22px; border-bottom: 0; border-left: 1px solid var(--c-line); }
  .keypoints li:first-child { border-left: 0; padding-left: 0; }
  .keypoints p { font-size: 15.5px; }
}

.checker-section { background: var(--c-beige); padding-block: clamp(56px, 7vw, 96px); }
.checker { background: var(--c-white); border: 1px solid var(--c-line); padding: clamp(24px, 4vw, 52px); }
.checker__head .eyebrow { margin-bottom: 14px; }
.checker__title { font-family: var(--f-serif); font-weight: 600; font-size: clamp(22px, 2.6vw, 30px); letter-spacing: 0.06em; line-height: 1.5; }
.checker__lead { margin-top: 10px; font-size: 14.5px; color: var(--c-sub); }
.checker__body { display: grid; gap: 28px; margin-top: 32px; }
.checker__groups { display: grid; gap: 20px; }
.checker__group-label { font-size: 12.5px; letter-spacing: 0.12em; color: var(--c-sub); margin-bottom: 10px; }
.checker__opts { display: flex; flex-wrap: wrap; gap: 8px; }
.checker__opt {
  min-height: 44px; padding: 8px 16px; font-size: 14px; letter-spacing: 0.04em; line-height: 1.5;
  border: 1px solid var(--c-line); background: var(--c-bg); border-radius: 999px; text-align: left;
  transition: background-color 0.35s var(--ease-out), border-color 0.35s var(--ease-out), color 0.35s var(--ease-out);
}
.checker__opt:hover { border-color: var(--c-brand); }
.checker__opt[aria-pressed="true"] { background: var(--c-brand); border-color: var(--c-brand); color: var(--c-white); }
.checker__result { position: relative; min-height: 220px; padding: 28px; background: var(--c-beige); border-left: 3px solid var(--c-brand); }
.checker__placeholder { color: var(--c-sub); font-size: 14.5px; }
.checker__product { font-size: 13px; color: var(--c-sub); letter-spacing: 0.06em; }
.checker__phase { margin-top: 6px; display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; }
.checker__phase-name { font-family: var(--f-serif); font-weight: 600; font-size: 24px; letter-spacing: 0.08em; color: var(--c-brand); }
.checker__date { font-family: var(--f-serif); font-size: 17px; font-weight: 600; }
.checker__status { margin-top: 12px; }
.checker__note { margin-top: 14px; font-size: 14px; line-height: 1.9; }
.checker__next { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--c-line); font-size: 14px; line-height: 1.9; }
.checker__next a { color: var(--c-brand); text-decoration: underline; text-underline-offset: 4px; }
.checker__foot { margin-top: 24px; font-size: 12.5px; color: var(--c-sub); line-height: 1.8; }
.checker__result.is-updated > * { animation: checkerIn 0.6s var(--ease-out) both; }
.checker__result.is-updated > *:nth-child(2) { animation-delay: 0.05s; } .checker__result.is-updated > *:nth-child(3) { animation-delay: 0.1s; }
.checker__result.is-updated > *:nth-child(4) { animation-delay: 0.15s; } .checker__result.is-updated > *:nth-child(5) { animation-delay: 0.2s; }
@keyframes checkerIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (min-width: 960px) {
  .checker__body { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: 40px; align-items: start; }
  .checker__result { position: sticky; top: 100px; }
}

.myths { display: grid; gap: 14px; }
.myth { padding: 20px 22px; background: var(--c-white); border: 1px solid var(--c-line); }
.myth__q { font-family: var(--f-serif); font-weight: 600; font-size: 17px; letter-spacing: 0.04em; display: flex; gap: 12px; align-items: baseline; }
.myth__q::before { content: "×"; font-family: var(--f-en); color: var(--c-brand); font-size: 18px; }
.myth__a { margin-top: 8px; font-size: 14.5px; line-height: 1.95; color: var(--c-sub); padding-left: 24px; }

.related { margin-top: 64px; }
.related__title { font-size: 13px; letter-spacing: 0.14em; color: var(--c-brand); margin-bottom: 14px; }
.related__list { display: grid; gap: 12px; }
.related__list a {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 20px;
  background: var(--c-white); border: 1px solid var(--c-line); font-family: var(--f-serif); font-weight: 600; font-size: 16px; letter-spacing: 0.04em; line-height: 1.6;
  transition: border-color 0.4s var(--ease-out), transform 0.4s var(--ease-out);
}
.related__list a:hover { border-color: var(--c-brand); transform: translateX(4px); }
.related__list svg { width: 18px; flex: none; fill: none; stroke: var(--c-brand); stroke-width: 1.5; }
@media (min-width: 760px) { .related__list { grid-template-columns: 1fr 1fr; } }

/* =========================================================
   Contact: tabs, forms
   ========================================================= */
.contact { padding-block: clamp(48px, 6vw, 80px) var(--section-y); background: var(--c-bg); }
.contact-tabs { display: grid; gap: 12px; margin-bottom: clamp(32px, 4vw, 56px); }
.contact-tab {
  position: relative; display: grid; gap: 6px; padding: 22px 24px; background: var(--c-white); border: 1px solid var(--c-line);
  transition: border-color 0.4s var(--ease-out), background-color 0.4s var(--ease-out);
}
.contact-tab::after { content: ""; position: absolute; left: -1px; right: -1px; bottom: -1px; height: 3px; background: var(--c-brand); transform: scaleX(0); transform-origin: left; transition: transform 0.5s var(--ease-out); }
.contact-tab:hover { border-color: var(--c-brand); }
.contact-tab[aria-selected="true"] { border-color: var(--c-brand); }
.contact-tab[aria-selected="true"]::after { transform: scaleX(1); }
.contact-tab__label { font-size: 12px; letter-spacing: 0.14em; color: var(--c-brand); }
.contact-tab__title { font-family: var(--f-serif); font-weight: 600; font-size: 18px; letter-spacing: 0.04em; line-height: 1.6; }
.contact-tab__desc { font-size: 13.5px; color: var(--c-sub); line-height: 1.8; }
@media (min-width: 900px) { .contact-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.contact__grid { display: grid; gap: 40px; }
@media (min-width: 1100px) { .contact__grid { grid-template-columns: minmax(0, 1fr) 320px; gap: 56px; align-items: start; } .contact__aside { position: sticky; top: 104px; } }
.contact-panel + .contact-panel { margin-top: 72px; }
.js .contact-panels--tabbed .contact-panel + .contact-panel { margin-top: 0; }
.contact-panel[hidden] { display: none; }
.contact-panel__title { font-family: var(--f-serif); font-weight: 600; font-size: clamp(22px, 2.4vw, 28px); letter-spacing: 0.05em; line-height: 1.5; }
.contact-panel__lead { margin: 14px 0 32px; font-size: 15px; line-height: 2; color: var(--c-sub); max-width: 44em; }

.form { display: grid; gap: 26px; padding: clamp(24px, 3.4vw, 44px); background: var(--c-white); border: 1px solid var(--c-line); }
.form__hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.field { display: grid; gap: 10px; margin: 0; padding: 0; border: 0; min-width: 0; }
.field__label { display: flex; align-items: center; gap: 10px; font-weight: 500; font-size: 15px; letter-spacing: 0.04em; padding: 0; }
.req, .opt { font-size: 11px; font-weight: 500; letter-spacing: 0.08em; padding: 1px 8px; border-radius: 2px; line-height: 1.7; }
.req { background: var(--c-brand); color: var(--c-white); }
.opt { color: var(--c-sub); border: 1px solid var(--c-line); }
.field__hint { font-size: 13px; color: var(--c-sub); line-height: 1.8; margin-top: -4px; }
.field__stack { display: grid; gap: 10px; }
.form input[type="text"], .form input[type="email"], .form input[type="tel"], .form select, .form textarea {
  width: 100%; min-height: 50px; padding: 12px 14px; font: inherit; font-size: 16px; color: var(--c-text);
  background: var(--c-bg); border: 1px solid var(--c-line); border-radius: 2px;
  transition: border-color 0.3s, background-color 0.3s, box-shadow 0.3s;
}
.form textarea { min-height: 120px; line-height: 1.8; resize: vertical; }
.form input::placeholder, .form textarea::placeholder { color: #a99e98; }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--c-brand); background: var(--c-white); box-shadow: 0 0 0 3px rgba(116, 22, 14, 0.12); }
.choices { display: flex; flex-wrap: wrap; gap: 8px; }
.choice { position: relative; display: inline-flex; cursor: pointer; }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice > span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px; font-size: 14px; line-height: 1.5;
  border: 1px solid var(--c-line); border-radius: 999px; background: var(--c-bg);
  transition: background-color 0.3s, border-color 0.3s, color 0.3s;
}
.choice:hover > span { border-color: var(--c-brand); }
.choice input:checked + span { background: var(--c-brand); border-color: var(--c-brand); color: var(--c-white); }
.choice input:focus-visible + span { outline: 2px solid var(--c-brand); outline-offset: 2px; }
.choice--inline > span { border: 0; background: none; padding: 4px 0 4px 32px; border-radius: 0; min-height: 0; gap: 8px; flex-wrap: wrap; font-size: 14.5px; }
.choice--inline > span::before { content: ""; position: absolute; left: 0; top: 5px; width: 20px; height: 20px; border: 1px solid var(--c-line); border-radius: 3px; background: var(--c-bg); transition: background-color 0.3s, border-color 0.3s; }
.choice--inline input:checked + span { background: none; color: var(--c-text); }
.choice--inline input:checked + span::before { background: var(--c-brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; border-color: var(--c-brand); }
.choice--inline a { color: var(--c-brand); text-decoration: underline; text-underline-offset: 3px; }
.field--status { gap: 16px; padding: 20px; background: var(--c-bg); border: 1px solid var(--c-line-soft); }
.field--status .choice > span { background: var(--c-white); }
.status-q { display: grid; gap: 8px; }
.status-q__label { font-size: 13.5px; color: var(--c-sub); }
.field.is-invalid input, .field.is-invalid textarea, .field.is-invalid select { border-color: #b3261e; background: #fff7f6; }
.field.is-invalid .choice > span, .status-q.is-invalid .choice > span { border-color: #b3261e; }
.field__error { font-size: 13px; color: #b3261e; line-height: 1.6; }
.form__actions { display: flex; justify-content: center; padding-top: 8px; }
.form__submit { min-width: 240px; }
.form__submit[aria-busy="true"] { opacity: 0.7; pointer-events: none; }
.form__status { text-align: center; font-size: 14px; color: var(--c-sub); min-height: 1em; }
.form__status.is-error { color: #b3261e; }

.contact-card { padding: 24px; background: var(--c-white); border: 1px solid var(--c-line); }
.contact-card + .contact-card { margin-top: 14px; }
.contact-card__photo { width: 96px; height: 120px; object-fit: cover; background: #d7dae3; margin-bottom: 16px; }
.contact-card__label { font-size: 12px; letter-spacing: 0.14em; color: var(--c-brand); margin-bottom: 4px; }
.contact-card__name { font-family: var(--f-serif); font-weight: 600; font-size: 20px; letter-spacing: 0.1em; }
.contact-card__name span { margin-left: 10px; font-family: var(--f-en); font-weight: 400; font-size: 12px; letter-spacing: 0.12em; color: var(--c-sub); }
.contact-card__role { font-size: 12.5px; color: var(--c-sub); margin-top: 2px; }
.contact-card__list { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--c-line-soft); display: grid; gap: 6px; font-size: 13.5px; line-height: 1.7; }
.contact-card__list li { position: relative; padding-left: 16px; }
.contact-card__list li::before { content: ""; position: absolute; left: 0; top: 0.8em; width: 8px; height: 1px; background: var(--c-brand); }
.contact-card--note p:last-child { font-size: 13.5px; line-height: 1.8; }
.contact-card--note a { color: var(--c-brand); text-decoration: underline; text-underline-offset: 3px; }

/* =========================================================
   Thanks page
   ========================================================= */
.thanks__inner { max-width: 860px; }
.thanks__title { font-family: var(--f-serif); font-weight: 600; font-size: 24px; letter-spacing: 0.06em; margin-bottom: 28px; }
.thanks__steps { display: grid; gap: 0; border-top: 1px solid var(--c-line); }
.thanks__steps li { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 16px; padding: 24px 4px; border-bottom: 1px solid var(--c-line); }
.thanks__no { font-family: var(--f-en); font-weight: 300; font-size: 26px; color: var(--c-brand); line-height: 1.2; }
.thanks__steps h3 { font-family: var(--f-serif); font-weight: 600; font-size: 18px; letter-spacing: 0.06em; margin-bottom: 6px; }
.thanks__steps p { font-size: 14.5px; line-height: 1.95; color: var(--c-sub); }
.thanks__note { margin-top: 28px; font-size: 13.5px; color: var(--c-sub); line-height: 1.9; }
.thanks__links { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 20px 40px; }

/* =========================================================
   Service page
   ========================================================= */
.svc-section { background: var(--c-bg); padding-top: clamp(48px, 6vw, 80px); }
.svc-index { display: grid; gap: 8px; margin-bottom: clamp(48px, 6vw, 80px); }
.svc-index a { display: flex; align-items: baseline; gap: 14px; padding: 14px 18px; background: var(--c-white); border: 1px solid var(--c-line); font-size: 14.5px; font-weight: 500; transition: border-color 0.4s var(--ease-out); }
.svc-index a:hover { border-color: var(--c-brand); }
.svc-index span { font-family: var(--f-en); font-size: 13px; color: var(--c-brand); letter-spacing: 0.1em; }
@media (min-width: 760px) { .svc-index { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.svc { padding-block: clamp(40px, 5vw, 64px); border-top: 1px solid var(--c-line); scroll-margin-top: 100px; }
.svc:last-child { border-bottom: 1px solid var(--c-line); }
.svc__head { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px; margin-bottom: 28px; }
.svc__no { font-family: var(--f-en); font-weight: 300; font-size: clamp(34px, 4vw, 48px); line-height: 1; color: var(--c-brand); }
.svc__title { font-family: var(--f-serif); font-weight: 600; font-size: clamp(21px, 2.3vw, 27px); letter-spacing: 0.05em; line-height: 1.55; }
.svc__title small { display: block; margin-top: 2px; font-family: var(--f-sans); font-weight: 400; font-size: 13px; letter-spacing: 0.06em; color: var(--c-sub); }
.svc__lead { margin-top: 12px; font-size: 15px; line-height: 2; color: var(--c-sub); max-width: 46em; }
.svc__body { display: grid; gap: 28px; }
.svc__col h3 { font-size: 13px; letter-spacing: 0.14em; color: var(--c-brand); font-weight: 500; margin-bottom: 10px; }
.svc__col h3:not(:first-child) { margin-top: 24px; }
.svc__col ul { display: grid; gap: 8px; }
.svc__col li { position: relative; padding-left: 18px; font-size: 14.5px; line-height: 1.85; }
.svc__col li::before { content: ""; position: absolute; left: 2px; top: 0.85em; width: 6px; height: 6px; border-radius: 50%; background: var(--c-brand); }
.svc__minus li::before { width: 8px; height: 1px; border-radius: 0; background: var(--c-sub); top: 0.95em; }
.svc__col p { font-size: 14.5px; line-height: 1.95; }
@media (min-width: 900px) { .svc__body { grid-template-columns: 1fr 1fr; gap: 56px; padding-left: 80px; } }

.svc-fees { background: var(--c-white); }
.svc-fees__inner { display: grid; gap: 32px; }
.svc-fees__body > p:first-child { font-size: 15px; line-height: 2; }
.svc-fees__list { margin: 24px 0 16px; border-top: 1px solid var(--c-line); }
.svc-fees__list li { display: grid; gap: 4px; padding: 16px 0; border-bottom: 1px solid var(--c-line); font-size: 14.5px; line-height: 1.85; color: var(--c-sub); }
.svc-fees__list span { font-family: var(--f-serif); font-weight: 600; font-size: 16.5px; color: var(--c-text); letter-spacing: 0.05em; }
@media (min-width: 900px) { .svc-fees__inner { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 72px; } .svc-fees__list li { grid-template-columns: 200px 1fr; gap: 24px; } }

.svc-clients { background: var(--c-beige); }
.client-types { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.client-types li { padding: 14px 24px; background: var(--c-white); border: 1px solid var(--c-line); border-radius: 999px; font-family: var(--f-serif); font-weight: 600; font-size: 16px; letter-spacing: 0.06em; }
.svc-clients__note { margin: 32px auto 0; max-width: 40em; text-align: center; font-size: 14.5px; line-height: 2; color: var(--c-sub); }
.contact-cta .cta-band { margin-top: 0; }

/* =========================================================
   Flow, about, company, FAQ, 404 pages
   ========================================================= */
.flow-detail { background: var(--c-bg); }
.steps { position: relative; display: grid; gap: 0; counter-reset: step; }
.step { position: relative; padding: 0 0 48px 44px; }
.step::before { content: ""; position: absolute; left: 7px; top: 14px; bottom: 0; width: 1px; background: var(--c-line); }
.step::after { content: ""; position: absolute; left: 0; top: 6px; width: 15px; height: 15px; border-radius: 50%; background: var(--c-brand); box-shadow: 0 0 0 6px rgba(116, 22, 14, 0.1); }
.step:last-child::before { display: none; }
.step__no { font-family: var(--f-en); font-size: 12.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--c-brand); }
.step__title { font-family: var(--f-serif); font-weight: 600; font-size: clamp(20px, 2.2vw, 25px); letter-spacing: 0.06em; margin: 4px 0 18px; }
.step__cols { display: grid; gap: 14px; }
.step__cols > div { padding: 18px 20px; background: var(--c-white); border: 1px solid var(--c-line); }
.step__cols > div:last-child { background: var(--c-beige); border-color: var(--c-line-soft); }
.step__cols h3 { font-size: 12.5px; letter-spacing: 0.12em; color: var(--c-brand); font-weight: 500; margin-bottom: 6px; }
.step__cols p { font-size: 14.5px; line-height: 1.95; }
@media (min-width: 900px) { .step__cols { grid-template-columns: 1fr 1fr; gap: 16px; } .step { padding-left: 64px; } }
.flow-faq { margin-top: 24px; padding: 28px; background: var(--c-white); border: 1px solid var(--c-line); max-width: 880px; }
.flow-faq__title { font-family: var(--f-serif); font-weight: 600; font-size: 19px; letter-spacing: 0.05em; margin-bottom: 10px; }
.flow-faq p { font-size: 14.5px; line-height: 2; }

.about { background: var(--c-white); }
.about__inner { display: grid; gap: 56px; }
.about__photo { position: relative; width: min(100%, 400px); justify-self: center; }
.about__call { margin: -24px 0 48px; font-size: 14px; color: var(--c-sub); }
.about__heading { font-family: var(--f-serif); font-weight: 600; font-size: 22px; letter-spacing: 0.08em; margin: 56px 0 22px; padding-bottom: 12px; border-bottom: 1px solid var(--c-line); }
.about__message p { font-size: 15.5px; line-height: 2.15; }
.about__message p + p { margin-top: 1.2em; }
.about__sign { margin-top: 28px !important; text-align: right; font-family: var(--f-serif); font-weight: 600; font-size: 19px; letter-spacing: 0.14em; }
.about__sign span { display: block; margin-bottom: 4px; font-family: var(--f-sans); font-weight: 400; font-size: 12.5px; letter-spacing: 0.1em; color: var(--c-sub); }
.about__facts { border-top: 1px solid var(--c-line); }
.about__facts > div { display: grid; gap: 4px; padding: 16px 0; border-bottom: 1px solid var(--c-line); }
.about__facts dt { font-size: 13px; letter-spacing: 0.1em; color: var(--c-brand); }
.about__facts dd { font-size: 15px; line-height: 1.9; }
.about__privacy { margin-top: 20px; }
@media (min-width: 700px) { .about__facts > div { grid-template-columns: 150px 1fr; gap: 24px; } }
@media (min-width: 960px) { .about__inner { grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); gap: clamp(56px, 7vw, 112px); align-items: start; } .about__photo { position: sticky; top: 120px; justify-self: start; } }

.company__inner { max-width: 920px; }
.company__table { border-top: 1px solid var(--c-line); }
.company__table > div { display: grid; gap: 6px; padding: 22px 4px; border-bottom: 1px solid var(--c-line); }
.company__table dt { font-size: 13.5px; letter-spacing: 0.1em; color: var(--c-brand); font-weight: 500; }
.company__table dd { font-size: 15.5px; line-height: 1.9; }
.company__table dd ul { display: grid; gap: 4px; }
.company__table dd li::before { content: "・"; color: var(--c-brand); }
.company__table a { color: var(--c-brand); text-decoration: underline; text-underline-offset: 4px; }
.company__sub { display: block; font-size: 13px; color: var(--c-sub); }
@media (min-width: 700px) { .company__table > div { grid-template-columns: 180px 1fr; gap: 24px; } }

.faq-page { background: var(--c-bg); }
.faq-page__inner { max-width: 960px; }
.faq-cats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.faq-cats a { padding: 8px 18px; border: 1px solid var(--c-line); border-radius: 999px; background: var(--c-white); font-size: 14px; transition: border-color 0.3s; }
.faq-cats a:hover { border-color: var(--c-brand); }
.faq-page__cat { font-family: var(--f-serif); font-weight: 600; font-size: 21px; letter-spacing: 0.08em; margin: 56px 0 8px; scroll-margin-top: 100px; }
.faq-page .faq__a a { color: var(--c-brand); text-decoration: underline; text-underline-offset: 4px; }
.faq-page__sources { margin-top: 48px; }
.faq-page .cta-band { margin-top: 40px; }

.page-hero--404 { min-height: 70vh; display: flex; align-items: center; }
.nf-links { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 20px 40px; }
.conf .callout { margin-block: 1.4em; }

/* =========================================================
   Column
   ========================================================= */
.prose--column { margin-inline: auto; max-width: 780px; }
.prose--column > .byline { margin-bottom: 8px; }
.inline-link { color: var(--c-brand); text-decoration: underline; text-underline-offset: 4px; }
.column-list { background: var(--c-bg); }
.posts { display: grid; gap: 18px; }
.post {
  display: grid; gap: 12px; height: 100%; padding: clamp(24px, 3vw, 36px); background: var(--c-white); border: 1px solid var(--c-line);
  transition: border-color 0.5s var(--ease-out), transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
}
.post:hover { border-color: var(--c-brand); transform: translateY(-4px); box-shadow: 0 24px 40px -30px rgba(74, 15, 10, 0.4); }
.post__meta { display: flex; align-items: center; gap: 12px; font-size: 12.5px; color: var(--c-sub); }
.post__meta time { font-family: var(--f-en); letter-spacing: 0.1em; }
.post__tag { padding: 1px 10px; border: 1px solid var(--c-line); color: var(--c-brand); font-size: 11.5px; letter-spacing: 0.08em; }
.post__title { font-family: var(--f-serif); font-weight: 600; font-size: clamp(18px, 1.8vw, 21px); line-height: 1.65; letter-spacing: 0.04em; }
.post__excerpt { font-size: 14px; line-height: 1.9; color: var(--c-sub); }
.post__more { margin-top: auto; display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 500; color: var(--c-brand); }
.post__more svg { width: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; transition: transform 0.5s var(--ease-out); }
.post:hover .post__more svg { transform: translateX(5px); }
@media (min-width: 900px) { .posts { grid-template-columns: 1fr 1fr; gap: 24px; } }

/* =========================================================
   Credentials: certificate-style cards (no scans, no personal data)
   ========================================================= */
.credentials { background: var(--c-beige); }
.cred-summary { display: grid; gap: 0; margin-bottom: clamp(40px, 5vw, 64px); border-top: 1px solid var(--c-line); }
.cred-summary li { display: grid; gap: 6px; padding: 22px 4px; border-bottom: 1px solid var(--c-line); }
.cred-summary__value { font-family: var(--f-en); font-weight: 300; font-size: clamp(34px, 3.6vw, 46px); line-height: 1; color: var(--c-brand); letter-spacing: 0.02em; }
.cred-summary__value small { margin-left: 6px; font-family: var(--f-serif); font-weight: 600; font-size: 15px; color: var(--c-text); }
.cred-summary__label { font-size: 13.5px; letter-spacing: 0.06em; color: var(--c-sub); }
@media (min-width: 760px) {
  .cred-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 0; }
  .cred-summary li { padding: 6px 28px; border-bottom: 0; border-left: 1px solid var(--c-line); }
  .cred-summary li:first-child { border-left: 0; padding-left: 0; }
}

.certs { display: grid; gap: 20px; }
.cert { perspective: 1200px; }
.cert__inner {
  position: relative; height: 100%; padding: 26px 24px 30px; background: #fdfbf8; overflow: hidden;
  border: 1px solid var(--c-line); box-shadow: 0 24px 48px -36px rgba(74, 15, 10, 0.45);
  transition: transform 0.6s var(--ease-out), box-shadow 0.6s var(--ease-out);
}
.cert__inner::before { content: ""; position: absolute; inset: 7px; border: 1px solid rgba(116, 22, 14, 0.3); pointer-events: none; }
.cert__inner::after {
  content: ""; position: absolute; inset: 10px; pointer-events: none; border: 1px solid rgba(116, 22, 14, 0.12);
}
.cert:hover .cert__inner { transform: translateY(-6px); box-shadow: 0 34px 56px -36px rgba(74, 15, 10, 0.55); }
.cert__watermark { position: absolute; left: 50%; top: 52%; width: 58%; transform: translate(-50%, -50%); opacity: 0.045; pointer-events: none; }
.cert__inner > *:not(.cert__watermark) { position: relative; }
.cert__top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.cert__kind { font-family: var(--f-en); font-size: 10.5px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--c-brand); }
.cert__no { font-family: var(--f-en); font-size: 11px; letter-spacing: 0.18em; color: var(--c-sub); white-space: nowrap; }
.cert__rule { display: flex; align-items: center; gap: 8px; margin: 14px 0 16px; }
.cert__rule i { flex: 1; height: 1px; background: var(--c-line); }
.cert__rule b { width: 6px; height: 6px; transform: rotate(45deg); background: var(--c-brand); }
.cert__title { font-family: var(--f-serif); font-weight: 600; font-size: 19px; line-height: 1.6; letter-spacing: 0.06em; min-height: 3.2em; text-align: center; }
.cert__sub { margin-top: 6px; text-align: center; font-size: 12.5px; color: var(--c-sub); letter-spacing: 0.06em; }
.cert__meta { margin-top: 20px; border-top: 1px solid var(--c-line); }
.cert__meta > div { display: grid; grid-template-columns: 72px 1fr; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--c-line-soft); font-size: 13px; line-height: 1.6; }
.cert__meta dt { font-size: 10.5px; letter-spacing: 0.14em; color: var(--c-sub); padding-top: 3px; }
.cert__meta dd { letter-spacing: 0.04em; }
.cert__masked { font-family: var(--f-en); letter-spacing: 0.12em; color: var(--c-sub); }
.cert__meta small { display: block; font-size: 10.5px; color: var(--c-sub); letter-spacing: 0.08em; }
.cert__status { margin-top: 16px; padding-right: 84px; font-family: var(--f-serif); font-weight: 600; font-size: 14px; letter-spacing: 0.1em; color: var(--c-brand); min-height: 2.6em; display: flex; align-items: center; }
.cert__stamp {
  position: absolute !important; right: 18px; bottom: 16px; width: 66px; height: 66px;
  display: grid; place-items: center; color: var(--c-brand); border: 2.5px solid currentColor; border-radius: 3px;
  transform: rotate(-7deg); opacity: 0.9; mix-blend-mode: multiply;
  font-family: var(--f-serif); font-weight: 700; font-size: 23px; letter-spacing: 0.08em; line-height: 1;
  -webkit-mask-image: radial-gradient(circle at 36% 32%, #000 52%, rgba(0, 0, 0, 0.55) 100%);
  mask-image: radial-gradient(circle at 36% 32%, #000 52%, rgba(0, 0, 0, 0.55) 100%);
}
.cert__stamp::before { content: ""; position: absolute; inset: 3px; border: 1px solid currentColor; border-radius: 2px; }
.cert__stamp span { padding-top: 3px; padding-left: 0.08em; }
.js:not(.no-gsap) [data-certs] .cert { opacity: 0; }
.js:not(.no-gsap) [data-certs] .cert__stamp { opacity: 0; }
.cred-note { margin-top: 32px; font-size: 13px; color: var(--c-sub); line-height: 1.9; }
@media (min-width: 640px) { .certs { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .certs { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; } }

/* =========================================================
   Motion: initial states (only when JS is running).
   main.js reveals them; .no-gsap shows everything if animation can't run.
   ========================================================= */
.js:not(.no-gsap) [data-reveal],
.js:not(.no-gsap) [data-reveal-group] > *,
.js:not(.no-gsap) [data-hero-fade] { opacity: 0; }
.js:not(.no-gsap) .hero__title .line > span { transform: translateY(108%); }
.js:not(.no-gsap) [data-hero-photo] { clip-path: inset(0 0 0 100%); }
.js:not(.no-gsap) [data-reveal-photo] picture { clip-path: inset(0 0 100% 0); }
.js:not(.no-gsap) .site-header { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .marquee__track, .strength__watermark { animation: none; }
}

/* =========================================================
   v2 — Editorial refinement layer
   Ruled, print-like composition: paper grain, large serif display type,
   section index numerals, hairline structure instead of boxed cards,
   circled arrows on actions. Overrides the base rules above.
   ========================================================= */
:root {
  --c-ink: #1f1715;
  --c-rule: #cdb7ad;
  --tracking-display: 0.025em;
}

/* paper grain over everything (multiply keeps it invisible on dark panels) */
body::before {
  content: ""; position: fixed; inset: -50%; z-index: 2000; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.7 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.05; mix-blend-mode: multiply;
}
@media (prefers-reduced-motion: reduce), (max-width: 640px) { body::before { inset: 0; } }

/* display type: larger, tighter, darker */
.hero__title, .sec-head__title, .page-hero__title, .pillar__title, .fact__label, .service__name, .flow__step h3, .prose h2, .prose h3,
.post__title, .faq-page__cat, .concerns__list p, .info__title, .profile__jp, .journey__verb, .cta-card h3, .confidentiality__title, .step__title, .about__heading { color: var(--c-ink); }
.cta-card--main h3 { color: var(--c-white); }
.sec-head__title { font-size: clamp(27px, 3.5vw, 46px); line-height: 1.48; letter-spacing: var(--tracking-display); }
.sec-head { margin-bottom: clamp(48px, 6.5vw, 88px); }
.sec-head__lead { font-size: 15px; }
.sec-head--light .sec-head__title { color: var(--c-white); }
.eyebrow { font-size: 11px; letter-spacing: 0.32em; margin-bottom: 26px; }
.eyebrow:not(.hero__eyebrow)::before { width: 36px; }
.eyebrow__ja { font-size: 12px; letter-spacing: 0.16em; }

/* section index numerals (home only): outlined figure in the top-right corner */
.page-home { counter-reset: sec; }
.page-home .section { counter-increment: sec; }
.page-home .section:not(.strength):not(.confidentiality)::before {
  content: counter(sec, decimal-leading-zero); position: absolute; right: var(--gutter); top: calc(var(--section-y) - 0.32em);
  font-family: var(--f-en); font-weight: 300; font-size: clamp(72px, 9vw, 132px); line-height: 1; letter-spacing: 0.02em;
  color: transparent; -webkit-text-stroke: 1px rgba(116, 22, 14, 0.16); pointer-events: none; z-index: 0;
}
.page-home .section > .container { position: relative; z-index: 1; }

/* actions: circled arrow */
.btn { gap: 18px; min-height: 58px; padding: 10px 10px 10px 28px; font-size: 14.5px; letter-spacing: 0.1em; border-radius: 0; }
.btn__arrow {
  width: 36px; height: 36px; padding: 9px; border-radius: 50%; border: 1px solid currentColor;
  transition: transform 0.5s var(--ease-out), background-color 0.5s var(--ease-out), border-color 0.5s var(--ease-out);
}
.btn--primary .btn__arrow { border-color: rgba(255, 255, 255, 0.55); }
.btn:hover .btn__arrow { transform: translateX(4px); background: rgba(255, 255, 255, 0.14); }
.btn--ghost:hover .btn__arrow { border-color: rgba(255, 255, 255, 0.6); }
.btn--sm { min-height: 48px; padding: 6px 6px 6px 20px; gap: 14px; }
.btn--sm .btn__arrow { width: 32px; height: 32px; padding: 8px; }
.link-arrow { font-size: 13.5px; letter-spacing: 0.1em; }
.link-arrow svg { width: 30px; height: 30px; padding: 7px; border: 1px solid var(--c-line); border-radius: 50%; }
.link-arrow:hover svg { transform: translateX(4px); background: var(--c-brand); stroke: var(--c-white); border-color: var(--c-brand); }
.link-arrow::after { display: none; }

/* header */
.site-header.is-scrolled { background: rgba(250, 247, 244, 0.86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.gnav__list a { font-size: 13.5px; letter-spacing: 0.1em; }

/* hero */
.hero__eyebrow { font-size: 11px; letter-spacing: 0.34em; }
.hero__title { font-size: clamp(28px, 6.6vw, 46px); line-height: 1.45; letter-spacing: var(--tracking-display); }
.hero__lead { font-size: 15px; line-height: 2.15; max-width: 30em; }
.hero__assurances { font-size: 12.5px; letter-spacing: 0.06em; }
.hero__caption { box-shadow: none; border: 1px solid var(--c-line); border-left: 2px solid var(--c-brand); padding: 16px 28px 16px 22px; }
.hero__caption-role { font-size: 11px; letter-spacing: 0.16em; }
.hero__media::after { content: ""; position: absolute; inset: 18px; border: 1px solid rgba(255, 255, 255, 0.6); pointer-events: none; z-index: 2; }
.hero__media::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(116, 22, 14, 0) 55%, rgba(116, 22, 14, 0.14) 100%); }
.hero__word {
  position: absolute; left: calc(var(--gutter) - 0.04em); bottom: -0.1em; z-index: 0; pointer-events: none; user-select: none;
  font-family: var(--f-en); font-weight: 300; font-size: clamp(100px, 11vw, 160px); line-height: 1; letter-spacing: 0.02em;
  color: transparent; -webkit-text-stroke: 1px rgba(116, 22, 14, 0.12);
}
@media (max-width: 480px) { .hero__eyebrow { font-size: 10px; letter-spacing: 0.22em; } }
@media (min-width: 960px) {
  .hero__title { font-size: clamp(30px, 3.05vw, 46px); }
  .hero__vertical { font-size: 14px; letter-spacing: 0.5em; }
  .hero__word { left: calc(var(--gutter) + 44px); bottom: -0.06em; }
}
@media (max-width: 959px) { .hero__word { display: none; } }

/* information strip */
.info__title { font-size: 17px; }
.info__list li { font-size: 14px; }

/* concerns: editorial numbered list beside a fixed heading */
.concerns .sec-head__title { max-width: 11em; }
.concerns__list, .concerns__list li { border-color: var(--c-rule); }
.concerns__list { counter-reset: concern; }
.concerns__list li { grid-template-columns: 56px minmax(0, 1fr); gap: 12px; padding: 24px 0; counter-increment: concern; }
.concerns__list li::before {
  content: counter(concern, decimal-leading-zero); font-family: var(--f-en); font-weight: 300; font-size: 26px; line-height: 1.2;
  color: var(--c-brand); letter-spacing: 0.04em;
}
.concerns__check { display: none; }
.concerns__list p { font-size: clamp(16px, 1.45vw, 18.5px); line-height: 1.85; letter-spacing: 0.03em; }
.concerns__closing { text-align: left; margin-top: 40px; padding-left: 56px; font-size: 16px; letter-spacing: 0.1em; }
@media (min-width: 960px) {
  .concerns .container { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); column-gap: clamp(48px, 7vw, 120px); align-items: start; }
  .concerns .sec-head { position: sticky; top: 120px; margin-bottom: 0; }
  .concerns__list { grid-template-columns: 1fr; column-gap: 0; border-top: 1px solid var(--c-rule); }
  .concerns__list li { border-top: 0; border-bottom: 1px solid var(--c-rule); }
  .concerns__list li:nth-last-child(-n + 2) { border-bottom: 1px solid var(--c-rule); }
  .concerns__closing { grid-column: 2; }
}

/* approach: ruled columns instead of boxed cards */
.pillars { gap: 0; border-top: 1px solid var(--c-rule); }
.pillar { background: transparent; border: 0; border-bottom: 1px solid var(--c-rule); padding: 28px 0 28px; }
.pillar:hover { transform: none; box-shadow: none; }
.pillar__no { font-size: 54px; font-weight: 300; letter-spacing: 0.02em; color: var(--c-brand); }
.pillar__icon { display: none; }
.pillar__title { margin-top: 22px; font-size: 22px; letter-spacing: 0.04em; }
.pillar__benefit { border-top: 0; padding-top: 14px; }
.pillar__desc + .pillar__benefit { margin-top: 18px; }
@media (min-width: 760px) {
  .pillars { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
  .pillar { border-bottom: 0; padding: 34px 32px 8px; }
  .pillar + .pillar { border-left: 1px solid var(--c-rule); }
  .pillar:first-child { padding-left: 0; }
  .pillar:last-child { padding-right: 0; }
}
.approach__band { margin-top: clamp(56px, 7vw, 96px); }
.approach__band::before { inset: 18px; }
.approach__quote { letter-spacing: 0.05em; }

/* Taiwan PIF facts */
.fact__figure span { font-size: clamp(50px, 5.6vw, 80px); }
.fact__label { font-size: 20px; letter-spacing: 0.05em; }
.fact__label::before { content: ""; display: block; width: 36px; height: 1px; background: var(--c-brand); margin-bottom: 16px; }

/* strength: comparison panels lose the box, gain an index letter */
.compare__panel { border: 0; border-top: 1px solid rgba(255, 255, 255, 0.24); border-radius: 0; padding: 28px 0 0; position: relative; }
.compare__panel--ours { background: transparent; border-top-color: var(--c-rose); }
.compare__panel::before {
  content: "A"; position: absolute; right: 0; top: 22px; font-family: var(--f-en); font-weight: 300; font-size: 44px; line-height: 1;
  color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, 0.3);
}
.compare__panel--ours::before { content: "B"; -webkit-text-stroke-color: rgba(242, 201, 184, 0.75); }
.compare__title { padding-right: 56px; }
.cmp-node rect { rx: 0; }
.cmp-node--key rect { rx: 0; }
.strength__points li { border-top-color: rgba(255, 255, 255, 0.18); }
.strength__kicker { border-radius: 0; padding: 3px 12px; font-size: 11px; letter-spacing: 0.22em; }
.strength__points h3 { font-size: 21px; letter-spacing: 0.04em; }
.bridge__col { border: 0; border-top: 1px solid rgba(255, 255, 255, 0.24); padding-inline: 0; }
.bridge__col--me { background: transparent; border-top-color: var(--c-rose); }
@media (min-width: 960px) { .bridge__col--me { padding-inline: 28px; background: rgba(255, 255, 255, 0.05); } }
.bridge__col .bridge__lang { border-radius: 0; }

/* numbers */
.numbers { border-block: 1px solid var(--c-line-soft); }
.number__value span { font-size: clamp(48px, 5.8vw, 84px); }

/* service list: beige sweep, circled arrow */
.service__list, .service__list a { border-color: var(--c-rule); }
.service__list a::before { background: var(--c-beige); }
.service__name { letter-spacing: 0.04em; }
.service__arrow { width: 40px; height: 40px; padding: 9px; border: 1px solid var(--c-line); border-radius: 50%; transition: transform 0.5s var(--ease-out), background-color 0.5s var(--ease-out), stroke 0.5s var(--ease-out), border-color 0.5s var(--ease-out); }
.service__list a:hover .service__arrow { transform: translateX(4px); background: var(--c-brand); border-color: var(--c-brand); stroke: var(--c-white); }
@media (min-width: 900px) { .service__list a { grid-template-columns: 88px minmax(0, 0.95fr) minmax(0, 1.05fr) 48px; } }

/* flow: large numerals, quieter dots */
.flow__steps { counter-reset: flow; }
.flow__step { counter-increment: flow; }
.flow__step::before { content: counter(flow, decimal-leading-zero); display: block; font-family: var(--f-en); font-weight: 300; font-size: 40px; line-height: 1; color: var(--c-brand); letter-spacing: 0.02em; }
.flow__no { display: none; }
.flow__dot { width: 11px; height: 11px; }
.flow__step.is-active .flow__dot, .no-gsap .flow__dot { box-shadow: none; }
.flow__step h3 { margin-top: 14px; font-size: 18.5px; letter-spacing: 0.04em; }
@media (min-width: 1000px) { .flow__step { padding-top: 44px; } .flow__dot { top: 2px; } }

/* profile */
.profile__jp { letter-spacing: 0.12em; }
.profile__photo::before { border-color: var(--c-rule); }

/* confidentiality: ruled band, no box, no icon */
.confidentiality__inner { background: transparent; border: 0; border-block: 1px solid var(--c-rule); padding-inline: 0; }
.confidentiality__icon { display: none; }
@media (min-width: 900px) { .confidentiality__inner { grid-template-columns: minmax(0, 1fr) auto; gap: 48px; } }

/* FAQ */
.faq__list, .faq__item { border-color: var(--c-rule); }
.faq__q { font-weight: 300; font-size: 22px; }

/* contact CTA: one solid card, two ruled columns */
.cta-card { border: 0; border-top: 1px solid var(--c-rule); padding-inline: 0; background: transparent; }
.cta-card:hover { transform: none; box-shadow: none; border-color: var(--c-brand); }
.cta-card--main { padding-inline: clamp(28px, 3vw, 40px); background: var(--c-brand); border-top-color: var(--c-brand); }
.cta-card__more { border-top: 0; padding-top: 6px; }
.cta-card__more svg { width: 34px; height: 34px; padding: 8px; border: 1px solid var(--c-line); border-radius: 50%; transition: transform 0.5s var(--ease-out), background-color 0.5s var(--ease-out), border-color 0.5s var(--ease-out), stroke 0.5s var(--ease-out); }
.cta-card:hover .cta-card__more svg { transform: translateX(4px); background: var(--c-brand); border-color: var(--c-brand); stroke: var(--c-white); }
.cta-card--main .cta-card__more svg { border-color: rgba(255, 255, 255, 0.5); }
.cta-card--main:hover .cta-card__more svg { background: var(--c-white); border-color: var(--c-white); stroke: var(--c-brand); }
.cta-card h3 { font-size: 21px; letter-spacing: 0.04em; }

/* footer */
.site-footer__inner { padding-block: 96px 64px; }
.site-footer__tagline { font-family: var(--f-serif); font-size: 14px; letter-spacing: 0.12em; line-height: 1.9; color: rgba(255, 255, 255, 0.7); }

/* sub pages */
.page-hero { padding-bottom: clamp(56px, 8vw, 104px); }
.page-hero__title { font-size: clamp(28px, 4vw, 54px); line-height: 1.42; letter-spacing: var(--tracking-display); }
.page-hero__mark { width: 440px; opacity: 0.05; top: 10px; }
.page-hero__lead { font-size: 15.5px; }
.prose h2 { font-size: clamp(23px, 2.6vw, 31px); letter-spacing: 0.03em; }
.prose .lead-answer { background: var(--c-beige); border: 0; border-left: 2px solid var(--c-brand); padding: 24px 28px; }
.prose .lead-answer::before { font-family: var(--f-en); letter-spacing: 0.3em; text-transform: uppercase; }
html[lang="ja"] .prose .lead-answer::before { content: "Point ｜ 結論"; }
html[lang="zh-Hant"] .prose .lead-answer::before { content: "Point ｜ 結論"; }
.toc summary { font-family: var(--f-en); font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--c-brand); }
.post { background: transparent; border: 0; border-top: 1px solid var(--c-rule); padding: 28px 0 24px; }
.post:hover { transform: none; box-shadow: none; border-color: var(--c-brand); }
.post__title { font-size: clamp(19px, 1.9vw, 23px); letter-spacing: 0.03em; }
.post__more svg { width: 30px; height: 30px; padding: 7px; border: 1px solid var(--c-line); border-radius: 50%; }
.post:hover .post__more svg { transform: translateX(4px); background: var(--c-brand); stroke: var(--c-white); border-color: var(--c-brand); }
.cta-band { margin-top: 80px; padding: clamp(32px, 4.5vw, 56px); }
.cta-band::before { content: ""; position: absolute; inset: 12px; border: 1px solid rgba(255, 255, 255, 0.14); pointer-events: none; }
.cta-band { position: relative; }
.cta-band h2 { position: relative; }
.faq-cats a { border-radius: 0; }

/* v2: contact tabs as ruled columns; wider title column on split heads */
.contact-tabs { gap: 0; }
.contact-tab { background: transparent; border: 0; border-top: 1px solid var(--c-rule); padding: 22px 0 20px; }
.contact-tab::after { left: 0; right: 0; top: -1px; bottom: auto; height: 2px; }
.contact-tab:hover { background: transparent; }
.contact-tab[aria-selected="true"] { border-color: var(--c-rule); }
.contact-tab__title { font-size: 19px; color: var(--c-ink); }
@media (min-width: 900px) {
  .contact-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
  .contact-tab { padding: 22px 28px 20px; }
  .contact-tab + .contact-tab { border-left: 1px solid var(--c-rule); }
  .contact-tab:first-child { padding-left: 0; }
  .contact-tab:last-child { padding-right: 0; }
  .sec-head--split { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
}
.contact-tab__title { font-size: 19px; }
.form { border-color: var(--c-line-soft); }

/* v2: headings inside dark panels always stay light (the .prose h2 ink rule must not reach the CTA band) */
.cta-band h2, .cta-band h3, .cta-band p, .approach__band *, .strength h2, .strength h3, .site-footer h2, .site-footer h3 { color: inherit; }
.cta-band h2 { color: var(--c-white); }
.cta-band p { color: rgba(255, 255, 255, 0.82); }
/* sources list: use the standard prose bullet (the old text-indent collided with it) */
.prose .sources li { padding-left: 20px; text-indent: 0; }

/* =========================================================
   v3 — Readability & findability
   Calmer type, darker secondary text, no decorative numerals,
   dropdown menus, "find by purpose" grid, guide sidebar, footer sitemap.
   ========================================================= */
:root { --c-sub: #5b4f4a; }
body { letter-spacing: 0.02em; line-height: 1.85; }
.page-home .section:not(.strength):not(.confidentiality)::before { content: none; }
.hero__word { display: none; }
.sec-head__title { font-size: clamp(25px, 3vw, 40px); line-height: 1.5; letter-spacing: 0.02em; }
.sec-head__lead { font-size: 15.5px; line-height: 1.9; max-width: 38em; }
.hero__title { letter-spacing: 0.02em; }
.hero__lead { font-size: 15.5px; line-height: 2; }
.pillar__desc, .service__desc, .fact p:last-child, .flow__step p:last-child, .strength__points p, .cta-card p, .post__excerpt,
.journey__step p:last-child, .faq__a p, .concerns__list p, .bridge__list, .lab__lead, .approach__band-note, .info__list li { font-size: 15px; line-height: 1.9; }
.concerns__list p { font-size: clamp(15.5px, 1.3vw, 17px); font-family: var(--f-sans); font-weight: 500; }
.eyebrow { font-size: 11.5px; letter-spacing: 0.26em; }
.muted { color: var(--c-sub); }
.strength { padding-top: var(--section-y); }
.flow { background: var(--c-bg); }
.prose { line-height: 1.95; }
.prose p, .prose li { font-size: 16px; }

/* header dropdowns */
.gnav__list > li { position: relative; }
.gnav__list a { display: inline-flex; align-items: center; gap: 6px; }
.gnav__chev { width: 7px; height: 7px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: translateY(-2px) rotate(45deg); opacity: 0.6; }
.gnav__sub {
  position: absolute; left: -24px; top: 100%; padding-top: 14px; min-width: 300px; z-index: 50;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity 0.35s var(--ease-out), transform 0.35s var(--ease-out), visibility 0s linear 0.35s;
}
.gnav__item--has-sub:hover .gnav__sub, .gnav__item--has-sub:focus-within .gnav__sub { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.gnav__sub-inner { background: var(--c-white); border: 1px solid var(--c-line); box-shadow: 0 24px 48px -28px rgba(42, 34, 32, 0.35); padding: 18px 22px 16px; }
.gnav__sub-title { font-family: var(--f-en); font-size: 11px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--c-brand); margin-bottom: 8px; }
.gnav__sub ul { display: grid; }
.gnav__sub ul a { display: block; padding: 9px 0; font-size: 14px; font-weight: 400; letter-spacing: 0.04em; border-bottom: 1px solid var(--c-line-soft); white-space: nowrap; }
.gnav__sub ul a::after { display: none; }
.gnav__sub ul a:hover { color: var(--c-brand); }
.gnav__sub-all { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 13px; font-weight: 500; color: var(--c-brand); white-space: nowrap; }
.gnav__sub-all::after { display: none; }
.gnav__sub-all svg { width: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.site-header { overflow: visible; }

/* drawer sub-lists (mobile) */
.drawer__sub { display: grid; gap: 2px; padding: 0 4px 14px 118px; }
.drawer__sub a { display: block; padding: 5px 0; font-family: var(--f-sans); font-size: 14px; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.72); }
.drawer__sub a::before { content: "– "; color: var(--c-rose); }
.drawer__nav { max-width: 600px; }
.drawer { overflow-y: auto; align-items: flex-start; }
@media (max-width: 480px) { .drawer__sub { padding-left: 4px; } }

/* "find by purpose" grid */
.quicknav { background: var(--c-bg); padding-top: clamp(64px, 8vw, 112px); }
.quicknav .sec-head { margin-bottom: clamp(32px, 4vw, 48px); }
.quicknav__grid { display: grid; gap: 14px; }
.qn {
  position: relative; display: grid; gap: 8px; height: 100%; padding: 24px 24px 22px;
  background: var(--c-white); border: 1px solid var(--c-line);
  transition: border-color 0.4s var(--ease-out), transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
}
.qn:hover { border-color: var(--c-brand); transform: translateY(-3px); box-shadow: 0 20px 36px -30px rgba(74, 15, 10, 0.4); }
.qn__label { font-size: 11.5px; letter-spacing: 0.2em; color: var(--c-brand); }
.qn__title { font-family: var(--f-serif); font-weight: 600; font-size: 19px; letter-spacing: 0.03em; line-height: 1.5; color: var(--c-ink); }
.qn__desc { font-size: 14px; line-height: 1.8; color: var(--c-sub); padding-right: 40px; }
.qn__arrow { position: absolute; right: 20px; bottom: 20px; width: 34px; height: 34px; border: 1px solid var(--c-line); border-radius: 50%; display: grid; place-items: center; transition: background-color 0.4s, border-color 0.4s; }
.qn__arrow svg { width: 16px; fill: none; stroke: var(--c-brand); stroke-width: 1.5; transition: stroke 0.4s, transform 0.4s var(--ease-out); }
.qn:hover .qn__arrow { background: var(--c-brand); border-color: var(--c-brand); }
.qn:hover .qn__arrow svg { stroke: var(--c-white); transform: translateX(2px); }
@media (min-width: 640px) { .quicknav__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .quicknav__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } }

/* guide sidebar + numbered headings */
.toc__guide { margin-top: 22px; padding: 18px 18px 16px; background: var(--c-white); border: 1px solid var(--c-line); font-size: 13.5px; }
.toc__guide-title { font-family: var(--f-en); font-size: 11px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--c-brand); margin-bottom: 6px; }
.toc__guide ul a { display: block; padding: 7px 0 7px 14px; line-height: 1.6; color: var(--c-sub); border-left: 1px solid var(--c-line-soft); transition: color 0.3s, border-color 0.3s; }
.toc__guide ul a:hover { color: var(--c-text); }
.toc__guide ul a[aria-current="page"] { color: var(--c-brand); font-weight: 500; border-left: 2px solid var(--c-brand); }
.toc__guide-more { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 13px; font-weight: 500; color: var(--c-brand); }
.toc__guide-more svg { width: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; }
@media (min-width: 1100px) { .toc__guide { padding-inline: 0; border: 0; border-top: 1px solid var(--c-line); background: transparent; } }
.page-guide .prose { counter-reset: h2n; }
.page-guide .prose > h2 { counter-increment: h2n; }
.page-guide .prose > h2::before { content: counter(h2n, decimal-leading-zero); display: block; margin-bottom: 10px; font-family: var(--f-en); font-weight: 400; font-size: 12px; letter-spacing: 0.26em; color: var(--c-brand); }
.page-guide .prose .cta-band h2 { counter-increment: none; }
.page-guide .prose .cta-band h2::before { content: none; }

/* footer sitemap */
.site-footer__nav { grid-template-columns: 1fr; gap: 28px; }
.site-footer__nav li + li { margin-top: 8px; }
.site-footer__nav-title { font-family: var(--f-en); font-size: 11px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--c-rose); margin-bottom: 4px; }
.site-footer__nav a { font-size: 13.5px; color: rgba(255, 255, 255, 0.8); }
@media (min-width: 700px) { .site-footer__nav { grid-template-columns: repeat(3, auto); gap: 24px 40px; } }
@media (min-width: 960px) { .site-footer__inner { grid-template-columns: 0.9fr 1fr 1.7fr; gap: 48px; } }
/* guide sidebar links must not inherit the TOC's numbered grid */
.toc__guide li { counter-increment: none; }
.toc__guide ul a, .toc__guide-more { grid-template-columns: none; }
.toc__guide ul a { display: block; }
.toc__guide-more { display: inline-flex; }
.toc__guide ul a::before, .toc__guide-more::before { content: none; }
/* career arc: role names + what each stage gives the client */
.journey__verb { font-size: 19px; letter-spacing: 0.06em; flex-wrap: wrap; row-gap: 2px; }
.journey__step p.journey__gain { margin-top: 12px; padding-left: 12px; border-left: 2px solid var(--c-brand); font-size: 14px; line-height: 1.75; color: var(--c-ink); font-weight: 500; }
.journey__verb { display: block; line-height: 1.5; }
.journey__verb span { display: block; margin-top: 5px; }
/* career arc with four stages: ruled 2×2 grid instead of the rail */
.journey { grid-template-columns: 1fr; gap: 0; }
.journey::before, .journey__line, .journey__dot { display: none; }
.journey__step { padding: 22px 0 24px; border-top: 1px solid var(--c-rule); }
.journey__step p:last-child.journey__gain { margin-top: 12px; }
@media (min-width: 700px) {
  .journey { grid-template-columns: 1fr 1fr; column-gap: 40px; }
  .journey__step { padding: 24px 0 26px; }
}
/* career arc: back to the single timeline — one line, four points, one short phrase each */
.journey { grid-template-columns: 1fr; gap: 28px; }
.journey::before, .journey__line, .journey__dot { display: block; }
.journey::before, .journey__line { left: 7px; right: auto; top: 10px; bottom: 10px; width: 1px; height: auto; }
.journey__line { transform-origin: top; transform: scaleY(0); }
.journey__step { padding: 0 0 0 40px; border-top: 0; }
.journey__dot { top: 8px; }
.journey__verb { font-size: 18px; }
.journey__step p:last-child { font-size: 14px; line-height: 1.8; }
@media (min-width: 900px) {
  .journey { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
  .journey::before, .journey__line { left: 0; right: 0; top: 7px; bottom: auto; width: auto; height: 1px; }
  .journey__line { transform-origin: left; transform: scaleX(0); }
  .journey__step { padding: 34px 0 0; }
  .journey__dot { top: 0; }
}

/* =========================================================
   v4 — Photography (Unsplash License)
   One consistent treatment: slightly desaturated, warm, square-cornered,
   thin inner frame. Decorative images carry alt="".
   ========================================================= */
.page-hero__photo, .concerns__photo, .service__thumb, .pillar__photo, .facts__band,
.confidentiality__photo, .lab__photo, .post__photo { position: relative; display: block; margin: 0; overflow: hidden; background: var(--c-beige-2); }
.page-hero__photo img, .concerns__photo img, .service__thumb img, .pillar__photo img, .facts__band img,
.confidentiality__photo img, .lab__photo img, .post__photo img {
  display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.82) contrast(1.03);
  transition: transform 1.2s var(--ease-out);
}
.page-hero__photo::after, .concerns__photo::after, .pillar__photo::after, .facts__band::after, .lab__photo::after, .post__photo::after, .confidentiality__photo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(116, 22, 14, 0) 55%, rgba(116, 22, 14, 0.12)); mix-blend-mode: multiply;
}

/* sub-page header: text left, photo right */
.page-hero--photo { padding-bottom: clamp(48px, 6vw, 80px); }
.page-hero__grid { display: grid; gap: 28px; }
.page-hero__photo { aspect-ratio: 16 / 9; }
.page-hero--photo .page-hero__title { font-size: clamp(26px, 3.4vw, 46px); }
@media (min-width: 900px) {
  .page-hero__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(40px, 5vw, 80px); align-items: end; }
  .page-hero__photo { aspect-ratio: 4 / 3; max-height: 380px; }
  .page-hero__photo::before { content: ""; position: absolute; inset: 12px; z-index: 1; border: 1px solid rgba(255, 255, 255, 0.55); pointer-events: none; }
}

/* home: concerns */
.concerns__photo { margin-top: 28px; aspect-ratio: 16 / 9; }
@media (min-width: 960px) { .concerns__photo { margin-top: 40px; aspect-ratio: 4 / 5; max-width: 380px; } }

/* home: service thumbnails (desktop) */
.service__thumb { display: none; }
@media (min-width: 900px) {
  .service__list a { grid-template-columns: 64px 128px minmax(0, 0.9fr) minmax(0, 1.1fr) 48px; }
  .service__thumb { display: block; width: 128px; aspect-ratio: 3 / 2; }
  .service__list a:hover .service__thumb img { transform: scale(1.06); }
}

/* home: three principles */
.pillar__photo { aspect-ratio: 3 / 2; margin-bottom: 22px; }

/* home: PIF facts band */
.facts__band { height: clamp(180px, 24vw, 340px); margin-bottom: clamp(40px, 5vw, 64px); }

/* home: features (dark) — faint photographic texture at the top */
.strength__bg { position: absolute; inset: 0 0 auto 0; height: min(640px, 70%); z-index: 0; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, transparent 100%); }
.strength__bg img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.15); opacity: 0.14; mix-blend-mode: luminosity; }
.strength > .container { position: relative; z-index: 1; }

/* home: confidentiality */
.confidentiality__photo { aspect-ratio: 16 / 9; }
@media (min-width: 900px) { .confidentiality__inner { grid-template-columns: 260px minmax(0, 1fr) auto; } .confidentiality__photo { aspect-ratio: 4 / 3; } }

/* zh home: partner-lab block */
.lab__photo { aspect-ratio: 16 / 9; margin-bottom: 24px; }
@media (min-width: 960px) {
  .lab { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.75fr); column-gap: clamp(40px, 5vw, 72px); align-items: start; }
  .lab > :not(.lab__photo) { grid-column: 1; }
  .lab__photo { grid-column: 2; grid-row: 1 / span 3; aspect-ratio: 4 / 3; margin: 0; }
}

/* column cards */
.post__photo { aspect-ratio: 16 / 9; margin-bottom: 6px; }
.post:hover .post__photo img { transform: scale(1.04); }

@media (prefers-reduced-motion: reduce) { .post:hover .post__photo img, .service__list a:hover .service__thumb img { transform: none; } }
.concerns__photo img { object-position: 50% 78%; }
.pillar__photo { aspect-ratio: auto; height: clamp(150px, 14vw, 200px); }
.toc .toc__guide-more { display: inline-flex; grid-template-columns: none; padding: 0; color: var(--c-brand); }
.toc .toc__guide-more::before { content: none; }

/* =========================================================
   v5 — Senior design pass
   Calmer hero (no network motif), credentials above the fold,
   deliberate background rhythm, tighter spacing, numerals used sparingly.
   ========================================================= */
:root { --section-y: clamp(72px, 9vw, 136px); }

/* hero */
.hero__network, .hero__scroll { display: none !important; }
.hero { background: var(--c-bg); }
.hero__assurances { margin-top: 22px; }
.hero__creds {
  margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--c-rule);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; max-width: 560px;
}
.hero__creds li { display: grid; gap: 4px; }
.hero__creds strong { font-family: var(--f-serif); font-weight: 600; font-size: 21px; line-height: 1.2; letter-spacing: 0.04em; color: var(--c-brand); white-space: nowrap; }
.hero__creds strong small { margin-left: 2px; font-size: 13px; letter-spacing: 0.04em; }
.hero__creds span { font-size: 12px; letter-spacing: 0.08em; color: var(--c-sub); }
@media (min-width: 640px) {
  .hero__creds { grid-template-columns: repeat(4, auto); justify-content: start; gap: 0; }
  .hero__creds li { padding: 0 24px; border-left: 1px solid var(--c-line-soft); }
  .hero__creds li:first-child { padding-left: 0; border-left: 0; }
}
@media (min-width: 960px) { .hero .hero__inner { padding-block: 32px 72px; } }

/* rhythm: alternate grounds so each section reads as its own chapter */
.service { background: var(--c-white); }
.concerns { background: var(--c-bg); }
.flow { background: var(--c-bg); }
.quicknav { padding-bottom: clamp(56px, 7vw, 96px); }
.concerns__closing { margin-top: 28px; padding-left: 0; text-align: left; font-size: 15px; letter-spacing: 0.08em; }
@media (min-width: 960px) { .concerns__closing { grid-column: 2; padding-left: 68px; } }

/* numerals sparingly: principles lead with photos, so the index becomes a small label */
.pillar__no { font-size: 12px; font-weight: 400; letter-spacing: 0.24em; line-height: 1; }
.pillar__no::after { content: ""; display: inline-block; width: 24px; height: 1px; margin-left: 10px; vertical-align: middle; background: currentColor; }
.pillar__title { margin-top: 12px; }

/* find-by-purpose: compact two-up grid on phones */
@media (max-width: 639px) {
  .quicknav__grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .qn { padding: 16px 14px 48px; gap: 4px; }
  .qn__desc { display: none; }
  .qn__title { font-size: 16px; }
  .qn__arrow { right: 12px; bottom: 12px; width: 28px; height: 28px; }
}
/* hierarchy: section titles clearly below the hero headline */
.sec-head__title { font-size: clamp(24px, 2.6vw, 36px); }
.approach__title { max-width: none; margin-inline: 0; }
.approach .sec-head--split .sec-head__lead { max-width: 30em; }
/* hero name card: keep it inside the photo panel so it never meets the credential row */
@media (min-width: 960px) { .hero__caption { left: calc(100% - var(--hero-media-w) + 28px); right: auto; bottom: 40px; } }

/* =========================================================
   Column archive: one article per row, newest first, grouped by month
   ========================================================= */
.archive { max-width: 1040px; margin-inline: auto; }
.archive__sort { display: flex; justify-content: flex-end; align-items: baseline; gap: 12px; margin-bottom: 18px; font-size: 13px; letter-spacing: 0.08em; color: var(--c-sub); }
.archive__sort span { padding-left: 12px; border-left: 1px solid var(--c-line); }
.archive__month { display: flex; align-items: center; gap: 16px; margin: 0 0 4px; padding-bottom: 14px; border-bottom: 1px solid var(--c-ink);
  font-family: var(--f-serif); font-weight: 600; font-size: 19px; letter-spacing: 0.08em; color: var(--c-ink); }
.archive__list + .archive__month { margin-top: 56px; }
.arc { border-bottom: 1px solid var(--c-rule); }
.arc__link { position: relative; isolation: isolate; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px; align-items: start; padding: 22px 0; }
.arc__link::before { content: ""; position: absolute; inset: 0 -16px; z-index: -1; background: var(--c-white); transform: scaleY(0); transform-origin: bottom; transition: transform 0.5s var(--ease-out); }
.arc__link:hover::before { transform: scaleY(1); }
.arc__date { display: grid; gap: 4px; padding-top: 2px; color: var(--c-brand); }
.arc__day { font-family: var(--f-en); font-weight: 300; font-size: 34px; line-height: 1; letter-spacing: 0.02em; }
.arc__ym { font-family: var(--f-en); font-size: 11.5px; letter-spacing: 0.14em; color: var(--c-sub); }
.arc__thumb { display: none; overflow: hidden; background: var(--c-beige-2); aspect-ratio: 3 / 2; }
.arc__thumb img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.82) contrast(1.03); transition: transform 1s var(--ease-out); }
.arc__link:hover .arc__thumb img { transform: scale(1.05); }
.arc__body { display: grid; gap: 8px; min-width: 0; }
.arc__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.arc__new { padding: 2px 10px; background: var(--c-brand); color: var(--c-white); font-size: 11.5px; font-weight: 500; letter-spacing: 0.14em; }
.arc__tag { padding: 1px 10px; border: 1px solid var(--c-line); color: var(--c-brand); font-size: 11.5px; letter-spacing: 0.08em; }
.arc__title { font-family: var(--f-serif); font-weight: 600; font-size: 18px; line-height: 1.6; letter-spacing: 0.03em; color: var(--c-ink); }
.arc__excerpt { font-size: 14px; line-height: 1.85; color: var(--c-sub); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.arc__arrow { display: none; }
@media (min-width: 760px) {
  .arc__link { grid-template-columns: 88px 200px minmax(0, 1fr) 44px; gap: 28px; align-items: center; padding: 28px 0; }
  .arc__thumb { display: block; }
  .arc__day { font-size: 44px; }
  .arc__title { font-size: 20px; }
  .arc__arrow { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--c-line); border-radius: 50%; transition: background-color 0.4s, border-color 0.4s; }
  .arc__arrow svg { width: 16px; fill: none; stroke: var(--c-brand); stroke-width: 1.5; transition: stroke 0.4s, transform 0.4s var(--ease-out); }
  .arc__link:hover .arc__arrow { background: var(--c-brand); border-color: var(--c-brand); }
  .arc__link:hover .arc__arrow svg { stroke: var(--c-white); transform: translateX(2px); }
}
@media (prefers-reduced-motion: reduce) { .arc__link:hover .arc__thumb img { transform: none; } }
.archive { max-width: none; }
/* column index: the list is the content — on phones skip the header photo and start the list sooner */
.page-column-index .column-list { padding-top: clamp(40px, 5vw, 72px); }
@media (max-width: 899px) { .page-column-index .page-hero__photo { display: none; } }

/* Small aside inside article text, e.g. a spelling or terminology note */
.prose .note { font-size: 14px; color: var(--c-sub); }