/* =========================================================
   上海申策律师事务所 · Shence Law Firm
   Aesthetic: editorial / refined legal — ink navy + warm ivory + brass
   ========================================================= */

/* ---------- Tokens ---------- */
:root{
  --ink:#0d1a24;
  --ink-2:#122430;
  --ink-3:#1b3340;
  --paper:#f6f3ec;
  --paper-2:#efe9dd;
  --brass:#b0894f;
  --brass-2:#c9a86a;
  --brass-soft:rgba(176,137,79,.14);
  --text:#233038;
  --muted:#5f6b73;
  --muted-2:#8a949b;
  --line:rgba(13,26,36,.12);
  --line-inv:rgba(246,243,236,.16);
  --white:#fbfaf7;

  --ff-serif:"Noto Serif SC","Source Han Serif SC","Songti SC","STSong",Georgia,"Times New Roman",serif;
  --ff-sans:"Noto Sans SC","Source Han Sans SC","PingFang SC","Microsoft YaHei","Hiragino Sans GB",system-ui,-apple-system,"Segoe UI",sans-serif;

  --shadow-sm:0 1px 2px rgba(13,26,36,.06),0 6px 18px -10px rgba(13,26,36,.18);
  --shadow-md:0 24px 60px -34px rgba(13,26,36,.45);
  --radius:2px;
  --container:1220px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--ff-sans);
  color:var(--text);
  background:var(--paper);
  line-height:1.78;
  font-size:16px;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p,figure,blockquote{margin:0}
ul{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,textarea,select{font:inherit;color:inherit}

/* grain + atmosphere */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Layout ---------- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:28px}
.section{padding:clamp(72px,10vw,142px) 0;position:relative}
.section--tight{padding:clamp(56px,7vw,96px) 0}
.section--ink{background:var(--ink);color:var(--paper)}
.section--ink .muted{color:rgba(246,243,236,.62)}
.section--paper2{background:var(--paper-2)}

.eyebrow{
  display:inline-flex;align-items:center;gap:12px;
  font-size:12px;letter-spacing:.32em;text-transform:uppercase;
  color:var(--brass);font-weight:600;
}
.eyebrow::before{content:"";width:34px;height:1px;background:var(--brass);display:inline-block}
.section--ink .eyebrow{color:var(--brass-2)}
.section--ink .eyebrow::before{background:var(--brass-2)}

h2.display{
  font-family:var(--ff-serif);
  font-weight:600;
  font-size:clamp(28px,4vw,46px);
  line-height:1.28;
  letter-spacing:.02em;
  margin-top:20px;
  color:var(--ink);
}
.section--ink h2.display{color:var(--paper)}
.lede{max-width:62ch;color:var(--muted);margin-top:20px;font-size:16.5px}
.section--ink .lede{color:rgba(246,243,236,.7)}

.grid{display:grid;gap:28px}
.muted{color:var(--muted)}

/* ---------- Buttons ---------- */
.btn{
  --bg:var(--ink);--fg:var(--paper);
  display:inline-flex;align-items:center;gap:12px;
  padding:15px 30px;background:var(--bg);color:var(--fg);
  font-size:13.5px;letter-spacing:.16em;font-weight:600;
  border:1px solid var(--bg);border-radius:var(--radius);
  transition:transform .5s var(--ease),background .35s,color .35s,border-color .35s;
  will-change:transform;
}
.btn:hover{transform:translateY(-2px)}
.btn .arw{transition:transform .5s var(--ease)}
.btn:hover .arw{transform:translateX(5px)}
.btn--ghost{--bg:transparent;--fg:var(--ink);border-color:var(--line)}
.btn--ghost:hover{border-color:var(--ink)}
.btn--brass{--bg:var(--brass);--fg:#fff;border-color:var(--brass)}
.btn--brass:hover{--bg:var(--brass-2);border-color:var(--brass-2)}
.btn--onink{--bg:var(--paper);--fg:var(--ink);border-color:var(--paper)}
.btn--ghost-inv{--bg:transparent;--fg:var(--paper);border-color:var(--line-inv)}
.btn--ghost-inv:hover{border-color:var(--paper)}

.link-underline{
  display:inline-flex;gap:8px;align-items:center;font-size:13px;font-weight:600;
  letter-spacing:.12em;color:var(--brass);position:relative;padding-bottom:3px;
}
.link-underline::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:currentColor;transform:scaleX(1);transform-origin:left;transition:transform .5s var(--ease)}
.link-underline:hover::after{transform:scaleX(0);transform-origin:right}

