.about-page {
	--ink: #10213a;
	--muted: #536176;
	--blue: #1955d1;
	--line: #dce4ee;
	color: var(--ink);
	background: #fff;
	font-family: Arial, "Microsoft YaHei", sans-serif;
}

.about-shell {
	width: min(1500px, calc(100% - 64px));
	margin: 0 auto;
}

.about-hero {
	padding: 116px 0 112px;
	background: url("/public/static/img/about/1700.png");
	background-size: cover;
	overflow: hidden;
}
	
.about-intro-0{
	background: url("/public/static/img/about/2700.png");
	background-size: cover;
}
.about-hero-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(420px, .88fr);
	gap: 88px;
	align-items: center;
}

.about-eyebrow,
.about-kicker {
	margin: 0 0 22px;
	color: var(--blue);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1.8px;
	text-transform: uppercase;
}

.about-eyebrow {
	display: inline-flex;
	padding: 9px 13px;
	border: 1px solid #86a7df;
	border-radius: 110px;
	letter-spacing: .8px;
	background: #B9D0F4;
}

.about-hero h1 {
    max-width: 720px;
    margin: 0;
    font-size: clamp(46px, 5.2vw, 60px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.6px;
}

.about-lead {
	max-width: 620px;
	margin: 32px 0 0;
	color: #3c4b61;
	font-size: 18px;
	line-height: 1.7;
}

.about-hero-media {
	height: 430px;
	margin: 0;
	overflow: hidden;
	border-radius: 2px;
	background: #d8e3e9;
	box-shadow: 22px 22px 0 #d9e6ed;
	border-radius: 10px;
}

.about-hero-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 58% center;
}

.about-intro {
	padding: 124px 0 108px;
	text-align: center;
}

.about-intro h2 {
	    max-width: 1000px;
	    margin: 0 auto 40px;
	    font-size: clamp(38px, 4.2vw, 62px);
	    line-height: 1.12;
	    letter-spacing: -.4px;
	    font-weight: 500;
}

.about-intro>p {
	max-width: 850px;
	margin: 0 auto;
	color: black;
	font-size: 17px;
	line-height: 1.8;
}

.about-product-strip {
	    display: grid;
	    grid-template-columns: 1fr 1fr 1fr;
	    gap: 16px;
	    max-width: 1360px;
	    margin: 0 auto;
	    padding-top: 70px;
}

.about-product-strip img {
	    width: 100%;
	    height: 400px;
	    border-radius: 2px;
	    object-fit: cover;
}

.about-product-strip img:nth-child(1) {
	object-position: center;
}

.about-product-strip img:nth-child(2) {
	object-position: center;
}

.about-product-strip img:nth-child(3) {
	object-position: center;
}

.about-feature {
	display: grid;
	    grid-template-columns: 1.4fr .95fr;
	    gap: 80px;
	    align-items: center;
	    padding: 0px 0 126px;
}

.about-media-stack {
	position: relative;
	min-height: 500px;
}

.about-media-stack img:first-child {
	position: absolute;
	top: 0;
	right: 0;
	width: 78%;
	height: 360px;
	border-radius: 10px;
	object-fit: cover;
	object-position: 58% center;
}

.about-media-stack img:last-child {
	    position: absolute;
	    bottom: 0;
	    left: 90px;
	    width: 75%;
	    height: 320px;
	    border-radius: 10px;
	    object-fit: cover;
	    object-position: center;
}

.about-feature h2,
.about-trade h2 {
    margin: 0 0 24px;
    font-size: clamp(42px, 4vw, 28px);
    line-height: 1.07;
    letter-spacing: -.3px;
}

.about-feature-copy>p:not(.about-kicker),
.about-trade-copy>p:not(.about-kicker) {
	margin: 0;
	color: #46546a;
	font-size: 17px;
	line-height: 1.7;
}

.about-check-list {
	display: grid;
	gap: 17px;
	margin: 36px 0 0;
	padding: 0;
	list-style: none;
	color: #2d3b52;
	font-size: 15px;
	line-height: 1.6;
}

