/* ==========================================================================
   马琳律师 · 个人介绍页
   单页无遮挡：选中右侧视图时照片列收窄、内容列变宽，没有任何浮层盖住人。
   色系取自垦丁官方 LOGO 主色 #029AB6，但律所只作背书，不做主角。
   ========================================================================== */

:root {
  /* 底色：由品牌青派生的深色系，不是纯黑，保留一点青调 */
  --ink-900: #041217;
  --ink-850: #071a21;
  --ink-800: #0a222a;
  --ink-700: #0e2c36;

  --brand: #029ab6;
  --brand-lit: #4ecfe0;

  --text: #e8f2f3;
  --text-soft: #b6cbcf;
  --text-mute: #7f9aa1;
  --gold: #c8a44e;
  /* 提亮版，给需要当标题读的金色文字用——原色在深底上对比度不够 */
  --gold-lit: #e3c179;

  --line: rgba(232, 242, 243, 0.13);
  --line-soft: rgba(232, 242, 243, 0.07);

  /* 顶栏和客户带以前是写死的 88 / 72，矮屏笔记本上这 160px 占掉 1/4 屏高还不缩。
     这里用「带负截距的线性斜率」而不是单纯 Nvh——单纯 vh 的斜率不够陡，
     要么大屏偏矮要么小屏偏高。解出来的两条线是：
        1080 屏（视口 937）→ 88 / 72，和原来一模一样
         768 屏（视口 625）→  52 / 40，让出 68px 给内容
     全程连续，没有断点跳档。 */
  --top: clamp(50px, calc(11.54vh - 20px), 88px);
  --rail: clamp(112px, 8.6vw, 148px);
  --strip: clamp(36px, calc(10.26vh - 24px), 72px);

  /* 注意：不要写 "Source Han Serif SC"——Windows 上常只装了 Heavy 字重，
     浏览器会误配成极粗体。Noto Serif SC 是同一套字形的常规字重。 */
  --serif: "Noto Serif SC", "Songti SC", "Source Han Serif CN", STSong, "SimSun", Georgia, serif;
  --sans: "PingFang SC", "HarmonyOS Sans SC", "Noto Sans SC", "Microsoft YaHei", -apple-system,
    "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --geo: "Century Gothic", "Questrial", Futura, "Avenir Next", "Trebuchet MS", var(--sans);

  --ease: cubic-bezier(0.2, 0, 0, 1);
  --move: 620ms;
  --pad: clamp(22px, 3.4vw, 60px);

  /* ── 正文字号阶梯 ────────────────────────────────────────────────
     小字号原来全是写死的 px，1832 宽的屏幕上跟 38px 标题之间断层太大。
     统一成 clamp(小屏值, min(vw, vh), 大屏值)：
       · vw 系数 = 小屏值 / 13.66，保证 1366 宽时正好等于原值，只在更宽的屏上长
       · 再和 vh 取 min，防止「宽但矮」的笔记本因为字号变大又要滚动
     改这几个值之前先读 README 最后一节，改完必须重新量高度。 */
  --fs-body: clamp(13px, min(1.05vw, 2.29vh), 17px); /* 关于正文 */
  --fs-lead: clamp(12px, min(0.94vw, 2.05vh), 15.5px); /* 视图导语 */
  --fs-item: clamp(12.5px, min(0.915vw, 2vh), 14.5px); /* 列表条目 */
  --fs-note: clamp(11.5px, min(0.842vw, 1.84vh), 13.2px); /* 条目补充说明 */
  --fs-fine: clamp(11px, min(0.805vw, 1.76vh), 12.6px); /* 更次一级 */
  --fs-tag: clamp(10px, min(0.732vw, 1.6vh), 11.4px); /* 全大写小标签 */

  /* 视图内所有内容块共用的最大宽度，保证右边界对齐成一条线。
     以前各块各写 62ch / 78ch / 96ch，宽屏上右边界参差不齐、而且大量留白。 */
  --block: 1128px;
}

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

html {
  height: 100%;
  background: var(--ink-900);
  /* 关掉安卓/微信内置浏览器的自动放大字号，否则手机端排版会被撑开 */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  min-width: 320px;
  height: 100%;
  margin: 0;
  overflow: hidden;
  color: var(--text);
  background: var(--ink-900);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
p,
figure,
ul,
ol {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  border: 0;
  color: inherit;
  background: none;
  font: inherit;
  cursor: pointer;
}

img {
  display: block;
  max-width: 100%;
}

:focus-visible {
  outline: 2px solid var(--brand-lit);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ==========================================================================
   舞台
   ========================================================================== */

.stage {
  position: relative;
  display: grid;
  /* 三列写死数值而不是套 var()——未注册的自定义属性过渡行为不可靠，
     直接在两个状态里各写一遍，grid-template-columns 才会平滑插值。 */
  grid-template-columns: 46% minmax(0, 1fr) var(--rail);
  grid-template-rows: var(--top) minmax(0, 1fr) var(--strip);
  width: 100%;
  height: 100dvh;
  overflow: hidden;
  background: var(--ink-850);
  transition: grid-template-columns var(--move) var(--ease);
}

/* 选中视图：照片列让位给内容列 */
.stage.is-open {
  grid-template-columns: 30% minmax(0, 1fr) var(--rail);
}

/* ---------- 左：人物 ---------- */

.portrait {
  position: relative;
  z-index: 1;
  grid-area: 1 / 1 / 4 / 2;
  overflow: hidden;
  background: #2b3336;
}

.portrait-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 两个状态各一套裁切：列收窄后画面变得又高又窄，
     不重新构图脸会被挤到边上。 */
  object-position: 52% 20%;
  scale: 1.32;
  transform-origin: 50% 22%;
  transition:
    object-position var(--move) var(--ease),
    scale var(--move) var(--ease);
}

.stage.is-open .portrait-img {
  object-position: 50% 17%;
  scale: 1.04;
}

/* 压暗四周，把视线收到脸部 */
.portrait-veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 78% at 42% 34%, rgba(4, 18, 23, 0) 34%, rgba(4, 18, 23, 0.72) 100%),
    linear-gradient(to bottom, rgba(4, 18, 23, 0.5) 0%, rgba(4, 18, 23, 0) 22%);
  pointer-events: none;
}

