/* Original films stay in color. Styles are scoped to this section. */
body.zebra-front-page .zebra-demos{background:#080808;color:#f2ede4;padding:clamp(64px,7vw,112px) var(--z-gutter,4vw);border-bottom:1px solid #34332f;scroll-margin-top:80px}
.zebra-demos__heading{display:grid;grid-template-columns:1.15fr 1fr;gap:7vw;align-items:end;margin-bottom:44px}
body.zebra-front-page .zebra-demos h2{color:#f2ede4;font-size:clamp(40px,5.2vw,84px);line-height:.98;letter-spacing:-.055em;margin:18px 0 0}
.zebra-demos__lead p{color:#c5bfb5;font-size:clamp(16px,1.35vw,21px);line-height:1.5;max-width:560px;margin:0 0 24px}
.zebra-demos__toggle,.zebra-demo__open,.zebra-demo-dialog__close{font:inherit;cursor:pointer;background:transparent;color:#f2ede4;border:1px solid #6b675f;border-radius:0;padding:10px 14px;font-size:12px;line-height:1.3}
.zebra-demos button:focus-visible,.zebra-demos a:focus-visible,.zebra-demo-dialog button:focus-visible{outline:2px solid #f2ede4;outline-offset:5px}
.zebra-demos__toggle:hover{background:#f2ede4;color:#080808}
.zebra-demos__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:clamp(280px,25vw,380px);gap:12px}
.zebra-demo{position:relative;min-width:0;margin:0;overflow:hidden;background:#171717;isolation:isolate}
.zebra-demo--scene{grid-column:1/8;grid-row:1/3}.zebra-demo--destruction{grid-column:8/13;grid-row:1}.zebra-demo--composer{grid-column:8/13;grid-row:2}.zebra-demo--cleanup{grid-column:1/5;grid-row:3}.zebra-demo--image{grid-column:5/9;grid-row:3}.zebra-demo--variation{grid-column:9/13;grid-row:3}.zebra-demo--grading{grid-column:1/9;grid-row:4}
body.zebra-front-page .zebra-demos .zebra-demo video{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;filter:grayscale(1)!important;opacity:1;transition:transform .9s cubic-bezier(.2,.75,.15,1)}
.zebra-demo:after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.12),transparent 30%,rgba(0,0,0,.15) 40%,rgba(0,0,0,.92))}
.zebra-demo figcaption{position:absolute;z-index:2;bottom:24px;left:24px;right:24px;pointer-events:none}
.zebra-demo__label{display:block;color:#ece7de;font-size:10px;line-height:1.4;font-weight:600;letter-spacing:.1em;text-transform:uppercase;margin-bottom:12px}
body.zebra-front-page .zebra-demo h3{color:#f2ede4;font-size:clamp(25px,2.4vw,40px);line-height:.98;letter-spacing:-.045em;text-transform:uppercase;margin:0 0 12px;font-weight:750}
.zebra-demo figcaption p{font-size:13px;line-height:1.4;color:#ded8cf;max-width:440px;margin:0}
.zebra-demo--scene figcaption,.zebra-demo--grading figcaption{max-width:560px}
body.zebra-front-page .zebra-demo--scene h3,body.zebra-front-page .zebra-demo--grading h3{font-size:clamp(34px,3.7vw,60px)}
.zebra-demo__open{position:absolute;z-index:3;right:16px;top:16px;background:rgba(8,8,8,.65);border-color:#a19a8e;padding:9px 12px;min-height:36px}
.zebra-demo__open:hover{background:#f2ede4;color:#080808}
.zebra-demos__signature{grid-column:9/13;grid-row:4;display:flex;flex-direction:column;justify-content:space-between;background:#f2ede4;color:#080808;padding:30px}
.zebra-demos__signature>span{font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.zebra-demos__signature strong{font-size:clamp(38px,4.4vw,70px);letter-spacing:-.065em;line-height:.95;font-weight:750}
.zebra-demos__signature a{color:inherit;font-size:14px;font-weight:600;text-decoration:none;display:flex;justify-content:space-between;padding-top:20px}
.zebra-demo-dialog{background:#080808;color:#f2ede4;border:1px solid #4c4943;padding:18px;width:min(1280px,94vw);max-width:94vw;max-height:94vh;overflow:auto}
.zebra-demo-dialog::backdrop{background:rgba(0,0,0,.88)}
.zebra-demo-dialog__head{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:16px}
.zebra-demo-dialog__head h3{color:#f2ede4!important;font:600 20px/1.2 inherit;margin:0}
body.zebra-front-page .zebra-demo-dialog video{display:block;width:100%;max-height:76vh;object-fit:contain;filter:none!important;background:#000}
.zebra-demo-dialog__link{color:#f2ede4;text-decoration:underline;font-size:12px;display:inline-block;margin-top:12px}
@media(hover:hover) and (prefers-reduced-motion:no-preference){.zebra-demo:hover video{transform:scale(1.025)}}
/* Same travel and overscan as the site's parallax-v3 images. */
@media(min-width:781px) and (prefers-reduced-motion:no-preference){
 body.zebra-front-page .zebra-demos .zebra-demo.zebra-demo-parallax>video{inset:calc(-1 * var(--parallax-pad,90px)) 0 auto;height:calc(100% + 2 * var(--parallax-pad,90px));max-height:none;translate:0 var(--parallax-y,0px)}
}
@media(max-width:1100px){.zebra-demos__grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:auto}.zebra-demos__grid>*{grid-column:auto;grid-row:auto;min-height:390px}.zebra-demos__grid .zebra-demo--scene,.zebra-demos__grid .zebra-demo--grading{grid-column:1/-1;min-height:510px}.zebra-demos__signature strong{font-size:64px}}
@media(max-width:780px){.zebra-demos__heading{grid-template-columns:1fr;gap:28px}.zebra-demos__lead p{margin-bottom:18px}.zebra-demos__grid{grid-template-columns:1fr}.zebra-demos__grid>*{min-height:360px}.zebra-demos__grid .zebra-demo--scene,.zebra-demos__grid .zebra-demo--grading{min-height:390px}.zebra-demo figcaption{left:20px;right:20px;bottom:20px}.zebra-demo figcaption p{font-size:13px}.zebra-demos__signature{gap:35px}.zebra-demo-dialog__head h3{font-size:17px}.zebra-demo-dialog{padding:12px}}
@media(prefers-reduced-motion:reduce){.zebra-demos *{transition:none!important;transform:none!important;translate:none!important}}