:root{
  --bg:#ffffff;
  --ink:#111114;
  --muted:#6b6b72;
  --soft:#9a9aa0;
  --acc:#4f46e5;
  --acc-soft:#eef0ff;
  --line:#ececef;
  --surface:#ffffff;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;-webkit-font-smoothing:antialiased;line-height:1.6}
::selection{background:var(--acc-soft)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:1040px;margin:0 auto;padding:0 32px}
.read{max-width:720px;margin:0 auto;padding:0 32px}

header{padding:22px 0}
.bar{max-width:1040px;margin:0 auto;padding:0 32px;display:flex;align-items:center;justify-content:space-between}
.bar.home{display:grid;grid-template-columns:1fr 1fr;align-items:center}
.bar.home .nav{display:flex;gap:11rem}
.bar a{color:var(--muted);font-size:.95rem}
.bar a:hover{color:var(--ink)}
.bar .name{color:var(--ink);font-weight:600}
.back{display:inline-flex;align-items:center;gap:7px}
.back:hover{color:var(--acc)}

.hero{padding:12vh 0 0}
.hero .row{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.hero h1{font-size:clamp(3rem,8vw,5.5rem);font-weight:700;line-height:1.0;letter-spacing:-.03em}
.hero .intro{font-size:clamp(1.2rem,2.1vw,1.7rem);line-height:1.34;color:var(--ink);max-width:24ch}
@media (max-width:760px){.hero .row{grid-template-columns:1fr;gap:18px}.hero{padding:7vh 0 0}.hero .intro{max-width:none}}

.meta{padding:24vh 0 10vh}
.meta .row2{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.block{display:grid;grid-template-columns:96px 1fr;gap:8px}
.block .lab{font-size:.9rem;color:var(--ink)}
.block .txt{font-size:.9rem;color:var(--muted);line-height:1.6}
@media (max-width:620px){.meta{padding:10vh 0 6vh}.meta .row2{grid-template-columns:1fr;gap:22px}.bar.home .nav{gap:3rem}}

.work{padding:0 0 3rem}
.grid{display:grid;grid-template-columns:1fr 1fr;column-gap:32px;row-gap:52px}
.item img{width:100%;height:auto;border-radius:14px;background:#f3f3f5}
.item .top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:15px}
.item h3{font-size:1.15rem;font-weight:600;letter-spacing:-.01em;transition:color .2s ease}
.item .yr{font-size:.9rem;color:var(--soft);white-space:nowrap}
.item p{margin-top:6px;font-size:.95rem;color:var(--muted);max-width:48ch}
.item:hover h3{color:var(--acc)}
.item.wide{grid-column:1/-1}
.item.note{cursor:default}
.note .box{display:grid;grid-template-columns:240px 1fr;gap:24px;align-items:center}
.note .xpate-img{width:100%;height:160px;object-fit:cover;border-radius:10px;display:block}
.note h3{color:var(--ink);font-size:1.05rem}
.note .desc{margin-top:7px;font-size:.95rem;color:#4b4a66;max-width:52ch}
.note .req{margin-top:12px;font-size:.95rem;color:#4b4a66;line-height:1.55}
.note .req a{color:var(--acc);font-weight:500;white-space:nowrap}
@media (max-width:760px){.grid{grid-template-columns:1fr;row-gap:40px}}
@media (max-width:620px){.note .box{grid-template-columns:1fr;gap:14px;padding:24px}}

.contact{padding:4rem 0 6rem}
.contact .row{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.contact h2{font-size:clamp(1.4rem,2.6vw,1.9rem);font-weight:600;line-height:1.25;letter-spacing:-.01em;max-width:20ch}
.contact .links{display:flex;flex-direction:column;gap:10px;font-size:1.05rem}
.contact .links a:hover{color:var(--acc)}
@media (max-width:620px){.contact .row{grid-template-columns:1fr;gap:20px}}

.case-hero{padding:3rem 0 1rem}
.case-hero .eyebrow{color:var(--acc);font-weight:500;font-size:.92rem;margin-bottom:.8rem}
.case-hero h1{font-size:clamp(2rem,4.4vw,2.9rem);font-weight:700;line-height:1.12;letter-spacing:-.02em;max-width:18ch}
.case-hero .tldr{margin-top:1.2rem;font-size:1.12rem;color:var(--ink);max-width:62ch}
.stats{display:flex;flex-wrap:wrap;gap:12px;margin-top:1.6rem}
.stat{border:1px solid var(--line);border-radius:12px;padding:12px 16px;min-width:130px}
.stat .v{font-size:1.35rem;font-weight:600;color:var(--acc)}
.stat .k{font-size:.85rem;color:var(--muted);margin-top:2px}

.case-body{padding:1.5rem 0 1rem}
.case-body h2{font-size:1.3rem;font-weight:600;margin:2.4rem 0 .8rem;letter-spacing:-.01em}
.case-body p{font-size:1.05rem;color:var(--muted);margin-bottom:1.1rem}
.case-body ul{margin:0 0 1.2rem;padding:0;list-style:none}
.case-body li{position:relative;padding-left:1.4rem;margin-bottom:.6rem;color:var(--muted);font-size:1.05rem}
.case-body li::before{content:"";position:absolute;left:.05rem;top:.7em;width:6px;height:6px;border-radius:50%;background:var(--acc)}
figure{margin:1.8rem 0}
figure img{width:100%;border-radius:14px;border:1px solid var(--line)}
figure figcaption{margin-top:.6rem;font-size:.88rem;color:var(--soft);text-align:center}