@charset "UTF-8";
/* ============================================================
   ENGMA HONG KONG · 全局組件樣式 main.css
   依賴 tokens.css（設計系統 v1.0）
   區塊：nav / hero / trust / 定性卡 / band / 路徑條 / 數據組
        / chip / CTA / footer / accordion / reveal
   動效僅 4 類：scroll-spy · hover · accordion · reveal
   ============================================================ */

/* ── 佈局基元 ──────────────────────────────────── */
.container{ width:100%; max-width:var(--container-max); margin-inline:auto;
            padding-inline:var(--container-pad); }
.container--narrow{ max-width:var(--container-narrow); }
.container--text{ max-width:var(--container-text); }

.section{ padding-block:var(--section-y); }
.section--lg{ padding-block:var(--section-y-lg); }
.section--sm{ padding-block:var(--section-y-sm); }
.section--flush-top{ padding-top:0; }

.grid-12{ display:grid; grid-template-columns:repeat(12,1fr); gap:var(--grid-gutter); }
.grid-8{ display:grid; grid-template-columns:repeat(8,1fr); gap:var(--grid-gutter); }
.stack-group > * + *{ margin-top:var(--stack-group); }
.stack-item > * + *{ margin-top:var(--stack-item); }

/* ── 區塊標題塊 ────────────────────────────────── */
.sec-head{ margin-bottom:var(--stack-block-title); }
.sec-num{ display:flex; align-items:baseline; gap:12px; margin-bottom:16px; }
.sec-num .num{ font-family:var(--font-mono); font-size:13px; line-height:1.4; font-weight:500;
               letter-spacing:var(--ls-num); color:var(--num-color); } /* G1 */
.sec-num .en{ font-family:var(--font-mono); font-size:11px; line-height:1.4; font-weight:500;
              letter-spacing:var(--ls-label-en); text-transform:uppercase; color:var(--text-secondary); }
.sec-head .rule-short{ margin-bottom:24px; }
.sec-head .t-lead{ margin-top:20px; max-width:var(--measure-zh); }
html[lang="en"] .sec-head .t-lead{ max-width:var(--measure-en); }

/* ============================================================
   E.1 STICKY NAV
   ============================================================ */
.nav{ position:sticky; top:0; z-index:var(--z-nav);
      background:transparent; border-bottom:1px solid transparent;
      transition:background var(--dur-base) var(--ease-out),
                 border-color var(--dur-base) var(--ease-out); }
.nav.is-scrolled{ background:var(--bg-base); border-bottom-color:var(--border-default); }
/* ★ v4 首屏壓在深墨藍錨點（Hero）上時導航需反白 ——
   導航不在 .hero 作用域內，否則深字壓深底會直接消失。
   滾動後底色轉淺紙白，:not(.is-scrolled) 自動失效、恢復深字，無需 JS 參與。 */
.nav--on-ink:not(.is-scrolled){
  --text-primary:var(--ink-text);
  --text-secondary:var(--ink-text-2);
  --text-muted:var(--ink-text-muted);
  --text-muted-strong:var(--ink-text-muted-strong);
  --text-neutral:var(--ink-text-muted);
  --border-default:var(--ink-border);
  --border-strong:var(--ink-border-strong);
  --hairline:var(--ink-hairline);
  --accent-primary:var(--ink-accent);
  --accent-highlight:var(--ink-accent-hover);
}
.nav-inner{ height:var(--nav-h); display:flex; align-items:center; gap:24px;
            max-width:var(--container-max); margin-inline:auto; padding-inline:var(--container-pad); }

/* Logo */
.brand{ display:inline-flex; align-items:center; flex:0 0 auto; }
/* ★ 官方 logo（来自 engma.net logo22.png，透明底）：
   浅底版 logo-dark（石墨灰字 + 品牌蓝 E）/ 深底版 logo-light（象牙白字，E 标保留品牌蓝）。
   品牌标识属 logo 例外，不受 v6 零强调色约束；但仅此一处用蓝。 */
.brand-logo{ height:24px; width:auto; display:block; }
.brand-logo--light{ display:none; }
.nav--on-ink:not(.is-scrolled) .brand-logo--dark{ display:none; }
.nav--on-ink:not(.is-scrolled) .brand-logo--light{ display:block; }
.brand-mark{ font-family:var(--font-serif); font-size:18px; font-weight:500;
             letter-spacing:.04em; color:var(--text-primary); }
.brand-div{ width:1px; height:14px; background:var(--hairline); margin:0 10px; }
.brand-sub{ font-family:var(--font-mono); font-size:10px; font-weight:500;
            letter-spacing:.20em; text-transform:uppercase; color:var(--text-muted); }

/* 錨點 */
.nav-links{ display:flex; align-items:center; gap:32px; margin-inline:auto; }
/* ★ v7 修：導航標籤**永不換行、永不被壓縮**。
   病根：body 全域 `overflow-wrap:anywhere`（tokens.css）＋這些 <a> 沒設 nowrap，
   於是 flex 一緊張就把標籤按字母斷開——英文版 1280 下出現「Servic es／Abo ut／Cont act」，
   中文版則整字豎排。導航標籤必須是「要麼完整顯示，要麼進抽屜」，不存在中間態。 */
.nav-links a{ position:relative; font-size:14px; line-height:1; font-weight:400;
              letter-spacing:.02em; color:var(--text-secondary);
              padding-block:8px; white-space:nowrap; flex:0 0 auto;
              transition:color var(--dur-base) var(--ease-out); }
.nav-links a::after{ content:""; position:absolute; left:0; right:0; bottom:0;
  height:1px; background:var(--text-primary);
  transform:scaleX(0); transform-origin:left;
  transition:transform var(--dur-base) var(--ease-out); }
.nav-links a:hover{ color:var(--text-primary); }
.nav-links a:hover::after{ transform:scaleX(1); }
.nav-links a.is-active{ color:var(--text-primary); }
.nav-links a.is-active::after{ transform:scaleX(1); }

.nav-right{ display:flex; align-items:center; gap:20px; flex:0 0 auto; }

/* 語言切換器（inline，非下拉） */
.lang-switch{ display:inline-flex; align-items:center; }
.lang-switch button{ font-family:var(--font-mono); font-size:11px; font-weight:500;
  letter-spacing:.10em; color:var(--text-muted); padding:6px 2px; line-height:1;
  transition:color var(--dur-base) var(--ease-out); }
.lang-switch button:hover{ color:var(--text-secondary); }
.lang-switch button.is-active{ color:var(--text-primary); text-decoration:underline;
  text-underline-offset:4px; text-decoration-thickness:1px; }
