/* ============================================================
   JM ENIGMA · 天盛資本 — corporate site
   Fusion direction: cinematic full-bleed (Majoris) +
   editorial image/text rows (Hysan / GAW Capital).
   Deep navy + gold, real photography throughout.
   ============================================================ */

:root {
  --navy: #16233b;
  --navy-deep: #0e1626;
  --navy-soft: #1d2c46;
  --cream: #f6f3ec;
  --cream-2: #efeadd;
  --gold: #b0894a;
  --gold-light: #d8b878;
  --ink: #2b3543;
  --slate: #3a4656;
  --muted: #54606f;
  --border: #e7e1d4;
  --border-soft: #e3ddd0;
  --line-dark: rgba(255, 255, 255, 0.12);

  --serif-display: 'Cormorant Garamond', 'Noto Serif SC', serif;
  --serif-sc: 'Noto Serif SC', 'Cormorant Garamond', serif;
  --sans: 'Noto Sans SC', system-ui, sans-serif;
  --label: 'Archivo', sans-serif;

  --maxw: 1360px;
  --gutter: 48px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; max-width: 100%; overflow-x: clip; }
body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  max-width: 100%;
  overflow-x: hidden;
}
a { text-decoration: none; color: inherit; }
::selection { background: var(--navy); color: var(--cream); }
img { max-width: 100%; display: block; }

@keyframes jmFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes heroZoom { from { transform: scale(1.12); } to { transform: scale(1); } }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }

/* ---- shared type ---- */
.eyebrow {
  font-family: var(--label);
  font-size: 13.5px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 24px;
}
.eyebrow.on-dark { color: var(--gold-light); }
.section-title {
  font-family: var(--serif-display);
  font-weight: 500;
  color: var(--navy);
  line-height: 1.14;
  letter-spacing: .005em;
  margin: 0;
}
.rule { width: 64px; height: 1px; background: var(--gold); margin: 0 0 26px; }
.rule.center { margin-left: auto; margin-right: auto; }

/* =================== NAV =================== */
.site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 60;
  transition: background .45s, border-color .45s, box-shadow .45s;
  border-bottom: 1px solid transparent;
}
/* 透明狀態下疊在 hero 影像上，單靠白字對比度不足（客戶回饋「整體看上去不是很清晰」）。
   加一道由上而下的暗色遮罩，讓 logo 與導覽文字在任何背景圖上都達 WCAG AA。 */
.site-nav::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,14,26,0.72) 0%, rgba(8,14,26,0.42) 55%, rgba(8,14,26,0) 100%);
  pointer-events: none;
  transition: opacity .45s;
}
.site-nav.solid::before { opacity: 0; }
.site-nav.solid {
  background: rgba(246, 243, 236, 0.94);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 10px 34px -22px rgba(22,35,59,0.4);
}
.nav-inner {
  position: relative; z-index: 1;
  max-width: 1760px;
  padding-inline: clamp(24px, 2.5vw, 64px);
  height: 92px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  /* logo 與導覽之間的固定間距——中英文一致，不隨導覽總寬變化；留白從容不擠。 */
  gap: clamp(28px, 2.4vw, 48px);
}
.brand { display: flex; align-items: center; gap: 24px; flex-shrink: 0; text-decoration: none; }
.brand-logo { height: 40px; width: auto; flex: none; display: block; transition: opacity .45s; }
.brand-word { font-family: var(--serif-sc); font-size: 21px; letter-spacing: .22em; color: #fff; white-space: nowrap; transition: color .45s; font-weight: 500; }
.site-nav.solid .brand-word { color: #1b2c48; }
html[lang="en"] .brand-word { font-family: var(--sans); font-size: clamp(16px, 1.3vw, 22px); font-weight: 400; letter-spacing: .01em; }
@media (min-width: 701px) {
  html[lang="en"] .brand-word, html[lang="ja"] .brand-word { transform: translateY(5px); }
}
/* 白版疊在深色 hero 上，深色版用於滾動後的米色實底。 */
.brand-logo-dark { display: none; }
.site-nav.solid .brand-logo-light { display: none; }
.site-nav.solid .brand-logo-dark { display: block; }
.brand-zh { font-family: var(--serif-sc); font-size: clamp(14px, 1vw, 17px); letter-spacing: .40em; color: var(--gold-light); white-space: nowrap; transition: color .45s; }
.site-nav.solid .brand-zh { color: var(--gold); }

.nav-links { display: flex; align-items: center; flex-wrap: nowrap; gap: clamp(13px, .92vw, 14.8px); flex: 1 1 auto; }
@media (min-width: 1280px) {
  .nav-links { padding-left: clamp(0px, calc(17vw - 217.6px), 100px); }
}
/* 字号/字距/间距随视口连续缩放；nowrap 保证任何宽度下都不会把「關於我們」拆成两行。 */
.nav-link {
  font-family: var(--label); font-size: clamp(13px, .92vw, 14.8px); letter-spacing: clamp(.08em, .11vw, .17em);
  text-transform: uppercase; color: rgba(255,255,255,0.86); transition: color .3s;
  white-space: nowrap;
}
.site-nav.solid .nav-link { color: #3a4452; }
.nav-menu-trigger { border: 0; padding: 0; background: transparent; line-height: inherit; text-align: left; cursor: pointer; }
.nav-link:hover { color: var(--gold-light); }
.site-nav.solid .nav-link:hover { color: var(--gold); }
.lang-btn {
  font-family: var(--label); font-size: 12px; letter-spacing: .12em;
  text-transform: uppercase; color: #fff;
  background: transparent; border: 1px solid rgba(255,255,255,0.55);
  padding: 9px 16px; cursor: pointer; border-radius: 1px;
  transition: background .3s, color .3s, border-color .3s;
}
.lang-btn:hover { background: var(--gold-light); border-color: var(--gold-light); color: var(--navy); }
.site-nav.solid .lang-btn { color: var(--navy); border-color: var(--navy); }
.site-nav.solid .lang-btn:hover { background: var(--navy); color: #fff; }

/* 三語切換：简 / 繁 / EN */
.lang-switch { display: inline-flex; border: 1px solid rgba(255,255,255,0.55); border-radius: 2px; overflow: hidden; margin-left: auto; }
.lang-opt {
  font-family: var(--label); font-size: 12px; letter-spacing: .06em; color: #fff;
  background: transparent; border: 0; padding: 8px 11px; cursor: pointer; line-height: 1;
  transition: background .3s, color .3s;
}
.lang-opt + .lang-opt { border-left: 1px solid rgba(255,255,255,0.32); }
.lang-opt:hover { color: var(--gold-light); }
.lang-opt.on { background: var(--gold-light); color: var(--navy); }
.site-nav.solid .lang-switch { border-color: var(--navy); }
.site-nav.solid .lang-opt { color: var(--navy); }
.site-nav.solid .lang-opt + .lang-opt { border-left-color: rgba(22,35,59,0.28); }
.site-nav.solid .lang-opt:hover { color: var(--gold); }
.site-nav.solid .lang-opt.on { background: var(--navy); color: #fff; }

/* =================== HERO =================== */
.hero {
  position: relative; min-height: 100vh;
  display: flex; align-items: flex-end;
  background: var(--navy-deep); overflow: hidden;
}
.hero-media { position: absolute; inset: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; animation: heroZoom 2.6s cubic-bezier(.2,.6,.2,1) both; }
.hero-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(14,22,38,0.55) 0%, rgba(14,22,38,0.25) 32%, rgba(14,22,38,0.82) 100%),
    radial-gradient(120% 80% at 80% 10%, rgba(176,137,74,0.20), transparent 55%);
}
.hero-grid-overlay {
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(135deg, rgba(255,255,255,0.03) 0 2px, transparent 2px 14px);
}
.hero-inner { position: relative; width: 100%; padding-top: 0; padding-bottom: 110px; }
.hero-content { max-width: 960px; }
.hero-eyebrow {
  font-family: var(--label); font-size: 13px; letter-spacing: .38em;
  text-transform: uppercase; color: var(--gold-light); margin-bottom: 28px;
}
.hero-title {
  font-family: var(--serif-display); font-weight: 500; color: #fff;
  font-size: clamp(44px, 7vw, 110px); line-height: 1.02;
  letter-spacing: .004em; margin: 0;
}
.hero-sub {
  max-width: 620px; margin: 32px 0 0; font-size: 17.5px; line-height: 1.95;
  color: rgba(255,255,255,0.82); font-weight: 300;
}
.hero-actions { display: flex; align-items: center; gap: 28px; margin-top: 44px; flex-wrap: wrap; }
.btn-gold {
  font-family: var(--label); font-size: 12.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--navy); background: var(--gold-light);
  padding: 17px 34px; transition: background .4s, transform .4s, box-shadow .4s;
}
.btn-gold:hover { background: #e7cf96; transform: translateY(-2px); box-shadow: 0 16px 34px -14px rgba(216,184,120,0.55); }
.link-underline {
  font-family: var(--label); font-size: 12.5px; letter-spacing: .16em;
  text-transform: uppercase; color: #fff;
  border-bottom: 1px solid rgba(216,184,120,0.65); padding-bottom: 5px;
  transition: border-color .4s, letter-spacing .4s;
}
.link-underline:hover { border-color: #e7cf96; letter-spacing: .22em; }
.hero-scroll {
  position: absolute; left: var(--gutter); bottom: 38px;
  font-family: var(--label); font-size: 10.5px; letter-spacing: .3em; text-transform: uppercase;
  color: rgba(255,255,255,0.5); display: flex; align-items: center; gap: 12px;
}
.hero-scroll::after { content: ''; width: 46px; height: 1px; background: rgba(255,255,255,0.4); }

/* =================== STATS =================== */
.stats { background: var(--navy); }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.stat { padding: 46px 30px 50px; border-left: 1px solid var(--line-dark); }
.stat:first-child { border-left: none; }
.stat-n { font-family: var(--serif-display); font-weight: 500; font-size: 52px; color: var(--gold-light); line-height: 1; }
.stat-l { margin-top: 14px; font-size: 13.5px; color: rgba(255,255,255,0.66); letter-spacing: .02em; }

/* =================== ABOUT =================== */
.about { background: var(--cream); padding: 130px 0; }
.about-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 90px; align-items: start; }
.about .section-title { font-size: clamp(30px, 3.6vw, 52px); }
.about-p { font-size: 16.5px; line-height: 1.98; color: var(--slate); margin: 0 0 22px; }
.about-p:last-of-type { margin-bottom: 0; }
.tenets {
  margin-top: 40px; padding-top: 34px; border-top: 1px solid var(--border-soft);
  display: grid; grid-template-columns: 1fr 1fr; gap: 22px;
}
.tenet { display: flex; gap: 13px; align-items: baseline; }
.tenet-dot { width: 6px; height: 6px; flex: none; background: var(--gold); transform: rotate(45deg); margin-top: 7px; }
.tenet span:last-child { font-size: 15px; color: var(--ink); line-height: 1.6; }

/* =================== CINEMATIC DIVIDER (road) =================== */
.divider {
  position: relative; min-height: 62vh; display: flex; align-items: center; justify-content: center;
  background: var(--navy-deep); overflow: hidden; text-align: center;
}
.divider img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.divider-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,22,38,0.5), rgba(14,22,38,0.72)); }
.divider-inner { position: relative; max-width: 900px; padding: 0 var(--gutter); }
.divider-quote { font-family: var(--serif-display); font-weight: 500; font-style: italic; color: #fff; font-size: clamp(26px, 3.4vw, 46px); line-height: 1.3; margin: 0; }
.divider-by { margin-top: 24px; font-family: var(--label); font-size: 12px; letter-spacing: .26em; text-transform: uppercase; color: var(--gold-light); }

/* =================== CULTURE (editorial narrative rows — alternating full-bleed) =================== */
.culture { background: #fff; border-top: 1px solid var(--border); padding: clamp(92px, 10vw, 124px) 0 0; }
.culture .culture-head { text-align: center; max-width: 760px; margin: 0 auto clamp(52px, 6vw, 80px); padding: 0 var(--gutter); }
.culture-head .section-title { font-size: clamp(28px, 3.4vw, 48px); line-height: 1.16; }
.culture-head .rule.center { margin-left: auto; margin-right: auto; }
.cn-rows { display: flex; flex-direction: column; }
.cn-row { display: grid; grid-template-columns: 55fr 45fr; min-height: clamp(440px, 52vw, 600px); }
.cn-row:nth-child(even) { grid-template-columns: 45fr 55fr; }
.cn-row:nth-child(even) .cn-media { order: 2; }
.cn-media { position: relative; overflow: hidden; background: var(--cream); }
.cn-media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.97) contrast(1.02); transition: transform 1.5s cubic-bezier(.2,.6,.2,1); }
.cn-row:hover .cn-media img { transform: scale(1.045); }
.cn-text { display: flex; flex-direction: column; justify-content: center; padding: clamp(48px, 5.5vw, 90px) clamp(38px, 5.5vw, 84px); background: var(--cream); }
.cn-row:nth-child(even) .cn-text { background: #fff; }
.cn-no { font-family: var(--serif-display); font-size: clamp(50px, 6vw, 90px); font-weight: 400; color: rgba(176,137,74,0.28); line-height: .85; margin-bottom: 22px; }
.cn-k { font-family: var(--label); font-size: 11.5px; font-weight: 400; letter-spacing: .26em; text-transform: uppercase; color: var(--gold); margin-bottom: 18px; }
.cn-t { font-family: var(--serif-sc); font-weight: 600; font-size: clamp(28px, 3.2vw, 44px); color: var(--navy); line-height: 1.14; margin: 0 0 22px; }
.cn-d { font-size: clamp(15px, 1.05vw, 17px); line-height: 1.78; color: var(--muted); margin: 0; max-width: 480px; }
/* 願景 / 使命 的長段說明 */
.cn-body { margin: 22px 0 0; max-width: 520px; font-size: 14.5px; line-height: 1.95; color: var(--muted); }
/* 核心價值觀的四條子項 */
.cn-sub { list-style: none; margin: 24px 0 0; padding: 0; max-width: 540px; display: flex; flex-direction: column; gap: 18px; }
.cn-sub li { padding-left: 18px; border-left: 2px solid rgba(176,137,74,0.34); }
.cn-sub strong { display: block; font-family: var(--serif-sc); font-weight: 600; font-size: 15.5px; color: var(--navy); margin-bottom: 6px; letter-spacing: .01em; }
.cn-sub span { display: block; font-size: 13.5px; line-height: 1.85; color: var(--muted); }

/* =================== DIVISIONS (editorial alternating rows) =================== */
.divisions { background: var(--cream); padding: clamp(92px, 10vw, 124px) 0 clamp(84px, 9vw, 116px); }
.div-head { padding-top: 120px; padding-bottom: 70px; }
.div-head-grid { display: flex; justify-content: space-between; align-items: flex-end; gap: 48px; flex-wrap: wrap; }
.div-head .section-title, .div-head-grid .section-title { font-size: clamp(32px, 4vw, 58px); line-height: 1.08; max-width: 720px; }
.div-intro { max-width: 440px; font-size: 15.5px; line-height: 1.95; color: var(--muted); margin: 0; }

.div-list { display: flex; flex-direction: column; }
.div-row { display: grid; grid-template-columns: 1.12fr 0.88fr; min-height: 540px; border-top: 1px solid var(--border); }
.div-row-media { position: relative; overflow: hidden; background: var(--navy); }
.div-row-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.3s cubic-bezier(.2,.6,.2,1); }
.div-row:hover .div-row-media img { transform: scale(1.055); }
.div-row-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(14,22,38,0.32), transparent 55%); }
.div-row-num {
  position: absolute; top: 26px; left: 30px; z-index: 2;
  font-family: var(--serif-display); font-weight: 600; font-size: 30px;
  color: rgba(255,255,255,0.9);
}
.div-row-flag {
  position: absolute; top: 30px; right: 0; z-index: 2; background: var(--gold); color: #fff;
  font-family: var(--label); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; padding: 8px 18px;
}
.div-row-text { padding: 72px 64px; display: flex; flex-direction: column; justify-content: center; background: #fff; }
.div-row:nth-child(even) .div-row-text { background: var(--cream-2); }
.div-row-en { font-family: var(--label); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; }
.div-row-title { font-family: var(--serif-sc); font-weight: 600; font-size: clamp(24px, 2.3vw, 32px); color: var(--navy); margin: 0 0 20px; line-height: 1.32; }
.div-row-body { font-size: 15.5px; line-height: 1.95; color: var(--muted); margin: 0 0 28px; max-width: 520px; }
.div-row-link { font-family: var(--label); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--navy); display: inline-flex; align-items: center; gap: 10px; }
.div-row-link .arrow { color: var(--gold); display: inline-block; transition: transform .4s cubic-bezier(.2,.6,.2,1); }
.div-row:hover .div-row-link .arrow { transform: translateX(7px); }
/* reverse layout puts media on the right */
.div-row.reverse .div-row-media { order: 2; }
.div-row.reverse .div-row-media::after { background: linear-gradient(240deg, rgba(14,22,38,0.32), transparent 55%); }
/* designed tile (division without a photo) */
.div-row-media.tile {
  background:
    radial-gradient(120% 100% at 20% 10%, rgba(176,137,74,0.28), transparent 60%),
    repeating-linear-gradient(135deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 16px),
    linear-gradient(160deg, var(--navy-soft), var(--navy-deep));
  display: flex; align-items: center; justify-content: center;
}
.div-row-media.tile .tile-mark { font-family: var(--serif-display); font-size: clamp(64px, 9vw, 140px); color: rgba(216,184,120,0.18); font-weight: 600; letter-spacing: .04em; }

