@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;400;500;600;700&family=Noto+Serif+TC:wght@300;400;500;600;700&family=Rubik:wght@300;400;500;600&family=Bodoni+Moda:ital,opsz,wght@0,6..96,400;0,6..96,500;1,6..96,400;1,6..96,500&display=swap");

/* ---- colors_and_type.css（deploy build 內嵌，來源：專案根目錄）---- */
/* ============================================================
   DUMUSHUI 杜沐水 — Design Tokens
   Colors, type, spacing, shadows, motion.
   Source of truth: README.md + uploads/03-visual.md (v1.2).
   ============================================================ */

/* ---------- 1. Web fonts ---------- */
/* 全站字型 — 一律 Google Fonts，單一 @import（無系統字依賴，跨平台一致）
   Noto Sans TC = 介面 · Noto Serif TC = 中文標題內文 · Rubik = 字標＋全大寫標籤 · Bodoni Moda = 英文數字大字 */




/* Noto Sans TC --------------------------------------------------- */

:root {
  /* ============================================================
     2. COLOR SYSTEM — 16-color, three-tier architecture
     Core 3 / Base 4 / Accent 9 (see 03-visual.md §3.4)
     ============================================================ */

  /* --- Core 3 (主核心色) — 60/30/10 brand identity --- */
  --teal: #B1CCC5;        /* 明水鴨色 — primary, 60% backgrounds */
  --pearl: #F1E3BC;       /* 珍珠黃 — secondary, 30% accent blocks */
  --arch-blue: #7195A6;   /* 建築藍 — 10% accent, secondary CTA */

  /* --- Base 4 (基底色 · CIS #4-7) — backgrounds & text (--paper 為 Vogue 版面別名，非 CIS 色) --- */
  --cloud: #F1F0EC;       /* Cloud Dancer — default light bg (not pure white) */
  --paper: var(--cloud);  /* Vogue 版面別名 → Cloud Dancer（不另設第 16 色） */
  --obsidian: #4B484D;    /* Obsidian — default text (not pure black) */
  --pewter: #585859;      /* PANTONE P 173-14 C — 次要文字・層次元素（深灰偏暖） */
  --rose-brown: #643941;  /* 粉紅棕 — quote color, brand-personality dark */

  /* --- Accent 9 (情境配色) --- */
  --almond: #EEBABC;      /* 杏仁軟糖粉 — new client / onboarding */
  --opal-pink: #C6A0AB;   /* 蛋白石粉紅 — testimonials / emotional */
  --opal-violet: #DCD4DC; /* 蛋白石紫羅蘭 — meditation / wisdom */
  --kiwi: #DEE8BE;        /* 冰獼猴桃汁綠 — state reset / habits */
  --ice-melt: #D4E4F0;    /* Ice Melt — knowledge / education */
  --peach-dust: #F2DBCC;  /* Peach Dust — warm body-work pages */
  --almost-aqua: #CFD6C5; /* Almost Aqua — nature / aligns with teal */
  --garlic: #AFAAA1;      /* 大蒜米 — captions, dividers, sub labels */
  --brick: #D2A161;       /* 磚黃 — PRIMARY CTA, activity callout */

  /* ============================================================
     3. SEMANTIC ROLES — map to UI usage
     Use these everywhere; only fall back to raw colors when needed.
     ============================================================ */
  --bg: var(--cloud); /* @kind color */
  --bg-elevated: #FFFFFF; /* @kind color */       /* For glass cards only — never as page bg */
  --wm-color: rgba(113,149,166,0.07); /* @kind color */  /* watermark default; overridden per page */
  --bg-warm: var(--peach-dust); /* @kind color */
  --bg-nature: var(--almost-aqua); /* @kind color */
  --bg-knowledge: var(--ice-melt); /* @kind color */

  --fg: var(--obsidian); /* @kind color */
  --fg-muted: var(--garlic); /* @kind color */
  --fg-secondary: var(--pewter); /* @kind color */   /* 次要文字・層次元素 (PANTONE P 173-14 C) */
  --fg-quote: var(--rose-brown); /* @kind color */
  --fg-on-dark: var(--cloud); /* @kind color */

  --border: rgba(75, 72, 77, 0.12);          /* obsidian @ 12% */
  --border-strong: rgba(75, 72, 77, 0.24);
  --border-glass: rgba(255, 255, 255, 0.25); /* Apple glass edge highlight */

  --cta-primary-bg: var(--brick); /* @kind color */
  --cta-primary-fg: var(--cloud); /* @kind color */
  --cta-secondary-bg: var(--arch-blue); /* @kind color */
  --cta-secondary-fg: var(--cloud); /* @kind color */
  --cta-ghost-fg: var(--obsidian); /* @kind color */

  /* ============================================================
     4. TYPOGRAPHY — 全站四套 Google Fonts
     標題（全層級）／內文／引言 = Noto Serif TC
     UI 小字（導覽・按鈕・meta）= Noto Sans TC
     字標 + 全大寫英文標籤 = Rubik
     英文／數字大字 = Bodoni Moda（中文自動退回 Noto Serif TC）
     ============================================================ */
  --font-sans: "Noto Sans TC", sans-serif;                      /* 介面・標籤・導覽 */
  --font-serif: "Noto Serif TC", serif;                         /* 中文標題・內文 */
  --font-brand: "Rubik", "Noto Sans TC", sans-serif;            /* DUMUSHUI 字標＋全大寫英文標籤 */
  --font-didone: "Bodoni Moda", "Noto Serif TC", serif;         /* 英文／數字大字（Didone） */

  /* Apple-aligned editorial scale
     Hero: 48–56 desktop → 32–40 mobile
     Subtitle: 21–28 desktop → 19–22 mobile
     Body: 16–17 */
  /* 舊 --fs-* 名稱保留為別名，全部指向下方六階，避免兩套字級並存 */
  --fs-display: var(--eds-display); /* @kind font */
  --fs-h1: var(--eds-display); /* @kind font */
  --fs-h2: var(--eds-h2); /* @kind font */
  --fs-h3: var(--eds-sub); /* @kind font */
  --fs-h4: var(--eds-body); /* @kind font */
  --fs-body-lg: var(--eds-body); /* @kind font */
  --fs-body: var(--eds-body); /* @kind font */
  --fs-quote: var(--eds-quote); /* @kind font */
  --fs-caption: var(--eds-caption); /* @kind font */
  --fs-micro: var(--eds-caption); /* @kind font */

  /* ============================================================
     DUMUSHUI 6-step editorial scale
     單一模組化字級 — 每個角色只對應一階，全站唯一真相來源
     主標題 58 · 引言 36 · 副標題 25 · 內文 18 · UI 15 · 註解 13
     UI 階 = 導覽／按鈕／頁尾連結等介面小字（內文太大、註解太小的場合）
     ============================================================ */
  --eds-display: clamp(44px, 5.2vw,  68px); /* @kind font */  /* 主標題 — hero / page title    */
  --eds-quote:   clamp(28px, 2.7vw,  36px); /* @kind font */  /* 引言   — pull-quote                */
  --eds-h2:      clamp(25px, 2.2vw,  30px); /* @kind font */  /* 段落標題 — section heading（低於引言一階） */
  --eds-sub:     clamp(20px, 1.55vw, 25px); /* @kind font */  /* 副標題 — subtitle / card title */
  --eds-body:    clamp(17px, 1.3vw,  19px); /* @kind font */  /* 內文   — body copy            */
  --eds-ui:      15px; /* @kind font */                        /* UI     — nav / button / footer link */
  --eds-caption: 13px; /* @kind font */                        /* 註解   — eyebrow / cite / label */

  /* ---- 裝飾字級（graphic tier）----
     不屬於六階閱讀字級：巨型數字、報頭字標、浮水印、首字放大。
     一律走這些 token，不要在頁面裡另寫 clamp。 */
  --eds-numeral:    clamp(72px,  11vw,   156px); /* @kind font */  /* stat 巨型數字（預設） */
  --eds-numeral-md: clamp(56px,  9.5vw,  140px); /* @kind font */  /* stat 區間數字 */
  --eds-numeral-sm: clamp(44px,  7.5vw,  112px); /* @kind font */  /* stat 文字型 */
  --eds-wordmark:   clamp(48px,  11.2vw, 158px); /* @kind font */  /* 首頁報頭字標 */
  --eds-wordmark-sm:clamp(34px,  6vw,    80px);  /* @kind font */  /* 次級字標 */
  --eds-watermark:  clamp(72px,  17vw,   320px); /* @kind font */  /* 背景浮水印 */
  --eds-dropcap:    5.2em; /* @kind font */                        /* 首字放大 */
  --eds-dropcap-sm: 3.4em; /* @kind font */                        /* 首字放大（窄版） */

  /* 行高只有四階，全站沿用 */
  --lh-tight: 1.12; /* @kind font */          /* 主標題 */
  --lh-snug: 1.3; /* @kind font */            /* 副標題・卡片標題 */
  --lh-body: 1.6; /* @kind font */            /* 內文・UI */
  --lh-loose: 1.8; /* @kind font */           /* 長文・小字段落 */
  --lh-quote: 1.7; /* @kind font */           /* 引言 */

  --tracking-display: -0.022em; /* @kind font */   /* Apple hero */
  --tracking-tight: -0.015em; /* @kind font */
  --tracking-snug: -0.011em; /* @kind font */      /* subtitle range */
  --tracking-wide: 0.16em; /* @kind font */        /* 小型行內標籤・表頭 */
  --tracking-label: 0.24em; /* @kind font */       /* 大寫 eyebrow・段落標籤 */
  --tracking-mega: 0.36em; /* @kind font */        /* 書脊・報頭級大寫 */
  --tracking-cjk: 0.01em; /* @kind font */         /* 中文襯線內文微放寬 */

  --fw-regular: 400; /* @kind font */
  --fw-medium: 500; /* @kind font */
  --fw-semi: 600; /* @kind font */
  --fw-bold: 700; /* @kind font */

  /* ============================================================
     5. SPACING — 8px base scale
     ============================================================ */
  --sp-0: 0; /* @kind spacing */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;
  --sp-11: 192px;   /* editorial whitespace */

  /* Swiss grid */
  --grid-gutter: 24px; /* @kind spacing */
  --grid-columns: 12; /* @kind other */
  --grid-max-w: 1400px; /* @kind spacing */
  --content-max-w: 720px; /* @kind spacing */

  /* ============================================================
     6. RADII, SHADOWS, EFFECTS
     ============================================================ */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* Soft, low-contrast shadows — never heavy drop-shadows.
     雙層柔影 + 1px 髮絲描邊，滾影帶一絲 arch-blue 色溫。 */
  --shadow-soft: 0 1px 2px rgba(75,72,77,0.04),
                 0 4px 16px rgba(75,72,77,0.06);
  --shadow-card: 0 0 0 1px rgba(75,72,77,0.035),
                 0 2px 4px rgba(75,72,77,0.04),
                 0 12px 32px -4px rgba(75,72,77,0.08);
  --shadow-glass: 0 1px 1px rgba(255,255,255,0.4) inset,
                  0 8px 32px rgba(113,149,166,0.18);
  --shadow-hover: 0 0 0 1px rgba(75,72,77,0.03),
                  0 4px 10px rgba(75,72,77,0.05),
                  0 22px 48px -10px rgba(75,72,77,0.12),
                  0 36px 80px -32px rgba(113,149,166,0.20);

  /* Apple-style frosted glass (see 03-visual.md §3.8) */
  --glass-blur: 20px; /* @kind other */
  --glass-blur-strong: 40px; /* @kind other */
  --glass-bg-teal: rgba(177, 204, 197, 0.55);
  --glass-bg-cloud: rgba(241, 240, 236, 0.65);
  --glass-bg-pearl: rgba(241, 227, 188, 0.55);
  --glass-bg-violet: rgba(220, 212, 220, 0.55);

  /* ============================================================
     7. MOTION — quiet, grounded easings
     No bounces, no exuberance. The brand breathes.
     ============================================================ */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --ease-quiet: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */

  --dur-instant: 120ms; /* @kind other */
  --dur-quick: 200ms; /* @kind other */
  --dur-base: 320ms; /* @kind other */
  --dur-slow: 560ms; /* @kind other */
  --dur-still: 900ms; /* @kind other */     /* hero fades, large surface transitions */
}

