.projectViewMain h1,
.projectViewMain h2,
.projectViewMain h3,
.projectViewMain p,
.projectViewMain dd {
	word-break: keep-all;
	overflow-wrap: break-word;
}
.projectViewMain .projectSectionHeading {
	display: block;
}
.projectDetailHero {
	min-height: clamp(520px, 34vw, 660px);
	position: relative;
	overflow: hidden;
	background: #102a40;
	color: #fff;
}
.projectDetailHero > img {
	position: absolute;
	right: 0;
	top: 0;
	width: 54%;
	height: 100%;
	object-fit: cover;
}
.projectDetailHero > .projectDetailFactory {
	width: 100%;
	opacity: 0.32;
}
.projectDetailHero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		90deg,
		#102a40b8 0%,
		#102a40b0 25%,
		#102a4090 40%,
		#102a4030 58%,
		transparent 70%
	);
}
.projectDetailHeroCopy {
	position: relative;
	z-index: 1;
	padding-block: clamp(100px, 7vw, 140px);
}
.projectDetailCategory {
	display: inline-block;
	color: #244c70;
	background: #eff7ff;
	padding: 8px 20px;
	font-size: 16px;
	border-radius: 40px;
	font-weight: 900;
	line-height: 1.4;
}
.projectDetailHero h1 {
	max-width: 720px;
	font-size: clamp(36px, 3.4vw, 60px);
	line-height: 1.3;
	font-weight: 900;
	letter-spacing: -0.04em;
	margin: 28px 0;
}
.projectDetailHero h1 span {
	display: block;
}
.projectDetailHero p {
	max-width: 640px;
	font-size: clamp(17px, 1.25vw, 22px);
	color: #c2d0dd;
	line-height: 1.7;
	white-space: normal;
	font-weight: 500;
}
.projectMetadata {
	border-bottom: 1px solid #f0f4f8;
	padding-block: 44px;
	display: grid;
	grid-template-columns: 1fr 1.4fr 1fr;
	gap: 32px;
}
.projectMetadata > div {
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 20px;
}
.projectMetadata > div:last-child .projectMetadataIcon {
	display: none;
}
.projectMetadataIcon {
	flex: 0 0 auto;
	color: #2784ff;
	line-height: 1;
}
.projectMetadataIcon svg {
	width: 44px;
	height: 44px;
}
.projectMetadata dt {
	font-size: 15px;
	line-height: 1.5;
	color: #647284;
	margin-bottom: 6px;
	font-weight: 500;
}
.projectMetadata dd {
	font-size: clamp(18px, 1.25vw, 22px);
	line-height: 1.5;
	color: #283448;
	font-weight: 900;
}
.projectOverview {
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	align-items: center;
	gap: 64px;
	padding-block: var(--projectSectionSpace);
}
.projectOverview > div > p {
	font-size: clamp(17px, 1.25vw, 22px);
	line-height: 1.75;
	color: #647284;
	font-weight: 500;
	margin-top: 32px;
}
.projectOverview > img {
	width: 100%;
	aspect-ratio: 1.1;
	max-height: 560px;
	object-fit: cover;
	border-radius: 16px;
}
.projectSpecificationSpace {
	height: clamp(180px, 26vw, 480px);
}
.projectSolution {
	padding-block: var(--projectSectionSpace);
}
.projectSolutionContent {
	display: grid;
	grid-template-columns: 1.6fr 1fr;
	align-items: center;
	gap: 56px;
	margin-top: 40px;
}
.projectSolutionContent > img {
	width: 100%;
	aspect-ratio: 1.5;
	object-fit: cover;
	border-radius: 16px;
}
.projectSolutionContent ol {
	display: grid;
	gap: 36px;
}
.projectSolutionContent li {
	display: flex;
	gap: 24px;
}
.projectSolutionContent li > span {
	color: #277dff;
	font-weight: 900;
	font-size: 22px;
	line-height: 1.5;
}
.projectSolutionContent h3 {
	font-size: clamp(20px, 1.4vw, 25px);
	line-height: 1.5;
	letter-spacing: -0.035em;
}
.projectSolutionContent p {
	font-size: clamp(16px, 1.1vw, 20px);
	line-height: 1.7;
	color: #647284;
	white-space: normal;
	margin-top: 10px;
}
.projectTechnologies {
	background: #f8fbff;
	border-block: 1px solid #f0f4fa;
	padding-block: var(--projectSectionSpace);
}
.projectTechnologyCards {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
	margin-top: 40px;
}
.projectTechnologyCards article {
	min-width: 0;
	border: 1px solid #ecf1f8;
	border-radius: 16px;
	background: #fff;
	text-align: center;
	padding: 32px 22px;
}
.projectTechnologyCards .projectIconCircle {
	width: 100px;
	height: 100px;
	margin: 0 auto 24px;
}
.projectTechnologyCards h3 {
	text-wrap: balance;
	font-size: clamp(18px, 1.2vw, 22px);
	line-height: 1.4;
	font-weight: 900;
	letter-spacing: -0.025em;
}
.projectTechnologyCards p {
	font-size: clamp(16px, 1vw, 18px);
	color: #647284;
	line-height: 1.7;
	white-space: normal;
	margin-top: 18px;
}
.projectResults {
	padding-block: var(--projectSectionSpace);
	border-bottom: 1px solid #f0f4f8;
}
.projectResultsContent {
	display: grid;
	grid-template-columns: 1.6fr 1fr;
	gap: 40px;
	margin-top: 40px;
}
.projectResultsContent > img {
	width: 100%;
	aspect-ratio: 1.55;
	height: 100%;
	object-fit: cover;
	border-radius: 16px;
}
.projectResultsContent dl {
	display: grid;
	gap: 16px;
	grid-template-rows: repeat(4, 1fr);
}
.projectResultsContent dl > div {
	border: 1px solid #edf2f8;
	border-radius: 16px;
	padding: 24px;
	display: flex;
	gap: 24px;
	align-items: center;
}
.projectResultsContent dt {
	flex: 0 0 auto;
	color: #076bff;
	font-size: clamp(36px, 2.6vw, 48px);
	font-weight: 900;
	letter-spacing: -0.04em;
	line-height: 1.2;
	min-width: 136px;
}
.projectResultsContent dd {
	color: #647284;
	font-size: clamp(16px, 1vw, 18px);
	font-weight: 500;
	line-height: 1.6;
}
.projectGallery {
	padding-block: var(--projectSectionSpace);
}
.projectGalleryPhotos {
	display: grid;
	grid-template-columns: 1.33fr 1fr 1fr;
	grid-template-rows: repeat(2, clamp(180px, 17vw, 270px));
	gap: 18px;
	margin-top: 40px;
}
.projectGalleryPhotos img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 14px;
}
.projectGalleryPhotos img:first-child {
	grid-row: span 2;
}
.projectCaseSummary {
	padding-block: var(--projectSectionSpace);
}
.projectCaseSummary h1 {
	text-wrap: balance;
	font-size: clamp(32px, 3vw, 52px);
	line-height: 1.4;
	letter-spacing: -0.04em;
	margin: 20px 0 36px;
}
.projectCaseSummary > img {
	width: 100%;
	max-width: 1000px;
	border-radius: 16px;
}
.projectCaseSummary > p:not(.projectEyebrow) {
	max-width: 1000px;
	font-size: clamp(17px, 1.25vw, 22px);
	line-height: 1.7;
	margin-top: 28px;
}
.projectCaseSummary > a {
	display: inline-flex;
	gap: 24px;
	font-size: 18px;
	margin-top: 28px;
	color: #0064ff;
}
@media (max-width: 1100px) {
	.projectDetailHero > img {
		width: 100%;
		opacity: 0.55;
	}
	.projectDetailHero::after {
		background: rgba(9, 30, 49, 0.42);
	}
	.projectOverview {
		gap: 40px;
	}
	.projectSolutionContent,
	.projectResultsContent {
		gap: 32px;
	}
	.projectResultsContent dl > div {
		padding: 20px;
		gap: 16px;
	}
	.projectResultsContent dt {
		min-width: 112px;
	}
}
@media (max-width: 900px) {
	.projectDetailHeroCopy {
		padding-block: 88px;
	}
	.projectMetadata {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
		padding-block: 36px;
	}
	.projectOverview,
	.projectSolutionContent,
	.projectResultsContent {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}
	.projectOverview > img {
		aspect-ratio: 1.4;
	}
	.projectSolutionContent,
	.projectResultsContent {
		margin-top: 32px;
	}
	.projectTechnologyCards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 20px;
		margin-top: 32px;
	}
	.projectResultsContent > img {
		height: auto;
	}
	.projectResultsContent dl {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: auto;
	}
	.projectResultsContent dl > div {
		flex-direction: column;
		align-items: flex-start;
	}
	.projectGalleryPhotos {
		margin-top: 32px;
		gap: 14px;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: 300px 220px 220px;
	}
	.projectGalleryPhotos img:first-child {
		grid-column: span 2;
		grid-row: auto;
	}
}
@media (max-width: 560px) {
	.projectDetailHero {
		min-height: 520px;
	}
	.projectDetailHero h1 {
		font-size: 36px;
	}
	.projectOverview > img {
		aspect-ratio: 1.1;
	}
	.projectSpecificationSpace {
		height: 180px;
	}
	.projectTechnologyCards {
		grid-template-columns: minmax(0, 1fr);
	}
	.projectResultsContent dl {
		grid-template-columns: minmax(0, 1fr);
	}
	.projectResultsContent dl > div {
		flex-direction: row;
		align-items: center;
	}
	.projectResultsContent dt {
		font-size: 36px;
		min-width: 124px;
	}
	.projectGalleryPhotos {
		gap: 12px;
		grid-template-rows: 250px 160px 160px;
	}
}