.delivery-story {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 7vw, 7rem);
  align-items: end;
  padding: clamp(5rem, 10vw, 10rem) 7vw;
  background: var(--cream);
  color: var(--ink);
}

.delivery-intro h2 {
  margin: .8rem 0 1.25rem;
  font: clamp(3.4rem, 6.4vw, 7rem)/.84 var(--display);
  letter-spacing: -.06em;
}

.delivery-intro > p:last-child { max-width: 29rem; line-height: 1.55; }

.delivery-media {
  position: relative;
  grid-column: 1;
  overflow: hidden;
  border: 1px solid oklch(16% .025 55 / .26);
  box-shadow: .8rem .8rem 0 var(--red);
  background: var(--ink);
}

.delivery-media video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

.delivery-media::after {
  content: '';
  position: absolute;
  inset: 35% 0 0;
  background: linear-gradient(0deg, oklch(16% .025 55 / .82), transparent);
  pointer-events: none;
}

.delivery-media span {
  position: absolute;
  z-index: 1;
  right: 1rem;
  bottom: 1rem;
  color: var(--cream);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.delivery-beats {
  display: grid;
  gap: .75rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: delivery;
}

.delivery-beats li {
  display: grid;
  grid-template-columns: 3.25rem 1fr 1.15fr;
  gap: 1rem;
  align-items: baseline;
  padding: 1.25rem 0;
  border-top: 1px solid oklch(16% .025 55 / .25);
  transition: transform .35s var(--ease), color .35s var(--ease);
}

.delivery-beats li:last-child { border-bottom: 1px solid oklch(16% .025 55 / .25); }
.delivery-beats li:hover { color: var(--red); transform: translateX(.45rem); }
.delivery-beats span { font-size: .72rem; font-weight: 800; letter-spacing: .12em; }
.delivery-beats h3 { margin: 0; font: clamp(1.55rem, 2.5vw, 2.35rem)/.9 var(--display); }
.delivery-beats p { margin: 0; font-size: .92rem; line-height: 1.4; }
.delivery-story > .pill { grid-column: 2; justify-self: start; margin-top: .2rem; }

.dark .delivery-story { background: oklch(21% .028 45); }
.dark .delivery-beats li { border-color: oklch(96% .018 85 / .25); }

@media (max-width: 760px) {
  .delivery-story { grid-template-columns: 1fr; padding: 5rem 6vw; }
  .delivery-beats li { grid-template-columns: 2.2rem 1fr; gap: .6rem; }
  .delivery-beats p { grid-column: 2; }
  .delivery-story > .pill { grid-column: 1; }
  .delivery-media { grid-column: 1; }
}