/* Twelve Trees — one stylesheet for every page. A light, editorial world: white ground, black type, one green. */
:root {
  --white:#FFFFFF; --ink:#121412; --ink-2:#4A4F4C; --ink-3:#7F8580; --line:#E2E5E1;
  --panel:#F4F5F2; --green:#1E5A40; --green-d:#123325; --green-t:#E4EEE8; --ph:#D8DFDA;
  --display:"Archivo","Noto Sans SC","PingFang SC",system-ui,sans-serif;
  --body:"Hanken Grotesk","Noto Sans SC","PingFang SC",system-ui,sans-serif;
}
html[data-lang="en"] [data-l="zh"], html[data-lang="zh"] [data-l="en"] { display:none !important; }
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--white); color:var(--ink); font:400 17px/1.6 var(--body); -webkit-font-smoothing:antialiased; }
img { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
:focus-visible { outline:2px solid var(--green); outline-offset:3px; }
.skip { position:absolute; left:-9999px; }
.skip:focus { left:16px; top:12px; z-index:50; background:#fff; padding:8px 12px; }
.wrap { width:min(1240px, 100% - 64px); margin-inline:auto; }
@media (max-width:640px) { .wrap { width:calc(100% - 40px); } body { font-size:16px; } }

h1, h2, h3 { font-family:var(--display); margin:0; text-wrap:balance; }
h1 { font-weight:700; font-size:clamp(40px,5.6vw,76px); line-height:1.03; letter-spacing:-.025em; }
h2 { font-weight:700; font-size:clamp(30px,3.6vw,50px); line-height:1.07; letter-spacing:-.02em; }
h3 { font-weight:600; font-size:22px; line-height:1.25; letter-spacing:-.01em; }
h1 [data-l="zh"], h2 [data-l="zh"], h3 [data-l="zh"] { letter-spacing:0; line-height:1.22; }

.eyebrow { font:600 14px/1.4 var(--body); color:var(--green); margin:0 0 18px; }
.arrow { display:inline-flex; align-items:center; gap:8px; font-weight:600; color:var(--green); }
.arrow::after { content:"→"; transition:transform .15s; }
a:hover .arrow::after, a.arrow:hover::after { transform:translateX(3px); }
.btn { display:inline-flex; align-items:center; gap:10px; padding:16px 26px; font:600 16px/1 var(--body); background:var(--green); color:#fff; white-space:nowrap; }
.btn:hover { background:var(--green-d); }
.btn.white { background:#fff; color:var(--green-d); }
.btn.white:hover { background:var(--green-t); }

/* Photos: a labelled placeholder until the file exists in assets/img/, then the image covers it. */
.ph { position:relative; margin:0; background:var(--ph); overflow:hidden; }
.ph::before { content:attr(data-file); position:absolute; left:14px; bottom:12px; font:600 12px/1 var(--body); color:#5C6A61; }
.ph img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.r-16x9 { aspect-ratio:16/9; } .r-4x3 { aspect-ratio:4/3; } .r-16x10 { aspect-ratio:16/10; }

/* Header */
header.site { position:sticky; top:0; z-index:20; background:#fff; border-bottom:1px solid var(--line); }
header.site .wrap { display:flex; align-items:center; gap:40px; height:76px; }
.logo { display:flex; align-items:center; gap:13px; white-space:nowrap; color:var(--ink); }
.logo .mark { width:40px; height:40px; flex-shrink:0; display:block; }
.wm { display:flex; flex-direction:column; gap:5px; }
.wm-name { font:600 25px/1 "Newsreader",Georgia,serif; letter-spacing:-.01em; }
.wm-sub { font:600 9.5px/1 var(--body); letter-spacing:.34em; text-transform:uppercase; color:var(--green); }
@media (max-width:900px) { .logo { gap:11px; } .logo .mark { width:34px; height:34px; } .wm { gap:4px; } .wm-name { font-size:22px; } .wm-sub { font-size:8.5px; letter-spacing:.3em; } }
nav.main { display:flex; gap:32px; font-weight:500; font-size:16px; }
nav.main a:hover { color:var(--green); }
nav.main a[aria-current="page"] { color:var(--green); text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:10px; }
nav.main a.m-contact { display:none; }
.h-right { margin-left:auto; display:flex; align-items:center; gap:24px; font-size:15px; }
.lang { background:none; border:0; padding:0; font:500 15px var(--body); color:var(--ink-2); cursor:pointer; white-space:nowrap; }
.lang b { color:var(--ink); }
.menu-btn { display:none; background:none; border:0; padding:8px; margin-right:-8px; color:var(--ink); cursor:pointer; }
@media (max-width:900px) {
  header.site .wrap { gap:16px; height:64px; }
  nav.main, .h-right .contact { display:none; }
  .menu-btn { display:block; }
  header.site.open nav.main { display:flex; flex-direction:column; gap:0; position:absolute; top:64px; left:0; right:0; background:#fff; border-bottom:1px solid var(--line); padding:4px 20px 12px; box-shadow:0 12px 24px -16px rgba(0,0,0,.25); }
  header.site.open nav.main a { padding:14px 0; border-bottom:1px solid var(--line); font-size:18px; text-decoration:none; }
  header.site.open nav.main a.m-contact { display:block; color:var(--green); border-bottom:0; }
}

/* Home hero: photo, then a gradient over it, then the text over both. */
.hero { position:relative; min-height:min(80vh,760px); display:flex; align-items:flex-end; color:#fff; overflow:hidden; background:#2A3831; }
.hero .ph { position:absolute; inset:0; aspect-ratio:auto; background:#2A3831; }
.hero .ph::before { left:auto; right:18px; top:16px; bottom:auto; color:rgba(255,255,255,.55); }
.hero::after { content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(90deg, rgba(6,14,10,.84) 0%, rgba(6,14,10,.62) 45%, rgba(6,14,10,.22) 100%); }
.hero .wrap { position:relative; z-index:2; padding:140px 0 96px; }
.hero .eyebrow { color:#D2E9DB; font-size:19px; font-weight:500; }
@media (max-width:640px) { .hero .eyebrow { font-size:16px; } }
.hero h1 { max-width:11.5em; }
.nw { display:inline-block; }  /* keep a Chinese clause on one line; break only between clauses */
.hero-lead { font-size:21px; line-height:1.5; max-width:34em; margin:26px 0 38px; color:rgba(255,255,255,.88); }
.ctas { display:flex; gap:28px; align-items:center; flex-wrap:wrap; }
.arrow.on-dark { color:#fff; }
@media (max-width:640px) {
  .hero::after { background:linear-gradient(0deg, rgba(6,14,10,.9) 0%, rgba(6,14,10,.68) 55%, rgba(6,14,10,.3) 100%); }
  .hero .wrap { padding:120px 0 56px; } .hero-lead { font-size:18px; }
}

.statement { padding:128px 0 112px; }
.statement .wrap { display:grid; grid-template-columns:minmax(0,7fr) minmax(0,4fr); gap:80px; align-items:end; }
.statement h2 { font-size:clamp(34px,4.2vw,58px); }
.statement h2 em { font-style:normal; color:var(--green); }
.statement p { color:var(--ink-2); margin:0 0 22px; font-size:18px; }
@media (max-width:900px) { .statement { padding:80px 0; } .statement .wrap { grid-template-columns:minmax(0,1fr); gap:28px; } }

section.band { padding:104px 0; }
section.band.gray { background:var(--panel); }
section.band.flush { padding-top:0; }
.sec-head { display:flex; justify-content:space-between; align-items:end; gap:24px; margin-bottom:48px; flex-wrap:wrap; }
@media (max-width:640px) { section.band { padding:72px 0; } section.band.flush { padding-top:0; } }

.cards4 { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:28px; }
@media (max-width:1000px) { .cards4 { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px) { .cards4 { grid-template-columns:minmax(0,1fr); } }
a.card { display:block; }
.card .ph { margin-bottom:22px; }
.card h3 { margin-bottom:10px; }
a.card:hover h3 { color:var(--green); }
.card p { color:var(--ink-2); margin:0 0 16px; font-size:16px; }

.case { display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); background:#fff; }
.case + .case { margin-top:40px; }
.case .ph { min-height:420px; aspect-ratio:auto; }
.case .txt { padding:56px 52px; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; }
.case.flip .ph { order:2; }
.tag { font-size:14px; color:var(--ink-3); margin:0 0 14px; }
.case h3 { font:700 clamp(26px,2.6vw,34px)/1.12 var(--display); letter-spacing:-.015em; margin-bottom:18px; }
.case p { color:var(--ink-2); margin:0 0 14px; }
.case p.result { border-left:3px solid var(--green); padding-left:16px; color:var(--ink); font-weight:500; margin:12px 0 26px; }
@media (max-width:900px) { .case { grid-template-columns:minmax(0,1fr); } .case.flip .ph { order:0; } .case .ph { min-height:0; aspect-ratio:16/10; } .case .txt { padding:32px 24px; } }

.steps { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:40px; border-top:1px solid var(--ink); padding-top:36px; }
.steps .n { font:800 56px/1 var(--display); color:var(--green); letter-spacing:-.03em; margin-bottom:18px; }
.steps p { color:var(--ink-2); margin:10px 0 0; font-size:16px; }
.steps-foot { margin:40px 0 0; }
@media (max-width:900px) { .steps { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px) { .steps { grid-template-columns:minmax(0,1fr); gap:32px; } }

.cards3 { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; }
@media (max-width:900px) { .cards3 { grid-template-columns:minmax(0,1fr); } }
a.insight { display:block; }
.insight .ph { margin-bottom:20px; }
.kind { font-size:14px; font-weight:600; color:var(--green); margin:0 0 8px; }
.insight h3 { font-size:21px; margin-bottom:14px; }
a.insight:hover h3 { color:var(--green); }

/* Subpages */
.page-head { padding:80px 0 72px; border-bottom:1px solid var(--line); }
.crumbs { font-size:14px; color:var(--ink-3); margin:0 0 22px; }
.crumbs a { color:var(--green); font-weight:600; }
.lead { font-size:21px; line-height:1.5; color:var(--ink-2); max-width:36em; margin:24px 0 0; }
.actions { margin-top:36px; display:flex; gap:28px; align-items:center; flex-wrap:wrap; }
.split-head { display:grid; grid-template-columns:minmax(0,6fr) minmax(0,5fr); gap:64px; align-items:center; }
@media (max-width:900px) { .split-head { grid-template-columns:minmax(0,1fr); gap:36px; } .page-head { padding:48px 0 56px; } .lead { font-size:18px; } }

.sec { padding:88px 0; border-bottom:1px solid var(--line); }
.two { display:grid; grid-template-columns:minmax(0,4fr) minmax(0,7fr); gap:64px; }
.two h2 { font-size:clamp(26px,2.6vw,36px); }
@media (max-width:900px) { .two { grid-template-columns:minmax(0,1fr); gap:24px; } .sec { padding:56px 0; } }
.prose p { margin:0 0 18px; color:var(--ink-2); font-size:18px; }
.prose p:last-child { margin-bottom:0; }
.ticks { list-style:none; margin:0; padding:0; display:grid; gap:16px; }
.ticks li { position:relative; padding-left:32px; font-size:18px; }
.ticks li::before { content:""; position:absolute; left:0; top:.62em; width:18px; height:2px; background:var(--green); }
.facts { background:var(--panel); padding:28px 30px; margin:0; display:grid; gap:18px; align-self:start; }
.facts dt { font-size:13px; color:var(--ink-3); font-weight:600; }
.facts dd { margin:3px 0 0; font-weight:500; }
.quote { margin:32px 0 0; padding-left:24px; border-left:3px solid var(--green); font:600 clamp(21px,2vw,27px)/1.35 var(--display); letter-spacing:-.01em; }
.wide-fig { margin-top:56px; }
.case-links { margin-top:28px; display:flex; gap:28px; flex-wrap:wrap; align-items:center; }
.stack { font-size:14px; color:var(--ink-3); }

.rows { display:grid; gap:64px; }
a.row { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:56px; align-items:center; }
a.row:nth-child(even) .ph { order:2; }
.row h2 { font-size:clamp(26px,2.8vw,38px); margin-bottom:14px; }
.row p { color:var(--ink-2); margin:0 0 20px; font-size:18px; }
a.row:hover h2 { color:var(--green); }
@media (max-width:900px) { a.row { grid-template-columns:minmax(0,1fr); gap:24px; } a.row:nth-child(even) .ph { order:0; } .rows { gap:48px; } }

.phase { display:grid; grid-template-columns:120px minmax(0,4fr) minmax(0,5fr); gap:40px; padding:40px 0; border-top:1px solid var(--line); }
.phase:first-child { border-top:1px solid var(--ink); }
.phase .n { font:800 56px/1 var(--display); color:var(--green); letter-spacing:-.03em; }
.phase .lbl { font-size:13px; font-weight:600; color:var(--ink-3); margin:0 0 6px; }
.phase p { margin:0 0 16px; color:var(--ink-2); }
.phase p.get { color:var(--ink); font-weight:500; margin:0; }
@media (max-width:800px) { .phase { grid-template-columns:minmax(0,1fr); gap:12px; } }

.principles { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:40px; }
.principles h3 { margin-bottom:10px; }
.principles p { margin:0; color:var(--ink-2); }
@media (max-width:900px) { .principles { grid-template-columns:minmax(0,1fr); gap:28px; } }

.faq { margin:0; }
.faq dt { font:600 20px/1.35 var(--display); padding-top:24px; border-top:1px solid var(--line); }
.faq dd { margin:10px 0 24px; color:var(--ink-2); font-size:17px; }

.related { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; }
@media (max-width:640px) { .related { grid-template-columns:minmax(0,1fr); } }
.others { list-style:none; margin:0; padding:0; }
.others a { display:flex; justify-content:space-between; gap:16px; padding:18px 0; border-top:1px solid var(--line); font:600 20px/1.3 var(--display); }
.others a::after { content:"→"; color:var(--green); }
.others a:hover { color:var(--green); }

/* Articles */
.article-head { padding:72px 0 0; }
.article-head .inner, .article-body { width:min(760px, 100% - 40px); margin-inline:auto; }
.article-head .lead { max-width:none; }
.meta { font-size:14px; color:var(--ink-3); margin:22px 0 0; }
.article-fig { width:min(1040px, 100% - 40px); margin:48px auto 0; }
.article-body { padding:56px 0 96px; }
.article-body p { font-size:19px; line-height:1.72; margin:0 0 22px; color:#23272A; }
.article-body h2 { font-size:clamp(24px,2.4vw,30px); margin:48px 0 16px; }
.article-body blockquote { margin:40px 0; padding-left:24px; border-left:3px solid var(--green); font:600 clamp(21px,2vw,26px)/1.4 var(--display); color:var(--ink); }
.article-body .example { background:var(--panel); padding:22px 26px; margin:0 0 22px; }
.article-body .example p { font-size:17px; margin:0; }
/* Legal pages (privacy): lists, links and a data table inside the article column */
.legal ul { margin:0 0 22px; padding-left:1.2em; }
.legal li { font-size:19px; line-height:1.72; margin:0 0 8px; color:#23272A; }
.legal a { color:var(--green); text-decoration:underline; text-underline-offset:3px; overflow-wrap:anywhere; }
.table-wrap { overflow-x:auto; margin:0 0 22px; }
.legal table { width:100%; border-collapse:collapse; font-size:16px; line-height:1.5; }
.legal th, .legal td { text-align:left; vertical-align:top; padding:10px 14px 10px 0; border-bottom:1px solid var(--line); }
.legal th { font-weight:600; color:var(--ink); border-bottom-color:var(--ink); }
.legal td:last-child { min-width:6.5em; }
@media (max-width:640px) { .article-head { padding-top:44px; } .article-body p, .legal li { font-size:17px; } .legal table { font-size:15px; } }

/* Contact */
.next-steps { background:var(--panel); padding:36px 36px 30px; }
.next-steps h2 { font-size:24px; margin-bottom:22px; }
.next-steps ol { margin:0; padding:0; list-style:none; counter-reset:s; display:grid; gap:18px; }
.next-steps li { counter-increment:s; display:grid; grid-template-columns:44px minmax(0,1fr); }
.next-steps li::before { content:counter(s, decimal-leading-zero); font:800 18px/1.5 var(--display); color:var(--green); }
.note { font-size:15px; color:var(--ink-3); margin:18px 0 0; }

/* CTA + footer */
.cta { background:var(--green-d); color:#fff; padding:96px 0; }
.cta .wrap { display:flex; justify-content:space-between; align-items:center; gap:40px; flex-wrap:wrap; }
.cta h2 { max-width:16em; }
footer.site { background:#0B1510; color:rgba(255,255,255,.7); padding:64px 0 40px; font-size:15px; }
footer.site .cols { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:40px; padding-bottom:48px; border-bottom:1px solid rgba(255,255,255,.12); }
footer.site h4 { color:#fff; font:600 15px var(--body); margin:0 0 14px; }
footer.site ul { list-style:none; margin:0; padding:0; display:grid; gap:10px; }
footer.site a:hover { color:#fff; }
footer.site .logo { color:#fff; margin-bottom:18px; }
footer.site .wm-sub { color:#8FC4A8; }
footer.site .blurb { margin:0; max-width:22em; }
footer.site .base { display:flex; justify-content:space-between; gap:16px; padding-top:24px; flex-wrap:wrap; font-size:13px; }
@media (max-width:800px) { footer.site .cols { grid-template-columns:1fr 1fr; } }

.notfound { padding:140px 0; }
.notfound p { color:var(--ink-2); margin:20px 0 32px; font-size:18px; }

/* ── Content rewrite: single "What we do" page, two-up cards, 2×2 principles ── */
[id] { scroll-margin-top:96px; }
.lbl { font-size:13px; font-weight:600; color:var(--ink-3); margin:0 0 10px; }
.row { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:56px; align-items:center; }
.row:nth-child(even) .ph { order:2; }
.row .ticks { gap:10px; }
.row .ticks li { font-size:16px; }
@media (max-width:900px) { .row { grid-template-columns:minmax(0,1fr); gap:24px; } .row:nth-child(even) .ph { order:0; } }
.cards2 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px; }
@media (max-width:760px) { .cards2 { grid-template-columns:minmax(0,1fr); } }
.principles { grid-template-columns:repeat(2,minmax(0,1fr)); gap:40px 56px; }
@media (max-width:760px) { .principles { grid-template-columns:minmax(0,1fr); } }

/* Home opening sequence (html.intro, once per visit, never for reduced motion): the photo settles
   out of the dark, the headline rises line by line, then the rest; the logo's twelve bars grow in.
   Pure CSS with fill-mode both, so the page always ends fully visible. */
@keyframes tt-settle { from { opacity:0; transform:scale(1.1); } to { opacity:1; transform:none; } }
@keyframes tt-rise { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:none; } }
@keyframes tt-line { from { opacity:0; transform:translateY(.45em); clip-path:inset(0 -5% 100% -5%); } to { opacity:1; transform:none; clip-path:inset(-25% -5% -25% -5%); } }
@keyframes tt-bar { from { transform:scaleY(0); } to { transform:none; } }
.hero h1 .ln { display:inline-block; }
.intro .hero, .intro .hero .ph { background:#0B1510; }
.intro .hero .ph img { animation:tt-settle 2.6s cubic-bezier(.2,.6,.2,1) both; }
.intro .hero .eyebrow { animation:tt-rise .8s .3s cubic-bezier(.2,.7,.2,1) both; }
.intro .hero h1 .nw, .intro .hero h1 .ln { animation:tt-line 1s .5s cubic-bezier(.2,.7,.2,1) both; }
.intro .hero h1 .nw + .nw, .intro .hero h1 .ln + .ln { animation-delay:.78s; }
.intro .hero-lead { animation:tt-rise .9s 1.15s cubic-bezier(.2,.7,.2,1) both; }
.intro .hero .ctas { animation:tt-rise .9s 1.35s cubic-bezier(.2,.7,.2,1) both; }
.intro body:has(.hero) header.site .mark g rect { transform-box:fill-box; transform-origin:50% 100%; animation:tt-bar .55s cubic-bezier(.2,.7,.2,1) both; }
.intro body:has(.hero) header.site .mark g rect:nth-child(1) { animation-delay:0.15s; }
.intro body:has(.hero) header.site .mark g rect:nth-child(2) { animation-delay:0.20s; }
.intro body:has(.hero) header.site .mark g rect:nth-child(3) { animation-delay:0.25s; }
.intro body:has(.hero) header.site .mark g rect:nth-child(4) { animation-delay:0.30s; }
.intro body:has(.hero) header.site .mark g rect:nth-child(5) { animation-delay:0.35s; }
.intro body:has(.hero) header.site .mark g rect:nth-child(6) { animation-delay:0.40s; }
.intro body:has(.hero) header.site .mark g rect:nth-child(7) { animation-delay:0.45s; }
.intro body:has(.hero) header.site .mark g rect:nth-child(8) { animation-delay:0.50s; }
.intro body:has(.hero) header.site .mark g rect:nth-child(9) { animation-delay:0.55s; }
.intro body:has(.hero) header.site .mark g rect:nth-child(10) { animation-delay:0.60s; }
.intro body:has(.hero) header.site .mark g rect:nth-child(11) { animation-delay:0.65s; }
.intro body:has(.hero) header.site .mark g rect:nth-child(12) { animation-delay:0.70s; }