/* Email contact paths, scoped to the contacts page. */
.contact-page .contact-grid { align-items: start; grid-template-columns: .85fr 1.35fr; }
.contact-page .contact-panel { min-width: 0; }
.contact-page .contact-panel h2 { font-size: clamp(26px, 2.5vw, 34px); }
.contact-page .contact-panel > p { color: #c9ddd6; }
.contact-page .contact-email { color: #a7ead7; overflow-wrap: anywhere; font-size: clamp(17px, 1.6vw, 21px); }
.contact-page .direct-contact { border-block: 1px solid var(--line); padding-block: 24px; }
.contact-page .direct-contact p { color: #b9ceca; font-size: 14px; margin-top: 13px; }
.contact-page .direct-contact h2 { font-size: 28px; margin-bottom: 18px; }
.contact-page .contact-info .note { margin-top: 25px; }
.contact-page .contact-data { font-size: 14px; }
.contact-option { margin-top: 28px; padding: 24px; border: 1px solid #42636b; }
.contact-option.is-selected { border-color: #8addc8; background: #153a44; }
.contact-option h3 { font-size: 24px; font-weight: 400; }
.contact-option p { color: #c9ddd6; font-size: 15px; margin-top: 14px; }
.contact-option .button { margin-top: 20px; }
.selected-path { display: block; color: #9fe6d2; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 13px; }
.selected-path[hidden] { display: none; }
.contact-page .contact-hint { font-size: 13px; margin-top: 24px; }
@media (max-width: 900px) {
  .contact-page .contact-grid { grid-template-columns: 1fr; }
  .contact-page .contact-info { max-width: none; }
}
@media (max-width: 580px) {
  .contact-page .contact-info .contact-details-title { font-size: 24px; }
  .contact-option { padding: 21px 18px; }
  .contact-option h3 { font-size: 22px; }
}