.fpg-projects,
.fpg-projects * { box-sizing: border-box; }

.fpg-projects {
	--fpg-navy: #2f3c61;
	--fpg-deep: #202a46;
	--fpg-coral: #fa9572;
	--fpg-ink: #172039;
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: clamp(68px, 8vw, 110px) 22px clamp(70px, 8vw, 105px);
	color: var(--fpg-ink);
	background: linear-gradient(145deg, #fafcff 0%, #f3f6fb 58%, #fff6f2 100%);
	font-family: Inter, "DM Sans", Arial, sans-serif;
}

.fpg-projects a,
.fpg-projects a:hover,
.fpg-projects a:focus,
.fpg-projects a:visited { text-decoration: none !important; }

.fpg-grid-bg {
	position: absolute;
	inset: 0;
	z-index: -3;
	background-image:
		linear-gradient(rgba(47,60,97,.045) 1px, transparent 1px),
		linear-gradient(90deg, rgba(47,60,97,.045) 1px, transparent 1px);
	background-size: 42px 42px;
	mask-image: linear-gradient(to bottom, #000, transparent 84%);
}

.fpg-glow {
	position: absolute;
	z-index: -2;
	border-radius: 50%;
	pointer-events: none;
}

.fpg-glow-one {
	top: -230px;
	right: -150px;
	width: 580px;
	height: 580px;
	background: rgba(250,149,114,.2);
	filter: blur(14px);
}

.fpg-glow-two {
	top: 580px;
	left: -300px;
	width: 650px;
	height: 650px;
	background: rgba(47,60,97,.09);
	filter: blur(20px);
}

.fpg-shell {
	position: relative;
	width: min(100%, 1240px);
	margin: 0 auto;
}

.fpg-hero {
	margin-bottom: clamp(43px, 6vw, 70px);
	text-align: left;
}

.fpg-breadcrumb {
	display: flex;
	gap: 9px;
	align-items: center;
	margin-bottom: 31px;
	color: #8992a6;
	font-size: 13px;
	font-weight: 650;
}

.fpg-breadcrumb a { color: #727d95; }
.fpg-breadcrumb strong { color: var(--fpg-navy); }

.fpg-heading-row {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(310px, .65fr);
	gap: clamp(45px, 8vw, 110px);
	align-items: end;
}

.fpg-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin-bottom: 17px;
	color: var(--fpg-navy);
	font-size: 12px;
	font-weight: 850;
	letter-spacing: .13em;
	text-transform: uppercase;
}

.fpg-eyebrow i {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--fpg-coral);
	box-shadow: 0 0 0 5px rgba(250,149,114,.13);
}

.fpg-heading-row h1 {
	max-width: 820px;
	margin: 0;
	color: var(--fpg-ink);
	font-size: clamp(47px, 6vw, 76px);
	font-weight: 760;
	letter-spacing: -.058em;
	line-height: .99;
}

.fpg-heading-row h1 em {
	color: var(--fpg-navy);
	font-style: normal;
}

.fpg-heading-row > p {
	margin: 0 0 4px;
	color: #667188;
	font-size: 15px;
	line-height: 1.75;
}

.fpg-project-count {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	margin-top: 30px;
	color: #778197;
	font-size: 12px;
	font-weight: 650;
}

.fpg-project-count strong {
	color: var(--fpg-navy);
	font-size: 18px;
}

.fpg-project-count i {
	width: 4px;
	height: 4px;
	margin: 0 5px;
	border-radius: 50%;
	background: var(--fpg-coral);
}

.fpg-project-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 17px;
}

.fpg-card {
	display: flex;
	min-width: 0;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid rgba(255,255,255,.92);
	border-radius: 22px;
	background: rgba(255,255,255,.72);
	box-shadow: 0 17px 43px rgba(47,60,97,.075);
	-webkit-backdrop-filter: blur(18px);
	backdrop-filter: blur(18px);
	transition: transform .23s ease, box-shadow .23s ease, border-color .23s ease;
}

.fpg-card:hover {
	border-color: rgba(250,149,114,.3);
	transform: translateY(-5px);
	box-shadow: 0 25px 55px rgba(47,60,97,.13);
}

.fpg-image {
	position: relative;
	display: block;
	aspect-ratio: 1.34 / 1;
	overflow: hidden;
	color: #fff;
	background:
		radial-gradient(circle at 82% 5%, rgba(250,149,114,.42), transparent 35%),
		linear-gradient(145deg, var(--fpg-navy), var(--fpg-deep));
}

.fpg-image:after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(22,30,52,.4), transparent 48%);
	pointer-events: none;
}

.fpg-image img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none !important;
	object-fit: cover;
	object-position: center top;
	transition: transform .5s ease;
}

.fpg-card:hover .fpg-image img { transform: scale(1.045); }

