/* ==========================================================================
   BARI BUTI MARKETING S.L. — Signal Dark design system
   1. Design tokens
   2. Base & typography
   3. Buttons
   4. Preloader
   5. Header / Navbar
   6. Numeric navigation links
   7. Services mega dropdown + blur-in animation
   8. Mobile navigation
   9. Hero
   10. Motion preferences
   ========================================================================== */

/* ============ 1. DESIGN TOKENS ============ */
:root {
	--bb-ink: #070A12;
	--bb-surface: #0C1220;
	--bb-panel: #111726;
	--bb-panel-soft: #161D2E;
	--bb-line: rgba(245, 247, 250, 0.10);
	--bb-line-strong: rgba(245, 247, 250, 0.18);

	--bb-accent: #C8FF3D;
	--bb-accent-deep: #A6DC1F;
	--bb-accent-glow: rgba(200, 255, 61, 0.28);

	--bb-text: #F5F7FA;
	--bb-muted: #8A94A6;

	--bb-font-display: "Space Grotesk", "Segoe UI", sans-serif;
	--bb-font-body: "Inter", "Segoe UI", sans-serif;

	--bb-ease: cubic-bezier(0.25, 1, 0.5, 1);
	--bb-ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
	--bb-header-h: 92px;
	--bb-header-h-sm: 72px;
	--bb-radius: 14px;
}

/* ============ 2. BASE & TYPOGRAPHY ============ */
html {
	scroll-behavior: smooth;
	overflow-x: clip;
	max-width: 100%;
}

body {
	background-color: var(--bb-ink);
	color: var(--bb-text);
	font-family: var(--bb-font-body);
	font-weight: 400;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
	max-width: 100%;
}

img,
video {
	max-width: 100%;
	height: auto;
}

h1, h2, h3, h4, h5, h6,
.bb-display {
	font-family: var(--bb-font-display);
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.08;
}

a {
	color: inherit;
	text-decoration: none;
}

::selection {
	background: var(--bb-accent);
	color: var(--bb-ink);
}

/* Keyboard-only accessibility helper */
.bb-skip-link {
	position: absolute;
	top: -100px;
	left: 24px;
	z-index: 2000;
	padding: 12px 20px;
	background: var(--bb-accent);
	color: var(--bb-ink);
	font-weight: 600;
	border-radius: 0 0 10px 10px;
	transition: top 0.3s var(--bb-ease);
}

.bb-skip-link:focus-visible {
	top: 0;
	outline: none;
}

/* ============ 3. BUTTONS ============ */
.bb-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 13px 24px;
	border: 1px solid transparent;
	border-radius: 100px;
	font-family: var(--bb-font-display);
	font-size: 0.9rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	white-space: nowrap;
	cursor: pointer;
	transition: transform 0.5s var(--bb-ease), background-color 0.45s var(--bb-ease),
		color 0.45s var(--bb-ease), border-color 0.45s var(--bb-ease), box-shadow 0.5s var(--bb-ease);
}

.bb-btn i {
	font-size: 0.82em;
	transition: transform 0.45s var(--bb-ease);
}

.bb-btn:hover i {
	transform: translateX(3px);
}

.bb-btn--accent {
	background: var(--bb-accent);
	color: var(--bb-ink);
	box-shadow: 0 0 0 0 var(--bb-accent-glow);
}

.bb-btn--accent:hover {
	background: var(--bb-accent-deep);
	transform: translateY(-2px);
	box-shadow: 0 12px 30px -10px var(--bb-accent-glow);
}

.bb-btn--ghost {
	background: transparent;
	color: var(--bb-text);
	border-color: var(--bb-line-strong);
}

.bb-btn--ghost:hover {
	background: rgba(245, 247, 250, 0.06);
	border-color: var(--bb-text);
	transform: translateY(-2px);
}

.bb-btn--sm {
	padding: 11px 18px;
	font-size: 0.82rem;
}

.bb-btn--lg {
	padding: 16px 30px;
	font-size: 0.98rem;
}

.bb-btn:focus-visible {
	outline: 2px solid var(--bb-accent);
	outline-offset: 3px;
}

/* ============ 4. PRELOADER ============ */
.bb-preloader {
	position: fixed;
	inset: 0;
	z-index: 3000;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--bb-ink);
	transition: opacity 0.7s var(--bb-ease), visibility 0.7s var(--bb-ease);
}

.bb-preloader.is-hidden {
	opacity: 0;
	visibility: hidden;
}

.bb-preloader__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
}

.bb-preloader__mark {
	font-family: var(--bb-font-display);
	font-size: 2.4rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--bb-accent);
	animation: bbPulse 1.6s var(--bb-ease-soft) infinite;
}

.bb-preloader__bar {
	position: relative;
	display: block;
	width: 180px;
	height: 2px;
	background: var(--bb-line);
	overflow: hidden;
}

.bb-preloader__bar i {
	position: absolute;
	inset: 0 auto 0 0;
	width: 40%;
	background: var(--bb-accent);
	animation: bbSweep 1.4s var(--bb-ease-soft) infinite;
}

.bb-preloader__label {
	font-size: 0.72rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--bb-muted);
}

@keyframes bbPulse {
	0%, 100% { opacity: 1; transform: translateY(0); }
	50% { opacity: 0.55; transform: translateY(-3px); }
}

@keyframes bbSweep {
	0% { transform: translateX(-100%); }
	100% { transform: translateX(350%); }
}

/* ============ 5. HEADER / NAVBAR ============ */
.bb-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width: auto;
	max-width: 100%;
	z-index: 1040;
	background: transparent;
	border-bottom: 1px solid transparent;
	transition: background-color 0.55s var(--bb-ease), backdrop-filter 0.55s var(--bb-ease),
		border-color 0.55s var(--bb-ease), box-shadow 0.55s var(--bb-ease);
}

/* Solid dark glassmorphism state applied by app.js after 40px of scroll */
.bb-header.is-stuck {
	background: rgba(7, 10, 18, 0.82);
	backdrop-filter: blur(18px) saturate(140%);
	-webkit-backdrop-filter: blur(18px) saturate(140%);
	border-bottom-color: var(--bb-line);
	box-shadow: 0 18px 40px -28px rgba(0, 0, 0, 0.9);
}

.bb-navbar {
	padding: 0;
	height: var(--bb-header-h);
	transition: height 0.55s var(--bb-ease);

	/* Bootstrap resolves navbar link colours through these variables and its
	   `.navbar-nav .nav-link.show` rule outranks plain class selectors, so the
	   palette has to be remapped here instead of fought with specificity. */
	--bs-navbar-color: var(--bb-text);
	--bs-navbar-hover-color: var(--bb-text);
	--bs-navbar-active-color: var(--bb-text);
	--bs-navbar-disabled-color: var(--bb-muted);
	--bs-nav-link-color: var(--bb-text);
	--bs-nav-link-hover-color: var(--bb-text);
}

.bb-header.is-stuck .bb-navbar {
	height: var(--bb-header-h-sm);
}

/* Relative so the mega panel can align to the container grid, stretched so the
   panel's `top: 100%` measures the full navbar height rather than logo height. */
.bb-navbar > .container-xxl {
	position: relative;
	align-self: stretch;
	display: flex;
	align-items: center;
	gap: 24px;
	min-width: 0;
	max-width: 100%;
}

/* Logo */
.bb-logo {
	display: inline-flex;
	align-items: center;
	gap: 13px;
	padding: 0;
	margin: 0;
}

.bb-logo__mark {
	display: block;
	width: 44px;
	height: 44px;
	flex: 0 0 44px;
	transition: transform 0.6s var(--bb-ease);
}

.bb-logo__mark svg {
	width: 100%;
	height: 100%;
	overflow: visible;
}

.bb-logo__frame {
	fill: none;
	stroke: var(--bb-line-strong);
	stroke-width: 2;
	stroke-dasharray: 232;
	stroke-dashoffset: 0;
	transition: stroke 0.5s var(--bb-ease), stroke-dashoffset 0.9s var(--bb-ease);
}

.bb-logo__glyph {
	fill: none;
	stroke: var(--bb-text);
	stroke-width: 3.2;
	stroke-linecap: round;
	transition: stroke 0.5s var(--bb-ease);
}

.bb-logo__dot {
	fill: var(--bb-accent);
	transition: transform 0.6s var(--bb-ease);
	transform-origin: 35.5px 35px;
}

.bb-logo:hover .bb-logo__frame,
.bb-logo:focus-visible .bb-logo__frame {
	stroke: var(--bb-accent);
	stroke-dashoffset: 232;
}

.bb-logo:hover .bb-logo__glyph {
	stroke: var(--bb-accent);
}

.bb-logo:hover .bb-logo__dot {
	transform: scale(1.45);
}

.bb-logo:hover .bb-logo__mark {
	transform: translateY(-2px);
}

.bb-logo__text {
	display: flex;
	flex-direction: column;
	line-height: 1.1;
}

.bb-logo__name {
	font-family: var(--bb-font-display);
	font-size: 1.16rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--bb-text);
}

.bb-logo__meta {
	font-size: 0.62rem;
	font-weight: 500;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--bb-muted);
}

.bb-logo:focus-visible {
	outline: 2px solid var(--bb-accent);
	outline-offset: 6px;
	border-radius: 8px;
}

/* Header actions */
.bb-navbar__actions {
	display: flex;
	align-items: center;
	gap: 22px;
	margin-left: 28px;
}

.bb-navbar__mail {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 0.82rem;
	color: var(--bb-muted);
	transition: color 0.4s var(--bb-ease);
}

.bb-navbar__mail:hover,
.bb-navbar__mail:focus-visible {
	color: var(--bb-accent);
}

@media (max-width: 1399.98px) {
	.bb-navbar__mail {
		display: none;
	}
}

/* ============ 6. NUMERIC NAVIGATION LINKS ============ */
.bb-nav {
	align-items: center;
	gap: 6px;
}

.bb-nav__link {
	position: relative;
	display: inline-flex;
	align-items: baseline;
	gap: 7px;
	padding: 10px 14px !important;
	font-family: var(--bb-font-display);
	font-size: 0.92rem;
	font-weight: 500;
	color: var(--bb-text);
	transition: color 0.4s var(--bb-ease);
}

.bb-nav__num {
	font-size: 0.66rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	color: var(--bb-muted);
	transition: color 0.4s var(--bb-ease), transform 0.5s var(--bb-ease);
}

.bb-nav__label {
	position: relative;
}

/* Underline expanding from the centre */
.bb-nav__label::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -6px;
	width: 0;
	height: 1.5px;
	background: var(--bb-accent);
	transform: translateX(-50%);
	transition: width 0.45s var(--bb-ease);
}

.bb-nav__link:hover .bb-nav__label::after,
.bb-nav__link:focus-visible .bb-nav__label::after,
.bb-nav__link.show .bb-nav__label::after,
.bb-nav__link.active .bb-nav__label::after,
.bb-nav__link[aria-current="page"] .bb-nav__label::after {
	width: 100%;
}

.bb-nav__link:hover,
.bb-nav__link:focus-visible,
.bb-nav__link.show,
.bb-nav__link.active,
.bb-nav__link[aria-current="page"] {
	color: var(--bb-text);
}

.bb-nav__link:hover .bb-nav__num,
.bb-nav__link.show .bb-nav__num,
.bb-nav__link.active .bb-nav__num,
.bb-nav__link[aria-current="page"] .bb-nav__num {
	color: var(--bb-accent);
	transform: translateY(-2px);
}

.bb-nav__link:focus-visible {
	outline: 2px solid var(--bb-accent);
	outline-offset: 2px;
	border-radius: 8px;
}

/* Caret */
.bb-nav__link.dropdown-toggle::after {
	display: none;
}

.bb-nav__caret {
	font-size: 0.6rem;
	color: var(--bb-muted);
	transition: transform 0.5s var(--bb-ease), color 0.4s var(--bb-ease);
}

.bb-nav__link.show .bb-nav__caret {
	transform: rotate(180deg);
	color: var(--bb-accent);
}

/* ============ 7. SERVICES MEGA DROPDOWN ============ */
.bb-has-mega {
	position: static;
}

.bb-mega {
	display: block;
	padding: 26px;
	background: rgba(17, 23, 38, 0.94);
	backdrop-filter: blur(22px) saturate(150%);
	-webkit-backdrop-filter: blur(22px) saturate(150%);
	border: 1px solid var(--bb-line);
	border-radius: 20px;
	box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.95);
	transform-origin: top center;

	/* Blur-in + slide-down closed state */
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(-14px) scale(0.985);
	filter: blur(8px);
	transition: opacity 0.42s var(--bb-ease), transform 0.52s var(--bb-ease),
		filter 0.42s var(--bb-ease), visibility 0.52s var(--bb-ease);
}

/* Bootstrap skips Popper for dropdowns inside a navbar and instead positions the
   panel through `.dropdown-menu[data-bs-popper]`, which forces `left: 0`. These
   rules need equal specificity to keep the panel aligned to the container grid. */
.bb-navbar .dropdown-menu.bb-mega {
	position: absolute;
	top: calc(100% - 6px);
	right: calc(var(--bs-gutter-x) * 0.5);
	left: auto;
	width: min(1000px, calc(100% - var(--bs-gutter-x)));
	margin: 0;
}

.bb-mega.show {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateY(0) scale(1);
	filter: blur(0);
}

.bb-mega__grid {
	display: grid;
	grid-template-columns: 1fr 1fr 0.82fr;
	gap: 26px;
}

.bb-mega__col {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.bb-mega__eyebrow {
	margin: 0 0 10px;
	padding-left: 14px;
	font-size: 0.66rem;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--bb-muted);
}

.bb-mega__item {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 14px;
	border: 1px solid transparent;
	border-radius: var(--bb-radius);
	transition: background-color 0.45s var(--bb-ease), border-color 0.45s var(--bb-ease),
		transform 0.5s var(--bb-ease);

	/* Staggered reveal, delays assigned below */
	opacity: 0;
	transform: translateY(10px);
}

.bb-mega.show .bb-mega__item {
	opacity: 1;
	transform: translateY(0);
	transition: opacity 0.5s var(--bb-ease), transform 0.55s var(--bb-ease),
		background-color 0.45s var(--bb-ease), border-color 0.45s var(--bb-ease);
}