/* --- division card grid (image10 style) --- */
/* 八個板塊排成 4×2 完整矩形（綠地天盛基金有獨立入口，不進網格）。
   三欄時 8 張會排成 3+3+2、末行落單，正是客戶回饋的「排版不齊」。 */
.div-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 1.4vw, 24px); margin-top: clamp(44px, 5vw, 72px); }
.div-card { position: relative; display: block; text-decoration: none; background: var(--navy); overflow: hidden; transition: box-shadow .5s cubic-bezier(.2,.6,.2,1), transform .5s cubic-bezier(.2,.6,.2,1); }
.div-card:hover { box-shadow: 0 30px 60px -34px rgba(22,35,59,0.5); transform: translateY(-4px); }
.div-card-media { position: relative; aspect-ratio: 3/4; overflow: hidden; background: var(--navy); }
.div-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2,.6,.2,1); }
.div-card:hover .div-card-media img { transform: scale(1.06); }
/* 文字浮層的底襯：下半部漸深，保證標題在任何圖片上都可讀。 */
.div-card-veil { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(14,22,38,0.10) 0%, rgba(14,22,38,0.18) 42%, rgba(14,22,38,0.86) 100%); transition: background .5s; }
.div-card:hover .div-card-veil { background: linear-gradient(180deg, rgba(14,22,38,0.30) 0%, rgba(14,22,38,0.44) 42%, rgba(14,22,38,0.92) 100%); }
.div-card-cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 28px 20px 22px; }
.div-card-cap::before { content: ''; position: absolute; left: 20px; top: 0; width: 32px; height: 2px; background: var(--gold); }
.div-card-flag { position: absolute; top: 15px; right: 15px; z-index: 2; font-family: var(--label); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--navy); background: var(--gold-light); padding: 6px 12px; }
.div-card-en { display: block; font-family: var(--label); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-light); margin-bottom: 7px; }
.div-card-title { font-family: var(--serif-sc); font-weight: 600; font-size: clamp(17px, 1.25vw, 21px); color: #fff; margin: 0; line-height: 1.32; letter-spacing: .01em; text-wrap: balance; }
.div-card-arrow { display: block; margin-top: 12px; font-family: var(--serif-display); font-size: 20px; color: var(--gold-light); transition: transform .4s cubic-bezier(.2,.6,.2,1); }
.div-card:hover .div-card-arrow { transform: translateX(6px); }
.home-divisions { border-top: 1px solid var(--border); }
.home-divisions-head { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr); gap: 42px 72px; align-items: end; }
.home-divisions-head .eyebrow, .home-divisions-head .rule { grid-column: 1 / -1; }
.home-divisions-head .rule { margin-top: -28px; }
.home-divisions-head .section-title { margin: 0; max-width: 760px; font-size: clamp(32px, 4vw, 58px); line-height: 1.08; }
.home-divisions-head .div-intro { max-width: 500px; }
/* 只用偶數欄（4 / 2 / 1），8 張卡在任一斷點都排滿矩形，不會出現落單。
   1200px 以下四欄會擠到約 230px，長標題（人工智能與算力基礎設施）會斷行，故提前降為兩欄。 */
@media (max-width: 1200px) {
  .div-cards { grid-template-columns: repeat(2, 1fr); }
  .div-card-media { aspect-ratio: 4/3; }
}

/* =================== GROUP STRUCTURE =================== */
.structure { background: var(--navy); padding: 120px 0; }
.struct-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 80px; align-items: start; }
.struct-title { font-family: var(--serif-display); font-weight: 500; color: #fff; font-size: clamp(28px, 3.2vw, 46px); line-height: 1.16; margin: 0 0 22px; }
.struct-intro { font-size: 15.5px; line-height: 1.95; color: rgba(255,255,255,0.68); margin: 0; }
.struct-list { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--line-dark); }
.struct-item { padding: 26px 8px 26px 0; border-bottom: 1px solid var(--line-dark); display: flex; align-items: center; gap: 18px; transition: padding-left .35s; }
.struct-item:hover { padding-left: 8px; }
.struct-n { font-family: var(--serif-display); font-size: 16px; color: var(--gold-light); width: 30px; }
.struct-t { font-size: 15.5px; color: #eef1f5; }

/* =================== GLOBAL PRESENCE =================== */
.presence { background: var(--cream); padding: 120px 0; }
.presence-head { text-align: center; margin-bottom: 56px; }
.presence-head .section-title { font-size: clamp(28px, 3.4vw, 48px); }
.offices-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.office { background: #fff; border: 1px solid var(--border); padding: 42px 36px; transition: transform .5s, box-shadow .5s; }
.office:hover { transform: translateY(-6px); box-shadow: 0 26px 50px -28px rgba(22,35,59,0.4); }
.office-tag { font-family: var(--serif-display); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.office-city { font-family: var(--serif-sc); font-weight: 600; font-size: 24px; color: var(--navy); margin: 10px 0 18px; }
.office-addr { font-size: 14.5px; line-height: 1.85; color: var(--muted); margin: 0; }

/* =================== NEWS =================== */
.news { background: #fff; border-top: 1px solid var(--border); padding: 120px 0; }
.news-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 56px; gap: 30px; flex-wrap: wrap; }
.news-head .section-title { font-size: clamp(28px, 3.2vw, 46px); line-height: 1.14; }
.news-viewall { font-family: var(--label); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--navy); border-bottom: 1px solid var(--gold); padding-bottom: 5px; transition: color .3s; }
.news-viewall:hover { color: var(--gold); }
.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; }
.news-card { display: block; }
.news-card-img { position: relative; aspect-ratio: 16 / 10; overflow: hidden; margin-bottom: 24px; background: var(--navy); }
.news-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s cubic-bezier(.2,.6,.2,1); }
.news-card:hover .news-card-img img { transform: scale(1.06); }
.news-meta { font-family: var(--label); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin-bottom: 12px; }
.news-title { font-family: var(--serif-sc); font-weight: 600; font-size: 20px; color: var(--navy); margin: 0; line-height: 1.5; transition: color .3s; }
.news-card:hover .news-title { color: var(--gold); }

/* =================== CAREERS (full-bleed) =================== */
.careers { position: relative; min-height: 78vh; display: flex; align-items: center; overflow: hidden; background: var(--navy-deep); }
.careers img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.careers-scrim { position: absolute; inset: 0; background: linear-gradient(110deg, rgba(14,22,38,0.86) 0%, rgba(14,22,38,0.58) 55%, rgba(14,22,38,0.4) 100%); }
.careers-inner { position: relative; max-width: var(--maxw); margin: 0 auto; padding: 96px var(--gutter); width: 100%; }
.careers-box { max-width: 640px; }
.careers-title { font-family: var(--serif-display); font-weight: 500; color: #fff; font-size: clamp(32px, 4vw, 56px); line-height: 1.1; margin: 0 0 24px; }
.careers-body { font-size: 16px; line-height: 1.95; color: rgba(255,255,255,0.8); margin: 0 0 36px; }

/* =================== CONTACT =================== */
.contact { background: var(--cream); padding: 120px 0 104px; }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 90px; align-items: start; }
.contact-grid > *, .contact-page-grid > * { min-width: 0; }
.contact .section-title { font-size: clamp(30px, 3.6vw, 50px); line-height: 1.14; margin-bottom: 30px; }
.contact-email { font-family: var(--serif-display); font-size: 28px; color: var(--navy); border-bottom: 1px solid var(--gold); padding-bottom: 5px; transition: color .3s; }
.contact-email:hover { color: var(--gold); }
.newsletter-card { min-width: 0; background: #fff; border: 1px solid var(--border); padding: 44px; }
.newsletter-title { font-family: var(--serif-sc); font-weight: 600; font-size: 22px; color: var(--navy); margin: 0 0 8px; }
.newsletter-body { font-size: 14.5px; line-height: 1.85; color: var(--muted); margin: 0 0 26px; }
.newsletter-form { display: flex; min-width: 0; max-width: 100%; border: 1px solid #d8cfbb; }
.newsletter-form input { flex: 1 1 auto; min-width: 0; width: 100%; border: none; padding: 16px 18px; font-family: var(--sans); font-size: 14px; color: var(--navy); background: transparent; outline: none; }
.newsletter-form button { background: var(--navy); color: #fff; border: none; font-family: var(--label); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; padding: 0 28px; cursor: pointer; transition: background .3s; }
.newsletter-form button:hover { background: var(--navy-soft); }

/* =================== FOOTER =================== */
.site-footer { background: var(--navy-deep); color: rgba(255,255,255,0.7); padding: 80px 0 44px; }
.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 56px; padding-bottom: 54px; border-bottom: 1px solid rgba(255,255,255,0.1); }
.footer-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.footer-logo { height: 34px; width: auto; display: block; }
.footer-disclaimer { font-size: 13px; line-height: 1.9; color: rgba(255,255,255,0.5); max-width: 400px; margin: 0; }
.footer-coltitle { font-family: var(--label); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-light); margin-bottom: 20px; }
.footer-col-links { display: flex; flex-direction: column; gap: 13px; }
.footer-col-links a, .footer-col-links span { font-size: 14px; color: rgba(255,255,255,0.72); transition: color .3s; }
.footer-col-links a:hover { color: var(--gold-light); }
.footer-copy { padding-top: 28px; font-size: 12.5px; color: rgba(255,255,255,0.42); letter-spacing: .02em; }

/* =================== REVEAL =================== */
[data-revealable] {
  opacity: 0; transform: translateY(30px);
  transition: opacity 1.1s cubic-bezier(.2,.65,.2,1), transform 1.1s cubic-bezier(.2,.65,.2,1);
  will-change: opacity, transform;
}
[data-revealable].is-visible { opacity: 1; transform: none; }

/* =================== RESPONSIVE =================== */
@media (max-width: 1024px) {
  .about-grid { grid-template-columns: 1fr; gap: 52px; }
  .struct-grid { grid-template-columns: 1fr; gap: 44px; }
  .contact-grid { grid-template-columns: 1fr; gap: 52px; }
  .cn-text { padding: clamp(44px, 6vw, 64px) clamp(34px, 5vw, 56px); }
  .offices-grid, .news-grid { grid-template-columns: 1fr 1fr; }
  .div-row { grid-template-columns: 1fr; min-height: 0; }
  .div-row .div-row-media { order: 0 !important; aspect-ratio: 16/9; }
  .div-row.reverse .div-row-media { order: 0; }
  .div-head-grid { gap: 28px; }
  .div-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .nav-links .nav-link { display: none; }
  .cn-row, .cn-row:nth-child(even) { grid-template-columns: 1fr; min-height: 0; }
  .cn-row:nth-child(even) .cn-media { order: 0; }
  .cn-media { aspect-ratio: 16 / 10; }
  .cn-text { padding: 40px 26px 46px; }
  .cn-d { max-width: none; }
}
@media (max-width: 680px) {
  :root { --gutter: 22px; }
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat { min-width: 0; padding: 34px 14px 38px; }
  .stat-n { font-size: 42px; overflow-wrap: anywhere; }
  .stat-l { overflow-wrap: anywhere; }
  .stat:nth-child(odd) { border-left: none; }
  .offices-grid, .news-grid { grid-template-columns: 1fr; }
  .struct-list { grid-template-columns: 1fr; }
  .div-row-text { padding: 44px 26px; }
  .div-cards { grid-template-columns: 1fr; }
  .about, .culture, .structure, .presence, .news, .contact { padding-top: 84px; padding-bottom: 84px; }
  .div-head { padding-top: 96px; }
  .tenets { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; gap: 40px; }
}

/* ============================================================
   SUB-PAGES (detail / news / article / about / careers / contact)
   ============================================================ */
.link-dark { font-family: var(--label); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--navy); display: inline-flex; align-items: center; gap: 9px; }
.wrap.narrow { max-width: 860px; }
.page-section { padding: 110px 0; }
.lede { font-size: 18px; line-height: 1.95; color: var(--slate); margin: 26px 0 0; }