/* 与右侧衔接的渐变，去掉硬接缝；展开后底部要更实一点托住名牌 */
.portrait-fade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, rgba(10, 34, 42, 0) 52%, rgba(10, 34, 42, 0.86) 88%, var(--ink-800) 100%),
    linear-gradient(to top, var(--ink-850) 0%, rgba(7, 26, 33, 0.72) 9%, rgba(7, 26, 33, 0) 26%);
  pointer-events: none;
}

.stage.is-open .portrait-fade {
  background:
    linear-gradient(to right, rgba(10, 34, 42, 0) 62%, rgba(10, 34, 42, 0.7) 92%, var(--ink-800) 100%),
    linear-gradient(to top, rgba(4, 18, 23, 0.94) 0%, rgba(4, 18, 23, 0.6) 20%, rgba(7, 26, 33, 0) 44%);
}

/* 身份名牌：首屏不出现，选中视图后从右侧「挪」到照片上 */
.id-plate {
  position: absolute;
  right: clamp(16px, 2vw, 28px);
  /* .portrait 跨到最后一行，客户带盖在它上面，名牌要让开那 72px */
  bottom: calc(var(--strip) + clamp(22px, 3.6vh, 44px));
  left: var(--pad);
  z-index: 2;
  opacity: 0;
  translate: 0 12px;
  pointer-events: none;
  transition:
    opacity 380ms var(--ease),
    translate 380ms var(--ease);
}

.stage.is-open .id-plate {
  opacity: 1;
  translate: 0 0;
  /* 等照片收到位再出现，两件事不抢注意力 */
  transition-delay: 260ms;
}

.id-name {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 11px;
  color: #fff;
  font-family: var(--serif);
  font-size: clamp(26px, 2.3vw, 38px);
  letter-spacing: 0.05em;
  line-height: 1.1;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.5);
}

.id-name em {
  color: var(--text-mute);
  font-size: 0.36em;
  font-style: normal;
  letter-spacing: 0.26em;
}

.id-title {
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid var(--line);
  color: var(--brand-lit);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
}

/* 学历跟着名字走：视图展开后这块常驻在照片上，是「她是谁」的一部分 */
.id-edu {
  margin-top: 5px;
  color: var(--text-soft);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  text-wrap: pretty;
}

.id-firm {
  margin-top: 4px;
  color: var(--text-mute);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-wrap: pretty;
}

/* ---------- 右：品牌底纹 ---------- */

.board {
  position: relative;
  grid-area: 1 / 2 / 4 / 4;
  overflow: hidden;
  background:
    radial-gradient(120% 100% at 82% 6%, rgba(2, 154, 182, 0.16) 0%, rgba(2, 154, 182, 0) 58%),
    linear-gradient(158deg, var(--ink-700) 0%, var(--ink-800) 46%, var(--ink-850) 100%);
}

/* 超大裁切字标。渐变已经烘焙进 PNG，用 background-image 直接铺，
   不用 CSS mask（mask 在 file:// 下会被浏览器拦截而整块消失）。 */
.board-mark {
  position: absolute;
  top: clamp(20px, 4vh, 52px);
  left: -4%;
  width: 158%;
  aspect-ratio: 913 / 153;
  background-image: url("../assets/kinding-bg.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  /* 弱化律所：只当极淡的底纹，不再是画面主角 */
  opacity: 0.22;
  pointer-events: none;
  transition: opacity var(--move) var(--ease);
}

/* 看内容的时候底纹再退一步 */
.stage.is-open .board-mark {
  opacity: 0.1;
}

.board-glow {
  position: absolute;
  right: -18%;
  bottom: -26%;
  width: 62%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(2, 154, 182, 0.16) 0%, rgba(2, 154, 182, 0) 68%);
  pointer-events: none;
}

/* ==========================================================================
   顶部条
   ========================================================================== */

.topbar {
  position: relative;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  grid-area: 1 / 1 / 2 / 4;
  padding: 0 var(--pad);
}

/* 左上角是她自己的名字，不是律所 LOGO */
.brand {
  display: flex;
  align-items: baseline;
  min-height: 44px;
  gap: 13px;
}

.brand-zh {
  color: #fff;
  font-family: var(--serif);
  font-size: 17px;
  letter-spacing: 0.14em;
  white-space: nowrap;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
}

.brand-en {
  padding-left: 13px;
  border-left: 1px solid var(--line);
  color: var(--text-mute);
  font-family: var(--geo);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.24em;
  white-space: nowrap;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.4vw, 34px);
}

.locale {
  color: var(--brand-lit);
  font-family: var(--geo);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2em;
  white-space: nowrap;
}

.lang {
  display: flex;
  align-items: center;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(232, 242, 243, 0.04);
}

.lang button {
  min-width: 46px;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  color: var(--text-mute);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  transition-property: color, background-color, scale;
  transition-duration: 200ms;
  transition-timing-function: var(--ease);
}

.lang button:hover {
  color: var(--text);
}

.lang button.is-active {
  color: var(--ink-900);
  background: var(--brand-lit);
}

.lang button:active {
  scale: 0.96;
}

/* ==========================================================================
   内容区：首屏和五个视图共用同一格，交叉淡出淡入
   ========================================================================== */

.main {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-areas: "stack";
  grid-area: 2 / 2 / 3 / 3;
  min-width: 0;
  min-height: 0;
}

.hero,
.view {
  grid-area: stack;
  min-width: 0;
  min-height: 0;
}

/* ---------- 首屏 ---------- */

.hero {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(8px, 2vh, 24px) clamp(20px, 2.6vw, 44px) clamp(8px, 2vh, 24px) clamp(24px, 3.6vw, 64px);
  transition:
    opacity 300ms var(--ease),
    translate 300ms var(--ease),
    visibility 300ms;
}

.stage.is-open .hero {
  visibility: hidden;
  opacity: 0;
  translate: 0 -16px;
  pointer-events: none;
}

.hero > * {
  animation: rise 700ms var(--ease) both;
}

.hero-kicker {
  color: var(--brand-lit);
  font-family: var(--geo);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.34em;
  animation-delay: 40ms;
}

