:root {
  --ink: #262322;
  --cream: #f7f2ea;
  --paper: #fcfaf6;
  --pink: #c9788e;
  --pink-deep: #9b405c;
  --violet: #9688b8;
  --peach: #e8a576;
  --sage: #a9b9a1;
  --teal: #356a68;
  --teal-dark: #254e4d;
}

body,
.proof,
.footer {
  background: var(--paper);
}

.hero {
  background:
    radial-gradient(circle at 75% 42%, rgb(255 255 255 / 36%) 0 7%, transparent 7.5%),
    linear-gradient(120deg, #f7f2ea 0%, #e8d6cd 38%, #b8ceca 70%, #7ea7a2 100%);
}

.nav-cta,
.button-dark {
  background: var(--teal-dark);
}

.services {
  background: #233533;
}

.service-card.lilac {
  background: var(--peach);
}

.service-card.peach {
  background: #8fb4b0;
}

.service-card.sage {
  background: var(--sage);
}

.portrait-card {
  background: linear-gradient(145deg, var(--pink), #d8c5b3);
}

.portrait-ribbon {
  background: #f4d6a6;
}

.visit,
.booking-square {
  background: #e6efed;
}

.visit-card,
.square-booking-card {
  box-shadow: 14px 14px 0 var(--teal);
}

.review-card {
  background: #f0e8dc;
}

.closing {
  background: var(--teal);
  color: #fff;
}

.closing::before,
.closing::after {
  border-color: rgb(255 255 255 / 28%);
}

@media (max-width: 640px) {
  .visit-card,
  .square-booking-card {
    box-shadow: 8px 8px 0 var(--teal);
  }
}