#work.services-section{padding:88px 5% 90px;background:#fff;overflow:clip}
.services-heading{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:48px}
#work .services-heading h2{font:800 clamp(36px,4.2vw,64px)/1.02 'Bricolage Grotesque',sans-serif;letter-spacing:-1.5px;margin:0}
.services-heading h2 span{color:var(--orange)}
.services-heading p{font-size:15px;margin:0 0 5px;color:var(--muted)}
.services-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}
.service-collection{min-width:0}
.service-art{position:relative;width:92%;height:370px;margin:0 auto 34px}
.service-print{position:absolute;width:55%;max-width:215px;padding:7px 7px 0;background:#fff;border:1px solid #e2e2e2;transform:translate(var(--shift,0),0) rotate(var(--tilt,0deg));transition:transform .5s cubic-bezier(.2,.7,.2,1);transform-origin:50% 80%}
.service-print img{display:block;width:100%;aspect-ratio:9/14;object-fit:cover}
.service-print>span{display:flex;align-items:center;min-height:28px;font:600 8px Manrope,sans-serif;letter-spacing:1px;white-space:nowrap}
.service-print video{position:absolute;top:7px;left:7px;width:calc(100% - 14px);height:calc(100% - 35px);object-fit:cover;opacity:0;transition:opacity .25s}
.service-print:has(video) img{aspect-ratio:9/16}
.service-collection.is-playing video{opacity:1}
.print-back{--tilt:-10deg;left:3%;top:28px}
.print-front{--tilt:6deg;right:3%;top:24px;z-index:2}
.service-monthly .print-back{width:43%;left:0;top:30px;--tilt:-12deg}
.service-monthly .print-third{width:43%;right:0;top:40px;--tilt:12deg}
.service-monthly .print-front{width:49%;left:25%;right:auto;top:3px;--tilt:-3deg}
.service-launch .print-back{width:65%;left:0;top:38px;--tilt:-6deg}
.service-launch .print-back img{aspect-ratio:4/3;object-position:center 52%}
.service-launch .print-front{width:49%;right:1%;top:15px;--tilt:7deg}
.service-doodle{position:absolute;bottom:6px;left:7%;width:95px;height:60px;fill:none;stroke:var(--orange);stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round;z-index:3;pointer-events:none}
.service-launch .service-doodle{left:6%;bottom:38px;width:52px;height:52px}
.service-preview{position:absolute;right:0;bottom:-8px;z-index:4;border:1px solid var(--line);border-radius:24px;background:#fff;color:var(--ink);padding:10px 14px;font:600 11px Manrope,sans-serif;cursor:pointer}
.service-preview:hover,.service-preview[aria-pressed=true]{background:var(--orange);border-color:var(--orange)}
.service-label{display:flex;align-items:baseline;gap:12px;border-top:1px solid var(--line);padding-top:23px}
.service-number{font:600 13px Manrope,sans-serif;color:var(--orange)}
.service-label h3{flex:1;font:800 clamp(22px,2vw,31px)/1.1 'Bricolage Grotesque',sans-serif;letter-spacing:-.7px;margin:0}
.service-label a{display:flex;align-items:center;justify-content:space-between;gap:8px}
.service-label a>span{font-size:22px;font-weight:400;color:var(--orange);transition:transform .2s}
.service-label a:hover>span{transform:translate(3px,-3px)}
.service-description{font-size:14px;line-height:1.6;color:var(--muted);margin:13px 0 0 28px;max-width:300px}
.service-collection:hover .print-front,.service-collection:focus-within .print-front{transform:translateY(-10px) rotate(0deg)}
.service-collection:hover .print-back,.service-collection:focus-within .print-back{transform:translateX(-5px) rotate(calc(var(--tilt) - 3deg))}
.services-section.has-entered .service-print{animation:serviceUnfold .7s cubic-bezier(.2,.7,.2,1) backwards}
.services-section.has-entered .service-collection:nth-child(2) .service-print{animation-delay:.12s}
.services-section.has-entered .service-collection:nth-child(3) .service-print{animation-delay:.24s}
@keyframes serviceUnfold{from{transform:translateY(18px) rotate(0deg)}to{transform:translateY(0) rotate(var(--tilt))}}
@media(min-width:651px) and (max-width:1100px){.services-grid{gap:24px}.service-art{height:280px}.service-label{gap:7px}.service-label h3{font-size:22px}.service-description{margin-left:0}.service-print>span{font-size:6px;letter-spacing:.3px}.service-doodle{width:60px;bottom:0}.service-launch .service-doodle{bottom:22px}}
@media(max-width:650px){
 #work.services-section{padding:54px 6% 58px}
 .services-heading{display:block;margin-bottom:36px}
 #work .services-heading h2{font-size:38px}
 .services-heading p{font-size:13px;margin-top:15px}
 .services-grid{grid-template-columns:1fr;gap:55px}
 .service-art{height:340px;max-width:380px;width:94%;margin:0 auto 25px}
 .service-label h3{font-size:28px}
 .service-description{font-size:15px}
 .service-preview{bottom:0}
}
@media(prefers-reduced-motion:reduce){.service-print,.service-print video,.service-label a>span{transition:none}.services-section.has-entered .service-print{animation:none}}

.services-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:64px}
.service-art{height:410px}
.service-launch .print-back{width:57%;max-width:none;left:2%;top:20px;--tilt:-7deg}
.service-launch .print-front{width:57%;max-width:none;right:0;top:58px;--tilt:6deg}
.service-launch .service-print img{aspect-ratio:4/5;object-fit:cover;object-position:center}
.service-launch .service-doodle{left:2%;bottom:10px;width:38px;height:38px}
@media(min-width:651px) and (max-width:1100px){.service-art{height:330px}.services-grid{gap:40px}.service-launch .print-front{top:48px}}
@media(max-width:650px){.services-grid{grid-template-columns:1fr;gap:50px}.service-art{height:340px}}

/* Reserve space for rotated prints at every card width. */
#work.services-section{padding-top:64px;padding-bottom:40px}
#work .services-heading{margin-bottom:40px}
#work .service-art{width:92%;max-width:460px;height:auto;min-height:300px;aspect-ratio:1;margin:0 auto 28px}
#work .service-label{position:relative;padding-top:20px}
@media(max-width:650px){
 #work.services-section{padding:40px 6% 28px}
 #work .services-heading{margin-bottom:30px}
 #work .services-grid{gap:40px}
 #work .service-art{width:90%;max-width:380px;margin-bottom:24px}
 #work .service-label h3{font-size:26px}
}

/* Three launch-film stills use the same full fan as the social collage. */
#work .service-launch .service-print{max-width:215px}
#work .service-launch .print-back{width:43%;left:0;top:30px;--tilt:-12deg}
#work .service-launch .print-third{width:43%;right:0;top:40px;--tilt:12deg}
#work .service-launch .print-front{width:49%;left:25%;right:auto;top:3px;--tilt:-3deg}
#work .service-launch .service-print img{aspect-ratio:9/14}
#work .service-launch .print-front img{aspect-ratio:9/16}
#work .service-launch .service-doodle{display:none}