*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: calc(16 / var(--viewport-width) * 100vw);
}

body {
  margin: 0;
  color: var(--c-text-primary);
}

a,
button {
  border: none;
  color: inherit;
  cursor: pointer;
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
}

.placeholder-wrap {
  contain: content;
  height: 100lvh;
  padding: 1.5rem;
  background-size: cover;
  background-position: center;
  background-image: url('../public/images/placeholder-bg-back.webp');

  @media screen and (max-width: 1023px) {
    padding: 7.625rem 1.75rem;
    background-image: url('../public/images/placeholder-bg-back-mob.webp');
  }
}

.title-wrap {
  position: relative;
  margin: 0 auto;
  max-width: 34.5rem;
}

.placeholder-title {
  text-align: center;
}

.title-caption {
  position: absolute;
  bottom: 1.9375rem;

  @media screen and (max-width: 1023px) {
    bottom: 1rem;
  }
}

.title-caption-1 {
  left: 6.625rem;

  @media screen and (max-width: 1023px) {
    left: 1.6875rem;
  }
}

.title-caption-2 {
  right: 6.28125rem;

  @media screen and (max-width: 1023px) {
    right: 1.4375rem;
  }
}

.clouds-wrap {
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.clouds-wrap-1 {
  opacity: 0.1;
  mix-blend-mode: plus-lighter;
}

.clouds-wrap-1 .cloud-row-1 {
  --top-offset: -236;
  --media-width: 784;
  --left-offset: 624;
  --ticker-duration: 55s;

  @media screen and (max-width: 1023px) {
    --top-offset: 182;
    --media-width: 708;
    --left-offset: 58;
    --ticker-duration: 15s;
  }
}

.clouds-wrap-2 {
  opacity: 0.1;
  mix-blend-mode: plus-lighter;
}

.clouds-wrap-2 .cloud-row-1 {
  --top-offset: 9;
  --media-width: 975;
  --left-offset: 850;
  --ticker-duration: 45s;

  @media screen and (max-width: 1023px) {
    --top-offset: -129;
    --media-width: 708;
    --left-offset: -195;
    --ticker-duration: 10s;
  }
}

.clouds-wrap-3 {
  opacity: 0.5;

  @media screen and (max-width: 1023px) {
    display: none;
  }
}

.clouds-wrap-3 .cloud-row-1 {
  --top-offset: 82;
  --media-width: 900;
  --left-offset: -114;
  --ticker-duration: 60s;
}

.clouds-wrap-4 {
  opacity: 0.12;
  mix-blend-mode: plus-lighter;

  @media screen and (max-width: 1023px) {
    display: none;
  }
}

.clouds-wrap-4 .cloud-row-1 {
  --top-offset: -545;
  --media-width: 1788;
  --left-offset: 936;
  --ticker-duration: 50s;
}

.clouds-wrap-4 .cloud-row-2 {
  --top-offset: 93;
  --media-width: 1788;
  --left-offset: -803;
  --ticker-duration: 40s;
}

.cloud-row {
  position: absolute;
  top: calc(var(--top-offset) / var(--viewport-height) * 100lvh);
  left: 0;
  display: flex;
  width: 100%;
}

.cloud-thumb {
  flex-shrink: 0;
  width: 100%;
  animation: ticker var(--ticker-duration) linear infinite;
}

.cloud-media {
  width: calc(var(--media-width) / var(--viewport-width) * 100%);
  margin-left: calc(var(--left-offset) / var(--viewport-width) * 100%);
}
.cloud-media::before {
  content: '';
  display: block;
  padding-top: calc(948 / 1788 * 100%);
  background-size: contain;
  background-position: center;
  background-image: url('../public/images/cloud.webp');
}

@keyframes ticker {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

.placeholder-front-bg {
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-image: url('../public/images/placeholder-bg-front.webp');

  @media screen and (max-width: 1023px) {
    background-image: url('../public/images/placeholder-bg-front-mob.webp');
  }
}

.content-wrap {
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  padding: 1.5rem;

  @media screen and (max-width: 1023px) {
    padding: 1rem;
  }
}
.content-wrap > * {
  pointer-events: all;
}

.placeholder-overlay {
  opacity: 0.15;
  mix-blend-mode: darken;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: calc(317 / 800 * 100%);
  background-image: linear-gradient(
    360deg,
    #000000 0%,
    rgba(0, 0, 0, 0.991615) 11.79%,
    rgba(0, 0, 0, 0.967585) 21.38%,
    rgba(0, 0, 0, 0.9296) 29.12%,
    rgba(0, 0, 0, 0.879348) 35.34%,
    rgba(0, 0, 0, 0.818519) 40.37%,
    rgba(0, 0, 0, 0.7488) 44.56%,
    rgba(0, 0, 0, 0.671881) 48.24%,
    rgba(0, 0, 0, 0.589452) 51.76%,
    rgba(0, 0, 0, 0.5032) 55.44%,
    rgba(0, 0, 0, 0.414815) 59.63%,
    rgba(0, 0, 0, 0.325985) 64.66%,
    rgba(0, 0, 0, 0.2384) 70.88%,
    rgba(0, 0, 0, 0.153748) 78.62%,
    rgba(0, 0, 0, 0.0737185) 88.21%,
    rgba(0, 0, 0, 0) 100%
  );

  @media screen and (max-width: 1023px) {
    opacity: 0.2;
    left: -2.5rem;
    bottom: 10.75rem;
    width: 31rem;
    height: 13.5rem;
    background-image: radial-gradient(
      50% 50% at 50% 50%,
      #000000 0%,
      rgba(0, 0, 0, 0) 100%
    );
  }
}

.content-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  @media screen and (max-width: 1023px) {
    align-items: center;
    padding: 0 1rem 0.9375rem;
    margin: 0 -1rem;
    border-bottom: 0.0625rem solid var(--c-text-primary-10);
  }
}

.placeholder-logo {
  width: 8.9375rem;
  height: 2.1875rem;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  background-image: url('../public/icons/logo.svg');
}

.content-footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;

  @media screen and (max-width: 1023px) {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 3.5rem;
  }
}