/* ============================================================
   8. BASE SEMANTIC ELEMENTS
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--eds-body);
  line-height: var(--lh-body);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-serif);
  color: var(--fg);
  margin: 0 0 var(--sp-4);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-tight);
  text-wrap: balance;
}
h1 { font-size: var(--eds-display); }
h2 { font-size: var(--eds-h2); font-weight: var(--fw-semi); line-height: var(--lh-snug); }
h3 { font-size: var(--eds-sub); font-weight: var(--fw-medium); line-height: var(--lh-snug); }
h4 { font-size: var(--eds-ui); font-weight: var(--fw-medium); line-height: var(--lh-snug); }

p {
  font-family: var(--font-serif);
  font-size: var(--eds-body);
  line-height: var(--lh-body);
  margin: 0 0 1em;
  text-wrap: pretty;
}

blockquote, .ds-quote {
  font-family: var(--font-serif);
  font-size: var(--eds-quote);
  line-height: var(--lh-quote);
  color: var(--fg-quote);
  font-style: italic;
  margin: 0;
}

small, .ds-caption {
  font-family: var(--font-sans);
  font-size: var(--eds-caption);
  color: var(--fg-muted);
  line-height: var(--lh-body);
  letter-spacing: 0.02em;
}

.ds-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--eds-caption);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--fg-muted);
}

.ds-display-en {
  font-family: var(--font-didone);
  font-size: var(--eds-display);
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: var(--tracking-display);
}

/* Editorial drop cap — for blog/long-form first paragraph */
.ds-dropcap::first-letter {
  font-family: var(--font-didone);
  font-size: var(--eds-dropcap);
  float: left;
  line-height: 0.86;
  padding: 0.08em 0.08em 0 0;
  color: var(--rose-brown);
  font-weight: 500;
}

/* ============================================================
   9. UTILITY CLASSES used by previews + UI kit
   ============================================================ */
.ds-glass {
  background: var(--glass-bg-cloud);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-glass);
}

/* ============================================================
   Dark mode — minimal override of semantic tokens
   ============================================================ */
@media (prefers-color-scheme: dark) {
  :root {
    --bg:           #252326;
    --fg:           #F1F0EC;
    --bg-elevated:  #322F33;
    --border:       rgba(241,240,236,0.08);
    --border-strong: rgba(241,240,236,0.18);
    --wm-color:     rgba(113,149,166,0.13);
    --glass-bg-cloud: rgba(37,35,38,0.82);
    --border-glass: rgba(241,240,236,0.12);
    --glass-bg-teal:   rgba(50,75,70,0.60);
    --glass-bg-pearl:  rgba(80,65,35,0.50);
    --glass-bg-violet: rgba(65,55,75,0.55);
  }
}

.ds-glass--teal   { background: var(--glass-bg-teal); }
.ds-glass--pearl  { background: var(--glass-bg-pearl); }
.ds-glass--violet { background: var(--glass-bg-violet); }

.ds-divider {
  height: 1px;
  background: var(--border);
  border: 0;
}
.ds-rule {
  width: 48px;
  height: 1px;
  background: var(--rose-brown);
  border: 0;
  margin: var(--sp-5) 0;
}


/* ---- site.css（來源：ui_kits/website）---- */
/* ============================================================
   DUMUSHUI Website — site styles
   Extends colors_and_type.css with website-specific layout.
   ============================================================ */

/* —— 無障礙：跳至主要內容（僅鍵盤聚焦時顯示） —— */
.skip-link {
  position: fixed; top: 12px; left: 12px; z-index: 300;
  padding: 10px 18px;
  background: var(--obsidian); color: var(--paper, #F1F0EC);
  font-family: var(--font-sans); font-size: var(--eds-ui); letter-spacing: var(--tracking-cjk);
  border-radius: 999px; text-decoration: none;
  transform: translateY(-200%); opacity: 0;
  transition: transform 180ms var(--ease-out), opacity 180ms var(--ease-out);
}
.skip-link:focus-visible { transform: translateY(0); opacity: 1; outline: 2px solid var(--arch-blue); outline-offset: 2px; }

/* ============================================================
   03 · OpenType & text rendering baseline
   ============================================================ */
html, body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern" 1, "liga" 1, "pnum" 1, "lnum" 1;
  font-kerning: normal;
}

/* ============================================================
   淺色識別鎖定 — Light-only lock
   品牌刻意採單一淺色 editorial 識別。colors_and_type.css 內含一段
   半成品的 prefers-color-scheme: dark token 覆蓋,但本站表層色多為寫死
   的淺色(白卡片、淺漸層),兩者混用會造成「不深不淺」的破圖與對比異常。
   這裡在 dark 環境把被翻動的 token 重新釘回淺色值(site.css 載入序在後,
   覆蓋成功),讓深色介面的使用者依然看到完整、乾淨的淺色版本。
   color-scheme: light 也讓表單元件、捲軸、預設底色維持淺色。
   ============================================================ */
html { color-scheme: light; }
@media (prefers-color-scheme: dark) {
  :root {
    --bg:            #F1F0EC;
    --fg:            #4B484D;
    --bg-elevated:   #FFFFFF;
    --wm-color:      rgba(113,149,166,0.07);
    --border:        rgba(75, 72, 77, 0.12);
    --border-strong: rgba(75, 72, 77, 0.24);
    --border-glass:  rgba(255, 255, 255, 0.25);
    --glass-bg-cloud:  rgba(241,240,236,0.65);
    --glass-bg-teal:   rgba(177,204,197,0.55);
    --glass-bg-pearl:  rgba(241,227,188,0.55);
    --glass-bg-violet: rgba(220,212,220,0.55);
  }
}

/* ============================================================
   Layout primitives
   ============================================================ */
.site-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}
.container {
  max-width: var(--grid-max-w);
  padding: 0 var(--sp-6);
  margin: 0 auto;
  width: 100%;
}
.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--grid-gutter);
}
@media (max-width: 768px) {
  .grid-12 { grid-template-columns: 1fr; }
  .container { padding: 0 var(--sp-5); }
}

/* Vertical rhythm helpers */
.section { padding: clamp(64px, 8vw, 128px) 0; }
.section--tight { padding: clamp(48px, 6vw, 96px) 0; }

/* ============================================================
   Header (glass navbar) — fixed top
   ============================================================ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  padding: 14px 0;
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  background: var(--glass-bg-cloud);
  border-bottom: 1px solid var(--border-glass);
  transition: background 320ms var(--ease-out);
}
.nav__inner {
  display: flex; align-items: center; justify-content: space-between;
  position: relative;
  max-width: var(--grid-max-w);
  margin: 0 auto;
  padding: 0 var(--sp-6);
}
.nav__brand {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; color: var(--obsidian);
}
.nav__brand img { width: 36px; height: 36px; object-fit: contain; }
.nav__brand .wm {
  font-family: var(--font-brand);
  font-weight: 400;
  letter-spacing: var(--tracking-label);
  font-size: var(--eds-caption);
  line-height: 1;
}
.nav__brand .wm small {
  display: block; font-weight: 400; font-size: var(--eds-caption);
  letter-spacing: var(--tracking-cjk); color: var(--garlic); margin-top: 4px;
  white-space: nowrap;
}
.nav__links {
  display: flex; gap: var(--sp-6); align-items: center;
  list-style: none; padding: 0; margin: 0;
  position: absolute; left: 50%; transform: translateX(-50%);
}
.nav__links a {
  font-family: var(--font-sans); font-size: var(--eds-ui); font-weight: 500;
  color: var(--obsidian); text-decoration: none; letter-spacing: var(--tracking-snug);
  transition: color var(--dur-quick) var(--ease-out);
  white-space: nowrap;
}
.nav__links a:hover { color: var(--rose-brown); }
.nav__cta {
  font-family: var(--font-sans); font-size: var(--eds-ui); font-weight: 500;
  background: var(--brick); color: var(--cloud); padding: 10px 20px;
  border-radius: 999px; text-decoration: none;
  white-space: nowrap; flex-shrink: 0;
  transition: transform 200ms, box-shadow 200ms;
}
.nav__cta:hover { transform: translateY(-1px); box-shadow: var(--shadow-soft); }
.nav__cta:active { transform: translateY(0); transition-duration: 90ms; }

/* Hamburger button — hidden on desktop, shown ≤900px above */
.nav__burger {
  display: none;
  flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; padding: 11px;
  cursor: pointer; border: none; background: none;
  margin: -11px -11px -11px 0;
}
.nav__burger span {
  display: block; height: 1.5px; width: 100%;
  background: var(--obsidian); border-radius: 2px;
  transition: transform 280ms var(--ease-out), opacity 200ms;
}
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
/* Desktop: menu wrapper is transparent so links/cta stay direct flex children */
@media (min-width: 901px) {
  .nav__menu { display: contents; }
}

@media (max-width: 900px) {
  /* Mobile: links collapse into the hamburger dropdown panel */
  .nav__burger { display: flex; }
  .nav__menu {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch;
    gap: var(--sp-4);
    padding: var(--sp-6);
    background: rgba(241, 240, 236, 0.72);
    backdrop-filter: blur(28px) saturate(140%);
    -webkit-backdrop-filter: blur(28px) saturate(140%);
    border-bottom: 1px solid rgba(75,72,77,0.08);
    box-shadow: 0 18px 40px -24px rgba(75,72,77,0.4);
    /* 讓選單可以在小螢幕捲動，不超出視窗 */
    max-height: calc(100dvh - 64px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .nav__menu.nav__menu--open { display: flex; }
  .nav__menu .nav__links {
    position: static; transform: none;
    flex-direction: column; align-items: stretch;
    gap: 0; width: 100%;
  }
  .nav__menu .nav__links li { border-bottom: 1px solid rgba(75,72,77,0.08); }
  .nav__menu .nav__links li:last-child { border-bottom: none; }
  .nav__menu .nav__links a {
    display: block; padding: var(--sp-4) 0; font-size: var(--eds-ui);
  }
  .nav__menu .nav__cta {
    text-align: center; width: 100%; margin-top: var(--sp-3);
  }
}

/* ============================================================
   Hero (homepage) — full-bleed
   ============================================================ */
.hero {
  position: relative;
  min-height: 100vh;   /* fallback */
  min-height: 100svh; /* mobile: excludes browser chrome */
  display: flex; align-items: center;
  overflow: hidden;
  isolation: isolate;
}
.hero__bg { position: absolute; inset: 0; z-index: -2; }
.hero__inner {
  max-width: var(--grid-max-w);
  margin: 0 auto; padding: 120px var(--sp-6) var(--sp-9);
  display: grid; grid-template-columns: repeat(12, 1fr);
  column-gap: var(--grid-gutter); width: 100%;
  align-items: end;
  row-gap: var(--sp-4);
}
.hero__eyebrow {
  grid-column: 1 / span 12;
  font-family: var(--font-sans);
  font-size: var(--eds-caption); font-weight: 500;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--rose-brown);
  margin: 0 0 var(--sp-3);
}
.hero__title {
  grid-column: 1 / span 11;
  font-family: var(--font-serif);
  font-size: var(--eds-display);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  color: var(--obsidian);
  margin: 0;
}
.hero__meta {
  grid-column: 10 / span 3;
  text-align: right;
  align-self: end;
  font-family: var(--font-sans);
  font-size: var(--eds-caption); font-weight: 500;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--garlic);
  border-top: 1px solid var(--border-strong);
  padding-top: var(--sp-3);
  line-height: var(--lh-body);
}
@media (max-width: 768px) {
  .hero__title { grid-column: 1 / -1; font-size: var(--eds-display); }
  .hero__sub, .hero__cta-row, .hero__meta { grid-column: 1 / -1; }
  .hero__meta { text-align: left; margin-top: var(--sp-7); }
  .hero__inner { padding: 110px var(--sp-5) var(--sp-8); }
}

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  font-family: var(--font-sans); font-size: var(--eds-ui); font-weight: 500;
  padding: 14px 28px; border-radius: 999px; border: 1px solid transparent;
  cursor: pointer; text-decoration: none;
  white-space: nowrap;
  transition: all 200ms var(--ease-out);
  display: inline-flex; align-items: center; gap: 8px; letter-spacing: var(--tracking-snug);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(0.985); }

