/* Image-free visual system */
.hero-design {
  min-height: 650px;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 80% 18%, rgba(255, 250, 240, .64) 0 7%, transparent 7.3%),
    radial-gradient(circle at 82% 18%, transparent 0 11%, rgba(48, 75, 55, .16) 11.2% 11.8%, transparent 12%),
    linear-gradient(145deg, var(--sage) 0 38%, #c5cfbb 38% 61%, var(--paper) 61% 100%);
}

.hero-design::before {
  content: "";
  position: absolute;
  width: 430px;
  height: 430px;
  right: -120px;
  bottom: -150px;
  border: 2px solid rgba(48, 75, 55, .25);
  border-radius: 48% 52% 58% 42%;
  transform: rotate(18deg);
}

.hero-design::after {
  content: "";
  position: absolute;
  width: 260px;
  height: 160px;
  left: 5%;
  top: 10%;
  background: var(--lime);
  border-radius: 61% 39% 53% 47%;
  transform: rotate(-12deg);
  opacity: .82;
}

.drink-card {
  position: absolute;
  z-index: 2;
  width: clamp(190px, 19vw, 285px);
  aspect-ratio: .82;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 1px solid rgba(48, 75, 55, .22);
  border-radius: 20px;
  box-shadow: 0 24px 55px rgba(36, 53, 42, .13);
}

.drink-card svg {
  width: 66%;
  height: 61%;
  fill: none;
  stroke: var(--forest);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.drink-card span {
  font: 800 12px/1 var(--body);
  letter-spacing: .18em;
}

.card-shaker {
  left: 9%;
  top: 23%;
  background: rgba(255, 250, 240, .94);
  transform: rotate(-8deg);
}

.card-coupe {
  right: 10%;
  top: 12%;
  background: rgba(242, 220, 140, .96);
  transform: rotate(7deg);
}

.design-message {
  position: absolute;
  z-index: 3;
  right: 12%;
  bottom: 13%;
  color: var(--forest);
  font: 900 clamp(23px, 3vw, 42px)/.95 var(--display);
  letter-spacing: -.05em;
}

.design-message em {
  color: var(--cream);
  font-style: normal;
}

.design-ring {
  position: absolute;
  z-index: 1;
  border: 2px solid rgba(48, 75, 55, .34);
  border-radius: 50%;
}

.ring-one { width: 80px; height: 80px; left: 47%; top: 8%; }
.ring-two { width: 34px; height: 34px; left: 54%; top: 19%; }
.design-dots { position: absolute; left: 46%; bottom: 13%; color: var(--forest); font-size: 34px; letter-spacing: 10px; transform: rotate(90deg); }
.design-wave { position: absolute; width: 175px; height: 40px; left: 7%; bottom: 9%; border-top: 5px solid var(--forest); border-radius: 50%; transform: rotate(4deg); }

.services {
  grid-template-columns: minmax(0, 1fr) minmax(380px, .9fr);
  gap: clamp(45px, 7vw, 105px);
}

.checklist {
  grid-template-columns: 1fr;
  gap: 10px;
  max-width: 560px;
}

.checklist li {
  min-height: 32px;
  display: flex;
  align-items: center;
}

.service-design {
  min-height: 500px;
  padding: 45px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-content: center;
  position: relative;
  background: var(--sage);
  border-radius: 45% 55% 12% 12%;
  overflow: hidden;
}

.service-design::before {
  content: "";
  position: absolute;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: var(--lime);
  right: -95px;
  top: -85px;
}

.service-badge {
  min-height: 145px;
  padding: 22px 14px;
  border: 1px solid rgba(48, 75, 55, .18);
  border-radius: 12px;
  background: rgba(255, 250, 240, .9);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  color: var(--forest);
  font-size: 14px;
  font-weight: 800;
  position: relative;
  z-index: 1;
}

.service-badge svg {
  width: 55px;
  height: 55px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.service-design > p {
  grid-column: 1 / -1;
  margin: 18px 0 0;
  text-align: center;
  color: var(--forest);
  font: 800 19px/1.15 var(--display);
  letter-spacing: -.02em;
  text-transform: uppercase;
  position: relative;
  z-index: 1;
}

.service-design > p strong { color: var(--cream); }

@media (max-width: 900px) {
  .hero-design { min-height: 520px; }
  .services { grid-template-columns: 1fr; }
  .service-design { max-width: 650px; width: 100%; margin: 0 auto; }
}

@media (max-width: 560px) {
  .hero-design { min-height: 430px; }
  .drink-card { width: 160px; }
  .card-shaker { left: 4%; top: 23%; }
  .card-coupe { right: 4%; top: 10%; }
  .design-message { right: 7%; bottom: 8%; }
  .service-design { min-height: auto; padding: 55px 18px 30px; gap: 10px; border-radius: 38% 38% 10px 10px; }
  .service-badge { min-height: 122px; padding: 16px 8px; }
  .service-badge svg { width: 43px; height: 43px; }
}