:root {
  --white: white;
  --black: black;
  --color-neutral-300: #e3e1de;
  --transparent: #0000;
  --color-success: #0ba954
}

body {
  background-color: var(--white);
  color: var(--black);
  font-family: Ppneuemontreal, Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.1
}

h1 {
  letter-spacing: -.01em;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 5rem;
  font-weight: 500;
  line-height: 1
}

h2 {
  letter-spacing: -.01em;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 3.75rem;
  font-weight: 500;
  line-height: 1
}

h3 {
  letter-spacing: -.01em;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 2.5rem;
  font-weight: 500;
  line-height: 1
}

h4 {
  margin-top: 10px;
  margin-bottom: 0;
  font-size: 1.5625rem;
  font-weight: 500;
  line-height: 1.2
}

h5 {
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 1.25em;
  font-weight: 500;
  line-height: 1.2
}

p {
  margin-bottom: 0;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.4
}

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

strong {
  font-weight: 600
}

.code-embed-css {
  pointer-events: none;
  width: 0;
  height: 0;
  font-size: var(--size-font);
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden
}

/* Cegah horizontal overflow / space kosong di kanan (terlihat saat zoom-out di mobile).
   Diterapkan ke html DAN body + max-width agar layout-viewport mobile tidak melebar
   walau ada elemen (mis. 100vw / gambar lebar) yang meluber. */
html,
body {
  overflow-x: clip;
  max-width: 100%;
}

.container {
  z-index: 1;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding: 1rem 1.25rem 1.625rem;
  position: relative
}

.container.is--full {
  max-width: 100%
}

.container.is--medium {
  max-width: calc(var(--size-container)*.85)
}

.container.is--small {
  max-width: calc(var(--size-container)*.7)
}

.container.footer {
  min-height: 0
}

.container.work-template {
  padding-bottom: 2.25rem
}

.container.error-404 {
  justify-content: center;
  align-items: center;
  height: 100%;
  display: flex
}

.container.hero-home {
  flex-flow: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  display: flex
}

.container.showreel {
  padding-bottom: 5.3125rem
}

.container.works {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  height: 100%
}

.container.video {
  padding: 0
}

.container.footer-c {
  min-height: 0;
  padding-bottom: 1rem;
  /* Samakan dengan .wwd__container / before-after slider (1300px) */
  max-width: 1300px;
  margin-inline: auto;
  width: 100%;
}

.btn {
  grid-column-gap: .875rem;
  grid-row-gap: .875rem;
  background-color: var(--black);
  color: var(--white);
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid #fff6;
  border-radius: 6.25rem;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: flex-start;
  align-items: center;
  padding: 1rem 2.25rem 1rem 1.25rem;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  transition: border-color .4s;
  display: inline-flex
}

.btn:hover {
  border-color: #fff;
  text-decoration: none
}

.btn.is--secondary {
  background-color: var(--black)
}

.btn.call {
  padding-left: 1.25rem;
  padding-right: 1.25rem
}

.btn.white {
  border-color: var(--black);
  background-color: var(--white);
  color: var(--black)
}

.btn.error-404 {
  z-index: 10;
  justify-content: center;
  align-items: center;
  margin-bottom: 2rem;
  position: absolute;
  inset: auto auto 0%
}

.btn.view-all-btn {
  grid-column-gap: .5rem;
  grid-row-gap: .5rem;
  background-color: var(--transparent);
  color: var(--white);
  letter-spacing: -.01em;
  text-transform: none;
  border-style: none;
  border-radius: 0;
  padding: 0;
  font-family: Ppneuemontreal, Arial, sans-serif;
  font-size: 2.5rem;
  font-weight: 500
}

.btn.view-all-btn.black {
  color: var(--black)
}

.btn.black-blend {
  background-color: var(--white);
  color: var(--black)
}

.btn.email {
  padding-left: 1.25rem;
  padding-right: 1.25rem
}

.btn__text-p {
  margin-bottom: 0;
  font-size: .75rem;
  font-weight: 500
}

.h3-style {
  letter-spacing: -.01em;
  font-size: 2.5rem;
  line-height: 1.1
}

.nav-boiler {
  z-index: 1001;
  pointer-events: none;
  width: 100%;
  height: 4rem;
  color: var(--white);
  mix-blend-mode: difference;
  justify-content: space-between;
  align-items: center;
  padding-top: 1.28125rem;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  display: flex;
  position: fixed;
  inset: 0% 0% auto
}

.h1-home {
  letter-spacing: -.01em;
  font-size: 5rem;
  line-height: 1
}

.p-m {
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.2
}

.p-s {
  font-family: Ppneuemontreal, Arial, sans-serif;
  font-size: .875rem
}

.arrow-w {
  justify-content: flex-start;
  align-items: center;
  display: flex;
  position: relative
}

.line-arrow {
  background-color: var(--white);
  width: .82rem;
  height: 1px;
  margin-top: .1px;
  margin-right: -.2px
}

.line-arrow.black {
  background-color: var(--black)
}

.shape-arrow {
  border-style: solid;
  border-width: 1px 1px 0 0;
  border-color: var(--white);
  width: .4rem;
  height: .4rem;
  margin-top: 0;
  position: absolute;
  right: 0;
  transform: rotate(45deg)
}

