@charset "UTF-8";
@font-face{font-family:"Bricolage";src:url("fonts/bricolage.woff2") format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url("fonts/instrument-sans.woff2") format("woff2");font-weight:400 600;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url("fonts/instrument-serif-italic.woff2") format("woff2");font-style:italic;font-weight:400;font-display:swap}

:root{
  --bg:#fafaf9; --tone:#f0f0ee; --tone-2:#e7e7e4;
  --ink:#161614; --ink-2:#4a4a45; --ink-3:#7c7c76;
  --accent:#ed491f; --accent-ink:#2a1208; --accent-soft:#fbe3db;
  --display:"Bricolage","Helvetica Neue","PingFang SC","Microsoft YaHei",sans-serif;
  --body:"Instrument Sans","Helvetica Neue","PingFang SC","Microsoft YaHei",sans-serif;
  --serif:"Instrument Serif","Songti SC","Noto Serif CJK SC",Georgia,serif;
  --gut:clamp(20px,4.4vw,72px);
  --max:1320px;
  --s1:clamp(56px,8vw,128px);
  --shadow:0 1px 2px rgba(22,22,20,.05),0 12px 32px -12px rgba(22,22,20,.14);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.62 var(--body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:3px solid var(--accent);outline-offset:4px;border-radius:2px}
::selection{background:var(--accent);color:#fff}
.wrap{width:min(var(--max),100% - var(--gut)*2);margin-inline:auto}
.skip{position:fixed;left:16px;top:-80px;background:var(--ink);color:#fff;padding:10px 16px;z-index:50;border-radius:4px}
.skip:focus{top:12px}

/* header */
.top{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:saturate(1.4) blur(10px)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;height:76px}
.mark{font:700 30px/1 var(--display);letter-spacing:-.06em;display:flex;align-items:baseline;gap:12px}
.mark i{font-style:normal;color:var(--accent)}
.mark small{font:500 11px/1.2 var(--body);letter-spacing:.04em;color:var(--ink-3)}
.nav{display:flex;gap:clamp(16px,2.4vw,36px);font-size:15px}
.nav a{padding:6px 0;color:var(--ink-2);transition:color .2s}
.nav a:hover,.nav a[aria-current="page"]{color:var(--ink)}
.nav a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--accent)}
.tools{display:flex;align-items:center;gap:20px}
.lang{display:flex;gap:4px;font-size:13px;background:var(--tone);border-radius:999px;padding:3px}
.lang button{padding:5px 11px;border-radius:999px;color:var(--ink-3)}
.lang button[aria-pressed="true"]{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(22,22,20,.12)}
.btn{display:inline-flex;align-items:center;gap:10px;font:500 15px/1 var(--body);padding:14px 20px;border-radius:999px;background:var(--ink);color:#fff;transition:background .2s,transform .2s}
.btn:hover{background:var(--accent)}
.btn svg{width:14px;height:14px;transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.btn:hover svg{transform:translate(2px,-2px)}
.btn.ghost{background:var(--tone);color:var(--ink)}
.btn.ghost:hover{background:var(--tone-2)}
.btn.on-accent{background:var(--accent-ink);color:#fff}
.btn.on-accent:hover{background:#000}
.top .btn{padding:11px 17px;font-size:14px}

/* type */
.eyebrow{font:500 12px/1.3 var(--body);letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3)}
.eyebrow b{color:var(--accent);font-weight:500}
.h-xl{font:600 clamp(46px,8.2vw,124px)/.95 var(--display);letter-spacing:-.055em}
.h-xl em{font:italic 400 1.04em/.9 var(--serif);letter-spacing:-.035em;color:var(--accent)}
.h-l{font:600 clamp(32px,4.3vw,60px)/1.04 var(--display);letter-spacing:-.045em;max-width:17ch;text-wrap:balance}
.h-l em{font:italic 400 1.05em/1 var(--serif);letter-spacing:-.02em}
.h-m{font:600 clamp(22px,2.1vw,28px)/1.18 var(--display);letter-spacing:-.03em;text-wrap:balance}
.lede{font-size:clamp(18px,1.5vw,21px);line-height:1.55;color:var(--ink-2);max-width:54ch;text-wrap:pretty}
.muted{color:var(--ink-2)}
.small{font-size:14px;line-height:1.55;color:var(--ink-3)}
html[lang="zh-CN"] .h-xl{font-size:clamp(40px,6.6vw,96px);line-height:1.1;letter-spacing:-.03em}
html[lang="zh-CN"] .h-xl em,html[lang="zh-CN"] .h-l em{font-style:normal;font-family:var(--serif)}
html[lang="zh-CN"] .h-l{line-height:1.22;letter-spacing:-.02em;max-width:14em}
html[lang="zh-CN"] .h-m{line-height:1.4;letter-spacing:-.01em}
html[lang="zh-CN"] body{line-height:1.8}
html[lang="zh-CN"] .eyebrow{letter-spacing:.06em}

/* hero */
.hero{padding-top:clamp(28px,4vw,56px);overflow:hidden}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(24px,4vw,64px);align-items:end}
.hero-copy{padding-bottom:clamp(8px,2vw,28px)}
.hero h1{margin:22px 0 28px}
.hero .lede{margin-bottom:32px}
.cta{display:flex;flex-wrap:wrap;gap:12px}
.hero-art{position:relative;border-radius:6px;overflow:hidden;aspect-ratio:1/1.04;background:var(--tone)}
.hero-art img{width:100%;height:100%;object-fit:cover}
.hero-note{position:absolute;left:18px;bottom:18px;right:18px;display:flex;justify-content:space-between;gap:16px;font:500 11px/1.4 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.strip{margin-top:clamp(36px,5vw,72px);background:var(--tone);border-radius:6px;padding:22px clamp(20px,3vw,40px);display:grid;grid-template-columns:auto repeat(3,1fr);gap:clamp(16px,3vw,48px);align-items:center}
.strip span{font-size:13px;color:var(--ink-3);max-width:15ch;line-height:1.4}
.strip p{font:600 clamp(17px,1.6vw,22px)/1.2 var(--display);letter-spacing:-.03em}

/* sections */
.sec{padding-block:var(--s1)}
.sec.tone{background:var(--tone)}
.head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.62fr);gap:clamp(24px,5vw,96px);align-items:end;margin-bottom:clamp(36px,5vw,72px)}
.head .eyebrow{margin-bottom:20px}

/* who we work with: asymmetric rows, no cards */
.rows{display:grid;gap:clamp(28px,3.4vw,52px)}
.row{display:grid;grid-template-columns:minmax(0,.34fr) minmax(0,1fr) minmax(0,.9fr);gap:clamp(18px,3vw,56px);align-items:start}
.rows{gap:clamp(36px,4.4vw,68px)}
.row .n{font:italic 400 clamp(40px,4.4vw,64px)/.9 var(--serif);color:var(--accent)}
.row p{color:var(--ink-2);margin-top:12px;max-width:44ch}
.asks{display:grid;gap:9px;font-size:15px}
.asks li{background:var(--tone);border-radius:4px;padding:11px 15px;line-height:1.45}
.sec.tone .asks li{background:#fff}
.asks li::before{content:"“"}.asks li::after{content:"”"}
html[lang="zh-CN"] .asks li::before{content:"「"}html[lang="zh-CN"] .asks li::after{content:"」"}

/* commissions */
.offer{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,1.6vw,22px)}
.offer article{background:#fff;border-radius:6px;padding:clamp(24px,2.6vw,40px);box-shadow:var(--shadow);display:grid;gap:16px;align-content:start}
.offer article:nth-child(1){grid-column:1/-1;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,4vw,72px);align-items:end}
.offer .tag{font:500 12px/1 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.offer p{color:var(--ink-2)}
.out{display:flex;flex-wrap:wrap;gap:7px;font-size:13.5px}
.out li{background:var(--tone);border-radius:999px;padding:6px 13px;color:var(--ink-2)}

/* insight feature */
.feature{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1fr);gap:clamp(24px,5vw,88px);align-items:center}
.cover-card{position:relative;background:#fff;border-radius:6px;aspect-ratio:210/262;box-shadow:var(--shadow);overflow:hidden;padding:clamp(20px,2.6vw,38px);display:flex;flex-direction:column;max-width:460px;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.cover-card:hover{transform:translateY(-6px)}
.cover-card .eyebrow{font-size:10px}
.cover-card h3{font:600 clamp(28px,3.2vw,44px)/1 var(--display);letter-spacing:-.045em;margin-top:clamp(28px,5vw,64px);max-width:9ch}
.cover-card p{font-size:13.5px;line-height:1.5;color:var(--ink-2);margin-top:14px;max-width:30ch}
.cover-card .b1,.cover-card .b2,.cover-card .b3{position:absolute;bottom:0}
.cover-card .b1{left:0;right:0;height:30%;background:var(--accent)}
.cover-card .b2{right:0;bottom:30%;width:33%;height:12%;background:#f5b8a5}
.cover-card .b3{left:0;width:33%;height:15%;background:var(--ink)}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,32px);margin:34px 0 36px}
.facts b{display:block;font:600 clamp(30px,3.4vw,48px)/1 var(--display);letter-spacing:-.045em}
.facts span{display:block;font-size:14px;line-height:1.45;color:var(--ink-2);margin-top:10px}

/* experience */
.exp{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,56px)}
.exp h3{margin:14px 0 12px}
.exp p{color:var(--ink-2);font-size:16px}
.exp ul{margin-top:20px;display:grid;gap:8px;font-size:14.5px;color:var(--ink-2)}
.exp li{display:grid;grid-template-columns:22px 1fr}
.exp li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent);margin-top:.55em}
.proof{margin-top:clamp(36px,5vw,72px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,22px)}
.proof div{background:#fff;border-radius:6px;padding:26px 28px}
.proof b{font:600 19px/1.3 var(--display);letter-spacing:-.02em;display:block;margin-bottom:9px}
.proof p{font-size:15px;color:var(--ink-2)}
.note{font-size:13px;color:var(--ink-3);margin-top:22px;max-width:80ch}

/* people */
.people{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,56px)}
.person .init{width:64px;height:64px;border-radius:50%;background:var(--ink);color:#fff;font:600 24px/64px var(--display);text-align:center;letter-spacing:-.04em;margin-bottom:22px}
.person:nth-child(2) .init{background:var(--accent)}
.person:nth-child(3) .init{background:var(--tone-2);color:var(--ink)}
.person h3{font:600 26px/1.15 var(--display);letter-spacing:-.035em}
.person .role{font-size:14px;color:var(--accent);margin:6px 0 16px}
.person p{font-size:15.5px;color:var(--ink-2)}
.person ul{display:flex;flex-wrap:wrap;gap:6px;margin-top:18px;font-size:13px}
.person li{background:var(--tone);border-radius:999px;padding:5px 12px;color:var(--ink-2)}

/* how */
.how{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);gap:clamp(24px,6vw,120px)}
.steps{counter-reset:s;display:grid;gap:14px}
.steps li{counter-increment:s;background:#fff;border-radius:6px;padding:24px 28px;display:grid;grid-template-columns:54px 1fr;align-items:start}
.steps li::before{content:"0" counter(s);font:italic 400 30px/1 var(--serif);color:var(--accent)}
.steps h3{font:600 20px/1.25 var(--display);letter-spacing:-.025em}
.steps p{font-size:15px;color:var(--ink-2);margin-top:6px}

/* contact */
.contact{background:var(--accent);color:var(--accent-ink);padding-block:clamp(56px,7vw,112px)}
.contact .eyebrow{color:var(--accent-ink);opacity:.75}
.contact h2{font:600 clamp(44px,8vw,120px)/.95 var(--display);letter-spacing:-.055em;margin:20px 0 clamp(32px,4vw,56px)}
.contact h2 em{font:italic 400 1.04em/.9 var(--serif);letter-spacing:-.035em}
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:clamp(24px,5vw,96px);align-items:end}
.contact p{font-size:clamp(17px,1.5vw,20px);max-width:46ch}
.who{display:grid;gap:4px;font-size:15px}
.who a.mail{font:600 clamp(19px,2.2vw,30px)/1.2 var(--display);letter-spacing:-.03em;overflow-wrap:anywhere;margin:6px 0 18px;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
.who a.mail:hover{text-decoration-color:#fff}
html[lang="zh-CN"] .contact h2 em{font-style:normal}
html[lang="zh-CN"] .contact h2{line-height:1.12;font-size:clamp(40px,6.6vw,96px);letter-spacing:-.03em}

/* footer */
.foot{padding-block:44px 52px}
.foot .wrap{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:end}
.foot .mark{font-size:clamp(60px,11vw,160px);letter-spacing:-.075em}
.foot nav{display:grid;gap:8px;font-size:14px;color:var(--ink-2);text-align:right}
.foot nav a:hover{color:var(--accent)}
.foot .legal{grid-column:1/-1;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:12.5px;color:var(--ink-3);padding-top:26px}

/* report page */
.rhero{padding-block:clamp(36px,5vw,80px) clamp(40px,5vw,72px)}
.rhero .h-xl{font-size:clamp(44px,7.4vw,108px);max-width:11ch;margin:22px 0 28px}
.rmeta{display:flex;flex-wrap:wrap;gap:8px 28px;font-size:14px;color:var(--ink-3);margin-top:30px}
.glance{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,22px)}
.glance div{background:#fff;border-radius:6px;padding:clamp(22px,2.4vw,34px)}
.glance b{display:block;font:600 clamp(36px,4vw,58px)/1 var(--display);letter-spacing:-.05em}
.glance b small{font-size:.42em;letter-spacing:-.02em;font-weight:500}
.glance span{display:block;margin-top:14px;font-size:15px;line-height:1.5;color:var(--ink-2)}
.findings{display:grid;gap:clamp(40px,6vw,96px)}
.finding{display:grid;grid-template-columns:minmax(0,.74fr) minmax(0,1fr);gap:clamp(24px,5vw,88px);align-items:start}
.finding:nth-child(even) .ftext{order:2}
.finding .n{font:italic 400 clamp(40px,4.4vw,64px)/.9 var(--serif);color:var(--accent);margin-bottom:18px}
.finding h3{font:600 clamp(24px,2.6vw,36px)/1.1 var(--display);letter-spacing:-.04em;text-wrap:balance}
.finding p{color:var(--ink-2);margin-top:16px;max-width:50ch}
.fig{background:#fff;border-radius:6px;padding:clamp(18px,2.2vw,30px);box-shadow:var(--shadow)}
.fig h4{font:600 15.5px/1.35 var(--display);letter-spacing:-.015em;margin-bottom:16px;max-width:52ch}
.fig .src{font-size:12px;color:var(--ink-3);margin-top:12px;line-height:1.45}
.fig svg{width:100%;height:auto}
.rules{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,22px)}
.rules div{background:#fff;border-radius:6px;padding:26px 28px}
.rules b{font:600 19px/1.3 var(--display);letter-spacing:-.02em;display:block;margin-bottom:10px}
.rules p{font-size:15px;color:var(--ink-2)}
.plan{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,22px)}
.plan div{background:var(--tone);border-radius:6px;padding:26px 28px}
.plan .d{font:500 12px/1 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.plan b{font:600 21px/1.25 var(--display);letter-spacing:-.025em;display:block;margin:10px 0 14px}
.plan li{font-size:15px;color:var(--ink-2);padding-left:18px;position:relative;margin-bottom:8px;line-height:1.5}
.plan li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--accent)}
.dl{background:var(--tone);border-radius:6px;padding:clamp(28px,4vw,56px);display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center}

/* reveal */
.rv{opacity:0;transform:translateY(18px);transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1)}
.rv.in{opacity:1;transform:none}
.no-js .rv{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.rv{opacity:1;transform:none;transition:none}*{transition:none!important}}

