/* case study projects
   Loaded in numeric order: later files refine earlier ones. */
@layer site {
/* round: mobile process frame, success note, hover edge */
@media (max-width:600px){
.scn{inset:58px 0 200px !important}
.scn>:not(.ghost){scale:.72;margin-top:0 !important}
.scn .ghost{font-size:72px !important;top:50% !important}
}
.it.note.on-acc{background:color-mix(in srgb,var(--acc0) 22%,#121212) !important;color:var(--acc0) !important;box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--acc0) 55%,transparent),0 20px 40px var(--color-shade-a35)}
.mv.light .it.note.on-acc{background:color-mix(in srgb,#8ACE00 26%,#F5F5F5) !important;color:#3F6300 !important}
.b::before{inset:-1px}
.b:hover,.b:focus-visible{background:var(--fill);transition:transform .4s var(--ease-out),color .3s ease,border-color .3s ease,background 0s linear .5s}

.bt-meta .bt-more{top:4px;bottom:auto}

/* light-mode launch icons + clean button hover */
.mv.light .ln-ic{background:color-mix(in srgb,#8ACE00 24%,#FFFFFF) !important;color:#3F6300 !important;border-color:color-mix(in srgb,#8ACE00 55%,transparent) !important}
.b:hover,.b:focus-visible{background:var(--fill) !important;transition:transform .4s var(--ease-out),color .3s ease,border-color .3s ease,background-color .5s var(--ease-out) !important}
.b::before{inset:0}
.glow:hover{--r1:var(--acc0) !important;--r2:#fff !important;box-shadow:0 0 0 1px color-mix(in srgb,var(--acc0) 25%,transparent),0 10px 30px color-mix(in srgb,var(--acc0) 22%,transparent)}
.glow:hover::after{padding:2.5px;background:conic-gradient(from var(--ang),transparent 0deg,transparent 120deg,color-mix(in srgb,var(--acc0) 40%,transparent) 200deg,var(--acc0) 300deg,#fff 340deg,transparent 360deg) !important;animation-duration:2.2s !important}

/* wordmark flashlight */
.foot .wordmark{background:radial-gradient(260px circle at var(--mx,-600px) var(--my,-600px),color-mix(in srgb,var(--color-fg) 55%,transparent) 0%,color-mix(in srgb,var(--color-fg) 18%,transparent) 45%,transparent 75%),linear-gradient(180deg,var(--color-fg) 0%,var(--color-fg-a35) 45%,var(--color-fg-a00) 95%) !important;-webkit-background-clip:text !important;background-clip:text !important;color:transparent !important}
.foot .wordmark{pointer-events:auto}

/* video indicator */
.vchip{position:absolute;left:14px;top:14px;z-index:2;display:inline-flex;align-items:flex-end;gap:3px;height:28px !important;padding:0 11px 0 10px;border-radius:var(--radius-pill);background:rgba(10,10,10,.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;font:600 var(--fs-xs)/28px var(--font-mono);letter-spacing:.06em;text-transform:uppercase}
.vchip i{display:block;width:3px;height:8px;margin-bottom:10px;border-radius:2px;background:var(--acc0);animation:vq 1s ease-in-out infinite}
.vchip i:nth-child(2){animation-delay:.2s}.vchip i:nth-child(3){animation-delay:.4s;margin-right:5px}
.cs-hero video{background:#000}

/* case study navigation */
.csn{display:flex;align-items:center;gap:8px;min-width:0}
.csn-b{flex:none;width:44px;height:44px;border-radius:14px;display:grid;place-items:center;color:var(--color-bg);border:1px solid var(--color-bg-a15) !important;transition:background .2s ease}
.csn-b:hover{background:var(--color-warm-100)}
.csn-m{position:relative;min-width:0}
.csn-t{display:flex;align-items:center;gap:10px;height:44px;padding:0 14px;border-radius:14px;color:var(--color-bg);max-width:min(52vw,420px)}
.csn-t:hover{background:var(--color-warm-100)}
.csn-t b{font-size:17px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.csn-i{font:500 var(--fs-xs) var(--font-mono);color:var(--color-warm-600);font-variant-numeric:tabular-nums;white-space:nowrap}
.csn-list{position:absolute;left:0;top:calc(100% + 8px);width:320px;max-height:min(70vh,560px);overflow:auto;padding:8px;border-radius:18px;background:var(--color-bg-alt);border:1px solid var(--color-bg-a15);box-shadow:0 24px 60px rgba(0,0,0,.18);display:none;flex-direction:column;z-index:20}
.csn-list.on{display:flex}
.csn-g{font:500 11px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--color-warm-600);padding:10px 10px 6px}
.csn-o{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:10px;border-radius:10px;color:var(--color-bg);text-align:left}
.csn-o:hover{background:var(--color-warm-100)}
.csn-o span{font-size:var(--fs-body-sm);font-weight:600}
.csn-o em{font-style:normal;font-size:var(--fs-caption);color:var(--color-warm-600);white-space:nowrap}
.csn-o.is-cur{background:var(--color-bg);color:var(--color-bg-alt)}
.csn-o.is-cur em{color:inherit;opacity:.7}
@media (max-width:600px){.csn-i{display:none}.csn-t{padding:0 8px}.csn-list{width:min(86vw,320px);left:-52px}}

/* revealed projects fade in */
.bento.all>.more{animation:moreIn .6s var(--ease-out) both}
.bento.all>.more:nth-of-type(n){animation-delay:calc(var(--mi,0) * 60ms)}
/* video cards: no rescale on hover (it made the video shimmer) */
.bt:hover .bt-art.bt-img video{transform:none !important}
.bt-art.bt-img video{transform:translateZ(0);backface-visibility:hidden;will-change:auto}
/* roomier project menu */
.csn{gap:12px}
.csn-t{height:48px;padding:0 16px;gap:12px}
.csn-t b{font-size:var(--fs-md)}
.csn-b{width:48px;height:48px}
.csn-list{width:380px;padding:12px;gap:2px;border-radius:22px}
.csn-g{padding:14px 12px 8px}
.csn-g:not(:first-child){margin-top:8px;border-top:1px solid var(--color-bg-a15);padding-top:18px}
.csn-o{padding:12px 12px;min-height:46px;align-items:center;border-radius:12px}
.csn-o span{font-size:var(--fs-base)}
.csn-o em{font-size:13.5px}
@media (max-width:600px){.csn-list{width:min(90vw,380px)}}
.csn-o.is-cur{background:var(--color-warm-100) !important;color:var(--color-bg) !important;box-shadow:none}
.csn-o.is-cur span{font-weight:700}
.csn-o.is-cur em{opacity:1 !important;color:var(--color-warm-600) !important}

/* all projects page */
.pj{position:fixed;inset:0;z-index:590;background:var(--color-bg-alt);color:var(--color-bg);overflow-y:auto;overscroll-behavior:contain;padding:0 clamp(20px,4vw,56px) 80px;animation:sheetUp .7s cubic-bezier(.16,1,.3,1) both}
.pj-top{position:sticky;top:0;z-index:3;display:flex;justify-content:space-between;align-items:flex-end;gap:16px;padding:28px 0 18px;background:var(--color-bg-alt)}
.pj-h h2{margin:8px 0 0;font-size:clamp(40px,6vw,88px);line-height:.95;letter-spacing:-.042em;font-weight:600}
.pj-c{font-size:.4em;color:var(--color-warm-600);letter-spacing:0;vertical-align:.9em;margin-left:6px}
.pj-x{width:48px;height:48px;border-radius:var(--radius-round);background:var(--color-bg);color:var(--color-fg);display:flex;align-items:center;justify-content:center;flex:none}
.pj-f{display:flex;gap:8px;flex-wrap:wrap;padding:6px 0 28px}
.pj-chip{height:42px;padding:0 18px;border-radius:var(--radius-pill);border:1px solid var(--color-bg-a15) !important;color:var(--color-bg);font-size:var(--fs-body-sm);font-weight:500;display:inline-flex;align-items:center;gap:8px}
.pj-chip em{font-style:normal;font-size:var(--fs-caption);color:var(--color-warm-600)}
.pj-chip.on{background:var(--color-bg);color:var(--color-bg-alt);border-color:var(--color-bg) !important}
.pj-chip.on em{color:inherit;opacity:.7}
.pj-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.pj-card{display:flex;flex-direction:column;gap:14px;text-align:left;color:var(--color-bg)}
.pj-img{position:relative;display:block;aspect-ratio:16/11;border-radius:22px;overflow:hidden}
.pj-img img{width:100%;height:100%;object-fit:cover;display:block;transition:scale .8s var(--ease-out)}
.pj-card:hover .pj-img img{scale:1.04}
.pj-ph{position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:var(--fs-4xl);letter-spacing:-.03em}
.pj-meta{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:0 4px}
.pj-meta b{display:block;font-size:22px;font-weight:600;letter-spacing:-.02em}
.pj-meta em{font-style:normal;font-size:var(--fs-sm);color:var(--color-warm-600)}
.pj-go{flex:none;width:40px;height:40px;border-radius:12px;border:1px solid var(--color-bg-a15);display:grid;place-items:center;transition:background .25s ease,color .25s ease}
.pj-card:hover .pj-go{background:var(--color-bg);color:var(--color-bg-alt)}
@media (max-width:1000px){.pj-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.pj-grid{grid-template-columns:minmax(0,1fr)}.pj-top{padding-top:20px}}
.bento.all>.more{display:none !important}

/* button reset overrides: give menu + page controls their padding back */
.mv .csn-o{padding:12px 16px}
.mv .csn-t{padding:0 16px}
.mv .pj-chip{padding:0 18px}
.csn-list{padding:10px}
.csn-tabs{display:flex;gap:4px;padding:4px;margin:0 0 8px;border-radius:14px;background:var(--color-warm-100)}
.mv .csn-tab{flex:1;height:36px;padding:0 10px;border-radius:10px;font-size:var(--fs-sm);font-weight:500;color:var(--color-warm-600);white-space:nowrap}
.csn-tab.on{background:var(--color-bg-alt);color:var(--color-bg);box-shadow:0 1px 3px rgba(0,0,0,.08)}

.pj-img{isolation:isolate;-webkit-mask-image:-webkit-radial-gradient(white,black);transform:translateZ(0);background-clip:padding-box}
.pj-img img{border-radius:inherit;backface-visibility:hidden}
.pj-img::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--color-bg-a15);pointer-events:none;z-index:2}
.pj-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.pj-tag{display:inline-flex;align-items:center;height:26px;padding:0 9px;border-radius:7px;background:var(--color-warm-100);color:var(--color-warm-700);font-size:12.5px;font-weight:500;letter-spacing:-.005em;white-space:nowrap}
.pj-tag.pf{background:transparent;box-shadow:inset 0 0 0 1px var(--color-bg-a15);color:var(--color-warm-600)}

.mv .pj-top{position:static;padding:28px 0 10px}
.pj-bar{position:sticky;top:0;z-index:4;display:flex;justify-content:space-between;align-items:center;gap:16px;margin:0 calc(-1*clamp(20px,4vw,56px)) 24px;padding:14px clamp(20px,4vw,56px);background:color-mix(in srgb,var(--color-bg-alt) 88%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:border-color .3s ease}
.mv .pj-bar .pj-f{padding:0}
.pj-bar .top-r{gap:40px}
@media (max-width:600px){
.pj-bar{flex-wrap:nowrap;gap:6px;padding-top:10px;padding-bottom:10px}
.mv .pj-bar .pj-f{flex:1;min-width:0;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:6px}
.pj-bar .pj-f::-webkit-scrollbar{display:none}
.mv .pj-bar .pj-chip{flex:none;height:36px;padding:0 10px;font-size:var(--fs-caption);gap:4px}
.pj-bar .top-hire{display:none}
.pj-bar .top-r{gap:0}
.pj-bar .pj-x{width:36px;height:36px}
.mv .pj-top{padding-bottom:4px}
}
@media (max-width:760px){.hire-orb{width:84px;height:84px}.hire-orb-c{width:36px;height:36px}.hire-orb-c svg{width:16px;height:16px}.hire-orb-t text{font-size:9.6px}}
.cs .cs-next{padding-bottom:140px !important}
/* sticky tabs in project menu */
.csn-tabs{position:sticky;top:-10px;z-index:3;margin:-10px -10px 8px;padding:14px 14px 10px;border-radius:0;background:var(--color-bg-alt);box-shadow:0 1px 0 var(--color-bg-a15)}
.csn-tabs::before{content:"";position:absolute;inset:10px 10px 6px;border-radius:14px;background:var(--color-warm-100);z-index:-1}
.csn-list,.pj,.cs{scrollbar-gutter:stable}
.csn-tabs{isolation:isolate}
.csn-list{scroll-padding-top:64px}

/* back to projects + home chips */
.mv .csn-back{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 14px 0 12px;border-radius:14px;color:var(--color-bg);font-size:var(--fs-body-sm);font-weight:600;white-space:nowrap}
.csn-back:hover{background:var(--color-warm-100)}
.csn-sep{width:1px;height:24px;background:var(--color-bg-a15);margin:0 6px}
@media (max-width:760px){.csn-back span{display:none}.mv .csn-back{width:44px;padding:0;justify-content:center}.csn-sep{display:none}}
.mv .bt-tag{border-radius:7px;height:26px;padding:0 9px;gap:5px;font-size:12.5px}

/* rotating hire orb on case */
.hire-orb{position:fixed;right:clamp(16px,3vw,40px);bottom:clamp(16px,3vw,40px);z-index:640;width:120px;height:120px;border-radius:var(--radius-round);background:var(--acc,#8ACE00);color:#0A0A0A;display:grid;place-items:center;box-shadow:0 18px 40px rgba(0,0,0,.28);animation:orbIn .7s cubic-bezier(.16,1,.3,1) .4s both;transition:transform .4s var(--ease-out)}
.hire-orb-t{position:absolute;inset:0;width:100%;height:100%;animation:orbSpin 14s linear infinite}
.hire-orb-t text{fill:#0A0A0A;font:600 10px var(--font-mono)}
.hire-orb-c{position:relative;width:52px;height:52px;border-radius:var(--radius-round);background:transparent;box-shadow:inset 0 0 0 1.5px #0A0A0A;color:#0A0A0A;display:grid;place-items:center;transition:transform .4s var(--ease-out)}
.hire-orb{transition:scale .45s cubic-bezier(.2,.8,.2,1)}
.hire-orb:hover{scale:1.1}
.hire-orb:hover .hire-orb-t{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.hire-orb-t{animation:none}}
@media (max-width:600px){.hire-orb{width:92px;height:92px}.hire-orb-c{width:40px;height:40px}.hire-orb-c svg{width:18px;height:18px}}
/* bento meta: never let View details sit on the title */
.bt-meta{container-type:inline-size}
@container (min-width:441px){.bt-meta b{padding-right:136px}}
@container (max-width:440px){.bt-meta .bt-more{display:none}}
@media (hover:none){.bt-meta .bt-more{display:none}}

.cs-gal.store{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
@media (max-width:860px){.cs-gal.store{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}
.cs-gal.store .cs-shot{border-radius:20px}

/* image fade-in instead of line-by-line paint */
.cs-shot img,.cs-hero img,.pj-img img,.bt-img img{opacity:0;transition:opacity .5s ease}
.cs-shot img.is-ld,.cs-hero img.is-ld,.pj-img img.is-ld,.bt-img img.is-ld{opacity:1}

/* touch: pressed states for everything that has a hover */
@media (hover:none){
.mv a,.mv button{-webkit-tap-highlight-color:transparent}
.b,.bt,.pj-card,.pj-chip,.csn-b,.csn-t,.csn-o,.csn-back,.csn-tab,.cs-close,.pj-x,.cs-next,.hire-orb,.faq-q,.tchip,.bnav a,.acc,.capr,.cc,.cg-row,.ai-row,.mm-link,.thm,.tool,.tq-arr,.prev,.show-nav,.ipill,.it2,.sf,.va,.you-wrap,.svx-row{transition:scale .18s ease,background-color .18s ease,opacity .18s ease}
.b:active,.pj-chip:active,.csn-b:active,.csn-back:active,.csn-tab:active,.cs-close:active,.pj-x:active,.tchip:active,.bnav a:active,.thm:active,.tool:active,.tq-arr:active,.prev:active,.show-nav:active,.ipill:active,.you-wrap:active{scale:.94}
.bt:active,.pj-card:active,.acc:active,.cc:active,.sf:active,.va:active,.it2:active{scale:.98}
.hire-orb:active{scale:.92}
.pj-card:active{background:var(--color-fg)}
.pj-card:active .pj-go{background:var(--color-bg);color:var(--color-bg-alt)}
.csn-t:active,.csn-o:active,.faq-q:active,.capr:active,.cg-row:active,.ai-row:active,.mm-link:active,.svx-row:active{background:var(--color-warm-100)}
.cs-next:active{opacity:.7}
}
/* mobile: close button higher, case text tighter */
.pj-xm{display:none !important}
@media (max-width:600px){.pj-xm{display:flex !important}}
@media (max-width:600px){
.mv .pj-bar .top-r{display:none}
.mv .pj-xm{display:flex;width:40px;height:40px}
.mv .pj-top{align-items:flex-start}
.cs-body li{font-size:var(--fs-body-sm) !important;line-height:1.45 !important;padding:14px 0 !important;gap:12px !important;grid-template-columns:16px minmax(0,1fr) !important}
.cs-body li>span:first-child{width:7px !important;height:7px !important;margin-top:7px !important}
.cs-body>p{font-size:var(--fs-md) !important;line-height:1.45 !important}
.mv .cs-body{gap:16px}
.cs .cs-body{margin-top:48px !important}
.cs .cs-gal{margin-top:48px}
.cs-meta>div>div:last-child{font-size:var(--fs-body-sm) !important}
}
/* scrollbars */
html{--sb:#0A0A0A;--sbh:#000;scrollbar-width:auto;scrollbar-color:var(--sb) transparent}
html:has(.mv.light){--sb:#E9E9E6;--sbh:#FFFFFF}
.pj,.cs{scrollbar-width:auto;scrollbar-color:var(--color-bg) transparent}
.csn-list{scrollbar-width:thin;scrollbar-color:var(--color-bg) transparent}
::-webkit-scrollbar{width:14px;height:14px}
.csn-list::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--sb);border-radius:99px;border:3px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:var(--sbh);background-clip:padding-box;border-width:2px}
::-webkit-scrollbar-thumb{min-height:48px}
.pj::-webkit-scrollbar-thumb,.cs::-webkit-scrollbar-thumb,.csn-list::-webkit-scrollbar-thumb{background:var(--color-bg);background-clip:padding-box}
::-webkit-scrollbar-corner{background:transparent}
/* card hover surface + top hire */
.mv .pj-card{padding:10px 10px 14px;border-radius:30px;background:transparent;transition:background .35s var(--ease-out),box-shadow .35s var(--ease-out)}
.pj-card .pj-img{border-radius:20px}
@media (hover:hover){.pj-card:hover{background:var(--color-fg);box-shadow:0 18px 44px rgba(0,0,0,.08)}}
@media (hover:none){.pj-card:hover .pj-go{background:transparent;color:inherit}.pj-card:hover .pj-img img{scale:1}}
.pj-grid{gap:12px}
.top-r{display:flex;align-items:center;gap:40px;flex:none}
.mv .top-hire{height:48px;padding:0 20px;font-size:var(--fs-body-sm);white-space:nowrap}
.pj-top{align-items:center}
@media (max-width:600px){.mv .top-hire{height:44px;padding:0 14px;font-size:var(--fs-sm)}.top-hire .arw{display:none}}
}