:root {
  --black: #0a0c0f;
  --white: #ffffff;
  --grey: #777d83;
  --blue: #76b9ef;
  --gradient-blue: #2f8cd5;
  --gradient-light: #a0d5ff;
  --hero-title-glow:
    0 0 9px rgba(118, 185, 239, 0.78),
    0 0 22px rgba(72, 163, 236, 0.58),
    0 0 42px rgba(47, 140, 213, 0.34);
  --card-shadow: 0 117px 50px rgba(15, 15, 15, 0.5);
  --design-width: 1920px;
  --page-scale: 1;
  --page-offset-x: 0px;
  --desktop-gutter: 0px;
  --scaled-page-width: 1920px;
  --viewport-safe-width: 100vw;
  --viewport-height-design: 1080px;
  --hero-bottom-gap: 16px;
  --hero-copy-top: calc(var(--viewport-height-design) - 192px - var(--hero-bottom-gap));
  --hero-title-top: calc(var(--hero-copy-top) - 30px);
  --bio-photo-top: 136px;
  --bio-photo-height: 590px;
  --bio-intro-top: calc(var(--hero-copy-top) - 133px);
  --bio-content-shift: calc(var(--viewport-height-design) - 1080px);
  --works-height: 4513px;
  --works-section-top: var(--viewport-height-design);
  --works-card-width: 875px;
  --works-card-height: 753px;
  --works-thumb-width: 875px;
  --works-thumb-height: 656px;
  --works-left-column: 0px;
  --works-right-column: 945px;
  --works-centered-column: 472px;
  --works-row-step: 1144px;
  --works-stagger: 328px;
  --works-title-top: 686px;
  --works-category-top: 732px;
  --loop-distance: 5713px;
  --loop-offset: 0px;
  --main-bg-scroll-opacity: 1;
  --main-bg-route-opacity: 1;
  --tilt-rotate-x: 0deg;
  --tilt-rotate-y: 0deg;
  --tilt-translate-x: 0px;
  --tilt-translate-y: 0px;
  --tilt-scale: 1;
  --tilt-spotlight-x: 50%;
  --tilt-spotlight-y: 50%;
  --tilt-spotlight-opacity: 0;
  --figma-ease: cubic-bezier(0.5, 0, 0.5, 1);
  --bio-cta-top: calc(5574px + var(--bio-content-shift));
  --bio-cta-center: calc(5757px + var(--bio-content-shift));
  --bio-scroll-top-height: 34px;
  --bio-footer-gap: 80px;
  --bio-viewport-half: 540px;
  --bio-height: calc(var(--bio-cta-center) + var(--bio-viewport-half));
}

@font-face {
  font-family: "Aeonik Pro";
  src: url("fonts/Aeonik Font Family/Variable/AeonikPro-Regular.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: "Aeonik Pro";
  src: url("fonts/Aeonik Font Family/Variable/AeonikPro-RegularItalic.ttf") format("truetype");
  font-weight: 100 900;
  font-style: italic;
  font-display: block;
}

@font-face {
  font-family: "Editorial New";
  src: url("fonts/Editorial Font Family/EditorialNew-UltralightItalic.woff2") format("woff2");
  font-weight: 200;
  font-style: italic;
  font-display: block;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--background-black);
  color: var(--white);
  font-family: "Aeonik Pro", sans-serif;
  scroll-behavior: smooth;
  scrollbar-color: var(--grey) #0a0c0f;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track {
  background: #0a0c0f;
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
  background: var(--grey);
  border-radius: 999px;
  border: 2px solid #0a0c0f;
}

html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover {
  background: var(--grey);
}

body {
  margin: 0;
  position: relative;
  background: var(--black);
  overflow-x: hidden;
  overflow-y: hidden;
}

html[data-route="bio"] body {
  background: #0a0c0f;
  overflow-y: auto;
  min-height: calc(var(--bio-height) * var(--page-scale));
}

html[data-route="main"] body {
  background: var(--black);
  overflow-y: hidden;
  min-height: 1080px;
}

html.contact-document,
html.contact-document body {
  background: #0a0c0f;
  overflow: hidden;
  min-height: 100vh;
}

html.not-found-document,
html.not-found-document body {
  background: #0a0c0f;
  overflow: hidden;
  min-height: 100vh;
}

html.unibank-document,
html.unibank-document body {
  background: #0a0c0f;
  overflow-x: hidden;
  overflow-y: auto;
  min-height: calc(28787px * var(--page-scale));
}

html.bmmb-document {
  background: #0a0c0f;
  overflow-x: hidden;
  overflow-y: auto;
  min-height: 100%;
  scroll-behavior: auto;
}

html.bmmb-document body {
  background: #0a0c0f;
  overflow-x: hidden;
  overflow-y: hidden;
  min-height: 0;
  scrollbar-width: none;
}

html.orkestra-document {
  background: #0a0c0f;
  overflow-x: hidden;
  overflow-y: auto;
  min-height: 100%;
  scroll-behavior: auto;
}

html.orkestra-document body {
  background: #0a0c0f;
  overflow-x: hidden;
  overflow-y: hidden;
  min-height: 0;
  scrollbar-width: none;
}

html.aerosure-document {
  background: #0a0c0f;
  overflow-x: hidden;
  overflow-y: auto;
  min-height: 100%;
  scroll-behavior: auto;
}

html.pedalchi-document {
  background: #0a0c0f;
  overflow-x: hidden;
  overflow-y: auto;
  min-height: 100%;
  scroll-behavior: auto;
}

html.talktocanada-document {
  background: #0a0c0f;
  overflow-x: hidden;
  overflow-y: auto;
  min-height: 100%;
  scroll-behavior: auto;
}

html.manaw-document {
  background: #0a0c0f;
  overflow-x: hidden;
  overflow-y: auto;
  min-height: 100%;
  scroll-behavior: auto;
}

html.straudo-document {
  background: #0a0c0f;
  overflow-x: hidden;
  overflow-y: auto;
  min-height: 100%;
  scroll-behavior: auto;
}

html.aerosure-document body,
html.pedalchi-document body,
html.talktocanada-document body,
html.manaw-document body,
html.straudo-document body,
html.orkestra-document body,
html.bmmb-document body {
  background: #0a0c0f;
  overflow-x: hidden;
  overflow-y: hidden;
  min-height: 0;
  scrollbar-width: none;
}

html.aerosure-document body::-webkit-scrollbar,
html.pedalchi-document body::-webkit-scrollbar,
html.talktocanada-document body::-webkit-scrollbar,
html.manaw-document body::-webkit-scrollbar,
html.straudo-document body::-webkit-scrollbar,
html.orkestra-document body::-webkit-scrollbar,
html.bmmb-document body::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.route-panel {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  pointer-events: none;
  will-change: opacity, transform;
}

html[data-route="main"] .route-main {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  pointer-events: auto;
}

html[data-route="main"]:not(.is-route-transitioning) .route-bio,
html[data-route="bio"]:not(.is-route-transitioning) .route-main {
  display: none;
}

html.is-route-transitioning .route-panel {
  pointer-events: none;
}

html[data-route="bio"] .route-bio {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  pointer-events: auto;
}

.page-stage {
  width: calc(1920px * var(--page-scale));
  height: 100vh;
  margin-inline: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

.page-shell {
  position: relative;
  width: 1920px;
  height: var(--viewport-height-design);
  min-height: 1080px;
  background: var(--background-black);
  overflow: hidden;
  transform: scale(var(--page-scale));
  transform-origin: top left;
}

.route-main .page-shell {
  background: transparent;
}

.main-shell-background {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 1920px;
  height: var(--viewport-height-design);
  overflow: hidden;
  opacity: calc(var(--main-bg-scroll-opacity) * var(--main-bg-route-opacity));
  pointer-events: none;
  will-change: opacity;
}

.main-shell-background::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url("/assets/main/background.webp") center center / cover no-repeat;
  pointer-events: none;
}

html.is-main-bg-front .route-main {
  z-index: 2;
  opacity: 1;
  transform: translate3d(0, 0, 0);
  pointer-events: none;
}

html.is-main-bg-front .route-main .site-header,
html.is-main-bg-front .route-main .hero,
html.is-main-bg-front .route-main .works-marquee {
  opacity: 0;
}

.main-shell-background video {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  opacity: 1;
  pointer-events: none;
  transition: opacity 220ms var(--figma-ease);
}

html.has-main-bg-video-fallback .main-shell-background video {
  opacity: 0;
}

.site-header {
  position: absolute;
  z-index: 20;
  top: 0;
  left: 50px;
  width: 1790px;
  height: 100px;
  mix-blend-mode: difference;
  pointer-events: none;
}

html[data-route="main"] .route-bio-header {
  display: none;
}

html[data-route="bio"] .route-bio-header {
  display: block;
}

.back-home {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 18px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 0.36px;
  text-transform: uppercase;
  color: var(--white);
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
}

.intro-mark {
  position: absolute;
  top: 50px;
  left: 0;
  margin: 0;
  font-size: 32px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 0.64px;
  color: var(--blue);
  white-space: nowrap;
  overflow: visible;
  pointer-events: none;
}

.intro-mark-sizer {
  display: inline-block;
  visibility: hidden;
  white-space: nowrap;
}

.intro-mark-layer {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
  white-space: nowrap;
  will-change: opacity, transform;
}

.intro-mark-message {
  opacity: 0;
}

.intro-mark-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
}

.intro-mark-word-inner {
  display: inline-block;
  will-change: opacity, transform;
}

.main-nav {
  position: absolute;
  top: 60px;
  right: 0;
  display: flex;
  align-items: flex-start;
  gap: 60px;
  height: 40px;
  pointer-events: auto;
}

.nav-link {
  position: relative;
  display: flex;
  height: 40px;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  padding-bottom: 2px;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.36px;
  color: var(--white);
  white-space: nowrap;
}

.nav-link::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 10px;
  width: 130%;
  height: 1px;
  background: currentColor;
  opacity: 0;
  transform: translate(-50%, 18px);
  transform-origin: center center;
  transition: transform 260ms ease, opacity 260ms ease, width 260ms ease;
}

