/* ==========================================================================
   The Partners page (29.09): the user found the text-only version "boring, no images".

   A full-screen photo hero; the kit as real product pictures beside
   four icon cards; the maker as a navy band with DAHAI's production photos and certificate
   scans; Growatt from the same company; picture cards for what partners get and who we look
   for; the documents pack as tiles. The steps band, the FAQ photo and the form photo are
   variants of shared blocks and live in pages.css.
   Loaded after pages.css on this page only (inc/assets.php). Tokens from main.css only;
   green and amber never carry text on paper.
   ========================================================================== */

.page-key-partners .pkit__head h2,
.page-key-partners .pmaker__text h2,
.page-key-partners .pgw__text h2,
.page-key-partners .picards__head h2,
.page-key-partners .pdocs__head h2 { font-size: clamp(1.9rem, 1.3rem + 2vw, 3rem); }

/* -------------------------------------------------------------------------- Hero */

.phero {
	position: relative;
	z-index: 4; /* over the page wire: the wire starts where the hero ends */
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 100vh;
	min-height: 100svh;
	overflow: hidden;
	background: var(--deep-2);
	color: #fff;
}
.phero__media { position: absolute; inset: 0; overflow: hidden; }
.phero__pic,
.phero__pic img { position: absolute; inset: 0; width: 100%; height: 100%; }
.phero__pic img { object-fit: cover; object-position: 72% 40%; }
@media (prefers-reduced-motion: no-preference) {
	.phero__pic img { animation: phero-settle 12s var(--ease) both; }
}
@keyframes phero-settle {
	from { transform: scale(1.08); }
	to { transform: scale(1); }
}
/* The copy stands in the left-hand column over the sky; the installer is on the right. */
.phero__scrim {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, rgba(4, 28, 66, 0.94) 0%, rgba(4, 28, 66, 0.8) 30%, rgba(4, 28, 66, 0.32) 56%, rgba(4, 28, 66, 0) 74%),
		linear-gradient(0deg, rgba(4, 28, 66, 0.88) 0%, rgba(4, 28, 66, 0) 34%),
		linear-gradient(180deg, rgba(4, 28, 66, 0.6) 0%, rgba(4, 28, 66, 0) 22%);
}
.phero__inner {
	position: relative;
	z-index: 2;
	padding-top: calc(var(--hdr-h) + var(--safe-top) + 40px);
	padding-bottom: clamp(28px, 5vh, 56px);
}
.phero__text { display: grid; justify-items: start; width: min(100%, 660px); }
.phero .trail { margin-bottom: clamp(18px, 3vh, 30px); color: var(--on-deep-2); }
.phero .trail::before,
.phero .trail .pg-n__node { display: none; }
.phero .trail [aria-current] { color: #fff; }
.phero .trail li + li::before { color: var(--on-deep-3); }
.phero__eyebrow { color: var(--green); }
.phero__h1 {
	margin-top: 14px;
	max-width: 12ch;
	font-size: min(clamp(2.6rem, 1.2rem + 4.2vw, 5.6rem), 10vh);
	line-height: 0.98;
	font-stretch: 84%;
	font-weight: 580;
	letter-spacing: -0.024em;
	color: #fff;
}
.phero__lead { max-width: 34em; margin-top: clamp(16px, 2.6vh, 24px); font-size: var(--fs-lead); line-height: 1.5; color: #fff; }
.phero__sub { max-width: 36em; margin-top: 12px; color: var(--on-deep-2); }
.phero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(22px, 3.6vh, 34px); }

@media (max-width: 899.98px) {
	.phero__pic img { object-position: 74% 30%; }
	.phero__scrim {
		background:
			linear-gradient(0deg, rgba(4, 28, 66, 0.96) 0%, rgba(4, 28, 66, 0.82) 55%, rgba(4, 28, 66, 0.35) 85%, rgba(4, 28, 66, 0.2) 100%);
	}
	/* The copy runs the full width here: room under the buttons for the "Scroll" hint. */
	.phero__inner { padding-top: calc(var(--hdr-h) + var(--safe-top) + 34vh); padding-bottom: max(clamp(28px, 5vh, 56px), 96px); }
}

/* -------------------------------------------------------------------------- The kit */

.pkit { padding-block: clamp(64px, 8vw, 128px); border-bottom: 1px solid var(--line); }
.pkit__head { display: grid; gap: 18px; margin-bottom: clamp(32px, 4vw, 56px); }
.pkit__head h2 { max-width: 20ch; }
.pkit__grid { display: grid; gap: 20px; }
@media (min-width: 1024px) {
	.pkit__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: stretch; }
}
.pkit__set {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 22px;
	margin: 0;
	padding: clamp(20px, 3vw, 36px);
	border: 1px solid var(--line);
	border-radius: 20px;
	background: #fff;
	box-shadow: 0 34px 70px -48px rgba(6, 39, 90, 0.45);
}
/* The row takes the card's spare height when the points beside it are taller. */
.pkit__items { display: flex; flex: 1; align-items: center; gap: 6px; }
.pkit__item { flex: 1 1 0; min-width: 0; }
.pkit__item a { display: grid; gap: 6px; justify-items: center; text-align: center; text-decoration: none; }
.pkit__pic { display: block; width: 100%; aspect-ratio: 3 / 4; }
@media (min-width: 1024px) { .pkit__pic { aspect-ratio: 2 / 3; } }
.pkit__pic picture, .pkit__pic img { width: 100%; height: 100%; }
.pkit__pic img { object-fit: contain; transition: transform 0.5s var(--ease); }
.pkit__item a:hover img, .pkit__item a:focus-visible img { transform: translateY(-6px); }
.pkit__type { margin-top: 6px; font-weight: 600; color: var(--ink); line-height: 1.2; }
.pkit__item a:hover .pkit__type { text-decoration: underline; text-underline-offset: 0.2em; }
.pkit__model { color: var(--ink-3); text-transform: none; letter-spacing: 0.02em; white-space: nowrap; }
@media (max-width: 479.98px) {
	.pkit__set { padding-inline: 14px; }
	.pkit__model { font-size: 0.6rem; letter-spacing: 0; }
	.pkit__type { font-size: 0.9rem; }
}
.pkit__plus { flex: none; align-self: center; margin-bottom: 52px; font: 300 clamp(1.6rem, 1.2rem + 1vw, 2.4rem)/1 var(--sans); color: var(--dim); }
.pkit__cap {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-top: 18px;
	border-top: 1px dashed var(--line-2);
	color: var(--ink);
	font-weight: 560;
}
.pkit__cap::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(123, 174, 45, 0.18); }