.lang-sep{ width:1px; height:12px; background:var(--hairline); margin:0 10px; }

/* 漢堡 */
.nav-toggle{ display:none; width:24px; height:24px; position:relative; }
.nav-toggle span{ position:absolute; left:3px; width:18px; height:1px;
  background:var(--text-primary); transition:transform var(--dur-base) var(--ease-out),
                                             opacity var(--dur-base) var(--ease-out); }
.nav-toggle span:nth-child(1){ top:9px; }
.nav-toggle span:nth-child(2){ top:14px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(2.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ transform:translateY(-2.5px) rotate(-45deg); }

/* 移動端抽屜
   ★ 高度用 var(--nav-h)：漢堡在 ≤1120 就生效，其中 768–1120 的導航高是 72px，
     硬編 60px 會讓抽屜頂端被導航壓住 12px。 */
.nav-drawer{ position:fixed; inset:var(--nav-h) 0 0; z-index:var(--z-overlay);
  background:var(--bg-overlay); padding:48px var(--container-pad);
  display:flex; flex-direction:column; gap:28px;
  opacity:0; visibility:hidden; transition:opacity var(--dur-base) var(--ease-out),
                                          visibility var(--dur-base) var(--ease-out); }
.nav-drawer.is-open{ opacity:1; visibility:visible; }
.nav-drawer a.nav-drawer-link{ font-size:18px; line-height:1.4; color:var(--text-secondary);
  transition:color var(--dur-base) var(--ease-out); }
.nav-drawer a.nav-drawer-link:hover,
.nav-drawer a.nav-drawer-link.is-active{ color:var(--text-primary); }
.nav-drawer .btn{ max-width:320px; width:100%; justify-content:center; }

/* ============================================================
   E.10 BUTTONS
   ============================================================ */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:var(--btn-pad); border:1px solid transparent; border-radius:var(--radius-xs);
  font-family:var(--font-sans); font-size:14px; font-weight:500; line-height:1;
  letter-spacing:.06em; text-decoration:none; white-space:nowrap;
  transition:background var(--dur-base) var(--ease-out),
             color var(--dur-base) var(--ease-out),
             border-color var(--dur-base) var(--ease-out); }
.btn-sm{ padding:10px 18px; font-size:13px; }
.btn-lg{ padding:16px 32px; font-size:15px; }

/* ★ G3 配額豁免（team-lead 裁決 A，2026）
   導航欄常駐的主 CTA（.nav-right .btn-primary）屬「全局導航元素」，在所有屏出現，
   豁免「每屏／每區塊 ≤1 個」配額。故：首頁 = Hero 1 + B11 1；子頁 = Hero 1 + 頁尾 1 = 2 個。
   除 nav 外，其餘位置的 .btn-primary 一律從嚴執行每屏／每區塊 ≤1 個。 */
/* ★ v6 零強調色：主 CTA 改「實心」── 沒有彩色可用時，實心石墨黑是淺底上
   最強的視覺重量（15.96:1），hover 反轉為描邊，比「描邊→實心」更確定。 */
.btn-primary{ background:var(--accent-primary); border-color:var(--accent-primary);
              color:var(--text-inverse); }          /* G3 */
.btn-primary:hover{ background:transparent; color:var(--accent-primary); }

.btn-secondary{ border-color:var(--border-default); background:transparent;
                color:var(--text-primary); }
.btn-secondary:hover{ border-color:var(--border-strong); background:var(--bg-card); }

.btn-link{ display:inline-flex; align-items:center; gap:8px; padding:0; border:0;
  background:none; color:var(--text-primary); font-family:var(--font-sans);
  font-size:13px; font-weight:500; line-height:1; letter-spacing:.06em; position:relative; }
.btn-link::after{ content:""; position:absolute; left:0; bottom:-6px; width:100%; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:left;
  transition:transform var(--dur-base) var(--ease-out); }
.btn-link:hover::after{ transform:scaleX(1); }
.btn-link .arrow{ display:inline-block; transition:transform var(--dur-base) var(--ease-out); }
.btn-link:hover .arrow{ transform:translateX(4px); }
.btn-link--muted{ color:var(--text-secondary); }
.btn-link--muted:hover{ color:var(--text-primary); }
html[lang="en"] .btn{ letter-spacing:.04em; }

/* ============================================================
   E.2 HERO
   ============================================================ */
/* ★ 背景實景圖（assets/img/hero-hk.jpg）：cover + 偏右定位
   —— harbour 亮部在右，左側暗部承載文字；兩層漸變保證對比與過渡。 */
.hero{ position:relative; min-height:calc(100vh - var(--nav-h));
       display:flex; align-items:center;
       padding-block:var(--space-11) var(--section-y-sm);
       background-image:url("../img/hero-hk.jpg");
       background-size:cover;
       background-position:70% center;
       background-repeat:no-repeat; }
/* ★ v4 混合色調：Hero 為全站第一個深墨藍錨點（class="hero is-ink"），
   變量由 .is-ink 統一供給，此處不再重寫，避免深淺兩套值分叉。
   Hero CTA 例外地保留「實心反白」——首屏唯一按鈕需要最強視覺重量，
   照片上描邊色的對比會隨亮部漂移，實心是確定解（14.7:1）。 */
.hero.is-ink .btn-primary{ border-color:transparent; background:var(--ink-text); color:var(--ink-base); }
.hero.is-ink .btn-primary:hover{ background:transparent; border-color:var(--ink-text); color:var(--ink-text); }
/* ① 橫向：左暗右亮，保證 H1／副標落在 ≥.55 遮罩上 */
.hero::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(90deg, rgba(20,23,26,.94) 0%, rgba(20,23,26,.58) 55%, rgba(20,23,26,.26) 100%); }
/* ② 縱向：底部收進「下一區塊」的底色。
   ★ 此處必須硬編碼淺紙白而非 var(--bg-base)：Hero 自身是 .is-ink，
     --bg-base 在作用域內已被反轉為深墨藍，照抄會讓 Hero 收進自己、
     與下方淺色信任條之間出現一條硬邊。過渡永遠指向「下一區」。 */