.btn--primary {
  background: var(--brick); color: var(--cloud);
  box-shadow: var(--shadow-card);
}
.btn--primary:hover { box-shadow: var(--shadow-hover); transform: translateY(-1px); }
.btn--primary:active { transform: translateY(0); transition-duration: 90ms; }
.btn--secondary {
  background: var(--arch-blue); color: var(--cloud);
}
.btn--ghost {
  background: transparent; color: var(--obsidian);
  border-color: rgba(75,72,77,0.18);
}
.btn--ghost:hover {
  background: rgba(113,149,166,0.07);
  border-color: rgba(113,149,166,0.45);
  color: var(--arch-blue);
}

/* 文字反白：品牌藍灰色溫，取代系統預設藍 */
::selection { background: rgba(113,149,166,0.24); color: var(--obsidian); }

/* 錨點內連平滑捲動（尊重動態縮減設定） */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ── arch-blue 鍵盤焦點環 (accessibility) ──────────────────── */
:focus-visible {
  outline: 2px solid var(--arch-blue);
  outline-offset: 3px;
  border-radius: 3px;
}
.btn--glass {
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  background: rgba(241,240,236,0.55);
  color: var(--obsidian);
  border: 1px solid rgba(255,255,255,0.45);
  box-shadow: var(--shadow-glass);
}
.btn--text {
  background: transparent; color: var(--obsidian);
  padding: 4px 0; border-radius: 0;
  border-bottom: 1px solid var(--obsidian);
}
.btn--text:hover { color: var(--rose-brown); border-bottom-color: var(--rose-brown); }

/* ============================================================
   Eyebrows, rules, dropcaps
   ============================================================ */
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--eds-caption); font-weight: 600;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--garlic);
  display: inline-block;
}
.eyebrow--rose { color: var(--rose-brown); }
.h-rule { width: 48px; height: 1px; background: var(--rose-brown); border: 0; margin: var(--sp-4) 0; }

.dropcap::first-letter {
  font-family: var(--font-didone);
  font-size: var(--eds-dropcap); float: left;
  line-height: 0.86; padding: 0.08em 0.12em 0 0;
  color: var(--rose-brown); font-weight: 500;
}

/* ============================================================
   Pillar section (home) — Swiss editorial 4-up
   ============================================================ */
.pillars {
  background: var(--cloud);
  padding: clamp(80px, 10vw, 160px) 0;
}
.pillars__head {
  display: grid; grid-template-columns: repeat(12, 1fr);
  align-items: end;
  column-gap: var(--grid-gutter);
  margin-bottom: var(--sp-9);
  max-width: var(--grid-max-w);
  margin-left: auto; margin-right: auto;
  padding: 0 var(--sp-6);
}
.pillars__head .lead {
  grid-column: 1 / span 5;
}
.pillars__head .lead h2 {
  font-family: var(--font-serif);
  font-size: var(--eds-quote);
  font-weight: 700;
  line-height: var(--lh-tight); letter-spacing: var(--tracking-display);
  text-wrap: balance;
  margin: 0;
}
.pillars__head .desc {
  grid-column: 7 / span 5;
  font-family: var(--font-serif);
  font-size: var(--eds-body);
  line-height: var(--lh-body);
  font-weight: 400;
  letter-spacing: var(--tracking-snug);
  align-self: end;
}

.pillars__grid {
  max-width: var(--grid-max-w);
  margin: 0 auto;
  padding: 0 var(--sp-6);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--grid-gutter);
  row-gap: 1px;
  background: rgba(75,72,77,0.12);   /* divider line */
}
.pillars__cell {
  grid-column: span 3;
  background: var(--cloud);
  padding: var(--sp-7) var(--sp-5) var(--sp-6);
  display: flex; flex-direction: column; gap: var(--sp-4);
}
.pillars__cell .num {
  font-family: var(--font-didone);
  font-size: var(--eds-quote); font-weight: 500; color: var(--rose-brown);
  letter-spacing: var(--tracking-cjk);
}
.pillars__cell .ttl {
  font-family: var(--font-serif);
  font-size: var(--eds-sub); font-weight: 500; line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--obsidian); margin: 0;
}
.pillars__cell .ttl small {
  display: block; font-family: var(--font-sans); font-weight: 400;
  font-size: var(--eds-caption); letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--garlic); margin-top: var(--sp-3);
}
.pillars__cell .desc {
  font-family: var(--font-serif); font-size: var(--eds-body); line-height: var(--lh-body);
  font-weight: 400; letter-spacing: var(--tracking-snug);
  color: var(--obsidian); opacity: 0.85;
}
.pillars__cell .lk {
  margin-top: auto; font-family: var(--font-sans); font-size: var(--eds-ui);
  font-weight: 500;
  color: var(--rose-brown); text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px;
  border-bottom: 1px solid currentColor; padding-bottom: 2px; width: max-content;
  transition: gap var(--dur-quick) var(--ease-out), color var(--dur-quick) var(--ease-out);
}
.pillars__cell .lk:hover { gap: 12px; color: var(--arch-blue); }

@media (max-width: 1024px) { .pillars__cell { grid-column: span 6; } }
@media (max-width: 768px) {
  .pillars__head .lead, .pillars__head .desc { grid-column: 1 / -1; }
  .pillars__cell { grid-column: 1 / -1; }
}

/* ============================================================
   Service cards grid (services hub)
   ============================================================ */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--grid-gutter);
  row-gap: var(--sp-6);
  max-width: var(--grid-max-w);
  margin: 0 auto;
  padding: 0 var(--sp-6);
}
.svc-card {
  grid-column: span 4;
  background: #FFFFFF;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
  border: none;
  border-radius: 20px;
  padding: var(--sp-6);
  text-decoration: none;
  display: flex; flex-direction: column; gap: var(--sp-3);
  box-shadow: var(--shadow-card);
  position: relative; overflow: hidden;
}
.svc-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
  transition-duration: 560ms;
}
.svc-card > * { position: relative; z-index: 1; }
.svc-card .num {
  font-family: var(--font-didone); font-size: var(--eds-caption); font-weight: 500;
  color: var(--rose-brown); letter-spacing: var(--tracking-cjk);
}
.svc-card .ttl {
  font-family: var(--font-serif); font-size: var(--eds-sub); font-weight: 500;
  line-height: var(--lh-snug); letter-spacing: var(--tracking-tight);
  color: var(--obsidian); margin: 0;
}
.svc-card .en {
  font-family: var(--font-didone); font-style: italic; font-size: var(--eds-caption);
  color: var(--garlic); margin-top: 2px;
}
.svc-card .desc {
  font-family: var(--font-serif); font-size: var(--eds-body); line-height: var(--lh-body);
  font-weight: 400; letter-spacing: var(--tracking-snug);
  color: var(--obsidian); opacity: 0.85; margin: 0;
}
.svc-card .meta {
  margin-top: auto; padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-sans); font-size: var(--eds-caption);
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--garlic);
}
.svc-card .meta .go {
  color: var(--rose-brown);
  display: inline-block;
  transition: transform var(--dur-base) var(--ease-out);
}
.svc-card:hover .meta .go { transform: translateX(4px); }
@media (max-width: 1024px) { .svc-card { grid-column: span 6; } }
@media (max-width: 640px)  { .svc-card { grid-column: 1 / -1; } }

/* ============================================================
   Service page layout — content blocks
   ============================================================ */

.svc-hero {
  position: relative;
  padding: 128px 0 var(--sp-8);
  overflow: hidden;
  isolation: isolate;
  background: var(--svc-bg, var(--cloud));
}
/* Non-editorial pages — hero spacing（色彩由 editions.css 統一定義） */
body:not(.svc-editorial) .svc-hero {
  padding-top: clamp(132px, 14vw, 184px);
  padding-bottom: clamp(72px, 9vw, 132px);
}
.svc-hero__inner {
  max-width: var(--grid-max-w);
  margin: 0 auto; padding: 0 var(--sp-6);
  display: grid; grid-template-columns: repeat(12, 1fr);
  column-gap: var(--grid-gutter);
  row-gap: var(--sp-3);
}
.svc-hero__crumb {
  grid-column: 1 / -1;
  font-family: var(--font-sans);
  font-size: var(--eds-caption); letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--garlic);
  margin-bottom: var(--sp-5);
}
.svc-hero__crumb a { color: var(--garlic); text-decoration: none; }
.svc-hero__crumb a:hover { color: var(--rose-brown); }
.svc-hero__eyebrow {
  grid-column: 1 / span 9;
  font-family: var(--font-didone); font-style: italic;
  font-size: var(--eds-sub);
  color: var(--rose-brown);
  margin: 0;
}
.svc-hero__title {
  grid-column: 1 / span 9;
  font-family: var(--font-serif); font-weight: 400;
  font-size: var(--eds-display); line-height: var(--lh-tight);
  letter-spacing: var(--tracking-cjk); color: var(--obsidian);
  margin: 0;
}
.svc-hero__lede {
  grid-column: 1 / span 7;
  font-family: var(--font-serif);
  font-size: var(--eds-sub); line-height: var(--lh-body);
  font-weight: 400; letter-spacing: var(--tracking-snug);
  color: var(--obsidian);
  margin: var(--sp-4) 0 0;
}
.svc-hero__meta {
  grid-column: 10 / span 3;
  align-self: end;
  font-family: var(--font-sans); font-size: var(--eds-caption);
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--obsidian);
  border-top: 1px solid var(--border-strong);
  padding-top: var(--sp-3);
  text-align: right;
  line-height: var(--lh-body);
}
@media (max-width: 768px) {
  .svc-hero__title, .svc-hero__eyebrow, .svc-hero__lede, .svc-hero__meta {
    grid-column: 1 / -1;
  }
  .svc-hero__meta { text-align: left; margin-top: var(--sp-5); }
}