/* ---------- Header ---------- */
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:200;
  transition:background .4s,box-shadow .4s,border-color .4s;
  border-bottom:1px solid transparent;
}
.site-header .header-inner{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  height:82px;
}
.site-header.is-scrolled{
  background:rgba(246,243,236,.86);
  backdrop-filter:saturate(140%) blur(14px);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
  border-bottom-color:var(--line);
  box-shadow:0 10px 40px -30px rgba(13,26,36,.6);
}
.brand{display:flex;align-items:center;gap:14px}
.brand-mark{
  font-family:var(--ff-serif);font-weight:700;font-size:19px;letter-spacing:.08em;
  display:grid;place-items:center;width:46px;height:46px;
  background:var(--ink);color:var(--brass-2);border:1px solid var(--ink);
  line-height:1;
}
.brand-text{display:flex;flex-direction:column;line-height:1.2}
.brand-text strong{font-family:var(--ff-serif);font-size:16.5px;letter-spacing:.05em;font-weight:600;color:var(--ink)}
.brand-text small{font-size:9.5px;letter-spacing:.34em;color:var(--muted);text-transform:uppercase;margin-top:3px}

.nav{display:flex;align-items:center;gap:4px}
.nav a{
  position:relative;padding:10px 15px;font-size:14px;color:var(--text);letter-spacing:.04em;
  transition:color .3s;
}
.nav a::after{content:"";position:absolute;left:15px;right:15px;bottom:4px;height:1px;background:var(--brass);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.nav a:hover{color:var(--ink)}
.nav a:hover::after,.nav a.is-active::after{transform:scaleX(1)}
.nav a.is-active{color:var(--ink);font-weight:600}
.header-cta{padding:12px 22px;font-size:13px}
.header-actions{display:flex;align-items:center;gap:14px}

.nav-toggle{display:none;width:44px;height:44px;place-items:center;border:1px solid var(--line)}
.nav-toggle span{display:block;width:20px;height:1.6px;background:var(--ink);position:relative;transition:transform .4s var(--ease),background .2s}
.nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;left:0;width:20px;height:1.6px;background:var(--ink);transition:transform .4s var(--ease),top .3s}
.nav-toggle span::before{top:-6px}.nav-toggle span::after{top:6px}
body.nav-open .nav-toggle span{background:transparent}
body.nav-open .nav-toggle span::before{top:0;transform:rotate(45deg)}
body.nav-open .nav-toggle span::after{top:0;transform:rotate(-45deg)}

.drawer{
  position:fixed;inset:82px 0 0 0;z-index:190;background:var(--paper);
  transform:translateX(100%);transition:transform .5s var(--ease);
  padding:40px 28px;overflow-y:auto;
}
body.nav-open .drawer{transform:translateX(0)}
.drawer nav{display:flex;flex-direction:column}
.drawer nav a{font-family:var(--ff-serif);font-size:26px;padding:18px 0;border-bottom:1px solid var(--line);color:var(--ink)}
.drawer .drawer-foot{margin-top:34px;color:var(--muted);font-size:14px;line-height:2}

/* ---------- Hero ---------- */
.hero{
  position:relative;min-height:100svh;display:flex;align-items:center;
  background:var(--ink);color:var(--paper);overflow:hidden;padding:150px 0 90px;
}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(120% 90% at 82% 12%,rgba(176,137,79,.22),transparent 55%),
    radial-gradient(90% 80% at 6% 96%,rgba(27,51,64,.9),transparent 60%);
}
.hero-rule{position:absolute;left:0;right:0;top:0;height:1px;background:var(--line-inv)}
.hero .container{position:relative;z-index:2}
.hero-inner{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:60px;align-items:end}
.hero-kicker{display:flex;align-items:center;gap:16px;font-size:12px;letter-spacing:.36em;color:var(--brass-2);text-transform:uppercase}
.hero-kicker .vbar{width:1px;height:30px;background:var(--brass-2)}
.hero h1{
  font-family:var(--ff-serif);font-weight:600;
  font-size:clamp(36px,5.6vw,74px);line-height:1.1;letter-spacing:.03em;
  margin:26px 0 0;color:var(--paper);
}
.hero h1 em{font-style:normal;color:var(--brass-2)}
.hero-sub{margin-top:30px;max-width:44ch;color:rgba(246,243,236,.74);font-size:17px}
.hero-actions{display:flex;flex-wrap:wrap;gap:16px;margin-top:44px}
.hero-aside{border-left:1px solid var(--line-inv);padding-left:34px;display:flex;flex-direction:column;gap:26px}
.hero-stat{display:flex;flex-direction:column}
.hero-stat b{font-family:var(--ff-serif);font-size:clamp(30px,4vw,46px);color:var(--paper);line-height:1;font-weight:600}
.hero-stat span{font-size:12.5px;letter-spacing:.16em;color:rgba(246,243,236,.55);margin-top:10px}

