/*
 * Bees Works landing page.
 * Every number in pt below is taken from Presentation.pdf (slides are 1152 × 648 pt).
 * Colours are the PDF's own values: #231F20 (dark band/text), #ED1C24 (red), #FFF200 (petal
 * underlay), #000000 (hero tagline). Fonts are the Akrobat subsets embedded in the PDF.
 */

@font-face {
	font-family: "Akrobat";
	src: url("../fonts/akrobat-bold.woff") format("woff");
	font-weight: 700;
	font-style: normal;
	font-display: block;
}
@font-face {
	font-family: "Akrobat";
	src: url("../fonts/akrobat-extrabold.woff") format("woff");
	font-weight: 800;
	font-style: normal;
	font-display: block;
}

:root {
	--bw-dark: #231F20;
	--bw-red: #ED1C24;
}

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
	margin: 0;
	background: #FFFFFF;
	color: var(--bw-dark);
	font-family: "Akrobat", sans-serif;
	font-weight: 700;
	font-kerning: normal;
	text-rendering: geometricPrecision;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}
img, svg { display: block; }

.bw-sr {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0; border: 0;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.bw-red { color: var(--bw-red); }
.bw-band, .s1-band, .s2-panel { background: var(--bw-dark); }
.bw-landing h2, .bw-text p { margin: 0; font-weight: inherit; }
.s3-brands { list-style: none; margin: 0; padding: 0; }

/* ---------- Desktop: exact PDF stage ---------- */
@media (min-width: 1024px) {
	.bw-slide {
		--H: 648;
		position: relative;
		width: 100%;
		aspect-ratio: 1152 / var(--H);
		overflow: hidden;
		container-type: inline-size;
	}
	.s5 { --H: 125.5726; } /* only the slide header has content */

	.bw-abs {
		position: absolute;
		left: calc(var(--x) / 1152 * 100%);
		top: calc(var(--y) / var(--H) * 100%);
		width: calc(var(--w) / 1152 * 100%);
		height: calc(var(--h) / var(--H) * 100%);
	}
	.s3-brands img { width: 100%; height: 100%; }

	/* text: line box tops are baseline − (half-leading + ascent 0.937em) */
	.bw-text, .s3-title { width: auto; height: auto; white-space: nowrap; }
	.bw-text .ln { display: block; }

	.s2-text { --fs: 24; font-size: calc(var(--fs) / 1152 * 100cqw); line-height: 1.28; }  /* 30.72pt pitch */
	.s2-text p + p { margin-top: 2.56em; }                                                  /* 2 blank lines */

	.s3-title { --fs: 94.801; font-size: calc(var(--fs) / 1152 * 100cqw); line-height: 1; color: #FFFFFF; }

	.s4-text { --fs: 12; font-size: calc(var(--fs) / 1152 * 100cqw); line-height: 3.23871; font-weight: 800; } /* 38.865pt pitch */

	.s1-tag-m { display: none; }
}

/* ---------- Tablet / mobile: same elements, stacked ---------- */
@media (max-width: 1023.98px) {
	.bw-slide { display: grid; grid-template-columns: minmax(0, 1fr); }
	.bw-abs { position: static; }

	/* slide 1 */
	.s1 { padding-bottom: 44px; }
	.s1-band { grid-area: 1 / 1; }
	.s1-logo { grid-area: 1 / 1; justify-self: center; width: min(62%, 340px); height: auto; margin: 36px 0; }
	.s1-art { grid-area: 2 / 1; width: min(86%, 440px); height: auto; aspect-ratio: 481.5 / 648; }
	.s1-tag { display: none; }
	.s1-tag-m {
		grid-area: 3 / 1;
		justify-self: center;
		width: min(calc(100% - 32px), 560px);
		margin-top: 28px;
		display: flex; flex-direction: column; align-items: center; gap: 10px;
	}
	.s1-tag-a { width: calc(298.35 / 413.21 * 100%); height: auto; }
	.s1-tag-b { width: 100%; height: auto; }

	/* slide 2 */
	.s2-photo { grid-area: 1 / 1; width: 100%; height: auto; aspect-ratio: 331.2 / 246.96; object-fit: cover; }
	.s2-panel { grid-area: 2 / 1; }
	.s2-logo { grid-area: 2 / 1; justify-self: center; width: auto; height: min(300px, 64vw); margin: 44px 0; }
	.s2-text {
		grid-area: 3 / 1;
		padding: 40px 20px 52px;
		font-size: clamp(17px, 4.6vw, 24px);
		line-height: 1.28;
	}
	.s2-text p + p { margin-top: 1.28em; }

	/* slide headers */
	.bw-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
	.bw-band { grid-area: 1 / 1 / 2 / -1; align-self: stretch; }
	.bw-head-logo { grid-area: 1 / 2; width: clamp(110px, 30vw, 182px); height: auto; margin: 16px 20px 16px 12px; }

	.s3-title {
		grid-area: 1 / 1;
		padding: 18px 0 14px 20px;
		color: #FFFFFF;
		font-size: clamp(44px, 12.5vw, 94.8px);
		line-height: 1;
	}

	.s4 .bw-head, .s5 .bw-head { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr) auto; }
	.s4 .bw-band, .s5 .bw-band { grid-area: 1 / 2 / 2 / -1; }
	.bw-head-brand { grid-area: 1 / 1; justify-self: center; width: 82%; height: auto; margin: 10px 0; }
	.s4 .bw-head-logo, .s5 .bw-head-logo { grid-area: 1 / 3; }

	/* slide 3 logos: keep each logo's PDF width relative to a ~290pt column */
	.s3-brands {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 36px 20px;
		align-items: center;
		padding: 40px 20px 52px;
	}
	.s3-brands li { display: flex; justify-content: center; }
	.s3-brands img { width: min(100%, calc(var(--w) / 290 * 100%)); height: auto; }

	/* slide 4 */
	.s4-photo { width: calc(100% - 32px); height: auto; margin: 0 16px 10px; }
	.s4-photo:first-of-type { margin-top: 0; }
	.s4 .bw-head { margin-bottom: 24px; }
	.s4-text {
		padding: 20px 20px 52px;
		font-size: clamp(16px, 4.2vw, 19px);
		font-weight: 800;
		line-height: 1.7;
	}

	@media (min-width: 640px) {
		.s3-brands { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	}
}