/* ==========================================================================
   上海光盛大律师事务所 · 官网 Demo 第 2 轮
   设计令牌与全站样式
   ---------------------------------------------------------------------
   布局骨架：小米官网骨架（全幅色块 + 1226px 居中内容 + 大留白）
   配色：名片实测色（暖褐灰 #49403B / 中性深灰 #353841 / 弧线 #A1A1A1〔中性化〕）
   卡片：圆角 16px + 浅灰纯色填充 + 无边框无阴影 + 24px 真间距
   纹样：名片同心圆弧带（圆心在可见区之外；沿弧淡入 0.42→1.0；全站四处共用同一取景规则）
   ========================================================================== */

/* ---------- 1. 设计令牌 ---------- */
:root{
  /* 名片实测色 */
  --warm-900:#49403B;   /* Hero / 页脚底色 */
  --ink-900:#353841;    /* 主文字 / Logo 主色 / 主按钮 */
  --arc-dark:#A1A1A1;   /* 深底上的弧线（中性灰，按老板 2026-09-20 意见去米色调） */
  --arc-light:#463F37;  /* 浅底上的弧线（配合低透明度使用） */
  --accent:#01675E;     /* 强调色（老板 2026-09-20 指定）· 白字对比 6.77:1 · 仅用于浅底 */
  --accent-deep:#014A43;/* 强调色加深态（按钮/悬停）· 白字对比 10.19:1 */
  /* 强调色＝纯色填充、只做背景不上字体（老板 2026-09-20 晚：渐变太直接，去掉渐变） */
  /* 推导次级色 */
  --ink-700:#55585F;    /* 卡片上的次要文字（白底 7.3:1 / 卡底 6.5:1） */
  --warm-700:#6B5F56;   /* 正文次要色（白底 6.3:1 / 卡底 5.6:1） */
  --gray-500:#767676;   /* 白底次要小字（4.54:1，达标；勿用于卡底） */
  --gray-300:#C5C5C5;   /* 浅银灰 · 描边 / 图标 / 深底辅助文字（中性） */
  --bg-page:#A59A97;    /* 空白区（页面）底色 ← 老板 2026-09-20 指定（原为纯白） */
  --bg-alt:#C8C1BE;     /* 交替板块底色（同色系浅一档，仿苹果官网「白灰白灰」分区） */
  --on-page:#1A1A1A;    /* 底色上的小标题／正文（6.36:1） */
  --on-page-muted:#2A2D33; /* 底色上的次要文字（5.02:1） */
  --on-page-title:#FFFFFF; /* 底色上的大标题（2.74:1，见 NOTES 中的说明与备选） */
  --card:#FBFAFA;       /* 卡片填充：提亮至近白（2026-09-22 老板定，与页面底色拉开层次） */
  --card-hover:#F0EFEE; /* 卡片 hover 加深一阶 */
  --line:#DFDFDF;       /* 分隔线 */
  --paper:#FFFFFF;

  --wrap:1280px;
  --gut:24px;
  /* 圆角尺度（唯一合法取值集） */
  --r-card:16px;
  --r-btn:8px;
  --r-tag:6px;
  --r-xs:4px;
  /* 尺寸尺度：全站间距／内边距只取 8 的倍数，避免出现 28/44/58 这类散值 */
  --sp-1:8px;  --sp-2:16px; --sp-3:24px; --sp-4:32px;
  --sp-5:40px; --sp-6:48px; --sp-7:64px; --sp-8:96px;
  --phero-h:256px;   /* 内页页头带统一高度（原三页各不相同：257 / 228 / 228） */
  --hd-h:64px;       /* 常驻页头高度：锚点跳转必须预留，否则目标区被页头盖住 */
  /* 字体栈（2026-09-20 老板要求：贴近苹果、且只用免费/系统字体）
     苹果官网正文用 SF Pro，中文用苹方——均为系统字体。此处按"系统优先"排序，
     在 Apple 设备上即渲染为 SF ＋ 苹方（与苹果官网一致），其他平台回落到
     Segoe UI／微软雅黑／思源黑体／Noto Sans SC。全程不内嵌字体文件，无商业授权风险。 */
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue",Helvetica,
         "PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC","Source Han Sans SC",Arial,sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- 2. 基础 ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font);
  font-size:17px;
  font-weight:400;
  line-height:1.72;
  color:var(--ink-900);
  background:var(--bg-page);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
