/* ============================================================
   Buying Office in China — design system v3
   Palette: warm paper + copper (no corporate navy, no webfonts)
   Type: system sans for text, monospace for figures
   Zero dependencies. No web fonts, no external requests.
   Icons: inline SVG. Images: optional, auto-loaded from /images.
   ============================================================ */

:root{
  /* surfaces */
  --bg:#ffffff;
  --bg-soft:#faf7f1;
  --bg-tint:#f2ece1;

  /* text */
  --ink:#1b1815;
  --ink-2:#4a443c;
  --muted:#7a7266;

  /* lines */
  --line:#e7dfd2;
  --line-2:#d6cbb9;

  /* accent — copper, the colour of the metal itself */
  --accent:#a8562b;
  --accent-2:#8c4522;
  --accent-soft:#fbf1e8;
  --accent-on-dark:#c9764a;

  --green:#2f6b4f;
  --red:#a3372a;

  /* legacy aliases (older rules still reference these) */
  --navy:var(--ink);
  --navy-2:#2b2521;
  --navy-3:var(--accent);
  --amber:var(--accent);
  --amber-soft:var(--accent-soft);

  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"PingFang SC","Microsoft YaHei",sans-serif;
  --mono:ui-monospace,"SF Mono","Cascadia Mono","Segoe UI Mono",Consolas,"Liberation Mono",Menlo,monospace;

  --wrap:1140px;
  --r:10px;
  --r-sm:6px;
  --shadow-1:0 1px 2px rgba(27,24,21,.06),0 4px 14px rgba(27,24,21,.05);
  --shadow-2:0 2px 6px rgba(27,24,21,.08),0 18px 40px rgba(27,24,21,.10);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.68;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-2)}
strong{color:var(--ink);font-weight:600}
hr{border:0;border-top:1px solid var(--line);margin:3rem 0}

h1,h2,h3,h4{font-family:var(--sans);color:var(--ink);line-height:1.14;margin:0 0 .6em;font-weight:700;letter-spacing:-.022em}
h1{font-size:clamp(2.05rem,4.2vw,3.05rem)}
h2{font-size:clamp(1.5rem,2.6vw,2rem);margin-top:0}
h3{font-size:1.16rem;letter-spacing:-.012em}
p{margin:0 0 1.05em}
.lede{font-size:1.16rem;color:var(--ink-2);max-width:62ch}
.muted{color:var(--muted)}
.small{font-size:.9rem}
.center{text-align:center}
.mw-60{max-width:62ch}
.mw-46{max-width:46ch}