.bb-mega.show .bb-mega__col:nth-child(1) .bb-mega__item:nth-child(2) { transition-delay: 0.06s; }
.bb-mega.show .bb-mega__col:nth-child(1) .bb-mega__item:nth-child(3) { transition-delay: 0.12s; }
.bb-mega.show .bb-mega__col:nth-child(1) .bb-mega__item:nth-child(4) { transition-delay: 0.18s; }
.bb-mega.show .bb-mega__col:nth-child(2) .bb-mega__item:nth-child(2) { transition-delay: 0.10s; }
.bb-mega.show .bb-mega__col:nth-child(2) .bb-mega__item:nth-child(3) { transition-delay: 0.16s; }
.bb-mega.show .bb-mega__col:nth-child(2) .bb-mega__item:nth-child(4) { transition-delay: 0.22s; }

.bb-mega__item--all {
	margin: 0 0 16px;
}

.bb-mega__item:hover,
.bb-mega__item:focus-visible,
.bb-mega__item.active {
	background: var(--bb-panel-soft);
	border-color: var(--bb-line-strong);
	transform: translateY(-2px);
	outline: none;
}

.bb-mega__item:focus-visible {
	border-color: var(--bb-accent);
}

.bb-mega__icon {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	flex: 0 0 38px;
	border: 1px solid var(--bb-line);
	border-radius: 11px;
	background: rgba(200, 255, 61, 0.06);
	color: var(--bb-accent);
	font-size: 0.92rem;
	transition: background-color 0.45s var(--bb-ease), border-color 0.45s var(--bb-ease),
		color 0.45s var(--bb-ease), transform 0.5s var(--bb-ease);
}

.bb-mega__item:hover .bb-mega__icon {
	background: var(--bb-accent);
	border-color: var(--bb-accent);
	color: var(--bb-ink);
	transform: rotate(-6deg);
}

.bb-mega__body {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.bb-mega__title {
	font-family: var(--bb-font-display);
	font-size: 0.94rem;
	font-weight: 600;
	color: var(--bb-text);
	line-height: 1.3;
}

.bb-mega__desc {
	font-size: 0.78rem;
	line-height: 1.5;
	color: var(--bb-muted);
}

.bb-mega__arrow {
	margin-left: auto;
	align-self: center;
	font-size: 0.72rem;
	color: var(--bb-muted);
	opacity: 0;
	transform: translateX(-6px);
	transition: opacity 0.4s var(--bb-ease), transform 0.45s var(--bb-ease), color 0.4s var(--bb-ease);
}

.bb-mega__item:hover .bb-mega__arrow,
.bb-mega__item:focus-visible .bb-mega__arrow {
	opacity: 1;
	transform: translateX(0);
	color: var(--bb-accent);
}

/* Aside promo panel */
.bb-mega__aside {
	display: flex;
	flex-direction: column;
	padding: 20px;
	border: 1px solid var(--bb-line);
	border-radius: var(--bb-radius);
	background:
		radial-gradient(120% 100% at 100% 0%, rgba(200, 255, 61, 0.10) 0%, transparent 58%),
		var(--bb-surface);
}

.bb-mega__asideText {
	margin: 0 0 16px;
	font-size: 0.82rem;
	line-height: 1.6;
	color: var(--bb-text);
}

.bb-mega__facts {
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.bb-mega__facts li {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	font-size: 0.78rem;
	line-height: 1.45;
	color: var(--bb-muted);
}

.bb-mega__facts i {
	margin-top: 3px;
	font-size: 0.66rem;
	color: var(--bb-accent);
}

.bb-mega__aside .bb-btn {
	margin-top: auto;
}

/* ============ 8. MOBILE NAVIGATION ============ */
.bb-toggler {
	padding: 0;
	width: 46px;
	height: 46px;
	margin-left: auto;
	display: grid;
	place-items: center;
	border: 1px solid var(--bb-line-strong);
	border-radius: 12px;
	background: transparent;
	transition: border-color 0.4s var(--bb-ease), background-color 0.4s var(--bb-ease);
}

.bb-toggler:focus {
	box-shadow: none;
}

.bb-toggler:focus-visible {
	outline: 2px solid var(--bb-accent);
	outline-offset: 3px;
}

.bb-toggler__bars {
	display: flex;
	flex-direction: column;
	gap: 5px;
	width: 20px;
}

.bb-toggler__bars i {
	display: block;
	height: 1.6px;
	background: var(--bb-text);
	border-radius: 2px;
	transition: transform 0.5s var(--bb-ease), opacity 0.4s var(--bb-ease), width 0.5s var(--bb-ease);
}

.bb-toggler__bars i:nth-child(2) {
	width: 70%;
	margin-left: auto;
}

.bb-toggler:hover {
	border-color: var(--bb-accent);
}

.bb-toggler:hover .bb-toggler__bars i:nth-child(2) {
	width: 100%;
}

.bb-toggler[aria-expanded="true"] .bb-toggler__bars i:nth-child(1) {
	transform: translateY(6.6px) rotate(45deg);
}

.bb-toggler[aria-expanded="true"] .bb-toggler__bars i:nth-child(2) {
	opacity: 0;
}

.bb-toggler[aria-expanded="true"] .bb-toggler__bars i:nth-child(3) {
	transform: translateY(-6.6px) rotate(-45deg);
}

@media (max-width: 991.98px) {
	.bb-header {
		padding-top: env(safe-area-inset-top, 0px);
	}

	.bb-navbar {
		height: auto;
		min-height: 88px;
		padding-top: 16px;
		padding-bottom: 12px;
	}

	.bb-header.is-stuck .bb-navbar {
		height: auto;
		min-height: 80px;
		padding-top: 14px;
		padding-bottom: 12px;
	}

	.bb-collapse {
		max-height: calc(100vh - 120px);
		overflow-y: auto;
		overflow-x: hidden;
		margin: 8px 0 20px;
		padding: 18px;
		background: rgba(12, 18, 32, 0.96);
		backdrop-filter: blur(18px);
		-webkit-backdrop-filter: blur(18px);
		border: 1px solid var(--bb-line);
		border-radius: 18px;
	}

	.bb-nav {
		align-items: stretch;
		gap: 2px;
	}

	.bb-nav__link {
		padding: 14px 4px !important;
		font-size: 1.05rem;
		border-bottom: 1px solid var(--bb-line);
	}

	.bb-nav__caret {
		margin-left: auto;
	}

	.bb-nav__label::after {
		display: none;
	}

	/* Inside the collapsed menu the panel becomes a plain accordion, so the
	   desktop positioning rules are unwound at the same specificity. */
	.bb-navbar .dropdown-menu.bb-mega {
		position: static;
		top: auto;
		right: auto;
		left: auto;
		width: 100%;
		padding: 0;
		background: transparent;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		border: none;
		border-radius: 0;
		box-shadow: none;
		transform: none;
		filter: none;
		max-height: 0;
		overflow: hidden;
		transition: max-height 0.55s var(--bb-ease), opacity 0.4s var(--bb-ease),
			padding 0.4s var(--bb-ease);
	}

	.bb-navbar .dropdown-menu.bb-mega.show {
		max-height: none;
		overflow: visible;
		padding: 14px 0 4px;
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: none;
		filter: none;
	}

	.bb-mega__grid {
		grid-template-columns: 1fr;
		gap: 14px;
	}

	.bb-mega__item {
		padding: 12px 10px;
		background: var(--bb-panel);
		border-color: var(--bb-line);
	}

	.bb-navbar__actions {
		flex-direction: column;
		align-items: stretch;
		gap: 14px;
		margin: 22px 0 0;
	}

	.bb-navbar__mail {
		display: inline-flex;
		justify-content: center;
	}
}

/* ============ 9. REVEAL PRIMITIVES ============ */

/* Masked line reveal: the wrapper clips, the inner span slides up into view. */
.bb-reveal {
	display: block;
	overflow: hidden;
	padding-bottom: 0.08em;
}

.bb-reveal > span {
	display: block;
	transform: translateY(110%);
	transition: transform 0.95s var(--bb-ease);
}

.is-revealed .bb-reveal > span {
	transform: translateY(0);
}

.is-revealed .bb-reveal:nth-child(2) > span { transition-delay: 0.10s; }
.is-revealed .bb-reveal:nth-child(3) > span { transition-delay: 0.20s; }

/* Soft rise used for supporting blocks. */
.bb-rise {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.8s var(--bb-ease), transform 0.9s var(--bb-ease);
}

.is-revealed .bb-rise {
	opacity: 1;
	transform: translateY(0);
}

.bb-rise--d2 { transition-delay: 0.34s; }
.bb-rise--d3 { transition-delay: 0.44s; }
.bb-rise--d4 { transition-delay: 0.54s; }

/* ============ 10. HERO ============ */
.bb-hero {
	position: relative;
	display: flex;
	align-items: flex-start;
	min-height: 0;
	padding: calc(var(--bb-header-h) + 48px) 0 72px;
	overflow: hidden;
	background:
		radial-gradient(90% 70% at 78% 8%, rgba(200, 255, 61, 0.10) 0%, transparent 55%),
		linear-gradient(180deg, var(--bb-ink) 0%, var(--bb-surface) 100%);
}

/* Cursor-tracked glow, coordinates written by app.js on pointer devices only. */
.bb-hero__glow {
	position: absolute;
	inset: 0;
	background: radial-gradient(420px 420px at var(--bb-mx, 70%) var(--bb-my, 30%),
		rgba(200, 255, 61, 0.11) 0%, transparent 68%);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.7s var(--bb-ease);
}

.bb-hero.is-tracking .bb-hero__glow {
	opacity: 1;
}

.bb-hero__grid {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(to right, var(--bb-line) 1px, transparent 1px),
		linear-gradient(to bottom, var(--bb-line) 1px, transparent 1px);
	background-size: 84px 84px;
	mask-image: radial-gradient(70% 60% at 50% 40%, #000 0%, transparent 100%);
	-webkit-mask-image: radial-gradient(70% 60% at 50% 40%, #000 0%, transparent 100%);
	opacity: 0.55;
	pointer-events: none;
}

.bb-hero > .container-xxl {
	position: relative;
	z-index: 1;
}

.bb-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 26px;
	font-size: 0.76rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--bb-muted);
}

.bb-hero__eyebrow span {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--bb-accent);
	box-shadow: 0 0 0 5px rgba(200, 255, 61, 0.14);
}

.bb-hero__title {
	margin: 0 0 26px;
	font-size: clamp(2.4rem, 6vw, 4.6rem);
	font-weight: 600;
}

.bb-hero__title em {
	font-style: normal;
	color: var(--bb-accent);
}

.bb-hero__lead {
	max-width: 62ch;
	margin: 0 0 38px;
	font-size: clamp(1rem, 1.6vw, 1.16rem);
	font-weight: 300;
	color: var(--bb-muted);
}

.bb-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

.bb-hero__segments {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 42px 0 0;
	padding: 0;
}

.bb-hero__segments li {
	padding: 7px 15px;
	border: 1px solid var(--bb-line);
	border-radius: 100px;
	background: rgba(245, 247, 250, 0.03);
	font-size: 0.76rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	color: var(--bb-muted);
	transition: border-color 0.45s var(--bb-ease), color 0.45s var(--bb-ease),
		transform 0.5s var(--bb-ease);
}

.bb-hero__segments li:hover {
	border-color: var(--bb-accent);
	color: var(--bb-text);
	transform: translateY(-2px);
}

/* ============ 11. DELIVERY CONSOLE CARD ============ */
.bb-console {
	position: relative;
	margin: 0;
	padding: 0;
	border: 1px solid var(--bb-line);
	border-radius: 22px;
	background:
		radial-gradient(120% 90% at 100% 0%, rgba(200, 255, 61, 0.07) 0%, transparent 55%),
		rgba(12, 18, 32, 0.86);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	box-shadow: 0 44px 90px -50px rgba(0, 0, 0, 0.95);
	overflow: hidden;
	opacity: 0;
	transform: translateY(26px);
	transition: transform 0.8s var(--bb-ease), opacity 0.8s var(--bb-ease),
		border-color 0.6s var(--bb-ease), box-shadow 0.7s var(--bb-ease);
}

.is-revealed .bb-console {
	opacity: 1;
	transform: translateY(0);
	transition-delay: 0.30s;
}

/* Scoped to the revealed state so the lift cannot fire while the card is still
   sliding in, and so the entry delay is not reapplied on every hover. */
.is-revealed .bb-console:hover {
	border-color: var(--bb-line-strong);
	transform: translateY(-4px);
	box-shadow: 0 54px 100px -50px rgba(0, 0, 0, 1);
	transition-delay: 0s;
}

/* Console header bar */
.bb-console__head {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 15px 20px;
	border-bottom: 1px solid var(--bb-line);
	background: rgba(7, 10, 18, 0.55);
}

.bb-console__dots {
	display: inline-flex;
	gap: 5px;
}

.bb-console__dots i {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--bb-line-strong);
}

.bb-console__dots i:first-child {
	background: var(--bb-accent);
}

.bb-console__name {
	font-family: var(--bb-font-display);
	font-size: 0.76rem;
	letter-spacing: 0.1em;
	color: var(--bb-muted);
}

.bb-console__chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-left: auto;
	padding: 5px 12px;
	border: 1px solid rgba(200, 255, 61, 0.28);
	border-radius: 100px;
	font-size: 0.68rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--bb-accent);
}

.bb-console__chip i {
	font-size: 0.34rem;
	animation: bbBlink 2.4s var(--bb-ease-soft) infinite;
}

@keyframes bbBlink {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.25; }
}

/* Chart block */
.bb-console__chart {
	padding: 22px 20px 16px;
}

.bb-console__chartHead {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 14px;
	margin-bottom: 16px;
}

.bb-console__chartTitle {
	font-size: 0.78rem;
	letter-spacing: 0.05em;
	color: var(--bb-muted);
}

.bb-console__chartValue {
	font-family: var(--bb-font-display);
	font-size: 1.5rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--bb-accent);
}

.bb-console__svg {
	display: block;
	width: 100%;
	height: auto;
}

.bb-console__rule {
	stroke: var(--bb-line);
	stroke-width: 1;
	stroke-dasharray: 3 6;
}

