@font-face{font-family:Film Jakarta;src:url('/static/fonts/plus-jakarta-sans-latin-normal.woff2') format('woff2');font-weight:200 800;font-display:swap}
.film-proof{margin:0;background:#09090e;color:#f6f4fc;font-family:Film Jakarta,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
.film-proof *{box-sizing:border-box}
.film-proof [hidden]{display:none!important}
.film-proof a{color:inherit;text-underline-offset:5px}
.film-proof :is(button,input,a,summary):focus-visible{outline:3px solid #c5b9ff;outline-offset:5px}
.film-proof button,.film-proof input{font:inherit}
.film-proof button{cursor:pointer}
.film-proof .film-review{display:flex;align-items:center;gap:16px;min-height:60px;padding:12px 5%;border-bottom:1px solid #ffffff1c;font-size:12px;color:#c1b9cf}
.film-proof .film-review strong{font-size:14px;color:#fff}
.film-proof .film-review a{margin-left:auto;padding:10px 0;text-decoration:none}
.film-proof .film-journey{max-width:1440px;margin:auto;padding:32px 4% 24px}
.film-proof .film-intro{display:flex;align-items:center;gap:28px;margin:0 0 28px}
.film-proof .film-intro h2{font-size:28px;font-weight:550;letter-spacing:-.025em;margin:0;line-height:1.35}
.film-proof .film-intro>p{font-size:14px;color:#b5acc8;margin:0;line-height:1.7}
.film-proof .film-static-label{margin-left:auto;display:flex;align-items:center;gap:10px;font-size:12px;color:#bcb2cf;min-height:44px;cursor:pointer}
.film-proof .film-static-toggle{accent-color:#b7a5f4;width:16px;height:16px}
.film-proof .film-controls{border:0;margin:0;padding:0 0 16px;display:flex;align-items:center;gap:24px;min-height:64px}
.film-proof .film-controls input,.film-proof .film-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.film-proof .film-controls label{display:flex;align-items:center;gap:10px;min-height:44px;border-bottom:2px solid transparent;color:#b5aac7;font-size:12px;padding:10px 2px;cursor:pointer}
.film-proof .film-controls label span{font-size:13px}
.film-proof .film-controls input:checked+label{color:#fff;border-bottom-color:#c0acf7}
.film-proof .film-controls input:focus+label{outline:3px solid #c5b9ff;outline-offset:4px}
.film-proof .film-stage{position:relative;isolation:isolate}
.film-proof .film-picture{position:relative;max-width:100%;overflow:hidden;background:#09090e}
.film-proof .film-picture>img{display:block;width:100%;height:auto}
.film-proof .film-video{display:none}
.film-proof .film-overlays{max-width:760px;margin:24px auto 0}
.film-proof .film-panel{scroll-margin-top:80px;padding:26px 0;border-bottom:1px solid #ffffff20}
.film-proof .film-panel h3{font-size:32px;line-height:1.25;font-weight:550;letter-spacing:-.025em;margin:0 0 24px}
.film-proof .film-panel p{font-size:18px;line-height:1.65;color:#e0dbe9;margin:0 0 20px}
.film-proof .film-panel .film-subject{display:flex;justify-content:space-between;gap:16px;font-size:12px;color:#bcb1cf;margin-bottom:24px}
.film-proof .film-panel .film-label{font-size:12px;color:#c0acf7;margin-bottom:12px;font-weight:650}
.film-proof .film-panel .film-emphasis{color:#d3c3fc}
.film-proof blockquote{font-size:21px;line-height:1.6;margin:28px 0;color:#e2d8ff}
.film-proof .film-under{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:70px;padding:12px 0}
.film-proof .film-under>p{font-size:12px;color:#b2a6c2;line-height:1.7;margin:0;max-width:550px}
.film-proof .film-cta{padding:12px 20px;min-height:46px;display:flex;align-items:center;gap:24px;white-space:nowrap;color:#eee6ff;font-size:14px;font-weight:600;text-decoration:none}
.film-proof .film-cta span{font-size:24px;font-weight:400}
.film-proof .film-progress{display:none}
.film-proof .film-load-status{font-size:12px;line-height:1.6;color:#d0c5e0;max-width:720px;margin:8px 0 0}
.film-proof .film-notes{max-width:900px;margin:36px auto;padding:32px 4%;border-top:1px solid #ffffff20}
.film-proof .film-notes h2{font-size:24px;line-height:1.4;font-weight:550;letter-spacing:-.02em}
.film-proof .film-notes p{font-size:14px;line-height:1.85;color:#bdb3ce}
.film-proof .film-notes summary{cursor:pointer;padding:16px 0;min-height:48px;font-size:14px;color:#d8cde8}
.film-proof .film-footer{padding:24px 4% 36px;text-align:center;font-size:12px;color:#aaa0b9;line-height:1.7}
/* Only the video changes perspective. Text remains a stable HTML reading layer. */
.film-proof .film-motion .film-pin{position:sticky;top:16px}
.film-proof .film-motion .film-stage{height:min(720px,calc(100svh - 174px));min-height:480px}
.film-proof .film-motion .film-picture{position:absolute;inset:0}
.film-proof .film-motion .film-picture>img,.film-proof .film-motion .film-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.film-proof .film-motion .film-video{display:block;opacity:0}
.film-proof .film-frame-ready .film-video{opacity:1}
.film-proof .film-motion .film-overlays{position:absolute;inset:0;max-width:none;margin:0;padding:32px 36px;display:flex;align-items:center;background:linear-gradient(90deg,#09090e 0%,#09090ef7 34%,#09090edb 44%,#09090e60 55%,#09090e00 70%)}
.film-proof .film-motion .film-panel{width:44%;max-width:550px;border:0;padding:0;text-shadow:0 1px 2px #0006}
.film-proof .film-motion .film-panel h3{font-size:clamp(28px,2.4vw,35px);margin-bottom:24px}
.film-proof .film-motion .film-panel p{font-size:clamp(18px,1.4vw,20px);line-height:1.6;margin-bottom:20px}
.film-proof .film-motion .film-panel .film-subject{font-size:12px;flex-wrap:wrap;margin-bottom:24px}
.film-proof .film-motion .film-panel .film-label{font-size:14px}
.film-proof .film-motion .film-progress{display:block;position:absolute;bottom:0;left:0;right:0;height:2px;background:#ffffff15}
.film-proof .film-motion .film-load-status{position:absolute;right:16px;bottom:90px;max-width:350px;margin:0;padding:10px 12px;background:#09090ef0;z-index:2}
.film-proof .film-progress>span{display:block;height:100%;background:#beacf4;transform:scaleX(var(--film-progress,0));transform-origin:left}
@media(max-width:1099px),(max-height:759px),(prefers-reduced-motion:reduce){.film-proof .film-static-label{display:none}}
@media(max-width:700px){
 .film-proof .film-review{padding-inline:22px;gap:10px}.film-proof .film-review>span{display:none}
 .film-proof .film-journey{padding:28px 22px 16px}.film-proof .film-intro{display:block;margin-bottom:24px}
 .film-proof .film-intro h2{font-size:28px}.film-proof .film-intro>p{margin-top:12px;font-size:14px}
 .film-proof .film-panel{padding:24px 0}.film-proof .film-panel h3{font-size:28px}
 .film-proof .film-panel p{font-size:17px}.film-proof blockquote{font-size:20px}
 .film-proof .film-under{flex-direction:column-reverse;align-items:stretch;gap:12px}.film-proof .film-cta{padding-left:0;justify-content:space-between}
 .film-proof .film-notes{margin:24px 22px;padding:24px 0}
}

/* Reserve the existing fixed navigation; no selector reaches the hero. */
.film-proof .film-motion .film-pin{top:88px}
.film-proof .film-motion .film-stage{height:min(650px,calc(100svh - 250px))}

/* Passage markers tie readable HTML to the same passages on the cutaway. */
.film-proof .film-answer-line{position:relative;padding-left:32px}
.film-proof .film-ref{position:absolute;left:0;top:.16em;font-size:13px;font-weight:750;line-height:24px;width:24px;height:24px;text-align:center;color:#d9cfff;border:1px solid #9f8ad1;border-radius:50%}
.film-proof .film-insertion{padding:16px 18px;margin:16px 0 20px;background:#211933;border-radius:3px}
.film-proof .film-insertion p:last-child{margin:0}
.film-proof .film-insertion ins{text-decoration:none;color:#f1eaff;font-weight:550}
.film-proof .film-insertion .film-label{margin:0 0 8px;color:#d5bdff}
.film-proof .film-motion .film-revision p{font-size:clamp(17px,1.3vw,19px);line-height:1.55}
.film-proof .film-motion .film-revision .film-label{font-size:13px}
.film-proof .film-motion .film-revision h3{margin-bottom:20px}
.film-proof .film-motion .film-insertion{opacity:var(--film-insert,1)}
.film-proof .film-surface,.film-proof .film-layer-links{display:none;pointer-events:none}
.film-proof .film-motion .film-surface{display:grid;position:absolute;left:0;top:0;width:800px;height:900px;transform-origin:0 0;grid-template-rows:1fr 1.2fr 1fr;padding:95px 55px 65px 110px;gap:38px;color:#312640;will-change:transform}
.film-proof .film-surface-row{display:flex;align-items:center;gap:22px;font-size:37px;font-weight:650;line-height:1.35}
.film-proof .film-surface-row p{margin:0}
.film-proof .film-surface-row:last-child{padding-left:130px}
.film-proof .film-surface-row b{flex:none;display:grid;place-items:center;width:50px;height:50px;border:2px solid currentColor;border-radius:50%;font-size:28px}
.film-proof .film-surface-gap{color:#65596e}
.film-proof .film-surface-added{color:#503b89;background:#e6dcf8;padding:18px;border-radius:5px}
.film-proof .film-motion .film-layer-links{display:block;position:absolute;inset:0}
.film-proof .film-layer-label{position:absolute;color:#f0eafa;font-size:clamp(14px,1.2vw,17px);background:#110d1eeb;padding:10px 14px;line-height:1.5}
.film-proof .film-layer-label b{color:#d4bdff;margin-right:8px}
.film-proof .film-layer-a{right:5%;top:14%}
.film-proof .film-layer-b{right:10%;bottom:12%}
.film-proof .film-gap-link{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.film-proof .film-gap-link path{stroke:#dac5ff;stroke-width:1.4;vector-effect:non-scaling-stroke;fill:none}
.film-proof .film-gap-link circle{fill:#dcc8ff;stroke:#302244;stroke-width:2}
.film-proof .film-gap-label{position:absolute;left:68%;top:58%;padding:8px 12px;background:#140f20f2;color:#f0e8ff;font-size:16px}
.film-proof .film-journey:not([data-beat="2"]) :is(.film-gap-link,.film-gap-label){display:none}
.film-proof ::selection{background:#bda6ef;color:#130e1c}
@media(max-width:700px){.film-proof .film-insertion{padding:16px}.film-proof .film-answer-line{padding-left:30px}}

/* Compact screens keep the complete reading flow and scrub only the illustration. */
.film-proof .film-compact .film-picture { aspect-ratio: 16 / 9; }
.film-proof .film-compact .film-picture > img,
.film-proof .film-compact .film-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.film-proof .film-compact .film-video { display:block; opacity:0; }
.film-proof .film-compact.film-frame-ready .film-video { opacity:1; }
.film-proof .film-motion-available .film-static-label { display:flex; margin-top:12px; }
@media(prefers-reduced-motion:reduce) { .film-proof .film-compact .film-video { display:none; } }

/* Phones keep the same decoded-frame story, with copy and controls over the film. */
@media(max-width:1099px){
 .film-proof .film-journey{padding-inline:0}
 .film-proof .film-intro{margin-inline:22px}
 .film-proof .film-motion .film-pin{top:60px;height:calc(100svh - 148px - env(safe-area-inset-bottom));isolation:isolate}
 .film-proof .film-motion .film-stage{height:100%;min-height:0}
 .film-proof .film-motion .film-overlays{padding:20px 22px 224px;align-items:center;background:linear-gradient(90deg,#09090ee8,#09090ec9 65%,#09090e85)}
 .film-proof .film-motion .film-panel{width:100%;max-width:620px;margin:auto}
 .film-proof .film-motion .film-panel h3{font-size:26px;line-height:1.2;margin-bottom:14px}
 .film-proof .film-motion .film-panel p{font-size:16px;line-height:1.5;margin-bottom:12px}
 .film-proof .film-motion .film-panel .film-subject{font-size:12px;margin-bottom:14px}
 .film-proof .film-motion .film-panel .film-label{font-size:12px;margin-bottom:8px}
 .film-proof .film-motion .film-panel blockquote{font-size:19px;line-height:1.5;margin:18px 0}
 .film-proof .film-motion .film-insertion{padding:12px 14px;margin:12px 0}
 .film-proof .film-motion .film-insertion p:last-child{margin-bottom:0}
 .film-proof .film-motion .film-answer-line{padding-left:30px}
 .film-proof .film-motion .film-surface,.film-proof .film-motion .film-layer-links{display:none}
 .film-proof .film-motion .film-controls{position:absolute;bottom:110px;left:22px;right:22px;z-index:2;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 14px;padding:0;min-height:88px}
 .film-proof .film-motion .film-controls label{font-size:11px;gap:8px;min-height:44px}
 .film-proof .film-motion .film-controls label span{font-size:12px}
 .film-proof .film-motion .film-under{position:absolute;bottom:8px;left:22px;right:22px;z-index:2;min-height:0;flex-direction:column-reverse;align-items:stretch;gap:4px;padding:0}
 .film-proof .film-motion .film-under>p{font-size:11px;line-height:1.45;max-width:none}
 .film-proof .film-motion .film-cta{padding:4px 0;min-height:44px;justify-content:space-between}
 .film-proof .film-motion .film-load-status{left:22px;right:22px;bottom:210px;max-width:none}
 .film-proof .film-journey:not(.film-motion) .film-overlays,.film-proof .film-journey:not(.film-motion) .film-under{margin-inline:22px}
}

.film-proof .film-panel:focus-visible{outline:2px solid #c5b9ff;outline-offset:5px}

@media(min-width:1100px) and (max-height:800px){
 .film-proof .film-motion .film-pin{top:72px}
 .film-proof .film-motion .film-panel h3{font-size:28px;line-height:1.2;margin-bottom:14px}
 .film-proof .film-motion .film-panel p{font-size:17px;line-height:1.5;margin-bottom:12px}
 .film-proof .film-motion .film-panel .film-subject{font-size:12px;margin-bottom:14px}
 .film-proof .film-motion .film-panel .film-label{font-size:12px;margin-bottom:8px}
 .film-proof .film-motion .film-panel blockquote{font-size:19px;line-height:1.5;margin:18px 0}
 .film-proof .film-motion .film-insertion{padding:12px 14px;margin:12px 0}
 .film-proof .film-motion .film-insertion p:last-child{margin-bottom:0}
}
@media(max-width:600px){.film-proof .film-motion .film-under>p{padding-right:44px}}

/* Lite mode keeps the case study compact without a video or scroll spacer. */
.film-proof .film-lite { padding:64px max(32px, 5%) 56px; scroll-margin-top:88px; }
.film-proof .film-lite .film-intro { display:block; margin:0 0 32px; }
.film-proof .film-lite .film-intro h2 { font-size:clamp(36px, 3.8vw, 50px); line-height:1.15; }
.film-proof .film-lite .film-intro > p { margin-top:16px; font-size:17px; }
.film-proof .film-lite .film-static-label { display:none; }
.film-proof .film-lite .film-controls {
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:0 24px;
  padding:0;
  margin-bottom:32px;
  border-bottom:1px solid #38303f;
}
.film-proof .film-lite .film-controls label { min-height:60px; padding:14px 4px; gap:12px; font-size:13px; }
.film-proof .film-lite .film-controls label span { font-size:16px; font-weight:600; line-height:1.5; }
.film-proof .film-lite .film-stage {
  display:grid;
  grid-template-columns:minmax(0, 1.1fr) minmax(0, 1fr);
  grid-template-areas:"answer picture";
  gap:48px;
  align-items:center;
}
.film-proof .film-lite .film-picture { grid-area:picture; aspect-ratio:4 / 3; }
.film-proof .film-lite .film-picture > img { width:100%; height:100%; object-fit:cover; object-position:72% 50%; }
.film-proof .film-lite .film-picture::after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,#09090e,transparent 14%,transparent 90%,#09090e),linear-gradient(0deg,#09090e,transparent 16%,transparent 88%,#09090e);
  pointer-events:none;
}
.film-proof .film-journey.film-lite .film-overlays { grid-area:answer; width:100%; max-width:none; min-height:500px; margin:0; }
.film-proof .film-lite .film-panel { padding:12px 0 24px; border:0; }
.film-proof .film-lite .film-panel h3 { font-size:clamp(27px, 2.5vw, 34px); line-height:1.3; margin-bottom:24px; }
.film-proof .film-lite .film-panel p { font-size:17px; line-height:1.7; }
.film-proof .film-lite .film-panel .film-subject { font-size:14px; flex-wrap:wrap; gap:4px 20px; margin-bottom:24px; }
.film-proof .film-lite .film-panel .film-label { font-size:14px; }
.film-proof .film-lite blockquote { font-size:24px; line-height:1.55; margin-block:28px; }
.film-proof .film-lite .film-insertion { padding:20px 22px; background:#241d34; border:1px solid #635079; border-radius:6px; }
.film-proof .film-lite .film-insertion .film-label { color:#dfd0ff; }
.film-proof .film-journey.film-lite .film-under { margin:16px 0 0; padding-top:24px; border-top:1px solid #38303f; }
.film-proof .film-lite .film-under > p { font-size:13px; max-width:45ch; }
.film-proof .film-lite .film-cta { border:1px solid #786493; border-radius:6px; font-size:15px; }
.film-proof .film-lite .film-cta:hover { background:#211a33; border-color:#c5b9ff; }
@media(max-width:900px) {
  .film-proof .film-lite { padding:44px 24px 40px; }
  .film-proof .film-lite .film-intro { margin-inline:0; }
  .film-proof .film-lite .film-controls { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:0 16px; margin-bottom:24px; }
  .film-proof .film-lite .film-controls label { gap:10px; min-height:56px; }
  .film-proof .film-lite .film-controls label span { font-size:14px; }
  .film-proof .film-lite .film-stage { grid-template-columns:minmax(0, 1fr); grid-template-areas:"picture" "answer"; gap:24px; }
  .film-proof .film-lite .film-picture { aspect-ratio:2; max-height:290px; }
  .film-proof .film-lite .film-picture > img { object-position:65% 50%; }
  .film-proof .film-journey.film-lite .film-overlays { min-height:480px; }
  .film-proof .film-lite .film-panel h3 { font-size:28px; }
  .film-proof .film-lite .film-under { margin:16px 0 0; align-items:stretch; flex-direction:column-reverse; gap:16px; }
  .film-proof .film-lite .film-cta { padding:12px 18px; justify-content:space-between; white-space:normal; }
}