.about-check-list li {
	position: relative;
	padding-left: 28px;
}

.about-check-list li::before {
    position: absolute;
    background-size: contain;
    /* top: .48em; */
    left: 0;
    width: 20px;
    height: 20px;
    background-size: contain;
    /* border: 2px solid var(--blue); */
    /* border-radius: 50%; */
    content: "";
    background-image: url(public/static/img/about/dub.png);
}

.about-trade {
	padding: 122px 0;
	background: #10233e;
	color: #fff;
	 background-image: url(public/static/img/about/b5.png);
}

.about-trade-grid {
	display: grid;
	grid-template-columns: minmax(0, 500px) minmax(0, 1fr);
	gap: 90px;
	align-items: center;
}

.about-trade-copy>p:not(.about-kicker) {
	color: #c9d4e4;
}

.about-check-list-light {
	color: #d9e3ef;
}

.about-check-list-light li::before {
	border-color: #75a4ff;
}

.about-trade-media {
	position: relative;
	height: 540px;
}

.about-trade-factory-image {
	position: absolute;
	top: 0;
	right: 0;
	width: 82%;
	height: 372px;
	border-radius: 8px;
	object-fit: cover;
	object-position: center;
}

.about-trade-profile-image {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 80%;
	height: 372px;
	border-radius: 8px;
	object-fit: cover;
	object-position: center;
}

.about-commitment {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 0;
	padding: 124px 0 132px;
}

.about-commitment-heading {
	grid-column: 1;
	grid-row: 1;
	max-width: 590px;
}

.about-commitment-heading h2 {
	margin: 0 0 22px;
	font-size: clamp(50px, 5vw, 76px);
	line-height: 1.02;
}

.about-commitment-heading>p:last-child {
	color: black;
	    font-size: 22px;
	/* font-weight: 600; */
	line-height: 1.7;
}

.about-commitment-column {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	row-gap: 78px;
}

.about-commitment-column-left {
	grid-column: 1;
	grid-row: 2;
}

.about-commitment-column-right {
	grid-column: 2;
	grid-row: 1 / span 2;
	padding-top: 142px;
}

.about-commitment-column article {
	display: grid;
	grid-template-columns: 28px minmax(0, 1fr);
	column-gap: 12px;
	min-width: 0;
	padding-bottom: 40px;
}

.about-commitment-column span {
	grid-column: 1;
	grid-row: 1 / span 3;
	display: block;
	margin: 2px 0 0;
	color: var(--blue);
	font-size: 13px;
	font-weight: 700;
}

.about-commitment-icon {
	grid-column: 2;
	grid-row: 1;
	display: block;
	width: 94px;
	height: 90px;
	margin: 0 0 18px;
	object-fit: contain;
	object-position: left center;
}

.about-commitment-column h3 {
	    grid-column: 2;
    grid-row: 2;
    margin: 0 0 58px;
    color: #10213a;
    font-size: 50px;
    font-weight: 600;
    line-height: 1.08;
}


.about-commitment-column p {
	grid-column: 2;
	grid-row: 3;
	max-width: 430px;
	margin: 0;
	padding-top: 28px;
	border-top: 1px solid black;
	color: #596579;
	font-size: 15px;
	line-height: 1.7;
}

.about-team {
	display: grid;
	grid-template-columns: minmax(0, .9fr) minmax(560px, 1.1fr);
	gap: 100px;
	align-items: center;
	padding: 110px 0 132px;
}

