/* Aqua Tech Scroll Hero.
   --aqh-s is on-screen pixels per frame pixel. The frame stays anchored to the bottom of the hero.
   Purifier and head start around frame y 25, so 695 rows must fit; 737 is 695 at the 1.06 end scale.
   The purifier's left edge is at frame x 548, which becomes 520 once the zoom has moved it. */

/* The theme's smooth scrolling fights the pinned animation. This file only loads on the hero's page. */
html { scroll-behavior: auto !important; }

.aqh {
	--aqh-h: 100vh;
	--aqh-head: 103px; /* Space for a header floating over the hero. hero.js sets the real value. */
	--aqh-inflow: 0px; /* Height of a header sitting above the hero. hero.js sets the real value. */
	--aqh-navy: #0B2545;
	--aqh-accent: #00A8E1;
	--aqh-s: min(calc((var(--aqh-h) - var(--aqh-head) - var(--aqh-inflow)) / 737), calc((95vw - 296px) / 760));
	--aqh-x: calc(100vw - var(--aqh-s) * 1280);
	--aqh-clear: calc(var(--aqh-x) + var(--aqh-s) * 520); /* Screen x of the purifier's left edge at full zoom. */
	--aqh-tw: min(34vw, 560px, calc(var(--aqh-clear) - 5vw - 24px));
	position: relative;
	width: 100%;
	height: var(--aqh-h);
	overflow: hidden;
	isolation: isolate;
	color: var(--aqh-navy);
	font-family: inherit;
	background: #dfe9d3;
}
@supports (height: 100svh) {
	.aqh { --aqh-h: 100svh; }
}

.aqh-poster,
.aqh-canvas,
.aqh-veil {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.aqh-poster { display: block; overflow: hidden; z-index: 0; }
.aqh .aqh-poster-img {
	position: absolute;
	right: 0;
	bottom: var(--aqh-inflow);
	width: calc(var(--aqh-s) * 1280);
	height: calc(var(--aqh-s) * 720);
	max-width: none;
	margin: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}
.aqh-drawn .aqh-poster { opacity: 0; }
.aqh-canvas { display: block; z-index: 1; }

/* Soft white panel behind the text */
.aqh-veil {
	z-index: 3;
	pointer-events: none;
	background: linear-gradient(90deg, rgba(255, 255, 255, .85) 0, rgba(255, 255, 255, .85) calc(5vw + var(--aqh-tw) - 40px), rgba(255, 255, 255, 0) var(--aqh-clear));
}

/* Text */
.aqh-text {
	position: absolute;
	z-index: 4;
	top: 0;
	bottom: 0;
	left: 5vw;
	width: var(--aqh-tw);
}
.aqh-stage {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	box-sizing: border-box;
	padding-top: var(--aqh-head);
}
.aqh-stage--2,
.aqh-stage--3 { visibility: hidden; opacity: 0; }

.aqh .aqh-label {
	margin: 0 0 .9em;
	padding: 0;
	color: var(--aqh-navy);
	font-family: inherit;
	font-size: clamp(11px, .95vw, 14px);
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: .1em;
}
.aqh .aqh-title {
	margin: 0 0 .35em;
	padding: 0;
	color: var(--aqh-navy);
	font-family: inherit;
	font-size: clamp(30px, 4.2vw, 64px);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -.02em;
	text-transform: none;
	text-wrap: balance;
}
.aqh .aqh-sub {
	margin: 0;
	padding: 0;
	color: var(--aqh-navy);
	font-family: inherit;
	font-size: clamp(16px, 1.5vw, 22px);
	font-weight: 400;
	line-height: 1.45;
}

.aqh .aqh-badges {
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: 100%;
	max-width: 400px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.aqh .aqh-badge {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 13px 20px;
	color: var(--aqh-navy);
	font-size: clamp(15px, 1.25vw, 18px);
	font-weight: 600;
	line-height: 1.3;
	list-style: none;
	background: rgba(255, 255, 255, .72);
	border: 1px solid rgba(255, 255, 255, .9);
	border-radius: 999px;
	box-shadow: 0 8px 24px rgba(11, 37, 69, .1);
}
.aqh-badge svg { flex: none; color: var(--aqh-accent); }

.aqh-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 1.2em;
}
.aqh .aqh-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 50px;
	padding: 12px 26px;
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	border: 2px solid var(--aqh-accent);
	border-radius: 999px;
	transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.aqh .aqh-btn--solid,
.aqh .aqh-btn--solid:hover,
.aqh .aqh-btn--solid:focus {
	color: var(--aqh-navy);
	background: var(--aqh-accent);
}
.aqh .aqh-btn--outline,
.aqh .aqh-btn--outline:hover,
.aqh .aqh-btn--outline:focus {
	color: var(--aqh-navy);
	background: rgba(255, 255, 255, .55);
}
.aqh .aqh-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 168, 225, .3); }
.aqh .aqh-btn:focus-visible { outline: 3px solid var(--aqh-navy); outline-offset: 2px; }

