/* Contact page (public layout, ivory body). The form uses EE.forms: validation, error summary,
   auto-grow and the data-success swap to #contact-sent, so the page needs no script of its own. */
.contact { padding-block: calc(var(--header-h) + var(--space-8)) var(--section-pad); }
.contact:focus { outline: none; }
.contact__grid {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-8) var(--gutter); align-items: start;
}
.contact__head { grid-column: 1 / span 7; display: grid; gap: var(--space-4); justify-items: start; }
.contact__title { max-width: 14ch; }
.contact__head .lead { max-width: 50ch; }
.contact__main { grid-column: 1 / span 7; grid-row: 2; min-width: 0; }
.contact__aside { grid-column: 9 / -1; grid-row: 2; position: sticky; top: calc(var(--header-h) + var(--space-5)); }

/* The form sits on the raised card surface */
.contact-card {
  padding: clamp(var(--space-5), 4vw, var(--space-7));
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-card);
}
.contact-form__pair { display: grid; gap: var(--space-5); }
.contact-form__foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding-top: var(--space-5); border-top: 1px solid var(--line);
}
.contact-form__note { max-width: 36ch; font-size: var(--fs-small); color: var(--text-muted); }

/* Success panel: replaces the form; EE.forms moves focus to its heading */
.contact-sent {
  display: grid; gap: var(--space-5); justify-items: start;
  padding: clamp(var(--space-6), 5vw, var(--space-8));
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-card);
}
.contact-sent__mark { display: grid; place-items: center; width: 64px; height: 64px; border: 1px solid var(--gold-500); border-radius: var(--radius-pill); color: var(--gold-600); }
.contact-sent__mark .icon { width: 26px; height: 26px; }
.contact-sent__title { font-size: var(--fs-h2); scroll-margin-top: calc(var(--header-h) + var(--space-6)); }
.contact-sent p { max-width: 52ch; }
.contact-sent__note { font-size: var(--fs-small); color: var(--text-muted); }
.contact-sent__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-6); }

/* Details aside: a hairline with a gold star on it, the brand's path motif */
.contact-details { position: relative; display: grid; gap: var(--space-7); padding: var(--space-2) 0 var(--space-2) var(--space-6); border-left: 1px solid var(--line); }
.contact-details__star { position: absolute; left: 0; top: 0; width: 18px; height: 18px; padding: 2px; translate: -50% 0; background: var(--paper); color: var(--gold-500); }
.contact-details__block { display: grid; gap: var(--space-3); justify-items: start; }
.contact-details__email { font: 400 clamp(1.375rem, 1.2rem + .6vw, 1.75rem) / 1.25 var(--font-display); overflow-wrap: anywhere; }
.contact-faq {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-4);
  width: 100%; min-height: 56px; padding: var(--space-4) var(--space-5);
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-field);
  text-decoration: none; transition: border-color var(--dur-fast) ease;
}
@media (hover: hover) {
  .contact-faq:hover { border-color: var(--gold-500); }
}
.contact-faq__text { display: grid; gap: 2px; }
.contact-faq__title { font-weight: 500; }
.contact-faq__meta { font-size: var(--fs-small); color: var(--text-muted); }
.contact-faq .icon { color: var(--gold-600); transition: transform var(--dur-base) var(--ease-out-expo); }
@media (hover: hover) { .contact-faq:hover .icon { transform: translateX(4px); } }

@media (min-width: 768px) {
  .contact-form__pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 1023px) {
  .contact__grid { gap: var(--space-7) var(--gutter); }
  .contact__head, .contact__main, .contact__aside { grid-column: 1 / -1; }
  .contact__aside { grid-row: 3; position: static; }
}