/* ==========================================================================
   Career site — typography-first, minimal, professional
   Palette: light page, deep navy accent. No dark-gold / K-line / neon.
   ========================================================================== */

:root {
  --bg:            #F7F8FA;
  --surface:       #FFFFFF;
  --surface-soft:  #F1F3F7;
  --text:          #111827;
  --text-muted:    #55607A;
  --accent:        #14315C;
  --accent-soft:   #2C4E82;
  --dark:          #0F2440;
  --dark-text:     #E8EDF5;
  --dark-muted:    #A8B6CC;
  --line:          #E3E7ED;
  --line-strong:   #CBD3DF;

  --font-sans: Inter, "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-cjk:  "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC",
               "Noto Sans TC", "Hiragino Sans", "Yu Gothic", "Noto Sans JP",
               "Noto Naskh Arabic", "Noto Sans Arabic", sans-serif;

  --wrap: 1080px;
  --wrap-narrow: 760px;
  --radius: 10px;
  --radius-sm: 6px;

  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;

  --ease: cubic-bezier(.2, .7, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

:lang(zh-Hans), :lang(zh-Hant), :lang(ja) { font-family: var(--font-cjk); }
:lang(ar) { font-family: var(--font-cjk); font-size: 17.5px; line-height: 1.85; }

img, svg { max-width: 100%; }
h1, h2, h3, h4 { margin: 0; line-height: 1.2; letter-spacing: -0.015em; font-weight: 650; }
p { margin: 0 0 var(--s-4); }
ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

:focus-visible {
  outline: 2px solid var(--accent-soft);
  outline-offset: 3px;
  border-radius: 3px;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--s-5);
}
.wrap-narrow { max-width: var(--wrap-narrow); }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; inset-inline-start: -9999px; top: 0; z-index: 100;
  background: var(--accent); color: #fff;
  padding: var(--s-3) var(--s-4);
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { inset-inline-start: 0; text-decoration: none; }

/* ---------------------------------------------------------------- header */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(247, 248, 250, .88);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  display: flex; align-items: center; gap: var(--s-5);
  min-height: 64px;
}

.brand {
  display: inline-flex; align-items: center; gap: var(--s-3);
  color: var(--text); font-weight: 650; letter-spacing: -0.01em;
  white-space: nowrap;
}
.brand:hover { text-decoration: none; }

.brand-mark {
  display: grid; place-items: center;
  width: 30px; height: 30px;
  border-radius: 8px;
  background: var(--accent); color: #fff;
  font-size: 12.5px; font-weight: 700; letter-spacing: .02em;
}

.site-nav {
  display: flex; align-items: center; gap: var(--s-5);
  margin-inline-start: auto;
}
.site-nav a {
  color: var(--text-muted); font-size: 15px; font-weight: 500;
  padding-block: var(--s-1);
}
.site-nav a:hover { color: var(--text); text-decoration: none; }

.header-actions { display: flex; align-items: center; gap: var(--s-3); }

.lang-switch { position: relative; }
.lang-switch > summary {
  display: inline-flex; align-items: center; gap: var(--s-2);
  list-style: none; cursor: pointer;
  padding: 6px var(--s-3);
  border: 1px solid var(--line-strong); border-radius: 999px;
  font-size: 13.5px; font-weight: 550; color: var(--text-muted);
  background: var(--surface);
  transition: border-color .18s var(--ease), color .18s var(--ease);
}
.lang-switch > summary::-webkit-details-marker { display: none; }
.lang-switch > summary:hover { border-color: var(--accent-soft); color: var(--text); }

.lang-menu {
  position: absolute; inset-inline-end: 0; top: calc(100% + 8px);
  min-width: 168px; padding: var(--s-2);
  background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(15, 36, 64, .12);
  z-index: 60;
}
.lang-menu a {
  display: block; padding: 7px var(--s-3);
  border-radius: var(--radius-sm);
  color: var(--text-muted); font-size: 14.5px;
}
.lang-menu a:hover { background: var(--surface-soft); color: var(--text); text-decoration: none; }
.lang-menu a[aria-current="true"] { color: var(--accent); font-weight: 650; }
.lang-menu a[aria-current="true"]::after { content: " ✓"; }

