/*
Theme Name: Prizor AITech
Theme URI: https://prizorai.com
Author: Prizor AITech
Author URI: https://prizorai.com
Description: Custom Full Site Editing block theme for Prizor AITech — a multi-stack development agency that ships conversion-focused websites, storefronts and mobile apps across WordPress, Webflow, Framer, Shopify and headless stacks. Hand-built Gutenberg blocks, GSAP + Lenis scroll choreography, dark editorial aesthetic, and a performance-first build (Lighthouse 95+ target). No page builders. Designed for agencies and the clients they serve.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 7.0
Requires PHP: 8.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cmsexpertdev
Tags: full-site-editing, block-patterns, block-styles, custom-colors, custom-logo, custom-menu, dark-mode, featured-images, one-column, portfolio, theme-options, translation-ready, wide-blocks
*/

/* =======================================================================
   GLOBAL — most styles live in theme.json or per-block style.scss.
   This sheet handles the cross-cutting things theme.json can't express:
   typography rendering hints, focus-visible rings, scroll behavior,
   layout primitives, and the tiny utility set blocks rely on.
   ======================================================================= */

:root {
	--ease-emph: cubic-bezier(0.22, 1, 0.36, 1);
	--ease-smooth: cubic-bezier(0.2, 0.8, 0.2, 1);
	--header-height: 84px;
	--cursor-size: 14px;
	--page-max: 1440px;

	/* ─── Unified responsive padding tokens ───
	   Every section uses these so vertical rhythm is consistent across
	   the page. Tokens auto-scale at the breakpoints below. */
	--pad-section:    clamp(5rem, 11vw, 9rem);     /* default sections */
	--pad-section-lg: clamp(6rem, 14vw, 12rem);    /* hero, final-CTA */
	--pad-section-sm: clamp(2.5rem, 5vw, 4rem);    /* compact strips */
	--gutter-x:       clamp(1.25rem, 4vw, 4rem);   /* horizontal gutter */
}

/* Hairline + veil tokens — used by block CSS for borders, dividers,
   and frosted overlays. Tinted to match the dark page bg. */
:root {
	--ced-line-04: rgba(232, 229, 222, 0.04);
	--ced-line-06: rgba(232, 229, 222, 0.06);
	--ced-line-08: rgba(232, 229, 222, 0.08);
	--ced-line-10: rgba(232, 229, 222, 0.10);
	--ced-line-12: rgba(232, 229, 222, 0.12);
	--ced-line-14: rgba(232, 229, 222, 0.14);
	--ced-line-16: rgba(232, 229, 222, 0.16);
	--ced-line-18: rgba(232, 229, 222, 0.18);
	--ced-line-20: rgba(232, 229, 222, 0.20);
	--ced-line-24: rgba(232, 229, 222, 0.24);
	--ced-line-30: rgba(232, 229, 222, 0.30);
	--ced-line-40: rgba(232, 229, 222, 0.40);
	--ced-line-70: rgba(232, 229, 222, 0.70);

	--ced-veil-08: rgba(5, 5, 7, 0.08);
	--ced-veil-10: rgba(5, 5, 7, 0.10);
	--ced-veil-12: rgba(5, 5, 7, 0.12);
	--ced-veil-16: rgba(5, 5, 7, 0.16);
	--ced-veil-18: rgba(5, 5, 7, 0.18);
	--ced-veil-30: rgba(5, 5, 7, 0.30);
	--ced-veil-35: rgba(5, 5, 7, 0.35);
	--ced-veil-40: rgba(5, 5, 7, 0.40);
	--ced-veil-45: rgba(5, 5, 7, 0.45);
	--ced-veil-50: rgba(5, 5, 7, 0.50);
	--ced-veil-60: rgba(5, 5, 7, 0.60);
	--ced-veil-65: rgba(5, 5, 7, 0.65);
	--ced-veil-66: rgba(5, 5, 7, 0.66);
	--ced-veil-72: rgba(5, 5, 7, 0.72);
	--ced-veil-85: rgba(5, 5, 7, 0.85);
	--ced-veil-92: rgba(5, 5, 7, 0.92);
	--ced-veil-94: rgba(5, 5, 7, 0.94);
	--ced-veil-97: rgba(5, 5, 7, 0.97);
}

/* Tablet — 768px and below */
@media (max-width: 1024px) {
	:root {
		--pad-section:    clamp(4rem, 9vw, 6rem);
		--pad-section-lg: clamp(5rem, 11vw, 8rem);
		--pad-section-sm: clamp(2rem, 4vw, 3rem);
		--gutter-x:       clamp(1.25rem, 3.5vw, 2.5rem);
		--header-height: 72px;
	}
}

/* Mobile — 640px and below */
@media (max-width: 640px) {
	:root {
		--pad-section:    3.5rem;
		--pad-section-lg: 4.5rem;
		--pad-section-sm: 1.75rem;
		--gutter-x:       1.25rem;
		--header-height: 64px;
	}
}

/* ─── Ultra-wide breakpoints ────────────────────────────────────────────
   Default --page-max caps at 1440px so 1080p/MacBook layouts stay tight.
   On larger displays (QHD, 2.5K, 4K studio screens, ultra-wides) that
   1440px island leaves huge empty margins — content reads as marooned in
   the middle. These breakpoints widen the page container progressively
   and bump section padding + horizontal gutter so the layout breathes at
   scale without losing the typographic rhythm.

   Reference targets:
     • 1600px+  →  16" laptops / 1080p+ desktops
     • 1920px+  →  FHD / 24" monitors
     • 2560px+  →  QHD / 27" Studio Display class
     • 3200px+  →  ultra-wide 32:9, M-series 16" Retina
     • 3840px+  →  4K / UHD / large external displays
   ─────────────────────────────────────────────────────────────────────── */

/* 1600px+ — start letting the canvas breathe past the default. */
@media (min-width: 1600px) {
	:root {
		--page-max: 1600px;
		--gutter-x:       clamp(2rem, 4vw, 5rem);
		--pad-section:    clamp(5.5rem, 11vw, 10rem);
		--pad-section-lg: clamp(6.5rem, 14vw, 13rem);
	}
}

/* 1920px+ — FHD class, common external monitors. */
@media (min-width: 1920px) {
	:root {
		--page-max: 1760px;
		--gutter-x:       clamp(2.5rem, 4vw, 6rem);
		--pad-section:    clamp(6rem, 11vw, 11rem);
		--pad-section-lg: clamp(7rem, 14vw, 14rem);
	}
}

/* 2560px+ — QHD / Studio Display class. */
@media (min-width: 2560px) {
	:root {
		--page-max: 2080px;
		--gutter-x:       clamp(3rem, 4vw, 7rem);
		--pad-section:    clamp(7rem, 11vw, 12rem);
		--pad-section-lg: clamp(8rem, 14vw, 16rem);
		--pad-section-sm: clamp(3rem, 5vw, 5rem);
	}
}

/* 3200px+ — 32" 6K / 16" Retina at scaled resolutions. */
@media (min-width: 3200px) {
	:root {
		--page-max: 2400px;
		--gutter-x:       clamp(4rem, 4vw, 8rem);
		--pad-section:    clamp(8rem, 11vw, 14rem);
		--pad-section-lg: clamp(9rem, 14vw, 18rem);
	}
}

/* 3840px+ — 4K / UHD / huge external displays. */
@media (min-width: 3840px) {
	:root {
		--page-max: 2880px;
		--gutter-x:       clamp(5rem, 4vw, 10rem);
		--pad-section:    clamp(9rem, 11vw, 16rem);
		--pad-section-lg: clamp(10rem, 14vw, 20rem);
		--pad-section-sm: clamp(3.5rem, 5vw, 6rem);
	}
}

/* Universal box-sizing reset — without this, anything with `width: 100%`
   plus padding overflows its container by 2 × padding. Buttons, form
   inputs, cards, and the lead form were all caught by this. */
*, *::before, *::after {
	box-sizing: border-box;
}

* { -webkit-tap-highlight-color: transparent; }

html {
	scroll-behavior: smooth;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }

body {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
	font-feature-settings: "ss01", "ss02", "cv11";
	overflow-x: clip;
}

/* Anything that wants to bleed past content but stay clipped — gridded
   above the safe page boundary. Prevents mobile horizontal overflow. */
html { overflow-x: clip; }
img, video, svg { max-width: 100%; height: auto; }

/* Touch-target enforcement — buttons & inline text links should be
   ≥ 44px tap area on touch devices. Excludes card-style anchors
   (`.ced-card__link`, `.ced-shub__card`, `.ced-tests__dot`, etc.) which
   handle their own layout via grid/flex internally and would get broken
   by forcing them to inline-flex. */
@media (hover: none) and (pointer: coarse) {
	.ced-btn { min-height: 48px; padding-inline: 1.25rem; }
	a:not(.ced-btn):not(.ced-card__link):not(.ced-shub__card):not(.ced-card):not(.ced-warch__chip):not(.ced-tests__dot),
	button:not(.ced-warch__chip):not(.ced-tests__dot):not(.ced-shub__card) {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
	}
}

::selection { background: var(--wp--preset--color--lime); color: var(--wp--preset--color--ink); }

/* Focus ring — high-contrast lime, only on keyboard focus. */
:focus { outline: none; }
:focus-visible {
	outline: 2px solid var(--wp--preset--color--lime);
	outline-offset: 4px;
	border-radius: 4px;
}

/* Skip link */
.skip-link.screen-reader-text {
	position: absolute;
	left: -9999px;
	top: 1rem;
	z-index: 100;
	padding: 0.75rem 1rem;
	background: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--ink);
	font-weight: 500;
}
.skip-link.screen-reader-text:focus { left: 1rem; }

/* Section primitive — every block uses .ced-section as the outer wrapper. */
.ced-section {
	position: relative;
	padding-block: var(--pad-section);
	padding-inline: var(--gutter-x);
	max-width: var(--page-max);
	margin-inline: auto;
}
.ced-section--flush { padding-block: 0; }
.ced-section--bleed { max-width: none; padding-inline: 0; }
.ced-section--lg    { padding-block: var(--pad-section-lg); }
.ced-section--sm    { padding-block: var(--pad-section-sm); }

/* Eyebrow — used in every section header. */
.ced-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--font--tracking--widest);
	color: var(--wp--preset--color--fog);
}
.ced-eyebrow::before {
	content: "";
	width: 24px;
	height: 1px;
	background: var(--wp--preset--color--lime);
}

/* Buttons */
.ced-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 1.05rem 1.6rem;
	border-radius: var(--wp--custom--radius--pill);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 500;
	letter-spacing: -0.005em;
	text-decoration: none;
	cursor: pointer;
	border: 1px solid transparent;
	transition: background var(--wp--custom--transition--smooth), color var(--wp--custom--transition--smooth), border-color var(--wp--custom--transition--smooth), transform var(--wp--custom--transition--smooth);
	will-change: transform;
}
.ced-btn--primary {
	background: var(--wp--preset--color--lime);
	color: var(--wp--preset--color--ink);
}
.ced-btn--primary:hover { background: var(--wp--preset--color--paper); }
.ced-btn--ghost {
	background: transparent;
	color: var(--wp--preset--color--paper);
	border-color: var(--ced-line-20);
}
.ced-btn--ghost:hover {
	border-color: var(--wp--preset--color--paper);
	background: var(--ced-line-04);
}
.ced-btn__arrow {
	display: inline-block;
	transition: transform var(--wp--custom--transition--swift);
}
.ced-btn:hover .ced-btn__arrow { transform: translateX(4px); }

/* Hairline grid — used in CMS showcase, services, etc. */
.ced-hairline { border-top: var(--wp--custom--grid--hairline); }
.ced-hairline-l { border-left: var(--wp--custom--grid--hairline); }
.ced-hairline-r { border-right: var(--wp--custom--grid--hairline); }
.ced-hairline-b { border-bottom: var(--wp--custom--grid--hairline); }

/* Reveal helper — set by JS once IntersectionObserver fires. */
.ced-reveal {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 720ms var(--ease-emph), transform 720ms var(--ease-emph);
	will-change: opacity, transform;
}
.ced-reveal.is-in {
	opacity: 1;
	transform: none;
}

/* Stagger children — JS sets --i index. */
.ced-stagger > * { transition-delay: calc(var(--i, 0) * 60ms); }

/* Split-text spans — populated by JS, animated word-by-word. */
.ced-split-word {
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
}
.ced-split-word > span {
	display: inline-block;
	transform: translateY(110%);
	transition: transform 880ms var(--ease-emph);
	transition-delay: calc(var(--i, 0) * 28ms);
}
.is-in .ced-split-word > span,
.ced-split.is-in .ced-split-word > span { transform: translateY(0); }

/* Marquee — used in CMS logo strip. */
.ced-marquee {
	display: flex;
	gap: var(--wp--preset--spacing--lg);
	white-space: nowrap;
	width: max-content;
	animation: ced-marquee-roll 38s linear infinite;
}
@keyframes ced-marquee-roll {
	from { transform: translate3d(0,0,0); }
	to   { transform: translate3d(-50%,0,0); }
}

/* Custom cursor — desktop only. */
.ced-cursor {
	position: fixed;
	top: 0; left: 0;
	width: var(--cursor-size); height: var(--cursor-size);
	border-radius: 50%;
	background: var(--wp--preset--color--lime);
	pointer-events: none;
	mix-blend-mode: difference;
	transform: translate3d(-50%, -50%, 0);
	transition: transform 320ms var(--ease-smooth), width 320ms var(--ease-smooth), height 320ms var(--ease-smooth), opacity 320ms var(--ease-smooth);
	z-index: 9999;
	opacity: 0;
}
.ced-cursor.is-active { opacity: 1; }
.ced-cursor.is-hovering {
	width: 56px;
	height: 56px;
	background: rgba(203, 108, 230, 0.18);
	border: 1px solid var(--wp--preset--color--lime);
}
@media (hover: none), (pointer: coarse) {
	.ced-cursor { display: none; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
	.ced-marquee { animation: none; }
	.ced-reveal { opacity: 1; transform: none; }
	.ced-split-word > span { transform: none; }
	.ced-cursor { display: none; }
}

/* Hide page-builder admin UI we don't want anywhere */
.is-root-container > .wp-block-pattern-inserter { display: none; }

/* Layout helper for full-bleed inside max-width pages. */
.ced-bleed {
	width: 100vw;
	margin-left: calc(50% - 50vw);
}

/* Number formatting — old-style figures off, tabular for stats. */
.ced-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* ────────────────────────────────────────────────────────────────
   Long-form body — used inside the case-study and blog templates.
   Sits inside .ced-section, max 780px column, generous typography.
   ──────────────────────────────────────────────────────────────── */
.ced-project-body,
.ced-article-body {
	color: var(--wp--preset--color--mist);
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1.65;
	max-width: 780px;
	margin-inline: auto;
}

.ced-service-hero {
	padding-top: calc(var(--header-height) + clamp(2rem, 5vw, 4rem)) !important;
	padding-bottom: var(--pad-section-sm) !important;
	display: grid;
	gap: 0.75rem;
}
.ced-service-hero__title {
	font-size: clamp(2.5rem, 7vw, 6rem);
	font-weight: 600;
	letter-spacing: -0.05em;
	line-height: 0.96;
	margin: 0;
	color: var(--wp--preset--color--paper);
	max-width: 22ch;
}
.ced-service-hero__crumb {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--micro);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--fog);
	margin: 0 !important;
}
.ced-service-hero__crumb a {
	color: var(--wp--preset--color--mist);
	text-decoration: none;
	transition: color 240ms var(--ease-smooth);
}
.ced-service-hero__crumb a:hover { color: var(--wp--preset--color--lime); }

/* ────────────────────────────────────────────────────────────
   Body + Sidebar grid — used on platform/service pages so
   wide desktop screens feel deliberate, not cramped.
   ──────────────────────────────────────────────────────────── */
.ced-page-grid {
	max-width: 1280px !important;
	margin-inline: auto !important;
	padding-block: var(--pad-section) !important;
	padding-inline: var(--gutter-x) !important;
	display: grid !important;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--md);
}
@media (min-width: 1100px) {
	.ced-page-grid {
		grid-template-columns: minmax(0, 1fr) 320px;
		gap: var(--wp--preset--spacing--lg);
		align-items: start;
	}
}

.ced-page-grid__main {
	min-width: 0;
	max-width: 780px;
}
@media (min-width: 1100px) {
	.ced-page-grid__main { max-width: none; }
}

.ced-page-grid__side {
	display: grid !important;
	gap: 1rem !important;
	min-width: 0;
}
@media (min-width: 1100px) {
	.ced-page-grid__side {
		position: sticky;
		top: calc(var(--header-height) + 1.5rem);
		align-self: start;
	}
}

/* Sticky CTA card */
.ced-side-card {
	background: var(--wp--preset--color--graphite);
	border: 1px solid var(--ced-line-08);
	border-radius: var(--wp--custom--radius--lg);
	padding: clamp(1.25rem, 2.5vw, 1.75rem);
	display: grid;
	gap: 0.85rem;
	color: var(--wp--preset--color--paper);
}
.ced-side-card h3 {
	font-size: clamp(1.1rem, 2vw, 1.4rem);
	font-weight: 500;
	letter-spacing: -0.02em;
	line-height: 1.2;
	color: var(--wp--preset--color--paper);
	margin: 0;
}
.ced-side-card p {
	font-size: 0.9rem;
	color: var(--wp--preset--color--mist);
	line-height: 1.55;
	margin: 0;
}
.ced-side-card .ced-btn {
	width: 100%;
	justify-content: center;
}
.ced-side-card--cta {
	background: linear-gradient(160deg, var(--wp--preset--color--graphite), rgba(203, 108, 230, 0.06));
	border-color: rgba(203, 108, 230, 0.24);
}
.ced-project-body :where(h2, h3),
.ced-article-body :where(h2, h3) {
	color: var(--wp--preset--color--paper);
	letter-spacing: -0.025em;
	line-height: 1.15;
	margin-top: 2.5em;
	margin-bottom: 0.75em;
}
.ced-project-body h2,
.ced-article-body h2 { font-size: clamp(1.75rem, 3.5vw, 2.5rem); }
.ced-project-body h3,
.ced-article-body h3 { font-size: clamp(1.25rem, 2.4vw, 1.75rem); }
.ced-project-body p,
.ced-article-body p {
	margin: 0 0 1.25em 0;
}
.ced-project-body :where(ul, ol),
.ced-article-body :where(ul, ol) {
	padding-left: 1.5em;
	margin: 0 0 1.5em 0;
}
.ced-project-body li,
.ced-article-body li { margin-bottom: 0.5em; }
.ced-project-body blockquote,
.ced-article-body blockquote {
	border-left: 3px solid var(--wp--preset--color--lime);
	padding-left: 1.5em;
	margin: 2em 0;
	font-size: 1.25em;
	color: var(--wp--preset--color--paper);
	font-style: italic;
}
.ced-project-body img,
.ced-article-body img {
	border-radius: var(--wp--custom--radius--md);
	margin: 1.5em 0;
}
.ced-project-body a,
.ced-article-body a {
	color: var(--wp--preset--color--lime);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}

/* ────────────────────────────────────────────────────────────
   Blog / Insights — single + archive
   ──────────────────────────────────────────────────────────── */
