/* =============================================================
   李晓兰 · 泰康人寿 HWP 合伙人
   配色取自形象海报：米白纸底 / 香槟金 / 深酒红 / 墨色
   ============================================================= */

:root {
  --paper:    #f7f2e8;
  --paper-2:  #f2ead9;
  --paper-3:  #ece1cd;
  --ink:      #1f1a16;
  --ink-2:    #4c433a;
  --ink-3:    #857a6c;
  --gold:     #b08d4f;
  --gold-2:   #c9a961;
  --gold-3:   #ddc18a;
  --wine:     #6b1b25;
  --wine-2:   #4b1119;
  --line:     rgba(176, 141, 79, .32);
  --line-2:   rgba(176, 141, 79, .16);

  --serif: "Source Han Serif SC", "Noto Serif SC", "Songti SC", "STSong",
           SimSun, Georgia, "Times New Roman", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC",
          "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Courier New", monospace;

  --ease: cubic-bezier(.22, .61, .36, 1);
  --pad: clamp(20px, 5vw, 60px);
  --maxw: 1140px;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; font-weight: 500; }
p { margin: 0; }
ol, ul { margin: 0; padding: 0; list-style: none; }
blockquote { margin: 0; }

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

/* 全局纸面质感：极淡的暖光 */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(60% 45% at 78% 0%, rgba(201, 169, 97, .13), transparent 70%),
    radial-gradient(45% 40% at 0% 60%, rgba(107, 27, 37, .045), transparent 72%);
}

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

.topbar {
  position: relative;
  z-index: 30;
  background: var(--wine);
  color: #f3e7d6;
}
.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 38px;
}
.topbar-brand {
  font-size: 11.5px;
  letter-spacing: .16em;
  color: rgba(243, 231, 214, .92);
}
.topbar-brand span { color: var(--gold-3); }
.topbar-tel {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .08em;
  color: var(--gold-3);
}

/* ============================ 导航 ============================ */

.nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(247, 242, 232, .88);
  backdrop-filter: blur(12px) saturate(130%);
  -webkit-backdrop-filter: blur(12px) saturate(130%);
  border-bottom: 1px solid var(--line-2);
  transition: box-shadow .3s var(--ease), background-color .3s var(--ease);
}
.nav.stuck {
  background: rgba(247, 242, 232, .96);
  box-shadow: 0 1px 24px rgba(74, 44, 20, .08);
}
.nav-inner {
  display: flex;
  align-items: center;
  gap: 32px;
  height: 68px;
}
.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  white-space: nowrap;
}
.brand b {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--wine);
}
.brand span {
  font-family: var(--serif);
  font-size: 9.5px;
  letter-spacing: .26em;
  color: var(--gold);
}
.nav-links {
  display: flex;
  gap: 30px;
  margin-left: auto;
  font-size: 14px;
}
.nav-links a {
  position: relative;
  color: var(--ink-2);
  padding: 4px 0;
  transition: color .2s var(--ease);
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background: var(--gold);
  transition: width .26s var(--ease);
}
.nav-links a:hover { color: var(--wine); }
.nav-links a:hover::after { width: 100%; }

.nav-tel {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 18px;
  border: 1px solid var(--gold);
  color: var(--wine);
  font-size: 12.5px;
  letter-spacing: .12em;
  transition: background-color .22s var(--ease), color .22s var(--ease);
}
.nav-tel:hover { background: var(--wine); border-color: var(--wine); color: #f6ecdb; }

/* ============================ 首屏 ============================ */

.hero {
  position: relative;
  z-index: 1;
  padding: clamp(40px, 6.5vh, 74px) 0 clamp(44px, 7vh, 76px);
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: clamp(32px, 6vw, 74px);
  align-items: center;
}

.eyebrow {
  font-family: var(--serif);
  font-size: 10.5px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 22px;
}
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 30px;
  height: 1px;
  background: var(--gold);
  vertical-align: 3px;
  margin-right: 12px;
}