.nav-toggle {
  display: none;
  width: 38px; height: 38px;
  border: 1px solid var(--line-strong); border-radius: 8px;
  background: var(--surface); cursor: pointer;
  position: relative;
}
.nav-toggle-bar,
.nav-toggle-bar::before,
.nav-toggle-bar::after {
  position: absolute; inset-inline-start: 50%; translate: -50% 0;
  width: 17px; height: 1.6px; background: var(--text); border-radius: 2px;
  transition: transform .2s var(--ease), opacity .2s var(--ease);
}
.nav-toggle-bar { top: 50%; margin-top: -0.8px; }
.nav-toggle-bar::before { content: ""; top: -5.5px; }
.nav-toggle-bar::after  { content: ""; top: 5.5px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar::before { transform: translateY(5.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar::after  { transform: translateY(-5.5px) rotate(-45deg); }

/* ------------------------------------------------------------------ hero */

.hero { padding-block: var(--s-9) var(--s-8); background: var(--surface); border-bottom: 1px solid var(--line); }

.hero-inner {
  display: grid; grid-template-columns: minmax(0, 1fr) 380px;
  gap: var(--s-8); align-items: center;
}

.hero-eyebrow {
  margin: 0 0 var(--s-4);
  font-size: 12.5px; font-weight: 650; letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent-soft);
}

.hero-name {
  font-size: clamp(2.5rem, 6vw, 3.6rem);
  letter-spacing: -0.03em; line-height: 1.05;
  margin-bottom: var(--s-4);
}

.hero-headline {
  font-size: clamp(1.1rem, 2.2vw, 1.35rem);
  font-weight: 550; color: var(--accent);
  margin-bottom: var(--s-4); letter-spacing: -0.01em;
}

.hero-subtitle {
  font-size: 1.08rem; color: var(--text-muted);
  max-width: 46ch; margin-bottom: var(--s-5);
}

.hero-supporting {
  font-size: 13.5px; color: var(--text-muted);
  letter-spacing: .01em; margin-bottom: var(--s-6);
  padding-top: var(--s-4); border-top: 1px solid var(--line);
}

.hero-ctas { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-bottom: var(--s-5); }

.hero-email { font-size: 14.5px; color: var(--text-muted); margin: 0; }
.hero-email .label {
  font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase;
  margin-inline-end: var(--s-2); color: var(--text-muted);
}
.hero-email-sep { margin-inline: var(--s-3); color: var(--line-strong); }

/* WeChat ID — plain text, no link (WeChat has no usable web deep link).
   Tabular figures + selectable so it can be copied accurately. */
.wechat-id {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: .95em; font-weight: 600; letter-spacing: .04em;
  color: var(--text);
  user-select: all;
}

.hero-visual { color: var(--accent); }
.hero-svg { width: 100%; height: auto; display: block; }
.hero-nodes circle { animation: pulse 6s var(--ease) infinite; }
.hero-nodes circle:nth-child(2) { animation-delay: 1.5s; }
.hero-nodes circle:nth-child(4) { animation-delay: 3s; }

/* Real photo. The source is 4:5 and the hero column is 4:5, so on desktop the
   image is shown whole — no crop, no chance of cutting the subject. */
.portrait {
  display: block;
  width: 100%; height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 30%;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--surface-soft);
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .55; }
}

