.contact-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr);
    gap: 22px;
    align-items: start;
}

.contact-form,
.contact-panel {
    padding: clamp(24px, 4vw, 38px);
}

.field {
    position: relative;
    display: block;
    margin-bottom: 20px;
}

.field input,
.field textarea {
    width: 100%;
    border: 2px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--paper);
    color: var(--ink);
    padding: 22px 14px 10px;
    font: inherit;
    outline: 0;
    transition: border-color 200ms ease, box-shadow 200ms ease;
}

.field textarea {
    resize: vertical;
}

.field span {
    position: absolute;
    top: 15px;
    left: 14px;
    color: var(--muted);
    font-weight: 700;
    transition: transform 160ms ease, font-size 160ms ease, color 160ms ease;
    pointer-events: none;
}

.field input:focus,
.field textarea:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(23, 78, 166, 0.12);
}

.field input:focus + span,
.field textarea:focus + span,
.field input:not(:placeholder-shown) + span,
.field textarea:not(:placeholder-shown) + span {
    color: var(--blue);
    font-size: .72rem;
    transform: translateY(-10px);
}

/* Validation states */
.field input.is-invalid,
.field textarea.is-invalid {
    border-color: var(--red) !important;
    box-shadow: 0 0 0 3px rgba(199, 62, 29, 0.12) !important;
}

.field input.is-invalid + span,
.field textarea.is-invalid + span {
    color: var(--red) !important;
}

.field input.is-valid,
.field textarea.is-valid {
    border-color: #16a34a !important;
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.12) !important;
}

.field input.is-valid + span,
.field textarea.is-valid + span {
    color: #16a34a !important;
}

.field-error {
    display: none;
    margin-top: 6px;
    color: var(--red);
    font-size: .78rem;
    font-weight: 700;
}

.field-error.is-visible {
    display: block;
}

.field-hint {
    display: block;
    margin-top: 6px;
    color: var(--muted);
    font-size: .78rem;
    font-weight: 600;
}

.form-alert {
    padding: 12px 14px;
    border: 1px solid currentColor;
    border-radius: var(--radius-sm);
    font-weight: 700;
}

.form-alert.success {
    color: var(--teal);
    background: rgba(23, 78, 166, 0.06);
}

.form-alert.error {
    color: var(--red);
    background: rgba(199, 62, 29, 0.06);
}

.contact-panel article {
    padding-bottom: 22px;
    margin-bottom: 22px;
    border-bottom: 1px solid var(--line);
}

.contact-panel article:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: 0;
}

.contact-panel a {
    color: var(--blue);
    font-weight: 800;
}

.map-section {
    padding: 0 0 96px;
}

.map-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.map-grid iframe {
    width: 100%;
    height: 360px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
}