/* ============================================================
   SIMBA - CONTACT PAGE
   Loaded after styles.css and careers.css, which provide the
   tokens, header, .cta, .panel and the .form / .field primitives.
   Only the contact page's compact sizing lives here: the Send
   button must sit above the fold on a 1280x720 laptop.
   ============================================================ */

.c-contact {
  padding: 28px 0 48px;
}

.c-contact__panel {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(20px, 3vw, 32px);
}

.c-contact__head {
  text-align: center;
  margin-bottom: 18px;
}

.c-contact__head .page-title,
.c-contact__thanks .page-title {
  margin-top: 8px;
  font-size: clamp(26px, 3vw, 36px);
}

.c-contact__head .copy,
.c-contact__thanks .copy {
  margin: 8px auto 0;
  max-width: 46ch;
}

.c-form .form__grid {
  gap: 10px 12px;
}

.c-form .field__label {
  margin-bottom: 6px;
}

.c-form .field input,
.c-form .field select {
  padding: 11px 13px;
}

.c-form .field__error {
  margin-top: 5px;
}

.c-form .form__actions {
  margin-top: 16px;
  justify-content: center;
}

.c-form .form__actions .cta {
  min-width: 200px;
}

.c-form .form__note:empty {
  display: none;
}

/* Off-screen honeypot: real visitors never see or tab into it. */
.c-form__hp {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.c-contact__thanks {
  text-align: center;
  padding: 12px 0 6px;
}

.c-contact__thanks .page-title:focus {
  outline: none;
}

.c-contact__thanks .cta {
  margin-top: 18px;
}

.c-contact__noscript {
  text-align: center;
}

.c-contact__noscript a {
  color: inherit;
  text-decoration: underline;
}

@media (max-width: 900px) {
  .c-contact {
    padding-top: 20px;
  }
}