@import url("https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap");
@font-face {
  font-family: "Benton Sans";
  font-display: swap;
  src: url("../ttf/bentonsans_regular.ttf");
  font-weight: normal;
}
@font-face {
  font-family: "Benton Sans Medium";
  font-display: swap;
  src: url("../ttf/bentonsans_medium_regular.ttf");
  font-weight: 400;
}
@font-face {
  font-family: "Benton Sans Bold";
  font-display: swap;
  src: url("../ttf/bentonsans_bold.ttf");
  font-weight: 700;
}
h1 {
  font-family: "Benton Sans Medium", sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  color: #423E3B;
  font-size: 90px;
  line-height: 120%;
}
@media screen and (max-width: 820px) {
  h1 {
    font-size: 64px;
  }
}
@media screen and (max-width: 640px) {
  h1 {
    font-size: 40px;
  }
}

h2 {
  font-family: "Benton Sans Medium", sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  color: #423E3B;
  font-size: 40px;
}
@media screen and (max-width: 980px) {
  h2 {
    font-size: 30px;
  }
}
@media screen and (max-width: 640px) {
  h2 {
    font-size: 24px;
  }
}

h3 {
  font-family: "Benton Sans Medium", sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  color: #423E3B;
  font-size: 24px;
  line-height: 120%;
}
@media screen and (max-width: 640px) {
  h3 {
    font-size: 16px;
  }
}

h4 {
  font-family: "Benton Sans", sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  color: rgba(66, 62, 59, 0.6);
  font-size: 20px;
  line-height: 120%;
}
@media screen and (max-width: 820px) {
  h4 {
    font-size: 16px;
  }
}

p, li {
  font-family: "Benton Sans", sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  color: #423E3B;
  font-size: 18px;
  line-height: 120%;
}