.hero-name {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 clamp(14px, 1.6vw, 26px);
  margin-top: clamp(14px, 2.4vh, 26px);
  animation-delay: 120ms;
}

.name-zh {
  color: #fff;
  font-family: var(--serif);
  font-size: clamp(52px, 5.6vw, 96px);
  font-weight: 400;
  letter-spacing: 0.06em;
  line-height: 1.06;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
}

.name-en {
  color: var(--text-mute);
  font-family: var(--serif);
  font-size: clamp(15px, 1.35vw, 22px);
  font-weight: 400;
  letter-spacing: 0.3em;
}

.hero-statement {
  position: relative;
  margin-top: clamp(22px, 4vh, 44px);
  padding-left: clamp(16px, 1.4vw, 22px);
  animation-delay: 200ms;
}

.hero-statement::before {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 0;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(to bottom, var(--brand-lit), rgba(2, 154, 182, 0.15));
  content: "";
}

.hero-statement-label {
  margin-bottom: 10px;
  color: var(--brand-lit);
  font-family: var(--geo);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.28em;
}

.hero-statement-text {
  max-width: 22ch;
  color: #fff;
  font-size: clamp(22px, 2.2vw, 36px);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.34;
  text-wrap: balance;
}

.hero-role {
  margin-top: clamp(18px, 3vh, 30px);
  color: var(--text-soft);
  font-size: clamp(12px, 1.02vw, 15px);
  font-weight: 500;
  letter-spacing: 0.04em;
  animation-delay: 280ms;
  text-wrap: pretty;
}

.hero-sub {
  margin-top: 8px;
  color: var(--text-mute);
  font-size: clamp(11px, 0.9vw, 13px);
  letter-spacing: 0.04em;
  animation-delay: 320ms;
  text-wrap: pretty;
}

.hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: clamp(20px, 3.4vh, 36px);
  animation-delay: 380ms;
}

.hero-stats li {
  min-width: 132px;
  padding: 14px 20px 15px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(232, 242, 243, 0.035);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.stat-value {
  display: block;
  color: #fff;
  font-family: var(--serif);
  font-size: clamp(24px, 2.1vw, 32px);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  line-height: 1;
}

.stat-value sup {
  top: -0.72em;
  margin-left: 1px;
  color: var(--brand-lit);
  font-family: var(--geo);
  font-size: 0.44em;
  font-weight: 700;
}

.stat-label {
  display: block;
  margin-top: 9px;
  color: var(--text-mute);
  font-size: 10px;
  letter-spacing: 0.1em;
  white-space: nowrap;
}

/* ---------- 五个视图 ---------- */

.view {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  visibility: hidden;
  opacity: 0;
  translate: 0 18px;
  pointer-events: none;
  transition:
    opacity 380ms var(--ease),
    translate 380ms var(--ease),
    visibility 380ms;
}

.stage.is-open .view {
  visibility: visible;
  opacity: 1;
  translate: 0 0;
  pointer-events: auto;
  transition-delay: 180ms;
}

/* 视图之间切换时的短暂淡出，不动布局 */
.view.is-swapping .view-body {
  opacity: 0;
  translate: 0 8px;
}

.view-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 clamp(20px, 2.6vw, 44px) clamp(9px, 1.6vh, 14px) clamp(24px, 3.6vw, 64px);
  border-bottom: 1px solid var(--line-soft);
}

.view-eyebrow {
  color: var(--brand-lit);
  font-family: var(--geo);
  font-size: 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.24em;
}

.view-close {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 50%;
  transition-property: color, background-color, rotate, scale;
  transition-duration: 260ms;
  transition-timing-function: var(--ease);
}

.view-close svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
}

.view-close:hover {
  color: var(--ink-900);
  background: var(--brand-lit);
  rotate: 90deg;
}

.view-close:active {
  scale: 0.96;
}

.view-body {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* 内容比可视区短时垂直居中，不要顶着上边缘留一大块底部空白。
     关键是 safe：内容超高时它退回 start，滚动条从顶部开始，不会把开头裁掉
     （不加 safe 的 center 在溢出时会截断顶部，这是老坑）。
     浏览器不认 safe 就整条声明作废，退回默认的顶部对齐，也不会坏。 */
  display: grid;
  /* 必须写 minmax(0, 1fr)。不写列定义时隐式列是 auto，会按最宽子元素的
     max-content 撑开——.creds 的 minmax(300px,1fr) 三列会把轨道顶爆，
     然后所有兄弟元素跟着被拉宽，iPad 横屏下整块内容横向溢出 300px 出头。 */
  grid-template-columns: minmax(0, 1fr);
  align-content: safe center;
  /* 纵向内边距的最小值故意压得很低：矮屏上 3vh 只有 18px，
     以前写 22px 最小值会把 vh 顶回去，等于白挂。手机端在 940 断点里另有覆盖。 */
  padding: clamp(13px, 3vh, 34px) clamp(20px, 2.6vw, 44px) clamp(16px, 4vh, 44px) clamp(24px, 3.6vw, 64px);
  scrollbar-width: thin;
  scrollbar-color: rgba(232, 242, 243, 0.2) transparent;
  transition:
    opacity 160ms var(--ease),
    translate 160ms var(--ease);
}

.view-body::-webkit-scrollbar {
  width: 6px;
}

.view-body::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(232, 242, 243, 0.18);
}

/* 子块错开入场，--i 由 JS 按顺序写在每个直接子元素上 */
.stage.is-open .view-body > * {
  animation: rise 500ms var(--ease) both;
  animation-delay: calc(280ms + var(--i, 0) * 70ms);
}

/* ==========================================================================
   视图内通用排版
   ========================================================================== */

.v-head {
  margin-bottom: clamp(12px, 3vh, 34px);
}