/* --------------------------------------------------------------- buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s-2);
  padding: 11px 20px;
  border: 1px solid transparent; border-radius: 999px;
  font-size: 15px; font-weight: 550; line-height: 1;
  cursor: pointer; white-space: nowrap;
  transition: background-color .18s var(--ease), border-color .18s var(--ease),
              color .18s var(--ease), transform .18s var(--ease);
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-soft); }

.btn-ghost { background: transparent; color: var(--accent); border-color: var(--line-strong); }
.btn-ghost:hover { border-color: var(--accent); background: var(--surface-soft); }

.btn-light { background: #fff; color: var(--dark); }
.btn-light:hover { background: #EDF1F7; }

.btn-lg { padding: 14px 24px; font-size: 16px; }

.btn-whatsapp { background: #17794A; color: #fff; }
.btn-whatsapp:hover { background: #12603A; color: #fff; }
.btn-whatsapp svg { flex: none; }

/* explicit, so it can never be overridden by a section-level link colour */
.section-dark .btn-light,
.section-dark .btn-light:hover { color: var(--dark); }
.section-dark .btn-whatsapp,
.section-dark .btn-whatsapp:hover { color: #fff; }

/* -------------------------------------------------------------- sections */

.section { padding-block: var(--s-9); }
.section-alt { background: var(--surface); border-block: 1px solid var(--line); }

.section-dark {
  background: var(--dark); color: var(--dark-text);
  border-block: 1px solid var(--dark);
}
/* BUGFIX: a bare `.section-dark a` rule used to out-specify `.btn-light`,
   turning the China-desk CTA into white text on a white button.
   Buttons keep their own colours now; only plain links get the light colour. */
.section-dark a:not(.btn) { color: #fff; }

.section-head { margin-bottom: var(--s-7); max-width: 62ch; }

.section-label {
  margin: 0 0 var(--s-3);
  font-size: 11.5px; font-weight: 650; letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent-soft);
}
.section-dark .section-label { color: #7E9BC4; }

.section-title { font-size: clamp(1.7rem, 3.4vw, 2.2rem); letter-spacing: -0.025em; }

.section-intro { margin-top: var(--s-4); color: var(--text-muted); font-size: 1.02rem; }
.section-dark .section-intro { color: var(--dark-muted); }

.prose { max-width: 68ch; color: var(--text-muted); font-size: 1.04rem; }
.prose p { margin-bottom: var(--s-5); }
.prose h3 { color: var(--text); font-size: 1.05rem; margin: var(--s-6) 0 var(--s-2); }
.section-dark .prose { color: var(--dark-muted); }

/* credentials strip under the profile — scannable in one second */
.facts {
  display: grid; gap: var(--s-4);
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin-top: var(--s-5);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
}
.facts li { display: flex; flex-direction: column; gap: 3px; }
.fact-value { font-size: 1.02rem; font-weight: 650; color: var(--text); letter-spacing: -0.01em; }
.fact-label {
  font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-muted);
}

/* ----------------------------------------------------------- card grid */

.card-grid {
  display: grid; gap: var(--s-5);
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
}

.card {
  background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--s-6);
  display: flex; flex-direction: column;
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.card:hover { border-color: var(--line-strong); transform: translateY(-2px); }

.card-head { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-4); }
.card-icon { color: var(--accent-soft); flex: none; }
.card-title { font-size: 1.06rem; letter-spacing: -0.01em; }

.tick-list { display: grid; gap: 7px; font-size: 14.8px; color: var(--text-muted); }
.tick-list li { position: relative; padding-inline-start: 17px; }
.tick-list li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: .62em;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent-soft); opacity: .55;
}
.section-dark .tick-list { color: var(--dark-muted); }
.section-dark .tick-list li::before { background: #7E9BC4; opacity: .8; }

.card-note {
  margin: var(--s-5) 0 0; padding-top: var(--s-4);
  border-top: 1px solid var(--line);
  font-size: 14px; color: var(--text-muted); font-style: italic;
}

/* ------------------------------------------------------------- experience */
/* Fixed-spacing cards, NOT a proportional timeline. Two roles 11 years apart
   must not read as an 11-year visual gap. No connector line, no dots. */

.timeline { display: grid; gap: var(--s-4); }
.timeline::before { display: none; }

.timeline-item {
  position: relative;
  display: grid; grid-template-columns: 210px minmax(0, 1fr);
  gap: var(--s-6);
  padding: var(--s-5) var(--s-6);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color .2s var(--ease);
}
.timeline-item:hover { border-color: var(--line-strong); }
.timeline-item::before { display: none; }

.timeline-meta { display: flex; flex-direction: column; gap: 2px; padding-top: 2px; }
.timeline-period { font-size: 14px; font-weight: 650; color: var(--accent); }
.timeline-place { font-size: 13px; color: var(--text-muted); }

.timeline-role { font-size: 1.08rem; margin-bottom: var(--s-3); }
.timeline-summary { color: var(--text-muted); font-size: 15px; margin-bottom: var(--s-4); max-width: 64ch; }

/* ------------------------------------------------- selected work & projects */
/* One flagship band + three compact cards. Deliberately short: this section is
   evidence, not the main event — the China Desk and Experience carry the story. */

.work-flagship {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s-5); align-items: center;
  padding: var(--s-5) var(--s-6);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-inline-start: 3px solid var(--accent);
  border-radius: var(--radius);
  margin-bottom: var(--s-4);
}