.shape-arrow.black {
  border-top-color: var(--black);
  border-right-color: var(--black)
}

.arrow {
  justify-content: flex-start;
  align-items: center;
  display: flex;
  position: absolute
}

.arrow.black-blend {
  mix-blend-mode: difference;
  mix-blend-mode: difference
}

.code-embed-2 {
  justify-content: center;
  align-items: center;
  width: 1.5rem;
  display: flex
}

.loader {
  z-index: 1001;
  background-color: var(--black);
  width: 100%;
  height: 100vh;
  display: none;
  position: fixed;
  inset: 0%
}

.loader-c {
  width: 100%;
  height: 100%;
  color: var(--white);
  letter-spacing: .05em;
  text-transform: uppercase;
  flex-flow: column;
  justify-content: space-between;
  align-items: center;
  padding: 1.875rem;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  display: flex
}

.fake-top-loader {
  opacity: 0;
  color: var(--black)
}

.loader-anim {
  justify-content: center;
  align-items: flex-start;
  height: 7.6rem;
  display: flex
}

.loader-nbr-w {
  z-index: 99;
  position: relative
}

.loader-img-w {
  pointer-events: none;
  justify-content: center;
  align-items: center;
  width: 1rem;
  height: 20rem;
  margin-top: -25%;
  display: flex;
  position: relative
}

.loader-img {
  opacity: 0;
  object-fit: contain;
  position: absolute
}

.loader-img.coeur {
  width: 20rem;
  max-width: none;
  height: 20rem;
  position: absolute;
  inset: 50% 0% 0% 50%;
  transform: translate(-50%, -50%)scale(1.2)
}

.loader-img.chewinggum {
  width: 20rem;
  max-width: none;
  height: 20rem;
  position: absolute;
  inset: 0%
}

.loader-img.bonbon {
  opacity: 0;
  width: 20rem;
  max-width: none;
  height: 15rem;
  position: absolute;
  inset: 5% 0% 0%;
  transform: none
}

.loader-img.star {
  width: 20rem;
  max-width: none;
  height: 20rem;
  position: absolute;
  inset: 0%;
  transform: scale(1.3)
}

.loader-img.papier {
  opacity: 0;
  width: 20rem;
  max-width: none;
  height: 15rem;
  position: absolute;
  inset: 9% 0% 0%
}

.loader-img.bonbon-copy {
  width: 20rem;
  max-width: none;
  height: 20rem;
  position: absolute;
  inset: 0%;
  transform: scale(1)rotate(120deg)
}

.n-load {
  opacity: 0;
  width: 6.25rem;
  margin-right: -.3125rem
}

.apos-load {
  width: 2.5625rem;
  transform: scale(0)
}

.section.video,
.section.black {
  background-color: var(--black);
  color: var(--white)
}

.section.error-404 {
  background-color: var(--black);
  height: 100vh;
  color: var(--white);
  justify-content: center;
  align-items: flex-end;
  display: flex;
  position: fixed;
  inset: 0%;
  overflow: hidden
}

.section.hero-home {
  background-color: var(--white);
  width: 100%;
  height: 100vh;
  position: relative
}

.section.works {
  background-color: var(--black);
  color: var(--white)
}

.section.showreel {
  margin-top: -100vh
}

.section.video {
  background-color: var(--black);
  color: var(--white)
}

.section.info-img {
  background-color: var(--black);
  color: var(--white);
  position: relative
}

.section.glitch {
  background-color: var(--black);
  color: var(--white);
  position: relative;
  overflow: clip
}

.section-w {
  background-color: var(--black);
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 300vh;
  margin-top: -100vh;
  display: flex;
  position: relative
}

.nothin-hero-svg {
  width: 100%
}

.nothin-hero-svg.motion {
  color: var(--white)
}

.nothin-hero-w {
  width: 100%;
  overflow: hidden
}

.video-hero-bg {
  z-index: 0;
  width: 100%;
  padding: 0;
  display: block;
  position: absolute
}

.video-hero-bg.motion {
  background-color: var(--black);
  opacity: 0
}

.nav-logo {
  height: 1.25rem
}

.nav-logo-wrap {
  pointer-events: auto;
  min-width: 6.2rem
}

.link {
  letter-spacing: .03em;
  text-transform: uppercase;
  font-size: .75rem;
  font-weight: 700;
  line-height: 1
}

.link.pointer-none {
  pointer-events: none
}

.link.footer {
  letter-spacing: 0;
  text-transform: none;
  margin-bottom: 6px;
  font-size: 1.5625rem;
  font-weight: 500
}

.link.hide-desk {
  display: none
}

.link-lang {
  background-color: var(--white);
  color: var(--black);
  letter-spacing: .03em;
  text-transform: uppercase;
  border-radius: 4px;
  padding: .25rem;
  font-size: .75rem;
  font-weight: 700;
  line-height: 1
}

.link-hero-w {
  grid-column-gap: .875rem;
  grid-row-gap: .875rem;
  justify-content: flex-start;
  align-items: center;
  display: flex
}

.link-hero-lang-w {
  grid-column-gap: 1.375rem;
  grid-row-gap: 1.375rem;
  justify-content: flex-start;
  align-items: center;
  display: flex
}