.scroll-hint{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:3;display:flex;flex-direction:column;align-items:center;gap:10px;font-size:10.5px;letter-spacing:.3em;color:rgba(246,243,236,.5);text-transform:uppercase}
.scroll-hint i{width:1px;height:44px;background:linear-gradient(var(--brass-2),transparent);display:block;animation:drop 2.4s var(--ease) infinite}
@keyframes drop{0%{transform:scaleY(.2);transform-origin:top;opacity:0}40%{opacity:1}100%{transform:scaleY(1);transform-origin:top;opacity:0}}

/* vertical chinese characters */
.vtext{
  writing-mode:vertical-rl;text-orientation:upright;letter-spacing:.34em;
  font-family:var(--ff-serif);color:rgba(246,243,236,.36);font-size:13px;
}
.hero-vtext{position:absolute;right:28px;top:150px;z-index:2;display:flex;gap:20px}

/* ---------- Marquee ---------- */
.marquee{border-block:1px solid var(--line);background:var(--paper-2);overflow:hidden}
.marquee-track{display:flex;gap:0;white-space:nowrap;animation:slide 42s linear infinite}
.marquee-track span{
  font-family:var(--ff-serif);font-size:15px;letter-spacing:.22em;color:var(--muted);
  padding:20px 34px;display:inline-flex;align-items:center;gap:34px;
}
.marquee-track span::after{content:"";width:5px;height:5px;background:var(--brass);transform:rotate(45deg)}
@keyframes slide{to{transform:translateX(-50%)}}
.marquee:hover .marquee-track{animation-play-state:paused}

/* ---------- About ---------- */
.about-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(34px,6vw,90px);align-items:start}
.about-figure{position:relative;margin-top:34px}
.about-figure .frame{
  border:1px solid var(--line);padding:22px;background:
    linear-gradient(160deg,var(--paper),var(--paper-2));
}
.about-figure .monogram{
  aspect-ratio:3/4;background:var(--ink);position:relative;overflow:hidden;display:grid;place-items:center;
}
.about-figure .monogram::after{content:"";position:absolute;inset:16px;border:1px solid var(--line-inv)}
.about-figure .monogram b{font-family:var(--ff-serif);font-size:clamp(60px,9vw,120px);color:var(--brass-2);letter-spacing:.1em;writing-mode:vertical-rl}
.badge{
  position:absolute;right:-14px;bottom:44px;background:var(--brass);color:#fff;
  padding:16px 20px;line-height:1.3;box-shadow:var(--shadow-md);
}
.badge b{display:block;font-family:var(--ff-serif);font-size:26px}
.badge span{font-size:11px;letter-spacing:.18em}

.value-list{margin-top:38px;border-top:1px solid var(--line)}
.value-list li{display:grid;grid-template-columns:52px 1fr;gap:22px;padding:24px 0;border-bottom:1px solid var(--line)}
.value-list .n{font-family:var(--ff-serif);color:var(--brass);font-size:15px;letter-spacing:.1em;padding-top:3px}
.value-list h4{font-family:var(--ff-serif);font-size:19px;font-weight:600;letter-spacing:.03em;color:var(--ink)}
.value-list p{color:var(--muted);font-size:15px;margin-top:6px}

/* ---------- Practice ---------- */
.practice-head{display:flex;justify-content:space-between;align-items:flex-end;gap:34px;flex-wrap:wrap}
.practice-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:56px}
.pcard{
  background:var(--paper);padding:clamp(28px,3.4vw,44px);position:relative;overflow:hidden;
  transition:background .5s var(--ease),transform .5s var(--ease);min-height:250px;display:flex;flex-direction:column;
}
.pcard .idx{font-family:var(--ff-serif);font-size:13px;color:var(--brass);letter-spacing:.16em}
.pcard h3{font-family:var(--ff-serif);font-size:22px;font-weight:600;letter-spacing:.03em;margin-top:auto;color:var(--ink);transition:color .5s}
.pcard p{color:var(--muted);font-size:14.5px;margin-top:12px;max-width:34ch;transition:color .5s}
.pcard .pgo{margin-top:20px;color:var(--brass);font-size:12.5px;letter-spacing:.14em;display:inline-flex;gap:8px;align-items:center}
.pcard::before{content:"";position:absolute;left:0;top:0;height:100%;width:3px;background:var(--brass);transform:scaleY(0);transform-origin:bottom;transition:transform .55s var(--ease)}
.pcard:hover{background:var(--ink-2);transform:translateY(-4px)}
.pcard:hover h3{color:var(--paper)}
.pcard:hover p{color:rgba(246,243,236,.68)}
.pcard:hover::before{transform:scaleY(1);transform-origin:top}
.section--ink .practice-grid{background:var(--line-inv);border-color:var(--line-inv)}
.section--ink .pcard{background:var(--ink)}
.section--ink .pcard h3{color:var(--paper)}
.section--ink .pcard p{color:rgba(246,243,236,.62)}
.section--ink .pcard:hover{background:var(--ink-3)}

