/* Editorial hero artwork, explicitly enabled on the approved service pages. */
#start.service-page .service-hero--cinematic{position:relative;isolation:isolate;overflow:hidden;padding-bottom:70px;min-height:710px}
#start.service-page .service-hero--cinematic .breadcrumbs{position:relative;z-index:2}
#start.service-page .service-hero--cinematic .service-hero__layout{position:static;display:block;min-height:540px;padding-top:40px;padding-bottom:35px}
#start.service-page .service-hero--cinematic .service-hero__copy{position:relative;z-index:2;width:45%;max-width:550px}
#start.service-page .service-hero--cinematic .service-hero__copy::before{content:"";position:absolute;z-index:-1;inset:-12px -28px -12px -20px;background:linear-gradient(to right,#fff calc(100% - 28px),transparent);mask-image:linear-gradient(to bottom,transparent,#000 24px,#000 calc(100% - 28px),transparent)}
#start.service-page .service-hero--cinematic .service-hero__title{max-width:8.5ch}
#start.service-page .service-hero--cinematic .service-hero__intro{max-width:53ch}
#start.service-page .cinematic-voice{position:absolute;z-index:0;top:0;bottom:0;left:60px;right:-60px;margin:0;pointer-events:none;overflow:hidden}
#start.service-page .cinematic-voice picture,#start.service-page .cinematic-voice img{display:block;width:100%;height:100%}
#start.service-page .cinematic-voice img{object-fit:cover;object-position:center top;mask-image:linear-gradient(to bottom,transparent,#000 18%,#000 83%,transparent)}
@media(min-width:1700px){#start.service-page .cinematic-voice{left:calc((100vw - 1700px)/2);right:calc((100vw - 1700px)/2)}}
@media(max-width:1100px) and (min-width:801px){
    #start.service-page .service-hero--cinematic .service-hero__copy{width:44%}
    #start.service-page .service-hero--cinematic .service-hero__layout{padding-top:20px}
    #start.service-page .cinematic-voice img{object-position:48% top}
}
@media(max-width:800px){
    #start.service-page .service-hero--cinematic{min-height:0;padding-bottom:20px}
    #start.service-page .service-hero--cinematic .service-hero__layout{position:relative;min-height:0;padding:22px 0 0;display:flex;flex-direction:column;gap:0}
    #start.service-page .service-hero--cinematic .service-hero__copy{width:100%;max-width:none}
    #start.service-page .service-hero--cinematic .service-hero__copy::before{content:none}
    #start.service-page .service-hero--cinematic .service-hero__title{max-width:none}
    #start.service-page .cinematic-voice{position:relative;inset:auto;order:2;flex:none;width:100vw;max-width:100vw;height:390px;margin:22px calc(50% - 50vw) 0}
    #start.service-page .cinematic-voice picture{position:absolute;right:0;top:0;width:185%;height:100%}
    #start.service-page .cinematic-voice img{object-fit:cover;object-position:right center;mask-image:linear-gradient(to bottom,transparent,#000 8%,#000 83%,transparent)}
}
@media(max-width:480px){#start.service-page .cinematic-voice{height:330px}}
/* Keep the book and dialogue script inside the editorial framing. */
#start.service-page .cinematic-voice--books img,
#start.service-page .cinematic-voice--localization img,
#start.service-page .cinematic-voice--film img,
#start.service-page .cinematic-voice--cartoons img,
#start.service-page .cinematic-voice--games img{object-fit:contain;object-position:right center}
/* Service-specific photographs share the same full-frame studio composition. */
#start.service-page :is(.cinematic-voice--audio,.cinematic-voice--translation,.cinematic-voice--ivr,.cinematic-voice--youtube,.cinematic-voice--ads,.cinematic-voice--guides,.cinematic-voice--scenario,.cinematic-voice--presentation) img{object-fit:contain;object-position:right center}
@media(max-width:800px){
    #start.service-page :is(.cinematic-voice--audio,.cinematic-voice--translation,.cinematic-voice--ivr,.cinematic-voice--youtube,.cinematic-voice--ads,.cinematic-voice--guides,.cinematic-voice--scenario,.cinematic-voice--presentation) picture{width:150%}
    #start.service-page :is(.cinematic-voice--audio,.cinematic-voice--translation,.cinematic-voice--ivr,.cinematic-voice--youtube,.cinematic-voice--ads,.cinematic-voice--guides,.cinematic-voice--scenario,.cinematic-voice--presentation) img{object-fit:cover}
}
#start.service-page .service-hero__facts{position:relative;z-index:2;background:#fff}
/* Blend the artwork itself into the white page. A white rectangle behind
 * the copy leaves a visible paper-coloured corner below the order button. */
@media(min-width:801px){
    #start.service-page .service-hero--cinematic .cinematic-voice{mask-image:linear-gradient(to right,transparent 0%,transparent 30%,#000 60%)}
    #start.service-page .service-hero--cinematic .service-hero__copy::before{content:none}
}
@media(min-width:801px){
    #start.service-page .service-hero--cinematic:has(.service-hero__facts){padding-bottom:24px}
    #start.service-page .service-hero--cinematic:has(.service-hero__facts) .cinematic-voice{bottom:138px}
}
/* Long service names use the copy column, avoiding isolated conjunctions. */
#start.service-page :is(.service-hero--film,.service-hero--cartoons,.service-hero--games,.service-hero--audio,.service-hero--translation,.service-hero--ivr,.service-hero--youtube,.service-hero--ads,.service-hero--guides,.service-hero--scenario,.service-hero--presentation) .service-hero__title{max-width:none}
/* Fill the right edge while bringing the subject closer to the copy.
   Scale uniformly from the right edge so faces and microphones keep their proportions. */
@media(min-width:1101px){
    #start.service-page .cinematic-voice{right:0}
    #start.service-page .cinematic-voice picture{mask-image:linear-gradient(to bottom,transparent,#000 18%,#000 83%,transparent)}
    #start.service-page .cinematic-voice img{transform:scale(1.18);transform-origin:right center;mask-image:none}
    #start.service-page .cinematic-voice--video img{transform:scale(1.06)}
}