@charset "UTF-8";
/* 00_base */
/* 1. Use a more-intuitive box-sizing model */
*, *::before, *::after {
  box-sizing: border-box;
}

/* 2. Remove default margin */
* {
  margin: 0;
}

/* 3. Enable keyword animations */
@media (prefers-reduced-motion: no-preference) {
  html {
    interpolate-size: allow-keywords;
  }
}
body {
  /* 4. Add accessible line-height */
  line-height: 1.5;
  /* 5. Improve text rendering */
  -webkit-font-smoothing: antialiased;
}

/* 6. Improve media defaults */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

/* 7. Inherit fonts for form controls */
input, button, textarea, select {
  font: inherit;
}

/* 8. Avoid text overflows */
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/* 9. Improve line wrapping */
p {
  text-wrap: pretty;
}

h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

/*
  10. Create a root stacking context
*/
#root, #__next {
  isolation: isolate;
}

:root {
  /* 
     =====================================
     COLORS VARIABLES 
     =====================================
     */
  --c-accent: var(--aqua-400);
  --c-fg: var(--neutral-0);
  --c-bg: var(--black-800);
  /* Colors  */
  --neutral-0: #ffffff;
  --neutral-015: #ffffff0d;
  --black-600: #3a313f;
  --black-800: #221d25;
  --violet-200: #babdf2;
  --violet-400: color-mix(in srgb, var(--violet-500) 50%, white);
  --violet-500: #5300c7;
  --violet-700: #310076;
  --pink-400: #cc0be5;
  --blue-800: #0013c2;
  --aqua-400: #0de1b0;
  --green-200: #e8edbb;
  --green-500: #cce10e;
  --green-700: hsla(66, 94%, 35%, 1);
  /* 
     =====================================
     LAYOUT VARIABLES 
     =====================================
     */
  /* Grid / layout */
  --offsetPage: 3vw;
  --gridCols: 12;
  --gap: 1em;
  /* Functional grid properties */
  --gridGap: calc((var(--gridCols) - 1) * var(--gap) / var(--gridCols));
  --colWidthNoGap: calc((100vw - (2 * var(--offsetPage))) / var(--gridCols) - (var(--gridGap)));
  --colWidth: calc((100vw - (2 * var(--offsetPage))) / var(--gridCols) + (var(--gap) - var(--gridGap)));
  /* 
     =====================================
     SPACING VARIABLES 
     =====================================
     */
  /* Spacing scale */
  --baseSpacing: 3vmax;
  --baseMultiplier: 1.2;
  /* From tightest (-5xs) up to largest (5xl) */
  --space-m: calc(var(--baseSpacing) * 1);
  --space-s: calc(var(--space-m) / var(--baseMultiplier));
  --space-xs: calc(var(--space-s) / var(--baseMultiplier));
  --space-2xs: calc(var(--space-xs) / var(--baseMultiplier));
  --space-3xs: calc(var(--space-2xs) / var(--baseMultiplier));
  --space-4xs: calc(var(--space-3xs) / var(--baseMultiplier));
  --space-5xs: calc(var(--space-4xs) / var(--baseMultiplier));
  --space-l: calc(var(--space-m) * var(--baseMultiplier));
  --space-xl: calc(var(--space-l) * var(--baseMultiplier));
  --space-2xl: calc(var(--space-xl) * var(--baseMultiplier));
  --space-3xl: calc(var(--space-2xl) * var(--baseMultiplier));
  --space-4xl: calc(var(--space-3xl) * var(--baseMultiplier));
  --space-5xl: calc(var(--space-4xl) * var(--baseMultiplier));
  /* 
     =====================================
     TYPE VARIABLES 
     =====================================
     */
  --lh: 1.25;
  --lh-body: 1.4;
  --fw-body: 400;
  --f-root-size: 100%;
  /* Font families */
  --f-tiphares: 'Tiphares';
  --f-tiphares-soft: 'Tiphares Soft';
  /* Font family usage */
  --f-hero: var(--f-tiphares);
  --f-title: var(--f-tiphares-soft);
  --f-body: var(--f-tiphares-soft);
  /* Type scale base unit */
  --unit: 1rem;
  /* Type scales available (musical / ratio presets) */
  --minorSecond: 1.067;
  --majorSecond: 1.125;
  --minorThird: 1.2;
  --majorThird: 1.25;
  --perfectFourth: 1.3334;
  --augmentedFourth: 1.414;
  --perfectFifth: 1.5;
  --goldenRatio: 1.618;
  --majorSixth: 1.667;
  --minorSeventh: 1.778;
  --majorSeventh: 1.875;
  --octave: 2;
  --majorTenth: 2.5;
  --majorEleventh: 2.667;
  --majorTwelfth: 3;
  --pi: 3.1416;
  /* Scale configuration (active scale selection) */
  --scale: var(--minorThird);
  /* Generated scale steps */
  --scale-3: calc(var(--scale-2) / var(--scale));
  --scale-2: calc(var(--scale-1) / var(--scale));
  --scale-1: calc(var(--scale0) / var(--scale));
  --scale0: calc(1 * var(--unit));
  --scale1: calc(var(--scale0) * var(--scale));
  --scale2: calc(var(--scale1) * var(--scale));
  --scale3: calc(var(--scale2) * var(--scale));
  --scale4: calc(var(--scale3) * var(--scale));
  --scale5: calc(var(--scale4) * var(--scale));
  --scale6: calc(var(--scale5) * var(--scale));
  --scale7: calc(var(--scale6) * var(--scale));
  --scale8: calc(var(--scale7) * var(--scale));
  --scale9: calc(var(--scale8) * var(--scale));
  --scale10: calc(var(--scale9) * var(--scale));
  --scale11: calc(var(--scale10) * var(--scale));
  --scale12: calc(var(--scale11) * var(--scale));
  --scale13: calc(var(--scale12) * var(--scale));
  --scale14: calc(var(--scale13) * var(--scale));
  --scale15: calc(var(--scale14) * var(--scale));
  --scale16: calc(var(--scale15) * var(--scale));
  --growHero: 10vw;
  --growTitle: 7vw;
  --growBody: 2vw;
  --f-min: var(--scale0);
  --f-max: var(--scale1);
  /* Transitions  */
  --transition: all ease-in-out .3s;
  --transition-slow: all ease-in-out .6s;
}
@media screen and (max-width: 62.4375rem) {
  :root {
    --growHero: 8vw;
    --growTitle: 5vw;
    --growBody: 1vw;
  }
}

/* Grid element definition */
.grid {
  display: grid;
  grid-gap: var(--gridGap);
  grid-template-columns: repeat(var(--gridCols), 1fr);
  align-items: baseline;
}
.grid > * {
  grid-column: var(--colStart, 1)/var(--colEnd, -1);
}

