/**
 * Sage & cream palette.
 *
 * A colour-only layer: it changes tokens and paint, never structure or type.
 * Load this instead of brand-mstech.css to reskin the whole site, including the
 * pillars section, which reads the same tokens.
 *
 * The source palette is four colours (#778873 #A1BC98 #DCCFC0 #FDF6ED). None of
 * them is legible as body text on the cream background — the darkest is 3.53:1,
 * below the 4.5:1 needed — so two darker tones are derived from the same hue for
 * text and for the dark bands. The four originals carry every surface and
 * decorative fill.
 */

:root, html {
	--c-active: #778873;        /* decorative fills, borders, dots */
	--ca-active: 119,136,115;
	--c-headings: #2E332C;      /* derived: 12.04:1 on cream */
	--c-text: #3E443C;           /* derived: 9.34:1 on cream */
	--c-dark: #5C6B58;          /* derived: cream reads 5.29:1 on it */
	--c-light-grey: #DCCFC0;
}

body,
.upqode-main-wrapper {
	background: #FDF6ED;
	color: #3E443C;
}
h1, h2, h3, h4, h5, h6 { color: #2E332C; }

/* sections that sit on white in the captured design move to cream */
.upqode__services, .upqode__blog, .upqode__contacts, .upq-pillars,
.upqode__heading-large, .upqode__gallery { background-color: #FDF6ED; }
.block-dark { background: #5C6B58; }
.block-dark h1, .block-dark h2, .block-dark h3,
.block-dark h4, .block-dark h5, .block-dark h6 { color: #FDF6ED; }
.block-dark .primary, .block-dark a:not(.btn-anime), .upqode__cities a { color: #A1BC98; }

/* buttons: solid sage with cream ink reads 5.29:1 */
.btn-anime, .upqode__portfolio-btn .btn-anime, .upqode__brands-columns-btn .btn-anime,
.rotating-3-pillars-carousel__cta a {
	background: #5C6B58;
	color: #FDF6ED;
	border-radius: 0;
	padding: 18px 34px;
	font-family: "Lato", sans-serif;
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 1px;
	text-transform: uppercase;
}
.btn-anime::before, .btn-anime.ver-2::before { display: none !important; }
.btn-anime:hover, .rotating-3-pillars-carousel__cta a:hover { background: #778873; color: #FDF6ED; }

/* pillars component tokens */
.rotating-3-pillars-carousel, :root {
	--r3pc-blue-border: #DCCFC0;   --r3pc-blue-gradient-from: rgba(119,136,115,.12);
	--r3pc-blue-accent: #5C6B58;    --r3pc-blue-icon-bg: #DCCFC0;  --r3pc-blue-icon-fill: #5C6B58;
	--r3pc-purple-border: #DCCFC0; --r3pc-purple-gradient-from: rgba(161,188,152,.16);
	--r3pc-purple-accent: #778873;  --r3pc-purple-icon-bg: #A1BC98;  --r3pc-purple-icon-fill: #5C6B58;
	--r3pc-teal-border: #DCCFC0;   --r3pc-teal-gradient-from: rgba(220,207,192,.35);
	--r3pc-teal-accent: #778873;    --r3pc-teal-icon-bg: #DCCFC0;  --r3pc-teal-icon-fill: #5C6B58;
}

/* ---- generated from the captured stylesheets ---- */
.btn-anime::before { background-color: #A1BC98; }
.upqode-header--icon-menu { background: #778873; }
.upqode-header--menu .sub-menu a::after { background: #778873; }
.upqode-header.open .upqode-header--icon-menu::before { background: #2E332C; }
.upqode-header.open .upqode-header--icon-menu::after { background: #2E332C; }
.upqode-footer__service a::after,.upqode-footer__sitemap a::after { background: #778873; }
.cursore-uq { background-color: #778873; }
.cursore-uq:after { background-color: #778873; }
.cursore-uq .radial-progress-cover { stroke: #778873; }
.hover_l:after { color: #778873; }
.hover_r:after { color: #778873; }
.hover_tesimonial { background: #778873; }
.hover_dark,.hover_dark:after { background-color: #5C6B58; }
.hover_dark .radial-progress-cover { stroke: #5C6B58; }
.hover_normal,.hover_normal:after { background-color: #778873; }
.hover_normal .radial-progress-cover { stroke: #778873; }
.rotating-3-pillars-carousel__nav-label { color: #2E332C; }
.rotating-3-pillars-carousel__heading { color: #2E332C; }
.rotating-3-pillars-carousel__bullet-text { color: #2E332C; }
.rotating-3-pillars-carousel__cta { color: #778873; }
.rotating-3-pillars-carousel__nav-item:not(.is-active) .rotating-3-pillars-carousel__nav-label { color: #2E332C; }

/* ---- intent: these win over the generated mappings above ---- */
.rotating-3-pillars-carousel__heading, .rotating-3-pillars-carousel__nav-label {
	font-family: "Lato", sans-serif; color: #2E332C;
}
.rotating-3-pillars-carousel__bullet-text { font-family: "Jost", sans-serif; color: #3E443C; }
.rotating-3-pillars-carousel__preheading { color: #5C6B58; }