@import url("fonts/fonts.css");
:root{
  --primary:#0F2340;--accent:#C9A45C;--title:#1A2A44;
  --text:#3F4756;--text2:#5A6270;--muted:#8A8F99;
  --bg:#F4F5F7;--border:#ECECEC;--card:#ffffff;
  --cream:#FBF6E8;--creamBorder:#F0E6C8;--creamText:#6B5A3A;
  --tagBg:#F3ECDD;--tagText:#B0863A;
  --primary2:#2c3d57;--accentDeep:#856c3d;--accentPale:#e1cda5;
  --cardBd:#ECECEC;--cardShadow:none;
  /* 视觉风格族：字体配对 + 圆角（classic=思源黑体+直角，切换其他族即换整风） */
  --f-head:"Noto Sans SC",-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Segoe UI",sans-serif;--f-body:"Noto Sans SC",-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Segoe UI",sans-serif;--radius:0px;

  /* 版面 */
  --maxw:1320px;--measure:720px;--hd:76px;
  /* 字体：自托管思源黑体；微软雅黑留在栈尾兜底（调用本机已装字体，不涉及授权） */
  --f-sans:"Noto Sans SC",-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Segoe UI",sans-serif;
  /* 字号 */
  --t-xs:12px;--t-sm:13px;--t-base:15px;--t-md:17px;--t-lg:22px;--t-xl:32px;--t-2xl:44px;--t-3xl:72px;
  /* 间距 */
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;--s9:96px;--s10:128px;
  /* 线条与纸面 */
  --paper:#ffffff;--paper2:#f9fafb;--rule:#e0e0e0;--ruleSoft:#f3f3f3;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--f-body);color:var(--text);background:var(--paper);
  line-height:1.9;font-size:var(--t-base);font-weight:400;-webkit-font-smoothing:antialiased;counter-reset:sec}
/* 标题走风格族字体（经典=黑体，国风=楷体，极简=衬线） */
h1,h2,h3,.sec-title,.ph-title,.about-name,.qa-cat,.card h3,.serv h3,.panel h3{font-family:var(--f-head)}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
svg{display:block;flex:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--s7)}

/* 小标签：序号 + 英文大写宽字距 + 中文。首页自动编号（CSS counter，不依赖 homeSections 的动态顺序） */
.eyebrow{display:flex;align-items:center;gap:var(--s3);color:var(--accentDeep);font-size:var(--t-xs);font-weight:500}
.eyebrow .en{letter-spacing:.32em;text-transform:uppercase}
.eyebrow .cn{color:var(--muted);letter-spacing:.18em;font-weight:400}
.eyebrow .en + .cn::before{content:"/";margin-right:var(--s3);color:var(--ruleSoft)}
.p-index .section .eyebrow:not(.quiet)::before{counter-increment:sec;content:counter(sec,decimal-leading-zero);
  color:var(--accent);font-size:var(--t-xs);font-weight:300;letter-spacing:.08em;
  padding-right:var(--s3);border-right:1px solid var(--accent)}
.eyebrow.quiet{color:var(--tagText)}
.eyebrow.quiet .cn{color:var(--tagText);opacity:.7}

.sec-title{color:var(--title);font-size:var(--t-xl);font-weight:300;line-height:1.4;letter-spacing:.06em;
  margin:var(--s5) 0 var(--s4)}
.sec-desc{color:var(--text2);margin:0 0 var(--s6);max-width:var(--measure);line-height:2}
.sec-more{margin:var(--s6) 0 0}

/* 按钮：直角、无阴影、无位移 */
.btn{display:inline-flex;align-items:center;gap:var(--s2);padding:15px 28px;border-radius:var(--radius);
  font-size:14px;font-weight:500;letter-spacing:.08em;border:1px solid transparent;
  transition:background .3s,color .3s,border-color .3s;cursor:pointer}