/* Scroll hint */
.aqh-scroll {
	position: absolute;
	z-index: 5;
	left: 5vw;
	bottom: 22px;
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--aqh-navy);
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	pointer-events: none;
}
.aqh-scroll svg { animation: aqh-bob 1.4s ease-in-out infinite; }
@keyframes aqh-bob {
	0%, 100% { transform: translateY(-3px); }
	50% { transform: translateY(4px); }
}

/* Loading line */
.aqh-loader {
	position: absolute;
	z-index: 5;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	background: rgba(255, 255, 255, .4);
	transition: opacity .4s ease;
}
.aqh-loader span {
	display: block;
	height: 100%;
	background: var(--aqh-accent);
	transform: scaleX(.04);
	transform-origin: left;
	transition: transform .2s linear;
}
.aqh-loaded .aqh-loader { opacity: 0; }

/* Short landscape screens */
@media (min-width: 768px) and (max-height: 560px) {
	.aqh .aqh-title { font-size: 26px; }
	.aqh .aqh-sub { font-size: 14px; }
	.aqh .aqh-badges { gap: 6px; }
	.aqh .aqh-badge { padding: 6px 14px; font-size: 14px; }
	.aqh-actions { margin-top: .6em; gap: 8px; }
	.aqh .aqh-btn { min-height: 40px; padding: 6px 16px; font-size: 14px; }
	.aqh-scroll { display: none; }
}

/* Phones and portrait tablets: text on top, purifier, glass and woman below.
   The crop is centred on frame x 868, midway between the purifier's left edge and her hair. */
@media (max-width: 767px), (max-aspect-ratio: 11/10) {
	.aqh {
		--aqh-head: 12px;
		--aqh-inflow: 95px; /* The site's header sits above the hero on phones and tablets. */
		--aqh-reserve: 320px;
		--aqh-s: min(calc(100vw / 715), calc((var(--aqh-h) - var(--aqh-reserve)) / 737));
		--aqh-top: calc(var(--aqh-h) - var(--aqh-s) * 720);
		background: #fff;
	}
	.aqh-static { --aqh-reserve: 350px; }
	.aqh .aqh-poster-img {
		right: auto;
		left: calc(50% - var(--aqh-s) * 868);
		-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14px);
		mask-image: linear-gradient(180deg, transparent 0, #000 14px);
	}
	.aqh-veil { display: none; }
	.aqh-text { left: 16px; right: 16px; width: auto; }
	/* Text is centred in the white space above the picture. The header has scrolled away by stages 2 and 3. */
	.aqh-stage {
		bottom: auto;
		height: var(--aqh-top);
		align-items: center;
		text-align: center;
	}
	/* Stage 1 shows while a header above the hero is still on screen. */
	.aqh-stage--1,
	.aqh-static .aqh-stage--3 { height: calc(var(--aqh-top) - var(--aqh-inflow)); }
	.aqh-stage--2,
	.aqh-stage--3 { padding-top: 8px; }
	.aqh-static .aqh-stage--3 { padding-top: var(--aqh-head); }
	.aqh .aqh-label { margin-bottom: .6em; font-size: 11px; }
	.aqh .aqh-title { font-size: clamp(26px, 7vw, 46px); }
	.aqh .aqh-sub { font-size: 15px; }
	.aqh .aqh-badges { gap: 8px; max-width: 340px; }
	.aqh .aqh-badge { padding: 9px 14px; font-size: 14px; justify-content: center; }
	.aqh-actions { width: 100%; max-width: 360px; flex-direction: column; gap: 8px; margin-top: .8em; }
	.aqh .aqh-btn { width: 100%; min-height: 46px; box-sizing: border-box; }
	.aqh-scroll {
		left: 0;
		right: 0;
		top: calc(var(--aqh-top) - var(--aqh-inflow) - 30px);
		bottom: auto;
		justify-content: center;
	}
}

/* Wide stacked screens keep the 100px sticky header while pinned. */
@media (min-width: 1200px) and (max-aspect-ratio: 11/10) {
	.aqh-stage--2,
	.aqh-stage--3 { padding-top: 110px; }
}

/* Static hero: reduced motion, no GSAP, or the Elementor editor. Shows the last frame and final text. */
.aqh-static .aqh-canvas,
.aqh-static .aqh-loader,
.aqh-static .aqh-scroll { display: none; }
.aqh-static .aqh-stage--2 { display: none; }
.aqh-static .aqh-stage--3 { visibility: visible; opacity: 1; }
/* Kept for screen readers and search engines, since this headline is the page's H1. */
.aqh-static .aqh-stage--1 {
	top: 0;
	right: auto;
	bottom: auto;
	width: 1px;
	height: 1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
}