.name {
  font-family: var(--serif);
  font-size: clamp(2.7rem, 7.6vw, 6.2rem);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: .055em;
  color: var(--wine);
  margin-left: -.04em;
}

.name-en {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-top: 12px;
  font-family: var(--serif);
  font-size: clamp(13px, 1.5vw, 15.5px);
  letter-spacing: .18em;
  color: var(--ink-3);
}
.name-en em {
  font-style: italic;
  font-size: 1.15em;
  letter-spacing: .06em;
  color: var(--gold);
}

.role {
  margin-top: 20px;
  font-size: clamp(14.5px, 1.6vw, 16.5px);
  letter-spacing: .1em;
  color: var(--ink);
  padding-top: 18px;
  border-top: 1px solid var(--line);
  max-width: 22em;
}

.lede {
  margin-top: 26px;
  max-width: 25em;
  font-size: clamp(15px, 1.65vw, 17px);
  line-height: 2;
  color: var(--ink-2);
  text-wrap: pretty;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  padding: 0 30px;
  font-size: 14px;
  letter-spacing: .08em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color .24s var(--ease), color .24s var(--ease),
              border-color .24s var(--ease), transform .2s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn.solid {
  background: var(--wine);
  color: #f7eedd;
  border-color: var(--wine);
}
.btn.solid:hover { background: var(--wine-2); border-color: var(--wine-2); }
.btn.line {
  background: transparent;
  color: var(--wine);
  border-color: var(--gold);
}
.btn.line:hover { background: rgba(176, 141, 79, .1); }
.btn.light { background: #f7eedd; color: var(--wine); border-color: #f7eedd; }
.btn.light:hover { background: #fff; }
.btn.line.light {
  background: transparent;
  color: #f7eedd;
  border-color: rgba(247, 238, 221, .5);
}
.btn.line.light:hover { background: rgba(247, 238, 221, .12); border-color: rgba(247, 238, 221, .8); }

/* 人像 */
.portrait { margin: 0; }
.portrait-frame {
  position: relative;
  padding: 9px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, #fdfaf3, #f2e9d8);
  box-shadow: 0 24px 60px -34px rgba(74, 44, 20, .42);
}
.portrait-frame::before,
.portrait-frame::after {
  content: "";
  position: absolute;
  width: 26px;
  height: 26px;
  border: 1px solid var(--gold);
}
.portrait-frame::before { top: -7px; left: -7px; border-right: 0; border-bottom: 0; }
.portrait-frame::after { bottom: -7px; right: -7px; border-left: 0; border-top: 0; }

.portrait-inner {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
}
.member-photo { position: relative; aspect-ratio: 1 / 1; overflow: hidden; }

.portrait-inner img,
.member-photo img {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity .3s var(--ease);
}
img.is-missing { opacity: 0; }

.ph {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: rgba(148, 116, 60, .68);
  background:
    radial-gradient(72% 62% at 50% 40%, rgba(201, 169, 97, .18), transparent 72%),
    linear-gradient(160deg, #f2e8d6, #e4d6bb);
}
.ph svg { width: 50%; max-width: 132px; opacity: .7; }
.ph span {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.ph.qr svg { width: 44%; max-width: 96px; }

.portrait figcaption {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  font-family: var(--serif);
  font-size: 12px;
  letter-spacing: .14em;
  color: var(--ink-3);
}
.cap-line {
  flex: 0 0 26px;
  height: 1px;
  background: var(--gold);
}

/* ============================ 数字条 ============================ */

.numbers {
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgba(242, 234, 217, .5);
}
.numbers-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
}
.num {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: clamp(22px, 3.4vh, 32px) clamp(10px, 2vw, 26px);
  border-left: 1px solid var(--line-2);
  text-align: center;
}
.num:first-child { border-left: 0; }
.num b {
  font-family: var(--serif);
  font-size: clamp(1.55rem, 2.8vw, 2.15rem);
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--wine);
  line-height: 1.15;
}
.num span {
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--ink-3);
}

/* ============================ 章节通用 ============================ */

.section {
  position: relative;
  z-index: 1;
  padding: clamp(60px, 10vh, 108px) var(--pad);
}

.sec-head { margin-bottom: clamp(34px, 5vh, 56px); }

.sec-no {
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  letter-spacing: .12em;
  color: var(--gold);
  margin-bottom: 12px;
}
.sec-title {
  font-family: var(--serif);
  font-size: clamp(1.65rem, 3.4vw, 2.5rem);
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--ink);
  line-height: 1.3;
}
.sec-title::after {
  content: "";
  display: block;
  width: 42px;
  height: 1px;
  background: var(--gold);
  margin-top: 20px;
}
.sec-lede {
  margin-top: 20px;
  font-size: 14.5px;
  line-height: 1.9;
  color: var(--ink-3);
  max-width: 34em;
}

/* ============================ 关于 ============================ */

.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.24fr) minmax(0, .76fr);
  gap: clamp(30px, 5.5vw, 68px);
  align-items: start;
}
.about-body p {
  font-size: clamp(15px, 1.6vw, 16.5px);
  line-height: 2.05;
  color: var(--ink-2);
  margin-bottom: 1.15em;
  max-width: 33em;
  text-wrap: pretty;
}
.about-body .sign {
  font-family: var(--serif);
  font-size: clamp(1.05rem, 1.9vw, 1.3rem);
  letter-spacing: .16em;
  color: var(--wine);
  margin-top: 1.4em;
  margin-bottom: 0;
}

