.contact-content {
    padding: 0;
}

.contact-introduction h1,
.confirmation-page h1 {
    margin: 0 0 18px;
    font-size: clamp(2rem, 4vw, 2.65rem);
    font-weight: 700;
    line-height: 1.15;
}

.contact-introduction > p {
    max-width: 980px;
    margin: 0;
    font-size: 1.08rem;
}

.contact-information-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
    gap: 80px;
    margin: 38px 0 34px;
}

.contact-information-grid h2 {
    margin: 0 0 24px;
    font-size: 1.45rem;
    font-weight: 700;
}

.contact-information-grid p {
    margin: 0 0 24px;
}

.contact-information-grid a,
.information-clause a {
    color: #164f8c;
    text-underline-offset: 3px;
}

.contact-information-grid ul {
    margin: 0;
    padding-left: 1.25rem;
}

.contact-information-grid li {
    margin-bottom: 8px;
}

.contact-warning {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.contact-warning > span:first-child {
    color: #806200;
    font-size: 1.35rem;
    line-height: 1;
}

.contact-form {
    max-width: 100%;
}

.topic-load-error {
    margin-top: 34px;
    padding: 20px 24px;
    border-left: 6px solid #d6a400;
    background: #fff3cd;
}

.topic-load-error h2 {
    margin: 0 0 8px;
    font-size: 1.3rem;
}

.topic-load-error p {
    margin: 0;
}

.k-clear-value {
     margin-right: 10px !important;
}
.required-fields-note {
    margin: -10px 0 24px;
    color: var(--contact-error);
    font-weight: 600;
}

.form-field {
    margin-bottom: 28px;
}

.form-field-narrow {
    max-width: 920px;
}

.form-label,
.consent-section legend {
    display: block;
    width: 100%;
    margin: 0 0 4px;
    font-size: 1.3rem;
    font-weight: 700;
}

.required-mark {
    color: var(--contact-error);
}

.field-help {
    margin: 0 0 10px;
    color: var(--contact-text);
}

.field-help-after {
    margin: 6px 0 0;
    color: var(--contact-muted);
    font-size: .9rem;
}

.form-control,
.contact-form .k-combobox {
    border: 1px solid var(--contact-border);
    border-radius: 0;
    background: var(--contact-field);
    color: var(--contact-text);
}

.form-control {
    min-height: 30px;
    padding: 6px 12px;
    font-size: 1rem;
}

.question-textarea {
    min-height: 225px;
    resize: vertical;
}

.form-control:focus,
.contact-form .k-combobox:focus-within {
    border-color: #1d70b8;
    outline: 2px solid #ffdd00;
    box-shadow: none;
}

.contact-form .k-combobox {
    min-height: 30px;
    overflow: hidden;
}

.contact-form .k-combobox .k-input-inner {
    padding: 6px 12px;
    background: var(--contact-field);
    font-size: 1rem;
}

.contact-form .k-combobox .k-input-inner:focus::placeholder {
    color: transparent;
    opacity: 0;
}

.contact-form .k-combobox .k-input-button {
    border-left: 1px solid var(--contact-border);
    border-radius: 0;
    background: #e5e5e5;
}

.contact-form .k-combobox.topic-validation-error {
    border: 2px solid var(--contact-error) !important;
}

.contact-form .k-combobox.topic-validation-error .k-input-button {
    border-left-color: var(--contact-error);
}

.character-counter {
    margin: -4px 0 8px;
    font-variant-numeric: tabular-nums;
}

.validation-message {
    display: block;
    margin-top: 6px;
    color: var(--contact-error);
    font-weight: 700;
}

.validation-message:empty,
.field-validation-valid,
.validation-summary-valid {
    display: none;
}

.validation-summary ul {
    margin: 0 0 18px;
    padding-left: 1.2rem;
}

.input-validation-error,
.contact-form .k-invalid {
    border: 3px solid var(--contact-error) !important;
}

.consent-section {
    margin: 18px 0 28px;
    padding: 10px 0 0;
    border: 0;
    border-top: 1px solid #d7d7d7;
}

.consent-section legend {
    float: none;
    margin-bottom: 0px;
}

.consent-check {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 0;
    padding: 0;
}

.consent-check .form-check-input {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin: 2px 0 0;
    border: 2px solid #555;
    border-radius: 0;
}

.consent-check .form-check-input:checked {
    border-color: var(--contact-blue);
    background-color: var(--contact-blue);
}

.consent-check .form-check-input:focus {
    outline: 3px solid #ffdd00;
    box-shadow: none;
}

.information-clause {
    margin: 24px 0 0;
}

.submission-help {
    margin: 0 0 26px;
}

.submit-button {
    display: block;
    width: min(920px, 100%);
    min-height: 50px;
    padding: 10px 24px;
    border: 2px solid #274d8b;
    border-radius: 0;
    background: var(--contact-blue);
    color: #fff;
    font-size: 1.15rem;
    font-weight: 700;
    text-align: center;
}

.submit-button:hover {
    background: #274d8b;
}

.submit-button:focus {
    outline: 4px solid #ffdd00;
    outline-offset: 2px;
}

.confirmation-page {
    min-height: 480px;
}

.confirmation-page > p {
    margin: 0 0 30px;
    font-size: 1.08rem;
}

.confirmation-success {
    display: flex;
    gap: 24px;
    align-items: center;
    margin: 80px 0 66px !important;
    color: #00a94f;
    font-size: 1.50rem !important;
}

.confirmation-success-icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 5px;
    background: #4fd08b;
    color: #fff;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
}

