/*
* Progression Tiles — matched to animation (2).html reference
*
* Breakpoints:
* Mobile: 0–767px (thumb progress, no dots)
* Tablet+: ≥768px (dots centered on each tile, active card lift)
* Desktop: ≥1080px (no-drag cycle lock in JS)
* Wide: ≥1224px (centred 1224px band)
*/

.progression_tiles-section {
	--pt-brand: #0A0A96;
	--pt-accent: #0F24DC;
	--pt-surface: #f1f2f2;
	--pt-card-bg: #f2f2f2;
	--pt-text: #000000;
	--pt-section-bg: #f1f2f2;

	/* Progress */
	--pt-progress-track: #ffffff;
	--pt-progress-node-ring: #ffffff;
	--pt-progress-node-fill: #d5dfda;
	--pt-progress-track-shadow: 0px 1px 2px 0px #0000000F;

	--pt-content-width: 79.5rem;
	--pt-tile-width: 16.875rem;
	--pt-tile-height: 20.0625rem;
	--pt-tile-radius: 1.25rem;
	--pt-gap: 48px;
	--pt-count: 4;
	--pt-count-span: 3;
	--pt-lift: 8px;

	overflow: visible;
}


/* =====================================================
   SECTION BACKGROUND
   ===================================================== */

.progression_tiles-section--bg-white {
	background-color: #fff;

	--pt-section-bg: #ffffff;
	--pt-progress-track: #e4e4e8;
	--pt-progress-node-ring: #ffffff;
	--pt-progress-node-fill: #cfcfd4;
	--pt-progress-track-shadow: 0px 1px 2px 0px #0000000F inset;
}

.progression_tiles-section--bg-grey {
	background-color: var(--pt-surface);

	--pt-section-bg: #f1f2f2;
	--pt-progress-track: #ffffff;

	/* Image jaisa inactive dot */
	--pt-progress-node-ring: #ffffff;
	--pt-progress-node-fill: #d5dfda;

	--pt-progress-track-shadow: 0px 1px 2px 0px #0000000F inset;
}


/* =====================================================
   SECTION PADDING
   ===================================================== */

.progression_tiles-section--pt-none {
	padding-top: 0;
}

.progression_tiles-section--pt-small {
	padding-top: 2.5rem;
}

.progression_tiles-section--pt-large {
	padding-top: 5rem;
}

.progression_tiles-section--pb-none {
	padding-bottom: 0;
}

.progression_tiles-section--pb-small {
	padding-bottom: 2.5rem;
}

.progression_tiles-section--pb-large {
	padding-bottom: 5rem;
}


/* =====================================================
   CONTAINER
   ===================================================== */

/* .progression_tiles-section .pt-container {
	box-sizing: border-box;

	display: flex;
	flex-direction: column;

	gap: 1rem;

	width: 100%;
	max-width: var(--pt-content-width);

	margin-inline: auto;

	padding: 0 1rem;
} */


/* =====================================================
   SCROLL REVEAL
   ===================================================== */

.progression_tiles-section .pt-reveal {
	opacity: 1;
	transform: none;
}

