/* ==========================================================
   CONTACT.CSS — Camille Market Insight
   ========================================================== */

.contact-grid {
    display:               grid;
    grid-template-columns: 1fr 1.6fr;
    gap:                   80px;
    align-items:           flex-start;
}

/* ── Info Column ── */
.contact-info h2 { font-family: var(--font-heading); font-size: clamp(24px,3.5vw,40px); font-weight: 700; color: var(--color-ink); line-height: 1.15; margin-bottom: 10px; }
.contact-info p { font-family: var(--font-sans); font-size: 16px; font-weight: 400; color: var(--color-stone); line-height: 1.85; margin-bottom: 32px; }

.ci-items { display: flex; flex-direction: column; gap: 20px; }
.ci-item { display: flex; gap: 16px; align-items: flex-start; }

.ci-icon {
    width:           44px;
    height:          44px;
    background:      var(--crimson-pale);
    border:          .5px solid rgba(227,24,55,.2);
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           var(--crimson);
    flex-shrink:     0;
}

.ci-label { font-family: var(--font-sans); font-size: 9px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--crimson); margin-bottom: 4px; }
.ci-item a, .ci-item p { font-family: var(--font-sans); font-size: 15px; font-weight: 400; color: var(--color-ink); text-decoration: none; margin: 0; }
.ci-item a:hover { color: var(--crimson); }

/* ── Form Column ── */
.contact-form-wrap { background: var(--color-parchment); padding: 48px; border: .5px solid rgba(0,0,0,.06); border-top: 3px solid var(--crimson); }

.contact-form-wrap .form-group label { color: var(--color-ink); font-weight: 600; }
.contact-form-wrap .form-group input,
.contact-form-wrap .form-group select,
.contact-form-wrap .form-group textarea { background: #fff; border-color: rgba(0,0,0,.15); }
.contact-form-wrap .form-group input:focus,
.contact-form-wrap .form-group select:focus,
.contact-form-wrap .form-group textarea:focus { border-color: var(--crimson); }

@media (max-width: 900px) {
    .contact-grid { grid-template-columns: 1fr; gap: 48px; }
    .contact-form-wrap { padding: 32px 24px; }
}