/* Contact us — frames pumt123-contact-us (1440) and -mobile (390). */

.page--contact { background: var(--color-bg); }

/* ── hero: 1440×480, text column 1040, hairline gutter ────────────────── */
.contact-hero { display: flex; min-height: 480px; }
.contact-hero__left {
  display: flex; flex-direction: column; justify-content: space-between;
  width: 1040px; flex: none; padding: var(--space-48);
}
.contact-hero__intro { display: flex; flex-direction: column; gap: var(--space-16); width: 944px; }
.contact-hero__intro .eyebrow { font-size: var(--fs-2xs); line-height: 14px; letter-spacing: .18em; text-transform: uppercase; }
.contact-hero__intro .eyebrow--rule::before { width: 20px; }
.contact-hero__title {
  color: var(--color-text-alt);
  font-family: var(--font-display); font-weight: 900;
  font-size: 54px; line-height: 59px; letter-spacing: -.02em;
}
.contact-hero__lead { color: var(--color-muted-2); font-size: 15px; line-height: 23px; }

.contact-hero__info { display: flex; flex-direction: column; gap: var(--space-16); }
.contact-hero__cta {
  color: var(--color-brand-2); text-decoration: none;
  font-family: var(--font-display); font-weight: 900;
  font-size: var(--fs-xs); line-height: 15px;
  transition: color var(--dur-fast) var(--ease);
}
.contact-hero__cta:hover { color: var(--color-brand-hover); }
.contact-hero__topics {
  color: var(--color-muted-2);
  font-family: var(--font-display); font-weight: 900;
  font-size: var(--fs-3xs); line-height: 12px;
}
/* TZ.md: the support address, added under the topics line. */
.contact-hero__email { color: var(--color-muted-2); font-size: var(--fs-sm); line-height: 18px; }
.contact-hero__email a { color: var(--color-text-alt); text-underline-offset: 3px; }
.contact-hero__email a:hover { color: var(--color-brand-2); }

.contact-hero__divider { flex: 1; display: flex; align-items: flex-end; }
.contact-hero__divider::before { content: ""; width: 100%; height: 1px; background: var(--color-border); }

/* ── form section: 1440×765, pad 80, info 360 / card 800 ──────────────── */
.contact-form { padding: var(--space-80); }
.contact-form__inner { display: flex; align-items: flex-start; gap: 120px; }
.contact-form__info { display: flex; flex-direction: column; gap: var(--space-16); width: 360px; flex: none; }
.contact-form__eyebrow {
  color: var(--color-brand-2);
  font-family: var(--font-display); font-weight: 900;
  font-size: var(--fs-xs); line-height: 15px;
}
.contact-form__title {
  color: var(--color-text-alt);
  font-family: var(--font-display); font-weight: 900;
  font-size: var(--fs-h2); line-height: 37px;
}
.contact-form__lead { color: var(--color-muted-2); font-size: var(--fs-base); line-height: 21px; }

.contact-card { width: 800px; flex: none; padding: var(--space-40); background: var(--color-surface); }
.contact-card__form { display: flex; flex-direction: column; gap: var(--space-24); }
.form-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-24); }

.contact-card .field { gap: var(--space-8); }
.contact-card .field__label {
  color: var(--color-brand-2);
  font-family: var(--font-display); font-weight: 900;
  font-size: var(--fs-2xs); line-height: 14px;
  letter-spacing: normal; text-transform: none;
}
.contact-card .field input:not(.visually-hidden), .contact-card .field select, .contact-card .field textarea {
  min-height: 48px; padding: 14px var(--space-16);
  background: var(--color-surface-3); box-shadow: none;
  color: var(--color-text-alt); font-size: var(--fs-base); line-height: 18px;
}
.contact-card .field textarea { min-height: 150px; }
.contact-card .field input:focus, .contact-card .field select:focus, .contact-card .field textarea:focus {
  box-shadow: inset 0 0 0 1px var(--color-brand-2);
}
.contact-card .field.has-error input, .contact-card .field.has-error select, .contact-card .field.has-error textarea {
  box-shadow: inset 0 0 0 1px var(--color-danger);
}