.link-hero-bottom-w {
  justify-content: space-between;
  align-items: center;
  width: 100%;
  display: flex
}

.div-block {
  width: 100%
}

.p-l {
  font-size: 1.5625rem;
  line-height: 1
}

.space-24 {
  padding-top: 1.5rem
}

.section-fake-hero {
  z-index: 2;
  width: 100%;
  height: 100vh;
  color: var(--white);
  mix-blend-mode: difference;
  flex-flow: column;
  justify-content: space-between;
  align-items: flex-start;
  margin-top: 100vh;
  padding: 1rem 1.25rem;
  display: flex;
  position: absolute;
  inset: 0% 0% auto
}

.space-150 {
  padding-top: 9.375rem;
  padding-bottom: 0
}

.space-65 {
  padding-top: 4.0625rem;
  padding-bottom: 0
}

.showreel-light {
  z-index: 1;
  width: 100%;
  padding: 0;
  position: absolute;
  inset: 0%
}

.video-showreel-full-w {
  justify-content: flex-end;
  align-self: flex-end;
  align-items: flex-end;
  width: 100%;
  height: 100%;
  display: flex;
  position: relative
}

.video-showreel-w {
  justify-content: flex-end;
  align-items: flex-end;
  width: 100%;
  height: 58rem;
  min-height: 58rem;
  display: flex
}

.video-showreel-flip {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  padding-bottom: 1.625rem;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  display: flex;
  position: absolute;
  left: 0
}

.video-showreel-flip.p-m {
  grid-column-gap: 6.25rem;
  grid-row-gap: 6.25rem;
  grid-column-gap: 6.25rem;
  grid-row-gap: 6.25rem
}

.text-block-2 {
  max-width: 21.625rem
}

.text-block-2.concept {
  max-width: 27rem
}

.works-word {
  letter-spacing: -.03em;
  text-transform: uppercase;
  font-size: 1.875rem;
  font-weight: 700;
  display: inline-block
}

.works-word-w {
  z-index: 10;
  mix-blend-mode: difference;
  justify-content: space-between;
  align-items: center;
  height: 3rem;
  display: flex;
  position: sticky;
  top: 3rem
}

.div-block-2 {
  justify-content: flex-start;
  align-items: center;
  display: flex
}

.works-word-block-state1 {
  display: inline-block
}

.works-word-block-state2 {
  padding-bottom: 0;
  padding-left: 0;
  padding-right: 0
}

.titile-section-work {
  justify-content: flex-end;
  align-items: center;
  padding-right: 3.125rem;
  display: flex
}

.titile-section-work.work-template {
  justify-content: space-between;
  align-items: center;
  padding-right: 0
}

.space-87 {
  padding-top: 5.4375rem;
  padding-bottom: 0
}

.title-work {
  color: #8e8e8e;
  letter-spacing: .03em;
  text-transform: uppercase;
  margin-bottom: 1rem;
  font-family: IBM Plex Mono, sans-serif;
  font-size: .75rem
}

.img-work-w {
  border-radius: .25rem;
  overflow: hidden
}

.img-work {
  object-fit: cover;
  border-radius: .25rem;
  width: 100%
}

.short-p-work {
  margin-bottom: 1.25rem;
  font-size: 1.5625rem;
  font-weight: 500;
  line-height: 1
}

.work_list {
  grid-column-gap: 1rem;
  grid-row-gap: 14.375rem;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid
}

.cursor-work {
  grid-column-gap: .375rem;
  grid-row-gap: .375rem;
  background-color: var(--black);
  letter-spacing: .03em;
  text-transform: uppercase;
  border-radius: 100px;
  justify-content: flex-start;
  align-items: center;
  padding: .125rem .75rem;
  font-family: IBM Plex Mono, sans-serif;
  font-size: 12px;
  display: inline-flex;
  position: absolute
}

.work-link {
  position: relative;
  overflow: hidden
}

.work-view-all-w {
  justify-content: space-between;
  align-items: flex-end;
  display: flex
}

.nbr-works-w {
  font-size: 1.125rem;
  line-height: 1
}

.text-block-3 {
  text-align: right;
  min-width: 9.375rem;
  font-size: 1.125rem
}

.div-block-3 {
  grid-column-gap: .1rem;
  grid-row-gap: .1rem;
  justify-content: center;
  align-items: center;
  display: flex
}

.nbr-projects {
  display: none
}

.video-w {
  z-index: 1;
  width: 100vw;
  transform: scale(.6)
}

.video-sticky {
  z-index: 1;
  width: 100%;
  height: 100%;
  padding: 0;
  display: block;
  position: relative
}

.musee-bg {
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0%;
  transform: scale(1.8)
}

.musee-w {
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  display: flex;
  position: relative;
  overflow: hidden
}

.info-w {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  padding-bottom: 1.625rem;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  display: flex;
  position: absolute;
  left: 0
}

.info-w.p-m {
  grid-column-gap: 6.25rem;
  grid-row-gap: 6.25rem
}

.info-w.p-l {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  grid-template-rows: auto;
  grid-template-columns: .75fr 1fr;
  grid-auto-columns: 1fr;
  line-height: 1.2;
  display: grid;
  position: relative;
  left: auto
}