.progression_tiles-section[data-pt-ready]
	.pt-reveal:not(.is-visible) {
	opacity: 0;
	transform: translateY(28px);

	transition:
		opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
		transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.progression_tiles-section[data-pt-ready]
	.pt-reveal.is-visible {
	opacity: 1;
	transform: translateY(0);

	transition:
		opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
		transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.progression_tiles-section[data-pt-ready]
	.pt-reveal-delay-1 {
	transition-delay: 0.1s;
}

.progression_tiles-section[data-pt-ready]
	.pt-reveal-delay-2 {
	transition-delay: 0.2s;
}

.progression_tiles-section[data-pt-ready]
	.pt-reveal-delay-3 {
	transition-delay: 0.3s;
}

.progression_tiles-section[data-pt-ready]
	.pt-reveal-delay-4 {
	transition-delay: 0.4s;
}

.progression_tiles-section[data-pt-ready]
	.pt-reveal-delay-5 {
	transition-delay: 0.5s;
}

.progression_tiles-section[data-pt-ready]
	.pt-reveal-delay-6 {
	transition-delay: 0.6s;
}

.progression_tiles-section[data-pt-ready]
	.pt-progress.pt-reveal:not(.is-visible) {
	transform: none;

	transition:
		opacity 0.6s 0.05s cubic-bezier(0.22, 1, 0.36, 1),
		transform 0.6s 0.05s cubic-bezier(0.22, 1, 0.36, 1);
}

.progression_tiles-section[data-pt-ready]
	.pt-progress.pt-reveal.is-visible {
	transition:
		opacity 0.6s 0.05s cubic-bezier(0.22, 1, 0.36, 1),
		transform 0.6s 0.05s cubic-bezier(0.22, 1, 0.36, 1);
}


/* =====================================================
   PROGRESS BAR — MOBILE
   ===================================================== */

.progression_tiles-section .pt-progress {
	position: relative;
	width: 100%;
	height: 2.5rem;
	overflow: visible;
}

.progression_tiles-section .pt-progress-rail {
	position: absolute;
	left: 1rem;
	right: 1rem;
	top: 0;
	bottom: 0;
}

.progression_tiles-section .pt-progress-bar-bg {
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	z-index: 1;
	height: 10px;
	margin-top: -5px;
	border-radius: 999px;
	background: var(--pt-progress-track);
	box-shadow: var(--pt-progress-track-shadow);
}

.progression_tiles-section .pt-progress-fill {
	position: absolute;
	left: 0;
	top: 50%;
	z-index: 2;
	height: 10px;
	margin-top: -5px;
	width: 0;
	border-radius: 999px;
	background: linear-gradient(
		90deg,
		#0a0a96 0%,
		#0f24dc 100%
	);
	box-shadow:
		0 1px 2px 0 #0000000f inset,
		0 0 6px 0 #0f24dc40;

	transition: width 0.55s ease;
	pointer-events: none;
}

.progression_tiles-section .pt-progress-fill.no-transition {
	transition: none !important;
}


/* =====================================================
   MOBILE PROGRESS THUMB
   ===================================================== */

.progression_tiles-section .pt-progress-thumb {
	display: block;
	position: absolute;
	top: 50%;
	left: 0;
	z-index: 6;
	width: 24px;
	height: 24px;
	border-radius: 999px;
	background: var(--pt-brand);
	pointer-events: none;
	transform: translate(-50%, -50%);
	transition: left 0.55s ease;
}

.progression_tiles-section .pt-progress-thumb::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 10px;
	height: 10px;
	margin: -5px 0 0 -5px;
	border-radius: 999px;
	background: #fff;
}

.progression_tiles-section .pt-progress-thumb.is-active::after {
	width: 12px;
	height: 12px;
	margin: -6px 0 0 -6px;
}

.progression_tiles-section .pt-progress-thumb.no-transition {
	transition: none !important;
}

/* =====================================================
   BUTTON
   ===================================================== */

.h-button .h-button-content {
	font-size: 20px !important;
	line-height: 16px !important;
	letter-spacing: 0% !important;
}

.progression_tiles-section .h-button--secondary {
	border-width: 2px;
	/* padding-left: 0.5rem !important;
	padding-right: 0.5rem !important;
	background-color: transparent !important; */
}


/* =====================================================
   PROGRESS DOT CONTAINER
   ===================================================== */

.progression_tiles-section .pt-progress-nodes {
	position: absolute;
	inset: 0;
	z-index: 10;
	display: none;
	align-items: center;
	justify-content: space-between;
}


/* =====================================================
   DOT BASE
   IMPORTANT:
   Inactive + active dono 20px hain
   ===================================================== */

.progression_tiles-section .pt-progress-node {
	appearance: none;
	box-sizing: border-box;
	position: absolute;
	top: 50%;
	/* Center on each tile in the track (flex-start). */
	left: calc(
		(var(--pt-tile-width) / 2) +
			(var(--pt-index, 0) * (var(--pt-tile-width) + var(--pt-gap)))
	);
	width: 20px;
	height: 20px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #ffffff;
	box-shadow: none;
	transform: translate(-50%, -50%);
	cursor: pointer;
	pointer-events: auto;
	z-index: 21;
	transition:
		background-color 0.45s ease,
		box-shadow 0.45s ease;
}

/* Single tile: center the only node. */
.progression_tiles-section[data-pt-count='1'] .pt-progress-node {
	left: 50%;
}


/* =====================================================
   INACTIVE DOT
   Screenshot:
   Outer = white
   Inner = light grey/green
   ===================================================== */

.progression_tiles-section .pt-progress-node::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 8px;
	height: 8px;
	margin: -4px 0 0 -4px;
	border-radius: 50%;
	background: var(--pt-progress-node-fill);
	opacity: 1;
	pointer-events: none;
}


