/* Yonshore 官网生产站 · 共享样式表 · 合并自设计系统 colors_and_type.css + ui_kits/website 7 页 · 2026-05-20 */

/* ════════════════════════════════════════════════════════════════════
   集成说明（重要）
   --------------------------------------------------------------------
   7 个 ui_kit 页面的内联 <style> 在 nav 背景 / body 背景 / footer 背景 /
   brand-mark / hero / row 网格 上各页不一致（C 风白底页 vs A 风奶油底页）。
   为保证「删内联 style 换 link 后渲染 100% 不变」，本表把这些有差异的规则
   按页面作用域拆分。每个页面 <body> 必须加且仅加一个页面类：

     index.html                            → <body class="page-index">
     cases.html                            → <body class="page-cases">
     insights.html                         → <body class="page-insights">
     faq.html                              → <body class="page-faq">
     about.html                            → <body class="page-about">
     case-医美连锁AI智能客服.html           → <body class="page-case">
     insight-为什么聚焦的团队比规模化的更快落地AI.html → <body class="page-insight">

   不加页面类 → 走默认值（A 风奶油底，与 5 个 A 风页一致）。
   ════════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════════
   01 · WEB FONTS
   ════════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;1,6..72,400;1,6..72,500&family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&family=Noto+Serif+SC:wght@400;500;600;700&display=swap');


/* ════════════════════════════════════════════════════════════════════
   02 · :ROOT 设计令牌（以 colors_and_type.css 为正本 · 7 页额外令牌已并入）
   ════════════════════════════════════════════════════════════════════ */
:root {
  /* ---- COLOR · TEXT ---- */
  --text-main:   #1d1d1f;
  --text-mute:   #6e6e73;
  --text-faint:  #86868b;

  /* ---- COLOR · ACCENT ---- */
  --accent:      #c8a14a;
  --accent-dk:   #a37f33;
  --amber-soft:  rgba(200, 161, 74, 0.10);
  --amber-line:  rgba(200, 161, 74, 0.32);

  /* ---- COLOR · HAIRLINES ---- */
  --hairline-light:  rgba(20, 20, 19, 0.08);
  --hairline-strong: rgba(20, 20, 19, 0.16);

  /* ---- COLOR · LINK + SUPPORT ---- */
  --link:    #0066cc;
  --navy:    #0a2540;

  /* ---- COLOR · SECTION SURFACES ---- */
  --bg-c:      #ffffff;
  --bg-c-sub:  #f5f5f7;
  --bg-a:      #faf9f5;
  --bg-a-sub:  #f0eee6;
  --bg-trust:  #fafafb;
  --bg:        var(--bg-c);

  /* ---- TYPOGRAPHY · FONT FAMILIES ---- */
  --sans:  'Inter', -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --serif: 'Newsreader', 'Source Han Serif SC', 'Noto Serif SC', 'Songti SC', ui-serif, Georgia, serif;
  --mono:  'JetBrains Mono', 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --f-sans:  var(--sans);
  --f-serif: var(--serif);
  --f-mono:  var(--mono);
  --f-body:  var(--sans);
  --f-display: var(--sans);
  --f-label: var(--mono);

  /* ---- TYPOGRAPHY · SCALE (fluid) ---- */
  --t-hero:     clamp(48px, 6.4vw, 72px);
  --t-hero-a:   clamp(48px, 7vw, 80px);
  --t-display:  clamp(40px, 4.6vw, 56px);
  --t-section:  clamp(34px, 4.6vw, 52px);
  --t-h3:       clamp(34px, 3.6vw, 48px);
  --t-h4:       clamp(28px, 3.2vw, 36px);
  --t-row:      clamp(22px, 2.4vw, 28px);
  --t-method:   clamp(24px, 2.6vw, 30px);
  --t-lead:     clamp(19px, 1.6vw, 22px);
  --t-sub:      21px;
  --t-body-lg:  18px;
  --t-body:     17px;
  --t-body-sm:  15px;
  --t-mono:     11px;
  --t-mono-sm:  10.5px;
  --t-mono-cap: 12px;
  --t-nav:      14px;

  /* ---- line-height ---- */
  --lh-tight:    1.04;
  --lh-snug:     1.1;
  --lh-base:     1.55;
  --lh-loose:    1.7;

  /* ---- letter-spacing ---- */
  --ls-hero:     -0.025em;
  --ls-display:  -0.02em;
  --ls-tight:    -0.015em;
  --ls-mono:     0.14em;
  --ls-mono-wide:0.18em;
  --ls-mono-soft:0.08em;

  /* ---- SPACING SCALE ---- */
  --s-1:  4px;  --s-2:  8px;  --s-3:  12px; --s-4:  16px;
  --s-5:  20px; --s-6:  24px; --s-8:  32px; --s-10: 40px;
  --s-12: 48px; --s-14: 56px; --s-16: 64px; --s-20: 80px;
  --s-24: 96px; --s-32: 128px;
  --pad-section: clamp(80px, 10vw, 120px);
  --pad-hero:    clamp(96px, 12vw, 140px);
  --pad-narrow:  clamp(56px, 7vw, 88px);

  /* ---- page grid ---- */
  --max:    1200px;
  --gutter: clamp(20px, 4vw, 48px);

  /* ---- 7 页额外令牌：可读宽度（detail 页用，名字各异，全部并入） ---- */
  --measure:  720px;   /* insight 详情页 · .prose 出版物可读宽度 */
  --read-max: 680px;   /* case 详情页 · .read 可读宽度 */

  /* ---- RADII ---- */
  --r-sm:    8px;
  --r-md:    10px;
  --r-lg:    18px;
  --r-xl:    22px;
  --r-pill:  980px;
  --cta-radius: var(--r-pill);

  /* ---- SHADOWS (warm amber tint) ---- */
  --shadow-amber-1: 0 13.5px 27px -12px rgba(166, 130, 50, 0.18);
  --shadow-amber-2: 0 20px 60px      rgba(166, 130, 50, 0.12);
  --shadow-amber-3: 0 30px 80px -20px rgba(166, 130, 50, 0.22);
  --shadow-focus:   0 0 0 3px var(--amber-soft);

  /* ---- MOTION ---- */
  --ease:        cubic-bezier(.215, .61, .355, 1);
  --ease-soft:   cubic-bezier(.42, 0, .58, 1);
  --ease-edit:   cubic-bezier(.2, .6, .2, 1);
  --d-quick: .25s;
  --d-fast:  .35s;
  --d-base:  .5s;
  --d-slow:  .9s;
  --d-marquee: 38s;
}


/* ════════════════════════════════════════════════════════════════════
   03 · 全局 RESET + 排版
   ════════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  color: var(--text-main);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'tnum' 1, 'kern' 1, 'liga' 1, 'ss01' 1;
}
/* 页面背景 · 各页不一致 → 按页面类作用域（见集成说明） */
body { background: #faf9f5; }            /* 默认 A 风奶油底（5 个 A 风页） */
body.page-index { background: #ffffff; } /* index 是唯一 C 风白底页 */

a { color: inherit; text-decoration: none; transition: color var(--d-quick) var(--ease); }
a:hover { color: var(--accent); }
::selection { background: var(--amber-soft); color: var(--text-main); }
img { display: block; max-width: 100%; height: auto; }
.num { font-feature-settings: 'tnum' 1; font-variant-numeric: tabular-nums; }

/* 容器 */
.container { max-width: var(--max); margin: 0 auto; padding-inline: var(--gutter); }
.narrow    { max-width: 880px; margin: 0 auto; padding-inline: var(--gutter); }
.reading   { max-width: 720px; margin: 0 auto; padding-inline: var(--gutter); }
.read      { max-width: var(--read-max); margin: 0 auto; }

/* ---- 语义排版（colors_and_type.css 正本） ---- */
.h1, h1 {
  font-family: var(--sans); font-weight: 600;
  font-size: var(--t-hero); line-height: var(--lh-tight);
  letter-spacing: var(--ls-hero); color: var(--text-main);
  text-wrap: balance; margin: 0 0 var(--s-8) 0;
}
.h1 em, h1 em {
  font-family: var(--serif); font-style: italic; font-weight: 500;
  color: var(--accent); letter-spacing: -0.01em; padding-inline: 0.04em;
}
.h2, h2 {
  font-family: var(--sans); font-weight: 600;
  font-size: var(--t-display); line-height: var(--lh-snug);
  letter-spacing: var(--ls-display); color: var(--text-main);
  margin: 0 0 var(--s-5) 0;
}
.h2 em, h2 em { font-family: var(--serif); font-style: italic; font-weight: 500; color: var(--accent); }
.h2-serif {
  font-family: var(--serif); font-weight: 400; font-style: italic;
  font-size: var(--t-section); line-height: 1.08;
  letter-spacing: var(--ls-display); color: var(--text-main);
  text-wrap: balance; margin: 0 0 var(--s-5) 0;
}
.h2-serif em { font-style: italic; color: var(--text-main); }
.h2-serif .zh {
  font-family: var(--serif); font-style: normal; font-weight: 500;
  letter-spacing: -0.01em; color: var(--text-mute);
  font-size: 0.62em; padding-left: 0.3em;
}
.h3, h3 {
  font-family: var(--sans); font-weight: 600;
  font-size: var(--t-h3); line-height: 1.12;
  letter-spacing: var(--ls-display); color: var(--text-main);
  margin: 0 0 var(--s-5) 0;
}
.h4, h4 {
  font-family: var(--serif); font-weight: 400; font-style: italic;
  font-size: var(--t-h4); line-height: 1.15;
  letter-spacing: -0.018em; color: var(--text-main);
  margin: 0 0 var(--s-5) 0; text-wrap: balance;
}
.lead {
  font-family: var(--sans); font-size: var(--t-lead); font-weight: 400;
  color: var(--text-mute); line-height: var(--lh-base);
  max-width: 60ch; margin: 0 0 var(--s-8) 0;
}
.lead em { font-family: var(--serif); font-style: italic; color: var(--text-main); font-weight: 400; }
p {
  font-size: var(--t-body); line-height: var(--lh-base);
  color: var(--text-mute); margin: 0 0 var(--s-4) 0;
}
p strong, p b { color: var(--text-main); font-weight: 500; }
p em { font-family: var(--serif); font-style: italic; color: var(--text-main); font-weight: 400; }

/* eyebrow · 带 rule 横线的 mono 小标（colors_and_type 正本 .eyebrow + 各页 .ey） */
.eyebrow {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--mono); font-size: var(--t-mono); font-weight: 500;
  text-transform: uppercase; letter-spacing: var(--ls-mono-wide);
  color: var(--text-faint);
}
.eyebrow .rule { flex: 0 0 56px; height: 1px; background: var(--text-main); }
.eyebrow .ink { color: var(--text-main); }
.eyebrow .sep { color: var(--hairline-strong); }
.eyebrow-dot {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: var(--t-mono-cap);
  text-transform: uppercase; letter-spacing: var(--ls-mono);
  color: var(--text-faint);
}
.eyebrow-dot .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 4px var(--amber-soft);
}
/* .ey · 多页通用的 eyebrow 横线小标（cases / about / case 详情页 / work 段） */
.ey {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .18em; color: var(--text-faint);
}
.ey .rule { flex: 0 0 56px; height: 1px; background: var(--text-main); }
.ey .ink { color: var(--text-main); }
.ey .sep { color: var(--hairline-strong); }

.label-mono {
  font-family: var(--mono); font-size: var(--t-mono); font-weight: 500;
  letter-spacing: var(--ls-mono-wide); color: var(--text-faint);
  text-transform: uppercase;
}
code, .code {
  font-family: var(--mono); font-size: 0.92em; color: var(--text-main);
  background: var(--bg-c-sub); padding: 2px 6px; border-radius: 6px;
}
blockquote, q {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: 20px; line-height: 1.45; color: var(--text-main);
  quotes: '"' '"';
}
.link {
  color: var(--link); font-weight: 500;
  border-bottom: 1px solid currentColor; padding-bottom: 2px;
  transition: color var(--d-quick) var(--ease), border-color var(--d-quick) var(--ease);
}
.link:hover { color: var(--accent); border-color: var(--accent); }


/* ════════════════════════════════════════════════════════════════════
   04 · 段背景切换器 · .section--c / .section--a（纸感颗粒）
   ════════════════════════════════════════════════════════════════════ */
