@font-face {
	font-display: swap;
	font-family: "GTF Adieu TRIAL";
	font-style: normal;
	font-weight: 400;
	src: url("../fonts/GTFAdieuTRIAL-Regular.otf") format("opentype");
}

@font-face {
	font-display: swap;
	font-family: "GTF Adieu TRIAL";
	font-style: normal;
	font-weight: 700;
	src: url("../fonts/GTFAdieuTRIAL-Bold.otf") format("opentype");
}

@font-face {
	font-display: swap;
	font-family: "GTF Adieu TRIAL";
	font-style: normal;
	font-weight: 300;
	src: url("../fonts/GTFAdieuTRIAL-Light.otf") format("opentype");
}

@font-face {
	font-display: swap;
	font-family: "Source Han Sans CN";
	font-style: normal;
	font-weight: 400;
	src: url("../fonts/SourceHanSansCN-Regular.otf") format("opentype");
}

:root {
	--phomi-blue: #70c7d1;
	--phomi-font: "GTF Adieu TRIAL";

	/* Technology typography — 1920px Figma baseline, scales with viewport width */
	--phomi-tech-hero-title: clamp(28px, 3.645833vw, 70px);
	--phomi-tech-hero-subtitle: clamp(14px, 1.041667vw, 20px);
	--phomi-tech-kicker: clamp(13px, 0.833333vw, 16px);
	--phomi-tech-kicker-lh: clamp(16px, 1.145833vw, 22px);
	--phomi-tech-kicker-lg: clamp(16px, 1.25vw, 24px);
	--phomi-tech-kicker-lg-lh: clamp(26px, 2.083333vw, 40px);
	--phomi-tech-display: clamp(34px, 3.125vw, 60px);
	--phomi-tech-display-lh: clamp(36px, 3.125vw, 60px);
	--phomi-tech-display-md: clamp(28px, 2.5vw, 48px);
	--phomi-tech-display-md-lh: clamp(38px, 3.333333vw, 64px);
	--phomi-tech-display-sm: clamp(24px, 2.083333vw, 40px);
	--phomi-tech-display-sm-lh: clamp(28px, 2.395833vw, 46px);
	--phomi-tech-section-label: clamp(34px, 3.125vw, 60px);
	--phomi-tech-section-label-lh: clamp(28px, 2.291667vw, 44px);
	--phomi-tech-panel-title: clamp(22px, 1.875vw, 36px);
	--phomi-tech-panel-title-lh: clamp(34px, 2.916667vw, 56px);
	--phomi-tech-stat: clamp(28px, 2.604167vw, 50px);
	--phomi-tech-stat-sub: clamp(18px, 1.5625vw, 30px);
	--phomi-tech-lead: clamp(14px, 1.041667vw, 20px);
	--phomi-tech-lead-lh: clamp(20px, 1.5625vw, 30px);
	--phomi-tech-body: clamp(13px, 0.833333vw, 16px);
	--phomi-tech-body-lh: clamp(18px, 1.25vw, 24px);
	--phomi-tech-body-sm: clamp(12px, 0.729167vw, 14px);
	--phomi-tech-body-sm-lh: clamp(16px, 1.145833vw, 22px);
	--phomi-tech-body-xs: clamp(11px, 0.677083vw, 13px);
	--phomi-tech-body-xs-lh: clamp(16px, 1.041667vw, 20px);
	--phomi-tech-tab: clamp(13px, 0.9375vw, 18px);
	--phomi-tech-tab-lh: clamp(18px, 1.25vw, 24px);
	--phomi-tech-tab-num: clamp(14px, 1.145833vw, 22px);
	--phomi-tech-tab-num-lh: clamp(26px, 2.083333vw, 40px);
	--phomi-tech-card-title: clamp(13px, 0.9375vw, 18px);
	--phomi-tech-card-title-lh: clamp(18px, 1.354167vw, 26px);
	--phomi-tech-product-title: clamp(16px, 1.25vw, 24px);
	--phomi-tech-product-title-lh: clamp(26px, 2.083333vw, 40px);
	--phomi-tech-app-title: clamp(13px, 0.9375vw, 18px);
	--phomi-tech-app-title-lh: clamp(28px, 2.395833vw, 46px);
	--phomi-tech-link: clamp(13px, 0.833333vw, 16px);
	--phomi-tech-link-lh: clamp(18px, 1.25vw, 24px);
	--phomi-tech-badge: clamp(13px, 0.833333vw, 16px);
	--phomi-tech-badge-lh: clamp(13px, 0.833333vw, 16px);
	--phomi-tech-badge-height: clamp(36px, 2.5vw, 48px);
	--phomi-tech-chevron: clamp(14px, 1.041667vw, 20px);
	--phomi-tech-chevron-lg: clamp(14px, 1.145833vw, 22px);
	--phomi-tech-footer-heading: clamp(14px, 1.041667vw, 20px);
	--phomi-tech-footer-heading-lh: clamp(20px, 1.458333vw, 28px);
	--phomi-tech-footer-link: clamp(12px, 0.729167vw, 14px);
	--phomi-tech-footer-link-lh: clamp(22px, 1.5625vw, 30px);
}

html,
body {
	margin: 0;
	overflow-x: hidden;
}

body.page-template-page-technology,
body.page-template-page-technology #page,
body.page-template-page-technology #content,
body.page-template-page-technology .site-content,
body.page-template-page-technology .ast-container,
body.page-template-page-technology .content-area,
body.page-template-page-technology .site-main,
body.page-template-page-technology .entry-content {
	margin: 0;
	max-width: none;
	padding: 0;
}

html:has(body.page-template-page-technology) {
	margin-top: 0 !important;
}

body.page-template-page-technology .site-header,
body.page-template-page-technology .site-footer,
body.page-template-page-technology #wpadminbar {
	display: none;
}

.ast-plain-container.ast-no-sidebar #primary.phomi-technology,
#primary.phomi-technology,
.phomi-technology {
	background: #fff;
	color: #000;
	font-family: var(--phomi-font);
	margin: 0;
	min-height: 100vh;
	padding: 0;
}

.phomi-technology *,
.phomi-technology *::before,
.phomi-technology *::after {
	box-sizing: border-box;
}

.phomi-technology img {
	display: block;
	max-width: 100%;
}

.phomi-technology h1,
.phomi-technology h2,
.phomi-technology h3,
.phomi-technology h4,
.phomi-technology p {
	color: inherit;
	overflow-wrap: break-word;
}

.phomi-header {
	height: 4.6875vw;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 40;
}

.phomi-header__inner {
	height: 100%;
	margin: 0 auto;
	max-width: 1920px;
	position: relative;
}

.phomi-logo {
	aspect-ratio: 2269 / 875;
	display: block;
	left: 15.104167vw;
	line-height: 0;
	position: absolute;
	top: 0.572917vw;
	width: 8.333333vw;
}

.phomi-logo img {
	height: 100%;
	object-fit: contain;
	width: 100%;
}

.phomi-nav {
	left: 26.822917vw;
	position: absolute;
	top: 1.822917vw;
	white-space: nowrap;
}

.phomi-nav ul {
	align-items: flex-start;
	display: flex;
	gap: 2.1875vw;
	list-style: none;
	margin: 0;
	padding: 0;
}

.phomi-nav li {
	line-height: 1;
	position: relative;
}

.phomi-nav a {
	align-items: center;
	color: #fff;
	display: inline-flex;
	font-size: 0.729167vw;
	font-weight: 400;
	line-height: 1.041667vw;
	text-decoration: none;
	transition: color 0.28s ease, opacity 0.28s ease, transform 0.28s ease;
}

.phomi-nav > ul > li:nth-child(-n+6) > a,
.phomi-nav > ul > li:last-child > a {
	/* text-transform: uppercase; */
}