.img-block-left {
  margin-right: 8.125rem
}

.img-block-left-w {
  width: 13.5rem;
  height: 13.5rem;
  margin-bottom: 1.25rem;
  overflow: hidden
}

.image {
  aspect-ratio: auto;
  object-fit: cover;
  width: 100%;
  height: 100%
}

.img-block-right-w {
  width: 43.125rem;
  height: 26.25rem;
  margin-bottom: 1.25rem;
  overflow: hidden
}

.img-block-grid {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  grid-template-rows: auto;
  grid-template-columns: .75fr 1fr;
  grid-auto-columns: 1fr;
  display: grid
}

.img-block-grid.p-s {
  margin-top: -5.4375rem
}

.text-block-4 {
  font-size: 1.125rem;
  font-weight: 400
}

.section-separator-blur {
  z-index: 1;
  background-image: linear-gradient(0deg, black, var(--transparent));
  width: 100%;
  height: 10rem;
  margin-top: 1px;
  position: absolute;
  inset: -10rem 0% auto
}

.infobusiness-grid {
  grid-column-gap: 0rem;
  grid-row-gap: 0rem;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.2;
  display: grid
}

.list {
  white-space: nowrap;
  padding-left: 0
}

.list-item {
  grid-column-gap: .75rem;
  grid-row-gap: .75rem;
  justify-content: flex-start;
  align-items: center;
  display: flex
}

.list-dot {
  background-color: var(--white);
  border-radius: 50%;
  width: .3rem;
  height: .3rem
}

.div-block-4 {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid
}

.fake-img {
  width: 13.5rem;
  height: 0;
  overflow: hidden
}

.info-grid-right {
  overflow: hidden
}

.info-grid-left {
  margin-right: 8.125rem
}

.formes-w {
  min-height: 20rem;
  position: relative
}

.formes-w.error-404 {
  width: 100%;
  min-height: 100vh;
  margin-top: 15rem
}

.papier {
  z-index: 5;
  width: 28.3125rem;
  height: 28.3125rem;
  position: absolute;
  inset: 10% auto auto 30%
}

.chewing-gum {
  width: 8.875rem;
  position: absolute;
  inset: 20% 35% auto auto
}

.chewing-gum.error {
  top: 26%;
  right: 31%
}

.bonbon {
  width: 8.875rem;
  position: absolute;
  inset: auto 34% 42% auto
}

.etoile {
  z-index: 4;
  width: 30rem;
  position: absolute;
  inset: -3% auto auto 34%
}

.coeur {
  width: 12.5rem;
  position: absolute;
  inset: 0% 30% auto auto
}

.n-cursor {
  width: 3rem;
  font-size: 2rem;
  position: absolute;
  inset: 19% auto auto 24%
}

.n-cursor.word {
  width: auto;
  font-size: 4rem;
  top: 29%
}

.n-cursor.word-1 {
  left: 33%
}

.n-cursor._2 {
  width: 1rem;
  inset: auto 25% 52% auto;
  transform: rotate(34deg)
}

.n-cursor._2.word {
  font-size: 3rem;
  top: 41%;
  right: 29%
}

.t-cursor {
  width: 1.6rem;
  font-weight: 700;
  position: absolute;
  inset: 6% auto auto 30%
}

.t-cursor.word {
  font-size: 4rem;
  transform: rotate(-20deg)
}

.h-cursor {
  width: 1rem;
  position: absolute;
  inset: auto auto 50% 30%
}

.h-cursor.word {
  font-size: 3rem
}

.apos-cursor {
  width: 1.25rem;
  position: absolute;
  inset: 20% 31% auto auto
}

.apos-cursor.word {
  font-size: 3.2rem
}

.apos-cursor.word._2 {
  top: 31%;
  right: 24%
}

.coeur-copy {
  width: 15rem;
  position: absolute;
  inset: -3% 28% auto auto;
  transform: rotate(-18deg)
}

.coeur-copy.error {
  top: 7%;
  right: 35%
}

.bonbon-copy {
  width: 8.875rem;
  position: absolute;
  inset: auto 34% 48% auto;
  transform: rotate(112deg)
}

.i-cursor {
  width: .8rem;
  position: absolute;
  inset: 64% auto auto 48%
}

.i-cursor._2 {
  width: 1rem;
  inset: auto 25% 52% auto;
  transform: rotate(34deg)
}

.i-cursor.word {
  font-size: 4rem;
  top: 57%
}

.glitch-text-w {
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  display: flex;
  position: absolute;
  inset: 0%
}

.glitch-text-sticky-w {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  width: 100vw;
  min-height: 100vh;
  display: grid;
  position: sticky;
  top: 0
}

.div-block-5 {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr;
  grid-auto-columns: 1fr;
  display: block;
  position: relative
}

.div-block-5.none {
  opacity: 0;
  opacity: 0
}

.text-block-6 {
  font-family: Ppneuemontreal Book, Arial, sans-serif;
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1
}

.text-block-6.final {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%)
}

.text-block-6._1 {
  position: absolute;
  inset: 23% auto auto -18%
}

.text-block-6._6 {
  position: absolute;
  inset: 9% auto auto 36%
}

.text-block-6._2 {
  position: absolute;
  inset: 40% auto auto 23%
}

