:root{
  --red:#E6212A;
  --red-deep:#A8151C;
  --red-wash:#FBEBE9;
  --ink:#2B2D2C;
  --ink-soft:#6B655D;
  --paper:#F7F3EC;
  --paper-card:#FFFFFF;
  --line:#E4DACB;
  --line-strong:#D8CBB4;
  --serif:"Noto Serif SC","Songti SC","STSong",serif;
  --sans:-apple-system,BlinkMacSystemFont,"PingFang SC","Noto Sans SC","Microsoft YaHei","Segoe UI",sans-serif;
  --maxw:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--paper);
  line-height:1.7;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
}
[data-lang="en"] body{letter-spacing:.1px}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font:inherit;cursor:pointer}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.i18n-en{display:none!important}
[data-lang="en"] .i18n-zh{display:none!important}
[data-lang="en"] .i18n-en{display:inline!important}
[data-lang="en"] .i18n-en-block{display:block!important}
[data-lang="en"] h1,[data-lang="en"] h2,[data-lang="en"] h3{font-family:var(--serif)}
h1,h2,h3{font-family:var(--serif)}

/* ================= paper texture ================= */
.ruled{
  background-image:repeating-linear-gradient(0deg,transparent,transparent 27px,rgba(43,45,44,.045) 27px,rgba(43,45,44,.045) 28px);
}

/* ================= top nav ================= */
.topbar{background:var(--ink);color:#D9D4CB;font-size:12.5px}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;height:34px}
.topbar .contact{display:flex;gap:18px}
.topbar a.lang-btn{border:1px solid rgba(255,255,255,.28);border-radius:3px;padding:2px 9px;font-size:12px;color:#EDE9E1}
.topbar a.lang-btn:hover{border-color:#fff;color:#fff}

.topnav{position:sticky;top:0;z-index:60;background:rgba(247,243,236,.94);backdrop-filter:blur(6px);border-bottom:1px solid var(--line-strong)}
.topnav .wrap{display:flex;align-items:center;gap:28px;height:76px}
.brand{display:flex;align-items:center;gap:10px;flex-shrink:0}
.brand img{height:38px;width:auto}
.brand .name{font-family:var(--serif);font-weight:700;font-size:17px;line-height:1.3;color:var(--ink)}
.brand .name small{display:block;font-family:var(--sans);font-weight:400;font-size:10.5px;color:var(--ink-soft);letter-spacing:.3px;margin-top:2px}
nav.mainnav{display:flex;gap:2px;margin-left:8px}
nav.mainnav a{font-size:15px;padding:9px 12px;border-radius:3px;color:var(--ink-soft);white-space:nowrap}
nav.mainnav a:hover{color:var(--red);background:var(--red-wash)}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:14px}
.nav-phone{font-size:15px;color:var(--ink);white-space:nowrap}
.nav-phone b{font-family:var(--serif);color:var(--red);font-size:17px;letter-spacing:.3px}
.cta-btn{display:inline-flex;align-items:center;gap:6px;background:var(--red);color:#fff;padding:10px 18px;border-radius:3px;font-size:15px;font-weight:600;white-space:nowrap;border:1px solid var(--red)}
.cta-btn:hover{background:var(--red-deep);border-color:var(--red-deep)}
.cta-btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line-strong)}
.cta-btn.ghost:hover{border-color:var(--ink);background:transparent;color:var(--ink)}
.nav-toggle{display:none}

/* ================= hero ================= */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line-strong)}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, var(--paper) 0%, var(--paper) 26%, rgba(247,243,236,.86) 46%, rgba(247,243,236,.62) 100%),
    url('/assets/hero-bg.jpg') center 30% / cover no-repeat;
  filter:saturate(.82) contrast(.96);
  z-index:0;
}
.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center;padding:76px 0 64px}
.hero-tag{display:inline-block;font-size:14px;color:var(--red);border-bottom:2px solid var(--red);padding-bottom:6px;margin-bottom:26px;font-weight:600;letter-spacing:.5px}
.hero h1{font-size:47px;font-weight:700;line-height:1.4;color:var(--ink);margin-bottom:22px;max-width:15ch}
[data-lang="en"] .hero h1{font-size:38px;max-width:13ch;line-height:1.28}
.hero p.sub{font-size:17.5px;color:var(--ink-soft);max-width:46ch;margin-bottom:34px}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:38px}
.hero-ctas .cta-btn{padding:13px 24px;font-size:16px}
.trust-line{display:flex;gap:0;flex-wrap:wrap;border-top:1px solid var(--line-strong);padding-top:20px}
.trust-line .t{padding:0 22px 0 0;margin-right:22px;border-right:1px solid var(--line-strong)}
.trust-line .t:last-child{border-right:none}
.trust-line b{font-family:var(--serif);color:var(--red);font-size:22px;display:block}
.trust-line span{font-size:13.5px;color:var(--ink-soft)}

