:root{
  --bg:#000; --ink:#f4f4ef; --muted:#6b6b6b; --line:rgba(255,255,255,.14);
  --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#000;color:var(--ink);font-family:Arial,Helvetica,sans-serif;overflow:hidden}
body{font-size:12px;letter-spacing:-.035em;text-transform:uppercase;cursor:auto}
button,a{font:inherit;color:inherit;text-transform:inherit}button{border:0;background:none;cursor:pointer}a{text-decoration:none;cursor:pointer}.magnetic{will-change:transform}
.grain{position:fixed;inset:0;z-index:80;pointer-events:none;opacity:.028;mix-blend-mode:screen;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.08' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.cursor{position:fixed;left:0;top:0;width:22px;height:22px;border:1px solid rgba(255,255,255,.72);border-radius:50%;z-index:9999;pointer-events:none;transform:translate3d(-50%,-50%,0);transition:width .22s var(--ease),height .22s var(--ease),background .22s,border .22s,opacity .22s;opacity:1}.cursor.is-hover{width:54px;height:54px;background:rgba(255,255,255,.075);border-color:rgba(255,255,255,.22)}body.modal-open .cursor{opacity:1!important}
.topbar{position:fixed;top:8px;left:8px;right:8px;height:58px;display:grid;grid-template-columns:repeat(4,1fr);gap:4px;z-index:40}.nav-card{height:100%;border:1px solid var(--line);border-radius:10px;background:rgba(0,0,0,.7);backdrop-filter:blur(18px);color:#5d5d5d;text-align:left;padding:0 14px;overflow:hidden;transition:background .45s var(--ease),border .45s var(--ease),color .45s var(--ease)}.nav-card span{display:block;transform:translateY(17px);transition:transform .62s var(--ease)}.nav-card:hover,.nav-card.active{color:var(--ink);background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.28)}.nav-card:hover span,.nav-card.active span{transform:translateY(0)}
main,.view{position:fixed;inset:0}.view{opacity:0;visibility:hidden;transform:translateY(15px) scale(.995);transition:opacity .52s ease,transform .75s var(--ease),visibility .52s}.view.is-visible{opacity:1;visibility:visible;transform:none}.identity-lockup{position:absolute;top:82px;left:50%;transform:translateX(-50%);z-index:8;pointer-events:none;text-align:center}.identity-lockup h1{margin:0;font-size:clamp(16px,1.55vw,28px);line-height:.86;font-weight:950;letter-spacing:-.07em}.identity-lockup p{margin:5px 0 0;color:#cfcfcf;font-size:clamp(8px,.62vw,11px);letter-spacing:.08em}
.project-stage{position:absolute;inset:76px 0 0 0;overflow:hidden;touch-action:none;perspective:1200px}
.floating-layer{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}.float-still{position:absolute;left:0;top:0;width:clamp(62px,7vw,116px);aspect-ratio:1/1;border:1px solid rgba(255,255,255,.12);border-radius:4px;background:#050505 var(--img) center/cover no-repeat;opacity:.34;filter:grayscale(.24) brightness(.78) contrast(1.08);pointer-events:auto;will-change:transform,opacity,filter;transform:translate3d(var(--x),var(--y),0) scale(var(--s));animation:stillDrift var(--dur) ease-in-out infinite alternate;animation-delay:var(--delay);transition:opacity .35s var(--ease),filter .35s var(--ease),border .35s var(--ease),transform .35s var(--ease)}.float-still::after{content:attr(data-title);position:absolute;left:7px;right:7px;bottom:7px;font-size:9px;line-height:.92;opacity:0;transform:translateY(5px);transition:.28s var(--ease);color:#fff;text-shadow:0 1px 12px rgba(0,0,0,.8)}.float-still:hover{opacity:.92;filter:grayscale(0) brightness(1) contrast(1.05);border-color:rgba(255,255,255,.38);z-index:9}.float-still:hover::after{opacity:1;transform:none}@keyframes stillDrift{0%{translate:0 0;rotate:var(--r0)}100%{translate:var(--dx) var(--dy);rotate:var(--r1)}}.rail{position:absolute;left:0;top:0;height:100%;width:100%;will-change:transform;z-index:4;pointer-events:none}.card{position:absolute;pointer-events:auto;width:clamp(148px,13vw,235px);aspect-ratio:1/1;border:1px solid rgba(255,255,255,.12);border-radius:5px;overflow:hidden;background:#020202;box-shadow:0 24px 90px rgba(0,0,0,.86);will-change:transform,opacity;isolation:isolate;transform:translate3d(0,0,0)}.card::before{content:"";position:absolute;inset:0;background:var(--img);background-size:cover;background-position:center;filter:contrast(1.05) saturate(.75) brightness(.86);transform:scale(1.02);transition:transform .8s var(--ease),filter .8s var(--ease)}.card::after{content:attr(data-title);position:absolute;left:10px;right:10px;bottom:9px;font-size:11px;line-height:.95;opacity:0;transform:translateY(9px);transition:opacity .32s var(--ease),transform .32s var(--ease)}.card .meta{position:absolute;left:10px;top:10px;color:#eee;font-size:10px;line-height:1.05;opacity:.55;z-index:2}.card:hover{z-index:10;border-color:rgba(255,255,255,.36)}.card:hover::before{transform:scale(1.1);filter:contrast(1.08) saturate(1) brightness(1.02)}.card:hover::after{opacity:1;transform:none}.hud{position:fixed;top:80px;z-index:9;color:#4e4e4e;pointer-events:none}.hud-left{left:14px}.hud-right{right:14px}.bottom-switch{position:fixed;right:10px;bottom:10px;z-index:18;display:flex;gap:4px;padding:4px;border:1px solid var(--line);border-radius:12px;background:rgba(0,0,0,.76);backdrop-filter:blur(16px)}.pill{padding:12px 17px;border-radius:9px;color:#777;transition:.25s}.pill:hover,.pill.active{background:rgba(255,255,255,.12);color:var(--ink)}.index-panel{position:fixed;right:10px;bottom:68px;width:min(620px,calc(100vw - 20px));max-height:62vh;overflow:auto;z-index:17;border:1px solid var(--line);border-radius:12px;background:rgba(0,0,0,.92);backdrop-filter:blur(24px);padding:10px;opacity:0;pointer-events:none;transform:translateY(10px);transition:.35s var(--ease)}.index-panel.open{opacity:1;pointer-events:auto;transform:none}.index-head,.index-row{display:grid;grid-template-columns:50px 1fr 135px 60px;gap:10px}.index-head{color:#5f5f5f;margin-bottom:10px}.index-row{width:100%;padding:12px 0;border-top:1px solid rgba(255,255,255,.09);text-align:left;color:#dcdcdc}.index-row:hover{color:#777}
.page-close{position:fixed;right:12px;top:78px;z-index:50;width:42px;height:42px;border:1px solid rgba(255,255,255,.18);border-radius:999px;background:rgba(0,0,0,.66);backdrop-filter:blur(16px);font-size:26px;line-height:1;color:#eee;transition:.25s var(--ease)}.page-close:hover{background:#fff;color:#000;border-color:#fff;transform:rotate(90deg)}
.stills-board{position:absolute;inset:82px 10px 10px 10px;display:grid;grid-template-columns:repeat(6,minmax(150px,1fr));grid-auto-rows:minmax(170px,26vh);gap:10px;overflow:auto;overscroll-behavior:contain;padding:0 0 10vh;scroll-behavior:smooth}.still{position:relative;border:1px solid rgba(255,255,255,.1);border-radius:5px;background-color:#050505;background-image:var(--img);background-size:contain;background-position:center;background-repeat:no-repeat;min-height:160px;filter:grayscale(.2) brightness(.84) contrast(1.04);transition:transform .45s var(--ease),filter .45s var(--ease),border .45s var(--ease),background-color .45s}.still:nth-child(5n+1){grid-column:span 2;grid-row:span 2}.still:nth-child(7n+3){grid-column:span 2}.still:nth-child(9n+5){grid-row:span 2}.still::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.15),transparent 38%);opacity:0;transition:.25s}.still:hover{z-index:3;filter:grayscale(0) brightness(1) contrast(1.04);border-color:rgba(255,255,255,.36);transform:scale(1.018);background-color:#0b0b0b}.still:hover::before{opacity:1}
 .studio-layout{position:absolute;inset:100px 12px 40px;display:grid;grid-template-columns:minmax(300px,44vw) 1fr;gap:clamp(28px,7vw,110px);align-items:center}.studio-object{width:min(42vw,620px);aspect-ratio:1/1;position:relative;opacity:.96;filter:contrast(1.18) brightness(1);will-change:transform;animation:discBreath 3.4s var(--ease) infinite;border-radius:50%;overflow:hidden;background:transparent;contain:paint}.studio-object img{width:100%;height:100%;object-fit:contain;display:block;animation:discSpin 24s linear infinite, discMicroPulse 1.7s ease-in-out infinite alternate;will-change:transform,filter;filter:drop-shadow(0 0 12px rgba(255,255,255,.10))}.studio-object::before{content:"";position:absolute;inset:12%;border-radius:50%;border:1px solid rgba(255,255,255,.18);transform:scale(.94);opacity:.28;animation:ringPulse 3.15s var(--ease) infinite;mix-blend-mode:screen}.studio-object::after{content:"";position:absolute;inset:33%;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.9),rgba(255,255,255,.32) 28%,rgba(255,255,255,.08) 46%,transparent 62%);filter:blur(14px);animation:corePulse 1.35s ease-in-out infinite alternate;mix-blend-mode:screen}.studio-copy{max-width:790px}.studio-copy p{margin:0;font-size:clamp(34px,5.6vw,105px);line-height:.82;letter-spacing:-.09em;font-weight:950;text-wrap:balance}.role-stack{margin-top:42px;display:grid;grid-template-columns:repeat(2,minmax(160px,1fr));gap:8px;max-width:520px}.role-stack span{border-top:1px solid rgba(255,255,255,.16);padding-top:10px;color:#bcbcbc;font-size:13px;letter-spacing:-.025em}@keyframes discSpin{to{transform:rotate(360deg)}}@keyframes discMicroPulse{from{filter:drop-shadow(0 0 8px rgba(255,255,255,.08)) brightness(.94)}to{filter:drop-shadow(0 0 22px rgba(255,255,255,.23)) brightness(1.18)}}@keyframes discBreath{0%,100%{transform:scale(.985)}42%{transform:scale(1.022)}55%{transform:scale(1.004)}}@keyframes ringPulse{0%{opacity:.05;transform:scale(.82)}45%{opacity:.42;transform:scale(1.03)}100%{opacity:.04;transform:scale(1.18)}}@keyframes corePulse{from{opacity:.22;transform:scale(.72)}to{opacity:.9;transform:scale(1.18)}}
.contact-center{position:absolute;inset:0;display:flex;gap:7px;align-items:center;justify-content:center;flex-wrap:wrap}.contact-pill{border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:15px 18px;color:#aaa;background:rgba(255,255,255,.03);text-transform:none}.contact-pill:hover{background:#fff;color:#000}footer{position:fixed;left:12px;right:12px;bottom:10px;display:flex;justify-content:space-between;color:#4f4f4f;z-index:4}
.project-modal{width:min(980px,calc(100vw - 26px));height:min(650px,calc(100vh - 28px));border:1px solid rgba(255,255,255,.18);border-radius:14px;background:rgba(0,0,0,.94);color:var(--ink);padding:0;overflow:hidden;backdrop-filter:blur(22px);box-shadow:0 50px 160px rgba(0,0,0,.82)}.project-modal::backdrop{background:rgba(0,0,0,.58);backdrop-filter:blur(5px)}.close{position:absolute;right:12px;top:12px;z-index:3;width:42px;height:42px;border:1px solid rgba(255,255,255,.18);border-radius:999px;background:rgba(0,0,0,.66);font-size:26px;line-height:1;color:#eee;transition:.25s var(--ease)}.close:hover{background:#fff;color:#000;border-color:#fff;transform:rotate(90deg)}.modal-visual{height:55%;background:var(--img);background-size:cover;background-position:center;filter:grayscale(.68) contrast(1.08)}.modal-copy{display:grid;grid-template-columns:180px 1fr;gap:28px;padding:24px}.modal-copy p{margin:0;color:#aaa;line-height:1.25;text-transform:none}.modal-copy h2{margin:0 0 12px;font-size:clamp(36px,6vw,92px);line-height:.8;letter-spacing:-.09em}.modal-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:24px}.modal-link{display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:12px 14px;color:#aaa}.modal-link:hover{background:#fff;color:#000}.modal-strip{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-top:16px}.modal-thumb{aspect-ratio:16/10;border:1px solid rgba(255,255,255,.12);border-radius:4px;background-image:var(--img);background-size:contain;background-position:center;background-repeat:no-repeat;background-color:#050505;filter:brightness(.82);transition:.25s var(--ease)}.modal-thumb:hover{filter:brightness(1);border-color:rgba(255,255,255,.42);transform:translateY(-2px)}
@media(max-width:820px){body{overflow:auto;cursor:auto}.cursor{display:none}.topbar{height:108px;grid-template-columns:1fr 1fr}.project-stage{inset:124px 0 0}.identity-lockup{top:126px;bottom:auto}.card{width:138px}.page-close{top:122px}.stills-board{top:170px;grid-template-columns:repeat(2,1fr);grid-auto-rows:170px}.still:nth-child(n){grid-column:span 1;grid-row:span 1}.studio-layout{display:block;inset:155px 14px 40px}.studio-object{width:74vw;margin:0 auto 32px}.studio-copy p{font-size:40px}.role-stack{grid-template-columns:1fr}.modal-copy{grid-template-columns:1fr}.modal-strip{grid-template-columns:repeat(3,1fr)}.bottom-switch{left:10px;right:auto}footer{position:absolute;display:grid;gap:6px}}

/* V9 fixes: cleaner previews, full stills and safer cursor */
.cursor{opacity:1!important;mix-blend-mode:difference}
.project-modal{width:min(1120px,calc(100vw - 26px));height:min(760px,calc(100vh - 28px))}
.modal-visual{height:58%;background:#030303;filter:none;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}
.modal-visual.has-video{background:#000}
.modal-visual iframe{width:100%;height:100%;border:0;background:#000;display:block;cursor:auto}
.modal-image{width:100%;height:100%;background-image:var(--img);background-size:contain;background-position:center;background-repeat:no-repeat;background-color:#030303;filter:grayscale(.28) contrast(1.04)}
#modalText{display:none!important}.modal-copy{grid-template-columns:150px 1fr;padding:20px 24px 24px}.modal-copy h2{margin-bottom:0}.modal-actions{margin-top:18px}.modal-strip{grid-template-columns:repeat(8,1fr);gap:7px}.modal-thumb{background:none;overflow:hidden;display:block}.modal-thumb img{width:100%;height:100%;object-fit:contain;display:block;background:#050505;filter:brightness(.9)}
.stills-board{grid-template-columns:repeat(5,minmax(210px,1fr));grid-auto-rows:auto;align-items:start;gap:14px;padding-bottom:14vh}.still{min-height:0;background:#050505!important;display:flex;align-items:center;justify-content:center;overflow:hidden}.still img{width:100%;height:auto;object-fit:contain;display:block;filter:grayscale(.12) brightness(.88) contrast(1.03);transition:filter .45s var(--ease),transform .45s var(--ease)}.still:hover img{filter:grayscale(0) brightness(1) contrast(1.04);transform:scale(1.012)}.still:nth-child(n){grid-column:span 1;grid-row:span 1}.still:nth-child(5n+1),.still:nth-child(7n+3),.still:nth-child(9n+5){grid-column:span 1;grid-row:span 1}
@media(max-width:820px){.modal-strip{grid-template-columns:repeat(4,1fr)}.stills-board{grid-template-columns:repeat(2,1fr)}}


/* V10 fixes: YouTube preview fallback, clickable stills, restored ordered stills layout */
.video-fallback{position:absolute;right:12px;bottom:12px;z-index:4;display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.22);border-radius:999px;background:rgba(0,0,0,.62);backdrop-filter:blur(12px);color:#fff;padding:11px 14px;text-transform:uppercase;letter-spacing:-.03em}.video-fallback:hover{background:#fff;color:#000;border-color:#fff}.modal-visual iframe{position:absolute;inset:0;width:100%;height:100%;z-index:1}.stills-board{grid-template-columns:repeat(6,minmax(150px,1fr))!important;grid-auto-rows:minmax(120px,16vh)!important;grid-auto-flow:dense;gap:10px!important;align-items:stretch!important;padding:0 0 12vh!important}.still{min-height:0!important;background:#050505!important;display:flex!important;align-items:center!important;justify-content:center!important;overflow:hidden!important;cursor:pointer!important;pointer-events:auto!important}.still img{width:100%!important;height:100%!important;object-fit:contain!important;display:block!important;pointer-events:none!important;background:#050505;filter:grayscale(.16) brightness(.88) contrast(1.03);transition:filter .45s var(--ease),transform .45s var(--ease)}.still:nth-child(n){grid-column:span 1;grid-row:span 1}.still:nth-child(6n+1){grid-column:span 2;grid-row:span 2}.still:nth-child(8n+3){grid-column:span 2;grid-row:span 1}.still:nth-child(10n+5){grid-column:span 1;grid-row:span 2}.still:nth-child(13n+8){grid-column:span 2;grid-row:span 2}.still:hover{z-index:4;border-color:rgba(255,255,255,.38);transform:scale(1.012)}.still:hover img{filter:grayscale(0) brightness(1) contrast(1.04);transform:scale(1.01)}.modal-thumb{cursor:pointer!important}.modal-thumb img{pointer-events:none!important}@media(max-width:820px){.stills-board{grid-template-columns:repeat(2,1fr)!important;grid-auto-rows:150px!important}.still:nth-child(n){grid-column:span 1!important;grid-row:span 1!important}.video-fallback{right:10px;bottom:10px}}

/* V11: inverse-looping floating stills + more reliable video embed */
.floating-layer{pointer-events:none;z-index:2;overflow:hidden}.float-still{left:0!important;top:0!important;background:none!important;animation:none!important;transition:opacity .35s var(--ease),filter .35s var(--ease),border .35s var(--ease);contain:layout paint;}.float-still .float-inner{position:absolute;inset:0;border-radius:4px;background:#050505 var(--img) center/cover no-repeat;animation:stillDrift var(--dur) ease-in-out infinite alternate;animation-delay:var(--delay);will-change:translate,rotate;display:block}.float-still:hover{transform-origin:center!important}.modal-visual .video-shell{position:absolute;inset:0;z-index:1;background:#000}.modal-visual .video-shell iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000;display:block}.modal-visual.has-video::before{content:"";position:absolute;inset:0;background:var(--img) center/contain no-repeat;opacity:.28;filter:grayscale(.4) brightness(.55);z-index:0}.video-fallback{z-index:5}.project-modal iframe{cursor:auto!important}body,button,a,.card,.still,.float-still{cursor:auto!important}

/* V12: fixed floating stills + stable YouTube loader */
.floating-layer{pointer-events:auto!important;z-index:2!important;overflow:hidden!important;contain:layout paint!important}
.float-still{position:absolute!important;display:block!important;pointer-events:auto!important;background:none!important;border:1px solid rgba(255,255,255,.11)!important;border-radius:5px!important;overflow:hidden!important;filter:grayscale(.22) brightness(.82) contrast(1.05)!important;will-change:transform,opacity!important;transition:filter .32s var(--ease),border .32s var(--ease),opacity .32s var(--ease)!important;animation:none!important;box-shadow:0 16px 54px rgba(0,0,0,.55)!important}
.float-still .float-inner{position:absolute!important;inset:0!important;display:block!important;border-radius:4px!important;background:#050505 var(--img) center/cover no-repeat!important;will-change:transform!important;animation:stillDriftTransform var(--dur) ease-in-out infinite alternate!important;animation-delay:var(--delay)!important}
.float-still:hover{opacity:.78!important;filter:grayscale(0) brightness(1) contrast(1.04)!important;border-color:rgba(255,255,255,.34)!important;z-index:5!important}
@keyframes stillDriftTransform{0%{transform:translate3d(0,0,0) rotate(var(--r0)) scale(1.015)}100%{transform:translate3d(var(--dx),var(--dy),0) rotate(var(--r1)) scale(1.065)}}
.video-shell iframe[srcdoc]{background:#000!important}
.video-fallback{z-index:8!important}

/* V13 — cinematic landing page */
.topbar{grid-template-columns:repeat(5,1fr)}
.view-home{background:#000;overflow:hidden;transform:none!important}
.landing-grid{position:absolute;inset:0;display:grid;grid-template-columns:1.1fr .72fr 1.28fr .84fr;grid-template-rows:1.02fr .78fr 1.16fr;gap:2px;padding:70px 2px 2px;z-index:1;background:#000;opacity:.92}
.clip-tile{position:relative;border:1px solid rgba(0,0,0,.92);border-radius:0;overflow:hidden;background:#000;cursor:pointer;min-height:0;isolation:isolate;transform:translateZ(0);will-change:transform,opacity;opacity:.70;transition:opacity .45s var(--ease),filter .45s var(--ease),transform .45s var(--ease)}
.clip-tile:nth-child(1){grid-column:1 / span 2;grid-row:1 / span 1}.clip-tile:nth-child(2){grid-column:3 / span 1;grid-row:1 / span 2}.clip-tile:nth-child(3){grid-column:4 / span 1;grid-row:1 / span 1}.clip-tile:nth-child(4){grid-column:1 / span 1;grid-row:2 / span 2}.clip-tile:nth-child(5){grid-column:2 / span 1;grid-row:2 / span 1}.clip-tile:nth-child(6){grid-column:4 / span 1;grid-row:2 / span 2}.clip-tile:nth-child(7){grid-column:2 / span 2;grid-row:3 / span 1}.clip-tile:nth-child(8){grid-column:1 / span 1;grid-row:1 / span 1}.clip-tile:nth-child(n+9){display:none}
.clip-tile img{position:absolute;inset:-8%;width:116%;height:116%;object-fit:cover;filter:grayscale(.10) contrast(1.06) brightness(.78);transform:scale(1.05);animation:clipMotion 9s linear infinite alternate;animation-delay:var(--delay);will-change:transform,filter}.clip-tile:nth-child(even) img{animation-duration:12s}.clip-tile:nth-child(3n) img{animation-direction:alternate-reverse}.clip-tile::before{content:"";position:absolute;inset:0;z-index:2;background:radial-gradient(circle at var(--mx,50%) var(--my,50%),transparent 0 26%,rgba(0,0,0,.16) 58%,rgba(0,0,0,.42) 100%);opacity:.42;transition:opacity .4s var(--ease)}.clip-tile::after{content:attr(data-title);position:absolute;left:12px;bottom:10px;right:12px;z-index:3;color:rgba(255,255,255,.75);font-size:10px;line-height:.9;letter-spacing:-.045em;opacity:0;transform:translateY(7px);transition:.34s var(--ease)}.clip-tile:hover{opacity:1;filter:none;z-index:3}.clip-tile:hover img{filter:grayscale(0) contrast(1.03) brightness(.98)}.clip-tile:hover::before{opacity:.18}.clip-tile:hover::after{opacity:1;transform:none}
@keyframes clipMotion{0%{transform:translate3d(-2.2%,-1.4%,0) scale(1.08)}35%{transform:translate3d(1.4%,-2.6%,0) scale(1.13)}70%{transform:translate3d(-1.1%,1.8%,0) scale(1.1)}100%{transform:translate3d(2.4%,2.2%,0) scale(1.16)}}
.landing-scrim{position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(circle at 50% 48%,rgba(0,0,0,0),rgba(0,0,0,.22) 52%,rgba(0,0,0,.56) 100%),linear-gradient(to bottom,rgba(0,0,0,.34),rgba(0,0,0,.02) 34%,rgba(0,0,0,.42));mix-blend-mode:normal}.landing-type{display:none}.landing-mark{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:4;text-align:center;pointer-events:none}.landing-mark h1{margin:0;font-weight:950;font-size:clamp(34px,6.5vw,104px);letter-spacing:-.09em;line-height:.78;color:rgba(255,255,255,.88)}.landing-mark p{margin:10px 0 0;font-size:clamp(9px,.82vw,13px);letter-spacing:.16em;color:rgba(255,255,255,.62)}.landing-enter{position:fixed;right:10px;bottom:10px;z-index:18;padding:16px 22px;border-radius:12px;border:1px solid rgba(255,255,255,.16);background:rgba(0,0,0,.72);backdrop-filter:blur(18px);color:rgba(255,255,255,.72);transition:.3s var(--ease)}.landing-enter:hover{color:#fff;border-color:rgba(255,255,255,.36);background:rgba(255,255,255,.08)}
@media(max-width:760px){.landing-grid{grid-template-columns:1fr 1fr;grid-template-rows:repeat(4,1fr);padding-top:72px}.clip-tile:nth-child(n){display:block;grid-column:auto;grid-row:auto}.clip-tile:nth-child(n+7){display:none}.landing-type{grid-template-columns:1fr 1fr}.landing-project-word{font-size:clamp(28px,14vw,92px)}}

/* V16 — stable rebuild from V14: restore working interactions + clean last fixes */
/* Remove the overlapping landing tiles without touching the JS/interactions. */
.clip-tile:nth-child(7),
.clip-tile:nth-child(8),
.clip-tile:nth-child(n+9){display:none!important;}
.clip-tile:nth-child(1){grid-column:1 / span 2!important;grid-row:1 / span 1!important;}
.clip-tile:nth-child(2){grid-column:3 / span 1!important;grid-row:1 / span 2!important;}
.clip-tile:nth-child(3){grid-column:4 / span 1!important;grid-row:1 / span 1!important;}
.clip-tile:nth-child(4){grid-column:1 / span 1!important;grid-row:2 / span 2!important;}
.clip-tile:nth-child(5){grid-column:2 / span 1!important;grid-row:2 / span 1!important;}
.clip-tile:nth-child(6){grid-column:4 / span 1!important;grid-row:2 / span 2!important;}

/* Stills page: tighter spacing, almost no black gutters, stills remain clickable and full-image. */
.stills-board{
  inset:78px 4px 4px 4px!important;
  grid-template-columns:repeat(6,minmax(150px,1fr))!important;
  grid-auto-rows:minmax(130px,18vh)!important;
  gap:3px!important;
  padding:0 0 8vh!important;
  background:#000!important;
}
.still{
  border-radius:2px!important;
  border-color:rgba(255,255,255,.055)!important;
  background:#000!important;
}
.still img{
  background:#000!important;
  object-fit:contain!important;
}
@media(max-width:820px){
  .stills-board{inset:140px 3px 3px 3px!important;grid-template-columns:repeat(2,1fr)!important;grid-auto-rows:165px!important;gap:3px!important;}
  .clip-tile:nth-child(n){display:block!important;grid-column:auto!important;grid-row:auto!important;}
  .clip-tile:nth-child(n+7){display:none!important;}
}

/* V17 — homepage clips for LESRAM + PQCV: MP4 exports from user GIFs, muted/looped for fluidity. */
.clip-tile video{
  position:absolute;
  inset:-8%;
  width:116%;
  height:116%;
  object-fit:cover;
  filter:grayscale(.08) contrast(1.06) brightness(.88);
  transform:scale(1.05);
  animation:clipMotion 10s linear infinite alternate;
  animation-delay:var(--delay);
  will-change:transform,filter;
  pointer-events:none;
}
.clip-tile.has-clip{opacity:.88;}
.clip-tile.has-clip:hover video{filter:grayscale(0) contrast(1.03) brightness(1);}
.clip-tile.has-clip::after{content:attr(data-title) ' / moving excerpt';}


/* V18 — fix landing clips visibility: exactly six tiles, one per project. */
.landing-grid{grid-template-columns:1.08fr .78fr 1.14fr .92fr!important;grid-template-rows:1fr .82fr 1.08fr!important;gap:3px!important;}
.clip-tile:nth-child(n){display:block!important;}
.clip-tile:nth-child(1){grid-column:1 / span 2!important;grid-row:1 / span 1!important;}
.clip-tile:nth-child(2){grid-column:3 / span 1!important;grid-row:1 / span 2!important;}
.clip-tile:nth-child(3){grid-column:4 / span 1!important;grid-row:1 / span 1!important;}
.clip-tile:nth-child(4){grid-column:1 / span 1!important;grid-row:2 / span 2!important;}
.clip-tile:nth-child(5){grid-column:2 / span 1!important;grid-row:2 / span 1!important;}
.clip-tile:nth-child(6){grid-column:4 / span 1!important;grid-row:2 / span 2!important;}
.clip-tile:nth-child(n+7){display:none!important;}
.clip-tile video{display:block!important;opacity:1!important;visibility:visible!important;background:#050505!important;}
.clip-tile.has-clip::before{opacity:.18!important;}
.clip-tile.has-clip::after{opacity:.86!important;transform:none!important;}
@media(max-width:760px){
  .landing-grid{grid-template-columns:1fr 1fr!important;grid-template-rows:repeat(3,1fr)!important;}
  .clip-tile:nth-child(n){grid-column:auto!important;grid-row:auto!important;}
}


/* V19 — correct KEMA + MASCOTTE clips on homepage, all homepage blocks kept horizontal. */
.landing-grid{
  grid-template-columns:repeat(3,1fr)!important;
  grid-template-rows:repeat(2,1fr)!important;
  gap:4px!important;
  padding:72px 4px 4px!important;
}
.clip-tile:nth-child(n){
  display:block!important;
  grid-column:auto!important;
  grid-row:auto!important;
  aspect-ratio:auto!important;
}
.clip-tile:nth-child(n+7){display:none!important;}
.clip-tile img,
.clip-tile video{
  inset:0!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center!important;
  transform:none!important;
  animation:clipMotionSoft 12s ease-in-out infinite alternate!important;
}
.clip-tile{
  opacity:.86!important;
  border-color:rgba(0,0,0,.72)!important;
}
.clip-tile::before{opacity:.16!important;}
.clip-tile.has-clip{opacity:.94!important;}
@keyframes clipMotionSoft{
  0%{transform:scale(1.015) translate3d(-.8%,-.5%,0)}
  50%{transform:scale(1.045) translate3d(.5%,-.8%,0)}
  100%{transform:scale(1.03) translate3d(.8%,.6%,0)}
}
@media(max-width:760px){
  .landing-grid{grid-template-columns:1fr!important;grid-template-rows:repeat(6,38vh)!important;overflow:auto!important;}
  .clip-tile:nth-child(n){display:block!important;grid-column:auto!important;grid-row:auto!important;}
}

/* V20 — cleaner homepage: user GIF clips for GUILLEMETTE + LEIB, no labels, brighter image, smaller minimal mark. */
.topbar{grid-template-columns:repeat(5,1fr)!important;}
.landing-mark{
  top:36px!important;
  transform:translateX(-50%)!important;
  z-index:5!important;
}
.landing-mark h1{
  font-family:Arial,Helvetica,sans-serif!important;
  font-weight:500!important;
  font-size:clamp(16px,1.45vw,25px)!important;
  letter-spacing:-.035em!important;
  line-height:1!important;
  color:rgba(255,255,255,.82)!important;
}
.landing-mark p{
  margin:4px 0 0!important;
  font-size:clamp(7px,.52vw,9px)!important;
  font-weight:400!important;
  letter-spacing:.22em!important;
  color:rgba(255,255,255,.48)!important;
}
.clip-tile::after,
.clip-tile.has-clip::after,
.clip-tile:hover::after{
  content:""!important;
  display:none!important;
  opacity:0!important;
}
.landing-scrim{
  background:radial-gradient(circle at 50% 48%,rgba(0,0,0,0),rgba(0,0,0,.08) 58%,rgba(0,0,0,.25) 100%),linear-gradient(to bottom,rgba(0,0,0,.14),rgba(0,0,0,0) 42%,rgba(0,0,0,.16))!important;
}
.clip-tile{
  opacity:.98!important;
  background:#030303!important;
}
.clip-tile::before{
  opacity:.05!important;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%),transparent 0 30%,rgba(0,0,0,.04) 62%,rgba(0,0,0,.16) 100%)!important;
}
.clip-tile:hover::before{opacity:.025!important;}
.clip-tile img,
.clip-tile video{
  filter:grayscale(.04) contrast(1.02) brightness(1.12) saturate(1.04)!important;
}
.clip-tile:hover img,
.clip-tile:hover video{
  filter:grayscale(0) contrast(1.02) brightness(1.2) saturate(1.08)!important;
}
.landing-enter{
  background:rgba(0,0,0,.48)!important;
  border-color:rgba(255,255,255,.12)!important;
}
@media(max-width:760px){
  .landing-mark{top:28px!important;}
}


/* V22 — restarted from V20, clean fixes only. */
/* Center the signature again, but keep it minimal and smaller than the old hero title. */
.landing-mark{
  left:50%!important;
  top:50%!important;
  transform:translate(-50%,-50%)!important;
  text-align:center!important;
  z-index:5!important;
}
.landing-mark h1{
  font-family:"Helvetica Neue",Arial,Helvetica,sans-serif!important;
  font-weight:400!important;
  font-size:clamp(22px,3.05vw,48px)!important;
  letter-spacing:-.045em!important;
  line-height:.92!important;
  color:rgba(255,255,255,.84)!important;
}
.landing-mark p{
  margin:7px 0 0!important;
  font-family:"Helvetica Neue",Arial,Helvetica,sans-serif!important;
  font-size:clamp(7px,.62vw,10px)!important;
  font-weight:400!important;
  letter-spacing:.24em!important;
  color:rgba(255,255,255,.55)!important;
}

/* Page 1: equal black gutters, stable six-tile grid, no overlap. */
.landing-grid{
  display:grid!important;
  grid-template-columns:repeat(3,1fr)!important;
  grid-template-rows:repeat(2,1fr)!important;
  gap:4px!important;
  padding:72px 4px 4px!important;
  background:#000!important;
}
.clip-tile:nth-child(n){
  display:block!important;
  grid-column:auto!important;
  grid-row:auto!important;
  min-width:0!important;
  min-height:0!important;
}
.clip-tile:nth-child(n+7){display:none!important;}
.clip-tile{
  border:0!important;
  border-radius:0!important;
  background:#000!important;
  opacity:.98!important;
}
.clip-tile img,
.clip-tile video{
  inset:0!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center!important;
}

/* Mascotte: zoom the moving excerpt to remove embedded black bars. */
.clip-tile[data-slug="mascotte"] video,
.clip-tile[data-slug="mascotte"] img{
  animation:mascotteZoomMotion 12s ease-in-out infinite alternate!important;
  filter:grayscale(.04) contrast(1.04) brightness(1.13) saturate(1.05)!important;
}
@keyframes mascotteZoomMotion{
  0%{transform:scale(1.20) translate3d(-.6%,-.4%,0)}
  50%{transform:scale(1.24) translate3d(.4%,-.7%,0)}
  100%{transform:scale(1.22) translate3d(.7%,.5%,0)}
}

@media(max-width:760px){
  .landing-mark{top:50%!important;}
  .landing-grid{grid-template-columns:1fr!important;grid-template-rows:repeat(6,38vh)!important;overflow:auto!important;}
}


/* V25 — rectangular project page + new project thumbnails. */
.card{
  width:clamp(260px,26vw,455px)!important;
  aspect-ratio:16/9!important;
  border-radius:4px!important;
}
.card::before{
  background-size:cover!important;
  background-position:center!important;
  filter:contrast(1.04) saturate(.92) brightness(.96)!important;
}
.card:hover::before{
  transform:scale(1.045)!important;
  filter:contrast(1.06) saturate(1.05) brightness(1.08)!important;
}
.card .meta{
  font-size:9px!important;
  opacity:.48!important;
}
.float-still{
  aspect-ratio:16/9!important;
  border-radius:3px!important;
  background-size:cover!important;
  background-position:center!important;
  filter:grayscale(.14) brightness(.9) contrast(1.04)!important;
}
.float-still:hover{
  filter:grayscale(0) brightness(1.05) contrast(1.04)!important;
}
.float-still::after{display:none!important;}

/* Stills page: put the new selected thumbnails forward and wider. */
.stills-board{
  grid-template-columns:repeat(4,minmax(230px,1fr))!important;
  grid-auto-rows:minmax(150px,20vh)!important;
  gap:4px!important;
}
.still{
  aspect-ratio:16/9!important;
  min-height:0!important;
  background-size:cover!important;
}
.still img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  display:block!important;
}
.still.featured{
  grid-column:span 2!important;
  grid-row:span 2!important;
  filter:grayscale(.04) brightness(1.03) contrast(1.04)!important;
  border-color:rgba(255,255,255,.18)!important;
}
.still.featured:hover{filter:grayscale(0) brightness(1.12) contrast(1.05)!important;}
@media(max-width:820px){
  .card{width:clamp(250px,78vw,440px)!important;}
  .stills-board{grid-template-columns:repeat(2,1fr)!important;grid-auto-rows:145px!important;}
  .still.featured{grid-column:span 2!important;grid-row:span 1!important;}
}

/* V26 — structured stills by project + smoother non-cropped floating background. */
/* Project page floating stills: only the frame moves; the image stays locked inside and fully framed. */
.float-still{
  aspect-ratio:16/9!important;
  background:#030303!important;
  border-color:rgba(255,255,255,.10)!important;
  overflow:hidden!important;
  transition:opacity .22s var(--ease), filter .22s var(--ease), border-color .22s var(--ease)!important;
  filter:grayscale(.10) brightness(.92) contrast(1.02)!important;
  box-shadow:0 18px 58px rgba(0,0,0,.42)!important;
}
.float-still .float-inner{
  inset:0!important;
  background-color:#030303!important;
  background-image:var(--img)!important;
  background-position:center!important;
  background-size:contain!important;
  background-repeat:no-repeat!important;
  animation:none!important;
  transform:none!important;
  will-change:auto!important;
}
.float-still:hover{filter:grayscale(0) brightness(1.05) contrast(1.03)!important;opacity:.88!important;}

/* Stills page: grouped by project, tighter, more organic, with selected thumbnails pushed forward. */
.stills-board{
  display:block!important;
  inset:82px 6px 8px 6px!important;
  overflow:auto!important;
  padding:0 0 12vh!important;
  background:#000!important;
  scroll-behavior:smooth!important;
}
.still-section{
  display:grid!important;
  grid-template-columns:minmax(170px,14vw) 1fr!important;
  gap:5px!important;
  margin:0 0 5px 0!important;
  min-height:clamp(210px,30vh,360px)!important;
}
.still-section-head{
  position:sticky!important;
  top:0!important;
  align-self:start!important;
  min-height:150px!important;
  height:100%!important;
  border:1px solid rgba(255,255,255,.10)!important;
  border-radius:4px!important;
  background:rgba(255,255,255,.025)!important;
  color:rgba(255,255,255,.62)!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:space-between!important;
  text-align:left!important;
  padding:10px!important;
  overflow:hidden!important;
}
.still-section-head span{font-size:10px!important;color:rgba(255,255,255,.34)!important;}
.still-section-head strong{font-size:clamp(18px,2vw,36px)!important;line-height:.86!important;letter-spacing:-.075em!important;font-weight:500!important;color:rgba(255,255,255,.82)!important;}
.still-section-head em{font-style:normal!important;font-size:10px!important;color:rgba(255,255,255,.38)!important;}
.still-section-head:hover{background:rgba(255,255,255,.07)!important;color:#fff!important;border-color:rgba(255,255,255,.24)!important;}
.still-grid{
  display:grid!important;
  grid-template-columns:repeat(6,minmax(95px,1fr))!important;
  grid-auto-rows:clamp(86px,11.5vw,180px)!important;
  grid-auto-flow:dense!important;
  gap:5px!important;
}
.still{
  width:auto!important;
  height:auto!important;
  aspect-ratio:auto!important;
  min-height:0!important;
  border-radius:4px!important;
  background:#020202!important;
  overflow:hidden!important;
  border-color:rgba(255,255,255,.09)!important;
  transform:none!important;
}
.still img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center!important;
  background:#020202!important;
  filter:grayscale(.08) brightness(.94) contrast(1.03)!important;
}
.still.featured{
  grid-column:span 3!important;
  grid-row:span 2!important;
  border-color:rgba(255,255,255,.22)!important;
  filter:none!important;
}
.still.featured img{filter:grayscale(0) brightness(1.05) contrast(1.04)!important;}
.still:nth-child(4n+2){grid-column:span 2!important;}
.still:nth-child(6n+4){grid-row:span 2!important;}
.still:nth-child(9n+6){grid-column:span 2!important;grid-row:span 2!important;}
.still:hover{z-index:5!important;transform:scale(1.01)!important;border-color:rgba(255,255,255,.34)!important;}
.still:hover img{filter:grayscale(0) brightness(1.10) contrast(1.04)!important;transform:scale(1.015)!important;}
@media(max-width:900px){
  .still-section{grid-template-columns:1fr!important;gap:4px!important;margin-bottom:14px!important;}
  .still-section-head{position:relative!important;height:auto!important;min-height:76px!important;}
  .still-grid{grid-template-columns:repeat(2,1fr)!important;grid-auto-rows:150px!important;gap:4px!important;}
  .still.featured{grid-column:span 2!important;grid-row:span 2!important;}
  .still:nth-child(n){grid-column:auto!important;grid-row:auto!important;}
  .still.featured{grid-column:span 2!important;grid-row:span 2!important;}
}


/* V27 — stills cleanup + full-screen still viewer + Guillemette local excerpt. */
.local-video-shell video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  background:#000;
}
.still-lightbox{
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
  max-width:none;
  max-height:none;
  border:0;
  padding:0;
  margin:0;
  background:rgba(0,0,0,.94);
  color:#fff;
  overflow:hidden;
  z-index:80;
  cursor:auto!important;
}
.still-lightbox::backdrop{background:rgba(0,0,0,.88);}
.still-lightbox img{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  max-width:94vw;
  max-height:92vh;
  width:auto;
  height:auto;
  object-fit:contain;
  background:#000;
  box-shadow:0 0 0 1px rgba(255,255,255,.10), 0 28px 90px rgba(0,0,0,.75);
}
.still-lightbox .close{
  position:fixed!important;
  right:16px!important;
  top:16px!important;
  z-index:85!important;
}
.still{cursor:pointer!important;}
.still-section-head{cursor:pointer!important;}
.studio-copy p{
  font-size:clamp(26px,4.55vw,82px)!important;
  line-height:.88!important;
  font-weight:700!important;
}
@media(max-width:820px){
  .still-lightbox .close{top:18px!important;right:12px!important;}
  .still-lightbox img{max-width:96vw;max-height:86vh;}
}


/* V28 studio fighters animation */
.fighters-object{border-radius:0;overflow:hidden;background:#000;aspect-ratio:1/1;animation:fightersFloat 5.5s cubic-bezier(.16,1,.3,1) infinite !important;filter:none !important;opacity:.95 !important;}
.fighters-object video{width:100%;height:100%;object-fit:contain;display:block;mix-blend-mode:screen;filter:brightness(1.18) contrast(1.12);animation:fightersPulse 2.4s ease-in-out infinite alternate !important;will-change:transform,filter,opacity;}
.fighters-object::before,.fighters-object::after{display:none !important;}
@keyframes fightersFloat{0%,100%{transform:translate3d(0,0,0) scale(.985)}40%{transform:translate3d(0,-10px,0) scale(1.015)}70%{transform:translate3d(0,5px,0) scale(.998)}}
@keyframes fightersPulse{0%{opacity:.72;transform:scale(.965);filter:brightness(.92) contrast(1.05)}100%{opacity:1;transform:scale(1.025);filter:brightness(1.38) contrast(1.22)}}

/* V29: cleaned stills page — fewer duplicates, structured per project but more organic. */
.still-section.compact .still-grid{
  grid-template-columns:repeat(5,minmax(110px,1fr))!important;
  grid-auto-rows:clamp(96px,12vw,190px)!important;
}
.still-section.compact .still.featured{
  grid-column:span 3!important;
  grid-row:span 2!important;
}
.still-section.compact .still:nth-child(2){grid-column:span 2!important;grid-row:span 1!important;}
.still-section.compact .still:nth-child(3){grid-column:span 2!important;grid-row:span 2!important;}
.still-section.compact .still:nth-child(4){grid-column:span 3!important;grid-row:span 1!important;}
.still-section.compact .still:nth-child(5){grid-column:span 2!important;grid-row:span 1!important;}
.stills-board .still-grid{align-items:stretch!important;}
.stills-board .still img{will-change:filter,transform!important;}

/* V30 — cleaner page-1 entry, bigger project rectangles, denser background stills, more organic stills page. */
body[data-route="home"] .topbar{
  opacity:0!important;
  transform:translateY(-18px)!important;
  pointer-events:none!important;
}
.topbar{
  transition:opacity .55s var(--ease), transform .55s var(--ease)!important;
}
body:not([data-route="home"]) .topbar{
  opacity:1!important;
  transform:translateY(0)!important;
  pointer-events:auto!important;
}
.view-home .landing-enter{
  opacity:.42!important;
}

/* bigger horizontal project cards on page 2 */
.card{
  width:clamp(345px,32vw,575px)!important;
  aspect-ratio:16/9!important;
  box-shadow:0 28px 110px rgba(0,0,0,.78)!important;
}
.card::before{
  filter:contrast(1.04) saturate(.98) brightness(1)!important;
}
.card:hover::before{
  transform:scale(1.035)!important;
  filter:contrast(1.06) saturate(1.08) brightness(1.10)!important;
}
.card .meta{
  font-size:10px!important;
  opacity:.56!important;
}

/* more visible second-plan stills, frame moves but image stays locked and not de-cropped */
.floating-layer{
  opacity:1!important;
}
.float-still{
  width:clamp(145px,12vw,255px)!important;
  aspect-ratio:16/9!important;
  background:#000!important;
  border-color:rgba(255,255,255,.13)!important;
  opacity:.34;
  filter:grayscale(.05) brightness(1.02) contrast(1.02)!important;
  box-shadow:0 18px 58px rgba(0,0,0,.36)!important;
}
.float-still .float-inner{
  background-size:contain!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
  transform:none!important;
  animation:none!important;
}
.float-still:hover{
  opacity:.82!important;
  filter:grayscale(0) brightness(1.08) contrast(1.03)!important;
}

/* Stills: compact by project, organic but structured, with controlled recrops. */
.stills-board{
  inset:78px 4px 6px 4px!important;
  padding:0 0 10vh!important;
  background:#000!important;
}
.still-section{
  grid-template-columns:minmax(118px,10vw) 1fr!important;
  gap:4px!important;
  margin-bottom:4px!important;
  min-height:clamp(230px,32vh,390px)!important;
}
.still-section-head{
  min-height:100%!important;
  padding:8px!important;
  background:rgba(255,255,255,.018)!important;
  border-color:rgba(255,255,255,.075)!important;
}
.still-section-head strong{
  font-size:clamp(15px,1.45vw,28px)!important;
  letter-spacing:-.07em!important;
}
.still-section-head em,.still-section-head span{
  font-size:9px!important;
}
.still-grid{
  grid-template-columns:repeat(8,minmax(78px,1fr))!important;
  grid-auto-rows:clamp(72px,8.8vw,150px)!important;
  gap:4px!important;
}
.still{
  border-radius:3px!important;
  background:#000!important;
  border-color:rgba(255,255,255,.075)!important;
}
.still img{
  object-fit:cover!important;
  object-position:center!important;
  filter:grayscale(.05) brightness(.98) contrast(1.025)!important;
}
.still.featured{
  grid-column:span 4!important;
  grid-row:span 3!important;
}
.still.featured img{
  object-fit:cover!important;
  filter:grayscale(0) brightness(1.05) contrast(1.035)!important;
}
.still:nth-child(2){grid-column:span 2!important;grid-row:span 2!important;}
.still:nth-child(3){grid-column:span 2!important;grid-row:span 1!important;}
.still:nth-child(4){grid-column:span 3!important;grid-row:span 2!important;}
.still:nth-child(5){grid-column:span 2!important;grid-row:span 2!important;}
.still:nth-child(6){grid-column:span 3!important;grid-row:span 1!important;}
.still:nth-child(7){grid-column:span 2!important;grid-row:span 2!important;}
.still:nth-child(3n) img{object-position:50% 38%!important;}
.still:nth-child(4n) img{object-position:42% 50%!important;}
.still:nth-child(5n) img{object-position:58% 52%!important;}
.still:nth-child(7n) img{object-position:50% 62%!important;}
.still:hover img{
  filter:grayscale(0) brightness(1.12) contrast(1.04)!important;
  transform:scale(1.018)!important;
}
.still-section.compact .still-grid{
  grid-template-columns:repeat(8,minmax(78px,1fr))!important;
  grid-auto-rows:clamp(76px,9vw,150px)!important;
}
.still-section.compact .still.featured{grid-column:span 4!important;grid-row:span 3!important;}
.still-section.compact .still:nth-child(2){grid-column:span 2!important;grid-row:span 2!important;}
.still-section.compact .still:nth-child(3){grid-column:span 2!important;grid-row:span 2!important;}
.still-section.compact .still:nth-child(4){grid-column:span 4!important;grid-row:span 1!important;}
.still-section.compact .still:nth-child(5){grid-column:span 3!important;grid-row:span 2!important;}

@media(max-width:900px){
  .topbar{top:6px!important;left:6px!important;right:6px!important;}
  .card{width:clamp(300px,84vw,520px)!important;}
  .still-section{grid-template-columns:1fr!important;gap:3px!important;}
  .still-grid,.still-section.compact .still-grid{grid-template-columns:repeat(2,1fr)!important;grid-auto-rows:145px!important;gap:3px!important;}
  .still:nth-child(n),.still.featured,.still-section.compact .still:nth-child(n),.still-section.compact .still.featured{grid-column:auto!important;grid-row:auto!important;}
  .still.featured,.still-section.compact .still.featured{grid-column:span 2!important;grid-row:span 2!important;}
}

/* V31 — homepage identity moved from center to top-left */
.view-home .landing-mark{
  left:14px!important;
  top:14px!important;
  transform:none!important;
  text-align:left!important;
  z-index:8!important;
  mix-blend-mode:normal!important;
}
.view-home .landing-mark h1{
  margin:0!important;
  font-family:Arial, Helvetica, sans-serif!important;
  font-size:clamp(13px,1.05vw,18px)!important;
  line-height:1!important;
  font-weight:500!important;
  letter-spacing:-.025em!important;
  color:rgba(255,255,255,.78)!important;
  text-transform:lowercase!important;
}
.view-home .landing-mark p{
  margin:2px 0 0!important;
  font-size:clamp(8px,.58vw,10px)!important;
  line-height:1!important;
  font-weight:400!important;
  letter-spacing:.04em!important;
  color:rgba(255,255,255,.48)!important;
  text-transform:lowercase!important;
}


/* V32 — requested refinements: centered minimal identity on page 2, denser background stills, solid project cards, fixed index. */
.identity-lockup{
  top:86px!important;
  left:50%!important;
  transform:translateX(-50%)!important;
  text-align:center!important;
  font-family:Arial, Helvetica, sans-serif!important;
}
.identity-lockup h1{
  margin:0!important;
  font-size:clamp(13px,1.05vw,18px)!important;
  line-height:1!important;
  font-weight:500!important;
  letter-spacing:-.025em!important;
  color:rgba(255,255,255,.78)!important;
  text-transform:lowercase!important;
}
.identity-lockup p{
  margin:2px 0 0!important;
  font-size:clamp(8px,.58vw,10px)!important;
  line-height:1!important;
  font-weight:400!important;
  letter-spacing:.04em!important;
  color:rgba(255,255,255,.48)!important;
  text-transform:lowercase!important;
}
.card{
  opacity:1!important;
  background:#000!important;
  border-color:rgba(255,255,255,.18)!important;
}
.card::before{
  opacity:1!important;
  filter:contrast(1.04) saturate(1) brightness(1.02)!important;
}
.card:hover::before{
  opacity:1!important;
}
.floating-layer{
  z-index:2!important;
}
.float-still{
  width:clamp(150px,13.6vw,300px)!important;
  opacity:.38!important;
  border-color:rgba(255,255,255,.12)!important;
  filter:grayscale(.04) brightness(1.04) contrast(1.02)!important;
}
.float-still:nth-child(3n){width:clamp(175px,15vw,330px)!important;}
.float-still:nth-child(5n){width:clamp(120px,11vw,245px)!important;}
.index-panel.open{
  opacity:1!important;
  pointer-events:auto!important;
  transform:none!important;
}
#indexBtn,.index-row{pointer-events:auto!important;}


/* V33 — hard fix for Index panel clicks/visibility */
.bottom-switch{
  z-index:220!important;
  pointer-events:auto!important;
}
#overviewBtn,#indexBtn{
  position:relative!important;
  z-index:222!important;
  pointer-events:auto!important;
  user-select:none!important;
}
.index-panel{
  z-index:219!important;
  visibility:hidden;
}
.index-panel.open,
.index-panel.is-open{
  opacity:1!important;
  pointer-events:auto!important;
  transform:translate3d(0,0,0)!important;
  visibility:visible!important;
}
.index-list,.index-row{
  pointer-events:auto!important;
}
.index-row{
  cursor:pointer!important;
}

/* V34 — dense non-overlapping bouncing background stills on projects page */
.view-projects .floating-layer{
  inset:0!important;
  z-index:2!important;
  opacity:1!important;
  pointer-events:none!important;
}
.view-projects .float-still{
  position:absolute!important;
  aspect-ratio:auto!important;
  border-radius:3px!important;
  border:1px solid rgba(255,255,255,.105)!important;
  background:#000!important;
  overflow:hidden!important;
  box-shadow:0 10px 42px rgba(0,0,0,.32)!important;
  filter:grayscale(.04) brightness(1.04) contrast(1.02)!important;
  pointer-events:auto!important;
  animation:none!important;
  transition:opacity .18s linear, filter .24s var(--ease), border-color .24s var(--ease)!important;
  will-change:transform,opacity!important;
}
.view-projects .float-still .float-inner{
  position:absolute!important;
  inset:0!important;
  display:block!important;
  background-color:#000!important;
  background-image:var(--img)!important;
  background-size:contain!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
  animation:none!important;
  transform:none!important;
}
.view-projects .float-still:hover{
  opacity:.90!important;
  z-index:3!important;
  border-color:rgba(255,255,255,.34)!important;
  filter:grayscale(0) brightness(1.12) contrast(1.04)!important;
}
.view-projects .card{
  z-index:5!important;
}

/* V35 — centered stronger enter button + Versus Machines contact */
.view-home .landing-enter{
  position:fixed!important;
  left:50%!important;
  right:auto!important;
  bottom:34px!important;
  transform:translateX(-50%)!important;
  z-index:40!important;
  opacity:1!important;
  padding:17px 28px!important;
  border-radius:999px!important;
  border:1px solid rgba(255,255,255,.42)!important;
  background:rgba(0,0,0,.70)!important;
  color:rgba(255,255,255,.94)!important;
  box-shadow:0 0 0 1px rgba(255,255,255,.08), 0 18px 70px rgba(0,0,0,.62)!important;
  backdrop-filter:blur(18px)!important;
  text-transform:uppercase!important;
  letter-spacing:.03em!important;
}
.view-home .landing-enter::after{
  content:"";
  position:absolute;
  inset:-8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  pointer-events:none;
  animation:enterPulse 2.4s ease-in-out infinite;
}
.view-home .landing-enter:hover{
  background:rgba(255,255,255,.92)!important;
  color:#000!important;
  border-color:#fff!important;
}
@keyframes enterPulse{
  0%,100%{opacity:.18;transform:scale(.98)}
  50%{opacity:.48;transform:scale(1.06)}
}
@media(max-width:760px){
  .view-home .landing-enter{bottom:26px!important;padding:15px 22px!important;font-size:12px!important;}
}


/* V36 — About tab + project CTA inside full-screen still viewer */
.still-enter-project{
  position:fixed;
  left:50%;
  bottom:26px;
  transform:translateX(-50%);
  z-index:86;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:170px;
  min-height:42px;
  padding:12px 22px;
  border:1px solid rgba(255,255,255,.54);
  border-radius:999px;
  background:rgba(0,0,0,.48);
  color:#fff;
  font:600 11px/1 var(--font, Arial, sans-serif);
  letter-spacing:.08em;
  text-transform:uppercase;
  backdrop-filter:blur(12px);
  cursor:pointer!important;
  transition:background .28s var(--ease), color .28s var(--ease), border-color .28s var(--ease), transform .28s var(--ease);
}
.still-enter-project:hover{
  background:#fff;
  color:#000;
  border-color:#fff;
  transform:translateX(-50%) translateY(-2px);
}
@media(max-width:820px){
  .still-enter-project{bottom:18px;min-width:150px;min-height:40px;padding:11px 18px;}
  .still-lightbox img{max-height:82vh!important;}
}

/* V37 — Rich The Kid project + seven-tile homepage grid. */
.landing-grid{
  grid-template-columns:repeat(4,1fr)!important;
  grid-template-rows:repeat(2,1fr)!important;
  gap:4px!important;
}
.clip-tile:nth-child(n){display:block!important;grid-column:auto!important;grid-row:auto!important;}
.clip-tile:nth-child(n+8){display:none!important;}
.clip-tile:nth-child(7){display:block!important;}
@media(max-width:760px){
  .landing-grid{grid-template-columns:1fr!important;grid-template-rows:repeat(7,38vh)!important;overflow:auto!important;}
  .clip-tile:nth-child(n){display:block!important;grid-column:auto!important;grid-row:auto!important;}
  .clip-tile:nth-child(n+8){display:none!important;}
}

/* V38 — denser projects background, alternating rows, cleaner stills */
.view-projects .floating-layer{
  z-index:2!important;
  opacity:.96!important;
}
.view-projects .float-still{
  border-color:rgba(255,255,255,.10)!important;
  border-radius:3px!important;
  background:none!important;
  overflow:hidden!important;
  filter:none!important;
  box-shadow:none!important;
}
.view-projects .float-still .float-inner{
  inset:0!important;
  background-size:cover!important;
  background-position:center!important;
  filter:grayscale(.12) brightness(.88) contrast(1.04)!important;
  transform:none!important;
  animation:none!important;
}
.view-projects .float-still::after{display:none!important;}
.view-projects .card{
  z-index:6!important;
  background:#030303!important;
  opacity:1!important;
  border-color:rgba(255,255,255,.16)!important;
}
.view-projects .card::before{
  opacity:1!important;
  filter:contrast(1.05) saturate(.86) brightness(.98)!important;
}
.view-projects .card:hover::before{filter:contrast(1.06) saturate(1) brightness(1.06)!important;}

#stills .stills-board{
  inset:82px 10px 10px!important;
  display:block!important;
  overflow:auto!important;
  padding-bottom:14vh!important;
}
#stills .still-section{
  display:grid!important;
  grid-template-columns:minmax(160px,18vw) 1fr!important;
  gap:8px!important;
  margin-bottom:10px!important;
}
#stills .still-section-head{
  height:auto!important;
  min-height:190px!important;
  align-self:stretch!important;
  border-radius:5px!important;
  background:rgba(255,255,255,.035)!important;
}
#stills .still-grid{
  display:grid!important;
  grid-template-columns:repeat(8,minmax(0,1fr))!important;
  grid-auto-rows:94px!important;
  grid-auto-flow:dense!important;
  gap:5px!important;
}
#stills .still{
  min-height:0!important;
  border-radius:4px!important;
  background:#050505!important;
  overflow:hidden!important;
}
#stills .still img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  filter:grayscale(.10) brightness(.92) contrast(1.04)!important;
}
#stills .still.featured{
  grid-column:span 4!important;
  grid-row:span 3!important;
}
#stills .still:nth-child(2){grid-column:span 3!important;grid-row:span 2!important;}
#stills .still:nth-child(3){grid-column:span 2!important;grid-row:span 2!important;}
#stills .still:nth-child(4){grid-column:span 3!important;grid-row:span 3!important;}
#stills .still:nth-child(5){grid-column:span 2!important;grid-row:span 2!important;}
#stills .still:nth-child(6){grid-column:span 3!important;grid-row:span 2!important;}
#stills .still:nth-child(7){grid-column:span 2!important;grid-row:span 3!important;}
#stills .still:nth-child(3n) img{object-position:50% 42%!important;}
#stills .still:nth-child(4n) img{object-position:45% 50%!important;}
#stills .still:nth-child(5n) img{object-position:58% 52%!important;}
#stills .still:nth-child(7n) img{object-position:50% 60%!important;}
#stills .still:hover img{filter:grayscale(0) brightness(1.08) contrast(1.04)!important; transform:scale(1.012)!important;}
@media(max-width:820px){
  #stills .still-section{grid-template-columns:1fr!important;gap:5px!important;}
  #stills .still-section-head{min-height:72px!important;}
  #stills .still-grid{grid-template-columns:repeat(2,1fr)!important;grid-auto-rows:150px!important;}
  #stills .still:nth-child(n){grid-column:span 1!important;grid-row:span 1!important;}
  #stills .still.featured{grid-column:span 2!important;grid-row:span 2!important;}
}

/* V39 — page 1 full-frame grid with no black empty tile + project background stills kept inside their cells. */
body[data-route="home"] .view-home{
  background:#000!important;
}
body[data-route="home"] .landing-grid{
  position:absolute!important;
  inset:0!important;
  display:grid!important;
  grid-template-columns:repeat(4,1fr)!important;
  grid-template-rows:repeat(2,1fr)!important;
  gap:3px!important;
  padding:0!important;
  background:#000!important;
  opacity:1!important;
}
body[data-route="home"] .clip-tile{
  display:block!important;
  min-width:0!important;
  min-height:0!important;
  grid-column:auto!important;
  grid-row:auto!important;
  border:0!important;
  border-radius:0!important;
  overflow:hidden!important;
  background:#000 var(--poster) center/cover no-repeat!important;
  opacity:1!important;
}
body[data-route="home"] .clip-tile:nth-child(1){grid-column:1 / 2!important;grid-row:1 / 2!important;}
body[data-route="home"] .clip-tile:nth-child(2){grid-column:2 / 3!important;grid-row:1 / 2!important;}
body[data-route="home"] .clip-tile:nth-child(3){grid-column:3 / 4!important;grid-row:1 / 2!important;}
body[data-route="home"] .clip-tile:nth-child(4){grid-column:4 / 5!important;grid-row:1 / 2!important;}
body[data-route="home"] .clip-tile:nth-child(5){grid-column:1 / 2!important;grid-row:2 / 3!important;}
body[data-route="home"] .clip-tile:nth-child(6){grid-column:2 / 3!important;grid-row:2 / 3!important;}
body[data-route="home"] .clip-tile:nth-child(7){grid-column:3 / 5!important;grid-row:2 / 3!important;}
body[data-route="home"] .clip-tile:nth-child(n+8){display:none!important;}
body[data-route="home"] .clip-tile img,
body[data-route="home"] .clip-tile video,
body[data-route="home"] .clip-tile .clip-fallback{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center!important;
  transform:none!important;
  animation:clipMotionSoft 12s ease-in-out infinite alternate!important;
  background:#000!important;
}
body[data-route="home"] .clip-tile video{
  z-index:2!important;
}
body[data-route="home"] .clip-tile .clip-fallback{
  z-index:1!important;
  display:block!important;
}
body[data-route="home"] .clip-tile.video-failed video{
  display:none!important;
}
body[data-route="home"] .clip-tile::before{
  opacity:.035!important;
}
body[data-route="home"] .landing-scrim{
  background:radial-gradient(circle at 50% 50%,rgba(0,0,0,0),rgba(0,0,0,.04) 62%,rgba(0,0,0,.15) 100%)!important;
}
body[data-route="home"] .landing-mark{
  left:14px!important;
  top:14px!important;
  transform:none!important;
}
@media(max-width:760px){
  body[data-route="home"] .landing-grid{
    grid-template-columns:1fr!important;
    grid-template-rows:repeat(7,38vh)!important;
    gap:3px!important;
    overflow:auto!important;
  }
  body[data-route="home"] .clip-tile:nth-child(n){grid-column:auto!important;grid-row:auto!important;display:block!important;}
}

/* Page 2 background stills: no visual overlap, every still contained inside its own moving cell. */
.view-projects .floating-layer{
  overflow:hidden!important;
  pointer-events:none!important;
}
.view-projects .float-still{
  box-sizing:border-box!important;
  overflow:hidden!important;
  border-radius:3px!important;
  background:#000!important;
  pointer-events:auto!important;
  border:1px solid rgba(255,255,255,.09)!important;
  opacity:.56!important;
  box-shadow:none!important;
}
.view-projects .float-still .float-inner{
  inset:0!important;
  width:100%!important;
  height:100%!important;
  background-color:#000!important;
  background-image:var(--img)!important;
  background-size:cover!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
  transform:none!important;
  animation:none!important;
  filter:grayscale(.08) brightness(.94) contrast(1.02)!important;
}
.view-projects .float-still:hover{
  opacity:.86!important;
}

/* V46 — back to V39 visual base, stable non-overlapping project-page background stills. */
.float-still{
  animation:none!important;
  aspect-ratio:auto!important;
  background-size:cover!important;
  background-position:center!important;
  transition:opacity .25s ease, filter .25s ease, border .25s ease!important;
  will-change:transform!important;
  box-shadow:0 10px 34px rgba(0,0,0,.32)!important;
}
.float-still::after{display:none!important;}
.float-still:hover{z-index:3!important;}

/* V47 — restore home black name bar, and make project-page background stills visible again. */
body[data-route="home"] .view-home::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:70px;
  background:#000;
  z-index:7;
  pointer-events:none;
}
body[data-route="home"] .landing-mark{
  left:14px!important;
  top:14px!important;
  transform:none!important;
  text-align:left!important;
  z-index:9!important;
}
body[data-route="home"] .landing-mark h1{
  color:rgba(255,255,255,.82)!important;
}
body[data-route="home"] .landing-mark p{
  color:rgba(255,255,255,.55)!important;
}
body[data-route="home"] .landing-grid{
  padding-top:70px!important;
}

/* The page-2 background uses .float-inner; keep the frame fixed and visible. */
.view-projects .floating-layer{
  z-index:2!important;
  opacity:1!important;
  pointer-events:auto!important;
}
.view-projects .float-still{
  display:block!important;
  visibility:visible!important;
  background:#000!important;
  overflow:hidden!important;
  opacity:.58!important;
  border:1px solid rgba(255,255,255,.10)!important;
  border-radius:3px!important;
  box-shadow:0 10px 30px rgba(0,0,0,.22)!important;
  pointer-events:auto!important;
}
.view-projects .float-still .float-inner{
  display:block!important;
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  background-color:#000!important;
  background-image:var(--img)!important;
  background-size:cover!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
  filter:grayscale(.06) brightness(.96) contrast(1.02)!important;
  transform:none!important;
  animation:none!important;
}
.view-projects .float-still:hover{opacity:.86!important;}

/* V48 — final containment: page-2 background stills cannot overlap visually. */
.view-projects .floating-layer{
  overflow:hidden!important;
  pointer-events:none!important;
  z-index:2!important;
  contain:layout paint!important;
}
.view-projects .float-still{
  position:absolute!important;
  left:0!important;
  top:0!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
  aspect-ratio:auto!important;
  border-radius:3px!important;
  border:1px solid rgba(255,255,255,.10)!important;
  background:#000!important;
  opacity:.58!important;
  pointer-events:auto!important;
  box-shadow:0 8px 22px rgba(0,0,0,.24)!important;
  animation:none!important;
  will-change:transform!important;
}
.view-projects .float-still .float-inner{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  display:block!important;
  background-color:#000!important;
  background-image:var(--img)!important;
  background-size:cover!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
  transform:none!important;
  animation:none!important;
  filter:grayscale(.06) brightness(.96) contrast(1.02)!important;
}
.view-projects .float-still::after{display:none!important;}
.view-projects .card{z-index:6!important;}
.view-home .landing-enter{
  pointer-events:auto!important;
  cursor:pointer!important;
  z-index:80!important;
}


/* V49 — fullscreen intro gate */
.intro-gate{
  position:fixed;
  inset:0;
  z-index:9998;
  background:#000;
  overflow:hidden;
  opacity:1;
  visibility:visible;
  transition:opacity .75s cubic-bezier(.16,1,.3,1), visibility .75s;
}
.intro-gate.is-hidden{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
.intro-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  filter:brightness(.86) contrast(1.05) saturate(.92);
  transform:scale(1.01);
}
.intro-shade{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(to bottom,rgba(0,0,0,.34),rgba(0,0,0,.02) 42%,rgba(0,0,0,.48)),
    radial-gradient(circle at 50% 50%,rgba(0,0,0,0) 0 46%,rgba(0,0,0,.38) 100%);
}
.intro-brand{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  text-align:center;
  pointer-events:none;
  mix-blend-mode:difference;
}
.intro-brand h1{
  margin:0;
  font-size:clamp(22px,4vw,58px);
  line-height:.86;
  letter-spacing:-.065em;
  font-weight:500;
  color:#fff;
}
.intro-brand p{
  margin:8px 0 0;
  font-size:clamp(8px,.72vw,11px);
  letter-spacing:.18em;
  font-weight:400;
  color:rgba(255,255,255,.82);
}
.intro-enter{
  position:absolute;
  left:50%;
  bottom:24px;
  transform:translateX(-50%);
  z-index:2;
  min-width:132px;
  padding:15px 24px;
  border:1px solid rgba(255,255,255,.42);
  border-radius:999px;
  background:rgba(0,0,0,.46);
  color:#fff;
  backdrop-filter:blur(18px);
  letter-spacing:.08em;
  font-size:11px;
  transition:background .25s var(--ease), color .25s var(--ease), border .25s var(--ease), transform .25s var(--ease);
}
.intro-enter:hover{
  background:#fff;
  color:#000;
  border-color:#fff;
  transform:translateX(-50%) scale(1.035);
}
body.intro-active .topbar,
body.intro-active .landing-enter{
  pointer-events:none;
}
body.intro-active{overflow:hidden;}
@media(max-width:760px){
  .intro-brand h1{font-size:clamp(24px,10vw,52px)}
  .intro-enter{bottom:18px;padding:14px 22px;}
}

/* V50 — cleaner intro, reliable enter button, smooth non-overlapping page-2 stills */
.intro-video{filter:none!important;transform:scale(1.005)!important;}
.intro-shade{background:linear-gradient(to bottom,rgba(0,0,0,.10),rgba(0,0,0,.12) 55%,rgba(0,0,0,.24))!important;}
.intro-brand h1{font-weight:500!important;letter-spacing:-.055em!important;}
.intro-brand p{font-weight:400!important;letter-spacing:.16em!important;}
.view-home .landing-enter,
.landing-enter{
  z-index:120!important;
  pointer-events:auto!important;
  left:50%!important;
  right:auto!important;
  bottom:24px!important;
  transform:translateX(-50%)!important;
}
.landing-grid{z-index:1!important;}
.landing-scrim{z-index:2!important;}
.landing-mark{z-index:4!important;}

#projects .floating-layer{
  z-index:2!important;
  pointer-events:none!important;
  overflow:hidden!important;
  contain:layout paint!important;
}
#projects .floating-layer .float-row{
  position:absolute!important;
  left:0!important;
  display:flex!important;
  flex-wrap:nowrap!important;
  gap:var(--row-gap,14px)!important;
  height:var(--row-h,92px)!important;
  will-change:transform!important;
  pointer-events:auto!important;
  transform:translate3d(0,0,0);
}
#projects .floating-layer .float-row .float-still{
  position:relative!important;
  left:auto!important;
  top:auto!important;
  flex:0 0 var(--row-w,150px)!important;
  width:var(--row-w,150px)!important;
  height:var(--row-h,92px)!important;
  aspect-ratio:auto!important;
  transform:none!important;
  translate:none!important;
  rotate:0deg!important;
  animation:none!important;
  opacity:.58!important;
  border-radius:4px!important;
  overflow:hidden!important;
  background:#050505!important;
  pointer-events:auto!important;
  filter:none!important;
}
#projects .floating-layer .float-row .float-still .float-inner{
  position:absolute!important;
  inset:0!important;
  display:block!important;
  background:var(--img) center/cover no-repeat!important;
  transform:none!important;
  animation:none!important;
  filter:brightness(.74) contrast(1.05) grayscale(.16)!important;
  transition:filter .25s ease, transform .25s ease!important;
}
#projects .floating-layer .float-row .float-still:hover .float-inner{
  filter:brightness(.98) contrast(1.03) grayscale(0)!important;
}
#projects .floating-layer .float-row .float-still::after{display:none!important;}

/* V51 PATCH — the Enter Projects button must sit above every home tile and never trigger a tile click. */
.landing-enter{
  z-index:99999!important;
  pointer-events:auto!important;
  isolation:isolate!important;
}
.landing-grid{z-index:1!important;}
.landing-scrim,.landing-mark{pointer-events:none!important;}
.clip-tile video,.clip-tile .clip-fallback{pointer-events:none!important;}

/* V52 PATCH — keep home Enter Projects above the mosaic, and make the route target unambiguous. */
#enterProjectsBtn.landing-enter,
.view-home #enterProjectsBtn{
  position:fixed!important;
  left:50%!important;
  right:auto!important;
  bottom:24px!important;
  transform:translateX(-50%)!important;
  z-index:2147483647!important;
  pointer-events:auto!important;
  isolation:isolate!important;
}
#home .landing-grid{z-index:1!important;pointer-events:auto!important;}
#home .clip-tile video,
#home .clip-tile img{pointer-events:none!important;}
#home .landing-scrim,
#home .landing-mark{pointer-events:none!important;}

/* V54 — exact clean homepage layout matching the user's labelled reference image. */
body[data-route="home"] .landing-grid{
  display:grid!important;
  grid-template-columns:repeat(4,1fr)!important;
  grid-template-rows:repeat(2,1fr)!important;
  gap:3px!important;
  padding:70px 0 0 0!important;
  background:#000!important;
}
body[data-route="home"] .clip-tile.home-tile-v54:nth-child(1){grid-column:1 / 2!important;grid-row:1 / 2!important;} /* rich */
body[data-route="home"] .clip-tile.home-tile-v54:nth-child(2){grid-column:2 / 3!important;grid-row:1 / 2!important;} /* mascotte */
body[data-route="home"] .clip-tile.home-tile-v54:nth-child(3){grid-column:3 / 4!important;grid-row:1 / 2!important;} /* kema */
body[data-route="home"] .clip-tile.home-tile-v54:nth-child(4){grid-column:4 / 5!important;grid-row:1 / 2!important;} /* guillemette */
body[data-route="home"] .clip-tile.home-tile-v54:nth-child(5){grid-column:1 / 2!important;grid-row:2 / 3!important;} /* pqcv */
body[data-route="home"] .clip-tile.home-tile-v54:nth-child(6){grid-column:2 / 3!important;grid-row:2 / 3!important;} /* leib */
body[data-route="home"] .clip-tile.home-tile-v54:nth-child(7){grid-column:3 / 5!important;grid-row:2 / 3!important;} /* lesram */
body[data-route="home"] .clip-tile.home-tile-v54:nth-child(n+8){display:none!important;}
body[data-route="home"] .clip-tile.home-tile-v54{
  position:relative!important;
  overflow:hidden!important;
  background:#000 var(--poster) center/cover no-repeat!important;
  opacity:1!important;
  cursor:pointer!important;
}
body[data-route="home"] .clip-tile.home-tile-v54 video,
body[data-route="home"] .clip-tile.home-tile-v54 .clip-fallback{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center!important;
  pointer-events:none!important;
}
body[data-route="home"] .clip-tile.home-tile-v54[data-project-slug="kema-batman"] video,
body[data-route="home"] .clip-tile.home-tile-v54[data-project-slug="kema-batman"] .clip-fallback{
  transform:scale(1.16)!important;
}
body[data-route="home"] .clip-tile.home-tile-v54::after{
  display:none!important;
  content:""!important;
}

/* V55 — hard visual/click mapping of the homepage mosaic from the user's labelled reference. */
body[data-route="home"] #landingGrid.landing-grid{
  display:grid!important;
  grid-template-columns:repeat(4,1fr)!important;
  grid-template-rows:repeat(2,1fr)!important;
  gap:3px!important;
  padding:70px 0 0 0!important;
  background:#000!important;
}
body[data-route="home"] #landingGrid .clip-tile.home-tile-v55{
  display:block!important;
  position:relative!important;
  min-width:0!important;
  min-height:0!important;
  overflow:hidden!important;
  opacity:1!important;
  background:#000 var(--poster) center/cover no-repeat!important;
  pointer-events:auto!important;
  cursor:pointer!important;
}
body[data-route="home"] #landingGrid .clip-tile.home-tile-v55:nth-child(1){grid-column:1 / 2!important;grid-row:1 / 2!important;} /* rich */
body[data-route="home"] #landingGrid .clip-tile.home-tile-v55:nth-child(2){grid-column:2 / 3!important;grid-row:1 / 2!important;} /* mascotte */
body[data-route="home"] #landingGrid .clip-tile.home-tile-v55:nth-child(3){grid-column:3 / 4!important;grid-row:1 / 2!important;} /* kema */
body[data-route="home"] #landingGrid .clip-tile.home-tile-v55:nth-child(4){grid-column:4 / 5!important;grid-row:1 / 2!important;} /* guillemette */
body[data-route="home"] #landingGrid .clip-tile.home-tile-v55:nth-child(5){grid-column:1 / 2!important;grid-row:2 / 3!important;} /* pqcv */
body[data-route="home"] #landingGrid .clip-tile.home-tile-v55:nth-child(6){grid-column:2 / 3!important;grid-row:2 / 3!important;} /* leib */
body[data-route="home"] #landingGrid .clip-tile.home-tile-v55:nth-child(7){grid-column:3 / 5!important;grid-row:2 / 3!important;display:block!important;} /* lesram */
body[data-route="home"] #landingGrid .clip-tile.home-tile-v55:nth-child(n+8){display:none!important;}
body[data-route="home"] #landingGrid .clip-tile.home-tile-v55 video,
body[data-route="home"] #landingGrid .clip-tile.home-tile-v55 .clip-fallback{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center!important;
  display:block!important;
  opacity:1!important;
  pointer-events:none!important;
  visibility:visible!important;
}
body[data-route="home"] #landingGrid .clip-tile.home-tile-v55[data-project-slug="kema-batman"] video,
body[data-route="home"] #landingGrid .clip-tile.home-tile-v55[data-project-slug="kema-batman"] .clip-fallback{
  transform:scale(1.16)!important;
}
body[data-route="home"] #landingGrid .clip-tile.home-tile-v55::after{display:none!important;content:""!important;}