.section--c { --bg: #ffffff; --bg-sub: #f5f5f7; }
.section--a { --bg: #faf9f5; --bg-sub: #f0eee6; }
section { background: var(--bg); }

.section--a { position: relative; isolation: isolate; background: var(--bg); }
.section--a::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.08  0 0 0 0 0.08  0 0 0 0 0.08  0 0 0 0.04 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 160px 160px; mix-blend-mode: multiply; opacity: .55;
}
.section--a > * { position: relative; z-index: 1; }

/* 全页奶油纸感 · insights / faq / insight 详情页用 fixed 颗粒 */
.page-paper { position: relative; isolation: isolate; background: #faf9f5; }
.page-paper::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.08  0 0 0 0 0.08  0 0 0 0 0.08  0 0 0 0.04 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 160px 160px; mix-blend-mode: multiply; opacity: .5;
}
main, header, footer { position: relative; z-index: 1; }


/* ════════════════════════════════════════════════════════════════════
   05 · NAV 顶栏（共享）
   --------------------------------------------------------------------
   ⚠️ 冲突 1：.nav 背景 7 页不一致（半透明 backdrop 取页底色）
     index #fff/.82 · cases #faf9f5/.86 · insights #faf9f5/.85
     faq #faf9f5/.82 · about #faf9f5/.82 · case #faf9f5/.86 · insight #faf9f5/.85
   ⚠️ 冲突 2：.brand-mark::after 内圈色 = 页底色（index #fff · 余 #faf9f5）
   → 按页面类作用域，保证逐页 1:1
   ════════════════════════════════════════════════════════════════════ */
.nav {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--hairline-light);
  background: rgba(250, 249, 245, 0.85);            /* 默认 A 风 */
}
body.page-index    .nav { background: rgba(255, 255, 255, 0.82); }
body.page-cases    .nav { background: rgba(250, 249, 245, 0.86); }
body.page-insights .nav { background: rgba(250, 249, 245, 0.85); }
body.page-faq      .nav { background: rgba(250, 249, 245, 0.82); }
body.page-about    .nav { background: rgba(250, 249, 245, 0.82); }
body.page-case     .nav { background: rgba(250, 249, 245, 0.86); }
body.page-insight  .nav { background: rgba(250, 249, 245, 0.85); }

