:root{--paper:#f3f0e6;--blue:#0755f5;--ink:#071326;--line:#c7c9c5}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}a:focus-visible,button:focus-visible{outline:3px solid var(--blue);outline-offset:5px}.skip{position:absolute;left:-999px}.skip:focus{left:20px;top:90px;z-index:10;background:white;padding:12px}header{height:88px;padding:0 3%;display:flex;align-items:center;gap:4%;border-bottom:1px solid var(--line);position:relative;z-index:5;background:var(--paper)}.brand{display:flex;align-items:center;gap:10px}.brand img{width:40px;height:44px;object-fit:contain}.brand strong{font-size:24px;font-weight:900;letter-spacing:-1px;font-style:italic}.brand sup{align-self:flex-start;font-size:10px;margin-top:10px}.header-note{font-size:11px;line-height:1.5}nav{margin-left:auto;display:flex;gap:32px;font-size:13px}nav a:last-child{border-bottom:1px solid;padding-bottom:3px}.intro{padding:62px 3% 40px;display:grid;grid-template-columns:1fr 1fr;gap:40px}.eyebrow{font-size:11px;letter-spacing:1px;text-transform:uppercase}.intro h1{font-size:clamp(65px,9vw,150px);line-height:.85;letter-spacing:-.075em;font-weight:500;margin:28px 0}.intro h1 em{font-style:normal;color:var(--blue)}.intro aside{align-self:end;max-width:390px;justify-self:end;font-size:21px;line-height:1.35;letter-spacing:-.5px}.intro aside p:last-child{font-size:12px;letter-spacing:0;margin-top:30px}.ribbon{background:var(--blue);color:white;padding:14px 3%;display:flex;justify-content:space-between;font-size:12px}.workbar{padding:35px 3% 22px;display:flex;align-items:center;justify-content:space-between}.workbar h2{font-weight:500;font-size:14px;margin:0}.filters{display:flex;gap:7px}.filters button{background:transparent;border:1px solid var(--line);border-radius:30px;padding:8px 15px;font-size:12px}.filters button[aria-pressed=true]{background:var(--ink);color:white;border-color:var(--ink)}.grid{display:grid;grid-template-columns:1fr 1fr;gap:40px 18px;padding:0 3% 80px}.card{display:block;min-width:0}.art{position:relative;aspect-ratio:1.28;overflow:hidden;background:var(--color);padding:8% 8% 0;transition:background .4s}.mini{height:100%;position:relative;background:white;overflow:hidden;box-shadow:0 15px 40px #0004;transform:rotate(-4deg) translateY(12%);transition:transform .5s;pointer-events:none;border-radius:5px 5px 0 0}.mini:before{content:'● ● ●';display:block;height:22px;background:#e9e9e9;color:#999;font-size:9px;letter-spacing:3px;padding:6px}.mini iframe{width:1280px;height:1000px;border:0;transform:scale(var(--scale,.4));transform-origin:top left}.card:nth-child(even) .mini{transform:rotate(4deg) translateY(12%)}.card:hover .mini{transform:rotate(0) translateY(5%)}.art .badge{position:absolute;top:18px;left:18px;font-size:10px;background:var(--paper);padding:7px 10px;border-radius:20px}.art .arrow{position:absolute;right:16px;bottom:16px;width:42px;height:42px;display:grid;place-items:center;border-radius:50%;background:var(--paper);font-size:24px}.caption{display:flex;justify-content:space-between;padding-top:15px;gap:15px}.caption h3{font-size:24px;letter-spacing:-.7px;margin:0 0 6px;font-weight:500}.caption p{font-size:12px;margin:0;color:#60666e}.caption>span{font-size:11px;padding-top:6px}.statement{background:var(--blue);color:var(--paper);padding:65px 3%;display:grid;grid-template-columns:1fr 2fr}.statement p{font-size:clamp(30px,4vw,65px);letter-spacing:-2px;margin:0;line-height:1.08}.statement img{width:100px;filter:brightness(0) invert(1);margin-top:30px}.detail-head{padding:42px 3%}.back{font-size:12px}.detail-head h1{font-size:clamp(56px,10vw,140px);line-height:1;letter-spacing:-.065em;margin:50px 0 20px;font-weight:500}.detail-line{display:flex;justify-content:space-between;gap:30px;border-top:1px solid var(--line);padding-top:20px}.detail-line p{font-size:24px;margin:0}.detail-line span{font-size:12px}.preview-area{padding:40px 3% 60px;background:#dfe5ec}.preview-title{display:flex;justify-content:space-between;align-items:center;font-size:12px;margin-bottom:24px}.devices{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:30px;align-items:start}.device{background:var(--ink);border-radius:12px;overflow:hidden;box-shadow:0 15px 40px #07132620}.devicebar{height:34px;display:flex;align-items:center;justify-content:space-between;padding:0 14px;color:#aab5c3;font-size:10px}.desktop-window{width:100%;height:550px;overflow:hidden;background:white}.desktop-window iframe{width:1440px;height:100%;border:0;transform-origin:top left;background:white}.phone{border:8px solid var(--ink);border-radius:36px;width:310px;margin:0 auto}.phone .devicebar{height:26px}.phone iframe{width:390px;height:780px;transform:scale(.754);transform-origin:top left;border:0;background:white}.phone-window{height:588px;overflow:hidden}.device-label{font-size:10px;text-transform:uppercase;letter-spacing:1px;margin:15px 0}.preview-note{font-size:12px;line-height:1.6;margin-top:25px;max-width:650px}.project-copy{padding:70px 3%;display:grid;grid-template-columns:1fr 2fr;gap:40px}.project-copy h2{font-size:14px;font-weight:500}.project-copy .copy p{max-width:720px;font-size:24px;line-height:1.4;letter-spacing:-.5px}.facts{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-top:45px;border-top:1px solid var(--line);padding-top:25px}.facts p{font-size:14px!important;letter-spacing:0!important}.next{padding:40px 3%;background:var(--blue);color:white;display:flex;justify-content:space-between;align-items:center}.next strong{font-size:42px;font-weight:400;letter-spacing:-1px}footer{background:var(--ink);color:var(--paper);padding:55px 3% 25px}.footer-top{display:grid;grid-template-columns:1fr 2fr;gap:30px}.footer-top>span{font-size:11px}.footer-top>a{font-size:clamp(35px,5vw,80px);line-height:1.05;letter-spacing:-2px}.footer-bottom{border-top:1px solid #ffffff30;margin-top:80px;padding-top:22px;display:flex;justify-content:space-between;font-size:11px}@media(max-width:760px){header{height:74px}.header-note,nav a:nth-child(2){display:none}.brand strong{font-size:19px}.brand img{width:30px}nav{gap:18px;font-size:11px}.intro{grid-template-columns:1fr;padding-top:40px;gap:10px}.intro h1{font-size:84px}.intro aside{justify-self:start;font-size:19px;max-width:330px}.ribbon span:nth-child(2){display:none}.workbar{align-items:flex-start;gap:16px;flex-direction:column}.grid{grid-template-columns:1fr;gap:30px;padding-bottom:45px}.art{aspect-ratio:1.15}.statement,.project-copy,.footer-top{grid-template-columns:1fr;gap:25px}.statement p{letter-spacing:-1px}.devices{grid-template-columns:1fr;gap:20px}.desktop-window{height:300px}.preview-area{padding-top:25px}.detail-head h1{margin-top:40px}.detail-line{flex-direction:column;gap:15px}.project-copy{padding-top:40px}.project-copy .copy p{font-size:20px}.next strong{font-size:30px}.footer-bottom{gap:20px;flex-wrap:wrap}.facts{grid-template-columns:1fr}.preview-title{gap:20px;line-height:1.5}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
/* Reel-based studio portfolio */
:root{--paper:#181d21;--ink:#f3f0e6;--blue:#0755f5;--line:#3c4247;--sidebar:min(calc((100vw - 135px)/4 + 45px),390.75px);--grow:cubic-bezier(1,0,.47,1.25)}body{background:#181d21;color:#f3f0e6;font-size:13px}button{border:0;color:inherit;background:none;padding:0}header{height:38px;position:sticky;top:0;padding:0;gap:0;display:grid;grid-template-columns:var(--sidebar) 1fr;background:rgba(7,85,245,.98);border:0;color:white;z-index:50}.brand{padding:0 15px;gap:6px}.brand img{width:21px;height:24px;filter:brightness(0) invert(1)}.brand strong{font-size:17px;letter-spacing:-.6px}.brand sup{font-size:7px;margin-top:4px}.nav-cluster{display:flex;justify-content:space-between;padding-right:15px;align-items:center;font-size:13px}.nav-cluster>div{display:flex;align-items:center;gap:10px}.nav-dot{font-size:6px}.nav-cluster button span{display:inline-block;transition:transform .35s}.nav-cluster button[aria-expanded=true] span{transform:rotate(45deg)}#main{min-height:calc(100svh - 100px)}.work-layout{display:grid;grid-template-columns:var(--sidebar) minmax(0,1fr)}.work-sidebar{position:sticky;top:38px;height:calc(100svh - 38px);display:flex;flex-direction:column;padding:15px}.breadcrumb{font-size:13px;letter-spacing:.04em}.breadcrumb span{margin-left:20px;color:#858282;text-transform:uppercase}.sidebar-content{padding-top:60px}.sidebar-content h1,.filter-heading{font-size:clamp(22px,1.375rem + .5vw,28.26px);line-height:1.2;letter-spacing:-.022em;font-weight:400}.sidebar-content h1{margin:0 0 15px}.filter-heading{display:flex;gap:30px}.filter-heading button{font:inherit}#filter-toggle{color:#858282;display:flex;align-items:center;gap:7px}#filter-toggle:hover{color:#f3f0e6}#filter-toggle i{height:14px;width:14px;position:relative}#filter-toggle i:before,#filter-toggle i:after{content:'';position:absolute;top:6px;left:1px;width:12px;height:1px;background:currentColor;transition:transform .4s}#filter-toggle i:after{transform:rotate(90deg)}#filter-toggle[aria-expanded=true] i:after{transform:rotate(0)}#work-filters{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s cubic-bezier(.22,1,.36,1)}#work-filters>div{min-height:0;overflow:hidden;display:flex;flex-direction:column;align-items:flex-start}#work-filters.open{grid-template-rows:1fr}#work-filters button{font-size:clamp(22px,1.375rem + .5vw,28px);letter-spacing:-.02em;color:#858282;line-height:1.3;opacity:0;transform:translateY(12px);transition:opacity .35s,transform .45s;transition-delay:calc(var(--i)*.05s);text-align:left}#work-filters.open button{opacity:1;transform:none}#work-filters button:hover{color:white}.sidebar-bottom{margin-top:auto;font-size:12px;line-height:1.5;color:#aaa}.sidebar-bottom span{display:block;font-size:10px;margin-top:24px;color:#70767a}.sidebar-bottom button{display:block;font-size:11px;margin-top:15px;color:#aaa}.project-reels{padding:15px 15px 60px 0;overflow:hidden;min-width:0}.project-row{padding-bottom:15px;transition:opacity .35s}.reel-viewport{overflow:hidden;--height:188.781px}.reel-track{display:flex;gap:15px;width:max-content;animation:reel-loop var(--duration) linear infinite;will-change:transform}.reel-group{display:flex;gap:15px;flex-shrink:0}.panel-link{display:block;flex-shrink:0;overflow:hidden}.reel-panel{height:var(--height);width:calc(var(--height)*var(--ratio,1.7778));position:relative;background:var(--panel-color);overflow:hidden;transition:width .4s var(--grow),height .4s var(--grow)}.image-panel img{display:block;width:100%;height:100%;object-fit:cover}.image-panel.contain img{object-fit:contain;padding:16px}.site-crop{position:absolute;width:1280px;height:720px;top:0;left:0;transform:scale(.2622);transform-origin:top left;pointer-events:none;transition:transform .4s var(--grow)}.site-crop iframe{width:1280px;height:720px;border:0;pointer-events:none;background:white}.row-caption{display:grid;grid-template-columns:1fr 1fr 1fr;gap:15px;font-size:clamp(13px,.8125rem + .16vw,15px);letter-spacing:-.02em;line-height:18px;margin-top:15px;max-height:18px;overflow:hidden;transition:margin-top .4s var(--grow),max-height .4s var(--grow),opacity .4s}.row-caption>*{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.row-caption span{color:#adadad;text-align:center}.row-caption a:last-child{color:#adadad;text-align:right}.row-caption a:hover{color:white}@keyframes reel-loop{to{transform:translateX(calc(-50% - 7.5px))}}@media(hover:hover){.project-row:hover .reel-viewport{--height:221.781px}.project-row:hover .site-crop{transform:scale(.30803)}.project-row:hover .row-caption{opacity:0;max-height:0;margin-top:0}.project-row:hover .reel-track{animation-play-state:paused}}@media(min-width:1550px){.reel-viewport{--height:235.976px}.site-crop{transform:scale(.32775)}@media(hover:hover){.project-row:hover .reel-viewport{--height:268.976px}.project-row:hover .site-crop{transform:scale(.37359)}}}footer{background:#181d21;border-top:1px solid #30363b;padding:20px 15px;display:flex;justify-content:space-between;font-size:11px;color:#adadad;margin-left:var(--sidebar);gap:20px}#info-panel{position:fixed;top:38px;left:0;right:0;z-index:49;background:var(--blue);color:white;padding:60px 30px 65px;display:grid;grid-template-columns:var(--sidebar) 1fr;gap:30px;box-shadow:0 30px 50px #0005;animation:info-in .55s cubic-bezier(.22,1,.36,1)}#info-panel[hidden]{display:none}#info-panel h2{font-size:clamp(25px,3vw,44px);font-weight:400;letter-spacing:-1px;line-height:1.1;margin-top:30px}#info-panel p{font-size:clamp(22px,3vw,40px);line-height:1.2;letter-spacing:-.7px;margin:0 0 35px;max-width:900px}#info-panel small{display:block;margin-top:40px;opacity:.65}#close-info{position:absolute;right:20px;top:15px;font-size:26px}@keyframes info-in{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0)}}.intro-active{overflow:hidden}.entrance{position:fixed;inset:0;z-index:60;background:#111314;overflow:hidden}.entrance-images{position:absolute;inset:0;background:#111314}.entrance-images:after{content:'';position:absolute;inset:0;background:#0003}.entrance-images img{position:absolute;width:100%;height:100%;object-fit:cover;opacity:0;animation:showcase 12s infinite;animation-delay:calc(var(--slide)*4s)}.entrance-images img:first-child{opacity:1}@keyframes showcase{0%,29%{opacity:1;transform:scale(1.07)}34%,95%{opacity:0}100%{opacity:1;transform:scale(1)}}.entrance-band{position:fixed;left:0;right:0;top:calc((100svh - clamp(52px,4vw,62px))/2);height:clamp(52px,4vw,62px);background:var(--blue);z-index:70;overflow:hidden;display:flex;align-items:center;color:white;animation:band-arrive .8s cubic-bezier(.16,1,.3,1) both}.entrance-marquee{display:flex;width:max-content;animation:reel-loop 30s linear infinite}.entrance-unit{display:flex;gap:50px;align-items:center;flex-shrink:0;padding-right:50px}.entrance-unit strong{font-size:30px;letter-spacing:-1.3px;font-style:italic}.entrance-unit sup{font-size:10px;vertical-align:top;letter-spacing:0}.entrance-unit>span{font-size:12px;line-height:16px;white-space:nowrap}.enter-work{position:absolute;inset:0;display:flex;align-items:center;justify-content:flex-end;flex-direction:column;padding-bottom:30px;color:white;gap:14px;width:100%;font-size:12px}.enter-work b{font-size:30px;font-weight:400;animation:arrow-down 1.5s ease-in-out infinite}@keyframes band-arrive{from{clip-path:inset(0 50%)}to{clip-path:inset(0)}}@keyframes arrow-down{50%{transform:translateY(10px)}}.entering #main{animation:work-rise .82s cubic-bezier(.7,0,.84,0) both}@keyframes work-rise{from{transform:translateY(100svh)}to{transform:translateY(0)}}.motion-paused .reel-track{animation-play-state:paused}.page-leaving .work-sidebar{opacity:0;transition:opacity .3s}.page-leaving #main{pointer-events:none}.page-leaving .detail-head,.page-leaving .preview-area,.page-leaving .project-copy{opacity:0;transform:translateY(-20px);transition:.45s}.detail-head{padding:15px 15px 40px;margin-left:var(--sidebar)}.detail-head h1{font-size:clamp(40px,5vw,80px);margin-top:60px;letter-spacing:-.045em}.detail-line p{font-size:26px}.detail-line span{color:#adadad}.preview-area{margin-left:var(--sidebar);background:#111314;padding:30px 15px}.project-copy{margin-left:var(--sidebar);padding:50px 15px;grid-template-columns:1fr 3fr}.project-copy .copy p{font-size:22px}.next{margin-left:var(--sidebar);padding:30px 15px}.next strong{font-size:30px}.device{background:#292e33}.phone{border-color:#292e33}.preview-title a{color:#adadad}.preview-note{color:#adadad}
@media(max-width:1023px){:root{--sidebar:0px}header{height:60px;display:flex;justify-content:space-between;padding:0 20px}.brand{padding:0}.brand strong{font-size:20px}.brand img{width:26px;height:30px}.nav-cluster{padding:0;gap:25px}.nav-cluster .nav-dot,.nav-cluster>div>span:last-child{display:none}.work-layout{display:block}.work-sidebar{position:relative;top:0;height:auto;padding:0 20px}.breadcrumb{height:60px;display:flex;align-items:center}.sidebar-content{padding-top:25px;padding-bottom:25px}.sidebar-content h1,.filter-heading,#work-filters button{font-size:26px}.sidebar-bottom{display:none}.project-reels{padding:0 0 40px}.row-caption{margin:15px 20px 0;grid-template-columns:1fr auto}.row-caption span{display:none}.project-row{padding-bottom:20px}.reel-viewport{--height:188.781px}footer{margin-left:0;padding:20px;flex-wrap:wrap}#info-panel{top:60px;display:block;padding:40px 20px}#info-panel>div+div{margin-top:30px}.detail-head{margin-left:0;padding:20px}.detail-head h1{margin-top:40px}.preview-area,.project-copy,.next{margin-left:0}.project-copy{grid-template-columns:1fr;gap:15px}.devices{grid-template-columns:minmax(0,1fr)}.desktop-window{height:360px}.detail-line{flex-direction:column}.entrance-unit{gap:30px;padding-right:30px}.entrance-unit strong{font-size:26px}.entrance-unit>span{font-size:11px}}
@media(prefers-reduced-motion:reduce){.reel-track,.entrance-marquee,.entrance-images img,.enter-work b{animation:none!important}.project-row .row-caption{opacity:1!important;max-height:18px!important;margin-top:15px!important}.project-row:hover .reel-viewport{--height:188.781px}.project-row:hover .site-crop{transform:scale(.2622)}.project-row{animation:none!important}} 
/* Expanded live and preview showcase */
.project-status{display:inline-block;font-size:9px;line-height:1;letter-spacing:.05em;text-transform:uppercase;vertical-align:middle;color:#a2a7ad;margin-left:7px}.project-status.live{color:#8bd6a9}.project-status.preview{color:#a9bcff}.project-status.concept{color:#adadad}.project-status:before{content:'●';font-size:6px;vertical-align:middle;margin-right:4px}.row-caption a:first-child{display:flex;align-items:center;gap:3px}.row-caption a:first-child .project-status{flex-shrink:0}.app-brand{display:flex;flex-direction:column;justify-content:space-between;padding:20px;color:#f3f0e6}.app-brand>span{font-size:13px;letter-spacing:2px}.app-brand strong{font-size:26px;letter-spacing:-1px;line-height:1.1}.app-brand small{font-size:9px}.project-gallery{margin-left:var(--sidebar);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px;padding:0 15px 50px}.project-gallery figure{margin:0;min-width:0;aspect-ratio:1.4;overflow:hidden}.project-gallery img{width:100%;height:100%;object-fit:cover;display:block}.project-gallery .contain img{object-fit:contain;padding:12%}.project-row.offscreen .reel-track,.project-row:focus-within .reel-track{animation-play-state:paused}.sidebar-content{padding-top:45px}#work-filters button{font-size:clamp(19px,1.1rem + .4vw,25px);line-height:1.32}#work-filters button:nth-child(4){margin-top:15px}.sidebar-bottom{padding-top:25px}.work-sidebar{overflow-y:auto;scrollbar-width:thin;scrollbar-color:#545151 transparent}.detail-line .project-status{margin-left:0}.image-panel.contain{background:var(--panel-color)}@media(max-width:1023px){.project-gallery{margin-left:0;padding:0 20px 35px}.sidebar-content{padding-top:25px}#work-filters button{font-size:24px}.work-sidebar{overflow:visible}.project-status{font-size:8px}}@media(max-width:600px){.project-gallery{grid-template-columns:1fr}.preview-title{align-items:flex-start}.preview-title>a{text-align:right;max-width:45%}}
/* Fixed title bands with rising blue hover treatment. */
.project-row{--tile-h:188.781px;position:relative;padding-top:48px;padding-bottom:15px}
.project-row .reel-viewport{--height:var(--tile-h);transform:none;transition:none}
.project-row .row-caption{position:absolute;top:0;left:0;right:0;height:40px;max-height:none;margin:0;opacity:1;overflow:hidden;display:grid;grid-template-columns:1.2fr 1fr .8fr;align-items:center;gap:15px;padding:0 10px;isolation:isolate;transform:none;transition:color .3s}
.project-row .row-caption:before{content:'';position:absolute;inset:0;background:var(--blue);z-index:-1;transform:translateY(101%);transition:transform .4s cubic-bezier(.22,1,.36,1)}
.project-row .row-caption>*{position:relative;min-width:0;line-height:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.project-row .row-caption a:first-child{font-size:15px;letter-spacing:-.02em;transform-origin:left center;transition:font-size .35s cubic-bezier(.22,1,.36,1);gap:5px}
.project-row .row-caption span,.project-row .row-caption a:last-child{transition:color .3s}
.project-row .row-caption .project-status{line-height:1;transition:color .3s}
.project-row:focus-within .row-caption:before{transform:translateY(0)}
.project-row:focus-within .row-caption a:first-child{font-size:20px}
.project-row:focus-within .row-caption span,.project-row:focus-within .row-caption a,.project-row:focus-within .row-caption .project-status{color:#fff}
@media(min-width:1550px){.project-row{--tile-h:235.976px}}
@media(hover:hover){
.project-row:hover .reel-viewport{--height:calc(var(--tile-h) + 33px);transform:none}
.project-row:hover .row-caption{opacity:1;max-height:none;margin:0;transform:none}
.project-row:hover .row-caption:before{transform:translateY(0)}
.project-row:hover .row-caption a:first-child{font-size:20px}
.project-row:hover .row-caption span,.project-row:hover .row-caption a,.project-row:hover .row-caption .project-status{color:#fff}
}
@media(max-width:1023px){.project-row{--tile-h:188.781px;padding-bottom:20px}.project-row .row-caption{left:20px;right:20px;margin:0;grid-template-columns:minmax(0,1fr) auto;gap:10px}.project-row .row-caption a:first-child{font-size:14px}.project-row:focus-within .row-caption a:first-child{font-size:17px}}
@media(max-width:1023px) and (hover:hover){.project-row:hover .row-caption a:first-child{font-size:17px}}
@media(prefers-reduced-motion:reduce){.project-row .row-caption{margin-top:0!important}.project-row:hover .reel-viewport{--height:var(--tile-h);transform:none}.project-row .row-caption:before,.project-row .row-caption a:first-child{transition:none}.project-row:hover .row-caption{transform:none;margin-top:0!important}.project-row:hover .site-crop{transform:scale(.2622)}}
/* Project detail navigation and balanced preview composition. */
body.detail-mode{--sidebar:240px}.case-layout{display:grid;grid-template-columns:240px minmax(0,1fr)}.case-sidebar{position:sticky;top:38px;height:calc(100svh - 38px);overflow-y:auto;padding:24px 15px;border-right:1px solid #343a40;scrollbar-width:thin;scrollbar-color:#545151 transparent}.case-back{font-size:12px;color:#aaa}.case-sidebar h2{font-size:24px;font-weight:400;letter-spacing:-.6px;margin:36px 0 20px}.case-sidebar h2 small{font-size:11px;color:#888;vertical-align:top;letter-spacing:0}.case-sidebar nav{display:flex;flex-direction:column;margin:0;gap:3px;font-size:13px}.case-sidebar nav a,.case-sidebar nav a:last-child{display:flex;flex-direction:column;padding:10px;border:0;gap:5px;line-height:1.25;border-radius:2px}.case-sidebar nav a small{font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:#7e8790}.case-sidebar nav a:hover{background:#252e36}.case-sidebar nav a[aria-current=page]{background:var(--blue);color:white}.case-sidebar nav a[aria-current=page] small{color:#d3dfff}.case-content{width:100%;max-width:1500px;margin:0 auto;min-width:0;padding:0 clamp(20px,3vw,52px) 40px}body.detail-mode .detail-head,body.detail-mode .preview-area,body.detail-mode .project-copy,body.detail-mode .project-gallery,body.detail-mode .next{margin-left:0;margin-right:0}body.detail-mode .detail-head{padding:28px 0 40px}body.detail-mode .detail-head h1{margin-top:36px;font-size:clamp(40px,5.5vw,84px)}body.detail-mode .preview-area{padding:24px;border:1px solid #30373e;background:#11171d}body.detail-mode .devices{grid-template-columns:minmax(0,1fr) 310px;gap:28px;align-items:start;width:100%;max-width:1300px;margin:0 auto}body.detail-mode .devices>div{min-width:0}body.detail-mode .desktop-window{height:550px}body.detail-mode .project-copy{padding:50px 0}body.detail-mode .project-gallery{padding:0 0 40px}body.detail-mode .next{padding:28px}body.detail-mode footer{margin-left:240px}.mobile-project-label,#project-switcher{display:none}
@media(max-width:1350px){body.detail-mode .devices{grid-template-columns:minmax(0,1fr)}body.detail-mode .devices>div:nth-child(2){width:310px;justify-self:center}body.detail-mode .desktop-window{height:540px}}
@media(max-width:1023px){body.detail-mode{--sidebar:0px}.case-layout{grid-template-columns:1fr}.case-sidebar{position:relative;top:0;height:auto;overflow:visible;border-right:0;border-bottom:1px solid #343a40;padding:18px 20px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px 24px;align-items:center}.case-sidebar h2,.case-sidebar nav{display:none}.mobile-project-label{display:none}#project-switcher{display:block;justify-self:end;width:min(100%,360px);background:#252e36;border:1px solid #424b55;border-radius:3px;color:white;padding:10px;font:inherit;font-size:13px}.case-content{padding:0 20px 30px}body.detail-mode .preview-area{padding:16px}body.detail-mode .detail-head h1{font-size:clamp(38px,7.5vw,70px);margin-top:24px}body.detail-mode .detail-head .back{display:none}body.detail-mode footer{margin-left:0}}
@media(max-width:600px){.case-sidebar{padding:15px}.case-back{font-size:11px}.case-content{padding:0 15px 25px}body.detail-mode .preview-area{padding:12px}body.detail-mode .desktop-window{height:290px}body.detail-mode .devices{gap:24px}body.detail-mode .devices>div:nth-child(2){width:min(310px,100%)}body.detail-mode .phone{max-width:100%}body.detail-mode .project-copy{padding:35px 0}body.detail-mode .detail-line p{font-size:21px}}

/* Curated five-panel source showcases. Titles and hover banner remain above each reel. */
.showcase-logo{background:#f4f2ee!important;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:30px;color:#151515;gap:15px}.showcase-logo img{max-width:75%;max-height:55%;object-fit:contain}.showcase-logo strong{font-size:clamp(24px,3vw,46px);line-height:.95;letter-spacing:-.06em;text-align:center;max-width:95%;text-transform:uppercase}.showcase-logo small,.showcase-feature small{position:absolute;top:14px;left:17px;font-size:8px;letter-spacing:.12em;text-transform:uppercase}.showcase-logo>span{position:absolute;bottom:15px;font-size:8px;text-transform:uppercase;letter-spacing:.12em}.showcase-screen{display:flex;flex-direction:column;background:#f3f2ee;overflow:hidden;padding:10px 10px 12px}.capture-bar{height:16px;display:flex;align-items:center;gap:3px;flex:none}.capture-bar i{width:3px;height:3px;border-radius:50%;background:#777}.capture-bar span{margin-left:auto;font-size:5px;text-transform:uppercase;letter-spacing:.06em;color:#555}.showcase-screen>img{width:100%;height:calc(100% - 16px);object-fit:contain;object-position:top;background:white;border:1px solid #ddd}.showcase-image{position:relative}.showcase-image small{position:absolute;bottom:10px;left:12px;color:white;background:#111b;padding:5px 7px;font-size:7px;letter-spacing:.1em;text-transform:uppercase}.showcase-feature{position:relative;display:flex;flex-direction:column;justify-content:center;padding:30px 24px;background:#181818!important;color:#fff}.showcase-feature strong{font-size:22px;line-height:1.02;letter-spacing:-.04em}.showcase-feature p{font-size:9px;line-height:1.5;margin:14px 0;max-width:240px;opacity:.75}.showcase-feature>span{font-size:8px;text-transform:uppercase;letter-spacing:.1em}.showcase-preview .site-crop{pointer-events:none}

.showcase-logo:has(img[src*="bloodheaven"]),.showcase-logo:has(img[src*="emberfjord"]),.showcase-logo:has(img[src*="graveyard-pizza"]){background:#171717!important;color:white}

/* Identity stays beside the independently clipped moving image reel. */
.project-row .reel-viewport{display:flex;gap:15px;align-items:stretch}.identity-fixed{display:block;flex:0 0 clamp(165px,19vw,250px);min-width:0;position:relative;z-index:2;overflow:hidden}.identity-fixed .showcase-logo{width:100%;height:var(--height);background:var(--identity-bg)!important;color:var(--identity-ink)!important;padding:30px 19px 52px;border-top:3px solid var(--identity-accent);gap:10px}.identity-fixed .showcase-logo strong{font-family:inherit;font-size:clamp(22px,2.1vw,36px);letter-spacing:-.04em;text-transform:none;font-weight:500;overflow-wrap:anywhere}.identity-fixed .showcase-logo img{max-width:100%;max-height:78%;width:auto;height:auto;object-fit:contain}.identity-fixed .showcase-logo small{font:8px Arial,sans-serif;letter-spacing:.1em}.identity-footer{position:absolute;left:17px;right:17px;bottom:15px;display:flex;flex-direction:column;gap:10px}.identity-footer>span{font:8px/1.3 Arial,sans-serif;text-transform:uppercase;letter-spacing:.08em}.identity-palette{display:flex;gap:4px}.identity-palette i{display:block;width:23px;height:5px;border:1px solid color-mix(in srgb,var(--identity-ink) 25%,transparent)}.reel-motion{min-width:0;flex:1;overflow:hidden}.identity-fixed:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}@media(max-width:600px){.project-row .reel-viewport{gap:8px}.identity-fixed{flex-basis:125px}.identity-fixed .showcase-logo{padding:30px 12px 50px}.identity-fixed .showcase-logo strong{font-size:21px}.identity-footer{left:12px;right:12px}.identity-fixed .showcase-logo small{left:12px;font-size:7px}.identity-footer>span{font-size:7px}.identity-palette i{width:20px}}
.identity-fixed .identity-kapharnaum{background:#970000!important;color:#fff!important}.identity-fixed .showcase-logo img[src*="kapharnaum"]{filter:brightness(0) invert(1);opacity:1}

/* Mobile title backgrounds bleed to both viewport edges; copy keeps its gutter. */
@media(max-width:1023px){.project-row .row-caption{left:0;right:0;width:100%;padding-left:20px;padding-right:20px}.project-row .row-caption:before{left:0;right:0}}

/* Identity-card refinements */
.identity-fixed .showcase-logo>small{left:0;right:0;width:100%;text-align:center}
.identity-fixed .identity-payback img{filter:brightness(0) saturate(100%) invert(24%) sepia(86%) saturate(2103%) hue-rotate(340deg) brightness(88%) contrast(91%)}
.identity-fixed .identity-dayglow-cafe strong,.identity-fixed .identity-voss-photography strong{font-weight:800;text-transform:uppercase;text-align:center;width:100%}
.identity-fixed .identity-sunny-cafe strong{font-weight:900;letter-spacing:-.07em;text-transform:uppercase}
.identity-fixed .identity-soundwave-barbershop strong{font-size:0!important;display:flex;flex-direction:column;align-items:center;gap:5px;font-family:Arial,Helvetica,sans-serif;font-weight:900;line-height:.85;letter-spacing:.12em;text-transform:uppercase}.identity-fixed .identity-soundwave-barbershop strong:before{content:"SOUNDWAVE";font-size:clamp(22px,2.2vw,37px)}.identity-fixed .identity-soundwave-barbershop strong:after{content:"BARBERSHOP";font-size:clamp(7px,.65vw,10px);font-weight:600;letter-spacing:.36em}
.identity-fixed .identity-biostem-labs img,.identity-fixed .identity-mcmarden img{max-width:100%;max-height:65%}

.identity-fixed .identity-cleo-retreats{gap:8px}
.identity-fixed .identity-cleo-retreats img{max-height:52%;max-width:80%;object-fit:contain}
.identity-fixed .identity-cleo-retreats strong{font-family:"Cinzel",Georgia,serif;font-weight:500;letter-spacing:.16em;text-align:center;width:100%}

.identity-fixed .identity-xpand-sports img{filter:brightness(0) saturate(100%) invert(16%) sepia(87%) saturate(3370%) hue-rotate(351deg) brightness(85%) contrast(96%)}
.identity-fixed .identity-payback img{filter:brightness(0) saturate(100%) invert(24%) sepia(86%) saturate(2103%) hue-rotate(340deg) brightness(88%) contrast(91%) drop-shadow(1px 0 0 white) drop-shadow(-1px 0 0 white) drop-shadow(0 1px 0 white) drop-shadow(0 -1px 0 white)}
.identity-fixed .identity-connekt::before{content:"";position:absolute;inset:35px 0 40px;background:url("assets/projects/connekt/logo.svg") center/115% auto no-repeat;opacity:.08;pointer-events:none}
.identity-fixed .identity-connekt>img{position:relative;z-index:1;max-width:100%;max-height:65%;object-fit:contain}
.identity-fixed .identity-connekt>small,.identity-fixed .identity-connekt .identity-footer{z-index:2}

.showcase-feature{justify-content:flex-start;padding-top:42px;padding-bottom:22px}.showcase-feature>small{position:static;display:block;flex:none;margin-bottom:14px}.showcase-feature>strong{flex:none}.showcase-feature>p{margin:12px 0;flex:none}.showcase-feature>span{margin-top:auto;padding-top:10px}

.showcase-feature,.showcase-screen.experience-capture{background:var(--experience-bg)!important;color:var(--experience-ink)!important}.showcase-feature p{opacity:1}.experience-capture .capture-bar span{color:inherit}.experience-capture .capture-bar i{background:currentColor}

/* Compact, bounded text layout for every 04 experience card. */
.reel-panel.showcase-feature{display:grid;grid-template-rows:auto auto 1fr auto;align-content:start;gap:7px;padding:16px 18px;min-height:0}
.showcase-feature>small{position:static;display:block;margin:0;font-size:8px;line-height:1.2}
.showcase-feature>strong{display:block;margin:0;font-size:18px;line-height:1.05;letter-spacing:-.035em;overflow-wrap:break-word}
.showcase-feature>p{display:block;margin:0;max-width:none;font-size:9px;line-height:1.3;opacity:1;min-height:0}
.showcase-feature>span{display:block;margin:0;padding:0;font-size:8px;line-height:1.2;align-self:end}
@media(max-width:600px){.reel-panel.showcase-feature{padding:14px 16px;gap:6px}.showcase-feature>strong{font-size:17px}}

/* Center the complete 04 text stack as a single group. */
.reel-panel.showcase-feature{grid-template-rows:repeat(4,max-content);align-content:center;justify-content:stretch}
.showcase-feature>span{align-self:auto;margin:0;padding:0}

.image-panel img{padding:1px}.showcase-image.contain>img{object-fit:contain!important;padding:1px}
.showcase-image.contain{background:var(--panel-color)}.showcase-image.contain>small{max-width:calc(100% - 24px)}

.identity-fixed .forma-wordmark{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center;font-family:Arial,Helvetica,sans-serif}.forma-wordmark-name{font-size:32px;letter-spacing:.13em;line-height:1;font-weight:900;color:#000}.forma-wordmark-locale{font-size:7px;line-height:1.6;letter-spacing:.15em;border-top:1px solid currentColor;padding-top:12px}@media(max-width:600px){.forma-wordmark-name{font-size:24px}}
.identity-fixed .form-kunsthalle-wordmark{display:flex;flex-direction:column;align-items:center;text-align:center;color:var(--identity-ink);font-family:Arial,Helvetica,sans-serif}.form-kunsthalle-wordmark>span{font-size:clamp(31px,3.4vw,52px);line-height:.82;letter-spacing:-.105em;font-weight:900;padding-right:.105em}.form-kunsthalle-wordmark>small{position:static;margin-top:14px;font-size:clamp(8px,.7vw,11px);line-height:1;letter-spacing:.14em;font-weight:300;color:inherit}@media(max-width:600px){.form-kunsthalle-wordmark>span{font-size:29px}.form-kunsthalle-wordmark>small{font-size:7px;margin-top:11px}}
.identity-fixed .nouraya-wordmark{display:flex;flex-direction:column;align-items:center;text-align:center;color:var(--identity-ink)}.nouraya-wordmark>span{font-size:0;line-height:1}.nouraya-wordmark>span:before{content:"AL BAIT AL SHAMI";font-size:clamp(21px,2.35vw,35px);letter-spacing:.07em;line-height:1;font-weight:500}.nouraya-wordmark>small{position:static;margin-top:13px;font-family:Georgia,serif;font-size:0;line-height:1;color:inherit}.nouraya-wordmark>small:before{content:"البيت الشامي";font-size:clamp(15px,1.35vw,21px);font-weight:400;letter-spacing:0}@media(max-width:600px){.nouraya-wordmark>span:before{font-size:19px}.nouraya-wordmark>small:before{font-size:14px}}

.showcase-screen{padding:1px;background:var(--panel-color)}.showcase-screen>img{border:0}
.showcase-feature{border:1px solid var(--experience-border)}
.showcase-preview::after{content:"";position:absolute;inset:0;border:1px solid var(--panel-color);pointer-events:none;z-index:1}
.showcase-screen .capture-bar{display:none}.showcase-screen>img{width:100%;height:100%;object-fit:cover;object-position:top;border:0}

.showcase-preview,.showcase-screen,.showcase-image{background:var(--panel-color)}.showcase-feature{background:var(--experience-bg)!important}
.identity-fixed .showcase-logo{border:0;padding-top:45px}.identity-fixed .showcase-logo>small{top:0;height:30px;display:grid;place-items:center;background:var(--identity-accent);color:var(--identity-accent-ink)}@media(max-width:600px){.identity-fixed .showcase-logo{padding-top:40px}}

.entrance-video{position:absolute;inset:0;background:#10151a url("assets/video/hero-v4-poster.webp") center/cover no-repeat;overflow:hidden}.entrance-video video{display:block;width:100%;height:100%;object-fit:cover;object-position:center}.entrance-video::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 65%,rgba(0,0,0,.25));pointer-events:none}

.custom-assets-gallery{margin-left:var(--sidebar);padding:0 15px 50px}.project-gallery-intro{max-width:680px;padding:10px 0 26px}.project-gallery-intro p{margin:10px 0 0;color:#aeb5ba;line-height:1.55;font-size:15px}.custom-assets-gallery .project-gallery{margin:0;padding:0}.custom-assets-gallery .project-gallery figure{aspect-ratio:1122/1402}@media(max-width:1023px){.custom-assets-gallery{margin-left:0;padding:0 20px 35px}}

#info-panel h2{font-weight:900!important;letter-spacing:-1.8px}.identity-fixed .identity-soundwave-barbershop strong{font-size:0!important;display:flex;flex-direction:column;align-items:center;gap:6px;font-family:"Brush Script MT","Segoe Script",cursive;font-weight:700;line-height:.85;text-transform:none}.identity-fixed .identity-soundwave-barbershop strong:before{content:"SoundWave";font-size:clamp(28px,2.8vw,46px);font-style:italic;letter-spacing:-.08em}.identity-fixed .identity-soundwave-barbershop strong:after{content:"Barbershop";font-family:Arial,Helvetica,sans-serif;font-size:clamp(7px,.65vw,10px);font-style:normal;font-weight:700;letter-spacing:.28em}
#info-panel .studio-fit-link{display:inline-block;font-size:13px;line-height:1.45;text-decoration:underline;text-underline-offset:4px;max-width:260px}#info-panel .studio-fit-link:hover{opacity:.7}@media(max-width:1023px){#info-panel .studio-fit-link{font-size:14px;max-width:340px}}
@media(min-width:1024px){.nav-cluster{display:grid;grid-template-columns:1fr auto 1fr}.nav-cluster>div{display:contents}.nav-cluster button{justify-self:start}.nav-cluster .header-services{justify-self:center}.nav-cluster>a:last-child{justify-self:end}}