/* CAMS Process Stepper v1.2.0 – all rules scoped to .cams-ps to avoid Divi conflicts */

/* Outer wrapper: takes the full width of whatever Divi column it sits in. */
.cams-ps-wrap {
	display: block;
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 0;
}

/* ---------- style tokens (Navy is the base) ---------- */
.cams-ps {
	--cams-ps-accent: #f5a623;
	--cams-ps-accent-ink: #f5a623;
	--cams-ps-on-accent: #2c3e5e;
	--cams-ps-bg: #2c3e5e;
	--cams-ps-card: #1d2b45;
	--cams-ps-media-bg: #2c3e5e;
	--cams-ps-line: rgba(255, 255, 255, 0.16);
	--cams-ps-text: #ffffff;
	--cams-ps-muted: rgba(255, 255, 255, 0.76);
	--cams-ps-display: "Manrope", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	--cams-ps-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	--cams-ps-title-weight: 800;
	--cams-ps-radius: 24px;
	--cams-ps-card-radius: 18px;
	--cams-ps-track-pct: 0;
	box-sizing: border-box;
	position: relative;
	width: 100%;
	max-width: 1080px;
	margin: 0 auto;
	padding: 28px 28px 22px;
	background: var(--cams-ps-bg);
	color: var(--cams-ps-text);
	border: 1px solid var(--cams-ps-line);
	border-radius: var(--cams-ps-radius);
	font-family: var(--cams-ps-body);
	line-height: 1.6;
	text-align: left;
}
.cams-ps.cams-ps--light {
	--cams-ps-done-ring: #c47f0d;
	--cams-ps-accent-ink: #945800;
	--cams-ps-bg: #ffffff;
	--cams-ps-card: #f4f6f9;
	--cams-ps-media-bg: #f4f6f9;
	--cams-ps-line: #e1e4e8;
	--cams-ps-text: #2c3e5e;
	--cams-ps-muted: #606266;
	border-width: 2px;
}
.cams-ps.cams-ps--charcoal {
	--cams-ps-accent: #c9a227;
	--cams-ps-accent-ink: #c9a227;
	--cams-ps-on-accent: #15171b;
	--cams-ps-bg: #15171b;
	--cams-ps-card: #1d2026;
	--cams-ps-media-bg: #1a1d23;
	--cams-ps-line: rgba(255, 255, 255, 0.12);
	--cams-ps-text: #f4f1ea;
	--cams-ps-muted: rgba(244, 241, 234, 0.68);
	--cams-ps-display: "Manrope", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	--cams-ps-title-weight: 600;
	--cams-ps-radius: 16px;
	--cams-ps-card-radius: 12px;
}
.cams-ps *, .cams-ps *::before, .cams-ps *::after { box-sizing: border-box; }
/* Divi styles lists with ID selectors (#left-area ul); these resets keep the box's lists clean */
.cams-ps ol.cams-ps-track, .cams-ps .cams-ps-needs ul { list-style: none !important; margin: 0 !important; padding: 0 !important; line-height: inherit !important; }
.cams-ps ol.cams-ps-track { margin-bottom: 24px !important; }
.cams-ps li.cams-ps-track-item, .cams-ps .cams-ps-needs li { list-style: none !important; margin: 0 !important; }
.cams-ps .cams-ps-needs li { padding: 5px 10px 5px 26px !important; line-height: 1.35 !important; }

/* ---------- optional header ---------- */
.cams-ps .cams-ps-head { margin: 4px 0 28px; padding: 0; }
.cams-ps .cams-ps-head--center { text-align: center; }
.cams-ps .cams-ps-head--left { text-align: left; }
.cams-ps .cams-ps-head .cams-ps-eyebrow {
	margin: 0 0 8px;
	padding: 0;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	line-height: 1.4;
	color: var(--cams-ps-accent-ink);
}
.cams-ps .cams-ps-head h2.cams-ps-heading {
	margin: 0 0 10px;
	padding: 0;
	font-family: var(--cams-ps-display);
	font-size: 34px;
	font-weight: var(--cams-ps-title-weight);
	letter-spacing: -0.015em;
	line-height: 1.2;
	text-wrap: balance;
	text-transform: none;
	color: var(--cams-ps-text);
}
.cams-ps .cams-ps-head .cams-ps-lede {
	max-width: 60ch;
	margin: 0;
	padding: 0;
	font-size: 16px;
	line-height: 1.6;
	color: var(--cams-ps-muted);
}
.cams-ps .cams-ps-head--center .cams-ps-lede { margin-left: auto; margin-right: auto; }
.cams-ps .cams-ps-head > :last-child { margin-bottom: 0; }