.nav-inner { height: 64px; display: flex; align-items: center; justify-content: space-between; }
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 600; letter-spacing: -0.01em; font-size: 18px;
}
.brand-mark { width: 22px; height: 22px; position: relative; display: inline-block; }
.brand-mark::before, .brand-mark::after { content: ""; position: absolute; inset: 0; border-radius: 50%; }
.brand-mark::before {
  background: radial-gradient(circle at 35% 35%, var(--accent) 0%, #a37f33 70%);
  box-shadow: 0 4px 14px rgba(200, 161, 74, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
.brand-mark::after { inset: 6px; background: #faf9f5; }   /* 默认 A 风 */
body.page-index .brand-mark::after { background: #fff; }  /* index C 风白底 */

.brand-name { font-family: var(--sans); font-weight: 600; }
.brand-cn {
  color: var(--text-mute); font-weight: 400; font-size: 13px;
  margin-left: 6px; letter-spacing: .04em;
}
.nav-links { display: flex; align-items: center; gap: 36px; }
.nav-links a {
  font-size: 14px; color: var(--text-main); opacity: .78;
  transition: opacity .25s var(--ease), color .25s var(--ease);
}
.nav-links a:hover { opacity: 1; color: var(--accent); }
/* 当前页高亮 · 两种写法并存（[aria-current] 与 .is-current 各页混用，全保留） */
.nav-links a[aria-current="page"] {
  opacity: 1; color: var(--text-main);
  border-bottom: 1px solid var(--accent); padding-bottom: 4px;
}
.nav-links a.is-current { opacity: 1; color: var(--text-main); font-weight: 500; }
.nav-links a.is-current::after {
  content: ""; display: block; height: 1px;
  background: var(--accent); margin-top: 2px;
}
.cta-pill {
  display: inline-flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 18px; border-radius: var(--cta-radius);
  border: 1px solid var(--accent); color: var(--accent); background: transparent;
  font-size: 14px; font-weight: 500; letter-spacing: .02em;
  transition: all .35s var(--ease);
}
.cta-pill:hover { background: var(--accent); color: #fff; box-shadow: var(--shadow-amber-1); }


/* ════════════════════════════════════════════════════════════════════
   06 · 胶囊按钮 .btn-primary / .btn-text（共享 · 7 页一致）
   ════════════════════════════════════════════════════════════════════ */
.btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  height: 48px; padding: 0 26px; border-radius: var(--cta-radius);
  border: 1px solid var(--accent); background: transparent; color: var(--accent);
  font-size: 15px; font-weight: 500; letter-spacing: .02em;
  transition: all .4s var(--ease); cursor: pointer;
}
.btn-primary:hover {
  background: var(--accent); color: #fff;
  box-shadow: var(--shadow-amber-2); transform: translateY(-1px);
}
.btn-primary .arrow { transition: transform .35s var(--ease); }
.btn-primary:hover .arrow { transform: translateX(4px); }
.btn-text {
  color: var(--link); font-size: 15px; font-weight: 500;
  display: inline-flex; align-items: center; gap: 6px;
  transition: gap .3s var(--ease);
}
.btn-text:hover { gap: 10px; }
/* index hero 内联下划线链接 */
.link-underline {
  color: var(--link); font-size: 15px; font-weight: 500;
  border-bottom: 1px solid currentColor; padding-bottom: 2px;
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.link-underline:hover { color: var(--accent); border-color: var(--accent); }


/* ════════════════════════════════════════════════════════════════════
   07 · HERO（index 首页 C 风 · 含视觉块）
   ⚠️ 冲突 3：.hero 在多页含义不同。index = 首页大图 hero；
      cases/case 详情页用 .hero 做轻量页头。下面是 index 版本，
      cases/case 的 .hero 覆盖见 §13 / §16 页面专属分区。
   ════════════════════════════════════════════════════════════════════ */
body.page-index .hero {
  position: relative;
  padding-block: clamp(96px,12vw,140px) clamp(96px,12vw,160px);
  overflow: hidden; background: #ffffff;
}
body.page-index .hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(1100px 600px at 88% -10%, rgba(200,161,74,0.08), transparent 60%),
              radial-gradient(900px 700px at -5% 110%, rgba(10,37,64,0.04), transparent 60%);
}
body.page-index .hero-grid {
  position: relative; display: grid;
  grid-template-columns: 1.05fr 1fr; gap: 80px; align-items: center;
}
.eyebrow-c {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 12px; color: var(--text-mute);
  letter-spacing: .14em; text-transform: uppercase; margin-bottom: 32px;
}
.eyebrow-c .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 4px var(--amber-soft);
}
body.page-index .hero h1 {
  font-size: clamp(48px,6.4vw,72px); font-weight: 600;
  line-height: 1.05; letter-spacing: -0.025em; margin: 0 0 28px;
}
body.page-index .hero h1 .seed {
  color: var(--accent); font-family: var(--serif); font-style: italic;
  font-weight: 500; letter-spacing: -0.01em; padding-inline: 0.04em;
}
.hero-sub {
  font-size: clamp(19px,1.6vw,22px); font-weight: 400;
  color: var(--text-mute); line-height: 1.5; max-width: 560px; margin: 0 0 30px;
}
.hero-meta {
  display: flex; gap: 0; flex-wrap: wrap; align-items: center;
  color: var(--text-faint); font-family: var(--mono); font-size: 12px;
  letter-spacing: .08em; text-transform: uppercase; margin-bottom: 44px;
}
.hero-meta span { display: inline-flex; align-items: center; padding: 4px 0; }
.hero-meta .sep { width: 1px; height: 11px; background: var(--hairline-strong); margin-inline: 18px; }
.cta-row { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }

.hero-visual {
  position: relative; aspect-ratio: 1/1; max-width: 540px; margin-left: auto;
  border-radius: 24px;
  background: linear-gradient(160deg, #fbfbfd 0%, #f6f9fc 100%);
  box-shadow: var(--shadow-amber-1), 0 1px 0 rgba(255,255,255,.9) inset;
  border: 1px solid var(--hairline-light); overflow: hidden;
}
.hero-visual svg { width: 100%; height: 100%; display: block; }
.hero-visual::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 120px;
  background: linear-gradient(to top, rgba(255,255,255,.6), transparent); pointer-events: none;
}
.map-caption {
  font-family: var(--mono); font-size: 11px; color: var(--text-faint);
  letter-spacing: .12em; text-transform: uppercase;
  display: flex; align-items: center; gap: 8px;
}
.hero-visual .map-caption { position: absolute; left: 24px; bottom: 20px; }
.map-caption .pin { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

/* SVG 流程图动画 keyframes（index hero + case 详情页 visual 共用） */
@keyframes pulse { 0%,100%{opacity:.45;transform:scale(1)} 50%{opacity:1;transform:scale(1.18)} }
@keyframes dash  { to { stroke-dashoffset: -32; } }
.node-pulse { transform-origin: center; transform-box: fill-box; animation: pulse 2.6s var(--ease-soft) infinite; }
.flow-line  { stroke-dasharray: 4 6; animation: dash 2.4s linear infinite; }


/* ════════════════════════════════════════════════════════════════════
   08 · TRUST STRIP marquee 跑马灯（index）
   ════════════════════════════════════════════════════════════════════ */
.trust {
  padding-block: 32px; background: #fafafb;
  border-top: 1px solid var(--hairline-light);
  border-bottom: 1px solid var(--hairline-light);
  overflow: hidden; position: relative;
}
.trust::before, .trust::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 120px;
  z-index: 2; pointer-events: none;
}
.trust::before { left: 0; background: linear-gradient(to right, #fafafb, transparent); }
.trust::after  { right: 0; background: linear-gradient(to left, #fafafb, transparent); }
.trust-label {
  font-family: var(--mono); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--text-faint); margin-bottom: 18px;
  display: flex; align-items: center; gap: 14px;
}
.trust-label::after { content: ""; flex: 1; height: 1px; background: var(--hairline-light); }
.trust-track { display: flex; gap: 0; width: max-content; animation: marquee 38s linear infinite; }
.trust-track:hover { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.trust-chip {
  flex-shrink: 0; display: inline-flex; align-items: center;
  padding: 0 36px; height: 36px;
  font-family: var(--mono); font-size: 12px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text-main);
  border-right: 1px solid var(--hairline-light); white-space: nowrap;
}
.trust-chip .cn {
  font-family: var(--sans); letter-spacing: .02em; font-size: 13px;
  font-weight: 500; text-transform: none; margin-right: 10px;
}
.trust-chip .en { color: var(--text-faint); font-weight: 400; }


/* ════════════════════════════════════════════════════════════════════
   09 · SERVICES 服务段 + .tile 服务卡（index）
   ════════════════════════════════════════════════════════════════════ */
.services { padding-block: clamp(96px,11vw,140px) clamp(80px,9vw,120px); background: #ffffff; }
.services-head { margin-bottom: 64px; max-width: 780px; }
.services-eyebrow {
  font-family: var(--mono); font-size: 12px; color: var(--accent);
  letter-spacing: .16em; text-transform: uppercase; font-weight: 500; margin-bottom: 18px;
}
.services-head h2 {
  font-size: clamp(40px,4.6vw,56px); font-weight: 600;
  line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 18px;
}
.services-sub {
  font-size: 21px; color: var(--text-mute); line-height: 1.5;
  font-weight: 400; max-width: 620px; margin: 0;
}
.services-sub em { font-family: var(--serif); font-style: italic; color: var(--text-main); font-weight: 500; }

.tile-stack { display: flex; flex-direction: column; gap: 40px; }
.tile {
  position: relative; min-height: 540px; border-radius: 22px;
  padding: 64px 64px 56px; overflow: hidden;
  display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center;
  transition: transform .6s var(--ease), box-shadow .6s var(--ease);
}
.tile.bg-sub { background: #f5f5f7; }
.tile.bg-white {
  background: #fff;
  box-shadow: var(--shadow-amber-1), 0 1px 0 rgba(255,255,255,.9) inset;
  border: 1px solid var(--hairline-light);
}
.tile:hover { transform: translateY(-2px); }
.tile.bg-white:hover { box-shadow: var(--shadow-amber-3); }
.tile-tag {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .18em;
  color: var(--text-faint); text-transform: uppercase; font-weight: 500; margin-bottom: 22px;
}
.tile-tag .ix {
  font-family: var(--serif); font-style: italic; color: var(--accent);
  font-size: 14px; text-transform: none; letter-spacing: 0;
}
.tile h3 {
  font-size: clamp(34px,3.6vw,48px); font-weight: 600;
  line-height: 1.12; letter-spacing: -0.02em; margin: 0 0 20px;
}
.tile p { font-size: 20px; color: var(--text-mute); line-height: 1.5; margin: 0 0 32px; max-width: 480px; }
.tile-bullets {
  list-style: none; padding: 0; margin: 0 0 36px;
  display: flex; flex-direction: column; gap: 11px;
  font-size: 15px; color: var(--text-main);
}
.tile-bullets li { display: flex; align-items: flex-start; gap: 12px; line-height: 1.5; }
.tile-bullets li::before {
  content: ""; width: 14px; height: 1px; background: var(--accent);
  margin-top: 11px; flex-shrink: 0;
}
.tile-cta-row { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.tile-visual {
  position: relative; aspect-ratio: 1/1; max-width: 420px; margin-left: auto;
  border-radius: 18px; background: #fff;
  border: 1px solid var(--hairline-light); box-shadow: var(--shadow-amber-1);
  overflow: hidden; display: flex; align-items: center; justify-content: center;
}
.tile.bg-white .tile-visual { background: linear-gradient(160deg, #fafbfc 0%, #f6f9fc 100%); }
.tile-visual svg { width: 100%; height: 100%; display: block; }


/* ════════════════════════════════════════════════════════════════════
   10 · METHOD 方法段 + .method-row（index）
   ════════════════════════════════════════════════════════════════════ */
.method {
  padding-block: clamp(80px,10vw,120px); background: #fafafb;
  border-top: 1px solid var(--hairline-light);
}
.method-head { margin-bottom: 56px; max-width: 760px; }
.method-head .services-eyebrow { margin-bottom: 18px; }
.method-head h2 {
  font-size: clamp(36px,4.2vw,52px); font-weight: 600;
  line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 18px;
}
.method-head h2 em { font-family: var(--serif); font-style: italic; color: var(--accent); font-weight: 500; }
.method-head p { font-size: 19px; color: var(--text-mute); line-height: 1.55; max-width: 60ch; margin: 0; }
.method-table { border-top: 1px solid var(--hairline-strong); margin-top: 8px; }
.method-row {
  display: grid;
  grid-template-columns: 80px minmax(0,1.4fr) minmax(0,1fr) 160px;
  align-items: baseline; gap: 32px;
  padding-block: clamp(28px,3.4vw,38px);
  border-bottom: 1px solid var(--hairline-light);
  position: relative; transition: padding-left .35s var(--ease-edit);
}
.method-row::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform .5s var(--ease-edit);
}
.method-row:hover::before { transform: scaleX(1); }
.method-row:hover { padding-left: 12px; }
.method-row .step-n {
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .18em; color: var(--text-faint);
  align-self: start; padding-top: .7em;
}
.method-row .step-title {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(24px,2.6vw,30px); line-height: 1.2;
  letter-spacing: -0.015em; color: var(--text-main);
}
.method-row .step-title .cn {
  font-family: var(--sans); font-style: normal; font-weight: 600;
  letter-spacing: -0.01em; color: var(--text-main);
  font-size: .82em; margin-right: .4em;
}
.method-row .step-desc {
  font-family: var(--sans); font-size: 15px; color: var(--text-mute);
  line-height: 1.55; max-width: 46ch; align-self: start; padding-top: .6em;
}
.method-row .step-time {
  font-family: var(--mono); font-size: 12px; font-weight: 500;
  color: var(--accent); letter-spacing: .1em; text-transform: uppercase;
  text-align: right; align-self: start; padding-top: .9em;
  font-variant-numeric: tabular-nums;
}
.method-row .step-time .lbl {
  display: block; color: var(--text-faint); font-size: 10px;
  letter-spacing: .18em; margin-bottom: 4px; font-weight: 500;
}


/* ════════════════════════════════════════════════════════════════════
   11 · 列表行 .row / .list（共享基础 · index work/notes 段）
   --------------------------------------------------------------------
   ⚠️ 冲突 4：.row 的 grid-template-columns 各页列数不同（5/6/3/5 列）。
      下面是 index work 段版本；cases / insights / case-related 的
      .row 网格覆盖见各页面专属分区。.row 的 hover / 子元素样式 7 页一致。
   ════════════════════════════════════════════════════════════════════ */
.list { border-top: 1px solid var(--hairline-strong); list-style: none; margin: 0; padding: 0; }

.row {
  display: grid; align-items: baseline; gap: 28px;
  padding-block: clamp(28px,3.6vw,40px);
  border-bottom: 1px solid var(--hairline-light);
  position: relative; cursor: pointer;
  transition: padding-left .35s var(--ease-edit);
  grid-template-columns: 64px minmax(0,1fr) 200px 80px 28px;  /* index work 默认 */
}
.row::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform .5s var(--ease-edit);
}
.row:hover::before { transform: scaleX(1); }
.row:hover { padding-left: 14px; }
.row .n {
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .18em; color: var(--text-faint);
  align-self: start; padding-top: .7em;
}
.row .t {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(22px,2.4vw,28px); line-height: 1.22;
  letter-spacing: -0.015em; color: var(--text-main); text-wrap: balance;
  transition: font-style .25s ease, color .25s ease;
}
.row .t .zh { font-family: var(--serif); font-weight: 500; letter-spacing: -0.01em; }
.row .t .en { font-style: italic; color: var(--text-mute); font-size: .66em; padding-left: .42em; }
.row:hover .t { font-style: italic; }
.row:hover .t .zh {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px; background-repeat: no-repeat; background-position: 0 100%;
}
.row .ind, .row .yr {
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .18em; color: var(--text-mute);
  font-variant-numeric: tabular-nums; align-self: start; padding-top: .9em;
}
.row .ar {
  font-family: var(--serif); font-size: 22px; color: var(--text-faint);
  align-self: start; padding-top: .6em;
  transition: color .25s ease, transform .35s var(--ease-edit);
}
.row:hover .ar { color: var(--accent); transform: translateX(8px); }
/* notes 行变体 */
.row.row--note { grid-template-columns: 64px minmax(0,1fr) 120px 80px 28px; }
.row .meta-time {
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .18em; color: var(--text-mute);
  align-self: start; padding-top: .9em;
}

/* index WORK 段框架 */
.work { padding-block: clamp(96px,14vw,160px); border-top: 1px solid var(--hairline-light); }
.work-head { display: grid; grid-template-columns: repeat(12,1fr); gap: 32px; margin-bottom: clamp(56px,8vw,88px); }
.work-head .ey { grid-column: 1 / span 12; }
.work-head h2 {
  grid-column: 1 / span 10; margin: 24px 0 0;
  font-family: var(--serif); font-weight: 400; font-style: italic;
  font-size: clamp(34px,4.6vw,52px); line-height: 1.08;
  letter-spacing: -0.02em; color: var(--text-main); text-wrap: balance;
}
.work-head h2 .zh {
  font-family: var(--serif); font-style: normal; font-weight: 500;
  letter-spacing: -0.01em; color: var(--text-mute); font-size: .62em; padding-left: .3em;
}
.work-head p {
  grid-column: 1 / span 7; margin: 24px 0 0;
  color: var(--text-mute); font-weight: 300; font-size: 18px;
  line-height: 1.65; max-width: 60ch;
}
.work-head p em { font-style: italic; color: var(--text-main); font-family: var(--serif); font-weight: 400; }
.work-foot {
  margin-top: clamp(40px,5vw,56px); display: flex; align-items: baseline;
  justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.view-all {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: 18px; color: var(--text-main);
  border-bottom: 1px solid var(--text-main); padding-bottom: 2px;
  transition: color .25s ease, border-color .25s ease;
}
.view-all:hover { color: var(--accent); border-color: var(--accent); }
.work-count {
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .18em; color: var(--text-faint);
}
.work-count b { color: var(--text-main); font-weight: 500; }

/* index NOTES 段框架 */
.notes { padding-block: clamp(56px,7vw,96px) clamp(72px,10vw,120px); border-top: 1px solid var(--hairline-light); }
.notes-head { display: grid; grid-template-columns: repeat(12,1fr); gap: 32px; margin-bottom: clamp(36px,5vw,56px); }
.notes-head .ey { grid-column: 1 / span 12; }
.notes-head h2 {
  grid-column: 1 / span 9; margin: 24px 0 0;
  font-family: var(--serif); font-weight: 400; font-size: clamp(28px,3.4vw,40px);
  line-height: 1.12; letter-spacing: -0.015em; color: var(--text-main);
}
.notes-head h2 em { font-style: italic; color: var(--text-main); }


/* ════════════════════════════════════════════════════════════════════
   12 · FAQ accordion .faq-item（index 首页 FAQ 段 · summary/details 模式）
   ════════════════════════════════════════════════════════════════════ */
.faq { padding-block: clamp(72px,9vw,108px) clamp(80px,10vw,120px); border-top: 1px solid var(--hairline-light); }
.faq-head { display: grid; grid-template-columns: repeat(12,1fr); gap: 32px; margin-bottom: clamp(40px,5vw,56px); }
.faq-head .ey { grid-column: 1 / span 12; }
.faq-head h2 {
  grid-column: 1 / span 9; margin: 24px 0 0;
  font-family: var(--serif); font-weight: 400; font-size: clamp(28px,3.4vw,40px);
  line-height: 1.12; letter-spacing: -0.015em; color: var(--text-main);
}
.faq-head h2 em { font-style: italic; color: var(--text-main); }
.faq-head p {
  grid-column: 1 / span 7; margin: 18px 0 0;
  color: var(--text-mute); font-size: 17px; line-height: 1.6; font-weight: 300;
}
/* ⚠️ 冲突 5：.faq-list 在 index 是 <ul>（border-top + reset），在 faq.html
   是整段容器（仅 padding）。按页面类作用域。 */
body.page-index .faq-list {
  border-top: 1px solid var(--hairline-strong);
  list-style: none; margin: 0; padding: 0;
}
.faq-item { border-bottom: 1px solid var(--hairline-light); }
.faq-item summary {
  list-style: none; cursor: pointer;
  display: grid; grid-template-columns: 64px 1fr 28px; gap: 28px;
  padding-block: clamp(24px,3vw,32px); align-items: baseline;
  position: relative; transition: padding-left .35s var(--ease-edit);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform .5s var(--ease-edit);
}
.faq-item[open] summary::before,
.faq-item summary:hover::before { transform: scaleX(1); }
.faq-item summary:hover { padding-left: 12px; }
.faq-item .faq-n {
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .18em;
  color: var(--text-faint); align-self: start; padding-top: .5em;
}
.faq-item .faq-q {
  font-family: var(--serif); font-weight: 500; font-style: normal;
  font-size: clamp(20px,2.2vw,26px); line-height: 1.22;
  letter-spacing: -0.015em; color: var(--text-main);
}
.faq-item .faq-ic {
  font-family: var(--serif); font-style: italic; font-size: 24px;
  color: var(--text-faint); align-self: start; padding-top: .2em;
  transition: transform .4s var(--ease-edit), color .25s ease;
}
.faq-item[open] .faq-ic { transform: rotate(45deg); color: var(--accent); }
.faq-item .faq-a {
  display: grid; grid-template-columns: 64px 1fr 28px; gap: 28px;
  padding: 0 0 clamp(24px,3vw,32px);
}
.faq-item .faq-a-body {
  grid-column: 2;
  font-family: var(--sans); font-size: 15.5px; line-height: 1.7;
  color: var(--text-main); max-width: 64ch;
}
.faq-foot {
  margin-top: clamp(32px,4vw,48px);
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
}


/* ════════════════════════════════════════════════════════════════════
   13 · INQUIRY 询盘表单 .form / .field（index）
   ════════════════════════════════════════════════════════════════════ */
.inquiry { padding-block: clamp(96px,12vw,140px); background: #f5f5f7; border-top: 1px solid var(--hairline-light); }
.inquiry-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 72px; align-items: start; }
.inquiry-head h2 {
  font-size: clamp(34px,4vw,44px); font-weight: 600;
  line-height: 1.15; letter-spacing: -0.02em; margin: 18px 0 18px;
}
.inquiry-head h2 em { font-family: var(--serif); font-style: italic; color: var(--accent); font-weight: 500; }
.inquiry-head p { color: var(--text-mute); font-size: 17px; line-height: 1.6; max-width: 42ch; margin: 0 0 28px; }
.inquiry-meta {
  display: flex; flex-direction: column; gap: 10px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-faint);
  padding-top: 24px; border-top: 1px solid var(--hairline-light);
}
.inquiry-meta b { color: var(--text-main); font-weight: 500; }
form.form {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
  background: #fff; border: 1px solid var(--hairline-light);
  border-radius: 18px; padding: 36px; box-shadow: var(--shadow-amber-1);
}
.field { display: flex; flex-direction: column; gap: 6px; }
.field.full { grid-column: 1 / span 2; }
.field label {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text-faint); font-weight: 500;
}
.field input, .field select, .field textarea {
  font-family: var(--sans); font-size: 15px; color: var(--text-main);
  background: #fff; border: 1px solid var(--hairline-light);
  border-radius: 10px; padding: 12px 14px;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
  appearance: none;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--amber-soft);
}
.field textarea { resize: vertical; min-height: 96px; line-height: 1.5; }
.field select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%236e6e73' stroke-width='1.4' fill='none' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 34px;
}
.form-foot {
  grid-column: 1 / span 2; display: flex; align-items: center;
  justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-top: 6px;
}
.privacy { font-size: 12px; color: var(--text-faint); max-width: 44ch; line-height: 1.55; }


/* ════════════════════════════════════════════════════════════════════
   14 · FOOTER 页脚（共享）
   ⚠️ 冲突 6：.footer 背景各页不一致 — index/insights/faq/case-detail 用 #fff，
      cases/about/insight-detail 用 #faf9f5。按页面类作用域。
   ════════════════════════════════════════════════════════════════════ */
.footer {
  border-top: 1px solid var(--hairline-light);
  padding: 48px 0 56px;
  background: #fff;                                 /* 默认 */
}
body.page-cases   .footer { background: #faf9f5; }
body.page-about   .footer { background: #fff; }     /* about 段为 #fff */
body.page-insight .footer { background: #faf9f5; }
/* index / insights / faq / case 详情页 footer = #fff（走默认）
   注：about.html 原 .footer 为 #fff，已与默认一致。 */

.footer-grid { display: grid; grid-template-columns: 1.2fr 2fr 1fr; gap: 48px; align-items: start; }
.footer-brand { display: flex; flex-direction: column; gap: 10px; }
.footer-brand .wordmark { font-weight: 600; font-size: 18px; letter-spacing: -0.01em; }
.footer-brand .entity {
  font-family: var(--mono); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text-faint);
}
.footer-nav { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; }
.footer-col h4 {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--text-faint); font-weight: 500; margin: 0 0 14px;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.footer-col a {
  font-size: 14px; color: var(--text-main); opacity: .78;
  transition: opacity .25s var(--ease), color .25s var(--ease);
}
.footer-col a:hover { opacity: 1; color: var(--accent); }
.footer-meta {
  text-align: right; display: flex; flex-direction: column; gap: 8px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-faint);
}
.footer-bottom {
  margin-top: 36px; padding-top: 18px;
  border-top: 1px solid var(--hairline-light);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text-faint);
}
.footer-bottom em {
  font-family: var(--serif); font-style: italic; color: var(--accent);
  text-transform: none; letter-spacing: -0.005em; font-size: 13px;
}


/* ════════════════════════════════════════════════════════════════════
   15 · REVEAL 滚入动画（共享）
   --------------------------------------------------------------------
   ⚠️ 冲突 7（轻微）：translateY 起始值各页 14~20px、delay 步进各页
      .06~.08s 略不同。统一取 colors_and_type 正本（20px / .08s 步进）。
      视觉差 ≤ 6px / ≤ 80ms，仅入场瞬间，肉眼不可辨。如需逐页绝对一致，
      可在页面类下覆盖；本表按正本统一。
   ════════════════════════════════════════════════════════════════════ */
.reveal {
  opacity: 0; transform: translateY(20px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.reveal.in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .08s; }
.reveal[data-delay="2"] { transition-delay: .16s; }
.reveal[data-delay="3"] { transition-delay: .24s; }
.reveal[data-delay="4"] { transition-delay: .32s; }
.reveal[data-delay="5"] { transition-delay: .40s; }


/* ════════════════════════════════════════════════════════════════════
   16 · 页面专属 · CASES（案例归档页）
   行业筛选 chip + 22 行案例 grid + CTA 段 + 统计卡
   ════════════════════════════════════════════════════════════════════ */
/* cases hero（A 风轻量页头，12 列网格） */
body.page-cases .hero { padding-block: clamp(96px,12vw,148px) clamp(72px,9vw,108px); }
body.page-cases .hero-grid { display: grid; grid-template-columns: repeat(12,1fr); gap: 32px; align-items: end; }
body.page-cases .hero .ey { grid-column: 1 / span 12; margin-bottom: 24px; }
body.page-cases .hero h1 {
  grid-column: 1 / span 11;
  font-family: var(--serif); font-weight: 400; font-style: italic;
  font-size: clamp(48px,7.2vw,72px); line-height: 1.04;
  letter-spacing: -0.025em; color: var(--text-main); margin: 0; text-wrap: balance;
}
body.page-cases .hero h1 .zh {
  font-family: var(--serif); font-style: normal; font-weight: 500;
  letter-spacing: -0.01em; color: var(--text-main);
}
body.page-cases .hero h1 .count {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  color: var(--accent); padding-inline: 0.04em;
}
body.page-cases .hero-sub {
  grid-column: 1 / span 8; margin: 32px 0 0;
  font-size: 18px; line-height: 1.65; color: var(--text-mute);
  font-weight: 300; max-width: 64ch;
}
body.page-cases .hero-sub em {
  font-style: italic; color: var(--text-main);
  font-family: var(--serif); font-weight: 400;
}

/* 行业筛选 chip 条 */
.filters { padding-block: clamp(36px,5vw,56px); border-top: 1px solid var(--hairline-light); }
.filters-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 18px; flex-wrap: wrap; margin-bottom: 20px;
}
.filters-head .label {
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .18em; color: var(--text-faint);
}
.filters-head .label b { color: var(--text-main); font-weight: 500; }
.filters-head .helper { font-family: var(--serif); font-style: italic; font-size: 14px; color: var(--text-mute); }
.chips { display: flex; flex-wrap: wrap; gap: 10px 12px; list-style: none; margin: 0; padding: 0; }
/* ⚠️ 冲突 8：.chip 在 cases / insights / faq 三页样式不同
   （cases = 方形小标签 padding 6/14；insights = 圆角 padding 7/14；
   faq = 固定高 30px 含 .ix 序号）。按页面类作用域。下面是 cases 版本。 */
body.page-cases .chip {
  display: inline-flex; align-items: center; padding: 6px 14px;
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .14em; color: var(--text-mute);
  background: transparent; border: 1px solid var(--hairline-strong);
  border-radius: 980px; cursor: pointer;
  transition: color .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease);
}
body.page-cases .chip:hover { color: var(--text-main); border-color: var(--text-main); }
body.page-cases .chip.is-active { color: #fff; background: var(--text-main); border-color: var(--text-main); }
body.page-cases .chip[data-filter="all"].is-active { color: #fff; background: var(--accent); border-color: var(--accent); }
body.page-cases .chip .dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: currentColor; opacity: .5; margin-right: 8px;
}

/* 22 行案例 archive（.row 6 列网格覆盖） */
.archive { padding-block: clamp(24px,3vw,40px) clamp(80px,10vw,120px); }
body.page-cases .row {
  grid-template-columns: 64px minmax(0,1fr) 200px 80px 80px 28px;
  padding-block: clamp(24px,3vw,32px);
  transition: padding-left .35s var(--ease-edit), opacity .35s var(--ease);
}
body.page-cases .row .t { font-size: clamp(20px,2.2vw,26px); line-height: 1.24; }
body.page-cases .row .t .en { font-size: .62em; display: inline-block; }
body.page-cases .row .ind, body.page-cases .row .dur, body.page-cases .row .yr {
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .16em; color: var(--text-mute);
  font-variant-numeric: tabular-nums; align-self: start; padding-top: .9em;
}
body.page-cases .row .dur { color: var(--text-faint); }
body.page-cases .row .yr { color: var(--text-faint); }
body.page-cases .row .ar { padding-top: .5em; }
.row.is-hidden { display: none; }
.row.row--disabled { cursor: default; opacity: .78; }
.row.row--disabled:hover { padding-left: 0; }
.row.row--disabled:hover::before { transform: scaleX(0); }
.row.row--disabled:hover .t { font-style: normal; }
.row.row--disabled:hover .t .zh { background-image: none; }
.row.row--disabled:hover .ar { color: var(--text-faint); transform: none; }
.archive-foot {
  margin-top: clamp(40px,5vw,56px); display: flex; align-items: baseline;
  justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.archive-count {
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .18em; color: var(--text-faint);
}
.archive-count b { color: var(--text-main); font-weight: 500; }
.archive-foot .closer { font-family: var(--serif); font-style: italic; color: var(--text-mute); font-size: 14px; }

/* cases CTA 段 + 统计卡 */
.cta-section { padding-block: clamp(80px,10vw,120px); background: #f5f5f7; border-top: 1px solid var(--hairline-light); }
.cta-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 64px; align-items: center; }
.cta-eyebrow {
  font-family: var(--mono); font-size: 12px; color: var(--accent);
  letter-spacing: .16em; text-transform: uppercase; font-weight: 500; margin-bottom: 18px;
}
.cta-section h2 {
  font-size: clamp(32px,3.8vw,44px); font-weight: 600;
  line-height: 1.18; letter-spacing: -0.02em; margin: 0 0 18px;
}
.cta-section h2 em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--accent); }
.cta-section p { color: var(--text-mute); font-size: 17px; line-height: 1.65; max-width: 48ch; margin: 0 0 32px; }
.cta-actions { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.stats-card {
  background: #fff; border: 1px solid var(--hairline-light);
  border-radius: 18px; padding: 36px 32px; box-shadow: var(--shadow-amber-1);
}
.stats-head {
  font-family: var(--mono); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--text-faint); font-weight: 500;
  margin-bottom: 18px; display: flex; align-items: center; gap: 10px;
}
.stats-head .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 4px var(--amber-soft);
}
.stats-table { display: flex; flex-direction: column; border-top: 1px solid var(--hairline-light); }
.stats-table .row-s {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 14px 0; border-bottom: 1px solid var(--hairline-light);
  font-feature-settings: 'tnum' 1;
}
.stats-table .row-s:last-child { border-bottom: none; }
.stats-table .row-s .k {
  font-family: var(--mono); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text-mute);
}
.stats-table .row-s .v {
  font-family: var(--serif); font-size: 22px; font-weight: 500;
  color: var(--text-main); letter-spacing: -0.01em;
}
.stats-table .row-s .v em { font-family: var(--serif); font-style: italic; color: var(--accent); font-weight: 400; }


/* ════════════════════════════════════════════════════════════════════
   17 · 页面专属 · INSIGHTS（洞察列表页）
   分类 chip + article-row + 订阅 CTA
   ════════════════════════════════════════════════════════════════════ */
/* insights hero（A 风） */
body.page-insights .hero { padding-block: clamp(96px,12vw,160px) clamp(72px,8vw,96px); }
.hero-eyebrow {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .18em; color: var(--text-faint);
  margin-bottom: 36px;
}
.hero-eyebrow .rule { flex: 0 0 56px; height: 1px; background: var(--text-main); }
.hero-eyebrow .ink { color: var(--text-main); }
.hero-eyebrow .sep { color: var(--hairline-strong); }
.hero-title {
  font-family: var(--serif); font-weight: 400; font-style: italic;
  font-size: clamp(48px,7vw,76px); line-height: 1.04;
  letter-spacing: -0.025em; margin: 0 0 28px; color: var(--text-main);
  text-wrap: balance; max-width: 18ch;
}
.hero-title .zh { font-family: var(--serif); font-style: normal; font-weight: 500; letter-spacing: -0.01em; }
body.page-insights .hero-sub {
  font-size: clamp(17px,1.4vw,20px); color: var(--text-mute);
  line-height: 1.6; max-width: 52ch; margin: 0 0 40px; font-weight: 400;
}
body.page-insights .hero-sub em {
  font-family: var(--serif); font-style: italic; color: var(--text-main); font-weight: 400;
}
/* insights 分类 chip（圆角 padding 7/14 版本） */
body.page-insights .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
body.page-insights .chip {
  font-family: var(--mono); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text-mute); font-weight: 500;
  padding: 7px 14px; border: 1px solid var(--hairline-strong);
  border-radius: 980px; background: transparent; cursor: pointer;
  transition: color .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease);
}
body.page-insights .chip:hover { color: var(--accent); border-color: var(--amber-line); }
body.page-insights .chip.is-active { color: var(--text-main); border-color: var(--text-main); background: #fff; }

/* insights 文章列表（.row 6 列网格覆盖 · article-row） */
.articles { padding-block: clamp(48px,6vw,72px) clamp(72px,9vw,112px); }
body.page-insights .row {
  grid-template-columns: 64px minmax(0,1fr) 220px 110px 100px 28px;
  padding-block: clamp(26px,3.2vw,36px);
}
body.page-insights .row .t {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(22px,2.3vw,28px); line-height: 1.22;
}
body.page-insights .row:hover .t { font-style: italic; font-weight: 400; }
body.page-insights .row .cat, body.page-insights .row .len, body.page-insights .row .yr {
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .16em; color: var(--text-mute);
  font-variant-numeric: tabular-nums; align-self: start; padding-top: .9em;
}
body.page-insights .row .cat { color: var(--text-faint); }
.row.row--featured .n { color: var(--accent); }
.row.row--featured .t { font-style: italic; font-weight: 400; }
.list-foot {
  margin-top: clamp(36px,5vw,56px); display: flex; align-items: baseline;
  justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.list-count {
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .18em; color: var(--text-faint);
}
.list-count b { color: var(--text-main); font-weight: 500; }
.legend {
  font-family: var(--mono); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text-faint);
}
.legend em {
  font-family: var(--serif); font-style: italic; color: var(--text-main);
  text-transform: none; letter-spacing: -0.005em; font-size: 13px;
}

/* insights 订阅 CTA 段 */
.subscribe {
  padding-block: clamp(72px,9vw,112px); border-top: 1px solid var(--hairline-light);
  background: #f0eee6; position: relative; isolation: isolate;
}
.subscribe::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(800px 400px at 90% 110%, rgba(200,161,74,0.10), transparent 60%),
    radial-gradient(600px 400px at -10% -10%, rgba(10,37,64,0.04), transparent 60%);
}
.subscribe > * { position: relative; z-index: 1; }
.subscribe-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px; align-items: end; }
.sub-eyebrow {
  font-family: var(--mono); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--accent); font-weight: 500; margin-bottom: 18px;
}
.sub-title {
  font-family: var(--serif); font-weight: 400; font-style: italic;
  font-size: clamp(34px,4vw,48px); line-height: 1.12;
  letter-spacing: -0.02em; margin: 0 0 16px; color: var(--text-main); text-wrap: balance;
}
.sub-title .zh { font-style: normal; font-weight: 500; letter-spacing: -0.01em; }
.sub-desc { font-size: 17px; color: var(--text-mute); line-height: 1.6; max-width: 50ch; margin: 0; }
.sub-form {
  display: flex; gap: 0; align-items: stretch;
  border: 1px solid var(--text-main); border-radius: 980px;
  background: #fff; padding: 6px 6px 6px 22px; max-width: 480px;
}
.sub-form input {
  flex: 1; border: 0; background: transparent; outline: none;
  font-family: var(--sans); font-size: 15px; color: var(--text-main);
  padding: 10px 6px; min-width: 0;
}
.sub-form input::placeholder { color: var(--text-faint); }
.sub-form button {
  border: 0; background: var(--text-main); color: #faf9f5;
  font-family: var(--sans); font-size: 14px; font-weight: 500; letter-spacing: .02em;
  padding: 0 24px; border-radius: 980px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  transition: background .35s var(--ease);
}
.sub-form button:hover { background: var(--accent); color: #fff; }
.sub-meta {
  margin-top: 14px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--text-faint);
  display: flex; gap: 18px; flex-wrap: wrap;
}
.sub-meta b { color: var(--text-main); font-weight: 500; }


