/* Optional Panni UI-kit layer. Disable it in Appearance > Customize > Visual system. */
.tp-ui-kit {
  --ui-magenta: #c040b5;
  --ui-lilac: #e8a2df;
  --ui-blush: #c99bb2;
  --ui-ink: #161210;
  --ui-paper: #f3efe7;
}

/* Buttons: 24 px pill corners, filled silhouettes, no shadow. */
.tp-ui-kit .button,
.tp-ui-kit .service-row__button {
  min-height: 48px;
  gap: 12px;
  padding: 12px 28px;
  border: 0;
  border-radius: 24px;
  box-shadow: none;
  color: var(--ui-ink);
  font: 700 15px/1.45 var(--font-display);
  letter-spacing: -.01em;
  transition: color .22s ease, background .35s ease, transform .22s ease;
}

.tp-ui-kit .button--dark {
  background: var(--ui-ink);
  color: #fff;
}

.tp-ui-kit .button--outline,
.tp-ui-kit .button--accent,
.tp-ui-kit .service-row__button {
  background: var(--ui-lilac);
  color: var(--ui-ink);
}

.tp-ui-kit .hero .button--outline {
  background: var(--ui-lilac);
  color: var(--ui-ink);
}

.tp-ui-kit .button--dark:hover,
.tp-ui-kit .button--outline:hover,
.tp-ui-kit .button--accent:hover,
.tp-ui-kit .service-row__button:hover,
.tp-ui-kit .button--dark:focus-visible,
.tp-ui-kit .button--outline:focus-visible,
.tp-ui-kit .button--accent:focus-visible,
.tp-ui-kit .service-row__button:focus-visible {
  border: 0;
  background: linear-gradient(100deg, #8f267f, var(--ui-magenta));
  color: #fff;
  text-decoration: none;
}

.tp-ui-kit .button:hover,
.tp-ui-kit .service-row__button:hover {
  transform: translateY(-1px);
}

.tp-ui-kit .button:focus-visible,
.tp-ui-kit .service-row__button:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 4px var(--ui-paper), 0 0 0 7px var(--ui-ink);
}

.tp-ui-kit .button--liquid::before { display: none; }
.tp-ui-kit .button--liquid:hover,
.tp-ui-kit .button--liquid:focus-visible { border-color: transparent; }

.tp-ui-kit .button--dark:not(:has(.site-arrow, .external-link-icon))::after {
  content: "";
  width: 18px;
  height: 18px;
  flex: none;
  background: currentColor;
  -webkit-mask: url('../icons/arrow.svg') center / contain no-repeat;
  mask: url('../icons/arrow.svg') center / contain no-repeat;
  transition: transform .22s ease;
}

.tp-ui-kit .button--dark:hover::after,
.tp-ui-kit .button--dark:focus-visible::after { transform: translateX(3px); }

.tp-ui-kit .button .site-arrow,
.tp-ui-kit .service-row__button .site-arrow {
  width: 16px;
  height: 16px;
  margin-inline-start: 0;
}

.tp-ui-kit .project-card__cta {
  align-self: flex-start;
  margin-top: auto;
  padding: 0;
  background: none;
  font: 700 15px/1.45 var(--font-display);
  letter-spacing: -.01em;
}

/* Filled UI-kit shapes stay flat and shadowless while retaining the motion system. */
.tp-ui-kit .video-shape--ui-kit {
  filter: none;
}

.tp-ui-kit .video-shape--ui-kit.video-shape--service {
  width: 126px;
}

.tp-ui-kit .video-shape--ui-kit .video-shape__service-core,
.tp-ui-kit .video-shape--ui-kit .video-shape__float-core,
.tp-ui-kit .video-shape--ui-kit .video-shape__scroll-form,
.tp-ui-kit .video-shape--ui-kit .video-shape__pulse-core {
  transform-box: fill-box;
  transform-origin: center;
}

.tp-ui-kit .ui-cta-pair,
.tp-ui-kit .ui-cta-pair__left,
.tp-ui-kit .ui-cta-pair__right,
.tp-ui-kit .ui-cta-x,
.tp-ui-kit [data-ui-faq-morph] {
  transform-box: fill-box;
  transform-origin: center;
  will-change: transform, opacity;
}

.tp-ui-kit [data-ui-faq-morph] { transform: rotate(45deg); }

.tp-ui-kit .video-shape--ui-kit.video-shape--about {
  width: min(52%, 280px);
}

.tp-ui-kit .video-shape--ui-kit.video-shape--cta {
  width: min(100%, 270px);
}

.tp-ui-kit .video-shape--ui-kit.video-shape--faq {
  width: min(100%, 230px);
}

@media (max-width: 767px) {
  .tp-ui-kit .button,
  .tp-ui-kit .service-row__button {
    min-height: 48px;
    padding-inline: 22px;
  }

  .tp-ui-kit .video-shape--ui-kit.video-shape--service { width: 106px; }
  .tp-ui-kit .video-shape--ui-kit.video-shape--about { width: min(58%, 230px); }
  .tp-ui-kit .video-shape--ui-kit.video-shape--cta { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .tp-ui-kit .button,
  .tp-ui-kit .service-row__button { transition: none; }
}