/* The FAQ leaves a glimpse of the next invitation to get in touch. */
.faq.section-pad { min-height: 0; padding: 56px 0; }
.faq-layout { align-items: start; }

/* Clear polycarbonate: translucent layers, softened scenery and crisp text. */
.contact.section-pad {
  position: relative; isolation: isolate;
  background: #063f49 url('assets/contact-wedding.webp') center 54% / cover no-repeat;
  color: #fff;
  padding-block: 40px;
}
.contact::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(2, 39, 47, .9), rgba(3, 48, 55, .62) 47%, rgba(3, 47, 53, .24)),
    linear-gradient(0deg, rgba(3, 39, 46, .5), transparent 72%);
}
.contact-layout { align-items: center; gap: 7%; }
.contact-copy { text-shadow: 0 2px 16px #01222a38; text-align: center; }
.contact-copy .eyebrow { justify-content: center; }
@media (min-width: 761px) {
  .contact-copy { text-align: left; }
  .contact-copy .eyebrow { justify-content: flex-start; }
}
.contact-copy > p:not(.eyebrow) { color: #e5efeb; }
.contact #quote-form {
  position: relative; padding: 28px 30px 24px; border-radius: 22px;
  border: 1px solid rgba(235, 255, 249, .44);
  background: linear-gradient(135deg, rgba(241, 255, 251, .2), rgba(203, 237, 233, .07)), rgba(3, 46, 55, .3);
  -webkit-backdrop-filter: blur(16px) saturate(1.18);
  backdrop-filter: blur(16px) saturate(1.18);
  box-shadow: 0 24px 65px #001c2a35, inset 0 1px 0 #ffffff55, inset 0 -1px 0 #d5f9ef18;
}
.contact #quote-form label { color: #f1faf7; font-size: 11px; line-height: 1.4; margin-bottom: 14px; }
.contact .form-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.contact #quote-form input, .contact #quote-form select {
  width: 100%; min-width: 0; min-height: 43px;
  margin-top: 7px; padding: 10px 12px; border: 1px solid #e8fff344;
  border-radius: 7px; color: #fff; background: #002c343b;
  font-size: 12px; line-height: 1.4;
}
.contact #quote-form input::placeholder { color: #e0eee9cc; }
.contact #quote-form select:invalid { color: #e0eee9cc; }
.contact #quote-form select option { background: #064c5a; color: #fff; }
.contact #quote-form input:focus-visible, .contact #quote-form select:focus-visible {
  border-color: var(--green); outline: 2px solid var(--green); outline-offset: 2px;
}
.contact #quote-form .button { margin-top: 2px; width: 100%; }
.contact .form-note { color: #e0ede7; font-size: 9px; margin-top: 12px; line-height: 1.5; }
.footer-top .footer-legal { font-size: 11px; color: #d9eae4; line-height: 1.65; margin-top: 15px; }
.footer-legal strong { font-weight: 500; }

@supports not (backdrop-filter: blur(1px)) {
  .contact #quote-form { background-color: rgba(3, 46, 55, .82); }
}

@media (max-width: 1050px) and (min-width: 761px) {
  .contact-layout { gap: 5%; }
  .contact #quote-form { padding: 24px; }
  .contact .form-row { gap: 12px; }
  .contact #quote-form input, .contact #quote-form select { font-size: 11px; padding-inline: 9px; }
}
@media (max-width: 760px) {
  .faq.section-pad { padding: 28px 0; }
  .faq-layout { gap: 22px; }
  .contact.section-pad { padding: 32px 0; background-position: 53% center; }
  .contact::before { background: linear-gradient(180deg, rgba(2, 39, 47, .8), rgba(3, 48, 55, .53) 48%, rgba(3, 47, 53, .36)); }
  .contact-layout { gap: 24px; }
  .contact #quote-form { padding: 22px 18px 19px; border-radius: 20px; }
  .contact #quote-form label { margin-bottom: 13px; font-size: 11px; }
  .contact #quote-form input, .contact #quote-form select { font-size: 11px; min-height: 43px; padding-inline: 9px; }
  .contact .form-row { gap: 12px; }
  .contact .form-note { font-size: 8px; }
}
@media (max-width: 360px) {
  .contact .form-row { grid-template-columns: 1fr; gap: 0; }
}