/* ---------- step track ---------- */
.cams-ps .cams-ps-track {
	position: relative;
	display: flex;
	justify-content: space-between;
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
}
.cams-ps .cams-ps-track::before,
.cams-ps .cams-ps-track::after {
	content: "";
	position: absolute;
	top: 17px;
	left: calc(100% / (2 * var(--cams-ps-n, 9)));
	right: calc(100% / (2 * var(--cams-ps-n, 9)));
	height: 2px;
	background: var(--cams-ps-line);
}
.cams-ps .cams-ps-track::after {
	right: auto;
	width: calc((100% - 100% / var(--cams-ps-n, 9)) * var(--cams-ps-track-pct, 0));
	background: var(--cams-ps-accent);
	transition: width 0.45s ease;
}
.cams-ps .cams-ps-track-item { flex: 1 1 0; min-width: 0; margin: 0; padding: 0; list-style: none; }
.cams-ps .cams-ps-dot {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	width: 100%;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	color: var(--cams-ps-muted);
	font: inherit;
	cursor: pointer;
}
.cams-ps .cams-ps-dot-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--cams-ps-bg);
	border: 2px solid var(--cams-ps-line);
	color: var(--cams-ps-muted);
	font-size: 14px;
	font-weight: 600;
	transition: background 0.3s, border-color 0.3s, color 0.3s, transform 0.3s;
}
.cams-ps .cams-ps-dot-label { display: block; max-width: 110px; font-size: 12px; line-height: 1.3; text-align: center; transition: color 0.3s; }
.cams-ps .cams-ps-dot:hover .cams-ps-dot-num { border-color: var(--cams-ps-accent); }
.cams-ps .cams-ps-dot.is-done .cams-ps-dot-num { border-color: var(--cams-ps-done-ring, var(--cams-ps-accent)); color: var(--cams-ps-accent-ink); }
.cams-ps .cams-ps-dot[aria-selected="true"] .cams-ps-dot-num {
	background: var(--cams-ps-accent);
	border-color: var(--cams-ps-accent);
	color: var(--cams-ps-on-accent);
	transform: scale(1.1);
}
.cams-ps .cams-ps-dot[aria-selected="true"] .cams-ps-dot-label { color: var(--cams-ps-text); }
.cams-ps .cams-ps-dot:focus,
.cams-ps .cams-ps-dot:focus-visible { outline: none; box-shadow: none; }
.cams-ps .cams-ps-dot:focus-visible .cams-ps-dot-num { box-shadow: 0 0 0 3px var(--cams-ps-bg), 0 0 0 5px var(--cams-ps-accent); }

/* ---------- panels ---------- */
.cams-ps .cams-ps-stage { display: grid; }
.cams-ps .cams-ps-panel {
	display: grid;
	grid-template-columns: 150px minmax(0, 1fr);
	grid-template-areas: "side body";
	gap: 28px;
	align-items: center;
	padding: 28px 32px;
	margin: 0 0 12px;
	background: var(--cams-ps-card);
	border: 1px solid var(--cams-ps-line);
	border-radius: var(--cams-ps-card-radius);
}
.cams-ps .cams-ps-panel.has-media {
	grid-template-columns: 130px minmax(0, 1fr) minmax(0, 42%);
	grid-template-areas: "side body media";
	padding: 20px 20px 20px 32px;
}
.cams-ps.is-ready .cams-ps-panel {
	grid-area: 1 / 1;
	margin: 0;
	opacity: 0;
	visibility: hidden;
	transform: translateX(16px);
	transition: opacity 0.45s ease, transform 0.45s ease, visibility 0s linear 0.45s;
}
.cams-ps.is-ready .cams-ps-panel.is-active {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: opacity 0.45s ease, transform 0.45s ease, visibility 0s;
}
.cams-ps .cams-ps-panel-side {
	grid-area: side;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-right: 28px;
	border-right: 1px solid var(--cams-ps-line);
}
.cams-ps .cams-ps-panel-body { grid-area: body; min-width: 0; }
.cams-ps .cams-ps-big-num {
	font-family: var(--cams-ps-display);
	font-size: 64px;
	font-weight: var(--cams-ps-title-weight);
	letter-spacing: -0.03em;
	line-height: 1;
	color: var(--cams-ps-accent-ink);
}
.cams-ps .cams-ps-media {
	grid-area: media;
	margin: 0;
	aspect-ratio: 16 / 10;
	border-radius: var(--sk-r-m, 14px);
	overflow: hidden;
	border: 1px solid var(--cams-ps-line);
	background: var(--cams-ps-media-bg);
}
.cams-ps .cams-ps-media img { display: block; width: 100%; height: 100%; max-width: 100%; object-fit: cover; }
.cams-ps .cams-ps-kicker {
	margin: 0 0 4px;
	padding: 0;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--cams-ps-accent-ink);
}
.cams-ps .cams-ps-title {
	margin: 0 0 8px;
	padding: 0;
	font-family: var(--cams-ps-display);
	font-size: 28px;
	font-weight: var(--cams-ps-title-weight);
	letter-spacing: -0.01em;
	line-height: 1.25;
	color: var(--cams-ps-text);
}
.cams-ps .cams-ps-desc { max-width: 60ch; margin: 0; padding: 0; font-size: 16px; color: var(--cams-ps-muted); }