a {
  text-decoration: none;
}
a.link {
  color: #423E3B;
  text-decoration: underline;
  text-underline-offset: 3px;
}
a.color:hover {
  color: #AF1F8E;
}
a.arrow {
  position: relative;
}
a.arrow p {
  display: inline;
}
a.arrow::after {
  content: url(../svg/arrow-outward-icon.svg);
  margin: -6px 0 0 12px;
  position: absolute;
  transition: transform 0.3s ease-in-out;
}
a.arrow:hover::after {
  transform: translate3d(15%, -15%, 0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -ms-transform: translate3d(15%, -15%, 0); /* IE 9 */
  -webkit-transform: translate3d(15%, -15%, 0); /* Chrome, Safari, Opera */
}

html {
  scroll-behavior: smooth;
}

footer {
  background-color: transparent;
  overflow: hidden;
}
footer .content-container {
  align-items: center;
  display: flex;
  justify-content: space-between;
  position: relative;
}
footer .content-container .logo {
  height: auto;
  margin: 75px 0;
  max-width: 260px;
  width: 100%;
  filter: saturate(0%) brightness(150%);
}
footer .content-container .footer-menu {
  display: flex;
  flex-direction: row;
  gap: 50px;
  margin: 90px 50px 75px;
}
footer .content-container .footer-menu a {
  font-family: "Benton Sans", sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  font-size: 16px;
  color: #423E3B;
  line-height: 120%;
}
footer .content-container .footer-menu a:hover {
  text-decoration: underline;
}
footer .content-container .star,
footer .content-container .star-mobile {
  bottom: -20px;
  max-width: 126px;
  position: absolute;
  right: -70px;
}
footer .content-container .star-mobile {
  display: none;
}
@media screen and (max-width: 940px) {
  footer .content-container {
    align-items: flex-start;
    flex-direction: column;
  }
  footer .content-container .logo {
    align-self: flex-start;
    margin-bottom: 0;
  }
  footer .content-container .footer-menu {
    margin: 50px 0 75px;
  }
}
@media screen and (max-width: 480px) {
  footer .content-container .footer-menu {
    gap: 40px;
    margin: 75px 0;
  }
  footer .content-container .footer-menu a {
    font-size: 12px;
  }
  footer .content-container .star {
    display: none;
  }
  footer .content-container .star-mobile {
    display: block;
    right: -65px;
  }
}

.case-study nav.case-study-nav {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin: 60px auto;
  gap: 40px;
}
.case-study nav.case-study-nav img {
  width: 24px;
}
.case-study nav.case-study-nav a {
  align-items: center;
  display: flex;
  flex-direction: row;
  gap: 20px;
  max-width: 360px;
}
@media screen and (max-width: 980px) {
  .case-study nav.case-study-nav h3 {
    font-size: 20px;
    max-width: 220px;
  }
}
@media screen and (max-width: 640px) {
  .case-study nav.case-study-nav {
    gap: 60px;
  }
  .case-study nav.case-study-nav h3 {
    font-size: 14px;
  }
}
@media screen and (max-width: 480px) {
  .case-study nav.case-study-nav {
    align-items: center;
    flex-direction: column;
    gap: 20px;
  }
  .case-study nav.case-study-nav h3 {
    font-size: 14px;
  }
}
.case-study section.contact {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: 100px;
}
@media screen and (max-width: 866px) {
  .case-study section.contact {
    flex-direction: column;
    margin-top: 0;
    margin-bottom: 0;
  }
}
.case-study section.contact .contact-info {
  padding: 80px 0 0;
  flex: 70%;
}
@media screen and (max-width: 480px) {
  .case-study section.contact .contact-info {
    padding: 75px 0 0;
  }
}
.case-study section.contact .contact-info .arrow-container {
  padding-right: 60px;
}
.case-study section.contact .contact-info .arrow-container h2 {
  font-size: 64px;
  margin: 20px 20px 0 0;
  position: relative;
  text-transform: capitalize;
}
.case-study section.contact .contact-info .arrow-container h2::after {
  content: url("../png/arrow-outward-large.png");
  position: absolute;
  margin: -12px -90px 0 20px;
}
@media screen and (max-width: 940px) {
  .case-study section.contact .contact-info {
    flex: 50%;
  }
}
@media screen and (max-width: 866px) {
  .case-study section.contact .contact-info {
    padding: 0;
  }
}
.case-study section.contact .bears {
  display: flex;
  flex: 30%;
  min-height: 300px;
}
.case-study section.contact .bears .left {
  align-self: flex-start;
  min-width: 165px;
}
.case-study section.contact .bears .right {
  align-self: flex-end;
  position: relative;
}
.case-study section.contact .bears .right .bear {
  min-width: 205px;
}
.case-study section.contact .bears .right .line {
  position: absolute;
  left: -60px;
  top: 130px;
}
.case-study section.contact .bears .right p {
  font-family: "Roboto Mono", monospace;
  font-size: 20px;
  font-weight: normal;
  line-height: 26px;
  position: absolute;
  left: -125px;
  top: 122px;
}
@media screen and (max-width: 400px) {
  .case-study section.contact .bears .right p {
    line-height: 21px;
  }
}
@media screen and (max-width: 866px) {
  .case-study section.contact .bears {
    justify-content: flex-end;
    margin-top: 30px;
  }
}
@media screen and (max-width: 390px) {
  .case-study section.contact .bears {
    margin-right: -20px;
  }
  .case-study section.contact .bears .left {
    margin-right: -20px;
  }
}

header nav {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin: 74px 0 100px;
}
header nav .logo {
  height: auto;
  max-width: 200px;
  width: 100%;
}
header nav .hamburger {
  display: none;
  cursor: pointer;
  user-select: none;
  font-size: 32px;
  width: 32px;
  text-align: center;
}
@media screen and (max-width: 1039px) {
  header nav .hamburger {
    display: block;
  }
}
header nav .menu {
  align-items: center;
  display: flex;
  gap: 50px;
}
header nav .menu a {
  font-family: "Benton Sans", sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  font-size: 20px;
  color: #423E3B;
}
header nav .menu .careers-link {
  background-color: #AF1F8E;
  color: white;
  padding: 20px 20px 16px;
}
@media screen and (max-width: 1039px) {
  header nav .menu {
    display: none;
  }
  header nav .menu.active {
    display: flex;
    position: absolute;
    top: 80px;
    right: 0;
    flex-direction: column;
    background: white;
    gap: 5px 0;
    align-items: stretch;
  }
  header nav .menu.active a {
    padding: 20px 20px 16px;
    flex: 1;
  }
}
@media screen and (max-width: 980px) {
  header nav {
    margin: 30px 0 75px;
  }
}
header .content-container h1 {
  margin-bottom: 0;
  text-transform: uppercase;
}

.case-study nav {
  margin: 74px 0;
}
@media screen and (max-width: 980px) {
  .case-study nav {
    margin: 30px 0 75px;
  }
}
.case-study header .content-container {
  align-items: flex-end;
  display: flex;
  flex-direction: row;
  margin: 70px auto;
}
.case-study header .content-container .left {
  flex: 70%;
}
.case-study header .content-container .left h1.header-title {
  font-size: 60px;
  margin-bottom: 30px;
  text-transform: none;
}
.case-study header .content-container .left h3.header-description {
  display: none;
}
.case-study header .content-container .left a.link::after {
  left: 125px;
}
.case-study header .content-container .right {
  text-align: right;
}
@media screen and (max-width: 1000px) {
  .case-study header .content-container {
    align-items: flex-start;
    flex-direction: column;
    margin: 40px auto;
  }
  .case-study header .content-container .left h1.header-title {
    font-size: 50px;
  }
  .case-study header .content-container .left h3.header-description {
    display: block;
  }
  .case-study header .content-container .right {
    text-align: left;
  }
  .case-study header .content-container .right h3.header-description {
    display: none;
  }
}
@media screen and (max-width: 640px) {
  .case-study header .content-container {
    margin: 30px auto;
  }
  .case-study header .content-container .left h1.header-title {
    font-size: 40px;
    margin: 0;
  }
  .case-study header .content-container .right h4.services {
    margin: 10px 0;
  }
}
.case-study header .banner-img {
  width: 100vw;
}
@media screen and (min-width: 1512px) {
  .case-study header .banner-img {
    display: block;
    margin: auto;
    max-width: 1512px;
    width: 100%;
  }
}
@media screen and (max-width: 640px) {
  .case-study header .banner-img {
    min-height: 220px;
    object-fit: cover;
  }
}

.centered {
  zoom: 1;
  margin: 0 auto;
  max-width: 960px;
  width: 90%;
}
.centered:before, .centered:after {
  content: "";
  display: table;
}
.centered:after {
  clear: both;
}

.centered-wide {
  margin: 0 auto;
  max-width: 1360px;
  width: 100%;
}
@media screen and (max-width: 1500px) {
  .centered-wide {
    width: 90%;
  }
  .centered-wide .centered {
    width: 100%;
  }
}

body,
html {
  text-rendering: optimizeLegibility;
  color: #423E3B;
  margin: 0;
}

body {
  overflow-x: hidden;
}

img,
video {
  max-width: 100%;
}

main,
header,
footer {
  width: 100%;
}

.bg-gradient {
  background: linear-gradient(180deg, rgba(236, 240, 227, 0) 0%, #E8EEDA 46.88%, rgba(236, 240, 227, 0) 100%);
}

section.portfolio .content-container,
section.expertise .content-container,
section.team .content-container,
section.clients .content-container,
#careers-introduction .content-container,
#postings .content-container,
section.posting .content-container {
  padding: 80px 0 0;
  position: relative;
}
@media screen and (max-width: 480px) {
  section.portfolio .content-container,
  section.expertise .content-container,
  section.team .content-container,
  section.clients .content-container,
  #careers-introduction .content-container,
  #postings .content-container,
  section.posting .content-container {
    padding: 75px 0 0;
  }
}
section.portfolio .content-container h4.section-title,
section.expertise .content-container h4.section-title,
section.team .content-container h4.section-title,
section.clients .content-container h4.section-title,
#careers-introduction .content-container h4.section-title,
#postings .content-container h4.section-title,
section.posting .content-container h4.section-title {
  padding: 0 20px;
}
section.portfolio .content-container .star,
section.portfolio .content-container .star-mobile,
section.expertise .content-container .star,
section.expertise .content-container .star-mobile,
section.team .content-container .star,
section.team .content-container .star-mobile,
section.clients .content-container .star,
section.clients .content-container .star-mobile,
#careers-introduction .content-container .star,
#careers-introduction .content-container .star-mobile,
#postings .content-container .star,
#postings .content-container .star-mobile,
section.posting .content-container .star,
section.posting .content-container .star-mobile {
  left: -70px;
  max-width: 126px;
  position: absolute;
  top: 0px;
}
section.portfolio .content-container .star-mobile,
section.expertise .content-container .star-mobile,
section.team .content-container .star-mobile,
section.clients .content-container .star-mobile,
#careers-introduction .content-container .star-mobile,
#postings .content-container .star-mobile,
section.posting .content-container .star-mobile {
  display: none;
}
@media screen and (max-width: 480px) {
  section.portfolio .content-container,
  section.expertise .content-container,
  section.team .content-container,
  section.clients .content-container,
  #careers-introduction .content-container,
  #postings .content-container,
  section.posting .content-container {
    padding: 80px 0 0;
  }
}
@media screen and (max-width: 480px) and (max-width: 480px) {
  section.portfolio .content-container,
  section.expertise .content-container,
  section.team .content-container,
  section.clients .content-container,
  #careers-introduction .content-container,
  #postings .content-container,
  section.posting .content-container {
    padding: 75px 0 0;
  }
}
@media screen and (max-width: 480px) {
  section.portfolio .content-container h4.section-title,
  section.expertise .content-container h4.section-title,
  section.team .content-container h4.section-title,
  section.clients .content-container h4.section-title,
  #careers-introduction .content-container h4.section-title,
  #postings .content-container h4.section-title,
  section.posting .content-container h4.section-title {
    padding: 0 35px;
  }
}
@media screen and (max-width: 480px) {
  section.portfolio .content-container .star,
  section.expertise .content-container .star,
  section.team .content-container .star,
  section.clients .content-container .star,
  #careers-introduction .content-container .star,
  #postings .content-container .star,
  section.posting .content-container .star {
    display: none;
  }
}
@media screen and (max-width: 480px) {
  section.portfolio .content-container .star-mobile,
  section.expertise .content-container .star-mobile,
  section.team .content-container .star-mobile,
  section.clients .content-container .star-mobile,
  #careers-introduction .content-container .star-mobile,
  #postings .content-container .star-mobile,
  section.posting .content-container .star-mobile {
    display: block;
    left: -65px;
  }
}

.case-study .description {
  display: flex;
  flex-direction: row;
  gap: 135px;
  margin-top: 60px;
  margin-bottom: 60px;
}
.case-study .description h2 {
  flex: 45%;
  line-height: 130%;
  margin: 0;
}
.case-study .description p {
  flex: 55%;
  line-height: 140%;
  margin: 0;
}
@media screen and (max-width: 980px) {
  .case-study .description {
    flex-direction: column;
    gap: 25px;
  }
}
.case-study section {
  margin-top: 60px;
  margin-bottom: 60px;
}
@media screen and (max-width: 640px) {
  .case-study section {
    margin-top: 40px;
    margin-bottom: 40px;
  }
}
.case-study .text-content {
  margin: auto;
  max-width: 876px;
  padding: 10px 0;
}
.case-study .text-content p {
  line-height: 140%;
}

section.clients .client-list {
  margin-top: 60px;
  margin-bottom: 60px;
  align-items: center;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 40px;
  justify-content: space-evenly;
}
@media screen and (max-width: 480px) {
  section.clients .client-list {
    margin-top: 40px;
    margin-bottom: 40px;
  }
}
section.clients .client-list .image-wrapper.small {
  max-width: 150px;
}
section.clients .client-list .image-wrapper.medium {
  max-width: 200px;
}
@media screen and (max-width: 540px) {
  section.clients .client-list {
    gap: 30px;
  }
  section.clients .client-list .image-wrapper {
    display: flex;
    flex: 40%;
  }
  section.clients .client-list .image-wrapper img {
    margin: 0 auto;
  }
}

section.contact {
  margin-top: 200px;
}
section.contact .content-container {
  align-items: flex-end;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
@media screen and (max-width: 750px) {
  section.contact .content-container {
    align-items: center;
    flex-direction: column;
  }
}
section.contact .content-container .contact-info h2 {
  font-size: 64px;
  margin: 20px 10px 0 0;
}
@media screen and (max-width: 480px) {
  section.contact .content-container {
    width: 100% !important;
  }
  section.contact .content-container .contact-info {
    margin: 0 auto;
    width: 90%;
  }
  section.contact .content-container .contact-info h2 {
    line-height: 130%;
    margin: 10px 10px 10px 0;
  }
}
section.contact .content-container .office {
  align-items: flex-start;
  display: flex;
  flex-direction: row;
  position: relative;
}
section.contact .content-container .office .description {
  display: flex;
  flex-direction: column;
  left: -250px;
  position: absolute;
}
@media screen and (max-width: 1100px) {
  section.contact .content-container .office .description {
    left: -200px;
    top: -50px;
  }
}
@media screen and (max-width: 900px) {
  section.contact .content-container .office .description {
    top: -100px;
  }
}
section.contact .content-container .office .description p {
  font-family: "Roboto Mono", monospace;
  font-size: 20px;
  font-weight: normal;
  line-height: 26px;
  min-width: 250px;
  font-size: 20px;
  transform: rotate(-18.27deg);
}
@media screen and (max-width: 400px) {
  section.contact .content-container .office .description p {
    line-height: 21px;
  }
}
section.contact .content-container .office .description img {
  align-self: center;
}
@media screen and (max-width: 750px) {
  section.contact .content-container .office {
    flex-direction: column-reverse;
  }
  section.contact .content-container .office .description {
    flex-direction: row;
    justify-content: flex-end;
    left: 0;
    margin-top: 20px;
    position: relative;
    top: 0;
    width: 80%;
  }
  section.contact .content-container .office .description p {
    margin: 90px 0 0;
    transform: rotate(0deg);
  }
  section.contact .content-container .office .description img {
    transform: matrix(-0.93, 0.37, 0.37, 0.93, 0, 0);
  }
}
@media screen and (max-width: 480px) {
  section.contact .content-container .office .description {
    justify-content: flex-start;
    width: 90%;
  }
  section.contact .content-container .office .description p {
    text-align: center;
  }
}

section.expertise {
  position: relative;
}
section.expertise #dummy-cursor {
  background: radial-gradient(73.69% 73.69% at 50% 50%, #D9EC00 0%, #FCFFDB 100%);
  border-radius: 50%;
  filter: blur(125px);
  height: 360px;
  position: absolute;
  top: 200px;
  transition: opacity 0.5s ease;
  width: 360px;
  z-index: -1;
}
@media screen and (max-width: 640px) {
  section.expertise #dummy-cursor {
    display: none;
  }
}
section.expertise #cursor {
  background: radial-gradient(73.69% 73.69% at 50% 50%, #D9EC00 0%, #FCFFDB 100%);
  border-radius: 50%;
  filter: blur(125px);
  height: 360px;
  position: fixed;
  transition: opacity 0.5s ease;
  width: 360px;
  z-index: -1;
}
@media screen and (max-width: 640px) {
  section.expertise #cursor {
    display: none;
  }
}
section.expertise h2.section-description {
  font-family: "Benton Sans Bold", sans-serif;
  font-weight: 700;
  -webkit-font-smoothing: antialiased;
  display: block;
  font-size: 64px;
  line-height: 65px;
  margin: 150px auto -50px;
  max-width: 900px;
}
@media screen and (max-width: 820px) {
  section.expertise h2.section-description {
    font-size: 48px;
    line-height: 130%;
    margin-top: 50px;
  }
}
@media screen and (max-width: 480px) {
  section.expertise h2.section-description {
    font-size: 32px;
  }
}
section.expertise .fun-fact {
  align-items: flex-end;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  margin-bottom: -50px;
}
section.expertise .fun-fact .description {
  margin-right: -50px;
  margin-bottom: 100px;
  max-width: 385px;
}
section.expertise .fun-fact .description p {
  font-family: "Roboto Mono", monospace;
  font-size: 20px;
  font-weight: normal;
  line-height: 26px;
}
@media screen and (max-width: 400px) {
  section.expertise .fun-fact .description p {
    line-height: 21px;
  }
}
section.expertise .fun-fact .description img {
  display: block;
  margin: 50px 20px 0 auto;
}
@media screen and (max-width: 820px) {
  section.expertise .fun-fact .bear {
    max-width: 60%;
  }
}
@media screen and (max-width: 640px) {
  section.expertise .fun-fact {
    margin: 50px auto -50px;
  }
}
@media screen and (max-width: 480px) {
  section.expertise .fun-fact {
    flex-direction: column;
  }
  section.expertise .fun-fact .description {
    margin: 0;
    max-width: 100%;
  }
  section.expertise .fun-fact .description img {
    margin: 50px 0 0 40px;
    transform: rotate(30deg);
    width: 90px;
  }
  section.expertise .fun-fact .bear {
    margin-top: -90px;
    max-width: 100%;
    width: 250px;
  }
}

@media screen and (max-width: 480px) {
  section.portfolio .content-container {
    width: 100% !important;
  }
  section.portfolio .content-container h4.section-title {
    padding: 0 50px;
  }
  section.portfolio .content-container .star-mobile {
    left: -45px;
  }
}
section.portfolio .selected-work {
  margin-top: 60px;
  margin-bottom: 60px;
}
@media screen and (max-width: 480px) {
  section.portfolio .selected-work {
    margin-top: 40px;
    margin-bottom: 40px;
  }
}
section.portfolio .selected-work .content {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 20px;
}
@media screen and (max-width: 820px) {
  section.portfolio .selected-work .content {
    flex-direction: column;
    gap: 0;
  }
}
@media screen and (max-width: 480px) {
  section.portfolio .selected-work .content {
    margin: 0 auto;
    width: 90%;
  }
}
section.portfolio .selected-work .content .left {
  flex: 50%;
}
section.portfolio .selected-work .content .left p.description {
  margin: 30px 0;
}
@media screen and (min-width: 821px) {
  section.portfolio .selected-work .content .left h3.subtitle {
    display: none;
  }
}
@media screen and (max-width: 820px) {
  section.portfolio .selected-work .content .left {
    flex: 1;
  }
  section.portfolio .selected-work .content .left h3.subtitle {
    font-size: 14px;
  }
  section.portfolio .selected-work .content .left h2.title {
    margin: 10px 0;
  }
  section.portfolio .selected-work .content .left p.description {
    display: none;
  }
  section.portfolio .selected-work .content .left a {
    display: none;
  }
}
section.portfolio .selected-work .content .right {
  flex: 30%;
  margin-top: 10px;
  text-align: right;
}
section.portfolio .selected-work .content .right a {
  display: none;
}
@media screen and (max-width: 820px) {
  section.portfolio .selected-work .content .right {
    flex: 1;
    margin-top: 0;
    text-align: left;
  }
  section.portfolio .selected-work .content .right h3.subtitle {
    display: none;
  }
  section.portfolio .selected-work .content .right h4.services {
    margin-top: 0;
  }
  section.portfolio .selected-work .content .right a {
    display: block;
    margin-top: 40px;
  }
}

section.team .careers-link {
  display: flex;
  justify-content: center;
}
section.team .careers-link a p {
  font-family: "Benton Sans Medium", sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  font-size: 24px;
  line-height: 24px;
}
section.team .team-list {
  margin-top: 60px;
  margin-bottom: 60px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
@media screen and (max-width: 480px) {
  section.team .team-list {
    margin-top: 40px;
    margin-bottom: 40px;
  }
}
section.team .team-list .team-member {
  flex-basis: 23%;
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
}
section.team .team-list .team-member .name {
  font-size: 36px;
  margin: 20px 0;
}
section.team .team-list .team-member .title {
  font-size: 18px;
  margin: 0 0 50px;
}
section.team .team-list .team-member .image {
  cursor: pointer;
  height: 345px;
  width: 100%;
  max-width: 266px;
  position: relative;
  transition: transform 1s;
  -webkit-transition: -webkit-transform 1s;
  -moz-transition: -moz-transform 1s;
  -o-transition: -o-transform 1s;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
}
section.team .team-list .team-member .image .front,
section.team .team-list .team-member .image .back {
  height: 100%;
  display: block;
  position: absolute;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
}
section.team .team-list .team-member .image .front img,
section.team .team-list .team-member .image .back img {
  height: 100%;
  object-fit: cover;
}
section.team .team-list .team-member .image .front {
  opacity: 1;
  -webkit-transition: opacity 0.3s ease;
  -moz-transition: opacity 0.3s ease;
  -o-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}
section.team .team-list .team-member .image .back {
  transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  opacity: 0.7;
  -webkit-transition: opacity 0.3s ease;
  -moz-transition: opacity 0.3s ease;
  -o-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}
section.team .team-list .team-member.flip .image {
  transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
}
section.team .team-list .team-member.flip .image .front {
  opacity: 0.7;
}
section.team .team-list .team-member.flip .image .back {
  opacity: 1;
}
@media screen and (max-width: 1250px) {
  section.team .team-list .team-member {
    flex-basis: 30%;
  }
  section.team .team-list .team-member .name {
    font-size: 30px;
  }
}
@media screen and (max-width: 1220px) {
  section.team .team-list .team-member .name {
    font-size: 20px;
  }
  section.team .team-list .team-member .title {
    font-size: 16px;
  }
}
@media screen and (max-width: 960px) {
  section.team .team-list .team-member .image {
    max-width: initial;
    height: auto;
    padding-bottom: 130%;
  }
  section.team .team-list .team-member img {
    min-width: 158px;
  }
}
@media screen and (max-width: 620px) {
  section.team .team-list .team-member {
    flex-basis: 48%;
  }
  section.team .team-list .team-member img {
    min-width: 158px;
  }
}

@media screen and (max-width: 640px) {
  .case-study.hugr section.final-look,
  .case-study.hugr section.download {
    width: 100%;
  }
}
.case-study.hugr section.description {
  flex-direction: column;
  gap: 25px;
  margin-top: 60px;
}
.case-study.hugr section.description p {
  line-height: 140%;
}
.case-study.hugr section.user .content-wrapper {
  align-items: center;
  background-color: #F5E6CB;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  padding: 30px 50px;
}
.case-study.hugr section.user .content-wrapper h2 {
  line-height: 130%;
  max-width: 680px;
  padding-left: 20px;
}
@media screen and (max-width: 980px) {
  .case-study.hugr section.user {
    width: 100%;
  }
  .case-study.hugr section.user .content-wrapper {
    padding: 30px 20px;
  }
  .case-study.hugr section.user .content-wrapper img {
    width: 40%;
  }
}
.case-study.hugr section.final-look img:not(:first-child) {
  margin-top: 45px;
}
.case-study.hugr section.download .buttons {
  margin-top: 60px;
  margin-bottom: 60px;
  display: flex;
  gap: 56px;
  justify-content: center;
}

@media screen and (max-width: 640px) {
  .case-study.pmp section.image,
  .case-study.pmp section.video {
    width: 100%;
  }
}
.case-study.pmp section.user .content-wrapper {
  align-items: center;
  border: 3px solid #423E3B;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  padding: 50px;
}
.case-study.pmp section.user .content-wrapper .content-text {
  max-width: 680px;
  padding-left: 50px;
}
.case-study.pmp section.user .content-wrapper .content-text h2 {
  line-height: 120%;
}
.case-study.pmp section.user .content-wrapper .content-text p {
  line-height: 140%;
}
@media screen and (max-width: 980px) {
  .case-study.pmp section.user .content-wrapper img {
    width: 40%;
  }
}
@media screen and (max-width: 800px) {
  .case-study.pmp section.user .content-wrapper {
    flex-direction: column;
    padding: 30px;
  }
  .case-study.pmp section.user .content-wrapper img {
    max-width: 240px;
    width: 100%;
  }
  .case-study.pmp section.user .content-wrapper .content-text {
    padding-left: 0;
  }
}
.case-study.pmp section.image img {
  width: 100%;
}

@media screen and (max-width: 640px) {
  .case-study.swrc section.wireframe,
  .case-study.swrc section.final-look,
  .case-study.swrc section.sample-assets {
    width: 100%;
  }
}
.case-study.swrc section.description {
  display: none;
}
@media screen and (max-width: 980px) {
  .case-study.swrc section.description {
    display: flex;
    flex-direction: column;
    gap: 25px;
    margin-top: 60px;
  }
}
.case-study.swrc section.user {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  background: linear-gradient(180deg, transparent 52%, #EDEEEA 0 52%);
}
.case-study.swrc section.user img {
  align-self: flex-end;
}
.case-study.swrc section.user .content-text {
  align-self: flex-end;
  display: flex;
  flex-direction: column;
  max-width: 660px;
  padding: 0 20px;
}
.case-study.swrc section.user .content-text p {
  line-height: 140%;
  margin-bottom: 100px;
}
.case-study.swrc section.user .content-text h2 {
  line-height: 130%;
  margin-bottom: 50px;
}
@media screen and (max-width: 980px) {
  .case-study.swrc section.user {
    background: linear-gradient(180deg, transparent 35%, #EDEEEA 0 35%);
    margin-top: 0;
    width: 100%;
  }
  .case-study.swrc section.user .content-text {
    padding: 0 50px;
  }
  .case-study.swrc section.user .content-text p {
    display: none;
  }
}
@media screen and (max-width: 780px) {
  .case-study.swrc section.user {
    background: #EDEEEA;
    margin-top: 60px;
  }
  .case-study.swrc section.user img {
    max-width: 40%;
  }
  .case-study.swrc section.user .content-text {
    align-self: center;
    padding: 0 20px;
  }
  .case-study.swrc section.user .content-text h2 {
    margin-bottom: 0;
  }
}
@media screen and (max-width: 480px) {
  .case-study.swrc section.user .content-text h2 {
    font-size: 16px;
  }
}
.case-study.swrc section.wireframe img {
  width: 100%;
}
.case-study.swrc section.final-look img {
  width: 100%;
}
.case-study.swrc section.final-look div.screens {
  background-image: url("../png/swrc-section-bg.png");
  background-size: cover;
  display: flex;
  justify-content: space-evenly;
  margin-top: 60px;
}
.case-study.swrc section.final-look div.screens img {
  width: 40%;
}
.case-study.swrc section.final-look div.screens .left {
  align-self: flex-end;
  margin-top: 100px;
}
.case-study.swrc section.final-look div.screens .right {
  align-self: flex-start;
}
@media screen and (max-width: 640px) {
  .case-study.swrc section.final-look h4 {
    margin: 20px auto;
    width: 90%;
  }
}
.case-study.swrc section.sample-assets img:nth-child(2) {
  margin-top: 60px;
}
@media screen and (max-width: 640px) {
  .case-study.swrc section.sample-assets h4 {
    margin: 20px auto;
    width: 90%;
  }
}

@media screen and (max-width: 640px) {
  .case-study.wsps section.user,
  .case-study.wsps section.wireframe,
  .case-study.wsps section.sample-assets,
  .case-study.wsps section.final-look {
    width: 100%;
  }
}
.case-study.wsps section.description {
  margin-top: 60px;
}
.case-study.wsps section.user {
  align-items: flex-end;
  display: flex;
  flex-direction: row;
}
.case-study.wsps section.user div.text-bg {
  background-color: #003E69;
  padding: 50px;
}
.case-study.wsps section.user div.text-bg h2 {
  color: white;
  line-height: 120%;
}
@media screen and (max-width: 1160px) {
  .case-study.wsps section.user img {
    max-width: 50%;
  }
  .case-study.wsps section.user div.text-bg {
    padding: 20px;
  }
}
@media screen and (max-width: 770px) {
  .case-study.wsps section.user {
    flex-direction: column-reverse;
  }
  .case-study.wsps section.user div.text-bg {
    background-color: transparent;
    margin: auto;
    padding: 0;
  }
  .case-study.wsps section.user div.text-bg h2 {
    color: #423E3B;
  }
  .case-study.wsps section.user img {
    max-width: 100%;
    width: 100vw;
  }
}
@media screen and (max-width: 640px) {
  .case-study.wsps section.user div.text-bg h2 {
    margin: 20px auto;
    width: 90%;
  }
}
@media screen and (max-width: 640px) {
  .case-study.wsps section.wireframe img {
    min-height: 440px;
    object-fit: cover;
  }
  .case-study.wsps section.wireframe h4 {
    margin: 20px auto;
    width: 90%;
  }
}
.case-study.wsps section.sample-assets .content-wrapper img {
  margin-top: 20px;
}
@media screen and (max-width: 640px) {
  .case-study.wsps section.sample-assets h4 {
    margin: 20px auto;
    width: 90%;
  }
}
.case-study.wsps section.final-look img {
  width: 100%;
}
.case-study.wsps section.final-look div.screens {
  margin-top: 60px;
  margin-bottom: 60px;
  align-items: center;
  background-color: #EAEAEA;
  background-image: url("../png/wsps-section-bg.png");
  background-size: cover;
  display: flex;
  justify-content: space-evenly;
  padding: 100px 0;
}
.case-study.wsps section.final-look div.screens img:nth-child(1) {
  width: 70%;
}
.case-study.wsps section.final-look div.screens img:nth-child(2) {
  width: 20%;
}
@media screen and (max-width: 640px) {
  .case-study.wsps section.final-look div.screens {
    margin: 30px 0 10px;
    padding: 30px 0;
  }
}
.case-study.wsps section.quote {
  display: none;
}
.case-study.wsps section.quote p {
  font-family: "Roboto Mono", monospace;
  font-size: 24px;
  font-style: italic;
  line-height: 32px;
  text-transform: capitalize;
  color: rgba(66, 62, 59, 0.6);
  margin-top: 0;
}
@media screen and (max-width: 480px) {
  .case-study.wsps section.quote p {
    font-size: 18px;
  }
}
.case-study.wsps section.quote .source {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 16px;
}
@media screen and (max-width: 480px) {
  .case-study.wsps section.quote .source {
    align-items: center;
    flex-direction: column;
    gap: 0;
  }
  .case-study.wsps section.quote .source .name {
    font-size: 20px;
  }
  .case-study.wsps section.quote .source .position {
    margin: 0;
  }
}

.careers .introduction .content {
  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 5%;
}
.careers .introduction .content .text {
  flex-basis: 32%;
}
.careers .introduction .content .text p,
.careers .introduction .content .text li {
  font-size: 18px;
  line-height: 150%;
}
.careers .introduction .content .image-container {
  flex-basis: 60%;
}
.careers .introduction .content .image-container img.office {
  object-fit: cover;
}
@media screen and (max-width: 900px) {
  .careers .introduction .content {
    flex-direction: column-reverse;
  }
}
.careers .postings .content {
  align-items: flex-start;
  display: flex;
  flex-direction: row;
  justify-content: left;
}
.careers .postings .content .bear {
  margin-top: -10%;
  margin-bottom: -12%;
}
@media screen and (max-width: 900px) {
  .careers .postings .content {
    flex-direction: column;
  }
  .careers .postings .content .image-container {
    margin: -40px 0;
  }
}
.careers .postings .content .text .posting {
  margin: 38px 0;
}
.careers .postings .content .text .posting p {
  margin: 0;
  padding-right: 32px;
}
.careers .postings .content .text .posting .job-link {
  font-family: "Benton Sans Medium", sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  color: #423E3B;
  font-size: 40px;
  line-height: 40px;
  position: relative;
  text-decoration-line: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 1px;
}
@media screen and (max-width: 500px) {
  .careers .postings .content .text .posting .job-link {
    font-size: 24px;
  }
}
.careers .postings .content .text .posting .job-link::after {
  content: url(../svg/careers-arrow-outward.svg);
  display: inline-flex;
  align-items: center;
  margin: 0 -32px 0 10px;
  width: 32px;
  position: absolute;
  transition: transform 0.3s ease-in-out;
}
.careers .postings .content .text .posting .job-link:hover::after {
  transform: translate3d(15%, -15%, 0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -ms-transform: translate3d(15%, -15%, 0); /* IE 9 */
  -webkit-transform: translate3d(15%, -15%, 0); /* Chrome, Safari, Opera */
}
.careers .postings .content .text .posting .job-description {
  line-height: 1.3;
  margin-top: 5px;
}

.career section.posting .content {
  max-width: 960px;
  padding: 0 20px;
}
.career section.posting .content p,
.career section.posting .content li {
  font-size: 18px;
  line-height: 150%;
}