.deliverables {
  background: #071b31;
  color: #f4f7fa;
  padding: clamp(90px, 7vw, 110px) 0;
  overflow: hidden;
}

.deliverables__inner {
  width: min(1480px, calc(100% - 136px));
  margin: 0 auto;
}

.deliverables__eyebrow {
  margin: 0;
  color: #32c5ff;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .12em;
}

.deliverables__header h2 {
  max-width: 1100px;
  margin: 18px 0 0;
  color: #f4f7fa;
  font-size: clamp(40px, 3.2vw, 52px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.02em;
}

.deliverables__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(22px, 1.7vw, 28px);
  margin-top: clamp(52px, 4vw, 60px);
  padding-bottom: 60px;
}

.deliverable-card {
  --card-offset-y: 0px;
  --card-enter-y: 0px;
  --card-hover-y: 0px;
  display: flex;
  min-width: 0;
  height: clamp(330px, 23vw, 360px);
  padding: 32px;
  flex-direction: column;
  background: #0c2946;
  border: 1px solid rgba(111, 163, 200, .42);
  border-radius: 14px;
  transform: translateY(calc(var(--card-offset-y) + var(--card-enter-y) - var(--card-hover-y)));
  transition: transform 210ms cubic-bezier(.22, 1, .36, 1), border-color 210ms cubic-bezier(.22, 1, .36, 1), background-color 210ms cubic-bezier(.22, 1, .36, 1);
}

.deliverable-card:nth-child(even) { --card-offset-y: 60px; }
.deliverable-card.is-featured { --card-hover-y: 4px; border-color: rgba(32, 197, 255, .9); }
.deliverable-card:hover { --card-hover-y: 4px; border-color: rgba(32, 197, 255, .78); background: #102e4c; }

.deliverable-card__amount {
  display: flex;
  align-items: baseline;
  margin: 0;
  font-size: clamp(38px, 3vw, 44px);
  font-weight: 600;
  line-height: 1.1;
}

.deliverable-card__amount span { color: #f3f7fb; }
.deliverable-card__amount em { color: #1ea7e1; font-style: normal; transition: color 210ms ease; }
.deliverable-card:hover .deliverable-card__amount em,
.deliverable-card.is-featured .deliverable-card__amount em { color: #32c5ff; }

.deliverable-card h3 {
  margin: clamp(34px, 2.7vw, 40px) 0 0;
  color: #f4f7fa;
  font-size: clamp(23px, 1.7vw, 25px);
  font-weight: 600;
  line-height: 1.35;
}

.deliverable-card__description {
  margin: 20px 0 0;
  color: rgba(210, 224, 238, .72);
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.75;
}

.deliverable-card footer { margin-top: auto; }
.deliverable-card footer span { display: block; width: 40px; height: 2px; background: #1ea7e1; }
.deliverable-card footer p { margin: 12px 0 0; color: rgba(210, 224, 238, .76); font-size: 14px; font-weight: 500; }

.deliverables.is-motion-ready .deliverable-card { opacity: 0; }
.deliverables.is-motion-ready.is-entered .deliverable-card {
  opacity: 1;
  animation: deliverable-enter 400ms cubic-bezier(.22, 1, .36, 1) backwards;
}
.deliverables.is-motion-ready.is-entered .deliverable-card:nth-child(2) { animation-delay: 80ms; }
.deliverables.is-motion-ready.is-entered .deliverable-card:nth-child(3) { animation-delay: 160ms; }
.deliverables.is-motion-ready.is-entered .deliverable-card:nth-child(4) { animation-delay: 240ms; }

@keyframes deliverable-enter {
  from {
    opacity: 0;
    transform: translateY(calc(var(--card-offset-y) + 12px));
  }
  to {
    opacity: 1;
    transform: translateY(var(--card-offset-y));
  }
}

@media (max-width: 1099px) {
  .deliverables__inner { width: min(100% - 64px, 960px); }
  .deliverables__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-bottom: 32px; }
  .deliverable-card:nth-child(even) { --card-offset-y: 28px; }
}

@media (max-width: 679px) {
  .deliverables { padding: 72px 0; }
  .deliverables__inner { width: calc(100% - 40px); }
  .deliverables__grid { grid-template-columns: 1fr; gap: 16px; padding-bottom: 0; }
  .deliverable-card,
  .deliverable-card:nth-child(even),
  .deliverable-card.is-featured {
    --card-offset-y: 0px;
    --card-hover-y: 0px;
    height: auto;
    min-height: 260px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .deliverables.is-motion-ready .deliverable-card,
  .deliverables.is-motion-ready.is-entered .deliverable-card { opacity: 1; animation: none; transition: none; }
}