/* ============================================================
   INCLINE Ventures — Contact
   Loaded only on /contact.html
   The statement panel is this page's red moment; the form sits
   on black beside it.
   ============================================================ */

.contact {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  align-items: stretch;
  border-bottom: var(--hair) solid var(--line);
}

/* ---- Red statement panel ------------------------------------ */
.contact__aside {
  background: var(--accent);
  color: var(--on-red-ink);
  padding: var(--section-y) var(--gutter);
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}
.contact__aside .label { color: var(--on-red-muted); }
.contact__aside .label--red { color: var(--on-red-ink); }

.contact__title {
  font-size: clamp(2.75rem, 6vw, 5rem);
  margin-block: var(--space-2xs) var(--space-2xs);
}
/* Black on red at display size — 3.1:1, clears AA for large text. */
.contact__title .em { color: var(--black); }

.contact__note {
  color: var(--on-red-muted);
  font-size: var(--step-0);
  max-width: 32ch;
}

.contact__direct {
  margin-top: auto;
  padding-top: var(--space-l);
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
}
.contact__mail {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-2);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--on-red-ink);
  text-decoration: none;
  border-bottom: var(--hair) solid transparent;
  align-self: flex-start;
  transition: color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
@media (hover: hover) {
  .contact__mail:hover { color: var(--black); border-bottom-color: var(--black); }
}
.contact__aside :focus-visible { outline-color: var(--white); }

/* ---- Form panel (on black) ---------------------------------- */
.contact__panel { padding: var(--section-y) var(--gutter); }

.form { display: flex; flex-direction: column; gap: var(--space-m); max-width: 40rem; }

.field { display: flex; flex-direction: column; gap: var(--space-3xs); }

.field__label {
  font-size: var(--step--2);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink-muted);
}
.field__req { color: var(--accent-text); }

.field__input {
  width: 100%;
  min-height: 48px;
  padding: 0.75em 0.9em;
  background: transparent;
  color: var(--ink);
  border: var(--hair) solid var(--line-strong);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: var(--step-0);
  transition: border-color var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out);
}
textarea.field__input { min-height: 8.5rem; resize: vertical; line-height: 1.6; }

.field__input::placeholder { color: var(--ink-muted); opacity: 1; }

@media (hover: hover) {
  .field__input:hover { border-color: var(--line-accent); }
}

/* Focus reads as weight, not glow. */
.field__input:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 2px;
  border-color: var(--accent-text);
  background: rgba(187, 39, 27, 0.06);
}

/* Native select arrow removed — square corners, red chevron. */
select.field__input {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23e0503f' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.75rem;
  cursor: pointer;
}
/* The dropdown list itself is OS-drawn — force legible colours. */
select.field__input option { background: var(--black); color: var(--white); }

/* Error state: red rule down the left edge + a message. Colour is
   never the only signal — the text carries it. */
.field__input[aria-invalid='true'] {
  border-color: var(--accent-text);
  box-shadow: inset 3px 0 0 var(--accent-text);
}
.field__error {
  display: none;
  font-size: var(--step--1);
  color: var(--accent-text);
  font-weight: 500;
}
.field__error::before { content: '↳ '; }
.field__error[data-show='true'] { display: block; }

.form__actions {
  display: flex;
  align-items: center;
  gap: var(--space-m);
  flex-wrap: wrap;
}
.form__hint { font-size: var(--step--1); color: var(--ink-muted); }

/* Error summary — focus lands here on a failed submit. */
.form__summary {
  display: none;
  border: var(--hair) solid var(--accent-text);
  border-left-width: 3px;
  padding: var(--space-s);
  background: rgba(187, 39, 27, 0.1);
  margin-bottom: var(--space-m);
}
.form__summary[data-show='true'] { display: block; }
.form__summary h2 {
  font-family: var(--font-body);
  font-size: var(--step--1);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: var(--space-2xs);
}
.form__summary ul { margin: 0; padding-left: 1.1rem; font-size: var(--step--1); }
.form__summary a { color: var(--ink); }

/* ---- Post-submit states ------------------------------------- */
.form-result { display: none; }
.form-result[data-show='true'] { display: block; }

.form-result__title {
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  margin-bottom: var(--space-s);
}
.form-result__body { max-width: 46ch; color: var(--ink-muted); margin-bottom: var(--space-m); }
.form-result__body strong { color: var(--ink); }
.form-result__mail { color: var(--accent-text); font-weight: 500; }

/* ---- What happens next -------------------------------------- */
.next__head { margin-bottom: var(--space-2xs); display: block; }

/* ---- Responsive --------------------------------------------- */
@media (max-width: 900px) {
  .contact { grid-template-columns: 1fr; }
  .contact__aside { padding-block: var(--space-xl); }
  .contact__direct { margin-top: var(--space-m); padding-top: var(--space-m); }
  .form { max-width: none; }
  .form__actions .btn { width: 100%; justify-content: center; }
}