.ced-blog-hero,
.ced-article-hero {
	padding-top: calc(var(--header-height) + clamp(2rem, 5vw, 4rem)) !important;
	padding-bottom: var(--pad-section-sm) !important;
	display: grid;
	gap: 1rem;
}
/* Blog hero title — the production hero now sits on a paper-white
   card surface (Reading-by-Stack filter-first layout), so the title
   reads in dark ink. The block's own style.css owns layout + sizing;
   this rule just keeps the color override surviving any cascade
   weirdness from the previous dark-bg treatment. */
.ced-blog-hero__title {
	color: var(--wp--preset--color--ink);
	margin: 0;
}
.ced-blog-hero__lede,
.ced-article-hero__excerpt {
	color: rgba(20, 20, 28, 0.65);
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1.5;
	margin: 0;
}
/* Article hero (single post) still sits on dark — keep its paper text. */
.ced-article-hero__excerpt {
	color: var(--wp--preset--color--mist);
}
.ced-article-hero__crumbs {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--micro);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--fog);
	margin: 0;
}
.ced-article-hero__crumbs a { color: inherit; text-decoration: none; }
.ced-article-hero__crumbs a:hover { color: var(--wp--preset--color--lime); }
.ced-article-hero__date {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--micro);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--lime);
	margin: 0;
}
.ced-article-hero__title {
	font-size: clamp(2.5rem, 7vw, 5.5rem);
	font-weight: 600;
	letter-spacing: -0.045em;
	line-height: 0.98;
	color: var(--wp--preset--color--paper);
	margin: 0;
}
.ced-article-hero__media {
	max-width: var(--page-max);
	margin-inline: auto;
	padding-inline: var(--gutter-x);
}
.ced-article-hero__media img {
	border-radius: var(--wp--custom--radius--lg);
	width: 100%;
	display: block;
}
.ced-article-body__lede {
	font-size: clamp(1.25rem, 2.4vw, 1.625rem) !important;
	line-height: 1.5 !important;
	color: var(--wp--preset--color--paper) !important;
	font-weight: 400;
	letter-spacing: -0.01em;
	border-left: 3px solid var(--wp--preset--color--lime);
	padding-left: 1.25rem;
	margin: 0 0 2rem !important;
}
/* Blog grid */
.ced-blog-grid-wrap { padding-block: var(--pad-section); padding-inline: var(--gutter-x); }
.ced-blog-grid {
	display: grid !important;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--md);
	max-width: var(--page-max);
	margin-inline: auto;
}
@media (min-width: 720px)  { .ced-blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .ced-blog-grid { grid-template-columns: repeat(3, 1fr); } }
.ced-blog-card {
	background: var(--wp--preset--color--graphite);
	border-radius: var(--wp--custom--radius--lg);
	overflow: clip;
	border: 1px solid var(--ced-line-06);
	padding: 1.65rem 1.5rem 1.4rem !important;
	display: grid !important;
	gap: 0.7rem !important;
	transition: transform var(--wp--custom--transition--smooth), border-color var(--wp--custom--transition--smooth);
	min-height: 220px;
	align-content: start;
}
.ced-blog-card:hover { transform: translateY(-2px); border-color: var(--wp--preset--color--lime); }
.ced-blog-card__cat {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--micro);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--lime);
	margin: 0 0 0.15rem !important;
}
.ced-blog-card__cat a {
	color: inherit;
	text-decoration: none;
}
.ced-blog-card__cat a:hover { color: var(--wp--preset--color--paper); }
.ced-blog-card__date {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--micro);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--fog);
	margin: 0.35rem 0 0 !important;
	padding-top: 0.85rem;
	border-top: 1px solid var(--ced-line-08);
}
.ced-blog-card__title {
	font-size: clamp(1.25rem, 2.4vw, 1.65rem) !important;
	font-weight: 500 !important;
	letter-spacing: -0.025em !important;
	line-height: 1.15 !important;
	margin: 0 !important;
}
.ced-blog-card__title a { color: var(--wp--preset--color--paper); text-decoration: none; }
.ced-blog-card__title a:hover { color: var(--wp--preset--color--lime); }
.ced-blog-card__excerpt {
	color: var(--wp--preset--color--mist);
	font-size: 0.9rem !important;
	line-height: 1.55;
	margin: 0 !important;
}
.ced-blog-pagination {
	max-width: var(--page-max) !important;
	margin: var(--wp--preset--spacing--md) auto 0 !important;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
.ced-blog-pagination a {
	color: var(--wp--preset--color--mist);
	text-decoration: none;
	padding: 0.65rem 1rem;
	border: 1px solid var(--ced-line-16);
	border-radius: var(--wp--custom--radius--pill);
	transition: border-color var(--wp--custom--transition--swift), color var(--wp--custom--transition--swift);
}
.ced-blog-pagination a:hover { border-color: var(--wp--preset--color--lime); color: var(--wp--preset--color--lime); }

/* ============================================================
   Project card — shared component used by:
     - blocks/work-showcase  (homepage Selected Work)
     - blocks/work-archive   (/work/ archive page)
   Lives in the global stylesheet so both surfaces get it
   regardless of which block CSS bundle is enqueued.
   ============================================================ */
.ced-card {
	--card-accent: var(--wp--preset--color--lime);
	position: relative;
	border-radius: var(--wp--custom--radius--lg);
	overflow: hidden;
	background: var(--wp--preset--color--graphite);
	transition: transform var(--wp--custom--transition--smooth), background var(--wp--custom--transition--smooth);
}
.ced-card--sand     { --card-accent: var(--wp--preset--color--sunset);   background: linear-gradient(135deg, #2a1f15 0%, #1a1410 100%); }
.ced-card--ink      { --card-accent: var(--wp--preset--color--lavender); background: linear-gradient(135deg, #14121f 0%, #0c0c10 100%); }
.ced-card--paper    { --card-accent: var(--wp--preset--color--coral);    background: linear-gradient(135deg, #f4e5c9 0%, #fbf6e9 100%); color: var(--wp--preset--color--ink); }
.ced-card--forest   { --card-accent: var(--wp--preset--color--sage);     background: linear-gradient(135deg, #2a1f15 0%, #1a1410 100%); }
.ced-card--rose     { --card-accent: var(--wp--preset--color--rose);     background: linear-gradient(135deg, #2a1f15 0%, #1a1410 100%); }
.ced-card--graphite { --card-accent: var(--wp--preset--color--sky);      background: linear-gradient(135deg, #2a1f15 0%, #1a1410 100%); }

.ced-card--paper .ced-card__title,
.ced-card--paper .ced-card__platform { color: var(--wp--preset--color--ink); }
.ced-card--paper .ced-card__industry { color: var(--ced-veil-50); }
.ced-card--paper .ced-card__view     { color: var(--wp--preset--color--ink); }

.ced-card:hover { transform: translateY(-4px); }

.ced-card__link {
	display: grid;
	grid-template-rows: auto 1fr;
	gap: 0;
	color: inherit;
	text-decoration: none;
	height: 100%;
}

/* Media area — large, dominant. Holds image / placeholder + year badge. */
.ced-card__media {
	position: relative;
	aspect-ratio: 16 / 11;
	overflow: hidden;
	background: var(--wp--preset--color--stone);
}
.ced-card__media img,
.ced-card__placeholder {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	/* Pin to the TOP of the image. Real-site screenshots are tall
	   (5–20× the card width). Default center-crop shows only the
	   visually-empty middle of those screenshots — pinning to top
	   surfaces the hero, which is the visually-richest part. */
	object-position: top center;
	transition: transform 880ms var(--ease-emph);
}
.ced-card:hover .ced-card__media img,
.ced-card:hover .ced-card__placeholder { transform: scale(1.04); }

.ced-card__placeholder {
	display: grid;
	place-items: center;
	color: var(--wp--preset--color--paper);
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(4rem, 14vw, 10rem);
	font-weight: 600;
	letter-spacing: -0.06em;
	line-height: 0.85;
}
.ced-card__placeholder[data-tone="ink"]      { background: linear-gradient(135deg, #1c1c22 0%, #0c0c10 100%); }
.ced-card__placeholder[data-tone="paper"]    { background: linear-gradient(135deg, #f1ede4 0%, #d6d2c8 100%); color: var(--wp--preset--color--ink); }
.ced-card__placeholder[data-tone="sand"]     { background: linear-gradient(135deg, #e8d8b9 0%, #b09b78 100%); color: var(--wp--preset--color--ink); }
.ced-card__placeholder[data-tone="forest"]   { background: linear-gradient(135deg, #3a4f44 0%, #1d2a26 100%); color: #CB6CE6; }
.ced-card__placeholder[data-tone="rose"]     { background: linear-gradient(135deg, #e8d8b9 0%, #b09b78 100%); color: var(--wp--preset--color--ink); }
.ced-card__placeholder[data-tone="graphite"] { background: linear-gradient(135deg, #2a1f15 0%, #1a1410 100%); color: #6E6E78; }

/* Brand-logo variant of the placeholder. The colored gradient stays
   as the backdrop and the logo sits centered on a soft paper disc so
   any brand color reads cleanly against any tone. Both layers stack
   in a single grid cell so the disc sits directly behind the logo. */
.ced-card__placeholder.has-logo {
	display: grid;
	grid-template-areas: "stack";
	place-items: center;
	padding: clamp(1.5rem, 4vw, 3rem);
}
.ced-card__placeholder.has-logo::before {
	content: "";
	grid-area: stack;
	width: clamp(140px, 42%, 240px);
	aspect-ratio: 1;
	border-radius: 26%;
	background: rgba(255, 255, 255, 0.96);
	box-shadow:
		0 18px 60px -20px rgba(0, 0, 0, 0.45),
		0 4px 14px -4px rgba(0, 0, 0, 0.22);
	transition: transform 880ms var(--ease-emph);
	z-index: 0;
}
/* Reset the global .ced-card__media img absolute-fill rule for the
   logo image so it sizes intrinsically inside the disc. */
.ced-card__media .ced-card__logo {
	grid-area: stack;
	position: relative;
	inset: auto;
	z-index: 1;
	width: clamp(90px, 28%, 160px);
	height: clamp(90px, 28%, 160px);
	object-fit: contain;
	transition: transform 880ms var(--ease-emph);
	filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.08));
}
.ced-card:hover .ced-card__placeholder.has-logo::before { transform: scale(1.04); }
.ced-card:hover .ced-card__media .ced-card__logo { transform: scale(1.06); }
/* The generic .ced-card:hover scales the whole placeholder. Lock it
   to 1.0 here so the logo's own animation is the only visible one. */
.ced-card:hover .ced-card__placeholder.has-logo { transform: none; }

/* Year badge — top-right floating glass-blur pill */
.ced-card__year-badge {
	position: absolute;
	top: 1rem;
	right: 1rem;
	padding: 0.3rem 0.65rem;
	background: var(--ced-veil-65);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	color: var(--wp--preset--color--paper);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--micro);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	border-radius: var(--wp--custom--radius--pill);
	border: 1px solid var(--ced-line-16);
}
.ced-card--paper .ced-card__year-badge {
	background: rgba(255, 255, 255, 0.7);
	color: var(--wp--preset--color--ink);
	border-color: var(--ced-veil-12);
}

/* Body — platform pill, title, headline result, CTA */
.ced-card__body {
	display: grid;
	gap: 0.85rem;
	padding: clamp(1.25rem, 2vw, 1.75rem);
	align-content: start;
}
.ced-card__platform {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--micro);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--paper);
	max-width: 100%;
	flex-wrap: wrap;
}
.ced-card__platform-dot {
	width: 6px; height: 6px;
	border-radius: 50%;
	background: var(--card-accent);
	box-shadow: 0 0 0 4px color-mix(in oklab, var(--card-accent) 24%, transparent);
	flex-shrink: 0;
}
.ced-card__industry { color: var(--wp--preset--color--fog); }

.ced-card__title {
	font-size: clamp(1.5rem, 2.6vw, 2rem);
	font-weight: 500;
	letter-spacing: -0.025em;
	line-height: 1.1;
	margin: 0;
	color: var(--wp--preset--color--paper);
}
.ced-card__result {
	font-size: var(--wp--preset--font-size--base);
	font-weight: 500;
	color: var(--card-accent);
	letter-spacing: -0.005em;
	line-height: 1.4;
	margin: 0;
	padding-top: 0.65rem;
	border-top: 1px solid color-mix(in oklab, var(--card-accent) 18%, transparent);
}
.ced-card__view {
	margin-top: auto;
	padding-top: 0.5rem;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--paper);
	transition: gap var(--wp--custom--transition--swift), color var(--wp--custom--transition--swift);
}
.ced-card:hover .ced-card__view { gap: 0.85rem; color: var(--card-accent); }

@media (max-width: 1024px) {
	.ced-card__title { font-size: clamp(1.4rem, 3.2vw, 1.85rem); }
}
@media (max-width: 640px) {
	.ced-card__title { font-size: clamp(1.3rem, 5vw, 1.6rem); }
	.ced-card__media { aspect-ratio: 5 / 4; }
	.ced-card__placeholder { font-size: clamp(2.75rem, 18vw, 5rem); }
	.ced-card__body { padding: 1.1rem; gap: 0.7rem; }
	.ced-card__result { font-size: 0.9rem; padding-top: 0.5rem; }
}

/* Hide screen-reader-only content */
.screen-reader-text {
	clip: rect(1px,1px,1px,1px);
	position: absolute !important;
	height: 1px; width: 1px;
	overflow: hidden;
	word-wrap: normal !important;
}

/* ====================================================================
   Awwwards-style scroll-magic primitives
   Used together with assets/js/scroll-magic.js + per-section markup.
   ==================================================================== */

/* Magnetic element transform — composed from JS-set --ced-mag-x/y */
[data-magnetic] {
	transition: transform 280ms var(--ease-emph);
	transform: translate3d(var(--ced-mag-x, 0), var(--ced-mag-y, 0), 0);
}

/* Parallax element — JS sets --ced-parallax-y */
[data-parallax] {
	will-change: transform;
	transform: translate3d(0, var(--ced-parallax-y, 0), 0);
}

/* Composite parallax (other transforms preserved via custom prop) */
[data-parallax-compose] {
	will-change: transform;
	transform: translate3d(0, calc(var(--ced-base-y, 0px) + var(--ced-parallax-y, 0px)), 0);
}

/* Body color-section transition — JS updates --ced-section-color
   based on which [data-section-color] is in view. */
:root {
	--ced-section-color: var(--wp--preset--color--ink);
}
body {
	transition: background-color 720ms var(--ease-emph);
}

/* Counter readability lock — prevents layout shift while counting */
[data-counter] {
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum";
}

/* Universal section header — used across colorful sections */
.ced-shead {
	display: grid;
	gap: var(--wp--preset--spacing--sm);
	max-width: 60ch;
	margin-bottom: var(--wp--preset--spacing--lg);
}
.ced-shead h2 {
	font-size: clamp(2.25rem, 5vw, 4.75rem);
	font-weight: 500;
	letter-spacing: -0.04em;
	line-height: 1.04;
	margin: 0;
}

/* ────────────────────────────────────────────────────────────
   Universal SWIPE INDICATOR — wraps any horizontal-scroll
   surface with a right-edge fade mask + an animated arrow that
   appears when there's more content to swipe to.

   Apply by adding [data-swipe-cue] on the scroll container.
   ──────────────────────────────────────────────────────────── */
[data-swipe-cue] {
	position: relative;
}
[data-swipe-cue]::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 48px;
	background: linear-gradient(
		to right,
		transparent 0%,
		var(--ced-swipe-fade, var(--wp--preset--color--graphite)) 80%
	);
	pointer-events: none;
	z-index: 2;
	opacity: 0.9;
	transition: opacity 320ms var(--ease-smooth);
}
[data-swipe-cue].at-end::after { opacity: 0; }

/* Floating arrow chip that pulses to indicate "swipe →" */
.ced-swipe-arrow {
	display: none;
	position: absolute;
	right: clamp(0.5rem, 2vw, 1rem);
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--wp--preset--color--lime);
	color: var(--wp--preset--color--ink);
	display: grid;
	place-items: center;
	pointer-events: none;
	animation: ced-swipe-pulse 1.6s ease-in-out infinite;
	box-shadow: 0 0 0 0 rgba(203, 108, 230, 0.5);
}
@media (max-width: 1024px) {
	[data-swipe-cue]:not(.at-end) .ced-swipe-arrow { display: grid; }
}
@keyframes ced-swipe-pulse {
	0%, 100% { transform: translate(0, -50%);    box-shadow: 0 0 0 0 rgba(203, 108, 230, 0.5); }
	50%      { transform: translate(-4px, -50%); box-shadow: 0 0 0 8px rgba(203, 108, 230, 0); }
}

/* Scroll progress dots — sit below a carousel */
.ced-swipe-dots {
	display: none;
	gap: 0.4rem;
	justify-content: center;
	margin-top: 0.85rem;
}
@media (max-width: 1024px) {
	.ced-swipe-dots { display: flex; }
}
.ced-swipe-dots span {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--ced-line-24);
	transition: background 240ms, width 320ms var(--ease-emph);
}
.ced-swipe-dots span.is-on {
	background: var(--wp--preset--color--lime);
	width: 18px;
	border-radius: 4px;
}

/* Color-tinted button variants */
.ced-btn--coral    { background: var(--wp--preset--color--coral);    color: var(--wp--preset--color--ink); }
.ced-btn--coral:hover  { background: var(--wp--preset--color--paper); }
.ced-btn--sky      { background: var(--wp--preset--color--sky);      color: var(--wp--preset--color--ink); }
.ced-btn--sky:hover    { background: var(--wp--preset--color--paper); }
.ced-btn--lavender { background: var(--wp--preset--color--lavender); color: var(--wp--preset--color--ink); }
.ced-btn--lavender:hover { background: var(--wp--preset--color--paper); }
.ced-btn--sunset   { background: var(--wp--preset--color--sunset);   color: var(--wp--preset--color--ink); }
.ced-btn--sunset:hover { background: var(--wp--preset--color--paper); }

/* ====================================================================
   Section ambience tokens — each section sets a hue + tone via class.
   Provides a quick way to flip a section to a colorful theme without
   rewriting its layout.
   ==================================================================== */
.ced-tone-cream  { background: var(--wp--preset--color--cream);  color: var(--wp--preset--color--ink); }
.ced-tone-paper  { background: var(--wp--preset--color--paper);  color: var(--wp--preset--color--ink); }
.ced-tone-sage   { background: var(--wp--preset--color--sage);   color: var(--wp--preset--color--ink); }
.ced-tone-coral  { background: var(--wp--preset--color--coral);  color: var(--wp--preset--color--ink); }
.ced-tone-sunset { background: var(--wp--preset--color--sunset); color: var(--wp--preset--color--ink); }
.ced-tone-sky    { background: var(--wp--preset--color--sky);    color: var(--wp--preset--color--ink); }
.ced-tone-lav    { background: var(--wp--preset--color--lavender); color: var(--wp--preset--color--ink); }

/* When a tone is light, flip headings/links to ink for contrast */
.ced-tone-cream :where(h1,h2,h3,h4,h5,h6),
.ced-tone-paper :where(h1,h2,h3,h4,h5,h6),
.ced-tone-sage  :where(h1,h2,h3,h4,h5,h6),
.ced-tone-coral :where(h1,h2,h3,h4,h5,h6),
.ced-tone-sunset:where(h1,h2,h3,h4,h5,h6),
.ced-tone-sky   :where(h1,h2,h3,h4,h5,h6),
.ced-tone-lav   :where(h1,h2,h3,h4,h5,h6) {
	color: var(--wp--preset--color--ink);
}


/* ====================================================================
   PLAN B — LIGHT-FORWARD REBRAND
   Flips the dominant dark sections to a cream base so the site reads
   as modern editorial. Dark sections that stay dark as accent moments:
   hero, marquee (rotating band), parallax (interlude), testimonials,
   footer. Demo phase — added as one block here for easy rollback. Once
   approved I'll refactor these into the individual block stylesheets.
   To roll back: delete this entire block.
   ==================================================================== */

/* ---- Sections flipped to cream ---- */
.ced-trust-strip,
.ced-cms,
.ced-services,
.ced-process,
.ced-lead {
	background: var(--wp--preset--color--cream) !important;
	color: var(--wp--preset--color--ink);
	/* Lines + veils need a light-context value inside these sections */
	--ced-line-08: rgba(20, 20, 28, 0.10);
	--ced-line-16: rgba(20, 20, 28, 0.16);
	--ced-veil-08: rgba(20, 20, 28, 0.04);
	--ced-veil-65: rgba(255, 255, 255, 0.65);
}

/* Strip the dark fade-overlays / radial glows that were keyed to a
   dark base (they read as smudges on cream). */
.ced-cms::before,
.ced-services::before,
.ced-process::before { opacity: 0.35; }

/* ---- Eyebrows inside flipped sections — softer ink + brand accent dot ---- */
.ced-trust-strip .ced-eyebrow,
.ced-cms .ced-eyebrow,
.ced-services .ced-eyebrow,
.ced-process .ced-eyebrow,
.ced-lead .ced-eyebrow {
	color: var(--wp--preset--color--ash);
}

/* ---- Titles in flipped sections ---- */
.ced-trust-strip h2,
.ced-trust-strip h3,
.ced-cms h2,
.ced-cms h3,
.ced-cms__title,
.ced-services h2,
.ced-services h3,
.ced-services__title,
.ced-process h2,
.ced-process h3,
.ced-process__title,
.ced-lead h2,
.ced-lead h3,
.ced-lead__title {
	color: var(--wp--preset--color--ink) !important;
}

/* ---- Body / lede text — readable on cream ---- */
.ced-trust-strip p,
.ced-trust-strip__lede,
.ced-cms p,
.ced-cms__lede,
.ced-services p,
.ced-services__lede,
.ced-process p,
.ced-process__lede,
.ced-lead p,
.ced-lead__lede {
	color: rgba(20, 20, 28, 0.72) !important;
}

/* ---- Cards within flipped sections ---- */
.ced-cms__cat,
.ced-services__card,
.ced-shub__card,
.ced-process__step,
.ced-trust-strip__chip {
	background: rgba(255, 255, 255, 0.55) !important;
	border-color: rgba(20, 20, 28, 0.10) !important;
	color: var(--wp--preset--color--ink);
}

/* CMS showcase category panels — replace dark gradients with light tints
   keyed off each category's accent color. */
.ced-cms__cat[data-slug="visual"]      { background: linear-gradient(135deg, #fff7eb 0%, #fff1dc 100%) !important; }
.ced-cms__cat[data-slug="general"]     { background: linear-gradient(135deg, #fdfaf0 0%, #f7efdc 100%) !important; }
.ced-cms__cat[data-slug="commerce"]    { background: linear-gradient(135deg, #fef5ee 0%, #fce8db 100%) !important; }
.ced-cms__cat[data-slug="headless"]    { background: linear-gradient(135deg, #f5f9ec 0%, #e7f0d4 100%) !important; }
.ced-cms__cat[data-slug="custom-stacks"] { background: linear-gradient(135deg, #f4f3fb 0%, #e6e3f5 100%) !important; }
.ced-cms__cat[data-slug="mobile"]      { background: linear-gradient(135deg, #fdf3f7 0%, #f7dde7 100%) !important; }

/* Category text inside light CMS panels */
.ced-cms__cat-name,
.ced-cms__cat-num,
.ced-cms__cat-desc,
.ced-cms-card__name,
.ced-cms-card__hint {
	color: var(--wp--preset--color--ink) !important;
}
.ced-cms__cat-desc { opacity: 0.7; }

/* Inner platform cards inside CMS bento — white with subtle border */
.ced-cms-card {
	background: rgba(255, 255, 255, 0.85) !important;
	border-color: rgba(20, 20, 28, 0.08) !important;
}

/* Trust strip chips on cream */
.ced-trust-strip__chip {
	background: rgba(255, 255, 255, 0.72) !important;
}
.ced-trust-strip__chip svg { color: var(--wp--preset--color--ink); }

/* Process step numbers — keep brand accent */
.ced-process__step-num {
	color: var(--wp--preset--color--lime);
}

/* Lead-form fields readable on cream */
.ced-lead input[type="text"],
.ced-lead input[type="email"],
.ced-lead input[type="tel"],
.ced-lead input[type="url"],
.ced-lead textarea,
.ced-lead select {
	background: rgba(255, 255, 255, 0.8) !important;
	color: var(--wp--preset--color--ink) !important;
	border: 1px solid rgba(20, 20, 28, 0.18) !important;
}
.ced-lead label,
.ced-lead__field-label {
	color: var(--wp--preset--color--ink) !important;
}

/* Generic links inside flipped sections — keep brand purple, darken hover */
.ced-trust-strip a,
.ced-cms a,
.ced-services a,
.ced-process a,
.ced-lead a {
	color: var(--wp--preset--color--lime);
}

/* ====================================================================
   END PLAN B BLOCK
   ==================================================================== */

/* ── Plan B detail fixes — chip text + icon colors on flipped sections ── */
.ced-trust-strip__chip,
.ced-trust-strip__chip > span,
.ced-trust-strip__chip-label {
	color: var(--wp--preset--color--ink) !important;
}
.ced-trust-strip__chip svg,
.ced-trust-strip__chip-icon {
	color: var(--wp--preset--color--ink) !important;
	opacity: 0.75;
}
.ced-trust-strip__chip {
	background: rgba(255, 255, 255, 0.85) !important;
	border: 1px solid rgba(20, 20, 28, 0.10) !important;
}




/* ====================================================================
   Reusable AURORA background
   Drop two .ced-aurora__blob spans inside a .ced-aurora container at
   the top of any dark hero. The keyframes are shared; each hero may
   supply its own --aurora-accent (defaults to brand purple). Used by
   contact-hero, services-hub, work-archive, project-hero. Platform-
   hero has its own copy so its blobs derive from --platform-accent.
   ==================================================================== */
.ced-aurora {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	overflow: hidden;
}
.ced-aurora__blob {
	position: absolute;
	display: block;
	border-radius: 50%;
	background: var(--aurora-accent, var(--platform-accent, var(--wp--preset--color--lime)));
	filter: blur(60px);
	will-change: transform, opacity;
}
.ced-aurora__blob--1 {
	width: 50vmax;
	aspect-ratio: 1;
	top: -20%;
	right: -15%;
	animation:
		ced-aurora-intro 1.4s cubic-bezier(0.22, 1, 0.36, 1) both,
		ced-aurora-drift-1 12s ease-in-out infinite 1.4s;
}
.ced-aurora__blob--2 {
	width: 35vmax;
	aspect-ratio: 1;
	bottom: -30%;
	left: -15%;
	animation:
		ced-aurora-intro 1.6s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both,
		ced-aurora-drift-2 14s ease-in-out infinite 1.75s;
}

@keyframes ced-aurora-intro {
	0%   { transform: translate3d(0, 0, 0) scale(0.5); opacity: 0; }
	60%  { opacity: 0.32; }
	100% { transform: translate3d(0, 0, 0) scale(1);   opacity: 0.20; }
}
@keyframes ced-aurora-drift-1 {
	0%, 100% { transform: translate3d(0, 0, 0) scale(1);        opacity: 0.20; }
	25%      { transform: translate3d(-22%, 14%, 0) scale(1.15); opacity: 0.30; }
	50%      { transform: translate3d(8%, -18%, 0) scale(0.90);  opacity: 0.14; }
	75%      { transform: translate3d(-14%, -8%, 0) scale(1.05); opacity: 0.24; }
}
@keyframes ced-aurora-drift-2 {
	0%, 100% { transform: translate3d(0, 0, 0) scale(1);        opacity: 0.14; }
	33%      { transform: translate3d(25%, -16%, 0) scale(1.20); opacity: 0.24; }
	66%      { transform: translate3d(-12%, 10%, 0) scale(0.92); opacity: 0.10; }
}

/* Any element with .ced-aurora__inner sits above the aurora layer. */
.ced-aurora__inner { position: relative; z-index: 1; }

/* Auto-lift: every sibling that comes AFTER .ced-aurora inside a section
   gets pushed above the aurora layer. Without this, content sits at the
   same painting level as the aurora (auto = 0) and the soft blurred
   blobs wash out body type contrast — especially the giant display H1s
   that should be paper-cream on ink-dark. */
.ced-aurora ~ * { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
	.ced-aurora__blob { animation: none !important; }
}


/* ====================================================================
   PLAN B EXTENSIONS — light-forward across other pages + templates
   The homepage's "lift to cream" pattern applied beyond /home.
   - Flips dark-editorial blocks across about, contact, services, work,
     work archive, and case-study templates to a cream base.
   - Heroes keep their aurora (now reads as soft watercolor washes on
     cream — a chromatic signature without darkness).
   - Platform pages (.ced-phero, .ced-pspot) and the Stack Pressure
     Test page stay dark — those rely on native brand accents that
     don't read on cream.
   - Marquee, parallax, testimonials, footer stay dark as accent
     moments (same rule as homepage Plan B).
   ==================================================================== */

/* ---- Section backgrounds flipped to cream + light-context tokens ---- */
.ced-chero,
.ced-shub,
.ced-warch,
.ced-aspread,
.ced-project-hero,
.ced-project-summary,
.ced-project-stats,
.ced-narrative,
.ced-project-gallery,
.ced-pnav,
.ced-related,
.ced-faq {
	background: var(--wp--preset--color--cream) !important;
	color: var(--wp--preset--color--ink) !important;
	/* Token overrides — lines and veils inverted for light context. */
	--ced-line-04: rgba(20, 20, 28, 0.04);
	--ced-line-06: rgba(20, 20, 28, 0.06);
	--ced-line-08: rgba(20, 20, 28, 0.08);
	--ced-line-10: rgba(20, 20, 28, 0.10);
	--ced-line-12: rgba(20, 20, 28, 0.12);
	--ced-line-14: rgba(20, 20, 28, 0.14);
	--ced-line-16: rgba(20, 20, 28, 0.16);
	--ced-line-18: rgba(20, 20, 28, 0.18);
	--ced-line-20: rgba(20, 20, 28, 0.20);
	--ced-veil-08: rgba(20, 20, 28, 0.04);
	--ced-veil-65: rgba(255, 255, 255, 0.65);
}

/* Related-work uses its own border colour separately. */
.ced-related {
	border-color: rgba(20, 20, 28, 0.10) !important;
}

/* Strip dark fade/radial overlays that read as smudges on cream. */
.ced-chero::before,
.ced-project-hero::before,
.ced-shub::before,
.ced-warch::before { opacity: 0 !important; }

/* ---- Headings inside flipped sections ---- */
.ced-chero :is(h1, h2, h3, h4, h5, h6),
.ced-shub :is(h1, h2, h3, h4, h5, h6),
.ced-warch :is(h1, h2, h3, h4, h5, h6),
.ced-aspread :is(h1, h2, h3, h4, h5, h6),
.ced-project-hero :is(h1, h2, h3, h4, h5, h6),
.ced-project-summary :is(h1, h2, h3, h4, h5, h6),
.ced-project-stats :is(h1, h2, h3, h4, h5, h6),
.ced-narrative :is(h1, h2, h3, h4, h5, h6),
.ced-project-gallery :is(h1, h2, h3, h4, h5, h6),
.ced-pnav :is(h1, h2, h3, h4, h5, h6),
.ced-related :is(h1, h2, h3, h4, h5, h6),
.ced-faq :is(h1, h2, h3, h4, h5, h6) {
	color: var(--wp--preset--color--ink) !important;
}

/* Hero italic accent line — the serif-display second line on every hero
   block. Keep it brand purple so it pops on cream just like accent words
   pop on dark, and italic display still feels editorial. */
.ced-chero__title em,
.ced-shub__title em,
.ced-warch__title em,
.ced-project-hero__title em,
.ced-phero__line--accent {
	color: var(--wp--preset--color--lime);
}

/* ---- Eyebrows + monospace metadata softer ash, accent dot keeps lime ---- */
.ced-chero .ced-eyebrow,
.ced-shub .ced-eyebrow,
.ced-warch .ced-eyebrow,
.ced-aspread .ced-eyebrow,
.ced-project-hero .ced-eyebrow,
.ced-project-summary .ced-eyebrow,
.ced-project-stats .ced-eyebrow,
.ced-narrative .ced-eyebrow,
.ced-project-gallery .ced-eyebrow,
.ced-pnav .ced-eyebrow,
.ced-related .ced-eyebrow,
.ced-faq .ced-eyebrow {
	color: var(--wp--preset--color--ash) !important;
}

/* ---- Body + lede text — readable ink at slightly reduced contrast ---- */
.ced-chero :is(p, .ced-chero__lede, .ced-chero__intro),
.ced-shub :is(p, .ced-shub__lede),
.ced-warch :is(p, .ced-warch__lede),
.ced-aspread :is(p, .ced-aspread__lede, .ced-aspread__disc-back-label),
.ced-project-hero :is(p, .ced-project-hero__lede),
.ced-project-summary p,
.ced-project-stats p,
.ced-narrative :is(p, .ced-narrative__lede),
.ced-project-gallery :is(p, .ced-project-gallery__lede),
.ced-pnav p,
.ced-related p,
.ced-faq :is(p, .ced-faq__a) {
	color: rgba(20, 20, 28, 0.72) !important;
}

/* ---- Cards / panels inside flipped sections ---- */
.ced-shub__card,
.ced-warch__card,
.ced-aspread__chapter,
.ced-aspread__disc,
.ced-aspread__pillar,
.ced-deck__card,
.ced-narrative__card,
.ced-project-stats__stat,
.ced-project-gallery__tile,
.ced-pnav__card,
.ced-related__item,
.ced-faq__item {
	background: rgba(255, 255, 255, 0.65) !important;
	border-color: rgba(20, 20, 28, 0.10) !important;
	color: var(--wp--preset--color--ink) !important;
}
.ced-shub__card:hover,
.ced-warch__card:hover,
.ced-pnav__card:hover,
.ced-related__item:hover,
.ced-aspread__disc:hover,
.ced-aspread__pillar:hover {
	background: rgba(255, 255, 255, 0.92) !important;
}

/* About-spread hover-reveal disciplines — the back-face has a coloured
   panel. Light context wants a translucent cream rather than full dark. */
.ced-aspread__disc-back {
	background: rgba(255, 255, 255, 0.96) !important;
	color: var(--wp--preset--color--ink) !important;
}
.ced-aspread__disc-icon {
	color: var(--wp--preset--color--ink) !important;
}

/* ---- Hero CTAs / channels / promise tiles on cream ---- */
.ced-chero__channel,
.ced-chero__promise {
	background: rgba(255, 255, 255, 0.65) !important;
	border-color: rgba(20, 20, 28, 0.16) !important;
	color: var(--wp--preset--color--ink) !important;
}
.ced-chero__channel:hover,
.ced-chero__promise:hover {
	background: rgba(255, 255, 255, 0.92) !important;
	color: var(--wp--preset--color--ink) !important;
}
.ced-chero__channel--book {
	background: var(--wp--preset--color--ink) !important;
	color: var(--wp--preset--color--paper) !important;
}
.ced-chero__channel--book:hover {
	background: var(--wp--preset--color--lime) !important;
	color: var(--wp--preset--color--ink) !important;
}
.ced-chero__channel--book .ced-eyebrow {
	color: rgba(244, 242, 238, 0.7) !important;
}
.ced-chero__channel--book .ced-eyebrow::before {
	background: var(--wp--preset--color--lime) !important;
}

/* Hero promise number accents — keep their per-tile colours from existing
   CSS (lime/coral/sky/lavender) but ensure the number reads vibrant on cream. */
.ced-chero__num { opacity: 1 !important; }

/* ---- Work-archive filter chips ---- */
.ced-warch__chip {
	background: rgba(255, 255, 255, 0.7) !important;
	border-color: rgba(20, 20, 28, 0.10) !important;
	color: var(--wp--preset--color--ink) !important;
}
.ced-warch__chip:hover {
	background: rgba(255, 255, 255, 0.92) !important;
}
.ced-warch__chip.is-active {
	background: var(--wp--preset--color--ink) !important;
	color: var(--wp--preset--color--paper) !important;
}
.ced-warch__chip.is-active .ced-warch__chip-count {
	color: rgba(244, 242, 238, 0.7) !important;
}
.ced-warch__chip-count {
	color: rgba(20, 20, 28, 0.55) !important;
}

/* ---- Work-archive grid card overlay — currently uses paper-on-veil
   gradients keyed to a dark base. On cream, the card's image stays but
   the meta strip below needs ink text. The card itself is already part
   of the cards rule above; here we make sure the meta legibly reads. */
.ced-warch__card-meta,
.ced-warch__card-title,
.ced-warch__card-plat,
.ced-warch__card-result {
	color: var(--wp--preset--color--ink) !important;
}
.ced-warch__card-meta { color: rgba(20, 20, 28, 0.6) !important; }

/* ---- Project-hero stats sidebar ---- */
.ced-project-hero__stats > div {
	background: rgba(255, 255, 255, 0.7) !important;
	border-color: rgba(20, 20, 28, 0.10) !important;
}
.ced-project-hero__stats dt {
	color: var(--wp--preset--color--ink) !important;
}
.ced-project-hero__stats dd {
	color: rgba(20, 20, 28, 0.55) !important;
}

/* ---- Project nav (prev/next) card surfaces ---- */
.ced-pnav__label,
.ced-pnav__meta {
	color: rgba(20, 20, 28, 0.6) !important;
}

/* ---- FAQ block — Q text + accordion icon on cream ---- */
.ced-faq__q {
	color: var(--wp--preset--color--ink) !important;
}
.ced-faq__num {
	color: rgba(20, 20, 28, 0.45) !important;
}
.ced-faq__icon {
	color: var(--wp--preset--color--ink) !important;
}

/* ---- Generic links inside flipped sections — brand purple ---- */
.ced-chero a:not(.ced-btn):not(.ced-chero__channel):not(.ced-chero__channel--book),
.ced-shub a:not(.ced-btn):not(.ced-shub__card),
.ced-warch a:not(.ced-btn):not(.ced-warch__card),
.ced-aspread a:not(.ced-btn),
.ced-project-hero a:not(.ced-btn),
.ced-project-summary a:not(.ced-btn),
.ced-project-stats a:not(.ced-btn),
.ced-narrative a:not(.ced-btn),
.ced-project-gallery a:not(.ced-btn),
.ced-pnav a:not(.ced-btn):not(.ced-pnav__card),
.ced-related a:not(.ced-btn):not(.ced-related__item),
.ced-faq a:not(.ced-btn) {
	color: var(--wp--preset--color--lime) !important;
}

/* ---- Hero ghost buttons — invert (dark border + ink text on cream) ---- */
.ced-chero .ced-btn--ghost,
.ced-shub .ced-btn--ghost,
.ced-project-hero .ced-btn--ghost {
	color: var(--wp--preset--color--ink) !important;
	border-color: rgba(20, 20, 28, 0.40) !important;
}
.ced-chero .ced-btn--ghost:hover,
.ced-shub .ced-btn--ghost:hover,
.ced-project-hero .ced-btn--ghost:hover {
	background: var(--wp--preset--color--ink) !important;
	color: var(--wp--preset--color--paper) !important;
}

/* ====================================================================
   END PLAN B EXTENSIONS
   ==================================================================== */


/* ────────────────────────────────────────────────────────────────────
   Plan B extension — case-study inner panels.
   The project hero result panel and the side rail (Stack/Facts/Metric/
   Phases) were styled as dark cards on a dark page. Now that the page
   is cream, they need to flip to light cards too — otherwise they read
   as random dark interruptions in the editorial flow.
   ──────────────────────────────────────────────────────────────────── */
.ced-project-hero__result,
.ced-side-panel,
.ced-side-panel--stack,
.ced-side-panel--facts,
.ced-side-panel--metric,
.ced-side-panel--phases {
	background: rgba(255, 255, 255, 0.7) !important;
	border-color: rgba(20, 20, 28, 0.10) !important;
	color: var(--wp--preset--color--ink) !important;
}

/* Headline result panel inside the project hero — ink type, brand-purple
   eyebrow accent dot already comes from theme tokens. */
.ced-project-hero__result :is(p, span:not(.ced-eyebrow)) {
	color: rgba(20, 20, 28, 0.78) !important;
}

/* Stack chips were dark veil + paper text — flip to white-ish chips on
   the new light panel so the stack list scans cleanly. */
.ced-side-panel__chips li {
	background: rgba(20, 20, 28, 0.06) !important;
	color: var(--wp--preset--color--ink) !important;
	border-color: rgba(20, 20, 28, 0.10) !important;
}

/* Side-panel definition lists (At a glance) — terms in ink, values in ink */
.ced-side-panel dt, .ced-side-panel dd, .ced-side-panel li {
	color: var(--wp--preset--color--ink) !important;
}
.ced-side-panel dt { color: rgba(20, 20, 28, 0.55) !important; }

/* HEADLINE METRIC big number — keep brand purple punch */
.ced-side-panel--metric :is(dt, .ced-side-panel__metric-value) {
	color: var(--wp--preset--color--lime) !important;
}
.ced-side-panel--metric :is(dd, .ced-side-panel__metric-label) {
	color: rgba(20, 20, 28, 0.55) !important;
}

/* "ON THIS PAGE" rail — links and numbers ink, active item ink-on-cream */
.ced-side-panel--phases :is(li, a) {
	color: var(--wp--preset--color--ink) !important;
}

/* Industry pill in project hero (was paper text on faint ink) — flip to ink text on faint ink */
.ced-project-hero__industry {
	color: var(--wp--preset--color--ink) !important;
}

/* Project hero crumbs row — keep the metadata legible on cream */
.ced-project-hero__year,
.ced-project-hero__platform {
	color: rgba(20, 20, 28, 0.6) !important;
}


/* Narrative + project-summary use a sticky-stack pattern — each card pins
   as the user scrolls and the next one slides up over it. The translucent
   card background from the cards rule above lets the previous card's text
   bleed through. Force those specific cards opaque (they're the ones in
   the deck stack — sibling sticky cards). */
.ced-narrative__card,
.ced-deck__card {
	background: #ffffff !important;
	box-shadow: 0 1px 2px rgba(20, 20, 28, 0.04), 0 8px 24px rgba(20, 20, 28, 0.06) !important;
}


/* Plan B — lead-form contrast bumps.
   The bullet list ("Reply within one business day" etc.) and the
   "PREFER EMAIL?" monospace label were tinted mist/fog (designed for the
   ink base). On cream they read as faded sticky-note text. Bring them
   up to the same ink-at-72%/55% contrast scale the rest of Plan B uses. */
.ced-lead__bullets {
	color: rgba(20, 20, 28, 0.78) !important;
}
.ced-lead__bullets li {
	color: rgba(20, 20, 28, 0.78) !important;
}
/* The triangle bullet dots — keep them brand purple but vivid */
.ced-lead__bullets li svg,
.ced-lead__bullets li::before {
	color: var(--wp--preset--color--lime) !important;
	opacity: 1 !important;
}

/* "PREFER EMAIL?" monospace label */
.ced-lead__direct span {
	color: rgba(20, 20, 28, 0.55) !important;
}

/* Direct email anchor — brand purple, underlined */
.ced-lead__direct a {
	color: var(--wp--preset--color--lime) !important;
}

/* Eyebrow's leading dash needs to read on cream too */
.ced-lead .ced-eyebrow::before {
	background: var(--wp--preset--color--lime) !important;
}

/* The "By sending, you agree…" fine-print under the form */
.ced-lead__consent,
.ced-lead__legal,
.ced-lead__fineprint {
	color: rgba(20, 20, 28, 0.55) !important;
}


/* Plan B — project-nav (prev / next case study cards) fixes.
   - .ced-pnav__title is a <span>, so the heading override never caught
     it. It was still paper-cream on cream — effectively invisible.
   - The card's max-width:16ch on the title left big dead space next to a
     wrapping meta description at the 1440px breakpoint. Relax that and
     tighten the meta typography so the card reads as a proper card. */
.ced-pnav__title {
	color: var(--wp--preset--color--ink) !important;
	font-weight: 600 !important;
	max-width: none !important;
}

.ced-pnav__label {
	/* Direction chip keeps its brand purple voice on cream */
	color: var(--wp--preset--color--lime) !important;
}

/* The result/meta description (uppercase mono spans). On dark base it
   was fog (~rgb(160,160,168)); on cream it has to be a soft ink so it
   doesn't overpower the title but still reads at typeface size. */
.ced-pnav__meta,
.ced-pnav__meta span {
	color: rgba(20, 20, 28, 0.55) !important;
}
.ced-pnav__result {
	color: var(--wp--preset--color--lime) !important;
}

/* Background thumb watermark — keep it as faint art that hints the
   destination project's hero image. On cream the existing 0.16 opacity
   reads as a milky smear, so we de-saturate it and bias toward the page
   tone for a quieter postcard feel. */
.ced-pnav__thumb {
	opacity: 0.10 !important;
	filter: blur(3px) saturate(0.7) !important;
	mix-blend-mode: multiply;
}
.ced-pnav__card:hover .ced-pnav__thumb {
	opacity: 0.18 !important;
}

/* "ALL PROJECTS" pill — ink + brand-purple on hover */
.ced-pnav__all {
	color: rgba(20, 20, 28, 0.78) !important;
	border-color: rgba(20, 20, 28, 0.18) !important;
}
.ced-pnav__all:hover {
	color: var(--wp--preset--color--lime) !important;
	border-color: var(--wp--preset--color--lime) !important;
}

/* Card layout cleanup — give title a clear hierarchy beat by bumping
   its display size and tightening the gap to its meta. Limits the meta
   line count so cards stay roughly equal height. */
.ced-pnav__card {
	gap: 0.6rem !important;
}
.ced-pnav__title {
	font-size: clamp(1.5rem, 2.6vw, 2rem) !important;
	line-height: 1.05 !important;
	margin-bottom: 0.4rem;
}
.ced-pnav__meta {
	gap: 0.35rem 1rem !important;
	line-height: 1.55 !important;
}


/* Plan B — project-nav card orientation rebuild.
   The card root resolved to display:flex (likely from the touch
   inline-flex rule). That arranged Label / Title / Meta in a horizontal
   row instead of stacking them. Force a deterministic grid layout so
   the card reads as a proper card: label top, title middle (the hero),
   meta bottom. Next card mirrors via right alignment.
   Limits the meta line count so prev/next cards stay roughly equal
   height, and gives the whole card a satisfying min-height regardless
   of result-string length. */
.ced-pnav__card {
	display: grid !important;
	grid-template-rows: auto 1fr auto !important;
	grid-auto-flow: row !important;
	align-items: start !important;
	gap: 1rem !important;
	min-height: 200px !important;
	padding: clamp(1.5rem, 2.4vw, 2.25rem) !important;
}

/* Each child claims a single row so they never fight on a flex axis. */
.ced-pnav__label  { grid-row: 1; }
.ced-pnav__title  { grid-row: 2; align-self: center; }
.ced-pnav__meta   { grid-row: 3; }

/* Prev/next mirror: prev stays left, next pushes its children to the
   right edge of the row. */
.ced-pnav__card--prev .ced-pnav__label,
.ced-pnav__card--prev .ced-pnav__title,
.ced-pnav__card--prev .ced-pnav__meta {
	justify-self: start !important;
	margin-left: 0 !important;
}
.ced-pnav__card--next .ced-pnav__label,
.ced-pnav__card--next .ced-pnav__title,
.ced-pnav__card--next .ced-pnav__meta {
	justify-self: end !important;
	margin-left: auto !important;
}

/* Meta — wrap into max 2 lines so cards stay visually balanced. */
.ced-pnav__meta {
	display: flex !important;
	flex-wrap: wrap !important;
	max-width: 36ch;
	align-items: baseline;
}
.ced-pnav__card--next .ced-pnav__meta {
	justify-content: flex-end !important;
	text-align: right;
}


/* Plan B — project-stats divider color rescue.
   The stat cells stayed dark graphite as a deliberate "stats bar" focal
   moment on the cream section. But the grid uses --ced-line-08 for its
   divider colour, and Plan B re-tints that token to dark-ink-on-light
   for the section — which renders as invisible hairlines on the dark
   cells (especially the 3rd divider, which JPEG kills entirely).
   Reset the grid bg + border to a light hairline tuned for dark cells. */
.ced-project-stats__grid {
	background: rgba(232, 229, 222, 0.12) !important;
	border-color: rgba(232, 229, 222, 0.10) !important;
	gap: 1px !important;
}


/* Plan B — work-archive cards: restore paper text on dark tone variants.
   The shared .ced-card variants come in two flavours:
   - ced-card--paper: cream background, ink text (works on cream section)
   - ced-card--sand/ink/forest/rose/graphite: dark gradient backgrounds
     that need PAPER text. Plan B's blanket heading-to-ink override flipped
     the H3 title (and other content) to ink, which renders invisible on
     the dark gradient. Scope the dark-tone variants back to paper text. */
/* Chain .ced-warch + tone class + element class so specificity (0,3,1)
   beats the blanket .ced-warch :is(h1..h6) (0,1,1) rule above. */
.ced-warch .ced-card--sand     .ced-card__title,
.ced-warch .ced-card--ink      .ced-card__title,
.ced-warch .ced-card--forest   .ced-card__title,
.ced-warch .ced-card--rose     .ced-card__title,
.ced-warch .ced-card--graphite .ced-card__title,
.ced-warch .ced-card--sand     .ced-card__platform,
.ced-warch .ced-card--ink      .ced-card__platform,
.ced-warch .ced-card--forest   .ced-card__platform,
.ced-warch .ced-card--rose     .ced-card__platform,
.ced-warch .ced-card--graphite .ced-card__platform,
.ced-warch .ced-card--sand     .ced-card__view,
.ced-warch .ced-card--ink      .ced-card__view,
.ced-warch .ced-card--forest   .ced-card__view,
.ced-warch .ced-card--rose     .ced-card__view,
.ced-warch .ced-card--graphite .ced-card__view {
	color: var(--wp--preset--color--paper) !important;
}
/* Result line uses the per-card --card-accent for a chromatic punch */
.ced-warch .ced-card--sand     .ced-card__result,
.ced-warch .ced-card--ink      .ced-card__result,
.ced-warch .ced-card--forest   .ced-card__result,
.ced-warch .ced-card--rose     .ced-card__result,
.ced-warch .ced-card--graphite .ced-card__result {
	color: var(--card-accent) !important;
}
/* Industry sub-tag stays mid-tone on dark — fog grey is the original */
.ced-warch .ced-card--sand     .ced-card__industry,
.ced-warch .ced-card--ink      .ced-card__industry,
.ced-warch .ced-card--forest   .ced-card__industry,
.ced-warch .ced-card--rose     .ced-card__industry,
.ced-warch .ced-card--graphite .ced-card__industry {
	color: var(--wp--preset--color--fog) !important;
}


/* Plan B — related-work block: restore dark graphite card.
   .ced-related appears on platform pages (which stay dark) and case
   studies (which went cream). Plan B's blanket section-flip turned the
   block's outer to cream — but the inner item title (.ced-related__title)
   is a <div>, not an <h*>, so the heading-to-ink rule missed it. Result:
   paper-cream title on cream background = invisible.
   Easier fix than chasing every inner span: revert this block to its
   original dark graphite card. On cream pages it reads as a focal panel.
   On platform pages it matches the surrounding dark aesthetic. The brand
   purple platform tag pops more vividly on dark either way. */
.ced-related,
.ced-warch .ced-related,
.ced-aspread .ced-related,
.ced-project-summary .ced-related,
.ced-project-stats .ced-related,
.ced-narrative .ced-related,
.ced-project-gallery .ced-related,
.ced-pnav .ced-related,
.ced-faq .ced-related,
.ced-chero .ced-related,
.ced-shub .ced-related,
.ced-project-hero .ced-related {
	background: var(--wp--preset--color--graphite) !important;
	color: var(--wp--preset--color--paper) !important;
	border-color: rgba(232, 229, 222, 0.08) !important;
}

/* Inner item text — restore originals (paper title, mist body, lime plat). */
.ced-related__title,
.ced-related .ced-related__title {
	color: var(--wp--preset--color--paper) !important;
	font-weight: 500;
}
.ced-related__result,
.ced-related .ced-related__result {
	color: var(--wp--preset--color--mist) !important;
}
.ced-related__plat,
.ced-related .ced-related__plat {
	color: var(--wp--preset--color--lime) !important;
	font-weight: 600;
}
.ced-related__all,
.ced-related .ced-related__all {
	color: var(--wp--preset--color--mist) !important;
	border-color: rgba(232, 229, 222, 0.16) !important;
}
.ced-related__all:hover {
	color: var(--wp--preset--color--lime) !important;
	border-color: var(--wp--preset--color--lime) !important;
}

/* Eyebrow on the related-work head row */
.ced-related .ced-eyebrow {
	color: var(--wp--preset--color--fog) !important;
}
.ced-related .ced-eyebrow::before {
	background: var(--wp--preset--color--lime) !important;
}

/* Item hover background — subtle paper veil */
.ced-related__item:hover {
	background: rgba(232, 229, 222, 0.04) !important;
}

/* Thumbnail tile */
.ced-related__thumb {
	background-color: rgba(232, 229, 222, 0.06) !important;
	color: var(--wp--preset--color--paper) !important;
}


/* Plan B — related-work item RESET.
   The "cards inside flipped sections" rule earlier in Plan B added a
   translucent white background to .ced-related__item, which was right
   for cream contexts but wrong now that the block is back to dark
   graphite. Force the items transparent so they sit cleanly on the
   graphite panel, restore mist-grey description text, and ensure the
   thumbnail tile + initials letter both read as paper-on-dark. */
.ced-related__item,
.ced-related .ced-related__item {
	background: transparent !important;
	border: 0 !important;
	color: var(--wp--preset--color--paper) !important;
	padding: 0.6rem !important;
}
.ced-related__item:hover,
.ced-related .ced-related__item:hover {
	background: rgba(232, 229, 222, 0.05) !important;
	transform: translateX(2px);
}

/* Description text — both <p> and <div class="ced-related__result">.
   The Plan B paragraph rule above wanted ink-at-72%; that's invisible on
   the dark item row. Restore mist grey, no !important fight from <p>. */
.ced-related .ced-related__result,
.ced-related p,
.ced-related .ced-related__item p {
	color: var(--wp--preset--color--mist) !important;
	background: transparent !important;
}

/* Avatar / initials tile sits to the left of each item. Restore the
   subtle stone tile with paper letter centered. */
.ced-related .ced-related__thumb {
	background-color: rgba(232, 229, 222, 0.05) !important;
	color: var(--wp--preset--color--paper) !important;
	border: 1px solid rgba(232, 229, 222, 0.06) !important;
}


/* ====================================================================
   BONANZA TREATMENT — full poster mode + curved sections + scribbles
   Inspired by bonanza-events.webflow.io. Three moves:
   1. Anton (condensed all-caps geometric) takes over every headline,
      section title, card title, eyebrow, and button label. Body type
      stays Geist/Inter for readability.
   2. Section transitions get a rounded top + negative-margin overlap
      so each section "rises" off the one before it.
   3. Hand-drawn SVG scribble decorations float in cream sections as
      visual punctuation.
   ==================================================================== */

/* Typography — reverted to OS-native system-UI stack.
   No custom web fonts: every visitor sees the native UI font their
   operating system already optimised for screen rendering (SF Pro on
   macOS, Segoe UI on Windows, Roboto/Ubuntu/etc on Linux). Zero font
   downloads, zero rendering inconsistencies, instant first paint.
   The @font-face declarations for Anton / Geist / JetBrains Mono /
   Newsreader and their woff2 files have been removed. */

/* Cross-OS font rendering normalization — without these, Windows
   sub-pixel ClearType can produce halo/doubled strokes on the
   condensed Anton title and Geist variable weights, while macOS uses
   its own grayscale anti-aliasing by default. Forcing the same path
   on both keeps the rendering consistent. */
html {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

:root {
	--font-display: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
	--section-curve: clamp(2rem, 4vw, 3.5rem);
}

/* ---- Display font takeover ----
   Headings, eyebrows, card titles, CTAs all flip to Anton. */
h1, h2, h3, h4,
.ced-hero__headline,
.ced-phero__headline,
.ced-phero__line,
.ced-chero__title,
.ced-shub__title,
.ced-shub__name,
.ced-warch__title,
.ced-warch__chip,
.ced-aspread__chapter-h,
.ced-aspread__disc-face strong,
.ced-aspread__pillar h3,
.ced-project-hero__title,
.ced-project-stats__title,
.ced-project-summary__h, .ced-deck__h,
.ced-narrative__h, .ced-narrative__card h3,
.ced-project-gallery__title,
.ced-pnav__title-h, .ced-pnav__title,
.ced-related__title,
.ced-card__title,
.ced-cms__title, .ced-cms__cat-name,
.ced-services__title, .ced-services__card h3,
.ced-process__title, .ced-process__step h3,
.ced-lead__title,
.ced-trust-strip__title,
.ced-faq__title, .ced-faq__q,
.ced-tests__title,
.ced-spt__title,
.ced-eyebrow,
.ced-btn,
.ced-btn--primary, .ced-btn--ghost,
.ced-phero__cta {
	font-family: var(--font-display) !important;
	font-weight: 400 !important;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	line-height: 0.92;
}

/* Eyebrows want tighter tracking + smaller scale, NOT the giant headline
   line-height. Reset just those properties. */
.ced-eyebrow {
	letter-spacing: 0.12em !important;
	line-height: 1.2 !important;
}

/* Buttons keep the headline weight but readable tracking + line height */
.ced-btn,
.ced-btn--primary, .ced-btn--ghost,
.ced-phero__cta {
	letter-spacing: 0.04em !important;
	line-height: 1 !important;
}

/* The serif-display italic accent line in platform-hero is the one
   exception — keep it serif italic. Anton-everywhere would lose the
   editorial italic moment. */
.ced-phero__line--accent {
	font-family: var(--wp--preset--font-family--serif-display) !important;
	font-style: italic !important;
	text-transform: none !important;
	letter-spacing: -0.02em !important;
}

/* Card chips, tags, filter pills — pop on cream + dark equally */
.ced-warch__chip {
	letter-spacing: 0.08em !important;
	text-transform: uppercase;
	font-weight: 400;
}

/* ---- Curved section transitions ----
   Each section after the first lifts off the previous one with a
   rounded top + slight overlap. Same-colour neighbours hide the
   curve visually (the rounded top is the same colour as what's
   behind it) so the effect only "blooms" at dark↔cream boundaries.
   Z-index ladder so later sections sit above earlier ones. */
main > section + section,
main > .wp-block-group > section + section,
main > section.wp-block-cmsexpertdev-platform-spotlight,
main > section.wp-block-cmsexpertdev-services,
main > section.wp-block-cmsexpertdev-cms-showcase,
main > section.wp-block-cmsexpertdev-process,
main > section.wp-block-cmsexpertdev-lead-form,
main > section.wp-block-cmsexpertdev-testimonials,
main > section.wp-block-cmsexpertdev-trust-strip,
main > section.wp-block-cmsexpertdev-about-spread,
main > section.wp-block-cmsexpertdev-project-summary,
main > section.wp-block-cmsexpertdev-project-narrative,
main > section.wp-block-cmsexpertdev-project-stats,
main > section.wp-block-cmsexpertdev-project-gallery,
main > section.wp-block-cmsexpertdev-project-nav,
main > section.wp-block-cmsexpertdev-faq,
main > section.wp-block-cmsexpertdev-work-archive,
main > section.wp-block-cmsexpertdev-contact-hero ~ section,
main > section.wp-block-cmsexpertdev-services-hub ~ section {
	border-top-left-radius:  var(--section-curve);
	border-top-right-radius: var(--section-curve);
	margin-top: calc(-1 * var(--section-curve));
	position: relative;
	z-index: 2;
}

/* The full-bleed sections still need overflow-clip so the curve
   actually shows. */
.ced-trust-strip, .ced-cms, .ced-services, .ced-process, .ced-lead,
.ced-aspread, .ced-project-summary, .ced-narrative, .ced-project-stats,
.ced-project-gallery, .ced-pnav, .ced-faq, .ced-warch, .ced-shub,
.ced-chero, .ced-project-hero, .ced-tests, .ced-marquee, .ced-parallax {
	overflow: hidden;
}

/* ---- Hand-drawn SVG scribble decorations ----
   .ced-scribble drops a decorative mark anywhere it's placed.
   Variants 1-4 pick from a small library of squiggles. They sit as
   ::before pseudo-elements on hand-picked container spots. */
.ced-scribble {
	position: relative;
}
.ced-scribble::before {
	content: "";
	position: absolute;
	pointer-events: none;
	width: clamp(60px, 7vw, 120px);
	aspect-ratio: 1;
	opacity: 0.65;
	z-index: 0;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}
.ced-scribble--curl::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M15 70 Q 20 30, 50 30 Q 80 30, 75 60 Q 70 85, 40 80 Q 15 75, 25 50' stroke='%2314141C' stroke-width='4' stroke-linecap='round' fill='none' opacity='0.75'/%3E%3C/svg%3E");
	top: -10%;
	left: -8%;
}
.ced-scribble--zigzag::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M10 50 Q 25 20, 40 50 T 70 50 T 90 50' stroke='%2314141C' stroke-width='4' stroke-linecap='round' fill='none' opacity='0.7'/%3E%3C/svg%3E");
	bottom: -5%;
	right: -8%;
	transform: rotate(15deg);
}
.ced-scribble--swirl::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 20 Q 80 30, 75 55 Q 70 80, 40 75 Q 15 70, 25 45 Q 35 25, 60 35' stroke='%2314141C' stroke-width='4' stroke-linecap='round' fill='none' opacity='0.7'/%3E%3C/svg%3E");
	top: 20%;
	right: 8%;
	transform: rotate(-12deg);
}
.ced-scribble--wave::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M10 60 Q 30 20, 50 60 Q 70 100, 90 60' stroke='%2314141C' stroke-width='4' stroke-linecap='round' fill='none' opacity='0.7'/%3E%3C/svg%3E");
	bottom: 10%;
	left: 5%;
	transform: rotate(-8deg);
}

/* Auto-place scribbles in a few hand-picked sections.
   Sections that are cream get a darker scribble (already drawn in ink),
   dark sections get a paper scribble (override fill colour via filter
   that inverts the SVG colour for dark base). */
.ced-aspread, .ced-cms, .ced-services, .ced-process,
.ced-project-summary, .ced-narrative, .ced-faq, .ced-warch {
	position: relative;
}
.ced-aspread::before,
.ced-services::before,
.ced-narrative::before {
	content: "";
	position: absolute;
	top: 8%;
	right: 4%;
	width: clamp(60px, 8vw, 110px);
	aspect-ratio: 1;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M15 70 Q 20 30, 50 30 Q 80 30, 75 60 Q 70 85, 40 80' stroke='%2314141C' stroke-width='4.5' stroke-linecap='round' fill='none' opacity='0.55'/%3E%3C/svg%3E") no-repeat center / contain;
	pointer-events: none;
	z-index: 0;
	transform: rotate(8deg);
}
.ced-cms::after,
.ced-process::after,
.ced-faq::after {
	content: "";
	position: absolute;
	bottom: 6%;
	left: 4%;
	width: clamp(70px, 9vw, 130px);
	aspect-ratio: 1;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M10 50 Q 25 20, 45 50 T 80 50' stroke='%2314141C' stroke-width='4.5' stroke-linecap='round' fill='none' opacity='0.5'/%3E%3C/svg%3E") no-repeat center / contain;
	pointer-events: none;
	z-index: 0;
	transform: rotate(-12deg);
}
.ced-warch::before {
	content: "";
	position: absolute;
	top: 14%;
	left: 6%;
	width: clamp(80px, 10vw, 150px);
	aspect-ratio: 1;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 20 Q 80 30, 75 55 Q 70 80, 40 75 Q 15 70, 25 45' stroke='%2314141C' stroke-width='5' stroke-linecap='round' fill='none' opacity='0.45'/%3E%3C/svg%3E") no-repeat center / contain;
	pointer-events: none;
	z-index: 0;
	transform: rotate(-18deg);
}

/* Don't let scribbles or curves overpaint content stacks. */
.ced-aspread__chapter, .ced-services__list, .ced-cms__bento,
.ced-process__list, .ced-narrative__deck, .ced-faq__list,
.ced-warch__head, .ced-warch__filters, .ced-warch__grid {
	position: relative;
	z-index: 1;
}

/* Reduced-motion: scribbles + curves stay (they're static), but Anton
   stays cap-height steady regardless. */


/* ────────────────────────────────────────────────────────────────────
   "Spotlight Moments" treatment for the homepage stats grid.
   Inspired by bonanza-events.webflow.io. The stats panel becomes a
   dark Spotlight Moments-style container with sub-cards: each card
   shows a big colored Anton number, a themed icon in the top-right,
   and an uppercase label below. Drops the cream-on-cream low-contrast
   look and turns the stats into a focal dark moment within the otherwise
   cream homepage flow.
   ──────────────────────────────────────────────────────────────────── */
.ced-about__stats {
	background: var(--wp--preset--color--ink) !important;
	border-radius: clamp(1.5rem, 3vw, 2.5rem) !important;
	padding: clamp(0.5rem, 1vw, 1rem) !important;
	gap: clamp(0.5rem, 1vw, 0.75rem) !important;
	border: 1px solid rgba(232, 229, 222, 0.06) !important;
	position: relative;
	overflow: hidden;
}

/* Soft ambient glow inside the panel, like Bonanza's subtle backdrop */
.ced-about__stats::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(40% 60% at 8% 100%, rgba(203, 108, 230, 0.08), transparent 70%),
		radial-gradient(35% 60% at 92% 0%, rgba(78, 205, 196, 0.06), transparent 70%);
	pointer-events: none;
	border-radius: inherit;
}

/* Each stat as its own dark card on the panel. */
.ced-about__stats > div {
	background: rgba(232, 229, 222, 0.025) !important;
	border: 1px solid rgba(232, 229, 222, 0.05) !important;
	border-radius: clamp(1rem, 2vw, 1.5rem) !important;
	padding: clamp(1.75rem, 3vw, 2.75rem) clamp(1.5rem, 2.5vw, 2.25rem) !important;
	color: var(--wp--preset--color--paper) !important;
	position: relative;
	overflow: hidden;
	transition: background 320ms var(--ease-smooth), border-color 320ms var(--ease-smooth);
	min-height: clamp(160px, 18vw, 220px);
	display: flex !important;
	flex-direction: column !important;
	justify-content: space-between !important;
	gap: 0.85rem !important;
}
.ced-about__stats > div:hover {
	background: rgba(232, 229, 222, 0.05) !important;
	border-color: rgba(232, 229, 222, 0.12) !important;
}

/* Big number — full Anton at display scale, in the per-stat accent. */
.ced-about__stats dt {
	font-family: var(--font-display) !important;
	font-size: clamp(3rem, 5.5vw, 5.5rem) !important;
	font-weight: 400 !important;
	color: var(--stat-color) !important;
	line-height: 0.9 !important;
	letter-spacing: -0.02em !important;
	margin: 0 !important;
}

/* Label — uppercase mono micro under the number. */
.ced-about__stats dd {
	font-family: var(--wp--preset--font-family--mono) !important;
	font-size: clamp(0.7rem, 0.85vw, 0.78rem) !important;
	letter-spacing: 0.16em !important;
	text-transform: uppercase !important;
	color: rgba(232, 229, 222, 0.55) !important;
	line-height: 1.4 !important;
	margin: 0 !important;
	max-width: 18ch;
}

/* Themed icon top-right of each card, tinted in the stat accent.
   SVG mask lets us recolor the same way the number is coloured.
   :nth-child rotates the icon to match the stat semantics:
   1. years → clock
   2. platforms → stack
   3. projects → rocket / package
   4. clients → people */
.ced-about__stats > div::after {
	content: "";
	position: absolute;
	top: clamp(1.25rem, 2vw, 1.75rem);
	right: clamp(1.25rem, 2vw, 1.75rem);
	width: clamp(26px, 2.4vw, 36px);
	height: clamp(26px, 2.4vw, 36px);
	background-color: var(--stat-color);
	opacity: 0.85;
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	-webkit-mask-size: contain;
}

/* Clock — years building */
.ced-about__stats > div:nth-child(1)::after {
	mask-image:      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
}
/* Layered cards — platforms & stacks */
.ced-about__stats > div:nth-child(2)::after {
	mask-image:      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8l9-5 9 5-9 5-9-5z'/%3E%3Cpath d='M3 14l9 5 9-5'/%3E%3Cpath d='M3 11l9 5 9-5'/%3E%3C/svg%3E");
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8l9-5 9 5-9 5-9-5z'/%3E%3Cpath d='M3 14l9 5 9-5'/%3E%3Cpath d='M3 11l9 5 9-5'/%3E%3C/svg%3E");
}
/* Rocket — projects shipped */
.ced-about__stats > div:nth-child(3)::after {
	mask-image:      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 16.5c-1.5 1-2.5 4-2.5 4s3-1 4-2.5'/%3E%3Cpath d='M16 14h-3v-3M14 7l4 4'/%3E%3Cpath d='M19 12 5-5c-3 0-7 2-9 5-2 4-3 7-3 7s3-1 7-3c3-2 5-6 5-9 0-3-5-5-5-5z'/%3E%3Cpath d='M7 17c-1 1-2 1-3 0s0-2 1-3'/%3E%3C/svg%3E");
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 2c-3 0-7 2-9 5-2 4-3 8-3 8s3 1 7-1c3-2 6-5 6-9 0-3-1-3-1-3z'/%3E%3Cpath d='M9 15l-3-3 6-6 3 3-6 6z'/%3E%3Cpath d='M3 21s1-5 3-7'/%3E%3C/svg%3E");
}
/* People — clients */
.ced-about__stats > div:nth-child(4)::after {
	mask-image:      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9.5' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9.5' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
}

/* Restore Plan B cream-section context — the stat panel sits inside
   .ced-about which is cream. Pull a small margin so the dark panel
   reads as a focal moment, not a flush bottom band. */
.ced-about__stats {
	margin-top: clamp(2rem, 4vw, 3.5rem) !important;
}


/* "Upcoming events"-style tilt-in for the Spotlight Moments panel.
   Driven by --tilt-progress (0..1) set by scroll-magic.js on rAF tick.
   At progress 0 the panel sits at -5deg; at progress 1 it's flat. The
   transform-origin keeps the rotation pivoting off the section above
   so the panel "rises into place" rather than spinning around. */
.ced-about__stats,
.ced-project-stats__grid {
	--tilt-max: 5deg;
	transform-origin: center top;
	transform: rotate(calc((var(--tilt-progress, 1) - 1) * var(--tilt-max)));
	will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
	.ced-about__stats,
	.ced-project-stats__grid {
		transform: none !important;
	}
}


/* Extend tilt-in to the dark "accent moment" sections so they rise out
   of the cream flow the same way the Spotlight Moments panel does.
   Keep --tilt-max tighter on full-section blocks (3deg) than on the
   smaller stat panels (5deg) so the rotation doesn't feel cartoonish
   at section scale. */
.ced-marquee,
.ced-parallax,
.ced-tests,
.ced-pspot,
.ced-related {
	--tilt-max: 3deg;
	transform-origin: center top;
	transform: rotate(calc((var(--tilt-progress, 1) - 1) * var(--tilt-max)));
	will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
	.ced-marquee, .ced-parallax, .ced-tests, .ced-pspot, .ced-related {
		transform: none !important;
	}
}


/* ====================================================================
   SERVICES — EDITORIAL STICKY LIST AMPLIFIED
   Existing block already does sticky-intro + scrolling-list. Crank it
   to poster scale: massive Anton service names + numbers, hairline
   hover-reveal of descriptions, brand-purple plus-icon that rotates
   to ×, and the sticky intro side gets editorial typographic weight.
   ==================================================================== */
.ced-services__layout {
	grid-template-columns: minmax(280px, 380px) 1fr !important;
	gap: clamp(3rem, 6vw, 6rem) !important;
}

.ced-services__title {
	font-size: clamp(2.5rem, 5vw, 4.5rem) !important;
	line-height: 0.92 !important;
}
.ced-services__lede {
	font-size: clamp(1rem, 1.15vw, 1.18rem) !important;
	max-width: 38ch;
}

/* Each row — generous breathing room, top hairline that runs full width. */
.ced-services__list {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}
.ced-services__row {
	border-top: 1px solid rgba(20, 20, 28, 0.10) !important;
	padding: clamp(2.25rem, 3.5vw, 3.25rem) 0 !important;
	cursor: pointer;
	position: relative;
	display: block !important;
	transition: padding 360ms var(--ease-emph);
}
.ced-services__row:last-child {
	border-bottom: 1px solid rgba(20, 20, 28, 0.10) !important;
}

/* Default dark mode for services block — Plan B already flipped it
   cream, so the row colours here are inked. The dark variant lives
   under the body[data-services-tone="dark"] selector if we ever want
   to flip back. */

.ced-services__row-head {
	display: grid !important;
	grid-template-columns: clamp(3.5rem, 6vw, 6rem) 1fr auto !important;
	align-items: center !important;
	gap: clamp(1rem, 2vw, 2.25rem) !important;
}

.ced-services__num {
	font-family: var(--font-display) !important;
	font-size: clamp(2.5rem, 5vw, 4.5rem) !important;
	line-height: 1 !important;
	color: rgba(20, 20, 28, 0.22) !important;
	transition: color 320ms var(--ease-smooth);
	letter-spacing: -0.02em;
}

.ced-services__name {
	font-family: var(--font-display) !important;
	font-size: clamp(1.65rem, 3vw, 2.6rem) !important;
	font-weight: 400 !important;
	color: var(--wp--preset--color--ink) !important;
	text-transform: uppercase;
	line-height: 0.95 !important;
	margin: 0 !important;
	letter-spacing: 0.005em;
}

.ced-services__plus {
	width: clamp(36px, 3vw, 44px) !important;
	height: clamp(36px, 3vw, 44px) !important;
	border-radius: 50% !important;
	border: 1.5px solid rgba(20, 20, 28, 0.25) !important;
	display: grid !important;
	place-items: center !important;
	color: rgba(20, 20, 28, 0.5) !important;
	transition: rotate 360ms var(--ease-emph), color 320ms, border-color 320ms, background 320ms;
}

/* Hover / focus state: number + name brighten, plus rotates to ×,
   border + bg accent into brand purple. */
.ced-services__row:hover,
.ced-services__row:focus-within {
	padding: clamp(2.5rem, 3.75vw, 3.75rem) 0 !important;
}
.ced-services__row:hover .ced-services__num,
.ced-services__row:focus-within .ced-services__num {
	color: var(--wp--preset--color--lime) !important;
}
.ced-services__row:hover .ced-services__plus,
.ced-services__row:focus-within .ced-services__plus {
	rotate: 45deg;
	color: var(--wp--preset--color--lime) !important;
	border-color: var(--wp--preset--color--lime) !important;
	background: rgba(203, 108, 230, 0.08);
}

/* Body — collapsed by default, slides + fades in on hover/focus. */
.ced-services__row-body {
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	transition:
		max-height 520ms cubic-bezier(0.22, 1, 0.36, 1),
		opacity 320ms 80ms,
		padding-top 360ms;
	padding-left: clamp(4.5rem, 8vw, 8.25rem); /* aligns under the name column */
	padding-top: 0;
}
.ced-services__row:hover .ced-services__row-body,
.ced-services__row:focus-within .ced-services__row-body {
	max-height: 400px;
	opacity: 1;
	padding-top: clamp(0.85rem, 1.5vw, 1.25rem);
}
.ced-services__row-body p {
	color: rgba(20, 20, 28, 0.72) !important;
	font-size: clamp(0.95rem, 1.05vw, 1.1rem);
	line-height: 1.55;
	margin: 0;
	max-width: 60ch;
}
.ced-services__when {
	display: block !important;
	color: rgba(20, 20, 28, 0.55) !important;
	font-family: var(--wp--preset--font-family--mono) !important;
	font-size: 0.78rem !important;
	letter-spacing: 0.16em !important;
	text-transform: uppercase;
	margin-top: 0.85rem !important;
}

/* Reduced-motion: skip the hover height transition, show by default. */
@media (prefers-reduced-motion: reduce) {
	.ced-services__row-body { max-height: none; opacity: 1; padding-top: 1rem; }
}


/* ====================================================================
   ENGAGEMENT MODELS — SAAS PRICING TIER GRID
   Opt-out of the pinned horizontal scroll (--pll-mode: grid; read by
   parallax view.js) and render the 4 panels as a Stripe/Linear-style
   pricing tier grid. The 2nd tier (Project Build = idx 1) is featured
   as "MOST COMMON" with inverted dark background.
   ==================================================================== */
.ced-pll__act--horizontal {
	--pll-mode: grid;
	height: auto !important;
	position: static !important;
	background: var(--wp--preset--color--cream) !important;
	color: var(--wp--preset--color--ink) !important;
	padding: clamp(4rem, 8vw, 7rem) clamp(1.5rem, 4vw, 4rem) !important;
}
.ced-pll__hpin {
	position: static !important;
	height: auto !important;
	display: grid !important;
	max-width: var(--page-max);
	margin-inline: auto;
}

/* Header — center-stage, big Anton, no progress bar */
.ced-pll__hpin-head {
	display: grid !important;
	place-items: center !important;
	text-align: center !important;
	margin-bottom: clamp(2.5rem, 5vw, 4rem) !important;
	gap: 0.75rem !important;
}
.ced-pll__hpin-title {
	font-family: var(--font-display) !important;
	font-size: clamp(2.5rem, 5vw, 4.5rem) !important;
	font-weight: 400 !important;
	color: var(--wp--preset--color--ink) !important;
	text-transform: uppercase !important;
	letter-spacing: 0.005em;
	line-height: 0.95 !important;
	max-width: 22ch;
}
.ced-pll__hpin-head .ced-eyebrow {
	color: rgba(20, 20, 28, 0.55) !important;
}
.ced-pll__hpin-progress { display: none !important; }

/* Track-wrap → static grid */
.ced-pll__htrack-wrap {
	overflow: visible !important;
	width: auto !important;
}
.ced-pll__htrack {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr) !important;
	gap: clamp(1rem, 1.5vw, 1.5rem) !important;
	transform: none !important;
	width: auto !important;
	height: auto !important;
}

/* Each panel — pricing tier card */
.ced-pll__panel {
	width: auto !important;
	min-width: 0 !important;
	flex: none !important;
	display: grid !important;
	grid-template-rows: auto auto auto 1fr auto !important;
	gap: clamp(0.75rem, 1vw, 1rem) !important;
	padding: clamp(1.75rem, 2.5vw, 2.5rem) clamp(1.5rem, 2vw, 2rem) !important;
	background: rgba(20, 20, 28, 0.03) !important;
	border: 1px solid rgba(20, 20, 28, 0.10) !important;
	border-radius: clamp(1rem, 1.5vw, 1.5rem) !important;
	position: relative !important;
	height: auto !important;
	color: var(--wp--preset--color--ink) !important;
	scroll-snap-align: none !important;
}

/* Tier 02 (Project Build, data-idx="1") = featured "MOST COMMON" */
.ced-pll__panel[data-idx="1"] {
	background: var(--wp--preset--color--ink) !important;
	border-color: var(--wp--preset--color--lime) !important;
	color: var(--wp--preset--color--paper) !important;
	box-shadow: 0 12px 40px rgba(203, 108, 230, 0.18);
	transform: scale(1.02);
}
.ced-pll__panel[data-idx="1"]::before {
	content: "MOST COMMON";
	position: absolute;
	top: -0.85rem;
	left: 50%;
	transform: translateX(-50%);
	background: var(--wp--preset--color--lime);
	color: var(--wp--preset--color--ink);
	font-family: var(--font-display);
	font-size: 0.72rem;
	font-weight: 400;
	letter-spacing: 0.18em;
	padding: 0.4rem 0.95rem;
	border-radius: 999px;
	white-space: nowrap;
	z-index: 2;
}

/* Panel innards */
.ced-pll__panel-no {
	font-family: var(--font-display) !important;
	font-size: clamp(2rem, 3vw, 3rem) !important;
	line-height: 1 !important;
	color: rgba(20, 20, 28, 0.30) !important;
	letter-spacing: -0.02em;
	font-weight: 400 !important;
}
.ced-pll__panel[data-idx="1"] .ced-pll__panel-no {
	color: rgba(244, 242, 238, 0.40) !important;
}

.ced-pll__panel-cat {
	font-family: var(--wp--preset--font-family--mono) !important;
	font-size: 0.72rem !important;
	letter-spacing: 0.18em !important;
	text-transform: uppercase !important;
	color: var(--wp--preset--color--lime) !important;
	font-weight: 500;
}

.ced-pll__panel-lead {
	font-family: var(--font-display) !important;
	font-size: clamp(1.4rem, 2.2vw, 1.9rem) !important;
	color: var(--wp--preset--color--ink) !important;
	line-height: 0.95 !important;
	font-weight: 400 !important;
	text-transform: uppercase !important;
	margin: 0 !important;
	letter-spacing: 0.005em;
}
.ced-pll__panel[data-idx="1"] .ced-pll__panel-lead {
	color: var(--wp--preset--color--paper) !important;
}

.ced-pll__panel-sub {
	font-family: var(--wp--preset--font-family--mono) !important;
	font-size: 0.78rem !important;
	letter-spacing: 0.08em !important;
	color: rgba(20, 20, 28, 0.62) !important;
	margin: 0 !important;
	text-transform: uppercase;
}
.ced-pll__panel[data-idx="1"] .ced-pll__panel-sub {
	color: rgba(244, 242, 238, 0.6) !important;
}

.ced-pll__panel-note {
	color: rgba(20, 20, 28, 0.74) !important;
	line-height: 1.55 !important;
	margin: 0 !important;
	font-size: clamp(0.92rem, 1vw, 1rem);
}
.ced-pll__panel[data-idx="1"] .ced-pll__panel-note {
	color: rgba(244, 242, 238, 0.78) !important;
}

/* CTA — pill button */
.ced-pll__panel-cta {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 0.5rem !important;
	margin-top: 0.5rem !important;
	padding: 0.95rem 1.5rem !important;
	background: var(--wp--preset--color--ink) !important;
	color: var(--wp--preset--color--paper) !important;
	border-radius: 999px !important;
	font-family: var(--font-display) !important;
	font-size: 0.85rem !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase !important;
	text-decoration: none !important;
	transition: background 240ms, color 240ms, transform 240ms;
	border: 1px solid transparent;
	justify-self: stretch;
	text-align: center;
}
.ced-pll__panel-cta:hover {
	background: var(--wp--preset--color--lime) !important;
	color: var(--wp--preset--color--ink) !important;
	transform: translateY(-1px);
}
.ced-pll__panel[data-idx="1"] .ced-pll__panel-cta {
	background: var(--wp--preset--color--lime) !important;
	color: var(--wp--preset--color--ink) !important;
}
.ced-pll__panel[data-idx="1"] .ced-pll__panel-cta:hover {
	background: var(--wp--preset--color--paper) !important;
	color: var(--wp--preset--color--ink) !important;
}

/* Hide all the horizontal-scroll UI chrome */
.ced-pll__hpin-foot,
.ced-pll__hpin-counter,
.ced-swipe-dots,
.ced-swipe-arrow,
.ced-pll__panel-deco {
	display: none !important;
}

/* Mobile: stack tiers vertically; collapse from 4 cols → 2 cols → 1 col */
@media (max-width: 1100px) {
	.ced-pll__htrack {
		grid-template-columns: repeat(2, 1fr) !important;
	}
	.ced-pll__panel[data-idx="1"] {
		transform: none;
	}
}
@media (max-width: 640px) {
	.ced-pll__htrack {
		grid-template-columns: 1fr !important;
	}
}


/* ====================================================================
   SERVICES HUB → SPOTLIGHT GRID
   Ports the lab's Option A (dark Spotlight Moments-style grid) onto the
   production services-hub block at /services/. The card data shape
   stays the same — only the visual layout changes:
   - Section bg cream (already from Plan B)
   - Cards grid wrapped in a dark "panel" with rounded corners + ambient
     glow gradients (same look as the about-stats Spotlight panel)
   - Each card: dark sub-card with colored Anton number, themed icon
     top-right, service name in Anton caps, blurb below.
   - Hover: subtle lift + brightened veil.
   ==================================================================== */

.ced-shub__grid {
	background: var(--wp--preset--color--ink) !important;
	border-radius: clamp(1.5rem, 3vw, 2.5rem) !important;
	padding: clamp(1rem, 1.5vw, 1.5rem) !important;
	border: 1px solid rgba(232, 229, 222, 0.06) !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: clamp(0.5rem, 1vw, 0.85rem) !important;
	position: relative;
	overflow: hidden;
}

/* Ambient glow gradients inside the panel — matches Spotlight Moments. */
.ced-shub__grid::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(40% 60% at 8% 100%, rgba(203, 108, 230, 0.08), transparent 70%),
		radial-gradient(35% 60% at 92% 0%, rgba(78, 205, 196, 0.06), transparent 70%);
	pointer-events: none;
	border-radius: inherit;
	z-index: 0;
}

/* Each card → dark sub-card on the panel */
.ced-shub__card {
	background: rgba(232, 229, 222, 0.025) !important;
	border: 1px solid rgba(232, 229, 222, 0.05) !important;
	border-radius: clamp(1rem, 1.5vw, 1.25rem) !important;
	padding: clamp(1.5rem, 2.2vw, 2rem) !important;
	color: var(--wp--preset--color--paper) !important;
	display: grid !important;
	grid-template-rows: auto auto 1fr auto !important;
	gap: 0.85rem !important;
	min-height: clamp(180px, 18vw, 240px);
	position: relative;
	z-index: 1;
	transition: background 320ms var(--ease-smooth), border-color 320ms, transform 320ms;
	text-decoration: none;
}
.ced-shub__card:hover {
	background: rgba(232, 229, 222, 0.05) !important;
	border-color: rgba(232, 229, 222, 0.12) !important;
	transform: translateY(-2px);
}

/* Number — Anton at display scale, in the per-card accent color. */
.ced-shub__num {
	font-family: var(--font-display) !important;
	font-size: clamp(2rem, 3vw, 2.75rem) !important;
	font-weight: 400 !important;
	line-height: 1 !important;
	letter-spacing: -0.02em !important;
	margin: 0 !important;
}

/* Service name in Anton caps, tight. */
.ced-shub__name {
	font-family: var(--font-display) !important;
	font-size: clamp(1.1rem, 1.4vw, 1.35rem) !important;
	font-weight: 400 !important;
	color: var(--wp--preset--color--paper) !important;
	text-transform: uppercase !important;
	line-height: 1 !important;
	letter-spacing: 0.005em !important;
	margin: 0 !important;
	max-width: 14ch;
}

/* Blurb body — muted paper. */
.ced-shub__lede-body {
	color: rgba(232, 229, 222, 0.62) !important;
	font-size: 0.88rem !important;
	line-height: 1.5 !important;
	margin: 0 !important;
}

/* Footer — when timeline + "Learn more" tag */
.ced-shub__card footer {
	display: flex !important;
	justify-content: space-between !important;
	align-items: center !important;
	gap: 0.75rem !important;
	margin-top: 0.5rem !important;
	padding-top: 0.85rem !important;
	border-top: 1px solid rgba(232, 229, 222, 0.06) !important;
}
.ced-shub__when {
	font-family: var(--wp--preset--font-family--mono) !important;
	font-size: 0.7rem !important;
	letter-spacing: 0.14em !important;
	text-transform: uppercase !important;
	color: rgba(232, 229, 222, 0.5) !important;
}
.ced-shub__view {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-family: var(--wp--preset--font-family--mono) !important;
	font-size: 0.7rem !important;
	letter-spacing: 0.14em !important;
	text-transform: uppercase !important;
	color: var(--wp--preset--color--paper) !important;
	opacity: 0.85;
	transition: opacity 240ms, gap 240ms;
}
.ced-shub__card:hover .ced-shub__view {
	opacity: 1;
	gap: 0.6rem;
}

/* Per-accent number text colour — reuses the card's existing
   --lime/--coral/--sky/--lavender/--sunset/--sage/--rose accent classes
   set by the renderer. ONLY color, not background, on the text element. */
.ced-shub__card--lime     .ced-shub__num { color: var(--wp--preset--color--lime); }
.ced-shub__card--coral    .ced-shub__num { color: var(--wp--preset--color--coral); }
.ced-shub__card--sky      .ced-shub__num { color: var(--wp--preset--color--sky); }
.ced-shub__card--lavender .ced-shub__num { color: var(--wp--preset--color--lavender); }
.ced-shub__card--sunset   .ced-shub__num { color: var(--wp--preset--color--sunset); }
.ced-shub__card--sage     .ced-shub__num { color: var(--wp--preset--color--sage); }
.ced-shub__card--rose     .ced-shub__num { color: var(--wp--preset--color--rose); }

/* Per-accent ::after mask icon fill colour — separate from text so the
   number element doesn't inherit a background rectangle. */
.ced-shub__card--lime::after     { background-color: var(--wp--preset--color--lime); }
.ced-shub__card--coral::after    { background-color: var(--wp--preset--color--coral); }
.ced-shub__card--sky::after      { background-color: var(--wp--preset--color--sky); }
.ced-shub__card--lavender::after { background-color: var(--wp--preset--color--lavender); }
.ced-shub__card--sunset::after   { background-color: var(--wp--preset--color--sunset); }
.ced-shub__card--sage::after     { background-color: var(--wp--preset--color--sage); }
.ced-shub__card--rose::after     { background-color: var(--wp--preset--color--rose); }

/* Themed mask-image icon top-right of each card. Each accent variant
   gets its own iconography — these were picked to roughly match the
   semantic of each service. */
.ced-shub__card::after {
	content: "";
	position: absolute;
	top: clamp(1.25rem, 2vw, 1.75rem);
	right: clamp(1.25rem, 2vw, 1.75rem);
	width: clamp(24px, 2.2vw, 32px);
	height: clamp(24px, 2.2vw, 32px);
	opacity: 0.8;
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	-webkit-mask-size: contain;
}

/* Mask URLs per service — service slug or nth-child based.
   Index-based since cards iterate in the order defined in render.php. */
.ced-shub__card:nth-child(1)::after  { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 13h8V3H3v10zM13 21h8V11h-8v10zM3 21h8v-6H3v6zM13 9h8V3h-8v6z'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 13h8V3H3v10zM13 21h8V11h-8v10zM3 21h8v-6H3v6zM13 9h8V3h-8v6z'/%3E%3C/svg%3E"); }
.ced-shub__card:nth-child(2)::after  { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h18M3 8l9-5 9 5M5 8v11h14V8'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h18M3 8l9-5 9 5M5 8v11h14V8'/%3E%3C/svg%3E"); }
.ced-shub__card:nth-child(3)::after  { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 18l6-6-6-6M8 6l-6 6 6 6'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 18l6-6-6-6M8 6l-6 6 6 6'/%3E%3C/svg%3E"); }
.ced-shub__card:nth-child(4)::after  { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5h2l2 11h12l2-7H6M9 19a1 1 0 100 2 1 1 0 000-2zM18 19a1 1 0 100 2 1 1 0 000-2z'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5h2l2 11h12l2-7H6M9 19a1 1 0 100 2 1 1 0 000-2zM18 19a1 1 0 100 2 1 1 0 000-2z'/%3E%3C/svg%3E"); }
.ced-shub__card:nth-child(5)::after  { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2L3 14h7l-1 8 10-12h-7l1-8z'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2L3 14h7l-1 8 10-12h-7l1-8z'/%3E%3C/svg%3E"); }
.ced-shub__card:nth-child(6)::after  { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12l9-9 9 9M5 10v10h14V10'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12l9-9 9 9M5 10v10h14V10'/%3E%3C/svg%3E"); }
.ced-shub__card:nth-child(7)::after  { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9h18M3 9v10h18V9M9 3h6v6H9z'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9h18M3 9v10h18V9M9 3h6v6H9z'/%3E%3C/svg%3E"); }
.ced-shub__card:nth-child(8)::after  { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h18v16H3zM3 8h18M7 12h4M7 16h7'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h18v16H3zM3 8h18M7 12h4M7 16h7'/%3E%3C/svg%3E"); }
.ced-shub__card:nth-child(9)::after  { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 4l-5 8 5 8M17 4l5 8-5 8'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 4l-5 8 5 8M17 4l5 8-5 8'/%3E%3C/svg%3E"); }
.ced-shub__card:nth-child(10)::after { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11l9-7 9 7v9H3v-9zM10 20v-6h4v6'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11l9-7 9 7v9H3v-9zM10 20v-6h4v6'/%3E%3C/svg%3E"); }
.ced-shub__card:nth-child(11)::after { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 2h10v20H7zM10 18h4'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 2h10v20H7zM10 18h4'/%3E%3C/svg%3E"); }

/* Responsive — drop to 2 columns at tablet, 1 at mobile. */
@media (max-width: 1100px) {
	.ced-shub__grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 640px) {
	.ced-shub__grid { grid-template-columns: 1fr !important; }
}

/* Plan B overrides earlier set .ced-shub__card to a translucent white;
   that targeted the card-on-cream version. The Spotlight Grid card
   handles its own backgrounds above, so cancel the older override. */
.ced-warch .ced-shub__card,
.ced-services__list .ced-shub__card {
	background: rgba(232, 229, 222, 0.025) !important;
}


/* ====================================================================
   ABOUT-SPREAD — disciplines panel → Spotlight Grid treatment.
   The cream-on-cream wireframe look was reading as "underdesigned".
   Re-apply the same dark-panel + dark-cards pattern we use for the
   services-hub Spotlight Grid so the about page reads consistently
   with /services/. Hover-reveal back-face stays (it's internal to
   each card).
   ==================================================================== */
.ced-aspread__disc-grid {
	background: var(--wp--preset--color--ink) !important;
	border-radius: clamp(1.5rem, 3vw, 2.5rem) !important;
	padding: clamp(1rem, 1.5vw, 1.5rem) !important;
	border: 1px solid rgba(232, 229, 222, 0.06) !important;
	grid-template-columns: repeat(4, 1fr) !important;
	gap: clamp(0.5rem, 1vw, 0.85rem) !important;
	position: relative;
	overflow: hidden;
}
/* Ambient glow inside the panel — matches Spotlight Moments. */
.ced-aspread__disc-grid::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(40% 60% at 8% 100%, rgba(203, 108, 230, 0.08), transparent 70%),
		radial-gradient(35% 60% at 92% 0%, rgba(78, 205, 196, 0.06), transparent 70%);
	pointer-events: none;
	border-radius: inherit;
	z-index: 0;
}

/* Each discipline card → dark sub-card on the panel. */
.ced-aspread__disc {
	background: rgba(232, 229, 222, 0.03) !important;
	border: 1px solid rgba(232, 229, 222, 0.06) !important;
	border-radius: clamp(1rem, 1.5vw, 1.25rem) !important;
	color: var(--wp--preset--color--paper) !important;
	min-height: clamp(280px, 30vw, 360px) !important;
	z-index: 1;
	transition: background 320ms var(--ease-smooth), border-color 320ms, transform 320ms;
}
.ced-aspread__disc:hover,
.ced-aspread__disc:focus-visible {
	background: rgba(232, 229, 222, 0.06) !important;
	border-color: rgba(203, 108, 230, 0.30) !important;
}

/* Face/back inherit the dark frame; back gets a deeper ink veil. */
.ced-aspread__disc-face,
.ced-aspread__disc-back {
	padding: clamp(1.5rem, 2.2vw, 2rem) !important;
	color: var(--wp--preset--color--paper) !important;
}
.ced-aspread__disc-back {
	background: linear-gradient(180deg, rgba(5, 5, 7, 0.96) 0%, rgba(5, 5, 7, 0.99) 100%) !important;
}

/* Discipline number — bigger Anton, brand purple. */
.ced-aspread__disc-num {
	font-family: var(--font-display, 'Anton', sans-serif) !important;
	font-size: clamp(2rem, 3vw, 2.5rem) !important;
	letter-spacing: -0.02em !important;
	line-height: 1 !important;
	color: var(--wp--preset--color--lavender) !important;
	font-weight: 400 !important;
}

/* Icon — bigger, no circle bubble. Sits at full strength in lavender. */
.ced-aspread__disc-icon {
	background: transparent !important;
	width: 32px !important;
	height: 32px !important;
	color: var(--wp--preset--color--lavender) !important;
	opacity: 0.9;
}
.ced-aspread__disc-icon svg {
	width: 100%;
	height: 100%;
}

/* Title — Anton caps (already from Bonanza), brighten to paper */
.ced-aspread__disc-title {
	color: var(--wp--preset--color--paper) !important;
	margin-top: 0.25rem;
}

/* Lede body — mist on dark, readable. */
.ced-aspread__disc-lede {
	color: rgba(232, 229, 222, 0.65) !important;
}

/* "STACKS →" hint — lime brand purple, more prominent */
.ced-aspread__disc-hint {
	color: var(--wp--preset--color--lavender) !important;
	font-family: var(--wp--preset--font-family--mono) !important;
	font-size: 0.72rem !important;
	letter-spacing: 0.18em !important;
	transition: gap 240ms;
}
.ced-aspread__disc:hover .ced-aspread__disc-hint {
	gap: 0.65rem;
}

/* Back face — stacks list with chips */
.ced-aspread__disc-back-label {
	color: rgba(232, 229, 222, 0.6) !important;
	font-family: var(--wp--preset--font-family--mono) !important;
	font-size: 0.72rem !important;
	letter-spacing: 0.18em !important;
	text-transform: uppercase;
}
.ced-aspread__disc-tags li {
	background: rgba(232, 229, 222, 0.08) !important;
	border: 1px solid rgba(232, 229, 222, 0.10) !important;
	color: var(--wp--preset--color--paper) !important;
}

/* Responsive — drop to 2 columns then 1 like the services grid. */
@media (max-width: 1100px) {
	.ced-aspread__disc-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 640px) {
	.ced-aspread__disc-grid { grid-template-columns: 1fr !important; }
}


/* Fix: about-spread disciplines card text reads ink-on-dark because the
   Plan B section-level (.ced-aspread :is(h1..h6)) rule out-specifies the
   disciplines card override above. Chain .ced-aspread + descendant to
   bump specificity to (0,3,1) so the paper text wins. */
.ced-aspread .ced-aspread__disc-title,
.ced-aspread .ced-aspread__disc h4 {
	color: var(--wp--preset--color--paper) !important;
}
.ced-aspread .ced-aspread__disc-lede,
.ced-aspread .ced-aspread__disc p {
	color: rgba(232, 229, 222, 0.7) !important;
}
.ced-aspread .ced-aspread__disc-num {
	color: var(--wp--preset--color--lavender) !important;
}
.ced-aspread .ced-aspread__disc-back-label {
	color: rgba(232, 229, 222, 0.6) !important;
}
.ced-aspread .ced-aspread__disc-tags li {
	color: var(--wp--preset--color--paper) !important;
}


/* Fix: visible seam at the top of the about-spread cream zone.
   Two sources combine into one visible hairline:
   1. The Bonanza section-curve treatment applies border-top-radius +
      negative margin-top to about-spread. That's intentional at dark↔cream
      boundaries but on the about page the block above (about) is also
      cream, so the curve seam just reads as a stray line.
   2. .ced-aspread__intro has its own border-bottom hairline. Plan B
      re-tinted --ced-line-08 to a dark ink shade, which now reads as a
      thin ink line splitting the cream zone in two.
   Both removed so the about page reads as one continuous cream surface. */
main > section.wp-block-cmsexpertdev-about-spread {
	border-top-left-radius:  0 !important;
	border-top-right-radius: 0 !important;
	margin-top: 0 !important;
}
.ced-aspread__intro {
	border-bottom: none !important;
}

/* Same fix applied wherever a cream block sits directly on another cream
   block. Curve is only needed at colour-boundary transitions. */
main > section.wp-block-cmsexpertdev-lead-form,
main > section.wp-block-cmsexpertdev-process {
	border-top-left-radius:  0 !important;
	border-top-right-radius: 0 !important;
	margin-top: 0 !important;
}


/* Fix: .ced-aspread__chapter is a WRAPPER div containing each chapter
   (intro / disciplines / pillars), not a card. Earlier Plan B mistakenly
   applied rgba(255, 255, 255, 0.65) to it, painting a translucent white
   rectangle on top of the cream section bg. Reset to transparent so the
   about page reads as one continuous cream surface. Cards INSIDE the
   chapter still get their own backgrounds. */
.ced-aspread__chapter {
	background: transparent !important;
	border-color: transparent !important;
}


/* Fix: the Bonanza section-curve treatment makes EVERY section after the
   first get rounded top corners + negative margin-top so it "rises" out
   of the section above. But on pages where the work-archive (or any
   other section) is the FIRST content block after the header, the curve
   has nothing behind it to rise out of — the rounded corners show as
   dark "ears" against the body's ink background, which reads as a glitch
   eating into the header (especially the PRIZOR AITECH logo subtitle).
   Cancel the curve + negative margin on the first content section of
   every page. */
main > section:first-child,
main > div:first-child > section:first-child,
main > .wp-block-group:first-child > section:first-child,
main > section:first-of-type {
	border-top-left-radius:  0 !important;
	border-top-right-radius: 0 !important;
	margin-top: 0 !important;
}


/* Fix: header reading as a separate dark "bar" abutting the cream body.
   The stuck header was applying var(--ced-veil-72) — a 72% opaque dark
   tint — which created a hard horizontal seam between the dark header
   band and the cream content below. Replace with pure backdrop-filter
   (frosted glass, no color tint) so the header takes on the colour of
   whatever's behind it. Nav text + brand get a subtle drop shadow so
   white text stays legible over cream too.
   This makes one rule that works for both cream and dark pages without
   any JS context detection. */
.ced-header.is-stuck {
	background: transparent !important;
	backdrop-filter: saturate(160%) blur(20px) !important;
	-webkit-backdrop-filter: saturate(160%) blur(20px) !important;
	border-bottom-color: rgba(232, 229, 222, 0.08) !important;
}
.ced-header__nav a,
.ced-header__brand-lockup {
	text-shadow: 0 1px 3px rgba(5, 5, 7, 0.35);
}
.ced-header__brand-lockup {
	filter: drop-shadow(0 1px 3px rgba(5, 5, 7, 0.35));
}


/* Fix: header nav links + mega-menu trigger were still using Geist
   (the body font) while the rest of the Bonanza poster mode treatment
   put everything else in Anton condensed caps. That created a visual
   inconsistency — the nav reads as a different "voice" than every
   other piece of site type. Pull it into the same display family. */
.ced-header__nav a,
.ced-mega__trigger,
.ced-header a:not(.ced-btn):not(.ced-header__brand),
.ced-header__cta,
.ced-mobile-toggle {
	font-family: var(--font-display, 'Anton', sans-serif) !important;
	font-weight: 400 !important;
	letter-spacing: 0.12em !important;
	text-transform: uppercase !important;
	font-size: clamp(0.85rem, 1vw, 0.95rem) !important;
}

/* Mega-menu submenu items inside the dropdown stay in Geist for
   readability — they're long descriptive labels, not nav anchors. */
.ced-mega__panel a,
.ced-mega__heading {
	font-family: var(--wp--preset--font-family--display, 'Geist', sans-serif) !important;
	text-transform: none !important;
	letter-spacing: normal !important;
}
.ced-mega__heading {
	font-family: var(--font-display, 'Anton', sans-serif) !important;
	text-transform: uppercase !important;
	letter-spacing: 0.08em !important;
}


/* Fix: when the header is sticky over cream content, white nav text was
   barely visible — the text-shadow alone wasn't enough contrast. Use
   mix-blend-mode: difference so the text colour adapts automatically:
   over cream → renders as the inverse (near-black/ink), over dark →
   renders as paper white. Zero JS detection needed.
   Scoped to the nav text only — NOT the START A PROJECT pill (which
   has its own purple background) or the logo lockup (which is an image
   and would invert weirdly). */
.ced-header__nav > a,
.ced-mega__trigger {
	color: #ffffff !important;
	mix-blend-mode: difference !important;
	text-shadow: none !important;
}

/* The chevron next to "Services" gets pulled into the same blend so it
   adapts colour with the text. */
.ced-mega__chevron {
	mix-blend-mode: difference;
}


/* Fix: sticky-stack narrative + project-summary cards stopped working
   after Bonanza section-curve treatment applied `overflow: hidden` to
   every cream-flipped section. overflow: hidden on a parent creates a
   new scrolling context that severs position: sticky's anchor. Switch
   the affected sections to `overflow: clip` — same visual clipping (no
   horizontal scrollbars from rounded corners or aurora blobs) but does
   NOT establish a new scroll container, so sticky inside continues to
   work against the page scroll. */
.ced-narrative,
.ced-project-summary {
	overflow: clip !important;
}


/* ====================================================================
   HORIZONTAL-DENSITY PASS
   Many block stylesheets clamp section titles to max-width: 22ch (so a
   12-word headline stacks into 3 short lines) and body paragraphs to
   60ch (a single narrow column on a 2000px-wide section). Both habits
   waste a lot of horizontal space and force the page to be much taller
   than it needs. This pass releases those constraints — titles span
   page-max, bodies use 2-column layouts where they can, and the
   testimonials big variant runs title + quote side by side instead of
   stacked.
   ==================================================================== */

/* 1. Section titles — span the full content width. */
.ced-tests__title,
.ced-cms__title,
.ced-services__title,
.ced-process__title,
.ced-lead__title,
.ced-faq__title,
.ced-faq__h,
.ced-about__title,
.ced-about-spread__h,
.ced-aspread__intro-h,
.ced-aspread__h,
.ced-shub__title,
.ced-warch__title,
.ced-chero__title,
.ced-marq__title,
.ced-final__title,
.ced-pll__hpin-title,
.ced-narrative__h,
.ced-deck__h,
.ced-project-summary__h,
.ced-project-stats__title,
.ced-project-gallery__title,
.ced-pnav__title-h,
.ced-trust-strip__title {
	max-width: none !important;
}

/* 2. Body paragraphs / ledes that were clamped to 60ch — let them
   breathe to 80ch which still keeps line length comfortable. */
.ced-tests__quote,
.ced-cms__lede,
.ced-services__lede,
.ced-process__lede,
.ced-lead__lede,
.ced-faq p,
.ced-about__body,
.ced-aspread__intro-cols p,
.ced-narrative p,
.ced-chero__lede,
.ced-shub__lede,
.ced-warch__lede,
.ced-marq__lede {
	max-width: none !important;
}

/* 3. Testimonials BIG variant — head spans full width, single column.
   (Earlier 2-col grid attempt put eyebrow in col 1 and title in col 2
   with empty space between them — that's why eyebrow ended up at the
   far left and title floated right. Reverted to single column.) */
.ced-tests--big .ced-tests__head {
	display: block !important;
	grid-template-columns: none !important;
	max-width: none !important;
	margin-bottom: clamp(1.5rem, 3vw, 2.5rem) !important;
}
.ced-tests--big .ced-tests__title {
	max-width: none !important;
}
.ced-tests--big .ced-tests__quote {
	max-width: none !important;
}

/* Two-column body for the about-spread intro paragraphs — already 2col
   but the breakpoint was at 760px so on wider screens it's still cramped.
   Push to 1100px so the 2-column layout kicks in earlier. */
@media (min-width: 760px) {
	.ced-aspread__intro-cols {
		max-width: none !important;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
	}
}

/* (Removed orphan mobile 2-col reset — no longer needed now that the
   testimonials head is single-column at all widths.) */


/* Fix: "FOUR WAYS TO BRING US IN." title was still stacking 1 word per
   line even after .ced-pll__hpin-title got max-width: none. The constraint
   was actually on its parent .ced-pll__hpin-head-text (max-width: 22ch
   from the original parallax block CSS) and on the grid template of
   .ced-pll__hpin-head. Release both so the title flows across the
   section width. */
.ced-pll__hpin-head {
	display: block !important;
	max-width: none !important;
	grid-template-columns: none !important;
	text-align: left !important;
}
.ced-pll__hpin-head-text {
	max-width: none !important;
	width: 100%;
}
.ced-pll__hpin-title {
	max-width: none !important;
	margin-inline: 0 !important;
	text-align: left !important;
}


/* Fix: header visibility glitch on cream pages while scrolling.
   Plan B cream sections were page-max-width (≤2080px on the largest
   breakpoint), so on wider viewports the body's ink background was
   visible as ~80–200px dark stripes on each side. The header has a
   transparent backdrop-filter and inherited those dark stripes through
   the blur — reading as a visible dark fade on the left + right edges
   that "ate" into the header. Extend the cream sections to full
   viewport width so there's no dark gap on the sides; their inner
   wrappers stay centered at page-max so layout doesn't change. */
.ced-chero,
.ced-warch,
.ced-aspread,
.ced-project-hero,
.ced-project-summary,
.ced-project-stats,
.ced-narrative,
.ced-project-gallery,
.ced-pnav,
.ced-related,
.ced-faq {
	max-width: none !important;
	width: 100vw !important;
	margin-left:  calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
}

/* Cancel the full-bleed escape when these blocks are nested inside a
   sidebar column (services + platform page templates put related-work
   and the FAQ inside .ced-page-grid__side). Without this reset, the
   block stretches to 100vw and overlaps the main content column. */
.ced-page-grid__side .ced-related,
.ced-page-grid__side .ced-faq,
.ced-page-grid__side .ced-pnav {
	max-width: 100% !important;
	width: auto !important;
	margin-left:  0 !important;
	margin-right: 0 !important;
}


/* Fix: header nav still unreadable over cream content.
   mix-blend-mode: difference was supposed to auto-invert the nav text
   based on background, but in combination with backdrop-filter blur
   the math falls apart — the rendered text ended up as a washed-out
   cream that disappeared against the cream backdrop. Replace with a
   reliable approach: when the header is stuck, give it a tinted dark
   backdrop that's transparent enough to feel modern but opaque enough
   to keep solid-white nav text legible against ANY page colour. */
.ced-header.is-stuck {
	background: rgba(5, 5, 7, 0.55) !important;
	backdrop-filter: saturate(180%) blur(18px) !important;
	-webkit-backdrop-filter: saturate(180%) blur(18px) !important;
	border-bottom-color: rgba(232, 229, 222, 0.10) !important;
}

/* Drop the blend-mode hacks — nav text + chevron stay solid white over
   the stuck-state dark veil. The earlier text-shadow stays as a small
   safety net for the rare transparent-header moments at the very top
   of the page before scroll. */
.ced-header__nav > a,
.ced-mega__trigger {
	color: #ffffff !important;
	mix-blend-mode: normal !important;
	text-shadow: 0 1px 4px rgba(5, 5, 7, 0.55);
}
.ced-mega__chevron {
	mix-blend-mode: normal !important;
}


/* ====================================================================
   COMPREHENSIVE WIDTH RELEASE — site-wide audit pass
   The earlier density pass missed many block-local title + body
   max-width: 22ch / 56ch / 60ch constraints. Audit ran across every
   block stylesheet; every text-container class below is now released.
   Inner layout-functional constraints (captcha inputs, platform logos,
   panel containers) are explicitly LEFT in place.
   ==================================================================== */

/* All titles, headlines, eyebrows-with-titles released */
.ced-chero__title,
.ced-chero__head,
.ced-about__title,
.ced-about__body,
.ced-cms__title,
.ced-cms__lede,
.ced-cms__cat-desc,
.ced-cms-card,
.ced-aspread__intro-h,
.ced-aspread__h,
.ced-aspread__sub,
.ced-faq__title,
.ced-faq__lede,
.ced-faq__list,
.ced-faq__head,
.ced-final__title,
.ced-hero__headline,
.ced-hero__intro,
.ced-lead__title,
.ced-lead__lede,
.cedhx__title,
.cedhx__lede,
.cedhx__panel-inner > p,
.ced-pll__hpin-title,
.ced-pll__hpin-head,
.ced-pll__hpin-head-text,
.ced-pll__panel-lead,
.ced-pll__panel-sub,
.ced-pll__panel-body,
.ced-pll__gallery-title,
.ced-project-hero__title,
.ced-project-hero__lede,
.ced-project-summary__h,
.ced-deck__h,
.ced-deck__body,
.ced-process__title,
.ced-process__lede,
.ced-process__step-title,
.ced-platform-hero__intro,
.ced-phero__intro,
.ced-phero__headline,
.ced-narrative__h,
.ced-narrative__lede,
.ced-narrative__card p,
.ced-project-stats__title,
.ced-project-gallery__title,
.ced-pnav__title-h,
.ced-marq__title,
.ced-marq__lede,
.ced-shub__title,
.ced-shub__lede,
.ced-warch__title,
.ced-warch__lede,
.ced-tests__title,
.ced-tests__quote {
	max-width: none !important;
}

/* Container shells that wrap titles also need release (parent constraint
   defeats child max-width: none, as we hit with __hpin-head-text earlier). */
.ced-cms__head,
.ced-services__head,
.ced-process__head,
.ced-lead__head,
.ced-aspread__head,
.ced-faq__head,
.ced-narrative__head,
.ced-project-stats__head,
.ced-project-gallery__head,
.ced-pnav__head,
.ced-marq__head,
.ced-shub__head,
.ced-warch__head,
.ced-tests__head {
	max-width: var(--page-max) !important;
	width: 100% !important;
}

/* Body paragraphs across these blocks — let line length grow to ~80ch
   max via the natural page-max ceiling rather than block-local 60ch. */
.ced-cms__lede,
.ced-aspread__intro-cols p,
.ced-faq p,
.ced-faq__a,
.ced-process p,
.ced-narrative__card p,
.ced-project-summary p,
.ced-project-stats p {
	max-width: 90ch !important;
}


/* Fix: services Spotlight Grid lacked color — only number text + icon
   were tinted, cards themselves were uniform dark. Add a subtle
   accent-tinted gradient background per card so the grid reads as a
   colourful set. Numbers + icons + accent line (existing from original
   block CSS) all still on-tone, but now the whole card pops. */
.ced-shub__card--lime {
	background: linear-gradient(135deg, rgba(203, 108, 230, 0.12) 0%, rgba(203, 108, 230, 0.025) 100%) !important;
	border-color: rgba(203, 108, 230, 0.18) !important;
}
.ced-shub__card--coral {
	background: linear-gradient(135deg, rgba(255, 107, 71, 0.12) 0%, rgba(255, 107, 71, 0.025) 100%) !important;
	border-color: rgba(255, 107, 71, 0.18) !important;
}
.ced-shub__card--sky {
	background: linear-gradient(135deg, rgba(78, 205, 196, 0.12) 0%, rgba(78, 205, 196, 0.025) 100%) !important;
	border-color: rgba(78, 205, 196, 0.18) !important;
}
.ced-shub__card--lavender {
	background: linear-gradient(135deg, rgba(181, 148, 255, 0.12) 0%, rgba(181, 148, 255, 0.025) 100%) !important;
	border-color: rgba(181, 148, 255, 0.18) !important;
}
.ced-shub__card--sunset {
	background: linear-gradient(135deg, rgba(255, 179, 71, 0.12) 0%, rgba(255, 179, 71, 0.025) 100%) !important;
	border-color: rgba(255, 179, 71, 0.18) !important;
}
.ced-shub__card--sage {
	background: linear-gradient(135deg, rgba(200, 221, 168, 0.12) 0%, rgba(200, 221, 168, 0.025) 100%) !important;
	border-color: rgba(200, 221, 168, 0.18) !important;
}
.ced-shub__card--rose {
	background: linear-gradient(135deg, rgba(255, 121, 158, 0.12) 0%, rgba(255, 121, 158, 0.025) 100%) !important;
	border-color: rgba(255, 121, 158, 0.18) !important;
}

/* Hover bumps tint stronger so the interaction reads */
.ced-shub__card--lime:hover     { background: linear-gradient(135deg, rgba(203, 108, 230, 0.20) 0%, rgba(203, 108, 230, 0.06) 100%) !important; }
.ced-shub__card--coral:hover    { background: linear-gradient(135deg, rgba(255, 107,  71, 0.20) 0%, rgba(255, 107,  71, 0.06) 100%) !important; }
.ced-shub__card--sky:hover      { background: linear-gradient(135deg, rgba( 78, 205, 196, 0.20) 0%, rgba( 78, 205, 196, 0.06) 100%) !important; }
.ced-shub__card--lavender:hover { background: linear-gradient(135deg, rgba(181, 148, 255, 0.20) 0%, rgba(181, 148, 255, 0.06) 100%) !important; }
.ced-shub__card--sunset:hover   { background: linear-gradient(135deg, rgba(255, 179,  71, 0.20) 0%, rgba(255, 179,  71, 0.06) 100%) !important; }
.ced-shub__card--sage:hover     { background: linear-gradient(135deg, rgba(200, 221, 168, 0.20) 0%, rgba(200, 221, 168, 0.06) 100%) !important; }
.ced-shub__card--rose:hover     { background: linear-gradient(135deg, rgba(255, 121, 158, 0.20) 0%, rgba(255, 121, 158, 0.06) 100%) !important; }

/* Icon background tints to match too (was uniform dark veil) */
.ced-shub__card--lime     .ced-shub__card-icon,
.ced-shub__card--coral    .ced-shub__card-icon,
.ced-shub__card--sky      .ced-shub__card-icon,
.ced-shub__card--lavender .ced-shub__card-icon,
.ced-shub__card--sunset   .ced-shub__card-icon,
.ced-shub__card--sage     .ced-shub__card-icon,
.ced-shub__card--rose     .ced-shub__card-icon {
	background: rgba(232, 229, 222, 0.04);
}

/* Cancel the original :first-child hero treatment so card 01 looks
   like the other 10 — color comes from accent tint, not from special
   first-card layout/background. */
.ced-shub__grid > .ced-shub__card:first-child {
	grid-column: auto !important;
	grid-template-areas: none !important;
	background: linear-gradient(135deg, rgba(181, 148, 255, 0.12) 0%, rgba(181, 148, 255, 0.025) 100%) !important;
	border-color: rgba(181, 148, 255, 0.18) !important;
	display: grid !important;
	grid-template-rows: auto auto 1fr auto !important;
	min-height: clamp(180px, 18vw, 240px) !important;
}


/* Text-readability fix for services Spotlight Grid:
   the Plan B cream cascade on .ced-shub was forcing service names +
   descriptions to dark ink, but the cards themselves are dark.
   Force paper-white on the dark sub-cards regardless of parent. */
.ced-shub .ced-shub__card .ced-shub__name {
	color: var(--wp--preset--color--paper) !important;
}
.ced-shub .ced-shub__card .ced-shub__lede-body {
	color: rgba(232, 229, 222, 0.7) !important;
}
.ced-shub .ced-shub__card .ced-shub__when {
	color: rgba(232, 229, 222, 0.5) !important;
}
.ced-shub .ced-shub__card .ced-shub__view {
	color: rgba(232, 229, 222, 0.85) !important;
}
.ced-shub .ced-shub__card:hover .ced-shub__view {
	color: var(--wp--preset--color--paper) !important;
}


/* Final reset for services :first-child card — the original block CSS
   (services-hub/style.css line 54+) makes card 01 a full-row hero
   inside @media (min-width: 1100px) with grid-template-areas + 2-col
   layout + oversized name/body font + grid-area assignments on the
   children. My earlier override only cancelled some of it, leaving
   orphan font-size + grid-area declarations that broke layout.
   Reset everything: card returns to single-column flow + children
   drop their grid-area + font-size overrides. Color tint stays. */
@media (min-width: 1100px) {
	.ced-shub__grid > .ced-shub__card:first-child {
		grid-column: auto !important;
		grid-template-columns: 1fr !important;
		grid-template-areas: none !important;
		grid-template-rows: auto auto 1fr auto !important;
		gap: 1rem !important;
		padding: clamp(1.75rem, 3vw, 2.5rem) !important;
		min-height: 320px !important;
		align-items: stretch !important;
	}
	.ced-shub__grid > .ced-shub__card:first-child .ced-shub__num,
	.ced-shub__grid > .ced-shub__card:first-child .ced-shub__name,
	.ced-shub__grid > .ced-shub__card:first-child .ced-shub__lede-body,
	.ced-shub__grid > .ced-shub__card:first-child footer {
		grid-area: auto !important;
	}
	.ced-shub__grid > .ced-shub__card:first-child .ced-shub__name {
		font-size: inherit !important;
		max-width: none !important;
	}
	.ced-shub__grid > .ced-shub__card:first-child .ced-shub__lede-body {
		font-size: inherit !important;
		max-width: none !important;
		margin: 0 !important;
		align-self: auto !important;
	}
}


/* Services card titles: force one-liner across full card width.
   Base block CSS had max-width: 18ch + font-size up to 2rem, which
   wrapped long titles like "WHITE-LABEL DEVELOPMENT FOR AGENCIES"
   to 3 lines. Drop the width cap, cap font to a size where the
   longest title fits in a 3-col grid at 1100-1600px viewport, and
   add `white-space: nowrap` + safety overflow so we never crop. */
.ced-shub .ced-shub__card .ced-shub__name {
	max-width: none !important;
	font-size: clamp(0.95rem, 1.15vw, 1.2rem) !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	letter-spacing: 0.005em !important;
}

/* Descriptions: match card 01's generous wrap — release the 50ch
   cap so every card uses its full width for the lede copy. */
.ced-shub .ced-shub__card .ced-shub__lede-body {
	max-width: none !important;
	font-size: 0.875rem !important;
	line-height: 1.55 !important;
}

/* Mobile: cards are full-width single-column — let the title wrap
   naturally; nowrap would clip badly on narrow screens. */
@media (max-width: 720px) {
	.ced-shub .ced-shub__card .ced-shub__name {
		white-space: normal !important;
		font-size: clamp(1.05rem, 4.5vw, 1.25rem) !important;
	}
}


/* Services page header seam fix:
   The WP block stack adds margin-block-start between the header
   template-part and <main>, producing a ~40px band of dark body bg
   above the cream services-hub section. That band sits exactly where
   the fixed header floats, so the header reads as "abutting a dark
   bar over the cream content."
   Fix: zero out <main>'s top margin on the services page so the
   cream section starts at y=0 and the header floats over a
   continuous cream surface. Scoped to .page (post type page) so
   single-post / archive pages keep their normal block-gap above main. */
body:not(.home) main.wp-block-group {
	margin-top: 0 !important;
}


/* Header readability on cream pages at scroll-y=0:
   After the main margin-top fix, the header now floats over a
   continuous cream surface from the moment the page loads. Its
   default unstuck state was transparent, so the light nav text +
   logo wordmark disappeared against cream.
   Apply the same dark veil + backdrop blur at the unstuck state on
   `.page`-type bodies (services, about, contact, work, project
   pages — all cream-led). Homepage (.home) keeps its transparent
   header because it sits over a dark hero. */
body:not(.home) .ced-header {
	background: rgba(5, 5, 7, 0.55) !important;
	backdrop-filter: saturate(180%) blur(18px) !important;
	-webkit-backdrop-filter: saturate(180%) blur(18px) !important;
	border-bottom-color: rgba(232, 229, 222, 0.10) !important;
}


/* Stacks bento — logo-centric treatment:
   - Logos render with their native brand fill colors (PHP no longer
     scrubs the fills), so each stack reads with its own identity
   - Card face is flex-centered so the logo sits dead-center
   - Logo is sized for visual weight without crowding the card
   - Hover-reveal back face is fully disabled — face stays visible,
     back face is hidden, no transforms or opacity changes on hover.
     The cards feel static and intentional, like a brand wall.
   - Subtle continuous CSS-keyframe motion on select brands
     (data-logo=react / flutter / webflow / framer / wordpress) gives
     the "lottie animated" feel without bringing in lottie-web.
   Category numbers (01 / 02 / 03 …) are no longer rendered. */
.ced-cms .ced-cms-card__face {
	display: flex !important;
	flex-direction: column;
	align-items: center !important;
	justify-content: center !important;
	min-height: clamp(140px, 13vw, 180px);
	padding: clamp(1.25rem, 2vw, 2rem) !important;
	gap: 0;
}

/* Logo itself: bigger, centered, brand-native colors */
.ced-cms .ced-cms-card__logo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: clamp(64px, 7vw, 96px);
	height: clamp(64px, 7vw, 96px);
	color: inherit;
	opacity: 1;
}
.ced-cms .ced-cms-card__logo svg {
	width: 100%;
	height: 100%;
	max-width: 100%;
	max-height: 100%;
	display: block;
}

/* Hide the small "↗" hint cue since cards no longer respond to hover */
.ced-cms .ced-cms-card__hint { display: none !important; }

/* Hide the back face entirely — no flip, no transforms, ever. */
.ced-cms .ced-cms-card__back {
	display: none !important;
}

/* Disable ALL hover/focus state changes on the cards. The bento now
   reads as a static brand wall — no opacity dip, no transform shift,
   no color change. */
.ced-cms .ced-cms-card,
.ced-cms .ced-cms-card:hover,
.ced-cms .ced-cms-card:focus,
.ced-cms .ced-cms-card:focus-visible,
.ced-cms .ced-cms-card:hover .ced-cms-card__face,
.ced-cms .ced-cms-card:focus-visible .ced-cms-card__face,
.ced-cms .ced-cms-card:hover .ced-cms-card__logo,
.ced-cms .ced-cms-card:focus-visible .ced-cms-card__logo {
	opacity: 1 !important;
	transform: none !important;
	pointer-events: auto !important;
	cursor: default;
}
.ced-cms .ced-cms-card:hover .ced-cms-card__face,
.ced-cms .ced-cms-card:focus-visible .ced-cms-card__face {
	opacity: 1 !important;
}

/* Fallback when an SVG file is missing — render the stack name
   centered in the card so the layout still reads. */
.ced-cms .ced-cms-card__name-fallback {
	color: var(--wp--preset--color--ink);
	font-weight: 500;
	letter-spacing: -0.01em;
	text-align: center;
}

/* ── Motion: continuous, hover-independent animations on select
   brand logos. Picked the brands whose marks have natural movement
   affordances:
   - React: rotates (echoes the atom orbit metaphor)
   - Flutter: gentle hue shimmer (the gradient blue is iconic)
   - Webflow: subtle scale pulse
   - Framer: gentle vertical float (matches the triangle "▶" rest)
   - WordPress: slow rotate (the WP circle works in motion)
   Animations respect prefers-reduced-motion. ────────────────────── */
@keyframes ced-stack-spin       { from { transform: rotate(0deg); }   to { transform: rotate(360deg); } }
@keyframes ced-stack-pulse      { 0%,100% { transform: scale(1); }  50% { transform: scale(1.06); } }
@keyframes ced-stack-float      { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes ced-stack-shimmer    { 0%,100% { filter: hue-rotate(0deg) saturate(1); } 50% { filter: hue-rotate(20deg) saturate(1.18); } }

.ced-cms .ced-cms-card__logo[data-logo="react"] svg     { animation: ced-stack-spin    18s linear infinite; transform-origin: 50% 50%; }
.ced-cms .ced-cms-card__logo[data-logo="wordpress"] svg { animation: ced-stack-spin    32s linear infinite; transform-origin: 50% 50%; }
.ced-cms .ced-cms-card__logo[data-logo="webflow"] svg   { animation: ced-stack-pulse  3.6s ease-in-out infinite; transform-origin: 50% 50%; }
.ced-cms .ced-cms-card__logo[data-logo="framer"] svg    { animation: ced-stack-float  4.0s ease-in-out infinite; }
.ced-cms .ced-cms-card__logo[data-logo="flutter"] svg   { animation: ced-stack-shimmer 5.0s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
	.ced-cms .ced-cms-card__logo svg { animation: none !important; }
}


/* Stacks bento cards — paper-white tiles on cream so the logos
   (most of which use brand-saturated colors) read at glance. Some
   brand marks have white as their canonical fill (Webflow, WordPress,
   Shopify, WooCommerce — meant for dark backgrounds); for those we
   override to the brand's secondary primary so they show up. */
.ced-cms .ced-cms-card {
	background: var(--wp--preset--color--paper) !important;
	border: 1px solid rgba(20, 20, 28, 0.06) !important;
	border-radius: clamp(14px, 1.5vw, 18px) !important;
	box-shadow: 0 1px 2px rgba(20, 20, 28, 0.04), 0 8px 24px -16px rgba(20, 20, 28, 0.10) !important;
}

/* Brand-color overrides for marks whose default fill is white
   (designed for dark-bg use). Falls back through path fill which
   wins the cascade against the SVG's attribute. */
.ced-cms .ced-cms-card__logo[data-logo="webflow"]     svg path { fill: #146EF5 !important; }
.ced-cms .ced-cms-card__logo[data-logo="wordpress"]   svg path { fill: #21759B !important; }
.ced-cms .ced-cms-card__logo[data-logo="shopify"]     svg path { fill: #95BF47 !important; }
.ced-cms .ced-cms-card__logo[data-logo="woocommerce"] svg path { fill: #7F54B3 !important; }

/* The 6 category bento boxes are no longer needed to provide their
   own contrast — cards do that now. Soften the bento bg so it just
   acts as a grouping container without competing with cards. */
.ced-cms__cat {
	background: transparent !important;
	border-color: rgba(20, 20, 28, 0.05) !important;
}


/* More brand-color overrides — the existing tech SVGs in the theme
   (downloaded for the dark-theme treatment) carry white fills that
   vanish on the new paper-white cards. Force each brand's
   canonical primary so they pop. Colors per each brand's published
   identity guide. */
.ced-cms .ced-cms-card__logo[data-logo="dotnet"]  svg path { fill: #512BD4 !important; }
.ced-cms .ced-cms-card__logo[data-logo="react"]   svg path { fill: #61DAFB !important; }
.ced-cms .ced-cms-card__logo[data-logo="php"]     svg path { fill: #777BB4 !important; }
.ced-cms .ced-cms-card__logo[data-logo="flutter"] svg path { fill: #02569B !important; }
.ced-cms .ced-cms-card__logo[data-logo="swift"]   svg path { fill: #F05138 !important; }
.ced-cms .ced-cms-card__logo[data-logo="android"] svg path { fill: #3DDC84 !important; }


/* Stacks bento — finalized treatment:
   1. Drop the continuous logo animations (React/WP/Webflow/Framer/
      Flutter spin/pulse/float/shimmer). Section reads static now.
   2. Show the stack name beneath the logo so non-technical readers
      can put a word to each brand mark.
   3. Force every card to be a uniform square (aspect-ratio: 1) so
      bento boxes with 3 cards and bento boxes with 4 cards (Mobile)
      both render identical-sized tiles. */

/* (1) Kill all logo animations. */
.ced-cms .ced-cms-card__logo svg,
.ced-cms .ced-cms-card__logo[data-logo="react"] svg,
.ced-cms .ced-cms-card__logo[data-logo="wordpress"] svg,
.ced-cms .ced-cms-card__logo[data-logo="webflow"] svg,
.ced-cms .ced-cms-card__logo[data-logo="framer"] svg,
.ced-cms .ced-cms-card__logo[data-logo="flutter"] svg {
	animation: none !important;
	transform: none !important;
	filter: none !important;
}

/* (2) Surface the stack name below the logo, dropped quietly so the
   logo remains the focal point. */
.ced-cms .ced-cms-card .ced-cms-card__name {
	display: block !important;
	margin-top: 0.85rem;
	font-family: var(--font-display, 'Anton', sans-serif);
	font-size: clamp(0.78rem, 0.85vw, 0.92rem);
	font-weight: 400;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(20, 20, 28, 0.7);
	text-align: center;
	line-height: 1.1;
	max-width: none;
}

/* (3) Uniform card size: square tile, logo + name stacked,
   identical regardless of how many cards share a row. */
.ced-cms .ced-cms-card {
	aspect-ratio: 1 / 1 !important;
	min-height: 0 !important;
	max-height: none;
	display: grid !important;
	grid-template-rows: 1fr !important;
}
.ced-cms .ced-cms-card__face {
	grid-area: 1 / 1 !important;
	flex-direction: column;
	min-height: 0 !important;
	padding: clamp(1rem, 1.6vw, 1.4rem) !important;
	gap: 0;
}

/* Logo shrinks slightly so the name fits inside the square without
   crowding. Roughly 55-60% of card height for the logo, name below. */
.ced-cms .ced-cms-card__logo {
	width: clamp(48px, 5.5vw, 76px);
	height: clamp(48px, 5.5vw, 76px);
}

/* Cards inside the bento containers should use a 3-col grid even when
   the category only has 3 items. Mobile (4 items) keeps its 2x2
   arrangement at narrow widths but wraps to 3+1 at wide widths. */
.ced-cms .ced-cms__cards {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: clamp(0.5rem, 0.8vw, 0.85rem) !important;
}
@media (max-width: 720px) {
	.ced-cms .ced-cms__cards {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}


/* The original bento grid was 1.2fr / 1fr asymmetric — designed for
   the old text-stack layout where the left column held the "lead"
   category. With logo cards now needing identical square dimensions
   across all six bento panels, force the two columns equal. */
@media (min-width: 900px) {
	.ced-cms__bento {
		grid-template-columns: 1fr 1fr !important;
		grid-auto-rows: minmax(0, auto) !important;
	}
}