/* ═══════════════════════════════════════════════════════════
   CONTACT + FOOTER   [normal scroll]
   The page closes on the ground it opened on, so the whole thing
   reads as one piece rather than a cinematic top bolted onto a
   marketing body.
   ═══════════════════════════════════════════════════════════ */

.contact {
  position: relative;
  z-index: 2;
  background: var(--kiln-2);
  color: var(--on-dark);
  padding: 16rem 0 12rem;
  overflow: hidden;
  border-top: var(--hair) solid var(--line-dark);
}
.contact::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(58% 50% at 22% 30%, rgba(168,69,44,.16) 0%, transparent 72%);
  pointer-events: none;
}
.contact > * { position: relative; }

.con-inner { grid-column: content-start / span 11; }

.contact .sec-label { margin-bottom: 3.2rem; }
.con-title { font-size: 9.4rem; color: var(--chalk); margin-bottom: 3rem; }
.con-copy {
  font-size: 1.85rem;
  line-height: 1.6;
  color: var(--on-dark);
  max-width: 48rem;
  margin-bottom: 5rem;
}

/* ── Enquiry form ────────────────────────────────────────
   The segment selector is the important control: it is what
   turns one form into the five separate enquiry routes the brief
   asks for, without making the visitor find five pages. */
.con-form {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding-bottom: 6rem;
  margin-bottom: 6rem;
  border-bottom: var(--hair) solid var(--line-dark);
}
.cf-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }

.cf-field { display: flex; flex-direction: column; gap: .9rem; }
.cf-field > span { color: var(--on-dark-faint); }

.cf-field input,
.cf-field select {
  height: 5.4rem;
  padding: 0 1.6rem;
  background: rgba(250,247,241,.04);
  border: var(--hair) solid var(--line-dark);
  border-radius: .3rem;
  color: var(--chalk);
  font-family: var(--font-sans);
  font-size: 1.6rem;
  transition: border-color .4s var(--ease), background .4s var(--ease);
}
.cf-field input::placeholder { color: rgba(250,247,241,.24); }
.cf-field input:focus,
.cf-field select:focus {
  outline: none;
  border-color: var(--brick-lit);
  background: rgba(250,247,241,.07);
}
.cf-field select option { background: var(--kiln); color: var(--chalk); }

.cf-actions { display: flex; align-items: center; gap: 2.4rem; flex-wrap: wrap; }
.cf-note { color: var(--on-dark-faint); }

.con-details {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
}
.con-details dt { color: var(--on-dark-faint); margin-bottom: 1.2rem; }
.con-details dd { font-size: 1.6rem; color: var(--on-dark); line-height: 1.62; }


@media (max-width: 991px) {
  .contact { padding: 11rem 0 8rem; }
  .con-inner { grid-column: content; }
  .con-title { font-size: 5.8rem; }
  .cf-row { grid-template-columns: 1fr; }
  .con-details { grid-template-columns: 1fr; row-gap: 3rem; }

}
@media (max-width: 767px) {
  .con-title { font-size: 4.2rem; }
  .con-copy { font-size: 1.62rem; }
}