/* scale.mjs：寬螢幕等比放大（1512 基準） */
:root { --vkw: clamp(1px, calc((100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 1512), 1.6931px); --vk: clamp(1px, min(calc((100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 1512), calc(100vh / 700)), 1.6931px); }
/* 00-fonts.css */
/* 品牌字型（approved/fonts/brand，OFL）。Noto Sans TC 為 v24 子集（同仁文案＋介面白名單字），建置時產生。 */
@font-face { font-family: "Noto Sans TC"; src: url("fonts/noto-sans-tc.woff") format("woff"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/inter.woff") format("woff"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto Condensed"; src: url("fonts/roboto-condensed.woff") format("woff"); font-weight: 100 900; font-style: normal; font-display: swap; }

/* 01-tokens.css */
/* 設計 token：色票（同仁比例 PAPER 38／INK 32／KM BLUE 20／CORAL 7／LIME 3）、字級、網格、圓角、陰影、漸層、光暈、動態 */
:root {
  /* 色票 */
  --paper: #F4F1EA;
  --paper-2: #F8F6F1;        /* PAPER 淺一階：卡片 */
  --paper-3: #ECE8DE;        /* PAPER 深一階：欄位底 */
  --ink: #111111;
  --ink-2: #1A1A1A;
  --ink-3: #262626;
  --blue: #00A0E0;           /* KM BLUE */
  --blue-2: #0090CC;
  --deep: #00779E;           /* DIGITAL BLUE（深藍底，白字可讀） */
  --coral: #FF5A3C;
  --lime: #C7E35B;
  --gray: #6B7176;
  --rule: #D9D7D1;

  /* 文字色（對比 ≥ 4.5:1） */
  --fg: var(--ink);
  --fg-2: #50555A;           /* on PAPER ≈ 6.6:1 */
  --fg-inv: var(--paper);
  --fg-inv-2: rgba(244, 241, 234, .76);

  /* 字體 */
  --f-body: "Inter", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
  --f-cjk: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
  --f-display: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  --f-cond: "Roboto Condensed", "Arial Narrow", "Noto Sans TC", sans-serif;

  /* 字級（流體）——BRIEF_v25 D 上限（桌機）：首頁主標 ≤ 88、內頁主標 ≤ 72、章節標題 ≤ 44、導言 ≤ 21、內文 16–18；
     手機（< 600）：主標 ≤ 40、章節標題 ≤ 28、內文 16（見檔尾 media） */
  --t-hero: clamp(calc(40 * var(--vk)), calc(5.6 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(88 * var(--vk)));    /* 首頁主標 */
  --t-xl: clamp(calc(34 * var(--vk)), calc(4.6 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(72 * var(--vk)));      /* 內頁主標 */
  --t-l: clamp(calc(26 * var(--vk)), calc(2.9 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(44 * var(--vk)));       /* 章節標題（大）＝宣言、行動邀請 */
  --t-m: clamp(calc(24 * var(--vk)), calc(2.5 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(38 * var(--vk)));       /* 章節標題 */
  --t-s: clamp(calc(20 * var(--vk)), calc(1.8 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(28 * var(--vk)));       /* 小標題 */
  --t-num: clamp(calc(48 * var(--vk)), calc(5.6 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(96 * var(--vk)));     /* 數字 ≤ 96 */
  --t-deco: clamp(calc(88 * var(--vk)), calc(10.4 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(160 * var(--vk)));  /* 裝飾性大字 ≤ 160 */
  --t-lead: clamp(calc(17 * var(--vk)), calc(1.3 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(20 * var(--vk)));    /* 導言 ≤ 21 */
  --t-body: calc(17 * var(--vk));
  --t-small: calc(14 * var(--vk));
  --t-micro: calc(12 * var(--vk));

  /* 網格 */
  --gut: calc(16 * var(--vkw));
  --max: calc(1440 * var(--vkw));
  --col-gap: clamp(calc(16 * var(--vk)), calc(2 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(32 * var(--vk)));
  /* 區塊上下留白（BRIEF_v25 D）：clamp(56px, 8vh, 120px) 左右，不再用整屏高度撐空白 */
  --sec-y: clamp(calc(56 * var(--vk)), 8vh, calc(120 * var(--vk)));
  --sec-y-l: clamp(calc(64 * var(--vk)), 10vh, calc(128 * var(--vk)));   /* 章節呼吸：PAPER 長文、索引列 */
  --rule-ink: rgba(17,17,17,.12);
  --rule-inv: rgba(244,241,234,.18);

  /* 形 */
  --r-pill: calc(999 * var(--vk));
  --r-card: calc(28 * var(--vk));
  --r-md: calc(18 * var(--vk));
  --r-sm: calc(12 * var(--vk));

  /* 陰影（多層、無細邊框） */
  --sh-1: 0 1px 1px rgba(17,17,17,.03), 0 calc(2 * var(--vk)) calc(6 * var(--vk)) rgba(17,17,17,.04), 0 calc(10 * var(--vk)) calc(24 * var(--vk)) calc(-8 * var(--vk)) rgba(17,17,17,.08);
  --sh-2: 0 1px 1px rgba(17,17,17,.04), 0 calc(4 * var(--vk)) calc(10 * var(--vk)) rgba(17,17,17,.05), 0 calc(18 * var(--vk)) calc(40 * var(--vk)) calc(-12 * var(--vk)) rgba(17,17,17,.14), 0 calc(40 * var(--vk)) calc(80 * var(--vk)) calc(-30 * var(--vk)) rgba(17,17,17,.18);
  --sh-3: 0 calc(2 * var(--vk)) calc(4 * var(--vk)) rgba(0,0,0,.2), 0 calc(12 * var(--vk)) calc(24 * var(--vk)) calc(-12 * var(--vk)) rgba(0,0,0,.45);
  /* 固定或會移動的元素（頁首膠囊、橫向服務帶卡片、釘選畫面內的按鈕）只用小半徑陰影（BRIEF_v25 C2） */
  --sh-float: 0 1px calc(2 * var(--vk)) rgba(17,17,17,.06), 0 calc(6 * var(--vk)) calc(16 * var(--vk)) calc(-8 * var(--vk)) rgba(17,17,17,.2);

  /* 漸層與光暈 */
  --g-blue: linear-gradient(135deg, #00A0E0 0%, #0094D2 48%, #00779E 100%);
  --g-ink: radial-gradient(120% 90% at 80% 0%, #1d2a33 0%, #111111 58%);
  --g-coral: linear-gradient(160deg, #FF6A4E 0%, #FF5A3C 60%, #F24E31 100%);
  /* 滿版場景上的文字遮罩（只用 INK）：底部、左側、頂部（頁首可讀） */
  --scrim-b: linear-gradient(0deg, rgba(17,17,17,.82) 0%, rgba(17,17,17,.5) 26%, rgba(17,17,17,.14) 52%, rgba(17,17,17,0) 70%);
  --scrim-l: linear-gradient(90deg, rgba(17,17,17,.72) 0%, rgba(17,17,17,.38) 34%, rgba(17,17,17,0) 62%);
  --scrim-t: linear-gradient(180deg, rgba(17,17,17,.5) 0%, rgba(17,17,17,0) 22%);
  --glow-lime: 0 0 0 1px rgba(199,227,91,.5), 0 calc(8 * var(--vk)) calc(20 * var(--vk)) calc(-8 * var(--vk)) rgba(199,227,91,.7);
  --glow-blue: 0 0 0 1px rgba(0,160,224,.35), 0 calc(8 * var(--vk)) calc(20 * var(--vk)) calc(-10 * var(--vk)) rgba(0,160,224,.6);

  /* 動態 */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --ease-spring: cubic-bezier(.34, 1.4, .64, 1);
  --d-1: 180ms;
  --d-2: 420ms;
  --d-3: 1000ms;
  --d-4: 1500ms;
  --d-5: 2200ms;
  --stagger: 110ms;
  --ease-film: cubic-bezier(.22, .9, .24, 1);   /* 慢、穩、精準：長尾減速 */

  --head-h: calc(72 * var(--vk));
}
@media (max-width: 599px) { :root { --t-body: calc(16 * var(--vk)); --t-lead: calc(17 * var(--vk)); } }
@media (min-width: 768px) { :root { --gut: calc(32 * var(--vkw)); } }
@media (min-width: 1200px) { :root { --gut: calc(56 * var(--vkw)); } }

/* 02-base.css */
/* 基礎：重置、字體排印、網格、色調（tone）、視覺圖層 */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: clip; background: var(--paper); }
/* 不設 scrollbar-gutter: stable（寬螢幕縮放輪 fix1 r2 拿掉）：Mac 接滑鼠時系統改成 15px 傳統捲軸，headless 檢查的 --hide-scrollbars
   只藏捲軸、不藏 stable 保留的捲軸槽 → 1512 版面變 1497、geo 9,042 處差異。--sbw 取「系統捲軸寬」（scale.mjs SBW_BOOT），
   不靠捲軸槽也不會讓倍率在有／無捲軸之間切換。 */
body {
  margin: 0; min-height: 100svh; overflow-x: clip;
  background: var(--paper); color: var(--fg);
  font-family: var(--f-body); font-size: var(--t-body); line-height: 1.8; letter-spacing: .012em;
  font-kerning: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, p, ol, ul, blockquote, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
[data-copy] { white-space: pre-line; }
.ui-latin { font-family: var(--f-body); }
::selection { background: var(--blue); color: var(--ink); }
:focus-visible { outline: calc(3 * var(--vk)) solid var(--blue); outline-offset: calc(3 * var(--vk)); border-radius: calc(6 * var(--vk)); }
.tone-blue :focus-visible, .tone-coral :focus-visible { outline-color: var(--ink); }

/* 跳到主要內容 */
.skip { position: fixed; left: calc(16 * var(--vk)); top: calc(-80 * var(--vk)); z-index: 200; padding: calc(10 * var(--vk)) calc(18 * var(--vk)); border-radius: var(--r-pill); background: var(--ink); color: var(--paper); font-weight: 600; transition: top var(--d-1) var(--ease-out); }
.skip:focus { top: calc(16 * var(--vk)); }

/* 版心 */
.wrap { width: min(100% - 2 * var(--gut), var(--max)); margin-inline: auto; }

/* 字級
   大標題（display）：不套 palt／halt（全形標點保持全形寬，「價值，不在於」不擠在一起；比例字距只留給內文）；
   word-break: keep-all＋區塊渲染器輸出的 <wbr>（Intl.Segmenter 斷詞）→ 只在詞與詞之間換行，不把「指標」拆成「指／標」；
   line-break: strict 避頭尾；text-wrap: balance 讓各行等長、不留孤字；overflow-wrap: anywhere 只在單一詞比欄寬還長時才拆。 */
.display-hero, .display-xl, .display-l, .display-m, .display-s {
  font-family: var(--f-display); font-feature-settings: normal; text-wrap: balance;
  word-break: keep-all; line-break: strict; overflow-wrap: anywhere; hanging-punctuation: allow-end;
  line-height: 1.18; letter-spacing: -.01em; max-width: 15em;
}
.display-hero { font-size: var(--t-hero); font-weight: 900; line-height: 1.08; }
.display-xl { font-size: var(--t-xl); font-weight: 900; line-height: 1.12; }
.display-l { font-size: var(--t-l); font-weight: 800; }
.display-m { font-size: var(--t-m); font-weight: 800; }
.display-s { font-size: var(--t-s); font-weight: 700; line-height: 1.3; max-width: none; }
.lead { font-size: var(--t-lead); line-height: 1.85; font-weight: 400; max-width: 40em; }
.ln { display: block; overflow: clip; overflow-clip-margin: .12em; padding-bottom: .04em; }
.ln > span { display: inline-block; }

.eyebrow {
  display: inline-flex; align-items: center; gap: calc(12 * var(--vk));
  font-family: var(--f-body); font-size: calc(13 * var(--vk)); font-weight: 600; line-height: 1.3; letter-spacing: .22em; text-transform: uppercase;
  color: var(--deep);
}
.eyebrow::before { content: ""; width: calc(10 * var(--vk)); height: calc(10 * var(--vk)); border-radius: calc(2 * var(--vk)); background: var(--blue); box-shadow: 0 0 calc(16 * var(--vk)) rgba(0,160,224,.7); flex: none; }
.tone-ink .eyebrow, .tone-deep .eyebrow, .eyebrow--light { color: var(--fg-inv-2); }
.has-visual .eyebrow { color: var(--on-2); }
.tone-blue .eyebrow { color: var(--ink); }
.tone-blue .eyebrow::before { background: var(--ink); box-shadow: none; }
.tone-deep .eyebrow::before { background: var(--lime); box-shadow: none; }

/* 色調區塊：有實色背景的區塊蓋住 canvas；有場景的區塊背景透明 */
main, .site-foot { position: relative; z-index: 1; overflow-x: clip; } /* 文字底襯（::after 左右外擴 64px）與橫向服務帶不得撐出頁寬；clip 不建立捲動容器，sticky 照常 */
.blk { position: relative; isolation: isolate; }
.tone-paper { background: var(--paper); color: var(--fg); }
.tone-lite { background: var(--paper-2); color: var(--fg); }
.tone-ink { background: var(--ink); color: var(--fg-inv); }
.tone-blue { background: var(--blue); color: var(--ink); }
.tone-deep { background: var(--deep); color: #fff; }
.tone-coral { background: var(--coral); color: var(--ink); }
.tone-ink .lead, .tone-deep .lead { color: var(--fg-inv-2); }
.tone-deep .lead { color: rgba(255,255,255,.88); }

/* 視覺掛載：section.has-visual > .v-layer（F2 引擎以 viewport＋scissor 在此矩形內繪製） */
#v-canvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; display: block; }
/* 場景基調（BRIEF_v25 B1，data-key 由區塊渲染器依 visuals/keys.json 帶入）決定文字顏色：
   --on 主文字、--on-2 次要文字、--on-rule 細線、--wash 基調色（rgb 三值：標籤膠囊、主標漸層帶）。
   paper＝米白高調 → INK 字；blue＝KM BLUE 色場 → INK 字（KM BLUE 上不放白色內文）；ink＝深色舞台 → PAPER 字。 */
/* --accent：裝飾細線與色點（ink／paper 基調 KM BLUE；blue 基調改 CORAL，藍上不放藍）；--on-accent：強調字（需 ≥ 4.5:1） */
.has-visual { --on: var(--paper); --on-2: rgba(244,241,234,.84); --on-rule: var(--rule-inv); --accent: var(--blue); --on-accent: var(--lime); --wash: 17,17,17; --wash-a: .55; background: transparent; color: var(--on); }
.has-visual[data-key="paper"] { --on: var(--ink); --on-2: #2E3236; --on-rule: rgba(17,17,17,.2); --on-accent: var(--deep); --wash: 244,241,234; --wash-a: .78; }
.has-visual[data-key="blue"] { --on: var(--ink); --on-2: var(--ink); --on-rule: rgba(17,17,17,.26); --accent: var(--coral); --on-accent: var(--ink); --wash: 0,160,224; --wash-a: .86; }
.v-layer { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
/* 場景尚未畫出第一幀（引擎未啟動、JS 關閉、preset 載入中或失敗）時先給基調底色，文字一開始就可讀；
   引擎在 [data-visual] 上設 data-v-ready="1" 後才讓區塊透明；fallback 模式由引擎在 .v-layer 填入 preset.fallback */
.has-visual:has(> .v-layer:not([data-v-ready])), html[data-webgl="fallback"] .has-visual { background-color: var(--ink); }
.has-visual[data-key="paper"]:has(> .v-layer:not([data-v-ready])), html[data-webgl="fallback"] .has-visual[data-key="paper"] { background-color: var(--paper); }
.has-visual[data-key="blue"]:has(> .v-layer:not([data-v-ready])), html[data-webgl="fallback"] .has-visual[data-key="blue"] { background-color: var(--blue); }
.v-layer:not([data-v-ready]) { background: radial-gradient(90% 70% at 72% 18%, rgba(0,160,224,.34), transparent 62%), radial-gradient(60% 50% at 18% 96%, rgba(255,90,60,.16), transparent 70%); }
/* 場景上的文字可讀性（v25 修正輪：取代「每塊文字後方各墊一片柔邊色塊」——那些柔邊矩形看得出邊界）。只有三種做法：
   1. 小字標籤（麵包屑、類別標籤）：實色膠囊，邊界清楚、是介面元素，不是柔邊色塊。
   2. 主標、宣言、序號、特色清單、服務帶卡片文字：直接疊在場景上，後方不墊任何色帶（v25 calm 輪，BRIEF_v25_calm）——
      各場景在這些文字的範圍只留平順的底色（安靜區：引擎量文字框 → 著色器 calmMask，visuals/README §7）。
   3. 導言、說明等內文：實色卡片——paper／blue 基調＝INK 卡＋PAPER 字；ink 基調＝PAPER 卡＋INK 字（--card-*）。
   場景構圖也把文字那一側留成低頻的乾淨區（各 preset 註解）。 */
.has-visual { --band-a: .8; --card-bg: var(--ink); --card-fg: var(--paper); --card-fg-2: rgba(244,241,234,.8); --card-rule: rgba(244,241,234,.22); }
.has-visual[data-key="ink"] { --band-a: .3; --card-bg: var(--paper); --card-fg: var(--ink); --card-fg-2: #3A3F44; --card-rule: rgba(17,17,17,.16); }
.has-visual :is(.hero-top > .crumbs, .hero-top > .eyebrow, .stage-grid > .eyebrow) { padding: calc(7 * var(--vk)) calc(14 * var(--vk)) calc(7 * var(--vk)) calc(12 * var(--vk)); border-radius: var(--r-pill); background: rgb(var(--wash)); color: var(--on); }
.has-visual :is(.hero-top > .eyebrow, .stage-grid > .eyebrow) { color: var(--on); }
/* 深色舞台上的大字：一道小半徑陰影補對比 */
.has-visual[data-key="ink"] :is(h1, h2, h3) { text-shadow: 0 1px calc(2 * var(--vk)) rgba(0,0,0,.3); }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* 03-components.css */
/* 元件：膠囊按鈕、文字連結、麵包屑、內容準備中、動作列 */
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: calc(12 * var(--vk)) calc(14 * var(--vk)); }

.btn {
  --btn-h: calc(56 * var(--vk)); --ico: calc(38 * var(--vk));
  position: relative; display: inline-flex; align-items: center; gap: calc(16 * var(--vk));
  height: var(--btn-h); padding: 0 calc((var(--btn-h) - var(--ico)) / 2) 0 calc(28 * var(--vk));
  border: 0; border-radius: var(--r-pill); cursor: pointer; white-space: nowrap;
  font-family: var(--f-body); font-size: calc(16 * var(--vk)); font-weight: 650; letter-spacing: .04em; line-height: 1;
  transition: transform var(--d-2) var(--ease-out), box-shadow var(--d-2) var(--ease-out), background-color var(--d-2) var(--ease-out), color var(--d-2) var(--ease-out);
  text-shadow: none !important;
}
.btn-ico { width: var(--ico); height: var(--ico); border-radius: 50%; display: grid; place-items: center; flex: none; transition: transform var(--d-2) var(--ease-spring), background-color var(--d-2); }
.btn .i-arrow { width: calc(18 * var(--vk)); height: calc(18 * var(--vk)); }
.btn:hover { transform: translateY(calc(-2 * var(--vk))); }
.btn:hover .btn-ico { transform: translateX(calc(3 * var(--vk))) rotate(-8deg); }
.btn:active { transform: translateY(0) scale(.98); }

.btn--primary { background: var(--lime); color: var(--ink); box-shadow: var(--glow-lime); }
.btn--primary .btn-ico { background: var(--ink); color: var(--lime); }
.btn--primary:hover { box-shadow: 0 0 0 1px rgba(199,227,91,.7), 0 calc(10 * var(--vk)) calc(24 * var(--vk)) calc(-8 * var(--vk)) rgba(199,227,91,.8); }

.btn--ink { background: var(--ink); color: var(--paper); box-shadow: var(--sh-1); }
.btn--ink .btn-ico { background: var(--paper); color: var(--ink); }
.btn--ink:hover { box-shadow: var(--sh-2); }

.btn--light { background: var(--paper); color: var(--ink); box-shadow: var(--sh-3); }
.btn--light .btn-ico { background: var(--ink); color: var(--paper); }

.btn--blue { background: var(--blue); color: var(--ink); box-shadow: var(--glow-blue); }
.btn--blue .btn-ico { background: var(--ink); color: var(--blue); }

/* 次要按鈕：不用背景模糊（BRIEF_v25 C2）——深色底上半透明 PAPER、淺色基調場景上改 INK 描邊 */
.btn--ghost { background: rgba(17,17,17,.42); color: var(--paper); box-shadow: inset 0 0 0 1px rgba(244,241,234,.28); }
.btn--ghost .btn-ico { background: rgba(244,241,234,.16); color: var(--paper); }
.btn--ghost:hover { background: rgba(17,17,17,.6); }
.has-visual:not([data-key="ink"]) .btn--ghost { background: rgba(244,241,234,.55); color: var(--ink); box-shadow: inset 0 0 0 1.5px rgba(17,17,17,.55); }
.has-visual:not([data-key="ink"]) .btn--ghost .btn-ico { background: var(--ink); color: var(--paper); }
.has-visual:not([data-key="ink"]) .btn--ghost:hover { background: rgba(244,241,234,.8); }

.btn--sm { --btn-h: calc(46 * var(--vk)); --ico: calc(32 * var(--vk)); font-size: calc(14 * var(--vk)); padding-left: calc(20 * var(--vk)); gap: calc(12 * var(--vk)); }
.btn--sm .i-arrow { width: calc(15 * var(--vk)); height: calc(15 * var(--vk)); }
.btn--xl { --btn-h: calc(76 * var(--vk)); --ico: calc(54 * var(--vk)); font-size: calc(19 * var(--vk)); padding-left: calc(38 * var(--vk)); gap: calc(22 * var(--vk)); }
.btn--xl .i-arrow { width: calc(22 * var(--vk)); height: calc(22 * var(--vk)); }
/* 沒有圓形箭頭的按鈕（例如頁首、行動選單的「聯絡我們」）：左右留白相等、文字置中。
   上面的右側窄留白是為了讓箭頭圓貼齊膠囊，不能套在純文字按鈕上（Tommy 2026-09-25：「聯絡我們好像歪掉了」）。 */
.btn:not(:has(.btn-ico)) { justify-content: center; padding-inline: calc(28 * var(--vk)); }
.btn--sm:not(:has(.btn-ico)) { padding-inline: calc(20 * var(--vk)); }
.btn--xl:not(:has(.btn-ico)) { padding-inline: calc(38 * var(--vk)); }

.text-link { display: inline-flex; align-items: center; gap: calc(10 * var(--vk)); font-weight: 650; color: var(--deep); }
.text-link .i-arrow { width: calc(18 * var(--vk)); height: calc(18 * var(--vk)); transition: transform var(--d-2) var(--ease-spring); }
.text-link:hover .i-arrow { transform: translateX(calc(4 * var(--vk))); }

/* 麵包屑 */
.crumbs ol { display: flex; flex-wrap: wrap; gap: calc(6 * var(--vk)); font-size: calc(13 * var(--vk)); font-weight: 500; letter-spacing: .06em; }
.crumbs li { display: inline-flex; align-items: center; gap: calc(6 * var(--vk)); } /* 不降透明度（KM BLUE 底上 ≥ 4.5:1），目前頁以字重區分 */
.crumbs li[aria-current] { font-weight: 700; }
.crumbs a { border-radius: calc(4 * var(--vk)); transition: color var(--d-1); }
.crumbs a:hover { color: var(--blue); }
.crumbs .sep { font-weight: 400; }

/* 內容準備中 */
.pending-label, .pending-inline {
  display: inline-flex; align-items: center; gap: calc(10 * var(--vk)); padding: calc(8 * var(--vk)) calc(16 * var(--vk)) calc(8 * var(--vk)) calc(12 * var(--vk)); border-radius: var(--r-pill);
  font-size: calc(14 * var(--vk)); font-weight: 600; letter-spacing: .08em; background: rgba(17,17,17,.06); color: var(--fg-2);
}
.pending-label::before, .pending-inline::before { content: ""; width: calc(8 * var(--vk)); height: calc(8 * var(--vk)); border-radius: 50%; background: var(--coral); box-shadow: 0 0 calc(10 * var(--vk)) rgba(255,90,60,.6); }
.tone-ink .pending-label, .tone-ink .pending-inline, .tone-deep .pending-inline { background: rgba(244,241,234,.1); color: var(--fg-inv-2); }
.skeleton { display: grid; gap: calc(14 * var(--vk)); margin-top: calc(28 * var(--vk)); }
.skeleton i, .pend-card i { display: block; height: calc(14 * var(--vk)); border-radius: var(--r-pill); background: linear-gradient(90deg, rgba(17,17,17,.06), rgba(17,17,17,.1), rgba(17,17,17,.06)); background-size: 200% 100%; animation: shimmer 2.4s var(--ease-io) infinite; }
.skeleton i:nth-child(2n) { width: 82%; } .skeleton i:nth-child(3n) { width: 64%; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* 04-chrome.css */
/* 頁首（浮動膠囊導覽）、行動選單、頁尾、開場 */
.site-head { position: fixed; inset: 0 0 auto; z-index: 60; padding: calc(14 * var(--vk)) var(--gut) 0; pointer-events: none; transition: transform var(--d-3) var(--ease-out); }
html.head-hide .site-head { transform: translateY(calc(-100% - calc(20 * var(--vk)))); }
html.menu-open .site-head { transform: none; }
.head-cap {
  pointer-events: auto; position: relative; z-index: 2;
  max-width: calc(var(--max) + calc(24 * var(--vk))); margin-inline: auto; height: var(--head-h);
  /* BRIEF_v25 E：Logo 距膠囊左緣 ≥ 36、按鈕距右緣 ≥ 20；C2：不透明 PAPER 底、不用背景模糊、小半徑陰影 */
  display: flex; align-items: center; gap: 0; padding: 0 calc(20 * var(--vk)) 0 calc(40 * var(--vk)); border-radius: var(--r-pill);
  background: var(--paper);
  box-shadow: var(--sh-float);
  color: var(--ink);
}
.brand { flex: none; display: block; border-radius: calc(10 * var(--vk)); }
.brand img { width: calc(180 * var(--vk)); height: auto; }
.nav-primary { margin-left: auto; padding-left: calc(48 * var(--vk)); } /* Logo 到第一項 ≥ 48 */
.nav-primary ul { display: flex; gap: calc(2 * var(--vk)); }
/* 「致X」副標已移除（Tommy 2026-09-30）：單行標籤，高度 46 與右側「聯絡我們」按鈕（.btn--sm）同高 */
.nav-a { display: flex; align-items: center; min-height: calc(46 * var(--vk)); padding: 0 clamp(calc(11 * var(--vk)), calc(1 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(16 * var(--vk))); border-radius: var(--r-pill); line-height: 1.1; transition: background-color var(--d-1), color var(--d-1); }
.nav-l { font-size: calc(15 * var(--vk)); font-weight: 650; letter-spacing: .04em; white-space: nowrap; }
.nav-a:hover { background: rgba(17,17,17,.06); }
.nav-a[aria-current] { background: var(--ink); color: var(--paper); }
.head-cta { margin-left: calc(28 * var(--vk)); flex: none; } /* 最後一項到按鈕 ≥ 24 */
.menu-btn {
  display: none; margin-left: auto; align-items: center; gap: calc(10 * var(--vk)); height: calc(48 * var(--vk)); padding: 0 calc(8 * var(--vk)) 0 calc(20 * var(--vk)); border: 0; border-radius: var(--r-pill);
  background: var(--ink); color: var(--paper); font-size: calc(15 * var(--vk)); font-weight: 650; letter-spacing: .12em; cursor: pointer;
}
.menu-ico { position: relative; width: calc(32 * var(--vk)); height: calc(32 * var(--vk)); border-radius: 50%; background: rgba(244,241,234,.14); display: block; }
.menu-ico i { position: absolute; left: calc(9 * var(--vk)); right: calc(9 * var(--vk)); height: calc(1.6 * var(--vk)); border-radius: calc(2 * var(--vk)); background: currentColor; transition: transform var(--d-2) var(--ease-out), top var(--d-2) var(--ease-out); }
.menu-ico i:first-child { top: calc(12 * var(--vk)); } .menu-ico i:last-child { top: calc(18.5 * var(--vk)); }
.menu-close { display: none; }
html.menu-open .menu-open { display: none; }
html.menu-open .menu-close { display: inline; }
html.menu-open .menu-ico i:first-child { top: calc(15.2 * var(--vk)); transform: rotate(45deg); }
html.menu-open .menu-ico i:last-child { top: calc(15.2 * var(--vk)); transform: rotate(-45deg); }

.m-menu {
  position: fixed; inset: 0; z-index: 1; pointer-events: auto; overflow-y: auto; overscroll-behavior: contain;
  padding: calc(var(--head-h) + calc(40 * var(--vk))) var(--gut) calc(40 * var(--vk)); background: var(--g-ink); color: var(--paper);
  visibility: hidden; opacity: 0; clip-path: inset(0 0 100% 0 round 0 0 calc(32 * var(--vk)) calc(32 * var(--vk)));
  transition: opacity var(--d-2) var(--ease-out), clip-path var(--d-3) var(--ease-out), visibility 0s linear var(--d-3);
}
html.menu-open .m-menu { visibility: visible; opacity: 1; clip-path: inset(0 0 0 0 round 0); transition-delay: 0s; }
html.menu-open { overflow: hidden; }
.m-list { display: grid; gap: calc(6 * var(--vk)); }
.m-item { opacity: 0; transform: translateY(calc(18 * var(--vk))); transition: opacity var(--d-3) var(--ease-out), transform var(--d-3) var(--ease-out); transition-delay: calc(var(--i) * 50ms + 120ms); }
html.menu-open .m-item { opacity: 1; transform: none; }
.m-a { display: flex; align-items: baseline; padding: calc(10 * var(--vk)) 0; }
.m-l { font-family: var(--f-display); font-size: clamp(calc(30 * var(--vk)), calc(8 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(48 * var(--vk))); font-weight: 800; letter-spacing: -.01em; line-height: 1.15; }
.m-kids { display: flex; flex-wrap: wrap; gap: calc(8 * var(--vk)); padding: 0 0 calc(14 * var(--vk)); font-size: calc(15 * var(--vk)); }
.m-kids a { display: inline-block; padding: calc(6 * var(--vk)) calc(14 * var(--vk)); border-radius: var(--r-pill); background: rgba(244,241,234,.08); color: var(--fg-inv-2); }
.m-foot { margin-top: calc(32 * var(--vk)); }

/* 空間不夠時（< 1200）改漢堡選單，不硬擠（BRIEF_v25 E） */
@media (max-width: 1199px) {
  .nav-primary, .head-cta { display: none; }
  .menu-btn { display: inline-flex; }
}
@media (max-width: 767px) {
  :root { --head-h: calc(64 * var(--vk)); }
  .site-head { padding-top: calc(10 * var(--vk)); }
  .head-cap { padding-left: calc(20 * var(--vk)); padding-right: calc(8 * var(--vk)); }
  .brand img { width: calc(168 * var(--vk)); }
  .menu-btn { height: calc(46 * var(--vk)); padding-left: calc(16 * var(--vk)); }
}
@media (max-width: 359px) { .brand img { width: calc(140 * var(--vk)); } .menu-btn .ui { display: none !important; } .menu-btn { padding-left: calc(8 * var(--vk)); } }

/* 頁尾 */
.site-foot { background: var(--ink); color: var(--paper); padding: clamp(calc(56 * var(--vk)), calc(5.6 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(88 * var(--vk))) 0 calc(28 * var(--vk)); overflow: hidden; }
.site-foot::before { content: ""; position: absolute; inset: -40% -10% auto auto; width: calc(70 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100); height: calc(70 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100); border-radius: 50%; background: radial-gradient(closest-side, rgba(0,160,224,.22), transparent 70%); pointer-events: none; }
/* 頁尾是整站的「暗場舞台」：右上 KM BLUE 天光＋左下一盞 CORAL 暖色場燈（CORAL 以點光出現，而不是平塗色帶） */
.site-foot::after { content: ""; position: absolute; left: calc(-24 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100); bottom: calc(-36 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100); width: calc(76 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100); height: calc(76 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100); border-radius: 50%; background: radial-gradient(closest-side, rgba(255,90,60,.46), rgba(255,90,60,.18) 42%, rgba(255,90,60,.05) 64%, transparent 78%); pointer-events: none; }
.foot-top { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: calc(40 * var(--vk)); padding-bottom: clamp(calc(24 * var(--vk)), calc(3 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(40 * var(--vk))); }
.foot-title { position: relative; padding-left: clamp(calc(22 * var(--vk)), calc(2 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(32 * var(--vk))); font-family: var(--f-display); font-size: var(--t-s); font-weight: 800; line-height: 1.18; letter-spacing: -.01em; max-width: 12em; text-wrap: balance; word-break: keep-all; line-break: strict; overflow-wrap: anywhere; }
.foot-title::before { content: ""; position: absolute; left: 0; top: .22em; bottom: .22em; width: clamp(calc(6 * var(--vk)), calc(.5 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(8 * var(--vk))); border-radius: calc(8 * var(--vk)); background: var(--coral); box-shadow: 0 0 calc(24 * var(--vk)) rgba(255,90,60,.6); }
.foot-mark { width: clamp(calc(88 * var(--vk)), calc(8 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(132 * var(--vk))); height: auto; } /* 官方 Logo 原色，不加透明度 */
.foot-nav { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: calc(28 * var(--vk)) var(--col-gap); padding: calc(28 * var(--vk)) 0 calc(32 * var(--vk)); }
.foot-h { display: flex; margin-bottom: calc(12 * var(--vk)); line-height: 1.3; }
.foot-h a { font-size: calc(17 * var(--vk)); font-weight: 700; }
.foot-col ul { display: grid; gap: calc(8 * var(--vk)); font-size: calc(14 * var(--vk)); line-height: 1.6; color: var(--fg-inv-2); }
.foot-col a:hover, .foot-legal a:hover, .foot-ext a:hover { color: var(--blue); }
.foot-bottom { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: calc(16 * var(--vk)) calc(32 * var(--vk)); padding-top: calc(28 * var(--vk)); font-size: calc(13 * var(--vk)); color: var(--fg-inv-2); background: linear-gradient(90deg, rgba(244,241,234,.14), rgba(244,241,234,0)) top / 100% 1px no-repeat; }
.foot-legal, .foot-ext { display: flex; flex-wrap: wrap; gap: calc(8 * var(--vk)) calc(22 * var(--vk)); }
.foot-ext a { display: inline-flex; align-items: center; gap: calc(6 * var(--vk)); }
.foot-ext .i-arrow { width: calc(14 * var(--vk)); height: calc(14 * var(--vk)); }
/* 同仁回饋 0929：訂閱電子報（外部連結旁的細框膠囊；外連 csrone.com，另開新視窗）。底列放不下 → 「訂閱＋集團外部連結」自成第一列（.foot-out），
   第二列是法律連結、版權、減少動態（原本的一列） */
.foot-out { flex: 1 0 100%; display: flex; flex-wrap: wrap; align-items: center; gap: calc(8 * var(--vk)) calc(28 * var(--vk)); }
.foot-sub { margin: 0; }
.foot-out .foot-ext { align-items: center; }
.foot-sub a { display: inline-flex; align-items: center; gap: calc(8 * var(--vk)); min-height: calc(36 * var(--vk)); padding: calc(6 * var(--vk)) calc(14 * var(--vk)) calc(6 * var(--vk)) calc(16 * var(--vk)); border-radius: calc(999 * var(--vk)); box-shadow: inset 0 0 0 1px rgba(244,241,234,.36); color: var(--paper); font-weight: 600; transition: box-shadow var(--d-1), color var(--d-1); }
.foot-sub a:hover { color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); }
.foot-sub .i-arrow { width: calc(14 * var(--vk)); height: calc(14 * var(--vk)); }
.foot-copy { margin-left: auto; }
/* 減少動態開關：v7-fix（手機審查：只有 aria-label、沒有可見文字，一般使用者看到一顆沒有說明的開關）→ 開關左側顯示同一個介面字「減少動態」
   （site/ui.json 白名單 motion；按鈕的名稱改由可見文字提供），整顆按鈕 44px 高 */
.motion-btn { display: inline-flex; align-items: center; gap: calc(10 * var(--vk)); min-height: calc(44 * var(--vk)); padding: 0; border: 0; background: none; color: var(--fg-inv-2); font: inherit; font-size: calc(13 * var(--vk)); font-weight: 600; letter-spacing: .06em; cursor: pointer; }
.motion-btn:hover { color: var(--paper); }
.motion-sw { position: relative; flex: none; width: calc(44 * var(--vk)); height: calc(26 * var(--vk)); border-radius: var(--r-pill); background: rgba(244,241,234,.14); }
.motion-sw i { position: absolute; top: calc(4 * var(--vk)); left: calc(4 * var(--vk)); width: calc(18 * var(--vk)); height: calc(18 * var(--vk)); border-radius: 50%; background: var(--paper); transition: transform var(--d-2) var(--ease-spring); }
.motion-btn[aria-pressed="true"] .motion-sw { background: var(--blue); }
.motion-btn[aria-pressed="true"] .motion-sw i { transform: translateX(calc(18 * var(--vk))); }
@media (max-width: 1023px) { .foot-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 599px) {
  .foot-nav { grid-template-columns: 1fr; gap: 0; padding: calc(16 * var(--vk)) 0 calc(32 * var(--vk)); }
  .foot-col { padding: calc(18 * var(--vk)) 0; background: linear-gradient(90deg, var(--rule-inv), rgba(244,241,234,0)) top / 100% 1px no-repeat; }
  .foot-h { flex-direction: row; align-items: baseline; justify-content: space-between; margin-bottom: 0; }
  .foot-h a { font-size: calc(19 * var(--vk)); }
  .foot-col ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(10 * var(--vk)) calc(16 * var(--vk)); margin-top: calc(14 * var(--vk)); }
  .foot-top { grid-template-columns: 1fr; }
  .foot-copy { margin-left: 0; }
}

/* 開場序曲（首次進站、首頁、未減少動態；由執行期建立，不在 HTML 裡、不擋爬蟲與 LCP：主標一開始就在 DOM 並已繪製）
   時間軸（≤ 2.5 秒）：0–.5s 燈光暗下（場燈光暈收掉）→ .35–1.35s 官方 Logo 由左至右描繪（遮罩掃描，不改圖形與顏色）
   → 1.5s 暗場淡出、主標逐行浮現（--intro-at）→ 2.3s 移除 */
.intro { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: var(--ink); color: var(--paper); overflow: hidden;
  animation: introDim .5s var(--ease-out) backwards; transition: opacity 800ms var(--ease-film), visibility 0s linear 800ms; }
/* final-build：introDim 原本 fill-mode both——動畫結束後一直把 opacity 釘在 1，.is-out 的 opacity 0 與 0.8 s 淡出被蓋掉，
   序曲其實沒有淡出、是在 2.35 s 移除時直接消失（v24 起就這樣）。改 backwards：結束後回到本來的 1（畫面不變），淡出才會生效。 */
.intro.is-out { opacity: 0; visibility: hidden; pointer-events: none; }
/* final-fix（美術審查：序曲淡出的 0.8 s 內半透明 KM 字樣和主標、藍天同時出現、短暫疊字）：字樣比暗場早淡完、同時微微放大離場；
   暗場延後 0.15 s 再以 0.7 s 淡出（總長仍是 0.85 s，和 runtime 移除的時間一致）→ 字樣 0.25 s 就淡完，幾乎不和主標同時出現。只用 opacity／transform。 */
.intro.is-out { transition: opacity 700ms var(--ease-film) 150ms, visibility 0s linear 850ms; }
.intro.is-out .intro-logo { opacity: 0; transform: scale(1.06); transition: opacity 250ms var(--ease-out), transform 800ms var(--ease-film); }
.intro-house { position: absolute; inset: 0; background: radial-gradient(90% 60% at 50% 0%, rgba(244,241,234,.34), transparent 70%), radial-gradient(70% 50% at 50% 110%, rgba(244,241,234,.16), transparent 70%); animation: introHouse .6s var(--ease-io) forwards; }
.intro-beam { position: absolute; inset: -30% -10%; background:
  conic-gradient(from 200deg at 50% -10%, transparent 0deg, rgba(0,160,224,0) 146deg, rgba(0,160,224,.12) 160deg, rgba(0,160,224,.28) 171deg, rgba(244,241,234,.18) 180deg, rgba(0,160,224,.28) 189deg, rgba(0,160,224,.12) 200deg, rgba(0,160,224,0) 214deg, transparent 360deg);
  opacity: 0; transform-origin: 50% 0; animation: introBeam 1.8s var(--ease-film) .25s forwards; }
.intro-dust { position: absolute; inset: 0; background-image: radial-gradient(1px 1px at 20% 30%, rgba(244,241,234,.6), transparent), radial-gradient(1px 1px at 60% 50%, rgba(244,241,234,.5), transparent), radial-gradient(1.5px 1.5px at 45% 70%, rgba(0,160,224,.7), transparent), radial-gradient(1px 1px at 80% 25%, rgba(244,241,234,.45), transparent), radial-gradient(1px 1px at 35% 55%, rgba(244,241,234,.4), transparent); animation: introDust 2.2s linear .2s both; opacity: 0; }
.intro-logo { position: relative; width: min(calc(40 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(232 * var(--vk))); }
.intro-mark { display: block; width: 100%; height: auto; clip-path: inset(0 100% 0 0); animation: introDraw 1s var(--ease-io) .35s forwards; }
.intro-scan { position: absolute; top: -14%; bottom: -14%; left: 0; width: calc(2 * var(--vk)); border-radius: calc(2 * var(--vk)); background: linear-gradient(180deg, transparent, var(--paper) 30%, var(--blue) 70%, transparent); opacity: 0; animation: introScan 1s var(--ease-io) .35s forwards; }
/* 掃描線的光暈：漸層偽元素（不用大半徑陰影，BRIEF_v25 C2） */
.intro-scan::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(-28 * var(--vk)); width: calc(58 * var(--vk)); background: radial-gradient(50% 50% at 50% 50%, rgba(0,160,224,.45), rgba(0,160,224,0) 100%); pointer-events: none; }
.intro-glow { position: absolute; inset: -40%; background: radial-gradient(closest-side, rgba(0,160,224,.28), transparent 70%); opacity: 0; animation: introGlow .9s var(--ease-out) 1.2s forwards; pointer-events: none; }
.intro-skip { position: absolute; right: var(--gut); bottom: calc(calc(24 * var(--vk)) + env(safe-area-inset-bottom)); padding: calc(10 * var(--vk)) calc(20 * var(--vk)); border: 0; border-radius: var(--r-pill); background: rgba(244,241,234,.1); color: var(--fg-inv-2); font-size: calc(14 * var(--vk)); font-weight: 600; letter-spacing: .12em; cursor: pointer; }
.intro-skip:hover { background: rgba(244,241,234,.18); color: var(--paper); }
@keyframes introDim { from { opacity: .55; } to { opacity: 1; } }
@keyframes introHouse { to { opacity: 0; } }
@keyframes introBeam { 0% { opacity: 0; transform: rotate(-6deg) scaleY(.6); } 50% { opacity: 1; } 100% { opacity: .8; transform: rotate(3deg) scaleY(1); } }
@keyframes introDust { 0% { opacity: 0; transform: translateY(calc(8 * var(--vk))); } 40% { opacity: 1; } 100% { opacity: .7; transform: translateY(calc(-10 * var(--vk))); } }
@keyframes introDraw { to { clip-path: inset(0 0 0 0); } }
@keyframes introScan { 0% { opacity: 0; left: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { opacity: 0; left: 100%; } }
@keyframes introGlow { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: .6; } }
@media (max-width: 599px) { .foot-sub a { min-height: calc(44 * var(--vk)); } .foot-out { gap: calc(4 * var(--vk)) calc(22 * var(--vk)); } }

/* 05-blocks.css */
/* ==================== 區塊樣式（固定，同仁不可改） ==================== */

/* ---------- 釘選共用 ---------- */
[data-pin] { --p: 0; }
@media (min-width: 900px) {
  [data-pin] { height: calc(var(--steps, 1) * 100svh); }
  [data-pin] > .pin-sticky { position: sticky; top: 0; height: 100svh; overflow: clip; }
}

/* ---------- stage-hero 開場主視覺 ---------- */
.blk-stage-hero .pin-sticky { z-index: 0; display: flex; flex-direction: column; justify-content: flex-end; min-height: 100svh; }
/* hero 整合輪：開場是「全球黎明」（visuals/presets/hero-dawn.js），進場從全黑的地平線開始。場景第一次畫出來之前
   （著色器編譯中）不要先閃一下 KM BLUE 再變黑：底色用 INK＋日出點一小團微光，與進場起點一致。減少動態直接是完整畫面，照原本的 KM BLUE。 */
@media (prefers-reduced-motion: no-preference) {
  html:not(.reduce-motion):not([data-webgl="fallback"]) .blk-stage-hero:has(> .v-layer[data-visual="hero-dawn"]:not([data-v-ready])) { background-color: var(--ink); }
  html:not(.reduce-motion):not([data-webgl="fallback"]) .blk-stage-hero > .v-layer[data-visual="hero-dawn"]:not([data-v-ready]) { background: radial-gradient(9% 7% at 78.7% 52.5%, rgba(244,241,234,.16), rgba(244,241,234,0) 100%); }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 899px) {
  html:not(.reduce-motion):not([data-webgl="fallback"]) .blk-stage-hero > .v-layer[data-visual="hero-dawn"]:not([data-v-ready]) { background: radial-gradient(22% 8% at 62% 18%, rgba(244,241,234,.16), rgba(244,241,234,0) 100%); }
}
/* final-fix（美術審查：手機開場地球倒掛在上方、第一屏只看到淡藍天加黑色面板）：直式視窗（寬高比 < 1，hero-dawn 的手機構圖）
   改成正立的地球——天空與日出在上方，主標坐在地球夜面的平順暗處（安靜區，visuals/README §8.3）→ 主標一律 PAPER 字。
   寬高比與著色器的 mob（uRes 寬高比 < 1）同一個判斷；沒有 JS（沒有場景）或沒有 WebGL（CSS 備援是桌機的藍天構圖）時維持原本的 INK 字。 */
@media (max-aspect-ratio: 9999/10000) {
  html.js:not([data-webgl="fallback"]) .blk-stage-hero:has(> .v-layer[data-visual="hero-dawn"]) .stage-title { color: var(--paper); }
}
/* final-a：主標是 INK 字，黎明進場的前段天空還是黑的——原本前 1–1.5 秒是黑字壓在黑天上（看不到）。主標不能淡入（會延後 LCP），
   所以改字色：runtime 把場景停在進場起點（data-visual-state 第 4 值＝0）時主標是 PAPER 字；黎明開始（設回 1）後 0.75 s 起
   0.5 s 轉回 INK，正好是它背後的天空（hero-dawn 的 wave，主標一帶約 0.66→1.26 s）由夜色亮成 KM BLUE 的時候。
   主標 .32em 的升起動畫同步延後：延遲 0.85 s 由第一次繪製頁面起算（html.js 由 inline script 加上），場景停在起點時暫停
   → 約在黎明開始後 0.7 s 升起（有頭 Chrome 實測）。減少動態、沒有 JS、webdriver（不跑進場）：一直是 INK 字，只是晚 0.85 s 升起。
   final-build：第一次進站有序曲時黎明 1.6 倍速（runtime/site.js 寫 --dawn-k），這些延遲與轉色時間同步除以 --dawn-k。
   final-fix（final-verify 實測：主標升起 2.8 s、底線 uDraw 3.4–3.5 s 才完成，超過 BRIEF_v25_hero §2 的 2.5 s）：延遲是在黎明開始（wake）後
   才起算，所以升起與底線的「長度」也要除以 --dawn-k，底線也要提早：升起 1.2 s／k、延遲 .85／.95 s／k；底線延遲 1.05 s／k、長度 1.1 s／k。
   wake 約 0.9 s（有序曲，k 1.6）→ 升起 2.24／2.30 s、底線 2.28 s 完成；沒有序曲（k 1，wake 約 0.2 s）→ 升起 2.25／2.35 s、底線 2.35 s。 */
@media (prefers-reduced-motion: no-preference) {
  html.js:not(.reduce-motion) .blk-stage-hero:has(> .v-layer[data-visual="hero-dawn"]) .stage-title { transition: color calc(.5s / var(--dawn-k, 1)) ease-in-out calc(.75s / var(--dawn-k, 1)); }
  html.js:not(.reduce-motion) .blk-stage-hero:has(> .v-layer[data-visual="hero-dawn"][data-visual-state$=",0"]) .stage-title { color: var(--paper); transition: none; }
  html.js:not(.reduce-motion) .blk-stage-hero:has(> .v-layer[data-visual="hero-dawn"]) .stage-title .ln > span { animation-delay: calc(.85s / var(--dawn-k, 1)); animation-duration: calc(1.2s / var(--dawn-k, 1)); }
  html.js:not(.reduce-motion) .blk-stage-hero:has(> .v-layer[data-visual="hero-dawn"]) .stage-title .ln:nth-child(2) > span { animation-delay: calc(.95s / var(--dawn-k, 1)); }
  html.js:not(.reduce-motion) .blk-stage-hero:has(> .v-layer[data-visual="hero-dawn"]) .stage-title .ln:last-child > span { animation-delay: calc(.95s / var(--dawn-k, 1)), calc(1.05s / var(--dawn-k, 1)); animation-duration: calc(1.2s / var(--dawn-k, 1)), calc(1.1s / var(--dawn-k, 1)); }
  html.js:not(.reduce-motion) .blk-stage-hero:has(> .v-layer[data-visual="hero-dawn"][data-visual-state$=",0"]) .stage-title .ln > span { animation-play-state: paused; }
}
/* 手機：主標就在日出點下方（約 0.3H），背後的天空 T≈0.42→1.02 s 就亮了 → 字色提早在 0.35 s 起 0.4 s 轉回 INK */
@media (prefers-reduced-motion: no-preference) and (max-width: 899px) {
  html.js:not(.reduce-motion) .blk-stage-hero:has(> .v-layer[data-visual="hero-dawn"]) .stage-title { transition: color calc(.4s / var(--dawn-k, 1)) ease-in-out calc(.35s / var(--dawn-k, 1)); }
}
/* 文字可讀性（02-base）：類別標籤＝實色膠囊、主標＝直接疊在場景的安靜區上（v25 calm 輪）、導言與按鈕＝實色面板 */
.stage-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: clamp(calc(20 * var(--vk)), 3.2vh, calc(40 * var(--vk))); padding: calc(var(--head-h) + calc(72 * var(--vk))) 0 clamp(calc(48 * var(--vk)), 9vh, calc(104 * var(--vk)));
  transform: translate3d(0, calc(var(--p) * calc(-72 * var(--vk))), 0); }
/* 捲動離場（v7-fix）：主標、類別標籤、主標底線和導言面板是同一組，一起隨區塊捲走、不各自淡出（見 styles/11-transition.css 末段）。
   轉場輪（BRIEF_v25_hero §1）起導言面板（實色 INK）不再淡出：面板一直不透明、隨區塊往上捲走，下接 Why VEDA KM 標題，
   中間不再有「只剩背景」的空白（見 styles/11-transition.css）。calm-fix 輪曾讓面板半透明而被 CORAL 光柱透過，現在全程不透明。 */
/* 列位明確指定（render-quality 修正）：第 1 列類別標籤、第 2 列主標、第 3 列導言面板。沒有類別標籤時第 1 列是空列（多一個 row-gap）。 */
.stage-grid > .eyebrow { grid-column: 1 / -1; grid-row: 1; justify-self: start; }
.stage-title { grid-column: 1 / -1; grid-row: 2; justify-self: start; max-width: 11em; color: var(--on); font-size: var(--t-hero); }
.stage-title { max-width: 11em; }
/* 同仁回饋 0929（H1）：主標整句（原標註框兩行）——第一句主標字級、第二句約一半字級（同一個 H1，字不變），依原文換行分行，不依 titleBreaks。
   整組寬度收在左側約 6 字寬（和原本兩行主標的範圍相同）：hero-dawn 的地球邊緣與日出在右下，主標不能伸過去（calm）。
   → 第一句在「，」處換行（永續轉型，／不只需要顧問），第二句在「接國際、」後換行；手機同樣依句讀換行。 */
.stage-title--tier { max-width: none; }
/* 主標的安靜區上緣外擴 48px（data-calm）：類別標籤膠囊不能落進去（calm 1903×930 捲動中取景的 tile）→ 標籤與主標之間多留 32px */
@media (min-width: 900px) {
  .stage-grid:has(> .stage-title--tier) > .eyebrow { margin-bottom: calc(32 * var(--vk)); }
  /* 主標多一行：整組貼底排（pin-sticky flex-end），下方留白 9vh → 5.5vh，又寬又矮的視窗（1366×657、1903×820、2560×1080）類別標籤不被頁首蓋到 */
  .stage-grid:has(> .stage-title--tier) { padding-top: calc(var(--head-h) + calc(44 * var(--vk))); padding-bottom: clamp(calc(32 * var(--vk)), 5.5vh, calc(72 * var(--vk))); }
  /* 桌機：主標字級 ×0.84；第一句在「，」處換行（6.6em 寬，止於畫面左半、地球邊緣與日出之外），第二句在「接國際、」後換行；開場釘選畫面一屏（fit） */
  .stage-title--tier { font-size: calc(var(--t-hero) * .84); }
}
.stage-title--tier .ln:first-child > span { max-width: 6.6em; }
.stage-title--tier .ln ~ .ln { margin-top: .28em; font-size: .5em; line-height: 1.32; letter-spacing: .01em; }
.stage-title--tier .ln ~ .ln > span { max-width: 13.6em; }
/* 主標整行實心 PAPER；第二行下方一道 KM BLUE 細線（6px），主標浮現後由左向右描出（v7-fix：不再隨捲動收回，和主標一起捲走） */
.stage-title .ln:last-child > span { background: linear-gradient(var(--accent), var(--accent)) 0 100% / max(0%, calc(var(--u) * 100%)) calc(6 * var(--vk)) no-repeat; padding-bottom: .1em; }
.stage-foot { grid-column: 1 / -1; grid-row: 3; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: center; row-gap: calc(20 * var(--vk)); padding: clamp(calc(20 * var(--vk)), 2.6vh, calc(32 * var(--vk))) clamp(calc(22 * var(--vk)), calc(2.4 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(36 * var(--vk))); border-radius: var(--r-card); background: var(--card-bg); color: var(--card-fg); }
/* 導言與按鈕放在實色 INK 面板（stage-foot）上；主標直接疊在場景上——v25 calm 輪起主標後方不再墊漸層帶，
   場景（visuals/presets/hero-dawn.js；舊 stage 已移到 visuals/candidates/）在主標範圍只留平順的 KM BLUE 天空（安靜區，visuals/README §7）。 */
/* final-a：選擇器加上區塊類別——03-components 的 `.has-visual:not([data-key="ink"]) .btn--ghost`（0,3,0）原本蓋過這三條，
   INK 面板上的「了解更多」變成灰底黑字（米白 55％ 疊在 INK 上），不是設計的深底米白字 */
.blk-stage-hero .stage-foot .btn--ghost { background: rgba(244,241,234,.08); color: var(--paper); box-shadow: inset 0 0 0 1.5px rgba(244,241,234,.55); }
.blk-stage-hero .stage-foot .btn--ghost .btn-ico { background: var(--paper); color: var(--ink); }
.blk-stage-hero .stage-foot .btn--ghost:hover { background: rgba(244,241,234,.16); }
.stage-lead { grid-column: 1 / span 6; color: var(--card-fg); max-width: 34em; }
.stage-side { grid-column: 8 / -1; display: grid; gap: calc(24 * var(--vk)); justify-items: start; }
.stage-sub { font-size: calc(16 * var(--vk)); line-height: 1.8; color: var(--card-fg-2); max-width: 28em; }
.scroll-cue { position: absolute; left: 50%; bottom: calc(18 * var(--vk)); width: calc(2 * var(--vk)); height: calc(44 * var(--vk)); border-radius: calc(2 * var(--vk)); background: var(--on-rule); overflow: hidden; opacity: calc(1 - var(--p) * 4); }
.scroll-cue i { position: absolute; inset: 0; background: linear-gradient(var(--on), transparent); animation: cue 2.8s var(--ease-io) infinite; }
@keyframes cue { 0% { transform: translateY(-100%); } 60%, 100% { transform: translateY(100%); } }
@media (max-width: 899px) {
  .blk-stage-hero .pin-sticky { position: relative; }
  .stage-grid { padding-top: calc(var(--head-h) + calc(72 * var(--vk))); }
  .stage-lead, .stage-side { grid-column: 1 / -1; }
  .stage-title { font-size: clamp(calc(34 * var(--vk)), calc(10.2 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(56 * var(--vk))); } /* 手機主標 ≤ 40（390 寬＝39.8） */
  /* 同仁回饋 0929：手機第一句一行排完（字級＝可用寬 ÷ 11 字，390 寬約 32px），第二句約 21px、在「接國際、」後換行 → 開場一屏 */
  .stage-title--tier { font-size: min(calc(36 * var(--vk)), calc((100vw - calc(36 * var(--vk))) / 11)); }
  .stage-title--tier .ln:first-child > span { max-width: none; }
  .stage-title--tier .ln ~ .ln { font-size: .66em; line-height: 1.4; }
  /* final-fix：手機開場不釘選，主標區不再隨進度上移 72 px（主標在 0.12 視窗高內就淡完，上移看不太出來）。主標和它背後的地球夜面、
     地平線保持固定距離（hero-dawn 手機構圖以主標上緣定位地平線，visuals/README §8.3） */
  .stage-grid { transform: none; }
  .scroll-cue { display: none; }
}

/* ---------- page-hero 內頁主視覺 ---------- */
.blk-page-hero { display: flex; flex-direction: column; }
.hero-grid { flex: 1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto 1fr auto auto; column-gap: var(--col-gap); row-gap: clamp(calc(18 * var(--vk)), 3vh, calc(40 * var(--vk))); padding: calc(var(--head-h) + calc(36 * var(--vk))) 0 clamp(calc(40 * var(--vk)), 7vh, calc(88 * var(--vk))); }
.hero--visual { min-height: 100svh; }
.hero--plain { min-height: clamp(calc(340 * var(--vk)), 52svh, calc(580 * var(--vk))); }
/* 滿版場景：主標、大字副題、宣言直接疊在場景上（v25 calm 輪拿掉主標後方的全出血漸層帶：各場景在文字範圍只留平順底色，
   visuals/README §7）；導言放在實色卡片（02-base --card-*）；麵包屑與類別標籤是實色膠囊。 */
.hero--visual .hero-main { justify-self: start; }
.hero--visual .hero-lead-wrap { justify-self: start; padding: clamp(calc(18 * var(--vk)), calc(2.2 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(28 * var(--vk))) clamp(calc(20 * var(--vk)), calc(2.4 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(32 * var(--vk))); border-radius: var(--r-md); background: var(--card-bg); color: var(--card-fg); }
.hero--visual .hero-lead-wrap::before { content: ""; display: block; width: calc(56 * var(--vk)); height: calc(3 * var(--vk)); margin-bottom: clamp(calc(10 * var(--vk)), 1.4vh, calc(16 * var(--vk))); border-radius: calc(3 * var(--vk)); background: var(--coral); }
.hero--visual .hero-lead-wrap .hero-lead { color: var(--card-fg); }
@media (min-width: 900px) {
  .hero--at-tl .hero-grid { grid-template-rows: auto auto auto 1fr; }
  .hero--at-tl .hero-main { grid-row: 2; grid-column: 1 / span 8; padding-top: clamp(calc(16 * var(--vk)), 4vh, calc(56 * var(--vk))); }
  .hero--at-tl .hero-lead-wrap { grid-row: 3; grid-column: 1 / span 6; }
  .hero--at-lc .hero-grid { grid-template-rows: auto 1fr auto auto 1fr; }
  .hero--at-lc .hero-main { grid-row: 3; grid-column: 1 / span 7; }
  .hero--at-lc .hero-lead-wrap { grid-row: 4; grid-column: 1 / span 5; }
  .hero--at-bc .hero-main { grid-column: 2 / span 10; justify-self: center; justify-items: center; text-align: center; }
  .hero--at-bc .hero-title { margin-inline: auto; }
  .hero--at-bc .hero-lead-wrap { grid-column: 3 / span 8; justify-self: center; text-align: center; }
  .hero--at-bc .hero-lead-wrap::before { margin-inline: auto; }
}
.hero-top { grid-column: 1 / -1; grid-row: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: calc(12 * var(--vk)) calc(24 * var(--vk)); }
.hero-main { grid-column: 1 / span 11; grid-row: 3; display: grid; gap: clamp(calc(14 * var(--vk)), 2.2vh, calc(28 * var(--vk))); }
.hero-kicker { font-family: var(--f-cond); font-size: clamp(calc(16 * var(--vk)), calc(1.5 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(22 * var(--vk))); font-weight: 500; letter-spacing: .28em; text-transform: uppercase; color: var(--on-accent, var(--blue)); }
.hero-title { max-width: 12em; }
.hero--visual .hero-title { font-size: var(--t-xl); }
.hero-statement { font-family: var(--f-display); font-size: var(--t-s); font-weight: 500; line-height: 1.42; letter-spacing: 0; max-width: 22em; opacity: .94; text-wrap: balance; word-break: keep-all; line-break: strict; overflow-wrap: anywhere; }
.hero-lead-wrap { grid-column: 6 / -1; grid-row: 4; padding-top: clamp(calc(16 * var(--vk)), 2.6vh, calc(32 * var(--vk))); background: linear-gradient(90deg, var(--accent, var(--blue)) 0 calc(72 * var(--vk)), var(--on-rule, var(--rule-inv)) calc(72 * var(--vk)) 100%) top / 100% calc(2 * var(--vk)) no-repeat; }
.hero-lead { max-width: 38em; }
.hero--visual .hero-lead { color: var(--on); }
.tone-paper.hero--plain .hero-lead-wrap, .tone-blue.hero--plain .hero-lead-wrap { background-image: linear-gradient(90deg, var(--ink) 0 calc(72 * var(--vk)), var(--rule-ink) calc(72 * var(--vk)) 100%); }
.tone-blue .hero-lead { color: var(--ink); }
.tone-deep .hero-lead { color: rgba(255,255,255,.9); }
.hero--plain.tone-paper { background: radial-gradient(70% 90% at 100% 0%, rgba(0,160,224,.12), transparent 60%), var(--paper); }
.hero--plain.tone-blue { background: radial-gradient(80% 100% at 90% 0%, rgba(255,255,255,.2), transparent 55%), var(--g-blue); background-color: var(--blue); }
.hero--plain.tone-ink { background: var(--g-ink); background-color: var(--ink); }
.hero--plain.tone-deep { background: radial-gradient(70% 100% at 100% 0%, rgba(0,160,224,.55), transparent 62%), var(--deep); }
/* 純排版主視覺的強調線（CORAL）：標題下方一道粗短線，屬排版元素、非示意視覺 */
.hero--plain .hero-main::after { content: ""; display: block; width: clamp(calc(96 * var(--vk)), calc(12 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(200 * var(--vk))); height: clamp(calc(8 * var(--vk)), calc(.8 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(12 * var(--vk))); margin-top: clamp(calc(6 * var(--vk)), 1.2vh, calc(14 * var(--vk))); border-radius: calc(12 * var(--vk)); background: var(--coral); box-shadow: 0 0 calc(32 * var(--vk)) rgba(255,90,60,.45); }
.hero--plain .hero-title { font-size: var(--t-xl); }
@media (max-width: 899px) {
  .hero-main, .hero-lead-wrap { grid-column: 1 / -1; }
  .hero-grid { padding-top: calc(var(--head-h) + calc(28 * var(--vk))); }
  .hero--visual .hero-title, .hero--plain .hero-title { font-size: clamp(calc(32 * var(--vk)), calc(9.6 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(48 * var(--vk))); } /* 手機主標 ≤ 40 */
}

/* ---------- manifesto 宣言：三種版式輪替（A ink／B split／C coral） ---------- */
.blk-manifesto { padding: var(--sec-y) 0; overflow: hidden; }
.mani-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: clamp(calc(24 * var(--vk)), calc(3 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(44 * var(--vk))); }
.mani-grid > * { grid-column: 1 / -1; }
.mani-body { max-width: 40em; font-size: var(--t-lead); line-height: 1.95; }
/* A｜INK 底、PAPER 大字，下方 CORAL 細線 3px × 80px */
.mani-v-ink { padding: var(--sec-y-l) 0; }
.mani--ink .mani-statement { grid-column: 1 / span 11; color: var(--paper); }
.mani-rule { display: block; grid-column: 1 / -1; width: calc(80 * var(--vk)); height: calc(3 * var(--vk)); border-radius: calc(3 * var(--vk)); background: var(--coral); box-shadow: 0 0 calc(18 * var(--vk)) rgba(255,90,60,.55); }
.mani--ink .mani-body { grid-column: 6 / -1; color: var(--fg-inv-2); }
/* B｜PAPER 雙欄：左 5 欄大字引文、右 7 欄說明 */
.mani--split { align-items: start; }
.mani--split > .eyebrow { grid-column: 1 / -1; }
.mani--split .mani-statement { grid-column: 1 / span 5; max-width: 12em; padding-top: clamp(calc(18 * var(--vk)), calc(2 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(28 * var(--vk))); background: linear-gradient(90deg, var(--blue) 0 calc(56 * var(--vk)), transparent calc(56 * var(--vk))) top / 100% calc(3 * var(--vk)) no-repeat; }
.mani--split .mani-panel { grid-column: 7 / -1; align-self: stretch; display: grid; align-content: center; gap: calc(20 * var(--vk)); min-height: 0; padding: clamp(calc(24 * var(--vk)), calc(2.8 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(44 * var(--vk))); border-radius: var(--r-card); background: radial-gradient(80% 90% at 100% 0%, rgba(255,255,255,.2), transparent 60%), radial-gradient(60% 80% at 0% 100%, rgba(17,17,17,.12), transparent 70%), var(--coral); color: var(--ink); box-shadow: 0 calc(12 * var(--vk)) calc(30 * var(--vk)) calc(-20 * var(--vk)) rgba(255,90,60,.7); }
.mani--split .mani-panel .mani-body { max-width: 34em; color: var(--ink); }
.mani-panel-rule { display: block; width: calc(56 * var(--vk)); height: calc(3 * var(--vk)); border-radius: calc(3 * var(--vk)); background: var(--ink); }
/* C｜CORAL 面板上的 INK 大字宣言（左 7 欄；沒有說明時 9 欄）＋右側 PAPER 上的說明 */
.mani--coral { align-items: center; }
.mani--coral .mani-coral-panel { grid-column: 1 / span 7; display: grid; gap: clamp(calc(16 * var(--vk)), calc(2 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(24 * var(--vk))); align-content: center; min-height: clamp(calc(200 * var(--vk)), calc(22 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(320 * var(--vk))); padding: clamp(calc(28 * var(--vk)), calc(3.2 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(52 * var(--vk))); border-radius: var(--r-card); background: radial-gradient(90% 80% at 100% 0%, rgba(255,255,255,.18), transparent 60%), var(--coral); color: var(--ink); }
.mani--coral.mani--solo .mani-coral-panel { grid-column: 1 / span 9; }
.mani--coral .mani-coral-panel .mani-statement { max-width: 14em; color: var(--ink); }
.mani--coral .mani-coral-panel .eyebrow { color: var(--ink); }
.mani--coral .mani-coral-panel .eyebrow::before { background: var(--ink); box-shadow: none; }
.mani--coral .mani-copy { grid-column: 9 / -1; display: grid; gap: clamp(calc(20 * var(--vk)), calc(2.4 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(32 * var(--vk))); }
.mani--coral .mani-body { color: var(--fg-2); }
@media (max-width: 899px) {
  .mani-grid > *, .mani--ink .mani-statement, .mani--ink .mani-body, .mani--split .mani-statement, .mani--split .mani-panel, .mani--coral .mani-coral-panel, .mani--coral.mani--solo .mani-coral-panel, .mani--coral .mani-copy { grid-column: 1 / -1; }
  .mani--coral .mani-coral-panel { min-height: 0; }
  .mani--split .mani-panel { min-height: 0; }
}

/* ---------- steps 三步驟（horizon） ---------- */
/* 場景章節：高度收到「標題＋三張步驟卡」為止（BRIEF_v25 D），不留空的場景帶。三張步驟卡各自是實色 PAPER 卡
   （上緣一道 KM BLUE／INK／CORAL 色條），不再共用一條跨全寬的柔邊底襯。 */
.blk-steps { display: flex; }
.steps-grid { display: grid; grid-template-rows: auto auto auto; gap: clamp(calc(28 * var(--vk)), 5vh, calc(56 * var(--vk))); padding: clamp(calc(64 * var(--vk)), 10vh, calc(120 * var(--vk))) 0 clamp(calc(48 * var(--vk)), 7vh, calc(88 * var(--vk))); }
.steps-head { display: grid; gap: calc(20 * var(--vk)); justify-self: start; }
.steps-head h2 { max-width: 9em; }
.steps-list { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: var(--col-gap); counter-reset: s; }
.step { position: relative; display: grid; gap: calc(12 * var(--vk)); align-content: start; padding: clamp(calc(22 * var(--vk)), calc(2.2 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(30 * var(--vk))) clamp(calc(20 * var(--vk)), calc(2 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(28 * var(--vk))) clamp(calc(20 * var(--vk)), calc(2 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(26 * var(--vk))); border-radius: var(--r-md); background: var(--paper); color: var(--ink); overflow: hidden; }
.step::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(4 * var(--vk)); background: var(--blue); transform-origin: 0 50%; }
html.js .step[data-reveal]::before { transform: scaleX(0); transition: transform var(--d-5) var(--ease-film) calc(var(--i, 0) * 220ms + 200ms); }
html.js .step[data-reveal].is-in::before { transform: none; }
.step:nth-child(2)::before { background: var(--ink); }
.step:nth-child(3)::before { background: var(--coral); }
.step-n { font-family: var(--f-cond); font-size: calc(16 * var(--vk)); font-weight: 600; letter-spacing: .2em; color: var(--fg-2); }
.step-t { font-family: var(--f-display); font-size: clamp(calc(22 * var(--vk)), calc(2.1 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(32 * var(--vk))); font-weight: 800; line-height: 1.2; letter-spacing: -.01em; }
.steps-body { max-width: 46em; justify-self: end; font-size: calc(16 * var(--vk)); line-height: 1.9; padding: calc(20 * var(--vk)) calc(24 * var(--vk)); border-radius: var(--r-md); background: var(--paper); color: var(--fg-2); }
@media (max-width: 699px) { .steps-list { grid-template-columns: 1fr; gap: calc(14 * var(--vk)); } .steps-body { justify-self: start; } }

/* ---------- features-pinned 四大特色（orbit）：v7 重新設計，樣式全部在 styles/15-features.css ---------- */

/* ---------- stats 數字（KM BLUE 實底，編輯式大數字列） ---------- */
.blk-stats { padding: var(--sec-y) 0; overflow: hidden; }
.blk-stats.tone-blue { background: radial-gradient(60% 80% at 100% 0%, rgba(255,255,255,.2), transparent 60%), radial-gradient(50% 70% at 0% 100%, rgba(0,119,158,.5), transparent 70%), var(--blue); }
.stats-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: clamp(calc(28 * var(--vk)), 4.4vh, calc(56 * var(--vk))); }
.stats-head { grid-column: 1 / -1; }
.stats-title { max-width: 16em; }
.stats-list { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); grid-auto-flow: column; column-gap: var(--col-gap); }
.stat { position: relative; padding: clamp(calc(20 * var(--vk)), 2.8vh, calc(32 * var(--vk))) 0 0; background: linear-gradient(90deg, var(--ink) 0 calc(72 * var(--vk)), rgba(17,17,17,.2) calc(72 * var(--vk)) 100%) top / 100% calc(2 * var(--vk)) no-repeat; }
.stat-p { display: flex; flex-direction: column; align-items: flex-start; gap: calc(14 * var(--vk)); font-size: var(--t-lead); font-weight: 600; line-height: 1.6; }
.stat-p .num { order: -1; font-family: var(--f-cond), var(--f-display); font-size: var(--t-num); font-weight: 800; line-height: 1; letter-spacing: -.035em; white-space: nowrap; }
.stat-t { max-width: 22em; }
.tone-deep .stat { background-image: linear-gradient(90deg, var(--lime) 0 calc(72 * var(--vk)), rgba(255,255,255,.2) calc(72 * var(--vk)) 100%); }
@media (max-width: 899px) {
  .stats-list { grid-template-columns: 1fr; grid-auto-flow: row; row-gap: calc(28 * var(--vk)); }
  .stat-p .num { font-size: clamp(calc(48 * var(--vk)), calc(14 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(72 * var(--vk))); }
}

/* ---------- service-rail 服務帶（釘選橫向） ---------- */
.blk-service-rail { background: transparent; padding: 0; } /* 露出 body 的 PAPER，讓卡片內的場景透得出來 */
.blk-service-rail .pin-sticky { display: flex; flex-direction: column; justify-content: center; gap: clamp(calc(20 * var(--vk)), 3.4vh, calc(40 * var(--vk))); padding: calc(var(--head-h) + calc(32 * var(--vk))) 0 clamp(calc(24 * var(--vk)), 4vh, calc(48 * var(--vk))); }
.rail-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; gap: calc(20 * var(--vk)) var(--col-gap); }
.rail-head > div { display: grid; gap: calc(18 * var(--vk)); }
.rail-lead { font-family: var(--f-display); font-size: var(--t-s); font-weight: 700; line-height: 1.3; color: var(--deep); justify-self: end; text-align: right; }
.rail-meter { grid-column: 1 / -1; height: calc(3 * var(--vk)); border-radius: calc(3 * var(--vk)); background: rgba(17,17,17,.08); overflow: hidden; }
.rail-meter i { display: block; height: 100%; background: var(--g-blue); transform-origin: 0 50%; transform: scaleX(var(--p)); }
.rail-viewport { overflow: visible; }
.rail-track { display: flex; gap: clamp(calc(16 * var(--vk)), calc(1.6 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(28 * var(--vk))); padding-inline: max(var(--gut), (100vw - var(--sbw, 0px) - var(--max)) / 2); will-change: transform; transform: translate3d(var(--tx, 0px), 0, 0); }
/* 卡片隨捲動橫移 → 小半徑陰影（BRIEF_v25 C2）。卡片內部（影像窗＋文字區、序號徽章、標題、說明、項目膠囊、了解更多）
   與卡片高度都在 styles/12-cards.css（v25 cards 輪）；final-a 收尾輪刪掉這裡已被它覆蓋的舊規則，只留外框與動態。 */
.rail-card { position: relative; flex: none; width: clamp(calc(300 * var(--vk)), calc(30 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(480 * var(--vk))); border-radius: var(--r-card); overflow: hidden; isolation: isolate; box-shadow: var(--sh-float); }
.rail-more .i-arrow { transition: transform var(--d-2) var(--ease-spring); }
.rail-link:hover .rail-more .i-arrow { transform: translateX(calc(4 * var(--vk))) rotate(-8deg); }
@media (max-width: 899px) {
  .blk-service-rail { padding: var(--sec-y) 0; }
  .blk-service-rail .pin-sticky { padding: 0; }
  .rail-head { grid-template-columns: 1fr; }
  .rail-lead { justify-self: start; text-align: left; }
  .rail-meter { display: none; }
  .rail-track { flex-direction: column; padding-inline: var(--gut); transform: none !important; }
}

/* ---------- service-index 服務索引：編輯式索引列（全寬、1px INK 12% 細線、左側大編號；無卡片陰影） ---------- */
.blk-service-index { padding: var(--sec-y) 0; }
.sidx-head { display: grid; gap: calc(16 * var(--vk)); max-width: 46em; margin-bottom: clamp(calc(24 * var(--vk)), calc(3 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(40 * var(--vk))); }
.sidx { display: grid; border-bottom: 1px solid var(--rule-ink); }
.sidx-row { position: relative; display: grid; grid-template-columns: minmax(calc(72 * var(--vk)), 1fr) minmax(0, 5fr) minmax(0, 4fr) auto; gap: calc(12 * var(--vk)) var(--col-gap); align-items: start; padding: clamp(calc(18 * var(--vk)), 2.4vh, calc(30 * var(--vk))) 0; border-top: 1px solid var(--rule-ink); transition: background-color var(--d-2) var(--ease-out); }
.sidx-row::before { content: ""; position: absolute; left: 0; top: -1px; width: 0; height: calc(3 * var(--vk)); background: var(--blue); transition: width var(--d-3) var(--ease-film); }
.sidx-row:hover::before, .sidx-row:focus-within::before { width: calc(120 * var(--vk)); }
.sidx-n { font-family: var(--f-cond); font-size: clamp(calc(40 * var(--vk)), calc(4 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(64 * var(--vk))); font-weight: 300; line-height: .86; letter-spacing: -.03em; color: var(--ink); }
.sidx-title { font-family: var(--f-display); font-size: clamp(calc(21 * var(--vk)), calc(1.9 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(30 * var(--vk))); font-weight: 800; line-height: 1.25; letter-spacing: -.01em; text-wrap: balance; word-break: keep-all; overflow-wrap: anywhere; }
.sidx-title a::after { content: ""; position: absolute; inset: 0; }
.sidx-desc { margin-top: calc(8 * var(--vk)); color: var(--fg-2); font-size: calc(16 * var(--vk)); line-height: 1.7; }
.sidx-items { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: calc(6 * var(--vk)) calc(18 * var(--vk)); padding-top: calc(10 * var(--vk)); }
.sidx-items li { position: relative; padding-left: calc(14 * var(--vk)); font-size: calc(14 * var(--vk)); font-weight: 600; color: var(--ink); }
.sidx-items li::before { content: ""; position: absolute; left: 0; top: .62em; width: calc(6 * var(--vk)); height: calc(6 * var(--vk)); border-radius: 50%; background: var(--blue); }
.sidx-items a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--blue); text-decoration-thickness: calc(2 * var(--vk)); text-underline-offset: calc(4 * var(--vk)); }
.sidx-go { align-self: center; display: inline-flex; align-items: center; gap: calc(10 * var(--vk)); font-weight: 650; font-size: calc(14 * var(--vk)); color: var(--ink); }
.sidx-go .i-arrow { width: calc(28 * var(--vk)); height: calc(28 * var(--vk)); transition: transform var(--d-2) var(--ease-spring); }
.sidx-row:hover .sidx-go .i-arrow { transform: translateX(calc(6 * var(--vk))); }
.sidx--compact .sidx-row { grid-template-columns: minmax(calc(56 * var(--vk)), 1fr) minmax(0, 10fr) auto; align-items: center; padding: calc(16 * var(--vk)) 0; }
.sidx--compact .sidx-n { font-size: clamp(calc(28 * var(--vk)), calc(2.4 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(40 * var(--vk))); }
.sidx--compact .sidx-title { font-size: clamp(calc(19 * var(--vk)), calc(1.6 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(24 * var(--vk))); }
.tone-ink .sidx, .tone-ink .sidx-row { border-color: var(--rule-inv); }
.tone-ink .sidx-n, .tone-ink .sidx-go, .tone-ink .sidx-items li, .tone-ink .sidx-items a { color: var(--paper); }
@media (max-width: 899px) {
  .sidx-row { grid-template-columns: 1fr; gap: calc(12 * var(--vk)); }
  .sidx--compact .sidx-row { grid-template-columns: auto 1fr; }
  .sidx--compact .sidx-go { display: none; }
  .sidx-go { justify-self: start; }
}

/* ---------- service-items 服務項目（含輔導方式） ---------- */
.blk-service-items { padding: var(--sec-y) 0; }
.svc-items { display: grid; gap: clamp(calc(48 * var(--vk)), 8vh, calc(104 * var(--vk))); counter-reset: svc; }
.svc-art { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: calc(24 * var(--vk)) var(--col-gap); scroll-margin-top: calc(var(--head-h) + calc(40 * var(--vk))); }
.svc-art-head { position: sticky; top: calc(var(--head-h) + calc(40 * var(--vk))); align-self: start; display: grid; gap: calc(16 * var(--vk)); }
.svc-n { font-family: var(--f-cond); font-size: clamp(calc(44 * var(--vk)), calc(4.4 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(72 * var(--vk))); font-weight: 200; line-height: .86; letter-spacing: -.04em; color: var(--deep); }
.svc-name { font-family: var(--f-display); font-size: var(--t-m); font-weight: 800; line-height: 1.16; letter-spacing: -.02em; }
.svc-art-body { display: grid; gap: calc(20 * var(--vk)); align-content: start; }
.svc-desc { font-size: var(--t-lead); line-height: 1.85; }
.svc-method-box { position: relative; padding: clamp(calc(22 * var(--vk)), calc(2.4 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(40 * var(--vk))); border-radius: var(--r-card); background: radial-gradient(80% 120% at 100% 0%, rgba(255,255,255,.22), transparent 58%), var(--g-blue); color: var(--ink); box-shadow: 0 1px 1px rgba(0,119,158,.1), 0 calc(24 * var(--vk)) calc(56 * var(--vk)) calc(-28 * var(--vk)) rgba(0,119,158,.7); overflow: hidden; }
.svc-method-label { font-family: var(--f-body); font-size: calc(13 * var(--vk)); font-weight: 700; letter-spacing: .24em; color: var(--ink); margin-bottom: calc(18 * var(--vk)); display: flex; align-items: center; gap: calc(10 * var(--vk)); }
.svc-method-label::before { content: ""; width: calc(10 * var(--vk)); height: calc(10 * var(--vk)); border-radius: calc(2 * var(--vk)); background: var(--ink); }
.svc-methods { display: grid; counter-reset: m; }
.svc-methods li { counter-increment: m; display: grid; grid-template-columns: calc(48 * var(--vk)) 1fr; align-items: baseline; padding: calc(11 * var(--vk)) 0; font-size: calc(16 * var(--vk)); font-weight: 600; line-height: 1.6; background: linear-gradient(90deg, rgba(17,17,17,.22), rgba(17,17,17,.04)) bottom / 100% 1px no-repeat; }
.svc-methods li:last-child { background: none; padding-bottom: 0; }
.svc-methods li::before { content: counter(m, decimal-leading-zero); font-family: var(--f-cond); font-size: calc(16 * var(--vk)); font-weight: 700; letter-spacing: .1em; color: var(--ink); }
/* 單一項目頁（名稱＝H1）：不重複項目標頭，說明與輔導方式置中成一欄 */
.svc-items--single .svc-art { grid-template-columns: minmax(0, 1fr); max-width: calc(980 * var(--vk)); margin-inline: auto; }
.svc-items--single .svc-method-label { font-size: calc(14 * var(--vk)); }
.svc-pend { margin-top: clamp(calc(40 * var(--vk)), 6vh, calc(72 * var(--vk))); }
@media (max-width: 899px) {
  .svc-art { grid-template-columns: 1fr; }
  .svc-art-head { position: static; }
}
@media (max-width: 599px) {
  .svc-art { gap: calc(14 * var(--vk)); }
  .svc-art-head { grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: calc(12 * var(--vk)); }
  .svc-n { font-size: calc(36 * var(--vk)); }
  .svc-art-body { gap: calc(14 * var(--vk)); }
  .svc-desc { font-size: calc(16 * var(--vk)); line-height: 1.7; }
  .svc-method-box { padding: calc(16 * var(--vk)) calc(18 * var(--vk)); }
  .svc-method-label { margin-bottom: calc(6 * var(--vk)); }
  .svc-methods li { grid-template-columns: calc(34 * var(--vk)) 1fr; padding: calc(5 * var(--vk)) 0; line-height: 1.5; }
}

/* ---------- industry-constellation 產業星座 ---------- */
.blk-industry-constellation { padding: var(--sec-y) 0; display: flex; flex-direction: column; }
.const-head { display: grid; gap: calc(16 * var(--vk)); }
.const-head .display-m { max-width: 12em; }
.const-head .lead { color: var(--on-2); }
.const-field { position: relative; flex: 1; width: min(100% - 2 * var(--gut), var(--max)); margin: clamp(calc(24 * var(--vk)), 4vh, calc(48 * var(--vk))) auto 0; min-height: min(calc(440 * var(--vk)), 56svh); }
.const-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.const-lines polyline { fill: none; stroke: color-mix(in srgb, var(--on) 36%, transparent); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.4s var(--ease-out); }
.const-field.is-in .const-lines polyline, html:not(.js) .const-lines polyline { stroke-dashoffset: 0; }
.const-stars { position: absolute; inset: 0; }
/* 星點位置與 constellation 場景的主星對齊：場景以 field.top + y%·field.height − 70px 放主星（field 上下緣由 runtime 寫入 uState.z/w） */
.star { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1% - calc(70 * var(--vk))); width: 0; height: 0; }
.const-lines { transform: translateY(calc(-70 * var(--vk))); }
/* 星點：亮度 0.5–1.0 不等（--b）；滑過／聚焦時 PAPER 12% 圓光＋四芒繞射 */
.star-dot { position: absolute; left: 0; top: 0; width: calc(calc(4 * var(--vk)) + var(--b, 1) * calc(6 * var(--vk))); height: calc(calc(4 * var(--vk)) + var(--b, 1) * calc(6 * var(--vk))); border-radius: 50%; transform: translate(-50%, -50%); background: rgba(244,241,234, var(--b, 1)); box-shadow: 0 0 calc(var(--b, 1) * calc(22 * var(--vk))) calc(var(--b, 1) * calc(3 * var(--vk))) rgba(0,160,224, calc(var(--b, 1) * .7)); transition: box-shadow var(--d-2); }
.star-dot::before { content: ""; position: absolute; left: 50%; top: 50%; width: calc(72 * var(--vk)); height: calc(72 * var(--vk)); margin: calc(-36 * var(--vk)) 0 0 calc(-36 * var(--vk)); border-radius: 50%; background: radial-gradient(closest-side, rgba(244,241,234,.12), rgba(244,241,234,0)); opacity: 0; transition: opacity var(--d-2); }
.star-dot::after { content: ""; position: absolute; left: 50%; top: 50%; width: calc(88 * var(--vk)); height: calc(88 * var(--vk)); margin: calc(-44 * var(--vk)) 0 0 calc(-44 * var(--vk)); opacity: 0; transform: scale(.6); transition: opacity var(--d-2), transform var(--d-3) var(--ease-film);
  background: linear-gradient(90deg, transparent, rgba(244,241,234,.75) 50%, transparent) center / 100% 1px no-repeat, linear-gradient(0deg, transparent, rgba(244,241,234,.75) 50%, transparent) center / 1px 100% no-repeat; }
.star:hover .star-dot::before, .star:hover .star-dot::after, .star.is-lit .star-dot::before, .star.is-lit .star-dot::after { opacity: 1; transform: none; }
.star-n { position: absolute; left: calc(14 * var(--vk)); top: calc(-22 * var(--vk)); font-family: var(--f-cond); font-size: calc(12 * var(--vk)); font-weight: 600; letter-spacing: .2em; color: var(--on-2); white-space: nowrap; transition: color var(--d-2); }
.star.is-lit .star-n, .star:hover .star-n { color: var(--on); }
.has-visual .star-n { padding: 1px calc(7 * var(--vk)); border-radius: var(--r-pill); background: rgba(var(--wash), var(--wash-a)); } /* 序號小底襯：場景上 ≥ 4.5:1 */
.has-visual .star-card { padding: calc(6 * var(--vk)) calc(12 * var(--vk)) calc(6 * var(--vk)) calc(8 * var(--vk)); border-radius: calc(14 * var(--vk)); background: rgba(var(--wash), var(--wash-a)); }
.has-visual .star-card .star-n { padding: 0; background: none; }
.star-card { position: absolute; left: calc(16 * var(--vk)); top: calc(-12 * var(--vk)); display: grid; grid-template-columns: calc(24 * var(--vk)) auto; align-items: center; gap: calc(2 * var(--vk)) calc(10 * var(--vk)); width: max-content; max-width: 12em; }
.star-card .star-n { position: static; grid-column: 2; }
.star-name { grid-column: 2; font-size: calc(15 * var(--vk)); font-weight: 700; letter-spacing: .04em; line-height: 1.35; }
.star-card .ind-icon { grid-row: 1 / span 2; width: calc(24 * var(--vk)); height: calc(24 * var(--vk)); padding: 0; color: var(--on); }
.star-card .ind-icon .k { stroke: var(--on); }
/* 主視覺模式（第一個區塊）：100svh，星圖在上半部、標題壓在左下 */
.const--hero { min-height: 100svh; padding: 0; } /* 主視覺例外：滿版 */
.const--hero .const-field { position: absolute; left: 50%; transform: translateX(-50%); top: calc(var(--head-h) + calc(48 * var(--vk))); bottom: 44%; margin: 0; min-height: 0; flex: none; }
.const--hero .const-copy { position: relative; }
@media (max-width: 899px) {
  .blk-industry-constellation:not(.const--hero) { min-height: 0; }
  .blk-industry-constellation:not(.const--hero) .const-field { min-height: 0; }
  .blk-industry-constellation:not(.const--hero) .const-lines { display: none; }
  .blk-industry-constellation:not(.const--hero) .const-stars { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(32 * var(--vk)) calc(16 * var(--vk)); }
  .blk-industry-constellation:not(.const--hero) .star { position: static; width: auto; height: auto; }
  .blk-industry-constellation:not(.const--hero) .star-dot { display: none; }
  .blk-industry-constellation:not(.const--hero) .star-card { position: static; }
  .const--hero .const-field { display: none; } /* 手機：場景自己把十顆主星鋪成星空氛圍；名稱與圖示在下方 industry-row */
}

/* ---------- industry-row 產業圖示列（星座圖例） ---------- */
.blk-industry-row { padding: clamp(calc(40 * var(--vk)), 6vh, calc(80 * var(--vk))) 0; }
.ind-wrap { display: grid; gap: calc(24 * var(--vk)); }
.ind-row { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); border-top: 1px solid var(--rule-ink); border-bottom: 1px solid var(--rule-ink); }
.ind { position: relative; display: grid; justify-items: start; align-content: start; gap: calc(8 * var(--vk)); padding: calc(20 * var(--vk)) calc(12 * var(--vk)) calc(22 * var(--vk)) 0; cursor: default; border-radius: 0; }
.ind + .ind { padding-left: calc(14 * var(--vk)); border-left: 1px solid var(--rule-ink); }
.ind .ind-icon { width: calc(36 * var(--vk)); height: calc(36 * var(--vk)); padding: 0; background: none; box-shadow: none; overflow: visible; color: var(--ink); }
.ind-n { font-family: var(--f-cond); font-size: calc(13 * var(--vk)); font-weight: 600; letter-spacing: .18em; color: var(--fg-2); }
.ind-name { font-size: calc(15 * var(--vk)); font-weight: 700; line-height: 1.4; letter-spacing: .02em; word-break: keep-all; overflow-wrap: anywhere; }
.ind::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: calc(3 * var(--vk)); background: var(--blue); transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--d-3) var(--ease-film); }
.ind:hover::after, .ind:focus-visible::after, .ind.is-lit::after { transform: none; }
.ind-icon .k, .ind-icon .b { fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; vector-effect: non-scaling-stroke; }
.ind-icon .k { stroke: currentColor; }
.ind-icon .b { stroke: var(--blue); }
html.js [data-draw]:not(.is-in) .ind-icon :is(.k, .b), html.js .const-field:not(.is-in) .ind-icon :is(.k, .b) { stroke-dashoffset: 1; }
/* v7-fix（手機審查：正常捲動速度下看到畫到一半的圖示，4 秒才畫完）：描線 1.6s → 0.6s、錯開 90 → 40ms */
[data-draw] .ind-icon :is(.k, .b), .const-field .ind-icon :is(.k, .b) { transition: stroke-dashoffset .6s var(--ease-out) calc(var(--i) * 40ms + 60ms); }
@media (max-width: 1199px) { .ind-row { grid-template-columns: repeat(5, minmax(0, 1fr)); } .ind:nth-child(5n + 1) { padding-left: 0; border-left: 0; } .ind:nth-child(n + 6) { border-top: 1px solid var(--rule-ink); } }
@media (max-width: 599px) { .ind { padding-top: calc(14 * var(--vk)); padding-bottom: calc(16 * var(--vk)); gap: calc(6 * var(--vk)); } .ind .ind-icon { width: calc(30 * var(--vk)); height: calc(30 * var(--vk)); } .ind-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ind:nth-child(n) { padding-left: calc(14 * var(--vk)); border-left: 1px solid var(--rule-ink); border-top: 0; } .ind:nth-child(2n + 1) { padding-left: 0; border-left: 0; } .ind:nth-child(n + 3) { border-top: 1px solid var(--rule-ink); } }

/* ---------- longform 長文 ---------- */
.blk-longform { padding: var(--sec-y) 0; }
.lf { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: calc(28 * var(--vk)); }
.lf-head { grid-column: 1 / span 4; display: grid; gap: calc(14 * var(--vk)); align-content: start; }
.lf--split .lf-head { position: sticky; top: calc(var(--head-h) + calc(40 * var(--vk))); align-self: start; }
.lf-body { grid-column: 6 / -1; display: grid; gap: calc(24 * var(--vk)); }
.lf--split:not(:has(.lf-head)) .lf-body { grid-column: 3 / span 8; }
.lf--single .lf-head { grid-column: 1 / -1; }
.lf--single .lf-body { grid-column: 1 / span 8; }
.lf--grid .lf-head { grid-column: 1 / -1; }
.lf--grid .lf-body { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--col-gap); }
/* 導言 ≤ 21（BRIEF_v25 D） */
.lf-lead { font-family: var(--f-display); font-size: clamp(calc(18 * var(--vk)), calc(1.45 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(21 * var(--vk))); font-weight: 600; line-height: 1.8; letter-spacing: .01em; line-break: strict; }
.lf-p { font-size: var(--t-body); line-height: 1.9; color: var(--fg-2); }
.tone-ink .lf-p, .tone-deep .lf-p { color: var(--fg-inv-2); }
.tone-blue .lf-p { color: var(--ink); }
.lf-quote { position: relative; padding: calc(6 * var(--vk)) 0 calc(6 * var(--vk)) clamp(calc(20 * var(--vk)), calc(2.4 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(36 * var(--vk))); }
.lf-quote::before { content: ""; position: absolute; left: 0; top: calc(10 * var(--vk)); bottom: calc(10 * var(--vk)); width: calc(4 * var(--vk)); border-radius: calc(4 * var(--vk)); background: var(--coral); box-shadow: 0 0 calc(20 * var(--vk)) rgba(255,90,60,.5); }
.lf-quote p { font-family: var(--f-display); font-size: var(--t-s); font-weight: 700; line-height: 1.45; letter-spacing: -.005em; text-wrap: balance; word-break: keep-all; line-break: strict; overflow-wrap: anywhere; }
.lf--grid .lf-quote { grid-column: 1 / -1; margin-top: calc(24 * var(--vk)); }
.lf-lines { padding: clamp(calc(22 * var(--vk)), calc(2.4 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(36 * var(--vk))); border-radius: var(--r-card); background: var(--paper); box-shadow: var(--sh-1); }
.tone-paper .lf-lines { background: var(--paper-2); }
/* grid 欄位＝編輯式索引列：全寬雙欄、1px INK 12% 細線分隔、左側大編號（CSS 計數，不是文字），無卡片底與陰影 */
.lf--grid .lf-body { counter-reset: lfn; row-gap: 0; }
.lf--grid .lf-lines { counter-increment: lfn; position: relative; display: grid; align-content: start; padding: clamp(calc(20 * var(--vk)), 2.6vh, calc(32 * var(--vk))) 0 clamp(calc(20 * var(--vk)), 2.6vh, calc(32 * var(--vk))) clamp(calc(64 * var(--vk)), calc(6 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(96 * var(--vk))); border-radius: 0; background: none; box-shadow: none; border-top: 1px solid var(--rule-ink); }
.lf--grid .lf-lines::before { content: counter(lfn, decimal-leading-zero); position: absolute; left: 0; top: clamp(calc(16 * var(--vk)), 2.2vh, calc(26 * var(--vk))); font-family: var(--f-cond); font-size: clamp(calc(36 * var(--vk)), calc(3.4 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(56 * var(--vk))); font-weight: 300; line-height: 1; letter-spacing: -.03em; color: var(--ink); }
.lf--grid .lines-head { font-size: clamp(calc(19 * var(--vk)), calc(1.6 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(24 * var(--vk))); }
.lines-head { font-family: var(--f-display); font-size: clamp(calc(19 * var(--vk)), calc(1.6 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(24 * var(--vk))); font-weight: 800; line-height: 1.35; margin-bottom: calc(14 * var(--vk)); }
.lf-lines p.lines-head { font-size: clamp(calc(19 * var(--vk)), calc(1.6 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(24 * var(--vk))); color: inherit; }
.lines-list { display: grid; gap: calc(8 * var(--vk)); }
.lines-list li { position: relative; padding-left: calc(22 * var(--vk)); font-size: calc(16 * var(--vk)); line-height: 1.7; color: var(--fg-2); }
.lines-list li::before { content: ""; position: absolute; left: 0; top: .72em; width: calc(8 * var(--vk)); height: calc(8 * var(--vk)); border-radius: calc(2 * var(--vk)); background: var(--blue); }
.lf-lines p { font-size: calc(16 * var(--vk)); color: var(--fg-2); }
.blk-longform.tone-blue { background: radial-gradient(70% 90% at 0% 0%, rgba(255,255,255,.2), transparent 60%), var(--g-blue); }
.blk-longform.tone-blue .lf-lead { font-weight: 700; }
@media (max-width: 899px) {
  .lf-head, .lf-body, .lf--split:not(:has(.lf-head)) .lf-body, .lf--single .lf-body { grid-column: 1 / -1; }
  .lf--split .lf-head { position: static; }
  .lf--grid .lf-body { grid-template-columns: 1fr; }
}

/* ---------- report-feature 臨界點報告（INK 底；CORAL 只給超大字與色條） ---------- */
.blk-report-feature { padding: var(--sec-y) 0; overflow: hidden; }
.blk-report-feature.tone-ink { background: radial-gradient(60% 80% at 100% 100%, rgba(255,90,60,.14), transparent 70%), var(--ink); }
.blk-report-feature.tone-paper { background: radial-gradient(60% 80% at 100% 100%, rgba(255,90,60,.1), transparent 70%), var(--paper); }
.tone-paper .rep-en { color: var(--ink); }
.tone-paper .rep-short { color: var(--ink); } /* CORAL 字在 PAPER 上對比不足 3:1 → 字用 INK，CORAL 留給色條與暖光 */
.tone-paper .rep-cover::before { width: clamp(calc(10 * var(--vk)), calc(1 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(16 * var(--vk))); }
.tone-paper :is(.rep-sub, .rep-body) { color: var(--fg-2); }
.rep-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: calc(40 * var(--vk)) var(--col-gap); align-items: end; }
.rep-cover { position: relative; display: grid; gap: calc(8 * var(--vk)); padding-left: clamp(calc(20 * var(--vk)), calc(2 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(32 * var(--vk))); }
.rep-cover::before { content: ""; position: absolute; left: 0; top: .6em; bottom: .6em; width: clamp(calc(6 * var(--vk)), calc(.6 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(10 * var(--vk))); border-radius: calc(8 * var(--vk)); background: var(--coral); box-shadow: 0 0 calc(28 * var(--vk)) rgba(255,90,60,.55); }
.rep-short { font-family: var(--f-display); font-size: var(--t-deco); font-weight: 900; line-height: .92; letter-spacing: -.04em; margin-left: -.04em; color: var(--coral); }
.rep-en { font-family: var(--f-cond); font-size: clamp(calc(17 * var(--vk)), calc(1.9 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(28 * var(--vk))); font-weight: 300; letter-spacing: .3em; text-transform: uppercase; color: var(--paper); }
.rep-sub { font-size: calc(17 * var(--vk)); font-weight: 600; letter-spacing: .12em; color: var(--fg-inv-2); }
.rep-copy { display: grid; gap: calc(24 * var(--vk)); justify-items: start; padding-bottom: calc(12 * var(--vk)); }
.rep-body { font-size: var(--t-body); line-height: 1.9; color: var(--fg-inv-2); }
/* 同仁回饋 0929（H3）：兩行標題——第一行標題字級，第二行（延伸句）次一級、一般字重，兩行之間 .5em */
.rep-h--two { max-width: none; }
.rep-h--two .rep-hl, .rep-h--two .rep-hs { display: block; }
.rep-h--two .rep-hs { margin-top: .45em; font-size: .72em; font-weight: 700; line-height: 1.6; letter-spacing: .01em; }
@media (max-width: 899px) { .rep-grid { grid-template-columns: 1fr; row-gap: calc(28 * var(--vk)); } .rep-short { font-size: clamp(calc(64 * var(--vk)), calc(20 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(96 * var(--vk))); } }

/* ---------- cta-band 行動邀請帶（只在首頁、服務總覽、關於我們）：大字邀請句＋LIME 膠囊（高 64px、寬 auto、最大 360px） ---------- */
.blk-cta-band { padding: var(--sec-y) 0; overflow: hidden; }
.blk-cta-band.tone-blue { background: radial-gradient(70% 120% at 100% 0%, rgba(255,255,255,.24), transparent 55%), radial-gradient(60% 100% at 0% 100%, rgba(0,119,158,.7), transparent 70%), var(--blue); }
.blk-cta-band.tone-ink { background: radial-gradient(60% 100% at 90% 10%, rgba(0,160,224,.28), transparent 65%), var(--ink); }
.cta-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: clamp(calc(24 * var(--vk)), 3.6vh, calc(40 * var(--vk))); align-items: end; }
.cta-title { grid-column: 1 / span 9; max-width: 16em; font-size: var(--t-l); }
.cta-body { grid-column: 1 / span 7; font-size: calc(17 * var(--vk)); line-height: 1.9; max-width: 40em; }
.cta-act { grid-column: 1 / -1; }
.cta-mega {
  position: relative; display: inline-flex; align-items: center; justify-content: space-between; gap: calc(20 * var(--vk));
  height: calc(64 * var(--vk)); width: auto; max-width: calc(360 * var(--vk)); padding: 0 calc(8 * var(--vk)) 0 calc(30 * var(--vk)); border-radius: var(--r-pill);
  background: var(--lime); color: var(--ink); box-shadow: var(--glow-lime), 0 calc(20 * var(--vk)) calc(50 * var(--vk)) calc(-24 * var(--vk)) rgba(17,17,17,.45);
  font-family: var(--f-display); font-size: calc(20 * var(--vk)); font-weight: 800; letter-spacing: .02em; line-height: 1; white-space: nowrap;
  transition: transform var(--d-2) var(--ease-out), box-shadow var(--d-2) var(--ease-out), background-color var(--d-2);
  text-shadow: none;
}
.cta-mega-ico { flex: none; display: grid; place-items: center; width: calc(48 * var(--vk)); height: calc(48 * var(--vk)); border-radius: 50%; background: var(--ink); color: var(--lime); transition: transform var(--d-3) var(--ease-spring); }
.cta-mega-ico .i-arrow { width: calc(20 * var(--vk)); height: calc(20 * var(--vk)); }
.cta-mega:hover { transform: translateY(calc(-2 * var(--vk))); box-shadow: 0 0 0 1px rgba(199,227,91,.8), 0 calc(12 * var(--vk)) calc(28 * var(--vk)) calc(-12 * var(--vk)) rgba(199,227,91,.85); }
.cta-mega:hover .cta-mega-ico { transform: translateX(calc(4 * var(--vk))) rotate(-10deg); }
.cta-mega:focus-visible { outline: calc(3 * var(--vk)) solid var(--ink); outline-offset: calc(5 * var(--vk)); }
@media (max-width: 899px) { .cta-title, .cta-body { grid-column: 1 / -1; } }

/* ---------- link-row 頁尾連結列：頁尾上方一條 96px 滿版 TRANSITION LIME，整列＝此畫面唯一的 LIME 主按鈕 ---------- */
.blk-link-row { padding: 0; background: var(--lime); color: var(--ink); }
.lrow-a { display: block; color: var(--ink); transition: background-color var(--d-2) var(--ease-out); }
.lrow-a:hover { background: #BCD94C; }
.lrow-a:focus-visible { outline: calc(3 * var(--vk)) solid var(--ink); outline-offset: calc(-6 * var(--vk)); border-radius: 0; }
.lrow { display: flex; align-items: center; justify-content: space-between; gap: calc(16 * var(--vk)) calc(32 * var(--vk)); min-height: calc(96 * var(--vk)); padding-block: calc(16 * var(--vk)); }
.lrow-t { min-width: 0; flex: 1 1 auto; font-family: var(--f-display); font-size: clamp(calc(20 * var(--vk)), calc(1.8 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(28 * var(--vk))); font-weight: 800; letter-spacing: .01em; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lrow-go { flex: none; display: inline-flex; align-items: center; gap: calc(16 * var(--vk)); font-size: calc(16 * var(--vk)); font-weight: 700; letter-spacing: .06em; }
.lrow-ico { display: grid; place-items: center; width: calc(56 * var(--vk)); height: calc(56 * var(--vk)); border-radius: 50%; background: var(--ink); color: var(--lime); transition: transform var(--d-2) var(--ease-spring); }
.lrow-ico .i-arrow { width: calc(20 * var(--vk)); height: calc(20 * var(--vk)); }
.lrow-a:hover .lrow-ico { transform: translateX(calc(6 * var(--vk))) rotate(-8deg); }
@media (max-width: 599px) { .lrow-t { white-space: normal; } .lrow-ico { width: calc(48 * var(--vk)); height: calc(48 * var(--vk)); } }

/* ---------- contact-form 聯絡表單 ---------- */
.blk-contact-form { padding: var(--sec-y) 0; }
/* 表單一屏填完（BRIEF_v25 D）：四列（姓名／公司、職稱／電話、電子郵件／服務項目、需求說明）＋送出 */
.form-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: calc(28 * var(--vk)) var(--col-gap); align-items: start; }
.form-head { position: sticky; top: calc(var(--head-h) + calc(40 * var(--vk))); display: grid; gap: calc(16 * var(--vk)); }
.form { display: grid; gap: calc(14 * var(--vk)); padding: clamp(calc(20 * var(--vk)), calc(2.4 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(36 * var(--vk))); border-radius: calc(28 * var(--vk)); background: var(--paper-2); box-shadow: var(--sh-2); }
.fld-group { display: grid; gap: calc(14 * var(--vk)); }
.form-head .display-m { max-width: none; font-size: var(--t-m); text-wrap: balance; }
/* 表單標頭：CORAL 強調面板（純排版，無示意視覺）——聯絡頁的暖色重點，INK 字對比 ≥ 4.5:1 */
.form-head { align-content: end; min-height: clamp(calc(200 * var(--vk)), 30vh, calc(320 * var(--vk))); padding: clamp(calc(24 * var(--vk)), calc(2.6 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(40 * var(--vk))); border-radius: calc(32 * var(--vk)); background: radial-gradient(70% 90% at 100% 0%, rgba(255,255,255,.2), transparent 60%), radial-gradient(60% 80% at 0% 100%, rgba(17,17,17,.12), transparent 70%), var(--coral); color: var(--ink); box-shadow: 0 calc(8 * var(--vk)) calc(20 * var(--vk)) calc(-14 * var(--vk)) rgba(255,90,60,.6); } /* sticky → 小半徑陰影（BRIEF_v25 C2） */
.fld-row { display: grid; grid-template-columns: 1fr 1fr; gap: calc(14 * var(--vk)) calc(20 * var(--vk)); }
.fld { display: grid; gap: calc(6 * var(--vk)); }
.fld label { font-size: calc(14 * var(--vk)); font-weight: 650; letter-spacing: .08em; line-height: 1.4; display: flex; gap: calc(6 * var(--vk)); }
.fld .req { color: var(--ink); }
.fld input, .fld select, .fld textarea { width: 100%; min-height: calc(48 * var(--vk)); padding: calc(11 * var(--vk)) calc(16 * var(--vk)); border: 0; border-radius: var(--r-md); background: var(--paper-3); font-size: calc(16 * var(--vk)); transition: box-shadow var(--d-1), background-color var(--d-1); }
.fld textarea { resize: vertical; min-height: calc(96 * var(--vk)); line-height: 1.7; }
.fld select { -webkit-appearance: none; appearance: none; padding-right: calc(52 * var(--vk)); cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23111111' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right calc(18 * var(--vk)) center; background-size: calc(18 * var(--vk)); }
.fld :is(input, select, textarea):hover { box-shadow: inset 0 0 0 1px rgba(17,17,17,.14); }
.fld :is(input, select, textarea):focus { outline: none; background-color: var(--paper-2); box-shadow: 0 0 0 calc(3 * var(--vk)) var(--blue); }
.fld :is(input, select, textarea)[aria-invalid="true"] { box-shadow: 0 0 0 calc(2 * var(--vk)) var(--coral); }
.form-actions { padding-top: calc(4 * var(--vk)); }
@media (max-width: 899px) { .form-grid, .fld-row { grid-template-columns: 1fr; } .form-head { position: static; min-height: 0; } }
@media (max-width: 599px) { .fld-row { gap: calc(14 * var(--vk)); } .fld-group, .form { gap: calc(14 * var(--vk)); } }
/* 同仁回饋 0929：表單照客戶洽詢紀錄表 Excel 分三組（基本資料／背景脈絡／服務需求）。每組＝fieldset＋編號 legend，組與組之間細線；
   組內 6 欄格：一般欄位佔半列、wide 佔滿；聯絡人＝巢狀 fieldset（人名＋職稱、電話、信箱三欄）；服務項目＝可複選膠囊（原生核取方塊）。
   每組一個資訊單元（data-unit），桌機 1366×657、手機 360×640 都一屏。 */
.form--groups { gap: 0; padding-block: clamp(calc(10 * var(--vk)), calc(1.4 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(20 * var(--vk))); }
.fld-group--set { min-width: 0; margin: 0; padding: clamp(calc(16 * var(--vk)), 2.2vh, calc(26 * var(--vk))) 0; border: 0; display: grid; gap: calc(14 * var(--vk)); }
.fld-group--set + .fld-group--set { box-shadow: inset 0 1px 0 rgba(17,17,17,.12); }
.fld-group-h { float: left; width: 100%; display: flex; align-items: baseline; gap: calc(12 * var(--vk)); margin: 0 0 calc(14 * var(--vk)); padding: 0; font-size: calc(17 * var(--vk)); font-weight: 750; letter-spacing: .06em; }
.fld-group-h + * { clear: both; }
.fld-group-n { font-family: var(--f-cond); font-size: calc(14 * var(--vk)); font-weight: 600; letter-spacing: .16em; color: var(--fg-2); }
.fld-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: calc(14 * var(--vk)) calc(20 * var(--vk)); align-items: start; }
.fld-grid > .fld { grid-column: span 3; }
.fld-grid > .fld--wide { grid-column: 1 / -1; }
.fld-set, .fld-checks { min-width: 0; margin: 0; padding: 0; border: 0; }
.fld-legend { float: left; width: 100%; display: flex; gap: calc(6 * var(--vk)); margin: 0 0 calc(6 * var(--vk)); padding: 0; font-size: calc(14 * var(--vk)); font-weight: 650; letter-spacing: .08em; line-height: 1.4; }
.fld-legend + * { clear: both; }
.fld-sub { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(12 * var(--vk)) calc(20 * var(--vk)); padding: calc(12 * var(--vk)) calc(14 * var(--vk)) calc(14 * var(--vk)); border-radius: var(--r-md); box-shadow: inset 0 0 0 1px rgba(17,17,17,.1); }
.fld-sub .fld label { font-weight: 600; color: var(--fg-2); }
.fld--area textarea { min-height: calc(96 * var(--vk)); height: calc(96 * var(--vk)); }
.fld-checks .chk-list { display: flex; flex-wrap: wrap; gap: calc(10 * var(--vk)); }
.chk { position: relative; display: inline-flex; align-items: center; gap: calc(10 * var(--vk)); min-height: calc(44 * var(--vk)); padding: calc(8 * var(--vk)) calc(16 * var(--vk)) calc(8 * var(--vk)) calc(12 * var(--vk)); border-radius: calc(999 * var(--vk)); background: var(--paper-3); font-size: calc(15 * var(--vk)); font-weight: 600; cursor: pointer; transition: background-color var(--d-1), box-shadow var(--d-1); }
.chk input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.chk-box { flex: 0 0 auto; width: calc(18 * var(--vk)); height: calc(18 * var(--vk)); border-radius: calc(5 * var(--vk)); box-shadow: inset 0 0 0 1.5px rgba(17,17,17,.5); background: var(--paper-2) center / calc(12 * var(--vk)) no-repeat; transition: background-color var(--d-1), box-shadow var(--d-1); }
.chk:hover { box-shadow: inset 0 0 0 1px rgba(17,17,17,.14); }
.chk:has(input:checked) { background: var(--ink); color: var(--paper); }
.chk:has(input:checked) .chk-box { background-color: var(--lime); box-shadow: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23111111' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.chk:has(input:focus-visible) { box-shadow: 0 0 0 calc(3 * var(--vk)) var(--blue); }
.form--groups .form-actions { padding-top: calc(6 * var(--vk)); }
@media (max-width: 599px) {
  .fld-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: calc(12 * var(--vk)); }
  .fld-grid > .fld, .fld-grid > .fld--wide { grid-column: 1 / -1; }
  .fld-sub { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: calc(12 * var(--vk)); padding: calc(10 * var(--vk)) calc(12 * var(--vk)) calc(12 * var(--vk)); }
  .fld-sub > .fld:first-child { grid-column: 1 / -1; }   /* 人名＋職稱滿寬；電話、信箱並排 */
  .fld-group--set { padding: calc(16 * var(--vk)) 0; gap: calc(12 * var(--vk)); }
  .chk { min-height: calc(44 * var(--vk)); font-size: calc(15 * var(--vk)); }
}

/* ---------- faq ／ pending：一條「內容準備中」細帶（高 64px、左側 CORAL 圓點、PAPER 底；不再用骨架卡） ---------- */
.blk-faq, .blk-pending { padding: clamp(calc(32 * var(--vk)), calc(4 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(64 * var(--vk))) 0 clamp(calc(72 * var(--vk)), calc(9 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(144 * var(--vk))); }
.faq-grid, .pend-grid { display: grid; gap: calc(28 * var(--vk)); }
.pend-strip { display: flex; align-items: center; gap: calc(14 * var(--vk)); min-height: calc(56 * var(--vk)); padding: 0 calc(4 * var(--vk)); font-size: calc(16 * var(--vk)); font-weight: 600; letter-spacing: .08em; color: var(--fg-2); border-top: 1px solid var(--rule-ink); border-bottom: 1px solid var(--rule-ink); }
.pend-dot { flex: none; width: calc(10 * var(--vk)); height: calc(10 * var(--vk)); border-radius: 50%; background: var(--coral); box-shadow: 0 0 calc(12 * var(--vk)) rgba(255,90,60,.55); }
.pend-what { color: var(--ink); letter-spacing: .16em; }
.pend-sep { width: calc(20 * var(--vk)); height: 1px; background: var(--rule-ink); }
.tone-ink .pend-strip { color: var(--fg-inv-2); border-color: var(--rule-inv); }
.tone-ink .pend-what { color: var(--paper); }
.svc-art-body > .pend-strip { margin-top: calc(4 * var(--vk)); }
/* 無場景的純排版頁（最新消息、合作夥伴、FAQ）：主視覺大字頁名、下方一條待補標記 */
.hero--plain.tone-paper + :is(.blk-pending, .blk-faq) { margin-top: -1px; }

/* ---------- platform-links 平台連結 ---------- */
.blk-platform-links { padding: var(--sec-y) 0; }
.blk-platform-links.tone-deep { background: radial-gradient(60% 90% at 100% 0%, rgba(0,160,224,.5), transparent 65%), var(--deep); }
.plat-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: calc(28 * var(--vk)) var(--col-gap); align-items: start; }
.plat-grid > header { display: grid; gap: calc(14 * var(--vk)); }
.plat-list { display: grid; gap: calc(10 * var(--vk)); }
.plat-a { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: calc(6 * var(--vk)) calc(24 * var(--vk)); padding: clamp(calc(18 * var(--vk)), calc(2 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(28 * var(--vk))); border-radius: var(--r-card); background: rgba(244,241,234,.07); transition: background-color var(--d-2), transform var(--d-2) var(--ease-out); }
a.plat-a:hover { background: rgba(244,241,234,.13); transform: translateY(calc(-2 * var(--vk))); }
.plat-name { grid-column: 1; font-family: var(--f-display); font-size: var(--t-s); font-weight: 800; line-height: 1.2; }
.plat-desc { grid-column: 1; font-size: calc(16 * var(--vk)); color: var(--fg-inv-2); }
/* 官方 Logo 取代文字名稱（CSRone，Tommy 2026-09-30）：原色、等比，高度由 logoH 控制 */
.plat-name--logo { display: block; margin-bottom: calc(4 * var(--vk)); }
.plat-logo { display: block; height: calc(var(--h, 40) * calc(10 * var(--vk)) / 10); width: auto; max-width: 100%; }
.tone-deep .plat-desc { color: rgba(255,255,255,.84); }
.plat-host { grid-column: 2; grid-row: 1 / span 2; display: inline-flex; align-items: center; gap: calc(10 * var(--vk)); font-size: calc(14 * var(--vk)); font-weight: 600; letter-spacing: .06em; }
.plat-host .i-arrow { width: calc(40 * var(--vk)); height: calc(40 * var(--vk)); padding: calc(10 * var(--vk)); border-radius: 50%; background: var(--paper); color: var(--ink); }
.tone-paper .plat-a { background: var(--paper-2); box-shadow: var(--sh-1); }
.tone-paper .plat-desc { color: var(--fg-2); }
@media (max-width: 899px) { .plat-grid { grid-template-columns: 1fr; } .plat-a { grid-template-columns: 1fr; } .plat-host { grid-column: 1; grid-row: auto; } .plat-logo { height: calc(var(--h, 40) * calc(8.2 * var(--vk)) / 10); } }

/* ---------- link-index 頁面索引：編輯式索引列（全寬、1px INK 12% 細線、左側 Roboto Condensed 96px 大編號、標題 40px、說明 1 行） ---------- */
.blk-link-index { padding: var(--sec-y-l) 0; }
.li-head { display: grid; gap: calc(14 * var(--vk)); margin-bottom: clamp(calc(24 * var(--vk)), calc(3 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(36 * var(--vk))); }
.li-list { display: grid; border-bottom: 1px solid var(--rule-ink); }
@media (min-width: 1024px) { .li-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: calc(var(--col-gap) * 2); } }
.li-row { border-top: 1px solid var(--rule-ink); }
.li-a { position: relative; display: grid; grid-template-columns: clamp(calc(56 * var(--vk)), calc(5.4 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(96 * var(--vk))) minmax(0, 1fr) auto; align-items: center; gap: calc(6 * var(--vk)) clamp(calc(14 * var(--vk)), calc(1.6 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(28 * var(--vk))); padding: clamp(calc(16 * var(--vk)), 2.4vh, calc(26 * var(--vk))) 0; }
.li-a::before { content: ""; position: absolute; left: 0; top: -1px; width: 0; height: calc(3 * var(--vk)); background: var(--blue); transition: width var(--d-3) var(--ease-film); }
.li-a:hover::before, .li-a:focus-visible::before { width: calc(120 * var(--vk)); }
.li-n { font-family: var(--f-cond); font-size: clamp(calc(36 * var(--vk)), calc(3.6 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(60 * var(--vk))); font-weight: 300; line-height: .86; letter-spacing: -.03em; color: var(--ink); transition: color var(--d-2); }
.li-a:hover .li-n { color: var(--deep); }
.li-main { display: grid; gap: calc(6 * var(--vk)); min-width: 0; }
.li-eyebrow { display: inline-flex; align-items: center; gap: calc(8 * var(--vk)); font-size: calc(12 * var(--vk)); font-weight: 700; letter-spacing: .24em; color: var(--ink); }
.li-eyebrow::before { content: ""; width: calc(6 * var(--vk)); height: calc(6 * var(--vk)); border-radius: 50%; background: var(--blue); flex: none; }
.li-title { font-family: var(--f-display); font-size: clamp(calc(19 * var(--vk)), calc(1.6 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(25 * var(--vk))); font-weight: 800; line-height: 1.3; letter-spacing: -.01em; text-wrap: balance; word-break: keep-all; line-break: strict; overflow-wrap: anywhere; }
.li-body { font-size: calc(16 * var(--vk)); line-height: 1.7; color: var(--fg-2); }
.li-more { display: inline-flex; align-items: center; gap: calc(10 * var(--vk)); font-size: calc(14 * var(--vk)); font-weight: 650; color: var(--ink); }
.li-more .i-arrow { width: calc(28 * var(--vk)); height: calc(28 * var(--vk)); transition: transform var(--d-2) var(--ease-spring); }
.li-a:hover .li-more .i-arrow { transform: translateX(calc(6 * var(--vk))); }
.tone-ink .li-list, .tone-ink .li-row { border-color: var(--rule-inv); }
.tone-ink :is(.li-n, .li-eyebrow, .li-more) { color: var(--paper); }
.tone-ink .li-body { color: var(--fg-inv-2); }
/* PAPER 章節：留白放大（編輯式呼吸），色調區塊（INK／BLUE／CORAL）維持標準節奏 */
:is(.blk-longform, .blk-service-index, .blk-platform-links, .blk-service-items, .blk-contact-form):is(.tone-paper, .tone-lite) { padding: var(--sec-y-l) 0; }
.blk-service-index.tone-lite .sidx--compact { margin-top: calc(8 * var(--vk)); }
@media (max-width: 1279px) { .li-more .ui { display: none; } }
@media (max-width: 899px) { .li-a { grid-template-columns: auto minmax(0, 1fr); } .li-more { display: none; } }

/* ---------- 404 ---------- */
.blk-not-found { min-height: 72svh; display: flex; align-items: flex-end; padding: calc(var(--head-h) + calc(64 * var(--vk))) 0 var(--sec-y); }
.nf-grid { display: grid; gap: calc(40 * var(--vk)); justify-items: start; }
.nf-code { font-family: var(--f-cond); font-size: var(--t-deco); font-weight: 300; line-height: .86; letter-spacing: -.04em; }

/* ---------- design-system（/design） ---------- */
.blk-design-system { padding: var(--sec-y) 0; }
.ds { display: grid; gap: calc(40 * var(--vk)); }
.ds-swatches { display: flex; height: calc(160 * var(--vk)); border-radius: var(--r-card); overflow: hidden; box-shadow: var(--sh-2); }
.ds-sw { flex: var(--w) 1 0; display: flex; flex-direction: column; justify-content: flex-end; gap: calc(4 * var(--vk)); padding: calc(20 * var(--vk)); min-width: 0; font-family: var(--f-cond); font-size: calc(13 * var(--vk)); letter-spacing: .1em; }
.ds-sw-name { font-weight: 700; } .ds-sw-r { font-size: calc(28 * var(--vk)); font-weight: 800; }
.sw-paper { background: var(--paper); box-shadow: inset 0 0 0 1px rgba(17,17,17,.06); } .sw-ink { background: var(--ink); color: var(--paper); }
.sw-blue { background: var(--blue); } .sw-coral { background: var(--coral); } .sw-lime { background: var(--lime); } .sw-deep { background: var(--deep); color: #fff; }
.ds-scale { display: grid; gap: calc(28 * var(--vk)); }
.ds-type { display: grid; grid-template-columns: calc(160 * var(--vk)) minmax(0, 1fr); gap: calc(24 * var(--vk)); align-items: baseline; }
.ds-type > p { min-width: 0; overflow-wrap: anywhere; }
.ds-type code, .ds-blocks code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: calc(13 * var(--vk)); color: var(--deep); }
.ds-buttons { display: flex; flex-wrap: wrap; gap: calc(16 * var(--vk)); align-items: center; }
.ds-dark { display: inline-flex; gap: calc(16 * var(--vk)); padding: calc(16 * var(--vk)); border-radius: var(--r-pill); background: var(--ink); }
.ds-blocks { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(300 * var(--vk))), 1fr)); gap: calc(10 * var(--vk)); }
.ds-blocks li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: calc(8 * var(--vk)) calc(12 * var(--vk)); padding: calc(14 * var(--vk)) calc(18 * var(--vk)); border-radius: var(--r-md); background: var(--paper-2); min-width: 0; }
.ds-blocks li > span { display: flex; flex-wrap: wrap; gap: calc(4 * var(--vk)); }
/* v25 media 新增 13 種區塊（共 34 種）後，桌機清單改成較密的網格，維持一屏讀完（BRIEF_v25 D；原在 07-media.css，整合時移入） */
@media (min-width: 900px) {
  .ds-blocks { grid-template-columns: repeat(auto-fill, minmax(calc(200 * var(--vk)), 1fr)); gap: calc(8 * var(--vk)); }
  .ds-blocks li { padding: calc(10 * var(--vk)) calc(14 * var(--vk)); gap: calc(4 * var(--vk)) calc(10 * var(--vk)); font-size: calc(14 * var(--vk)); line-height: 1.5; }
}
.ds-v { margin-left: calc(6 * var(--vk)); padding: calc(2 * var(--vk)) calc(8 * var(--vk)); border-radius: var(--r-pill); background: rgba(0,160,224,.12); color: var(--ink) !important; }
@media (max-width: 699px) { .ds-type { grid-template-columns: 1fr; gap: calc(6 * var(--vk)); } .ds-swatches { flex-direction: column; height: auto; } .ds-sw { min-height: calc(72 * var(--vk)); } }

/* ---------- KM BLUE 章節底（索引列、平台連結、長文） ---------- */
.blk-service-index.tone-blue, .blk-link-index.tone-blue, .blk-platform-links.tone-blue, .blk-longform.tone-blue { background: radial-gradient(70% 100% at 100% 0%, rgba(255,255,255,.2), transparent 58%), radial-gradient(60% 90% at 0% 100%, rgba(0,119,158,.45), transparent 70%), var(--blue); color: var(--ink); }
.tone-blue :is(.sidx, .sidx-row, .li-list, .li-row, .lf-lines) { border-color: rgba(17,17,17,.2); }
.tone-blue :is(.sidx-desc, .li-body, .lines-list li, .lf-lines p, .plat-desc) { color: var(--ink); }
.tone-blue .sidx-items li::before, .tone-blue .lines-list li::before, .tone-blue .li-eyebrow::before { background: var(--ink); }
.tone-blue .li-a:hover .li-n { color: var(--paper); }
.tone-blue :is(.sidx-row, .li-a)::before { background: var(--ink); }
.tone-blue .plat-a { background: rgba(244,241,234,.9); box-shadow: 0 calc(20 * var(--vk)) calc(50 * var(--vk)) calc(-30 * var(--vk)) rgba(0,60,90,.6); }
.tone-blue a.plat-a:hover { background: var(--paper); }
.tone-blue .plat-desc { color: var(--fg-2); }

/* 服務內頁（service-items methodOnly，BRIEF_v25 A2）：輔導方式面板限寬（不再滿版拉長）；與後面的「內容準備中」區塊銜接的留白收緊 */
.svc-items-page .svc-method-box--page { max-width: calc(880 * var(--vk)); }
/* 服務內頁的「輔導方式」面板用 CORAL 底＋INK 字（與宣言 C 版式同一語彙；類別頁的多項清單仍是 KM BLUE）——
   v25 修正輪：全站 CORAL 比例 −4.8（接近 ±5 上限），服務內頁改用 lite 以外的色面後 PAPER 也回到目標附近 */
.svc-method-box--page { background: radial-gradient(80% 120% at 100% 0%, rgba(255,255,255,.2), transparent 58%), var(--g-coral); box-shadow: 0 calc(10 * var(--vk)) calc(26 * var(--vk)) calc(-18 * var(--vk)) rgba(255,90,60,.6); }
/* 服務內頁（修正輪）：「輔導方式」段落標題（chapterHead，07-media.css）＋CORAL 卡；沒有輔導方式時標題下方「內容準備中」。 */
.blk-service-items.svc-items-page { padding: clamp(calc(40 * var(--vk)), 6vh, calc(72 * var(--vk))) 0 clamp(calc(14 * var(--vk)), 2vh, calc(24 * var(--vk))); }
.svc-items-page .md-chapter + .svc-method-box--page { margin-top: clamp(calc(18 * var(--vk)), 2.6vh, calc(28 * var(--vk))); }
.svc-items-page--pend + .md-chapter-blk { padding-top: clamp(calc(40 * var(--vk)), 6vh, calc(72 * var(--vk))); }

/* 06-motion.css */
/* 動態：顯現（只在 JS 啟用時隱藏；文字一開始就在 DOM）、逐行浮現、數字滾動、捲動驅動、View Transitions、減少動態
   節奏：慢、穩、精準——長尾減速（--ease-film）、位移小、錯開 110ms。 */

/* ---------- 一般顯現：淡入＋極小位移 ---------- */
html.js [data-reveal] { opacity: 0; transform: translate3d(0, calc(24 * var(--vk)), 0); transition: opacity var(--d-3) var(--ease-film), transform var(--d-4) var(--ease-film); transition-delay: calc(var(--i, 0) * var(--stagger)); }
html.js [data-reveal].is-in { opacity: 1; transform: none; }

/* ---------- 逐行浮現：有 .ln 斷行的標題，整塊不位移，改由每一行從遮罩下方升起 ---------- */
html.js [data-reveal]:has(.ln) { opacity: 1; transform: none; }
html.js [data-reveal] .ln > span { transform: translate3d(0, 108%, 0); transition: transform var(--d-4) var(--ease-film); }
html.js [data-reveal] .ln:nth-child(2) > span { transition-delay: 110ms; }
html.js [data-reveal] .ln:nth-child(3) > span { transition-delay: 220ms; }
html.js [data-reveal] .ln:nth-child(4) > span { transition-delay: 330ms; }
html.js [data-reveal].is-in .ln > span { transform: none; }

/* ---------- 首頁 H1：不做淡出（LCP 為文字，一開始就繪製），只做逐行上浮 ----------
   v25 C2：顯現動畫只用 opacity／transform（不用 filter: blur()，模糊每幀都要重算、疊在 canvas 上更重）。
   --intro-at：開場序曲結束時間（執行期寫入；無序曲時為 0）。序曲期間標題在暗場下方待命。 */
html.js [data-rise] { animation: lineRise 1.3s var(--ease-film) .08s both; }
html.js .stage-title .ln > span { animation: lineRise 1.3s var(--ease-film) both; animation-delay: calc(var(--intro-at, 0s) + .1s); }
html.js .stage-title .ln:nth-child(2) > span { animation-delay: calc(var(--intro-at, 0s) + .24s); }
/* 主標第二行下方的 KM BLUE 細線：主標浮現後由左向右描出（--u 0→1），之後隨捲動 --p 收回 */
@property --u { syntax: "<number>"; inherits: true; initial-value: 1; }
@keyframes uDraw { from { --u: 0; } to { --u: 1; } }
html.js .stage-title .ln:last-child > span { animation: lineRise 1.3s var(--ease-film) both, uDraw 1.4s var(--ease-film) both; animation-delay: calc(var(--intro-at, 0s) + .24s), calc(var(--intro-at, 0s) + 1.1s); }
/* 主視覺其他文字：不從透明淡入（避免延後 LCP），只做位移 */
html.js .soft-in { animation: softIn 1.2s var(--ease-film) both; animation-delay: calc(var(--intro-at, 0s) + .4s + var(--i, 0) * var(--stagger)); }
@keyframes softIn { from { transform: translate3d(0, calc(18 * var(--vk)), 0); } to { transform: none; } }
@keyframes lineRise { from { transform: translate3d(0, .32em, 0); } to { transform: none; } }

/* ---------- 數字滾動（數字帶）：每個數字由 0 捲到原文數字（捲軸用偽元素，textContent 不變） ---------- */
.num .dg { display: inline-block; height: 1em; overflow: clip; overflow-clip-margin: .06em; vertical-align: top; line-height: 1; }
.num .dg-r { display: inline-block; position: relative; line-height: 1; }
.num .dg-r::before { position: absolute; left: 0; right: 0; bottom: 100%; white-space: pre; text-align: center; }
.num .dg-r[data-d="1"]::before { content: "0"; }
.num .dg-r[data-d="2"]::before { content: "0\A 1"; }
.num .dg-r[data-d="3"]::before { content: "0\A 1\A 2"; }
.num .dg-r[data-d="4"]::before { content: "0\A 1\A 2\A 3"; }
.num .dg-r[data-d="5"]::before { content: "0\A 1\A 2\A 3\A 4"; }
.num .dg-r[data-d="6"]::before { content: "0\A 1\A 2\A 3\A 4\A 5"; }
.num .dg-r[data-d="7"]::before { content: "0\A 1\A 2\A 3\A 4\A 5\A 6"; }
.num .dg-r[data-d="8"]::before { content: "0\A 1\A 2\A 3\A 4\A 5\A 6\A 7"; }
.num .dg-r[data-d="9"]::before { content: "0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8"; }
.num .ch { display: inline-block; height: 1em; overflow: clip; overflow-clip-margin: .08em; vertical-align: top; line-height: 1; }
.num .ch > span { display: inline-block; }
html.js .stat:not(.is-in) .dg-r { transform: translate3d(0, calc(var(--d) * 1em), 0); }
html.js .stat:not(.is-in) .ch > span { transform: translate3d(0, 104%, 0); }
html.js .stat .dg-r { transition: transform var(--d-5) var(--ease-film) calc(var(--i, 0) * 160ms + var(--k, 0) * 90ms + 200ms); }
html.js .stat .ch > span { transition: transform var(--d-4) var(--ease-film) calc(var(--i, 0) * 160ms + var(--k, 0) * 90ms + 200ms); }

/* ---------- 捲動驅動（支援才用）：大號序號與報告大字的緩慢視差 ---------- */
@supports (animation-timeline: view()) {
  html.js:not(.reduce-motion) :is(.svc-n, .rep-short, .stat-p .num) { animation: driftUp linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
  @keyframes driftUp { from { translate: 0 calc(18 * var(--vk)); } to { translate: 0 calc(-18 * var(--vk)); } }
}

/* ---------- 頁面轉場（預覽 hash 路由） ---------- */
::view-transition-old(root) { animation: vtOut 300ms var(--ease-io) both; }
::view-transition-new(root) { animation: vtIn 640ms var(--ease-film) both; }
@keyframes vtOut { to { opacity: 0; } }
@keyframes vtIn { from { opacity: 0; transform: translateY(calc(14 * var(--vk))); } }

/* ---------- 減少動態 ---------- */
@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal], html.js [data-reveal] .ln > span, html.js .stat .dg-r, html.js .stat .ch > span { opacity: 1; transform: none !important; transition: none; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}
html.reduce-motion.js [data-reveal], html.reduce-motion.js [data-reveal] .ln > span, html.reduce-motion.js .stat .dg-r, html.reduce-motion.js .stat .ch > span { opacity: 1; transform: none !important; transition: none; }
html.reduce-motion *, html.reduce-motion *::before, html.reduce-motion *::after { animation-duration: .001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; }

/* 07-media.css */
/* 07 同仁圖表資料區塊（BRIEF_v25_media §3）：pptx 拆解後依網站風格重畫。前綴 md-／各區塊縮寫。
   語彙：國際論壇手冊／年報的資訊設計——細網格、1px 細線、Roboto Condensed 大數字、KM BLUE 深淺＋INK＋CORAL 點綴、LIME 每頁最多一個重點。
   不沿用投影片的粉紅、黃綠、紫；不放投影片截圖、第三方 Logo、SDGs 色輪、證書、圖庫照片。
   動畫只用 transform／opacity／SVG 描線（stroke-dashoffset），由 runtime 的 [data-reveal]／[data-draw] 加 .is-in 觸發；減少動態時直接顯示。
   捲動路徑沒有任何 JS；不用 backdrop-filter、filter blur；會移動的元素不用大半徑陰影。 */

/* ---------- 共用 ---------- */
/* 修正輪：圖表輔助灰與淺藍改由品牌色混出（不再寫死 var(--md-ink-2)／var(--md-ink-3)／var(--md-muted)／var(--md-blue-2)／var(--md-blue-3)），後台換色時一致生效 */
:root { --md-ink-2: color-mix(in srgb, var(--ink) 80%, var(--paper)); --md-ink-3: color-mix(in srgb, var(--ink) 66%, var(--paper)); --md-muted: color-mix(in srgb, var(--ink) 10%, var(--paper)); --md-blue-2: color-mix(in srgb, var(--blue) 55%, var(--paper)); --md-blue-3: color-mix(in srgb, var(--blue) 28%, var(--paper)); }
.md-blk { --md-bg: var(--paper); --md-fg2: var(--fg-2); --md-rule: var(--rule-ink); --md-acc: var(--deep); padding: clamp(calc(40 * var(--vk)), 6vh, calc(80 * var(--vk))) 0; }
.md-blk.tone-lite, .md-chapter-blk.tone-lite { --md-bg: var(--paper-2); }
.md-blk.tone-ink, .md-chapter-blk.tone-ink { --md-bg: var(--ink); --md-fg2: var(--fg-inv-2); --md-rule: var(--rule-inv); --md-acc: var(--blue); }
.md-blk.tone-blue { --md-bg: var(--blue); --md-fg2: var(--ink); --md-rule: rgba(17,17,17,.22); --md-acc: var(--ink);
  background: radial-gradient(70% 100% at 100% 0%, rgba(255,255,255,.2), transparent 58%), radial-gradient(60% 90% at 0% 100%, rgba(0,119,158,.4), transparent 70%), var(--blue); }
.md-blk.tone-blue .in-st-bar { background: rgba(17,17,17,.16); }
.md-blk.tone-blue .in-st-bar i { background: var(--ink); }
.md-blk.md-cont { padding-top: 0; display: flow-root; } /* flow-root：避免第一個子元素的 margin-top 穿出區塊，在兩個同底色區塊之間露出一條 PAPER 縫（整合輪：data-table → donut-chart 27px） */
/* 整合輪：延續區塊（md-cont）只有在「前一個區塊同底色」時才去掉上留白；底色不同（例如 impact-management 的延伸閱讀連結 paper 接在 ink 圓環圖後）
   原本連結膠囊直接貼在深色區塊下緣。 */
.md-blk.tone-ink + .md-blk.md-cont:not(.tone-ink), .md-blk:not(.tone-ink) + .md-blk.md-cont.tone-ink,
.md-blk.tone-blue + .md-blk.md-cont:not(.tone-blue), .md-blk:not(.tone-blue) + .md-blk.md-cont.tone-blue { padding-top: clamp(calc(24 * var(--vk)), 3.4vh, calc(40 * var(--vk))); }
.md-blk .md-line { display: block; }
.md-blk :is(p, li, td) { text-wrap-style: pretty; } /* 修正輪：避免段落最後一行只剩一個字（例「參／與」） */
.md-blk :is(h5, h6) { margin: 0; }

/* 段落標題（chapterHead）：19 個服務內頁的「輔導方式／綜合亮點績效／客戶案例」共用同一個樣子（修正輪，美術審查）——
   H2（30px）＋KM BLUE 方點＋橫貫版心 1px 細線（顯現時由左向右描出）；同仁資料尚未提供時，「內容準備中」在標題下方的內文位置。 */
.md-chapter-blk { padding: clamp(calc(48 * var(--vk)), 7vh, calc(96 * var(--vk))) 0 0; }
.md-chapter { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: clamp(calc(16 * var(--vk)), calc(2 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(28 * var(--vk))); }
.md-chapter-t { display: inline-flex; align-items: center; gap: calc(14 * var(--vk)); font-family: var(--f-display); font-size: clamp(calc(22 * var(--vk)), calc(2.1 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(30 * var(--vk))); font-weight: 800; line-height: 1.2; letter-spacing: -.01em; }
.md-chapter-t::before { content: ""; flex: none; width: calc(12 * var(--vk)); height: calc(12 * var(--vk)); border-radius: calc(3 * var(--vk)); background: var(--blue); }
.md-chapter-rule { display: block; height: 1px; background: currentColor; opacity: .2; transform-origin: 0 50%; }
html.js .md-chapter[data-reveal] { opacity: 1; transform: none; }
html.js .md-chapter[data-reveal] .md-chapter-t { opacity: 0; transform: translate3d(0, calc(14 * var(--vk)), 0); transition: opacity var(--d-3) var(--ease-film), transform var(--d-4) var(--ease-film); }
html.js .md-chapter[data-reveal] .md-chapter-rule { transform: scaleX(0); transition: transform 1.6s var(--ease-film) .15s; }
html.js .md-chapter.is-in .md-chapter-t, html.js .md-chapter.is-in .md-chapter-rule { opacity: 1; transform: none; }
.md-chapter-blk + .md-blk { padding-top: clamp(calc(24 * var(--vk)), 3.4vh, calc(44 * var(--vk))); }
/* 內容準備中：標題下方一行（CORAL 圓點＋介面字），與標題文字左緣對齊（方點 12px＋間距 14px） */
.md-chapter-pend { display: flex; align-items: center; gap: calc(12 * var(--vk)); margin: clamp(calc(12 * var(--vk)), 1.8vh, calc(18 * var(--vk))) 0 0 calc(26 * var(--vk)); font-size: calc(15 * var(--vk)); font-weight: 600; letter-spacing: .08em; color: var(--fg-2); }
.tone-ink .md-chapter-pend { color: var(--fg-inv-2); }
.md-chapter-pend .pend-dot { width: calc(8 * var(--vk)); height: calc(8 * var(--vk)); box-shadow: none; }
.md-chapter-blk--pend { padding-bottom: clamp(calc(8 * var(--vk)), 1.5vh, calc(16 * var(--vk))); }
.md-chapter-blk--pend + .md-chapter-blk { padding-top: clamp(calc(40 * var(--vk)), 6vh, calc(72 * var(--vk))); }
.md-chapter-blk--pend:has(+ :not(.md-chapter-blk)) { padding-bottom: clamp(calc(40 * var(--vk)), 6vh, calc(72 * var(--vk))); }

/* 案例標頭 */
.md-case-head { display: grid; gap: calc(10 * var(--vk)); max-width: calc(960 * var(--vk)); margin-bottom: clamp(calc(20 * var(--vk)), 3vh, calc(36 * var(--vk))); }
.md-meta { display: flex; flex-wrap: wrap; align-items: center; gap: calc(6 * var(--vk)) calc(14 * var(--vk)); font-size: calc(13 * var(--vk)); font-weight: 700; line-height: 1.4; letter-spacing: .12em; color: var(--md-fg2); }
.md-idx:only-child { padding-right: 0; border-right: 0; }
.md-idx { font-family: var(--f-cond); font-size: calc(15 * var(--vk)); font-weight: 700; letter-spacing: .06em; color: var(--md-acc); padding-right: calc(14 * var(--vk)); border-right: 1px solid var(--md-rule); }
.md-client--link, .md-case-link { display: inline-flex; align-items: center; gap: calc(8 * var(--vk)); color: var(--md-acc); border-radius: calc(4 * var(--vk)); }
.md-client--link .i-arrow, .md-case-link .i-arrow { width: calc(16 * var(--vk)); height: calc(16 * var(--vk)); flex: none; transition: transform var(--d-2) var(--ease-spring); }
.md-client--link:hover .i-arrow, .md-case-link:hover .i-arrow { transform: translate(calc(2 * var(--vk)), calc(-2 * var(--vk))); }
.md-client--link:hover .md-ext-t, .md-case-link:hover .md-ext-t { text-decoration: underline; text-underline-offset: calc(4 * var(--vk)); text-decoration-thickness: 1px; }
.md-case-t { font-family: var(--f-display); font-size: clamp(calc(21 * var(--vk)), calc(2 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(30 * var(--vk))); font-weight: 800; line-height: 1.3; letter-spacing: -.005em; text-wrap: balance; word-break: keep-all; line-break: strict; overflow-wrap: anywhere; }
.md-case-link { color: inherit; }
.md-case-links { display: flex; flex-wrap: wrap; gap: calc(6 * var(--vk)) calc(18 * var(--vk)); font-size: calc(15 * var(--vk)); font-weight: 700; }
.md-case-link--s { color: var(--md-acc); }
.md-case-link--s .i-arrow { width: calc(16 * var(--vk)); height: calc(16 * var(--vk)); }
.md-case-link .i-arrow { width: .8em; height: .8em; color: var(--md-acc); }
.md-case-lead { font-size: calc(16 * var(--vk)); line-height: 1.85; color: var(--md-fg2); max-width: 46em; }
.md-case-head--aside { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: calc(var(--col-gap) * 2); max-width: none; align-items: end; }
.md-case-head--aside > :not(.pf-stats) { grid-column: 1; }
.md-case-head--aside > .pf-stats { grid-column: 2; grid-row: 1 / span 4; align-self: end; }

/* 數字（修正輪）：一律以原文最終值呈現，顯現時整體淡入＋上移（opacity／transform），不再逐位捲動——
   原本手機捲動中途會停在錯誤的中間值（6.45、72.33%、30.61%），與旁邊的文字矛盾。 */
.md-blk .num { font-feature-settings: "tnum" 1; }
.md-roll .num { display: inline-block; }
html.js .md-roll:not(.is-in) .num { opacity: 0; transform: translate3d(0, .14em, 0); }
html.js .md-roll .num { transition: opacity var(--d-3) var(--ease-film) calc(var(--i, 0) * 110ms + 120ms), transform var(--d-4) var(--ease-film) calc(var(--i, 0) * 110ms + 120ms); }

/* 中文斷行（修正輪）：.md-w＝以 <wbr> 標出詞界、keep-all 只在詞與詞之間換行（真的放不下才任意斷，不溢出）；
   .md-nw＝括號內英文片語不拆（桌機）；.md-cs＝冒號前後各一段，放得下就不拆。 */
.md-w { word-break: keep-all; overflow-wrap: anywhere; }
@media (min-width: 600px) { .md-nw { white-space: nowrap; } }
.md-cs .md-seg { display: inline-block; }

/* ---------- metric-sources 大數字＋出處 ---------- */
.ms-grid--feature { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--col-gap); align-items: stretch; }
.ms-feature { display: grid; }
.ms-item--feature { display: flex; flex-direction: column; justify-content: flex-end; gap: calc(14 * var(--vk)); padding: clamp(calc(22 * var(--vk)), calc(2.4 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(36 * var(--vk))); border-radius: var(--r-card);
  background: radial-gradient(90% 80% at 100% 0%, rgba(255,255,255,.22), transparent 60%) var(--blue); color: var(--ink); }
.ms-item--feature .ms-top { display: grid; gap: calc(10 * var(--vk)); }
.ms-item--feature .ms-num { font-size: clamp(calc(56 * var(--vk)), calc(5.6 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(92 * var(--vk))); color: var(--ink); }
.ms-item--feature .ms-label { font-size: clamp(calc(18 * var(--vk)), calc(1.5 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(22 * var(--vk))); }
.ms-body { font-size: calc(15 * var(--vk)); line-height: 1.75; }
.ms-item--feature .ms-body { color: var(--ink); }
.ms-rows { display: grid; align-content: start; border-top: calc(2 * var(--vk)) solid currentColor; }
.ms-rows .ms-item { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 6fr); column-gap: var(--col-gap); row-gap: calc(12 * var(--vk)); padding: clamp(calc(16 * var(--vk)), 2.4vh, calc(24 * var(--vk))) 0; border-bottom: 1px solid var(--md-rule); }
.ms-rows .ms-top { grid-row: 1 / span 3; display: grid; align-content: start; gap: calc(10 * var(--vk)); }
.ms-rows .ms-item > :not(.ms-top) { grid-column: 2; }
.ms-val { line-height: 1; }
.ms-num { display: inline-block; font-family: var(--f-cond); font-size: clamp(calc(48 * var(--vk)), calc(4.6 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(76 * var(--vk))); font-weight: 300; line-height: 1; letter-spacing: -.035em; color: var(--md-acc); white-space: nowrap; }
.ms-label { font-family: var(--f-display); font-size: calc(17 * var(--vk)); font-weight: 800; line-height: 1.45; text-wrap: balance; }
.ms-refs { display: grid; gap: calc(4 * var(--vk)); font-size: calc(13.5 * var(--vk)); line-height: 1.6; color: var(--md-fg2); }
.ms-ref-l { font-weight: 700; letter-spacing: .06em; color: var(--fg); }
.tone-ink .ms-ref-l { color: var(--paper); }
.ms-ref-list { display: grid; gap: calc(2 * var(--vk)); }
.ms-ref-list li { position: relative; padding-left: calc(14 * var(--vk)); }
.ms-ref-list li::before { content: ""; position: absolute; left: 0; top: .78em; width: calc(6 * var(--vk)); height: 1px; background: currentColor; }
.ms-tags { display: flex; flex-wrap: wrap; gap: calc(6 * var(--vk)); } /* 修正輪：標籤依字寬排、放不下換列，不把「框架」拆成「框／架」 */
.ms-tags li { flex: 1 1 0; min-width: max-content; display: grid; align-content: start; gap: calc(2 * var(--vk)); padding: calc(10 * var(--vk)) calc(12 * var(--vk)); border-radius: var(--r-sm); background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--md-rule); }
.tone-lite .ms-tags li { background: var(--paper); }
.ms-tag-zh { font-size: calc(15 * var(--vk)); font-weight: 750; line-height: 1.35; white-space: nowrap; }
.ms-tag-en { font-size: calc(12.5 * var(--vk)); line-height: 1.35; color: var(--md-fg2); letter-spacing: .01em; }
/* 單句數字（綜合亮點績效） */
.ms-item--stmt { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: calc(24 * var(--vk)) calc(var(--col-gap) * 2); padding: clamp(calc(8 * var(--vk)), 2vh, calc(24 * var(--vk))) 0 clamp(calc(8 * var(--vk)), 1.5vh, calc(16 * var(--vk))); }
.ms-stmt { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .18em; font-family: var(--f-display); font-size: clamp(calc(24 * var(--vk)), calc(2.6 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(40 * var(--vk))); font-weight: 800; line-height: 1.25; letter-spacing: -.01em; }
.ms-em { font-family: var(--f-cond), var(--f-display); font-size: clamp(calc(72 * var(--vk)), calc(6.4 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(96 * var(--vk))); font-weight: 700; line-height: 1; letter-spacing: -.03em; color: var(--lime); }
.ms-meter { display: grid; grid-template-columns: repeat(10, 1fr); gap: calc(6 * var(--vk)); width: clamp(calc(220 * var(--vk)), calc(28 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(400 * var(--vk))); padding-bottom: .6em; }
.ms-meter i { display: block; height: calc(44 * var(--vk)); border-radius: calc(4 * var(--vk)); background: rgba(244,241,234,.14); transform-origin: 50% 100%; }
.tone-paper .ms-meter i, .tone-lite .ms-meter i { background: rgba(17,17,17,.1); }
.ms-meter i.on { background: var(--lime); }
html.js .ms-item--stmt:not(.is-in) .ms-meter i.on { transform: scaleY(.12); }
html.js .ms-item--stmt .ms-meter i.on { transition: transform var(--d-4) var(--ease-film) calc(400ms + var(--k) * 90ms); }

/* ---------- process-flow 編號步驟 ---------- */
/* 修正輪（美術審查）：三頁同一種編號——兩位數細體序號＋軸線上的 KM BLUE 實心點；英文照原文大小寫（不轉大寫）。
   桌機：每一步是 subgrid 的一欄，六列（序號／英文／標題／小標／說明／條列）跨欄對齊，分隔線與條列起點同高。 */
.pf { --dot: calc(11 * var(--vk)); --mark-h: calc(84 * var(--vk)); }
.pf-title { font-family: var(--f-display); font-size: calc(18 * var(--vk)); font-weight: 800; line-height: 1.4; margin-bottom: clamp(calc(12 * var(--vk)), 2vh, calc(20 * var(--vk))); }
.pf-track { position: relative; }
.pf-rail { position: absolute; left: 0; right: 0; top: calc(var(--mark-h) - var(--dot) / 2 - .5px); height: 1px; background: currentColor; opacity: .28; transform-origin: 0 50%; }
html.js .pf[data-reveal] { opacity: 1; transform: none; }
html.js .pf[data-reveal] .pf-rail { transform: scaleX(0); transition: transform 1.8s var(--ease-film) .1s; }
html.js .pf[data-reveal] .pf-step { opacity: 0; transform: translate3d(0, calc(16 * var(--vk)), 0); transition: opacity var(--d-3) var(--ease-film), transform var(--d-4) var(--ease-film); transition-delay: calc(200ms + var(--i) * 150ms); }
html.js .pf.is-in .pf-rail, html.js .pf.is-in .pf-step { opacity: 1; transform: none; }
.pf-steps { position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); grid-template-rows: repeat(6, auto); column-gap: var(--col-gap); row-gap: 0; }
.pf-step { grid-row: span 6; display: grid; grid-template-rows: subgrid; align-content: start; min-width: 0; }
.pf-step > .pf-mark { grid-row: 1; margin-bottom: calc(14 * var(--vk)); }
.pf-step > .pf-en { grid-row: 2; margin-bottom: calc(4 * var(--vk)); }
.pf-step > .pf-t { grid-row: 3; }
.pf-step > .pf-sub { grid-row: 4; margin-top: calc(4 * var(--vk)); }
.pf-step > .pf-desc { grid-row: 5; margin-top: calc(6 * var(--vk)); }
.pf-step > .pf-points { grid-row: 6; }
.pf-mark { position: relative; height: var(--mark-h); }
.pf-num { position: absolute; left: -.04em; top: 0; font-family: var(--f-cond); font-size: calc(60 * var(--vk)); font-weight: 200; line-height: 1; letter-spacing: -.04em; color: var(--md-acc); }
.pf-dot { position: absolute; left: 0; bottom: 0; width: var(--dot); height: var(--dot); border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 calc(5 * var(--vk)) var(--md-bg); }
.pf-en { font-family: var(--f-cond); font-size: calc(14 * var(--vk)); font-weight: 700; letter-spacing: .06em; color: var(--md-acc); }
.pf--en .pf-en { font-size: clamp(calc(24 * var(--vk)), calc(2 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(28 * var(--vk))); font-weight: 400; letter-spacing: -.005em; line-height: 1.1; }
.pf-t { font-family: var(--f-display); font-size: clamp(calc(18 * var(--vk)), calc(1.5 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(22 * var(--vk))); font-weight: 800; line-height: 1.35; text-wrap: balance; }
.pf-sub { font-size: calc(14 * var(--vk)); font-weight: 700; color: var(--fg); letter-spacing: .04em; }
.tone-ink .pf-sub { color: var(--paper); }
.pf-desc { font-size: calc(15 * var(--vk)); line-height: 1.75; color: var(--md-fg2); text-wrap-style: pretty; }
.pf-points { display: grid; align-content: start; gap: calc(4 * var(--vk)); margin-top: calc(12 * var(--vk)); padding-top: calc(10 * var(--vk)); border-top: 1px solid var(--md-rule); font-size: calc(14.5 * var(--vk)); line-height: 1.6; }
.pf-points > li { position: relative; padding-left: calc(16 * var(--vk)); font-weight: 650; }
.pf-points > li::before { content: ""; position: absolute; left: 0; top: .62em; width: calc(6 * var(--vk)); height: calc(6 * var(--vk)); border-radius: 50%; background: var(--blue); }
.pf-subs { display: grid; gap: calc(2 * var(--vk)); margin-top: calc(4 * var(--vk)); font-weight: 400; color: var(--md-fg2); }
.pf-subs li { position: relative; padding-left: calc(14 * var(--vk)); }
.pf-subs li::before { content: ""; position: absolute; left: 0; top: .8em; width: calc(7 * var(--vk)); height: 1px; background: currentColor; }
/* 案例旁的大數字 */
.pf-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--col-gap); }
.pf-stats li { display: grid; gap: calc(6 * var(--vk)); padding-top: calc(14 * var(--vk)); border-top: calc(2 * var(--vk)) solid currentColor; }
.pf-stat-num { font-family: var(--f-cond); font-size: clamp(calc(48 * var(--vk)), calc(4.6 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(76 * var(--vk))); font-weight: 300; line-height: 1; letter-spacing: -.035em; color: var(--md-acc); white-space: nowrap; }
.pf-stat-l { font-size: calc(14 * var(--vk)); font-weight: 700; line-height: 1.45; }
.tone-ink .md-case-lead { color: var(--fg-inv-2); }

/* ---------- framework-groups 數字分組 ---------- */
.fg { display: grid; border-top: calc(2 * var(--vk)) solid currentColor; }
.fg-group { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: center; gap: calc(12 * var(--vk)) var(--col-gap); padding: clamp(calc(14 * var(--vk)), 2.2vh, calc(22 * var(--vk))) 0; border-bottom: 1px solid var(--md-rule); }
.fg-h { display: flex; align-items: center; gap: calc(10 * var(--vk)); font-family: var(--f-display); font-size: clamp(calc(16 * var(--vk)), calc(1.3 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(19 * var(--vk))); font-weight: 800; line-height: 1.45; text-wrap: balance; }
.fg-n { flex: none; font-family: var(--f-cond); font-size: clamp(calc(60 * var(--vk)), calc(5.4 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(88 * var(--vk))); font-weight: 200; line-height: .86; letter-spacing: -.04em; color: var(--md-acc); }
.fg-heading { min-width: 0; }
.fg-items { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: calc(8 * var(--vk)); }
.fg-item { display: grid; align-content: center; gap: 1px; min-height: calc(58 * var(--vk)); padding: calc(9 * var(--vk)) calc(14 * var(--vk)); border-radius: var(--r-sm); background: var(--paper); box-shadow: inset 0 0 0 1px var(--md-rule); }
.tone-paper .fg-item { background: var(--paper-2); }
.fg-zh { font-size: calc(15.5 * var(--vk)); font-weight: 750; line-height: 1.4; }
.fg-en { font-size: calc(12.5 * var(--vk)); line-height: 1.35; color: var(--md-fg2); }
.fg-range { font-family: var(--f-cond); font-size: calc(14 * var(--vk)); font-weight: 700; letter-spacing: .02em; }
/* 有序程度：KM BLUE 由淺到深（與雷達圖級距環帶、評估模型表的色塊同一組） */
.fg-items--scale .fg-item { background: color-mix(in srgb, var(--blue) calc(var(--t) * 100% * .9 + 8%), var(--paper)); box-shadow: none; }
.fg-items--scale .fg-en { color: var(--ink); }
.fg-basis { position: relative; margin-top: calc(14 * var(--vk)); padding-left: calc(18 * var(--vk)); font-size: calc(13 * var(--vk)); line-height: 1.65; color: var(--md-fg2); }
.fg-basis::before { content: ""; position: absolute; left: 0; top: .5em; border: calc(5 * var(--vk)) solid transparent; border-left: calc(7 * var(--vk)) solid currentColor; border-right: 0; }
html.js .fg-group[data-reveal] .fg-item { opacity: 0; transform: translate3d(0, calc(10 * var(--vk)), 0); transition: opacity var(--d-3) var(--ease-film), transform var(--d-3) var(--ease-film); transition-delay: calc(240ms + var(--k) * 70ms); }
html.js .fg-group.is-in .fg-item { opacity: 1; transform: none; }

/* ---------- radar-chart 雷達圖＋等級定義表 ---------- */
.rd-grid-l { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: calc(var(--col-gap) * 1.5); align-items: center; }
.rd-fig { display: grid; justify-items: center; gap: calc(6 * var(--vk)); min-width: 0; }
.rd-cap { font-family: var(--f-display); font-size: calc(16 * var(--vk)); font-weight: 800; letter-spacing: .04em; }
.rd-chart { position: relative; width: min(100%, calc(520 * var(--vk)), calc(100svh - var(--head-h) - calc(150 * var(--vk)))); aspect-ratio: 1; }
.rd-svg { position: absolute; inset: 20%; width: 60%; height: 60%; overflow: visible; }
.rd-band { fill: color-mix(in srgb, var(--blue) calc(var(--t) * 24% + 4%), var(--md-bg)); }
.rd-ring { fill: none; stroke: var(--md-bg); stroke-width: 1.4; }
.rd-spoke { stroke: var(--md-bg); stroke-width: 1.2; }
.rd-area { fill: var(--blue); fill-opacity: .42; }
.rd-line { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.rd-dot { fill: var(--coral); stroke: var(--md-bg); stroke-width: 1.5; }
/* INK 底：級距環帶用 KM BLUE 由內（尚未意識）到外（共創價值）漸深（低濃度），與右側表格的色塊、同頁「5大議合程度」同一套色階；
   資料多邊形用 PAPER 描邊＋KM BLUE 半透明面。 */
.tone-ink .rd-area { fill: var(--blue); fill-opacity: .5; } .tone-ink .rd-line { stroke: var(--paper); }
.tone-ink .rd-band { fill: color-mix(in srgb, var(--blue) calc(var(--t) * 30% + 5%), var(--ink)); }
.tone-ink .rd-ring, .tone-ink .rd-spoke { stroke: var(--ink); }
html.js .rd-fig[data-draw]:not(.is-in) .rd-area { transform: scale(.2); opacity: 0; }
html.js .rd-fig[data-draw] .rd-area { transition: transform 1.4s var(--ease-film) .2s, opacity .8s var(--ease-film) .2s; }
html.js .rd-fig[data-draw] .rd-line { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.8s var(--ease-film) .35s; }
html.js .rd-fig.is-in .rd-line { stroke-dashoffset: 0; }
html.js .rd-fig[data-draw]:not(.is-in) .rd-dot { opacity: 0; transform: scale(0); transform-box: fill-box; transform-origin: center; }
html.js .rd-fig[data-draw] .rd-dot { transform-box: fill-box; transform-origin: center; transition: opacity .5s, transform .6s var(--ease-spring); transition-delay: calc(900ms + var(--i) * 70ms); }
.rd-labs { position: absolute; inset: 0; }
.rd-lab { position: absolute; left: var(--x); top: var(--y); display: grid; width: max-content; max-width: 22%; line-height: 1.3; font-size: calc(13.5 * var(--vk)); text-align: center; transform: translate(-50%, -50%); }
.rd-lab--l { text-align: left; transform: translate(0, -50%); }
.rd-lab--r { text-align: right; transform: translate(-100%, -50%); }
.rd-lab-t { font-weight: 750; word-break: keep-all; }
.rd-lab-v { font-family: var(--f-cond); font-size: calc(16 * var(--vk)); font-weight: 700; letter-spacing: .02em; color: var(--md-acc); }
.rd-model { min-width: 0; }
.rd-table { width: 100%; border-collapse: collapse; font-size: calc(14.5 * var(--vk)); line-height: 1.6; }
.rd-table thead th { padding: 0 calc(14 * var(--vk)) calc(10 * var(--vk)); text-align: left; font-size: calc(13 * var(--vk)); font-weight: 800; letter-spacing: .12em; border-bottom: calc(2 * var(--vk)) solid currentColor; }
.rd-table tbody tr { border-bottom: 1px solid var(--md-rule); }
.rd-table td, .rd-table tbody th { padding: calc(11 * var(--vk)) calc(14 * var(--vk)); vertical-align: middle; text-align: left; }
.rd-range, .rd-range [data-copy], .rd-lv [data-copy] { white-space: nowrap; }
.rd-range { font-family: var(--f-cond); font-size: calc(15 * var(--vk)); font-weight: 700; letter-spacing: .02em; }
.rd-range::before { content: ""; display: inline-block; width: calc(22 * var(--vk)); height: calc(14 * var(--vk)); margin-right: calc(12 * var(--vk)); border-radius: calc(3 * var(--vk)); vertical-align: calc(-2 * var(--vk)); background: color-mix(in srgb, var(--blue) calc(var(--t) * 100% * .9 + 8%), var(--paper)); }
/* 修正輪：色塊＝圖例（KM BLUE 由淺到深，與「5大議合程度」同色階），加寬成色條，不再像未勾選的核取方塊 */
.rd-lv { white-space: nowrap; }
.rd-zh { display: block; font-weight: 800; }
.rd-en { display: block; font-size: calc(12.5 * var(--vk)); font-weight: 500; color: var(--md-fg2); }
.rd-body { color: var(--md-fg2); }
.tone-paper .rd-body, .tone-lite .rd-body { color: var(--md-ink-2); }

/* ---------- stakeholder-map 利害關係人關係圖 ---------- */
.md-sm { --sm-muted: var(--md-muted); --sm-care: color-mix(in srgb, var(--blue) 20%, var(--paper)); --sm-edu: color-mix(in srgb, var(--blue) 42%, var(--paper)); }
.sm-top { display: grid; gap: calc(14 * var(--vk)); margin-bottom: clamp(calc(14 * var(--vk)), 2vh, calc(22 * var(--vk))); }
.sm-fighead { display: flex; flex-wrap: wrap; align-items: baseline; gap: calc(6 * var(--vk)) calc(24 * var(--vk)); }
.sm-figtitle { font-family: var(--f-display); font-size: calc(18 * var(--vk)); font-weight: 800; }
.sm-note { display: inline-flex; align-items: center; gap: calc(10 * var(--vk)); font-size: calc(14 * var(--vk)); color: var(--md-fg2); }
.sm-note-sw { flex: none; width: calc(16 * var(--vk)); height: calc(16 * var(--vk)); border-radius: calc(4 * var(--vk)); background: var(--sm-muted); box-shadow: inset 0 0 0 1px rgba(17,17,17,.12); }
.sm-phases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: calc(2 * var(--vk)) solid currentColor; border-bottom: 1px solid var(--md-rule); }
.sm-phases li { display: grid; align-content: start; gap: calc(2 * var(--vk)); padding: calc(10 * var(--vk)) calc(16 * var(--vk)) calc(12 * var(--vk)); text-align: center; }
.sm-phases li + li { border-left: 1px solid var(--md-rule); }
/* 修正輪：桌機表頭三欄依圖中三個直欄的分界（phaseCols）決定寬度，服務前／中／後對到下方的欄 */
@media (min-width: 1100px) { .sm-phases--cols { grid-template-columns: var(--pc); } }
.sm-ph-t { font-size: calc(15 * var(--vk)); font-weight: 800; }
.sm-ph-b { font-size: calc(13.5 * var(--vk)); line-height: 1.55; color: var(--md-fg2); }
.sm-map { position: relative; aspect-ratio: var(--ar); container-type: inline-size; color: var(--ink); }
.sm-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sm-edge { fill: none; stroke: var(--md-ink-3); stroke-width: 1.3; stroke-linejoin: round; stroke-linecap: round; color: var(--md-ink-3); }
.sm-edge--out { stroke: var(--coral); color: var(--coral); }
.sm-ah { fill: var(--md-ink-3); } .sm-ao { fill: var(--coral); }
html.js .sm-map[data-draw] .sm-edge { stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; transition: stroke-dashoffset 1.3s var(--ease-film), opacity .3s; transition-delay: calc(250ms + var(--i) * 90ms); }
html.js .sm-map.is-in .sm-edge { stroke-dashoffset: 0; opacity: 1; }
.sm-node { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15em; padding: .35em .7em; border-radius: calc(10 * var(--vk)); text-align: center; font-size: clamp(calc(11 * var(--vk)), 1.3cqw, calc(15.5 * var(--vk))); line-height: 1.35; }
.sm-name { font-weight: 800; }
.sm-detail { font-size: .86em; line-height: 1.4; color: var(--md-ink-2); }
.sm-node--hub { background: var(--coral); color: var(--ink); }
.sm-node--hub .sm-detail { color: var(--ink); }
.sm-node--muted { background: var(--sm-muted); }
.sm-node--care { background: var(--sm-care); justify-content: flex-start; padding: .55em .7em .5em 12%; }
.sm-node--key { z-index: 1; background: var(--ink); color: var(--paper); writing-mode: vertical-rl; letter-spacing: .24em; font-size: clamp(calc(10 * var(--vk)), 1.1cqw, calc(13.5 * var(--vk))); padding: .4em 0; border-radius: calc(10 * var(--vk)) 0 0 calc(10 * var(--vk)); }
.sm-node--child { z-index: 1; background: var(--blue); }
.sm-node--edu { background: var(--sm-edu); }
.sm-node--edu .sm-detail { color: var(--ink); }
.sm-node--gov { background: var(--ink); color: var(--paper); }
.sm-elab { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h); display: flex; flex-direction: column; justify-content: center; font-size: clamp(calc(10 * var(--vk)), 1.12cqw, calc(13.5 * var(--vk))); line-height: 1.35; font-weight: 650; color: var(--md-ink-2); }
.sm-elab--l { align-items: flex-start; text-align: left; }
.sm-elab--r { align-items: flex-end; text-align: right; }
.sm-elab--c { align-items: center; text-align: center; }
.sm-elab--c .sm-elab-t { padding: 0 .5em; background: var(--md-bg); }
.sm-elab--v { writing-mode: vertical-rl; letter-spacing: .3em; }
.sm-bul li { display: flex; gap: .4em; }
.sm-bul li::before { content: ""; flex: none; width: .36em; height: .36em; margin-top: .5em; border-radius: 50%; background: var(--coral); }
html.js .sm-map[data-draw] :is(.sm-node, .sm-elab) { opacity: 0; transition: opacity .7s var(--ease-film); transition-delay: 120ms; }
html.js .sm-map[data-draw] .sm-elab { transition-delay: 900ms; }
html.js .sm-map.is-in :is(.sm-node, .sm-elab) { opacity: 1; }
/* 分層清單：1100px 以下顯示；桌機視覺隱藏（留給螢幕閱讀器） */
.sm-list { display: grid; gap: calc(18 * var(--vk)); }
.sm-group { display: grid; gap: calc(8 * var(--vk)); }
.sm-group-h { display: flex; align-items: center; gap: calc(10 * var(--vk)); font-size: calc(13.5 * var(--vk)); font-weight: 700; color: var(--md-fg2); }
.sm-group-h::before { content: ""; flex: none; width: calc(14 * var(--vk)); height: calc(14 * var(--vk)); border-radius: calc(4 * var(--vk)); background: var(--sm-muted); }
.sm-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(300 * var(--vk))), 1fr)); gap: calc(8 * var(--vk)); }
.sm-card { display: grid; gap: calc(6 * var(--vk)); align-content: start; padding: calc(12 * var(--vk)) calc(14 * var(--vk)) calc(12 * var(--vk)) calc(16 * var(--vk)); border-radius: calc(14 * var(--vk)); background: var(--paper); box-shadow: inset calc(4 * var(--vk)) 0 0 var(--k, var(--sm-muted)), inset 0 0 0 1px var(--md-rule); }
.sm-card--hub { --k: var(--coral); } .sm-card--key { --k: var(--ink); } .sm-card--care { --k: var(--sm-care); } .sm-card--child { --k: var(--blue); } .sm-card--edu { --k: var(--sm-edu); } .sm-card--gov { --k: var(--ink); }
.sm-card--muted { background: var(--sm-muted); }
.sm-card-h { display: grid; gap: calc(2 * var(--vk)); }
.sm-card .sm-name { font-size: calc(16 * var(--vk)); }
.sm-card .sm-detail { font-size: calc(13.5 * var(--vk)); }
.sm-rels { display: grid; gap: calc(6 * var(--vk)); }
.sm-rels li { display: grid; gap: 1px; padding-top: calc(6 * var(--vk)); border-top: 1px dashed rgba(17,17,17,.16); }
.sm-dir { display: flex; flex-wrap: wrap; align-items: center; gap: calc(4 * var(--vk)) calc(6 * var(--vk)); font-size: calc(12.5 * var(--vk)); color: var(--md-ink-2); }
.sm-dir .md-arr { width: calc(14 * var(--vk)); height: calc(14 * var(--vk)); flex: none; color: var(--coral); }
.sm-rel-t { font-size: calc(14.5 * var(--vk)); font-weight: 650; }
@media (min-width: 1100px) {
  .sm-list { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 1099px) { .sm-map { display: none; } }

/* ---------- impact-case SROI 案例 ---------- */
.ic-date { font-family: var(--f-cond); font-size: calc(15 * var(--vk)); font-weight: 700; letter-spacing: .06em; color: var(--md-fg2); }
.ic { border-bottom: 1px solid var(--md-rule); }
.ic-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 10fr); gap: calc(12 * var(--vk)) var(--col-gap); padding: clamp(calc(16 * var(--vk)), 2.6vh, calc(28 * var(--vk))) 0; border-top: 1px solid var(--md-rule); }
.ic-row:first-child { border-top: calc(2 * var(--vk)) solid currentColor; }
.ic-row-l { font-family: var(--f-display); font-size: calc(15 * var(--vk)); font-weight: 800; line-height: 1.5; letter-spacing: .02em; }
.ic-row-l .md-line:nth-child(3) { margin-top: calc(4 * var(--vk)); font-size: calc(12.5 * var(--vk)); font-weight: 500; color: var(--md-fg2); }
.ic-row-c { display: grid; gap: clamp(calc(14 * var(--vk)), 2vh, calc(22 * var(--vk))); min-width: 0; }
.ic-headline { font-family: var(--f-display); font-size: clamp(calc(20 * var(--vk)), calc(1.9 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(28 * var(--vk))); font-weight: 800; line-height: 1.35; }
.ic-headline .num { display: inline-block; margin: 0 .08em; font-family: var(--f-cond); font-size: 1.9em; font-weight: 300; line-height: .8; vertical-align: -.08em; color: var(--md-acc); }
.ic-cells { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--md-rule); }
.ic-cells li { padding: calc(12 * var(--vk)) calc(18 * var(--vk)) 0; }
.ic-cells li:first-child { padding-left: 0; }
.ic-cells li + li { border-left: 1px solid var(--md-rule); }
.ic-cell { font-size: calc(15 * var(--vk)); font-weight: 650; line-height: 1.65; }
.ic-sub { font-family: var(--f-display); font-size: calc(15 * var(--vk)); font-weight: 800; letter-spacing: .04em; margin-bottom: calc(8 * var(--vk)); }
.ic-unit-a { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(calc(14 * var(--vk)), 2vh, calc(20 * var(--vk))) calc(var(--col-gap) * 1.2); }
.ic-ben { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: calc(8 * var(--vk)) calc(18 * var(--vk)); }
.ic-ben .ic-sub { margin: 0; }
.ic-chips { display: flex; flex-wrap: wrap; gap: calc(6 * var(--vk)); }
.ic-chips li { padding: calc(5 * var(--vk)) calc(14 * var(--vk)); border-radius: var(--r-pill); background: color-mix(in srgb, var(--blue) 16%, var(--md-bg)); font-size: calc(14 * var(--vk)); font-weight: 700; }
.ic-kpis { display: grid; gap: calc(12 * var(--vk)); align-content: start; }
.ic-kpi { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: calc(4 * var(--vk)) calc(14 * var(--vk)); padding: calc(10 * var(--vk)) 0; border-top: 1px solid var(--md-rule); }
.ic-kpi--in { grid-template-columns: minmax(0, 1fr); }
.ic-kpi--in .ic-kpi-l { order: -1; }
.ic-kpi-v { line-height: 1; white-space: nowrap; }
.ic-num { font-family: var(--f-cond); font-size: clamp(calc(36 * var(--vk)), calc(3.2 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(52 * var(--vk))); font-weight: 400; line-height: 1; letter-spacing: -.03em; }
.ic-unit { margin-left: .2em; font-size: calc(18 * var(--vk)); font-weight: 800; }
.ic-kpi-l { font-size: calc(14.5 * var(--vk)); font-weight: 650; line-height: 1.5; color: var(--md-fg2); }
.ic-sroi { display: grid; align-content: center; gap: calc(18 * var(--vk)); padding: clamp(calc(18 * var(--vk)), calc(2 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(28 * var(--vk))); border-radius: var(--r-card); background: var(--ink); color: var(--paper); }
.ic-sroi-pair { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: end; gap: calc(12 * var(--vk)) calc(18 * var(--vk)); }
.ic-sroi-side { display: grid; gap: calc(8 * var(--vk)); }
.ic-sroi-num { font-family: var(--f-cond); font-size: clamp(calc(56 * var(--vk)), calc(5.2 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(88 * var(--vk))); font-weight: 300; line-height: 1; letter-spacing: -.04em; }
.ic-sroi-side--out .ic-sroi-num { font-weight: 600; color: var(--blue); }
.ic-sroi-t { font-size: calc(14 * var(--vk)); font-weight: 650; line-height: 1.45; color: var(--fg-inv-2); }
.ic-sroi-arr { align-self: center; color: var(--blue); }
.ic-sroi-arr .md-arr { width: calc(30 * var(--vk)); height: calc(30 * var(--vk)); }
.ic-bars { display: grid; gap: calc(6 * var(--vk)); }
.ic-bars i { display: block; height: calc(6 * var(--vk)); width: calc(var(--w) * 100%); border-radius: calc(3 * var(--vk)); background: rgba(244,241,234,.5); transform-origin: 0 50%; }
.ic-bars i + i { background: var(--blue); }
html.js .ic-sroi:not(.is-in) .ic-bars i { transform: scaleX(0); }
html.js .ic-sroi .ic-bars i { transition: transform 1.6s var(--ease-film) .5s; }
html.js .ic-sroi .ic-bars i + i { transition-delay: .8s; }
.ic-finds, .ic-future { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--col-gap); }
.ic-finds li { display: grid; gap: calc(6 * var(--vk)); align-content: start; padding-top: calc(12 * var(--vk)); border-top: calc(2 * var(--vk)) solid var(--coral); }
.ic-find-t { font-size: calc(17 * var(--vk)); font-weight: 800; }
.ic-find-b, .ic-fu-b { font-size: calc(15 * var(--vk)); line-height: 1.7; color: var(--md-fg2); }
.ic-future li { display: grid; gap: calc(8 * var(--vk)); align-content: start; padding: calc(16 * var(--vk)) calc(18 * var(--vk)); border-radius: var(--r-md); background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--md-rule); }
.tone-lite .ic-future li { background: var(--paper); }
.ic-fu-h { display: grid; gap: calc(2 * var(--vk)); }
.ic-fu-tag { font-size: calc(13 * var(--vk)); font-weight: 700; letter-spacing: .1em; color: var(--md-acc); }
.ic-fu-t { font-size: calc(17 * var(--vk)); font-weight: 800; line-height: 1.4; }

/* ---------- pillars 三大主軸 ---------- */
.pl-title { display: inline-flex; flex-wrap: wrap; align-items: center; gap: calc(4 * var(--vk)) calc(18 * var(--vk)); }
.pl-sep { display: inline-block; width: 1px; height: .9em; background: currentColor; opacity: .35; }
.pl { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--col-gap); align-items: stretch; }
.pl-core { display: flex; flex-direction: column; justify-content: flex-end; gap: calc(6 * var(--vk)); min-height: calc(200 * var(--vk)); padding: clamp(calc(20 * var(--vk)), calc(2.2 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(32 * var(--vk))); border-radius: var(--r-card); background: radial-gradient(80% 90% at 100% 0%, rgba(0,160,224,.35), transparent 62%), var(--ink); color: var(--paper); }
.pl-core-l { font-size: calc(13 * var(--vk)); font-weight: 700; letter-spacing: .2em; color: var(--fg-inv-2); }
.pl-core-zh { font-family: var(--f-display); font-size: clamp(calc(22 * var(--vk)), calc(2.2 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(32 * var(--vk))); font-weight: 800; line-height: 1.3; }
.pl-core-en { font-family: var(--f-cond); font-size: clamp(calc(18 * var(--vk)), calc(1.6 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(24 * var(--vk))); font-weight: 400; letter-spacing: .08em; color: var(--blue); }
.pl-items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--col-gap); }
.pl-item { --c: var(--coral); display: grid; align-content: start; gap: calc(6 * var(--vk)); padding-top: calc(16 * var(--vk)); border-top: calc(4 * var(--vk)) solid var(--c); }
.pl-item:nth-child(2) { --c: var(--blue); }
.pl-item:nth-child(3) { --c: var(--ink); }
.tone-ink .pl-item:nth-child(3) { --c: var(--paper); }
.tone-ink .pl-core { background: radial-gradient(80% 90% at 100% 0%, rgba(0,160,224,.4), transparent 62%), var(--ink-3); }
.pl-zh { font-family: var(--f-display); font-size: clamp(calc(26 * var(--vk)), calc(2.6 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(38 * var(--vk))); font-weight: 900; line-height: 1.15; }
.pl-en { font-family: var(--f-cond); font-size: calc(15 * var(--vk)); font-weight: 700; letter-spacing: .1em; color: var(--md-fg2); }
.pl-tag { justify-self: start; margin-top: calc(6 * var(--vk)); padding: calc(3 * var(--vk)) calc(12 * var(--vk)); border-radius: var(--r-pill); box-shadow: inset 0 0 0 1.5px var(--c); font-size: calc(13.5 * var(--vk)); font-weight: 750; }
.pl-body { font-size: calc(15.5 * var(--vk)); font-weight: 600; line-height: 1.6; }

/* ---------- data-table 數據表 ---------- */
.dt { display: grid; gap: calc(14 * var(--vk)); }
.dt-title { font-family: var(--f-display); font-size: calc(18 * var(--vk)); font-weight: 800; }
.dt-scroll { overflow-x: auto; }
.dt-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.dt-table thead th { padding: 0 calc(16 * var(--vk)) calc(10 * var(--vk)); text-align: right; font-size: calc(14.5 * var(--vk)); font-weight: 800; border-bottom: calc(2 * var(--vk)) solid currentColor; white-space: nowrap; }
.dt-col { display: inline-flex; align-items: center; gap: calc(8 * var(--vk)); }
.dt-col::before { content: ""; width: calc(10 * var(--vk)); height: calc(10 * var(--vk)); border-radius: 50%; background: var(--c, var(--coral)); }
.dt-table thead th:nth-child(3) { --c: var(--blue); }
.dt-table thead th:nth-child(4) { --c: var(--ink); }
.tone-ink .dt-table thead th:nth-child(4), .tone-ink .dt-bar-row td:nth-child(4) .dt-bar { --c: var(--paper); }
.dt-table tbody tr { border-bottom: 1px solid var(--md-rule); }
.dt-table tbody th { padding: calc(12 * var(--vk)) calc(16 * var(--vk)) calc(12 * var(--vk)) 0; text-align: left; font-size: calc(14.5 * var(--vk)); font-weight: 700; white-space: nowrap; }
.dt-table td { padding: calc(12 * var(--vk)) calc(16 * var(--vk)); text-align: right; }
.dt-v { font-family: var(--f-cond); font-size: clamp(calc(18 * var(--vk)), calc(1.6 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(24 * var(--vk))); font-weight: 500; letter-spacing: .01em; }
.dt-bar { --c: var(--coral); display: block; height: calc(4 * var(--vk)); width: calc(var(--w) * 100%); margin: calc(6 * var(--vk)) 0 0 auto; border-radius: calc(2 * var(--vk)); background: var(--c); transform-origin: 100% 50%; }
.dt-bar-row td:nth-child(3) .dt-bar { --c: var(--blue); }
.dt-bar-row td:nth-child(4) .dt-bar { --c: var(--ink); }
html.js .dt[data-reveal]:not(.is-in) .dt-bar { transform: scaleX(0); }
html.js .dt[data-reveal] .dt-bar { transition: transform 1.4s var(--ease-film); transition-delay: calc(400ms + var(--i) * 120ms); }
.dt-notes { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: calc(12 * var(--vk)); align-items: start; font-size: calc(13.5 * var(--vk)); line-height: 1.65; color: var(--md-fg2); }
.dt-notes-l { padding: 0 calc(8 * var(--vk)); border-radius: calc(4 * var(--vk)); box-shadow: inset 0 0 0 1px currentColor; font-weight: 700; }
.dt-notes ol { list-style: decimal; padding-left: 1.3em; display: grid; gap: calc(2 * var(--vk)); }

/* ---------- donut-chart 圓環圖 ---------- */
.dn-grid { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: calc(var(--col-gap) * 1.5); margin-top: clamp(calc(20 * var(--vk)), 3vh, calc(36 * var(--vk))); }
.dn { display: grid; align-content: start; gap: calc(14 * var(--vk)); padding-top: calc(14 * var(--vk)); border-top: calc(2 * var(--vk)) solid currentColor; }
.dn-title { font-family: var(--f-display); font-size: calc(18 * var(--vk)); font-weight: 800; }
.dn-body { display: grid; grid-template-columns: clamp(calc(170 * var(--vk)), calc(17 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(240 * var(--vk))) minmax(0, calc(320 * var(--vk))); justify-content: start; align-items: center; gap: clamp(calc(20 * var(--vk)), calc(2.4 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(40 * var(--vk))); } /* 修正輪：圓環放大到 240px、圖例限寬 320px，數值緊靠標籤 */
.dn-svg { width: 100%; aspect-ratio: 1; }
.dn-track { fill: none; stroke: var(--md-rule); stroke-width: 7; }
.dn-seg { fill: none; stroke-width: 7; }
.dn-g { transform: rotate(-90deg); transform-origin: calc(21 * var(--vk)) calc(21 * var(--vk)); }
html.js .dn[data-reveal]:not(.is-in) .dn-g { transform: rotate(-126deg); opacity: 0; }
html.js .dn[data-reveal] .dn-g { transition: transform 1.6s var(--ease-film) .2s, opacity .9s var(--ease-film) .2s; }
.dn--blue { stroke: var(--blue); background: var(--blue); }
.dn--blue-2 { stroke: var(--md-blue-2); background: var(--md-blue-2); }
.dn--blue-3 { stroke: var(--md-blue-3); background: var(--md-blue-3); }
.dn--ink { stroke: var(--ink); background: var(--ink); }
.tone-ink .dn--ink { stroke: var(--paper); background: var(--paper); }
.dn--coral { stroke: var(--coral); background: var(--coral); }
.dn-legend { display: grid; gap: 0; }
.dn-li { display: grid; grid-template-columns: calc(12 * var(--vk)) minmax(0, 1fr) auto; align-items: center; gap: calc(10 * var(--vk)); padding: calc(8 * var(--vk)) 0; border-bottom: 1px solid var(--md-rule); }
.dn-li:first-child { border-top: 1px solid var(--md-rule); }
.dn-sw { width: calc(12 * var(--vk)); height: calc(12 * var(--vk)); border-radius: calc(3 * var(--vk)); }
.dn-l { font-size: calc(14.5 * var(--vk)); font-weight: 650; }
.dn-v { font-family: var(--f-cond); font-size: calc(20 * var(--vk)); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------- initiative-case 倡議案例 ---------- */
.in-upper { display: grid; }
.in-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--col-gap); }
.in-facts li { display: grid; align-content: start; gap: calc(8 * var(--vk)); padding-top: calc(14 * var(--vk)); border-top: calc(2 * var(--vk)) solid currentColor; }
.in-fact-l, .in-sub { font-family: var(--f-display); font-size: calc(16 * var(--vk)); font-weight: 800; letter-spacing: .02em; }
.in-fact-b { font-size: calc(15 * var(--vk)); line-height: 1.75; color: var(--md-fg2); }
.tone-paper .in-fact-b, .tone-lite .in-fact-b { color: var(--md-ink-2); }
.in-lower { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: calc(var(--col-gap) * 1.5); margin-top: clamp(calc(24 * var(--vk)), 4vh, calc(44 * var(--vk))); align-items: start; }
.in-actions { display: grid; gap: calc(10 * var(--vk)); }
.in-act-list { list-style: decimal; padding-left: 1.3em; display: grid; gap: calc(6 * var(--vk)); font-size: calc(15 * var(--vk)); line-height: 1.75; }
.in-act-list li::marker { font-family: var(--f-cond); font-weight: 700; color: var(--md-acc); }
.in-prog { display: grid; gap: calc(8 * var(--vk)); padding: clamp(calc(18 * var(--vk)), calc(2 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(28 * var(--vk))); border-radius: var(--r-card); background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--md-rule); }
/* 進度卡：KM BLUE 面板＋INK 字（進度條改 INK 填色） */
.in-prog { background: radial-gradient(80% 110% at 100% 0%, rgba(255,255,255,.22), transparent 60%) var(--blue); box-shadow: none; color: var(--ink); }
.in-prog-b { font-size: calc(15 * var(--vk)); line-height: 1.75; }
.in-meter { margin-top: calc(10 * var(--vk)); padding-top: calc(12 * var(--vk)); border-top: 1px solid rgba(17,17,17,.22); } /* 修正輪：不畫進度條（分母待同仁確認） */
.in-meter-v { display: flex; flex-wrap: wrap; align-items: baseline; gap: calc(6 * var(--vk)) calc(14 * var(--vk)); margin-top: calc(10 * var(--vk)); }
.in-meter-num { font-family: var(--f-cond); font-size: clamp(calc(40 * var(--vk)), calc(3.8 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(60 * var(--vk))); font-weight: 400; line-height: 1; letter-spacing: -.03em; }
.in-meter-cap { padding: calc(3 * var(--vk)) calc(12 * var(--vk)); border-radius: var(--r-pill); background: var(--ink); color: var(--paper); font-size: calc(14 * var(--vk)); font-weight: 800; }
/* p.7：數字敘述（案例標頭在左、四行數字在右） */
.in--stmt { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: calc(var(--col-gap) * 2); align-items: start; } /* 修正輪：標頭靠上（與案例 01 同位置），不再垂直置中 */
.in--stmt > .md-case-head { margin: 0; }
.in-stmt { display: grid; gap: calc(2 * var(--vk)); }
.in-st-lead { font-family: var(--f-display); font-size: clamp(calc(18 * var(--vk)), calc(1.6 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(24 * var(--vk))); font-weight: 700; color: var(--md-fg2); }
.in-st-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .28em; margin-bottom: .2em; }
.in-st-num { font-family: var(--f-cond); font-size: clamp(calc(64 * var(--vk)), calc(6 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(96 * var(--vk))); font-weight: 300; line-height: 1; letter-spacing: -.035em; color: var(--md-acc); }
.in-st-unit, .in-st-label { font-family: var(--f-display); font-size: clamp(calc(22 * var(--vk)), calc(2.2 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(32 * var(--vk))); font-weight: 800; }
.in-st-bar { flex-basis: 100%; display: block; height: calc(8 * var(--vk)); margin: calc(12 * var(--vk)) 0 calc(4 * var(--vk)); border-radius: var(--r-pill); background: rgba(127,127,127,.22); overflow: hidden; }
.in-st-bar i { display: block; height: 100%; width: calc(var(--w) * 100%); border-radius: var(--r-pill); background: var(--blue); transform-origin: 0 50%; }
html.js .in-stmt:not(.is-in) .in-st-bar i { transform: scaleX(0); }
html.js .in-stmt .in-st-bar i { transition: transform 1.6s var(--ease-film) .9s; }

/* ---------- photo-gallery 案例照片 ---------- */
/* 修正輪：6 欄網格統一版型（3 張＝每張 2 欄、2 張＝每張 3 欄；4:3）；分組上下排列。 */
.pg { display: grid; gap: clamp(calc(20 * var(--vk)), 3vh, calc(32 * var(--vk))); }
.pg-group { display: grid; align-content: start; gap: calc(10 * var(--vk)); }
.pg-group-h { display: flex; align-items: center; gap: calc(8 * var(--vk)); font-size: calc(13 * var(--vk)); font-weight: 800; letter-spacing: .14em; }
.pg-group-h::before { content: ""; width: calc(8 * var(--vk)); height: calc(8 * var(--vk)); border-radius: calc(2 * var(--vk)); background: var(--blue); }
.pg-list { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: calc(14 * var(--vk)); }
.pg-item { min-width: 0; grid-column: span 2; }
.pg-group[data-n="2"] .pg-item, .pg-group[data-n="4"] .pg-item { grid-column: span 3; }
.pg-group[data-n="1"] .pg-item { grid-column: 2 / span 4; }
.pg-btn { position: relative; display: block; width: 100%; aspect-ratio: 4 / 3; padding: 0; border: 0; border-radius: var(--r-md); overflow: hidden; background: var(--paper-3); cursor: zoom-in; }
.tone-ink .pg-btn { background: var(--ink-3); }
.pg-img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-film); }
.pg-btn:hover .pg-img { transform: scale(1.035); }
.pg-zoom { position: absolute; right: calc(10 * var(--vk)); bottom: calc(10 * var(--vk)); display: grid; place-items: center; width: calc(38 * var(--vk)); height: calc(38 * var(--vk)); border-radius: 50%; background: var(--paper); color: var(--ink); box-shadow: var(--sh-float); opacity: 0; transform: translate3d(0, calc(6 * var(--vk)), 0); transition: opacity var(--d-2), transform var(--d-2) var(--ease-out); }
.pg-zoom-i { width: calc(20 * var(--vk)); height: calc(20 * var(--vk)); }
.pg-sr { background: var(--paper); color: var(--ink); }
.pg-btn:hover .pg-zoom, .pg-btn:focus-visible .pg-zoom { opacity: 1; transform: none; }
@media (hover: none) { .pg-zoom { opacity: 1; transform: none; } }
.pg-btn:focus-visible { outline-offset: calc(4 * var(--vk)); }
html.js .pg[data-reveal] { opacity: 1; transform: none; }
html.js .pg[data-reveal] .pg-item { opacity: 0; transform: translate3d(0, calc(18 * var(--vk)), 0); transition: opacity var(--d-3) var(--ease-film), transform var(--d-4) var(--ease-film); transition-delay: calc(120ms + var(--i) * 90ms); }
html.js .pg.is-in .pg-item { opacity: 1; transform: none; }
/* 放大檢視（原生 dialog） */
html:has(dialog.pg-dlg[open]) { overflow: hidden; }
.pg-dlg { width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; background: var(--ink); color: var(--paper); overflow: hidden; } /* 整合輪：對話框本身鋪實色 INK（原本透明＋backdrop .94，截圖仍看得到底下頁面的字） */
.pg-dlg[open] { display: grid; grid-template-rows: minmax(0, 1fr) auto; justify-items: center; }
.pg-dlg::backdrop { background: var(--ink); }
.pg-full { display: grid; grid-template-rows: minmax(0, 1fr) auto; justify-items: center; align-items: center; gap: calc(12 * var(--vk)); min-height: 0; width: 100%; padding: calc(72 * var(--vk)) calc(24 * var(--vk)) calc(8 * var(--vk)); }
.pg-full img { max-width: min(100%, calc(1600 * var(--vk))); max-height: 100%; width: auto; height: auto; min-height: 0; object-fit: contain; border-radius: calc(12 * var(--vk)); }
.pg-dlg[open] .pg-full img { animation: pgIn .6s var(--ease-film) both; }
@keyframes pgIn { from { opacity: 0; transform: scale(.975); } }
.pg-cap { font-size: calc(14 * var(--vk)); font-weight: 600; letter-spacing: .06em; color: var(--fg-inv-2); }
.pg-nav { display: flex; gap: calc(10 * var(--vk)); padding: calc(8 * var(--vk)) 0 calc(24 * var(--vk)); }
.pg-step { height: calc(44 * var(--vk)); padding: 0 calc(22 * var(--vk)); border: 0; border-radius: var(--r-pill); background: rgba(244,241,234,.12); color: var(--paper); font-size: calc(15 * var(--vk)); font-weight: 650; cursor: pointer; transition: background-color var(--d-2); }
.pg-step:hover { background: rgba(244,241,234,.22); }
.pg-step[hidden] { display: none; }
.pg-close { position: absolute; top: calc(16 * var(--vk)); right: calc(16 * var(--vk)); display: inline-flex; align-items: center; gap: calc(8 * var(--vk)); height: calc(44 * var(--vk)); padding: 0 calc(14 * var(--vk)) 0 calc(20 * var(--vk)); border: 0; border-radius: var(--r-pill); background: var(--paper); color: var(--ink); font-size: calc(15 * var(--vk)); font-weight: 700; cursor: pointer; }
.pg-x { width: calc(20 * var(--vk)); height: calc(20 * var(--vk)); }
.pg-dlg :focus-visible { outline-color: var(--blue); }

/* ---------- ext-links 外部連結列 ---------- */
.md-xl { padding: clamp(calc(24 * var(--vk)), 3.4vh, calc(40 * var(--vk))) 0 clamp(calc(40 * var(--vk)), 6vh, calc(72 * var(--vk))); }
.xl-list { display: flex; flex-wrap: wrap; gap: calc(10 * var(--vk)); }
.xl-a { display: inline-flex; align-items: center; gap: calc(10 * var(--vk)); min-height: calc(46 * var(--vk)); padding: 0 calc(16 * var(--vk)) 0 calc(20 * var(--vk)); border-radius: var(--r-pill); box-shadow: inset 0 0 0 1.5px currentColor; font-size: calc(15 * var(--vk)); font-weight: 700; transition: background-color var(--d-2), color var(--d-2); }
.xl-a .i-arrow { width: calc(16 * var(--vk)); height: calc(16 * var(--vk)); }
.xl-a:hover { background: var(--ink); color: var(--paper); }
.tone-ink .xl-a:hover { background: var(--paper); color: var(--ink); }
/* 修正輪：編號案例列（03、04…）——與其他客戶案例同一個標頭樣式，接續前一個案例的底色；上方一條細線區隔 */
.md-xl--cases { padding-top: clamp(calc(32 * var(--vk)), 5vh, calc(56 * var(--vk))); }
.xl-cases { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: var(--col-gap); padding-top: clamp(calc(28 * var(--vk)), 4vh, calc(44 * var(--vk))); border-top: 1px solid var(--md-rule); }
.xl-case .md-case-head { margin: 0; }
/* ---------- client-list 客戶名單（服務內頁「客戶案例」，Tommy 2026-09-25） ----------
   文字型名單：每格上緣 1px 細線＋兩位數序號（KM BLUE）＋客戶名稱（display 字）；有網址的整格是連結（↗），hover 時上緣以 KM BLUE 由左描出。
   不做 Logo、不加描述或年份。桌機 3 欄／平板 2 欄／手機 1 欄；只用 transform／opacity（不用 filter、backdrop-filter）。 */
.md-cl { padding-bottom: clamp(calc(48 * var(--vk)), 7vh, calc(96 * var(--vk))); }
.md-chapter-blk + .md-cl { padding-top: clamp(calc(20 * var(--vk)), 3vh, calc(36 * var(--vk))); }
.cl-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--col-gap); }
.cl-item { position: relative; border-top: 1px solid var(--md-rule); }
.cl-item::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: calc(2 * var(--vk)); background: var(--blue); transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--d-2) var(--ease-film); pointer-events: none; }
.cl-item:has(.cl-cell--link:is(:hover, :focus-visible))::before { transform: scaleX(1); }
.cl-cell { display: flex; flex-direction: column; align-items: flex-start; gap: calc(10 * var(--vk)); height: 100%; padding: calc(18 * var(--vk)) 0 calc(26 * var(--vk)); color: inherit; }
.cl-idx { font-family: var(--f-cond); font-size: calc(15 * var(--vk)); font-weight: 700; line-height: 1; letter-spacing: .06em; color: var(--md-acc); }
.cl-line { display: block; font-family: var(--f-display); font-size: clamp(calc(20 * var(--vk)), calc(1.7 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(26 * var(--vk))); font-weight: 800; line-height: 1.35; letter-spacing: -.005em; word-break: keep-all; line-break: strict; overflow-wrap: anywhere; text-wrap: balance; }
.cl-nw { white-space: nowrap; }
.cl-ico { display: inline-block; margin-left: .3em; color: var(--md-acc); vertical-align: -.08em; }
.cl-ico .i-arrow { display: block; width: .78em; height: .78em; transition: transform var(--d-2) var(--ease-spring); }
.cl-cell--link { border-radius: calc(4 * var(--vk)); }
.cl-cell--link:hover .cl-ico .i-arrow, .cl-cell--link:focus-visible .cl-ico .i-arrow { transform: translate(calc(2 * var(--vk)), calc(-2 * var(--vk))); }
.cl-cell--link:hover .cl-name { text-decoration: underline; text-underline-offset: calc(5 * var(--vk)); text-decoration-thickness: 1px; }
.cl-cell--link:focus-visible { outline-offset: calc(4 * var(--vk)); }

/* ---------- 服務內頁銜接 ---------- */
.svc-items-page + .md-blk { padding-top: clamp(calc(24 * var(--vk)), 3.4vh, calc(44 * var(--vk))); }
.md-blk + .blk-link-index { margin-top: 0; }

/* ---------- 平板／手機 ---------- */
@media (max-width: 1099px) {
  .cl-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rd-grid-l { grid-template-columns: minmax(0, 1fr); }
  .rd-chart { width: min(100%, calc(520 * var(--vk))); }
}
@media (max-width: 899px) {
  .md-case-head--aside { grid-template-columns: minmax(0, 1fr); }
  .md-case-head--aside > .pf-stats { grid-column: 1; grid-row: auto; margin-top: calc(8 * var(--vk)); }
  .ms-grid--feature { grid-template-columns: minmax(0, 1fr); }
  .ms-rows .ms-item { grid-template-columns: minmax(0, 1fr); }
  .ms-rows .ms-top { grid-row: auto; }
  .ms-rows .ms-item > :not(.ms-top) { grid-column: 1; }
  .ms-tags li { flex-basis: calc(50% - calc(3 * var(--vk))); }
  .ms-item--stmt { grid-template-columns: minmax(0, 1fr); }
  .pf { --mark-h: 0px; }
  .pf-rail { display: none; }
  .pf-steps { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: 0; }
  .pf-step { grid-row: auto; position: relative; grid-template-rows: none; grid-template-columns: calc(56 * var(--vk)) minmax(0, 1fr); gap: 0 calc(12 * var(--vk)); padding-bottom: calc(22 * var(--vk)); }
  .pf-step > :not(.pf-mark) { grid-column: 2; grid-row: auto; }
  .pf-step > .pf-mark { grid-column: 1; grid-row: 1 / span 6; margin: 0; }
  .pf-step::before { content: ""; position: absolute; left: calc(5 * var(--vk)); top: calc(22 * var(--vk)); bottom: 0; width: 1px; background: currentColor; opacity: .22; }
  .pf-step:last-child { padding-bottom: 0; }
  .pf-step:last-child::before { display: none; }
  .pf-mark { height: auto; min-height: calc(40 * var(--vk)); }
  .pf-num { position: static; display: block; padding-left: calc(20 * var(--vk)); font-size: calc(32 * var(--vk)); }
  .pf-dot { top: calc(11 * var(--vk)); bottom: auto; }
  .pf--en .pf-en { font-size: calc(24 * var(--vk)); }
  .fg-group { grid-template-columns: minmax(0, 1fr); }
  .fg-items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fg-items[style*="--n:3;"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fg-items--scale { grid-template-columns: minmax(0, 1fr); }
  .fg-items--scale .fg-item { grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: calc(12 * var(--vk)); min-height: 0; }
  .fg-items--scale .fg-range { grid-row: 1 / span 2; grid-column: 2; align-self: center; }
  .ic-row { grid-template-columns: minmax(0, 1fr); }
  .ic-row-l .md-line { display: inline; }
  .ic-row-l .md-line:nth-child(3) { display: block; }
  .ic-cells, .ic-finds, .ic-future, .ic-unit-a { grid-template-columns: minmax(0, 1fr); }
  .ic-cells li { padding: calc(10 * var(--vk)) 0; }
  .ic-cells li + li { border-left: 0; border-top: 1px solid var(--md-rule); }
  .pl, .pl-items { grid-template-columns: minmax(0, 1fr); }
  .pl-core { min-height: 0; }
  .dn-grid { grid-template-columns: minmax(0, 1fr); }
  /* 客戶名單修正輪：案例列（impact-management 03 LINE／04 遠雄／05 SOGO）手機一列一項，項目之間同一條細線、同一個間距 */
  .xl-cases { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .xl-case + .xl-case { margin-top: calc(20 * var(--vk)); padding-top: calc(20 * var(--vk)); border-top: 1px solid var(--md-rule); }
  .in-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .in-lower, .in--stmt { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 599px) {
  .md-blk { padding: clamp(calc(32 * var(--vk)), 5vh, calc(48 * var(--vk))) 0; }
  .md-chapter-blk { padding-top: calc(40 * var(--vk)); }
  .md-chapter-t { font-size: calc(24 * var(--vk)); }
  .md-case-t { font-size: calc(20 * var(--vk)); }
  .cl-list { grid-template-columns: minmax(0, 1fr); }
  .cl-cell { flex-direction: row; align-items: baseline; gap: 0; padding: calc(15 * var(--vk)) 0 calc(16 * var(--vk)); }
  .cl-idx { flex: none; width: calc(46 * var(--vk)); }
  .cl-line { flex: 1 1 auto; min-width: 0; font-size: calc(19 * var(--vk)); }
  .cl-item:last-child { border-bottom: 1px solid var(--md-rule); }
  .md-case-lead { font-size: calc(15 * var(--vk)); line-height: 1.75; }
  .ms-num, .pf-stat-num { font-size: calc(52 * var(--vk)); }
  .ms-em { font-size: calc(64 * var(--vk)); }
  .ms-meter i { height: calc(28 * var(--vk)); }
  .rd-lab { font-size: calc(13 * var(--vk)); max-width: 25%; line-height: 1.25; }
  .rd-lab-v { font-size: calc(14 * var(--vk)); }
  .rd-table thead { display: none; }
  .rd-table, .rd-table tbody, .rd-table tr { display: block; }
  .rd-table tr { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: calc(2 * var(--vk)) calc(12 * var(--vk)); padding: calc(10 * var(--vk)) 0; }
  .rd-table td, .rd-table tbody th { padding: 0; }
  .rd-body { grid-column: 1 / -1; font-size: calc(14 * var(--vk)); line-height: 1.55; }
  .rd-lv { display: flex; align-items: baseline; gap: calc(8 * var(--vk)); }
  .rd-zh, .rd-en { display: inline; }
  .sm-phases { grid-template-columns: minmax(0, 1fr); }
  .sm-phases li { text-align: left; padding: calc(8 * var(--vk)) 0; }
  .sm-phases li + li { border-left: 0; border-top: 1px solid var(--md-rule); }
  .ic-sroi-pair { grid-template-columns: minmax(0, 1fr); gap: calc(6 * var(--vk)); }
  .ic-sroi-arr { justify-self: start; transform: rotate(90deg); }
  .ic-sroi-num { font-size: calc(56 * var(--vk)); }
  .in-facts { grid-template-columns: minmax(0, 1fr); }
  .dn-body { grid-template-columns: calc(132 * var(--vk)) minmax(0, 1fr); gap: calc(16 * var(--vk)); }
  .pg-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(8 * var(--vk)); }
  .pg-item, .pg-group[data-n] .pg-item { grid-column: span 1; }
  .pg-group[data-odd="1"] .pg-item:first-child { grid-column: 1 / -1; }
  .dt-table thead th, .dt-table td { padding-left: calc(8 * var(--vk)); padding-right: 0; }
  .dt-table thead th { font-size: calc(13 * var(--vk)); }
  .dt-table tbody th { font-size: calc(13 * var(--vk)); }
  .dt-v { font-size: calc(16 * var(--vk)); }
  .pg-close { top: calc(12 * var(--vk)); right: calc(12 * var(--vk)); }
}

/* ---------- 減少動態 ---------- */
@media (prefers-reduced-motion: reduce) {
  html.js .md-roll .num,
  html.js .md-chapter[data-reveal] :is(.md-chapter-t, .md-chapter-rule),
  html.js .pf[data-reveal] :is(.pf-rail, .pf-step), html.js .fg-group[data-reveal] .fg-item,
  html.js .rd-fig[data-draw] :is(.rd-area, .rd-dot), html.js .sm-map[data-draw] :is(.sm-node, .sm-elab, .sm-edge),
  html.js .ic-sroi .ic-bars i, html.js .dt .dt-bar, html.js .dn .dn-g, html.js .in-stmt .in-st-bar i,
  html.js .pg[data-reveal] .pg-item, html.js .ms-item--stmt .ms-meter i.on { opacity: 1 !important; transform: none !important; transition: none !important; }
  html.js .dn .dn-g { transform: rotate(-90deg) !important; }
  html.js .rd-fig[data-draw] .rd-line, html.js .sm-map[data-draw] .sm-edge { stroke-dashoffset: 0 !important; }
}
html.reduce-motion.js :is(.md-roll .num, .md-chapter[data-reveal] .md-chapter-t, .md-chapter[data-reveal] .md-chapter-rule, .pf[data-reveal] .pf-rail, .pf[data-reveal] .pf-step, .fg-group[data-reveal] .fg-item, .rd-fig[data-draw] .rd-area, .rd-fig[data-draw] .rd-dot, .sm-map[data-draw] .sm-node, .sm-map[data-draw] .sm-elab, .sm-map[data-draw] .sm-edge, .ic-sroi .ic-bars i, .dt .dt-bar, .in-stmt .in-st-bar i, .pg[data-reveal] .pg-item, .ms-item--stmt .ms-meter i.on) { opacity: 1 !important; transform: none !important; transition: none !important; }
html.reduce-motion.js .dn .dn-g { opacity: 1 !important; transform: rotate(-90deg) !important; transition: none !important; }
html.reduce-motion.js :is(.rd-fig[data-draw] .rd-line, .sm-map[data-draw] .sm-edge) { stroke-dashoffset: 0 !important; }

/* 08-interact.css */
/* 釘選區塊的直接點選（Tommy 2026-09-25：「每個項目也可以滑鼠直接點選，而不是只有滑動」）
   Why VEDA KM 四大特色、首頁服務帶 01–05、產業星座星點。行為在 runtime/site.js（bindPinGo、setupConstellation）。 */

/* 四大特色：v7 起樣式在 styles/15-features.css（整列可點、Tab 聚焦） */

/* 服務帶：01–05 編號，點選跳到該卡 */
.rail-nav { grid-column: 1 / -1; }
.rail-nav ol { display: flex; flex-wrap: wrap; gap: calc(8 * var(--vk)); }
.rail-go {
  appearance: none; margin: 0; border: 0; cursor: pointer;
  min-width: calc(48 * var(--vk)); height: calc(34 * var(--vk)); padding: 0 calc(14 * var(--vk)); border-radius: var(--r-pill);
  font-family: var(--f-cond); font-size: calc(14 * var(--vk)); font-weight: 600; letter-spacing: .16em;
  color: var(--ink); background: rgba(17,17,17,.06);
  transition: background-color var(--d-1), color var(--d-1);
}
.rail-go:hover { background: rgba(17,17,17,.12); }
.rail-go.is-active { background: var(--ink); color: var(--paper); }
.rail-go:focus-visible { outline: calc(2 * var(--vk)) solid var(--blue); outline-offset: calc(2 * var(--vk)); }
@media (max-width: 899px) { .rail-nav { display: none; } }

/* 產業星座：有對應產業的星點可點 */
.star.has-link { cursor: pointer; }

/* 09-type.css */
/* 依句讀換行（Tommy 2026-09-25：「這個斷句閱讀起來非常奇怪」；區塊渲染器 phraseText 輸出 .ph）
   每個子句是一個 inline-block：優先在子句之間（標點後）換行；子句比欄寬還長時，才在子句內的詞界（<wbr>）換行。
   子句內承襲標題的 text-wrap: balance，讓子句內的斷行也平均。 */
.ph { display: inline-block; max-width: 100%; word-break: keep-all; overflow-wrap: anywhere; }

/* 10-home.css */
/* v25 首頁輪（BRIEF_v25_home）追加樣式。
   頁尾版權列（§3，Tommy 提供原文 owner.footer.copyright）：分成「© 2026 致德國際股份有限公司」「VEDA KM Corp. ｜ vedakm.com」兩段，窄螢幕只在兩段之間換行；
   vedakm.com 連回首頁。它是唯一夾在句子中間的連結，平常與前後文同色，所以加一條細的半透明底線讓它看得出可點（手機沒有滑過狀態；WCAG 1.4.1 不只靠顏色區分連結）；
   hover 與頁尾其他連結同為 KM BLUE。 */
.foot-copy-w { white-space: nowrap; }
.foot-copy a {
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: calc(3 * var(--vk));
  text-decoration-color: rgba(244,241,234,.4);
  transition: color var(--d-2) var(--ease-out), text-decoration-color var(--d-2) var(--ease-out);
}
.foot-copy a:hover { color: var(--blue); text-decoration-color: currentColor; }

/* 首頁第 6 區：集團平台入口（BRIEF_v25_home §2）。像國際論壇的主辦／協辦單位列：細標題＋三張白卡，Logo 原色、不加濾鏡；
   Logo 以顯示高度 --h 平衡視覺大小（字面寬高比不同，不用等寬）。整張卡是另開新視窗的連結，右上角小箭頭表示外部連結。 */
.blk-group-platforms { padding-block: clamp(calc(56 * var(--vk)), 8vh, calc(104 * var(--vk))); }
.gp-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); align-items: center; gap: calc(24 * var(--vk)) var(--col-gap); }
.gp-title { font-family: var(--f-display); font-size: clamp(calc(20 * var(--vk)), calc(1.7 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(26 * var(--vk))); font-weight: 800; line-height: 1.3; letter-spacing: .02em; display: flex; align-items: center; gap: calc(12 * var(--vk)); }
.gp-title::before { content: ""; width: calc(10 * var(--vk)); height: calc(10 * var(--vk)); border-radius: calc(3 * var(--vk)); background: var(--blue); flex: none; }
.gp-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(calc(12 * var(--vk)), calc(1.4 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(20 * var(--vk))); }
.gp-link {
  position: relative; display: grid; place-items: center; height: clamp(calc(120 * var(--vk)), calc(11 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(150 * var(--vk))); padding: calc(20 * var(--vk)) calc(28 * var(--vk));
  border-radius: var(--r-md); background: #fff; box-shadow: var(--sh-1);
  transition: transform var(--d-2) var(--ease-out), box-shadow var(--d-2) var(--ease-out);
}
/* --h 是不帶單位的數字（inline style 不寫 px，scale.mjs）；* 10px / 10 讓建置把 10px 換成縮放單位（寫 * 1px 會被當髮絲線不放大） */
.gp-logo { display: block; height: calc(var(--h, 40) * calc(10 * var(--vk)) / 10); width: auto; max-width: 100%; object-fit: contain; }
.gp-ext { position: absolute; top: calc(12 * var(--vk)); right: calc(12 * var(--vk)); width: calc(26 * var(--vk)); height: calc(26 * var(--vk)); display: grid; place-items: center; border-radius: 50%; color: var(--ink); background: rgba(17,17,17,.05); opacity: .55; transition: opacity var(--d-2), background-color var(--d-2), color var(--d-2); }
.gp-ext .i-arrow { width: calc(14 * var(--vk)); height: calc(14 * var(--vk)); }
.gp-link:hover { transform: translateY(calc(-3 * var(--vk))); box-shadow: var(--sh-2); }
.gp-link:hover .gp-ext { opacity: 1; background: var(--blue); color: #fff; }
.gp-link:focus-visible { outline: calc(3 * var(--vk)) solid var(--blue); outline-offset: calc(3 * var(--vk)); }
@media (max-width: 899px) {
  .gp-grid { grid-template-columns: 1fr; }
  .gp-list { grid-template-columns: 1fr; }
  .gp-link { height: calc(104 * var(--vk)); }
}
@media (prefers-reduced-motion: reduce) { .gp-link, .gp-link:hover { transform: none; } }

/* 首頁第 5 區下半：客戶／夥伴 Logo 牆（尚無 Logo → 只有「內容準備中」細帶），與上方數字帶同色、視為同一區 */
.blk-logo-wall { padding-block: 0 clamp(calc(40 * var(--vk)), 6vh, calc(72 * var(--vk))); }
.lw-pend .pend-strip { margin: 0; }
.lw-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(140 * var(--vk)), 1fr)); gap: calc(16 * var(--vk)); }
.lw-item { display: grid; place-items: center; height: calc(96 * var(--vk)); border-radius: var(--r-md); background: #fff; }
.lw-item img { max-height: calc(44 * var(--vk)); width: auto; max-width: 80%; }
.blk-logo-wall.tone-blue .pend-strip, .blk-logo-wall.tone-blue .pend-strip .ui { color: var(--ink); } /* KM BLUE 上用 INK 字（對比 ≥ 4.5:1） */
.blk-logo-wall.tone-blue .pend-strip { border-color: rgba(17,17,17,.22); }
@media (max-width: 899px) { .gp-logo { height: calc(var(--h, 40) * calc(8.5 * var(--vk)) / 10); } }

/* 最新消息：連結預覽卡（像 FB 連結分享：主圖 1.91:1＋來源／日期＋標題＋摘要），整張卡另開新視窗到原文 */
.blk-news-cards { padding-block: clamp(calc(56 * var(--vk)), 8vh, calc(104 * var(--vk))); }
.nc-head { display: flex; align-items: end; justify-content: space-between; gap: calc(16 * var(--vk)); margin-bottom: clamp(calc(20 * var(--vk)), 3vh, calc(32 * var(--vk))); }
.nc-more { display: inline-flex; align-items: center; gap: calc(8 * var(--vk)); font-weight: 700; font-size: calc(15 * var(--vk)); color: var(--ink); }
.nc-more .i-arrow { width: calc(18 * var(--vk)); height: calc(18 * var(--vk)); transition: transform var(--d-2) var(--ease-out); }
.nc-more:hover .i-arrow { transform: translateX(calc(3 * var(--vk))); }
.nc-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(calc(16 * var(--vk)), calc(1.6 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(24 * var(--vk))); }
.nc-card {
  position: relative; display: flex; flex-direction: column; height: 100%; overflow: hidden;
  border-radius: var(--r-md); background: #fff; box-shadow: var(--sh-1); color: var(--ink);
  transition: transform var(--d-2) var(--ease-out), box-shadow var(--d-2) var(--ease-out);
}
.nc-media { display: block; aspect-ratio: 1.91 / 1; overflow: hidden; background: var(--paper-2); }
.nc-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--d-3) var(--ease-out); }
.nc-body { display: grid; gap: calc(8 * var(--vk)); padding: calc(18 * var(--vk)) calc(20 * var(--vk)) calc(22 * var(--vk)); }
.nc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: calc(4 * var(--vk)) calc(12 * var(--vk)); font-size: calc(12.5 * var(--vk)); font-weight: 700; letter-spacing: .04em; color: #43484D; }
.nc-site { color: #0A6E96; }
.nc-date { font-family: var(--f-cond); letter-spacing: .08em; }
.nc-title { font-family: var(--f-display); font-size: clamp(calc(16 * var(--vk)), calc(1.25 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(18.5 * var(--vk))); font-weight: 800; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.nc-desc { font-size: calc(14.5 * var(--vk)); line-height: 1.7; color: #3B4045; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.nc-ext { position: absolute; top: calc(12 * var(--vk)); right: calc(12 * var(--vk)); width: calc(30 * var(--vk)); height: calc(30 * var(--vk)); display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.92); color: var(--ink); box-shadow: 0 calc(2 * var(--vk)) calc(8 * var(--vk)) rgba(17,17,17,.12); transition: background-color var(--d-2), color var(--d-2); }
.nc-ext .i-arrow { width: calc(14 * var(--vk)); height: calc(14 * var(--vk)); }
.nc-card:hover { transform: translateY(calc(-3 * var(--vk))); box-shadow: var(--sh-2); }
.nc-card:hover .nc-media img { transform: scale(1.03); }
.nc-card:hover .nc-ext { background: var(--blue); color: #fff; }
.nc-card:focus-visible { outline: calc(3 * var(--vk)) solid var(--blue); outline-offset: calc(3 * var(--vk)); }
@media (max-width: 1099px) { .nc-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 699px) { .nc-list { grid-template-columns: 1fr; } .nc-head { align-items: center; } }
@media (prefers-reduced-motion: reduce) { .nc-card, .nc-card:hover, .nc-card:hover .nc-media img { transform: none; } }
.nc-title { word-break: keep-all; overflow-wrap: anywhere; text-wrap: pretty; }

/* 11-transition.css */
/* 轉場輪（BRIEF_v25_hero §1，2026-09-26）：開場 stage-hero → Why VEDA KM（features-pinned）。
   Tommy：「這個轉場空白的地方有點久才到下一個資訊，看能不能更絲滑一點。」
   1. 開場導言面板（實色 INK）全程不透明、隨區塊往上捲走（05-blocks）；主標在釘選期間淡出。面板還在畫面上時，Why VEDA KM 標題已從下方浮現。
   2. 兩個場景的交界不再是硬邊（藍天直接切到黑底）：開場區塊底部一段由透明漸到 INK（隨離場進度 --p 出現，靜止的第一屏不變），
      四大特色區塊頂部一段由 INK 漸回透明（蓋住 orbit 光核在交界被切齊的邊）；交界兩側各有一小段全 INK，canvas 慢一兩幀時也看不到接縫。
      這兩段漸層只在交界、不在任何文字後方（不是文字墊色，文字仍由場景安靜區負責，visuals/README §7）。
      final-a：orbit 的背光霧很亮，只靠這 112 px 仍看得出一條水平亮邊 → 場景本身也在區塊頂往下 280 px（手機 56 px，在標題之前完成）由 INK 亮起
      （visuals/presets/orbit.js orbitTopSink，uElY），這裡的漸層只負責蓋住 canvas 慢一兩幀時的接縫。
   3. Why VEDA KM 標題隨進場浮現：runtime/site.js 在區塊頂進入視窗後 0.4 視窗高內把 --in 由 0 寫到 1；標題由下方 32px 升起、由 35% 亮到 100%。
      沒有 JS（--in 未定義）或減少動態時直接完整顯示。 */
.blk-stage-hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: -1; pointer-events: none;
  height: clamp(calc(150 * var(--vk)), 22svh, calc(220 * var(--vk)));
  background: linear-gradient(180deg, rgba(17,17,17,0) 0%, rgba(17,17,17,.3) 38%, rgba(17,17,17,.8) 70%, var(--ink) 88%);
  opacity: var(--p);
}
.blk-features-pinned::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; z-index: -1; pointer-events: none;
  height: clamp(calc(72 * var(--vk)), 11svh, calc(112 * var(--vk)));
  background: linear-gradient(180deg, var(--ink) 0%, var(--ink) 22%, rgba(17,17,17,.55) 58%, rgba(17,17,17,0) 100%);
}
/* 手機：Why VEDA KM 標題離區塊頂只有 --sec-y（≈ 68px），漸層收短到 44px，不延伸到標題後方（calm：標題框內不能有明暗漸變） */
@media (max-width: 899px) {
  .blk-features-pinned::before { height: calc(44 * var(--vk)); background: linear-gradient(180deg, var(--ink) 0%, var(--ink) 18%, rgba(17,17,17,0) 100%); }
}
.feat-head {
  opacity: calc(.35 + .65 * var(--in, 1));
  transform: translate3d(0, calc((1 - var(--in, 1)) * calc(32 * var(--vk))), 0);
}
@media (prefers-reduced-motion: reduce) { .feat-head { opacity: 1; transform: none; } }
html.reduce-motion .feat-head { opacity: 1; transform: none; }

/* v7（2026-09-27，Tommy 對「首頁主標約捲 0.12 視窗高就淡完」：「停久一點」）曾改成主標依捲動距離晚一點淡出（--tf／--ef／--ep／--uf／--x）。
   v7-fix（美術審查「主標淡出比說明卡片早很多，卡片上方留下一片空的藍天，離場不同步」；對抗驗證「淡出途中留下沒有字的眉標膠囊、底線殘段」）：
   主標、眉標、底線不再各自淡出或左右微移，和導言面板當成同一組、一起隨區塊自然捲走——停留時間＝整組還在畫面上的整段距離，離場完全同步。
   相關規則已刪除（runtime/site.js 的 stageFade、這裡的變數規則、05-blocks.css 底線的 --uf）；場景的安靜區跟著主標走到它離開畫面（hero-dawn.js）。 */

/* 12-cards.css */
/* ---------- 12-cards：首頁服務帶卡片（v25 cards 輪，2026-09-26） ----------
   Tommy：「這幾個好像修太多了，底圖變得有點空。」＋先前「文字都不要壓到複雜的底圖」。
   卡片＝上方「影像窗」（.v-layer.rail-img：引擎把該類別卡片變體的靜態場景圖畫成它的背景，尺寸＝影像窗）
        ＋下方「文字區」（.rail-body：場景基調的實色底，data-base＝paper｜blue｜ink）。文字完全不疊在影像上。
   影像窗與文字區之間：文字區上緣一道同色漸層（::before）蓋住影像窗下緣 56px，不留硬邊；場景本身的下緣也收成同一個主色。
   覆蓋 05-blocks.css 的舊規則（.rail-card 固定高、.rail-link padding、.rail-n 大字序號、.rail-items wash 膠囊）。
   桌機：卡片不設固定高，高度＝影像窗＋文字區；同一列的卡片由 flex 撐成一樣高（「了解更多」貼齊底部）。 */

.rail-card {
  --win: clamp(calc(156 * var(--vk)), 23svh, calc(250 * var(--vk)));
  --base: 244,241,234;            /* 文字區底色（rgb 三值） */
  --b-on: var(--ink); --b-on-2: #2E3236; --b-rule: rgba(17,17,17,.16); --b-pill: rgba(17,17,17,.055);
  display: flex; flex-direction: column;
  height: auto; align-self: stretch;
  background: rgb(var(--base));
}
.rail-card[data-base="blue"] { --base: 0,160,224;  --b-on: var(--ink);   --b-on-2: var(--ink); --b-rule: rgba(17,17,17,.24); --b-pill: rgba(244,241,234,.30); }
.rail-card[data-base="ink"]  { --base: 17,17,17;   --b-on: var(--paper); --b-on-2: rgba(244,241,234,.86); --b-rule: rgba(244,241,234,.24); --b-pill: rgba(244,241,234,.08); }

/* 影像窗：v-layer 只佔卡片上方（圓角由卡片 overflow:hidden 裁出，與卡片一致） */
.rail-card > .v-layer.rail-img { inset: 0 0 auto 0; height: var(--win); z-index: 0; }
.rail-card:has(> .v-layer:not([data-v-ready])), html[data-webgl="fallback"] .rail-card { background-color: rgb(var(--base)); }

.rail-link { position: relative; z-index: 1; display: flex; flex-direction: column; flex: 1 1 auto; height: auto; padding: 0; background: none; color: var(--b-on); }
.rail-win { position: relative; flex: none; height: var(--win); }
/* 序號：影像窗左上的不透明小徽章 */
.rail-n {
  position: absolute; left: clamp(calc(14 * var(--vk)), calc(1.3 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(20 * var(--vk))); top: clamp(calc(14 * var(--vk)), calc(1.3 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(20 * var(--vk)));
  display: inline-flex; align-items: center; justify-content: center; min-width: calc(46 * var(--vk)); height: calc(32 * var(--vk)); padding: 0 calc(12 * var(--vk));
  border-radius: var(--r-pill); background: rgba(var(--base), .94); color: var(--b-on);
  font-family: var(--f-cond); font-size: calc(17 * var(--vk)); font-weight: 500; line-height: 1; letter-spacing: .06em;
  box-shadow: 0 1px calc(2 * var(--vk)) rgba(17,17,17,.12);
}
/* cards-fix（美術審查 low：03 的序號徽章與墨黑底同色，看不到框；05 的藍底徽章落在藍色海面上也一樣）：五張的徽章一律米白底＋墨黑字，
   在任何影像上都看得到膠囊外框，五張一致 */
.rail-card .rail-n { background: rgba(244,241,234,.94); color: var(--ink); box-shadow: 0 1px calc(3 * var(--vk)) rgba(17,17,17,.22); }

.rail-body {
  position: relative; flex: 1 1 auto; display: flex; flex-direction: column;
  padding: clamp(calc(14 * var(--vk)), calc(1.5 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(22 * var(--vk))) clamp(calc(20 * var(--vk)), calc(2 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(30 * var(--vk))) clamp(calc(18 * var(--vk)), calc(1.9 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(28 * var(--vk)));
  background: rgb(var(--base));
}
.rail-body::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: calc(56 * var(--vk)); pointer-events: none;
  background: linear-gradient(180deg, rgba(var(--base), 0) 0%, rgba(var(--base), .55) 55%, rgb(var(--base)) 100%);
}
.rail-title { margin: 0; font-family: var(--f-display); font-size: clamp(calc(21 * var(--vk)), calc(1.7 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(27 * var(--vk))); font-weight: 800; line-height: 1.22; letter-spacing: -.01em; color: var(--b-on); text-shadow: none !important; }
.rail-desc { margin-top: calc(8 * var(--vk)); font-size: calc(15.5 * var(--vk)); line-height: 1.65; color: var(--b-on-2); max-width: 30em; }
.rail-card[data-key="paper"] .rail-desc { color: var(--b-on-2); }
.rail-items { display: flex; flex-wrap: wrap; gap: calc(6 * var(--vk)); margin-top: calc(12 * var(--vk)); }
.rail-items li { padding: calc(4 * var(--vk)) calc(11 * var(--vk)); border-radius: var(--r-pill); font-size: calc(12 * var(--vk)); font-weight: 600; letter-spacing: .04em; color: var(--b-on); background: var(--b-pill); box-shadow: inset 0 0 0 1px var(--b-rule); text-shadow: none; }
.rail-more { display: inline-flex; align-items: center; gap: calc(10 * var(--vk)); margin-top: auto; padding-top: calc(14 * var(--vk)); font-weight: 650; font-size: calc(15 * var(--vk)); color: var(--b-on); }
.rail-more .i-arrow { width: calc(32 * var(--vk)); height: calc(32 * var(--vk)); padding: calc(8 * var(--vk)); border-radius: 50%; background: var(--b-on); color: rgb(var(--base)); }

/* cards-fix（對抗驗證 low：桌機最後一張卡橫移到底時貼齊視窗右緣）：runtime/site.js 的 p.max＝track.scrollWidth − clientWidth（寬螢幕縮放輪：原本 innerWidth，含 Windows 捲軸寬），
   Chrome 沒把 flex 軌道的右側 padding 算進 scrollWidth → 軌道尾端加一個與左側留白等寬的空白項目（減掉 gap）。 */
@media (min-width: 900px) {
  .rail-track::after { content: ''; flex: none; width: calc(max(var(--gut), (100vw - var(--sbw, 0px) - var(--max)) / 2) - clamp(calc(16 * var(--vk)), calc(1.6 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(28 * var(--vk)))); }
}

/* 矮視窗（1366×657 等）：文字區收緊，影像窗仍 ≥ 卡片高的 40％ */
@media (min-width: 900px) and (max-height: 700px) {
  /* 1366×657：服務帶標頭的行距收緊（省 24px 給影像窗），check/fit.mjs 釘選畫面 ≤ 視窗高 − 頁首 */
  .rail-head { row-gap: calc(10 * var(--vk)); }
  .rail-head > div { gap: calc(10 * var(--vk)); }
  .rail-card { --win: calc(168 * var(--vk)); }              /* cards-fix：164 → 168px（實測只佔卡片 39.4％）；漸層收邊 56 → 44px，清楚的影像 124px */
  .rail-body::before { height: calc(44 * var(--vk)); }
  .rail-title { font-size: calc(21 * var(--vk)); }
  .rail-body { padding-top: calc(12 * var(--vk)); padding-bottom: calc(12 * var(--vk)); }
  .rail-desc { margin-top: calc(6 * var(--vk)); font-size: calc(15 * var(--vk)); line-height: 1.6; }
  .rail-items { margin-top: calc(10 * var(--vk)); gap: calc(5 * var(--vk)); }
  .rail-items li { padding: calc(3 * var(--vk)) calc(10 * var(--vk)); }
  .rail-more { padding-top: calc(9 * var(--vk)); }
}

/* 手機：直向堆疊，一樣是影像窗＋文字區 */
@media (max-width: 899px) {
  .rail-card { --win: clamp(calc(180 * var(--vk)), calc(52 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(240 * var(--vk))); width: 100%; height: auto; }
  .rail-body { padding: calc(16 * var(--vk)) calc(20 * var(--vk)) calc(20 * var(--vk)); }
  .rail-title { font-size: calc(22 * var(--vk)); }
}

/* 13-stats.css */
/* 首頁第 5 區「信任背書＋客戶輪廓」：數字帶＋horizon 破曉海平線場景（stats-build 輪 → stats-fix 輪，BRIEF_v25_hero §5，2026-09-26）
   Tommy：「這個也是，動畫不見了。」數字帶本來沒有場景，以前緊接在 horizon 動態場景（三步驟）後面；八區塊恢復時那段拿掉，附近就沒有動態了。
   → stats 區塊自己帶 horizon（visual），覆蓋 05-blocks.css 的 KM BLUE 實底樣式（只作用在 .stats--scene）。
   場景是背景固定式（visuals/README §0）：地平線由場景用文字框的靜止位置算出（標題下緣與數字列上緣的中點），
   區塊頂對齊視窗頂時：標題在地平線上方的天空、數字列與「內容準備中」在下方平靜的 KM BLUE 水面上。
   文字只在左欄（桌機 8 欄、手機約 64％ 寬），右側永遠沒有文字經過 → 日出、雲堤、光束、水面光路放在那裡，捲動時不必讓位；
   手機的光路一路陪在數字列右邊（stats-fix：原本滿寬數字列讓光路從頭到尾讓位，數字區只剩平藍）。
   說明文字是數字的前綴／後綴（「深耕…超過」15 年、「橫跨」十大產業、70%「客戶合作…」）：照 DOM 原順序排——前綴在數字上方當眉標、
   後綴在數字下方，不再把數字提到最前（05-blocks.css 的 order:-1 會讀成「十大產業 橫跨」）。
   客戶 Logo 牆併進同一個區塊（.stats-foot）。 */
.blk-stats.stats--scene { padding: 0; }
.stats--scene .stats-grid {
  row-gap: 0;
  padding-top: clamp(calc(64 * var(--vk)), 17vh, calc(184 * var(--vk)));
  padding-bottom: clamp(calc(88 * var(--vk)), 13vh, calc(136 * var(--vk)));   /* 場景下緣 ≤ 130px 收進 PAPER（長度＝細帶文字框到區塊底，場景自己算） */
}
.stats--scene .stats-head { grid-column: 1 / span 7; }
.stats--scene .stats-title { max-width: 14em; }
/* 地平線落在標題列與數字列之間：這段空隙＝天空與水面交界的呼吸空間（遠水碎光帶、流雲在這裡流過） */
.stats--scene .stats-list {
  grid-column: 1 / span 8; margin-top: clamp(calc(88 * var(--vk)), 18vh, calc(192 * var(--vk)));
  display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; column-gap: clamp(calc(36 * var(--vk)), calc(4.4 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(72 * var(--vk))); row-gap: calc(28 * var(--vk));
}
.stats--scene .stat { flex: 0 0 auto; min-width: 0; padding-top: clamp(calc(26 * var(--vk)), 3.4vh, calc(34 * var(--vk))); background-image: linear-gradient(90deg, var(--ink) 0 calc(56 * var(--vk)), rgba(17,17,17,.22) calc(56 * var(--vk)) 100%); }
.stats--scene .stat-p { gap: calc(8 * var(--vk)); }
.stats--scene .stat-p .num { order: 0; }
/* 沒有前綴的數字（70%）：留一行眉標的高度，三個大數字對齊同一條線 */
.stats--scene .stat-p > .num:first-child { margin-top: calc(var(--t-lead) * 1.6 + calc(8 * var(--vk))); }
.stats--scene .stat-t { max-width: 13em; }
.stats--scene .stats-foot { grid-column: 1 / span 8; margin-top: clamp(calc(40 * var(--vk)), 7vh, calc(80 * var(--vk))); }
.stats--scene .stats-foot .pend-strip { margin: 0; color: var(--ink); border-color: rgba(17,17,17,.24); }
.stats--scene .stats-foot .pend-strip .ui { color: var(--ink); }
.stats-foot .lw-list { margin: 0; }
/* 場景版不做數字的捲動視差（06-motion driftUp ±18px）：場景本身已經在動，數字不再相對安靜區與分隔線位移；數字滾動（is-in）照舊 */
html.js:not(.reduce-motion) .stats--scene .stat-p .num { animation: none; translate: none; }

/* 沒有場景時（其他頁或後台未選場景）：Logo 格／內容準備中接在數字下方，同一個 KM BLUE 底 */
.blk-stats:not(.stats--scene) .stats-foot { grid-column: 1 / -1; }
.blk-stats.tone-blue:not(.stats--scene) .stats-foot .pend-strip { color: var(--ink); border-color: rgba(17,17,17,.22); }
.blk-stats.tone-blue:not(.stats--scene) .stats-foot .pend-strip .ui { color: var(--ink); }

@media (max-width: 899px) {
  /* 直式：地平線在標題與數字列之間；標題兩行收在左側，日出在它右邊的天空。
     數字列收在左側約 64％（眉標／數字／後綴直排），右側 36％ 留給水面光路與碎光：捲動讀數字時光路一直在旁邊流動 */
  .stats--scene .stats-grid { padding-top: clamp(calc(64 * var(--vk)), 11vh, calc(120 * var(--vk))); padding-bottom: clamp(calc(80 * var(--vk)), 12vh, calc(112 * var(--vk))); }
  .stats--scene .stats-head, .stats--scene .stats-list, .stats--scene .stats-foot { grid-column: 1 / -1; }
  .stats--scene .stats-title { max-width: 7.2em; }
  .stats--scene .stats-list { flex-direction: column; flex-wrap: nowrap; margin-top: clamp(calc(76 * var(--vk)), 12vh, calc(136 * var(--vk))); row-gap: calc(24 * var(--vk)); }  /* 列距 ≥ 大數字字身下緣（約 .1em）＋安靜區外擴 12px：下一列的分隔線不落進上一列的文字框 */
  .stats--scene .stat { width: 64%; padding-top: calc(22 * var(--vk)); }  /* 分隔線離字 ≥ 安靜區外擴（12px）＋字身留白：線不落進文字框 */
  .stats--scene .stat-p { gap: calc(4 * var(--vk)); }
  .stats--scene .stat-p .num { font-size: clamp(calc(44 * var(--vk)), calc(12.5 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(60 * var(--vk))); }
  .stats--scene .stat-p > .num:first-child { margin-top: calc(6 * var(--vk)); }
  .stats--scene .stat-t { max-width: none; font-size: calc(15 * var(--vk)); line-height: 1.5; }
  .stats--scene .stats-foot { width: 64%; margin-top: clamp(calc(28 * var(--vk)), 4vh, calc(44 * var(--vk))); }
  .stats--scene .stats-foot:not(.stats-foot--pend) { width: auto; }
}

/* 同仁回饋 0929（H5）：數字帶 5 項（.stats-list--many）。桌機：左 8 欄裡 3＋2 的格，大字收到 44–64px（「十大產業」「連續三年」四個字要放進一欄），
   眉標／後綴 17px、在詞界換行；第一列沒有眉標的項（連續三年）留一行眉標高度對齊，第二列兩項都沒有眉標 → 不留空位。
   地平線仍落在標題列與數字列之間，數字列整組不越過 8 欄（右側留給日出與水面光路）。手機：直排、大字 36–44px、說明 15px，整區一屏。 */
.stats--scene .stats-list--many {
  display: grid; grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(calc(28 * var(--vk)), calc(3.2 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(56 * var(--vk))); row-gap: clamp(calc(18 * var(--vk)), 3vh, calc(34 * var(--vk)));
  margin-top: clamp(calc(64 * var(--vk)), 13vh, calc(168 * var(--vk)));
}
.stats--scene .stats-list--many .stat { padding-top: clamp(calc(18 * var(--vk)), 2.6vh, calc(28 * var(--vk))); }
.stats--scene .stats-list--many .stat-p { gap: calc(6 * var(--vk)); font-size: clamp(calc(15 * var(--vk)), calc(1.12 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(17 * var(--vk))); line-height: 1.5; }
.stats--scene .stats-list--many .stat-p .num { font-size: clamp(calc(42 * var(--vk)), calc(4 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(64 * var(--vk))); }
.stats--scene .stats-list--many .stat-t { max-width: none; word-break: keep-all; overflow-wrap: anywhere; }
/* 眉標一行高＝說明字級 × 行高 1.5＋gap 6px（不能用 em：.num 自己的字級是 42–64px，會多留兩行多） */
.stats--scene .stats-list--many .stat-p > .num:first-child { margin-top: calc(clamp(calc(15 * var(--vk)), calc(1.12 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(17 * var(--vk))) * 1.5 + calc(6 * var(--vk))); }
.stats--scene .stats-list--many .stat:nth-child(n+4) .stat-p > .num:first-child { margin-top: 0; }
.stats--scene .stats-list--many ~ .stats-foot { margin-top: clamp(calc(28 * var(--vk)), 5vh, calc(64 * var(--vk))); }
@media (max-width: 899px) {
  .stats--scene .stats-list--many { display: flex; margin-top: clamp(calc(64 * var(--vk)), 10vh, calc(120 * var(--vk))); row-gap: calc(20 * var(--vk)); }   /* 下一列的分隔線不落進上一列文字框（外擴 12px） */
  .stats--scene .stats-list--many .stat { width: 64%; padding-top: calc(22 * var(--vk)); }   /* 分隔線離字 ≥ 安靜區外擴 12px＋字身留白（同 3 項版） */
  .stats--scene .stats-list--many .stat-p, .stats--scene .stats-list--many .stat-t { gap: calc(2 * var(--vk)); font-size: calc(15 * var(--vk)); }
  .stats--scene .stats-list--many .stat-p .num { font-size: clamp(calc(36 * var(--vk)), calc(10.4 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(44 * var(--vk))); }
  .stats--scene .stats-list--many .stat-p > .num:first-child { margin-top: calc(2 * var(--vk)); }
  .stats--scene .stats-list--many ~ .stats-foot { width: 64%; margin-top: calc(24 * var(--vk)); }
}
@media (max-width: 380px) { .stats--scene .stats-list--many .stat-p .num { font-size: calc(33 * var(--vk)); } }

/* 15-features.css */
/* ==================== Why VEDA KM 四大特色（features-pinned／orbit）v7 重新設計 ====================
   Tommy 2026-09-27：「另外 Why VEDA KM 的研究驅動那邊，整體瀏覽體驗和文字排版不是很好，請幫我重新設計。」
   舊版問題（v6 截圖）：標題與清單之間一大片空白；四項只有目前項有說明、其他三項淡成 62％ 灰字（像被停用）；說明 16–18px 太小；
   右下巨大描邊數字「04」與左下「04 / 04」進度條意義不明；手機只展開一項。
   新版：
   · 四項同時完整可讀（序號、標題、說明），層級＝KM BLUE 序號 → 標題 → 說明；列與列之間細線分隔，目前項的上緣亮成 KM BLUE。
   · 桌機：標題＋清單在左欄垂直置中成一組（不再上下拉開），右側 orbit 光學裝置；說明 17–19px、每行 ≤ 28 字。
   · 手機：標題 → orbit 光學裝置的留白帶（32svh）→ 四項全部展開、上下排列（每項一個 [data-unit]，一屏內可讀完）。
   · 每一整列都可點選（滑鼠、觸控）、Tab 聚焦（標題按鈕的 ::after 蓋住整列）。
   v7-integrate：05-blocks.css 的舊 features 規則（含已沒有元素的 .feat-big 大序號、.feat-meter 計數列）與 08-interact.css 的舊 .feat 規則已刪除，
   本檔是四大特色唯一的樣式來源（標題浮現 --in 與區塊頂 INK 漸層在 11-transition.css）。
   v7-fix（2026-09-27，美術審查 7／10、手機審查、對抗驗證）：
   · 目前項看不出來（只有 2px 上緣線＋12px 序號變藍、線落在兩項交界）→ 清單左側一條細軌道（1px），目前項＝軌道上一段 3px KM BLUE 直條
     （和該列同高，不會被誤認為屬於上一項）＋整列全亮；其他項整列 66％ 不透明度（標題、說明對比仍 ≥ 4.5:1；62％ 時最淡的一行 4.49:1），切換只做 200ms 淡入淡出、不位移。
     列與列之間不再畫橫線（軌道已經把四項串成一組）。
   · 桌機：標題放大到 34–48px、標題與清單之間多一點距離（版面層次：標題 → 清單），一屏內仍放得下（1366×657）。
   · 手機：留白帶 32svh（190–300px）→ 104–128px，光核移到標題右側＋留白帶（orbit.js），整區約一屏（390×844 ≈ 790px）；
     標題 30–32px；說明 word-break: keep-all（<wbr> 詞界才起作用，原本會斷在「市場教｜育」）。
*/


.blk-features-pinned .pin-sticky { display: flex; z-index: 0; }
.blk-features-pinned .feat-grid {
  display: grid; column-gap: var(--col-gap);
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: minmax(0, 1fr) auto auto minmax(0, 1.15fr);
  row-gap: clamp(calc(26 * var(--vk)), 4.6vh, calc(52 * var(--vk)));
  padding: calc(var(--head-h) + calc(20 * var(--vk))) 0 clamp(calc(28 * var(--vk)), 5vh, calc(56 * var(--vk)));
  min-height: 100%;
}
.blk-features-pinned .feat-head { grid-column: 1 / span 6; grid-row: 2; display: grid; gap: calc(16 * var(--vk)); align-content: start; justify-self: start; }
.blk-features-pinned .feat-head h2 { max-width: 10em; font-size: clamp(calc(34 * var(--vk)), calc(3.3 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(48 * var(--vk))); line-height: 1.12; letter-spacing: -.015em; }
/* 清單：左側一條細軌道把四項串成一組；目前項是軌道上的一段 KM BLUE 直條 */
.blk-features-pinned .feat-list {
  grid-column: 1 / span 6; grid-row: 3; align-self: start;
  position: relative; display: grid; gap: 0; max-width: calc(620 * var(--vk)); counter-reset: none;
  padding-left: calc(28 * var(--vk));
}
.blk-features-pinned .feat-list::before {
  content: ""; position: absolute; left: 1px; top: 0; bottom: 0; width: 1px; background: var(--on-rule); pointer-events: none;
}

/* 一列＝序號欄＋（標題、說明）；非目前項整列 66％（對比：說明 ≥ 4.5:1、標題 ≈ 7:1），切換 200ms 淡入淡出、不位移 */
.blk-features-pinned .feat {
  position: relative; opacity: .66;
  display: grid; grid-template-columns: calc(56 * var(--vk)) minmax(0, 1fr); align-items: baseline;   /* 序號與標題第一行同一條基線 */
  padding: clamp(calc(12 * var(--vk)), 2.2vh, calc(22 * var(--vk))) 0;
  border: 0;
  transition: opacity .2s ease;
}
.blk-features-pinned .feat.is-active { opacity: 1; }
/* 目前項：軌道上一段 3px KM BLUE 直條，和這一列同高（上下各內縮一點，和相鄰列分得開） */
.blk-features-pinned .feat::before {
  content: ""; position: absolute; left: calc(-28 * var(--vk)); top: clamp(calc(10 * var(--vk)), 1.8vh, calc(18 * var(--vk))); bottom: clamp(calc(10 * var(--vk)), 1.8vh, calc(18 * var(--vk))); width: calc(3 * var(--vk)); border-radius: calc(3 * var(--vk));
  background: var(--accent); opacity: 0; transition: opacity .2s ease;
  pointer-events: none;
}
.blk-features-pinned .feat.is-active::before { opacity: 1; }

.blk-features-pinned .feat-n {
  font-family: var(--f-cond); font-size: calc(15 * var(--vk)); font-weight: 600; letter-spacing: .18em; line-height: 1;
  padding-top: 0;
  color: var(--on-2);
}
.blk-features-pinned .feat.is-active .feat-n { color: var(--accent); }
.blk-features-pinned .feat-title {
  font-family: var(--f-display); font-size: clamp(calc(22 * var(--vk)), calc(2 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(30 * var(--vk))); font-weight: 800; line-height: 1.3; letter-spacing: -.01em;
}
.blk-features-pinned .feat-body,
html.js .blk-features-pinned .feat-body,
html.js .blk-features-pinned .feat.is-active .feat-body {
  max-height: none; opacity: 1; overflow: visible; transition: none;
  margin: calc(6 * var(--vk)) 0 0; padding: 0;
  font-size: clamp(calc(17 * var(--vk)), calc(1.25 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(19 * var(--vk))); line-height: 1.7; color: var(--on-2); max-width: 28em;
  word-break: keep-all; overflow-wrap: anywhere;   /* 只在 <wbr> 詞界與標點後換行（phraseText） */
}

/* 整列可點：標題是按鈕，按鈕的 ::after 蓋住整列（桌機、手機都可點；聚焦外框畫在整列外） */
.blk-features-pinned .feat-go {
  appearance: none; margin: 0; padding: 0; border: 0; background: none;
  font: inherit; color: inherit; letter-spacing: inherit; text-align: left; cursor: pointer;
}
.blk-features-pinned .feat-go:focus-visible { outline: none; }
.blk-features-pinned .feat-go::after { content: ""; position: absolute; inset: 0 calc(-14 * var(--vk)) 0 calc(-20 * var(--vk)); border-radius: calc(10 * var(--vk)); }
.blk-features-pinned .feat-go:focus-visible::after { outline: calc(2 * var(--vk)) solid var(--accent); outline-offset: calc(2 * var(--vk)); }
@media (hover: hover) {
  .blk-features-pinned .feat:not(.is-active):hover { opacity: .88; }
  .blk-features-pinned .feat:not(.is-active):hover .feat-n { color: var(--on); }
}

/* 手機與平板直向：不釘選；標題（右側是 orbit 光核）→ 一段短留白帶 → 四項全部展開上下排列，整區約一屏 */
@media (max-width: 899px) {
  .blk-features-pinned,
  html.js .blk-features-pinned { padding: var(--sec-y) 0; }
  .blk-features-pinned .pin-sticky { position: relative; }
  .blk-features-pinned .feat-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; row-gap: 0; padding: 0; min-height: 0; }
  .blk-features-pinned .feat-head,
  .blk-features-pinned .feat-list { grid-column: 1; grid-row: auto; }
  .blk-features-pinned .feat-head h2 { font-size: clamp(calc(28 * var(--vk)), calc(8 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(32 * var(--vk))); }
  .blk-features-pinned .feat-list,
  html.js .blk-features-pinned .feat-list { gap: 0; max-width: 34em; padding-left: calc(20 * var(--vk)); }
  /* 標題與清單之間的留白帶＋標題右側＝orbit 光學裝置的位置（visuals/presets/orbit.js 依兩個安靜區框放光核、跟著區塊捲動） */
  .blk-features-pinned .feat-list { margin-top: clamp(calc(104 * var(--vk)), 14svh, calc(128 * var(--vk))); }
  .blk-features-pinned .feat { grid-template-columns: calc(40 * var(--vk)) minmax(0, 1fr); padding: calc(13 * var(--vk)) 0 calc(15 * var(--vk)); }
  .blk-features-pinned .feat::before { left: calc(-20 * var(--vk)); top: calc(12 * var(--vk)); bottom: calc(12 * var(--vk)); }
  .blk-features-pinned .feat-n { font-size: calc(14 * var(--vk)); }
  .blk-features-pinned .feat-title { font-size: calc(20 * var(--vk)); }
  .blk-features-pinned .feat-body,
  html.js .blk-features-pinned .feat-body,
  html.js .blk-features-pinned .feat.is-active .feat-body { font-size: calc(16 * var(--vk)); line-height: 1.7; margin-top: calc(4 * var(--vk)); padding: 0; }
  .blk-features-pinned .feat-go::after { inset: 0 calc(-8 * var(--vk)) 0 calc(-20 * var(--vk)); }
}

/* 同仁回饋 0929（Tommy 2026-10-07：首頁只放標題）：五項只有標題「研究先行｜洞察變化的起點」——
   關鍵詞（｜前）是主標字級、粗；短句（｜後）次一級、PAPER 次要色；分隔號淡。五項整列可點、與 orbit 五種狀態同步。
   一列約 1.8 行字高，五列＋標題在 1366×657 一屏內（fit），手機約 0.7 屏。 */
.blk-features-pinned .feat-list--titles .feat { padding: clamp(calc(12 * var(--vk)), 2.1vh, calc(22 * var(--vk))) 0; }
.blk-features-pinned .feat-list--titles .feat-title { font-size: clamp(calc(24 * var(--vk)), calc(2.1 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(32 * var(--vk))); line-height: 1.32; }
.blk-features-pinned .feat-list--titles .feat-k { white-space: nowrap; }
.blk-features-pinned .feat-list--titles .feat-sep { margin: 0 .18em; font-weight: 400; color: var(--on-2); }
.blk-features-pinned .feat-list--titles .feat-v { display: inline-block; font-weight: 600; font-size: .78em; color: var(--on-2); white-space: nowrap; }
.blk-features-pinned .feat-list--titles .feat.is-active .feat-v { color: var(--on); }
@media (max-width: 899px) {
  .blk-features-pinned .feat-list--titles .feat { padding: calc(14 * var(--vk)) 0; }
  .blk-features-pinned .feat-list--titles .feat-title { font-size: calc(21 * var(--vk)); }
}
@media (max-width: 380px) {
  .blk-features-pinned .feat-list--titles .feat-title { font-size: calc(19 * var(--vk)); }
}

@media (prefers-reduced-motion: reduce) {
  .blk-features-pinned .feat, .blk-features-pinned .feat::before { transition: none; }
}
html.reduce-motion .blk-features-pinned .feat, html.reduce-motion .blk-features-pinned .feat::before { transition: none; }

/* 16-mobile.css */
/* ═══════════════════════════════════════════════════════════════════════════
   16-mobile.css：手機排版加強（v7-mobile 輪，2026-09-27）
   Tommy：「這個首圖開場OK，但其它地方有些不太符合手機觀看的體驗，幫我加強手機排版的部分。」
   ───────────────────────────────────────────────────────────────────────────
   全站手機修正集中在這裡，只用 max-width 媒體查詢覆蓋既有規則：≥ 900px（桌機）的輸出完全不變；
   幾乎都只作用在 ≤ 599px，例外兩條：宣言 B 空面板（≤ 899）、/design 色票（≤ 699，原本就在這個斷點直排）。
   不處理：首頁開場（stage-hero，已被認可）、Why VEDA KM（features-pinned，另一輪重新設計，樣式在 15-features.css；版心同開場 16px）、首頁「最新消息」（Tommy：先不動作）、
   幾何記號（17-graphic，行為不改）、場景（visuals/**）。
   依據：v7-mobile 稽核（360／375／390／430 × 41 路由，mobile UA＋觸控＋DPR 3）—— 問題清單見私有建置 audit.md。
   原則：
   1. 版心左右 20px（原 16px），首頁開場與它上方的頁首維持 16px（構圖不動）。
   2. 區塊節奏：手機一律 52／60px，同底色相鄰的區塊不再疊兩份留白（原本 130–200px 的空白帶 → 約 80px）。
   3. 內文 ≥ 16px；註腳、出處、英文副標、標籤等輔助字 ≥ 13px（原本最小 11px）。
   4. 點擊目標 ≥ 44×44px（頁尾、麵包屑、服務項目、了解更多、案例連結、減少動態開關）；純文字句中的連結除外。
   5. 圖表：數據表改堆疊列（每列一張，欄位用圖例色點對應）、雷達圖圖邊只留軸名、數值列在圖下、純排版頁首不再撐半個螢幕。
   全部是靜態版面規則：不新增動畫、捲動路徑沒有新 JS、不讀版面，不影響場景 GPU。
   ═══════════════════════════════════════════════════════════════════════════ */

/* ---------- 1. 版心與節奏 ---------- */
@media (max-width: 599px) {
  :root { --gut: calc(20 * var(--vkw)); --sec-y: calc(52 * var(--vk)); --sec-y-l: calc(60 * var(--vk)); }
  /* 首頁開場（已認可的構圖）與首頁頁首維持 16px；v7-integrate：緊接的 Why VEDA KM 也維持 16px——轉場時開場主標、導言面板與
     Why 標題同時在畫面上，左緣和頁首 Logo 對齊同一條線（20px 會差 4px 的錯位） */
  .blk-stage-hero, .blk-features-pinned, html:has(.blk-stage-hero) .site-head { --gut: calc(16 * var(--vkw)); }

  /* 同底色相鄰（非場景、非圖表資料區塊）：下一個區塊只留半份上留白，兩段之間約 78–86px（原本 130–175px） */
  main > .blk:not(.has-visual):not(.md-blk):not(.md-chapter-blk):not(.blk-link-row)[data-tone="paper"] + .blk:not(.has-visual):not(.md-blk):not(.md-chapter-blk):not(.blk-link-row):not(.blk-news-cards):is([data-tone="paper"], [data-tone="lite"]),
  main > .blk:not(.has-visual):not(.md-blk):not(.md-chapter-blk):not(.blk-link-row)[data-tone="lite"] + .blk:not(.has-visual):not(.md-blk):not(.md-chapter-blk):not(.blk-link-row):not(.blk-news-cards):is([data-tone="paper"], [data-tone="lite"]),
  main > .blk:not(.has-visual):not(.blk-link-row)[data-tone="ink"] + .blk:not(.has-visual):not(.md-blk):not(.md-chapter-blk):not(.blk-link-row)[data-tone="ink"],
  main > .blk:not(.has-visual):not(.blk-link-row)[data-tone="blue"] + .blk:not(.has-visual):not(.md-blk):not(.md-chapter-blk):not(.blk-link-row)[data-tone="blue"] { padding-top: calc(26 * var(--vk)); }
  /* 圖表資料區塊（客戶名單、案例）接「同類別其他服務」：同底色時一樣只留半份 */
  main > .md-blk[data-tone="paper"] + .blk-link-index[data-tone="paper"],
  main > .md-blk[data-tone="lite"] + .blk-link-index:is([data-tone="paper"], [data-tone="lite"]),
  main > .md-chapter-blk[data-tone="paper"] + .blk-link-index[data-tone="paper"],
  main > .md-blk[data-tone="ink"] + .blk-link-index[data-tone="ink"] { padding-top: calc(26 * var(--vk)); }
  .md-cl { padding-bottom: calc(44 * var(--vk)); }
  /* 接在滿版 LIME 連結列前面的區塊：底部留白收成一份 */
  main > .blk:has(+ .blk-link-row):not(.has-visual) { padding-bottom: calc(48 * var(--vk)); }

  /* 首頁：焦點訊息 → 五大服務入口、集團平台入口 → 最新消息（最新消息本身不動）、最新消息 → 徵才 */
  .blk-report-feature + .blk-service-rail { padding-top: calc(20 * var(--vk)); }
  .blk-group-platforms { padding-block: calc(52 * var(--vk)) calc(36 * var(--vk)); }
  .blk-news-cards + .blk-cta-band { padding-top: calc(44 * var(--vk)); }

  /* 段落避免最後一行只剩一個字（標題已有 balance） */
  main :is(p, li, dd, td, figcaption) { text-wrap-style: pretty; }
}

/* ---------- 2. 內頁主視覺 ---------- */
@media (max-width: 599px) {
  /* 純排版主視覺（最新消息、合作夥伴、聯絡我們、FAQ、隱私權、條款、/design）：原本 52svh 撐出 150px 以上的空白，
     改成內容高度——頁面路徑 → 頁名 → CORAL 短線 → 導言，下一段緊接在第一屏 */
  .hero--plain { min-height: 0; }
  .hero--plain .hero-grid { grid-template-rows: auto auto auto auto; row-gap: calc(20 * var(--vk)); padding-bottom: calc(40 * var(--vk)); }
  .hero--plain .hero-main { padding-top: calc(12 * var(--vk)); }
  .hero--plain .hero-main { grid-row: 2; }
  .hero--plain .hero-lead-wrap { grid-row: 3; }
  .hero--plain + :is(.blk-pending, .blk-faq, .blk-longform, .blk-news-cards, .blk-contact-form, .blk-design-system) { padding-top: calc(32 * var(--vk)); }

  /* 麵包屑：4 層以上時不重複顯示目前頁（就是下方的 H1），膠囊維持一行；每個連結點擊範圍 44px 高（視覺大小不變） */
  .crumbs li[aria-current]:nth-child(n + 4) { display: none; }
  .crumbs a { display: inline-flex; align-items: center; justify-content: center; min-width: calc(44 * var(--vk)); min-height: calc(44 * var(--vk)); margin: calc(-12 * var(--vk)) calc(-8 * var(--vk)); padding-inline: calc(8 * var(--vk)); }
  .crumbs ol { row-gap: calc(10 * var(--vk)); }
}

/* ---------- 3. 宣言 B（左引文＋右 CORAL 面板）沒有說明時 ---------- */
@media (max-width: 899px) {
  /* 手機的空面板只剩一條 50px 高、中間一道細線的 CORAL 膠囊，像沒載入的按鈕（/services/climate、disclosure、supply-chain、/insights/pulse）。
     改成與宣言 C 同一個語彙：CORAL 面板墊在宣言句後方（同一格），INK 大字坐在面板上。 */
  .mani--split:has(> .mani-panel > .mani-panel-rule:only-child) .mani-statement { grid-row: 1; position: relative; z-index: 1; max-width: 14em; margin: 0; padding: calc(28 * var(--vk)) calc(24 * var(--vk)) calc(30 * var(--vk)); background: none; }
  .mani--split:has(> .mani-panel > .mani-panel-rule:only-child) > .mani-panel { grid-row: 1; align-self: stretch; padding: 0; }
  .mani--split:has(> .mani-panel > .mani-panel-rule:only-child) .mani-panel-rule { display: none; }
  .mani--split:has(> .mani-panel > .mani-panel-rule:only-child) > .eyebrow + .mani-statement,
  .mani--split:has(> .mani-panel > .mani-panel-rule:only-child) > .eyebrow + .mani-statement + .mani-panel { grid-row: 2; }
}

/* ---------- 4. 字級：內文 ≥ 16px、輔助字 ≥ 13px ---------- */
@media (max-width: 599px) {
  /* 內文（說明、段落、表格內文、條列說明） */
  .pf-desc, .ms-body, .md-case-lead, .rd-body, .ic-cell, .ic-find-b, .ic-fu-b, .in-fact-b, .in-act-list, .in-prog-b, .pl-body,
  .sm-rel-t, .fg-zh, .rail-desc, .lines-list li, .lf-lines p, .li-body, .sidx-desc, .dn-l { font-size: calc(16 * var(--vk)); }
  .pf-desc, .md-case-lead, .ic-find-b, .ic-fu-b, .in-fact-b, .in-act-list, .in-prog-b { line-height: 1.75; }
  .rd-body { line-height: 1.65; }
  .sm-detail, .sm-card .sm-detail, .sm-ph-b, .ic-sroi-t { font-size: calc(16 * var(--vk)); line-height: 1.6; }
  .ic-kpi-l, .pf-points, .md-case-links, .pf-stat-l { font-size: calc(15 * var(--vk)); }
  .stats--scene .stat-t { font-size: calc(16 * var(--vk)); }
  /* 長文導言：原本 18px／600 字重、動輒 6–8 行的粗體段落，手機上太重 → 17px／500（仍比內文大、深一階） */
  .lf-lead { font-size: calc(17 * var(--vk)); font-weight: 500; line-height: 1.85; }
  .blk-longform.tone-blue .lf-lead { font-weight: 600; }
  /* 首頁以外的最新消息卡（/about/news）：摘要 16px；首頁的最新消息依 Tommy「先不動作」維持原樣 */
  main:not(:has(.blk-stage-hero)) .nc-desc { font-size: calc(16 * var(--vk)); line-height: 1.7; }
  /* 輔助字：註腳、出處、英文副標、標籤、膠囊 */
  .ms-refs, .dt-notes, .fg-basis, .sm-group-h, .sm-note { font-size: calc(14 * var(--vk)); line-height: 1.65; }
  .sm-dir, .fg-en, .ms-tag-en, .rd-en, .ic-row-l .md-line:nth-child(3) { font-size: calc(13 * var(--vk)); }
  .rail-items li { font-size: calc(13 * var(--vk)); }
}

/* ---------- 5. 點擊目標 ≥ 44px ---------- */
@media (max-width: 599px) {
  /* 了解更多（類別頁服務項目）、案例與外部連結：高度 44px，視覺位置不變（負邊距抵銷） */
  .svc-art-body .text-link { min-height: calc(44 * var(--vk)); margin-block: calc(-7 * var(--vk)); }
  .md-case-link, .md-client--link { min-height: calc(44 * var(--vk)); margin-block: calc(-9 * var(--vk)); }

  /* /services 服務索引的項目：底線文字 → 44px 膠囊（點擊範圍與視覺一致），下方「了解更多」隱藏（整列本來就可點） */
  .sidx-items { gap: calc(8 * var(--vk)); padding-top: calc(14 * var(--vk)); }
  .sidx-items li { padding-left: 0; font-size: calc(15 * var(--vk)); }
  .sidx-items li::before { content: none; }
  .sidx-items a { display: inline-flex; align-items: center; min-height: calc(44 * var(--vk)); padding: 0 calc(16 * var(--vk)); border-radius: var(--r-pill); background: rgba(17,17,17,.05); box-shadow: inset 0 0 0 1px var(--rule-ink); text-decoration: none; }
  .tone-ink .sidx-items a { background: rgba(244,241,234,.08); box-shadow: inset 0 0 0 1px var(--rule-inv); }
  .tone-blue .sidx-items a { background: rgba(244,241,234,.3); box-shadow: inset 0 0 0 1px rgba(17,17,17,.2); }
  .sidx-row:has(.sidx-items) .sidx-go { display: none; }
  .sidx-go { min-height: calc(44 * var(--vk)); }
}

/* ---------- 6. 同類別其他服務（link-index）：序號對齊標題、右側箭頭 ---------- */
@media (max-width: 599px) {
  .li-a { grid-template-columns: calc(40 * var(--vk)) minmax(0, 1fr); align-items: start; gap: calc(4 * var(--vk)) calc(14 * var(--vk)); padding: calc(20 * var(--vk)) 0; }
  .li-n { font-size: calc(30 * var(--vk)); line-height: 1; padding-top: calc(2 * var(--vk)); }
  .li-title { padding-right: calc(32 * var(--vk)); }
  .li-more { display: block; position: absolute; right: 0; top: calc(22 * var(--vk)); }
  .li-more .ui { display: none; }
  .li-more .i-arrow { display: block; width: calc(22 * var(--vk)); height: calc(22 * var(--vk)); }
  .li-body { line-height: 1.7; }
}

/* ---------- 7. 服務項目（類別頁）：大序號不做捲動視差（手機上會滑進說明段落）；輔導方式面板（版心加寬 4px 後）內距收成 16px，一項一畫面 ---------- */
@media (max-width: 599px) {
  .svc-method-box { padding: calc(16 * var(--vk)); }
  .svc-methods li { grid-template-columns: calc(30 * var(--vk)) 1fr; padding: calc(4 * var(--vk)) 0; }
  .svc-art-body { gap: calc(10 * var(--vk)); }
  html.js:not(.reduce-motion) .svc-art-head .svc-n { animation: none; translate: none; }
}

/* ---------- 8. 圖表 ---------- */
@media (max-width: 599px) {
  /* 雷達圖（/services/impact/engagement）：圖邊原本每個軸各擠兩行（名稱＋數值），手機上字與圖形搶位置 →
     圖邊只留軸名（一行），數值改列在圖下方的兩欄清單（依軸的順時針順序直排）：區塊本來就輸出一張給讀屏的數據表，手機把它顯示出來。
     圖框維持滿寬（左右兩側的軸名已貼近版心邊緣，圖形不再放大） */
  .rd-lab { max-width: 26%; font-size: calc(13.5 * var(--vk)); }
  /* 圖框是正方形，軸名只到上下約 14％ 處：上下各收掉一段透明留白（圖形大小不變），圖＋數值清單仍在一個畫面內 */
  .rd-chart { width: min(100%, calc(370 * var(--vk))); margin-block: -9% -10%; }
  .rd-lab-v { display: none; }
  .rd-fig > .visually-hidden { position: static !important; width: 100%; height: auto; overflow: visible; clip: auto; white-space: normal; margin-top: calc(6 * var(--vk)); }
  .rd-fig > .visually-hidden table { width: 100%; border-collapse: collapse; }
  .rd-fig > .visually-hidden caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .rd-fig > .visually-hidden tbody { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(5, auto); grid-auto-flow: column; column-gap: calc(20 * var(--vk)); border-top: 1px solid var(--md-rule); }
  .rd-fig > .visually-hidden tr { display: flex; align-items: baseline; justify-content: space-between; gap: calc(8 * var(--vk)); min-width: 0; padding: calc(8 * var(--vk)) 0; border-bottom: 1px solid var(--md-rule); }
  .rd-fig > .visually-hidden th { min-width: 0; font-size: calc(14 * var(--vk)); font-weight: 700; text-align: left; line-height: 1.35; }
  .rd-fig > .visually-hidden td { flex: none; font-family: var(--f-cond); font-size: calc(17 * var(--vk)); font-weight: 700; color: var(--md-acc); }
  .rd-grid-l { row-gap: calc(36 * var(--vk)); }

  /* 評分構面三格（包容／參與／當責）：390 以下英文副標（Accountability）會擠出格子 → 兩欄 */
  .fg-item { padding: calc(9 * var(--vk)) calc(10 * var(--vk)) calc(9 * var(--vk)) calc(12 * var(--vk)); }
}
@media (max-width: 389px) {
  .fg-items[style*="--n:3;"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fg-items[style*="--n:3;"] > :last-child { grid-column: 1 / -1; }   /* v7-fix：2＋1 時第三格（當責）跨兩欄，不再單獨一格留半邊空 */
  /* 360–389 寬：類別頁「輔導方式」最長的一項（IFRS S1 S2，7 條）行距與內距再收一點，一項仍在一個畫面內 */
  .svc-art { gap: calc(10 * var(--vk)); }
  .svc-desc { line-height: 1.6; }
  .svc-method-box { padding: calc(14 * var(--vk)); }
  .svc-methods li { padding: calc(3 * var(--vk)) 0; line-height: 1.45; }
  .svc-method-label { margin-bottom: calc(2 * var(--vk)); }
}

/* ---------- 8b. 數據表（≤ 419px） ---------- */
@media (max-width: 419px) {
  /* 數據表（/services/impact/impact-management「2024成效」）：4 欄表格至少要 358px 寬——360 寬原本就要左右滑（342／328），
     版心改 20px 後 375、390 也放不下 → 420 以下改成：圖例列（三個欄名＋色點）置頂，每個項目一列：
     項目名稱一行、三個數值平均分成三格，每格前面是同色點（後台換成其他欄數的表格也適用）。420–599 維持原本的表格。 */
  .dt-scroll { overflow: visible; }
  .dt-table, .dt-table thead, .dt-table tbody, .dt-table tr { display: block; }
  .dt-table thead tr { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: calc(6 * var(--vk)) calc(18 * var(--vk)); padding-bottom: calc(12 * var(--vk)); border-bottom: calc(2 * var(--vk)) solid currentColor; }
  .dt-table thead td { display: none; }
  .dt-table thead th { padding: 0; border: 0; font-size: calc(14 * var(--vk)); text-align: left; }
  .dt-table tbody tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: calc(12 * var(--vk)); padding: calc(10 * var(--vk)) 0 calc(12 * var(--vk)); }
  .dt-table tbody th { grid-column: 1 / -1; padding: 0 0 calc(2 * var(--vk)); font-size: calc(15 * var(--vk)); white-space: normal; }
  .dt-table td { position: relative; padding: 0 0 0 calc(14 * var(--vk)); text-align: left; }
  .dt-table td::before { content: ""; position: absolute; left: 0; top: .6em; width: calc(8 * var(--vk)); height: calc(8 * var(--vk)); border-radius: 50%; background: var(--c, var(--coral)); }
  .dt-table td:nth-of-type(2) { --c: var(--blue); }
  .dt-table td:nth-of-type(3) { --c: var(--ink); }
  .tone-ink .dt-table td:nth-of-type(3) { --c: var(--paper); }
  .dt-v { font-size: calc(18 * var(--vk)); }
  .dt-bar { margin: calc(6 * var(--vk)) 0 0; transform-origin: 0 50%; }
  .dt-notes { grid-template-columns: minmax(0, 1fr); gap: calc(8 * var(--vk)); }
  .dt-notes-l { justify-self: start; }
}

/* ---------- 9. 首頁：服務帶卡片、集團平台 ---------- */
@media (max-width: 599px) {
  .rail-items li { padding: calc(5 * var(--vk)) calc(12 * var(--vk)); }
  .gp-link { height: calc(92 * var(--vk)); }
}

/* ---------- 10. /design（內部頁）：色票直排時比例字與名稱疊在一起 ---------- */
@media (max-width: 699px) {
  .ds-swatches { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ds-sw { min-height: calc(88 * var(--vk)); padding: calc(14 * var(--vk)) calc(16 * var(--vk)); }
}

/* ---------- 11. 頁尾：每個連結 44px 高、標籤 13px、減少動態開關 44px ---------- */
@media (max-width: 599px) {
  .foot-nav { padding: calc(8 * var(--vk)) 0 calc(16 * var(--vk)); }
  .foot-col { padding: calc(6 * var(--vk)) 0 calc(10 * var(--vk)); }
  .foot-h { align-items: center; }
  .foot-h a { display: flex; align-items: center; min-height: calc(48 * var(--vk)); }
  .foot-col ul { gap: 0 calc(16 * var(--vk)); margin-top: 0; font-size: calc(15 * var(--vk)); }
  .foot-col ul a { display: flex; align-items: center; min-height: calc(44 * var(--vk)); }
  .foot-bottom { gap: calc(8 * var(--vk)) calc(24 * var(--vk)); padding-top: calc(16 * var(--vk)); font-size: calc(14 * var(--vk)); }
  .foot-legal, .foot-ext { gap: 0 calc(22 * var(--vk)); }
  .foot-legal a, .foot-ext a { display: inline-flex; align-items: center; min-height: calc(44 * var(--vk)); }
  .foot-copy { padding: calc(6 * var(--vk)) 0; line-height: 1.8; }
  /* 開關：v7-fix 起按鈕本身 44px 高（可見文字「減少動態」＋44×26 的膠囊），不再需要透明的 ::after */
  .foot-bottom { row-gap: calc(12 * var(--vk)); }
}

/* ---------- 12. 行動選單：子項目 44px ---------- */
@media (max-width: 599px) {
  .m-kids { gap: calc(8 * var(--vk)); }
  .m-kids a { display: inline-flex; align-items: center; min-height: calc(44 * var(--vk)); padding: 0 calc(16 * var(--vk)); }
}


/* ═══════════════════════════════════════════════════════════════════════════
   v7-fix（2026-09-27，手機體驗審查 7／10、對抗驗證）：捲動長度被非內容吃掉、麵包屑懸空「／」、服務帶膠囊看起來能點、選單過高…
   仍只作用在 ≤ 599px（或註明的斷點），桌機輸出不變；不新增捲動 JS、不讀版面。
   ═══════════════════════════════════════════════════════════════════════════ */

/* ---------- 13. 麵包屑與眉標 ---------- */
@media (max-width: 599px) {
  /* 第 4 層的目前頁已隱藏（就是下方 H1），但分隔符號在前一個 li 裡 → 尾端懸空的「／」（19 個服務內頁；對抗驗證 medium） */
  .crumbs li:has(+ li[aria-current]:nth-child(n + 4)) .sep { display: none; }
  /* 3 層以上的頁面，眉標＝麵包屑裡已經出現的上一層（「永續顧問服務」「永續策略藍圖發展」「關於我們」…）→ 手機不重複顯示第三顆膠囊；
     （第一層分類頁原本的「致X」眉標已依 Tommy 2026-09-30 全站移除） */
  .hero-top:has(> .crumbs li:nth-child(3)) > .eyebrow { display: none; }
}

/* ---------- 14. 同類別其他服務（link-index）：只留序號＋標題＋箭頭 ---------- */
@media (max-width: 599px) {
  /* 每一項原本 4–6 行完整說明，整塊平均 770px（471–990），比頁面本身的服務內容還長；說明在該服務自己的頁面讀得到 → 手機只留一列，
     整列 56px 以上、整列可點（原本就是整列 <a>）。說明仍在 HTML（讀屏、SEO） */
  .blk-link-index .li-body { display: none; }
  .li-a { grid-template-columns: calc(36 * var(--vk)) minmax(0, 1fr); align-items: center; min-height: calc(60 * var(--vk)); padding: calc(12 * var(--vk)) 0; }
  .li-n { font-size: calc(22 * var(--vk)); padding-top: 0; }
  .li-main { gap: calc(4 * var(--vk)); }
  .li-title { font-size: calc(18 * var(--vk)); padding-right: calc(36 * var(--vk)); }
  .li-more { top: 50%; transform: translateY(-50%); }
}

/* ---------- 15. 頁尾：精簡（1144–1188px → 約 520px） ---------- */
@media (max-width: 599px) {
  /* 全站捲動距離約 28％ 是頁尾（/faq、/about/partners 60％ 以上）。子連結在行動選單與各類別頁都有 → 手機頁尾只留：
     一行標語＋小字標、6 個大類（兩欄、每格 52px）、法務、集團平台、版權、減少動態。子連結仍在 HTML（爬蟲、讀屏） */
  .site-foot { padding: calc(40 * var(--vk)) 0 calc(24 * var(--vk)); }
  .site-foot::before { width: calc(110 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100); height: calc(110 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100); }
  .foot-top { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: calc(16 * var(--vk)); padding-bottom: calc(20 * var(--vk)); }
  .foot-title { font-size: calc(19 * var(--vk)); line-height: 1.3; padding-left: calc(16 * var(--vk)); max-width: none; }
  .foot-mark { width: calc(60 * var(--vk)); }
  .foot-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: calc(16 * var(--vk)); padding: calc(4 * var(--vk)) 0 calc(16 * var(--vk)); }
  .foot-col { padding: 0; background: linear-gradient(90deg, var(--rule-inv), rgba(244,241,234,0)) top / 100% 1px no-repeat; }
  .foot-col ul { display: none; }
  .foot-h { flex-direction: row; align-items: center; justify-content: space-between; gap: calc(8 * var(--vk)); margin: 0; }
  .foot-h a { min-height: calc(52 * var(--vk)); font-size: calc(16 * var(--vk)); }
  .foot-bottom { padding-top: calc(12 * var(--vk)); row-gap: calc(4 * var(--vk)); }
  .foot-legal, .foot-ext { gap: 0 calc(20 * var(--vk)); }
  .foot-copy { padding: calc(8 * var(--vk)) 0 calc(4 * var(--vk)); line-height: 1.7; font-size: calc(13 * var(--vk)); }
}

/* ---------- 16. 首頁服務帶：子服務是純文字（整張卡片才是連結），影像窗降 30％ ---------- */
@media (max-width: 599px) {
  /* 卡片裡的子服務原本是膠囊，和 /services 可點的 44px 膠囊長得一樣，點了卻進類別頁 → 手機改成純文字清單（小圓點分隔），
     不再像按鈕；整張卡片仍是一個連結（桌機釘選與點選邏輯不變） */
  .rail-items { gap: calc(2 * var(--vk)) calc(14 * var(--vk)); margin-top: calc(10 * var(--vk)); }
  .rail-items li { position: relative; padding: 0 0 0 calc(11 * var(--vk)); border-radius: 0; background: none; box-shadow: none; font-size: calc(14 * var(--vk)); font-weight: 500; letter-spacing: .02em; color: var(--b-on-2); line-height: 1.7; }
  .rail-items li::before { content: ""; position: absolute; left: 0; top: .78em; width: calc(4 * var(--vk)); height: calc(4 * var(--vk)); border-radius: 50%; background: currentColor; opacity: .6; }
  /* 影像窗 180–240px → 136–176px（服務帶 3.2 屏 → 約 2.6 屏），場景仍完整呈現 */
  .rail-card { --win: clamp(calc(136 * var(--vk)), calc(38 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(176 * var(--vk))); }
}

/* ---------- 17. 行動選單：一屏內看到「聯絡我們」 ---------- */
@media (max-width: 599px) {
  /* 選單內容 994px ＞ 844px 視窗，主要按鈕在首屏外 → 群組間距收小、子項目 6px；「聯絡我們」固定在選單底部（INK 漸層底） */
  .m-menu { padding-top: calc(var(--head-h) + calc(24 * var(--vk))); padding-bottom: 0; }
  .m-list { gap: 0; }
  .m-a { padding: calc(6 * var(--vk)) 0; }
  .m-l { font-size: clamp(calc(26 * var(--vk)), calc(7.4 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(34 * var(--vk))); }
  .m-kids { gap: calc(6 * var(--vk)); padding-bottom: calc(10 * var(--vk)); }
  .m-kids a { min-height: calc(40 * var(--vk)); padding: 0 calc(14 * var(--vk)); }
  .m-kids li { display: flex; }
  .m-kids li a { position: relative; }
  .m-kids li a::after { content: ""; position: absolute; left: 0; right: 0; top: calc(-2 * var(--vk)); bottom: calc(-2 * var(--vk)); }   /* 視覺 40px、點擊 44px */
  .m-foot { position: sticky; bottom: 0; margin: calc(12 * var(--vk)) calc(var(--gut) * -1) 0; padding: calc(20 * var(--vk)) var(--gut) calc(calc(20 * var(--vk)) + env(safe-area-inset-bottom)); background: linear-gradient(180deg, rgba(17,17,17,0), var(--ink) 32%); }
}

/* ---------- 18. 利害關係人地圖（手機分層清單）：每一組的卡片橫向排列、左右滑動 ---------- */
@media (max-width: 599px) {
  /* 原本 2211px（2.6 屏）的卡片直向堆疊，使用者很難掌握結構 → 每一組一列、卡片左右滑動（露出下一張的邊緣），整張地圖約 1 屏多；
     群組標題在上、卡片內的關係與動作不變。只用 CSS（scroll-snap），不改文案 */
  .sm-list { gap: calc(20 * var(--vk)); }
  .sm-cards { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 84%; gap: calc(10 * var(--vk)); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gut); margin-inline: calc(var(--gut) * -1); padding: calc(2 * var(--vk)) var(--gut) calc(10 * var(--vk)); scrollbar-width: none; }
  .sm-cards::-webkit-scrollbar { display: none; }
  .sm-card { scroll-snap-align: start; }
  .sm-rels li { gap: 0; }
}

/* ---------- 19. 其他 ---------- */
@media (max-width: 599px) {
  /* 雷達圖數值清單：「供應商/承攬商」在 360 寬把「商」單獨斷到下一行 → 名稱只在詞界（含「/」後）換行 */
  .rd-fig > .visually-hidden th { word-break: keep-all; overflow-wrap: anywhere; }
}

/* ---------- 20. 360 寬的小手機（360×640 參考視窗；對抗驗證：3 處超過一屏、其中 2 處比 v6 變差） ---------- */
@media (max-width: 389px) {
  /* SDGs 案例開頭（長導言＋兩個數字）：導言行距 1.75 → 1.6；管理流程（5 步驟）：每步下方留白 22 → 14px、說明行距 1.75 → 1.6 */
  .md-case-lead { line-height: 1.6; }
  .md-case-head--aside { row-gap: calc(10 * var(--vk)); }
  .pf-step { padding-bottom: calc(14 * var(--vk)); }
  .pf-desc { line-height: 1.6; }
  .pf-step > .pf-desc { margin-top: calc(4 * var(--vk)); }
  /* 數據表堆疊列：每列上下 10／12 → 7／8px */
  .dt-table tbody tr { padding: calc(7 * var(--vk)) 0 calc(8 * var(--vk)); }
  /* 類別頁服務項目（IFRS S1 S2，7 條輔導方式）：面板內距 14 → 12px、條目 3 → 1px */
  .svc-methods li { padding: 1px 0; }
  .svc-method-box { padding: calc(12 * var(--vk)); }
  .svc-art { gap: calc(8 * var(--vk)); }
}
@media (max-width: 389px) and (max-height: 700px) {
  /* 首頁開場（360×640）：主標與導言面板之間、面板內距收一點，一屏放得下（構圖不變：地平線跟著主標上緣定位） */
  .stage-grid { row-gap: calc(14 * var(--vk)); }
  .blk-stage-hero .stage-foot { padding: calc(16 * var(--vk)) calc(18 * var(--vk)); row-gap: calc(12 * var(--vk)); }
  .stage-side { gap: calc(14 * var(--vk)); }
}

/* 17-graphic.css */
/* ═══════════════════════════════════════════════════════════════════════════
   17-graphic.css：幾何記號（2026-10-02 Tommy 核准的 ps-judge 合併定稿：ps-icon 為底，/services 採 ps-environment、/about/contact 採 ps-poster，
   /services/strategy 換備案「剖開、錯位的方塊」；Paula Scher 識別作品的大膽幾何記號轉譯，取代 8 處人物插畫；blocks/_graphic.js）
   ───────────────────────────────────────────────────────────────────────────
   文字與幾何在同一個面板：宣言 INK 帶（整條 section）、宣言 CORAL 單卡（卡片改為 12 欄）、行動邀請帶（整條 section）、聯絡表單左欄（和表單等高的 CORAL 面板）。
   平塗：放幾何的宿主拿掉漸層／光暈（Scher 的實色），形與形直接相接；沒有格線、沒有投影。
   文字區保持安靜：形只出現在文字的另一側（桌機右側、手機文字下方的條帶），且一律留出 ≥ 40px 呼吸。
   桌機（≥ 900）用 .gx-d，手機與窄平板（< 900）用 .gx-m（重新構圖，不是縮小）。尺寸全用 CSS px（寬螢幕由建置等比放大）。
   動態：[data-draw]（或行動列 [data-reveal]）→ runtime 加 .is-in；只在 no-preference 且沒有 html.reduce-motion 時才先藏起來，否則一律是完成畫面。
   ═══════════════════════════════════════════════════════════════════════════ */

.gx { pointer-events: none; -webkit-user-select: none; user-select: none; }
.gx svg { display: block; overflow: visible; max-width: none; }
.gx .gx-m { display: none; }
@media (max-width: 899px) {
  .gx .gx-d { display: none; }
  .gx .gx-m { display: block; }
}
.gx .f-ink { fill: var(--ink); }
.gx .s-ink { stroke: var(--ink); fill: none; }
.gx .f-paper { fill: var(--paper); }
.gx .f-blue { fill: var(--blue); }
.gx .f-coral { fill: var(--coral); }
.gx .f-lime { fill: var(--lime); }

/* ── 宣言 A（INK）：整條 INK 帶是一張畫布；桌機構圖貼右緣、高＝整條帶；手機在文字下方的條帶、往下緣與左右緣出血 ── */
.has-graphic.mani-v-ink { position: relative; isolation: isolate; }
.has-graphic.mani-v-ink > .wrap { position: relative; z-index: 2; }
.has-graphic > .gx-layer { position: absolute; inset: 0; z-index: 1; overflow: hidden; }
.has-graphic > .gx-layer .gx-d { position: absolute; right: 0; bottom: 0; height: 100%; width: auto; }
.has-graphic .mani--ink .mani-rule { display: none; }
.has-graphic .mani--ink > .gx-slot { display: none; }
@media (min-width: 900px) { .has-graphic .mani--ink .mani-statement { grid-column: 1 / span 7; } }
@media (max-width: 899px) {
  .has-graphic.mani-v-ink > .gx-layer { display: none; }
  .has-graphic .mani--ink > .gx-slot { display: block; overflow: hidden; margin: calc(24 * var(--vk)) calc(-1 * var(--gut)) calc(-1 * var(--sec-y-l)); }
  .has-graphic .mani--ink > .gx-slot .gx-m { width: 100%; height: auto; }
}

/* ── 宣言 C（CORAL 單卡）：卡片改為 12 欄一整塊、平塗 CORAL；左側文字、右側構圖貼卡片右緣（手機：文字在上、構圖在卡片下緣的條帶） ── */
.has-graphic .mani-coral-panel { position: relative; overflow: hidden; isolation: isolate; background: var(--coral); }
.has-graphic .mani-coral-panel > :not(.gx) { position: relative; z-index: 2; }
.mani-coral-panel > .gx-layer { position: absolute; inset: 0; z-index: 1; overflow: hidden; }
.mani-coral-panel > .gx-layer .gx-d { position: absolute; right: 0; bottom: 0; height: 100%; width: auto; }
.mani-coral-panel > .gx-slot { display: none; }
@media (min-width: 900px) {
  .blk-manifesto.has-graphic .mani--coral.mani--solo .mani-coral-panel { grid-column: 1 / -1; }
}
@media (max-width: 899px) {
  .mani-coral-panel > .gx-layer { display: none; }
  .has-graphic .mani-coral-panel { --gx-pad: clamp(calc(28 * var(--vk)), calc(3.2 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(52 * var(--vk))); }
  .mani-coral-panel > .gx-slot { display: block; overflow: hidden; margin: calc(24 * var(--vk)) calc(-1 * var(--gx-pad)) calc(-1 * var(--gx-pad)); }
  .mani-coral-panel > .gx-slot .gx-m { width: 100%; height: auto; }
}

/* ── 行動邀請帶：平塗 KM BLUE；構圖在整條色帶的 layer 裡（色帶裁切＝出血）。SVG 的 (0, 中線) 對齊按鈕右側＋間距、按鈕中線：
      left＝內容左緣＋按鈕寬（188）＋間距；bottom＝區塊下內距＋按鈕半高（32）− SVG 半高 ── */
.blk-cta-band.has-graphic.tone-blue { background: var(--blue); }
.blk-cta-band.has-graphic { position: relative; isolation: isolate; --gx-gr: max(var(--gut), (100% - var(--max)) / 2); --gx-cy: calc(var(--sec-y) + calc(32 * var(--vk))); }
.blk-cta-band.has-graphic > .wrap { position: relative; z-index: 2; }
.gx-layer .gx-k { position: absolute; width: auto; }
.gx-layer .gx-k.gx-d { height: calc(1200 * var(--vk)); bottom: calc(var(--gx-cy) - calc(600 * var(--vk))); left: calc(var(--gx-gr) + calc(188 * var(--vk)) + var(--gx-gap, 0px)); }
.gx-layer .gx-k.gx-m { height: calc(400 * var(--vk)); bottom: calc(var(--gx-cy) - calc(200 * var(--vk))); left: calc(var(--gx-gr) + calc(188 * var(--vk)) + var(--gx-gap-m, 0px)); }
.gxh--about-consult-cta { --gx-gap: 0px; --gx-gap-m: 0px; }

/* ── 06 /services（採 ps-environment）：行動列是構圖的一部分——10px 錨點 SVG 貼在按鈕右側、同一條中線；兩面 72° 斜牆與方向線由色帶（overflow:hidden）裁切 ── */
.gxh--services-insight-to-transform .cta-act { display: flex; align-items: center; }
.gxh--services-insight-to-transform .cta-act > .cta-mega { flex: none; position: relative; z-index: 2; }
@media (min-width: 900px) { .gxh--services-insight-to-transform .cta-title { grid-column: 1 / span 7; } }
.gx-act.gx-anchor { position: relative; flex: none; width: 0; height: calc(64 * var(--vk)); z-index: 1; }
.gx-anchor .gx-pt { position: absolute; left: 0; top: 50%; width: calc(10 * var(--vk)); height: calc(10 * var(--vk)); }

/* ── 08 聯絡表單左欄（採 ps-poster）：和表單等高的平塗 CORAL 面板；標題在上半部安靜區，下半部 58% 是 18° 斜排條帶，LIME 方塊與送出鈕同一條中線 ── */
.has-graphic .form-head { overflow: hidden; isolation: isolate; background: var(--coral); }
.has-graphic .form-head > :not(.gx) { position: relative; z-index: 2; }
.form-head > .gx-layer { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; height: 58%; }
.form-head > .gx-layer > .gx-d { position: absolute; inset: 0; width: 100%; height: 100%; }
.gx--contact-reply .gx-sq { position: absolute; z-index: 1; width: calc(64 * var(--vk)); height: calc(64 * var(--vk)); right: 0; bottom: calc(var(--gx-by, calc(64 * var(--vk))) - calc(32 * var(--vk))); background: var(--lime); }
@media (min-width: 900px) {
  /* 送出鈕中線距表單底緣：表單下內距＋按鈕半高 */
  .blk-contact-form.has-graphic { --gx-by: calc(clamp(calc(20 * var(--vk)), calc(2.4 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(36 * var(--vk))) + calc(28 * var(--vk))); }
  .blk-contact-form.has-graphic .form-grid { align-items: stretch; }
  .blk-contact-form.has-graphic .form-head { position: relative; top: auto; align-content: start; min-height: 0; }
}
@media (max-width: 899px) {
  /* 手機不加高：標題長條右端 34% 放斜倚 INK 塊＋BLUE 細條＋LIME 方塊；.form-head 取消 sticky 偏移（top:auto） */
  .has-graphic .form-head { position: relative; top: auto; padding-right: 36%; }
  .form-head > .gx-layer { left: auto; top: 0; width: 34%; height: auto; }
  .form-head > .gx-layer > .gx-m { position: absolute; inset: 0; width: 100%; height: 100%; }
  /* 手機不放 LIME 方塊（封閉方塊坐在圓角長條端＝像開關旋鈕）：改由 SVG 內 72° LIME 細條承擔 */
  .gx--contact-reply .gx-sq { display: none; }
}

/* ── 進場（一次）：色塊由出血方向滑入、圓由圓心角展開、方塊放大、方向線沿中線掃入；不做每幀讀版面、不用 animation-timeline。
      inline style 只有不帶單位的數字（--d 毫秒、--dm 位移延遲毫秒（選填，預設＝--d）、--tx／--ty／--ox／--oy＝SVG 使用者單位），這裡才乘上 1px／1ms。
      淡入只有 .15s（半透明的 BLUE／INK 疊在 CORAL 上會出現品牌外的混色；讓中途幾乎只看得到實色）。
      SVG 元素上的 1px＝1 使用者單位（隨 viewBox 縮放），不是 CSS 框尺寸，所以不受 scale.mjs「不能寫 * 1px」的限制 ── */
@media (prefers-reduced-motion: no-preference) {
  html.js:not(.reduce-motion) .gx .gx-in { opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; transform: translate(calc(var(--tx, 0) * 1px), calc(var(--ty, 0) * 1px)) scale(var(--s, 1)); transition: transform 1.1s var(--ease-out) calc(var(--dm, var(--d, 0)) * 1ms), opacity .15s linear calc(var(--d, 0) * 1ms); }
  html.js:not(.reduce-motion) .gx .gx-arc { transform-box: view-box; transform-origin: calc(var(--ox) * 1px) calc(var(--oy) * 1px); transform: scale(.15); }
  html.js:not(.reduce-motion) .gx :is(.gx-slide, .gx-sweep) { opacity: 0; transition: transform 1.1s var(--ease-out) calc(var(--d, 0) * 1ms), opacity .15s linear calc(var(--d, 0) * 1ms); }
  html.js:not(.reduce-motion) .gx .gx-slide { transform: translate(calc(var(--tx, 0) * 1px), calc(var(--ty, 0) * 1px)); }
  html.js:not(.reduce-motion) .gx .gx-sweep { transform: translateX(calc(var(--sx, -160) * 1px)); }
  html.js:not(.reduce-motion) :is(.gx.is-in, .is-in > .gx-act) :is(.gx-in, .gx-slide, .gx-sweep) { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 899px) { .gx-m .gx-sweep { --sx: -60; } }
/* 360 級手機：careers 最長一句（13 字）一行放下，不在「最｜重要」斷開（沿用 g3-judge） */
@media (max-width: 399px) { .gxh--careers-journey .mani-statement { font-size: min(var(--t-l), calc(6.9 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100)); } }

/* 18-wintext.css */
/* Windows 文字清晰度（wc-text 調查 2026-10-02；v14 2026-10-03 起選項 A 在 Windows 預設套用）。
   條件：html.is-win（wintext.mjs WC_BOOT 在第一次繪製前依 UA-CH platform／UA 字串加上）。Mac、iPhone、Android 沒有 is-win → 完全不受影響。
   開關（檢查／比較用）：?wc=win 在 Mac 上強制模擬 is-win；?wc=off 在 Windows 上關掉選項 A（回到 v13 行為對照）；
         ?wc=d 試選項 D（只在 is-win 生效）；可合併，例：?wc=win,d、?wc=win,off。
   背景：Chrome／Edge 在 Windows（DPR 1、ClearType 開啟）只有「合成圖層確定是不透明底」時才用 LCD（ClearType 次像素）
   抗鋸齒，否則改灰階。check/wc-layers.mjs（--enable-lcd-text＋cc 追蹤 lcd_text_disallowed_reason）量到首頁導言、
   按鈕、選單都因為下列原因被切成透明底的獨立圖層 → 灰階。Mac 沒有次像素抗鋸齒，所以 Mac 上看不出差別。 */

/* ---------- 選項 A（Windows 預設）：讓有實色底的文字回到不透明圖層 ----------
   A1 進場動畫 fill-mode both → backwards：結束值本來就是 transform: none（＝預設值），畫面與時序完全相同；
      但 both 會讓「已結束」的動畫一直生效，Chrome 永遠把元素留在合成圖層（ActiveTransformAnimation），
      導言、按鈕列各自成為透明底圖層 → 灰階；動畫中的元素還讓後面的元素被「假設重疊」一起提升。 */
html.is-win:not(.wc-off).js .soft-in,
html.is-win:not(.wc-off).js .stage-title .ln > span,
html.is-win:not(.wc-off).js [data-rise] { animation-fill-mode: backwards; }
/* 主標本來就直接疊在 WebGL 場景上（透明底，Windows 一定是灰階），給它一個靜態圖層隔開：
   不再是「動畫中」的圖層，後面的元素不會因為假設重疊被拆成透明底小圖層。 */
html.is-win:not(.wc-off).js .stage-title,
html.is-win:not(.wc-off).js [data-rise] { will-change: transform; }
/* 有實色底的卡片自成一個靜態圖層（translateZ(0) 是整數平移，不影響 LCD 判定），裡面的文字和實色底在同一圖層 → 可用 ClearType。
   動畫進行中 transform 由 softIn 決定，結束後為 translateZ(0)，與 none 畫面相同。 */
html.is-win:not(.wc-off).js :is(.stage-foot, .hero--visual .hero-lead-wrap) { transform: translateZ(0); }
/* A2 按鈕不必是定位元素（沒有絕對定位子元素或 z-index）：position: relative 讓每顆按鈕自成繪製層，
   在合成重疊判定下被拆成獨立圖層，圖層範圍含發光陰影（透明）→ 灰階。改成 static 後按鈕畫在所屬卡片的圖層裡。
   （hover 的 translateY 仍會讓按鈕暫時成為堆疊環境，與原本相同；v14 逐像素確認靜止與 hover 的層次都和 position: relative 相同。） */
html.is-win:not(.wc-off) .btn { position: static; }
/* A3 減少動態（Tommy 的 Windows：prefers-reduced-motion: reduce）時停用捲動視差 driftUp：
   原規則只看手動開關 html.reduce-motion，系統設定減少動態時仍在跑，被位移的大字和周圍元素一起被提升成透明底圖層。 */
@media (prefers-reduced-motion: reduce) {
  html.is-win:not(.wc-off).js :is(.svc-n, .rep-short, .stat-p .num) { animation: none; }
}
/* A4 選單膠囊的浮起陰影會讓整個頁首圖層判定為「內容不透明度未知」→ 選單字灰階。
   陰影只有 0 1px 2px／0 6px 16px -8px（很淡），Windows 上拿掉換 ClearType；Mac 保留。 */
html.is-win:not(.wc-off) .head-cap { box-shadow: none; }

/* ---------- 選項 D（不預設；?wc=d 比較用）：Windows 內文中文改用系統的微軟正黑體 ----------
   品牌規範附註「Windows 使用 Arial＋Microsoft JhengHei」。Noto Sans TC（Google Fonts 版）完全沒有 TrueType 微調指令，
   Windows 在 14–17px 只能靠抗鋸齒，筆畫落在半像素上 → 發灰；微軟正黑體有完整微調並針對 ClearType 調校。
   只換內文（--f-body：導言、選單、按鈕、卡片說明）；主標、大字（--f-display）維持 Noto Sans TC 品牌字。拉丁字母仍是 Inter。 */
html.wc-d.is-win {
  --f-body: "Inter", "Microsoft JhengHei", "Noto Sans TC", "PingFang TC", system-ui, sans-serif;
  --f-cjk: "Microsoft JhengHei", "Noto Sans TC", "PingFang TC", system-ui, sans-serif;
}

/* 19-feedback-b.css */
/* 同仁回饋 0929（fb-B）：產業經驗、研究與洞察、共創實驗室、關於我們、人才招募
 * 寫法同全站：Mac 1512 寬為基準的 px（scale.mjs 建置時改寫成寬螢幕等比放大）；≤ 1.5px 的髮絲線不放大。 */

/* ---------- 主視覺導言多段（page-hero／industry-constellation lead 陣列） ---------- */
.hero-lead-wrap--multi .hero-lead + .hero-lead { margin-top: .7em; }
.hero-lead--strong { font-weight: 700; letter-spacing: .04em; }
/* 產業經驗：導言三段（約 170 字）——卡片放寬一點，行數少、整個主視覺仍在一屏 */
@media (min-width: 900px) {
  .const--hero .hero-lead-wrap--multi { grid-column: 6 / -1; }
  .const--hero .hero-lead-wrap--multi .hero-lead { max-width: none; font-size: clamp(calc(15 * var(--vk)), calc(1.06 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(17 * var(--vk))); line-height: 1.75; }
}
@media (max-width: 599px) {
  .hero-lead-wrap--multi .hero-lead { font-size: calc(15 * var(--vk)); line-height: 1.7; }
  .hero-lead-wrap--multi .hero-lead + .hero-lead { margin-top: .5em; }
}

/* ---------- longform：pair（標題＋說明）、list（條列）、headingSub ---------- */
.lf-head-sub { font-family: var(--f-display); font-size: clamp(calc(16 * var(--vk)), calc(1.2 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(18 * var(--vk))); font-weight: 700; letter-spacing: .12em; color: var(--fg-2); }
.lf-head-sub::before { content: ""; display: block; width: calc(40 * var(--vk)); height: calc(3 * var(--vk)); margin-bottom: calc(12 * var(--vk)); border-radius: calc(3 * var(--vk)); background: var(--coral); }
.lf-pair .lines-head { margin-bottom: calc(10 * var(--vk)); }
.lf-pair .lf-pair-body { font-size: calc(16 * var(--vk)); line-height: 1.8; color: var(--fg-2); }
.tone-blue .lf-pair .lf-pair-body { color: var(--ink); }
/* grid 版：三點時一列三欄（產業經驗藍色區） */
.lf--grid .lf-body:has(> .lf-pair:nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* split 版：右欄編號列表（關於我們「我們是誰」01–05） */
.lf--split .lf-body { counter-reset: lfn; }
.lf--split .lf-pair { counter-increment: lfn; position: relative; display: grid; padding: calc(18 * var(--vk)) 0 calc(18 * var(--vk)) clamp(calc(56 * var(--vk)), calc(4.6 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(72 * var(--vk))); border-radius: 0; background: none; box-shadow: none; border-top: 1px solid var(--rule-ink); }
.lf--split .lf-lead + .lf-pair { margin-top: calc(8 * var(--vk)); }
.lf--split .lf-pair::before { content: counter(lfn, decimal-leading-zero); position: absolute; left: 0; top: calc(14 * var(--vk)); font-family: var(--f-cond); font-size: clamp(calc(30 * var(--vk)), calc(2.6 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(40 * var(--vk))); font-weight: 300; line-height: 1; letter-spacing: -.03em; color: var(--ink); }
.lf--split .lf-pair .lines-head { font-size: clamp(calc(18 * var(--vk)), calc(1.4 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(21 * var(--vk))); margin-bottom: calc(6 * var(--vk)); }
.lf--split .lf-body:has(> .lf-pair) { row-gap: 0; }
.lf--split .lf-body:has(> .lf-pair) > .lf-lead { margin-bottom: calc(22 * var(--vk)); }
.tone-blue .lf--split .lf-pair { border-color: rgba(17,17,17,.2); }
.lf-list { margin-top: calc(4 * var(--vk)); }
.lf-list li { font-size: var(--t-body); line-height: 1.75; color: var(--ink); font-weight: 600; }
.lf-list li::before { background: var(--coral); }
@media (max-width: 899px) {
  .lf--grid .lf-body:has(> .lf-pair:nth-child(3):last-child) { grid-template-columns: 1fr; }
}
@media (max-width: 599px) {
  .lf--split .lf-pair { padding: calc(14 * var(--vk)) 0 calc(14 * var(--vk)) calc(48 * var(--vk)); }
  .lf--split .lf-pair::before { top: calc(12 * var(--vk)); font-size: calc(28 * var(--vk)); }
  .lf--split .lf-pair .lines-head { font-size: calc(17 * var(--vk)); }
  .lf-pair .lf-pair-body { font-size: calc(15 * var(--vk)); line-height: 1.75; }
  .lf-list li { font-size: calc(16 * var(--vk)); }
}

/* ---------- 產業圖示列：點選展開（I4） ---------- */
.ind-row--x { grid-auto-flow: row dense; border-bottom: 0; overflow-x: clip; }
.ind-row--x > .ind--x { display: grid; align-content: stretch; padding: 0; margin-left: -1px; border-left: 1px solid var(--rule-ink); border-bottom: 1px solid var(--rule-ink); }
.ind-row--x > .ind--x + .ind { padding-left: 0; }
.ind-btn { position: relative; display: grid; justify-items: start; align-content: start; gap: calc(8 * var(--vk)); width: 100%; height: 100%; padding: calc(20 * var(--vk)) calc(30 * var(--vk)) calc(22 * var(--vk)) calc(14 * var(--vk)); border: 0; border-radius: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.ind-row--x > .ind--x:first-child .ind-btn { padding-left: 1px; }
.ind-btn:focus-visible { outline: calc(2 * var(--vk)) solid var(--blue); outline-offset: calc(-4 * var(--vk)); }
.ind--x:hover::after, .ind--x:focus-within::after, .ind--x.is-open::after { transform: none; }
.ind-chev { position: absolute; top: calc(22 * var(--vk)); right: calc(12 * var(--vk)); width: calc(12 * var(--vk)); height: calc(12 * var(--vk)); }
.ind-chev::before, .ind-chev::after { content: ""; position: absolute; left: 0; top: 50%; width: calc(12 * var(--vk)); height: calc(2 * var(--vk)); margin-top: -1px; border-radius: calc(2 * var(--vk)); background: currentColor; transition: transform var(--d-2, .2s) var(--ease-out); }
.ind-chev::after { transform: rotate(90deg); }
.ind-btn[aria-expanded="true"] .ind-chev::after { transform: rotate(0deg); }
.ind--x.is-open .ind-name { color: var(--ink); }
.ind--x.is-open .ind-btn { background: rgba(0,160,224,.1); }
.ind-panel { grid-column: 1 / -1; border-bottom: 1px solid var(--rule-ink); }
.ind-panel[hidden] { display: none; }
.ind-panel-in { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: calc(12 * var(--vk)) var(--col-gap); align-items: start; padding: calc(24 * var(--vk)) 0 calc(28 * var(--vk)); }
.ind-panel-h { display: flex; align-items: baseline; gap: calc(12 * var(--vk)); font-family: var(--f-display); font-size: clamp(calc(19 * var(--vk)), calc(1.5 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(22 * var(--vk))); font-weight: 800; line-height: 1.35; }
.ind-panel-h .ind-n { font-size: calc(14 * var(--vk)); }
.ind-points { display: grid; gap: calc(10 * var(--vk)); }
.ind-points li { position: relative; padding-left: calc(22 * var(--vk)); font-size: calc(16 * var(--vk)); line-height: 1.7; color: var(--fg-2); }
.ind-points li::before { content: ""; position: absolute; left: 0; top: .72em; width: calc(8 * var(--vk)); height: calc(8 * var(--vk)); border-radius: calc(2 * var(--vk)); background: var(--blue); }
.ind-pending { justify-self: start; }
@media (max-width: 1199px) {
  .ind-row--x > .ind--x:nth-child(n) { padding-left: 0; border-top: 0; }
}
@media (max-width: 599px) {
  .ind-btn { padding: calc(14 * var(--vk)) calc(28 * var(--vk)) calc(16 * var(--vk)) calc(14 * var(--vk)); gap: calc(6 * var(--vk)); }
  .ind-chev { top: calc(16 * var(--vk)); right: calc(10 * var(--vk)); }
  .ind-panel-in { grid-template-columns: 1fr; padding: calc(16 * var(--vk)) 0 calc(20 * var(--vk)); }
  .ind-row--x > .ind--x:first-child .ind-btn { padding-left: calc(14 * var(--vk)); }
}

/* ---------- 研究與洞察：最新臨界點的發現（N2） ---------- */
.rf-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: calc(32 * var(--vk)); align-items: center; }
.rf-cover { grid-column: 1 / span 5; margin: 0; }
.rf-cover img { display: block; width: 100%; height: auto; aspect-ratio: 640 / 454; border-radius: var(--r-sm); box-shadow: 0 calc(2 * var(--vk)) calc(4 * var(--vk)) rgba(17,17,17,.08), 0 calc(24 * var(--vk)) calc(48 * var(--vk)) calc(-24 * var(--vk)) rgba(17,17,17,.45); }
.rf-copy { grid-column: 7 / -1; display: grid; gap: calc(22 * var(--vk)); }
.rf-title { font-size: var(--t-m); }
.rf-list { display: grid; }
.rf-item { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: calc(6 * var(--vk)) calc(20 * var(--vk)); padding: calc(18 * var(--vk)) 0; border-top: 1px solid var(--rule-ink); }
.rf-item:last-child { border-bottom: 1px solid var(--rule-ink); }
.rf-label { padding: calc(4 * var(--vk)) calc(12 * var(--vk)); border-radius: var(--r-pill); background: var(--coral); color: var(--ink); font-family: var(--f-display); font-size: calc(14 * var(--vk)); font-weight: 800; letter-spacing: .06em; white-space: nowrap; }
.rf-text { font-family: var(--f-display); font-size: clamp(calc(17 * var(--vk)), calc(1.35 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(20 * var(--vk))); font-weight: 700; line-height: 1.55; }
@media (max-width: 899px) {
  .rf-cover { grid-column: 1 / -1; max-width: calc(520 * var(--vk)); }
  .rf-copy { grid-column: 1 / -1; }
}
@media (max-width: 599px) {
  .rf-grid { row-gap: calc(24 * var(--vk)); }
  .rf-item { grid-template-columns: 1fr; gap: calc(8 * var(--vk)); padding: calc(14 * var(--vk)) 0; }
  .rf-label { justify-self: start; font-size: calc(13 * var(--vk)); }
  .rf-text { font-size: calc(17 * var(--vk)); }
}

/* ---------- 共創實驗室：線上開放工具＋四階段進度（L3／L4，依同仁模型圖 image36 重做） ---------- */
.tp-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: calc(28 * var(--vk)); }
.tp-top { grid-column: 1 / span 4; }
.tp-list { grid-column: 5 / -1; display: grid; gap: calc(18 * var(--vk)); }
.tp-card { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: calc(20 * var(--vk)) clamp(calc(24 * var(--vk)), calc(2.6 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(40 * var(--vk))); padding: clamp(calc(24 * var(--vk)), calc(2.4 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(34 * var(--vk))); border-radius: var(--r-card); background: var(--paper-2); color: var(--ink); box-shadow: var(--sh-1); }
.tp-head { display: grid; gap: calc(10 * var(--vk)); align-content: start; }
.tp-head::after { content: ""; order: 1; width: calc(32 * var(--vk)); height: calc(3 * var(--vk)); border-radius: calc(3 * var(--vk)); background: var(--blue); }
.tp-name { order: 0; font-family: var(--f-display); font-size: clamp(calc(22 * var(--vk)), calc(1.9 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(28 * var(--vk))); font-weight: 800; line-height: 1.3; }
.tp-desc { order: 2; font-size: calc(15 * var(--vk)); line-height: 1.7; color: var(--fg-2); }
.tp-status { position: absolute; top: clamp(calc(16 * var(--vk)), calc(1.6 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(22 * var(--vk))); right: clamp(calc(16 * var(--vk)), calc(1.6 * (100vw - clamp(0px, 100vw - 1512px, var(--sbw, 0px))) / 100), calc(22 * var(--vk))); padding: calc(5 * var(--vk)) calc(14 * var(--vk)); border-radius: var(--r-pill); background: var(--coral); color: var(--ink); font-size: calc(13 * var(--vk)); font-weight: 800; letter-spacing: .08em; }
.tp-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding-top: calc(26 * var(--vk)); }
.tp-step { position: relative; display: grid; justify-items: start; gap: calc(2 * var(--vk)); padding-right: calc(8 * var(--vk)); }
.tp-step::before { content: ""; position: absolute; left: calc(34 * var(--vk)); right: calc(6 * var(--vk)); top: calc(13 * var(--vk)); height: calc(2 * var(--vk)); border-radius: calc(2 * var(--vk)); background: var(--blue); }
.tp-step:last-child::before { content: none; }
.tp-step.is-active::before, .tp-step.is-todo::before { background: repeating-linear-gradient(90deg, rgba(17,17,17,.28) 0 calc(4 * var(--vk)), transparent calc(4 * var(--vk)) calc(9 * var(--vk))); }
.tp-dot { display: grid; place-items: center; width: calc(28 * var(--vk)); height: calc(28 * var(--vk)); margin-bottom: calc(10 * var(--vk)); border-radius: 50%; border: calc(2 * var(--vk)) solid rgba(17,17,17,.28); background: var(--paper-2); color: var(--paper); }
.tp-step.is-done .tp-dot { border-color: var(--blue); background: var(--blue); }
.tp-step.is-active .tp-dot { border-color: var(--blue); box-shadow: inset 0 0 0 calc(4 * var(--vk)) var(--paper-2), inset 0 0 0 calc(14 * var(--vk)) var(--blue); }
.tp-ico { width: calc(18 * var(--vk)); height: calc(18 * var(--vk)); }
.tp-zh { font-family: var(--f-display); font-size: calc(15 * var(--vk)); font-weight: 800; line-height: 1.4; }
.tp-en { font-family: var(--f-cond); font-size: calc(13 * var(--vk)); letter-spacing: .04em; line-height: 1.3; color: var(--fg-2); }
.tp-step.is-todo .tp-zh { color: var(--fg-2); font-weight: 600; }
@media (max-width: 1199px) {
  .tp-top { grid-column: 1 / -1; }
  .tp-list { grid-column: 1 / -1; }
}
@media (max-width: 699px) {
  .tp-card { grid-template-columns: 1fr; gap: calc(18 * var(--vk)); padding: calc(22 * var(--vk)) calc(18 * var(--vk)) calc(20 * var(--vk)); border-radius: var(--r-md); }
  .tp-status { position: static; justify-self: start; }
  .tp-steps { padding-top: 0; }
  .tp-step::before { left: calc(30 * var(--vk)); right: calc(4 * var(--vk)); top: calc(12 * var(--vk)); }
  .tp-dot { width: calc(24 * var(--vk)); height: calc(24 * var(--vk)); margin-bottom: calc(8 * var(--vk)); }
  .tp-step.is-active .tp-dot { box-shadow: inset 0 0 0 calc(4 * var(--vk)) var(--paper-2), inset 0 0 0 calc(12 * var(--vk)) var(--blue); }
  .tp-ico { width: calc(15 * var(--vk)); height: calc(15 * var(--vk)); }
  .tp-zh { font-size: calc(14 * var(--vk)); }
  .tp-en { font-size: calc(12 * var(--vk)); letter-spacing: 0; }   /* fb-fix：全站小字下限 12px */
  .tp-name { font-size: calc(21 * var(--vk)); }
}

/* pair 標題「關鍵詞｜短句」：關鍵詞與短句各自不拆，只在「｜」後換行 */
.lf-pair-head .lf-k, .lf-pair-head .lf-v { display: inline-block; white-space: nowrap; }
.lf-pair-head .lf-sep { margin: 0 .12em; font-weight: 400; }   /* fb-fix：不再降透明度（INK×.55 疊在 BLUE 上只有 2.93:1）；全不透明 INK on BLUE ≈ 6.4:1 */
.lf-pair-head .lf-v { font-weight: 700; }

/* 區塊上下留白（同全站 --sec-y） */
.blk-report-findings, .blk-tool-progress { padding: var(--sec-y) 0; }
.tp-name-zh, .tp-name-en { display: inline-block; white-space: nowrap; }
.tp-name-en { font-family: var(--f-body); font-weight: 700; letter-spacing: -.005em; color: var(--deep); }
.lf-head-sub { color: var(--ink); }

/* 關於我們子頁清單（A5）：說明是一行短句 → 手機也顯示（link-index bodyMobile） */
@media (max-width: 599px) {
  .blk-link-index.li--body-m .li-body { display: block; padding-right: calc(36 * var(--vk)); font-size: calc(14 * var(--vk)); line-height: 1.55; }
  .blk-link-index.li--body-m .li-a { align-items: start; }
  .blk-link-index.li--body-m .li-n { padding-top: calc(2 * var(--vk)); }
}
.hero-lead-wrap--multi .hero-lead { text-wrap: pretty; }

/* 報告封面後方一塊錯位的 CORAL 平塗面（Paula Scher 式的錯位色塊；封面本身不加任何疊字） */
.rf-cover { position: relative; isolation: isolate; }
.rf-cover::before { content: ""; position: absolute; z-index: -1; inset: calc(36 * var(--vk)) calc(-36 * var(--vk)) calc(-36 * var(--vk)) calc(36 * var(--vk)); border-radius: var(--r-sm); background: var(--coral); }
@media (max-width: 599px) {
  .rf-cover { margin-right: calc(12 * var(--vk)); }
  .rf-cover::before { inset: calc(16 * var(--vk)) calc(-12 * var(--vk)) calc(-16 * var(--vk)) calc(16 * var(--vk)); }
  .rf-grid { row-gap: calc(40 * var(--vk)); }
}

/* ---------- fb-fix（2026-10-08，審查 fb-copy／fb-art／fb-suite 的修正） ---------- */
/* 導言、子頁清單說明、pair 說明、宣言說明：在詞界換行（區塊輸出 <wbr>，class flow），不把「永續」拆成「永｜續」；
   text-wrap: pretty 避免最後一行只剩一兩個字（「能／力」「聯盟」） */
:is(.hero-lead, .li-body, .lf-pair-body, .mani-body, .lf-lead).flow { word-break: keep-all; line-break: strict; overflow-wrap: anywhere; text-wrap: pretty; }
/* 連字號英文術語（Research-driven）不在連字號後換行（_util.js latinNw） */
.nw { white-space: nowrap; }
/* 產業經驗藍色三點（grid 版 pair）：標題固定兩行——關鍵詞一行、短句一行，三欄的說明起點對齊；
   「｜」留在 DOM（textContent 與原文逐字相同、讀屏照讀），畫面上收起 */
.lf--grid .lf-pair-head .lf-k, .lf--grid .lf-pair-head .lf-v { display: block; }
.lf--grid .lf-pair-head .lf-v { margin-top: calc(2 * var(--vk)); }
.lf--grid .lf-pair-head .lf-sep { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lf--grid .lf-pair-head { position: relative; }
.lf--grid .lf-pair-head > wbr { display: none; }   /* 兩行已各自成塊；<wbr> 會在兩行之間多撐出一個空行 */
/* 首頁數字帶：前綴／後綴兩行平均（「以上為資本額百億級／以上之上市櫃企業」，不留「企業」孤行） */
.stats--scene .stats-list--many .stat-t { text-wrap: balance; }
/* 共創實驗室工具卡：名稱一律中文一行、英文一行 → 兩張卡結構相同，進度列與狀態膠囊對齊 */
.tp-name-zh, .tp-name-en { display: block; }
/* 產業展開面板：與被選那一欄同一個淡藍底，讀成一個整體（被選欄＋下方面板）；「內容準備中」膠囊直接接在產業名後面 */
.ind-panel { background: rgba(0,160,224,.1); }
.ind-panel-in { padding-inline: calc(14 * var(--vk)); }
.ind-panel-in:has(> .ind-pending) { display: flex; flex-wrap: wrap; align-items: center; gap: calc(10 * var(--vk)) calc(20 * var(--vk)); }
/* 聯絡表單服務項目：桌機 3＋2 等寬格；手機膠囊撐滿各列（右緣齊） */
@media (min-width: 900px) {
  .fld-checks .chk-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
  .fld-checks .chk { flex: 1 1 auto; }
}