.contact-hero { padding-block: 64px 48px; }
.contact-hero h1 { font-size: clamp(40px, 5.5vw, 68px); }
.contact-layout {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    gap: 70px;
    padding-bottom: 80px;
}
.contact-form {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 32px;
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.field { margin-bottom: 22px; }
.field label { display: block; font-size: 14px; margin-bottom: 8px; }
.field input, .field select, .field textarea {
    width: 100%;
    min-height: 48px;
    padding: 12px;
    font: inherit;
    font-size: 16px;
    background: var(--background);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 8px;
}
.field textarea { resize: vertical; min-height: 160px; }
.field input:focus-visible, .field select:focus-visible,
.field textarea:focus-visible {
    outline: 2px solid var(--text);
    outline-offset: 3px;
}
.notice { border: 1px solid var(--border); padding: 20px; margin-bottom: 26px; border-radius: 10px; }
.notice h2 { font-size: 22px; margin-top: 0; }
.notice ul { padding-inline-start: 22px; }
.consent { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; margin-bottom: 24px; }
.consent input { margin-top: 6px; flex-shrink: 0; }
.form-help { font-size: 13px; color: var(--muted); }
.contact-aside h2 { font-size: 28px; }
.contact-aside a { overflow-wrap: anywhere; }
.contact-aside p { color: var(--muted); }
.hp-field { display: none; }
button.button { cursor: pointer; }
@media(max-width: 800px) {
    .contact-layout { grid-template-columns: 1fr; gap: 30px; }
}
@media(max-width: 540px) {
    .form-grid { grid-template-columns: 1fr; gap: 0; }
    .contact-form { padding: 22px; }
}