/*
 * Red Pixels dark theme layer.
 *
 * Phase 1 of the dark conversion. Elementor writes colour directly onto
 * per-widget selectors, so this layer overrides those hardcoded values.
 * Phase 2 moves widgets onto Elementor Global Colours and lets most of
 * these overrides be deleted.
 */

:root {
	--rpd-bg: #0B0B0D;
	--rpd-surface: #141418;
	--rpd-surface-2: #1C1C22;
	--rpd-border: #2A2A32;
	--rpd-text: #F4F4F5;
	--rpd-muted: #A1A1AA;
	--rpd-red: #CE2127;
	--rpd-red-hover: #E03A40;
}

/* ---------- Base ---------- */

html,
body,
#page,
#content,
.site,
.ast-container,
.site-content {
	background-color: var(--rpd-bg) !important;
	color: var(--rpd-text);
}

body,
body p,
body li,
body span,
body div {
	color: var(--rpd-text);
}

/* ---------- Elementor containers ---------- */

.elementor-section,
.elementor-container,
.e-con,
.e-con-inner,
.elementor-column,
.elementor-widget-wrap,
.elementor-widget-container {
	background-color: transparent !important;
}

/* Sections that were explicitly white become the raised surface colour. */
.elementor-section[style*="background-color:#FFFFFF"],
.elementor-section[style*="background-color:#ffffff"],
.elementor-section[style*="background-color:#fff"],
.e-con[style*="background-color:#FFFFFF"],
.e-con[style*="background-color:#ffffff"] {
	background-color: var(--rpd-surface) !important;
}

/* ---------- Typography ---------- */

h1, h2, h3, h4, h5, h6,
.elementor-heading-title,
.entry-title,
.rp-archive-title {
	color: var(--rpd-text) !important;
}

.elementor-widget-text-editor,
.elementor-widget-text-editor p,
.elementor-text-editor,
.entry-content p,
.ast-excerpt-container p {
	color: var(--rpd-muted) !important;
}

/* Brand red stays brand red — never overridden to white. */
[style*="color: #ce2127"],
[style*="color:#ce2127"],
[style*="color: #CE2127"],
[style*="color:#CE2127"] {
	color: var(--rpd-red) !important;
}

/* ---------- Links ---------- */

a {
	color: var(--rpd-red);
}

a:hover,
a:focus {
	color: var(--rpd-red-hover);
}

.ast-builder-menu .menu-item > a,
.main-header-menu .menu-link,
.ast-header-break-point .main-header-menu .menu-link {
	color: var(--rpd-text) !important;
}

.ast-builder-menu .menu-item > a:hover,
.main-header-menu .menu-link:hover {
	color: var(--rpd-red) !important;
}

/* ---------- Header & footer ---------- */

.site-header,
.ast-primary-header-bar,
.ast-header-break-point .main-header-bar,
.main-header-bar,
.ast-mobile-header-wrap,
.ast-mobile-popup-drawer .ast-mobile-popup-inner {
	background-color: var(--rpd-bg) !important;
	border-bottom-color: var(--rpd-border) !important;
}

.site-footer,
.ast-footer-overlay,
footer.site-footer {
	background-color: var(--rpd-surface) !important;
	color: var(--rpd-muted) !important;
}

/* ---------- Cards & surfaces ---------- */

.ast-article-post,
.ast-separate-container .ast-article-post,
.ast-separate-container .ast-article-single,
.elementor-widget-image-box .elementor-image-box-content,
.elementor-widget-icon-box .elementor-icon-box-content,
.wp-block-group,
article.post {
	background-color: var(--rpd-surface) !important;
	border-color: var(--rpd-border) !important;
	color: var(--rpd-text) !important;
}

/* ---------- Buttons ---------- */

.elementor-button,
.ast-button,
.wp-block-button__link,
button,
input[type="submit"] {
	background-color: var(--rpd-red) !important;
	color: #FFFFFF !important;
	border-color: var(--rpd-red) !important;
}

.elementor-button:hover,
.ast-button:hover,
button:hover,
input[type="submit"]:hover {
	background-color: var(--rpd-red-hover) !important;
	color: #FFFFFF !important;
}

/* ---------- Forms ---------- */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="password"],
textarea,
select {
	background-color: var(--rpd-surface-2) !important;
	color: var(--rpd-text) !important;
	border: 1px solid var(--rpd-border) !important;
}