.timeline {
  border-left: 1px solid var(--line-2);
  padding-left: clamp(18px, 2.6vw, 28px);
}
.timeline li {
  position: relative;
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 6px 12px;
  padding: 0 0 clamp(20px, 3vh, 26px);
}
.timeline li::before {
  content: "";
  position: absolute;
  left: calc(-1 * clamp(18px, 2.6vw, 28px) - 3.5px);
  top: 9px;
  width: 6px;
  height: 6px;
  border: 1px solid var(--gold);
  background: var(--paper);
  transform: rotate(45deg);
}
.timeline li:last-child { padding-bottom: 0; }
.timeline b {
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--wine);
  line-height: 1.6;
}
.timeline h3 {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--ink);
  line-height: 1.6;
}
.timeline p {
  font-size: 13px;
  color: var(--ink-3);
  line-height: 1.7;
}

/* ============================ 感言 ============================ */

.quote-band {
  position: relative;
  z-index: 1;
  background: var(--wine);
  color: #f6ecdb;
  overflow: hidden;
}
.quote-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(50% 60% at 84% 10%, rgba(201, 169, 97, .26), transparent 68%),
    radial-gradient(40% 50% at 6% 90%, rgba(0, 0, 0, .24), transparent 70%);
}
.quote-inner {
  position: relative;
  padding-top: clamp(56px, 9vh, 94px);
  padding-bottom: clamp(56px, 9vh, 94px);
  max-width: calc(var(--maxw) + 2 * var(--pad));
}
.quote-mark {
  font-family: var(--serif);
  font-size: 74px;
  line-height: .6;
  color: rgba(221, 193, 138, .48);
  margin-bottom: 20px;
}
.quote-inner blockquote {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 2.5vw, 1.85rem);
  font-weight: 400;
  line-height: 1.95;
  letter-spacing: .04em;
  max-width: 32em;
  text-wrap: pretty;
}
.quote-by {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 32px;
  font-size: 12.5px;
  letter-spacing: .18em;
  color: var(--gold-3);
}
.quote-by span {
  width: 34px;
  height: 1px;
  background: rgba(221, 193, 138, .6);
}

/* ============================ 团队 ============================ */