.pkit__points { display: grid; gap: 14px; }
@media (min-width: 640px) { .pkit__points { grid-template-columns: 1fr 1fr; } }
.pkit__point {
	display: grid;
	align-content: start;
	gap: 8px;
	padding: 22px;
	border: 1px solid var(--line);
	border-radius: 16px;
	background: #fbfaf7;
	transition: border-color 0.3s var(--ease), transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.pkit__point:hover { border-color: var(--ink); transform: translateY(-3px); box-shadow: 0 20px 40px -30px rgba(6, 39, 90, 0.45); }
.pkit__sym { width: 40px; height: 40px; margin-bottom: 6px; padding: 8px; border-radius: 10px; background: var(--deep); color: var(--amber); stroke-width: 1.6; }
.pkit__t { font-size: 1.14rem; font-weight: 600; color: var(--ink); line-height: 1.3; }
.pkit__d { color: var(--ink-2); }

/* -------------------------------------------------------------------------- The maker (navy) */

.pmaker { padding-block: clamp(64px, 8vw, 128px); }
.pmaker__grid { display: grid; gap: 40px 64px; }
@media (min-width: 1024px) {
	.pmaker__grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: center; }
}
.pmaker__text { display: grid; gap: 20px; align-content: start; justify-items: start; }
.pmaker__text h2 { max-width: 14ch; color: #fff; }
.pmaker__p { color: var(--on-deep-2); font-size: var(--fs-lead); line-height: 1.55; }
.pmaker .pg-n { color: var(--on-deep-2); }
.pmaker .pg-n__node { background: var(--deep); }
.pmaker .pg-n.is-live .pg-n__node { background: var(--amber); }
.pmaker__facts { display: grid; grid-template-columns: 1fr 1fr; width: 100%; border-top: 1px solid rgba(255, 255, 255, 0.16); }
.pmaker__facts li { display: grid; gap: 4px; align-content: start; padding: 18px 16px 18px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.16); }
.pmaker__facts li:nth-child(even) { padding-left: 16px; border-left: 1px solid rgba(255, 255, 255, 0.16); }
.pmaker__fig { font-size: clamp(1.6rem, 1.1rem + 1.4vw, 2.4rem); color: #fff; }
.pmaker__fig-l { color: var(--on-deep-2); font-size: 0.9rem; line-height: 1.35; }
.pmaker__cta { margin-top: 6px; }

.pmaker__mosaic { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pmaker__tile { position: relative; overflow: hidden; border-radius: 14px; background: var(--deep-2); }
.pmaker__tile--big { grid-column: 1 / -1; }
.pmaker__tile a { display: block; }
.pmaker__tile img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 0.8s var(--ease); }
.pmaker__tile--big img { aspect-ratio: 16 / 8; }
.pmaker__tile a:hover img, .pmaker__tile a:focus-visible img { transform: scale(1.04); }
.pmaker__cap {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 30px 14px 10px;
	background: linear-gradient(0deg, rgba(4, 28, 66, 0.88), rgba(4, 28, 66, 0));
	color: #fff;
	font-size: 0.82rem;
	line-height: 1.35;
	pointer-events: none;
}

.pmaker__certs {
	display: flex;
	align-items: flex-end;
	gap: clamp(14px, 2vw, 26px);
	margin-top: clamp(40px, 5vw, 64px);
	padding: 28px 4px 8px;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	overflow-x: auto;
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, 0.28) transparent;
}
.pmaker__cert { flex: none; }
.pmaker__cert a {
	display: block;
	width: clamp(78px, 8vw, 104px);
	padding: 5px;
	border-radius: 4px;
	background: #fff;
	box-shadow: 0 16px 30px -14px rgba(0, 0, 0, 0.6);
	transform: rotate(var(--r, -2deg));
	transition: transform 0.4s var(--spring);
}
.pmaker__cert:nth-child(even) a { --r: 2.5deg; }
.pmaker__cert:nth-child(3n) a { --r: -1deg; }
.pmaker__cert a:hover, .pmaker__cert a:focus-visible { transform: rotate(0) translateY(-6px) scale(1.06); }

