.case-toolbar{display:flex;justify-content:space-between;align-items:center;gap:24px;margin:20px 0 34px;padding-top:24px;border-top:1px solid var(--line)}.case-filters{display:flex;gap:6px;flex-wrap:wrap}.case-filters button{border:1px solid transparent;padding:10px 18px;border-radius:40px;background:transparent;color:var(--muted);font:inherit;font-size:12px;cursor:pointer}.case-filters button[aria-pressed=true]{background:var(--ink);color:var(--bg);border-color:var(--ink)}.case-filters button:hover{border-color:var(--line);color:var(--ink)}.case-filters button[aria-pressed=true]:hover{color:var(--bg)}#case-count{font-size:10px;letter-spacing:.5px;color:var(--muted);white-space:nowrap}.case-grid{display:grid;grid-template-columns:1fr 1fr;gap:54px 30px;margin-bottom:110px}.case-study[hidden]{display:none}.case-study{min-width:0}.case-preview{width:100%;position:relative;isolation:isolate;display:block;aspect-ratio:1.32;border:1px solid var(--line);border-radius:22px;background:var(--panel);overflow:hidden;padding:0;cursor:pointer;text-align:start;color:var(--ink);touch-action:pan-y}.case-ambience{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 40%,color-mix(in srgb,var(--case-accent) 15%,transparent),transparent 75%)}.case-browser{position:absolute;left:7%;top:11%;width:87%;border-radius:10px;border:1px solid color-mix(in srgb,var(--case-accent) 26%,var(--line));overflow:hidden;background:#171b21;box-shadow:0 25px 55px #0004;transform:perspective(1200px) rotateY(-3deg) rotateX(4deg);transition:transform .65s cubic-bezier(.2,.7,.2,1)}.case-browser-toolbar{height:28px;display:flex;align-items:center;justify-content:space-between;padding:0 12px;background:#171b21;color:#bec4cc;direction:ltr;gap:10px}.case-browser-toolbar>span:first-child{display:flex;gap:4px}.case-browser-toolbar i{width:4px;height:4px;background:#77818c;border-radius:50%}.case-browser-toolbar i:first-child{background:var(--case-accent)}.case-browser-toolbar small{font-size:8px}.case-browser-toolbar>span:last-child{font:13px Manrope}.case-desktop{display:block;width:100%;height:auto;aspect-ratio:1.44;object-fit:cover;object-position:top;background:#171b21}.case-phone{position:absolute;bottom:13%;inset-inline-end:5%;width:19.5%;aspect-ratio:.475;background:#12171d;border:4px solid #313b46;border-radius:17px;box-shadow:0 17px 34px #0007;overflow:hidden;transform:rotate(7deg);transition:transform .6s cubic-bezier(.2,.7,.2,1)}.case-phone img{width:100%;height:100%;display:block;object-fit:cover;object-position:top}.case-phone>i{position:absolute;width:35%;height:5px;top:4px;left:32.5%;background:#101219;border-radius:10px;z-index:1}.case-preview-action{position:absolute;inset-inline-start:6%;bottom:6%;display:flex;align-items:center;gap:12px;font-size:11px;padding:8px 12px;border:1px solid var(--line);border-radius:30px;background:var(--bg);box-shadow:0 6px 22px #0001}.case-preview-action b{color:var(--accent);font:20px Manrope}.case-image-index{position:absolute;inset-inline-end:6%;bottom:7.5%;font-size:8px;color:var(--muted);letter-spacing:1px;direction:ltr}.case-preview:hover .case-browser{transform:perspective(1200px) rotateY(0) rotateX(0) translateY(-6px) scale(1.025)}.case-preview:hover .case-phone{transform:rotate(0) translateY(-6px)}.case-preview:focus-visible,.case-filters button:focus-visible,#project-viewer button:focus-visible{outline:2px solid var(--accent);outline-offset:5px}.case-info{padding:23px 3px 0}.case-name{display:flex;align-items:center;gap:15px}.case-name>.mono{font-size:11px;align-self:start;padding-top:6px;color:var(--muted)}.case-name small{font-size:10px;color:var(--muted)}.case-name h3{font-size:25px;font-weight:500;line-height:1.6;margin:3px 0 0}.case-info-arrow{margin-inline-start:auto;font:27px Manrope;color:var(--accent)}.case-info>p{font-size:12px;line-height:1.95;color:var(--muted);max-width:90%;margin:13px 0 17px}.case-tags{display:flex;flex-wrap:wrap;gap:8px}.case-tags>span{font-size:9px;padding:4px 10px;border:1px solid var(--line);border-radius:30px;color:var(--muted)}.lab-heading{padding-top:40px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:end;gap:28px;margin-bottom:30px}.lab-heading h3{font-weight:400;font-size:30px;line-height:1.5;margin:13px 0 0}.lab-heading>p{max-width:340px;color:var(--muted);font-size:12px;line-height:1.9}.lab-heading .section-label{color:var(--accent)}#project-viewer{inset:0;width:min(1180px,96vw);max-width:none;max-height:92dvh;margin:auto;padding:0;border:1px solid var(--line);border-radius:20px;background:var(--bg);color:var(--ink);overflow:auto;box-shadow:0 40px 140px #0008}#project-viewer::backdrop{background:#03060dd9;backdrop-filter:blur(14px)}.case-viewer-shell{min-width:0}.case-viewer-top{position:sticky;top:0;z-index:2;background:var(--bg);border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:15px;padding:15px 26px}.case-viewer-top>span{font-size:10px;color:var(--muted)}.case-viewer-close{display:flex;align-items:center;gap:15px;border:0;background:transparent;color:var(--ink);cursor:pointer}.case-viewer-close>span{font-size:11px;font-family:inherit}.case-viewer-close>b{font:30px Manrope;font-weight:400}.case-viewer-heading{padding:30px 34px 24px;display:flex;gap:25px;align-items:center;justify-content:space-between}.case-viewer-heading h2{font-size:31px;line-height:1.5;letter-spacing:0;margin:0}.case-viewer-heading p{font-size:12px;line-height:1.9;color:var(--muted);max-width:660px;margin:8px 0 0}.case-devices{display:flex;gap:5px;flex-shrink:0}.case-devices button{border:1px solid var(--line);border-radius:25px;padding:9px 17px;background:transparent;color:var(--muted);font-size:12px;font-family:inherit;cursor:pointer}.case-devices button[aria-pressed=true]{background:var(--ink);color:var(--bg)}.case-view-stage{padding:28px;background:var(--panel);border-block:1px solid var(--line);display:flex;justify-content:center;min-height:250px}.case-view-stage img{display:block;width:100%;max-width:1050px;height:auto;align-self:start;border-radius:8px;box-shadow:0 16px 45px #0003}.case-view-stage[data-device=mobile] img{max-width:330px;border-radius:24px;border:6px solid #27313c}.case-viewer-bottom{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:20px 34px}.case-viewer-bottom>span{font-size:10px;color:var(--muted)}.case-viewer-bottom .button{font-size:11px;padding:10px 18px}.case-viewer-bottom .button>b{font:22px Manrope}html[data-theme=light] .case-ambience{background:radial-gradient(ellipse at 50% 40%,color-mix(in srgb,var(--case-accent) 24%,transparent),transparent 80%)}html[data-theme=light] .case-browser{box-shadow:0 22px 38px #26314420}html[data-theme=light] .case-preview-action{box-shadow:0 5px 18px #26314412}html[data-theme=light] #project-viewer{box-shadow:0 35px 100px #0d1b3555}
@media(min-width:1000px){.case-study:nth-child(even){padding-top:60px}.case-grid:has(.case-study[hidden]) .case-study{padding-top:0}}
@media(max-width:800px){.case-grid{gap:36px 18px;margin-bottom:65px}.case-preview{aspect-ratio:1.16;border-radius:15px}.case-browser{left:5%;width:90%;top:12%;border-radius:7px}.case-browser-toolbar{height:20px;padding:0 8px}.case-browser-toolbar small{font-size:6px}.case-phone{border-width:2px;border-radius:10px;bottom:16%}.case-preview-action{font-size:9px;padding:6px 9px;gap:7px}.case-preview-action b{font-size:16px}.case-image-index{font-size:6px}.case-info{padding-top:17px}.case-name h3{font-size:21px}.case-name small{font-size:9px}.case-info>p{font-size:11px;max-width:100%}.case-tags>span{font-size:8px}.case-name{gap:11px}.case-toolbar{gap:14px}.case-filters button{font-size:10px;padding:8px 12px}.lab-heading h3{font-size:26px}.case-viewer-heading{display:block;padding:22px}.case-viewer-heading h2{font-size:26px}.case-devices{margin-top:18px}.case-viewer-top{padding:12px 20px}.case-viewer-bottom{padding:18px 22px}.case-view-stage{padding:18px}.case-viewer-close>span{font-size:10px}}
@media(max-width:540px){.case-grid{grid-template-columns:1fr;gap:36px}.case-preview{aspect-ratio:1.27}.case-browser-toolbar{height:24px}.case-browser-toolbar small{font-size:7px}.case-name h3{font-size:25px}.case-info>p{font-size:12px}.case-tags>span{font-size:9px}.case-toolbar{align-items:start;flex-direction:column;margin-bottom:25px}.case-filters{gap:2px;width:100%}.case-filters button{font-size:11px;padding:8px 13px}#case-count{font-size:9px}.case-browser{top:11%}.case-preview-action{font-size:10px}.case-image-index{font-size:7px}.case-phone{width:19%;bottom:15%;border-radius:12px;border-width:3px}.lab-heading{display:block}.lab-heading>p{font-size:11px;margin-top:18px}#project-viewer{width:calc(100vw - 20px);max-height:94dvh;border-radius:15px}.case-viewer-bottom{align-items:start;flex-direction:column}.case-viewer-bottom .button{width:100%}.case-viewer-heading p{font-size:11px}.case-view-stage{padding:12px}.case-view-stage[data-device=mobile] img{max-width:290px}}
@media(prefers-reduced-motion:reduce){.case-browser,.case-phone{transition:none}}
html.motion-paused .case-browser,html.motion-paused .case-phone{transition:none}