.team {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.6vw, 30px);
}
.member {
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #fdfaf3, #f6efe0);
  border: 1px solid var(--line-2);
  padding: 14px;
  box-shadow: 0 16px 36px -32px rgba(74, 44, 20, .55);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.member:hover {
  transform: translateY(-4px);
  border-color: var(--line);
  box-shadow: 0 26px 50px -34px rgba(74, 44, 20, .5);
}
.member-photo {
  display: block;
  border: 1px solid var(--line-2);
  overflow: hidden;
}
.member-info {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 20px 8px 10px;
}
.member-info h3 {
  font-family: var(--serif);
  font-size: 1.28rem;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--wine);
}
.member-info h3 a:hover { color: var(--wine-2); text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.member-role {
  margin-top: 8px;
  font-size: 11.5px;
  letter-spacing: .1em;
  color: var(--gold);
}
.member-desc {
  margin-top: 12px;
  font-size: 13.5px;
  line-height: 1.85;
  color: var(--ink-3);
  min-height: 3.7em;
}
.member-links {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--line-2);
  font-size: 13px;
}
.member-links a {
  font-family: var(--mono);
  letter-spacing: .04em;
  color: var(--ink-2);
  transition: color .2s var(--ease);
}
.member-links a:hover { color: var(--wine); }
.member-links .go {
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: .08em;
  color: var(--wine);
}

.member.self {
  background: linear-gradient(180deg, #fbf6ec, #f3e9d6);
  border-color: var(--line);
}

/* ============================ 泰康 ============================ */

.tk {
  position: relative;
  z-index: 1;
  background: linear-gradient(180deg, rgba(242, 234, 217, .55), rgba(242, 234, 217, .18));
  border-top: 1px solid var(--line-2);
}

.tk-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
  gap: clamp(30px, 5.5vw, 66px);
  align-items: start;
}
.tk-body p {
  font-size: clamp(14.5px, 1.55vw, 16px);
  line-height: 2.05;
  color: var(--ink-2);
  margin-bottom: 1.1em;
  text-wrap: pretty;
}

.tk-points { border-top: 1px solid var(--line-2); }
.tk-points li {
  padding: 20px 0;
  border-bottom: 1px solid var(--line-2);
}
.tk-points h3 {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--wine);
  margin-bottom: 8px;
}
.tk-points p {
  font-size: 13.5px;
  line-height: 1.85;
  color: var(--ink-3);
  max-width: 30em;
}

.tk-plan {
  margin-top: clamp(40px, 6vh, 64px);
  padding-top: clamp(28px, 4vh, 40px);
  border-top: 1px solid var(--line);
}
.plan-k {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 22px;
}
.plan-line {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--line-2);
}
.plan-line li {
  position: relative;
  padding: 20px 14px 0 0;
  border-right: 1px solid var(--line-2);
}
.plan-line li:last-child { border-right: 0; padding-right: 0; }
.plan-line li::before {
  content: "";
  position: absolute;
  top: -3.5px;
  left: 0;
  width: 6px;
  height: 6px;
  background: var(--gold);
  transform: rotate(45deg);
}
.plan-line b {
  display: block;
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--wine);
  margin-bottom: 6px;
}
.plan-line span {
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--ink-3);
}
.plan-note {
  margin-top: 30px;
  font-size: 14px;
  line-height: 1.95;
  color: var(--ink-2);
  max-width: 46em;
  padding-left: 18px;
  border-left: 1px solid var(--gold);
}

/* ============================ 联系 ============================ */

