:root {
  --canvas-width: 1920px;
  --canvas-height: 6359px;
  --bg: #20323f;
  --cyan: #55e3ff;
  --mint: #19fb9b;
  --ink: #464a75;
  --card-pink: #e8bbb6;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--bg);
}

body {
  color: var(--ink);
  font-family: "Jersey 10", monospace;
  overflow-x: hidden;
}

img {
  display: block;
  max-width: none;
}

.site {
  width: 100%;
  min-height: 100vh;
}

.canvas-shell {
  --scale: min(1, calc((100vw - 16px) / var(--canvas-width)));
  height: calc(var(--canvas-height) * var(--scale));
  position: relative;
  width: 100%;
}

.canvas {
  background: var(--bg);
  height: var(--canvas-height);
  left: 50%;
  overflow: hidden;
  position: absolute;
  top: 0;
  transform: translateX(-50%) scale(var(--scale));
  transform-origin: top center;
  width: var(--canvas-width);
}

@supports (zoom: 1) {
  .canvas {
    transform: translateX(-50%);
    zoom: var(--scale);
  }
}

.pixel-gradient {
  height: 1145px;
  image-rendering: pixelated;
  left: 0;
  pointer-events: none;
  position: absolute;
  width: 1920px;
}

.pixel-gradient--top {
  top: 1195px;
}

.pixel-gradient--mirrored {
  background: #28a7cd;
  top: -823px;
  transform: rotate(180deg);
}

.brand-logo {
  height: 95px;
  left: 50%;
  position: absolute;
  top: 99px;
  transform: translateX(-50%);
  width: 637.292px;
}

.hero-visual {
  height: 1080px;
  image-rendering: pixelated;
  left: 50%;
  pointer-events: none;
  position: absolute;
  top: 312px;
  transform: translateX(-50%);
  width: 1920px;
}

.headline-block {
  left: 428px;
  position: absolute;
  top: 2085px;
  width: 1063px;
  z-index: 2;
}

.headline-block h1 {
  color: var(--mint);
  font-family: "Jersey 20", "Jersey 10", monospace;
  font-size: 84px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1;
  margin: 0;
  white-space: nowrap;
}

.logo-banner {
  align-items: center;
  display: flex;
  height: 39.337px;
  justify-content: space-between;
  padding: 0 20px;
  position: relative;
  width: 100%;
  z-index: 2;
}

.logo-banner img {
  image-rendering: pixelated;
}

.logo-banner img:nth-child(1) {
  height: 39.337px;
  width: 157px;
}

.logo-banner img:nth-child(2) {
  height: 22.882px;
  width: 153.979px;
}

.logo-banner img:nth-child(3) {
  height: 23.811px;
  width: 126.993px;
}

.logo-banner img:nth-child(4) {
  height: 25.101px;
  width: 99.213px;
}

.logo-banner img:nth-child(5) {
  height: 24.838px;
  width: 120.643px;
}

.logo-banner img:nth-child(6) {
  height: 27px;
  width: 120px;
}

.founder-card {
  align-items: center;
  clip-path: inset(-220px 0 0 0);
  display: flex;
  gap: 13px;
  height: 390.883px;
  isolation: isolate;
  left: 362px;
  overflow: visible;
  padding: 93px 204px 171px 76px;
  position: absolute;
  top: 2287px;
  width: 1196px;
}

.founder-card__bg {
  display: none;
}

.founder-card::before {
  background: #ec796b;
  clip-path: polygon(
    65.284px 0px,
    1130.716px 0px,
    1130.716px 16.287px,
    1147.037px 16.287px,
    1147.037px 32.574px,
    1163.358px 32.574px,
    1163.358px 48.86px,
    1179.679px 48.86px,
    1179.679px 65.147px,
    1196px 65.147px,
    1196px 325.736px,
    1179.679px 325.736px,
    1179.679px 342.023px,
    1163.358px 342.023px,
    1163.358px 358.309px,
    1147.037px 358.309px,
    1147.037px 374.596px,
    1130.716px 374.596px,
    1130.716px 390.883px,
    65.284px 390.883px,
    65.284px 374.596px,
    48.963px 374.596px,
    48.963px 358.309px,
    32.642px 358.309px,
    32.642px 342.023px,
    16.321px 342.023px,
    16.321px 325.736px,
    0px 325.736px,
    0px 65.147px,
    16.321px 65.147px,
    16.321px 48.86px,
    32.642px 48.86px,
    32.642px 32.574px,
    48.963px 32.574px,
    48.963px 16.287px,
    65.284px 16.287px
  );
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: -2;
}

.founder-card::after {
  background: #f9c9c3;
  clip-path: polygon(
    65.284px 16.287px,
    1130.716px 16.287px,
    1130.716px 32.574px,
    1147.037px 32.574px,
    1147.037px 48.86px,
    1163.358px 48.86px,
    1163.358px 65.147px,
    1179.679px 65.147px,
    1179.679px 325.736px,
    1163.358px 325.736px,
    1163.358px 342.023px,
    1147.037px 342.023px,
    1147.037px 358.309px,
    1130.716px 358.309px,
    1130.716px 374.596px,
    65.284px 374.596px,
    65.284px 358.309px,
    48.963px 358.309px,
    48.963px 342.023px,
    32.642px 342.023px,
    32.642px 325.736px,
    16.321px 325.736px,
    16.321px 65.147px,
    32.642px 65.147px,
    32.642px 48.86px,
    48.963px 48.86px,
    48.963px 32.574px,
    65.284px 32.574px
  );
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: -1;
}