/* ---------- Stats band ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-inv);border:1px solid var(--line-inv)}
.stat{background:var(--ink);padding:clamp(28px,3.6vw,48px)}
.stat b{font-family:var(--ff-serif);font-size:clamp(34px,5vw,58px);color:var(--paper);line-height:1;display:block;font-weight:600}
.stat b i{font-style:normal;color:var(--brass-2);font-size:.55em;margin-left:3px}
.stat span{display:block;margin-top:16px;font-size:13px;letter-spacing:.14em;color:rgba(246,243,236,.6)}

/* ---------- Team ---------- */
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:56px}
.member{background:var(--paper);border:1px solid var(--line);padding:0;overflow:hidden;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.member:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)}
.member .portrait{aspect-ratio:4/5;background:linear-gradient(165deg,var(--ink-2),var(--ink));position:relative;display:grid;place-items:center;overflow:hidden}
.member .portrait::after{content:"";position:absolute;inset:14px;border:1px solid var(--line-inv);transition:inset .5s var(--ease)}
.member:hover .portrait::after{inset:9px}
.member .portrait b{font-family:var(--ff-serif);font-size:clamp(40px,4vw,58px);color:var(--brass-2);letter-spacing:.08em}
.member .meta{padding:22px 22px 26px}
.member .meta h3{font-family:var(--ff-serif);font-size:20px;font-weight:600;color:var(--ink);letter-spacing:.04em}
.member .meta .role{font-size:12px;letter-spacing:.14em;color:var(--brass);margin-top:6px;text-transform:uppercase}
.member .meta .spec{font-size:13.5px;color:var(--muted);margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}

/* ---------- News ---------- */
.news-list{margin-top:52px;border-top:1px solid var(--line)}
.news-item{display:grid;grid-template-columns:120px 1fr auto;gap:30px;align-items:center;padding:30px 0;border-bottom:1px solid var(--line);transition:padding-left .5s var(--ease)}
.news-item:hover{padding-left:14px}
.news-item .date{font-family:var(--ff-serif);color:var(--muted);font-size:14px;letter-spacing:.06em}
.news-item .date b{display:block;font-size:26px;color:var(--ink);line-height:1}
.news-item h3{font-family:var(--ff-serif);font-size:20px;font-weight:600;color:var(--ink);letter-spacing:.02em;transition:color .35s}
.news-item:hover h3{color:var(--brass)}
.news-item .tag{font-size:11.5px;letter-spacing:.14em;color:var(--brass);border:1px solid var(--brass-soft);padding:6px 12px;white-space:nowrap;background:var(--brass-soft)}

/* ---------- CTA band ---------- */
.cta{background:var(--ink);color:var(--paper);position:relative;overflow:hidden}
.cta::after{content:"";position:absolute;right:-8%;top:-40%;width:60%;height:180%;background:radial-gradient(closest-side,rgba(176,137,79,.22),transparent);pointer-events:none}
.cta .container{position:relative;z-index:2;display:grid;grid-template-columns:1.4fr .6fr;gap:50px;align-items:center}
.cta h2{font-family:var(--ff-serif);font-size:clamp(28px,4.4vw,52px);line-height:1.2;font-weight:600}
.cta p{color:rgba(246,243,236,.68);margin-top:18px;max-width:44ch}

/* ---------- Page hero (subpages) ---------- */
.page-hero{background:var(--ink);color:var(--paper);padding:170px 0 76px;position:relative;overflow:hidden}
.page-hero::after{content:"";position:absolute;inset:0;background:radial-gradient(90% 120% at 88% 0%,rgba(176,137,79,.2),transparent 55%)}
.page-hero .container{position:relative;z-index:2}
.crumbs{font-size:12.5px;letter-spacing:.14em;color:rgba(246,243,236,.55)}
.crumbs a:hover{color:var(--brass-2)}
.page-hero h1{font-family:var(--ff-serif);font-size:clamp(34px,5.6vw,68px);font-weight:600;margin-top:22px;letter-spacing:.03em}
.page-hero p{color:rgba(246,243,236,.7);max-width:60ch;margin-top:18px}