.about-team-copy { max-width: 600px; }
.about-team-copy h2 { margin: 0 0 26px; color: #10213a; font-size: clamp(46px, 4.6vw, 68px); font-weight: 600; line-height: 1.12; }
.about-team-copy h2 span { color: #1738a8; }
.about-team-copy p:not(.about-kicker) { margin: 0 0 12px; color: #1e2b40; font-size: 17px; line-height: 1.76; }
.about-team-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 54px 30px; align-items: start; }
.about-team-gallery img { width: 100%; aspect-ratio: 315 / 393; object-fit: cover; }
.about-team-gallery img:nth-child(even) { transform: translateY(120px); }

.about-vision {
	padding: 140px 0;
	background: #071832 url("./public/static/img/about/b7.png") center / cover;
	color: #fff;
	text-align: center;
}

.about-vision .about-kicker {
	color: #9cbaff;
}

.about-vision h2 {
	max-width: 1120px;
	margin: 0 auto 34px;
	font-size: clamp(36px, 4.4vw, 68px);
	line-height: 1.12;
}

.about-vision p:last-child {
	max-width: 780px;
	margin: 0 auto;
	color: #dce7fa;
	font-size: 17px;
	line-height: 1.75;
}

@media (max-width: 1000px) {
	.about-hero {
		padding: 82px 0 90px;
	}

	.about-hero-grid,
	.about-feature,
	.about-trade-grid {
		grid-template-columns: 1fr;
		gap: 58px;
	}

	.about-commitment {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 56px;
		padding: 90px 0;
	}

	.about-commitment-column-right {
		padding-top: 120px;
	}

	.about-team {
		grid-template-columns: minmax(0, .9fr) minmax(400px, 1.1fr);
		gap: 58px;
	}

	.about-hero-media {
		height: 380px;
	}

	.about-feature {
		padding: 78px 0 96px;
	}

	.about-commitment {
		padding: 90px 0;
	}
}

@media (max-width: 620px) {
	.about-shell {
		width: calc(100% - 32px);
	}

	.about-hero h1 {
		font-size: 43px;
	}

	.about-lead,
	.about-intro>p {
		font-size: 16px;
	}

	.about-hero-media {
		height: 250px;
		box-shadow: 10px 10px 0 #d9e6ed;
	}

	.about-intro {
		padding: 76px 0;
	}

	.about-intro h2 {
		font-size: 36px;
	}

	.about-product-strip {
		grid-template-columns: 1fr;
		gap: 12px;
		margin-top: 44px;
	}

	.about-product-strip img {
		height: 230px;
	}

	.about-media-stack {
		min-height: 330px;
	}

	.about-media-stack img:first-child {
		height: 225px;
	}

	.about-media-stack img:last-child {
		height: 175px;
		box-shadow: 9px 9px 0 #e9f0f5;
	}

	.about-feature h2,
	.about-trade h2 {
		font-size: 40px;
	}

	.about-trade {
		padding: 80px 0;
	}

	.about-commitment {
		display: flex;
		flex-direction: column;
		padding: 72px 0;
	}

	.about-trade-media {
		height: 300px;
	}

	.about-trade-factory-image {
		width: 82%;
		height: 205px;
	}

	.about-trade-profile-image {
		width: 82%;
		height: 205px;
	}

	.about-commitment-column {
		display: contents;
	}

	.about-commitment-heading {
		order: 1;
	}

	.about-commitment-column-left,
	.about-commitment-column-right {
		grid-column: auto;
		grid-row: auto;
		padding-top: 0;
	}

	.about-commitment-column-left article:first-child {
		order: 2;
		margin-top: 46px;
	}

	.about-commitment-column-right article:first-child {
		order: 3;
		margin-top: 42px;
	}

	.about-commitment-column-left article:last-child {
		order: 4;
		margin-top: 42px;
	}

	.about-commitment-column-right article:last-child {
		order: 5;
		margin-top: 42px;
	}

	.about-commitment-column h3 {
		font-size: 36px;
	}

	.about-commitment-icon {
		width: 82px;
		height: 78px;
	}

	.about-commitment-column h3 {
		margin-bottom: 38px;
	}

	.about-commitment-column p {
		padding-top: 22px;
	}

	.about-team {
		display: block;
		padding: 76px 0 88px;
	}

	.about-team-gallery {
		gap: 26px 14px;
		margin-top: 44px;
	}

	.about-team-gallery img:nth-child(even) {
		transform: translateY(52px);
	}

	.about-vision {
		padding: 88px 0;
	}

	.about-vision h2 {
		font-size: 39px;
	}
}