.nav-link:hover::after,
.nav-link:focus-visible::after,
.nav-link.is-active::after {
  left: 50%;
  width: 105%;
  transform: translate(-50%, 0);
  opacity: 1;
}

.hero {
  position: absolute;
  top: 0;
  left: 0;
  width: 1920px;
  height: var(--viewport-height-design);
  pointer-events: none;
}

html[data-route="main"] .intro-mark,
html[data-route="bio"] .bio-intro-mark {
  view-transition-name: hey-mark;
}

html[data-route="main"] .back-home,
html[data-route="bio"] .bio-back-home {
  view-transition-name: back-home;
}

html[data-route="main"] .hero-title,
html[data-route="bio"] .bio-hero-title {
  view-transition-name: hero-title;
}

html[data-route="main"] .hero-copy,
html[data-route="bio"] .bio-hero-copy {
  view-transition-name: hero-copy;
}

html[data-route="bio"] .bio-photo {
  view-transition-name: bio-photo;
}

.works-marquee {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 5;
  height: var(--viewport-height-design);
  overflow: hidden;
  pointer-events: none;
}

.works-track {
  position: absolute;
  inset: 0;
  width: 1920px;
  height: calc(var(--works-section-top) + (var(--loop-distance) * 2));
  transform: translateY(calc(var(--loop-offset) * -1));
  will-change: transform;
  pointer-events: none;
}

.hero-title {
  position: absolute;
  z-index: 4;
  top: calc(var(--hero-title-top) - 10px);
  left: 32px;
  width: 820px;
  margin: 0;
  padding: 10px 64px 12px 0;
  font-family: "Editorial New", serif;
  font-size: 120px;
  font-style: italic;
  font-weight: 200;
  line-height: 1.2;
  letter-spacing: 0;
  white-space: nowrap;
  color: transparent;
  background: linear-gradient(180deg, #2f8cd5 0%, #5ab2f0 34%, #c4ecff 74%, #ecf9ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow: var(--hero-title-glow);
}

.hero-copy {
  position: absolute;
  z-index: 4;
  top: var(--hero-copy-top);
  left: 412px;
  width: 1249px;
  margin: 0;
  font-size: 80px;
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: 0;
  text-align: right;
  color: var(--grey);
  white-space: nowrap;
}

.hero-copy span,
.bio-hero-copy span,
.transition-copy span {
  display: block;
}

.tablet-hero-copy {
  display: none;
}

.works {
  position: absolute;
  z-index: 2;
  top: var(--works-section-top);
  left: 50px;
  width: 1820px;
  height: var(--works-height);
  pointer-events: none;
}

.works.is-clone {
  top: calc(var(--works-section-top) + var(--loop-distance));
}

.project-card {
  position: absolute;
  display: block;
  width: var(--works-card-width);
  height: var(--works-card-height);
  color: var(--white);
  isolation: isolate;
  transform: translateZ(0);
  will-change: z-index;
  pointer-events: auto;
}

.project-card-body {
  position: relative;
  width: 100%;
  height: 100%;
  transform: perspective(1400px) translate3d(var(--tilt-translate-x), var(--tilt-translate-y), 0)
    rotateX(var(--tilt-rotate-x)) rotateY(var(--tilt-rotate-y)) scale(var(--tilt-scale));
  transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
  pointer-events: none;
}

.project-video-card .project-card-body {
  transition-duration: 340ms;
}

.project-card-body > * {
  position: absolute;
  z-index: 1;
}

.project-thumb {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--works-thumb-width);
  height: var(--works-thumb-height);
  overflow: hidden;
  border-radius: 10px;
  box-shadow: var(--card-shadow);
  background: #050505;
  z-index: 1;
}

.project-thumb::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 10px;
  background: radial-gradient(
    circle at var(--tilt-spotlight-x) var(--tilt-spotlight-y),
    rgba(255, 255, 255, 0.08) 0%,
    rgba(255, 255, 255, 0.035) 34%,
    rgba(255, 255, 255, 0.018) 55%,
    rgba(255, 255, 255, 0) 100%
  );
  opacity: var(--tilt-spotlight-opacity);
  mix-blend-mode: screen;
  filter: blur(100px);
  pointer-events: none;
  z-index: 2;
  transition: opacity 180ms ease;
  will-change: filter, opacity, background-position;
}

.project-video-card .project-thumb::before {
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.project-no-spotlight .project-thumb::before {
  display: none;
}

.project-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  object-fit: cover;
  pointer-events: none;
}

.project-thumb iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 10px;
  pointer-events: none;
}

.project-thumb video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  object-fit: cover;
  pointer-events: none;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
  will-change: transform;
}

.project-video-cover {
  position: absolute;
  overflow: hidden;
  border-radius: 10px;
  pointer-events: none;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  contain: paint;
  isolation: isolate;
  transform-style: flat;
  will-change: transform;
}

.project-video-cover iframe {
  display: block;
  background: #000;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
  will-change: transform;
}

.project-card h2 {
  position: absolute;
  top: var(--works-title-top);
  left: 10px;
  margin: 0;
  font-size: 36px;
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0.72px;
  color: var(--white);
  white-space: nowrap;
  z-index: 3;
}

.project-card p {
  position: absolute;
  top: var(--works-category-top);
  left: 10px;
  margin: 0;
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.36px;
  color: var(--grey);
  white-space: nowrap;
  z-index: 3;
}

.project-card[href] {
  cursor: pointer;
}

.project-unibank .project-thumb {
  background: var(--white);
}

.project-aerosure {
  top: 0;
  left: 0;
}

.project-baku {
  top: 328px;
  left: 945px;
}

.project-pedalchi {
  top: 1144px;
  left: 0;
}

.project-straudo {
  top: 1472px;
  left: 945px;
}

.project-manaw {
  top: 2288px;
  left: 0;
}

.project-orkestra {
  top: 2616px;
  left: 945px;
}

.project-talktocanada {
  top: 3432px;
  left: 0;
}

.project-unibank {
  top: 3760px;
  left: 945px;
}

.crop-baku {
  width: 129.68%;
  height: 107.98%;
  left: -14.84%;
  top: -7.98%;
  max-width: none;
}

.crop-manaw {
  width: 100.04%;
  height: 102.82%;
  left: -0.02%;
  top: 0;
  max-width: none;
}

.crop-talktocanada {
  width: 100.16%;
  height: 104.46%;
  left: -0.08%;
  top: -0.94%;
  max-width: none;
}

.crop-orkestra {
  width: 133.33%;
  height: 100%;
  left: -18.42%;
  top: 0;
  max-width: none;
}

.crop-orkestra-video {
  left: 50%;
  top: 50%;
  width: 133.33%;
  height: 100%;
  transform: translate3d(-50%, -50%, 0);
  max-width: none;
}

.bio-stage {
  width: calc(1920px * var(--page-scale));
  height: calc(var(--bio-height) * var(--page-scale));
  background: #0a0c0f;
  margin-inline: auto;
}

.bio-shell {
  position: relative;
  width: 1920px;
  height: var(--bio-height);
  min-height: var(--bio-height);
  background: #0a0c0f;
  overflow: hidden;
  transform: scale(var(--page-scale));
  transform-origin: top left;
}

.bio-header {
  position: fixed;
  top: calc(60px * var(--page-scale));
  left: calc(var(--page-offset-x) + 50px * var(--page-scale));
  width: 1790px;
  height: 40px;
  transform: scale(var(--page-scale));
  transform-origin: top left;
  mix-blend-mode: difference;
}

.bio-back-home {
  top: 0;
  left: 0;
  display: block;
  height: 40px;
  padding-bottom: 2px;
  opacity: 1;
  color: var(--grey);
  pointer-events: auto;
  transition: none;
  white-space: nowrap;
}

.bio-back-home span {
  display: block;
}

.bio-main-nav {
  top: 0;
  right: 0;
}

.contact-stage {
  width: calc(1920px * var(--page-scale));
  height: 100vh;
  background: #0a0c0f;
  margin-inline: auto;
}

.contact-shell {
  position: relative;
  width: 1920px;
  height: var(--viewport-height-design);
  min-height: 1080px;
  overflow: hidden;
  background: #0a0c0f;
  transform: scale(var(--page-scale));
  transform-origin: top left;
}

.not-found-stage {
  width: calc(1920px * var(--page-scale));
  height: 100vh;
  background: #0a0c0f;
  margin-inline: auto;
}

.not-found-shell {
  position: relative;
  width: 1920px;
  height: var(--viewport-height-design);
  min-height: 1080px;
  overflow: hidden;
  background: #0a0c0f;
  transform: scale(var(--page-scale));
  transform-origin: top left;
}

.not-found-header {
  mix-blend-mode: normal;
}

.not-found-kicker {
  position: absolute;
  top: calc(var(--viewport-height-design) * 0.5 - 108px);
  left: 0;
  width: 100%;
  margin: 0;
  color: var(--grey);
  font-size: 36px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 0.72px;
  text-align: center;
  white-space: nowrap;
}

