@layer components{.contact-hero {
    background: radial-gradient(circle at top, color-mix(in srgb, var(--brand) 18%, transparent), transparent 65%);
    text-align: center;
    padding: clamp(3rem, 2.2rem + 3vw, 5rem) 0;
  }

  .contact-hero .lead {
    margin-inline: auto;
  }

  .contact-layout {
    display: grid;
    gap: 1.25rem;

    @media (min-width: 54rem) {
      grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
      align-items: start;
    }
  }

  .contact-panel {
    border-radius: var(--radius);
    border: 1px solid var(--line);
    padding: 1.25rem;
    background: color-mix(in srgb, var(--bg-elev) 92%, transparent);
    box-shadow: var(--shadow);
  }

  .contact-panel__list {
    list-style: none;
    padding: 0;
    margin: 1rem 0 0;
    display: grid;
    gap: .5rem;

    & li {
      display: flex;
      gap: .4rem;
    }

    & span {
      color: var(--muted);
      min-width: 4rem;
    }
  }

  .contact-form-card {
    border-radius: var(--radius);
    border: 1px solid var(--line);
    background: color-mix(in srgb, var(--bg-elev) 92%, transparent);
    padding: 1.25rem;
  }

  .form-field-error {
    color: #dc3545;
    font-size: var(--step--1);
    margin-left: .35rem;
  }

  .field.input-error input,
  .field.input-error textarea {
    border-color: #dc3545;
    box-shadow: 0 0 6px rgba(220, 53, 69, .35);
  }
}