/*
 * Canvas build v4
 *
 * This stylesheet deliberately starts a clean, page-specific visual system.
 * It is loaded after the legacy theme stylesheet so the approved canvas
 * compositions are not compromised by old generic card/page rules.
 */

:root {
	--canvas-ink: #020907;
	--canvas-panel: #07140f;
	--canvas-line: rgba(91, 228, 127, .24);
	--canvas-green: #55ef7a;
	--canvas-copy: #dfe7e1;
	--canvas-muted: #b5c0b9;
}

.canvas-brand {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	color: #fff;
	text-decoration: none;
	white-space: nowrap;
}

.canvas-brand > svg {
	width: 31px;
	height: 31px;
	color: var(--canvas-green);
	stroke-width: 1.8;
}

.canvas-brand span { display: grid; gap: 1px; line-height: 1; }
.canvas-brand strong { color: #fff; font-size: 14px; font-weight: 750; letter-spacing: -.025em; }
.canvas-brand em { color: var(--canvas-green); font-size: 10px; font-style: normal; font-weight: 750; letter-spacing: .16em; }

.site-header { min-height: 58px; background: #020907; border-color: rgba(91, 228, 127, .18); }
.site-header .header-shell { width: min(calc(100% - 56px), 1200px); min-height: 58px; gap: 28px; }
.site-header .brand { display: none; }
.site-header .site-navigation { margin-left: auto; }
.site-header .primary-menu { gap: 24px; }
.site-header .primary-menu a { color: #f0f6f1; font-size: 10px; font-weight: 600; }
.site-header .primary-menu a:hover,.site-header .primary-menu .current-menu-item > a { color: var(--canvas-green); }
.site-header .header-actions { gap: 22px; }
.site-header .header-contact-stack { gap: 4px; padding: 0; border: 0; background: transparent; }
.site-header .header-contact-stack a { color: #e8f1ea; font-size: 10px; font-weight: 600; }
.site-header .header-contact-stack .icon { width: 12px; height: 12px; color: var(--canvas-green); }
.site-header .button-small { min-height: 34px; padding-inline: 17px; font-size: 10px; }

.site-footer { background: #020907; border-top: 1px solid var(--canvas-line); }
.site-footer .canvas-footer-grid { width: min(calc(100% - 112px), 900px); padding-top: 30px; }
.site-footer .canvas-brand > svg { width: 27px; height: 27px; }
.site-footer .canvas-brand strong { font-size: 13px; }
.site-footer .canvas-brand em { font-size: 8px; }

/* Who We Serve — the hero is a single photographic composition in the
 * approved canvas. Keep the original asset bright on the right and reserve
 * the naturally dark left side for selectable copy; do not dim the complete
 * photograph with the old double-overlay treatment. */
.canvas-locked-page--who-we-serve .canvas-locked-hero {
	background-image:
		linear-gradient(90deg, #020907 0%, rgba(2, 9, 7, .98) 27%, rgba(2, 9, 7, .52) 47%, rgba(2, 9, 7, .08) 73%, rgba(2, 9, 7, .12) 100%),
		linear-gradient(0deg, rgba(2, 9, 7, .54) 0%, transparent 38%),
		var(--canvas-page-art);
	background-position: center, center, center top;
	background-size: cover, cover, cover;
}

.canvas-locked-page--who-we-serve .canvas-locked-hero-copy {
	transform: translateY(15px);
}

.canvas-locked-page--who-we-serve .canvas-locked-audience-art {
	background-image: linear-gradient(90deg, rgba(2, 9, 7, .58), rgba(2, 9, 7, .04) 37%), var(--canvas-page-art);
}

@media (max-width: 900px) {
	.site-header .header-shell { width: min(calc(100% - 36px), 1200px); }
	.site-header .site-navigation { margin-left: 0; }
	.site-header .header-contact-stack { display: none; }
}

@media (max-width: 700px) {
	.canvas-brand > svg { width: 28px; height: 28px; }
	.canvas-brand strong { font-size: 12px; }
	.canvas-brand em { font-size: 8px; }
	.site-header .header-shell { gap: 14px; }
	.site-header .header-actions .button-small { min-height: 32px; padding-inline: 12px; }
	.site-header .header-actions .button-small .icon { display: none; }
}