/* ==========================================================================
   STERLING — contact.css
   Page-specific styles for the dedicated contact page. Tokens, header,
   footer, nav, buttons and .contact__* details styling are shared with
   index.css — this file only adds the intro block and the form itself.
   ========================================================================== */

.contact-page__intro {
  text-align: center;
  margin-bottom: clamp(2.75rem, 7vh, 4.75rem);
}
.contact-page__intro .eyebrow { margin-bottom: 1rem; }
.contact-page__intro .section-title { margin-bottom: .9rem; }
.contact-page__intro .lede { max-width: 56ch; margin-inline: auto; }

.contact-page__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}

/* --------------------------------------------------------------------------
   Form
   -------------------------------------------------------------------------- */
.contact-form { display: grid; gap: clamp(1.35rem, 2.6vw, 1.85rem); }

.form-row { display: grid; gap: .6rem; }

.form-row label {
  font: 400 .78rem/1 var(--font-ui);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
}
.form-optional {
  color: var(--muted);
  letter-spacing: .12em;
  text-transform: none;
  font-size: .82em;
}

.form-row input,
.form-row textarea {
  width: 100%;
  background: transparent;
  border: 1px solid var(--hairline-soft);
  color: var(--ink);
  font: 300 1rem/1.5 var(--font-ui);
  padding: .85rem 1rem;
  transition: border-color .3s var(--ease-out), background-color .3s var(--ease-out);
}
.form-row textarea { resize: vertical; min-height: 9rem; }

.form-row input::placeholder,
.form-row textarea::placeholder { color: var(--muted); }

.form-row input:hover,
.form-row textarea:hover { border-color: var(--hairline); }

.form-row input:focus-visible,
.form-row textarea:focus-visible {
  outline: none;
  border-color: var(--gold);
  background: rgba(201, 168, 76, .04);
}

/* Invalid state — a warm brick tone rather than a jarring pure red, so an
   error still reads as belonging to the gold/near-black palette. */
.form-row input[aria-invalid="true"],
.form-row textarea[aria-invalid="true"] { border-color: #c96a4c; }

.form-error {
  display: block;
  min-height: 1.1em;
  font: 300 .8rem/1.3 var(--font-ui);
  letter-spacing: .02em;
  color: #d98a72;
}

.form-actions {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-top: .5rem;
}

.form-note {
  font: 300 .85rem/1.4 var(--font-ui);
  color: var(--muted);
  letter-spacing: .02em;
}
.form-note.is-error { color: #d98a72; }
.form-note.is-success { color: var(--gold); }

@media (max-width: 900px) {
  .contact-page__grid { grid-template-columns: 1fr; }
}