/* /contact. Values are what the old SPPB page computes (getComputedStyle at the README viewports),
   written once on top of base.css (font stack 16px/1.5 #252525, p/h margins, links, text inputs).
   Breakpoints are the old page's: 1199.98 / 991.98 / 767.98 / 575.98. */

body.pb-page-contact { background-color: #fbf5ee; }   /* live body colour; the section itself is white */

.pb-contact-page { display: flex; flex-wrap: wrap; background: #fff; overflow-x: clip; }   /* clip the 300px Turnstile below 340px, as live's .body-innerwrapper did */

/* Columns */
.pb-contact-page__head { display: flex; flex-direction: column; width: 100%; padding: 50px 150px 0; }
.pb-contact-page__intro { display: flex; flex-direction: column; width: 50%; padding: 0 150px 70px; }
.pb-contact-page__form-col { display: flow-root; width: 50%; padding: 0 150px 70px 100px; }

/* Heading */
.pb-contact-page__title {
  margin-bottom: 16px;
  font-family: "Druk Medium", sans-serif;
  font-size: 70px;
  font-weight: 400;
  line-height: 1.5;
  color: #48210e;
}

/* Intro text + contact details */
.pb-contact-page__intro { font-family: "Trebuchet MS", "Lucida Grande", "Segoe UI", Helvetica, Arial, sans-serif; font-size: 18px; }
.pb-contact-page__label { margin-top: 1.5em; }          /* the old page had an empty line (<br>) here */
.pb-contact-page__label strong { color: #cb333b; }
.pb-contact-page__item { display: flex; align-items: center; gap: 10px; font-family: "Trebuchet MS", Tahoma, sans-serif; }
.pb-contact-page__item svg { width: 1em; height: 1em; color: #cb333b; fill: currentColor; }
.pb-contact-page__item a { font-weight: 700; }
.pb-contact-page__item .pb-sep { margin: 0 0.3em; opacity: 0.45; font-weight: 400; }   /* "Hotline | number" divider */
.pb-contact-page__item .pb-nowrap { white-space: nowrap; }

/* Form. Text inputs get their look from base.css (same values as live); only the differences are here. */
.pb-contact-page__form-title { display: inline-block; font-family: "Trebuchet MS", "Lucida Grande", "Segoe UI", Helvetica, Arial, sans-serif; font-size: 20px; }
.pb-page-contact input.pb-contact-page__hp { display: none; }   /* beats base.css's text-input display:block */
.pb-contact-page__field { margin-bottom: 15px; }
.pb-page-contact .pb-contact-page__field input,
.pb-page-contact .pb-contact-page__field input:focus { background-color: transparent; }
.pb-contact-page__field textarea {
  display: block;
  width: 100%;
  padding: 8px 12px;
  line-height: 20px;
  color: #495057;
  background: transparent;
  border: 1px solid rgba(0, 0, 0, .15);
  border-radius: 4px;
  transition: border-color .15s ease-in-out;
}
.pb-contact-page__field textarea:focus { border-color: #80bdff; }
.pb-contact-page__field ::placeholder { color: #868e96; opacity: 1; }
.pb-page-contact .pb-contact-page__field .is-invalid { border-color: #ff4500; }

.pb-contact-page__consent { position: relative; margin-bottom: 15px; padding-left: 18px; }
.pb-contact-page__consent input { position: absolute; margin: 6px 0 0 -18px; }

.pb-contact-page__form button {
  display: block;
  width: 100%;
  padding: 8px 12px;
  font-family: "Trebuchet MS", "Lucida Grande", "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 20px;
  line-height: 1.25;
  color: #fff;
  background: #cb333b;
  border: 1px solid #cb333b;
  border-radius: 100px;
}
.pb-contact-page__form button:disabled { opacity: .65; }
.pb-contact-page__form button:focus { outline: 0; box-shadow: 0 0 0 .17rem rgba(35, 207, 97, .45); }   /* live focus glow */

.pb-contact-page__validation { padding-top: 10px; color: #ff4500; }

.pb-contact-page__status {
  margin-top: 20px;
  padding: 16px 20px;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
  font-weight: 700;
  color: #a94442;
  transition: opacity .5s;
}
.pb-contact-page__status.is-success { font-weight: 600; color: #3c763d; }
.pb-contact-page__status.is-fading { opacity: 0; }

@media (max-width: 1199.98px) {
  .pb-contact-page__head { width: 95.9375%; padding: 60px 40px 0; }
  .pb-contact-page__intro { padding: 0 40px 40px; }
  .pb-contact-page__form-col { padding: 0 40px 40px 0; }
  .pb-contact-page__form-title { font-size: 18px; }
}
@media (max-width: 991.98px) {
  .pb-contact-page__head, .pb-contact-page__intro, .pb-contact-page__form-col { width: 100%; }
  .pb-contact-page__intro { padding-bottom: 20px; }
  .pb-contact-page__form-col { padding: 20px 40px 40px; }
}
@media (max-width: 767.98px) {
  .pb-contact-page { padding: 0 20px; }
  .pb-contact-page__head { padding: 70px 20px 0; }
  .pb-contact-page__title { font-size: 50px; }
  .pb-contact-page__intro { padding: 0 20px 20px; }
  .pb-contact-page__form-col { padding: 20px 20px 40px; }
}
@media (max-width: 575.98px) {
  .pb-contact-page__head { padding-top: 80px; }
  .pb-contact-page__title { font-size: 40px; }
  .pb-contact-page__intro { padding-bottom: 0; font-size: 16px; }
}