.contact-wrap {
  color: var(--c-accent);

  @media screen and (max-width: 1023px) {
    text-align: center;
  }
}

.contact-link {
  display: block;
  margin-top: 0.75rem;
  transition: opacity var(--transition);

  @media screen and (max-width: 1023px) {
    margin-top: 0.375rem;
  }
}

@media (hover: hover) {
  .contact-link:hover {
    opacity: 0.8;
  }
}

.form-wrap {
  width: 22.875rem;
  padding: 0.25rem;
  background-color: var(--c-accent);

  @media screen and (max-width: 1023px) {
    width: 100%;
  }
}

.form-inner {
  position: relative;
}
.form-inner::after {
  content: '';
  opacity: 0.1;
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0.0625rem solid var(--c-text-primary);
}

.form-inner.is-success .form-container {
  opacity: 0;
  visibility: hidden;
}

.form-container {
  padding: 1.75rem;
  transition:
    opacity var(--transition),
    visibility var(--transition);

  @media screen and (max-width: 1023px) {
    padding: 1.25rem;
  }
}

.form-description {
  max-width: 15.9375rem;

  @media screen and (max-width: 1023px) {
    margin: 0 auto;
    text-align: center;
  }
}

.form {
  display: flex;
  gap: 0.5rem;
  margin-top: 5rem;

  @media screen and (max-width: 1023px) {
    margin-top: 3.5rem;
  }
}

.form-input {
  flex-grow: 1;
  padding: 0 1.25rem;
  border-radius: 6.3125rem;
  border: 0.0625rem solid var(--c-text-primary-10);
  background-color: transparent;
  outline: none;
  -webkit-text-fill-color: var(--c-text-primary);
  transition: border-color var(--transition);
}

@media (hover: hover) {
  .form-input:hover {
    border-color: var(--c-text-primary);
  }
}

.form-input:focus::placeholder {
  opacity: 0;
}

.form-button {
  flex-shrink: 0;
  padding: 1.0625rem;
  border-radius: 50%;
  background-color: var(--c-text-primary);
}

@media (hover: hover) {
  .form-button:hover .form-button-icon::before,
  .form-button:hover .form-button-icon::after {
    transform: translateX(0);
  }
}

.form-button-icon {
  content: '';
  display: flex;
  width: 1.25rem;
  height: 1.25rem;
  overflow: hidden;
}

.form-button-icon::before,
.form-button-icon::after {
  content: '';
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  transition: transform var(--transition);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url('../public/icons/caret.svg');
  transition: transform var(--transition);
  transform: translateX(-100%);
}

.form-button:disabled,
.form-input:disabled {
  cursor: progress;
  opacity: 0.6;
}

.form.is-error .form-input {
  border-color: var(--c-error);
  color: var(--c-error);
  -webkit-text-fill-color: var(--c-error);
}

.form.is-error .form-input::placeholder {
  color: var(--c-error);
}

.form-inner.is-success .success-wrap {
  opacity: 1;
  visibility: visible;
}

.success-wrap {
  opacity: 0;
  visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  padding: 1.75rem;
  transition:
    opacity var(--transition),
    visibility var(--transition);

  @media screen and (max-width: 1023px) {
    padding: 1.25rem;
    flex-direction: column-reverse;
    align-items: center;
    text-align: center;
  }
}

.success-title-wrap {
  display: flex;
  justify-content: space-between;

  @media screen and (max-width: 1023px) {
    display: contents;
  }
}
.success-title-icon {
  width: 1.6875rem;
  height: 1.6875rem;
  margin: -0.5rem -0.5rem 0 0;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url('../public/icons/check.svg');

  @media screen and (max-width: 1023px) {
    margin: 0;
  }
}

.success-title__item {
  display: block;
}
.success-title__item:last-child {
  color: var(--c-text-primary-40);
}

.success-description {
  max-width: 17.25rem;

  @media screen and (max-width: 1023px) {
    max-width: 17.4375rem;
  }
}