/* ==========================================================================
   The Growatt page (29.09): the user found the first version "boring".

   A full-screen hero whose pictures take turns (the RISE at the Lviv launch, the RISE on a
   made-up dusk, the AXE at the launch), the authorisation on a lit stage, the range as three
   tiles that work as tabs, the RISE on a dark stage with its figures, the systems drawn with
   real product pictures, the launch as a mosaic, the quote form on the navy band.
   Loaded after pages.css on this page only (inc/assets.php). Motion: assets/js/growatt.js;
   none of it with reduced motion, and without the script everything simply stands.
   ========================================================================== */

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

.ghero {
	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;
}
.ghero__media { position: absolute; inset: 0; overflow: hidden; }
.ghero__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.5s var(--ease-in-out); }
.ghero__slide.is-on { opacity: 1; }
.ghero__pic,
.ghero__pic img { position: absolute; inset: 0; width: 100%; height: 100%; }
.ghero__pic img {
	object-fit: cover;
	object-position: var(--pos, 50% 50%);
	transform-origin: var(--pos, 50% 50%);
}
/* The slow zoom runs on the picture that is showing and on the one fading out, so neither jumps. */
@media (prefers-reduced-motion: no-preference) {
	.ghero.is-moving .ghero__slide.is-on img,
	.ghero.is-moving .ghero__slide.is-out img { animation: ghero-zoom 9s linear forwards; }
	.ghero.is-paused .ghero__slide img { animation-play-state: paused; }
}
@keyframes ghero-zoom {
	from { transform: scale(1); }
	to { transform: scale(1.07); }
}
/* The text stands in the right-hand column: every picture has its product in the left half. */
.ghero__scrim {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(270deg, rgba(4, 28, 66, 0.94) 0%, rgba(4, 28, 66, 0.8) 30%, rgba(4, 28, 66, 0.3) 56%, rgba(4, 28, 66, 0) 74%),
		linear-gradient(0deg, rgba(4, 28, 66, 0.86) 0%, rgba(4, 28, 66, 0) 32%),
		linear-gradient(180deg, rgba(4, 28, 66, 0.6) 0%, rgba(4, 28, 66, 0) 22%);
}