html {
  font-size: var(--f-root-size);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-size: 1rem;
  font-family: var(--f-main);
  line-height: var(--lh-body);
  font-weight: var(--fw-body);
  --fluidGrow: var(--growBody);
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
li,
dt,
dd,
blockquote,
label,
span,
input,
button,
figcaption,
a {
  font-size: clamp(var(--f-min, 1rem), var(--f-fluid, var(--f-min)) + var(--fluidGrow, 1vw), var(--f-max, 1.1rem));
  line-height: var(--lh);
}

p {
  max-width: 120ch;
}

/* Type scale — Largest ➜ smallest*/
.t-hero {
  font-family: var(--f-hero);
  --f-min: var(--scale1);
  --f-max: var(--scale12);
  --fluidGrow: var(--growHero);
  --lh: .8;
}

.t-title {
  font-family: var(--f-title);
  font-weight: 300;
  --f-min: var(--scale0);
  --f-max: var(--scale9);
  --fluidGrow: var(--growTitle);
  --lh: .95;
  max-width: 20ch;
  text-align: var(--align);
}

.t-title-small {
  font-family: var(--f-title);
  font-weight: 300;
  --f-min: var(--scale0);
  --f-max: var(--scale8);
  --fluidGrow: var(--growTitle);
  --lh: .95;
}

.t-title-extra-small {
  font-family: var(--f-title);
  font-weight: 900;
  --f-min: var(--scale1);
  --f-max: var(--scale6);
  --fluidGrow: var(--growBody);
  --lh: .95;
}

.t-eyebrow {
  --f-min: var(--scale0);
  --f-max: var(--scale1);
  --fluidGrow: var(--growBody);
  text-transform: uppercase;
  font-weight: 700;
  --lh: 1.2;
  color: var(--c-eyebrow, currentColor);
}

.t-body--big {
  font-weight: 700;
  --lh: 1.2;
}

.txt--body {
  --f-min: var(--scale0);
  --f-max: var(--scale1);
  --fluidGrow: var(--growBody);
  text-align: var(--align);
}

.t-body-small {
  --f-min: var(--scale-1);
  --f-max: var(--scale0);
  --fluidGrow: var(--growBody);
  --lh: 1.3;
}

.t-caption {
  --f-min: var(--scale-1);
  --f-max: var(--scale0);
  --fluidGrow: 0.2vw;
  --lh: 1.15;
}

.text-box {
  margin-top: var(--space-2xl);
}
.text-box p {
  max-width: 65ch;
  --lh: 1.4;
}
.text-box * + * {
  margin-top: 1em;
}

/* Font faces calling */
@font-face {
  font-family: "Tiphares";
  src: url("./fonts/Tiphares-Black.subset.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Tiphares Soft";
  src: url("./fonts/TipharesSoft-Light.subset.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Tiphares Soft";
  src: url("./fonts/TipharesSoft-Regular.subset.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Tiphares Soft";
  src: url("./fonts/TipharesSoft-Bold.subset.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Tiphares Soft";
  src: url("./fonts/TipharesSoft-Black.subset.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
body {
  font-family: "Tiphares Soft";
  font-weight: 400;
  --f-min: var(--scale-1);
  --f-max: var(--scale1);
  --fluidGrow: var(--growBody);
  color: var(--c-fg);
  line-height: var(--lh, 1.6);
}

header,
footer {
  padding-left: var(--offsetPage);
  padding-right: var(--offsetPage);
}

/* 01_elements */
.e-cta {
  padding: var(--space-5xs) var(--space-m);
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  line-height: 1;
  text-decoration: none;
  color: inherit;
  color: var(--cta-color, var(--black-800));
  background-color: color-mix(in srgb, var(--cta-bg, var(--c-accent)) 80%, black);
  white-space: nowrap;
  position: relative;
  z-index: 2;
  transition: background-color 0.3s ease-out, color 0.3s ease-out;
}

.cta--button {
  position: relative;
  display: block;
  padding: 1px;
}
.cta--button::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: opacity 0.3s ease-out;
  background-image: conic-gradient(from var(--border-angle-1) at 10% 15%, transparent, var(--aqua-400) 10%, transparent 30%, transparent), conic-gradient(from var(--border-angle-2) at 70% 60%, transparent, var(--blue-800) 10%, transparent 60%, transparent), conic-gradient(from var(--border-angle-3) at 50% 20%, var(--violet-500), var(--pink-400) 10%, var(--pink-400) 50%, var(--violet-500));
  animation: rotateBackground 3s linear infinite, rotateBackground2 8s linear infinite, rotateBackground3 13s linear infinite;
  opacity: var(--cta-op, 0);
}
.cta--button:focus-within, .cta--button:hover {
  --cta-op: 1;
  --cta-bg: var(--black-800);
  --cta-color: var(--neutral-0);
}

/* The secret sauce that enables gradient rotation. NOTE: does not work in all browsers. https://caniuse.com/?search=%40property */
@property --border-angle-1 {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0deg;
}
@property --border-angle-2 {
  syntax: "<angle>";
  inherits: true;
  initial-value: 90deg;
}
@property --border-angle-3 {
  syntax: "<angle>";
  inherits: true;
  initial-value: 180deg;
}
@keyframes rotateBackground {
  to {
    --border-angle-1: 360deg;
  }
}
@keyframes rotateBackground2 {
  to {
    --border-angle-2: -270deg;
  }
}
@keyframes rotateBackground3 {
  to {
    --border-angle-3: 540deg;
  }
}
[data-anim=title-mask] {
  opacity: 0;
}

[data-anim=title-mask] .animation-line {
  position: relative;
  z-index: 1;
}
[data-anim=title-mask] .animation-line::before, [data-anim=title-mask] .animation-line::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--violet-700);
  z-index: -1;
  transform: scaleY(var(--titleRect, 1));
  transition: transform 0.8s 0.1s cubic-bezier(0.22, 1, 0.36, 1);
  transform-origin: 0 0;
}
[data-anim=title-mask] .animation-line::after {
  background-color: var(--c-accent);
  transition-delay: 0.5s;
  z-index: -2;
}
[data-anim=title-mask] .animation-line.rect--animating {
  --titleRect: 0;
}

[data-anim=title-mask--right],
.animation-word-mask,
.animation-word,
.animation-line,
.animation-line-mask,
.animation-char,
.animation-char-mask {
  padding-bottom: 0.3em;
  margin-bottom: -0.3em;
}

.animation-word {
  position: relative;
}

.animation-char-mask,
.animation-char {
  text-indent: 0;
}

.rectangle {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 0;
  overflow: clip;
}

.rectangle div {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-color: var(--c-accent);
}

[data-anim=title-tile] .animation-char {
  position: relative;
}
[data-anim=title-tile] .animation-char::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--bg, var(--c-accent));
  transform: scale(var(--scaleX, 1), var(--scaleY, 1));
  transform-origin: 100% 0%;
  transition: transform 0.8s 0s ease-out;
}

[data-anim=title-mask--right] {
  width: max-content;
  max-width: var(--mx, 25ch);
}
[data-anim=title-mask--right] .animation-line-mask {
  clip-path: inset(0% 100% 0% 0%);
  position: relative;
}
[data-anim=title-mask--right] .animation-line-mask::before, [data-anim=title-mask--right] .animation-line-mask::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--maskBeforeColor, var(--c-accent));
  transform-origin: 100% 100%;
  transform: scaleX(var(--titleMask, 1));
}
[data-anim=title-mask--right] .animation-line-mask::before {
  transform: scaleX(var(--maskBeforeX, 1));
}
[data-anim=title-mask--right] .animation-line-mask::after {
  transform: scaleX(var(--maskAfterX, 1));
  background-color: var(--maskAfterColor, var(--violet-500));
  transition-delay: 0s;
}

