/* The supplied films retain their full widescreen composition and letterboxing. */
@layer mobile-composition{
 #project-fitfur .project-showcase-feature[data-project-films]{aspect-ratio:16/9!important;height:auto!important;min-height:0!important;max-height:none!important;isolation:isolate}
 #project-fitfur [data-fitfur-campaign] .project-showcase-picture{aspect-ratio:4/5!important;height:auto!important}
 #project-fitfur [data-fitfur-pet-media] .project-showcase-picture{aspect-ratio:9/16!important;height:auto!important;background:#fff!important}
 #project-fitfur :is([data-fitfur-campaign],[data-fitfur-pet-media]) .project-pet-open>img{object-fit:contain!important;object-position:center!important}
 #project-fitfur [data-fitfur-pet-media] .project-showcase-picture>video{object-fit:contain!important}
}
[data-project-films].has-video-controls .mayson-film-dots{bottom:58px}
#project-fitfur [data-fitfur-campaign] .project-showcase-picture{margin:0;background:#fff}
#project-fitfur [data-fitfur-campaign] .project-pet-open{position:absolute;inset:0;display:block}
#project-fitfur [data-fitfur-campaign] .project-pet-open>img{display:block;width:100%;height:100%;pointer-events:none}
#project-fitfur [data-fitfur-campaign] .project-pet-open::after{width:32px;height:32px;top:12px;right:12px;font-size:20px}
#project-fitfur :is([data-fitfur-campaign],[data-fitfur-pet-media]) .project-showcase-controls{justify-content:center}

/* Keep the Cleo and Dash introduction over every film, as in the original banner. */
#project-fitfur [data-project-films="fitfur-pets"]{background:#2d261d}
#project-fitfur [data-project-films="fitfur-pets"]::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221552%22%20height%3D%22873%22%20viewBox%3D%220%200%201552%20873%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cfilter%20id%3D%22soft%22%20filterUnits%3D%22userSpaceOnUse%22%20x%3D%22-600%22%20y%3D%22-600%22%20width%3D%222800%22%20height%3D%222200%22%3E%3CfeGaussianBlur%20stdDeviation%3D%22120%22%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Cpath%20d%3D%22M%20-50%20-500%20C%20-11.666666666666664%20-416.6666666666667%20137%20-93.33333333333333%20180%200%20C%20223%2093.33333333333333%20195.33333333333334%2033.33333333333333%20208%2060%20C%20220.66666666666666%2086.66666666666667%20243.5%20133.33333333333334%20256%20160%20C%20268.5%20186.66666666666666%20267.3333333333333%20190%20283%20220%20C%20298.6666666666667%20250%20318%20310%20350%20340%20C%20382%20370%20438.1666666666667%20380%20475%20400%20C%20511.8333333333333%20420%20537.5%20440%20571%20460%20C%20604.5%20480%20645.5%20500%20676%20520%20C%20706.5%20540%20735%20560%20754%20580%20C%20773%20600%20780%20620%20790%20640%20C%20800%20660%20807%20680%20814%20700%20C%20821%20720%20827%20740%20832%20760%20C%20837%20780%20842%20801.1666666666666%20844%20820%20C%20846%20838.8333333333334%20843%20780.8333333333334%20844%20873%20C%20845%20965.1666666666666%20849%201289.6666666666667%20850%201373%20L%20-600%201373%20L%20-600%20-500%20Z%22%20fill%3D%22black%22%20fill-opacity%3D%220.576%22%20filter%3D%22url(%23soft)%22%2F%3E%3C%2Fsvg%3E") center/100% 100% no-repeat}
#project-fitfur .project-pet-film-copy{position:absolute;z-index:3;left:clamp(28px,4vw,64px);bottom:clamp(78px,5vw,94px);width:min(470px,46%);color:#fff;pointer-events:none;text-shadow:0 1px 3px #0003,0 3px 12px #0002}
#project-fitfur .project-pet-film-copy h3{color:#fff;margin:0 0 22px;font:400 clamp(40px,4.3vw,66px)/1.02 var(--display);letter-spacing:-.04em;text-wrap:balance}
#project-fitfur .project-pet-film-copy h3 em{color:inherit;font-weight:400}
#project-fitfur .project-pet-film-copy p{max-width:440px;margin:0;color:#fff;font:400 16px/1.7 var(--sans)}
#project-fitfur [data-project-films="fitfur-pets"] .project-feature-play{left:72%;z-index:4}
#project-fitfur [data-project-films="fitfur-pets"] .mayson-film-sound{z-index:4}
#project-fitfur [data-project-films="fitfur-pets"] .mayson-film-dots{z-index:5}
@media(min-width:801px) and (max-width:1100px){
 #project-fitfur .project-pet-film-copy{left:28px;bottom:76px;width:48%}
 #project-fitfur .project-pet-film-copy h3{font-size:42px;margin-bottom:16px}
 #project-fitfur .project-pet-film-copy p{line-height:1.55}
}
@layer mobile-composition{@media(max-width:800px){
 #project-fitfur .project-showcase-feature[data-project-films="fitfur-pets"]{--pet-art-height:clamp(280px,68vw,400px);aspect-ratio:auto!important;min-height:600px!important;padding:calc(var(--pet-art-height) - 28px) 24px 112px!important;background:rgb(var(--mobile-shade-surface,0,0,0))!important}
 #project-fitfur [data-project-films="fitfur-pets"]::after{background:linear-gradient(0deg,rgba(0,0,0,.75) 0%,rgba(0,0,0,.72) 24%,rgba(0,0,0,.54) 48%,rgba(0,0,0,.21) 69%,transparent 88%)!important}
 #project-fitfur [data-project-films="fitfur-pets"] .mayson-film-slide>img{height:var(--pet-art-height)!important;object-fit:cover!important;object-position:center!important;background:transparent!important;mask-image:radial-gradient(ellipse 155% 100% at 55% 0%,#000 24%,rgba(0,0,0,.98) 40%,rgba(0,0,0,.82) 55%,rgba(0,0,0,.46) 69%,rgba(0,0,0,.14) 81%,rgba(0,0,0,.02) 90%,transparent 96%)!important}
 #project-fitfur [data-project-films="fitfur-pets"] .mayson-film-slide>video{object-position:center top!important;background:transparent!important}
 #project-fitfur .project-pet-film-copy{position:relative!important;inset:auto!important;width:100%!important;padding:0!important;margin:0!important}
 #project-fitfur .project-pet-film-copy h3{font-size:clamp(40px,11.8vw,56px)!important;line-height:1.02!important;margin:0 0 22px!important;text-wrap:initial!important}
 #project-fitfur .project-pet-film-copy p{font-size:16px!important;line-height:1.65!important;margin:0!important}
 #project-fitfur [data-project-films="fitfur-pets"] .project-feature-play{left:50%!important;top:calc(var(--pet-art-height) * .4)!important}
 #project-fitfur [data-project-films="fitfur-pets"] .mayson-film-dots{bottom:58px!important}
}}