.text-block-6._3 {
  position: absolute;
  inset: auto 29% 23% auto
}

.text-block-6._4 {
  position: absolute;
  inset: 6% 0% auto auto
}

.img-ascenseur {
  opacity: .8;
  width: 100%
}

.finaltext {
  font-family: Ppneuemontreal Book, Arial, sans-serif;
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1;
  position: absolute;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%)
}

.finaltext._1 {
  position: absolute;
  inset: 23% auto auto -18%
}

.finaltext._6 {
  position: absolute;
  inset: 9% auto auto 36%
}

.finaltext._2 {
  position: absolute;
  inset: 40% auto auto 23%
}

.finaltext._3 {
  position: absolute;
  inset: auto 29% 23% auto
}

.finaltext._4 {
  position: absolute;
  inset: 6% 0% auto auto
}

.finaltext.final {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%)
}

.img-glitch-w {
  z-index: 10;
  grid-column-gap: 9rem;
  grid-row-gap: 9rem;
  background-image: linear-gradient(0deg, var(--black), var(--transparent));
  justify-content: center;
  align-items: flex-end;
  display: flex;
  position: absolute;
  inset: auto 0% 0%
}

.merguez {
  aspect-ratio: auto;
  object-fit: cover;
  width: 28.25rem;
  height: 23.125rem;
  overflow: hidden
}

.ballon {
  object-fit: cover;
  width: 13.4375rem;
  height: 18.9375rem;
  overflow: hidden
}

.footer {
  background-color: var(--black);
  color: var(--white);
  position: relative
}

.footer.hero-home {
  background-color: var(--white);
  width: 100%;
  height: 100vh;
  position: relative
}

.footer.works,
.footer.video,
.footer.black {
  background-color: var(--black);
  color: var(--white)
}

.footer.info-img {
  background-color: var(--black);
  color: var(--white);
  position: relative
}

.footer.glitch {
  background-color: var(--black);
  color: var(--white);
  position: relative;
  overflow: clip
}

.merguez-img {
  object-fit: cover;
  width: 100%;
  height: 105%
}

.ballon-img {
  aspect-ratio: auto;
  object-fit: cover;
  width: 100%;
  height: 105%
}

.div-block-6 {
  grid-column-gap: .75rem;
  grid-row-gap: .75rem;
  justify-content: flex-start;
  align-items: center;
  display: flex
}

.div-block-7 {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  place-items: start stretch;
  display: grid
}

.social-links-w {
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex
}

.section-footer {
  background-color: var(--black);
  color: var(--white);
  justify-content: flex-start;
  align-items: flex-end;
  display: flex;
  position: relative
}

.section-footer.hero-home {
  background-color: var(--white);
  width: 100%;
  height: 100vh;
  position: relative
}

.section-footer.works,
.section-footer.video,
.section-footer.black {
  background-color: var(--black);
  color: var(--white)
}

.section-footer.info-img {
  background-color: var(--black);
  color: var(--white);
  position: relative
}

.section-footer.glitch {
  background-color: var(--black);
  color: var(--white);
  position: relative;
  overflow: clip
}

.footer-nothin-svg {
  width: 100%
}

.space-12 {
  padding-top: .75rem
}

.footer-info {
  letter-spacing: 0;
  font-size: .875rem;
  font-weight: 400;
  line-height: 1.2
}

.lang-footer {
  grid-column-gap: 6rem;
  grid-row-gap: 6rem;
  justify-content: flex-start;
  align-items: center;
  display: flex
}

.footer-info-w {
  justify-content: space-between;
  align-items: center;
  display: flex
}

.cadre-video {
  z-index: 1;
  pointer-events: none;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0%;
  transform: scale(1.01)
}

.video-reflet {
  z-index: 1;
  opacity: .65;
  filter: blur(80px);
  width: 100%;
  height: 100%;
  padding: 0;
  display: block;
  position: absolute;
  transform: rotate(0)
}

.menu-w {
  pointer-events: auto;
  letter-spacing: .03em;
  text-transform: uppercase;
  font-size: .75rem;
  font-weight: 700;
  line-height: 1;
  position: relative
}

.menu-svg {
  width: .475rem;
  height: .475rem;
  position: absolute
}

.menu-btn {
  grid-column-gap: .375rem;
  grid-row-gap: .375rem;
  cursor: default;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: .1rem;
  display: flex;
  position: relative
}

.menu-links-w {
  grid-column-gap: .1rem;
  grid-row-gap: .1rem;
  text-align: right;
  flex-flow: column;
  margin-left: -1.4rem;
  display: flex;
  position: absolute
}

.arobase {
  margin-bottom: 0;
  font-size: .75rem;
  font-weight: 500
}

.pointer-none {
  pointer-events: none
}

.btn-sound {
  z-index: 10;
  grid-column-gap: .625rem;
  grid-row-gap: .625rem;
  background-color: var(--black);
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 100px;
  justify-content: space-between;
  align-items: center;
  margin-top: 1rem;
  padding: .25rem .5rem .25rem .875rem;
  font-size: .75rem;
  display: flex;
  position: absolute;
  top: 0
}

.toggle-sound {
  background-color: var(--white);
  border-radius: 100px;
  justify-content: flex-start;
  align-items: center;
  width: 1.25rem;
  height: .5rem;
  padding: 1px;
  display: flex;
  position: relative
}