::placeholder {
	color: var(--rpd-muted) !important;
	opacity: 1;
}

/* ---------- Rules & dividers ---------- */

hr,
.elementor-divider-separator,
.ast-separate-container .ast-article-post {
	border-color: var(--rpd-border) !important;
}

/* ---------- Client logo wall ----------
 * These logos were exported on white. On a dark ground they would sit in
 * visible white boxes, so the wall keeps a light plate with padding
 * instead of showing broken-looking artwork.
 */
.elementor-widget-image img[src$=".svg"],
.elementor-widget-image img[src*="logo"] {
	background-color: #FFFFFF;
	border-radius: 6px;
	padding: 8px;
}

/* The Red Pixels white logo needs no plate. */
.site-header img[src*="logo-white"],
.site-header img[src*="White_new_logo"],
img[src*="logo-white"],
img[src*="White_new_logo"] {
	background-color: transparent !important;
	padding: 0 !important;
}

/* ---------- Accessibility ---------- */

:focus-visible {
	outline: 3px solid var(--rpd-red);
	outline-offset: 2px;
}

::selection {
	background: var(--rpd-red);
	color: #FFFFFF;
}

/* ==========================================================================
 * Phase 1b — overrides found by inspecting the rendered page.
 * The theme uses bespoke classes that Elementor's generic selectors miss.
 * ========================================================================== */

/* ---------- Header logo ----------
 * The default logo is drawn for a light ground. Swap to the existing white
 * variant rather than sitting it in a white plate.
 */
.site-header img[src*="red-pixels-logo-final"],
header img[src*="red-pixels-logo-final"] {
	content: url("/wp-content/uploads/2022/11/logo-white.svg");
	background-color: transparent !important;
	padding: 0 !important;
	max-height: 60px;
	width: auto;
}

/* ---------- Navigation ---------- */

.elementor-item,
.elementor-item.menu-link,
.elementor-nav-menu a {
	color: var(--rpd-text) !important;
}

.elementor-item:hover,
.elementor-item.elementor-item-active,
.elementor-nav-menu a:hover {
	color: var(--rpd-red-hover) !important;
}

/* ---------- Body copy on bespoke classes ---------- */

.hero-subtitle,
.redpix-services__description,
.redpix-services__tag,
.faq-description,
.service-item p,
.service-item li,
.brand-slider-wrapper p,
li {
	color: var(--rpd-muted) !important;
}

.service-item h1,
.service-item h2,
.service-item h3,
.service-item h4,
.faq-section h2,
.faq-section h3 {
	color: var(--rpd-text) !important;
}

/* Calls to action must not inherit near-black text. */
.faq-cta,
.hero-button {
	color: var(--rpd-text) !important;
}

.hero-button:hover,
.faq-cta:hover {
	color: var(--rpd-red-hover) !important;
}

/* Numerals and tags keep the brand red, brightened for contrast on black. */
.redpix-services__number {
	color: var(--rpd-red-hover) !important;
}

/* ---------- Bespoke surfaces ---------- */

.service-item,
.brand-slider-wrapper,
.hero-section {
	background-color: var(--rpd-surface) !important;
	border-color: var(--rpd-border) !important;
}

/* The logo carousel keeps a light plate so client artwork stays legible. */
.brand-slider-wrapper {
	background-color: #F4F4F5 !important;
	border-radius: 10px;
	padding: 10px 0;
}

/* ---------- Any section still painting pure white ---------- */

.elementor-section[style*="background-color: #FFFFFF"],
.elementor-section[style*="background-color: #ffffff"],
section[style*="background:#fff"],
section[style*="background: #fff"] {
	background-color: var(--rpd-surface) !important;
}

/* ---------- Fraud notice modal ---------- */

.rp-notice__dialog {
	background-color: var(--rpd-surface) !important;
	color: var(--rpd-text) !important;
}

.rp-notice__dialog h2 {
	color: var(--rpd-text) !important;
}

.rp-notice__dialog p {
	color: var(--rpd-muted) !important;
}

