.works-gallery{position:relative;padding:64px 0 156px}
.anchor-target{position:absolute;top:0}
.gallery-heading{display:flex;align-items:end;justify-content:space-between;gap:32px;margin-bottom:136px}
.gallery-heading h2{font-size:clamp(44px,4.5vw,72px);font-weight:500;letter-spacing:-.05em;line-height:1.2;margin-top:16px}
.gallery-heading>p{color:var(--blue);font-size:15px;text-align:right;line-height:2}
.gallery-heading>p>span{color:var(--muted);font-size:12px}
.gallery-body{position:relative;isolation:isolate}
.gallery-body:before{content:"";position:absolute;z-index:-1;inset:-44px 0 0;pointer-events:none;background:linear-gradient(90deg,#dce7f666 1px,transparent 1px) 0 0/33.333% 100%;border-right:1px solid #dce7f666;mask-image:linear-gradient(transparent,#000 8%,#000 88%,transparent)}
.portfolio-work{position:relative;min-width:0;margin-bottom:164px;scroll-margin-top:104px}
.work-number{position:absolute;left:-32px;top:-75px;z-index:2;pointer-events:none;font:400 clamp(85px,8vw,126px)/1 Arial,sans-serif;letter-spacing:-.075em;color:var(--blue)}
.case-bangyang{width:86%;margin-left:6%}
.case-union{width:100%}
.case-union .work-number{left:24px}
.case-surface{display:block;position:relative;border-radius:22px;outline-offset:7px;cursor:pointer}
.case-cover-link{position:absolute;inset:0;z-index:5;border-radius:22px}
.case-art{position:relative;overflow:hidden;border-radius:22px;isolation:isolate;transition:box-shadow .3s ease,border-color .3s ease}
.case-surface:hover .case-art,.portfolio-work:focus-within .case-art{box-shadow:0 14px 36px #1743b91c;border-color:#8aace5}
.case-open{position:absolute;z-index:5;right:24px;bottom:24px;display:inline-flex;align-items:center;gap:12px;min-height:48px;padding:6px 7px 6px 18px;background:#1646b8;color:#fff;border:1px solid #1646b8;border-radius:999px;font:500 13px/1.5 var(--portal-reading-font,sans-serif);box-shadow:0 6px 18px #163fb125;transition:background .25s,box-shadow .25s;pointer-events:none}
.case-bangyang .case-open{top:24px;bottom:auto}
.case-open-label{white-space:nowrap}
.case-open-arrow{display:grid;place-items:center;flex:0 0 34px;width:34px;height:34px;background:#fff;color:#1646b8;border-radius:50%;font:23px/1 Arial,sans-serif;transition:transform .25s}
.case-surface:hover .case-open,.case-surface:focus-within .case-open,.portfolio-work:focus-within .case-open{background:#0d339c;box-shadow:0 9px 24px #163fb138}
.case-surface.is-in-view .case-open-arrow,.case-surface.is-in-view .quant-cover-cta>span{animation:case-link-nudge 3.2s ease-in-out infinite}
.case-surface:hover .case-open-arrow,.portfolio-work:focus-within .case-open-arrow{animation:none;transform:translate(3px,-3px)}
@keyframes case-link-nudge{0%,70%,100%{transform:translate(0,0)}80%{transform:translate(3px,-3px)}90%{transform:translate(0,0)}}
.case-caption{padding-top:26px;max-width:810px}
.case-title-row{display:flex;justify-content:space-between;align-items:center;gap:20px}
.case-title-row h3{font-size:clamp(25px,2.2vw,36px);font-weight:500;line-height:1.45;letter-spacing:-.035em}
.case-title-row a:hover{color:var(--blue)}
.case-small-arrow{font:25px/1 Arial,sans-serif;color:var(--blue)}
.case-summary{margin-top:10px;color:var(--muted);font-size:14px;line-height:1.9}
.case-tags{display:flex;gap:7px;flex-wrap:wrap;margin-top:16px}
.case-tags>span{font-size:11px;line-height:1.5;color:#486385;background:#edf3fc;border:1px solid #e0eafb;border-radius:30px;padding:6px 13px}
.case-status{margin-top:12px;font-size:10px;line-height:1.8;color:#718098}
.composition-label{position:absolute;left:28px;top:25px;font:10px/1.5 Arial,sans-serif;color:#6885ae;letter-spacing:.12em}
.art-bangyang{aspect-ratio:1.65;background:linear-gradient(145deg,#edf5ff 15%,#c9dcf7 100%);border:1px solid #dce8f8}
.by-desktop{position:absolute;left:6%;top:14%;width:73%;border:7px solid #ffffffd9;border-radius:13px;overflow:hidden;box-shadow:0 14px 36px #3163a81a}
.by-desktop img{width:100%;height:auto}
.by-wecom,.by-mini{position:absolute;filter:drop-shadow(0 10px 14px #3260a31c)}
.by-wecom{width:16%;right:22%;top:36%}
.by-mini{width:18.4%;right:4.5%;top:24%}
.phone-window{aspect-ratio:390/844;border:5px solid #fff;border-radius:14px;overflow:hidden;background:#f7faff;position:relative}
.phone-window>img{width:100%;height:auto;max-width:none}
.by-wecom>span,.by-mini>span{display:block;text-align:center;margin-top:9px;font-size:10px;color:#42648f;letter-spacing:.03em}
.mini-live-window{pointer-events:none}
.mini-live-window iframe{position:absolute;top:0;left:0;width:390px;height:844px;border:0;transform:scale(var(--mini-scale,.48));transform-origin:0 0;pointer-events:none;background:#fff}
.art-union{padding:20px;background:linear-gradient(140deg,#cadbf2,#e4edf9);border:1px solid #d3e1f3}
.art-union>img{width:100%;height:auto;border-radius:10px;transition:transform .65s ease}
.case-surface:hover .art-union>img{transform:scale(1.012)}
.gallery-pair{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(64px,7vw,116px);align-items:start;padding-left:3%;padding-right:1%;margin-bottom:164px}
.gallery-pair .portfolio-work{margin-bottom:0}
.case-gdrc{margin-top:145px}
.gallery-pair .work-number{font-size:clamp(84px,7.5vw,112px);top:-72px;left:-24px}
.gallery-pair .case-title-row h3{font-size:clamp(23px,1.85vw,29px)}
.gallery-pair .case-summary{font-size:13px}
.art-annotation{aspect-ratio:1.04;background:linear-gradient(140deg,#f3f6fa,#e7edf5);border:1px solid #e4eaf3}
.annotation-main{position:absolute;width:88%;left:6%;top:15%;border:4px solid #fff;border-radius:7px;box-shadow:0 10px 24px #46536e13}
.annotation-entry{position:absolute;width:58%;right:7%;bottom:8%;border:4px solid #fff;border-radius:7px;box-shadow:0 10px 24px #46536e13}
.art-gdrc{aspect-ratio:.9;background:linear-gradient(140deg,#e5f0fc,#cee3fa);border:1px solid #dbe7f5}
.gdrc-screen{position:absolute;border:4px solid #f5faff;border-radius:15px;overflow:hidden;box-shadow:0 12px 26px #2d598428;background:#1f3046;aspect-ratio:750/1580}
.gdrc-screen img{width:100%;height:auto;max-width:none}
.screen-left{width:30%;left:3%;top:22%;transform:rotate(-5deg)}
.screen-center{z-index:2;width:37%;left:31.5%;top:14%;transform:rotate(0);aspect-ratio:750/1400}
.screen-right{width:30%;right:3%;top:31%;transform:rotate(5deg)}
.case-quant{width:86%;margin-left:9%;margin-bottom:0}
.art-quant{min-height:410px;aspect-ratio:2.14;padding:32px 38px;background:radial-gradient(ellipse at 76% 45%,#f5faff 0%,#f5faff00 52%),linear-gradient(120deg,#eef5ff 2%,#e6effe 54%,#cfdef7 100%);border:1px solid #d6e5f9}
.art-quant:before{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(90deg,transparent 49.9%,#aec6e433 50%,transparent 50.1%);pointer-events:none}
.quant-cover-top{position:relative;z-index:2;display:flex;justify-content:space-between;gap:24px;font:9px/1.5 Arial,sans-serif;color:#6282ac;letter-spacing:.12em}
.quant-cover-copy{position:relative;z-index:2;width:58%;padding-top:clamp(30px,3.1vw,48px);pointer-events:none}
.quant-wordmark{display:block;color:#163fb1;font:500 clamp(50px,5.4vw,82px)/1.05 Arial,sans-serif;letter-spacing:-.065em}
.quant-cover-title{display:block;margin-top:14px;color:#203659;font-size:clamp(19px,1.9vw,28px);font-weight:500;line-height:1.5;letter-spacing:.01em}
.quant-cover-copy>p{margin-top:13px;color:#67809e;font-size:12px;line-height:1.8}
.quant-cover-cta{display:inline-flex;align-items:center;justify-content:space-between;gap:27px;min-height:49px;margin-top:28px;padding:6px 7px 6px 20px;border:1px solid #1646b8;border-radius:30px;background:#1646b8;color:#fff;font-size:12px;font-weight:500;transition:background .25s,box-shadow .25s}
.quant-cover-cta>span{display:grid;place-items:center;width:34px;height:34px;background:#fff;color:#1646b8;border-radius:50%;font:23px/1 Arial,sans-serif;transition:transform .25s}
.quant-cover-visual{position:absolute;z-index:1;width:54%;max-width:none;height:calc(100% - 82px);object-fit:contain;right:1%;top:46px;pointer-events:none;transition:transform .7s cubic-bezier(.2,.65,.3,1)}
.quant-cover-note{position:absolute;z-index:2;right:30px;bottom:23px;color:#6782a6;font-size:10px;letter-spacing:.03em}
.case-quant .case-surface:hover .quant-cover-visual,.case-quant .case-surface:focus-visible .quant-cover-visual{transform:translateY(-4px)}
.case-quant .case-surface:hover .quant-cover-cta,.case-quant .case-surface:focus-visible .quant-cover-cta{background:#0d339c;box-shadow:0 7px 18px #163fb125}
.case-quant .case-surface:hover .quant-cover-cta>span,.case-quant .case-surface:focus-visible .quant-cover-cta>span{animation:none;transform:translate(3px,-3px)}
.case-surface:focus-visible,.case-cover-link:focus-visible{outline:3px solid #1646b8;outline-offset:6px}
.case-surface.is-entered{animation:case-enter .6s cubic-bezier(.2,.65,.3,1) both}
@keyframes case-enter{from{opacity:.55;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:1200px){.work-number{font-size:94px;top:-67px}.gallery-pair{gap:62px}.case-open{right:16px;bottom:16px;min-height:44px;padding:5px 6px 5px 14px;gap:10px;font-size:12px}.case-open-arrow{width:32px;height:32px;flex-basis:32px;font-size:22px}.art-quant{min-height:390px;padding:28px 26px}.quant-cover-copy{padding-top:38px}.quant-wordmark{font-size:58px}.quant-cover-top{font-size:8px}.quant-cover-copy>p{font-size:11px}.quant-cover-visual{right:0;width:55%}.composition-label{font-size:9px;left:21px;top:20px}}
/* Keep the Bangyang entry clear of its phone captions on narrow screens. */
@media(max-width:760px){.case-bangyang .case-surface{margin-bottom:62px}.case-bangyang .case-cover-link{bottom:-62px}.case-bangyang .case-open{top:auto;bottom:0;right:0}}
@media(prefers-reduced-motion:reduce){.case-surface.is-entered{animation:none}.case-surface .case-open-arrow,.case-surface .quant-cover-cta>span{animation:none!important;transform:none!important}.case-open,.art-union>img,.quant-cover-visual,.quant-cover-cta,.quant-cover-cta>span{transition:none}.case-quant .case-surface:hover .quant-cover-visual,.case-quant .case-surface:focus-visible .quant-cover-visual{transform:none}.case-quant .case-surface:hover .quant-cover-cta>span,.case-quant .case-surface:focus-visible .quant-cover-cta>span{transform:none}}