:root {
    --ink: #14212b;
    --muted: #64717c;
    --line: #e6eaed;
    --paper: #fff;
    --navy: #102c43;
    --gold: #b8873f;
}

.contact-hero {
    background: linear-gradient(120deg, rgba(16, 44, 67, 0.97), rgba(23, 63, 91, 0.86));
    color: #fff;
    padding: 82px 0;
}

.contact-hero-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 32px;
    align-items: center;
}

.contact-hero h1 {
    font: 700 40px/1.08 Georgia, serif;
    margin: 14px 0 16px;
    max-width: 640px;
}

.contact-hero p {
    color: #dce7ec;
    font-size: 17px;
    max-width: 580px;
}

.contact-card,
.contact-form-card,
.contact-info-card {
    background: var(--paper);
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 16px 38px rgba(16, 44, 67, 0.08);
}

.contact-card h3,
.contact-form-card h2,
.contact-info-card h3 {
    font: 700 24px/1.2 Georgia, serif;
    margin: 0 0 12px;
}

.contact-grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 24px;
    padding-top: 24px;
    padding-bottom: 24px;
}

.contact-form {
    display: grid;
    gap: 8px;
}

.contact-form label {
    margin-top: 8px;
}

.contact-form button {
    margin-top: 12px;
    border: 0;
}

.contact-info-card ul {
    padding-left: 18px;
    color: var(--muted);
}

.contact-image img {
    margin-top: 16px;
    width: 100%;
    min-height: 240px;
    object-fit: cover;
    border-radius: 12px;
}

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

@media (max-width: 600px) {
    .contact-hero h1 {
        font-size: 30px;
    }
}