body {
  --section-clip-path-height: 120px;

  --avenir-next: "Avenir Next", sans-serif;
  --min-padding-x-text: 10vw;
  --min-padding-x-graphics: 5.5vw;
  --margin-x: 46px;
  --color-orange: #ff9d0e;
  --color-purple: #6b63e6;
  --color-teal: #73fff5;
  --color-text: #545454;
  --color-blue-background: #f4fcff;
  --color-yellow-background: #fdf7ef;
  --color-purple-background: #f9f8ff;
  box-sizing: border-box;
}
  @media (max-width: 960px) {body {
    --section-clip-path-height: 68px
}
  }
  @media (max-width: 480px) {body {
    --section-clip-path-height: 32px
}
  }
  @media (max-width: 480px) {body {
    --margin-x: 32px
}
  }
  body *,
  body *::before,
  body *::after {
    box-sizing: border-box;
  }
  body h1 {
    white-space: pre-line;
  }
  body h5 {
    margin: 0;
  }
  body hr {
    margin: 0;
    border: none;
  }
  body ul,
  body ol {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  body a.button-link {
    z-index: 2;
    padding: 0 41px;
    border-radius: 30px;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));

    font-weight: 700;
    font-size: 18px;
    line-height: 2.5;

    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 19px;
    align-items: center;
  }
  body a.button-link:hover {
      transition: all 0.3s;
    }
  body a.button-link:hover img {
        filter: invert();
        transition: all 0.3s;
      }
  @media (max-width: 480px) {
  body a.button-link {
      padding: 0 31px;
      column-gap: 15px;
      margin-top: 8px
  }
    }

footer.footer div.container {
    padding: 0;
  }

section.Hero {
  z-index: 0;
  background: linear-gradient(130deg, #7c73ff 5%, #463ce0 60%);
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - var(--section-clip-path-height)),
    0 100%
  );

  padding: 98px var(--min-padding-x-text) 143px;
  display: grid;
  row-gap: 24px;
  justify-items: center;
  align-content: center;
  color: white;
}

@media (max-width: 960px) {

section.Hero {
    padding: 70px var(--min-padding-x-text) 110px;
    row-gap: 19px
}
  }

@media (max-width: 480px) {

section.Hero {
    padding: 46px var(--min-padding-x-text) 75px;
    row-gap: 14px
}
  }

section.Hero > img {
    z-index: 1;
    position: absolute;
    top: 2%;
    left: 50%;
    transform: translateX(-50%);
    mix-blend-mode: multiply;
    opacity: 0.85;
    object-fit: cover;
    width: 100%;
    max-width: 100%;
  }

section.Hero h1 {
    z-index: 2;
    font-family: var(--avenir-next);
    font-weight: 400;
    font-style: normal;
    text-align: center;
    font-size: 75px;
    line-height: 1.04;
  }

@media (max-width: 960px) {

section.Hero h1 {
      font-size: 56px;
      line-height: 1.08
  }
    }

@media (max-width: 480px) {

section.Hero h1 {
      font-size: 40px;
      line-height: 1.12
  }
    }

section.Hero p {
    z-index: 2;
    max-width: 559px;
    text-align: center;
    font-weight: 400;
    font-size: 31px;
    line-height: 1.4;
  }

@media (max-width: 960px) {

section.Hero p {
      max-width: 448px;
      font-size: 25px
  }
    }

@media (max-width: 480px) {

section.Hero p {
      font-size: 20px
  }
    }

section.Hero a {
    background-color: var(--color-teal);
    color: black;
  }

section.Hero a:hover {
      color: white;
      background-color: var(--color-orange);
    }

h1,
h2,
h3,
h4 {
  font-family: var(--avenir-next);
  font-weight: 500;
  text-align: center;
}

h1 {
  font-size: 48px;
  line-height: 1.15;
}

@media (max-width: 767px) {

h1 {
    font-size: 38px
}
  }

p {
  color: var(--color-text);
  max-width: 850px;
}