body {
  background-color: var(--black-800);
}
body[data-theme=dark] {
  --c: var(--neutral-0);
}

main {
  position: relative;
}
main::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: var(--black-800);
  z-index: 0;
}

[data-anim=lined-el] {
  --border: color-mix(in srgb, currentColor 20%, transparent);
}
[data-anim=lined-el] span {
  display: inline-block;
}
[data-anim=lined-el] li {
  position: relative;
  overflow: hidden;
}
[data-anim=lined-el] li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: var(--border);
  transform: scaleX(var(--borderScaleX, 0));
  transform-origin: 0 0%;
}
[data-anim=lined-el] li:last-child::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: var(--border);
  transform: scaleX(var(--borderScaleX, 0));
  transform-origin: 0 0%;
}
[data-anim=lined-el] li li:last-child {
  border-bottom: var(--border);
}

[data-us-project],
[data-us-project] canvas {
  width: 100% !important;
  height: 100dvh !important;
  object-fit: cover;
  mix-blend-mode: var(--blend-mode);
  background-color: var(--bg-canvas);
  clip-path: var(--clip-path);
}

/* 02_components */
.c-text {
  min-height: 100vh;
  padding: calc(var(--space-5xl) * 2) var(--offsetPage);
  display: flex;
  align-items: center;
  flex-direction: column;
}

.c-text.bg-violet {
  background-color: var(--violet-500);
  color: var(--neutral-0);
}

.c-text.bg-violet-light {
  background-color: var(--violet-200);
  color: var(--black-800);
}

.c-text.bg-black {
  background-color: var(--black-800);
  color: var(--neutral-0);
}

.c-text--content {
  display: grid;
  gap: calc(var(--gridGap));
  width: 100%;
  position: relative;
  z-index: 1;
}

.c-text--content-header {
  display: flex;
  flex-direction: column;
  gap: var(--gridGap);
  align-items: var(--align-items);
}

.c-text--content-text {
  margin-top: var(--block-margin, var(--space-m));
}
.c-text--content-text p {
  max-width: var(--mw, 50ch);
}

.c-text--content--list {
  padding: 0;
  margin: var(--space-xl) 0 var(--space-3xl);
  list-style-type: none;
  --f-max: var(--scale0);
}
.c-text--content--list li {
  padding: var(--space-3xs) 0;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: calc(var(--gridGap) * 0.5);
}
@media screen and (max-width: 37.4375rem) {
  .c-text--content--list li {
    flex-direction: column-reverse;
  }
  .c-text--content--list li span:not(:only-child):last-of-type {
    opacity: 0.65;
  }
}

#yourFoundry .c-text--content-header .t-title {
  text-align: center;
}
#yourFoundry .c-text--content-text p {
  --colStart: 1;
  --colEnd: 6;
}

.highlight-wrapper a {
  color: inherit;
}
.highlight-wrapper * + * {
  margin-top: 1rem;
}
.highlight-wrapper p:first-child {
  --bg-high: var(--green-500);
}
.highlight-wrapper p:last-child {
  --bg-high: var(--green-200);
}

#about .c-text--content-header {
  color: var(--violet-500);
}
#about .c-text--content-header .t-eyebrow {
  color: var(--neutral-0);
}
#about .c-text--content-text {
  grid-row-gap: var(--space-5xl);
}
#about .highlight-wrapper {
  --colStart: 1;
  --colEnd: 6;
  grid-row: 1;
}
#about .t-body {
  --colStart: 8;
  --colEnd: 13;
  grid-row: 2;
}
#about .t-body p {
  --colStart: 1;
  --colEnd: -1;
}

@media screen and (max-width: 62.4375rem) {
  .c-text {
    min-height: auto;
    padding: calc(var(--space-2xl) * 2) var(--offsetPage);
  }
  .c-text .t-title br,
  .c-text .t-title-small br {
    display: none;
  }
  .c-text--content {
    gap: var(--space-m);
  }
  #yourFoundry .c-text--content-header,
  #yourFoundry .c-text--content-header .t-title,
  #howItWorks .c-text--content-header,
  #howItWorks .c-text--content-header .t-title {
    text-align: left;
  }
  #yourFoundry .c-text--content-text p {
    --colStart: 1;
    --colEnd: 9;
  }
  #builtBy .t-title-small {
    text-indent: 0;
  }
  #builtBy .c-text--content-text p {
    --colStart: 3;
    --colEnd: 11;
  }
  #about .c-text--content-text > p {
    --colStart: 1;
    --colEnd: 9;
  }
  #about .c-text--content-text > div {
    --colStart: 4;
    --colEnd: 13;
  }
  #howItWorks .c-text--content-text {
    grid-row-gap: calc(var(--gridGap) * 6);
  }
  #howItWorks .c-text--content-text p:nth-of-type(1) {
    --colStart: 1;
    --colEnd: 9;
  }
  #howItWorks .c-text--content-text p:nth-of-type(2) {
    --colStart: 5;
    --colEnd: 13;
  }
  #howItWorks .c-text--content-text p:nth-of-type(3) {
    --colStart: 3;
    --colEnd: 11;
  }
  #backlog .c-text--content-text > p {
    --colStart: 1;
    --colEnd: 9;
  }
}
@media screen and (max-width: 37.4375rem) {
  .c-text {
    padding: calc(var(--space-xl) * 2) var(--offsetPage);
  }
  .c-text--content {
    gap: calc(var(--gridGap) * 4);
  }
  #yourFoundry .c-text--content-text p {
    --colStart: 1;
    --colEnd: -1;
  }
  #builtBy .c-text--content-text p {
    --colStart: 1;
    --colEnd: -1;
  }
  #howItWorks .c-text--content-text {
    grid-row-gap: calc(var(--gridGap) * 4);
  }
  #howItWorks .c-text--content-text p:nth-of-type(1),
  #howItWorks .c-text--content-text p:nth-of-type(2),
  #howItWorks .c-text--content-text p:nth-of-type(3) {
    --colStart: 1;
    --colEnd: -1;
    grid-row: auto;
  }
  #about .c-text--content-text > p,
  #about .c-text--content-text > div {
    --colStart: 1;
    --colEnd: -1;
    grid-row: auto;
  }
  #backlog .c-text--content-text > p {
    --colStart: 1;
    --colEnd: -1;
  }
}
.text__intro {
  color: var(--c-text, currentColor);
  grid-column: 1/-1;
}
.text__intro p + p {
  margin-top: 1em;
}