/* =====================================================
   ACTIVE / PASSED DOT
   Same 20px outer size
   ===================================================== */

.progression_tiles-section .pt-progress-node.is-passed,
.progression_tiles-section .pt-progress-node.is-current {
	width: 20px;
	height: 20px;
	margin: 0;
	border: 0;
	border-radius: 50%;
	background: #0f24dc;
	box-shadow: 0 0 6px 1px #0f24dc50;
	transform: translate(-50%, -50%);
}


/* =====================================================
   ACTIVE WHITE CENTER
   ===================================================== */

.progression_tiles-section .pt-progress-node.is-passed::after,
.progression_tiles-section .pt-progress-node.is-current::after {
	width: 7px;
	height: 7px;
	margin: -3.5px 0 0 -3.5px;
	background: #ffffff;
	opacity: 1;
}


/* =====================================================
   DOT FOCUS
   ===================================================== */

.progression_tiles-section .pt-progress-node:focus-visible {
	outline: 2px solid var(--pt-accent);
	outline-offset: 3px;
}


/* =====================================================
   TABLET+ PROGRESS
   ===================================================== */

@media (min-width: 768px) {

	.progression_tiles-section .pt-progress {
		height: 3rem;
		/* Clip synced overflow rail; nodes stay node-to-node. */
		overflow: hidden;
	}

	.progression_tiles-section .pt-progress-rail {
		left: 0;
		right: 0;
		overflow: visible;
	}

	/* Overflow: rail + nodes match track width and slide with viewport. */
	.progression_tiles-section .pt-progress[data-pt-synced] .pt-progress-rail,
	.progression_tiles-section .pt-progress[data-pt-synced] .pt-progress-nodes {
		left: 0;
		right: auto;
		width: var(--pt-synced-width, 100%);
		transform: translate3d(var(--pt-synced-x, 0px), 0, 0);
		will-change: transform;
		/* No CSS transition — JS drives scroll + rail in the same rAF. */
		transition: none;
	}

	.progression_tiles-section .pt-progress-bar-bg {
		/* Trim empty track before first node / after last node. */
		left: calc(var(--pt-tile-width) / 2);
		right: auto;
		width: calc(var(--pt-count-span) * (var(--pt-tile-width) + var(--pt-gap)));
		height: 10px;
		margin-top: -5px;
		border-radius: 999px;
		background: var(--pt-progress-track);
		box-shadow:
			0px 1px 2px 0px #0000000F inset;
		z-index: 1;
	}

	.progression_tiles-section .pt-progress-fill {
		left: calc(var(--pt-tile-width) / 2);
		right: auto;
		height: 10px;
		margin-top: -5px;
		box-shadow:
			0 0 6px 1px #0f24dc40;
		transition:
			width 8s cubic-bezier(0.4, 0, 0.2, 1);
		z-index: 2;
	}

	.progression_tiles-section[data-pt-count='1'] .pt-progress-bar-bg,
	.progression_tiles-section[data-pt-count='1'] .pt-progress-fill {
		left: 50%;
		width: 0;
	}

	.progression_tiles-section .pt-progress-thumb {
		display: none !important;
	}


	/* =================================================
	   DOT CONTAINER
	   ================================================= */

	.progression_tiles-section .pt-progress-nodes {
		display: block;
		padding: 0;
		inset: 0;
		z-index: 20;
		overflow: visible;
		pointer-events: none;
	}


	/* =================================================
	   ALL DOTS — 20px
	   ================================================= */

	.progression_tiles-section .pt-progress-node {
		appearance: none;
		position: absolute;
		top: 50%;
		/* Center on each tile in the track (flex-start). */
		left: calc(
			(var(--pt-tile-width) / 2) +
				(var(--pt-index, 0) * (var(--pt-tile-width) + var(--pt-gap)))
		);
		width: 20px;
		height: 20px;
		margin: 0;
		padding: 0;
		box-sizing: border-box;
		border: 0;
		border-radius: 50%;
		/* White outer circle */
		background: #ffffff;
		box-shadow: none;
		transform: translate(-50%, -50%);
		cursor: pointer;
		pointer-events: auto;
		z-index: 21;
		transition:
			background-color 0.45s ease,
			box-shadow 0.45s ease;
	}


	/* =================================================
	   INACTIVE DOT
	   WHITE OUTER + LIGHT CENTER
	   ================================================= */

	.progression_tiles-section
		.pt-progress-node::after {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		width: 8px;
		height: 8px;
		margin: -4px 0 0 -4px;
		border-radius: 50%;
		background: var(--pt-progress-node-fill);
		opacity: 1;
		pointer-events: none;
	}


	/* =================================================
	   ACTIVE DOT
	   SAME 20px SIZE
	   ================================================= */

	.progression_tiles-section
		.pt-progress-node.is-passed,

	.progression_tiles-section
		.pt-progress-node.is-current {
		width: 20px;
		height: 20px;
		margin: 0;
		border: 0;
		border-radius: 50%;
		background: #0f24dc;
		box-shadow:
			0 0 6px 1px #0f24dc50;
		transform: translate(-50%, -50%);
	}


	/* =================================================
	   ACTIVE WHITE CENTER
	   ================================================= */

	.progression_tiles-section
		.pt-progress-node.is-passed::after,

	.progression_tiles-section
		.pt-progress-node.is-current::after {
		width: 7px;
		height: 7px;
		margin: -3.5px 0 0 -3.5px;
		background: #ffffff;
		opacity: 1;
	}
}


