/* Contact (templates/contact.php) and Not found (404.php) */

.contact { padding-block: clamp(3rem, 8vw, 6.5rem) var(--section); }
.contact__inner { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(3rem, 6vw, 5rem) var(--gap); align-items: start; }
.contact__intro { grid-column: 1 / span 5; }
.contact__details { display: grid; gap: 1.25rem; margin-block-start: clamp(2rem, 4vw, 3.5rem); line-height: 1.8; }
.contact__form-wrap { grid-column: 7 / -1; }
@media (max-width: 56.24rem) {
  .contact__intro, .contact__form-wrap { grid-column: 1 / -1; }
}

/* ---------- Form: label above, hint and error below */
.form { display: grid; gap: 1.5rem; }
.field { display: grid; gap: 0.5rem; }
.field__label { font-weight: 560; }
.field__optional { font-weight: 400; color: var(--ink-2); }
.field__input {
  inline-size: 100%;
  min-block-size: 3.25rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--ink-2);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--ink);
}
.field__input:hover { border-color: var(--ink); }
.field__input--area { resize: vertical; min-block-size: 9rem; }
.field__input--select { appearance: none; padding-inline-end: 2.75rem; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(-45deg, transparent 50%, currentColor 50%); background-position: right 1.35rem center, right 1rem center; background-size: 0.35rem 0.35rem; background-repeat: no-repeat; }
.field__input--select:dir(rtl) { background-position: left 1rem center, left 1.35rem center; }
.field__input[aria-invalid="true"] { border-color: var(--accent-ink); box-shadow: inset 0 0 0 1px var(--accent-ink); }
.field__hint { font-size: var(--fs-small); color: var(--ink-2); }
.field__error { font-size: var(--fs-small); font-weight: 560; color: var(--accent-ink); }
.form__submit { justify-self: start; }

.form__status { display: flex; align-items: flex-start; gap: 0.6rem; padding: 1rem; border: 1px solid var(--accent-ink); color: var(--accent-ink); font-weight: 500; }
.form__status .icon, .form__success .icon { font-size: 1.4rem; margin-block-start: 0.1em; }
.form__success { display: grid; gap: 1rem; padding: clamp(1.5rem, 4vw, 3rem); border: 1px solid var(--line); background: var(--bg-2); }
.form__success .icon { font-size: 2.5rem; color: var(--accent-ink); }
.form__success p { max-inline-size: 44ch; color: var(--ink-2); }
.form[hidden], .form__status[hidden], .form__success[hidden] { display: none; }

/* ---------- Not found */
.missing { padding-block: clamp(2rem, 5vw, 4rem) var(--section); }
.missing__inner { display: grid; gap: clamp(2.5rem, 5vw, 4rem); align-items: center; }
.missing__copy { display: grid; justify-items: start; gap: 0; }
.missing__copy .btn { margin-block-start: 2rem; }
.missing .page-head__title { font-size: clamp(2rem, 0.8rem + 3.6vw, 4.5rem); }
.missing__plate { max-inline-size: 30rem; }
@media (min-width: 56.25rem) {
  .missing__inner { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); min-block-size: calc(100dvh - var(--header-h) - 12rem); }
  .missing__plate { justify-self: end; inline-size: min(100%, calc(100dvh - var(--header-h) - 14rem)); max-inline-size: none; }
}