/* =============================================================
   派遣 AI 長 — 品牌設計 Tokens v2（brand-tokens.css）
   設計語彙:國際管顧編輯部式（serif display、髮絲線、方角、克制）
   品牌色綁 Blocksy 調色盤(--theme-palette-color-*)，改 theme 全站連動。
   RWD 依 Blocksy breakpoint:tablet ≤999.98px、mobile ≤689.98px
   ============================================================= */

:root {
  /* ---- 品牌色:綁 Blocksy 調色盤 ---- */
  --brand-navy: var(--theme-palette-color-1, #2A4C74);
  --brand-sky:  var(--theme-palette-color-2, #37BFF0);
  --brand-ink:  var(--theme-palette-color-3, #3E3A39);
  --brand-gray: #909192;

  /* ---- Navy 階(color-mix 推導,隨 theme 連動) ---- */
  --navy-50:  color-mix(in srgb, var(--brand-navy)  7%, #fff);
  --navy-100: color-mix(in srgb, var(--brand-navy) 15%, #fff);
  --navy-200: color-mix(in srgb, var(--brand-navy) 30%, #fff);
  --navy-300: color-mix(in srgb, var(--brand-navy) 46%, #fff);
  --navy-400: color-mix(in srgb, var(--brand-navy) 70%, #fff);
  --navy-500: var(--brand-navy);
  --navy-600: color-mix(in srgb, var(--brand-navy) 84%, #000);
  --navy-700: color-mix(in srgb, var(--brand-navy) 66%, #000);
  --navy-800: color-mix(in srgb, var(--brand-navy) 50%, #000);
  --navy-900: color-mix(in srgb, var(--brand-navy) 36%, #000);

  /* ---- Sky 階 ---- */
  --sky-50:  color-mix(in srgb, var(--brand-sky) 10%, #fff);
  --sky-100: color-mix(in srgb, var(--brand-sky) 22%, #fff);
  --sky-300: color-mix(in srgb, var(--brand-sky) 76%, #fff);
  --sky-400: var(--brand-sky);
  --sky-600: color-mix(in srgb, var(--brand-sky) 68%, #000);
  --sky-700: color-mix(in srgb, var(--brand-sky) 54%, #000);

  /* ---- 中性階 ---- */
  --ink-50:#F7F7F8; --ink-100:#EDEDEE; --ink-200:#DBDBDC; --ink-300:#C2C3C3;
  --ink-400:#A6A7A8; --ink-500:var(--brand-gray); --ink-600:#717273;
  --ink-700:#555657; --ink-800:var(--brand-ink); --ink-900:#232120;

  /* ---- 背景與線 ---- */
  --bg-base:   var(--theme-palette-color-8, #fff);
  --bg-subtle: #F7F8F9;
  --border-hair:   #E3E4E6;
  --border-base:   #D2D3D5;
  --border-strong: #B9BABC;

  /* ---- 深色區塊 ---- */
  --surface:          var(--navy-800);
  --surface-deep:     var(--navy-900);
  --on-surface:       #F2F5F9;
  --on-surface-muted: #9CB0C6;
  --on-surface-hair:  rgba(255,255,255,.14);

  /* ---- 字體:襯線 display + 無襯線內文(管顧編輯部式) ---- */
  --font-display: "Source Serif 4", "Noto Serif TC", "Songti TC", serif;
  --font-sans: "Inter", "Noto Sans TC", -apple-system, "PingFang TC",
               "Microsoft JhengHei", sans-serif;
  --font-num: "Source Serif 4", "Noto Serif TC", serif;
  --fnum: "tnum" 1, "lnum" 1;
  --theme-font-family: var(--font-sans);

  /* ---- 字級(編輯部級,大標更大) ---- */
  --fs-h1:   clamp(2.5rem, 4.6vw, 4.05rem);   /* 40 → 65px */
  --fs-h2:   clamp(1.9rem, 3.2vw, 2.7rem);    /* 30 → 43px */
  --fs-h3:   clamp(1.35rem, 2vw, 1.65rem);
  --fs-h4:   1.25rem;
  --fs-h5:   1.0625rem;
  --fs-lead: clamp(1.125rem, 1.5vw, 1.3125rem);
  --fs-body: 1.0625rem;
  --fs-sm:   0.9375rem;
  --fs-cap:  0.8125rem;
  --fs-eyebrow: 0.78rem;

  /* ---- 行高(中文襯線大標 1.28-1.3,麥肯錫中文站實測 1.4;正文要鬆) ---- */
  --lh-display: 1.28;   /* 中文襯線大標 */
  --lh-h2: 1.4;
  --lh-snug: 1.5;
  --lh-lead: 1.75;
  --lh-body: 1.95;

  /* ---- 字重/字距 ---- */
  --fw-light:300; --fw-regular:400; --fw-medium:500;
  --fw-semibold:600; --fw-bold:700;
  --ls-display: 0.005em;  /* 中文襯線微張 */
  --ls-caps: 0.14em;      /* 英文 small caps 眉標(McKinsey 實測 .075em,取中) */

  /* ---- 網格與留白(拉大呼吸感) ---- */
  --container-max: 1280px;
  --gutter: 32px;
  --grid-cols: 12;
  --pad-x: clamp(24px, 6vw, 88px);
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px;
  --space-9:96px; --space-10:128px;
  --section-y: clamp(96px, 11vw, 168px);
  --block-gap: clamp(48px, 6vw, 88px);

  /* ---- 方角、幾乎零陰影(管顧式銳利) ---- */
  --radius-0: 0;
  --radius-xs: 2px;
  --radius-pill: 999px;
  --shadow-focus: 0 0 0 3px color-mix(in srgb, var(--brand-sky) 40%, transparent);

  /* ---- 動效(克制精準;管顧站實測入場 0.4s、hover 0.12-0.35s) ---- */
  --ease-out: cubic-bezier(.16,1,.3,1);
  --dur-1:.2s; --dur-2:.45s; --dur-3:.6s; --dur-4:.9s;
  --move: 12px; --stagger: 80ms;
}

@media (max-width: 689.98px) {
  :root { --gutter: 20px; --section-y: clamp(72px, 14vw, 96px); }
}

/* =============================================================
   基礎排版
   ============================================================= */
body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--brand-ink);
  background: var(--bg-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,.h1,h2,.h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-display);
  color: var(--brand-navy);
  text-wrap: balance;
}
h1,.h1 { font-size: var(--fs-h1); line-height: var(--lh-display); }
h2,.h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); }
h3,.h3 { font-family: var(--font-display); font-size: var(--fs-h3);
  line-height: var(--lh-snug); font-weight: var(--fw-semibold);
  color: var(--brand-ink); text-wrap: balance; }
h4,.h4 { font-size: var(--fs-h4); line-height: var(--lh-snug);
  font-weight: var(--fw-semibold); color: var(--brand-ink); }
h5,.h5 { font-size: var(--fs-h5); font-weight: var(--fw-semibold); color: var(--brand-ink); }

.lead { font-size: var(--fs-lead); line-height: var(--lh-lead);
  font-weight: var(--fw-regular); color: var(--ink-700); }
.caption { font-size: var(--fs-cap); line-height: 1.7; color: var(--ink-600); }
p { margin-block: 0 var(--space-4); }

/* 眉標:英文 small caps、寬字距(管顧招牌) */
.eyebrow { font-family: var(--font-sans); font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold); letter-spacing: var(--ls-caps);
  text-transform: uppercase; color: var(--ink-600);
  display: flex; align-items: center; gap: var(--space-4);
  margin: 0 0 var(--space-5); }
.eyebrow::before { content:""; width: 32px; height: 2px;
  background: var(--brand-sky); flex: none; }
.eyebrow--bare::before { display: none; }

/* 標題強調字:唯一允許的顏色點綴 */
h1 em, h2 em, .h1 em, .h2 em {
  font-style: normal; font-weight: var(--fw-semibold); color: var(--sky-600);
}

/* =============================================================
   版面工具
   ============================================================= */
.container { max-width: var(--container-max); margin-inline: auto;
  padding-inline: var(--pad-x); }
.grid-12 { display: grid; grid-template-columns: repeat(var(--grid-cols),1fr);
  column-gap: var(--gutter); }
@media (max-width: 689.98px) { .grid-12 { grid-template-columns: repeat(4,1fr); } }

.section { padding-block: var(--section-y); position: relative; }
.section--subtle { background: var(--bg-subtle); }
.section--dark { background: var(--surface-deep); color: var(--on-surface); }
.section--dark h1,.section--dark h2,.section--dark .h2,
.section--dark h3,.section--dark .h3 { color: #fff; }
.section--dark .lead { color: var(--on-surface-muted); }
.section--dark .caption { color: var(--on-surface-muted); }
.section--dark .eyebrow { color: var(--on-surface-muted); }
.section--dark .eyebrow::before { background: var(--sky-400); }

.rule-hair { border: 0; border-top: 1px solid var(--border-hair); margin: 0; }
.section--dark .rule-hair { border-color: var(--on-surface-hair); }

/* =============================================================
   元件:方角、髮絲線、無陰影
   ============================================================= */
.btn { display: inline-flex; align-items: center; justify-content: center;
  gap: 10px; padding: 16px 34px; border-radius: var(--radius-xs);
  font-family: var(--font-sans); font-weight: var(--fw-medium);
  font-size: var(--fs-sm); letter-spacing: .04em;
  cursor: pointer; text-decoration: none; border: 1px solid transparent;
  transition: background var(--dur-1) var(--ease-out),
              color var(--dur-1) var(--ease-out),
              border-color var(--dur-1) var(--ease-out); }
.btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.btn .icon { transition: transform var(--dur-1) var(--ease-out); }
.btn:hover .icon { transform: translateX(5px); }

.btn--primary { background: var(--brand-navy); color: #fff; }
.btn--primary:hover { background: var(--navy-700); color: #fff; }
.btn--outline { background: transparent; color: var(--brand-navy);
  border-color: var(--border-strong); }
.btn--outline:hover { border-color: var(--brand-navy); }
.btn--ghost { background: transparent; color: var(--brand-navy);
  padding-inline: 4px; border: 0; font-weight: var(--fw-semibold); }
.btn--ghost:hover { color: var(--sky-600); }

/* 深底/照片上的按鈕 */
.section--dark .btn--primary, .on-photo .btn--primary {
  background: #fff; color: var(--navy-900); }
.section--dark .btn--primary:hover, .on-photo .btn--primary:hover {
  background: var(--sky-100); color: var(--navy-900); }
.section--dark .btn--outline, .on-photo .btn--outline {
  color: #fff; border-color: rgba(255,255,255,.45); }
.section--dark .btn--outline:hover, .on-photo .btn--outline:hover {
  border-color: #fff; color: #fff; }
.section--dark .btn--ghost { color: var(--on-surface); }

/* 文字箭頭連結 */
.link-arrow { display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  letter-spacing: .03em; color: var(--brand-navy); text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--dur-1) var(--ease-out); }
.link-arrow .icon { width: 18px; height: 18px;
  transition: transform var(--dur-1) var(--ease-out); }
.link-arrow:hover { color: var(--sky-600); }
.link-arrow:hover .icon { transform: translateX(5px); }
.section--dark .link-arrow { color: var(--on-surface); }
.section--dark .link-arrow:hover { color: var(--sky-300); }

/* 大數字(襯線、細) */
.stat__num { font-family: var(--font-num); font-feature-settings: var(--fnum);
  font-size: clamp(3.4rem, 7vw, 5.6rem); font-weight: var(--fw-light);
  line-height: 1; color: var(--brand-navy); letter-spacing: -0.01em; }
.stat__num .unit { font-size: .34em; font-weight: var(--fw-regular);
  font-family: var(--font-sans); color: var(--ink-600); margin-left: 8px; }
.stat__label { font-size: var(--fs-sm); color: var(--ink-700);
  margin-top: var(--space-3); line-height: 1.7; }
.section--dark .stat__num { color: #fff; }
.section--dark .stat__num .unit { color: var(--sky-400); }
.section--dark .stat__label { color: var(--on-surface-muted); }

.icon { width: 20px; height: 20px; stroke: currentColor; stroke-width: 1.5;
  fill: none; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* =============================================================
   Header 選單品牌化
   ============================================================= */
li.menu-cta > a {
  background: var(--brand-navy); color: #fff !important;
  border-radius: var(--radius-xs); padding: 10px 24px !important;
  font-weight: var(--fw-medium); letter-spacing: .04em;
  transition: background var(--dur-1) var(--ease-out); }
li.menu-cta > a:hover { background: var(--navy-700); color: #fff !important; }
li.menu-cta > a::before, li.menu-cta > a::after { display: none !important; }

/* 無障礙:尊重減動偏好 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important;
    animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}