.confirmation-section {
    margin-top: 62px;
}

.confirmation-section h2 {
    margin: 0 0 30px;
    font-size: 1.45rem;
    font-weight: 700;
}

.confirmation-section ul {
    margin: 0;
    padding-left: 3.4rem;
    font-size: 1.08rem;
}

.confirmation-section p {
    margin: 0;
    font-size: 1.08rem;
}

.confirmation-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    margin-top: 58px;
}

.confirmation-button {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60px;
    padding: 10px 24px;
    border: 2px solid #274d8b;
    background: #4775c2;
    color: #fff;
    font-size: 1.15rem;
    text-align: center;
    text-decoration: none;
}

.confirmation-button:hover {
    border-color: #20447d;
    background: #315ea8;
    color: #fff;
}

.confirmation-button:focus {
    outline: 4px solid #ffdd00;
    outline-offset: 2px;
    color: #fff;
}

@media (max-width: 800px) {
    .contact-information-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

@media (max-width: 520px) {
    .contact-content {
        padding-top: 0;
    }

    .confirmation-success {
        align-items: flex-start;
        margin: 50px 0 44px !important;
        font-size: 1.4rem !important;
    }

    .confirmation-actions {
        grid-template-columns: 1fr;
        gap: 18px;
    }
}

/* Email verification dialog */
.verification-dialog {
    width: min(560px, calc(100% - 32px));
    max-height: calc(100dvh - 40px);
    padding: 28px;
    border: 2px solid var(--contact-blue);
    color: var(--contact-text);
    background: #fff;
}
.verification-dialog::backdrop { background: rgb(0 0 0 / 55%); }
.verification-dialog h2 { margin: 0 0 18px; font-size: 1.5rem; }
.verification-dialog p { margin: 0 0 16px; }
.verification-dialog strong { overflow-wrap: anywhere; }
.verification-code { width: 100%; font-size: 1.5rem; letter-spacing: .2em; }
.verification-countdown { margin-top: 12px !important; font-variant-numeric: tabular-nums; }
.verification-message { min-height: 3em; }
.verification-message,
.verification-form-status,
.validation-summary {
    color: var(--contact-error);
    font-weight: 700;
}
.verification-actions { display: grid; gap: 12px; }
.verification-actions .submit-button { width: 100%; font-size: 1rem; }
.verification-secondary {
    min-height: 44px;
    padding: 8px 12px;
    border: 1px solid var(--contact-blue);
    background: #fff;
    color: var(--contact-blue);
    font-weight: 600;
}
.verification-secondary:focus-visible {
    outline: 3px solid #ffdd00;
    outline-offset: 2px;
}
.verification-actions button:disabled,
.contact-form .submit-button:disabled {
    opacity: .65;
    cursor: not-allowed;
}
.verification-form-status { margin-top: 16px; }
@media (max-width: 520px) {
    .verification-dialog { padding: 20px; }
}

.verification-message[data-tone="sent"] {
    color: #bca50c;
}