@font-face {
  font-family:gilroy-extrabold;
  src:url(/fonts/gilroy-extrabold-webfont.woff2) format("woff2"),url(/fonts/gilroy-extrabold-webfont.woff) format("woff");
  font-weight:400;
  font-style:normal
}
@font-face {
  font-family:gilroy-light;
  src:url(/fonts/gilroy-light-webfont.woff2) format("woff2"),url(/fonts/gilroy-light-webfont.woff) format("woff");
  font-weight:400;
  font-style:normal
}
body {
  font-family:Roboto,sans-serif;
  font-size:16px;
  line-height:1.6em;
  color:rgba(69,58,80,.92);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale
}
@media (min-width:46.25em) {
  body {
  font-size:18px
}

}
body,html {
  padding:0;
  margin:0
}
a {
  text-decoration:underline
}
.link {
  background:none;
  border:0;
  border-radius:0;
  padding:0;
  margin:0;
  font-family:Roboto,sans-serif;
  font-size:17px;
  font-weight:500;
  color:#453a50;
  letter-spacing:.3px;
  line-height:26px
}
.link--arrow,.link:hover {
  text-decoration:none
}
.link--arrow {
  position:relative;
  padding:8px 52px 8px 0
}
.link--arrow:after {
  content:"";
  background: #fff url("/assets/images/arrow-right.svg") no-repeat 52% 50%;
  position:absolute;
  border:2px solid #fff;
  display:block;
  right:40px;
  -webkit-transform:translate(100%,-50%);
  transform:translate(100%,-50%);
  top:50%;
  width:38px;
  height:38px;
  border-radius:20px;
  z-index:1;
  -webkit-transition:transform .6s ease;
  -webkit-transition:-webkit-transform .6s ease;
  transition:-webkit-transform .6s ease;
  transition:transform .6s ease;
  transition:transform .6s ease,-webkit-transform .6s ease
}
.link--arrow:hover:after {
  -webkit-transform:translate(120%,-50%);
  transform:translate(120%,-50%)
}
.link--inverted:after {
  border-color:#ffead0
}
h1,h2,h3,h4,h5,h6 {
  font-family:gilroy-extrabold,sans-serif;
  line-height:1;
  margin:0;
  font-weight:700;
  color:#453a50
}
h1 {
  letter-spacing:-1.4px
}
h1,h4 {
  color:#453a50
}
h4 {
  opacity:.56;
  font-size:15px;
  text-transform:uppercase;
  letter-spacing:.8px;
  margin-bottom:24px
}
.o-page__main {
  padding:0 16px
}
@media (min-width:46.25em) {
  .o-page__main {
  padding:0 5.26316%;
  max-width:1780px;
  margin:0 auto
}

}
.o-case {
  position:relative;
  margin-bottom:80px;
  overflow:hidden;
  display:block
}
@media (min-width:46.25em) and (max-width:81.24em) {
  .o-case {
  display:flex;
  flex-wrap:wrap;
  justify-content:center
}

}
.o-case__next {
  margin-top:60px;
  margin-bottom:32px;
  opacity:0
}
@media (min-width:46.25em) {
  .o-case__next {
  margin-top:60px
}

}
.o-case__link {
  color:#453a50;
  text-decoration:none;
  position:relative;
  display:block;
  margin-bottom:16px;
  overflow:hidden;
  -webkit-transition:transform .2s ease-out;
  -webkit-transition:-webkit-transform .2s ease-out;
  transition:-webkit-transform .2s ease-out;
  transition:transform .2s ease-out;
  transition:transform .2s ease-out,-webkit-transform .2s ease-out
}
@media (min-width:46.25em) and (max-width:81.24em) {
  .o-case__link {
  width:calc(50% - 20px);
  margin-bottom:40px
}
.o-case__link:nth-child(2n) {
  margin-left:40px
}

}
@media (min-width:81.25em) {
  .o-case__link {
  margin-bottom:192px;
  overflow:visible
}

}
.o-case__link__card {
  background:#fff1df;
  padding:8px 32px 32px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  align-items:flex-start;
  margin-top:-24px
}
@media (min-width:46.25em) and (max-width:81.24em) {
  .o-case__link__card {
  padding:40px
}

}
@media (min-width:81.25em) {
  .o-case__link__card {
  padding:120px;
  height:480px;
  margin-top:0
}

}
.o-case__link__card h3 {
  font-size:36px;
  color:#4f4956;
  letter-spacing:-.19px;
  line-height:44px;
  margin-bottom:20px
}
@media (min-width:81.25em) {
  .o-case__link__card h3 {
  font-size:88px;
  line-height:96px;
  margin-bottom:40px
}

}
.o-case__link__card ul {
  margin:0 0 20px;
  padding:0;
  list-style:none;
  color:rgba(69,58,80,.78)
}
.o-case__link__card ul:before {
  content:"";
  background:#ffd6a2;
  position:relative;
  display:block;
  width:32px;
  height:2px;
  border-radius:1px;
  margin-bottom:24px
}
@media (min-width:81.25em) {
  .o-case__link__card ul:before {
  margin-bottom:40px
}

}
.o-case__link__card ul li {
  margin:8px 0
}
.o-case__link__card .link {
  margin-left:auto
}
@media (min-width:81.25em) {
  .o-case__link__card .link {
  margin-left:0
}

}
.o-case__link__image {
  background:#fff1df;
  margin-top:-24px
}
@media (min-width:81.25em) {
  .o-case__link__image {
  background:none;
  display:block;
  width:940px;
  margin-top:0;
  position:absolute;
  top:0;
  right:20px
}

}
.o-case__link:hover .o-case__link__card .link--arrow:after {
  -webkit-transform:translate(120%,-50%);
  transform:translate(120%,-50%)
}
.c-case__client {
  font-size:11vw;
  line-height:.9;
  margin-bottom:28px;
  margin-top:32px
}
@media (min-width:46.25em) {
  .c-case__client {
  font-size:7vw;
  width:66.10169%;
  margin-left:15.25424%
}

}
.c-case__description {
  margin-top:24px
}
@media (min-width:46.25em) {
  .c-case__description {
  margin-left:15.25424%;
  margin-top:56px
}

}
@media (min-width:81.25em) {
  .c-case__description {
  width:40.67797%;
  margin-top:56px
}

}
.c-case__role ul {
  padding:0;
  list-style:none;
  margin:0 0 112px
}
@media (min-width:46.25em) {
  .c-case__role {
  width:40.67797%;
  margin-left:15.25424%
}

}
.c-case__role:before {
  content:"";
  background:#ffdbac;
  position:relative;
  display:block;
  width:32px;
  height:2px;
  border-radius:1px;
  margin-top:80px;
  margin-bottom:32px
}
@media (min-width:81.25em) {
  .c-case__role:before {
  margin-bottom:48px
}

}
.c-case__role li {
  padding:0 16px 8px 0
}
.c-case__imagelist {
  max-width:1520px;
  margin:0 auto
}
.c-case__imagelist .gatsby-image-wrapper {
  margin-bottom:20px
}
@media (min-width:46.25em) {
  .c-case__imagelist .gatsby-image-wrapper {
  margin-bottom:96px
}

}
.c-case__return {
  text-align:center;
  padding:0 0 80px;
  position:relative
}
@media (min-width:46.25em) {
  .c-case__return {
  padding:0 0 120px;
  margin-top:-48px
}

}
.c-case__return:before {
  content:"";
  background:#ffead0;
  position:relative;
  display:block;
  width:2px;
  height:96px;
  left:50%;
  top:-8px;
  -webkit-transform:translateX(-50%);
  transform:translateX(-50%);
  border-radius:1px
}
@media (min-width:81.25em) {
  .c-case__return:before {
  margin-bottom:40px
}

}
.c-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:32px 24px 8px
}
@media (min-width:46.25em) {
  .c-header {
  padding:32px
}

}
.c-header__logo img {
  width:152px
}
@media (min-width:46.25em) {
  .c-header__logo img {
  width:160px
}

}
.c-header__nav {
  margin-top:-16px
}
.c-header__nav__item {
  color:rgba(69,58,80,.8);
  margin-left:24px;
  font-weight:500;
  letter-spacing:.2px;
  position:relative
}
.c-header__nav__item--active,.c-header__nav__item:hover {
  color:#453a50
}
.c-header__nav__item--active:after {
  content:"";
  background:#f15d58;
  left:50%;
  -webkit-transform:translateX(-50%);
  transform:translateX(-50%);
  bottom:-16px;
  position:absolute;
  width:12px;
  height:2px;
  border-radius:2px;
  display:block
}
.c-footer {
  text-align:center;
  padding:16px 16px 80px
}
@media (min-width:46.25em) {
  .c-footer {
  padding:40px 0 112px
}

}
.c-footer__contact {
  display:flex;
  flex-direction:column
}
.c-footer__contact a {
  margin:8px auto;
  padding:0 16px
}
.c-intro {
  min-height:60vh;
  margin-top:32px;
  padding:0 8%
}
@media (min-width:46.25em) {
  .c-intro {
  min-height:80vh;
  padding:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  margin-top:-88px
}

}
.c-intro__title {
  font-size:9vw;
  line-height:1.04em;
  margin-bottom:24px
}
@media (min-width:46.25em) {
  .c-intro__title {
  font-size:6vw;
  line-height:1.08;
  width:74.57627%;
  margin-left:15.25424%
}

}
@media (min-width:61.25em) {
  .c-intro__title {
  font-size:4vw;
  line-height:1.08;
  width:74.57627%;
  margin-left:15.25424%
}

}
.c-intro__description {
  margin-bottom:48px
}
@media (min-width:46.25em) {
  .c-intro__description {
  width:66.10169%;
  margin-left:15.25424%
}

}
@media (min-width:61.25em) {
  .c-intro__description {
  width:49.15254%;
  margin-left:15.25424%
}

}
div[role=group][tabindex] {
  height:100%
}
.c-logo {
  width:200px;
  margin:20px
}
body,html {
  height:100%
}
body {
  margin:0
}
.temp {
  background:#f1585d;
  width:100vw;
  height:100vh;
  margin:0 auto;
  text-align:center;
  font-family:sans-serif;
  display:flex;
  justify-content:center;
  flex-direction:column;
  align-content:center
}
.temp .c-logo {
  max-width:380px
}
@media (max-width:400px) {
  .temp .c-logo {
  max-width:260px
}

}
.temp .c-logo {
  width:100%;
  margin:0 auto
}
.temp span {
  display:block;
  margin:18px auto 36px;
  width:30px;
  height:2px;
  background:#f87b7b;
  border-radius:1px
}
.temp p {
  color:#701010;
  max-width:300px;
  margin:0 auto 32px;
  line-height:23px
}
.temp a {
  text-decoration:none
}

/* Native image elements replace Gatsby image wrappers. */
.portfolio-image { display: block; width: 100%; height: auto; }
.c-case__imagelist .portfolio-image { margin-bottom: 20px; }
@media (min-width: 46.25em) { .c-case__imagelist .portfolio-image { margin-bottom: 96px; } }
.temp { width: 100%; min-height: 100svh; }
a:focus-visible { outline: 3px solid #453a50; outline-offset: 6px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }
@font-face { font-family: Roboto; font-style: normal; font-weight: 400; src: url("/assets/google-fonts/s/roboto/v20/KFOmCnqEu92Fr1Mu4mxK.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: Roboto; font-style: normal; font-weight: 500; src: url("/assets/google-fonts/s/roboto/v20/KFOlCnqEu92Fr1MmEU9fBBc4.woff2") format("woff2"); font-display: swap; }
.reveal { transition: opacity 800ms ease, transform 800ms ease; }
.reveal-pending { opacity: 0; transform: translateY(100px); }
@media (prefers-reduced-motion: reduce) { .reveal { transition: none; } }