.seal-wrap{position:relative;display:flex;align-items:center;justify-content:center;height:100%;min-height:340px}
.seal{position:relative;width:250px;height:250px;border-radius:50%;border:5px solid var(--red);display:flex;align-items:center;justify-content:center;transform:rotate(-9deg);opacity:.94}
.seal::before{content:"";position:absolute;inset:11px;border:1.5px solid var(--red);border-radius:50%}
.seal-inner{text-align:center;color:var(--red)}
.seal-inner .big{font-family:var(--serif);font-size:26px;font-weight:700;letter-spacing:6px;line-height:1.5}
.seal-inner .small{font-size:10px;letter-spacing:1.5px;margin-top:4px}
.seal-inner .small.en{text-transform:uppercase;opacity:.8;letter-spacing:1.8px}
.seal-star{position:absolute;width:14px;height:14px;background:var(--red);clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}

/* ================= section shell ================= */
section{padding:76px 0}
.sec-label{font-size:13px;color:var(--red);font-weight:600;margin-bottom:10px;display:flex;align-items:baseline;gap:10px}
.sec-label .en{font-size:10.5px;letter-spacing:2.5px;color:var(--ink-soft);font-weight:600;text-transform:uppercase}
.sec-head h2{font-size:29px;font-weight:700;color:var(--ink);line-height:1.4;max-width:22ch}
#services .sec-head h2,#quick .sec-head h2,#personas .sec-head h2{max-width:34ch}
.sec-head p{color:var(--ink-soft);margin-top:12px;max-width:60ch;font-size:16px}
.sec-head{margin-bottom:44px}
section.on-paper{background:var(--paper-card);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* ================= bilingual decorative labels (always shown, not toggled) ================= */
.bi-kicker{font-size:12px;color:var(--red);font-weight:700;letter-spacing:.5px;margin-bottom:10px}
.bi-kicker .en{color:var(--ink-soft);font-weight:600;text-transform:uppercase;letter-spacing:1.5px;font-size:10.5px;margin-left:9px}
.bi-tag{display:inline-block;font-size:11.5px;color:var(--ink-soft);border:1px solid var(--line-strong);padding:2px 8px;border-radius:2px;font-weight:600}
.bi-tag .en{text-transform:uppercase;letter-spacing:1px;color:var(--red-deep);margin-left:6px}
.pk .en{display:block;font-size:10px;letter-spacing:1.5px;color:var(--ink-soft);font-weight:600;text-transform:uppercase;margin-top:3px}
.cat .en{margin-left:8px;letter-spacing:1.5px;color:var(--ink-soft);font-weight:600}
.num .unit{display:block;font-family:var(--sans);font-size:9px;letter-spacing:1.2px;color:var(--ink-soft);font-weight:600;text-transform:uppercase;margin-top:3px}
.case .stat .unit{font-family:var(--sans);font-size:13px;color:var(--ink-soft);font-weight:600;letter-spacing:.5px;margin-left:4px}
.case .stat .unit .en{display:block;font-size:9.5px;letter-spacing:1.5px;text-transform:uppercase;color:var(--ink-soft);opacity:.8;margin-top:1px}

/* ================= service directory (numbered clause list) ================= */
.clause-list{border-top:1px solid var(--line-strong)}
.clause{display:grid;grid-template-columns:70px 1fr 1.4fr auto;gap:24px;align-items:center;padding:26px 0;border-bottom:1px solid var(--line-strong);text-align:center;justify-items:center}
.clause .num{font-family:var(--serif);font-size:28px;color:var(--red);font-weight:700}
.clause h3{font-size:19px;color:var(--ink);font-weight:700;margin-bottom:4px}
.clause h3 span{display:block;font-family:var(--sans);font-size:13.5px;font-weight:400;color:var(--ink-soft);margin-top:3px}
.clause .items{font-size:14.5px;color:var(--ink-soft);text-align:center}
.clause .items span{display:inline-block;margin:0 10px 6px 0}
.clause .items span::before{content:"";display:inline-block;width:4px;height:4px;background:var(--red);border-radius:50%;margin-right:6px;vertical-align:middle}
.clause a.enter{font-size:14.5px;color:var(--ink);border:1px solid var(--line-strong);padding:8px 16px;border-radius:3px;white-space:nowrap;align-self:center}
.clause a.enter:hover{border-color:var(--red);color:var(--red)}

/* ================= quick services table ================= */
.qs-table{width:100%;border-collapse:collapse}
.qs-table th{text-align:left;font-size:13.5px;color:var(--ink-soft);font-weight:600;padding:10px 16px;border-bottom:2px solid var(--ink)}
.qs-table td{padding:18px 16px;border-bottom:1px solid var(--line-strong);font-size:15.5px;vertical-align:middle}
.qs-table tr:hover td{background:var(--red-wash)}
.qs-table td.name{font-weight:700;color:var(--ink);font-size:16px}
.qs-table td.price{color:var(--red);font-weight:700;font-family:var(--serif)}
.qs-table td.meta{color:var(--ink-soft)}
.qs-table td.act a{font-size:14px;color:var(--ink);border-bottom:1px solid var(--ink-soft)}
.qs-table td.act a:hover{color:var(--red);border-color:var(--red)}

/* ================= personas ================= */
.persona-row{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--line-strong)}
.persona{padding:32px 28px;border-right:1px solid var(--line-strong)}
.persona:last-child{border-right:none}
.persona .pk{font-size:12px;color:var(--red);font-weight:700;letter-spacing:1px;margin-bottom:10px}
.persona h4{font-size:19px;color:var(--ink);margin-bottom:10px}
.persona p{font-size:15px;color:var(--ink-soft);margin-bottom:16px}
.persona ul{list-style:none;font-size:14.5px;color:var(--ink-soft)}
.persona ul li{padding:5px 0 5px 16px;position:relative;border-top:1px solid var(--line)}
.persona ul li:first-child{border-top:none}
.persona ul li::before{content:"—";position:absolute;left:0;color:var(--red)}

