/* Mayson's two films share one widescreen frame with overlaid navigation. */
#project-mayson .project-showcase-feature[data-mayson-films]{aspect-ratio:16/9;max-height:none;isolation:isolate}
.mayson-film-slide{position:absolute;inset:0;margin:0}
.mayson-film-slide[hidden]{display:none!important}
.mayson-film-slide>img,.mayson-film-slide>video{position:absolute;inset:0;display:block;width:100%;height:100%;margin:0;border:0;object-fit:contain;background:#101414}
.mayson-film-slide>video{z-index:1}
.mayson-film-slide .project-feature-play{z-index:3}
.mayson-film-slide .project-feature-play[hidden]{display:none!important}
.mayson-film-sound{position:absolute;z-index:3;top:16px;right:16px;display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:9px 13px;border:1px solid #ffffff40;border-radius:999px;background:#10171585;backdrop-filter:blur(14px);color:#fff;font:400 12px/1 var(--sans);cursor:pointer}
.mayson-film-sound svg{width:17px;height:17px}
.mayson-film-dots{position:absolute;z-index:4;left:50%;bottom:12px;translate:-50% 0;display:flex;gap:0;border:1px solid #ffffff35;border-radius:999px;background:#10171570;backdrop-filter:blur(14px);transition:bottom .25s ease,background .2s ease}
.mayson-film-dots button{display:grid;place-items:center;width:44px;height:40px;padding:0;border:0;border-radius:999px;background:transparent;cursor:pointer}
.mayson-film-dots button::before{content:"";width:7px;height:7px;border-radius:50%;background:#ffffff68;transition:width .25s ease,background .25s ease}
.mayson-film-dots button[aria-current=true]::before{width:20px;background:#fff}
.mayson-film-dots:focus-within,.mayson-film-dots:hover{background:#101715b0}
.mayson-film-dots button:focus-visible,.mayson-film-sound:focus-visible{outline:2px solid #fff;outline-offset:2px}
[data-mayson-films].has-video-controls .mayson-film-dots{bottom:58px}

/* Preserve the complete lettering in the supplied portrait campaign designs. */
#project-mayson .project-showcase-carousel[data-mayson-campaign] .project-showcase-card{width:clamp(240px,24vw,340px)}
#project-mayson [data-mayson-campaign] .project-showcase-picture{margin:0;aspect-ratio:4/5}
#project-mayson [data-mayson-campaign] .project-pet-open{position:absolute;inset:0;display:block}
#project-mayson [data-mayson-campaign] .project-pet-open>img{display:block;width:100%;height:100%;object-fit:contain;object-position:center;pointer-events:none}
#project-mayson [data-mayson-campaign] .project-pet-open::after{width:32px;height:32px;top:12px;right:12px;font-size:20px}
#project-mayson [data-mayson-campaign] .project-showcase-controls{justify-content:center}
@media(max-width:700px){#project-mayson .project-showcase-carousel[data-mayson-campaign] .project-showcase-card{width:min(72vw,330px)}}
@media(max-width:600px){.mayson-film-sound{top:10px;right:10px;min-height:34px;padding:8px 11px;font-size:11px}.mayson-film-dots{bottom:8px}.mayson-film-dots button{height:36px;width:40px}.mayson-film-slide .project-feature-play{padding:12px 17px;font-size:12px;gap:8px}.mayson-film-slide .project-feature-play svg{width:18px;height:18px}}
@media(prefers-reduced-motion:reduce){.mayson-film-dots,.mayson-film-dots button::before{transition:none}}

/* Override the legacy widescreen Mayson media rule at each breakpoint. */
@layer mobile-composition{
 #project-mayson [data-mayson-campaign] .project-showcase-card{width:clamp(240px,24vw,340px)!important}
 #project-mayson [data-mayson-campaign] .project-showcase-picture{aspect-ratio:4/5!important;height:auto!important}
 @media(max-width:700px){#project-mayson [data-mayson-campaign] .project-showcase-card{width:min(72vw,330px)!important}}
}