.work-showcase .section{padding-block:64px}
.work-showcase .section-top{margin-bottom:26px;align-items:center}
.work-showcase .section-top h2{font-size:42px}
.project-picker{display:block;margin-bottom:20px}
.project-picker>p{display:flex;justify-content:space-between;font-size:13px;color:var(--muted);margin-bottom:12px}
.project-options{display:flex;flex-wrap:wrap;gap:8px}
.project-options button{font:14px Arial;min-height:44px;padding:10px 20px;border:1px solid #c9cbc9;border-radius:6px;background:transparent;color:var(--ink);cursor:pointer}
.project-options button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:white}
.project-stage .project-panel[hidden]{display:none!important}
.work-showcase .project-panel.is-active{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);background:var(--paper);border-radius:10px;overflow:hidden;align-items:stretch}
.project-panel>*{min-width:0}
.work-showcase .project-panel .project-art,.work-showcase .project-panel .mini-art{height:auto;min-height:310px;margin:0;padding:30px;border-radius:0;box-sizing:border-box}
.work-showcase .project-panel .project-copy{padding:32px;align-self:center}
.work-showcase .project-panel h3{font-size:30px;letter-spacing:-.9px;line-height:1.15;margin-bottom:18px}
.work-showcase .project-panel .eyebrow{font-size:11px;line-height:1.6;margin-bottom:14px}
.work-showcase .project-panel .project-copy>p:not(.eyebrow){font-size:16px;color:var(--muted);margin-bottom:22px;line-height:1.6}
.work-showcase .dashboard-art{justify-content:center;gap:15px}
.work-showcase .dashboard-art img{width:100%;height:auto;max-height:240px;object-fit:contain}
.work-showcase .dashboard-art .art-caption{margin-top:0}
.work-showcase .soko-art{justify-content:space-between;gap:20px}
.work-showcase .soko-art strong{font-size:72px}
.work-showcase .mini-art{gap:20px;position:relative}
.work-showcase .mini-art>img{max-width:220px;max-height:68px;width:75%;object-fit:contain}
.work-showcase .flutter-art .agency-mark{position:static;width:58px;height:58px;max-height:58px}
.work-showcase .flutter-art{padding-right:30px}
.work-showcase .mini-art>span,.work-showcase .mini-art>small{font-size:14px}
.case-result{margin:4px 0 18px}
.case-result .result{font-size:38px;letter-spacing:-1.6px;line-height:1.1}
.case-result .result-label{font-size:14px;min-height:0;margin:6px 0 0;color:var(--muted)}
.work-showcase details p{margin-top:14px}
@media(max-width:800px){
 .work-showcase .section{padding-block:46px}
 .work-showcase .section-top{display:block;margin-bottom:22px}
 .work-showcase .section-top h2{font-size:36px}
 .work-showcase .section-top>p{max-width:100%;margin-top:14px;font-size:16px}
 .project-options button{padding:10px 15px;font-size:14px}
 .work-showcase .project-panel.is-active{display:grid;grid-template-columns:1fr}
 .work-showcase .project-panel .project-art,.work-showcase .project-panel .mini-art{min-height:0;height:auto;padding:20px 24px}
 .work-showcase .project-panel .project-copy{padding:23px 24px}
 .work-showcase .project-panel h3{font-size:25px;margin-bottom:13px}
 .work-showcase .project-panel .project-copy>p:not(.eyebrow){margin-bottom:17px}
 .work-showcase .soko-art{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:center}
 .work-showcase .soko-art>.project-brand{font-size:24px}
 .work-showcase .soko-art>div{text-align:right}
 .work-showcase .soko-art strong{font-size:46px;letter-spacing:-2px}
 .work-showcase .soko-art strong span{font-size:33px}
 .work-showcase .soko-art p{font-size:13px;margin:5px 0 0}
 .work-showcase .soko-art .art-caption{grid-column:1/-1;font-size:11px}
 .work-showcase .dashboard-art{gap:10px}
 .work-showcase .dashboard-art img{max-height:145px}
 .work-showcase .dashboard-art .project-brand{font-size:21px}
 .work-showcase .dashboard-art .art-caption{font-size:11px}
 .work-showcase .mini-art{gap:12px;min-height:140px!important}
 .work-showcase .mini-art>img{max-width:170px;max-height:45px}
 .work-showcase .flutter-art{display:grid;grid-template-columns:1fr auto;gap:8px 18px}
 .work-showcase .flutter-art>img:first-child{grid-column:1;align-self:end;width:100%}
 .work-showcase .flutter-art>span{grid-column:1;font-size:12px;align-self:start}
 .work-showcase .flutter-art .agency-mark{grid-column:2;grid-row:1/3;width:54px;height:54px}
 .case-result .result{font-size:34px}
 .case-result{margin-bottom:14px}
}
@media(min-width:801px) and (max-width:1000px){.work-showcase .project-panel .project-copy{padding:25px}.work-showcase .project-panel h3{font-size:27px}.work-showcase .project-panel .project-art{padding:24px}}