/* ---------- Contact ---------- */
.contact-grid{display:grid;grid-template-columns:1fr}
.contact-info{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}
.contact-info .info-block{background:var(--paper);border:1px solid var(--line);padding:24px 26px}
.info-block h4{font-family:var(--ff-serif);font-size:13px;letter-spacing:.2em;color:var(--brass);text-transform:uppercase}
.info-block p,.info-block a{color:var(--text);font-size:16px;margin-top:10px;display:block}
.info-block a:hover{color:var(--brass)}
.wechat-card{margin-top:clamp(28px,4vw,48px);display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(28px,4vw,60px);align-items:center;background:var(--paper);border:1px solid var(--line);padding:clamp(26px,3.4vw,48px)}
.wechat-text p{color:var(--muted-2);font-size:15.5px}
.wechat-qr{justify-self:center;text-align:center}
.wechat-qr img{width:min(220px,60vw);height:auto;display:block;margin:0 auto;background:#fff;border:1px solid var(--line);padding:8px}
.wechat-qr span{display:block;margin-top:12px;font-size:12.5px;letter-spacing:.08em;color:var(--muted-2)}
@media (max-width:880px){.wechat-card{grid-template-columns:1fr;text-align:center}.wechat-text p{margin-left:auto;margin-right:auto}}

/* ---------- Footer ---------- */
.site-footer{background:var(--ink);color:rgba(246,243,236,.68);padding-top:76px}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;gap:44px;padding-bottom:56px;border-bottom:1px solid var(--line-inv)}
.foot-brand .brand-text strong{color:var(--paper)}
.foot-brand .brand-text small{color:rgba(246,243,236,.5)}
.foot-brand p{margin-top:22px;font-size:14px;max-width:30ch}
.foot-col h5{font-family:var(--ff-serif);color:var(--paper);font-size:14px;letter-spacing:.14em;margin-bottom:18px;font-weight:600}
.foot-col li{margin-bottom:11px;font-size:14px}
.foot-col a:hover{color:var(--brass-2)}
.foot-bottom{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:26px 0;font-size:12.5px;color:rgba(246,243,236,.5);letter-spacing:.04em}
.foot-bottom .disc{max-width:70ch}
.foot-bottom a{color:rgba(246,243,236,.8);text-decoration:none;border-bottom:1px solid rgba(246,243,236,.3);transition:color .3s,border-color .3s}
.foot-bottom a:hover{color:var(--brass-2);border-bottom-color:var(--brass-2)}

/* ---------- Reveal animation ---------- */
[data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
[data-reveal].is-in{opacity:1;transform:none}
[data-reveal-delay="1"]{transition-delay:.08s}
[data-reveal-delay="2"]{transition-delay:.16s}
[data-reveal-delay="3"]{transition-delay:.24s}
[data-reveal-delay="4"]{transition-delay:.32s}

.hero [data-load]{opacity:0;transform:translateY(26px);animation:rise 1s var(--ease) forwards}
.hero [data-load="1"]{animation-delay:.1s}
.hero [data-load="2"]{animation-delay:.24s}
.hero [data-load="3"]{animation-delay:.38s}
.hero [data-load="4"]{animation-delay:.52s}
.hero [data-load="5"]{animation-delay:.66s}
.hero [data-load="6"]{animation-delay:.8s}
@keyframes rise{to{opacity:1;transform:none}}

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .practice-grid{grid-template-columns:repeat(2,1fr)}
  .team-grid{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr;gap:36px}
}
@media (max-width:880px){
  .nav,.header-cta{display:none}
  .nav-toggle{display:grid}
  .hero-inner{grid-template-columns:1fr;gap:44px;align-items:start}
  .hero-aside{border-left:0;border-top:1px solid var(--line-inv);padding-left:0;padding-top:30px;flex-direction:row;flex-wrap:wrap;gap:34px}
  .hero-vtext{display:none}
  .about-grid{grid-template-columns:1fr}
  .cta .container{grid-template-columns:1fr;gap:30px}
  .contact-grid{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr)}
  .news-item{grid-template-columns:90px 1fr;gap:20px}
  .news-item .tag{display:none}
}
@media (max-width:620px){
  .container{padding-inline:20px}
  .practice-grid{grid-template-columns:1fr}
  .team-grid{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr}
  .form .row{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .brand-text strong{font-size:15px}
  .about-figure .badge{right:8px}
}

/* ---------- Subpage components ---------- */
.split{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(34px,5vw,84px);align-items:start}
.split--rev{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}
.prose p{color:var(--muted);margin-top:18px;font-size:16.5px}
.prose p strong{color:var(--ink);font-weight:600}
.pullquote{
  font-family:var(--ff-serif);font-size:clamp(20px,2.6vw,30px);line-height:1.6;color:var(--ink);
  border-left:2px solid var(--brass);padding-left:26px;margin-top:30px;letter-spacing:.02em;
}
.section--ink .pullquote{color:var(--paper)}

/* timeline */
.timeline{margin-top:52px;border-top:1px solid var(--line)}
.timeline li{display:grid;grid-template-columns:150px 1fr;gap:34px;padding:30px 0;border-bottom:1px solid var(--line);align-items:baseline}
.timeline .yr{font-family:var(--ff-serif);font-size:26px;color:var(--brass);letter-spacing:.04em}
.timeline h4{font-family:var(--ff-serif);font-size:19px;font-weight:600;color:var(--ink)}
.timeline p{color:var(--muted);font-size:15px;margin-top:8px;max-width:62ch}
.section--ink .timeline,.section--ink .timeline li{border-color:var(--line-inv)}
.section--ink .timeline h4{color:var(--paper)}
.section--ink .timeline p{color:rgba(246,243,236,.66)}

/* advantage cards */
.adv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:56px}
.adv{border:1px solid var(--line);padding:34px 30px;background:var(--paper);transition:border-color .4s,transform .5s var(--ease)}
.adv:hover{border-color:var(--brass);transform:translateY(-4px)}
.adv .num{font-family:var(--ff-serif);color:var(--brass);font-size:14px;letter-spacing:.14em}
.adv h4{font-family:var(--ff-serif);font-size:20px;font-weight:600;color:var(--ink);margin-top:26px}
.adv p{color:var(--muted);font-size:15px;margin-top:12px}
.section--ink .adv{background:transparent;border-color:var(--line-inv)}
.section--ink .adv h4{color:var(--paper)}
.section--ink .adv p{color:rgba(246,243,236,.66)}

