@layer components {
    .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); }
    .contact-info-card {
        background: var(--bg); border-radius: var(--radius-lg); padding: var(--space-8);
        box-shadow: var(--shadow-sm); border: 1px solid var(--border);
    }
    .contact-form-card { background: var(--steel-50); border-radius: var(--radius-lg); padding: var(--space-8); }
    .ci-item { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid var(--border); }
    .ci-item:last-child { border-bottom: none; }
    .ci-icon {
        width: 40px; height: 40px; border-radius: var(--radius-md); background: var(--primary-50);
        display: flex; align-items: center; justify-content: center; flex-shrink: 0;
        font-size: var(--text-lg); color: var(--primary-600);
    }
    .ci-label { font-size: var(--text-xs); color: var(--steel-500); font-weight: 500; }
    .ci-value { font-size: var(--text-sm); font-weight: 600; margin-top: 2px; color: var(--steel-700); }
    .ci-value a { color: var(--steel-700); }
    .ci-value a:hover { color: var(--primary-600); }
    @media (max-width: 768px) {
        .contact-grid { grid-template-columns: 1fr; }
    }
}