.bbp {
	--bbp-ink: #002815;
	--bbp-accent: #ddbd00;
	--bbp-card: #ffffff;
	--bbp-muted: #495b55;
	--bbp-mist: #f6f7f7;
	display: flex;
	flex-direction: column;
	gap: 48px;
	font-family: Roboto, sans-serif;
	color: var(--bbp-muted);
}
.bbp *, .bbp *::before, .bbp *::after { box-sizing: border-box; }
.bbp-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px; }
.bbp-head { display: flex; flex-direction: column; gap: 20px; max-width: 680px; }
.bbp-eyebrow { font-size: 14px; line-height: 23px; font-weight: 500; letter-spacing: 0.5px; text-transform: uppercase; color: var(--bbp-ink); }
.bbp .bbp-title { margin: 0; font-family: Inter, sans-serif; font-weight: 700; font-size: 54px; line-height: 55px; letter-spacing: -2px; color: var(--bbp-ink); }
.bbp-nav { display: flex; align-items: center; gap: 12px; }
.bbp-count { min-width: 56px; text-align: right; font-size: 15px; color: var(--bbp-muted); font-variant-numeric: tabular-nums; }
.bbp .bbp-prev, .bbp .bbp-next {
	width: 52px; height: 52px; margin: 0; padding: 0; border-radius: 50%; cursor: pointer;
	display: inline-flex; align-items: center; justify-content: center;
	border: 1px solid var(--bbp-ink); background: #ffffff; color: var(--bbp-ink); line-height: 0;
	transition: background-color .15s, color .15s;
}
.bbp .bbp-next { background: var(--bbp-ink); color: var(--bbp-accent); }
.bbp .bbp-prev:hover { background: var(--bbp-mist); color: var(--bbp-ink); }
.bbp .bbp-next:hover { background: #0b3d24; color: var(--bbp-accent); }
.bbp .bbp-prev:focus-visible, .bbp .bbp-next:focus-visible, .bbp .bbp-dot:focus-visible { outline: 2px solid var(--bbp-ink); outline-offset: 3px; }
.bbp-viewport { overflow: hidden; border-radius: 24px; touch-action: pan-y; }
.bbp-track { display: flex; transition: transform .45s ease; will-change: transform; }
.bbp-slide {
	flex: 0 0 100%; min-width: 0;
	display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	background: var(--bbp-card); border-radius: 24px; overflow: hidden;
}
.bbp-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 20px; align-items: center; }
.bbp-fig { position: relative; margin: 0; }
.bbp .bbp-img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 16px; }
.bbp-img-missing { background: #e0e7e3; }
.bbp-tag {
	position: absolute; top: 12px; left: 12px; padding: 5px 14px; border-radius: 99px;
	font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase;
}
.bbp-tag-before { background: var(--bbp-ink); color: #ffffff; }
.bbp-tag-after { background: var(--bbp-accent); color: var(--bbp-ink); }
.bbp-copy { padding: 32px 36px 32px 16px; display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.bbp-meta { font-size: 14px; line-height: 23px; font-weight: 500; letter-spacing: 0.5px; text-transform: uppercase; color: var(--bbp-muted); }
.bbp .bbp-heading { margin: 0; font-family: Inter, sans-serif; font-weight: 700; font-size: 28px; line-height: 33px; letter-spacing: -1px; color: var(--bbp-ink); }
.bbp .bbp-scope { margin: 0; font-size: 15px; line-height: 24px; color: var(--bbp-muted); }
.bbp .bbp-quote {
	margin: 6px 0 0; padding: 16px 20px; border: 0; border-radius: 12px; background: var(--bbp-mist);
	display: flex; flex-direction: column; gap: 6px; font-style: normal;
}
.bbp .bbp-quote p { margin: 0; font-size: 15px; line-height: 24px; color: var(--bbp-ink); font-style: normal; }
.bbp .bbp-quote cite { font-size: 13px; line-height: 20px; font-style: normal; color: var(--bbp-muted); }
.bbp-dots { display: flex; justify-content: center; gap: 8px; }
.bbp .bbp-dot {
	width: 10px; height: 10px; margin: 0; padding: 0; border: 0; border-radius: 99px; cursor: pointer;
	background: #c9d2cd; transition: width .2s, background-color .2s;
}
.bbp .bbp-dot[aria-pressed="true"] { width: 32px; background: var(--bbp-ink); }

@media (max-width: 900px) {
	.bbp-slide { grid-template-columns: minmax(0, 1fr); }
	.bbp-copy { padding: 8px 24px 28px; }
}
@media (max-width: 767px) {
	.bbp { gap: 32px; }
	.bbp .bbp-title { font-size: 36px; line-height: 40px; letter-spacing: -1px; }
	.bbp-pair { padding: 12px; }
	.bbp-copy { padding: 8px 20px 24px; }
	.bbp .bbp-heading { font-size: 22px; line-height: 27px; }
}
@media (prefers-reduced-motion: reduce) {
	.bbp-track { transition: none; }
}
.bbp .bbp-dot:hover { background: #9aa7a0; }
.bbp .bbp-dot[aria-pressed="true"]:hover { background: var(--bbp-ink); }