#careers section.Intro {
    padding: 42px var(--min-padding-x-graphics);
    display: grid;
    row-gap: 12px;
    justify-items: center;
    text-align: center;
  }

#careers section.Intro h1 {
      margin-bottom: 28px;
    }

#careers section.Intro p {
      font-size: 18px;
      line-height: 1.33;
    }

#careers section.Jobs {
    position: relative;
    z-index: 1;
    background-color: var(--color-blue-background);
    display: grid;
    row-gap: 32px;
    justify-items: center;
    padding: calc(var(--section-clip-path-height) + 48px)
      var(--min-padding-x-graphics);
    clip-path: polygon(
      0 var(--section-clip-path-height),
      100% 0,
      100% 100%,
      0 calc(100% - var(--section-clip-path-height))
    );
  }

#careers section.Jobs .position {
      display: grid;
      justify-items: center;
    }

#careers section.Jobs .position h2 {
        font-size: 35px;
        margin-bottom: 16px;
      }

#careers section.Jobs .position h3 {
        font-size: 30px;
        margin-bottom: 16px;
        color: #00ADEE;
      }

@media (max-width: 767px) {
        #careers section.Jobs .position h2 {
          font-size: 28px;
        }
        #careers section.Jobs .position h3 {
          font-size: 22px;
        }
      }

#careers section.Jobs .position p {
        text-align: center;
        font-size: 17px;
        line-height: 1.5;
      }

#careers section.Jobs .position .links {
        justify-self: stretch;
        margin: 24px 16px;
        display: grid;
        grid-auto-flow: column;
        column-gap: 20px;
        justify-content: space-around;
      }

@media (max-width: 767px) {

#careers section.Jobs .position .links {
          grid-auto-flow: unset;
          row-gap: 24px
      }
        }

#careers section.Jobs .position .links a {
          --purple: #7c73ff;
          color: var(--purple);
          background-color: transparent;
          border: 1px solid var(--purple);
          display: grid;
          grid-template-columns: 1fr auto;
          align-items: center;
          justify-items: center;
          column-gap: 4px;
          border-radius: 100px;
          padding: 6px 16px 6px 24px;
        }

@media (max-width: 767px) {

#careers section.Jobs .position .links a {
            padding: 5px 12px 5px 18px
        }
          }

#careers section.Jobs .position .links a span {
            font-family: var(--avenir-next);
            font-weight: 500;
            font-size: 16px;
            white-space: nowrap;
            text-align: center;
          }

@media (max-width: 479px) {

#careers section.Jobs .position .links a span {
              font-size: 14px
          }
            }

#careers section.Jobs .position .links a .right-arrow {
            width: 28px;
            height: 29px;
            background-color: var(--purple);
            clip-path: path(
              "M18.6783 12.833H5.83329C5.19163 12.833 4.66663 13.358 4.66663 13.9997C4.66663 14.6414 5.19163 15.1664 5.83329 15.1664H18.6783V17.2547C18.6783 17.7797 19.3083 18.0364 19.67 17.663L22.9133 14.408C23.135 14.1747 23.135 13.813 22.9133 13.5797L19.67 10.3247C19.3083 9.95135 18.6783 10.2197 18.6783 10.733V12.833V12.833Z"
            );
          }

#careers section.Jobs .position .links a:hover {
            background-color: var(--purple);
            color: white;
            transition: all 0.3s;
          }

#careers section.Jobs .position .links a:hover .right-arrow {
              transition: all 0.3s;
              background-color: white;
            }

#careers section.Features {
    background-color: var(--color-yellow-background);
    margin-top: calc(var(--section-clip-path-height) * -1);
    padding: calc(var(--section-clip-path-height) + 48px)
      var(--min-padding-x-graphics);
    display: grid;
    row-gap: 40px;
    justify-items: center;
    clip-path: polygon(
      0 0,
      100% 0,
      100% 100%,
      0 calc(100% - var(--section-clip-path-height))
    );
  }