/* time, documents, button */
.cams-ps .cams-ps-time {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 12px 0 0;
	padding: 6px 12px;
	border-radius: var(--sk-pill, 999px);
	background: rgba(245, 166, 35, 0.14);
	background: color-mix(in srgb, var(--cams-ps-accent) 14%, transparent);
	color: var(--cams-ps-text);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
}
.cams-ps .cams-ps-time svg { flex: 0 0 auto; width: 16px; height: 16px; fill: none; stroke: var(--cams-ps-accent-ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cams-ps .cams-ps-needs { margin-top: 14px; }
.cams-ps .cams-ps-needs-label { margin: 0 0 8px; padding: 0; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; color: var(--cams-ps-muted); }
.cams-ps .cams-ps-needs ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.cams-ps .cams-ps-needs li { position: relative; margin: 0; padding: 5px 10px 5px 26px; border: 1px solid var(--cams-ps-line); border-radius: var(--sk-r-m, 8px); font-size: 13px; line-height: 1.35; color: var(--cams-ps-text); list-style: none; }
.cams-ps .cams-ps-needs li::before { content: ""; position: absolute; left: 10px; top: 50%; width: 8px; height: 5px; margin-top: -4px; border-left: 2px solid var(--cams-ps-accent-ink); border-bottom: 2px solid var(--cams-ps-accent-ink); transform: rotate(-45deg); }
.cams-ps .cams-ps-cta {
	display: inline-block;
	margin-top: 16px;
	padding: 10px 20px;
	border: 1.5px solid var(--cams-ps-accent);
	border-radius: var(--sk-r-m, 20px);
	background: var(--cams-ps-accent);
	color: var(--cams-ps-on-accent);
	font-weight: 700;
	font-size: 15px;
	line-height: 1.3;
	text-decoration: none;
	transition: filter 0.2s, background 0.2s;
}
.cams-ps .cams-ps-cta:hover, .cams-ps .cams-ps-cta:focus-visible { filter: brightness(1.08); color: var(--cams-ps-on-accent); }
.cams-ps .cams-ps-cta.is-secondary { background: transparent; color: var(--cams-ps-text); }
.cams-ps .cams-ps-cta.is-secondary:hover, .cams-ps .cams-ps-cta.is-secondary:focus-visible { filter: none; background: rgba(245, 166, 35, 0.14); background: color-mix(in srgb, var(--cams-ps-accent) 14%, transparent); color: var(--cams-ps-text); }
.cams-ps .cams-ps-cta:focus-visible { outline: 2px solid var(--cams-ps-accent); outline-offset: 2px; }
.cams-ps.cams-ps--charcoal .cams-ps-cta { border-radius: var(--sk-r-s, 6px); }

/* ---------- controls ---------- */
.cams-ps .cams-ps-controls { display: none; }
.cams-ps.is-ready .cams-ps-controls { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.cams-ps .cams-ps-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 0;
	border-radius: 50%;
	background: transparent;
	border: 1px solid var(--cams-ps-line);
	color: var(--cams-ps-text);
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	transition: border-color 0.2s, color 0.2s;
}
.cams-ps .cams-ps-btn:hover { border-color: var(--cams-ps-accent); color: var(--cams-ps-accent-ink); }
.cams-ps .cams-ps-btn:focus { outline: none; }
.cams-ps .cams-ps-btn:focus-visible { border-color: var(--cams-ps-accent); color: var(--cams-ps-accent-ink); outline: 2px solid var(--cams-ps-accent); outline-offset: 2px; }
.cams-ps .cams-ps-toggle { font-size: 11px; letter-spacing: -1px; }
.cams-ps .cams-ps-ico-play { display: none; letter-spacing: 0; font-size: 13px; }
.cams-ps.is-paused .cams-ps-ico-pause { display: none; }
.cams-ps.is-paused .cams-ps-ico-play { display: inline; }
.cams-ps .cams-ps-timer { flex: 1 1 auto; height: 3px; border-radius: var(--sk-r-s, 2px); background: var(--cams-ps-line); overflow: hidden; }
.cams-ps .cams-ps-timer-fill { display: block; width: 100%; height: 100%; background: var(--cams-ps-accent); transform: scaleX(0); transform-origin: left center; }
.cams-ps.no-autoplay .cams-ps-timer { visibility: hidden; }

/* ---------- responsive ----------
   The layout follows the width of the BOX, not the screen, so it fits any Divi column
   (full-width row, half column, sidebar). stepper.js measures the box and adds
   .is-md (medium box) and .is-sm (narrow box). Until the script has run, or if it
   never runs, the layout falls back to the screen width. */
@keyframes camsPsIn { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }

/* before measuring: screen-width fallback */
@media (max-width: 980px) {

		.cams-ps:not(.is-measured) .cams-ps-dot-label { display: none; }
		.cams-ps:not(.is-measured) .cams-ps-panel.has-media {
			grid-template-columns: 110px minmax(0, 1fr);
			grid-template-areas: "media media" "side body";
			padding: 16px 24px 24px;
			gap: 20px 24px;
			align-content: start;
		}
		.cams-ps:not(.is-measured) .cams-ps-media { aspect-ratio: 2.2 / 1; }
}
@media (max-width: 767px) {
		.cams-ps:not(.is-measured) { padding: 20px 16px 16px; border-radius: var(--sk-r-m, 16px); }
		.cams-ps:not(.is-measured) ol.cams-ps-track { margin-bottom: 18px !important; }
		/* more than 10 steps: let the numbers scroll sideways instead of overlapping */
		.cams-ps:not(.is-measured).cams-ps--many .cams-ps-track { overflow-x: auto; scrollbar-width: none; gap: 6px; }
		.cams-ps:not(.is-measured).cams-ps--many .cams-ps-track::before, .cams-ps:not(.is-measured).cams-ps--many .cams-ps-track::after { display: none; }
		.cams-ps:not(.is-measured).cams-ps--many .cams-ps-track-item { flex: 0 0 auto; }
		.cams-ps:not(.is-measured) .cams-ps-track::before, .cams-ps:not(.is-measured) .cams-ps-track::after { top: 13px; }
		.cams-ps:not(.is-measured) .cams-ps-dot-num { width: 28px; height: 28px; font-size: 12px; }
		.cams-ps:not(.is-measured) .cams-ps-panel,
		.cams-ps:not(.is-measured) .cams-ps-panel.has-media { grid-template-columns: minmax(0, 1fr); grid-template-areas: "media" "body"; gap: 14px; padding: 20px; align-items: start; }
		.cams-ps:not(.is-measured) .cams-ps-panel.has-media { padding: 12px 12px 20px; }
		.cams-ps:not(.is-measured) .cams-ps-panel.has-media .cams-ps-panel-body { padding: 0 8px; }
		.cams-ps:not(.is-measured) .cams-ps-panel-side { display: none; }
		.cams-ps:not(.is-measured) .cams-ps-media { aspect-ratio: 2 / 1; border-radius: var(--sk-r-m, 8px); }
		.cams-ps:not(.is-measured) .cams-ps-title { font-size: 22px; }
		.cams-ps:not(.is-measured) .cams-ps-desc { font-size: 15px; }
		.cams-ps:not(.is-measured) .cams-ps-needs li { font-size: 12.5px; }
		.cams-ps:not(.is-measured) .cams-ps-cta { display: block; text-align: center; }
		/* show only the active step so the box fits each step's content */
		.cams-ps:not(.is-measured).is-ready .cams-ps-panel { display: none; transition: none; }
		.cams-ps:not(.is-measured).is-ready .cams-ps-panel.is-active { display: grid; animation: camsPsIn 0.4s ease; }
}

/* header on smaller boxes */
@media (max-width: 767px) {
	.cams-ps:not(.is-measured) .cams-ps-head { margin-bottom: 20px; }
	.cams-ps:not(.is-measured) .cams-ps-head h2.cams-ps-heading { font-size: 24px; }
	.cams-ps:not(.is-measured) .cams-ps-head .cams-ps-lede { font-size: 15px; }
}
.cams-ps.is-md .cams-ps-head h2.cams-ps-heading { font-size: 30px; }
.cams-ps.is-sm .cams-ps-head { margin-bottom: 20px; }
.cams-ps.is-sm .cams-ps-head h2.cams-ps-heading { font-size: 24px; }
.cams-ps.is-sm .cams-ps-head .cams-ps-lede { font-size: 15px; }

/* medium box: image on top, number beside the text */

	.cams-ps.is-md .cams-ps-dot-label { display: none; }
	.cams-ps.is-md .cams-ps-panel.has-media {
		grid-template-columns: 110px minmax(0, 1fr);
		grid-template-areas: "media media" "side body";
		padding: 16px 24px 24px;
		gap: 20px 24px;
		align-content: start;
	}
	.cams-ps.is-md .cams-ps-media { aspect-ratio: 2.2 / 1; }

/* narrow box: one column, only the active step shown */

	.cams-ps.is-sm { padding: 20px 16px 16px; border-radius: var(--sk-r-m, 16px); }
	.cams-ps.is-sm ol.cams-ps-track { margin-bottom: 18px !important; }
	/* more than 10 steps: let the numbers scroll sideways instead of overlapping */
	.cams-ps.is-sm.cams-ps--many .cams-ps-track { overflow-x: auto; scrollbar-width: none; gap: 6px; }
	.cams-ps.is-sm.cams-ps--many .cams-ps-track::before, .cams-ps.is-sm.cams-ps--many .cams-ps-track::after { display: none; }
	.cams-ps.is-sm.cams-ps--many .cams-ps-track-item { flex: 0 0 auto; }
	.cams-ps.is-sm .cams-ps-track::before, .cams-ps.is-sm .cams-ps-track::after { top: 13px; }
	.cams-ps.is-sm .cams-ps-dot-num { width: 28px; height: 28px; font-size: 12px; }
	.cams-ps.is-sm .cams-ps-panel,
	.cams-ps.is-sm .cams-ps-panel.has-media { grid-template-columns: minmax(0, 1fr); grid-template-areas: "media" "body"; gap: 14px; padding: 20px; align-items: start; }
	.cams-ps.is-sm .cams-ps-panel.has-media { padding: 12px 12px 20px; }
	.cams-ps.is-sm .cams-ps-panel.has-media .cams-ps-panel-body { padding: 0 8px; }
	.cams-ps.is-sm .cams-ps-panel-side { display: none; }
	.cams-ps.is-sm .cams-ps-media { aspect-ratio: 2 / 1; border-radius: var(--sk-r-m, 8px); }
	.cams-ps.is-sm .cams-ps-title { font-size: 22px; }
	.cams-ps.is-sm .cams-ps-desc { font-size: 15px; }
	.cams-ps.is-sm .cams-ps-needs li { font-size: 12.5px; }
	.cams-ps.is-sm .cams-ps-cta { display: block; text-align: center; }
	/* show only the active step so the box fits each step's content */
	.cams-ps.is-sm.is-ready .cams-ps-panel { display: none; transition: none; }
	.cams-ps.is-sm.is-ready .cams-ps-panel.is-active { display: grid; animation: camsPsIn 0.4s ease; }

@media (prefers-reduced-motion: reduce) {
	.cams-ps.is-ready .cams-ps-panel,
	.cams-ps .cams-ps-track::after,
	.cams-ps .cams-ps-dot-num { transition: none; transform: none; }
	.cams-ps.is-ready .cams-ps-panel.is-active { animation: none; }
}