* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html, body {
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
  position: fixed;
  width: 100%;
  height: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
:root {
  --padding: 20px;
  --font-size: 14px;
}
/* html {
  background-color: #EB9548;
} */
html {
  background-color: black;
}
body {
  font-family: 'Neue Haas Grotesk Display Pro', 'Neue Haas Grotesk Text Pro', 'Neue Haas Grotesk', Helvetica, sans-serif;
}
#app {
  position: relative;
  height: 100vh;
  height: 100dvh;
  padding: var(--padding);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

#app.active header span,
#app.active h1 {
  color: white;
}
#app.active .preview,
#app.active .preview img {
  opacity: 1;
  pointer-events: auto;
}
.preview {
  position: absolute;
  pointer-events: none;
  inset: 0;
  background-color: black;
  z-index: 2;
  opacity: 0;
}
.preview img {
  opacity: 0;
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
  transition: opacity 0.4s ease-in-out;
}
.bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}
.bg video {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  transition: transform 6s cubic-bezier(0.16, 1, 0.3, 1);
}
.logo {
  position: absolute;
  pointer-events: none;
  inset: 0;
  display: grid;
  place-items: center;
  /* z-index: 2; */
  /* transition: z-index 0.1s 1s linear; */
}
/* .loading .logo {
  z-index: 4;
} */
.loading .bg-video {
  transform: scale(1.1);
}
.loading .loader {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background-color: rgb(234, 234, 234, 1);
}
/* .loading header,
.loading footer {
  transform: scale(1.01);
  opacity: 0;
} */
.loading .logo-video {
  /* transform: scale(-1.2);
  opacity: 0; */
}
.logo-video {
  transition: all 8s linear, opacity 1s linear;
}
.loader {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background-color: rgb(234, 234, 234, 0);
  transition: all 1s linear;
}
.logo-video-mask {
  position: absolute;
  width: 55%;
  height: 55%;
  mask-image: url('data:image/svg+xml;utf8,<svg fill="none" viewBox="0 0 807 344" xmlns="http://www.w3.org/2000/svg"><path fill="white" d="M153.23 157.87c-8.25.79-25.54.59-45.58-6.84-22.8-8.42-54.23-27.2-81.74-50.1C-15.75 66.5-.03 50.47 23.35 41.07c23.39-9.39 99.43-38.35 99.43-38.35s33.2-10.76 54.81 10.57c11 10.96 15.72 18 18.08 27.4 1.77 7.04 1.38 17.02.4 26.4-.6 6.27-.2 14.49 17.09 9.4 25.74-7.63 96.08-38.16 104.33-28.57 8.25 9.59 6.48 15.85-12.97 26.42-19.45 10.56-81.74 50.48-101.19 63-16.5 10.96-26.33 18.59-50.1 20.54ZM276.62 125.79s49.51-28.96 66.22-35.81c16.7-6.85 21.22-3.72 25.15.4 3.93 4.1 6.48 10.36 27.3 4.5 0 0 38.12-12.53 51.48-6.47 13.37 5.87 6.49 13.7-3.53 21.14-10.02 7.24-72.5 46.56-107.08 51.26-34.59 4.89-63.08.98-67.99-7.05-5.3-8.02-2.36-20.93 8.45-27.97ZM406.1 167.85s55.02-35.6 60.71-38.15c5.7-2.54 25.15-11.94 38.32 2.74 0 0 16.7 28.56-14.54 47.93s-66.6 16.44-83.9 9.4c-17.1-6.85-4.52-19.18-.59-21.92ZM277.21 199.35s-40.28 12.92-9.43 36.98c0 0 22.99 17.22 35.96 27.6 12.96 10.36 30.84 13.88 51.08-.4 20.24-14.28 43.62-32.09 50.89-44.02 7.27-11.94 3.34-20.55-30.06-23.87-33.4-3.33-73.88-4.3-98.44 3.71ZM568.98 160.03s64.65-42.07 159.15-72.4c94.51-30.33 92.15 82.57 54.82 102.33-37.33 19.76-104.92 62.61-182.14 37.76-77.21-24.84-48.13-59.67-31.83-67.7ZM375.06 279.57l-19.85 19.57s-23.57 25.04 14.54 36.2c38.12 11.15 142.84 7.63 142.84 7.63s88.23-2.55 108.27-17.61c20.23-14.87 34.38-38.55 17.09-52.05-17.1-13.5-29.28-22.3-63.66-31.7-34.58-9.58-67.4-26.8-89.2-25.04-21.81 1.76-23.97-.2-41.66 10.96-17.88 11.15-68.37 52.04-68.37 52.04ZM43.4 257.86l65.23-39.72s36.15-19.18 52.26-5.09c16.12 14.09 13.56 25.83-23.18 43.44-36.74 17.6-48.34 25.24-83.7 34.63-35.37 9.4-59.14-2.94-49.52-12.13 9.83-9 38.9-21.13 38.9-21.13Z"/></svg>');
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg fill="none" viewBox="0 0 807 344" xmlns="http://www.w3.org/2000/svg"><path fill="white" d="M153.23 157.87c-8.25.79-25.54.59-45.58-6.84-22.8-8.42-54.23-27.2-81.74-50.1C-15.75 66.5-.03 50.47 23.35 41.07c23.39-9.39 99.43-38.35 99.43-38.35s33.2-10.76 54.81 10.57c11 10.96 15.72 18 18.08 27.4 1.77 7.04 1.38 17.02.4 26.4-.6 6.27-.2 14.49 17.09 9.4 25.74-7.63 96.08-38.16 104.33-28.57 8.25 9.59 6.48 15.85-12.97 26.42-19.45 10.56-81.74 50.48-101.19 63-16.5 10.96-26.33 18.59-50.1 20.54ZM276.62 125.79s49.51-28.96 66.22-35.81c16.7-6.85 21.22-3.72 25.15.4 3.93 4.1 6.48 10.36 27.3 4.5 0 0 38.12-12.53 51.48-6.47 13.37 5.87 6.49 13.7-3.53 21.14-10.02 7.24-72.5 46.56-107.08 51.26-34.59 4.89-63.08.98-67.99-7.05-5.3-8.02-2.36-20.93 8.45-27.97ZM406.1 167.85s55.02-35.6 60.71-38.15c5.7-2.54 25.15-11.94 38.32 2.74 0 0 16.7 28.56-14.54 47.93s-66.6 16.44-83.9 9.4c-17.1-6.85-4.52-19.18-.59-21.92ZM277.21 199.35s-40.28 12.92-9.43 36.98c0 0 22.99 17.22 35.96 27.6 12.96 10.36 30.84 13.88 51.08-.4 20.24-14.28 43.62-32.09 50.89-44.02 7.27-11.94 3.34-20.55-30.06-23.87-33.4-3.33-73.88-4.3-98.44 3.71ZM568.98 160.03s64.65-42.07 159.15-72.4c94.51-30.33 92.15 82.57 54.82 102.33-37.33 19.76-104.92 62.61-182.14 37.76-77.21-24.84-48.13-59.67-31.83-67.7ZM375.06 279.57l-19.85 19.57s-23.57 25.04 14.54 36.2c38.12 11.15 142.84 7.63 142.84 7.63s88.23-2.55 108.27-17.61c20.23-14.87 34.38-38.55 17.09-52.05-17.1-13.5-29.28-22.3-63.66-31.7-34.58-9.58-67.4-26.8-89.2-25.04-21.81 1.76-23.97-.2-41.66 10.96-17.88 11.15-68.37 52.04-68.37 52.04ZM43.4 257.86l65.23-39.72s36.15-19.18 52.26-5.09c16.12 14.09 13.56 25.83-23.18 43.44-36.74 17.6-48.34 25.24-83.7 34.63-35.37 9.4-59.14-2.94-49.52-12.13 9.83-9 38.9-21.13 38.9-21.13Z"/></svg>');
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  overflow: hidden;
  z-index: 0;
}
.logo-video {
  position: absolute;
  inset: 0;
  object-fit: cover;
  /* transform: scale(-1) translate(5%); */
  opacity: 0;
}
.logo-video.ready {
  opacity: 1;
}
.logo svg {
  width: 55%;
  position: relative;
  z-index: 2;
  -webkit-mask: url(sprite2.png);
  mask: url(sprite2.png);
  -webkit-mask-size: 7100% 100%;
  mask-size: 7100% 100%;
  -webkit-mask-position: 0% 0%;
  mask-position: 0% 0%;
  animation: maskReveal 1.1s steps(70) forwards;
}