/* V56 CLEAN FIX — hard reset homepage click grid + keep the reference layout. */
body[data-route="home"] #landingGrid{
  display:grid!important;
  grid-template-columns:repeat(4,1fr)!important;
  grid-template-rows:repeat(2,1fr)!important;
  gap:3px!important;
  padding:70px 0 0!important;
  background:#000!important;
  z-index:1!important;
}
body[data-route="home"] #landingGrid .clip-tile.home-tile-v55{
  display:block!important;
  position:relative!important;
  opacity:1!important;
  overflow:hidden!important;
  background:#000 var(--poster) center/cover no-repeat!important;
  pointer-events:auto!important;
}
body[data-route="home"] #landingGrid .clip-tile.home-tile-v55:nth-child(1){grid-column:1/2!important;grid-row:1/2!important;} /* rich the kid */
body[data-route="home"] #landingGrid .clip-tile.home-tile-v55:nth-child(2){grid-column:2/3!important;grid-row:1/2!important;} /* mascotte */
body[data-route="home"] #landingGrid .clip-tile.home-tile-v55:nth-child(3){grid-column:3/4!important;grid-row:1/2!important;} /* Kema */
body[data-route="home"] #landingGrid .clip-tile.home-tile-v55:nth-child(4){grid-column:4/5!important;grid-row:1/2!important;} /* guillemette */
body[data-route="home"] #landingGrid .clip-tile.home-tile-v55:nth-child(5){grid-column:1/2!important;grid-row:2/3!important;} /* PQCV */
body[data-route="home"] #landingGrid .clip-tile.home-tile-v55:nth-child(6){grid-column:2/3!important;grid-row:2/3!important;} /* LEIB */
body[data-route="home"] #landingGrid .clip-tile.home-tile-v55:nth-child(7){grid-column:3/5!important;grid-row:2/3!important;} /* lesram */
body[data-route="home"] #landingGrid .clip-tile.home-tile-v55:nth-child(n+8){display:none!important;}
body[data-route="home"] #landingGrid .clip-tile.home-tile-v55 video,
body[data-route="home"] #landingGrid .clip-tile.home-tile-v55 .clip-fallback{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center!important;
  pointer-events:none!important;
  opacity:1!important;
  display:block!important;
}
body[data-route="home"] #landingGrid .clip-tile.home-tile-v55[data-project-slug="kema-batman"] video,
body[data-route="home"] #landingGrid .clip-tile.home-tile-v55[data-project-slug="kema-batman"] .clip-fallback{transform:scale(1.16)!important;}
body[data-route="home"] #landingGrid .clip-tile.home-tile-v55::after{display:none!important;content:""!important;}
#enterProjectsBtn{z-index:2147483647!important;pointer-events:auto!important;}
#projects .floating-layer .float-row{animation:none!important;}
#projects .floating-layer .float-row .float-still{transform:none!important;}


