:root {
  --bg: #08080e;
  --surface: #0d0d14;
  --text: #e6e2d8;
  --text-muted: rgba(230, 226, 216, 0.42);
  --gold: #b08d57;
  --gold-dim: rgba(176, 141, 87, 0.18);
  --border: rgba(230, 226, 216, 0.08);
  --maxw: 1080px;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--text); font-family: "Jost", sans-serif; font-weight: 300; line-height: 1.75; overflow-x: hidden; }
html[lang="zh-Hans"] body { font-family: "Noto Sans SC", sans-serif; font-weight: 300; }
h1, h2, h3 { margin: 0; font-family: "Cormorant Garamond", serif; font-weight: 300; line-height: 1.2; }
html[lang="zh-Hans"] h1, html[lang="zh-Hans"] h2, html[lang="zh-Hans"] h3, html[lang="zh-Hans"] .brand, html[lang="zh-Hans"] .tile h2, html[lang="zh-Hans"] .person h2, html[lang="zh-Hans"] .offices-grid h2, html[lang="zh-Hans"] .city-cards h3 { font-family: "Noto Serif SC", serif; font-weight: 300; }
p { margin: 0; }
main { max-width: var(--maxw); margin: 0 auto; padding: 7.25rem 1.5rem 5rem; }
.site-nav-wrap { position: fixed; top: 0; width: 100%; z-index: 40; background: rgba(8, 8, 14, 0.75); backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); }
.site-nav { max-width: var(--maxw); margin: 0 auto; padding: 1rem 1.5rem; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; }
.brand { justify-self: start; color: var(--text); text-decoration: none; letter-spacing: 0.2em; text-transform: uppercase; font-size: 0.73rem; }
.nav-menu { display: contents; }
.nav-center { display: flex; gap: 1.4rem; justify-self: center; }
.nav-center a, .lang-toggle a { color: var(--text); text-decoration: none; font-size: 0.85rem; padding-bottom: 0.1rem; border-bottom: 1px solid transparent; }
.nav-center a[aria-current="page"], .lang-toggle a.active { border-bottom-color: var(--gold); }
.lang-toggle { justify-self: end; display: flex; gap: 0.35rem; align-items: center; }
.lang-toggle span { color: var(--text-muted); font-size: 0.8rem; }
.nav-toggle { display: none; background: none; border: 0; padding: 0; width: 28px; height: 18px; }
.nav-toggle span { display: block; width: 100%; height: 1px; background: var(--text); margin: 0 0 7px; }
.hero { min-height: calc(100vh - 8rem); display: flex; flex-direction: column; justify-content: center; gap: 1.1rem; }
.hero h1 { font-size: clamp(2.2rem, 6vw, 5.2rem); max-width: 11ch; }
.lead { max-width: 520px; font-size: 0.95rem; }
.hero .lead { margin: 1rem 0; }
.eyebrow { color: var(--text-muted); letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.68rem; }
.muted { color: var(--text-muted); }
.gold-rule-short { display: block; width: 0; height: 1px; background: var(--gold); margin-bottom: 0.7rem; transition: width 0.9s ease; }
.gold-rule-short.in-view { width: 48px; }
.hero-rule { transition-delay: 0.2s; }
.services { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.tile { padding: 2rem 1.25rem 2.2rem; min-height: 220px; }
.tile + .tile { border-left: 1px solid var(--border); }
.tile-num { color: var(--gold); font-size: 0.86rem; margin-bottom: 1rem; }
.tile h2 { font-size: 1.6rem; margin-bottom: 0.8rem; }
.content-block, .service-block, .page-head, .person, .contact-block, .map-section { padding: 5rem 0; }
.offices-grid { margin-top: 2rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.3rem 1.8rem; }
.offices-grid h2 { font-size: 2rem; margin-bottom: 0.35rem; }
.office-role { color: var(--gold); text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.6rem; }
.map-box { border: 1px solid var(--gold-dim); margin-top: 0; position: relative; background: #04040a; }
#world-map { display: block; width: 100%; height: auto; }
.grat.eq { stroke: rgba(230,226,216,0.06); stroke-width: 0.5; }
.grat.trop { stroke: rgba(230,226,216,0.03); stroke-width: 0.3; stroke-dasharray: 3 4; }
.grat.pm { stroke: rgba(230,226,216,0.04); stroke-width: 0.4; }
.grat.mer { stroke: rgba(230,226,216,0.025); stroke-width: 0.3; }
.country { fill: rgba(230,226,216,0.055); stroke: rgba(230,226,216,0.09); stroke-width: 0.35; stroke-linejoin: round; }
.country-eu { fill: rgba(176,141,87,0.14); stroke: rgba(176,141,87,0.42); stroke-width: 0.6; }
.country-china { fill: rgba(176,141,87,0.15); stroke: rgba(176,141,87,0.55); stroke-width: 0.7; }
.country-portugal { fill: rgba(176,141,87,0.15); stroke: rgba(176,141,87,0.65); stroke-width: 0.8; }
.country-spain { fill: rgba(176,141,87,0.15); stroke: rgba(176,141,87,0.45); stroke-width: 0.65; }
.country-usa { fill: rgba(176,141,87,0.13); stroke: rgba(176,141,87,0.52); stroke-width: 0.65; }
.route { fill: none; stroke: var(--gold); stroke-linecap: round; stroke-dashoffset: var(--dash); vector-effect: non-scaling-stroke; }
.route.solid { stroke-width: 0.95; opacity: 0.7; }
#route-hk-lis { opacity: 0.5; }
.route.dashed { stroke-width: 0.8; opacity: 0.55; }
.map-section.map-in-view .route { transition: stroke-dashoffset 2s ease; stroke-dashoffset: 0; }
.pulse { fill: none; stroke: var(--gold); stroke-width: 1; opacity: 0.7; animation: pulse 2.5s infinite; }
.pulse-lg { animation-name: pulseLarge; }
.pulse-offset { animation-delay: 1.25s; }
@keyframes pulse { from { r: 4; opacity: 0.7; } to { r: 18; opacity: 0; } }
@keyframes pulseLarge { from { r: 4; opacity: 0.7; } to { r: 22; opacity: 0; } }
.city-dots circle { fill: var(--gold); filter: drop-shadow(0 0 3px rgba(176,141,87,0.8)); }
.travel-dots circle { fill: var(--gold); opacity: 0.85; }
.clabel { font-family: "Jost", sans-serif; font-weight: 300; font-size: 9px; fill: var(--text); letter-spacing: 0.06em; }
.csub { font-family: "Jost", sans-serif; font-weight: 300; font-size: 6px; fill: var(--gold); letter-spacing: 0.13em; text-transform: uppercase; }
.map-legend text { fill: var(--text-muted); font-size: 8px; letter-spacing: 0.08em; font-family: "Jost", sans-serif; }
.legend-dot { fill: var(--gold); }
.legend-box { fill: rgba(176,141,87,0.25); stroke: rgba(176,141,87,0.55); }
.legend-line { stroke: var(--gold); stroke-width: 1; }
.map-tooltip { position: absolute; background: rgba(8,8,14,0.92); border: 1px solid var(--gold-dim); padding: 0.35rem 0.5rem; font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; pointer-events: none; opacity: 0; transform: translate(8px, 8px); color: var(--text); }
.map-tooltip.show { opacity: 1; }
.city-cards { border-top: 1px solid var(--gold-dim); display: grid; grid-template-columns: repeat(4, 1fr); }
.city-cards article { padding: 1rem 0.8rem; }
.city-cards article + article { border-left: 1px solid var(--gold-dim); }
.city-cards h3 { font-family: "Cormorant Garamond", serif; font-weight: 300; font-size: 1.15rem; margin-bottom: 0.35rem; }
.city-cards p { color: var(--gold); font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; }
.service-sections .service-block { border-top: 1px solid var(--border); }
.service-block h2 { font-size: clamp(2rem, 5vw, 3rem); margin-bottom: 0.8rem; }
.people-list .person + .person { border-top: 1px solid var(--border); }
.person h2 { font-size: clamp(2rem, 4vw, 3.2rem); }
.person-title { margin: 0.4rem 0 1.1rem; color: var(--gold); text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.64rem; }
.institutions { color: var(--gold); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; margin-top: 1rem; }
.education { margin-top: 0.6rem; font-size: 0.88rem; }
.contact-block h1 { font-size: clamp(2rem, 5vw, 4rem); margin-bottom: 1rem; }
.contact-block p { max-width: 560px; }
.contact-email { margin: 2rem 0; font-family: "Cormorant Garamond", serif; font-size: 2rem; }
.contact-email-link { color: inherit; text-decoration: none; border-bottom: 1px solid var(--gold-dim); padding-bottom: 0.05rem; }
.contact-email-link:hover { border-bottom-color: var(--gold); }
.contact-cities { white-space: pre-line; color: var(--text-muted); }
.about-page main { display: flex; flex-direction: column; }
.about-page .map-section { order: -1; }
.about-page .map-section { padding: 2.75rem 0 2.5rem; }
.about-page .content-block[data-stagger="1"] { display: none; }
.site-footer { max-width: var(--maxw); margin: 0 auto; padding: 1rem 1.5rem 1.6rem; border-top: 1px solid var(--border); }
.site-footer p { font-size: 0.62rem; color: var(--text-muted); letter-spacing: 0.11em; text-transform: uppercase; }
.reveal, .reveal-on-load { transform: translateY(30px); opacity: 0; transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.in-view, .reveal-on-load.in-view { transform: translateY(0); opacity: 1; }
.grain { position: fixed; inset: 0; pointer-events: none; z-index: 999; opacity: 0.018; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E"); background-size: 160px 160px; }
@media (max-width: 768px) {
  .site-nav { grid-template-columns: 1fr auto; }
  .nav-toggle { display: block; justify-self: end; }
  .nav-menu { display: none; grid-column: 1 / -1; border-top: 1px solid var(--border); margin-top: 0.8rem; padding-top: 0.8rem; }
  .nav-menu.open { display: grid; gap: 0.9rem; }
  .nav-center { flex-direction: column; gap: 0.5rem; justify-self: start; }
  .lang-toggle { justify-self: start; }
  .services { grid-template-columns: 1fr; }
  .tile + .tile { border-left: 0; border-top: 1px solid var(--border); }
  .offices-grid { grid-template-columns: 1fr; }
  .city-cards { grid-template-columns: repeat(2, 1fr); }
  .city-cards article:nth-child(odd) { border-left: 0 !important; }
  .city-cards article { border-top: 1px solid var(--gold-dim); }
  .city-labels, .map-legend { display: none; }
  .people-list .person { width: 100%; }
}