/* ================= why us ================= */
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line-strong);border-left:1px solid var(--line-strong)}
.why{padding:30px 26px;border-right:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong)}
.why .wn{font-family:var(--serif);font-size:15px;color:var(--red-deep);margin-bottom:14px}
.why h4{font-size:17.5px;color:var(--ink);margin-bottom:8px;line-height:1.4}
.why p{font-size:14.5px;color:var(--ink-soft)}

/* ================= process timeline ================= */
.timeline{display:grid;grid-template-columns:repeat(5,1fr);gap:0;position:relative;margin-top:10px}
.timeline::before{content:"";position:absolute;top:15px;left:2%;right:2%;height:1px;background:var(--line-strong)}
.tstep{position:relative;padding-right:16px}
.tstep .dot{width:31px;height:31px;border-radius:50%;background:var(--paper);border:2px solid var(--red);color:var(--red);font-family:var(--serif);font-weight:700;font-size:14px;display:flex;align-items:center;justify-content:center;position:relative;z-index:1;margin-bottom:16px}
.tstep h5{font-size:16px;color:var(--ink);margin-bottom:6px}
.tstep p{font-size:13.5px;color:var(--ink-soft)}

/* ================= case stats ================= */
.case-row{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line-strong)}
.case{padding:30px 30px 30px 0;border-right:1px solid var(--line-strong)}
.case:last-child{border-right:none;padding-right:0}
.case:nth-child(2){padding-left:30px}
.case:nth-child(3){padding-left:30px}
.case .stat{font-family:var(--serif);font-size:40px;color:var(--red);font-weight:700;line-height:1}
.case .stat sup{font-size:16px;top:-1.1em}
.case h5{font-size:16px;color:var(--ink);margin:14px 0 8px}
.case p{font-size:14.5px;color:var(--ink-soft)}
.case .tag{display:inline-block;font-size:11.5px;color:var(--ink-soft);border:1px solid var(--line-strong);padding:2px 8px;border-radius:2px;margin-top:12px}

