.visit { background: var(--theme-bg); }

.visit__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(36px, 5vw, 80px);
    align-items: start;
}

.visit__block { margin-top: 1.8rem; }

.visit__block h3 {
    font-family: var(--theme-font-family);
    font-weight: 600;
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--theme-mocha-deep);
    margin-bottom: 0.5rem;
}

.visit__block p { color: var(--theme-espresso); }

.visit__block a {
    color: var(--theme-coffee);
    text-decoration: none;
    transition: color 0.3s var(--ease);
}

.visit__block a:hover { color: var(--theme-espresso); }

/* ── Contact form card ───────────────────────────────────────── */
.contact-form {
    background: #fff;
    padding: clamp(28px, 4vw, 44px);
    border-radius: var(--theme-radius-lg);
    box-shadow: 0 24px 60px -32px color-mix(in srgb, var(--theme-espresso) 35%, transparent);
    border: 1px solid var(--theme-border);
}

.contact-form h3 {
    font-family: var(--theme-font-display);
    font-size: 1.5rem;
    color: var(--theme-text);
    margin-bottom: 1.4rem;
}

.field { margin-bottom: 1.1rem; }

.field label {
    display: block;
    font-size: 0.74rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--theme-text-muted);
    margin-bottom: 0.45rem;
    font-weight: 500;
}

.field input,
.field textarea {
    width: 100%;
    font: inherit;
    font-size: 0.98rem;
    padding: 0.85em 1em;
    border: 1px solid var(--theme-border);
    border-radius: var(--theme-radius);
    background: var(--theme-bg);
    color: var(--theme-text);
    transition:
        border-color 0.3s var(--ease),
        box-shadow 0.3s var(--ease),
        background 0.3s var(--ease);
    resize: vertical;
}

.field input:focus,
.field textarea:focus {
    outline: none;
    border-color: var(--theme-mocha-deep);
    background: var(--theme-surface);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-primary) 18%, transparent);
}

/* Scoped here so it never leaks to buttons in other components */
.contact-form .btn--block {
    width: 100%;
    justify-content: center;
}

.contact-form__note {
    margin-top: 1rem;
    font-size: 0.9rem;
    color: var(--theme-mocha-deep);
    min-height: 1.2em;
}
@media (max-width: 980px) {
    .visit__inner { grid-template-columns: 1fr; }
}