html[data-trulytype-contrast="on"] {
    filter: invert(1) hue-rotate(180deg);
}

html[data-trulytype-contrast="on"] img,
html[data-trulytype-contrast="on"] video,
html[data-trulytype-contrast="on"] canvas,
html[data-trulytype-contrast="on"] picture,
html[data-trulytype-contrast="on"] svg image {
    filter: invert(1) hue-rotate(180deg);
}

/* Font specimens use multiply normally; swap to screen when the page is inverted */
html[data-trulytype-contrast="on"] .multiply-blend,
html[data-trulytype-contrast="on"] .font-module img:not(.hero-afrika-image) {
    mix-blend-mode: screen !important;
    -webkit-mix-blend-mode: screen !important;
}

/* Fonts in Use — keep project and hero imagery at normal colors */
html[data-trulytype-contrast="on"] .fonts-in-use-hero-slide {
    filter: invert(1) hue-rotate(180deg);
}

html[data-trulytype-contrast="on"] .fonts-in-use-hero-content,
html[data-trulytype-contrast="on"] .fonts-in-use-hero-overlay {
    filter: invert(1) hue-rotate(180deg);
}

html[data-trulytype-contrast="on"] .project-images-slideshow,
html[data-trulytype-contrast="on"] .project-video-container {
    filter: invert(1) hue-rotate(180deg);
}

html[data-trulytype-contrast="on"] .fonts-in-use-hero-slide img,
html[data-trulytype-contrast="on"] .fonts-in-use-hero-brand-logo img,
html[data-trulytype-contrast="on"] .fonts-in-use-hero-brand-logo svg,
html[data-trulytype-contrast="on"] .fonts-in-use-hero svg,
html[data-trulytype-contrast="on"] .fonts-in-use-container svg,
html[data-trulytype-contrast="on"] .page-content-wrapper svg,
html[data-trulytype-contrast="on"] .project-images-slideshow img,
html[data-trulytype-contrast="on"] .project-module img,
html[data-trulytype-contrast="on"] .slideshow-img,
html[data-trulytype-contrast="on"] .project-video-container video,
html[data-trulytype-contrast="on"] .project-video-container iframe {
    filter: none !important;
}

html[data-trulytype-contrast="on"] .fonts-in-use-hero-brand-logo img {
    filter: drop-shadow(0 4px 28px rgba(0, 0, 0, 0.35)) !important;
}

html[data-trulytype-contrast="on"] .fonts-in-use-hero-brand-logo img[src$=".svg"],
html[data-trulytype-contrast="on"] .fonts-in-use-hero-brand-logo svg {
    filter: drop-shadow(0 4px 28px rgba(0, 0, 0, 0.35)) !important;
}