/* =====================================================
   TILE VIEWPORT
   ===================================================== */

.progression_tiles-section .pt-viewport {
	overflow-x: auto;
	/* hidden (not visible): visible on one axis breaks horizontal scroll in WebKit. */
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	padding:
		var(--pt-lift)
		0
		0.75rem;  
	/* margin: 0 -1rem; */
	margin: 3rem 0 0 0;
	/* padding-left: 1rem;
	padding-right: 1rem; */
	cursor: grab;
	outline: none;
	/* min-height:
		calc(
			var(--pt-tile-height)
			+ var(--pt-lift)
			+ 0.75rem
		); */
}

.progression_tiles-section .pt-viewport::-webkit-scrollbar {
	display: none;
}

.progression_tiles-section .pt-viewport.is-dragging {
	cursor: grabbing;
	scroll-behavior: auto;
	scroll-snap-type: none;
	user-select: none;
}

.progression_tiles-section .pt-viewport.is-desktop-locked {
	cursor: default;
	scroll-snap-type: none;
}

.progression_tiles-section:not([data-pt-overflow])
	.pt-viewport.is-desktop-locked {
	overflow-x: hidden;
}

.progression_tiles-section[data-pt-overflow]
	.pt-viewport.is-desktop-locked {
	overflow-x: auto;
	cursor: grab;
}

.progression_tiles-section .pt-viewport:focus-visible {
	outline: 2px solid var(--pt-accent);
	outline-offset: 4px;
}