/* -------------------------------------------------------------------------- Growatt from the same company */

.pgw {
	padding-block: clamp(64px, 8vw, 128px);
	overflow: hidden;
	border-bottom: 1px solid var(--line);
	background: linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%);
}
.pgw__grid { display: grid; gap: 48px 64px; }
@media (min-width: 1024px) {
	.pgw__grid { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); align-items: center; }
}
.pgw__text { display: grid; gap: 18px; justify-items: start; }
.pgw__brand { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.pgw__logo { width: auto; height: clamp(22px, 1.8vw, 28px); }
.pgw__eyebrow { padding-left: 16px; border-left: 1px solid var(--line-2); color: var(--ink-2); }
.pgw__text h2 { max-width: 17ch; }
.pgw__p { max-width: 36em; color: var(--ink-2); font-size: 1.06rem; }
.pgw__facts { display: grid; width: 100%; max-width: 36em; border-top: 1px solid var(--line); }
.pgw__facts div { display: grid; grid-template-columns: minmax(7.5em, 0.4fr) 1fr; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.pgw__facts dt { align-self: center; color: var(--ink-3); }
.pgw__facts dd { color: var(--ink); font-weight: 560; }
.pgw__cta { margin-top: 6px; }

.pgw__art { position: relative; padding-bottom: clamp(28px, 4vw, 48px); }
.pgw__photo { margin: 0; }
.pgw__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 38% 50%; border-radius: 18px; }
.pgw__cap { max-width: 60%; margin-top: 12px; color: var(--ink-3); font-size: 0.72rem; text-transform: none; letter-spacing: 0.02em; }
.pgw__cert { position: absolute; right: clamp(8px, 2vw, 20px); bottom: 0; width: clamp(120px, 30%, 210px); margin: 0; transform: rotate(3deg); }
.pgw__cert-link {
	display: block;
	padding: 7px;
	border-radius: 6px;
	background: #fff;
	box-shadow: 0 30px 60px -22px rgba(6, 39, 90, 0.6);
	transition: transform 0.45s var(--spring);
}
.pgw__cert-link:hover, .pgw__cert-link:focus-visible { transform: rotate(-3deg) scale(1.04); }
.pgw__cert-cap { margin-top: 10px; color: var(--ink-3); font-size: 0.68rem; text-transform: none; letter-spacing: 0.02em; text-align: right; }

/* -------------------------------------------------------------------------- Picture cards */

.picards { padding-block: clamp(64px, 8vw, 128px); border-bottom: 1px solid var(--line); }
.picards__head { display: grid; gap: 18px; margin-bottom: clamp(32px, 4vw, 56px); }
.picards__head h2 { max-width: 20ch; }
.picards__list { display: grid; gap: 18px; }
@media (min-width: 720px) { .picards__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .picards__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.picard {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: 18px;
	background: #fff;
	transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease);
}
.picard:hover { transform: translateY(-4px); box-shadow: 0 30px 56px -38px rgba(6, 39, 90, 0.5); }
.picard__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-bottom: 1px solid var(--line); background: #fff; }
.picard__body { display: grid; flex: 1; gap: 8px; align-content: start; padding: 22px 22px 24px; }
.picard__t { font-size: 1.2rem; font-weight: 600; line-height: 1.25; color: var(--ink); }
.picard__d { color: var(--ink-2); }
.picard__cta { justify-self: start; margin-top: 8px; }
.picard--plain .picard__media { display: grid; place-items: center; background: var(--deep); }
.picard__sym { width: 64px; height: 64px; color: var(--amber); stroke-width: 1.2; }

.picards__terms {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px 32px;
	margin-top: 18px;
	padding: 22px 26px;
	border: 1px solid var(--line);
	border-radius: 18px;
	background: var(--paper-2);
}
.picards__terms p { max-width: 44em; color: var(--ink-2); font-size: 1.06rem; }
.picards__terms strong { color: var(--ink); }

/* Who we look for: tall photo cards, the title on the photo. */
.picards--audience .picard { border-color: transparent; background: var(--deep); }
.picards--audience .picard__media { aspect-ratio: 4 / 5; border-bottom: 0; background: var(--deep-2); }
.picards--audience .picard__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(6, 39, 90, 1) 0%, rgba(6, 39, 90, 0.35) 38%, rgba(6, 39, 90, 0) 64%);
	pointer-events: none;
}
.picard__title {
	position: absolute;
	left: 22px;
	right: 22px;
	bottom: 14px;
	z-index: 1;
	color: #fff;
	font-size: clamp(1.4rem, 1.1rem + 0.8vw, 1.85rem);
	line-height: 1.1;
}
.picards--audience .picard__body { padding-top: 6px; }
.picards--audience .picard__d { color: var(--on-deep-2); }
.picards--audience .picard__cta { color: #fff; }
.picards--audience .picard__cta:hover { color: var(--amber); }
.picards--audience .picard:focus-within { box-shadow: 0 0 0 2px var(--amber); }
.picards__ask {
	max-width: 52em;
	margin-top: 22px;
	padding: 18px 22px;
	border-left: 3px solid var(--green);
	border-radius: 0 12px 12px 0;
	background: var(--paper-2);
	color: var(--ink);
	font-size: 1.06rem;
}

/* -------------------------------------------------------------------------- Pictures in cards and tiles */

.pmedia { position: absolute; inset: 0; }
.pmedia picture, .pmedia img { display: block; }
.pmedia--cover picture, .pmedia--cover img { width: 100%; height: 100%; }
.pmedia--cover img { object-fit: cover; transition: transform 0.8s var(--ease); }
.picard:hover .pmedia--cover img, .pdocs__tile:hover .pmedia--cover img { transform: scale(1.05); }

/* Three product line-ups side by side: each shows the product in its middle. */
.pmedia--trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); }
.pmedia--trio picture, .pmedia--trio img { width: 100%; height: 100%; }
.pmedia--trio img { object-fit: cover; background: #fff; transition: transform 0.6s var(--ease); }
.picard:hover .pmedia--trio .pmedia__item--2 img { transform: translateY(-4px); }

/* Documents fanned out on paper. */
.pmedia--fan, .pmedia--doc { background: var(--paper-2); }
.pmedia--fan .pmedia__item { position: absolute; top: 11%; height: 80%; }
.pmedia--fan img { width: auto; height: 100%; padding: 4px; border-radius: 3px; background: #fff; box-shadow: 0 18px 34px -16px rgba(6, 39, 90, 0.55); }
.pmedia--fan .pmedia__item--1 { left: 50%; transform: translateX(-88%) rotate(-7deg); transform-origin: bottom center; transition: transform 0.5s var(--spring); }
.pmedia--fan .pmedia__item--2 { left: 50%; transform: translateX(-12%) rotate(5deg); transform-origin: bottom center; transition: transform 0.5s var(--spring); }
.pmedia--fan .pmedia__item--3 { left: 50%; transform: translateX(-50%) rotate(-1deg); }
.picard:hover .pmedia--fan .pmedia__item--1, .pdocs__tile:hover .pmedia--fan .pmedia__item--1 { transform: translateX(-96%) rotate(-10deg); }
.picard:hover .pmedia--fan .pmedia__item--2, .pdocs__tile:hover .pmedia--fan .pmedia__item--2 { transform: translateX(-4%) rotate(8deg); }
.pmedia--doc { display: grid; place-items: center; padding: 10%; }
.pmedia--doc .pmedia__item { width: 100%; }
.pmedia--doc img { width: 100%; height: auto; padding: 4px; border-radius: 3px; background: #fff; box-shadow: 0 18px 34px -16px rgba(6, 39, 90, 0.55); transform: rotate(-2deg); transition: transform 0.5s var(--spring); }
.pdocs__tile:hover .pmedia--doc img, .picard:hover .pmedia--doc img { transform: rotate(0) scale(1.03); }

/* Product pictures, two by two. */
.pmedia--grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); }
.pmedia--grid picture, .pmedia--grid img { width: 100%; height: 100%; min-height: 0; }
.pmedia--grid img { padding: 8%; object-fit: contain; background: #fff; }

/* Product pictures side by side, standing on one line. The pictures are squares on white with
   wide margins: they overlap, and multiply makes the overlapping white disappear. */
.pmedia--row { display: flex; align-items: flex-end; justify-content: center; padding: 0 2% 4%; background: #fff; }
.pmedia--row .pmedia__item { flex: 0 0 46%; min-width: 0; margin-inline: -5.5%; }
.pmedia--row .pmedia__item:nth-child(2) { position: relative; z-index: 1; }
.pmedia--row img { width: 100%; height: auto; mix-blend-mode: multiply; transition: transform 0.5s var(--ease); }
.picard:hover .pmedia--row .pmedia__item:nth-child(2) img { transform: translateY(-5px); }

/* A drawing from the kit. */
.pmedia--svg { display: grid; place-items: center; padding: 8%; background: #fff; }
.pmedia--svg img { width: 100%; height: auto; }

/* -------------------------------------------------------------------------- The documents pack */

.pdocs { padding-block: clamp(64px, 8vw, 128px); border-bottom: 1px solid var(--line); }
.pdocs__head { display: grid; gap: 18px; margin-bottom: clamp(32px, 4vw, 56px); }
.pdocs__head h2 { max-width: 20ch; }
.pdocs__tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (min-width: 760px) { .pdocs__tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .pdocs__tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.pdocs__tile {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: 16px;
	background: #fff;
	transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.pdocs__tile:hover { transform: translateY(-3px); box-shadow: 0 24px 44px -34px rgba(6, 39, 90, 0.5); }
.pdocs__thumb { position: relative; aspect-ratio: 1; overflow: hidden; border-bottom: 1px solid var(--line); background: var(--paper-2); }
/* The range line-ups are on white: shown whole. The drawing is wide and fine-lined: shown
   closer, its middle series filling the tile. */
.pdocs .pmedia--cover img { padding: 10% 6%; object-fit: contain; background: #fff; }
.pdocs .pmedia--svg { padding: 0; overflow: hidden; }
.pdocs .pmedia--svg img { width: 230%; max-width: none; }
.pdocs__name { display: flex; flex: 1; align-items: flex-start; gap: 10px; padding: 14px 16px 16px; color: var(--ink); font-weight: 560; line-height: 1.3; }
.pdocs__check { width: 18px; height: 18px; margin-top: 1px; color: var(--green-t); stroke-width: 2; }
@media (max-width: 479.98px) {
	.pdocs__name { gap: 6px; padding: 12px 12px 14px; font-size: 0.92rem; }
	.pdocs__check { width: 15px; height: 15px; margin-top: 2px; }
}
.pdocs__login { max-width: 52em; margin-top: 22px; color: var(--ink-2); }

/* -------------------------------------------------------------------------- Motion */

@media (prefers-reduced-motion: reduce) {
	.pkit__point, .picard, .pdocs__tile, .pmaker__cert a, .pgw__cert-link,
	.pmedia img, .pmedia .pmedia__item, .pkit__pic img, .pmaker__tile img { transition: none; }
	.pkit__point:hover, .picard:hover, .pdocs__tile:hover { transform: none; }
}