.highlight-text {
  background-color: var(--bg-high, var(--pink-400));
  padding-inline: 0.15em;
  color: var(--fg-high, currentColor);
}

.c-header {
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 19;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-block: var(--space-xs);
  overflow: hidden;
}
.c-header svg {
  max-width: 50vw;
  width: 14rem;
}

.c-header a {
  text-decoration: none;
  color: var(--neutral-0);
}

.c-header--menu {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: calc(var(--gridGap) * 2);
}
.c-header--menu a {
  --f-max: var(--scale0);
}
.c-header--menu a:not(.cta--header) {
  position: relative;
}
.c-header--menu a:not(.cta--header)::before {
  content: "";
  position: absolute;
  top: 110%;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: var(--neutral-0);
  background-image: linear-gradient(to right, var(--aqua-400), var(--violet-500));
  transition: transform 0.3s ease-out;
  transform: scaleX(var(--scaleX, 0));
  transform-origin: var(--transformOrigin, right center);
}
.c-header--menu a:not(.cta--header):nth-child(2)::before {
  background-image: linear-gradient(to right, var(--pink-400), var(--blue-800));
}
.c-header--menu a:not(.cta--header):nth-child(3)::before {
  background-image: linear-gradient(to right, var(--violet-500), var(--pink-400));
}
.c-header--menu a:not(.cta--header):nth-child(4)::before {
  background-image: linear-gradient(to right, var(--blue-800), var(--aqua-400));
}
.c-header--menu a:not(.cta--header):nth-child(5)::before {
  background-image: linear-gradient(to right, var(--aqua-400), var(--pink-400));
}
.c-header--menu a:not(.cta--header):nth-child(6)::before {
  background-image: linear-gradient(to right, var(--violet-500), var(--blue-800));
}
.c-header--menu a:not(.cta--header):hover, .c-header--menu a:not(.cta--header):focus {
  --scaleX: 1;
  --transformOrigin: left center;
}

.c-header--hamburger {
  display: none;
  --lh: 1;
  cursor: pointer;
  background-color: transparent;
  border: 0;
  color: var(--neutral-0);
  align-items: stretch;
  gap: calc(var(--gridGap) / 2);
}
.c-header--hamburger div {
  position: relative;
  width: 25px;
}
.c-header--hamburger div span {
  display: block;
  position: absolute;
  width: 100%;
  left: 0;
  height: 1px;
  background-color: var(--neutral-0);
  transition: var(--transition);
}
.c-header--hamburger div span:nth-child(1) {
  top: 0;
}
.c-header--hamburger div span:nth-child(2),
.c-header--hamburger div span:nth-child(3) {
  top: calc(50% - 1px);
}
.c-header--hamburger div span:nth-child(4) {
  bottom: 0;
}
.c-header--hamburger.is--active div span:nth-child(1) {
  opacity: 0;
  top: 50%;
}
.c-header--hamburger.is--active div span:nth-child(4) {
  opacity: 0;
  bottom: 50%;
}
.c-header--hamburger.is--active div span:nth-child(2) {
  transform: rotate(-45deg);
}
.c-header--hamburger.is--active div span:nth-child(3) {
  transform: rotate(45deg);
}

.c-header--logo,
.c-header--hamburger {
  position: relative;
  z-index: 2;
}

@media screen and (max-width: 62.4375rem) {
  .c-header--hamburger {
    display: flex;
    opacity: 0;
  }
  .c-header--hamburger.is--active + .c-header--menu {
    opacity: 1;
    top: 0;
  }
  .is--active + .c-header--menu {
    transform: translateY(0) !important;
  }
  .c-header--menu {
    position: fixed;
    left: 0;
    top: 0;
    opacity: 0;
    width: 100%;
    background-color: var(--black-600);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 0;
    gap: calc(var(--gridGap) * 1.5);
    padding: var(--space-5xl) var(--offsetPage) var(--space-xl) var(--offsetPage);
    transform: translateY(-100%);
    transition: var(--transition);
  }
}
.cta--header.cta--header {
  background-color: color-mix(in srgb, var(--violet-500) 90%, white);
  padding: 0.75em 1.4em;
}
.cta--header.cta--header:hover {
  background-color: var(--c-bg);
}

.c-footer {
  padding: var(--space-5xl) var(--offsetPage);
  color: var(--neutral-0);
  min-height: 100vh;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.c-footer.c-footer--with-hero-media {
  overflow: hidden;
}
.c-footer.c-footer--with-hero-media > .c-footer--hero-media {
  z-index: 0;
}
.c-footer.c-footer--with-hero-media .c-footer--content {
  position: relative;
  z-index: 1;
}
.c-footer.c-footer--with-hero-media .c-footer--content-colophon {
  z-index: 1;
}

.c-footer--content {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  gap: calc(var(--gridGap) * 4);
}

.c-footer--content-colophon {
  position: absolute;
  left: var(--offsetPage);
  right: var(--offsetPage);
  bottom: var(--space-xs);
}
.c-footer--content-colophon.c-footer--bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-s);
}
.c-footer--content-colophon a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s ease-out;
}
.c-footer--content-colophon a:hover, .c-footer--content-colophon a:focus-visible {
  color: var(--c-accent);
}

.c-footer--bar-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.25em;
}

.c-footer--bar-actions-sep {
  display: none;
}

.c-footer--bar-actions:has(.js-cookieSettings.visible) .c-footer--bar-actions-sep {
  display: inline;
}

.js-cookieSettings {
  appearance: none;
  font: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  white-space: nowrap;
}
.js-cookieSettings:hover, .js-cookieSettings:focus-visible {
  color: var(--c-accent);
}

.c-footer--content .t-title {
  font-family: var(--f-hero);
  font-weight: 700;
}

@media screen and (max-width: 62.4375rem) {
  .c-footer {
    flex-direction: column;
    gap: calc(var(--gridGap) * 2);
  }
  .c-footer--content-colophon {
    position: relative;
    left: initial;
    bottom: initial;
  }
}
main {
  background-color: var(--black-800);
}