.tick-sound {
  background-color: var(--black);
  border-radius: 50%;
  width: .375rem;
  height: .375rem
}

.papier-form {
  z-index: 5;
  width: 30rem;
  height: auto;
  position: absolute;
  inset: 10% auto auto 30%
}

.papier-form.word {
  top: 18%
}

.menu_wrapper,
.hide-desk {
  display: none
}

.text-block-7 {
  max-width: 35rem
}

.text-block-10 {
  pointer-events: none
}

@media screen and (max-width:991px) {

  .container.is--medium,
  .container.is--small,
  .container.is--medium,
  .container.is--small {
    max-width: calc(var(--size-container)*1)
  }

  .btn {
    justify-content: space-between;
    align-items: center
  }

  .btn.mob-menu {
    justify-content: space-between;
    align-self: center;
    align-items: center
  }

  .h3-style {
    font-size: 1.5625rem
  }

  .nav-boiler {
    height: auto;
    padding-top: 1rem
  }

  .h1-case.mob-work {
    font-size: 3.25rem
  }

  .h1-home {
    font-size: 2.5rem
  }

  .h1-home.balance {
    text-wrap: balance;
    text-wrap: balance
  }

  .loader {
    height: 100svh;
    display: none
  }

  .loader-img-w {
    width: 1rem;
    height: 10rem
  }

  .loader-img {
    width: 10rem;
    height: 10rem
  }

  .loader-img.coeur {
    opacity: 0;
    width: 8rem;
    height: 8rem
  }

  .loader-img.chewinggum {
    width: 10rem;
    height: 10rem
  }

  .loader-img.bonbon {
    width: 10rem;
    height: 7.5rem
  }

  .loader-img.star {
    width: 10rem;
    height: 10rem
  }

  .loader-img.papier {
    width: 10rem;
    height: 7.5rem
  }

  .loader-img.bonbon-copy {
    width: 10rem;
    height: 10rem
  }

  .n-load {
    opacity: 0;
    width: 3rem
  }

  .apos-load {
    width: 1rem;
    transform: scale(0)
  }

  .section.showreel {
    margin-top: 0
  }

  .section.error-404,
  .section-w {
    height: 100svh;
    margin-top: 0
  }

  .link.hide-desk {
    display: block
  }

  .p-l {
    font-size: 1.25rem
  }

  .section-fake-hero {
    height: 100svh;
    margin-top: 0;
    padding-left: 1rem;
    padding-right: 1rem
  }

  .space-150.mob-100,
  .space-150.mob-50,
  .space-150.mob-100,
  .space-150.mob-50 {
    padding-top: 6.25rem
  }

  .showreel-light {
    position: relative
  }

  .video-showreel-full-w {
    align-self: auto
  }

  .video-showreel-w {
    grid-column-gap: 2.375rem;
    grid-row-gap: 2.375rem;
    flex-flow: column;
    justify-content: flex-start;
    align-items: flex-start;
    height: auto;
    min-height: 0
  }

  .video-showreel-flip.p-m {
    padding: 0;
    position: relative;
    left: auto
  }

  .text-block-2.concept {
    max-width: none
  }

  .works-word {
    font-size: .625rem
  }

  .works-word-w {
    height: auto
  }

  .div-block-2 {
    justify-content: space-between;
    align-items: center;
    width: 100%
  }

  .titile-section-work {
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 5rem;
    padding-right: 0
  }

  .titile-section-work.work-template {
    margin-bottom: 2.5rem
  }

  .img-work {
    height: 100%
  }

  .short-p-work {
    font-size: 1.25rem
  }

  .work_list {
    grid-column-gap: 3.25rem;
    grid-row-gap: 3.25rem;
    grid-template-columns: 1fr
  }

  .text-block-3 {
    display: none
  }

  .musee-bg {
    transform: none
  }

  .musee-w {
    height: 80vh
  }

  .img-block-right-w {
    width: 100%
  }

  .img-block-grid {
    grid-template-rows: auto;
    margin-bottom: 5.625rem
  }

  .formes-w {
    min-height: 40rem
  }

  .etoile {
    width: 18rem;
    left: 28%
  }

  .n-cursor {
    left: 18%
  }

  .n-cursor._2 {
    bottom: 63%;
    right: 18%
  }

  .coeur-copy {
    right: 13%
  }

  .bonbon-copy {
    width: 5rem
  }

  .i-cursor {
    top: 55%
  }

  .merguez {
    width: 20rem;
    height: 14rem
  }

  .ballon {
    width: 9rem;
    height: 15rem
  }

  .div-block-7 {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    justify-content: space-between;
    align-items: flex-start;
    display: flex
  }

  .footer-info-w {
    justify-content: center;
    align-items: center
  }

  .menu-w {
    justify-content: space-between;
    align-items: center;
    width: 100%;
    display: flex
  }

  .menu-svg {
    width: .75rem;
    height: .7rem;
    margin-right: 0;
    position: relative
  }

  .menu-btn {
    justify-content: space-between;
    align-items: center;
    width: 100%
  }

  .menu-links-w {
    display: none
  }

  .div-block-8 {
    height: 25vh
  }

  .nbr-project {
    font-size: 3.25rem
  }

  .desc-work {
    font-size: 1.25rem
  }

  .grid-1-work {
    grid-template-columns: 1fr
  }

  .date-work {
    font-size: 1.25rem
  }

  .grid-1-left {
    grid-column-gap: 0rem;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    position: relative
  }

  .concept-w.p-m {
    justify-content: space-between;
    align-items: flex-start
  }

  .space-44.mob-65 {
    padding-top: 4.0625rem
  }

  .papier-form {
    object-fit: contain;
    width: 30rem;
    height: 26rem;
    top: 17%;
    left: 0;
  }

  .menu-btn-text {
    margin-left: -6.2rem
  }

  .menu_wrapper {
    z-index: 90;
    background-color: var(--white);
    flex-flow: column;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 100svh;
    padding: 1rem;
    display: none;
    position: fixed;
    inset: 0%
  }

  .link-menu {
    text-align: center;
    flex-flow: column;
    display: flex
  }

  .link-mob {
    letter-spacing: .03em;
    text-transform: uppercase;
    font-size: 1.875rem;
    font-weight: 700
  }

  .link-btn-menu {
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
    flex-flow: column;
    display: flex
  }

  .div-block-10 {
    grid-column-gap: 8.125rem;
    grid-row-gap: 8.125rem;
    flex-flow: column;
    display: flex
  }

  .fake-el-menu {
    height: 0
  }

  .hide-desk {
    display: block
  }

  .text-block-7 {
    max-width: none
  }

  .text-block-8 {
    flex: none
  }
}

