/* Content — Program Components (ACTS design, 1312×640 frame)
 * Left: fixed heading + accordion of components. Right: image of the open one. */
.cew-pc{
	--cew-pc-left:48.8%;
	--cew-pc-gap:32px;
	--cew-pc-items-gap:22px;
	--cew-pc-check:#111111;
	--cew-pc-tick:#8C8C8C;
	--cew-pc-line:#D9D9D9;
	--cew-pc-line-active:#31A2FF;
	--cew-pc-line-h:2px;
	--cew-pc-fade:500ms;
	--cew-pc-mobile-img:330px;
	display:grid;
	grid-template-columns:var(--cew-pc-left) minmax(0,1fr);
	column-gap:var(--cew-pc-gap);
	min-height:640px;
	color:#111;
}
.cew-pc *,.cew-pc *::before,.cew-pc *::after{box-sizing:border-box}

.cew-pc-text{display:flex;flex-direction:column;min-width:0}

/* ---------- Fixed heading ---------- */
.cew-pc .cew-pc-head{margin-bottom:78px}
.cew-pc .cew-pc-eyebrow{
	margin:0 0 12px;
	font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
	font-size:14px;
	line-height:1;
	letter-spacing:.04em;
	text-transform:uppercase;
	color:#555;
}
.cew-pc .cew-pc-heading{
	margin:0;
	max-width:640px;
	font-size:40px;
	font-weight:400;
	line-height:1.08;
	letter-spacing:-.02em;
	color:#000;
}