.contact {
  position: relative;
  z-index: 1;
  background: var(--wine-2);
  color: #f6ecdb;
  overflow: hidden;
}
.contact::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(55% 70% at 88% 20%, rgba(201, 169, 97, .22), transparent 70%),
    radial-gradient(50% 60% at 0% 100%, rgba(0, 0, 0, .3), transparent 72%);
}
.contact-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) auto;
  gap: clamp(30px, 5vw, 70px);
  align-items: center;
  padding-top: clamp(54px, 9vh, 90px);
  padding-bottom: clamp(54px, 9vh, 90px);
  max-width: calc(var(--maxw) + 2 * var(--pad));
}
.sec-no.light { color: var(--gold-3); }
.contact-title {
  font-family: var(--serif);
  font-size: clamp(1.7rem, 3.8vw, 2.9rem);
  font-weight: 600;
  letter-spacing: .1em;
  line-height: 1.42;
  margin: 8px 0 26px;
}
.contact-tel {
  display: inline-block;
  font-family: var(--serif);
  font-size: clamp(1.5rem, 3.4vw, 2.35rem);
  letter-spacing: .06em;
  color: var(--gold-3);
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(221, 193, 138, .4);
  transition: color .22s var(--ease), border-color .22s var(--ease);
}
.contact-tel:hover { color: #fff; border-bottom-color: #fff; }
.contact-note {
  margin-top: 20px;
  font-size: 13.5px;
  line-height: 1.9;
  color: rgba(246, 236, 219, .68);
  max-width: 28em;
}
.contact-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

.wechat { text-align: center; }
.wechat-frame {
  position: relative;
  width: clamp(160px, 16vw, 196px);
  aspect-ratio: 1 / 1;
  padding: 8px;
  border: 1px solid rgba(221, 193, 138, .4);
  background: rgba(255, 255, 255, .06);
}
.wechat-frame img {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
}
.wechat-frame .ph {
  background: rgba(255, 255, 255, .04);
  color: rgba(221, 193, 138, .92);
  gap: 10px;
}
.wechat-frame .ph span { font-size: 9px; }
.wechat-cap {
  margin-top: 14px;
  font-size: 12px;
  letter-spacing: .16em;
  color: rgba(246, 236, 219, .72);
}

/* ============================ 页脚 ============================ */

.foot {
  position: relative;
  z-index: 1;
  background: #1a1512;
  color: rgba(246, 236, 219, .62);
}
.foot-inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: clamp(16px, 3vw, 44px);
  align-items: center;
  padding-top: 30px;
  padding-bottom: 30px;
}
.foot-brand {
  font-family: var(--serif);
  font-size: 15px;
  letter-spacing: .12em;
  color: #f0e4d0;
  white-space: nowrap;
}
.foot-brand span {
  display: block;
  font-size: 10.5px;
  letter-spacing: .14em;
  color: var(--gold);
  margin-top: 4px;
}
.foot-legal {
  font-size: 11.5px;
  line-height: 1.8;
  color: rgba(246, 236, 219, .38);
  max-width: 58em;
}
.foot-tel a {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--gold-3);
  white-space: nowrap;
}

/* ============================ 动画 ============================ */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.reveal.in { opacity: 1; transform: none; }

/* ============================ 二级页 ============================ */

.sub-hero {
  position: relative;
  z-index: 1;
  padding: clamp(40px, 7vh, 76px) 0 clamp(36px, 6vh, 64px);
  border-bottom: 1px solid var(--line-2);
}
.sub-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .68fr);
  gap: clamp(28px, 5vw, 62px);
  align-items: center;
}
.crumb {
  font-size: 12px;
  letter-spacing: .14em;
  color: var(--ink-3);
  margin-bottom: 24px;
}
.crumb a { color: var(--gold); }
.crumb a:hover { color: var(--wine); }
.crumb i { font-style: normal; margin: 0 8px; opacity: .5; }

.sub-name {
  font-family: var(--serif);
  font-size: clamp(2.4rem, 5.4vw, 3.9rem);
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--wine);
  line-height: 1.1;
}
.sub-role {
  margin-top: 14px;
  font-size: 13px;
  letter-spacing: .16em;
  color: var(--gold);
}
.sub-lede {
  margin-top: 24px;
  font-size: clamp(14.5px, 1.6vw, 16px);
  line-height: 2;
  color: var(--ink-2);
  max-width: 30em;
  text-wrap: pretty;
}