.founder-card__art {
  flex-shrink: 0;
  height: 432px;
  overflow: visible;
  position: relative;
  width: 547px;
  z-index: 2;
}

.founder-card__art img {
  height: 182.36%;
  left: 0;
  position: absolute;
  top: -30.37%;
  width: 100%;
}

.founder-card__list {
  color: #20323f;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  font-size: 48px;
  height: 373px;
  justify-content: flex-end;
  letter-spacing: -0.96px;
  line-height: normal;
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: left;
  white-space: nowrap;
  width: 446px;
  z-index: 1;
}

.founder-card__list li {
  margin: 0;
}

.section-title {
  color: var(--cyan);
  font-family: "Jersey 20", "Jersey 10", monospace;
  font-size: 84px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1;
  margin: 0;
  position: absolute;
  text-align: right;
}

.section-title--case {
  left: 751px;
  top: 2842.883px;
  width: 418px;
}

.section-title--work {
  left: 758px;
  top: 3561.883px;
  width: 411px;
}

.carousel-window {
  height: 385px;
  left: 0;
  overflow: hidden;
  position: absolute;
  width: 1920px;
}

.carousel-window--case {
  top: 3011.883px;
}

.carousel-window--work {
  top: 3730.883px;
}

.carousel-track {
  display: flex;
  gap: 35px;
  will-change: transform;
  width: max-content;
}

.carousel-set {
  display: flex;
  gap: 35px;
}

.case-card,
.work-card {
  align-items: center;
  display: flex;
  flex-shrink: 0;
  gap: 50px;
  height: 385px;
  isolation: isolate;
  overflow: hidden;
  padding: 76px;
  position: relative;
  width: 1178px;
}

.case-card__bg,
.work-card__bg {
  display: none;
}

.case-card::before,
.work-card::before {
  background: #ec796b;
  clip-path: polygon(
    64px 0px,
    1114px 0px,
    1114px 16px,
    1130px 16px,
    1130px 32px,
    1146px 32px,
    1146px 48px,
    1162px 48px,
    1162px 64px,
    1178px 64px,
    1178px 321px,
    1162px 321px,
    1162px 337px,
    1146px 337px,
    1146px 353px,
    1130px 353px,
    1130px 369px,
    1114px 369px,
    1114px 385px,
    64px 385px,
    64px 369px,
    48px 369px,
    48px 353px,
    32px 353px,
    32px 337px,
    16px 337px,
    16px 321px,
    0px 321px,
    0px 64px,
    16px 64px,
    16px 48px,
    32px 48px,
    32px 32px,
    48px 32px,
    48px 16px,
    64px 16px
  );
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: -2;
}

.case-card::after,
.work-card::after {
  background: #f9c9c3;
  clip-path: polygon(
    64px 16px,
    1114px 16px,
    1114px 32px,
    1130px 32px,
    1130px 48px,
    1146px 48px,
    1146px 64px,
    1162px 64px,
    1162px 321px,
    1146px 321px,
    1146px 337px,
    1130px 337px,
    1130px 353px,
    1114px 353px,
    1114px 369px,
    64px 369px,
    64px 353px,
    48px 353px,
    48px 337px,
    32px 337px,
    32px 321px,
    16px 321px,
    16px 64px,
    32px 64px,
    32px 48px,
    48px 48px,
    48px 32px,
    64px 32px
  );
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: -1;
}

.case-card__media {
  background: #707070;
  height: 233px;
  position: relative;
  width: 233px;
  z-index: 1;
}

.case-card__copy,
.work-card__copy {
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: 13px;
  position: relative;
  z-index: 1;
}

.case-card__copy h3 {
  font-family: "Jersey 10", monospace;
  font-size: 64px;
  font-weight: 400;
  letter-spacing: -1.28px;
  line-height: 1;
  margin: 0;
  white-space: nowrap;
}

.case-card__copy p,
.work-card__copy p {
  font-family: "Jersey 10", monospace;
  font-size: 48px;
  font-weight: 400;
  letter-spacing: -0.96px;
  line-height: 1;
  margin: 0;
  white-space: nowrap;
}

.case-card__tags {
  align-items: center;
  display: flex;
  font-size: 20px;
  gap: 15px;
  letter-spacing: -0.4px;
  line-height: 1;
}

.case-card__tags span {
  background: var(--ink);
  border-radius: 50%;
  height: 12px;
  width: 12px;
}

.work-card__media {
  height: 333px;
  object-fit: cover;
  position: relative;
  width: 333px;
  z-index: 1;
}

.work-card__copy h3 {
  font-family: "Jersey 10", monospace;
  font-size: 48px;
  font-weight: 400;
  letter-spacing: -0.96px;
  line-height: 1;
  margin: 0;
  white-space: nowrap;
}

