/* Shared by the two pages with a real lead-capture form: contact.php and
   it-assessment.php. Consolidated out of site-refinements.css/
   site-components.css, which used to load this on every page of the site. */

.contact-panel form {
  margin-top: 1.25rem;
}

.form-two {
  align-items: start;
}

.contact-panel label {
  display: grid !important;
  grid-template-rows: auto 48px;
  gap: .45rem;
  margin: 0 0 1rem !important;
  min-width: 0;
}

.contact-panel .message-field {
  grid-template-rows: auto auto;
}

.field-label {
  display: inline-flex;
  align-items: baseline;
  gap: .28rem;
  min-height: 1.5rem;
  line-height: 1.5rem;
  font-weight: 750;
}

.required-mark {
  display: inline-block;
  color: var(--orange);
  font-weight: 900;
  line-height: 1;
  transform: translateY(-1px);
}

.required-note {
  display: flex;
  align-items: center;
  gap: .35rem;
  margin: -.25rem 0 .75rem;
  font-size: .8rem;
  color: var(--muted);
}

.contact-panel input,
.contact-panel textarea {
  width: 100%;
  min-width: 0;
  margin: 0 !important;
  transition: border-color .2s, box-shadow .2s;
}

.contact-panel input:hover,
.contact-panel textarea:hover {
  border-color: color-mix(in srgb, var(--teal) 55%, var(--line));
}

.contact-panel input,
.contact-panel button[type="submit"] {
  min-height: 48px;
}

.contact-panel textarea {
  min-height: 150px;
  resize: vertical;
}

.cf-turnstile {
  margin: .25rem 0 1rem;
  min-height: 65px;
}

.form-protection-note {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin: .25rem 0 1rem;
  color: var(--muted);
  font-size: .8rem;
}

.form-protection-note svg {
  width: 18px;
  height: 18px;
  color: var(--teal);
}

.contact-hero {
  padding-top: 2.75rem !important;
  padding-bottom: 4rem !important;
}

.contact-hero h1 em {
  color: var(--teal);
  font-style: normal;
}

@media (max-width: 600px) {
  .contact-hero {
    padding-top: 2rem !important;
  }
}