/**
 * Clearsight block styles.
 *
 * Styles all cs/* blocks, patterns, header, footer, forms, and page templates.
 * Uses theme.json CSS variables: var(--wp--preset--color--*), var(--wp--preset--spacing--*).
 */

/* ==========================================================================
   Design tokens (pulled from theme.json preset vars, with fallbacks)
   ========================================================================== */

:root {
	--cs-navy:       var(--wp--preset--color--navy, var(--wp--preset--color--navy));
	--cs-navy-deep:  var(--wp--preset--color--navy-deep, var(--wp--preset--color--navy-deep));
	--cs-orange:     var(--wp--preset--color--orange, var(--wp--preset--color--orange));
	--cs-cream:      var(--wp--preset--color--cream, var(--wp--preset--color--cream));
	--cs-bone:       var(--wp--preset--color--bone, var(--wp--preset--color--bone));
	--cs-muted:      var(--wp--preset--color--muted, var(--wp--preset--color--muted));
	--cs-white:      #ffffff;
	--cs-border:     rgba(15, 31, 58, 0.08);
	--cs-border-lt:  rgba(15, 31, 58, 0.05);
	--cs-shadow-card:0 1px 2px rgba(12, 26, 56, 0.04), 0 8px 24px rgba(12, 26, 56, 0.06);
	--cs-shadow-nav: 0 1px 3px rgba(12, 26, 56, 0.06), 0 6px 18px rgba(12, 26, 56, 0.08);
	--cs-radius-sm:  10px;
	--cs-radius:     16px;
	--cs-radius-md:  20px;
	--cs-radius-lg:  24px;
	--cs-radius-xl:  32px;
	/* --- Hero / section spacing contract (variation-overridable) ---
	   Each cs-* var falls back through the matching --wp--custom--* var so
	   theme.json variations (settings.custom.cs.hero.minHeight, etc.) can
	   override these defaults without touching this file. */
	--cs-hero-min-height: var(--wp--custom--cs--hero--min-height, min(50vh, 540px));
	--cs-hero-min-height-tablet: var(--wp--custom--cs--hero--min-height-tablet, min(55vh, 480px));
	--cs-hero-min-height-mobile: var(--wp--custom--cs--hero--min-height-mobile, min(60vh, 420px));
	--cs-hero-bg-image: var(--wp--custom--cs--hero--bg-image, none);
	--cs-hero-overlay: var(--wp--custom--cs--hero--overlay, linear-gradient(180deg, rgba(12,26,56,0.18) 0%, rgba(12,26,56,0.42) 100%));
	--cs-section-padding: var(--wp--custom--cs--section--padding, clamp(48px, 6vw, 80px));
	--cs-section-padding-sm: var(--wp--custom--cs--section--padding-sm, clamp(32px, 4vw, 56px));
	--cs-block-gap: var(--wp--custom--cs--block--gap, 32px);
}

/* ==========================================================================
   Base resets / body
   ========================================================================== */

body {
	background: var(--cs-bone);
	color: var(--cs-navy);
}

.cs-main {
	background: var(--cs-bone);
}

/* ==========================================================================
   Kicker
   ========================================================================== */

.cs-kicker {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", ui-monospace, monospace);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var(--cs-navy);
	margin: 0 0 12px;
}

.cs-kicker--muted {
	color: var(--cs-muted);
}

.cs-kicker--on-dark {
	color: rgba(255, 255, 255, 0.85);
}

.cs-kicker--orange {
	color: var(--cs-orange);
}

/* ==========================================================================
   Pill
   ========================================================================== */

.cs-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 14px;
	border-radius: 999px;
	font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", ui-monospace, monospace);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	background: rgba(255, 255, 255, 0.1);
	color: var(--cs-navy);
	border: 1px solid var(--cs-border);
}

.cs-pill--on-dark {
	background: rgba(255, 255, 255, 0.08);
	color: rgba(255, 255, 255, 0.92);
	border-color: rgba(255, 255, 255, 0.18);
}

.cs-pill--orange {
	background: rgba(247, 144, 24, 0.12);
	color: var(--cs-orange);
	border-color: rgba(247, 144, 24, 0.3);
}

.cs-pill--cream {
	background: var(--cs-cream);
	color: var(--cs-navy);
	border-color: var(--cs-border);
}

/* ==========================================================================
   KPI chip
   ========================================================================== */

.cs-kpi-chip {
	display: inline-flex;
	align-items: baseline;
	gap: 10px;
	padding: 14px 20px;
	background: var(--cs-white);
	border: 1px solid var(--cs-border);
	border-radius: 14px;
	box-shadow: var(--cs-shadow-card);
}

.cs-kpi-chip__value {
	font-family: var(--wp--preset--font-family--serif, "Fraunces", Georgia, serif);
	font-size: 28px;
	font-weight: 600;
	color: var(--cs-navy);
	line-height: 1;
}

.cs-kpi-chip__label {
	font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", ui-monospace, monospace);
	font-size: 11px;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--cs-muted);
}

/* ==========================================================================
   Stat card (dark)
   ========================================================================== */

.cs-stat-card-dark {
	background: var(--cs-navy-deep);
	color: var(--cs-white);
	border-radius: var(--cs-radius-lg);
	padding: 32px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.cs-stat-card-dark__kicker {
	font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", ui-monospace, monospace);
	font-size: 11px;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.6);
	margin: 0;
}

.cs-stat-card-dark__value {
	font-family: var(--wp--preset--font-family--serif, "Fraunces", Georgia, serif);
	font-size: clamp(40px, 6vw, 64px);
	font-weight: 600;
	line-height: 1;
	margin: 0;
	color: var(--cs-orange);
}

.cs-stat-card-dark__label {
	font-size: 14px;
	color: rgba(255, 255, 255, 0.85);
	margin: 0;
}

/* ==========================================================================
   Pricing tier
   ========================================================================== */

.cs-pricing-tier {
	background: var(--cs-white);
	border: 1px solid var(--cs-border);
	border-radius: var(--cs-radius-lg);
	padding: 36px 32px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	box-shadow: var(--cs-shadow-card);
	position: relative;
}

.cs-pricing-tier--popular {
	border-color: var(--cs-orange);
	box-shadow: 0 1px 2px rgba(247, 144, 24, 0.08), 0 12px 32px rgba(247, 144, 24, 0.18);
}

.cs-pricing-tier__badge {
	position: absolute;
	top: -12px;
	left: 32px;
	background: var(--cs-orange);
	color: var(--cs-white);
	font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", ui-monospace, monospace);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	padding: 6px 14px;
	border-radius: 999px;
}

.cs-pricing-tier__name {
	font-family: var(--wp--preset--font-family--serif, "Fraunces", Georgia, serif);
	font-size: 24px;
	font-weight: 600;
	margin: 0;
	color: var(--cs-navy);
}

.cs-pricing-tier__price {
	display: flex;
	align-items: baseline;
	gap: 6px;
	margin: 0;
}

.cs-pricing-tier__price-value {
	font-family: var(--wp--preset--font-family--serif, "Fraunces", Georgia, serif);
	font-size: 48px;
	font-weight: 600;
	color: var(--cs-navy);
	line-height: 1;
}

.cs-pricing-tier__price-suffix {
	font-size: 14px;
	color: var(--cs-muted);
}

.cs-pricing-tier__summary {
	font-size: 15px;
	color: var(--cs-muted);
	margin: 0;
}

.cs-pricing-tier__features {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.cs-pricing-tier__features li {
	padding-left: 24px;
	position: relative;
	font-size: 15px;
	color: var(--cs-navy);
}

.cs-pricing-tier__features li::before {
	content: "✓";
	position: absolute;
	left: 0;
	top: 0;
	color: var(--cs-orange);
	font-weight: 700;
}

.cs-pricing-tier__cta {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 24px;
	background: var(--cs-navy);
	color: var(--cs-white);
	border-radius: 999px;
	text-decoration: none;
	font-weight: 500;
	transition: background 0.2s;
}

.cs-pricing-tier__cta:hover {
	background: var(--cs-navy-deep);
}

.cs-pricing-tier--popular .cs-pricing-tier__cta {
	background: var(--cs-orange);
}

.cs-pricing-tier--popular .cs-pricing-tier__cta:hover {
	background: var(--wp--preset--color--orange);
}

/* ==========================================================================
   Deliverables
   ========================================================================== */

.cs-deliverables {
	background: var(--cs-white);
	border-radius: var(--cs-radius-lg);
	padding: 32px;
	box-shadow: var(--cs-shadow-card);
}

.cs-deliverables__heading {
	font-family: var(--wp--preset--font-family--serif, "Fraunces", Georgia, serif);
	font-size: 22px;
	font-weight: 600;
	margin: 0 0 20px;
	color: var(--cs-navy);
}

.cs-deliverables__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 12px 24px;
}

.cs-deliverables__list li {
	padding-left: 28px;
	position: relative;
	color: var(--cs-navy);
	font-size: 15px;
	line-height: 1.5;
}

.cs-deliverables__list li::before {
	content: "✓";
	position: absolute;
	left: 0;
	top: 0;
	color: var(--cs-orange);
	font-weight: 700;
}

/* ==========================================================================
   Timeline
   ========================================================================== */

.cs-timeline {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.cs-timeline__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 24px;
	counter-reset: timeline;
}

.cs-timeline__step {
	background: var(--cs-white);
	border: 1px solid var(--cs-border);
	border-radius: var(--cs-radius);
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	position: relative;
}

.cs-timeline__num {
	font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", ui-monospace, monospace);
	font-size: 12px;
	letter-spacing: 1.4px;
	color: var(--cs-orange);
}

.cs-timeline__title {
	font-family: var(--wp--preset--font-family--serif, "Fraunces", Georgia, serif);
	font-size: 18px;
	font-weight: 600;
	color: var(--cs-navy);
	margin: 0;
}

.cs-timeline__copy {
	font-size: 14px;
	color: var(--cs-muted);
	line-height: 1.5;
	margin: 0;
}

/* ==========================================================================
   FAQ
   ========================================================================== */

.cs-faq {
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: 820px;
}

.cs-faq__item {
	background: var(--cs-white);
	border: 1px solid var(--cs-border);
	border-radius: var(--cs-radius);
	padding: 20px 24px;
	transition: box-shadow 0.2s;
}

.cs-faq__item[open] {
	box-shadow: var(--cs-shadow-card);
}

.cs-faq__q {
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	font-weight: 500;
	color: var(--cs-navy);
	font-size: 16px;
}

.cs-faq__q::-webkit-details-marker {
	display: none;
}

.cs-faq__q-text {
	flex: 1;
}

.cs-faq__q-icon {
	width: 24px;
	height: 24px;
	flex-shrink: 0;
	transition: transform 0.2s;
	color: var(--cs-orange);
}

.cs-faq__item[open] .cs-faq__q-icon {
	transform: rotate(45deg);
}

.cs-faq__a {
	padding-top: 16px;
	color: var(--cs-muted);
	line-height: 1.6;
	font-size: 15px;
}

/* ==========================================================================
   Data callout
   ========================================================================== */

.cs-data-callout {
	background: var(--cs-navy-deep);
	color: var(--cs-white);
	border-radius: var(--cs-radius-xl);
	padding: 48px 40px;
	text-align: center;
}

.cs-data-callout__kicker {
	font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", ui-monospace, monospace);
	font-size: 11px;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.6);
	margin: 0 0 12px;
}

.cs-data-callout__value {
	font-family: var(--wp--preset--font-family--serif, "Fraunces", Georgia, serif);
	font-size: clamp(56px, 9vw, 96px);
	font-weight: 600;
	color: var(--cs-orange);
	margin: 0 0 8px;
	line-height: 1;
}

.cs-data-callout__label {
	font-size: 18px;
	color: rgba(255, 255, 255, 0.9);
	margin: 0 0 16px;
}

.cs-data-callout__footnote {
	font-size: 13px;
	color: rgba(255, 255, 255, 0.5);
	margin: 0;
}

/* ==========================================================================
   Quote
   ========================================================================== */

.cs-quote {
	margin: 0;
	padding: 40px;
	background: var(--cs-cream);
	border-left: 3px solid var(--cs-blue, #3a7fb8);
	border-radius: var(--cs-radius);
}

.cs-quote__text {
	font-family: var(--wp--preset--font-family--serif, "Fraunces", Georgia, serif);
	font-size: clamp(22px, 2.4vw, 28px);
	font-weight: 400;
	line-height: 1.4;
	color: var(--cs-navy);
	margin: 0 0 20px;
}

.cs-quote__caption {
	font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", ui-monospace, monospace);
	font-size: 12px;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--cs-muted);
}

.cs-quote__who {
	color: var(--cs-navy);
	font-weight: 500;
}

.cs-quote__title {
	color: var(--cs-muted);
}

/* ==========================================================================
   Breadcrumb
   ========================================================================== */

.cs-breadcrumb {
	padding: 16px var(--wp--preset--spacing--80, 80px);
	background: transparent;
}

.cs-breadcrumb__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 4px 8px;
	font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", ui-monospace, monospace);
	font-size: 11px;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--cs-muted);
}

.cs-breadcrumb__list li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.cs-breadcrumb__list li + li::before {
	content: "/";
	color: var(--cs-muted);
	opacity: 0.5;
}

.cs-breadcrumb__list a {
	color: var(--cs-navy);
	text-decoration: none;
}

.cs-breadcrumb__list a:hover {
	color: var(--cs-orange);
}

.cs-breadcrumb__list [aria-current="page"] {
	color: var(--cs-muted);
}

/* ==========================================================================
   Hero video
   ========================================================================== */

/* v2 hero — text-left + video-card-right on cream. Supersedes the old full-bleed style. */
.cs-hero-v2 {
	background: var(--cs-bone, #f6eddd);
	padding: 56px 48px 72px;
	isolation: isolate;
}

.cs-hero-v2__inner {
	max-width: 1440px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.45fr 1fr;
	gap: 56px;
	align-items: center;
}

.cs-hero-v2__left { min-width: 0; }

.cs-hero-v2__heading {
	font-family: var(--wp--preset--font-family--sans, "Inter", system-ui, sans-serif);
	font-size: clamp(48px, 8.5vw, 132px);
	font-weight: 700;
	line-height: 0.92;
	letter-spacing: -0.032em;
	color: var(--cs-navy, var(--wp--preset--color--navy));
	margin: 18px 0 0;
	text-wrap: balance;
}

.cs-hero-v2__hl {
	background: linear-gradient(180deg, transparent 62%, var(--cs-orange-soft, var(--wp--preset--color--orange-soft)) 62%);
	padding-right: 4px;
}

.cs-hero-v2__lede {
	margin: 28px 0 0;
	max-width: 620px;
	font-size: clamp(16px, 1.35vw, 20px);
	line-height: 1.55;
	color: #2a2f3a;
}

.cs-hero-v2__ctas {
	margin-top: 32px;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.cs-hero-v2__trust {
	margin-top: 40px;
	display: flex;
	align-items: center;
	gap: 20px;
}

.cs-hero-v2__avatars {
	display: inline-flex;
}

.cs-hero-v2__avatars span {
	display: block;
	width: 36px;
	height: 36px;
	border-radius: 999px;
	border: 2px solid #fff;
	margin-left: -10px;
}

.cs-hero-v2__avatars span:first-child { margin-left: 0; }

.cs-hero-v2__trust-copy {
	font-size: 13px;
	color: var(--cs-muted, var(--wp--preset--color--muted));
	line-height: 1.4;
}

.cs-hero-v2__trust-copy strong {
	display: block;
	color: var(--cs-navy, var(--wp--preset--color--navy));
	font-weight: 600;
}

.cs-hero-v2__right {
	min-width: 0;
}

.cs-hero-v2__videocard {
	background: #fff;
	border-radius: 20px;
	padding: 10px;
	box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 20px 60px rgba(20,30,60,.10);
	position: relative;
	overflow: hidden;
}

.cs-hero-v2__videoframe {
	position: relative;
	width: 100%;
	aspect-ratio: 720 / 1130;
	border-radius: 14px;
	overflow: hidden;
	background: var(--cs-navy-deep, var(--wp--preset--color--navy-deep));
}

.cs-hero-v2__video,
.cs-hero-v2__poster {
	position: absolute;
	left: 0;
	top: -13.274%;
	width: 100%;
	height: auto;
	display: block;
	object-fit: cover;
}

/* Keep the legacy class alive for any old markup, but restyle as cream */
.cs-hero-video {
	position: relative;
	background: var(--cs-bone, #f6eddd);
	color: var(--cs-navy, var(--wp--preset--color--navy));
	padding: 24px 48px 72px;
	isolation: isolate;
}

/* ==========================================================================
   Section reveal animation (sitewide)
   Elements with [data-cs-reveal] start hidden+offset and fade-up into place
   as they scroll into view. JS in clearsight.js toggles .is-visible.
   ========================================================================== */
[data-cs-reveal] {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 500ms cubic-bezier(.2,.8,.2,1),
	            transform 500ms cubic-bezier(.2,.8,.2,1);
	will-change: opacity, transform;
}

[data-cs-reveal].is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* Small stagger when multiple children of one parent are revealed together */
[data-cs-reveal-group] > [data-cs-reveal]:nth-child(1) { transition-delay: 0ms; }
[data-cs-reveal-group] > [data-cs-reveal]:nth-child(2) { transition-delay: 80ms; }
[data-cs-reveal-group] > [data-cs-reveal]:nth-child(3) { transition-delay: 160ms; }
[data-cs-reveal-group] > [data-cs-reveal]:nth-child(4) { transition-delay: 240ms; }
[data-cs-reveal-group] > [data-cs-reveal]:nth-child(5) { transition-delay: 320ms; }
[data-cs-reveal-group] > [data-cs-reveal]:nth-child(6) { transition-delay: 400ms; }

/* Respect reduced-motion — never animate, always show */
@media (prefers-reduced-motion: reduce) {
	[data-cs-reveal],
	[data-cs-reveal].is-visible {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* Mobile hero stack */
@media (max-width: 900px) {
	.cs-hero-v2 { padding: 40px 20px 48px; }
	.cs-hero-v2__inner {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	.cs-hero-v2__heading { font-size: clamp(36px, 10vw, 64px); }
	.cs-hero-v2__videocard { max-width: 420px; margin: 0 auto; }
}

/* ==========================================================================
   Editorial page hero (about, contact, insights, etc.)
   ========================================================================== */
.cs-page-hero {
	background: var(--cs-bone, #f6eddd);
	padding: 24px 48px 80px;
}
.cs-page-hero__inner { max-width: 1440px; margin: 0 auto; }
.cs-page-hero__heading {
	font-family: var(--wp--preset--font-family--sans, "Inter", sans-serif);
	font-weight: 700;
	font-size: clamp(48px, 9vw, 128px);
	line-height: 0.92;
	letter-spacing: -0.032em;
	color: var(--cs-navy, var(--wp--preset--color--navy));
	margin: 24px 0 0;
	max-width: 1200px;
	text-wrap: balance;
}
.cs-page-hero__italic {
	font-family: var(--wp--preset--font-family--serif, "Fraunces", Georgia, serif);
	font-style: italic;
	font-weight: 400;
}
.cs-page-hero__body {
	display: grid;
	grid-template-columns: 1fr 1.2fr;
	gap: 64px;
	margin-top: 48px;
	align-items: stretch;
}
.cs-page-hero__prose p {
	font-size: clamp(16px, 1.2vw, 18px);
	color: #2a2f3a;
	line-height: 1.7;
	margin: 0 0 18px;
}
.cs-page-hero__prose p:last-child { margin-bottom: 0; }
.cs-page-hero__card {
	background: linear-gradient(135deg, var(--cs-navy, var(--wp--preset--color--navy)) 0%, var(--cs-blue, var(--wp--preset--color--blue)) 100%);
	border-radius: 24px;
	padding: 40px;
	color: #fff;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 24px;
	min-height: 420px;
	position: relative;
	overflow: hidden;
}
.cs-page-hero__card-glow {
	position: absolute;
	right: -100px;
	bottom: -100px;
	width: 400px;
	height: 400px;
	border-radius: 999px;
	background: radial-gradient(closest-side, rgba(247,144,24,0.2), transparent);
	pointer-events: none;
}
.cs-page-hero__card > * { position: relative; z-index: 1; }
.cs-page-hero__quote {
	font-family: var(--wp--preset--font-family--serif, "Fraunces", Georgia, serif);
	font-size: clamp(24px, 2.8vw, 44px);
	line-height: 1.1;
	font-weight: 400;
	font-style: italic;
	letter-spacing: -0.025em;
	color: #fff;
	margin: 0;
}
.cs-page-hero__quote-attr {
	margin-top: 24px;
	font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", monospace);
	font-size: 12px;
	letter-spacing: 1.5px;
	color: var(--cs-orange-soft, var(--wp--preset--color--orange-soft));
	text-transform: uppercase;
}

/* ==========================================================================
   Archive hero (services / industries / case studies)
   ========================================================================== */
.cs-archive-hero {
	background: var(--cs-bone, #f6eddd);
	padding: 56px 48px 72px;
}
.cs-archive-hero__inner { max-width: 1440px; margin: 0 auto; }
.cs-archive-hero__heading {
	font-family: var(--wp--preset--font-family--sans, "Inter", sans-serif);
	font-weight: 700;
	font-size: clamp(44px, 6.8vw, 88px);
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--cs-navy, var(--wp--preset--color--navy));
	margin: 18px 0 0;
	max-width: 1100px;
	text-wrap: balance;
}
.cs-archive-hero__italic {
	font-family: var(--wp--preset--font-family--serif, "Fraunces", Georgia, serif);
	font-style: italic;
	font-weight: 400;
}
.cs-archive-hero__lede {
	margin: 24px 0 0;
	max-width: 620px;
	font-size: clamp(16px, 1.2vw, 19px);
	line-height: 1.55;
	color: #2a2f3a;
}

@media (max-width: 900px) {
	.cs-page-hero { padding: 40px 20px 56px; }
	.cs-page-hero__body { grid-template-columns: 1fr; gap: 32px; margin-top: 32px; }
	.cs-page-hero__card { min-height: 280px; padding: 28px; }
	.cs-archive-hero { padding: 40px 20px 48px; }
}

/* ==========================================================================
   Generic interior-section prose block — used on about, insights hubs, etc.
   ========================================================================== */
.cs-interior-section {
	padding: 96px 48px;
	max-width: 1440px;
	margin: 0 auto;
}
@media (max-width: 900px) {
	.cs-interior-section { padding: 56px 20px; }
}

/* ==========================================================================
   Pill variants used by new hero patterns
   ========================================================================== */
.cs-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 12px;
	border-radius: 999px;
	font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", monospace);
	font-size: 11px;
	letter-spacing: 1.4px;
	text-transform: uppercase;
}
.cs-pill--section {
	background: var(--cs-orange-soft, var(--wp--preset--color--orange-soft));
	color: var(--cs-orange-ink, var(--wp--preset--color--orange-ink));
}
.cs-pill--on-dark {
	background: rgba(255,255,255,0.1);
	color: #fff;
}
.cs-pill__dot { font-size: 8px; color: var(--cs-orange, var(--wp--preset--color--orange)); }
.cs-pill--on-dark .cs-pill__dot { color: var(--cs-orange, var(--wp--preset--color--orange)); }

.cs-hero-video__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
	opacity: 0.65;
}

.cs-hero-video__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(12, 26, 56, 0.55) 0%, rgba(12, 26, 56, 0.8) 100%);
	z-index: 1;
}

.cs-hero-video__fade {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 220px;
	background: linear-gradient(180deg, rgba(247, 243, 233, 0) 0%, var(--cs-bone) 90%);
	z-index: 2;
	pointer-events: none;
}

.cs-hero-video__grid {
	position: relative;
	z-index: 3;
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
}

.cs-hero-video__inner {
	position: relative;
	z-index: 3;
	display: flex;
	flex-direction: column;
	gap: 24px;
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
}

.cs-hero-video__inner > * {
	max-width: 780px;
}

.cs-hero-video__kicker {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", ui-monospace, monospace);
	font-size: 11px;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var(--cs-orange);
	margin: 0;
}

.cs-hero-video__kicker::before {
	content: "●";
	color: var(--cs-orange);
	font-size: 8px;
}

.cs-hero-video__heading {
	font-family: var(--wp--preset--font-family--serif, "Fraunces", Georgia, serif);
	font-size: clamp(40px, 6vw, 72px);
	font-weight: 500;
	line-height: 1.05;
	letter-spacing: -0.02em;
	margin: 0;
	color: var(--cs-white);
}

.cs-hero-video__lede {
	font-size: clamp(16px, 1.4vw, 19px);
	color: rgba(255, 255, 255, 0.85);
	max-width: 620px;
	line-height: 1.5;
	margin: 0;
}

.cs-hero-video__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 8px;
}

.cs-hero-video--no-video .cs-hero-video__video {
	display: none;
}

.cs-hero-video--no-video {
	background: linear-gradient(180deg, var(--cs-navy-deep) 0%, var(--cs-navy) 100%);
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.cs-btn,
.wp-block-button__link.cs-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 24px;
	border-radius: 999px;
	font-size: 15px;
	font-weight: 500;
	text-decoration: none;
	transition: transform 0.15s, background 0.2s;
	border: 1px solid transparent;
	cursor: pointer;
}

.cs-btn:hover { transform: translateY(-1px); }

.cs-btn--primary {
	background: var(--cs-orange);
	color: var(--cs-navy);
}

.cs-btn--primary:hover {
	background: var(--wp--preset--color--orange);
	color: var(--cs-navy);
}

.cs-btn--secondary {
	background: var(--cs-white);
	color: var(--cs-navy);
	border-color: var(--cs-border);
}

.cs-btn--ghost {
	background: rgba(255, 255, 255, 0.08);
	color: var(--cs-white);
	border-color: rgba(255, 255, 255, 0.22);
}

.cs-btn--ghost:hover {
	background: rgba(255, 255, 255, 0.14);
}

.cs-btn--link {
	padding: 0;
	background: transparent;
	color: var(--cs-orange);
	border-radius: 0;
}

/* ==========================================================================
   Service / Industry / Case / Team cards
   ========================================================================== */

.cs-service-card,
.cs-industry-card,
.cs-case-card,
.cs-team-card {
	background: var(--cs-white);
	border-radius: var(--cs-radius-lg);
	padding: 32px;
	box-shadow: var(--cs-shadow-card);
	transition: transform 0.2s, box-shadow 0.2s;
	display: flex;
	flex-direction: column;
	gap: 14px;
	text-decoration: none;
	color: var(--cs-navy);
	border: 1px solid var(--cs-border-lt);
}

.cs-service-card:hover,
.cs-industry-card:hover,
.cs-case-card:hover,
.cs-team-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 2px 4px rgba(12, 26, 56, 0.06), 0 16px 36px rgba(12, 26, 56, 0.1);
}

.cs-service-card__kicker,
.cs-industry-card__kicker,
.cs-case-card__kicker {
	font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", ui-monospace, monospace);
	font-size: 11px;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var(--cs-muted);
}

.cs-service-card__title,
.cs-industry-card__title,
.cs-case-card__title,
.cs-team-card__name {
	font-family: var(--wp--preset--font-family--serif, "Fraunces", Georgia, serif);
	font-size: 22px;
	font-weight: 600;
	margin: 0;
	color: var(--cs-navy);
	line-height: 1.2;
}

.cs-service-card__summary,
.cs-industry-card__summary,
.cs-case-card__summary,
.cs-team-card__bio {
	font-size: 15px;
	color: var(--cs-muted);
	margin: 0;
	line-height: 1.5;
}

.cs-service-card__metric,
.cs-industry-card__metric,
.cs-case-card__metric {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 14px 16px;
	background: var(--cs-cream);
	border-radius: 12px;
	margin-top: auto;
}

.cs-service-card__metric-value,
.cs-industry-card__metric-value,
.cs-case-card__metric-value {
	font-family: var(--wp--preset--font-family--serif, "Fraunces", Georgia, serif);
	font-size: 24px;
	font-weight: 600;
	color: var(--cs-orange);
	line-height: 1;
}

.cs-service-card__metric-label,
.cs-industry-card__metric-label,
.cs-case-card__metric-label {
	font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", ui-monospace, monospace);
	font-size: 10px;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--cs-muted);
}