/* =====================================================
   TILE TRACK
   ===================================================== */

.progression_tiles-section .pt-track {
	display: flex;
	align-items: stretch;
	justify-content: flex-start;
	width: max-content;
	min-width: 100%;
	gap: var(--pt-gap);
}

.progression_tiles-section .pt-slide {
	position: relative;
	display: flex;
	flex: 0 0 auto;
	width: var(--pt-tile-width);
	/* height: var(--pt-tile-height); */
	scroll-snap-align: start;
	overflow: visible;
}


/* =====================================================
   SLIDE ARROW
   ===================================================== */

.progression_tiles-section .pt-slide-arrow {
	position: absolute;
	top: 50%;
	left:
		calc(
			100%
			+ (var(--pt-gap) / 2)
		);
	z-index: 20;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 19px;
	color: #000000;
	pointer-events: none;
	transform: translate(-50%, -50%);
}

.progression_tiles-section .pt-slide-arrow svg {
	display: block;
	width: 30px;
	height: 19px;
}


/* =====================================================
   TILE CARD
   ===================================================== */

.progression_tiles-section .pt-tile {
	row-gap: 10px; 
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	/* min-height: var(--pt-tile-height);
	max-height: var(--pt-tile-height); */
	margin: 0;
	padding: 1rem;
	overflow: hidden;
	/* background: var(--pt-card-bg); */
	border: 3px solid var(--pt-brand);
	border-radius: var(--pt-tile-radius);
	box-shadow: 2px 2px 0 0 #0a0a96;
	color: var(--pt-text);
	transform: translateY(0);
	transition:
		background-color 2.2s cubic-bezier(0.4, 0, 0.2, 1),
		border-color 2.2s cubic-bezier(0.4, 0, 0.2, 1),
		box-shadow 2.2s cubic-bezier(0.4, 0, 0.2, 1),
		transform 2.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.progression_tiles-section .pt-tile:hover {
	background: #fff;
	border-color: #0F24DC;
	box-shadow: 3px 3px 0 0 #0F24DC;
}

.progression_tiles-section .pt-tile.is-active {
	background: #fff;
	border-color: #0F24DC;
	box-shadow: 3px 3px 0 0 #0F24DC;
}
.progression_tiles-section .pt-tile.is-active .pt-tile-number{ 
	border-color: var(--pt-accent); 
	color: var(--pt-accent);
}


/* =====================================================
   TILE NUMBER
   ===================================================== */

.progression_tiles-section .pt-tile-number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: flex-start;
	box-sizing: border-box;
	/* width: 3rem; */
	height: 3.75rem;
	min-width: 3rem;
	margin: 0;
	padding: 0.75rem;
	border: 3px solid var(--pt-brand);
	border-radius: 0.375rem;
	background: #fff;
	color: var(--pt-brand);
	font-family:
		'New Grotesk Square',
		'New Grotesk Square Fallback',
		sans-serif;
	font-size: 2.25rem;
	font-weight: 500;
	line-height: 1.25rem;
}


/* =====================================================
   TILE HEADING
   ===================================================== */

.progression_tiles-section .pt-tile-heading {
	margin: 0px;
	color: var(--pt-brand);
	font-family:
		'Founders Grotesk Medium',
		'Founders Grotesk Medium Fallback',
		sans-serif;
	font-size: 1.625rem;
	font-weight: 500;
	line-height: 1.875rem;
	letter-spacing: 0%;
	text-transform: uppercase;
	/* white-space: nowrap; */
	overflow: hidden;
	/* text-overflow: ellipsis; */
	transition:
		color 2.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.progression_tiles-section .pt-tile:hover
	.pt-tile-heading,

.progression_tiles-section .pt-tile.is-active
	.pt-tile-heading {
	color: #0F24DC;
}


/* =====================================================
   TILE ICON
   ===================================================== */

.progression_tiles-section .pt-tile-icon-row {
	display: flex;
	align-items: flex-start;;
	gap: 8px;
	/* margin: 0.75rem 0 0; */
	color: var(--pt-brand);
}

.progression_tiles-section .pt-tile-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 1.25rem;
	height: 1.25rem;
	color: var(--pt-brand);
}

