.contact-page {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: 48px clamp(32px, 6vw, 90px);
  padding-block: 56px 88px;
  align-items: start;
}
.contact-intro .eyebrow { color: var(--accent); }
.contact-intro h1 { font-size: clamp(2.5rem, 4.5vw, 4rem); margin-block: 18px 24px; }
.contact-intro h1 em { display: block; color: var(--accent); font-style: normal; }
.contact-intro > p { font-size: 1.25rem; color: var(--muted); max-width: 38ch; }
.contact-intro .contact-person { font-size: 1.0625rem; margin-top: 18px; }
.contact-tip { border-top: 1px solid var(--line); padding-top: 26px; margin-top: 34px; color: var(--muted); }
.contact-tip h2 { font-size: 1.375rem; color: var(--ink); margin-bottom: 14px; }
.contact-tip p { font-size: 1.0625rem; max-width: 44ch; }
.contact-tip p + p { margin-top: 16px; }
.contact-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 32px;
  min-width: 0;
}
.contact-field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 22px; min-width: 0; }
.contact-field label { font-size: 1rem; font-weight: 600; }
.field-required { font-size: .875rem; font-weight: 400; color: var(--muted); }
.contact-field :is(input, textarea, select) {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  padding: 11px 12px;
  font: inherit;
  font-size: 1.0625rem;
  line-height: 1.5;
}
.contact-field textarea { resize: vertical; min-height: 180px; }
.contact-field :is(input, textarea, select):focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.contact-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.contact-page .field-note, .contact-privacy { color: var(--muted); font-size: .9375rem; line-height: 1.6; margin: 0; }
#verification-status { margin-block: 10px 16px; }
#spam-check { min-height: 65px; }
.contact-panel .button { width: 100%; cursor: pointer; }
.contact-panel .button:disabled { opacity: .6; cursor: default; }
.verification-retry {
  background: var(--surface-tint);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  min-height: 44px;
  padding: 8px 14px;
  margin-bottom: 16px;
  font-size: 1rem;
  cursor: pointer;
}
.contact-privacy { margin-top: 18px; }
.contact-page a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.contact-trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
#contact-status {
  margin: 20px 0 0;
  padding: 16px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--surface-tint);
  overflow-wrap: anywhere;
}
#contact-status[data-error="true"] { border-color: var(--accent); }
#contact-status:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.contact-panel:has(form[hidden]) #contact-status { margin: 0; }
.contact-privacy-details { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 32px; }
.contact-privacy-details h2 { font-size: 1.5rem; margin-bottom: 16px; }
.contact-privacy-details p { max-width: 78ch; color: var(--muted); font-size: 1rem; }
.contact-privacy-details p + p { margin-top: 14px; }
@media (max-width: 1100px) {
  .contact-pair { grid-template-columns: 1fr; gap: 0; }
}
@media (max-width: 960px) {
  .contact-page { grid-template-columns: 1fr; max-width: 760px; padding-top: 32px; }
  .contact-intro > p, .contact-tip p { max-width: none; }
  .contact-tip { margin-top: 24px; }
  .contact-pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
}
@media (max-width: 540px) {
  .contact-pair { grid-template-columns: 1fr; gap: 0; }
  .contact-panel { padding: 24px 20px; }
  .contact-page { gap: 28px; }
}
/* Turnstile's flexible widget needs 300px. Keep its full controls reachable at 320px. */
@media (max-width: 380px) {
  .contact-page { width: calc(100% - 20px); }
  .contact-panel { padding: 24px 0 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; }
}