/* ================= articles ================= */
.article-row{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.article{border-top:2px solid var(--ink);padding-top:16px}
.article .cat{font-size:12px;color:var(--red);font-weight:600;margin-bottom:8px}
.article h5{font-size:16.5px;color:var(--ink);line-height:1.5;margin-bottom:10px}
.article p{font-size:14px;color:var(--ink-soft)}

/* ================= conversion / footer ================= */
.convert{background:var(--ink);color:#DCD8CF}
.convert .sec-head h2{color:#fff}
.convert .sec-head p{color:#B6AF9F}
.convert-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px}
.form-box{display:flex;flex-direction:column;gap:14px}
.form-box input,.form-box select{background:#3A3733;border:1px solid #57524A;color:#EDE9E1;padding:13px 14px;border-radius:3px;font-size:15.5px;font-family:inherit}
.form-box input::placeholder{color:#8B857A}
.form-box button{background:var(--red);color:#fff;border:none;padding:14px;border-radius:3px;font-size:16px;font-weight:700;margin-top:4px}
.form-box button:hover{background:var(--red-deep)}
.form-note{font-size:12px;color:#8B857A;margin-top:2px}
.contact-cols{display:grid;grid-template-columns:1fr 1fr;gap:30px}
.contact-block h5{font-size:13px;color:#B6AF9F;font-weight:600;margin-bottom:10px;letter-spacing:.5px}
.contact-block p,.contact-block a{font-size:15.5px;color:#EDE9E1;display:block;margin-bottom:6px}
.qr-box{width:118px;height:118px;background:#3A3733;border:1px dashed #57524A;display:flex;align-items:center;justify-content:center;font-size:11px;color:#8B857A;text-align:center;margin-top:6px;border-radius:3px}

footer{background:#211F1C;color:#8B857A;padding:26px 0;font-size:12.5px}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}
footer .beian-link{color:#8B857A;text-decoration:underline;text-decoration-color:rgba(139,133,122,.45)}
footer .beian-link:hover{color:#EDE9E1;text-decoration-color:#EDE9E1}

/* ================= mobile sticky bar ================= */
.mbar{display:none}

@media(max-width:980px){
  nav.mainnav{display:none}
  .hero-grid{grid-template-columns:1fr;padding:50px 0 40px}
  .seal-wrap{min-height:220px;order:-1}
  .seal{width:180px;height:180px}
  .persona-row,.why-grid{grid-template-columns:1fr}
  .persona{border-right:none;border-bottom:1px solid var(--line-strong)}
  .why{border-right:none}
  .timeline{grid-template-columns:1fr 1fr}
  .timeline::before{display:none}
  .case-row{grid-template-columns:1fr}
  .case{border-right:none;border-bottom:1px solid var(--line-strong);padding:26px 0!important}
  .article-row{grid-template-columns:1fr}
  .convert-grid{grid-template-columns:1fr;gap:36px}
  .contact-cols{grid-template-columns:1fr}
  .clause{grid-template-columns:1fr;gap:8px}
  .clause a.enter{justify-self:center}
  .qs-table{display:block;overflow-x:auto}
  body{padding-bottom:64px}
  .mbar{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:70;background:var(--ink);border-top:1px solid #4A453E}
  .mbar a{flex:1;text-align:center;padding:14px 0;font-size:15px;color:#EDE9E1;font-weight:600;border-right:1px solid #4A453E}
  .mbar a:last-child{border-right:none;background:var(--red)}
}
@media(max-width:640px){
  .hero h1{font-size:32px}
  [data-lang="en"] .hero h1{font-size:28px}
  .why-grid,.timeline{grid-template-columns:1fr}
  section{padding:52px 0}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}