/* OA Motion finishing pass. Design audit informed by unslop,
   Damir Sokolovsky / @heydamir (CC BY 4.0). Agency art direction retained. */
:root{--chapter-space:clamp(64px,7vw,104px);--hairline:#ffffff29}

/* One editorial grid for copy; the films keep the full canvas. */
.intro-bottom{max-width:none;gap:clamp(32px,6vw,80px)}
.manifesto{padding-block:clamp(88px,10vw,144px)}
.manifesto h2{max-width:1100px}
.intro-bottom p{max-width:470px;color:#b6b8af}
.hero-meta p{text-wrap:balance}
.hero-shade{background:linear-gradient(180deg,#0003 0%,#0004 45%,#000a 100%)}
.move-band h2{font-size:clamp(64px,8.8vw,124px)}
.move-band{min-height:50svh}

/* Give every chapter the same typographic authority and breathing room. */
.chapter-head{padding-block:var(--chapter-space) 36px;margin-bottom:0}
.film .chapter-head h2,.tv .chapter-head h2,.ooh .chapter-head h2{font-size:clamp(88px,10.5vw,148px);line-height:1;letter-spacing:-.055em}
.word-mask{padding:.12em .14em .16em;margin:-.12em -.14em -.16em}
.entrance-complete .word-mask{overflow:visible}
.social{padding-top:0}
.social-header-title{inset:clamp(28px,5vw,72px) 0 auto}
.social-header-title h2{font-size:clamp(48px,7.3vw,104px);line-height:1.02}
.social-header-pin:after{background:linear-gradient(135deg,#0007,transparent 56%)}
.social-header-pin .comparison-divider>span{width:44px;height:44px;background:#090909b8;backdrop-filter:blur(6px)}

/* Clear controls without another row of calls to action. */
.gallery-controls{gap:24px;padding-block:12px;min-height:68px}
.gallery-position{min-width:48px;text-align:right;letter-spacing:.04em;color:#c7c9c0}
.gallery-arrows button{width:44px;height:44px}
.gallery-range{height:44px}
.gallery-cursor{font-size:10px;background:#09090965;border-color:#ffffff70}
.project-rail{overscroll-behavior-x:contain}

/* Equal logo baselines and a shared author baseline make the quotes read as a set. */
.testimonials{padding-block:clamp(64px,7vw,104px)}
.testimonials h2{font-size:clamp(40px,4.4vw,64px);margin-bottom:48px}
.quotes{gap:clamp(24px,3.4vw,48px)}
.quote{padding-top:24px}
.client-logo{height:44px;margin-bottom:28px}
.client-logo img{max-width:154px;max-height:40px;width:auto;height:auto}
.client-logo img.phizz{max-height:44px}
.quote blockquote{font-size:clamp(22px,2.05vw,28px);line-height:1.35;letter-spacing:-.025em;margin-bottom:32px}
.quote figcaption{font-size:13px;line-height:1.5}

/* The entire offer in one readable glance, with no oversized orphan line. */
.services{padding-block:clamp(80px,8vw,120px)}
.services-intro{grid-template-columns:minmax(0,1.75fr) minmax(0,1fr);gap:24px 64px;margin-bottom:56px}
.services h2{font-size:clamp(46px,6vw,80px);line-height:1.08;letter-spacing:-.05em}
.services-intro>p{font-size:17px;line-height:1.6;max-width:380px;color:#b6b8af}
.service-grid{gap:32px 64px}
.service-grid article{padding-top:24px;border-color:var(--hairline)}
.service-grid h3{font-size:clamp(22px,2vw,26px);line-height:1.3}
.service-grid p{max-width:430px;margin-top:10px;color:#b6b8af}
.ai-notes{border-color:var(--hairline);margin-top:48px;gap:64px}
.ai-notes h3{line-height:1.5}
.ai-notes p{color:#b6b8af}
.ai-notes .ai-quote{color:#f2f2ed;font-size:18px;margin-top:20px}
.contact h2{font-size:clamp(72px,10vw,140px);line-height:1.12;margin-block:48px 64px}
.contact-details{align-items:baseline}
.contact-details a{display:inline-block;min-height:32px;text-decoration-thickness:1px}
.contact-details a:focus-visible{outline-color:#090909}
.motion-toggle{min-height:44px;padding:10px 14px;display:flex;align-items:center;gap:8px;line-height:1.2}
.motion-toggle:before{content:'';width:8px;height:10px;border-inline:2px solid currentColor}
.motion-toggle[aria-pressed=true]:before{border:0;background:currentColor;clip-path:polygon(0 0,100% 50%,0 100%)}
.skip:focus{background:#afff41;color:#090909;padding:12px 18px}

@media(max-width:800px){
 .services-intro{grid-template-columns:1fr;gap:24px;margin-bottom:40px}
 .services-intro>p{max-width:500px}
 .services h2{font-size:clamp(44px,7.7vw,64px)}
 .service-grid,.ai-notes{column-gap:32px}
 .chapter-head{padding-bottom:28px}
 .move-band{min-height:44svh}
 .move-band h2{font-size:clamp(44px,9vw,72px)}
 .contact-details{align-items:stretch}
}
@media(max-width:520px){
 :root{--chapter-space:56px}
 .hero{height:88svh;min-height:560px}
 /* AE art has transparent side margins: enlarge its canvas, not the video. */
 .hero-artwork{width:112vw;top:43%}
 .hero-meta{bottom:11%}
 .hero-meta p{font-size:16px;line-height:1.5}
 .move-band{min-height:36svh;padding-block:64px}
 .move-band h2{font-size:clamp(38px,11.4vw,56px)}
 .manifesto{padding-block:80px}
 .manifesto h2{font-size:clamp(32px,9.4vw,44px);line-height:1.17}
 .intro-bottom{margin-top:36px;gap:16px}
 .testimonials h2{font-size:36px;margin-bottom:36px}
 .quotes{gap:28px}
 .client-logo{height:36px;margin-bottom:20px}
 .client-logo img{max-height:32px;max-width:138px}
 .client-logo img.phizz{max-height:36px}
 .quote blockquote{font-size:23px;line-height:1.35;margin-bottom:24px}
 .film .chapter-head h2,.tv .chapter-head h2,.ooh .chapter-head h2{font-size:clamp(76px,23vw,108px)}
 .social-header-title{inset:20px 0 auto}
 .social-header-title h2{font-size:clamp(28px,7.7vw,40px);line-height:1.04}
 .gallery-controls{gap:10px;padding-block:8px;min-height:60px}
 .gallery-position{font-size:10px;min-width:36px}
 .gallery-arrows{gap:0}
 .gallery-arrows button{width:40px;height:44px}
 .gallery-hint{font-size:11px}
 .services{padding-block:72px}
 .services h2{font-size:clamp(36px,10.5vw,48px)}
 .service-grid{gap:28px}
 .ai-notes{gap:28px;margin-top:40px}
 .contact{padding-block:72px 76px}
 .contact h2{font-size:clamp(46px,15.7vw,88px);margin-block:40px 48px}
 .contact-details{gap:20px;font-size:15px}
 .contact-details a{min-height:44px}
 .motion-toggle{font-size:10px;bottom:12px;left:12px;min-height:40px;padding:8px 12px}
}
@media(prefers-reduced-motion:reduce){.gallery-arrows button{transition:none}}

/* Two equally weighted landscape films follow the Murad pairing. */
.ooh{--ooh-gap:clamp(16px,2.25vw,40px)}
.ooh-support{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"location reference";gap:var(--ooh-gap)}
.hero-ae-canvas{filter:none}
.hero-ae-poster{mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent),linear-gradient(to bottom,transparent,#000 9%,#000 91%,transparent);mask-composite:intersect}
@media(max-width:700px){.ooh-support{grid-template-columns:1fr;grid-template-areas:"location" "reference"}}

/* Portrait artwork and landscape location film share one height without cropping. */
.ooh-murad-pair{display:grid;grid-template-columns:minmax(0,81fr) minmax(0,256fr);gap:var(--ooh-gap);margin:var(--ooh-gap) 0;align-items:start}
.ooh-murad-pair figure{min-width:0;width:100%;max-width:none;margin:0}
.ooh-murad-pair .media{width:100%;height:auto;min-height:0;background:#090909}
.ooh-murad-pair .murad-final-screen .media{aspect-ratio:9/16}
.ooh-murad-pair .murad-support .media{aspect-ratio:16/9}
.ooh-murad-pair video{width:100%;height:100%;object-fit:contain}
@media(max-width:700px){
 .ooh-murad-pair{grid-template-columns:1fr}
 .ooh-murad-pair .murad-final-screen .media{height:min(72svh,680px);aspect-ratio:auto;background:#c4c5bc}
}