.hero::after{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(180deg, transparent 60%, #F6F6F4 100%); }
.hero-inner{ position:relative; z-index:1; width:100%; }
.hero-eyebrow{ display:flex; align-items:center; }
.hero-eyebrow::before{ content:""; width:12px; height:1px; background:var(--border-strong);
                       margin-right:12px; flex:0 0 auto; }
.hero-h1{ margin-top:24px; max-width:var(--measure-h1); }
.hero-sub-en{ margin-top:20px; max-width:var(--measure-sub-en);
  font-family:var(--font-sans); font-size:14px; font-weight:500; line-height:1.65;
  letter-spacing:.14em; text-transform:uppercase; color:var(--text-secondary); }
.hero-lead{ margin-top:20px; max-width:30em; }
html[lang="en"] .hero-lead{ max-width:var(--measure-en); }
.hero-wec{ margin-top:32px; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:16px; margin-top:40px; }
.hero-scroll{ display:flex; align-items:center; gap:12px; margin-top:64px; }
.hero-scroll .bar{ width:1px; height:40px; background:var(--border-strong); }

/* WEC 信任條（G4） */
.trust-wec{ display:inline-flex; align-items:center; gap:10px;
  padding:8px 14px; border:1px solid var(--border-default);
  border-radius:var(--radius-xs); background:var(--bg-panel); }
.trust-wec::before{ content:""; width:6px; height:6px; flex:0 0 auto;
  background:var(--accent-primary); }                /* G4 */
.trust-wec .wec-name{ font-size:13px; font-weight:500; line-height:1.4; color:var(--text-primary); }
.trust-wec .wec-sep{ color:var(--text-muted-strong); font-size:13px; }
.trust-wec .wec-note{ font-size:13px; font-weight:400; line-height:1.4; color:var(--text-secondary); }

/* ============================================================
   E.3 信任條 CHIPS
   ============================================================ */
.chips{ display:flex; flex-wrap:wrap; gap:12px; }

/* ★ 客戶品牌牆：官方單色灰 PNG（#606060 透明底，與零彩體系天然同族）。
   靜態 70% 透明度融入版面，hover 恢復實色 —— 信任證據不搶戲。
   ★ 70% 不是審美取值，是對比度下限算出來的：
     logo 原色 #606060 在象牙底 #F6F6F4 上為 5.81:1；
     opacity .70 → 等效 #8D8D8D → 3.07:1（圖形元素需 ≥3:1，達標）；
     opacity .55 → 等效 #A4A4A4 → 2.30:1，不達標，故不得再往下調。 */
.brand-wall{ margin-top:var(--stack-group); display:grid;
  grid-template-columns:repeat(4,1fr); gap:1px; background:var(--border-subtle);
  border:1px solid var(--border-subtle); }
.brand-wall img{ display:block; width:100%; height:auto; padding:22px 28px;
  background:var(--bg-card); opacity:.70;
  transition:opacity var(--dur-base) var(--ease-out); }
.brand-wall img:hover{ opacity:1; }
/* 深色錨點區內的品牌牆：改透明底，靠 hairline 分隔，不加白卡片 */
.is-ink .brand-wall img{ background:transparent; opacity:.62; }
.is-ink .brand-wall img:hover{ opacity:1; }
@media (max-width:767px){
  .brand-wall{ grid-template-columns:repeat(2,1fr); }
  .brand-wall img{ padding:16px 18px; }
}

@media (max-width:767px){
  .brand-wall{ grid-template-columns:repeat(2,1fr); }
  .brand-wall img{ padding:16px 18px; }
}
.chip{ display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--border-default); border-radius:var(--radius-xs);
  padding:var(--chip-pad); background:transparent;
  font-size:13px; line-height:1.4; color:var(--text-secondary);
  transition:border-color var(--dur-base) var(--ease-out); }
.chip:hover{ border-color:var(--border-strong); }
.chip::before{ content:""; width:4px; height:4px; background:var(--border-strong); flex:0 0 auto; }
.chip--wec{ color:var(--text-primary); }
.chip--wec::before{ width:6px; height:6px; background:var(--accent-primary); } /* G4 */
.chip--plain::before{ display:none; }

/* ============================================================
   B·WEC 獨立板塊（B04 之後 · 編號 02）
   —— 「49 與 6」僅並列陳述，不得暗示包含／隸屬／比例關係
   ============================================================ */
.section--rel{ position:relative; }
.section--rel > .container{ position:relative; z-index:1; }  /* 壓在經緯網格之上 */

/* 局部高亮（令牌 v1.3 · E.9c）：反白塊，不用翡翠綠
   全站 ≤2 處，僅用於事實性強調（唯一／首個／僅有），不用於形容詞或口號 */
.hl{ background:var(--text-primary); color:var(--text-inverse);
     padding:0 .24em; border-radius:var(--radius-xs); }

.wec-h2{ margin-bottom:20px; max-width:var(--measure-h2); }
.wec-lead{ margin-bottom:var(--stack-group); }
.wec-stats{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
            gap:var(--stack-group); max-width:560px; }
/* WEC 官方徽標：透明底 PNG，直接置於深底；原虛線占位塊已移除
   （令牌 v1.3 虛線 = 「尚未取得的內容」，圖已到手再用虛線框是假占位） */
.wec-badge{ margin-top:var(--stack-group); }
.wec-badge img{ display:block; height:64px; width:auto; }

/* ============================================================
   B04 香港的價值 · 雙欄對照 + 同心輻射
   ============================================================ */
.value-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--stack-group);
             align-items:start; }
.value-col{ position:relative; display:grid; grid-template-columns:1fr auto;
            gap:24px; align-items:center; }
.value-col .col-text{ max-width:18em; }
.value-col .col-title{ margin-bottom:12px; }
.value-col .col-body{ font-size:var(--fs-small); line-height:1.80; color:var(--text-secondary); }
html[lang="en"] .value-col .col-body{ line-height:1.65; }
.value-col .rings{ width:clamp(120px,14vw,200px); height:auto; opacity:.9; }
/* 同心環置於雙欄「內側」：左欄靠右、右欄靠左 */
.value-col--right{ grid-template-columns:auto 1fr; }
.value-col--right .rings{ order:-1; }
.value-conclusion{ margin-top:var(--stack-group); padding-top:var(--stack-item);
  border-top:1px solid var(--border-default); max-width:var(--measure-zh);
  font-family:var(--font-serif); font-size:clamp(20px,1.8vw,26px); line-height:1.50;
  color:var(--text-primary); }
html[lang="en"] .value-conclusion{ max-width:var(--measure-en); line-height:1.40; }

/* ============================================================
   E.4 定性卡 · 三個角色（無邊框無底色）
   ============================================================ */
.roles{ display:grid; grid-template-columns:repeat(3,1fr); gap:48px; }
.role-card{ border:0; background:transparent; padding-top:32px;
            border-top:1px solid var(--border-default);
            transition:border-color var(--dur-base) var(--ease-out); }