.svc-block {
  padding: clamp(64px, 7vw, 112px) 0;
  border-top: 1px solid var(--border);
}
.svc-block__inner {
  max-width: var(--grid-max-w);
  margin: 0 auto; padding: 0 var(--sp-6);
  display: grid; grid-template-columns: repeat(12, 1fr);
  column-gap: var(--grid-gutter);
  row-gap: var(--sp-5);
}
.svc-block__eyebrow {
  grid-column: 1 / span 3;
  font-family: var(--font-sans); font-size: var(--eds-caption);
  font-weight: 600;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--rose-brown);
  align-self: start;
  padding-top: 6px;
}
.svc-block__h {
  grid-column: 5 / span 8;
  font-family: var(--font-serif); font-weight: 700;
  font-size: var(--eds-h2); line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--sp-5);
}
.svc-block__body {
  grid-column: 5 / span 6;
  font-family: var(--font-serif);
  font-size: var(--eds-body); line-height: var(--lh-loose);
  color: var(--obsidian);
}
.svc-block__body > p { margin: 0 0 1em; line-height: inherit; letter-spacing: var(--tracking-cjk); color: rgba(75,72,77,0.90); }
.svc-block__body .dropcap::first-letter {
  font-family: var(--font-didone); font-size: var(--eds-dropcap); float: left;
  line-height: 0.86; padding: 0.05em 0.12em 0 0;
  color: var(--rose-brown); font-weight: 500;
}
.svc-block__side {
  grid-column: 11 / span 2;
  font-family: var(--font-sans); font-size: var(--eds-caption);
  font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--obsidian); opacity: 0.50;
  line-height: var(--lh-body); padding-top: 4px;
  border-top: 1px solid var(--border-strong);
}
.svc-block--reverse .svc-block__eyebrow { grid-column: 10 / span 3; order: 2; }
.svc-block--reverse .svc-block__h,
.svc-block--reverse .svc-block__body { grid-column: 1 / span 8; }
.svc-block--reverse .svc-block__side { grid-column: 1 / span 2; }

@media (max-width: 768px) {
  .svc-block__eyebrow, .svc-block__h, .svc-block__body, .svc-block__side {
    grid-column: 1 / -1;
  }
  /* Reset reverse-layout reordering so the section label (eyebrow) stays
     ABOVE its heading & body when stacked into a single column */
  .svc-block--reverse .svc-block__eyebrow { order: 0; }
  .svc-block--reverse .svc-block__h,
  .svc-block--reverse .svc-block__body { order: 0; }
  
  /* Tighten the rhythm between label → heading → body on mobile */
  .svc-block__inner { row-gap: var(--sp-4); }
  .svc-block__h { margin-bottom: var(--sp-3); }
  /* Shrink the floated drop-cap so body text beside it isn't crushed */
  .svc-block__body .dropcap::first-letter {
    font-size: var(--eds-dropcap-sm);
    padding: 0.04em 0.1em 0 0;
  }
}

/* Pull-quote / callout */
.svc-quote {
  padding: clamp(64px, 7vw, 112px) 0;
  background: var(--quote-bg, var(--cloud));
}
.svc-quote__inner {
  max-width: var(--grid-max-w);
  margin: 0 auto; padding: 0 var(--sp-6);
  display: grid; grid-template-columns: repeat(12, 1fr);
  column-gap: var(--grid-gutter);
}
.svc-quote q {
  grid-column: 3 / span 8;
  text-align: center;
  font-family: var(--font-serif); font-style: italic;
  font-size: var(--eds-quote); line-height: var(--lh-body);
  color: var(--rose-brown); text-wrap: balance;
  display: block;
}
.svc-quote q::before, .svc-quote q::after { content: none; }
@media (max-width: 768px) {
  .svc-quote__inner { grid-template-columns: 1fr; }
  .svc-quote q, .svc-quote .attr { grid-column: 1 / -1; }
}
.svc-quote .attr {
  grid-column: 3 / span 8;
  text-align: center;
  font-family: var(--font-sans); font-size: var(--eds-caption);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--garlic);
  margin-top: var(--sp-5);
}

/* Principles list — 3-col editorial layout (num · name · body) */
.principles {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column;
}
.principles li {
  display: grid;
  grid-template-columns: 44px 132px 1fr;
  gap: var(--sp-5);
  padding: var(--sp-5) 0;
  border-bottom: 1px solid var(--border);
  align-items: center;
}
.principles li:first-child { border-top: 1px solid var(--border); }
.principles .p-num {
  font-family: var(--font-didone); font-style: italic;
  font-size: var(--eds-body); color: var(--rose-brown);
  letter-spacing: var(--tracking-cjk);
}
.principles .p-ttl {
  font-family: var(--font-serif); font-weight: 500;
  font-size: var(--eds-sub); line-height: var(--lh-snug);
  color: var(--obsidian); letter-spacing: var(--tracking-cjk);
}
.principles .p-body {
  font-family: var(--font-serif);
  font-size: var(--eds-body); line-height: var(--lh-body);
  font-weight: 400; letter-spacing: var(--tracking-snug);
  color: var(--obsidian); opacity: 0.88;
  margin: 0;
}
@media (max-width: 768px) {
  .principles li { grid-template-columns: 36px 1fr; }
  .principles .p-num { grid-column: 1; }
  .principles .p-ttl { grid-column: 2; }
  .principles .p-body { grid-column: 1 / -1; padding-left: calc(36px + var(--sp-5)); }
}

/* Spec list (e.g., session flow, ranges) */
.svc-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column;
  counter-reset: svc-counter;
}
.svc-list li {
  display: flex; align-items: baseline; gap: var(--sp-4);
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-serif); font-size: var(--eds-body); line-height: var(--lh-body);
  font-weight: 400; letter-spacing: var(--tracking-snug);
}
.svc-list li:last-child { border-bottom: 0; }
.svc-list li::before {
  content: counter(svc-counter, decimal-leading-zero);
  counter-increment: svc-counter;
  font-family: var(--font-didone); font-style: italic; font-size: var(--eds-body);
  color: var(--rose-brown);
  flex: 0 0 32px;
}

/* Glass CTA panel（色彩由 editions.css 統一定義） */
.cta-panel {
  position: relative;
  padding: clamp(56px, 7vw, 112px) 0;
  overflow: hidden;
}
.cta-panel__inner {
  position: relative; z-index: 2;
  max-width: var(--grid-max-w);
  margin: 0 auto; padding: 0 var(--sp-6);
  display: grid; grid-template-columns: repeat(12, 1fr);
  column-gap: var(--grid-gutter);
}
.cta-panel__card {
  grid-column: 3 / span 8;
  background: var(--glass-bg-cloud);
  backdrop-filter: blur(var(--glass-blur-strong)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--glass-blur-strong)) saturate(140%);
  border: 1px solid var(--border-glass);
  border-radius: 28px;
  padding: clamp(36px, 4vw, 64px);
  box-shadow: var(--shadow-glass);
  text-align: center;
}
.cta-panel__card .eyebrow { color: var(--rose-brown); }
.cta-panel__card h2 {
  font-family: var(--font-serif); font-weight: 600;
  font-size: var(--eds-quote); line-height: var(--lh-tight);
  margin: var(--sp-4) 0 var(--sp-3);
}
.cta-panel__card p {
  font-family: var(--font-serif); font-size: var(--eds-body); line-height: var(--lh-body);
  font-weight: 400; letter-spacing: var(--tracking-snug);
  max-width: 56ch; margin: 0 auto var(--sp-6);
}
.cta-panel__buttons { display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap; }
@media (max-width: 768px) { .cta-panel__card { grid-column: 1 / -1; } }

/* FAQ */
.faq {
  display: flex; flex-direction: column;
  border-top: 1px solid var(--border);
  margin-top: var(--sp-5);
  counter-reset: faq-counter;
}
.faq__item {
  border-bottom: 1px solid var(--border);
  counter-increment: faq-counter;
}
/* QA page: align .faq to column 5 on desktop (mirrors vogue-faq on service pages) */
.svc-block .faq { grid-column: 5 / -1; }
@media (max-width: 768px) { .svc-block .faq { grid-column: 1 / -1; } }

/* .faq__item — visually unified with .vogue-faq__item (same pin-arrow + serif Q) */
.faq__item summary {
  list-style: none; cursor: pointer;
  padding: var(--sp-6) 0;
  display: flex; align-items: baseline;
  gap: clamp(20px, 3vw, 40px);
  font-family: var(--font-serif); font-size: var(--eds-sub); font-weight: 500;
  color: var(--obsidian); letter-spacing: var(--tracking-snug);
  transition: color 200ms;
  border-bottom: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
/* Q · 01 label — pure CSS counter, no HTML needed */
.faq__item summary::before {
  content: "Q · " counter(faq-counter, decimal-leading-zero);
  flex: 0 0 clamp(52px, 7%, 80px);
  font-family: var(--font-sans);
  font-size: var(--eds-caption);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  color: var(--rose-brown);
  text-transform: uppercase;
  white-space: nowrap;
  align-self: center;
  padding-top: 2px;
}
.faq__item summary::after {
  content: "";
  flex: 0 0 auto;
  align-self: center;
  width: 10px; height: 10px;
  border-right: 1px solid var(--garlic);
  border-bottom: 1px solid var(--garlic);
  transform: rotate(45deg);
  transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-quick) var(--ease-out);
  margin-bottom: 2px;
}
.faq__item summary:hover { color: var(--rose-brown); }
.faq__item summary:hover::after { border-color: var(--rose-brown); }
.faq__item[open] summary::after {
  transform: rotate(225deg);
  border-color: var(--rose-brown);
}
/* Answer indented to align under question text (skip label column) */
.faq__item .ans {
  padding-left: calc(clamp(52px, 7%, 80px) + clamp(20px, 3vw, 40px));
  padding-bottom: var(--sp-6);
  font-family: var(--font-serif); font-size: var(--eds-body); line-height: var(--lh-loose);
  letter-spacing: var(--tracking-cjk); color: rgba(75,72,77,0.82); max-width: 64ch;
}
.faq__item[open] .ans { animation: svcFadeSlide 560ms var(--ease-out); }
@media (prefers-reduced-motion: reduce) { .faq__item[open] .ans { animation: none; } }
@media (max-width: 768px) {
  .faq__item summary::before { flex: 0 0 48px; letter-spacing: var(--tracking-label); }
  .faq__item .ans { padding-left: 48px; }
}
/* Disclaimer block */
.disclaimer {
  background: var(--cloud); padding: var(--sp-7) 0;
  border-top: 1px solid var(--border);
}
.disclaimer__inner {
  max-width: var(--grid-max-w); margin: 0 auto;
  padding: 0 var(--sp-6);
  display: grid; grid-template-columns: repeat(12, 1fr);
  column-gap: var(--grid-gutter);
}
.disclaimer .tag {
  grid-column: 1 / span 3;
  font-family: var(--font-sans); font-size: var(--eds-caption);
  font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--rose-brown);
  display: none; /* editorial label — not for public display */
}
.disclaimer .body {
  grid-column: 1 / -1;
  max-width: none;
  font-family: var(--font-serif); font-size: var(--eds-caption); line-height: var(--lh-body);
  font-weight: 400;
  color: var(--obsidian); opacity: 0.78;
}
.disclaimer .body p { margin: 0 0 0.8em; }
@media (max-width: 768px) {
  .disclaimer .tag, .disclaimer .body { grid-column: 1 / -1; }
}

/* ============================================================
   Footer
   ============================================================ */