/* ---------- Block (fixed place, content swaps) ---------- */
.cew-pc-block{position:relative}
.cew-pc-panel[hidden]{display:none}
.cew-pc-panel.is-active{animation:cew-pc-in .4s ease both}
@keyframes cew-pc-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.cew-pc .cew-pc-title{margin:0;padding:0;font-size:16px;font-weight:400;line-height:1.3;color:#000;text-transform:none;letter-spacing:0}

.cew-pc .cew-pc-desc{margin:12px 0 0;max-width:480px;font-size:14px;line-height:1.43;color:#555}
.cew-pc .cew-pc-includes{
	margin:26px 0 12px;
	font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
	font-size:12px;
	line-height:1;
	letter-spacing:.04em;
	text-transform:uppercase;
	color:#999;
}

.cew-pc .cew-pc-checks{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin:0;padding:0;list-style:none}
.cew-pc .cew-pc-check{
	display:flex;
	align-items:center;
	gap:8px;
	margin:0;
	padding:0;
	color:var(--cew-pc-check);
	font-size:14px;
	line-height:16px;
	list-style:none;
}
.cew-pc-check::marker{content:none}
.cew-pc-tick{
	flex:none;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:var(--cew-pc-icon,12px);
	height:var(--cew-pc-icon,12px);
	font-size:var(--cew-pc-icon,12px);
	line-height:1;
	color:var(--cew-pc-tick);
	transform:translateY(var(--cew-pc-icon-y,0px));
}
.cew-pc-tick--custom i,
.cew-pc-tick--custom svg{width:1em;height:1em;font-size:inherit;line-height:1;display:block}
.cew-pc-tick--custom svg{fill:currentColor}

/* ---------- Progress line ---------- */
.cew-pc-line{
	position:relative;
	width:100%;
	height:var(--cew-pc-line-h);
	margin:26px 0 22px;
	background:var(--cew-pc-line);
	overflow:hidden;
}
.cew-pc-line-fill{
	position:absolute;
	inset:0;
	background:var(--cew-pc-line-active);
	transform-origin:0 50%;
	/* 1 of 6 → 1/6, 2 of 6 → 2/6 … last → full */
	transform:scaleX(var(--cew-pc-progress,0));
	transition:transform var(--cew-pc-speed,600ms) cubic-bezier(.22,1,.36,1);
}

/* ---------- List below the line (clickable) ---------- */
.cew-pc-list{display:flex;flex-direction:column;align-items:flex-start;gap:var(--cew-pc-items-gap)}
.cew-pc .cew-pc-tab{
	display:block;
	margin:0;
	padding:0;
	border:0;
	border-radius:0;
	background:transparent;
	box-shadow:none;
	color:#4B4B4B;
	font-family:inherit;
	font-size:16px;
	font-weight:400;
	line-height:18px;
	letter-spacing:0;
	text-align:left;
	text-transform:none;
	cursor:pointer;
	transition:color .2s ease;
}
.cew-pc .cew-pc-tab[hidden]{display:none}
.cew-pc .cew-pc-tab:focus{background:transparent;color:#4B4B4B}
.cew-pc .cew-pc-tab:hover,
.cew-pc .cew-pc-tab:focus-visible{background:transparent;color:#000}
.cew-pc .cew-pc-tab:focus{outline:none}
.cew-pc .cew-pc-tab:focus-visible{outline:2px solid var(--cew-pc-line-active);outline-offset:3px}

/* ---------- Image column ---------- */
.cew-pc-media{position:relative;min-height:100%;overflow:hidden;background:#E4E6E2}
.cew-pc-media img{
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	object-fit:cover;
	opacity:0;
	transition:opacity var(--cew-pc-fade) ease;
}
.cew-pc-media img.is-active{opacity:1}

/* per-component image, only used on mobile ("Between checklist and line") */
.cew-pc-item-media{display:none}

@media(max-width:1024px){
	.cew-pc{--cew-pc-left:52%;--cew-pc-gap:24px;min-height:560px}
	.cew-pc .cew-pc-head{margin-bottom:48px}
	.cew-pc .cew-pc-heading{font-size:32px}
}
@media(max-width:767px){
	.cew-pc{
		display:flex;
		flex-direction:column;
		gap:0;
		min-height:0;
	}
	.cew-pc-text{display:contents}
	.cew-pc .cew-pc-head{order:1;margin-bottom:39px}
	.cew-pc-block{order:2}
	.cew-pc-line{order:3}
	.cew-pc-list{order:4}
	.cew-pc-media{order:5;height:var(--cew-pc-mobile-img);min-height:0;margin-top:28px}
	.cew-pc--img-top .cew-pc-media{order:0;margin:0 0 28px}
	.cew-pc--img-middle .cew-pc-media{display:none}
	.cew-pc--img-middle .cew-pc-item-media{
		display:block;
		position:relative;
		height:var(--cew-pc-mobile-img);
		margin-top:20px;
		overflow:hidden;
		background:#E4E6E2;
	}
	.cew-pc-item-media img{display:block;width:100%;height:100%;object-fit:cover}

	/* mobile design (393px frame) */
	.cew-pc .cew-pc-eyebrow{font-size:12px;margin-bottom:5px}
	.cew-pc .cew-pc-heading{font-size:24px;line-height:29px}
	.cew-pc .cew-pc-title{line-height:1.2}
	.cew-pc .cew-pc-desc{max-width:none;margin-top:10px}
	.cew-pc .cew-pc-includes{margin:16px 0 10px}
	.cew-pc--img-middle .cew-pc-item-media{margin-top:18px}
	.cew-pc .cew-pc-line{margin:16px 0 24px}
}
@media(prefers-reduced-motion:reduce){
	.cew-pc-media img,.cew-pc-line-fill{transition:none}
	.cew-pc-panel.is-active{animation:none}
}

/* ---------- On-scroll mode: section held in place while the page scrolls ---------- */
.cew-pc-scroller{position:relative;--cew-pc-top:100px}
.cew-pc-pin{position:-webkit-sticky;position:sticky;top:var(--cew-pc-top)}
.cew-pc-scroller.is-off{height:auto !important}
.cew-pc-scroller.is-off .cew-pc-pin{position:relative;top:auto;transform:none !important}
.cew-pc-scroller.is-transform .cew-pc-pin{position:relative;top:0;will-change:transform}
/* the line follows the scroll (already smoothed in JS) */
.cew-pc.is-live .cew-pc-line-fill{transition:transform 120ms linear}
.cew-pc.is-live .cew-pc-tab{cursor:pointer}

/* ==========================================================
 * "Text stays, images scroll" mode (reference: consultitude.com)
 * Left: all the text stays in place (sticky). Right: the images of
 * the components scroll past; the block shows the one on screen.
 * ========================================================== */
.cew-pc--sticky{
	--cew-pc-top:100px;
	--cew-pc-shot-h:640px;
	--cew-pc-shot-gap:16px;
	align-items:stretch;
	min-height:0;
}
.cew-pc--sticky .cew-pc-side{position:relative;min-width:0}
.cew-pc--sticky .cew-pc-side-in{position:-webkit-sticky;position:sticky;top:var(--cew-pc-top);min-height:min(var(--cew-pc-shot-h), calc(100vh - var(--cew-pc-top)))}
.cew-pc-shots{display:flex;flex-direction:column;gap:var(--cew-pc-shot-gap);min-width:0}
.cew-pc-shot{
	position:relative;
	height:var(--cew-pc-shot-h);
	overflow:hidden;
	background:#E4E6E2;
}
.cew-pc-shot img{
	position:absolute;
	inset:0;
	display:block;
	width:100%;
	height:100%;
	object-fit:cover;
	transform:scale(1.06);
	transition:transform 1.2s cubic-bezier(.22,1,.36,1);
}
.cew-pc-shot.is-seen img{transform:none}
.cew-pc--sticky .cew-pc-tab{cursor:pointer}
.cew-pc--sticky .cew-pc-item-media{display:none}

@media(max-width:767px){
	.cew-pc--sticky .cew-pc-side-in{position:static;min-height:0;display:flex;flex-direction:column}
	.cew-pc--sticky .cew-pc-head{order:1}
	.cew-pc--sticky .cew-pc-block{order:2}
	.cew-pc--sticky .cew-pc-line{order:3}
	.cew-pc--sticky .cew-pc-list{order:4}
	.cew-pc--sticky .cew-pc-shots{display:none}
	.cew-pc--sticky .cew-pc-item-media{
		display:block;
		position:relative;
		height:var(--cew-pc-mobile-img);
		margin-top:18px;
		overflow:hidden;
		background:#E4E6E2;
	}
}
@media(prefers-reduced-motion:reduce){
	.cew-pc-shot img{transition:none;transform:none}
}

/* 3.163.2 — design order: heading → progress line → open component → the other names.
 * (The line used to sit between the open component and the list.) */
.cew-pc .cew-pc-head{order:1}
.cew-pc .cew-pc-line{order:2;margin:0 0 24px}
.cew-pc .cew-pc-block{order:3}
.cew-pc .cew-pc-list{order:4;margin-top:28px}


/* Scroll mode: sequential accordion. The first item opens with image one;
   each scroll advances the expanded details to the next title in-place. */
.cew-pc--scroll .cew-pc-block{display:none !important}
.cew-pc .cew-pc-list--inline{display:flex;flex-direction:column;align-items:stretch;gap:0;margin-top:0}
.cew-pc .cew-pc-inline-item{display:block;margin:0;padding:0}
.cew-pc .cew-pc-inline-title{
	display:block;width:100%;margin:0;padding:0 0 22px;border:0;border-radius:0;
	background:transparent;box-shadow:none;color:#4B4B4B;font:inherit;font-size:16px;
	font-weight:400;line-height:1.25;letter-spacing:0;text-align:left;text-transform:none;
	cursor:pointer;
}
.cew-pc .cew-pc-inline-item.is-active .cew-pc-inline-title{padding-bottom:0;color:#4B4B4B}
.cew-pc .cew-pc-inline-details{padding:0 0 28px;animation:cew-pc-inline-reveal .38s cubic-bezier(.22,1,.36,1) both}
.cew-pc .cew-pc-inline-details[hidden]{display:none}
.cew-pc .cew-pc-inline-details .cew-pc-desc{margin-top:12px}
.cew-pc .cew-pc-inline-details .cew-pc-includes{margin-top:24px}
@keyframes cew-pc-inline-reveal{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.cew-pc .cew-pc-inline-details{animation:none}}


/* Sticky image-scroll mode uses the same sequential component stack:
   active title/details open in place; all other titles remain collapsed above/below. */
.cew-pc--sticky .cew-pc-block{display:none !important}
.cew-pc--sticky .cew-pc-list--inline{display:flex;flex-direction:column;align-items:stretch;gap:0;margin-top:0}
.cew-pc--sticky .cew-pc-inline-item{display:block;margin:0;padding:0}
.cew-pc--sticky .cew-pc-inline-title{
	display:block;width:100%;margin:0;padding:0 0 22px;border:0;border-radius:0;
	background:transparent;box-shadow:none;color:#4B4B4B;font:inherit;font-size:16px;
	font-weight:400;line-height:1.25;letter-spacing:0;text-align:left;text-transform:none;
	cursor:pointer;
}
.cew-pc--sticky .cew-pc-inline-item.is-active .cew-pc-inline-title{padding-bottom:0}
.cew-pc--sticky .cew-pc-inline-details{padding:0 0 28px;animation:cew-pc-inline-reveal .38s cubic-bezier(.22,1,.36,1) both}
.cew-pc--sticky .cew-pc-inline-details[hidden]{display:none}
.cew-pc--sticky .cew-pc-inline-details .cew-pc-desc{margin-top:12px}
.cew-pc--sticky .cew-pc-inline-details .cew-pc-includes{margin-top:24px}
@media(max-width:767px){
	.cew-pc--sticky .cew-pc-block{display:none !important}
	.cew-pc--sticky .cew-pc-list--inline{order:4 !important}
}


/* In sticky mode on small screens, keep the current component's inline image
   visible while suppressing the duplicate fixed text panel. */
@media(max-width:767px){
	.cew-pc--sticky .cew-pc-block{display:block !important;order:0 !important}
	.cew-pc--sticky .cew-pc-block .cew-pc-panel > :not(.cew-pc-item-media){display:none !important}
	.cew-pc--sticky .cew-pc-head{order:1 !important}
	.cew-pc--sticky .cew-pc-line{order:2 !important}
	.cew-pc--sticky .cew-pc-list--inline{order:3 !important}
}

/* V5 mobile layout matched to the mobile Program Components reference:
   heading, progress line, expanded title/description/checklist, associated photo,
   then the remaining closed titles. Desktop CSS and image-scroll remain unchanged. */
.cew-pc-mobile-inline-image{display:none}
@media(max-width:767px){
  .cew-pc--sticky .cew-pc-side-in{position:static!important;transform:none!important;min-height:0!important}
  .cew-pc--sticky .cew-pc-block{display:none!important}
  .cew-pc--sticky .cew-pc-head{order:1!important;margin-bottom:30px}
  .cew-pc--sticky .cew-pc-line{order:2!important;margin:0 0 16px}
  .cew-pc--sticky .cew-pc-list--inline{order:3!important;margin-top:0}
  .cew-pc--sticky .cew-pc-inline-title{font-size:16px;line-height:1.35;padding:0 0 21px}
  .cew-pc--sticky .cew-pc-inline-item.is-active .cew-pc-inline-title{font-size:16px;font-weight:600;padding-bottom:0}
  .cew-pc--sticky .cew-pc-inline-details{padding-bottom:0}
  .cew-pc--sticky .cew-pc-inline-details .cew-pc-desc{font-size:14px;line-height:1.55;margin-top:12px}
  .cew-pc--sticky .cew-pc-inline-details .cew-pc-includes{margin:20px 0 12px}
  .cew-pc--sticky .cew-pc-inline-details .cew-pc-checks{gap:12px}
  .cew-pc--sticky .cew-pc-inline-details .cew-pc-check{line-height:1.35}
  .cew-pc--sticky .cew-pc-mobile-inline-image{
      display:block;width:100%;height:auto;aspect-ratio:1.34;
      overflow:hidden;background:#e4e6e2;margin:22px 0 22px;
  }
  .cew-pc--sticky .cew-pc-mobile-inline-image img{
      display:block;width:100%;height:100%;object-fit:cover;
  }
}

/* Mobile pinned sequence: a constant frame, native sticky where available.
   The fallback is limited to Elementor containers that clip sticky positioning. */
@media(max-width:767px){
  .cew-pc--sticky.cew-pc--mobile-pinned{
    display:block;height:calc(var(--cew-pc-mobile-height) + var(--cew-pc-mobile-travel));
    min-height:0;overflow:visible;overflow-anchor:none;
  }
  .cew-pc--mobile-pinned .cew-pc-side{height:100%;}
  .cew-pc--sticky.cew-pc--mobile-pinned .cew-pc-side-in{
    position:sticky!important;top:var(--cew-pc-mobile-top)!important;
    height:var(--cew-pc-mobile-height);min-height:var(--cew-pc-mobile-height)!important;
    overflow:visible;transform:none!important;will-change:auto!important;
    overflow-anchor:none;
  }
  .cew-pc--sticky.cew-pc--mobile-fallback .cew-pc-side-in{
    position:relative!important;top:0!important;
    transform:translate3d(0,var(--cew-pc-mobile-y,0px),0)!important;will-change:transform!important;
  }
  .cew-pc--mobile-pinned .cew-pc-inline-details{animation:none!important;}
  .cew-pc--mobile-pinned .cew-pc-inline-item{overflow-anchor:none;}
  .cew-pc--mobile-pinned .cew-pc-inline-title{font-weight:400!important;}
  .cew-pc--mobile-pinned .cew-pc-line-fill{transition:transform 160ms linear;}
}

/* 3.169.1 — Mobile, like desktop (design "Program Components 3"): the frame stays in
   place while the data changes. Order: heading, line, the ACTIVE component (title, text,
   includes, photo), then the other names in grey. The active one moves to the top of the
   list; the photo shrinks only if the frame would be taller than the screen. */
@media(max-width:767px){
  .cew-pc--mobile-pinned .cew-pc-head{margin-bottom:24px}
  .cew-pc--mobile-pinned .cew-pc-line{margin:0 0 18px}
  .cew-pc--mobile-pinned .cew-pc-inline-item.is-active{order:-1}
  .cew-pc.cew-pc--mobile-pinned .cew-pc-list .cew-pc-inline-item.is-active .cew-pc-inline-title{font-size:17px!important;line-height:1.35;font-weight:500!important;color:#111!important;padding:0!important;pointer-events:none}
  .cew-pc--mobile-pinned .cew-pc-inline-item:not(.is-active) .cew-pc-inline-title{font-size:16px;line-height:1.35;color:#4B4B4B;padding:0 0 12px}
  .cew-pc--mobile-pinned .cew-pc-inline-details .cew-pc-desc{margin-top:8px}
  .cew-pc--mobile-pinned .cew-pc-inline-details .cew-pc-includes{margin:16px 0 8px}
  .cew-pc--mobile-pinned .cew-pc-inline-details .cew-pc-checks{gap:8px}
  .cew-pc--mobile-pinned .cew-pc-mobile-inline-image{height:var(--cew-pc-mobile-img-h);margin:22px 0 24px}
  .cew-pc--mobile-pinned .cew-pc-inline-details{padding-bottom:0}
}