.phomi-nav .has-menu > a::after {
	border-bottom: 1px solid currentColor;
	border-right: 1px solid currentColor;
	content: "";
	height: 0.260417vw;
	margin-left: 0.416667vw;
	position: relative;
	top: -0.026042vw;
	transform: rotate(45deg);
	transition: transform 0.24s ease;
	width: 0.260417vw;
}

.phomi-nav > ul > li > a:hover,
.phomi-nav > ul > li > a:focus-visible {
	color: #fff;
	opacity: 1;
	transform: translateY(-1px) scale(1.08);
}

.phomi-nav .has-menu:hover > a::after,
.phomi-nav .has-menu:focus-within > a::after {
	transform: rotate(225deg);
}

.phomi-dropdown {
	background: rgba(0, 0, 0, 0.78);
	backdrop-filter: blur(14px);
	border: 1px solid rgba(255, 255, 255, 0.16);
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.2);
	left: 50%;
	min-width: 210px;
	opacity: 0;
	padding: 14px 0;
	pointer-events: none;
	position: absolute;
	top: calc(100% + 10px);
	transform: translate(-50%, 10px) scale(0.98);
	transition: opacity 0.24s ease, transform 0.24s ease, visibility 0.24s ease;
	visibility: hidden;
	z-index: 8;
}

.phomi-dropdown::before {
	content: "";
	height: 14px;
	left: 0;
	position: absolute;
	right: 0;
	top: -14px;
}

.phomi-dropdown a {
	box-sizing: border-box;
	color: #fff;
	display: block;
	font-size: var(--phomi-tech-body-xs);
	line-height: var(--phomi-tech-body-xs-lh);
	padding: 9px 18px;
	/* text-transform: none; */
	width: 100%;
}

.phomi-nav li:hover .phomi-dropdown,
.phomi-nav li:focus-within .phomi-dropdown {
	opacity: 1;
	pointer-events: auto;
	transform: translate(-50%, 0) scale(1);
	visibility: visible;
}

.phomi-dropdown a:hover,
.phomi-dropdown a:focus-visible {
	background: var(--phomi-blue);
	color: #000;
	outline: none;
}

.phomi-mega-menu {
	background: #fff;
	height: 346px;
	left: 0;
	opacity: 0;
	pointer-events: none;
	position: fixed;
	top: 90px;
	transform: translateY(-8px);
	transition: opacity 0.24s ease, transform 0.24s ease, visibility 0.24s ease;
	visibility: hidden;
	width: 100vw;
	z-index: 20;
}

.phomi-mega-menu::before {
	pointer-events: none;
	content: "";
	height: 90px;
	left: 0;
	position: absolute;
	top: -90px;
	width: 100%;
}

.phomi-mega-menu__panel {
	background: #1a1a1a;
	height: 320px;
	position: relative;
	width: 100%;
}

.phomi-menu-scrim {
	background: rgba(0, 0, 0, 0.5);
	bottom: 0;
	left: 0;
	opacity: 0;
	pointer-events: none;
	position: fixed;
	right: 0;
	top: 436px;
	transition: opacity 0.24s ease, visibility 0.24s ease;
	visibility: hidden;
	z-index: 15;
}

.phomi-header:has(.has-mega-menu:hover) ~ .phomi-menu-scrim,
.phomi-header:has(.has-mega-menu:focus-within) ~ .phomi-menu-scrim {
	opacity: 0;
	visibility: hidden;
}

.phomi-nav .phomi-mega-card {
	color: #fff;
	display: block;
	left: 455px;
	position: absolute;
	text-decoration: none;
	top: 50px;
	width: 310px;
}

.phomi-nav .phomi-mega-card img {
	height: 186px;
	object-fit: cover;
	width: 310px;
}

.phomi-nav .phomi-mega-card span {
	color: #fff;
	display: block;
	font-size: var(--phomi-tech-body-sm);
	font-weight: 400;
	line-height: var(--phomi-tech-body-sm-lh);
	margin-top: 8px;
	/* text-transform: capitalize; */
}

.phomi-nav .phomi-mega-card:nth-child(2) {
	left: 805px;
}

.phomi-nav .phomi-mega-card:nth-child(3) {
	left: 1155px;
}

.phomi-nav .has-mega-menu--about .phomi-mega-card:nth-child(1) {
	left: 295px;
}

.phomi-nav .has-mega-menu--about .phomi-mega-card:nth-child(2) {
	left: 635px;
}

.phomi-nav .has-mega-menu--about .phomi-mega-card:nth-child(3) {
	left: 975px;
}

.phomi-nav .has-mega-menu--about .phomi-mega-card:nth-child(4) {
	left: 1315px;
}

.phomi-nav .has-mega-menu--case .phomi-mega-menu {
	height: 596px;
}

.phomi-nav .has-mega-menu--case .phomi-mega-menu__panel {
	height: 570px;
}

.phomi-nav .has-mega-menu--application .phomi-mega-card:nth-child(1),
.phomi-nav .has-mega-menu--case .phomi-mega-card:nth-child(1) {
	left: 295px;
	top: 50px;
}

.phomi-nav .has-mega-menu--application .phomi-mega-card:nth-child(2),
.phomi-nav .has-mega-menu--case .phomi-mega-card:nth-child(2) {
	left: 635px;
	top: 50px;
}

.phomi-nav .has-mega-menu--application .phomi-mega-card:nth-child(3),
.phomi-nav .has-mega-menu--case .phomi-mega-card:nth-child(3) {
	left: 975px;
	top: 50px;
}

.phomi-nav .has-mega-menu--application .phomi-mega-card:nth-child(4),
.phomi-nav .has-mega-menu--case .phomi-mega-card:nth-child(4) {
	left: 1315px;
	top: 50px;
}

.phomi-nav .has-mega-menu--application .phomi-mega-card:nth-child(5),
.phomi-nav .has-mega-menu--case .phomi-mega-card:nth-child(5) {
	left: 295px;
	top: 304px;
}

.phomi-nav .has-mega-menu--application .phomi-mega-card:nth-child(6) {
	left: 635px;
	top: 304px;
}

.phomi-header:has(.has-mega-menu--case:hover) ~ .phomi-menu-scrim,
.phomi-header:has(.has-mega-menu--case:focus-within) ~ .phomi-menu-scrim {
	top: 686px;
}

.phomi-header.is-mega-active {
	background: #fff;
}

.phomi-header.is-mega-active .phomi-nav > ul > li > a {
	color: #000;
}

.has-mega-menu.is-mega-open > a {
	color: var(--phomi-blue) !important;
}

.has-mega-menu.is-mega-open .phomi-mega-menu {
	opacity: 1 !important;
	pointer-events: auto !important;
	transform: translateY(0) !important;
	visibility: visible !important;
}

.phomi-tech-hero {
	background: none;
	display: block;
	height: auto;
	min-height: 0;
	overflow: hidden;
	position: relative;
	width: 100%;
}

.phomi-tech-hero__media {
	line-height: 0;
	position: relative;
	width: 100%;
}

.phomi-tech-hero__media::after {
	background: linear-gradient(90deg, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.06));
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
}

.phomi-tech-hero__media img {
	display: block;
	height: auto;
	width: 100%;
}

.phomi-tech-hero .phomi-header,
.phomi-tech-hero .phomi-menu-scrim {
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 2;
}

.phomi-tech-hero__content {
	bottom: clamp(32px, 3.645833vw, 70px);
	left: clamp(22px, 3.645833vw, 70px);
	position: absolute;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
	top: auto;
	z-index: 2;
}

.phomi-tech-hero h1 {
	color: #fff;
	font-size: var(--phomi-tech-hero-title);
	font-weight: 700;
	line-height: 1;
	margin: 0 0 8px;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
	/* text-transform: uppercase; */
}