.footer {
  background: var(--obsidian); color: var(--cloud);
  padding: clamp(56px, 6vw, 96px) 0 var(--sp-6);
}
.footer__inner {
  max-width: var(--grid-max-w); margin: 0 auto; padding: 0 var(--sp-6);
  display: grid; grid-template-columns: repeat(12, 1fr);
  column-gap: var(--grid-gutter); row-gap: var(--sp-7);
}
.footer__brand { grid-column: 1 / span 4; }
.footer__brand img { width: 60px; height: auto; margin-bottom: var(--sp-4); }
.footer__brand .wm { font-family: var(--font-brand); font-weight: 400; font-size: var(--eds-body); letter-spacing: var(--tracking-label); }
.footer__brand .sub {
  font-family: var(--font-serif); font-size: var(--eds-ui); line-height: var(--lh-body);
  color: rgba(241,240,236,0.6); margin-top: var(--sp-3);
}
.footer__col {
  grid-column: span 2;
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.footer__col h3 {
  font-family: var(--font-sans); font-size: var(--eds-caption);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: rgba(241,240,236,0.5); margin: 0 0 var(--sp-2); font-weight: 500;
}
.footer__col a {
  font-family: var(--font-sans); font-size: var(--eds-ui);
  color: var(--cloud); text-decoration: none; line-height: var(--lh-body);
  opacity: 0.86; transition: opacity 200ms;
}
.footer__col a:hover { opacity: 1; color: var(--pearl); }
.footer__bottom {
  grid-column: 1 / -1;
  border-top: 1px solid rgba(241,240,236,0.16);
  padding-top: var(--sp-5);
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-sans); font-size: var(--eds-caption);
  letter-spacing: var(--tracking-cjk); color: rgba(241,240,236,0.5); flex-wrap: wrap; gap: var(--sp-3);
}
@media (max-width: 768px) {
  .footer__brand { grid-column: 1 / -1; }
  .footer__col { grid-column: span 6; }
}

/* ============================================================
   A. Minimum patches — prevent text-wrap defects across breakpoints
   ============================================================ */

.svc-card .meta > span { white-space: nowrap; }

/* Footer links and bottom row */
.footer__bottom span { white-space: nowrap; }
/* Footer col links: allow wrapping on mobile for long Chinese names */
@media (max-width: 480px) {
  .footer__col { grid-column: 1 / -1; }
  .footer__col a { white-space: normal; }
}

/* ============================================================
   B. 1024px intermediate breakpoint — desktop-but-narrow window
   ============================================================ */
@media (max-width: 1180px) {
  /* Nav: tighten the gap so 中/英 labels fit */
  .nav__links { gap: var(--sp-4); }
  .nav__links a { font-size: var(--eds-caption); }
  .nav__brand .wm small { font-size: var(--eds-caption); }
}

@media (max-width: 1024px) {
  /* Nav: hide the brand sub-line at this width to save space */
  .nav__brand .wm small { display: none; }
  .nav__links { gap: var(--sp-3); }
  .nav__cta { padding: 8px 14px; font-size: var(--eds-caption); }

  
  .hero__meta {
    grid-column: 1 / -1;
    text-align: left;
    margin-top: var(--sp-5);
  }

  /* Intro: keep both columns but narrow the eyebrow column */
  .col-aside  { grid-column: 1 / span 4; }
  .col-main-8 { grid-column: 1 / span 12; }

  /* Pillars header: stack lead + desc */
  .pillars__head .lead { grid-column: 1 / -1; }
  .pillars__head .desc { grid-column: 1 / -1; margin-top: var(--sp-4); }

  /* Featured services: 2-up cards already kicks in here */
  /* Section header (四項核心服務 + 描述): stack vertically */
  .col-aside-wide { grid-column: 1 / -1; }
  .col-desc { grid-column: 1 / -1; align-self: start; }

  
  .svc-block__eyebrow { grid-column: 1 / -1; }
  .svc-block__h { grid-column: 1 / -1; }
  .svc-block__inner .principles,
  .svc-block__inner .svc-list { grid-column: 1 / -1 !important; }
  .svc-block__side { display: none; }

  /* CTA card: widen */
  .cta-panel__card { grid-column: 2 / span 10; }

  /* Footer: 4-col → brand top, then 3 nav cols side-by-side */
  .footer__brand { grid-column: 1 / -1; }
  .footer__col { grid-column: span 4; }
  .footer__bottom {
    flex-wrap: wrap;
    gap: var(--sp-3);
  }
}

/* ============================================================
   C. Typography & layout unification (2026-05)
   Shared classes that replace ad-hoc inline styles across pages.
   Type values draw on colors_and_type.css §4.
   ============================================================ */

/* --- Active nav link ----------------------------------------- */
.nav__links a[aria-current="page"] { color: var(--rose-brown); }

/* --- Services dropdown menu ---------------------------------- */
.nav__item--has-menu { position: relative; }
.nav__caret {
  display: inline-block; width: 0; height: 0; margin-left: 6px;
  border-left: 3.5px solid transparent; border-right: 3.5px solid transparent;
  border-top: 4px solid currentColor; vertical-align: middle;
  opacity: 0.45; transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-quick);
}
.nav__dropdown { list-style: none; }
.nav__drop-link {
  display: flex; flex-direction: column; gap: 2px;
  text-decoration: none; transition: background var(--dur-instant) var(--ease-out), color var(--dur-instant);
}
.nav__drop-link .zh {
  font-family: var(--font-sans); font-size: var(--eds-ui); font-weight: 500;
  color: var(--obsidian); letter-spacing: var(--tracking-snug); line-height: var(--lh-snug);
  transition: color var(--dur-instant);
}
.nav__drop-link .en {
  font-family: var(--font-sans); font-size: var(--eds-caption); font-weight: 500;
  letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--garlic);
}
.nav__drop-link:hover .zh,
.nav__drop-link:focus-visible .zh { color: var(--rose-brown); }
.nav__drop-divider { display: block; height: 1px; background: var(--border); }
.nav__drop-all {
  display: block; font-family: var(--font-sans); font-size: var(--eds-caption); font-weight: 600;
  letter-spacing: var(--tracking-cjk); color: var(--rose-brown); text-decoration: none;
  transition: opacity 180ms;
}
.nav__drop-all:hover { opacity: 0.65; }

/* Desktop: hover/focus-reveal glass panel */
@media (min-width: 901px) {
  .nav__dropdown {
    position: absolute; top: calc(100% + 16px); left: 50%;
    transform: translateX(-50%) translateY(8px);
    width: 312px; padding: var(--sp-3);
    background: rgba(241, 240, 236, 0.78);
    backdrop-filter: blur(var(--glass-blur-strong)) saturate(150%);
    -webkit-backdrop-filter: blur(var(--glass-blur-strong)) saturate(150%);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: 0 26px 64px -30px rgba(75,72,77,0.55), 0 6px 18px -10px rgba(75,72,77,0.22);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity var(--dur-quick) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility var(--dur-quick);
  }
  /* invisible bridge so cursor can cross the 16px gap */
  .nav__dropdown::before {
    content: ""; position: absolute; left: 0; right: 0; top: -18px; height: 18px;
  }
  .nav__item--has-menu:hover .nav__dropdown,
  .nav__item--has-menu:focus-within .nav__dropdown {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: translateX(-50%) translateY(0);
  }
  .nav__item--has-menu:hover .nav__caret,
  .nav__item--has-menu:focus-within .nav__caret { transform: rotate(180deg); opacity: 0.85; }
  .nav__drop-link { padding: 8px 12px; border-radius: var(--radius-sm); }
  .nav__drop-link:hover,
  .nav__drop-link:focus-visible { background: rgba(113,149,166,0.08); }
  .nav__drop-divider { margin: 8px 6px; }
  .nav__drop-all { padding: 8px 12px 4px; }
}

/* Mobile: dropdown becomes an inline, indented sub-list */
@media (max-width: 900px) {
  .nav__caret { display: none; }
  .nav__dropdown {
    position: static; opacity: 1; visibility: visible; pointer-events: auto;
    transform: none; background: none; border: none; box-shadow: none;
    backdrop-filter: none; -webkit-backdrop-filter: none;
    width: auto; padding: 4px 0 var(--sp-4);
  }
  .nav__dropdown::before { display: none; }
  .nav__menu .nav__links .nav__drop-link {
    padding: 9px 0 9px var(--sp-4); border-radius: 0;
    border-left: 1px solid var(--border); margin-left: 2px;
  }
  .nav__menu .nav__links .nav__drop-link .zh { font-size: var(--eds-ui); }
  .nav__drop-divider { display: none; }
  .nav__menu .nav__links .nav__drop-all { padding: 12px 0 4px var(--sp-4); }
}

/* --- Editorial intro rows (12-col: label aside + content) ---- */
.editorial      { row-gap: var(--sp-5); }
.editorial--head { row-gap: var(--sp-4); margin-bottom: var(--sp-6); }
.editorial--gap  { margin-bottom: var(--sp-7); }

/* Column placements — all snap to the 12-col grid */
.col-aside      { grid-column: 1 / span 3; }
.col-aside-wide { grid-column: 1 / span 5; }
.col-main       { grid-column: 5 / span 7; }
.col-main-8     { grid-column: 5 / span 8; }
.col-desc       { grid-column: 7 / span 5; align-self: end; }

/* --- Unified section heading (H2 on the grid) ---------------- */
.section-head {
  font-family: var(--font-serif);
  font-weight: var(--fw-semi);
  font-size: var(--eds-quote);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
  margin: 0;
}

/* --- Editorial body copy ------------------------------------- */
.lead-para {
  font-family: var(--font-serif);
  font-size: var(--eds-body);
  line-height: var(--lh-loose);
  margin: 0 0 1em;
}
.body-copy {
  font-family: var(--font-serif);
  font-size: var(--eds-body);
  line-height: var(--lh-loose);
  color: var(--obsidian);
  margin: 0;
}
.body-copy--muted { opacity: 0.88; }

/* DUMUSHUI 字標 — Rubik（全站統一） */
.brand-en { font-family: var(--font-brand); font-weight: 400; }

/* Fine print / source note */
.fine-print {
  font-family: var(--font-sans);
  font-size: var(--eds-caption);
  line-height: var(--lh-body);
  letter-spacing: var(--tracking-cjk);
  color: var(--garlic);
}
.fine-print--spaced { margin-top: var(--sp-4); }

/* --- Pull-quote (shared) — Didone italic w/ left rule ----- */
.pullquote {
  font-family: var(--font-didone);
  font-style: italic;
  font-size: var(--eds-quote);
  line-height: var(--lh-body);
  letter-spacing: var(--tracking-cjk);
  color: var(--rose-brown);
  margin: 1.6em 0 0;
  padding-left: 1.5em;
  border-left: 1px solid var(--border-strong);
}

/* --- Lists & FAQ placed inside service content blocks -------- */
.svc-block .principles { grid-column: 5 / span 8; }
.svc-block .svc-list   { grid-column: 5 / span 8; }
.svc-block--reverse .svc-list { grid-column: 1 / span 8; }

/* --- Centered section CTA row（卡片牆下方置中按鈕） ---------- */
.section-cta { margin-top: var(--sp-7); display: flex; justify-content: center; }

/* --- Responsive: collapse editorial columns ------------------ */
@media (max-width: 1024px) {
  .col-aside-wide { grid-column: 1 / -1; }
  .col-main-8     { grid-column: 1 / -1; }
  .col-desc       { grid-column: 1 / -1; align-self: start; }
  .svc-block .principles,
  .svc-block .svc-list { grid-column: 1 / -1; }
}
@media (max-width: 768px) {
  .col-aside, .col-aside-wide, .col-main, .col-main-8, .col-desc { grid-column: 1 / -1; }
}

/* ============================================================
   VOGUE UPGRADE — 2026-06
   Scroll-reveal · Hero sizing · Folio · Card
   ============================================================ */

/* Scroll reveal — quiet brand-aligned fade+lift
   Gated on body.js-reveal-ready so content is always visible
   without JS, slow connections, or crawlers. ------------------- */