.cs-case-card__image,
.cs-industry-card__image {
	width: calc(100% + 64px);
	margin: -32px -32px 0;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border-radius: var(--cs-radius-lg) var(--cs-radius-lg) 0 0;
}

.cs-case-card--featured {
	grid-column: span 2;
	background: var(--cs-navy-deep);
	color: var(--cs-white);
}

.cs-case-card--featured .cs-case-card__title,
.cs-case-card--featured .cs-case-card__summary {
	color: var(--cs-white);
}

.cs-case-card--featured .cs-case-card__kicker {
	color: rgba(255, 255, 255, 0.6);
}

.cs-case-card--featured .cs-case-card__metric {
	background: rgba(255, 255, 255, 0.08);
}

.cs-case-card--featured .cs-case-card__metric-label {
	color: rgba(255, 255, 255, 0.6);
}

.cs-team-card__headshot {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: var(--cs-radius);
	margin-bottom: 4px;
}

/* Pattern grid containers — sit inside the constrained-layout wrapper. */
.cs-service-cards-grid__cols {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
	margin-top: 32px;
}

.cs-case-cards-grid__featured-row {
	display: block;
}

.cs-case-cards-grid__featured-row .cs-case-card--featured {
	width: 100%;
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 32px;
	align-items: start;
	padding: 48px;
}

.cs-case-cards-grid__row {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
}

@media (max-width: 1023px) {
	.cs-service-cards-grid__cols {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.cs-case-cards-grid__featured-row .cs-case-card--featured {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 767px) {
	.cs-service-cards-grid__cols,
	.cs-case-cards-grid__row {
		grid-template-columns: 1fr !important;
	}
	.cs-case-cards-grid__featured-row .cs-case-card--featured {
		padding: 32px 24px;
	}
}

.cs-team-card__role {
	font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", ui-monospace, monospace);
	font-size: 11px;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--cs-orange);
}

.cs-team-card__linkedin {
	font-size: 13px;
	color: var(--cs-navy);
	text-decoration: none;
	margin-top: 4px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.cs-team-card__linkedin:hover {
	color: var(--cs-orange);
}

/* Archive grids */

.cs-case-archive-grid,
.cs-industry-archive-grid,
.cs-service-archive-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 32px;
}

.cs-insight-card {
	transition: transform 0.2s, box-shadow 0.2s;
	box-shadow: var(--cs-shadow-card);
}

.cs-insight-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 2px 4px rgba(12, 26, 56, 0.06), 0 16px 36px rgba(12, 26, 56, 0.1);
}

/* ==========================================================================
   Table of contents (TOC)
   ========================================================================== */

.cs-toc {
	position: sticky;
	top: 100px;
	background: var(--cs-white);
	border: 1px solid var(--cs-border-lt);
	border-radius: var(--cs-radius);
	padding: 24px;
	font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", ui-monospace, monospace);
}

.cs-toc__heading {
	font-size: 11px;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var(--cs-muted);
	margin: 0 0 14px;
	font-weight: 500;
}

.cs-toc__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.cs-toc__list--sub {
	padding-left: 16px;
	margin-top: 8px;
	gap: 6px;
}

.cs-toc__link {
	font-size: 12px;
	color: var(--cs-navy);
	text-decoration: none;
	line-height: 1.5;
	display: block;
	padding-left: 12px;
	border-left: 2px solid transparent;
	transition: border-color 0.2s, color 0.2s;
}

.cs-toc__link:hover,
.cs-toc__link--active {
	color: var(--cs-orange);
	border-left-color: var(--cs-orange);
}

/* ==========================================================================
   Byline
   ========================================================================== */

.cs-byline {
	display: flex;
	align-items: center;
	gap: 12px;
	font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", ui-monospace, monospace);
	font-size: 12px;
	letter-spacing: 0.6px;
	color: var(--cs-muted);
	padding: 16px 0;
	border-top: 1px solid var(--cs-border-lt);
	border-bottom: 1px solid var(--cs-border-lt);
}

.cs-byline__avatar {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}

.cs-byline__author {
	color: var(--cs-navy);
	font-weight: 500;
}

.cs-byline__sep {
	opacity: 0.4;
}

/* ==========================================================================
   Related content
   ========================================================================== */

.cs-related-content {
	padding: 48px var(--wp--preset--spacing--80, 80px);
}

.cs-related-content__heading {
	font-family: var(--wp--preset--font-family--serif, "Fraunces", Georgia, serif);
	font-size: 28px;
	font-weight: 600;
	margin: 0 0 24px;
	color: var(--cs-navy);
}

.cs-related-content__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 24px;
}

/* ==========================================================================
   Service single hero — two-column with live "operator scorecard" card.
   ========================================================================== */
.cs-service-hero {
	background: var(--wp--preset--color--cream, #f7efe1);
	padding: clamp(48px, 6vw, 88px) clamp(20px, 4vw, 64px) clamp(56px, 7vw, 96px);
}
.cs-service-hero__inner {
	max-width: 1440px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	gap: clamp(32px, 5vw, 64px);
	align-items: center;
}
.cs-service-hero__left { min-width: 0; }
.cs-service-hero__heading {
	font-family: var(--wp--preset--font-family--sans, "Inter", sans-serif);
	font-weight: 700;
	font-size: clamp(44px, 6.5vw, 96px);
	line-height: 0.94;
	letter-spacing: -0.034em;
	color: var(--wp--preset--color--navy, var(--wp--preset--color--navy));
	margin: 22px 0 20px !important;
	text-wrap: balance;
}
.cs-service-hero__lede {
	font-size: clamp(16px, 1.3vw, 19px);
	line-height: 1.55;
	color: #2a2f3a;
	max-width: 560px;
	margin: 0 0 28px !important;
}
.cs-service-hero__ctas {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 24px;
}
.cs-service-hero__trust {
	display: flex;
	flex-wrap: wrap;
	gap: 22px 28px;
	font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", monospace);
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #6b7280;
}
.cs-service-hero__card {
	background: #fff;
	border-radius: 24px;
	padding: 28px 28px 24px;
	box-shadow:
		0 1px 2px rgba(0,0,0,.04),
		0 18px 50px rgba(20, 30, 60, 0.10);
	position: relative;
	overflow: hidden;
}
.cs-service-hero__card::after {
	content: "";
	position: absolute;
	right: -80px;
	top: -80px;
	width: 220px;
	height: 220px;
	border-radius: 999px;
	background: radial-gradient(closest-side, rgba(247,144,24,0.12), transparent);
	pointer-events: none;
}
.cs-service-hero__card-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", monospace);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #6b7280;
	margin-bottom: 18px;
}
.cs-service-hero__card-pulse {
	color: var(--wp--preset--color--orange, var(--wp--preset--color--orange));
	font-weight: 600;
}
.cs-service-hero__card-rows {
	display: flex;
	flex-direction: column;
	gap: 14px;
	border-top: 1px solid rgba(20, 30, 60, 0.08);
	padding-top: 18px;
}
.cs-service-hero__card-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
	font-size: 14px;
	color: #2a2f3a;
}
.cs-service-hero__card-row strong {
	font-family: var(--wp--preset--font-family--sans, "Inter", sans-serif);
	font-feature-settings: "tnum" 1;
	font-weight: 700;
	color: var(--wp--preset--color--navy, var(--wp--preset--color--navy));
	font-size: 18px;
}
.cs-service-hero__card-foot {
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid rgba(20, 30, 60, 0.08);
	font-size: 13px;
	color: #6b7280;
	font-style: italic;
}
@media (max-width: 900px) {
	.cs-service-hero__inner { grid-template-columns: 1fr; }
	.cs-service-hero__card { max-width: 480px; }
}

/* ==========================================================================
   Ambient interior-page hero video — soft chart loop behind hero text.
   Targets every "*-hero" section that has a `data-cs-reveal` ancestor on
   non-homepage pages. Reduced-motion users see only the cream backdrop.
   ========================================================================== */

.cs-team-hero,
.cs-about-hero,
.cs-archive-hero,
.cs-page-hero,
.cs-contact-hero,
.cs-contact-v2,
.cs-blog-hero,
.cs-single-hero,
.cs-post-hero,
.cs-service-hero,
.cs-services-hero,
.cs-industries-hero,
.cs-cases-hero,
.cs-resources-hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.cs-hero-bg {
	position: absolute !important;
	inset: 0 !important;
	z-index: 0 !important;
	overflow: hidden;
	pointer-events: none;
	background: var(--wp--preset--color--cream, #f7efe1);
}

.cs-hero-bg__video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	opacity: 0.85;
	display: block;
}

.cs-hero-bg__veil {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg,
			rgba(247, 239, 225, 0) 0%,
			rgba(247, 239, 225, 0) 50%,
			rgba(247, 239, 225, 0.55) 85%,
			var(--wp--preset--color--cream, #f7efe1) 100%);
	pointer-events: none;
}

/* Lift the hero content above the video layer */
.cs-team-hero > *,
.cs-about-hero > *,
.cs-archive-hero > *,
.cs-page-hero > *,
.cs-contact-hero > *,
.cs-contact-v2 > *,
.cs-blog-hero > *,
.cs-single-hero > *,
.cs-post-hero > *,
.cs-service-hero > *,
.cs-services-hero > *,
.cs-industries-hero > *,
.cs-cases-hero > *,
.cs-resources-hero > * {
	position: relative;
	z-index: 1;
}
.cs-team-hero > .cs-hero-bg,
.cs-about-hero > .cs-hero-bg,
.cs-archive-hero > .cs-hero-bg,
.cs-page-hero > .cs-hero-bg,
.cs-contact-hero > .cs-hero-bg,
.cs-contact-v2 > .cs-hero-bg,
.cs-blog-hero > .cs-hero-bg,
.cs-single-hero > .cs-hero-bg,
.cs-post-hero > .cs-hero-bg,
.cs-service-hero > .cs-hero-bg,
.cs-services-hero > .cs-hero-bg,
.cs-industries-hero > .cs-hero-bg,
.cs-cases-hero > .cs-hero-bg,
.cs-resources-hero > .cs-hero-bg {
	z-index: 0;
}

@media (prefers-reduced-motion: reduce) {
	.cs-hero-bg__video { display: none; }
}
@media (max-width: 767px) {
	.cs-hero-bg__video { opacity: 0.35; }
}

/* ==========================================================================
   Final CTA pattern
   ========================================================================== */

.cs-final-cta {
	background: var(--cs-navy-deep);
	color: var(--cs-white);
	border-radius: var(--cs-radius-xl);
	padding: clamp(40px, 5vw, 56px) clamp(28px, 5vw, 64px);
	margin: 0 var(--wp--preset--spacing--80, 80px) 80px;
	text-align: center;
	position: relative;
	overflow: hidden;
}

.cs-final-cta > * + * {
	margin-top: 14px;
}

.cs-final-cta .wp-block-buttons {
	margin-top: 22px;
}

.cs-final-cta__kicker {
	color: var(--cs-orange);
}

.cs-final-cta__heading {
	font-family: var(--wp--preset--font-family--sans, "Inter", sans-serif);
	font-weight: 700;
	letter-spacing: -1.6px;
	line-height: 1.04;
	margin: 8px auto 0 !important;
	max-width: 820px;
	text-wrap: balance;
}

.cs-final-cta__lede {
	font-size: 17px;
	color: rgba(255, 255, 255, 0.8);
	max-width: 620px;
	margin: 0 auto 32px;
}

.cs-final-cta__ctas {
	display: inline-flex;
	gap: 12px;
	flex-wrap: wrap;
	justify-content: center;
}

/* ==========================================================================
   Newsletter band
   ========================================================================== */

.cs-newsletter-band {
	background: var(--cs-cream);
	padding: 48px 40px;
	border-radius: var(--cs-radius-lg);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
}

.cs-newsletter-band__text {
	flex: 1 1 320px;
}

.cs-newsletter-band__heading {
	font-family: var(--wp--preset--font-family--serif, "Fraunces", Georgia, serif);
	font-size: 26px;
	font-weight: 600;
	margin: 0 0 6px;
	color: var(--cs-navy);
}

.cs-newsletter-band__lede {
	font-size: 15px;
	color: var(--cs-muted);
	margin: 0;
}

.cs-newsletter {
	flex: 1 1 320px;
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	max-width: 440px;
}

.cs-newsletter__input {
	flex: 1 1 200px;
	padding: 14px 18px;
	border-radius: 999px;
	border: 1px solid var(--cs-border);
	background: var(--cs-white);
	font-size: 15px;
	font-family: inherit;
	color: var(--cs-navy);
}

.cs-newsletter__input:focus {
	outline: 2px solid var(--cs-orange);
	outline-offset: 1px;
}

.cs-newsletter__submit {
	padding: 14px 24px;
	background: var(--cs-navy);
	color: var(--cs-white);
	border: none;
	border-radius: 999px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 500;
	cursor: pointer;
	transition: background 0.2s;
}

.cs-newsletter__submit:hover {
	background: var(--cs-navy-deep);
}

.cs-newsletter__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.cs-newsletter__status,
.cs-form__status {
	font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", ui-monospace, monospace);
	font-size: 12px;
	letter-spacing: 0.6px;
	margin-top: 8px;
	flex: 1 1 100%;
}

.cs-newsletter__status[data-kind="ok"],
.cs-form__status[data-kind="ok"] {
	color: #0a7a3f;
}

.cs-newsletter__status[data-kind="error"],
.cs-form__status[data-kind="error"] {
	color: #b11f1f;
}

.cs-newsletter__status[data-kind="pending"],
.cs-form__status[data-kind="pending"] {
	color: var(--cs-muted);
}

/* ==========================================================================
   Generic form styles
   ========================================================================== */

.cs-form {
	display: flex;
	flex-direction: column;
	gap: 16px;
	background: var(--cs-white);
	padding: 32px;
	border-radius: var(--cs-radius-lg);
	box-shadow: var(--cs-shadow-card);
	max-width: 580px;
}

.cs-form__field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.cs-form__label {
	font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", ui-monospace, monospace);
	font-size: 11px;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--cs-muted);
}

.cs-form__input,
.cs-form__textarea,
.cs-form__select {
	padding: 14px 16px;
	border-radius: 12px;
	border: 1px solid var(--cs-border);
	background: var(--cs-white);
	font-size: 15px;
	font-family: inherit;
	color: var(--cs-navy);
	transition: border-color 0.15s, outline 0.15s;
}

.cs-form__textarea {
	min-height: 140px;
	resize: vertical;
}

.cs-form__input:focus,
.cs-form__textarea:focus,
.cs-form__select:focus {
	outline: 2px solid var(--cs-orange);
	outline-offset: 1px;
	border-color: transparent;
}

.cs-form__hp {
	position: absolute;
	left: -9999px;
	opacity: 0;
}

.cs-form__submit {
	align-self: flex-start;
	padding: 14px 28px;
	background: var(--cs-orange);
	color: var(--cs-navy);
	border: none;
	border-radius: 999px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 500;
	cursor: pointer;
	transition: background 0.2s;
}

.cs-form__submit:hover {
	background: var(--wp--preset--color--orange);
	color: var(--cs-navy);
}

/* ==========================================================================
   Header
   ========================================================================== */

.cs-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: transparent;
	transition: box-shadow 0.2s, background 0.2s;
}

.cs-header--scrolled {
	box-shadow: var(--cs-shadow-nav);
}

.cs-header__bar {
	background: var(--cs-bone, #f6eddd);
	padding: 12px 48px;
}

.cs-header__row {
	max-width: 1440px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: 68px;
}

.cs-header__logo {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	text-decoration: none;
}

.cs-header__logo img {
	height: 56px;
	width: auto;
	max-width: 240px;
	object-fit: contain;
	display: block;
}

.cs-header__navchip {
	flex: 1;
	display: flex;
	justify-content: center;
}

.cs-nav {
	list-style: none;
	padding: 6px;
	margin: 0;
	display: flex;
	gap: 4px;
	background: var(--cs-white, #ffffff);
	border-radius: 999px;
	box-shadow: var(--cs-shadow-nav, 0 6px 20px rgba(10, 23, 56, 0.08));
}

.cs-nav a {
	display: inline-block;
	padding: 10px 18px;
	font-size: 14px;
	font-weight: 500;
	color: var(--cs-navy, var(--wp--preset--color--navy-deep));
	text-decoration: none;
	border-radius: 999px;
	transition: background 0.15s;
	white-space: nowrap;
}

.cs-nav a:hover,
.cs-nav a[aria-current="page"] {
	background: var(--cs-cream, #f6eddd);
}

/* ----- Dropdown menus ------------------------------------------------- */
.cs-nav__item { position: relative; display: inline-flex; }
.cs-nav__item > a { display: inline-block; }

.cs-nav__trigger {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 14px 10px 18px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	color: var(--cs-navy, var(--wp--preset--color--navy-deep));
	background: transparent;
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	transition: background 0.15s;
	white-space: nowrap;
}
.cs-nav__trigger:hover,
.cs-nav__item--open > .cs-nav__trigger,
.cs-nav__trigger[aria-expanded="true"] {
	background: var(--cs-cream, #f6eddd);
}
.cs-nav__caret {
	font-size: 10px;
	line-height: 1;
	transition: transform 0.2s ease;
	opacity: 0.6;
}
.cs-nav__trigger[aria-expanded="true"] .cs-nav__caret {
	transform: rotate(180deg);
	opacity: 1;
}

.cs-nav__menu {
	position: absolute;
	top: calc(100% + 12px);
	left: 50%;
	transform: translateX(-50%) translateY(-4px);
	min-width: 340px;
	background: #ffffff;
	border-radius: 14px;
	box-shadow: 0 1px 2px rgba(12, 26, 56, 0.06), 0 18px 48px rgba(12, 26, 56, 0.16);
	padding: 10px;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
	z-index: 50;
}
.cs-nav__item--has-menu:hover > .cs-nav__menu,
.cs-nav__item--open > .cs-nav__menu,
.cs-nav__menu:hover,
.cs-nav__menu:focus-within {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateX(-50%) translateY(0);
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0s;
}
/* Hover bridge so cursor can move from trigger to menu without dropping. */
.cs-nav__item--has-menu::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	height: 14px;
}

.cs-nav__menu-overview {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 10px 14px;
	font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", monospace);
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--cs-orange, var(--wp--preset--color--orange));
	text-decoration: none;
	border-radius: 8px;
	border-bottom: 1px solid rgba(15, 31, 58, 0.08);
	margin-bottom: 6px;
}
.cs-nav__menu-overview:hover {
	background: rgba(247, 144, 24, 0.08);
}

.cs-nav__menu-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
}
.cs-nav__menu-list a {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 12px 14px;
	border-radius: 8px;
	text-decoration: none;
	transition: background 0.12s ease;
}
.cs-nav__menu-list a:hover,
.cs-nav__menu-list a:focus-visible {
	background: var(--cs-cream, #f6eddd);
	outline: none;
}
.cs-nav__menu-name {
	font-size: 15px;
	font-weight: 600;
	color: var(--cs-navy, var(--wp--preset--color--navy-deep));
	letter-spacing: -0.01em;
}
.cs-nav__menu-blurb {
	font-size: 12px;
	color: rgba(15, 31, 58, 0.62);
	line-height: 1.4;
}

.cs-header__cta {
	flex-shrink: 0;
}

.cs-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 12px 20px;
	font-size: 14px;
	font-weight: 600;
	border-radius: 999px;
	text-decoration: none;
	transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
	white-space: nowrap;
}

.cs-btn--dark {
	background: var(--cs-navy, var(--wp--preset--color--navy-deep));
	color: #fff;
}

.cs-btn--dark:hover {
	transform: translateY(-1px);
	box-shadow: 0 10px 24px rgba(10, 23, 56, 0.25);
}

.cs-btn--primary {
	background: var(--cs-orange, var(--wp--preset--color--orange));
	color: var(--cs-navy, var(--wp--preset--color--navy));
	border: 0;
	cursor: pointer;
}

.cs-btn--primary:hover {
	background: var(--wp--preset--color--orange);
	color: var(--cs-navy, var(--wp--preset--color--navy));
	transform: translateY(-1px);
}

.cs-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.cs-footer {
	background: var(--cs-navy-deep, #05102a) !important;
	color: rgba(255, 255, 255, 0.75);
	padding: 80px 48px 48px !important;
}

.cs-footer__inner {
	max-width: 1440px;
	margin: 0 auto;
}

.cs-footer__grid {
	display: grid !important;
	grid-template-columns: 1.5fr 1fr 1fr 1fr 1.5fr;
	gap: 48px;
	margin-bottom: 48px;
	width: 100%;
}

.cs-footer__brand,
.cs-footer__col,
.cs-footer__newsletter {
	min-width: 0;
	flex: initial;
}

.cs-footer__logocard {
	position: relative;
	background:
		radial-gradient(120% 140% at 50% 50%,
			rgba(255, 255, 255, 0.96) 0%,
			rgba(255, 255, 255, 0.86) 32%,
			rgba(255, 255, 255, 0.42) 62%,
			rgba(255, 255, 255, 0.10) 84%,
			rgba(255, 255, 255, 0) 100%);
	border: none;
	border-radius: 26px;
	padding: 18px 28px;
	width: fit-content;
	margin-bottom: 24px;
	overflow: visible;
	filter: drop-shadow(0 4px 24px rgba(247, 144, 24, 0.10));
}

.cs-footer__logocard::before {
	content: "";
	position: absolute;
	inset: -14px;
	border-radius: 36px;
	background: radial-gradient(60% 70% at 50% 50%,
		rgba(247, 144, 24, 0.18) 0%,
		rgba(247, 144, 24, 0.06) 45%,
		transparent 75%);
	z-index: -1;
	pointer-events: none;
}

.cs-footer__logocard img {
	display: block;
	height: 76px;
	width: auto;
	max-width: 240px;
	object-fit: contain;
	filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.6));
}

@media (max-width: 767px) {
	.cs-footer__logocard img { height: 64px; max-width: 200px; }
}

.cs-footer__tagline {
	font-size: 15px;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.8);
	margin: 0 0 16px;
	max-width: 320px;
}

.cs-footer__addr {
	font-size: 12px;
	color: rgba(255, 255, 255, 0.5);
	margin: 0;
	line-height: 1.5;
	max-width: 320px;
}

.cs-footer__head {
	font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", ui-monospace, monospace);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.5);
	margin: 0 0 20px;
}

.cs-footer__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.cs-footer a {
	color: rgba(255, 255, 255, 0.8);
	text-decoration: none;
	font-size: 14px;
	transition: color 0.15s;
}

.cs-footer a:hover {
	color: #fff;
	text-decoration: underline;
	text-decoration-color: var(--cs-orange, var(--wp--preset--color--orange));
	text-underline-offset: 3px;
}

.cs-footer__nl-lede {
	font-size: 14px;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.75);
	margin: 0 0 16px;
	max-width: 340px;
}

.cs-footer__nl-form {
	display: flex;
	gap: 8px;
	max-width: 340px;
}

.cs-footer__nl-form input[type="email"] {
	flex: 1;
	min-width: 0;
	padding: 12px 16px;
	font-size: 14px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 999px;
	color: #fff;
	font-family: inherit;
}

.cs-footer__nl-form input[type="email"]::placeholder {
	color: rgba(255, 255, 255, 0.4);
}

.cs-footer__nl-form input[type="email"]:focus {
	outline: 2px solid var(--cs-orange, var(--wp--preset--color--orange));
	outline-offset: 2px;
	border-color: transparent;
}

.cs-footer__bottom {
	padding-top: 24px;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
	font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", ui-monospace, monospace);
	font-size: 11px;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.5);
}

.cs-footer__bottom-left {
	margin: 0;
}

.cs-footer__bottom-right {
	display: flex;
	gap: 24px;
	align-items: center;
}

.cs-footer__bottom-right a {
	font-size: 11px;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.5);
}

.cs-footer__bottom-right a:hover {
	color: #fff;
}

/* ==========================================================================
   Section header pattern
   ========================================================================== */

.cs-section-header {
	padding: 80px var(--wp--preset--spacing--80, 80px) 24px;
	max-width: 1440px;
	margin: 0 auto;
}

.cs-section-header__heading {
	font-family: var(--wp--preset--font-family--serif, "Fraunces", Georgia, serif);
	font-size: clamp(40px, 5vw, 64px);
	font-weight: 500;
	line-height: 1.05;
	letter-spacing: -0.02em;
	margin: 12px 0 16px;
	color: var(--cs-navy);
	max-width: 900px;
}

.cs-section-header__lede {
	font-size: 18px;
	color: var(--cs-muted);
	max-width: 680px;
	line-height: 1.55;
	margin: 0;
}

/* ==========================================================================
   Long-form content (Insights posts)
   ========================================================================== */

.cs-post-content {
	font-size: 17px;
	line-height: 1.7;
	color: var(--cs-navy);
	max-width: 720px;
}

.cs-post-content h2 {
	font-family: var(--wp--preset--font-family--serif, "Fraunces", Georgia, serif);
	font-size: 28px;
	font-weight: 600;
	margin: 48px 0 16px;
	scroll-margin-top: 100px;
}

.cs-post-content h3 {
	font-family: var(--wp--preset--font-family--serif, "Fraunces", Georgia, serif);
	font-size: 22px;
	font-weight: 600;
	margin: 32px 0 12px;
	scroll-margin-top: 100px;
}

.cs-post-content p {
	margin: 0 0 20px;
}