h1,h2,h3,h4{margin:0;font-weight:600;line-height:1.28;letter-spacing:-.01em}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
/* 锚点跳转定位：预留常驻页头高度 + 24px 间距，避免目标区被页头遮住 */
[id]{scroll-margin-top:calc(var(--hd-h) + var(--sp-3))}
/* 深底（Hero／页头带／页脚）上强调色对比仅 1.49:1，焦点环改白 */
.hero :focus-visible,.phero :focus-visible,.ft :focus-visible{outline-color:#fff}

.wrap{width:min(100% - var(--gut) * 2, var(--wrap));margin-inline:auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ---------- 3. 按钮 ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:46px;padding:0 32px;
  border:1px solid transparent;border-radius:var(--r-btn);
  font-size:15px;font-weight:400;letter-spacing:.03em;
  transition:background-color .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease);
}
.btn-ink{background:var(--ink-900);color:var(--paper)}
.btn-line{border-color:var(--gray-300);color:var(--ink-900)}
.btn-light{background:var(--paper);color:var(--ink-900)}
.btn-ghost{border-color:rgba(255,255,255,.42);color:#fff}

/* ---------- 4. 页头（导航常驻，≤640px 才切汉堡） ---------- */
.hd{
  position:sticky;top:0;z-index:60;
  /* 毛玻璃：半透明白底 ＋ 背景模糊，页面下滑时内容透出 */
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  border-bottom:.5px solid rgba(0,0,0,.08);
}
.hd-in{display:flex;align-items:center;gap:32px;height:64px}
.brand{flex:0 0 auto}
.brand img{height:42px;width:auto}
.nav{display:flex;align-items:center;gap:32px;margin-left:auto}
.nav a{
  position:relative;padding:6px 0;font-size:16px;
  border-bottom:1.5px solid transparent;
  transition:border-color .16s var(--ease),color .16s var(--ease);
}
.nav a[aria-current="page"]{border-bottom-color:var(--ink-900);font-weight:600}
.hd-act{display:flex;align-items:center;gap:24px;flex:0 0 auto}
.hd-tel{display:flex;align-items:baseline;gap:8px;line-height:1}
.hd-tel span{font-size:12px;color:var(--gray-500);letter-spacing:.08em}
.hd-tel b{font-size:16px;font-weight:600;letter-spacing:.02em}
.burger{display:none;width:26px;height:18px;position:relative;margin-left:auto}
.burger span{
  position:absolute;left:0;width:100%;height:1.5px;background:var(--ink-900);
  transition:transform .2s var(--ease),opacity .2s var(--ease);
}
.burger span:nth-child(1){top:0}
.burger span:nth-child(2){top:8px}
.burger span:nth-child(3){top:16px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* ---------- 5. Hero（名片纹样 + 名片配色） ---------- */
.hero{
  position:relative;overflow:hidden;
  background:var(--warm-900);
  color:#fff;
}
/* ---------- 5. 弧线纹样：全站统一取景规则 ----------
   首页 Hero 与内页页头带共用同一枚 pattern.svg、同一缩放与同一取景偏移，
   因此弧线大小、淡入起点、亮度的视觉表现完全一致——只有可见纵向高度不同。
   缩放按元素宽度计（104% auto），而非元素高度，元素越矮只是露出更少，
   不会改变弧线密度与淡入位置。 */
.hero::before,
.phero::before{
  content:"";position:absolute;inset:0;
  background-image:url("pattern.svg?v=20260922f");
  /* 2026-09-22 取景右移下移：图案是可平铺的，必须保持覆盖（缩小平铺会露出接缝／矩形边界），
     故用「整体右移下移」的方式让弧线退向右侧，左侧留给文字 */
  background-size:104% auto;
  background-position:right -13vw top -1vw;
  pointer-events:none;
}
/* 左侧文字区压暗渐变，保证标语可读、纹样向右下让位（Hero 与内页页头同处理） */
.hero::after,
.phero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg, var(--warm-900) 22%, rgba(73,64,59,.82) 46%, rgba(73,64,59,0) 74%);
  pointer-events:none;
}
.hero-in{position:relative;z-index:2;padding:var(--sp-8) 0}
.hero h1{
  font-size:clamp(44px,6vw,72px);
  line-height:1.14;letter-spacing:-.02em;margin-bottom:32px;
}
.hero-lead{
  max-width:520px;font-size:17px;line-height:1.85;
  color:rgba(255,255,255,.78);
}
.hero-act{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-5)}

/* ---------- 6. 区块通用 ---------- */
.sec{padding:var(--sp-6) 0}
/* 交替板块：与页面底色相邻区形成明暗对比，增强分区感（仿苹果官网白灰交替） */
.sec-alt{background:var(--bg-alt)}
.sec-head{max-width:700px;margin-bottom:var(--sp-6)}
.sec-head-row{
  display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-4);
  max-width:none;margin-bottom:var(--sp-5);
}
.eyebrow{
  font-size:12px;letter-spacing:.24em;color:var(--on-page-muted);
  text-transform:uppercase;margin-bottom:16px;
}
.sec-title{font-size:clamp(36px,4.6vw,60px);line-height:1.12;margin-bottom:20px;color:var(--on-page)}
.sec-head-row .sec-title{margin-bottom:0}
/* 内页（带页头带的页面）：板块标题降一档，与页头大标题拉开层次 */
.phero ~ .sec .sec-title{font-size:clamp(28px,3.4vw,44px)}
.sec-desc{font-size:17px;color:var(--on-page-muted);line-height:1.8;max-width:680px}
/* 「查看更多」：右侧对齐，深色文字 + 箭头，悬停下划线（老板 2026-09-20 指定样式） */
.sec-more{
  flex:0 0 auto;align-self:flex-end;
  display:inline-flex;align-items:center;gap:var(--sp-1);
  font-size:17px;color:var(--on-page);
  padding-bottom:2px;border-bottom:1px solid transparent;
  transition:border-color .18s var(--ease);
}
.sec-more span{transition:transform .18s var(--ease)}

