@charset "utf-8";
/* ==========================================================================
   時起法律事務所 官方網站 — 設計系統 v2
   方向：冷調單色 + 細直線網格 + 圓角浮卡 + 左側固定直欄
   刻意拿掉：暖金漸層、紙紋材質、法律道具照、滿版壓暗 hero
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  /* 中性墨階（冷調，最深不到純黑） */
  --ink-950: #131313;
  --ink-900: #171717;
  --ink-850: #1C1C1C;
  --ink-800: #212121;
  --ink-700: #2B2B2B;
  --ink-600: #363636;
  --line-d:  rgba(255,255,255,.10);
  --line-d2: rgba(255,255,255,.16);

  /* 淺色區塊 */
  --paper:   #F1F0EE;
  --paper-2: #FFFFFF;
  --paper-3: #E9E7E4;
  --line-l:  #E2E0DC;
  --line-l2: #D3D0CB;

  /* 文字 */
  --ink:   #1A1A1A;   /* 淺底主文字 */
  --muted: #6B6966;   /* 淺底次要 */
  --faint: #9C9995;   /* 淺底輔助 */
  --cream: #EDECEA;   /* 深底主文字 */
  --dim:   #A5A29E;   /* 深底次要 */
  --dust:  #77746F;   /* 深底輔助 */

  /* 唯一重音色（面積刻意極小：編號、按鈕、hover 底線） */
  --accent:     #C2A36B;
  --accent-lit: #D8BE8E;

  /* 版面 */
  --rail: 88px;                       /* 左側固定直欄 */
  --wrap: 1360px;
  --wrap-mid: 980px;
  --wrap-narrow: 760px;
  --gut: clamp(20px, 3vw, 44px);
  --nav-h: 84px;
  --nav-h-sm: 64px;

  --r:    14px;
  --r-lg: 22px;

  --s1: 8px;  --s2: 16px; --s3: 24px; --s4: 32px;
  --s5: 48px; --s6: 64px; --s7: 96px; --s8: 128px;

  --ease: cubic-bezier(.22, .61, .36, 1);

  --f-serif: "Noto Serif TC", "Source Han Serif TC", serif;
  --f-sans:  "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  --f-en:    "Oswald", "Noto Sans TC", sans-serif;
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html {
  scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden;
  /* 內容比視窗短時，頁尾以下要接深色，不能露出淺色紙底 */
  background: var(--ink-950);
}
body {
  font-family: var(--f-sans);
  font-size: 16px;
  line-height: 1.9;
  letter-spacing: .02em;
  color: var(--ink);
  background: var(--paper);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  padding-left: var(--rail);
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }
::selection { background: var(--ink); color: var(--paper); }

@media (min-width: 900px) {
  ::-webkit-scrollbar { width: 9px; }
  ::-webkit-scrollbar-track { background: var(--paper-3); }
  ::-webkit-scrollbar-thumb { background: var(--line-l2); }
  ::-webkit-scrollbar-thumb:hover { background: var(--muted); }
}

/* ---------- 3. 骨架 ---------- */
.wrap        { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
.wrap-mid    { width: 100%; max-width: calc(var(--wrap-mid) + var(--gut)*2); margin-inline: auto; padding-inline: var(--gut); }
.wrap-narrow { width: 100%; max-width: calc(var(--wrap-narrow) + var(--gut)*2); margin-inline: auto; padding-inline: var(--gut); }

section { position: relative; }
/* 頁內錨點（選單的「關於時起」指向首頁 #about）要避開固定導覽列 */
section[id] { scroll-margin-top: calc(var(--nav-h) + 16px); }

.sec { padding-block: clamp(64px, 7.5vw, 120px); }
.sec--tight { padding-block: clamp(48px, 5.5vw, 80px); }
.sec + .sec.same { padding-top: 0; }

.on-dark { background: var(--ink-850); color: var(--cream); }
.on-dark--900 { background: var(--ink-900); color: var(--cream); }
.on-dark--950 { background: var(--ink-950); color: var(--cream); }
.on-light { background: var(--paper); color: var(--ink); }

/* 區塊靠底色深淺交替分段，不加任何材質或格線 */
.rules > * { position: relative; z-index: 1; }

@media (max-width: 860px) {
  .hero { padding-bottom: 96px; }
  .hero-bg::after {
    background: linear-gradient(180deg, rgba(19,19,19,.84) 0%, rgba(19,19,19,.64) 30%, rgba(19,19,19,.93) 78%, rgba(19,19,19,.98) 100%);
  }
  .hero-actions .btn { width: 100%; }
}

/* ---------- 4. 字級 ---------- */
.eyebrow {
  font-family: var(--f-en);
  font-size: 12px; font-weight: 300;
  letter-spacing: .42em; text-transform: uppercase;
  color: var(--accent);
  display: flex; align-items: center; gap: 14px;
  margin-bottom: var(--s3);
}
/* 英文小標左右兩側都要有短線 */
.eyebrow::before,
.eyebrow::after {
  content: ""; flex: 0 0 26px; height: 1px; background: var(--accent); opacity: .6;
}
.eyebrow--center { justify-content: center; }

.h-display {
  font-family: var(--f-sans); font-weight: 300;
  font-size: clamp(30px, 4.6vw, 60px);
  line-height: 1.28; letter-spacing: .01em;
}
.h-sec {
  font-family: var(--f-sans); font-weight: 300;
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1.38; letter-spacing: .02em;
}
.h-card {
  font-family: var(--f-sans); font-weight: 500;
  font-size: 21px; line-height: 1.5; letter-spacing: .03em;
}
.lede { font-size: 16px; line-height: 2.05; color: var(--muted); }
.on-dark .lede, .on-dark--900 .lede, .on-dark--950 .lede, .hero .lede { color: var(--dim); }
.quote {
  font-family: var(--f-serif); font-weight: 400;
  font-size: 17.5px; line-height: 1.95; letter-spacing: .015em;
  padding-left: 20px; border-left: 2px solid var(--accent);
  margin: var(--s4) 0;
}
.sec-head { max-width: 760px; margin-bottom: clamp(40px, 4.5vw, 64px); }
.sec-head--center { margin-inline: auto; text-align: center; }
.sec-head--center .eyebrow { justify-content: center; }
.nb { white-space: nowrap; }

/* ---------- 5. 按鈕 / 連結 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 52px; padding: 0 30px;
  font-size: 15px; font-weight: 500; letter-spacing: .06em;
  border: 1px solid currentColor; border-radius: 999px;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
  white-space: nowrap;
}
.btn--sm { height: 42px; padding: 0 22px; font-size: 13.5px; }
/* 按鈕裡的圖示（目前是 LINE）跟著文字色走 */
.btn svg { width: 17px; height: 17px; fill: currentColor; flex: 0 0 auto; }
.btn--sm svg { width: 15px; height: 15px; }
/* 平常一律只有框線，滑到誰身上誰才填土金色 */
.btn--solid { color: var(--accent); border-color: var(--accent); background: transparent; }
.btn--ghost { color: inherit; border-color: currentColor; opacity: .85; background: transparent; }
.btn--solid:hover, .btn--ghost:hover,
.btn--solid:focus-visible, .btn--ghost:focus-visible {
  opacity: 1; background: var(--accent); border-color: var(--accent); color: var(--ink-950);
}

.link-more {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 14px; letter-spacing: .1em; color: inherit;
  padding-bottom: 4px; border-bottom: 1px solid var(--accent);
  transition: gap .3s var(--ease);
}
.link-more span { color: var(--accent); }
.link-more:hover { gap: 16px; }

/* ---------- 6. 左側固定直欄（改版最明顯的辨識點） ---------- */
.rail {
  position: fixed; left: 0; top: 0; bottom: 0; width: var(--rail); z-index: 70;
  background: var(--ink-950); border-right: 1px solid var(--line-d);
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  padding: 20px 0 24px;
}
.rail-mark { display: block; }
.rail-mark img { width: 26px; opacity: .95; }
.rail-vert {
  writing-mode: vertical-rl; text-orientation: mixed;
  font-family: var(--f-en); font-size: 11px; font-weight: 300;
  letter-spacing: .48em; text-transform: uppercase; color: var(--dust);
}
.rail-social { display: flex; flex-direction: column; gap: 18px; }
.rail-social a { color: var(--dust); transition: color .25s var(--ease); }
.rail-social a:hover { color: var(--accent); }
.rail-social svg { width: 21px; height: 21px; fill: currentColor; }

/* ---------- 7. 導覽列 ---------- */
.hdr {
  position: fixed; top: 0; left: var(--rail); right: 0; z-index: 60;
  height: var(--nav-h);
  transition: background .35s var(--ease), border-color .35s var(--ease), height .35s var(--ease);
  border-bottom: 1px solid transparent;
}
.hdr .wrap { height: 100%; display: flex; align-items: center; gap: var(--s4); }
.hdr.is-stuck {
  background: rgba(19,19,19,.94); backdrop-filter: blur(10px);
  border-bottom-color: var(--line-d); height: 68px;
}
.brand { display: flex; align-items: center; gap: 12px; color: var(--cream); }
.brand-zh {
  display: block; font-family: var(--f-serif); font-weight: 500;
  font-size: 18px; letter-spacing: .2em; line-height: 1.2;
}
.brand-en {
  display: block; font-family: var(--f-en); font-weight: 300;
  font-size: 10.5px; letter-spacing: .34em; line-height: 1.2;
  margin-top: 3px; color: var(--dust);
}

/* 靠右的是 <nav> 這個 flex 子元素，auto margin 掛在裡面的 ul 上不會生效 */
.hdr nav { margin-left: auto; }
.nav { display: flex; align-items: center; gap: clamp(18px, 2.2vw, 34px); }
.nav-link {
  position: relative; font-size: 15px; letter-spacing: .1em; color: var(--cream);
  padding-block: 6px;
}
.nav-en, .nav-foot { display: none; }
.nav-link::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 1px;
  background: var(--accent); transition: width .3s var(--ease);
}
.nav-link:hover::after, .is-current > .nav-link::after { width: 100%; }
.hdr-cta { margin-left: clamp(14px, 1.6vw, 26px); }

