.cta-form-section {
  padding-top: 122px;

  /* .top-mask {
    @apply w-full h-52px;
    mask-image: url("../assets/masks/hounder-mask_homepage-cta-top.svg");
    mask-position: bottom;
    mask-size: 100%;
    background-color: var(--page-bg);
  } */
  .top-mask {
    margin-bottom: -1px;
  }

  .text-wrapper {
    width: 100%;
    max-width: 870px;
    color: var(--snowdog);
    margin: 0 auto 40px auto;

    h2, p {
      color: var(--snowdog);
    }
  }

  .bottom-wrapper {
    padding-top: 36px;
    background-color: var(--slobber);

    &.form-spacing {

      &-none {
        padding-bottom: 0px;
      }

      &-xsmall {
        @apply pb-12px sm:pb-28px lg:pb-48px;
        padding-bottom: 12px;

        @media(min-width: 768px) {
          padding-bottom: 28px;
        }

        @media(min-width: 1440px) {
          padding-bottom: 48px;
        }
      }

      &-small {
        padding-bottom: 16px;

        @media(min-width: 768px) {
          padding-bottom: 32px;
        }

        @media(min-width: 1440px) {
          padding-bottom: 64px;
        }
      }

      &-medium {
        padding-bottom: 24px;

        @media(min-width: 768px) {
          padding-bottom: 48px;
        }

        @media(min-width: 1440px) {
          padding-bottom: 96px;
        }
      }

      &-large {
        padding-bottom: 32px;

        @media(min-width: 768px) {
          padding-bottom: 64px;
        }

        @media(min-width: 1440px) {
          padding-bottom: 128px;
        }
      }

      &-xlarge {
        padding-bottom: 48px;

        @media(min-width: 768px) {
          padding-bottom: 100px;
        }

        @media(min-width: 1440px) {
          padding-bottom: 160px;
        }
      }

    }

    .hbspt-form {
      max-width: 900px;
      margin: 0px auto;

      form {
        display: flex;
        align-items: start;
        justify-content: start;
        flex-wrap: wrap;
      }


      .hs-form-field.hs_email,
      .hs-form-field.hs_firstname,
      .hs-form-field.hs_lastname,
      .hs-form-field.hs_company {
        max-width: 50%;
        width: 100%;
      }

      .hs-form-field.hs_message {
        width: 100%;
      }

      .hs-input {
        border: 2px solid var(--snowdog) !important;
        background-color: transparent !important;

        &:focus,
        &:focus-visible,
        &:hover {
          border-color: var(--kibble) !important;
          outline: none !important;
        }

        &:focus-within {
          border-color: var(--kibble) !important;
          box-shadow: none !important;
          outline: none !important;
        }

        &::placeholder {
          color: var(--snowdog) !important;
        }
      }

      ul {
        list-style: none !important;

        li::before {
          display: none !important;
        }
      }


      .legal-consent-container {
        color: #fff !important;
      }
    }

    .hbspt-form label,
    .hbspt-form span {
      color: var(--snowdog) !important;
    }

    .text-wrapper .form-description {
      text-align: center;
    }
  }

  .text-wrapper {
    color: var(--snowdog);
    margin-bottom: 100px;

    h2,h3,h4,h5,h6 {
      /* @apply fs-6 mb-32px font-serif text-center; */
      text-align: center;
      margin-bottom: 32px;
      font-weight: 300;
    }

    p {
      /* @apply fs-1 font-serif text-center; */
      text-align: center;
    }
  }

  .form-wrapper {
    background-color: var(--slobber);

    .sib-form {
      @apply py-64px;

      background-color: initial !important;

      .sib-form-container {
        background-color: initial !important;

        .sib-container--large {
          background-color: initial !important;
          border: none !important;
        }

        div {
          .sib-input {
            .form__entry {
              .form__label-row {

                .entry__label {
                  @apply font-serif text-white mb-4px !important;
                }

                .entry__field {
                  @apply rounded-full !important;
                  background-color: inherit !important;
                  border: 2px solid var(--white) !important;

                  .input {
                    @apply font-serif;

                    &:focus {
                      border-color: var(--kibble) !important;
                    }
                  }

                  &:focus-within {
                    box-shadow: none !important;
                    border-color: var(--kibble)!important;
                  }


                  &.big {
                    border-radius: 16px !important;
                  }

                  input:-webkit-autofill {
                    -webkit-box-shadow: 0 0 0 30px var(--slobber) inset !important;
                    -webkit-text-fill-color: white !important;
                      width: 90%;
                  }
                }
              }

              .entry__specification {
                @apply hidden;
              }
            }
          }

          .sib-optin {
            .form__entry {
              .form__label-row {
                .entry__label {
                  @apply text-white font-serif !important;
                }
                .entry__choice {
                  label {
                    span {
                      @apply text-white font-serif !important;
                    }
                  }
                }

                .entry__specification {
                  @apply text-white font-serif !important;
                }
              }
            }
          }
        }

      }
      & * {
        @apply text-white !important;
      }
    }
  }
}

#block-hounder-base-hubspotformblock > h2 {
  display: none;
}

.sib-form .input_replaced:checked+.checkbox_tick_positive {
  background: initial !important;
  border-color: var(--kibble) !important;
  box-shadow: none !important;


  &:before {
    @apply block;
    border-width: 0 2px 2px 0 !important;
  }

}

.sib-form .checkbox {
  background: initial !important;
  border:2px solid var(--white) !important;
  box-shadow: none !important;
}

.checkbox.checkbox_tick_positive {
  &:before {
    @apply hidden;
  }
}

#sib-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

  .text-area-wrapper {
    grid-column: -1 / 1;

    textarea {
      &::-webkit-resizer {
        display: none;
      }
    }

  }
}