/* ════════════════════════════════════════════════════════════════════
   18 · 页面专属 · FAQ（FAQ 索引页）
   sticky 分类 chip + 18 题 accordion（details.q 模式）
   ════════════════════════════════════════════════════════════════════ */
.faq-hero {
  padding-block: clamp(96px,12vw,140px) clamp(56px,7vw,88px);
  border-bottom: 1px solid var(--hairline-light);
}
.faq-hero .ey {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .18em; color: var(--text-faint);
  margin-bottom: 32px;
}
.faq-hero .ey .rule { flex: 0 0 56px; height: 1px; background: var(--text-main); }
.faq-hero .ey .ink { color: var(--text-main); }
.faq-hero .ey .sep { color: var(--hairline-strong); }
.faq-hero h1 {
  font-family: var(--serif); font-weight: 400; font-style: italic;
  font-size: clamp(48px,7vw,80px); line-height: 1.04;
  letter-spacing: -0.025em; margin: 0 0 28px; text-wrap: balance; max-width: 18ch;
}
.faq-hero h1 .zh {
  font-family: var(--serif); font-style: normal; font-weight: 500;
  letter-spacing: -0.01em; color: var(--text-main);
  display: block; margin-bottom: .06em;
}
.faq-hero h1 .en { color: var(--text-mute); font-size: .6em; padding-left: 0; }
.faq-hero p.lede {
  font-family: var(--sans); font-size: clamp(17px,1.4vw,19px);
  color: var(--text-mute); line-height: 1.6; max-width: 60ch;
  margin: 0 0 20px; font-weight: 300;
}
.faq-hero p.lede em { font-family: var(--serif); font-style: italic; color: var(--text-main); font-weight: 400; }
.faq-hero .meta-line {
  display: flex; gap: 0; flex-wrap: wrap; align-items: center;
  color: var(--text-faint); font-family: var(--mono); font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase; margin-top: 36px;
}
.faq-hero .meta-line span { display: inline-flex; align-items: center; padding: 4px 0; }
.faq-hero .meta-line .sep { width: 1px; height: 11px; background: var(--hairline-strong); margin-inline: 18px; }

