/* Contact page (/contact-8). */

.contact-intro { max-width: var(--page); margin: 0 auto; padding: 88px 250px 56px; }
.contact-intro__title { font: 700 56px/76px var(--f-display); color: #030b54; }
.contact-intro__text { width: 680px; max-width: 100%; margin-top: 42px; font: 300 16px/28.8px var(--f-body); letter-spacing: -0.16px; }

.contact-panel { max-width: var(--page); margin: 0 auto; padding: 0 40px 40px; }
.contact-panel__inner { padding: 75px 0 93px 217px; background: rgba(131, 106, 6, .8); }
.contact-panel__title { font: italic 400 38px/41.8px var(--f-display); letter-spacing: -1.52px; color: #030b54; }

.contact-details { display: grid; grid-template-columns: repeat(3, 320px); margin: 43px 0 0 1px; }
.contact-details h3 { font: 700 16px/20.8px var(--f-display); letter-spacing: -0.16px; color: var(--cream); }
.contact-details p { margin-top: 14px; font: 300 16px/19px var(--f-body); letter-spacing: -0.16px; }
.contact-details a { text-decoration: none; }
.contact-details a:hover { text-decoration: underline; }
.contact-social { display: flex; gap: 5px; margin: 9px 0 0 -6px; padding: 0; list-style: none; }
.contact-social img { width: 23px; height: 23px; }

.contact-form {
  display: grid; grid-template-columns: repeat(3, 250px); gap: 10px 20px;
  width: 790px; margin: 49px 0 0 -3px;
  font: 400 14px/14px var(--f-sans);
}
.field label { display: block; margin-bottom: 9px; color: var(--navy); }
.field input, .field textarea {
  display: block; width: 100%; height: 37px; padding: 3px 10px;
  border: 1px solid var(--navy); border-radius: 0; background: var(--cream);
  font: 400 14px/1.4 var(--f-sans); color: var(--navy);
}
.field textarea { height: 86px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: 2px solid var(--navy); outline-offset: -2px; }
.field--full { grid-column: 1 / -1; }
.form-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; align-items: center; gap: 20px; margin-top: 5px; }
.form-actions button {
  width: 250px; height: 36px; border: 1px solid var(--slate); background: var(--slate);
  color: var(--cream); font: 400 14px/19.6px var(--f-sans); cursor: pointer;
}
.form-actions button:hover { background: var(--navy); border-color: var(--navy); }
.form-status { color: var(--cream); font-size: 14px; }

@media (max-width: 1240px) {
  .contact-intro { padding-left: 40px; padding-right: 40px; }
  .contact-panel__inner { padding-left: 40px; padding-right: 40px; }
  .contact-details { grid-template-columns: repeat(3, 1fr); }
  .contact-form { width: 100%; grid-template-columns: repeat(3, 1fr); }
}

/* Mobile: Wix 320px units, see site.css */
@media (max-width: 760px) {
  .contact-intro { height: calc(373 * var(--m)); padding: calc(60 * var(--m)) calc(20 * var(--m)) 0; }
  .contact-intro__title { font-size: calc(30 * var(--m)); line-height: calc(40 * var(--m)); }
  .contact-intro__text { margin-top: calc(24 * var(--m)); font-size: calc(16 * var(--m)); line-height: calc(28.8 * var(--m)); }
  .contact-panel { padding: 0; }
  .contact-panel__inner { min-height: calc(904 * var(--m)); padding: calc(36 * var(--m)) calc(20 * var(--m)) calc(88 * var(--m)); }
  .contact-panel__title { font-size: calc(30 * var(--m)); line-height: calc(33 * var(--m)); letter-spacing: calc(-1.2 * var(--m)); }
  .contact-details { grid-template-columns: 1fr; gap: calc(29 * var(--m)); margin: calc(26 * var(--m)) 0 0; }
  .contact-details h3 { font-size: calc(16 * var(--m)); line-height: calc(20.8 * var(--m)); }
  .contact-details p { margin-top: calc(13 * var(--m)); font-size: calc(16 * var(--m)); line-height: calc(19 * var(--m)); }
  .contact-social { margin: calc(12 * var(--m)) 0 0 calc(-5 * var(--m)); }
  .contact-social img { width: calc(23 * var(--m)); height: calc(23 * var(--m)); }
  .contact-form { grid-template-columns: 1fr; gap: calc(20 * var(--m)); width: auto; margin: calc(56 * var(--m)) 0 0; font-size: calc(16 * var(--m)); line-height: calc(16 * var(--m)); }
  .field label { margin-bottom: calc(11 * var(--m)); }
  .field input { height: calc(43 * var(--m)); }
  .field textarea { height: calc(73 * var(--m)); }
  .form-actions { flex-direction: column-reverse; margin-top: 0; }
  .form-actions button { width: 100%; height: calc(42 * var(--m)); font-size: calc(14 * var(--m)); }
}