/* V57 — definitive homepage mapping/click fix.
   The home mosaic is seven explicit hit-zones, matching the labelled reference screenshot.
   Clicking a tile always switches to PROJECTS first, then opens the project modal on page 2. */
body[data-route="home"] #landingGrid{
  display:grid!important;
  grid-template-columns:repeat(4,1fr)!important;
  grid-template-rows:repeat(2,1fr)!important;
  gap:3px!important;
  padding:70px 0 0!important;
  background:#000!important;
  z-index:1!important;
}
body[data-route="home"] #landingGrid .clip-tile.home-tile-v57{
  display:block!important;
  position:relative!important;
  min-width:0!important;
  min-height:0!important;
  overflow:hidden!important;
  opacity:1!important;
  background:#000 var(--poster) center/cover no-repeat!important;
  pointer-events:auto!important;
  cursor:pointer!important;
}
body[data-route="home"] #landingGrid .clip-tile.home-tile-v57:nth-child(1){grid-column:1/2!important;grid-row:1/2!important;} /* rich the kid */
body[data-route="home"] #landingGrid .clip-tile.home-tile-v57:nth-child(2){grid-column:2/3!important;grid-row:1/2!important;} /* mascotte */
body[data-route="home"] #landingGrid .clip-tile.home-tile-v57:nth-child(3){grid-column:3/4!important;grid-row:1/2!important;} /* Kema */
body[data-route="home"] #landingGrid .clip-tile.home-tile-v57:nth-child(4){grid-column:4/5!important;grid-row:1/2!important;} /* guillemette */
body[data-route="home"] #landingGrid .clip-tile.home-tile-v57:nth-child(5){grid-column:1/2!important;grid-row:2/3!important;} /* PQCV */
body[data-route="home"] #landingGrid .clip-tile.home-tile-v57:nth-child(6){grid-column:2/3!important;grid-row:2/3!important;} /* LEIB */
body[data-route="home"] #landingGrid .clip-tile.home-tile-v57:nth-child(7){grid-column:3/5!important;grid-row:2/3!important;} /* lesram */
body[data-route="home"] #landingGrid .clip-tile.home-tile-v57:nth-child(n+8){display:none!important;}
body[data-route="home"] #landingGrid .clip-tile.home-tile-v57 video,
body[data-route="home"] #landingGrid .clip-tile.home-tile-v57 .clip-fallback{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center!important;
  pointer-events:none!important;
  opacity:1!important;
  display:block!important;
  visibility:visible!important;
}
body[data-route="home"] #landingGrid .clip-tile.home-tile-v57[data-project-slug="kema-batman"] video,
body[data-route="home"] #landingGrid .clip-tile.home-tile-v57[data-project-slug="kema-batman"] .clip-fallback{transform:scale(1.16)!important;}
body[data-route="home"] #landingGrid .clip-tile.home-tile-v57::after{display:none!important;content:""!important;}
body:not([data-route="home"]) #home{
  pointer-events:none!important;
}
body[data-route="projects"] #projects{
  opacity:1!important;
  visibility:visible!important;
  transform:none!important;
}


