:root { --r-xs: 2px; --r-sm: 4px; --r-md: 6px; --r-lg: 8px; --r-xl: 10px; --gx: 100px; --gx2: 140px; --accent-text: #A84807; }
body { margin: 0; background: #FFFFFF; color: #2E2E2E; }
html, body { overflow-x: clip; }
* { box-sizing: border-box; }
img { max-width: 100%; }
a { color: var(--accent-text); text-decoration: none; }
a:hover { color: #8F3D04; }
.wrap { width: 100%; max-width: 1440px; margin: 0 auto; background: #FFFFFF; }
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 24px; border-radius: var(--r-md); font-weight: 700; font-size: 14px; white-space: nowrap; border: none; cursor: pointer; font-family: inherit; }
.card { background: #FFFFFF; border: 1px solid #E1E1E1; border-radius: var(--r-md); }
.eyebrow { text-transform: none; letter-spacing: 0.02em; font-size: 14px; font-weight: 600; color: var(--accent-text); }
.ico { width: 40px; height: 40px; border-radius: var(--r-md); background: #FFC342; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; }
.vt { font-size: 16px; font-weight: 700; margin: 0 0 8px; }
.vp { font-size: 12.5px; line-height: 1.65; color: #5A5A5A; margin: 0; }

/* NAV */
.nav { position: relative; z-index: 60; display: flex; align-items: center; justify-content: space-between; padding: 24px var(--gx); }
.nav-links { display: flex; align-items: center; gap: 48px; font-size: 15px; font-weight: 600; color: #2E2E2E; }
.nav-about { position: relative; padding: 10px 0; }
.nav-about > a { display: flex; align-items: center; gap: 6px; color: #2E2E2E; }
.nav-about .caret { transition: transform .18s ease; }
.nav-about:hover .caret { transform: rotate(180deg); }
.nav-about .dropdown { position: absolute; left: -18px; top: calc(100% + 12px); z-index: 20; display: none; min-width: 236px; background: #FFFFFF; border: 1px solid #E1E1E1; border-radius: var(--r-md); box-shadow: 0 8px 24px rgba(10,10,10,0.08); padding: 8px; }
.nav-about:hover .dropdown { display: block; }
/* invisible bridge across the 12px gap so the menu stays open while the pointer moves into it */
.nav-about .dropdown::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.nav-about .dropdown a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: var(--r-md); font-size: 14px; font-weight: 600; color: #2E2E2E; }
.nav-about .dropdown a:hover { background: #FFF3D3; }
.nav-about .dropdown a .arrow { opacity: 0; }
.nav-about .dropdown a:hover .arrow { opacity: 1; }
.nav-about .dropdown a.current { color: var(--accent-text); }
.nav-links > a.current { color: var(--accent-text); }

/* FOOTER */
.site-footer { background: #2E2E2E; padding: 68px var(--gx) 32px; }
.site-footer-top { display: flex; justify-content: space-between; gap: 40px; padding-bottom: 52px; border-bottom: 1px solid #434343; }
.site-footer h5 { color: #FFFFFF; font-size: 15px; font-weight: 700; margin: 0 0 22px; }
.site-footer-col { display: flex; flex-direction: column; gap: 14px; font-size: 13.5px; color: #E1E1E1; }
.site-footer-col a { color: #E1E1E1; }
.site-footer-col a:hover { color: #FFC342; }
.lang-pill { border: 1px solid #434343; padding: 11px 16px; height: 42px; min-width: 210px; color: #D8D8D8; font-size: 13.5px; display: flex; align-items: center; justify-content: space-between; }
.footer-bottom { border-top: 1px solid #434343; padding-top: 24px; color: #AAAAAA; font-size: 12.5px; margin: 0; text-align: left; }

/* ===================== RESPONSIVE ===================== */
.nav-toggle { display: none; width: 44px; height: 44px; margin-right: -10px; border: 0; background: none; cursor: pointer; align-items: center; justify-content: center; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { display: block; width: 22px; height: 2px; background: #2E2E2E; border-radius: var(--r-xs); transition: transform .25s ease, background .25s ease; content: ""; }
.nav-toggle span { position: relative; }
.nav-toggle span::before { position: absolute; top: -7px; }
.nav-toggle span::after { position: absolute; top: 7px; }
.nav.open .nav-toggle span { background: transparent; }
.nav.open .nav-toggle span::before { transform: translateY(7px) rotate(45deg); }
.nav.open .nav-toggle span::after { transform: translateY(-7px) rotate(-45deg); }
/* ---------- mobile menu: full-height sheet below the header ---------- */
.nav-panel { display: none; position: fixed; left: 0; right: 0; bottom: 0; top: 0; z-index: 100; background: #fff; border-top: 1px solid #F0F0F0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.nav.open .nav-panel { display: block; animation: np-in .22s cubic-bezier(.2,.8,.2,1); }
@keyframes np-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
html.np-lock, html.np-lock body { overflow: hidden; }
.np-inner { display: flex; flex-direction: column; min-height: 100%; padding: 8px var(--gx) calc(24px + env(safe-area-inset-bottom)); }
.np-k { margin: 18px 0 4px !important; font-size: 12.5px !important; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #6A6A6A; }
.nav-panel a.np-sub, .nav-panel a.np-main { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #2E2E2E; border-bottom: 1px solid #F1F0EC; }
.nav-panel a.np-sub { min-height: 52px; font-size: 17px; font-weight: 500; }
.np-mains { margin-top: 14px; border-top: 1px solid #E6E4DE; }
.nav-panel a.np-main { min-height: 64px; font-size: 21px; font-weight: 700; letter-spacing: -0.01em; }
.nav-panel a.cur { color: var(--accent-text); }
.nav-panel a.cur .np-chev { color: var(--accent-text); }
.np-chev { flex: none; color: #B5B2AA; transition: transform .15s ease; }
.nav-panel a:active .np-chev { transform: translateX(3px); }
.nav-panel a.np-cta { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 54px; margin-top: 28px; border-radius: var(--r-md); background: #FFC342; color: #2E2E2E; font-size: 17px; font-weight: 700; }
.nav-panel a.np-cta:active { background: #F0B530; }
.np-foot { margin-top: auto; padding-top: 28px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.np-foot > a:first-child { font-size: 14.5px; color: #5A5A5A; padding: 10px 0; }
.np-foot .np-lang { display: inline-flex; }
@media (prefers-reduced-motion: reduce) { .nav.open .nav-panel { animation: none; } }

@media (max-width: 1100px) {
  :root { --gx: 48px; --gx2: 48px; }
  .nav > a:first-child { display: block; padding: 8px 0; }
  .nav-links, .nav > div:nth-of-type(2) { display: none !important; }
  .nav-toggle { display: inline-flex; }
  .r-grid[data-cols="2"] { grid-template-columns: minmax(0,1fr) !important; gap: 24px !important; }
  .r-grid[data-cols="3"], .r-grid[data-cols="4"], .r-grid[data-cols="5"], .r-grid[data-cols="6"] { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  .r-stack { flex-direction: column !important; align-items: stretch !important; gap: 28px !important; }
  .r-stack > * { width: auto !important; max-width: 100% !important; flex: none !important; }
  [style*="position:sticky"] { position: static !important; }
  .site-footer-top { flex-wrap: wrap; row-gap: 40px; }
}

@media (max-width: 640px) {
  :root { --gx: 20px; --gx2: 20px; }
  .r-grid[data-cols] { grid-template-columns: minmax(0,1fr) !important; gap: 20px !important; }
  #co-grid, #siblings-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 12px !important; }
  .r-pad { padding: 28px 22px !important; }
  [style*="height:340px"], [style*="height:360px"], [style*="height:400px"] { height: 240px !important; }
  [style*="min-height:4"], [style*="min-height:5"] { min-height: 260px !important; }
  .site-footer { padding-top: 48px; }
  .site-footer-top { flex-direction: column; gap: 32px; }
  .site-footer-top > div { max-width: none !important; width: 100% !important; }
  .site-footer-top > div:nth-child(2) { gap: 48px !important; }
  .lang-pill { min-width: 0; width: 100%; }
  .nav { padding-top: 14px; padding-bottom: 14px; }
}

/* ---- page-specific responsive helpers ---- */
.subnav { overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.subnav::-webkit-scrollbar { display: none; }
@media (max-width: 1100px) {
  .team-grid { grid-template-columns: repeat(3, minmax(0,1fr)) !important; gap: 20px !important; }
  div:has(> .city-card) { flex-wrap: wrap !important; }
  .city-card { flex: 1 1 calc(25% - 15px) !important; width: auto !important; min-width: 140px; height: 240px !important; }
  .co-cell { min-height: 150px; padding: 24px 16px; }
}
@media (max-width: 640px) {
  .subnav { gap: 22px !important; }
  .team-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 16px !important; margin-top: 24px !important; }
  .team-card .name { font-size: 16px !important; margin-top: 12px !important; }
  .team-card .title { font-size: 12.5px !important; }
  .team-section { padding-bottom: 36px !important; }
  .team-section h2 { font-size: 22px !important; }
  .city-card { flex: 1 1 calc(50% - 10px) !important; height: 200px !important; }
  .co-cell { min-height: 110px; padding: 18px 10px; }
  .co-cell img { max-height: 46px !important; }
  .co-name-word { font-size: 18px !important; }
  div:has(> .kind-tab) { flex-wrap: wrap !important; }
  div:has(> button[type="submit"]) { flex-direction: column !important; align-items: flex-start !important; }
  .page-link { min-height: 150px !important; padding: 26px 22px !important; }
  .fact-row { font-size: 14px !important; }
  [style*="font-size:34px"][style*="800"] { font-size: 26px !important; }
}

/* ===================== ACCESSIBILITY / UX ===================== */
h1, h2, h3, h4 { overflow-wrap: anywhere; min-width: 0; }
:focus-visible { outline: 2px solid #2E2E2E; outline-offset: 3px; }
.site-footer :focus-visible, .cta :focus-visible { outline-color: #FFC342; }
input:focus-visible, textarea:focus-visible { outline: 2px solid #2E2E2E !important; outline-offset: 2px; }
[role="button"] { cursor: pointer; }
.skip-link { border-radius: var(--r-sm); position: absolute; left: 12px; top: -60px; z-index: 200; background: #2E2E2E; color: #fff; padding: 12px 18px; font-weight: 700; font-size: 14px; }
.skip-link:focus { top: 12px; color: #fff; }
button { font-family: inherit; }
html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 24px; }
.site-footer-col .muted { color: #AAAAAA; cursor: default; }

@media (hover: none) {
  .co-cell img { filter: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1 !important; }
}
@media (max-width: 640px) {
  p[style*="font-size:11"], p[style*="font-size:12"], .footer-bottom, p.d { font-size: 12.5px !important; }
  li { font-size: 14.5px !important; }
  .site-footer-col a, .site-footer-col span { padding: 14px 0; font-size: 14.5px; line-height: 17px; }
  .nav > a:first-child { display: block; padding: 8px 0; }
  .subnav a { padding-top: 14px !important; padding-bottom: 14px !important; }
  .site-footer-col { gap: 0; }
  .site-footer .lang-pill { height: 48px; }
  .btn, .kind-tab, .sector-tab, .topic-tab { min-height: 44px; }
}
/* keyboard users can open the About dropdown */
.nav-about:focus-within .dropdown { display: block; }
.nav-about:focus-within .caret { transform: rotate(180deg); }
[tabindex="-1"]:focus { outline: none; }

/* =====================================================================
   TYPE SYSTEM
   Modelled on Apple HIG / Material 3 / IBM Carbon: a small fixed scale,
   display face only for large headlines, one text face for everything else,
   and a separate rule-set for Chinese (CJK needs heavier leading, no negative
   tracking, and lighter heading weights than Latin).
   ===================================================================== */
:root {
  --font-display: 'Plus Jakarta Sans', 'Inter', 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', system-ui, sans-serif;
  --font-text: 'Inter', 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-zh: 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', 'Inter', system-ui, sans-serif;

  /* English scale (desktop) */
  --fs-display: 48px; --lh-display: 1.12; --ls-display: -0.025em;   /* h1 */
  --fs-headline: 32px; --lh-headline: 1.22; --ls-headline: -0.02em; /* h2 */
  --fs-title: 20px; --lh-title: 1.4; --ls-title: -0.01em;           /* h3 */
  --fs-title-s: 16px; --lh-title-s: 1.45;                           /* h4, FAQ questions */
  --fs-article: 17px; --lh-article: 1.45;                           /* article titles (Medium) */
  --fs-article-lead: 26px;                                          /* featured article title */
  --fs-body-l: 17px; --fs-body: 15px; --fs-body-s: 13px; --fs-label: 12px;
  --lh-body: 1.6;
}
@media (max-width: 1100px) {
  :root { --fs-display: 42px; --fs-headline: 28px; --fs-article-lead: 24px; }
}
@media (max-width: 640px) {
  :root { --fs-display: 34px; --lh-display: 1.18; --fs-headline: 26px; --lh-headline: 1.25; --fs-title: 18px; --fs-article: 16px; --fs-article-lead: 22px; --fs-body: 15px; }
}

body { font-family: var(--font-text); font-optical-sizing: auto; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
input, textarea, select, button { font-family: inherit; }

/* Display face: large headlines only */
h1, h2 { font-family: var(--font-display) !important; font-weight: 800; }
h1 { font-size: var(--fs-display) !important; line-height: var(--lh-display) !important; letter-spacing: var(--ls-display) !important; }
h2 { font-size: var(--fs-headline) !important; line-height: var(--lh-headline) !important; letter-spacing: var(--ls-headline) !important; }
h1.t-mega { font-size: clamp(60px, 7.8vw, 112px) !important; line-height: 0.92 !important; letter-spacing: -0.035em !important; }

/* Everything below headline level is Inter */
h3, h4, h5, h6 { font-family: var(--font-text) !important; }
h3 { font-size: var(--fs-title) !important; line-height: var(--lh-title) !important; letter-spacing: var(--ls-title) !important; font-weight: 600 !important; }
h4 { font-weight: 600; }
.faq-q h3 { font-size: var(--fs-title-s) !important; line-height: var(--lh-title-s) !important; letter-spacing: 0 !important; }

/* Article titles: Inter Medium */
.post-card h4, .blog-row h4, .blog-main h4 { font-family: var(--font-text) !important; font-weight: 500 !important; font-size: var(--fs-article) !important; line-height: var(--lh-article) !important; letter-spacing: -0.01em !important; }
.blog-main h4 { font-size: calc(var(--fs-article) + 3px) !important; }
.feature-card .fc-title { font-family: var(--font-text) !important; font-weight: 500 !important; font-size: var(--fs-article-lead) !important; line-height: 1.3 !important; letter-spacing: -0.015em !important; }

/* Body copy */
p { line-height: var(--lh-body); }
@media (max-width: 640px) {
  p { font-size: var(--fs-body) !important; line-height: var(--lh-body) !important; }
}

/* ---------- Chinese (zh-Hant) ---------- */
:lang(zh) { font-family: var(--font-zh) !important; letter-spacing: 0.02em; font-feature-settings: normal; line-break: strict; }
:lang(zh) h1, :lang(zh) h2, h1:lang(zh), h2:lang(zh) { font-weight: 700 !important; letter-spacing: 0.01em !important; line-height: 1.35 !important; }
:lang(zh) h1, h1:lang(zh) { font-size: calc(var(--fs-display) * 0.9) !important; }
:lang(zh) h3, h3:lang(zh) { font-weight: 500 !important; letter-spacing: 0.02em !important; line-height: 1.5 !important; }
:lang(zh) p, p:lang(zh), :lang(zh) li { line-height: 1.8 !important; letter-spacing: 0.03em; }
@media (max-width: 640px) { :lang(zh) p, p:lang(zh) { font-size: 16px !important; } }
:lang(zh) .eyebrow, :lang(zh) [style*="uppercase"] { text-transform: none !important; letter-spacing: 0.06em !important; }
.t-zh-name { letter-spacing: 0.08em; }
/* Sub-section headings that sit below a page h2 (Team groups) */
@media (min-width: 641px) { .team-section h2 { font-size: 24px !important; line-height: 1.3 !important; } }

/* Full-bleed bands: the page lives in a 1440px .wrap, but coloured sections and the footer should
   reach the screen edges on wider displays. A background layer is stretched to the viewport while the
   content keeps its grid alignment. (html/body use overflow-x: clip, so nothing can scroll sideways.) */
.site-footer, .bleed { position: relative; isolation: isolate; }
.site-footer::before, .bleed::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: calc(50% - 50vw); right: calc(50% - 50vw);
  background: inherit; z-index: -1; pointer-events: none;
}
/* header hairline (pages whose .nav carries an inline border-bottom): stretch it to the screen edges too */
@media (min-width: 1441px) {
  .nav[style*="border-bottom"] { border-bottom-color: transparent !important; }
  .nav[style*="border-bottom"]::after { content: ""; position: absolute; left: calc(50% - 50vw); right: calc(50% - 50vw); bottom: -1px; height: 1px; background: #F0F0F0; pointer-events: none; }
}

/* ===================== Language switch (header + footer) ===================== */
.lang-switch { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border: 1px solid #E1E1E1; border-radius: var(--r-md); font-size: 13px; font-weight: 600; color: #2E2E2E; white-space: nowrap; transition: border-color .15s ease, background .15s ease; }
.lang-switch:hover { border-color: #2E2E2E; color: #2E2E2E; }
.lang-switch svg { flex: none; }
.nav .lang-switch-m { display: none; }
@media (max-width: 1100px) {
  .nav .lang-switch-m { display: inline-flex; margin-left: auto; margin-right: 6px; height: 36px; }
}
a.lang-pill { gap: 12px; color: #D8D8D8; }
a.lang-pill span:first-child { display: inline-flex; align-items: center; gap: 8px; }
a.lang-pill .lp-sw { color: #FFC342; font-weight: 600; }
a.lang-pill:hover { border-color: #FFC342; color: #fff; }
/* team cards on the Chinese site keep the English name as a quiet second line */
.tm-name .tm-en { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 500; color: #6A6A6A; letter-spacing: 0; }
/* founder hero: the Chinese name is the display line on the Chinese site */
:lang(zh) h1.t-mega { font-size: clamp(64px, 8vw, 120px) !important; line-height: 1 !important; letter-spacing: 0.06em !important; }

/* phones: slightly smaller logo so logo + language switch + menu fit comfortably */
@media (max-width: 640px) {
  .nav > a:first-child img { height: 26px !important; }
  .nav .lang-switch-m { height: 34px; padding: 0 10px; gap: 5px; font-size: 12.5px; margin-right: 4px; }
}

/* ===================== Hover system (all pages) =====================
   One rule per button family, so the same kind of control always answers the same way:
   · solid buttons  — colour shift + 1px lift + soft shadow; pressing settles them back
   · outline buttons / chips / tabs — border darkens + faint warm tint, no movement (they sit in rows)
   · icon buttons   — gentle scale-up (FAQ +/− toggle, article share icon)
   · text links with arrows — the arrow nudges right (defined with each link, unchanged)
   Mouse/trackpad only (no sticky hover after a tap); movement is dropped for reduced-motion users. */
:root { --hv-dur: .2s; --hv-ease: cubic-bezier(.2, .6, .2, 1); --hv-shadow: 0 6px 14px -4px rgba(46,46,46,.28); }

/* solid */
.btn, .ab-btn:not(.ghost), .pf-btn, .a-btn, .f-submit, .cta button, .news-cta a, #news-form button[type="submit"] {
  transition: background-color var(--hv-dur) var(--hv-ease), color var(--hv-dur) var(--hv-ease),
              box-shadow var(--hv-dur) var(--hv-ease), transform var(--hv-dur) var(--hv-ease);
}
/* outline / chips / tabs */
.lang-switch, .lang-pill, .ab-btn.ghost, .tm-jump a, .a-alt, .ins-chip, .sector-tab {
  transition: background-color var(--hv-dur) var(--hv-ease), border-color var(--hv-dur) var(--hv-ease), color var(--hv-dur) var(--hv-ease);
}
/* icon */
.faq-toggle, .a-icon { transition: transform .26s var(--hv-ease), background-color var(--hv-dur) var(--hv-ease), color var(--hv-dur) var(--hv-ease); }

@media (hover: hover) and (pointer: fine) {
  /* solid: lift + shadow */
  .btn:hover, .ab-btn:not(.ghost):hover, .pf-btn:hover, .a-btn:hover, .f-submit:hover, .cta button:hover,
  .news-cta a:hover, #news-form button[type="submit"]:hover { transform: translateY(-1px); box-shadow: var(--hv-shadow); }
  /* solid: colour — dark buttons lighten to #434343, yellow buttons to a softer yellow */
  .btn[style*="#2E2E2E"]:hover, .news-cta a:hover, #news-form button[type="submit"]:hover, .cta button:hover { background: #434343 !important; color: #FFFFFF !important; }
  .btn[style*="#FFC342"]:hover { background: #FFCF66 !important; color: #2E2E2E !important; }

  /* outline / chips / tabs: light surfaces */
  .lang-switch:hover, .ab-btn.ghost:hover, .tm-jump a:hover, .a-alt:hover, .ins-chip:not([aria-pressed="true"]):hover {
    border-color: #2E2E2E; background-color: #F7F6F3; color: #2E2E2E;
  }
  .sector-tab:not(.active):hover { background-color: #F4F2EE; }
  /* footer pill sits on the dark footer: yellow edge, faint lift in tone */
  a.lang-pill:hover { border-color: #FFC342; background-color: rgba(255,255,255,.04); color: #FFFFFF; }

  /* icon: gentle scale */
  .faq-q:hover .faq-toggle { transform: scale(1.06); }
  .a-icon:hover { transform: scale(1.06); }
}
/* pressed */
.btn:active, .ab-btn:not(.ghost):active, .pf-btn:active, .a-btn:active, .f-submit:active, .cta button:active,
.news-cta a:active, #news-form button[type="submit"]:active { transform: translateY(0); box-shadow: none; transition-duration: .08s; }
.faq-q:active .faq-toggle, .a-icon:active { transform: scale(.97); transition-duration: .08s; }

@media (prefers-reduced-motion: reduce) {
  .btn, .ab-btn, .pf-btn, .a-btn, .f-submit, .cta button, .news-cta a, #news-form button[type="submit"], .faq-toggle, .a-icon { transform: none !important; }
}

/* form honeypot: invisible to people, filled only by spam bots */
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; pointer-events: none; }