/* ---------- 7. 律所动态 · 横向滑动栏 ---------- */
.rail-wrap{position:relative}
.rail{
  display:flex;gap:var(--sp-3);
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;
  padding:4px 4px 16px;
  scrollbar-width:thin;
  scrollbar-color:var(--gray-300) transparent;
}
.rail::-webkit-scrollbar{height:5px}
.rail::-webkit-scrollbar-thumb{background:var(--gray-300);border-radius:var(--r-xs)}
.rail::-webkit-scrollbar-track{background:transparent}
.ngrid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-3)}
.ngrid .ncard{flex:none;width:auto}
.ncard{
  display:flex;flex-direction:column;
  flex:0 0 420px;scroll-snap-align:start;
  background:var(--card);border-radius:var(--r-card);
  overflow:hidden;
  transition:background-color .2s var(--ease);
}
.ncard:focus-visible{outline:none}
/* 选中只渲染卡片下半部（上半部＝封面位，将来放图片，不渲染强调色） */
.ncard:focus-visible .nbody{background:var(--accent);color:#fff}
.ncover{
  position:relative;aspect-ratio:16/9.2;flex:none;
  background:var(--card) url("pattern-light.svg?v=20260922f") right bottom / cover no-repeat;
  border-bottom:1px solid var(--line);
  transition:border-color .2s var(--ease);
}
.ncover i{
  position:absolute;left:30px;bottom:20px;
  font-style:normal;font-weight:600;font-size:48px;letter-spacing:.02em;
  color:var(--gray-300);
}
/* 封面配图：铺满封面区（有图时盖住纹样背景） */
.ncover img{
  position:absolute;inset:0;display:block;
  width:100%;height:100%;object-fit:cover;
}
.nbody{padding:var(--sp-4);flex:1}
.nmeta{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.ndate{font-size:14px;color:var(--ink-700);letter-spacing:.06em;font-variant-numeric:tabular-nums;transition:color .2s var(--ease)}
.ntag{
  font-size:13px;color:var(--ink-700);
  border:1px solid var(--gray-300);border-radius:var(--r-tag);
  padding:2px 8px;line-height:1.5;
  transition:color .2s var(--ease),border-color .2s var(--ease);
}
.ntitle{font-size:21px;font-weight:600;line-height:1.4;margin-bottom:12px}
.nsum{font-size:15px;line-height:1.8;color:var(--warm-700);transition:color .2s var(--ease)}
/* 动态卡选中态：卡内文字转白，强调色只作背景 */
.ncard:focus-visible .ndate{color:rgba(255,255,255,.82)}
.ncard:focus-visible .ntag{color:#fff;border-color:rgba(255,255,255,.5)}
.ncard:focus-visible .nsum{color:rgba(255,255,255,.82)}
.ncard:focus-visible .ncover{border-bottom-color:rgba(255,255,255,.22)}
.ncard:focus-visible .ncover i{color:rgba(255,255,255,.42)}

/* ---------- 8. 业务领域 · 圆角序号卡 ----------
   默认全部为浅灰（不以深色卡体现优先级）；**选中（hover / 键盘聚焦）时**整卡换为强调色，
   卡内文字转白。强调色只用在浅底上——它在品牌深褐 #49403B 上对比度仅 1.49:1，在深底上等于看不见。 */
.pgrid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:var(--sp-3);
}
.pcard{
  display:block;background:var(--card);
  border-radius:var(--r-card);
  padding:var(--sp-5);
  transition:background-color .2s var(--ease),color .2s var(--ease);
}
.pcard:focus-visible{background:var(--accent);color:#fff;outline:none}
.pcard .idx{
  display:block;font-size:14px;letter-spacing:.12em;color:var(--ink-700);
  margin-bottom:32px;
  transition:color .2s var(--ease);
}
.pcard h3{font-size:24px;margin-bottom:16px}
.pcard p{font-size:15px;line-height:1.8;color:var(--warm-700);transition:color .2s var(--ease)}
.pcard .more{
  display:inline-block;margin-top:24px;font-size:15px;color:var(--ink-900);
  border-bottom:1px solid var(--gray-300);padding-bottom:2px;
  transition:border-color .18s var(--ease),color .2s var(--ease);
}
/* 选中态：白 78%（实测 4.81:1）；72% 仅 4.31:1，不达标注 */
.pcard:focus-visible .idx{color:rgba(255,255,255,.78)}
.pcard:focus-visible p{color:rgba(255,255,255,.82)}
.pcard:focus-visible .more{color:#fff;border-bottom-color:rgba(255,255,255,.45)}

/* ---------- 9. 律师团队 · 苹果式 4 列（末行居中） ---------- */
.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-3)}
/* 律师卡＝一张大卡片：上半部为头像位（浅色），下半部为简介（选中时上强调色） */
.tcard{display:flex;flex-direction:column;background:var(--card);border-radius:var(--r-card);overflow:hidden}
.tshot{
  /* 律师照片位：内含 <img class="tphoto">；照片缺失时由 JS 移除，露出姓名铭牌。
     照片规格：竖版 3:4 或 1:1，短边 ≥ 800px，JPEG，单张 ≤ 500KB，须清 EXIF。 */
  position:relative;overflow:hidden;
  aspect-ratio:1/1;
  background:var(--paper);            /* 头像位：比卡片亮一档，与简介区分开 */
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  border-bottom:1px solid var(--line);
  transition:border-color .2s var(--ease);
}
/* 律师照片：用真实 <img>（不用 CSS 自定义属性里的相对 URL ——
   自定义属性中的相对 URL 以「声明它的样式表」为基准解析，会解析成 assets/assets/… 而 404）。
   照片缺失时由 JS 移除该 img，自动露出姓名铭牌。 */
.tphoto{
  position:absolute;inset:0;display:block;
  width:100%;height:100%;object-fit:cover;object-position:center 22%;
}
.tshot i{
  font-style:normal;font-weight:400;color:var(--gray-300);
  font-size:clamp(52px,5.4vw,76px);line-height:1;letter-spacing:.04em;
}
/* 姓氏下的短分隔线，使占位块读作「铭牌」而非等待填充的空框 */
.tshot i::after{
  content:"";display:block;width:36px;height:1px;
  background:var(--gray-300);margin:16px auto 0;
}
/* 简介区：内容垂直居中，避免标签有无不一时下方留白 */
.tbody{padding:var(--sp-4);display:flex;flex-direction:column;justify-content:center;flex:1}
.tname{font-size:22px;margin-bottom:6px}
.tname em{font-style:normal;font-size:15px;font-weight:400;color:var(--gray-500);margin-left:8px}
.trole{font-size:16px;color:var(--warm-700);letter-spacing:.02em;margin-bottom:16px}
.ttags{display:flex;flex-wrap:wrap;gap:6px}
.ttag{
  font-size:13px;color:var(--ink-700);
  border:1px solid var(--line);border-radius:var(--r-tag);
  padding:4px 12px;line-height:1.5;
}
.tcard:focus-visible .tbody{background:var(--accent);color:#fff;outline:none}
.tcard:focus-visible .trole,
.tcard:focus-visible .tname em{color:rgba(255,255,255,.82)}
.tcard:focus-visible .ttag{color:#fff;border-color:rgba(255,255,255,.5)}
.tcard-join{background:var(--card)}
.tcard-join .tshot{background:transparent;border:1px dashed rgba(26,26,26,.28)}

.tcard-join .tshot i{font-size:14px;letter-spacing:.14em;color:var(--on-page-muted)}
.tcard-join .tshot i::after{display:none}


/* ---------- 9b. 律师卡·横向大卡（子页专用：左头像 ＋ 右介绍，尺寸统一） ---------- */
.tlist{display:flex;flex-direction:column;gap:var(--sp-3)}
.trow{
  display:grid;grid-template-columns:256px 1fr;align-items:stretch;
  min-height:256px;                       /* 统一高度，行行等大 */
  background:var(--card);border-radius:var(--r-card);overflow:hidden;
}
.trow .tshot{
  aspect-ratio:auto;height:100%;min-height:256px;position:relative;overflow:hidden;
  background:var(--paper);
  border-bottom:0;border-right:1px solid var(--line);
}
.trow .tbody{
  padding:var(--sp-5);display:flex;flex-direction:column;justify-content:center;
  gap:var(--sp-2);
}
.trow .tbio{font-size:16px;line-height:1.8;color:var(--warm-700)}
.trow .ttags{margin-top:var(--sp-1)}
/* 选中态：只有右侧介绍区上强调色，头像位不动 */
.trow:focus-visible .tbody{background:var(--accent);color:#fff;outline:none}
.trow:focus-visible .trole,
.trow:focus-visible .tname em,
.trow:focus-visible .tbio{color:rgba(255,255,255,.82)}
.trow:focus-visible .ttag{color:#fff;border-color:rgba(255,255,255,.5)}
/* 选中时去掉照片位与简介区之间的分隔线，避免强调色与照片间露出浅色缝 */
.trow:focus-visible .tshot,
.trow:active .tshot,
.trow.is-pressed .tshot{border-right-color:transparent}
.trow-join .tshot{background:transparent;border-right:1px dashed rgba(26,26,26,.28)}

/* ---------- 10. 关于我们（无分栏：正文 + 联系行） ---------- */
.about-prose{max-width:820px}
.about-prose .lead{font-size:19px;line-height:1.85;color:var(--on-page);margin-bottom:var(--sp-3)}
.about-prose p+p{margin-top:16px}
.about-prose p{font-size:17px;line-height:1.85;color:var(--on-page-muted)}
.contact-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-3);
  margin-top:var(--sp-6);
}
.citem{border-top:1px solid rgba(26,26,26,.18);padding-top:var(--sp-3)}
.citem h4{font-size:13px;font-weight:600;letter-spacing:.16em;color:var(--on-page-muted);margin-bottom:16px}
.citem p,.citem a{font-size:17px;line-height:1.85;color:var(--on-page)}
.citem a{border-bottom:1px solid var(--gray-300);transition:border-color .18s var(--ease)}

/* ---------- 11. 页脚（纹样楔形 + 浅色横排 Logo） ---------- */
.ft{
  position:relative;overflow:hidden;
  background:var(--warm-900);
  color:rgba(255,255,255,.74);
}
.ft::before{
  /* 与首页 Hero／内页页头带完全同源：同一枚 pattern.svg、同一缩放、同一取景偏移（满铺整块） */
  content:"";position:absolute;inset:0;
  background:url("pattern.svg?v=20260922f") right -2.78vw top -8.68vw / 104% auto no-repeat;
  pointer-events:none;
}
/* 左侧压暗渐变：与 Hero 同一处理，保证页脚文字压在弧线上仍可读 */
.ft::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg, var(--warm-900) 30%, rgba(73,64,59,.9) 52%, rgba(73,64,59,.55) 78%, rgba(73,64,59,.4) 100%);
  pointer-events:none;
}
.ft-in{position:relative;z-index:3;padding:var(--sp-8) 0;display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-5)}
/* 页脚精简：只保留 Logo（含律所中英文名）、版权与备案信息，单栏左对齐 */
.ft-bar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3) var(--sp-6)}
.ft-bar span{font-size:15px;color:rgba(255,255,255,.72)}
.ft-logo{display:block;height:54px;width:auto;margin-bottom:24px}
.ft p{font-size:15px;line-height:1.85;color:rgba(255,255,255,.6);max-width:300px}
.ft h4{font-size:13px;font-weight:600;letter-spacing:.14em;color:#fff;margin-bottom:16px}
.ft li{font-size:15px;line-height:2;color:rgba(255,255,255,.66)}
.ft li.ft-ind{padding-left:3.6em}
.ft a{border-bottom:1px solid transparent;transition:border-color .18s var(--ease)}
.ft-bar span{font-size:15px;color:rgba(255,255,255,.72)}

/* ---------- 12. 内页页头带（无面包屑） ---------- */
.phero{background:var(--warm-900);color:#fff;position:relative;overflow:hidden}
/* 纹样与压暗渐变见第 5 节「弧线纹样：全站统一取景规则」，与首页 Hero 同一套参数 */
.phero-in{
  position:relative;z-index:2;
  min-height:var(--phero-h);
  display:flex;flex-direction:column;justify-content:center;
  padding:var(--sp-6) 0;
}
.phero h1{font-size:clamp(36px,4.6vw,60px);line-height:1.12;margin-bottom:var(--sp-2)}
.phero p{font-size:15px;line-height:1.9;color:rgba(255,255,255,.72);max-width:620px}

/* ---------- 13. 内页：侧栏 + 卡片板块 ---------- */
.doc{display:grid;grid-template-columns:268px 1fr;gap:var(--sp-7);align-items:start}
.doc-side{position:sticky;top:96px}
.toc{display:flex;flex-direction:column;gap:4px}
.toc a{
  display:block;padding:12px 16px;
  font-size:16px;color:var(--on-page-muted);
  border-radius:var(--r-btn);
  transition:background-color .18s var(--ease),color .18s var(--ease);
}
.toc a:focus-visible{background:var(--accent);color:#fff}
/* 当前项不常驻强调色（老板 2026-09-20 晚）：只用不加粗以外的轻微提示，
   强调色仅在鼠标悬停／键盘聚焦时出现 */
.toc a[aria-current="true"]{color:var(--on-page);font-weight:600}
/* 主领域之间加一条内缩分隔线（左右各留 16px，避免通栏线的笨重感） */
.toc > a{position:relative}
.toc > a + a::before{
  content:"";position:absolute;left:16px;right:16px;top:0;height:1px;
  background:rgba(26,26,26,.10);
}
/* 子项与主项统一内边距，使侧栏各行间距一致；并缩进 2 个字符 */
.toc .toc-sub a{padding:12px 16px 12px calc(16px + 2em);font-size:14px}
.side-box{margin-top:var(--sp-4);padding:var(--sp-3);background:var(--card);border-radius:var(--r-card)}
.side-box h4{font-size:14px;margin-bottom:12px}
.side-box p{font-size:13px;line-height:1.85;color:var(--warm-700);margin-bottom:16px}
.side-box .btn{width:100%}

/* ---------- 14. 内页：业务板块卡片（与首页卡片同一语言） ---------- */
.bsec{
  background:var(--card);border-radius:var(--r-card);
  padding:var(--sp-6);
  scroll-margin-top:calc(var(--hd-h) + var(--sp-3));
}
.bsec+.bsec{margin-top:var(--sp-3)}
.bsec>*+*{margin-top:24px}
.bsec .sec-num{
  display:block;font-size:13px;letter-spacing:.18em;color:var(--ink-700);
  margin-bottom:16px;margin-top:0;
}
.bsec h2{font-size:clamp(26px,3vw,40px);line-height:1.2}
.bsec .lead+.notice{margin-top:var(--sp-5)}
.bsec .contact-grid{margin-top:var(--sp-6)}
.bsec h3{font-size:20px;margin-top:40px;margin-bottom:16px}
/* 子项小标题（服务内容／业务范围等）：此前无样式，与正文同大导致层级不清 */
.bsec h4{font-size:16px;font-weight:600;color:var(--ink-900);margin-top:32px;margin-bottom:12px}
/* 关于我们页：总所／分所小标题（与下方联系行收紧间距） */
.office-t{margin-top:var(--sp-6);margin-bottom:var(--sp-1)}
.office-t+.contact-grid{margin-top:var(--sp-1)}
.bsec p{font-size:17px;line-height:1.85;color:var(--warm-700)}
.bsec .lead{font-size:18px;line-height:1.85;color:var(--ink-900)}
.bsec ul{margin-top:16px}
.bsec ul li{
  position:relative;padding-left:24px;margin-bottom:12px;
  font-size:16px;line-height:1.8;color:var(--warm-700);
}
.bsec ul li::before{
  content:"";position:absolute;left:2px;top:.82em;
  width:5px;height:1px;background:var(--gray-500);
}
/* 其他业务子栏目：卡内分节 */
.subsec{padding-top:var(--sp-3);margin-top:var(--sp-3);border-top:1px solid var(--line);scroll-margin-top:calc(var(--hd-h) + var(--sp-3))}
.subsec:first-of-type{border-top:0;padding-top:0;margin-top:24px}
.subsec .sec-num{margin-bottom:8px}

/* ---------- 15. 待补充标记（零高饱和色下的替代方案） ---------- */
.notice{
  border:1px dashed rgba(26,26,26,.22);border-radius:var(--r-btn);
  background:var(--paper);padding:var(--sp-3);
}
.notice b{
  display:block;font-size:12px;font-weight:600;letter-spacing:.14em;
  color:var(--warm-700);margin-bottom:8px;
}
.notice p{font-size:13px;line-height:1.9;color:var(--warm-700)}
/* 卡片内的说明块保持白底，才能与 #F1F1F1 卡面分离 */

/* ---------- 16. 响应式 ---------- */
@media (max-width:1000px){
  .hd-in{gap:24px}
  .nav{gap:24px}
  .nav a{font-size:14px}
  .hd-tel{display:none}          /* ≤1000px 隐藏电话文字，保留导航 */
  .pgrid,.ngrid{grid-template-columns:repeat(2,1fr)}
  .tgrid{grid-template-columns:repeat(2,1fr)}
  .ft-bar{gap:var(--sp-2) var(--sp-4)}
  .doc{grid-template-columns:1fr;gap:40px}
  .doc-side{position:static}
  .toc{display:grid;grid-template-columns:repeat(2,1fr)}
  .toc .toc-sub{display:contents}
  .toc .toc-sub a{padding-left:calc(16px + 2em)}
  .side-box{margin-top:24px}
  .contact-grid{grid-template-columns:1fr;gap:0}
  .citem{padding:16px 0}
}
@media (max-width:640px){
  /* 仅真正窄屏才切汉堡 */
  :root{--gut:20px}
  .hd-in{height:62px;gap:16px}
  :root{--hd-h:62px}
  .brand img{height:38px}
  .burger{display:block}
  .nav{
    position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--paper);border-bottom:1px solid var(--line);
    padding:0 var(--gut);
    max-height:0;overflow:hidden;
    transition:max-height .26s var(--ease);
  }
  .nav.open{max-height:340px}
  .nav a{padding:16px 0;border-bottom:1px solid var(--line);font-size:15px}
  .nav a:last-child{border-bottom:0}
  .hd-act{display:none}
  .hero-in{padding:80px 0 80px}
  /* 手机端纹样：cover 按容器较大边缩放，两向都覆盖；⚠️ cover 模式下不可再加 position 偏移，
     否则图案被推出容器边界，露出的部分显示平铺的下一张图案 → 出现横向接缝 */
  .hero::before,
  .phero::before{background-size:cover;background-position:right top}
  .hero h1{font-size:32px}
  .hero-lead{font-size:15px}
  .hero-act .btn{flex:1 1 100%}
  .sec{padding:64px 0}
  .sec-head{margin-bottom:32px}
  .sec-head-row{flex-direction:column;align-items:flex-start;gap:12px}
  .ncard{flex-basis:280px}
  .ngrid{grid-template-columns:1fr}
  .trow{grid-template-columns:1fr}
  .trow .tshot{border-right:0;border-bottom:1px solid var(--line)}
  .tgrid{gap:32px}
  .pcard{padding:24px 24px}
  .phero-in{padding:40px 0 48px}
  .bsec{padding:32px 24px 32px}
  .ft-in{padding-top:48px}
  .ft-bar{flex-direction:column;align-items:flex-start}
  .toc{grid-template-columns:1fr}

  /* 板块标题深褐横带已移除（2026-09-22）：板块已有交替底色区分，无需再靠横带；
     原先配套的三条白字规则一并删除，标题改用深色以保证浅底上的可读性 */
  .sec-head-row .sec-title{margin-bottom:12px}
  .sec-head-row .sec-more{align-self:flex-start}

  /* --- 业务领域与律师团队改横向滑动（与律所动态同一套机制）---
     卡片宽 78%，右侧露出下一张边缘＝「可左右滑动」的视觉提示 */
  .pgrid,.tgrid{
    display:flex;gap:var(--sp-3);
    overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x proximity;
    padding:4px var(--gut) 16px;
    margin:0 calc(-1 * var(--gut));
    scrollbar-width:thin;scrollbar-color:var(--gray-300) transparent;
  }
  .pgrid .pcard,.tgrid .tcard{flex:0 0 78%;scroll-snap-align:start}
  .pgrid::-webkit-scrollbar,.tgrid::-webkit-scrollbar{height:5px}
  .pgrid::-webkit-scrollbar-thumb,.tgrid::-webkit-scrollbar-thumb{
    background:var(--gray-300);border-radius:var(--r-xs);
  }
}


/* ---------- 19. 分区域滚动呈现（渐进增强） ----------
   默认「全部可见」——只有 JS 存在时（html.js）才启用入场动画。
   这样：AI 爬虫不执行 JS 也能读到全部正文；禁用 JS 的用户不会看到空白。
   并尊重系统的"减少动效"设置。 */
@media (prefers-reduced-motion: no-preference){
  .js [data-reveal]{
    opacity:0;transform:translateY(24px);
    transition:opacity .6s var(--ease),transform .6s var(--ease);
    transition-delay:var(--d,0s);
    will-change:opacity,transform;
  }
  .js [data-reveal].is-in{opacity:1;transform:none}
  /* 网格／列表内的元素依次进场（每格错开 60ms，最多 6 格） */
  .js .pgrid>[data-reveal]:nth-child(2),.js .tgrid>[data-reveal]:nth-child(2),
  .js .ngrid>[data-reveal]:nth-child(2),.js .tlist>[data-reveal]:nth-child(2){--d:.06s}
  .js .pgrid>[data-reveal]:nth-child(3),.js .tgrid>[data-reveal]:nth-child(3),
  .js .ngrid>[data-reveal]:nth-child(3),.js .tlist>[data-reveal]:nth-child(3){--d:.12s}
  .js .pgrid>[data-reveal]:nth-child(4),.js .tgrid>[data-reveal]:nth-child(4),
  .js .ngrid>[data-reveal]:nth-child(4),.js .tlist>[data-reveal]:nth-child(4){--d:.18s}
  .js .pgrid>[data-reveal]:nth-child(5),.js .tgrid>[data-reveal]:nth-child(5),
  .js .ngrid>[data-reveal]:nth-child(5),.js .tlist>[data-reveal]:nth-child(5){--d:.24s}
  .js .pgrid>[data-reveal]:nth-child(6),.js .tgrid>[data-reveal]:nth-child(6),
  .js .ngrid>[data-reveal]:nth-child(6),.js .tlist>[data-reveal]:nth-child(6){--d:.3s}
}
@media (prefers-reduced-motion: reduce){
  .js [data-reveal]{opacity:1;transform:none;transition:none}
}

/* ---------- 17. 打印 ---------- */
/* ---------- 21. 触屏按压反馈（:active） ----------
   触屏设备上 :hover 不可用（且会粘滞），故点按反馈改用 :active：
   手指按下即上强调色，抬起即恢复——这才是「点击」应有的反馈。
   注意：本组规则只在无 hover 能力的设备上生效，桌面端不受影响。 */
@media (hover:none),(pointer:coarse){
  /* 触屏按压要跟手，过渡时长收到 0.1s（桌面仍是 0.2s） */
  .pcard,.ncard,.tcard,.trow,.toc a,.btn{transition-duration:.1s}

.pcard:active, .pcard.is-pressed{background:var(--accent);color:#fff}
.pcard:active .idx, .pcard.is-pressed .idx{color:rgba(255,255,255,.78)}
.pcard:active p, .pcard.is-pressed p{color:rgba(255,255,255,.82)}
.pcard:active .more, .pcard.is-pressed .more{color:#fff;border-bottom-color:rgba(255,255,255,.45)}

.ncard:active .nbody, .ncard.is-pressed .nbody{background:var(--accent);color:#fff}
.ncard:active .ndate, .ncard.is-pressed .ndate, .ncard:active .nsum, .ncard.is-pressed .nsum{color:rgba(255,255,255,.82)}
.ncard:active .ntag, .ncard.is-pressed .ntag{color:#fff;border-color:rgba(255,255,255,.5)}
.ncard:active .ncover, .ncard.is-pressed .ncover{border-bottom-color:rgba(255,255,255,.22)}
.ncard:active .ncover i, .ncard.is-pressed .ncover i{color:rgba(255,255,255,.42)}

.tcard:active .tbody, .tcard.is-pressed .tbody{background:var(--accent);color:#fff}
.tcard:active .trole, .tcard.is-pressed .trole, .tcard:active .tname em, .tcard.is-pressed .tname em{color:rgba(255,255,255,.82)}
.tcard:active .ttag, .tcard.is-pressed .ttag{color:#fff;border-color:rgba(255,255,255,.5)}

.trow:active .tbody, .trow.is-pressed .tbody{background:var(--accent);color:#fff}
.trow:active .trole, .trow.is-pressed .trole, .trow:active .tname em, .trow.is-pressed .tname em, .trow:active .tbio, .trow.is-pressed .tbio{color:rgba(255,255,255,.82)}
.trow:active .ttag, .trow.is-pressed .ttag{color:#fff;border-color:rgba(255,255,255,.5)}

.toc a:active, .toc a.is-pressed{background:var(--accent);color:#fff}
.sec-more:active, .sec-more.is-pressed{border-bottom-color:currentColor}
.citem a:active, .citem a.is-pressed{border-bottom-color:var(--accent)}
}

/* ---------- 20. 交互态仅在「真正支持悬停」的设备上生效 ----------
   触屏设备点按后 :hover 会被浏览器粘滞保留（表现为卡片一直呈选中色），
   故把所有 hover 规则收进 hover-capable 媒体查询；触屏只保留 :focus-visible。 */
@media (hover:hover) and (pointer:fine){
  .btn-ink:hover{background:var(--accent-deep)}
  .btn-line:hover{border-color:var(--ink-900)}
  .btn-light:hover{background:var(--card)}
  .btn-ghost:hover{border-color:#fff}
  .nav a:hover{border-bottom-color:var(--gray-300)}
  .sec-more:hover{border-bottom-color:var(--on-page)}
  .sec-more:hover span{transform:translateX(4px)}
  .ncard:hover{outline:none}
  .ncard:hover .nbody{background:var(--accent);color:#fff}
  .ncard:hover .ndate{color:rgba(255,255,255,.82)}
  .ncard:hover .ntag{color:#fff;border-color:rgba(255,255,255,.5)}
  .ncard:hover .nsum{color:rgba(255,255,255,.82)}
  .ncard:hover .ncover{border-bottom-color:rgba(255,255,255,.22)}
  .ncard:hover .ncover i{color:rgba(255,255,255,.42)}
  .pcard:hover{background:var(--accent);color:#fff;outline:none}
  .pcard:hover .idx{color:rgba(255,255,255,.78)}
  .pcard:hover p{color:rgba(255,255,255,.82)}
  .pcard:hover .more{color:#fff;border-bottom-color:rgba(255,255,255,.45)}
  .tcard:hover .tbody{background:var(--accent);color:#fff;outline:none}
  .tcard:hover .trole,
.tcard:hover .tname em{color:rgba(255,255,255,.82)}
  .tcard:hover .ttag{color:#fff;border-color:rgba(255,255,255,.5)}
  .trow:hover .tbody{background:var(--accent);color:#fff;outline:none}
  .trow:hover .trole,
.trow:hover .tname em,
.trow:hover .tbio{color:rgba(255,255,255,.82)}
  .trow:hover .ttag{color:#fff;border-color:rgba(255,255,255,.5)}
  .citem a:hover{border-bottom-color:var(--accent)}
  .ft a:hover{border-bottom-color:rgba(255,255,255,.5)}
  .toc a:hover{background:var(--accent);color:#fff}
  /* 手机端区块标题条是深底，查看更多悬停时下划线改白 */
  .sec-head-row .sec-more:hover{border-bottom-color:#fff}
}

@media print{
  body{background:#fff}
  .js [data-reveal]{opacity:1!important;transform:none!important}
  .hd,.side-box{display:none}
  .hero,.phero,.ft{background:#fff!important;color:#000!important}
  .hero::before,.hero::after,.phero::before,.phero::after,.ft::before{display:none}
  .bsec,.pcard,.ncard,.tshot,.side-box{background:#fff!important;border:1px solid #ccc}
}