/*
 * Contact page. No mockup — styled to match the design system, reusing
 * the officer-profile contact-list pattern and the branch-directory map
 * treatment.
 */

.fcls-contact-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.fcls-contact-info h3, .fcls-contact-form-col h3 { font-size: 20px; margin-bottom: 20px; }

.fcls-contact-list { display: flex; flex-direction: column; gap: 14px; margin-bottom: 24px; }
.fcls-contact-list li {
	display: flex; align-items: flex-start; gap: 10px;
	padding-bottom: 14px; border-bottom: 1px solid var(--gray-300);
}
.fcls-contact-list li:last-child { border-bottom: none; padding-bottom: 0; }
.fcls-contact-list .icon { color: var(--red); flex-shrink: 0; margin-top: 2px; }
.fcls-contact-list a { font-size: 16px; font-weight: 700; color: var(--charcoal); }
.fcls-contact-list a:hover { color: var(--red); }
.fcls-contact-list span:not(.icon) { font-size: 15px; color: var(--charcoal-soft); line-height: 1.5; }

.fcls-contact-map { aspect-ratio: 16/9; border-radius: 10px; overflow: hidden; border: 1px solid var(--gray-300); }
.fcls-contact-map iframe { width: 100%; height: 100%; border: 0; display: block; }
.fcls-contact-map .map-placeholder {
	width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
	background: repeating-linear-gradient(45deg, #ececec, #ececec 10px, #f4f4f4 10px, #f4f4f4 20px);
	color: var(--gray-600); font-size: 13px;
}
.fcls-contact-note { font-size: 13.5px; color: var(--gray-600); margin-top: 18px; }
.fcls-contact-note a { color: var(--red); font-weight: 700; }

@media (max-width: 980px) {
	.fcls-contact-layout { grid-template-columns: 1fr; gap: 40px; }
}