.motion{background:#fffdf8;color:var(--ink)}

.motion-intro{padding-top:30px}
.motion-intro .backlink{margin-bottom:26px}
.motion-intro__grid{
  display:grid;grid-template-columns:minmax(0,825px) minmax(260px,1fr);gap:70px;align-items:end;
}
.motion-intro .eyebrow{margin:0}
.motion-intro h1{
  margin:18px 0 0;font-family:var(--serif);font-weight:700;font-size:104px;line-height:96px;
  letter-spacing:-5.2px;color:var(--ink);white-space:nowrap;
}
.motion-intro h1 span{color:#1b82f1}
.motion-intro__kicker{
  margin:0 0 20px;font-size:24px;line-height:32px;letter-spacing:-.45px;color:var(--ink-2);
}

.motion-shorts{padding-top:82px}
.motion-work{padding-top:82px}
.motion-work__eyebrow{margin:0 0 28px}
.motion-work__eyebrow span{font-weight:700;font-size:11px;letter-spacing:1.6px;color:rgba(82,96,113,.78)}
.motion-reels{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.motion-reels .video-card--reel{aspect-ratio:9/16}
.motion-reels .video-card--reel img{object-position:center}
.motion-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.video-card{
  position:relative;display:block;width:100%;aspect-ratio:16/9;padding:0;border:0;border-radius:4px;
  overflow:hidden;background:#dde5ec;cursor:pointer;color:inherit;text-align:left;
}
.video-card img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .55s cubic-bezier(.22,.61,.36,1),filter .3s ease;
}
.video-card::after{
  content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,10,24,0) 58%,rgba(4,10,24,.18));
  pointer-events:none;
}
.video-card:hover img{transform:scale(1.025)}
.video-card__play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;width:58px;height:58px;
  border-radius:50%;display:grid;place-items:center;background:rgba(20,25,34,.86);color:#fff;
  font:700 19px/1 var(--sans);padding-left:3px;box-shadow:0 4px 18px rgba(0,0,0,.15);
  transition:transform .22s ease,background .22s ease;
}
.video-card:hover .video-card__play{transform:translate(-50%,-50%) scale(1.06);background:rgba(20,25,34,.94)}
.video-card__tag{
  position:absolute;z-index:3;left:14px;bottom:14px;max-width:calc(100% - 28px);padding:7px 10px;
  border-radius:5px;background:rgba(5,7,11,.82);color:#fff;font:700 11px/13px var(--sans);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none;
}
.video-card iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:5;background:#000}
.video-card.is-playing{cursor:default}
.video-card.is-playing::after,.video-card.is-playing .video-card__play,.video-card.is-playing .video-card__tag{display:none}
.motion-foot{margin-top:126px}

@media (max-width:1400px){
  .motion-intro h1{font-size:82px;line-height:82px;letter-spacing:-4px}
  .motion-intro__grid{grid-template-columns:minmax(0,1fr) 320px;gap:40px}
}
@media (max-width:980px){
  .motion-intro__grid{grid-template-columns:1fr;gap:22px}
  .motion-intro__kicker{margin:0}
  .motion-intro h1{font-size:64px;line-height:66px;white-space:normal}
  .motion-reels{grid-template-columns:repeat(2,minmax(0,1fr))}
  .motion-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .video-card img,.video-card__play{transition:none!important}
  .video-card:hover img{transform:none}
}

.video-card:focus-visible{outline:3px solid #1b82f1;outline-offset:3px}