@media(max-width:1000px){
  .top .wrap{flex-wrap:wrap;height:auto;padding-block:14px 0;row-gap:6px}
  .nav{order:3;width:100%;overflow-x:auto;gap:22px;font-size:14px;padding-bottom:10px;scrollbar-width:none;white-space:nowrap}
  .nav::-webkit-scrollbar{display:none}
  .hero-grid,.head,.feature,.how,.contact-grid,.finding{grid-template-columns:1fr}
  .finding:nth-child(even) .ftext{order:0}
  .hero-art{aspect-ratio:16/11}
  .row{grid-template-columns:64px 1fr}.row .asks{grid-column:2}
  .exp,.people,.proof,.rules,.plan{grid-template-columns:1fr}
  .glance{grid-template-columns:repeat(2,minmax(0,1fr))}
  .offer article:nth-child(1){grid-template-columns:1fr}
  .strip{grid-template-columns:1fr 1fr}.strip span{grid-column:1/-1;max-width:none}
  .dl{grid-template-columns:1fr}
}
@media(max-width:640px){
  body{font-size:16px}
  .mark small{display:none}.top .btn{display:none}
  .offer{grid-template-columns:1fr}.facts{grid-template-columns:1fr;gap:20px}
  .glance{grid-template-columns:1fr}
  .row{grid-template-columns:1fr}.row .asks{grid-column:1}
  .strip{grid-template-columns:1fr}
  .foot .wrap{grid-template-columns:1fr}.foot nav{text-align:left}
  .steps li{grid-template-columns:44px 1fr;padding:20px}
}
