.cases-section{background:#f1f3f0;padding-bottom:90px}.cases-section .section-heading{align-items:center;margin-bottom:36px}.cases-section h2 span{display:block;color:#9a8566}
.filters{display:flex;flex-wrap:wrap;gap:30px;border-bottom:1px solid #d8ded7;margin-bottom:50px}.filters button{border:0;border-bottom:1px solid transparent;background:transparent;color:#8a918b;font-size:12px;letter-spacing:.03em;padding:13px 0 18px;transition:color .25s,border-color .25s}.filters button:hover,.filters button.active{color:#24392e;border-color:#24392e}.filters sup{font-size:8px;margin-left:7px}
.work-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:58px 42px;align-items:start}.project{min-width:0}.project[hidden]{display:none}
.project-wide{grid-column:1/-1;display:grid;grid-template-columns:.85fr 1.15fr;border-radius:20px;overflow:hidden;min-height:560px}.project-puli{background:#e9e5db}.project-story{padding:54px 12%;align-self:center;position:relative;z-index:1}.project-kicker{font-size:9px;letter-spacing:1.8px;color:#8b7c63;margin:0 0 23px;font-weight:400}
.project h3{font-size:32px;line-height:1.45;font-weight:500;letter-spacing:.055em;margin:0 0 22px}.project h3>span{display:block;font-size:20px;font-weight:400;letter-spacing:.035em;margin-top:12px;line-height:1.7}.project-story>p:not(.project-kicker),.project-caption>p:not(.project-kicker){font-size:12px;color:#7a827a;line-height:2.1;margin:0}
.deliverables{display:flex;flex-wrap:wrap;gap:8px 15px;list-style:none;padding:0;margin:25px 0 0;font-size:9px;color:#7e847a;letter-spacing:.02em}.deliverables li+li:before{content:'·';margin-right:15px;color:#a2aa9d}.project-outcome{border-top:1px solid #a9a38f36;margin-top:27px;padding-top:18px}.project-outcome>span{font-size:9px;color:#a28c68;letter-spacing:.1em}.project-outcome p{font-size:11px;line-height:1.9;margin:7px 0 0;color:#677062}
.project-link{padding:0 0 8px;background:none;border:0;border-bottom:1px solid #a9a089;margin-top:29px;font-size:11px;letter-spacing:.06em;transition:color .3s}.project-link>span{margin-left:28px}.project-link:hover{color:#9a8057}
.project-stage{position:relative;overflow:hidden;border:0;padding:0;min-width:0;isolation:isolate;cursor:zoom-in}.puli-stage{min-height:560px;background:radial-gradient(ellipse at 60% 26%,#fbfaf4,#e2ded2 75%);cursor:default}.puli-stage:after{content:'';position:absolute;inset:auto 0 0;height:100px;pointer-events:none;background:linear-gradient(transparent,#e3dfd3aa);z-index:3}
.stage-word{position:absolute;top:28px;left:35px;font-family:Georgia,serif;font-size:65px;line-height:1;color:#ac9d7d35;letter-spacing:2px;white-space:nowrap;z-index:-1}.stage-word>span{display:block;font-family:Arial,sans-serif;font-size:7px;letter-spacing:3px;margin-top:12px;color:#9b907a99}
.phone{--screen-ratio:1206/2447;--status-offset:-6.6743%;aspect-ratio:var(--screen-ratio);border:0;padding:0;border-radius:15px;display:block;position:absolute;overflow:hidden;box-shadow:12px 24px 48px #30332624;background:transparent;transition:transform .6s cubic-bezier(.22,.61,.36,1),box-shadow .6s;cursor:zoom-in}.phone img{position:absolute;left:0;top:0;display:block;width:100%;height:auto;margin:0;transform:translateY(var(--status-offset))}.phone-main{width:38%;left:10%;top:69px;transform:rotate(-5deg);z-index:2}.phone-secondary{width:38%;right:9%;top:118px;transform:rotate(6deg)}.phone:hover{transform:rotate(0) translateY(-8px);box-shadow:10px 32px 60px #30332630}
.stage-note{position:absolute;left:31px;bottom:22px;font-size:8px;letter-spacing:1.6px;color:#948b75;z-index:4}.project-tile{padding-bottom:5px}.project-tile .project-stage{display:flex;align-items:center;justify-content:center;width:100%;height:400px;border-radius:17px;background:#e5eae4}.project-caption{padding:28px 4px 4px}.project-caption .project-kicker{margin-bottom:11px;font-size:8px;color:#9b8a6f}.project-caption h3{font-size:24px;margin-bottom:12px}.project-caption h3 span{font-size:14px;color:#616e63;margin-top:9px;letter-spacing:.03em}.project-caption .deliverables{margin-top:21px}.tile-offset{margin-top:65px}
.mall-stage{background:radial-gradient(ellipse at 25% 10%,#fbf7e6,#e9e3cc)!important}.mall-stage .stage-word{font-size:39px;top:29px;left:26px;letter-spacing:1px;color:#b9a87a38}.mall-stage .phone{--screen-ratio:941/1926;--status-offset:-5.957%;width:34%;left:13%;top:68px;transform:rotate(-5deg)}.mall-stage .phone:nth-of-type(2){left:auto;right:13%;top:103px;transform:rotate(6deg)}.mall-stage .phone:hover{transform:rotate(0) translateY(-6px)}
.weining-stage{background:radial-gradient(ellipse at 70% 15%,#f1f3e9,#e0e5d7)!important;padding:40px 27px!important}.weining-stage img{width:96%;height:auto;box-shadow:12px 25px 45px #344b3420;border-radius:8px;transform:rotate(-3deg);transition:transform .6s}.weining-stage:hover img{transform:rotate(0) translateY(-5px)}
.image-open{position:absolute;right:20px;bottom:19px;padding:8px 13px;border:1px solid #ffffffc9;border-radius:30px;background:#ffffffe8;color:#5b6e61;font-size:9px;letter-spacing:.04em;box-shadow:0 3px 12px #20342505;z-index:4;transition:background .3s,transform .3s}.project-stage:hover .image-open{background:#fff;transform:translateY(-2px)}
.project-jingce{background:radial-gradient(ellipse at 85% 50%,#304b6844,transparent 70%),#152b43;color:#fff;min-height:490px;margin:0}.project-jingce .project-story{padding-top:45px;padding-bottom:45px}.project-jingce .project-kicker{color:#8ea6bb}.project-jingce h3>span{color:#d5dfeb}.project-jingce .project-story>p:not(.project-kicker){color:#99aebe}.project-jingce .deliverables{color:#a3b5c5}.project-jingce .project-link{color:#e8e8e0;border-color:#647c8e}
.jingce-stage{align-self:center;margin:38px -5% 38px 4%;border-radius:11px 0 0 11px;background:#eef2fc;box-shadow:0 30px 70px #07101f50;transform:perspective(1100px) rotateY(-7deg) rotateZ(-2deg);width:103%;transition:transform .6s}.jingce-stage:hover{transform:perspective(1100px) rotateY(-2deg) rotateZ(0)}.browser-bar{display:none}.jingce-stage img{width:100%;height:auto;display:block}
.live-stage{background:radial-gradient(ellipse at 30% 10%,#f3f6f8,#e0e8ed)!important}.remote-stage{background:radial-gradient(ellipse at 70% 15%,#f3f6f0,#e0e9df)!important}.screen-crop{display:block;position:relative;width:89%;aspect-ratio:1.42;overflow:hidden;border-radius:9px;box-shadow:8px 24px 45px #334b5621;transform:perspective(1000px) rotateY(-5deg) rotateZ(-3deg);transition:transform .6s}.screen-crop img{display:block;width:102%;max-width:none;height:auto;margin:-3% 0 0 -1%}.remote-stage .screen-crop{aspect-ratio:1.49;transform:perspective(1000px) rotateY(5deg) rotateZ(3deg);box-shadow:8px 24px 45px #34564020}.live-stage:hover .screen-crop,.remote-stage:hover .screen-crop{transform:perspective(1000px) rotateY(0) rotateZ(0) translateY(-4px)}
.project-tile .illustration-stage{height:400px;background:#e8ece5}.jobsafe-stage{background:radial-gradient(ellipse at 25% 15%,#f4f5ef,#e4e9e0)!important}.commerce-stage{background:radial-gradient(ellipse at 60% 15%,#f6f3ec,#e7e4db)!important}.visual-sheet{display:block;width:89%;border-radius:9px;overflow:hidden;box-shadow:10px 24px 46px #3443351b;transform:perspective(1100px) rotateY(-4deg) rotateZ(-3deg);transition:transform .6s}.visual-sheet img{display:block;width:100%;height:auto}.commerce-stage .visual-sheet{transform:perspective(1100px) rotateY(4deg) rotateZ(3deg)}.illustration-stage:hover .visual-sheet{transform:perspective(1100px) rotateY(0) rotateZ(0) translateY(-4px)}.art-credit{position:absolute;right:20px;bottom:19px;padding:7px 12px;border-radius:30px;background:#ffffffe8;color:#8b8c7e;font-size:8px;letter-spacing:.06em;border:1px solid #ffffffaa}
.case-closing{border-top:1px solid #d4dcd2;padding-top:29px;margin-top:55px;display:flex;justify-content:space-between;gap:20px;font-size:11px;color:#879080}.case-closing a{color:#435a48;border-bottom:1px solid #a7b5a4;padding-bottom:5px;letter-spacing:.03em}
@media(min-width:1450px){.puli-stage,.project-wide{min-height:620px}.project-jingce{min-height:530px}.project-tile .project-stage,.project-tile .illustration-stage{height:440px}}
@media(max-width:1050px){.work-gallery{gap:46px 30px}.project-wide{grid-template-columns:1fr 1fr;min-height:500px}.project-story{padding:38px 9%}.puli-stage{min-height:500px}.phone-main,.phone-secondary{width:41%}.phone-main{left:6%;top:90px}.phone-secondary{right:6%;top:125px}.project-tile .project-stage,.project-tile .illustration-stage{height:320px}.project h3{font-size:28px}.project h3>span{font-size:18px}.project-caption h3{font-size:22px}.project-caption h3>span{font-size:14px}.tile-offset{margin-top:50px}.stage-word{font-size:54px;left:25px}.stage-word>span{font-size:6px}}
@media(max-width:760px){.cases-section .section-heading{margin-bottom:24px}.filters{gap:20px;margin-bottom:30px}.filters button{font-size:10px;padding-bottom:13px}.work-gallery{grid-template-columns:1fr;gap:38px}.project-wide{grid-template-columns:1fr;min-height:0;border-radius:14px}.project-story{padding:31px 27px 35px}.project h3{font-size:27px;margin-bottom:17px}.project h3>span{font-size:20px;margin-top:10px;line-height:1.65}.project-kicker{font-size:8px;margin-bottom:19px}.project-story>p:not(.project-kicker),.project-caption>p:not(.project-kicker){font-size:11px;line-height:2.1}.puli-stage{min-height:380px}.phone-main{width:36%;left:12%;top:45px}.phone-secondary{width:36%;right:12%;top:75px}.stage-word{font-size:48px;top:20px;left:24px}.stage-word>span{font-size:5px;letter-spacing:2px;margin-top:8px}.phone{border:0;border-radius:11px}.project-tile .project-stage,.project-tile .illustration-stage{height:280px;border-radius:13px}.tile-offset{margin-top:0}.project-caption{padding:22px 3px 0}.project-caption h3{font-size:22px}.project-caption h3>span{font-size:14px}.project-caption .project-kicker{font-size:8px;margin-bottom:12px}.deliverables{font-size:8px;gap:8px 11px;margin-top:20px}.deliverables li+li:before{margin-right:11px}.project-outcome{margin-top:23px;padding-top:15px}.project-link{margin-top:24px;font-size:10px}.project-jingce .project-story{padding:32px 27px}.jingce-stage{margin:0 -3% 35px 7%;width:96%;transform:rotate(-2deg)}.mall-stage .phone{width:35%;left:12%;top:42px}.mall-stage .phone:nth-of-type(2){right:12%;top:69px}.mall-stage .stage-word{font-size:32px;top:20px;left:20px}.weining-stage{padding:27px 20px!important}.screen-crop,.visual-sheet{width:88%;border-radius:6px}.image-open,.art-credit{right:14px;bottom:14px;font-size:8px;padding:6px 10px}.case-closing{display:block;font-size:10px;padding-top:24px;margin-top:35px}.case-closing a{display:inline-block;margin-top:16px}.stage-note{font-size:7px;left:23px;bottom:19px}}


/* Preserve the original staggered layout; include the shared mall search header. */
.mall-stage .phone.mall-with-search{--screen-ratio:941/2057}.mall-composite{display:block;width:100%}.mall-composite-header,.mall-composite-body{display:block;position:relative;overflow:hidden;width:100%}.mall-composite-header{aspect-ratio:941/239}.mall-composite-body{aspect-ratio:941/1818}.phone .mall-composite-header img{transform:translateY(-5.957%)}.phone .mall-composite-body img{transform:translateY(-11.2305%)}
.jingce-stage{width:92%;margin:34px 4%;border-radius:10px;transform:perspective(1100px) rotateY(-3deg) rotateZ(-1deg)}@media(max-width:760px){.jingce-stage{width:90%;margin:0 5% 32px;transform:none}}