/* Colourful service cards: video editing leads, design services follow. */
.px-vivid-services [data-px-layout="e167"]{block-size:auto;min-block-size:0;max-block-size:none;overflow:visible}
.px-vivid-services .tp-demo-item-box .row{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;max-width:1160px;margin-inline:auto}
.px-vivid-services .tp-demo-item-box .row>.col{display:flex;width:auto;min-width:0;padding:0}
.px-vivid-services .tp-demo-item{--card-start:#377fe9;--card-end:#5530d4;position:relative;display:flex;flex-direction:column;width:100%;margin-bottom:0;padding:20px;overflow:hidden;border-radius:20px;background:linear-gradient(155deg,var(--card-start),var(--card-end));color:#fff;isolation:isolate}
.px-vivid-services .tp-demo-item[data-tone="coral"]{--card-start:#d42b66;--card-end:#ffa18c}
.px-vivid-services .tp-demo-item[data-tone="violet"]{--card-start:#7542eb;--card-end:#d980f4}
.px-vivid-services .tp-demo-item[data-tone="orange"]{--card-start:#e75a34;--card-end:#f8b25c}
.px-vivid-services .tp-demo-item[data-tone="teal"]{--card-start:#00879e;--card-end:#52d3ce}
.px-vivid-services .tp-demo-item[data-tone="pink"]{--card-start:#c73399;--card-end:#9566f1}
.px-vivid-services .tp-demo-item::before{content:'';position:absolute;width:330px;height:330px;right:-120px;bottom:0;border-radius:50%;background:#fff2;filter:blur(48px);pointer-events:none;z-index:-1}
.px-vivid-services .tp-demo-content-wrap{padding:0 0 16px;text-align:left!important;flex:0 0 auto;position:relative;z-index:2}
.px-vivid-services .tp-demo-content{gap:9px}
.px-vivid-services .tp-demo-item>.anim-zoomin-wrap{margin-top:auto}
.px-service-kicker{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:15px}
.px-service-kicker>img{display:block;width:104px;height:16px;object-fit:contain;object-position:left}
.px-service-kicker>span{font-size:12px;font-weight:600;letter-spacing:.08em;color:#fff9}
.px-vivid-services .tp-demo-title{font-size:clamp(22px,2vw,28px);font-weight:650;line-height:1.2;letter-spacing:-.025em;color:#fff;margin:0;overflow-wrap:anywhere}
.px-vivid-services .tp-demo-title a,.px-vivid-services .tp-demo-title a:hover{color:#fff}
.px-vivid-services .px-service-description{font-size:16px;line-height:1.45;font-weight:450;color:#fff;margin:0;text-shadow:0 1px 1px #27104812}
.px-vivid-services .tp-demo-thumb{flex:none;aspect-ratio:16/10;width:100%;margin:auto auto 0;overflow:hidden;border:4px solid #ffffff6b;border-radius:16px;box-shadow:0 10px 22px #24124a20;background:#ffffff20;transform:rotate(-2deg)}
.px-vivid-services .tp-demo-thumb>img{height:100%;width:100%;object-fit:cover;aspect-ratio:auto}
.px-vivid-services .tp-demo-figma{display:none!important}
.px-vivid-services .tp-demo-item[data-visual="phone"] .tp-demo-thumb{width:72%;aspect-ratio:1.152;border:5px solid #ffffffa6;border-radius:19px;transform:rotate(3deg)}
.px-vivid-services .tp-demo-item[data-visual="phone"] .tp-demo-thumb>img{object-position:51% center}
.px-vivid-services .tp-demo-item[data-visual="clips"] .tp-demo-thumb{transform:rotate(1deg);box-shadow:15px -12px 0 -4px #ffffff40,0 15px 32px #24124a20}
.px-video-timeline{display:block;position:absolute;bottom:13px;left:4%;width:92%;height:auto;pointer-events:none;z-index:1;filter:drop-shadow(0 4px 8px #160b4420)}
.px-vivid-services .tp-demo-item[data-visual="phone"] .px-video-timeline{left:7%;width:86%}
.px-vivid-services .tp-demo-btn-wrap{display:flex;flex-wrap:wrap;gap:5px;padding:14px;bottom:0}
.px-vivid-services .tp-demo-btn{font-size:13px;padding:9px 12px;margin:0}
.px-vivid-services .tp-demo-btn-wrap:focus-within{opacity:1;visibility:visible;bottom:0}
@media(min-width:640px){.px-vivid-services .tp-demo-item-box .row{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1024px){.px-vivid-services .tp-demo-item-box .row{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Portrait cards travel along the same arc as the reference. */
.px-vivid-services .px-service-carousel {
  container-type:inline-size;
  background:#fff;
  overflow:hidden;
  padding-bottom:50px;
}
.px-vivid-services .px-service-carousel .row {
  --poster-width:clamp(138px,min(16.5cqw,calc((100svh - 185px) * 9 / 16)),290px);
  --poster-step:max(151px,23cqw);
  position:relative;
  display:block;
  max-width:none;
  height:calc(var(--poster-width) * 16 / 9 + clamp(58px,5.6cqw,88px));
  margin:0;
  background:
    radial-gradient(ellipse at 20% 55%,#8caaf945,transparent 39%),
    radial-gradient(ellipse at 49% 66%,#b59bf53d,transparent 39%),
    radial-gradient(ellipse at 79% 52%,#ff9db744,transparent 39%);
}
.px-vivid-services .px-service-carousel .row>.col {
  position:absolute;
  left:50%;
  top:clamp(18px,2cqw,32px);
  display:block;
  width:var(--poster-width);
  margin:0;
  transform:translate(calc(-50% + var(--slot) * var(--poster-step)),calc(var(--drop) * clamp(5px,.7cqw,11px))) rotate(var(--tilt));
}
.px-services .px-service-platforms{display:flex;justify-content:center;gap:10px}
.px-services .px-service-platforms>span{display:grid;place-items:center;width:56px;height:56px;margin:0;padding:0}
.px-service-platforms svg{display:block;width:32px;height:32px}
.px-vivid-services .px-service-carousel .tp-demo-item {
  display:block;
  padding:0;
  aspect-ratio:9/16;
  border-radius:clamp(13px,1.55cqw,27px);
  background:var(--card-start);
  box-shadow:0 6px 18px #0002;
}
.px-vivid-services .px-service-carousel .tp-demo-item::before{display:none}
.px-vivid-services .px-service-carousel .tp-demo-item::after {
  content:'';
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(to bottom,transparent 58%,color-mix(in srgb,var(--card-start) 78%,transparent) 81%,var(--card-end));
}
.px-vivid-services .px-service-carousel .tp-demo-item .tp-demo-thumb {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  margin:0;
  border:0;
  border-radius:inherit;
  box-shadow:none;
  transform:none;
}
.px-vivid-services .px-service-carousel .tp-demo-thumb>img{object-fit:cover;transform:none;border-radius:inherit}
.px-vivid-services .px-service-carousel .tp-demo-item[data-visual="clips"] .tp-demo-thumb>img{object-position:24% center}
.px-vivid-services .px-service-carousel .tp-demo-thumb::after{display:none}
.px-vivid-services .px-service-carousel .tp-demo-content-wrap {
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:7% 9% 9%;
  pointer-events:none;
}
.px-vivid-services .px-service-carousel .px-service-kicker{justify-content:end;margin:0}
.px-vivid-services .px-service-carousel .px-service-kicker>img {
  width:26%;
  height:auto;
  padding:4px;
  border-radius:4px;
  background:#14141455;
}
.px-vivid-services .px-service-carousel .px-service-kicker>span,
.px-vivid-services .px-service-carousel .px-video-timeline{display:none}
.px-vivid-services .px-service-carousel .tp-demo-title {
  max-width:12ch;
  margin-inline:auto;
  text-align:center;
  text-transform:uppercase;
  text-wrap:balance;
  font-size:clamp(13px,1.5cqw,28px);
  font-weight:750;
  line-height:.98;
  text-shadow:0 2px 8px #0008;
}
.px-vivid-services .px-service-carousel .tp-demo-title a{pointer-events:auto}
.px-vivid-services .px-service-carousel .px-service-description {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip-path:inset(50%);
}
.px-vivid-services .px-service-carousel .tp-demo-btn-wrap {
  z-index:3;
  inset:auto 0 32%;
  justify-content:center;
}
.px-vivid-services .px-service-carousel .tp-demo-item:hover .tp-demo-thumb img{filter:none}