/* ==========================================================================
   Co Pacific Distributors – design system
   Tokens, base typography, WordPress content and the cp-* utility classes
   that Elementor content puts on containers (.e-con) and widgets (.elementor-widget).

   Specificity notes
   - Elementor container styles are driven by CSS variables (--padding-top, --border-radius, …);
     utilities set those variables so per-element settings saved in Elementor still win.
   - Elementor's default "global" widget rules use 2 classes (e.g. .elementor-widget-heading
     .elementor-heading-title); rules here that must beat them are prefixed with the body
     class .cp-theme. Per-element Elementor styles (4+ classes) always win over this file.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
	--cp-navy: #061a3a;
	--cp-blue: #123e73;
	--cp-red: #e31b23;
	--cp-red-dark: #bc1118;
	--cp-white: #fff;
	--cp-off-white: #f7f8fa;
	--cp-light: #eef2f7;
	--cp-gray: #d9dee7;
	--cp-gray-2: #8a94a6;
	--cp-text: #1d2430;
	--cp-muted: #5f6b7a;

	--cp-radius-sm: 12px;
	--cp-radius-md: 20px;
	--cp-radius-lg: 32px;
	--cp-shadow: 0 18px 45px rgba(6, 26, 58, 0.10);
	--cp-shadow-soft: 0 10px 28px rgba(6, 26, 58, 0.08);
	--cp-container: 1240px;

	/* Extensions (derived from the tokens above) */
	--cp-navy-deep: #041229;
	--cp-red-light: #ff6b71;          /* red accent that passes AA on navy */
	--cp-font: "Work Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--cp-gutter: clamp(16px, 4vw, 32px);
	--cp-section-y: clamp(64px, 8vw, 112px);
	--cp-gap: clamp(16px, 2.2vw, 28px);
	--cp-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
	--cp-header-h: 84px;
	--cp-header-h-condensed: 66px;

	/* Context colours – redefined by dark surfaces (navy sections, heroes, CTA bands) */
	--cp-fg: var(--cp-text);
	--cp-fg-muted: var(--cp-muted);
	--cp-heading: var(--cp-navy);
	--cp-link: var(--cp-red-dark);
	--cp-link-hover: var(--cp-red);
	--cp-eyebrow-color: var(--cp-red-dark);
	--cp-contrast: #fff;               /* colour that sits on top of --cp-heading */
	--cp-accent-soft: rgba(227, 27, 35, 0.10);
	--cp-accent-icon: var(--cp-red);
	--cp-focus: var(--cp-red-dark);
	--cp-border: rgba(217, 222, 231, 0.75);
}

/* Dark surfaces */
.cp-section--navy,
.cp-hero,
.cp-page-hero,
.cp-cta-band,
.cp-card--navy {
	--cp-fg: rgba(255, 255, 255, 0.86);
	--cp-fg-muted: rgba(255, 255, 255, 0.74);
	--cp-heading: #fff;
	--cp-link: #fff;
	--cp-link-hover: #fff;
	--cp-eyebrow-color: var(--cp-red-light);
	--cp-contrast: var(--cp-navy);
	--cp-accent-soft: rgba(255, 107, 113, 0.16);
	--cp-accent-icon: var(--cp-red-light);
	--cp-focus: #fff;
	--cp-border: rgba(255, 255, 255, 0.16);
	color: var(--cp-fg);
}

/* Light surfaces nested inside dark ones reset the context */
.cp-section--light,
.cp-section--white,
.cp-card:not(.cp-card--navy),
.cp-icon-card,
.cp-team-card {
	--cp-fg: var(--cp-text);
	--cp-fg-muted: var(--cp-muted);
	--cp-heading: var(--cp-navy);
	--cp-link: var(--cp-red-dark);
	--cp-link-hover: var(--cp-red);
	--cp-eyebrow-color: var(--cp-red-dark);
	--cp-contrast: #fff;
	--cp-accent-soft: rgba(227, 27, 35, 0.10);
	--cp-accent-icon: var(--cp-red);
	--cp-focus: var(--cp-red-dark);
	--cp-border: rgba(217, 222, 231, 0.75);
	color: var(--cp-fg);
}

/* ---------- 2. Base ---------- */
html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--cp-header-h-condensed) + var(--wp-admin--admin-bar--height, 0px) + 16px);
}

body {
	margin: 0;
	background-color: var(--cp-off-white);
	color: var(--cp-fg);
	font-family: var(--cp-font);
	font-size: 1rem;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: clip; /* safety net: never a horizontal scrollbar at 360px */
}

body,
button,
input,
optgroup,
select,
textarea {
	font-family: var(--cp-font);
}

h1, h2, h3, h4, h5, h6 {
	margin-block: 0 0.6em;
	color: var(--cp-heading);
	font-family: var(--cp-font);
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

h1 { font-size: clamp(2.25rem, 4.8vw, 3.9rem); font-weight: 900; line-height: 1.03; letter-spacing: -0.04em; }
h2 { font-size: clamp(1.8rem, 3.3vw, 2.85rem); line-height: 1.07; letter-spacing: -0.035em; }
h3 { font-size: clamp(1.2rem, 1.6vw, 1.45rem); }
h4 { font-size: 1.125rem; }
h5 { font-size: 1rem; }
h6 { font-size: 0.85rem; letter-spacing: 0.12em; text-transform: uppercase; }

p { margin-block: 0 1em; }

a {
	color: var(--cp-link);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
	transition: color 0.2s ease;
}

a:hover,
a:active {
	color: var(--cp-link-hover);
}

strong, b { font-weight: 700; }

img,
video {
	max-width: 100%;
	height: auto;
}

hr {
	border: 0;
	border-top: 1px solid var(--cp-gray);
	margin: 2rem 0;
}

::selection {
	background: var(--cp-red);
	color: #fff;
}

/* Focus: always visible, high contrast (same selectors as the parent reset so this wins). */
[tabindex]:not([tabindex="-1"]):focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
	outline: 3px solid var(--cp-focus);
	outline-offset: 3px;
	box-shadow: none;
}

