/* Corporate contact colours: logo blue and the existing accessible link blue. */
body[data-i18n-page="contact"] {
    --accent: #4d6a92;
    --accent-hover: #456387;
    --accent-text: var(--accent);
    --accent-soft: color-mix(in srgb, var(--accent) 20%, var(--paper));
    --accent-pale: color-mix(in srgb, var(--accent) 8%, var(--paper));
}

body[data-i18n-page="contact"] .page-hero__title {
    color: var(--accent);
}

body[data-i18n-page="contact"] .button--primary {
    background: var(--accent);
    color: var(--white);
    box-shadow: 0 8px 20px rgba(77, 106, 146, 0.18);
}

body[data-i18n-page="contact"] .button--primary:disabled {
    box-shadow: none;
}

@media (hover: hover) and (pointer: fine) {
    body[data-i18n-page="contact"] .button--primary:hover {
        background: var(--accent-hover);
    }

    body[data-i18n-page="contact"] .button--primary:hover:not(:disabled) {
        box-shadow: 0 11px 24px rgba(77, 106, 146, 0.24);
    }
}

/* The two contact pages share one reading width and typographic scale. */
:is(body[data-i18n-page="contact"], body[data-i18n-page="timuleContact"]) .page-hero > .site-container,
:is(body[data-i18n-page="contact"], body[data-i18n-page="timuleContact"]) .content-shell {
    width: min(calc(100% - 64px), var(--reading-width));
}

:is(body[data-i18n-page="contact"], body[data-i18n-page="timuleContact"]) .page-hero {
    padding-bottom: 30px;
}

:is(body[data-i18n-page="contact"], body[data-i18n-page="timuleContact"]) .page-hero__title {
    font-size: 38px;
}

:is(body[data-i18n-page="contact"], body[data-i18n-page="timuleContact"]) .page-hero__intro {
    max-width: none;
    margin-top: 10px;
    font-size: 17px;
    line-height: 1.45;
}

:is(body[data-i18n-page="contact"], body[data-i18n-page="timuleContact"]) .content-panel {
    padding: 30px;
}

:is(body[data-i18n-page="contact"], body[data-i18n-page="timuleContact"]) .content-panel p {
    font-size: 15px;
    line-height: 1.45;
}

:is(body[data-i18n-page="contact"], body[data-i18n-page="timuleContact"]) .content-panel :is(.form-help, .form-security, .contact-handoff) {
    font-size: 14px;
}

/* Keep introductory paragraphs separate from the unchanged form fields. */
:is(body[data-i18n-page="contact"], body[data-i18n-page="timuleContact"]) .contact-form-intro {
    display: grid;
    row-gap: 10px;
    margin-block-end: 24px;
}

:is(body[data-i18n-page="contact"], body[data-i18n-page="timuleContact"]) .contact-form-intro > p {
    margin: 0;
}

:is(body[data-i18n-page="contact"], body[data-i18n-page="timuleContact"]) .contact-form-intro > .form-security {
    color: var(--danger);
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

:is(body[data-i18n-page="contact"], body[data-i18n-page="timuleContact"]) .contact-warning-icon {
    flex: 0 0 1em;
    inline-size: 1em;
    block-size: 1em;
    margin-block-start: 0.2em;
}

:is(body[data-i18n-page="contact"], body[data-i18n-page="timuleContact"]) .contact-form-intro > .form-security > span {
    min-inline-size: 0;
}

/* Extend the existing contact layout without changing other forms. */
:is(body[data-i18n-page="contact"], body[data-i18n-page="timuleContact"]) .form-field,
:is(body[data-i18n-page="contact"], body[data-i18n-page="timuleContact"]) .form-field select {
    min-inline-size: 0;
    max-inline-size: 100%;
}

:is(body[data-i18n-page="contact"], body[data-i18n-page="timuleContact"]) .contact-safety a,
:is(body[data-i18n-page="contact"], body[data-i18n-page="timuleContact"]) .contact-safety-links a,
.safety-guide .external-safety-links a {
    color: var(--ink);
}

body[data-i18n-page="contact"] .contact-safety-links a {
    color: var(--accent-hover);
}

:is(body[data-i18n-page="contact"], body[data-i18n-page="timuleContact"]) .contact-safety {
    min-inline-size: 0;
    margin: 24px 0 0;
    padding: 20px 0 0;
    border: 0;
    border-top: 1px solid var(--line);
}

:is(body[data-i18n-page="contact"], body[data-i18n-page="timuleContact"]) .contact-safety legend {
    max-inline-size: 100%;
    padding: 0 8px 0 0;
    font-size: 18px;
    font-weight: 600;
}

:is(body[data-i18n-page="contact"], body[data-i18n-page="timuleContact"]) .contact-safety [hidden],
:is(body[data-i18n-page="contact"], body[data-i18n-page="timuleContact"]) .contact-safety[hidden] {
    display: none;
}

:is(body[data-i18n-page="contact"], body[data-i18n-page="timuleContact"]) .contact-safety .form-help,
:is(body[data-i18n-page="contact"], body[data-i18n-page="timuleContact"]) .contact-safety-links {
    overflow-wrap: anywhere;
}

:is(body[data-i18n-page="contact"], body[data-i18n-page="timuleContact"]) .contact-safety-check {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 14px;
    line-height: 1.45;
}

:is(body[data-i18n-page="contact"], body[data-i18n-page="timuleContact"]) .contact-safety-check input {
    flex: 0 0 24px;
    inline-size: 24px;
    block-size: 24px;
    margin: 2px 0;
}

:is(body[data-i18n-page="contact"], body[data-i18n-page="timuleContact"]) .contact-safety-check label {
    min-block-size: 44px;
    cursor: pointer;
}

@media (max-width: 720px) {
    :is(body[data-i18n-page="contact"], body[data-i18n-page="timuleContact"]) .page-hero > .site-container,
    :is(body[data-i18n-page="contact"], body[data-i18n-page="timuleContact"]) .content-shell {
        width: min(calc(100% - 32px), var(--reading-width));
    }

    :is(body[data-i18n-page="contact"], body[data-i18n-page="timuleContact"]) .page-hero__title {
        font-size: 30px;
    }

    :is(body[data-i18n-page="contact"], body[data-i18n-page="timuleContact"]) .page-hero__intro {
        font-size: 16px;
    }

    :is(body[data-i18n-page="contact"], body[data-i18n-page="timuleContact"]) .content-panel {
        padding: 22px;
    }
}