.v-head h2 {
  color: #fff;
  font-family: var(--serif);
  /* min(vw, vh)：屏幕哪一维紧就跟哪一维。宽屏高屏取 vw（和以前一致），
     矮屏笔记本改由 vh 说话，标题不会在 416px 的可视区里占掉两行大字。 */
  font-size: clamp(21px, min(2.5vw, 4.1vh), 38px);
  /* 行宽用自己字号的 em 来限，不要用父级的 ch。原来 .v-head 写 max-width: 46ch，
     ch 按父级 16px 算（≈410px），标题字号涨到 38px 后每行只剩 10 个字，
     1832 宽的屏幕上明明有地方却硬折成三行。
     25em 是算出来的：中文标题最长 23 个字（全角标点也占一个字宽），23em 正好等于
     标题宽度、四舍五入就溢出换行，所以留到 25em。这一点很重要——
     text-wrap: balance 会把多行拉成等长，而中文可以逐字断行、它不管词界，
     折两行时会切出「十年复|合经验」「您走|出去」这种断法。一行放下就没有断点可切。 */
  max-width: 25em;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.32;
  text-wrap: balance;
}

.v-head p {
  /* 用 em 而不是 ch：中文一个字正好 1em，最长的导语 34 个字，给到 38em
     各桌面尺寸都能一行放下。窄到放不下时才自动换行（手机就是这种情况）。 */
  max-width: 38em;
  margin-top: clamp(8px, 1.6vh, 14px);
  color: var(--text-mute);
  font-size: var(--fs-lead);
  line-height: 1.9;
  text-wrap: pretty;
}

/* ---------- 01 专业领域 ---------- */

/* 四个方向排成一行。auto-fit 会在 1366 排两列、1920 排三列，四张卡都变成两行——
   而两行的高度是两张卡，一行的高度只有一张卡。英文文案更长，两行时 1920 都要滚
   1.24 屏；改成一行四列后高度只跟最高那张卡有关，各尺寸都装得下。 */
.areas {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: var(--block);
  gap: 12px;
}

.area {
  padding: clamp(13px, min(1.6vw, 2.6vh), 24px);
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  background: rgba(232, 242, 243, 0.035);
  transition-property: border-color, background-color, translate;
  transition-duration: 240ms;
  transition-timing-function: var(--ease);
}

.area:hover {
  border-color: rgba(78, 207, 224, 0.28);
  background: rgba(232, 242, 243, 0.06);
  translate: 0 -2px;
}

.area-n {
  display: block;
  margin-bottom: clamp(7px, 1.3vh, 12px);
  color: var(--brand-lit);
  font-family: var(--geo);
  font-size: 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.18em;
}

.area h3 {
  /* 给标题固定留两行的高度：四张卡并排时，「数据合规与个人信息保护」是两行、
     其余是一行，不留高度的话下面的问题列表起始位置参差不齐。
     手机端卡片是竖着堆的，对齐无意义，在 940 断点里清掉。 */
  min-height: 3.2em;
  margin-bottom: clamp(5px, 1vh, 9px);
  color: #fff;
  font-size: clamp(14px, min(1.03vw, 2.24vh), 18px);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-wrap: balance;
}

/* 客户会问的问题：一条一行，前面挂一个品牌青的 ·。
   以前是一整段连排的问句，读者扫不出到底有几个问题。 */
.area-q {
  margin-bottom: clamp(8px, 1.4vh, 13px);
  color: var(--text-soft);
  font-size: clamp(12px, min(0.88vw, 1.92vh), 13.6px);
  line-height: 1.62;
  text-wrap: pretty;
}

.area-q li {
  position: relative;
  padding-left: 0.95em;
}

.area-q li + li {
  margin-top: clamp(4px, 0.7vh, 7px);
}

.area-q li::before {
  position: absolute;
  left: 0;
  color: var(--brand-lit);
  font-weight: 700;
  content: "·";
}

.area-d {
  color: var(--text-mute);
  font-size: var(--fs-note);
  line-height: 1.85;
  text-wrap: pretty;
}

/* ---------- 02 代表项目 ---------- */

/* 三列网格，两行，不留空洞。
   之前用过 columns 多列流式（矮 90px 左右），但多列是「流」——分组顺着列往下接续，
   第二行标题横向不成一条线，看着散。

   要做到「行对齐 + 无空洞」，靠的是 data.js 里分组顺序和这里的 last-child 配合：
     第一行  前三组各 2 条           → 三格高度完全一致
     第二行  第四组 2 条 ┃ 第五组 3 条横跨两格、条目分两列 → 也是两条的高度，格子填满
   所以第五组必须是条数最多的那一组、且必须排在最后。
   加减分组时这个假设会失效，记得回来改。 */
.matters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  max-width: var(--block);
  gap: clamp(18px, min(2.4vw, 3vh), 40px) clamp(20px, 2.2vw, 46px);
}

/* 最后一组横跨第二行剩下的两格，条目在内部分两列 */
.matter-group:last-child {
  grid-column: span 2;
}

.matter-group:last-child ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  column-gap: clamp(20px, 2.2vw, 46px);
}

/* 别的分组是「最后一条不画下边框」，好让分组看起来是闭合的。分两列之后
   「最后一条」和「每列的底部」不再是同一个东西，按位置判断会写死条目数量。
   这里索引统一保留下边框——多一条细线的视觉差可以忽略，但规则不会随条数失效。 */
.matter-group:last-child ul > li:last-child {
  border-bottom: 1px solid var(--line-soft);
}

/* 分组标题原来是 10px + 0.2em 字距的金色小字，在深底上几乎读不出来。
   放大到接近正文字号，字距收回来——字大了之后 0.2em 会散得没法读。
   金色也提亮一档：#c8a44e 在深底上对比度不够，撑不起「标题」这个角色。 */
.matter-name {
  margin-bottom: clamp(7px, 1.2vh, 11px);
  padding-bottom: clamp(7px, 1.1vh, 10px);
  border-bottom: 1px solid var(--line);
  color: var(--gold-lit);
  font-size: clamp(13px, min(0.95vw, 2.08vh), 15.5px);
  font-weight: 600;
  letter-spacing: 0.06em;
}

.matter-group li {
  /* 11 条项目摊在两列里，最长那列 6 行——每行省 4px 就是 24px */
  padding: clamp(7px, 1.15vh, 11px) 0;
  border-bottom: 1px solid var(--line-soft);
}

.matter-group li:last-child {
  border-bottom: 0;
}