@keyframes maskReveal {
  from {
    -webkit-mask-position: 100% 0%;
    mask-position: 100% 0%;
    transform: scale(0.9);
    filter: blur(20px);
  }
}
h1 {
  position: absolute;
  z-index: 4;
  top: 50%;
  left: var(--padding);
  transform: rotate(-90deg) translateX(-50%);
  transform-origin: top left;
  white-space: nowrap;
  font-size: Min(var(--font-size), 2vh);
  font-family: 'Times New Roman', Times, serif;
  letter-spacing: -0.02em;
  font-weight: 400;
}
footer {
  --switch: -1;
  z-index: 1;
}
header,
footer {
  display: flex;
  justify-content: space-between;
  font-weight: 600;
  text-transform: uppercase;
  animation: showH1 2s 1s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}
header {
  position: relative;
  font-size: var(--font-size);
  line-height: 1.1;
  z-index: 3;
}
header > :first-of-type {
  width: 100%;
  max-width: 82ch;
  flex-shrink: 1;
  text-wrap: pretty;
}
.submitted {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 3;
  text-transform: uppercase;
  font-size: var(--font-size);
  line-height: 1.1;
  font-weight: 600;
  text-align: center;
  padding: 0 25vw;
  background-color: #EAEAEA;
  opacity: 0;
  filter: blur(8px);
  pointer-events: none;
}
.submitted.show {
  opacity: 1;
  filter: blur(0);
  pointer-events: auto;
}
.submitted.show p {
  animation: showH1 2s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}