/* sticky 分类索引 chip 条 */
.cat-bar {
  padding-block: clamp(28px,3.5vw,40px);
  border-bottom: 1px solid var(--hairline-light);
  position: sticky; top: 64px; z-index: 30;
  background: rgba(250,249,245,0.92);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
}
.cat-bar-inner { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cat-bar .cat-label {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--text-faint); font-weight: 500; margin-right: 6px;
}
/* faq 版 .chip（固定高 30px · 含 .ix 序号 · sans 字体） */
body.page-faq .chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 14px; border-radius: var(--cta-radius);
  border: 1px solid var(--hairline-strong); background: transparent;
  color: var(--text-main);
  font-family: var(--sans); font-size: 13px; font-weight: 400; letter-spacing: .01em;
  transition: all .3s var(--ease); cursor: pointer;
}
body.page-faq .chip .ix {
  font-family: var(--mono); font-size: 10px; color: var(--text-faint);
  letter-spacing: .1em; font-variant-numeric: tabular-nums;
}
body.page-faq .chip:hover { border-color: var(--accent); background: var(--amber-soft); color: var(--text-main); }
body.page-faq .chip:hover .ix { color: var(--accent); }

/* faq.html 整段容器（.faq-list 在此页是 section 容器，不是 ul） */
body.page-faq .faq-list { padding-block: clamp(56px,8vw,96px) clamp(72px,10vw,120px); }
.cat-section { margin-bottom: clamp(48px,6vw,80px); }
.cat-section:last-of-type { margin-bottom: 0; }
.cat-head {
  display: grid; grid-template-columns: repeat(12,1fr); gap: 32px;
  margin-bottom: clamp(20px,2.6vw,32px);
  padding-top: clamp(12px,1.4vw,18px);
  border-top: 1px solid var(--hairline-strong);
}
.cat-head .ey {
  grid-column: 1 / span 12;
  display: flex; align-items: center; gap: 14px;
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .18em; color: var(--text-faint);
}
.cat-head .ey .ink { color: var(--text-main); }
.cat-head .ey .count {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  color: var(--accent); text-transform: none; letter-spacing: 0; font-size: 13px;
}
.cat-head h2 {
  grid-column: 1 / span 10; margin: 14px 0 0;
  font-family: var(--serif); font-weight: 400; font-style: italic;
  font-size: clamp(28px,3.4vw,40px); line-height: 1.12;
  letter-spacing: -0.015em; color: var(--text-main);
}
.cat-head h2 .zh {
  font-family: var(--serif); font-style: normal; font-weight: 500;
  letter-spacing: -0.01em; color: var(--text-main);
}
.cat-head h2 .en { font-style: italic; color: var(--text-mute); font-size: .5em; padding-left: .4em; }

/* details.q accordion */
details.q {
  border-bottom: 1px solid var(--hairline-light);
  padding: 0; position: relative;
  transition: padding-left .35s var(--ease-edit);
}
details.q::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px;
  height: 1px; background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform .5s var(--ease-edit);
}
details.q[open]::before, details.q:hover::before { transform: scaleX(1); }
details.q:hover { padding-left: 14px; }
details.q summary {
  display: grid; grid-template-columns: 64px minmax(0,1fr) 80px 28px;
  align-items: baseline; gap: 28px;
  padding-block: clamp(22px,2.8vw,32px); cursor: pointer; list-style: none;
  transition: padding-left .35s var(--ease-edit);
}
details.q summary::-webkit-details-marker { display: none; }
details.q summary::marker { display: none; }
details.q .n {
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .18em; color: var(--text-faint);
  align-self: start; padding-top: .6em; font-variant-numeric: tabular-nums;
}
details.q .t {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(20px,2vw,24px); line-height: 1.28;
  letter-spacing: -0.015em; color: var(--text-main); text-wrap: balance;
  transition: font-style .25s ease, color .25s ease;
}
details.q .t .zh { font-family: var(--serif); font-weight: 500; letter-spacing: -0.01em; }
details.q .t .en {
  font-style: italic; color: var(--text-mute);
  font-size: .64em; padding-left: .42em; display: inline-block;
}
details.q[open] .t, details.q:hover .t { font-style: italic; }
details.q[open] .t .zh, details.q:hover .t .zh {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px; background-repeat: no-repeat; background-position: 0 100%;
}
details.q .tag {
  font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .16em; color: var(--text-mute);
  align-self: start; padding-top: .85em;
}
details.q .ar {
  font-family: var(--serif); font-size: 22px; color: var(--text-faint);
  align-self: start; padding-top: .4em;
  transition: transform .35s var(--ease-edit), color .25s ease;
  transform: rotate(0deg); display: inline-block;
}
details.q[open] .ar { transform: rotate(90deg); color: var(--accent); }
details.q:hover .ar { color: var(--accent); }
details.q .answer {
  display: grid; grid-template-columns: 64px minmax(0,1fr) 80px 28px;
  gap: 28px; padding-block: 0 clamp(28px,3.6vw,40px);
  animation: answerIn .45s var(--ease) both;
}
@keyframes answerIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
details.q .answer .answer-spacer { grid-column: 1; }
details.q .answer .answer-body {
  grid-column: 2;
  font-family: var(--serif); font-size: clamp(16px,1.35vw,18px);
  line-height: 1.7; color: var(--text-main); max-width: 60ch; font-weight: 400;
}
details.q .answer .answer-body strong { font-family: var(--serif); font-weight: 500; color: var(--text-main); }
details.q .answer .answer-body em { font-style: italic; color: var(--accent); font-weight: 400; }
details.q .answer .answer-body .price {
  font-family: var(--sans); font-weight: 500;
  font-variant-numeric: tabular-nums; color: var(--text-main);
}

/* faq 索引底部 CTA */
.index-foot {
  padding-block: clamp(40px,5vw,56px) clamp(80px,10vw,120px);
  border-top: 1px solid var(--hairline-light); background: #ffffff;
}
.index-foot-inner { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: center; }
.index-foot h3 {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(28px,3.4vw,40px); line-height: 1.15;
  letter-spacing: -0.015em; margin: 0 0 14px; text-wrap: balance;
}
.index-foot h3 .zh { font-family: var(--serif); font-style: normal; font-weight: 500; letter-spacing: -0.01em; }
.index-foot p { color: var(--text-mute); font-size: 16px; line-height: 1.6; margin: 0; max-width: 46ch; }
.index-foot .cta-wrap { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; justify-self: end; }

/* faq anchor offset */
.anchor { position: relative; top: -120px; visibility: hidden; display: block; height: 0; }


