/* Contact page. Sizes from typography.css, colours from the logo (--brand). */
.contactx { background: #f6f7fb; padding: 64px 0 90px; }
.contactx-card { background: #fff; border: 1px solid #eceef5; border-radius: 24px; padding: 40px; box-shadow: 0 1px 2px rgba(20,23,43,.04), 0 18px 50px rgba(20,23,43,.07); }
.contactx-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: rgba(var(--brand-rgb,212,20,120),.1); color: var(--brand,#d41478); font-size: var(--fs-small); font-weight: 700; }
:root body .contactx-title { margin: 16px 0 10px; font-size: var(--fs-h1); color: #14172b; }
:root body .contactx-lead { margin: 0 0 24px; color: #5b6475; }
.contactx-alert { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; padding: 14px 18px; border-radius: 14px; background: rgba(22,163,74,.1); color: #15803d; font-weight: 600; }

.contactx-form label { display: block; margin-bottom: 6px; font-size: var(--fs-small); font-weight: 600; color: #3b4160; }
.contactx-form input, .contactx-form textarea { width: 100%; padding: 13px 16px; border: 1px solid #e3e6f0; border-radius: 12px; background: #f8f9fc; color: #14172b; font-size: var(--fs-body); outline: none; transition: border-color .2s, box-shadow .2s, background .2s; }
.contactx-form textarea { resize: vertical; min-height: 150px; }
.contactx-form input:focus, .contactx-form textarea:focus { background: #fff; border-color: var(--brand,#d41478); box-shadow: 0 0 0 4px rgba(var(--brand-rgb,212,20,120),.12); }
.contactx-form .is-invalid { border-color: #dc2626; background: #fff6f6; }
.contactx-error { display: block; margin-top: 6px; font-size: var(--fs-small); color: #dc2626; }
.contactx-btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 28px; border: 0; border-radius: 14px; background: linear-gradient(135deg, var(--brand,#d41478), #f0588b); color: #fff; font-size: var(--fs-body); font-weight: 700; box-shadow: 0 14px 30px rgba(var(--brand-rgb,212,20,120),.3); transition: transform .25s, box-shadow .25s; }
.contactx-btn:hover { transform: translateY(-3px); box-shadow: 0 20px 40px rgba(var(--brand-rgb,212,20,120),.38); }
.contactx-btn i { transition: transform .25s; }
.contactx-btn:hover i { transform: translateX(4px); }

:root body .contactx-side-title { margin: 8px 0 10px; font-size: var(--fs-h2); color: #14172b; }
.contactx-info { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; padding: 18px 20px; border: 1px solid #eceef5; border-radius: 18px; background: #fff; color: inherit; box-shadow: 0 1px 2px rgba(20,23,43,.04), 0 8px 24px rgba(20,23,43,.05); transition: transform .25s, box-shadow .25s; }
a.contactx-info:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(20,23,43,.1); }
.contactx-icon { flex: none; width: 48px; height: 48px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--brand,#d41478), #f0588b); color: #fff; font-size: 20px; box-shadow: 0 8px 18px rgba(var(--brand-rgb,212,20,120),.3); }
.contactx-info small { display: block; font-size: var(--fs-small); color: #7a8196; }
.contactx-info strong { display: block; font-size: var(--fs-body); font-weight: 600; color: #14172b; line-height: 1.5; overflow-wrap: anywhere; }

@media (max-width: 767px) { .contactx { padding: 36px 0 60px; } .contactx-card { padding: 24px 20px; border-radius: 20px; } }