.phomi-tech-hero p {
	color: #fff;
	font-size: var(--phomi-tech-hero-subtitle);
	line-height: 1.2;
	margin: 0;
	/* text-transform: capitalize; */
}

.phomi-digital-facade {
	background: #000;
	box-sizing: border-box;
	color: #fff;
	display: grid;
	gap: 25px;
	grid-template-columns: minmax(0, 1030px) minmax(620px, 1fr);
	height: 1000px;
	min-height: 1000px;
	overflow: hidden;
	padding: 86px 70px 0;
	position: relative;
}

.phomi-tech-kicker {
	color: var(--phomi-blue);
	font-size: var(--phomi-tech-kicker);
	font-weight: 400;
	line-height: var(--phomi-tech-kicker-lh);
	margin: 0 0 17px;
	/* text-transform: none; */
}

.phomi-tech-kicker sup {
	color: var(--phomi-blue);
	font-size: clamp(8px, 0.520833vw, 10px);
	font-weight: 400;
	line-height: 0;
	margin-left: 2px;
	position: relative;
	top: -0.5em;
}

.phomi-digital-facade h2 {
	color: var(--phomi-blue);
	font-size: var(--phomi-tech-display);
	font-weight: 400;
	letter-spacing: 0;
	line-height: var(--phomi-tech-display-lh);
	margin: 0 0 34px;
	max-width: 1016px;
	/* text-transform: uppercase; */
	width: auto;
}

.phomi-digital-facade__intro {
	font-size: var(--phomi-tech-lead);
	font-weight: 300;
	line-height: var(--phomi-tech-lead-lh);
	margin: 0;
	max-width: 1016px;
}

.phomi-digital-facade__note {
	background: linear-gradient(to bottom, var(--phomi-blue), var(--phomi-blue)) 0 9px / 2px 70px no-repeat;
	color: rgba(255, 255, 255, 0.7);
	font-size: var(--phomi-tech-body-sm);
	font-weight: 300;
	left: 70px;
	line-height: var(--phomi-tech-body-sm-lh);
	margin: 0;
	max-width: 883px;
	padding-left: 23px;
	position: absolute;
	/* text-transform: capitalize; */
	top: 786px;
}

.phomi-digital-facade__media {
	align-self: start;
		margin-top: 0;
	min-height: 0;
	position: relative;
}

.phomi-digital-facade__media::after {
	background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 52%);
	bottom: 0;
	content: "";
	height: 45%;
	left: 0;
	position: absolute;
	width: 100%;
}

.phomi-digital-facade__media img {
	max-height: 680px;
	margin-left: -25px;
	margin-top: 190px;
	object-fit: contain;
	object-position: bottom right;
	width: 100%;
}

.phomi-process {
	background: var(--phomi-blue);
	padding: 130px 70px 145px;
	text-align: center;
}

.phomi-process h2,
.phomi-low-carbon h2,
.phomi-product-lines h2,
.phomi-applications h2 {
	font-size: var(--phomi-tech-display);
	font-weight: 700;
	line-height: 1.333;
	margin: 0;
	/* text-transform: uppercase; */
}

.phomi-process h2 {
	color: #fff;
	margin-bottom: 70px;
}

.phomi-process__grid {
	display: grid;
	gap: 25px;
	grid-template-columns: repeat(4, 292px);
	justify-content: center;
}

.phomi-process-card {
	background: #fff;
	min-height: 562px;
	padding: 24px;
	text-align: left;
}

.phomi-process-card__head {
	align-items: center;
	display: flex;
	justify-content: space-between;
}

.phomi-process-card__head span:first-child {
	font-size: var(--phomi-tech-stat);
	line-height: 1;
}

.phomi-process-card__head span:last-child {
	font-size: var(--phomi-tech-stat-sub);
	line-height: 1;
}

.phomi-process-card h3 {
	font-size: var(--phomi-tech-card-title);
	font-weight: 400;
	line-height: var(--phomi-tech-card-title-lh);
	margin: 22px 0 18px;
	min-height: clamp(40px, 2.708333vw, 52px);
}

.phomi-process-card img {
	aspect-ratio: 1;
	height: auto;
	object-fit: cover;
	width: 100%;
}

.phomi-process-card p {
	font-size: var(--phomi-tech-body-xs);
	line-height: var(--phomi-tech-body-xs-lh);
	margin: 20px 0 0;
	/* text-transform: capitalize; */
}

.phomi-eco-property {
	background: #fff;
	padding-top: 120px;
}

.phomi-section-label {
	color: #000;
	font-size: var(--phomi-tech-section-label);
	font-weight: 400;
	line-height: var(--phomi-tech-section-label-lh);
	margin: 0 70px 62px;
	/* text-transform: uppercase; */
}

.phomi-eco-property__tabs {
	background: #fff;
	border: 2px solid #f2f2f2;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
}

.phomi-eco-property__tabs button,
.phomi-eco-property__tabs button:hover,
.phomi-eco-property__tabs button:focus,
.phomi-eco-property__tabs button:active {
	appearance: none;
	background: #fff !important;
	border: 0;
	border-radius: 0;
	border-right: 1px solid rgba(0, 0, 0, 0.14);
	box-shadow: none;
	color: #000 !important;
	cursor: pointer;
	font-family: var(--phomi-font);
	font-size: var(--phomi-tech-tab);
	font-weight: 400;
	line-height: var(--phomi-tech-tab-lh);
	min-height: 150px;
	padding: 25px 70px 24px;
	text-align: left;
	/* text-transform: uppercase; */
}

.phomi-eco-property__tabs button.is-active {
	background: #f9f9f9 !important;
}

.phomi-eco-property__tabs button:last-child {
	border-right: 0;
}

.phomi-eco-property__tabs span {
	color: var(--phomi-blue);
	display: block;
	font-size: var(--phomi-tech-tab-num);
	line-height: var(--phomi-tech-tab-num-lh);
	margin-bottom: 7px;
}

.phomi-eco-property__body {
	background: #f9f9f9;
}

.phomi-eco-property__panel {
	align-items: center;
	display: grid;
	gap: 70px;
	grid-template-columns: 1fr 1.05fr;
	min-height: 680px;
	padding: 100px 70px 120px;
}

.phomi-eco-property__panel[hidden] {
	display: none;
}

.phomi-eco-property__panel h2 {
	color: #000;
	/* 一级：36px @ 1920 → 1.875vw */
	font-size: clamp(22px, 1.875vw, 36px);
	font-weight: 400;
	line-height: 1.25;
	margin: 0 0 50px;
	max-width: 833px;
	/* text-transform: uppercase; */
}

.phomi-eco-property__panel p {
	color: #666;
	/* 二级：16px @ 1920 → 0.833333vw */
	font-size: clamp(13px, 0.833333vw, 16px);
	font-weight: 400;
	line-height: 1.5;
	margin: 0 0 17px;
	max-width: 835px;
	/* text-transform: capitalize; */
}

.phomi-eco-property__panel p + p {
	/* 两段正文同级，保持 16px 上限 */
	font-size: clamp(13px, 0.833333vw, 16px);
}

.phomi-eco-property__panel img {
	height: 460px;
	object-fit: cover;
	width: 100%;
}

.phomi-cradle {
	background: #fff;
	padding: 120px 0 130px;
}

.phomi-cradle h2 {
	font-size: var(--phomi-tech-display-md);
	font-weight: 400;
	line-height: 1;
	margin: 0 auto 60px;
	max-width: 1243px;
	text-align: center;
	/* text-transform: uppercase; */
}

.phomi-cradle__content {
	border-top: 2px solid #000;
	display: grid;
	gap: 62px;
	grid-template-columns: 637px 542px;
	margin: 0 auto;
	max-width: 1243px;
	padding-top: 70px;
}

.phomi-cradle__item {
	border-bottom: 4px solid #fff;
}

