/* Contact v5: one starting question, optional context, and a local-only draft. */
.contact-intro.section-shell,
.contact-layout.section-shell {
  width: min(760px, calc(100% - 48px));
}

.contact-intro {
  padding-top: 40px;
  padding-bottom: 24px;
}

.contact-intro h1 {
  max-width: 720px;
  font-size: clamp(36px, 4.4vw, 50px);
  line-height: 1.12;
}

.contact-intro > p:not(.eyebrow) {
  max-width: 640px;
  margin-top: 14px;
  font-size: 16px;
  line-height: 1.65;
}

.direct-email-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  max-width: 100%;
  margin-top: 10px;
  color: var(--blue);
  font-size: 17px;
  font-weight: 600;
  overflow-wrap: anywhere;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.direct-email-link:hover { color: var(--blue-hover); }
.direct-email-link span { flex-shrink: 0; }

.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  padding-bottom: 56px;
}

.discovery-card,
.message-preview {
  min-width: 0;
  padding: 28px;
  grid-row: auto;
}

.optional-note {
  margin-top: 0;
  font-size: 14px;
  line-height: 1.6;
}

.form-field { margin-top: 22px; }
.form-field.contact-goal { margin-top: 10px; }
.form-field label { font-size: 16px; }
.form-field p {
  margin: 6px 0 10px;
  font-size: 14px;
  line-height: 1.6;
}

.form-field input,
.form-field textarea,
.message-preview input,
.message-preview textarea {
  min-height: 44px;
  font-size: 16px;
  line-height: 1.6;
}

.form-field textarea,
.message-preview textarea { max-height: none; }

.form-field textarea:focus-visible,
.message-preview textarea:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 5px;
}

.contact-more-context {
  margin-top: 16px;
  border-block: 1px solid var(--line);
}

.contact-more-context summary {
  min-height: 48px;
  padding: 12px 2px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.6;
  cursor: pointer;
}

.contact-more-context summary::marker { color: var(--blue); }
.contact-more-context[open] { padding-bottom: 22px; }
.contact-more-context .form-field:first-of-type { margin-top: 10px; }

.form-safety {
  margin-top: 16px;
  padding: 0;
  border: 0;
  background: none;
  font-size: 14px;
  line-height: 1.6;
}

.contact-actions { margin-top: 20px; }
.contact-actions .button {
  min-height: 48px;
  padding: 12px 20px;
  font-size: 14px;
}

.form-mechanism {
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.65;
}

.message-preview[hidden],
#prepared-content[hidden] { display: none; }
.message-preview h2 { font-size: 26px; }
.message-preview > p,
.message-preview #contact-status,
.message-preview label {
  font-size: 14px;
  line-height: 1.65;
}

.desktop-nav { gap: 24px; margin-right: 20px; font-size: 14px; }
.desktop-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  min-width: 44px;
}
.brand,
.skip-link { min-height: 44px; }
.preferences select {
  min-height: 44px;
  min-width: 44px;
  font-size: 14px;
}
.theme-toggle { width: 44px; height: 44px; }
.site-footer > div,
.site-footer > p,
.site-footer > p.footer-small {
  font-size: 14px;
  line-height: 1.65;
}
.site-footer > div { flex-wrap: wrap; gap: 8px 20px; }

@media (max-width: 620px) {
  .contact-intro.section-shell,
  .contact-layout.section-shell { width: calc(100% - 32px); }
  .contact-intro { padding-top: 28px; padding-bottom: 20px; }
  .discovery-card,
  .message-preview { padding: 20px; }
  .contact-layout { padding-bottom: 36px; }
  .direct-email-link { font-size: 16px; }
  .contact-actions { gap: 10px; }
  .contact-actions .button { flex: 1 1 180px; }
}

/* Keep the first question and email action close together. */
.contact-intro{padding-top:28px;padding-bottom:16px}
.discovery-card{padding:24px}
.form-field.contact-goal{margin-top:6px}
.form-field.contact-goal p{margin:4px 0 6px}
.contact-more-context{margin-top:12px}
.contact-more-context summary{min-height:44px;padding-block:10px}
.contact-actions{margin-top:14px}
.form-mechanism{margin-top:10px;line-height:1.5}
@media(max-width:620px){.discovery-card{padding:20px}}