/* Project films share a transport, never a repeated portfolio-card composition. */
.film-case{--film-safe:125px}.film-beat{position:relative;min-height:calc(100svh - var(--reel-header));overflow:hidden}
.film-continuity-layer{position:absolute;inset:0;z-index:24;pointer-events:none;overflow:hidden}
.continuity-carrier{position:absolute;left:0;top:0;overflow:hidden;pointer-events:none;backface-visibility:hidden}
.continuity-carrier>img{display:block;width:100%;height:100%;max-width:none}
.continuity-word{display:grid;place-items:center;white-space:nowrap;box-sizing:border-box}
.continuity-paper{background:var(--paper);box-shadow:0 14px 40px #0002}
.offf-build-threads{position:absolute;left:12%;right:12%;top:43%;display:flex;justify-content:space-around;gap:10px;pointer-events:none}
.offf-build-threads>span{font:800 14px/1.2 var(--display);letter-spacing:.04em;padding:5px 10px;background:#f2efe7;color:var(--ink)}
.offf-tool-mark{position:absolute;left:var(--g);top:34%;width:20%;height:auto}
.offf-tool-mark img{display:block;width:100%;height:auto}
.offf-tool-threads{position:absolute;left:0;right:0;bottom:calc(100% + 10px);display:flex;justify-content:space-between;gap:8px}
.offf-tool-threads>span{font:800 14px/1.2 var(--display);padding:5px 8px;background:#dddacf;color:var(--ink)}
@media(max-width:760px){.offf-build-threads{left:22px;right:22px;top:39%;gap:5px}.offf-build-threads>span{font-size:12px;padding:4px 5px}.offf-tool-mark{left:22px;top:31%;width:40%}}
.reel-enabled .film-beat{position:absolute;inset:0;min-height:0;height:100%;width:100%}
.film-eyebrow{position:absolute;top:25px;left:var(--g);right:var(--g);z-index:20;font-size:14px;line-height:1.5}
.film-image-button{display:block;border:0;background:none;color:inherit;padding:0;width:100%;height:100%;cursor:zoom-in}
.film-image-button>img{display:block;width:100%;height:100%;object-fit:contain}
.film-route{position:absolute;z-index:27;left:var(--g);right:var(--g);bottom:67px;height:45px;display:flex;align-items:center;gap:12px;padding:0 10px;border:1px solid var(--line);background:var(--paper);color:var(--ink)}
.film-route button{width:40px;min-height:42px;flex-shrink:0;font-size:23px;line-height:1;display:grid;place-items:center;padding:0}.film-route button:disabled{opacity:.25;cursor:default}.film-route p{font-size:14px!important;line-height:1.4!important;margin:0!important;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.film-route-count{font-size:14px;font-variant-numeric:tabular-nums;white-space:nowrap}.film-route .film-route-detail{font-size:14px;border-left:1px solid var(--line);padding-left:14px;margin-left:3px;white-space:nowrap;min-height:42px;display:flex;align-items:center}
.film-offizin{background:var(--paper)}.film-offizin h2{font-size:clamp(65px,9vw,145px);line-height:.86}.film-offizin h2 span{color:#ed6555}
.offf-busy{background:#252724;color:var(--paper)}.offf-busy>h2{position:absolute;left:var(--g);top:15%;z-index:4}.offf-word-field{position:absolute;inset:40% var(--g) var(--film-safe);perspective:1000px}.offf-word-field>span{position:absolute;font-family:var(--display);font-size:clamp(50px,8vw,125px);line-height:.9;padding:18px 24px;background:#d7ddcf;color:var(--ink);box-shadow:0 20px 50px #0004;white-space:nowrap}.offf-word-field>span:nth-child(1){top:0;left:5%;transform:rotate(-8deg)}.offf-word-field>span:nth-child(2){top:29%;right:5%;transform:rotate(7deg);background:#e95a48;color:#1e211c}.offf-word-field>span:nth-child(3){top:62%;left:10%;transform:rotate(-3deg);background:#f2efe7}.offf-question{position:absolute;right:var(--g);top:19%;max-width:30%;font-size:16px!important;line-height:1.6!important;color:#d7dacf}
.offf-build{background:#dddacf;color:var(--ink);perspective:1100px}.offf-brand-plane{position:absolute;left:12%;right:12%;top:17%;height:25%;padding:35px;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;box-shadow:0 25px 70px #20211f1a;transform-style:preserve-3d}.offf-brand-plane>img{width:min(540px,80%);height:auto}.offf-brand-plane>span{font-size:14px}.offf-build h2{position:absolute;left:var(--g);top:49%;font-size:clamp(60px,8vw,128px);z-index:3}.offf-build h2 span{color:#cf3328}.offf-build>p{position:absolute;right:var(--g);top:55%;max-width:30%;font-size:16px!important}.offf-laravel{position:absolute;right:var(--g);bottom:calc(var(--film-safe) + 15px);font-family:var(--display);font-size:clamp(70px,12vw,170px);line-height:.8;color:#cf3328}
.offf-tool{background:#f0eee7;color:var(--ink);perspective:1300px}.offf-tool>h2{position:absolute;top:14%;left:var(--g);font-size:clamp(50px,7.4vw,115px);z-index:4}.offf-tool>h2 span{color:#ce382c}.offf-ui-canvas{position:absolute;width:69%;aspect-ratio:1672/941;right:var(--g);top:33%;margin:0;transform-style:preserve-3d}.offf-ui-fragments,.offf-ui-full{position:absolute;inset:0}.offf-fragment{position:absolute;top:0;width:33.333333%;height:100%;overflow:hidden;background:#fff}.offf-fragment:nth-child(1){left:0}.offf-fragment:nth-child(2){left:33.333333%}.offf-fragment:nth-child(3){left:66.666666%}.offf-fragment>img{height:100%;width:300%;max-width:none;object-fit:fill}.offf-fragment:nth-child(2)>img{transform:translateX(-33.333333%)}.offf-fragment:nth-child(3)>img{transform:translateX(-66.666666%)}.offf-ui-canvas>figcaption{position:absolute;top:100%;left:0;padding-top:12px;font-size:14px}.offf-site-screen{position:absolute;left:17%;right:var(--g);top:18%;bottom:calc(var(--film-safe) + 30px);margin:0;display:flex;flex-direction:column;align-items:center;gap:14px}.offf-site-screen>.film-image-button{min-height:0;flex:1;background:#fff;box-shadow:0 20px 60px #20211f22}.offf-site-screen>figcaption{font-size:14px;flex-shrink:0}.offf-product-link{position:absolute;left:var(--g);bottom:calc(var(--film-safe) + 12px);font-size:14px;z-index:8;min-height:36px;border-bottom:1px solid currentColor;display:flex;align-items:center}
.film-game{background:#c72f25}.film-game h2{font-size:clamp(65px,10vw,165px);line-height:.84}.gamef-website{background:#c72f25;color:var(--paper);perspective:1400px}.gamef-website>h2{position:absolute;left:var(--g);top:20%;z-index:5}.gamef-website>h2>span{display:block}.gamef-website>h2>span:nth-child(2){color:#f5be73}.gamef-web{position:absolute;left:37%;right:var(--g);top:14%;bottom:calc(var(--film-safe) + 22px);margin:0;display:flex;flex-direction:column;gap:13px;transform-style:preserve-3d}.gamef-web>.film-image-button{min-height:0;flex:1;background:#f9f9f5;box-shadow:0 30px 65px #42170d66}.gamef-web figcaption{font-size:14px;line-height:1.5}
.gamef-clear{background:#e1e4d9;color:var(--ink);perspective:1200px}.gamef-room{position:absolute;left:8%;right:8%;top:17%;bottom:calc(var(--film-safe) + 20px);perspective:1000px}.gamef-floor{position:absolute;inset:5% 0;background:#bbc4b1;transform:rotateX(59deg) rotateZ(-20deg);box-shadow:0 40px 0 #a1ad96}.gamef-room-words{position:absolute;inset:10% 0;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:space-around;gap:15px}.gamef-room-words>span{display:block;font:800 clamp(70px,12vw,200px)/.8 var(--display);letter-spacing:-.04em;text-shadow:0 3px 0 #d9ddd1}.gamef-room-words>span:nth-child(2){color:#c72f25}.gamef-cube{--cube:clamp(70px,12vw,170px);width:var(--cube);height:var(--cube);position:absolute;z-index:6;transform-style:preserve-3d;transform:rotateX(-16deg) rotateY(-29deg)}.cube-one{left:10%;top:8%}.cube-two{right:12%;top:39%}.cube-three{left:25%;bottom:4%}.gamef-cube>i{position:absolute;inset:0;display:block;background:#bf965e;border:1px solid #977442;backface-visibility:hidden}.gamef-cube .cube-front{transform:translateZ(calc(var(--cube)/2));background:#c9a36d}.gamef-cube .cube-top{transform:rotateX(90deg) translateZ(calc(var(--cube)/2));background:#e0bf8f}.gamef-cube .cube-side{transform:rotateY(90deg) translateZ(calc(var(--cube)/2));background:#a9814a}.cube-front::after,.cube-top::after{content:"";position:absolute;left:44%;top:0;bottom:0;width:12%;background:#d8bf96;border-left:1px solid #9d784044;border-right:1px solid #9d784044}.gamef-cleared-copy{position:absolute;left:var(--g);top:23%;z-index:10;max-width:85%}.gamef-cleared-copy h2{font-size:clamp(54px,7.8vw,125px);line-height:.9}.gamef-cleared-copy h2>span{color:#c72f25}.gamef-cleared-copy p{font-size:18px;line-height:1.7;margin-top:30px}.gamef-reveal{position:absolute;left:36%;right:5%;top:20%;bottom:calc(var(--film-safe) + 20px);overflow:hidden;background:#fff;box-shadow:0 22px 65px #20211f20}.gamef-reveal img{height:100%;width:100%;object-fit:cover;object-position:58% 55%}
.gamef-play{background:#f4f3ed;color:var(--ink)}.gamef-full-frame{position:absolute;inset:0 0 var(--film-safe);overflow:hidden}.gamef-full-frame img{width:100%;height:100%;object-fit:contain}.gamef-play-copy{position:absolute;right:var(--g);bottom:calc(var(--film-safe) + 25px);width:34%;max-width:470px;padding:25px;background:var(--paper);z-index:8;box-shadow:0 12px 45px #20211f16}.gamef-play-copy h2{font-size:clamp(55px,6.4vw,100px)}.gamef-play-copy h2>span{color:#c72f25}.gamef-play-copy p{font-size:16px;line-height:1.6;margin:20px 0 0}.gamef-play-copy .reel-game-play{margin-bottom:0}
@media(max-width:760px){.film-case{--film-safe:135px}.film-eyebrow{left:22px;right:22px;top:18px;font-size:14px}.film-route{left:14px;right:14px;bottom:87px;gap:5px;padding:0 3px}.film-route button{width:34px;min-height:42px}.film-route .film-route-detail{font-size:14px;padding-left:8px;margin-left:0;max-width:65px;line-height:1.2;white-space:normal}.film-route-count{font-size:14px}.film-route p{font-size:14px!important}.offf-busy>h2{left:22px;top:14%;font-size:14.6vw}.offf-question{left:22px;right:22px;top:39%;max-width:none;font-size:15px!important}.offf-word-field{inset:55% 22px calc(var(--film-safe) + 14px)}.offf-word-field>span{font-size:8.4vw;padding:14px 16px;box-shadow:0 10px 26px #0003}.offf-word-field>span:nth-child(1){left:0;top:0}.offf-word-field>span:nth-child(2){right:0;top:30%}.offf-word-field>span:nth-child(3){left:0;top:65%}.offf-brand-plane{left:22px;right:22px;top:16%;height:21%;padding:20px 15px;gap:15px}.offf-brand-plane>img{width:100%}.offf-brand-plane>span{font-size:14px}.offf-build h2{left:22px;top:44%;font-size:13.2vw}.offf-build>p{left:22px;right:22px;top:63%;max-width:none;font-size:14px!important;line-height:1.55!important}.offf-laravel{font-size:13vw;right:22px;bottom:calc(var(--film-safe) + 15px)}.offf-tool>h2{left:22px;top:14%;font-size:12.8vw}.offf-ui-canvas{left:22px;right:22px;top:41%;width:auto}.offf-ui-canvas>figcaption{font-size:14px;padding-top:10px}.offf-site-screen{left:22px;right:22px;top:29%;bottom:calc(var(--film-safe) + 50px);gap:10px}.offf-site-screen>figcaption{font-size:14px}.offf-product-link{left:22px;bottom:calc(var(--film-safe) + 10px);font-size:14px}.gamef-website>h2{left:22px;top:13%;font-size:17vw}.gamef-web{left:26%;right:18px;top:33%;bottom:calc(var(--film-safe) + 18px);gap:10px}.gamef-web figcaption{font-size:14px}.gamef-room{left:7%;right:7%;top:23%;bottom:calc(var(--film-safe) + 30px)}.gamef-room-words>span{font-size:17vw}.gamef-cube{--cube:75px}.cube-one{left:5%;top:2%}.cube-two{right:8%;top:40%}.cube-three{left:20%;bottom:0}.gamef-cleared-copy{left:22px;right:22px;top:14%;max-width:none}.gamef-cleared-copy h2{font-size:11.8vw}.gamef-cleared-copy p{font-size:14px;line-height:1.6;margin-top:22px}.gamef-reveal{left:22px;right:22px;top:46%;bottom:calc(var(--film-safe) + 20px)}.gamef-full-frame{inset:12% 0 calc(var(--film-safe) + 15px)}.gamef-full-frame img{object-fit:cover;object-position:55% 45%}.gamef-play-copy{left:22px;right:22px;bottom:calc(var(--film-safe) + 15px);width:auto;padding:18px}.gamef-play-copy h2{font-size:12.5vw}.gamef-play-copy p{font-size:14px;line-height:1.5;margin-top:12px}.gamef-play-copy .reel-game-play{padding:11px 15px;font-size:15px;margin-top:14px;min-height:44px}}

.film-route .film-route-detail{width:auto;min-width:70px;font-size:14px}
html:not(.reel-enabled) .film-case{height:auto!important;min-height:0}.intro-dot-slot{opacity:1!important}.reel-baton{display:none}
.showreel h3[tabindex="-1"]:focus{outline:none}

.reel-enabled .film-case>header{mix-blend-mode:normal;color:var(--ink);background:var(--paper);padding:8px 12px;left:calc(var(--g) - 12px);right:calc(var(--g) - 12px);top:15px}