/* One stage, one camera, ten connected compositions. The semantic document is the fallback. */
.flow{position:relative;background:#10151D;color:#fff;isolation:isolate}
.flow-stage{display:none}.flow-chapter{position:relative;background:#10151D;color:#fff}
.flow-panel{padding:96px var(--edge);position:relative;min-height:900px;display:grid;grid-template-columns:1fr 1.25fr;gap:6%;align-items:center}
.flow-copy{position:relative;z-index:3;max-width:550px;pointer-events:auto}
.flow-copy .flow-label{display:block;color:#3B82F6;font-size:11px;font-weight:500;margin-bottom:28px;letter-spacing:.02em}
.flow-copy h2{font-size:clamp(48px,5.5vw,84px);font-weight:500;line-height:1.035;letter-spacing:-.06em;margin:0 0 28px}
.flow-copy p{font-size:16px;line-height:1.8;max-width:380px;color:#8B93A1;margin:0 0 24px}
.flow-copy .flow-note{font-size:11px;margin-top:20px;line-height:1.7;max-width:340px}
.flow-copy .start{margin-top:8px}.flow-copy .text-link{display:inline-flex;gap:32px;padding:12px 0;font-size:12px;border-bottom:1px solid #3B82F6}
.flow-actions{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0 0;max-width:400px}
.flow-actions a,.flow-actions button{border:1px solid #1E2530;border-radius:5px;min-height:44px;padding:11px 14px;background:#10151D;color:#fff;font-size:11px;text-align:left}
.flow-actions a:hover,.flow-actions button:hover{transform:translateY(-2px);opacity:.7}.flow-actions a:active,.flow-actions button:active{transform:translateY(1px)}
.flow-actions button[aria-pressed=true]{background:#0B0E13;color:white;border-color:#0B0E13}
.flow :is(a,button,summary):focus-visible{outline:2px solid #3B82F6;outline-offset:5px}
.flow-fallback{min-width:0;display:grid;grid-template-columns:repeat(2,1fr);gap:16px;align-items:center}
.flow-fallback img{display:block;width:100%;height:330px;object-fit:cover;border-radius:4px;box-shadow:0 22px 44px #0b0e1310,0 3px 10px #0b0e1308}
.flow-fallback img:only-child{grid-column:1/-1;height:auto;max-height:560px;object-fit:contain}
.flow-meta{display:flex;justify-content:space-between;position:absolute;left:var(--edge);right:var(--edge);bottom:32px;border-top:1px solid #1E2530;padding-top:18px;gap:16px;font-size:10px;color:#8B93A1;pointer-events:none}
.flow-chapter[data-side=right] .flow-copy{grid-column:2;grid-row:1;justify-self:end;width:100%}.flow-chapter[data-side=right] .flow-fallback{grid-column:1;grid-row:1}
.flow-chapter[data-theme=dark]{background:#0B0E13;color:white}.flow-chapter[data-theme=dark] p{color:#8B93A1}.flow-chapter[data-theme=dark] .flow-actions :is(a,button){background:#10151D;border-color:#39414d;color:white}.flow-chapter[data-theme=dark] .flow-meta{color:#8B93A1;border-color:#1E2530}
.flow-list{display:grid;gap:0;max-width:440px;margin:24px 0 0}.flow-list details{border-top:1px solid #1E2530;padding:16px 0}.flow-list details:last-child{border-bottom:1px solid #1E2530}.flow-list summary{list-style:none;font-size:17px;font-weight:500;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;transition:opacity .2s var(--spring)}.flow-list summary::-webkit-details-marker{display:none}.flow-list summary:after{content:'+';font-size:20px;color:#3B82F6}.flow-list details[open] summary:after{content:'−'}.flow-list summary:hover{opacity:.65}.flow-list summary:active{transform:translateY(1px)}.flow-list p{font-size:13px;margin:12px 0 0}.flow-steps{padding:0;list-style:none;counter-reset:flow-step;max-width:380px}.flow-steps li{counter-increment:flow-step;display:grid;grid-template-columns:28px 1fr;gap:16px;margin:20px 0;font-size:13px;line-height:1.65;color:#8B93A1}.flow-steps li:before{content:'0' counter(flow-step);color:#3B82F6;font-size:10px;padding-top:3px}.flow-steps strong{display:block;color:#fff;font-size:16px;font-weight:500;margin-bottom:3px}
.flow-web-controls{display:flex;gap:6px;margin-top:20px;align-items:center;flex-wrap:wrap}.flow-web-controls>span{font-size:10px;color:#8B93A1;margin-right:10px}.flow-web-controls button{padding:10px 13px;min-height:40px;border-radius:5px;border:1px solid #1E2530;background:#10151D;color:#fff;font-size:10px}.flow-web-controls button[aria-pressed=true]{background:#0B0E13;color:#fff;border-color:#0B0E13}.flow-web-controls button:hover{transform:translateY(-2px);opacity:.75}.flow-web-controls button:active{transform:translateY(1px)}
.flow-finish{display:flex;gap:20px;align-items:center;margin-top:24px;flex-wrap:wrap}.flow-finish button{background:transparent;border:0;border-bottom:1px solid #39414d;color:#8B93A1;font-size:11px;padding:12px 0;min-height:44px}.flow-signature{position:absolute;bottom:-.1em;left:var(--edge);font-size:15.3vw;line-height:1;font-weight:600;letter-spacing:-.07em;color:#1E2530;pointer-events:none;z-index:-1}
/* Enhancement is enabled only after WebGL has produced its first frame. */
.flow.flow-live .flow-stage{display:block;position:sticky;top:0;width:100%;height:100svh;margin-bottom:-100svh;z-index:1;overflow:hidden;background:#10151D}
.flow-dark{position:absolute;inset:0;background:#0B0E13;opacity:var(--flow-dark,0);pointer-events:none}
.flow-halo{position:absolute;inset:0;background:radial-gradient(ellipse at 72% 53%,#1e253045,transparent 55%),radial-gradient(ellipse at 20% 80%,#3b82f60b,transparent 50%);opacity:var(--flow-dark,0);pointer-events:none}
#flow-world{position:absolute;inset:0;touch-action:pan-y}#flow-world canvas{display:block;width:100%;height:100%;touch-action:pan-y}
.flow-live .flow-chapter{background:transparent!important;height:170svh;pointer-events:none;z-index:2}
.flow-live .flow-panel{position:sticky;top:0;height:100svh;min-height:700px;display:flex;align-items:center;padding-top:88px;padding-bottom:104px;pointer-events:none}
.flow-live .flow-copy{width:40%;max-width:520px}.flow-live [data-side=right] .flow-copy{margin-left:auto;width:40%}
.flow-live .flow-fallback{display:none}.flow-live .flow-meta{pointer-events:none}
.flow-live .flow-last{height:135svh}.flow-live .flow-last .flow-panel{padding-bottom:170px}
.flow-meter{position:absolute;bottom:0;left:0;right:0;height:2px;background:#8b93a133;pointer-events:none}.flow-meter i{display:block;height:100%;background:#3B82F6;transform:scaleX(var(--flow-progress,0));transform-origin:left}
.flow-hover{position:absolute;bottom:64px;right:var(--edge);font-size:11px;background:#0B0E13;color:white;padding:12px 18px;border:1px solid #39414d;border-radius:5px;opacity:0;pointer-events:none;transition:opacity .15s var(--spring)}.flow-hover.visible{opacity:1}
.flow-quiet{position:absolute;right:var(--edge);top:24px;z-index:4;background:#10151D;color:#fff;border:1px solid #1E2530;border-radius:5px;min-height:40px;padding:10px 14px;font-size:10px;pointer-events:auto}.flow-quiet:hover{transform:translateY(-2px)}.flow-quiet:active{transform:translateY(1px)}.flow-dark-controls .flow-quiet{background:#10151D;color:white;border-color:#39414d}
.flow-static-notice{display:none}.flow.is-quiet .flow-static-notice{display:flex;justify-content:flex-end;padding:24px var(--edge) 0}.flow-static-notice button{border:1px solid #1E2530;background:#10151D;color:#fff;border-radius:5px;min-height:44px;padding:12px 16px;font-size:11px}
.flow-arrival{display:none}
.flow-live{margin-top:-100svh;background:transparent}
.flow-live .flow-stage{opacity:0;pointer-events:none}
.flow-live.flow-entered .flow-stage{opacity:1;pointer-events:auto}
.flow-live:not(.flow-entered) #achter-de-film .flow-panel{visibility:hidden}
.flow-live #achter-de-film{height:225svh}
.flow-live #achter-de-film .flow-copy{opacity:var(--flow-entry,0);transform:translateY(calc((1 - var(--flow-entry,0))*24px))}
.flow-live .flow-arrival{display:block;position:absolute;left:var(--edge);right:var(--edge);bottom:104px;z-index:3;color:white;opacity:var(--flow-arrival,1);pointer-events:auto;text-shadow:0 2px 20px #0b0e1377}
.flow-arrival>span{font-size:12px}.flow-arrival h2{font-size:clamp(52px,6.2vw,90px);line-height:1.03;letter-spacing:-.05em;font-weight:500;margin:20px 0 40px}.flow-arrival a{font-size:14px;border-bottom:1px solid #fff;display:inline-flex;align-items:center;gap:32px;padding:16px 0}.flow-arrival small{font-size:11px}.flow-arrival a:focus-visible{outline-color:white}
.flow-live #achter-de-film .flow-meta{opacity:var(--flow-entry,0)}
.flow-stage:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#0b0e13b3,transparent 75%);opacity:var(--flow-arrival,0);pointer-events:none}
.flow-stage .flow-quiet,.flow-stage .flow-hover,.flow-stage .flow-meter{z-index:2}
.flow-finish button:hover,.flow-static-notice button:hover{transform:translateY(-2px);opacity:.75}.flow-finish button:active,.flow-static-notice button:active{transform:translateY(1px)}
.flow-quiet{top:auto;bottom:16px}
.flow-live .flow-meta{right:calc(var(--edge) + 168px)}
@media(min-width:901px) and (max-height:780px){.flow-live .flow-panel{min-height:100svh;padding-top:72px;padding-bottom:72px}.flow-copy h2{font-size:clamp(48px,4.8vw,68px);margin-bottom:20px}.flow-copy .flow-label{margin-bottom:20px}.flow-copy p{font-size:13px;margin-bottom:16px}.flow-actions{margin-top:16px}.flow-list details{padding:12px 0}.flow-list summary{font-size:15px}}
@media(max-width:900px){.flow-panel{grid-template-columns:1fr;padding:72px 24px;gap:40px;min-height:0}.flow-copy,.flow-chapter[data-side=right] .flow-copy{width:100%;max-width:600px;grid-column:1;grid-row:auto;justify-self:start}.flow-chapter[data-side=right] .flow-fallback{grid-column:1;grid-row:auto}.flow-copy h2{font-size:clamp(46px,8vw,70px)}.flow-meta{position:relative;inset:auto;grid-column:1;font-size:9px;line-height:1.6}.flow-live .flow-chapter{height:155svh}.flow-live .flow-panel{display:block;min-height:100svh;padding:78px 24px 24px}.flow-live .flow-copy,.flow-live [data-side=right] .flow-copy{width:100%;margin:0;max-width:600px}.flow-live .flow-copy h2{font-size:clamp(44px,7vw,62px);line-height:1.06;margin-bottom:18px}.flow-copy .flow-label{margin-bottom:16px;font-size:10px}.flow-live .flow-copy p{font-size:13px;line-height:1.7;max-width:480px;margin-bottom:12px}.flow-live .flow-actions{margin-top:16px;gap:6px;max-width:100%}.flow-live .flow-actions :is(a,button){padding:8px 11px;font-size:10px;min-height:40px}.flow-live .flow-meta{position:absolute;left:24px;right:24px;bottom:22px;display:flex}.flow-meta span:last-child{text-align:right}.flow-quiet{right:24px;top:20px;padding:8px 12px;min-height:36px;font-size:9px}.flow-hover{display:none}.flow-live .flow-last{height:125svh}.flow-live .flow-last .flow-panel{padding-bottom:40px}.flow-copy .flow-note{font-size:10px;margin-top:12px}.flow-live .flow-copy .start{font-size:10px;padding:14px 18px}.flow-web-controls{margin-top:12px;gap:6px}.flow-web-controls button{font-size:9px;padding:8px 12px;min-height:36px}.flow-web-controls>span{font-size:9px}.flow-live #diensten{height:auto;min-height:150svh}.flow-live #diensten .flow-panel{height:auto;min-height:100svh;padding-bottom:50svh}.flow-list{margin-top:14px}.flow-list details{padding:12px 0}.flow-list summary{font-size:14px}.flow-list p{font-size:12px!important}.flow-steps{margin-top:16px}.flow-steps li{font-size:11px;gap:10px;margin:14px 0}.flow-steps strong{font-size:14px}.flow-signature{bottom:52px;font-size:14.5vw;left:24px}.flow-finish{margin-top:12px;gap:18px}.flow-finish button{font-size:10px;padding:8px 0}.flow-fallback img{height:290px}}
@media(max-width:430px){.flow-live .flow-copy h2{font-size:43px}.flow-live .flow-copy .flow-label{font-size:9px}.flow-live .flow-copy p{font-size:12px;max-width:335px}.flow-live .flow-panel{padding-top:76px}.flow-live .flow-copy h2 br{display:block}.flow-copy h2{font-size:44px}.flow-fallback img{height:240px}.flow-meta{font-size:8px}.flow-steps li{margin:12px 0}.flow-steps strong{font-size:13px}.flow-live #websites .flow-copy p{font-size:11px}.flow-live #websites .flow-copy h2{font-size:42px;margin-bottom:12px}.flow-live #websites .flow-copy .flow-label{margin-bottom:12px}}
@media(max-width:360px){.flow-live .flow-copy h2{font-size:37px}.flow-live .flow-copy p{font-size:11px}.flow-live .flow-actions :is(a,button){font-size:9px;padding:8px 10px}.flow-live #websites .flow-copy h2{font-size:37px}.flow-live #websites .flow-copy .flow-note{display:none}.flow-web-controls>span{display:none}.flow-steps li{font-size:10px}.flow-steps strong{font-size:12px}}
@media(prefers-reduced-motion:reduce){.flow-stage{display:none!important}.flow-chapter{height:auto!important;background:#10151D!important;pointer-events:auto!important}.flow-chapter[data-theme=dark]{background:#0B0E13!important}.flow-panel{position:relative!important;height:auto!important;min-height:0!important;padding:72px var(--edge)!important;display:grid!important}.flow-copy{width:100%!important;transform:none!important;opacity:1!important}.flow-fallback{display:grid!important}.flow-meta{position:relative!important;inset:auto!important}.flow-signature{display:none}.flow-quiet,.flow-static-notice{display:none!important}}
/* Keep motion controls clear of the returning header and chapter credits. */
.flow-quiet{top:auto;bottom:16px}
@media(max-width:900px){.flow-live .flow-meta{right:164px;bottom:28px}.flow-live .flow-meta span:last-child{display:none}.flow-arrival h2{font-size:54px}.flow-live .flow-arrival{bottom:116px}.flow-arrival>span{font-size:11px}.flow-arrival a{font-size:12px}.flow-live #achter-de-film{height:220svh}.nav-websites{display:none}}
@media(max-width:360px){.flow-arrival h2{font-size:46px}}
@media(max-width:900px){
 .flow-live .flow-copy,.flow-live [data-side=right] .flow-copy,.flow-live #achter-de-film .flow-copy{position:fixed;top:76px;left:24px;right:24px;width:auto;max-width:600px;opacity:var(--copy-alpha,0);transform:translateY(var(--copy-y,10px))}
 .flow-live .flow-copy[inert]{pointer-events:none}
}

/* Film-studio surfaces. The work carries the color; the Canon is a supporting actor. */
.flow-live .flow-stage{background:#10151D}
.flow-halo{opacity:1;background:radial-gradient(ellipse at 70% 46%,#3b82f610,transparent 60%),radial-gradient(ellipse at 24% 84%,#1e253066,transparent 55%)}
.flow-copy p,.flow-chapter[data-theme=dark] p{color:#acb4c1}
.flow-copy .flow-note{color:#8B93A1}
.flow-actions :is(a,button),.flow-web-controls button{background:#10151D;color:#fff;border-color:#39414d}
.flow-actions button[aria-pressed=true],.flow-web-controls button[aria-pressed=true]{background:#3B82F6;color:#0B0E13;border-color:#3B82F6}
.flow-live .flow-copy{width:39%}.flow-live [data-side=right] .flow-copy{width:39%}
.flow-quiet,.flow-static-notice button{background:#10151D;color:#8B93A1;border-color:#39414d}
.flow-inline-video,.case-preview.flow-inline-video{position:absolute;inset:auto;top:0;left:0;max-width:none;object-fit:fill;transform-origin:0 0;pointer-events:none;z-index:1;transition:none;opacity:0}
.flow-preview-toggle{position:absolute;right:var(--edge);bottom:70px;z-index:4;min-height:44px;padding:10px 15px;background:#10151D;color:#fff;border:1px solid #39414d;border-radius:5px;font-size:11px;transition:transform .2s var(--spring),opacity .2s var(--spring)}
.flow-preview-toggle:hover{transform:translateY(-2px);opacity:.8}.flow-preview-toggle:active{transform:translateY(1px)}
.flow-stage:after{z-index:2}.flow-stage .flow-preview-toggle,.flow-stage .flow-quiet{z-index:4}
.case-brands{display:flex;align-items:center;gap:16px;height:38px;margin:0 0 24px;color:#8B93A1}
.case-brands img{display:block;max-width:128px;max-height:38px;object-fit:contain;width:auto;height:auto}
.case-brands img.gotya-brand{width:104px;max-height:32px;object-position:left center}
.case-brands .on-paper{background:white;border-radius:3px;padding:5px;max-width:65px;max-height:38px}
.ad-picker{max-width:370px;margin:24px 0 0;display:grid;grid-template-columns:1fr;gap:12px}
.ad-picker label{font-size:11px;color:#8B93A1}
.ad-picker select{appearance:none;font:inherit;font-size:13px;color:white;background:#10151D url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%233B82F6' stroke-width='1.5'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E") no-repeat right 16px center;border:1px solid #39414d;border-radius:5px;padding:14px 44px 14px 16px;width:100%;min-height:48px;transition:opacity .2s var(--spring)}
.ad-picker select:hover{opacity:.85}.ad-picker select:focus-visible{outline:2px solid #3B82F6;outline-offset:4px}.ad-picker select:active{opacity:.7}
.ad-watch{display:inline-flex;align-items:center;min-height:44px;font-size:13px;width:fit-content;padding:10px 0;border-bottom:1px solid #3B82F6;transition:transform .2s var(--spring),opacity .2s var(--spring)}
.ad-watch:hover{transform:translateY(-2px);opacity:.8}.ad-watch:active{transform:translateY(1px)}
.client-signatures{position:relative;background:#10151D;padding:96px var(--edge);border-top:1px solid #1E2530}
.client-heading{display:flex;justify-content:space-between;gap:32px;align-items:end;margin-bottom:48px}
.client-heading h2{font-size:clamp(36px,4vw,56px);line-height:1.1;font-weight:500;letter-spacing:-.04em;margin:0}.client-heading p{font-size:13px;color:#8B93A1;margin:0}
.client-logos{display:grid;grid-template-columns:repeat(7,1fr);gap:24px;align-items:start}
.client-logos figure{margin:0;min-width:0}.client-logos figure>div{height:76px;display:flex;align-items:center;justify-content:center;padding:12px}
.client-logos .on-paper{background:#fff;border-radius:4px}
.client-logos img{display:block;width:100%;height:100%;object-fit:contain;max-width:140px}
.client-logos figcaption{font-size:10px;color:#8B93A1;margin-top:16px;line-height:1.6;text-align:center}
.client-signatures>a{display:inline-flex;align-items:center;min-height:44px;margin-top:40px;border-bottom:1px solid #3B82F6;font-size:13px;transition:transform .2s var(--spring),opacity .2s var(--spring)}
.client-signatures>a:hover{transform:translateY(-2px);opacity:.8}.client-signatures>a:active{transform:translateY(1px)}.client-signatures>a:focus-visible{outline:2px solid #3B82F6;outline-offset:5px}
@media(max-width:900px){
 .flow-live .flow-copy,.flow-live [data-side=right] .flow-copy{width:auto;max-width:none}
 .flow-live .flow-copy h2,.flow-live #websites .flow-copy h2{font-size:40px;line-height:1.08;letter-spacing:-.05em;margin-bottom:16px}
 .flow-live .flow-copy p,.flow-live #websites .flow-copy p{font-size:14px;line-height:1.65;max-width:500px;margin-bottom:14px}
 .flow-live .flow-copy .flow-note{font-size:11px;line-height:1.6;margin-top:16px}
 .flow-live .flow-actions :is(a,button){font-size:11px;min-height:44px;padding:10px 12px}
 .flow-live .flow-meta{display:none}
 .flow-copy .flow-label{font-size:10px!important;margin-bottom:16px}
 .flow-preview-toggle{left:24px;right:auto;bottom:18px;min-height:40px;font-size:10px;padding:10px 12px}
 .flow-quiet{right:24px;bottom:18px;min-height:40px;font-size:10px}
 .case-brands{height:26px;margin-bottom:16px;gap:12px}.case-brands img{max-width:95px;max-height:26px}.case-brands .on-paper{max-height:26px;max-width:50px;padding:3px}.case-brands img.gotya-brand{width:76px;max-height:24px}
 .ad-picker{margin-top:16px;gap:8px}.ad-picker label{font-size:10px}.ad-picker select{font-size:12px;padding:12px 36px 12px 12px;min-height:44px}.ad-watch{font-size:12px;min-height:40px}
 .flow-live #advertenties .flow-note{display:none}
 .flow-list summary{font-size:15px}.flow-steps li{font-size:12px;line-height:1.6}.flow-steps strong{font-size:15px}
 .client-signatures{padding:64px 24px}.client-heading{display:block;margin-bottom:32px}.client-heading p{margin-top:16px}.client-logos{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}.client-logos figure>div{height:76px}.client-logos figcaption{font-size:11px}
}
@media(max-width:360px){.flow-live .flow-copy h2,.flow-live #websites .flow-copy h2{font-size:34px}.flow-live .flow-copy p{font-size:13px}.flow-live .flow-copy .flow-note{font-size:10px}}
@media(max-width:900px) and (max-height:740px){
 .flow-live .flow-copy,.flow-live [data-side=right] .flow-copy,.flow-live #achter-de-film .flow-copy{top:68px}
 .flow-live .flow-copy h2,.flow-live #websites .flow-copy h2{font-size:34px;margin-bottom:12px}
 .flow-live .flow-copy p{font-size:13px;margin-bottom:10px}
 .flow-live .flow-copy .flow-note{display:none}.case-brands{margin-bottom:12px;height:24px}
 .flow-list details{padding:10px 0}.flow-list summary{font-size:14px}.flow-steps li{margin:10px 0}
}
@media(prefers-reduced-motion:reduce){.flow-live{margin-top:0}.flow-chapter{background:#10151D!important}.flow-copy{position:relative!important;inset:auto!important}.flow-inline-video{display:none!important}}

/* Contrast and final interaction refinements after the first mobile comparison. */
.flow-copy .text-link{color:#fff;min-height:44px;font-size:13px}
.case-brands img.gotya-brand,.client-logos img[alt="GOTYA"]{filter:brightness(0) invert(1)}
.flow-steps li{color:#acb4c1}
@media(min-width:901px){.flow-live [data-side=right] .flow-copy{width:42%}.flow-live #achter-de-film .flow-copy h2{font-size:clamp(48px,5vw,76px)}}
/* Unify the supplied marks without changing their outlines or brand proportions. */
.client-logos .on-paper{background:transparent}
.client-logos .on-paper img{filter:grayscale(1) invert(1);mix-blend-mode:screen}
.client-logos img[alt="Oka Sushi Emmen"]{transform:scale(1.4)}
.case-brands img.on-paper{background:transparent;padding:0;filter:grayscale(1) invert(1);mix-blend-mode:screen}
@media(max-width:900px){.ad-picker select{font-size:16px}.flow-web-controls button{min-height:44px}.flow-preview-toggle,.flow-quiet{min-height:44px}}