.kl-form{
  --kl-red:#8c0014;
  --kl-line:#dedad6;
  width:100%;
  max-width:760px;
  margin:0;
  font-family:inherit;
}

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

.kl-form p{
  max-width:none;
}

.kl-form-heading{
  margin:0 0 8px;
}

.kl-form-intro{
  margin:0 0 22px;
  color:#696969;
  line-height:1.6;
}

.kl-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}

.kl-field{
  margin:0 0 14px;
}

.kl-grid .kl-field{
  margin-bottom:0;
}

.kl-field label{
  display:block;
  margin-bottom:6px;
  font-size:13px;
  font-weight:700;
  letter-spacing:.02em;
}

.kl-field input[type=text],
.kl-field input[type=email],
.kl-field input[type=tel],
.kl-field textarea,
.kl-field select,
.kl-field input[type=file]{
  display:block;
  width:100%;
  max-width:100%;
  min-height:50px;
  margin:0;
  padding:13px 14px;
  border:1px solid var(--kl-line);
  background:#fff;
  font:inherit;
  font-size:15px;
  line-height:1.4;
  color:#171717;
  border-radius:0;
  -webkit-appearance:none;
  appearance:none;
}

.kl-field input[type=file]{
  padding:12px 14px;
  line-height:1.3;
}

.kl-field input[type=file]::file-selector-button{
  margin-right:12px;
  padding:8px 12px;
  border:1px solid var(--kl-line);
  background:#f5f3f1;
  font:inherit;
  font-size:13px;
  cursor:pointer;
}

.kl-field textarea{
  resize:vertical;
  min-height:110px;
}

.kl-field input:focus,
.kl-field textarea:focus,
.kl-field select:focus{
  outline:2px solid var(--kl-red);
  outline-offset:1px;
  border-color:var(--kl-red);
}

/* Chrome paints autofilled fields with its own yellow; keep our box. */
.kl-field input:-webkit-autofill,
.kl-field input:-webkit-autofill:hover,
.kl-field input:-webkit-autofill:focus,
.kl-field select:-webkit-autofill{
  -webkit-text-fill-color:#171717;
  -webkit-box-shadow:0 0 0 60px #fff inset;
  box-shadow:0 0 0 60px #fff inset;
  caret-color:#171717;
}

/* Selects: same box as the inputs, with our own arrow. */
.kl-field select{
  padding-right:40px;
  cursor:pointer;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23171717' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-size:11px 7px;
}

.kl-field select:invalid,
.kl-field select option[value=""]{
  color:#7d7d7d;
}

/* Da / Nu pills. */
.kl-field-choice .kl-label{
  display:block;
  margin-bottom:6px;
  font-size:13px;
  font-weight:700;
  letter-spacing:.02em;
}

.kl-field-choice .kl-options{
  display:flex;
  gap:10px;
}

/* Beats the .kl-field label block above, which would otherwise stack the
   radio and its text. */
.kl-field .kl-option{
  display:flex;
  align-items:center;
  gap:9px;
  flex:1 1 0;
  min-height:50px;
  margin:0;
  padding:0 16px;
  border:1px solid var(--kl-line);
  background:#fff;
  font-size:15px;
  font-weight:400;
  letter-spacing:normal;
  line-height:1.3;
  cursor:pointer;
}

.kl-field .kl-option input[type=radio]{
  width:18px;
  height:18px;
  min-height:0;
  margin:0;
  padding:0;
  border:0;
  accent-color:var(--kl-red);
  flex:0 0 auto;
}

.kl-field .kl-option:has(input:checked){
  border-color:var(--kl-red);
  box-shadow:inset 0 0 0 1px var(--kl-red);
}

.kl-field .kl-option:focus-within{
  outline:2px solid var(--kl-red);
  outline-offset:1px;
}

.kl-field-wide{
  margin-top:14px;
}

.kl-hint{
  display:block;
  margin-top:7px;
  font-size:12px;
  color:#7d7d7d;
}

.kl-consent label{
  display:flex;
  gap:10px;
  align-items:flex-start;
  font-weight:400;
  font-size:14px;
  line-height:1.5;
  color:#555;
}

.kl-consent input{
  width:20px;
  height:20px;
  margin-top:1px;
  flex:0 0 auto;
}

.kl-consent a{
  color:var(--kl-red);
  text-decoration:underline;
}

.kl-hp{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}

.kl-submit{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:52px;
  margin-top:18px;
  padding:0 26px;
  background:var(--kl-red);
  border:1px solid var(--kl-red);
  color:#fff;
  font:inherit;
  font-size:14px;
  font-weight:700;
  cursor:pointer;
  transition:.2s ease;
}

.kl-submit:hover:not(:disabled){
  background:#69000f;
  border-color:#69000f;
}

.kl-submit:disabled{
  opacity:.6;
  cursor:default;
}

.kl-message{
  margin-top:16px;
  font-size:15px;
  line-height:1.55;
}

.kl-message:empty{
  display:none;
}

.kl-message.is-ok{
  padding:14px 16px;
  background:#f1f6f1;
  border-left:3px solid #2f7a3d;
  color:#255c2f;
}

.kl-message.is-error{
  padding:14px 16px;
  background:#fbf1f2;
  border-left:3px solid var(--kl-red);
  color:#8c0014;
}

@media(max-width:782px){
  .kl-grid{
    grid-template-columns:1fr;
    gap:0;
  }

  .kl-grid .kl-field{
    margin-bottom:14px;
  }

  .kl-field input[type=text],
  .kl-field input[type=email],
  .kl-field input[type=tel],
  .kl-field textarea,
  .kl-field select,
  .kl-field input[type=file]{
    min-height:52px;
    font-size:16px;
  }

  .kl-field .kl-option{
    min-height:52px;
    font-size:16px;
  }

  .kl-field-choice .kl-label{
    font-size:14px;
  }

  .kl-field textarea{
    min-height:120px;
  }

  .kl-field label{
    font-size:14px;
  }

  .kl-consent label{
    font-size:14px;
    padding:4px 0;
  }

  .kl-submit{
    width:100%;
    min-height:54px;
    margin-top:20px;
    font-size:15px;
  }

  .kl-message{
    font-size:15px;
  }
}

.kl-form[data-busy="1"]{
  opacity:.75;
}

.kl-field input:disabled,
.kl-field textarea:disabled,
.kl-field select:disabled{
  background-color:#f6f5f3;
}