.burger { display: none; width: 40px; height: 40px; margin-left: auto; }
.burger span { display: block; width: 22px; height: 1px; background: var(--cream); margin: 5px auto; transition: .3s var(--ease); }

@media (max-width: 1150px) {
  .hdr { background: rgba(19,19,19,.94); border-bottom-color: var(--line-d); height: var(--nav-h); }
}


/* ---------- 8. Hero ---------- */
.hero {
  position: relative; min-height: min(92vh, 860px);
  display: flex; align-items: flex-end;
  padding-top: calc(var(--nav-h) + 40px); padding-bottom: 128px;
  background: var(--ink-950); overflow: hidden;
}
.hero-bg { position: absolute; inset: 0; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(19,19,19,.74) 0%, rgba(19,19,19,.30) 32%, rgba(19,19,19,.86) 78%, rgba(19,19,19,.96) 100%),
    linear-gradient(90deg, rgba(19,19,19,.66) 0%, rgba(19,19,19,.30) 48%, transparent 78%);
}
.hero .wrap { position: relative; z-index: 3; }
.hero .eyebrow { color: var(--accent-lit); }
.hero .eyebrow::before { background: var(--accent-lit); }
.hero-inner { max-width: 780px; }
.hero .h-display { color: #fff; }
.hero .h-display .l { display: block; }
.hero-sub { margin-top: var(--s4); max-width: 620px; color: rgba(237,236,234,.82); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: var(--s5); }
.hero-actions .btn--ghost { color: #fff; }

.hero-index {
  position: absolute; right: var(--gut); bottom: 128px; z-index: 3;
  display: flex; align-items: center; gap: 12px;
  font-family: var(--f-en); font-size: 12px; letter-spacing: .4em; color: var(--dim);
  writing-mode: vertical-rl;
}
@media (max-width: 1080px) { .hero-index { display: none; } }

/* ---------- 9. 浮起的數字卡（跨在 hero 與下一段交界） ---------- */
.stats { background: var(--paper); }
.stats .wrap { transform: translateY(-72px); margin-bottom: -40px; }
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.stat {
  background: var(--paper-2); border: 1px solid var(--line-l); border-radius: var(--r-lg);
  padding: 30px 30px 26px; min-height: 168px;
  display: flex; flex-direction: column; justify-content: space-between;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.stat:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,0,0,.08); }
.stat--dark { background: var(--ink-900); border-color: var(--ink-900); color: var(--cream); }
.stat-n {
  font-family: var(--f-en); font-weight: 300;
  font-size: clamp(34px, 3.6vw, 50px); line-height: 1.05; letter-spacing: .01em;
}
.stat--dark .stat-n { color: #fff; }
.stat-n small { font-family: var(--f-sans); font-size: 15px; letter-spacing: .1em; margin-left: 8px; color: var(--muted); }
.stat--dark .stat-n small { color: var(--dim); }
.stat-t { font-size: 13.5px; letter-spacing: .14em; color: var(--faint); }
.stat--dark .stat-t { color: var(--dust); }
.stat-tag {
  align-self: flex-start; font-family: var(--f-en); font-size: 11px; letter-spacing: .3em;
  text-transform: uppercase; color: var(--accent);
  border: 1px solid var(--line-l); border-radius: 999px; padding: 5px 14px;
}
.stat--dark .stat-tag { border-color: var(--line-d2); }

@media (max-width: 860px) {
  .stats .wrap { transform: translateY(-48px); margin-bottom: -24px; }
  .stat-grid { grid-template-columns: 1fr; gap: 12px; }
  .stat { min-height: 0; padding: 24px; }
}

/* ---------- 10. 關於 ---------- */
.about-grid { display: grid; grid-template-columns: 1fr 1.12fr; gap: clamp(40px, 4.5vw, 80px); align-items: center; }
.about-fig { position: relative; }
.about-fig img { border-radius: var(--r-lg); }
@media (max-width: 860px) {
  .about-grid { grid-template-columns: 1fr; }
}

/* ---------- 11. 服務（深底描邊卡） ---------- */
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.svc {
  display: flex; flex-direction: column;
  border: 1px solid var(--line-d); border-radius: var(--r-lg);
  padding: 34px 30px 30px; background: rgba(255,255,255,.015);
  transition: border-color .35s var(--ease), background .35s var(--ease), transform .35s var(--ease);
}
.svc:hover { border-color: var(--accent); background: rgba(255,255,255,.04); transform: translateY(-4px); }
.svc-no { font-family: var(--f-en); font-size: 13px; letter-spacing: .3em; color: var(--accent); }
.svc .h-card { margin: 12px 0 20px; color: var(--cream); }
.svc-rule { height: 1px; border: 0; background: var(--line-d); margin-bottom: 20px; }
.svc ul { display: flex; flex-wrap: wrap; gap: 8px 10px; margin-bottom: 26px; }
.svc .link-more { margin-top: auto; align-self: flex-start; }
.svc li {
  font-size: 13.5px; letter-spacing: .06em; color: var(--dim);
  border: 1px solid var(--line-d); border-radius: 999px; padding: 4px 12px;
}
.svc .link-more { color: var(--cream); }
@media (max-width: 980px) { .svc-grid { grid-template-columns: 1fr; } }

/* ---------- 12. 主持律師 ---------- */
.lawyer-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.lawyer-fig { position: relative; }
.lawyer-fig img { width: 100%; }
.lawyer-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.lawyer-title .org { display: block; width: 100%; font-size: 14.5px; letter-spacing: .2em; color: var(--dim); margin-bottom: 10px; }
.lawyer-title .name { font-size: clamp(34px, 3.4vw, 46px); font-weight: 300; letter-spacing: .1em; color: #fff; }
.lawyer-title .suffix { font-size: 18px; letter-spacing: .16em; color: var(--dim); }
.lawyer-rule { height: 1px; border: 0; background: var(--line-d); margin: 28px 0; }
/* 兩欄用內容寬度就好；用 1fr 均分的話兩欄會被推到容器兩端，中間空一大截 */
.cv { display: grid; grid-template-columns: max-content max-content; gap: 2px 52px; justify-content: start; }
.cv li {
  position: relative; padding-left: 22px; font-size: 16.5px; line-height: 2.2; color: var(--cream);
}
.cv li::before { content: ""; position: absolute; left: 0; top: 15px; width: 8px; height: 1px; background: var(--accent); }
@media (max-width: 860px) {
  .lawyer-grid { grid-template-columns: 1fr; }
  .lawyer-fig { max-width: 320px; }
  .cv { grid-template-columns: 1fr; }
}

/* ---------- 13. 案例卡（編輯式，靠排版與資訊密度，不靠縮圖） ---------- */
.sec-head-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: clamp(36px, 4vw, 56px); }
.sec-head-row .sec-head { margin-bottom: 0; }
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.card {
  position: relative; display: flex; flex-direction: column; gap: 14px;
  background: var(--paper-2); border: 1px solid var(--line-l); border-radius: var(--r-lg);
  padding: 30px 28px 32px; overflow: hidden;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.card::before {
  content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 2px;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform .45s var(--ease);
}
.card:hover { transform: translateY(-5px); box-shadow: 0 18px 44px rgba(0,0,0,.09); border-color: var(--line-l2); }
.card:hover::before { transform: scaleX(1); }
.card-meta { display: flex; align-items: center; gap: 12px; }
.card-meta .tag {
  font-size: 12px; letter-spacing: .16em;
  background: var(--ink-900); color: #fff; border-radius: 999px; padding: 4px 13px;
}
.card-date { font-family: var(--f-en); font-size: 12px; letter-spacing: .22em; color: var(--faint); }
.card h3 { font-size: 19px; font-weight: 500; line-height: 1.62; letter-spacing: .02em; min-height: calc(19px * 1.62 * 2); }
.card .result {
  font-family: var(--f-en); font-size: 12px; letter-spacing: .28em; text-transform: uppercase;
  color: var(--accent);
}
.card-rule { height: 1px; border: 0; background: var(--line-l); }
.card p {
  font-size: 14.5px; line-height: 1.95; color: var(--muted);
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.card .go { margin-top: auto; padding-top: 8px; font-size: 13.5px; letter-spacing: .14em; color: var(--ink); }
.card .go span { color: var(--accent); margin-left: 8px; }
@media (max-width: 980px) { .card-grid { grid-template-columns: 1fr; } }

/* ---------- 14. 收費 ---------- */
.on-light--white { background: var(--paper-2); border-block: 1px solid var(--line-l); }
.fee-band { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.fee-figure {
  background: var(--paper); border: 1px solid var(--line-l); border-radius: var(--r-lg);
  padding: 36px 34px;
}
.fee-figure .k { font-size: 13.5px; letter-spacing: .2em; color: var(--faint); }
.fee-figure .v {
  font-family: var(--f-en); font-weight: 300; font-size: clamp(56px, 6vw, 84px);
  line-height: 1.05; margin: 10px 0 6px; color: var(--ink);
}
.fee-figure .v small { font-family: var(--f-sans); font-size: 17px; letter-spacing: .1em; margin-left: 10px; color: var(--muted); }
.fee-note { font-size: 13.5px; letter-spacing: .1em; color: var(--faint); }
.fee-rule { height: 1px; border: 0; background: var(--line-l); margin: 24px 0; }
.pay-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.pay-list li {
  font-size: 13px; letter-spacing: .08em; color: var(--muted);
  border: 1px solid var(--line-l); border-radius: 999px; padding: 4px 13px;
}
@media (max-width: 860px) { .fee-band { grid-template-columns: 1fr; } }

/* ---------- 15. 據點 ---------- */
.office-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.office {
  background: var(--paper-2); border: 1px solid var(--line-l); border-radius: var(--r-lg);
  padding: 34px 32px; transition: border-color .35s var(--ease), transform .35s var(--ease);
}
.office:hover { border-color: var(--line-l2); transform: translateY(-3px); }
.office .city { font-family: var(--f-en); font-size: 12px; letter-spacing: .36em; color: var(--accent); }
.office h3 { font-size: 24px; font-weight: 400; letter-spacing: .12em; margin: 8px 0 18px; }
.office dl { display: grid; grid-template-columns: 56px 1fr; gap: 6px 12px; font-size: 15px; }
.office dt { color: var(--faint); letter-spacing: .1em; }
.office dd { color: var(--muted); }
.office .link-more { margin-top: 22px; }
@media (max-width: 720px) { .office-grid { grid-template-columns: 1fr; } }

/* ---------- 16. CTA 帶 ---------- */
.cta-band {
  position: relative; overflow: hidden; text-align: center;
  background: var(--ink-950); color: var(--cream);
  padding-block: clamp(96px, 10vw, 160px);
}
.cta-band .cta-bg { position: absolute; inset: 0; }
.cta-band .cta-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .34; }
.cta-band .cta-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(19,19,19,.72), rgba(19,19,19,.90));
}
.cta-band .wrap { position: relative; z-index: 3; }
.cta-band .h-sec { color: #fff; margin-bottom: var(--s3); }
.cta-band .lede { margin-inline: auto; max-width: 640px; color: rgba(255,255,255,.80); }
.cta-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; margin-top: var(--s5); }
.cta-band .btn--ghost { color: #fff; }

/* ---------- 17. 頁尾 ---------- */
.ftr { background: var(--ink-950); color: var(--dim); padding-top: clamp(56px, 6vw, 88px); border-top: 1px solid var(--line-d); }
.ftr-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.6fr; gap: clamp(28px, 3.5vw, 56px); }
.ftr-brand img { width: 132px; opacity: .9; margin: 25px 0 0 10px; }
.ftr .social { display: flex; gap: 14px; margin-top: 22px; }
.ftr .social a { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--line-d); border-radius: 50%; color: var(--dim); transition: .3s var(--ease); }
.ftr .social a:hover { border-color: var(--accent); color: var(--accent); }
.ftr .social svg { width: 15px; height: 15px; fill: currentColor; }
.ftr h4 { font-family: var(--f-en); font-size: 12px; font-weight: 300; letter-spacing: .32em; text-transform: uppercase; color: var(--accent); margin-bottom: 18px; }
.ftr-nav li, .ftr-contact li { font-size: 14.5px; line-height: 2.1; }
.ftr-nav a:hover, .ftr-contact a:hover { color: var(--accent); }
.ftr-bot {
  margin-top: clamp(40px, 4vw, 64px); padding: 22px 0 26px;
  border-top: 1px solid var(--line-d);
  display: flex; justify-content: center; gap: 16px; flex-wrap: wrap;
  text-align: center;
  font-size: 12.5px; letter-spacing: .06em; color: var(--dust);
}
@media (max-width: 980px) { .ftr-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .ftr-top { grid-template-columns: 1fr; } }

/* ---------- 18. 浮動 CTA / 手機底部 bar ---------- */
.dock { position: fixed; right: 20px; bottom: 24px; z-index: 55; display: flex; flex-direction: column; gap: 10px; }
.dock-btn {
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  background: var(--ink-900); border: 1px solid var(--line-d2); color: var(--cream);
  transition: .3s var(--ease); position: relative;
}
.dock-btn:hover { background: var(--accent); border-color: var(--accent); color: var(--ink-950); }
.dock-btn svg { width: 20px; height: 20px; fill: currentColor; }
.dock-btn .lbl {
  position: absolute; right: 58px; top: 50%; transform: translateY(-50%);
  white-space: nowrap; font-size: 13px; letter-spacing: .08em;
  background: var(--ink-900); color: var(--cream); border: 1px solid var(--line-d);
  border-radius: 999px; padding: 6px 14px; opacity: 0; pointer-events: none; transition: .25s var(--ease);
}
.dock-btn:hover .lbl { opacity: 1; }

@media (max-width: 860px) {
  body { padding-left: 0; }
  .rail { display: none; }
  .hdr { left: 0; }
  /* 手機不做底部固定 bar，沿用右側懸浮鈕，只是尺寸收一點 */
  .dock { right: 14px; bottom: 18px; gap: 10px; }
  .dock-btn { width: 46px; height: 46px; }
  .dock-btn svg { width: 19px; height: 19px; }
  .dock-btn .lbl { display: none; }
}
@media (max-width: 1279px) and (min-width: 861px) {
  :root { --rail: 64px; }
  .rail-vert { font-size: 10px; letter-spacing: .38em; }
}

/* ---------- 19. 進場動效 ---------- */
.rv { opacity: 0; transform: translateY(20px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.rv.in { opacity: 1; transform: none; }
.rv-d1 { transition-delay: .1s; }
.rv-d2 { transition-delay: .2s; }
.rv-d3 { transition-delay: .3s; }
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ==========================================================================
   內頁元件 —— 全部改用 v2 色票（冷調中性墨階 + 淺灰紙底，無材質無格線）
   ========================================================================== */

/* ---------- A. 舊 class 相容 ---------- */
/* 版型片段還在用這些名字，這裡直接接到 v2 的視覺，不必逐頁改 markup */
.tex::before { content: none; }              /* 紙紋已廢除 */
.bg-800 { background: var(--ink-800); color: var(--cream); }
.bg-850 { background: var(--ink-850); color: var(--cream); }
.bg-950 { background: var(--ink-950); color: var(--cream); }
.bg-800 .lede, .bg-850 .lede, .bg-950 .lede { color: var(--dim); }
.sec--flush-b { padding-bottom: clamp(24px, 2.6vw, 36px); }
.hairline { height: 1px; border: 0; background: var(--line-l); }
.bg-800 .hairline, .bg-850 .hairline, .bg-950 .hairline,
.on-dark .hairline, .on-dark--900 .hairline, .on-dark--950 .hairline { background: var(--line-d); }
.btn--gold { color: var(--accent); border-color: var(--accent); background: transparent; }
.btn--gold:hover, .btn--gold:focus-visible {
  background: var(--accent); border-color: var(--accent); color: var(--ink-950);
}
.rose-text { color: var(--accent); }
.brand-txt { display: block; }
.cv--tight li { line-height: 2.1; }

/* ---------- B. 導覽列下拉 ---------- */
.has-sub { position: relative; }
.sub {
  position: absolute; top: 100%; left: 50%; transform: translate(-50%, 8px);
  min-width: 156px; padding: 6px 0; border-radius: var(--r);
  background: rgba(19,19,19,.97); border: 1px solid var(--line-d);
  backdrop-filter: blur(10px);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .26s var(--ease), transform .26s var(--ease), visibility .26s;
}
.has-sub:hover .sub, .has-sub:focus-within .sub {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0);
}
.sub a {
  display: block; padding: 10px 22px; font-size: 14.5px; letter-spacing: .1em;
  color: var(--dim); white-space: nowrap;
  transition: color .22s, background .22s, padding-left .22s var(--ease);
}
.sub a:hover { color: var(--accent); background: rgba(255,255,255,.05); padding-left: 28px; }

/* 漢堡選單（沿用 site.js 的 body.nav-open） */
.burger { width: 44px; height: 44px; position: relative; }
.burger span {
  position: absolute; left: 10px; width: 24px; height: 1.5px; background: var(--cream); margin: 0;
  transition: transform .35s var(--ease), opacity .2s;
}
.burger span:nth-child(1) { top: 16px; }
.burger span:nth-child(2) { top: 22px; }
.burger span:nth-child(3) { top: 28px; }
body.nav-open .burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.nav-open .burger span:nth-child(2) { opacity: 0; }
body.nav-open .burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* 七個中文選項＋按鈕約需 1150px，比版面更早換漢堡 */
@media (max-width: 1150px) {
  :root { --nav-h: 68px; --nav-h-sm: 60px; }
  /* backdrop-filter 會讓 .hdr 變成 fixed 子元素的包含區塊，
     捲動後掛上 is-stuck，側選單就被裁成導覽列的高度、只剩第一項。
     手機的導覽列底色本來就近乎不透明，拿掉模糊沒有差別。 */
  .hdr, .hdr.is-stuck { backdrop-filter: none; }
  .burger { display: block; }
  .hdr-cta { display: none; }
  .hdr nav { margin-left: auto; }
  .nav {
    position: fixed; inset: var(--nav-h) 0 0 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: rgba(19,19,19,.985); backdrop-filter: blur(16px); color: var(--cream);
    padding: var(--s2) var(--gut) 48px; overflow-y: auto; overscroll-behavior: contain;
    clip-path: inset(0 0 100% 0); transition: clip-path .55s var(--ease);
  }
  body.nav-open { overflow: hidden; }
  body.nav-open .nav { clip-path: inset(0 0 0 0); }
  .nav > li { border-bottom: 1px solid var(--line-d); }
  .nav > li.nav-foot { border-bottom: 0; }
  .nav a.nav-link {
    display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
    padding: 14px 2px; border-bottom: 0;
  }
  .nav a.nav-link::after { display: none; }
  .nav .nav-zh { font-family: var(--f-serif); font-size: 15px; font-weight: 500; letter-spacing: .14em; }
  .nav .nav-en {
    display: block; font-family: var(--f-en); font-size: 11px; font-weight: 300;
    letter-spacing: .32em; text-transform: uppercase; color: var(--dust);
  }
  .nav > li.is-current .nav-zh { color: var(--accent); }
  .nav > li.is-current .nav-en { color: var(--accent); opacity: .7; }
  /* 子項目做成小膠囊，跟全站的標籤語彙一致，不要擠成一排文字 */
  .sub {
    position: static; transform: none; opacity: 1; visibility: visible; pointer-events: auto;
    min-width: 0; border: 0; background: transparent; backdrop-filter: none;
    display: flex; flex-wrap: wrap; gap: 8px; padding: 0 2px 16px;
  }
  .sub a {
    padding: 5px 13px; font-size: 12.5px; letter-spacing: .08em;
    color: var(--dim); border: 1px solid var(--line-d); border-radius: 999px;
  }
  .sub a:hover { padding: 5px 13px; background: transparent; border-color: var(--accent); color: var(--accent); }
  /* 選單底部的聯絡入口 */
  .nav-foot { display: block; padding-top: 22px; }
  .nav-social { display: flex; gap: 14px; }
  .nav-social a {
    width: 40px; height: 40px; display: grid; place-items: center;
    border: 1px solid var(--line-d); border-radius: 50%; color: var(--dim);
    transition: border-color .3s var(--ease), color .3s var(--ease);
  }
  .nav-social a:hover { border-color: var(--accent); color: var(--accent); }
  .nav-social svg { width: 17px; height: 17px; fill: currentColor; }
}

/* ---------- C. 內頁頁首 ---------- */
/* 導覽列在頂端是透明的，所以內頁頁首一律深底，白字才看得見 */
.phero {
  position: relative; overflow: hidden;
  background: var(--ink-950); color: var(--cream);
  padding-top: calc(var(--nav-h) + clamp(48px, 7vw, 92px));
  padding-bottom: clamp(40px, 6vw, 76px);
}
.phero::before {
  content: ""; position: absolute; inset: 0;
  background: url("../img/v2/hero-court.webp") center/cover no-repeat;
  opacity: .34;
}
.phero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(19,19,19,.90), rgba(19,19,19,.76) 55%, var(--ink-950));
}
.phero .wrap, .phero .wrap-mid, .phero .wrap-narrow { position: relative; z-index: 2; }
.phero h1 { font-weight: 300; font-size: clamp(27px, 3.2vw, 40px); line-height: 1.4; letter-spacing: .02em; }
.phero .lede { margin-top: var(--s2); max-width: 60ch; color: var(--dim); }
.phero .cta-actions { justify-content: flex-start; }

.crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: var(--s3); }
.crumb li, .crumb a { font-size: 13.5px; letter-spacing: .08em; color: var(--dust); }
.crumb a:hover { color: var(--accent); }
.crumb li + li::before { content: "／"; margin-right: 8px; color: var(--ink-600); }
.crumb li:last-child { color: var(--dim); }

/* ---------- D. 分類切換與小標 ---------- */
.filter-bar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: clamp(32px, 4vw, 56px); }
.filter-bar a {
  font-size: 14.5px; letter-spacing: .1em; padding: 9px 22px; border-radius: 999px;
  border: 1px solid var(--line-l); color: var(--muted);
  transition: color .3s, border-color .3s, background .3s;
}
.filter-bar a:hover, .filter-bar a.on { color: var(--ink); border-color: var(--accent); background: rgba(194,163,107,.12); }
.bg-850 .filter-bar a, .bg-950 .filter-bar a, .on-dark .filter-bar a { border-color: var(--line-d); color: var(--dim); }
.bg-850 .filter-bar a.on, .bg-950 .filter-bar a.on, .on-dark .filter-bar a.on { color: var(--accent); border-color: var(--accent); background: rgba(194,163,107,.10); }

.cat-head {
  display: flex; align-items: baseline; gap: 16px;
  margin: clamp(40px, 5vw, 72px) 0 var(--s4);
  scroll-margin-top: calc(var(--nav-h) + 24px);
}
.cat-head:first-of-type { margin-top: 0; }
.cat-head h2 { font-weight: 400; font-size: clamp(21px, 2.2vw, 27px); letter-spacing: .04em; }
.cat-head span { font-family: var(--f-en); font-size: 12.5px; letter-spacing: .26em; color: var(--accent); }
.cat-head::after { content: ""; flex: 1; height: 1px; background: var(--line-l); }
.bg-850 .cat-head::after, .bg-950 .cat-head::after, .on-dark .cat-head::after { background: var(--line-d); }