.work-card--managed-team .work-card__media {
  height: 333px;
  width: 332px;
}

.work-card--commercial-agile .work-card__media {
  height: 349px;
  width: 348px;
}

.work-card--end-to-end .work-card__media {
  height: 333px;
  width: 333px;
}

.ticker-window {
  height: 39px;
  left: 0;
  overflow: hidden;
  position: absolute;
  top: 4280.883px;
  width: 1920px;
}

.ticker-track {
  align-items: center;
  color: #19fb9b;
  display: flex;
  font-size: 32px;
  gap: 15px;
  left: -937px;
  letter-spacing: -0.64px;
  line-height: 1;
  position: absolute;
  top: 0;
  white-space: nowrap;
}

.ticker-dot {
  background: #ff1f8f;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
  height: 12px;
  width: 12px;
}

.ownership-card {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 13px;
  height: 385px;
  isolation: isolate;
  justify-content: center;
  left: 357px;
  overflow: hidden;
  padding: 76px;
  position: absolute;
  top: 4555px;
  width: 1254px;
}

.ownership-card__bg {
  display: none;
}

.ownership-card::before {
  background: #43b4ca;
  clip-path: polygon(
    64.301px 0px,
    1190px 0px,
    1190px 16.042px,
    1206.075px 16.042px,
    1206.075px 32.083px,
    1222.15px 32.083px,
    1222.15px 48.125px,
    1238.225px 48.125px,
    1238.225px 64.167px,
    1254.3px 64.167px,
    1254.3px 320.833px,
    1238.225px 320.833px,
    1238.225px 336.875px,
    1222.15px 336.875px,
    1222.15px 352.917px,
    1206.075px 352.917px,
    1206.075px 368.958px,
    1190px 368.958px,
    1190px 385px,
    64.301px 385px,
    64.301px 368.958px,
    48.226px 368.958px,
    48.226px 352.917px,
    32.151px 352.917px,
    32.151px 336.875px,
    16.075px 336.875px,
    16.075px 320.833px,
    0px 320.833px,
    0px 64.167px,
    16.075px 64.167px,
    16.075px 48.125px,
    32.151px 48.125px,
    32.151px 32.083px,
    48.226px 32.083px,
    48.226px 16.042px,
    64.301px 16.042px
  );
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: -2;
}

.ownership-card::after {
  background: #bbf4ff;
  clip-path: polygon(
    64.301px 16.042px,
    1190px 16.042px,
    1190px 32.083px,
    1206.075px 32.083px,
    1206.075px 48.125px,
    1222.15px 48.125px,
    1222.15px 64.167px,
    1238.225px 64.167px,
    1238.225px 320.833px,
    1222.15px 320.833px,
    1222.15px 336.875px,
    1206.075px 336.875px,
    1206.075px 352.917px,
    1190px 352.917px,
    1190px 368.958px,
    64.301px 368.958px,
    64.301px 352.917px,
    48.226px 352.917px,
    48.226px 336.875px,
    32.151px 336.875px,
    32.151px 320.833px,
    16.075px 320.833px,
    16.075px 64.167px,
    32.151px 64.167px,
    32.151px 48.125px,
    48.226px 48.125px,
    48.226px 32.083px,
    64.301px 32.083px
  );
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: -1;
}

.ownership-card h3 {
  color: var(--ink);
  font-family: "Jersey 10", monospace;
  font-size: 64px;
  font-weight: normal;
  letter-spacing: 0.02em;
  line-height: normal;
  margin: 0;
  position: relative;
  z-index: 1;
}

.ownership-card p {
  color: var(--ink);
  font-family: "Jersey 10", monospace;
  font-size: 48px;
  font-weight: normal;
  letter-spacing: 0.02em;
  line-height: normal;
  margin: 0;
  position: relative;
  text-align: justify;
  text-justify: inter-word;
  text-align-last: auto;
  white-space: normal;
  width: 100%;
  z-index: 1;
}

.contact-links {
  display: flex;
  gap: 13.649px;
  left: 50%;
  position: absolute;
  top: 5154.12px;
  transform: translateX(-50%);
}

.contact-link {
  color: #fff;
  display: flex;
  font-family: "Jersey 10", monospace;
  font-size: 43.678px;
  height: 59.776px;
  letter-spacing: -0.8736px;
  line-height: 1;
  position: relative;
  text-decoration: none;
  width: 182.9px;
}

.contact-link img {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.contact-link span {
  position: absolute;
  top: 6.82px;
  z-index: 1;
}

.contact-link:nth-child(1) span {
  left: 25.93px;
}

.contact-link:nth-child(2) span {
  left: 54.6px;
}

.contact-link:nth-child(3) span {
  left: 81.9px;
}

.copyright {
  color: #fff;
  font-family: "Jersey 10", monospace;
  font-size: 32px;
  left: 50%;
  letter-spacing: -0.64px;
  line-height: 1;
  margin: 0;
  position: absolute;
  top: 5277.89px;
  transform: translate(-50%, -100%);
  white-space: nowrap;
}