/* Figma Contact: desktop 256:2685, mobile 261:20141. */
.contact-section { position: relative; isolation: isolate; overflow: hidden; padding: 56px 80px 100px; background: var(--cream-50); }
.contact-inner { max-width: 1280px; margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: 'intro form' 'details form'; gap: 24px 56px; align-items: start; }
.contact-intro { grid-area: intro; max-width: 570px; }
.contact-intro h1 { font: var(--title-h2); margin: 0 0 16px; }
.contact-intro p { font-size: 16px; line-height: 24px; color: var(--brown-900); }
.contact-intro p + p { margin-top: 24px; }
.contact-form { grid-area: form; padding: 24px; display: flex; flex-direction: column; align-items: flex-start; gap: 32px; min-width: 0; }
.contact-fields { width: 100%; display: grid; gap: 24px; }
.contact-field { min-width: 0; }
.contact-field input, .contact-field textarea { display: block; width: 100%; min-height: 40px; border: 1px solid var(--cream-200); border-radius: 8px; padding: 9px 12px; background: #fff; color: var(--brown-800); font: 400 14px/20px var(--sans); box-shadow: 0 1px 2px rgb(228 229 231 / .24); }
.contact-field textarea { height: 143px; min-height: 143px; resize: vertical; }
.contact-field input::placeholder, .contact-field textarea::placeholder { color: var(--brown-600); opacity: 1; }
.contact-field input:hover, .contact-field textarea:hover { border-color: var(--brown-200); }
.contact-field input:focus-visible, .contact-field textarea:focus-visible { border-color: var(--sage-600); outline: 1px solid var(--sage-600); outline-offset: 0; }
.contact-field [aria-invalid="true"] { border-color: #b0413e; }
.contact-error { margin-top: 6px; color: #a4312d; font-size: 13px; line-height: 20px; }
.contact-submit { width: 100%; }
.contact-demo-note { font-size: 12px; line-height: 18px; margin-top: 10px; color: var(--brown-600); }
.contact-status { width: 100%; padding: 16px; border: 1px solid var(--sage-600); border-radius: 8px; background: #fff; font-size: 14px; line-height: 21px; }
.contact-details { grid-area: details; }
.contact-details-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 24px; }
.contact-detail { display: flex; flex-direction: column; gap: 16px; font-size: 16px; line-height: 24px; }
.contact-detail p + p { margin-top: 8px; }
.contact-detail p > a, .contact-detail p > span { margin-left: 8px; }
.contact-detail a { overflow-wrap: anywhere; }
.contact-detail a:hover { text-decoration: underline; text-underline-offset: 3px; }
.contact-detail address { font-style: normal; }
.contact-social { display: flex; gap: 24px; margin-top: 24px; }
.contact-decor { position: absolute; z-index: -1; pointer-events: none; }
.contact-decor--leaf { top: 0; right: 0; }
.contact-decor--botanical { bottom: 0; left: calc(50% - 230px); }
@media (max-width: 1100px) and (min-width: 761px) {
  .contact-section { padding-inline: 40px; }
  .contact-inner { column-gap: 32px; }
  .contact-form { padding-inline: 0; }
  .contact-details-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .contact-section { padding: 32px 20px 48px; }
  .contact-inner { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'intro' 'form' 'details'; gap: 24px; max-width: 560px; }
  .contact-intro h1 { font: var(--title-h3); margin-bottom: 16px; }
  .contact-intro p { font-size: 14px; line-height: 21px; }
  .contact-intro p + p { margin-top: 24px; }
  .contact-form { padding: 0; gap: 24px; }
  .contact-fields { gap: 16px; }
  .contact-submit .button { width: 100%; }
  .contact-demo-note { text-align: center; }
  .contact-details-grid { grid-template-columns: minmax(0, 1fr); text-align: center; gap: 24px; }
  .contact-detail { align-items: center; font-size: 14px; line-height: 21px; gap: 8px; }
  .contact-detail p + p { margin-top: 4px; }
  .contact-social { justify-content: center; }
  .contact-decor { display: none; }
}