.progression_tiles-section .pt-tile-icon svg {
	display: block;
	width: 100%;
	height: 100%;
	color: #0F24DC;
}

.progression_tiles-section .pt-tile-icon-text {
	font-family:
		'Founders Grotesk Regular',
		'Founders Grotesk Regular Fallback',
		sans-serif;
	font-size: 1.125rem;
	font-weight: 400;
	line-height: 1.25rem;
	color: #000000;
}


/* =====================================================
   TILE DESCRIPTION
   ===================================================== */

.progression_tiles-section .pt-tile-description {
	margin: 1rem 0 0;
	font-family:
		'Founders Grotesk Regular',
		'Founders Grotesk Regular Fallback',
		sans-serif;
	font-size: 1.125rem;
	font-weight: 400;
	line-height: 1;
	color: var(--pt-text);
	display: -webkit-box;
	-webkit-box-orient: vertical;
	/* -webkit-line-clamp: 2; */ 
	overflow: hidden;
}


/* =====================================================
   TILE LINK
   ===================================================== */

.progression_tiles-section .pt-tile-link-wrap {
	margin-top: auto;
	padding-top: 1.5rem;
}

.progression_tiles-section .pt-tile-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--pt-accent);
	font-family:
		'Founders Grotesk Medium',
		'Founders Grotesk Medium Fallback',
		sans-serif;
	font-size: 1.25rem;
	font-weight: 500;
	line-height: 1.25rem;
	text-decoration: none;
	transition: color 0.2s ease;
}

.progression_tiles-section .pt-tile-link:hover,
.progression_tiles-section .pt-tile-link:focus {
	color: var(--pt-accent);
}