/* practice detail blocks */
.pblock{padding:clamp(46px,6vw,80px) 0;border-bottom:1px solid var(--line);scroll-margin-top:110px}
.pblock:first-child{padding-top:0}
.pblock .phead{display:grid;grid-template-columns:64px 1fr;gap:26px;align-items:baseline}
.pblock .pno{font-family:var(--ff-serif);font-size:18px;color:var(--brass);letter-spacing:.1em}
.pblock h2{font-family:var(--ff-serif);font-size:clamp(24px,3vw,34px);font-weight:600;color:var(--ink);letter-spacing:.02em}
.pblock .pbody{display:grid;grid-template-columns:1fr 1fr;gap:34px;margin-top:30px;padding-left:90px}
.pblock .pbody p{color:var(--muted);font-size:16px}
.pblock .svc{margin-top:22px}
.pblock .svc li{position:relative;padding-left:20px;color:var(--text);font-size:15px;margin-bottom:10px}
.pblock .svc li::before{content:"";position:absolute;left:0;top:.72em;width:6px;height:6px;background:var(--brass);transform:rotate(45deg)}
.pblock h5{font-size:12px;letter-spacing:.18em;color:var(--muted);text-transform:uppercase;margin-bottom:14px}

/* intake / process steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:56px}
.step{background:var(--paper);padding:32px 28px}
.step .s{font-family:var(--ff-serif);font-size:30px;color:var(--brass);line-height:1}
.step h4{font-family:var(--ff-serif);font-size:18px;font-weight:600;color:var(--ink);margin-top:22px}
.step p{color:var(--muted);font-size:14px;margin-top:10px}

/* map */
.map{margin-top:56px;border:1px solid var(--line);background:var(--paper-2);aspect-ratio:16/7;display:grid;place-items:center;overflow:hidden;position:relative}
.map-inner{text-align:center;color:var(--muted)}
.map-inner b{font-family:var(--ff-serif);font-size:20px;color:var(--ink);display:block;margin-bottom:8px}
.map iframe{width:100%;height:100%;border:0;display:block}

