/* ===== Scroll film mode (html.film): one continuous camera move behind the whole page (source/film.js).
   Sections become glass panels floating over the film; .film-gap blocks are the empty stretches where the camera travels. ===== */
html.film #universe{background:#070605}
html.film #universe canvas#film{position:absolute;inset:0;width:100%;height:100%;display:block}
html.film #h25{display:none!important}
html.film .film-gap{position:relative;height:140svh;pointer-events:none}
html.film .film-gap[data-clip="3"]{height:240svh}
@media(max-width:900px){html.film .film-gap{height:110svh}html.film .film-gap[data-clip="3"]{height:190svh}}
html:not(.film) .film-gap{display:none}
/* the 6 seller problems, passing one by one in the corridor (same text as the old 3D signs) */
html.film .film-problems{position:sticky;top:0;height:100svh;display:flex;align-items:center;justify-content:center}
html.film .film-problem{position:absolute;opacity:0;text-align:center;padding:26px 38px;border-radius:22px;background:linear-gradient(160deg,rgba(14,16,18,.72),rgba(6,7,8,.55));border:1px solid rgba(255,255,255,.12);box-shadow:inset 3px 0 0 #9b2a26,0 30px 80px rgba(0,0,0,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);will-change:opacity,transform}
html.film .film-problem small{display:block;font-size:12px;font-weight:700;letter-spacing:.34em;color:#d0675e}
html.film .film-problem b{display:block;margin-top:12px;font-size:clamp(34px,4.6vw,66px);font-weight:700;letter-spacing:-.04em;color:#f2f4f3;line-height:1}
/* sections → glass panels over the film */
html.film .section,html.film .contact{background:transparent!important}
html.film .section>.page,html.film .contact>.page{border-radius:28px;padding:44px 48px;box-shadow:0 50px 140px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.08)}
html.film .section.light>.page,html.film .section.workflow>.page{background:rgba(240,241,238,.94)}
html.film .section.dark>.page,html.film .contact>.page{background:rgba(8,12,13,.78);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
html.film .section.lead{height:auto;padding:90px 0}
html.film .lead-grid{position:relative;top:auto;opacity:1}
html.film .ticker{background:rgba(7,6,5,.6)}
html.film .contact .contact-photo{opacity:.35}
@media(max-width:900px){html.film .section>.page,html.film .contact>.page{padding:24px 20px;border-radius:20px;width:calc(100% - 24px)}}