/* Contact page: dark column with the contact cards beside the form in a white slanted card. */
.ex.contact { padding: calc(var(--ex-hdr) + clamp(48px, 6vw, 88px)) 0 var(--ex-sec); background: linear-gradient(180deg, var(--ex-ink) 0%, var(--ex-navy-900) 100%); color: var(--ex-text); }
.ex.contact .contact-grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(36px, 5vw, 80px); align-items: start; }
.ex.contact .contact-h { font-size: clamp(42px, 6vw, 88px); line-height: .9; }
.ex.contact .lead { margin-top: 20px; }

.ex.contact .contact-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 36px; }
.ex.contact .contact-card { display: flex; align-items: flex-start; gap: 14px; min-width: 0; padding: 20px 18px; background: var(--ex-navy-800); border: 1px solid var(--ex-line); border-radius: 4px; color: var(--ex-text); transition: background-color .2s, border-color .2s; }
.ex.contact a.contact-card:hover { background: var(--ex-navy-700); border-color: rgba(124, 204, 69, .5); }
.ex.contact .contact-card--call { grid-column: 1 / -1; background: var(--ex-green); border-color: var(--ex-green); color: var(--ex-green-ink); }
.ex.contact a.contact-card--call:hover { background: var(--ex-green-hi); border-color: var(--ex-green-hi); }
.ex.contact .contact-ic { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 10px; background: rgba(255, 255, 255, .08); color: var(--ex-green); }
.ex.contact .contact-card--call .contact-ic { background: rgba(10, 36, 16, .12); color: var(--ex-green-ink); }
.ex.contact .contact-card > span:last-child { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ex.contact .contact-card small { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ex-text-dim); }
.ex.contact .contact-card--call small { color: var(--ex-green-ink); opacity: .75; }
/* break long emails only at sensible points: never mid-word on desktop */
.ex.contact .contact-val { font-size: 17px; font-weight: 700; line-height: 1.35; overflow-wrap: break-word; }
.ex.contact a.contact-card[href^="mailto:"] { grid-column: 1 / -1; }
.ex.contact .contact-card--call .contact-val { font-size: clamp(24px, 2.6vw, 34px); font-weight: 900; font-stretch: 120%; font-style: italic; line-height: 1.05; }
.ex.contact .contact-val--sm { font-size: 15px; font-weight: 600; }
.ex.contact .contact-dir { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 14px; font-weight: 700; color: var(--ex-green); }
.ex.contact .contact-dir svg { width: 16px; height: 16px; }

.ex.contact .contact-form { padding: clamp(24px, 3vw, 40px); background: #fff; color: var(--ex-ink-text); border-radius: 4px; clip-path: polygon(0 0, calc(100% - var(--ex-cut)) 0, 100% var(--ex-cut), 100% 100%, 0 100%); }
.ex.contact .contact-form-h { margin-bottom: 18px; font-size: clamp(24px, 2.4vw, 32px); font-weight: 850; font-stretch: 115%; font-style: italic; text-transform: uppercase; line-height: 1; color: var(--ex-ink-text); }
.ex.contact .contact-form .exf__rail { display: none; }

@media (max-width: 900px) {
	.ex.contact .contact-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
	.ex.contact { padding-top: calc(var(--ex-hdr) + 32px); }
	.ex.contact .contact-cards { grid-template-columns: minmax(0, 1fr); }
	.ex.contact .contact-form { padding: 22px 18px; }
}