/* ============================================================
   Additions to the client's style.css (kept unchanged): the
   contact form's status line and field errors. Uses its tokens.
   ============================================================ */
.form-status {
  margin: 0 0 1.25rem;
  padding: 0.9rem 1.1rem;
  border-radius: var(--radius-sm);
  font-weight: 500;
}

.form-status.is-success {
  background: var(--green-050);
  color: var(--green-700);
  border: 1px solid var(--green-100);
}

.form-status.is-error {
  background: #fdf1ef;
  color: #9b2c1f;
  border: 1px solid #f4d4cd;
}

.field-error {
  margin: 0.4rem 0 0;
  font-size: 0.875rem;
  color: #9b2c1f;
}

.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] {
  border-color: #c2412d;
}

/* ------------------------------------------------------------
   Home page banner: the heading and its intro line about a fifth
   smaller than the design's (80px → 64px at most, 36px on phones).
   ------------------------------------------------------------ */
.hero-copy .display-xl {
  font-size: clamp(2.25rem, 5.2vw, 4rem);
}

.hero-copy .lede {
  font-size: clamp(1rem, 1.4vw, 1.15rem);
}

@media (max-height: 820px) and (min-width: 900px) {
  .hero-copy .display-xl {
    font-size: clamp(2rem, 4vw, 3.25rem);
  }
}

/* Footer: the developer's credit, styled like the footer's other links. */
.footer-credit a {
  color: rgba(255, 255, 255, 0.8);
  transition: color 0.2s ease;
}

.footer-credit a:hover {
  color: var(--lime-400);
}