.contact-card__footer { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-24); }
.contact-card__consent { display: flex; flex-direction: column; gap: var(--space-8); width: 450px; }
.contact-card .field--check { align-items: center; }
/* .contact-card .field input sets min-height 48 above; the tick box must win. */
.contact-card .field--check input[type="checkbox"] { width: 20px; height: 20px; min-height: 0; padding: 0; background: var(--color-surface-3); box-shadow: none; }
.contact-card .field--check input[type="checkbox"]:checked { background: var(--color-brand-2); }
.contact-card .field--check .field__label {
  color: var(--color-text-alt); font-family: var(--font-body);
  font-weight: 500; font-size: var(--fs-sm); line-height: 17px;
}
.contact-card .form__note { color: var(--color-muted-2); font-size: var(--fs-2xs); line-height: 14px; }
.contact-card .form__note a { color: var(--color-text-alt); text-underline-offset: 2px; }
.contact-card__submit {
  gap: var(--space-8); min-height: 47px; padding: 16px 32px;
  background: var(--color-brand-2); font-size: var(--fs-xs); line-height: 15px;
}
.contact-card__submit-glyph { width: 14px; height: 14px; }
.contact-card__done { margin-top: 0; }
.contact-card__done a { color: var(--color-brand); }

/* ── mobile: frame pumt123-contact-us-mobile (390) ────────────────────── */
@media (max-width: 1199px) {
  /* hero 390×303: pad 40/16, gap 24 */
  .contact-hero { flex-direction: column; min-height: 0; }
  .contact-hero__left { width: 100%; gap: var(--space-24); padding: var(--space-40) var(--container-pad-m); }
  .contact-hero__intro { width: 100%; gap: var(--space-12); }
  .contact-hero__intro .eyebrow { font-size: var(--fs-3xs); line-height: 12px; letter-spacing: .1em; }
  .contact-hero__intro .eyebrow--rule::before { width: 12px; }
  .contact-hero__title { font-size: var(--fs-h3); line-height: 34px; letter-spacing: 0; }
  .contact-hero__lead { font-size: var(--fs-base); line-height: 21px; }
  .contact-hero__info { gap: var(--space-12); }
  .contact-hero__cta { font-size: var(--fs-2xs); line-height: 18px; }
  .contact-hero__topics { display: none; }
  .contact-hero__email { font-size: var(--fs-xs); line-height: 16px; }
  .contact-hero__divider { display: none; }

  /* form 390×973: pad 48/16, gap 32, fields stacked with gap 16 */
  .contact-form { padding: var(--space-48) var(--container-pad-m); }
  .contact-form__inner { flex-direction: column; gap: var(--space-32); }
  .contact-form__info, .contact-card { width: 100%; }
  .contact-form__eyebrow { font-size: var(--fs-3xs); line-height: 12px; }
  .contact-form__title { font-size: var(--fs-h4); line-height: 28px; }
  .contact-form__lead { font-size: var(--fs-sm); line-height: 20px; }
  .contact-card { padding: 0; background: none; }
  .contact-card__form { gap: var(--space-16); }
  .form-row { grid-template-columns: 1fr; gap: var(--space-16); }
  .contact-card .field__label { font-size: var(--fs-3xs); line-height: 12px; }
  .contact-card .field input:not(.visually-hidden), .contact-card .field select, .contact-card .field textarea {
    padding: 12px var(--space-16); line-height: 21px;
  }
  .contact-card .field textarea { min-height: 120px; }
  .contact-card__footer { flex-direction: column; align-items: stretch; gap: var(--space-16); }
  .contact-card__consent { width: 100%; }
  .contact-card__submit { width: 100%; }
}