/* Contact page only. */

#contact-body { display: flex; gap: 60px; align-items: flex-start; padding: 130px var(--gutter); background: var(--chalk); }

/* ---------- Details ---------- */

#contact-body .details { flex: 0 0 560px; width: 560px; display: flex; flex-direction: column; gap: 40px; }
#contact-body .detail dt { margin: 0 0 12px; font-size: 10px; font-weight: 500; letter-spacing: 1.8px; }
#contact-body .detail dd { margin: 0; font-weight: 300; font-size: 20px; line-height: 30px; }
#contact-body .detail a { transition: opacity 180ms ease; }
#contact-body .detail a:hover { opacity: 0.62; }

/* ---------- Enquiry form ---------- */

#contact-body .enquiry { flex: 1 1 0; min-width: 0; }
#contact-body .enquiry__label { font-size: 10px; font-weight: 500; letter-spacing: 1.8px; margin-bottom: 24px; }
#contact-body .field {
  display: block; width: 100%; max-width: 680px; height: 60px;
  margin-bottom: 14px; padding: 0 26px;
  border: 1px solid var(--hedge); border-radius: 30px;
  background: transparent; color: var(--hedge);
  font: inherit; font-size: 13px; font-weight: 500; letter-spacing: 0.6px;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}
#contact-body textarea.field {
  height: 170px; padding: 22px 26px; border-radius: 18px;
  resize: vertical; line-height: 26px;
}
#contact-body .field::placeholder {
  color: var(--hedge); opacity: 0.8;
  font-size: 11px; font-weight: 500; letter-spacing: 1.54px; text-transform: uppercase;
}
#contact-body .field:focus { outline: none; border-color: var(--funky); box-shadow: 0 0 0 1px var(--funky); }
#contact-body .submit {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; max-width: 680px; height: 62px;
  padding: 0 28px 0 32px;
  border: 0; border-radius: 32px;
  background: var(--funky); color: var(--chalk);
  font: inherit; font-size: 11px; font-weight: 500; letter-spacing: 1.54px;
  cursor: pointer;
  transition: background-color 160ms ease;
}
#contact-body .submit:hover { background-color: #7A2E02; }
#contact-body .hp { position: absolute; left: -9999px; }

/* ---------- Wordmark close ---------- */

#wordmark {
  position: relative; overflow: hidden;
  padding: 100px 24px 90px;
  text-align: center;
  color: var(--chalk);
}
#wordmark .wm__media { position: absolute; inset: 0; }
#wordmark .wm__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; }
#wordmark .wm__media::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,0.7); }
#wordmark .wm__name {
  position: relative;
  font-weight: 300; font-size: 132px; line-height: 140px; letter-spacing: -3.96px;
}
#wordmark .wm__sub { position: relative; margin-top: 24px; font-size: 10px; font-weight: 500; letter-spacing: 1.8px; }

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



@media (max-width: 1400px) { #wordmark .wm__name { font-size: 92px; line-height: 100px; letter-spacing: -2.6px; } }

@media (max-width: 1100px) {
  #contact-body { padding-top: 80px; padding-bottom: 80px; }
  #wordmark { padding-top: 72px; padding-bottom: 64px; }
  #wordmark .wm__name { font-size: 58px; line-height: 66px; letter-spacing: -1.6px; }
}

@media (max-width: 620px) {
  #contact-body .detail dd { font-size: 18px; line-height: 28px; }
  #wordmark .wm__name { font-size: 34px; line-height: 42px; letter-spacing: -0.9px; }
}

/* Stacked, the columns are shrink to fit because the row aligns to flex-start,
   which left the form about half the screen wide on a phone. */
/* On a laptop the details column gives way so the form is not a strip. */
@media (max-width: 1520px) {
  #contact-body { gap: 48px; }
  #contact-body .details { flex: 0 1 460px; width: auto; min-width: 300px; }
}

/* The row holds to 1320. Below that there is not enough width for both, so it
   stacks and everything goes full width. It used to stack at 1520, which left
   the form a 210px strip on a laptop. */
@media (max-width: 1320px) {
  #contact-body { flex-direction: column; gap: 56px; align-items: stretch; }
  #contact-body .details, #contact-body .enquiry { flex: none; width: 100%; }
  #contact-body .field, #contact-body .submit { max-width: none; }
}