.btn svg{width:16px;height:16px}
.btn-gold{background:var(--accent);color:var(--primary)}
.btn-gold:hover{background:#d5b880}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,0.35)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
.btn-navy{background:var(--primary);color:#fff}
.btn-navy:hover{background:var(--primary2)}
.btn-line{background:transparent;color:var(--title);border-color:var(--rule)}
.btn-line:hover{border-color:var(--primary);color:var(--primary)}

/* header：全站统一的深色实心条（深色只出现在 顶栏 / 页脚 / CTA 通栏 / 抽屉 四处） */
.site-header{position:fixed;top:0;left:0;right:0;z-index:60;background:rgba(15,35,64,0.97);
  backdrop-filter:blur(8px);border-bottom:1px solid rgba(255,255,255,0.16)}
body{padding-top:var(--hd)}
.hd{display:flex;align-items:center;justify-content:space-between;height:var(--hd)}
.hd-left{display:flex;align-items:center;gap:var(--s5)}
.brand{display:flex;align-items:center;gap:var(--s3)}
.brand .logo{width:36px;height:36px;border:1px solid rgba(201,164,92,0.6);color:var(--accent);
  font-weight:400;display:grid;place-items:center;font-size:var(--t-md)}
.brand b{color:#fff;font-size:var(--t-md);font-weight:500;letter-spacing:.16em;line-height:1.3}
.brand small{color:#9fa7b3;font-size:var(--t-xs);font-weight:300;letter-spacing:.1em}
.nav{display:flex;gap:var(--s7);align-items:center}
/* hover：下划线从左侧划出 */
.nav a{position:relative;color:#dbdee2;font-size:14px;font-weight:400;letter-spacing:.1em;
  padding:8px 0;transition:color .3s}
.nav a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--accent);
  transition:width .35s cubic-bezier(.22,.61,.36,1)}
.nav a:hover{color:#fff}
.nav a:hover::after,.nav a.active::after{width:100%}
.nav a.active{color:#fff}
.hd-cta{display:inline-flex;align-items:center;gap:var(--s2);color:#fff;font-size:var(--t-sm);font-weight:400;
  letter-spacing:.08em;padding:10px 18px;border:1px solid rgba(255,255,255,0.3);transition:.3s}
.hd-cta svg{width:14px;height:14px;opacity:.8}
.hd-cta:hover{border-color:var(--accent);color:var(--accent)}
/* 菜单按钮：挂在顶栏左端（金杜同款），所有断点都显示，唤出左侧抽屉 */
.nav-toggle{display:block;background:none;border:0;color:#fff;cursor:pointer;padding:8px;line-height:0;
  transition:color .3s}
.nav-toggle:hover{color:var(--accent)}
.nav-toggle svg{width:22px;height:22px}

/* 左侧滑出抽屉 + 遮罩（金杜主页同款：菜单在左、面板从左滑出） */
.scrim{position:fixed;inset:0;z-index:70;background:rgba(0,0,0,0.5);opacity:0;visibility:hidden;
  transition:opacity .45s,visibility .45s}
.scrim.open{opacity:1;visibility:visible}
.drawer{position:fixed;top:0;left:0;z-index:80;width:420px;max-width:88vw;height:100vh;overflow-y:auto;
  background:#0b192e;color:#adb4be;padding:var(--s7);display:flex;flex-direction:column;
  transform:translateX(-100%);visibility:hidden;
  transition:transform .45s cubic-bezier(.22,.61,.36,1),visibility .45s}
.drawer.open{transform:none;visibility:visible}
.drawer-close{align-self:flex-end;background:none;border:0;color:#adb4be;cursor:pointer;padding:var(--s2);
  line-height:0;transition:color .3s}
.drawer-close:hover{color:var(--accent)}
.drawer-close svg{width:22px;height:22px}
.drawer-nav{display:flex;flex-direction:column;margin:var(--s7) 0 var(--s9);border-top:1px solid rgba(255,255,255,0.1)}
.drawer-nav a{display:flex;align-items:baseline;gap:var(--s5);padding:var(--s4) 0;
  border-bottom:1px solid rgba(255,255,255,0.1);color:#fff;font-size:19px;font-weight:300;letter-spacing:.12em;
  transition:color .3s,padding-left .3s}
.drawer-nav a:hover,.drawer-nav a.active{color:var(--accent);padding-left:var(--s3)}
.drawer-nav .no{color:#e1cda5;font-size:var(--t-xs);font-weight:300;letter-spacing:.1em;flex:none;width:24px}
.drawer h4{color:#e1cda5;font-size:var(--t-xs);font-weight:500;letter-spacing:.28em;
  text-transform:uppercase;margin:0 0 var(--s5)}
.drawer .lk{display:flex;align-items:center;gap:var(--s3);color:#adb4be;font-size:var(--t-sm);
  font-weight:300;letter-spacing:.04em;margin:var(--s4) 0;transition:color .3s}
.drawer .lk svg{width:15px;height:15px;opacity:.6}
.drawer .lk:hover{color:var(--accent)}
.drawer-foot{margin-top:auto;padding-top:var(--s7);border-top:1px solid rgba(255,255,255,0.1);
  color:#7b8696;font-size:var(--t-xs);font-weight:300;line-height:1.9}
body.locked{overflow:hidden}

/* hero：浅底（主色向白调和到 10% 的「雾面」），底部渐变融进纸白 —— 与下方白底区块无硬边界。
   仍占满第一屏，但高度封顶 800px（2026-07-18 从 900 再收：客户点名名片区到 01 的留白太大）。 */
.hero{background:linear-gradient(180deg,#e7e9ec 0%,#f5f6f7 60%,var(--paper) 100%);
  color:var(--text);min-height:min(calc(100vh - var(--hd)),800px);display:grid;align-items:center;position:relative}
/* 建筑感竖向细线（金杜式的版面骨架）：极淡、向下渐隐，纯装饰 */
.hero::before,.page-head::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(15,35,64,0.05) 1px,transparent 1px);background-size:25% 100%;
  -webkit-mask-image:linear-gradient(180deg,#000 30%,transparent);
  mask-image:linear-gradient(180deg,#000 30%,transparent)}
.hero-grid{display:grid;grid-template-columns:1.5fr .8fr;gap:var(--s9);align-items:center;
  padding:var(--s8) var(--s7);width:100%;max-width:var(--maxw);margin:0 auto}
.hero-main{min-width:0}
.hero h1{color:var(--title);font-size:var(--t-3xl);font-weight:300;margin:0;letter-spacing:.22em;line-height:1.2}
.hero-en{display:block;color:var(--accentDeep);font-size:var(--t-xs);font-weight:400;letter-spacing:.42em;
  text-transform:uppercase;margin:var(--s4) 0 var(--s5)}
.hero-name-tag{display:block;color:var(--title);font-size:var(--t-lg);font-weight:300;letter-spacing:.12em;
  margin-top:var(--s3)}
.hero-sub{font-size:var(--t-md);font-weight:300;color:var(--text2);margin:0 0 var(--s2);letter-spacing:.06em}
/* 资质：一行 · 分隔文本，金色显示（用深金派生色——纯金在浅雾面底上对比度不够） */
.hero-creds{color:var(--accentDeep);font-size:var(--t-sm);font-weight:400;letter-spacing:.08em;margin:0}
.mini-label{display:block;color:var(--accentDeep);font-size:var(--t-xs);font-weight:500;letter-spacing:.28em;
  text-transform:uppercase;margin-bottom:var(--s3)}

/* 排印式列表（业务领域）：编号 + 细线，取代药丸标签群 */
.tlist{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.tlist li{display:flex;align-items:baseline;gap:var(--s5);padding:var(--s2) 0;
  border-bottom:1px solid var(--rule);font-size:var(--t-base);font-weight:300;color:var(--text);
  letter-spacing:.06em;transition:color .3s}
.tlist li:hover{color:var(--primary)}
.tlist .no{color:var(--accent);font-size:var(--t-xs);font-weight:300;letter-spacing:.1em;flex:none;width:22px}
/* 执业理念：标题顶格，列表缩进 */
.hero-phi{margin:var(--s6) 0 var(--s2);max-width:560px}
.phi-head{display:flex;align-items:baseline;gap:var(--s3);margin-bottom:var(--s4)}
.phi-head .phi-cn{font-size:var(--t-base);font-weight:500;color:var(--title);letter-spacing:.06em}
.phi-head .phi-en{font-size:var(--t-xs);font-weight:300;color:var(--accent);letter-spacing:.28em;text-transform:uppercase}
.phi-list{list-style:none;margin:0;padding:0;padding-left:var(--s5)}
.phi-list li{padding:var(--s2) 0;font-size:var(--t-base);font-weight:300;color:var(--text);
  letter-spacing:.06em;line-height:1.9}
.phi-list li b{font-weight:500;color:var(--title);margin-right:var(--s2)}

/* 业绩数字：字重 300 的大数字 + 细线 */
.hero-stats-row{display:flex;flex-wrap:wrap;gap:var(--s10);padding:var(--s6) 0;margin:var(--s6) 0 var(--s6);
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.hero-stats-row div{display:flex;flex-direction:column;gap:var(--s2)}
.hero-stats-row b{color:var(--title);font-size:var(--t-2xl);font-weight:300;letter-spacing:.04em;line-height:1}
.hero-stats-row span{color:var(--muted);font-size:var(--t-xs);font-weight:400;letter-spacing:.2em}
.hero-clients{margin:0;color:var(--muted);font-size:var(--t-sm);font-weight:300;
  line-height:2;letter-spacing:.06em}
.hero-clients .mini-label{display:inline;margin:0 var(--s4) 0 0}
.hero-acts{display:flex;flex-wrap:wrap;gap:var(--s3)}

/* hero 人像：白底细线框、彩色原图（曾做过黑白化处理，在浅底上显得灰暗压抑，已否决——不要再加 grayscale） */
.hero-card{background:var(--paper);border:1px solid var(--rule);padding:var(--s4)}
.hero-card>img{width:100%;aspect-ratio:3/4;object-fit:cover;background:#edeef0;display:block}
.hero-card-id{text-align:center;padding:var(--s5) var(--s2) var(--s4)}
.hero-card-id b{font-size:var(--t-lg);font-weight:300;letter-spacing:.45em;color:var(--title);padding-left:.45em}
.hero-card-id small{display:block;color:var(--muted);margin-top:var(--s2);font-size:var(--t-xs);
  font-weight:300;letter-spacing:.08em}
/* 浅底首屏上唯一的饱和色块，正好当 CTA 锚点 */
.hero-card-tel{display:flex;align-items:center;justify-content:center;gap:var(--s2);background:var(--accent);
  color:var(--primary);font-weight:500;font-size:14px;padding:13px;letter-spacing:.08em;transition:background .3s}
.hero-card-tel:hover{background:#d5b880}
.hero-card-tel svg{width:14px;height:14px}

/* 滚动提示：放右下角，避开首屏正文（居中会和「代表客户」那行撞上） */
.scroll-cue{position:absolute;right:var(--s7);bottom:var(--s5);display:flex;align-items:center;gap:var(--s3);
  color:var(--muted);font-size:10px;font-weight:400;letter-spacing:.35em;text-transform:uppercase}
.scroll-cue::after{content:"";width:44px;height:1px;
  background:linear-gradient(90deg,rgba(138,143,153,0.7),transparent)}

/* hero 变体 card（名片版） */
.hero-center{text-align:center;padding:var(--s9) var(--s7);max-width:860px;margin:0 auto}
.hero-center .hc-ava{width:160px;height:160px;object-fit:cover;margin:0 auto var(--s7);
  border:1px solid rgba(201,164,92,0.5);background:#edeef0}
.hero-center h1{font-size:var(--t-2xl)}
.hero-center .hero-stats-row,.hero-center .hero-acts{justify-content:center}
.hero-center .hero-stats-row{gap:var(--s9)}
.hero-center .tlist{text-align:left;max-width:420px;margin:0 auto var(--s7)}
.hero-center .mini-label{text-align:center}

/* hero 变体 stats（数据版） */
.hero-stats-grid{display:grid;grid-template-columns:1.5fr .9fr;gap:var(--s9);align-items:center;
  padding:var(--s8) var(--s7);width:100%;max-width:var(--maxw);margin:0 auto}
.hs-ava{width:64px;height:64px;object-fit:cover;vertical-align:middle;border:1px solid rgba(201,164,92,0.5);
  background:#edeef0;display:inline-block;margin-right:var(--s5)}
.hero-stats-panel{background:var(--paper);border:1px solid var(--rule);padding:var(--s8) var(--s7);
  display:grid;gap:var(--s6)}
.hero-stats-panel .hsp{display:flex;flex-direction:column;gap:var(--s3);
  border-bottom:1px solid var(--rule);padding-bottom:var(--s6)}
.hero-stats-panel .hsp:last-child{border-bottom:0;padding-bottom:0}
.hero-stats-panel b{color:var(--title);font-size:var(--t-2xl);font-weight:300;letter-spacing:.04em;line-height:1.1}
.hero-stats-panel span{color:var(--muted);font-size:var(--t-xs);font-weight:400;letter-spacing:.2em}

/* 内页页头带：与首屏同源的主色雾渐变 + 大字重 300 标题 —— 全站排版语言统一的关键。
   问答/研究/案例/联系/关于/详情页共用（partials.pageHead），别再让内页从一块白板开场。 */
.page-head{background:linear-gradient(180deg,#e7e9ec 0%,var(--paper) 100%);position:relative;
  padding:var(--s6) 0 var(--s4)}
.ph-title{color:var(--title);font-size:var(--t-2xl);font-weight:300;line-height:1.35;letter-spacing:.1em;
  margin:var(--s5) 0 var(--s4)}
.ph-desc{color:var(--text2);margin:0;max-width:var(--measure);line-height:1.9}
.ph-desc + .ph-desc{margin-top:var(--s4)}
.page-head+.section{padding-top:var(--s4)}
/* 详情页页头（文章/案例）：窄栏居中，与 .doc 正文同宽 */
.doc-head{max-width:var(--measure);margin:0 auto;position:relative}
.doc-head h1{color:var(--title);font-size:var(--t-xl);font-weight:300;line-height:1.6;letter-spacing:.05em;
  margin:var(--s5) 0 var(--s4)}
.doc-head .meta,.doc-head .tags{color:var(--muted);font-size:var(--t-sm);font-weight:300;letter-spacing:.08em}
.doc-head .tags span+span::before{content:"·";margin:0 var(--s3);color:var(--ruleSoft)}

/* generic section：全站统一 --s8（2026-07-18 首页也从 --s10 收紧——客户点名 01–04 区块间太松散） */
.section{padding:var(--s8) 0}
/* 首屏名片紧接 01 执业经验：这一处上距再收一档（.hero 只有首页在用） */
.hero+.section{padding-top:var(--s5)}
.section.alt{background:var(--paper2)}
.grid{display:grid;gap:var(--s5)}
.g-serv{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.g-card{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.serv{background:var(--paper);border:1px solid var(--cardBd);box-shadow:var(--cardShadow);border-radius:var(--radius);padding:var(--s7) var(--s6);transition:border-color .3s}
.serv:hover{border-color:rgba(15,35,64,0.4)}
.serv .no{color:var(--accent);font-size:var(--t-sm);font-weight:300;letter-spacing:.1em}
.serv h3{color:var(--title);font-size:var(--t-md);font-weight:500;margin:var(--s3) 0 0}

/* 卡片 */
.card{background:var(--paper);border:1px solid var(--cardBd);box-shadow:var(--cardShadow);border-radius:var(--radius);padding:var(--s7) var(--s6);display:flex;
  flex-direction:column;gap:var(--s4);transition:border-color .3s}
.card:hover{border-color:rgba(15,35,64,0.4)}
.card .cat{color:var(--accentDeep);font-size:var(--t-xs);font-weight:500;letter-spacing:.2em;text-transform:uppercase}
.card h3{color:var(--title);font-size:19px;font-weight:500;margin:0;line-height:1.65;letter-spacing:.02em}
.card .tags{color:var(--muted);font-size:var(--t-sm);font-weight:300;letter-spacing:.04em}
.card .meta{color:var(--muted);font-size:var(--t-sm);font-weight:300;letter-spacing:.04em}
.card .more{margin-top:auto;padding-top:var(--s4);color:var(--text2);font-size:var(--t-sm);font-weight:400;
  display:inline-flex;align-items:center;gap:var(--s2);letter-spacing:.06em;transition:color .3s}
.card .more svg{width:14px;height:14px;transition:transform .3s}
.card:hover .more{color:var(--primary)}
.card:hover .more svg{transform:translateX(5px)}
/* 首页问答类目卡：不做空盒子，放 2 条真实问题预览 */
.card .qlist{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.card .qlist li{padding:var(--s3) 0;border-bottom:1px solid var(--rule);color:var(--text2);
  font-size:var(--t-sm);font-weight:300;line-height:1.8;letter-spacing:.02em;
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis}

/* 研究列表：行式（官网 vs 小程序统一观感）——一行一篇，不堆大盒子，便于连续翻看 */
.art-rows{display:flex;flex-direction:column}
/* 置顶标签：金底白字小药丸，行式/卡片/详情页三处复用 */
.pin{display:inline-block;margin-right:var(--s3);padding:2px 10px;border-radius:999px;background:var(--accent);color:#fff;font-size:var(--t-xs);font-weight:500;letter-spacing:.12em;vertical-align:middle;line-height:1.9}
.art-row{display:flex;align-items:center;gap:var(--s5);padding:var(--s5) var(--s2);
  border-bottom:1px solid var(--rule);text-decoration:none;transition:background .25s}
.art-row:hover{background:var(--paper2)}
.art-row-main{flex:1;min-width:0}
.art-row-title{color:var(--title);font-size:18px;font-weight:500;margin:0;line-height:1.6;letter-spacing:.02em}
.art-row .meta{color:var(--muted);font-size:var(--t-sm);font-weight:300;letter-spacing:.04em;margin-top:var(--s2)}
.art-row-arrow{color:var(--muted);flex:none;display:inline-flex;transition:transform .3s,color .3s}
.art-row-arrow svg{width:18px;height:18px;transition:transform .3s}
.art-row:hover .art-row-arrow{color:var(--primary)}
.art-row:hover .art-row-arrow svg{transform:translateX(4px)}

/* intro / cream */
.intro{display:grid;grid-template-columns:1fr 1fr;gap:var(--s10);align-items:center}
.intro p{color:var(--text2);line-height:2.1}
.cream{background:var(--cream);border:1px solid var(--creamBorder);border-left:2px solid var(--accent);
  padding:var(--s8);color:var(--creamText)}
.cream .quote{font-size:var(--t-md);font-weight:300;margin:var(--s5) 0 0;line-height:2.1;letter-spacing:.04em}
/* 执业理念（home.philosophy）：愿景/使命/价值观 各一行，「：」前的词加重 */
.cream .phi{margin:var(--s4) 0 0;font-size:var(--t-base);line-height:1.9}
.cream .phi b{font-weight:500;color:var(--tagText);margin-right:var(--s3)}
/* 执业身份：同样去药丸，改一行弱化文本 */
.creds{margin-top:var(--s6);color:var(--muted);font-size:var(--t-sm);font-weight:300;
  line-height:2;letter-spacing:.06em}

/* about */
.about-head{display:grid;grid-template-columns:340px 1fr;gap:var(--s8);align-items:start}
.about-photo{border:1px solid var(--rule);overflow:hidden}
.about-photo img{width:100%;aspect-ratio:3/4;object-fit:cover}
.about-name{color:var(--title);font-size:var(--t-xl);font-weight:300;letter-spacing:.16em;margin:var(--s5) 0 var(--s4)}
.about-title{color:var(--accentDeep);font-size:var(--t-sm);font-weight:500;letter-spacing:.2em;margin:0 0 var(--s6)}
.about-head p{color:var(--text2);line-height:1.9}
.about-acts{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s6)}
.panel{background:var(--paper);border:1px solid var(--rule);padding:var(--s7);margin-top:var(--s5)}
.panel h3{color:var(--title);font-size:19px;font-weight:500;margin:0 0 var(--s6);letter-spacing:.06em;
  display:flex;align-items:center;gap:var(--s3)}
.panel h3::before{content:"";width:2px;height:16px;background:var(--accent)}
.li{list-style:none;margin:0;padding:0}
.li li{padding:var(--s2) 0 var(--s2) var(--s5);border-bottom:1px solid var(--ruleSoft);position:relative;
  color:var(--text);font-weight:300;letter-spacing:.04em}
.li li:last-child{border-bottom:0}
.li li::before{content:"";position:absolute;left:0;top:18px;width:8px;height:1px;background:var(--accent)}
.awards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--s4)}
.award{background:var(--cream);border-left:1px solid var(--accent);padding:var(--s5)}
.award p{margin:0 0 var(--s3);color:var(--creamText);font-size:14px;font-weight:300;line-height:1.95}
.award .src{color:var(--tagText);font-size:var(--t-sm);font-weight:500;letter-spacing:.08em}
.books{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:var(--s5)}
.book{text-align:center}
.book img{width:100%;aspect-ratio:5/7;object-fit:cover;border:1px solid var(--rule)}
.book span{display:block;margin-top:var(--s3);color:var(--text2);font-size:var(--t-sm);font-weight:300}
.team-photo{width:100%;border:1px solid var(--rule);margin-bottom:var(--s5)}

/* 受保护图片（个人/团队照片）：禁拖拽 / 长按 / 右键另存的兜底手段（非绝对防护，截图/开发者工具仍可绕过）*/
.no-save{-webkit-user-drag:none;-khtml-user-drag:none;-moz-user-drag:none;-o-user-drag:none;user-drag:none;
  -webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:none;-webkit-touch-callout:none}

/* FAQ */
.faq-list{max-width:var(--measure);margin:0 auto;border-top:1px solid var(--rule)}
.faq-item{border-bottom:1px solid var(--rule)}
.faq-item summary{cursor:pointer;list-style:none;padding:var(--s5) var(--s7) var(--s5) 0;font-weight:500;
  color:var(--title);font-size:16px;position:relative;line-height:1.75;letter-spacing:.02em;transition:color .3s}
.faq-item summary:hover{color:var(--primary)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";position:absolute;right:0;top:var(--s5);color:var(--accent);
  font-size:var(--t-lg);font-weight:300;line-height:1.4;transition:transform .3s}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-a{padding:0 var(--s7) var(--s6) 0;color:var(--text2);line-height:2.1;font-weight:300}
.faq-more{text-align:center}

/* 执业经验（首页）：横排标签 + 共用详情面板——5 条标题一行看全，点标签切详情（金色下划线选中态，
   同 .filter-pill 语言）。无 JS 时（html:not(.js)）所有面板依次展开、面板前用 data-title 补标题行 */
.expt{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.expt-tab{position:relative;background:none;border:0;font-family:inherit;text-align:left;cursor:pointer;
  display:flex;flex-direction:column;gap:var(--s2);padding:var(--s5) var(--s5) var(--s5) 0}
.expt-tab .no{color:var(--accent);font-size:var(--t-xs);font-weight:300;letter-spacing:.1em}
.expt-t{color:var(--text2);font-size:var(--t-md);font-weight:400;letter-spacing:.08em;transition:color .3s}
.expt-tab:hover .expt-t{color:var(--primary)}
.expt-tab.active .expt-t{color:var(--title);font-weight:500}
.expt-tab.active::after{content:"";position:absolute;left:0;right:var(--s5);bottom:-1px;height:2px;
  background:var(--accent)}
.expt-pane{display:none;padding-top:var(--s6)}
.expt-pane.active{display:block}
.expt-pane p{margin:0 0 var(--s4);color:var(--text2);font-weight:300;line-height:1.95;max-width:var(--measure)}
.expt-pane p:last-child{margin-bottom:0}
.expt-pane .law{color:var(--accentDeep);font-weight:500}
/* 无 JS 兜底：标签失去切换能力，改为全部面板依次展开（标题行由 data-title 补出） */
html:not(.js) .expt-pane{display:block;padding-top:var(--s5)}
html:not(.js) .expt-pane::before{content:attr(data-title);display:block;color:var(--title);
  font-size:var(--t-md);font-weight:500;letter-spacing:.08em;margin-bottom:var(--s3)}

/* 类目筛选控件（问答页 / 案例页共用）：文字型 + 金色下划线选中态，
   与小程序 .pill/.pill-on 同款、与 .expt-tab 同一套语言；弃用胶囊药丸。
   无 JS 时所有内容默认可见（不加 hidden），筛选只是增强。 */
.filters{display:flex;flex-wrap:wrap;gap:var(--s6);margin-bottom:var(--s4);
  border-bottom:1px solid var(--rule)}
.filter-pill{border:0;background:none;color:var(--muted);padding:var(--s2) 0;font-size:14px;
  font-weight:400;font-family:inherit;cursor:pointer;letter-spacing:.06em;line-height:1.5;
  border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .3s,border-color .3s}
.filter-pill:hover{color:var(--title)}
.filter-pill.active{color:var(--title);border-bottom-color:var(--accent);font-weight:500}

/* 我与亚运：媒体行（首页区块与关于页 panel 共用）。视频与图片同走直角细线框语言 */
.ag-media{margin-top:var(--s7)}
.panel .ag-media{margin-top:var(--s5)}
.ag-video{width:100%;max-width:var(--measure);display:block;background:var(--primary);border:1px solid var(--rule)}
.ag-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--s5);margin-top:var(--s5)}
.ag-item{margin:0;background:var(--paper);border:1px solid var(--rule);padding:var(--s3)}
/* 四张证书/照片比例不一（0.667~0.741），不定框高时每张图高度不同、figcaption 就错行。
   固定 7:10 竖版框 + contain（证书不能裁切），图注即可齐平；letterbox 空隙最多约 5%。 */
.ag-item img{width:100%;aspect-ratio:7/10;object-fit:contain;display:block;background:#edeef0;cursor:zoom-in}
.ag-item figcaption{margin-top:var(--s3);color:var(--text2);font-size:var(--t-sm);font-weight:300;
  letter-spacing:.06em;text-align:center}
.ag-intro{color:var(--text2);max-width:var(--measure)}

/* 媒体报道 */
.media-panel{margin-top:var(--s8)}
.media-list{display:flex;flex-direction:column;gap:var(--s4);margin-top:var(--s5)}
.media-link{display:block;color:var(--text);font-size:var(--t-base);font-weight:300;line-height:1.8;
  padding:var(--s3) 0;border-bottom:1px solid var(--rule);transition:color .2s}
.media-link:hover{color:var(--primary)}
.media-link:last-child{border-bottom:0}

/* 服务内容 / 亮点成果（与媒体报道同排版：字重300、行高1.8，主题词加粗） */
.sc-panel{margin-top:var(--s8)}
.sc-list{margin-top:var(--s5)}
.sc-item{color:var(--text);font-size:var(--t-base);font-weight:300;line-height:1.8;
  padding:var(--s3) 0;border-bottom:1px solid var(--rule);letter-spacing:.04em}
.sc-item:last-child{border-bottom:0}
.sc-title{font-weight:600;color:var(--title);margin-right:var(--s2)}
.sc-desc{font-weight:300}

/* 工作合影 */
.group-panel{margin-top:var(--s8)}
.gp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--s5);margin-top:var(--s5)}
.gp-item{margin:0;background:var(--paper);border:1px solid var(--rule);padding:var(--s3);aspect-ratio:4/3;overflow:hidden}
.gp-item img{width:100%;height:100%;display:block;object-fit:cover;background:#edeef0;cursor:zoom-in}
.gp-item figcaption{margin-top:var(--s3);color:var(--text2);font-size:var(--t-sm);font-weight:300;
  letter-spacing:.06em;text-align:center}

/* 灯箱：点证书/合影看大图。深底属「CTA/页脚」之外的第五处深色，但它是临时浮层不算版面配色。
   整块由 JS 建出来，禁用 JS 时不存在，图片退化为普通静态图。 */
.lb{position:fixed;inset:0;z-index:200;display:none;background:rgba(26,42,68,0.94);
  align-items:center;justify-content:center;padding:var(--s6)}
.lb.open{display:flex}
.lb img{max-width:100%;max-height:calc(100vh - var(--s10));object-fit:contain;display:block}
.lb-cap{position:absolute;left:0;right:0;bottom:var(--s6);text-align:center;color:rgba(255,255,255,0.72);
  font-size:var(--t-sm);font-weight:300;letter-spacing:.06em}
.lb-btn{position:absolute;background:none;border:0;color:rgba(255,255,255,0.72);cursor:pointer;
  font-size:var(--t-2xl);font-weight:300;line-height:1;padding:var(--s3);transition:color .2s}
.lb-btn:hover{color:#fff}
.lb-x{top:var(--s5);right:var(--s5)}
.lb-p{left:var(--s3)}
.lb-n{right:var(--s3)}
.lb-btn[hidden]{display:none}

/* 搜索栏：整行圆角矩形框，替代原筛选标签栏（方案A） */
.search-bar{display:flex;align-items:center;gap:8px;margin-bottom:var(--s4);padding:0 4px}
.search-ico{color:var(--accent);flex-shrink:0}
.art-search{display:block;flex:1 1 auto;width:auto;box-sizing:border-box;border:1px solid var(--rule);
  border-radius:8px;padding:9px 16px;font-size:13px;font-family:inherit;color:var(--title);background:transparent}
.art-search:focus{outline:none;border-color:var(--accent)}
.art-none{margin-top:var(--s4);color:var(--muted);font-size:14px}

/* 执业证号（律协要求显著标注律所全称 + 证号）*/
.license{margin-top:var(--s6);color:var(--muted);font-size:var(--t-sm);font-weight:300;letter-spacing:.06em;
  border-left:1px solid var(--rule);padding:var(--s1) 0 var(--s1) var(--s4);display:inline-block;line-height:1.9}

/* 问答页（列表信息密度比首页 FAQ 高：组间距与题目行距都收一档） */
.qa-group{margin-top:var(--s5)}
.qa-group .faq-item summary{padding:var(--s4) var(--s7) var(--s4) 0}
.qa-group .faq-item summary::after{top:var(--s4)}
.qa-group .faq-a{line-height:1.9;padding-bottom:var(--s5)}
.qa-cat{color:var(--title);font-size:var(--t-lg);font-weight:400;margin:0 0 var(--s5);
  padding-left:var(--s4);border-left:2px solid var(--accent);display:flex;align-items:baseline;gap:var(--s4);
  letter-spacing:.1em}
.qa-cat span{color:var(--muted);font-size:var(--t-sm);font-weight:300;letter-spacing:.1em}
.qa-group .faq-list{max-width:none}
.qa-group .faq-a p{margin:0 0 var(--s3)}
.qa-group .faq-a p:last-child{margin-bottom:0}
.qa-group .faq-a strong{color:var(--title);font-weight:500}
.qa-group .faq-a .law{color:var(--accentDeep);font-weight:500}
.qa-group .faq-a blockquote{margin:var(--s4) 0;background:var(--cream);border-left:2px solid var(--accent);
  padding:var(--s4) var(--s5);color:var(--creamText)}

/* article / case detail：标题/分类/日期都在 .doc-head 页头带里，这里只剩正文排版 */
.doc{max-width:var(--measure);margin:0 auto}
.doc h2{color:var(--title);font-size:var(--t-lg);font-weight:500;margin:var(--s7) 0 var(--s5);
  padding-left:var(--s4);border-left:2px solid var(--accent);letter-spacing:.06em}
.doc h2:first-child{margin-top:0}
.doc p{margin:var(--s4) 0;color:var(--text);font-size:16px;font-weight:300;line-height:1.95}
.doc .law{color:var(--accentDeep);font-weight:500}
.doc blockquote{margin:var(--s6) 0;background:var(--cream);border-left:2px solid var(--accent);
  padding:var(--s5) var(--s6);color:var(--creamText)}
.desens{margin-top:var(--s7);color:var(--muted);font-size:var(--t-sm);font-weight:300;
  border-top:1px solid var(--rule);padding-top:var(--s5);line-height:1.95}
.back{display:inline-flex;align-items:center;gap:var(--s2);margin-top:var(--s8);color:var(--text2);
  font-size:var(--t-sm);letter-spacing:.06em}
.back:hover{color:var(--primary)}
.back svg{width:14px;height:14px;transform:rotate(180deg)}

/* 文章详情来源声明 + 查看原文：与小程序 research/detail 的 origin-line 同源（仅当 md 填了 sourceUrl） */
.doc-origin{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3) var(--s6);
  max-width:var(--measure);margin:var(--s4) auto 0;padding:var(--s5) var(--s6);
  background:var(--cream);border:1px solid var(--creamBorder);border-left:2px solid var(--accent);
  text-decoration:none;transition:border-color .25s}
.doc-origin:hover{border-color:var(--accent)}
.doc-origin-src{color:var(--creamText);font-size:var(--t-sm);font-weight:400;letter-spacing:.03em}
.doc-origin-act{margin-left:auto;color:var(--text2);font-size:var(--t-sm);
  display:inline-flex;align-items:center;gap:var(--s2)}
.doc-origin-act strong{color:var(--primary);font-weight:600}
.doc-origin-act svg{width:14px;height:14px;transform:rotate(180deg)}

/* 公众号卡片（研究列表页顶部） */
.cream.official{display:flex;gap:var(--s7);align-items:center;margin-bottom:var(--s7);padding:var(--s6) var(--s7)}
/* 二维码对齐联系页 .qr img 的 170px（2026-07-18 客户点名原来太小） */
.cream.official img{width:170px;height:170px;object-fit:contain;background:#fff;padding:var(--s2);flex:none}
.cream.official .quote{margin-top:var(--s3);font-size:var(--t-base);line-height:1.95}

/* contact：行式（与小程序 contact 的 .hc-row 同源观感）——一行一项，标签在左、内容在右 */
.contact-rows{border-top:1px solid var(--rule)}
.co-row{display:flex;align-items:baseline;gap:var(--s6);padding:var(--s5) var(--s2);
  border-bottom:1px solid var(--rule)}
.co-row .k{color:var(--muted);font-size:var(--t-xs);font-weight:500;letter-spacing:.24em;
  flex:none;width:150px}
.co-row .v{color:var(--title);font-size:18px;font-weight:400;flex:1;word-break:break-all;
  letter-spacing:.04em;display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap}
.co-row .v a{color:var(--title)}
.co-row .v a:hover{color:var(--primary)}
/* 地址行导航按钮：金描边圆，点击拉起高德地图（与小程序 wx.openLocation 同源） */
.co-nav{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;flex:none;
  border:1px solid var(--accent);border-radius:50%;color:var(--accent);transition:background .25s,color .25s}
.co-nav:hover{background:var(--accent);color:#fff}
.co-nav svg{width:18px;height:18px}
@media (max-width:640px){
  .co-row{flex-direction:column;gap:var(--s3)}
  .co-row .k{width:auto}
}
.qr-row{display:flex;flex-wrap:wrap;gap:var(--s5);margin-top:var(--s6)}
.qr{background:var(--paper);border:1px solid var(--rule);padding:var(--s5);text-align:center;width:220px}
.qr img{width:170px;height:170px;object-fit:contain;margin:0 auto}
.qr span{display:block;margin-top:var(--s3);color:var(--text2);font-size:var(--t-sm);font-weight:300;letter-spacing:.08em}

/* —— 留白收紧（2026-07-18 二轮 + 2026-07-25 三轮）：内页页头与内容区间距再收，
   通用 .page-head / .page-head+.section 已收紧，about 页保持同值。 */
.p-about .page-head{padding-bottom:var(--s4)}
.p-about .page-head+.section{padding-top:var(--s4)}

/* CTA 通栏 */
.cta{background:var(--primary);color:#fff}
.cta .in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s8);
  padding:var(--s10) var(--s7);max-width:var(--maxw);margin:0 auto}
.cta h2{font-size:var(--t-xl);font-weight:300;margin:var(--s5) 0 var(--s3);letter-spacing:.1em}
.cta p{color:#adb4be;margin:0;font-size:14px;font-weight:300;letter-spacing:.06em}
.cta .eyebrow{color:#e1cda5}
.cta .eyebrow .cn{color:#9fa7b3}
.cta .acts{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s6)}
.cta-qr{display:flex;gap:var(--s4)}
.qrm{width:112px;background:#fff;padding:var(--s2);text-align:center}
.qrm img{width:100%;aspect-ratio:1;object-fit:contain;margin:0 auto}
.qrm span{display:block;margin-top:var(--s1);color:var(--title);font-size:var(--t-xs);font-weight:400;letter-spacing:.06em}

/* footer */
.site-footer{background:#0b192e;color:#adb4be}
/* .foot / .foot-legal 外面套的是 .wrap（已给左右内边距），这里只给上下 */
.foot{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:var(--s8);padding:var(--s9) 0 var(--s8)}
.foot b{color:#fff;font-size:var(--t-md);font-weight:400;letter-spacing:.16em}
.foot p{margin:var(--s3) 0 0;font-size:var(--t-sm);font-weight:300;line-height:1.95;color:#9fa7b3}
.foot a{color:#cacfd5}
.foot h4{color:#e1cda5;font-size:var(--t-xs);font-weight:500;letter-spacing:.28em;margin:0 0 var(--s5);
  text-transform:uppercase}
.foot .lk{display:flex;align-items:center;gap:var(--s2);font-size:var(--t-sm);font-weight:300;margin:var(--s3) 0;
  color:#adb4be;letter-spacing:.04em;transition:color .3s}
.foot .lk svg{width:14px;height:14px;opacity:.55}
.foot .lk:hover{color:var(--accent)}
.foot-legal{border-top:1px solid rgba(255,255,255,0.1);padding:var(--s5) 0;font-size:var(--t-xs);font-weight:300;
  color:#7b8696;line-height:1.95}
.beian{display:inline-block;margin-top:var(--s3);color:#adb4be;font-size:var(--t-xs);
  font-weight:300;letter-spacing:.04em;text-decoration:none;transition:color .3s}
.beian:hover{color:#fff}

/* 滚动淡入：仅在 JS 可用且用户没关动效时生效（无 JS 时元素默认可见，不会白屏） */
@media (prefers-reduced-motion:no-preference){
  .js .rv{opacity:0;transform:translateY(18px);transition:opacity .9s ease,transform .9s cubic-bezier(.22,.61,.36,1)}
  .js .rv.in{opacity:1;transform:none}
  .hero-main>*,.hero-card,.hero-center>*{animation:rise .9s cubic-bezier(.22,.61,.36,1) both}
  .hero-main>:nth-child(2),.hero-center>:nth-child(2){animation-delay:.08s}
  .hero-main>:nth-child(3),.hero-center>:nth-child(3){animation-delay:.16s}
  .hero-main>:nth-child(4),.hero-center>:nth-child(4){animation-delay:.24s}
  .hero-main>:nth-child(5),.hero-center>:nth-child(5){animation-delay:.32s}
  .hero-main>:nth-child(n+6),.hero-center>:nth-child(n+6){animation-delay:.4s}
  .hero-card{animation-delay:.2s}
  @keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
}

@media(max-width:1100px){
  .hero-grid,.hero-stats-grid{grid-template-columns:1fr;gap:var(--s7);padding:var(--s7) var(--s5)}
  /* 单列后形象照不能沉底：display:contents 把 hero-main 的子元素拆成网格项，用 order 把
     名片卡插到「资质行」与「数字/理念」之间——手机首屏姓名+照片都可见。gap 归零、间距靠各自 margin */
  .hero-grid{gap:0}
  .hero-grid .hero-main{display:contents}
  .hero-grid .hero-card{order:1;margin:var(--s7) auto 0;width:100%}
  .hero-grid .hero-stats-row,.hero-grid .hero-phi,.hero-grid .hero-clients{order:2}
  .hero{min-height:auto}
  .hero-card{max-width:320px}
  .hero h1{font-size:var(--t-2xl)}
  .hero-center{padding:var(--s8) var(--s5)}
  .hero-center h1{font-size:34px}
  .scroll-cue{display:none}
  .intro,.about-head{grid-template-columns:1fr;gap:var(--s7)}
  .about-photo{max-width:300px}
  .section{padding:var(--s7) 0}
  .wrap{padding:0 var(--s5)}
  .foot{grid-template-columns:1fr 1fr;padding:var(--s8) 0 var(--s6)}
  .cta .in{padding:var(--s9) var(--s5)}
}
@media(max-width:760px){
  /* 手机端不再有独立的下拉菜单：导航链接隐藏，统一走右侧抽屉（.nav-toggle 所有断点都在） */
  .js .nav{display:none}
  /* 无 JS 兜底：抽屉打不开，导航必须还能用 —— 把顶栏导航铺成头部下方的一行 */
  html:not(.js) .hd{flex-wrap:wrap;height:auto;padding-bottom:var(--s2)}
  html:not(.js) .nav{width:100%;justify-content:space-between;gap:var(--s3)}
  html:not(.js) .nav-toggle{display:none}
  .hd-cta{display:none}
  .drawer{padding:var(--s6) var(--s5)}
  .hero h1{font-size:38px;letter-spacing:.14em}
  .ph-title{font-size:30px}
  .page-head{padding:var(--s8) 0 var(--s7)}
  /* gap 收到 24px：390px 宽下三个数字才能排一行，否则末项孤行换行很难看 */
  .hero-stats-row{gap:var(--s5);padding:var(--s5) 0}
  .hero-stats-row b{font-size:var(--t-xl)}
  .sec-title{font-size:var(--t-lg)}
  .panel,.cream{padding:var(--s5)}
  .expt{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}
  .expt-tab{padding:var(--s4) var(--s4) var(--s4) 0}
  .cream.official{flex-direction:column;align-items:flex-start}
  .cta .in{flex-direction:column;align-items:flex-start;gap:var(--s7)}
  .foot{grid-template-columns:1fr;gap:var(--s6)}
}
@media(max-width:480px){
  /* 顶栏放不下律所全称（会折行顶乱高度），只留姓名 */
  .brand small{display:none}
}