/* V58 — locked homepage mosaic mapping and layout from Jean's reference screenshot */
body[data-route="home"] #landingGrid{
  position:absolute!important;
  left:0!important; right:0!important; bottom:0!important;
  top:76px!important;
  display:grid!important;
  grid-template-columns:repeat(4,1fr)!important;
  grid-template-rows:repeat(2,1fr)!important;
  gap:0!important;
  z-index:2!important;
  overflow:hidden!important;
}
body[data-route="home"] #landingGrid .clip-tile.home-tile-v58{
  display:block!important;
  position:relative!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  border:0!important;
  border-radius:0!important;
  background:#050505 var(--poster) center/cover no-repeat!important;
  overflow:hidden!important;
  cursor:pointer!important;
  isolation:isolate!important;
  pointer-events:auto!important;
}
body[data-route="home"] #landingGrid .clip-tile.home-tile-v58[data-home-slot="1"]{grid-column:1/2!important;grid-row:1/2!important;} /* rich */
body[data-route="home"] #landingGrid .clip-tile.home-tile-v58[data-home-slot="2"]{grid-column:2/3!important;grid-row:1/2!important;} /* mascotte */
body[data-route="home"] #landingGrid .clip-tile.home-tile-v58[data-home-slot="3"]{grid-column:3/4!important;grid-row:1/2!important;} /* kema */
body[data-route="home"] #landingGrid .clip-tile.home-tile-v58[data-home-slot="4"]{grid-column:4/5!important;grid-row:1/2!important;} /* guillemette */
body[data-route="home"] #landingGrid .clip-tile.home-tile-v58[data-home-slot="5"]{grid-column:1/2!important;grid-row:2/3!important;} /* PQCV */
body[data-route="home"] #landingGrid .clip-tile.home-tile-v58[data-home-slot="6"]{grid-column:2/3!important;grid-row:2/3!important;} /* LEIB */
body[data-route="home"] #landingGrid .clip-tile.home-tile-v58[data-home-slot="7"]{grid-column:3/5!important;grid-row:2/3!important;} /* lesram */
body[data-route="home"] #landingGrid .clip-tile.home-tile-v58:nth-child(n+8){display:none!important;}
body[data-route="home"] #landingGrid .clip-tile.home-tile-v58 video,
body[data-route="home"] #landingGrid .clip-tile.home-tile-v58 .clip-fallback{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center!important;
  opacity:1!important;
  visibility:visible!important;
  display:block!important;
  pointer-events:none!important;
  transform:none!important;
}
body[data-route="home"] #landingGrid .clip-tile.home-tile-v58[data-open-slug="kema-batman"] video,
body[data-route="home"] #landingGrid .clip-tile.home-tile-v58[data-open-slug="kema-batman"] .clip-fallback{transform:scale(1.16)!important;}
body[data-route="home"] #landingGrid .clip-tile.home-tile-v58::after{display:none!important;content:""!important;}
body[data-route="home"] #enterProjectsBtn{z-index:30!important;pointer-events:auto!important;}
@media (max-width:760px){
  body[data-route="home"] #landingGrid{top:64px!important;grid-template-columns:1fr 1fr!important;grid-template-rows:repeat(4,34vh)!important;overflow:auto!important;}
  body[data-route="home"] #landingGrid .clip-tile.home-tile-v58[data-home-slot]{grid-column:auto!important;grid-row:auto!important;}
  body[data-route="home"] #landingGrid .clip-tile.home-tile-v58[data-home-slot="7"]{grid-column:1/3!important;}
}