.not-found-title {
  position: absolute;
  top: calc(var(--viewport-height-design) * 0.5 - 231px);
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  font-family: "Editorial New", serif;
  font-size: 120px;
  font-style: italic;
  font-weight: 200;
  line-height: 1.2;
  letter-spacing: 0;
  text-align: center;
  white-space: nowrap;
  color: transparent;
  background: linear-gradient(180deg, #2f8cd5 8.681%, #a0d5ff 88.542%);
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow: var(--hero-title-glow);
}

.not-found-cta {
  position: absolute;
  left: 50px;
  bottom: 33px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1820px;
  height: 366px;
  border: 1px solid var(--grey);
  border-radius: 999px;
  color: var(--white);
  font-size: 80px;
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: uppercase;
  transition:
    background-color 25ms linear,
    border-color 25ms linear;
}

.not-found-cta:hover,
.not-found-cta:focus-visible {
  background: var(--grey);
  border-color: var(--grey);
}

.contact-header {
  top: calc(60px * var(--page-scale));
}

.contact-back-home {
  color: var(--grey);
}

.contact-content,
.contact-socials {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.contact-intro {
  position: absolute;
  top: calc(var(--viewport-height-design) - 417px);
  left: 50px;
  margin: 0;
  color: var(--grey);
  font-size: 36px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 0.72px;
  white-space: nowrap;
}

.contact-email {
  position: absolute;
  top: calc(var(--viewport-height-design) - 376px);
  left: 634.5px;
  margin: 0;
  padding: 0;
  border: 0;
  appearance: none;
  background: transparent;
  color: var(--white);
  font-family: "Aeonik Pro", sans-serif;
  font-size: 120px;
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: 1.2px;
  text-align: center;
  white-space: nowrap;
  transform: translateX(-50%);
  cursor: pointer;
  pointer-events: auto;
}

.contact-email:focus-visible {
  outline: none;
}

.contact-copy-bubble {
  position: absolute;
  top: var(--bubble-y, 720px);
  left: var(--bubble-x, 133px);
  display: grid;
  width: 132px;
  height: 132px;
  place-items: center;
  border-radius: 50%;
  background: var(--white);
  color: #000000;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(calc(-50% + var(--bubble-offset-x, 0px)), calc(-50% + var(--bubble-offset-y, 0px)), 0) scale(0);
  transition: transform 70ms ease, opacity 70ms ease, background-color 160ms ease;
  will-change: transform, opacity;
}

.contact-email:hover + .contact-copy-bubble,
.contact-email:focus-visible + .contact-copy-bubble,
.contact-copy-bubble.is-visible {
  opacity: 1;
  transform: translate3d(calc(-50% + var(--bubble-offset-x, 0px)), calc(-50% + var(--bubble-offset-y, 0px)), 0) scale(1);
}

.contact-copy-bubble.is-copied {
  background: var(--grey);
}

.copy-label {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #000000;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0;
  text-align: center;
  transition: opacity 120ms ease;
}

.contact-email.is-bubble-active {
  cursor: none;
}

.copy-label-copied {
  opacity: 0;
}

.contact-copy-bubble.is-copied .copy-label,
.contact-copy-bubble.is-copied .copy-label-default {
  color: var(--white);
}

.contact-copy-bubble.is-copied .copy-label-default {
  opacity: 0;
}

.contact-copy-bubble.is-copied .copy-label-copied {
  opacity: 1;
}

.contact-social-link {
  position: absolute;
  bottom: 60px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--white);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.36px;
  white-space: nowrap;
  pointer-events: auto;
}

.contact-linkedin {
  left: 50px;
}

.contact-behance {
  left: 200px;
}

.contact-social-link img {
  width: 12px;
  height: 12px;
  margin-top: 5px;
  display: block;
}

.unibank-stage {
  width: calc(1920px * var(--page-scale));
  height: calc(28787px * var(--page-scale));
  background: #0a0c0f;
  margin-inline: auto;
}

.unibank-shell {
  position: relative;
  width: 1920px;
  height: 28787px;
  min-height: 28787px;
  overflow: hidden;
  background: #0a0c0f;
  zoom: var(--page-scale);
  transform: none;
  transform-origin: top left;
}

.unibank-header {
  top: calc(60px * var(--page-scale));
}

.unibank-back-home {
  color: var(--grey);
}

.bmmb-stage {
  width: calc(1920px * var(--page-scale));
  height: calc(19874.4375px * var(--page-scale));
  background: #0a0c0f;
  margin-inline: auto;
}

.bmmb-shell {
  position: relative;
  width: 1920px;
  height: 19874.4375px;
  min-height: 19874.4375px;
  overflow: hidden;
  background: #0a0c0f;
  zoom: var(--page-scale);
  transform: none;
  transform-origin: top left;
}

.bmmb-header {
  top: calc(60px * var(--page-scale));
}

.bmmb-back-home {
  color: var(--grey);
}

.orkestra-stage {
  width: calc(1920px * var(--page-scale));
  height: calc(12668.5px * var(--page-scale));
  background: #0a0c0f;
  margin-inline: auto;
}

.orkestra-shell {
  position: relative;
  width: 1920px;
  height: 12668.5px;
  min-height: 12668.5px;
  overflow: hidden;
  background: #0a0c0f;
  zoom: var(--page-scale);
  transform: none;
  transform-origin: top left;
}

.orkestra-header {
  top: calc(60px * var(--page-scale));
}

.orkestra-back-home {
  color: var(--grey);
}

.aerosure-stage {
  width: calc(1920px * var(--page-scale));
  height: calc(14721.5625px * var(--page-scale));
  background: #0a0c0f;
  margin-inline: auto;
}

.aerosure-shell {
  position: relative;
  width: 1920px;
  height: 14721.5625px;
  min-height: 14721.5625px;
  overflow: hidden;
  background: #0a0c0f;
  zoom: var(--page-scale);
  transform: none;
  transform-origin: top left;
}

.aerosure-header {
  top: calc(60px * var(--page-scale));
}

.aerosure-back-home {
  color: var(--grey);
}

.talktocanada-stage {
  width: calc(1920px * var(--page-scale));
  height: auto;
  background: #0a0c0f;
  margin-inline: auto;
}

.talktocanada-shell {
  position: relative;
  width: 1920px;
  height: auto;
  min-height: 100vh;
  overflow: visible;
  background: #0a0c0f;
  zoom: var(--page-scale);
  transform: none;
  transform-origin: top left;
}

.talktocanada-header {
  top: calc(60px * var(--page-scale));
}

.talktocanada-back-home {
  color: var(--grey);
}

.pedalchi-stage {
  width: calc(1920px * var(--page-scale));
  height: auto;
  background: #0a0c0f;
  margin-inline: auto;
}

.pedalchi-shell {
  position: relative;
  width: 1920px;
  height: auto;
  min-height: 100vh;
  overflow: visible;
  background: #0a0c0f;
  zoom: var(--page-scale);
  transform: none;
  transform-origin: top left;
}

.pedalchi-header {
  top: calc(60px * var(--page-scale));
}

.pedalchi-back-home {
  color: var(--grey);
}

.manaw-stage {
  width: calc(1920px * var(--page-scale));
  height: auto;
  background: #0a0c0f;
  margin-inline: auto;
}

.manaw-shell {
  position: relative;
  width: 1920px;
  height: auto;
  min-height: 100vh;
  overflow: visible;
  background: #0a0c0f;
  zoom: var(--page-scale);
  transform: none;
  transform-origin: top left;
}

.manaw-header {
  top: calc(60px * var(--page-scale));
}

.manaw-back-home {
  color: var(--grey);
}

.straudo-stage {
  width: calc(1920px * var(--page-scale));
  height: auto;
  background: #0a0c0f;
  margin-inline: auto;
}

.straudo-shell {
  position: relative;
  width: 1920px;
  height: auto;
  min-height: 100vh;
  overflow: visible;
  background: #0a0c0f;
  zoom: var(--page-scale);
  transform: none;
  transform-origin: top left;
}

.straudo-header {
  top: calc(60px * var(--page-scale));
}

.straudo-back-home {
  color: var(--grey);
}

.pedalchi-content {
  position: relative;
}

.pedalchi-media {
  background: #0a0c0f;
}

.work-media.case-media-standalone.pedalchi-media-square {
  border-radius: 0;
}

.work-media.case-media-standalone.pedalchi-2-1-exception,
.work-media.case-media-standalone.pedalchi-2-1-exception img {
  border-bottom-left-radius: 0;
}

.pedalchi-project-type {
  text-align: left;
}

.manaw-content {
  position: relative;
}

.manaw-media {
  background: #0a0c0f;
}

.manaw-project-type {
  text-align: left;
}

.straudo-content {
  position: relative;
}

.straudo-next-project-panel:not(.is-ready) .next-project-link {
  opacity: 0;
}

.straudo-copy-columns {
  display: grid;
  grid-template-columns: 605px 574px;
  column-gap: 355px;
  width: 1534px;
  margin: 80px 0 80px 60px;
}

.straudo-column-copy {
  margin: 0;
}

.straudo-media {
  background: #0a0c0f;
}

.straudo-project-type {
  text-align: left;
}

.work-media.manaw-video-embed iframe {
  inset: 0;
  width: 100%;
  height: 100%;
}

.manaw-seamless-stack .work-img {
  inset: 0;
  height: 100%;
}

.manaw-seamless-stack .manaw-video-embed iframe {
  inset: 0;
  height: 100%;
}

.manaw-seamless-stack .manaw-video-embed {
  isolation: isolate;
}

.manaw-seamless-stack .manaw-video-embed-1 {
  z-index: 14;
}

.manaw-seamless-stack .manaw-video-embed-2 {
  z-index: 13;
}

.manaw-seamless-stack .manaw-video-embed-3 {
  z-index: 12;
}

.manaw-seamless-stack .manaw-video-embed-4 {
  z-index: 11;
}

.manaw-final-stack-media,
.manaw-final-stack-media .work-img {
  border-radius: 10px;
}

.manaw-seamless-stack .manaw-final-stack-media .work-img {
  inset: 0;
  height: 100%;
}

.manaw-media-shield {
  position: absolute;
  inset: 0;
  z-index: 4;
  background: transparent;
  pointer-events: auto;
}

.work-media.pedalchi-video-embed iframe {
  inset: 0;
  width: 100%;
  height: 100%;
}

.pedalchi-media-shield {
  position: absolute;
  inset: 0;
  z-index: 4;
  background: transparent;
  pointer-events: auto;
}

.aerosure-content {
  position: relative;
}

.aerosure-media {
  margin: 0;
  background: #0a0c0f;
}

.work-media.aerosure-media-start {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.work-media.aerosure-media-flat {
  border-radius: 0;
}

.work-media.aerosure-media-last {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.aerosure-project-type {
  text-align: left;
}

.work-media.aerosure-video-embed iframe {
  inset: 0;
  width: 100%;
  height: 100%;
}

.aerosure-media-shield {
  position: absolute;
  inset: 0;
  z-index: 4;
  background: transparent;
  pointer-events: auto;
}

.talktocanada-content {
  position: relative;
  --case-stack-surface: #f0f0f0;
}

.talktocanada-media {
  background: #0a0c0f;
}

.talktocanada-content > .case-media-standalone:first-child {
  margin-top: 0;
}

.talktocanada-project-type {
  text-align: left;
}

.work-media.talktocanada-video-embed iframe {
  inset: 0;
  width: 100%;
  height: 100%;
}

.work-media.talktocanada-primary-video {
  background: #f0f0f0;
}

.work-media.talktocanada-primary-video iframe {
  background: #f0f0f0;
  inset: 144.5px auto auto 238px;
  width: 1344px;
  height: 756px;
  border-radius: 28px;
}

.work-media.talktocanada-video-strip iframe {
  inset: 0;
  width: 100%;
  height: 100%;
}

.talktocanada-media-shield {
  position: absolute;
  inset: 0;
  z-index: 4;
  background: transparent;
  pointer-events: auto;
}

.case-stage {
  width: calc(1920px * var(--page-scale));
  background: #0a0c0f;
  margin-inline: auto;
}

.case-stage.aerosure-stage,
.case-stage.talktocanada-stage,
.case-stage.pedalchi-stage,
.case-stage.manaw-stage,
.case-stage.straudo-stage,
.case-stage.orkestra-stage,
.case-stage.bmmb-stage {
  height: auto;
}

.case-shell {
  position: relative;
  width: 1920px;
  height: auto;
  min-height: 100vh;
  overflow: visible;
  background: #0a0c0f;
  zoom: var(--page-scale);
  transform: none;
  transform-origin: top left;
}

.case-shell.aerosure-shell,
.case-shell.talktocanada-shell,
.case-shell.pedalchi-shell,
.case-shell.manaw-shell,
.case-shell.straudo-shell,
.case-shell.orkestra-shell,
.case-shell.bmmb-shell {
  height: auto;
}

.case-flow.bmmb-content {
  top: auto;
}

.case-intro {
  position: relative;
  margin: 0 50px;
  padding-top: 232px;
}

.case-intro .work-project-title {
  position: relative;
  left: auto;
  top: auto;
}

.case-intro .work-project-type {
  position: absolute;
  left: 1100px;
  top: 232px;
}

.case-intro .bmmb-project-type,
.case-intro .pedalchi-project-type,
.case-intro .talktocanada-project-type,
.case-intro .manaw-project-type,
.case-intro .straudo-project-type,
.case-intro .orkestra-project-type,
.case-intro .aerosure-project-type {
  left: 1100px;
}

.case-intro .work-copy {
  position: relative;
  left: auto;
  top: auto;
  margin-top: 40px;
}

.case-intro .work-label {
  position: absolute;
  left: 1100px;
  top: 368px;
}

.case-intro .work-role {
  position: absolute;
  left: 1224px;
  top: 368px;
}

.case-flow {
  position: relative;
  margin-top: 100px;
  padding-bottom: 80px;
}

.case-flow:has(> .next-project-panel:last-child) {
  padding-bottom: 0;
}

.case-stack,
.continuous-case-strip {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 1820px;
  margin-left: 50px;
  overflow: hidden;
  border-radius: 10px;
  background: var(--case-stack-surface, #0a0c0f);
  font-size: 0;
  line-height: 0;
  isolation: isolate;
}

.case-flow .work-media,
.case-flow .work-copy,
.case-flow .work-scroll-top {
  position: relative;
  left: auto;
  top: auto;
}

.case-flow .work-scroll-top {
  display: block;
  margin: 80px auto 0;
  font-size: 24px;
  line-height: 1.4;
  letter-spacing: 0.48px;
}

.case-media {
  position: relative;
  display: block;
  width: 1820px;
  height: var(--media-h);
  margin-left: 50px;
  background: var(--case-stack-surface, #0a0c0f);
  content-visibility: visible;
  contain: none;
  contain-intrinsic-size: none;
}

.case-stack > .case-media,
.continuous-case-strip > .case-media {
  flex: 0 0 var(--media-h);
  margin-left: 0;
  background: inherit;
  content-visibility: visible;
  contain: none;
  contain-intrinsic-size: none;
}

.case-copy {
  width: var(--copy-w, 620px);
  margin: 80px auto;
}

.case-flow .case-copy {
  margin: 80px auto;
}

.case-copy-center {
  text-align: center;
}

.work-media.case-media-start {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.work-media.case-media-flat {
  border-radius: 0;
}

.work-media.case-media-end {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.work-media.case-media-last {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.case-video iframe {
  inset: 0;
  width: 100%;
  height: 100%;
}

.work-media.case-video-crop-top iframe {
  inset: -2px 0 auto 0;
  height: calc(100% + 2px);
}

.work-media.case-video-crop-y iframe {
  inset: 0;
  height: 100%;
  transform: scaleY(1.004);
  transform-origin: center center;
}

.case-pair-grid {
  display: grid;
  grid-template-columns: 884px 884px;
  gap: 52px;
  width: 1820px;
  margin: 52px 0 52px 50px;
}

.case-pair-grid .case-media {
  width: 884px;
  height: 884px;
  margin-left: 0;
  border-radius: 10px;
}

.case-triple-grid {
  display: grid;
  grid-template-columns: repeat(3, 572px);
  gap: 52px;
  width: 1820px;
  margin: 52px 0 52px 50px;
}

.case-triple-grid .case-media {
  width: 572px;
  height: 572px;
  margin-left: 0;
  border-radius: 10px;
}

.case-flow .work-scroll-top {
  display: block;
  margin: 80px auto 0;
}

.orkestra-content {
  position: relative;
  padding-bottom: 0;
}

.orkestra-media {
  margin: 0;
  background: #0a0c0f;
}

.work-media.orkestra-media-start {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.work-media.orkestra-media-end {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.work-media.orkestra-media-flat {
  border-radius: 0;
}

.work-media.orkestra-pair-media {
  border-radius: 10px;
}

.work-media.orkestra-media-last {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.orkestra-project-type {
  text-align: left;
}

.work-media.orkestra-video-embed iframe {
  inset: 0;
  width: 100%;
  height: 100%;
}

.orkestra-media-shield {
  position: absolute;
  inset: 0;
  z-index: 4;
  background: transparent;
  pointer-events: auto;
}

.next-project-panel {
  position: relative;
  width: 1920px;
  height: var(--next-project-panel-height, 1032px);
  margin-top: 150px;
  overflow: hidden;
  background: #0a0c0f;
}

.next-project-panel[hidden] {
  display: none;
}

.next-project-link {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  cursor: pointer;
}

.next-project-link:focus-visible {
  outline: 1px solid var(--grey);
  outline-offset: -1px;
}

.next-project-link.is-cursor-active {
  cursor: none;
}

.next-project-eyebrow {
  position: absolute;
  top: 154px;
  left: 50px;
  z-index: 3;
  color: var(--grey);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.48px;
  white-space: nowrap;
}

.next-project-preview-host,
.next-project-preview-page {
  position: absolute;
  inset: 0 auto auto 0;
  display: block;
  width: 1920px;
  height: 1080px;
  background: #0a0c0f;
  pointer-events: none;
}

.next-project-preview-page .next-project-preview-intro {
  display: block;
}

.next-project-preview-page .next-project-preview-flow {
  display: block;
  padding-bottom: 0;
}

.next-project-preview-page .next-project-preview-media {
  pointer-events: none;
}

.next-project-cursor {
  position: fixed;
  top: var(--next-cursor-y, 360px);
  left: var(--next-cursor-x, 960px);
  z-index: 10000;
  display: flex;
  width: calc(132px * var(--page-scale, 1));
  height: calc(132px * var(--page-scale, 1));
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--white);
  color: #000000;
  font-size: calc(24px * var(--page-scale, 1));
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0;
  opacity: 0;
  pointer-events: none;
  text-align: center;
  transform: translate3d(
      calc(-50% + var(--next-cursor-offset-x, 0px)),
      calc(-50% + var(--next-cursor-offset-y, 0px)),
      0
    )
    scale(0);
  transition: transform 70ms ease, opacity 70ms ease;
  will-change: transform, opacity;
}

.next-project-cursor.is-visible {
  opacity: 1;
  transform: translate3d(
      calc(-50% + var(--next-cursor-offset-x, 0px)),
      calc(-50% + var(--next-cursor-offset-y, 0px)),
      0
    )
    scale(1);
}

.next-project-panel.is-transition-source-hidden {
  visibility: hidden;
}

.next-project-transition-overlay {
  position: fixed;
  z-index: 19;
  overflow: visible;
  background: #0a0c0f;
  pointer-events: none;
  will-change: transform;
}

.next-project-panel.is-transition-clone {
  width: 1920px;
  height: var(--next-project-panel-height, 1032px);
  margin: 0;
  overflow: hidden;
}

.next-project-panel.is-transition-clone .next-project-link {
  overflow: visible;
  cursor: default;
}

.next-project-template-source {
  display: none;
}

.unibank-next-project-intro {
  position: relative;
  width: 1920px;
  height: 643px;
  background: #0a0c0f;
}

.unibank-next-project-logos {
  position: relative;
  width: 1920px;
  height: 860px;
  background: #0a0c0f;
}

.unibank-next-project-preview .next-project-preview-flow {
  margin-top: 0;
}

.orkestra-body {
  --next-project-panel-height: 937px;
}

.bmmb-body {
  --next-project-panel-height: 937px;
}

.unibank-body {
  --next-project-panel-height: 937px;
}

.talktocanada-body {
  --next-project-panel-height: 937px;
}

.pedalchi-body {
  --next-project-panel-height: 937px;
}

.straudo-body,
.aerosure-body,
.manaw-body {
  --next-project-panel-height: 937px;
}

.bmmb-content {
  position: relative;
  top: -119px;
}

.bmmb-media {
  background: #0a0c0f;
}

.bmmb-content .bmmb-media {
  margin: 0;
}

.work-media.bmmb-media-flat {
  border-radius: 0;
}

.work-media.bmmb-media-02 {
  z-index: 1;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.work-media.bmmb-video-embed {
  z-index: 2;
}

.work-media.bmmb-media-03 {
  z-index: 3;
}

.work-media.bmmb-media-last {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.bmmb-content .bmmb-media-flat,
.bmmb-content .bmmb-media-02,
.bmmb-content .bmmb-media-last {
  margin: 0;
}

.work-media.bmmb-video-embed iframe {
  inset: 0;
  width: 100%;
  height: 100%;
}

.bmmb-media-shield {
  position: absolute;
  inset: 0;
  z-index: 4;
  background: transparent;
  pointer-events: auto;
}

.straudo-media-shield {
  position: absolute;
  inset: 0;
  z-index: 4;
  background: transparent;
  pointer-events: auto;
}

.case-flow .case-media {
  margin: 0 0 0 50px;
}

.case-flow .case-stack .case-media,
.case-flow .continuous-case-strip .case-media {
  margin: 0;
  background: inherit;
  content-visibility: visible;
  contain: none;
  contain-intrinsic-size: none;
}

.case-flow .case-pair-grid .case-media {
  margin: 0;
}

.case-flow .case-triple-grid .case-media {
  margin: 0;
}

.case-flow .case-media-standalone {
  margin: 80px 0 80px 50px;
  border-radius: 10px;
}

.case-flow .work-video iframe {
  pointer-events: none;
}

.case-flow .work-video.talktocanada-primary-video iframe {
  pointer-events: auto;
}

.case-flow .work-video.work-video-primary iframe {
  pointer-events: auto;
}

.case-flow .work-media.case-video-crop-top iframe {
  inset: -2px 0 auto 0;
  height: calc(100% + 2px);
}

.case-flow .work-media.case-video-crop-y iframe {
  inset: 0;
  height: 100%;
  transform: scaleY(1.004);
  transform-origin: center center;
}

.work-project-title,
.work-project-type,
.work-copy,
.work-label,
.work-role,
.work-section-title,
.work-section-heading,
.work-media,
.work-logo-card,
.work-slogan-card,
.work-arrow,
.teaser-card,
.radio-player,
.radio-player-ui,
.radio-player-active,
.work-radio-waves,
.work-stat,
.work-scroll-top {
  position: absolute;
}

.work-project-title {
  margin: 0;
  color: var(--white);
  font-size: 80px;
  font-weight: 400;
  line-height: 1.2;
}

.work-project-type {
  width: 760px;
  margin: 0;
  color: var(--grey);
  font-size: 80px;
  font-style: italic;
  font-weight: 300;
  line-height: 1.2;
  text-align: right;
  white-space: nowrap;
}

.bmmb-project-title {
  width: 900px;
  font-size: 80px;
  line-height: 1.2;
  letter-spacing: 0;
  white-space: normal;
}

.bmmb-project-type {
  font-size: 80px;
  line-height: 1.2;
  letter-spacing: 0;
  text-align: left;
  position: relative;
}

.bmmb-project-separator {
  position: absolute;
  left: -40px;
  top: 0;
}

.bmmb-project-name {
  display: inline-block;
}

.work-copy {
  margin: 0;
  color: #b3b8be;
  font-size: 18px;
  font-weight: 300;
  line-height: 1.22;
  letter-spacing: 0.36px;
}

.work-copy-grey {
  color: var(--grey);
}

.work-copy-light {
  color: #b3b8be;
}

.work-label {
  margin: 0;
  color: var(--grey);
  font-size: 18px;
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: 0.36px;
  white-space: nowrap;
}

.work-role {
  margin: 0;
  color: var(--white);
  font-size: 24px;
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: 0.48px;
  white-space: nowrap;
}

.work-section-title {
  left: 0;
  width: 1920px;
  margin: 0;
  color: var(--white);
  font-size: 80px;
  font-weight: 400;
  line-height: 1.2;
  text-align: center;
}

.work-section-heading {
  margin: 0;
  color: var(--white);
  font-size: 80px;
  font-weight: 400;
  line-height: 1.2;
}

.work-logo-card,
.work-slogan-card {
  width: 860px;
  height: 860px;
  overflow: hidden;
  border-radius: 10px;
}

.work-logo-card {
  background: var(--white);
}

.old-logo {
  position: absolute;
  left: 220px;
  top: 364px;
  width: 399.27px;
  height: 133px;
}

.new-logo {
  position: absolute;
  left: 207px;
  top: 374px;
  width: 466.93px;
  height: 112px;
}

.work-arrow {
  width: 30px;
  height: 50px;
}

.old-slogan-bg {
  background: #5b6670;
}

.new-slogan-bg {
  background: #ff6400;
}

.old-slogan {
  position: absolute;
  left: 213px;
  top: 358px;
  width: 434.6px;
  height: 50px;
}

.new-slogan {
  position: absolute;
  left: 245px;
  top: 358px;
  width: 369.03px;
  height: 50px;
}

.work-slogan-card p {
  position: absolute;
  left: 0;
  top: 448px;
  width: 860px;
  margin: 0;
  color: var(--white);
  font-size: 36px;
  font-style: italic;
  font-weight: 300;
  line-height: 1.5;
  text-align: center;
}

.work-media {
  overflow: hidden;
  border-radius: 10px;
  background: #050505;
}

.work-img,
.work-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.work-img {
  object-fit: cover;
}

.work-video iframe {
  display: block;
}

.social-video-click-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  background: transparent;
  cursor: pointer;
}

.video-caption-note {
  position: absolute;
  display: flex;
  justify-content: flex-end;
  margin: 0;
  font-family: var(--font-aeonik);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0;
  pointer-events: none;
}

.video-caption-note span {
  display: inline;
  color: var(--light-grey);
  opacity: 0.84;
}

.crop-alf01600 {
  width: 105.88%;
  max-width: none;
}

.crop-alf01623 {
  left: -53.02%;
  width: 208.58%;
  height: 187.98%;
  max-width: none;
}

.crop-alf01619 {
  left: -8.23%;
  top: -11.75%;
  width: 114.6%;
  height: 143.02%;
  max-width: none;
}

.crop-firefly {
  left: -17.24%;
  top: -16.6%;
  width: 145.16%;
  height: 140.54%;
  max-width: none;
}

.crop-launch-1 {
  left: -21.44%;
  top: -0.04%;
  width: 159.28%;
  height: 109.55%;
  max-width: none;
}

.crop-launch-2 {
  left: -7.04%;
  width: 108.14%;
  height: 115.95%;
  max-width: none;
}

.teaser-card {
  width: 416px;
  height: 494px;
  margin: 0;
}

.teaser-card img {
  display: block;
  width: 416px;
  height: 416px;
  border-radius: 10px;
  object-fit: cover;
}

.teaser-card figcaption {
  margin: 20px 0 0;
  color: var(--white);
  font-size: 24px;
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: 0.48px;
  text-align: center;
  white-space: nowrap;
}

.teaser-card figcaption em {
  color: var(--grey);
  font-style: normal;
}

.teaser-card figcaption span,
.teaser-card figcaption em {
  display: inline;
}

.work-radio-waves {
  width: 418px;
  height: 53px;
}

.radio-player {
  display: block;
}

.radio-player-ui {
  width: 893px;
  height: 80px;
  color: var(--white);
  transition: top 260ms var(--figma-ease);
}

.radio-toggle {
  position: absolute;
  left: 0;
  top: 0;
  width: 60px;
  height: 80px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--white);
  cursor: pointer;
}

.radio-toggle:focus-visible {
  outline: 1px solid var(--grey);
  outline-offset: 8px;
}

.radio-play-icon {
  position: absolute;
  left: 8px;
  top: 22px;
  width: 36px;
  height: 36px;
  display: block;
  overflow: visible;
}

.radio-play-icon path {
  fill: currentColor;
}

.radio-pause-icon {
  position: absolute;
  left: 17px;
  top: 22px;
  width: 24px;
  height: 36px;
  display: none;
}

.radio-pause-icon span {
  position: absolute;
  top: 0;
  width: 8px;
  height: 36px;
  border-radius: 4px;
  background: var(--white);
}

.radio-pause-icon span:first-child {
  left: 0;
}

.radio-pause-icon span:last-child {
  right: 0;
}

.radio-loading-icon {
  position: absolute;
  left: 7px;
  top: 18px;
  width: 44px;
  height: 44px;
  display: none;
  animation: radio-loader-orbit 900ms linear infinite;
}

.radio-loading-icon span {
  position: absolute;
  left: 19px;
  top: 3px;
  width: 6px;
  height: 14px;
  border-radius: 999px;
  background: var(--light-grey);
  transform-origin: 3px 19px;
  animation: radio-loader-pulse 900ms var(--figma-ease) infinite;
}

.radio-loading-icon span:nth-child(1) {
  transform: rotate(0deg);
}

.radio-loading-icon span:nth-child(2) {
  background: var(--grey);
  transform: rotate(90deg);
  animation-delay: -675ms;
}

.radio-loading-icon span:nth-child(3) {
  background: var(--white);
  transform: rotate(180deg);
  animation-delay: -450ms;
}

.radio-loading-icon span:nth-child(4) {
  background: var(--grey);
  transform: rotate(270deg);
  animation-delay: -225ms;
}

.radio-error-icon {
  position: absolute;
  left: 11px;
  top: 21px;
  width: 38px;
  height: 38px;
  display: none;
}

.radio-error-icon span {
  position: absolute;
  left: 5px;
  top: 17px;
  width: 28px;
  height: 4px;
  border-radius: 999px;
  background: var(--light-grey);
  transform-origin: center;
}

.radio-error-icon span:first-child {
  transform: rotate(45deg);
}

.radio-error-icon span:last-child {
  background: var(--white);
  transform: rotate(-45deg);
}

.radio-player-ui.is-playing .radio-play-icon,
.radio-player-ui.is-loading .radio-play-icon,
.radio-player-ui.is-loading .radio-pause-icon,
.radio-player-ui.has-error .radio-play-icon,
.radio-player-ui.has-error .radio-pause-icon,
.radio-player-ui.has-error .radio-loading-icon {
  display: none;
}

.radio-player-ui.is-playing .radio-pause-icon {
  display: block;
}

.radio-player-ui.is-loading .radio-loading-icon,
.radio-player-ui.has-error .radio-error-icon {
  display: block;
}

.radio-player-ui.is-loading .radio-toggle {
  cursor: progress;
}

.radio-waveform {
  position: absolute;
  left: 83px;
  top: 0;
  width: 810px;
  height: 80px;
  display: block;
  cursor: pointer;
  touch-action: none;
}

.radio-transcript {
  position: absolute;
  top: 108px;
  left: 73px;
  width: 833px;
  height: 49px;
  margin: 0;
  overflow: hidden;
  border-radius: 10px;
  background: #2c2e31;
  color: #b3b8be;
  font-size: 18px;
  font-weight: 300;
  line-height: 49px;
  letter-spacing: 0.36px;
  text-align: center;
  white-space: nowrap;
  display: none;
  align-items: center;
  justify-content: center;
}

.radio-error-message {
  position: absolute;
  top: 108px;
  left: 73px;
  z-index: 3;
  width: 408px;
  height: 49px;
  margin: 0;
  border-radius: 10px;
  background: #2c2e31;
  color: var(--light-grey);
  font-size: 18px;
  font-weight: 300;
  line-height: 49px;
  letter-spacing: 0.36px;
  text-align: center;
  display: none;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.radio-transcript-marquee {
  justify-content: flex-start;
  text-align: left;
}

.radio-transcript-track {
  display: inline-block;
  flex: 0 0 auto;
  white-space: nowrap;
  will-change: transform;
  transform: translateX(var(--radio-transcript-x, 833px));
}

.radio-player-ui.is-expanded .radio-transcript:not(:empty) {
  display: flex;
}

.radio-player-ui.has-error .radio-error-message {
  display: flex;
}

.radio-player-ui.has-error .radio-transcript {
  display: none !important;
}

.radio-player-ui audio {
  display: none;
}

@keyframes radio-loader-orbit {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes radio-loader-pulse {
  0%,
  100% {
    opacity: 0.35;
    height: 9px;
  }

  45% {
    opacity: 1;
    height: 17px;
  }
}

.radio-player-active {
  position: absolute;
  color: var(--grey);
}

.radio-player-pause {
  position: absolute;
  left: 0;
  top: 22px;
  width: 24px;
  height: 36px;
  display: block;
}

.radio-player-waves {
  position: absolute;
  left: 66px;
  top: 0;
  display: block;
  width: 810px;
  height: 80px;
}

.radio-player-active p {
  position: absolute;
  top: 108px;
  left: 56px;
  width: 833px;
  height: 49px;
  margin: 0;
  overflow: hidden;
  border-radius: 10px;
  background: #2c2e31;
  color: #b3b8be;
  font-size: 18px;
  font-weight: 300;
  line-height: 49px;
  letter-spacing: 0.36px;
  text-align: center;
  white-space: nowrap;
}

.work-stat {
  width: 300px;
  color: #b3b8be;
}

.work-stat strong {
  display: block;
  color: var(--white);
  font-size: 80px;
  font-weight: 400;
  line-height: 1.2;
}

.work-stat-caption {
  display: block;
  width: 257px;
  margin-top: 10px;
  color: #b3b8be;
  font-size: 18px;
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: 0.36px;
}

.work-stat-caption-medium {
  width: 306px;
}

.work-stat-caption-wide {
  width: 378px;
}

.work-stat-line {
  display: block;
}

.work-stat-lead {
  color: var(--white);
}

.work-scroll-top {
  width: 183px;
  height: 34px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--grey);
  font-family: "Aeonik Pro", sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.36px;
  text-align: center;
  cursor: pointer;
}

.work-scroll-top:hover,
.work-scroll-top:focus-visible {
  color: var(--white);
  outline: none;
}

[data-unibank-scroll-top] {
  font-size: 24px;
  line-height: 1.4;
  letter-spacing: 0.48px;
}

.bio-hero {
  position: absolute;
  inset: 0 auto auto 0;
  width: 1920px;
  height: var(--viewport-height-design);
  pointer-events: none;
}

.bio-hero-title {
  top: calc(var(--hero-title-top) - 10px);
}

.bio-hero-copy {
  top: var(--hero-copy-top);
}

.bio-photo {
  position: absolute;
  top: var(--bio-photo-top);
  left: 50px;
  z-index: 2;
  width: 1820px;
  height: var(--bio-photo-height);
  margin: 0;
  overflow: hidden;
  border-radius: 10px;
  clip-path: inset(0 0 0 0);
  will-change: clip-path;
}

.bio-photo img {
  position: absolute;
  top: -10px;
  left: 0;
  width: 1820px;
  height: 1370px;
  object-fit: cover;
  object-position: center center;
  pointer-events: none;
}

.bio-intro-mark {
  position: absolute;
  top: var(--bio-intro-top);
  left: 50px;
  z-index: 3;
  width: 544px;
  margin: 0;
  font-size: 80px;
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--grey);
  white-space: nowrap;
}

.bio-text {
  position: absolute;
  z-index: 3;
  width: 575px;
  color: var(--grey);
}

.bio-text p {
  margin: 0;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.48px;
}

.bio-text p br,
.bio-quote blockquote br {
  display: none;
}

.bio-text-white {
  color: var(--white);
}

.bio-text-one {
  top: calc(1180px + var(--bio-content-shift));
  left: 50px;
}

.bio-childhood-photo {
  position: absolute;
  top: calc(1396px + var(--bio-content-shift));
  left: 412px;
  z-index: 2;
  width: 889px;
  height: 588px;
  margin: 0;
  overflow: hidden;
  border-radius: 10px;
}

.bio-childhood-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.bio-text-two {
  top: calc(2064px + var(--bio-content-shift));
  left: 991px;
}

.bio-text-three {
  top: calc(2331px + var(--bio-content-shift));
  left: 50px;
}

.bio-skills {
  position: absolute;
  top: calc(2316px + var(--bio-content-shift));
  left: 991px;
  z-index: 3;
  width: 879px;
  color: var(--grey);
}

.bio-skills p {
  margin: 0;
  font-size: 36px;
  font-weight: 400;
  line-height: 2;
  letter-spacing: 0.72px;
  text-transform: uppercase;
}

.bio-skills span {
  color: var(--white);
}

.bio-text-four {
  top: calc(3402px + var(--bio-content-shift));
  left: 412px;
}

.bio-text-five {
  top: calc(3754px + var(--bio-content-shift));
  left: 991px;
}

.bio-logos {
  --bio-logos-reveal: 0;
  position: absolute;
  top: calc(4244px + var(--bio-content-shift));
  left: 50px;
  z-index: 3;
  width: 1820px;
  height: 362px;
  border-radius: 199.5px;
  background: var(--white);
  overflow: hidden;
  opacity: var(--bio-logos-reveal);
  transform: translate3d(0, calc((1 - var(--bio-logos-reveal)) * 76px), 0);
  will-change: transform, opacity;
  transition:
    transform 720ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 560ms cubic-bezier(0.22, 1, 0.36, 1);
}

.bio-logos.is-revealed {
  --bio-logos-reveal: 1;
}

.bio-logos img {
  position: absolute;
  display: block;
  object-fit: contain;
  pointer-events: none;
  opacity: 0;
  transition: opacity 720ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity;
}

.bio-logos .is-logo-revealed {
  opacity: 1;
}

.logo-perception {
  position: absolute;
  top: 60px;
  left: 180px;
  width: 205px;
  height: 77px;
  overflow: hidden;
}

.logo-perception-image {
  position: absolute;
  top: -87.13px;
  left: -23.68px;
  width: 252.35px;
  height: 251.94px;
}

.logo-airalo {
  top: 86.35px;
  left: 450px;
  width: 162.98px;
  height: 48px;
}

.logo-un {
  top: 85.97px;
  left: 684.66px;
  width: 169.88px;
  height: 52px;
}

.logo-seiko {
  top: 99px;
  left: 945px;
  width: 142.18px;
  height: 28px;
}

.logo-logicgate {
  top: 93.39px;
  left: 1163.1px;
  width: 222.18px;
  height: 36px;
}

.logo-pasha {
  top: 79.48px;
  left: 1475.57px;
  width: 164.43px;
  height: 66.58px;
}

.logo-amnis {
  top: 230.88px;
  left: 273px;
  width: 140.6px;
  height: 39.05px;
}

.logo-redhat {
  top: 231.93px;
  left: 494px;
  width: 196.31px;
  height: 46.2px;
}

.logo-usaid {
  top: 226px;
  left: 769.91px;
  width: 183.91px;
  height: 55px;
}

.logo-gonetspeed {
  top: 227px;
  left: 1033.81px;
  width: 236.91px;
  height: 52px;
}

.logo-unibank {
  top: 229.5px;
  left: 1350.73px;
  width: 195.61px;
  height: 47px;
}

.bio-quote {
  position: absolute;
  top: calc(4756px + var(--bio-content-shift));
  left: 245px;
  z-index: 3;
  width: 1365px;
  overflow: visible;
}

.bio-quote-kicker {
  position: relative;
  z-index: 2;
  width: 645px;
  margin: 0 0 8px;
  color: var(--white);
  font-size: 36px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: 0.72px;
}

.bio-quote blockquote {
  position: relative;
  z-index: 1;
  width: 1299px;
  margin: 0 0 0 66px;
  font-family: "Editorial New", serif;
  font-size: 80px;
  font-style: italic;
  font-weight: 200;
  line-height: 1.3;
  letter-spacing: 0.8px;
  color: transparent;
}

[data-bio-reveal-group] {
  --bio-line-idle-color: var(--grey);
  --bio-line-active-color: var(--white);
}

.bio-line {
  --bio-line-progress: 0%;
  --bio-line-reveal: 0;
  position: relative;
  display: block;
  width: fit-content;
  max-width: 100%;
  color: var(--bio-line-idle-color);
  opacity: var(--bio-line-reveal);
  transform: translate3d(0, calc((1 - var(--bio-line-reveal)) * 22px), 0);
  will-change: transform, opacity;
  transition:
    transform 180ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

.bio-line::after {
  content: attr(data-full-text);
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: var(--bio-line-progress);
  overflow: hidden;
  white-space: nowrap;
  color: var(--bio-line-active-color);
  pointer-events: none;
}

.bio-line,
.bio-line * {
  color: inherit !important;
}

[data-bio-reveal-color="static"] .bio-line {
  color: transparent !important;
  overflow: visible;
}

[data-bio-reveal-color="static"] .bio-line::after {
  top: -18px;
  left: -48px;
  width: calc(100% + 96px);
  height: calc(100% + 36px);
  padding: 18px 48px;
  color: transparent;
  background: linear-gradient(
    180deg,
    #2f8cd5 0%,
    #5ab2f0 34%,
    #c4ecff 74%,
    #ecf9ff 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: var(--hero-title-glow);
}

.bio-works-cta {
  position: absolute;
  top: var(--bio-cta-top);
  left: 50px;
  z-index: 3;
  display: flex;
  width: 1820px;
  height: 366px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--grey);
  border-radius: 199.5px;
  color: var(--white);
  opacity: 1;
  font-size: 80px;
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: uppercase;
  transition: border-color 150ms ease-out, background-color 150ms ease-out;
}

.bio-works-cta:hover,
.bio-works-cta:focus-visible {
  background: var(--grey);
  color: var(--white);
  outline: none;
}

.bio-scroll-top {
  position: absolute;
  top: calc(var(--bio-height) - var(--bio-scroll-top-height) - var(--bio-footer-gap));
  left: 869px;
  z-index: 3;
  width: 183px;
  height: 34px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--grey);
  font: inherit;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.48px;
  text-align: center;
  cursor: pointer;
  transition: color 150ms ease-out;
}

.bio-scroll-top:hover,
.bio-scroll-top:focus-visible {
  color: var(--white);
  outline: none;
}

.page-transition-layer {
  position: fixed;
  inset: 0;
  z-index: 1000;
  pointer-events: none;
  overflow: hidden;
}

.page-transition-shell {
  position: absolute;
  top: 0;
  left: 0;
  width: 1920px;
  min-height: 1080px;
  transform: scale(var(--page-scale));
  transform-origin: top left;
  pointer-events: none;
}

.page-transition-layer .transition-ghost {
  position: absolute;
  margin: 0;
  white-space: nowrap;
  transform-origin: top left;
  will-change: transform, opacity, color;
  pointer-events: none;
  opacity: 1;
}

.page-transition-layer .transition-ghost.is-animated {
  transition-property: transform, opacity, color;
  transition-timing-function: var(--transition-easing, ease);
  transition-duration: var(--transition-duration, 300ms);
}

.transition-hey {
  font-family: "Aeonik Pro", sans-serif;
}

.transition-back {
  font-family: "Aeonik Pro", sans-serif;
  text-transform: uppercase;
}

.transition-photo {
  position: fixed;
  z-index: 999;
  margin: 0;
  overflow: hidden;
  border-radius: 10px;
  pointer-events: none;
  will-change: clip-path;
}

.transition-photo img {
  position: absolute;
  top: -10px;
  left: 0;
  width: 1820px;
  height: 1370px;
  object-fit: cover;
  object-position: center center;
  pointer-events: none;
}

.is-shared-transition-hidden {
  opacity: 0 !important;
  visibility: hidden !important;
}

.is-photo-transition-hidden {
  opacity: 0 !important;
}

html.has-pending-bio-entry .bio-photo {
  opacity: 0;
}

@media (max-width: 1279px) and (hover: none) and (pointer: coarse),
  (max-width: 1024px) and (orientation: portrait) {
  :root {
    --hero-bottom-gap: 24px;
    --hero-copy-top: calc(var(--viewport-height-design) - 192px - var(--hero-bottom-gap));
    --hero-title-top: calc(var(--hero-copy-top) - 30px);
    --bio-photo-top: 136px;
    --bio-intro-top: calc(var(--hero-copy-top) - 133px);
    --works-card-width: 875px;
    --works-card-height: 772px;
    --works-thumb-width: 875px;
    --works-thumb-height: 656px;
    --works-left-column: 0px;
    --works-right-column: 945px;
    --works-centered-column: 472px;
    --works-row-step: 1164px;
    --works-stagger: 328px;
    --works-title-top: 686px;
    --works-category-top: 736px;
  }

  html,
  body {
    overflow-x: hidden;
  }

  .page-shell {
    touch-action: none;
  }

  .site-header {
    height: 120px;
  }

  .back-home,
  .nav-link {
    font-size: 30px;
    letter-spacing: 0.6px;
  }

  .main-nav {
    gap: 96px;
  }

  .bio-main-nav {
    top: 0;
    right: 0;
  }

  .intro-mark {
    font-size: 42px;
    letter-spacing: 0.84px;
  }

  .hero-title,
  .bio-hero-title {
    left: 44px;
    font-size: 116px;
  }

  .hero-copy,
  .bio-hero-copy {
    left: 412px;
    width: 1249px;
    font-size: 70px;
  }

  .project-card h2 {
    font-size: 42px;
    letter-spacing: 0.84px;
  }

  .project-card p {
    font-size: 28px;
    letter-spacing: 0.56px;
  }

  .project-card-body {
    transform: none;
    transition: none;
  }

  .project-thumb::before,
  .next-project-cursor,
  .contact-copy-bubble .copy-label-default {
    display: none;
  }

  .contact-copy-bubble {
    width: 220px;
    height: 220px;
  }

  .contact-copy-bubble .copy-label-copied {
    opacity: 1;
    color: var(--white);
    font-size: 36px;
  }

  .contact-email.is-bubble-active {
    cursor: pointer;
  }

  .bio-photo {
    height: var(--bio-photo-height);
  }

  .bio-photo img,
  .transition-photo img {
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 68% center;
  }

  .bio-intro-mark {
    font-size: 90px;
  }

  .bio-text {
    width: 640px;
  }

  .bio-text p,
  .case-flow .work-copy {
    font-size: 28px;
    line-height: 1.32;
    letter-spacing: 0.56px;
  }

  .next-project-preview-page .next-project-preview-intro .work-copy {
    font-size: 18px;
    line-height: 1.22;
    letter-spacing: 0.36px;
  }

  .bio-skills p {
    font-size: 40px;
    line-height: 1.82;
    letter-spacing: 0.8px;
  }

  .bio-works-cta {
    font-size: 86px;
  }

  .bio-scroll-top,
  .case-flow .work-scroll-top {
    font-size: 30px;
    letter-spacing: 0.6px;
  }

  .bio-scroll-top {
    top: calc(var(--bio-cta-top) + var(--bio-tablet-cta-height) + var(--bio-tablet-cta-gap));
    left: 780px;
    width: 360px;
    white-space: nowrap;
  }

  .contact-intro {
    top: calc(var(--viewport-height-design) - 470px);
    font-size: 52px;
    letter-spacing: 1.04px;
  }

  .contact-email {
    top: calc(var(--viewport-height-design) - 406px);
    left: 50px;
    max-width: 1820px;
    transform: none;
    font-size: 116px;
    letter-spacing: 1.16px;
    text-align: left;
  }

  .contact-social-link {
    bottom: 104px;
    font-size: 30px;
    letter-spacing: 0.6px;
  }

  .contact-behance {
    left: 300px;
  }

  .contact-social-link img {
    width: 20px;
    height: 20px;
    margin-top: 8px;
  }

  .case-intro .work-project-title {
    font-size: 92px;
  }

  .case-intro .work-project-type {
    font-size: 88px;
  }

  .work-label,
  .work-role,
  .next-project-eyebrow {
    font-size: 30px;
    letter-spacing: 0.6px;
  }

  .case-copy {
    width: min(var(--copy-w, 700px), 980px);
  }

  .talktocanada-case-copy {
    width: 754px;
  }

  .straudo-logo-design-copy {
    width: 780px;
  }

  .aerosure-primary-copy {
    width: 780px;
  }

  .orkestra-primary-copy {
    width: 780px;
  }

  .bmmb-primary-copy {
    width: 780px;
  }

  .case-triple-grid {
    grid-template-columns: repeat(3, 572px);
  }

  .next-project-link.is-cursor-active {
    cursor: pointer;
  }
}

@media (max-width: 1024px) and (hover: none) and (pointer: coarse),
  (max-width: 1024px) and (orientation: portrait) {
  :root {
    --hero-bottom-gap: 44px;
    --hero-copy-top: calc(var(--viewport-height-design) - 190px - var(--hero-bottom-gap));
    --hero-title-top: calc(var(--hero-copy-top) - 34px);
    --bio-photo-top: 170px;
    --bio-intro-top: calc(var(--tablet-hero-row-top) - 140px);
    --tablet-hero-title-size: 132px;
    --tablet-hero-copy-size: calc(var(--tablet-hero-title-size) * 0.6667);
    --tablet-hero-copy-gap: 38px;
    --tablet-hero-row-top: calc(var(--hero-copy-top) - 96px);
    --tablet-hero-second-gap: 16px;
    --bio-tablet-section-gap: 150px;
    --bio-tablet-text-line: 40.2px;
    --bio-tablet-text-one-height: 161px;
    --bio-tablet-text-two-height: 121px;
    --bio-tablet-skills-height: 961px;
    --bio-tablet-text-four-height: 322px;
    --bio-tablet-text-five-height: 402px;
    --bio-tablet-logo-height: 362px;
    --bio-tablet-quote-height: 405px;
    --bio-tablet-cta-height: 420px;
    --bio-tablet-cta-gap: calc(var(--bio-tablet-section-gap) * 3);
    --bio-tablet-first-copy-top: calc(1180px + var(--bio-content-shift));
    --bio-tablet-photo-top: calc(var(--bio-tablet-first-copy-top) + var(--bio-tablet-text-one-height) + var(--bio-tablet-section-gap));
    --bio-tablet-second-copy-top: calc(var(--bio-tablet-photo-top) + 674px + var(--bio-tablet-section-gap));
    --bio-tablet-skills-top: calc(var(--bio-tablet-second-copy-top) + var(--bio-tablet-text-two-height) + var(--bio-tablet-section-gap));
    --bio-tablet-lower-copy-top: calc(var(--bio-tablet-skills-top) + var(--bio-tablet-skills-height) + var(--bio-tablet-section-gap));
    --bio-tablet-logo-top: calc(var(--bio-tablet-lower-copy-top) + var(--bio-tablet-text-four-height) + var(--bio-tablet-section-gap) + var(--bio-tablet-text-five-height) + var(--bio-tablet-section-gap));
    --bio-tablet-quote-top: calc(var(--bio-tablet-logo-top) + var(--bio-tablet-logo-height) + var(--bio-tablet-section-gap));
    --bio-cta-top: calc(var(--bio-tablet-quote-top) + var(--bio-tablet-quote-height) + var(--bio-tablet-cta-gap));
    --bio-cta-center: calc(var(--bio-cta-top) + (var(--bio-tablet-cta-height) / 2));
    --bio-height: calc(var(--bio-cta-top) + var(--bio-tablet-cta-height) + var(--bio-tablet-cta-gap) + var(--bio-scroll-top-height) + var(--bio-footer-gap));
    --works-card-width: 850px;
    --works-card-height: 780px;
    --works-thumb-width: 850px;
    --works-thumb-height: 638px;
    --works-left-column: 0px;
    --works-right-column: 918px;
    --works-centered-column: 459px;
    --works-row-step: 1180px;
    --works-stagger: 354px;
    --works-title-top: 668px;
    --works-category-top: 722px;
  }

  .main-nav {
    top: 60px;
    gap: 84px;
  }

  .bio-main-nav {
    top: 0;
    right: 0;
  }

  html[data-route="main"] body,
  html[data-route="main"] .route-main {
    min-height: 100vh;
  }

  .back-home,
  .nav-link {
    font-size: 34px;
    letter-spacing: 0.68px;
  }

  .intro-mark {
    font-size: 46px;
    letter-spacing: 0.92px;
  }

  .hero-title,
  .hero-copy,
  .bio-hero-title,
  .bio-hero-copy {
    display: none;
  }

  .tablet-hero-copy {
    position: absolute;
    z-index: 4;
    top: var(--tablet-hero-row-top);
    left: 36px;
    display: block;
    width: 1834px;
    pointer-events: none;
  }

  .tablet-hero-line {
    display: flex;
    align-items: baseline;
    width: 100%;
    gap: var(--tablet-hero-copy-gap);
    white-space: nowrap;
  }

  .tablet-hero-title {
    flex: 0 0 auto;
    margin: -10px -34px -12px 0;
    padding: 10px 34px 12px 0;
    font-family: "Editorial New", serif;
    font-size: var(--tablet-hero-title-size);
    font-style: italic;
    font-weight: 200;
    line-height: 1.2;
    letter-spacing: 0;
    color: transparent;
    background: linear-gradient(180deg, #2f8cd5 0%, #5ab2f0 34%, #c4ecff 74%, #ecf9ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    text-shadow: var(--hero-title-glow);
  }

.tablet-hero-grey,
.tablet-hero-second {
    font-size: var(--tablet-hero-copy-size);
    font-weight: 300;
    line-height: 1;
    letter-spacing: 0;
    color: var(--grey);
  }

  .tablet-hero-grey {
    flex: 1 1 auto;
    min-width: 0;
  }

  .tablet-hero-second {
    margin-top: var(--tablet-hero-second-gap);
    text-align: right;
    white-space: nowrap;
  }

  .bio-hero .tablet-hero-copy {
    top: var(--tablet-hero-row-top);
  }

  .works {
    left: 50px;
    width: 1820px;
  }

  @media (max-width: 800px) and (orientation: portrait) {
    :root {
      --tablet-hero-title-size: 122px;
      --tablet-hero-copy-gap: 32px;
      --tablet-hero-second-gap: 14px;
    }
  }

  .bio-photo {
    left: 50px;
    width: 1820px;
    height: calc(var(--bio-photo-height) - 80px);
  }

  .project-card h2 {
    font-size: 46px;
  }

  .project-card p {
    font-size: 30px;
  }

  .bio-photo img,
  .transition-photo img {
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 100% center;
  }

  .bio-intro-mark {
    left: 50px;
    font-size: 92px;
  }

  .bio-text {
    width: 780px;
  }

  .bio-text p,
  .case-flow .work-copy {
    font-size: 30px;
    line-height: 1.34;
    letter-spacing: 0.6px;
  }

  .talktocanada-case-copy {
    width: 800px;
  }

  .straudo-logo-design-copy {
    width: 780px;
  }

  .aerosure-primary-copy {
    width: 780px;
  }

  .orkestra-primary-copy {
    width: 780px;
  }

  .bmmb-primary-copy {
    width: 820px;
  }

  .next-project-preview-page .next-project-preview-intro .work-copy {
    font-size: 18px;
    line-height: 1.22;
    letter-spacing: 0.36px;
  }

  .bio-text .bio-line,
  .bio-skills .bio-line {
    white-space: nowrap;
  }

  .bio-text-one {
    top: var(--bio-tablet-first-copy-top);
  }

  .bio-childhood-photo {
    top: var(--bio-tablet-photo-top);
    left: 500px;
    width: 1020px;
    height: 674px;
  }

  .bio-text-two {
    top: var(--bio-tablet-second-copy-top);
    left: 900px;
    width: 760px;
  }

  .bio-text-three {
    top: calc(var(--bio-tablet-skills-top) + 15px);
  }

  .bio-skills {
    top: var(--bio-tablet-skills-top);
    left: 900px;
  }

  .bio-skills {
    width: 920px;
  }

  .bio-skills p {
    font-size: 42px;
    line-height: 1.76;
  }

  .bio-logos {
    top: var(--bio-tablet-logo-top);
    height: 362px;
    border-radius: 199.5px;
  }

  .logo-perception { top: 60px; left: 180px; }
  .logo-airalo { top: 86.35px; left: 450px; }
  .logo-un { top: 85.97px; left: 684.66px; }
  .logo-seiko { top: 99px; left: 945px; }
  .logo-logicgate { top: 93.39px; left: 1163.1px; }
  .logo-pasha { top: 79.48px; left: 1475.57px; }
  .logo-amnis { top: 230.88px; left: 273px; }
  .logo-redhat { top: 231.93px; left: 494px; }
  .logo-usaid { top: 226px; left: 769.91px; }
  .logo-gonetspeed { top: 227px; left: 1033.81px; }
  .logo-unibank { top: 229.5px; left: 1350.73px; }

  .bio-text-four {
    top: var(--bio-tablet-lower-copy-top);
    left: 260px;
    width: 700px;
  }

  .bio-text-five {
    top: calc(var(--bio-tablet-lower-copy-top) + var(--bio-tablet-text-four-height) + var(--bio-tablet-section-gap));
    left: 1110px;
    width: 700px;
  }

  .bio-quote {
    top: var(--bio-tablet-quote-top);
    left: 160px;
    width: 1600px;
  }

  .bio-quote-kicker {
    width: 1020px;
    font-size: 40px;
    white-space: nowrap;
  }

  .bio-quote blockquote {
    width: 1480px;
    font-size: 90px;
  }

  .bio-works-cta {
    height: 420px;
    font-size: 92px;
    border-radius: 220px;
  }

  .contact-intro {
    top: calc(var(--viewport-height-design) - 520px);
    font-size: 62px;
  }

  .contact-email {
    top: calc(var(--viewport-height-design) - 440px);
    font-size: 124px;
  }

  .contact-social-link {
    bottom: 135px;
    font-size: 34px;
  }

  .contact-behance {
    left: 330px;
  }

  .case-intro {
    padding-top: 250px;
  }

  .case-intro .work-project-type {
    top: 250px;
  }

  .case-intro .work-label,
  .case-intro .work-role {
    top: 395px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bio-photo,
  .bio-back-home,
  .bio-works-cta,
  .bio-scroll-top {
    transition: none;
  }
}

@media (max-width: 767px) {
  html,
  body {
    width: 100%;
    height: 100dvh;
    min-height: 100dvh;
    max-height: 100dvh;
    overflow: hidden !important;
    overscroll-behavior: none;
    touch-action: none;
    background: #0f0f0f;
  }

  html {
    --mobile-desktop-message-left: 40px;
    --mobile-desktop-message-width: min(258px, calc(100vw - (var(--mobile-desktop-message-left) * 2)));
  }

  body > * {
    display: none !important;
  }

  body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 2147483645;
    display: block;
    background: #0f0f0f;
  }

  html::before,
  html::after {
    position: fixed;
    z-index: 2147483646;
    display: block;
    font-family: "Aeonik Pro", sans-serif;
    font-size: 23px;
    font-style: normal;
    font-weight: 300;
    letter-spacing: 0.46px;
    pointer-events: none;
  }

  html::before {
    content: "Hey! I am Parviz";
    top: calc(50dvh - 97px);
    left: var(--mobile-desktop-message-left);
    line-height: normal;
    color: #76b9ef;
    white-space: nowrap;
  }

  html::after {
    content: "Please check out my website on your desktop for the best experience.";
    top: calc(50dvh - 61px);
    left: var(--mobile-desktop-message-left);
    width: var(--mobile-desktop-message-width);
    line-height: 1.2;
    color: #777d83;
    white-space: normal;
  }
}