header > p:last-of-type {
  flex: 0 0 auto;
  text-align: right;
  margin-left: calc(var(--padding) * 2);
  white-space: nowrap;
  text-transform: none;
}
.consent {
  font-size: 10px;
  line-height: 1.1;
  text-transform: none;
  width: 75ch;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
.consent a {
  color: inherit;
}
.checkbox {
  appearance: none;
  -webkit-appearance: none;
  display: block;
  background-color: transparent;
  width: 17px;
  height: 17px;
  border: 3px solid black;
  border-radius: 0;
  flex-shrink: 0;
  position: relative;
  cursor: pointer;
}
.checkbox::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: 7px;
  height: 7px;
  background-color: black;
  transition: transform 0.2s ease-out;
}
.checkbox:checked::after {
  transform: translate(-50%, -50%) scale(1);
}
.input-container {
  flex: 1 1 auto;
  max-width: 71ch;
  display: flex;
  gap: 8px;
}
.input {
  width: 100%;
  border: none;
  background: none;
  border-radius: 0;
  padding-bottom: 1px;
  border-bottom: 3px solid;
  font-family: inherit;
  font-weight: inherit;
  text-transform: inherit;
  cursor: pointer;
  transition: border-color .8s linear;
}
.input:focus,
.input:not(:placeholder-shown):not(:valid) {
  border-color: rgb(0, 0, 0, .5);
}
.input:valid {
  border-color: rgb(0, 0, 0, 1);
}
input::placeholder {
  color: inherit;
  font-size: var(--font-size);
}
input:focus {
  outline: none;
}
button {
  position: relative;
  background: none;
  border: none;
  font-family: inherit;
  font-weight: inherit;
  text-transform: inherit;
  background-color: black;
  color: rgb(255, 255, 255, .8);
  flex: 0 0 auto;
  text-align: left;
  width: 40ch;
  padding-left: 5px;
  line-height: 20px;
  padding-top: 1px;
  margin-left: calc(var(--padding) * 2);
  white-space: nowrap;
  cursor: pointer;
}
button span {
  position: relative;
  z-index: 1;
  transition: color 0.4s linear;
  transition-delay: calc(0.02s * var(--index));
}
button::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: rgb(255, 255, 255, .5);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}
button:hover span {
  color: black;
}
button:hover::before {
  transform-origin: left;
  transform: scaleX(1);
}
p span {
  text-decoration: underline;
  cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
  p span:hover {
    animation: blink 0.5s infinite;
  }
  @keyframes blink {
    to {
      color: white;
    }
  }
}

@media (max-width: 790px) {
  header > p:last-of-type {
    display: none;
  }
  h1 {
    left: calc(var(--padding) / 2);
    transform: rotate(-90deg) translateX(-45%);
  }
  header, footer, footer form {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  footer {
    position: relative;
    padding-bottom: 3ch;
  }
  button,
  input {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    line-height: 30px;
    text-align: center;
  }
  .input {
    line-height: 15px;
  }
  button {
    margin-top: 7px;
  }
  .input-container {
    width: 100%;
    max-width: 100%;
  }
  .consent {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    max-width: 50ch;
    text-align: left;
    gap: 12px;
  }
}
@media (max-width: 790px) {
  .logo svg,
  .logo-video-mask {
    max-height: 35vh;
  }
}
@media (max-width: 790px) and (orientation: portrait) {
  .logo svg {
    width: 90%;
    max-width: 55vh;
    transform: rotate(90deg) translateX(-5%);
  }
  .logo-video-mask {
    transform: rotate(90deg) translateX(-5%);
    width: 90%;
    height: 90%;
    max-width: 55vh;
  }
  @keyframes maskReveal {
    from {
      -webkit-mask-position: 100% 0%;
      mask-position: 100% 0%;
      transform: scale(0.9) rotate(90deg);
      filter: blur(20px);
    }
  }
}
@media (max-width: 550px) {
  :root {
    --padding: 18px;
    --font-size: 12px;
  }
}


@media (max-width: 312px) {
  footer {
    padding-bottom: 4ch;
  }
}
@media (max-width: 238px) {
  footer {
    padding-bottom: 5ch;
  }
}
@media (max-width: 194px) {
  footer {
    padding-bottom: 6ch;
  }
}
@media (max-width: 176px) {
  footer {
    padding-bottom: 7ch;
  }
}
@media (max-width: 155px) {
  footer {
    padding-bottom: 8ch;
  }
}