/* Each contact block centres within its own column, and the whole grid is
   capped and centred so six short blocks do not stretch across 1152px. */
.contact-form {
  max-inline-size: 34rem;
  margin-inline: auto;
  margin-block-start: var(--space-6);
  display: grid;
  gap: var(--space-6);
  text-align: start;
}
/* Friendlier fields on this page: a small radius, roomier padding and a
   white ground so they lift off the blush band. The shared .field component
   itself stays square - the wizard is a six-step formal flow and this is a
   note to the team; the two can differ in warmth. */
.contact-form .field__input,
.contact-form .field__textarea {
  border-radius: 8px;
  padding-block: var(--space-4);
  background: var(--warm-white);
}
.contact-form .button {
  inline-size: 100%;
  justify-content: center;
  padding-block: var(--space-4);
}
.contact-form .button { justify-self: center; }

/* Confirmation after a successful send. */
.notice {
  max-inline-size: 34rem; margin-inline: auto;
  padding: var(--space-4) var(--space-6);
  background: color-mix(in srgb, var(--rose-light) 26%, var(--warm-white));
  border-inline-start: 3px solid var(--rose);
  color: var(--ink);
}


/* Contact details on the reading-start side, the form on the other, per the
   client. Two columns rather than the old grid of blocks; the email and
   WhatsApp entries went with it - the form is the way to write now, and
   WhatsApp is still one tap away in the footer. */
.contact-layout {
  display: grid;
  grid-template-columns: minmax(14rem, 20rem) minmax(0, 34rem);
  justify-content: center;
  gap: clamp(var(--space-8), 6vw, var(--space-16));
  /* Centre, not start: the aside is a short block beside a tall form, and
     top-aligned it read as though it had fallen off the layout. Middled
     against the form is what the client asked for. */
  align-items: center;
}
/* The contact details sit in a soft card so the column reads as one friendly
   unit rather than loose lines. Warm-white on the blush band, a hairline and
   a small radius - all existing tokens. */
.contact-layout__aside {
  background: var(--warm-white);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: clamp(var(--space-6), 3vw, var(--space-8));
}
.contact-layout__aside .label { margin-block: var(--space-6) var(--space-3); }
.contact-layout__aside .label:first-child { margin-block-start: 0; }
.contact-layout__aside p { margin: 0 0 var(--space-2); }
.contact-layout__aside .with-icon { justify-content: center; }
.contact-layout__aside .with-icon:hover { color: var(--rose-deep); }
.contact-layout__form h2 { margin-block-start: 0; }
/* The form already caps its own measure; inside this column it should fill it. */
.contact-layout__form .contact-form { max-inline-size: none; }

@media (max-width: 60rem) {
  .contact-layout { grid-template-columns: 1fr; }
}

/* The confirmation after a message sends: unmistakably a success, in the
   site's own language - navy check in a rose-washed card, the heading face
   for the one-line verdict. Appears with a gentle rise; none under reduced
   motion. */
.sent-note {
  max-inline-size: 34rem;
  margin-inline: auto;
  margin-block-end: var(--space-6);
  padding: var(--space-6);
  background: color-mix(in srgb, var(--rose-light) 30%, var(--warm-white));
  border: 1px solid color-mix(in srgb, var(--rose) 45%, transparent);
  border-radius: 10px;
  animation: sent-note-in 500ms var(--ease) both;
}
.sent-note__mark {
  display: inline-flex; align-items: center; justify-content: center;
  inline-size: 2.75rem; block-size: 2.75rem;
  border-radius: 999px;
  background: var(--navy); color: var(--warm-white);
  margin-block-end: var(--space-3);
}
.sent-note__title {
  font-family: var(--font-heading);
  font-size: 1.375rem;
  margin: 0 0 var(--space-2);
}
.sent-note__body { margin: 0; color: var(--charcoal); }
@keyframes sent-note-in {
  from { opacity: 0; transform: translateY(0.5rem); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sent-note { animation: none; }
}