.bb-console__line {
	fill: none;
	stroke: var(--bb-accent);
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.bb-console__spend {
	fill: none;
	stroke: rgba(138, 148, 166, 0.85);
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 5 6;
}

.bb-console__area {
	opacity: 0;
	transition: opacity 1.1s var(--bb-ease) 1.15s;
}

.is-revealed .bb-console__area {
	opacity: 1;
}

.bb-console__pin {
	fill: var(--bb-accent);
	opacity: 0;
	transform: scale(0.3);
	transform-box: fill-box;
	transform-origin: center;
	transition: opacity 0.5s var(--bb-ease) 2.1s, transform 0.6s var(--bb-ease) 2.1s;
}

.is-revealed .bb-console__pin {
	opacity: 1;
	transform: scale(1);
}

.bb-console__legend {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin: 10px 0 0;
	font-size: 0.68rem;
	letter-spacing: 0.06em;
	color: var(--bb-muted);
}

.bb-console__legendItem {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.bb-console__legendItem::before {
	content: "";
	width: 16px;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
}

.bb-console__legendItem--profit {
	color: var(--bb-accent);
}

.bb-console__legendItem--spend {
	color: var(--bb-muted);
}

.bb-console__legendItem--spend::before {
	background: repeating-linear-gradient(
		90deg,
		rgba(138, 148, 166, 0.85) 0 5px,
		transparent 5px 11px
	);
}

.bb-console__axis {
	display: flex;
	justify-content: space-between;
	margin-top: 10px;
	font-size: 0.66rem;
	letter-spacing: 0.16em;
	color: var(--bb-muted);
}

/* Metric rows */
.bb-console__metrics {
	list-style: none;
	margin: 0;
	padding: 4px 20px 0;
}

.bb-console__metric {
	display: grid;
	grid-template-columns: 1fr auto auto;
	align-items: center;
	gap: 14px;
	padding: 14px 0;
	border-top: 1px solid var(--bb-line);
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 0.6s var(--bb-ease), transform 0.7s var(--bb-ease);
}

.is-revealed .bb-console__metric { opacity: 1; transform: translateY(0); }
.is-revealed .bb-console__metric:nth-child(1) { transition-delay: 0.85s; }
.is-revealed .bb-console__metric:nth-child(2) { transition-delay: 0.97s; }
.is-revealed .bb-console__metric:nth-child(3) { transition-delay: 1.09s; }
.is-revealed .bb-console__metric:nth-child(4) { transition-delay: 1.21s; }

.bb-console__label {
	font-size: 0.83rem;
	color: var(--bb-muted);
}

.bb-console__value {
	font-family: var(--bb-font-display);
	font-size: 1.02rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--bb-text);
}

.bb-console__delta {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	min-width: 78px;
	justify-content: flex-end;
	font-size: 0.76rem;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	color: var(--bb-muted);
}

.bb-console__delta.is-good {
	color: var(--bb-accent);
}

.bb-console__delta i {
	font-size: 0.62rem;
}

.bb-console__note {
	margin: 0;
	padding: 16px 20px 20px;
	border-top: 1px solid var(--bb-line);
	font-size: 0.72rem;
	line-height: 1.5;
	color: var(--bb-muted);
}

/* ============ 11b. PIPELINE PAYBACK CALCULATOR ============ */
.bb-calc__form {
	display: grid;
	gap: 20px;
	padding: 22px 20px 6px;
	border-bottom: 1px solid var(--bb-line);
}

.bb-calc__field {
	display: grid;
	gap: 8px;
}

.bb-calc__fieldHead {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}

.bb-calc__label {
	font-size: 0.78rem;
	letter-spacing: 0.02em;
	color: var(--bb-muted);
}

.bb-calc__fieldValue {
	font-family: var(--bb-font-display);
	font-size: 0.96rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--bb-accent);
	white-space: nowrap;
}

/* Custom range slider matching the terminal aesthetic. The filled portion of
   the track is painted with a JS-controlled custom property so keyboard and
   pointer input look identical without re-rendering the whole element. */
.bb-calc__range {
	--bb-range-progress: 0%;
	display: block;
	width: 100%;
	height: 22px;
	margin: 0;
	padding: 0;
	appearance: none;
	-webkit-appearance: none;
	background: transparent;
	cursor: pointer;
}

.bb-calc__range::-webkit-slider-runnable-track {
	height: 4px;
	border-radius: 100px;
	background: linear-gradient(to right,
		var(--bb-accent) 0%, var(--bb-accent) var(--bb-range-progress),
		var(--bb-line-strong) var(--bb-range-progress), var(--bb-line-strong) 100%);
}

.bb-calc__range::-moz-range-track {
	height: 4px;
	border-radius: 100px;
	background: var(--bb-line-strong);
}

.bb-calc__range::-moz-range-progress {
	height: 4px;
	border-radius: 100px;
	background: var(--bb-accent);
}

.bb-calc__range::-webkit-slider-thumb {
	appearance: none;
	-webkit-appearance: none;
	width: 18px;
	height: 18px;
	margin-top: -7px;
	border-radius: 50%;
	background: var(--bb-accent);
	border: 3px solid var(--bb-ink);
	box-shadow: 0 0 0 1px var(--bb-line-strong);
	transition: transform 0.3s var(--bb-ease), box-shadow 0.3s var(--bb-ease);
}

.bb-calc__range::-moz-range-thumb {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--bb-accent);
	border: 3px solid var(--bb-ink);
	box-shadow: 0 0 0 1px var(--bb-line-strong);
	transition: transform 0.3s var(--bb-ease), box-shadow 0.3s var(--bb-ease);
}

.bb-calc__range:hover::-webkit-slider-thumb {
	transform: scale(1.12);
}

.bb-calc__range:hover::-moz-range-thumb {
	transform: scale(1.12);
}

/* The native outline is suppressed only once a replacement focus ring is
   guaranteed on the thumb itself, so keyboard focus is never invisible. */
.bb-calc__range:focus-visible {
	outline: none;
}

.bb-calc__range:focus-visible::-webkit-slider-thumb {
	transform: scale(1.12);
	box-shadow: 0 0 0 4px rgba(200, 255, 61, 0.32);
}

.bb-calc__range:focus-visible::-moz-range-thumb {
	transform: scale(1.12);
	box-shadow: 0 0 0 4px rgba(200, 255, 61, 0.32);
}

.bb-calc__hint {
	margin: 0;
	font-size: 0.72rem;
	line-height: 1.5;
	color: var(--bb-muted);
}

.bb-calc__formula {
	margin: 0;
	padding: 4px 20px 16px;
	border-top: 1px solid var(--bb-line);
}

.bb-calc__formula summary {
	cursor: pointer;
	padding: 12px 0 0;
	font-size: 0.76rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	color: var(--bb-text);
	list-style: none;
}

.bb-calc__formula summary::-webkit-details-marker {
	display: none;
}

.bb-calc__formula summary::before {
	display: inline-block;
	width: 16px;
	color: var(--bb-accent);
	content: "+";
}

.bb-calc__formula[open] summary::before {
	content: "\2212";
}

.bb-calc__formula summary:focus-visible {
	outline: 2px solid var(--bb-accent);
	outline-offset: 4px;
	border-radius: 4px;
}

.bb-calc__formulaList {
	margin: 10px 0 0;
	padding-left: 16px;
	font-size: 0.74rem;
	line-height: 1.65;
	color: var(--bb-muted);
}

.bb-calc__formulaList code {
	font-family: var(--bb-font-body);
	color: var(--bb-text);
}

@media (max-width: 991.98px) {
	.bb-hero {
		min-height: auto;
		padding: calc(80px + env(safe-area-inset-top, 0px) + 36px) 0 72px;
	}

	.bb-hero__segments {
		margin-top: 32px;
	}
}

/* ============ 12. SECTION HEADINGS ============ */
.bb-sectionHead {
	margin-bottom: 64px;
}

.bb-sectionHead__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 26px;
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--bb-muted);
}

.bb-sectionHead__eyebrow span {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--bb-accent);
	box-shadow: 0 0 0 4px rgba(200, 255, 61, 0.14);
}

.bb-sectionHead__row {
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	align-items: end;
	gap: 40px;
}

.bb-sectionHead__title {
	margin: 0;
	font-size: clamp(1.9rem, 3.8vw, 3.2rem);
}

.bb-sectionHead__title em {
	font-style: normal;
	color: var(--bb-accent);
}

.bb-sectionHead__side p {
	margin: 0 0 18px;
	font-size: 0.96rem;
	font-weight: 300;
	color: var(--bb-muted);
}

.bb-link {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding-bottom: 4px;
	font-family: var(--bb-font-display);
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--bb-text);
}

.bb-link::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1.5px;
	background: var(--bb-accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.55s var(--bb-ease);
}

.bb-link:hover::after,
.bb-link:focus-visible::after {
	transform: scaleX(1);
}

.bb-link i {
	font-size: 0.72rem;
	color: var(--bb-accent);
	transition: transform 0.45s var(--bb-ease);
}

.bb-link:hover i {
	transform: translateX(4px);
}

.bb-link:focus-visible {
	outline: 2px solid var(--bb-accent);
	outline-offset: 4px;
	border-radius: 4px;
}

@media (max-width: 991.98px) {
	.bb-sectionHead {
		margin-bottom: 44px;
	}

	.bb-sectionHead__row {
		grid-template-columns: 1fr;
		align-items: start;
		gap: 24px;
	}
}

/* ============ 13. CAPABILITIES SPLIT ACCORDION ============ */
.bb-services {
	position: relative;
	padding: 130px 0 140px;
	background: var(--bb-surface);
	border-top: 1px solid var(--bb-line);
}

.bb-rows {
	border-top: 1px solid var(--bb-line);
}

.bb-row {
	position: relative;
	display: grid;
	grid-template-columns: 68px 1fr auto;
	align-items: center;
	gap: 8px;
	padding: 30px 0;
	border-bottom: 1px solid var(--bb-line);
	overflow: hidden;

	/* Staggered entry driven by the section observer. */
	opacity: 0;
	transform: translateY(26px);
	transition: opacity 0.7s var(--bb-ease), transform 0.8s var(--bb-ease),
		padding 0.6s var(--bb-ease);
}

.is-revealed .bb-row {
	opacity: 1;
	transform: translateY(0);
}

.is-revealed .bb-row:nth-child(1) { transition-delay: 0.05s; }
.is-revealed .bb-row:nth-child(2) { transition-delay: 0.13s; }
.is-revealed .bb-row:nth-child(3) { transition-delay: 0.21s; }
.is-revealed .bb-row:nth-child(4) { transition-delay: 0.29s; }
.is-revealed .bb-row:nth-child(5) { transition-delay: 0.37s; }
.is-revealed .bb-row:nth-child(6) { transition-delay: 0.45s; }

/* Lime wipe that sweeps in behind the open row. */
.bb-row::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(200, 255, 61, 0.07) 0%, transparent 62%);
	opacity: 0;
	transition: opacity 0.55s var(--bb-ease);
	pointer-events: none;
}

.is-revealed .bb-row:hover,
.is-revealed .bb-row:focus-visible {
	padding: 38px 0;
	transition-delay: 0s;
}

.bb-row:focus-visible {
	outline: 2px solid var(--bb-accent);
	outline-offset: -2px;
}

.bb-row:hover::before,
.bb-row:focus-visible::before {
	opacity: 1;
}

.bb-row__num {
	font-family: var(--bb-font-display);
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	color: var(--bb-muted);
	transition: color 0.5s var(--bb-ease), transform 0.6s var(--bb-ease);
}

.bb-row:hover .bb-row__num,
.bb-row:focus-visible .bb-row__num {
	color: var(--bb-accent);
	transform: translateY(-2px);
}

.bb-row__main {
	display: block;
	min-width: 0;
	transition: transform 0.65s var(--bb-ease);
}

.bb-row:hover .bb-row__main,
.bb-row:focus-visible .bb-row__main {
	transform: translateX(10px);
}

.bb-row__title {
	display: block;
	font-family: var(--bb-font-display);
	font-size: clamp(1.3rem, 2.6vw, 2.1rem);
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.15;
	color: var(--bb-text);
	transition: color 0.5s var(--bb-ease);
}

.bb-row:hover .bb-row__title,
.bb-row:focus-visible .bb-row__title {
	color: var(--bb-accent);
}

/* Collapsed detail block. max-height is used rather than the `0fr` grid trick
   because that only collapses a single child row, and this block holds two. */
.bb-row__fold {
	display: block;
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	transition: max-height 0.65s var(--bb-ease), opacity 0.55s var(--bb-ease);
}

.bb-row:hover .bb-row__fold,
.bb-row:focus-visible .bb-row__fold {
	max-height: 240px;
	opacity: 1;
}

.bb-row__desc {
	display: block;
	max-width: 56ch;
	padding-top: 14px;
	font-size: 0.9rem;
	line-height: 1.6;
	color: var(--bb-muted);
}

.bb-row__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding-top: 14px;
}

.bb-row__tags span {
	padding: 5px 12px;
	border: 1px solid var(--bb-line);
	border-radius: 100px;
	font-size: 0.7rem;
	letter-spacing: 0.04em;
	color: var(--bb-muted);
}

/* Preview panel. The tinted gradient stays as the backdrop the photograph sits
   on, so the panel still reads correctly while the image is still loading. */
.bb-row__shot {
	position: absolute;
	top: 50%;
	right: 76px;
	width: 208px;
	height: 124px;
	border: 1px solid var(--bb-line-strong);
	border-radius: 12px;
	background-image: radial-gradient(120% 120% at 0% 0%, rgba(200, 255, 61, 0.16) 0%, transparent 60%),
		linear-gradient(135deg, var(--bb-panel) 0%, var(--bb-ink) 100%);
	overflow: hidden;
	opacity: 0;
	transform: translateY(-50%) translateX(28px) scale(0.94);
	clip-path: inset(0 0 0 100% round 12px);
	filter: saturate(0.92) contrast(1.04);
	transition: opacity 0.6s var(--bb-ease), transform 0.7s var(--bb-ease),
		clip-path 0.7s var(--bb-ease);
	pointer-events: none;
}

.bb-row__shot img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 11px;
}

/* Evens out exposure differences between photographs so no preview glares
   against the dark theme. */
.bb-row__shot::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 11px;
	background: linear-gradient(170deg, rgba(7, 10, 18, 0.12) 0%, rgba(7, 10, 18, 0.60) 100%);
}

.bb-row:hover .bb-row__shot,
.bb-row:focus-visible .bb-row__shot {
	opacity: 1;
	transform: translateY(-50%) translateX(0) scale(1);
	clip-path: inset(0 round 12px);
}

.bb-row__go {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border: 1px solid var(--bb-line);
	border-radius: 50%;
	font-size: 0.82rem;
	color: var(--bb-muted);
	transition: background-color 0.5s var(--bb-ease), border-color 0.5s var(--bb-ease),
		color 0.5s var(--bb-ease), transform 0.6s var(--bb-ease);
}

.bb-row:hover .bb-row__go,
.bb-row:focus-visible .bb-row__go {
	background: var(--bb-accent);
	border-color: var(--bb-accent);
	color: var(--bb-ink);
	transform: rotate(-45deg);
}