@media screen and (max-width:767px) {
  h1 {
    font-size: 4.5em
  }

  h2 {
    font-size: 3.25em
  }

  .osmo-ui {
    position: fixed
  }

  .btn.mob-menu {
    border-style: none;
    border-width: 0
  }

  .h1-home {
    font-size: 2rem;
  }

  .loader {
    display: none
  }

  .n-load {
    margin-right: 0
  }

  .musee-w {
    height: 60vh
  }

  .info-w.p-l {
    flex-flow: column;
    padding-left: 0;
    padding-right: 0;
    display: flex
  }

  .img-block-left {
    margin-right: 0
  }

  .img-block-right-w {
    order: -9999;
    margin-bottom: 2.5rem
  }

  .img-block-grid {
    flex-flow: column;
    grid-template-columns: .75fr 1fr;
    display: flex
  }

  .img-block-grid.p-s {
    grid-column-gap: 2.5rem;
    grid-row-gap: 2.5rem;
    grid-column-gap: 2.5rem;
    grid-row-gap: 2.5rem;
    flex-flow: column
  }

  .n-cursor.word-1 {
    left: 20%
  }

  .glitch-img-w {
    height: 100vh
  }

  .text-block-6 {
    font-size: .75rem
  }

  .img-ascenseur {
    object-fit: cover;
    height: 100%
  }

  .ballon {
    height: 12rem
  }

  .video-reflet {
    filter: blur(20px);
    margin-top: 2rem
  }

  .concept-w.p-m {
    grid-column-gap: 1.25rem;
    grid-row-gap: 1.25rem;
    grid-column-gap: 1.25rem;
    grid-row-gap: 1.25rem;
    flex-flow: column
  }

  .credits-w {
    justify-content: space-between;
    align-items: center
  }

  .next-project-w {
    grid-column-gap: 2rem;
    grid-row-gap: 2rem;
    flex-flow: column
  }

  .div-block-9 {
    display: none
  }

  .menu_wrapper {
    display: flex
  }

  .text-block-7 {
    margin-top: 2.5rem
  }

  .text-block-9 {
    display: block
  }
}