/* ==========================================================================
 * Phase 1c — specificity fixes.
 * Elementor emits inline rules such as `body.home .hero-subtitle` carrying
 * !important. Matching or exceeding that specificity is required; these
 * selectors are deliberately heavier than they would otherwise need to be,
 * and get simplified in phase 2 when widgets move onto global colours.
 * ========================================================================== */

html body.home .hero-subtitle,
html body .hero-subtitle,
html body .redpix-services__description,
html body .faq-description {
	color: var(--rpd-muted) !important;
}

/* The remaining white band on the home page. */
html body .elementor-element-6d27f84,
html body .elementor-section.elementor-element-6d27f84 {
	background-color: var(--rpd-bg) !important;
}

/* ---------- Footer links ----------
 * Brand red on the dark footer measures about 4.0:1, under the 4.5:1 needed
 * for body-size text. Links read in the light text colour and use red only
 * on hover, where it is a state change rather than the only cue.
 */
html body footer a,
html body .site-footer a,
html body footer .elementor-nav-menu a,
html body footer li a {
	color: var(--rpd-text) !important;
}

html body footer a:hover,
html body .site-footer a:hover,
html body footer li a:hover {
	color: var(--rpd-red-hover) !important;
}

/* ==========================================================================
 * Phase 1d — remaining light components and a text-colour backstop.
 * Found by measuring WCAG contrast on the rendered page rather than by
 * reading the stylesheets.
 * ========================================================================== */

/* Light showcase panels. Left light, their now-light text was invisible. */
html body .cw-scroll-showcase,
html body .cw-scroll-container,
html body .cw-scroll-showcase .cw-scroll-container {
	background-color: var(--rpd-bg) !important;
}

/* Service tabs and tags were light chips. */
html body .redpix-services__tab,
html body .redpix-services__tab.active,
html body .redpix-services__tag {
	background-color: var(--rpd-surface-2) !important;
	color: var(--rpd-text) !important;
	border-color: var(--rpd-border) !important;
}

/* Text backstop.
 * Doubling the class raises specificity above the inline `body.x .y` rules
 * Elementor emits with !important, without resorting to an id selector.
 */
html body .elementor.elementor p,
html body .elementor.elementor li,
html body .service-item.service-item p,
html body .service-item.service-item li,
html body .cw-scroll-showcase.cw-scroll-showcase p,
html body .cw-scroll-showcase.cw-scroll-showcase li,
html body .cw-scroll-showcase.cw-scroll-showcase span {
	color: var(--rpd-muted) !important;
}

html body .elementor.elementor h1,
html body .elementor.elementor h2,
html body .elementor.elementor h3,
html body .elementor.elementor h4,
html body .cw-scroll-showcase.cw-scroll-showcase h2,
html body .cw-scroll-showcase.cw-scroll-showcase h3 {
	color: var(--rpd-text) !important;
}

/* The client logo plate is deliberately light, so its text stays dark. */
html body .brand-slider-wrapper p,
html body .brand-slider-wrapper span,
html body .brand-slider-wrapper h2,
html body .brand-slider-wrapper h3 {
	color: #18181B !important;
}

/* ==========================================================================
 * Phase 1e — the rest of the site.
 * Pages here were built with three different conventions: Elementor widgets,
 * bespoke BEM classes (.benefit-card, .feature-card), and Tailwind-style
 * utilities (.card-hover, .bg-white). Each needs its own surfaces darkened,
 * or the now-light body text lands on a light card and disappears.
 * ========================================================================== */

/* ---------- Bespoke card components ---------- */

html body .benefit-card,
html body .feature-card,
html body .service-card,
html body .info-card,
html body .stat-card,
html body .pricing-card,
html body .team-card,
html body .process-card {
	background-color: var(--rpd-surface) !important;
	border-color: var(--rpd-border) !important;
	color: var(--rpd-text) !important;
}

html body .benefit-card p,
html body .feature-card p,
html body .service-card p,
html body .benefit-card li,
html body .feature-card li {
	color: var(--rpd-muted) !important;
}

/* Icon chips sat on light circles. */
html body .benefit-icon,
html body .feature-icon,
html body .service-icon,
html body .faq-tag,
html body .service-image {
	background-color: var(--rpd-surface-2) !important;
	color: var(--rpd-text) !important;
}

/* ---------- Tailwind-style utility pages ---------- */