#careers section.Features h1:nth-child(3) {
        margin-top: 20px;
      }

#careers section.Features .values,
    #careers section.Features .perks {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      column-gap: min(3vw, 40px);
      justify-content: center;
      justify-items: center;
      max-width: 900px;
    }

@media (max-width: 767px) {

#careers section.Features .values,
    #careers section.Features .perks {
        grid-template-columns: repeat(3, 1fr);
        row-gap: 20px
    }
      }

#careers section.Features .values .value,
      #careers section.Features .values .perk,
      #careers section.Features .perks .value,
      #careers section.Features .perks .perk {
        display: grid;
        justify-items: center;
        row-gap: 16px;
        align-items: start;
        align-content: start;
      }

@media (max-width: 767px) {
          #careers section.Features .values .value:nth-child(4),
          #careers section.Features .values .value:nth-child(5),
          #careers section.Features .values .perk:nth-child(4),
          #careers section.Features .values .perk:nth-child(5),
          #careers section.Features .perks .value:nth-child(4),
          #careers section.Features .perks .value:nth-child(5),
          #careers section.Features .perks .perk:nth-child(4),
          #careers section.Features .perks .perk:nth-child(5) {
            grid-row: 2;
            max-width: 25vw;
          }
          #careers section.Features .values .value:nth-child(4), #careers section.Features .values .perk:nth-child(4), #careers section.Features .perks .value:nth-child(4), #careers section.Features .perks .perk:nth-child(4) {
            grid-column: 1 / span 2;
          }
          #careers section.Features .values .value:nth-child(5), #careers section.Features .values .perk:nth-child(5), #careers section.Features .perks .value:nth-child(5), #careers section.Features .perks .perk:nth-child(5) {
            grid-column: 2 / span 2;
          }
        }

#careers section.Features .values .value img, #careers section.Features .values .perk img, #careers section.Features .perks .value img, #careers section.Features .perks .perk img {
          width: 145px;
          max-width: 100%;
          padding: 1vw;
        }

@media (max-width: 767px) {

#careers section.Features .values .value img, #careers section.Features .values .perk img, #careers section.Features .perks .value img, #careers section.Features .perks .perk img {
            max-width: 20vw
        }
          }

#careers section.Features .values .value h4, #careers section.Features .values .perk h4, #careers section.Features .perks .value h4, #careers section.Features .perks .perk h4 {
          color: var(--color-text);
          text-align: center;
          font-size: 15px;
          line-height: 1.4;
          white-space: pre-wrap;
        }

#careers section.Features .values .perk img, #careers section.Features .perks .perk img {
          width: 120px;
        }

#careers section.Features .values .perk .offset-right, #careers section.Features .perks .perk .offset-right {
          margin-left: 30px;
        }

@media (max-width: 767px) {
          #careers section.Features .values .perk:nth-child(4), #careers section.Features .perks .perk:nth-child(4) {
            transform: translateX(-1.5vw);
          }
        }

#careers section.Team {
    padding: 48px var(--min-padding-x-graphics) 150px;
    display: grid;
    justify-items: center;
    row-gap: 40px;
  }

#careers section.Team .photo-and-quotes {
      --row-overlap: 60px;

      max-width: 1000px;
      display: grid;
      grid-template-rows: auto var(--row-overlap) auto auto;
      column-gap: min(32px, 2vw);
    }

@media (max-width: 959px) {

#careers section.Team .photo-and-quotes {
        grid-template-columns: unset;
        grid-template-rows: unset
    }
      }

#careers section.Team .photo-and-quotes .image {
        width: 100%;
        height: 100%;
      }

#careers section.Team .photo-and-quotes .image img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }

#careers section.Team .photo-and-quotes .image img.one {
            object-position: 28% 50%;
          }

#careers section.Team .photo-and-quotes .image img.three {
            object-position: 50% 10%;
          }

#careers section.Team .photo-and-quotes .image.one {
          grid-row: 1 / span 2;
          grid-column: 1;
        }