.progression_tiles-section .pt-tile-link-arrow {
	display: inline-block;
	transition:
		transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.progression_tiles-section .pt-tile-link:hover
	.pt-tile-link-arrow,

.progression_tiles-section .pt-tile-link:focus
	.pt-tile-link-arrow {
	transform: translateX(6px);
}

.progression_tiles-section .pt-tile-link:focus-visible {
	outline: 2px solid var(--pt-accent);
	outline-offset: 3px;
}


/* =====================================================
   FOOTER CTA
   ===================================================== */

.progression_tiles-section .pt-footer {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1rem;
	margin-top: 0.75rem;
	text-align: left;
}

.progression_tiles-section .pt-cta-text {
	margin: 0;
	max-width: 40rem;
	color: var(--pt-text);
	font-family:
		'Founders Grotesk Medium',
		'Founders Grotesk Medium Fallback',
		sans-serif;
	font-size: 20px;
	font-weight: 500;
	line-height: 1.35;
	text-align: left;
}

.progression_tiles-section .pt-ctas {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0.75rem;
	width: 100%;
}

.progression_tiles-section .pt-cta {
	width: 100%;
}

.progression_tiles-section .pt-cta .h-button {
	width: 100%;
	justify-content: center;
}


/* =====================================================
   MOBILE ≤500px
   ===================================================== */

@media (max-width: 500px) {

	.progression_tiles-section {
		--pt-tile-width: 16.875rem;
		--pt-tile-height: 20.0625rem;
		--pt-tile-radius: 1.25rem;
		--pt-gap: 60px;
		--pt-card-bg: #ffffff;

		overflow: visible;
	}

	/* .progression_tiles-section .pt-container {
		overflow: visible;
	} */

	.progression_tiles-section .pt-viewport {
		margin: 3rem 0 0 0;
		/* padding-top: 40px; */
		/* padding-right: 24px; */
		padding-bottom: 80px;
		/* padding-left: 24px; */
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: 24px;
	}

	.progression_tiles-section .pt-track {
		gap: 60px;
		overflow: visible;
	}

	.progression_tiles-section .pt-slide {
		position: relative;
		width: var(--pt-tile-width);
		height: auto;
		/* height: var(--pt-tile-height); */
		overflow: visible;
		scroll-snap-align: center;
		scroll-snap-stop: always;
	}

	.progression_tiles-section .pt-slide-arrow {
		display: none !important;
	}


	/* Mobile arrow */
	.progression_tiles-section
		.pt-slide:not(:last-child)::after {
		content: '';
		position: absolute;
		top: 50%;
		left:
			calc(
				100%
				+ (var(--pt-gap) / 2)
			);
		z-index: 40;
		width: 30px;
		height: 19px;
		transform: translate(-50%, -50%);
		pointer-events: none;
		background-repeat: no-repeat;
		background-position: center;
		background-size: 30px 19px;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='19' viewBox='0 0 38 22' fill='none'%3E%3Cpath d='M0 11H34' stroke='%23111111' stroke-width='3'/%3E%3Cpath d='M25 1L35 11L25 21' stroke='%23111111' stroke-width='3'/%3E%3C/svg%3E");
	}


	/* Mobile tile */
	.progression_tiles-section .pt-tile {
		padding: 1rem;
		/* background: #ffffff; */
		border: 3px solid var(--pt-brand);
		border-radius: var(--pt-tile-radius);
		box-shadow: 2px 2px 0 0 #0a0a96;
		height: auto;
		/* min-height: var(--pt-tile-height); */
		/* max-height: var(--pt-tile-height); */
		position: relative;
		z-index: 1;
		transition:
			opacity 0.35s ease,
			background-color 2.2s cubic-bezier(0.4, 0, 0.2, 1),
			border-color 2.2s cubic-bezier(0.4, 0, 0.2, 1),
			box-shadow 2.2s cubic-bezier(0.4, 0, 0.2, 1),
			transform 2.2s cubic-bezier(0.4, 0, 0.2, 1);
	}

	.progression_tiles-section .pt-tile:hover,
	.progression_tiles-section .pt-tile.is-active {
		background: #ffffff;
		border-color: #0F24DC;
		box-shadow: 3px 3px 0 0 #0F24DC;
	}

	.progression_tiles-section .pt-tile-number {
		/* width: 3rem; */
		height: 3.75rem;
		padding: 0.75rem;
		border: 3px solid var(--pt-brand);
		border-radius: 0.375rem;
		background: #ffffff;
		color: var(--pt-brand);
		font-size: 2.25rem;
		line-height: 1.25rem;
	}

	.progression_tiles-section .pt-tile-heading {
		margin-top: 1.25rem;
		font-size: 1.625rem;
		line-height: 1.875rem;
		color: var(--pt-brand);
	}

	.progression_tiles-section .pt-tile:hover
		.pt-tile-heading,

	.progression_tiles-section .pt-tile.is-active
		.pt-tile-heading {
		color: #0F24DC;
	}

	.progression_tiles-section .pt-tile-icon-row {
		margin-top: 0.75rem;
		gap: 0.625rem;
		color: var(--pt-brand);
	}

	.progression_tiles-section .pt-tile-icon-text {
		font-size: 1.125rem;
		line-height: 1.25rem;
		color: var(--pt-brand);
	}

	.progression_tiles-section .pt-tile-description {
		margin-top: 1rem;
		font-size: 1.125rem;
		line-height: 1;
		color: var(--pt-text);
		/* -webkit-line-clamp: 2;
		line-clamp: 2; */
	}

	.progression_tiles-section .pt-tile-link {
		font-size: 1.25rem;
		line-height: 1.25rem;
		color: var(--pt-brand);
	}

	.progression_tiles-section .pt-tile-link-wrap {
		padding-top: 1.5rem;
	}
}


/* =====================================================
   TABLET+ ≥768px
   ===================================================== */

@media (min-width: 768px) {

	/* .progression_tiles-section .pt-container {
		padding: 0 1.5rem;

		gap: 1rem;
	} */

	.progression_tiles-section .pt-viewport {
		/* margin: 0 -1.5rem; */
		margin: 3rem 0 0 0;
		/* padding-left: 1.5rem;
		padding-right: 1.5rem; */
	}

	.progression_tiles-section .pt-tile.is-active {
		transform:
			translateY(
				calc(
					var(--pt-lift) * -1
				)
			);
	}

	.progression_tiles-section .pt-footer {
		align-items: flex-start;
		text-align: left;
	}

	.progression_tiles-section .pt-ctas {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		width: auto;
	}

	.progression_tiles-section .pt-cta {
		width: auto;
	}

	.progression_tiles-section .pt-cta .h-button {
		width: auto;
	}
}


/* =====================================================
   DESKTOP ≥1224px
   ===================================================== */

@media (min-width: 1224px) {

	/* .progression_tiles-section .pt-container {
		padding: 0;
		margin-inline: auto;

		max-width: var(--pt-content-width);
	} */

	.progression_tiles-section .pt-viewport {
		/* margin: 0; */
		margin: 3rem 0 0 0;
		padding-left: 0;
		padding-right: 0;
	}

	.progression_tiles-section:not([data-pt-overflow])
		.pt-track {
		justify-content: center;
		width: 100%;
	}

	/* Match centered track: nodes + bar sit on each tile center. */
	.progression_tiles-section:not([data-pt-overflow])[data-pt-count]:not([data-pt-count='1'])
		.pt-progress-node {
		left: calc(
			50% -
				(
					(var(--pt-count) * var(--pt-tile-width)) +
						(var(--pt-count-span) * var(--pt-gap))
				) /
					2 +
				(var(--pt-tile-width) / 2) +
				(var(--pt-index, 0) * (var(--pt-tile-width) + var(--pt-gap)))
		);
	}

	.progression_tiles-section:not([data-pt-overflow])[data-pt-count]:not([data-pt-count='1'])
		.pt-progress-bar-bg,
	.progression_tiles-section:not([data-pt-overflow])[data-pt-count]:not([data-pt-count='1'])
		.pt-progress-fill {
		left: calc(
			50% -
				(
					(var(--pt-count) * var(--pt-tile-width)) +
						(var(--pt-count-span) * var(--pt-gap))
				) /
					2 +
				(var(--pt-tile-width) / 2)
		);
	}

	.progression_tiles-section:not([data-pt-overflow])[data-pt-count]:not([data-pt-count='1'])
		.pt-progress-bar-bg {
		width: calc(var(--pt-count-span) * (var(--pt-tile-width) + var(--pt-gap)));
	}

	.progression_tiles-section[data-pt-overflow]
		.pt-track {
		justify-content: flex-start;
	}

	.progression_tiles-section .pt-footer {
		align-items: center;
		text-align: center;
	}
}


/* =====================================================
   BELOW 1224px
   ===================================================== */

@media (max-width: 1223px) {

	/* .progression_tiles-section .pt-container {
		margin-inline: 0;

		max-width: none;
	} */

	.progression_tiles-section .pt-track {
		justify-content: flex-start;
	}
}


/* =====================================================
   REDUCED MOTION
   ===================================================== */

@media (prefers-reduced-motion: reduce) {

	.progression_tiles-section .pt-reveal,
	.progression_tiles-section .pt-progress.pt-reveal {
		transform: none;

		transition: none !important;
	}

	.progression_tiles-section .pt-progress-fill,
	.progression_tiles-section .pt-progress-thumb,
	.progression_tiles-section .pt-progress-node,
	.progression_tiles-section .pt-tile,
	.progression_tiles-section .pt-tile-heading,
	.progression_tiles-section .pt-tile-link-arrow {
		transition: none !important;
	}

	.progression_tiles-section .pt-viewport {
		scroll-behavior: auto;
	}

	.progression_tiles-section .pt-tile.is-active {
		transform: none;
	}
}