.cp-main:focus,
#content:focus {
	outline: none;
}

/* Skip link (output by Hello Elementor) */
.skip-link.screen-reader-text:focus {
	top: 8px;
	left: 8px;
	padding: 12px 20px;
	border-radius: var(--cp-radius-sm);
	background: var(--cp-navy);
	color: #fff;
	font-weight: 700;
	text-decoration: none;
	box-shadow: var(--cp-shadow);
	outline: 3px solid var(--cp-red-light);
	outline-offset: 2px;
}

/* ---------- 3. Forms (generic) ---------- */
label {
	color: var(--cp-heading);
	font-size: 0.92rem;
	font-weight: 600;
}

input[type=date], input[type=email], input[type=number], input[type=password], input[type=search],
input[type=tel], input[type=text], input[type=time], input[type=url], select, textarea {
	min-height: 48px;
	padding: 0.75rem 1rem;
	border: 1px solid var(--cp-gray);
	border-radius: var(--cp-radius-sm);
	background-color: #fff;
	color: var(--cp-text);
	font-size: 1rem;
	line-height: 1.4;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

textarea { min-height: 140px; }

input[type=date]:focus, input[type=email]:focus, input[type=number]:focus, input[type=password]:focus,
input[type=search]:focus, input[type=tel]:focus, input[type=text]:focus, input[type=time]:focus,
input[type=url]:focus, select:focus, textarea:focus {
	border-color: var(--cp-blue);
	box-shadow: 0 0 0 4px rgba(18, 62, 115, 0.14);
}

::placeholder {
	color: var(--cp-gray-2);
	opacity: 1;
}

input[type=checkbox],
input[type=radio] {
	accent-color: var(--cp-red);
	width: 1.1em;
	height: 1.1em;
}

/* Generic buttons: replace the parent's pink defaults with brand colours. */
[type=button], [type=submit], [type=reset], button {
	border-color: var(--cp-navy);
	border-radius: 999px;
	color: var(--cp-navy);
	font-weight: 700;
}

[type=button]:focus, [type=button]:hover, [type=submit]:focus, [type=submit]:hover, button:focus, button:hover {
	background-color: var(--cp-navy);
	color: #fff;
}

[type=submit] {
	min-height: 48px;
	padding: 0.8rem 1.6rem;
	border: 2px solid var(--cp-red);
	background-color: var(--cp-red);
	color: #fff;
	font-weight: 800;
	box-shadow: 0 12px 26px rgba(227, 27, 35, 0.22);
}

[type=submit]:focus, [type=submit]:hover {
	border-color: var(--cp-red-dark);
	background-color: var(--cp-red-dark);
	color: #fff;
}

/* ---------- 4. WordPress content (pages not built with Elementor) ---------- */
body:not([class*=elementor-page-]) .site-main {
	width: min(var(--cp-container), 100% - 2 * var(--cp-gutter));
	max-width: none;
	margin-inline: auto;
	padding-block: clamp(40px, 6vw, 80px);
}

.site-main .page-header {
	margin-bottom: clamp(24px, 4vw, 40px);
	padding-bottom: clamp(18px, 3vw, 28px);
	border-bottom: 1px solid var(--cp-gray);
}

.site-main .page-header .entry-title {
	margin: 0;
}

.page-content {
	font-size: 1.0625rem;
}

.page-content > :is(p, ul, ol, h2, h3, h4, h5, h6, blockquote, dl) {
	max-width: 74ch;
}

.page-content h2 { margin-top: 1.6em; }
.page-content h3 { margin-top: 1.4em; }

.page-content ul,
.page-content ol {
	margin: 0 0 1.2em;
	padding-left: 1.3em;
}

.page-content li { margin-bottom: 0.4em; }
.page-content li::marker { color: var(--cp-red); }

.page-content blockquote,
.wp-block-quote {
	margin: 1.6em 0;
	padding: 1.2em 1.5em;
	border-left: 4px solid var(--cp-red);
	border-radius: 0 var(--cp-radius-sm) var(--cp-radius-sm) 0;
	background: #fff;
	box-shadow: var(--cp-shadow-soft);
	color: var(--cp-heading);
	font-size: 1.1rem;
}

.page-content img,
.wp-block-image img {
	border-radius: var(--cp-radius-sm);
}

.page-content figcaption,
.wp-caption-text {
	margin-top: 0.5em;
	color: var(--cp-muted);
	font-size: 0.875rem;
}

.page-content table,
.wp-block-table table {
	width: 100%;
	margin: 1.5em 0;
	border-collapse: collapse;
	background: #fff;
	font-size: 0.95rem;
}

.page-content th,
.page-content td {
	padding: 0.75rem 1rem;
	border: 1px solid var(--cp-gray);
	text-align: left;
	vertical-align: top;
}

.page-content th {
	background: var(--cp-light);
	color: var(--cp-navy);
	font-weight: 700;
}

.page-content .wp-block-table,
.page-content .table-scroll {
	overflow-x: auto;
}

.wp-block-button__link,
.wp-element-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0.85rem 1.6rem;
	border-radius: 999px;
	background-color: var(--cp-red);
	color: #fff;
	font-weight: 800;
	text-decoration: none;
}