body.js-reveal-ready .reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 1040ms var(--ease-out), transform 1040ms var(--ease-out);
  will-change: opacity, transform;
}
body.js-reveal-ready .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Main pages section reveal (same effect, no .reveal class needed in HTML) */
body.js-reveal-ready:not(.svc-editorial) .section,
body.js-reveal-ready:not(.svc-editorial) .svc-block,
body.js-reveal-ready:not(.svc-editorial) .pillars,
body.js-reveal-ready:not(.svc-editorial) .section--tight {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 1040ms var(--ease-out), transform 1040ms var(--ease-out);
  will-change: opacity, transform;
}
body.js-reveal-ready:not(.svc-editorial) .section.is-visible,
body.js-reveal-ready:not(.svc-editorial) .svc-block.is-visible,
body.js-reveal-ready:not(.svc-editorial) .pillars.is-visible,
body.js-reveal-ready:not(.svc-editorial) .section--tight.is-visible {
  opacity: 1;
  transform: none;
}

/* prefers-reduced-motion: skip all animation */
@media (prefers-reduced-motion: reduce) {
  body.js-reveal-ready .reveal,
  body.js-reveal-ready:not(.svc-editorial) .section,
  body.js-reveal-ready:not(.svc-editorial) .svc-block,
  body.js-reveal-ready:not(.svc-editorial) .pillars,
  body.js-reveal-ready:not(.svc-editorial) .section--tight {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* Staggered list items inside a revealed section */
.reveal.is-visible .svc-list li,
.reveal.is-visible .principles li {
  animation: rowFade 560ms var(--ease-out) both;
}
.reveal.is-visible .svc-list li:nth-child(1)  { animation-delay: 60ms; }
.reveal.is-visible .svc-list li:nth-child(2)  { animation-delay: 120ms; }
.reveal.is-visible .svc-list li:nth-child(3)  { animation-delay: 180ms; }
.reveal.is-visible .svc-list li:nth-child(4)  { animation-delay: 240ms; }
.reveal.is-visible .svc-list li:nth-child(5)  { animation-delay: 300ms; }
.reveal.is-visible .svc-list li:nth-child(6)  { animation-delay: 360ms; }
.reveal.is-visible .svc-list li:nth-child(7)  { animation-delay: 420ms; }
.reveal.is-visible .svc-list li:nth-child(8)  { animation-delay: 480ms; }
@keyframes rowFade {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: none; }
}

/* 服務卡浮現 —— 段落揭示後，六張卡片同時一起升起（無逐張錯開）。
   僅在允許動態的環境執行；無 JS 時完全不生效。 */
@media (prefers-reduced-motion: no-preference) {
  body.js-reveal-ready .section.is-visible .svc-grid > .svc-card {
    animation: fadeRise 1000ms var(--ease-out) backwards;
  }
}
/* ============================================================
   Canonical fade-rise — SINGLE SOURCE OF TRUTH.
   Shared by: hero entrance (index), section reveal, card reveal
   (time-based stagger AND scroll-driven view-timeline).
   Do NOT redefine this motion under another name elsewhere.
   ============================================================ */
@keyframes fadeRise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* ============================================================
   Service page hero — photo on the 12-col grid (cols 9–12)
   Photo shares rows with eyebrow → lede and bottom-aligns to the lede
   baseline. The 90 MIN / 1-ON-1 glass label sits inside the photo's
   bottom-left corner so photo + meta read as one object.
   ============================================================ */
.svc-hero__photo {
  grid-column: 9 / span 4;
  grid-row: 2 / span 3;
  align-self: end;
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  overflow: visible;
  box-shadow: 0 24px 48px -32px rgba(75,72,77,0.35);
  isolation: isolate;
}
/* 識別色襯底 — 偏移 12px 的 --svc 色塊，像 Pantone 色卡墊在照片下 */
.svc-hero__photo::before {
  content: ""; position: absolute; inset: 0;
  transform: translate(12px, 12px);
  border-radius: inherit;
  background: var(--svc, var(--cloud));
  z-index: -1;
}
.svc-hero__photo img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  border-radius: inherit;
}
.svc-hero__photo::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.45);
  pointer-events: none;
}
.svc-hero:has(.svc-hero__photo) .svc-hero__eyebrow,
.svc-hero:has(.svc-hero__photo) .svc-hero__title { grid-column: 1 / span 8; }
.svc-hero:has(.svc-hero__photo) .svc-hero__lede { grid-column: 1 / span 6; }
.svc-hero:has(.svc-hero__photo) .svc-hero__meta,
body.vogue.svc-editorial .svc-hero:has(.svc-hero__photo) .svc-hero__meta {
  grid-column: 9 / span 4;
  grid-row: 4;
  align-self: end;
  justify-self: end;
  margin: 0 var(--sp-4) var(--sp-4) 0;
  position: relative; z-index: 2;
}
@media (max-width: 900px) {
  .svc-hero__photo { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 16 / 10; margin-top: var(--sp-5); }
  .svc-hero:has(.svc-hero__photo) .svc-hero__meta { grid-column: 1 / -1; grid-row: auto; margin: var(--sp-4) 0 0; }
}

/* ============================================================
   Editorial comparison table (Gyrokinesis, etc.) */
.svc-block__body.svc-block__body--wide {
  grid-column: 1 / span 12;
  padding-top: var(--sp-5);
}
.svc-block__body--offset {
  grid-column: 5 / -1;
}
.compare-lede {
  max-width: 68ch;
  margin-bottom: var(--sp-6);
}
.svc-compare {
  grid-column: 5 / span 8;
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-sans);
  font-size: var(--eds-caption);
}
.svc-compare thead th {
  text-align: left;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border-strong);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--rose-brown);
}
.svc-compare tbody td {
  padding: var(--sp-4);
  border-bottom: 1px solid var(--border);
  font-family: var(--font-serif);
  font-size: var(--eds-body);
  line-height: var(--lh-body);
  vertical-align: top;
}
.svc-compare tbody td:first-child {
  font-family: var(--font-sans);
  font-weight: 600;
  white-space: nowrap;
  color: var(--rose-brown);
}
@media (max-width: 1024px) { .svc-compare { grid-column: 1 / -1; } }
/* Table collapses at 768px — same breakpoint as 12-col grid,
   prevents squashed layout on portrait iPad (641–768px) */
@media (max-width: 768px)  {
  .svc-compare thead { display: none; }
  .svc-compare tbody td {
    display: block; border-bottom: none;
    padding: var(--sp-2) var(--sp-4);
  }
  .svc-compare tbody td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-family: var(--font-sans); font-size: var(--eds-caption); font-weight: 700;
    letter-spacing: var(--tracking-wide); text-transform: uppercase;
    color: var(--garlic); margin-bottom: 4px;
  }
  .svc-compare tbody tr { border-bottom: 1px solid var(--border); display: block; padding: var(--sp-3) 0; }
}

/* Research data table (Happiness Program) */
.svc-research {
  grid-column: 5 / span 8;
  width: 100%;
  border-collapse: collapse;
}
.svc-research th {
  font-family: var(--font-sans);
  font-size: var(--eds-caption);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--rose-brown);
  text-align: left;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border-strong);
}
.svc-research td {
  font-family: var(--font-serif);
  font-size: var(--eds-body);
  line-height: var(--lh-body);
  padding: var(--sp-4);
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.svc-research td:first-child {
  font-family: var(--font-sans);
  font-weight: 600;
  white-space: nowrap;
  color: var(--obsidian);
  width: 30%;
}
@media (max-width: 1024px) { .svc-research { grid-column: 1 / -1; } }

/* Gunas (three-quality cards) */
.gunas {
  grid-column: 5 / span 8;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.guna {
  padding: var(--sp-6) 0;
  border-bottom: 1px solid var(--border);
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: var(--sp-5);
  align-items: start;
}
.guna:first-child { border-top: 1px solid var(--border); }
.guna__label {
  font-family: var(--font-didone);
  font-style: italic;
  font-size: var(--eds-sub);
  color: var(--rose-brown);
  line-height: var(--lh-snug);
}
.guna__label small {
  display: block;
  font-family: var(--font-sans);
  font-style: normal;
  font-size: var(--eds-caption);
  color: var(--garlic);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  margin-top: var(--sp-2);
}
.guna__body {
  font-family: var(--font-serif);
  font-size: var(--eds-body);
  line-height: var(--lh-body);
  color: var(--obsidian);
}
@media (max-width: 1024px) { .gunas { grid-column: 1 / -1; } }
@media (max-width: 640px)  { .guna { grid-template-columns: 1fr; } }

/* ============================================================
   .svc-editorial — Premium Service Page Standard
   Shared rules; page-specific hero glows live in each HTML file
   ============================================================ */

/* ── Editorial stat pull ────────────────────────────────────────
   Numbers, ranges, and words in the 02 · 原理 section          */
.stat-mv {
  grid-column: 1 / -1;
  display: flex; flex-direction: column; gap: var(--sp-3);
  padding: var(--sp-6) 0 var(--sp-5);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin: var(--sp-4) 0 var(--sp-3);
}
.stat-mv__num {
  font-family: var(--font-didone); font-style: italic;
  font-size: var(--eds-numeral); font-weight: 300;
  color: var(--obsidian); opacity: 0.42;
  line-height: 0.88; letter-spacing: -0.04em; text-indent: -0.04em;
}
.stat-mv[data-stat-type="word"] .stat-mv__num {
  font-size: var(--eds-numeral-sm); line-height: 1.05;
  font-style: normal; letter-spacing: -0.02em; text-indent: -0.02em;
}
.stat-mv[data-stat-type="range"] .stat-mv__num {
  font-size: var(--eds-numeral-md);
}
.stat-mv__label {
  font-family: var(--font-sans); font-size: var(--eds-caption); font-weight: 700;
  letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--garlic);
}
.stat-mv__unit {
  font-size: 0.38em; letter-spacing: var(--tracking-cjk);
  vertical-align: 0.2em; opacity: 0.72;
}
@media (max-width: 768px) {
  .stat-mv { padding: var(--sp-5) 0 var(--sp-4); }
}

/* Pull-quote hairline framing */
.svc-editorial .svc-quote--framed {
  background: transparent;
  padding: clamp(84px, 9vw, 140px) 0;
}
.svc-editorial .svc-quote--framed q {
  grid-column: 3 / span 8;
  text-align: center;
  border-top: 1px solid rgba(75,72,77,0.14);
  padding-top: clamp(36px, 4vw, 64px);
  font-size: var(--eds-quote);
  line-height: var(--lh-body);
  letter-spacing: var(--tracking-cjk);
  color: var(--rose-brown);
  text-wrap: balance;
}
.svc-editorial .svc-quote--framed .attr {
  grid-column: 3 / span 8;
  text-align: center;
  padding-bottom: 2px;
  margin-top: clamp(28px, 3vw, 44px);
  position: relative;
}
.svc-editorial .svc-quote--framed .attr::before {
  content: "";
  display: inline-block;
  width: 32px; height: 1px;
  background: var(--rose-brown);
  vertical-align: middle;
  margin-right: 14px;
}
@media (max-width: 768px) {
  .svc-editorial .svc-quote--framed q,
  .svc-editorial .svc-quote--framed .attr { grid-column: 1 / -1; }
}

/* Journal card grid (適合族群) */
.svc-editorial .editorial-journal-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: var(--sp-7);
  row-gap: var(--sp-6);
  margin-top: var(--sp-3);
}
@media (max-width: 768px) {
  .svc-editorial .editorial-journal-grid { grid-template-columns: 1fr; }
}
.svc-editorial .journal-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border-top: 1px solid rgba(75,72,77,0.10);
  padding-top: var(--sp-4);
  gap: 6px;
}
.svc-editorial .journal-card .jc-num {
  font-family: var(--font-didone);
  font-style: italic;
  font-size: var(--eds-body);
  color: var(--arch-blue);
  line-height: 1;
  letter-spacing: var(--tracking-cjk);
}
.svc-editorial .journal-card .jc-ttl {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--eds-ui);
  color: var(--obsidian);
  letter-spacing: var(--tracking-cjk);
  margin-top: 4px;
}
.svc-editorial .journal-card .jc-body {
  font-family: var(--font-serif);
  font-size: var(--eds-ui);
  line-height: var(--lh-loose);
  letter-spacing: var(--tracking-cjk);
  color: rgba(75,72,77,0.82);
  margin: 0;
}