.section-hero {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: var(--neutral-0);
  gap: var(--space-2xl);
  position: relative;
  z-index: 8;
  pointer-events: none;
}

.hero-content {
  padding: 0 var(--offsetPage) calc(var(--space-2xl) + var(--ctaHeight, 10rem) + var(--extraSpace, 0rem)) var(--offsetPage);
}

.hero-content,
.hero-wrapper {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.pin-spacer:has(.c-hero--media) {
  pointer-events: none;
}

.c-hero--media {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100dvh;
  mix-blend-mode: plus-lighter;
  pointer-events: none;
}
.c-hero--media div,
.c-hero--media canvas {
  width: 100% !important;
  height: 100dvh !important;
  object-fit: cover;
}
.video-wrapper {
  display: none;
}

.asterisk--exclusion {
  mix-blend-mode: exclusion;
}

.c-hero--cta-pin {
  position: absolute;
  bottom: var(--space-2xl);
  left: var(--offsetPage);
  z-index: 88;
  pointer-events: all;
  display: inline-flex;
  align-items: flex-end;
  width: max-content;
  pointer-events: none;
}
.c-hero--cta-pin a {
  pointer-events: all;
}

.c-hero--cta {
  display: inline-flex;
  align-items: center;
  position: relative;
  padding: var(--space-3xs) var(--space-s) var(--space-3xs) 0;
  backdrop-filter: blur(10px);
  overflow: hidden;
  gap: calc(var(--gridGap) * 4);
  width: auto !important;
  border-radius: 1rem;
}

section:not(.section-hero) {
  opacity: 0;
}

.section-intro {
  opacity: 0;
  margin-top: calc(-5dvh - 2px);
  z-index: 0;
  color: var(--c-fg);
  min-height: auto;
  padding-bottom: 10vh;
  padding-top: 0;
  --maskBeforeColor: var(--violet-700);
  --maskAfterColor: var(--aqua-400);
  --align: center;
}

.title--intro {
  max-width: 20ch;
  margin-inline: auto;
}

.intro__text {
  max-width: 60ch;
  margin-inline: auto;
  position: relative;
  z-index: 1;
}

.section-features {
  background-color: var(--black-800);
  margin-bottom: 50vh;
  display: grid;
  gap: var(--space-5xl);
}

.c-cards .t-title-small {
  color: var(--neutral-0);
  padding-bottom: 0.5rem;
}

.c-cards--container {
  min-height: 100dvh;
}

.c-cards--content {
  display: flex;
  flex-direction: column;
}

.features__intro {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  padding: calc(var(--space-5xl) * 0.8) var(--offsetPage);
  justify-content: end;
  margin-bottom: 50vh;
  --c-eyebrow: var(--pink-400);
}
.features__intro > *:last-child {
  margin-bottom: calc(5vw + 7rem);
}

.c-cards--cards {
  flex-direction: column;
  gap: calc(var(--gridGap) * 12);
  /* position: sticky;
     top: 150px; */
  max-height: 100dvh;
}

.c-cards--content-images {
  display: flex;
  flex-direction: column;
  gap: calc(var(--gridGap) * 6);
  position: relative;
}

.c-cards--image {
  position: absolute;
  top: 0;
}

.c-cards--image div {
  margin-top: calc(var(--gridGap) * 2);
}

@media screen and (max-width: 62.4375rem) {
  .c-cards {
    min-height: auto;
    padding: calc(var(--space-2xl) * 2) var(--offsetPage);
  }
  .c-cards--container {
    grid-template-columns: 1fr;
    max-width: 80ch;
  }
}
@media screen and (max-width: 37.4375rem) {
  .c-cards {
    padding: calc(var(--space-xl) * 2) var(--offsetPage);
  }
}
.slide {
  counter-increment: slide-number;
}
.slide:nth-child(2) {
  --bg: var(--violet-700);
}
.slide:nth-child(3) {
  --bg: var(--aqua-400);
  --fg: var(--black-800);
  --c-title: color-mix(in srgb, var(--bg) 40%, black);
}
.slide:nth-child(4) {
  --bg: var(--pink-400);
}
.slide:nth-child(5) {
  --bg: var(--blue-800);
}
.slide:nth-child(6) {
  --c-title: color-mix(in srgb, var(--bg) 40%, black);
  --fg: var(--black-800);
  --bg: var(--green-500);
}
.slide:nth-child(7) {
  --bg: var(--pink-400);
}

.slide-content {
  perspective: 250vw;
}
.slide-content .content {
  min-height: 100vh;
  padding-inline: var(--offsetPage);
  padding-block: calc(var(--space-2xl) + 2rem) calc(var(--space-2xl) + 5rem);
  transform-style: preserve-3d;
  background-color: var(--bg, transparent);
  color: var(--fg, currentColor);
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  transform-origin: 50% 10%;
}

.e-card--header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-direction: row-reverse;
}
.e-card--header .t-title-small {
  display: flex;
  gap: 1rem;
  flex-direction: row-reverse;
  justify-content: space-between;
  width: 100%;
  max-width: none;
  color: var(--c-title, color-mix(in srgb, var(--bg) 50%, white));
}
.e-card--header .t-title-small::before {
  content: "0" counter(slide-number);
}

.slide__extra {
  font-weight: 700;
  margin-top: var(--space-4xs);
  max-width: 60ch;
}

.card__content {
  display: grid;
  gap: var(--space-5xl);
  align-items: end;
  margin-top: auto;
  padding-top: var(--space-s);
}
@media screen and (min-width: 56.25rem) {
  .card__content {
    grid-template-columns: 1fr 1fr;
  }
}

.card__media {
  --shadow-color: color-mix(in srgb, var(--bg) 64%, black);
  --shadow-elevation-low:
  	0.3px 0.5px 0.7px color-mix(in srgb, var(--shadow-color) 34%, transparent),
  	0.4px 0.8px 1px -1.2px color-mix(in srgb, var(--shadow-color) 34%, transparent),
  	1px 2px 2.5px -2.5px color-mix(in srgb, var(--shadow-color) 34%, transparent);
  --shadow-elevation-medium:
  	0.3px 0.5px 0.7px color-mix(in srgb, var(--shadow-color) 36%, transparent),
  	0.8px 1.6px 2px -0.8px color-mix(in srgb, var(--shadow-color) 36%, transparent),
  	2.1px 4.1px 5.2px -1.7px color-mix(in srgb, var(--shadow-color) 36%, transparent),
  	5px 10px 12.6px -2.5px color-mix(in srgb, var(--shadow-color) 36%, transparent);
  --shadow-elevation-high:
  	0.3px 0.5px 0.7px color-mix(in srgb, var(--shadow-color) 34%, transparent),
  	1.5px 2.9px 3.7px -0.4px color-mix(in srgb, var(--shadow-color) 34%, transparent),
  	2.7px 5.4px 6.8px -0.7px color-mix(in srgb, var(--shadow-color) 34%, transparent),
  	4.5px 8.9px 11.2px -1.1px color-mix(in srgb, var(--shadow-color) 34%, transparent),
  	7.1px 14.3px 18px -1.4px color-mix(in srgb, var(--shadow-color) 34%, transparent),
  	11.2px 22.3px 28.1px -1.8px color-mix(in srgb, var(--shadow-color) 34%, transparent),
  	17px 33.9px 42.7px -2.1px color-mix(in srgb, var(--shadow-color) 34%, transparent),
  	25px 50px 62.9px -2.5px color-mix(in srgb, var(--shadow-color) 34%, transparent);
  transform-origin: 50% 0;
}
.card__media img {
  box-shadow: var(--shadow-elevation-high);
  border-radius: 0.5rem;
}

