/* This film has its own designed interfaces. Keep the subject sharp and veil copy locally. */
:root{--accent:#d6c8f1}
.film-frame{left:29%;width:72%;top:51%}
.film-frame video,.film-frame>.poster{filter:brightness(.94) contrast(1.02);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 96%,transparent),linear-gradient(180deg,transparent,#000 8%,#000 90%,transparent)}
.film-region::after{background:linear-gradient(90deg,#020202 0,#020202f5 24%,#020202d1 36%,#02020280 47%,#02020214 62%,transparent 78%)}
.copy h1{text-shadow:0 2px 28px #02020270}
.description{color:#e5e0ee}
.progress-track>span{background:linear-gradient(90deg,#d6bbff,#aabfff)}
#marker .marker-label{width:212px;min-height:62px;border-radius:3px 12px 3px 3px;background:linear-gradient(120deg,#17141ff7,#08070bf5);box-shadow:0 8px 26px #0008,inset 0 1px 0 #ffffff24}
#marker .marker-kicker{font-size:10px;letter-spacing:.07em}
#marker strong{font-size:17px;letter-spacing:-.012em}
#marker .target-ring{background:#040408ad;box-shadow:0 0 0 5px #06060644,0 0 18px color-mix(in srgb,currentColor 24%,transparent)}
@media(max-width:1100px) and (orientation:portrait){
 .film-frame{left:-13%;width:126%;top:var(--film-center,43%)}
 .film-frame video,.film-frame>.poster{mask-image:linear-gradient(180deg,transparent,#000 12%,#000 80%,transparent),linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-composite:intersect}
 .film-region::after{background:linear-gradient(180deg,#020202d9 0,#02020275 17%,transparent 32%,transparent 56%,#020202a3 72%,#020202f2 88%)}
 .service-summary::before{background:linear-gradient(180deg,transparent,#020202eb 32%,#020202fc)}
 .copy h1{position:relative;isolation:isolate}
 .copy h1::before{content:'';position:absolute;inset:-12px calc(-1 * var(--gutter)) -8px;z-index:-1;pointer-events:none;background:linear-gradient(180deg,#020202e6,#020202b8 70%,transparent)}
 #marker .marker-label{width:145px;min-height:40px;padding:8px 10px;border-radius:3px 9px 3px 3px}
 #marker strong{font-size:12px}
}
@media(min-width:600px) and (max-width:1100px) and (orientation:portrait){
 .film-frame{left:-6%;width:112%}
 #marker .marker-label{width:180px;min-height:49px}#marker strong{font-size:14px}
}
@media(orientation:landscape) and (max-height:540px){.film-frame{left:39%;width:64%}}
@media(max-width:1100px) and (orientation:portrait) and (max-height:590px){.film-frame{top:220px}}
@media(forced-colors:active){.description{color:CanvasText}.copy h1{text-shadow:none}}