.contact-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: 30px;
  border: 1px solid var(--line-2);
  background: var(--line-2);
}
.contact-strip > div {
  background: #fdfaf3;
  padding: 18px 20px;
}
.contact-strip dt {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 7px;
}
.contact-strip dd {
  margin: 0;
  font-size: 15px;
  letter-spacing: .04em;
  color: var(--ink);
}
.contact-strip dd a { color: var(--wine); }
.contact-strip dd a:hover { text-decoration: underline; text-underline-offset: 4px; }
.contact-strip .pending { color: var(--ink-3); font-size: 13.5px; }

.sub-photo .portrait-frame { padding: 7px; }
.sub-photo figcaption { margin-top: 14px; }

/* 案例列表 */
.cases { border-top: 1px solid var(--line-2); }
.cases li {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  gap: clamp(12px, 2.4vw, 28px);
  align-items: baseline;
  padding: clamp(20px, 3vw, 26px) 0;
  border-bottom: 1px solid var(--line-2);
  transition: padding-left .24s var(--ease), background-color .24s var(--ease);
}
.cases li:hover { padding-left: 10px; background: rgba(201, 169, 97, .05); }
.case-no {
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  color: var(--gold);
}
.case-main h3 {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--ink);
  margin-bottom: 7px;
}
.case-main p {
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--ink-3);
  max-width: 40em;
}
.case-meta {
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--gold);
  white-space: nowrap;
}

.placeholder-note {
  margin-top: 26px;
  padding: 20px 22px;
  border: 1px dashed var(--line);
  font-size: 13px;
  line-height: 1.85;
  color: var(--ink-3);
  background: rgba(242, 234, 217, .4);
}
.placeholder-note b { color: var(--ink-2); font-weight: 600; }

.back-home {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 34px;
  font-size: 13px;
  letter-spacing: .1em;
  color: var(--wine);
}
.back-home:hover { text-decoration: underline; text-underline-offset: 5px; }

/* ============================ 响应式 ============================ */

@media (max-width: 980px) {
  .hero-grid, .about-grid, .tk-grid, .sub-grid { grid-template-columns: 1fr; }
  .hero-grid { gap: 44px; }
  .portrait { max-width: 420px; }
  .team { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plan-line { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plan-line li { border-right: 0; padding: 20px 16px 16px 0; border-bottom: 1px solid var(--line-2); }
  .plan-line li:nth-last-child(-n+1) { border-bottom: 0; }
  .contact-inner { grid-template-columns: 1fr; }
  .wechat { justify-self: start; text-align: left; }
  .foot-inner { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .nav-links { display: none; }
  .nav-inner { height: 60px; gap: 14px; }
  .nav-tel { margin-left: auto; }
  .topbar-brand { font-size: 10.5px; letter-spacing: .1em; }
  .topbar-brand span { display: none; }

  .name { letter-spacing: .04em; }
  .portrait { max-width: 300px; }
  .hero-grid { gap: 34px; }
  .numbers-grid { grid-template-columns: repeat(2, 1fr); }
  .num { border-left: 0; padding-left: 0; padding-right: 0; }
  .num:nth-child(n+3) { border-top: 1px solid var(--line-2); }
  .num:nth-child(even) { border-left: 1px solid var(--line-2); padding-left: 14px; }

  .team { grid-template-columns: 1fr; }
  .member-desc { min-height: 0; }

  .timeline li { grid-template-columns: 56px minmax(0, 1fr); }

  .plan-line { grid-template-columns: 1fr; }
  .plan-line li { padding: 16px 0 16px 16px; border-bottom: 1px solid var(--line-2); }
  .plan-line li::before { top: 24px; }

  .contact-strip { grid-template-columns: 1fr; }
  .btn { flex: 1 1 auto; padding: 0 20px; }
  .quote-mark { font-size: 56px; }

  .cases li { grid-template-columns: 40px minmax(0, 1fr); row-gap: 8px; }
  .case-meta { grid-column: 2; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .member, .btn, .nav-links a::after { transition: none; }
}