/* V61 — keep previous visual style, add an independent invisible hitmap over the home mosaic.
   This fixes mosaic clicks without touching the old layout, tabs, stills, modals or project pages. */
#landingHitmap{
  position:absolute!important;
  left:0!important;right:0!important;bottom:0!important;top:76px!important;
  display:grid!important;
  grid-template-columns:repeat(4,1fr)!important;
  grid-template-rows:repeat(2,1fr)!important;
  gap:0!important;
  z-index:24!important;
  pointer-events:auto!important;
}
#landingHitmap .landing-hit{
  appearance:none!important;
  border:0!important;
  padding:0!important;
  margin:0!important;
  background:transparent!important;
  color:transparent!important;
  cursor:pointer!important;
  pointer-events:auto!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
}
#landingHitmap .landing-hit[data-slot="1"]{grid-column:1/2!important;grid-row:1/2!important;}
#landingHitmap .landing-hit[data-slot="2"]{grid-column:2/3!important;grid-row:1/2!important;}
#landingHitmap .landing-hit[data-slot="3"]{grid-column:3/4!important;grid-row:1/2!important;}
#landingHitmap .landing-hit[data-slot="4"]{grid-column:4/5!important;grid-row:1/2!important;}
#landingHitmap .landing-hit[data-slot="5"]{grid-column:1/2!important;grid-row:2/3!important;}
#landingHitmap .landing-hit[data-slot="6"]{grid-column:2/3!important;grid-row:2/3!important;}
#landingHitmap .landing-hit[data-slot="7"]{grid-column:3/5!important;grid-row:2/3!important;}
body[data-route="home"] #landingGrid .clip-tile{pointer-events:none!important;}
body[data-route="home"] #enterProjectsBtn{z-index:80!important;pointer-events:auto!important;}
@media (max-width:760px){
  #landingHitmap{top:64px!important;grid-template-columns:1fr 1fr!important;grid-template-rows:repeat(4,34vh)!important;overflow:auto!important;}
  #landingHitmap .landing-hit[data-slot]{grid-column:auto!important;grid-row:auto!important;min-height:34vh!important;}
  #landingHitmap .landing-hit[data-slot="7"]{grid-column:1/3!important;}
}