.work-title { font-size: 1.32rem; letter-spacing: -0.02em; }

.work-kind {
  margin: 5px 0 0;
  font-size: 12.5px; font-weight: 600; letter-spacing: .02em;
  color: var(--accent-soft);
}

.work-detail {
  margin: var(--s-4) 0;
  color: var(--text-muted); font-size: 15px; max-width: 74ch;
}

.work-flagship .tag-list { margin-top: var(--s-1); }
.work-flagship-cta { display: flex; align-items: center; }
.work-flagship-cta .btn { white-space: nowrap; }

.work-grid {
  display: grid; gap: var(--s-4);
  grid-template-columns: repeat(auto-fit, minmax(276px, 1fr));
}

.work-card {
  display: flex; flex-direction: column;
  padding: var(--s-5) var(--s-5) var(--s-4);
  background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius);
  transition: border-color .2s var(--ease);
}
.work-card:hover { border-color: var(--line-strong); }
.work-card-title { font-size: 1.02rem; letter-spacing: -0.01em; }
.work-card .work-detail { font-size: 14px; margin: var(--s-3) 0; line-height: 1.55; }
.work-card .tag-list { margin-top: auto; gap: 5px; }
.work-flagship .tag-list { gap: 6px; }

.tag-list-sm li { padding: 3px 9px; font-size: 12px; }

/* working-languages block — kept to one compact row */
.lang-profile-list { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-7); }
.lang-profile-list li { flex-direction: row; align-items: baseline; gap: var(--s-2); }
.lang-level::before { content: "— "; color: var(--line-strong); }
.lang-profile-note { margin-top: var(--s-3); }

.work-disclaimer {
  margin: var(--s-4) 0 0;
  padding-top: var(--s-3);
  border-top: 1px solid var(--line);
  font-size: 13px; color: var(--text-muted);
}