.role-card:hover{ border-top-color:var(--border-strong); }
.role-head{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.role-head .num{ font-family:var(--font-mono); font-size:13px; font-weight:500; line-height:1.4;
  letter-spacing:var(--ls-num); color:var(--num-color);
  transition:color var(--dur-base) var(--ease-out); }   /* G1 */
.role-card:hover .role-head .num{ color:var(--accent-highlight); }
.role-head .en{ font-family:var(--font-mono); font-size:11px; font-weight:500; line-height:1.4;
  letter-spacing:var(--ls-label-en); text-transform:uppercase; color:var(--text-secondary);
  text-align:right; }
.role-name{ margin-top:20px; font-family:var(--font-serif);
  font-size:clamp(22px,2vw,28px); line-height:1.35; font-weight:500; color:var(--text-primary); }
.role-desc{ margin-top:16px; font-size:var(--fs-body); line-height:1.80;
  color:var(--text-secondary); max-width:22em; }
html[lang="en"] .role-desc{ max-width:34ch; line-height:1.65; }
.role-link{ margin-top:24px; }

/* ============================================================
   E.5 服務線 band
   ============================================================ */
.bands{ border-bottom:1px solid var(--border-default); }
.band{ border-top:1px solid var(--border-default); padding-block:var(--band-pad);
       display:grid; grid-template-columns:3fr 9fr; gap:48px;
       transition:border-color var(--dur-base) var(--ease-out); }
.band:hover{ border-top-color:var(--border-strong); }
.band-l .num{ font-family:var(--font-mono); font-size:14px; font-weight:500; line-height:1.4;
  letter-spacing:var(--ls-num); color:var(--num-color); display:block; margin-bottom:8px;
  transition:color var(--dur-base) var(--ease-out); }  /* G1 */
.band:hover .band-l .num{ color:var(--accent-highlight); }
.band-l .en{ display:block; margin-bottom:12px; }
.band-l .name{ font-family:var(--font-serif); font-size:clamp(20px,1.8vw,26px);
  line-height:1.35; font-weight:500; color:var(--text-primary); }
.band-r .band-lead{ max-width:34em; margin-bottom:40px; }
html[lang="en"] .band-r .band-lead{ max-width:62ch; }
.band-groups{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.band-groups .g-title{ font-family:var(--font-sans); font-size:18px; font-weight:600;
  line-height:1.5; color:var(--text-primary); }
html[lang="en"] .band-groups .g-title{ line-height:1.4; }
.band-groups .g-cap{ margin-top:6px; font-size:12px; line-height:1.6; color:var(--text-muted-strong); }
.band-cta{ margin-top:32px; display:flex; justify-content:flex-end; }

/* ============================================================
   E.6 路徑條 ★
   ============================================================ */
.path-wrap{ position:relative; padding-block:var(--stack-group); }
.path{ position:relative; z-index:1; display:flex; align-items:flex-start; width:100%; }
.path-node{ display:flex; flex-direction:column; align-items:center; width:120px; flex:0 0 auto; }
.path-node .dot{ width:6px; height:6px; border-radius:50%; background:var(--border-strong); }
/* 桌面向：所有節點共用 18px 垂直軌道 → 6px 圓點圓心 = 9px = 18px 圓環圓心 = 連線 margin-top:9px */
.path-node > .dot{ margin-block:6px; }
.path-node .ring{ display:grid; place-items:center; width:18px; height:18px;
  border:1px solid var(--accent-primary-line); border-radius:50%; }   /* G2 */
.path-node .ring .dot{ width:6px; height:6px; background:var(--accent-primary); } /* G2 */
.path-node .lbl{ margin-top:16px; font-family:var(--font-mono); font-size:11px; font-weight:500;
  line-height:1.4; letter-spacing:.16em; text-transform:uppercase; color:var(--text-muted-strong);
  white-space:nowrap; }
.path-node.is-origin .lbl{ color:var(--accent-primary); }             /* G2 */
.path-node .lbl-zh{ margin-top:6px; font-size:13px; line-height:1.4; color:var(--text-secondary); }
.path-line{ flex:1 1 auto; height:1px; background:var(--border-default); margin-top:9px;
  min-width:24px; }
.path-line.is-first{ background:var(--accent-primary-line); }          /* G2 */
.path-node--wide{ width:140px; }
.path-desc{ margin-top:var(--stack-group); max-width:var(--measure-zh); }
html[lang="en"] .path-desc{ max-width:var(--measure-en); }
.path-caption{ margin-top:var(--stack-item); }

/* ============================================================
   E.7 數據組
   ============================================================ */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--stack-group); }

/* ── v6 編輯式配圖 ─────────────────────────────────
   零強調色下，照片是版面唯一的「色」。節奏靠「尺寸與位置的對比」建立，
   不靠邊框／底色／投影。兩類：
   .fig-wide     寬幅帶 2.35:1（跨欄，壓場）
   .fig-portrait 豎幅側欄 3:4（與數據組非對稱並置）
   caption 一律 mono 小型大寫——與編號同族，屬「秩序層」不是「說明層」。 */
.fig-wide{ margin:var(--stack-group) 0 0; }
.fig-wide img{ display:block; width:100%; height:auto;
  aspect-ratio:2.35/1; object-fit:cover; object-position:center 55%; }
.fig-wide figcaption,
.fig-portrait figcaption{ margin-top:14px; font-family:var(--font-mono); font-size:11px;
  font-weight:500; line-height:1.50; letter-spacing:.16em; text-transform:uppercase;
  color:var(--text-muted); }
/* 兩張寬幅圖上下相鄰時用 --slim 做層級差，避免兩條等高色帶的單調 */
.fig-wide--slim img{ aspect-ratio:3.2/1; }

/* v6b 雙圖並置（AI 場景圖）：等高裁切 4:3，caption 同基線 */
.fig-pair{ margin:var(--stack-group) 0 0; display:grid; grid-template-columns:1fr 1fr;
  gap:var(--grid-gutter); }
.fig-pair figure{ margin:0; }
.fig-pair img{ display:block; width:100%; height:auto;
  aspect-ratio:4/3; object-fit:cover; object-position:center 40%; }
@media (max-width:767px){ .fig-pair{ grid-template-columns:1fr; gap:var(--stack-item); } }

.stat-fig{ display:grid; grid-template-columns:1fr 300px; gap:var(--stack-group); align-items:start; }
.fig-portrait{ margin:0; }
.fig-portrait img{ display:block; width:100%; height:auto;
  aspect-ratio:3/4; object-fit:cover; object-position:center 45%; }