.wp-block-button__link:hover,
.wp-element-button:hover {
	background-color: var(--cp-red-dark);
	color: #fff;
}

.pagination,
.navigation.pagination {
	gap: 12px;
	font-weight: 700;
}

/* ---------- 5. Elementor defaults (context-aware colours, typography) ---------- */
.e-con {
	--container-max-width: var(--cp-container);
}

/* Layout-only containers (no padding saved in Elementor) must not inherit Elementor's 10px default,
   otherwise grids/columns sit 10px inside the section edge and misalign with headings. */
.cp-theme {
	--container-default-padding-top: 0px;
	--container-default-padding-right: 0px;
	--container-default-padding-bottom: 0px;
	--container-default-padding-left: 0px;
}

.cp-theme .elementor-widget-heading .elementor-heading-title {
	color: var(--cp-heading);
	line-height: 1.1;
}

.cp-theme .elementor-widget-heading h1.elementor-heading-title { line-height: 1.03; }

.cp-theme .elementor-widget-text-editor {
	color: var(--cp-fg);
}

.elementor-widget-text-editor > :last-child,
.elementor-widget-text-editor p:last-child {
	margin-bottom: 0;
}

.cp-theme .elementor-widget-icon-list .elementor-icon-list-text {
	color: var(--cp-fg);
}

.cp-theme .elementor-widget-icon-box .elementor-icon-box-title,
.cp-theme .elementor-widget-image-box .elementor-image-box-title {
	color: var(--cp-heading);
}

.cp-theme .elementor-widget-icon-box .elementor-icon-box-description,
.cp-theme .elementor-widget-image-box .elementor-image-box-description {
	color: var(--cp-fg-muted);
}

/* "Inline (auto)" widgets stay content-sized even when the parent container stretches its items
   (otherwise pill labels such as .cp-step-number become full-width bars). */
.cp-theme .e-con .elementor-widget.elementor-widget__width-auto {
	max-width: fit-content;
}

/* Long unbroken strings (email addresses) wrap instead of overflowing cards on phones */
.cp-theme .elementor-widget :is(.elementor-icon-box-title, .elementor-icon-box-description, .elementor-icon-list-text, .elementor-heading-title),
.cp-theme a[href^="mailto:"] {
	overflow-wrap: anywhere;
}

.cp-theme .elementor-widget-icon-box .elementor-icon-box-content {
	min-width: 0;
}

/* Number badges never get squeezed by long neighbouring text in a row */
.cp-theme .elementor-widget:is(.cp-step-number, .cp-check-num) {
	flex-shrink: 0;
}

/* Elementor button widget: brand shape (colour comes from the kit accent = red). */
.cp-theme .elementor-widget-button .elementor-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0.85rem 1.6rem;
	border-radius: 999px;
	font-family: var(--cp-font);
	font-size: 1rem;
	font-weight: 800;
	line-height: 1.2;
	text-align: center;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s var(--cp-ease);
}

/* ---------- 6. Sections ---------- */
.e-con.cp-section,
.e-con.cp-hero,
.e-con.cp-page-hero,
.e-con.e-parent.cp-cta-band {
	--padding-left: var(--cp-gutter);
	--padding-right: var(--cp-gutter);
}

.e-con.cp-section {
	--padding-top: var(--cp-section-y);
	--padding-bottom: var(--cp-section-y);
}

.cp-section:not(.e-con) {
	padding: var(--cp-section-y) var(--cp-gutter);
}