@media (max-width: 1399.98px) {
	.bb-row__shot {
		width: 168px;
		height: 104px;
		right: 70px;
	}
}

@media (max-width: 991.98px) {
	.bb-row__shot {
		display: none;
	}

	.bb-services {
		padding: 84px 0 90px;
	}

	.bb-row {
		grid-template-columns: 44px 1fr auto;
		padding: 24px 0;
	}

	/* Touch devices have no hover, so every row stays open. */
	.bb-row__fold {
		max-height: none;
		opacity: 1;
	}

	.bb-row__go {
		width: 38px;
		height: 38px;
	}
}

/* ============ 14. 21-DAY DIAGNOSTIC TIMELINE ============ */
.bb-process {
	position: relative;
	padding: 130px 0 140px;
	background: var(--bb-ink);
	border-top: 1px solid var(--bb-line);
}

.bb-track {
	position: relative;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 30px;
	margin: 0;
	padding: 42px 0 0;
	list-style: none;
	counter-reset: stage;
}

/* The rail draws itself left to right once the section enters the viewport. */
.bb-track::before {
	content: "";
	position: absolute;
	top: 6px;
	left: 0;
	width: 100%;
	height: 1px;
	background: linear-gradient(90deg, var(--bb-accent) 0%, rgba(200, 255, 61, 0.22) 100%);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 1.7s var(--bb-ease) 0.2s;
}

.is-revealed .bb-track::before {
	transform: scaleX(1);
}

.bb-stage {
	position: relative;
	counter-increment: stage;
	opacity: 0;
	transform: translateY(22px);
	transition: opacity 0.7s var(--bb-ease), transform 0.8s var(--bb-ease);
}

.is-revealed .bb-stage {
	opacity: 1;
	transform: translateY(0);
}

.is-revealed .bb-stage:nth-child(1) { transition-delay: 0.30s; }
.is-revealed .bb-stage:nth-child(2) { transition-delay: 0.55s; }
.is-revealed .bb-stage:nth-child(3) { transition-delay: 0.80s; }
.is-revealed .bb-stage:nth-child(4) { transition-delay: 1.05s; }
.is-revealed .bb-stage:nth-child(5) { transition-delay: 1.30s; }

/* Ghost stage number sitting behind the heading. */
.bb-stage::after {
	content: "0" counter(stage);
	position: absolute;
	top: 24px;
	right: 4px;
	font-family: var(--bb-font-display);
	font-size: 3.4rem;
	font-weight: 700;
	line-height: 1;
	color: rgba(245, 247, 250, 0.04);
	pointer-events: none;
}

.bb-stage__node {
	position: absolute;
	top: -42px;
	left: 0;
	width: 13px;
	height: 13px;
	border: 2px solid var(--bb-accent);
	border-radius: 50%;
	background: var(--bb-ink);
	transform: scale(0);
	transition: transform 0.6s var(--bb-ease);
}

.is-revealed .bb-stage__node {
	transform: scale(1);
}

.bb-stage__node::after {
	content: "";
	position: absolute;
	inset: 3px;
	border-radius: 50%;
	background: var(--bb-accent);
}

.bb-stage__days {
	display: inline-block;
	margin-bottom: 14px;
	padding: 5px 12px;
	border: 1px solid rgba(200, 255, 61, 0.28);
	border-radius: 100px;
	font-family: var(--bb-font-display);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--bb-accent);
}

.bb-stage__title {
	margin: 0 0 12px;
	font-size: 1.16rem;
	font-weight: 600;
	line-height: 1.25;
}

.bb-stage__text {
	margin: 0;
	font-size: 0.86rem;
	line-height: 1.62;
	color: var(--bb-muted);
}

/* Handover bar closing the timeline */
.bb-handover {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 32px;
	margin-top: 76px;
	padding: 28px 32px;
	border: 1px solid var(--bb-line);
	border-radius: 20px;
	background:
		radial-gradient(90% 140% at 0% 50%, rgba(200, 255, 61, 0.09) 0%, transparent 58%),
		var(--bb-surface);
	opacity: 0;
	transform: translateY(22px);
	transition: opacity 0.8s var(--bb-ease) 1.5s, transform 0.9s var(--bb-ease) 1.5s;
}

.is-revealed .bb-handover {
	opacity: 1;
	transform: translateY(0);
}

.bb-handover__mark {
	font-family: var(--bb-font-display);
	font-size: 1.44rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--bb-accent);
	white-space: nowrap;
}

.bb-handover__text {
	margin: 0;
	font-size: 0.9rem;
	line-height: 1.6;
	color: var(--bb-muted);
}

@media (max-width: 1199.98px) {
	.bb-track {
		grid-template-columns: repeat(3, 1fr);
		gap: 40px 30px;
		padding-top: 26px;
	}

	/* With a wrapping grid a single horizontal rail would no longer line up,
	   so the rail is dropped and each stage keeps its own node. */
	.bb-track::before {
		display: none;
	}

	.bb-stage__node {
		top: -26px;
	}
}

@media (max-width: 767.98px) {
	.bb-process {
		padding: 84px 0 90px;
	}

	.bb-track {
		grid-template-columns: 1fr;
		gap: 34px;
		padding: 6px 0 0 30px;
	}

	/* Vertical rail for the stacked layout. */
	.bb-track::before {
		display: block;
		top: 6px;
		left: 6px;
		width: 1px;
		height: calc(100% - 12px);
		background: linear-gradient(180deg, var(--bb-accent) 0%, rgba(200, 255, 61, 0.22) 100%);
		transform: scaleY(0);
		transform-origin: top center;
	}

	.is-revealed .bb-track::before {
		transform: scaleY(1);
	}

	.bb-stage__node {
		top: 4px;
		left: -30px;
	}

	.bb-stage::after {
		top: -6px;
	}

	.bb-handover {
		grid-template-columns: 1fr;
		gap: 20px;
		margin-top: 48px;
		padding: 24px;
	}

	.bb-handover .bb-btn {
		justify-self: start;
	}
}

/* ============ 15. CASE STUDY TEASERS ============ */
.bb-cases {
	position: relative;
	padding: 130px 0 140px;
	background: var(--bb-surface);
	border-top: 1px solid var(--bb-line);
}

.bb-caseGrid {
	display: grid;
	grid-template-columns: 1.28fr 1fr;
	gap: 26px;
}

.bb-case {
	position: relative;
	display: flex;
	flex-direction: column;
	border: 1px solid var(--bb-line);
	border-radius: 20px;
	background: var(--bb-panel);
	overflow: hidden;
	opacity: 0;
	transform: translateY(26px);
	transition: opacity 0.75s var(--bb-ease), transform 0.85s var(--bb-ease),
		border-color 0.55s var(--bb-ease), box-shadow 0.7s var(--bb-ease);
}

.is-revealed .bb-case {
	opacity: 1;
	transform: translateY(0);
}

.is-revealed .bb-case:nth-child(1) { transition-delay: 0.10s; }
.is-revealed .bb-case:nth-child(2) { transition-delay: 0.24s; }
.is-revealed .bb-case:nth-child(3) { transition-delay: 0.38s; }

.is-revealed .bb-case:hover {
	border-color: var(--bb-line-strong);
	box-shadow: 0 44px 90px -50px rgba(0, 0, 0, 0.95);
	transition-delay: 0s;
}

/* The lead card fills the left column across both rows. */
.bb-case--lead {
	grid-row: span 2;
}

.bb-case__media {
	position: relative;
	overflow: hidden;
	background: var(--bb-ink);
}

.bb-case--lead .bb-case__media {
	aspect-ratio: 16 / 9;
}

.bb-case__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: saturate(0.9) contrast(1.05);
	transform: scale(1.01);
	transition: transform 1.1s var(--bb-ease), filter 0.7s var(--bb-ease);
}

.bb-case:hover .bb-case__media img {
	transform: scale(1.06);
	filter: saturate(1) contrast(1.05);
}

/* Keeps the photographs from competing with the copy underneath. */
.bb-case__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(7, 10, 18, 0.10) 0%, rgba(7, 10, 18, 0.72) 100%);
	pointer-events: none;
}

.bb-case__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 28px 30px 30px;
}

.bb-case__tag {
	margin: 0 0 14px;
	font-size: 0.7rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--bb-muted);
}

.bb-case__title {
	margin: 0 0 16px;
	font-size: 1.34rem;
	font-weight: 600;
	line-height: 1.24;
	transition: color 0.5s var(--bb-ease);
}

.bb-case:hover .bb-case__title {
	color: var(--bb-accent);
}

.bb-case--lead .bb-case__title {
	font-size: 1.72rem;
}

.bb-case__text {
	margin: 0 0 24px;
	font-size: 0.9rem;
	line-height: 1.62;
	color: var(--bb-muted);
}

.bb-case__stats {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 34px;
	margin: 0 0 24px;
	padding: 20px 0 0;
	border-top: 1px solid var(--bb-line);
}

.bb-case__stats dt {
	margin-bottom: 3px;
	font-size: 0.68rem;
	font-weight: 400;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--bb-muted);
}

.bb-case__stats dd {
	margin: 0;
	font-family: var(--bb-font-display);
	font-size: 1.2rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--bb-accent);
}

.bb-case__trigger {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin-top: auto;
	padding: 0 0 4px;
	border: none;
	background: none;
	font-family: var(--bb-font-display);
	font-size: 0.86rem;
	font-weight: 600;
	color: var(--bb-text);
	align-self: flex-start;
	cursor: pointer;
}

.bb-case__trigger::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1.5px;
	background: var(--bb-accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.55s var(--bb-ease);
}

.bb-case:hover .bb-case__trigger::after,
.bb-case__trigger:hover::after,
.bb-case__trigger:focus-visible::after {
	transform: scaleX(1);
}

.bb-case__trigger i {
	font-size: 0.72rem;
	color: var(--bb-accent);
	transition: transform 0.45s var(--bb-ease);
}

.bb-case__trigger:hover i {
	transform: translateX(4px);
}

.bb-case__trigger:focus-visible {
	outline: 2px solid var(--bb-accent);
	outline-offset: 5px;
	border-radius: 4px;
}

/* Compact cards put the photograph alongside the copy. */
.bb-case--compact {
	display: grid;
	grid-template-columns: 200px 1fr;
}

.bb-case--compact .bb-case__body {
	padding: 24px 26px 26px;
}

.bb-case--compact .bb-case__stats {
	gap: 10px 26px;
	padding-top: 16px;
	margin-bottom: 20px;
}

.bb-case--compact .bb-case__stats dd {
	font-size: 1.06rem;
}

@media (max-width: 1199.98px) {
	.bb-caseGrid {
		grid-template-columns: 1fr;
	}

	.bb-case--lead {
		grid-row: auto;
	}
}

@media (max-width: 767.98px) {
	.bb-cases {
		padding: 84px 0 90px;
	}

	.bb-case--compact {
		grid-template-columns: 1fr;
	}

	.bb-case--compact .bb-case__media {
		aspect-ratio: 16 / 9;
	}

	.bb-case__body,
	.bb-case--compact .bb-case__body {
		padding: 24px 22px 26px;
	}

	.bb-case--lead .bb-case__title {
		font-size: 1.4rem;
	}
}

/* ============ 16. MODALS ============ */
.bb-modal.modal {
	left: 0;
	right: 0;
	width: 100%;
	max-width: 100%;
	padding-left: max(1rem, env(safe-area-inset-left, 0px));
	padding-right: max(1rem, env(safe-area-inset-right, 0px));
}

.bb-modal .modal-dialog {
	margin-left: auto;
	margin-right: auto;
	max-width: min(500px, calc(100% - 0.5rem));
}

.bb-modal--wide .modal-dialog,
.bb-modal .modal-dialog.modal-lg,
.bb-modal .modal-dialog.modal-xl {
	max-width: min(1140px, calc(100% - 0.5rem));
}

.bb-modal .modal-content {
	border: 1px solid var(--bb-line-strong);
	border-radius: 20px;
	background:
		radial-gradient(110% 80% at 100% 0%, rgba(200, 255, 61, 0.08) 0%, transparent 55%),
		var(--bb-panel);
	color: var(--bb-text);
}

.bb-modal .modal-header {
	align-items: flex-start;
	gap: 20px;
	padding: 28px 30px 22px;
	border-bottom: 1px solid var(--bb-line);
}

.bb-modal__tag {
	margin: 0 0 10px;
	font-size: 0.68rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--bb-accent);
}

.bb-modal__title {
	margin: 0;
	font-family: var(--bb-font-display);
	font-size: clamp(1.24rem, 2.4vw, 1.66rem);
	font-weight: 600;
	line-height: 1.2;
}

.bb-modal .btn-close {
	margin: 0;
	padding: 0;
	width: 38px;
	height: 38px;
	flex: 0 0 38px;
	border: 1px solid var(--bb-line);
	border-radius: 50%;
	opacity: 1;
	background-size: 11px;
	transition: border-color 0.45s var(--bb-ease), background-color 0.45s var(--bb-ease),
		transform 0.5s var(--bb-ease);
}

.bb-modal .btn-close:hover {
	border-color: var(--bb-accent);
	background-color: rgba(200, 255, 61, 0.1);
	transform: rotate(90deg);
}

.bb-modal .btn-close:focus-visible {
	outline: 2px solid var(--bb-accent);
	outline-offset: 3px;
	box-shadow: none;
}

.bb-modal .modal-body {
	padding: 26px 30px 30px;
}

.bb-modal__block {
	margin-bottom: 24px;
}

.bb-modal__block h3 {
	margin: 0 0 9px;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--bb-accent);
}

.bb-modal__block p {
	margin: 0;
	font-size: 0.94rem;
	line-height: 1.68;
	color: var(--bb-muted);
}

.bb-modal__stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin: 0;
	padding: 22px 0 0;
	border-top: 1px solid var(--bb-line);
	list-style: none;
}

.bb-modal__stats li {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 0.72rem;
	letter-spacing: 0.06em;
	color: var(--bb-muted);
}

.bb-modal__stats span {
	font-family: var(--bb-font-display);
	font-size: 1.34rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--bb-text);
}

.bb-modal .modal-footer {
	gap: 12px;
	padding: 20px 30px 26px;
	border-top: 1px solid var(--bb-line);
}

.bb-modal .modal-footer > * {
	margin: 0;
}

.modal-backdrop {
	--bs-backdrop-bg: #04060C;
	--bs-backdrop-opacity: 0.74;
}

