/* Contact page — info cells, editorial form, map. */

.contact-info {
  background: var(--paper-050);
  padding-top: var(--space-section);
}
.contact-info__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: var(--border-strong);
}
.contact-info__item {
  padding: var(--space-6);
  border-right: var(--border-hairline);
}
.contact-info__item:last-child { border-right: 0; }
.contact-info__label {
  display: block;
  font-size: var(--text-caption);
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--green-700);
  margin-bottom: var(--space-3);
}
.contact-info__item a,
.contact-info__item p {
  font-size: var(--text-body);
  color: var(--ink-700);
  margin: 0;
  max-width: none;
}
.contact-info__item a:hover { color: var(--ink-900); }

.contact-main {
  background: var(--paper-050);
  padding-block: var(--space-section);
}
.contact-main__grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: clamp(2rem, 4vw, 4.5rem);
  align-items: start;
}

.contact-form { margin-top: var(--space-6); }
/* Confirmation dialog after a message is sent. */
.sent-dialog {
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: #fff;
  box-shadow: 0 24px 60px rgb(14 31 26 / 0.28);
  max-width: min(28rem, calc(100vw - 2rem));
}
.sent-dialog::backdrop {
  background: rgb(14 31 26 / 0.55);
}
.sent-dialog__inner {
  display: grid;
  justify-items: center;
  gap: var(--space-4);
  padding: clamp(1.75rem, 4vw, 2.5rem);
  text-align: center;
}
.sent-dialog__mark {
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  border-radius: var(--radius-full);
  background: var(--green-100);
  color: var(--green-800);
  font-size: 1.6rem;
  font-weight: 700;
}
.sent-dialog__title {
  font-size: var(--text-h3);
  font-weight: 600;
  color: var(--ink-900);
  line-height: 1.35;
}
.sent-dialog__close {
  min-height: 44px;
  padding: 0 1.6rem;
  border: 0;
  border-radius: var(--radius-xs);
  background: var(--green-800);
  color: #fff;
  font-size: var(--text-small);
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out);
}
.sent-dialog__close:hover { background: var(--green-900); }

/* Without script the dialog is left `open`, which a browser lays out in flow rather
   than centred. Pin it so the fallback still reads as a panel and not as a stray
   block at the foot of the page. */
.sent-dialog[open]:not(:modal) {
  position: fixed;
  inset: auto auto var(--space-6) 50%;
  transform: translateX(-50%);
  z-index: 60;
}

.contact-form__error {
  margin-bottom: var(--space-5);
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid #b3261e;
  background: rgb(179 38 30 / 0.06);
  color: #8c1d18;
  font-size: var(--text-small);
}

/* The honeypot. Moved out of view rather than display:none, because some bots skip
   fields they can tell are not rendered — this one has to look real to them while
   staying unreachable for anyone else (it is also aria-hidden and out of the tab
   order in the markup). */
.form-trap {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-form__captcha { margin-bottom: var(--space-5); }

.form-field { margin-bottom: var(--space-5); }
.form-field label {
  display: block;
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--ink-700);
  margin-bottom: var(--space-2);
}
.form-field input,
.form-field textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  font: inherit;
  color: var(--ink-900);
  background: var(--paper-000);
  border: 1px solid var(--line-300);
  border-radius: var(--radius-xs);
  transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}
.form-field textarea { resize: vertical; min-height: 140px; }
.form-field input:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--green-600);
  box-shadow: 0 0 0 3px rgb(39 93 80 / 0.14);
}

.contact-form__submit { margin-top: var(--space-2); }

.contact-main__map {
  border: var(--border-strong);
  padding: var(--space-2);
  background: var(--paper-000);
  position: sticky;
  top: calc(84px + var(--space-6));
}
.contact-main__map iframe {
  display: block;
  width: 100%;
  height: 480px;
}

@media (max-width: 1024px) {
  .contact-main__grid { grid-template-columns: 1fr; }
  .contact-main__map { position: static; }
  .contact-main__map iframe { height: 380px; }
}
@media (max-width: 640px) {
  .contact-info__grid { grid-template-columns: 1fr; }
  .contact-info__item { border-right: 0; border-bottom: var(--border-hairline); }
  .contact-info__item:last-child { border-bottom: 0; }
}