
:root{
  --bg:#f5f5f2;
  --paper:#ffffff;
  --ink:#0b0b0c;
  --muted:#707075;
  --muted2:#9a9a9e;
  --line:#dcdcd7;
  --soft:#ecece7;
  --accent:#d92c43;
  --max:1440px;
  --gutter:clamp(22px,4.2vw,70px);
  --radius:26px;
  --shadow:0 18px 48px rgba(15,15,15,.055);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,"PingFang SC","Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased;
  background:
    radial-gradient(900px 420px at 72% -120px,rgba(255,255,255,.95),rgba(255,255,255,0)),
    linear-gradient(180deg,#f8f8f5 0,#f5f5f2 44%,#f3f3ef 100%);
}
a{color:inherit;text-decoration:none}
img,video{display:block;max-width:100%}
button{font:inherit}
.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(247,247,244,.86);
  backdrop-filter:blur(20px) saturate(1.2);
  border-bottom:1px solid rgba(0,0,0,.055)
}
.navbar{
  max-width:var(--max);margin:auto;padding:17px var(--gutter);
  display:flex;justify-content:space-between;align-items:center;gap:24px
}
.brand{font-size:14px;font-weight:800;letter-spacing:.035em;white-space:nowrap}
.navlinks{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.navlinks a{font-size:14px;color:var(--muted);transition:.2s}
.navlinks a:hover,.navlinks a.active{color:var(--ink)}
.page{max-width:var(--max);margin:auto;padding:0 var(--gutter)}
.hero{
  padding:94px 0 76px;display:grid;grid-template-columns:1.28fr .72fr;gap:58px;align-items:end;
  border-bottom:1px solid var(--line)
}
.kicker,.case-index,.mini-label{
  font-size:12px;letter-spacing:.13em;color:var(--muted);font-weight:650
}
.hero h1,.chapter-hero h1{
  margin:10px 0 0;font-size:clamp(48px,6.7vw,102px);line-height:1.03;
  letter-spacing:-.055em;font-weight:760
}
.hero p,.chapter-hero p{
  margin:25px 0 0;max-width:900px;font-size:clamp(18px,1.85vw,25px);line-height:1.5;color:#333
}
.hero-side{display:grid;gap:14px}
.statline{border-top:1px solid var(--line);padding-top:13px;display:flex;justify-content:space-between;gap:20px;color:var(--muted)}
.statline b{font-size:24px;color:var(--ink)}
.projects{padding:56px 0 92px}
.projects-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:22px}
.projects-head h2{font-size:32px;margin:0;letter-spacing:-.035em}
.project-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:22px}
.project-card{
  position:relative;min-height:600px;border-radius:30px;overflow:hidden;background:#111;
  box-shadow:var(--shadow);transition:transform .28s ease,box-shadow .28s ease
}
.project-card:hover{transform:translateY(-4px);box-shadow:0 26px 68px rgba(0,0,0,.1)}
.project-card img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.project-card:hover img{transform:scale(1.018)}
.project-card.small{min-height:288px}
.stack{display:grid;gap:22px}
.project-overlay{
  position:absolute;inset:auto 0 0;padding:58px 26px 24px;color:white;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.72))
}
.project-overlay .meta{font-size:12px;letter-spacing:.12em;opacity:.78}
.project-overlay h3{margin:5px 0 0;font-size:clamp(24px,2.5vw,38px);letter-spacing:-.035em}
.home-hero{padding:72px 0 54px;gap:50px}
.home-hero h1{font-size:clamp(48px,5.7vw,84px)}
.home-title .title-line{display:block}
.home-title .title-line + .title-line{margin-top:.12em;padding-left:clamp(14px,1.8vw,30px)}
.home-hero p{max-width:780px;font-size:clamp(17px,1.5vw,21px)}
.projects:has(.home-showcase){padding:42px 0 64px}
.home-showcase{display:grid;grid-template-columns:minmax(180px,.72fr) minmax(300px,1.2fr) minmax(190px,.8fr);gap:18px;align-items:stretch}
.home-showcase a{position:relative;display:block;overflow:hidden;border-radius:22px;background:#151515;box-shadow:var(--shadow)}
.home-showcase img{width:100%;height:100%;object-fit:cover;transition:transform .45s ease}
.home-showcase a:hover img{transform:scale(1.025)}
.home-showcase-main{height:432px}
.home-showcase-main img{object-fit:contain;object-position:center bottom}
.home-showcase-stack{display:grid;grid-template-rows:repeat(2,minmax(0,1fr));gap:18px;height:432px}
.home-showcase-side{display:grid;grid-template-rows:repeat(2,minmax(0,1fr));gap:18px;height:432px}
.showcase-shot span,.showcase-main-copy{position:absolute;left:0;right:0;bottom:0;color:#fff;background:linear-gradient(180deg,transparent,rgba(0,0,0,.75));text-shadow:0 1px 12px rgba(0,0,0,.38)}
.showcase-shot span{padding:30px 14px 12px;font-size:12px;font-weight:700;letter-spacing:.045em}
.showcase-main-copy{padding:68px 24px 20px}.showcase-main-copy span{position:static;display:block;padding:0;background:none;font-size:12px;letter-spacing:.12em;opacity:.8}.showcase-main-copy h3{margin:5px 0 0;font-size:clamp(24px,2.3vw,34px);letter-spacing:-.04em}
.showcase-yingyue img{object-position:center 22%}.showcase-kimen img{object-position:center center}.showcase-archer img{object-position:center 14%}.home-showcase .showcase-sienna{background:#b87435}.showcase-sienna img{object-position:center center;transform:none}
.home-showcase-links{display:flex;gap:22px;margin-top:18px;padding-left:2px}.home-showcase-links a{font-size:13px;color:var(--muted);border-bottom:1px solid transparent;padding-bottom:3px}.home-showcase-links a:hover{color:var(--ink);border-color:var(--ink)}
.chapter-hero{
  padding:86px 0 66px;border-bottom:1px solid var(--line)
}
.fit-hero h1{font-size:clamp(46px,5.45vw,82px);max-width:1120px}
.chapter-hero .meta{display:flex;justify-content:space-between;color:var(--muted);font-size:13px;letter-spacing:.08em}
.case{padding:64px 0 86px;border-bottom:1px solid var(--line)}
.case.first{padding-top:52px}
.case-head{display:grid;grid-template-columns:.34fr 1fr;gap:36px;margin-bottom:28px;align-items:start}
.case-copy h2{
  margin:0;font-size:clamp(35px,4.2vw,62px);line-height:1.06;letter-spacing:-.045em
}
.case-copy .sub{font-size:20px;margin:10px 0;color:#3a3a3a}
.case-copy p{font-size:17px;color:#444;max-width:920px;line-height:1.7}
.result-line{display:flex;flex-wrap:wrap;align-items:baseline;gap:18px;margin:18px 0 30px}
.result-line strong{color:var(--accent);font-size:clamp(30px,3.6vw,48px);letter-spacing:-.04em}
.result-line span{font-size:18px;color:#555;max-width:620px}
.media-card{
  margin:0;background:var(--paper);border:1px solid rgba(0,0,0,.045);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow);transition:transform .25s ease,box-shadow .25s ease
}
.media-card:hover{transform:translateY(-2px);box-shadow:0 22px 56px rgba(0,0,0,.075)}
.media-shell{
  position:relative;background:#fff;padding:16px;display:flex;align-items:center;justify-content:center;
  min-height:320px
}
.media-shell img,.media-shell video{
  max-width:100%;width:auto;height:auto;max-height:100%;object-fit:contain;border-radius:14px;background:#fff
}
.media-shell:fullscreen{width:100vw;height:100vh;min-height:0;padding:32px;background:#050505}
.media-shell:fullscreen video{max-height:calc(100vh - 64px);border-radius:0}
.media-shell.tall{height:470px}
.media-shell.medium{height:390px}
.media-shell.short{height:310px}
.media-shell.hero-media{height:460px}
.media-shell.hero-media img,.media-shell.hero-media video{max-height:428px}
.media-caption{padding:13px 17px 15px;display:flex;justify-content:space-between;gap:18px;color:var(--muted);font-size:13px}
.media-caption b{font-size:15px;color:var(--ink)}
.zoom{cursor:zoom-in}
.dual,.triple,.quad,.split,.editorial-grid{display:grid;gap:22px}
.dual{grid-template-columns:repeat(2,minmax(0,1fr))}
.triple{grid-template-columns:repeat(3,minmax(0,1fr))}
.split{grid-template-columns:1.08fr .92fr}
.editorial-grid{grid-template-columns:.9fr 1.1fr}
.note{
  margin-top:18px;padding:17px 19px;background:rgba(235,235,230,.78);border-radius:18px;
  color:#444;font-size:15px
}
.note b{color:var(--ink)}
.step-strip{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin:20px 0}
.step{
  background:rgba(235,235,230,.82);border-radius:16px;padding:13px 14px;min-height:88px
}
.step b{font-size:14px;display:block}.step span{font-size:12px;color:var(--muted)}
.flow-hero .media-shell{height:350px}
.workflow-pair{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:22px}
.workflow-final{display:grid;grid-template-columns:1.45fr .55fr;gap:22px;margin-top:22px}
.workflow-final .media-shell{height:370px}
.ip-layout{display:grid;grid-template-columns:.85fr 1.15fr;gap:22px;align-items:start}
.ip-right{display:grid;gap:22px}
.ip-video .media-shell{height:430px}
.tabbar{display:flex;gap:9px;flex-wrap:wrap;margin:0 0 20px}
.tabbtn{border:0;background:#e8e8e3;color:#4a4a4a;padding:10px 16px;border-radius:999px;cursor:pointer;font-weight:700;transition:.2s}
.tabbtn.active{background:#101010;color:white}
.tabpanel{display:none}.tabpanel.active{display:block}
.hero-explain{margin-top:16px;font-size:15px;line-height:1.7;color:#4b4b4b;background:#ecece7;border-radius:18px;padding:16px 18px}
.hero-explain b{color:#111}
.summer-exploration{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.decision-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:22px 0}
.decision-grid>div{background:#ecece7;border-radius:18px;padding:17px 18px}
.decision-grid b{font-size:16px}.decision-grid p{margin:7px 0 0;color:#555;font-size:14px;line-height:1.65}
.summer-result{margin-top:22px}
.exploration-result{margin-top:22px}
.evidence-note{margin:14px 0 0;color:#555;font-size:14px;line-height:1.7}
.asset-compare{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:16px}
.asset-compare figure{margin:0;background:#fff;border:1px solid rgba(0,0,0,.05);border-radius:16px;overflow:hidden}
.asset-compare img{width:100%;aspect-ratio:1/1;object-fit:contain;background:#fff}
.asset-compare figcaption{padding:11px 13px 13px;color:#555;font-size:13px;line-height:1.55}
.asset-compare b{color:#111;display:block;font-size:14px;margin-bottom:3px}
.knowledge-evidence{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-top:22px}
.knowledge-evidence figure{margin:0}
.knowledge-evidence .media-shell{height:390px}
.knowledge-context{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:20px}
.knowledge-context>div{background:#ecece7;border-radius:18px;padding:18px}
.knowledge-context h3{margin:0 0 8px;font-size:18px;letter-spacing:-.02em}.knowledge-context p{margin:0;color:#555;font-size:14px;line-height:1.75}
.fullscreen-btn{
  position:absolute;right:27px;top:27px;z-index:8;border:1px solid rgba(255,255,255,.55);
  background:rgba(17,17,17,.68);color:#fff;width:38px;height:38px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;cursor:pointer;backdrop-filter:blur(8px);
  opacity:.88;transition:.2s
}
.fullscreen-btn:hover{opacity:1;transform:scale(1.04)}
.formulas{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:20px}
.formula{background:#ecece7;border-radius:17px;padding:16px}
.formula b{display:block;margin-bottom:5px}.formula span{font-size:14px;color:#555}
.skill-flow{display:grid;gap:12px}
.skill-row{display:grid;grid-template-columns:42px 1fr;gap:12px;background:#fff;border:1px solid rgba(0,0,0,.05);border-radius:16px;padding:13px}
.skill-row i{font-style:normal;font-weight:800;color:var(--muted)}.skill-row b{font-size:15px}.skill-row p{margin:4px 0 0;font-size:13px;color:#666}
.reference-board{margin-top:18px}
.reference-board-head{display:flex;justify-content:space-between;gap:16px;margin-bottom:10px;color:#555;font-size:13px}
.robot-refs{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.robot-refs img{width:100%;aspect-ratio:1/1;object-fit:contain;background:#fff;border-radius:14px;border:1px solid #eee}
.harness-callout{
  margin:20px 0 24px;padding:22px 24px;border-radius:22px;background:#101010;color:#fff;
  display:flex;justify-content:space-between;align-items:center;gap:26px
}
.harness-callout strong{font-size:clamp(24px,3vw,40px);letter-spacing:-.035em}
.harness-callout p{margin:5px 0 0;color:#c7c7c7}
.cta{display:inline-flex;align-items:center;gap:8px;background:#fff;color:#111;padding:12px 16px;border-radius:999px;font-weight:800;white-space:nowrap}
.pipeline{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin:18px 0}
.pipeline-step{background:#ecece7;border-radius:15px;padding:13px;font-size:13px;min-height:90px}
.pipeline-step b{display:block;margin-bottom:6px}.pipeline-step span{color:#555;line-height:1.45}
.knowledge-flow{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:24px}
.knowledge-node{background:#fff;border:1px solid rgba(0,0,0,.05);border-radius:18px;padding:19px;min-height:142px;position:relative}
.knowledge-node:not(:last-child):after{content:"→";position:absolute;right:-17px;top:48%;color:#aaa;font-size:24px;z-index:4}
.knowledge-node b{display:block;font-size:17px}.knowledge-node p{font-size:13px;color:#666;line-height:1.6}
.fit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:26px}
.fit-card{background:#fff;border:1px solid rgba(0,0,0,.05);border-radius:20px;padding:22px}
.fit-card-index{display:block;margin-bottom:13px;color:var(--muted2);font-size:12px;font-weight:800;letter-spacing:.12em}
.fit-card b{font-size:18px}.fit-card p{color:#555;line-height:1.65}
.fit-capability-flow{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(340px,.92fr);gap:clamp(30px,5vw,84px);margin-top:34px;align-items:start}
.fit-capability-lead{padding:0;min-height:440px;border:1px solid rgba(0,0,0,.07);border-radius:28px;background:#ebe9e1;color:#171717;overflow:hidden}
.fit-hero-collage{height:286px;position:relative;overflow:hidden;border-bottom:1px solid rgba(0,0,0,.08);background:linear-gradient(122deg,#d8d5cc 0%,#f5f2ea 55%,#dedbd3 100%)}
.fit-hero-shot{position:absolute;overflow:hidden;border:7px solid rgba(255,255,255,.82);box-shadow:0 18px 36px rgba(41,35,25,.15);margin:0}
.fit-hero-shot img{width:100%;height:100%;object-fit:cover;display:block}.fit-hero-shot-a{left:8%;top:24%;width:26%;height:93%;transform:rotate(-5deg)}.fit-hero-shot-b{right:8%;top:15%;width:26%;height:94%;transform:rotate(5deg);background:#9b713c}.fit-hero-shot-b img{object-position:center 35%}
.fit-hero-cutout{position:absolute;z-index:2;left:50%;bottom:-18%;height:112%;max-width:44%;object-fit:contain;transform:translateX(-50%);filter:drop-shadow(0 13px 12px rgba(44,34,25,.25))}
.fit-capability-copy{padding:26px clamp(26px,3vw,40px) 32px}.fit-capability-copy>span,.fit-match-notes span{font-size:12px;font-weight:800;letter-spacing:.1em;color:#77736d}
.fit-capability-copy h3{margin:15px 0 12px;font-size:clamp(28px,3vw,42px);line-height:1.11;letter-spacing:-.055em}.fit-capability-copy p{max-width:620px;margin:0;color:#4f4d49;line-height:1.7}
.fit-capability-list{border-top:1px solid var(--line)}
.fit-capability-list article{display:grid;grid-template-columns:42px 1fr;gap:12px;padding:19px 0 20px;border-bottom:1px solid var(--line)}
.fit-capability-list article>span{font-size:12px;font-weight:800;color:var(--muted2);letter-spacing:.1em;padding-top:3px}
.fit-capability-list b{font-size:18px}.fit-capability-list p{margin:7px 0 0;color:#555;line-height:1.65}
.fit-match{padding-top:70px}
.fit-match-notes{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:30px 0 2px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.fit-match-notes>div{padding:22px 22px 22px 0;min-height:168px}.fit-match-notes>div+div{padding-left:22px;border-left:1px solid var(--line)}
.fit-match-notes p{margin:10px 0 0;color:#555;line-height:1.7}
.fit-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:18px}
.fit-summary>div{background:#101010;color:#fff;border-radius:20px;padding:22px}
.fit-summary b{font-size:18px}.fit-summary p{margin:8px 0 0;color:#d0d0d0;line-height:1.7}
.chapter-pager a{
  position:fixed;top:50%;z-index:80;transform:translateY(-50%);display:flex;align-items:center;gap:8px;
  padding:11px 12px;border:1px solid rgba(0,0,0,.1);border-radius:999px;background:rgba(255,255,255,.9);
  color:#222;box-shadow:0 10px 28px rgba(0,0,0,.1);backdrop-filter:blur(12px);transition:.2s
}
.chapter-pager a:hover{background:#111;color:#fff;transform:translateY(-50%) scale(1.04)}
.chapter-pager-prev{left:clamp(12px,2vw,34px)}.chapter-pager-next{right:clamp(12px,2vw,34px)}
.chapter-pager span{font-size:22px;line-height:1}.chapter-pager small{font-size:12px;font-weight:800;white-space:nowrap}
@media(max-width:1500px){.chapter-pager small{display:none}.chapter-pager a{width:44px;height:44px;padding:0;justify-content:center}}
.footer{padding:34px 0 46px;display:flex;justify-content:space-between;gap:20px;color:#8a8a8a;font-size:12px}
.lightbox{position:fixed;inset:0;z-index:999;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.83);backdrop-filter:blur(8px);padding:24px}
.lightbox.open{display:flex}
.lightbox img{max-width:94vw;max-height:90vh;border-radius:18px;background:#fff}
.lightbox button{position:absolute;top:18px;right:18px;border:0;background:#fff;color:#111;width:44px;height:44px;border-radius:999px;font-size:22px;cursor:pointer}
.reveal{opacity:0;transform:translateY(16px);transition:.55s ease}
.reveal.show{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.reveal{opacity:1;transform:none;transition:none}}
@media(max-width:980px){
  .hero,.project-grid,.case-head,.split,.editorial-grid,.ip-layout,.dual,.triple,.workflow-pair,.workflow-final,.summer-exploration,.decision-grid,.asset-compare,.knowledge-evidence,.knowledge-context,.fit-summary,.fit-capability-flow,.fit-match-notes{grid-template-columns:1fr}
  .project-card{min-height:440px}.project-card.small{min-height:300px}
  .home-showcase{grid-template-columns:1fr}.home-showcase-main{height:420px;order:-1}.home-showcase-stack,.home-showcase-side{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;height:210px}.home-showcase-links{justify-content:space-between;gap:10px}
  .step-strip{grid-template-columns:repeat(2,1fr)}
  .pipeline{grid-template-columns:repeat(2,1fr)}
  .knowledge-flow{grid-template-columns:1fr}
  .knowledge-node:not(:last-child):after{display:none}
  .fit-grid{grid-template-columns:1fr}
  .fit-capability-lead{min-height:360px}.fit-hero-collage{height:260px}.fit-match-notes>div,.fit-match-notes>div+div{min-height:auto;padding:20px 0;border-left:0;border-top:1px solid var(--line)}.fit-match-notes>div:first-child{border-top:0}
  .navbar{padding:14px 18px;align-items:flex-start}.navlinks{gap:11px}.navlinks a{font-size:12px}
  .page{padding:0 17px}.case{padding:48px 0 64px}.chapter-hero{padding:60px 0 48px}
  .media-shell.tall,.media-shell.hero-media{height:auto;min-height:390px}
  .chapter-pager{display:none}
}


/* Final public polish: keep the approved editorial structure, add only subtle hierarchy. */
.navlinks a{position:relative;padding-bottom:4px}
.navlinks a.active::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1.5px;background:var(--ink);border-radius:999px}
::selection{background:rgba(217,44,67,.16);color:var(--ink)}
.case-copy strong{font-weight:760}
@media (hover:hover){.zoom{transition:filter .2s ease}.zoom:hover{filter:brightness(.985)}}

/* 2026-08-27 FINAL VISUAL POLISH */
.chapter-hero{position:relative;isolation:isolate;overflow:hidden}
.chapter-hero::before{content:"";position:absolute;z-index:-1;width:min(760px,70vw);height:420px;right:-120px;top:-190px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.98) 0%,rgba(232,229,220,.60) 44%,rgba(232,229,220,0) 74%);pointer-events:none}
.case-head{position:relative}
.case-head::after{content:"";position:absolute;left:calc(34% + 36px);bottom:-15px;width:46px;height:2px;background:var(--accent);opacity:.58;border-radius:999px}
.case-index{font-weight:700;color:#777}
.media-card{border-color:rgba(0,0,0,.055);box-shadow:0 14px 42px rgba(18,18,18,.055)}
.media-card:hover{box-shadow:0 24px 62px rgba(18,18,18,.09)}
.media-caption{border-top:1px solid rgba(0,0,0,.045)}
.tabbar{padding:4px;width:max-content;max-width:100%;border-radius:999px;background:rgba(228,227,221,.72)}
.tabbtn{background:transparent}
.tabbtn.active{box-shadow:0 6px 16px rgba(0,0,0,.12)}
.harness-callout{box-shadow:0 18px 44px rgba(0,0,0,.13)}
@media(max-width:980px){.case-head::after{left:0}.chapter-hero::before{right:-280px;top:-180px}}