.phomi-cradle__item button {
	align-items: center;
	background: var(--phomi-blue);
	border: 0;
	color: #fff;
	cursor: pointer;
	display: flex;
	font-family: var(--phomi-font);
	font-size: var(--phomi-tech-tab);
	font-weight: 400;
	justify-content: center;
	line-height: var(--phomi-tech-tab-lh);
	min-height: clamp(40px, 2.708333vw, 52px);
	padding: 13px 44px;
	position: relative;
	text-align: center;
	/* text-transform: uppercase; */
	width: 100%;
}

.phomi-cradle__item button span {
	font-size: var(--phomi-tech-chevron-lg);
	position: absolute;
	right: 15px;
	transition: transform 0.24s ease;
}

.phomi-cradle__item.is-open button span {
	transform: rotate(180deg);
}

.phomi-cradle__item div {
	padding: 8px 15px 22px;
}

.phomi-cradle__item div[hidden] {
	display: none;
}

.phomi-cradle__item p {
	font-size: var(--phomi-tech-body);
	font-weight: 400;
	line-height: var(--phomi-tech-body-lh);
	margin: 0;
}

.phomi-cradle__image {
	aspect-ratio: 542 / 356;
	height: auto;
	object-fit: cover;
	object-position: center;
	width: 100%;
}

.phomi-low-carbon {
	background: #000;
	color: #fff;
	padding: 120px 70px 130px;
	text-align: center;
}

.phomi-low-carbon div {
	margin: 0 auto 50px;
	max-width: 991px;
}

.phomi-low-carbon h2 {
	color: #fff;
	font-size: var(--phomi-tech-display-md);
	font-weight: 400;
	line-height: var(--phomi-tech-display-md-lh);
	margin: 0 auto 16px;
	max-width: 931px;
	/* text-transform: uppercase; */
}

.phomi-low-carbon p {
	color: #fff;
	font-size: var(--phomi-tech-body-sm);
	line-height: var(--phomi-tech-body-sm-lh);
	margin: 0;
}

.phomi-low-carbon .phomi-low-carbon__media {
	margin: 0 auto;
	max-width: 1239px;
	position: relative;
}

.phomi-low-carbon__media::after {
	background: rgba(0, 0, 0, 0.3);
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
}

.phomi-low-carbon__media img,
.phomi-low-carbon__media video {
	background: #111;
	display: block;
	height: auto;
	max-height: 686px;
	max-width: 1239px;
	object-fit: contain;
	width: 100%;
}

.phomi-materials {
	background: #fff;
	padding: 142px 70px 132px;
}

.phomi-materials__intro,
.phomi-materials__science {
	display: grid;
	margin: 0 auto;
	max-width: 1600px;
}

.phomi-materials__intro {
	display: block;
	margin-bottom: 157px;
	max-width: 1780px;
}

.phomi-materials__intro-head {
	max-width: 1104px;
}

/* Figma 3:246 — benefits + image 左右排布，间距随屏宽收敛，避免中间留白过大 */
.phomi-materials__intro-body {
	align-items: start;
	display: grid;
	gap: clamp(40px, 4vw, 80px);
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	/* intro text bottom → benefits top ≈ 102px */
	margin-top: 102px;
}

.phomi-materials__intro h2 {
	/* Figma 3:249 — Regular 60/64，允许换行 */
	font-family: "GTF Adieu TRIAL";
	font-size: var(--phomi-tech-display);
	font-weight: 400;
	letter-spacing: 0;
	line-height: var(--phomi-tech-display-lh);
	margin-bottom: 71px;
	max-width: 100%;
	/* text-transform: capitalize; */
	white-space: normal;
	width: auto;
}

/* Figma 3:248 — Light 16/28, width 876 */
.phomi-materials__intro-head > p {
	color: #000;
	font-family: "GTF Adieu TRIAL";
	font-size: var(--phomi-tech-body);
	font-weight: 300;
	letter-spacing: 0;
	line-height: var(--phomi-tech-body-sm-lh);
	margin: 0;
	max-width: 876px;
	/* text-transform: capitalize; */
}

/* Figma benefit pitch: badge→body 20px, block→block 50px */
.phomi-materials__benefits {
	max-width: 720px;
	min-width: 0;
	width: 100%;
}

.phomi-materials__benefits .phomi-benefit {
	margin-top: 50px;
	max-width: 100%;
}

.phomi-materials__benefits .phomi-benefit:first-child {
	margin-top: 0;
}

.phomi-materials__benefits .phomi-benefit h3 {
	font-family: "GTF Adieu TRIAL";
	font-size: var(--phomi-tech-badge);
	font-weight: 400;
	height: var(--phomi-tech-badge-height);
	letter-spacing: 0;
	line-height: var(--phomi-tech-badge-lh);
	margin: 0 0 20px;
	min-height: var(--phomi-tech-badge-height);
	padding: 0 20px;
}

.phomi-materials__benefits .phomi-benefit p {
	color: #666;
	font-family: "GTF Adieu TRIAL";
	font-size: var(--phomi-tech-body);
	font-weight: 300;
	letter-spacing: 0;
	line-height: var(--phomi-tech-body-sm-lh);
	max-width: 100%;
	/* text-transform: capitalize; */
}

/* Figma 3:265 — leaf image，跟随列宽缩放，大屏靠右贴齐 intro-body */
.phomi-materials__intro-media {
	aspect-ratio: 724 / 438;
	height: auto;
	justify-self: end;
	max-width: 724px;
	min-width: 0;
	overflow: hidden;
	width: 100%;
}

.phomi-materials__intro-body .phomi-materials__intro-media img {
	aspect-ratio: 724 / 438;
	display: block;
	height: 100%;
	max-width: 100%;
	object-fit: cover;
	object-position: center center;
	width: 100%;
}

.phomi-materials__science {
	display: block;
	margin-left: 0;
	margin-right: 0;
	max-width: 1595px;
}

.phomi-materials__science-head {
	max-width: 1175px;
}

.phomi-materials__science-body {
	align-items: stretch;
	display: grid;
	gap: 74px;
	grid-template-columns: 800px 720px;
	/* Figma: intro bottom 鈮?095 鈫?mosaic top 7189 鈮?94px */
	margin-top: 94px;
}

.phomi-materials__science-benefits {
	height: 100%;
}

.phomi-materials h2 {
	color: #000;
	font-family: var(--phomi-font);
	font-size: var(--phomi-tech-display);
	font-weight: 400;
	letter-spacing: 0;
	line-height: var(--phomi-tech-display-lh);
	margin: 0 0 30px;
	max-width: 1104px;
}

.phomi-materials__intro h2 {
	font-family: "GTF Adieu TRIAL";
	font-size: var(--phomi-tech-display);
	font-weight: 400;
	letter-spacing: 0;
	line-height: var(--phomi-tech-display-lh);
	margin: 0 0 71px;
	max-width: 100%;
	/* text-transform: capitalize; */
	white-space: normal;
	width: auto;
}

.phomi-materials__science h2 {
	font-size: var(--phomi-tech-display);
	font-weight: 400;
	letter-spacing: 0;
	line-height: var(--phomi-tech-display-lh);
	margin-bottom: 25px;
	max-width: 1092px;
}

.phomi-materials__science-head > p {
	color: #000;
	font-family: "GTF Adieu TRIAL";
	font-size: var(--phomi-tech-body);
	font-weight: 300;
	letter-spacing: 0;
	line-height: var(--phomi-tech-body-sm-lh);
	margin: 0;
	max-width: 1175px;
	/* text-transform: capitalize; */
}

.phomi-benefit {
	margin-top: 40px;
	max-width: 720px;
}

.phomi-benefit:first-child {
	margin-top: 0;
}