@media (max-width:1080px){
  .adv-grid{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr 1fr}
}
@media (max-width:880px){
  .split,.split--rev{grid-template-columns:1fr}
  .timeline li{grid-template-columns:110px 1fr;gap:20px}
  .pblock .pbody{grid-template-columns:1fr;padding-left:0}
}
@media (max-width:620px){
  .adv-grid{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .timeline li{grid-template-columns:1fr;gap:6px}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  [data-reveal]{opacity:1;transform:none}
  .hero [data-load]{opacity:1;transform:none}
}

/* =========================================================
   Risk-agency (风险代理) emphasis + real-info components
   ========================================================= */

/* brass band under hero */
.risk-band{background:var(--brass);color:#fff}
.risk-band .rb-inner{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,.28)}
.risk-item{background:var(--brass);padding:26px 28px;display:flex;gap:16px;align-items:flex-start}
.risk-item .ri-ic{font-family:var(--ff-serif);font-size:22px;line-height:1;color:#fff;opacity:.85}
.risk-item b{font-family:var(--ff-serif);font-size:17px;letter-spacing:.04em;display:block}
.risk-item span{display:block;font-size:12.5px;color:rgba(255,255,255,.8);margin-top:6px;line-height:1.6}

.chip{border:1px solid var(--line-inv);padding:9px 16px;font-size:12.5px;letter-spacing:.08em;color:rgba(246,243,236,.85);white-space:nowrap}
.chip b{color:var(--brass-2);font-family:var(--ff-serif)}
.hero-chips{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

/* risk page blocks */
.risk-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;margin-top:52px}
.risk-card{border:1px solid var(--line);background:var(--paper);padding:34px 32px;position:relative}
.risk-card .k{font-family:var(--ff-serif);font-size:13px;letter-spacing:.16em;color:var(--brass)}
.risk-card h4{font-family:var(--ff-serif);font-size:21px;font-weight:600;color:var(--ink);margin-top:18px}
.risk-card p{color:var(--muted);font-size:15px;margin-top:12px}
.risk-card ul{margin-top:14px}
.risk-card li{position:relative;padding-left:20px;color:var(--text);font-size:14.5px;margin-bottom:9px}
.risk-card li::before{content:"";position:absolute;left:0;top:.7em;width:6px;height:6px;background:var(--brass);transform:rotate(45deg)}
.section--ink .risk-card{background:transparent;border-color:var(--line-inv)}
.section--ink .risk-card h4{color:var(--paper)}
.section--ink .risk-card p,.section--ink .risk-card li{color:rgba(246,243,236,.7)}

.note{border-left:2px solid var(--brass);padding:16px 22px;background:var(--brass-soft);color:var(--ink);font-size:14.5px;margin-top:26px}
.section--ink .note{background:rgba(176,137,79,.16);color:rgba(246,243,236,.88)}

/* fee table */
.fee-table{width:100%;border-collapse:collapse;margin-top:24px;font-size:14.5px;background:var(--paper)}
.fee-table caption{text-align:left;font-family:var(--ff-serif);font-size:15px;color:var(--muted);padding-bottom:12px}
.fee-table th,.fee-table td{border:1px solid var(--line);padding:13px 16px;text-align:left;vertical-align:top}
.fee-table thead th{background:var(--ink);color:var(--paper);font-family:var(--ff-serif);font-weight:600;letter-spacing:.04em}
.fee-table td{color:var(--muted)}
.fee-table td strong{color:var(--ink)}

/* cases list reuses .news-item; add outcome tag colour */
.tag--win{background:var(--brass-soft);color:var(--brass);border-color:var(--brass-soft)}

/* three-up team */
.team-grid--three{grid-template-columns:repeat(3,1fr)}

/* fact list (about / footer) */
.facts{display:grid;grid-template-columns:repeat(2,1fr);gap:22px 40px;margin-top:40px;border-top:1px solid var(--line);padding-top:34px}
.facts .f h5{font-size:12px;letter-spacing:.16em;color:var(--brass);text-transform:uppercase;font-family:var(--ff-serif)}
.facts .f p{color:var(--ink);font-size:15.5px;margin-top:8px}
.section--ink .facts{border-color:var(--line-inv)}
.section--ink .facts .f p{color:rgba(246,243,236,.86)}

/* contact map embed */
.map iframe{filter:grayscale(.2)}

@media (max-width:880px){
  .risk-band .rb-inner{grid-template-columns:1fr}
  .risk-grid{grid-template-columns:1fr}
  .facts{grid-template-columns:1fr}
  .team-grid--three{grid-template-columns:1fr 1fr}
}
@media (max-width:620px){
  .team-grid--three{grid-template-columns:1fr}
  .fee-table{font-size:13.5px}
  .fee-table th,.fee-table td{padding:10px 12px}
}

/* compact service tiles */
.svc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin-top:52px}
.svc-tile{background:var(--paper);padding:30px 26px;transition:background .45s var(--ease)}
.svc-tile .n{font-family:var(--ff-serif);font-size:12.5px;color:var(--brass);letter-spacing:.14em}
.svc-tile h3{font-family:var(--ff-serif);font-size:19px;font-weight:600;color:var(--ink);margin-top:16px}
.svc-tile p{color:var(--muted);font-size:13.5px;margin-top:10px;line-height:1.7}
.svc-tile:hover{background:var(--ink-2)}
.svc-tile:hover h3{color:var(--paper)}
.svc-tile:hover p{color:rgba(246,243,236,.66)}

/* =========================================================
   v3 additions: 3-step risk model, FAQ, why-grid
   ========================================================= */
.steps--three{grid-template-columns:repeat(3,1fr)}
@media (max-width:880px){.steps--three{grid-template-columns:1fr}}

.faq{margin-top:44px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:24px 0;font-family:var(--ff-serif);font-size:19px;color:var(--ink);display:flex;justify-content:space-between;gap:20px;align-items:center;letter-spacing:.02em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--ff-serif);color:var(--brass);font-size:24px;line-height:1;flex:0 0 auto;transition:transform .3s var(--ease)}
.faq details[open] summary::after{content:"\2013"}
.faq .fa-body{padding:0 0 26px;color:var(--muted);font-size:15.5px;max-width:82ch}
.faq details[open] summary{color:var(--brass)}