.stat .stat-num{ font-family:var(--font-serif); font-size:var(--fs-stat); font-weight:500;
  line-height:1.00; color:var(--text-primary); font-variant-numeric:tabular-nums; }
.stat .stat-unit{ font-family:var(--font-sans); font-size:var(--fs-stat-unit); font-weight:500;
  line-height:1; color:var(--text-secondary); margin-left:2px; }
.stat .stat-label{ margin-top:12px; font-size:var(--fs-caption); line-height:1.70;
  letter-spacing:.02em; color:var(--text-muted-strong); }
.stats-sub{ margin-top:48px; font-size:var(--fs-caption); line-height:1.70;
  color:var(--text-muted-strong); }
.stats-closing{ margin-top:48px; font-family:var(--font-serif);
  font-size:clamp(20px,1.8vw,26px); line-height:1.50; font-weight:500;
  color:var(--text-primary); max-width:24em; }
html[lang="en"] .stats-closing{ max-width:34ch; line-height:1.40; }
.footnote{ margin-top:var(--stack-item); font-size:12px; line-height:1.6; color:var(--text-muted); }

/* ============================================================
   E.8 ACCORDION
   ============================================================ */
.acc{ border-bottom:1px solid var(--border-default); }
.acc-row{ border-top:1px solid var(--border-default); }
.acc-head{ display:flex; align-items:center; justify-content:space-between; gap:24px;
  width:100%; padding-block:24px; text-align:left; }
.acc-left{ display:flex; align-items:baseline; gap:16px; }
.acc-num{ font-family:var(--font-mono); font-size:12px; font-weight:500; line-height:1.4;
  letter-spacing:var(--ls-num); color:var(--num-color); flex:0 0 auto;
  transition:color var(--dur-base) var(--ease-out); }   /* G1 */
.acc-title{ font-family:var(--font-sans); font-size:18px; font-weight:600; line-height:1.5;
  color:var(--text-primary); }
html[lang="en"] .acc-title{ line-height:1.4; }
.acc-row.is-open .acc-num{ color:var(--accent-highlight); }
.acc-icon{ flex:0 0 auto; width:14px; height:14px; color:var(--text-secondary); }
.acc-icon svg{ width:14px; height:14px; display:block; }
.acc-icon line{ stroke:currentColor; stroke-width:1.25; stroke-linecap:round; }
.acc-icon .v{ transform-origin:7px 7px; transform:rotate(0deg);
  transition:transform 240ms var(--ease-in-out); }
.acc-row.is-open .acc-icon .v{ transform:rotate(90deg); }
.acc-panel{ display:grid; grid-template-rows:0fr;
  transition:grid-template-rows 240ms var(--ease-in-out); }
.acc-panel > .acc-panel-inner{ overflow:hidden; }
.acc-row.is-open .acc-panel{ grid-template-rows:1fr; }
.acc-panel-inner{ max-width:68ch; }
.acc-panel-inner > *:first-child{ padding-top:4px; }
.acc-panel-inner > *:last-child{ padding-bottom:28px; }
.acc-body{ font-size:15px; line-height:1.80; color:var(--text-secondary); }
html[lang="en"] .acc-body{ line-height:1.65; }
.acc-list{ margin-top:12px; }
.acc-list li{ display:flex; align-items:baseline; margin-top:12px;
  font-size:15px; line-height:1.80; color:var(--text-secondary); }
.acc-list li::before{ content:""; width:8px; height:1px; background:var(--border-strong);
  margin-right:12px; flex:0 0 auto; transform:translateY(-6px); }

/* ============================================================
   E.11 CTA 區 + 頁腳
   ============================================================ */
.cta-section{ padding-block:var(--section-y-lg) var(--section-y-sm);
              border-top:1px solid var(--border-default); }
/* 子頁收尾 CTA 標題：60px（--fs-display）
   ★ --fs-display-lg（92px）全站僅首頁 B11「下一站，香港。」一次（用 .display-lg），
     子頁一律降一級到 60px，形成「首頁 > 子頁」層級差，避免稀釋那唯一一次。 */
.cta-big{ font-family:var(--font-serif); font-size:clamp(30px,3.2vw,44px);
  line-height:var(--lh-display); font-weight:var(--fw-display);
  letter-spacing:.01em; color:var(--text-primary); margin-bottom:20px; text-wrap:balance; }
html[lang="en"] .cta-big{ letter-spacing:0; }
.cta-lead{ margin-bottom:40px; }
.cta-actions{ display:flex; flex-wrap:wrap; gap:16px; margin-bottom:var(--section-y-sm); }

/* 聯繫人卡 */
.contact-card{ border:1px solid var(--border-default); border-radius:var(--radius-md);
  background:var(--bg-panel); padding:var(--card-pad);
  display:grid; grid-template-columns:1fr 1fr; gap:32px; }
.contact-name{ font-family:var(--font-serif); font-size:20px; line-height:1.4; font-weight:500;
  color:var(--text-primary); }
.contact-role{ margin-top:6px; font-size:var(--fs-caption); line-height:1.70;
  color:var(--text-muted-strong); }
.contact-lines{ margin-top:20px; display:flex; flex-direction:column; gap:8px; }
.contact-lines a, .contact-lines span{ font-family:var(--font-mono); font-size:14px;
  line-height:1.6; color:var(--text-secondary); }
.contact-lines a{ transition:color var(--dur-base) var(--ease-out); }
.contact-lines a:hover{ color:var(--text-primary); text-decoration:underline;
  text-underline-offset:3px; text-decoration-thickness:1px; }
.contact-addr{ font-size:14px; line-height:1.80; color:var(--text-secondary); }

/* ── v7 聯繫人卡 · 香港公司實景（跨兩欄，落在聯絡資訊下方）
   媒體用直角（與 .fig-wide 同族），caption 走 mono 小型大寫「秩序層」；
   .is-ink 作用域下顏色隨變量反轉，無需另寫深底版本。 */
.contact-media{ grid-column:1 / -1; }
/* 列寬 2.8fr : 1fr 是算出來的 —— office 720x343（2.099:1 橫）與
   harbour-view 540x720（0.75:1 豎）。兩圖「自然等高且完全不裁切」
   需 列寬 ∝ 圖比例 → 2.099 : 0.75 ≈ 2.8 : 1。
   ★ 每次換圖都要重算：比例一變，兩圖就不等高了。
   ★ v10 移除原本的 aspect-ratio:16/9 + object-fit:cover —— 那會把寬圖
     左右各切掉 7.6%，正好切掉右側的 Engma 標識（實測截圖發現）。
     about.html 的 .pg-trio 早有同一條註記：「不用 cover 固定高度，
     豎圖在橫框裡 cover 會把塔身／航拍裁成片段」。這裡補齊同一原則。 */