@media screen and (max-width:479px) {
  .container.footer-c {
    padding-bottom: 1.5rem
  }

  .loader {
    display: none
  }

  .section.showreel {
    margin-top: 0
  }

  .section.error-404,
  .section.showreel {
    margin-top: 0
  }

  .section.info-img {
    overflow: clip
  }

  .section.glitch {
    overflow: visible
  }

  .section.error-404 {
    margin-top: 0
  }

  .section-w {
    height: 100vh;
    margin-top: 0
  }

  .link-lang.mob {
    background-color: var(--black);
    color: var(--white);
    background-color: var(--black)
  }

  .section-fake-hero {
    margin-top: 0
  }

  .space-150.mob-100,
  .space-150.mob-50,
  .space-150.mob-100,
  .space-150.mob-50 {
    padding-top: 6.25rem
  }

  .video-showreel-w {
    height: 100%;
    min-height: 0
  }

  .video-showreel-flip.p-m {
    grid-column-gap: 2.5rem;
    grid-row-gap: 2.5rem;
    grid-column-gap: 2.5rem;
    grid-row-gap: 2.5rem;
    flex-flow: column
  }

  .title-work.info-team {
    text-wrap: balance;
    text-wrap: balance;
    max-width: 8rem
  }

  .video-w {
    transform: scale(.7)
  }

  .musee-w {
    height: 50vh
  }

  .info-w.p-l {
    flex-flow: column;
    display: flex
  }

  .img-block-grid {
    flex-flow: column;
    justify-content: space-between;
    align-items: flex-start
  }

  .img-block-grid.p-s {
    flex-flow: column
  }

  .text-block-4 {
    display: inline-block
  }

  .text-block-4.marg-40 {
    margin-bottom: 3rem
  }

  .div-block-4 {
    grid-template-columns: 1fr 1fr
  }

  .fake-img {
    display: none
  }

  .info-grid-right.second {
    width: 100%
  }

  .formes-w {
    pointer-events: none;
    min-height: 40rem
  }

  .chewing-gum {
    top: 29%;
    right: 65%
  }

  .chewing-gum.error {
    top: 37%;
    right: 60%
  }

  .etoile {
    left: 1%
  }

  .etoile.error {
    top: -2%;
    left: 21%
  }

  .n-cursor {
    top: 14%;
    left: -1%
  }

  .n-cursor._2.word {
    right: 3%
  }

  .n-cursor.word._1 {
    top: 20%;
    transform: rotate(-34deg)
  }

  .t-cursor.word {
    font-size: 2rem;
    top: -4%;
    left: 11%
  }

  .h-cursor {
    bottom: 45%;
    left: 12%
  }

  .apos-cursor.word {
    top: 11%;
    right: 21%
  }

  .apos-cursor.word._2 {
    right: 7%
  }

  .coeur-copy {
    top: -6%;
    right: -6%
  }

  .bonbon-copy {
    bottom: 45%;
    right: 17%
  }

  .i-cursor {
    top: 60%
  }

  .finaltext {
    top: 45%
  }

  .img-glitch-w {
    flex-flow: column;
    justify-content: flex-end;
    align-items: flex-end;
    padding-left: 1.25rem;
    padding-right: 1.25rem
  }

  .merguez {
    align-self: flex-start;
    width: 12rem;
    height: 8rem;
    margin-bottom: -14.4rem
  }

  .ballon {
    width: 7rem;
    height: 9rem;
    margin-bottom: 1.8rem
  }

  .div-block-6 {
    flex-flow: column;
    justify-content: flex-start;
    align-items: center
  }

  .div-block-6.mob {
    justify-content: flex-start;
    align-items: flex-start
  }

  .div-block-7 {
    grid-column-gap: 3.75rem;
    grid-row-gap: 3.75rem;
    grid-template-rows: auto;
    grid-template-columns: 1fr;
    grid-auto-columns: 1fr;
    display: grid
  }

  .video-reflet {
    filter: blur(10px);
    margin-top: 1rem
  }

  .menu-svg {
    z-index: 10
  }

  .menu-btn {
    justify-content: space-between;
    align-items: center
  }

  .h1-case-next {
    font-size: 3.25rem
  }

  .title-work-flip {
    flex-flow: column;
    justify-content: space-between;
    align-items: flex-start
  }

  .nbr-project-flip-init {
    align-self: flex-end
  }

  .papier-form {
    left: -4%
  }

  .papier-form.word {
    top: 22%
  }

  .menu_wrapper {
    display: none
  }
}

#w-node-_4052a9ed-bc85-74d6-2f8d-4f251e3cf60d-78a9d1a3 {
  align-self: end
}

#w-node-_3bffa28f-e2c9-e1ae-1640-a1877cc8ebf8-78a9d1a3 {
  grid-area: span 2/span 1/span 2/span 1
}

#w-node-_8c8bfc91-8576-abe0-d854-49082250bec5-78a9d1a3 {
  grid-area: span 1/span 2/span 1/span 2
}

#w-node-_01baddd9-d465-59de-ee3e-5a9211c9095b-78a9d1a3 {
  grid-area: span 1/span 1/span 1/span 1;
  place-self: end
}

#w-node-_873b8711-445d-2907-3f1f-fca36caf4d24-78a9d1a3 {
  grid-area: span 1/span 2/span 1/span 2
}

#w-node-_873b8711-445d-2907-3f1f-fca36caf4d25-78a9d1a3 {
  grid-area: span 1/span 1/span 1/span 1;
  place-self: start end
}

#w-node-_5df3fb26-e0d9-a608-cc8d-469d5b5a1816-78a9d1a3 {
  grid-area: span 1/span 2/span 1/span 2
}

#w-node-_5df3fb26-e0d9-a608-cc8d-469d5b5a1817-78a9d1a3 {
  grid-area: span 1/span 1/span 1/span 1;
  place-self: start end
}

#w-node-_92fe2b40-7a92-f80a-554b-04fcd6a444e3-d6a444d6 {
  grid-area: 1/10/2/13
}

@media screen and (max-width:991px) {
  #w-node-_873b8711-445d-2907-3f1f-fca36caf4d24-78a9d1a3 {
    grid-area: span 1/span 2/span 1/span 2
  }

  #w-node-_92fe2b40-7a92-f80a-554b-04fcd6a444e3-d6a444d6 {
    grid-area: span 1/span 5/span 1/span 5;
    justify-self: end
  }
}

@media screen and (max-width:479px) {
  #w-node-_6684bafa-bc0c-93bc-385e-a867f46e25c6-78a9d1a3 {
    grid-area: span 1/span 2/span 1/span 2
  }

  #w-node-_92fe2b40-7a92-f80a-554b-04fcd6a444e3-d6a444d6 {
    grid-column: span 1/span 1
  }
}