/*
Theme Name: 深圳翰译
Theme URI: https://www.hanyitranslation.com/
Author: 深圳翰译翻译有限公司
Description: 深圳翰译翻译有限公司官方网站主题，前台为已定稿的 bento 首页。
Version: 1.2.16
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 8.0
Text Domain: hanyi-shenzhen
*/

:root{--g:#0d3b2f;--g2:#14503f;--lime:#c6e58d;--bg:#f3f0e8;--card:#fbfaf6;--tint:#e4ecdf;--ink:#15201b;--ink2:#56625b;--line:#e3ded2;--gap:18px;--r:26px;accent-color:var(--g)}
*{box-sizing:border-box;margin:0;padding:0}
html{color-scheme:light;overflow-wrap:break-word}
@media (prefers-reduced-motion: no-preference){html{scroll-behavior:smooth}}
body{font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC",sans-serif;color:var(--ink);background:var(--bg);line-height:1.7;font-size:1rem;text-align:start;-webkit-font-smoothing:antialiased}
h1,h2,.h1a,.h1b,.eyebrow{text-wrap:balance}
.lead,.sub,.tile p,.statement p{text-wrap:pretty}
::selection{background:var(--g);color:#fff}
a{color:var(--g);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
section{padding:56px 0}
h2{font-size:clamp(1.875rem, 1rem + 4.4vw, 3.25rem);line-height:1.18;font-weight:800;letter-spacing:-.02em;margin-bottom:14px;max-width:900px}
.sub{color:var(--ink2);font-size:1.125rem;margin-bottom:34px;max-width:720px}
.eyebrow{display:block;color:var(--g2);font-weight:700;font-size:0.8125rem;letter-spacing:.18em;margin-bottom:14px}
/* topbar + nav */
.topbar{background:var(--g);color:#cfe0d6;font-size:0.875rem}
.topbar .wrap{display:flex;flex-wrap:wrap;gap:6px 22px;justify-content:space-between;padding-top:8px;padding-bottom:8px}
.topbar a{color:#fff;font-weight:600}
.topbar .sep{opacity:.45;margin:0 8px}
header.nav{position:sticky;top:0;z-index:20;background:rgba(243,240,232,.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
header.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;min-block-size:66px;height:auto;flex-wrap:nowrap}
header.nav .wrap > *{flex-shrink:0}
header.nav:not(.is-wide) .logo{flex-shrink:1;min-inline-size:0}
header.nav.is-measuring,header.nav.is-measuring *{transition:none!important}
.logo{display:flex;align-items:center;gap:8px;flex:0 1 auto;min-width:0;color:var(--ink);text-decoration:none}
.logo:hover{text-decoration:none}
.logo img{display:block;height:40px;width:auto;max-width:161px}
.logo-city{flex:none;font-size:0.6875rem;font-weight:600;color:var(--ink2);letter-spacing:.12em;line-height:1.2;padding:3px 8px;border:1px solid var(--line);border-radius:999px;white-space:nowrap}
.footer-logo{display:inline-block;margin:0 0 12px}
.footer-logo:hover{text-decoration:none}
.footer-logo img{display:block;height:40px;width:auto;max-width:161px}
nav ul{list-style:none;font-size:0.9375rem}
nav a{color:var(--ink2)}
nav a:hover{color:var(--g);text-decoration:none}
/* buttons */
.btn{display:inline-block;padding:15px 32px;border-radius:999px;font-weight:700;font-size:1.0625rem;min-block-size:2.75rem;transition:transform .2s,background .2s,box-shadow .2s;border:1.5px solid transparent}
.btn:hover{text-decoration:none;transform:translateY(-2px)}
.btn-s{padding:9px 20px;font-size:0.9375rem}
.btn-d{background:var(--g);color:#fff}
.btn-d:hover{background:var(--g2);box-shadow:0 10px 24px rgba(13,59,47,.22)}
.btn-l{border-color:var(--g);color:var(--g)}
.btn-l:hover{background:rgba(13,59,47,.06)}
.btn-lime{background:var(--lime);color:var(--g)}
.btn-ghost{border-color:rgba(255,255,255,.5);color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.1)}
/* hero */
.hero{padding:104px 0 56px}
.hero h1{font-weight:900;letter-spacing:-.035em;line-height:1.08;margin-bottom:30px}
.h1a{display:block;font-size:clamp(2.875rem, 1rem + 8.2vw, 5.5rem)}
.h1a .bar{color:#b9c4bb;font-weight:300;margin-left:.08em}
.h1b{display:block;font-size:clamp(1.5rem, 1rem + 4.4vw, 2.875rem);color:var(--g2);letter-spacing:-.02em;margin-top:8px;font-weight:800}
.hero .eyebrow{margin-bottom:22px}
.lead{font-size:clamp(1.0625rem, 1rem + 2vw, 1.3125rem);color:var(--ink2);max-width:760px;margin-bottom:38px}
.cta{display:flex;flex-wrap:wrap;gap:14px}
.brand-intro{margin-top:28px;max-width:760px;font-size:0.9375rem;color:var(--ink2);line-height:1.7}.slogan{margin-top:18px;font-size:0.875rem;letter-spacing:.4em;color:#8a948d}
.hero-docs{margin:18px 0 0;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.hero-docs .label{font-size:0.875rem;color:var(--ink2);margin-right:4px}
.hero-docs a{display:inline-flex;padding:6px 12px;border:1px solid var(--line);border-radius:999px;font-size:0.875rem;font-weight:600;color:var(--ink);background:#fff;text-decoration:none}
.hero-docs a:hover{border-color:var(--g);color:var(--g)}
.zj-page-link{margin:0 0 12px}
#zhengjian ul.doc-list li a{color:inherit;text-decoration:none}
#zhengjian ul.doc-list li:has(> a):hover{border-color:var(--g)}
/* bento */
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap)}
.c3{grid-column:span 3}.c4{grid-column:span 4}.c5{grid-column:span 5}.c6{grid-column:span 6}.c7{grid-column:span 7}.c8{grid-column:span 8}.c12{grid-column:span 12}
.r2{grid-row:span 2}
.tile{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:30px;transition:transform .25s ease,box-shadow .25s ease}
.tile:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(13,59,47,.1)}
.tile.dark{background:var(--g);border-color:var(--g);color:#f4f7f5}
.tile.dark h3,.tile.dark b{color:#fff}
.tile.dark p,.tile.dark li,.tile.dark ul,.tile.dark span{color:#f4f7f5}
.tile.tint{background:var(--tint);border-color:#d3dfcd}
.tile h3{font-size:1.3125rem;line-height:1.35;margin-bottom:10px;font-weight:800;letter-spacing:-.01em}
.tile p{color:var(--ink2);font-size:0.9688rem}
.tile .ic{width:48px;height:48px;border-radius:15px;background:rgba(13,59,47,.08);display:grid;place-items:center;font-size:1.5rem;margin-bottom:22px}
.tile.dark .ic{background:rgba(255,255,255,.12)}
.tag{display:inline-block;font-size:0.75rem;color:var(--g);background:var(--lime);border-radius:999px;padding:1px 10px;margin-left:8px;font-weight:700;vertical-align:middle}
.tile.big{display:flex;flex-direction:column;justify-content:flex-end;padding:40px}
.tile.big h3{font-size:clamp(1.875rem, 1rem + 3.6vw, 2.75rem);letter-spacing:-.025em;line-height:1.15;margin-bottom:16px}
.tile.big p{font-size:1.0938rem;max-width:520px}
.tile.big .ic{margin-bottom:auto;width:60px;height:60px;font-size:1.875rem}
/* facts */
.facts-s{padding:0 0 32px}
.facts .tile{padding:26px 28px}
.facts b{display:block;font-size:clamp(2.25rem, 1rem + 4.6vw, 3.5rem);line-height:1.05;font-weight:900;letter-spacing:-.03em;color:var(--g);margin-bottom:8px}
.facts .dark b{color:var(--lime)}
.facts span{font-size:0.9062rem;color:var(--ink2)}
.facts .dark span{color:#f4f7f5}
/* shenzhen */
.statement{padding:40px}
.statement p{font-size:clamp(1.25rem, 1rem + 2.6vw, 1.875rem);line-height:1.5;color:var(--ink);font-weight:700;letter-spacing:-.01em;max-width:900px}
.tile ul{list-style:none;margin-top:16px;font-size:0.9375rem;color:var(--ink2)}
.tile li{padding-left:18px;position:relative;margin:6px 0}
.tile li:before{content:"";position:absolute;left:0;top:11px;width:8px;height:8px;border-radius:50%;background:var(--g2)}
.tile.dark li:before{background:var(--lime)}
/* why */
.num{width:36px;height:36px;border-radius:50%;background:var(--g);color:#fff;display:grid;place-items:center;font-weight:800;font-size:0.9375rem;margin-bottom:18px}
.tile.dark .num{background:var(--lime);color:var(--g)}
.numtile{display:flex;align-items:center;gap:30px;position:relative;overflow:hidden}
.bignum{font-size:clamp(4.375rem, 1rem + 10vw, 8rem);font-weight:900;letter-spacing:-.05em;line-height:.9;color:var(--g);opacity:.9;flex:none}
.wide{display:flex;gap:22px;align-items:center}
.wide .num{margin:0;flex:none}
.wide h3{margin-bottom:4px}
/* steps */
.step{counter-increment:s}
.step:before{content:"0" counter(s);display:block;font-size:2.75rem;font-weight:900;letter-spacing:-.04em;line-height:1;color:var(--g);opacity:.25;margin-bottom:18px}
.step.dark:before{color:var(--lime);opacity:.8}
.bento:has(.step){counter-reset:s}
/* faq */
.faq{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);align-items:start}
.faq details:last-child{grid-column:span 2}
.faq details{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:0 26px;transition:transform .25s ease,box-shadow .25s ease}
.faq details:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(13,59,47,.08)}
.faq details[open]{background:var(--tint);border-color:#d3dfcd}
.faq summary{cursor:pointer;font-weight:700;font-size:1.0625rem;padding:22px 30px 22px 0;list-style:none;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::marker{content:""}
.faq summary:after{content:"+";position:absolute;right:0;top:50%;transform:translateY(-50%);font-size:1.625rem;font-weight:400;color:var(--g)}
.faq details[open] summary:after{content:"–"}
.faq details p{padding:0 0 22px;color:var(--ink2);font-size:0.9688rem}
/* offices */
.off,.here{display:flex;flex-direction:column;justify-content:center;min-height:130px}
.off b,.here b{font-size:1.75rem;font-weight:900;letter-spacing:-.02em;line-height:1.2;margin-bottom:4px}
.here span{color:var(--lime);font-size:0.9062rem}
.off a{font-size:0.9062rem}
/* contact */
.contact-l{padding:44px}
.contact-l .eyebrow{color:var(--lime)}
.contact-l h2{color:#fff;font-size:clamp(1.75rem, 1rem + 3.6vw, 2.75rem);margin-bottom:16px}
.contact-l p{color:#f4f7f5;margin-bottom:28px;font-size:1.0312rem;max-width:520px}
.cbox{padding:36px;display:flex;flex-direction:column;justify-content:center}
.cbox dl{display:grid;grid-template-columns:84px 1fr;gap:14px 10px}
.cbox dt{color:var(--ink2);font-size:0.875rem;padding-top:2px}
.cbox dd{font-weight:500}
.cbox .big{font-size:1.75rem;font-weight:900;letter-spacing:-.02em;color:var(--g)}
.cbox .note{margin-top:18px;font-size:0.8438rem;color:var(--ink2)}
/* footer */
footer{background:var(--g);color:#a9c2b4;padding:44px 0 28px;font-size:0.875rem;margin-top:40px}
footer .wrap{display:flex;flex-wrap:wrap;gap:24px 60px;justify-content:space-between}
footer a{color:#d8e8de}
footer h4{color:#fff;margin-bottom:8px;font-size:0.9375rem}
footer .copy{width:100%;border-top:1px solid rgba(255,255,255,.15);padding-top:18px;margin-top:6px;font-size:0.8125rem}
.callbar{display:none}
/* reveal */
.js .rv{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1),box-shadow .25s ease}
.js .rv.in{opacity:1;transform:none}
.js .tile.rv.in:hover{transform:translateY(-4px)}
.js details.rv.in:hover{transform:translateY(-3px)}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 .js .rv{opacity:1;transform:none;transition:none}
 .tile,details,.btn{transition:none}
 .tile:hover,details:hover,.btn:hover{transform:none}
}
@media(max-width:960px){
 nav{display:none}
 .c3{grid-column:span 6}.c4{grid-column:span 6}.c5{grid-column:span 12}.c6{grid-column:span 6}.c7{grid-column:span 12}.c8{grid-column:span 12}
 .r2{grid-row:auto}
 .tile.big{min-height:300px}
 .hero{padding:72px 0 40px}
}
@media(max-width:640px){
 .logo img{height:36px;max-width:145px}
 .logo-city{display:none}
 header.nav .wrap{gap:8px}
 :root{--gap:14px;--r:22px}
 section{padding:40px 0}
 .wrap{padding:0 16px}
 .bento{grid-template-columns:1fr}
 .c3,.c4,.c5,.c6,.c7,.c8,.c12{grid-column:auto}
 .facts{grid-template-columns:1fr 1fr}
 .facts .c3{grid-column:auto}
 .facts .tile{padding:20px}
 .tile{padding:24px}
 .tile.big{padding:28px;min-height:0}
 .tile.big .ic{margin-bottom:28px}
 .numtile{flex-direction:column;align-items:flex-start;gap:10px}
 .wide{align-items:flex-start}
 .faq{grid-template-columns:1fr}
 .faq details:last-child{grid-column:auto}
 .hero{padding:48px 0 32px}
 .hero h1{margin-bottom:22px}
 .slogan{margin-top:30px}
 .topbar .wrap{font-size:0.8125rem}
 .btn{padding:14px 26px;font-size:1rem}
 .contact-l{padding:30px}
 .cbox dl{grid-template-columns:1fr;gap:4px}
 .cbox dd{margin-bottom:10px}
 body{padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))}
 .callbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:30;background:rgba(243,240,232,.96);backdrop-filter:blur(8px);border-top:1px solid var(--line);padding:10px 14px;padding-bottom:max(10px,env(safe-area-inset-bottom,0px));gap:10px}
 .callbar a,.callbar button{flex:1;display:flex;align-items:center;justify-content:center;text-align:center;padding:8px 0;border-radius:999px;font-weight:700;font-size:0.9375rem;line-height:1.15;font-family:inherit;cursor:pointer;text-decoration:none;appearance:none;-webkit-appearance:none;border:0;background:transparent;color:inherit}
 .callbar .c1{background:var(--g);color:#fff}
 .callbar .c-wechat{background:var(--g);color:#fff}
 .callbar .c3{border:1.5px solid var(--g);color:var(--g);background:transparent}
}

/* image cards (AI placeholder images) */
.pic{display:block;width:100%;height:auto;object-fit:cover;border-radius:calc(var(--r) - 8px);background:var(--tint)}
.tile.has-pic{padding:14px 14px 30px}
.tile.has-pic>*:not(.pic){margin-left:16px;margin-right:16px}
.tile.has-pic .pic{aspect-ratio:4/3;margin-bottom:22px}
.tile.has-pic.big{padding:14px 14px 40px}
.tile.has-pic.big>*:not(.pic){margin-left:26px;margin-right:26px}
.tile.has-pic.big .pic{flex:1;min-height:260px;aspect-ratio:auto;margin-bottom:28px}
.visually-hidden{
  position:absolute !important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}
.herobox{padding:0 0 32px}
.herobox .tile{padding:12px;overflow:hidden}
.herobox .hero-carousel-tile{position:relative}
.hero-carousel{position:relative}
.hero-carousel-stage{position:relative}
.hero-carousel-track{
  display:flex;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
  touch-action:manipulation;
  scrollbar-width:none;
}
.hero-carousel-track::-webkit-scrollbar{display:none}
@media (prefers-reduced-motion: no-preference){
  .hero-carousel-track{scroll-behavior:smooth}
}
.hero-slide{
  flex:0 0 100%;
  margin:0;
  scroll-snap-align:start;
  scroll-snap-stop:always;
}
.herobox .hero-slide .pic,
.herobox .pic{
  aspect-ratio:16/9;
  width:100%;
  height:auto;
  object-fit:cover;
  border-radius:calc(var(--r) - 8px);
}
.hero-slide--banner .pic{object-position:50% 32%}
.hero-slide--flyer .pic{object-position:50% 50%}
.hero-slide--badge .pic{object-position:50% 42%}
.hero-slide--booth .pic,
.hero-slide--mascots .pic,
.hero-slide--badges .pic{object-position:50% 50%}
.hero-carousel-controls{
  position:absolute;
  inset:0;
  z-index:2;
  display:flex;
  justify-content:space-between;
  align-items:center;
  pointer-events:none;
  padding:0 10px;
  box-sizing:border-box;
}
.hero-carousel-btn{
  pointer-events:auto;
  width:44px;height:44px;
  border:0;border-radius:50%;
  background:rgba(13,59,47,.72);
  color:#fff;
  font-size:28px;
  line-height:1;
  cursor:pointer;
  display:grid;
  place-items:center;
}
.hero-carousel-btn:hover,
.hero-carousel-btn:focus-visible{
  background:rgba(13,59,47,.92);
  outline:2px solid #fff;
  outline-offset:2px;
}
.hero-carousel-markers{
  position:absolute;
  left:0;right:0;bottom:14px;
  z-index:2;
  display:flex;
  justify-content:center;
  gap:8px;
}
.hero-carousel-markers button{
  width:8px;height:8px;
  padding:0;
  border:0;border-radius:50%;
  background:rgba(255,255,255,.55);
  cursor:pointer;
}
.hero-carousel-markers button[aria-current="true"]{
  background:#fff;
  width:18px;
  border-radius:8px;
}
.cbox.has-pic .pic{aspect-ratio:16/10;margin-bottom:24px}
@media(max-width:640px){
 .herobox .hero-slide .pic,
 .herobox .pic{aspect-ratio:4/3}
 .tile.has-pic{padding:10px 10px 24px}
 .tile.has-pic>*:not(.pic){margin-left:14px;margin-right:14px}
 .tile.has-pic.big{padding:10px 10px 28px}
 .tile.has-pic.big>*:not(.pic){margin-left:16px;margin-right:16px}
 .tile.has-pic.big .pic{flex:none;min-height:0;aspect-ratio:4/3;margin-bottom:22px}
}

/* ===== Theme enhancements (modern-web-guidance) ===== */
.skip-link{
  position:absolute;
  left:16px;
  top:8px;
  z-index:1000;
  background:var(--g);
  color:#fff;
  padding:8px 16px;
  border-radius:999px;
  font-weight:700;
}
.skip-link:hover{color:#fff;text-decoration:none}
.skip-link:not(:focus):not(:focus-visible){
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}
:focus-visible{outline:2px solid var(--g);outline-offset:3px}
.tile.dark :focus-visible,
.btn-d:focus-visible,
.btn-lime:focus-visible,
.topbar :focus-visible,
footer :focus-visible,
.callbar .c1:focus-visible,
.callbar .c-wechat:focus-visible{outline-color:var(--lime)}
header.nav.is-stuck{box-shadow:0 8px 24px rgba(13,59,47,.08)}

/* Site nav: collapsed popover by default; .is-wide shows the same list inline */
.site-nav{margin-inline-start:auto;display:flex;align-items:center}
.menu-button{
  appearance:none;
  -webkit-appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  font-weight:700;
  color:var(--g);
  background:transparent;
  border:1.5px solid var(--g);
  border-radius:999px;
  padding:9px 20px;
  font-size:0.9375rem;
  min-block-size:2.75rem;
  min-inline-size:2.75rem;
  line-height:1.2;
  font-family:inherit;
  white-space:nowrap;
}
.menu-button:hover{background:rgba(13,59,47,.06)}
.menu-button:focus-visible{outline:2px solid var(--g);outline-offset:3px}
.menu-button{anchor-name:--menu-button}
#site-menu{
  display:none;
  box-sizing:border-box;
  inset:auto;
  inset-block-start:4.75rem;
  inset-block-start:anchor(--menu-button bottom);
  inset-inline-end:1rem;
  margin-block-start:0.5rem;
  inline-size:min(80dvw, 24rem);
  max-inline-size:calc(100dvw - 2rem);
  max-block-size:calc(100dvh - 6rem);
  overflow:auto;
  padding:8px 8px 12px;
  border:1px solid var(--line);
  border-radius:18px;
  background:rgba(251,250,246,.98);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  box-shadow:0 16px 40px rgba(13,59,47,.12);
  list-style:none;
}
#site-menu:is(:popover-open,.\:popover-open),
#site-menu.is-open{display:flex;flex-direction:column;gap:0}
#site-menu a{display:block;padding:12px 16px;min-block-size:2.75rem;font-weight:600;color:var(--ink);text-decoration:none;border-radius:12px}
#site-menu a:hover{background:var(--tint);color:var(--g);text-decoration:none}
#site-menu a[aria-current="page"]{color:var(--g);font-weight:700;box-shadow:inset 3px 0 0 var(--g)}
header.nav.is-wide .menu-button{display:none}
header.nav.is-wide #site-menu{
  position:static;
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:26px;
  inset:auto;
  inline-size:auto;
  max-inline-size:none;
  max-block-size:none;
  overflow:visible;
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
header.nav.is-wide #site-menu::backdrop{display:none}
header.nav.is-wide #site-menu a{padding:0;min-block-size:0;border-radius:0;font-weight:400;color:var(--ink2)}
header.nav.is-wide #site-menu a:hover{background:transparent;color:var(--g)}
header.nav.is-wide #site-menu a[aria-current="page"]{color:var(--g);font-weight:700;box-shadow:none;text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px}

@media (prefers-reduced-motion: no-preference){
  #site-menu,
  #cs-panel{
    transition:opacity .2s ease-out, transform .2s ease-out, display .2s, overlay .2s;
    transition-behavior:allow-discrete;
  }
  #site-menu:is(:popover-open,.\:popover-open),
  #cs-panel:is(:popover-open,.\:popover-open){opacity:1;transform:none}
  @starting-style{
    #site-menu:is(:popover-open,.\:popover-open),
    #cs-panel:is(:popover-open,.\:popover-open){opacity:0;transform:translateY(8px)}
  }
}

@supports (animation-timeline: scroll()){
  header.nav{
    animation:nav-stuck linear both;
    animation-timeline:scroll();
    animation-range:0 12px;
  }
  @keyframes nav-stuck{
    to{box-shadow:0 8px 24px rgba(13,59,47,.08)}
  }
  @media (prefers-reduced-motion: reduce){
    header.nav{animation:none}
  }
}

/* Off-screen sections: skip layout/paint until near viewport.
   content-visibility is Baseline Newly available (2025-09); unsupported browsers ignore it. */
#zhengjian,#why,#process,#faq,#offices,#contact{
  content-visibility:auto;
  contain-intrinsic-size:auto none auto 800px;
}

.bento{container:bento / inline-size}
.tile{container:tile / inline-size}
@container tile (inline-size > 22rem){
  .tile:not(.big) h3{font-size:clamp(1.25rem, 5cqi, 1.375rem)}
}

@media (forced-colors: active){
  nav a[aria-current="page"],
  #site-menu a[aria-current="page"]{outline:2px solid CanvasText;outline-offset:2px}
}

@media(prefers-reduced-motion:reduce){
  header.nav.is-stuck{box-shadow:none}
}


/* ===== Article / legal landing typography (modern-web-guidance) ===== */
.entry-shell{padding:48px 0 80px}
.entry{
  max-width:46rem;
  margin:0 auto;
  font-size:1.0625rem;
  line-height:1.8;
}
.entry h1{
  font-size:clamp(1.75rem, 1rem + 4vw, 2.75rem);
  line-height:1.22;
  letter-spacing:-.02em;
  margin:0 0 12px;
  text-wrap:balance;
}
.entry .entry-meta{
  color:var(--ink2);
  font-size:0.9062rem;
  margin-bottom:28px;
}
.entry .lead-line{
  font-size:1.125rem;
  color:var(--ink2);
  margin-bottom:28px;
  text-wrap:pretty;
}
.entry h2{
  font-size:clamp(1.375rem, 1rem + 3vw, 1.875rem);
  margin:2.2em 0 .7em;
  text-wrap:balance;
}
.tile h3 a{color:inherit;text-decoration:none}
.tile h3 a:hover{text-decoration:underline;text-underline-offset:3px}
.tile.dark h3 a,.tile.dark a,.tile.dark a:visited{color:#fff}
.tile.dark a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.tile.dark p,.tile.dark ul,.tile.dark li,.tile.dark span{color:#f4f7f5}
.entry ul,.entry ol{margin:0 0 1.2em;padding-inline-start:1.35em}
.entry p,.entry li{text-wrap:pretty}
.entry p{margin:0 0 1.1em}
.entry a{text-decoration:underline;text-underline-offset:3px}
.entry figure{
  margin:1.6em 0 1.8em;
  background:transparent;
  border:0;
  padding:0;
}
.entry figure img{
  display:block;
  width:100%;
  height:auto;
  border-radius:18px;
  background:var(--tint);
}
.entry figcaption{
  margin-top:8px;
  font-size:0.8438rem;
  color:var(--ink2);
}
.entry .certs{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin:1.6em 0 1.8em;
}
.entry .certs figure{margin:0}
@media(max-width:640px){
  .entry .certs{grid-template-columns:1fr}
  .entry-shell{padding:36px 0 72px}
}

.crumb{font-size:0.875rem;color:var(--ink2);margin-bottom:18px}
.crumb a{color:var(--ink2)}
.related{margin-top:48px;padding-top:28px;border-top:1px solid var(--line)}
.related h2{font-size:1.375rem;margin-bottom:16px}
.related ul{list-style:none;padding:0}
.related li{margin:8px 0}

/* Legal landing */
.legal-intro{padding-top:48px}
.article-cards .tile h3{font-size:1.25rem;margin-bottom:8px}
.article-cards .tile p{font-size:0.9375rem}
.article-cards .tile .meta{font-size:0.8125rem;color:var(--ink2);margin-bottom:10px}
.article-cards a.tile{color:inherit;display:flex;flex-direction:column;text-decoration:none}
.article-cards a.tile:hover{text-decoration:none}
.article-cards a.tile .more{margin-top:auto;padding-top:14px;font-weight:700;color:var(--g)}

/* Fabohui homepage block */
#fabohui .tile.has-pic .pic{aspect-ratio:4/3}
#fabohui .tile.has-pic .pic-portrait{aspect-ratio:3/4}
#fabohui .pic-caption{margin-top:10px;font-size:0.8125rem;color:var(--ink2)}
#fabohui .fabohui-photos{margin-top:8px}
#fabohui .fabohui-photos-title{font-size:clamp(1.25rem, 1rem + 2vw, 1.625rem);line-height:1.25;letter-spacing:-.02em;margin:36px 0 16px;max-width:none}
#zhengjian .doc-list + p{margin-top:14px}
#zhengjian h3 + p{margin-bottom:0}
nav a[aria-current="page"]{color:var(--g);font-weight:700}

@media(max-width:960px){
  .entry-shell .wrap{padding:0 16px}
}

/* 证件翻译区块：常见证件标签，复用便当格 */
#zhengjian .doc-lead{margin:18px 0 8px;font-size:0.8125rem;font-weight:700;letter-spacing:.08em;color:var(--g2)}
#zhengjian .doc-lead:first-of-type{margin-top:16px}
#zhengjian ul.doc-list{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
#zhengjian ul.doc-list li{position:static;margin:0;padding:6px 12px;border:1px solid var(--line);border-radius:999px;font-size:0.9062rem;font-weight:600;color:var(--ink);background:var(--bg);line-height:1.4}
#zhengjian ul.doc-list li:before{content:none}
#zhengjian .pic-caption{margin:-14px 0 16px;font-size:0.8125rem;color:var(--ink2)}
#zhengjian .has-pic .pic-caption{margin-top:-6px}

/* 首页法博会导流至法律翻译页专题 */
.fabohui-teaser{padding:8px 0 24px}
.fabohui-teaser h2{font-size:clamp(1.375rem, 1rem + 2.8vw, 2rem);margin-bottom:8px;max-width:none}
.fabohui-teaser .eyebrow{margin-bottom:8px}
.fabohui-teaser .wide{align-items:flex-start}

/* 锚点避开 sticky 顶栏+导航，避免 #zhengjian / #fabohui 标题被挡住 */
#services,#shenzhen,#zhengjian,#why,#process,#faq,#offices,#contact,
#fabohui,.fabohui-teaser{
  scroll-margin-top: 96px;
}
@media(max-width:960px){
  #services,#shenzhen,#zhengjian,#why,#process,#faq,#offices,#contact,
  #fabohui,.fabohui-teaser{
    scroll-margin-top: 170px;
  }
}

/* floating customer service */
.cs-dock{
  position:fixed;
  z-index:80;
  isolation:isolate;
  right:max(20px,env(safe-area-inset-right));
  bottom:max(24px,env(safe-area-inset-bottom));
  display:flex;
  flex-direction:column;
  align-items:flex-end;
}
.cs-fab{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin:0;
  padding:12px 18px 12px 16px;
  border:0;
  border-radius:999px;
  background:var(--g);
  color:#fff;
  1 inherit;
  cursor:pointer;
  box-shadow:0 10px 24px rgba(13,59,47,.28);
}
.cs-fab:hover{background:var(--g2)}
.cs-fab:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
.cs-fab-ic{display:block;flex:none}
#cs-panel{
  box-sizing:border-box;
  width:min(320px,calc(100vw - 32px));
  padding:16px 16px 14px;
  border:1px solid var(--line);
  border-radius:20px;
  background:var(--card);
  color:var(--ink);
  box-shadow:0 16px 40px rgba(21,32,27,.16);
}
#cs-panel:is(:popover-open,.\:popover-open),
#cs-panel.is-open{
  display:block;
  position:fixed;
  z-index:80;
  inset:auto;
  margin:0;
  right:max(16px,env(safe-area-inset-right));
  bottom:calc(24px + 58px + env(safe-area-inset-bottom));
  max-height:calc(100vh - 8rem);
  max-height:calc(100dvh - 8rem);
  overflow:auto;
  overscroll-behavior:contain;
}
#cs-panel[hidden]{display:none!important}
.cs-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:2px}
#cs-panel h2{font-size:1.125rem;line-height:1.3;letter-spacing:0;font-weight:800;margin:0;max-width:none}
.cs-close{
  margin:0;padding:4px 8px;border:0;border-radius:8px;background:transparent;
  color:var(--ink2);font:600 0.875rem/1.2 inherit;cursor:pointer
}
.cs-close:hover{background:var(--tint);color:var(--ink)}
.cs-close:focus-visible{outline:2px solid var(--g);outline-offset:2px}
.cs-intro{margin:0 0 12px;font-size:0.8125rem;color:var(--ink2)}
.cs-row{
  display:flex;flex-direction:column;gap:2px;
  padding:10px 12px;margin-bottom:8px;
  border:1px solid var(--line);border-radius:14px;
  color:var(--ink);text-decoration:none;background:#fff
}
.cs-row:hover{border-color:var(--g);text-decoration:none}
.cs-row span,.cs-wechat p span{display:block;font-size:0.75rem;font-weight:600;color:var(--g);letter-spacing:.04em}
.cs-row strong{font-size:0.9375rem;font-weight:700;word-break:break-all}
.cs-wechat{padding:10px 12px 12px;border:1px solid var(--line);border-radius:14px;background:#fff;margin-bottom:8px}
.cs-wechat p{margin:0 0 10px;font-size:0.875rem;color:var(--ink);line-height:1.45}
.cs-wechat img{display:block;width:100%;height:auto;max-height:280px;object-fit:contain;background:#fff;border-radius:8px}
button.cs-wechat-btn{
  display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  width:100%;text-align:start;cursor:pointer;
  font:inherit;color:var(--ink);appearance:none;-webkit-appearance:none;
}
#wechat-pop{
  box-sizing:border-box;
  width:min(320px,calc(100vw - 32px));
  padding:16px 16px 14px;
  border:1px solid var(--line);
  border-radius:20px;
  background:var(--card);
  color:var(--ink);
  box-shadow:0 16px 40px rgba(21,32,27,.16);
}
#wechat-pop:is(:popover-open,.\:popover-open),
#wechat-pop.is-open{
  display:block;
  position:fixed;
  z-index:90;
  inset:auto;
  margin:0;
  left:50%;
  bottom:max(24px,env(safe-area-inset-bottom));
  transform:translateX(-50%);
  max-height:calc(100dvh - 8rem);
  overflow:auto;
  overscroll-behavior:contain;
}
#wechat-pop[hidden]{display:none!important}
#wechat-pop h2{font-size:1.125rem;line-height:1.3;letter-spacing:0;font-weight:800;margin:0;max-width:none}
.wechat-copy-status{margin:0 0 8px;font-size:0.9375rem;font-weight:700;color:var(--g)}
.wechat-pop-hint{margin:0 0 10px;font-size:0.8125rem;color:var(--ink2);line-height:1.45}
#wechat-pop img{display:block;width:100%;height:auto;max-height:280px;object-fit:contain;background:#fff;border-radius:8px}
@media(max-width:640px){
  .cs-dock{bottom:calc(76px + env(safe-area-inset-bottom));right:max(14px,env(safe-area-inset-right))}
  #cs-panel:is(:popover-open,.\:popover-open),
  #cs-panel.is-open{z-index:80;right:max(12px,env(safe-area-inset-right));bottom:calc(76px + 58px + env(safe-area-inset-bottom));top:188px;max-height:none}
  .cs-fab{padding:12px 14px}
  .cs-fab-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  .cs-wechat img{max-height:160px}
  #wechat-pop:is(:popover-open,.\:popover-open),
  #wechat-pop.is-open{bottom:calc(76px + env(safe-area-inset-bottom));z-index:90}
  #wechat-pop img{max-height:200px}
}
@media(prefers-reduced-motion:reduce){
  .cs-fab{box-shadow:none}
}
@media print{
  .cs-dock,.callbar,#wechat-pop{display:none!important}
}

/* Certificate translation landing */
.zj-landing .doc-lead{margin:18px 0 8px;font-size:0.8125rem;font-weight:700;letter-spacing:.08em;color:var(--g2)}
.zj-landing ul.doc-list{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.zj-landing ul.doc-list li{position:static;margin:0;padding:6px 12px;border:1px solid var(--line);border-radius:999px;font-size:0.9062rem;font-weight:600;color:var(--ink);background:var(--bg);line-height:1.4}
.zj-landing ul.doc-list li:before{content:none}
.zj-landing ul.doc-list li a{color:inherit;text-decoration:none}
.zj-landing ul.doc-list li:has(> a):hover{border-color:var(--g)}
.zj-landing .tile h3 a{color:inherit;text-decoration:none}
.zj-landing .tile h3 a:hover{color:var(--g)}
.zj-landing .tile p{margin-top:12px}
.zj-landing ul.zj-order{margin:0 0 22px;padding-inline-start:1.2em}
.zj-landing ul.zj-order li{margin:0 0 8px}
.zj-landing section{padding:0 0 64px}
.zj-landing .hero{padding-bottom:48px}
@media(max-width:640px){
  .zj-landing section{padding:0 0 48px}
}

/* Article tables and news cards */
.entry-body table{width:100%;border-collapse:collapse;margin:0 0 1.4em;font-size:0.9375rem}
.entry-body th,.entry-body td{border:1px solid var(--line);padding:8px 12px;text-align:left;vertical-align:top}
.entry-body thead th{background:rgba(15,61,46,.06);font-weight:700}
.entry-body h3{font-size:1.15rem;margin:1.4em 0 .5em}
#news{padding:0 0 64px}