/* OF site styles: OF Player v3 overlay + play-circle hover for pages without Webflow interactions. Source: OF-Webflow/bundle */
.ofp{position:fixed;inset:0;z-index:2147483000;display:none;background:#161616;opacity:0;transition:opacity .3s}
.ofp.is-open{display:block}
.ofp.is-visible{opacity:1}
.ofp-stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.ofp-frame{width:95vw;height:95%;border:0;background:#000;display:block;position:relative;z-index:1;opacity:0;transition:opacity .4s}
.ofp-frame.is-ready{opacity:1}
.ofp-image{position:absolute;top:2.5%;left:2.5vw;width:95vw;height:95%;object-fit:contain;display:none;z-index:1;opacity:0;transition:opacity .3s}
.ofp-image.is-ready{opacity:1}
.ofp.is-image .ofp-image{display:block}
.ofp-video{position:absolute;top:2.5%;left:2.5vw;width:95vw;height:95%;background:#000;object-fit:contain;display:none;z-index:1;opacity:0;transition:opacity .3s}
.ofp-video.is-ready{opacity:1}
.ofp.is-video .ofp-video{display:block}
.ofp.is-image .ofp-frame,.ofp.is-video .ofp-frame{display:none}
.ofp-loader{position:absolute;left:50%;top:50%;width:26px;height:38px;margin:-19px 0 0 -13px;z-index:0;opacity:0;transition:opacity .25s;pointer-events:none}
.ofp.is-loading .ofp-loader{opacity:1}
.ofp-loader>div{position:absolute;inset:0}
.ofp-loader.is-fallback::after{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px;border-radius:50%;background:#fff;animation:ofp-bounce 1s ease-in-out infinite}
@keyframes ofp-bounce{0%,100%{transform:translateY(7px)}50%{transform:translateY(-7px)}}
.ofp-close,.ofp-nav{position:absolute;z-index:2;cursor:pointer;border:0;background:transparent;padding:0;-webkit-appearance:none;appearance:none}
.ofp-close{top:0;right:0;width:50px;height:50px;margin:1.5vw 1.5vw 0 0;background:url(https://media.ordinary.co/wf/63ea57dc7443ff930dae703c_icon-close.svg) center/60% 60% no-repeat}
.ofp-nav{top:50%;width:48px;height:48px;margin-top:-24px;color:#fff;font:300 44px/48px Georgia,serif;opacity:.6;transition:opacity .2s}
.ofp-nav:hover{opacity:1}
.ofp-prev{left:.6vw}.ofp-next{right:.6vw}
.ofp-count{position:absolute;left:0;right:0;bottom:.8vh;text-align:center;color:#8f8f8f;font-size:12px;line-height:1;letter-spacing:.08em;z-index:2}
.ofp.is-single .ofp-nav,.ofp.is-single .ofp-count{display:none}
html.ofp-open,html.ofp-open body{overflow:hidden}
@media (max-width:767px){.ofp-frame,.ofp-image,.ofp-video{width:100%;height:100%;top:0;left:0}.ofp-close{margin:6px 6px 0 0}}
[data-hover]{transition:transform .5s}[data-hover]:hover{transform:scale(1.1)}[data-hover] .icon-play-project{opacity:0;transition:opacity .5s}[data-hover]:hover .icon-play-project{opacity:1}@media (hover:none){[data-hover] .icon-play-project{opacity:1}}
/* phone frame gaps (2026-10-21): one 1.5vw gap between frames; images inside full/square frames drop their own margin (was doubling to 12px), pg-row/wc-corner rows get the missing bottom margin (was 0px) */
@media (max-width:767px){.section-work .module-full .image-full,.section-work [class*="square-"] .image-full,.section-work [class*="square-"] .image-square{margin-bottom:0!important}.section-work [class*="square-"] > .module-full,.section-work [class*="square-"] > .module-full-square{margin-bottom:0}.section-work .module-lightbox{vertical-align:top}.section-work .pg-row{margin-bottom:1.5vw}.section-work .pg-row + .module-full{margin-top:1.5vw}.section-work [class*="wc-corner"]{margin-bottom:1.5vw}}
/* phone frame gaps 2 (2026-10-21): frames with nested rows keep inner image margins, multi-image squares keep the upper margins, empty columns/frames hidden, video-only frames get the gap (w-lightbox ones sized off the column are shortened by it), zero-height video boxes get 16:9. 52/52 project pages even. */
@media (max-width:767px){.section-work .module-full:has(.w-row) .image-full{margin-bottom:1.5vw!important}.section-work .module-full:has(.w-row){margin-bottom:0}.section-work [class*="square-"] > .module-lightbox:not(:last-child) > .image-full,.section-work [class*="square-"] > .module-lightbox:not(:last-child) > .image-square{margin-bottom:1.5vw!important}.section-work .w-row > .w-col:not(:has(img,video,iframe,h1,h2,h3,h4,h5,p,a)),.section-work .module-full:not(:has(img,video,iframe)){display:none}.section-work .w-col > .module-lightbox:has(> .video-loop){margin-bottom:1.5vw!important}.section-work .w-col > .module-lightbox.w-lightbox:has(> .video-loop) > .video-loop{height:calc(100% - 1.5vw)!important}.section-work .module-full:has(> .project-video-header){aspect-ratio:16/9;height:auto}}