/* Contact reference layout. Loaded only on contact.php. */
.contact-page { position: relative; isolation: isolate; overflow: visible; padding: 53px 0 60px; background: linear-gradient(145deg, #edf1de, #f8fce4); }
.contact-page::before { content: ''; position: absolute; inset: 0 0 auto; height: 640px; z-index: -1; pointer-events: none; background: url('../img/footer-ants.svg') center / cover no-repeat; opacity: .15; }
.contact-page > .container { width: 88%; max-width: 1320px; padding: 0; }
.contact-page__grid { grid-template-columns: minmax(0, 270fr) minmax(0, 323fr) minmax(0, 323fr); grid-template-areas: 'media content details' 'media form form'; gap: 48px 1.8%; align-items: start; }
.contact-page__media { border-radius: 0; max-width: none; align-self: stretch; }
.contact-page__media img { width: 100%; height: 100%; min-height: 0; aspect-ratio: auto; object-fit: cover; object-position: center; }
.contact-page__content { padding-top: 1px; }
.contact-page__content h1 { font-size: clamp(32px, 3.35vw, 48px); line-height: 1.15; margin: 0 0 30px; max-width: 100%; }
.contact-page__content p { font-size: clamp(10px, .95vw, 14px); line-height: 1.8; max-width: 66%; margin: 0; }
.contact-mini { gap: 3px; padding: 0; }
.contact-mini__panel { min-height: 104px; padding: 30px 12px 24px; gap: 12px; border-radius: 4px; grid-template-columns: .95fr 1fr; }
.contact-mini__panel:first-child { clip-path: polygon(0 0,100% 20%,100% 80%,0 100%); }
.contact-mini__panel:last-child { clip-path: polygon(0 20%,100% 0,100% 100%,0 80%); padding-top: 25px; padding-bottom: 25px; }
.contact-mini__item { font-size: clamp(9px, .88vw, 12px); line-height: 1.2; font-weight: 400; gap: 8px; align-self: center; overflow-wrap: anywhere; }
.contact-mini__item span, .contact-mini__item img { width: 13px; height: 13px; }
.contact-mini__item img { object-fit: contain; filter: brightness(0) invert(1); }
.contact-page__form { margin-top: 0; min-width: 0; }
.contact-page__form .row { --bs-gutter-x: 17px; }
.contact-page__form .fld { margin-bottom: 15px; }
.contact-page__form .fld label { font-size: 10px; color: #38462d; margin-bottom: 6px; }
.contact-page__form .fld input, .contact-page__form .fld select,
.contact-page__form .fld textarea, .contact-page__form .service-picker__trigger { min-height: 37px; height: 37px; border: 0; border-radius: 4px; padding: 8px 10px; background: #d5dbc4; font-size: 12px; }
.contact-page__form .fld textarea { height: 81px; min-height: 81px; resize: vertical; }
.contact-page__form .service-picker__trigger { gap: 6px; padding-right: 26px; }
.contact-page__form .service-picker__trigger::after { width: 7px; height: 7px; top: 14px; right: 15px; }
.contact-page__form .service-picker__trigger img { width: 20px; height: 20px; }
.contact-page__form .service-picker__trigger span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contact-page__form .service-picker__list { min-width: min(260px, 75vw); left: auto; right: 0; }
.contact-page__form .service-picker__option { font-size: 13px; }
.contact-page__form .form-foot { margin-top: 20px; }
.contact-page__form .btn { width: 257px; max-width: 100%; min-width: 0; min-height: 49px; padding: 14px 30px !important; font-size: 14px; border-radius: 15px; clip-path: polygon(6% 0,94% 6%,100% 32%,100% 68%,94% 94%,6% 100%,0 72%,0 28%); gap: 4px; }
.contact-page__form .form-status:empty { display: none; }
.contact-page__form .fld .service-picker__native { width: 1px; height: 1px; min-height: 0; padding: 0; }
.contact-page__form :is(input, textarea, select):focus-visible { outline: 2px solid var(--olive); outline-offset: 2px; }
@media (min-width: 1200px) {
  .contact-page__grid { row-gap: 54px; }
  .contact-mini__panel { min-height: 130px; padding: 34px 18px; }
  .contact-page__form .fld label { font-size: 13px; }
  .contact-page__form .fld input, .contact-page__form .fld select, .contact-page__form .service-picker__trigger { min-height: 46px; height: 46px; }
  .contact-page__form .fld textarea { min-height: 100px; height: 100px; }
  .contact-page__form .service-picker__trigger::after { top: 18px; }
}
@media (max-width: 991.98px) {
  .contact-page { padding-top: 36px; }
  .contact-page__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); grid-template-areas: 'media content' 'media details' 'form form'; gap: 28px 24px; }
  .contact-page__content h1 { font-size: 32px; margin-bottom: 18px; }
  .contact-page__content p { max-width: 100%; font-size: 13px; }
  .contact-mini__panel { clip-path: none; min-height: 100px; padding: 18px 12px; }
  .contact-mini__item { font-size: 11px; }
  .contact-page__form .fld label { font-size: 12px; }
  .contact-page__form .fld input, .contact-page__form .fld select, .contact-page__form .service-picker__trigger { height: 44px; min-height: 44px; font-size: 14px; }
  .contact-page__form .service-picker__trigger::after { top: 17px; }
}
@media (max-width: 575.98px) {
  .contact-page > .container { width: calc(100% - 36px); }
  .contact-page__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'content' 'media' 'details' 'form'; gap: 24px; }
  .contact-page__media img { height: 390px; object-position: center 45%; }
  .contact-mini { gap: 10px; }
  .contact-mini__panel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-page__form .fld textarea { min-height: 110px; }
  .contact-page__form .service-picker__list { left: 0; right: 0; min-width: 0; }
  .contact-page__form .btn { width: 100%; }
}

/* Service field is intentionally styled as the same filled box as the other contact fields. */
.contact-page__form .fld:has(> .service-picker) { padding-top: 0; }
.contact-page__form .fld:has(> .service-picker) > label {
  position: static; width: auto; height: auto; padding: 0; margin: 0 0 6px;
  overflow: visible; clip-path: none; white-space: normal;
}
.contact-page__form .fld .service-picker__trigger {
  height: 37px; min-height: 37px; padding: 8px 34px 8px 10px;
  background: #d5dbc4; border: 0; border-radius: 4px;
  font-size: 12px; color: var(--ink);
}
.contact-page__form .fld .service-picker__trigger::after { width: 8px; height: 8px; right: 14px; top: 12px; }
.contact-page__form .fld .service-picker__trigger[aria-expanded="true"]::after { top: 17px; }
.contact-page__form .service-picker__list { z-index: 10000; }
@media (min-width: 1200px) {
  .contact-page__form .fld .service-picker__trigger { height: 46px; min-height: 46px; font-size: 13px; }
  .contact-page__form .fld .service-picker__trigger::after { top: 16px; }
  .contact-page__form .fld .service-picker__trigger[aria-expanded="true"]::after { top: 21px; }
}
@media (max-width: 991.98px) {
  .contact-page__form .fld .service-picker__trigger { height: 44px; min-height: 44px; font-size: 14px; }
  .contact-page__form .fld .service-picker__trigger::after { top: 15px; }
  .contact-page__form .fld .service-picker__trigger[aria-expanded="true"]::after { top: 20px; }
}


/* Native service select: same box as the other contact inputs. */
.contact-page__form .fld select[name="service"] {
  width: 100%;
  min-height: 37px;
  height: 37px;
  padding: 8px 34px 8px 10px;
  background-color: #d5dbc4;
  border: 0;
  border-radius: 4px;
  color: var(--ink);
  font-family: var(--ff-body);
  font-size: 12px;
  line-height: 1.2;
  cursor: pointer;
  box-sizing: border-box;
}
@media (min-width: 1200px) {
  .contact-page__form .fld select[name="service"] {
    min-height: 46px;
    height: 46px;
    padding: 10px 38px 10px 10px;
    font-size: 13px;
  }
}
@media (max-width: 991.98px) {
  .contact-page__form .fld select[name="service"] {
    min-height: 44px;
    height: 44px;
    padding: 10px 38px 10px 10px;
    font-size: 14px;
  }
}