.contact-fig{ margin:0; display:grid; grid-template-columns:2.8fr 1fr; gap:16px; }
.contact-fig--one{ grid-template-columns:1fr; }
.contact-fig img{ display:block; width:100%; height:auto;
  border-radius:var(--radius-none); }
.contact-cap{ margin-top:14px; font-family:var(--font-mono); font-size:11px; font-weight:500;
  line-height:1.50; letter-spacing:.16em; text-transform:uppercase; color:var(--text-muted); }
/* 深底卡上的實景圖需壓亮度／去飽和才沉得進石墨底，否則會像貼上去的補丁
   （沿用處理 hero 實拍圖的同一條規矩：亮圖必須先壓暗再上深底）。
   淺色頁（contact.html）不加此濾鏡，照片保持自然。 */
.is-ink .contact-fig img{ filter:brightness(.74) saturate(.82); }

/* 頁腳 */
.footer{ border-top:1px solid var(--border-default); padding-block:80px 40px; }
.footer-nav{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--grid-gutter); }
.footer-col .col-title{ font-family:var(--font-mono); font-size:11px; font-weight:500;
  line-height:1.4; letter-spacing:var(--ls-label-en); text-transform:uppercase;
  color:var(--text-muted); margin-bottom:20px; }
.footer-col ul{ display:flex; flex-direction:column; gap:12px; }
.footer-col a{ font-size:14px; line-height:1.6; color:var(--text-secondary);
  transition:color var(--dur-base) var(--ease-out); }
.footer-col a:hover{ color:var(--text-primary); }
.footer-bar{ border-top:1px solid var(--border-subtle); padding-top:24px; margin-top:64px;
  display:flex; justify-content:space-between; align-items:center; gap:16px; }
.footer-copy{ font-size:12px; line-height:1.6; color:var(--text-muted); }

/* ============================================================
   通用小組件（供子頁複用）
   ============================================================ */
.card{ background:var(--bg-card); border:1px solid var(--border-default);
       border-radius:var(--radius-md); padding:var(--card-pad);
       /* ★ v5 高級質感：中性微影（2% 不透明、1px 擴散），只為讓卡片從紙面上浮起一層，
          不產生懸浮感、不帶任何色相 —— 與被禁止的「彩色輝光」是兩回事 */
       box-shadow:0 1px 2px rgba(25,27,29,.04);
       transition:border-color var(--dur-base) var(--ease-out),
                  background var(--dur-base) var(--ease-out),
                  box-shadow var(--dur-base) var(--ease-out); }
.card:hover{ border-color:var(--border-strong); background:var(--bg-card-hover); }
.card-title{ font-family:var(--font-sans); font-size:var(--fs-h3); font-weight:600;
  line-height:1.5; color:var(--text-primary); }
.card-body{ margin-top:12px; font-size:var(--fs-body); line-height:1.80; color:var(--text-secondary); }
html[lang="en"] .card-title{ line-height:1.4; }

/* ── 證據牆 · 執照卡（B09 香港本地基礎）────────────────
   實圖取代純文字 chip 牆；卡片沿用 .card，但內距收到 16px
   —— 32px 會讓豎版執照圖周圍留白過多、削弱「證件」的密度感 */
/* 3 張執照（cert-odi2 已撤下）：auto-fit 讓窄屏自然折疊，不寫死列數
   ★ max-width:960px 是必要的：執照原圖僅 235–237px 寬，
     在 1122px 內容區裡 3 列 1fr 會把圖拉到 358px（1.52× 放大）而發虛；
     收斂到 960 後每張 304px（1.29×），三張仍等高、caption 同基線 */
.cert-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
            gap:var(--grid-gutter); max-width:960px; }
/* 不對圖做 aspect-ratio 裁切 —— 裁法律文件會切掉證號／印章；
   改讓卡片撐滿列高、caption 用 margin-top:auto 壓底，caption 同一基線對齊 */
.cert-card{ margin:0; padding:16px; display:flex; flex-direction:column; }
.cert-img{ display:block; width:100%; height:auto; border-radius:var(--radius-xs); }
.cert-cap{ margin-top:auto; padding-top:12px; font-size:var(--fs-caption); line-height:1.60;
  color:var(--text-secondary); }
/* 弱化索引行：不降透明度（會壓對比度），改用更弱的文字色與描邊 */
.chips--muted{ margin-top:var(--stack-item); }
.chips--muted .chip{ color:var(--text-muted-strong); border-color:var(--border-subtle); }
html[lang="en"] .card-body{ line-height:1.65; }

/* AI 佔位卡（全站唯一虛線，僅 P5） */
.ai-placeholder{ border:1px dashed var(--border-strong); border-radius:var(--radius-md);
  background:transparent; padding:40px 32px; max-width:calc(50% - 12px); }
.ai-tag{ display:inline-block; font-family:var(--font-mono); font-size:10px; font-weight:500;
  line-height:1.4; letter-spacing:var(--ls-micro); text-transform:uppercase;
  color:var(--text-muted); border:1px solid var(--border-default);
  border-radius:var(--radius-xs); padding:4px 8px; }
.ai-text{ margin-top:20px; font-family:var(--font-serif); font-size:20px; line-height:1.60;
  font-weight:500; color:var(--text-primary); max-width:20em; }
.ai-sub{ margin-top:12px; font-size:14px; line-height:1.75; color:var(--text-secondary); }
.ai-foot{ margin-top:24px; text-align:right; }

/* ============================================================
   RESPONSIVE · 1024 / 768 / 390
   ============================================================ */
@media (max-width:1023px){
  :root{ --grid-gutter:20px; }
  .nav-links{ gap:24px; }
  .nav-links a{ font-size:13px; }
  .roles{ grid-template-columns:repeat(2,1fr); gap:32px; }
  .stats{ grid-template-columns:repeat(2,1fr); }
  /* v6 配圖：窄屏單列；豎幅限寬免佔滿整屏；寬幅帶放寬比例減少裁切 */
  .stat-fig{ grid-template-columns:1fr; }
  .fig-portrait{ max-width:420px; }
  .fig-wide img{ aspect-ratio:16/9; }
  .band{ grid-template-columns:1fr; gap:24px; }
  .value-grid{ grid-template-columns:1fr; }
  .value-col{ grid-template-columns:1fr auto; }
}