/* Shared badge chrome; intro/science sections override spacing */
.phomi-benefit h3 {
	align-items: center;
	background: #f9f9f9;
	box-sizing: border-box;
	color: #000;
	display: inline-flex;
	font-family: var(--phomi-font);
	font-size: var(--phomi-tech-badge);
	font-weight: 400;
	height: var(--phomi-tech-badge-height);
	letter-spacing: 0;
	line-height: var(--phomi-tech-badge-lh);
	margin: 0 0 34px;
	min-height: var(--phomi-tech-badge-height);
	padding: 0 20px;
	/* text-transform: capitalize; */
}

.phomi-benefit p {
	color: #666666;
	font-family: var(--phomi-font);
	font-size: var(--phomi-tech-body);
	font-weight: 300;
	letter-spacing: 0;
	line-height: var(--phomi-tech-body-sm-lh);
	margin: 0;
	max-width: 720px;
	/* text-transform: none; */
}

/* Figma 3:266 — benefit blocks ~228px pitch; badge→body ~48px */
.phomi-materials__science-benefits .phomi-benefit {
	margin-top: 70px;
	max-width: 720px;
}

.phomi-materials__science-benefits .phomi-benefit:first-child {
	margin-top: 0;
}

.phomi-materials__science-benefits .phomi-benefit h3 {
	align-items: center;
	background: #f9f9f9;
	box-sizing: border-box;
	color: #000;
	display: inline-flex;
	/* 标题：16px @ 1920 → 0.833333vw */
	font-size: clamp(13px, 0.833333vw, 16px);
	font-weight: 400;
	height: auto;
	letter-spacing: 0;
	line-height: 1.25;
	margin-bottom: 25px;
	min-height: clamp(36px, 2.5vw, 48px);
	padding: clamp(8px, 0.625vw, 12px) clamp(14px, 1.041667vw, 20px);
	/* text-transform: capitalize; */
}

.phomi-materials__science-benefits .phomi-benefit p {
	color: #666;
	/* 内容：16px @ 1920 → 0.833333vw */
	font-size: clamp(13px, 0.833333vw, 16px);
	font-weight: 300;
	letter-spacing: 0;
	line-height: 1.5;
	max-width: 720px;
}

/* Figma 3:289 — mosaic 800×859: 392×276 / 392×568 / gaps 15×16 */
.phomi-materials__mosaic {
	align-self: stretch;
	box-sizing: border-box;
	display: grid;
	gap: 15px 16px;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 276fr 277fr 276fr;
	height: 100%;
	min-height: 859px;
	justify-content: stretch;
	justify-items: stretch;
	width: 800px;
}

.phomi-materials__mosaic img {
	box-sizing: border-box;
	display: block;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center center;
	width: 100%;
}

/* DOM: [0] tall left, [1] top-left, [2] top-right, [3] mid-right, [4] bot-right */
.phomi-materials__mosaic img:nth-child(1) {
	grid-column: 1;
	grid-row: 2 / span 2;
}

.phomi-materials__mosaic img:nth-child(2) {
	grid-column: 1;
	grid-row: 1;
}

.phomi-materials__mosaic img:nth-child(3) {
	grid-column: 2;
	grid-row: 1;
}

.phomi-materials__mosaic img:nth-child(4) {
	grid-column: 2;
	grid-row: 2;
}

.phomi-materials__mosaic img:nth-child(5) {
	grid-column: 2;
	grid-row: 3;
}

.phomi-product-lines {
	background: #f9f9f9;
	min-height: 1163px;
	padding: 166px 70px 120px;
	text-align: center;
}

.phomi-product-lines h2 {
	color: #000;
	font-family: var(--phomi-font);
	font-size: var(--phomi-tech-display-sm);
	font-weight: 400;
	letter-spacing: 0;
	line-height: var(--phomi-tech-display-sm-lh);
	margin: 0 auto 72px;
	max-width: 933px;
	/* text-transform: uppercase; */
}

.phomi-product-lines__grid {
	display: grid;
	gap: 17px;
	grid-template-columns: repeat(3, 402px);
	justify-content: center;
	text-align: left;
}

.phomi-product-lines__card {
	color: inherit;
	display: block;
	text-decoration: none;
}

.phomi-product-lines article .phomi-product-lines__media {
	aspect-ratio: 402 / 540;
	overflow: hidden;
}