.fpg-image-fallback {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	color: rgba(255,255,255,.4);
}

.fpg-image-fallback svg {
	width: 53px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.25;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.fpg-industry {
	position: absolute;
	left: 12px;
	bottom: 12px;
	z-index: 2;
	max-width: calc(100% - 59px);
	padding: 7px 10px;
	overflow: hidden;
	border: 1px solid rgba(255,255,255,.34);
	border-radius: 9px;
	color: #fff;
	background: rgba(31,42,70,.58);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	font-size: 11px;
	font-weight: 750;
	line-height: 1;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.fpg-view-icon {
	position: absolute;
	right: 12px;
	bottom: 12px;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 31px;
	height: 31px;
	border: 1px solid rgba(255,255,255,.35);
	border-radius: 10px;
	color: #fff;
	background: rgba(31,42,70,.55);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	font-size: 14px;
}

.fpg-card-body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 19px 18px 17px;
}

.fpg-card-heading {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 10px;
	align-items: start;
}

.fpg-card-heading h2 {
	margin: 0 0 11px;
	color: var(--fpg-navy);
	font-size: clamp(17px, 1.4vw, 20px);
	font-weight: 790;
	letter-spacing: -.028em;
	line-height: 1.28;
}

.fpg-card-heading h2 a {
	display: -webkit-box;
	overflow: hidden;
	color: inherit;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.fpg-card-heading > span {
	padding-top: 3px;
	color: #979eae;
	font-size: 11px;
	font-weight: 750;
}

.fpg-card-body > p {
	display: -webkit-box;
	margin: 0 0 20px;
	overflow: hidden;
	color: #6b758b;
	font-size: 12px;
	line-height: 1.68;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}

.fpg-card-footer {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	align-items: center;
	margin-top: auto;
	padding-top: 14px;
	border-top: 1px solid rgba(47,60,97,.08);
}

.fpg-card-footer > span,
.fpg-card-footer > a {
	display: inline-flex;
	gap: 5px;
	align-items: center;
	font-size: 11px;
	font-weight: 700;
}

.fpg-card-footer > span {
	max-width: 55%;
	overflow: hidden;
	color: #7e879a;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.fpg-card-footer > a {
	color: var(--fpg-navy);
	white-space: nowrap;
}

.fpg-card-footer svg {
	width: 14px;
	fill: none;
	stroke: var(--fpg-coral);
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.fpg-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	justify-content: center;
	margin-top: 48px;
}

.fpg-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 43px;
	height: 43px;
	padding: 0 14px;
	border: 1px solid rgba(47,60,97,.1);
	border-radius: 12px;
	color: var(--fpg-navy);
	background: rgba(255,255,255,.72);
	box-shadow: 0 8px 20px rgba(47,60,97,.05);
	font-size: 12px;
	font-weight: 750;
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	transition: transform .2s ease, background .2s ease;
}

.fpg-pagination .page-numbers:hover,
.fpg-pagination .page-numbers:focus-visible {
	color: var(--fpg-navy);
	background: #fff;
	transform: translateY(-2px);
	outline: none;
}

.fpg-pagination .page-numbers.current {
	border-color: var(--fpg-navy);
	color: #fff;
	background: var(--fpg-navy);
}

.fpg-pagination .dots {
	border-color: transparent;
	background: transparent;
	box-shadow: none;
}

.fpg-empty {
	padding: 75px 25px;
	border: 1px solid rgba(255,255,255,.9);
	border-radius: 25px;
	background: rgba(255,255,255,.67);
	box-shadow: 0 20px 55px rgba(47,60,97,.08);
	text-align: center;
}

.fpg-empty-icon {
	display: grid;
	place-items: center;
	width: 62px;
	height: 62px;
	margin: 0 auto 20px;
	border: 1px solid rgba(250,149,114,.27);
	border-radius: 18px;
	color: var(--fpg-coral);
	background: rgba(250,149,114,.11);
}

.fpg-empty-icon svg {
	width: 29px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
}

.fpg-empty h2 {
	margin: 0 0 10px;
	color: var(--fpg-navy);
	font-size: 28px;
}

.fpg-empty p {
	margin: 0;
	color: #707b91;
	font-size: 14px;
}

.fpg-bottom-cta {
	display: flex;
	justify-content: space-between;
	gap: 35px;
	align-items: center;
	margin-top: clamp(58px, 7vw, 85px);
	padding: clamp(27px, 4vw, 43px);
	border: 1px solid rgba(255,255,255,.15);
	border-radius: 25px;
	color: #fff;
	background:
		radial-gradient(circle at 86% 0%, rgba(250,149,114,.3), transparent 32%),
		linear-gradient(145deg, var(--fpg-navy), var(--fpg-deep));
	box-shadow: 0 24px 60px rgba(47,60,97,.17);
}

.fpg-bottom-cta span,
.fpg-bottom-cta strong { display: block; }

.fpg-bottom-cta span {
	margin-bottom: 7px;
	color: var(--fpg-coral);
	font-size: 11px;
	font-weight: 850;
	letter-spacing: .11em;
	text-transform: uppercase;
}

.fpg-bottom-cta strong {
	max-width: 700px;
	font-size: clamp(21px, 2.4vw, 31px);
	letter-spacing: -.035em;
}

.fpg-bottom-cta > a {
	display: inline-flex;
	flex: 0 0 auto;
	gap: 9px;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 0 20px;
	border-radius: 15px;
	color: var(--fpg-navy);
	background: #fff;
	box-shadow: 0 12px 28px rgba(0,0,0,.12);
	font-size: 12px;
	font-weight: 800;
	transition: transform .2s ease, box-shadow .2s ease;
}

.fpg-bottom-cta > a:hover,
.fpg-bottom-cta > a:focus-visible {
	color: var(--fpg-navy);
	transform: translateY(-2px);
	box-shadow: 0 16px 32px rgba(0,0,0,.18);
	outline: none;
}

.fpg-bottom-cta svg {
	width: 17px;
	fill: none;
	stroke: var(--fpg-coral);
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

@media (max-width: 1024px) {
	.fpg-shell { width: min(100%, 860px); }
	.fpg-heading-row { grid-template-columns: 1fr; gap: 20px; }
	.fpg-heading-row h1 { max-width: 790px; font-size: clamp(50px, 8vw, 70px); }
	.fpg-heading-row > p { max-width: 620px; }
	.fpg-project-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; }
	.fpg-card-body { padding: 17px 15px 16px; }
	.fpg-card-heading h2 { font-size: 17px; }
	.fpg-card-footer > a { font-size: 0; }
	.fpg-card-footer > a svg { width: 17px; }
}

@media (max-width: 767px) {
	.fpg-projects { padding: 50px 12px 58px; }
	.fpg-grid-bg { background-size: 34px 34px; }
	.fpg-hero { margin-bottom: 35px; text-align: left; }
	.fpg-breadcrumb { margin-bottom: 24px; font-size: 12px; }
	.fpg-eyebrow { font-size: 11px; }
	.fpg-heading-row h1 { font-size: clamp(40px, 12.5vw, 55px); }
	.fpg-heading-row > p { font-size: 14px; }
	.fpg-project-count { margin-top: 23px; font-size: 11px; }

	.fpg-project-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}

	.fpg-card { border-radius: 16px; }
	.fpg-image { aspect-ratio: 1.15 / 1; }
	.fpg-industry { left: 8px; bottom: 8px; max-width: calc(100% - 45px); padding: 6px 7px; border-radius: 7px; font-size: 11px; }
	.fpg-view-icon { right: 8px; bottom: 8px; width: 27px; height: 27px; border-radius: 8px; font-size: 12px; }
	.fpg-card-body { padding: 13px 10px 12px; }
	.fpg-card-heading { gap: 5px; }
	.fpg-card-heading h2 { margin-bottom: 8px; font-size: clamp(14px, 4.2vw, 16px); }
	.fpg-card-heading > span { font-size: 10px; }
	.fpg-card-body > p { margin-bottom: 14px; font-size: 12px; line-height: 1.55; -webkit-line-clamp: 2; }
	.fpg-card-footer { display: block; padding-top: 10px; }
	.fpg-card-footer > span { max-width: 100%; font-size: 11px; }
	.fpg-card-footer > a { display: none; }

	.fpg-pagination { gap: 5px; margin-top: 36px; }
	.fpg-pagination .page-numbers { min-width: 38px; height: 38px; padding: 0 10px; border-radius: 10px; font-size: 11px; }
	.fpg-pagination .prev,
	.fpg-pagination .next { font-size: 0; }
	.fpg-pagination .prev span,
	.fpg-pagination .next span { font-size: 15px; }

	.fpg-bottom-cta { display: block; margin-top: 50px; padding: 28px 22px; border-radius: 21px; text-align: left; }
	.fpg-bottom-cta span { font-size: 11px; }
	.fpg-bottom-cta > a { width: 100%; margin-top: 22px; }
}

@media (max-width: 380px) {
	.fpg-projects { padding-right: 9px; padding-left: 9px; }
	.fpg-project-grid { gap: 7px; }
	.fpg-card-body { padding-right: 9px; padding-left: 9px; }
}

@media (prefers-reduced-motion: reduce) {
	.fpg-projects *,
	.fpg-projects *:before,
	.fpg-projects *:after {
		scroll-behavior: auto !important;
		transition: none !important;
	}
}