/* V62 — clean functional mosaic click layer without changing the visual layout */
#landingHitmap{display:none!important;pointer-events:none!important;}
body[data-route="home"] #landingGrid{pointer-events:auto!important;z-index:22!important;}
body[data-route="home"] #landingGrid .clip-tile{pointer-events:auto!important;cursor:pointer!important;}
body[data-route="home"] #landingGrid .clip-tile video,
body[data-route="home"] #landingGrid .clip-tile img,
body[data-route="home"] #landingGrid .clip-fallback{pointer-events:none!important;}
body[data-route="home"] #enterProjectsBtn{z-index:120!important;pointer-events:auto!important;}
body[data-route="home"] .landing-scrim,
body[data-route="home"] .landing-mark{pointer-events:none!important;}


/* V64 — subtle carousel movement after closing a project modal */
.view-projects.carousel-after-close .rail{
  animation: railAfterClose 850ms cubic-bezier(.16,1,.3,1) both;
}
.view-projects.carousel-after-close .card{
  transition: filter .45s cubic-bezier(.16,1,.3,1), opacity .45s cubic-bezier(.16,1,.3,1);
  filter: brightness(.82) contrast(1.05) grayscale(.12);
}
.view-projects.carousel-after-close .card:hover{filter:brightness(1) contrast(1.05)}
@keyframes railAfterClose{
  0%{filter:blur(2px) brightness(.72); transform:scale(.992)}
  55%{filter:blur(.4px) brightness(.9); transform:scale(1.006)}
  100%{filter:none; transform:none}
}
@media (prefers-reduced-motion: reduce){
  .view-projects.carousel-after-close .rail{animation:none!important}
}