#careers section.Team .photo-and-quotes .image.two {
          grid-row: 2 / span 2;
          grid-column: 2;
        }

#careers section.Team .photo-and-quotes .image.three {
          grid-row: 4;
          grid-column: 1;
          max-height: 420px;
        }

@media (max-width: 959px) {

#careers section.Team .photo-and-quotes .image {
          height: 100vw
      }

          #careers section.Team .photo-and-quotes .image.one,
          #careers section.Team .photo-and-quotes .image.two,
          #careers section.Team .photo-and-quotes .image.three {
            max-height: 650px;
            grid-column: unset;
            grid-row: unset;
          }
        }

#careers section.Team .photo-and-quotes figure {
        margin: 0;
        padding: 30px 0;
      }

#careers section.Team .photo-and-quotes figure:last-child {
          align-self: center;
        }

#careers section.Team .photo-and-quotes figure.padded {
          padding-left: 12px;
        }

@media (max-width: 959px) {

#careers section.Team .photo-and-quotes figure.padded {
            padding-left: unset
        }
          }

#careers section.Team .photo-and-quotes figure .quote {
          font-size: 18px;
          line-height: 1.5;
          position: relative;
          text-align: right;
          color: var(--color-text);
        }

#careers section.Team .photo-and-quotes figure .quote::before,
          #careers section.Team .photo-and-quotes figure .quote::after {
            content: "";
            background-image: url("/img/data-ops/end-quote.svg");
            background-size: contain;
            background-repeat: no-repeat;
            filter: grayscale() brightness(85%);
            width: 9px;
            height: 10px;
            margin-bottom: 6px;
            display: inline-block;
            margin-left: 4px;
          }

#careers section.Team .photo-and-quotes figure .quote::before {
            transform: translateX(-6px) rotate(180deg);
          }

#careers section.Team .photo-and-quotes figure .quote::after {
            position: absolute;
            right: 0;
            bottom: 0;
            transform: translate(130%, -4px);
          }

@media (min-width: 960px) {

#careers section.Team .photo-and-quotes figure .quote.left-align {
              text-align: left
          }

              #careers section.Team .photo-and-quotes figure .quote.left-align::before {
                margin: 0;
                position: absolute;
                left: 0;
                top: 0;
                transform: translateX(-15px) rotate(180deg);
              }

              #careers section.Team .photo-and-quotes figure .quote.left-align::after {
                position: unset;
                transform: unset;
              }
            }

#careers section.Team .photo-and-quotes figure .person {
          font-family: var(--avenir-next);
          text-align: right;
          margin-top: 16px;
          font-weight: 400;
          font-size: 16px;
        }

#careers section.Team .photo-and-quotes figure .person::before {
            content: "-";
            margin-right: 6px;
          }

@media (min-width: 960px) {

#careers section.Team .photo-and-quotes figure .person.left-align {
              text-align: left
          }
            }

#position {
  display: grid;
  justify-items: center;
}

#position .details {
    padding: 48px min(var(--min-padding-x-text), 90px);
    max-width: 1000px;
    display: grid;
    justify-content: center;
    row-gap: 20px;
  }

#position .details h3 {
      font-size: 30px;
      margin-bottom: 16px;
      color: #00ADEE;
    }

#position .details p {
      justify-self: stretch;
    }

#position .details .list {
      margin-top: 30px;
      display: grid;
      row-gap: 20px;
    }

@media (max-width: 479px) {

#position .details .list {
        margin-top: 20px
    }
      }

#position .details .list h2,
      #position .details .list li {
        text-align: left;
        color: var(--color-text);
        line-height: 1.5;
      }

#position .details .list ul {
        list-style: disc;
        display: grid;
        row-gap: 8px;
        padding-left: 24px;
      }

#position .details .ending-description {
      margin-top: 12px;
    }

#position .details .apply {
      margin-top: 30px;
    }

#position .details .apply a {
        color: #00adee;
        font-weight: 500;
      }