.cs-post-content a {
	color: var(--cs-orange);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.cs-post-content ul,
.cs-post-content ol {
	padding-left: 24px;
	margin: 0 0 20px;
}

.cs-post-content li {
	margin-bottom: 8px;
}

.cs-post-content blockquote {
	border-left: 3px solid var(--cs-blue, #3a7fb8);
	padding: 8px 0 8px 24px;
	margin: 28px 0;
	font-family: var(--wp--preset--font-family--serif, "Fraunces", Georgia, serif);
	font-size: 22px;
	font-style: italic;
	color: var(--cs-navy);
}

.cs-post-content code {
	font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", ui-monospace, monospace);
	background: var(--cs-cream);
	padding: 2px 6px;
	border-radius: 4px;
	font-size: 0.9em;
}

/* ==========================================================================
   Contact / Free Audit hero (two-column editorial with form)
   ========================================================================== */

.cs-contact-hero {
	background: var(--cs-cream);
	padding: 96px 80px 120px;
}

.cs-contact-hero__inner {
	max-width: 1280px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	align-items: start;
}

.cs-contact-hero__left .cs-page-hero__heading {
	font-size: clamp(40px, 6vw, 88px);
	line-height: 0.96;
	letter-spacing: -0.028em;
	margin: 20px 0 20px;
	color: var(--cs-navy);
	font-family: var(--wp--preset--font-family--sans, "Inter", sans-serif);
	font-weight: 700;
}

.cs-contact-hero__left .cs-page-hero__italic {
	font-family: var(--wp--preset--font-family--serif, "Fraunces", Georgia, serif);
	font-style: italic;
	font-weight: 400;
	color: var(--cs-orange);
}

.cs-contact-hero__lede {
	font-size: 19px;
	line-height: 1.55;
	color: var(--cs-muted);
	margin: 0 0 24px;
	max-width: 520px;
}

.cs-contact-hero__email {
	font-size: 15px;
	color: var(--cs-muted);
	margin: 12px 0 0;
}

.cs-contact-hero__email a {
	color: var(--cs-navy);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: rgba(247, 144, 24, 0.4);
	text-underline-offset: 3px;
}

.cs-audit-list {
	list-style: none;
	padding: 0;
	margin: 20px 0 0;
}

.cs-audit-list li {
	padding-left: 28px;
	position: relative;
	font-size: 16px;
	color: var(--cs-navy);
	margin-bottom: 12px;
	line-height: 1.5;
}

.cs-audit-list li::before {
	content: "✓";
	position: absolute;
	left: 0;
	top: 0;
	color: var(--cs-orange);
	font-weight: 700;
}

/* ==========================================================================
   Forms
   ========================================================================== */

.cs-form {
	background: #ffffff;
	padding: 32px;
	border-radius: 24px;
	box-shadow: var(--wp--preset--shadow--card, 0 10px 40px rgba(12, 22, 48, 0.08));
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.cs-form__field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.cs-form__label {
	font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", monospace);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--cs-muted);
}

.cs-form__field input,
.cs-form__field textarea,
.cs-form__field select {
	font-family: var(--wp--preset--font-family--sans, "Inter", sans-serif);
	font-size: 16px;
	color: var(--cs-navy);
	border: 1px solid rgba(12, 22, 48, 0.12);
	background: var(--cs-bone, #faf8f3);
	border-radius: 12px;
	padding: 12px 14px;
	transition: border-color 160ms ease, box-shadow 160ms ease;
}

.cs-form__field input:focus,
.cs-form__field textarea:focus,
.cs-form__field select:focus {
	outline: none;
	border-color: var(--cs-orange);
	box-shadow: 0 0 0 3px rgba(247, 144, 24, 0.18);
}

.cs-form__field textarea {
	resize: vertical;
	min-height: 92px;
}

.cs-form__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.cs-form__submit {
	margin-top: 8px;
	align-self: flex-start;
}

.cs-form__status {
	font-size: 14px;
	color: var(--cs-muted);
	min-height: 18px;
	margin: 0;
}

.cs-form__status.is-success { color: #1a7a3a; }
.cs-form__status.is-error { color: #b02f2f; }

/* ==========================================================================
   Single-post editorial hero (pill strip above title)
   ========================================================================== */

.cs-single-hero {
	background: var(--cs-cream);
	padding: 72px 80px 16px;
}

.cs-single-hero__inner {
	max-width: 1080px;
	margin: 0 auto;
}

.cs-single-title-wrap {
	background: var(--cs-cream);
}

.cs-single-title-wrap .cs-single-title,
.cs-article-head .cs-single-title {
	font-size: clamp(36px, 5vw, 64px);
	line-height: 1.04;
	letter-spacing: -0.024em;
	color: var(--cs-navy);
	font-weight: 700;
	margin: 0 0 20px;
}

.cs-article-head {
	background: var(--cs-cream);
}

/* ==========================================================================
   Service body — 2-col content + deliverables rail
   ========================================================================== */

.cs-service-body {
	display: grid;
	grid-template-columns: 1.6fr 1fr;
	gap: 48px;
	align-items: start;
}

.cs-service-body__content > * { margin-bottom: 16px; }

.cs-service-body__side {
	position: sticky;
	top: 100px;
}

/* ==========================================================================
   Case study triptych (problem / approach / result)
   ========================================================================== */

.cs-case-triptych {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
	margin-bottom: 48px;
}

.cs-case-triptych__cell {
	background: #ffffff;
	border-radius: 20px;
	padding: 28px;
	box-shadow: var(--wp--preset--shadow--card, 0 8px 24px rgba(12, 22, 48, 0.06));
}

.cs-case-triptych__cell .cs-kicker {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", monospace);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--cs-orange);
	margin-bottom: 12px;
}

.cs-case-triptych__cell h3 {
	font-family: var(--wp--preset--font-family--serif, "Fraunces", Georgia, serif);
	font-size: 22px;
	line-height: 1.2;
	color: var(--cs-navy);
	margin: 0 0 12px;
	font-weight: 600;
}

.cs-case-triptych__cell p {
	color: var(--cs-muted);
	font-size: 15px;
	line-height: 1.6;
	margin: 0;
}

.cs-case-kpi-row__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 32px;
	max-width: 1200px;
	margin: 0 auto;
}

/* ==========================================================================
   Article layout (insights post — sticky TOC + body)
   ========================================================================== */

.cs-article-layout {
	display: grid;
	grid-template-columns: 260px 1fr;
	gap: 64px;
	align-items: start;
}

.cs-article-toc-col {
	position: sticky;
	top: 100px;
}

.cs-article-body-col {
	max-width: 760px;
}

/* ==========================================================================
   Responsive — mobile ≤ 767px
   ========================================================================== */

@media (max-width: 767px) {
	.cs-hero-video {
		padding: 24px 24px 96px;
		min-height: 480px;
	}

	.cs-hero-video__heading {
		font-size: clamp(32px, 8vw, 44px);
	}

	.cs-header__bar {
		padding: 10px 20px;
	}

	.cs-header__logo img {
		height: 40px;
		max-width: 160px;
	}

	/* Mobile nav — hamburger + slide-down panel */
	.cs-header__navchip {
		position: fixed;
		inset: 72px 0 0 0;
		background: var(--wp--preset--color--cream, #f6eddd);
		padding: 24px;
		transform: translateY(-120%);
		transition: transform 0.3s ease;
		z-index: 90;
		display: block;
		box-shadow: none;
		border-radius: 0;
		overflow-y: auto;
	}
	.cs-header--menu-open .cs-header__navchip {
		transform: translateY(0);
	}
	.cs-nav {
		display: flex !important;
		flex-direction: column;
		gap: 4px;
		padding: 0;
		background: transparent;
		box-shadow: none;
	}
	.cs-nav li { width: 100%; }
	.cs-nav a {
		display: block;
		width: 100%;
		padding: 16px 18px;
		font-size: 18px;
		font-weight: 700;
		letter-spacing: -0.01em;
		color: var(--wp--preset--color--navy, var(--wp--preset--color--navy));
		border-bottom: 1px solid rgba(21,38,77,0.08);
		border-radius: 0;
	}
	.cs-nav a:hover,
	.cs-nav a[aria-current="page"] {
		background: #fff;
	}

	/* Mobile dropdowns: stack inline as accordion-style submenus. */
	.cs-nav__item { display: block; width: 100%; }
	.cs-nav__trigger {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		padding: 16px 18px;
		font-size: 18px;
		font-weight: 700;
		letter-spacing: -0.01em;
		color: var(--wp--preset--color--navy, var(--wp--preset--color--navy));
		border-bottom: 1px solid rgba(21,38,77,0.08);
		border-radius: 0;
		background: transparent;
	}
	.cs-nav__menu {
		position: static;
		transform: none;
		min-width: 0;
		width: 100%;
		box-shadow: none;
		background: rgba(255, 255, 255, 0.6);
		border-radius: 0;
		padding: 4px 12px 12px;
		margin: 0;
		opacity: 1;
		visibility: hidden;
		max-height: 0;
		overflow: hidden;
		transition: max-height 0.25s ease, padding 0.25s ease, visibility 0s linear 0.25s;
		pointer-events: auto;
	}
	.cs-nav__item--open > .cs-nav__menu,
	.cs-nav__trigger[aria-expanded="true"] + .cs-nav__menu {
		visibility: visible;
		max-height: 720px;
		transition: max-height 0.3s ease, padding 0.25s ease, visibility 0s linear 0s;
	}
	.cs-nav__item--has-menu::after { content: none; }
	.cs-nav__menu-overview { padding: 12px 14px; }
	.cs-nav__menu-list a { padding: 14px 14px; }

	.cs-header__cta {
		margin-left: auto;
		margin-right: 56px;
	}
	.cs-header__cta .cs-btn {
		padding: 10px 14px;
		font-size: 13px;
	}

	.cs-footer {
		padding: 56px 24px 32px !important;
	}

	.cs-footer__grid {
		grid-template-columns: 1fr !important;
		gap: 32px;
		margin-bottom: 32px;
	}

	.cs-section-header,
	.cs-final-cta,
	.cs-related-content,
	.cs-breadcrumb {
		padding-left: 24px;
		padding-right: 24px;
	}

	.cs-final-cta {
		margin-left: 20px;
		margin-right: 20px;
		padding: 56px 24px;
	}

	.cs-case-archive-grid,
	.cs-industry-archive-grid,
	.cs-service-archive-grid {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.cs-case-card--featured {
		grid-column: auto;
	}

	.cs-data-callout {
		padding: 36px 24px;
	}

	.cs-deliverables,
	.cs-faq__item,
	.cs-pricing-tier,
	.cs-form {
		padding: 24px;
	}

	.cs-newsletter-band {
		padding: 32px 24px;
	}

	.cs-post-content {
		font-size: 16px;
	}

	.cs-toc {
		position: static;
		top: auto;
	}

	.cs-contact-hero {
		padding: 64px 24px 72px;
	}

	.cs-contact-hero__inner {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.cs-service-body,
	.cs-article-layout {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.cs-service-body__side,
	.cs-article-toc-col {
		position: static;
		top: auto;
	}

	.cs-case-triptych {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.cs-case-kpi-row__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
	}

	.cs-single-hero {
		padding: 56px 24px 16px;
	}

	.cs-single-title-wrap .cs-single-title,
	.cs-article-head .cs-single-title {
		font-size: clamp(28px, 7vw, 40px);
	}
}

@media (max-width: 1023px) {
	.cs-case-archive-grid,
	.cs-industry-archive-grid,
	.cs-service-archive-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.cs-footer__grid {
		grid-template-columns: 1fr 1fr;
	}
}

/* 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;
	}

	.cs-hero-video__video {
		display: none;
	}
}

/* ==========================================================================
   Archive hero — additional pill row + inline orange + italic modifiers
   (applies to services/industries/case studies editorial archive heroes)
   ========================================================================== */
.cs-archive-hero__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 8px;
}
.cs-archive-hero__orange { color: var(--wp--preset--color--orange, var(--wp--preset--color--orange)); }

/* ==========================================================================
   Team page — editorial hero
   ========================================================================== */
.cs-team-hero {
	background: var(--wp--preset--color--cream, #f7efe1);
	padding: 24px 48px 40px;
}
.cs-team-hero__inner {
	max-width: 1440px;
	margin: 0 auto;
}

/* Photo-backdrop hero (Option B — polaroid wall on warehouse background).
   The team-hero.jpg already bakes in a left-side navy scrim, so the heading
   stays legible without an extra runtime overlay. */
.cs-team-hero--photo {
	position: relative;
	background: var(--wp--preset--color--navy, var(--wp--preset--color--navy));
	padding: 96px 48px 96px;
	min-height: clamp(520px, 55vw, 760px);
	overflow: hidden;
	isolation: isolate;
	color: #ffffff;
}
.cs-team-hero--photo .cs-team-hero__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}
.cs-team-hero--photo .cs-team-hero__bg img {
	width: 100%;
	height: 100%;
	/* fix-19: contain instead of cover so all 13 polaroids/avatars are always
	   fully visible regardless of viewport width. The image (option-A) has a
	   dark navy gradient on the left half that blends into the section's navy
	   bg, so contain + right-anchor reads as edge-to-edge on wide viewports. */
	object-fit: contain;
	object-position: right center;
	background: var(--wp--preset--color--navy, #1a2436);
	display: block;
}
.cs-team-hero--photo .cs-team-hero__inner {
	position: relative;
	z-index: 2;
}
/* Constrain the text column to the left ~55% so the polaroids on the right
   stay clean and uncovered. Drops to full width below the breakpoint. */
.cs-team-hero--photo .cs-team-hero__heading {
	color: #ffffff;
	max-width: 56%;
	text-shadow: 0 2px 24px rgba(12, 26, 56, 0.45);
}
.cs-team-hero--photo .cs-team-hero__lede {
	color: rgba(255, 255, 255, 0.92);
	max-width: 56%;
	text-shadow: 0 1px 12px rgba(12, 26, 56, 0.4);
}
.cs-team-hero--photo .cs-team-hero__stats {
	color: rgba(255, 255, 255, 0.85);
}
@media (max-width: 1023px) {
	.cs-team-hero--photo {
		padding: 56px 32px 64px;
		min-height: 0;
	}
	.cs-team-hero--photo .cs-team-hero__heading,
	.cs-team-hero--photo .cs-team-hero__lede {
		max-width: 100%;
	}
	/* Heavier scrim baked into a CSS layer for narrow screens since the photo
	   crops differently and the baked-in scrim covers a smaller portion. */
	.cs-team-hero--photo .cs-team-hero__bg::after {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(180deg, rgba(12, 26, 56, 0.55) 0%, rgba(12, 26, 56, 0.78) 100%);
	}
}
.cs-team-hero__heading {
	font-family: var(--wp--preset--font-family--sans, "Inter", sans-serif);
	font-weight: 700;
	font-size: clamp(44px, 8vw, 104px);
	line-height: 0.92;
	letter-spacing: -0.03em;
	color: var(--wp--preset--color--navy, var(--wp--preset--color--navy));
	margin: 22px 0 24px;
	max-width: 980px;
	text-wrap: balance;
}
.cs-team-hero__orange { color: var(--wp--preset--color--orange, var(--wp--preset--color--orange)); }
.cs-team-hero__lede {
	font-size: clamp(16px, 1.4vw, 19px);
	color: #2a2f3a;
	line-height: 1.55;
	max-width: 760px;
	margin: 0;
}
.cs-team-hero__stats {
	display: flex;
	flex-wrap: wrap;
	gap: 28px;
	margin-top: 28px;
	font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", monospace);
	font-size: 11px;
	color: var(--wp--preset--color--muted, #6b7280);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* ==========================================================================
   Team page — §1 Leadership
   ========================================================================== */
.cs-team-leadership {
	background: var(--wp--preset--color--cream, #f7efe1);
	padding: 96px 48px 0;
}
.cs-team-leadership__inner { max-width: 1440px; margin: 0 auto; }
.cs-team-leadership__head { margin-bottom: 40px; }
.cs-team-leadership__h2 {
	font-family: var(--wp--preset--font-family--sans, "Inter", sans-serif);
	font-weight: 700;
	font-size: clamp(36px, 5vw, 56px);
	color: var(--wp--preset--color--navy, var(--wp--preset--color--navy));
	margin: 18px 0 0;
	letter-spacing: -0.028em;
	line-height: 1.02;
}
.cs-team-leadership__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 20px;
}
.cs-team-leadership__card {
	background: #fff;
	border-radius: 24px;
	padding: 28px;
	box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 12px 36px rgba(20,30,60,.06);
}
.cs-team-leadership__portrait {
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: 16px;
	margin-bottom: 18px;
	background: linear-gradient(135deg, var(--wp--preset--color--bone, #f3e8d2) 0%, var(--wp--preset--color--blue-soft, #dde6f2) 100%);
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}
.cs-team-leadership__portrait span {
	font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", monospace);
	font-size: 11px;
	color: var(--wp--preset--color--muted, #6b7280);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
.cs-team-leadership__name {
	font-size: 22px;
	font-weight: 700;
	color: var(--wp--preset--color--navy, var(--wp--preset--color--navy));
	letter-spacing: -0.02em;
}
.cs-team-leadership__role {
	font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", monospace);
	font-size: 11px;
	color: var(--wp--preset--color--orange-ink, var(--wp--preset--color--orange-ink));
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin-top: 4px;
}
.cs-team-leadership__bio {
	font-size: 14px;
	color: #2a2f3a;
	line-height: 1.55;
	margin: 12px 0 0;
}

/* ==========================================================================
   Team page — §2 Functional teams
   ========================================================================== */
.cs-team-functional {
	background: var(--wp--preset--color--cream, #f7efe1);
	padding: 112px 48px 0;
}
.cs-team-functional__inner { max-width: 1440px; margin: 0 auto; }
.cs-team-functional__sechead { margin-bottom: 40px; }
.cs-team-functional__h2 {
	font-family: var(--wp--preset--font-family--sans, "Inter", sans-serif);
	font-weight: 700;
	font-size: clamp(36px, 5vw, 56px);
	color: var(--wp--preset--color--navy, var(--wp--preset--color--navy));
	margin: 18px 0 16px;
	letter-spacing: -0.028em;
	line-height: 1.02;
}
.cs-team-functional__intro {
	font-size: 16px;
	color: var(--wp--preset--color--muted, #6b7280);
	line-height: 1.55;
	max-width: 720px;
	margin: 0;
}
.cs-team-functional__group { margin-bottom: 40px; }
.cs-team-functional__head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 16px;
	border-bottom: 1px solid rgba(0,0,0,0.06);
	padding-bottom: 10px;
	gap: 16px;
	flex-wrap: wrap;
}
.cs-team-functional__tag {
	font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", monospace);
	font-size: 12px;
	letter-spacing: 0.15em;
	color: var(--wp--preset--color--navy, var(--wp--preset--color--navy));
	font-weight: 600;
	text-transform: uppercase;
}
.cs-team-functional__tagline {
	font-size: 14px;
	color: var(--wp--preset--color--muted, #6b7280);
	font-style: italic;
}
.cs-team-functional__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
}
.cs-team-functional__member {
	background: #fff;
	border-radius: 16px;
	padding: 18px;
	box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(20,30,60,.04);
	display: flex;
	gap: 14px;
	align-items: flex-start;
}
.cs-team-functional__avatar {
	width: 52px;
	height: 52px;
	border-radius: 999px;
	flex-shrink: 0;
	background: linear-gradient(135deg, var(--wp--preset--color--bone, #f3e8d2) 0%, var(--wp--preset--color--blue-soft, #dde6f2) 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", monospace);
	font-size: 13px;
	font-weight: 700;
	color: var(--wp--preset--color--navy, var(--wp--preset--color--navy));
	letter-spacing: 0.04em;
}
.cs-team-functional__body { flex: 1; min-width: 0; }
.cs-team-functional__name {
	font-size: 15px;
	font-weight: 700;
	color: var(--wp--preset--color--navy, var(--wp--preset--color--navy));
	letter-spacing: -0.01em;
}
.cs-team-functional__role {
	font-size: 12px;
	color: var(--wp--preset--color--muted, #6b7280);
	margin-top: 2px;
}
.cs-team-functional__bio {
	font-size: 13px;
	color: #2a2f3a;
	line-height: 1.5;
	margin: 8px 0 0;
}
.cs-team-functional__dual {
	display: inline-block;
	margin-top: 6px;
	font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", monospace);
	font-size: 9.5px;
	letter-spacing: 0.1em;
	background: var(--wp--preset--color--orange-soft, var(--wp--preset--color--orange-soft));
	color: var(--wp--preset--color--orange-ink, var(--wp--preset--color--orange-ink));
	padding: 3px 7px;
	border-radius: 999px;
	text-transform: uppercase;
}
.cs-team-functional__footnote {
	font-size: 13px;
	color: var(--wp--preset--color--muted, #6b7280);
	text-align: center;
	margin: 16px 0 0;
	font-style: italic;
}

/* ==========================================================================
   Team page — §3 Distribution
   ========================================================================== */
.cs-team-distribution-sec {
	background: var(--wp--preset--color--cream, #f7efe1);
	padding: 112px 48px 0;
}
.cs-team-distribution {
	max-width: 1440px;
	margin: 0 auto;
	background: #fff;
	border-radius: 32px;
	padding: 48px;
	box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 14px 40px rgba(20,30,60,.06);
	display: grid;
	grid-template-columns: 1fr 1.2fr;
	gap: 48px;
	align-items: center;
}
.cs-team-distribution__media {
	aspect-ratio: 4 / 3;
	border-radius: 20px;
	overflow: hidden;
	background: var(--wp--preset--color--navy-deep, var(--wp--preset--color--navy-deep));
	position: relative;
	display: block;
	box-shadow:
		0 1px 2px rgba(0, 0, 0, 0.06),
		0 18px 50px rgba(20, 30, 60, 0.14);
}
.cs-team-distribution__media-grid {
	position: absolute;
	inset: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	gap: 4px;
	background: var(--wp--preset--color--navy-deep, var(--wp--preset--color--navy-deep));
}
.cs-team-distribution__media-grid img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
.cs-team-distribution__media-caption {
	font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", monospace);
	font-size: 11px;
	color: #fff;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	position: absolute;
	bottom: 14px;
	left: 16px;
	padding: 6px 12px;
	background: rgba(12, 26, 60, 0.72);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	border-radius: 999px;
	z-index: 2;
}
.cs-team-distribution__h2 {
	font-family: var(--wp--preset--font-family--sans, "Inter", sans-serif);
	font-weight: 700;
	font-size: clamp(28px, 3.5vw, 44px);
	color: var(--wp--preset--color--navy, var(--wp--preset--color--navy));
	margin: 16px 0 16px;
	letter-spacing: -0.025em;
	line-height: 1.05;
}
.cs-team-distribution__lede {
	font-size: 16px;
	color: #2a2f3a;
	line-height: 1.6;
	margin: 0 0 24px;
}
.cs-team-distribution__people {
	display: flex;
	gap: 24px;
	flex-wrap: wrap;
}
.cs-team-distribution__person {
	display: flex;
	gap: 12px;
	align-items: center;
}
/* When cofounder bios are present, each person becomes a stacked card. */
.cs-team-distribution__people--with-bios {
	flex-direction: column;
	gap: 28px;
}
.cs-team-distribution__people--with-bios .cs-team-distribution__person {
	display: block;
	border-top: 1px solid rgba(15, 31, 58, 0.10);
	padding-top: 20px;
}
.cs-team-distribution__people--with-bios .cs-team-distribution__person:first-child {
	border-top: 0;
	padding-top: 0;
}
.cs-team-distribution__person-head {
	display: flex;
	gap: 12px;
	align-items: center;
	margin-bottom: 12px;
}
.cs-team-distribution__bio {
	font-size: 15px;
	color: #2a2f3a;
	line-height: 1.6;
	margin: 0;
}
.cs-team-distribution__avatar {
	width: 48px;
	height: 48px;
	border-radius: 999px;
	background: linear-gradient(135deg, var(--wp--preset--color--bone, #f3e8d2) 0%, var(--wp--preset--color--blue-soft, #dde6f2) 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", monospace);
	font-size: 12px;
	font-weight: 700;
	color: var(--wp--preset--color--navy, var(--wp--preset--color--navy));
}
.cs-team-distribution__name {
	font-size: 14px;
	font-weight: 700;
	color: var(--wp--preset--color--navy, var(--wp--preset--color--navy));
}
.cs-team-distribution__role {
	font-size: 11px;
	color: var(--wp--preset--color--muted, #6b7280);
	font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", monospace);
	letter-spacing: 0.04em;
}

/* ==========================================================================
   Team page — §4 Advisory
   ========================================================================== */
.cs-team-advisory-sec {
	background: var(--wp--preset--color--cream, #f7efe1);
	padding: 112px 48px 96px;
	max-width: 1440px;
	margin: 0 auto;
}
.cs-team-advisory__head { margin-bottom: 40px; }
.cs-team-advisory__sectitle {
	font-family: var(--wp--preset--font-family--sans, "Inter", sans-serif);
	font-weight: 700;
	font-size: clamp(36px, 5vw, 56px);
	color: var(--wp--preset--color--navy, var(--wp--preset--color--navy));
	margin: 18px 0 0;
	letter-spacing: -0.028em;
	line-height: 1.02;
}
.cs-team-advisory {
	background: var(--wp--preset--color--navy, var(--wp--preset--color--navy));
	color: #fff;
	border-radius: 24px;
	padding: 48px;
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: 40px;
	align-items: center;
}
.cs-team-advisory__portrait {
	aspect-ratio: 1 / 1;
	border-radius: 20px;
	max-width: 280px;
	background: linear-gradient(135deg, var(--wp--preset--color--blue) 0%, var(--wp--preset--color--navy-deep, var(--wp--preset--color--navy-deep)) 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", monospace);
	font-size: 11px;
	color: #cfd4dd;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
.cs-team-advisory__kicker {
	font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", monospace);
	font-size: 10px;
	letter-spacing: 0.16em;
	color: var(--wp--preset--color--orange, var(--wp--preset--color--orange));
	text-transform: uppercase;
}
.cs-team-advisory__name {
	font-size: clamp(28px, 3.2vw, 40px);
	font-weight: 700;
	letter-spacing: -0.025em;
	margin-top: 8px;
}
.cs-team-advisory__role {
	font-size: 15px;
	color: #cfd4dd;
	margin-top: 4px;
	font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", monospace);
	letter-spacing: 0.04em;
}
.cs-team-advisory__bio {
	font-size: 16px;
	color: #e8ebf1;
	line-height: 1.6;
	margin: 16px 0 0;
}

/* ==========================================================================
   About page — editorial hero + quote card
   ========================================================================== */
.cs-about-hero {
	background: var(--wp--preset--color--cream, #f7efe1);
	padding: 24px 48px 80px;
}
.cs-about-hero__inner { max-width: 1440px; margin: 0 auto; }
.cs-about-hero__heading {
	font-family: var(--wp--preset--font-family--sans, "Inter", sans-serif);
	font-weight: 700;
	font-size: clamp(52px, 10vw, 128px);
	line-height: 0.92;
	letter-spacing: -0.034em;
	color: var(--wp--preset--color--navy, var(--wp--preset--color--navy));
	margin: 24px 0 0;
	max-width: 1200px;
	text-wrap: balance;
}
.cs-about-hero__italic {
	font-family: var(--wp--preset--font-family--serif, "Fraunces", Georgia, serif);
	font-style: italic;
	font-weight: 400;
}
.cs-about-hero-grid {
	display: grid;
	grid-template-columns: 1fr 1.2fr;
	gap: 64px;
	margin-top: 48px;
}
.cs-about-hero-copy p {
	font-size: clamp(16px, 1.3vw, 18px);
	color: #2a2f3a;
	line-height: 1.7;
	margin: 0 0 18px;
}
.cs-about-hero-copy p:last-child { margin-bottom: 0; }

.cs-about-quote-card {
	background: linear-gradient(135deg, var(--wp--preset--color--navy, var(--wp--preset--color--navy)) 0%, var(--wp--preset--color--blue) 100%);
	border-radius: 24px;
	padding: 40px;
	color: #fff;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 420px;
	position: relative;
	overflow: hidden;
}
.cs-about-quote-card__glow {
	position: absolute;
	right: -100px;
	bottom: -100px;
	width: 400px;
	height: 400px;
	border-radius: 999px;
	background: radial-gradient(closest-side, rgba(247,144,24,0.2), transparent);
	pointer-events: none;
}
.cs-about-quote-card__top,
.cs-about-quote-card__bottom { position: relative; z-index: 1; }
.cs-about-quote-card__quote {
	font-family: var(--wp--preset--font-family--serif, "Fraunces", Georgia, serif);
	font-size: clamp(24px, 2.8vw, 44px);
	line-height: 1.1;
	font-weight: 400;
	font-style: italic;
	letter-spacing: -0.025em;
	margin: 0;
}
.cs-about-quote-card__attr {
	margin-top: 24px;
	font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", monospace);
	font-size: 12px;
	letter-spacing: 0.12em;
	color: var(--wp--preset--color--orange-soft, var(--wp--preset--color--orange-soft));
	text-transform: uppercase;
}

/* ==========================================================================
   About page — timeline
   ========================================================================== */
.cs-about-timeline-sec {
	background: var(--wp--preset--color--cream, #f7efe1);
	padding: 112px 48px 0;
}
.cs-about-timeline-sec__inner { max-width: 1440px; margin: 0 auto; }
.cs-about-timeline-sec__head { margin-bottom: 48px; }
.cs-about-timeline-sec__h2 {
	font-family: var(--wp--preset--font-family--sans, "Inter", sans-serif);
	font-weight: 700;
	font-size: clamp(40px, 6vw, 72px);
	color: var(--wp--preset--color--navy, var(--wp--preset--color--navy));
	margin: 18px 0 0;
	letter-spacing: -0.03em;
	line-height: 1;
}
.cs-about-timeline { position: relative; }
.cs-about-timeline__line {
	position: absolute;
	top: 20px;
	left: 20px;
	right: 20px;
	height: 2px;
	background: rgba(21,38,77,0.18);
}
.cs-about-timeline__grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 16px;
	position: relative;
}
.cs-about-timeline__step { position: relative; }
.cs-about-timeline__dot {
	width: 40px;
	height: 40px;
	border-radius: 999px;
	background: var(--wp--preset--color--navy, var(--wp--preset--color--navy));
	border: 4px solid var(--wp--preset--color--cream, #f7efe1);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", monospace);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
}
.cs-about-timeline__year {
	font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", monospace);
	font-size: 12px;
	color: var(--wp--preset--color--orange, var(--wp--preset--color--orange));
	letter-spacing: 0.12em;
	margin-top: 16px;
}
.cs-about-timeline__title {
	font-size: 16px;
	font-weight: 700;
	color: var(--wp--preset--color--navy, var(--wp--preset--color--navy));
	margin-top: 6px;
	letter-spacing: -0.01em;
}
.cs-about-timeline__desc {
	font-size: 12px;
	color: #2a2f3a;
	margin-top: 6px;
	line-height: 1.4;
}

/* ==========================================================================
   About page — team grid
   ========================================================================== */
.cs-about-team-sec {
	background: var(--wp--preset--color--cream, #f7efe1);
	padding: 112px 48px 0;
}
.cs-about-team-sec__inner { max-width: 1440px; margin: 0 auto; }
.cs-about-team-sec__head {
	display: flex;
	justify-content: space-between;
	align-items: end;
	margin-bottom: 36px;
	gap: 16px;
	flex-wrap: wrap;
}
.cs-about-team-sec__h2 {
	font-family: var(--wp--preset--font-family--sans, "Inter", sans-serif);
	font-weight: 700;
	font-size: clamp(36px, 5.5vw, 72px);
	color: var(--wp--preset--color--navy, var(--wp--preset--color--navy));
	margin: 18px 0 0;
	letter-spacing: -0.03em;
	line-height: 1;
}
.cs-about-team-sec__link {
	font-size: 14px;
	font-weight: 600;
	color: var(--wp--preset--color--navy, var(--wp--preset--color--navy));
	text-decoration: none;
}
.cs-about-team-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}
.cs-about-team-card {
	background: #fff;
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(20,30,60,.05);
}
.cs-about-team-card__photo {
	height: 220px;
	background: linear-gradient(160deg, var(--wp--preset--color--navy, var(--wp--preset--color--navy)) 0%, var(--wp--preset--color--blue) 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(255,255,255,0.27);
	font-size: 88px;
	font-weight: 700;
	letter-spacing: -0.02em;
	font-family: var(--wp--preset--font-family--serif, "Fraunces", Georgia, serif);
}
.cs-about-team-card__body { padding: 20px; }
.cs-about-team-card__name {
	font-size: 17px;
	font-weight: 700;
	color: var(--wp--preset--color--navy, var(--wp--preset--color--navy));
	letter-spacing: -0.018em;
}
.cs-about-team-card__role {
	font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", monospace);
	font-size: 11px;
	color: var(--wp--preset--color--orange, var(--wp--preset--color--orange));
	letter-spacing: 0.1em;
	margin-top: 4px;
	text-transform: uppercase;
}
.cs-about-team-card__bio {
	font-size: 13px;
	color: #2a2f3a;
	margin-top: 10px;
	line-height: 1.5;
}

/* ==========================================================================
   About page — values navy card
   ========================================================================== */
.cs-about-values-sec {
	background: var(--wp--preset--color--cream, #f7efe1);
	padding: 112px 48px 96px;
}
.cs-about-values {
	max-width: 1440px;
	margin: 0 auto;
	background: var(--wp--preset--color--navy, var(--wp--preset--color--navy));
	color: #fff;
	border-radius: 32px;
	padding: 56px;
}
.cs-about-values__h2 {
	font-family: var(--wp--preset--font-family--sans, "Inter", sans-serif);
	font-weight: 700;
	font-size: clamp(32px, 5vw, 56px);
	color: #fff;
	margin: 18px 0 40px;
	letter-spacing: -0.028em;
	line-height: 1.02;
}
.cs-about-values__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 32px;
}
.cs-about-values__title {
	font-size: 22px;
	font-weight: 700;
	color: #fff;
	letter-spacing: -0.018em;
	margin-bottom: 10px;
}
.cs-about-values__desc {
	font-size: 14px;
	color: #cfd4dd;
	line-height: 1.6;
	margin: 0;
}

/* ==========================================================================
   Contact v2 — split editorial
   ========================================================================== */
.cs-contact-v2 {
	background: var(--wp--preset--color--cream, #f7efe1);
	padding: 24px 48px 96px;
}
.cs-contact-v2__inner {
	max-width: 1440px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 56px;
	align-items: start;
}
.cs-contact-v2__heading {
	font-family: var(--wp--preset--font-family--sans, "Inter", sans-serif);
	font-weight: 700;
	font-size: clamp(40px, 7vw, 88px);
	line-height: 0.95;
	letter-spacing: -0.028em;
	color: var(--wp--preset--color--navy, var(--wp--preset--color--navy));
	margin: 20px 0 20px;
}
.cs-contact-v2__orange { color: var(--wp--preset--color--orange, var(--wp--preset--color--orange)); }
.cs-contact-v2__lede {
	font-size: clamp(15px, 1.2vw, 17px);
	color: #2a2f3a;
	line-height: 1.6;
	max-width: 560px;
	margin: 0 0 32px;
}
.cs-contact-v2__steps {
	background: #fff;
	border-radius: 20px;
	padding: 28px;
	margin-bottom: 24px;
	box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(20,30,60,.05);
}
.cs-contact-v2__steps-head {
	font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", monospace);
	font-size: 11px;
	color: var(--wp--preset--color--muted, #6b7280);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin-bottom: 16px;
}
.cs-contact-v2__step {
	display: grid;
	grid-template-columns: 120px 1fr;
	gap: 16px;
	align-items: baseline;
	padding: 12px 0;
	border-bottom: 1px solid rgba(21,38,77,0.06);
}
.cs-contact-v2__step--last { border-bottom: none; }
.cs-contact-v2__step-when {
	font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", monospace);
	font-size: 12px;
	color: var(--wp--preset--color--orange, var(--wp--preset--color--orange));
	letter-spacing: 0.1em;
}
.cs-contact-v2__step-desc {
	font-size: 14px;
	color: var(--wp--preset--color--navy, var(--wp--preset--color--navy));
	line-height: 1.5;
}
.cs-contact-v2__cards {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
}
.cs-contact-v2__card {
	background: #fff;
	border-radius: 14px;
	padding: 18px;
	box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.cs-contact-v2__card-kicker {
	font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", monospace);
	font-size: 10px;
	color: var(--wp--preset--color--muted, #6b7280);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
.cs-contact-v2__card-email {
	font-size: 14px;
	font-weight: 700;
	color: var(--wp--preset--color--navy, var(--wp--preset--color--navy));
	margin-top: 6px;
	word-break: break-word;
}
.cs-contact-v2__card-phone {
	font-size: 12px;
	color: var(--wp--preset--color--muted, #6b7280);
	font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", monospace);
	margin-top: 2px;
}
.cs-contact-v2__addr {
	margin-top: 24px;
	padding: 24px;
	background: var(--wp--preset--color--navy, var(--wp--preset--color--navy));
	color: #fff;
	border-radius: 16px;
}
.cs-contact-v2__addr-kicker {
	font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", monospace);
	font-size: 10px;
	color: #9aa3b2;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
.cs-contact-v2__addr-name {
	font-size: 18px;
	font-weight: 700;
	margin-top: 8px;
}
.cs-contact-v2__addr-line {
	font-size: 14px;
	color: #cfd4dd;
	margin-top: 4px;
	line-height: 1.5;
}
.cs-contact-v2__form-card {
	background: #fff;
	border-radius: 24px;
	padding: 40px;
	box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 24px 60px rgba(20,30,60,.10);
	position: sticky;
	top: 24px;
}
.cs-contact-v2__form-title {
	font-size: 24px;
	font-weight: 700;
	color: var(--wp--preset--color--navy, var(--wp--preset--color--navy));
	letter-spacing: -0.02em;
	margin-bottom: 4px;
}
.cs-contact-v2__form-sub {
	font-size: 13px;
	color: var(--wp--preset--color--muted, #6b7280);
	margin-bottom: 24px;
}
.cs-form__grid-2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
	margin-bottom: 14px;
}
.cs-form--contact-v2 .cs-form__field { display: block; margin-bottom: 14px; }
.cs-form--contact-v2 .cs-form__label {
	font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", monospace);
	font-size: 10px;
	color: var(--wp--preset--color--muted, #6b7280);
	letter-spacing: 0.1em;
	margin-bottom: 6px;
	text-transform: uppercase;
	display: block;
}
.cs-form--contact-v2 input[type="text"],
.cs-form--contact-v2 input[type="email"],
.cs-form--contact-v2 input[type="url"],
.cs-form--contact-v2 select,
.cs-form--contact-v2 textarea {
	background: var(--wp--preset--color--bone, #f3e8d2);
	border: 1px solid rgba(21,38,77,0.06);
	border-radius: 10px;
	padding: 14px;
	font-size: 14px;
	color: var(--wp--preset--color--navy, var(--wp--preset--color--navy));
	font-family: var(--wp--preset--font-family--sans, "Inter", sans-serif);
	width: 100%;
	box-sizing: border-box;
}
.cs-form--contact-v2 textarea { min-height: 120px; line-height: 1.55; }
.cs-contact-v2__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.cs-contact-v2__chip {
	display: inline-flex;
	align-items: center;
	padding: 10px 14px;
	border-radius: 999px;
	background: #fff;
	border: 1px solid rgba(21,38,77,0.12);
	color: var(--wp--preset--color--navy, var(--wp--preset--color--navy));
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	user-select: none;
}
.cs-contact-v2__chip input { position: absolute; opacity: 0; pointer-events: none; }
.cs-contact-v2__chip:has(input:checked) {
	background: var(--wp--preset--color--navy, var(--wp--preset--color--navy));
	color: #fff;
	border-color: var(--wp--preset--color--navy, var(--wp--preset--color--navy));
}
.cs-contact-v2__submit-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 24px;
	gap: 12px;
	flex-wrap: wrap;
}
.cs-contact-v2__reply-note {
	font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", monospace);
	font-size: 10px;
	color: var(--wp--preset--color--muted, #6b7280);
	letter-spacing: 0.04em;
}

/* ==========================================================================
   Blog hub v2 — editorial masthead
   ========================================================================== */
.cs-blog-hero {
	background: var(--wp--preset--color--cream, #f7efe1);
	padding: 20px 48px 48px;
}
.cs-blog-hero__inner {
	max-width: 1440px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 48px;
	align-items: end;
}
.cs-blog-hero__heading {
	font-family: var(--wp--preset--font-family--sans, "Inter", sans-serif);
	font-weight: 700;
	font-size: clamp(48px, 9vw, 124px);
	line-height: 0.92;
	letter-spacing: -0.034em;
	color: var(--wp--preset--color--navy, var(--wp--preset--color--navy));
	margin: 20px 0 22px;
	text-wrap: balance;
}
.cs-blog-hero__italic {
	font-family: var(--wp--preset--font-family--serif, "Fraunces", Georgia, serif);
	font-style: italic;
	font-weight: 400;
}
.cs-blog-hero__lede {
	font-size: clamp(16px, 1.4vw, 19px);
	color: #2a2f3a;
	max-width: 680px;
	line-height: 1.55;
	margin: 0;
}
.cs-blog-hero__issue {
	background: #fff;
	border-radius: 20px;
	padding: 24px;
	border: 1px solid rgba(20,30,60,0.08);
}
.cs-blog-hero__issue-kicker {
	font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", monospace);
	font-size: 10px;
	letter-spacing: 0.15em;
	color: var(--wp--preset--color--muted, #6b7280);
	margin-bottom: 14px;
	text-transform: uppercase;
}
.cs-blog-hero__issue-num {
	font-size: 52px;
	font-weight: 800;
	color: var(--wp--preset--color--navy, var(--wp--preset--color--navy));
	letter-spacing: -0.04em;
	line-height: 1;
}
.cs-blog-hero__issue-date {
	font-size: 13px;
	color: var(--wp--preset--color--muted, #6b7280);
	font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", monospace);
	margin-top: 8px;
}
.cs-blog-hero__issue-divider {
	height: 1px;
	background: rgba(20,30,60,0.08);
	margin: 16px 0;
}
.cs-blog-hero__issue-sub {
	font-size: 13px;
	color: #2a2f3a;
	line-height: 1.5;
}
.cs-blog-hero__issue-sub strong {
	font-weight: 700;
	color: var(--wp--preset--color--navy, var(--wp--preset--color--navy));
	display: block;
	margin-bottom: 4px;
}

/* ==========================================================================
   Blog hub v2 — featured + grid
   ========================================================================== */
.cs-blog-featured-sec {
	background: var(--wp--preset--color--cream, #f7efe1);
	padding: 0 48px 56px;
}
.cs-blog-featured-sec__inner { max-width: 1440px; margin: 0 auto; }
.cs-blog-featured-sec__head { margin-bottom: 18px; }
.cs-blog-featured-sec__kicker {
	font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", monospace);
	font-size: 11px;
	letter-spacing: 0.15em;
	color: var(--wp--preset--color--muted, #6b7280);
	text-transform: uppercase;
}
.cs-blog-featured__card {
	box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 18px 48px rgba(20,30,60,.08);
	overflow: hidden;
}
.cs-blog-featured__card img {
	width: 100%;
	display: block;
	border-radius: 0;
}
.cs-blog-featured__cat {
	font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", monospace);
	font-size: 11px;
	letter-spacing: 0.15em;
	color: var(--wp--preset--color--orange-ink, var(--wp--preset--color--orange-ink));
	text-transform: uppercase;
	margin-bottom: 10px;
	display: inline-block;
}
.cs-blog-featured__cat a { color: inherit; text-decoration: none; }
.cs-blog-featured__title {
	font-size: clamp(28px, 3.4vw, 40px);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.025em;
	color: var(--wp--preset--color--navy, var(--wp--preset--color--navy));
	margin: 0 0 14px;
}
.cs-blog-featured__title a { color: inherit; text-decoration: none; }
.cs-blog-featured__excerpt {
	font-size: 16px;
	color: #2a2f3a;
	line-height: 1.6;
	margin: 0 0 18px;
}

.cs-blog-recent-sec {
	background: var(--wp--preset--color--cream, #f7efe1);
	padding: 0 48px 72px;
}
.cs-blog-recent-sec__inner { max-width: 1440px; margin: 0 auto; }
.cs-blog-recent-sec__kicker {
	font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", monospace);
	font-size: 11px;
	letter-spacing: 0.15em;
	color: var(--wp--preset--color--muted, #6b7280);
	text-transform: uppercase;
	margin-bottom: 18px;
}
.cs-blog-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
	list-style: none;
	padding: 0;
	margin: 0;
}
.cs-blog-grid > li { list-style: none; margin: 0; padding: 0; }
.cs-blog-card {
	box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 10px 28px rgba(20,30,60,.06);
	overflow: hidden;
	height: 100%;
	display: flex;
	flex-direction: column;
}
.cs-blog-card img { width: 100%; display: block; }
.cs-blog-card__body { flex: 1; }
.cs-blog-card__cat {
	font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", monospace);
	font-size: 10px;
	letter-spacing: 0.14em;
	color: var(--wp--preset--color--orange-ink, var(--wp--preset--color--orange-ink));
	text-transform: uppercase;
	margin-bottom: 10px;
}
.cs-blog-card__cat a { color: inherit; text-decoration: none; }
.cs-blog-card__title {
	font-size: 18px;
	font-weight: 700;
	color: var(--wp--preset--color--navy, var(--wp--preset--color--navy));
	letter-spacing: -0.018em;
	line-height: 1.25;
	margin: 0 0 10px;
}
.cs-blog-card__title a { color: inherit; text-decoration: none; }
.cs-blog-card__excerpt {
	font-size: 13px;
	color: #2a2f3a;
	line-height: 1.5;
	margin: 0 0 12px;
}
.cs-blog-pagination {
	margin-top: 32px;
	display: flex;
	gap: 12px;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}

/* ==========================================================================
   Blog filter bar (subject-area tabs)
   ========================================================================== */

.cs-blog-filter {
	background: var(--wp--preset--color--cream, #f7efe1);
	border-bottom: 1px solid rgba(21, 38, 77, 0.08);
	position: sticky;
	top: 68px; /* matches header height */
	z-index: 90;
}

.cs-blog-filter__inner {
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 48px;
}

.cs-blog-filter__tabs {
	display: flex;
	align-items: center;
	gap: 0;
	list-style: none;
	margin: 0;
	padding: 0;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none; /* Firefox */
}

.cs-blog-filter__tabs::-webkit-scrollbar {
	display: none; /* Chrome/Safari */
}

.cs-blog-filter__tab {
	display: inline-block;
	white-space: nowrap;
	padding: 14px 18px;
	font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", monospace);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted, var(--wp--preset--color--muted));
	text-decoration: none;
	border-bottom: 2px solid transparent;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.cs-blog-filter__tab:hover {
	color: var(--wp--preset--color--navy, var(--wp--preset--color--navy));
	border-bottom-color: rgba(21, 38, 77, 0.2);
}

.cs-blog-filter__tab.is-active,
.cs-blog-filter__tab:focus-visible {
	color: var(--wp--preset--color--orange, var(--wp--preset--color--orange));
	border-bottom-color: var(--wp--preset--color--orange, var(--wp--preset--color--orange));
	outline: none;
}

/* Body-class active states — category.html sets tab to orange via WP body class */
body.category-amazon       .cs-blog-filter__tab--amazon,
body.category-walmart      .cs-blog-filter__tab--walmart,
body.category-tiktok       .cs-blog-filter__tab--tiktok,
body.category-hardware     .cs-blog-filter__tab--hardware,
body.category-housewares   .cs-blog-filter__tab--housewares,
body.category-cpg-pantry   .cs-blog-filter__tab--cpg-pantry,
body.category-outdoor      .cs-blog-filter__tab--outdoor,
body.category-health       .cs-blog-filter__tab--health,
body.category-chewy        .cs-blog-filter__tab--chewy,
body.category-google-seo   .cs-blog-filter__tab--google-seo,
body.category-dsp          .cs-blog-filter__tab--dsp,
body.category-migration    .cs-blog-filter__tab--migration,
body.category-pet          .cs-blog-filter__tab--pet {
	color: var(--wp--preset--color--orange, var(--wp--preset--color--orange));
	border-bottom-color: var(--wp--preset--color--orange, var(--wp--preset--color--orange));
}

/* ==========================================================================
   Category archive hero modifier
   ========================================================================== */

.cs-blog-hero--archive {
	min-height: auto;
	padding: 48px 48px 40px;
	background: var(--wp--preset--color--navy, var(--wp--preset--color--navy));
}

.cs-blog-hero__inner--archive {
	grid-template-columns: 1fr;
	gap: 0;
	max-width: 1440px;
	margin: 0 auto;
}

.cs-blog-hero__heading--archive {
	font-size: clamp(32px, 4vw, 52px);
	color: #ffffff;
	margin: 12px 0 0;
}

/* ==========================================================================
   Single blog post
   ========================================================================== */
.cs-post-hero {
	background: var(--wp--preset--color--cream, #f7efe1);
	padding: 16px 48px 0;
}
.cs-post-hero__inner {
	max-width: 860px;
	margin: 0 auto;
}
.cs-post-hero__meta {
	display: flex;
	gap: 14px;
	align-items: center;
	flex-wrap: wrap;
	font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", monospace);
	font-size: 11px;
	letter-spacing: 0.12em;
	color: var(--wp--preset--color--muted, #6b7280);
	text-transform: uppercase;
	margin-bottom: 24px;
}
.cs-post-hero__cat {
	background: var(--wp--preset--color--orange-soft, var(--wp--preset--color--orange-soft));
	color: var(--wp--preset--color--orange-ink, var(--wp--preset--color--orange-ink));
	padding: 6px 12px;
	border-radius: 999px;
	font-weight: 600;
}
.cs-post-hero__cat a { color: inherit; text-decoration: none; }
.cs-post-hero__cat::before { content: "● "; }
.cs-post-hero__date { color: var(--wp--preset--color--muted, #6b7280); }
.cs-post-hero__title,
.cs-main--single .cs-post-hero__title {
	font-family: var(--wp--preset--font-family--serif, "Fraunces", Georgia, serif);
	font-weight: 400;
	font-size: clamp(36px, 7vw, 84px);
	line-height: 1.08;
	letter-spacing: -0.028em;
	color: var(--wp--preset--color--navy, var(--wp--preset--color--navy));
	margin: 0 0 28px;
}
.cs-post-hero__byline {
	padding-top: 24px;
	border-top: 1px solid rgba(0,0,0,0.06);
}

.cs-post-image {
	background: var(--wp--preset--color--cream, #f7efe1);
	padding: 48px 48px 0;
}
.cs-post-image__inner {
	max-width: 1200px;
	margin: 0 auto;
}
.cs-post-image img {
	width: 100%;
	display: block;
	border-radius: 24px;
}

.cs-post-body {
	background: var(--wp--preset--color--cream, #f7efe1);
	padding: 64px 48px 96px;
}
.cs-post-body__inner {
	max-width: 1080px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 260px 720px;
	gap: 48px;
	justify-content: center;
}
.cs-post-body__toc {
	position: sticky;
	top: 20px;
	align-self: start;
}
.cs-post-body__prose { max-width: 720px; }
.cs-post-body__prose p {
	font-size: 18px;
	color: #1e2532;
	line-height: 1.65;
	margin: 0 0 20px;
}
.cs-post-body__prose h2 {
	font-size: clamp(28px, 3vw, 36px);
	font-weight: 700;
	color: var(--wp--preset--color--navy, var(--wp--preset--color--navy));
	letter-spacing: -0.025em;
	line-height: 1.1;
	margin: 48px 0 20px;
}
.cs-post-body__prose blockquote {
	background: var(--wp--preset--color--navy, var(--wp--preset--color--navy));
	color: #fff;
	border-radius: 20px;
	padding: 36px;
	margin: 40px 0;
	font-family: var(--wp--preset--font-family--serif, "Fraunces", Georgia, serif);
	font-size: 26px;
	font-weight: 300;
	line-height: 1.3;
	letter-spacing: -0.015em;
}

/* ==========================================================================
   Mobile breakpoints for new sections
   ========================================================================== */
@media (max-width: 1023px) {
	.cs-team-leadership__grid { grid-template-columns: 1fr 1fr; }
	.cs-team-functional__grid { grid-template-columns: 1fr 1fr; }
	.cs-about-team-grid { grid-template-columns: 1fr 1fr; }
	.cs-about-values__grid { grid-template-columns: 1fr 1fr; }
	.cs-blog-grid { grid-template-columns: 1fr 1fr; }
	.cs-about-timeline__grid { grid-template-columns: repeat(3, 1fr); row-gap: 40px; }
	.cs-about-timeline__line { display: none; }
	.cs-blog-filter__inner { padding: 0 24px; }
}

@media (max-width: 767px) {
	.cs-team-hero,
	.cs-team-leadership,
	.cs-team-functional,
	.cs-team-distribution-sec,
	.cs-team-advisory-sec,
	.cs-about-hero,
	.cs-about-timeline-sec,
	.cs-about-team-sec,
	.cs-about-values-sec,
	.cs-blog-hero,
	.cs-blog-featured-sec,
	.cs-blog-recent-sec,
	.cs-post-hero,
	.cs-post-image,
	.cs-post-body,
	.cs-contact-v2 {
		padding-left: 20px;
		padding-right: 20px;
	}

	.cs-team-hero { padding-top: 32px; padding-bottom: 24px; }
	.cs-team-leadership { padding-top: 56px; }
	.cs-team-functional { padding-top: 56px; }
	.cs-team-distribution-sec { padding-top: 56px; }
	.cs-team-advisory-sec { padding-top: 56px; padding-bottom: 56px; }

	.cs-team-hero__heading { font-size: clamp(36px, 9vw, 52px); }
	.cs-team-hero__stats { gap: 12px; font-size: 10px; }

	.cs-team-leadership__grid { grid-template-columns: 1fr; }
	.cs-team-functional__grid { grid-template-columns: 1fr; }
	.cs-team-functional__head {
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
	}
	.cs-team-distribution {
		grid-template-columns: 1fr;
		padding: 28px;
		gap: 28px;
	}
	.cs-team-advisory {
		grid-template-columns: 1fr;
		padding: 28px;
		gap: 24px;
	}
	.cs-team-advisory__portrait { max-width: 100%; }

	.cs-about-hero { padding-top: 40px; padding-bottom: 56px; }
	.cs-about-hero__heading { font-size: clamp(36px, 10vw, 64px); }
	.cs-about-hero-grid { grid-template-columns: 1fr; gap: 32px; margin-top: 32px; }
	.cs-about-quote-card { min-height: 320px; padding: 28px; }
	.cs-about-timeline-sec { padding-top: 56px; }
	.cs-about-timeline-sec__h2 { font-size: clamp(32px, 9vw, 48px); }
	.cs-about-timeline__grid { grid-template-columns: 1fr 1fr; row-gap: 32px; }
	.cs-about-team-sec { padding-top: 56px; }
	.cs-about-team-grid { grid-template-columns: 1fr; }
	.cs-about-values-sec { padding-top: 56px; padding-bottom: 56px; }
	.cs-about-values { padding: 32px; border-radius: 20px; }
	.cs-about-values__grid { grid-template-columns: 1fr; gap: 20px; }
	.cs-about-values__h2 { font-size: clamp(28px, 8vw, 40px); margin-bottom: 24px; }

	.cs-blog-hero { padding-top: 32px; padding-bottom: 32px; }
	.cs-blog-hero__inner { grid-template-columns: 1fr; gap: 28px; }
	.cs-blog-hero__heading { font-size: clamp(40px, 11vw, 64px); }
	.cs-blog-grid { grid-template-columns: 1fr; }
	.cs-blog-filter { top: 0; } /* unstick on mobile — header is not sticky on small screens */
	.cs-blog-filter__inner { padding: 0 20px; }
	.cs-blog-filter__tab { padding: 12px 14px; font-size: 10px; }
	.cs-blog-hero--archive { padding: 32px 20px 28px; }
	.cs-blog-hero__heading--archive { font-size: clamp(26px, 8vw, 40px); }

	.cs-post-hero { padding-top: 24px; }
	.cs-post-image { padding-top: 32px; }
	.cs-post-body { padding: 40px 20px 56px; }
	.cs-post-body__inner {
		grid-template-columns: 1fr;
		gap: 28px;
	}
	.cs-post-body__toc { position: static; }

	.cs-contact-v2 { padding-top: 32px; padding-bottom: 72px; }
	.cs-contact-v2__inner { grid-template-columns: 1fr; gap: 32px; }
	.cs-contact-v2__form-card { position: static; padding: 28px; }
	.cs-contact-v2__heading { font-size: clamp(32px, 9vw, 56px); }
	.cs-contact-v2__cards { grid-template-columns: 1fr; }
	.cs-form__grid-2 { grid-template-columns: 1fr; }
}

/* ======================================================================
   Archive + Resources + Single (Phase 2 rewrites — 2026-04-24)
   ====================================================================== */

/* --- Services archive ------------------------------------------------- */
.cs-services-hero {
	padding: 28px 48px 72px;
	background: var(--wp--preset--color--cream, #f7efe1);
}
.cs-services-hero__inner {
	max-width: 1100px;
	margin: 0 auto;
}
.cs-services-hero__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 28px;
}
.cs-services-hero__heading {
	font-family: var(--wp--preset--font-family--sans, "Inter Display", "Inter", sans-serif);
	font-size: clamp(48px, 7vw, 88px);
	font-weight: 800;
	color: var(--wp--preset--color--navy, var(--wp--preset--color--navy));
	letter-spacing: -0.035em;
	line-height: 1.02;
	margin: 0 0 24px;
}
.cs-services-hero__orange { color: var(--wp--preset--color--orange, var(--wp--preset--color--orange)); }
.cs-services-hero__italic {
	font-family: var(--wp--preset--font-family--serif, "Fraunces", Georgia, serif);
	font-style: italic;
	font-weight: 300;
}
.cs-services-hero__lede {
	font-size: 20px;
	color: #404a61;
	line-height: 1.55;
	max-width: 780px;
	margin: 0;
}

.cs-services-flagship-sec {
	padding: 40px 48px 72px;
}
.cs-services-flagship {
	position: relative;
	background: var(--wp--preset--color--navy, var(--wp--preset--color--navy));
	color: #fff;
	border-radius: 32px;
	padding: 56px;
	max-width: 1280px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 48px;
	overflow: hidden;
}
.cs-services-flagship__glow {
	position: absolute;
	inset: auto -80px -80px auto;
	width: 320px;
	height: 320px;
	background: radial-gradient(circle, rgba(247,144,24,0.3) 0%, transparent 70%);
	filter: blur(60px);
	pointer-events: none;
}
.cs-services-flagship__body { position: relative; z-index: 1; }
.cs-services-flagship__h2 {
	font-size: clamp(36px, 4vw, 56px);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.05;
	margin: 20px 0 20px;
	color: #fff;
}
.cs-services-flagship__orange { color: var(--wp--preset--color--orange, var(--wp--preset--color--orange)); }
.cs-services-flagship__lede {
	font-size: 19px;
	color: rgba(255,255,255,0.82);
	line-height: 1.55;
	margin: 0 0 28px;
	max-width: 560px;
}
.cs-services-flagship__ctas {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}
.cs-services-flagship__proof {
	position: relative;
	z-index: 1;
	background: rgba(255,255,255,0.04);
	border: 1px solid rgba(255,255,255,0.12);
	border-radius: 24px;
	padding: 32px;
	align-self: center;
	text-align: center;
}
.cs-services-flagship__proof-kicker {
	font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", monospace);
	font-size: 11px;
	letter-spacing: 0.14em;
	color: rgba(255,255,255,0.5);
	text-transform: uppercase;
	margin-bottom: 16px;
}
.cs-services-flagship__proof-num {
	font-family: var(--wp--preset--font-family--sans, "Inter Display", "Inter", sans-serif);
	font-size: 96px;
	font-weight: 800;
	color: var(--wp--preset--color--orange, var(--wp--preset--color--orange));
	line-height: 1;
	letter-spacing: -0.04em;
	font-variant-numeric: tabular-nums;
	margin-bottom: 12px;
}
.cs-services-flagship__proof-desc {
	font-size: 15px;
	color: rgba(255,255,255,0.78);
	line-height: 1.45;
}

.cs-services-group-sec {
	padding: 32px 48px 72px;
}
.cs-services-group {
	max-width: 1280px;
	margin: 0 auto 64px;
}
.cs-services-group:last-child { margin-bottom: 0; }
.cs-services-group__head {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: end;
	margin-bottom: 36px;
	padding-bottom: 20px;
	border-bottom: 1px solid rgba(21,38,77,0.1);
}
.cs-services-group__kicker {
	font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", monospace);
	font-size: 11px;
	letter-spacing: 0.14em;
	color: var(--wp--preset--color--orange, var(--wp--preset--color--orange));
	text-transform: uppercase;
	margin-bottom: 10px;
}
.cs-services-group__h3 {
	font-size: clamp(30px, 3.4vw, 44px);
	font-weight: 800;
	color: var(--wp--preset--color--navy, var(--wp--preset--color--navy));
	letter-spacing: -0.03em;
	line-height: 1.05;
	margin: 0;
}
.cs-services-group__intro {
	font-size: 16px;
	color: #6b748a;
	line-height: 1.5;
	margin: 0;
}
.cs-services-group__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}
.cs-services-group__grid:has(> *:nth-child(4)) {
	grid-template-columns: repeat(4, 1fr);
}

.cs-service-v2-card {
	background: #fff;
	border: 1px solid rgba(21,38,77,0.08);
	border-radius: 20px;
	padding: 28px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.cs-service-v2-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 16px 40px rgba(21,38,77,0.08);
	border-color: rgba(247,144,24,0.3);
}
.cs-service-v2-card__top {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}
.cs-service-v2-card__name {
	font-size: 20px;
	font-weight: 700;
	color: var(--wp--preset--color--navy, var(--wp--preset--color--navy));
	letter-spacing: -0.02em;
	line-height: 1.2;
}
.cs-service-v2-card__tag {
	font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", monospace);
	font-size: 10px;
	letter-spacing: 0.12em;
	padding: 3px 8px;
	border-radius: 4px;
	background: var(--wp--preset--color--orange, var(--wp--preset--color--orange));
	color: #fff;
	text-transform: uppercase;
}
.cs-service-v2-card__blurb {
	font-size: 15px;
	color: #404a61;
	line-height: 1.5;
	margin: 0;
	flex: 1;
}
.cs-service-v2-card__foot {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-top: 16px;
	border-top: 1px solid rgba(21,38,77,0.08);
	gap: 12px;
}
.cs-service-v2-card__stat {
	font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", monospace);
	font-size: 11px;
	letter-spacing: 0.1em;
	color: #6b748a;
	text-transform: uppercase;
	font-variant-numeric: tabular-nums;
}
.cs-service-v2-card__read {
	font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", monospace);
	font-size: 11px;
	letter-spacing: 0.12em;
	color: var(--wp--preset--color--navy, var(--wp--preset--color--navy));
	text-transform: uppercase;
	text-decoration: none;
	font-weight: 700;
}
.cs-service-v2-card__read:hover { color: var(--wp--preset--color--orange, var(--wp--preset--color--orange)); }

.cs-services-pricing-sec {
	padding: 32px 48px 96px;
}
.cs-services-pricing {
	max-width: 1280px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1.4fr;
	gap: 56px;
	align-items: start;
}
.cs-services-pricing__left { position: sticky; top: 120px; }
.cs-services-pricing__h3 {
	font-size: clamp(30px, 3.2vw, 44px);
	font-weight: 800;
	color: var(--wp--preset--color--navy, var(--wp--preset--color--navy));
	letter-spacing: -0.03em;
	line-height: 1.08;
	margin: 20px 0 16px;
}
.cs-services-pricing__intro {
	font-size: 16px;
	color: #6b748a;
	line-height: 1.55;
	margin: 0;
}
.cs-services-pricing__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}
.cs-services-pricing__tier {
	background: #fff;
	border: 1px solid rgba(21,38,77,0.08);
	border-radius: 20px;
	padding: 32px;
}
.cs-services-pricing__tier-kicker {
	font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", monospace);
	font-size: 11px;
	letter-spacing: 0.14em;
	color: var(--wp--preset--color--orange, var(--wp--preset--color--orange));
	text-transform: uppercase;
	margin-bottom: 10px;
}
.cs-services-pricing__tier-price {
	font-family: var(--wp--preset--font-family--sans, "Inter Display", "Inter", sans-serif);
	font-size: clamp(28px, 3vw, 40px);
	font-weight: 800;
	color: var(--wp--preset--color--navy, var(--wp--preset--color--navy));
	letter-spacing: -0.025em;
	font-variant-numeric: tabular-nums;
	margin-bottom: 12px;
}
.cs-services-pricing__tier-desc {
	font-size: 15px;
	color: #404a61;
	line-height: 1.5;
	margin: 0;
}

/* --- Industries archive ----------------------------------------------- */
.cs-industries-hero {
	padding: 28px 48px 72px;
	background: var(--wp--preset--color--cream, #f7efe1);
}
.cs-industries-hero__inner { max-width: 1100px; margin: 0 auto; }
.cs-industries-hero__pills { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 28px; }
.cs-industries-hero__heading {
	font-family: var(--wp--preset--font-family--sans, "Inter Display", "Inter", sans-serif);
	font-size: clamp(48px, 7vw, 88px);
	font-weight: 800;
	color: var(--wp--preset--color--navy, var(--wp--preset--color--navy));
	letter-spacing: -0.035em;
	line-height: 1.02;
	margin: 0 0 24px;
}
.cs-industries-hero__orange { color: var(--wp--preset--color--orange, var(--wp--preset--color--orange)); }
.cs-industries-hero__italic {
	font-family: var(--wp--preset--font-family--serif, "Fraunces", Georgia, serif);
	font-style: italic;
	font-weight: 300;
}
.cs-industries-hero__lede {
	font-size: 20px;
	color: #404a61;
	line-height: 1.55;
	max-width: 780px;
	margin: 0;
}

.cs-industries-grid-sec { padding: 32px 48px 72px; }
.cs-industries-grid {
	max-width: 1280px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 28px;
}
.cs-industry-v2-card {
	background: #fff;
	border-radius: 28px;
	overflow: hidden;
	display: grid;
	grid-template-columns: 220px 1fr;
	border: 1px solid rgba(21,38,77,0.08);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.cs-industry-v2-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 24px 48px rgba(21,38,77,0.1);
}
.cs-industry-v2-card__gradient {
	background: linear-gradient(155deg, hsl(var(--ind-hue, 210) 45% 55%), hsl(var(--ind-hue, 210) 35% 32%));
	padding: 28px;
	color: #fff;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 24px;
	min-height: 280px;
}
.cs-industry-v2-card__tag {
	font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", monospace);
	font-size: 10px;
	letter-spacing: 0.14em;
	color: rgba(255,255,255,0.8);
	text-transform: uppercase;
}
.cs-industry-v2-card__stats { display: flex; flex-direction: column; gap: 16px; }
.cs-industry-v2-card__stat-num {
	font-family: var(--wp--preset--font-family--sans, "Inter Display", "Inter", sans-serif);
	font-size: 48px;
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	margin-bottom: 4px;
}
.cs-industry-v2-card__stat-lbl {
	font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", monospace);
	font-size: 10px;
	letter-spacing: 0.14em;
	color: rgba(255,255,255,0.75);
	text-transform: uppercase;
}
.cs-industry-v2-card__body {
	padding: 28px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.cs-industry-v2-card__name {
	font-size: 24px;
	font-weight: 800;
	color: var(--wp--preset--color--navy, var(--wp--preset--color--navy));
	letter-spacing: -0.025em;
	line-height: 1.15;
	margin: 0;
}
.cs-industry-v2-card__blurb {
	font-size: 15px;
	color: #404a61;
	line-height: 1.5;
	margin: 0;
}
.cs-industry-v2-card__tactics {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 4px;
}
.cs-industry-v2-card__chip {
	font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", monospace);
	font-size: 10px;
	letter-spacing: 0.1em;
	padding: 4px 10px;
	border-radius: 999px;
	background: rgba(21,38,77,0.06);
	color: var(--wp--preset--color--navy, var(--wp--preset--color--navy));
	text-transform: uppercase;
}
.cs-industry-v2-card__foot {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: auto;
	padding-top: 14px;
	border-top: 1px solid rgba(21,38,77,0.08);
}
.cs-industry-v2-card__link {
	font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", monospace);
	font-size: 11px;
	letter-spacing: 0.12em;
	color: var(--wp--preset--color--navy, var(--wp--preset--color--navy));
	text-transform: uppercase;
	text-decoration: none;
	font-weight: 700;
}
.cs-industry-v2-card__link:hover { color: var(--wp--preset--color--orange, var(--wp--preset--color--orange)); }
.cs-industry-v2-card__arrow {
	font-size: 18px;
	color: var(--wp--preset--color--orange, var(--wp--preset--color--orange));
}

.cs-industries-focus-sec { padding: 32px 48px 96px; }
.cs-industries-focus {
	position: relative;
	max-width: 1280px;
	margin: 0 auto;
	background: var(--wp--preset--color--navy, var(--wp--preset--color--navy));
	color: #fff;
	border-radius: 32px;
	padding: 56px;
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: 48px;
	overflow: hidden;
}
.cs-industries-focus__glow {
	position: absolute;
	inset: -80px -80px auto auto;
	width: 320px;
	height: 320px;
	background: radial-gradient(circle, rgba(247,144,24,0.25) 0%, transparent 70%);
	filter: blur(60px);
	pointer-events: none;
}
.cs-industries-focus__body { position: relative; z-index: 1; }
.cs-industries-focus__h2 {
	font-size: clamp(32px, 3.8vw, 52px);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.08;
	margin: 20px 0 20px;
	color: #fff;
}
.cs-industries-focus__lede {
	font-size: 17px;
	color: rgba(255,255,255,0.82);
	line-height: 1.55;
	margin: 0;
	max-width: 520px;
}
.cs-industries-focus__wont {
	position: relative;
	z-index: 1;
	background: rgba(255,255,255,0.04);
	border: 1px solid rgba(255,255,255,0.12);
	border-radius: 24px;
	padding: 28px;
	align-self: center;
}
.cs-industries-focus__wont-kicker {
	font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", monospace);
	font-size: 11px;
	letter-spacing: 0.14em;
	color: rgba(255,255,255,0.5);
	text-transform: uppercase;
	margin-bottom: 20px;
}
.cs-industries-focus__wont-item {
	display: grid;
	grid-template-columns: 20px 1fr;
	gap: 14px;
	padding: 14px 0;
	border-top: 1px solid rgba(255,255,255,0.08);
}
.cs-industries-focus__wont-item:first-of-type { border-top: none; }
.cs-industries-focus__wont-x {
	color: rgba(255,255,255,0.35);
	font-size: 14px;
	font-weight: 700;
	margin-top: 2px;
}
.cs-industries-focus__wont-title {
	font-size: 15px;
	font-weight: 700;
	color: #fff;
	margin: 0 0 2px;
}
.cs-industries-focus__wont-desc {
	font-size: 13px;
	color: rgba(255,255,255,0.6);
	line-height: 1.45;
	margin: 0;
}
.cs-industries-focus__wont-foot {
	font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", monospace);
	font-size: 10px;
	letter-spacing: 0.12em;
	color: rgba(255,255,255,0.45);
	text-transform: uppercase;
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid rgba(255,255,255,0.08);
}

/* --- Case studies archive --------------------------------------------- */
.cs-cases-hero {
	padding: 28px 48px 40px;
	background: var(--wp--preset--color--cream, #f7efe1);
}
.cs-cases-hero__inner { max-width: 1100px; margin: 0 auto; }
.cs-cases-hero__heading {
	font-family: var(--wp--preset--font-family--sans, "Inter Display", "Inter", sans-serif);
	font-size: clamp(48px, 7vw, 88px);
	font-weight: 800;
	color: var(--wp--preset--color--navy, var(--wp--preset--color--navy));
	letter-spacing: -0.035em;
	line-height: 1.02;
	margin: 20px 0 24px;
}
.cs-cases-hero__orange { color: var(--wp--preset--color--orange, var(--wp--preset--color--orange)); }
.cs-cases-hero__italic {
	font-family: var(--wp--preset--font-family--serif, "Fraunces", Georgia, serif);
	font-style: italic;
	font-weight: 300;
}
.cs-cases-hero__lede {
	font-size: 20px;
	color: #404a61;
	line-height: 1.55;
	max-width: 780px;
	margin: 0;
}

.cs-cases-filter {
	padding: 20px 48px 24px;
	background: var(--wp--preset--color--cream, #f7efe1);
	border-bottom: 1px solid rgba(21,38,77,0.08);
}
.cs-cases-filter__inner {
	max-width: 1280px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.cs-cases-filter__chip {
	font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", monospace);
	font-size: 11px;
	letter-spacing: 0.12em;
	padding: 8px 14px;
	border-radius: 999px;
	background: #fff;
	border: 1px solid rgba(21,38,77,0.1);
	color: var(--wp--preset--color--navy, var(--wp--preset--color--navy));
	text-transform: uppercase;
	cursor: pointer;
	font-weight: 600;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.cs-cases-filter__chip:hover { border-color: var(--wp--preset--color--orange, var(--wp--preset--color--orange)); }
.cs-cases-filter__chip.is-active {
	background: var(--wp--preset--color--navy, var(--wp--preset--color--navy));
	color: #fff;
	border-color: var(--wp--preset--color--navy, var(--wp--preset--color--navy));
}

.cs-cases-featured-sec { padding: 40px 48px 32px; }
.cs-cases-featured {
	position: relative;
	max-width: 1280px;
	margin: 0 auto;
	background: var(--wp--preset--color--navy, var(--wp--preset--color--navy));
	color: #fff;
	border-radius: 32px;
	padding: 56px;
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 48px;
	overflow: hidden;
}
.cs-cases-featured__body { position: relative; z-index: 1; }
.cs-cases-featured__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	align-items: center;
	margin-bottom: 18px;
}
.cs-cases-featured__badge {
	font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", monospace);
	font-size: 10px;
	letter-spacing: 0.14em;
	padding: 5px 12px;
	border-radius: 999px;
	background: var(--wp--preset--color--orange, var(--wp--preset--color--orange));
	color: #fff;
	text-transform: uppercase;
	font-weight: 700;
}
.cs-cases-featured__cat {
	font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", monospace);
	font-size: 11px;
	letter-spacing: 0.14em;
	color: rgba(255,255,255,0.55);
	text-transform: uppercase;
}
.cs-cases-featured__brand {
	font-family: var(--wp--preset--font-family--serif, "Fraunces", Georgia, serif);
	font-style: italic;
	font-weight: 300;
	font-size: 20px;
	color: rgba(255,255,255,0.85);
	margin-bottom: 10px;
}
.cs-cases-featured__headline {
	font-size: clamp(32px, 3.6vw, 48px);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.08;
	margin: 0 0 20px;
	color: #fff;
}
.cs-cases-featured__lede {
	font-size: 16px;
	color: rgba(255,255,255,0.78);
	line-height: 1.55;
	margin: 0 0 24px;
	max-width: 620px;
}
.cs-cases-featured__foot {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	padding-top: 20px;
	border-top: 1px solid rgba(255,255,255,0.12);
}
.cs-cases-featured__service {
	font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", monospace);
	font-size: 10px;
	letter-spacing: 0.12em;
	padding: 4px 10px;
	border-radius: 999px;
	background: rgba(255,255,255,0.08);
	color: rgba(255,255,255,0.85);
	text-transform: uppercase;
}
.cs-cases-featured__read {
	margin-left: auto;
	font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", monospace);
	font-size: 11px;
	letter-spacing: 0.12em;
	color: var(--wp--preset--color--orange, var(--wp--preset--color--orange));
	text-transform: uppercase;
	text-decoration: none;
	font-weight: 700;
}
.cs-cases-featured__read:hover { color: #fff; }
.cs-cases-featured__stats {
	position: relative;
	z-index: 1;
	background: rgba(255,255,255,0.04);
	border: 1px solid rgba(255,255,255,0.12);
	border-radius: 24px;
	padding: 28px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 20px;
}
.cs-cases-featured__stat { padding: 10px 0; }
.cs-cases-featured__stat + .cs-cases-featured__stat { border-top: 1px solid rgba(255,255,255,0.08); padding-top: 20px; }
.cs-cases-featured__stat-num {
	font-family: var(--wp--preset--font-family--sans, "Inter Display", "Inter", sans-serif);
	font-size: 56px;
	font-weight: 800;
	color: var(--wp--preset--color--orange, var(--wp--preset--color--orange));
	letter-spacing: -0.03em;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	margin-bottom: 8px;
}
.cs-cases-featured__stat-lbl {
	font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", monospace);
	font-size: 10px;
	letter-spacing: 0.14em;
	color: rgba(255,255,255,0.55);
	text-transform: uppercase;
}

.cs-cases-grid-sec { padding: 32px 48px 96px; }
.cs-cases-grid {
	max-width: 1280px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}
.cs-case-v2-card {
	background: #fff;
	border: 1px solid rgba(21,38,77,0.08);
	border-radius: 24px;
	padding: 28px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.cs-case-v2-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 20px 44px rgba(21,38,77,0.1);
	border-color: rgba(247,144,24,0.3);
}
.cs-case-v2-card__cat {
	font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", monospace);
	font-size: 10px;
	letter-spacing: 0.14em;
	color: var(--wp--preset--color--orange, var(--wp--preset--color--orange));
	text-transform: uppercase;
}
.cs-case-v2-card__brand {
	font-family: var(--wp--preset--font-family--serif, "Fraunces", Georgia, serif);
	font-style: italic;
	font-weight: 300;
	font-size: 17px;
	color: #6b748a;
}
.cs-case-v2-card__metric {
	padding: 14px 0;
	border-top: 1px solid rgba(21,38,77,0.08);
	border-bottom: 1px solid rgba(21,38,77,0.08);
}
.cs-case-v2-card__num {
	font-family: var(--wp--preset--font-family--sans, "Inter Display", "Inter", sans-serif);
	font-size: 44px;
	font-weight: 800;
	color: var(--wp--preset--color--navy, var(--wp--preset--color--navy));
	letter-spacing: -0.03em;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	margin-bottom: 6px;
}
.cs-case-v2-card__lbl {
	font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", monospace);
	font-size: 10px;
	letter-spacing: 0.14em;
	color: #6b748a;
	text-transform: uppercase;
}
.cs-case-v2-card__headline {
	font-size: 16px;
	font-weight: 600;
	color: var(--wp--preset--color--navy, var(--wp--preset--color--navy));
	line-height: 1.35;
	letter-spacing: -0.015em;
	margin: 0;
	flex: 1;
}
.cs-case-v2-card__services {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.cs-case-v2-card__service {
	font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", monospace);
	font-size: 9px;
	letter-spacing: 0.12em;
	padding: 4px 8px;
	border-radius: 999px;
	background: rgba(21,38,77,0.06);
	color: var(--wp--preset--color--navy, var(--wp--preset--color--navy));
	text-transform: uppercase;
}

/* --- Resources hub ---------------------------------------------------- */
.cs-resources-hero {
	padding: 28px 48px 48px;
	background: var(--wp--preset--color--cream, #f7efe1);
}
.cs-resources-hero__inner { max-width: 1100px; margin: 0 auto; }
.cs-resources-hero__pills { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 28px; }
.cs-resources-hero__heading {
	font-family: var(--wp--preset--font-family--sans, "Inter Display", "Inter", sans-serif);
	font-size: clamp(48px, 7vw, 88px);
	font-weight: 800;
	color: var(--wp--preset--color--navy, var(--wp--preset--color--navy));
	letter-spacing: -0.035em;
	line-height: 1.02;
	margin: 0 0 24px;
}
.cs-resources-hero__orange { color: var(--wp--preset--color--orange, var(--wp--preset--color--orange)); }
.cs-resources-hero__lede {
	font-size: 20px;
	color: #404a61;
	line-height: 1.55;
	max-width: 780px;
	margin: 0;
}

.cs-resources-featured-sec { padding: 32px 48px 40px; }
.cs-resources-featured {
	max-width: 1280px;
	margin: 0 auto;
	background: var(--wp--preset--color--navy, var(--wp--preset--color--navy));
	color: #fff;
	border-radius: 32px;
	padding: 56px;
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 48px;
	overflow: hidden;
}
.cs-resources-featured__body { position: relative; z-index: 1; }
.cs-resources-featured__h2 {
	font-size: clamp(32px, 3.8vw, 52px);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.08;
	margin: 20px 0 18px;
	color: #fff;
}
.cs-resources-featured__lede {
	font-size: 17px;
	color: rgba(255,255,255,0.78);
	line-height: 1.55;
	margin: 0 0 24px;
	max-width: 560px;
}
.cs-resources-featured__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	align-items: center;
}
.cs-resources-featured__meta {
	font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", monospace);
	font-size: 11px;
	letter-spacing: 0.14em;
	color: rgba(255,255,255,0.55);
	text-transform: uppercase;
}
.cs-resources-featured__inside {
	position: relative;
	z-index: 1;
	background: rgba(255,255,255,0.04);
	border: 1px solid rgba(255,255,255,0.12);
	border-radius: 24px;
	padding: 28px;
	align-self: center;
}
.cs-resources-featured__inside-kicker {
	font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", monospace);
	font-size: 11px;
	letter-spacing: 0.14em;
	color: rgba(255,255,255,0.5);
	text-transform: uppercase;
	margin-bottom: 16px;
}
.cs-resources-featured__inside-item {
	font-size: 14px;
	color: rgba(255,255,255,0.82);
	line-height: 1.45;
	padding: 10px 0;
	border-top: 1px solid rgba(255,255,255,0.08);
}
.cs-resources-featured__inside-item:first-of-type { border-top: none; padding-top: 0; }

.cs-resources-library-sec { padding: 32px 48px 16px; }
.cs-resources-library__head {
	max-width: 1280px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
	align-items: end;
	padding-bottom: 20px;
	border-bottom: 1px solid rgba(21,38,77,0.1);
}
.cs-resources-library__kicker {
	font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", monospace);
	font-size: 11px;
	letter-spacing: 0.14em;
	color: var(--wp--preset--color--orange, var(--wp--preset--color--orange));
	text-transform: uppercase;
	margin-bottom: 10px;
}
.cs-resources-library__h3 {
	font-size: clamp(28px, 3vw, 40px);
	font-weight: 800;
	color: var(--wp--preset--color--navy, var(--wp--preset--color--navy));
	letter-spacing: -0.025em;
	line-height: 1.1;
	margin: 0;
}
.cs-resources-library__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: flex-end;
}
.cs-resources-library__chip {
	font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", monospace);
	font-size: 11px;
	letter-spacing: 0.12em;
	padding: 8px 14px;
	border-radius: 999px;
	background: transparent;
	border: 1px solid rgba(21,38,77,0.15);
	color: var(--wp--preset--color--navy, var(--wp--preset--color--navy));
	text-transform: uppercase;
	cursor: pointer;
	font-weight: 600;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.cs-resources-library__chip:hover { border-color: var(--wp--preset--color--orange, var(--wp--preset--color--orange)); }
.cs-resources-library__chip.is-active {
	background: var(--wp--preset--color--navy, var(--wp--preset--color--navy));
	color: #fff;
	border-color: var(--wp--preset--color--navy, var(--wp--preset--color--navy));
}
.cs-resources-library-grid-wrap { }
.cs-resources-library-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	list-style: none;
	padding: 0;
	margin: 0;
}
.cs-resource-card {
	background: #fff;
	border: 1px solid rgba(21,38,77,0.08);
	border-radius: 20px;
	padding: 28px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.cs-resource-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 16px 40px rgba(21,38,77,0.08);
	border-color: rgba(247,144,24,0.3);
}
.cs-resource-card__tag {
	font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", monospace);
	font-size: 10px;
	letter-spacing: 0.14em;
	color: var(--wp--preset--color--orange, var(--wp--preset--color--orange));
	text-transform: uppercase;
}
.cs-resource-card__title {
	font-size: 19px;
	font-weight: 700;
	color: var(--wp--preset--color--navy, var(--wp--preset--color--navy));
	letter-spacing: -0.02em;
	line-height: 1.25;
	margin: 0;
}
.cs-resource-card__title a {
	color: inherit;
	text-decoration: none;
}
.cs-resource-card__title a:hover { color: var(--wp--preset--color--orange, var(--wp--preset--color--orange)); }
.cs-resource-card__excerpt {
	font-size: 14px;
	color: #6b748a;
	line-height: 1.5;
	margin: 0;
	flex: 1;
}

/* ==========================================================================
   Insights v2 — Awwwards-style visual blog redesign (2026-04-25 PM)
   ========================================================================== */

/* ---- Insights hero (tightened, no Operator Brief sidebar) ---- */
.cs-insights-hero {
	background: var(--cs-cream, var(--wp--preset--color--cream));
	padding: 96px 48px 64px;
}
.cs-insights-hero__inner {
	max-width: 1100px;
	margin: 0 auto;
}
.cs-insights-hero .cs-pill {
	margin-bottom: 28px;
}
.cs-insights-hero__heading {
	font-size: clamp(48px, 6vw, 80px);
	line-height: 0.95;
	letter-spacing: -0.035em;
	color: var(--cs-navy, var(--wp--preset--color--navy));
	font-weight: 700;
	margin: 0 0 28px;
	max-width: 16ch;
}
.cs-insights-hero__italic {
	font-family: var(--wp--preset--font-family--serif, "Fraunces", Georgia, serif);
	font-style: italic;
	font-weight: 400;
}
.cs-insights-hero__lede {
	font-size: clamp(17px, 1.4vw, 20px);
	color: #2a2f3a;
	line-height: 1.55;
	max-width: 64ch;
	margin: 0;
}

/* ---- Search section (used on both /insights and /category/X) ---- */
.cs-insights-search-sec {
	background: var(--cs-cream, var(--wp--preset--color--cream));
	padding: 0 48px 56px;
}
.cs-insights-search-sec__inner {
	max-width: 880px;
	margin: 0 auto;
}

.cs-blog-search {
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.cs-blog-search__row {
	display: flex;
	gap: 0;
	background: #ffffff;
	border: 1px solid rgba(15, 31, 58, 0.12);
	border-radius: 999px;
	box-shadow: 0 1px 2px rgba(12, 26, 56, 0.04), 0 8px 24px rgba(12, 26, 56, 0.06);
	overflow: hidden;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.cs-blog-search__row:focus-within {
	border-color: var(--cs-orange, var(--wp--preset--color--orange));
	box-shadow: 0 1px 2px rgba(247, 144, 24, 0.1), 0 0 0 4px rgba(247, 144, 24, 0.12);
}
.cs-blog-search__input {
	flex: 1;
	border: 0;
	background: transparent;
	padding: 18px 24px;
	font-size: 17px;
	font-family: var(--wp--preset--font-family--sans, "Inter", system-ui, sans-serif);
	color: var(--cs-navy, var(--wp--preset--color--navy));
	outline: none;
	min-width: 0;
}
.cs-blog-search__input::placeholder {
	color: rgba(15, 31, 58, 0.45);
}
.cs-blog-search__submit {
	flex: 0 0 auto;
	border: 0;
	background: var(--cs-navy, var(--wp--preset--color--navy));
	color: #ffffff;
	width: 56px;
	font-size: 22px;
	cursor: pointer;
	transition: background 0.15s ease;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.cs-blog-search__submit:hover {
	background: var(--cs-orange, var(--wp--preset--color--orange));
}
.cs-blog-search__scope {
	display: inline-flex;
	gap: 0;
	background: rgba(15, 31, 58, 0.04);
	border: 1px solid rgba(15, 31, 58, 0.08);
	border-radius: 999px;
	padding: 4px;
	align-self: flex-start;
}
.cs-blog-search__scope-btn {
	border: 0;
	background: transparent;
	padding: 8px 16px;
	font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", monospace);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(15, 31, 58, 0.6);
	border-radius: 999px;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}
.cs-blog-search__scope-btn:hover {
	color: var(--cs-navy, var(--wp--preset--color--navy));
}
.cs-blog-search__scope-btn.is-active {
	background: var(--cs-orange, var(--wp--preset--color--orange));
	color: #ffffff;
}

/* ---- /insights category section ---- */
.cs-insights-cats-sec {
	background: var(--cs-cream, var(--wp--preset--color--cream));
	padding: 0 48px 96px;
}
.cs-insights-cats-sec__inner {
	max-width: 1440px;
	margin: 0 auto;
}
.cs-insights-cats-sec__head {
	margin-bottom: 36px;
}
.cs-insights-cats-sec__kicker {
	display: inline-block;
	font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", monospace);
	font-size: 11px;
	letter-spacing: 0.15em;
	color: var(--cs-orange, var(--wp--preset--color--orange));
	text-transform: uppercase;
	margin-bottom: 12px;
}
.cs-insights-cats-sec__h2 {
	font-size: clamp(32px, 4vw, 52px);
	line-height: 1;
	letter-spacing: -0.025em;
	color: var(--cs-navy, var(--wp--preset--color--navy));
	margin: 0;
	font-weight: 700;
}

/* ---- Category grid (cs-cat-grid + cs-cat-card) ---- */
.cs-cat-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}

.cs-cat-card {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	border-radius: 20px;
	overflow: hidden;
	background: var(--cs-navy, var(--wp--preset--color--navy));
	text-decoration: none;
	color: #ffffff;
	box-shadow: 0 1px 2px rgba(12, 26, 56, 0.04), 0 14px 36px rgba(12, 26, 56, 0.08);
	transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s ease;
}
.cs-cat-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 1px 2px rgba(12, 26, 56, 0.06), 0 24px 56px rgba(12, 26, 56, 0.14);
}

.cs-cat-card__hero {
	position: absolute;
	inset: 0;
	overflow: hidden;
}
.cs-cat-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.cs-cat-card:hover .cs-cat-card__img {
	transform: scale(1.04);
}
.cs-cat-card__gradient {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, var(--cs-cat-from, var(--wp--preset--color--navy)) 0%, var(--cs-cat-to, var(--wp--preset--color--orange)) 100%);
}
.cs-cat-card__gradient-name {
	font-family: var(--wp--preset--font-family--serif, "Fraunces", Georgia, serif);
	font-size: clamp(36px, 5vw, 64px);
	font-weight: 500;
	letter-spacing: -0.02em;
	color: rgba(255, 255, 255, 0.92);
	text-align: center;
	padding: 0 24px;
	line-height: 1.05;
}

.cs-cat-card__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(12, 26, 56, 0) 0%, rgba(12, 26, 56, 0.6) 50%, rgba(12, 26, 56, 0.92) 100%);
	display: flex !important;
	flex-direction: column;
	justify-content: flex-end;
	padding: 32px 32px 28px;
	opacity: 1 !important;
	transition: none;
	color: #ffffff;
}
.cs-cat-card:hover .cs-cat-card__overlay {
	opacity: 1 !important;
}
.cs-cat-card__count {
	font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", monospace);
	font-size: 11px;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--cs-orange, var(--wp--preset--color--orange));
	margin-bottom: 10px;
	font-variant-numeric: tabular-nums;
}
.cs-cat-card__name {
	font-family: var(--wp--preset--font-family--serif, "Fraunces", Georgia, serif);
	font-size: clamp(28px, 3vw, 38px);
	font-weight: 500;
	letter-spacing: -0.02em;
	color: #ffffff;
	margin: 0 0 8px;
	line-height: 1.05;
}
.cs-cat-card__subtitle {
	font-size: 14px;
	color: rgba(255, 255, 255, 0.78);
	line-height: 1.5;
	margin: 0 0 14px;
	max-width: 36ch;
}
.cs-cat-card__arrow {
	font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", monospace);
	font-size: 11px;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.92);
}

/* Mobile-only always-visible label below the card */
.cs-cat-card__mobile-label { display: none; }

/* ---- Category archive: breadcrumb + compact hero ---- */
.cs-cat-breadcrumb {
	background: var(--cs-cream, var(--wp--preset--color--cream));
	padding: 24px 48px;
	border-bottom: 1px solid rgba(15, 31, 58, 0.06);
}
.cs-cat-breadcrumb__inner {
	max-width: 1440px;
	margin: 0 auto;
	font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", monospace);
	font-size: 11px;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	display: flex;
	align-items: center;
	gap: 10px;
	color: rgba(15, 31, 58, 0.55);
}
.cs-cat-breadcrumb__link {
	color: rgba(15, 31, 58, 0.55);
	text-decoration: none;
	transition: color 0.15s ease;
}
.cs-cat-breadcrumb__link:hover {
	color: var(--cs-orange, var(--wp--preset--color--orange));
}
.cs-cat-breadcrumb__sep { color: rgba(15, 31, 58, 0.3); }
.cs-cat-breadcrumb__current,
.cs-cat-breadcrumb__current .wp-block-query-title {
	color: var(--cs-navy, var(--wp--preset--color--navy));
	font-weight: 500;
	font-size: 11px;
	letter-spacing: 0.15em;
	margin: 0;
}
.cs-cat-breadcrumb__title { display: inline; }

.cs-cat-hero {
	position: relative;
	background: var(--cs-navy, var(--wp--preset--color--navy));
	padding: 15px 48px;
	color: #ffffff;
	overflow: hidden;
	isolation: isolate;
}
.cs-cat-hero--gradient {
	background: linear-gradient(135deg, var(--cs-cat-from, var(--wp--preset--color--navy)) 0%, var(--cs-cat-to, var(--wp--preset--color--orange)) 100%);
}
.cs-cat-hero__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
}
.cs-cat-hero__bg-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.cs-cat-hero__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	/* Two-axis scrim: heavy on the left (where text sits), fades right to let
	   the image's branded composition breathe. Plus a subtle bottom-up gradient
	   so the search box border remains legible against any image. */
	background:
		linear-gradient(90deg, rgba(12, 26, 56, 0.85) 0%, rgba(12, 26, 56, 0.65) 35%, rgba(12, 26, 56, 0.25) 70%, rgba(12, 26, 56, 0.15) 100%),
		linear-gradient(180deg, rgba(12, 26, 56, 0.0) 0%, rgba(12, 26, 56, 0.35) 100%);
}
.cs-cat-hero--gradient .cs-cat-hero__scrim {
	background: linear-gradient(180deg, rgba(12, 26, 56, 0.0) 0%, rgba(12, 26, 56, 0.18) 100%);
}
.cs-cat-hero__inner {
	position: relative;
	z-index: 2;
	max-width: 1440px;
	margin: 0 auto;
	padding: 56px 0;
}
/* Text column sits on the left ~55% so branded imagery on the right stays
   uncovered. Search box can extend a touch wider for usability. */
.cs-cat-hero__inner > .cs-pill,
.cs-cat-hero__heading,
.cs-cat-hero__lede {
	max-width: 56%;
}
.cs-cat-hero__search {
	max-width: 60%;
}
@media (max-width: 1023px) {
	.cs-cat-hero__inner > .cs-pill,
	.cs-cat-hero__heading,
	.cs-cat-hero__lede,
	.cs-cat-hero__search {
		max-width: 100%;
	}
}
.cs-cat-hero .cs-pill {
	margin-bottom: 20px;
}
.cs-cat-hero__heading {
	font-size: clamp(40px, 5vw, 64px);
	line-height: 0.98;
	letter-spacing: -0.025em;
	color: #ffffff;
	font-weight: 700;
	margin: 0 0 16px;
	text-shadow: 0 2px 24px rgba(12, 26, 56, 0.35);
}
.cs-cat-hero__lede {
	font-size: clamp(16px, 1.3vw, 19px);
	color: rgba(255, 255, 255, 0.92);
	line-height: 1.55;
	max-width: 64ch;
	margin: 0 0 28px;
	text-shadow: 0 1px 12px rgba(12, 26, 56, 0.4);
}
.cs-cat-hero__search {
	max-width: 880px;
}
.cs-cat-hero__search .cs-blog-search__row {
	box-shadow: 0 2px 6px rgba(12, 26, 56, 0.18), 0 16px 40px rgba(12, 26, 56, 0.28);
}
.cs-cat-hero__search .cs-blog-search__scope {
	background: rgba(255, 255, 255, 0.12);
	border-color: rgba(255, 255, 255, 0.18);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}
.cs-cat-hero__search .cs-blog-search__scope-btn {
	color: rgba(255, 255, 255, 0.78);
}
.cs-cat-hero__search .cs-blog-search__scope-btn:hover {
	color: #ffffff;
}

/* ---- Post grid v2 (Awwwards-style cards) ---- */
.cs-cat-posts-sec {
	background: var(--cs-cream, var(--wp--preset--color--cream));
	padding: 64px 48px 88px;
}
.cs-cat-posts-sec__inner {
	max-width: 1440px;
	margin: 0 auto;
}
.cs-post-grid-v2 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
	list-style: none;
	padding: 0;
	margin: 0;
}
.cs-post-grid-v2 > li {
	list-style: none;
	margin: 0;
	padding: 0;
}

.cs-post-card-v2 {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	border-radius: 18px;
	overflow: hidden;
	background: var(--cs-navy, var(--wp--preset--color--navy));
	text-decoration: none;
	color: #ffffff;
	box-shadow: 0 1px 2px rgba(12, 26, 56, 0.04), 0 12px 32px rgba(12, 26, 56, 0.07);
	transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s ease;
}
.cs-post-card-v2:hover {
	transform: translateY(-3px);
	box-shadow: 0 1px 2px rgba(12, 26, 56, 0.06), 0 22px 50px rgba(12, 26, 56, 0.12);
}
.cs-post-card-v2__hero {
	position: absolute;
	inset: 0;
	overflow: hidden;
}
.cs-post-card-v2__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.cs-post-card-v2:hover .cs-post-card-v2__img {
	transform: scale(1.04);
}
.cs-post-card-v2__gradient {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, var(--cs-cat-from, var(--wp--preset--color--navy)) 0%, var(--cs-cat-to, var(--wp--preset--color--orange)) 100%);
}
.cs-post-card-v2__gradient-name {
	font-family: var(--wp--preset--font-family--serif, "Fraunces", Georgia, serif);
	font-size: clamp(22px, 2.5vw, 32px);
	font-weight: 500;
	letter-spacing: -0.015em;
	color: rgba(255, 255, 255, 0.88);
	text-align: center;
	padding: 0 24px;
	line-height: 1.05;
}
.cs-post-card-v2__type-badge {
	position: absolute;
	top: 16px;
	left: 16px;
	z-index: 2;
	font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", monospace);
	font-size: 10px;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: #ffffff;
	background: rgba(12, 26, 56, 0.72);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	padding: 6px 12px;
	border-radius: 999px;
	transition: opacity 0.25s ease;
}

.cs-post-card-v2__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(12, 26, 56, 0) 0%, rgba(12, 26, 56, 0.65) 50%, rgba(12, 26, 56, 0.94) 100%);
	display: flex !important;
	flex-direction: column;
	justify-content: flex-end;
	padding: 28px 28px 24px;
	opacity: 1 !important;
	transition: none;
	color: #ffffff;
}
.cs-post-card-v2:hover .cs-post-card-v2__overlay {
	opacity: 1 !important;
}
.cs-post-card-v2__cat {
	font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", monospace);
	font-size: 10px;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--cs-orange, var(--wp--preset--color--orange));
	margin-bottom: 8px;
}
.cs-post-card-v2__title {
	font-size: clamp(18px, 1.8vw, 24px);
	font-weight: 700;
	letter-spacing: -0.02em;
	color: #ffffff;
	margin: 0 0 10px;
	line-height: 1.18;
	font-family: var(--wp--preset--font-family--sans, "Inter", system-ui, sans-serif);
}
.cs-post-card-v2__excerpt {
	font-size: 13px;
	color: rgba(255, 255, 255, 0.78);
	line-height: 1.5;
	margin: 0 0 12px;
}
.cs-post-card-v2__arrow {
	font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", monospace);
	font-size: 10px;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.92);
}

.cs-post-card-v2__mobile-label { display: none; }

.cs-cat-no-results {
	font-size: 18px;
	color: var(--cs-muted, var(--wp--preset--color--muted));
	text-align: center;
	padding: 64px 0;
}
.cs-cat-no-results a {
	color: var(--cs-orange, var(--wp--preset--color--orange));
	text-decoration: none;
	font-weight: 500;
}

/* ---- Mobile responsive ---- */
@media (max-width: 1023px) {
	.cs-cat-grid,
	.cs-post-grid-v2 {
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
	}
	.cs-insights-hero { padding: 64px 32px 48px; }
	.cs-insights-search-sec { padding: 0 32px 40px; }
	.cs-insights-cats-sec { padding: 0 32px 64px; }
	.cs-cat-posts-sec { padding: 48px 32px 64px; }
	.cs-cat-hero { padding: 15px 32px; }
	.cs-cat-hero__inner { padding: 44px 0; }
	.cs-cat-breadcrumb { padding: 20px 32px; }
}

@media (max-width: 767px) {
	.cs-cat-grid,
	.cs-post-grid-v2 {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	/* Cards lose hover-overlay on mobile (no hover support); always-visible label below the image */
	.cs-cat-card {
		aspect-ratio: auto;
		display: flex;
		flex-direction: column;
	}
	.cs-cat-card__hero {
		position: relative;
		aspect-ratio: 16 / 9;
	}
	.cs-cat-card__overlay {
		display: none;
	}
	.cs-cat-card__mobile-label {
		display: block;
		padding: 16px 18px 18px;
		background: #ffffff;
		color: var(--cs-navy, var(--wp--preset--color--navy));
	}
	.cs-cat-card__mobile-label .cs-cat-card__count--mobile {
		display: block;
		font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", monospace);
		font-size: 10px;
		letter-spacing: 0.15em;
		text-transform: uppercase;
		color: var(--cs-orange, var(--wp--preset--color--orange));
		margin-bottom: 4px;
	}
	.cs-cat-card__mobile-label .cs-cat-card__name--mobile {
		display: block;
		font-family: var(--wp--preset--font-family--serif, "Fraunces", Georgia, serif);
		font-size: 22px;
		font-weight: 500;
		letter-spacing: -0.015em;
		line-height: 1.1;
		color: var(--cs-navy, var(--wp--preset--color--navy));
	}

	.cs-post-card-v2 {
		aspect-ratio: auto;
		display: flex;
		flex-direction: column;
	}
	.cs-post-card-v2__hero {
		position: relative;
		aspect-ratio: 16 / 9;
	}
	.cs-post-card-v2__overlay {
		display: none;
	}
	.cs-post-card-v2__type-badge {
		opacity: 1 !important;
	}
	.cs-post-card-v2__mobile-label {
		display: block;
		padding: 14px 18px 18px;
		background: #ffffff;
		color: var(--cs-navy, var(--wp--preset--color--navy));
	}
	.cs-post-card-v2__mobile-label .cs-post-card-v2__cat--mobile {
		display: block;
		font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", monospace);
		font-size: 10px;
		letter-spacing: 0.15em;
		text-transform: uppercase;
		color: var(--cs-orange, var(--wp--preset--color--orange));
		margin-bottom: 4px;
	}
	.cs-post-card-v2__mobile-label .cs-post-card-v2__title--mobile {
		display: block;
		font-size: 16px;
		font-weight: 700;
		letter-spacing: -0.015em;
		line-height: 1.25;
		color: var(--cs-navy, var(--wp--preset--color--navy));
	}

	/* Search bar stacks scope toggle below input */
	.cs-blog-search__scope {
		align-self: stretch;
		justify-content: center;
	}
	.cs-blog-search__scope-btn {
		flex: 1;
		text-align: center;
	}
	.cs-blog-search__input { padding: 14px 18px; font-size: 15px; }
	.cs-blog-search__submit { width: 48px; }

	.cs-insights-hero { padding: 48px 20px 36px; }
	.cs-insights-hero__heading { font-size: clamp(36px, 10vw, 56px); }
	.cs-insights-search-sec { padding: 0 20px 32px; }
	.cs-insights-cats-sec { padding: 0 20px 56px; }
	.cs-cat-posts-sec { padding: 40px 20px 56px; }
	.cs-cat-hero { padding: 15px 20px; }
	.cs-cat-hero__inner { padding: 36px 0; }
	.cs-cat-hero__heading { font-size: clamp(32px, 9vw, 48px); }
	.cs-cat-breadcrumb { padding: 16px 20px; }
}
.cs-resource-card__read {
	font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", monospace);
	font-size: 11px;
	letter-spacing: 0.12em;
	color: var(--wp--preset--color--navy, var(--wp--preset--color--navy));
	text-transform: uppercase;
	font-weight: 700;
	margin: 0;
}

.cs-resources-newsletter-sec { padding: 24px 48px 96px; }
.cs-resources-newsletter {
	max-width: 1280px;
	margin: 0 auto;
	background: var(--wp--preset--color--navy, var(--wp--preset--color--navy));
	color: #fff;
	border-radius: 32px;
	padding: 56px;
	display: grid;
	grid-template-columns: 1.3fr 1fr;
	gap: 48px;
	align-items: center;
}
.cs-resources-newsletter__body { }
.cs-resources-newsletter__h3 {
	font-size: clamp(28px, 3.2vw, 42px);
	font-weight: 800;
	letter-spacing: -0.025em;
	line-height: 1.12;
	margin: 20px 0 16px;
	color: #fff;
}
.cs-resources-newsletter__orange { color: var(--wp--preset--color--orange, var(--wp--preset--color--orange)); }
.cs-resources-newsletter__lede {
	font-size: 16px;
	color: rgba(255,255,255,0.78);
	line-height: 1.55;
	margin: 0;
	max-width: 520px;
}
.cs-resources-newsletter__form {
	background: rgba(255,255,255,0.04);
	border: 1px solid rgba(255,255,255,0.12);
	border-radius: 20px;
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.cs-resources-newsletter__label {
	font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", monospace);
	font-size: 10px;
	letter-spacing: 0.14em;
	color: rgba(255,255,255,0.5);
	text-transform: uppercase;
}
.cs-resources-newsletter__input {
	background: rgba(255,255,255,0.06);
	border: 1px solid rgba(255,255,255,0.16);
	border-radius: 12px;
	padding: 14px 16px;
	color: #fff;
	font-size: 15px;
	font-family: inherit;
}
.cs-resources-newsletter__input:focus {
	outline: 2px solid var(--wp--preset--color--orange, var(--wp--preset--color--orange));
	outline-offset: 2px;
	border-color: transparent;
}
.cs-resources-newsletter__input::placeholder { color: rgba(255,255,255,0.4); }
.cs-resources-newsletter__submit {
	background: var(--wp--preset--color--orange, var(--wp--preset--color--orange));
	color: #fff;
	border: none;
	border-radius: 12px;
	padding: 14px 18px;
	font-family: inherit;
	font-weight: 700;
	font-size: 15px;
	cursor: pointer;
	transition: background 0.2s ease, transform 0.2s ease;
}
.cs-resources-newsletter__submit:hover {
	background: var(--wp--preset--color--orange);
	transform: translateY(-1px);
}

/* --- Single post additions -------------------------------------------- */
.cs-post-hero__sep {
	color: rgba(21,38,77,0.3);
	padding: 0 6px;
}
.cs-post-hero__read {
	font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", monospace);
	font-size: 11px;
	letter-spacing: 0.14em;
	color: #6b748a;
	text-transform: uppercase;
}

.cs-post-body__share {
	margin-top: 32px;
	padding-top: 24px;
	border-top: 1px solid rgba(21,38,77,0.1);
}
.cs-post-body__share-kicker {
	font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", monospace);
	font-size: 10px;
	letter-spacing: 0.14em;
	color: #6b748a;
	text-transform: uppercase;
	margin-bottom: 12px;
}
.cs-post-body__share-icons {
	display: flex;
	gap: 8px;
}
.cs-post-body__share-btn {
	width: 36px;
	height: 36px;
	border-radius: 10px;
	background: #fff;
	border: 1px solid rgba(21,38,77,0.1);
	color: var(--wp--preset--color--navy, var(--wp--preset--color--navy));
	font-size: 14px;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.cs-post-body__share-btn:hover {
	background: var(--wp--preset--color--navy, var(--wp--preset--color--navy));
	color: #fff;
	border-color: var(--wp--preset--color--navy, var(--wp--preset--color--navy));
}

.cs-post-related {
	padding: 64px 48px;
	background: var(--wp--preset--color--cream, #f7efe1);
	border-top: 1px solid rgba(21,38,77,0.08);
}
.cs-post-related__inner {
	max-width: 1280px;
	margin: 0 auto;
}
.cs-post-related__head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 28px;
	padding-bottom: 16px;
	border-bottom: 1px solid rgba(21,38,77,0.1);
}
.cs-post-related__h3 {
	font-size: clamp(24px, 2.6vw, 32px);
	font-weight: 800;
	color: var(--wp--preset--color--navy, var(--wp--preset--color--navy));
	letter-spacing: -0.025em;
	margin: 0;
}
.cs-post-related__link {
	font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", monospace);
	font-size: 11px;
	letter-spacing: 0.12em;
	color: var(--wp--preset--color--navy, var(--wp--preset--color--navy));
	text-transform: uppercase;
	text-decoration: none;
	font-weight: 700;
}
.cs-post-related__link:hover { color: var(--wp--preset--color--orange, var(--wp--preset--color--orange)); }
.cs-post-related__grid {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	list-style: none;
	padding: 0;
	margin: 0;
}
.cs-post-related__card {
	background: #fff;
	border: 1px solid rgba(21,38,77,0.08);
	border-radius: 20px;
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.cs-post-related__card:hover {
	transform: translateY(-3px);
	box-shadow: 0 16px 36px rgba(21,38,77,0.08);
}
.cs-post-related__kicker {
	font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", monospace);
	font-size: 10px;
	letter-spacing: 0.14em;
	color: var(--wp--preset--color--orange, var(--wp--preset--color--orange));
	text-transform: uppercase;
}
.cs-post-related__title {
	font-size: 18px;
	font-weight: 700;
	color: var(--wp--preset--color--navy, var(--wp--preset--color--navy));
	letter-spacing: -0.02em;
	line-height: 1.25;
	margin: 0;
	flex: 1;
}
.cs-post-related__title a {
	color: inherit;
	text-decoration: none;
}
.cs-post-related__title a:hover { color: var(--wp--preset--color--orange, var(--wp--preset--color--orange)); }
.cs-post-related__foot {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-top: 14px;
	border-top: 1px solid rgba(21,38,77,0.08);
	gap: 12px;
}
.cs-post-related__date {
	font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", monospace);
	font-size: 11px;
	letter-spacing: 0.1em;
	color: #6b748a;
	text-transform: uppercase;
	margin: 0;
}
.cs-post-related__read-min {
	font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", monospace);
	font-size: 11px;
	letter-spacing: 0.1em;
	color: #6b748a;
	text-transform: uppercase;
	margin: 0;
}

/* --- Button — on-dark variant (used on flagship cards) ---------------- */
.cs-btn.cs-btn--on-dark {
	background: rgba(255,255,255,0.08);
	color: #fff;
	border: 1px solid rgba(255,255,255,0.2);
}
.cs-btn.cs-btn--on-dark:hover {
	background: rgba(255,255,255,0.14);
	border-color: rgba(255,255,255,0.35);
}

/* --- Responsive collapse for all new blocks --------------------------- */
@media (max-width: 1023px) {
	.cs-services-flagship { grid-template-columns: 1fr; gap: 32px; padding: 40px; }
	.cs-services-flagship__proof-num { font-size: 72px; }
	.cs-services-group__head { grid-template-columns: 1fr; gap: 16px; }
	.cs-services-group__grid,
	.cs-services-group__grid:has(> *:nth-child(4)) {
		grid-template-columns: repeat(2, 1fr);
	}
	.cs-services-pricing { grid-template-columns: 1fr; gap: 32px; }
	.cs-services-pricing__left { position: static; }
	.cs-industries-grid { grid-template-columns: 1fr; }
	.cs-industries-focus { grid-template-columns: 1fr; gap: 32px; padding: 40px; }
	.cs-cases-featured { grid-template-columns: 1fr; gap: 32px; padding: 40px; }
	.cs-cases-grid { grid-template-columns: repeat(2, 1fr); }
	.cs-resources-featured { grid-template-columns: 1fr; gap: 32px; padding: 40px; }
	.cs-resources-library__head { grid-template-columns: 1fr; align-items: start; }
	.cs-resources-library__filters { justify-content: flex-start; }
	.cs-resources-library-grid { grid-template-columns: repeat(2, 1fr); }
	.cs-resources-newsletter { grid-template-columns: 1fr; gap: 32px; padding: 40px; }
	.cs-post-related__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
	.cs-services-hero,
	.cs-industries-hero,
	.cs-cases-hero,
	.cs-resources-hero {
		padding-left: 20px;
		padding-right: 20px;
		padding-top: 20px;
	}
	.cs-services-hero__heading,
	.cs-industries-hero__heading,
	.cs-cases-hero__heading,
	.cs-resources-hero__heading {
		font-size: clamp(36px, 10vw, 56px);
	}
	.cs-services-flagship-sec,
	.cs-services-group-sec,
	.cs-services-pricing-sec,
	.cs-industries-grid-sec,
	.cs-industries-focus-sec,
	.cs-cases-filter,
	.cs-cases-featured-sec,
	.cs-cases-grid-sec,
	.cs-resources-featured-sec,
	.cs-resources-library-sec,
	.cs-resources-newsletter-sec,
	.cs-post-related {
		padding-left: 20px;
		padding-right: 20px;
	}
	.cs-services-flagship,
	.cs-industries-focus,
	.cs-cases-featured,
	.cs-resources-featured,
	.cs-resources-newsletter {
		padding: 32px 24px;
		border-radius: 24px;
	}
	.cs-services-group__grid,
	.cs-services-group__grid:has(> *:nth-child(4)) {
		grid-template-columns: 1fr;
	}
	.cs-industry-v2-card { grid-template-columns: 1fr; }
	.cs-industry-v2-card__gradient { min-height: 200px; }
	.cs-cases-grid { grid-template-columns: 1fr; }
	.cs-cases-featured__stat-num { font-size: 44px; }
	.cs-resources-library-grid { grid-template-columns: 1fr; }
	.cs-post-related__grid { grid-template-columns: 1fr; }
	.cs-post-related__head { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* ======================================================================
   Hamburger toggle (2026-04-24) — injected by JS on mobile
   ====================================================================== */
.cs-header__toggle {
	display: none;
	background: transparent;
	border: 1px solid rgba(21,38,77,0.15);
	border-radius: 10px;
	width: 44px;
	height: 44px;
	padding: 0;
	cursor: pointer;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
	z-index: 100;
	position: relative;
	transition: background 0.2s ease, border-color 0.2s ease;
}
.cs-header__toggle:hover {
	background: rgba(255,255,255,0.6);
	border-color: rgba(21,38,77,0.28);
}
.cs-header__toggle-bar {
	display: block;
	width: 20px;
	height: 2px;
	background: var(--wp--preset--color--navy, var(--wp--preset--color--navy));
	border-radius: 2px;
	transition: transform 0.3s ease, opacity 0.2s ease;
}
.cs-header--menu-open .cs-header__toggle-bar:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}
.cs-header--menu-open .cs-header__toggle-bar:nth-child(2) {
	opacity: 0;
}
.cs-header--menu-open .cs-header__toggle-bar:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 767px) {
	.cs-header__toggle {
		display: inline-flex;
		position: absolute;
		right: 16px;
		top: 50%;
		transform: translateY(-50%);
	}
	.cs-header--menu-open .cs-header__toggle {
		/* Keep centered on Y even when open */
	}
	.cs-header__row {
		position: relative;
	}
}

/* ==========================================================================
   Team portraits — render <img> tags inside the existing shaped wrappers.
   ========================================================================== */
.cs-team-leadership__portrait,
.cs-team-functional__avatar,
.cs-team-distribution__avatar,
.cs-team-advisory__portrait,
.cs-about-team-card__photo {
	overflow: hidden;
}
.cs-team-leadership__portrait img,
.cs-team-functional__avatar img,
.cs-team-distribution__avatar img,
.cs-team-advisory__portrait img,
.cs-about-team-card__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 22%;
}
.cs-team-leadership__portrait:has(img) span,
.cs-team-advisory__portrait:has(img) span {
	display: none;
}
.cs-team-functional__avatar:has(img),
.cs-team-distribution__avatar:has(img),
.cs-about-team-card__photo:has(img) {
	color: transparent;
	background: linear-gradient(135deg, var(--wp--preset--color--bone, #f3e8d2) 0%, var(--wp--preset--color--blue-soft, #dde6f2) 100%);
}


/* ==========================================================================
   Hero spacing contract  (added 2026-04-27)
   --------------------------------------------------------------------------
   Caps every hero surface at 60vh max so below-the-fold content is visible
   on first paint. Each style variation can override --cs-hero-min-height
   via theme.json -> settings.custom.cs.hero.minHeight.
   --cs-hero-bg-image is set per-variation to layer a baked-in editorial
   image behind the hero copy.
   ========================================================================== */

.cs-hero-bg,
.cs-hero-video,
.cs-team-hero,
.cs-team-hero--photo,
.cs-about-hero,
.cs-archive-hero,
.cs-page-hero,
.cs-contact-hero,
.cs-contact-v2,
.cs-blog-hero,
.cs-single-hero,
.cs-post-hero,
.cs-service-hero,
.cs-services-hero,
.cs-industries-hero,
.cs-cases-hero,
.cs-resources-hero,
.cs-hero-v2,
.wp-block-cover.is-style-cs-hero,
.wp-block-cover.cs-hero {
	min-height: var(--cs-hero-min-height) !important;
	max-height: 60vh;
	background-image: var(--cs-hero-bg-image);
	background-size: cover;
	background-position: center;
}

/* WordPress core cover blocks used as heroes get the same fold cap. */
.wp-block-cover.cs-hero,
.wp-block-cover.is-style-cs-hero {
	padding-block: clamp(32px, 5vw, 56px);
}

/* Hero text stacks shouldn't push the hero past the cap. */
.cs-hero-bg__inner,
.cs-hero-video__inner,
.cs-page-hero__inner,
.cs-archive-hero__inner,
.cs-team-hero__inner {
	padding-block: clamp(28px, 4vw, 48px);
}

@media (max-width: 1023px) {
	.cs-hero-bg,
	.cs-hero-video,
	.cs-team-hero,
	.cs-team-hero--photo,
	.cs-about-hero,
	.cs-archive-hero,
	.cs-page-hero,
	.cs-contact-hero,
	.cs-contact-v2,
	.cs-blog-hero,
	.cs-single-hero,
	.cs-post-hero,
	.cs-service-hero,
	.cs-services-hero,
	.cs-industries-hero,
	.cs-cases-hero,
	.cs-resources-hero,
	.cs-hero-v2,
	.wp-block-cover.is-style-cs-hero,
	.wp-block-cover.cs-hero {
		min-height: var(--cs-hero-min-height-tablet) !important;
		max-height: 65vh;
	}
}

@media (max-width: 767px) {
	.cs-hero-bg,
	.cs-hero-video,
	.cs-team-hero,
	.cs-team-hero--photo,
	.cs-about-hero,
	.cs-archive-hero,
	.cs-page-hero,
	.cs-contact-hero,
	.cs-contact-v2,
	.cs-blog-hero,
	.cs-single-hero,
	.cs-post-hero,
	.cs-service-hero,
	.cs-services-hero,
	.cs-industries-hero,
	.cs-cases-hero,
	.cs-resources-hero,
	.cs-hero-v2,
	.wp-block-cover.is-style-cs-hero,
	.wp-block-cover.cs-hero {
		min-height: var(--cs-hero-min-height-mobile) !important;
		max-height: 70vh;
	}
}

/* ==========================================================================
   Section spacing contract  (added 2026-04-27)
   --------------------------------------------------------------------------
   Tighten the previous 96-192px section padding stack down to a fluid
   clamp(48px, 6vw, 80px). Each variation may override via
   settings.custom.cs.section.padding.
   ========================================================================== */

.cs-interior-section,
.cs-team-leadership,
.cs-team-functional,
.cs-about-mission,
.cs-about-values,
.cs-about-stats,
.cs-services-grid,
.cs-services-detail,
.cs-industries-grid,
.cs-cases-grid,
.cs-resources-grid,
.cs-insights-grid,
.cs-section-pad,
.wp-block-group.cs-section,
.wp-block-group.is-style-cs-section {
	padding-top: var(--cs-section-padding);
	padding-bottom: var(--cs-section-padding);
}

@media (max-width: 767px) {
	.cs-interior-section,
	.cs-team-leadership,
	.cs-team-functional,
	.cs-about-mission,
	.cs-about-values,
	.cs-about-stats,
	.cs-services-grid,
	.cs-services-detail,
	.cs-industries-grid,
	.cs-cases-grid,
	.cs-resources-grid,
	.cs-insights-grid,
	.cs-section-pad,
	.wp-block-group.cs-section,
	.wp-block-group.is-style-cs-section {
		padding-top: var(--cs-section-padding-sm);
		padding-bottom: var(--cs-section-padding-sm);
	}
}

/* WordPress block-gap default tightened (was 48-64px). */
:where(body) {
	--wp--style--block-gap: var(--cs-block-gap);
}

/* Final-CTA + section-header — match the new rhythm. */
.cs-section-header {
	padding-top: var(--cs-section-padding);
	padding-bottom: clamp(24px, 3vw, 40px);
}

.cs-final-cta {
	margin-bottom: var(--cs-section-padding);
}

/* Belt-and-suspenders: kill any 100vh hero rule that might leak from
   third-party CSS or future patterns. */
.cs-hero-bg[style*="100vh"],
.cs-hero-video[style*="100vh"],
.wp-block-cover.cs-hero[style*="100vh"] {
	min-height: var(--cs-hero-min-height) !important;
	height: auto !important;
}


/* ------------------------------------------------------------------------- *
 * Standalone-theme hero overrides (design-refresh fix-10)
 *
 * Covers ALL 17 hero variants used across all 24 templates. Each gets:
 *   - The variation's --wp--custom--cs--hero--bg-image painted as background
 *   - A light navy scrim for headline legibility
 *   - Headline color forced to bone (since the dark image swallows ink)
 *   - Lede color forced to cloud
 *   - Headline font-cap so existing copy fits without overflow
 *
 * functions.php injects the bg image URL based on which page is loading,
 * so the home, marketplace LPs, insights, about, and team all rotate
 * through their per-template imagery automatically.
 * ------------------------------------------------------------------------- */

/* All hero variants share the same background treatment */
.cs-hero-v2,
.cs-hero-bg,
.cs-hero-video,
.cs-tt-hero,
.cs-about-hero,
.cs-team-hero,
.cs-contact-hero,
.cs-contact-v2,
.cs-insights-hero,
.cs-resources-hero,
.cs-cases-hero,
.cs-industries-hero,
.cs-services-hero,
.cs-service-hero,
.cs-single-hero,
.cs-post-hero,
.cs-page-hero,
.cs-archive-hero {
    background-image:
        linear-gradient(180deg, rgba(10,15,28,0.18) 0%, rgba(10,15,28,0.42) 100%),
        var(--wp--custom--cs--hero--bg-image) !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-color: var(--wp--preset--color--navy-deep) !important;
}

/* Team-hero polaroid layout uses an inner __bg div for the photo background.
 * Override that too so the variation's about-image lands behind the polaroids. */
.cs-team-hero__bg {
    background-image:
        linear-gradient(180deg, rgba(10,15,28,0.30) 0%, rgba(10,15,28,0.55) 100%),
        var(--wp--custom--cs--hero--bg-image) !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}

/* Headline color overrides — every hero's H1 / heading element, in bone */
.cs-hero-v2 .cs-hero-v2__heading,
.cs-hero-v2 .cs-hero-v2__hl,
.cs-hero-bg .cs-hero-bg__heading,
.cs-hero-video .cs-hero-video__heading,
.cs-tt-hero h1,
.cs-tt-hero .cs-tt-hero__heading,
.cs-about-hero h1,
.cs-about-hero .cs-about-hero__heading,
.cs-team-hero h1,
.cs-team-hero .cs-team-hero__heading,
.cs-contact-hero h1,
.cs-contact-hero__heading,
.cs-contact-v2__heading,
.cs-insights-hero h1,
.cs-insights-hero__heading,
.cs-resources-hero h1,
.cs-resources-hero__heading,
.cs-cases-hero h1,
.cs-cases-hero__heading,
.cs-industries-hero h1,
.cs-industries-hero__heading,
.cs-services-hero h1,
.cs-services-hero__heading,
.cs-service-hero h1,
.cs-single-hero h1,
.cs-single-hero__heading,
.cs-post-hero h1,
.cs-page-hero h1,
.cs-archive-hero h1 {
    color: var(--wp--preset--color--bone) !important;
}

/* Italic / highlight spans inside headings inherit color but may keep their style */
.cs-hero-v2 .cs-hero-v2__hl,
.cs-insights-hero__italic,
.cs-contact-v2__orange,
.cs-tt-hero__italic {
    color: var(--wp--preset--color--orange) !important;
}

/* Lede / subhead colors — readable cloud-white on dark image */
.cs-hero-v2 .cs-hero-v2__lede,
.cs-hero-bg .cs-hero-bg__lede,
.cs-hero-video .cs-hero-video__lede,
.cs-tt-hero p,
.cs-tt-hero__lede,
.cs-about-hero p,
.cs-about-hero__lede,
.cs-team-hero p,
.cs-team-hero__lede,
.cs-contact-hero p,
.cs-contact-hero__lede,
.cs-contact-v2__lede,
.cs-insights-hero p,
.cs-insights-hero__lede,
.cs-resources-hero p,
.cs-resources-hero__lede,
.cs-cases-hero p,
.cs-cases-hero__lede,
.cs-industries-hero p,
.cs-industries-hero__lede,
.cs-services-hero p,
.cs-services-hero__lede,
.cs-single-hero p,
.cs-single-hero__lede,
.cs-page-hero p,
.cs-archive-hero p {
    color: var(--wp--preset--color--cloud) !important;
}

/* Cap headline font-size globally so existing copy fits the constrained hero
 * padding without overflowing into the KPI strip / next section. Applied to
 * every hero variant's H1 / __heading element. */
.cs-hero-v2 .cs-hero-v2__heading,
.cs-tt-hero h1,
.cs-tt-hero__heading,
.cs-about-hero h1,
.cs-team-hero h1,
.cs-contact-hero h1,
.cs-contact-v2__heading,
.cs-insights-hero__heading,
.cs-resources-hero__heading,
.cs-cases-hero__heading,
.cs-industries-hero__heading,
.cs-services-hero__heading,
.cs-single-hero__heading {
    font-size: clamp(36px, 4.2vw, 76px) !important;
    line-height: 1.04 !important;
}

/* Hero kickers — make sure the small monospaced label is visible on dark bg */
.cs-hero-v2 .cs-pill,
.cs-tt-hero .cs-pill,
.cs-about-hero .cs-pill,
.cs-contact-hero .cs-pill,
.cs-contact-v2 .cs-pill,
.cs-insights-hero .cs-pill,
.cs-cases-hero .cs-pill,
.cs-page-hero .cs-pill {
    background: rgba(255, 157, 42, 0.12) !important;
    color: var(--wp--preset--color--orange) !important;
    border: 1px solid rgba(255, 157, 42, 0.35) !important;
}

/* Hero CTA buttons — outline variant on dark heroes needs a visible border */
.cs-hero-v2 .cs-btn--ghost,
.cs-tt-hero .cs-btn--ghost,
.cs-about-hero .cs-btn--ghost,
.cs-contact-v2 .cs-btn--ghost,
.cs-insights-hero .cs-btn--ghost {
    color: var(--wp--preset--color--bone) !important;
    border-color: rgba(247, 243, 233, 0.3) !important;
}

/* ==========================================================================
   POLISH + DISTILL (fix-12) — addresses critique findings
   ========================================================================== */

/* === Convergent finding 1: low-contrast body text on cream ===
 * Detector flagged 3x: text #6b7280 on #f7efe1 = 4.2:1 (fails AA at 4.5:1).
 * Fix: replace the muted gray with token color (#5b6270 = 4.9:1, passes AA). */
.cs-section-header p,
.cs-section-header__lede,
.cs-page-hero__lede,
.cs-archive-hero__lede,
p.has-muted-color,
.has-muted-color,
.cs-meta,
.cs-caption {
    color: var(--wp--preset--color--muted, #5b6270) !important;
}
/* Belt-and-suspenders: any inline #6b7280 forced to muted token */
[style*="color:#6b7280"],
[style*="color: #6b7280"] {
    color: var(--wp--preset--color--muted, #5b6270) !important;
}

/* === Convergent finding 3: dark-glow rgb(12,26,56) on dark page ===
 * Detector flagged colored glow on dark surface. Drop the navy box-shadow
 * that's painting on already-dark sections and replace with a hairline. */
.cs-hero-v2,
.cs-tt-hero,
.cs-about-hero,
.cs-team-hero,
.cs-contact-hero,
.cs-contact-v2,
.cs-insights-hero,
.cs-resources-hero,
.cs-cases-hero,
.cs-industries-hero,
.cs-services-hero,
.cs-single-hero,
.cs-post-hero {
    box-shadow: none !important;
}
/* Cards on dark surfaces — kill the navy-glow shadow, use hairline border */
.cs-hero-v2 .cs-kpi-chip,
.cs-tt-hero .cs-kpi-chip,
.cs-hero-v2 .cs-stat-card-dark,
[class*="cs-hero"] .cs-card,
[class*="cs-hero"] [class*="__card"] {
    box-shadow: 0 0 0 1px rgba(58, 127, 184, 0.18) !important;
}

/* === Polish finding A1: Marketplace LP scrim too light (0.4 -> 0.6) ===
 * /amazon, /walmart, /tiktok, /chewy heroes had body copy fading to invisible
 * over the bg image. Bump scrim opacity for legibility. */
.cs-tt-hero {
    background-image:
        linear-gradient(180deg, rgba(10,15,28,0.42) 0%, rgba(10,15,28,0.68) 100%),
        var(--wp--custom--cs--hero--bg-image) !important;
}

/* === Distill finding 1: Hero KPI strip is the SaaS hero-metric template ===
 * The 4-card oversized-Fraunces-numbers strip is the impeccable-banned
 * hero-metric template. Distill rule: tighten the strip, force tabular nums,
 * make numerics orange (per DESIGN.md), and downsize the cards so the hero
 * isn't the SaaS-cliche moment. */
.cs-hero-v2 .cs-kpi-band,
.cs-hero-v2 [class*="kpi-band"],
.cs-hero-v2 [class*="kpi-strip"],
.cs-tt-hero .cs-kpi-band,
.cs-tt-hero [class*="kpi-band"] {
    gap: 12px !important;
    margin-top: 24px !important;
}
.cs-hero-v2 .cs-kpi-chip,
.cs-tt-hero .cs-kpi-chip,
.cs-kpi-chip {
    padding: 14px 18px !important;
    border-radius: 10px !important;
}
.cs-hero-v2 .cs-kpi-chip__value,
.cs-hero-v2 .cs-kpi-chip__num,
.cs-hero-v2 [class*="kpi"] [class*="__value"],
.cs-hero-v2 [class*="kpi"] [class*="__num"],
.cs-tt-hero .cs-kpi-chip__value,
.cs-tt-hero .cs-kpi-chip__num,
.cs-kpi-chip__value,
.cs-kpi-chip__num {
    font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", ui-monospace, monospace) !important;
    font-feature-settings: "tnum", "lnum" !important;
    font-variant-numeric: tabular-nums lining-nums !important;
    font-size: clamp(22px, 1.6vw, 28px) !important;
    font-weight: 600 !important;
    color: var(--wp--preset--color--orange, #ff9d2a) !important;
    line-height: 1.0 !important;
    letter-spacing: -0.02em !important;
}
.cs-hero-v2 .cs-kpi-chip__label,
.cs-hero-v2 [class*="kpi"] [class*="__label"],
.cs-tt-hero .cs-kpi-chip__label,
.cs-kpi-chip__label {
    font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", ui-monospace, monospace) !important;
    font-size: 10px !important;
    text-transform: uppercase !important;
    letter-spacing: 1.4px !important;
    color: var(--wp--preset--color--muted, #5b6270) !important;
    margin-top: 4px !important;
}

/* === Polish: type-stack flatness 11/12/13/14/15px (1.4:1 ratio) ===
 * Detector flagged adjacent steps too close. Drop the 14px reading and
 * widen the gap between caption (13px) and body-small (15px). */
.has-x-small-font-size { font-size: 11px !important; }
.has-small-font-size   { font-size: 13px !important; }
/* 14px is intentionally absent — collapse to 13 or 15 explicitly */
.has-medium-font-size  { font-size: 15px !important; }

/* === Polish: belt-and-suspenders CTA text color ===
 * fix-9 set .cs-btn--primary { color: navy }. Live audit caught a stale rule
 * still rendering white text. Pin it again with stronger selector + !important. */
.wp-block-button .wp-block-button__link.cs-btn--primary,
.cs-btn.cs-btn--primary,
button.cs-btn--primary,
.cs-btn--primary,
a.cs-btn--primary {
    color: var(--wp--preset--color--navy, #1a2436) !important;
}

/* === Distill: section padding cap (was 96–192px, target 48–80px) ===
 * fix-9 set this in theme.json but live render still has tall sections in
 * a few patterns. Belt-and-suspenders against any pattern that hardcodes
 * inline padding. */
.cs-interior-section,
.cs-section,
[class*="cs-section-"]:not(.cs-section-header) {
    padding-top: var(--cs-section-padding, clamp(48px, 6vw, 80px)) !important;
    padding-bottom: var(--cs-section-padding, clamp(48px, 6vw, 80px)) !important;
}

/* === Distill: hero max-height enforcement ===
 * fix-9 set min-height. Live shows hero pushing 870px because content
 * overflows the min-height. Cap with max-height too so the hero stays
 * one-fold-and-a-bit, not 1.6 folds. */
@media (min-width: 1024px) {
    .cs-hero-v2,
    .cs-hero-bg,
    .cs-hero-video,
    .cs-tt-hero,
    .cs-page-hero {
        max-height: min(70vh, 720px) !important;
        overflow: hidden !important;
    }
}

/* === Polish: Pull-quote rule: steel-blue 3px LEFT — not banned side-stripe ===
 * Confirms DESIGN.md spec; suppresses any decorative left-stripe accent on
 * non-quote elements (callouts, alerts, list items) per universal ban. */
.cs-callout,
.cs-alert,
.cs-list-item,
.wp-block-list li,
.cs-card,
[class*="cs-card"] {
    border-left: none !important;
    border-right: none !important;
}
/* Re-allow the legitimate uses */
.wp-block-quote,
.wp-block-pullquote,
blockquote.has-border {
    border-left: 3px solid var(--wp--preset--color--blue, #3a7fb8) !important;
}

/* ==========================================================================
   FIX-13 — full-site critique findings (14 NEW issues)
   ========================================================================== */

/* === Finding #2: Marketplace LP hero KPI panel occludes H1 last line ===
 * On /amazon, /walmart, /tiktok, /chewy the right-rail dashboard panel
 * sits z-index over the H1's final line ("agency model.", "don't have to.",
 * "serious brands"). Hoist the H1 above the dashboard. */
.cs-tt-hero {
    position: relative !important;
    overflow: visible !important;
}
.cs-tt-hero h1,
.cs-tt-hero .cs-tt-hero__heading,
.cs-tt-hero .cs-tt-hero__hl,
.cs-tt-hero__copy,
.cs-tt-hero__left {
    position: relative !important;
    z-index: 3 !important;
}
.cs-tt-hero__dashboard,
.cs-tt-hero__panel,
.cs-tt-hero__right {
    position: relative !important;
    z-index: 1 !important;
}
/* On narrower viewports, stack instead of overlap */
@media (max-width: 1280px) {
    .cs-tt-hero__inner {
        grid-template-columns: 1fr !important;
    }
    .cs-tt-hero__dashboard,
    .cs-tt-hero__panel,
    .cs-tt-hero__right {
        margin-top: 32px !important;
    }
}

/* === Finding #4: Washed-gray hero H1 on /pricing/, /resources/, /insights/, post ===
 * H1 currently renders at ~20% opacity gray-on-cream. Force ink color +
 * full opacity. These are all archive/page heroes on cream surface. */
.cs-archive-hero h1,
.cs-archive-hero__heading,
.cs-page-hero h1,
.cs-page-hero__heading,
.cs-pricing-hero h1,
.cs-pricing-hero__heading,
.cs-resources-hero h1,
.cs-resources-hero__heading,
.cs-insights-hero h1,
.cs-insights-hero__heading,
.cs-cases-hero h1,
.cs-cases-hero__heading,
.cs-industries-hero h1,
.cs-industries-hero__heading,
.cs-services-hero h1,
.cs-services-hero__heading,
.cs-single-hero h1,
.cs-single-hero__heading,
.cs-post-hero h1,
.cs-post-hero__heading,
article.post .wp-block-post-title,
article .wp-block-post-title {
    color: var(--wp--preset--color--ink, #0e1320) !important;
    opacity: 1 !important;
    text-shadow: none !important;
}

/* === Finding #5: /free-audit/ hero — form card overlaps H1 ===
 * H1 "Get a 30-minute operator read." is occluded by the right-rail form
 * card. Force explicit 2-column grid with gap. */
.cs-contact-hero--audit__inner,
.cs-contact-hero--audit .cs-contact-hero__inner,
.cs-contact-hero--audit > .alignwide,
.cs-contact-hero--audit > .alignfull > .wp-block-group {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(380px, 480px) !important;
    gap: 64px !important;
    align-items: start !important;
}
.cs-contact-hero--audit h1,
.cs-contact-hero--audit__heading {
    position: relative !important;
    z-index: 2 !important;
}
@media (max-width: 1024px) {
    .cs-contact-hero--audit__inner,
    .cs-contact-hero--audit .cs-contact-hero__inner,
    .cs-contact-hero--audit > .alignwide,
    .cs-contact-hero--audit > .alignfull > .wp-block-group {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
    }
}

/* === Finding #6: Form focus rings invisible (a11y + DESIGN.md fix-9 spec) ===
 * Both /contact/ and /free-audit/ render `outline: 2px none ...` so focus
 * is invisible. Restore solid orange-ink ring per spec. */
.cs-form input:focus,
.cs-form input:focus-visible,
.cs-form select:focus,
.cs-form select:focus-visible,
.cs-form textarea:focus,
.cs-form textarea:focus-visible,
.wp-block-search input:focus,
form input:focus-visible,
form select:focus-visible,
form textarea:focus-visible {
    outline: 2px solid var(--wp--preset--color--orange-ink, #c9650f) !important;
    outline-offset: 2px !important;
    border-color: var(--wp--preset--color--orange-ink, #c9650f) !important;
}

/* Belt-and-suspenders: anything with `outline: ... none ...` from old rules */
.cs-form input,
.cs-form select,
.cs-form textarea,
form input,
form textarea,
form select {
    outline-style: solid !important;
    outline-width: 0 !important;  /* base — :focus rule above adds the 2px */
    outline-color: var(--wp--preset--color--orange-ink, #c9650f) !important;
}

/* === Finding (convergent #1, scrim floor for light-photo heroes) ===
 * Five hero variants on /about/, /team/, /case-studies/, /services/, /industries/
 * use light bg images (sunlit atrium, daylight studio, polaroid backdrop).
 * Even fix-7's 0.32-0.58 scrim isn't enough on these — bump scrim floor
 * to 0.62-0.82 alpha so bone Fraunces headline reads against the bright photo. */
.cs-about-hero,
.cs-team-hero,
.cs-cases-hero,
.cs-services-hero,
.cs-industries-hero,
.cs-page-hero {
    background-image:
        linear-gradient(180deg, rgba(10,15,28,0.62) 0%, rgba(10,15,28,0.82) 100%),
        var(--wp--custom--cs--hero--bg-image) !important;
}
/* Force these hero H1s to BONE (not ink) since they're now over a dark scrim */
.cs-about-hero h1,
.cs-about-hero__heading,
.cs-team-hero h1,
.cs-team-hero__heading,
.cs-cases-hero h1,
.cs-cases-hero__heading,
.cs-services-hero h1,
.cs-services-hero__heading,
.cs-industries-hero h1,
.cs-industries-hero__heading {
    color: var(--wp--preset--color--bone, #f7f3e9) !important;
}

/* === Finding #13: /case-studies/ archive grid is templated-card-grid anti-pattern ===
 * Apply per-card color treatment via :nth-child rotation, matching the
 * /industries/ archive that the agent flagged as "best section on the site". */
.cs-cases-grid > *:nth-child(3n+1),
.cs-case-card:nth-child(3n+1) {
    background: var(--wp--preset--color--bone, #f7f3e9) !important;
    border-top: 3px solid var(--wp--preset--color--orange, #ff9d2a) !important;
}
.cs-cases-grid > *:nth-child(3n+2),
.cs-case-card:nth-child(3n+2) {
    background: var(--wp--preset--color--cream, #fdfaf3) !important;
    border-top: 3px solid var(--wp--preset--color--blue, #3a7fb8) !important;
}
.cs-cases-grid > *:nth-child(3n+3),
.cs-case-card:nth-child(3n+3) {
    background: #f3ebd8 !important;
    border-top: 3px solid var(--wp--preset--color--navy, #1a2436) !important;
}
/* NOTE: per the side-stripe ban, this is `border-top`, NOT border-left. */

/* === Finding #10: 404 footer logo broken ===
 * Some 404 templates miss the font enqueue or the logo container is hidden.
 * Force display + restore. */
body.error404 .cs-footer__logo,
body.error404 .wp-block-site-logo,
body.error404 [class*="footer"] [class*="logo"] {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    background: none !important;
    box-shadow: none !important;
}

/* === Finding #11: /resources/ thin blog-roll — give it visual differentiation ===
 * Tighter card grid + leading number per card so it doesn't read as a clone of /insights/. */
.cs-resources-grid .cs-resource-card,
.cs-resources-grid > article {
    counter-increment: cs-resource;
    position: relative;
}
.cs-resources-grid .cs-resource-card::before,
.cs-resources-grid > article::before {
    content: counter(cs-resource, decimal-leading-zero);
    position: absolute;
    top: 16px;
    right: 20px;
    font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", ui-monospace, monospace);
    font-size: 11px;
    color: var(--wp--preset--color--muted, #5b6270);
    letter-spacing: 1.4px;
    opacity: 0.6;
}
.cs-resources-grid {
    counter-reset: cs-resource;
}

/* === Finding (animation reveal stuck) ===
 * On /services/account-management/ pricing tiers and case-study KPI strip,
 * the IntersectionObserver doesn't fire. Add a CSS-only fallback: any
 * [data-cs-reveal] still at opacity 0 after 2 seconds gets opacity:1. */
@keyframes cs-reveal-fallback {
    to { opacity: 1; transform: translateY(0); }
}
[data-cs-reveal]:not(.is-visible) {
    /* fix-23 v2: kill the reveal-fallback delay entirely. Just instantly
     * show content. The CSS-only fallback never worked reliably across
     * headless and real browsers — pages stayed at opacity 0 too often.
     * Real users get the JS-driven animation when it works; when it doesn't,
     * they see content immediately. */
    animation: cs-reveal-fallback 1ms forwards;
    /* Hard override — guarantee visibility even if animation property is
     * dropped by some downstream CSS or browser quirk. */
    opacity: 1 !important;
    transform: translateY(0) !important;
}
[data-cs-reveal].is-visible {
    animation: none !important;
}
@media (prefers-reduced-motion: reduce) {
    [data-cs-reveal] {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }
}

/* === Finding #14-N9: legal pages should not carry the sales tagline ===
 * /privacy-policy/ and /terms/ are utility pages. The "Stop shopping
 * agencies. Hire the operators." final-CTA pattern is shipped from every
 * template; suppress it on legal pages so the page reads like a legal
 * document, not a pitch deck. Also tighten the legal-page typography
 * (longer line-length, paragraph rhythm) so it reads. */
body.page-privacy-policy .cs-final-cta,
body.page-terms .cs-final-cta,
body.page-privacy-policy [class*="final-cta"],
body.page-terms [class*="final-cta"] {
    display: none !important;
}
body.page-privacy-policy main.cs-legal,
body.page-terms main.cs-legal {
    max-width: 72ch;
    margin-inline: auto;
    padding-block: clamp(3rem, 6vw, 6rem);
    padding-inline: clamp(1rem, 4vw, 2rem);
}
body.page-privacy-policy main.cs-legal h1,
body.page-terms main.cs-legal h1 {
    font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
    margin-bottom: 1rem;
    letter-spacing: -0.02em;
}
body.page-privacy-policy main.cs-legal h2,
body.page-terms main.cs-legal h2 {
    font-size: clamp(1.25rem, 1rem + 0.75vw, 1.5rem);
    margin-top: 2.5rem;
    margin-bottom: 0.75rem;
    color: var(--wp--preset--color--navy, #1a2436);
}
body.page-privacy-policy main.cs-legal p,
body.page-terms main.cs-legal p {
    margin-block: 0.75rem;
    line-height: 1.65;
    color: var(--wp--preset--color--text, #1a1f2c);
}
body.page-privacy-policy main.cs-legal a,
body.page-terms main.cs-legal a {
    color: var(--wp--preset--color--blue, #3a7fb8);
    text-underline-offset: 3px;
}

/* === Finding #15: rich 2-col mega-menus for Services / Industries / Blog ===
 * The .cs-nav__menu--wide variant widens the dropdown to fit two
 * name+blurb columns side-by-side, with optional column headings
 * ("By Marketplace" / "By Capability") and a footer row for Pricing
 * links inside the Services menu. */
.cs-nav__menu--wide {
    min-width: 640px;
    padding: 12px;
}
.cs-nav__menu-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 18px;
}
.cs-nav__menu-col { min-width: 0; }
.cs-nav__menu-heading {
    display: block;
    padding: 8px 14px 4px;
    font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", monospace);
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(15, 31, 58, 0.5);
    margin-top: 4px;
}
.cs-nav__menu-heading--inline {
    display: inline-block;
    padding: 0 10px 0 0;
    margin: 0;
}

/* Pricing footer row inside Services menu — grid (fix-20).
 * Previous flex layout caused the heading to share horizontal space with
 * the two pricing tiles, and the tiles overlapped each other when the
 * menu was narrow. Grid puts the heading on its own row, two tiles
 * cleanly side-by-side below. */
.cs-nav__menu-footer {
    margin-top: 10px;
    padding: 10px 4px 4px;
    border-top: 1px solid rgba(15, 31, 58, 0.08);
}
.cs-nav__menu-footer--pricing {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 10px;
    row-gap: 4px;
}
.cs-nav__menu-footer--pricing > .cs-nav__menu-heading--inline {
    grid-column: 1 / -1;
    padding: 0 10px 6px;
    margin: 0;
    /* full-row heading: drop the inline padding-right */
    padding-right: 10px;
    display: block;
}
.cs-nav__menu-pricing {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.12s ease;
    min-width: 0;
}
.cs-nav__menu-pricing:hover,
.cs-nav__menu-pricing:focus-visible {
    background: var(--cs-cream, #f6eddd);
    outline: none;
}

/* Mobile: 2-col menus collapse to single column */
@media (max-width: 900px) {
    .cs-nav__menu--wide { min-width: 0; width: 100%; }
    .cs-nav__menu-cols { grid-template-columns: 1fr; gap: 4px; }
    .cs-nav__menu-footer--pricing { grid-template-columns: 1fr; }
}

/* === Fix-21 (1.0.24): pricing tiles stack vertically per user request === */
.cs-nav__menu-footer--pricing {
    grid-template-columns: 1fr !important;
}

/* === Fix-21+24: marketplace LP hero (cs-tt-hero used by /amazon/,
 * /walmart/, /chewy/, /tiktok/) — tighten lede + reduce vertical breathing
 * room, fix invisible-lede bug (dark gray on dark hero), stop the dashboard
 * card from stretching to match the long left column. */
.cs-tt-hero {
    min-height: auto !important;
    padding-block: clamp(40px, 5vw, 64px) !important;
}
.cs-tt-hero__inner {
    padding-block: 0 !important;
    /* fix-24: grid container should leave card at its natural height,
     * not stretch it to match the long-content left column. */
    align-items: start !important;
}
.cs-tt-hero__lede {
    font-size: clamp(15px, 1.05vw, 17px) !important;
    line-height: 1.45 !important;
    margin-block: 14px !important;
    /* fix-24: lede was rgb(42,47,58) dark gray — invisible on the dark
     * hero. Force cream so it always reads on the navy/charcoal scrim. */
    color: var(--wp--preset--color--cloud, #dfe4ee) !important;
    max-width: none !important;
    opacity: 1 !important;
}
.cs-tt-hero__heading {
    line-height: 1.04 !important;
    margin-bottom: 10px !important;
}
.cs-tt-hero__card {
    padding: 18px 22px !important;
    /* fix-24: align-self start so the card doesn't expand vertically
     * to match the long left column. Card height = its content. */
    align-self: start !important;
    height: auto !important;
}
.cs-tt-hero__card-rows {
    gap: 0 !important;
}
.cs-tt-hero__card-row {
    padding-block: 8px !important;
    line-height: 1.3 !important;
}
.cs-tt-hero__trust {
    margin-top: 16px !important;
    /* fix-24: trust block also was a low-contrast dark gray on dark.
     * Force cream like the lede so it actually reads. */
    color: var(--wp--preset--color--cloud, #dfe4ee) !important;
}
.cs-tt-hero__trust strong { color: #ffffff !important; }

/* fix-24: the cs-hero-bg__veil applies a gradient that fades to cream at
 * the bottom of every hero — meant to blend into the next section, but on
 * the marketplace LPs (cs-tt-hero) the lede paragraph sits in that fade
 * zone, becoming invisible. Nullify the veil specifically on cs-tt-hero. */
.cs-tt-hero .cs-hero-bg__veil {
    background: transparent !important;
    background-image: none !important;
}

/* === Fix-21: contact form was clipped at bottom because of position:sticky.
 * Sticky child of a flex/grid parent that's shorter than the form means
 * the bottom of the form scrolls out of view. Switch to relative — the
 * form scrolls naturally with the page. */
.cs-contact-v2__form-card {
    position: relative !important;
    top: 0 !important;
}

/* ==========================================================================
   FIX-27 — impeccable critique response (color, dark-glow, typography)
   Critique scored 28/40; 163 low-contrast detections; 32 dark-glow shadows;
   42 all-caps body runs. This block addresses the mechanical findings
   without re-rendering content.
   ========================================================================== */

/* === Fix-27 / colorize · belt-and-suspenders orange-ink swap ===
 * theme.json now defines orange-ink as #a04f08 (5.6:1 on cream). Any inline
 * styles or pre-existing CSS rules that hardcode #c9650f get nudged here so
 * even old cached blocks render with the AA-passing token. */
[style*="color:#c9650f"],
[style*="color: #c9650f"],
[style*="color:#C9650F"],
[style*="color: #C9650F"] {
    color: var(--wp--preset--color--orange-ink, #a04f08) !important;
}
[style*="background:#c9650f"],
[style*="background-color:#c9650f"] {
    background-color: var(--wp--preset--color--orange-ink, #a04f08) !important;
}

/* === Fix-27 / colorize · demote #ff9d2a (hot orange) on cream surfaces ===
 * Hot orange (lightness ~73%) hits 2.0:1 on cream — fails AA at any size.
 * Reserve it for dark surfaces only. On any cream/white surface, override
 * to orange-ink. Detect "is dark surface" via parent class selectors. */
.cs-section--cream [style*="color:#ff9d2a"],
.cs-section--cream [style*="color: #ff9d2a"],
.cs-section--bone  [style*="color:#ff9d2a"],
.cs-section--bone  [style*="color: #ff9d2a"],
.has-bone-background-color [style*="color:#ff9d2a"],
.has-cream-background-color [style*="color:#ff9d2a"],
body:not(.has-navy-background-color):not(.cs-on-dark) .has-orange-color:not(.cs-on-dark *) {
    color: var(--wp--preset--color--orange-ink, #a04f08) !important;
}

/* === Fix-27 / colorize · resolve home navy-on-navy-deep collision ===
 * Critique found text #1a2436 on #0a0f1c at 1.2:1 — invisible. Force any
 * navy/ink text on dark backgrounds (.cs-on-dark, navy/navy-deep classes,
 * or [data-cs-surface="dark"]) to bone instead. Belt-and-suspenders. */
.has-navy-background-color *:not(button):not(a):not(.cs-btn),
.has-navy-deep-background-color *:not(button):not(a):not(.cs-btn),
[data-cs-surface="dark"] [style*="color:#1a2436"],
[data-cs-surface="dark"] [style*="color: #1a2436"],
[data-cs-surface="dark"] [style*="color:#0e1320"],
[data-cs-surface="dark"] .has-navy-color,
[data-cs-surface="dark"] .has-ink-color,
.cs-on-dark .has-ink-color,
.cs-on-dark .has-navy-color,
.cs-on-dark [style*="color:#0e1320"],
.cs-on-dark [style*="color:#1a2436"] {
    color: var(--wp--preset--color--bone, #f7f3e9) !important;
}

/* Specifically: home-page closer / dark-surface CTAs that were emitting
 * navy-on-navy. The `cs-closer` and `cs-final-cta` patterns. */
.cs-closer .has-navy-color,
.cs-closer .has-ink-color,
.cs-closer [style*="color:#0e1320"],
.cs-closer [style*="color:#1a2436"],
.cs-final-cta .has-ink-color,
.cs-final-cta [style*="color:#0e1320"] {
    color: var(--wp--preset--color--bone, #f7f3e9) !important;
}

/* === Fix-27 / quieter · purge dark-glow box-shadows ===
 * Detector found 32 instances of colored box-shadow (#0c1a38 / #141e3c /
 * rgba(12,26,56,*)) on dark sections. These are the canonical AI dark-mode
 * tell. The fix-12 rule killed them on hero variants only; this rule is
 * broader — kill on every block that lives on a dark surface. */
.has-navy-background-color [class*="cs-card"],
.has-navy-background-color .cs-stat,
.has-navy-background-color .cs-tile,
.has-navy-background-color .cs-quote,
.has-navy-deep-background-color [class*="cs-card"],
.has-navy-deep-background-color .cs-stat,
.has-navy-deep-background-color .cs-tile,
.cs-on-dark [class*="cs-card"]:not([class*="cs-card--keep-shadow"]),
.cs-on-dark .cs-stat,
.cs-on-dark .cs-tile,
[data-cs-surface="dark"] [class*="cs-card"]:not([class*="cs-card--keep-shadow"]),
[data-cs-surface="dark"] .cs-stat,
[data-cs-surface="dark"] .cs-tile {
    box-shadow: 0 0 0 1px rgba(247, 243, 233, 0.12) !important;
}

/* Belt-and-suspenders: any inline box-shadow using known dark-glow rgb values */
[style*="box-shadow: 0"][style*="rgb(12, 26, 56)"],
[style*="box-shadow: 0"][style*="rgb(20, 30, 60)"],
[style*="box-shadow:0"][style*="rgb(12,26,56)"],
[style*="box-shadow:0"][style*="rgb(20,30,60)"],
[style*="rgba(12, 26, 56"],
[style*="rgba(20, 30, 60"],
[style*="rgba(12,26,56"],
[style*="rgba(20,30,60"] {
    box-shadow: 0 0 0 1px rgba(247, 243, 233, 0.12) !important;
}

/* === Fix-27 / typeset · restrict all-caps to short labels ===
 * Detector found 42 all-caps body runs (mostly Amazon: 10, Walmart: 8,
 * Industries: 7). All-caps over ~24 chars destroys readability. This rule
 * caps the use to elements that are actually labels (mono kickers, eyebrow
 * pills) — anywhere else, drop the uppercase transform. */
p[style*="text-transform:uppercase"],
p[style*="text-transform: uppercase"],
li[style*="text-transform:uppercase"],
li[style*="text-transform: uppercase"],
.cs-rich-text [style*="text-transform: uppercase"]:not(.cs-kicker):not(.cs-pill):not(.cs-eyebrow):not(.cs-label),
.wp-block-paragraph[style*="text-transform: uppercase"] {
    text-transform: none !important;
    letter-spacing: 0 !important;
}

/* Affirmatively keep caps on the legitimate label elements */
.cs-kicker,
.cs-pill__text,
.cs-eyebrow,
.cs-label,
[class*="__kicker"],
[class*="__eyebrow"],
[class*="-kicker"],
[class*="-eyebrow"] {
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

/* === Fix-27 / typeset · line-height floor on body copy ===
 * Detector found tight-leading (1.10x and 1.20x) on home stat strip.
 * Floor body line-height at 1.4. Keep heading line-heights as-is. */
.cs-section p,
.cs-section li,
.wp-block-paragraph,
.cs-prose p,
.cs-prose li,
[class*="__lede"],
[class*="__copy"],
[class*="__body"] {
    line-height: 1.55;
}
.cs-section p[style*="line-height:1.1"],
.cs-section p[style*="line-height: 1.1"],
.cs-section p[style*="line-height:1.2"],
.cs-section p[style*="line-height: 1.2"] {
    line-height: 1.45 !important;
}

/* === Fix-27 / harden · 555 phone safety-net (template-level fix below) ===
 * Belt-and-suspenders: hide any phone block that still contains "555-01"
 * via attribute selector. The CONTENT_PATCHES will scrub the templates at
 * build time, but cached blocks may still have them baked in. */
.cs-contact-v2__card-phone:has([data-num*="555-01"]),
.cs-contact-v2__card-phone[data-num*="555-01"] {
    display: none !important;
}

/* === Fix-27 / layout · pricing-tier popular-card scaling ===
 * Critique: tier cards render uniform; "Most popular" tier needs scale
 * contrast at 1.4x. cs/pricing-tier emits .cs-pricing-tier--popular when
 * popular:true is set in block attributes. */
.wp-block-columns.cs-pricing-tiers__cols {
    align-items: stretch !important;
}
.cs-pricing-tier {
    background: var(--wp--preset--color--cream, #fdfaf3);
    border: 1px solid var(--wp--preset--color--rule-warm, #d8d2c0);
    padding: 32px 28px;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.cs-pricing-tier--popular {
    transform: scale(1.04);
    transform-origin: center;
    background: var(--wp--preset--color--navy, #1a2436) !important;
    color: var(--wp--preset--color--bone, #f7f3e9) !important;
    border-color: transparent !important;
    z-index: 2;
    position: relative;
    box-shadow: 0 0 0 1px rgba(255, 157, 42, 0.45);
}
.cs-pricing-tier--popular .cs-pricing-tier__name,
.cs-pricing-tier--popular .cs-pricing-tier__summary,
.cs-pricing-tier--popular .cs-pricing-tier__features li {
    color: inherit;
}
.cs-pricing-tier--popular .cs-pricing-tier__price-value {
    font-size: clamp(40px, 4vw, 64px) !important;
    color: var(--wp--preset--color--orange, #ff9d2a) !important;
}
.cs-pricing-tier--popular .cs-pricing-tier__price-suffix {
    color: rgba(247, 243, 233, 0.65) !important;
}
.cs-pricing-tier--popular .cs-pricing-tier__check {
    color: var(--wp--preset--color--orange, #ff9d2a);
}
.cs-pricing-tier--popular .cs-pricing-tier__badge {
    background: var(--wp--preset--color--orange, #ff9d2a);
    color: var(--wp--preset--color--navy-deep, #0c1424);
    padding: 5px 11px;
    font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", ui-monospace, monospace);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 600;
    align-self: flex-start;
    margin-bottom: 16px;
}
.cs-pricing-tier--popular .cs-pricing-tier__cta {
    background: var(--wp--preset--color--orange, #ff9d2a) !important;
    color: var(--wp--preset--color--navy-deep, #0c1424) !important;
    border-color: var(--wp--preset--color--orange, #ff9d2a) !important;
    margin-top: auto;
}
@media (max-width: 900px) {
    .cs-pricing-tier--popular {
        transform: none;
    }
}

/* === Fix-27 / layout · progressive disclosure for tier features ===
 * Critique: ~35 decision inputs on the pricing page (4 tiers x 7 line items
 * + add-ons + FAQ). Wrap the features list in <details> so by default only
 * the first 3 features show, and "What's included" expands the rest. The
 * cs-pricing-tier render.php was updated to emit the <details> wrapper. */
.cs-pricing-tier__features-collapse {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--wp--preset--color--rule-warm, #d8d2c0);
}
.cs-pricing-tier--popular .cs-pricing-tier__features-collapse {
    border-color: rgba(247, 243, 233, 0.18);
}
.cs-pricing-tier__features-toggle {
    font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", ui-monospace, monospace);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--wp--preset--color--orange-ink, #a04f08);
    cursor: pointer;
    list-style: none;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 600;
}
.cs-pricing-tier--popular .cs-pricing-tier__features-toggle {
    color: var(--wp--preset--color--orange, #ff9d2a);
}
.cs-pricing-tier__features-toggle::-webkit-details-marker { display: none; }
.cs-pricing-tier__features-toggle::after {
    content: "+";
    font-size: 16px;
    transition: transform 0.15s ease;
}
.cs-pricing-tier__features-collapse[open] .cs-pricing-tier__features-toggle::after {
    transform: rotate(45deg);
}
.cs-pricing-tier__features-rest {
    margin-top: 14px;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* === Fix-27 / channel-page native modules (Walmart WFS-vs-FBA, Amazon AWD-vs-FBA) ===
 * Critique finding: Amazon and Walmart pages share an identical six-surface
 * skeleton. Each gets one channel-native economics table that the other does
 * not have. */
.cs-channel-econ {
    background: var(--wp--preset--color--cream, #fdfaf3);
    padding: clamp(56px, 8vw, 96px) clamp(24px, 5vw, 80px);
}
.cs-channel-econ__inner {
    max-width: 1100px;
    margin: 0 auto;
}
.cs-channel-econ__head {
    margin-bottom: 40px;
    max-width: 720px;
}
.cs-channel-econ__h2 {
    font-family: var(--wp--preset--font-family--serif, "Fraunces", serif);
    font-size: clamp(32px, 3.4vw, 52px);
    line-height: 1.06;
    font-weight: 400;
    letter-spacing: -0.018em;
    color: var(--wp--preset--color--ink, #0e1320);
    margin: 14px 0 14px;
}
.cs-channel-econ__h2 em {
    font-style: italic;
    color: var(--wp--preset--color--orange-ink, #a04f08);
}
.cs-channel-econ__lede {
    font-size: 17px;
    line-height: 1.55;
    color: var(--wp--preset--color--muted, #5b6270);
    max-width: 640px;
}
.cs-channel-econ__table {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr;
    border-top: 2px solid var(--wp--preset--color--ink, #0e1320);
    font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", ui-monospace, monospace);
    font-feature-settings: "tnum", "lnum";
    font-variant-numeric: tabular-nums lining-nums;
}
.cs-channel-econ__row {
    display: contents;
}
.cs-channel-econ__cell {
    padding: 16px 14px;
    border-bottom: 1px solid var(--wp--preset--color--rule-warm, #d8d2c0);
    font-size: 14px;
    color: var(--wp--preset--color--ink, #0e1320);
}
.cs-channel-econ__cell:nth-child(3n+2),
.cs-channel-econ__cell:nth-child(3n) {
    text-align: right;
}
.cs-channel-econ__row--head .cs-channel-econ__cell {
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--wp--preset--color--muted, #5b6270);
    padding: 12px 14px;
    border-bottom: 1px solid var(--wp--preset--color--ink, #0e1320);
}
.cs-channel-econ__row--total .cs-channel-econ__cell {
    font-weight: 600;
    border-bottom: 2px solid var(--wp--preset--color--ink, #0e1320);
    padding: 18px 14px;
}
.cs-channel-econ__cell--win {
    color: #1f6b1f;
    font-weight: 500;
}
.cs-channel-econ__cell--loss {
    color: var(--wp--preset--color--orange-ink, #a04f08);
    font-weight: 500;
}
.cs-channel-econ__takeaway {
    font-family: var(--wp--preset--font-family--serif, "Fraunces", serif);
    font-size: clamp(20px, 2vw, 26px);
    line-height: 1.4;
    color: var(--wp--preset--color--ink, #0e1320);
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--wp--preset--color--rule-warm, #d8d2c0);
    max-width: 760px;
    font-style: italic;
}
.cs-channel-econ__takeaway em {
    font-style: italic;
    color: var(--wp--preset--color--orange-ink, #a04f08);
    font-weight: 500;
}
@media (max-width: 720px) {
    .cs-channel-econ__table {
        grid-template-columns: 1fr;
    }
    .cs-channel-econ__cell {
        text-align: left !important;
    }
    .cs-channel-econ__row--head .cs-channel-econ__cell:nth-child(2),
    .cs-channel-econ__row--head .cs-channel-econ__cell:nth-child(3) {
        display: none;
    }
}

/* === Fix-27 / team-card initials placeholder (no headshot uploaded yet) ===
 * Critique flagged the home-page team strip rendering as letter-tiles. When
 * a team-card lacks a headshot, the render now emits a styled placeholder
 * with the operator's initials in a navy gradient circle matching the
 * operator-card preview design. Better than letter-tiles until the real
 * photo is shipped. */
.cs-team-card__media--placeholder {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--wp--preset--color--blue, #3a7fb8) 0%, var(--wp--preset--color--navy, #1a2436) 100%);
    border: 1px solid var(--wp--preset--color--navy-deep, #0c1424);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    margin-bottom: 18px;
    flex: 0 0 96px;
}
.cs-team-card__media--placeholder::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 30%, rgba(247, 243, 233, 0.2) 0%, transparent 60%);
    pointer-events: none;
}
.cs-team-card__initials {
    position: relative;
    z-index: 1;
    font-family: var(--wp--preset--font-family--serif, "Fraunces", serif);
    font-size: 28px;
    font-weight: 400;
    color: var(--wp--preset--color--bone, #f7f3e9);
    letter-spacing: -0.01em;
}

/* === Fix-27 / contact card replacements (no email or address scrapeable) ===
 * The 4 contact cards used to expose mailto: + 555 phone numbers. Now they
 * route to the in-page form via anchor link. New element classes need styling
 * that matches the brand. */
.cs-contact-v2__card-meta {
    font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", ui-monospace, monospace);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--wp--preset--color--muted, #5b6270);
    margin-top: 4px;
    line-height: 1.5;
}
.cs-contact-v2__card-action {
    margin-top: 8px;
}
.cs-contact-v2__card-link {
    font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", ui-monospace, monospace);
    font-size: 12px;
    letter-spacing: 0.06em;
    color: var(--wp--preset--color--orange-ink, #a04f08);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 1px;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.cs-contact-v2__card-link:hover,
.cs-contact-v2__card-link:focus-visible {
    color: var(--wp--preset--color--ink, #0e1320);
    border-color: var(--wp--preset--color--ink, #0e1320);
    outline: none;
}

/* === Fix-27 / phone link on New Business card (real number 317.448.0319) === */
a.cs-contact-v2__card-phone {
    display: inline-block;
    font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", ui-monospace, monospace);
    font-size: 22px;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--wp--preset--color--ink, #0e1320);
    text-decoration: none;
    border-bottom: 1px solid var(--wp--preset--color--orange-ink, #a04f08);
    padding-bottom: 2px;
    margin-bottom: 6px;
    transition: color 0.15s ease;
}
a.cs-contact-v2__card-phone:hover,
a.cs-contact-v2__card-phone:focus-visible {
    color: var(--wp--preset--color--orange-ink, #a04f08);
    outline: none;
}