.e-card--list {
  padding: 0;
  list-style-type: none;
  margin-bottom: 2rem;
}
@media screen and (min-width: 56.25rem) {
  .e-card--list {
    order: 1;
  }
}
.e-card--list li {
  padding: var(--space-5xs) 0;
  border-top: var(--border);
  --f-max: var(--scale0);
  counter-increment: slide-sub;
  gap: 2rem;
}
.e-card--list li span {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}
.e-card--list li span::after {
  content: "0" counter(slide-sub);
  color: var(--c-title);
}

.section--backlog {
  --c-eyebrow: var(--violet-400);
  --block-margin: var(--space-m);
  --c-text: color-mix(in srgb, var(--c-fg) 100%, transparent);
  position: relative;
  z-index: 1;
  padding-top: var(--space-xl);
  padding-bottom: 0;
}

[class*=tag--] {
  --c: ;
  font-size: 80%;
  padding: 0.5em 1.25em;
  border: 1px solid var(--c);
  margin-left: 1em;
  border-radius: 6rem;
  color: var(--c);
  position: absolute;
  white-space: nowrap;
  top: 50%;
  transform: translate(0px, -50%);
}

.tag--done {
  --c: var(--c-accent);
}

.tag--in-progress {
  --c: var(--violet-200);
}

.section-statement {
  display: grid;
  --maskBeforeColor: var(--violet-500);
  --maskAfterColor: var(--pink-400);
  padding-block: var(--space-m);
}
.section-statement > * {
  grid-column: 1/-1;
  grid-row: 1/-1;
}
.section-statement .t-title,
.section-statement .t-title-small {
  color: var(--c-accent);
}

.statement__media {
  mix-blend-mode: color-dodge;
  pointer-events: none;
  display: grid;
}
.statement__media > * {
  grid-column: 1/-1;
  grid-row: 1/-1;
  will-change: all;
}
.statement__media > *:nth-child(2) {
  clip-path: inset(0 0 0 50%);
}
.statement__media * {
  width: 100vw;
  margin-left: var(--reset-page);
}
.statement__media canvas {
  width: 100%;
  height: 100%;
}
.statement__media .video-wrapper {
  display: none;
}

.section--works {
  margin-top: 60vh;
  --align-items: center;
  --blend-mode: color-dodge;
  --bg-canvas: var(--c-bg);
  --c-eyebrow: var(--violet-400);
  --align: center;
  padding-top: calc(var(--space-4xl) * 1.4);
  pointer-events: none;
}

.works__list {
  margin-top: var(--space-4xl);
  display: grid;
  min-height: 300vh;
}
.works__list > * {
  grid-row: 1/-1 !important;
  grid-column: 1/-1;
}

.work__item {
  counter-increment: work-item;
  position: relative;
}
.work__item:nth-child(1) {
  --clip-path: inset(0% 71% 50% 0%);
  --margin: 0;
  --colStart: 1;
  --colEnd: -1;
}
.work__item:nth-child(1) canvas {
  margin-left: var(--reset-page);
}
.work__item:nth-child(2) {
  --clip-path: inset(0% 71% 50% 0%);
  --colStart: 8;
  --colEnd: -1;
  --c-before: var(--blue-800);
  --c-after: var(--pink-400);
  --blend-mode: plus-lighter;
  --numberRotate: 14deg;
  --numberX: 2em;
  margin-top: var(--space-2xl);
}
.work__item:nth-child(3) {
  --clip-path: inset(0% 71% 50% 0%);
  --colStart: 1;
  --colEnd: -1;
  --c-before: var(--green-500);
  --c-after: var(--blue-800);
  --numberRotate: 0;
  --numberX: calc(110%);
  text-align: center;
  margin-top: calc(-1 * var(--space-xs));
}
.work__item p {
  opacity: 0;
}

.work__content {
  position: relative;
  margin-inline: var(--margin, auto);
}
.work__content::before, .work__content::after {
  content: "0" counter(work-item);
  position: absolute;
  bottom: 100%;
  left: 0;
  width: auto;
  color: var(--c-before, var(--aqua-400));
  font-size: var(--numberSize, 900%);
  mix-blend-mode: var(--blend-mode, color-dodge);
  transform: translateX(var(--numberX, 0%)) translateY(var(--numberY, 0%)) rotate(var(--numberRotate, -10deg));
  opacity: var(--numberOpacity, 0);
}
.work__content::after {
  color: var(--c-after, var(--violet-500));
  bottom: 110%;
  left: -0.031em;
}

.section--about {
  padding-bottom: var(--space-xs);
}

.section--clients {
  padding-top: var(--space-xl);
  color: var(--c, var(--c-bg));
  pointer-events: none;
  z-index: 0;
  margin-top: var(--space-2xl);
  --c-eyebrow: var(--c-bg);
  text-align: center;
}
.section--clients .c-text--content-header * {
  text-align: center;
  margin-inline: auto;
}
.section--clients .t-title {
  color: var(--violet-500);
}

.clients-list {
  margin-top: var(--space-4xl);
  gap: var(--space-2xl) 0;
  max-width: 100vw;
  display: grid;
  grid-template-columns: 1fr;
  position: relative;
  padding-top: 3rem;
  margin-bottom: 50vh;
}

.client__item {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-s);
  margin-top: calc(80vh * (var(--data-index) - 1));
  margin-top: 80vh;
  align-items: start;
  counter-increment: client-item;
  grid-column: 1/-1;
  grid-row: 1;
  position: relative;
  z-index: 2;
}
.client__item:nth-child(1) {
  margin-top: 100vh;
}

.clients__names {
  display: grid;
}

.client__data {
  min-width: calc(var(--colWidthNoGap) * 3);
  display: flex;
  justify-content: center;
  grid-column: 1/-1;
  grid-row: 1;
  position: relative;
}
.client__data:not(:first-child) {
  opacity: 0;
}

