/* ============================================================================
   Contact (general enquiries) — index.html #contact-form

   Shares the Investor Relations design system verbatim:
     - heading  → .section-kicker / .eyebrow
     - layout   → .contact__panel (2-col, surface, border, shadow-md)
     - form     → <form class="card"> + .field / .input / .textarea / .btn
   No panel / grid / spacing overrides here — those come from the shared
   .contact__panel, .card and .field rules so the two sections stay identical.

   This file only adds what IR has no equivalent for: the submit button's
   loading/disabled state and the post-submit success panel.
   ========================================================================== */

.cf__panel { position: relative; }

/* Fading hairline (site-wide divider) between the intro copy and the email row. */
.cf .contact__list li:first-child::before { display: block; }

/* --- Submit button: sending / disabled ---------------------------------- */
.cf__submit[disabled] { opacity: 0.72; cursor: progress; }
.cf__submit[disabled]:hover { transform: none; }
.cf__submit.is-sending .btn__icon { display: none; }

.cf__status:empty { display: none; }

/* --- Success state — same surface/type tokens as the rest of the site --- */
.cf__success {
  text-align: center;
  padding-block: clamp(1.25rem, 0.75rem + 3vw, 2.5rem);
  animation: scale-in var(--dur-slow) var(--ease-out) both;
}
.cf__success[hidden] { display: none; }

.cf__success-tick {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin: 0 auto;
  border-radius: 50%;
  background: var(--color-dark);
  color: #fff;
}
.cf__success-path {
  stroke-dasharray: 28;
  stroke-dashoffset: 28;
  animation: cf-check 0.5s var(--ease-out) 0.16s forwards;
}
@keyframes cf-check { to { stroke-dashoffset: 0; } }

.cf__success-title {
  margin: var(--space-4) 0 0;
  font-size: var(--fs-h3);
  font-weight: var(--fw-light);
}
.cf__success-copy {
  margin: var(--space-3) auto 0;
  max-width: 42ch;
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--text-secondary);
}

@media (prefers-reduced-motion: reduce) {
  .cf__success { animation: none; }
  .cf__success-path { animation: none; stroke-dashoffset: 0; }
}