/* V65 — accelerated carousel lap on project enter / exit */
.view-projects.carousel-whip .rail{
  animation: railWhip 980ms cubic-bezier(.12,.86,.18,1) both;
  will-change: transform, filter;
}
.view-projects.carousel-whip .card{
  transition: filter .18s linear, opacity .18s linear;
  filter: brightness(.78) contrast(1.14) grayscale(.18);
}
.view-projects.carousel-whip.carousel-after-close .rail{
  animation-duration:1050ms;
}
@keyframes railWhip{
  0%{filter:blur(0) brightness(1); transform:scale(1)}
  18%{filter:blur(2.8px) brightness(.62); transform:scale(.985)}
  52%{filter:blur(5px) brightness(.50); transform:scale(.972)}
  78%{filter:blur(1.6px) brightness(.78); transform:scale(1.006)}
  100%{filter:blur(0) brightness(1); transform:scale(1)}
}
@media (prefers-reduced-motion: reduce){
  .view-projects.carousel-whip .rail{animation:none!important}
}


/* V67 — smoother global animation pass, no layout/visual change. */
:root{ --ease: cubic-bezier(.18,.82,.22,1); }
.rail,
.card,
.clip-tile,
.clip-tile video,
.clip-tile img,
#projects .floating-layer,
#projects .floating-layer .float-row,
#projects .floating-layer .float-row .float-still,
#projects .floating-layer .float-row .float-still .float-inner{
  backface-visibility:hidden!important;
  -webkit-backface-visibility:hidden!important;
  transform-style:preserve-3d!important;
}
.rail{ will-change:transform!important; transform:translateZ(0); }
.card{ will-change:transform,filter,opacity!important; contain:layout paint!important; }
#projects .floating-layer .float-row{
  transition:none!important;
  will-change:transform!important;
  transform:translate3d(0,0,0);
}
#projects .floating-layer .float-row .float-still{
  contain:strict!important;
  box-shadow:0 14px 44px rgba(0,0,0,.38)!important;
}
#projects .floating-layer .float-row .float-still .float-inner{
  will-change:filter!important;
  transform:translateZ(0)!important;
  transition:filter .38s cubic-bezier(.18,.82,.22,1)!important;
}
.view-projects.carousel-whip .rail{
  animation:railWhipSmooth 1120ms cubic-bezier(.16,.78,.2,1) both!important;
}
.view-projects.carousel-whip.carousel-after-close .rail{animation-duration:1180ms!important;}
.view-projects.carousel-whip .card{
  transition:filter .28s linear, opacity .28s linear!important;
  filter:brightness(.84) contrast(1.08) grayscale(.10)!important;
}
@keyframes railWhipSmooth{
  0%{filter:blur(0) brightness(1); transform:translateZ(0) scale(1)}
  24%{filter:blur(1.4px) brightness(.74); transform:translateZ(0) scale(.992)}
  56%{filter:blur(2.4px) brightness(.66); transform:translateZ(0) scale(.986)}
  82%{filter:blur(.7px) brightness(.88); transform:translateZ(0) scale(1.002)}
  100%{filter:blur(0) brightness(1); transform:translateZ(0) scale(1)}
}
.view-projects.carousel-after-close .rail{
  animation:railAfterCloseSmooth 980ms cubic-bezier(.18,.82,.22,1) both!important;
}
@keyframes railAfterCloseSmooth{
  0%{filter:blur(1.2px) brightness(.82); transform:translateZ(0) scale(.996)}
  58%{filter:blur(.35px) brightness(.94); transform:translateZ(0) scale(1.003)}
  100%{filter:none; transform:translateZ(0) scale(1)}
}
@media (prefers-reduced-motion: reduce){
  .view-projects.carousel-whip .rail,
  .view-projects.carousel-after-close .rail{animation:none!important;}
}


/* V69 — intro title pure white, no blend mode */
.intro-brand{mix-blend-mode:normal!important;}
.intro-brand h1,.intro-brand p{color:#fff!important;text-shadow:0 0 18px rgba(0,0,0,.28)!important;}


/* V70 — slimmer home top bar + protected enter-projects button */
body[data-route="home"] .landing-grid{
  padding-top:46px!important;
}
body[data-route="home"] .landing-mark{
  top:8px!important;
  left:10px!important;
  height:32px!important;
  z-index:2147483000!important;
}
body[data-route="home"] .landing-mark h1{
  font-size:15px!important;
  line-height:.9!important;
  letter-spacing:-.045em!important;
}
body[data-route="home"] .landing-mark p{
  margin-top:1px!important;
  font-size:8px!important;
  line-height:1!important;
}
#enterProjectsBtn.landing-enter,
body[data-route="home"] #enterProjectsBtn{
  z-index:2147483647!important;
  pointer-events:auto!important;
  position:fixed!important;
  left:50%!important;
  right:auto!important;
  bottom:22px!important;
  transform:translateX(-50%)!important;
  isolation:isolate!important;
}
body[data-route="home"] #landingGrid{z-index:1!important;}
body[data-route="home"] .landing-scrim,
body[data-route="home"] .landing-mark{pointer-events:none!important;}
@media(max-width:760px){
  body[data-route="home"] .landing-grid{padding-top:44px!important;}
}


/* V71 — intro always exits to home + slimmer home black header */
body[data-route="home"] #landingGrid,
body[data-route="home"] .landing-grid{
  top:38px!important;
  padding-top:0!important;
}
body[data-route="home"] .landing-mark{
  top:5px!important;
  left:9px!important;
  height:26px!important;
  z-index:2147483000!important;
}
body[data-route="home"] .landing-mark h1{
  font-size:13px!important;
  line-height:.86!important;
  letter-spacing:-.04em!important;
}
body[data-route="home"] .landing-mark p{
  margin-top:0!important;
  font-size:7px!important;
  line-height:1!important;
}
body[data-route="home"] .landing-scrim{top:38px!important;}
body.just-left-intro #enterProjectsBtn{pointer-events:none!important;}
@media(max-width:760px){
  body[data-route="home"] #landingGrid,
  body[data-route="home"] .landing-grid{top:36px!important;padding-top:0!important;}
  body[data-route="home"] .landing-mark{top:5px!important;height:24px!important;}
}

/* V72 — remove home mosaic flow, animated project cards, mobile vertical projects. */
.topbar{grid-template-columns:repeat(4,1fr)!important;}
.view-home{display:none!important;}
body[data-route="home"] .view-home{display:none!important;}
body[data-route="projects"] .topbar{opacity:1;visibility:visible;pointer-events:auto;}