html body [class*="bg-white"],
html body [class*="bg-gray-50"],
html body [class*="bg-gray-100"],
html body [class*="bg-slate-50"],
html body [class*="bg-slate-100"],
html body [class*="bg-zinc-50"],
html body [class*="bg-neutral-50"],
html body .card-hover,
html body .code-block {
	background-color: var(--rpd-surface) !important;
	border-color: var(--rpd-border) !important;
}

/* Utility text colours that assume a light ground. */
html body [class*="text-gray-9"],
html body [class*="text-gray-8"],
html body [class*="text-gray-7"],
html body [class*="text-slate-9"],
html body [class*="text-slate-8"],
html body [class*="text-zinc-9"],
html body [class*="text-black"] {
	color: var(--rpd-text) !important;
}

html body [class*="text-gray-6"],
html body [class*="text-gray-5"],
html body [class*="text-gray-4"],
html body [class*="text-slate-6"],
html body [class*="text-slate-5"] {
	color: var(--rpd-muted) !important;
}

html body .card-hover p,
html body .card-hover li,
html body .code-block,
html body .text-sm {
	color: var(--rpd-muted) !important;
}

html body .card-hover h1,
html body .card-hover h2,
html body .card-hover h3,
html body .card-hover h4 {
	color: var(--rpd-text) !important;
}

/* Generic light sections used as page bands. */
html body section[class*="bg-white"],
html body section[class*="bg-gray"],
html body div[class*="py-20"][class*="bg-"],
html body .py-12.border-y {
	background-color: var(--rpd-bg) !important;
	border-color: var(--rpd-border) !important;
}

/* ---------- Named page bands ----------
 * These pages name their bands `*-section`. Listing them explicitly rather
 * than matching [class*="-section"] wholesale, so sections that deliberately
 * carry a brand colour keep it.
 */
html body section.story-section,
html body section.cta-section,
html body section.about-section,
html body section.contact-section,
html body section.testimonial-section,
html body section.testimonials-section,
html body section.portfolio-section,
html body section.process-section,
html body section.team-section,
html body section.why-section,
html body section.stats-section,
html body section.pricing-section,
html body section.clients-section,
html body section.work-section {
	background-color: var(--rpd-bg) !important;
}

html body section.story-section p,
html body section.cta-section p,
html body section.story-section li,
html body section.cta-section li {
	color: var(--rpd-muted) !important;
}

html body section.story-section h1,
html body section.story-section h2,
html body section.story-section h3,
html body section.cta-section h1,
html body section.cta-section h2,
html body section.cta-section h3 {
	color: var(--rpd-text) !important;
}

/* ---------- Tailwind arbitrary-value classes ----------
 * The software page encodes colour in the class name itself, e.g.
 * `text-[#52525b]` and `bg-[#fafafa]`. Those are matchable as substrings.
 */

html body [class*="bg-[#fafafa]"],
html body [class*="bg-[#FAFAFA]"],
html body [class*="bg-[#ffffff]"],
html body [class*="bg-[#fff]"],
html body [class*="bg-[#f4f4f5]"],
html body [class*="bg-[#f9fafb]"],
html body [class*="bg-[#fefefe]"] {
	background-color: var(--rpd-bg) !important;
}

html body [class*="text-[#0a0a0a]"],
html body [class*="text-[#18181b]"],
html body [class*="text-[#111"],
html body [class*="text-[#000"],
html body [class*="text-[#27272a]"] {
	color: var(--rpd-text) !important;
}

html body [class*="text-[#52525b]"],
html body [class*="text-[#71717a]"],
html body [class*="text-[#3f3f46]"],
html body [class*="text-[#4b5563]"],
html body [class*="text-[#6b7280]"] {
	color: var(--rpd-muted) !important;
}

html body [class*="border-[#e"],
html body [class*="border-[#d"],
html body [class*="border-gray"] {
	border-color: var(--rpd-border) !important;
}

/* Decorative blur blobs read as light plates on a dark ground. */
html body .absolute[class*="-top-10"],
html body .absolute[class*="-bottom-10"] {
	opacity: 0.18;
}

/* ---------- Code sample ----------
 * The software page shows a syntax-highlighted snippet coloured for a light
 * editor theme. Darken the block and lift the token colours, otherwise the
 * code is the one place on the site still reading as light-on-light.
 */