.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:56px}
.why{border:1px solid var(--line);background:var(--paper);padding:32px 30px;transition:transform .5s var(--ease),border-color .4s,box-shadow .5s var(--ease)}
.why:hover{transform:translateY(-4px);border-color:var(--brass);box-shadow:var(--shadow-sm)}
.why .ic{font-size:26px;line-height:1}
.why h4{font-family:var(--ff-serif);font-size:19px;font-weight:600;color:var(--ink);margin-top:20px}
.why p{color:var(--muted);font-size:14.5px;margin-top:10px}
.section--ink .why{background:transparent;border-color:var(--line-inv)}
.section--ink .why h4{color:var(--paper)}
.section--ink .why p{color:rgba(246,243,236,.66)}
@media (max-width:1080px){.why-grid{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.why-grid{grid-template-columns:1fr}}

/* hero chip emphasis */
.hero-chips .chip{background:rgba(246,243,236,.06)}
.hero-chips .chip b{color:var(--brass-2)}

/* =========================================================
   Brand logo
   ========================================================= */
.brand{align-items:center}
.brand-logo{
  width:46px;height:46px;flex:0 0 auto;border-radius:9px;
  background:#fff;border:1px solid rgba(13,26,36,.14);padding:5px;object-fit:contain;
  box-shadow:0 4px 14px -8px rgba(13,26,36,.5);
}
.about-lockup{display:block;width:100%;max-width:340px;margin:0 auto 10px}
@media (max-width:620px){.brand-logo{width:42px;height:42px;padding:4px}.about-lockup{max-width:280px}}

/* Header legibility while sitting over the dark hero */
.site-header:not(.is-scrolled) .nav a{color:rgba(246,243,236,.82)}
.site-header:not(.is-scrolled) .nav a:hover,
.site-header:not(.is-scrolled) .nav a.is-active{color:var(--paper)}
.site-header:not(.is-scrolled) .brand-text strong{color:var(--paper)}
.site-header:not(.is-scrolled) .brand-text small{color:rgba(246,243,236,.55)}
.site-header:not(.is-scrolled) .nav-toggle{border-color:var(--line-inv)}
.site-header:not(.is-scrolled) .nav-toggle span,
.site-header:not(.is-scrolled) .nav-toggle span::before,
.site-header:not(.is-scrolled) .nav-toggle span::after{background:var(--paper)}

/* map embed */
.map iframe,.map .map-frame{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.map-hint{font-size:13px;color:var(--muted);margin-top:12px}
.map-hint a{color:var(--brass);text-decoration:underline}

/* =========================================================
   Full-width notice bar under the hero
   ========================================================= */
.notice-bar{background:var(--ink-2);border-top:1px solid var(--line-inv);border-bottom:1px solid var(--line-inv)}
.notice-bar .nb-inner{display:flex;align-items:center;justify-content:center;gap:22px;flex-wrap:wrap;padding:15px 28px;text-align:center}
.notice-bar p{margin:0;font-size:14.5px;color:rgba(246,243,236,.88);letter-spacing:.03em;display:inline-flex;align-items:center;gap:14px;flex-wrap:wrap}
.notice-bar b{font-family:var(--ff-serif);color:var(--brass-2);font-weight:600}
.notice-bar i{width:4px;height:4px;background:var(--brass);transform:rotate(45deg);display:inline-block;font-style:normal}
.notice-bar a{color:var(--brass-2);font-size:13.5px;letter-spacing:.08em;white-space:nowrap;border-bottom:1px solid rgba(201,168,106,.5);padding-bottom:2px;transition:border-color .3s,color .3s}
.notice-bar a:hover{border-color:var(--brass-2);color:var(--paper)}
@media (max-width:620px){.notice-bar p{font-size:13.5px;gap:10px}.notice-bar .nb-inner{gap:14px}}

/* footer ICP link */
.foot-bottom a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(246,243,236,.3);transition:color .3s,border-color .3s}
.foot-bottom a:hover{color:var(--brass-2);border-color:var(--brass-2)}

/* =========================================================
   腾讯问卷嵌入 (Tencent Survey embed)
   ========================================================= */
.survey-wrap{border:1px solid var(--line);border-radius:12px;background:#fff;overflow:hidden;margin-bottom:16px}
.survey-frame{display:block;width:100%;height:660px;border:0}
.survey-open{width:100%;margin-bottom:6px}
@media (max-width:880px){.survey-frame{height:900px}}

button:disabled{opacity:.6;cursor:not-allowed}