.service-slide-in {
  --slide-bg: #0a3f4f;
  --slide-accent: #2f8fa3;

  position: fixed;
  left: auto;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: transform 0.4s ease, opacity 0.4s ease;
}

.service-slide-in__body,
.service-slide-in__link {
    text-align: center;
}

/* Color variations based on site background #062f3c */
.service-slide-in--color-1 {
  --slide-bg: transparent;
  --slide-accent: transparent;
}

.service-slide-in--color-2 {
  --slide-bg: transparent;
  --slide-accent: transparent;
}

.service-slide-in--color-3 {
  --slide-bg: #041f28;
  --slide-accent: #1d7084;
}

.service-slide-in__inner {
  position: relative;
  z-index: 2;
  padding: 20px;
  color: #ffffff;
  background: var(--slide-bg);
}

.service-slide-in__body {
  margin-bottom: 12px;
}

.service-slide-in__link a {
  display: inline-block;
  padding: 10px 16px;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.75);
  color: #ffffff;
  background: transparent;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.service-slide-in__link a:hover,
.service-slide-in__link a:focus {
  background: rgba(255, 255, 255, 0.12);
  border-color: #ffffff;
  color: #ffffff;
}

/* Hidden state */
.service-slide-in--top {
  top: 0;
  transform: translateY(-100%);
}

.service-slide-in--bottom {
  bottom: 0;
  transform: translateY(100%);
}

.service-slide-in.is-visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/* Wave wrapper */
.service-slide-in__waves {
  position: relative;
  height: 90px;
  overflow: hidden;
  line-height: 0;
  z-index: 1;
}

/* Shared wave layer */
.service-slide-in__wave {
  position: absolute;
  left: 0;
  width: 100%;
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center bottom;
  mask-position: center bottom;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

/* Front wave */
.service-slide-in__wave--1 {
  bottom: 0;
  height: 52px;
  z-index: 2;
  opacity: 1;
  background-color: var(--slide-bg);
  -webkit-mask-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'>\
<path fill='black' d='M0,0 L0,60 C80,96 150,24 260,48 C350,68 410,100 500,74 C610,42 670,2 810,46 C930,84 980,108 1100,80 C1210,54 1280,16 1440,68 L1440,0 Z'/>\
</svg>");
  mask-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'>\
<path fill='black' d='M0,0 L0,60 C80,96 150,24 260,48 C350,68 410,100 500,74 C610,42 670,2 810,46 C930,84 980,108 1100,80 C1210,54 1280,16 1440,68 L1440,0 Z'/>\
</svg>");
}

/* Back wave */
.service-slide-in__wave--2 {
  bottom: 12px;
  height: 76px;
  z-index: 1;
  opacity: 0.72;
  background-color: var(--slide-accent);
  -webkit-mask-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 160' preserveAspectRatio='none'>\
<path fill='black' d='M0,0 L0,90 C120,54 220,132 360,106 C480,84 560,10 720,38 C840,60 920,136 1040,124 C1170,110 1260,54 1440,96 L1440,0 Z'/>\
</svg>");
  mask-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 160' preserveAspectRatio='none'>\
<path fill='black' d='M0,0 L0,90 C120,54 220,132 360,106 C480,84 560,10 720,38 C840,60 920,136 1040,124 C1170,110 1260,54 1440,96 L1440,0 Z'/>\
</svg>");
}

.service-slide-in__wave.service-slide-in__wave--1 {
    top: 0;
}
.service-slide-in__wave.service-slide-in__wave--2 {
    opacity: 1;
}