.client__name {
  --f-max: var(--scale6);
  --fluidGrow: var(--growTitle);
  text-align: left;
}

.client__logo svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 300%;
  z-index: -1;
  --svg-fill: var(--neutral-0);
}
[data-theme=dark] .client__logo svg {
  --svg-fill: var(--violet-400);
}

.client__media {
  width: fit-content;
  margin-inline: auto;
}
.client__media img,
.client__media video {
  aspect-ratio: 16/9;
  width: auto;
  height: 100%;
  object-fit: cover;
  display: block;
  vertical-align: middle;
  border-radius: 0.5rem;
  height: 80vh;
}

.media__mask {
  background-color: var(--c-bg);
  border-radius: 2rem;
  --shadow-color: 237deg 34% 52%;
  box-shadow: 0px 0.6px 0.7px hsl(var(--shadow-color)/0.34), -0.1px 3.8px 4.3px -0.4px hsl(var(--shadow-color)/0.34), -0.1px 7px 7.9px -0.7px hsl(var(--shadow-color)/0.34), -0.2px 11.5px 12.9px -1.1px hsl(var(--shadow-color)/0.34), -0.3px 18.4px 20.7px -1.4px hsl(var(--shadow-color)/0.34), -0.4px 28.8px 32.4px -1.8px hsl(var(--shadow-color)/0.34), -0.7px 43.8px 49.3px -2.1px hsl(var(--shadow-color)/0.34), -1px 64.5px 72.6px -2.5px hsl(var(--shadow-color)/0.34);
}

.block-zindex {
  position: relative;
  z-index: 1;
}

.section--mini {
  --c-eyebrow: var(--aqua-400);
  --maskBeforeColor: var(--violet-500);
  --maskAfterColor: var(--pink-400);
  --block-margin: var(--space-m);
  --c-text: color-mix(in srgb, var(--c-fg) 100%, transparent);
  padding-block: var(--space-2xl) var(--space-xl);
}
.section--mini h2 {
  color: var(--violet-200);
}
.section--mini .c-text--content {
  position: relative;
  z-index: 1;
}

.mini__content > * {
  grid-column: 1/7;
}

.mini__media {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  mix-blend-mode: plus-lighter;
  pointer-events: none;
}

.mini__list {
  grid-gap: 0 var(--gridGap);
}
.mini__list > * {
  grid-column: 6/-1;
}
.mini__list li {
  counter-increment: slide-sub;
}
.mini__list li span {
  display: flex;
  width: 100%;
  justify-content: space-between;
  gap: 1rem;
}
.mini__list li span::before {
  content: "0" counter(slide-sub);
  order: 1;
}

.title-wrapper {
  display: flex;
  align-items: center;
}

.coming-soon {
  border: 1px solid;
  padding: 0.5em 1em;
  border-radius: 4rem;
  color: var(--pink-400);
  margin-left: 0.8em;
  font-size: 70%;
}

.sendpulse-form {
  max-width: 104ch;
  margin-inline: auto;
  backdrop-filter: blur(4px);
  border-radius: 1.2rem;
  --p: 3.5rem calc(var(--offsetPage) + 1rem) 5.8rem;
  margin-top: var(--space-m);
  padding: var(--p);
  text-align: center;
  --c-eyebrow: var(--c-accent);
  width: calc(100% - var(--offsetPage) * 2);
}
.sendpulse-form .t-body-big,
.sendpulse-form > *,
.sendpulse-form .t-title-small {
  margin-inline: auto;
}

@media screen and (pointer: coarse) {
  main {
    overflow: hidden;
  }
  .t-title-small {
    --lh: 1 ;
  }
  .section-hero {
    --extraSpace: 5vh;
    --ctaHeight: 15rem;
  }
  .c-hero--cta {
    flex-wrap: wrap;
    flex-direction: column;
    align-items: flex-start;
    max-width: calc(100vw - 2 * var(--offsetPage));
    gap: var(--space-s);
    padding-left: 0;
  }
  .c-hero--media div,
  .c-hero--media canvas {
    object-fit: contain;
    display: none;
  }
  .is--mobile .video-wrapper {
    display: block;
  }
  .section-intro {
    opacity: 1;
    margin-top: var(--space-5xl);
    --align: left;
    min-height: 50vh;
  }
  [data-anim=title-mask--right] {
    width: calc(var(--mx, 15ch));
    max-width: calc(100% - var(--offsetPage) * 2);
    margin-left: 0;
  }
  .section-statement {
    margin-bottom: var(--space-s);
    position: relative;
  }
  .statement__media {
    display: grid;
  }
  .statement__media .video-wrapper {
    width: 100%;
    position: absolute;
    display: grid;
    top: 0;
  }
  .statement__media .video-wrapper > * {
    grid-row: 1/-1;
    grid-column: 1/-1;
  }
  .statement__media .video-wrapper video:first-child {
    transform: scale(1) translate(0%, -20%);
    clip-path: inset(0% 0% 40%);
  }
  .statement__media .video-wrapper video:last-child {
    transform: scale(0.6) translate(30%, 16%);
    z-index: -1;
  }
  .statement__media canvas {
    object-fit: contain;
    display: none !important;
  }
  .section-features {
    gap: 0;
    margin-bottom: 0;
    margin-top: var(--space-5xl);
  }
  .slide-content .content,
  .features__intro > *:last-child,
  .features__intro {
    min-height: 80vh;
    margin-bottom: 0;
  }
  .features__intro > *:last-child,
  .features__intro {
    min-height: auto;
  }
  .slide-content .content {
    padding-bottom: calc(var(--space-2xl) + 2rem);
  }
  .section--works {
    --align-items: flex-start;
    --align: left;
    --numberX: 0%;
    --numberY: 0%;
    --numberOpacity: 1;
    --numberRotate: 0;
    margin-top: 0;
    --numberSize: 600%;
  }
  .works__list,
  .work__item {
    display: block;
    min-height: auto;
  }
  .work__item {
    margin-top: calc(var(--space-4xl) + 6rem) !important;
    padding-bottom: var(--space-5xl);
  }
  .work__item:nth-child(2), .work__item:nth-child(3) {
    --numberX: 0%;
    --numberRotate: 0;
  }
  .work__item:nth-child(3) {
    text-align: left;
  }
  .work__item p {
    opacity: 1;
  }
  #about .c-text--content-text,
  .c-text--content {
    gap: calc(var(--gridGap) * 1);
  }
  .section--about {
    padding-bottom: var(--space-5xl);
  }
  .section--clients {
    background: var(--violet-200);
    margin-top: -3px;
  }
  .clients-list {
    margin-bottom: 80vh;
  }
  .section--backlog {
    padding-top: var(--space-5xl);
  }
  .section--mini {
    --gridCols: 1;
  }
  .mini__content > * {
    grid-column: 1/-1;
  }
  .c-footer {
    min-height: 100vh;
  }
  .c-footer > * {
    margin-top: auto;
  }
}
@media screen and (max-width: 62.4375rem) and (orientation: landscape) {
  .section--mini,
  .section--about {
    --mx: 20ch;
  }
}
@media screen and (max-width: 62.4375rem) {
  .t-body--big {
    font-weight: 700;
    margin-bottom: 1.25em;
  }
}
@media screen and (pointer: coarse) and (orientation: portrait) {
  .statement__media {
    max-height: 75vh;
  }
  .client__item {
    margin-top: 30vh !important;
  }
  .client__media img,
  .client__media video {
    aspect-ratio: 16/9;
    width: 100%;
    height: 100%;
  }
}
@media screen and (pointer: coarse) and (orientation: landscape) {
  :root {
    --growHero: 5vw;
    --growTitle: 2.53vw;
    --growBody: .5vw;
    --mx: 25ch;
  }
  main {
    overflow: hidden;
  }
  .hero-content {
    padding-block: calc(5rem + 5vh) 1em;
  }
  .c-hero--cta-pin {
    position: relative;
  }
  .c-hero--media {
    opacity: 0.5 !important;
  }
  .c-hero--media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .intro__text {
    margin-top: var(--space-l);
  }
  .section-statement {
    margin-top: var(--space-4xl);
  }
  .statement__media video {
    height: 160vh;
  }
  .statement__media video:first-child {
    transform: scale(0.8) translate(-49%, -37%) !important;
  }
  .statement__media video:last-child {
    transform: scale(0.6) translate(40%, 11%) !important;
  }
  .c-footer {
    padding-bottom: 1em;
  }
}
.sp-force-hide {
  display: none;
}

