/* Brave Ronil — What We're Building. Figma node 5602:18412 (desktop, 1440).
   Left: badge + heading + intro + focus list (sticky). Right: 3 cards, each
   with fixed styling (one dark, per the Figma "Support Families" card). Only
   the list highlight changes on scroll — the cards never restyle. */
.brb-wb {
	/* Width 100% (NOT 100vw) so the widget never overshoots by the scrollbar
	   width. No overflow:hidden — it would break the sticky left column. */
	width: 100%;
	background: #fff7f5;
	padding: 96px 0;
	box-sizing: border-box;
}
.brb-wb *,
.brb-wb *::before,
.brb-wb *::after {
	box-sizing: border-box;
}

/* 1280 max + 32px pad = the same 1216px content width as Figma (1440 − 224). */
.brb-wb__inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 32px;
	display: flex;
	gap: 64px;
	align-items: flex-start;
}

/* ---- Left column ---- */
.brb-wb__left {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 64px;
	align-items: flex-start;
	position: sticky;
	top: 120px;
	align-self: flex-start;
}
.brb-wb__intro {
	width: 100%;
	max-width: 637px;
	display: flex;
	flex-direction: column;
	gap: 32px;
	align-items: flex-start;
}
.brb-wb__head {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 16px;
	align-items: flex-start;
}
.brb-wb__badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.brb-wb__dot {
	width: 12px;
	height: 12px;
	border-radius: 9999px;
	background: #ff4405;
	flex: 0 0 auto;
}
.brb-wb .brb-wb__badge-txt {
	font-family: "Inter Tight", sans-serif;
	font-weight: 700;
	font-size: 16px;
	line-height: 24px;
	text-transform: uppercase;
	color: #181d27;
}
.brb-wb .brb-wb__title {
	margin: 0;
	font-family: "Bitter", serif;
	font-weight: 600;
	font-size: 48px;
	line-height: 52px;
	letter-spacing: -0.96px;
	color: #181d27;
}
.brb-wb .brb-wb__text {
	margin: 0;
	width: 493px;
	max-width: 100%;
	font-family: "Inter Tight", sans-serif;
	font-weight: 400;
	font-size: 18px;
	line-height: 28px;
	color: #414651;
}

/* Focus list */
.brb-wb__nav {
	width: 346px;
	max-width: 100%;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.brb-wb__list {
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
	display: flex;
	flex-direction: column;
}
.brb-wb .brb-wb__list-item {
	margin: 0;
	padding: 16px 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
	font-family: "Bitter", serif;
	font-weight: 500;
	font-size: 20px;
	line-height: 30px;
	color: #717680;
	transition: color 0.3s ease;
	cursor: pointer;
}
.brb-wb .brb-wb__list-item:hover {
	color: #181d27;
}
.brb-wb .brb-wb__list-item:focus-visible {
	outline: 2px solid #ff4405;
	outline-offset: 2px;
}
.brb-wb .brb-wb__list-item.is-active {
	color: #181d27;
}

/* ---- Right column ---- */
.brb-wb__right {
	flex: 0 0 519px;
	width: 519px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* Cards */
.brb-wb__card {
	width: 100%;
	background: #ffffff;
	border-radius: 16px;
	padding: 24px;
	display: flex;
	flex-direction: row;
	gap: 24px;
	align-items: stretch;
	overflow: hidden;
}
.brb-wb__card-body {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 40px;
	align-items: flex-start;
}
.brb-wb__card-icon {
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	overflow: hidden;
}
.brb-wb__card-icon img {
	display: block;
	width: 24px !important;
	height: 24px !important;
}
.brb-wb__card-text {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.brb-wb .brb-wb__card-title {
	margin: 0;
	font-family: "Bitter", serif;
	font-weight: 600;
	font-size: 20px;
	line-height: 30px;
	color: #181d27;
}
.brb-wb .brb-wb__card-desc {
	margin: 0;
	font-family: "Inter Tight", sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 24px;
	color: #414651;
}

/* Card photo — 147 × (147/174 aspect), stretched to the card height */
.brb-wb__card-img {
	flex: 0 0 147px;
	width: 147px;
	border-radius: 8px;
	overflow: hidden;
	align-self: stretch;
	aspect-ratio: 147 / 174;
}
.brb-wb__card-img img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
}

/* ---- Dark card (Figma "Support Families") — a static per-item setting,
       not a scroll state. Cards never restyle while scrolling. ---- */
.brb-wb__card--dark {
	background: #0a190d;
}
.brb-wb .brb-wb__card--dark .brb-wb__card-title,
.brb-wb .brb-wb__card--dark .brb-wb__card-desc {
	color: #ffffff;
}
/* Icons ship in their own brand colours; force white on the dark card. */
.brb-wb__card--dark .brb-wb__card-icon img {
	filter: brightness(0) invert(1);
}

@media (prefers-reduced-motion: reduce) {
	.brb-wb .brb-wb__list-item {
		transition: none;
	}
}

/* ---- Below desktop: single stack, sticky off (desktop is the spec'd layout) ---- */
@media (max-width: 1024px) {
	.brb-wb {
		padding: 64px 0;
	}
	.brb-wb__inner {
		flex-direction: column;
		gap: 48px;
	}
	.brb-wb__left {
		position: static;
		gap: 32px;
		width: 100%;
	}
	.brb-wb__right {
		flex: none;
		width: 100%;
	}
	.brb-wb .brb-wb__title {
		font-size: 36px;
		line-height: 44px;
		letter-spacing: -0.72px;
	}
	.brb-wb .brb-wb__text {
		width: 100%;
		font-size: 16px;
		line-height: 24px;
	}
	.brb-wb__nav {
		width: 100%;
	}
}