/* ---------- E. 文章／案例內頁 ---------- */
.sec--post {
  position: relative; overflow: hidden;
  background: var(--ink-950);
  padding-top: calc(var(--nav-h) + clamp(28px, 3.6vw, 56px));
  padding-bottom: clamp(48px, 6vw, 88px);
}
.sec--post::before {
  content: ""; position: absolute; inset: 0;
  background: url("../img/v2/hero-court.webp") center/cover no-repeat;
  opacity: .26;
}
.sec--post::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(19,19,19,.92), rgba(19,19,19,.82) 55%, var(--ink-950));
}
.sec--post .wrap, .sec--post .wrap-mid, .sec--post .wrap-narrow { position: relative; z-index: 2; }

/* 本文白卡浮在深底上 */
.paper {
  background: var(--paper-2); color: var(--ink);
  border: 1px solid var(--line-l); border-radius: var(--r-lg);
  padding: clamp(26px, 4.2vw, 64px);
  box-shadow: 0 30px 72px rgba(0,0,0,.42);
}
.paper .crumb li, .paper .crumb a { color: var(--faint); }
.paper .crumb a:hover { color: var(--accent); }
.paper .crumb li + li::before { color: var(--line-l2); }
.paper .crumb li:last-child { color: var(--ink); }
.paper .eyebrow { color: var(--accent); }
.paper-title {
  font-weight: 400; font-size: clamp(25px, 2.9vw, 36px); line-height: 1.45; letter-spacing: .02em;
  color: var(--ink); margin-bottom: var(--s4);
  padding-bottom: var(--s4); border-bottom: 1px solid var(--line-l);
}
.paper .post-hero {
  width: 100%; aspect-ratio: 12 / 5; object-fit: cover;
  margin: 0 auto var(--s5); border-radius: var(--r); border: 1px solid var(--line-l);
}
.post-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px;
  margin-bottom: var(--s4);
}
.post-meta .d { font-family: var(--f-en); font-size: 13px; letter-spacing: .2em; color: var(--faint); }
.post-meta .c {
  font-size: 12.5px; letter-spacing: .14em; color: var(--ink-950);
  background: var(--accent); border-radius: 999px; padding: 4px 13px;
}