.shot-grid {
  display: grid; gap: var(--s-5); margin-bottom: var(--s-5);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.shot { margin: 0; }
.shot img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.shot figcaption { margin-top: var(--s-3); font-size: 13px; color: var(--text-muted); }

/* ----------------------------------------------------------- tag lists */

.tag-list { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.tag-list li {
  padding: 5px 12px;
  border: 1px solid var(--line-strong); border-radius: 999px;
  background: var(--surface);
  font-size: 13.5px; color: var(--text-muted);
  transition: border-color .18s var(--ease), color .18s var(--ease);
}
.tag-list li:hover { border-color: var(--accent-soft); color: var(--text); }
.tag-list-lg li { padding: 7px 15px; font-size: 14.5px; }
.section-dark .tag-list li { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); color: var(--dark-text); }

/* ------------------------------------------------------------ china desk */

.china-body { max-width: 68ch; color: var(--dark-muted); font-size: 1.04rem; margin-bottom: var(--s-7); }

.china-subhead {
  font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
  color: #7E9BC4; font-weight: 650; margin: 0 0 var(--s-5);
}

.china-grid {
  display: grid; gap: var(--s-5);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin-bottom: var(--s-7);
}
.china-card {
  padding: var(--s-5) var(--s-5) var(--s-4);
  border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius);
  background: rgba(255,255,255,.04);
}
.china-card h3 { font-size: 1rem; margin-bottom: var(--s-4); color: #fff; }

.china-cta {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-5); flex-wrap: wrap;
  padding: var(--s-6);
  border-radius: var(--radius);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
}
.china-cta h3 { font-size: 1.35rem; margin-bottom: 4px; color: #fff; }
.china-cta p { margin: 0; color: var(--dark-muted); }

/* ---------------------------------------------------------------- tools */

.tools-grid {
  display: grid; gap: var(--s-7) var(--s-6);
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.tools-group h3 {
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: var(--s-4); font-weight: 650;
}

/* --------------------------------------------------- opportunities (grouped) */

.opp-grid {
  display: grid; gap: var(--s-5);
  grid-template-columns: repeat(auto-fit, minmax(236px, 1fr));
}
.opp-title {
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-muted); font-weight: 650; margin-bottom: var(--s-4);
}

/* ------------------------------------------------------ working languages */

.lang-profile {
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
}
.lang-profile-label {
  font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-muted); font-weight: 650; margin: 0 0 var(--s-2);
}
.lang-profile-list { display: flex; flex-wrap: wrap; gap: var(--s-6); }
.lang-profile-list li { display: flex; flex-direction: column; gap: 2px; }
.lang-name { font-weight: 650; font-size: .98rem; color: var(--text); }
.lang-level { font-size: 13px; color: var(--text-muted); }
.lang-profile-note {
  margin: var(--s-4) 0 0;
  font-size: 12.5px; color: var(--text-muted); max-width: 62ch;
}

/* -------------------------------------------------------------- contact */

.contact-ctas {
  display: flex; flex-wrap: wrap; gap: var(--s-3);
  margin: var(--s-6) 0 var(--s-7);
}

.contact-list { display: grid; gap: var(--s-4); margin: 0 0 var(--s-5); }
.contact-list li {
  display: grid; grid-template-columns: 110px minmax(0, 1fr);
  gap: var(--s-4); align-items: baseline;
  padding-bottom: var(--s-4); border-bottom: 1px solid var(--line);
}
.contact-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.contact-key {
  font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-muted); font-weight: 650;
}
.contact-note { font-size: 14px; color: var(--text-muted); margin: 0; }

.privacy-back { margin-top: var(--s-7); }

/* --------------------------------------------------------------- footer */

.site-footer {
  background: var(--surface);
  border-top: 1px solid var(--line);
  padding-block: var(--s-7);
}
.footer-inner { display: grid; gap: var(--s-3); }
.footer-rights { margin: 0; font-size: 14.5px; font-weight: 550; }
.footer-note { margin: 0; font-size: 14px; color: var(--text-muted); }
.footer-links { margin: 0; font-size: 13.5px; color: var(--text-muted); display: flex; gap: var(--s-2); flex-wrap: wrap; }
.footer-links a { color: var(--text-muted); }
.footer-links a:hover { color: var(--accent); }

/* --------------------------------------------- height compression (§V1 rev) */
/* Profile, Opportunities and Tools were carrying ~25% more vertical space and
   copy than they earn on a job site. Tighten spacing, keep the substance. */
#profile, #tools, #opportunities, #work { padding-block: var(--s-7); }
#profile .section-head, #tools .section-head,
#opportunities .section-head, #work .section-head {
  margin-bottom: var(--s-5);
}
#experience { padding-block: var(--s-8); }
#profile .prose { font-size: 1rem; }
#profile .prose p { margin-bottom: var(--s-4); }
#opportunities .tag-list li, #tools .tag-list li { padding: 4px 11px; font-size: 13px; }
#tools .tools-grid { gap: var(--s-5) var(--s-4); }