.matter-group strong {
  display: block;
  color: var(--text);
  font-size: var(--fs-item);
  font-weight: 500;
  line-height: 1.6;
}

.matter-group em {
  display: block;
  margin-top: 4px;
  color: var(--text-mute);
  font-size: var(--fs-fine);
  font-style: normal;
  line-height: 1.7;
  text-wrap: pretty;
}

/* ---------- 03 关于 ---------- */

/* 左右两栏：左边是三条竖排的自述，右边是全球业务地图。
   之前试过把正文本身分两栏来填满宽屏，但那样读者要从左栏底跳回右栏顶；
   现在右边放地图，正文回到单栏竖排，宽度也没浪费。 */
.about-grid {
  display: grid;
  /* 左栏给多一点：英文段落比中文长得多，左栏窄了行数会翻上去。
     地图卡窄一点无所谓，地图本身是等比缩放的。 */
  grid-template-columns: minmax(0, 1.28fr) minmax(0, 0.72fr);
  gap: clamp(22px, 2.6vw, 48px);
  align-items: start;
  max-width: var(--block);
}

/* 三条罗列，各带一个序号 */
.about-body > li {
  display: grid;
  grid-template-columns: 2.4em minmax(0, 1fr);
  align-items: baseline;
}

.about-body > li + li {
  margin-top: clamp(12px, 2vh, 22px);
  padding-top: clamp(12px, 2vh, 22px);
  border-top: 1px solid var(--line-soft);
}

.ab-n {
  color: var(--brand-lit);
  font-family: var(--geo);
  font-size: var(--fs-tag);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.14em;
}

/* ---------- 关于 · 全球业务 ---------- */

.about-global {
  padding: clamp(14px, 2vh, 22px) clamp(16px, 1.6vw, 24px) clamp(16px, 2.2vh, 24px);
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  background: rgba(232, 242, 243, 0.03);
}

.ag-label {
  margin-bottom: clamp(5px, 0.9vh, 9px);
  color: var(--brand-lit);
  font-family: var(--geo);
  font-size: var(--fs-tag);
  font-weight: 700;
  letter-spacing: 0.18em;
}

.about-global h3 {
  color: #fff;
  font-family: var(--serif);
  font-size: clamp(15px, min(1.2vw, 2.6vh), 22px);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.4;
  text-wrap: balance;
}

/* 地图用 background 而不是 <img>：只当底纹，要按容器宽度自适应且不参与布局高度争抢 */
.ag-map {
  aspect-ratio: 1045 / 518;
  margin: clamp(10px, 1.8vh, 18px) 0 clamp(10px, 1.6vh, 16px);
  background: url("../assets/global-map.png") center / contain no-repeat;
  opacity: 0.5;
}

.ag-regions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ag-regions li {
  padding: 4px 10px;
  border: 1px solid rgba(78, 207, 224, 0.24);
  border-radius: 999px;
  color: var(--text-soft);
  font-size: var(--fs-tag);
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.about-body p {
  color: var(--text-soft);
  font-size: var(--fs-body);
  line-height: 1.95;
  text-wrap: pretty;
}

.about-body > li:first-child p {
  color: var(--text);
}

/* ---------- 04 资历 ---------- */

/* 学历 / 履历重点块。原来这两条是「关于」正文末尾的两行小灰字，
   放在这里做成描边卡片，让学位成为进入执业资格清单之前的第一印象。 */
.bg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(296px, 1fr));
  gap: 10px;
  max-width: var(--block);
  margin-bottom: clamp(14px, 2.4vh, 26px);
}

/* 标签横排在左：竖排每张卡会多占一行，两张卡就是 24px——
   这一视图在 1920 下本来正好一屏，多这 24px 就得滚。 */
.bg-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0 clamp(10px, 1vw, 15px);
  padding: clamp(11px, min(1.3vw, 2.1vh), 18px) clamp(13px, 1.3vw, 20px);
  border: 1px solid rgba(78, 207, 224, 0.22);
  border-radius: 12px;
  background: linear-gradient(150deg, rgba(2, 154, 182, 0.11), rgba(2, 154, 182, 0.015));
}

/* 「教育背景」「职业经历」这两个标签原来是 10px + 0.18em 字距的金色小字，看不清。
   放大到接近正文、字距收回来、金色提亮——它们是这一屏最该被读到的两个词。 */
.bg-label {
  grid-row: span 2;
  padding-top: 2px;
  padding-right: clamp(11px, 1.1vw, 16px);
  border-right: 1px solid rgba(78, 207, 224, 0.2);
  color: var(--gold-lit);
  font-size: clamp(12px, min(0.88vw, 1.92vh), 14px);
  font-weight: 600;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.bg-value {
  color: #fff;
  font-family: var(--serif);
  font-size: clamp(14px, min(1.25vw, 2.1vh), 19px);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.45;
  text-wrap: balance;
}

.bg-note {
  margin-top: clamp(3px, 0.7vh, 6px);
  color: var(--text-mute);
  font-size: var(--fs-fine);
  letter-spacing: 0.04em;
  line-height: 1.65;
  text-wrap: pretty;
}

.creds-label {
  margin-bottom: clamp(2px, 0.6vh, 6px);
  color: var(--brand-lit);
  font-family: var(--geo);
  font-size: var(--fs-tag);
  font-weight: 700;
  letter-spacing: 0.18em;
}

.creds {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 0 clamp(24px, 3vw, 52px);
  max-width: var(--block);
}

.creds li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 8px;
  padding: clamp(8px, 1.35vh, 13px) 0;
  border-bottom: 1px solid var(--line-soft);
  color: var(--text-soft);
  font-size: var(--fs-item);
  line-height: 1.65;
}