/* ════════════════════════════════════════════════════════════════════
   19 · 页面专属 · ABOUT（关于页）
   .meta-table 公司基本盘 + .narrative 叙事 + scope 表 + pull-quote
   ════════════════════════════════════════════════════════════════════ */
.about-hero {
  padding-block: clamp(96px,12vw,140px) clamp(56px,7vw,80px);
  border-bottom: 1px solid var(--hairline-light);
}
.about-hero .ey {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .18em; color: var(--text-faint);
  margin-bottom: 32px; flex-wrap: wrap;
}
.about-hero .ey .rule { flex: 0 0 56px; height: 1px; background: var(--text-main); }
.about-hero .ey .ink { color: var(--text-main); }
.about-hero .ey .sep { color: var(--hairline-strong); }
.about-hero h1 {
  font-family: var(--serif); font-weight: 400; font-style: italic;
  font-size: clamp(48px,7vw,80px); line-height: 1.04;
  letter-spacing: -0.025em; margin: 0 0 28px; text-wrap: balance; max-width: 14ch;
}
.about-hero h1 .zh {
  font-family: var(--serif); font-style: normal; font-weight: 500;
  letter-spacing: -0.01em; color: var(--text-main); display: block;
}
.about-hero h1 .seed {
  font-family: var(--serif); font-style: italic; font-weight: 500;
  color: var(--accent); padding-inline: .04em;
}
.about-hero p.lede {
  font-family: var(--sans); font-size: clamp(18px,1.55vw,21px);
  color: var(--text-mute); line-height: 1.55; max-width: 60ch;
  margin: 0; font-weight: 300;
}
.about-hero p.lede em { font-family: var(--serif); font-style: italic; color: var(--text-main); font-weight: 400; }

/* .meta-table · 公司基本盘
   ⚠️ 冲突 9：.meta-table 在 about.html（grid 200px/1fr 含 .key/.val）与
   case 详情页（border 容器 + .meta-row 子行）结构不同。按页面类作用域。 */
.meta-table-section {
  padding-block: clamp(56px,7vw,88px);
  border-bottom: 1px solid var(--hairline-light);
}
.meta-table-head {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .18em; color: var(--text-faint);
  margin-bottom: 36px;
}
.meta-table-head .rule { flex: 0 0 56px; height: 1px; background: var(--text-main); }
.meta-table-head .ink { color: var(--text-main); }
.meta-table-head .sep { color: var(--hairline-strong); }
body.page-about .meta-table {
  display: grid; grid-template-columns: 200px 1fr;
  border-top: 1px solid var(--hairline-strong);
}
body.page-about .meta-table .key,
body.page-about .meta-table .val {
  padding: clamp(18px,2.2vw,24px) 0;
  border-bottom: 1px solid var(--hairline-light);
}
body.page-about .meta-table .key {
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .18em; color: var(--text-faint);
  padding-right: 24px; align-self: start;
  padding-top: calc(clamp(18px,2.2vw,24px) + 4px);
}
body.page-about .meta-table .val {
  font-family: var(--serif); font-size: clamp(17px,1.5vw,20px);
  font-weight: 400; color: var(--text-main); line-height: 1.45;
}
body.page-about .meta-table .val em {
  font-style: italic; color: var(--accent); font-family: var(--serif); font-weight: 400;
}
body.page-about .meta-table .val .num {
  font-family: var(--sans); font-weight: 500; font-variant-numeric: tabular-nums;
}
body.page-about .meta-table .val .sub {
  display: block; font-family: var(--sans); font-size: 13px;
  color: var(--text-mute); font-weight: 300; margin-top: 6px; letter-spacing: 0;
}

/* about .narrative 段落叙事
   ⚠️ 冲突 10：.narrative 在 about.html 与 case 详情页 padding/border 不同。
   .narrative-piece（about）vs .chap（case）子结构也不同。按页面类作用域。 */
body.page-about .narrative { padding-block: clamp(72px,9vw,120px); }
.narrative-head {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .18em; color: var(--text-faint);
  margin-bottom: clamp(40px,5vw,56px); justify-content: center;
}
.narrative-head .rule { width: 56px; height: 1px; background: var(--text-main); }
.narrative-head .ink { color: var(--text-main); }
.narrative-head .sep { color: var(--hairline-strong); }
.narrative-piece { margin-bottom: clamp(40px,5vw,64px); }
.narrative-piece:last-of-type { margin-bottom: 0; }
.narrative-piece h3 {
  font-family: var(--serif); font-weight: 400; font-style: italic;
  font-size: clamp(28px,3.2vw,36px); line-height: 1.15;
  letter-spacing: -0.018em; margin: 0 0 22px; text-wrap: balance;
}
.narrative-piece h3 .zh { font-family: var(--serif); font-style: normal; font-weight: 500; letter-spacing: -0.01em; }
.narrative-piece h3 .n {
  font-family: var(--mono); font-style: normal; font-weight: 500;
  font-size: .42em; color: var(--text-faint); letter-spacing: .16em;
  text-transform: uppercase; display: block; margin-bottom: 14px;
}
.narrative-piece p {
  font-family: var(--serif); font-size: clamp(17px,1.45vw,19px);
  line-height: 1.75; color: var(--text-main); margin: 0 0 1em; font-weight: 400;
}
.narrative-piece p:last-child { margin-bottom: 0; }
.narrative-piece p em { font-style: italic; color: var(--accent); font-weight: 400; }
.narrative-piece p strong { font-family: var(--serif); font-weight: 500; color: var(--text-main); }
.narrative-piece + .narrative-piece {
  border-top: 1px solid var(--hairline-light);
  padding-top: clamp(40px,5vw,56px);
}

/* about 服务半径 scope 简表 */
.scope-section {
  padding-block: clamp(72px,9vw,120px); background: #ffffff;
  border-top: 1px solid var(--hairline-light);
  border-bottom: 1px solid var(--hairline-light);
}
.scope-head { display: grid; grid-template-columns: repeat(12,1fr); gap: 32px; margin-bottom: clamp(40px,5vw,56px); }
.scope-head .ey {
  grid-column: 1 / span 12;
  display: flex; align-items: center; gap: 14px;
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .18em; color: var(--text-faint);
}
.scope-head .ey .rule { flex: 0 0 56px; height: 1px; background: var(--text-main); }
.scope-head .ey .ink { color: var(--text-main); }
.scope-head .ey .sep { color: var(--hairline-strong); }
.scope-head h2 {
  grid-column: 1 / span 10; margin: 18px 0 0;
  font-family: var(--serif); font-weight: 400; font-style: italic;
  font-size: clamp(28px,3.4vw,40px); line-height: 1.15;
  letter-spacing: -0.015em; text-wrap: balance;
}
.scope-head h2 .zh { font-family: var(--serif); font-style: normal; font-weight: 500; letter-spacing: -0.01em; }
.scope-table { display: grid; grid-template-columns: 160px 1fr; border-top: 1px solid var(--hairline-strong); }
.scope-table .key, .scope-table .val {
  padding: clamp(20px,2.4vw,28px) 0;
  border-bottom: 1px solid var(--hairline-light);
}
.scope-table .key {
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .18em; color: var(--text-faint);
  padding-right: 24px; align-self: start;
  padding-top: calc(clamp(20px,2.4vw,28px) + 4px);
}
.scope-table .val { font-family: var(--sans); font-size: 16px; color: var(--text-main); line-height: 1.6; }
.scope-table .val em { font-family: var(--serif); font-style: italic; color: var(--accent); font-weight: 500; }
.scope-table .val .num { font-family: var(--sans); font-weight: 500; font-variant-numeric: tabular-nums; }
.scope-table .val .focus { color: var(--text-mute); font-size: 14px; display: block; margin-top: 6px; }

/* about 团队哲学 pull-quote（.quote-section） */
.quote-section { padding-block: clamp(96px,12vw,140px); border-bottom: 1px solid var(--hairline-light); }
.quote-section blockquote { margin: 0; text-align: left; max-width: 920px; }
.quote-section .mark {
  display: block; font-family: var(--serif); font-style: italic; font-weight: 400;
  color: var(--accent); font-size: clamp(72px,9vw,120px);
  line-height: .9; margin-bottom: 8px; opacity: .85;
}
.quote-section .body {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(28px,3.8vw,48px); line-height: 1.25;
  letter-spacing: -0.018em; color: var(--text-main);
  margin: 0 0 28px; text-wrap: balance;
}
.quote-section .body .em { color: var(--accent); font-style: italic; }
.quote-section .body .zh {
  font-family: var(--serif); font-style: normal; font-weight: 500;
  color: var(--text-main); letter-spacing: -0.01em;
}
.quote-section .attr {
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .18em; color: var(--text-faint);
  display: flex; align-items: center; gap: 14px;
}
.quote-section .attr .rule { width: 36px; height: 1px; background: var(--text-main); }
.quote-section .attr .ink { color: var(--text-main); }

/* about 联系 CTA 段 */
.about-cta { padding-block: clamp(80px,10vw,120px); background: #ffffff; }
.about-cta-inner { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: center; }
.about-cta h3 {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(28px,3.6vw,44px); line-height: 1.15;
  letter-spacing: -0.015em; margin: 0 0 16px; text-wrap: balance;
}
.about-cta h3 .zh { font-family: var(--serif); font-style: normal; font-weight: 500; letter-spacing: -0.01em; }
.about-cta h3 .seed { font-family: var(--serif); font-style: italic; font-weight: 500; color: var(--accent); }
.about-cta p { color: var(--text-mute); font-size: 17px; line-height: 1.6; margin: 0; max-width: 46ch; }
.about-cta .cta-wrap { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; justify-self: end; }


/* ════════════════════════════════════════════════════════════════════
   20 · 页面专属 · CASE 详情页（案例详情）
   .meta-row 简表 + .chap 叙事 + .outcomes 数据表 + .map-frame SVG + pull
   ════════════════════════════════════════════════════════════════════ */
/* case 详情页 hero */
body.page-case .hero { padding-block: clamp(72px,9vw,108px) clamp(56px,7vw,88px); }
body.page-case .ey {
  flex-wrap: wrap; margin-bottom: 32px;
}
.ey .back {
  color: var(--text-main);
  border-bottom: 1px solid var(--hairline-strong); padding-bottom: 2px;
  transition: color .25s ease, border-color .25s ease;
}
.ey .back:hover { color: var(--accent); border-color: var(--accent); }
body.page-case .hero h1 {
  font-family: var(--serif); font-weight: 400; font-style: italic;
  font-size: clamp(40px,5.6vw,56px); line-height: 1.08;
  letter-spacing: -0.02em; color: var(--text-main);
  margin: 0 0 8px; text-wrap: balance; max-width: 22ch;
}
body.page-case .hero h1 .zh {
  font-family: var(--serif); font-style: normal; font-weight: 500;
  letter-spacing: -0.01em; color: var(--text-main);
}
body.page-case .hero h1 .lift {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  color: var(--accent); padding-inline: 0.04em;
}
.hero-lead {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: 20px; color: var(--text-mute);
  margin: 24px 0 0; max-width: 60ch; line-height: 1.55;
}
/* case 详情页 .meta-table（border 容器版 · 含 .meta-row 子行） */
body.page-case .meta-table {
  margin-top: clamp(48px,6vw,72px);
  border-top: 1px solid var(--hairline-strong);
  border-bottom: 1px solid var(--hairline-light);
}
.meta-row {
  display: grid; grid-template-columns: 160px 1fr; gap: 24px;
  padding: 18px 0; border-bottom: 1px solid var(--hairline-light);
  align-items: baseline;
}
.meta-row:last-child { border-bottom: none; }
.meta-row .k {
  font-family: var(--mono); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--text-faint); font-weight: 500;
}
.meta-row .v {
  font-family: var(--sans); font-size: 15px; color: var(--text-main);
  font-weight: 400; line-height: 1.55; font-feature-settings: 'tnum' 1;
}
.meta-row .v em { font-family: var(--serif); font-style: italic; color: var(--text-main); font-weight: 500; }