@media (max-width: 760px) {
  /* two columns keeps the credentials strip to two rows instead of four */
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3) var(--s-4); }
  .fact-value { font-size: .95rem; }
  .fact-label { font-size: 10.5px; letter-spacing: .1em; }
  #profile .section-head, #opportunities .section-head, #tools .section-head {
    margin-bottom: var(--s-4);
  }
  /* Dapex capability cards get denser so the section does not balloon on a phone */
  .work-card { padding: var(--s-4); }
  .work-grid { gap: var(--s-3); }
  .work-flagship { padding: var(--s-5); }
  .work-flagship .tag-list li, .tag-list-sm li { font-size: 12px; padding: 3px 9px; }
  #tools .tools-grid { gap: var(--s-5); }
}

/* ------------------------------------------------------------ mobile CTA bar */

.mobile-bar { display: none; }

@media (max-width: 760px) {
  .mobile-bar {
    display: flex; gap: var(--s-3);
    position: fixed; inset-inline: 0; bottom: 0; z-index: 40;
    padding: 10px var(--s-5) calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, .96);
    backdrop-filter: saturate(180%) blur(10px);
    -webkit-backdrop-filter: saturate(180%) blur(10px);
    border-top: 1px solid var(--line);
  }
  .mobile-bar .btn { flex: 1 1 0; }
  /* keep the footer clear of the fixed bar */
  body { padding-bottom: 68px; }
}

/* ------------------------------------------------------------ responsive */

@media (max-width: 940px) {
  .hero-inner { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
  /* one column: a full-height portrait would push the name off the first
     screen, so the photo becomes a small round avatar above the name */
  .hero-visual { order: -1; max-width: none; }
  .portrait {
    width: 72px; height: 72px;
    aspect-ratio: 1;
    border-radius: 50%;
    object-position: center 28%;
  }
  .hero { padding-block: var(--s-7) var(--s-7); }
  .timeline-item { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
  .timeline::before { display: none; }
  .work-flagship { grid-template-columns: minmax(0, 1fr); }
  .work-flagship-cta { margin-top: var(--s-2); }
  .work-flagship-cta .btn { width: 100%; }
}

@media (max-width: 760px) {
  body { font-size: 16.5px; }
  :root { --s-9: 64px; --s-8: 44px; --s-7: 34px; }

  .nav-toggle { display: block; }

  .site-nav {
    position: absolute; inset-inline: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    padding: var(--s-2) var(--s-5) var(--s-4);
    display: none;
  }
  .site-nav.is-open { display: flex; }
  .site-nav a {
    padding: var(--s-4) 0;
    border-bottom: 1px solid var(--line);
    font-size: 16px;
  }
  .site-nav a:last-child { border-bottom: 0; }

  .header-inner { position: relative; gap: var(--s-3); }
  .brand-name { display: none; }

  /* On mobile the nav is absolutely positioned, so its `margin-inline-start:auto`
     leaves the flow with it — the controls would collapse to the left edge.
     Push them back to the inline-end here. */
  .header-actions { margin-inline-start: auto; }

  /* Language dropdown as a full-width sheet under the header.
     Anchoring it to the pill with `inset-inline-end: 0` overflowed the viewport
     on small screens (41px off the left edge in LTR, and off the right edge in
     RTL, where the logical property flips). Constraining BOTH inline edges to
     the header makes overflow impossible in either direction. */
  .lang-switch { position: static; }
  .lang-menu {
    inset-inline: var(--s-5);
    width: auto;
    min-width: 0;
  }

  .hero-name { font-size: clamp(2.1rem, 9vw, 2.6rem); }
  .hero-ctas .btn { flex: 1 1 auto; }
  .hero-supporting { font-size: 13px; }

  /* the photo is not decorative any more — keep the round avatar, just tighten it */
  .portrait { width: 64px; height: 64px; }
  .hero-visual { margin-bottom: var(--s-3); }

  .contact-list li { grid-template-columns: minmax(0, 1fr); gap: var(--s-1); }

  .project-card { padding: var(--s-5); }
  .china-cta { flex-direction: column; align-items: flex-start; }
  .china-cta .btn { width: 100%; }
}

/* --------------------------------------------------------- preferences */

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

@media print {
  .site-header, .hero-visual, .site-footer, .hero-ctas { display: none; }
  body { background: #fff; }
  .section { padding-block: var(--s-5); }
}