.creds li > span {
  color: var(--gold);
  font-family: var(--geo);
  font-size: var(--fs-tag);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.firm-card {
  max-width: var(--block);
  margin-top: clamp(14px, 2.5vh, 24px);
  padding: clamp(12px, 1.9vh, 18px) 20px clamp(13px, 2.1vh, 20px);
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  background: linear-gradient(150deg, rgba(2, 154, 182, 0.12), rgba(2, 154, 182, 0.02));
}

.firm-card h3 {
  margin-bottom: 8px;
  color: #fff;
  font-size: clamp(13px, min(0.95vw, 2.08vh), 15px);
  font-weight: 600;
  letter-spacing: 0.06em;
}

.firm-card p {
  color: var(--text-mute);
  font-size: var(--fs-note);
  line-height: 1.85;
  text-wrap: pretty;
}



/* ---------- 05 联系 ---------- */

/* 联系页：标题留在顶部，联系方式整块沉到底部。
   space-between 在内容超高时会退化成 start，所以不需要额外兜底。 */
.view-body[data-view="contact"] {
  align-content: space-between;
}

/* 左联系方式、右二维码。二维码列用 auto 让它按内容取宽，
   联系方式列 minmax(0,1fr) 吃掉剩下的，地址那种长文本才不会撑爆网格。 */
.c-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(24px, 2.8vw, 48px);
  align-items: start;
  max-width: var(--block);
}

.c-rows {
  border-top: 1px solid var(--line);
}

.c-row {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) 20px;
  align-items: center;
  /* 五行 × 60px = 300px，是「联系」溢出的主因；矮屏收到 42px 还够点击热区 */
  min-height: clamp(42px, 6.6vh, 60px);
  padding: clamp(8px, 1.3vh, 12px) 0;
  border-bottom: 1px solid var(--line-soft);
}

.c-row > span:first-child {
  color: var(--brand-lit);
  font-size: var(--fs-tag);
  font-weight: 600;
  letter-spacing: 0.18em;
}

.c-row strong {
  color: #fff;
  font-size: var(--fs-item);
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.6;
}

.c-row i {
  color: var(--gold);
  font-family: var(--geo);
  font-size: 14px;
  font-style: normal;
  transition-property: color, translate;
  transition-duration: 220ms;
  transition-timing-function: var(--ease);
}

a.c-row:hover strong {
  color: var(--brand-lit);
}

a.c-row:hover i {
  color: var(--brand-lit);
  translate: 3px -3px;
}

.qrs {
  display: flex;
  gap: 16px;
  /* 并排到右侧后不需要上边距，跟联系方式第一行对齐 */
  padding-top: 10px;
}

.qrs figure {
  width: clamp(84px, min(9vw, 17vh), 140px);
}

.qrs img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  border-radius: 10px;
  outline: 1px solid rgba(255, 255, 255, 0.1);
  outline-offset: -1px;
  object-fit: cover;
  background: #fff;
}

.qrs figcaption {
  margin-top: 10px;
  color: var(--text-mute);
  font-size: var(--fs-tag);
  letter-spacing: 0.06em;
  text-align: center;
  text-wrap: balance;
}

.c-note {
  display: flex;
  flex-wrap: wrap;
  gap: 10px clamp(20px, 3vw, 40px);
  margin-top: clamp(14px, 2.7vh, 26px);
  padding-top: clamp(10px, 1.7vh, 16px);
  border-top: 1px solid var(--line-soft);
  color: var(--text-mute);
  font-size: var(--fs-tag);
  letter-spacing: 0.06em;
  opacity: 0.8;
}

/* ==========================================================================
   右侧竖排导航
   ========================================================================== */

.rail {
  position: relative;
  z-index: 7;
  display: flex;
  flex-direction: column;
  justify-content: center;
  grid-area: 2 / 3 / 3 / 4;
  gap: clamp(2px, 0.6vh, 8px);
  padding: 0 clamp(12px, 1.2vw, 22px) 0 clamp(10px, 1vw, 16px);
  border-left: 1px solid var(--line-soft);
}

.rail-btn {
  position: relative;
  display: grid;
  gap: 5px;
  min-height: 46px;
  padding: 10px 6px 10px 12px;
  border-radius: 8px;
  text-align: left;
  transition-property: background-color, scale;
  transition-duration: 240ms;
  transition-timing-function: var(--ease);
}

/* 选中指示条 */
.rail-btn::before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 2px;
  height: 0;
  border-radius: 2px;
  background: var(--brand-lit);
  content: "";
  translate: 0 -50%;
  transition: height 280ms var(--ease);
}

.rail-btn.is-active::before {
  height: 62%;
}

.rail-btn:hover {
  background: rgba(232, 242, 243, 0.05);
}

.rail-btn:active {
  scale: 0.97;
}

.rail-n {
  color: var(--text-mute);
  font-family: var(--geo);
  font-size: 9px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.16em;
  transition: color 240ms var(--ease);
}

.rail-label {
  color: var(--text-soft);
  font-family: var(--serif);
  font-size: clamp(12px, 1vw, 14px);
  letter-spacing: 0.06em;
  line-height: 1.35;
  white-space: nowrap;
  transition: color 240ms var(--ease);
}

.rail-short {
  display: none;
}

.rail-btn:hover .rail-label {
  color: #fff;
}

.rail-btn.is-active .rail-n {
  color: var(--brand-lit);
}

.rail-btn.is-active .rail-label {
  color: #fff;
}

/* ==========================================================================
   客户 logo 滚动条
   ========================================================================== */

.strip {
  position: relative;
  z-index: 8;
  display: flex;
  align-items: center;
  grid-area: 3 / 1 / 4 / 4;
  min-width: 0;
  gap: clamp(16px, 2vw, 30px);
  padding-left: var(--pad);
  border-top: 1px solid var(--line-soft);
  background: rgba(4, 18, 23, 0.66);
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
}

/* 律所标识 + 署名文字。分隔线挂在这个容器上，不挂在文字上，
   否则 logo 会跑到线的外面去。 */
.strip-brand {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: clamp(8px, 0.9vw, 13px);
  max-width: 30%;
  padding-right: clamp(16px, 2vw, 30px);
  border-right: 1px solid var(--line);
}

/* 客户 logo 是白色单色的，律所标识保留品牌青——它不是客户，是「这批客户是谁服务的」 */
.strip-logo {
  flex: 0 0 auto;
  width: auto;
  height: auto;
  max-width: clamp(18px, 2.2vh, 26px);
  max-height: clamp(18px, 2.2vh, 26px);
  opacity: 0.9;
}

.strip-label {
  min-width: 0;
  color: var(--text-mute);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1.5;
  text-wrap: balance;
}

