/* ==========================================================================
   The Impact page's own sections — [wayvo-impact-hero], [wayvo-impact-intro],
   [wayvo-impact-people], [wayvo-impact-integrity]. See shortcodes/
   wayvoImpact.php for the design, the page order and the images.

   --wvimp-uw is rendered px per laptop px (100cqw / 1440, 0.5 -> 1.333); side
   padding 40 -> 80 from 1440 to 1920 runs off it, as the other new sections.

   --wvimp-u is what everything else is drawn in. It is uw, EXCEPT in the
   hero and the People panels, which FIT THE SCREEN (Paul, 2026-10-20: too
   tall on a wide screen) — the [wayvo-welcome-ender] rule: u is the smaller
   of uw and what lets the drawn height fit the window, so on a wide screen
   they stop growing taller than it, keep their full width and only get
   shorter.

   Vendor fights: h2 / h3 / p / ul / li / img rules at (0,2,1)+, over
   Elementor's and the kit's (0,1,1); `.elementor img { height: auto }` is
   why the image rules carry two classes.
   ========================================================================== */

.wv-imp-wrap {
	container-type: inline-size;
	/* Capped at the content width, centred on the page; the background is
	   painted past it below. See --wv-content-max in tokens.css. */
	width: min(100vw, var(--wv-content-max, 1440px));
	margin-left: calc(50% - min(50vw, var(--wv-content-max, 1440px) / 2));
}