.sp-form-outer {
  margin-top: var(--space-m) !important;
  display: flex;
  justify-content: center;
}

.sp-form[sp-id="252841"] {
  display: block;
  max-width: 100%;
  background-color: transparent !important;
  border: none !important;
  font-family: "Tiphares Soft" !important;
  padding: 0 !important;
  margin: 0 !important;
}

.sp-form[sp-id="252841"] input[type=checkbox] {
  display: inline-block;
  opacity: 1;
  visibility: visible;
}

.sp-form[sp-id="252841"] .sp-form-fields-wrapper {
  margin: 0 auto;
}

.sp-form[sp-id="252841"] .sp-form-control {
  background-color: var(--black-600) !important;
  border-color: none;
  border-style: solid;
  padding-left: 8.75px;
  padding-right: 8.75px;
  border-radius: 4px;
  height: 35px;
  width: 100%;
  border: none !important;
}

.sp-form[sp-id="252841"] .sp-field label {
  color: #444444;
  font-size: 13px;
  font-style: normal;
  font-weight: bold;
}

.sp-form[sp-id="252841"] .sp-button-messengers {
  border-radius: 4px;
}

.sp-form[sp-id="252841"] .sp-button {
  border-radius: 4px;
  background-color: #0089bf;
  color: #ffffff;
  width: auto;
  font-weight: 700;
  font-style: normal;
  font-family: Arial, sans-serif;
}

.sp-form[sp-id="252841"] .sp-button-container {
  text-align: left;
}

.sp-control-label {
  display: none !important;
}

.sp-element-container {
  display: flex !important;
}

.sp-form .sp-field {
  padding: 0 !important;
  flex-grow: 1 !important;
}

.sp-form[sp-id="252841"] .sp-button {
  background-color: var(--violet-500) !important;
  width: 100% !important;
}

.sp-form[sp-id="252841"] .sp-button,
.sp-form[sp-id="252841"] .sp-form-control {
  font-family: "Tiphares Soft" !important;
  border-radius: 0 !important;
  border: none !important;
  position: static !important;
  color: var(--c-fg) !important;
  font-size: clamp(var(--f-min, 1rem), var(--f-fluid, var(--f-min)) + var(--fluidGrow, 1vw), var(--f-max, 1.1rem)) !important;
  padding: var(--space-5xs) var(--space-m) !important;
  height: 100% !important;
}

.sp-form[sp-id="252841"] .sp-form-control {
  padding: var(--space-5xs) 1em !important;
}

.sp-form[sp-id="252841"] .sp-form-fields-wrapper {
  width: 100% !important;
  position: relative;
}

.sp-message {
  position: absolute;
  top: 110%;
  width: 100%;
  left: 0;
  background: color-mix(in srgb, var(--bg), transparent 14%) !important;
  margin: 1em 0 !important;
  font-weight: 400 !important;
}

.sp-message-success {
  --bg: var(--aqua-400);
}

.sp-message-error {
  --bg: #ef2b58;
}

.page-privacy .c-text {
  padding-block: min(var(--space-5xl) * 2, 10rem);
}

.section--privacy .c-text--content-header,
.section--privacy .c-text--content-text {
  width: 100%;
  max-width: 100ch !important;
  margin-inline: auto;
}
.section--privacy .c-text--content-header {
  gap: 0;
}
.section--privacy .t-title {
  color: var(--pink-400);
  color: var(--violet-200);
}
.section--privacy .c-text--content-text {
  margin-top: var(--space-s);
  --lh: 1.6;
}
.section--privacy p,
.section--privacy li {
  --mw: 100ch;
}
.section--privacy a {
  color: var(--c-accent);
  transition: color 0.3s ease-out;
}
.section--privacy a:hover, .section--privacy a:focus {
  color: var(--pink-400);
}
.section--privacy .t-title-small {
  --f-max: var(--scale4);
  color: var(--green-200);
  margin-top: min(var(--space-2xl), 3rem);
  margin-bottom: 0.25rem;
}

.calendly-inline-widget {
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh !important;
  z-index: -1;
  opacity: 0;
  transition: var(--transition-slow);
  display: flex;
  align-items: center;
  overscroll-behavior: contain;
}
.calendly-inline-widget.is--open {
  z-index: 71;
  opacity: 1;
}
.calendly-inline-widget:before {
  content: "";
  z-index: -1;
  background: var(--black-800);
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.85;
}

.calendly-inline-widget--close {
  position: absolute;
  background-color: transparent;
  border: none;
  top: 32px;
  right: 32px;
  width: 32px;
  height: 32px;
  cursor: pointer;
}
.calendly-inline-widget--close span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--neutral-0);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
}
.calendly-inline-widget--close span:first-of-type {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.calendly-inline-widget iframe {
  max-height: 80vh;
  max-width: calc(100vw - var(--offsetPage) * 2);
  margin-inline: auto;
  margin-top: 1em;
}