/* Foreground projects now use animated clips instead of static thumbnails. */
.card.has-motion-card{background:#000!important;}
.card.has-motion-card::before{display:none!important;}
.card .card-video,
.card .card-fallback{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  pointer-events:none;
  z-index:0;
  filter:contrast(1.04) saturate(.92) brightness(.92);
  transition:filter .55s var(--ease), transform .75s var(--ease);
}
.card .card-video{z-index:1;}
.card .card-fallback{z-index:0;}
.card.has-motion-card:hover .card-video,
.card.has-motion-card:hover .card-fallback{filter:contrast(1.06) saturate(1) brightness(1.04);transform:scale(1.045);}
.card .meta{z-index:3!important;}
.card::after{z-index:3!important;}

/* Less repaint cost on the project background. */
#projects .floating-layer .float-row{transform:translate3d(0,0,0);backface-visibility:hidden;}
#projects .floating-layer .float-row .float-still{contain:paint;}

@media(max-width:760px){
  html,body{overflow:auto!important;height:auto!important;cursor:auto!important;}
  main,.view{position:static!important;inset:auto!important;min-height:100vh;}
  .view{display:none!important;opacity:1!important;visibility:visible!important;transform:none!important;transition:none!important;}
  .view.is-visible{display:block!important;}
  .cursor{display:none!important;}
  .topbar{
    position:fixed!important;
    top:8px!important;left:8px!important;right:8px!important;height:48px!important;
    grid-template-columns:repeat(4,1fr)!important;
    gap:4px!important;
    z-index:60!important;
  }
  .nav-card{border-radius:8px!important;padding:0 8px!important;font-size:10px!important;}
  .nav-card span{transform:translateY(14px)!important;}
  .nav-card.active span,.nav-card:hover span{transform:translateY(0)!important;}

  /* Page 2 becomes a vertical scroll page on phone. */
  #projects.view-projects{min-height:100vh!important;height:auto!important;overflow:visible!important;background:#000!important;}
  .identity-lockup{position:relative!important;top:auto!important;left:auto!important;transform:none!important;text-align:center!important;padding:78px 0 16px!important;z-index:5!important;}
  .project-stage{position:relative!important;inset:auto!important;min-height:0!important;height:auto!important;overflow:visible!important;touch-action:pan-y!important;perspective:none!important;padding:0!important;}
  #projects .floating-layer{display:none!important;}
  .rail{
    position:relative!important;
    left:auto!important;top:auto!important;
    display:flex!important;
    flex-direction:column!important;
    gap:14px!important;
    width:100%!important;
    height:auto!important;
    padding:0 12px 108px!important;
    pointer-events:auto!important;
    z-index:4!important;
  }
  .card{
    position:relative!important;
    left:auto!important;top:auto!important;
    width:100%!important;
    aspect-ratio:16/9!important;
    min-height:210px!important;
    transform:none!important;
    opacity:1!important;
    border-radius:6px!important;
    pointer-events:auto!important;
  }
  .card .meta{font-size:10px!important;left:10px!important;top:10px!important;opacity:.68!important;}
  .card::after{opacity:1!important;transform:none!important;font-size:14px!important;bottom:10px!important;}
  .hud{display:none!important;}
  .bottom-switch{position:fixed!important;right:8px!important;bottom:8px!important;z-index:55!important;}
  .index-panel{position:fixed!important;left:8px!important;right:8px!important;bottom:64px!important;width:auto!important;max-height:58vh!important;z-index:54!important;}

  #stills.view,#studio.view,#contact.view{min-height:100vh!important;}
  .page-close{top:68px!important;right:10px!important;}
  #stills .stills-board{position:relative!important;inset:auto!important;padding:82px 10px 80px!important;overflow:visible!important;}
  #stills .still-section{grid-template-columns:1fr!important;}
  #stills .still-grid{grid-template-columns:repeat(2,1fr)!important;grid-auto-rows:150px!important;}
  #stills .still.featured{grid-column:span 2!important;grid-row:span 2!important;}
  .studio-layout{position:relative!important;inset:auto!important;display:block!important;padding:90px 14px 70px!important;}
  .contact-center{position:relative!important;inset:auto!important;min-height:100vh!important;padding:120px 14px!important;}
}

/* V73 — smoother project entry/exit, clearer mobile vertical carousel cue, centered About fighters */
.view-projects.carousel-whip .rail{
  animation:railWhipSmoothV73 1120ms cubic-bezier(.18,.84,.22,1) both!important;
}
.view-projects.carousel-whip.carousel-after-close .rail{
  animation-duration:1160ms!important;
}
.view-projects.carousel-whip .card{
  transition:filter .34s linear, opacity .34s linear!important;
  filter:brightness(.90) contrast(1.045) grayscale(.05)!important;
}
@keyframes railWhipSmoothV73{
  0%{filter:blur(0) brightness(1); transform:translateZ(0) scale(1)}
  22%{filter:blur(.55px) brightness(.91); transform:translateZ(0) scale(.997)}
  52%{filter:blur(1.25px) brightness(.84); transform:translateZ(0) scale(.993)}
  78%{filter:blur(.38px) brightness(.96); transform:translateZ(0) scale(1.001)}
  100%{filter:blur(0) brightness(1); transform:translateZ(0) scale(1)}
}
.view-projects.carousel-after-close .rail{
  animation:railAfterCloseSmoothV73 980ms cubic-bezier(.18,.84,.22,1) both!important;
}
@keyframes railAfterCloseSmoothV73{
  0%{filter:blur(.8px) brightness(.90); transform:translateZ(0) scale(.998)}
  54%{filter:blur(.22px) brightness(.98); transform:translateZ(0) scale(1.002)}
  100%{filter:none; transform:translateZ(0) scale(1)}
}
#projects .floating-layer .float-row{
  will-change:transform!important;
  backface-visibility:hidden!important;
  -webkit-backface-visibility:hidden!important;
  transform:translate3d(0,0,0);
}
#projects .floating-layer .float-still{
  transform:translate3d(0,0,0)!important;
  animation:none!important;
}
#projects .floating-layer .float-inner{transform:translate3d(0,0,0)!important;}

/* About: center the white fighters animation better in its block. */
.fighters-object{
  display:grid!important;
  place-items:center!important;
  justify-self:center!important;
  align-self:center!important;
}
.fighters-object video{
  width:88%!important;
  height:88%!important;
  object-fit:contain!important;
  object-position:center center!important;
  transform-origin:center center!important;
}

@media(max-width:760px){
  /* Keep phone projects as a vertical carousel/list and show how to use it. */
  .identity-lockup{padding-bottom:34px!important;}
  .hud-left{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:8px!important;
    position:fixed!important;
    top:116px!important;
    left:50%!important;
    right:auto!important;
    transform:translateX(-50%)!important;
    z-index:56!important;
    width:auto!important;
    color:rgba(255,255,255,.62)!important;
    font-size:10px!important;
    letter-spacing:.08em!important;
    pointer-events:none!important;
    white-space:nowrap!important;
    opacity:.92!important;
  }
  .hud-left::before,
  .hud-left::after{
    display:inline-block!important;
    font-size:14px!important;
    line-height:1!important;
    color:rgba(255,255,255,.72)!important;
    animation:mobileArrowPulseV73 1.25s cubic-bezier(.18,.84,.22,1) infinite alternate!important;
  }
  .hud-left::before{content:'↑';}
  .hud-left::after{content:'↓';animation-delay:.22s!important;}
  @keyframes mobileArrowPulseV73{
    from{opacity:.32;transform:translateY(-2px)}
    to{opacity:.92;transform:translateY(2px)}
  }
  .rail{scroll-snap-type:y proximity!important;}
  .card{scroll-snap-align:center!important;}
  .studio-layout{display:grid!important;grid-template-columns:1fr!important;place-items:center!important;}
  .fighters-object{width:min(82vw,380px)!important;margin:0 auto 28px!important;}
  .studio-copy{text-align:left!important;width:100%!important;}
}


/* V74 — mobile keeps the carousel idea with moving stills in the background */
@media(max-width:760px){
  /* keep the projects page as a vertical carousel, but restore the background still layer */
  #projects.view-projects{
    position:relative!important;
    overflow:hidden!important;
    min-height:100vh!important;
    height:100vh!important;
  }
  #projects .project-stage{
    position:absolute!important;
    inset:0!important;
    height:100vh!important;
    min-height:100vh!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    touch-action:pan-y!important;
    -webkit-overflow-scrolling:touch!important;
    padding-top:0!important;
    scrollbar-width:none!important;
  }
  #projects .project-stage::-webkit-scrollbar{display:none!important;}

  #projects .floating-layer{
    display:block!important;
    position:fixed!important;
    inset:0!important;
    z-index:1!important;
    pointer-events:none!important;
    overflow:hidden!important;
    opacity:.42!important;
    filter:grayscale(.24) brightness(.72) contrast(1.06)!important;
    transform:translateZ(0)!important;
  }
  #projects .floating-layer::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,rgba(0,0,0,.56) 0%,rgba(0,0,0,.18) 32%,rgba(0,0,0,.20) 70%,rgba(0,0,0,.64) 100%);
    pointer-events:none;
  }
  #projects .floating-layer .float-row{
    display:flex!important;
    position:absolute!important;
    height:var(--row-h)!important;
    gap:var(--row-gap)!important;
    will-change:transform!important;
    backface-visibility:hidden!important;
    animation:mobileStillRowLeftV74 16s linear infinite alternate!important;
  }
  #projects .floating-layer .float-row:nth-child(even){
    animation-name:mobileStillRowRightV74!important;
    animation-duration:19s!important;
  }
  #projects .floating-layer .float-row .float-still{
    position:relative!important;
    flex:0 0 var(--row-w)!important;
    width:var(--row-w)!important;
    height:var(--row-h)!important;
    transform:none!important;
    border:1px solid rgba(255,255,255,.08)!important;
    background:#050505!important;
    overflow:hidden!important;
    opacity:.94!important;
  }
  #projects .floating-layer .float-row .float-still .float-inner{
    position:absolute!important;
    inset:0!important;
    background:var(--img) center/cover no-repeat!important;
    transform:none!important;
    animation:none!important;
  }

  #projects .rail{
    position:relative!important;
    z-index:5!important;
    min-height:100vh!important;
    padding:172px 14px 118px!important;
    gap:18px!important;
    scroll-snap-type:y mandatory!important;
  }
  #projects .card{
    width:100%!important;
    min-height:clamp(220px,54vw,360px)!important;
    aspect-ratio:16/10!important;
    scroll-snap-align:center!important;
    box-shadow:0 24px 80px rgba(0,0,0,.72)!important;
  }
  #projects .identity-lockup{
    position:fixed!important;
    top:58px!important;
    left:50%!important;
    transform:translateX(-50%)!important;
    padding:0!important;
    z-index:56!important;
    pointer-events:none!important;
  }
  #projects .hud-left{
    top:104px!important;
    z-index:56!important;
  }
  #projects .bottom-switch{z-index:57!important;}

  @keyframes mobileStillRowLeftV74{
    from{transform:translate3d(-10%,0,0)}
    to{transform:translate3d(-38%,0,0)}
  }
  @keyframes mobileStillRowRightV74{
    from{transform:translate3d(-42%,0,0)}
    to{transform:translate3d(-14%,0,0)}
  }
}

/* V75 — intro loading bar + reliable external links */
.intro-gate.is-loading .intro-video,
.intro-gate.is-loading .intro-shade,
.intro-gate.is-loading .intro-brand,
.intro-gate.is-loading .intro-enter{
  opacity:0!important;
  pointer-events:none!important;
}
.intro-gate.is-ready .intro-video,
.intro-gate.is-ready .intro-shade,
.intro-gate.is-ready .intro-brand,
.intro-gate.is-ready .intro-enter{
  opacity:1!important;
}
.intro-loader{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  z-index:10;
  width:min(360px,72vw);
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:12px;
  align-items:center;
  color:#fff;
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  transition:opacity .45s var(--ease), transform .45s var(--ease);
}
.intro-loader-track{
  height:1px;
  background:rgba(255,255,255,.20);
  overflow:hidden;
  border-radius:99px;
}
.intro-loader-track span{
  display:block;
  width:0%;
  height:100%;
  background:#fff;
  border-radius:99px;
  box-shadow:0 0 18px rgba(255,255,255,.55);
  transition:width .16s linear;
}
.intro-loader-percent{color:rgba(255,255,255,.72); min-width:34px; text-align:right;}
.intro-gate.is-ready .intro-loader{
  opacity:0;
  transform:translate(-50%,-54%);
  pointer-events:none;
}
.intro-enter:disabled{opacity:.35!important; pointer-events:none!important;}
.contact-center{z-index:25!important; pointer-events:auto!important;}
.contact-pill{position:relative!important; z-index:26!important; pointer-events:auto!important;}
.modal-actions,.modal-link,#modalWatch,.video-fallback{position:relative!important; z-index:50!important; pointer-events:auto!important; cursor:pointer!important;}
.modal-visual .video-fallback{position:absolute!important; z-index:60!important;}

/* V76 — smoother loading and general performance pass, without visual redesign. */
.intro-video{will-change:opacity; backface-visibility:hidden; transform:translateZ(0) scale(1.01);}
.intro-loader-track span{transition:width .22s cubic-bezier(.22,.8,.22,1)!important;}
body.intro-active .view-projects .floating-layer,
body.intro-active .rail{visibility:hidden!important;}
.card img,.card video,.clip-tile img,.clip-tile video,.still img,.modal-strip img{backface-visibility:hidden; -webkit-backface-visibility:hidden;}
.still-section{content-visibility:auto; contain-intrinsic-size: 720px 520px;}
.stills-board{scrollbar-gutter:stable; overscroll-behavior:contain;}
.project-modal,.still-lightbox{will-change:opacity,transform;}
#projects .floating-layer .float-row{will-change:transform; contain:layout paint style;}
#projects .floating-layer .float-row .float-still{will-change:auto!important; contain:paint!important;}
#projects .floating-layer .float-row .float-still .float-inner{will-change:auto!important;}
@media (prefers-reduced-motion: reduce){
  .card,.float-row,.intro-video,.studio-object,.clip-tile video{animation:none!important;transition:none!important;}
}