@media (max-width: 575.98px) {
	.bb-modal .modal-header,
	.bb-modal .modal-body,
	.bb-modal .modal-footer {
		padding-left: 22px;
		padding-right: 22px;
	}

	.bb-modal__stats {
		grid-template-columns: 1fr;
		gap: 14px;
	}
}

/* ============ 17. FAT FOOTER ============ */
.bb-footer {
	position: relative;
	padding: 110px 0 34px;
	background: var(--bb-ink);
	border-top: 1px solid var(--bb-line);
}

.bb-footer::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 260px;
	background: radial-gradient(60% 100% at 12% 0%, rgba(200, 255, 61, 0.07) 0%, transparent 62%);
	pointer-events: none;
}

.bb-footer > .container-xxl {
	position: relative;
}

.bb-footer__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 0.85fr) minmax(0, 1.25fr);
	gap: 44px 40px;
	padding-bottom: 64px;
	border-bottom: 1px solid var(--bb-line);
}

.bb-footer__grid > * {
	min-width: 0;
}

.bb-logo--footer {
	margin-bottom: 24px;
}

.bb-footer__pitch {
	max-width: 40ch;
	margin: 0 0 26px;
	font-size: 0.9rem;
	line-height: 1.68;
	color: var(--bb-muted);
}

.bb-footer__address {
	display: flex;
	flex-direction: column;
	gap: 11px;
	margin: 0;
	font-size: 0.85rem;
	font-style: normal;
	color: var(--bb-muted);
}

.bb-footer__address i {
	width: 15px;
	margin-right: 8px;
	color: var(--bb-accent);
}

.bb-footer__address a {
	transition: color 0.4s var(--bb-ease);
}

.bb-footer__address a:hover,
.bb-footer__address a:focus-visible {
	color: var(--bb-accent);
}

.bb-footer__heading {
	margin: 0 0 20px;
	font-family: var(--bb-font-display);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--bb-text);
}

.bb-footer__heading--spaced {
	margin-top: 34px;
}

.bb-footer__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.bb-footer__list a {
	position: relative;
	display: inline-block;
	font-size: 0.86rem;
	color: var(--bb-muted);
	transition: color 0.4s var(--bb-ease), transform 0.5s var(--bb-ease);
}

.bb-footer__list a::before {
	content: "";
	position: absolute;
	left: -14px;
	top: 50%;
	width: 7px;
	height: 1.5px;
	background: var(--bb-accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.45s var(--bb-ease);
}

.bb-footer__list a:hover,
.bb-footer__list a:focus-visible {
	color: var(--bb-text);
	transform: translateX(6px);
}

.bb-footer__list a:hover::before,
.bb-footer__list a:focus-visible::before {
	transform: scaleX(1);
}

.bb-footer__note {
	max-width: 42ch;
	margin: 0 0 24px;
	font-size: 0.86rem;
	line-height: 1.66;
	color: var(--bb-muted);
}

/* Newsletter form */
.bb-subscribe__label {
	display: block;
	margin-bottom: 9px;
	font-size: 0.68rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--bb-muted);
}

.bb-subscribe__row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.bb-subscribe__input {
	flex: 1 1 200px;
	min-width: 0;
	padding: 13px 18px;
	border: 1px solid var(--bb-line-strong);
	border-radius: 100px;
	background: rgba(245, 247, 250, 0.04);
	color: var(--bb-text);
	font-family: var(--bb-font-body);
	font-size: 0.88rem;
	transition: border-color 0.45s var(--bb-ease), background-color 0.45s var(--bb-ease),
		box-shadow 0.5s var(--bb-ease);
}

.bb-subscribe__input::placeholder {
	color: rgba(138, 148, 166, 0.7);
}

.bb-subscribe__input:hover {
	border-color: var(--bb-muted);
}

.bb-subscribe__input:focus {
	outline: none;
	border-color: var(--bb-accent);
	background: rgba(245, 247, 250, 0.07);
	box-shadow: 0 0 0 4px rgba(200, 255, 61, 0.12);
}

.bb-subscribe__input.is-invalid {
	border-color: #FF6B5A;
	box-shadow: 0 0 0 4px rgba(255, 107, 90, 0.14);
}

.bb-subscribe__hint {
	margin: 12px 0 0;
	font-size: 0.76rem;
	line-height: 1.5;
	color: var(--bb-muted);
	transition: color 0.4s var(--bb-ease);
}

.bb-subscribe__hint.is-error {
	color: #FF8A7C;
}

/* Bottom bar */
.bb-footer__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px 30px;
	padding-top: 26px;
}

.bb-footer__copy {
	margin: 0;
	font-size: 0.78rem;
	color: var(--bb-muted);
}

.bb-footer__meta {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 22px;
	margin: 0;
	padding: 0;
	font-size: 0.78rem;
	color: var(--bb-muted);
}

.bb-footer__meta a {
	transition: color 0.4s var(--bb-ease);
}

.bb-footer__meta a:hover,
.bb-footer__meta a:focus-visible {
	color: var(--bb-accent);
}

@media (max-width: 1199.98px) {
	.bb-footer__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 48px 40px;
	}
}

@media (max-width: 767.98px) {
	.bb-footer {
		padding: 72px 0 28px;
	}

	.bb-footer__grid {
		grid-template-columns: 1fr;
		gap: 40px;
		padding-bottom: 44px;
	}
}

/* ============ 18. BACK TO TOP ============ */
.bb-toTop {
	position: fixed;
	right: 26px;
	bottom: 26px;
	z-index: 1035;
	display: grid;
	place-items: center;
	width: 50px;
	height: 50px;
	padding: 0;
	border: 1px solid var(--bb-line-strong);
	border-radius: 50%;
	background: rgba(12, 18, 32, 0.88);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	color: var(--bb-text);
	font-size: 0.9rem;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(16px) scale(0.9);
	transition: opacity 0.5s var(--bb-ease), transform 0.6s var(--bb-ease),
		visibility 0.5s var(--bb-ease), background-color 0.45s var(--bb-ease),
		border-color 0.45s var(--bb-ease), color 0.45s var(--bb-ease);
}

.bb-toTop.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0) scale(1);
}

.bb-toTop:hover {
	background: var(--bb-accent);
	border-color: var(--bb-accent);
	color: var(--bb-ink);
}

.bb-toTop:hover i {
	animation: bbNudge 0.6s var(--bb-ease);
}

.bb-toTop:focus-visible {
	outline: 2px solid var(--bb-accent);
	outline-offset: 3px;
}

@keyframes bbNudge {
	0% { transform: translateY(0); }
	45% { transform: translateY(-4px); }
	100% { transform: translateY(0); }
}

/* ============ 19. COOKIE CONSENT ============ */
.bb-cookie {
	position: fixed;
	left: 50%;
	bottom: 22px;
	z-index: 1045;
	width: min(940px, calc(100% - 32px));
	padding: 18px 22px;
	border: 1px solid var(--bb-line-strong);
	border-radius: 18px;
	background: rgba(12, 18, 32, 0.94);
	backdrop-filter: blur(20px) saturate(140%);
	-webkit-backdrop-filter: blur(20px) saturate(140%);
	box-shadow: 0 34px 70px -40px rgba(0, 0, 0, 1);
	opacity: 0;
	visibility: hidden;
	transform: translateX(-50%) translateY(26px);
	transition: opacity 0.6s var(--bb-ease), transform 0.7s var(--bb-ease),
		visibility 0.6s var(--bb-ease);
}

.bb-cookie.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}

.bb-cookie__inner {
	display: flex;
	align-items: center;
	gap: 18px;
}

.bb-cookie__icon {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	flex: 0 0 40px;
	border: 1px solid rgba(200, 255, 61, 0.26);
	border-radius: 12px;
	background: rgba(200, 255, 61, 0.07);
	color: var(--bb-accent);
	font-size: 0.94rem;
}

.bb-cookie__text {
	margin: 0;
	font-size: 0.82rem;
	line-height: 1.58;
	color: var(--bb-muted);
}

.bb-cookie__text a {
	color: var(--bb-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.bb-cookie__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-left: auto;
}

@media (max-width: 767.98px) {
	.bb-cookie {
		bottom: 14px;
		padding: 18px;
	}

	.bb-cookie__inner {
		flex-direction: column;
		align-items: flex-start;
		gap: 14px;
	}

	.bb-cookie__actions {
		margin-left: 0;
		width: 100%;
	}

	.bb-cookie__actions .bb-btn {
		flex: 1 1 auto;
		justify-content: center;
	}

	.bb-toTop {
		right: 16px;
		bottom: 16px;
	}
}

/* Below 1200px the centred banner reaches the corner where the floating button
   sits, so the button steps aside while consent is still pending. */
@media (min-width: 992px) and (max-width: 1199.98px) {
	body.bb-consent-open .bb-toTop.is-visible {
		bottom: 122px;
	}
}

@media (max-width: 991.98px) {
	body.bb-consent-open .bb-toTop.is-visible {
		opacity: 0;
		visibility: hidden;
		transform: translateY(16px) scale(0.9);
	}
}

/* ============ 20. CONFIRMATION MODAL ============ */
.bb-modal--confirm .modal-content {
	text-align: center;
}

.bb-modal--confirm .modal-body {
	padding: 42px 36px 38px;
}

.bb-confirm__icon {
	display: grid;
	place-items: center;
	width: 62px;
	height: 62px;
	margin: 0 auto 22px;
	border-radius: 50%;
	background: var(--bb-accent);
	color: var(--bb-ink);
	font-size: 1.36rem;
	animation: bbPopIn 0.6s var(--bb-ease) both;
}

@keyframes bbPopIn {
	0% { transform: scale(0.4); opacity: 0; }
	60% { transform: scale(1.08); opacity: 1; }
	100% { transform: scale(1); opacity: 1; }
}

.bb-confirm__title {
	margin: 0 0 14px;
	font-family: var(--bb-font-display);
	font-size: 1.5rem;
	font-weight: 600;
}

.bb-confirm__text {
	max-width: 44ch;
	margin: 0 auto 28px;
	font-size: 0.92rem;
	line-height: 1.66;
	color: var(--bb-muted);
}

.bb-confirm__text strong {
	color: var(--bb-text);
	font-weight: 500;
}

main {
	max-width: 100%;
	overflow-x: clip;
}

/* ============ 21. INNER PAGE SHELL ============ */

/* Stops in-page anchors from landing underneath the fixed header. */
section[id] {
	scroll-margin-top: calc(var(--bb-header-h-sm) + 24px);
}

.bb-block {
	position: relative;
	padding: 118px 0 124px;
	background: var(--bb-ink);
	border-top: 1px solid var(--bb-line);
}

.bb-block--surface {
	background: var(--bb-surface);
}

.bb-inlineLink {
	color: var(--bb-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color 0.4s var(--bb-ease);
}

.bb-inlineLink:hover {
	color: var(--bb-text);
}

@media (max-width: 991.98px) {
	.bb-block {
		padding: 76px 0 82px;
	}
}

/* Page hero */
.bb-pageHero {
	position: relative;
	padding: calc(var(--bb-header-h) + 72px) 0 90px;
	overflow: hidden;
	background: linear-gradient(180deg, var(--bb-ink) 0%, var(--bb-surface) 100%);
}

/* Shorter hero for legal pages, where the content starts immediately. */
.bb-pageHero--compact {
	padding-bottom: 54px;
}

.bb-pageHero__media {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.bb-pageHero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 28%;
	opacity: 0.52;
	filter: saturate(0.94) contrast(1.06);
}

/* Two washes: one keeps the photograph visible, one anchors the copy. */
.bb-pageHero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, rgba(7, 10, 18, 0.82) 6%, rgba(7, 10, 18, 0.42) 48%, rgba(7, 10, 18, 0.68) 100%),
		linear-gradient(180deg, rgba(7, 10, 18, 0.55) 0%, transparent 38%, var(--bb-surface) 100%);
}

@media (max-width: 767.98px) {
	.bb-pageHero__media img {
		opacity: 0.38;
		object-position: center 22%;
	}
}

.bb-pageHero > .container-xxl {
	position: relative;
	z-index: 1;
}

/* Captioned editorial stills sit between the page hero and the first block. */
.bb-mediaBand {
	margin: 0;
	padding: 0 0 8px;
	background: var(--bb-surface);
}

.bb-mediaBand__frame {
	overflow: hidden;
	border: 1px solid var(--bb-line);
	border-radius: 20px;
}

.bb-mediaBand img {
	display: block;
	width: 100%;
	height: auto;
	filter: saturate(0.94) contrast(1.05);
	transition: transform 1.1s var(--bb-ease);
}

.bb-mediaBand:hover img {
	transform: scale(1.03);
}

.bb-mediaBand figcaption {
	margin: 14px 4px 0;
	font-size: 0.78rem;
	line-height: 1.5;
	color: var(--bb-muted);
}

.bb-crumbs {
	margin-bottom: 40px;
}

.bb-crumbs ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 14px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.76rem;
	letter-spacing: 0.04em;
	color: var(--bb-muted);
}

.bb-crumbs li:not(:last-child)::after {
	content: "/";
	margin-left: 14px;
	color: rgba(138, 148, 166, 0.5);
}

.bb-crumbs a {
	transition: color 0.4s var(--bb-ease);
}

.bb-crumbs a:hover,
.bb-crumbs a:focus-visible {
	color: var(--bb-accent);
}

.bb-crumbs [aria-current="page"] {
	color: var(--bb-text);
}

.bb-pageHero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 22px;
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--bb-muted);
}

.bb-pageHero__eyebrow span {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--bb-accent);
	box-shadow: 0 0 0 4px rgba(200, 255, 61, 0.14);
}

.bb-pageHero__title {
	margin: 0 0 26px;
	font-size: clamp(2.1rem, 4.6vw, 3.6rem);
	font-weight: 600;
}

.bb-pageHero__title em {
	font-style: normal;
	color: var(--bb-accent);
}

.bb-pageHero__lead {
	max-width: 58ch;
	margin: 0 0 34px;
	font-size: clamp(0.98rem, 1.4vw, 1.1rem);
	font-weight: 300;
	color: var(--bb-muted);
}

.bb-pageHero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

/* Quick facts panel */
.bb-quickFacts {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1px;
	margin: 0;
	padding: 0;
	border: 1px solid var(--bb-line);
	border-radius: 18px;
	background: var(--bb-line);
	overflow: hidden;
}

.bb-quickFacts > div {
	padding: 22px 20px;
	background: rgba(12, 18, 32, 0.9);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

.bb-quickFacts dt {
	margin-bottom: 8px;
	font-size: 0.66rem;
	font-weight: 400;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--bb-muted);
}

