.alt-contact { background: var(--alt-ct-bg); }

/* The reference splits the section into an 8/12 form column and a 4/12
   information column, with the gap carried as padding on the form. */
.alt-contact__row { display: flex; flex-wrap: wrap; }
.alt-contact__main { flex: 0 0 var(--alt-ct-main-width, 66.6%); max-width: var(--alt-ct-main-width, 66.6%); min-width: 0; }
.alt-contact__row--full .alt-contact__main { flex-basis: 100%; max-width: 100%; }

.alt-contact__aside {
  flex: 1 1 0%;
  min-width: 0;
  margin-bottom: 10px;
}

.alt-contact__info-box { margin-bottom: 30px; }

.alt-contact__info-heading {
  margin: 0 0 14px;
  color: var(--alt-ct-heading);
  font-family: var(--alt-font-heading);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.444;
}

.alt-contact__info-text { color: var(--alt-ct-text); line-height: 1.75; }

@media (min-width: 1280px) {
  .alt-contact__main { padding-right: var(--alt-ct-main-gap, 100px); }
  .alt-contact__row--full .alt-contact__main { padding-right: 0; }
}

@media (max-width: 1279px) {
  .alt-contact__main,
  .alt-contact__aside { flex: 0 0 100%; max-width: 100%; }
  .alt-contact__aside { margin-top: 40px; }
}

.alt-contact__layout { display: flex; flex-direction: column; gap: 32px; }
.alt-contact__layout--split { flex-direction: row; gap: 56px; align-items: flex-start; }
.alt-contact__layout--split .alt-contact__intro { flex: 0 0 40%; }
.alt-contact__layout--split .alt-contact__form-col { flex: 1 1 auto; min-width: 0; }

.alt-contact__heading {
  margin: 0 0 14px;
  color: var(--alt-ct-heading);
  font-family: var(--alt-font-heading);
  font-size: var(--alt-h3);
  font-weight: var(--alt-fw-heading);
  line-height: 1.2;
}

.alt-contact__text { color: var(--alt-ct-text); line-height: 1.75; }

.alt-contact__actions { margin-top: 22px; }

.alt-contact__msg {
  margin: 0 0 18px;
  padding: 12px 16px;
  border-radius: var(--alt-radius-block);
  font-size: calc(var(--alt-body-size) * 0.9375);
}
.alt-contact__msg--ok { background: rgba(94, 162, 116, 0.12); color: var(--alt-green-dark); }
.alt-contact__msg--error { background: rgba(218, 63, 63, 0.1); color: #a12b2b; }

@media (max-width: 767px) {
  .alt-contact__layout--split { flex-direction: column; gap: 28px; }
  .alt-contact__layout--split .alt-contact__intro { flex: 1 1 auto; }
}

/* ---------------------------------------------------------------- reference form

   The reference lays Name and Email out two-up, then a full-width phone and a
   tall message box, with placeholders instead of labels. */

.alt-contact__heading { font-size: var(--alt-ct-heading-size, var(--alt-h3)); font-weight: 500; }

.alt-contact__form .alt-form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--alt-ct-field-gap);
}

.alt-contact__form .alt-form__row { margin-bottom: var(--alt-ct-field-gap); min-width: 0; }
.alt-contact__form .alt-form__grid .alt-form__row { margin-bottom: 0; }
.alt-contact__form .alt-form__grid + .alt-form__row { margin-top: var(--alt-ct-field-gap); }

.alt-contact__form .alt-field {
  width: 100%;
  height: var(--alt-ct-field-h);
  padding: 6px 12px;
  border: 1px solid var(--alt-ct-field-border);
  border-radius: var(--alt-ct-field-radius);
  background: #fff;
  font-family: var(--alt-font-body);
  font-size: var(--alt-body-size);
  color: var(--alt-body-color);
}
.alt-contact__form textarea.alt-field {
  height: var(--alt-ct-textarea-h);
  min-height: var(--alt-ct-textarea-h);
  padding: 10px 12px;
  resize: vertical;
}
.alt-contact__form .alt-field:focus {
  outline: none;
  border-color: var(--alt-brand);
}
.alt-contact__form .alt-field::placeholder { color: var(--alt-muted); }

.alt-contact__save {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 4px;
  color: var(--alt-ct-text);
  font-size: calc(var(--alt-body-size) * 0.9375);
  line-height: 1.5;
  cursor: pointer;
}
.alt-contact__save input { margin-top: 3px; flex: 0 0 auto; }

@media (max-width: 767px) {
  .alt-contact__form .alt-form__grid { grid-template-columns: minmax(0, 1fr); }
}