.cp-section--light { background-color: var(--cp-light); }
.cp-section--white { background-color: #fff; }

.cp-section--navy {
	background-color: var(--cp-navy);
	background-image:
		radial-gradient(circle at 88% 12%, rgba(227, 27, 35, 0.22), transparent 36%),
		linear-gradient(135deg, var(--cp-navy) 0%, #0b2a55 60%, var(--cp-blue) 100%);
}

/* Hero (home): big band with gradient overlay over a background image or video */
.cp-hero,
.cp-page-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background-color: var(--cp-navy);
	background-image:
		radial-gradient(circle at 85% 20%, rgba(227, 27, 35, 0.28), transparent 34%),
		linear-gradient(135deg, var(--cp-navy), var(--cp-blue));
	background-position: center;
	background-size: cover;
}

.e-con.cp-hero {
	--min-height: clamp(540px, 80vh, 780px);
	--padding-top: clamp(88px, 11vw, 144px);
	--padding-bottom: clamp(72px, 9vw, 120px);
	--background-overlay: '';
	--overflow: hidden;
	--justify-content: center;
}

.cp-theme .e-con-boxed.cp-hero > .e-con-inner {
	flex-grow: 0;
	margin-block: auto;
}

.e-con.cp-page-hero {
	--padding-top: clamp(72px, 10vw, 128px);
	--padding-bottom: clamp(64px, 8vw, 104px);
	--background-overlay: '';
	--overflow: hidden;
}

.cp-page-hero {
	background-image:
		radial-gradient(circle at 86% 18%, rgba(227, 27, 35, 0.25), transparent 32%),
		radial-gradient(circle at 104% 112%, rgba(255, 255, 255, 0.07) 0 230px, transparent 231px),
		linear-gradient(135deg, var(--cp-navy), var(--cp-blue));
}

/* Overlay – same selectors Elementor uses for its own background overlay, so an overlay set in the editor still wins. */
.e-con.cp-hero::before,
.cp-hero > .elementor-background-video-container::before,
.cp-hero > .e-con-inner > .elementor-background-video-container::before {
	content: '';
	background-image:
		radial-gradient(circle at 85% 18%, rgba(227, 27, 35, 0.26), transparent 38%),
		linear-gradient(100deg, rgba(6, 26, 58, 0.94) 0%, rgba(6, 26, 58, 0.84) 45%, rgba(18, 62, 115, 0.50) 100%);
}

.e-con.cp-page-hero::before,
.cp-page-hero > .elementor-background-video-container::before,
.cp-page-hero > .e-con-inner > .elementor-background-video-container::before {
	content: '';
	background-image:
		radial-gradient(circle at 86% 18%, rgba(227, 27, 35, 0.22), transparent 34%),
		linear-gradient(100deg, rgba(6, 26, 58, 0.92) 0%, rgba(6, 26, 58, 0.78) 55%, rgba(18, 62, 115, 0.45) 100%);
}

/* Red accent line at the bottom of heroes */
.cp-hero::after,
.cp-page-hero::after {
	content: '';
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 2;
	height: 4px;
	background: linear-gradient(90deg, var(--cp-red) 0 22%, transparent 22%);
	pointer-events: none;
}

.cp-theme .cp-hero h1,
.cp-theme .cp-hero h1.elementor-heading-title {
	font-size: clamp(2.4rem, 6vw, 4.75rem);
	line-height: 0.98;
	letter-spacing: -0.045em;
	text-transform: uppercase;
}

.cp-theme .cp-page-hero h1,
.cp-theme .cp-page-hero h1.elementor-heading-title {
	font-size: clamp(2.2rem, 5vw, 3.75rem);
	line-height: 1;
	letter-spacing: -0.04em;
	text-transform: uppercase;
}

.cp-theme :is(.cp-hero, .cp-page-hero) .elementor-widget-text-editor {
	font-size: clamp(1.05rem, 1.4vw, 1.2rem);
	line-height: 1.6;
}

/* ---------- 7. Text ---------- */
.cp-eyebrow:not(.elementor-element),
.cp-theme .cp-eyebrow .elementor-heading-title,
.cp-theme .elementor-widget-text-editor.cp-eyebrow {
	margin-bottom: 0;
	color: var(--cp-eyebrow-color);
	font-family: var(--cp-font);
	font-size: 0.8rem;
	font-weight: 800;
	line-height: 1.4;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.cp-eyebrow:not(.elementor-element)::before,
.cp-theme .cp-eyebrow .elementor-heading-title::before {
	content: '';
	display: inline-block;
	width: 22px;
	height: 2px;
	margin: -3px 10px 0 0;
	border-radius: 2px;
	background: currentColor;
	vertical-align: middle;
}

.cp-theme .elementor-widget-text-editor.cp-eyebrow p { margin: 0; }

.cp-lead:not(.elementor-element),
.cp-theme .elementor-element.cp-lead,
.cp-theme .elementor-element.cp-lead p {
	color: var(--cp-fg-muted);
	font-size: clamp(1.075rem, 1.5vw, 1.25rem);
	line-height: 1.65;
}

.cp-muted:not(.elementor-element),
.cp-theme .elementor-element.cp-muted,
.cp-theme .elementor-element.cp-muted .elementor-heading-title {
	color: var(--cp-fg-muted);
}

/* ---------- 8. Grids ---------- */
.cp-steps:not(.e-con),
.e-con-full.cp-steps,
.elementor-element.e-con.cp-steps > .e-con-inner {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
	gap: var(--cp-gap);
	align-items: stretch;
}

:is(.cp-grid-2, .cp-grid-3, .cp-grid-4):not(.e-con),
.e-con-full:is(.cp-grid-2, .cp-grid-3, .cp-grid-4),
.elementor-element.e-con:is(.cp-grid-2, .cp-grid-3, .cp-grid-4) > .e-con-inner {
	display: grid;
	gap: var(--cp-grid-gap, var(--cp-gap));
	align-items: stretch;
	grid-auto-flow: row;
}

.cp-grid-2:not(.e-con), .e-con-full.cp-grid-2, .elementor-element.e-con.cp-grid-2 > .e-con-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); --cp-grid-gap: clamp(24px, 4vw, 56px); }
.cp-grid-3:not(.e-con), .e-con-full.cp-grid-3, .elementor-element.e-con.cp-grid-3 > .e-con-inner { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cp-grid-4:not(.e-con), .e-con-full.cp-grid-4, .elementor-element.e-con.cp-grid-4 > .e-con-inner { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Five-up grid: 5 columns on wide screens, a centred 3 + 2 on tablets (6-track grid, each item spans 2),
   one column on phones – never leaves a lone orphan card. */
.cp-grid-5:not(.e-con), .e-con-full.cp-grid-5, .elementor-element.e-con.cp-grid-5 > .e-con-inner {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: var(--cp-gap);
	align-items: stretch;
}

@media (max-width: 1199px) {
	.cp-grid-5:not(.e-con), .e-con-full.cp-grid-5, .elementor-element.e-con.cp-grid-5 > .e-con-inner {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}

	.cp-grid-5:not(.e-con) > *,
	.e-con-full.cp-grid-5 > .elementor-element,
	.elementor-element.e-con.cp-grid-5 > .e-con-inner > .elementor-element { grid-column: span 2; }

	.cp-grid-5:not(.e-con) > :nth-child(4),
	.e-con-full.cp-grid-5 > .elementor-element:nth-child(4),
	.elementor-element.e-con.cp-grid-5 > .e-con-inner > .elementor-element:nth-child(4) { grid-column: 2 / span 2; }
}

@media (max-width: 767px) {
	.cp-grid-5:not(.e-con), .e-con-full.cp-grid-5, .elementor-element.e-con.cp-grid-5 > .e-con-inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.cp-grid-5:not(.e-con) > *,
	.e-con-full.cp-grid-5 > .elementor-element,
	.elementor-element.e-con.cp-grid-5 > .e-con-inner > .elementor-element { grid-column: auto; }

	.cp-grid-5:not(.e-con) > :nth-child(4),
	.e-con-full.cp-grid-5 > .elementor-element:nth-child(4),
	.elementor-element.e-con.cp-grid-5 > .e-con-inner > .elementor-element:nth-child(4) { grid-column: auto; }
}

/* Grid children fill their cell regardless of flex widths saved in Elementor */
.e-con-full:is(.cp-grid-2, .cp-grid-3, .cp-grid-4, .cp-grid-5, .cp-steps) > .elementor-element,
.elementor-element.e-con:is(.cp-grid-2, .cp-grid-3, .cp-grid-4, .cp-grid-5, .cp-steps) > .e-con-inner > .elementor-element {
	width: 100%;
	max-width: none;
	min-width: 0;
	margin: 0;
}

@media (max-width: 1024px) {
	.cp-grid-3:not(.e-con), .e-con-full.cp-grid-3, .elementor-element.e-con.cp-grid-3 > .e-con-inner,
	.cp-grid-4:not(.e-con), .e-con-full.cp-grid-4, .elementor-element.e-con.cp-grid-4 > .e-con-inner {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.cp-grid-2:not(.e-con), .e-con-full.cp-grid-2, .elementor-element.e-con.cp-grid-2 > .e-con-inner,
	.cp-grid-3:not(.e-con), .e-con-full.cp-grid-3, .elementor-element.e-con.cp-grid-3 > .e-con-inner {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 560px) {
	.cp-grid-4:not(.e-con), .e-con-full.cp-grid-4, .elementor-element.e-con.cp-grid-4 > .e-con-inner {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---------- 9. Cards ---------- */
.cp-card,
.cp-icon-card,
.cp-team-card {
	position: relative;
	border: 1px solid var(--cp-border);
	border-radius: var(--cp-radius-md);
	background-color: #fff;
	box-shadow: var(--cp-shadow-soft);
	transition: transform 0.25s var(--cp-ease), box-shadow 0.25s ease, border-color 0.25s ease;
}

.e-con:is(.cp-card, .cp-icon-card, .cp-team-card) {
	--border-radius: var(--cp-radius-md);
	--padding-top: clamp(24px, 3vw, 34px);
	--padding-right: clamp(22px, 3vw, 32px);
	--padding-bottom: clamp(24px, 3vw, 34px);
	--padding-left: clamp(22px, 3vw, 32px);
	transition: transform 0.25s var(--cp-ease), box-shadow 0.25s ease, border-color 0.25s ease, background 0.3s ease;
}

:is(.cp-card, .cp-icon-card, .cp-team-card):not(.e-con) {
	padding: clamp(24px, 3vw, 34px) clamp(22px, 3vw, 32px);
}

.cp-card--navy {
	border-color: transparent;
	background-color: var(--cp-navy);
	background-image:
		radial-gradient(circle at 92% 8%, rgba(227, 27, 35, 0.30), transparent 36%),
		linear-gradient(135deg, var(--cp-navy), var(--cp-blue));
	box-shadow: var(--cp-shadow);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.cp-card:hover,
	.cp-icon-card:hover,
	.cp-team-card:hover {
		transform: translateY(-4px);
		border-color: rgba(18, 62, 115, 0.18);
		box-shadow: var(--cp-shadow);
	}

	.cp-card--navy:hover { border-color: transparent; }
}

/* An icon card placed inside another card is content, not a second card (no card-in-card) */
:is(.cp-card, .cp-team-card) .cp-icon-card {
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	transform: none;
}

/* Icon card: rounded tinted icon tile */
.cp-theme .cp-icon-card .elementor-icon.elementor-icon {
	display: inline-grid;
	place-items: center;
	width: 56px;
	height: 56px;
	padding: 0;
	border: 0;
	border-radius: 16px;
	background: var(--cp-accent-soft);
	color: var(--cp-accent-icon);
	fill: var(--cp-accent-icon);
	font-size: 26px;
}

.cp-theme .cp-icon-card .elementor-icon.elementor-icon svg {
	width: 26px;
	height: 26px;
	fill: currentColor;
}

.cp-theme .cp-icon-card .elementor-icon-box-wrapper { gap: 18px; }
.cp-theme .cp-icon-card .elementor-icon-box-title { margin: 0 0 8px; font-size: 1.2rem; }

/* Team card */
.cp-theme .cp-team-card img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: calc(var(--cp-radius-md) - 6px);
}

.cp-theme .cp-team-card .elementor-heading-title { font-size: 1.2rem; }
.cp-theme .cp-team-card .elementor-widget-text-editor { color: var(--cp-fg-muted); font-size: 0.95rem; }

/* ---------- 10. Stats, media, video ---------- */
.cp-stat {
	padding-left: 20px;
	border-left: 3px solid var(--cp-red);
}

.e-con.cp-stat {
	--padding-left: 20px;
	--gap: 6px;
	--row-gap: 6px;
}

.cp-theme .cp-stat .elementor-counter-number-wrapper,
.cp-theme .cp-stat .elementor-widget-heading .elementor-heading-title,
.cp-theme .elementor-widget-heading.cp-stat .elementor-heading-title,
.cp-stat__number {
	color: var(--cp-heading);
	font-family: var(--cp-font);
	font-size: clamp(2.25rem, 4.5vw, 3.5rem);
	font-weight: 900;
	line-height: 1;
	letter-spacing: -0.04em;
}

.cp-theme .cp-stat .elementor-counter-number-suffix,
.cp-theme .cp-stat .elementor-counter-number-prefix {
	color: var(--cp-red);
}

.cp-theme .cp-stat .elementor-counter-title,
.cp-theme .cp-stat .elementor-widget-text-editor,
.cp-stat__label {
	color: var(--cp-fg-muted);
	font-size: 0.85rem;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.cp-theme .cp-stat .elementor-counter { align-items: flex-start; }
.cp-theme .cp-stat .elementor-counter-number-wrapper { justify-content: flex-start; }

.cp-theme .cp-media img,
.cp-theme .cp-media video {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--cp-radius-lg);
	box-shadow: var(--cp-shadow);
	object-fit: cover;
}

.e-con.cp-media {
	--border-radius: var(--cp-radius-lg);
	--overflow: hidden;
	box-shadow: var(--cp-shadow);
}

.cp-theme .e-con.cp-media img { border-radius: 0; box-shadow: none; }

.cp-theme .cp-video .elementor-wrapper,
.cp-video:not(.elementor-element) {
	position: relative;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	border-radius: var(--cp-radius-lg);
	background: var(--cp-navy);
	box-shadow: var(--cp-shadow);
}

.cp-theme .cp-video .elementor-wrapper :is(video, iframe),
.cp-video:not(.elementor-element) > :is(video, iframe) {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	object-fit: cover;
}

/* Let the frame's shadow show (Elementor clips the video widget wrapper) */
.cp-theme .elementor-widget-video:is(.cp-video, .cp-video-portrait) {
	overflow: visible;
}

/* Portrait (9:16) video frame for vertical clips: capped width, centred */
.cp-theme .cp-video-portrait .elementor-wrapper,
.cp-video-portrait:not(.elementor-element) {
	position: relative;
	overflow: hidden;
	width: 100%;
	max-width: 360px;
	margin-inline: auto;
	aspect-ratio: 9 / 16;
	border-radius: var(--cp-radius-lg);
	background: var(--cp-navy);
	box-shadow: var(--cp-shadow);
}

.cp-theme .cp-video-portrait .elementor-wrapper :is(video, iframe),
.cp-video-portrait:not(.elementor-element) > :is(video, iframe) {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	object-fit: cover;
}

/* ---------- 11. CTA band ---------- */
.cp-cta-band {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	border-radius: var(--cp-radius-lg);
	background-color: var(--cp-navy);
	background-image:
		radial-gradient(circle at 12% 20%, rgba(227, 27, 35, 0.34), transparent 40%),
		radial-gradient(circle at 100% 100%, rgba(255, 255, 255, 0.06) 0 180px, transparent 181px),
		linear-gradient(120deg, var(--cp-navy), var(--cp-blue));
	box-shadow: var(--cp-shadow);
}

.cp-cta-band::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 6px;
	background: var(--cp-red);
	pointer-events: none;
}

.e-con.cp-cta-band {
	--border-radius: var(--cp-radius-lg);
	--padding-top: clamp(36px, 5vw, 64px);
	--padding-right: clamp(24px, 5vw, 64px);
	--padding-bottom: clamp(36px, 5vw, 64px);
	--padding-left: clamp(24px, 5vw, 64px);
	--overflow: hidden;
}

.cp-cta-band:not(.e-con) { padding: clamp(36px, 5vw, 64px) clamp(24px, 5vw, 64px); }

/* Used directly as a full-width section */
.e-con.e-parent.cp-cta-band {
	--border-radius: 0;
	--padding-top: clamp(56px, 7vw, 88px);
	--padding-bottom: clamp(56px, 7vw, 88px);
	border-radius: 0;
	box-shadow: none;
}

/* Full-bleed band: clean edge-to-edge strip (the side accent bar only suits the boxed card) */
.e-con.e-parent.cp-cta-band::after {
	content: none;
}

.cp-cta-band--red {
	--cp-fg: #fff;
	--cp-fg-muted: rgba(255, 255, 255, 0.92);
	--cp-eyebrow-color: #fff;
	background-color: var(--cp-red-dark);
	background-image:
		radial-gradient(circle at 90% 10%, rgba(255, 255, 255, 0.14), transparent 40%),
		linear-gradient(120deg, var(--cp-red-dark), #8f0b11);
}

.cp-cta-band--red::after { background: var(--cp-navy); }

/* ---------- 12. Checklist & steps ---------- */
.cp-theme .cp-checklist .elementor-icon-list-items {
	display: grid;
	gap: 12px;
}

.cp-theme .cp-checklist .elementor-icon-list-items .elementor-icon-list-item,
.cp-theme .cp-checklist .elementor-icon-list-item > a {
	align-items: flex-start;
	margin: 0;
	padding: 0;
}

.cp-theme .cp-checklist .elementor-icon-list-item .elementor-icon-list-icon {
	display: inline-grid;
	flex: 0 0 26px;
	place-items: center;
	width: 26px;
	height: 26px;
	margin-top: 1px;
	padding: 0;
	border-radius: 50%;
	background: var(--cp-accent-soft);
}

.cp-theme .cp-checklist .elementor-icon-list-item .elementor-icon-list-icon svg {
	width: 13px;
	height: 13px;
	fill: var(--cp-accent-icon);
}

.cp-theme .cp-checklist .elementor-icon-list-item .elementor-icon-list-icon i {
	color: var(--cp-accent-icon);
	font-size: 13px;
}

.cp-theme .cp-checklist .elementor-icon-list-item .elementor-icon-list-text {
	align-self: center;
	padding-inline-start: 12px;
	color: var(--cp-fg);
	font-weight: 600;
	line-height: 1.45;
}

/* Icon list item without an icon, and plain lists (text editor) get the same red check */
.cp-theme .cp-checklist .elementor-icon-list-item:not(:has(.elementor-icon-list-icon)) .elementor-icon-list-text,
.cp-checklist ul:not(.elementor-icon-list-items) > li {
	position: relative;
	padding-left: 38px;
}

.cp-theme .cp-checklist .elementor-icon-list-item:not(:has(.elementor-icon-list-icon)) .elementor-icon-list-text::before,
.cp-checklist ul:not(.elementor-icon-list-items) > li::before {
	content: '';
	position: absolute;
	top: -1px;
	left: 0;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--cp-accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23e31b23' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center / 14px no-repeat;
}

.cp-checklist ul:not(.elementor-icon-list-items) {
	display: grid;
	gap: 12px;
	margin: 0 0 1em;
	padding: 0;
	list-style: none;
}

.cp-checklist ul:not(.elementor-icon-list-items) > li {
	margin: 0;
	color: var(--cp-fg);
	font-weight: 600;
}

/* Steps: each child of a .cp-steps container is a numbered step card.
   Children marked .cp-step carry their own number (e.g. a .cp-step-number heading), so they get no auto-counter badge */
.cp-steps { counter-reset: cp-step; }

.cp-steps:not(.e-con) > :not(.cp-step),
.e-con-full.cp-steps > .elementor-element:not(.cp-step),
.elementor-element.e-con.cp-steps > .e-con-inner > .elementor-element:not(.cp-step) {
	--cp-fg: var(--cp-text);
	--cp-fg-muted: var(--cp-muted);
	--cp-heading: var(--cp-navy);
	--cp-link: var(--cp-red-dark);
	--cp-focus: var(--cp-red-dark);
	position: relative;
	padding: 88px 28px 28px;
	border: 1px solid rgba(217, 222, 231, 0.75);
	border-radius: var(--cp-radius-md);
	background-color: #fff;
	box-shadow: var(--cp-shadow-soft);
	color: var(--cp-fg);
	counter-increment: cp-step;
}

.e-con-full.cp-steps > .e-con:not(.cp-step),
.elementor-element.e-con.cp-steps > .e-con-inner > .e-con:not(.cp-step) {
	--padding-top: 88px;
	--padding-right: 28px;
	--padding-bottom: 28px;
	--padding-left: 28px;
	--border-radius: var(--cp-radius-md);
	padding-block: 88px 28px;
}

.cp-steps:not(.e-con) > :not(.cp-step)::after,
.e-con-full.cp-steps > .elementor-element:not(.cp-step)::after,
.elementor-element.e-con.cp-steps > .e-con-inner > .elementor-element:not(.cp-step)::after {
	content: counter(cp-step, decimal-leading-zero);
	position: absolute;
	top: 26px;
	left: 28px;
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border-radius: 14px;
	background: rgba(227, 27, 35, 0.10);
	color: var(--cp-red-dark);
	font-family: var(--cp-font);
	font-size: 1rem;
	font-weight: 900;
	letter-spacing: 0.02em;
}

/* Numbered list inside a text widget with .cp-steps */
.cp-steps ol {
	display: grid;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: cp-step-li;
}

.cp-steps ol > li {
	position: relative;
	min-height: 40px;
	padding-left: 56px;
	counter-increment: cp-step-li;
}

.cp-steps ol > li::before {
	content: counter(cp-step-li, decimal-leading-zero);
	position: absolute;
	top: 0;
	left: 0;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 12px;
	background: var(--cp-accent-soft);
	color: var(--cp-eyebrow-color);
	font-weight: 900;
	font-size: 0.9rem;
}

/* ---------- 13. Buttons ---------- */
.cp-btn {
	--cp-btn-bg: var(--cp-red);
	--cp-btn-fg: #fff;
	--cp-btn-bd: var(--cp-red);
	--cp-btn-bg-hover: var(--cp-red-dark);
	--cp-btn-fg-hover: #fff;
	--cp-btn-bd-hover: var(--cp-red-dark);
	--cp-btn-shadow: 0 14px 28px rgba(227, 27, 35, 0.24);
	--cp-btn-shadow-hover: 0 18px 36px rgba(227, 27, 35, 0.34);
}

.cp-btn--navy {
	--cp-btn-bg: var(--cp-navy);
	--cp-btn-bd: var(--cp-navy);
	--cp-btn-bg-hover: var(--cp-blue);
	--cp-btn-bd-hover: var(--cp-blue);
	--cp-btn-shadow: 0 14px 28px rgba(6, 26, 58, 0.20);
	--cp-btn-shadow-hover: 0 18px 36px rgba(6, 26, 58, 0.28);
}

.cp-btn--ghost {
	--cp-btn-bg: transparent;
	--cp-btn-fg: var(--cp-heading);
	--cp-btn-bd: var(--cp-heading);
	--cp-btn-bg-hover: var(--cp-heading);
	--cp-btn-fg-hover: var(--cp-contrast);
	--cp-btn-bd-hover: var(--cp-heading);
	--cp-btn-shadow: none;
	--cp-btn-shadow-hover: 0 14px 28px rgba(6, 26, 58, 0.16);
}

/* Navy button on a dark surface keeps a visible edge */
:is(.cp-section--navy, .cp-hero, .cp-page-hero, .cp-cta-band, .cp-card--navy) .cp-btn--navy {
	--cp-btn-bd: rgba(255, 255, 255, 0.45);
	--cp-btn-bd-hover: #fff;
}

/* On a red band the primary button inverts */
.cp-cta-band--red .cp-btn--primary {
	--cp-btn-bg: #fff;
	--cp-btn-fg: var(--cp-red-dark);
	--cp-btn-bd: #fff;
	--cp-btn-bg-hover: var(--cp-navy);
	--cp-btn-fg-hover: #fff;
	--cp-btn-bd-hover: var(--cp-navy);
	--cp-btn-shadow: 0 14px 28px rgba(0, 0, 0, 0.18);
}

.cp-btn:not(.elementor-element),
.cp-theme .elementor-widget.cp-btn .elementor-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	min-height: 48px;
	padding: 0.8rem 1.6rem;
	border: 2px solid var(--cp-btn-bd);
	border-radius: 999px;
	background: var(--cp-btn-bg);
	box-shadow: var(--cp-btn-shadow);
	color: var(--cp-btn-fg);
	fill: var(--cp-btn-fg);
	font-family: var(--cp-font);
	font-size: 1rem;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: 0.005em;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s var(--cp-ease);
}

.cp-btn:not(.elementor-element):is(:hover, :focus-visible),
.cp-theme .elementor-widget.cp-btn .elementor-button:is(:hover, :focus-visible) {
	border-color: var(--cp-btn-bd-hover);
	background: var(--cp-btn-bg-hover);
	box-shadow: var(--cp-btn-shadow-hover);
	color: var(--cp-btn-fg-hover);
	fill: var(--cp-btn-fg-hover);
}

@media (prefers-reduced-motion: no-preference) {
	.cp-btn:not(.elementor-element):hover,
	.cp-theme .elementor-widget.cp-btn .elementor-button:hover {
		transform: translateY(-2px);
	}
}

.cp-btn:not(.elementor-element):active,
.cp-theme .elementor-widget.cp-btn .elementor-button:active {
	transform: translateY(0);
}

/* Text link with arrow */
.cp-link-arrow,
.cp-theme .cp-link-arrow a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--cp-link);
	font-weight: 800;
	text-decoration: none;
}

.cp-link-arrow::after,
.cp-theme .cp-link-arrow a::after {
	content: '\2192';
	transition: transform 0.2s ease;
}

.cp-link-arrow:hover::after,
.cp-theme .cp-link-arrow a:hover::after {
	transform: translateX(4px);
}

/* ---------- 14. Motion ---------- */
@media (prefers-reduced-motion: no-preference) {
	.cp-js .cp-reveal:not(.cp-reveal-done) {
		transition:
			opacity 0.7s var(--cp-ease) var(--cp-reveal-delay, 0ms),
			transform 0.7s var(--cp-ease) var(--cp-reveal-delay, 0ms);
	}

	.cp-js .cp-reveal:not(.is-revealed) {
		opacity: 0;
		transform: translate3d(0, 28px, 0);
	}
}

/* Never hide content while editing in Elementor */
.elementor-editor-active .cp-reveal,
.elementor-editor-preview .cp-reveal {
	opacity: 1 !important;
	transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ---------- 15. Helpers ---------- */
.cp-container {
	width: min(var(--cp-container), 100% - 2 * var(--cp-gutter));
	margin-inline: auto;
}

.cp-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Seamless media boxes (see site.js): background follows the photo's edge colour. */
body.cp-theme .elementor .e-con.cp-media-blend { background-color: var(--cp-media-bg, #fff); transition: background-color .3s ease; }
body.cp-theme .elementor .e-con.cp-media-blend.is-blended { background-image: none; }
.cp-media-blend.is-blended .elementor-widget-image img { background: transparent; box-shadow: none; }

/* Above-the-fold content never waits for the scroll reveal: hero text is the LCP element on most
   pages, and fading it in delayed the first meaningful paint by ~1s on mobile. */
@media (prefers-reduced-motion: no-preference) {
	.cp-js :is(.cp-hero, .cp-page-hero) .cp-reveal:not(.is-revealed),
	.cp-js :is(.cp-hero, .cp-page-hero).cp-reveal:not(.is-revealed),
	.cp-js .elementor > .e-con:first-child .cp-reveal:not(.is-revealed) {
		opacity: 1;
		transform: none;
	}
}