/* =========================================================
   Cameron & Partners -- shared design tokens
   Every widget's CSS reads these custom properties so the whole
   homepage stays visually consistent from one shared source of
   truth. navy/gold are pixel-sampled from the inspiration
   screenshot (see project notes); the rest are close visual
   estimates -- all of them are overridden per-widget by Elementor
   Style controls, these are just the defaults.
   ========================================================= */

:root {
	--cp-navy: #002FA7;
	--cp-navy-ink: #001E6E;
	--cp-gold: #D4AF37;
	--cp-bg-light: #F4F4F5;
	--cp-bg-black: #0A0A0A;
	--cp-text-body: #4B5563;
	--cp-text-label: #5B7FDB;
	--cp-text-heading: #1F2430;
	--cp-border: #E6E9EB;
	--cp-radius-card: 12px;
	--cp-radius-pill: 999px;
	--cp-shadow-card: 0 4px 20px rgba(20, 20, 31, 0.06);
	--cp-shadow-card-hover: 0 16px 32px -12px rgba(0, 47, 167, 0.18);
	--cp-duration: 320ms;
	--cp-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--cp-font-heading: inherit;
	--cp-font-body: inherit;
}

.cp-eyebrow {
	display: inline-block;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--cp-text-label);
	margin: 0 0 12px;
}

.cp-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 13px 26px;
	font-size: 15px;
	font-weight: 600;
	border-radius: 6px;
	text-decoration: none;
	transition: transform var(--cp-duration) var(--cp-ease), filter var(--cp-duration) ease, box-shadow var(--cp-duration) ease;
	border: 2px solid transparent;
	cursor: pointer;
}

.cp-btn:hover {
	transform: translateY(-1px);
	filter: brightness(1.06);
}

.cp-btn--primary {
	background: var(--cp-navy);
	color: #fff;
}

.cp-btn--primary:hover {
	box-shadow: 0 10px 24px -10px rgba(0, 47, 167, 0.45);
}

.cp-btn--outline {
	background: transparent;
	color: var(--cp-navy);
	border-color: var(--cp-navy);
}

.cp-btn--outline:hover {
	background: var(--cp-navy);
	color: #fff;
}

.cp-btn svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	transition: transform var(--cp-duration) var(--cp-ease);
}

.cp-btn:hover svg {
	transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
	.cp-btn,
	.cp-btn svg {
		transition-duration: 1ms !important;
	}
	.cp-btn:hover {
		transform: none;
	}
}

.cp-btn:focus-visible {
	outline: 2px solid var(--cp-navy);
	outline-offset: 3px;
}