:root {
  --pine: #2d684f;
  --pine-deep: #0e3a2d;
  --spruce: #1b503d;
  --moss: #a8b89a;
  --sage-wash: #dfe6d6;
  --straw: #d7c59d;
  --berry: #9a4d3f;
  --cream: #f1e8d8;
  --paper: #fbf7ef;
  --ink: #18372c;
  --muted: #5d7066;
  --line: rgba(24, 55, 44, .18);
}

html,
body {
  background-color: var(--paper);
}

body {
  background-image:
    radial-gradient(circle at 10% 9%, rgba(215, 197, 157, .24), transparent 28rem),
    radial-gradient(circle at 88% 31%, rgba(168, 184, 154, .2), transparent 34rem);
}

.hero {
  background:
    linear-gradient(118deg, rgba(255, 255, 255, .5), transparent 48%),
    linear-gradient(145deg, #f7f1e6 0%, var(--cream) 58%, #e5ddc9 100%);
}

.hero::before {
  right: -12vw;
  bottom: -24vw;
  background: linear-gradient(145deg, rgba(168, 184, 154, .72), rgba(94, 125, 100, .35));
}

.hero__visual {
  border-color: rgba(14, 58, 45, .16);
  box-shadow:
    0 38px 80px rgba(14, 58, 45, .2),
    0 0 0 8px rgba(255, 250, 241, .42);
}

.button {
  background: var(--pine-deep);
  box-shadow: 0 10px 24px rgba(14, 58, 45, .16);
}

.button:hover,
.button:focus-visible {
  background: var(--berry);
}

.statement {
  position: relative;
}

.statement::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
}

.benefits {
  border-color: rgba(215, 197, 157, .28);
  background:
    radial-gradient(circle at 12% 0%, rgba(168, 184, 154, .17), transparent 36%),
    linear-gradient(135deg, #174b39, #0b3026 72%);
  box-shadow:
    0 28px 76px rgba(14, 58, 45, .22),
    inset 0 1px rgba(255, 255, 255, .14);
}

.benefit {
  border-color: rgba(255, 250, 241, .14);
}

.benefit__number {
  color: var(--straw);
}

.benefit p {
  color: rgba(255, 250, 241, .76);
}

.selection__image {
  background: var(--sage-wash);
  box-shadow: 0 28px 70px rgba(14, 58, 45, .13);
}

.selection__image figcaption {
  border-color: rgba(255, 250, 241, .3);
  background: rgba(11, 48, 38, .88);
  color: #fffaf1;
}

.gallery {
  position: relative;
}

.gallery::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 10% 0 2%;
  border-radius: 48%;
  background: radial-gradient(circle, rgba(168, 184, 154, .22), transparent 68%);
}

.gallery__image img {
  border: 1px solid rgba(24, 55, 44, .13);
  box-shadow: 0 28px 64px rgba(14, 58, 45, .13);
}

.service {
  background:
    radial-gradient(circle at 82% 18%, rgba(168, 184, 154, .16), transparent 28rem),
    linear-gradient(135deg, #0b3026 0%, #174b39 62%, #1d5742 100%);
  color: #fffaf1;
}

.service__copy > p:not(.eyebrow),
.service__note p:last-child {
  color: rgba(255, 250, 241, .76);
}

.service__locations span {
  border-color: rgba(215, 197, 157, .36);
  background: rgba(255, 250, 241, .06);
  color: #fffaf1;
}

.service__note {
  border-color: rgba(255, 250, 241, .48);
  background: linear-gradient(145deg, #e4d7bd, #cab890);
  box-shadow: 0 30px 70px rgba(5, 28, 21, .25);
  color: var(--pine-deep);
}

.service__note .eyebrow,
.service__note h3,
.service__note p:last-child {
  color: var(--pine-deep);
}

.service__note .eyebrow {
  opacity: .7;
}

.samuel {
  background:
    linear-gradient(125deg, rgba(255, 255, 255, .25), transparent 48%),
    var(--sage-wash);
}

.samuel__image {
  box-shadow: inset -1px 0 rgba(14, 58, 45, .12);
}

@media (min-width: 701px) and (max-width: 900px) {
  body footer {
    gap: 10px 12px;
    padding-inline: 18px;
    font-size: .64rem;
  }
}

footer {
  border-top: 1px solid rgba(215, 197, 157, .25);
  background: #0b3026;
  color: rgba(255, 250, 241, .7);
}

footer a {
  color: #fffaf1;
}

a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--straw);
  outline-offset: 4px;
}

@media (max-width: 700px) {
  .hero {
    background:
      linear-gradient(155deg, rgba(255, 255, 255, .48), transparent 46%),
      linear-gradient(145deg, #f7f1e6, var(--cream));
  }

  .hero__visual {
    box-shadow:
      0 24px 52px rgba(14, 58, 45, .18),
      0 0 0 5px rgba(255, 250, 241, .4);
  }

}