/* Jehajo Printers — "Solid" colourway: white, graphite grays and red.
 * Loaded after main.css. Swaps the indigo/lavender tones for neutrals, removes the gradient washes,
 * and gives sections solid colour blocks (white / light gray / gray / charcoal / red).
 * To revert to the original look, stop enqueuing this file (functions.php).
 */

:root {
	--indigo: #2b2b30;      /* was brand indigo — now graphite, used for links, outlines, default buttons */
	--indigo-d: #151518;
	--lav: #cfcfd4;
	--lav-l: #f1f1f3;
	--paper: #f6f6f7;
	--line: #e3e3e7;
	--muted: #5b5b63;
	--text: #2a2a2e;
	--red-band: #d1222a;    /* solid red for large blocks: white text passes WCAG AA (≈5:1) */
	--gray-1: #f3f3f4;      /* light gray block */
	--gray-2: #e8e8eb;      /* gray block */
	--char: #1d1d20;        /* charcoal block */
	--char-2: #2a2a2e;
	--sh-3: 0 24px 50px -12px rgba(20, 20, 24, .35);
	--slant: clamp(18px, 3.2vw, 46px);
}

/* ---------- Accents ---------- */
.eyebrow { color: var(--red-d); }
.eyebrow--light { color: #fff; }
a { color: var(--ink); }
a:hover { color: var(--red); }
.lead-xl { color: var(--ink); }
input:focus, select:focus, textarea:focus { border-color: var(--ink); box-shadow: 0 0 0 4px rgba(238, 50, 55, .16); }
input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="search"], input[type="date"], input[type="datetime-local"], input:not([type]), select, textarea { border-color: #d3d3d8; }
.check input { accent-color: var(--red); }
.radio-card input:checked + span, .studio__prod input:checked + span { border-color: var(--red); background: #fff5f5; box-shadow: 0 0 0 3px rgba(238, 50, 55, .16); }
.menu > li > a:hover, .menu > li > a.is-current { color: var(--red-d); }
.mega__ic, .industry__ic { background: #fdeaea; color: var(--red-d); }
.mega__col li a:hover { background: var(--gray-1); color: var(--red-d); }
.mega__chips a { background: var(--gray-1); color: var(--ink); }
.mega__chips a:hover { background: var(--red); color: #fff; }
.mega__promo { background: var(--char); }
.mega__promo--red { background: var(--red-band); }
.mega__promo--ink { background: var(--char-2); }

/* Solid surfaces instead of gradient washes */
.halftone::before { background: var(--gray-1); }
.halftone-bg { background: var(--gray-1); }
.hero::after { display: none; }
.chat-pop__body { background: var(--gray-1); }
.next-steps { background: var(--char); }
.next-steps::before { background: var(--red-band); inset: 0 auto 0 0; width: 8px; }

/* ---------- Section colour blocks ---------- */
.lavender, .sec--gray { background: var(--gray-1); }
.sec--gray-2 { background: var(--gray-2); }
.sec--white { background: #fff; }

/* Dark (charcoal) blocks */
.tactile, .sec--char { background: var(--char); color: #d4d4da; }
.sec--char .sec-title, .tactile .sec-title { color: #fff; }
.sec--char .sec-lead, .tactile .sec-lead { color: #b4b4bc; }
.sec--char .eyebrow, .tactile .eyebrow { color: #ff6b70; }
.sec--char .btn-outline { --bd: rgba(255, 255, 255, .5); --fg: #fff; color: #fff; background: transparent; }
.sec--char .btn-outline:hover { --bg: #fff; background: #fff; color: var(--ink); }
.sec--char .note { color: #a4a4ac; }
.sec--char .job-grid__item { border-radius: var(--r); }

/* Red blocks, with slanted top and bottom edges */
.sec--red { background: var(--red-band); color: #fff; }
.sec--red .sec-title, .sec--red .eyebrow, .sec--red .sec-lead { color: #fff; }
.sec--red .sec-title em { color: #fff; text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; }
.sec--slant { clip-path: polygon(0 var(--slant), 100% 0, 100% calc(100% - var(--slant)), 0 100%); padding-block: calc(clamp(3.5rem, 8vw, 6.5rem) + var(--slant)); position: relative; }

/* Counters on red: white numerals, hairline grid */
.sec--red .counters__grid { background: rgba(255, 255, 255, .28); border-color: rgba(255, 255, 255, .28); }
.sec--red .counter { background: var(--red-band); }
.sec--red .counter__num, .sec--red .counter:nth-child(3n+2) .counter__num, .sec--red .counter:nth-child(3n) .counter__num { color: #fff; }
.sec--red .counter__label { color: #fff; }
.sec--red .counter__sub { color: #fff; }
.sec--red .counter.fx-spot:hover { background-image: none; background-color: #c01d24; }

/* ---------- Page heroes: solid gray with a red block ---------- */
.page-hero, .svc-hero { background: var(--gray-1); border-bottom: 0; }
.page-hero__ink { background: none; -webkit-mask-image: none; mask-image: none; }
.page-hero__ink::before {
	content: ""; position: absolute; right: -4vw; top: 0; bottom: 0; width: min(34vw, 420px);
	background: var(--red-band); clip-path: polygon(38% 0, 100% 0, 100% 100%, 0 100%);
}
.page-hero__ink::after {
	content: ""; position: absolute; right: calc(min(34vw, 420px) - 6vw); bottom: 18%; width: clamp(60px, 9vw, 120px); aspect-ratio: 1;
	background: var(--char); clip-path: polygon(0 0, 100% 0, 100% 100%); opacity: .9;
}
.page-hero .crop-marks i { border-color: rgba(35, 31, 32, .3); }
.page-hero__title { position: relative; }
.page-hero__title::after { content: ""; display: block; width: 72px; height: 6px; margin-top: .25em; background: var(--red); border-radius: 3px; }
@media (max-width: 760px) {
	.page-hero__ink::before { width: 26vw; right: -10vw; }
	.page-hero__ink::after { display: none; }
}

/* ---------- Components on the new palette ---------- */
.promise-card::after { background: var(--red-band); opacity: .9; }
.step__num { color: var(--red); opacity: .9; }
.step:nth-child(1) .step__icon { background: var(--red); }
.step:nth-child(2) .step__icon { background: var(--char-2); }
.step:nth-child(3) .step__icon { background: #8a8a93; }
.step:nth-child(4) .step__icon { background: var(--red-d); }
.lavender .step, .sec--gray .step, .sec--gray .industry, .sec--gray .p-card, .sec--gray .s-card { border-color: transparent; }
.t-card figcaption strong { color: var(--ink); }
.s-card__icon::before { background: rgba(238, 50, 55, .22); }
.s-card__icon::after { background: rgba(43, 43, 48, .16); }
.pillar { border-top: 4px solid var(--pc, var(--red)); }
.tri-stripe i:nth-child(2) { background: #8a8a93; }
.site-footer { background: var(--char); }
.marquee { background: #fff; }

/* CTA band: solid red block */
.cta-band { background: var(--red-band); color: #fff; }
.cta-band__ink { background: none; }
.cta-band__ink::before { content: ""; position: absolute; right: 0; top: 0; width: 38%; height: 100%; background: #b81a21; clip-path: polygon(30% 0, 100% 0, 100% 100%, 0 100%); }
.cta-band .btn-outline-light { --bd: #fff; }
.cta-band .btn-outline-light:hover { background: #fff; color: var(--red-d); }
.cta-band .btn-wa { box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .35); }
@media (max-width: 899.98px) { .cta-band__ink::before { width: 100%; height: 40%; top: auto; bottom: 0; clip-path: polygon(0 30%, 100% 0, 100% 100%, 0 100%); } }

/* Hero slider: neutral shade instead of indigo tint */
.hero-slide__shade { background: linear-gradient(90deg, rgba(18, 18, 21, .9) 0%, rgba(24, 24, 28, .72) 40%, rgba(24, 24, 28, .2) 75%, rgba(24, 24, 28, 0) 100%); }
@media (max-width: 640px) { .hero-slide__shade { background: linear-gradient(0deg, rgba(18, 18, 21, .94) 20%, rgba(24, 24, 28, .66) 65%, rgba(24, 24, 28, .25)); } }

/* Default buttons become graphite; primary stays red */
.btn:not(.btn-red):not(.btn-wa):not(.btn-outline):not(.btn-outline-light):not(.btn-ghost):hover { --bg: #000; }
.btn-outline { --bd: var(--ink); }
.btn-outline:hover { background: var(--ink); color: #fff; }

@media print {
	.sec--red, .sec--char, .tactile, .cta-band { background: #fff !important; color: #000 !important; clip-path: none !important; }
}