/* The unopened video poster must not cover the softly faded banner preview. */
#project-fitfur [data-project-films="fitfur-pets"] video:not([controls]){visibility:hidden}

@layer mobile-composition{@media(max-width:800px){
 #project-fitfur [data-project-films="fitfur-pets"]{container-type:inline-size}
 #project-fitfur [data-project-films="fitfur-pets"] .mayson-film-slide>video{z-index:3!important}
 #project-fitfur [data-project-films="fitfur-pets"] .mayson-film-slide:has(video[controls])>img{visibility:hidden}
 #project-fitfur [data-project-films="fitfur-pets"]:has([data-project-film]:not([hidden]) video[controls])::before{content:"";position:absolute;inset:0 0 auto;height:calc(56.25cqw + 29px);z-index:4!important;pointer-events:none;background:linear-gradient(180deg,transparent 55%,#2d261d1f 70%,#2d261db3 90%,#2d261d 100%)}
 #project-fitfur .project-pet-film-copy{z-index:5!important}
 #project-fitfur [data-project-films="fitfur-pets"] :is(.project-feature-play,.mayson-film-sound){z-index:6!important}
 #project-fitfur [data-project-films="fitfur-pets"] .mayson-film-dots{z-index:7!important}
}}

/* Keep desktop film choices clear of the restored lower-left caption. */
@media(min-width:801px){#project-fitfur [data-project-films="fitfur-pets"] .mayson-film-dots{left:72%}}

/* Match the desktop type scale of the From an open brief reference banner. */
@media(min-width:801px){
 #project-fitfur .project-pet-film-copy h3{font-size:var(--pill-title);line-height:var(--cta-layout-title-leading,.99);letter-spacing:-.02em}
 #project-fitfur .project-pet-film-copy p{font-size:18px;line-height:1.6}
}

/* Fill the rounded Cleo and Dash frame; its first poster is slightly wider than 16:9. */
#project-fitfur [data-project-films="fitfur-pets"]{border:0!important;outline:0;background:transparent!important}
#project-fitfur [data-project-films="fitfur-pets"] .mayson-film-slide>img,#project-fitfur [data-project-films="fitfur-pets"] .mayson-film-slide>video{object-fit:cover!important;background:transparent!important}

@layer mobile-composition{@media(max-width:800px){#project-fitfur [data-project-films="fitfur-pets"] .mayson-film-slide>img{height:100%!important;object-fit:cover!important;mask-image:none!important;-webkit-mask-image:none!important}}}