/* case 详情页 .narrative + .chap 叙事 */
body.page-case .narrative {
  padding-block: clamp(80px,10vw,120px);
  border-top: 1px solid var(--hairline-light);
}
.chap { margin-bottom: clamp(56px,7vw,80px); }
.chap:last-child { margin-bottom: 0; }
.chap-ey {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .18em; color: var(--text-faint);
  margin-bottom: 22px;
}
.chap-ey .num-tag {
  font-family: var(--serif); font-style: italic; color: var(--accent);
  font-size: 14px; text-transform: none; letter-spacing: 0; font-weight: 400;
}
.chap-ey .rule { flex: 0 0 32px; height: 1px; background: var(--text-main); }
.chap h2 {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(28px,3.4vw,40px); line-height: 1.12;
  letter-spacing: -0.018em; color: var(--text-main);
  margin: 0 0 28px; text-wrap: balance;
}
.chap h2 .zh { font-style: normal; font-weight: 500; }
.chap .body {
  font-family: var(--serif); font-size: 19px; line-height: 1.72;
  font-weight: 400; color: var(--text-main);
}
.chap .body p { margin: 0 0 18px; }
.chap .body p:last-child { margin-bottom: 0; }
.chap .body em {
  font-style: italic; color: var(--text-main);
  background-image: linear-gradient(var(--amber-soft), var(--amber-soft));
  background-size: 100% 38%; background-repeat: no-repeat;
  background-position: 0 88%; padding: 0 .04em;
}
.chap .body b { font-weight: 500; color: var(--text-main); }
.narr-list {
  list-style: none; padding: 0; margin: 18px 0 0;
  display: flex; flex-direction: column; gap: 14px;
  font-family: var(--sans); font-size: 16px; line-height: 1.6; color: var(--text-main);
}
.narr-list li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: baseline; }
.narr-list li::before {
  content: ""; width: 14px; height: 1px; background: var(--accent);
  align-self: center; margin-top: 2px;
}
.narr-list li b {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text-faint); font-weight: 500; margin-right: 10px;
}

/* case 详情页 .outcomes 数据成果表 */
.outcomes {
  padding-block: clamp(80px,10vw,120px); background: #f5f5f7;
  border-top: 1px solid var(--hairline-light);
  border-bottom: 1px solid var(--hairline-light);
}
.outcomes-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 24px; flex-wrap: wrap; margin-bottom: clamp(36px,5vw,48px);
}
.outcomes-head h2 {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(28px,3.4vw,40px); line-height: 1.12;
  letter-spacing: -0.018em; color: var(--text-main); margin: 0; text-wrap: balance;
}
.outcomes-head h2 .zh { font-style: normal; font-weight: 500; }
.outcomes-head .ystamp {
  font-family: var(--mono); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--text-faint); font-weight: 500;
}
.outcomes-table {
  background: #fff; border: 1px solid var(--hairline-light);
  border-radius: 18px; box-shadow: var(--shadow-amber-1); overflow: hidden;
}
.o-row {
  display: grid; grid-template-columns: 1fr 200px 140px; gap: 24px;
  align-items: center; padding: 24px 32px;
  border-bottom: 1px solid var(--hairline-light);
  font-feature-settings: 'tnum' 1;
}
.o-row:last-child { border-bottom: none; }
.o-row .k { font-family: var(--sans); font-size: 15px; font-weight: 400; color: var(--text-main); line-height: 1.4; }
.o-row .baseline {
  font-family: var(--mono); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text-faint); font-weight: 500;
}
.o-row .v {
  font-family: var(--serif); font-style: italic; font-weight: 500;
  font-size: 32px; letter-spacing: -0.015em; color: var(--accent);
  text-align: right; line-height: 1;
}
.o-row .v .sign { font-size: .7em; padding-right: .04em; }
.o-foot {
  padding: 18px 32px; background: #faf9f5;
  border-top: 1px solid var(--hairline-light);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text-faint); font-weight: 500;
  display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap;
}
.o-foot em {
  font-family: var(--serif); font-style: italic; color: var(--text-main);
  text-transform: none; letter-spacing: -0.005em; font-size: 12px; font-weight: 500;
}

/* case 详情页 .visual + .map-frame SVG 流程图 */
.visual { padding-block: clamp(72px,9vw,108px); }
.visual-head { margin-bottom: clamp(32px,4vw,48px); max-width: 60ch; }
.visual-head .chap-ey { margin-bottom: 18px; }
.visual-head h2 {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(24px,3vw,32px); line-height: 1.18;
  letter-spacing: -0.018em; color: var(--text-main); margin: 0;
}
.visual-head h2 .zh { font-style: normal; font-weight: 500; }
.map-frame {
  background: #fff; border: 1px solid var(--hairline-light);
  border-radius: 18px;
  box-shadow: var(--shadow-amber-1), 0 1px 0 rgba(255,255,255,.9) inset;
  padding: clamp(24px,3vw,40px); position: relative;
}
.map-frame svg { width: 100%; height: auto; display: block; }
.map-frame .map-caption { margin-top: 16px; }

/* case 详情页 pull-quote（.quote + .pull · drop cap） */
.quote {
  padding-block: clamp(72px,9vw,108px);
  border-top: 1px solid var(--hairline-light); background: #faf9f5;
}
.pull { max-width: 780px; margin: 0 auto; text-align: left; position: relative; }
.pull blockquote {
  margin: 0; padding: 0;
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(24px,2.8vw,32px); line-height: 1.42;
  letter-spacing: -0.01em; color: var(--text-main); text-wrap: balance;
}
.pull blockquote::first-letter {
  font-family: var(--serif); font-style: normal; font-weight: 500;
  color: var(--accent); font-size: 3.2em; line-height: .88;
  float: left; padding: .06em .12em 0 0; margin-left: -.05em;
}
.pull cite {
  display: block; margin-top: 28px;
  font-family: var(--mono); font-size: 11px; font-style: normal;
  letter-spacing: .18em; text-transform: uppercase; color: var(--text-faint); font-weight: 500;
}
.pull cite em {
  font-family: var(--serif); font-style: italic; color: var(--text-main);
  text-transform: none; letter-spacing: -0.005em; font-size: 13px; font-weight: 500; padding: 0 .3em;
}

/* case 详情页 相关案例（.related + .row 5 列网格覆盖）
   ⚠️ 冲突 11：.related 在 case 详情页（白底 padding 段）与 insight 详情页
   （#f0eee6 底 + radial 渐变）样式不同。按页面类作用域。 */
body.page-case .related {
  padding-block: clamp(72px,9vw,108px);
  border-top: 1px solid var(--hairline-light);
}
.related-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 24px; flex-wrap: wrap; margin-bottom: clamp(28px,4vw,40px);
}
.related-head h2 {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(24px,3vw,32px); line-height: 1.18;
  letter-spacing: -0.018em; color: var(--text-main); margin: 0;
}
.related-head h2 .zh { font-style: normal; font-weight: 500; }
.related-head .all {
  font-family: var(--serif); font-style: italic; font-size: 16px;
  color: var(--text-main);
  border-bottom: 1px solid var(--text-main); padding-bottom: 2px;
  transition: color .25s ease, border-color .25s ease;
}
.related-head .all:hover { color: var(--accent); border-color: var(--accent); }
body.page-case .row {
  grid-template-columns: 64px minmax(0,1fr) 180px 90px 28px;
  padding-block: clamp(24px,3vw,32px);
}
body.page-case .row .t { font-size: clamp(20px,2.2vw,24px); }
body.page-case .row .t .en { font-size: .62em; }
body.page-case .row .ind, body.page-case .row .yr {
  letter-spacing: .16em;
}
body.page-case .row .ar { padding-top: .5em; }

/* case 详情页 询盘 CTA（.cta-section 复用 + .cta-meta） */
body.page-case .cta-grid { grid-template-columns: 1.4fr 1fr; }
body.page-case .cta-section h2 { font-size: clamp(28px,3.4vw,40px); }
.cta-meta {
  display: flex; flex-direction: column; gap: 10px;
  padding: 24px; background: #fff;
  border: 1px solid var(--hairline-light); border-radius: 14px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-faint);
}
.cta-meta b { color: var(--text-main); font-weight: 500; }


/* ════════════════════════════════════════════════════════════════════
   21 · 页面专属 · INSIGHT 详情页（洞察长文）
   阅读进度条 + .prose 长文 + drop cap + .pull-quote + .data-table + figure
   ════════════════════════════════════════════════════════════════════ */
/* 阅读进度条 */
.progress {
  position: fixed; left: 0; top: 64px; height: 2px; width: 0;
  background: var(--accent); z-index: 60;
  transition: width .15s linear;
}
/* article header */
.article-header { padding-block: clamp(72px,10vw,120px) clamp(48px,6vw,72px); }
.article-eyebrow {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .18em; color: var(--text-faint);
  margin-bottom: 28px;
}
.article-eyebrow .rule { flex: 0 0 56px; height: 1px; background: var(--text-main); }
.article-eyebrow .ink { color: var(--text-main); }
.article-eyebrow .sep { color: var(--hairline-strong); }
.article-eyebrow a {
  color: var(--text-mute); transition: color .25s var(--ease);
  display: inline-flex; align-items: center; gap: 6px;
}
.article-eyebrow a:hover { color: var(--accent); }
.article-section {
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .22em; color: var(--accent);
  margin-bottom: 20px;
}
.article-title {
  font-family: var(--serif); font-weight: 500; font-style: italic;
  font-size: clamp(40px,5.5vw,68px); line-height: 1.05;
  letter-spacing: -0.025em; margin: 0 0 28px; color: var(--text-main);
  max-width: 18ch; text-wrap: balance;
}
.article-title .zh { font-style: normal; font-weight: 500; letter-spacing: -0.01em; }
.article-deck {
  font-family: var(--sans); font-weight: 300;
  font-size: clamp(19px,1.7vw,22px); line-height: 1.5; color: var(--text-mute);
  max-width: 48ch; margin: 0 0 44px;
}
.article-deck em { font-family: var(--serif); font-style: italic; color: var(--text-main); font-weight: 400; }
.article-meta {
  display: flex; align-items: center; gap: 0; flex-wrap: wrap;
  padding-top: 24px; border-top: 1px solid var(--hairline-strong);
  font-family: var(--mono); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text-faint);
}
.article-meta span { display: inline-flex; align-items: center; padding: 4px 0; }
.article-meta b { color: var(--text-main); font-weight: 500; margin-right: 8px; }
.article-meta .sep { width: 1px; height: 11px; background: var(--hairline-strong); margin-inline: 18px; }

/* article body · .prose 长文 */
.article-body { padding-block: clamp(24px,4vw,48px) clamp(72px,9vw,112px); }
.prose {
  max-width: var(--measure); margin: 0 auto;
  font-family: var(--serif); font-weight: 400;
  font-size: 19px; line-height: 1.72; color: var(--text-main);
  letter-spacing: 0.005em; font-feature-settings: 'liga' 1, 'kern' 1;
}
.prose p { margin: 0 0 1.4em; text-wrap: pretty; }
.prose p strong { font-weight: 600; color: var(--text-main); }
.prose p em { font-style: italic; color: var(--text-main); }
/* drop cap · 首段首字 */
.prose .lede { margin-top: 0; }
.prose .lede::first-letter {
  font-family: var(--serif); font-style: italic; font-weight: 500;
  font-size: 5.2em; line-height: .88;
  float: left; margin: 0.05em 0.12em 0 -0.04em; color: var(--accent); padding: 0;
}
/* § 章节标题 */
.prose h2 {
  font-family: var(--serif); font-weight: 500; font-style: italic;
  font-size: clamp(28px,3.2vw,36px); line-height: 1.18;
  letter-spacing: -0.015em; margin: 2.4em 0 0.8em;
  color: var(--text-main); text-wrap: balance; position: relative;
}
.prose h2 .num {
  display: block;
  font-family: var(--mono); font-size: 11px; font-style: normal; font-weight: 500;
  text-transform: uppercase; letter-spacing: .22em; color: var(--accent);
  margin-bottom: 14px;
}
/* .pull-quote · 拉边引言 */
.pull-quote {
  margin: 2.6em -8% 2.6em; padding: .4em 0 .4em;
  border-top: 1px solid var(--hairline-strong);
  border-bottom: 1px solid var(--hairline-strong);
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(24px,2.6vw,32px); line-height: 1.35;
  letter-spacing: -0.01em; color: var(--text-main); text-wrap: balance;
}
.pull-quote::before { content: ""; display: block; height: 0; }
.pull-quote p { margin: .6em 0; }
.pull-quote cite {
  display: block; margin-top: 1em;
  font-family: var(--mono); font-style: normal; font-weight: 500;
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--text-faint);
}
/* .data-table · tabular 数据点 */
.data-table {
  margin: 2.4em 0;
  border-top: 1px solid var(--text-main);
  border-bottom: 1px solid var(--hairline-strong);
  width: 100%;
}
/* ⚠️ 冲突 12：.data-table .row 与全局 .row 同名但语义完全不同
   （全局 .row 是案例列表行；这里是数据表行 3 列网格 · 无 hover）。
   作用域到 .data-table .row 即可隔离，但全局 .row 的 hover/cursor 仍会命中，
   故下面显式重置。 */