.phomi-product-lines article img {
	aspect-ratio: auto;
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.phomi-product-lines h3 {
	color: #000;
	font-family: var(--phomi-font);
	font-size: var(--phomi-tech-product-title);
	font-weight: 400;
	letter-spacing: 0;
	line-height: var(--phomi-tech-product-title-lh);
	margin: 20px 0 2px;
	/* text-transform: uppercase; */
}

.phomi-product-lines p {
	color: #666;
	font-family: var(--phomi-font);
	font-size: var(--phomi-tech-body-sm);
	font-weight: 300;
	letter-spacing: 0;
	line-height: var(--phomi-tech-body-sm-lh);
	margin: 0;
}

.phomi-applications {
	background: #f7f7f7;
	padding: 120px 70px 80px;
}

.phomi-applications h2 {
	font-size: var(--phomi-tech-display-md);
	font-weight: 400;
	line-height: var(--phomi-tech-display-md-lh);
	margin-bottom: 70px;
	text-align: center;
	/* text-transform: uppercase; */
}

.phomi-applications__grid {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.phomi-applications__card {
	color: inherit;
	display: block;
	text-decoration: none;
}

.phomi-applications__media {
	aspect-ratio: 1 / 1;
	overflow: hidden;
	position: relative;
	width: 100%;
}

.phomi-applications__media::after {
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 42%, rgba(0, 0, 0, 0.55) 100%);
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
}

.phomi-applications article img {
	display: block;
	height: 100%;
	object-fit: cover;
	transition: transform 0.45s ease;
	width: 100%;
}

.phomi-applications h3 {
	bottom: 0;
	color: #fff;
	font-size: var(--phomi-tech-body-sm);
	font-weight: 300;
	left: 0;
	line-height: var(--phomi-tech-body-sm-lh);
	margin: 0;
	padding: 18px 16px;
	position: absolute;
	right: 0;
	/* text-transform: capitalize; */
	z-index: 1;
}

.phomi-applications__excerpt {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.phomi-applications__summary {
	color: #333;
	font-size: var(--phomi-tech-body-md, 18px);
	font-weight: 300;
	line-height: 1.65;
	margin: 48px auto 0;
	text-align: left;
}

.phomi-applications__summary p {
	margin: 0 0 1em;
}

.phomi-applications__summary p:last-child {
	margin-bottom: 0;
}

.phomi-applications a:hover,
.phomi-applications a:focus-visible {
	color: #fff;
}

.phomi-footer {
	background: #000;
	color: #d1d5db;
	display: grid;
	gap: 70px;
	grid-template-columns: repeat(6, 1fr);
	padding: 100px 70px 140px;
}

.phomi-footer strong {
	color: var(--phomi-blue);
	display: block;
	font-size: var(--phomi-tech-footer-heading);
	font-weight: 400;
	line-height: var(--phomi-tech-footer-heading-lh);
	margin-bottom: 40px;
}

.phomi-footer a {
	color: #d1d5db;
	display: block;
	font-size: var(--phomi-tech-footer-link);
	line-height: var(--phomi-tech-footer-link-lh);
	text-decoration: none;
}

.phomi-footer a:hover,
.phomi-footer a:focus-visible {
	color: var(--phomi-blue);
}

.phomi-process-card,
.phomi-product-lines article,
.phomi-applications article,
.phomi-benefit,
.phomi-cradle__item button,
.phomi-eco-property__tabs button {
	transition: background-color 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease, color 0.28s ease, opacity 0.28s ease, transform 0.28s ease;
}

.phomi-process-card:hover,
.phomi-applications article:hover {
	transform: none;
}

.phomi-digital-facade__media img,
.phomi-process-card img,
.phomi-product-lines img,
.phomi-applications img,
.phomi-materials img,
.phomi-low-carbon img,
.phomi-cradle__image {
	transition: filter 0.45s ease, transform 0.45s ease;
}

/* bug#3699：econiclay® TECHNOLOGY 右侧图片悬浮放大 1.05 倍；::after 渐变遮罩盖住图片下半部，故绑定在容器上，并以底边为原点避免放大后露出遮罩外 */
.phomi-digital-facade__media img {
	transform-origin: center bottom;
}

.phomi-digital-facade__media:hover img {
	transform: scale(1.05);
}

.phomi-process-card:hover img,
.phomi-product-lines article:hover img,
.phomi-materials img:hover,
.phomi-low-carbon img:hover,
.phomi-cradle__image:hover {
	filter: brightness(0.88);
}

.phomi-applications article:hover img,
.phomi-applications article:focus-within img,
.phomi-applications article.is-active img,
.phomi-applications__card:hover img,
.phomi-applications__card:focus-visible img {
	transform: scale(1.1);
}

.phomi-product-lines article:hover img,
.phomi-product-lines article:focus-within img,
.phomi-product-lines article.is-active img {
	transform: scale(1.06);
}

@media (prefers-reduced-motion: reduce) {
	.phomi-technology *,
	.phomi-technology *::before,
	.phomi-technology *::after {
		transition-duration: 0.01ms !important;
	}
}

@media (max-width: 1440px) {
	.phomi-digital-facade {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.phomi-digital-facade h2 {
		width: auto;
		white-space: normal;
	}

	.phomi-digital-facade__note {
		margin-top: 24px;
		position: static;
	}

	.phomi-process__grid {
		grid-template-columns: repeat(4, minmax(220px, 292px));
	}

	.phomi-materials__intro-body,
	.phomi-materials__science-body {
		gap: 48px;
		grid-template-columns: 1fr 1fr;
	}

	.phomi-materials__intro .phomi-benefit h3,
	.phomi-materials__science-benefits .phomi-benefit h3 {
		height: auto;
		min-height: 48px;
		padding: 16px 20px;
	}

	.phomi-materials__intro h2 {
		white-space: normal;
		width: auto;
	}

	.phomi-materials__mosaic {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: 276fr 277fr 276fr;
		height: 100%;
		min-height: 0;
		justify-content: stretch;
		justify-items: stretch;
		width: 100%;
	}

	.phomi-materials__mosaic img,
	.phomi-materials__mosaic img:nth-child(n) {
		grid-column: auto;
		grid-row: auto;
		height: 100%;
		max-width: 100%;
		width: 100%;
	}
}

@media (max-width: 1200px) {
	.phomi-digital-facade,
	.phomi-eco-property__panel,
	.phomi-cradle__content,
	.phomi-materials__intro,
	.phomi-materials__science,
	.phomi-footer {
		grid-template-columns: 1fr;
	}

	.phomi-process__grid,
	.phomi-product-lines__grid {
		grid-template-columns: repeat(2, minmax(280px, 402px));
	}

	.phomi-digital-facade__note {
		margin-top: 32px;
		position: static;
	}

	.phomi-digital-facade__media {
		min-height: 0;
	}

	.phomi-digital-facade__media img {
		height: clamp(420px, 58vw, 620px);
	}

	.phomi-eco-property__tabs {
		grid-template-columns: repeat(2, 1fr);
	}

	.phomi-materials__intro-body .phomi-materials__intro-media img {
		height: auto !important;
		margin-top: 0;
		max-width: 100%;
		width: 100% !important;
	}

	.phomi-materials__intro-media {
		height: auto;
		width: 100%;
	}
}

@media (max-width: 1024px) {
	.phomi-process__grid,
	.phomi-product-lines__grid,
	.phomi-applications__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.phomi-materials__intro-body,
	.phomi-materials__science-body {
		align-items: stretch;
		gap: 32px;
		grid-template-columns: 1fr;
	}

	.phomi-eco-property__tabs {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 767px) {
	.phomi-process__grid,
	.phomi-product-lines__grid,
	.phomi-applications__grid,
	.phomi-eco-property__tabs {
		grid-template-columns: 1fr;
	}

	.phomi-digital-facade,
	.phomi-process,
	.phomi-eco-property,
	.phomi-cradle,
	.phomi-low-carbon,
	.phomi-materials,
	.phomi-product-lines,
	.phomi-applications,
	.phomi-footer {
		padding-left: 24px;
		padding-right: 24px;
	}

	.phomi-tech-hero__content {
		left: 24px;
		right: 24px;
	}

	.phomi-logo {
		left: 50%;
		transform: translateX(-50%);
		width: 120px;
	}

	.phomi-nav {
		left: 0;
		padding: 0 14px;
		top: 70px;
		width: 100%;
	}

	.phomi-nav ul {
		flex-wrap: wrap;
		gap: 10px 14px;
		justify-content: center;
	}

	.phomi-nav a {
		font-size: 10px;
		line-height: 14px;
	}

	.phomi-dropdown {
		display: none;
	}

	.phomi-digital-facade__media img,
	.phomi-low-carbon img,
	.phomi-product-lines article img,
	.phomi-cradle__image {
		height: auto;
	}

	.phomi-process__grid,
	.phomi-product-lines__grid,
	.phomi-applications__grid,
	.phomi-eco-property__tabs {
		grid-template-columns: 1fr;
	}

	.phomi-eco-property__panel {
		padding: 56px 24px;
	}

}

/* Scaling fixes for Zentao #2461/#2462. */
.phomi-digital-facade {
	gap: clamp(32px, 3.958333vw, 76px);
	grid-template-columns: minmax(0, 1fr) minmax(420px, 0.72fr);
	height: auto;
	min-height: clamp(760px, 52.083333vw, 1000px);
	padding: clamp(72px, 4.479167vw, 86px) clamp(24px, 3.645833vw, 70px) clamp(80px, 6.770833vw, 130px);
}

.phomi-digital-facade h2 {
	font-size: var(--phomi-tech-display);
	line-height: var(--phomi-tech-display-lh);
}

.phomi-digital-facade__note {
	left: 70px;
	margin-top: 0;
	position: absolute;
	top: 786px;
}

.phomi-digital-facade__media img {
	height: auto;
	margin-top: clamp(32px, 6.145833vw, 118px);
	max-height: clamp(480px, 35.416667vw, 680px);
}

.phomi-process {
	padding: clamp(90px, 6.770833vw, 130px) clamp(24px, 3.645833vw, 70px) clamp(96px, 7.552083vw, 145px);
}

.phomi-process__grid {
	gap: clamp(16px, 1.302083vw, 25px);
	grid-template-columns: repeat(4, minmax(220px, 292px));
}

.phomi-process-card {
	height: auto;
	min-height: auto;
}

.phomi-eco-property {
	padding-top: clamp(80px, 6.25vw, 120px);
}

.phomi-eco-property__tabs button,
.phomi-eco-property__tabs button:hover,
.phomi-eco-property__tabs button:focus,
.phomi-eco-property__tabs button:active {
	min-height: clamp(110px, 7.8125vw, 150px);
	padding: clamp(20px, 1.302083vw, 25px) clamp(20px, 3.645833vw, 70px) clamp(20px, 1.25vw, 24px);
}

.phomi-eco-property__panel {
	align-items: center;
	gap: clamp(32px, 3.645833vw, 70px);
	grid-template-columns: minmax(0, 1fr) minmax(360px, 1.05fr);
	justify-content: center;
	min-height: auto;
	padding: clamp(64px, 5.208333vw, 100px) clamp(24px, 3.645833vw, 70px) clamp(72px, 6.25vw, 120px);
}

.phomi-eco-property__copy {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.phomi-eco-property__panel img {
	aspect-ratio: 920 / 460;
	height: auto;
}

.phomi-cradle {
	padding: clamp(80px, 6.25vw, 120px) clamp(24px, 3.645833vw, 70px) clamp(90px, 6.770833vw, 130px);
}

.phomi-cradle h2 {
	font-size: var(--phomi-tech-display-md);
}

.phomi-cradle__content {
	gap: clamp(32px, 3.229167vw, 62px);
	grid-template-columns: minmax(0, 637px) minmax(360px, 542px);
	width: min(100%, 1243px);
}

.phomi-cradle__item {
	border-bottom: 4px solid #fff;
}

.phomi-cradle__item button {
	align-items: center;
	background: #f9f9f9 !important;
	color: #333 !important;
	font-size: var(--phomi-tech-body);
	justify-content: space-between;
	line-height: var(--phomi-tech-body-lh);
	min-height: clamp(40px, 2.708333vw, 52px);
	padding: 14px 48px 14px 15px;
	text-align: left;
	/* text-transform: capitalize; */
}

.phomi-cradle__item.is-open button {
	background: #000 !important;
	color: #fff !important;
}

.phomi-cradle__item button span {
	color: currentColor;
	font-size: var(--phomi-tech-chevron);
	right: 15px;
}

.phomi-cradle__item div {
	padding: 8px 15px 24px;
}

.phomi-cradle__item p {
	color: #666;
	font-size: var(--phomi-tech-body-sm);
	font-weight: 400;
	line-height: var(--phomi-tech-body-sm-lh);
}

.phomi-cradle__image {
	aspect-ratio: 542 / 356;
	height: auto;
}

@media (min-width: 1600px) {
	.phomi-materials__intro-body {
		gap: clamp(48px, 5vw, 96px);
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.phomi-materials__intro-media {
		justify-self: end;
		margin-left: auto;
		max-width: 724px;
		width: 100%;
	}

	.phomi-materials__science-body {
		gap: clamp(48px, 3.854167vw, 74px);
		grid-template-columns: minmax(560px, 800px) minmax(520px, 720px);
	}

	/* 左列 track 在 1600–1919 会收窄到 800px 以下，mosaic 必须跟着 track 收，
	   否则 800px 定宽会先吃掉 gap，再压到右侧 benefit 标题上（~1600–1636 重叠）。 */
	.phomi-materials__mosaic {
		max-width: 100%;
		width: 100%;
	}
}

@media (max-width: 1599px) and (min-width: 1201px) {
	.phomi-materials__intro-body,
	.phomi-materials__science-body {
		align-items: stretch;
		gap: 48px;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.phomi-materials__benefits {
		max-width: 100%;
		width: 100%;
	}

	.phomi-materials__intro-media {
		justify-self: end;
		margin-left: auto;
		max-width: min(100%, 724px);
		width: 100%;
	}

	.phomi-materials__mosaic {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: 276fr 277fr 276fr;
		height: 100%;
		min-height: 0;
		justify-content: stretch;
		justify-items: stretch;
		margin-left: 0;
		max-width: 100%;
		width: 100%;
	}

	.phomi-materials__mosaic img,
	.phomi-materials__mosaic img:nth-child(n) {
		height: 100%;
		max-width: 100%;
		object-fit: cover;
		width: 100%;
	}

	.phomi-materials__mosaic img:nth-child(1) {
		grid-column: 1;
		grid-row: 2 / span 2;
	}

	.phomi-materials__mosaic img:nth-child(2) {
		grid-column: 1;
		grid-row: 1;
	}

	.phomi-materials__mosaic img:nth-child(3) {
		grid-column: 2;
		grid-row: 1;
	}

	.phomi-materials__mosaic img:nth-child(4) {
		grid-column: 2;
		grid-row: 2;
	}

	.phomi-materials__mosaic img:nth-child(5) {
		grid-column: 2;
		grid-row: 3;
	}
}

.phomi-materials__intro h2 {
	max-width: 100%;
	white-space: normal;
	width: auto;
}

.phomi-materials__intro-media {
	aspect-ratio: 724 / 438;
	height: auto;
	justify-self: end;
	margin-left: auto;
	max-width: 724px;
	overflow: hidden;
	width: 100%;
}

.phomi-materials__intro-body .phomi-materials__intro-media img {
	aspect-ratio: 724 / 438;
	display: block;
	height: 100%;
	max-width: 100%;
	object-fit: cover;
	width: 100%;
}

.phomi-product-lines {
	min-height: auto;
}

.phomi-product-lines__grid {
	grid-template-columns: repeat(3, minmax(260px, 402px));
}

.phomi-product-lines article .phomi-product-lines__media {
	aspect-ratio: 402 / 540;
}

.phomi-product-lines article img {
	height: 100%;
}

.phomi-applications__grid {
	gap: 16px;
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.phomi-applications article .phomi-applications__media {
	aspect-ratio: 1 / 1;
}

@media (max-width: 1200px) {
	.phomi-digital-facade,
	.phomi-eco-property__panel,
	.phomi-cradle__content,
	.phomi-materials__intro-body,
	.phomi-materials__science-body {
		align-items: stretch;
		grid-template-columns: 1fr;
	}

	.phomi-materials__mosaic {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: none;
		height: auto;
		justify-content: start;
		justify-items: stretch;
		width: 100%;
	}

	.phomi-materials__mosaic img,
	.phomi-materials__mosaic img:nth-child(n) {
		aspect-ratio: 392 / 276;
		grid-column: auto;
		grid-row: auto;
		height: auto;
		width: 100%;
	}

	.phomi-digital-facade__media img {
		margin-top: 0;
		max-height: none;
	}

	.phomi-process__grid,
	.phomi-product-lines__grid {
		grid-template-columns: repeat(2, minmax(260px, 1fr));
	}
}

@media (max-width: 767px) {
	.phomi-digital-facade {
		min-height: auto;
	}

	.phomi-eco-property__tabs,
	.phomi-process__grid,
	.phomi-product-lines__grid,
	.phomi-applications__grid {
		grid-template-columns: 1fr;
	}

	.phomi-eco-property__panel {
		padding: 56px 24px;
	}

	.phomi-cradle__content {
		padding-top: 40px;
	}

	.phomi-materials__mosaic {
		display: grid;
		gap: 12px;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: none;
		height: auto;
		justify-content: start;
		width: 100%;
	}

	.phomi-materials__mosaic img,
	.phomi-materials__mosaic img:nth-child(n) {
		aspect-ratio: 392 / 276;
		display: block;
		grid-column: auto;
		grid-row: auto;
		height: auto;
		margin: 0;
		width: 100%;
	}
}


/* Figma 3:70 — Digital Facade layout + typography. */
.phomi-digital-facade {
	display: block !important;
	gap: 0;
	grid-template-columns: none !important;
	height: 1000px !important;
	min-height: 1000px !important;
	overflow: hidden;
	padding: 0 !important;
	position: relative;
}

.phomi-digital-facade__copy {
	box-sizing: border-box;
	max-width: 1100px;
	padding: 130px 0 0 71px;
	position: relative;
	z-index: 2;
}

.phomi-digital-facade .phomi-tech-kicker {
	align-items: baseline;
	color: #79bdc8;
	display: block;
	font-family: "GTF Adieu TRIAL";
	font-size: var(--phomi-tech-kicker-lg);
	font-weight: 300;
	line-height: var(--phomi-tech-kicker-lg-lh);
	margin: 0 0 14px;
	width: auto;
}

.phomi-digital-facade .phomi-tech-kicker__brand,
.phomi-digital-facade .phomi-tech-kicker__suffix {
	color: inherit;
	display: inline;
	flex: none;
	font-size: inherit;
	font-weight: 300;
	line-height: inherit;
	margin: 0;
	position: static;
	/* text-transform: none; */
}

.phomi-digital-facade .phomi-tech-kicker__brand {
	/* text-transform: lowercase; */
}

.phomi-digital-facade .phomi-tech-kicker__suffix {
	margin-left: 0.3em;
}

.phomi-digital-facade .phomi-tech-kicker__mark,
.phomi-digital-facade .phomi-tech-kicker .phomi-tech-kicker__mark,
.phomi-digital-facade .phomi-tech-kicker sup {
	color: #79bdc8 !important;
	display: inline !important;
	flex: none !important;
	font-size: 0.58em !important;
	font-weight: 300 !important;
	height: auto !important;
	left: auto !important;
	line-height: 0 !important;
	margin: 0 0.06em 0 0.02em !important;
	padding: 0 !important;
	position: relative !important;
	right: auto !important;
	top: -0.55em !important;
	transform: none !important;
	vertical-align: baseline !important;
	width: auto !important;
}

.phomi-digital-facade h2 {
	color: #70c7d1 !important;
	font-family: "GTF Adieu TRIAL";
	font-size: var(--phomi-tech-display) !important;
	font-weight: 400 !important;
	height: auto !important;
	letter-spacing: 0;
	line-height: var(--phomi-tech-display-lh) !important;
	margin: 0 0 60px !important;
	max-width: 1016px;
	/* text-transform: uppercase; */
	width: auto !important;
}

.phomi-digital-facade__intro {
	color: #fff;
	font-family: "GTF Adieu TRIAL";
	font-size: var(--phomi-tech-lead);
	font-weight: 300;
	line-height: var(--phomi-tech-lead-lh);
	margin: 0;
	max-width: 1016px;
}

/*
 * Note: left Figma x71. Top aligns with solar 第2条边
 * (divider before 第三格 ≈ media 540 → section 859).
 */
.phomi-digital-facade__note {
	background: none !important;
	box-sizing: border-box;
	color: rgba(255, 255, 255, 0.7);
	font-family: "GTF Adieu TRIAL";
	font-size: var(--phomi-tech-body-sm) !important;
	font-weight: 300;
	left: 71px !important;
	line-height: var(--phomi-tech-body-sm-lh) !important;
	margin: 0 !important;
	max-width: 883px;
	padding: 0 0 0 23px !important;
	position: absolute !important;
	/* text-transform: capitalize; */
	top: 859px !important;
	width: 883px;
	z-index: 3;
}

.phomi-digital-facade__note::before {
	background: #70c7d1;
	content: "";
	height: 70px;
	left: 0;
	position: absolute;
	top: 9px;
	width: 2px;
}

/*
 * Visible panels = Group 156 (623×680), not outer Group 591 (766).
 * Page x1170 → right gap 127px. Image 14 sits at +3/+12 inside the clip.
 */
/*
 * bug#3809：后台可替换图片（如 1536×1024 横图），不再按 Figma 竖图写死 674×811 裁切 + top 319px；
 * 图片按原比例铺满容器宽度，容器顶部与左侧 h2 顶部对齐（copy 上内边距 130 + kicker 行高 + 14 间距）。
 */
.phomi-digital-facade__media {
	height: auto !important;
	left: auto !important;
	margin: 0 !important;
	max-height: 680px;
	min-height: 0;
	overflow: hidden;
	position: absolute !important;
	right: 127px !important;
	top: calc(130px + var(--phomi-tech-kicker-lg-lh) + 14px) !important;
	width: 623px !important;
	z-index: 1;
}

.phomi-digital-facade__media img {
	display: block;
	height: auto !important;
	margin: 0 !important;
	max-height: none !important;
	max-width: 100% !important;
	position: relative !important;
	width: 100% !important;
}

/*
 * Fade aligns with 第三格前四个字段.
 * M3 starts ≈540 (media); first 4 cell rows ≈120px.
 * Overlay covers M3; gradient stays clear across those four fields, then falls to black.
 */
.phomi-digital-facade__media::after {
	background: linear-gradient(
		to top,
		#000 0%,
		rgba(0, 0, 0, 0.92) 18%,
		rgba(0, 0, 0, 0.45) 45%,
		rgba(0, 0, 0, 0) 86%
	) !important;
	bottom: 0 !important;
	content: "" !important;
	display: block !important;
	height: 141px !important;
	left: 0 !important;
	pointer-events: none;
	position: absolute !important;
	right: auto !important;
	top: auto !important;
	width: 100% !important;
	z-index: 2;
}

@media (max-width: 1440px) {
	.phomi-digital-facade {
		align-items: start;
		column-gap: clamp(24px, 3vw, 48px);
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) minmax(280px, 420px) !important;
		height: auto !important;
		min-height: 0 !important;
		overflow: visible !important;
		padding: clamp(72px, 8vw, 110px) clamp(24px, 3vw, 40px) clamp(40px, 4vw, 56px) !important;
	}

	.phomi-digital-facade__copy {
		grid-column: 1;
		height: auto !important;
		max-width: none;
		padding: 0;
	}

	.phomi-digital-facade h2 {
		font-size: var(--phomi-tech-display) !important;
		line-height: 1 !important;
		margin-bottom: clamp(28px, 3vw, 40px) !important;
		white-space: normal;
	}

	.phomi-digital-facade__media {
		align-self: start;
		grid-column: 2;
		grid-row: 1;
		height: auto !important;
		left: auto !important;
		position: relative !important;
		right: auto !important;
		top: auto !important;
		width: 100% !important;
	}

	.phomi-digital-facade__media img {
		display: block !important;
		height: auto !important;
		left: 0 !important;
		max-height: clamp(360px, 42vw, 520px) !important;
		object-fit: cover !important;
		object-position: center top !important;
		position: relative !important;
		top: 0 !important;
		width: 100% !important;
	}

	.phomi-digital-facade__media::after {
		bottom: 0 !important;
		height: 40% !important;
		min-height: 120px !important;
		top: auto !important;
	}

	.phomi-digital-facade__note {
		bottom: auto !important;
		left: auto !important;
		margin-top: clamp(28px, 15vw, 100px) !important;
		position: relative !important;
		top: auto !important;
		width: auto;
	}
}

@media (max-width: 1200px) {
	.phomi-digital-facade {
		display: flex !important;
		flex-direction: column;
		height: auto !important;
		min-height: 0 !important;
		overflow: visible !important;
		padding: clamp(56px, 8vw, 72px) 24px clamp(32px, 5vw, 48px) !important;
	}

	.phomi-digital-facade__copy {
		height: auto !important;
		max-width: none;
		padding: 0;
	}

	.phomi-digital-facade__media {
		flex: 0 0 auto;
		height: auto !important;
		left: auto !important;
		margin: clamp(24px, 4vw, 32px) 0 0 !important;
		overflow: hidden !important;
		position: relative !important;
		right: auto !important;
		top: auto !important;
		width: 100% !important;
	}

	.phomi-digital-facade__media img {
		display: block !important;
		height: auto !important;
		left: 0 !important;
		margin: 0 !important;
		max-height: clamp(280px, 52vw, 480px) !important;
		max-width: 100% !important;
		object-fit: cover !important;
		object-position: center top !important;
		position: relative !important;
		top: 0 !important;
		width: 100% !important;
	}

	.phomi-digital-facade__media::after {
		bottom: 0 !important;
		height: 40% !important;
		min-height: 141px !important;
		top: auto !important;
	}

	.phomi-digital-facade__note {
		bottom: auto !important;
		left: auto !important;
		margin-top: clamp(24px, 4vw, 32px) !important;
		position: relative !important;
		top: auto !important;
		width: auto;
	}
}

/* Technology inquiry 表单 Submit 按钮缩小 20% */
#primary.phomi-technology .phomi-inquiry .phomi-form button[type="submit"] {
	font-size: clamp(12.8px, 1vw, 19.2px);
	height: clamp(32px, 3.75vw, 72px);
	max-height: clamp(32px, 3.75vw, 72px);
	width: min(100%, clamp(160px, 13.625vw, 261.6px));
}