/* Shared project-card interaction system */
.work-card,
.work-card.featured,
.rekyc-card {
  transition: none !important;
}

.work-card:hover,
.work-card:focus-within,
.work-card.featured:hover,
.work-card.featured:focus-within,
.rekyc-card:hover,
.rekyc-card:focus-within {
  transform: none !important;
  box-shadow: none !important;
  border-color: transparent !important;
}

/* One CTA treatment: a stationary coconut-milk control and an arrow that does the moving. */
.force-feature-link,
.rekyc-link,
.project-cta {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
  min-width: 0 !important;
  width: auto !important;
  height: auto !important;
  padding: 13px 16px !important;
  border: 1px solid #f1eee6 !important;
  border-radius: 0 !important;
  background: #f1eee6 !important;
  color: #6d240f !important;
  box-shadow: none !important;
  font: 600 11px/1 "DM Sans", Inter, Arial, sans-serif !important;
  letter-spacing: .1em !important;
  text-decoration: none !important;
  transition: none !important;
}

.force-feature-link:hover,
.force-feature-link:focus-visible,
.force-feature-link:active,
.rekyc-link:hover,
.rekyc-link:focus-visible,
.rekyc-link:active,
.project-cta:hover,
.project-cta:focus-visible,
.project-cta:active {
  transform: none !important;
  background: #f1eee6 !important;
  box-shadow: none !important;
}

.force-feature-link,
.rekyc-link,
.project-cta {
  text-transform: none !important;
}

.force-link-arrow,
.rekyc-link-arrow,
.project-cta-arrow {
  display: inline-block;
  font-size: 15px;
  line-height: 1;
  transition: transform .2s ease;
}

.force-feature-link:hover .force-link-arrow,
.force-feature-link:focus-visible .force-link-arrow,
.rekyc-link:hover .rekyc-link-arrow,
.rekyc-link:focus-visible .rekyc-link-arrow,
.project-cta:hover .project-cta-arrow,
.project-cta:focus-visible .project-cta-arrow {
  transform: translate(4px, -4px) !important;
}

/* Keep the individual project visual in place. */
.work-card.featured:hover .force-phone,
.work-card.featured:focus-within .force-phone {
  transform: rotate(7deg) translate(7px, -2px) !important;
}

.force-card-footer {
  display: none !important;
}

.work-card:not(.featured):not(.rekyc-card) > .card-body {
  padding-bottom: 88px !important;
}

.work-card:not(.featured):not(.rekyc-card) .project-cta {
  position: absolute;
  z-index: 4;
  right: 22px;
  bottom: 22px;
  margin: 0;
  cursor: default;
}

@media (max-width: 820px) {
  .work-card:not(.featured):not(.rekyc-card) .project-cta {
    right: 18px;
    bottom: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .force-link-arrow,
  .rekyc-link-arrow,
  .project-cta-arrow {
    transition: none;
  }
}

/* FORCE has older, competing hover declarations in the prototype. Lock the control itself
   to one physical position and leave movement exclusively to its arrow child. */
.force-feature-visual > a.force-feature-link,
.force-feature-visual > a.force-feature-link:hover,
.force-feature-visual > a.force-feature-link:focus-visible,
.force-feature-visual > a.force-feature-link:active {
  top: auto !important;
  right: 28px !important;
  bottom: 28px !important;
  left: auto !important;
  translate: none !important;
  scale: none !important;
  rotate: none !important;
  transform: translate3d(0, 0, 0) !important;
  animation: none !important;
  transition-property: background-color, border-color, color !important;
  transition-duration: .2s !important;
}

/* This deliberately exceeds the specificity of the legacy featured-card hover rule. */
.work-card.featured .force-feature .force-feature-visual > a.force-feature-link:hover,
.work-card.featured .force-feature .force-feature-visual > a.force-feature-link:focus-visible,
.work-card.featured .force-feature .force-feature-visual > a.force-feature-link:active {
  transform: none !important;
  translate: none !important;
  scale: none !important;
  rotate: none !important;
  box-shadow: none !important;
}