/* 內文排版 —— 之後 CMS 發的文章也套這一組 */
.prose { font-size: 16.5px; line-height: 2.15; color: #2E2C29; }
.prose > * + * { margin-top: var(--s3); }
.prose h2 {
  font-family: var(--f-sans); font-weight: 500;
  font-size: clamp(20px, 2vw, 25px); color: var(--ink);
  margin-top: var(--s6); padding-left: 16px; border-left: 2px solid var(--accent);
}
.prose h3 { font-weight: 500; font-size: clamp(18px, 1.7vw, 21px); color: var(--ink); margin-top: var(--s5); }
.prose p { text-align: justify; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose ul, .prose ol { padding-left: 22px; }
.prose ul li { list-style: none; position: relative; padding-left: 18px; }
.prose ul li::before { content: ""; position: absolute; left: 0; top: 16px; width: 8px; height: 1px; background: var(--accent); }
.prose ol { list-style: decimal; }
.prose li + li { margin-top: 10px; }
.prose a { color: var(--ink); border-bottom: 1px solid var(--accent); }
.prose a:hover { background: rgba(194,163,107,.16); }
.prose img { margin: var(--s4) auto; border-radius: var(--r); border: 1px solid var(--line-l); }
.prose blockquote {
  border-left: 2px solid var(--accent); padding: 4px 0 4px 22px;
  font-family: var(--f-serif); color: var(--ink);
}
.prose table { width: 100%; border-collapse: collapse; font-size: 15.5px; }
.prose th, .prose td { border: 1px solid var(--line-l); padding: 12px 14px; text-align: left; }
.prose th { background: var(--paper-3); color: var(--ink); font-weight: 500; }
.prose hr { border: 0; height: 1px; background: var(--line-l); margin: var(--s5) 0; }
/* 案例的攻防要點（🔸 那幾行）自動變成描邊卡 */
.prose p.point {
  border: 1px solid var(--line-l2); background: var(--paper); border-radius: var(--r);
  padding: 14px 20px; color: var(--ink); text-align: left;
}

/* 內文後的 CTA —— 卡片裡不另做底色，只用一條線分開 */
.post-cta {
  border-top: 1px solid var(--line-l);
  margin-top: clamp(40px, 5vw, 64px);
  padding: clamp(32px, 4vw, 52px) 0 0;
  text-align: center;
}
.post-cta h3 { font-weight: 400; font-size: clamp(20px, 2vw, 24px); margin-bottom: 12px; color: var(--ink); }
.post-cta p { font-size: 15.5px; color: var(--muted); margin-bottom: var(--s4); }
.post-cta .cta-actions { justify-content: center; margin-top: 0; }
/* 淺底上的線框鈕：預設墨色框，hover 一樣填土金 */
.paper .btn--ghost { color: var(--ink); opacity: 1; }

/* 上下篇 —— 不做卡片框，英文標籤與標題之間用一條細線，
   滑上去細線收短並長出方向箭頭（Prev 往左、Next 往右） */
.pager {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 56px);
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: clamp(28px, 3.2vw, 40px);
  border-top: 1px solid var(--line-d);
}
.pager > * { display: block; min-width: 0; }
.pager .next { text-align: right; }
.pager .k {
  display: block; font-family: var(--f-en); font-size: 11.5px; font-weight: 300;
  letter-spacing: .28em; text-transform: uppercase; color: var(--accent);
}
.pager .rule {
  position: relative; display: block; width: 100%; height: 1px; margin: 14px 0 16px;
  background: var(--line-d2);
  /* 這裡不能用 transform: scaleX()——會連帶把箭頭一起壓扁，邊緣就冒出多餘的細線 */
  transition: width .45s var(--ease), background .35s var(--ease);
}
.pager .next .rule { margin-left: auto; }
/* 只讓該側的那一個偽元素存在。兩個都給 content 的話，沒被定位的那個會落在
   靜態位置（next 因為 text-align:right 正好掉在線尾），變成箭頭旁邊多一截細線 */
.pager .prev .rule::before,
.pager .next .rule::after {
  content: ""; position: absolute; top: 50%; width: 8px; height: 8px;
  border-top: 1px solid var(--accent); border-right: 1px solid var(--accent);
  opacity: 0; transition: opacity .3s var(--ease), transform .45s var(--ease);
}
.pager .prev .rule::before { left: 2px; transform: translate(8px, -50%) rotate(-135deg); }
.pager .next .rule::after  { right: 2px; transform: translate(-8px, -50%) rotate(45deg); }
.pager .t {
  display: block; font-size: 15.5px; line-height: 1.75; color: var(--cream);
  transition: color .3s var(--ease);
}
/* 停用狀態（已是第一篇／最後一篇）不亮、不動 */
.pager span.prev .k, .pager span.next .k { color: var(--dust); }
.pager span.prev .rule, .pager span.next .rule { background: var(--line-d); }
.pager span.prev .t, .pager span.next .t { color: var(--dust); }

.pager a:hover .rule { width: 44%; background: var(--accent); }
.pager a.prev:hover .rule::before, .pager a.next:hover .rule::after { opacity: 1; }
.pager a.prev:hover .rule::before { transform: translate(0, -50%) rotate(-135deg); }
.pager a.next:hover .rule::after  { transform: translate(0, -50%) rotate(45deg); }
.pager a:hover .t { color: var(--accent-lit); }

.post-row { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center; }

/* ---------- F. 服務項目長版 ---------- */
.svc-block { scroll-margin-top: calc(var(--nav-h) + 24px); }
.svc-block + .svc-block { margin-top: clamp(56px, 7vw, 104px); }
.svc-items { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: var(--s4); }
.svc-item {
  background: var(--paper-2); border: 1px solid var(--line-l); border-radius: var(--r);
  padding: 24px 28px 28px; transition: border-color .35s var(--ease), transform .35s var(--ease);
}
.svc-item:hover { border-color: var(--line-l2); transform: translateY(-3px); }
.svc-item h4 { font-size: 18px; font-weight: 500; margin-bottom: 10px; }
.svc-item h4 span { font-family: var(--f-en); font-size: 12px; color: var(--accent); letter-spacing: .2em; margin-right: 10px; }
.svc-item p { font-size: 15px; color: var(--muted); line-height: 1.95; }
.bg-850 .svc-item, .bg-950 .svc-item, .on-dark .svc-item {
  background: rgba(255,255,255,.02); border-color: var(--line-d); color: var(--cream);
}
.bg-850 .svc-item p, .bg-950 .svc-item p, .on-dark .svc-item p { color: var(--dim); }


/* .svc 卡原本是給深底用的，放在淺色區塊時整組換色（聯絡頁的三種聯絡方式） */
.on-light .svc, .on-light--white .svc {
  background: var(--paper-2); border-color: var(--line-l);
}
.on-light .svc:hover, .on-light--white .svc:hover {
  background: var(--paper-2); border-color: var(--line-l2);
  box-shadow: 0 18px 44px rgba(0,0,0,.08);
}
.on-light .svc .h-card, .on-light--white .svc .h-card { color: var(--ink); }
.on-light .svc li, .on-light--white .svc li { color: var(--muted); border-color: var(--line-l); }
.on-light .svc .link-more, .on-light--white .svc .link-more { color: var(--ink); }

/* ---------- G. FAQ ---------- */
.faq { border-top: 1px solid var(--line-l); }
.faq details { border-bottom: 1px solid var(--line-l); }
.faq summary {
  list-style: none; cursor: pointer; padding: var(--s3) 44px var(--s3) 0;
  position: relative; font-family: var(--f-serif); font-size: 17.5px; letter-spacing: .05em;
  transition: color .3s;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent); }