/* ── 桌面／平板導航收口（v7 修：英文版在 1024–1234 溢出）──────────
   實測最寬語種（en）：品牌 226 + gap 24 + 錨點 663 + gap 24 + 右組 332 ≈ 1269，
   再加 5.5vw 內距 → 需要約 1235px。而設計令牌聲明 1024 就是 12 柵格基線，
   iPad 橫屏 / 1152 / 1200 全都裝不下（曾有 211px 溢出，且標籤被壓到按字母斷行）。
   處置：① 1024–1300 收緊間距與內距，把門檻從 ~1235 壓到 ~1120；
        ② ≤1120 整體改用漢堡 —— 該檔本來就屬平板層，六個中文錨點在數學上
           就不可能與品牌、語言切換、CTA 並存（見 memory 2026-09-21 的推導）。
   ★ 錨點標籤一律 nowrap + flex:0 0 auto（見上方 .nav-links a），
     導航標籤不存在「折成兩行」或「Servic/es」這種中間態。 */
@media (max-width:1300px){
  .nav-inner{ gap:16px; }                 /* 內距不動：必須等於 --container-pad，
                                             否則 logo 與下方 H1 的左緣會錯位 */
  .nav-links{ gap:16px; }
  .nav-right{ gap:16px; }
  .lang-sep{ margin:0 6px; }
  .lang-switch button{ padding:6px 1px; }
}
/* ≤1200：桌面錨點退場，改由抽屜承載（抽屜內含全部錨點 + 預約諮詢）
   ★ 門檻由實測反推，不是拍腦袋：因為導航內距 = --container-pad = 5.5vw，
     需求隨視口同步變寬（R(W) = 0.11W + 1047），可容納的最小視口 = 1199px。
     取整到 1200，並在 1201 處留 22px 餘量。 */
@media (max-width:1200px){
  .nav-links{ display:none; }
  .nav-right{ margin-left:auto; }
  .nav-toggle{ display:block; }
  .nav-right .btn-primary{ display:none; }
  .nav-right .lang-switch{ display:inline-flex; }
}

@media (max-width:767px){
  :root{ --nav-h:60px; --grid-gutter:16px; --card-pad:var(--card-pad-mobile); --band-pad:40px; }

  .hero{ min-height:88vh; padding-block:var(--space-9) var(--section-y-sm);
         background-position:65% center; }
  /* 窄屏：文字佔滿寬度會壓到 harbour 亮部，改為全屏均質遮罩 */
  .hero::before{ background:rgba(20,23,26,.90); }
  .hero-cta{ flex-direction:column; gap:12px; }
  .hero-cta .btn{ max-width:320px; width:100%; }
  .hero-scroll{ display:none; }

  .chips{ display:grid; grid-template-columns:1fr; gap:8px; }
  /* .cert-grid 不在此鎖列數：auto-fit + minmax(200px) 會自己折疊
     （768 → 3 列 212px、430 上下 → 2 列、≲430 → 1 列），寫死反而會打架 */
  .chips--muted{ margin-top:var(--stack-item); }
  .roles{ grid-template-columns:1fr; gap:32px; }
  .band-groups{ grid-template-columns:1fr; gap:16px; }
  .band-cta{ justify-content:flex-start; }
  .stats{ gap:32px; }
  .wec-stats{ gap:32px; max-width:none; }
  .wec-badge img{ height:52px; }
  .contact-card{ grid-template-columns:1fr; gap:24px; padding:24px; }
  .contact-fig{ grid-template-columns:1fr; gap:12px; }
  /* 手機單欄堆疊時沿用各圖自然比例，不再強制 16/9 —— 強制就是裁切，
     與上面的原則衝突（寬圖會被切掉右側標識）。 */
  .footer{ padding-block:56px 32px; }
  .footer-nav{ grid-template-columns:1fr; gap:32px; }
  .footer-bar{ flex-direction:column; align-items:flex-start; margin-top:48px; }
  .ai-placeholder{ max-width:100%; padding:28px 20px; }

  /* 路徑條 · 縱向 */
  .path{ flex-direction:column; align-items:flex-start; }
  .path-node{ flex-direction:row; align-items:center; width:auto; gap:12px; }
  .path-node .lbl, .path-node .lbl-zh{ margin-top:0; }
  .path-node--wide{ width:auto; }
  /* 所有節點共用 18px 軌道寬度，保證豎線與圓點／圓環同心；軌道改為水平，垂直歸零 */
  .path-node > .dot{ margin-block:0; margin-inline:6px; }
  .path-line{ flex:none; width:1px; height:32px; margin:0 0 0 8.5px; }
}

/* ── 移動端導航收口（v7 修：390 斷點橫向溢出）────────────────
   病根（實測 390）：.nav-inner 可用寬只有 347.1（padding-inline 21.45×2），
   而內容需要 433.5 = 品牌鎖定 225.7（logo 137.2 + 豎線 21 + HONG KONG 67.5）
   + gap 24 + .nav-right 183.8（語言切換 139.8 佔其中 76%，汉堡 24）。
   ★ 溢出區間是 viewport < 487px，不是只有 390 —— 5.5vw 內距 + 433.5 > 視口。
   處置：手機把品牌鎖定收成官方 logo 本體（去掉豎線與 HONG KONG 後綴，
        沿用原 @media (max-width:389px) 的本意 —— 那個斷點差 1px 剛好不生效），
        並收緊語言切換間距。收口後 390 下仍餘約 48px。
   ★ 刻意保留 nav 內的語言切換：EN 版是寫給海外 partner 的獨立版本，
     把切換藏進抽屜或只留頁腳，等於讓最需要它的人多點一次。 */
@media (max-width:560px){
  .brand-div, .brand-sub{ display:none; }
  .nav-right{ gap:14px; }
  .lang-sep{ margin:0 6px; }
  .lang-switch button{ padding:6px 1px; }
}
@media (max-width:400px){
  .nav-inner{ padding-inline:16px; gap:16px; }
}
/* 320px 老機型再收一檔：實測 320 下仍餘 5px 溢出（nav-inner 需 341.8 > 320）。
   此處把 logo 降到 20px（Apple/Google 官方導航條的常規尺寸），
   換取語言切換三個選項全部留在 header 內不被裁掉。 */
@media (max-width:360px){
  .brand-logo{ height:20px; }
  .nav-inner{ padding-inline:14px; gap:14px; }
  .nav-right{ gap:12px; }
  .lang-sep{ margin:0 5px; }
}

@media (max-width:389px){
  .cert-grid{ grid-template-columns:1fr; }
}

