@font-face{font-family:Suisse;src:url('assets/fonts/SuisseIntl-SemiBold.otf') format('opentype');font-weight:600;font-display:swap}
@font-face{font-family:Suisse;src:url('assets/fonts/SuisseIntl-Bold.otf') format('opentype');font-weight:700;font-display:swap}
.case-article{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;align-items:center;padding:64px 24px 128px}
.case-text{width:min(618px,100%);padding:64px 0;position:relative;font-size:18px;font-weight:450;line-height:26px}
.case-text h1{font-size:40px;line-height:48px;font-weight:500}
.case-text h2{font-size:32px;line-height:38px;font-weight:450;margin-bottom:24px}
.case-text p+p{margin-top:18px}
.case-text .paragraph-break{margin-top:62px}
.case-task-list{padding-left:27px;margin:18px 0;line-height:26px}
.case-text strong{font-weight:600}
.case-header{display:flex;flex-direction:column;gap:32px}
.project-facts{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:24px;width:100%}
.project-facts .full{grid-column:1/-1}
.project-facts dt{font-size:12px;font-weight:500;color:var(--muted);line-height:16px;margin-bottom:8px}
.project-facts dd{margin:0;font-size:16px;line-height:22px}
.case-glow{position:absolute;z-index:-1;top:372px;left:50%;transform:translateX(-50%);width:1545px;height:1545px;filter:blur(400px);opacity:.6;pointer-events:none;overflow:hidden}
.case-glow img{position:absolute;width:1940px;height:1112px;left:-248px;top:274px;object-fit:cover}
[data-theme=dark] .case-glow{opacity:.17;mix-blend-mode:screen}
.case-visual{position:relative;max-width:100%;flex:none}
.image-zoom{display:block;position:relative;border:0;background:none;padding:0;cursor:zoom-in;max-width:100%;border-radius:12px;color:inherit}
.image-zoom img{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit;box-shadow:0 0 0 1px #00000005,0 9px 28px #0e0f0c1f}
.hero-composition{width:809px;aspect-ratio:809/571}
.hero-screen{position:absolute;left:0;top:0;width:84.178%;height:84.81%;border-radius:0}
.hero-modal{position:absolute;left:69.716%;top:23.642%;width:30.284%;height:76.252%;border-radius:16px}
.before-composition{width:893px;aspect-ratio:893/533}
.before-table{position:absolute;width:72.789%;height:61.538%;top:0;left:0;border-radius:16px}
.before-app{position:absolute;width:63.606%;height:76.923%;left:36.394%;top:23.077%;border-radius:16px}
.research-composition{width:1004px;aspect-ratio:1004/789}
.research-a{position:absolute;width:64.044%;height:38.657%;left:13.247%;top:2.408%;border-radius:16px}
.research-b{position:absolute;width:72.809%;height:55.133%;left:8.865%;top:28.01%;border-radius:16px}
.research-c{position:absolute;width:49.801%;height:27.503%;left:47.41%;top:16.73%;border-radius:16px}
.research-d{position:absolute;width:37.45%;height:24.335%;left:2.789%;top:70.977%;border-radius:16px}
.flow-composition{display:flex;flex-direction:column;align-items:center;gap:20px;width:644px}
.flow-tall{width:272px;aspect-ratio:272/962;border-radius:0}
.flow-wide{width:644px;aspect-ratio:644/237;border-radius:0}
.screens-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:20px;width:968px}
.screens-grid .image-zoom{width:calc(50% - 22px);height:auto;border-radius:0}
.screens-grid img{height:auto;box-shadow:none}
.case-result .end-back{margin-top:40px}
.image-viewer{position:fixed;inset:0;width:calc(100% - 32px);max-width:1400px;height:calc(100dvh - 32px);max-height:none;border:1px solid var(--border);border-radius:18px;background:var(--page);color:var(--ink);padding:64px 16px 16px;overflow:hidden}
.image-viewer::backdrop{background:#000a;backdrop-filter:blur(6px)}
.viewer-close{position:absolute;right:16px;top:12px;z-index:1}
.viewer-close span{font-size:23px;line-height:16px}
.viewer-scroll{width:100%;height:100%;overflow:auto;display:flex;align-items:flex-start;justify-content:flex-start}
.viewer-scroll img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;margin:auto;cursor:zoom-in}
.viewer-scroll.is-zoomed img{max-width:none;max-height:none;margin:0;cursor:zoom-out}
html:has(.image-viewer[open]){overflow:hidden}
@media(max-width:699.98px){
 .case-article{padding:88px 24px 64px}
 .case-text{padding:40px 0;width:min(490px,100%);font-size:17px;line-height:26px}
 .case-header{padding-top:24px;gap:28px}
 .case-text h1{font-size:34px;line-height:40px}
 .case-text h2{font-size:28px;line-height:34px}
 .project-facts{gap:24px 16px}
 .project-facts>div:nth-last-child(-n+2){grid-column:1/-1}
 .hero-modal{border-radius:6px}
 .before-composition,.research-composition{display:flex;flex-direction:column;gap:20px;aspect-ratio:auto}
 .before-composition .image-zoom,.research-composition .image-zoom{position:relative;inset:auto;width:100%;height:auto}
 .before-composition img,.research-composition img{height:auto}
 .research-c{order:2}.research-d{order:3}
 .screens-grid{gap:24px}.screens-grid .image-zoom{width:100%}
 .case-glow{top:350px;width:900px;height:1100px;filter:blur(140px);opacity:.35}
 .image-viewer{width:calc(100% - 16px);height:calc(100dvh - 16px);padding-inline:8px}
}
.task-lead{font-weight:600}
@media(min-width:900px) and (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
 .parallax-composition .image-zoom{transform:translate3d(var(--parallax-x,0px),var(--parallax-y,0px),0);transition:transform 650ms cubic-bezier(.2,.7,.2,1)}
 .parallax-composition.is-tracking .image-zoom{transition-duration:240ms}
}