.bb-quickFacts dd {
	margin: 0;
	font-family: var(--bb-font-display);
	font-size: 1.06rem;
	font-weight: 600;
	color: var(--bb-accent);
}

@media (max-width: 991.98px) {
	.bb-pageHero {
		padding: calc(80px + env(safe-area-inset-top, 0px) + 36px) 0 64px;
	}

	.bb-crumbs {
		margin-bottom: 28px;
	}
}

/* ============ 22. FEATURE GRID ============ */
.bb-featGrid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	border: 1px solid var(--bb-line);
	border-radius: 20px;
	background: var(--bb-line);
	overflow: hidden;
}

.bb-feat {
	padding: 34px 30px 36px;
	background: var(--bb-ink);
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.7s var(--bb-ease), transform 0.8s var(--bb-ease),
		background-color 0.5s var(--bb-ease);
}

.bb-block--surface .bb-feat {
	background: var(--bb-surface);
}

.is-revealed .bb-feat {
	opacity: 1;
	transform: translateY(0);
}

.is-revealed .bb-feat:nth-child(1) { transition-delay: 0.06s; }
.is-revealed .bb-feat:nth-child(2) { transition-delay: 0.14s; }
.is-revealed .bb-feat:nth-child(3) { transition-delay: 0.22s; }
.is-revealed .bb-feat:nth-child(4) { transition-delay: 0.30s; }
.is-revealed .bb-feat:nth-child(5) { transition-delay: 0.38s; }
.is-revealed .bb-feat:nth-child(6) { transition-delay: 0.46s; }

.is-revealed .bb-feat:hover {
	background: var(--bb-panel);
	transition-delay: 0s;
}

.bb-feat__icon {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	margin-bottom: 22px;
	border: 1px solid var(--bb-line);
	border-radius: 13px;
	background: rgba(200, 255, 61, 0.06);
	color: var(--bb-accent);
	font-size: 1.02rem;
	transition: background-color 0.5s var(--bb-ease), border-color 0.5s var(--bb-ease),
		color 0.5s var(--bb-ease), transform 0.6s var(--bb-ease);
}

.bb-feat:hover .bb-feat__icon {
	background: var(--bb-accent);
	border-color: var(--bb-accent);
	color: var(--bb-ink);
	transform: translateY(-3px) rotate(-6deg);
}

.bb-feat__title {
	margin: 0 0 12px;
	font-size: 1.1rem;
	font-weight: 600;
	line-height: 1.28;
}

.bb-feat__text {
	margin: 0;
	font-size: 0.88rem;
	line-height: 1.66;
	color: var(--bb-muted);
}

@media (max-width: 991.98px) {
	.bb-featGrid {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 575.98px) {
	.bb-featGrid {
		grid-template-columns: 1fr;
	}

	.bb-feat {
		padding: 28px 24px 30px;
	}
}

/* ============ 23. METHOD LIST ============ */
.bb-method {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 34px 44px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: method;
}

/* Single column when the list sits beside other content rather than full width. */
.bb-method--stacked {
	grid-template-columns: 1fr;
}

.bb-method__item {
	position: relative;
	counter-increment: method;
	padding-top: 30px;
	border-top: 1px solid var(--bb-line);
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.7s var(--bb-ease), transform 0.8s var(--bb-ease);
}

.is-revealed .bb-method__item {
	opacity: 1;
	transform: translateY(0);
}

.is-revealed .bb-method__item:nth-child(2) { transition-delay: 0.12s; }
.is-revealed .bb-method__item:nth-child(3) { transition-delay: 0.24s; }
.is-revealed .bb-method__item:nth-child(4) { transition-delay: 0.36s; }

/* Number sits on the rule, generated so it stays out of the accessibility tree. */
.bb-method__item::before {
	content: "0" counter(method);
	position: absolute;
	top: -11px;
	left: 0;
	padding-right: 14px;
	background: var(--bb-ink);
	font-family: var(--bb-font-display);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	color: var(--bb-accent);
}

.bb-block--surface .bb-method__item::before {
	background: var(--bb-surface);
}

.bb-method__title {
	margin: 0 0 14px;
	font-size: 1.22rem;
	font-weight: 600;
	line-height: 1.26;
}

.bb-method__text {
	margin: 0;
	font-size: 0.92rem;
	line-height: 1.72;
	color: var(--bb-muted);
}

@media (max-width: 767.98px) {
	.bb-method {
		grid-template-columns: 1fr;
		gap: 28px;
	}
}

/* ============ 24. OUTCOME CARDS ============ */
.bb-outcomes {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 22px;
}

.bb-outcome {
	display: flex;
	flex-direction: column;
	padding: 30px 26px 32px;
	border: 1px solid var(--bb-line);
	border-radius: 18px;
	background:
		radial-gradient(120% 100% at 0% 0%, rgba(200, 255, 61, 0.08) 0%, transparent 58%),
		var(--bb-panel);
	opacity: 0;
	transform: translateY(22px);
	transition: opacity 0.7s var(--bb-ease), transform 0.8s var(--bb-ease),
		border-color 0.5s var(--bb-ease);
}

.is-revealed .bb-outcome {
	opacity: 1;
	transform: translateY(0);
}

.is-revealed .bb-outcome:nth-child(2) { transition-delay: 0.10s; }
.is-revealed .bb-outcome:nth-child(3) { transition-delay: 0.20s; }
.is-revealed .bb-outcome:nth-child(4) { transition-delay: 0.30s; }

.is-revealed .bb-outcome:hover {
	border-color: rgba(200, 255, 61, 0.4);
	transition-delay: 0s;
}

.bb-outcome__value {
	margin: 0 0 16px;
	font-family: var(--bb-font-display);
	font-size: 1.9rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1;
	color: var(--bb-accent);
}

.bb-outcome__title {
	margin: 0 0 10px;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.3;
}

.bb-outcome__text {
	margin: 0;
	font-size: 0.85rem;
	line-height: 1.62;
	color: var(--bb-muted);
}

@media (max-width: 1199.98px) {
	.bb-outcomes {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 575.98px) {
	.bb-outcomes {
		grid-template-columns: 1fr;
	}
}

/* ============ 25. SPECIFICATION LIST ============ */
.bb-specs__title {
	margin: 0 0 18px;
	font-size: clamp(1.6rem, 3vw, 2.4rem);
}

.bb-specs__note {
	max-width: 44ch;
	margin: 0 0 28px;
	font-size: 0.92rem;
	line-height: 1.7;
	color: var(--bb-muted);
}

.bb-specs {
	margin: 0;
	border-top: 1px solid var(--bb-line);
}

.bb-specs__row {
	display: grid;
	grid-template-columns: minmax(0, 230px) minmax(0, 1fr);
	gap: 20px;
	padding: 20px 0;
	border-bottom: 1px solid var(--bb-line);
	transition: background-color 0.45s var(--bb-ease), padding-left 0.5s var(--bb-ease);
}

.bb-specs__row:hover {
	background: rgba(245, 247, 250, 0.02);
	padding-left: 12px;
}

.bb-specs dt {
	font-family: var(--bb-font-display);
	font-size: 0.76rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--bb-muted);
}

.bb-specs dd {
	margin: 0;
	font-size: 0.94rem;
	line-height: 1.6;
	color: var(--bb-text);
}

@media (max-width: 575.98px) {
	.bb-specs__row {
		grid-template-columns: 1fr;
		gap: 8px;
	}
}

/* ============ 26. FAQ ACCORDION ============ */
.bb-faq {
	--bs-accordion-bg: transparent;
	--bs-accordion-border-color: var(--bb-line);
	--bs-accordion-border-radius: 16px;
	--bs-accordion-inner-border-radius: 15px;
	--bs-accordion-btn-color: var(--bb-text);
	--bs-accordion-active-color: var(--bb-accent);
	--bs-accordion-active-bg: rgba(200, 255, 61, 0.05);
	--bs-accordion-btn-focus-box-shadow: none;
	--bs-accordion-body-padding-y: 0;
	max-width: 1000px;
}

.bb-faq .accordion-item {
	margin-bottom: 12px;
	border: 1px solid var(--bb-line);
	border-radius: 16px;
	background: var(--bb-panel);
	overflow: hidden;
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.65s var(--bb-ease), transform 0.75s var(--bb-ease),
		border-color 0.5s var(--bb-ease);
}

.is-revealed .bb-faq .accordion-item {
	opacity: 1;
	transform: translateY(0);
}

.is-revealed .bb-faq .accordion-item:nth-child(2) { transition-delay: 0.08s; }
.is-revealed .bb-faq .accordion-item:nth-child(3) { transition-delay: 0.16s; }
.is-revealed .bb-faq .accordion-item:nth-child(4) { transition-delay: 0.24s; }
.is-revealed .bb-faq .accordion-item:nth-child(5) { transition-delay: 0.32s; }

.bb-faq .accordion-item:has(.accordion-button:not(.collapsed)) {
	border-color: rgba(200, 255, 61, 0.34);
}

.bb-faq .accordion-header {
	margin: 0;
}

.bb-faq .accordion-button {
	padding: 22px 26px;
	font-family: var(--bb-font-display);
	font-size: 1.02rem;
	font-weight: 600;
	line-height: 1.34;
	box-shadow: none;
	transition: color 0.45s var(--bb-ease), background-color 0.45s var(--bb-ease);
}

.bb-faq .accordion-button:hover {
	color: var(--bb-accent);
}

.bb-faq .accordion-button:focus-visible {
	outline: 2px solid var(--bb-accent);
	outline-offset: -3px;
}

/* Replaces the default chevron sprite with a rotating plus. */
.bb-faq .accordion-button::after {
	flex: 0 0 30px;
	width: 30px;
	height: 30px;
	margin-left: 20px;
	display: grid;
	place-items: center;
	content: "+";
	background-image: none;
	border: 1px solid var(--bb-line-strong);
	border-radius: 50%;
	font-family: var(--bb-font-body);
	font-size: 1.1rem;
	font-weight: 400;
	line-height: 1;
	color: var(--bb-text);
	transform: rotate(0deg);
	transition: transform 0.55s var(--bb-ease), border-color 0.45s var(--bb-ease),
		background-color 0.45s var(--bb-ease), color 0.45s var(--bb-ease);
}

.bb-faq .accordion-button:not(.collapsed)::after {
	transform: rotate(135deg);
	background: var(--bb-accent);
	border-color: var(--bb-accent);
	color: var(--bb-ink);
}

.bb-faq .accordion-body {
	padding: 0 26px 24px;
}

.bb-faq .accordion-body p {
	max-width: 78ch;
	margin: 0;
	font-size: 0.92rem;
	line-height: 1.72;
	color: var(--bb-muted);
}

@media (max-width: 575.98px) {
	.bb-faq .accordion-button {
		padding: 18px 20px;
		font-size: 0.96rem;
	}

	.bb-faq .accordion-body {
		padding: 0 20px 20px;
	}
}

/* ============ 27. RELATED SERVICE CARDS ============ */
.bb-related {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
}

.bb-relCard {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 30px 28px 32px;
	border: 1px solid var(--bb-line);
	border-radius: 18px;
	background: var(--bb-panel);
	opacity: 0;
	transform: translateY(22px);
	transition: opacity 0.7s var(--bb-ease), transform 0.8s var(--bb-ease),
		border-color 0.5s var(--bb-ease), box-shadow 0.6s var(--bb-ease);
}

.is-revealed .bb-relCard {
	opacity: 1;
	transform: translateY(0);
}

.is-revealed .bb-relCard:nth-child(2) { transition-delay: 0.12s; }
.is-revealed .bb-relCard:nth-child(3) { transition-delay: 0.24s; }

.is-revealed .bb-relCard:hover,
.is-revealed .bb-relCard:focus-visible {
	border-color: rgba(200, 255, 61, 0.4);
	box-shadow: 0 36px 70px -46px rgba(0, 0, 0, 0.95);
	transform: translateY(-4px);
	transition-delay: 0s;
	outline: none;
}

.bb-relCard:focus-visible {
	outline: 2px solid var(--bb-accent);
	outline-offset: 3px;
}

.bb-relCard__icon {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	margin-bottom: 20px;
	border: 1px solid var(--bb-line);
	border-radius: 12px;
	background: rgba(200, 255, 61, 0.06);
	color: var(--bb-accent);
	font-size: 0.96rem;
	transition: background-color 0.5s var(--bb-ease), color 0.5s var(--bb-ease),
		border-color 0.5s var(--bb-ease);
}

.bb-relCard:hover .bb-relCard__icon {
	background: var(--bb-accent);
	border-color: var(--bb-accent);
	color: var(--bb-ink);
}

.bb-relCard__title {
	display: block;
	margin-bottom: 10px;
	font-family: var(--bb-font-display);
	font-size: 1.06rem;
	font-weight: 600;
	line-height: 1.3;
	transition: color 0.45s var(--bb-ease);
}

.bb-relCard:hover .bb-relCard__title {
	color: var(--bb-accent);
}

.bb-relCard__text {
	display: block;
	margin-bottom: 26px;
	font-size: 0.86rem;
	line-height: 1.62;
	color: var(--bb-muted);
}

.bb-relCard__go {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	margin-top: auto;
	border: 1px solid var(--bb-line);
	border-radius: 50%;
	font-size: 0.76rem;
	color: var(--bb-muted);
	transition: background-color 0.5s var(--bb-ease), border-color 0.5s var(--bb-ease),
		color 0.5s var(--bb-ease), transform 0.6s var(--bb-ease);
}

.bb-relCard:hover .bb-relCard__go {
	background: var(--bb-accent);
	border-color: var(--bb-accent);
	color: var(--bb-ink);
	transform: rotate(-45deg);
}

@media (max-width: 991.98px) {
	.bb-related {
		grid-template-columns: 1fr;
	}
}

/* ============ 28. CLOSING CTA BAND ============ */
.bb-ctaBand {
	position: relative;
	padding: 110px 0 120px;
	background: var(--bb-surface);
	border-top: 1px solid var(--bb-line);
	overflow: hidden;
}

.bb-ctaBand::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(70% 120% at 88% 50%, rgba(200, 255, 61, 0.11) 0%, transparent 60%);
	pointer-events: none;
}

.bb-ctaBand > .container-xxl {
	position: relative;
}

.bb-ctaBand__inner {
	display: grid;
	grid-template-columns: 1.45fr 1fr;
	align-items: center;
	gap: 48px;
}

.bb-ctaBand__eyebrow {
	margin: 0 0 18px;
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--bb-accent);
}

.bb-ctaBand__title {
	margin: 0 0 18px;
	font-size: clamp(1.7rem, 3.4vw, 2.7rem);
}