/* page hero (sub-page banner) */
.page-hero { position: relative; min-height: 60vh; display: flex; align-items: flex-end; background: var(--navy-deep); overflow: hidden; }
.page-hero.img { min-height: 66vh; }
.page-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: heroZoom 2.4s cubic-bezier(.2,.6,.2,1) both; }
.page-hero-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,22,38,0.55) 0%, rgba(14,22,38,0.35) 40%, rgba(14,22,38,0.82) 100%), radial-gradient(120% 80% at 80% 12%, rgba(176,137,74,0.2), transparent 55%); }
.page-hero.tilebg { background: radial-gradient(120% 100% at 18% 8%, rgba(176,137,74,0.26), transparent 60%), repeating-linear-gradient(135deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 16px), linear-gradient(160deg, var(--navy-soft), var(--navy-deep)); }
.page-hero-inner { position: relative; width: 100%; padding-bottom: 64px; padding-top: 130px; }
.page-hero-eyebrow { font-family: var(--label); font-size: 13.5px; letter-spacing: .26em; text-transform: uppercase; color: var(--gold-light); margin-bottom: 18px; }
.page-hero-title { font-family: var(--serif-display); font-weight: 500; color: #fff; font-size: clamp(36px, 5vw, 76px); line-height: 1.18; margin: 0; max-width: 1000px; }
html[lang="en"] body[data-page="businesses"] .page-hero-title { max-width: 1200px; text-wrap: balance; }
.news-tabs { display: flex; gap: 38px; border-bottom: 1px solid var(--border); margin-bottom: 38px; }
.news-tabs a { padding: 0 0 16px; font-size: 20px; color: var(--muted); border-bottom: 2px solid transparent; }
.news-tabs a[aria-current="page"] { color: var(--navy); border-color: var(--gold); }
.announcement-gate { max-width: 650px; padding: 36px; border: 1px solid var(--border); background: #fff; }
.announcement-gate h2 { font-family: var(--serif-display); font-size: 28px; margin: 0 0 12px; }
.announcement-gate p { color: var(--muted); line-height: 1.8; }
.announcement-gate label { display: block; margin: 24px 0 10px; }
.announcement-gate-fields { display: flex; gap: 12px; flex-wrap: wrap; }
.announcement-gate input { flex: 1; min-width: 0; padding: 12px; border: 1px solid var(--border); color: var(--navy); background: #fff; }
.announcement-error { color: #a33131 !important; }
.announcement-session { margin-top: 28px; text-align: right; }
.article-attachments { border-top: 1px solid var(--border); padding-top: 28px; margin-top: 32px; }
.article-attachments a { color: var(--navy); text-decoration: underline; }
.cms-content-loading { display: grid; place-items: center; min-height: 70vh; color: var(--muted); }
.member-photo-placeholder { display: grid; place-items: center; min-height: 220px; padding: 24px; color: var(--navy); background: var(--cream-2); }
@media (max-width: 600px) { .announcement-gate { padding: 24px; } .announcement-gate-fields { flex-direction: column; } .announcement-gate input { width: 100%; } }
.page-hero-title.article-title { font-size: clamp(28px, 3.6vw, 52px); line-height: 1.18; }
.page-hero-sub { max-width: 620px; margin: 24px 0 0; font-size: 16.5px; line-height: 1.9; color: rgba(255,255,255,0.82); font-weight: 300; }

/* breadcrumb */
.breadcrumb { display: flex; align-items: center; gap: 12px; margin-bottom: 26px; font-family: var(--label); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,0.62); }
.breadcrumb a { color: rgba(255,255,255,0.82); transition: color .3s; }
.breadcrumb a:hover { color: var(--gold-light); }
.bc-sep { color: rgba(255,255,255,0.4); }

/* division detail */
.detail-wrap { background: var(--cream); padding: 100px 0 52px; }
.detail-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 70px; align-items: start; }
.detail-lead { font-size: 19px; line-height: 2; color: var(--slate); margin: 0; }
.detail-title { max-width: 820px; margin: 42px 0 30px; font-family: var(--serif-sc); font-weight: 600; font-size: clamp(28px, 3vw, 44px); line-height: 1.32; color: var(--navy); text-wrap: balance; }
.detail-subheading { font-family: var(--serif-sc); font-size: clamp(20px, 1.55vw, 25px); line-height: 1.5; color: var(--navy); margin: 42px 0 16px; }
.detail-title + .detail-subheading { margin-top: 8px; }
.detail-p { max-width: 780px; font-size: clamp(15px, 1.05vw, 16.5px); line-height: 1.95; color: var(--ink); margin: 0 0 24px; }
.detail-bullet { display: flex; align-items: flex-start; gap: 14px; padding-left: 2px; }
.detail-bullet-dot { width: 7px; height: 7px; flex: none; margin-top: 12px; background: var(--gold); transform: rotate(45deg); }
.detail-bullet strong { color: var(--navy); font-weight: 700; }
.detail-side { border-left: 1px solid var(--border-soft); padding-left: 40px; }
.detail-sec { margin-top: 46px; padding-top: 38px; border-top: 1px solid var(--border-soft); }
.detail-h { font-family: var(--serif-sc); font-weight: 600; font-size: clamp(20px, 1.6vw, 26px); color: var(--navy); margin: 0 0 20px; letter-spacing: .01em; }
.detail-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 20px; }
.point { display: flex; gap: 14px; align-items: baseline; }
.point-dot { width: 7px; height: 7px; flex: none; background: var(--gold); transform: rotate(45deg); margin-top: 7px; }
.point span:last-child { font-size: 15.5px; line-height: 1.65; color: var(--ink); }
.detail-figure { position: relative; aspect-ratio: 21/9; overflow: hidden; background: var(--navy); }
.detail-figure img { width: 100%; height: 100%; object-fit: cover; }
.detail-back { background: var(--cream); padding: 4px 0 58px; text-align: center; }
.detail-back-link { display: inline-flex; align-items: center; gap: 11px; font-family: var(--label); letter-spacing: .12em; font-size: 14px; color: var(--navy); text-decoration: none; border: 1px solid var(--border); padding: 14px 32px; transition: background .3s, color .3s; }
.detail-back-link:hover { background: var(--navy); color: #fff; }
.detail-back-arrow { color: var(--gold); font-size: 16px; }

/* other divisions strip */
.other-div { background: #fff; border-top: 1px solid var(--border); padding: 100px 0; }
.other-head { margin-bottom: 46px; }
.other-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.other-card { display: block; }
.other-media { position: relative; aspect-ratio: 16/10; overflow: hidden; background: var(--navy); display: flex; align-items: center; justify-content: center; }
.other-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(.2,.6,.2,1); }
.other-card:hover .other-media img { transform: scale(1.06); }
.other-tile { font-family: var(--serif-display); font-size: 56px; font-weight: 600; color: rgba(216,184,120,0.3); }
.other-no { font-family: var(--label); font-size: 11px; letter-spacing: .16em; color: var(--gold); margin: 16px 0 6px; }
.other-name { font-family: var(--serif-sc); font-weight: 600; font-size: 18px; color: var(--navy); line-height: 1.4; }

/* CTA band */
.cta-band { position: relative; background: var(--navy); overflow: hidden; }
.cta-band-inner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 40px; padding: 84px 0; flex-wrap: wrap; }
.cta-title { font-family: var(--serif-display); font-weight: 500; color: #fff; font-size: clamp(26px, 3vw, 42px); line-height: 1.16; margin: 14px 0 14px; }
.cta-body { font-size: 15.5px; line-height: 1.9; color: rgba(255,255,255,0.72); margin: 0; max-width: 560px; }

/* article */
.article-wrap { background: var(--cream); padding: 96px 0 90px; }
.article-body { max-width: 760px; }
.article-body p { font-size: 17px; line-height: 2.05; color: var(--slate); margin: 0 0 26px; }
.article-back { margin-top: 20px; }

/* 404 page */
.notfound { position: relative; min-height: 88vh; display: flex; align-items: center; justify-content: center; text-align: center; background: var(--navy-deep); overflow: hidden; }
.notfound .hero-scrim { background-image: repeating-linear-gradient(135deg, rgba(255,255,255,0.035) 0 2px, transparent 2px 14px); }
.notfound-inner { position: relative; padding: 130px var(--gutter) 80px; }
.notfound-code { font-family: var(--serif-display); font-weight: 500; font-size: clamp(90px, 16vw, 200px); line-height: 1; color: var(--gold-light); }
.notfound-msg { font-size: 17px; line-height: 1.9; color: rgba(255,255,255,0.78); margin: 18px 0 36px; }

/* keyboard focus */
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* contact offices (shared with contact page) */
.contact-offices { display: grid; gap: 20px; }
.contact-page-body { padding-bottom: 80px; }
.contact-page-grid { grid-template-columns: minmax(300px, .72fr) minmax(0, 1.28fr); gap: clamp(52px, 6vw, 90px); }
/* 每個辦公室卡片右側配一張靜態地圖，點擊在新分頁開啟外部地圖。
   不內嵌 Google Maps iframe：倫敦辦公室令其在 EU/UK GDPR 下須先取得同意才可載入。 */
.c-office { display: grid; grid-template-columns: minmax(230px, 1fr) minmax(280px, .9fr); align-items: stretch; gap: 0; background: #fff; border: 1px solid var(--border); overflow: hidden; }
.c-office-text { padding: 28px 30px; }
.c-office .tg { font-family: var(--label); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.c-office .ct { font-family: var(--serif-sc); font-weight: 600; font-size: 19px; color: var(--navy); margin: 8px 0; }
.c-office .ad { font-size: 13.5px; line-height: 1.8; color: var(--muted); margin: 0; }
.c-office-map { position: relative; display: block; min-height: 220px; overflow: hidden; border-left: 1px solid var(--border); background: var(--cream-2); }
.c-office-map img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1s cubic-bezier(.2,.6,.2,1); }
.c-office-map:hover img { transform: scale(1.06); }
.c-office-open {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  opacity: 0; transition: opacity .35s;
  background: rgba(14,22,38,0.88); color: #fff;
  font-family: var(--label); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  padding: 9px 14px; white-space: nowrap;
}
.c-office-map:hover .c-office-open, .c-office-map:focus-visible .c-office-open { opacity: 1; }

@media (max-width: 720px) {
  .c-office { grid-template-columns: 1fr; }
  .c-office-map { min-height: 220px; border-left: none; border-top: 1px solid var(--border); }
}

@media (max-width: 1024px) {
  .contact-page-grid { grid-template-columns: 1fr; }
  .detail-grid { grid-template-columns: 1fr; gap: 44px; }
  .detail-side { border-left: none; padding-left: 0; border-top: 1px solid var(--border-soft); padding-top: 36px; }
  .other-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
  .page-hero-inner { padding-top: 110px; padding-bottom: 44px; }
  .page-section { padding: 80px 0; }
  .other-grid { grid-template-columns: 1fr; }
  .cta-band-inner { padding: 64px 0; }
}

/* ============================================================
   ROUND 2 — dropdown nav, CEO, milestones, greenland, team, ESG, map
   ============================================================ */
.nav-item { position: relative; display: flex; align-items: center; flex: none; }
.nav-item .caret { font-size: 9px; margin-left: 5px; opacity: .7; }
.nav-sub { position: absolute; top: 100%; left: 0; transform: translateY(8px); min-width: 188px; background: rgba(246,243,236,0.98); backdrop-filter: blur(12px); border: 1px solid var(--border); box-shadow: 0 22px 44px -24px rgba(22,35,59,0.45); padding: 10px 0; opacity: 0; visibility: hidden; transition: opacity .26s, transform .26s; z-index: 70; }
.site-nav:not(.solid) .nav-sub { background: rgba(14,22,38,0.96); border-color: rgba(255,255,255,0.12); }
.nav-item.has-sub:hover .nav-sub, .nav-item.has-sub:focus-within .nav-sub { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-sub a { display: block; padding: 9px 22px; font-family: var(--label); font-size: 12.5px; letter-spacing: .08em; color: #3a4452; white-space: nowrap; transition: color .25s, background .25s; }
.site-nav:not(.solid) .nav-sub a { color: rgba(255,255,255,0.85); }
.nav-sub a:hover { color: var(--gold); background: rgba(176,137,74,0.08); }
.nav-sub-soon { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 9px 22px; font-family: var(--label); font-size: 12.5px; letter-spacing: .08em; color: #9aa0a8; white-space: nowrap; cursor: default; }
.site-nav:not(.solid) .nav-sub-soon { color: rgba(255,255,255,0.45); }
.nav-sub-soon em { font-style: normal; font-size: 10px; letter-spacing: .04em; color: var(--gold); border: 1px solid currentColor; border-radius: 2px; padding: 1px 5px; opacity: .8; }

/* 公司簡介 —— 導覽列「公司」的落點，排在執行長致詞之前 */
.company { background: #fff; padding: 120px 0 100px; border-bottom: 1px solid var(--border); }

/* 開場：居中窄欄，標題 + 大字導語，克制留白 */
.company-intro { max-width: 860px; margin: 0 auto; text-align: center; }
.company-intro .rule { margin-left: auto; margin-right: auto; }
.company-intro .company-title { font-size: clamp(30px, 3.4vw, 48px); margin: 0; }
.company-lead { margin: 30px 0 0; font-size: 20px; line-height: 1.9; color: var(--navy); }

/* 全寬數字帶：四欄豎線分隔，作為節奏錨點 */
.company-stats {
  margin-top: 76px; display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.company-stat { padding: 40px 30px; text-align: center; }
.company-stat:not(:first-child) { border-left: 1px solid var(--border-soft); }
.company-stat .fig-n { font-family: var(--serif-display); font-weight: 500; font-size: clamp(34px, 3.6vw, 52px); line-height: 1; color: var(--gold); }
.company-stat .fig-l { margin-top: 12px; font-size: 13px; line-height: 1.5; letter-spacing: .02em; color: var(--muted); }

/* 正文：居中窄欄，每行約 38 字、行高 1.9、段距寬，低密度可讀 */
.company-prose { max-width: 900px; margin: 64px auto 0; }
.company-prose .about-p { font-size: 16.5px; line-height: 1.92; color: var(--slate); margin: 0 0 28px; }
.company-prose .about-p:last-child { margin-bottom: 0; }
/* 集團子公司頁（天盛發展 / 柏匯天盛 / 安達）：正文單獨成段，上下留白對稱，文字在白底中垂直居中 */
#segment.company { padding: 100px 0; }
#segment .company-prose { margin-top: 0; }
@media (max-width: 680px) { #segment.company { padding: 64px 0; } }
/* 子公司頁 hero 標題下的英文名：作為第二名稱而非說明文字，字級加大 */
.page-hero-sub.is-name { font-size: clamp(19px, 1.6vw, 23px); line-height: 1.5; margin-top: 18px; font-weight: 400; }

/* 底部：投資準則四欄卡片帶 */
.company-values { max-width: 1080px; margin: 84px auto 0; padding-top: 52px; border-top: 1px solid var(--border); }
.cv-head { text-align: center; font-family: var(--serif-display); font-weight: 500; font-size: 24px; color: var(--navy); margin: 0 0 32px; }
.cv-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.cv-item { padding: 30px 26px; background: var(--cream); border: 1px solid var(--border); transition: transform .5s, box-shadow .5s; }
.cv-item:hover { transform: translateY(-6px); box-shadow: 0 26px 50px -28px rgba(22,35,59,0.4); }
.cv-idx { font-family: var(--serif-display); color: var(--gold); font-size: 16px; letter-spacing: .14em; }
.cv-txt { margin-top: 14px; font-size: 16px; line-height: 1.5; color: var(--navy); }

@media (max-width: 900px) {
  .company-stats { grid-template-columns: 1fr 1fr; border: 0; gap: 34px 24px; margin-top: 52px; }
  .company-stat { padding: 0 !important; border: 0 !important; }
  .cv-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 540px) {
  .company-lead { font-size: 18px; }
  .cv-grid { grid-template-columns: 1fr; }
}

.ceo { background: var(--cream); padding: 120px 0 90px; }
.ceo-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 80px; align-items: start; }
/* 圖在上、文字在下：分隔線置於標題與照片之間（全寬），照片下方接職銜＋簽名。 */
.ceo-portrait { margin: 40px 0 0; padding-top: 34px; border-top: 1px solid var(--border-soft); }
/* 透明底人像：直接坐落於米色頁面，不加外框與投影。 */
.ceo-portrait img { display: block; width: 100%; max-width: 300px; height: auto; }
.ceo-sign { margin-top: 26px; padding-top: 0; border-top: none; }
/* 簽名圖原為白墨，疊在米色底上等同隱形。已改用深藍版，不再降低不透明度。 */
.ceo-sign img { display: block; width: min(190px, 100%); height: auto; margin-bottom: 0; margin-top: 6px; }
.ceo-name { font-family: var(--serif-display); font-size: 26px; color: var(--navy); font-weight: 600; }
.ceo-role { font-size: 13px; color: #6b6457; margin-top: 4px; letter-spacing: .03em; }
.ceo-block + .ceo-block { margin-top: 40px; padding-top: 34px; border-top: 1px solid var(--border-soft); }
.ceo-h { font-family: var(--serif-sc); font-weight: 600; font-size: clamp(19px, 1.5vw, 23px); color: var(--navy); margin: 0 0 18px; line-height: 1.4; letter-spacing: .01em; }

@media (max-width: 980px) {
  .company-grid { grid-template-columns: 1fr; gap: 44px; }
  .company-head { position: static; }
}

.milestones { background: #fff; border-top: 1px solid var(--border); padding: 110px 0; }
.ms-line { position: relative; max-width: 1000px; margin: 0 auto; padding: 0; list-style: none; }
/* 底層灰軸 */
.ms-line::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--border); transform: translateX(-50%); }
/* 金色進度軸：隨滾動由上而下生長（--ms-progress 由 JS 更新 0→1） */
.ms-line::after { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: linear-gradient(var(--gold), var(--gold-light)); transform: translateX(-50%) scaleY(var(--ms-progress, 0)); transform-origin: 50% 0; transition: transform .15s linear; }
.ms-item { position: relative; width: 50%; padding: 0 48px 56px 0; box-sizing: border-box; }
.ms-item.right { margin-left: 50%; padding: 0 0 56px 48px; }
.ms-dot { position: absolute; top: 8px; right: -7px; width: 14px; height: 14px; background: var(--gold); transform: rotate(45deg); z-index: 2; }
.ms-item.right .ms-dot { right: auto; left: -7px; }

/* ---- 里程碑滾動入場：卡片兩側滑入 + 菱形節點回彈彈入（複刻舊站 slide 動效） ---- */
/* data-revealable 由 JS 加上；未載入 JS 時卡片保持可見（漸進增強）。 */
.ms-item[data-revealable] { opacity: 1; transform: none; }
.ms-card { transition: opacity .85s cubic-bezier(.2,.65,.2,1), transform .85s cubic-bezier(.2,.65,.2,1); }
.ms-item[data-revealable] .ms-card { opacity: 0; transform: translateX(-46px); }
.ms-item.right[data-revealable] .ms-card { transform: translateX(46px); }
.ms-item[data-revealable].is-visible .ms-card { opacity: 1; transform: none; }
.ms-dot { transition: transform .6s cubic-bezier(.34,1.56,.64,1) .12s; }
.ms-item[data-revealable] .ms-dot { transform: rotate(45deg) scale(0); }
.ms-item.right[data-revealable] .ms-dot { transform: rotate(45deg) scale(0); }
.ms-item[data-revealable].is-visible .ms-dot { transform: rotate(45deg) scale(1); }
.ms-card { background: var(--cream); border: 1px solid var(--border-soft); padding: 26px 28px 30px; }
.ms-year { font-family: var(--serif-display); font-weight: 600; font-size: clamp(28px, 3vw, 34px); line-height: 1.18; color: var(--navy); margin: 0 0 16px; }
.ms-img { aspect-ratio: 16/9; overflow: hidden; margin-bottom: 18px; background: var(--cream-2); }
.ms-img img { width: 100%; height: 100%; object-fit: cover; }
.ms-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.ms-list li { font-size: 14.5px; line-height: 1.6; color: var(--slate); padding-left: 16px; position: relative; }
.ms-list li::before { content: ''; position: absolute; left: 0; top: 9px; width: 5px; height: 5px; background: var(--gold); transform: rotate(45deg); }

.gl-sec { background: var(--cream); padding: 80px 0; border-top: 1px solid var(--border); }
.gl-sec:nth-child(even) { background: #fff; }
.gl-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 60px; align-items: center; }
.gl-sec.reverse .gl-media { order: 2; }
.gl-media { aspect-ratio: 4/3; overflow: hidden; background: var(--navy); border: 1px solid var(--border); }
.gl-media img { width: 100%; height: 100%; object-fit: cover; }
.gl-title { font-family: var(--serif-display); font-weight: 600; font-size: clamp(24px, 2.6vw, 36px); color: var(--navy); margin: 0 0 22px; }
.gl-body { font-size: 16px; line-height: 1.95; color: var(--slate); margin: 0; }
.gl-table { width: 100%; border-collapse: collapse; }
.gl-table th, .gl-table td { text-align: left; padding: 13px 0; border-bottom: 1px solid var(--border-soft); vertical-align: top; font-size: 14.5px; line-height: 1.6; }
.gl-table th { width: 34%; color: var(--gold); font-weight: 600; font-family: var(--serif-sc); padding-right: 18px; }
.gl-table td { color: var(--slate); }
.gl-pts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.gl-pts li { display: flex; flex-direction: column; gap: 5px; }
.gl-pts strong { font-family: var(--serif-sc); font-size: 16px; color: var(--navy); }
.gl-pts span { font-size: 14.5px; line-height: 1.75; color: var(--muted); }
.gl-steps { display: flex; flex-direction: column; gap: 18px; }
.gl-step { display: flex; gap: 18px; align-items: baseline; }
.gl-step-n { font-family: var(--serif-display); font-weight: 600; font-size: 22px; color: var(--gold); flex: none; }
.gl-step strong { display: block; font-family: var(--serif-sc); font-size: 16px; color: var(--navy); margin-bottom: 4px; }
.gl-step span { font-size: 14.5px; line-height: 1.75; color: var(--muted); }

.gl-facts { background: var(--navy-deep); border-top: 1px solid rgba(255,255,255,0.08); }
.gl-facts-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.gl-fact { padding: 38px 28px 42px; border-left: 1px solid rgba(255,255,255,0.12); }
.gl-fact:first-child { border-left: none; }
.gl-fact-n { font-family: var(--serif-display); font-size: clamp(32px, 4vw, 54px); line-height: 1; color: var(--gold-light); }
.gl-fact-l { margin-top: 12px; font-size: 13.5px; line-height: 1.6; color: rgba(255,255,255,0.68); }

.team-roles { background: var(--cream); padding: 90px 0; }
.roles-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.role-card { background: #fff; border: 1px solid var(--border); padding: 34px 34px 36px; border-left: 3px solid var(--gold); }
.role-t { font-family: var(--serif-sc); font-weight: 600; font-size: 20px; color: var(--navy); margin: 0 0 14px; }
.role-d { font-size: 14.5px; line-height: 1.85; color: var(--muted); margin: 0; }
.team-members { background: #fff; border-top: 1px solid var(--border); padding: 90px 0; }
.team-members .link-dark { font-size: 17px; line-height: 1.6; }
.members-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.member-card { text-align: center; }
.member-photo { aspect-ratio: 3/4; background: var(--cream); border: 1px dashed var(--border-soft); display: flex; align-items: center; justify-content: center; padding: 20px; }
.member-photo span { font-family: var(--label); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #a89f8d; line-height: 1.6; }
.member-name { margin-top: 14px; font-family: var(--serif-display); font-size: 19px; color: var(--navy); }

.esg-sec { background: var(--cream); padding: 84px 0; border-top: 1px solid var(--border); }
.esg-sec:nth-child(even) { background: #fff; }
.esg-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 60px; align-items: center; }
.esg-sec.reverse .esg-media { order: 2; }
.esg-media { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--navy); }
.esg-media img { width: 100%; height: 100%; object-fit: cover; }
.esg-no { position: absolute; top: 20px; left: 24px; z-index: 2; font-family: var(--serif-display); font-weight: 600; font-size: 30px; color: rgba(255,255,255,0.9); }
.esg-k { font-family: var(--label); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin-bottom: 12px; }
.esg-t { font-family: var(--serif-display); font-weight: 600; font-size: clamp(26px, 3vw, 40px); color: var(--navy); margin: 0 0 14px; }
.esg-goal { font-size: 16px; line-height: 1.8; color: var(--slate); margin: 0 0 26px; font-weight: 500; }
.esg-pts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.esg-pts li { display: flex; flex-direction: column; gap: 5px; padding-left: 18px; position: relative; }
.esg-pts li::before { content: ''; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; background: var(--gold); transform: rotate(45deg); }
.esg-pts strong { font-family: var(--serif-sc); font-size: 15.5px; color: var(--navy); }
.esg-pts span { font-size: 14px; line-height: 1.75; color: var(--muted); }
.esg-overview { background: var(--cream); padding: 88px 0 70px; border-top: 1px solid var(--border); }
.sustain-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.sustain-card { background: #fff; border: 1px solid var(--border); overflow: hidden; transition: transform .5s, box-shadow .5s, border-color .5s; }
.sustain-card:hover { transform: translateY(-6px); box-shadow: 0 26px 50px -30px rgba(22,35,59,0.36); border-color: rgba(176,137,74,0.42); }
.sustain-img { position: relative; aspect-ratio: 16/10; overflow: hidden; background: var(--navy); }
.sustain-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s cubic-bezier(.2,.6,.2,1); }
.sustain-card:hover .sustain-img img { transform: scale(1.06); }
.sustain-body { padding: 30px 30px 34px; }
.sustain-k { font-family: var(--label); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin-bottom: 12px; }
.sustain-t { font-family: var(--serif-sc); font-weight: 600; font-size: 22px; color: var(--navy); margin: 0 0 14px; line-height: 1.35; }
.sustain-d { font-size: 14.5px; line-height: 1.85; color: var(--muted); margin: 0; }
.sustain-link { display: inline-flex; gap: 8px; margin-top: 22px; font-family: var(--label); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--navy); }
.esg-detail { background: var(--cream); padding: clamp(82px, 9vw, 124px) 0; }
.esg-detail-wrap { max-width: 980px; }
.esg-detail-intro { max-width: 780px; margin-bottom: clamp(54px, 7vw, 84px); }
.esg-detail-intro p { margin: 28px 0 0; font-size: clamp(18px, 1.55vw, 22px); line-height: 1.9; color: var(--slate); }
.esg-detail-points { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }
.esg-detail-points li { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 26px; padding: clamp(34px, 4.5vw, 52px) 0; border-bottom: 1px solid var(--border); }
.esg-detail-no { font-family: var(--serif-display); font-size: 25px; color: var(--gold); }
.esg-detail-points h2 { margin: 0 0 14px; font-family: var(--serif-sc); font-size: clamp(21px, 2vw, 28px); line-height: 1.42; color: var(--navy); }
.esg-detail-points p { margin: 0; font-size: 16px; line-height: 1.95; color: var(--slate); }
.esg-detail-closing { max-width: 820px; margin-top: clamp(48px, 6vw, 72px); padding-left: 28px; border-left: 3px solid var(--gold); }
.esg-detail-closing p { margin: 0 0 30px; font-family: var(--serif-sc); font-size: clamp(19px, 1.8vw, 25px); line-height: 1.8; color: var(--navy); }
.esg-outlook { background: var(--navy-deep); padding: 92px 0; text-align: center; }
.esg-quote { font-family: var(--serif-display); font-style: italic; font-weight: 500; font-size: clamp(26px, 3.3vw, 42px); color: #fff; margin: 16px 0 22px; }
.esg-outlook-body { max-width: 720px; margin: 0 auto; font-size: 16px; line-height: 1.95; color: rgba(255,255,255,0.74); }

.news-list { border-top: 1px solid var(--border); }
.news-list-row { position: relative; display: grid; grid-template-columns: 150px minmax(0, 1fr) 260px 42px; gap: 30px; align-items: center; padding: 28px 0; border-bottom: 1px solid var(--border); }
.news-list-date span { display: block; font-family: var(--serif-display); font-size: 28px; color: var(--navy); line-height: 1; }
.news-list-date small { display: block; margin-top: 9px; font-family: var(--label); font-size: 10.5px; letter-spacing: .15em; text-transform: uppercase; color: var(--gold); }
.news-list-copy h3 { font-family: var(--serif-sc); font-weight: 600; font-size: clamp(20px, 2.1vw, 28px); color: var(--navy); line-height: 1.35; margin: 0 0 10px; transition: color .3s; }
.news-list-copy p { font-size: 14.5px; line-height: 1.8; color: var(--muted); margin: 0; }
.news-list-img { aspect-ratio: 16/9; overflow: hidden; background: var(--navy); }
.news-list-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.2,.6,.2,1); }
.news-list-arrow { font-family: var(--serif-display); font-size: 24px; color: var(--gold); transition: transform .3s; }
.news-list-row:hover .news-list-copy h3 { color: var(--gold); }
.news-list-row:hover .news-list-img img { transform: scale(1.05); }
.news-list-row:hover .news-list-arrow { transform: translateX(6px); }

/* --- newsroom hysan-style list --- */
.wrap.narrow-lg { max-width: 1040px; }
.nh-filter { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding-bottom: 20px; border-bottom: 2px solid var(--navy); }
.nh-fields { display: flex; gap: 30px; flex-wrap: wrap; }
.nh-field { display: flex; flex-direction: column; gap: 8px; }
.nh-field span { font-family: var(--label); font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.nh-field select { font-family: var(--serif-sc); font-size: 16px; color: var(--navy); background: transparent; border: none; border-bottom: 1px solid var(--border); padding: 6px 30px 8px 2px; min-width: 150px; cursor: pointer; -webkit-appearance: none; appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%), linear-gradient(135deg, var(--gold) 50%, transparent 50%); background-position: right 10px center, right 5px center; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.nh-field select:focus { outline: none; border-bottom-color: var(--gold); }
.nh-count { font-family: var(--label); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.nh-list { margin-top: 4px; }
.nh-row { display: grid; grid-template-columns: 120px minmax(0, 1fr) 40px; gap: 28px; align-items: center; padding: 30px 6px 30px 2px; border-bottom: 1px solid var(--border); text-decoration: none; transition: padding .35s cubic-bezier(.2,.6,.2,1), background .35s; }
.nh-row:hover { background: linear-gradient(90deg, rgba(176,137,74,0.06), transparent 70%); padding-left: 16px; }
.nh-date { font-family: var(--serif-display); font-size: 21px; color: var(--gold); letter-spacing: .02em; }
.nh-tag { display: inline-block; font-family: var(--label); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--border); padding: 4px 10px; margin-bottom: 12px; }
.nh-title { font-family: var(--serif-sc); font-weight: 600; font-size: clamp(18px, 1.8vw, 23px); color: var(--navy); line-height: 1.4; margin: 0; transition: color .3s; }
.nh-row:hover .nh-title { color: var(--gold-dark, #8a6a2f); }
.nh-arrow { font-family: var(--serif-display); font-size: 22px; color: var(--gold); text-align: right; transition: transform .35s; }
.nh-row:hover .nh-arrow { transform: translateX(6px); }
.nh-empty { padding: 40px 0; text-align: center; color: var(--muted); font-size: 15px; }


@media (max-width: 980px) {
  .ceo-grid { grid-template-columns: 1fr; gap: 44px; }
  .gl-grid, .esg-grid { grid-template-columns: 1fr; gap: 36px; }
  .gl-sec.reverse .gl-media, .esg-sec.reverse .esg-media { order: 0; }
  .gl-facts-grid, .sustain-grid { grid-template-columns: 1fr 1fr; }
  .news-list-row { grid-template-columns: 110px minmax(0, 1fr) 180px 30px; gap: 22px; }
  .roles-grid { grid-template-columns: 1fr; }
  .members-grid { grid-template-columns: 1fr 1fr; }
  .ms-line::before { left: 18px; }
  .ms-line::after { left: 18px; }
  .ms-item, .ms-item.right { width: 100%; margin-left: 0; padding: 0 0 40px 48px; }
  .ms-dot, .ms-item.right .ms-dot { left: 11px; right: auto; }
  /* 單列時兩側卡片統一從左滑入 */
  .ms-item.right[data-revealable] .ms-card { transform: translateX(-46px); }
  .ms-item.right[data-revealable].is-visible .ms-card { transform: none; }
}
@media (max-width: 720px) {
  .gl-facts-grid, .sustain-grid { grid-template-columns: 1fr; }
  .gl-fact { border-left: none; border-top: 1px solid rgba(255,255,255,0.12); }
  .gl-fact:first-child { border-top: none; }
  .news-list-row { grid-template-columns: 1fr; gap: 16px; }
  .news-list-img { order: -1; }
  .news-list-arrow { display: none; }
  .nh-row { grid-template-columns: 88px minmax(0, 1fr) 24px; gap: 16px; padding: 22px 2px; }
  .nh-date { font-size: 16px; }
  .nh-arrow { font-size: 18px; }
}
@media (max-width: 860px) {
  .nav-links .nav-item { display: none; }
}

/* ============================================================
   JM Enigma 2 — stable pages, disclosure navigation and profiles
   ============================================================ */
html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 104px; }
:where(a, button, select, input):focus-visible { outline: 3px solid #d7ad63; outline-offset: 4px; }

.nav-toggle { display: none; }
/* 箭頭參與排版，選單組之間的 gap 保留完整留白。 */
.nav-disclosure {
  flex: 0 0 16px;
  margin-left: 4px; width: 16px; height: 20px; padding: 0;
  border: 0; background: transparent; color: rgba(255,255,255,.86); cursor: pointer;
}
.site-nav.solid .nav-disclosure { color: var(--navy); }
.nav-disclosure span { display: inline-block; transition: transform .22s ease; }
.nav-disclosure[aria-expanded="true"] span { transform: rotate(180deg); }
.nav-item.has-sub.is-open .nav-sub,
.nav-item.has-sub:hover .nav-sub,
.nav-item.has-sub:focus-within .nav-sub { opacity: 1; visibility: visible; transform: translateY(0); }

.businesses-page { padding-top: 72px; }
.businesses-intro { max-width: 760px; margin: 0 0 48px; }
.company-title { font-size: clamp(28px,3.2vw,44px); }
.ceo-page-heading { font-size: clamp(28px,3.2vw,44px); }
.ceo-role-primary { margin: 0 0 22px; color: var(--navy); font-family: var(--serif-sc); font-size: 18px; }
.ceo-sign img { width: min(190px, 100%); height: auto; object-fit: contain; }
.detail-hero > img, .detail-figure > img { width: 100%; height: 100%; object-fit: cover; }

.member-card-link { position: relative; display: block; text-align: left; color: inherit; }
.member-card-link .member-photo { padding: 0; border-style: solid; overflow: hidden; }
.member-card-link .member-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.member-card-link:hover .member-photo img { transform: scale(1.035); }
.member-card-copy { padding-right: 28px; }
.member-role { margin-top: 5px; color: var(--muted); font-size: 13px; }
.member-arrow { position: absolute; right: 0; bottom: 3px; color: var(--gold); font-size: 22px; transition: transform .25s ease; }
.member-card-link:hover .member-arrow { transform: translateX(5px); }
.member-card-reserved { color: var(--muted); }
.member-profile { background: var(--cream); padding: clamp(78px, 9vw, 124px) 0; }
.member-profile-grid { display: grid; grid-template-columns: minmax(280px, .78fr) 1.22fr; gap: clamp(44px, 7vw, 100px); align-items: start; }
.member-profile-photo { overflow: hidden; background: var(--navy); }
.member-profile-photo img { display: block; width: 100%; height: auto; }
.member-profile-role { font-family: var(--serif-display); font-size: clamp(28px, 3vw, 44px); color: var(--navy); margin: 0 0 28px; }

.nh-row { grid-template-columns: 138px minmax(0, 1fr) 32px; }
.nh-date { display: flex; flex-direction: column; gap: 10px; align-self: start; padding-top: 6px; }
.nh-event { font-family: var(--sans); font-size: 11px; line-height: 1.5; color: var(--muted); }
.nh-title a { color: inherit; text-decoration: none; }
.nh-title a::after { content: ''; position: absolute; inset: 0; }
.nh-row { position: relative; }
.nh-main { position: relative; z-index: 1; }
.nh-source { display: block; margin-top: 12px; color: var(--muted); font-size: 12px; }
.nh-media { aspect-ratio: 3 / 2; overflow: hidden; background: var(--navy); }
.nh-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .65s ease; }
.nh-row:hover .nh-media img { transform: scale(1.035); }

.route-error { min-height: 74vh; display: flex; align-items: center; padding: 160px 0 90px; background: var(--navy-deep); color: #fff; }
.route-error-inner { text-align: center; }
.route-error h1, .notfound-title { margin: 12px 0 18px; font-family: var(--serif-display); font-size: clamp(38px, 6vw, 72px); }
.route-error p { margin: 0 auto 32px; color: rgba(255,255,255,.76); }
.notfound-title { color: #fff; }

@media (max-width: 700px) {
  .brand-zh { display: none; }
  .brand-word { font-size: 16px; letter-spacing: .12em; transform: translateY(5px); }
  html[lang="en"] .brand { gap: 12px; }
  html[lang="en"] .brand-word { font-size: clamp(12px, 3.5vw, 14px); }
}

/* 窄視窗使用展開選單，保留文字和選單組的間距。 */
@media (max-width: 1279px) {
  .nav-inner { height: 76px; }
  .brand-logo { height: 36px; }
  .nav-toggle {
    display: inline-flex; align-items: center; gap: 10px; margin-left: auto;
    color: #fff; background: transparent; border: 1px solid rgba(255,255,255,.5);
    padding: 9px 12px; font-family: var(--label); letter-spacing: .1em; cursor: pointer;
  }
  .site-nav.solid .nav-toggle { color: var(--navy); border-color: var(--navy); }
  .nav-toggle-icon, .nav-toggle-icon::before, .nav-toggle-icon::after { display: block; width: 18px; height: 1px; background: currentColor; content: ''; transition: transform .2s; }
  .nav-toggle-icon { position: relative; }
  .nav-toggle-icon::before { position: absolute; top: -5px; }
  .nav-toggle-icon::after { position: absolute; top: 5px; }
  .nav-toggle[aria-expanded="true"] .nav-toggle-icon { background: transparent; }
  .nav-toggle[aria-expanded="true"] .nav-toggle-icon::before { transform: translateY(5px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle-icon::after { transform: translateY(-5px) rotate(-45deg); }
  .nav-links {
    display: none; position: absolute; left: 0; right: 0; top: 76px; max-height: calc(100vh - 76px); overflow-y: auto;
    flex-direction: column; align-items: stretch; gap: 0; padding: 14px var(--gutter) 24px;
    background: #0e1626; border-bottom: 1px solid rgba(255,255,255,.12);
  }
  .site-nav.solid .nav-links { background: #f6f3ec; border-color: var(--border); }
  .nav-links.is-open { display: flex; }
  .lang-switch { align-self: flex-start; margin-left: 0; margin-top: 14px; }
  .nav-links .nav-item { display: flex; flex-wrap: wrap; align-items: center; border-bottom: 1px solid rgba(255,255,255,.1); }
  .site-nav.solid .nav-links .nav-item { border-color: var(--border); }
  .nav-links .nav-link { display: block; flex: 1; padding: 15px 0; font-size: 14px; }
  /* 手機版導覽垂直堆疊，箭頭回到流內、置於每列右側 */
  .nav-disclosure { flex-basis: 44px; margin-left: 2px; width: 44px; height: 44px; }
  .nav-sub, .nav-item.has-sub:hover .nav-sub, .nav-item.has-sub:focus-within .nav-sub {
    position: static; display: none; flex: 0 0 100%; min-width: 0; transform: none; opacity: 1; visibility: visible;
    padding: 0 0 12px 16px; border: 0; box-shadow: none; background: transparent; backdrop-filter: none;
  }
  .nav-item.has-sub.is-open .nav-sub { display: block; transform: none; }
  .nav-sub a { padding: 10px 0; }
  .lang-btn { margin-top: 16px; align-self: flex-start; }
}

@media (max-width: 860px) {
  .member-profile-grid { grid-template-columns: 1fr; }
  .member-profile-photo { max-width: 560px; }
  .nh-row { grid-template-columns: 110px minmax(0, 1fr) 28px; gap: 18px; }
  .home-divisions-head { grid-template-columns: 1fr; gap: 24px; }
  .home-divisions-head .eyebrow, .home-divisions-head .rule { grid-column: auto; }
  .home-divisions-head .rule { margin-top: -12px; }
}

@media (max-width: 680px) {
  .nav-inner { gap: 16px; padding-inline: 22px; }
  .nav-toggle-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .hero-title { font-size: clamp(40px, 13vw, 64px); }
  .nh-row { grid-template-columns: 1fr 24px; gap: 14px; padding: 24px 2px; }
  .nh-date { grid-column: 1; flex-direction: row; align-items: baseline; flex-wrap: wrap; }
  .nh-main { grid-column: 1; }
  .nh-date { grid-row: 1; }
  .nh-main { grid-row: 2; }
  .nh-arrow { grid-column: 2; grid-row: 2; }
  .detail-wrap { padding: 76px 0 68px; }
  .detail-title { margin-top: 34px; }
  .esg-detail-points li { grid-template-columns: 42px minmax(0, 1fr); gap: 14px; }
  .contact-email { font-size: 23px; overflow-wrap: anywhere; }
  .newsletter-card { padding: 30px 24px; }
  .newsletter-form button { padding: 0 16px; }
  .members-grid { grid-template-columns: 1fr; }
}

/* =================== 寬螢幕／投影 =================== */
/* 內容欄寬與導覽尺度隨大螢幕上調，避免在會議室投影時變成正中一條窄帶。 */
@media (min-width: 1680px) {
  :root { --maxw: 1520px; --gutter: 60px; }
  .nav-inner { height: 100px; }
  .brand-logo { height: 46px; }
  .brand-word { font-size: 24px; }
  [id] { scroll-margin-top: 120px; }
}
@media (min-width: 2200px) {
  :root { --maxw: 1660px; --gutter: 76px; }
  .nav-inner { height: 108px; }
  .brand-logo { height: 52px; }
  [id] { scroll-margin-top: 128px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ===== 首頁 hero 兩封面錯位滑動輪播 ===== */
.hero-carousel { position: relative; display: grid; min-height: 100vh; background: var(--navy-deep); overflow: hidden; }
.hc-slide {
  position: relative; grid-area: 1 / 1; min-width: 0;
  transform: translateX(-100%);
  transition: transform 1.2s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
  pointer-events: none;
}
.hc-slide.is-center { transform: translateX(0); z-index: 2; pointer-events: auto; }
.hc-slide.is-left { transform: translateX(-100%); }
.hc-slide.is-right { transform: translateX(100%); }
.hc-slide.no-anim { transition: none; }
.hc-slide.hc-link { text-decoration: none; color: inherit; }
.hc-slide.hc-link.is-center { cursor: pointer; }
.hc-bg { position: absolute; inset: -2.6%; overflow: hidden; z-index: 0; }
.hc-bg img { width: 100%; height: 100%; object-fit: cover; transform-origin: 56% 46%; animation: hcDrift 70s ease-in-out infinite alternate; }
/* 背景水波動態層：WebGL 畫布疊在封面圖上，首幀繪出後淡入接管；不支援時保持隱藏，露出底下靜態圖。 */
.hc-gl { position: absolute; inset: 0; display: block; width: 100%; height: 100%; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .8s ease; }
@keyframes hcDrift { 0% { transform: scale(1.05) translate3d(0,0,0); } 100% { transform: scale(1.14) translate3d(-1.6%,-1.1%,0); } }
/* hero 氛圍層：僅保留藍色主題的經緯／數據線；海面微光與掃光已移除。 */
.hc-fx { position: absolute; inset: -4%; z-index: 1; pointer-events: none; overflow: hidden; opacity: 0; transition: opacity .9s ease; }
.hc-slide.is-center .hc-fx { opacity: 1; }
.hc-grid { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; }
.hc-slide:not(.hc-blue) .hc-grid { display: none; }
.hc-grid path { stroke-linecap: round; vector-effect: non-scaling-stroke; }
.hg-lat, .hg-lon { stroke: #7fb0f2; stroke-width: 1; opacity: .17; stroke-dasharray: 5 13; animation: hgDrift 24s linear infinite; }
.hg-lon { opacity: .13; animation-duration: 32s; animation-direction: reverse; }
.hg-flow { stroke: url(#hcGrad); stroke-width: 2; opacity: .8; stroke-dasharray: 22 184; filter: drop-shadow(0 0 4px rgba(127,176,242,0.5)); animation: hgFlow 7.5s linear infinite; }
.hg-flow.alt { stroke-width: 1.4; opacity: .42; stroke-dasharray: 14 150; animation: hgFlow 11s linear infinite reverse; filter: none; }
.hg-node { fill: #cfe2ff; opacity: 0; animation: hgPulse 4.2s ease-in-out infinite; }
.hg-node:nth-of-type(2) { animation-delay: 1s; }
.hg-node:nth-of-type(3) { animation-delay: 2s; }
.hg-node:nth-of-type(4) { animation-delay: 3s; }
@keyframes hgDrift { to { stroke-dashoffset: -180; } }
@keyframes hgFlow { from { stroke-dashoffset: 206; } to { stroke-dashoffset: 0; } }
@keyframes hgPulse { 0%, 100% { opacity: 0; } 45% { opacity: .85; } }
.hc-scrim { position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, rgba(14,22,38,0.72) 0%, rgba(14,22,38,0.3) 42%, rgba(14,22,38,0.9) 100%); }
.hc-slide.hc-blue .hc-scrim { background: linear-gradient(180deg, rgba(8,14,30,0.8) 0%, rgba(15,28,52,0.42) 44%, rgba(5,10,20,0.94) 100%); }
.hc-inner { position: relative; z-index: 3; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding: 168px var(--gutter) 110px; }
/* 平板以上用首尾自動留白垂直居中；空間不足時由內容撐高首屏。 */
@media (min-width: 681px) {
  .hc-inner > :first-child { margin-top: auto; }
  .hc-inner > :last-child { margin-bottom: auto; }
}
@media (max-width: 760px) { .hg-lat, .hg-lon, .hg-node { animation: none; } .hc-bg { inset: 0; } }
@media (prefers-reduced-motion: reduce) { .hc-bg img, .hg-lat, .hg-lon, .hg-flow, .hg-node { animation: none !important; } }
.hc-eyebrow { font-family: var(--label); font-size: 14px; letter-spacing: .34em; text-transform: uppercase; margin: 0 0 26px; }
.hc-slide.hc-blue .hc-eyebrow { color: rgba(255,255,255,0.55); }
.hc-slide.hc-gold .hc-eyebrow { color: #c9a96e; }
.hc-title { font-family: var(--serif-display); font-weight: 500; color: #fff; font-size: clamp(34px, 5.5vw, 86px); line-height: 1.18; margin: 0; letter-spacing: .004em; }
/* 英文主標題字數多於中文，桌面端收一檔字號，兩行長度與中文版相當 */
html[lang="en"] .hc-title { font-size: clamp(52px, 4.2vw, 76px); }
.hc-title span { display: block; }
.hc-sub { max-width: 660px; margin: 30px 0 0; font-size: 17px; line-height: 1.95; color: rgba(255,255,255,0.84); font-weight: 300; }
.hc-actions { display: flex; align-items: center; gap: 24px; margin-top: 44px; flex-wrap: wrap; }
.hc-btn { display: inline-block; font-family: var(--label); font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase; padding: 17px 36px; transition: background .35s, color .35s, border-color .35s, transform .35s, box-shadow .35s; }
.hc-btn-primary { background: #4a7abf; color: #fff; }
.hc-btn-primary:hover { background: #5d8fd4; transform: translateY(-2px); box-shadow: 0 16px 34px -14px rgba(74,122,191,0.6); }
.hc-slide.hc-gold .hc-btn-primary { background: #c9a96e; color: #18202c; }
.hc-slide.hc-gold .hc-btn-primary:hover { background: #dcbf88; box-shadow: 0 16px 34px -14px rgba(201,169,110,0.6); }
.hc-btn-ghost { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.85); }
.hc-btn-ghost:hover { background: rgba(255,255,255,0.12); border-color: #fff; }
.hc-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 56px; height: 56px; border: none; background: transparent; color: #fff; font-size: 46px; line-height: 1; cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; opacity: 0.6; transition: opacity .3s; }
.hc-arrow:hover { opacity: 1; }
.hc-prev { left: 18px; }
.hc-next { right: 18px; }
@media (max-width: 680px) {
  .hc-inner { padding: 116px var(--gutter) 174px; }
  .hc-title { font-size: clamp(30px, 10vw, 48px); }
  .hc-sub { font-size: 15px; line-height: 1.75; margin-top: 24px; }
  .hc-actions { gap: 14px; margin-top: 32px; }
  .hc-btn { padding: 15px 26px; }
  .hc-arrow { width: 44px; height: 44px; font-size: 36px; }
  .hc-prev { left: 8px; }
  .hc-next { right: 8px; }
}

/* 板塊頁 CTA 跳轉鏈接（居中，承接窄欄正文） */
.segment-cta { max-width: 680px; margin: 40px auto 0; text-align: center; }
.segment-cta .btn-gold { display: inline-flex; align-items: center; gap: 8px; }


/* ============================================================
   綠地天盛基金 —— 七個章節各有專屬版式：
   03 資本引擎（three.js 球體 + 五大賽道懸停詳情）、02 粒子地球、
   04 代幣化翻轉卡、05 滿幅背景節、06 治理網格、07 基金條款百葉窗。
   置於英文版排版覆蓋塊之前，讓 html[lang="en"] 的字級規則仍能生效。
   ============================================================ */
.gl-sec.gl-capital-sec { position: relative; overflow: hidden; background: #050505 url('assets/content/capital-universe-bg.webp') center / cover no-repeat; color: #fff; padding: 80px 0 68px; border-top: 1px solid rgba(0,191,255,.18); isolation: isolate; font-family: var(--sans); }
.gl-sec.gl-capital-sec::before { content: ''; position: absolute; inset: 0; z-index: -1; background: rgba(0,0,0,0.18); }
.gl-bg-sec { position: relative; min-height: auto; display: flex; align-items: center; overflow: hidden; background: #050505; padding: clamp(48px, 6vw, 72px) 0; }
.gl-bg-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.gl-bg-scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5,8,16,.22) 0%, rgba(5,8,16,.14) 36%, rgba(5,8,16,.78) 58%, rgba(5,8,16,.96) 100%); }
.gl-bg-inner { position: relative; z-index: 1; width: 100%; display: flex; justify-content: flex-end; padding-top: 0; padding-bottom: 0; }
.gl-bg-copy { width: min(660px, 54%); color: #fff; padding: 18px 0 18px 40px; border-left: 1px solid rgba(255,255,255,.24); }
.gl-bg-copy .eyebrow { color: #d4af37; }
.gl-bg-copy .rule { background: #d4af37; margin-bottom: 16px; }
.gl-bg-copy .gl-title { color: #fff; margin-bottom: 12px; }
.gl-bg-copy .gl-body { color: rgba(255,255,255,.76); line-height: 1.55; margin-bottom: 14px; }
.gl-bg-copy .gl-pts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 18px; margin-top: 14px; }
.gl-bg-copy .gl-pts li { gap: 3px; }
.gl-bg-copy .gl-pts strong { color: #fff; }
.gl-bg-copy .gl-pts span { color: rgba(255,255,255,.64); line-height: 1.5; }
.gl-bg-copy[data-revealable] { opacity: 0; transform: translateX(48px); transition: opacity .68s ease-out, transform .68s ease-out; }
.gl-bg-copy[data-revealable].is-visible { opacity: 1; transform: none; }
.capital-stars { position: absolute; inset: 0; opacity: .4; background-image: radial-gradient(circle at 12% 20%, rgba(0,191,255,.55) 0 1px, transparent 1.5px), radial-gradient(circle at 78% 34%, rgba(212,175,55,.45) 0 1px, transparent 1.5px), radial-gradient(circle at 45% 80%, rgba(255,255,255,.32) 0 1px, transparent 1.5px); background-size: 160px 160px, 220px 220px, 190px 190px; mix-blend-mode: screen; }
.capital-wrap { position: relative; z-index: 1; }
.capital-heading { max-width: 780px; }
.capital-heading .eyebrow { color: var(--gold); font-family: var(--label); font-size: 13.5px; letter-spacing: .3em; text-transform: uppercase; }
.capital-heading .rule { background: #d4af37; }
.capital-title { margin: 0; color: #000; font-family: "Noto Serif TC", "Microsoft JhengHei", "PingFang TC", serif; font-size: clamp(24px, 2.6vw, 36px); line-height: 1.2; font-weight: 600; }
.capital-en { margin: 12px 0 0; color: #000; font-family: var(--label); font-size: 11px; letter-spacing: .16em; }
.capital-intro { max-width: 620px; margin: 20px 0 0; color: #000; line-height: 1.8; font-size: 16px; }
.capital-metrics { display: grid; grid-template-columns: repeat(4, 1fr); max-width: 820px; margin-top: 54px; border-top: 1px solid rgba(255,255,255,.15); border-bottom: 1px solid rgba(255,255,255,.15); }
.capital-metric { padding: 22px 26px 24px 0; border-right: 1px solid rgba(255,255,255,.12); }
.capital-metric + .capital-metric { padding-left: 24px; }
.capital-metric:last-child { border-right: 0; }
.capital-metric strong { display: block; color: #d4af37; font-family: var(--serif-display); font-size: 34px; line-height: 1; font-weight: 500; }
.capital-metric span { display: block; margin-top: 10px; color: rgba(255,255,255,.55); font-size: 12px; }
.capital-stage { position: relative; height: 400px; margin: 16px -20px 0; }
#capitalCanvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.capital-core { position: absolute; top: 50%; left: 50%; width: 180px; height: 180px; transform: translate(-50%, -50%); border: 1px solid rgba(0,191,255,.62); border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: radial-gradient(circle at 32% 28%, rgba(0,191,255,.34), rgba(0,139,125,.22) 52%, rgba(0,76,68,.08) 100%); box-shadow: 0 0 70px rgba(0,191,255,.18), inset 0 0 34px rgba(0,191,255,.18); }
.capital-core-ring { position: absolute; inset: -13px; border: 1px solid rgba(212,175,55,.48); border-radius: 50%; border-left-color: transparent; animation: capitalSpin 8s linear infinite; }
.capital-core-kicker { color: #00bfff; font-family: var(--label); font-size: 9px; letter-spacing: .18em; }
.capital-core strong { margin-top: 8px; color: #fff; font-family: var(--label); font-size: 21px; letter-spacing: .16em; }
.capital-core small { margin-top: 8px; color: rgba(255,255,255,.48); font-family: var(--label); font-size: 8px; letter-spacing: .1em; }
.capital-node { position: absolute; width: 180px; padding: 18px 18px 16px; border: 0; border-radius: 20px; background: rgba(255,255,255,.28); backdrop-filter: blur(7px) saturate(115%); box-shadow: 0 14px 44px rgba(0,0,0,.2), 0 0 24px rgba(0,191,255,.06); transition: box-shadow .35s, transform .35s; }
.capital-node:hover { border-color: #fff; box-shadow: 0 0 36px rgba(0,191,255,.3); transform: translateY(-4px); }
.capital-node-no { display: block; color: #d4af37; font-family: var(--label); font-size: 11px; letter-spacing: .16em; }
.capital-node strong { display: block; margin-top: 10px; color: #07111f; font-family: "Noto Serif TC", "Microsoft JhengHei", "PingFang TC", serif; font-size: 18px; }
.capital-node em { display: block; margin-top: 3px; color: #00bfff; font-family: var(--label); font-size: 11px; font-style: normal; letter-spacing: .08em; }
.capital-node small { display: block; margin-top: 9px; color: rgba(7,17,31,.72); line-height: 1.5; font-size: 11px; }
.capital-node-1 { top: 12%; left: 8%; }
.capital-node-2 { top: -2%; right: 16%; }
.capital-node-3 { top: 43%; right: -4%; }
.capital-node-4 { bottom: 6%; right: 20%; }
.capital-node-5 { bottom: 6%; left: 20%; }
.capital-line { position: absolute; left: 50%; top: 50%; height: 1px; width: 29%; transform-origin: left center; background: linear-gradient(90deg, rgba(0,191,255,.55), transparent); opacity: .55; animation: capitalFlow 2.6s linear infinite; }
.capital-line-1 { transform: rotate(-151deg); }
.capital-line-2 { transform: rotate(-29deg); }
.capital-line-3 { transform: rotate(8deg); width: 31%; }
.capital-line-4 { transform: rotate(145deg); }
.capital-line-5 { transform: rotate(177deg); width: 30%; }
.capital-sector-grid { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; margin-top: 8px; }
.capital-sector-card { position: relative; min-height: 132px; padding: 20px 22px 18px; border: 1px solid rgba(255,255,255,.24); border-radius: 18px; background: rgba(7,17,31,.22); color: #fff; text-align: left; cursor: pointer; backdrop-filter: blur(16px) saturate(130%); box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 16px 46px rgba(0,0,0,.22); transition: transform .35s ease, border-color .35s ease, background .35s ease, box-shadow .35s ease; }
.capital-sector-card:hover, .capital-sector-card:focus-visible { transform: translateY(-5px); border-color: rgba(212,175,55,.72); background: rgba(7,17,31,.34); box-shadow: 0 18px 52px rgba(0,0,0,.3), 0 0 28px rgba(0,191,255,.12); outline: none; }
.capital-sector-no { display: block; color: var(--gold); font-family: var(--label); font-size: 11px; letter-spacing: .16em; }
.capital-sector-card strong { display: block; margin-top: 12px; color: #fff; font-family: "Noto Serif TC", "Microsoft JhengHei", serif; font-size: 19px; }
.capital-sector-card em { display: block; margin-top: 4px; color: #00bfff; font-family: var(--label); font-size: 10px; font-style: normal; letter-spacing: .1em; }
.capital-sector-card small { display: block; margin-top: 10px; color: rgba(255,255,255,.66); font-size: 12px; line-height: 1.5; }
.capital-sector-open { position: absolute; top: 17px; right: 19px; color: var(--gold); font-family: var(--label); font-size: 18px; line-height: 1; }
.capital-sector-modal { position: absolute; inset: 0; z-index: 120; display: grid; place-items: center; padding: 24px; pointer-events: none; }
.capital-sector-modal[hidden] { display: none; }
.capital-sector-modal-backdrop { position: absolute; inset: 0; background: transparent; backdrop-filter: none; pointer-events: none; }
.capital-sector-dialog { position: relative; z-index: 1; width: min(760px, 100%); max-height: min(78vh, 760px); overflow: auto; padding: 34px 40px 40px; border: 1px solid rgba(255,255,255,.44); border-radius: 22px; background: rgba(255,255,255,.28); backdrop-filter: blur(16px) saturate(125%); box-shadow: 0 28px 100px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.36); pointer-events: none; }
.capital-sector-dialog .eyebrow { color: #000; }
.capital-sector-dialog .rule { background: #000; }
.capital-sector-close { position: absolute; top: 13px; right: 17px; width: 36px; height: 36px; border: 0; background: transparent; color: rgba(255,255,255,.7); font-size: 28px; line-height: 1; cursor: pointer; }
.capital-sector-close:hover, .capital-sector-close:focus-visible { color: var(--gold); outline: none; }
.capital-sector-modal-body h3 { margin: 0; color: #000; font-family: "Noto Serif TC", "Microsoft JhengHei", serif; font-size: clamp(26px, 3vw, 38px); font-weight: 600; }
.capital-sector-modal-en { margin-top: 8px; color: #000; font-family: var(--label); font-size: 11px; letter-spacing: .12em; }
.capital-sector-modal-body p { margin: 22px 0 0; color: #000; font-family: "Noto Sans TC", "Microsoft JhengHei", sans-serif; font-size: 15px; line-height: 1.9; }
.capital-sector-modal-body section[hidden] { display: none; }
.capital-modal-open { overflow: hidden; }
.capital-system { margin-top: 8px; padding: 22px 30px 26px; border: 1px solid rgba(255,255,255,.16); background: linear-gradient(135deg, rgba(12,22,40,.78), rgba(5,5,5,.68)); backdrop-filter: blur(16px); }
.capital-system-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.capital-system-head .eyebrow { margin: 0 0 10px; color: #d4af37; }
.capital-system-head h3 { margin: 0; color: #fff; font-family: "Noto Serif TC", "Microsoft JhengHei", "PingFang TC", serif; font-size: 34px; font-weight: 500; }
.capital-system-tag { color: rgba(0,191,255,.72); font-family: var(--label); font-size: 10px; letter-spacing: .15em; }
.capital-operations { display: grid; grid-template-columns: repeat(6, 1fr); margin-top: 22px; }
.capital-operation { position: relative; padding: 0 16px; border-left: 1px solid rgba(255,255,255,.14); }
.capital-operation:first-child { border-left: 0; padding-left: 0; }
.capital-op-no { color: #d4af37; font-family: var(--label); font-size: 11px; }
.capital-operation strong, .capital-operation em, .capital-operation small { display: block; }
.capital-operation strong { margin-top: 10px; color: #fff; font-family: "Noto Serif TC", "Microsoft JhengHei", "PingFang TC", serif; font-size: 15px; }
.capital-operation em { margin-top: 4px; color: #00bfff; font-family: var(--label); font-size: 10px; font-style: normal; }
.capital-operation small { display: block; margin-top: 8px; color: rgba(255,255,255,.5); font-size: 10.5px; line-height: 1.45; min-height: 0; overflow: visible; }
@media (min-width: 681px) {
  .gl-capital-sec .capital-stage { left: calc(-1 * clamp(24px, 4.6vw, 72px)); }
}
.gl-particle-earth-sec { background: var(--cream); }
.particle-earth-grid { grid-template-columns: 1.1fr .9fr; gap: 60px; }
.particle-earth-grid .particle-earth-media { order: 2; display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; background: transparent; border: 0; overflow: visible; }
.particle-earth-grid .gl-text { order: 1; }
.particle-earth-static { width: 100%; height: 100%; background-color: transparent; background-image: url('assets/content/particle-earth-user-cutout.webp?v=2'); background-position: center; background-repeat: no-repeat; background-size: contain; }
@media (max-width: 980px) {
  .particle-earth-grid { grid-template-columns: 1fr; gap: 36px; }
  .particle-earth-grid .particle-earth-media, .particle-earth-grid .gl-text { order: 0; }
}
.gl-sec.gl-governance-sec { position: relative; overflow: hidden; background: #f5fbfb; color: #172f3c; padding: clamp(82px, 9vw, 126px) 0 clamp(74px, 8vw, 108px); isolation: isolate; }
.governance-network-bg { position: absolute; inset: 0; z-index: -1; opacity: .16; pointer-events: none; background-image: linear-gradient(24deg, transparent 0 48%, rgba(42,184,176,.22) 49%, transparent 50%), linear-gradient(156deg, transparent 0 54%, rgba(0,122,120,.14) 55%, transparent 56%), radial-gradient(circle at 18% 72%, rgba(42,184,176,.35) 0 1px, transparent 2px), radial-gradient(circle at 79% 26%, rgba(0,122,120,.28) 0 1px, transparent 2px); background-size: 420px 260px, 520px 340px, 150px 150px, 180px 180px; animation: governanceDrift 28s linear infinite; }
.governance-wrap { position: relative; z-index: 1; }
.governance-top { display: grid; grid-template-columns: minmax(0, .9fr) minmax(500px, 1.1fr); gap: clamp(36px, 5vw, 80px); align-items: start; }
.governance-heading { max-width: 720px; padding-top: 10px; }
.governance-eyebrow { color: rgba(23,47,60,.46); font-family: var(--label); font-size: 12.5px; letter-spacing: .34em; }
.governance-heading .rule { width: 52px; margin: 22px 0 28px; background: #2ab8b0; }
.governance-heading h2 { margin: 0; color: #173543; font-family: "Noto Serif TC", "Microsoft JhengHei", serif; font-size: clamp(24px, 2.6vw, 36px); line-height: 1.2; font-weight: 600; letter-spacing: .025em; }
.governance-heading p { max-width: 560px; margin: 30px 0 0; color: rgba(23,47,60,.62); font-size: 16px; line-height: 1.9; letter-spacing: .035em; }
.governance-visuals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding-top: 6px; }
.governance-visual { --wave-y: 0px; position: relative; margin: 0; aspect-ratio: 1.06 / 1; overflow: hidden; background: #dceeee; transform: translateX(0) translateY(var(--wave-y)); transition: transform .58s cubic-bezier(.2,.65,.2,1), opacity .58s ease; will-change: transform, opacity; }
.governance-visual:nth-child(1) { --wave-y: 34px; }
.governance-visual:nth-child(2) { --wave-y: -18px; }
.governance-visual:nth-child(3) { --wave-y: 28px; }
.governance-visual[data-revealable] { opacity: 0; transform: translateX(68px) translateY(var(--wave-y)); }
.governance-visual[data-revealable].is-visible { opacity: 1; transform: translateX(0) translateY(var(--wave-y)); }
.governance-visual:hover { transform: translateY(calc(var(--wave-y) - 5px)); }
.governance-visual img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.86) contrast(1.02); transition: transform .62s cubic-bezier(.2,.65,.2,1); }
.governance-visual:hover img { transform: scale(1.035); }
.governance-visual figcaption { position: absolute; left: 10px; bottom: 9px; color: rgba(255,255,255,.86); font-family: var(--label); font-size: 8px; letter-spacing: .14em; text-transform: uppercase; text-shadow: 0 1px 8px rgba(0,0,0,.38); }
.governance-modules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px; margin-top: clamp(64px, 9vw, 124px); border-top: 1px solid rgba(23,47,60,.2); }
.governance-module { min-width: 0; min-height: 190px; padding: 22px 26px 0 0; border-bottom: 1px solid rgba(23,47,60,.2); }
.governance-module + .governance-module { border-left: 1px solid rgba(23,47,60,.15); padding-left: 26px; }
.governance-module-no { color: #0b9694; font-family: var(--label); font-size: 12px; letter-spacing: .2em; }
.governance-module h3 { margin: 24px 0 0; color: #173543; font-family: "Noto Serif TC", "Microsoft JhengHei", serif; font-size: clamp(20px, 1.8vw, 28px); font-weight: 500; letter-spacing: .03em; }
.governance-module p { max-width: 390px; margin: 16px 0 22px; color: rgba(23,47,60,.66); font-size: 13.5px; line-height: 1.85; }
@media (max-width: 900px) {
  .governance-top { grid-template-columns: 1fr; gap: 44px; }
  .governance-visuals { max-width: 560px; }
  .governance-modules { margin-top: 64px; }
}
@media (max-width: 680px) {
  .gl-governance-sec { padding: 66px 0 74px; }
  .governance-heading h2 { font-size: clamp(24px, 8vw, 36px); }
  .governance-heading p { font-size: 15px; margin-top: 22px; }
  .governance-visuals { grid-template-columns: repeat(3, minmax(140px, 1fr)); overflow-x: auto; max-width: none; padding-bottom: 4px; }
  .governance-visual { min-width: 140px; }
  .governance-modules { grid-template-columns: 1fr; gap: 0; margin-top: 54px; }
  .governance-module, .governance-module + .governance-module { min-height: 0; padding: 22px 0 26px; border-left: 0; }
  .governance-module h3 { margin-top: 16px; }
}
.gl-fund-terms-sec { position: relative; overflow: hidden; padding: clamp(82px, 9vw, 126px) 0 clamp(74px, 8vw, 108px); color: #182b3c; background: #e9e5dc url('assets/content/fund-terms-bg-user-20260810.webp?v=2') center 52% / cover no-repeat; isolation: isolate; font-family: var(--sans); }
.gl-fund-terms-sec::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(90deg, rgba(250,248,241,.9) 0%, rgba(250,248,241,.78) 25%, rgba(250,248,241,.42) 43%, rgba(250,248,241,.12) 58%, transparent 76%); }
.fund-terms-blinds { position: absolute; inset: 0; z-index: 1; display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); pointer-events: none; }
.fund-terms-blinds i { display: block; min-width: 0; background: rgba(242,239,230,.98); transform: scaleX(1); animation: fundBlindOpen .72s cubic-bezier(.2,.7,.2,1) forwards; }
.fund-terms-blinds i:nth-child(odd) { transform-origin: left center; }
.fund-terms-blinds i:nth-child(even) { transform-origin: right center; }
.fund-terms-blinds i:nth-child(1) { animation-delay: 30ms; }
.fund-terms-blinds i:nth-child(2) { animation-delay: 70ms; }
.fund-terms-blinds i:nth-child(3) { animation-delay: 110ms; }
.fund-terms-blinds i:nth-child(4) { animation-delay: 150ms; }
.fund-terms-blinds i:nth-child(5) { animation-delay: 190ms; }
.fund-terms-blinds i:nth-child(6) { animation-delay: 230ms; }
.fund-terms-blinds i:nth-child(7) { animation-delay: 270ms; }
.fund-terms-blinds i:nth-child(8) { animation-delay: 310ms; }
.fund-terms-blinds i:nth-child(9) { animation-delay: 350ms; }
.fund-terms-blinds i:nth-child(10) { animation-delay: 400ms; }
.fund-terms-wrap { position: relative; z-index: 2; display: flex; align-items: center; }
.fund-terms-content { width: 100%; padding: 0; }
.fund-terms-heading { width: min(100%, 540px); }
.fund-terms-eyebrow { color: rgba(24,43,60,.58); font-family: var(--label); font-size: 13.5px; letter-spacing: .34em; }
.fund-terms-heading .rule { width: 54px; height: 1px; margin: 22px 0 27px; background: #b49a58; }
.fund-terms-heading h2 { margin: 0; color: #1c3042; font-family: "Noto Serif TC", "Microsoft JhengHei", serif; font-size: clamp(24px, 2.6vw, 36px); line-height: 1.12; font-weight: 700; letter-spacing: .035em; }
.fund-terms-heading p { margin: 24px 0 0; color: rgba(24,43,60,.7); font-size: 18px; line-height: 1.8; letter-spacing: .055em; }
.fund-terms-list { width: min(100%, 570px); margin-top: clamp(34px, 4vw, 54px); border-top: 1px solid rgba(24,43,60,.22); }
.fund-term-item { display: grid; grid-template-columns: minmax(142px, .52fr) minmax(0, 1fr); gap: 24px; align-items: baseline; padding: 16px 0 17px; border-bottom: 1px solid rgba(24,43,60,.16); }
.fund-term-label { color: #a18442; font-size: 14px; line-height: 1.5; letter-spacing: .08em; }
.fund-term-item p { margin: 0; color: #1b2e3e; font-size: 17px; line-height: 1.7; letter-spacing: .025em; }
.fund-term-item[data-revealable] { opacity: 0; transform: translateY(16px); transition: opacity .58s ease-out, transform .58s ease-out; }
.fund-term-item[data-revealable].is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .fund-terms-blinds i { animation: none; transform: scaleX(0); }
}
@media (max-width: 720px) {
  .gl-fund-terms-sec { background-position: 60% center; }
  .gl-fund-terms-sec::before { background: linear-gradient(90deg, rgba(250,248,241,.91) 0%, rgba(250,248,241,.74) 52%, rgba(250,248,241,.3) 100%); }
  .fund-terms-wrap { align-items: flex-start; }
  .fund-terms-content { padding-top: 86px; padding-bottom: 70px; }
  .fund-terms-heading h2 { font-size: clamp(24px, 2.6vw, 36px); }
  .fund-terms-heading p { font-size: 16px; margin-top: 18px; }
  .fund-terms-list { margin-top: 30px; }
  .fund-term-item { grid-template-columns: 1fr; gap: 5px; padding: 14px 0 15px; }
  .fund-term-item p { font-size: 16px; }
}
.gl-sec.gl-token-sec { position: relative; overflow: hidden; background-color: #eaf8f7; /* 底圖為 tools/gen_tokenization_bg.py 程序化生成的暫代品（客戶原圖未隨源碼交付）；中央橫向帶刻意留白，讓位給玻璃卡片與標題。拿到客戶原圖後直接換檔名即可。 */ background-image: url('assets/content/tokenization-bg.webp'); background-position: center; background-size: cover; background-repeat: no-repeat; color: #123b40; padding: clamp(64px, 7vw, 88px) 0 clamp(68px, 7.5vw, 94px); isolation: isolate; font-family: var(--sans); }
.gl-token-sec::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 14% 20%, rgba(95,215,194,.045), transparent 32%), radial-gradient(circle at 82% 68%, rgba(42,184,176,.04), transparent 36%); pointer-events: none; }
.gl-token-sec::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(90deg, rgba(255,255,255,.38) 0%, rgba(255,255,255,.12) 15%, transparent 28%, transparent 72%, rgba(255,255,255,.12) 85%, rgba(255,255,255,.38) 100%); backdrop-filter: blur(7px) saturate(115%); mask-image: linear-gradient(90deg, #000 0%, #000 20%, transparent 31%, transparent 69%, #000 80%, #000 100%); }
.token-wrap { position: relative; z-index: 1; }
.token-heading { max-width: 760px; text-align: center; margin: 0 auto clamp(30px, 4vw, 46px); }
.token-heading .eyebrow { color: #007a78; font-family: var(--label); font-size: 13.5px; letter-spacing: .3em; }
.token-heading .rule { margin: 18px auto 24px; background: #2ab8b0; }
.token-heading .gl-title { color: #123b40; font-family: "Noto Serif TC", "Microsoft JhengHei", "PingFang TC", serif; font-size: clamp(24px, 2.6vw, 36px); font-weight: 600; letter-spacing: .06em; }
.token-en { margin: 14px 0 0; color: #2ab8b0; font-family: var(--label); font-size: 11px; letter-spacing: .24em; }
.token-intro { max-width: 600px; margin: 22px auto 0; color: rgba(18,59,64,.68); font-size: 16px; line-height: 1.9; letter-spacing: .03em; }
.tokenization-cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.tokenization-card { position: relative; min-width: 0; min-height: 420px; display: flex; flex-direction: column; padding: 28px 24px 22px; border: 1px solid rgba(0,122,120,.16); border-radius: 28px; background: rgba(255,255,255,.62); box-shadow: 0 24px 60px rgba(0,83,91,.08), inset 0 1px 0 rgba(255,255,255,.85); backdrop-filter: blur(18px) saturate(125%); transition: transform .45s cubic-bezier(.2,.65,.2,1), box-shadow .45s, border-color .45s, background .45s; overflow: hidden; }
.tokenization-card::after { content: ''; position: absolute; width: 150px; height: 150px; right: -78px; top: -80px; border-radius: 50%; background: rgba(95,215,194,.12); filter: blur(28px); transition: opacity .45s; }
.tokenization-card:hover { transform: translateY(-10px); border-color: rgba(42,184,176,.55); background: rgba(255,255,255,.78); box-shadow: 0 32px 72px rgba(0,83,91,.15), 0 0 30px rgba(95,215,194,.13), inset 0 1px 0 rgba(255,255,255,.95); }
.tokenization-card:focus-visible { outline: 2px solid #2ab8b0; outline-offset: 5px; }
.token-flip { position: relative; width: 100%; height: 180px; perspective: 760px; margin-top: 22px; margin-bottom: 0; }
.token-flip-inner { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .78s cubic-bezier(.2,.7,.2,1); }
.tokenization-card.is-flipped .token-flip-inner { transform: rotateY(180deg); }
.token-flip-face { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; border: 1px solid rgba(0,122,120,.3); border-radius: 20px; backface-visibility: hidden; -webkit-backface-visibility: hidden; color: #007a78; box-shadow: inset 0 1px 0 rgba(255,255,255,.72), 0 14px 28px rgba(0,92,96,.12); }
.token-flip-face::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,.72), rgba(95,215,194,.08) 48%, rgba(0,122,120,.12)); pointer-events: none; }
.token-flip-front { background: linear-gradient(145deg, rgba(255,255,255,.78), rgba(223,246,243,.58)); transform: translateZ(1px); }
.token-flip-back { align-items: flex-start; padding: 20px; text-align: left; background: linear-gradient(145deg, rgba(0,122,120,.86), rgba(42,184,176,.66)); color: #fff; transform: rotateY(180deg) translateZ(1px); }
.token-flip-back::before { background: linear-gradient(135deg, rgba(255,255,255,.2), transparent 50%, rgba(0,48,58,.18)); }
.token-flip-index, .token-flip-mark, .token-flip-hint, .token-flip-back strong { position: relative; z-index: 1; }
.token-flip-index { align-self: flex-start; margin: 14px 0 0 16px; font-family: var(--label); font-size: 11px; letter-spacing: .18em; }
.token-flip-mark { margin-top: 3px; font-size: 32px; line-height: 1; text-shadow: 0 7px 16px rgba(0,92,96,.2); transform: rotate(45deg); }
.token-flip-hint { margin-top: 10px; font-family: var(--label); font-size: 8px; letter-spacing: .16em; opacity: .72; }
.token-flip-back strong { margin-top: 14px; color: #fff; font-family: "Noto Serif TC", "Microsoft JhengHei", serif; font-size: 16px; font-weight: 500; line-height: 1.6; }
.token-flip-front p { position: relative; z-index: 1; margin: 0; padding: 0 18px; color: rgba(18,59,64,.72); font-size: 13px; line-height: 1.78; }
.tokenization-card { min-height: 300px; padding: 0; border: 0; background: transparent; box-shadow: none; overflow: visible; perspective: 1100px; }
.tokenization-card:hover { transform: none; border-color: transparent; background: transparent; box-shadow: none; }
.token-card-inner { position: relative; width: 100%; height: 300px; transform-style: preserve-3d; transition: transform .82s cubic-bezier(.2,.7,.2,1); }
.tokenization-card.is-flipped .token-card-inner { transform: rotateY(180deg); }
.token-card-face { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: flex-start; padding: 28px 24px 22px; overflow: hidden; border: 1px solid rgba(0,122,120,.16); border-radius: 28px; backface-visibility: hidden; -webkit-backface-visibility: hidden; background: rgba(255,255,255,.62); box-shadow: 0 24px 60px rgba(0,83,91,.08), inset 0 1px 0 rgba(255,255,255,.85); backdrop-filter: blur(18px) saturate(125%); }
.token-card-face::after { content: ''; position: absolute; width: 160px; height: 160px; right: -78px; top: -80px; border-radius: 50%; background: rgba(95,215,194,.14); filter: blur(28px); pointer-events: none; }
.token-card-face h3, .token-card-face .token-card-en, .token-card-face p, .token-card-face strong, .token-card-face .token-flip-index, .token-card-face .token-flip-hint { position: relative; z-index: 1; }
.token-card-front h3 { margin-top: 44px; }
.token-card-front .token-flip-hint { margin-top: auto; }
.token-card-back { transform: rotateY(180deg); background: linear-gradient(145deg, rgba(0,122,120,.88), rgba(42,184,176,.72)); color: #fff; border-color: rgba(255,255,255,.44); box-shadow: 0 30px 70px rgba(0,83,91,.18), inset 0 1px 0 rgba(255,255,255,.34); }
.token-card-back::after { background: rgba(255,255,255,.16); }
.token-card-back h3 { color: #fff; margin-top: 32px; }
.token-card-back .token-card-en { color: rgba(255,255,255,.78); }
.token-card-back p { margin-top: 22px; color: rgba(255,255,255,.9); font-size: 14px; line-height: 1.85; }
.token-card-back strong { margin-top: auto; color: #fff; font-family: "Noto Serif TC", "Microsoft JhengHei", serif; font-size: 15px; font-weight: 500; line-height: 1.6; }
.token-card-back .token-flip-hint { align-self: flex-end; margin-top: 14px; color: rgba(255,255,255,.78); }
.token-card-face .token-flip-index { color: #007a78; font-family: var(--label); font-size: 11px; letter-spacing: .18em; }
.token-card-back .token-flip-index { color: rgba(255,255,255,.82); }
@media (max-width: 720px) {
  .gl-token-sec { padding: 58px 0 64px; }
  .token-card-inner { height: 286px; }
  .tokenization-card { min-height: 286px; }
}
.token-flip-back .token-flip-hint { align-self: flex-end; margin-top: auto; }
.token-card-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 15px; background: linear-gradient(135deg, #5fd7c2, #007a78); color: #fff; box-shadow: 0 10px 22px rgba(0,122,120,.18); transition: transform .45s; }
.token-card-icon svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tokenization-card:hover .token-card-icon { transform: rotate(5deg); }
.tokenization-card h3 { margin: 26px 0 0; color: #123b40; font-family: "Noto Serif TC", "Microsoft JhengHei", "PingFang TC", serif; font-size: 21px; font-weight: 600; letter-spacing: .04em; }
.token-card-en { margin-top: 7px; color: #2ab8b0; font-family: var(--label); font-size: 10px; letter-spacing: .12em; }
.tokenization-card p { margin: 18px 0 0; color: rgba(18,59,64,.68); font-size: 13px; line-height: 1.78; letter-spacing: .02em; }
.token-card-visual { display: flex; align-items: center; justify-content: center; min-height: 126px; margin-top: auto; padding-top: 22px; }
.token-visual { position: relative; display: block; width: 92px; height: 92px; opacity: .86; transform-style: preserve-3d; perspective: 420px; transition: transform .7s ease; filter: drop-shadow(0 14px 12px rgba(0,92,96,.16)); }
.tokenization-card:hover .token-visual { transform: translateY(-8px) rotateX(10deg) rotateY(-10deg); }
.token-ring { border: 1px solid rgba(0,122,120,.5); border-radius: 50%; box-shadow: 0 0 22px rgba(42,184,176,.18), inset 0 0 18px rgba(95,215,194,.2); transform: rotateX(58deg) rotateZ(-18deg); background: radial-gradient(ellipse at 35% 35%, rgba(255,255,255,.55), rgba(95,215,194,.1) 42%, transparent 68%); }
.token-ring::before, .token-ring::after { content: ''; position: absolute; inset: 13px; border: 1px solid rgba(42,184,176,.5); border-radius: 50%; transform: rotate(45deg) scaleX(.58); }
.token-ring::after { inset: 28px 8px; transform: rotate(-35deg) scaleX(.7); border-color: rgba(0,122,120,.34); }
.token-ring i, .token-ring b { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: #2ab8b0; box-shadow: 0 0 12px #2ab8b0; }
.token-ring i { top: 13px; right: 10px; }
.token-ring b { bottom: 18px; left: 15px; }
.token-cube { transform: rotate(30deg) rotateX(18deg) rotateY(-22deg); border: 1px solid rgba(0,122,120,.46); background: linear-gradient(145deg, rgba(255,255,255,.45), rgba(95,215,194,.1)); box-shadow: inset -8px -8px 18px rgba(0,122,120,.08), 8px 10px 18px rgba(0,92,96,.12); }
.token-cube i, .token-cube b, .token-cube em { position: absolute; inset: 14px; border: 1px solid rgba(42,184,176,.52); transform: skewY(-30deg); }
.token-cube b { inset: 18px 7px; transform: skewY(30deg); }
.token-cube em { inset: 7px 18px; transform: rotate(90deg) skewY(-30deg); }
.token-platform { border-bottom: 2px solid #2ab8b0; border-radius: 48% 48% 12% 12%; box-shadow: 0 10px 18px rgba(0,122,120,.15), inset 0 -10px 18px rgba(0,122,120,.12); transform: perspective(120px) rotateX(48deg); }
.token-platform::before { content: ''; position: absolute; left: 12px; right: 12px; top: 19px; height: 46px; border: 1px solid rgba(0,122,120,.44); border-radius: 50%; transform: perspective(80px) rotateX(48deg); }
.token-platform i, .token-platform b { position: absolute; width: 6px; height: 6px; background: #5fd7c2; border-radius: 50%; box-shadow: 0 0 10px #5fd7c2; }
.token-platform i { top: 30px; left: 26px; }
.token-platform b { top: 43px; right: 22px; }
.token-blocks { border: 1px solid rgba(0,122,120,.35); transform: rotate(30deg) rotateX(22deg) rotateY(-22deg) skewY(-8deg); background: linear-gradient(135deg, rgba(255,255,255,.42), rgba(95,215,194,.08)); box-shadow: 7px 12px 18px rgba(0,92,96,.12); }
.token-blocks::before, .token-blocks::after { content: ''; position: absolute; border: 1px solid rgba(42,184,176,.52); }
.token-blocks::before { inset: 14px 30px 30px 14px; }
.token-blocks::after { inset: 30px 14px 14px 30px; }
.token-blocks i, .token-blocks b, .token-blocks em { position: absolute; width: 22px; height: 22px; border: 1px solid rgba(0,122,120,.48); }
.token-blocks i { left: 6px; top: 34px; }
.token-blocks b { right: 6px; top: 34px; }
.token-blocks em { left: 35px; top: 6px; }
.token-track { border-bottom: 1px solid rgba(0,122,120,.5); border-radius: 0 0 50% 50%; transform: perspective(90px) rotateX(48deg) rotateY(-12deg); background: linear-gradient(180deg, rgba(95,215,194,.18), transparent 62%); box-shadow: 0 12px 16px rgba(0,92,96,.11); }
.token-track::before, .token-track::after { content: ''; position: absolute; left: 6px; right: 6px; height: 44px; border: 1px solid rgba(42,184,176,.55); border-bottom: 0; border-radius: 50% 50% 0 0; }
.token-track::before { top: 20px; }
.token-track::after { top: 34px; left: 18px; right: 18px; }
.token-track i, .token-track b { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #007a78; box-shadow: 0 0 10px #2ab8b0; }
.token-track i { top: 14px; left: 30px; }
.token-track b { top: 49px; right: 25px; }
.token-particles { position: absolute; inset: 0; opacity: .4; pointer-events: none; background-image: radial-gradient(circle at 12% 28%, rgba(0,122,120,.5) 0 1px, transparent 1.5px), radial-gradient(circle at 78% 18%, rgba(42,184,176,.42) 0 1px, transparent 1.5px), radial-gradient(circle at 54% 82%, rgba(95,215,194,.35) 0 1px, transparent 1.5px); background-size: 190px 190px, 240px 240px, 160px 160px; animation: tokenParticleDrift 20s linear infinite; }
.token-gridline { position: absolute; inset: 0; opacity: .045; pointer-events: none; background-image: linear-gradient(rgba(0,122,120,.8) 1px, transparent 1px), linear-gradient(90deg, rgba(0,122,120,.8) 1px, transparent 1px); background-size: 72px 72px; mask-image: linear-gradient(to bottom, transparent, #000 24%, #000 76%, transparent); }
@media (max-width: 1100px) {
  .tokenization-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .gl-token-sec { padding: 58px 0 64px; }
  .token-heading { margin-bottom: 30px; }
  .tokenization-cards { grid-template-columns: 1fr; gap: 14px; }
  .tokenization-card { min-height: 286px; }
  .token-card-inner { height: 286px; }
}
@media (max-width: 680px) {
  .gl-capital-sec { padding: 76px 0 58px; }
  .gl-bg-sec { min-height: auto; align-items: flex-end; padding: 60px 0 48px; }
  .gl-bg-scrim { background: linear-gradient(180deg, rgba(5,8,16,.08) 0%, rgba(5,8,16,.36) 42%, rgba(5,8,16,.96) 78%, rgba(5,8,16,.99) 100%); }
  .gl-bg-inner { padding-top: 80px; padding-bottom: 0; }
  .gl-bg-copy { width: 100%; padding: 22px 0 0; border-left: 0; border-top: 1px solid rgba(255,255,255,.24); }
  .gl-bg-copy .rule { margin-bottom: 14px; }
  .gl-bg-copy .gl-body { line-height: 1.55; }
  .gl-bg-copy .gl-pts { display: flex; gap: 14px; margin-top: 12px; }
  .gl-bg-copy .gl-pts li { gap: 2px; }
  .gl-bg-copy .gl-pts span { line-height: 1.5; }
  .capital-metrics { grid-template-columns: repeat(2, 1fr); margin-top: 38px; }
  .capital-metric:nth-child(2) { border-right: 0; }
  .capital-metric:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.12); }
  .capital-stage { height: 620px; margin: 18px -22px 0; }
  .gl-capital-sec .capital-stage { left: 0; }
  .capital-core { width: 142px; height: 142px; }
  .capital-node { width: 142px; padding: 13px; }
  .capital-node strong { font-size: 15px; }
  .capital-node small { font-size: 10px; }
  .capital-node-1 { top: 4%; left: 3%; }
  .capital-node-2 { top: -1%; right: 10%; }
  .capital-node-3 { top: 62%; right: -5px; }
  .capital-node-4 { bottom: 1%; right: 8%; }
  .capital-node-5 { bottom: 1%; left: 8%; }
  .capital-sector-grid { grid-template-columns: 1fr; gap: 12px; margin-top: 18px; }
  .capital-sector-card { min-height: 116px; padding: 17px 18px 16px; }
  .capital-sector-card strong { font-size: 17px; }
  .capital-sector-modal { padding: 14px; }
  .capital-sector-dialog { max-height: 84vh; padding: 30px 22px 28px; border-radius: 18px; }
  .capital-sector-modal-body p { margin-top: 16px; font-size: 14px; line-height: 1.8; }
  .capital-system { padding: 22px 18px; }
  .capital-system-head { display: block; }
  .capital-system-tag { display: block; margin-top: 16px; }
  .capital-operations { grid-template-columns: repeat(2, 1fr); row-gap: 22px; }
  .capital-operation:nth-child(odd) { border-left: 0; padding-left: 0; }
}
/* Restore the section tone and reveal only the particle artwork from its top edge. */
.gl-particle-earth-sec { background: transparent !important; }
.gl-particle-earth-sec .particle-earth-media[data-revealable] { opacity: 1; transform: none; clip-path: none; }
.gl-particle-earth-sec .particle-earth-media[data-revealable] .particle-earth-static { opacity: 0; clip-path: inset(0 0 100% 0); transition: opacity .92s ease-out, clip-path 1.2s cubic-bezier(.2,.7,.2,1); }
.gl-particle-earth-sec .particle-earth-media[data-revealable].is-visible .particle-earth-static { opacity: 1; clip-path: inset(0); }
@keyframes capitalSpin { to { transform: rotate(360deg); } }
@keyframes capitalFlow { 0% { opacity: .12; background-position: 100% 0; } 50% { opacity: .85; } 100% { opacity: .12; background-position: 0 0; } }
@keyframes governanceDrift { from { transform: translate3d(0,0,0); } to { transform: translate3d(34px,-18px,0); } }
@keyframes fundBlindOpen { to { transform: scaleX(0); } }
@keyframes tokenParticleDrift { from { transform: translate3d(0,0,0); } to { transform: translate3d(24px,-16px,0); } }

/* ============================================================
   英文版排版 —— 參照 Bank of Singapore：
   標題用大字號、細字重（300）的無襯線 Noto Sans，正文 16px 舒朗行距；
   中文版維持原有 Cormorant Garamond / Noto Serif 襯線風格不受影響。
   ============================================================ */
html[lang="en"] {
  --serif-display: 'Noto Sans', 'Noto Sans SC', sans-serif;
  --sans: 'Noto Sans', 'Noto Sans SC', system-ui, sans-serif;
}
html[lang="en"] .hc-title,
html[lang="en"] .section-title,
html[lang="en"] .page-hero-title,
html[lang="en"] .company-title,
html[lang="en"] .ceo-page-heading,
html[lang="en"] .careers-title,
html[lang="en"] .struct-title,
html[lang="en"] .cta-title,
html[lang="en"] .esg-t,
html[lang="en"] .esg-quote,
html[lang="en"] .gl-title,
html[lang="en"] .divider-quote,
html[lang="en"] .ms-year,
html[lang="en"] .member-profile-role {
  font-weight: 300;
  letter-spacing: 0;
}
html[lang="en"] .esg-quote,
html[lang="en"] .divider-quote { font-style: normal; }
html[lang="en"] .cv-head, html[lang="en"] .ceo-name { font-weight: 400; }
/* 板塊詳情頁標題原走中文襯線棧 --serif-sc；EN 下改用 Noto Sans，與同頁 hero、正文的無襯線一致。
   detail-title 與 section-title 同級取細字重 300，detail-subheading 為段內次級小標題取 400。 */
/* 矮視窗收緊留白；桌面英文的可讀字級在下方獨立保留。 */
@media (min-width: 681px) and (max-height: 880px) {
  .hc-inner { padding-top: 112px; padding-bottom: 110px; }
}
@media (min-width: 681px) and (max-height: 700px) {
  .hc-inner { padding-top: 100px; padding-bottom: 72px; }
  .hc-title, html[lang="en"] .hc-title { font-size: clamp(30px, 4.2vw, 56px); }
  .hc-sub { margin-top: 20px; line-height: 1.7; }
  .hc-actions { margin-top: 26px; }
}
@media (min-width: 681px) and (max-height: 580px) {
  .hc-inner { padding-top: 88px; padding-bottom: 52px; }
  .hc-title, html[lang="en"] .hc-title { font-size: clamp(26px, 3.4vw, 44px); }
  .hc-sub { font-size: 15px; line-height: 1.6; margin-top: 16px; }
  .hc-actions { margin-top: 22px; }
}

/* ============================================================
   首頁 hero 的中英排版對齊
   .hc-inner 是底部對齊的，所以區塊往上長——英文文案天生更長（標題 4 行、
   正文 6 行、按鈕標籤寬到換行堆疊），在手機與平板上會比中文版整整高出
   一百多像素，兩個語言看起來像兩套設計。
   下面只收斂英文版在窄屏下的字級與按鈕尺寸，把兩者的區塊高度拉近；
   中文版與桌面寬屏完全不受影響。
   ============================================================ */
@media (max-width: 680px) {
  /* 兩顆按鈕等分一行，避免英文標籤把第二顆擠到下一行 */
  .hc-actions { flex-wrap: nowrap; gap: 12px; }
  .hc-actions .hc-btn { flex: 1 1 0; min-width: 0; text-align: center; padding: 15px 10px; }
  /* 只有一顆按鈕時不該被拉滿整行 */
  .hc-actions .hc-btn:only-child { flex: 0 0 auto; padding: 15px 26px; }
  html[lang="en"] .hc-btn { font-size: 11px; letter-spacing: .07em; }
  html[lang="en"] .hc-title { font-size: clamp(26px, 7.8vw, 38px); line-height: 1.24; }
  html[lang="en"] .hc-sub { font-size: 14px; line-height: 1.7; margin-top: 20px; }
  html[lang="en"] .hc-eyebrow { margin-bottom: 18px; }
}
@media (min-width: 681px) and (max-width: 1024px) {
  html[lang="en"] .hc-title { font-size: clamp(34px, 4.4vw, 52px); line-height: 1.22; }
  html[lang="en"] .hc-sub { font-size: 15px; line-height: 1.72; margin-top: 24px; }
}

/* 首屏隨內容自然增高，矮視窗保留導覽下方的閱讀空間。 */
@media (min-width: 681px) and (max-height: 700px) {
  .hc-inner { padding-top: 124px; }
}
/* 桌面文字連續縮放，保留最低可讀字級。 */
@media (min-width: 1025px) {
  html[lang="en"] .hc-title { font-size: clamp(52px, 4.2vw, 76px); }
  .hc-sub { font-size: clamp(18px, 1.15vw, 20px); }
}

html[lang="en"] .detail-title,
html[lang="en"] .detail-subheading { font-family: var(--serif-display); }
html[lang="en"] .detail-title { font-weight: 300; }
html[lang="en"] .detail-subheading { font-weight: 400; }
/* 正文行距：拉丁文字在 1.9 倍行距下過於鬆散，收斂到 1.6 更貼近 BOS 的閱讀密度。 */
html[lang="en"] p { line-height: 1.62; }
html[lang="en"] .company-prose .about-p { font-size: 16px; }

html[lang="en"] .page-hero-title { font-size: clamp(30px, 3.8vw, 58px); }
html[lang="en"] .section-title,
html[lang="en"] .company-title,
html[lang="en"] .ceo-page-heading,
html[lang="en"] .struct-title,
html[lang="en"] .cta-title { font-size: clamp(26px, 3.1vw, 44px); }
html[lang="en"] body[data-page="contact"] .page-hero-title { max-width: none; }

html[lang="ja"] {
  --serif-display: 'Yu Mincho', 'Hiragino Mincho ProN', serif;
  --sans: 'Yu Gothic', 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif;
  --label: 'Yu Gothic', 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif;
  line-break: strict;
}
html[lang="ja"] .nav-link { letter-spacing: .02em; }
html[lang="ja"] .brand-word { font-family: var(--label); font-size: clamp(16px, 1.35vw, 21px); letter-spacing: .08em; }
html[lang="ja"] .hc-title { font-size: clamp(30px, 4vw, 60px); line-height: 1.45; }
html[lang="ja"] .page-hero-title { font-size: clamp(30px, 3.8vw, 58px); line-height: 1.45; }
html[lang="ja"] .section-title,
html[lang="ja"] .company-title { font-size: clamp(26px, 3vw, 44px); line-height: 1.5; }
html[lang="ja"] p { line-height: 1.85; }
.lang-switch { flex-shrink: 0; white-space: nowrap; }
@media (min-width: 681px) and (min-height: 701px) and (max-height: 880px) {
  .hc-inner { padding-top: 152px; padding-bottom: 70px; }
}
@media (max-width: 680px) {
  html[lang="ja"] .brand-word { font-size: clamp(14px, 3.6vw, 16px); letter-spacing: .02em; }
  html[lang="ja"] .hc-title { font-size: clamp(26px, 7vw, 36px); }
  html[lang="ja"] .hc-sub { font-size: 14px; line-height: 1.8; }
  html[lang="ja"] .hc-btn { font-size: 12px; letter-spacing: .04em; }
}