.ghero__inner {
	position: relative;
	z-index: 2;
	display: flex;
	justify-content: flex-end;
	padding-top: calc(var(--hdr-h) + var(--safe-top) + 40px);
	padding-bottom: clamp(20px, 4vh, 44px);
}
.ghero__text { display: grid; justify-items: start; width: min(100%, 640px); }
.ghero .trail { margin-bottom: clamp(18px, 3vh, 30px); color: var(--on-deep-2); }
.ghero .trail::before,
.ghero .trail .pg-n__node { display: none; }
.ghero .trail [aria-current] { color: #fff; }
.ghero .trail li + li::before { color: var(--on-deep-3); }

.ghero__brands { display: flex; align-items: center; gap: 14px; }
.ghero__growatt { width: auto; height: clamp(22px, 1.9vw, 30px); }
.ghero__x { color: var(--on-deep-3); font-size: 1.15rem; line-height: 1; }
.ghero__dahai { width: auto; height: clamp(20px, 1.7vw, 27px); aspect-ratio: 348 / 69; }
.ghero__dahai .logo__n { fill: #fff; }
.ghero__eyebrow { margin-top: clamp(18px, 3vh, 28px); color: var(--green); }
.ghero__h1 {
	margin-top: 14px;
	max-width: 13ch;
	font-size: min(clamp(2.6rem, 1.2rem + 4.2vw, 5.6rem), 9vh);
	line-height: 0.98;
	font-stretch: 84%;
	font-weight: 580;
	letter-spacing: -0.024em;
	color: #fff;
}
.ghero__lead { max-width: 34em; margin-top: clamp(16px, 2.6vh, 24px); font-size: var(--fs-lead); line-height: 1.5; color: var(--on-deep-2); }
.ghero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(22px, 3.6vh, 34px); }

/* Caption, the three bars and the pause, under the pictures' product side. */
.ghero__ctrl { position: relative; z-index: 2; display: flex; align-items: center; gap: 14px; padding-bottom: 16px; }
.ghero__pause {
	display: grid;
	flex: none;
	place-items: center;
	width: 36px;
	height: 36px;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 50%;
	background: rgba(4, 28, 66, 0.35);
	color: #fff;
	transition: border-color 0.25s var(--ease);
}
.ghero__pause:hover { border-color: #fff; }
.ghero__pause .sym { width: 16px; height: 16px; }
.ghero__pause-icon--play { display: none; }
.ghero__pause[aria-pressed="true"] .ghero__pause-icon--play { display: block; fill: currentColor; }
.ghero__pause[aria-pressed="true"] .ghero__pause-icon--pause { display: none; }
.ghero__bars { display: flex; flex: none; gap: 6px; }
.ghero__bar { position: relative; width: 34px; height: 2px; overflow: hidden; border-radius: 2px; background: rgba(255, 255, 255, 0.28); }
.ghero__bar > span { position: absolute; inset: 0; background: var(--amber); transform: scaleX(0); transform-origin: left; }
.ghero__bar.is-done > span { transform: scaleX(1); }
.ghero.is-moving .ghero__bar.is-on > span { animation: ghero-bar var(--gw-dur, 7s) linear forwards; }
.ghero.is-paused .ghero__bar.is-on > span { animation-play-state: paused; }
@keyframes ghero-bar { to { transform: scaleX(1); } }
.ghero__cap {
	min-width: 0;
	color: var(--on-deep-2);
	font-size: 0.74rem;
	letter-spacing: 0.03em;
	text-transform: none;
	transition: opacity 0.45s var(--ease);
}
.ghero__cap.is-swapping { opacity: 0; }
/* "Scroll" closes the strip on the right, under the text: the caption can reach the centre. */
.ghero__ctrl .scue { position: static; flex: none; margin-left: auto; margin-right: 0; padding-block: 0; translate: none; }
.ghero__ctrl .scue__line { height: 22px; }

/* Arrival: the words rise in one after another, the caption and bars fade up last. */
@media (prefers-reduced-motion: no-preference) {
	.ghero__text > * { animation: gw-rise 0.9s var(--ease) both; }
	.ghero__text > :nth-child(2) { animation-delay: 0.08s; }
	.ghero__text > :nth-child(3) { animation-delay: 0.16s; }
	.ghero__text > :nth-child(4) { animation-delay: 0.24s; }
	.ghero__text > :nth-child(5) { animation-delay: 0.34s; }
	.ghero__text > :nth-child(6) { animation-delay: 0.44s; }
	.ghero__ctrl { animation: gw-fade 1.2s 0.5s var(--ease) both; }
}
@keyframes gw-rise { from { opacity: 0; transform: translateY(22px); } }
@keyframes gw-fade { from { opacity: 0; } }

/* Short laptop screens: everything still fits above the fold. */
@media (min-width: 900px) and (max-height: 940px) {
	.ghero__inner { padding-top: calc(var(--hdr-h) + var(--safe-top) + 12px); padding-bottom: 14px; }
	.ghero .trail { margin-bottom: 14px; }
	.ghero__eyebrow { margin-top: 14px; }
	.ghero__h1 { margin-top: 10px; font-size: min(clamp(2.6rem, 1.2rem + 4.2vw, 5.6rem), 8.2vh); }
	.ghero__lead { margin-top: 14px; font-size: 1.06rem; }
	.ghero__ctas { margin-top: 20px; }
	.ghero__ctrl { padding-bottom: 10px; }
}

/* Phones and small tablets: the picture on top, the words under it on navy. */
@media (max-width: 899.98px) {
	.ghero { min-height: 0; justify-content: flex-start; }
	.ghero__media { position: relative; inset: auto; order: 0; aspect-ratio: 4 / 3.5; }
	.ghero__pic img { object-position: var(--pos-m, 50% 50%); transform-origin: var(--pos-m, 50% 50%); }
	.ghero__scrim {
		background:
			linear-gradient(0deg, var(--deep-2) 0%, rgba(4, 28, 66, 0.55) 16%, rgba(4, 28, 66, 0) 42%),
			linear-gradient(180deg, rgba(4, 28, 66, 0.7) 0%, rgba(4, 28, 66, 0) 30%);
	}
	.ghero__ctrl { order: 1; align-items: flex-end; gap: 10px; margin-top: -44px; padding-bottom: 6px; }
	.ghero__bar { width: 16px; }
	.ghero__bars { margin-bottom: 17px; }
	.ghero__cap { flex: 1 1 0; font-size: 0.66rem; line-height: 1.45; }
	.ghero .scue { display: none; } /* not full screen here: the words already show under the picture */
	.ghero__inner { order: 2; display: block; padding-top: 18px; padding-bottom: 32px; }
	.ghero__h1 { font-size: clamp(2.4rem, 10.5vw, 3.4rem); max-width: 12ch; }
	.ghero__lead { font-size: 1.02rem; }
	.ghero__ctas .btn { flex: 1 1 auto; justify-content: center; }
}

/* -------------------------------------------------------------------------- Authorisation */

.certsec--growatt {
	position: relative;
	overflow: hidden;
	padding-block: clamp(72px, 9vw, 140px);
	background: radial-gradient(900px 620px at 76% 46%, #fff 0%, rgba(255, 255, 255, 0) 70%), var(--paper);
}
.certsec__badge { display: flex; flex-wrap: wrap; gap: 8px; }
.certsec__badge li {
	padding: 6px 12px;
	border: 1px solid var(--line-2);
	border-radius: 999px;
	background: #fff;
	color: var(--ink);
	font-size: 0.7rem;
}
.certsec__badge li:first-child { border-color: var(--deep); background: var(--deep); color: #fff; }
.certsec--growatt .certsec__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; border-top: 0; }
.certsec--growatt .certsec__facts div {
	grid-template-columns: none;
	gap: 6px;
	padding: 16px 18px 18px;
	border: 1px solid var(--line-2);
	border-radius: 12px;
	background: #fff;
}
.certsec--growatt .certsec__facts dd { font-size: clamp(1.1rem, 1rem + 0.4vw, 1.35rem); font-weight: 600; line-height: 1.25; }
.certsec--growatt .certsec__facts div:first-child dd { font-family: var(--mono); font-weight: 500; letter-spacing: 0.04em; }
.certsec--growatt .certsec__facts div:last-child dd { font-size: 1.02rem; }
.certsec--growatt .dl { border-color: var(--deep); background: var(--deep); color: #fff; }
.certsec--growatt .dl:hover, .certsec--growatt .dl:focus-visible { border-color: var(--amber); }
.certsec--growatt .dl .dl__meta { color: var(--on-deep-3); }
.certsec--growatt .dl:focus-visible { outline-color: var(--ink); }

/* The document on a lit stage; it leans a little, and towards the pointer. The certificate
   itself is never changed: only its frame moves. */
.certsec--growatt .certsec__doc { position: relative; perspective: 1400px; }
.certsec--growatt .certsec__doc::before {
	content: "";
	position: absolute;
	inset: 4% -6% 18%;
	background: radial-gradient(closest-side, rgba(228, 157, 18, 0.26), rgba(228, 157, 18, 0));
	pointer-events: none;
}
.certsec--growatt .certsec__doc a {
	position: relative;
	width: min(100%, 470px);
	border-radius: 6px;
	transform: rotateX(var(--rx, 3deg)) rotateY(var(--ry, -9deg));
	transition: transform 0.7s var(--ease);
}
.certsec--growatt .certsec__doc a.is-tilting { transition: transform 0.12s linear; }
.certsec--growatt .certsec__doc img { box-shadow: 0 60px 90px -44px rgba(6, 39, 90, 0.6), 0 0 0 1px var(--line); }
.certsec__sheen {
	position: absolute;
	inset: 0;
	border-radius: 6px;
	pointer-events: none;
	background: linear-gradient(105deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 62%) no-repeat;
	background-size: 260% 100%;
	background-position: var(--sx, 120%) 0;
	mix-blend-mode: soft-light;
	transition: background-position 0.9s var(--ease);
}
@media (prefers-reduced-motion: reduce) {
	.certsec--growatt .certsec__doc a { transform: none; }
}

/* -------------------------------------------------------------------------- The range as tabs */

.catalogue--tabs {
	padding-block: clamp(72px, 9vw, 130px);
	border-top: 1px solid var(--line);
	background: var(--paper-2);
}
.catalogue--tabs .pg-n__node { background: var(--paper-2); }
.catalogue--tabs .catalogue__intro .catalogue__h { font-size: clamp(1.9rem, 1.3rem + 2vw, 3rem); }
.rtabs__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: clamp(30px, 3.6vw, 48px); }
.rtab {
	display: grid;
	grid-template-columns: 92px minmax(0, 1fr) auto;
	align-items: center;
	gap: 16px;
	padding: 12px 18px 12px 12px;
	border: 1px solid var(--line-2);
	border-radius: 16px;
	background: #fff;
	text-align: left;
	transition: border-color 0.25s var(--ease), background-color 0.35s var(--ease), box-shadow 0.35s var(--ease), transform 0.35s var(--ease);
}
.rtab__img img { width: 92px; height: 92px; padding: 6px; border-radius: 10px; background: #fff; object-fit: contain; }
.rtab__body { display: grid; gap: 5px; }
.rtab__t { color: var(--ink); font-size: 1.1rem; font-weight: 580; line-height: 1.25; }
.rtab__n { color: var(--ink-3); }
.rtab__go { color: var(--dim); transition: transform 0.35s var(--ease), color 0.25s var(--ease); }
.rtab__go .sym { width: 18px; height: 18px; transform: rotate(90deg); }
.rtab:hover { border-color: var(--ink); transform: translateY(-2px); }
.rtab[aria-selected="true"] {
	border-color: var(--deep);
	background: var(--deep);
	box-shadow: 0 26px 44px -30px rgba(6, 39, 90, 0.8);
	transform: none;
}
.rtab[aria-selected="true"] .rtab__t { color: #fff; }
.rtab[aria-selected="true"] .rtab__n,
.rtab[aria-selected="true"] .rtab__go { color: var(--amber); }
.rtab[aria-selected="true"]:focus-visible { outline-color: var(--ink); }
.rtabs.is-tabbed .catalogue__group + .catalogue__group { margin-top: 0; }
.rtabs.is-tabbed .catalogue__head { margin-bottom: 22px; }
@media (prefers-reduced-motion: no-preference) {
	.rtabs.is-tabbed .catalogue__group:not([hidden]) { animation: gw-rise 0.55s var(--ease) both; }
}
@media (max-width: 899.98px) {
	.rtabs__list { grid-template-columns: minmax(0, 1fr); gap: 8px; }
	.rtab { grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; padding: 8px 14px 8px 8px; }
	.rtab__img img { width: 64px; height: 64px; }
}

/* -------------------------------------------------------------------------- RISE 261 on its dark stage */

/* The stage's glow is in the picture itself (make_media.py, rise-stage): its edges are exactly
   --deep-2, so on this flat ground the picture has no visible border. */
.grise {
	position: relative;
	overflow: hidden;
	padding-block: clamp(72px, 9vw, 140px);
	background: var(--deep-2);
	scroll-margin-top: 80px;
}
.grise .wrap { position: relative; }
.grise .pg-n { color: var(--on-deep-2); }
.grise .pg-n__node { background: var(--deep-2); }
.grise__head { display: grid; gap: 16px 64px; align-items: end; }
.grise__head > .pg-n, .grise__head > .grise__eyebrow { grid-column: 1; }
.grise__head h2 { font-size: clamp(2rem, 1.3rem + 2.4vw, 3.4rem); max-width: 17ch; color: #fff; }
.grise__eyebrow { color: var(--green); }
.grise__lead { max-width: 38em; color: var(--on-deep-2); font-size: 1.06rem; }
@media (min-width: 1024px) {
	.grise__head { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
	.grise__head h2 { grid-column: 1; }
	.grise__lead { grid-column: 2; grid-row: 3; }
}

.grise__stage {
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.5fr) minmax(0, 0.8fr);
	align-items: center;
	gap: 20px;
	margin-top: clamp(8px, 2vw, 28px);
}
.grise__figs { position: relative; z-index: 1; }
/* The picture is larger than its column: its dark margin runs under the figures. */
.grise__product { position: relative; z-index: 0; margin-block: -8%; }
.grise__product img {
	width: 124%;
	max-width: none;
	margin-left: -12%;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent), linear-gradient(180deg, transparent, #000 8%, #000 90%, transparent);
	-webkit-mask-composite: source-in;
	mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent), linear-gradient(180deg, transparent, #000 8%, #000 90%, transparent);
	mask-composite: intersect;
}
.grise__figs { display: grid; gap: clamp(28px, 4vw, 60px); }
.grise__figs--l { justify-items: end; text-align: right; }
.grise__fig { display: grid; gap: 8px; max-width: 15em; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.2); }
.grise__fig-n { color: #fff; font-size: clamp(2.3rem, 1.3rem + 2.6vw, 4.4rem); }
.grise__fig-l { color: var(--on-deep-2); font-size: 0.95rem; line-height: 1.4; }

.grise__versions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; margin-top: 10px; }
.grise__versions p { color: var(--on-deep-3); }
.grise__versions ul { display: flex; flex-wrap: wrap; gap: 8px; }
.grise__versions li { padding: 6px 14px; border: 1px solid rgba(255, 255, 255, 0.26); border-radius: 999px; color: #fff; font: 500 0.84rem/1.3 var(--mono); }

.grise__points { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin-top: clamp(44px, 5vw, 76px); }
.grise__point {
	display: grid;
	gap: 8px;
	align-content: start;
	padding: 20px 20px 22px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.04);
	color: var(--on-deep-2);
	line-height: 1.5;
	transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease);
}
.grise__point:hover { border-color: rgba(255, 255, 255, 0.28); background: rgba(255, 255, 255, 0.07); }
.grise__point-n { color: var(--green); }
.grise__point strong { color: #fff; font-size: 1.06rem; }
.grise__actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px 28px; margin-top: 32px; }
.grise__actions .yt { flex: 1 1 320px; }

@media (max-width: 899.98px) {
	.grise__stage { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.grise__product { grid-column: 1 / -1; grid-row: 1; max-width: 520px; justify-self: center; }
	.grise__figs--l { justify-items: start; text-align: left; }
}

/* -------------------------------------------------------------------------- Systems */

.gsys { padding-block: clamp(72px, 9vw, 130px); border-bottom: 1px solid var(--line); }
.gsys__head { display: grid; gap: 14px; margin-bottom: clamp(30px, 4vw, 52px); }
.gsys__head h2 { font-size: clamp(1.9rem, 1.3rem + 2vw, 3rem); max-width: 16ch; }
.gsys__note { max-width: 40em; color: var(--ink-2); }
.gsys__grid { display: grid; gap: 16px; }
@media (min-width: 900px) { .gsys__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.gsys__card {
	display: grid;
	grid-template-rows: auto 1fr;
	overflow: hidden;
	border: 1px solid var(--line-2);
	border-radius: 18px;
	background: #fff;
	transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.gsys__card:hover { border-color: var(--ink); box-shadow: 0 30px 50px -40px rgba(6, 39, 90, 0.6); }
.gsys__vis {
	display: grid;
	justify-items: center;
	gap: 18px;
	padding: 26px 22px 24px;
	border-bottom: 1px solid var(--line);
	background: linear-gradient(180deg, #fff 0%, var(--paper) 100%);
}
.gsys__parts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.gsys__parts li { padding: 6px 12px; border: 1px solid var(--line-2); border-radius: 999px; background: #fff; color: var(--ink); font-size: 0.7rem; }
/* One height for every card's row of pictures, so the cards' words line up side by side. */
.gsys__pics { display: flex; align-items: center; justify-content: center; gap: 8px; height: clamp(130px, 14vw, 200px); }
.gsys__pic { height: 100%; }
.gsys__pic img { width: auto; height: 100%; aspect-ratio: 1; object-fit: contain; mix-blend-mode: multiply; }
.gsys__pics--2 .gsys__pic { height: 82%; }
.gsys__pics--3 .gsys__pic { height: 66%; }
.gsys__plus { color: var(--dim); font: 500 1.3rem/1 var(--mono); }
.gsys__sum { display: inline-flex; align-items: center; gap: 10px; padding: 8px 18px; border-radius: 999px; background: var(--deep); color: #fff; font-weight: 580; }
.gsys__eq { color: var(--amber); font-family: var(--mono); }
.gsys__text { padding: 22px 26px 26px; color: var(--ink-2); }
.gsys__text strong { display: block; margin-bottom: 6px; color: var(--ink); font-size: 1.2rem; }

/* -------------------------------------------------------------------------- The Lviv launch */

.glaunch { padding-block: clamp(72px, 9vw, 130px) clamp(48px, 6vw, 90px); scroll-margin-top: 80px; }
.glaunch__head { display: grid; gap: 20px 64px; align-items: end; margin-bottom: clamp(28px, 4vw, 48px); }
@media (min-width: 960px) { .glaunch__head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.glaunch__title { display: grid; gap: 14px; justify-items: start; }
.glaunch__title h2 { font-size: clamp(1.9rem, 1.3rem + 2vw, 3rem); max-width: 14ch; }
.glaunch__eyebrow { color: var(--ink-2); }
.glaunch__body { display: grid; gap: 16px; justify-items: start; }
.glaunch__p { max-width: 38em; color: var(--ink-2); font-size: 1.06rem; }
/* The mosaic runs from just right of the wire to the edge of the screen. */
.glaunch__mosaic {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
	padding-inline: calc(var(--wire-x) + 18px) 8px;
}
.glaunch__tile { position: relative; overflow: hidden; aspect-ratio: 1; border-radius: 10px; background: var(--paper-2); }
.glaunch__tile--big { grid-column: 1 / -1; aspect-ratio: 3 / 2; }
@media (min-width: 900px) {
	.glaunch__mosaic { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(180px, 16vw, 300px); }
	.glaunch__tile { aspect-ratio: auto; }
	.glaunch__tile--big { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
}
.glaunch__tile a { display: block; height: 100%; cursor: zoom-in; }
.glaunch__tile picture,
.glaunch__tile img { width: 100%; height: 100%; object-fit: cover; }
.glaunch__tile img { transition: transform 1.2s var(--ease); }
.glaunch__tile:hover img { transform: scale(1.04); }
.glaunch__cap {
	position: absolute;
	inset: auto 0 0 0;
	padding: 32px 16px 12px;
	background: linear-gradient(0deg, rgba(4, 28, 66, 0.86), rgba(4, 28, 66, 0));
	color: #fff;
	font-size: 0.85rem;
	line-height: 1.35;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
	pointer-events: none;
}
.glaunch__tile:hover .glaunch__cap,
.glaunch__tile:focus-within .glaunch__cap { opacity: 1; transform: none; }
@media (hover: none) { .glaunch__tile--big .glaunch__cap { opacity: 1; transform: none; } }
.glaunch__credit { margin-top: 14px; color: var(--ink-3); letter-spacing: 0.02em; text-transform: none; }

/* -------------------------------------------------------------------------- The quote form on the navy band */

.formsec--growatt { position: relative; overflow: hidden; padding-block: clamp(72px, 9vw, 140px); background: var(--deep-2); }
.formsec__bg { position: absolute; inset: 0; }
.formsec__bg picture,
.formsec__bg img { width: 100%; height: 100%; object-fit: cover; }
.formsec__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(4, 28, 66, 0.92) 0%, rgba(4, 28, 66, 0.7) 55%, rgba(4, 28, 66, 0.5) 100%);
}
.formsec--growatt .wrap { position: relative; z-index: 1; }
.formsec--growatt .pg-n { color: var(--on-deep-2); }
.formsec--growatt .pg-n__node { background: var(--deep-2); }
.formsec--growatt .formsec__aside h2 { color: #fff; }
.formsec--growatt .formsec__company { border-top-color: rgba(255, 255, 255, 0.18); color: var(--on-deep-3); }
.formsec--growatt .formsec__form { border-color: transparent; color: var(--ink); box-shadow: 0 50px 90px -40px rgba(0, 0, 0, 0.6); }
.formsec--growatt .formsec__form :focus-visible { outline-color: var(--ink); }

/* -------------------------------------------------------------------------- Scroll reveal (growatt.js adds .gw-reveal) */

@media (prefers-reduced-motion: no-preference) {
	.gw-reveal [data-reveal] {
		opacity: 0;
		transform: translateY(26px);
		transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
		transition-delay: calc(var(--i, 0) * 90ms);
	}
	.gw-reveal [data-reveal].is-in { opacity: 1; transform: none; }
}