.faq summary::before {
  content: "Q"; font-family: var(--f-en); color: var(--accent); font-size: 14px;
  letter-spacing: .1em; margin-right: 14px;
}
.faq summary::after {
  content: ""; position: absolute; right: 8px; top: 50%; width: 11px; height: 11px;
  border-right: 1px solid var(--accent); border-bottom: 1px solid var(--accent);
  transform: translateY(-70%) rotate(45deg); transition: transform .3s var(--ease);
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq .a { padding: 0 0 var(--s4) 32px; font-size: 15.5px; line-height: 2.05; color: var(--muted); }
.faq .a p + p { margin-top: 12px; }
.bg-850 .faq, .bg-950 .faq, .on-dark .faq { border-top-color: var(--line-d); }
.bg-850 .faq details, .bg-950 .faq details, .on-dark .faq details { border-bottom-color: var(--line-d); }
.bg-850 .faq .a, .bg-950 .faq .a, .on-dark .faq .a { color: var(--dim); }


/* 每一題展開後的即時聯絡鈕：圖示為主，點了直接撥號或開 LINE */
.faq-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.faq-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  height: 40px; padding: 0 18px; border-radius: 999px;
  font-size: 13.5px; letter-spacing: .06em; white-space: nowrap;
  border: 1px solid var(--line-l2); color: var(--ink); background: var(--paper-2);
  transition: background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.faq-btn svg { width: 17px; height: 17px; flex: 0 0 auto; }
.faq-btn--line svg { fill: currentColor; }
.faq-btn--tel svg { fill: none; stroke: currentColor; stroke-width: 1.6; }
.faq-btn:hover { background: var(--accent); border-color: var(--accent); color: var(--ink-950); }
.bg-850 .faq-btn, .bg-950 .faq-btn, .on-dark .faq-btn {
  background: transparent; border-color: var(--line-d2); color: var(--cream);
}

/* ---------- H. 表單與地圖 ---------- */
.form { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s3); }
.form label { display: flex; flex-direction: column; gap: 8px; font-size: 14.5px; color: var(--muted); letter-spacing: .08em; }
.form label.full { grid-column: 1 / -1; }
.form label .req { color: var(--accent); }
.form input, .form select, .form textarea {
  font: inherit; font-size: 15.5px; color: var(--ink);
  background: var(--paper-2); border: 1px solid var(--line-l); border-radius: var(--r);
  padding: 13px 15px; transition: border-color .3s;
}
.form textarea { min-height: 148px; resize: vertical; }
.form input:focus, .form select:focus, .form textarea:focus { outline: 0; border-color: var(--accent); }
.form .actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.form .note { font-size: 13.5px; color: var(--faint); }

