.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-content{position:fixed;top:12px;left:12px;transform:translateY(-180%);padding:16px;background:white;color:black;z-index:100}.skip-content:focus{transform:none}
.portfolio-page{overflow-x:clip}.portfolio-page header::before{content:'';position:absolute;left:-5vw;right:-5vw;top:-40px;height:125px;background:linear-gradient(#000f,#000b 65%,transparent);z-index:-1;pointer-events:none}
.portfolio-backdrop{position:fixed;inset:0;z-index:-1;pointer-events:none;background:#000 url('/assets/portfolio/backdrop.webp') center/cover no-repeat;opacity:1}
.portfolio-backdrop canvas{display:block;width:100%;height:100%;opacity:0;transition:opacity .7s}.portfolio-backdrop.is-animated{background:#000}.portfolio-backdrop.is-animated canvas{opacity:1}.portfolio-glow{position:fixed;left:0;top:0;width:480px;height:480px;margin:-240px;pointer-events:none;z-index:0;background:radial-gradient(circle,#bddfe312,transparent 65%);opacity:0;transition:opacity .2s;contain:strict}
.portfolio-selection{width:78.2%;margin-inline:auto;padding:135px 0 0;scroll-margin-top:100px}.portfolio-count{display:flex;align-items:baseline;gap:16px;margin:0 0 30px;font-size:clamp(30px,3.5vw,52px);font-weight:600;line-height:1.05;font-variant-numeric:tabular-nums;letter-spacing:-.045em;color:#fff;text-shadow:0 2px 20px #000}.portfolio-count b{font-weight:700}.portfolio-count span{color:#e0e0e0}.portfolio-count .count-divider{color:#929292;font-weight:400}.film-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px;position:relative;z-index:1}
.film-slot{position:relative;aspect-ratio:16/10;overflow:hidden;background:#111;contain:layout paint}.film-screen{display:block;width:100%;height:100%;padding:0;border:0;border-radius:0;cursor:pointer;overflow:hidden;position:relative;background:#090909}
.film-screen>img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease,filter .25s;filter:brightness(.88)}
.film-screen:hover>img,.film-screen:focus-visible>img{transform:scale(1.025);filter:brightness(1.06)}.film-screen:focus-visible{outline:2px solid #fff;outline-offset:-3px;z-index:2}
.portfolio-contact{padding:140px 6% 120px;min-height:65svh;display:grid;place-items:center;text-align:center}.portfolio-contact a{display:block;position:relative}.portfolio-contact h2{font-size:clamp(48px,6vw,96px);line-height:1.01;text-shadow:0 0 25px #000;letter-spacing:-.055em}.contact-arrow{font-size:40px;display:block;margin-top:28px;transition:transform .25s}.portfolio-contact a:hover .contact-arrow{transform:translate(4px,-4px)}
.film-viewer{position:fixed;inset:0;width:100%;max-width:none;height:100%;height:100dvh;max-height:none;margin:0;padding:0;border:0;background:#000;color:#fff;overflow:hidden;z-index:100;overscroll-behavior:contain}.film-viewer::backdrop{background:#000}.film-viewer[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto}.film-viewer:fullscreen{height:100%;width:100%}
.viewer-toolbar{min-height:68px;display:flex;align-items:center;justify-content:space-between;padding:12px max(20px,env(safe-area-inset-right)) 8px max(24px,env(safe-area-inset-left));padding-top:max(12px,env(safe-area-inset-top));gap:20px}.viewer-count{font-size:12px;color:#aaa;font-variant-numeric:tabular-nums;letter-spacing:.1em}.viewer-actions{display:flex;gap:8px}.film-viewer button,.viewer-source{width:44px;height:44px;display:grid;place-items:center;background:transparent;border:1px solid #ffffff25;color:#fff;border-radius:50%;cursor:pointer;font:26px/1 Arial,sans-serif;text-decoration:none}.film-viewer button:hover,.viewer-source:hover{background:#fff;color:#000}.film-viewer :focus-visible{outline:2px solid #fff;outline-offset:4px}.viewer-close{font-size:32px!important}
.viewer-stage{position:relative;min-width:0;min-height:0;overflow:hidden}
/* A definite, inset box prevents video intrinsic size from enlarging a grid track. */
.viewer-media{position:absolute;inset:12px 24px;min-width:0;min-height:0;overflow:hidden;container-type:size}
.viewer-media>iframe,.viewer-media>video{position:absolute;inset:0;margin:auto;display:block;border:0;background:#000;min-width:0;min-height:0;max-width:100%;max-height:100%;width:min(100cqw,calc(100cqh * var(--film-ratio,1.7778)));height:min(100cqh,calc(100cqw / var(--film-ratio,1.7778)));object-fit:contain;object-position:center}
.viewer-navigation{display:flex;justify-content:center;gap:18px;padding:12px 20px max(14px,env(safe-area-inset-bottom));min-height:70px}.viewer-navigation button{width:52px}.viewer-navigation button:disabled{opacity:.25;cursor:default;background:transparent;color:#fff}.viewer-status{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:16px;max-width:80%;background:#141414e8;font-size:14px;text-align:center;pointer-events:none}.viewer-status[hidden]{display:none}.viewer-status.is-error{pointer-events:auto}.viewer-status a{display:block;padding:14px;text-decoration:underline}
.viewer-open .portfolio-glow{visibility:hidden}
@media(max-width:900px){.portfolio-selection{padding-top:115px}.film-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:699px){.portfolio-selection{width:calc(85% - 5.1px);padding:100px 0 0}.portfolio-count{font-size:32px;margin-bottom:24px;gap:12px}.film-list{gap:3px}.film-slot{aspect-ratio:1}.film-screen>img{filter:none}.portfolio-backdrop{opacity:1}.portfolio-contact{padding:110px 6% 100px;min-height:58svh}.portfolio-contact h2{font-size:clamp(34px,9vw,58px)}.contact-arrow{font-size:31px;margin-top:25px}.portfolio-glow{display:none}.viewer-toolbar{min-height:62px;padding-left:16px;padding-right:12px}.viewer-actions{gap:7px}.viewer-navigation{min-height:64px;padding-top:8px}.viewer-media{inset:8px 12px}}
@media(max-height:500px) and (orientation:landscape){.viewer-toolbar{min-height:48px;padding-top:4px;padding-bottom:4px}.viewer-actions>*{height:36px!important;width:36px!important}.viewer-navigation{min-height:48px;padding:4px 12px 8px}.viewer-navigation button{height:36px;width:44px}.viewer-media{inset:4px 12px}}
@media(prefers-reduced-motion:reduce){.film-screen>img,.contact-arrow,.portfolio-glow{transition:none;transform:none!important}.portfolio-glow{display:none}}

.portfolio-inquiry{scroll-margin-top:92px;min-height:0}