/* ---------- layout ---------- */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.wrap-narrow{max-width:820px;margin:0 auto;padding:0 24px}
section{padding:5.2rem 0}
section.tight{padding:3.4rem 0}
section.soft{background:var(--bg-soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
section.tint{background:var(--bg-tint)}
section.dark{background:var(--ink);color:#f0ebe3}
section.dark h1,section.dark h2,section.dark h3{color:#fff}
section.dark .lede,section.dark p{color:#bab0a3}
@media(max-width:760px){section{padding:3.4rem 0}section.tight{padding:2.4rem 0}}

.split{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center}
.split.reverse>*:first-child{order:2}
@media(max-width:900px){.split{grid-template-columns:1fr;gap:34px}.split.reverse>*:first-child{order:0}}

.g2{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
@media(max-width:980px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){.g2,.g3,.g4{grid-template-columns:1fr}}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.hdr .bar{max-width:var(--wrap);margin:0 auto;padding:15px 24px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--sans);font-weight:700;font-size:1.04rem;letter-spacing:-.022em;color:var(--ink);white-space:nowrap}
.brand:hover{color:var(--ink)}
.brand .mark{width:30px;height:30px;flex:0 0 30px}
.nav{display:flex;align-items:center;gap:26px}
.nav a{color:var(--ink-2);font-size:.95rem;font-weight:500}
.nav a:hover{color:var(--accent)}
.nav a.active{color:var(--ink);font-weight:650}
.nav .btn{padding:10px 18px;font-size:.94rem}
.burger{display:none;width:42px;height:38px;border:1px solid var(--line-2);background:#fff;border-radius:var(--r-sm);cursor:pointer;padding:10px 10px}
.burger i{display:block;height:2px;background:var(--ink);border-radius:2px}
.burger i+i{margin-top:4px}
@media(max-width:900px){
  .nav{position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid var(--line);
       flex-direction:column;align-items:stretch;gap:0;padding:8px 24px 20px;box-shadow:var(--shadow-1);display:none}
  .nav.open{display:flex}
  .nav a{padding:13px 0;border-bottom:1px solid var(--line);font-size:1rem}
  .nav .btn{margin-top:16px;text-align:center;border-bottom:0}
  .burger{display:block}
}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:9px;padding:14px 26px;border-radius:var(--r-sm);
     font-weight:600;font-size:1rem;font-family:var(--sans);border:1px solid transparent;cursor:pointer;
     transition:transform .16s ease,box-shadow .16s ease,background .16s ease,color .16s ease;white-space:nowrap}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--accent);color:#fff;box-shadow:var(--shadow-1)}
.btn-primary:hover{background:var(--accent-2);color:#fff;box-shadow:var(--shadow-2)}
.btn-outline{background:#fff;color:var(--ink);border-color:var(--line-2)}
.btn-outline:hover{background:var(--bg-soft);color:var(--ink);border-color:var(--accent)}
.btn-wa{background:#fff;color:var(--green);border-color:#bcd6c6}
.btn-wa:hover{background:#f2f8f4;color:var(--green);border-color:#8fbda6}
.btn-light{background:#fff;color:var(--ink)}
.btn-light:hover{background:var(--bg-soft);color:var(--ink)}
.btn svg{width:18px;height:18px;flex:0 0 18px}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:2rem}

/* ---------- eyebrow / kicker ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:.78rem;font-weight:700;letter-spacing:.16em;
         text-transform:uppercase;color:var(--accent);margin-bottom:1.1rem}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--accent);opacity:.6}
section.dark .eyebrow{color:var(--accent-on-dark)}

.chip{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);
      border-radius:100px;padding:7px 15px;font-size:.85rem;color:var(--ink-2);font-weight:500}
.chip svg{width:15px;height:15px;color:var(--accent)}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:1.6rem}

/* ---------- media slots (reserved image areas) ---------- */
.media{position:relative;margin:0;border-radius:var(--r);overflow:hidden;background:var(--bg-tint);
       box-shadow:var(--shadow-1);aspect-ratio:16/10}
.media.r-4x3{aspect-ratio:4/3}
.media.r-3x4{aspect-ratio:3/4}
.media.r-1x1{aspect-ratio:1/1}
.media.r-21x9{aspect-ratio:21/9}
.media img{width:100%;height:100%;object-fit:cover;display:block}
.media .ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  text-align:center;padding:22px;
  background:
    repeating-linear-gradient(45deg,rgba(27,24,21,.05) 0 12px,rgba(27,24,21,0) 12px 24px),
    linear-gradient(160deg,#f4efe6 0%,#e9e0d2 55%,#f0e9dc 100%)}
.media .ph svg{width:34px;height:34px;color:#b3a693}
.media .ph .lbl{font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;color:#8b8172;font-weight:700}
.media .ph .dim{font-size:.76rem;color:#9c9184;font-family:var(--sans)}
.media.has-img .ph{display:none}
.media figcaption{position:absolute;left:0;right:0;bottom:0;padding:12px 16px;font-size:.82rem;color:#fff;
  background:linear-gradient(to top,rgba(20,17,14,.75),rgba(20,17,14,0))}

/* ---------- stat strip ---------- */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);
       border-radius:var(--r);overflow:hidden}
.stats div{background:#fff;padding:26px 22px}
.stats .n{font-family:var(--mono);font-size:1.75rem;font-weight:600;letter-spacing:-.02em;color:var(--accent);line-height:1;margin-bottom:8px}
.stats .l{font-size:.87rem;color:var(--muted);line-height:1.45}
@media(max-width:880px){.stats{grid-template-columns:repeat(2,1fr)}}

/* ---------- cards ---------- */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:28px 26px;
      box-shadow:var(--shadow-1);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;height:100%}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-2);border-color:var(--line-2)}
.card h3{margin:18px 0 .5em}
.card p{color:var(--ink-2);font-size:1rem;margin-bottom:0}
.card .ico{width:46px;height:46px;border-radius:var(--r-sm);background:var(--accent-soft);display:flex;align-items:center;justify-content:center}
.card .ico svg{width:24px;height:24px;color:var(--accent)}
.card.plain{box-shadow:none;border:0;padding:0}
.card.plain:hover{transform:none;box-shadow:none}

.icard{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-1);
       display:flex;flex-direction:column;height:100%}
.icard .media{border-radius:0;box-shadow:none;aspect-ratio:16/10}
.icard .body{padding:24px 24px 28px}
.icard p{color:var(--ink-2);font-size:.99rem;margin-bottom:0}
.icard .tag{display:inline-block;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);font-weight:700;margin-bottom:10px}

/* cards sitting on a dark band stay light, with dark text */
section.dark .card{background:#fff;border-color:transparent}
section.dark .card h3{color:var(--ink)}
section.dark .card p{color:var(--ink-2)}
section.dark .card .ico{background:var(--accent-soft)}

.num-cards{counter-reset:nc}
.num-cards .card h3::before{counter-increment:nc;content:counter(nc);display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:50%;background:var(--accent);color:#fff;font-family:var(--mono);font-size:.86rem;font-weight:600;
  margin-right:10px;vertical-align:2px}

/* ---------- cost block (dark) ---------- */
.cost{display:grid;grid-template-columns:1fr;gap:0;max-width:640px}
.cost .row{display:flex;justify-content:space-between;gap:20px;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.14);font-size:1.02rem}
.cost .row span:last-child{font-weight:600;white-space:nowrap;color:#fff}
.cost .total{display:flex;justify-content:space-between;gap:20px;margin-top:8px;padding-top:16px;border-top:2px solid var(--accent-on-dark);
  font-family:var(--mono);font-size:1.25rem;font-weight:600;letter-spacing:-.01em;color:#fff}
.punch{font-family:var(--sans);font-weight:600;letter-spacing:-.02em;font-size:clamp(1.35rem,2.6vw,1.8rem);line-height:1.3;color:#fff;margin:0 0 .7em}
.punch em{font-style:normal;color:var(--accent-on-dark)}

/* ---------- steps ---------- */
.steps{list-style:none;padding:0;margin:2.4rem 0 0;position:relative}
.steps li{position:relative;padding:0 0 2.6rem 76px}
.steps li::before{content:"";position:absolute;left:25px;top:44px;bottom:-6px;width:1px;background:var(--line-2)}
.steps li:last-child::before{display:none}
.steps li:last-child{padding-bottom:0}
.steps .dot{position:absolute;left:0;top:2px;width:50px;height:50px;border-radius:50%;background:#fff;border:1px solid var(--line-2);
  display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-1);font-family:var(--mono);font-weight:600;
  font-size:1.1rem;color:var(--accent)}
.steps h3{margin:6px 0 .4em}
.steps p{color:var(--ink-2);margin-bottom:0;max-width:66ch}
@media(max-width:600px){.steps li{padding-left:60px}.steps .dot{width:40px;height:40px;font-size:.98rem;left:0}.steps li::before{left:20px;top:36px}}

/* ---------- pricing ---------- */
.price-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:32px;box-shadow:var(--shadow-1)}
.price-card:hover{border-color:var(--line-2)}
.price-figures{display:flex;flex-wrap:wrap;gap:14px 40px;margin:1.2rem 0 1.4rem}
.price-figures .f{min-width:140px}
.price-figures .n{display:block;font-family:var(--mono);font-size:1.85rem;font-weight:600;letter-spacing:-.02em;color:var(--accent);line-height:1.1}
.price-figures .l{font-size:.85rem;color:var(--muted);line-height:1.4;display:block;margin-top:6px}
.price-card h3{font-size:1.14rem;margin-bottom:.35em}
.fees-note{margin-top:1.9rem;padding-top:1.6rem;border-top:1px solid var(--line);color:var(--ink-2);font-size:.98rem}
.fees-note p{margin:0}
.fees-note p + p{margin-top:.55rem}
.fees-note strong{color:var(--ink)}
.badge-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:1.2rem}
.badge{font-size:.78rem;font-weight:650;letter-spacing:.04em;padding:5px 11px;border-radius:100px;background:var(--bg-tint);color:var(--ink-2)}
.badge.amber{background:var(--accent-soft);color:var(--accent-2)}

/* ---------- callouts ---------- */
.callout{border-left:3px solid var(--accent);background:var(--accent-soft);padding:20px 24px;border-radius:0 var(--r-sm) var(--r-sm) 0;margin:1.8rem 0}
.callout.navy{border-color:var(--ink);background:var(--bg-tint)}
.callout.green{border-color:var(--green);background:#f2f8f4}
.callout p:last-child{margin-bottom:0}
.callout ul{margin:.6em 0 0;padding-left:1.15em}

ul.ticks{list-style:none;padding:0;margin:1.2rem 0}
ul.ticks li{position:relative;padding-left:32px;margin-bottom:.75em;color:var(--ink-2)}
ul.ticks li::before{content:"";position:absolute;left:0;top:.42em;width:17px;height:10px;border-left:2.5px solid var(--green);
  border-bottom:2.5px solid var(--green);transform:rotate(-45deg)}
ul.ticks.no li::before{border-color:var(--muted)}
ul.plain{padding-left:1.2em}
ul.plain li{margin-bottom:.6em}

/* ---------- faq ---------- */
.faq{border-top:1px solid var(--line);margin-top:2rem}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:20px 46px 20px 2px;position:relative;font-weight:600;font-size:1.04rem;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:12px;top:50%;width:11px;height:11px;border-right:2px solid var(--muted);
  border-bottom:2px solid var(--muted);transform:translateY(-70%) rotate(45deg);transition:transform .2s}
.faq details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.faq summary:hover{color:var(--accent)}
.faq .a{padding:0 60px 22px 2px;color:var(--ink-2);max-width:80ch}
@media(max-width:640px){.faq .a{padding-right:10px}}

/* ---------- forms ---------- */
.form-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:34px;box-shadow:var(--shadow-2)}
@media(max-width:640px){.form-card{padding:22px}}
.f-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 22px}
@media(max-width:720px){.f-grid{grid-template-columns:1fr}}
.f-row{margin-bottom:20px}
label{display:block;font-weight:600;font-size:.95rem;margin-bottom:7px;color:var(--ink)}
label .req{color:var(--red)}
label small{font-weight:400;color:var(--muted)}
input[type=text],input[type=email],input[type=tel],select,textarea{
  width:100%;padding:13px 14px;font:inherit;font-size:1rem;color:var(--ink);background:#fff;
  border:1px solid var(--line-2);border-radius:var(--r-sm);transition:border-color .15s,box-shadow .15s}
input:hover,select:hover,textarea:hover{border-color:#c4b7a3}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px rgba(168,86,43,.16)}
textarea{min-height:120px;resize:vertical}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%237a7266' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;padding-right:38px}
.consent{display:flex;gap:12px;align-items:flex-start}
.consent input{width:18px;height:18px;margin-top:4px;flex:0 0 18px;accent-color:var(--accent)}
.consent label{font-weight:400;font-size:.92rem;color:var(--ink-2);margin:0}
.hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}
.form-msg{display:none;padding:15px 18px;border-radius:var(--r-sm);margin-bottom:20px;font-size:.96rem}
.form-msg.err{display:block;background:#fceeec;color:var(--red);border:1px solid #efc9c2}
.form-msg.ok{display:block;background:#f2f8f4;color:var(--green);border:1px solid #bcd6c6}
button.btn{justify-content:center}

/* ---------- page hero ---------- */
.phero{padding:4.4rem 0 3rem;background:linear-gradient(180deg,var(--bg-soft) 0%,#fff 100%);border-bottom:1px solid var(--line)}
.phero h1{max-width:24ch}
@media(max-width:760px){.phero{padding:3rem 0 2.2rem}}

/* ---------- cta band ---------- */
.ctaband{background:var(--ink);color:#fff;border-radius:var(--r);padding:52px 48px;
  background-image:radial-gradient(circle at 88% 18%,rgba(201,118,74,.22),transparent 42%)}
.ctaband h2{color:#fff;max-width:26ch}
.ctaband p{color:#bab0a3;max-width:58ch;margin-bottom:0}
@media(max-width:700px){.ctaband{padding:34px 24px}}

/* ---------- footer ---------- */
.ftr{background:var(--ink);color:#b3a99c;margin-top:0;padding:56px 0 40px;font-size:.93rem}
.ftr a{color:#e4dbcd}
.ftr a:hover{color:#fff}
.ftr .top{display:flex;flex-wrap:wrap;gap:26px;justify-content:space-between;align-items:flex-start;margin-bottom:34px}
.ftr .brand{color:#fff}
.ftr .brand .mark path{fill:var(--accent-on-dark)}
.ftr nav{display:flex;flex-wrap:wrap;gap:10px 26px}
.ftr .disc{font-size:.83rem;line-height:1.6;color:#96897a;max-width:88ch;border-top:1px solid rgba(255,255,255,.12);padding-top:26px}
.ftr .copy{font-size:.83rem;color:#8a7f70;margin-top:18px}

/* ---------- reveal animation ----------
   Only applied when JS is available (html.js), so the page is never
   stuck invisible if a script fails to load. */
.js .rv{opacity:0;transform:translateY(16px)}
.js .rv.in{opacity:1;transform:none;transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.3,1)}
@media(prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none}}

/* ---------- misc ---------- */
.anchor{scroll-margin-top:90px}
.two-col-text{columns:2;column-gap:48px}
@media(max-width:800px){.two-col-text{columns:1}}
.dl{display:grid;grid-template-columns:auto 1fr;gap:10px 26px;margin:1.6rem 0}
.dl dt{font-weight:650;color:var(--ink);white-space:nowrap}
.dl dd{margin:0;color:var(--ink-2)}
@media(max-width:600px){.dl{grid-template-columns:1fr;gap:2px 0}.dl dd{margin-bottom:12px}}