html body .font-mono,
html body [class*="font-mono"],
html body .code-block,
html body .code-block pre,
html body pre,
html body code {
	background-color: var(--rpd-surface-2) !important;
	color: var(--rpd-text) !important;
}

/* Syntax tokens, brightened for a dark ground. */
html body [class*="text-[#2563eb]"] { color: #60A5FA !important; }
html body [class*="text-red-500"]   { color: #F87171 !important; }
html body [class*="text-[#16a34a]"],
html body [class*="text-green-6"]   { color: #4ADE80 !important; }
html body [class*="text-[#9333ea]"],
html body [class*="text-purple-6"]  { color: #C084FC !important; }
html body [class*="text-[#ca8a04]"],
html body [class*="text-yellow-6"]  { color: #FACC15 !important; }

/* Terminal chrome label. */
html body .font-mono [class*="text-[#71717a]"],
html body [class*="font-mono"] [class*="text-[#71717a]"] {
	color: var(--rpd-muted) !important;
}

html body [class*="text-[#7c3aed]"],
html body [class*="text-violet-6"] { color: #A78BFA !important; }

/* ---------- Elementor posts / archive cards ---------- */

html body .elementor-post__card,
html body .elementor-posts-container .elementor-post,
html body .elementor-post__text,
html body .elementor-posts .elementor-post__card {
	background-color: var(--rpd-surface) !important;
	border-color: var(--rpd-border) !important;
}

html body .elementor-post__card .elementor-post__title,
html body .elementor-post__card .elementor-post__title a,
html body .elementor-post__title a {
	color: var(--rpd-text) !important;
}

html body .elementor-post__card .elementor-post__excerpt p,
html body .elementor-post__excerpt p,
html body .elementor-post__meta-data,
html body .elementor-post-date,
html body .elementor-post-avatar,
html body .elementor-post__card .elementor-post__meta-data {
	color: var(--rpd-muted) !important;
}

html body .elementor-post__read-more {
	color: var(--rpd-red-hover) !important;
}

/* The archive H1 added by the child theme. */
html body .rp-archive-title {
	color: var(--rpd-text) !important;
	margin: 0 0 1.25rem;
}

/* ---------- Small red text ----------
 * #CE2127 measures ~4.0:1 on the dark surface and #E03A40 ~4.4:1, both under
 * the 4.5:1 required at body size. Small red text uses a lighter tint; large
 * headings and button fills keep the true brand red, where 3:1 applies.
 */
:root {
	--rpd-red-text: #F87171;
}

html body .elementor-post__read-more,
html body a.elementor-post__read-more,
html body .read-more,
html body small a,
html body .elementor-post__meta-data a {
	color: var(--rpd-red-text) !important;
}

/* Icon-list labels rendered in brand red at body size. */
html body .elementor-icon-list-text,
html body .elementor-icon-list-item > a,
html body .elementor-icon-list-item span {
	color: var(--rpd-text) !important;
}

html body .elementor-icon-list-item:hover .elementor-icon-list-text {
	color: var(--rpd-red-text) !important;
}

/* Hover-scroll showcase panel. */
html body .scroll-on-hover-container,
html body .scroll-on-hover-container > div {
	background-color: var(--rpd-surface) !important;
}

/* Digital marketing page bands and floating cards. */
html body section.benefits-section,
html body .benefits-section {
	background-color: var(--rpd-bg) !important;
}

html body .benefits-section h1,
html body .benefits-section h2,
html body .benefits-section h3 {
	color: var(--rpd-text) !important;
}

html body .benefits-section p,
html body .benefits-section li {
	color: var(--rpd-muted) !important;
}

html body .floating-card,
html body .floating-card.top,
html body .floating-card.bottom {
	background-color: var(--rpd-surface) !important;
	border-color: var(--rpd-border) !important;
	color: var(--rpd-text) !important;
}

html body .floating-card p,
html body .floating-card span {
	color: var(--rpd-muted) !important;
}

/* Services page uses its own rp- prefixed section classes. */
html body .rp-hero-section,
html body .rp-services-section,
html body .rp-cta-section,
html body .rp-about-section {
	background-color: var(--rpd-bg) !important;
}

html body .rp-hero-subtitle,
html body .rp-services-section p,
html body .rp-hero-section p {
	color: var(--rpd-muted) !important;
}

html body .rp-hero-section h1,
html body .rp-hero-section h2,
html body .rp-services-section h2,
html body .rp-services-section h3 {
	color: var(--rpd-text) !important;
}

/* ==========================================================================
 * PHASE 2 - polish.
 *
 * Phase 1 made the site dark. This pass makes it look designed: it removes the
 * light gradients that background-color rules could never reach, rebuilds the
 * FAQ and logo strip, and gives cards and controls a consistent radius,
 * border, motion and focus treatment.
 * ========================================================================== */

:root {
	--rpd-radius: 14px;
	--rpd-radius-sm: 10px;
	--rpd-ease: cubic-bezier(0.4, 0, 0.2, 1);
	--rpd-shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.28);
	--rpd-shadow-lift: 0 2px 4px rgba(0,0,0,.45), 0 18px 44px rgba(0,0,0,.42);
}

/* ---------- Light gradients ----------
 * Background-colour overrides never touch background-image, so every light
 * gradient survived phase 1. This is what washed out the showcase heading.
 */

html body .cw-scroll-header,
html body .hero-section,
html body .rp-hero-section,
html body .cw-scroll-showcase {
	background-image: none !important;
}

html body .cw-scroll-header {
	background-color: var(--rpd-bg) !important;
	border-bottom: 1px solid var(--rpd-border);
}

html body .cw-scroll-header__title,
html body .cw-scroll-header h2 {
	color: var(--rpd-text) !important;
	letter-spacing: -0.02em;
}

/* ---------- Technology logo strip ----------
 * Was a hard white band. These logos are monochrome, so they invert cleanly
 * to a muted white and sit on the page instead of punching a hole in it.
 */

html body .brand-slider-wrapper {
	background-color: transparent !important;
	border-top: 1px solid var(--rpd-border);
	border-bottom: 1px solid var(--rpd-border);
	border-radius: 0 !important;
	padding: 26px 0 !important;
}

html body .brand-slider-wrapper img {
	filter: brightness(0) invert(1);
	opacity: 0.55;
	background: transparent !important;
	padding: 0 !important;
	transition: opacity 240ms var(--rpd-ease);
}

html body .brand-slider-wrapper img:hover {
	opacity: 0.95;
}

/* ---------- Client logo wall ----------
 * These are full-colour brand marks, so they keep a light plate - but as a
 * soft rounded card per logo, not one stark white band.
 */

html body .elementor-widget-image img[src*="logo"]:not([src*="logo-white"]):not([src*="White_new"]) {
	background-color: #FFFFFF;
	border-radius: var(--rpd-radius-sm);
	padding: 12px 16px;
	transition: transform 240ms var(--rpd-ease);
}

html body .elementor-widget-image img[src*="logo"]:not([src*="logo-white"]):not([src*="White_new"]):hover {
	transform: translateY(-2px);
}

/* ---------- FAQ ----------
 * Was a stack of solid red bars. Rebuilt as dark rows with a red rule that
 * reveals on hover and when open, so red reads as an accent, not the field.
 */

html body .faq-item {
	background-color: var(--rpd-surface) !important;
	border: 1px solid var(--rpd-border);
	border-radius: var(--rpd-radius);
	margin-bottom: 12px;
	overflow: hidden;
	transition: border-color 220ms var(--rpd-ease), transform 220ms var(--rpd-ease);
}

html body .faq-item:hover {
	border-color: var(--rpd-red);
	transform: translateY(-1px);
}

html body .faq-question {
	background-color: transparent !important;
	color: var(--rpd-text) !important;
	position: relative;
	padding: 18px 52px 18px 22px !important;
	font-weight: 600;
	letter-spacing: -0.01em;
	border-radius: 0 !important;
	transition: color 200ms var(--rpd-ease);
}

html body .faq-question::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 3px;
	height: 0;
	background: var(--rpd-red);
	transition: height 260ms var(--rpd-ease);
}

html body .faq-item:hover .faq-question::before,
html body .faq-item.active .faq-question::before {
	height: 68%;
}

html body .faq-question:hover {
	color: #FFFFFF !important;
}

html body .faq-answer,
html body .faq-item p {
	background-color: transparent !important;
	color: var(--rpd-muted) !important;
	padding: 0 22px 18px !important;
	line-height: 1.65;
}

html body .faq-question svg,
html body .faq-question i {
	color: var(--rpd-red) !important;
	fill: var(--rpd-red) !important;
	transition: transform 260ms var(--rpd-ease);
}

html body .faq-item.active .faq-question svg {
	transform: rotate(180deg);
}

/* ---------- Filter pills ----------
 * Were solid red lozenges competing with each other. Only the active one
 * carries the fill now; the rest are quiet outlines.
 */

html body .filter-btn,
html body .portfolio-filter a {
	background-color: transparent !important;
	color: var(--rpd-muted) !important;
	border: 1px solid var(--rpd-border) !important;
	border-radius: 999px !important;
	padding: 9px 20px !important;
	font-weight: 600;
	transition: all 220ms var(--rpd-ease);
}

html body .filter-btn:hover,
html body .portfolio-filter a:hover {
	color: var(--rpd-text) !important;
	border-color: var(--rpd-red) !important;
}

html body .filter-btn.active,
html body .portfolio-filter a.active {
	background-color: var(--rpd-red) !important;
	border-color: var(--rpd-red) !important;
	color: #FFFFFF !important;
}

/* ---------- Cards ---------- */

html body .service-item,
html body .benefit-card,
html body .feature-card,
html body .card-hover,
html body .elementor-post__card,
html body .floating-card,
html body .redpix-services__tab {
	border: 1px solid var(--rpd-border) !important;
	border-radius: var(--rpd-radius) !important;
	box-shadow: var(--rpd-shadow);
	transition: transform 260ms var(--rpd-ease), border-color 260ms var(--rpd-ease), box-shadow 260ms var(--rpd-ease);
}

html body .service-item:hover,
html body .benefit-card:hover,
html body .feature-card:hover,
html body .card-hover:hover,
html body .elementor-post__card:hover {
	transform: translateY(-4px);
	border-color: #3A3A44 !important;
	box-shadow: var(--rpd-shadow-lift);
}

/* ---------- Buttons ---------- */

html body .elementor-button,
html body .ast-button,
html body input[type="submit"] {
	border-radius: 999px !important;
	padding: 12px 26px;
	font-weight: 600;
	letter-spacing: 0.01em;
	transition: background-color 200ms var(--rpd-ease), transform 200ms var(--rpd-ease), box-shadow 200ms var(--rpd-ease);
}

html body .elementor-button:hover,
html body .ast-button:hover {
	transform: translateY(-1px);
	box-shadow: 0 8px 22px rgba(206, 33, 39, .32);
}

html body .hero-button,
html body .cta-button,
html body .faq-cta {
	border: 1px solid var(--rpd-red) !important;
	border-radius: 999px !important;
	color: var(--rpd-text) !important;
	background-color: transparent !important;
	transition: all 220ms var(--rpd-ease);
}

html body .hero-button:hover,
html body .cta-button:hover,
html body .faq-cta:hover {
	background-color: var(--rpd-red) !important;
	color: #FFFFFF !important;
	transform: translateY(-1px);
}

/* ---------- Headings ---------- */

html body h1,
html body h2 {
	letter-spacing: -0.025em;
}

/* ---------- Images ---------- */

html body .service-image img,
html body article img {
	border-radius: var(--rpd-radius-sm);
}

/* ---------- Focus and selection ---------- */

html body a:focus-visible,
html body button:focus-visible,
html body input:focus-visible,
html body textarea:focus-visible {
	outline: 2px solid var(--rpd-red);
	outline-offset: 3px;
	border-radius: 4px;
}

/* ---------- Scrollbar ---------- */

html body::-webkit-scrollbar { width: 12px; }
html body::-webkit-scrollbar-track { background: var(--rpd-bg); }
html body::-webkit-scrollbar-thumb {
	background: #2E2E38;
	border-radius: 999px;
	border: 3px solid var(--rpd-bg);
}
html body::-webkit-scrollbar-thumb:hover { background: var(--rpd-red); }

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
	html body * {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
	html body .service-item:hover,
	html body .benefit-card:hover,
	html body .card-hover:hover,
	html body .faq-item:hover {
		transform: none;
	}
}

/* ==========================================================================
 * PHASE 2b - corrections found by inspecting the live DOM.
 * ========================================================================== */

/* ---------- FAQ filter pills ----------
 * The real class is .filter-button inside .faq-filters. Three solid red
 * lozenges in a row read as three primary actions; only the selected one
 * should carry the fill.
 */

html body .faq-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

html body .faq-filters .filter-button,
html body button.filter-button {
	background-color: transparent !important;
	color: var(--rpd-muted) !important;
	border: 1px solid var(--rpd-border) !important;
	border-radius: 100px !important;
	padding: 9px 22px !important;
	font-weight: 600 !important;
	box-shadow: none !important;
	transition: color 200ms var(--rpd-ease), border-color 200ms var(--rpd-ease), background-color 200ms var(--rpd-ease);
}

html body .faq-filters .filter-button:hover,
html body button.filter-button:hover {
	color: var(--rpd-text) !important;
	border-color: var(--rpd-red) !important;
	background-color: transparent !important;
	transform: none !important;
	box-shadow: none !important;
}

html body .faq-filters .filter-button.active,
html body button.filter-button.active {
	background-color: var(--rpd-red) !important;
	border-color: var(--rpd-red) !important;
	color: #FFFFFF !important;
}

/* ---------- Decorative grid overlay ----------
 * The software page paints a 1px white grid over its hero. At full strength
 * on a black ground it reads as a hard lattice rather than texture.
 */

html body .absolute.inset-0[style*="gradient"],
html body .absolute.inset-0 {
	opacity: 0.06;
}

/* ---------- Section rhythm ----------
 * Consistent vertical breathing room between bands, which the mixed page
 * builders had drifting between very tight and very loose.
 */

html body .faq-section,
html body .redpix-services,
html body .cw-scroll-showcase {
	padding-top: clamp(48px, 6vw, 96px);
	padding-bottom: clamp(48px, 6vw, 96px);
}

/* ---------- FAQ layout ---------- */

html body .faq-question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	text-align: left;
	cursor: pointer;
	border: 0 !important;
}

html body .faq-item + .faq-item {
	margin-top: 12px;
}

/* Remove the stray underline rules that sat beneath each red bar. */
html body .faq-item hr,
html body .faq-item .divider {
	display: none;
}

/* ==========================================================================
 * PHASE 2c - marquee edge fades.
 *
 * The logo strip fades its ends with two 100px pseudo-element gradients that
 * ran to #ffffff, so on a dark page they read as white smears rather than a
 * fade. Computed-style scans over elements never see ::before / ::after,
 * which is why this survived every earlier sweep.
 * ========================================================================== */

html body .brand-slider-wrapper::before {
	background: linear-gradient(to right, var(--rpd-bg) 0%, rgba(11, 11, 13, 0) 100%) !important;
}

html body .brand-slider-wrapper::after {
	background: linear-gradient(to left, var(--rpd-bg) 0%, rgba(11, 11, 13, 0) 100%) !important;
}

/* Same treatment for any other marquee or carousel using the pattern. */
html body [class*="marquee"]::before,
html body [class*="slider-wrapper"]::before,
html body [class*="logo-strip"]::before,
html body [class*="ticker"]::before {
	background: linear-gradient(to right, var(--rpd-bg) 0%, rgba(11, 11, 13, 0) 100%) !important;
}

html body [class*="marquee"]::after,
html body [class*="slider-wrapper"]::after,
html body [class*="logo-strip"]::after,
html body [class*="ticker"]::after {
	background: linear-gradient(to left, var(--rpd-bg) 0%, rgba(11, 11, 13, 0) 100%) !important;
}

/* ==========================================================================
 * PHASE 2d - full-section pseudo-element overlays.
 *
 * Elementor containers can carry a ::before plate used as the section's real
 * background. On the home page one of these is a white plate at 0.97 opacity
 * covering an 1188px band - the light field the dark service cards were
 * sitting on. Element-level background rules never touched it because the
 * colour lives on the pseudo-element.
 * ========================================================================== */

html body .elementor-element-4f03998::before {
	background-color: var(--rpd-bg) !important;
}

/* Any Elementor container overlay plate follows the page ground. Scoped to
 * ::before plates that are inset to fill their container, which is the
 * pattern Elementor uses for section backgrounds.
 */
html body .e-con::before,
html body .e-con-inner::before,
html body .elementor-section::before {
	background-color: transparent !important;
}