/* ==========================================================================
   [wayvo-business-two-box] — see shortcodes/wayvoBusinessTwoBox.php for the
   design (Paul's Figma CSS, 2026-10-19; the B Corp band left out) and the
   images.

   Same scheme as the home better-choice section: --wvbtb-u is rendered px
   per laptop px (100cqw / 1440, stopping at 1.333). --wvbtb-pad is the
   section's padding and the panels' inner padding, 40 at 1440 -> 80 at
   1920. The panels are 780 * u tall but never taller than 92svh, so a
   monitor shows a whole panel at once; min-height, so long copy grows them.

   Vendor fights: img / h2 / h3 / p rules at (0,2,1).
   ========================================================================== */

.wv-btb-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-btb {
	--wvbtb-u: clamp(0.5px, calc(100cqw / 1440), 1.3334px);
	--wvbtb-pad: min(80px, max(calc(40 * var(--wvbtb-u)), calc(100cqw / 12 - 80px)));
	--wvbtb-fit: 92svh;

	display: flex;
	flex-direction: column;
	gap: calc(80 * var(--wvbtb-u));
	box-sizing: border-box;
	padding: var(--wvbtb-pad);
	background-color: var(--wv-white, #ffffff);
	/* The band's colour still runs to the screen edges: paint only. */
	border-image: linear-gradient(var(--wv-white, #ffffff), var(--wv-white, #ffffff)) fill 0 / 0 / 0 100vmax;
	color: var(--wv-ink, #101011);
	font-family: var(--wv-btn-font, "Geist", sans-serif);
}

/* ── Heading ───────────────────────────────────────────────────────────── */
.wv-btb__head {
	display: flex;
	flex-direction: column;
	gap: calc(16 * var(--wvbtb-u));
}

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

/* 670 wide at 24px = 27.92em. */
.wv-btb p.wv-btb__text {
	max-width: 27.92em;
	margin: 0;
	padding: 0;
	color: inherit;
	font-family: inherit;
	font-size: max(16px, calc(24 * var(--wvbtb-u)));
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: -0.02em;
}

/* ── Panels ────────────────────────────────────────────────────────────── */
.wv-btb__panels {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: calc(20 * var(--wvbtb-u));
}

.wv-btb__panel {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-start;
	gap: calc(16 * var(--wvbtb-u));
	box-sizing: border-box;
	min-height: min(calc(780 * var(--wvbtb-u)), var(--wvbtb-fit));
	padding: var(--wvbtb-pad);
	overflow: hidden;
	border-radius: calc(8 * var(--wvbtb-u));
}

.wv-btb__panel--grey {
	background-color: var(--wv-grey-200, #f5f5f5);
}

.wv-btb__panel-top {
	display: flex;
	flex-direction: column;
	gap: calc(16 * var(--wvbtb-u));
}

/* "Gifting that works toward / your ESG targets" — 506 wide at 40px. */
.wv-btb h3.wv-btb__panel-title {
	max-width: 12.65em;
	margin: 0;
	padding: 0;
	color: inherit;
	font-family: inherit;
	font-size: max(28px, calc(40 * var(--wvbtb-u)));
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: -0.02em;
	text-transform: none;
}

.wv-btb p.wv-btb__panel-text {
	max-width: 24.58em; /* 590 at 24px */
	margin: 0;
	padding: 0;
	color: inherit;
	font-family: inherit;
	font-size: max(16px, calc(24 * var(--wvbtb-u)));
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: -0.02em;
}

/* The grey panel's copy is 459 wide at 24px. */
.wv-btb p.wv-btb__panel-text--narrow {
	max-width: 19.13em;
}

.wv-btb__panel-bottom {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: calc(40 * var(--wvbtb-u));
	align-self: stretch;
}

/* 438 wide at 20px, grey-500. */
.wv-btb p.wv-btb__certs-text {
	max-width: 21.9em;
	margin: 0;
	padding: 0;
	color: var(--wv-grey-500, #8d8b8b);
	font-family: inherit;
	font-size: max(14px, calc(20 * var(--wvbtb-u)));
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: -0.01em;
}

/* ── Certification logos ─────────────────────────────────────────────────────
   Spread across the panel on one line, each sized by height to the export
   and keeping its own aspect (the files are cropped tight). */
.wv-btb__logos {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	gap: calc(40 * var(--wvbtb-u));
	align-self: stretch;
	mix-blend-mode: darken;
}

.wv-btb img.wv-btb__logo {
	display: block;
	flex: none;
	width: auto;
	max-width: none;
	margin: 0;
}

.wv-btb img.wv-btb__logo--bcorp {
	height: calc(97.98 * var(--wvbtb-u));
}

.wv-btb img.wv-btb__logo--climate {
	height: calc(50.34 * var(--wvbtb-u));
}

.wv-btb img.wv-btb__logo--one-percent {
	height: calc(51.11 * var(--wvbtb-u));
}

/* The outlined "UK CHARITY" pill. The export says Inter 700; it is Geist 700,
   as on the home section. */
.wv-btb__charity {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	height: calc(41.42 * var(--wvbtb-u));
	padding: 0 calc(15.93 * var(--wvbtb-u));
	border: calc(1.59 * var(--wvbtb-u)) solid var(--wv-ink, #101011);
	border-radius: 9999px;
	color: var(--wv-ink, #101011);
	font-size: calc(19.12 * var(--wvbtb-u));
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* ── Buttons: the export's 46px tier, scaled ─────────────────────────────── */
.wv-btb .wv-btb__cta {
	flex: none;
	--wv-btn-pad-y: 0px;
	--wv-btn-pad-x: max(14.22px, calc(20 * var(--wvbtb-u)));
	--wv-btn-min-h: max(32.71px, calc(46 * var(--wvbtb-u)));
	--wv-btn-size: max(12px, calc(16 * var(--wvbtb-u)));
}

/* ── The leaf panel: photo behind, white type, no scrim in the export ────── */
.wv-btb__panel--photo {
	background-color: #4f6b3a;
	color: var(--wv-white, #ffffff);
	isolation: isolate;
}

.wv-btb img.wv-btb__photo {
	position: absolute;
	inset: 0;
	z-index: -1;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	object-fit: cover;
	object-position: 50% 50%;
}

/* Straight above [wayvo-b-corp], which has no top padding of its own: the
   bottom padding drops to the panels' own gap, so the band sits as far under
   them as they sit apart (Paul, 2026-10-24). Read off the Elementor markup —
   the next widget or section holds the band — so it works on any page.
   (0,5,0) over .wv-btb's (0,1,0) at every width. */
.elementor-element:has(.wv-btb-wrap):has(+ .elementor-element .wv-bcorp-wrap) .wv-btb {
	padding-bottom: calc(20 * var(--wvbtb-u));
}

/* ── Phones ──────────────────────────────────────────────────────────────────
   No mobile design: the type steps of the home section's phone frame. The
   panels stack; the grey one uses plain gaps instead of spreading apart and
   its logos are sized to fill the row (the home section's sum, with this
   design's taller B Corp mark: 46 + 23.79 + 24.15 + the 19.57-tall pill at
   ~66 wide = ~232 at 1x). The leaf panel is 440 tall. */
@media (max-width: 767px) {

	.wv-btb {
		gap: 40px;
		padding: 40px 20px;
	}

	.wv-btb__head {
		gap: 11.38px;
	}

	.wv-btb h2.wv-btb__title {
		font-size: 40px;
		line-height: 1.1;
	}

	.wv-btb p.wv-btb__text {
		max-width: none;
		font-size: 20px;
		letter-spacing: -0.01em;
	}

	.wv-btb__panels {
		grid-template-columns: minmax(0, 1fr);
		gap: 14.22px;
	}

	.wv-btb__panel {
		gap: 40px;
		padding: 20px;
		border-radius: 5.69px;
	}

	.wv-btb__panel--grey {
		justify-content: flex-start;
		gap: 80px;
		min-height: 0;
	}

	.wv-btb__panel--photo {
		min-height: 440px;
	}

	.wv-btb__panel-top {
		gap: 11.38px;
	}

	.wv-btb h3.wv-btb__panel-title {
		max-width: none;
		font-size: 32px;
		line-height: 1.2;
	}

	.wv-btb p.wv-btb__panel-text,
	.wv-btb p.wv-btb__panel-text--narrow {
		max-width: none;
		font-size: 16px;
		line-height: 1.4;
		letter-spacing: -0.01em;
	}

	.wv-btb__panel-bottom {
		gap: 28.44px;
	}

	.wv-btb p.wv-btb__certs-text {
		max-width: none;
		font-size: 14.22px;
	}

	/* row = 100cqw - 80px (20 section + 20 panel padding a side), less three
	   12px gaps, over the ~232 the four come to at 1x; capped at 1.6x. */
	.wv-btb__logos {
		--wvbtb-ls: clamp(1px, calc((100cqw - 116px) / 232), 1.6px);
		gap: 12px;
	}

	.wv-btb img.wv-btb__logo--bcorp {
		height: calc(46 * var(--wvbtb-ls));
	}

	.wv-btb img.wv-btb__logo--climate {
		height: calc(23.79 * var(--wvbtb-ls));
	}

	.wv-btb img.wv-btb__logo--one-percent {
		height: calc(24.15 * var(--wvbtb-ls));
	}

	.wv-btb__charity {
		height: calc(19.57 * var(--wvbtb-ls));
		padding: 0 calc(7.53 * var(--wvbtb-ls));
		border-width: calc(0.75 * var(--wvbtb-ls));
		font-size: calc(9.03 * var(--wvbtb-ls));
	}

	.wv-btb .wv-btb__cta {
		--wv-btn-pad-x: 14.22px;
		--wv-btn-min-h: 32.71px;
		--wv-btn-size: 12px;
		--wv-btn-tracking: -0.02em;
	}
}

/* ── 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-btb p.wv-btb__certs-text {
		font-size: 15px;
	}

	.elementor-element:has(.wv-btb-wrap):has(+ .elementor-element .wv-bcorp-wrap) .wv-btb {
		padding-bottom: 14.22px;
	}
}