/* Vogue FAQ */
.svc-editorial .vogue-faq {
  grid-column: 5 / span 8;
  display: flex;
  flex-direction: column;
  margin-top: var(--sp-4);
  border-top: 1px solid rgba(75,72,77,0.08);
}
.svc-editorial .vogue-faq__item { border-bottom: 1px solid rgba(75,72,77,0.07); }
.svc-editorial .vogue-faq__item > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: clamp(20px, 3vw, 40px);
  padding: var(--sp-6) 0;
}
.svc-editorial .vogue-faq__item > summary::-webkit-details-marker { display: none; }
.svc-editorial .vogue-faq__label {
  flex: 0 0 clamp(52px, 7%, 80px);
  font-family: var(--font-sans);
  font-size: var(--eds-caption);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  color: var(--rose-brown);
  text-transform: uppercase;
  padding-top: 3px;
  white-space: nowrap;
}
.svc-editorial .vogue-faq__q {
  flex: 1;
  font-family: var(--font-serif);
  font-size: var(--eds-sub);
  font-weight: 500;
  line-height: var(--lh-snug);
  color: var(--obsidian);
  letter-spacing: var(--tracking-snug);
  transition: color 200ms;
}
.svc-editorial .vogue-faq__item > summary:hover .vogue-faq__q { color: var(--rose-brown); }
.svc-editorial .vogue-faq__item > summary::after {
  content: "";
  flex: 0 0 auto;
  align-self: center;
  width: 10px; height: 10px;
  border-right: 1px solid var(--garlic);
  border-bottom: 1px solid var(--garlic);
  transform: rotate(45deg);
  transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-quick) var(--ease-out);
  margin-bottom: 2px;
}
.svc-editorial .vogue-faq__item[open] > summary::after {
  transform: rotate(225deg);
  border-color: var(--rose-brown);
}
.svc-editorial .vogue-faq__item .ans {
  padding-left: calc(clamp(52px, 7%, 80px) + clamp(20px, 3vw, 40px));
  padding-bottom: var(--sp-6);
  font-family: var(--font-serif);
  font-size: var(--eds-body);
  line-height: var(--lh-loose);
  letter-spacing: var(--tracking-cjk);
  color: rgba(75,72,77,0.82);
  max-width: 64ch;
}
.svc-editorial .vogue-faq__item[open] .ans { animation: svcFadeSlide 560ms var(--ease-out); }
@keyframes svcFadeSlide { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .svc-editorial .vogue-faq__item[open] .ans { animation: none; } }
@media (max-width: 768px) {
  .svc-editorial .vogue-faq { grid-column: 1 / -1; }
  .svc-editorial .vogue-faq__label { flex: 0 0 48px; letter-spacing: var(--tracking-label); }
  .svc-editorial .vogue-faq__item .ans { padding-left: 48px; }
}

.svc-editorial .svc-block--who { border-top: 1px solid rgba(75,72,77,0.06); }

/* ── Service page flow-wrap: hero + first svc-block share one background ─
   The page-specific .svc-flow-wrap--{slug} carries the gradient;
   both child sections become transparent so no seam shows.           */
.svc-flow-wrap { position: relative; }
.svc-flow-wrap > .svc-hero  { background: transparent !important; }
.svc-flow-wrap > .svc-block,
.svc-flow-wrap > .svc-quote { background: transparent; border-top: none; }

.svc-editorial .svc-hero .svc-hero__inner {
  position: relative;
  z-index: 1;
}

/* ============================================================
   Main-pages ambient glow + scroll reveal
   Scoped to body:not(.svc-editorial) — zero impact on service pages
   ============================================================ */

/* Non-editorial pages — unified hairline (32% right) + svc-block reset -----
   Replaces per-page ::before rules in about/qa local <style> blocks.
   services.html uses inline <div> hairlines (frozen HTML) — same visual.   */
body:not(.svc-editorial) .svc-block {
  border-top: none;
  position: relative;
}
body:not(.svc-editorial) .svc-block::before {
  content: "";
  position: absolute; top: 0; right: 0;
  width: 32%; height: 1px;
  background: var(--border);
}
body:not(.svc-editorial) .section::before {
  content: "";
  position: absolute; top: 0; right: 0;
  width: 32%; height: 1px;
  background: var(--border);
}
body:not(.svc-editorial) .section--tight {
  position: relative;
}
body:not(.svc-editorial) .section--tight::before {
  content: "";
  position: absolute; top: 0; right: 0;
  width: 32%; height: 1px;
  background: var(--border);
}

/* .eyebrow--underline — 48px rose-brown hairline under eyebrow text */
.eyebrow--underline {
  background: linear-gradient(var(--rose-brown), var(--rose-brown)) no-repeat 0 100% / 48px 1px;
  padding-bottom: var(--sp-3);
  display: inline-block;
}

.svc-block__h--display {
  font-family: var(--font-serif);
  font-size: var(--eds-display);
  font-weight: 300;
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-cjk);
}
.about-founder-img {
  grid-column: 1 / span 4;
  grid-row: 2;
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  object-position: center top;
  border-radius: var(--radius-lg);
}
.about-mvp-header {
  padding-bottom: var(--sp-6);
}

/* 1 · Section stacking context ---------- */
body:not(.svc-editorial) .section,
body:not(.svc-editorial) .pillars,
body:not(.svc-editorial) .cta-panel {
  position: relative;
}
/* Ensure direct children sit above the glow layer */
body:not(.svc-editorial) .section > *,
body:not(.svc-editorial) .pillars > *,
body:not(.svc-editorial) .cta-panel > * {
  position: relative;
  z-index: 1;
}

/* 2 · CSS scroll-driven reveal — card & cell level -------------- */
@supports (animation-timeline: view()) {
  /* 服務卡 .svc-card 刻意不納入此「逐卡捲動軸」揭示——
     它由區塊級 .is-visible 系統統一觸發，六張一起浮現。 */
  body:not(.svc-editorial) .pillars__cell,
  body:not(.svc-editorial) .about-card,
  body:not(.svc-editorial) .qa-item {
    animation: fadeRise 900ms linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 30%;
  }
  /* reuses the canonical fadeRise keyframe (defined once, above) */
  @media (prefers-reduced-motion: reduce) {
    body:not(.svc-editorial) .pillars__cell,
    body:not(.svc-editorial) .about-card,
    body:not(.svc-editorial) .qa-item {
      animation: none;
    }
  }
}

/* ============================================================
   VOGUE EDITION — shared editorial layer (2026-06)
   套用於所有掛上 body.vogue 的頁面（首頁 index 自帶 home-vogue 內聯版）。
   乾淨米白 · 克制 Didone · 加大留白 · 方正單色按鈕 · 頁邊 running head。
   英文/數字 = Bodoni Moda；中文一律退回 Noto Serif TC。
   ============================================================ */

/* —— 統一紙面；hero／語錄／CTA 的核心三色洗色由 editions.css 定義 —— */
body.vogue,
body.vogue .site-shell { background: var(--paper); }

body.vogue .section,
body.vogue .section--tight,
body.vogue .pillars,
body.vogue .svc-block,
body.vogue .svc-quote { background: var(--paper); }

/* flow-wrap 內層保持透明，承接統一紙面 */
body.vogue .svc-flow-wrap > .svc-hero,
body.vogue .svc-flow-wrap > .svc-block,
body.vogue .svc-flow-wrap > .svc-quote { background: transparent; }

/* 移除所有裝飾光暈 / 顆粒 / halo */
body.vogue .about-brandmark__logo::before { display: none; }
body.vogue .cta-panel { border-top: none; }

/* —— 髮絲線：更細更淡 —— */
body.vogue .h-rule,
body.vogue .section-rule { background: var(--rose-brown); opacity: 1; }
body.vogue .section::before,
body.vogue .svc-block::before { background: rgba(75,72,77,0.08) !important; }
body.vogue .svc-block { border-top-color: rgba(75,72,77,0.08); }

/* —— 加大留白 —— */
body.vogue .svc-hero { padding-top: clamp(150px,16vw,224px) !important; padding-bottom: clamp(64px,9vw,128px) !important; }
body.vogue .svc-block { padding: clamp(80px,9vw,152px) 0; }
body.vogue .section { padding: clamp(88px,11vw,184px) 0; }
body.vogue .section--tight { padding: clamp(64px,8vw,128px) 0; }
body.vogue .svc-quote { padding: clamp(96px,11vw,180px) 0; }
body.vogue .cta-panel { padding: clamp(96px,12vw,192px) 0; }

/* —— nav：hero 上透明，捲動後乾淨玻璃（nav.js 控制 .nav--solid）—— */
body.vogue .nav {
  background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none;
  border-bottom: 1px solid transparent;
  transition: background 420ms var(--ease-out), border-color 420ms var(--ease-out);
}
body.vogue .nav.nav--solid {
  background: var(--glass-bg-cloud);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  border-bottom: 1px solid var(--border-glass);
}

/* —— 頁邊 running head（vertical）—— */
body.vogue::before {
  content: "DUMUSHUI \2014 SINCE 2026";
  position: fixed; left: 16px; top: 50%;
  transform: translateY(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  font-family: var(--font-brand); font-size: var(--eds-caption); font-weight: 400;
  letter-spacing: var(--tracking-mega); text-transform: uppercase;
  color: var(--garlic); opacity: 0.55; z-index: 40; pointer-events: none;
}
@media (max-width: 1100px) { body.vogue::before { display: none; } }

/* —— 標題改克制 editorial 襯線 —— */
body.vogue .svc-block__h,
body.vogue .section-head,
body.vogue .pillars__head .lead h2 {
  font-family: var(--font-serif); font-weight: 300; letter-spacing: var(--tracking-snug);
}
body.vogue .svc-hero__title { font-weight: 300; }
body.vogue .svc-hero__eyebrow { font-family: var(--font-didone); }

/* —— 數字 / 英文顯示 → Didone（中文自動退回 serif）—— */
body.vogue .stat-mv__num,
body.vogue .pillars__cell .num,
body.vogue .principles .p-num,
body.vogue .svc-list li::before,
body.vogue .guna__label,
body.vogue .journal-card .jc-num,
body.vogue .svc-block--watermark::before,
body.vogue .svc-card .ttl,
body.vogue .pullquote { font-family: var(--font-didone) !important; }
body.vogue .pillars__cell .num { font-weight: 400; }

/* —— 引言：粉紅棕墨色（品牌 quote 色），製造編輯高潮 —— */
body.vogue .svc-quote q,
body.vogue .svc-quote--framed q { color: var(--rose-brown); }

/* —— CTA 卡：玻璃底板由 editions.css 單一定義 —— */
body.vogue .cta-panel__card h2 {
  font-family: var(--font-serif); font-weight: 300; letter-spacing: var(--tracking-snug);
  font-size: var(--eds-quote); line-height: var(--lh-snug);
  margin: var(--sp-5) 0 var(--sp-4);
}

/* —— 按鈕：Apple 膠囊形（沿用基底 999）· 大寫 · 品牌磚黃暖色 CTA —— */
body.vogue .btn { text-transform: uppercase; letter-spacing: var(--tracking-wide); font-size: var(--eds-caption); font-weight: 600; padding: 16px 32px; }
body.vogue .btn--primary { background: var(--brick); color: var(--cloud); box-shadow: none; }
body.vogue .btn--primary:hover { filter: brightness(0.94); box-shadow: none; }
body.vogue .btn--ghost { border-color: rgba(75,72,77,0.30); }
body.vogue .nav__cta { text-transform: uppercase; letter-spacing: var(--tracking-wide); font-size: var(--eds-caption); background: var(--brick); }

/* —— 服務頁卡片：純文字 → 乾淨編輯式（去粉彩底/陰影/圓角，頂部髮絲線 + 大號 Didone Nº）—— */
body.vogue .svc-card {
  background: transparent !important;
  box-shadow: none !important;
  border: 0; border-top: 1px solid rgba(75,72,77,0.24); border-radius: 0;
  padding: var(--sp-5) 0 var(--sp-6) !important; overflow: visible;
}
body.vogue .svc-card:hover,
body.vogue .wall-grid .svc-card,
body.vogue .wall-grid .svc-card:hover { box-shadow: none !important; transform: none; }
body.vogue .svc-card .num {
  font-family: var(--font-didone) !important; font-style: normal; font-weight: 400;
  font-size: var(--eds-display); line-height: 1; color: var(--rose-brown);
  opacity: 1; letter-spacing: 0; margin-bottom: var(--sp-2);
}
body.vogue .svc-card .num::before { content: "N\00BA "; }
body.vogue .svc-card .ttl { font-size: var(--eds-sub); font-weight: 500; margin-top: var(--sp-2); }
body.vogue .svc-card .en {
  font-family: var(--font-sans) !important; font-style: normal; font-size: var(--eds-caption);
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--garlic); margin-top: 2px;
}
body.vogue .svc-card .desc { opacity: 0.82; }
body.vogue .svc-card .meta { border-top: 1px solid rgba(75,72,77,0.10); }