.bb-ctaBand__text {
	max-width: 56ch;
	margin: 0;
	font-size: 0.96rem;
	line-height: 1.7;
	color: var(--bb-muted);
}

.bb-ctaBand__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: flex-end;
}

@media (max-width: 991.98px) {
	.bb-ctaBand {
		padding: 76px 0 82px;
	}

	.bb-ctaBand__inner {
		grid-template-columns: 1fr;
		gap: 30px;
	}

	.bb-ctaBand__actions {
		justify-content: flex-start;
	}
}

/* ============ 29. FILTERABLE SERVICE GRID ============ */
.bb-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 44px;
}

.bb-filter {
	padding: 10px 20px;
	border: 1px solid var(--bb-line);
	border-radius: 100px;
	background: transparent;
	font-family: var(--bb-font-display);
	font-size: 0.8rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	color: var(--bb-muted);
	cursor: pointer;
	transition: background-color 0.45s var(--bb-ease), border-color 0.45s var(--bb-ease),
		color 0.45s var(--bb-ease);
}

.bb-filter:hover {
	border-color: var(--bb-muted);
	color: var(--bb-text);
}

.bb-filter.is-active {
	background: var(--bb-accent);
	border-color: var(--bb-accent);
	color: var(--bb-ink);
}

.bb-filter:focus-visible {
	outline: 2px solid var(--bb-accent);
	outline-offset: 3px;
}

.bb-svcGrid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.bb-svcCard {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--bb-line);
	border-radius: 20px;
	background: var(--bb-panel);
	overflow: hidden;
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.7s var(--bb-ease), transform 0.8s var(--bb-ease),
		border-color 0.5s var(--bb-ease), box-shadow 0.6s var(--bb-ease);
}

.is-revealed .bb-svcCard {
	opacity: 1;
	transform: translateY(0);
}

.is-revealed .bb-svcCard:nth-child(2) { transition-delay: 0.08s; }
.is-revealed .bb-svcCard:nth-child(3) { transition-delay: 0.16s; }
.is-revealed .bb-svcCard:nth-child(4) { transition-delay: 0.24s; }
.is-revealed .bb-svcCard:nth-child(5) { transition-delay: 0.32s; }
.is-revealed .bb-svcCard:nth-child(6) { transition-delay: 0.40s; }

.is-revealed .bb-svcCard:hover {
	border-color: rgba(200, 255, 61, 0.36);
	box-shadow: 0 40px 80px -50px rgba(0, 0, 0, 0.95);
	transition-delay: 0s;
}

/* Filtered-out cards collapse rather than merely hiding, so the grid reflows. */
.bb-svcCard.is-hidden {
	display: none;
}

.bb-svcCard__media {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--bb-ink);
}

.bb-svcCard__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: saturate(0.88) contrast(1.04);
	transition: transform 1s var(--bb-ease);
}

.bb-svcCard:hover .bb-svcCard__media img {
	transform: scale(1.06);
}

.bb-svcCard__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(7, 10, 18, 0.14) 0%, rgba(7, 10, 18, 0.78) 100%);
}

.bb-svcCard__group {
	position: absolute;
	left: 16px;
	bottom: 14px;
	z-index: 1;
	padding: 5px 12px;
	border: 1px solid rgba(200, 255, 61, 0.3);
	border-radius: 100px;
	background: rgba(7, 10, 18, 0.72);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	font-size: 0.62rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--bb-accent);
}

.bb-svcCard__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 26px 26px 28px;
}

.bb-svcCard__title {
	margin: 0 0 12px;
	font-size: 1.14rem;
	font-weight: 600;
	line-height: 1.28;
	transition: color 0.45s var(--bb-ease);
}

.bb-svcCard:hover .bb-svcCard__title {
	color: var(--bb-accent);
}

.bb-svcCard__text {
	margin: 0 0 22px;
	font-size: 0.87rem;
	line-height: 1.64;
	color: var(--bb-muted);
}

.bb-svcCard__metric {
	display: flex;
	align-items: baseline;
	gap: 9px;
	margin: 0 0 24px;
	padding-top: 18px;
	border-top: 1px solid var(--bb-line);
	font-size: 0.74rem;
	letter-spacing: 0.06em;
	color: var(--bb-muted);
}

.bb-svcCard__metric strong {
	font-family: var(--bb-font-display);
	font-size: 1.16rem;
	font-weight: 600;
	color: var(--bb-accent);
}

.bb-svcCard__link {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin-top: auto;
	align-self: flex-start;
	font-family: var(--bb-font-display);
	font-size: 0.86rem;
	font-weight: 600;
	color: var(--bb-text);
	transition: color 0.4s var(--bb-ease);
}

.bb-svcCard__link i {
	font-size: 0.72rem;
	color: var(--bb-accent);
	transition: transform 0.45s var(--bb-ease);
}

.bb-svcCard__link:hover {
	color: var(--bb-accent);
}

.bb-svcCard__link:hover i,
.bb-svcCard:hover .bb-svcCard__link i {
	transform: translateX(4px);
}

@media (max-width: 1199.98px) {
	.bb-svcGrid {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 767.98px) {
	.bb-svcGrid {
		grid-template-columns: 1fr;
	}

	.bb-filters {
		margin-bottom: 30px;
	}
}

/* ============ 30. FULL CASE STUDY ENTRIES ============ */
.bb-caseFull {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: 56px;
	padding: 64px 0;
	border-bottom: 1px solid var(--bb-line);
	opacity: 0;
	transform: translateY(26px);
	transition: opacity 0.8s var(--bb-ease), transform 0.9s var(--bb-ease);
}

.is-revealed .bb-caseFull {
	opacity: 1;
	transform: translateY(0);
}

.bb-caseFull:first-of-type {
	padding-top: 0;
}

.bb-caseFull:last-of-type {
	border-bottom: none;
	padding-bottom: 0;
}

/* Alternating sides keep a long list of case studies from reading as a column. */
.bb-caseFull:nth-of-type(even) .bb-caseFull__media {
	order: 2;
}

.bb-caseFull__media {
	position: relative;
	border: 1px solid var(--bb-line);
	border-radius: 20px;
	overflow: hidden;
}

.bb-caseFull__media img {
	display: block;
	width: 100%;
	height: auto;
	filter: saturate(0.9) contrast(1.04);
	transition: transform 1.1s var(--bb-ease);
}

.bb-caseFull:hover .bb-caseFull__media img {
	transform: scale(1.04);
}

.bb-caseFull__tag {
	margin: 0 0 16px;
	font-size: 0.7rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--bb-accent);
}

.bb-caseFull__title {
	margin: 0 0 20px;
	font-size: clamp(1.4rem, 2.6vw, 2.05rem);
	font-weight: 600;
	line-height: 1.2;
}

.bb-caseFull__block {
	margin-bottom: 20px;
}

.bb-caseFull__block h3 {
	margin: 0 0 8px;
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--bb-muted);
}

.bb-caseFull__block p {
	margin: 0;
	font-size: 0.92rem;
	line-height: 1.7;
	color: var(--bb-muted);
}

.bb-caseFull__stats {
	display: flex;
	flex-wrap: wrap;
	gap: 14px 38px;
	margin: 28px 0 0;
	padding-top: 22px;
	border-top: 1px solid var(--bb-line);
}

.bb-caseFull__stats dt {
	margin-bottom: 4px;
	font-size: 0.66rem;
	font-weight: 400;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--bb-muted);
}

.bb-caseFull__stats dd {
	margin: 0;
	font-family: var(--bb-font-display);
	font-size: 1.32rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--bb-accent);
}

@media (max-width: 991.98px) {
	.bb-caseFull {
		grid-template-columns: 1fr;
		gap: 30px;
		padding: 44px 0;
	}

	.bb-caseFull:nth-of-type(even) .bb-caseFull__media {
		order: 0;
	}
}

/* ============ 31. INSIGHT CARDS ============ */
.bb-postGrid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
}

.bb-post {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 30px 28px 30px;
	border: 1px solid var(--bb-line);
	border-radius: 18px;
	background: var(--bb-panel);
	text-align: left;
	opacity: 0;
	transform: translateY(22px);
	cursor: pointer;
	transition: opacity 0.7s var(--bb-ease), transform 0.8s var(--bb-ease),
		border-color 0.5s var(--bb-ease), box-shadow 0.6s var(--bb-ease);
}

/* The whole card is the click target, so the button covers it while the
   heading and text stay outside the button's phrasing-only content model. */
.bb-post__trigger {
	position: absolute;
	inset: 0;
	z-index: 2;
	width: 100%;
	padding: 0;
	border: 0;
	border-radius: inherit;
	background: none;
	font: inherit;
	color: transparent;
	cursor: pointer;
}

.is-revealed .bb-post {
	opacity: 1;
	transform: translateY(0);
}

.is-revealed .bb-post:nth-child(2) { transition-delay: 0.08s; }
.is-revealed .bb-post:nth-child(3) { transition-delay: 0.16s; }
.is-revealed .bb-post:nth-child(4) { transition-delay: 0.24s; }
.is-revealed .bb-post:nth-child(5) { transition-delay: 0.32s; }
.is-revealed .bb-post:nth-child(6) { transition-delay: 0.40s; }

.is-revealed .bb-post:hover {
	border-color: rgba(200, 255, 61, 0.36);
	box-shadow: 0 34px 70px -48px rgba(0, 0, 0, 0.95);
	transform: translateY(-4px);
	transition-delay: 0s;
}

.bb-post__trigger:focus-visible {
	outline: 2px solid var(--bb-accent);
	outline-offset: 3px;
}

.bb-post__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 14px;
	margin-bottom: 18px;
	font-size: 0.68rem;
	font-weight: 500;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--bb-muted);
}

.bb-post__meta span:first-child {
	color: var(--bb-accent);
}

.bb-post__title {
	margin: 0 0 12px;
	font-size: 1.08rem;
	font-weight: 600;
	line-height: 1.32;
	transition: color 0.45s var(--bb-ease);
}

.bb-post:hover .bb-post__title {
	color: var(--bb-accent);
}

.bb-post__text {
	margin: 0 0 24px;
	font-size: 0.86rem;
	line-height: 1.64;
	color: var(--bb-muted);
}

.bb-post__more {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin-top: auto;
	font-family: var(--bb-font-display);
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--bb-text);
}

.bb-post__more i {
	font-size: 0.7rem;
	color: var(--bb-accent);
	transition: transform 0.45s var(--bb-ease);
}

.bb-post:hover .bb-post__more i {
	transform: translateX(4px);
}

@media (max-width: 1199.98px) {
	.bb-postGrid {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 767.98px) {
	.bb-postGrid {
		grid-template-columns: 1fr;
	}
}

/* ============ 32. FORMS ============ */
.bb-form {
	padding: 34px 34px 36px;
	border: 1px solid var(--bb-line);
	border-radius: 20px;
	background: var(--bb-panel);
}

.bb-form__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 20px;
}

.bb-field--full {
	grid-column: 1 / -1;
}

.bb-field__label {
	display: block;
	margin-bottom: 9px;
	font-size: 0.68rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--bb-muted);
}

.bb-field__label span {
	color: var(--bb-accent);
}

.bb-field__input {
	display: block;
	width: 100%;
	padding: 13px 16px;
	border: 1px solid var(--bb-line-strong);
	border-radius: 12px;
	background: rgba(245, 247, 250, 0.04);
	color: var(--bb-text);
	font-family: var(--bb-font-body);
	font-size: 0.9rem;
	transition: border-color 0.45s var(--bb-ease), background-color 0.45s var(--bb-ease),
		box-shadow 0.5s var(--bb-ease);
}

textarea.bb-field__input {
	min-height: 140px;
	resize: vertical;
}

select.bb-field__input {
	appearance: none;
	color: var(--bb-text);
	color-scheme: dark;
	background-color: rgba(245, 247, 250, 0.04);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%238A94A6'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 14px;
	padding-right: 40px;
}

select.bb-field__input option {
	background-color: #111726;
	color: #F5F7FA;
}

.bb-field__input::placeholder {
	color: rgba(138, 148, 166, 0.7);
}

.bb-field__input:hover {
	border-color: var(--bb-muted);
}

.bb-field__input:focus {
	outline: none;
	border-color: var(--bb-accent);
	background: rgba(245, 247, 250, 0.07);
	box-shadow: 0 0 0 4px rgba(200, 255, 61, 0.12);
}

.bb-field__input.is-invalid {
	border-color: #FF6B5A;
	box-shadow: 0 0 0 4px rgba(255, 107, 90, 0.14);
}

.bb-field__error {
	margin: 8px 0 0;
	font-size: 0.76rem;
	color: #FF8A7C;
}

.bb-form__consent {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin-top: 4px;
}

.bb-form__consent input {
	width: 18px;
	height: 18px;
	margin-top: 2px;
	flex: 0 0 18px;
	accent-color: var(--bb-accent);
}

/* The checkbox cannot show a border like a text field, so it is outlined. */
.bb-form__consent input.is-invalid {
	outline: 2px solid #FF6B5A;
	outline-offset: 3px;
	border-radius: 3px;
}

.bb-form__consent label {
	font-size: 0.8rem;
	line-height: 1.56;
	color: var(--bb-muted);
}

.bb-form__consent a {
	color: var(--bb-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.bb-form__footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 22px;
	margin-top: 28px;
}

.bb-form__note {
	margin: 0;
	font-size: 0.78rem;
	line-height: 1.5;
	color: var(--bb-muted);
}

@media (max-width: 575.98px) {
	.bb-modal .modal-dialog {
		width: calc(100% - 1.5rem);
		max-width: calc(100% - 1.5rem);
		margin: 1.75rem auto;
	}
}

@media (max-width: 767.98px) {
	.bb-form {
		padding: 26px 22px 28px;
	}

	.bb-form__grid {
		grid-template-columns: 1fr;
	}
}

/* Contact detail panel */
.bb-contactAside {
	display: flex;
	flex-direction: column;
	gap: 26px;
}

.bb-contactCard {
	padding: 26px 26px 28px;
	border: 1px solid var(--bb-line);
	border-radius: 18px;
	background:
		radial-gradient(120% 100% at 0% 0%, rgba(200, 255, 61, 0.07) 0%, transparent 58%),
		var(--bb-panel);
}

.bb-contactCard h3 {
	margin: 0 0 16px;
	font-family: var(--bb-font-display);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--bb-accent);
}

.bb-contactCard p {
	margin: 0 0 8px;
	font-size: 0.9rem;
	line-height: 1.64;
	color: var(--bb-muted);
}