/* ============================================================
   命名別名層 · 與設計令牌文檔（彩格調）對齊
   —— 首頁實際使用左側原名；若下游按令牌文檔的命名寫 HTML，
      右側別名同樣生效，兩套可混用，不會掉樣式。
   ============================================================ */
/* 字階 · Display XL（全站僅 B11 收尾句一次） */
.display-lg{ font-family:var(--font-serif); font-size:var(--fs-display-lg);
  line-height:var(--lh-display-lg); font-weight:var(--fw-display-lg);
  letter-spacing:.01em; color:var(--text-primary); text-wrap:balance; }
html[lang="en"] .display-lg{ letter-spacing:0; }

/* 導航 */
.nav-logo{ display:inline-flex; align-items:center; flex:0 0 auto; }
.nav-cta{ flex:0 0 auto; }
.nav-link, .nav-links a{ font-size:14px; line-height:1; letter-spacing:.02em;
  color:var(--text-secondary); position:relative; padding-block:8px;
  transition:color var(--dur-base) var(--ease-out); }
.nav-link::after, .nav-links a::after{ content:""; position:absolute; left:0; right:0; bottom:0;
  height:1px; background:var(--text-primary); transform:scaleX(0); transform-origin:left;
  transition:transform var(--dur-base) var(--ease-out); }
.nav-link:hover, .nav-links a:hover{ color:var(--text-primary); }
.nav-link:hover::after, .nav-links a:hover::after{ transform:scaleX(1); }
.nav-link.is-active, .nav-links a.is-active{ color:var(--text-primary); }
.nav-link.is-active::after, .nav-links a.is-active::after{ transform:scaleX(1); }
.nav-burger{ display:none; width:24px; height:24px; position:relative; }
.nav-burger span{ position:absolute; left:3px; width:18px; height:1px;
  background:var(--text-primary); transition:transform var(--dur-base) var(--ease-out),
                                             opacity var(--dur-base) var(--ease-out); }
.nav-burger span:nth-child(1){ top:9px; }
.nav-burger span:nth-child(2){ top:14px; }

/* 語言切換器 */
.lang-btn{ font-family:var(--font-mono); font-size:11px; font-weight:500;
  letter-spacing:.10em; color:var(--text-muted); padding:6px 2px; line-height:1;
  transition:color var(--dur-base) var(--ease-out); }
.lang-btn:hover{ color:var(--text-secondary); }
.lang-btn.is-active{ color:var(--text-primary); text-decoration:underline;
  text-underline-offset:4px; text-decoration-thickness:1px; }   /* 不用翡翠綠 */

/* 分隔線 */
.rule-vert{ display:inline-block; width:1px; height:12px; background:var(--hairline);
  flex:0 0 auto; }

/* 路徑條 B07 */
.path-dot{ width:6px; height:6px; border-radius:50%; background:var(--border-strong); }
/* 桌面向：非起點節點共用 18px 垂直軌道（起點本身已是 18px 圓環，不再加外距） */
.path-node:not(.is-origin) > .path-dot{ margin-block:6px; }
.path-lbl{ font-family:var(--font-mono); font-size:11px; font-weight:500; line-height:1.4;
  letter-spacing:.16em; text-transform:uppercase; color:var(--text-muted-strong); }
.path-node.is-origin > .path-dot{ display:grid; place-items:center;
  width:18px; height:18px; background:transparent;
  border:1px solid var(--accent-primary-line); border-radius:50%; }   /* G2 */
.path-node.is-origin > .path-dot::after{ content:""; width:6px; height:6px;
  border-radius:50%; background:var(--accent-primary); }              /* G2 */
.path-node.is-origin .path-lbl{ color:var(--accent-primary); }        /* G2 */

/* 定性卡 B05（★ 不套 .card：無邊框無底色，僅頂部 1px 線） */
.role-num{ font-family:var(--font-mono); font-size:13px; font-weight:500; line-height:1.4;
  letter-spacing:var(--ls-num); color:var(--num-color);
  transition:color var(--dur-base) var(--ease-out); }                 /* G1 */
.role-card:hover .role-num{ color:var(--accent-highlight); }
.role-en{ font-family:var(--font-mono); font-size:11px; font-weight:500; line-height:1.4;
  letter-spacing:var(--ls-label-en); text-transform:uppercase; color:var(--text-secondary); }
.role-title{ font-family:var(--font-serif); font-size:clamp(22px,2vw,28px);
  line-height:1.35; font-weight:500; color:var(--text-primary); }

/* 服務線 band B06 */
.svc-band{ border-top:1px solid var(--border-default); padding-block:var(--band-pad);
  display:grid; grid-template-columns:3fr 9fr; gap:48px;
  transition:border-color var(--dur-base) var(--ease-out); }
.svc-band:hover{ border-top-color:var(--border-strong); }
.svc-left .svc-num, .svc-num{ font-family:var(--font-mono); font-size:14px; font-weight:500;
  line-height:1.4; letter-spacing:var(--ls-num); color:var(--num-color);
  display:block; margin-bottom:8px;
  transition:color var(--dur-base) var(--ease-out); }                 /* G1 */
.svc-band:hover .svc-num{ color:var(--accent-highlight); }
.svc-en{ font-family:var(--font-mono); font-size:11px; font-weight:500; line-height:1.4;
  letter-spacing:var(--ls-label-en); text-transform:uppercase; color:var(--text-secondary);
  display:block; margin-bottom:12px; }
.svc-title{ font-family:var(--font-serif); font-size:clamp(20px,1.8vw,26px);
  line-height:1.35; font-weight:500; color:var(--text-primary); }
.svc-lead{ font-size:var(--fs-lead); line-height:1.80; color:var(--text-secondary);
  max-width:34em; margin-bottom:40px; }
html[lang="en"] .svc-lead{ max-width:62ch; line-height:1.65; }
.svc-groups{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.g-title{ font-family:var(--font-sans); font-size:18px; font-weight:600; line-height:1.5;
  color:var(--text-primary); }
html[lang="en"] .g-title{ line-height:1.4; }
.g-cap{ margin-top:6px; font-size:12px; line-height:1.6; color:var(--text-muted-strong); }

/* 同心輻射 B04 */
.rings--blue circle[r="76"]{ stroke:var(--accent-blue-line); }  /* 藍色全站唯一用法 */

@media (max-width:1023px){
  .svc-band{ grid-template-columns:1fr; gap:24px; }
  .svc-groups{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:767px){
  .nav-burger{ display:block; }
  .svc-groups{ grid-template-columns:1fr; gap:16px; }
  .path-node > .path-dot{ margin-block:0; margin-inline:6px; }
}