/* —— stat 巨型數字：粉紅棕淡墨，暖而不搶 —— */
body.vogue .stat-mv__num { color: var(--rose-brown); opacity: 0.6; }

/* ============================================================
   CIS 全色系 — 每項服務的識別色當「墨水/鍵線」用於細節（非色塊）
   --svc：該情境的 CIS 主色。卡片頂線、大數字、側標、引言線、CTA 頂線…
   服務卡：index 用 --svc；services hub 沿用既有 --tint。
   ============================================================ */
body.vogue .svc-card,
body.home-vogue .svc-card {
  border-top: 1px solid rgba(75,72,77,0.16) !important;
  position: relative;
}
/* 左上角識別色標籤（短而明確，清楚用上 CIS 色） */
body.vogue .svc-card::after,
body.home-vogue .svc-card::after {
  content: ""; position: absolute; top: -1px; left: 0;
  width: 44px; height: 3px; z-index: 3;
  background: var(--svc, var(--tint, var(--rose-brown)));
}

/* 服務頁：以該服務 CIS 色點綴細節 ---------------------------------- */
body.vogue.svc-editorial .stat-mv__num { color: var(--svc, var(--rose-brown)) !important; opacity: 0.6; }
body.vogue.svc-editorial .svc-block__side { border-top: 2px solid var(--svc, var(--border-strong)); }
/* pewter 次灰 #585859 — 次要文字角色（側標 / 免責聲明） */
body.vogue .svc-block__side,
body.home-vogue .svc-block__side { color: var(--pewter); opacity: 1; }
body.vogue .disclaimer .body { color: var(--pewter); }
body.vogue.svc-editorial .svc-hero__meta { border-top: 2px solid var(--svc, var(--border-strong)); }
body.vogue.svc-editorial .svc-quote--framed q { border-top-color: var(--svc, rgba(75,72,77,0.16)); }
body.vogue.svc-editorial .svc-quote--framed .attr::before { background: var(--svc, var(--rose-brown)); }

/* 麵包屑「· 01」末尾的編號帶識別色 */
body.vogue.svc-editorial .svc-hero__crumb { color: var(--garlic); }

/* 首頁四大支柱：每柱識別色頂線 ----------------------------------- */
body.home-vogue .pillars__cell { border-top: 2px solid var(--svc, transparent); }

/* ============================================================
   ATELIER PASS — 全站共用細節層（2026-07）
   與首頁 index 內聯版同語彙：CJK 印刷微調 · colophon CTA ·
   版權頁 footer · 免責聲明融回紙面。無新增文案。
   ============================================================ */

/* —— CJK 印刷級排字：內文兩端對齊 + 微張字距 —— */
body.vogue .svc-block__body p,
body.vogue .lead-para,
body.vogue .body-copy,
body.vogue .p-body,
body.vogue .pillars__head .desc,
body.vogue .pillars__cell .desc,
body.vogue .svc-card .desc,
body.vogue .faq__item .ans,
body.vogue .vogue-faq__item .ans,
body.vogue .disclaimer .body {
  text-align: justify;
  text-justify: inter-ideograph;
  letter-spacing: var(--tracking-cjk);
}

/* —— CJK 標點擠壓與引號懸掛（漸進增強）—— */
body.vogue h1, body.vogue h2, body.vogue h3,
body.vogue .svc-quote q { text-spacing-trim: trim-start; }
body.vogue .svc-quote q { hanging-punctuation: first allow-end; }
body.vogue a { -webkit-tap-highlight-color: transparent; }

/* —— 免責聲明：融回紙面，僅留一條髮絲線 —— */
body.vogue .disclaimer { background: transparent; border-top: 1px solid rgba(75,72,77,0.10); }

/* —— 版權頁 footer：Didone 字標 + 襯線欄目，像雜誌的最後一頁 —— */
body.vogue .footer__brand .wm { font-family: var(--font-brand); font-weight: 400; font-size: var(--eds-sub); letter-spacing: var(--tracking-label); }
body.vogue .footer__col h3 { font-size: var(--eds-caption); letter-spacing: var(--tracking-label); color: rgba(241,240,236,0.45); }
body.vogue .footer__col a { font-family: var(--font-serif); font-size: var(--eds-ui); opacity: 0.8; }
body.vogue .footer__bottom { font-size: var(--eds-caption); letter-spacing: var(--tracking-wide); text-transform: uppercase; }

/* ============================================================
   服務頁「一本書」— 章節索引（sticky）＋ 翻頁
   ============================================================ */
.svc-toc {
  position: fixed; right: clamp(16px, 2vw, 32px); top: 50%; transform: translateY(-50%);
  z-index: 30; display: none; flex-direction: column; gap: 2px;
  opacity: 0; transition: opacity 400ms var(--ease-out);
}
.svc-toc.is-shown { opacity: 1; }
@media (min-width: 1200px) { .svc-toc { display: flex; } }
.svc-toc a {
  display: grid; grid-template-columns: auto 22px; align-items: baseline; column-gap: 10px;
  padding: 8px 0; text-decoration: none; color: var(--garlic); text-align: right;
  font-family: var(--font-sans); font-size: 11px; letter-spacing: var(--tracking-label); text-transform: uppercase;
  border-right: 1px solid rgba(75,72,77,0.14); padding-right: 12px;
  transition: color 200ms var(--ease-out), border-color 200ms var(--ease-out);
}
.svc-toc a .svc-toc__no { font-family: var(--font-didone); font-style: italic; font-size: 13px; letter-spacing: 0; text-transform: none; }
.svc-toc a .svc-toc__lbl { opacity: 0; transform: translateX(4px); white-space: nowrap; transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out); }
.svc-toc:hover a .svc-toc__lbl, .svc-toc a.is-active .svc-toc__lbl { opacity: 1; transform: none; }
.svc-toc a.is-active { color: var(--obsidian); border-right-color: var(--svc, var(--rose-brown)); border-right-width: 2px; padding-right: 11px; }
.svc-toc a:hover { color: var(--obsidian); }
@media (prefers-reduced-motion: reduce) { .svc-toc, .svc-toc a, .svc-toc a .svc-toc__lbl { transition: none; } }

.svc-turn { padding: 0 0 clamp(64px, 7vw, 112px); }
.svc-turn__inner {
  max-width: var(--grid-max-w); margin: 0 auto; padding: 0 var(--sp-6);
  display: grid; grid-template-columns: 1fr auto 1fr; column-gap: var(--grid-gutter);
  border-top: 1px solid rgba(75,72,77,0.16); padding-top: var(--sp-5);
}
.svc-turn a { text-decoration: none; color: var(--obsidian); display: flex; flex-direction: column; gap: 6px; }
.svc-turn__k { font-family: var(--font-sans); font-size: 11px; font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--garlic); }
.svc-turn__zh { font-family: var(--font-serif); font-weight: 300; font-size: var(--eds-sub); line-height: var(--lh-snug); transition: color 200ms var(--ease-out); }
.svc-turn__en { font-family: var(--font-didone); font-style: italic; font-size: var(--eds-caption); color: var(--garlic); }
.svc-turn__link--next { text-align: right; align-items: flex-end; }
.svc-turn__all { text-align: center; align-items: center; justify-content: center; padding: 0 var(--sp-4); }
.svc-turn__all .svc-turn__zh { font-size: var(--eds-caption); font-family: var(--font-sans); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--garlic); }
.svc-turn a:hover .svc-turn__zh { color: var(--rose-brown); }
@media (max-width: 768px) {
  .svc-turn__inner { grid-template-columns: 1fr 1fr; row-gap: var(--sp-4); }
  .svc-turn__all { grid-column: 1 / -1; order: 3; border-top: 1px solid rgba(75,72,77,0.08); padding-top: var(--sp-3); }
}

/* —— 手機：中文兩端對齊改齊左（Safari 無 text-justify，避免字距河流）—— */
@media (max-width: 600px) {
  body.vogue .svc-block__body, body.vogue .svc-block__body p, body.vogue .disclaimer .body,
  body.vogue .lede, body.vogue .svc-hero__lede { text-align: start; }
}

/* ============================================================
   字型角色 — 全站單一規則
   Rubik（--font-brand）：字標 + 所有全大寫英文標籤／按鈕
   Noto Sans TC：其餘介面文字 · Noto Serif TC：中文標題內文 · Bodoni Moda：英文數字大字
   ============================================================ */
.eyebrow, .hero__eyebrow, .hero__meta, .svc-hero__crumb, .svc-hero__meta,
.svc-block__eyebrow, .svc-block__side, .svc-quote .attr, .quote-cite, .stat-mv__label,
.footer__col h3, .footer__bottom, .nav__drop-link .en, .svc-card .meta, .svc-card .en,
.pillars__cell .ttl small, .swt-en, .swt-flag, .swt-more, .btn, .nav__cta,
.svc-toc a, .svc-turn__k, .svc-turn__all .svc-turn__zh, .svc-compare thead th, .svc-research th,
.guna__label small, .faq__item summary::before, .vogue-faq__label, .masthead__meta, .masthead__sub,
.svc-compare tbody td[data-label]::before, .disclaimer .tag {
  font-family: var(--font-brand);
}

/* —— 固定班 dl —— */
.svc-class{display:grid;gap:var(--sp-3);margin:0}
.svc-class>div{display:grid;grid-template-columns:5em 1fr;gap:var(--sp-3);padding:var(--sp-3) 0;border-top:1px solid var(--border)}
.svc-class>div:last-child{border-bottom:1px solid var(--border)}
.svc-class dt{font-family:var(--font-sans);font-size:var(--eds-caption);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--garlic);padding-top:.25em}
.svc-class dd{margin:0;font-family:var(--font-serif);font-size:var(--eds-body);line-height:var(--lh-body);color:var(--obsidian)}
.svc-class dd a{color:var(--rose-brown);text-decoration:underline;text-underline-offset:3px}
.svc-class dd a:hover{color:var(--obsidian)}