/* ============================================================
   SL STUDIO — CONTACT PAGE
   (.hero-page-header lives in components.css — every inner page uses it)
   ============================================================ */

.contact-layout {
    display: grid;
    grid-template-columns: 0.85fr 1.3fr;
    gap: var(--space-5);
    align-items: start;
}

.contact-info .card { padding: var(--space-3) var(--space-4); }
.contact-info .icon-frame {
    width: 44px; height: 44px;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(var(--color-gold-rgb), 0.15), rgba(var(--color-accent-rgb), 0.15));
    color: var(--color-gold-text);
}
.contact-info h3 { font-size: var(--fs-h4); margin-bottom: 4px; }
.contact-info .footer-hours li { padding-block: 4px; }

.contact-form-panel { padding: var(--space-5); }

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