.bb-contactCard p:last-child {
	margin-bottom: 0;
}

.bb-contactCard a {
	color: var(--bb-text);
	transition: color 0.4s var(--bb-ease);
}

.bb-contactCard a:hover {
	color: var(--bb-accent);
}

/* ============ 33. LEGAL PAGES ============ */
.bb-legal {
	display: grid;
	grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
	gap: 60px;
	align-items: start;
	min-width: 0;
	max-width: 100%;
}

.bb-legal > * {
	min-width: 0;
	max-width: 100%;
}

.bb-legal .bb-rise {
	opacity: 1;
	transform: none;
}

.bb-legalNav {
	position: sticky;
	top: calc(var(--bb-header-h-sm) + 30px);
	padding: 24px 22px;
	border: 1px solid var(--bb-line);
	border-radius: 16px;
	background: var(--bb-panel);
}

.bb-legalNav h2 {
	margin: 0 0 16px;
	font-family: var(--bb-font-display);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--bb-muted);
}

.bb-legalNav ol {
	display: flex;
	flex-direction: column;
	gap: 11px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: legal;
}

.bb-legalNav li {
	counter-increment: legal;
}

.bb-legalNav a {
	display: flex;
	gap: 10px;
	font-size: 0.83rem;
	line-height: 1.4;
	color: var(--bb-muted);
	transition: color 0.4s var(--bb-ease);
}

.bb-legalNav a::before {
	content: counter(legal) ".";
	flex: 0 0 auto;
	color: var(--bb-accent);
	font-variant-numeric: tabular-nums;
}

.bb-legalNav a:hover,
.bb-legalNav a:focus-visible {
	color: var(--bb-text);
}

.bb-prose {
	max-width: 76ch;
	min-width: 0;
	overflow-wrap: anywhere;
	word-break: break-word;
}

.bb-prose > section {
	padding-bottom: 40px;
	scroll-margin-top: calc(var(--bb-header-h-sm) + 30px);
}

.bb-prose h2 {
	margin: 0 0 18px;
	font-size: clamp(1.24rem, 2.2vw, 1.6rem);
	font-weight: 600;
}

.bb-prose h3 {
	margin: 28px 0 12px;
	font-size: 1.02rem;
	font-weight: 600;
}

.bb-prose p {
	margin: 0 0 16px;
	font-size: 0.94rem;
	line-height: 1.76;
	color: var(--bb-muted);
}

.bb-prose ul {
	margin: 0 0 18px;
	padding: 0;
	list-style: none;
}

.bb-prose ul li {
	position: relative;
	padding-left: 22px;
	margin-bottom: 11px;
	font-size: 0.92rem;
	line-height: 1.7;
	color: var(--bb-muted);
}

.bb-prose ul li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.62em;
	width: 8px;
	height: 1.5px;
	background: var(--bb-accent);
}

.bb-prose a {
	color: var(--bb-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.bb-prose strong {
	color: var(--bb-text);
	font-weight: 500;
}

.bb-prose__updated {
	display: inline-block;
	margin-bottom: 40px;
	padding: 8px 16px;
	border: 1px solid var(--bb-line);
	border-radius: 100px;
	font-size: 0.76rem;
	color: var(--bb-muted);
}

/* Data table inside legal prose */
.bb-dataTable {
	width: 100%;
	margin: 0 0 20px;
	border: 1px solid var(--bb-line);
	border-radius: 14px;
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	font-size: 0.84rem;
}

.bb-dataTable th,
.bb-dataTable td {
	padding: 13px 16px;
	text-align: left;
	border-bottom: 1px solid var(--bb-line);
	vertical-align: top;
	white-space: normal;
	overflow-wrap: anywhere;
}

.bb-dataTable thead th {
	background: rgba(245, 247, 250, 0.03);
	font-family: var(--bb-font-display);
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--bb-text);
}

.bb-dataTable tbody td {
	color: var(--bb-muted);
}

.bb-dataTable tbody tr:last-child td {
	border-bottom: none;
}

@media (max-width: 991.98px) {
	.bb-legal {
		grid-template-columns: minmax(0, 1fr);
		gap: 34px;
	}

	.bb-legalNav {
		position: static;
	}

	.bb-dataTable {
		display: block;
		width: 100%;
		max-width: 100%;
		overflow-x: auto;
		white-space: normal;
	}
}

/* ============ 34. ENGAGEMENT PATTERN COMPONENTS ============ */

/* Scope readouts replace headline figures on the teaser cards: label plus a
   short text value, so nothing reads as a performance claim. */
.bb-case__scope,
.bb-caseFull__scope {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(158px, 100%), 1fr));
	gap: 16px 26px;
	margin: 0 0 26px;
	padding-top: 20px;
	border-top: 1px solid var(--bb-line);
}

.bb-case__scope dt,
.bb-caseFull__scope dt {
	margin-bottom: 5px;
	font-size: 0.64rem;
	font-weight: 400;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--bb-muted);
}

.bb-case__scope dd,
.bb-caseFull__scope dd {
	margin: 0;
	font-family: var(--bb-font-display);
	font-size: 0.88rem;
	font-weight: 500;
	line-height: 1.42;
	color: var(--bb-text);
}

.bb-case--compact .bb-case__scope {
	gap: 12px 20px;
	margin-bottom: 22px;
	padding-top: 16px;
}

/* Pattern rows on the engagement patterns page. */
.bb-caseFull--pattern {
	align-items: start;
}

.bb-caseFull__badge {
	position: absolute;
	top: 18px;
	left: 18px;
	margin: 0;
	padding: 7px 15px;
	border-radius: 100px;
	background: rgba(7, 10, 18, 0.78);
	border: 1px solid var(--bb-line-strong);
	backdrop-filter: blur(8px);
	font-family: var(--bb-font-display);
	font-size: 0.66rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--bb-accent);
}

.bb-caseFull__scope {
	margin-top: 28px;
}

.bb-caseFull__cta {
	margin-top: 4px;
}

/* Wide breakdown modals: extra width plus full-height scrolling behaviour. */
.bb-modal--wide .modal-dialog {
	max-width: min(1280px, calc(100% - 3rem));
}

.bb-modal--wide .modal-content {
	overflow: hidden;
}

.bb-modal__lead {
	margin: 12px 0 0;
	max-width: 68ch;
	font-size: 0.9rem;
	line-height: 1.6;
	color: var(--bb-muted);
}

.bb-modal--wide .modal-header,
.bb-modal--wide .modal-body {
	padding-left: 38px;
	padding-right: 38px;
}

.bb-modal--wide .modal-footer {
	padding: 20px 38px 24px;
	justify-content: space-between;
	align-items: center;
}

.bb-modal__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
	gap: 36px 48px;
}

.bb-modal__side {
	padding: 26px 26px 6px;
	border: 1px solid var(--bb-line);
	border-radius: 18px;
	background: var(--bb-panel-soft);
}

.bb-modal--wide .bb-modal__block {
	margin-bottom: 30px;
}

.bb-modal--wide .bb-modal__block:last-child {
	margin-bottom: 0;
}

.bb-modal--wide .bb-modal__block h3 {
	margin-bottom: 12px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--bb-line);
	font-size: 0.7rem;
	letter-spacing: 0.2em;
}

/* Diagnostic signal list: keyword lead-in, then the observation. */
.bb-signalList {
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 12px;
}

.bb-signalList li {
	position: relative;
	padding: 13px 16px 13px 18px;
	border-left: 2px solid var(--bb-line-strong);
	border-radius: 0 12px 12px 0;
	background: rgba(245, 247, 250, 0.03);
	font-size: 0.88rem;
	line-height: 1.6;
	color: var(--bb-muted);
	transition: border-color 0.5s var(--bb-ease), background-color 0.5s var(--bb-ease);
}

.bb-signalList li:hover {
	border-left-color: var(--bb-accent);
	background: rgba(200, 255, 61, 0.05);
}

.bb-signalList__key {
	display: block;
	margin-bottom: 4px;
	font-family: var(--bb-font-display);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--bb-text);
}

/* Architecture rail: each node carries its own hairline and marker, so the
   chain stays readable when the grid wraps. */
.bb-arch {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
	gap: 24px 16px;
	margin: 18px 0 0;
	padding: 0;
	list-style: none;
}

.bb-arch__node {
	position: relative;
	padding: 26px 12px 0 0;
}

.bb-arch__node::before {
	content: "";
	position: absolute;
	top: 8px;
	left: 0;
	right: 0;
	height: 1px;
	background: var(--bb-line);
}

.bb-arch__node::after {
	content: "";
	position: absolute;
	top: 4px;
	left: 0;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--bb-accent);
	box-shadow: 0 0 0 4px rgba(200, 255, 61, 0.12);
	transition: transform 0.5s var(--bb-ease);
}

.bb-arch__node:hover::after {
	transform: scale(1.35);
}

.bb-arch__step {
	display: block;
	margin-bottom: 6px;
	font-family: var(--bb-font-display);
	font-size: 0.66rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	font-variant-numeric: tabular-nums;
	color: var(--bb-accent);
}

.bb-arch__label {
	display: block;
	font-family: var(--bb-font-display);
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--bb-text);
}

.bb-arch__note {
	display: block;
	margin-top: 6px;
	font-size: 0.78rem;
	line-height: 1.5;
	color: var(--bb-muted);
}

/* Phased delivery timeline. */
.bb-flow {
	position: relative;
	margin: 18px 0 0;
	padding: 0 0 0 30px;
	list-style: none;
}

.bb-flow::before {
	content: "";
	position: absolute;
	top: 8px;
	bottom: 8px;
	left: 5px;
	width: 1px;
	background: linear-gradient(180deg, var(--bb-accent) 0%, var(--bb-line) 100%);
}

.bb-flow__item {
	position: relative;
	padding-bottom: 24px;
}

.bb-flow__item:last-child {
	padding-bottom: 0;
}

.bb-flow__item::before {
	content: "";
	position: absolute;
	top: 7px;
	left: -30px;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	border: 2px solid var(--bb-accent);
	background: var(--bb-panel);
}

/* The timeline animates in each time a breakdown modal is opened. */
.bb-modal--wide.show .bb-flow__item {
	animation: bbFlowIn 0.7s var(--bb-ease) both;
}

.bb-modal--wide.show .bb-flow__item:nth-child(1) { animation-delay: 0.08s; }
.bb-modal--wide.show .bb-flow__item:nth-child(2) { animation-delay: 0.18s; }
.bb-modal--wide.show .bb-flow__item:nth-child(3) { animation-delay: 0.28s; }
.bb-modal--wide.show .bb-flow__item:nth-child(4) { animation-delay: 0.38s; }

@keyframes bbFlowIn {
	from {
		opacity: 0;
		transform: translateY(14px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.bb-flow__days {
	margin: 0 0 6px;
	font-size: 0.66rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--bb-accent);
}

.bb-flow__title {
	margin: 0 0 7px;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.28;
	color: var(--bb-text);
}

.bb-flow__text {
	margin: 0;
	font-size: 0.86rem;
	line-height: 1.62;
	color: var(--bb-muted);
}

/* Specification grid used for measurement and acceptance criteria. */
.bb-specGrid {
	margin: 0;
	border: 1px solid var(--bb-line);
	border-radius: 14px;
	overflow: hidden;
}

.bb-specGrid > div {
	padding: 13px 16px;
	border-bottom: 1px solid var(--bb-line);
	transition: background-color 0.5s var(--bb-ease);
}

.bb-specGrid > div:last-child {
	border-bottom: none;
}

.bb-specGrid > div:hover {
	background: rgba(200, 255, 61, 0.04);
}

.bb-specGrid dt {
	margin-bottom: 4px;
	font-size: 0.62rem;
	font-weight: 400;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--bb-muted);
}

.bb-specGrid dd {
	margin: 0;
	font-family: var(--bb-font-display);
	font-size: 0.86rem;
	font-weight: 500;
	line-height: 1.45;
	color: var(--bb-text);
}

/* Risk controls and deliverables share an icon list layout. */
.bb-riskList,
.bb-deliverList {
	display: grid;
	gap: 11px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bb-riskList li,
.bb-deliverList li {
	display: grid;
	grid-template-columns: 18px 1fr;
	gap: 11px;
	font-size: 0.86rem;
	line-height: 1.55;
	color: var(--bb-muted);
}

.bb-riskList i,
.bb-deliverList i {
	margin-top: 4px;
	font-size: 0.74rem;
	color: var(--bb-accent);
}

.bb-deliverList li {
	color: var(--bb-text);
	font-family: var(--bb-font-display);
	font-size: 0.85rem;
	font-weight: 500;
}

.bb-modal__foot {
	margin: 0;
	max-width: 46ch;
	font-size: 0.78rem;
	line-height: 1.5;
	color: var(--bb-muted);
}

.bb-modal__footActions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

@media (max-width: 1199.98px) {
	.bb-modal__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 30px;
	}

	.bb-modal--wide .modal-dialog {
		max-width: calc(100% - 2rem);
	}
}

@media (max-width: 991.98px) {
	.bb-caseFull__scope {
		grid-template-columns: 1fr 1fr;
	}
}

/* Below the medium breakpoint the breakdown modals fill the viewport, which
   keeps the long timeline readable without pinch zooming. */
@media (max-width: 767.98px) {
	.bb-modal--wide .modal-dialog {
		width: 100%;
		max-width: none;
		height: 100%;
		margin: 0;
	}

	.bb-modal--wide .modal-content {
		height: 100%;
		max-height: 100%;
		border: none;
		border-radius: 0;
	}

	.bb-modal--wide .modal-header,
	.bb-modal--wide .modal-body {
		padding-left: 22px;
		padding-right: 22px;
	}

	.bb-modal--wide .modal-footer {
		padding: 16px 22px 20px;
		gap: 14px;
	}

	.bb-modal__foot {
		max-width: none;
	}

	.bb-modal__footActions {
		width: 100%;
	}

	.bb-modal__footActions .bb-btn {
		flex: 1 1 auto;
	}

	.bb-modal__side {
		padding: 22px 20px 4px;
	}

	.bb-arch {
		grid-template-columns: 1fr;
		gap: 18px;
	}

	.bb-caseFull__badge {
		top: 12px;
		left: 12px;
	}

	.bb-caseFull__scope {
		grid-template-columns: 1fr;
		gap: 14px;
	}

	.bb-caseFull__cta {
		width: 100%;
	}
}

/* ============ 35. MOTION PREFERENCES ============ */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		transition-delay: 0ms !important;
	}

	.bb-mediaBand:hover img {
		transform: none;
	}
}