.map-embed { aspect-ratio: 16/9; width: 100%; border-radius: var(--r); overflow: hidden; }
.map-embed iframe { display: block; width: 100%; height: 100%; border: 0; }
.office dl + .map-embed { margin-top: auto; padding-top: var(--s3); }
.office { display: flex; flex-direction: column; }
.office .map { display: inline-flex; margin-top: var(--s3); }
.office-hint {
  margin-left: 14px; vertical-align: 2px;
  font-family: var(--f-sans); font-size: 13.5px; font-weight: 400;
  letter-spacing: .04em; color: var(--faint);
}
.office-tag {
  margin-left: 12px; padding: 3px 11px; vertical-align: 3px; border-radius: 999px;
  font-family: var(--f-sans); font-size: 12.5px; font-weight: 400; letter-spacing: .12em;
  color: var(--accent); border: 1px solid var(--line-l2);
}

/* 段落之後的 CTA（關於頁用） */
.inline-cta {
  margin-top: clamp(40px, 5vw, 64px); padding-top: var(--s4);
  border-top: 1px solid var(--line-l);
  display: flex; flex-wrap: wrap; gap: var(--s2); justify-content: center;
}
.bg-850 .inline-cta, .bg-950 .inline-cta, .on-dark .inline-cta { border-top-color: var(--line-d); }

/* 四項承諾 */
.promise { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: var(--s5); }
.promise > div {
  background: var(--paper-2); border: 1px solid var(--line-l); border-radius: var(--r);
  padding: 24px 26px;
}
.promise .ico { display: block; width: 26px; height: 26px; margin-bottom: 14px; }
.promise .ico svg { width: 100%; height: 100%; stroke: var(--accent); fill: none; stroke-width: 1.3; }
.promise h4 { font-size: 17px; font-weight: 500; margin-bottom: 8px; }
.promise p { font-size: 14.5px; line-height: 1.95; color: var(--muted); }
.bg-850 .promise > div, .bg-950 .promise > div, .on-dark .promise > div {
  background: rgba(255,255,255,.02); border-color: var(--line-d);
}
.bg-850 .promise p, .bg-950 .promise p, .on-dark .promise p { color: var(--dim); }

/* ---------- I. 影音 ---------- */
.video-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.vid {
  position: relative; display: block; overflow: hidden;
  background: var(--paper-2); border: 1px solid var(--line-l); border-radius: var(--r-lg);
  transition: border-color .4s, transform .4s var(--ease), box-shadow .4s var(--ease);
}
.vid:hover { border-color: var(--line-l2); transform: translateY(-5px); box-shadow: 0 18px 44px rgba(0,0,0,.09); }
.vid-thumb { position: relative; aspect-ratio: 16/9; overflow: hidden; background: var(--paper-3); }
/* 影片縮圖維持原本的彩色，不跟其他配圖一起轉灰階 */
.vid-thumb img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s var(--ease);
}
.vid:hover .vid-thumb img { transform: scale(1.04); }
.play {
  position: absolute; inset: 0; margin: auto; width: 62px; height: 62px;
  display: grid; place-items: center;
  border: 1px solid #fff; border-radius: 50%;
  background: rgba(19,19,19,.46); backdrop-filter: blur(2px);
  transition: background .35s, transform .35s var(--ease), border-color .35s;
}
.play::after {
  content: ""; width: 0; height: 0; margin-left: 4px;
  border-left: 14px solid #fff; border-top: 9px solid transparent; border-bottom: 9px solid transparent;
  transition: border-left-color .35s;
}
.vid:hover .play { background: var(--accent); border-color: var(--accent); transform: scale(1.08); }
.vid:hover .play::after { border-left-color: var(--ink-950); }
.vid-body { padding: 20px 22px 24px; }
.vid-body h3 { font-size: 16.5px; font-weight: 500; line-height: 1.7; }
.vid iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- J. 律師團隊輪播 ---------- */
.sec.lawyer { padding-bottom: clamp(40px, 4vw, 64px); }
.people { position: relative; }
.people-viewport { overflow: hidden; }
.people-track { display: flex; align-items: stretch; transition: transform .55s var(--ease); will-change: transform; }
.person {
  flex: 0 0 100%; min-width: 0;
  display: grid; grid-template-columns: minmax(0, 340px) 1fr;
  gap: clamp(32px, 4vw, 64px); align-items: center;
}
.person-body { min-width: 0; padding-left: 30px; }
.person-ph {
  position: relative; display: grid; place-items: center;
  width: 100%; max-width: 360px; aspect-ratio: 385/648; margin: 0 auto;
  background: var(--ink-800); border-radius: var(--r-lg);
}
.person-ph .ph { width: 40%; opacity: .3; }
.person-ph .ph svg { width: 100%; fill: none; stroke: var(--accent); stroke-width: 1; }
.person-ph .soon {
  position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
  font-size: 12.5px; letter-spacing: .2em; color: var(--dust); white-space: nowrap;
}
.people-ctrl { display: flex; align-items: center; gap: var(--s3); margin-top: var(--s2); justify-content: flex-end; }
.people-nav {
  width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%;
  border: 1px solid var(--line-d2); color: var(--accent);
  transition: background .3s var(--ease), border-color .3s, color .3s;
}
.people-nav svg { width: 20px; height: 20px; }
.people-nav:hover { background: var(--accent); color: var(--ink-950); border-color: var(--accent); }
.people-nav:disabled { opacity: .28; pointer-events: none; }
.people-dots { display: flex; align-items: center; gap: 10px; }
.people-dots .dot {
  width: 9px; height: 9px; border-radius: 50%;
  border: 1px solid var(--line-d2); background: transparent;
  transition: background .3s, border-color .3s, transform .3s var(--ease);
}
.people-dots .dot.on { background: var(--accent); border-color: var(--accent); transform: scale(1.25); }

/* ---------- K. 浮動鈕與 AI 彈窗 ---------- */
.dock-btn--line svg { fill: currentColor; }
.dock-btn--tel svg, .dock-btn--ai svg { fill: none; stroke: currentColor; stroke-width: 1.6; }
.dock-btn--ai svg text {
  fill: currentColor; stroke: none;
  font-family: var(--f-en); font-size: 8.4px; font-weight: 500; letter-spacing: .04em;
}
.dock-btn--ai::after {
  content: "即將上線"; position: absolute; top: -8px; right: -10px; border-radius: 999px;
  font-size: 9.5px; letter-spacing: .05em; padding: 2px 7px;
  background: var(--accent); color: var(--ink-950); white-space: nowrap;
}
.to-top { opacity: 0; pointer-events: none; transition: opacity .35s; }
.to-top.on { opacity: 1; pointer-events: auto; }
.to-top svg { fill: none; stroke: currentColor; }

