/* ==========================================================================
   KAYANTARAN – contact.css
   Styles used only by contact.html. Shared components live in site.css.

   .enquiry           two columns: the form, and the direct contact details
   .field__optional   the small "optional" marker inside a .field__label
   .form__note        one line above the button saying what the button does
   .enquiry-ready     the "your message is ready" panel written by contact.js
   .contact-list      definition list: phone, email, WhatsApp, Instagram, studio
   .next              "What happens next": three steps side by side
   ========================================================================== */


/* ENQUIRY: FORM AND DETAILS ================================================= */

.enquiry__col {
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 1px solid var(--hairline-strong);
}
.enquiry__title { margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem); }
.enquiry .form { max-width: none; }

@media (min-width: 900px) {
  .enquiry__col--direct { position: sticky; top: calc(var(--header-h) + 1.5rem); align-self: start; }
}

.field__optional {
  margin-left: .5em;
  font-weight: 400;
  letter-spacing: .06em;
  text-transform: none;
}
.form__note { max-width: 34rem; }

/* Written by contact.js into .form__message once the enquiry is composed. */
.form__message:focus { outline: none; }
.enquiry-ready { display: grid; gap: 1.1rem; padding: 1.5rem; border-left-color: var(--gold); }
.enquiry-ready__title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1.2;
}
.enquiry-ready__actions { display: flex; flex-wrap: wrap; gap: .75rem 1rem; }
.enquiry-ready__actions .btn { flex: 1 1 12rem; }
.enquiry-ready__note { font-size: .82rem; color: var(--fg-soft); }
.form__message--error a { color: inherit; }

@media (min-width: 480px) {
  .enquiry-ready__actions .btn { flex: 0 0 auto; }
}


/* DIRECT DETAILS ============================================================ */

.contact-list { margin: 0; border-bottom: 1px solid var(--hairline); }
.contact-list__item {
  display: grid;
  gap: .3rem;
  padding-block: 1.1rem;
  border-top: 1px solid var(--hairline);
}
.contact-list__item:first-child { padding-top: 0; border-top: 0; }
.contact-list dt {
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--fg-soft);
}
.contact-list dd {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1.2rem + .6vw, 1.75rem);
  line-height: 1.3;
  font-variant-numeric: lining-nums;
  overflow-wrap: anywhere;
}
.contact-list a {
  border-bottom: 1px solid var(--hairline-strong);
  text-decoration: none;
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.contact-list a:hover { border-bottom-color: currentColor; color: var(--accent-ink); }
.direct__note { margin-top: 1.5rem; color: var(--fg-soft); }


/* WHAT HAPPENS NEXT ========================================================= */

.next__steps .process-step { align-content: start; }
.next__steps .process-step__title {
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2.125rem);
  line-height: 1.14;
  text-wrap: balance;
}

@media (min-width: 720px) {
  .process--columns.next__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .next__steps .process-step { row-gap: .9rem; padding-right: 1rem; padding-bottom: 0; }
}