.strip-viewport {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  /* 两端渐隐，logo 滑进滑出而不是被硬切掉。
     渐变遮罩不走网络请求，file:// 下不会被拦。 */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 44px, #000 calc(100% - 64px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 44px, #000 calc(100% - 64px), transparent 100%);
}

.strip-track {
  display: flex;
  align-items: center;
  width: max-content;
  gap: clamp(30px, 3.4vw, 56px);
  animation: slide 90s linear infinite;
  will-change: transform;
}

@keyframes slide {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    /* 内容铺了两遍，走到一半正好接回起点 */
    transform: translate3d(-50%, 0, 0);
  }
}

.strip-track li {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  /* 跟着 --strip 走：矮屏上客户带收到 40px，格子和 logo 也得一起收，
     否则 30px 的格子加上下内边距会把带子重新撑开。 */
  height: clamp(20px, 3.6vh, 30px);
}

/* 宽高都用 max- 约束、尺寸留 auto：
   写 height:100% + max-width 的话，替换元素会按比例把高度重算回去，
   结果比格子高，被 overflow 裁掉一截。 */
.strip-track img {
  width: auto;
  height: auto;
  max-width: clamp(118px, 12vw, 168px);
  max-height: clamp(19px, 3.4vh, 28px);
  object-fit: contain;
  opacity: 0.62;
  transition: opacity 260ms var(--ease);
}

.strip:hover .strip-track {
  animation-play-state: paused;
}

.strip:hover .strip-track img {
  opacity: 0.82;
}

.noscript {
  position: fixed;
  z-index: 90;
  right: 16px;
  bottom: 16px;
  left: 16px;
  padding: 12px;
  border-radius: 10px;
  color: var(--ink-900);
  background: var(--brand-lit);
  font-size: 12px;
  text-align: center;
}

/* ==========================================================================
   动效
   ========================================================================== */

