/* Standalone behavior and accessibility styles. The original site layout CSS is local. */
@font-face{font-family:Poppins;font-style:normal;font-weight:300;font-display:swap;src:url('/assets/poppins-light.ttf') format('truetype')}
/* Poppins 500/700 (same files as the theme head CSS) so pages without it, like 404, get the real weights */
@font-face{font-family:Poppins;font-style:normal;font-weight:500;font-display:swap;src:url('/assets/eecd5dfb85ec03.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Poppins;font-style:normal;font-weight:700;font-display:swap;src:url('/assets/938f9ef72aee18.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* Poppins 600 for figures and the footer line (SIL OFL 1.1, see fonts/Poppins-OFL.txt) */
@font-face{font-family:Poppins;font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/poppins-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* Instrument Sans (SIL OFL 1.1, see fonts/InstrumentSans-OFL.txt): body text, labels and UI; Poppins stays for headings.
   The fallback is Arial scaled to Instrument Sans' width and line metrics, so text barely moves when it loads. */
@font-face{font-family:'Instrument Sans Fallback';src:local('Arial'),local('ArialMT'),local('Helvetica');size-adjust:101.28%;ascent-override:95.77%;descent-override:24.68%;line-gap-override:0%}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url('/assets/fonts/instrument-sans-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url('/assets/fonts/instrument-sans-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Instrument Sans';font-style:italic;font-weight:400 700;font-display:swap;src:url('/assets/fonts/instrument-sans-italic-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Instrument Sans';font-style:italic;font-weight:400 700;font-display:swap;src:url('/assets/fonts/instrument-sans-italic-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0}img{max-width:100%}button,input,textarea{font:inherit}button,a,summary{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #87cfff;outline-offset:5px}
.site-header{position:relative;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:1vw 4vw;background:#141414;color:white;min-height:114px;font-family:Poppins,Arial,sans-serif}
.site-logo{display:block;line-height:0;max-width:70%}.site-logo img{display:block;width:auto;height:90px;object-fit:contain;max-width:100%}.site-navigation{position:relative}.site-navigation summary{cursor:pointer;list-style:none;font-size:16px;font-weight:700;letter-spacing:0;padding:12px 0}.site-navigation summary::-webkit-details-marker{display:none}.site-navigation nav{position:absolute;right:0;top:100%;display:flex;flex-direction:column;gap:12px;padding:24px;background:#141414;min-width:185px}.site-navigation nav a{color:#fff;text-decoration:none;font-size:16px;font-weight:700}.site-navigation nav a:hover{text-decoration:underline}.mobile-nav-label{display:none}.skip-link{position:absolute;top:-100px;left:20px;background:white;color:black;padding:12px;z-index:100}.skip-link:focus{top:10px}
.static-site #page{padding-top:0!important}.static-site .page-section:first-child{padding-top:0!important}.static-site [data-animation-role],.static-site .image-block-wrapper{opacity:1!important;visibility:visible!important}.static-site .section-background img{width:100%;height:100%;object-fit:cover}.static-site .section-background{overflow:hidden}.static-site .sqs-video-background{display:none}.static-site .background-video{position:absolute;left:50%;top:50%;width:max(100%,177.78vh);height:max(100%,56.25vw);transform:translate(-50%,-50%);border:0;pointer-events:none}.static-site .sqs-block-image img{opacity:1!important}.static-site .image-block-outer-wrapper img{width:100%;height:100%;object-fit:cover}.static-site .image-block-outer-wrapper .image-inset{position:relative}
.static-video{position:absolute;inset:0;width:100%;height:100%;background:#000}.static-video iframe{width:100%;height:100%;border:0;display:block}.static-site .embed-block-wrapper{height:auto!important;padding-bottom:0!important;overflow:hidden}.static-site .sqs-block-video .intrinsic{width:100%}.video-poster{display:block;position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:#000;cursor:pointer}.video-poster img{width:100%;height:100%;object-fit:cover}.video-poster>span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#000c;color:white;border-radius:5px;min-width:64px;padding:8px 20px;font:26px/1.2 Arial}.video-poster:hover>span{background:#126ec7}.video-fallback{position:absolute;bottom:8px;right:8px;padding:6px 10px;background:#000c;color:#fff!important;font:12px/1.4 Poppins,Arial,sans-serif;z-index:3}.static-video:has(iframe) .video-fallback{top:8px;bottom:auto}
.static-gallery{position:relative;width:100%;height:100%;min-width:0}.static-gallery .gallery-track{min-width:0}.static-gallery a{display:block;position:relative;overflow:hidden;line-height:0}.static-gallery img{display:block;width:100%;height:100%;object-fit:cover}.static-gallery.carousel .gallery-track{display:flex;gap:0;width:100%;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}.static-gallery.carousel .gallery-track::-webkit-scrollbar{display:none}.static-gallery.carousel .gallery-track>a{flex:0 0 33.333%;height:100%;scroll-snap-align:start}.static-gallery.carousel{min-height:200px}.static-gallery.carousel:not(.portfolio-reel){aspect-ratio:3.09}.gallery-controls{position:absolute;inset:0;display:flex;justify-content:space-between;align-items:center;pointer-events:none}.gallery-controls button{pointer-events:auto;border:0;border-radius:0;background:#0007;color:white;cursor:pointer;font-family:Arial,sans-serif;font-size:42px;line-height:1;min-width:44px;min-height:52px}.gallery-controls button:hover{background:#000c}.photo-grid .gallery-track{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0}.photo-grid a{aspect-ratio:1}.portfolio-reel{height:450px!important;min-height:0!important}.portfolio-reel .gallery-track>a{flex-basis:33.333%;height:450px!important}.archive-grid{padding:19px}.archive-grid .gallery-track{gap:19px;grid-template-columns:repeat(3,minmax(0,1fr))}.archive-grid a{aspect-ratio:1.5}.reel-label{position:absolute;bottom:10px;left:10px;right:10px;background:#000b;padding:10px;color:white;font-size:12px;line-height:1.4}.static-site .sqs-block-instagram{padding:0!important;overflow:hidden}
.image-lightbox{position:fixed;inset:0;width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;border:0;background:#000f;color:white;padding:48px 65px}.image-lightbox::backdrop{background:#000e}.image-lightbox[open]{display:flex;align-items:center;justify-content:center}.image-lightbox figure{margin:0;max-width:100%;text-align:center}.image-lightbox img{max-height:78dvh;width:auto;max-width:100%;object-fit:contain}.image-lightbox figcaption{max-width:850px;max-height:12dvh;overflow:auto;font:300 14px/1.5 Poppins,Arial,sans-serif;margin-top:12px;white-space:pre-wrap}.image-lightbox button{position:absolute;border:0;background:#222;color:white;font:32px/1 Arial;min-width:44px;min-height:44px;cursor:pointer}.close-lightbox{top:12px;right:12px}.previous-photo{left:10px;top:48%}.next-photo{right:10px;top:48%}
.contact-form{width:100%;font-family:Poppins,Arial,sans-serif;font-size:15px}.contact-form label{display:block;margin-bottom:22px}.contact-form label span{font-size:12px;opacity:.8}.contact-form input,.contact-form textarea{display:block;width:100%;padding:12px;margin-top:8px;border:1px solid #aaa;border-radius:0;color:#111;background:#fafafa;min-width:0}.contact-form textarea{resize:vertical}.name-fields{display:grid;grid-template-columns:1fr 1fr;gap:16px}.contact-form button,.draft-result a{display:inline-block;background:#fff;color:#111;border:1px solid #ddd;border-radius:28px;padding:12px 24px;cursor:pointer;font-weight:500;text-decoration:none;margin:8px 8px 8px 0}.form-explanation{font-size:13px!important;line-height:1.6!important}.contact-form .draft-result p{font-size:14px;line-height:1.5}.contact-form .draft-result a{font-size:14px;padding:10px 15px}.static-map{height:100%;min-height:300px;position:relative}.static-map iframe{width:100%;height:100%;min-height:300px;border:0}.static-map>a{position:absolute;bottom:0;left:0;background:#141414;color:white;padding:7px 12px;font-size:13px}.faq-item{border-top:1px solid currentColor;padding:28px 0}.faq-item:last-child{border-bottom:1px solid currentColor}.faq-item summary{cursor:pointer;font-size:20px;font-weight:500}.faq-item>div{padding:20px 0 0 5%;font-size:15px;line-height:1.8}.static-site .sqs-block-form,.static-site .sqs-block-accordion{height:auto!important}.static-site .fluid-engine:has(.contact-form){grid-template-rows:none!important;grid-auto-rows:minmax(24px,auto)}
.static-site .visually-hidden,.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.error-page{background:#000;color:#fff;font-family:Poppins,Arial,sans-serif;min-height:100vh}.error-page main{max-width:1000px;margin:80px auto;padding:0 24px}.error-page h1{font-size:clamp(36px,7vw,80px)}.error-page a{color:inherit}.static-site .grid-image img{width:100%;height:100%;object-fit:cover}.static-site .grid-item{opacity:1!important;transform:none!important}
@media(max-width:767px){.site-header{padding:20px 6vw;min-height:88px;gap:20px}.site-logo{max-width:75%}.site-logo img{height:auto;width:100%;max-height:60px}.desktop-nav-label{display:none}.mobile-nav-label{display:inline;font-size:14px}.site-navigation nav{right:-6vw;min-width:100vw;padding:30px 6vw}.site-navigation nav a{font-size:24px;padding:8px 0}.static-gallery.carousel .gallery-track>a{flex-basis:100%}.static-gallery.carousel:not(.portfolio-reel){aspect-ratio:1.6;min-height:0}.photo-grid .gallery-track{grid-template-columns:repeat(2,minmax(0,1fr))}.archive-grid .gallery-track{grid-template-columns:1fr}.portfolio-reel,.portfolio-reel .gallery-track>a{height:300px!important}.image-lightbox{padding:60px 45px}.image-lightbox img{max-height:70dvh}.image-lightbox figcaption{font-size:12px}.name-fields{grid-template-columns:1fr;gap:0}.static-site .fe-block{min-width:0}.static-site h1{overflow-wrap:anywhere}.static-site .sqs-block-code{max-width:100%;overflow-x:auto}.static-site .sqs-block-form{min-height:650px}.static-site .static-map{min-height:260px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.background-video{display:none}}
.fullsize-image{display:block;width:100%;height:100%}
.static-map{background:#202a32}.map-fallback{position:absolute;inset:0;display:grid;place-items:center;font-size:22px;color:#fff}.static-map iframe{position:relative;z-index:1}.static-map>a{z-index:2}.background-fallback{display:block!important;opacity:1!important}
.static-site .image-inset{clip-path:none!important;transform:none!important}
@media(max-width:767px){#collection-5ff5fb7de2137e5356c7803a h1{font-size:clamp(28px,8vw,40px)!important}}
@media(max-width:767px){.static-site .item-pagination-link{min-width:0;max-width:50%}.static-site .pagination-title-wrapper{min-width:0}.static-site .item-pagination-title{overflow-wrap:anywhere;font-size:clamp(18px,5vw,28px)}.static-site .item-pagination-icon{flex-shrink:0;width:25px!important;padding:0!important}}

/* Personal portfolio revision, September 2026. */
.personal-wordmark{display:block;font-family:Poppins,Arial,sans-serif;font-size:clamp(26px,4vw,54px);font-weight:700;line-height:1.15;letter-spacing:.02em;color:#fff}.personal-tagline{display:block;margin-top:8px;font-size:11px;letter-spacing:.22em;line-height:1.5;color:#c7c7c7}.personal-portfolio .site-logo{text-decoration:none;line-height:1.2}.personal-portfolio .project-title{font-size:clamp(19px,2vw,27px);line-height:1.4;letter-spacing:0;text-transform:none}.personal-portfolio #photography{padding:32px 0;text-align:center;scroll-margin-top:40px}.personal-contact{max-width:900px;margin:0 auto;padding:80px 6vw 120px!important;min-height:70vh;color:#fff}.personal-contact h1{font-size:clamp(40px,7vw,80px)}.personal-contact h2{font-size:clamp(28px,4vw,46px)}.personal-contact p{font-size:18px;line-height:1.8;max-width:650px}.personal-contact a{color:inherit;text-underline-offset:5px}.personal-contact .contact-address{font-size:clamp(21px,4vw,36px);overflow-wrap:anywhere}.personal-contact .contact-note{margin-top:50px;font-size:15px;color:#bbb}.personal-portfolio:has(.personal-contact){background:#141414}.personal-portfolio #page .sqs-html-content p{overflow-wrap:break-word}@media(max-width:767px){.personal-wordmark{font-size:27px}.personal-tagline{font-size:9px;letter-spacing:.14em}.personal-contact{padding-top:35px!important}.personal-contact p{font-size:16px}.personal-portfolio .site-header{min-height:95px}}

/* Work list */
.work-list h3 { margin-bottom: .4em; }
.work-list ul { list-style: none; margin: 1em 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.work-list li { margin: 0; padding: 0; }
.work-list li::before { display: none; }
.work-list-item { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; gap: 4px; width: 100%; min-height: 84px; padding: 16px 44px 16px 18px; position: relative; border: 1px solid rgba(255,255,255,.18); border-radius: 6px; color: inherit; transition: border-color .2s, background .2s; }
.work-list-item:hover, .work-list-item:focus-visible { border-color: rgba(255,255,255,.6); background: rgba(255,255,255,.05); }
.work-list-item:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.work-list-title { font-weight: 700; font-size: 1.05rem; }
.work-list-role { opacity: .7; font-size: .9rem; }
.work-list-item img { max-height: 36px; max-width: 70%; object-fit: contain; }
.work-list-play { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); opacity: .7; }
.work-dialog { width: min(960px, calc(100vw - 32px)); padding: 0 0 20px; border: 0; background: #111; color: #fff; }
.work-dialog::backdrop { background: rgba(0,0,0,.85); }
.work-dialog-frame { aspect-ratio: 16/9; background: #000; }
.work-dialog-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.work-dialog h3, .work-dialog p, .work-dialog a { margin: 14px 20px 0; display: block; color: #fff; }
.work-dialog a[hidden] { display: none; }
.work-dialog-close { position: absolute; top: 6px; right: 10px; z-index: 1; background: rgba(0,0,0,.6); color: #fff; border: 0; font-size: 28px; line-height: 1; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; }

/* Project carousel (mobile) */
.project-carousel{margin:0 calc(-1 * var(--sqs-mobile-site-gutter,6vw))}
.project-carousel-track{list-style:none;margin:0;padding:0 11vw;display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.project-carousel-track::-webkit-scrollbar{display:none}
.project-carousel-card{flex:0 0 78vw;scroll-snap-align:center;margin:0;padding:0}
.project-carousel-card::before{display:none}
.project-carousel-media{display:block;aspect-ratio:16/9;background:#000;overflow:hidden}
.project-carousel-media video{width:100%;height:100%;object-fit:cover;display:block}
.project-carousel-card h3{margin:14px 0 6px}
.project-carousel-card p{margin:0 0 8px}

/* Buttons: the legacy theme only styles buttons inside themed sections, so unthemed ones rendered bare */
.static-site .sqs-block-button-element{display:inline-block;padding:.9em 2.2em;border:1px solid #fff;border-radius:300px;background:#fff;color:#000;font:600 14px/1.2 Poppins,Arial,sans-serif;letter-spacing:.08em;text-decoration:none;transition:background .2s,color .2s}
.static-site .sqs-block-button-element:hover{background:transparent;color:#fff}

/* Photo grids: the last tiles span the empty columns, so a grid never ends on a partial row */
@media(min-width:768px){
.photo-grid .gallery-track>a:last-child:nth-child(4n+1){grid-column:span 4;aspect-ratio:4}
.photo-grid .gallery-track>a:nth-last-child(2):nth-child(4n+1),.photo-grid .gallery-track>a:last-child:nth-child(4n+2){grid-column:span 2;aspect-ratio:2}
.photo-grid .gallery-track>a:last-child:nth-child(4n+3){grid-column:span 2;aspect-ratio:2}
}
@media(max-width:767px){.photo-grid .gallery-track>a:last-child:nth-child(odd){grid-column:span 2;aspect-ratio:2}}

/* Film grid: compact cards, three across on desktop; a swipe carousel on phones */
.film-grid-track{list-style:none;margin:0;padding:0}
.film-card{margin:0;padding:0}.film-card::before{display:none}
.film-card-media{all:unset;box-sizing:border-box;display:block;position:relative;width:100%;aspect-ratio:16/9;background:#111;cursor:pointer;overflow:hidden}
.film-card-media img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.film-card-media:hover img,.film-card-media:focus-visible img{transform:scale(1.03)}
.film-card-media:focus-visible{outline:2px solid #fff;outline-offset:3px}
.film-card-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:54px;height:54px;border-radius:50%;background:#000a;color:#fff;display:flex;align-items:center;justify-content:center;font-size:20px;padding-left:4px;box-sizing:border-box}
.static-site .film-card-title{margin:14px 0 2px;font-size:1.15rem;line-height:1.3}
.static-site .film-card-kind{margin:0 0 8px;font-size:.85rem;opacity:.65}
.static-site .film-card-description{margin:0;font-size:.9rem;line-height:1.6}
@media(min-width:768px){
.film-grid-track{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:44px 28px}
.film-grid-track>[aria-hidden="true"]{display:none}
}
@media(min-width:1100px){.film-grid-track{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:767px){
.film-grid{margin:0 calc(-1 * var(--sqs-mobile-site-gutter,6vw))}
.film-grid-track{display:flex;gap:14px;padding:0 9vw;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.film-grid-track::-webkit-scrollbar{display:none}
.film-card{flex:0 0 82vw;scroll-snap-align:center}
}

/* More film work: one even row on desktop */
@media(min-width:1000px){.work-list ul{grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}.work-list-item{min-height:72px;padding:12px 34px 12px 14px}.work-list-title{font-size:.95rem}.work-list-role{font-size:.8rem}.work-list-play{right:12px}}
@media(min-width:600px) and (max-width:999px){.work-list ul{grid-template-columns:repeat(2,minmax(0,1fr))}.work-list li:last-child:nth-child(odd){grid-column:span 2}}

/* Photo strips: square tiles, five across (2.4 on phones), auto-scrolling; click opens the viewer */
.static-gallery.carousel:not(.portfolio-reel){aspect-ratio:5;min-height:0}
.static-gallery.carousel:not(.portfolio-reel) .gallery-track>a{flex:0 0 20%;cursor:zoom-in}
@media(max-width:767px){.static-gallery.carousel:not(.portfolio-reel){aspect-ratio:2.4}.static-gallery.carousel:not(.portfolio-reel) .gallery-track>a{flex-basis:41.666%}}

/* Resize keeps its place via site.js; the browser's own scroll anchoring would fight it */
html{overflow-anchor:none}

/* Photo strips: room above each gallery title */
.static-site [data-engine-block="photo-navy-text"] :is(h2,h3),.static-site [data-engine-block="photo-mulderdp-text"] :is(h2,h3){margin-top:1.4em}

/* Reels: the centred reel plays (muted loop); the others are dimmed stills */
.portfolio-reel .gallery-track>a img{transition:opacity .4s ease}
.portfolio-reel .gallery-track>a:not(.is-playing) img{opacity:.45}
.reel-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}

/* Film header: "Skip to" with a small button per section */
.static-site .skip-links{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px}
.static-site .skip-links span{opacity:.7;font-size:.9rem}
.static-site .skip-links a{display:inline-block;padding:.45em 1.2em;border:1px solid rgba(255,255,255,.5);border-radius:300px;color:#fff;text-decoration:none;font:600 13px/1.2 Poppins,Arial,sans-serif;letter-spacing:.06em;transition:background .2s,color .2s}
.static-site .skip-links a:hover,.static-site .skip-links a:focus-visible{background:#fff;color:#000}

/* Reels: portrait 2:3 tiles (were 4:5 on desktop and landscape on phones) */
.portfolio-reel,.portfolio-reel .gallery-track{height:auto!important}
.portfolio-reel .gallery-track>a{height:auto!important;aspect-ratio:2/3}
@media(min-width:768px){.static-gallery.portfolio-reel .gallery-track>a{flex:0 0 20%}}
@media(max-width:767px){.static-gallery.portfolio-reel .gallery-track>a{flex:0 0 62%;height:auto!important}}

/* Auto-scroll timer: a short thin line at the bottom centre of each carousel that fills until the next slide */
.carousel-progress{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);width:44px;height:3px;border-radius:2px;background:rgba(255,255,255,.3);overflow:hidden;z-index:3;pointer-events:none}
.carousel-progress span{display:block;height:100%;width:0;background:#fff}
.carousel-progress.is-paused span{opacity:.5}
.film-grid .carousel-progress,.project-carousel .carousel-progress{bottom:-22px}

/* Reels snap to the centre so the playing reel sits in the middle on phones too */
.static-gallery.portfolio-reel .gallery-track>a{scroll-snap-align:center}

/* Reels: fade the clip in once it actually plays, and out when the next reel takes over */
.reel-video{opacity:0;transition:opacity .35s ease}
.reel-video.is-ready{opacity:1}

/* Film card titles open the video too */
.film-card-title .film-card-open{all:unset;cursor:pointer;font:inherit;color:inherit}
.film-card-title .film-card-open:hover{text-decoration:underline;text-underline-offset:4px}
.film-card-title .film-card-open:focus-visible{outline:2px solid #fff;outline-offset:3px}
/* Popup: the full description reads comfortably under the video */
.work-dialog p{line-height:1.6;max-width:70ch}

/* Brand bar under the reels: a slow endless row of wordmarks (or logos once added) */
.logo-bar{padding:8px 0;overflow:hidden}
.static-site .logo-bar-heading{text-align:center;margin:0 0 22px;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;opacity:.6}
.logo-bar-track{display:flex;width:max-content;animation:logo-bar 110s linear infinite}

.logo-bar-list{display:flex;align-items:center;gap:64px;list-style:none;margin:0;padding:0 32px}
.logo-bar-list li{margin:0;padding:0;white-space:nowrap}.logo-bar-list li::before{display:none}
.logo-bar-list span{font:700 1.15rem/1 Poppins,Arial,sans-serif;letter-spacing:.04em;opacity:.55;text-transform:uppercase}
.logo-bar-list img{display:block;height:30px;width:auto;max-width:200px;object-fit:contain;opacity:.75;filter:brightness(0) invert(1)}
@keyframes logo-bar{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.logo-bar-track{animation:none;width:auto;justify-content:center;flex-wrap:wrap}.logo-bar-list[aria-hidden]{display:none}.logo-bar-list{flex-wrap:wrap;justify-content:center;row-gap:20px}}
@media(max-width:767px){.logo-bar-list{gap:40px;padding:0 20px}.logo-bar-list span{font-size:.95rem}.logo-bar-track{animation-duration:85s}}

/* Brand logos as a static, centred row (all on screen at once, no scrolling) */
.logo-bar.is-static .logo-bar-list{flex-wrap:wrap;justify-content:center;gap:28px 56px;padding:0 4vw;max-width:1280px;margin:0 auto}
.logo-bar.is-static .logo-bar-list img{height:26px;max-width:170px}
.logo-bar.is-static .logo-bar-list img[src*="ud-trucks"]{height:34px}.logo-bar.is-static .logo-bar-list img[src*="bentley"]{height:64px;margin:-17px 0}
@media(max-width:767px){.logo-bar.is-static .logo-bar-list{gap:22px 32px}.logo-bar.is-static .logo-bar-list img{height:20px;max-width:120px}.logo-bar.is-static .logo-bar-list img[src*="ud-trucks"]{height:28px}.logo-bar.is-static .logo-bar-list img[src*="bentley"]{height:50px;margin:-14px 0}}

/* Second tier under the headline logos: smaller logos and names */
.logo-bar-secondary .logo-bar{padding-top:0}
.logo-bar-secondary .logo-bar.is-static .logo-bar-list{gap:18px 36px;max-width:1100px}
.logo-bar-secondary .logo-bar.is-static .logo-bar-list img{height:18px;opacity:.6}
.logo-bar-secondary .logo-bar-list span{font-size:.78rem;opacity:.5;letter-spacing:.06em}
@media(max-width:767px){.logo-bar-secondary .logo-bar.is-static .logo-bar-list{gap:14px 24px}.logo-bar-secondary .logo-bar.is-static .logo-bar-list img{height:15px}.logo-bar-secondary .logo-bar-list span{font-size:.7rem}}
/* Scrolling bar below the reels */
[data-engine-block="brands-scroll"] .logo-bar{padding:56px 0 8px}
[data-engine-block="brands-scroll"]{width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);overflow:hidden}
[data-engine-block="brands-scroll"] .logo-bar-list img{height:30px!important;width:auto!important;max-width:220px!important}
[data-engine-block="brands-scroll"] .logo-bar-list img[src*="bentley"],[data-engine-block="brands-scroll"] .logo-bar-list img[src*="ud-trucks"]{height:40px!important}
[data-engine-block="brands-scroll"] .logo-bar{padding:0 0 24px}

/* Photography: section titles sit close to their own text and photos, with room above */
.static-site [data-engine-block^="photo-"][data-engine-block$="-text"] h2{margin-bottom:.15em}
.static-site [data-engine-block^="photo-"][data-engine-block$="-text"] p{margin-top:0}
.static-site [data-engine-block="photo-navy-text"] :is(h2,h3),.static-site [data-engine-block="photo-mulderdp-text"] :is(h2,h3){margin-top:2.2em}
/* Software cards: no single orphaned word on the second line */
.static-site [data-engine-block^="sw-"][data-engine-block$="-text"] p,.project-carousel-card p{text-wrap:balance}
[data-engine-block^="sw-"][data-engine-block$="-loop"]{cursor:pointer}
/* Skip-to: label on its own line, buttons centred under it */
.static-site .skip-links span{flex-basis:100%;text-align:center;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;opacity:.55;margin-bottom:2px}
/* Header: same black as the page, with a hairline instead of a grey slab */
.site-header{background:#000;border-bottom:1px solid rgba(255,255,255,.08)}
.site-navigation nav{background:#000;border:1px solid rgba(255,255,255,.08)}

/* Video popup: description on the left, project facts on the right */
/* Width limited by the window height too, so the 16:9 video plus the info under it (--dialog-info) fit without
   scrolling on laptop and desktop windows; on very short windows it stops shrinking at 480px and scrolls instead */
.work-dialog{--dialog-info:320px;width:min(1100px,calc(100vw - 32px),max(calc((100dvh - 32px - var(--dialog-info)) * 16 / 9),480px));max-height:calc(100dvh - 32px);overflow:auto}
.work-dialog-body{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:12px 40px;padding:6px 28px 26px}
.work-dialog-body .work-dialog-text>*{margin-left:0;margin-right:0}
.work-dialog h3{font-size:1.5rem;margin-top:18px}
.work-dialog .work-dialog-kind{opacity:.6;font-size:.9rem;margin-top:4px}
.work-dialog .work-dialog-kind:empty{display:none}
.work-dialog-facts{margin:22px 0 0;display:grid;grid-template-columns:auto 1fr;gap:10px 16px;align-content:start;font-size:.88rem;border-left:1px solid rgba(255,255,255,.15);padding-left:22px}
.work-dialog-facts dt{opacity:.55;text-transform:uppercase;letter-spacing:.08em;font-size:.72rem;padding-top:2px}
.work-dialog-facts dd{margin:0;line-height:1.5}
.work-dialog-facts[hidden]{display:none}
@media(max-width:767px){.work-dialog-body{grid-template-columns:1fr;padding:4px 18px 20px}.work-dialog-facts{border-left:0;border-top:1px solid rgba(255,255,255,.15);padding:16px 0 0;margin-top:10px}}

/* Scroll motion (site.js adds .motion only when motion is allowed) */
.motion .reveal{opacity:0;transform:translate3d(0,28px,0);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1);transition-delay:var(--reveal-delay,0ms);will-change:opacity,transform}
.motion .reveal.is-in{opacity:1;transform:none}
.motion .logo-bar-list li.reveal{transform:translate3d(0,14px,0) scale(.96)}
.motion .logo-bar-list li.reveal.is-in{transform:none}
.motion hr{transform-origin:center;transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.motion .reveal:not(.is-in) hr{transform:scaleX(0)}
main section .section-background{will-change:transform}
/* Small hover touches */
.film-card{transition:transform .35s cubic-bezier(.2,.7,.2,1)}
@media(hover:hover){.film-card:hover{transform:translateY(-4px)}
.logo-bar-list img,.logo-bar-list span{transition:opacity .25s}
.logo-bar.is-static .logo-bar-list li:hover img,.logo-bar.is-static .logo-bar-list li:hover span{opacity:1}
[data-engine-block^="sw-"][data-engine-block$="-loop"] video{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
[data-engine-block^="sw-"][data-engine-block$="-loop"]:hover video{transform:scale(1.03)}
.static-gallery.carousel .gallery-track>a img{transition:transform .5s cubic-bezier(.2,.7,.2,1),opacity .4s}
.static-gallery.carousel:not(.portfolio-reel) .gallery-track>a:hover img{transform:scale(1.04)}}
@media(prefers-reduced-motion:reduce){.film-card,.film-card:hover{transform:none}}
main > section:first-of-type,main section:has(> .section-background){overflow:hidden}
[data-engine-block="photo-navy-text"],[data-engine-block="photo-mulderdp-text"]{padding-top:64px}
@media(max-width:767px){[data-engine-block="photo-navy-text"],[data-engine-block="photo-mulderdp-text"]{padding-top:40px}}
.logo-bar-list img[src*="free-a-girl"]{height:28px!important}.logo-bar-list img[src*="jola-mulder"]{height:34px!important;margin:-6px 0}

/* Brand logos on an even grid: 5 per row up top, 6 per row below (2 / 3 on phones) */
.logo-bar.is-static .logo-bar-list{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));justify-items:center;align-items:center;gap:30px 24px;max-width:1100px}
.logo-bar-secondary .logo-bar.is-static .logo-bar-list{grid-template-columns:repeat(6,minmax(0,1fr));gap:22px 18px;max-width:1100px}
.logo-bar-list li.has-name{display:flex;align-items:center;gap:8px}
.logo-bar-list li.has-name span{font-size:.8rem}
.logo-bar-list img[src*="trimm"],.logo-bar-list img[src*="festipi"],.logo-bar-list img[src*="aeroclub"]{height:22px!important}
.logo-bar-list img[src*="broekman"],.logo-bar-list img[src*="fietscity"]{height:20px!important}
@media(max-width:767px){
.logo-bar.is-static .logo-bar-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px}
.logo-bar-secondary .logo-bar.is-static .logo-bar-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 10px}
.logo-bar-list li.has-name span{font-size:.62rem}}
/* Video popup: fade at the bottom while there's more text below */
.work-dialog::after{content:'';position:sticky;bottom:0;display:block;height:40px;margin-top:-40px;background:linear-gradient(rgba(17,17,17,0),#111);pointer-events:none;opacity:0;transition:opacity .25s}
.work-dialog.has-more::after{opacity:1}
.logo-bar.is-static .logo-bar-list li{text-align:center;min-width:0}
.logo-bar.is-static .logo-bar-list span{white-space:normal;line-height:1.3}
.logo-bar.is-static .logo-bar-list img{max-width:100%}
@media(max-width:767px){.logo-bar-secondary .logo-bar.is-static .logo-bar-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 14px}.logo-bar-secondary .logo-bar.is-static .logo-bar-list img{height:16px}}
.logo-bar-list li.has-name img[src*="jola"]{height:26px!important;margin:0!important}
/* Second tier: equal cells, wrapping rows centred (works for any number of brands) */
.logo-bar-secondary .logo-bar.is-static .logo-bar-list{display:flex;flex-wrap:wrap;justify-content:center;gap:22px 0}
.logo-bar-secondary .logo-bar.is-static .logo-bar-list li{flex:0 0 calc(100% / 7);display:flex;justify-content:center;align-items:center;padding:0 8px;box-sizing:border-box}
@media(max-width:767px){.logo-bar-secondary .logo-bar.is-static .logo-bar-list li{flex-basis:50%}}
.logo-bar-list img[src*="philips-hue"]{height:30px!important}.logo-bar-list img[src*="icom"]{height:24px!important}
.logo-bar.is-static .logo-bar-list img[src*="thetford"]{height:17px}
.logo-bar.is-static .logo-bar-list img[src*="philips-hue"]{height:40px!important}
.logo-bar.is-static .logo-bar-list img[src*="dsm"]{height:32px}
@media(max-width:767px){.logo-bar.is-static:not(.logo-bar-secondary *) .logo-bar-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 12px}
.logo-bar.is-static .logo-bar-list img{max-width:100%}
.logo-bar.is-static .logo-bar-list img[src*="thetford"]{height:12px}}
@media(min-width:768px){.logo-bar-secondary .logo-bar.is-static .logo-bar-list{max-width:1240px}.logo-bar-secondary .logo-bar.is-static .logo-bar-list li{flex-basis:12.5%}}
.logo-bar-list img[src*="erik-sille"]{height:26px!important}

/* Type system: Instrument Sans for reading and UI (font from site.json theme.bodyFont), Poppins for display */
:root{--font-ui:var(--body-font-font-family,'Instrument Sans','Instrument Sans Fallback',Arial,sans-serif);--font-display:Poppins,'Helvetica Neue',Arial,sans-serif;--text-2:rgba(255,255,255,.74);--text-3:rgba(255,255,255,.58);--rule:rgba(255,255,255,.14);--body-font-line-height:1.65}
body{font-family:var(--font-ui);font-kerning:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
.static-site .sqs-html-content p,.static-site .sqs-html-content li{font-size:17px;line-height:1.65;letter-spacing:.002em}
.static-site .sqs-html-content h3{letter-spacing:-.005em}
.static-site .sqs-html-content a{text-underline-offset:.22em;text-decoration-thickness:1px}
@media(max-width:767px){.static-site .sqs-html-content p,.static-site .sqs-html-content li{font-size:16px;line-height:1.6}}
/* One label style for small captions: Skip to, section numbers, card kinds, logo heading, popup facts, footer */
.static-site .skip-links span,.static-site .film-card-kind,.static-site .logo-bar-heading,.work-dialog .work-dialog-kind,.work-dialog-facts dt,.site-footer .footer-label,.footer-bottom,.static-site h2.section-heading::before{font:500 11.5px/1.4 var(--font-ui);letter-spacing:.17em;text-transform:uppercase;color:var(--text-3);opacity:1}
.static-site .skip-links span,.static-site .logo-bar-heading{padding-left:.17em}
/* Hero intro and section intros */
.static-site .hero-intro p{font-size:clamp(17px,1.35vw,19.5px);line-height:1.6;color:rgba(255,255,255,.88)}
.static-site .hero-intro p+p{margin-top:1em}
.static-site .section-heading+p{max-width:40em;margin-left:auto;margin-right:auto;font-size:18px;color:var(--text-2);text-wrap:balance}
@media(max-width:767px){.static-site .hero-intro p{font-size:17px}.static-site .section-heading+p{font-size:16px}}
/* Section numbers: headings with class "section-heading" are numbered 01, 02, … in page order, with a hairline */
main{counter-reset:section-heading}
.static-site h2.section-heading{scroll-margin-top:40px}
.static-site h2.section-heading::before{content:counter(section-heading,decimal-leading-zero);content:counter(section-heading,decimal-leading-zero) / "";counter-increment:section-heading;display:block;width:max-content;margin:0 auto 22px;padding:0 46px 0 .17em;font-variant-numeric:tabular-nums;background:linear-gradient(rgba(255,255,255,.35),rgba(255,255,255,.35)) right center/32px 1px no-repeat}
.personal-portfolio #photography.section-heading{padding-top:0}
@media(max-width:767px){.static-site h2.section-heading::before{margin-bottom:16px;padding-right:38px;background-size:26px 1px}}
/* Facts row under the hero intro (proofstrip block): figure over a small label, three even columns */
.static-site .proof-strip{display:grid;grid-template-columns:repeat(3,minmax(0,auto));justify-content:start;gap:20px clamp(24px,3vw,48px);margin:32px 0 56px;padding:24px 0 0;border-top:1px solid var(--rule);list-style:none}
.static-site .proof-strip li{display:flex;flex-direction:column;gap:6px;margin:0;padding:0;min-width:0}
.static-site .proof-strip li::before{content:none;display:none}
.static-site .proof-strip strong{font:600 clamp(22px,1.8vw,26px)/1.1 var(--font-display);letter-spacing:-.01em;color:#fff;white-space:nowrap}
.static-site .proof-strip span{font:500 13px/1.4 var(--font-ui);color:var(--text-3)}
@media(max-width:767px){.static-site .proof-strip{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:8px 0 0;padding-top:20px}.static-site .proof-strip strong{font-size:21px}.static-site .proof-strip span{font-size:12px}}
/* Film cards, more film work, popup */
.static-site .film-card-title{margin:18px 0 6px;font-family:var(--font-display);font-size:18px;font-weight:500;line-height:1.3;letter-spacing:-.005em}
.static-site .film-card-kind{margin:0 0 10px}
.static-site .film-card-description{font-size:14.5px;line-height:1.6;color:var(--text-2)}
.work-list-title{font:600 14.5px/1.3 var(--font-ui);letter-spacing:.005em}
.work-list-role{font-size:12.5px;color:var(--text-3);opacity:1}
@media(min-width:1000px){.work-list-title{font-size:14px}.work-list-role{font-size:12px}}
.work-dialog{font-family:var(--font-ui)}
.work-dialog h3{font-family:var(--font-display);font-weight:500;font-size:28px;line-height:1.2;letter-spacing:-.01em}
.work-dialog .work-dialog-kind{margin-top:8px}
.work-dialog p{font-size:16px;line-height:1.7;color:var(--text-2)}
.work-dialog-facts{font-size:14px}.work-dialog-facts dt{padding-top:2px}
.work-dialog .work-dialog-text a{width:max-content;max-width:100%;text-decoration:underline;text-decoration-color:rgba(255,255,255,.35);text-decoration-thickness:1px;text-underline-offset:.3em;transition:text-decoration-color .2s}
.work-dialog .work-dialog-text a:hover,.work-dialog .work-dialog-text a:focus-visible{text-decoration-color:#fff}
@media(max-width:767px){.work-dialog h3{font-size:22px}.work-dialog p{font-size:15px}}
/* Small UI */
.static-site .skip-links a{font:500 13px/1.2 var(--font-ui);letter-spacing:.03em;padding:.55em 1.3em;border-color:rgba(255,255,255,.35)}
.static-site .sqs-block-button-element{font:600 12.5px/1.2 var(--font-ui);letter-spacing:.18em;padding:1.1em 2.6em}
.video-fallback{font:500 12px/1.4 var(--font-ui);letter-spacing:.02em}
.reel-label{font-family:var(--font-ui)}
.image-lightbox figcaption{font:400 14px/1.6 var(--font-ui);color:var(--text-2)}
.site-navigation summary{font:600 12.5px/1 var(--font-ui);letter-spacing:.2em;text-transform:uppercase}
.site-navigation nav a{font:500 14px/1.3 var(--font-ui);letter-spacing:.14em}
@media(max-width:767px){.mobile-nav-label{font-size:12.5px}.site-navigation nav a{font:500 20px/1.3 var(--font-display);letter-spacing:.04em}}
.contact-form,.error-page{font-family:var(--font-ui)}.error-page h1{font-family:var(--font-display)}
/* Back to top lands on the header (id="top", focusable so keyboard focus moves too) */
.site-header:focus{outline:none}
/* Contact: same black as the header and footer, no seam */
.personal-portfolio:has(.personal-contact){background:#000}

/* ---------- Footer v2 ----------
   Content from site.json; pages choose "full" or "minimal". Everything sits on a 12-column grid with the page's
   11px gap, so the columns line up with the 24-column content grid above.
   Full: closing line and address on columns 1-5, then Elsewhere (logos), Resources and Based in across 7-12.
   Minimal (home, contact, 404): the columns share the whole width evenly. Phones: logos in a row, then two columns.
   The local time under Based in is filled by the "Footer clock" block in site.js and stays hidden without it. */
.site-footer.has-content{position:relative;z-index:1;background:#000;color:#fff;font-family:var(--font-ui);border-top:1px solid var(--rule);padding:clamp(64px,7vw,104px) 4vw 30px}
.site-footer.is-minimal{padding-top:clamp(56px,6vw,88px)}
.footer-inner{max-width:1500px;margin:0 auto}
.footer-main{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:56px 11px;align-items:start}
.footer-contact{grid-column:1/span 5}
.footer-groups{grid-column:7/-1;display:grid;grid-template-columns:repeat(var(--footer-cols,3),minmax(0,1fr));gap:40px 11px;align-self:start}
.is-minimal .footer-groups{grid-column:1/-1}
@media(min-width:768px) and (max-width:1199px){.footer-contact{grid-column:1/span 4}.footer-groups{grid-column:5/-1;column-gap:24px}.is-minimal .footer-groups{grid-column:1/-1;column-gap:11px}}
.site-footer .footer-signoff{margin:0;font:600 clamp(26px,2.6vw,40px)/1.15 var(--font-display);letter-spacing:-.01em;color:#fff;text-wrap:balance}
.site-footer .footer-email{margin:32px 0 0;display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.site-footer .footer-label{display:block;margin:0 0 18px;padding:0;white-space:normal}
/* the theme forces mobile h2 sizes with !important; group titles are h2s but stay labels */
.site-footer h2.footer-label{font-size:11.5px!important}
.site-footer .footer-email .footer-label{margin:0}
.site-footer .footer-email a{max-width:100%;padding-bottom:5px;font-size:clamp(18px,1.5vw,22px);line-height:1.3;letter-spacing:-.005em;color:#fff;text-decoration:none;overflow-wrap:anywhere;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;transition:background-size .45s cubic-bezier(.2,.7,.2,1)}
.site-footer .footer-email a:hover,.site-footer .footer-email a:focus-visible{background-size:35% 1px}
.site-footer .footer-group ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.site-footer .footer-group li,.site-footer .footer-place p{margin:0;padding:0;font-size:15.5px;line-height:1.35}
.site-footer .footer-group li::before{content:none;display:none}
.site-footer .footer-group a{color:rgba(255,255,255,.86);text-decoration:none;transition:color .2s}
.site-footer .footer-group a:hover,.site-footer .footer-group a:focus-visible{color:#fff;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.25em}
.footer-arrow{display:inline-block;width:.7em;height:.7em;margin-left:.4em;vertical-align:.02em;color:var(--text-3);transition:transform .25s,color .25s}
.footer-group a:hover .footer-arrow,.footer-group a:focus-visible .footer-arrow{transform:translate(2px,-2px);color:#fff}
.site-footer .footer-note{display:block;margin-top:5px;font-size:12px;color:var(--text-3)}
/* Elsewhere as logos: one even row, 70% white to full on hover; the padding makes a bigger target without
   moving the glyphs off the column edge. Glyph sizes are balanced by eye: the solid YouTube and LinkedIn shapes
   read heavier than the outlined Instagram and the open Vimeo mark, so LinkedIn steps down. */
.site-footer .footer-group ul.footer-icons{display:flex;flex-wrap:wrap;align-items:center;gap:0 7px;margin:-6px 0 -6px -6px}
.site-footer .footer-group .footer-icons li{display:block;font-size:0;line-height:0}
.site-footer .footer-group .footer-icon-link{display:flex;align-items:center;justify-content:center;height:22px;padding:6px;box-sizing:content-box;color:rgba(255,255,255,.7);text-decoration:none;transition:color .2s}
.site-footer .footer-group .footer-icon-link:hover,.site-footer .footer-group .footer-icon-link:focus-visible{color:#fff;text-decoration:none}
.site-footer .footer-icon-link:focus-visible{outline-offset:0}
.site-footer .footer-icon{display:block;width:20px;height:20px}
.site-footer .is-linkedin .footer-icon{width:18px;height:18px}
/* Based in: place, live local time, then the CV */
.site-footer .footer-city{color:rgba(255,255,255,.86)}
.site-footer .footer-place .footer-time{margin-top:12px;color:var(--text-3);font-variant-numeric:tabular-nums}
.site-footer .footer-time[hidden]{display:none}
.site-footer .footer-place .footer-cv{margin-top:24px}
.site-footer .footer-cv .footer-arrow{vertical-align:-.04em}
.footer-group .footer-cv a:hover .footer-arrow,.footer-group .footer-cv a:focus-visible .footer-arrow{transform:translateY(2px)}
.footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 24px;margin-top:clamp(56px,6vw,96px);padding-top:24px;border-top:1px solid var(--rule)}
.is-minimal .footer-bottom{margin-top:clamp(48px,5vw,72px)}
.site-footer .footer-copyright{margin:0;font:inherit;letter-spacing:inherit}
.site-footer .footer-top{display:inline-flex;align-items:center;color:inherit;text-decoration:none;transition:color .2s}
.site-footer .footer-top .footer-arrow{margin-left:.6em;color:inherit}
.site-footer .footer-top:hover,.site-footer .footer-top:focus-visible{color:#fff}.footer-top:hover .footer-arrow{transform:translateY(-3px)}
@media(max-width:767px){.site-footer.has-content{padding:64px 6vw 26px}.site-footer.is-minimal{padding-top:52px}.footer-main{grid-template-columns:minmax(0,1fr);gap:48px}.footer-contact,.footer-groups,.is-minimal .footer-groups{grid-column:1/-1}.footer-groups{grid-template-columns:repeat(2,minmax(0,auto));justify-content:space-between;gap:40px 16px}.footer-group.has-logos{grid-column:1/-1}.site-footer .footer-email{margin-top:24px}.site-footer .footer-group li,.site-footer .footer-place p{font-size:15px}.site-footer .footer-group ul.footer-icons{gap:0 2px;margin:-9px 0 -9px -9px}.site-footer .footer-group .footer-icon-link{padding:9px}.footer-bottom,.is-minimal .footer-bottom{margin-top:48px}}
@media(max-width:374px){.site-footer .footer-group li,.site-footer .footer-place p{font-size:14.5px}}
@media(max-width:359px){.footer-groups{grid-template-columns:minmax(0,1fr)}}
/* ---------- end Footer v2 ---------- */

/* Polish round C. Page transitions and the carousel edges are plain CSS; everything else below only applies under
   classes that site.js adds (smart-header, blur-up) or to elements it creates, so without the script the page
   behaves as before. With reduced motion nothing animates. */
/* Page transitions: a short crossfade between pages with a slight upward settle; the header stays put */
@view-transition{navigation:auto}
.site-header{view-transition-name:site-header}
::view-transition-old(root){animation:vt-out .24s cubic-bezier(.4,0,1,1) both}
::view-transition-new(root){animation:vt-in .34s cubic-bezier(.2,.7,.2,1) .04s both}
::view-transition-group(site-header){animation-duration:.3s;animation-timing-function:cubic-bezier(.2,.7,.2,1)}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0;transform:translate3d(0,10px,0)}}
@media(prefers-reduced-motion:reduce){@view-transition{navigation:none}::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}
/* Smart header: sticks, slides away while reading down, comes back translucent on any scroll up. Solid at the top.
   Its height never changes, so sticking it causes no layout shift. The scroll padding keeps things the browser
   scrolls to (keyboard focus, find in page) clear of it. */
html.smart-header{scroll-padding-top:calc(var(--static-header-height,114px) + 12px)}
html.smart-header .site-header{position:sticky;top:0;transition:transform .32s cubic-bezier(.2,.7,.2,1),background-color .32s ease}
html.smart-header .site-header.is-scrolled{background:rgba(0,0,0,.6);-webkit-backdrop-filter:blur(16px) saturate(1.15);backdrop-filter:blur(16px) saturate(1.15);border-bottom-color:rgba(255,255,255,.08)}
html.smart-header .site-header.is-hidden{transform:translate3d(0,-100%,0)}
/* sections that a same-page link moved focus to don't get a focus ring around the whole block */
:is(main,section,h1,h2,h3)[tabindex="-1"]:focus{outline:none}
/* Blur-up: photos and posters arrive from a soft blur, once. Not logos, brand bars or the hero. A keyframe animation
   rather than a transition, inside :where() so it has no specificity: it never competes with the cards' own
   transitions, transforms (hover zoom) or opacity (dimmed reels, hover previews). */
:where(html.blur-up) :where(.film-card-media,.video-poster,.static-gallery .gallery-track a) img:where(:not(.is-loaded)){opacity:0}
:where(html.blur-up) :where(.film-card-media,.video-poster,.static-gallery .gallery-track a) img:where(.is-loaded:not(.no-fade)){animation:blur-in .6s cubic-bezier(.2,.7,.2,1)}
@keyframes blur-in{from{opacity:0;filter:blur(12px)}to{filter:none}}
:where(html.blur-up .static-gallery:not(.portfolio-reel) .gallery-track>a){background:#0e0e0e}
/* Cursor tag: a small dark-glass label that rides beside the system cursor (never replacing it), 14px right of and
   12px below the hotspot so it clears the arrow; .flip-x / .flip-y move it left of or above the pointer near the
   window edges, with a small gap since the arrow doesn't reach that side. It grows in from the pointer side. The
   darker fill and a faint text shadow keep the label legible over bright, hazy frames too. */
.cursor{position:fixed;left:0;top:0;z-index:2147483000;pointer-events:none}
.cursor-label{position:absolute;left:14px;top:12px;display:flex;align-items:center;height:30px;padding:0 14px;border:1px solid rgba(255,255,255,.22);border-radius:999px;background:rgba(0,0,0,.38);-webkit-backdrop-filter:blur(12px) saturate(1.3);backdrop-filter:blur(12px) saturate(1.3);color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.35);white-space:nowrap;opacity:0;transform:scale(.5);transform-origin:0 0;transition:opacity .3s ease,transform .3s cubic-bezier(.2,.7,.2,1)}
.cursor.flip-x .cursor-label{left:auto;right:6px;transform-origin:100% 0}
.cursor.flip-y .cursor-label{top:auto;bottom:6px;transform-origin:0 100%}
.cursor.flip-x.flip-y .cursor-label{transform-origin:100% 100%}
.cursor.is-visible .cursor-label{opacity:1;transform:none}
.cursor-label span{padding-left:.17em;font:500 11.5px/1 var(--font-ui);letter-spacing:.17em;text-transform:uppercase}
/* Carousel edges: the photo strips, the reels and the scrolling brand bar soften towards their left and right ends,
   mostly with a light blur that tapers to nothing (a mask on the blur itself) and only a hint of shade, so they read
   as continuing past the frame. Above the track, below the arrows and the timer line, click-through, and clipped
   by the strips' rounded corners. --edge-bg is the colour the shade fades towards on a non-black section. */
.static-gallery.carousel,.logo-bar:not(.is-static){--edge-w:clamp(24px,6vw,96px);position:relative}
:is(.static-gallery.carousel,.logo-bar:not(.is-static))::before,:is(.static-gallery.carousel,.logo-bar:not(.is-static))::after{content:'';position:absolute;top:0;bottom:0;z-index:1;width:var(--edge-w);pointer-events:none;background:linear-gradient(to right,rgba(0,0,0,.12),rgba(0,0,0,0));background:linear-gradient(to right,color-mix(in srgb,var(--edge-bg,#000) 12%,transparent),transparent);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);-webkit-mask-image:linear-gradient(to right,#000,transparent);mask-image:linear-gradient(to right,#000,transparent)}
:is(.static-gallery.carousel,.logo-bar:not(.is-static))::before{left:0}
:is(.static-gallery.carousel,.logo-bar:not(.is-static))::after{right:0;transform:scaleX(-1)}
.static-gallery.carousel .gallery-controls{z-index:2}
/* Media corners: freestanding videos, posters and photos get a slight radius (on the wrapper, which also clips, so
   hover zooms keep their corners). Not the full-bleed hero, the full-width reels strip, logos, the viewer or popup. */
:root{--radius-media:6px}
@media(max-width:767px){:root{--radius-media:4px}}
.static-video,.film-card-media,.project-carousel-media,.static-gallery.carousel:not(.portfolio-reel){border-radius:var(--radius-media);overflow:hidden}
/* Photo strips round only their outer ends (the strip itself), not each tile; the reels stay square. The two home showreels get a slightly larger radius. */
#collection-5e3868f05e5bd768829bb00d .static-video{border-radius:calc(var(--radius-media) * 2)}
.static-site .sqs-block-image img{border-radius:var(--radius-media)}
/* Photo viewer: a dissolve. The incoming photo comes up quickly under the outgoing one, which fades (and drifts)
   out on top, so the picture never dips through black. Swipe anywhere on touch screens. */
.image-lightbox{touch-action:pan-y pinch-zoom}
.image-lightbox button{z-index:2}
.image-lightbox figure{-webkit-user-select:none;user-select:none}
.image-lightbox figure img{transition:opacity .14s ease,transform .28s cubic-bezier(.2,.7,.2,1)}
.image-lightbox figure img.is-entering{opacity:0;transform:translate3d(var(--enter-x,0),0,0);transition:none}
.image-lightbox figure img.is-dragging{transition:none}
.image-lightbox .lightbox-ghost{position:fixed;z-index:1;margin:0;max-width:none;max-height:none;object-fit:contain;pointer-events:none;transition:opacity .28s ease,transform .28s cubic-bezier(.2,.7,.2,1)}
.image-lightbox figcaption{transition:opacity .2s ease}
.image-lightbox figcaption.is-entering{opacity:0;transition:none}

/* Polish B: hero loop. The first section's background is a muted film over its poster (section background with
   an uploaded video); site.js fades it in once it really plays. The scrim melts the bottom into the page black.
   The left and right edges get a slight blur that tapers to nothing (no dimming), like the carousels. The toggle
   pauses it (WCAG 2.2.2). */
.section-background picture{display:contents}
.background-loop-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.4s cubic-bezier(.2,.7,.2,1)}
.background-loop-video.is-playing{opacity:1}
.section-background:has(> .background-loop-video)::before,.section-background:has(> .background-loop-video)::after{content:'';position:absolute;top:0;bottom:0;z-index:1;width:clamp(32px,7vw,120px);pointer-events:none;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);-webkit-mask-image:linear-gradient(to right,#000,transparent);mask-image:linear-gradient(to right,#000,transparent)}
.section-background:has(> .background-loop-video)::before{left:0}
.section-background:has(> .background-loop-video)::after{right:0;-webkit-mask-image:linear-gradient(to left,#000,transparent);mask-image:linear-gradient(to left,#000,transparent)}
.background-scrim{position:absolute;inset:0;pointer-events:none;background:linear-gradient(to top,#000 0,rgba(0,0,0,.62) 16%,rgba(0,0,0,.18) 44%,rgba(0,0,0,0) 62%)}
.background-loop-toggle{position:absolute;right:calc(4vw - 8px);bottom:12px;z-index:2;display:inline-flex;align-items:center;gap:10px;min-height:32px;margin:0;padding:6px 8px;border:0;background:none;color:var(--text-3);font:500 11.5px/1 var(--font-ui);letter-spacing:.17em;text-transform:uppercase;cursor:pointer;transition:color .2s}
.background-loop-toggle[hidden]{display:none}
.background-loop-toggle:hover,.background-loop-toggle:focus-visible{color:#fff}
.background-loop-toggle:focus-visible{outline:2px solid #fff;outline-offset:2px}
.background-loop-icon{display:block;width:7px;height:9px;border:solid currentColor;border-width:0 2px;box-sizing:border-box;transform:translateY(-1px)}
.background-loop-toggle.is-paused .background-loop-icon{width:0;height:0;border-width:4.5px 0 4.5px 7px;border-color:transparent transparent transparent currentColor}
@media(max-width:767px){.background-loop-toggle{right:calc(6vw - 8px);bottom:8px}}
/* Wider screens: a 2.39:1 film band (never taller than most of the screen), with the headline section pulled up
   into its fade, so the film runs into the headline instead of ending in a hard edge. Phones keep their crop. */
@media(min-width:768px){
main .page-section:has(> .section-border .background-loop-video){min-height:min(calc(100vw / 2.39),calc(80vh - var(--static-header-height,114px)))!important}
main .page-section:has(> .section-border .background-loop-video)+.page-section{position:relative;z-index:1;margin-top:calc(-1 * clamp(56px,8vw,128px))}
main .page-section:has(> .section-border .background-loop-video)+.page-section>.section-border,main .page-section:has(> .section-border .background-loop-video)+.page-section>.section-border>.section-background{background:transparent}
.background-scrim{background:linear-gradient(to top,#000 0,rgba(0,0,0,.85) 14%,rgba(0,0,0,.35) 38%,rgba(0,0,0,0) 60%)}
.background-loop-toggle{bottom:calc(clamp(56px,8vw,128px) + 14px)}
}

/* Polish B: film card previews (desktop). A short muted loop fades in over the poster while the card is hovered or
   focused; the poster stays underneath, so there is never a black frame, and both zoom together. */
.film-card-media img,.film-card-preview{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.film-card-preview{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;pointer-events:none;transition:opacity .25s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.film-card-preview.is-playing{opacity:1}
.film-card-media:hover .film-card-preview,.film-card-media:focus-visible .film-card-preview,.film-card:has(.film-card-title .film-card-open:focus-visible) .film-card-media :is(img,.film-card-preview){transform:scale(1.03)}
.film-card-play{transition:opacity .25s ease,transform .3s ease,background .2s}
.film-card-media.is-previewing .film-card-play{opacity:0}
.film-card[aria-hidden="true"] .film-card-preview{display:none}

/* Polish B: showreels that start by themselves. The player loads under the poster, then fades in as the poster
   fades out (site.js), so there's no black flash. */
.showreel-frame{opacity:0;transition:opacity .6s ease}
.showreel-frame.is-ready{opacity:1}
.video-poster{transition:opacity .6s ease}
.video-poster.is-leaving{opacity:0;pointer-events:none}

/* ---------- Polish D ----------
   Text reveals, the hero headline entrance, the photo viewer's counter and captions, and the contact form. The
   reveals only apply under classes site.js adds (motion, reveal-text) and the entrance under html.hero-enter, set by
   a line of script in the head of pages that have the headline; without either, everything is simply visible. With
   reduced motion nothing animates (the global rule above). */
/* Text reveals: headings, intro lines, card text, the facts row and the footer columns rise 12px, one after another */
.motion .reveal-text{opacity:0;transform:translate3d(0,12px,0);transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1);transition-delay:var(--reveal-delay,0ms)}
.motion .reveal-text.is-in{opacity:1;transform:none}
/* Hero headline entrance (first load in a session): FILM, PHOTO, SOFTWARE rise in one after another from 250ms,
   then the intro and the facts fade in. The lines are inline-blocks (a transform needs a box) with the same line
   boxes as plain text, so nothing shifts; "both" keeps them hidden until their turn. */
html.hero-enter .hero-headline span{display:inline-block;animation:hero-line .7s cubic-bezier(.2,.7,.2,1) both}
html.hero-enter .hero-headline span:nth-of-type(1){animation-delay:.25s}
html.hero-enter .hero-headline span:nth-of-type(2){animation-delay:.37s}
html.hero-enter .hero-headline span:nth-of-type(3){animation-delay:.49s}
html.hero-enter .hero-intro{animation:hero-fade .7s ease-out .9s both}
html.hero-enter .proof-strip li{animation:hero-fade .6s ease-out both;animation-delay:calc(1.15s + var(--hero-i,0) * 60ms)}
html.hero-enter .proof-strip li:nth-child(2){--hero-i:1}html.hero-enter .proof-strip li:nth-child(3){--hero-i:2}html.hero-enter .proof-strip li:nth-child(4){--hero-i:3}
@keyframes hero-line{from{opacity:0;transform:translate3d(0,16px,0)}to{opacity:1;transform:none}}
@keyframes hero-fade{from{opacity:0}to{opacity:1}}
/* Photo viewer: "12 / 28" bottom left in the label style, outside the figure so it never fades with the photos;
   the caption (from the gallery item, at most two lines) sits under the photo and takes no room when empty */
.lightbox-counter{position:absolute;left:24px;bottom:20px;z-index:2;margin:0;font:500 11.5px/1.4 var(--font-ui);letter-spacing:.17em;text-transform:uppercase;color:var(--text-3);font-variant-numeric:tabular-nums;pointer-events:none}
.image-lightbox figcaption{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;max-height:none;margin:14px auto 0;max-width:min(850px,100%);white-space:normal;text-wrap:balance}
.image-lightbox figcaption:empty{display:none}
@media(max-width:767px){.lightbox-counter{left:16px;bottom:16px}.image-lightbox figcaption{font-size:13px;margin-top:10px;-webkit-line-clamp:3;line-clamp:3}}
/* Contact form: underlined fields, labels in the label style, a text button with the footer's arrow. No boxes. */
.contactform{position:relative;max-width:560px;margin:40px 0 56px;font-family:var(--font-ui)}
.contact-heading{margin:0 0 28px;font:500 11.5px/1.4 var(--font-ui);letter-spacing:.17em;text-transform:uppercase;color:var(--text-3)}
.contact-field{margin:0 0 26px}
.contact-label{display:block;margin:0 0 4px;font:500 11.5px/1.4 var(--font-ui);letter-spacing:.17em;text-transform:uppercase;color:var(--text-3);transition:color .2s}
.contact-field:focus-within .contact-label{color:#fff}
.contactform input:not([type=hidden]),.contactform textarea{display:block;width:100%;min-width:0;margin:0;padding:10px 0 11px;border:0;border-bottom:1px solid rgba(255,255,255,.28);border-radius:0;background:transparent;color:#fff;font:400 17px/1.5 var(--font-ui);-webkit-appearance:none;appearance:none;transition:border-color .2s,box-shadow .2s}
.contactform textarea{resize:vertical;min-height:132px}
.contactform input:focus-visible,.contactform textarea:focus-visible{outline:none;border-bottom-color:#fff;box-shadow:0 1px 0 #fff}
.contactform input:-webkit-autofill,.contactform textarea:-webkit-autofill{-webkit-text-fill-color:#fff;-webkit-box-shadow:0 0 0 1000px #000 inset;transition:background-color 9999s}
.contact-field.is-invalid input,.contact-field.is-invalid textarea{border-bottom-color:rgba(255,138,128,.85)}
.personal-contact .contact-error{margin:8px 0 0;font-size:13.5px;line-height:1.5;color:#f4a79f}
.contact-error[hidden]{display:none}
.contact-trap{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.contact-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;margin-top:6px}
.contact-submit{position:relative;display:inline-flex;align-items:center;margin:0;padding:6px 0 7px;border:0;border-radius:0;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;color:#fff;font:500 15.5px/1.3 var(--font-ui);letter-spacing:.01em;cursor:pointer;transition:background-size .45s cubic-bezier(.2,.7,.2,1),opacity .2s}
.contact-submit::after{content:'';position:absolute;inset:-6px -8px}
.contact-submit:hover,.contact-submit:focus-visible{background-size:35% 1px}
.contact-submit .footer-arrow{vertical-align:0;transition:transform .25s,color .25s}
.contact-submit:hover .footer-arrow,.contact-submit:focus-visible .footer-arrow{transform:translateX(3px);color:#fff}
.contact-copy{margin:0 0 0 2px;padding:2px 0;border:0;border-bottom:1px solid rgba(255,255,255,.4);background:none;color:#fff;font:inherit;cursor:pointer}
.contact-copy:hover,.contact-copy:focus-visible{border-bottom-color:#fff}
.contact-submit[aria-disabled="true"]{opacity:.5;cursor:default}
.personal-contact .contact-status{margin:0;font-size:15.5px;line-height:1.5;color:var(--text-2);max-width:36em}
.contact-status.is-error{color:#f4a79f}
.personal-contact .contact-status a{color:#fff}
.personal-contact .contact-alt{font-size:16px;color:var(--text-2)}
.personal-contact .contact-alt a{color:#fff}
@media(max-width:767px){.contactform{margin:28px 0 44px}.contactform input:not([type=hidden]),.contactform textarea{font-size:16px}}
/* The phone carousel's still without JavaScript (noscript image over the card) */
.project-carousel-media{position:relative}.project-carousel-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Printing never waits for a reveal */
@media print{.motion .reveal,.motion .reveal-text{opacity:1!important;transform:none!important}}
/* ---------- end Polish D ---------- */
/* ---------- Film pages: /film/<slug> (the filmcase block) ----------
   One layout for every film: label, title and summary; the film (click to play, like the home showreels);
   notes beside a facts column; a strip of stills that open in the photo viewer; the other films; back to /#film. */
.film-case{color:#fff;font-family:var(--font-ui);padding-bottom:clamp(64px,8vw,112px)}
.film-case-label,.film-case-h,.film-case-facts dt,.film-case-more-kind,.film-case-back{font:500 11.5px/1.4 var(--font-ui);letter-spacing:.17em;text-transform:uppercase;color:var(--text-3)}
.film-case-head{margin:0 0 30px;padding-top:10px}
.film-case-label{margin:0;padding-left:.17em}
.static-site .film-case-title{margin:12px 0 0;font:500 clamp(34px,4.4vw,58px)/1.06 var(--font-display);letter-spacing:-.02em;color:#fff;text-wrap:balance}
.film-case-summary{max-width:40em;margin:18px 0 0;font-size:clamp(17px,1.35vw,19.5px);line-height:1.6;color:var(--text-2);text-wrap:pretty}
.film-case-player .static-video{border-radius:calc(var(--radius-media) * 2)}
.film-case-body{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:36px clamp(48px,7vw,112px);margin:48px 0 0;padding-top:40px;border-top:1px solid var(--rule)}
.static-site h2.film-case-h{margin:0 0 20px;padding-left:.17em;font-size:11.5px!important;line-height:1.4!important;letter-spacing:.17em!important;font-weight:500!important}
.film-case-text p{margin:0 0 1.1em;max-width:60ch;font-size:17px;line-height:1.65;letter-spacing:.002em;color:rgba(255,255,255,.88)}
.film-case-text p:last-child{margin-bottom:0}
.film-case-text a{color:#fff;text-underline-offset:.22em;text-decoration-thickness:1px}
.film-case-facts{margin:0;display:grid;gap:20px;align-content:start}
.film-case-facts>div{display:grid;gap:5px;margin:0}
.film-case-facts dd{margin:0;font-size:15px;line-height:1.5;color:#fff}
.film-case-credits ul{margin:0;padding:0;list-style:none;display:grid;gap:4px}
.film-case-credits li{margin:0;padding:0}
.film-case-credits li::before{content:none}
.film-case-credits li span{color:var(--text-3)}
.film-case-credits li span::after{content:' \00b7'}
.film-case-stills{margin-top:60px}
.film-stills .gallery-track{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.film-stills .gallery-track>a{grid-column:span 2;border-radius:var(--radius-media);overflow:hidden;line-height:0;cursor:zoom-in}
@media(min-width:1024px){.film-stills:not(.is-scope) .gallery-track>a:nth-last-child(2):nth-child(3n+1),.film-stills:not(.is-scope) .gallery-track>a:last-child:nth-child(3n+2){grid-column:span 3}}
.film-stills.is-scope .gallery-track{grid-template-columns:repeat(4,minmax(0,1fr))}
.film-stills.is-scope .gallery-track>a{grid-column:auto}
.film-stills img{display:block;width:100%;height:auto;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.film-stills a:hover img,.film-stills a:focus-visible img{transform:scale(1.03)}
.film-case-more{margin-top:64px;padding-top:40px;border-top:1px solid var(--rule)}
.film-case-more-head{display:flex;justify-content:space-between;align-items:baseline;gap:24px;margin-bottom:24px}
.film-case-more-head .film-case-h{margin-bottom:0}
.film-case-back{text-decoration:none;transition:color .2s}
.film-case-back:hover,.film-case-back:focus-visible{color:#fff}
.film-case-more-list{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.film-case-more-list li{margin:0;padding:0}
.film-case-more-list li::before{content:none}
.film-case-more-list a{display:block;color:inherit;text-decoration:none}
.film-case-more-media{display:block;aspect-ratio:16/9;overflow:hidden;border-radius:var(--radius-media);background:#000}
.film-case-more-media img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.film-case-more-list a:hover .film-case-more-media img,.film-case-more-list a:focus-visible .film-case-more-media img{transform:scale(1.03)}
.film-case-more-title{display:block;margin-top:14px;font:500 17px/1.3 var(--font-display);letter-spacing:-.005em;color:#fff}
.film-case-more-kind{display:block;margin-top:6px}
.film-case :is(a,button):focus-visible{outline:3px solid #87cfff;outline-offset:5px}
@media(max-width:1023px){
.film-case-body{grid-template-columns:1fr;gap:40px}
.film-stills .gallery-track,.film-stills.is-scope .gallery-track{grid-template-columns:repeat(2,minmax(0,1fr))}
.film-stills .gallery-track>a{grid-column:auto}
.film-case-facts{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 32px}
.film-case-credits{grid-column:1/-1}
}
@media(max-width:767px){
.film-case-head{margin-bottom:22px}
.film-case-summary{font-size:16px}
.film-case-body{margin-top:36px;padding-top:30px;gap:32px}
.film-case-text p{font-size:16px;line-height:1.6}
.film-case-facts{grid-template-columns:1fr;gap:16px}
.film-case-stills{margin-top:44px}
/* the stills become a swipe strip, bleeding into the page gutters */
.film-stills .gallery-track,.film-stills.is-scope .gallery-track{display:flex;gap:10px;margin:0 calc(-1 * var(--sqs-mobile-site-gutter,6vw));padding:0 var(--sqs-mobile-site-gutter,6vw);scroll-padding-inline:var(--sqs-mobile-site-gutter,6vw);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.film-stills .gallery-track::-webkit-scrollbar{display:none}
.film-stills .gallery-track>a,.film-stills.is-scope .gallery-track>a{flex:0 0 78%;scroll-snap-align:start}
.film-case-more{margin-top:44px;padding-top:30px}
.film-case-more-head{flex-wrap:wrap;gap:10px 24px}
.film-case-more-list{grid-template-columns:1fr;gap:18px}
.film-case-more-list a{display:grid;grid-template-columns:38% minmax(0,1fr);gap:4px 16px;align-items:center}
.film-case-more-media{grid-row:1/3}
.film-case-more-title{margin-top:0;font-size:16px}
.film-case-more-kind{margin-top:0;align-self:start}
}
/* Film pages: the popup's "Full case" link sits above "Watch on", the two reading as one small list */
.work-dialog .work-dialog-page:not([hidden])+a{margin-top:10px}