/* Homepage Services / different visual grammar from the Our Work reels.
   Static curated images are drawn from the original Loopi Squarespace media. */

/* The section headings are one design system, including the asterisk. */
.homepage-work .work-heading{
  display:flex;justify-content:space-between;align-items:end;gap:36px;
  margin:0 0 55px;
}
.homepage-work .work-heading h2{
  font:900 clamp(57px,8vw,115px)/.93 Arial,sans-serif;
  letter-spacing:-.085em;margin:0;
  text-transform:none;
}
.homepage-work .work-heading h2 .asterisk{
  color:inherit;font-size:.45em;vertical-align:top;padding-left:16px;
}
.homepage-work .work-heading p{
  font:400 15px/1.5 Arial,sans-serif;color:#777;
  max-width:235px;margin:0;
}
.homepage-work .work-heading>span{display:none}

/* Social Media: a one-time fan-out rather than the continuously swapping
   carousel used in Our Work. */
.services [data-service="social"] .social-post{
  transition:transform .82s cubic-bezier(.16,1.2,.24,1),filter .6s;
}
.services [data-service="social"] .post-a{filter:saturate(.8)}
.services [data-service="social"] .post-b{filter:saturate(.8)}
.services [data-service="social"] .post-c{filter:saturate(.8)}
.services [data-service="social"] .learn-more:is(:hover,:focus-visible,.is-previewing) .social-post{
  animation:none;
  filter:saturate(1);
}
.services [data-service="social"] .learn-more:is(:hover,:focus-visible,.is-previewing) .post-a{
  transform:translate(-9px,-10px) rotate(-17deg) scale(.95);
  transition-delay:.08s;
}
.services [data-service="social"] .learn-more:is(:hover,:focus-visible,.is-previewing) .post-b{
  transform:translate(55px,-14px) rotate(0) scale(.98);
  transition-delay:.18s;
}
.services [data-service="social"] .learn-more:is(:hover,:focus-visible,.is-previewing) .post-c{
  transform:translate(100px,-4px) rotate(18deg) scale(.9);
  transition-delay:.28s;
}

/* Content: selected frames align into a compact contact sheet, hold still
   for inspection, and retract when focus leaves. */
.services [data-service="content"] .content-preview{
  background:#dedfda;
}
.services [data-service="content"] .photo-sheet{
  width:103px;height:119px;
  transition:transform .9s cubic-bezier(.16,1.16,.23,1),box-shadow .65s;
  animation:none;
}
.services [data-service="content"] .shot-one{top:30px;left:55px;transform:translate(5px,7px) rotate(-8deg);z-index:1}
.services [data-service="content"] .shot-two{top:27px;left:61px;transform:translate(5px,-3px) rotate(0);z-index:2}
.services [data-service="content"] .shot-three{top:35px;left:68px;transform:translate(5px,2px) rotate(8deg);z-index:3}
.services [data-service="content"] .learn-more:is(:hover,:focus-visible,.is-previewing) .content-preview .photo-sheet{
 animation:none;
 box-shadow:0 8px 18px #0003;
}
.services [data-service="content"] .learn-more:is(:hover,:focus-visible,.is-previewing) .shot-one{
 transform:translate(-43px,0) rotate(-8deg);transition-delay:.1s;
}
.services [data-service="content"] .learn-more:is(:hover,:focus-visible,.is-previewing) .shot-two{
 transform:translate(4px,-11px) rotate(0);transition-delay:.21s;
}
.services [data-service="content"] .learn-more:is(:hover,:focus-visible,.is-previewing) .shot-three{
 transform:translate(57px,1px) rotate(8deg);transition-delay:.32s;
}
@media(max-width:670px){
 .homepage-work .work-heading{display:block;margin-bottom:32px}
 .homepage-work .work-heading h2{font-size:clamp(60px,12vw,85px)}
 .homepage-work .work-heading p{margin-top:20px;max-width:none}
}
@media(prefers-reduced-motion:reduce){
 .services [data-service="social"] .social-post,
 .services [data-service="content"] .photo-sheet{transition:none!important;animation:none!important}
}

/* Home Services: miniature Instagram-style posts, distinct from the large Our Work feed. */
.services [data-service="social"] .social-post{
 display:flex;flex-direction:column;padding:0;background:#fff;color:#181818;
 width:108px;height:149px;overflow:hidden;border-radius:3px;
}
.services [data-service="social"] .social-post-head{
 display:flex;align-items:center;gap:3px;flex:0 0 23px;padding:3px 4px;background:#fff;
}
.services [data-service="social"] .social-avatar{
 width:16px;height:16px;flex:none;object-fit:cover;border-radius:50%;display:block;
}
.services [data-service="social"] .social-author{
 display:flex;flex-direction:column;align-items:start;gap:1px;min-width:0;flex:1;
}
.services [data-service="social"] .social-author strong{font:900 6px/1 Arial,sans-serif}
.services [data-service="social"] .social-author small{font:500 3.6px/1 Arial,sans-serif;color:#777}
.services [data-service="social"] .social-menu{font-size:8px;letter-spacing:1px}
.services [data-service="social"] .social-post .social-post-image{
 width:100%;height:81px;flex:0 0 81px;object-fit:cover;display:block;
}
.services [data-service="social"] .social-controls{
 display:flex;justify-content:space-between;align-items:center;flex:0 0 19px;
 padding:3px 5px 0;
}
.services [data-service="social"] .social-actions-left{display:flex;gap:4px}
.services [data-service="social"] .social-controls svg{
 width:10px;height:10px;fill:none;stroke:currentColor;stroke-width:1.8;
 stroke-linecap:round;stroke-linejoin:round;display:block;
}
.services [data-service="social"] .social-caption{
 padding:3px 5px 4px;font:500 5px/1.25 Arial,sans-serif;
 white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.services [data-service="social"] .social-caption strong{font-weight:900}