/* ==========================================================================
   TANSY GROUP — css/pages/contact.css
   Contact page layout (form styles live in components.css).
   ========================================================================== */

/* Contact page */

.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}

.contact-aside > * + * { margin-top: 2.5rem; }

.contact-methods {
  border-top: 1px solid var(--c-line-strong);
}

.contact-method {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.25rem;
  padding-block: 1.6rem;
  border-bottom: 1px solid var(--c-line);
}

.contact-method h2 {
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin-bottom: 0.4rem;
}

.contact-method__value {
  display: block;
  font-family: var(--f-heading);
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  color: var(--c-purple);
  line-height: 1.3;
}

.contact-method__value.is-unavailable {
  font-size: var(--fs-md);
  color: var(--c-muted);
}

.contact-method p {
  margin-top: 0.35rem;
  font-size: var(--fs-sm);
  color: var(--c-muted);
}

.contact-method .btn {
  margin-top: 1rem;
}

.next-steps {
  display: grid;
  gap: 1rem;
  counter-reset: next;
}

.next-steps li {
  display: grid;
  grid-template-columns: 2rem 1fr;
  font-size: var(--fs-sm);
  color: var(--c-muted);
  counter-increment: next;
}

.next-steps li::before {
  content: counter(next, decimal-leading-zero);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--c-pink-ink);
  padding-top: 0.15rem;
}

/* Without JavaScript the form cannot send; the <noscript> notice replaces it. */
html:not(.js) #enquiry-form,
html:not(.js) [data-form-setup-note] {
  display: none;
}

/* Responsive ---------------------------------------------------------------- */

@media (max-width: 1020px) {
  .contact-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}