@keyframes rise {
  from {
    opacity: 0;
    translate: 0 14px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  /* 关掉自动滚动后要留一条出路，否则后面的 logo 永远看不到 */
  .strip-track {
    animation: none;
  }

  .strip-viewport {
    overflow-x: auto;
    scrollbar-width: none;
  }

  .strip-viewport::-webkit-scrollbar {
    display: none;
  }
}

/* ==========================================================================
   自适应
   ========================================================================== */

/* 矮屏笔记本：1366×768 / 1280×720 这类机器，浏览器界面占掉 140px 后
   只剩 600 出头的视口。整站纵向节奏已经挂在 vh 上连续缩放了，这里补最后一档
   ——只收行高，不动字号。行高在阈值上跳 0.2 是察觉不到的，所以这一档用断点比
   用连续函数更好读；字号如果也跟着跳就会很明显，那部分留给上面的 min(vw, vh)。
   限定 min-width 941px 是为了不碰手机端，手机有自己那套断点。 */
@media (min-width: 941px) and (max-height: 700px) {
  .v-head p {
    line-height: 1.7;
  }

  .area-q,
  .area-d {
    line-height: 1.62;
  }

  .matter-group strong {
    line-height: 1.5;
  }

  .matter-group em {
    line-height: 1.55;
  }

  .about-body p {
    line-height: 1.8;
  }

  .creds li {
    line-height: 1.5;
  }

  .firm-card p {
    line-height: 1.65;
  }

  .bg-note {
    line-height: 1.5;
  }

  .c-note {
    line-height: 1.5;
  }
}

@media (max-width: 1280px) {
  .stage {
    grid-template-columns: 42% minmax(0, 1fr) var(--rail);
  }

  .stage.is-open {
    grid-template-columns: 27% minmax(0, 1fr) var(--rail);
  }

  .hero-stats li {
    min-width: 118px;
    padding: 12px 16px 13px;
  }
}

@media (max-width: 1120px) {
  /* 这里原来写 --top: 76px，会把 :root 里按屏高连续缩放的顶栏又钉成固定值，
     窄且矮的屏幕就白缩了。顶栏交给 vh 管，这里只管列宽。 */
  .stage {
    grid-template-columns: 38% minmax(0, 1fr) var(--rail);
  }

  .stage.is-open {
    grid-template-columns: 24% minmax(0, 1fr) var(--rail);
  }

  .locale {
    display: none;
  }
}

/* ---------- 竖向堆叠：照片在上，内容在中，导航横排在下 ---------- */

@media (max-width: 940px) {
  :root {
    --top: 66px;
    --nav: 58px;
    --strip: 52px;
    --pad: 18px;
  }

  .stage {
    /* 必须是 minmax(0, 1fr)：写 1fr 时列宽会被 nowrap 的标签撑爆，
       整个舞台变宽，顶栏右侧就被裁到屏幕外了。 */
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: var(--top) 33dvh minmax(0, 1fr) var(--nav) var(--strip);
    transition: grid-template-rows var(--move) var(--ease);
  }

  /* 手机上同一个想法竖过来用：照片收成一条头像带，内容长出来 */
  .stage.is-open {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: var(--top) 15dvh minmax(0, 1fr) var(--nav) var(--strip);
  }

  .portrait {
    grid-area: 1 / 1 / 3 / 2;
  }

  .portrait-img {
    object-position: 52% 16%;
    scale: 1.18;
  }

  .stage.is-open .portrait-img {
    object-position: 52% 13%;
    scale: 1;
  }

  .portrait-fade,
  .stage.is-open .portrait-fade {
    background: linear-gradient(to top, var(--ink-850) 0%, rgba(7, 26, 33, 0.8) 16%, rgba(7, 26, 33, 0) 46%);
  }

  .board {
    grid-area: 2 / 1 / 6 / 2;
  }

  .board-mark {
    top: auto;
    bottom: 4%;
    left: -14%;
    width: 158%;
    opacity: 0.16;
  }

  .topbar {
    grid-area: 1 / 1 / 2 / 2;
  }

  .main {
    grid-area: 3 / 1 / 4 / 2;
  }

  .hero {
    justify-content: flex-start;
    padding: clamp(14px, 2.4vh, 26px) var(--pad) 18px;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /* 手机上照片只剩一条带，名牌压成一行 */
  .id-plate {
    right: var(--pad);
    bottom: 12px;
    left: var(--pad);
    display: flex;
    align-items: baseline;
    gap: 12px;
  }

  .id-name {
    font-size: 22px;
  }

  .id-name em {
    display: none;
  }

  .id-title {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
    font-size: 10px;
  }

  /* 名牌压成一行后只留得下名字 + 职务，学历和律所在「资历」视图里 */
  .id-edu,
  .id-firm {
    display: none;
  }

  .view-head {
    padding: 0 var(--pad) 12px;
  }

  .view-body {
    padding: 18px var(--pad) 24px;
  }

  .v-head h2 {
    font-size: 24px;
  }

  .v-head p {
    font-size: 13px;
    line-height: 1.85;
  }

  .areas,
  .creds,
  .bg-grid,
  .about-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  /* 地图卡挪到三条自述下面，别在 390px 宽里跟正文抢空间 */
  .about-grid {
    gap: 20px;
  }

  .matters {
    grid-template-columns: minmax(0, 1fr);
  }

  /* 单列了，最后一组的跨两格和内部分两列都要撤掉 */
  .matter-group:last-child {
    grid-column: auto;
  }

  .matter-group:last-child ul {
    display: block;
  }

  .matter-group:last-child ul > li:last-child {
    border-bottom: 0;
  }

  /* 手机上标题和奖项 chips 挤不到同一行，回到上下堆叠 */
  .firm-card {
    grid-template-columns: minmax(0, 1fr);
  }


  .areas {
    gap: 10px;
  }

  /* 竖着堆的时候不需要给标题留两行 */
  .area h3 {
    min-height: 0;
  }

  .area {
    padding: 15px 16px 16px;
  }

  .area-q {
    font-size: 12.5px;
  }

  .area-d {
    font-size: 12px;
  }

  .about-body p {
    font-size: 14px;
    line-height: 1.95;
  }

  .c-row {
    grid-template-columns: 54px minmax(0, 1fr) 18px;
    min-height: 54px;
    padding: 10px 0;
  }

  /* 手机上没有并排的余地，二维码回到联系方式下面 */
  .c-main {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .qrs {
    gap: 14px;
    padding-top: 20px;
  }

  .qrs figure {
    flex: 1 1 0;
    width: auto;
    max-width: 148px;
  }

  /* 导航改横排，可横滑 */
  .rail {
    grid-area: 4 / 1 / 5 / 2;
    flex-direction: row;
    justify-content: flex-start;
    gap: 2px;
    padding: 0 var(--pad);
    overflow-x: auto;
    border-top: 1px solid var(--line-soft);
    border-left: 0;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .rail::-webkit-scrollbar {
    display: none;
  }

  .rail-btn {
    flex: 0 0 auto;
    display: flex;
    align-items: baseline;
    min-height: 44px;
    gap: 7px;
    padding: 0 13px;
  }

  /* 横排时指示条改到底部 */
  .rail-btn::before {
    top: auto;
    bottom: 6px;
    left: 50%;
    width: 0;
    height: 2px;
    translate: -50% 0;
    transition: width 280ms var(--ease);
  }

  .rail-btn.is-active::before {
    width: 42%;
    height: 2px;
  }

  /* 五项要在 390px 里全排下：短标签 + 去掉序号 */
  .rail-n,
  .rail-label {
    display: none;
  }

  .rail-short {
    display: inline;
    color: var(--text-soft);
    font-family: var(--serif);
    font-size: 14.5px;
    letter-spacing: 0.06em;
    white-space: nowrap;
    transition: color 240ms var(--ease);
  }

  .rail-btn.is-active .rail-short {
    color: #fff;
  }

  .rail {
    justify-content: space-between;
  }

  .rail-btn {
    padding: 0 10px;
  }

  .strip {
    grid-area: 5 / 1 / 6 / 2;
    padding-left: 0;
  }

  /* 手机上署名文字没有位置，只留律所标识当起始标记 */
  .strip-label {
    display: none;
  }

  .strip-brand {
    max-width: none;
    padding-right: 12px;
  }

  .strip-viewport {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 26px, #000 calc(100% - 34px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 26px, #000 calc(100% - 34px), transparent 100%);
  }

  .strip-track {
    gap: 28px;
  }

  .strip-track li {
    height: 24px;
  }

  .strip-track img {
    max-width: 118px;
    max-height: 22px;
  }

  .hero-name {
    margin-top: 12px;
  }

  .name-zh {
    font-size: 44px;
  }

  .name-en {
    font-size: 14px;
  }

  .hero-statement {
    margin-top: 18px;
  }

  .hero-statement-text {
    max-width: none;
    font-size: 21px;
  }

  .hero-role {
    margin-top: 16px;
  }

  .hero-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
    margin-top: 18px;
  }

  .hero-stats li {
    min-width: 0;
    padding: 11px 12px 12px;
  }

  .stat-value {
    font-size: 22px;
  }

  .stat-label {
    margin-top: 6px;
    font-size: 9.5px;
    white-space: normal;
  }
}

/* 矮屏手机（iPhone SE 一类）：再压一档 */
@media (max-width: 940px) and (max-height: 720px) {
  :root {
    --top: 58px;
    --nav: 52px;
    --strip: 46px;
  }

  .stage {
    grid-template-rows: var(--top) 26dvh minmax(0, 1fr) var(--nav) var(--strip);
  }

  .stage.is-open {
    grid-template-rows: var(--top) 12dvh minmax(0, 1fr) var(--nav) var(--strip);
  }

  .name-zh {
    font-size: 36px;
  }

  .name-en {
    font-size: 12px;
  }

  .hero-statement {
    margin-top: 14px;
  }

  .hero-statement-text {
    font-size: 18px;
  }

  .hero-role {
    margin-top: 12px;
    font-size: 12px;
  }

  .hero-sub {
    font-size: 11px;
  }

  .hero-stats {
    margin-top: 14px;
  }

  .hero-stats li {
    padding: 9px 11px 10px;
  }

  .stat-value {
    font-size: 19px;
  }
}

@media (max-width: 520px) {
  .stat-label {
    letter-spacing: 0.04em;
  }

  .qrs {
    width: 100%;
  }
}