@font-face {
  font-family: Duplicatesans;
  src: url('../fonts/DuplicateSans-Bold.woff2') format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Duplicatesans;
  src: url('../fonts/DuplicateSans-Heavy.woff2') format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Duplicatesans;
  src: url('../fonts/DuplicateSans-LightItalic.woff2') format("woff2");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: Duplicatesans;
  src: url('../fonts/DuplicateSans-MediumItalic.woff2') format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: Duplicatesans;
  src: url('../fonts/DuplicateSans-ThinItalic.woff2') format("woff2");
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: Duplicatesans;
  src: url('../fonts/DuplicateSans.woff2') format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Duplicatesans;
  src: url('../fonts/DuplicateSans-BoldItalic.woff2') format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: Duplicatesans;
  src: url('../fonts/DuplicateSans-Medium.woff2') format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Duplicatesans;
  src: url('../fonts/DuplicateSans-Thin.woff2') format("woff2");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Duplicatesans;
  src: url('../fonts/DuplicateSans-HeavyItalic.woff2') format("woff2");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: Duplicatesans;
  src: url('../fonts/DuplicateSans-Light.woff2') format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

:root {
  --midnight-blue: #100f3a;
  --white: white;
  --light-steel-blue: #b7b6ff;
  --dark-sea-green: #95ca98;
  --medium-slate-blue: #6e70ce;
  --red: #ec3c07;
}

body {
  background-color: var(--midnight-blue);
  color: var(--white);
  background-image: url('../images/opt/hero-bg-640.webp');
  background-position: 50% 0;
  background-repeat: no-repeat;
  background-size: cover;
  font-family: Duplicatesans, sans-serif;
  font-size: 1vw;
  line-height: 1.3;
}

a {
  text-decoration: underline;
}

.section.footer {
  background-color: var(--light-steel-blue);
  color: var(--midnight-blue);
}

.home-hero {
  justify-content: space-between;
  width: 100%;
  padding-top: 5.73em;
  display: flex;
  position: relative;
}

.container {
  width: 100%;
  max-width: 90.83em;
  margin-left: auto;
  margin-right: auto;
}

.container.wide {
  max-width: none;
}

.home-hero-left {
  width: 59.74em;
}

.heading {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 5.99em;
  font-weight: 300;
  line-height: 1;
}

.home-hero-intro {
  font-size: .95vw;
  display: inline-block;
}

.text-break {
  margin-right: .5em;
  display: inline-block;
}

.text-break._5-years {
  border: .05em solid var(--white);
  border-radius: 100em;
  padding: .5em 2em;
}

.text-break.intro-star {
  position: relative;
  top: -20px;
}

.intro-star {
  width: 3.65em;
  height: 3.65em;
}

.experienced-underline {
  background-image: url('../images/svgexport-2.svg');
  background-position: 50% 100%;
  background-repeat: no-repeat;
  background-size: contain;
  padding-bottom: 20px;
  display: inline-block;
}

.circled-webflow {
  background-image: url('../images/svgexport-9.svg');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: contain;
}

.home-hero-paragraph-wrap {
  text-transform: uppercase;
  width: 25.52em;
}

.paragraph {
  margin-bottom: 0;
  font-size: 1.67em;
  font-weight: 300;
}

.paragraph.hide {
  display: none;
}

.hero-paragraph {
  margin-top: 7.19em;
}

.home-hero-right {
  position: relative;
  top: 7.29em;
}

.hero-image {
  z-index: 1;
  width: 31.87em;
  height: 28.44em;
  position: relative;
}

.image {
  width: 100%;
}

.orb {
  width: 13.28em;
  position: absolute;
  inset: 0% 0% auto auto;
}

.star {
  width: 14.95em;
  position: absolute;
  inset: auto auto 16% -17%;
}

.navbar {
  background-color: #ddd0;
  margin-top: 3.59em;
}

.brand {
  width: 5.89em;
}

.nav-link {
  width: 8.28em;
  color: var(--white);
  text-align: center;
  font-size: .94em;
}

.nav-link:hover {
  background-image: url('../images/svgexport-3-1.svg');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: contain;
}

.nav-link.w--current {
  color: var(--white);
}

.nav-inner {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.intro-snippet {
  text-transform: uppercase;
  margin-bottom: 1.67em;
  font-size: 1.67em;
  font-weight: 300;
}

.home-about {
  margin-top: 10.57em;
}

.home-about.hide {
  display: none;
}

.home-about-content {
  width: 50.26em;
  padding-top: 4em;
}

.footer-top-curve {
  background-color: var(--midnight-blue);
  border-bottom-right-radius: 4.17em;
  border-bottom-left-radius: 4.17em;
  width: 100%;
  height: 4.27em;
}

.footer {
  position: relative;
}

.footer-content {
  z-index: 1;
  padding-bottom: 2.92em;
  position: relative;
}

.footer-mascot {
  z-index: 1;
  justify-content: center;
  align-items: center;
  margin-top: 3.23em;
  display: flex;
}

.footer-links {
  justify-content: space-between;
  align-items: center;
  margin-top: 6.3em;
  display: flex;
}

.footer-cta {
  justify-content: center;
  align-items: center;
  display: flex;
}

.footer-cta-text {
  font-size: 12.29em;
  font-weight: 500;
  line-height: 1;
}

.mascot-face {
  background-image: linear-gradient(to bottom, var(--dark-sea-green), var(--medium-slate-blue));
  border-radius: 100em;
  flex-direction: column;
  justify-content: flex-end;
  width: 12.55em;
  height: 12.55em;
  padding-bottom: 1.93em;
  display: flex;
  position: relative;
}

.mascot-eyes {
  z-index: 1;
  justify-content: space-between;
  width: 7.97em;
  margin-top: 2.24em;
  margin-left: auto;
  margin-right: auto;
  transition: all .2s cubic-bezier(.165, .84, .44, 1);
  display: flex;
  position: static;
}

.mascot-eyes.hover {
  margin-top: -2.4em;
  transition: all .2s cubic-bezier(.165, .84, .44, 1);
  top: -.6em;
}

.mascot-eye {
  width: 3.39em;
  height: 5.37em;
}

.mascot-eyeball {
  background-color: var(--white);
  border-radius: 100em;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 4.43em;
  display: flex;
  overflow: hidden;
  box-shadow: 7px 4px 16px #0003;
}

.mascot-retina {
  background-color: var(--midnight-blue);
  border-radius: 100em;
  width: 1.82em;
  height: 1.82em;
  transition: all .2s cubic-bezier(.165, .84, .44, 1);
  overflow: hidden;
}

.mascot-retina.hover {
  background-color: var(--red);
  background-image: url('../images/love.svg');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: 10px;
  transition: all .2s cubic-bezier(.165, .84, .44, 1);
}

.mascot-mouth {
  z-index: 1;
  background-color: var(--midnight-blue);
  border-radius: 10em;
  width: 2.29em;
  height: .47em;
  margin-top: 2.5em;
  margin-left: auto;
  margin-right: auto;
  transition: all .2s cubic-bezier(.165, .84, .44, 1);
  position: static;
}

.mascot-mouth.hover {
  height: 2.97em;
  transition: all .2s cubic-bezier(.165, .84, .44, 1);
}

.light-shadow {
  opacity: .55;
  width: 8em;
  position: absolute;
  inset: -1% auto auto -7%;
}

.dark-shadow {
  opacity: .55;
  width: 8em;
  position: absolute;
  inset: auto -7% -1% auto;
}

.mascot-eyeball-reflection {
  background-color: var(--white);
  filter: blur(4px);
  border-radius: 100em;
  width: .83em;
  height: .83em;
}

.footer-star {
  width: 9.58em;
}

.footer-star.hidden {
  display: none;
}

.footer-snippet {
  justify-content: center;
  align-items: center;
  margin-top: 3.28em;
  display: flex;
}

.footer-star-small {
  width: 2.03em;
  margin-right: .52em;
}

.text-16px {
  font-size: .83em;
}

.text-16px.all-caps {
  text-transform: uppercase;
}

.footer-link {
  border: .05em solid var(--midnight-blue);
  text-align: center;
  border-radius: 100em;
  justify-content: center;
  align-items: center;
  padding: .83em 2.5em;
  text-decoration: none;
  display: flex;
}

.footer-links-left {
  grid-column-gap: 2.5em;
  grid-row-gap: .94em;
  flex-wrap: wrap;
  width: 19.79em;
  display: flex;
}

.footer-links-middle {
  text-align: center;
  flex-direction: column;
  align-items: center;
  display: flex;
}

.footer-links-right {
  grid-row-gap: .83em;
  flex-direction: column;
  align-items: flex-end;
  display: flex;
}

.footer-cta-wrap {
  border-bottom: .42em solid var(--midnight-blue);
  text-decoration: none;
}

.footer-bg-pattern {
  width: 20.83em;
  position: absolute;
  inset: 12% auto auto 3%;
}

.home-projects {
  margin-top: 10em;
}

.project-item {
  grid-column-gap: 7.4em;
  justify-content: center;
  padding-top: 8em;
  padding-bottom: 8em;
  display: flex;
}

.project-bg {
  z-index: 1;
  background-color: #ffffff1c;
  border: 1px solid #fff3;
  border-radius: 1.66em;
  justify-content: center;
  align-items: center;
  width: 60.1em;
  height: 35.21em;
  padding: 1.64em 1.74em;
  display: flex;
  position: relative;
  box-shadow: 0 20px 59px -20px #0000007d;
}

.project-bg-pattern-1 {
  width: 13.33em;
  position: absolute;
  inset: -12% auto auto -7%;
}

.project-bg-pattern-2 {
  width: 12.76em;
  position: absolute;
  inset: auto -4.17em -12% auto;
}

.project-item-image-wrap {
  position: relative;
}

.project-showcase {
  background-color: var(--light-steel-blue);
  border-radius: .83em;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.project-item-info {
  flex-direction: column;
  align-items: flex-start;
  width: 21.72em;
  display: flex;
}

.heading-2 {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 2.92em;
  font-weight: 400;
  line-height: 1;
}

.paragraph-2 {
  margin-bottom: 0;
  font-size: 1.25em;
  font-weight: 300;
}

.text-24px {
  font-size: 1.25em;
  font-weight: 300;
}

.text-24px.bold {
  font-weight: 500;
}

.project-role, .project-category {
  margin-bottom: 1.25em;
}

.project-details, .project-description {
  margin-bottom: 4.43em;
}

.project-button {
  border: .05em solid var(--white);
  border-radius: 100em;
  padding: .83em 1.2em;
  text-decoration: none;
}

.project-title {
  margin-bottom: 1.3em;
}

.divider {
  background-color: #ffffff80;
  width: 100%;
  height: .05em;
}

.webflow-partner-badge {
  z-index: 99999999;
  width: 14em;
  position: fixed;
  inset: auto 0% 0% auto;
}

.unsplash-image {
  object-fit: contain;
  object-position: 50% 50%;
  width: 100%;
  height: auto;
  display: block;
}

@media screen and (max-width: 991px) {
  .nav-link {
    font-size: 1.5em;
  }
}

@media screen and (max-width: 767px) {
  body {
    font-size: 14px;
  }

  .home-hero {
    flex-direction: column;
    align-items: flex-start;
    padding-top: 4em;
  }

  .container {
    padding-left: 2em;
    padding-right: 2em;
  }

  .container.wide {
    padding-left: 0;
    padding-right: 0;
  }

  .home-hero-left {
    width: 100%;
  }

  .heading {
    font-size: 9vw;
  }

  .text-break._5-years {
    padding: .25em 1em;
  }

  .text-break.circled-webflow {
    margin-top: 20px;
  }

  .paragraph {
    font-size: 18px;
  }

  .home-hero-right {
    margin-left: auto;
    margin-right: auto;
  }

  .orb {
    width: 12em;
    right: -8%;
  }

  .star {
    width: 12em;
    bottom: -15%;
  }

  .navbar {
    margin-top: 2em;
  }

  .intro-snippet {
    font-size: 16px;
  }

  .home-about {
    margin-top: 16em;
  }

  .home-about-content {
    width: 100%;
  }

  .footer-top-curve {
    height: 2em;
  }

  .footer-links {
    flex-direction: column;
  }

  .footer-cta-text {
    padding-bottom: 20px;
    line-height: .8;
  }

  .footer-link {
    width: 100%;
  }

  .footer-links-left {
    grid-column-gap: .94em;
    grid-row-gap: .94em;
    flex-wrap: wrap;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    width: 100%;
    margin-bottom: 2em;
    display: grid;
  }

  .footer-links-right {
    grid-column-gap: .83em;
    grid-row-gap: .83em;
    flex-direction: row;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    width: 100%;
    margin-top: 2em;
    display: grid;
  }

  .footer-cta-wrap {
    text-align: center;
  }

  .home-projects {
    margin-top: 8em;
  }

  .project-item {
    flex-direction: column;
    padding-top: 4em;
    padding-bottom: 4em;
  }

  .project-bg {
    width: 100%;
    padding: 1.4em 1.5em;
  }

  .project-bg.short {
    height: auto;
  }

  .project-bg-pattern-1 {
    width: 8em;
    top: -8%;
  }

  .project-bg-pattern-2 {
    width: 6.3em;
    bottom: -5%;
    right: -1.57em;
  }

  .project-showcase.short {
    height: auto;
  }

  .project-item-info {
    width: 100%;
    margin-bottom: 4em;
  }

  .nav-menu {
    background-color: var(--light-steel-blue);
  }

  .menu-button, .menu-button.w--open {
    background-color: #c8c8c800;
  }
}

@media screen and (max-width: 479px) {
  .heading {
    font-size: 16vw;
  }

  .text-break.intro-star {
    width: 3em;
    height: 3em;
    top: -20px;
  }

  .home-hero-paragraph-wrap {
    width: 100%;
  }

  .hero-image {
    width: 100%;
    height: 20em;
  }

  .orb {
    width: 8em;
    right: -3%;
  }

  .star {
    width: 8em;
    bottom: -3%;
  }

  .footer-cta-text {
    font-size: 7em;
  }

  .footer-links-left, .footer-links-right {
    grid-template-columns: 1fr;
  }

  .project-bg {
    height: 20em;
    padding: .9em 1em;
  }
}


@font-face {
  font-family: 'Duplicatesans';
  src: url('../fonts/DuplicateSans-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Duplicatesans';
  src: url('../fonts/DuplicateSans-Heavy.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Duplicatesans';
  src: url('../fonts/DuplicateSans-LightItalic.woff2') format('woff2');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Duplicatesans';
  src: url('../fonts/DuplicateSans-MediumItalic.woff2') format('woff2');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Duplicatesans';
  src: url('../fonts/DuplicateSans-ThinItalic.woff2') format('woff2');
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Duplicatesans';
  src: url('../fonts/DuplicateSans.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Duplicatesans';
  src: url('../fonts/DuplicateSans-BoldItalic.woff2') format('woff2');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Duplicatesans';
  src: url('../fonts/DuplicateSans-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Duplicatesans';
  src: url('../fonts/DuplicateSans-Thin.woff2') format('woff2');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Duplicatesans';
  src: url('../fonts/DuplicateSans-HeavyItalic.woff2') format('woff2');
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Duplicatesans';
  src: url('../fonts/DuplicateSans-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}