.data-table .row {
  display: grid; grid-template-columns: 1.4fr .9fr .9fr; gap: 24px;
  padding: 14px 0; border-bottom: 1px solid var(--hairline-light);
  align-items: baseline;
  padding-block: 14px;          /* 覆盖全局 .row 的 clamp padding */
  cursor: auto;                 /* 覆盖全局 .row cursor:pointer */
  position: static;
  transition: none;
}
.data-table .row::before { content: none; }     /* 关掉全局 .row 顶部高亮线 */
.data-table .row:hover { padding-left: 0; }      /* 关掉全局 .row hover 缩进 */
.data-table .row.head {
  border-bottom: 1px solid var(--hairline-strong);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--text-faint); font-weight: 500;
}
.data-table .row:last-child { border-bottom: 0; }
.data-table .label { font-family: var(--sans); font-size: 15px; color: var(--text-main); line-height: 1.5; }
.data-table .val {
  font-family: var(--mono); font-size: 14px; color: var(--text-main);
  font-variant-numeric: tabular-nums; font-weight: 500;
}
.data-table .val.muted { color: var(--text-mute); font-weight: 400; }
.data-table .val.gold { color: var(--accent); }
.data-caption {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--text-faint); margin-top: 10px;
}
/* SVG figure */
.figure { margin: 2.6em 0; }
.figure svg {
  width: 100%; max-width: 100%; height: auto; display: block;
  border: 1px solid var(--hairline-light); background: #fff;
  border-radius: 14px; box-shadow: var(--shadow-amber-1);
}
.figure figcaption {
  margin-top: 14px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--text-faint);
  display: flex; align-items: center; gap: 10px;
}
.figure figcaption .pin { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
/* 章节间装饰 ornament */
.ornament {
  text-align: center; margin: 2.6em 0;
  font-family: var(--serif); font-style: italic; color: var(--text-faint);
  font-size: 24px; letter-spacing: .6em; user-select: none;
}
/* article footer · tags + CTA */
.article-footer {
  max-width: var(--measure); margin: 0 auto;
  padding: 32px 0 0; border-top: 1px solid var(--hairline-strong);
}
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.tag {
  font-family: var(--mono); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--text-mute); font-weight: 500;
  padding: 6px 12px; border: 1px solid var(--hairline-strong); border-radius: 980px;
}
.article-cta {
  display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text-faint);
}
.article-cta a {
  color: var(--text-main); font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: 16px; letter-spacing: -0.005em; text-transform: none;
  border-bottom: 1px solid var(--text-main); padding-bottom: 2px;
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.article-cta a:hover { color: var(--accent); border-color: var(--accent); }

/* insight 详情页 相关阅读（.related #f0eee6 底 + 渐变 · .related-row 专用） */
body.page-insight .related {
  padding-block: clamp(56px,7vw,96px);
  border-top: 1px solid var(--hairline-light);
  background: #f0eee6; position: relative; isolation: isolate;
}
body.page-insight .related::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(700px 400px at 90% -10%, rgba(200,161,74,0.10), transparent 60%);
}
body.page-insight .related > * { position: relative; z-index: 1; }
body.page-insight .related-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 20px; margin-bottom: 36px; flex-wrap: wrap;
}
body.page-insight .related-head h3 {
  font-family: var(--serif); font-weight: 400; font-style: italic;
  font-size: clamp(28px,3.2vw,36px); line-height: 1.15;
  letter-spacing: -0.015em; margin: 0; color: var(--text-main);
}
body.page-insight .related-head .ey {
  font-family: var(--mono); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--text-faint); font-weight: 500;
}
.related-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hairline-strong); }
.related-row {
  display: grid; grid-template-columns: 64px minmax(0,1fr) 180px 100px 28px;
  align-items: baseline; gap: 24px;
  padding-block: 28px; border-bottom: 1px solid var(--hairline-light);
  position: relative; cursor: pointer;
  transition: padding-left .35s var(--ease-edit);
}
.related-row::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform .5s var(--ease-edit);
}
.related-row:hover::before { transform: scaleX(1); }
.related-row:hover { padding-left: 12px; }
.related-row .n, .related-row .cat, .related-row .yr {
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .16em; color: var(--text-mute);
  font-variant-numeric: tabular-nums; padding-top: .6em;
}
.related-row .n { color: var(--text-faint); }
.related-row .cat { color: var(--text-faint); }
.related-row .t {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(20px,2.1vw,24px); line-height: 1.22;
  letter-spacing: -0.015em; color: var(--text-main); text-wrap: balance;
  transition: font-style .25s ease;
}
.related-row:hover .t { font-style: italic; font-weight: 400; }
.related-row .ar {
  font-family: var(--serif); font-size: 20px; color: var(--text-faint); padding-top: .4em;
  transition: color .25s ease, transform .35s var(--ease-edit);
}
.related-row:hover .ar { color: var(--accent); transform: translateX(8px); }


/* ════════════════════════════════════════════════════════════════════
   22 · 响应式 MEDIA QUERY（合并 7 页 · 收尾）
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 960px) {
  /* ---- 共享 ---- */
  .nav-links a:not(.cta-pill) { display: none; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-meta { text-align: left; }
  .footer-nav { grid-template-columns: repeat(2,1fr); }

  /* ---- index ---- */
  body.page-index .hero { padding-block: 72px 88px; }
  body.page-index .hero-grid { grid-template-columns: 1fr; gap: 56px; }
  .hero-visual { margin: 0 auto; max-width: 440px; }
  .services, .work, .notes, .inquiry, .method, .faq { padding-block: 72px; }
  .tile { grid-template-columns: 1fr; padding: 44px 32px; min-height: auto; gap: 32px; }
  .tile-visual { margin: 0 auto; max-width: 340px; }
  .work-head h2, .work-head p, .notes-head h2, .faq-head h2, .faq-head p { grid-column: 1 / span 12; }
  body.page-index .row, body.page-index .row.row--note { grid-template-columns: 36px 1fr 22px; gap: 18px; }
  body.page-index .row .ind, body.page-index .row .yr, body.page-index .row .meta-time { display: none; }
  .method-row { grid-template-columns: 48px 1fr; gap: 16px; }
  .method-row .step-desc, .method-row .step-time { grid-column: 2; text-align: left; padding-top: 8px; }
  .faq-item summary, .faq-item .faq-a { grid-template-columns: 36px 1fr 22px; gap: 16px; }
  .inquiry-grid { grid-template-columns: 1fr; gap: 40px; }
  form.form { grid-template-columns: 1fr; padding: 24px; }
  .field.full { grid-column: 1; }
  .trust-chip { padding: 0 24px; }

  /* ---- cases ---- */
  body.page-cases .hero { padding-block: 64px 56px; }
  body.page-cases .hero h1 { grid-column: 1 / span 12; font-size: 42px; }
  body.page-cases .hero-sub { grid-column: 1 / span 12; }
  body.page-cases .row { grid-template-columns: 48px 1fr 22px; gap: 16px; }
  body.page-cases .row .ind, body.page-cases .row .dur, body.page-cases .row .yr { display: none; }
  .cta-grid { grid-template-columns: 1fr; gap: 40px; }

  /* ---- insights ---- */
  body.page-insights .hero { padding-block: 64px 48px; }
  body.page-insights .row { grid-template-columns: 42px 1fr 22px; gap: 18px; }
  body.page-insights .row .cat, body.page-insights .row .len, body.page-insights .row .yr { display: none; }
  .subscribe-grid { grid-template-columns: 1fr; gap: 32px; align-items: start; }

  /* ---- faq ---- */
  .faq-hero { padding-block: 72px 56px; }
  .faq-hero h1 { font-size: 44px; }
  .cat-bar { top: 64px; padding-block: 18px; }
  .cat-bar .cat-label { display: none; }
  details.q summary, details.q .answer { grid-template-columns: 44px 1fr 22px; gap: 14px; }
  details.q .tag { display: none; }
  details.q .answer .answer-spacer { display: none; }
  details.q .answer .answer-body { grid-column: 2; }
  .cat-head h2, .cat-head .ey { grid-column: 1 / span 12; }
  .index-foot-inner { grid-template-columns: 1fr; gap: 28px; }
  .index-foot .cta-wrap { justify-self: start; }

  /* ---- about ---- */
  .about-hero { padding-block: 72px 56px; }
  .about-hero h1 { font-size: 44px; }
  body.page-about .meta-table { grid-template-columns: 1fr; }
  body.page-about .meta-table .key { padding-bottom: 6px; border-bottom: none; padding-top: 18px; }
  body.page-about .meta-table .val { padding-top: 0; padding-bottom: 18px; }
  .scope-table { grid-template-columns: 1fr; }
  .scope-table .key { padding-bottom: 6px; border-bottom: none; padding-top: 18px; }
  .scope-table .val { padding-top: 0; padding-bottom: 18px; }
  .scope-head h2 { grid-column: 1 / span 12; }
  .about-cta-inner { grid-template-columns: 1fr; gap: 28px; }
  .about-cta .cta-wrap { justify-self: start; }

  /* ---- case 详情页 ---- */
  body.page-case .hero { padding-block: 56px 48px; }
  body.page-case .hero h1 { font-size: 36px; max-width: none; }
  .meta-row { grid-template-columns: 1fr; gap: 6px; padding: 14px 0; }
  .o-row { grid-template-columns: 1fr 90px; padding: 18px 22px; }
  .o-row .baseline { display: none; }
  .o-row .v { font-size: 26px; }
  .o-foot { padding: 14px 22px; }
  body.page-case .row { grid-template-columns: 48px 1fr 22px; gap: 16px; }
  body.page-case .row .ind, body.page-case .row .yr { display: none; }
  .chap .body { font-size: 17px; }
  .pull blockquote { font-size: 22px; }

  /* ---- insight 详情页 ---- */
  .pull-quote { margin-left: 0; margin-right: 0; }
  .related-row { grid-template-columns: 42px 1fr 22px; gap: 16px; }
  .related-row .cat, .related-row .yr { display: none; }
}

@media (max-width: 560px) {
  /* ---- 共享 ---- */
  .container, .narrow, .reading { padding-inline: 22px; }

  /* ---- index ---- */
  body.page-index .hero h1 { font-size: 42px; }
  .services-head h2, .method-head h2 { font-size: 32px; }
  .tile h3 { font-size: 28px; }
  .hero-sub, .tile p, .services-sub { font-size: 18px; }
  .hero-meta .sep { display: none; }
  .hero-meta { gap: 14px 18px; }

  /* ---- cases ---- */
  body.page-cases .hero h1 { font-size: 36px; }
  body.page-cases .row .t { font-size: 18px; }
  body.page-cases .chips { gap: 8px; }
  body.page-cases .chip { padding: 5px 11px; font-size: 10.5px; }

  /* ---- insights ---- */
  .hero-title { font-size: 42px; }
  .sub-form { flex-direction: column; border-radius: 18px; padding: 8px; }
  .sub-form input { padding: 14px 16px; }
  .sub-form button { padding: 14px 18px; border-radius: 14px; justify-content: center; }

  /* ---- faq ---- */
  .faq-hero h1 { font-size: 38px; }
  details.q .t { font-size: 18px; }
  details.q .answer .answer-body { font-size: 15.5px; }

  /* ---- about ---- */
  .about-hero h1 { font-size: 38px; }
  .narrative-piece p { font-size: 16px; }
  .quote-section .body { font-size: 26px; }

  /* ---- case 详情页 ---- */
  body.page-case .hero h1 { font-size: 30px; }
  .chap h2 { font-size: 24px; }
  .outcomes-head h2 { font-size: 24px; }

  /* ---- insight 详情页 ---- */
  .article-meta .sep { display: none; }
  .article-meta { gap: 14px 18px; }
  .prose { font-size: 18px; }
  .data-table .row { grid-template-columns: 1.4fr .8fr; gap: 14px; }
  .data-table .row > *:nth-child(3) { display: none; }
}

/* prefers-reduced-motion · 无障碍（colors_and_type 正本） */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ── 真 logo 替换导航占位圆点(2026-06-08) ── */
img.brand-mark { object-fit: contain; vertical-align: middle; }
img.brand-mark::before, img.brand-mark::after { display: none; content: none; }
