.ransom {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  line-height: 1;
}

.r {
  display: inline-block;
  padding: 0.04em 0.09em;
  margin: 0 0.01em;
  transform: translateY(var(--dy)) rotate(var(--rot)) scale(var(--sc));
}

.r-first {
  font-size: 1.28em;
}

.r-space {
  display: inline-block;
  width: 0.32em;
}

.r-a {
  font-family: var(--f-impact);
  background: var(--ink);
  color: var(--white);
  text-transform: uppercase;
}

.r-b {
  font-family: var(--f-sans);
  font-weight: 900;
  font-stretch: 75%;
  background: var(--white);
  color: var(--ink);
  outline: 2px solid var(--ink);
  text-transform: uppercase;
}

.r-c {
  font-family: var(--f-display);
  font-style: italic;
  color: var(--ink);
  font-size: 1.18em;
  text-transform: lowercase;
}

.r-d {
  font-family: var(--f-sans);
  font-weight: 800;
  background: var(--blue);
  color: var(--white);
  text-transform: uppercase;
}

.r-e {
  font-family: var(--f-impact);
  color: var(--blue);
  text-transform: uppercase;
  -webkit-text-stroke: 1px var(--ink);
}

.r-f {
  font-family: var(--f-mono);
  font-weight: 700;
  background: var(--ink);
  color: var(--white);
  text-transform: lowercase;
}

.ransom--on-dark .r-c {
  color: var(--white);
}

@keyframes r-jitter {
  0%, 100% { transform: translateY(var(--dy)) rotate(var(--rot)) scale(var(--sc)); }
  50% { transform: translateY(calc(var(--dy) * -1)) rotate(calc(var(--rot) * -1)) scale(var(--sc)); }
}

/* Card Structure */
.card {
  position: absolute;
  transform-style: preserve-3d;
  will-change: transform;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  pointer-events: auto;
  transition: filter var(--d-fast);
}

.card--focal {
  z-index: 30;
}

.card--focal.card--service .shard--blue {
  transform: rotate(2.5deg) translate(9px, 9px);
}

.card__inner {
  position: absolute;
  inset: 0;
  transition: transform var(--d-fast) var(--ease-back);
}

.card:hover .card__inner,
.card:focus-visible .card__inner {
  transform: translateY(-8px) scale(1.06) rotate(-1.5deg);
}

.card:hover .ransom .r {
  animation: r-jitter 240ms steps(2) 1;
}

/* Shards */
.shard {
  position: absolute;
  pointer-events: none;
}

/* Service Card Shards */
.card--service .shard--back {
  inset: -9% -7% -8% -10%;
  background: var(--ink);
  transform: rotate(-3deg);
  clip-path: polygon(4% 0%, 38% 3%, 43% 0%, 100% 5%, 96% 30%, 100% 35%, 97% 72%, 100% 100%, 58% 97%, 52% 100%, 0% 96%, 3% 60%, 0% 55%, 2% 18%);
}

.card--service .shard--blue {
  inset: -4% -5% -5% -3%;
  background: var(--blue);
  transform: rotate(2deg) translate(6px, 6px);
  clip-path: polygon(0% 6%, 60% 0%, 64% 4%, 100% 2%, 98% 48%, 100% 52%, 96% 100%, 30% 97%, 26% 100%, 2% 94%, 4% 40%);
  transition: transform var(--d-fast) var(--ease-back);
}

.card--service:hover .shard--blue {
  transform: rotate(3deg) translate(10px, 2px);
}

.card--service .shard--white {
  inset: -1.5%;
  background: var(--white);
  clip-path: polygon(2% 2%, 98% 0%, 100% 97%, 0% 100%);
}

.card--service .card__media {
  position: absolute;
  inset: 3%;
  width: 94%;
  height: 94%;
  object-fit: cover;
  object-position: 50% 30%;
  clip-path: polygon(3% 3%, 97% 1.5%, 98.5% 96%, 2% 98.5%);
}

.card--service .card__dots {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 45%;
  height: 40%;
  opacity: 0.55;
  pointer-events: none;
}

.card--service .card__index {
  position: absolute;
  top: -6%;
  right: -8%;
  background: var(--ink);
  color: var(--white);
  padding: 6px 10px;
  transform: rotate(6deg);
  clip-path: polygon(6% 0, 100% 6%, 94% 100%, 0 92%);
  display: flex;
  align-items: baseline;
  gap: 2px;
}

.card--service .card__index b {
  font-family: var(--f-impact);
  font-size: calc(var(--card-h) * 0.18);
  line-height: 1;
}

.card--service .card__index span {
  font-family: var(--f-mono);
  font-size: 10px;
  color: var(--blue-soft);
}

.card--service .card__title {
  position: absolute;
  left: -10%;
  bottom: 14%;
  font-size: calc(var(--card-h) * 0.12);
  transform: rotate(-6deg);
  filter: drop-shadow(4px 4px 0 var(--ink));
  white-space: nowrap;
}

.card--service .card__sub {
  position: absolute;
  left: -4%;
  bottom: 4%;
  background: var(--ink);
  color: var(--white);
  font-family: var(--f-mono);
  font-size: 10px;
  padding: 4px 8px;
  transform: rotate(-4deg);
  white-space: nowrap;
}

/* Filler Card Shards */
.card--filler .shard--shadow {
  inset: 0;
  background: var(--ink);
  transform: translate(7px, 8px) rotate(1.2deg);
}

.card--filler .shard--white {
  inset: -2.5%;
  background: var(--white);
}

.card--filler .card__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card--filler .v-a .shard--shadow,
.card--filler .v-a .shard--white,
.card--filler .v-a .card__media {
  clip-path: polygon(0% 3%, 100% 0%, 98% 100%, 2% 96%);
}

.card--filler .v-b .shard--shadow,
.card--filler .v-b .shard--white,
.card--filler .v-b .card__media {
  clip-path: polygon(2% 0%, 97% 4%, 100% 97%, 0% 100%);
}

.card--filler .v-c .shard--shadow,
.card--filler .v-c .shard--white,
.card--filler .v-c .card__media {
  clip-path: polygon(0% 0%, 100% 2%, 97% 96%, 4% 100%);
}