.ai-pop {
  position: fixed; inset: 0; z-index: 300; display: grid; place-items: center;
  background: rgba(10,10,10,.84); backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden; transition: opacity .35s, visibility .35s;
  padding: var(--gut);
}
.ai-pop.on { opacity: 1; visibility: visible; }
.ai-pop-box {
  max-width: 440px; width: 100%; background: var(--ink-850);
  border: 1px solid var(--line-d2); border-radius: var(--r-lg);
  padding: clamp(28px, 5vw, 44px); text-align: center; position: relative; color: var(--cream);
  transform: translateY(16px); transition: transform .4s var(--ease);
}
.ai-pop.on .ai-pop-box { transform: none; }
.ai-pop-box h3 { font-size: 22px; font-weight: 400; margin-bottom: var(--s2); }
.ai-pop-box p { font-size: 15.5px; color: var(--dim); margin-bottom: var(--s4); }
.ai-close { position: absolute; top: 12px; right: 16px; font-size: 24px; color: var(--dust); line-height: 1; }
.ai-close:hover { color: var(--accent); }

/* ---------- L. 卡片欄數變體 ---------- */
.card-grid--2 { grid-template-columns: repeat(2, 1fr); }
.card-grid--3 { grid-template-columns: repeat(3, 1fr); }
.card-grid--4 { grid-template-columns: repeat(4, 1fr); }



/* ---------- O. 捲到一半的諮詢提示 ---------- */
.nudge {
  position: fixed; left: 50%; top: 50%; z-index: 59;
  width: min(360px, calc(100vw - 32px));
  /* 白底配金色外框：白色本身在深區塊上跳得出來，金框負責在淺區塊上界定邊界 */
  background: var(--paper-2); border: 2px solid var(--accent); border-radius: var(--r-lg);
  padding: 24px 22px 20px; color: var(--ink);
  box-shadow: 0 30px 70px rgba(0,0,0,.5);
  opacity: 0; visibility: hidden; transform: translate(-50%, calc(-50% + 16px));
  transition: opacity .45s var(--ease), transform .45s var(--ease), visibility .45s;
}
.nudge.is-on { opacity: 1; visibility: visible; transform: translate(-50%, -50%); }
.nudge-close {
  position: absolute; top: 8px; right: 13px;
  font-size: 22px; line-height: 1; color: var(--faint);
}
.nudge-close:hover { color: var(--ink); }
.nudge-t { font-family: var(--f-serif); font-size: 17px; letter-spacing: .06em; color: var(--ink); }
.nudge-p { margin-top: 8px; font-size: 13.5px; line-height: 1.85; color: var(--muted); }
.nudge-btns { display: flex; gap: 8px; margin-top: 18px; }
.nudge-btns .btn {
  flex: 1 1 0; min-width: 0; height: 40px; padding: 0 10px;
  font-size: 12.5px; letter-spacing: .02em; gap: 6px;
}
.nudge-btns .btn svg { width: 15px; height: 15px; }
/* 淺底上的次要鈕要用墨色描邊，不能吃卡片的 currentColor */
.nudge .btn--ghost { color: var(--ink); opacity: 1; }
@media (min-width: 861px) { .nudge { left: calc(50% + var(--rail) / 2); } }
@media (max-width: 860px) {
  .nudge { padding: 22px 20px 20px; }
  .nudge-t { font-size: 16px; }
  .nudge-p { font-size: 13px; }
}

/* ---------- N. 手機打磨與共用修補 ---------- */
/* 段落之間本來沒有間距，兩段會黏成一大塊 */
.about-body p + p, .lede + .lede { margin-top: var(--s3); }

/* 四項承諾的編號與標題要分開 */
.promise h4 span {
  font-family: var(--f-en); font-weight: 300; letter-spacing: .2em;
  color: var(--accent); margin-right: 10px;
}

/* 團隊輪播的真人照在手機不能整寬 */
@media (max-width: 900px) {
  .person .lawyer-fig { max-width: 300px; margin-inline: auto; }
}

@media (max-width: 640px) {
  /* 手機的節奏收緊一階，一屏塞得下更多內容 */
  :root { --gut: 20px; }
  .sec { padding-block: 56px; }
  .sec-head { margin-bottom: 32px; }
  .h-display { font-size: 32px; line-height: 1.34; }
  .h-sec { font-size: 25px; }
  .lede { font-size: 15.5px; line-height: 1.95; }

  .hero { min-height: min(86vh, 720px); padding-top: calc(var(--nav-h) + 24px); padding-bottom: 88px; }
  .hero-sub { margin-top: 22px; }
  /* 手機的 LINE／撥號永遠併排一列，不上下堆疊。
     字級、內距與圖示都跟著視窗縮，360px 窄機也塞得下 */
  .hero-actions { margin-top: 30px; }
  .hero-actions, .cta-actions, .inline-cta, .faq-cta {
    display: flex; flex-direction: row; flex-wrap: nowrap; gap: 8px;
  }
  .hero-actions .btn, .cta-actions .btn, .inline-cta .btn, .faq-btn {
    flex: 1 1 0; width: auto; min-width: 0; gap: 6px;
    height: 46px; padding: 0 clamp(6px, 1.8vw, 16px);
    font-size: clamp(11px, 2.9vw, 13.5px); letter-spacing: .02em;
  }
  .hero-actions .btn svg, .cta-actions .btn svg, .inline-cta .btn svg, .faq-btn svg {
    width: clamp(13px, 3.4vw, 16px); height: clamp(13px, 3.4vw, 16px);
  }

  .stat { padding: 22px 22px 20px; gap: 18px; }
  .stat-n { font-size: 34px; }
  .stat-tag { font-size: 10.5px; padding: 4px 12px; }

  .svc { padding: 26px 22px 24px; }
  .card { padding: 24px 22px 26px; }
  .card h3 { font-size: 17.5px; min-height: 0; }
  .fee-figure { padding: 28px 24px; }
  .office { padding: 26px 24px; }
  .paper { padding: 28px 22px; border-radius: var(--r); }
  /* 首圖在手機不裁成 12:5，改成滿版出血並顯示原比例，圖上的字才看得清楚 */
  .paper .post-hero {
    aspect-ratio: 16 / 9; object-fit: cover; object-position: center;
    width: calc(100% + 44px); max-width: none;
    margin-left: -22px; margin-right: -22px; margin-bottom: 28px;
    border-radius: 0; border-inline: 0;
  }
  .paper-title { font-size: 23px; }
  .promise > div { padding: 22px 22px 24px; }
  .phero { padding-top: calc(var(--nav-h) + 40px); padding-bottom: 40px; }
  .cta-band { padding-block: 72px; }
  .ftr-top { gap: 32px; }
}

/* ---------- M. 內頁 RWD ---------- */
@media (max-width: 1080px) {
  .card-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .video-grid { grid-template-columns: 1fr; }
  .card-grid--3, .card-grid--2 { grid-template-columns: repeat(2, 1fr); }
  .svc-items, .form, .promise { grid-template-columns: 1fr; }
  .person { grid-template-columns: 1fr; gap: var(--s4); }
  .person-ph { max-width: 300px; }
  .people-ctrl { justify-content: center; }
  .pager { grid-template-columns: 1fr; }
  .pager .next { text-align: left; }
  .prose { font-size: 16px; line-height: 2.05; }
  .prose p { text-align: left; }
  .prose table { display: block; overflow-x: auto; white-space: nowrap; }
}
@media (max-width: 560px) {
  .card-grid--2, .card-grid--3, .card-grid--4 { grid-template-columns: 1fr; }
  .post-row { grid-template-columns: 1fr; gap: 8px; }
  .office dl { grid-template-columns: 64px 1fr; gap: 10px 12px; font-size: 15px; }
}