.wv-imp-hero,
.wv-imp-intro,
.wv-imp-people,
.wv-imp-integrity {
	--wvimp-uw: clamp(0.5px, calc(100cqw / 1440), 1.3334px);
	--wvimp-u: var(--wvimp-uw);
	--wvimp-pad: min(80px, max(calc(40 * var(--wvimp-uw)), calc(100cqw / 12 - 80px)));
	/* The window, less the admin bar. Sections below the top also lose ~70
	   to the floating header. */
	--wvimp-screen: calc(100svh - var(--wp-admin--admin-bar--height, 0px));

	box-sizing: border-box;
	padding-left: var(--wvimp-pad);
	padding-right: var(--wvimp-pad);
	background-color: var(--wvimp-bg, #ffffff);
	/* The band's colour still runs to the screen edges: paint only. */
	border-image: linear-gradient(var(--wvimp-bg, #ffffff), var(--wvimp-bg, #ffffff)) fill 0 / 0 / 0 100vmax;
	color: var(--wv-ink, #101011);
	font-family: var(--wv-btn-font, "Geist", sans-serif);
}

/* ── Shared: the heading block ───────────────────────────────────────────── */
.wv-imp__head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: calc(16 * var(--wvimp-u));
}

/* The tag. Not scaled, as the pills elsewhere: scaled, 14px gets unreadable
   long before the rest of a section does. */
.wv-imp__pill {
	flex: none;
	padding: 2px 8px;
	border-radius: 9999px;
	background-color: var(--wvimp-pill, #8accff);
	color: var(--wv-ink, #101011);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: -0.01em;
	white-space: nowrap;
}

.wv-imp-wrap h2.wv-imp__title {
	margin: 0;
	padding: 0;
	color: inherit;
	font-family: inherit;
	font-size: max(32px, calc(56 * var(--wvimp-u)));
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.02em;
	text-transform: none;
}

.wv-imp__body {
	display: flex;
	flex-direction: column;
	gap: calc(12 * var(--wvimp-u));
}

.wv-imp-wrap p.wv-imp__text {
	margin: 0;
	padding: 0;
	color: inherit;
	font-family: inherit;
	font-size: max(16px, calc(24 * var(--wvimp-u)));
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: -0.02em;
}

/* ── [wayvo-impact-hero] ─────────────────────────────────────────────────── */
/* The whole hero fits the screen: 272 + 112 heading + 40 + 600 cards + 40 =
   1064 drawn px, the header's room included (it opens the page). The top
   was the export's 320 until Paul took ~15% off it (2026-10-23). */
.wv-imp-hero {
	--wvimp-u: clamp(0.5px, min(var(--wvimp-uw), calc(var(--wvimp-screen) / 1064)), 1.3334px);

	display: flex;
	flex-direction: column;
	gap: calc(40 * var(--wvimp-u));
	padding-top: calc(272 * var(--wvimp-u));
	padding-bottom: calc(40 * var(--wvimp-u));
}

/* "Supporting brands doing better, / so the wave keeps growing." at ~795. */
.wv-imp-wrap h2.wv-imp-hero__title {
	max-width: 14.5em;
}

.wv-imp-hero ul.wv-imp-hero__cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: calc(20 * var(--wvimp-u));
	margin: 0;
	padding: 0;
	list-style: none;
}

.wv-imp-hero li.wv-imp-hero__card {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-start;
	gap: 10px;
	box-sizing: border-box;
	/* A height, not an aspect ratio: the cards keep the row's width when a
	   wide screen caps u, and only get shorter. */
	height: calc(600 * var(--wvimp-u));
	margin: 0;
	padding: calc(40 * var(--wvimp-u));
	overflow: hidden;
	border-radius: calc(8 * var(--wvimp-u));
	background-color: var(--wv-grey-500, #8d8b8b);
	color: var(--wv-white, #ffffff);
	list-style: none;
	isolation: isolate;
}

.wv-imp-hero li.wv-imp-hero__card::before,
.wv-imp-hero li.wv-imp-hero__card::marker {
	content: none;
}

/* The export's scrim, 0 -> 30% black (50% on the middle card), over the
   photo and under the type. */
.wv-imp-hero li.wv-imp-hero__card::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, var(--wvimp-shade, 0.3)) 100%);
	pointer-events: none;
}

.wv-imp-hero .wv-imp-hero__img {
	position: absolute;
	inset: 0;
	z-index: -2;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	border-radius: 0;
	object-fit: cover;
}

/* Pinned to the foot even without a pill. */
.wv-imp-hero__foot {
	display: flex;
	flex-direction: column;
	gap: calc(10 * var(--wvimp-u));
	max-width: calc(325 * var(--wvimp-u));
	margin-top: auto;
}

.wv-imp-hero h3.wv-imp-hero__name {
	margin: 0;
	padding: 0;
	color: inherit;
	font-family: inherit;
	font-size: max(24px, calc(40 * var(--wvimp-u)));
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: -0.02em;
	text-transform: none;
}

/* Each card scrolls down to its section (Paul, 2026-10-23). The title is the
   link and its ::after covers the card, so the whole card is the target. */
.wv-imp-hero h3.wv-imp-hero__name a.wv-imp-hero__link {
	color: inherit;
	text-decoration: none;
}

.wv-imp-hero a.wv-imp-hero__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
}

.wv-imp-hero a.wv-imp-hero__link:focus-visible {
	outline: none;
}

.wv-imp-hero a.wv-imp-hero__link:focus-visible::after {
	outline: 2px solid var(--wv-white, #ffffff);
	outline-offset: -6px;
}

.wv-imp-hero .wv-imp-hero__img {
	transition: transform 0.6s ease-in-out;
}

@media (hover: hover) {

	.wv-imp-hero li.wv-imp-hero__card:hover .wv-imp-hero__img {
		transform: scale(1.03);
	}
}

/* Where the cards land: clear of the floating header (68.45 + a gap). */
.wv-imp-intro[id],
.wv-imp-people[id],
.wv-imp-integrity[id] {
	scroll-margin-top: 100px;
}

@media (prefers-reduced-motion: no-preference) {

	html:has(.wv-imp-hero) {
		scroll-behavior: smooth;
	}
}

.wv-imp-hero p.wv-imp-hero__text {
	margin: 0;
	padding: 0;
	color: inherit;
	font-family: inherit;
	font-size: max(15px, calc(24 * var(--wvimp-u)));
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: -0.02em;
}

/* ── [wayvo-impact-intro] ────────────────────────────────────────────────── */
.wv-imp-intro {
	padding-top: calc(180 * var(--wvimp-u));
	padding-bottom: 0;
}

.wv-imp-intro--space-below {
	padding-bottom: calc(180 * var(--wvimp-u));
}

/* "Our climate action and / impact on the environment." at ~736. */
.wv-imp-wrap .wv-imp-intro h2.wv-imp__title {
	max-width: 13.2em;
}

/* Seven lines at 670 — the left half of the row. */
.wv-imp-intro .wv-imp__body {
	max-width: calc(670 * var(--wvimp-u));
}

/* ── [wayvo-impact-people] ───────────────────────────────────────────────── */
.wv-imp-people {
	display: flex;
	flex-direction: column;
	gap: calc(80 * var(--wvimp-u));
	padding-top: calc(180 * var(--wvimp-u));
	padding-bottom: calc(40 * var(--wvimp-u));
}

/* "Our commitment to the / people behind every product." at ~750. */
.wv-imp-wrap .wv-imp-people h2.wv-imp__title {
	max-width: 13.4em;
}

/* Two lines at 531, breaking after "treated,". */
.wv-imp-people .wv-imp__body {
	max-width: calc(531 * var(--wvimp-u));
}

/* The panels fit the screen: 780 drawn px plus 40 above and below, under
   the floating header. Their own padding and type follow; the heading
   above them stays on uw. */
.wv-imp-people__panels {
	--wvimp-u: clamp(0.5px, min(var(--wvimp-uw), calc((var(--wvimp-screen) - 70px - 80 * var(--wvimp-uw)) / 780)), 1.3334px);

	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: calc(20 * var(--wvimp-uw));
}

.wv-imp-people__panel {
	position: relative;
	box-sizing: border-box;
	height: calc(780 * var(--wvimp-u));
	overflow: hidden;
	border-radius: calc(8 * var(--wvimp-u));
}

.wv-imp-people__panel--text {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-start;
	gap: calc(16 * var(--wvimp-u));
	padding: calc(40 * var(--wvimp-u));
	background-color: var(--wv-white, #ffffff);
}

.wv-imp-people__panel--photo {
	background-color: #e5e5e5;
}

.wv-imp-people__copy {
	display: flex;
	flex-direction: column;
	gap: calc(16 * var(--wvimp-u));
	max-width: calc(459 * var(--wvimp-u));
}

.wv-imp-people h3.wv-imp-people__name {
	margin: 0;
	padding: 0;
	color: inherit;
	font-family: inherit;
	font-size: max(24px, calc(40 * var(--wvimp-u)));
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: -0.02em;
	text-transform: none;
}

.wv-imp-people p.wv-imp-people__text {
	margin: 0 0 calc(12 * var(--wvimp-u));
	padding: 0;
	color: inherit;
	font-family: inherit;
	font-size: max(16px, calc(24 * var(--wvimp-u)));
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: -0.02em;
}

.wv-imp-people p.wv-imp-people__text:last-child {
	margin-bottom: 0;
}

/* Site button system, ink, the export's 46px tier, scaled. */
.wv-imp-people .wv-imp-people__cta {
	flex: none;
	--wv-btn-pad-y: 0px;
	--wv-btn-pad-x: max(14.22px, calc(20 * var(--wvimp-u)));
	--wv-btn-min-h: max(36px, calc(46 * var(--wvimp-u)));
	--wv-btn-size: max(14px, calc(16 * var(--wvimp-u)));
}

.wv-imp-people .wv-imp-people__img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	border-radius: 0;
	object-fit: cover;
}

/* ── [wayvo-impact-integrity] ────────────────────────────────────────────── */
.wv-imp-integrity {
	position: relative;
	box-sizing: border-box;
	min-height: calc(780 * var(--wvimp-u));
	padding-top: calc(40 * var(--wvimp-u));
	padding-bottom: calc(40 * var(--wvimp-u));
	overflow: hidden;
	/* The planet's own #050505, as on phones (Paul, 2026-10-23): the export's
	   #101011 band left a visible step at the image's edge. Overrides the
	   shared bleed above. */
	background-color: #050505;
	border-image: linear-gradient(#050505, #050505) fill 0 / 0 / 0 100vmax;
	color: var(--wv-white, #ffffff);
	isolation: isolate;
}

.wv-imp-integrity .wv-imp__head {
	position: relative;
	z-index: 1;
	gap: calc(24 * var(--wvimp-u));
	max-width: calc(613 * var(--wvimp-u));
}

.wv-imp-wrap .wv-imp-integrity p.wv-imp__text {
	font-size: max(16px, calc(20 * var(--wvimp-u)));
	letter-spacing: -0.01em;
}

/* The right 949 of the 1440, full height. The file is black round the
   planet (#050505), the same as the band since 2026-10-23. */
.wv-imp-integrity__media {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 0;
	width: min(100%, calc(949 * var(--wvimp-u)));
	background-color: #050505;
}

.wv-imp-integrity .wv-imp-integrity__img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	border-radius: 0;
	object-fit: cover;
	/* Nudged right so the planet sits in the middle of the space beside the
	   copy (Paul, 2026-10-21), not the middle of the media box, which starts
	   behind the text. Copy ends at 653 of 1440, so that space's centre is
	   1046.5; centred, cover puts the planet at ~963. The file's ground is
	   #050505 to its edges, the same as the box behind it, so the gap the
	   shift opens on the left does not show. */
	object-position: calc(50% + 83 * var(--wvimp-u)) 50%;
}

/* ── Tablets and phones: the hero's swipe row ────────────────────────────────
   As [wayvo-about-great-brands]: below 1024 three across get too narrow for
   their type, so the row breaks out of the padding, runs edge to edge and
   scroll-snaps card by card, the first lined up with the heading. */
@media (max-width: 1023px) {

	.wv-imp-hero {
		--wvimp-card-w: min(340px, calc((100cqw - 2 * var(--wvimp-pad)) * 0.82));
	}

	.wv-imp-hero ul.wv-imp-hero__cards {
		display: flex;
		gap: 12px;
		margin: 0 calc(-1 * var(--wvimp-pad));
		padding: 0 var(--wvimp-pad);
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--wvimp-pad);
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.wv-imp-hero ul.wv-imp-hero__cards::-webkit-scrollbar {
		display: none;
	}

	.wv-imp-hero li.wv-imp-hero__card {
		flex: 0 0 var(--wvimp-card-w);
		height: auto;
		aspect-ratio: 440 / 600;
		padding: 24px;
		border-radius: 8px;
		scroll-snap-align: start;
	}

	.wv-imp-hero__foot {
		gap: 8px;
		max-width: none;
	}

	.wv-imp-hero h3.wv-imp-hero__name {
		font-size: 30px;
	}

	.wv-imp-hero p.wv-imp-hero__text {
		font-size: 16px;
	}
}

/* ── Phones ──────────────────────────────────────────────────────────────────
   No mobile frame; see the shortcode header. The phone type tier (H2 32,
   P 16), 80 / 20 padding, panels stacked, the Earth under its copy. */
@media (max-width: 767px) {

	.wv-imp-hero,
	.wv-imp-intro,
	.wv-imp-people,
	.wv-imp-integrity {
		--wvimp-pad: 20px;
	}

	.wv-imp__head {
		gap: 12px;
	}

	.wv-imp-wrap h2.wv-imp__title {
		font-size: 32px;
		line-height: 1.05;
	}

	.wv-imp-wrap p.wv-imp__text {
		font-size: 16px;
		letter-spacing: -0.01em;
	}

	.wv-imp-hero {
		gap: 32px;
		/* The floating header's room, as [wayvo-about-hero] on phones, less
		   ~15% (Paul, 2026-10-23; was 120). */
		padding-top: 102px;
		padding-bottom: 20px;
	}

	.wv-imp-intro {
		padding-top: 80px;
	}

	.wv-imp-intro--space-below {
		padding-bottom: 80px;
	}

	.wv-imp-intro .wv-imp__body,
	.wv-imp-people .wv-imp__body {
		max-width: none;
	}

	.wv-imp-people {
		gap: 32px;
		padding-top: 80px;
		padding-bottom: 20px;
	}

	.wv-imp-people__panels {
		/* Stacked, so no screen fitting: back to the width unit. */
		--wvimp-u: var(--wvimp-uw);
		grid-template-columns: minmax(0, 1fr);
		gap: 12px;
	}

	.wv-imp-people__panel {
		height: auto;
		border-radius: 8px;
	}

	.wv-imp-people__panel--text {
		gap: 24px;
		padding: 24px;
	}

	.wv-imp-people__copy {
		gap: 12px;
		max-width: none;
	}

	.wv-imp-people h3.wv-imp-people__name {
		font-size: 28px;
	}

	.wv-imp-people p.wv-imp-people__text {
		margin-bottom: 10px;
		font-size: 16px;
		letter-spacing: -0.01em;
	}

	.wv-imp-people__panel--photo {
		aspect-ratio: 4 / 5;
	}

	.wv-imp-people .wv-imp-people__cta {
		--wv-btn-pad-x: 18px;
		--wv-btn-min-h: 40px;
		--wv-btn-size: 14px;
	}

	/* The band takes the planet's own #050505 here (Paul, 2026-10-21). The
	   desktop step between #101011 and the image is drawn; stacked, the copy
	   sits on top of the image and the step read as a mismatched band. */
	.wv-imp-integrity {
		min-height: 0;
		padding-top: 80px;
		padding-bottom: 0;
		background-color: #050505;
		border-image: linear-gradient(#050505, #050505) fill 0 / 0 / 0 100vmax;
	}

	.wv-imp-integrity .wv-imp__head {
		gap: 16px;
		max-width: none;
	}

	.wv-imp-wrap .wv-imp-integrity p.wv-imp__text {
		font-size: 16px;
	}

	/* Out of the corner and under the copy, edge to edge. */
	.wv-imp-integrity__media {
		position: relative;
		width: auto;
		margin: 32px calc(-1 * var(--wvimp-pad)) 0;
		aspect-ratio: 4 / 3;
	}

	/* Under the copy here, so plain centred. */
	.wv-imp-integrity .wv-imp-integrity__img {
		object-position: 50% 50%;
	}
}

/* ── Phones: no copy under 15px (Paul, 2026-10-21) ───────────────────────────
   The same size as the phone buttons (tokens.css). max() so anything already
   bigger keeps its size; same selectors as above, later, so they win. */
@media (max-width: 767px) {

	.wv-imp__pill {
		font-size: 15px;
	}
}