/* =====================================================================
   Become Brand — landing styles (1:1 port of become-brand.base44.app)
   Palette: primary #E63778 | dark #0D0D0D | glow rgba(232,53,122,x)
   ===================================================================== */

@font-face {
	font-family: "Heebo";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/heebo-hebrew.woff2") format("woff2");
	unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}

@font-face {
	font-family: "Heebo";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/heebo-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	--bb-primary: #E63778;
	--bb-primary-glow: 232, 53, 122;
	--bb-dark: #0D0D0D;
	--bb-dark-card: #161616;
	--bb-dark-soft: #1A1A1A;
	--bb-fg: #0D0D0D;
	--bb-muted: #66645F;
	--bb-border: #E4E3E2;
	--bb-secondary: #F8F8F7;
	--bb-off-white: #FAFAF9;
	--bb-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

[id] { scroll-margin-top: 68px; }

body {
	margin: 0;
	font-family: "Heebo", -apple-system, "Segoe UI", Arial, sans-serif;
	background: #fff;
	color: var(--bb-fg);
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
}

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

/* Neutralize WP block-gap margins that break the section flow and the
   1px-divider card mosaics (belt over the theme.json blockGap:0). */
main.wp-block-group > .wp-block-group,
.bb-hero > .wp-block-group,
.bb-cardgrid > .wp-block-group,
.bb-fit__grid > .wp-block-group,
.bb-results__grid > .wp-block-group,
.bb-hero__stats > .wp-block-group,
.bb-about__team > .wp-block-group {
	margin-block-start: 0;
	margin-block-end: 0;
}

.bb-container {
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: 24px;
}

.bb-container--narrow { max-width: 760px; }

@media (min-width: 768px) {
	.bb-container { padding-inline: 48px; }
}

/* ---- shared bits ------------------------------------------------- */

.bb-kicker {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--bb-primary);
	margin: 0 0 12px;
}

.bb-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	color: rgba(255, 255, 255, 0.5);
	margin: 0 0 16px;
}

.bb-eyebrow__dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--bb-primary);
	box-shadow: 0 0 6px 2px rgba(var(--bb-primary-glow), 0.6);
	animation: bb-blink-dot 2s ease-in-out infinite;
}

.bb-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	border-radius: 8px;
	cursor: pointer;
	transition: all 0.25s ease;
	white-space: nowrap;
}

.bb-btn--primary {
	background: var(--bb-primary);
	color: #fff;
	font-weight: 700;
	font-size: 16px;
	padding: 16px 32px;
	box-shadow: 0 4px 24px rgba(var(--bb-primary-glow), 0.28);
}

.bb-btn--primary:hover {
	background: rgba(230, 55, 120, 0.85);
	transform: translateY(-2px);
}

.bb-btn--ghost {
	color: rgba(255, 255, 255, 0.6);
	font-weight: 600;
	font-size: 15px;
	padding: 16px 20px;
	border: 1px solid rgba(255, 255, 255, 0.15);
}

/* Quiz CTA — reads as a gift, not another sales button. */
.bb-btn--quiz {
	color: #fff;
	font-weight: 700;
	font-size: 15px;
	padding: 15px 26px;
	border: 1.5px solid rgba(230, 55, 120, 0.55);
	background: rgba(230, 55, 120, 0.1);
	backdrop-filter: blur(6px);
}

.bb-btn--quiz:hover {
	border-color: var(--bb-primary);
	background: rgba(230, 55, 120, 0.2);
	transform: translateY(-2px);
}

.bb-btn__gift {
	font-size: 17px;
	display: inline-block;
}

.bb-pg-cta__actions {
	display: flex;
	gap: 11px;
	justify-content: center;
	flex-wrap: wrap;
}

/* nav pill for the quiz link */
.bb-nav__link--quiz {
	color: var(--bb-primary) !important;
	font-weight: 700;
}

.bb-nav__link--quiz::after { background: var(--bb-primary); }

.bb-btn--ghost:hover {
	color: #fff;
	border-color: rgba(255, 255, 255, 0.5);
}

/* pink accent inside headings/paragraphs (Gutenberg-safe <em>) */
.bb-hero__title-2 em,
.bb-solution__title em,
.bb-testimonials__title em,
.bb-ads__title em,
.bb-fit__title em,
.bb-about__statement em,
.bb-cta__title em,
.bb-hero__stat-value em,
.bb-results__value em {
	font-style: normal;
	color: var(--bb-primary);
}

/* ---- entrance animations ---------------------------------------- */

.bb-anim {
	opacity: 0;
	transform: translateY(36px);
	transition: opacity 0.8s var(--bb-ease), transform 0.8s var(--bb-ease);
}

.bb-anim.bb-in {
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.bb-anim { opacity: 1; transform: none; transition: none; }
	html { scroll-behavior: auto; }
}

/* ---- navbar ------------------------------------------------------ */

.bb-nav {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	z-index: 50;
	/* No backdrop-filter here on purpose: a fixed, full-width blur has to
	   re-blur whatever is behind it on every scroll frame, and behind it is
	   playing video — that alone stalled scrolling across the page. At 94%
	   opacity the blur was invisible anyway. */
	background: rgba(13, 13, 13, 0.94);
	border-bottom: 1px solid rgba(255, 255, 255, 0.07);
	transition: background 0.3s ease;
}

.bb-nav.bb-nav--scrolled { background: rgba(13, 13, 13, 0.95); }

.bb-nav__inner {
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: 24px;
	height: 68px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

@media (min-width: 768px) {
	.bb-nav__inner { padding-inline: 48px; }
}

.bb-nav__logo {
	font-size: 22px;
	font-weight: 900;
	color: #fff;
	letter-spacing: -0.5px;
	text-decoration: none;
}

.bb-nav__logo-dot {
	color: var(--bb-primary);
	text-shadow: 0 0 8px rgba(var(--bb-primary-glow), 0.6);
	animation: bb-blink-dot 3s ease-in-out infinite;
	display: inline-block;
}

.bb-nav__links {
	display: none;
	align-items: center;
	gap: 36px;
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (min-width: 768px) {
	.bb-nav__links { display: flex; }
	.bb-nav__burger { display: none; }
}

.bb-nav__link {
	font-size: 14px;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.5);
	text-decoration: none;
	transition: color 0.2s ease;
}

.bb-nav__link:hover { color: #fff; }

.bb-nav__cta {
	background: var(--bb-primary);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	padding: 10px 24px;
	border-radius: 8px;
	text-decoration: none;
	transition: background 0.2s ease;
	white-space: nowrap;
}

.bb-nav__cta:hover { background: rgba(230, 55, 120, 0.85); }

.bb-nav__burger {
	background: none;
	border: none;
	color: #fff;
	padding: 8px;
	cursor: pointer;
}

.bb-nav__burger .bb-icon-close { display: none; }
.bb-nav--open .bb-nav__burger .bb-icon-close { display: block; }
.bb-nav--open .bb-nav__burger .bb-icon-menu { display: none; }

.bb-nav__mobile {
	display: none;
	background: #0d0d0d;
	border-top: 1px solid rgba(255, 255, 255, 0.05);
	padding: 16px 24px 24px;
}

.bb-nav--open .bb-nav__mobile { display: block; }

@media (min-width: 768px) {
	.bb-nav__mobile { display: none !important; }
}

.bb-nav__mobile-link {
	display: block;
	width: 100%;
	text-align: right;
	font-size: 16px;
	color: rgba(255, 255, 255, 0.6);
	text-decoration: none;
	padding: 8px 0;
	transition: color 0.2s ease;
}

.bb-nav__mobile-link:hover { color: #fff; }

.bb-nav__mobile-cta {
	display: block;
	background: var(--bb-primary);
	color: #fff;
	text-align: center;
	font-weight: 700;
	padding: 12px 0;
	border-radius: 8px;
	text-decoration: none;
	margin-top: 16px;
}

/* ---- hero -------------------------------------------------------- */

.bb-hero {
	position: relative;
	overflow: hidden;
	background: var(--bb-dark);
	color: #fff;
	padding: 120px 0 32px;
}

.bb-hero__canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	opacity: 0.55;
	z-index: 0;
}

.bb-hero__orb {
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
}

.bb-hero__orb--1 {
	top: -120px;
	left: 10%;
	width: 500px;
	height: 500px;
	background: radial-gradient(circle, rgba(var(--bb-primary-glow), 0.15) 0%, transparent 65%);
	animation: bb-float-orb-1 8s ease-in-out infinite;
}

.bb-hero__orb--2 {
	bottom: -80px;
	right: 5%;
	width: 400px;
	height: 400px;
	background: radial-gradient(circle, rgba(var(--bb-primary-glow), 0.1) 0%, transparent 65%);
	animation: bb-float-orb-2 11s ease-in-out infinite;
}

.bb-hero__content { position: relative; z-index: 10; }

.bb-hero__title-1 {
	font-size: clamp(62px, 10vw, 130px);
	font-weight: 900;
	line-height: 0.95;
	letter-spacing: -4px;
	margin: 0;
	color: var(--bb-primary);
}

.bb-hero__title-2 {
	font-size: clamp(38px, 6vw, 82px);
	font-weight: 300;
	line-height: 0.95;
	letter-spacing: -4px;
	margin: 0;
	color: #fff;
}

.bb-hero__title-2 strong { font-weight: 700; }

.bb-hero__title-2 em {
	font-weight: 900;
	text-shadow: 0 0 40px rgba(var(--bb-primary-glow), 0.4);
}

.bb-hero__subrow {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
	margin-top: 24px;
	padding-bottom: 40px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

@media (min-width: 768px) {
	.bb-hero__subrow {
		flex-direction: row;
		align-items: flex-end;
		gap: 40px;
	}
}

.bb-hero__lede {
	font-size: 17px;
	line-height: 1.75;
	color: rgba(255, 255, 255, 0.55);
	max-width: 460px;
	margin: 0;
}

.bb-hero__actions {
	display: flex;
	gap: 12px;
	align-items: center;
	flex-shrink: 0;
}

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

.bb-hero__stat { padding-left: 16px; }

.bb-hero__stat:not(:last-child) {
	border-left: 1px solid rgba(255, 255, 255, 0.1);
	margin-left: 16px;
}

@media (min-width: 768px) {
	.bb-hero__stat { padding-left: 40px; }
	.bb-hero__stat:not(:last-child) { margin-left: 40px; }
}

.bb-hero__stat-value {
	font-size: clamp(22px, 5vw, 52px);
	font-weight: 900;
	letter-spacing: -1px;
	line-height: 1;
	color: #fff;
	margin: 0;
}

@media (min-width: 768px) {
	.bb-hero__stat-value { letter-spacing: -2px; }
}

.bb-hero__stat-label {
	font-size: 11px;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.38);
	margin: 6px 0 0;
}

@media (min-width: 768px) {
	.bb-hero__stat-label { font-size: 13px; }
}

/* ---- pain -------------------------------------------------------- */

.bb-pain {
	background: var(--bb-dark);
	padding: 16px 0 32px;
	border-top: 1px solid rgba(255, 255, 255, 0.06);
}

@media (min-width: 768px) {
	.bb-pain { padding: 32px 0; }
}

.bb-pain__title {
	font-size: clamp(34px, 5vw, 62px);
	font-weight: 900;
	line-height: 1.05;
	letter-spacing: -2px;
	color: #fff;
	margin: 0;
}

.bb-pain__subtitle {
	font-size: clamp(34px, 5vw, 62px);
	font-weight: 300;
	line-height: 1.05;
	letter-spacing: -2px;
	color: rgba(255, 255, 255, 0.4);
	margin: 0 0 40px;
}

.bb-pain__lines { display: block; }

.bb-pain__line {
	font-size: 22px;
	font-weight: 700;
	line-height: 1.4;
	color: rgba(255, 255, 255, 0.45);
	margin: 20px 0 0;
}

@media (min-width: 768px) {
	.bb-pain__line { font-size: 26px; }
}

.bb-pain__line--mid { color: rgba(255, 255, 255, 0.8); }
.bb-pain__line--strong { color: #fff; }
.bb-pain__line--gap { margin-top: 56px; }
.bb-pain__line:first-child { margin-top: 0; }

/* line stagger: each line arrives a beat after the one above it */
.bb-pain__lines .bb-pain__line:nth-child(1) { transition-delay: 0.00s; }
.bb-pain__lines .bb-pain__line:nth-child(2) { transition-delay: 0.09s; }
.bb-pain__lines .bb-pain__line:nth-child(3) { transition-delay: 0.18s; }
.bb-pain__lines .bb-pain__line:nth-child(4) { transition-delay: 0.27s; }
.bb-pain__lines .bb-pain__line:nth-child(5) { transition-delay: 0.36s; }
.bb-pain__lines .bb-pain__line:nth-child(6) { transition-delay: 0.45s; }
.bb-pain__lines .bb-pain__line:nth-child(7) { transition-delay: 0.54s; }
.bb-pain__lines .bb-pain__line:nth-child(8) { transition-delay: 0.63s; }

/* ---- solution / process ------------------------------------------ */

.bb-solution {
	background: #fff;
	padding: 48px 0;
	border-bottom: 1px solid var(--bb-border);
}

@media (min-width: 768px) {
	.bb-solution { padding: 100px 0; }
}

.bb-solution__head { margin-bottom: 32px; }

@media (min-width: 768px) {
	.bb-solution__head { margin-bottom: 40px; }
}

.bb-solution__title {
	font-size: clamp(34px, 5vw, 62px);
	font-weight: 900;
	line-height: 1.05;
	letter-spacing: -2px;
	color: var(--bb-fg);
	max-width: 700px;
	margin: 0;
}

/* shared 2x2 card grid with 1px dividers */
.bb-cardgrid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1px;
	border-radius: 16px;
	overflow: hidden;
}

@media (min-width: 768px) {
	.bb-cardgrid { grid-template-columns: 1fr 1fr; }
}

.bb-cardgrid--light { background: var(--bb-border); }
.bb-cardgrid--dark { background: rgba(255, 255, 255, 0.08); }

.bb-card { padding: 24px; }

@media (min-width: 768px) {
	.bb-card { padding: 48px; }
}

.bb-card--light {
	background: #fff;
	transition: background 0.25s ease;
}

.bb-card--light:hover { background: var(--bb-secondary); }

.bb-card--dark {
	background: var(--bb-dark-card);
	transition: filter 0.25s ease;
}

.bb-card--dark:hover { filter: brightness(1.25); }

.bb-card__num {
	font-size: 11px;
	font-weight: 900;
	letter-spacing: 0.16em;
	color: var(--bb-primary);
	margin: 0 0 24px;
}

.bb-card__title {
	font-size: 28px;
	font-weight: 900;
	letter-spacing: -1px;
	line-height: 1;
	color: var(--bb-fg);
	margin: 0 0 16px;
}

.bb-card--dark .bb-card__title { color: #fff; }

@media (min-width: 768px) {
	.bb-card__title { font-size: 32px; }
}

.bb-card__title--sm {
	font-size: 22px !important;
	font-weight: 800;
	letter-spacing: -0.5px;
	margin-bottom: 12px;
}

.bb-card__body {
	font-size: 16px;
	line-height: 1.75;
	color: var(--bb-muted);
	max-width: 380px;
	margin: 0;
}

.bb-card__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.bb-card__list li {
	position: relative;
	padding-right: 16px;
	font-size: 15px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.55);
	margin-bottom: 8px;
}

.bb-card__list li::before {
	content: "";
	position: absolute;
	right: 0;
	top: 9px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--bb-primary);
}

/* ---- results ----------------------------------------------------- */

.bb-results {
	background: #fff;
	border-bottom: 1px solid var(--bb-border);
}

.bb-results__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 768px) {
	.bb-results__grid { grid-template-columns: repeat(4, 1fr); }
}

.bb-results__item {
	padding: 56px 24px;
	transition: background 0.25s ease;
}

@media (min-width: 768px) {
	.bb-results__item { padding: 56px 40px; }
	.bb-results__item:not(:first-child) { border-right: 1px solid var(--bb-border); }
}

@media (max-width: 767px) {
	.bb-results__item:nth-child(even) { border-right: 1px solid var(--bb-border); }
	.bb-results__item:nth-child(n+3) { border-top: 1px solid var(--bb-border); }
}

.bb-results__item:hover { background: var(--bb-secondary); }

.bb-results__value {
	font-size: clamp(44px, 5vw, 72px);
	font-weight: 900;
	letter-spacing: -3px;
	line-height: 1;
	color: var(--bb-fg);
	margin: 0;
	white-space: nowrap;
}

.bb-results__label {
	font-size: 14px;
	font-weight: 600;
	color: var(--bb-muted);
	margin: 12px 0 0;
	line-height: 1.6;
}

.bb-results__sub {
	font-size: 12px;
	font-weight: 500;
	color: rgba(102, 100, 95, 0.5);
	margin: 4px 0 0;
}

/* ---- testimonials carousel --------------------------------------- */

.bb-testimonials {
	background: var(--bb-dark);
	padding: 64px 0 32px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

@media (min-width: 768px) {
	.bb-testimonials { padding: 96px 0 32px; }
}

.bb-testimonials__head {
	margin-bottom: 64px;
	text-align: center;
}

.bb-testimonials__title {
	font-size: clamp(36px, 5vw, 62px);
	font-weight: 900;
	letter-spacing: -2px;
	line-height: 1.05;
	color: #fff;
	margin: 0;
}

.bb-testimonials__sub {
	font-size: 18px;
	color: rgba(255, 255, 255, 0.5);
	margin: 16px auto 0;
	max-width: 600px;
}

/* ---- coverflow (testimonials) ---- */















/* ---- services ---------------------------------------------------- */

.bb-services {
	background: var(--bb-dark);
	padding: 0 0 48px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

@media (min-width: 768px) {
	.bb-services { padding-bottom: 80px; }
}

.bb-services .bb-container { padding-top: 64px; }

@media (min-width: 768px) {
	.bb-services .bb-container { padding-top: 100px; }
}

.bb-services__head .bb-kicker { font-size: 15px; margin-bottom: 16px; }

.bb-services__title {
	font-size: clamp(30px, 4vw, 52px);
	font-weight: 900;
	letter-spacing: -1.5px;
	color: #fff;
	margin: 0 0 16px;
}

.bb-services__platforms {
	display: flex;
	align-items: center;
	gap: 24px;
	margin-bottom: 32px;
	flex-wrap: wrap;
}

.bb-services__platforms img {
	filter: brightness(0) invert(1);
	opacity: 0.4;
	transition: opacity 0.3s ease;
	width: auto;
}

.bb-services__platforms img[alt="YouTube"] { width: 96px; height: 21px; }
.bb-services__platforms img[alt="Google"] { width: 72px; height: 24px; }
.bb-services__platforms img[alt="Meta"] { width: 64px; height: 13px; }
.bb-services__platforms img[alt="TikTok"] { width: 72px; height: 21px; }

.bb-services__platforms img:hover { opacity: 0.8; }

/* ---- ads showcase ------------------------------------------------ */

.bb-ads {
	background: var(--bb-dark);
	padding: 64px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

@media (min-width: 768px) {
	.bb-ads { padding: 100px 0; }
}

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

.bb-ads__title {
	font-size: clamp(28px, 3.5vw, 48px);
	font-weight: 900;
	letter-spacing: -1.5px;
	line-height: 1.05;
	color: #fff;
	margin: 0;
}

.bb-ads__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
}

@media (min-width: 768px) {
	.bb-ads__grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 16px;
	}
}

.bb-ad-card {
	position: relative;
	aspect-ratio: 9 / 16;
	background: var(--bb-dark-soft);
	border-radius: 12px;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.1);
	cursor: pointer;
	transition: border-color 0.3s ease;
}

.bb-ad-card:hover { border-color: rgba(var(--bb-primary-glow), 0.4); }

.bb-ad-card iframe {
	width: 100%;
	height: 100%;
	border: 0;
	pointer-events: none;
}

.bb-ad-card__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.bb-ad-card__scrim {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.1);
	transition: background 0.3s ease;
}

.bb-ad-card:hover .bb-ad-card__scrim { background: rgba(0, 0, 0, 0.4); }

.bb-ad-card__play {
	position: relative;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.9);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 0.3s ease;
	color: var(--bb-primary);
}

.bb-ad-card:hover .bb-ad-card__play { opacity: 1; }

.bb-lightbox {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.9);
}

.bb-lightbox[hidden] { display: none; }

.bb-lightbox__close {
	position: absolute;
	top: 16px;
	left: 16px;
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
	border: none;
	border-radius: 50%;
	padding: 8px;
	cursor: pointer;
	display: flex;
	transition: background 0.2s ease;
}

.bb-lightbox__close:hover { background: rgba(255, 255, 255, 0.2); }

.bb-lightbox__player {
	width: min(420px, 90vw);
	aspect-ratio: 9 / 16;
	max-height: 90vh;
	border-radius: 16px;
	overflow: hidden;
}

.bb-lightbox__player iframe {
	width: 100%;
	height: 100%;
	border: 0;
}

/* ---- fit --------------------------------------------------------- */

.bb-fit {
	background: #fff;
	padding: 32px 0;
	border-bottom: 1px solid var(--bb-border);
}

@media (min-width: 768px) {
	.bb-fit { padding: 64px 0; }
}

.bb-fit__title {
	font-size: clamp(40px, 5.5vw, 72px);
	font-weight: 900;
	line-height: 1.05;
	letter-spacing: -2px;
	margin: 0 0 24px;
}

.bb-fit__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1px;
	background: var(--bb-border);
	border-radius: 16px;
	overflow: hidden;
}

@media (min-width: 768px) {
	.bb-fit__grid { grid-template-columns: 1fr 1fr; }
}

.bb-fit__col { padding: 20px; }

@media (min-width: 768px) {
	.bb-fit__col { padding: 40px; }
}

.bb-fit__col--yes { background: #fff; }
.bb-fit__col--no { background: var(--bb-off-white); }

.bb-fit__no-label {
	font-size: 13px;
	font-weight: 900;
	letter-spacing: 0.1em;
	color: rgba(102, 100, 95, 0.5);
	margin: 0 0 16px;
}

.bb-fit__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.bb-fit__list li {
	position: relative;
	padding-right: 22px;
	font-size: 18px;
	line-height: 1.4;
	margin-bottom: 16px;
}

.bb-fit__list li:last-child { margin-bottom: 0; }

.bb-fit__list li::before {
	content: "";
	position: absolute;
	right: 0;
	top: 9px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
}

.bb-fit__list--yes li {
	font-weight: 500;
	color: var(--bb-fg);
}

.bb-fit__list--yes li::before { background: var(--bb-primary); }

.bb-fit__list--no li { color: var(--bb-muted); }

.bb-fit__list--no li::before { background: rgba(102, 100, 95, 0.25); }

/* ---- about ------------------------------------------------------- */

.bb-about {
	background: var(--bb-dark);
	padding: 48px 0;
}

@media (min-width: 768px) {
	.bb-about { padding: 100px 0; }
}

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

.bb-about__lede {
	font-size: 22px;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.35);
	line-height: 1.6;
	margin: 0 0 24px;
}

@media (min-width: 768px) {
	.bb-about__lede { font-size: 26px; }
}

.bb-about__statement {
	font-size: clamp(34px, 5vw, 58px);
	font-weight: 900;
	line-height: 1.0;
	letter-spacing: -2px;
	color: #fff;
	margin: 0;
}

.bb-about__points {
	list-style: none;
	margin: 48px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}

@media (min-width: 640px) {
	.bb-about__points { grid-template-columns: 1fr 1fr; }
}

.bb-about__points li {
	position: relative;
	padding-right: 20px;
	font-size: 15px;
	color: rgba(255, 255, 255, 0.55);
	line-height: 1.6;
}

.bb-about__points li::before {
	content: "·";
	position: absolute;
	right: 0;
	top: 0;
	color: var(--bb-primary);
	font-weight: 700;
	font-size: 18px;
	line-height: 1.2;
}

.bb-about__team {
	margin-top: 64px;
	padding-top: 40px;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}

@media (min-width: 768px) {
	.bb-about__team { grid-template-columns: 1fr 1fr; }
}

.bb-founder {
	border-radius: 16px;
	border: 1px solid rgba(255, 255, 255, 0.07);
	background: rgba(255, 255, 255, 0.03);
	padding: 28px;
	transition: all 0.3s ease;
}

.bb-founder:hover {
	background: rgba(255, 255, 255, 0.06);
	border-color: rgba(var(--bb-primary-glow), 0.3);
	box-shadow: 0 0 30px rgba(var(--bb-primary-glow), 0.12);
}

.bb-founder__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 20px;
	gap: 12px;
	flex-wrap: wrap;
}

.bb-founder__name {
	font-size: 20px;
	font-weight: 800;
	color: #fff;
	transition: color 0.3s ease;
}

.bb-founder:hover .bb-founder__name { color: var(--bb-primary); }

.bb-founder__role {
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.02em;
	color: rgba(255, 255, 255, 0.35);
	margin-top: 2px;
}

.bb-founder__ig {
	display: flex;
	align-items: center;
	gap: 8px;
	background: rgba(var(--bb-primary-glow), 0.1);
	border-radius: 99px;
	padding: 6px 12px;
	text-decoration: none;
	color: var(--bb-primary);
	transition: background 0.3s ease;
}

.bb-founder__ig:hover { background: rgba(var(--bb-primary-glow), 0.2); }

.bb-founder__ig span {
	font-size: 12px;
	font-weight: 700;
}

.bb-founder__divider {
	width: 32px;
	height: 1px;
	background: rgba(var(--bb-primary-glow), 0.4);
	margin-bottom: 16px;
}

.bb-founder__bio {
	font-size: 14px;
	color: rgba(255, 255, 255, 0.45);
	line-height: 1.75;
	margin: 0;
}

/* ---- contact / cta ----------------------------------------------- */

.bb-cta {
	background: var(--bb-dark);
	padding: 64px 0;
}

@media (min-width: 768px) {
	.bb-cta { padding: 80px 0; }
}

.bb-cta__head {
	margin-bottom: 40px;
	text-align: center;
}

@media (min-width: 768px) {
	.bb-cta__head { margin-bottom: 56px; }
}

/* Centred on the element itself, not only via .bb-cta__head: the generated
   service pages render this block without that wrapper, so the heading was
   hugging the right edge of its 800px box while the form below stayed
   centred, and the two looked misaligned. */
.bb-cta__title {
	font-size: clamp(28px, 5vw, 82px);
	font-weight: 900;
	line-height: 1.0;
	letter-spacing: -3px;
	color: #fff;
	max-width: 800px;
	margin: 0 auto;
	text-align: center;
}

.bb-cta__sub {
	font-size: 18px;
	color: rgba(255, 255, 255, 0.4);
	margin: 24px auto 0;
	max-width: 520px;
	line-height: 1.75;
	text-align: center;
}

.bb-form-wrap {
	max-width: 640px;
	margin-inline: auto;
}

.bb-form__row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}

@media (min-width: 640px) {
	.bb-form__row { grid-template-columns: 1fr 1fr; }
}

.bb-form__input,
.bb-form__textarea {
	width: 100%;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 8px;
	color: #fff;
	font-family: inherit;
	font-size: 16px;
	padding: 14px 16px;
	margin-bottom: 16px;
	outline: none;
	transition: border-color 0.2s ease;
}

.bb-form__row .bb-form__input { margin-bottom: 0; }

.bb-form__row { margin-bottom: 16px; }

/* Force RTL on every field. Browsers give tel/email inputs an LTR bias,
   which left-aligned the "טלפון *" placeholder while its neighbours sat
   right. Digit runs stay LTR inside an RTL field (bidi handles numbers),
   so phone numbers still read correctly. */
.bb-form__input,
.bb-form__textarea {
	direction: rtl;
	text-align: right;
}

.bb-form__input::placeholder,
.bb-form__textarea::placeholder {
	color: rgba(255, 255, 255, 0.25);
	direction: rtl;
	text-align: right;
}

.bb-form__input:focus,
.bb-form__textarea:focus { border-color: rgba(var(--bb-primary-glow), 0.6); }

.bb-form__textarea {
	min-height: 110px;
	resize: vertical;
}

.bb-form__hp {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	opacity: 0;
	pointer-events: none;
}

.bb-form__submit {
	width: 100%;
	height: 56px;
	background: var(--bb-primary);
	color: #fff;
	font-family: inherit;
	font-weight: 700;
	font-size: 17px;
	border: none;
	border-radius: 12px;
	cursor: pointer;
	transition: all 0.25s ease;
	box-shadow: 0 6px 32px rgba(var(--bb-primary-glow), 0.4);
}

.bb-form__submit:hover {
	background: rgba(230, 55, 120, 0.85);
	box-shadow: 0 8px 40px rgba(var(--bb-primary-glow), 0.6);
}

.bb-form__submit:disabled {
	opacity: 0.6;
	cursor: wait;
}

.bb-form__note {
	font-size: 12px;
	color: rgba(255, 255, 255, 0.25);
	text-align: center;
	margin: 12px 0 0;
}

.bb-form__error {
	font-size: 14px;
	color: #ff6b8a;
	text-align: center;
	margin: 12px 0 0;
}

.bb-form__success {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 20px;
	padding: 64px 0;
	color: var(--bb-primary);
}

.bb-form__success[hidden] { display: none; }

.bb-form__success h3 {
	font-size: 32px;
	font-weight: 900;
	color: #fff;
	letter-spacing: -1px;
	margin: 0;
}

.bb-form__success p {
	font-size: 16px;
	color: rgba(255, 255, 255, 0.4);
	margin: 0;
}

/* ---- footer ------------------------------------------------------ */

.bb-footer {
	background: var(--bb-dark);
	border-top: 1px solid rgba(255, 255, 255, 0.07);
	padding: 60px 0 34px;
}

/* Column grid: brand block + three link columns. Collapses 4 → 2.
   It never drops to a single column: the links are right-aligned in RTL, so
   a full-width column leaves most of the row empty and the footer reads as
   a tall strip of dead space. Two columns keep it filled and half as tall. */
.bb-footer__inner {
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: 24px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 30px 20px;
}

/* Three nav columns into a 2-up grid leaves one empty cell, so the last
   one spans the row and lays its own links out two-up. */
@media (max-width: 619px) {
	.bb-footer__col:last-of-type { grid-column: 1 / -1; }
	.bb-footer__col:last-of-type ul {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 11px 20px;
	}
}

@media (min-width: 620px) {
	.bb-footer__inner { grid-template-columns: 1fr 1fr; gap: 36px 28px; }
}

@media (min-width: 960px) {
	.bb-footer__inner {
		grid-template-columns: 1.5fr 1fr 1fr 1fr;
		padding-inline: 48px;
		gap: 40px;
	}
}

.bb-footer__brand { max-width: 320px; }

@media (max-width: 619px) {
	.bb-footer { padding: 40px 0 28px; }
	.bb-footer__brand { grid-column: 1 / -1; max-width: none; }
	.bb-footer__h { margin-bottom: 12px; }
	.bb-footer__col ul { gap: 9px; }
	.bb-footer__col a { font-size: 13.5px; }
}

@media (min-width: 620px) {
	.bb-footer__brand { grid-column: 1 / -1; }
}

@media (min-width: 960px) {
	.bb-footer__brand { grid-column: auto; }
}

.bb-footer__logo {
	font-size: 26px;
	font-weight: 900;
	color: #fff;
	letter-spacing: -0.8px;
	text-decoration: none;
	display: inline-block;
}

.bb-footer__logo-dot { color: var(--bb-primary); }

.bb-footer__tagline {
	font-size: 14px;
	color: rgba(255, 255, 255, 0.4);
	margin: 10px 0 18px;
	line-height: 1.6;
}

.bb-footer__quiz {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13.5px;
	font-weight: 700;
	color: #fff;
	text-decoration: none;
	background: rgba(230, 55, 120, 0.14);
	border: 1px solid rgba(230, 55, 120, 0.5);
	border-radius: 10px;
	padding: 11px 18px;
	transition: background 0.2s ease, border-color 0.2s ease;
}

.bb-footer__quiz:hover {
	background: rgba(230, 55, 120, 0.26);
	border-color: var(--bb-primary);
}

.bb-footer__h {
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.14em;
	color: var(--bb-primary);
	margin: 0 0 16px;
}

.bb-footer__col ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 11px;
}

.bb-footer__col a {
	font-size: 14px;
	color: rgba(255, 255, 255, 0.45);
	text-decoration: none;
	transition: color 0.2s ease;
}

.bb-footer__col a:hover { color: #fff; }

.bb-footer__bottom {
	max-width: 1200px;
	margin: 40px auto 0;
	border-top: 1px solid rgba(255, 255, 255, 0.07);
	padding: 20px 24px 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	text-align: center;
}

@media (min-width: 768px) {
	.bb-footer__bottom {
		flex-direction: row;
		justify-content: space-between;
		padding-inline: 48px;
	}
}

.bb-footer__copy {
	font-size: 12px;
	color: rgba(255, 255, 255, 0.2);
}

.bb-footer__credit {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 11.5px;
	direction: ltr;
}

.bb-footer__credit a {
	color: rgba(255, 255, 255, 0.28);
	text-decoration: none;
	transition: color 0.2s ease;
}

.bb-footer__credit a:hover { color: var(--bb-primary); }

.bb-footer__credit-wa { display: inline-flex; }

/* ---- generic inner pages ----------------------------------------- */

.bb-generic-page {
	padding: 120px 24px 64px;
	max-width: 760px;
	margin-inline: auto;
}

/* ---- blog: index ------------------------------------------------- */

.bb-blog__hero {
	background: var(--bb-dark);
	padding: 140px 0 56px;
}

.bb-blog__title {
	font-size: clamp(40px, 6vw, 76px);
	font-weight: 900;
	line-height: 1.02;
	letter-spacing: -2.5px;
	color: #fff;
	margin: 0;
}

.bb-blog__title em {
	font-style: normal;
	color: var(--bb-primary);
}

.bb-blog__sub {
	font-size: 18px;
	color: rgba(255, 255, 255, 0.5);
	margin: 16px 0 0;
}

.bb-blog__wrap { padding-top: 48px; padding-bottom: 80px; }

.bb-blog__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 28px;
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (min-width: 640px) {
	.bb-blog__grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1024px) {
	.bb-blog__grid { grid-template-columns: 1fr 1fr 1fr; }
}

.bb-post-card {
	border: 1px solid var(--bb-border);
	border-radius: 16px;
	overflow: hidden;
	background: #fff;
	transition: transform 0.25s var(--bb-ease), box-shadow 0.25s var(--bb-ease);
}

.bb-post-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 40px rgba(13, 13, 13, 0.08);
}

.bb-post-card__img { margin: 0; }

.bb-post-card__img img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.bb-post-card__body { padding: 22px 24px 26px; }

.bb-post-card__date {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--bb-primary);
	margin: 0 0 10px;
	display: block;
}

.bb-post-card__title {
	font-size: 21px;
	font-weight: 800;
	letter-spacing: -0.5px;
	line-height: 1.25;
	margin: 0 0 10px;
}

.bb-post-card__title a {
	color: var(--bb-fg);
	text-decoration: none;
	transition: color 0.2s ease;
}

.bb-post-card__title a:hover { color: var(--bb-primary); }

.bb-post-card__excerpt {
	font-size: 15px;
	line-height: 1.7;
	color: var(--bb-muted);
	margin: 0;
}

.bb-post-card__excerpt .wp-block-post-excerpt__more-link {
	display: inline-block;
	margin-top: 10px;
	color: var(--bb-primary);
	font-weight: 700;
	text-decoration: none;
}

.bb-blog__pagination {
	margin-top: 48px;
	font-weight: 700;
}

.bb-blog__pagination a,
.bb-blog__pagination .page-numbers {
	color: var(--bb-muted);
	text-decoration: none;
	padding: 8px 14px;
	border-radius: 8px;
}

.bb-blog__pagination a:hover { color: var(--bb-primary); }

.bb-blog__pagination .current {
	background: var(--bb-primary);
	color: #fff;
}

/* ---- blog: single post ------------------------------------------- */

.bb-single__hero {
	background: var(--bb-dark);
	padding: 130px 0 48px;
}

.bb-single__back { margin: 0 0 24px; }

.bb-single__back a {
	color: rgba(255, 255, 255, 0.45);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: color 0.2s ease;
}

.bb-single__back a:hover { color: #fff; }

.bb-single__title {
	font-size: clamp(32px, 5vw, 58px);
	font-weight: 900;
	line-height: 1.08;
	letter-spacing: -2px;
	color: #fff;
	margin: 0;
}

.bb-single__meta { margin-top: 18px; }

.bb-single__date {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--bb-primary);
}

.bb-single__body { padding-top: 40px; padding-bottom: 24px; }

.bb-single__cover { margin: 0 0 36px; }

.bb-single__cover img {
	display: block;
	width: 100%;
	border-radius: 16px;
}

/* post content typography — applies automatically to every post */
.bb-single__body .wp-block-post-content {
	font-size: 17.5px;
	line-height: 1.85;
	color: #2b2a28;
}

.bb-single__body .wp-block-post-content > * { margin-block: 0 0 22px; }

.bb-single__body .bb-post-lede {
	font-size: 21px;
	font-weight: 500;
	line-height: 1.7;
	color: var(--bb-fg);
}

.bb-single__body h2 {
	font-size: clamp(24px, 3vw, 32px);
	font-weight: 900;
	letter-spacing: -1px;
	line-height: 1.2;
	color: var(--bb-fg);
	margin: 40px 0 16px;
	padding-right: 16px;
	border-right: 4px solid var(--bb-primary);
}

.bb-single__body h3 {
	font-size: 21px;
	font-weight: 800;
	letter-spacing: -0.5px;
	color: var(--bb-fg);
	margin: 30px 0 12px;
}

.bb-single__body ul,
.bb-single__body ol { padding-right: 22px; }

.bb-single__body li { margin-bottom: 8px; }

.bb-single__body li::marker { color: var(--bb-primary); font-weight: 700; }

.bb-single__body a { color: var(--bb-primary); }

.bb-single__body img { border-radius: 14px; }

.bb-single__body figcaption {
	font-size: 13px;
	color: var(--bb-muted);
	text-align: center;
	margin-top: 8px;
}

.bb-single__body blockquote {
	margin: 32px 0;
	padding: 22px 26px;
	background: var(--bb-secondary);
	border-right: 4px solid var(--bb-primary);
	border-radius: 12px;
}

.bb-single__body blockquote p {
	font-size: 19px;
	font-weight: 600;
	line-height: 1.6;
	color: var(--bb-fg);
	margin: 0;
}

.bb-single__body .wp-block-gallery { gap: 12px; }

.bb-single__body .alignwide,
.bb-single__body .bb-img-wide {
	margin-inline: calc(50% - 50vw);
	width: 100vw;
	max-width: min(100vw, 1200px);
	margin-inline: auto;
	transform: translateX(0);
}

@media (min-width: 820px) {
	.bb-single__body .alignwide img { border-radius: 16px; }
}

.bb-single__cta {
	background: var(--bb-dark);
	padding: 64px 0;
	margin-top: 48px;
	text-align: center;
}

.bb-single__cta-title {
	font-size: clamp(28px, 4vw, 46px);
	font-weight: 900;
	letter-spacing: -1.5px;
	color: #fff;
	margin: 0;
}

.bb-single__cta-title em {
	font-style: normal;
	color: var(--bb-primary);
}

.bb-single__cta-sub {
	color: rgba(255, 255, 255, 0.5);
	font-size: 17px;
	margin: 14px 0 26px;
}

/* ---- FAQ --------------------------------------------------------- */

.bb-faq {
	background: #fff;
	padding: 48px 0;
	border-bottom: 1px solid var(--bb-border);
}

@media (min-width: 768px) {
	.bb-faq { padding: 80px 0; }
}

.bb-faq__title {
	font-size: clamp(30px, 4.5vw, 56px);
	font-weight: 900;
	line-height: 1.05;
	letter-spacing: -2px;
	color: var(--bb-fg);
	margin: 0 0 28px;
}

.bb-faq__title em { font-style: normal; color: var(--bb-primary); }

.bb-faq__list { display: block; }

.bb-faq__item {
	border-bottom: 1px solid var(--bb-border);
	padding: 4px 0;
}

.bb-faq__q {
	font-size: 18px;
	font-weight: 700;
	color: var(--bb-fg);
	padding: 20px 34px 20px 0;
	cursor: pointer;
	list-style: none;
	position: relative;
	transition: color 0.2s ease;
}

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

.bb-faq__q::before {
	content: "+";
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	font-size: 26px;
	font-weight: 400;
	color: var(--bb-primary);
	transition: transform 0.25s ease;
	line-height: 1;
}

.bb-faq__item[open] .bb-faq__q { color: var(--bb-primary); }
.bb-faq__item[open] .bb-faq__q::before { content: "−"; }

.bb-faq__a {
	font-size: 16px;
	line-height: 1.75;
	color: var(--bb-muted);
	padding: 0 0 22px;
	max-width: 620px;
}

/* ---- content pages (services / about / contact / results) -------- */

.bb-pg-hero {
	background: var(--bb-dark);
	color: #fff;
	padding: 84px 0 56px;
	position: relative;
	overflow: hidden;
}

.bb-pg-hero__orb {
	position: absolute;
	top: -140px;
	left: 8%;
	width: 460px;
	height: 460px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(var(--bb-primary-glow), 0.14) 0%, transparent 65%);
	pointer-events: none;
}

.bb-pg-hero__kicker {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--bb-primary);
	margin: 0 0 16px;
	position: relative;
}

.bb-pg-hero__title {
	font-size: clamp(38px, 6vw, 74px);
	font-weight: 900;
	line-height: 1.02;
	letter-spacing: -2.5px;
	margin: 0;
	position: relative;
}

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

.bb-pg-hero__sub {
	font-size: 19px;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.55);
	max-width: 620px;
	margin: 22px 0 32px;
	position: relative;
}

.bb-pg-hero__actions { position: relative; display: flex; gap: 12px; flex-wrap: wrap; }

.bb-pg-section {
	padding: 56px 0;
	border-bottom: 1px solid var(--bb-border);
}

.bb-pg-section--dark {
	background: var(--bb-dark);
	color: #fff;
	border-bottom-color: rgba(255, 255, 255, 0.06);
}

@media (min-width: 768px) { .bb-pg-section { padding: 80px 0; } }

.bb-pg-h2 {
	font-size: clamp(28px, 4vw, 46px);
	font-weight: 900;
	letter-spacing: -1.5px;
	line-height: 1.1;
	margin: 0 0 20px;
	color: var(--bb-fg);
}

.bb-pg-section--dark .bb-pg-h2 { color: #fff; }
.bb-pg-h2 em { font-style: normal; color: var(--bb-primary); }

.bb-pg-lead {
	font-size: 19px;
	line-height: 1.8;
	color: var(--bb-muted);
	max-width: 680px;
	margin: 0 0 12px;
}

.bb-pg-section--dark .bb-pg-lead { color: rgba(255, 255, 255, 0.55); }

.bb-pg-list {
	list-style: none;
	margin: 24px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
	max-width: 720px;
}

@media (min-width: 640px) { .bb-pg-list { grid-template-columns: 1fr 1fr; } }

.bb-pg-list li {
	position: relative;
	padding-right: 34px;
	font-size: 16.5px;
	line-height: 1.55;
	color: var(--bb-fg);
}

.bb-pg-section--dark .bb-pg-list li { color: rgba(255, 255, 255, 0.8); }

.bb-pg-list li::before {
	content: "";
	position: absolute;
	right: 0;
	top: 2px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--bb-primary);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/14px no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/14px no-repeat;
}

/* numbered process steps */
.bb-pg-steps {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
	margin-top: 28px;
}

@media (min-width: 768px) { .bb-pg-steps { grid-template-columns: repeat(2, 1fr); } }

.bb-pg-step {
	background: var(--bb-secondary);
	border-radius: 14px;
	padding: 24px;
}

.bb-pg-section--dark .bb-pg-step { background: var(--bb-dark-card); }

.bb-pg-step__num {
	font-size: 13px;
	font-weight: 900;
	color: var(--bb-primary);
	letter-spacing: 0.1em;
	margin-bottom: 10px;
}

.bb-pg-step__title { font-size: 19px; font-weight: 800; margin-bottom: 8px; color: var(--bb-fg); }
.bb-pg-section--dark .bb-pg-step__title { color: #fff; }
.bb-pg-step__body { font-size: 15px; line-height: 1.6; color: var(--bb-muted); }

/* service hub cards */
.bb-pg-svc-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
	margin-top: 28px;
}

@media (min-width: 700px) { .bb-pg-svc-grid { grid-template-columns: 1fr 1fr; } }

.bb-pg-svc {
	display: block;
	background: var(--bb-dark-card);
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-radius: 16px;
	padding: 28px;
	text-decoration: none;
	transition: border-color 0.2s ease, transform 0.2s ease;
}

.bb-pg-svc:hover { border-color: rgba(var(--bb-primary-glow), 0.5); transform: translateY(-3px); }
.bb-pg-svc__num { font-size: 12px; font-weight: 900; color: var(--bb-primary); letter-spacing: 0.14em; margin-bottom: 12px; }
.bb-pg-svc__title { font-size: 22px; font-weight: 800; color: #fff; margin-bottom: 8px; }
.bb-pg-svc__desc { font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, 0.5); margin-bottom: 14px; }
.bb-pg-svc__link { font-size: 14px; font-weight: 700; color: var(--bb-primary); }

/* case study cards */
.bb-pg-cases { display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: 28px; }
@media (min-width: 900px) { .bb-pg-cases { grid-template-columns: repeat(3, 1fr); } }

.bb-pg-case {
	background: #fff;
	border: 1px solid var(--bb-border);
	border-radius: 16px;
	padding: 26px;
}

.bb-pg-case__tag { font-size: 12px; font-weight: 700; color: var(--bb-primary); margin-bottom: 12px; }
.bb-pg-case__metric { font-size: 40px; font-weight: 900; letter-spacing: -2px; color: var(--bb-fg); line-height: 1; }
.bb-pg-case__label { font-size: 14px; color: var(--bb-muted); margin: 6px 0 16px; }
.bb-pg-case__desc { font-size: 15px; line-height: 1.65; color: #444; }

/* mid-page CTA band */
.bb-pg-cta {
	background: var(--bb-dark);
	color: #fff;
	padding: 56px 0;
	text-align: center;
}

.bb-pg-cta__title {
	font-size: clamp(26px, 4vw, 44px);
	font-weight: 900;
	letter-spacing: -1.5px;
	margin: 0 0 10px;
}

.bb-pg-cta__title em { font-style: normal; color: var(--bb-primary); }
.bb-pg-cta__sub { color: rgba(255, 255, 255, 0.5); font-size: 17px; margin: 0 0 24px; }

/* testimonials grid */
.bb-pg-vids { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 28px; }
@media (min-width: 640px) { .bb-pg-vids { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .bb-pg-vids { grid-template-columns: repeat(3, 1fr); } }

.bb-pg-vid {
	border-radius: 14px;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.1);
	background: #000;
	aspect-ratio: 9 / 16;
}

.bb-pg-vid iframe { width: 100%; height: 100%; border: 0; display: block; }

/* contact methods */
.bb-pg-contact-grid { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 26px; }
@media (min-width: 700px) { .bb-pg-contact-grid { grid-template-columns: repeat(3, 1fr); } }

.bb-pg-contact-card {
	background: var(--bb-dark-card);
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-radius: 14px;
	padding: 24px;
	text-decoration: none;
	display: block;
	transition: border-color 0.2s ease;
}

.bb-pg-contact-card:hover { border-color: rgba(var(--bb-primary-glow), 0.5); }
.bb-pg-contact-card__label { font-size: 13px; color: rgba(255, 255, 255, 0.45); margin-bottom: 6px; }
.bb-pg-contact-card__value { font-size: 18px; font-weight: 800; color: #fff; }

/* ---- sticky CTA bar ---------------------------------------------- */

.bb-sticky-cta {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 9995;
	/* Same reason as the navbar: a fixed full-width blur repaints on every
	   scroll frame, and at 97% opacity it was never visible. */
	background: rgba(13, 13, 13, 0.98);
	border-top: 1px solid rgba(230, 55, 120, 0.4);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	padding: 12px 20px;
	box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.3);
	animation: bb-sticky-up 0.3s var(--bb-ease);
}

.bb-sticky-cta[hidden] { display: none; }

.bb-sticky-cta__text {
	color: #fff;
	font-size: 15px;
	font-weight: 700;
}

@media (max-width: 560px) {
	.bb-sticky-cta__text { display: none; }
	.bb-sticky-cta__btn { flex: 1; text-align: center; }
}

.bb-sticky-cta__btn {
	background: var(--bb-primary);
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
	padding: 11px 26px;
	border-radius: 9px;
	transition: filter 0.2s ease;
}

.bb-sticky-cta__btn:hover { filter: brightness(1.1); }

.bb-sticky-cta__wa {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #25D366;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

/* raise the corner floats above the sticky bar while it's showing */
.bb-sticky-on .bb-a11y-toggle,
.bb-sticky-on .bb-wa-float { bottom: 86px; }

@keyframes bb-sticky-up {
	from { transform: translateY(100%); }
	to { transform: translateY(0); }
}

/* ---- floating WhatsApp ------------------------------------------- */

.bb-wa-float {
	position: fixed;
	bottom: 22px;
	left: 84px;
	z-index: 9996;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #25D366;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 6px 22px rgba(37, 211, 102, 0.45);
	transition: transform 0.2s ease;
	animation: bb-wa-pulse 2.6s ease-in-out infinite;
}

.bb-wa-float:hover { transform: scale(1.08); }

@keyframes bb-wa-pulse {
	0%, 100% { box-shadow: 0 6px 22px rgba(37, 211, 102, 0.45); }
	50% { box-shadow: 0 6px 22px rgba(37, 211, 102, 0.45), 0 0 0 12px rgba(37, 211, 102, 0.12); }
}

/* ---- exit-intent popup ------------------------------------------- */

.bb-exit {
	position: fixed;
	inset: 0;
	z-index: 10000;
	background: rgba(0, 0, 0, 0.72);
	backdrop-filter: blur(4px);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	animation: bb-fade-in 0.25s ease;
}

.bb-exit[hidden] { display: none; }

.bb-exit__box {
	position: relative;
	background: var(--bb-dark);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 20px;
	max-width: 440px;
	width: 100%;
	padding: 40px 32px 32px;
	text-align: center;
}

.bb-exit__close {
	position: absolute;
	top: 14px;
	left: 14px;
	background: rgba(255, 255, 255, 0.08);
	border: none;
	color: #fff;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	cursor: pointer;
	font-size: 15px;
}

.bb-exit__close:hover { background: rgba(255, 255, 255, 0.16); }

.bb-exit__title {
	font-size: 27px;
	font-weight: 900;
	letter-spacing: -1px;
	color: #fff;
	margin: 0 0 12px;
}

.bb-exit__sub {
	font-size: 15.5px;
	color: rgba(255, 255, 255, 0.5);
	line-height: 1.6;
	margin: 0 0 22px;
}

.bb-exit__input {
	width: 100%;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 9px;
	color: #fff;
	font-family: inherit;
	font-size: 16px;
	padding: 13px 15px;
	margin-bottom: 12px;
	outline: none;
	box-sizing: border-box;
}

.bb-exit__input:focus { border-color: rgba(230, 55, 120, 0.6); }
.bb-exit__input::placeholder { color: rgba(255, 255, 255, 0.28); }

.bb-exit__submit {
	width: 100%;
	background: var(--bb-primary);
	color: #fff;
	border: none;
	border-radius: 11px;
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	padding: 15px;
	cursor: pointer;
	box-shadow: 0 6px 26px rgba(230, 55, 120, 0.4);
	transition: filter 0.2s ease;
}

.bb-exit__submit:hover { filter: brightness(1.1); }

.bb-exit__done {
	color: #fff;
	font-size: 19px;
	font-weight: 700;
	padding: 20px 0;
}

.bb-exit__done[hidden] { display: none; }

/* ---- keyframes --------------------------------------------------- */

@keyframes bb-blink-dot {
	0%, 100% { opacity: 1; transform: scale(1); }
	50% { opacity: 0.3; transform: scale(1.6); }
}

@keyframes bb-float-orb-1 {
	0%, 100% { transform: translateY(0) scale(1); }
	50% { transform: translateY(40px) scale(1.1); }
}

@keyframes bb-float-orb-2 {
	0%, 100% { transform: translateY(0) scale(1); }
	50% { transform: translateY(-30px) scale(0.95); }
}

@keyframes bb-fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

/* =====================================================================
   Work / case-study grid — ported from the /mockup/ direction.
   Dark editorial band, 2×2 vertical-video cases with a headline metric.
   ===================================================================== */
.bb-work { background: var(--bb-dark); color: #fff; padding: 100px 0 80px; }
.bb-work__head { margin-bottom: 46px; }
.bb-work .bb-kicker { color: var(--bb-primary); }
.bb-work__title {
	font-size: clamp(34px, 6vw, 74px);
	font-weight: 900;
	line-height: 1.04;
	letter-spacing: -2px;
	margin: 10px 0 0;
	color: #fff;
}
.bb-work__title em { font-style: normal; color: var(--bb-primary); }

.bb-work__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1px;
	background: rgba(255,255,255,0.12);
	border: 1px solid rgba(255,255,255,0.12);
	max-width: 1180px;
	margin: 0 auto 10px;
}
@media (min-width: 760px) { .bb-work__grid { grid-template-columns: 1fr 1fr; } }

.bb-case {
	background: var(--bb-dark);
	display: grid;
	grid-template-columns: 118px 1fr;
	gap: 22px;
	padding: 26px 28px;
	align-items: center;
	transition: background 0.3s var(--bb-ease);
}
@media (min-width: 900px) { .bb-case { padding: 30px 42px; grid-template-columns: 132px 1fr; } }
.bb-case:hover { background: var(--bb-dark-card); }

.bb-case__media { position: relative; aspect-ratio: 9 / 16; overflow: hidden; background: #000; border-radius: 4px; }
.bb-case__media iframe { width: 100%; height: 100%; border: 0; display: block; }
.bb-case__num {
	position: absolute; top: 8px; right: 8px;
	font-size: 11px; font-weight: 700; color: #fff;
	background: rgba(0,0,0,0.6); padding: 2px 7px; border-radius: 3px;
}

.bb-case__client { font-size: 12px; letter-spacing: 0.16em; color: var(--bb-primary); margin: 0 0 8px; font-weight: 700; }
.bb-case__title { font-size: clamp(21px, 2.6vw, 31px); font-weight: 800; margin: 0 0 8px; color: #fff; line-height: 1.15; }
.bb-case__sub { font-size: 14.5px; color: rgba(255,255,255,0.45); margin: 0 0 18px; line-height: 1.5; }
.bb-case__metric { display: flex; align-items: baseline; gap: 10px; }
.bb-case__metric-big { font-size: clamp(30px, 4vw, 46px); font-weight: 900; color: var(--bb-primary); }
.bb-case__metric-label { font-size: 13px; color: rgba(255,255,255,0.5); }

.bb-work__note {
	font-size: 13px; color: rgba(255,255,255,0.4);
	margin: 26px 0 0; padding-top: 16px;
	border-top: 1px solid rgba(255,255,255,0.14);
}

/* =====================================================================
   Instagram — founders "walk the talk"
   ===================================================================== */
.bb-ig { background: var(--bb-off-white); padding: 96px 0; }
.bb-ig__head { text-align: center; margin-bottom: 46px; }
.bb-ig__title { font-size: clamp(30px, 5vw, 56px); font-weight: 900; letter-spacing: -1.5px; margin: 12px 0 0; color: var(--bb-fg); }
.bb-ig__title em { font-style: normal; color: var(--bb-primary); }
.bb-ig__sub { color: var(--bb-muted); font-size: 17px; margin: 14px auto 0; max-width: 520px; }
.bb-ig__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 760px; margin-inline: auto; }
@media (max-width: 640px) { .bb-ig__grid { grid-template-columns: 1fr; } }
.bb-ig__card { background: #fff; border: 1px solid var(--bb-border); border-radius: 18px; padding: 32px 24px; text-align: center; transition: transform 0.2s var(--bb-ease), box-shadow 0.2s var(--bb-ease); }
.bb-ig__card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(13, 13, 13, 0.08); }
.bb-ig__avatar { width: 92px; height: 92px; margin: 0 auto 16px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 38px; font-weight: 900; background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }
.bb-ig__name { font-size: 20px; font-weight: 800; color: var(--bb-fg); }
.bb-ig__role { font-size: 14px; color: var(--bb-muted); margin-top: 2px; }
.bb-ig__stat { font-size: 14px; color: var(--bb-muted); margin: 12px 0 18px; }
.bb-ig__stat strong { color: var(--bb-fg); font-size: 18px; font-weight: 800; }
.bb-ig__btn { display: inline-block; background: var(--bb-dark); color: #fff; text-decoration: none; font-weight: 700; font-size: 14px; padding: 11px 22px; border-radius: 999px; transition: background 0.2s ease; }
.bb-ig__btn:hover { background: var(--bb-primary); }

/* =====================================================================
   Platforms reach strip
   ===================================================================== */
.bb-platforms { background: var(--bb-secondary); padding: 72px 0; border-block: 1px solid var(--bb-border); }
.bb-platforms .bb-container { text-align: center; }
.bb-plat__title { font-size: clamp(26px, 4vw, 44px); font-weight: 900; letter-spacing: -1px; margin: 10px 0 40px; color: var(--bb-fg); }
.bb-plat__title em { font-style: normal; color: var(--bb-primary); }
.bb-plat__strip { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 44px; }
.bb-plat__item { height: 34px; display: flex; align-items: center; opacity: 0.55; filter: grayscale(1); transition: opacity 0.2s ease, filter 0.2s ease; }
.bb-plat__item:hover { opacity: 1; filter: none; }
.bb-plat__item img { height: 100%; width: auto; display: block; }
.bb-plat__item--txt { font-size: 24px; font-weight: 800; color: var(--bb-fg); letter-spacing: -0.5px; }
@media (max-width: 640px) { .bb-plat__strip { gap: 28px; } .bb-plat__item { height: 26px; } .bb-plat__item--txt { font-size: 19px; } }

/* work-grid local video media */
.bb-case__media video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* founder photos in the about section */
.bb-founder__photo { width: 100%; aspect-ratio: 4 / 5; max-height: 360px; border-radius: 14px; overflow: hidden; margin-bottom: 18px; background: var(--bb-secondary); }
.bb-founder__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; display: block; }

/* Taboola/Outbrain wordmarks in the services platform row (no vector logos) */
.bb-services__plat-txt { color: #fff; opacity: 0.4; font-size: 20px; font-weight: 800; letter-spacing: -0.4px; transition: opacity 0.3s ease; }
.bb-services__plat-txt:hover { opacity: 0.8; }

/* =====================================================================
   Platform ticker — infinite marquee, real brand colours, LTR track.
   ===================================================================== */
.bb-marquee {
	position: relative;
	overflow: hidden;
	margin: 26px 0 34px;
	direction: ltr;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.bb-marquee__track {
	display: flex;
	width: max-content;
	animation: bb-marq-scroll 34s linear infinite;
	will-change: transform;
}
.bb-marquee:hover .bb-marquee__track { animation-play-state: paused; }
.bb-marquee__group { display: flex; align-items: center; flex-shrink: 0; }
.bb-marq__item {
	font-size: clamp(20px, 2.4vw, 30px);
	font-weight: 800;
	letter-spacing: -0.5px;
	padding: 0 22px;
	white-space: nowrap;
	line-height: 1.4;
}
.bb-marq__sep {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--bb-primary);
	opacity: 0.55;
	flex-shrink: 0;
}
@keyframes bb-marq-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .bb-marquee__track { animation: none; } }



/* =====================================================================
   Founders cinematic stage (home, desktop). Built by JS and appended to
   section.bb-about — never inside .bb-container--narrow, whose leftover
   reveal transform would break ScrollTrigger's pin.
   ===================================================================== */
.bb-cine {
	display: grid;
	place-items: center;
	min-height: 100vh;
}
.bb-cine__stack {
	display: grid !important;
	grid-template-columns: 1fr !important;
	width: min(380px, 90vw);
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	gap: 0 !important;
}
.bb-cine__stack > .bb-founder {
	grid-area: 1 / 1;
	will-change: transform, opacity;
	background: rgba(255, 255, 255, 0.04);
}

/* =====================================================================
   Founder cards as Instagram phone mock-ups
   ===================================================================== */
.bb-about__team { max-width: 1100px; margin-inline: auto; padding-inline: 24px; }
.bb-about__team .bb-founder {
	border: 0;
	background: transparent;
	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
}

.bb-phone {
	width: 300px;
	height: 608px;
	border-radius: 42px;
	background: #101012;
	border: 8px solid #1c1c1e;
	box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.06);
	position: relative;
	overflow: hidden;
	flex-shrink: 0;
}
.bb-phone::before {
	content: "";
	position: absolute;
	top: 8px; left: 50%;
	transform: translateX(-50%);
	width: 96px; height: 20px;
	background: #1c1c1e;
	border-radius: 0 0 14px 14px;
	z-index: 6;
}
.bb-phone__screen {
	height: 100%;
	background: #000;
	color: #fff;
	display: flex;
	flex-direction: column;
	font-size: 11px;
	line-height: 1.45;
	overflow: hidden;
	border-radius: 34px;
}

.bb-ig-top {
	display: flex; align-items: center; justify-content: space-between;
	padding: 30px 14px 10px;
	font-size: 13px; font-weight: 700;
	border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}
.bb-ig-back { color: rgba(255,255,255,0.85); font-size: 18px; line-height: 1; }
.bb-ig-handle { letter-spacing: -0.2px; }

.bb-ig-head { display: flex; align-items: center; gap: 14px; padding: 14px 14px 8px; }
.bb-ig-avatar {
	width: 64px; height: 64px; border-radius: 50%; flex-shrink: 0;
	padding: 2px;
	background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
	display: block;
}
.bb-ig-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: center; border: 2px solid #000; display: block; }
.bb-ig-stats { flex: 1; display: flex; justify-content: space-around; text-align: center; }
.bb-ig-stat b { display: block; font-size: 14px; font-weight: 800; letter-spacing: -0.3px; }
.bb-ig-stat span { font-size: 10px; color: rgba(255, 255, 255, 0.55); }

.bb-ig-bio { padding: 2px 14px 10px; display: flex; flex-direction: column; gap: 1px; font-size: 10.5px; color: rgba(255,255,255,0.8); }
.bb-ig-name { font-size: 12px; font-weight: 800; color: #fff; display: flex; align-items: center; gap: 4px; }
.bb-ig-verified { flex-shrink: 0; }
.bb-ig-strong { color: #fff; font-weight: 700; }
.bb-ig-link { color: #4a9eff; text-decoration: none; font-weight: 600; }

.bb-ig-actions { display: flex; gap: 6px; padding: 2px 14px 12px; }
.bb-ig-btn {
	flex: 1; text-align: center; padding: 7px 0;
	border-radius: 9px; background: #262626; color: #fff;
	font-size: 11.5px; font-weight: 700; text-decoration: none;
}
.bb-ig-btn--follow { background: #0095F6; }

/* Story-highlights row — real covers (Shemi) or brand-icon covers (Ariel). */
.bb-ig-hls {
	display: flex;
	gap: 10px;
	padding: 0 14px 10px;
	overflow: hidden;
	flex-shrink: 0; /* the screen is a fixed-height flex column — never squash this row */
}
.bb-ig-hl { display: flex; flex-direction: column; align-items: center; gap: 3px; flex-shrink: 0; width: 48px; }
.bb-ig-hl__ring {
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.25);
	padding: 2px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #101012;
	overflow: hidden;
}
.bb-ig-hl__ring img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.bb-ig-hl__label {
	font-size: 7.5px;
	color: rgba(255, 255, 255, 0.75);
	max-width: 48px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.bb-ig-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.bb-ig-tile { aspect-ratio: 1 / 1; overflow: hidden; background: #141414; }
.bb-ig-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }

.bb-founder__meta { text-align: center; }
.bb-about__team .bb-founder__name { font-size: 19px; font-weight: 800; color: #fff; }
.bb-about__team .bb-founder__role { font-size: 13px; color: rgba(255, 255, 255, 0.55); margin-top: 2px; }

@media (max-width: 900px) {
	.bb-about__team { display: grid; grid-template-columns: 1fr; gap: 44px; justify-items: center; }
}

/* =====================================================================
   Founder scene wings — editorial text (right) + styled photos (left).
   Rendered only inside the cinematic stage; hidden in the mobile/static
   fallback where the phone cards stand alone.
   ===================================================================== */
.bb-founder__txt, .bb-founder__pics { display: none; }

.bb-cine__stack { width: min(1240px, 94vw); }
.bb-cine__stack > .bb-founder {
	display: grid;
	grid-template-columns: 1fr 320px 1fr;
	align-items: center;
	gap: 48px;
}
.bb-cine__stack > .bb-founder .bb-phone { justify-self: center; }
.bb-cine__stack > .bb-founder .bb-founder__txt { display: block; }
.bb-cine__stack > .bb-founder .bb-founder__pics { display: block; }
.bb-cine__stack > .bb-founder:has(.bb-founder__txt) .bb-founder__meta { display: none; }
.bb-cine__stack > .bb-founder .bb-founder__meta { grid-column: 2; }

.bb-founder__kicker {
	font-size: 12px; font-weight: 700; letter-spacing: 0.18em;
	color: var(--bb-primary); margin: 0 0 14px;
}
.bb-founder__big {
	font-size: clamp(40px, 4.6vw, 72px);
	font-weight: 900; line-height: 1.02; letter-spacing: -2px;
	color: #fff; margin: 0;
}
.bb-founder__big em { font-style: normal; color: var(--bb-primary); }
.bb-founder__subrole { color: rgba(255,255,255,0.55); font-size: 16px; font-weight: 600; margin: 10px 0 22px; }
.bb-founder__lines p { color: rgba(255,255,255,0.78); font-size: 16.5px; line-height: 1.65; margin: 0 0 6px; }
.bb-founder__quote {
	margin: 26px 0 0; padding-right: 16px;
	border-right: 3px solid var(--bb-primary);
	color: #fff; font-size: 19px; font-weight: 800;
}

.bb-founder__pics { position: relative; height: 480px; }
.bb-founder__pic {
	position: absolute; width: 62%; border-radius: 16px; overflow: hidden;
	box-shadow: 0 24px 55px rgba(0, 0, 0, 0.5);
}
.bb-founder__pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bb-founder__pic--1 {
	aspect-ratio: 3 / 4;
	border: 1px solid rgba(255, 255, 255, 0.12);
}
.bb-founder__pic--2 {
	bottom: 0; left: 2%; aspect-ratio: 3 / 4;
	transform: rotate(-5deg);
	border: 2px solid var(--bb-primary);
	z-index: 2;
}

@media (max-width: 1100px) {
	.bb-cine__stack { width: min(380px, 90vw); }
	.bb-cine__stack > .bb-founder { display: flex; flex-direction: column; }
	.bb-cine__stack > .bb-founder .bb-founder__txt,
	.bb-cine__stack > .bb-founder .bb-founder__pics { display: none; }
}

/* Pin the phone to the middle column even when a founder has no side wings —
   otherwise grid auto-placement drops it into column 1 and the closing
   split-apart offsets cancel out. */
.bb-cine__stack > .bb-founder .bb-phone { grid-column: 2; grid-row: 1; }
.bb-cine__stack > .bb-founder .bb-founder__txt { grid-column: 3; grid-row: 1; }
.bb-cine__stack > .bb-founder .bb-founder__pics { grid-column: 1; grid-row: 1; }

/* =====================================================================
   Mobile / static founder scene — wings are visible here too (no pinned
   stage on touch), stacked vertically: text, phone, photos, name.
   ===================================================================== */
@media (max-width: 899px) {
	.bb-about__team .bb-founder__txt,
	.bb-about__team .bb-founder__pics { display: block; }

	.bb-about__team > .bb-founder {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 30px;
	}
	.bb-about__team .bb-founder__txt { width: 100%; max-width: 460px; }
	.bb-founder__big { font-size: clamp(32px, 9vw, 46px); }
	.bb-founder__subrole { font-size: 15px; margin: 8px 0 16px; }
	.bb-founder__lines p { font-size: 15.5px; }
	.bb-founder__quote { font-size: 17px; margin-top: 20px; }

	.bb-about__team .bb-founder__pics {
		position: relative;
		height: 300px;
		width: min(400px, 88vw);
	}
	.bb-founder__pic { width: 58%; }
	.bb-founder__pic--1 { top: 0; right: 2%; }
	.bb-founder__pic--2 { bottom: 0; left: 0; }
}

/* Mobile hardening: container-relative widths only (no vw), tighter padding,
   and a smaller phone on very narrow screens so nothing can overflow. */
@media (max-width: 899px) {
	.bb-about__team { padding-inline: 16px; }
	.bb-about__team .bb-founder__pics { width: 100%; max-width: 400px; }
	.bb-about__team .bb-founder__txt { max-width: 100%; }
	.bb-phone { max-width: 100%; }
}
@media (max-width: 380px) {
	.bb-phone { width: 264px; height: 536px; border-width: 6px; }
	.bb-about__team .bb-founder__pics { height: 260px; }
}

/* =====================================================================
   Mini ad mock-ups inside the service cards — a small, "cute" proof of
   what each service actually produces, captioned with campaign type +
   platform. Pure CSS/HTML, no screenshots of real ad UIs.
   ===================================================================== */
.bb-admock { margin-top: 22px; }
.bb-admock__win {
	background: #141416;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 12px;
	overflow: hidden;
	max-width: 300px;
}

/* --- Meta feed ad --- */
.bb-admock__head { display: flex; align-items: center; gap: 8px; padding: 9px 10px; }
.bb-admock__ava {
	width: 26px; height: 26px; border-radius: 50%;
	background: var(--bb-dark); color: #fff;
	display: grid; place-items: center;
	font-size: 13px; font-weight: 900;
	border: 1px solid rgba(255,255,255,0.18);
}
.bb-admock__who { display: flex; flex-direction: column; line-height: 1.25; }
.bb-admock__who b { font-size: 12px; font-weight: 800; color: #fff; }
.bb-admock__who b i { color: var(--bb-primary); font-style: normal; }
.bb-admock__who em { font-size: 10px; font-style: normal; color: rgba(255,255,255,0.45); }
.bb-admock__img { aspect-ratio: 16 / 10; background: #000; }
.bb-admock__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bb-admock__foot {
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	padding: 9px 10px; background: rgba(255,255,255,0.04);
}
.bb-admock__copy { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.bb-admock__copy b { font-size: 11.5px; font-weight: 800; color: #fff; }
.bb-admock__copy i { font-size: 9.5px; font-style: normal; color: rgba(255,255,255,0.4); }
.bb-admock__cta {
	flex-shrink: 0; font-size: 10.5px; font-weight: 800; color: #fff;
	background: #0866FF; padding: 6px 11px; border-radius: 7px;
}

/* --- Reels / TikTok pair --- */
.bb-admock__reels { display: flex; gap: 8px; max-width: 300px; }
.bb-admock__reel {
	position: relative; flex: 1; aspect-ratio: 9 / 16; max-height: 190px;
	border-radius: 11px; overflow: hidden; background: #000;
	border: 1px solid rgba(255,255,255,0.1);
}
.bb-admock__reel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bb-admock__play {
	position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
	width: 0; height: 0; border-style: solid;
	border-width: 8px 0 8px 13px;
	border-color: transparent transparent transparent rgba(255,255,255,0.92);
	filter: drop-shadow(0 2px 6px rgba(0,0,0,0.6));
}
.bb-admock__tag {
	position: absolute; top: 7px; right: 7px;
	font-size: 9px; font-weight: 700; color: #fff;
	background: rgba(0,0,0,0.6); padding: 2px 6px; border-radius: 4px;
}

/* --- Google search ad --- */
.bb-admock__win--serp { display: flex; flex-direction: column; gap: 3px; padding: 12px 13px; }
.bb-serp__tag {
	align-self: flex-start; font-size: 9.5px; font-weight: 800; color: #fff;
	border: 1px solid rgba(255,255,255,0.3); border-radius: 4px; padding: 1px 6px; margin-bottom: 4px;
}
.bb-serp__url { font-size: 10.5px; color: #9aa0a6; direction: ltr; unicode-bidi: plaintext; }
.bb-serp__title { font-size: 14px; font-weight: 700; color: #8ab4f8; line-height: 1.3; }
.bb-serp__desc { font-size: 10.5px; color: rgba(255,255,255,0.55); line-height: 1.45; }

/* --- CRM lead feed --- */
.bb-admock__win--crm { padding: 6px 4px; }
.bb-crm-row { display: flex; align-items: center; gap: 9px; padding: 8px 10px; }
.bb-crm-row + .bb-crm-row { border-top: 1px solid rgba(255,255,255,0.07); }
.bb-crm-ava {
	width: 25px; height: 25px; border-radius: 50%; flex-shrink: 0;
	display: grid; place-items: center; font-size: 11px; font-weight: 800; color: #fff;
	background: var(--bb-primary);
}
.bb-crm-ava--2 { background: #7c5cff; }
.bb-crm-ava--3 { background: #1f9d55; }
.bb-crm-who { display: flex; flex-direction: column; line-height: 1.3; flex: 1; min-width: 0; }
.bb-crm-who b { font-size: 11.5px; font-weight: 700; color: #fff; }
.bb-crm-who i { font-size: 9.5px; font-style: normal; color: rgba(255,255,255,0.4); }
.bb-crm-pill {
	flex-shrink: 0; font-size: 9.5px; font-weight: 800; padding: 3px 8px; border-radius: 999px;
	background: rgba(230,55,120,0.16); color: var(--bb-primary);
}
.bb-crm-pill--won { background: rgba(124,92,255,0.16); color: #a894ff; }
.bb-crm-pill--done { background: rgba(31,157,85,0.16); color: #52c98b; }

/* --- shared caption --- */
.bb-admock__cap {
	display: flex; align-items: center; gap: 7px;
	margin: 10px 0 0; font-size: 11.5px; font-weight: 600;
	color: rgba(255, 255, 255, 0.45); letter-spacing: 0.02em;
}
.bb-admock__dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }

@media (max-width: 700px) {
	.bb-admock__win, .bb-admock__reels { max-width: 100%; }
	.bb-admock__reel { max-height: 210px; }
}

/* =====================================================================
   Services — editorial rows: compact copy + a collage of small ad
   mock-ups. Replaces the old 2x2 card grid (too airy, elements too big).
   ===================================================================== */
.bb-svc-list { margin-top: 8px; }
.bb-svc {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	gap: 46px;
	align-items: center;
	padding: 44px 0;
	border-top: 1px solid rgba(255, 255, 255, 0.09);
}
.bb-svc__num {
	display: block; font-size: 12px; font-weight: 800;
	letter-spacing: 0.18em; color: var(--bb-primary); margin-bottom: 10px;
}
.bb-svc__title { font-size: clamp(24px, 2.7vw, 34px); font-weight: 900; letter-spacing: -1px; color: #fff; margin: 0 0 12px; line-height: 1.15; }
.bb-svc__lead { font-size: 15.5px; line-height: 1.65; color: rgba(255,255,255,0.62); margin: 0 0 16px; }
.bb-svc__bul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.bb-svc__bul li { position: relative; padding-right: 16px; font-size: 14px; color: rgba(255,255,255,0.75); }
.bb-svc__bul li::before {
	content: ""; position: absolute; right: 0; top: 8px;
	width: 5px; height: 5px; border-radius: 50%; background: var(--bb-primary);
}

.bb-svc__gallery { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }

/* ---- small mock-up shell ---- */
.bb-mini { width: 178px; flex: 0 0 auto; }
.bb-mini--vert { width: 118px; }
.bb-mini__win {
	background: #141416;
	border: 1px solid rgba(255,255,255,0.1);
	border-radius: 10px;
	overflow: hidden;
	transition: transform 0.25s var(--bb-ease), border-color 0.25s ease;
}
.bb-mini:hover .bb-mini__win { transform: translateY(-4px); border-color: rgba(255,255,255,0.22); }
.bb-mini__win--pad { display: flex; flex-direction: column; gap: 2px; padding: 10px 11px; }
.bb-mini__img { aspect-ratio: 16 / 10; background: #000; }
.bb-mini__img--wide { aspect-ratio: 16 / 7; }
.bb-mini__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bb-mini__cap {
	display: flex; align-items: center; gap: 6px;
	margin: 8px 0 0; font-size: 10.5px; font-weight: 600;
	color: rgba(255,255,255,0.42);
}
.bb-mini__dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }

/* ---- Meta feed ad ---- */
.bb-fb__head { display: flex; align-items: center; gap: 6px; padding: 7px 8px; }
.bb-fb__ava { width: 20px; height: 20px; border-radius: 50%; background: var(--bb-dark); border: 1px solid rgba(255,255,255,0.18); color: #fff; display: grid; place-items: center; font-size: 10px; font-weight: 900; }
.bb-fb__who { display: flex; flex-direction: column; line-height: 1.2; }
.bb-fb__who b { font-size: 10px; font-weight: 800; color: #fff; }
.bb-fb__who b i { color: var(--bb-primary); font-style: normal; }
.bb-fb__who em { font-size: 8.5px; font-style: normal; color: rgba(255,255,255,0.42); }
.bb-fb__foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 7px 8px; background: rgba(255,255,255,0.04); }
.bb-fb__copy { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.bb-fb__copy b { font-size: 9.5px; font-weight: 800; color: #fff; }
.bb-fb__copy i { font-size: 8px; font-style: normal; color: rgba(255,255,255,0.35); }
.bb-fb__cta { flex-shrink: 0; font-size: 8.5px; font-weight: 800; color: #fff; background: #0866FF; padding: 4px 8px; border-radius: 5px; }

/* ---- Google search ad ---- */
.bb-serp__tag { align-self: flex-start; font-size: 8.5px; font-weight: 800; color: #fff; border: 1px solid rgba(255,255,255,0.3); border-radius: 3px; padding: 0 5px; margin-bottom: 3px; }
.bb-serp__url { font-size: 9px; color: #9aa0a6; direction: ltr; unicode-bidi: plaintext; }
.bb-serp__title { font-size: 12px; font-weight: 700; color: #8ab4f8; line-height: 1.3; }
.bb-serp__desc { font-size: 9px; color: rgba(255,255,255,0.5); line-height: 1.4; }

/* ---- display banner ---- */
.bb-banner__bar { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 7px 8px; }
.bb-banner__bar b { font-size: 9.5px; font-weight: 800; color: #fff; }
.bb-banner__cta { font-size: 8.5px; font-weight: 800; color: var(--bb-dark); background: #fff; padding: 3px 8px; border-radius: 4px; }

/* ---- vertical reel ---- */
.bb-reel { position: relative; aspect-ratio: 9 / 16; background: #000; }
.bb-reel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bb-reel__play {
	position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
	width: 0; height: 0; border-style: solid; border-width: 7px 0 7px 11px;
	border-color: transparent transparent transparent rgba(255,255,255,0.92);
	filter: drop-shadow(0 2px 5px rgba(0,0,0,0.6));
}
.bb-reel__tag, .bb-reel__skip {
	position: absolute; font-size: 8px; font-weight: 700; color: #fff;
	background: rgba(0,0,0,0.62); padding: 2px 5px; border-radius: 3px;
}
.bb-reel__tag { top: 6px; right: 6px; }
.bb-reel__skip { bottom: 6px; left: 6px; }

/* ---- A/B copy test ---- */
.bb-ab { gap: 6px !important; }
.bb-ab__row { display: flex; align-items: center; gap: 6px; font-size: 9.5px; }
.bb-ab__key { width: 15px; height: 15px; border-radius: 4px; background: rgba(255,255,255,0.1); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 8.5px; flex-shrink: 0; }
.bb-ab__txt { flex: 1; color: rgba(255,255,255,0.72); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bb-ab__val { font-weight: 800; color: rgba(255,255,255,0.45); }
.bb-ab__row--win .bb-ab__key { background: var(--bb-primary); }
.bb-ab__row--win .bb-ab__txt { color: #fff; }
.bb-ab__row--win .bb-ab__val { color: #52c98b; }

/* ---- WhatsApp thread ---- */
.bb-wa { display: flex; flex-direction: column; gap: 6px; padding: 10px; background: #0f1a14; }
.bb-wa__bub {
	position: relative; max-width: 88%; align-self: flex-start;
	background: #1f2c25; color: rgba(255,255,255,0.85);
	font-size: 9.5px; line-height: 1.45; padding: 6px 8px 12px; border-radius: 8px;
}
.bb-wa__bub i { position: absolute; bottom: 3px; left: 7px; font-size: 7.5px; font-style: normal; color: rgba(255,255,255,0.4); }
.bb-wa__bub--out { align-self: flex-end; background: #055e4c; color: #fff; }

/* ---- CRM feed ---- */
.bb-crm { padding: 3px 0; }
.bb-crm__row { display: flex; align-items: center; gap: 7px; padding: 7px 9px; }
.bb-crm__row + .bb-crm__row { border-top: 1px solid rgba(255,255,255,0.07); }
.bb-crm__ava { width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; font-size: 9px; font-weight: 800; color: #fff; background: var(--bb-primary); }
.bb-crm__ava--2 { background: #7c5cff; }
.bb-crm__ava--3 { background: #1f9d55; }
.bb-crm__who { display: flex; flex-direction: column; line-height: 1.25; flex: 1; min-width: 0; }
.bb-crm__who b { font-size: 9.5px; font-weight: 700; color: #fff; }
.bb-crm__who i { font-size: 8px; font-style: normal; color: rgba(255,255,255,0.38); }
.bb-crm__pill { flex-shrink: 0; font-size: 8px; font-weight: 800; padding: 2px 6px; border-radius: 999px; background: rgba(230,55,120,0.16); color: var(--bb-primary); }
.bb-crm__pill--mid { background: rgba(124,92,255,0.16); color: #a894ff; }
.bb-crm__pill--done { background: rgba(31,157,85,0.16); color: #52c98b; }

/* ---- automation notification ---- */
.bb-notif { display: flex; align-items: center; gap: 8px; padding: 12px 11px; }
.bb-notif__ico { width: 22px; height: 22px; border-radius: 50%; background: rgba(124,92,255,0.18); color: #a894ff; display: grid; place-items: center; font-size: 11px; font-weight: 900; flex-shrink: 0; }
.bb-notif__txt { display: flex; flex-direction: column; line-height: 1.3; }
.bb-notif__txt b { font-size: 10px; font-weight: 800; color: #fff; }
.bb-notif__txt i { font-size: 8.5px; font-style: normal; color: rgba(255,255,255,0.42); }

/* ---- mini stat card ---- */
.bb-stat { align-items: flex-start; }
.bb-stat__v { font-size: 26px; font-weight: 900; color: var(--bb-primary); line-height: 1; }
.bb-stat__l { font-size: 9.5px; color: rgba(255,255,255,0.5); margin-bottom: 8px; }
.bb-stat__bars { display: flex; align-items: flex-end; gap: 4px; height: 34px; width: 100%; }
.bb-stat__bars i { flex: 1; background: rgba(255,255,255,0.16); border-radius: 2px 2px 0 0; }
.bb-stat__bars i:last-child { background: var(--bb-primary); }

@media (max-width: 900px) {
	.bb-svc { grid-template-columns: 1fr; gap: 26px; padding: 34px 0; }
	.bb-svc__gallery { gap: 12px; }
	.bb-mini { width: calc(50% - 6px); }
	.bb-mini--vert { width: calc(33.333% - 8px); }
}

/* =====================================================================
   Solution — the four stages drawn as ONE connected pipeline. A pink
   line fills with scroll and lights each stage in turn; a stage can be
   clicked to reveal its detail. Light section (#fff).
   ===================================================================== */
.bb-flow { position: relative; padding-top: 8px; }

/* ---- the connecting rail ---- */
.bb-flow__track {
	position: absolute;
	top: 26px;
	right: 12%;
	left: 12%;
	height: 2px;
	background: var(--bb-border);
	border-radius: 2px;
}
.bb-flow__fill {
	display: block;
	height: 100%;
	width: 100%;
	background: linear-gradient(90deg, rgba(230,55,120,0.35), var(--bb-primary));
	border-radius: 2px;
	transform: scaleX(0);
	transform-origin: right center;   /* RTL: fills right → left */
	box-shadow: 0 0 14px rgba(230, 55, 120, 0.45);
}

/* ---- nodes ---- */
.bb-flow__nodes {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 26px;
	position: relative;
}
.bb-flow__node { display: flex; flex-direction: column; align-items: center; text-align: center; }

.bb-flow__dot {
	width: 54px; height: 54px; border-radius: 50%;
	background: #fff;
	border: 2px solid var(--bb-border);
	display: grid; place-items: center;
	position: relative; z-index: 2;
	transition: border-color 0.35s ease, box-shadow 0.35s ease, transform 0.35s var(--bb-ease);
}
.bb-flow__dot i {
	width: 12px; height: 12px; border-radius: 50%;
	background: var(--bb-border);
	transition: background 0.35s ease, transform 0.35s var(--bb-ease);
}
.bb-flow__node.is-on .bb-flow__dot {
	border-color: var(--bb-primary);
	box-shadow: 0 0 0 6px rgba(230, 55, 120, 0.1);
	transform: scale(1.06);
}
.bb-flow__node.is-on .bb-flow__dot i { background: var(--bb-primary); transform: scale(1.25); }

/* ---- card ---- */
.bb-flow__card {
	appearance: none;
	background: transparent;
	border: 0;
	padding: 18px 10px 0;
	margin: 0;
	font: inherit;
	color: inherit;
	text-align: center;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	width: 100%;
	border-radius: 14px;
	transition: background 0.25s ease, transform 0.35s var(--bb-ease);
}
.bb-flow__card:hover { background: var(--bb-secondary); }
.bb-flow__node.is-on .bb-flow__card { transform: translateY(-2px); }

.bb-flow__ico {
	width: 30px; height: 30px;
	color: var(--bb-muted);
	transition: color 0.35s ease;
}
.bb-flow__ico svg { width: 100%; height: 100%; display: block; }
.bb-flow__node.is-on .bb-flow__ico { color: var(--bb-primary); }

.bb-flow__num {
	font-size: 11px; font-weight: 800; letter-spacing: 0.18em;
	color: var(--bb-muted);
	transition: color 0.35s ease;
}
.bb-flow__node.is-on .bb-flow__num { color: var(--bb-primary); }

.bb-flow__title { font-size: 21px; font-weight: 900; letter-spacing: -0.5px; color: var(--bb-fg); }
.bb-flow__body { font-size: 14.5px; line-height: 1.6; color: var(--bb-muted); max-width: 26ch; }

/* collapsible detail */
.bb-flow__more {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.4s var(--bb-ease);
	width: 100%;
}
.bb-flow__more-in {
	overflow: hidden;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--bb-muted);
	opacity: 0;
	transition: opacity 0.3s ease;
}
.bb-flow__card[aria-expanded="true"] .bb-flow__more { grid-template-rows: 1fr; }
.bb-flow__card[aria-expanded="true"] .bb-flow__more-in { opacity: 1; padding-top: 8px; }

.bb-flow__out {
	margin-top: 4px;
	font-size: 11.5px; font-weight: 800;
	color: var(--bb-primary);
	background: rgba(230, 55, 120, 0.09);
	padding: 5px 12px;
	border-radius: 999px;
}

/* ---- closing result line ---- */
.bb-flow__result {
	display: flex; align-items: center; justify-content: center; gap: 9px;
	margin: 40px 0 0;
	font-size: 16px; font-weight: 800; color: var(--bb-fg);
}
.bb-flow__pulse {
	width: 9px; height: 9px; border-radius: 50%;
	background: var(--bb-primary);
	box-shadow: 0 0 0 0 rgba(230, 55, 120, 0.55);
	animation: bb-flow-pulse 2.1s ease-out infinite;
}
@keyframes bb-flow-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(230, 55, 120, 0.5); }
	70%  { box-shadow: 0 0 0 12px rgba(230, 55, 120, 0); }
	100% { box-shadow: 0 0 0 0 rgba(230, 55, 120, 0); }
}

@media (prefers-reduced-motion: reduce) {
	.bb-flow__pulse { animation: none; }
	.bb-flow__fill { transform: scaleX(1); }
}

/* ---- mobile: the rail turns vertical ---- */
@media (max-width: 860px) {
	.bb-flow__nodes { grid-template-columns: 1fr; gap: 30px; }
	.bb-flow__node { flex-direction: row; align-items: flex-start; text-align: right; gap: 14px; }
	.bb-flow__dot { width: 44px; height: 44px; flex-shrink: 0; }
	.bb-flow__card { align-items: flex-start; text-align: right; padding: 0 0 0 6px; }
	.bb-flow__body { max-width: none; }
	.bb-flow__track {
		top: 22px; bottom: 22px; right: 21px; left: auto;
		width: 2px; height: auto;
	}
	.bb-flow__fill { width: 100%; height: 100%; transform: scaleY(0); transform-origin: top center; }
	.bb-flow__result { justify-content: flex-start; text-align: right; }
}

/* =====================================================================
   Scroll performance
   ---------------------------------------------------------------------
   1) Off-screen sections skip layout/paint entirely until they approach
      the viewport. contain-intrinsic-size keeps the scrollbar honest so
      nothing jumps. Applied only to heavy mid-page sections — never the
      hero, the header or anything a pinned ScrollTrigger measures.
   2) will-change is a promise to the compositor, not a speed switch:
      leaving it on permanently keeps layers alive and eats GPU memory.
      Keep it only where something is genuinely animating all the time.
   ===================================================================== */

/* content-visibility removed: it reports estimated heights for
   off-screen sections, which shifts every ScrollTrigger position and made
   pinned scenes fire early and overlap the section above. */

/* The founder cards and case videos are static between interactions, so they
   don't need permanent promotion. The coverflow slides DO: eight transformed,
   shadowed boxes that are re-rasterised on every scroll frame otherwise. */
.bb-founder,
.bb-case__media video {
	will-change: auto;
}

/* The marquee really does run continuously, so it keeps its hint. */
.bb-marquee__track { will-change: transform; }



@media (prefers-reduced-motion: reduce) {
	.bb-marquee__track { will-change: auto; }
}

/* The founder phone mock-ups are their own visual — the old card hover
   (pink border + pink glow + pink name) fought the phone frame. */
.bb-about__team .bb-founder:hover {
	background: transparent;
	border-color: transparent;
	box-shadow: none;
}
.bb-about__team .bb-founder:hover .bb-founder__name { color: #fff; }

/* Single founder photo — replaces the earlier two-photo collage, so the
   absolute-positioned box is gone: one photo just centres in normal flow
   and the container hugs it (a fixed height left a tall empty gap under
   the phone, and the photo spilled into the next section).

   Centring must be flexbox, never a transform: the reveal animation writes
   `transform` on these elements and would wipe it. (The independent
   `rotate` property is no safer — GSAP folds it into its own transform and
   zeroes it — so the tilt below is a baseline for the no-JS case and the
   reveal tween carries it explicitly.)

   The photo is sized against the viewport, not the parent: the card is a
   centred flex column, so its width follows its widest child and differs
   per founder, which made the two photos different sizes. */
.bb-about__team .bb-founder__pics,
.bb-cine__stack > .bb-founder .bb-founder__pics {
	display: flex;
	align-items: center;
	justify-content: center;
	position: static;
	height: auto;
	width: 100%;
}
.bb-founder__pic {
	position: static;
	width: min(340px, 82%);
	rotate: -3deg;
	border: 1px solid rgba(255, 255, 255, 0.14);
}
@media (max-width: 899px) {
	.bb-founder__pic { width: min(300px, 74vw); }
}

/* Carousel side slides are posters (images), not players. */

/* Work-grid cards ship a poster; the Vimeo player is mounted only while the
   card is on screen and fades in over the poster once it is ready. */
.bb-case__media { position: relative; }
.bb-case__poster {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover; display: block;
	z-index: 1;
	transition: opacity 0.5s ease;
}
.bb-case.is-playing .bb-case__poster { opacity: 0; }
.bb-case__media iframe { position: relative; z-index: 0; }

/* =====================================================================
   Testimonials — static poster wall.
   Cheap on purpose: no transforms, no promoted layers, no live player
   until a card is clicked. The old coverflow repainted eight shadowed,
   transformed slides on every scroll frame and stalled the page.
   ===================================================================== */
/* Endless marquee: only .bb-tst__track is animated — one transform on one
   promoted layer — so adding cards costs nothing extra to scroll past. */
.bb-tst {
	position: relative;
	overflow: hidden;
	direction: ltr;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.bb-tst__track {
	display: flex;
	width: max-content;
	animation: bb-tst-scroll 64s linear infinite;
	will-change: transform;
}
.bb-tst:hover .bb-tst__track,
.bb-tst:focus-within .bb-tst__track { animation-play-state: paused; }
.bb-tst__group { display: flex; gap: 14px; padding-left: 14px; flex-shrink: 0; }
@keyframes bb-tst-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .bb-tst__track { animation: none; } }

.bb-tst__item {
	width: 190px;
	flex: 0 0 auto;
	position: relative;
	appearance: none;
	border: 1px solid rgba(255, 255, 255, 0.1);
	background: #000;
	padding: 0;
	margin: 0;
	border-radius: 12px;
	overflow: hidden;
	aspect-ratio: 9 / 16;
	cursor: pointer;
	transition: border-color 0.2s ease, opacity 0.2s ease;
}
.bb-tst__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	opacity: 0.85;
	transition: opacity 0.2s ease;
}
.bb-tst__item:hover { border-color: var(--bb-primary); }
.bb-tst__item:hover img { opacity: 1; }

.bb-tst__play {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -19px 0 0 -19px;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: rgba(230, 55, 120, 0.9);
	pointer-events: none;
}
.bb-tst__play::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -6px 0 0 -3px;
	border-style: solid;
	border-width: 6px 0 6px 10px;
	border-color: transparent transparent transparent #fff;
}

/* ---- lightbox ---- */
.bb-tst__lb {
	position: fixed;
	inset: 0;
	z-index: 99999;
	background: rgba(0, 0, 0, 0.92);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}
.bb-tst__lb[hidden] { display: none; }
.bb-tst__lb-body { width: min(430px, 92vw); aspect-ratio: 9 / 16; }
.bb-tst__lb-body iframe { width: 100%; height: 100%; border: 0; border-radius: 14px; }
.bb-tst__lb-close {
	position: absolute;
	top: 20px;
	right: 20px;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	border: 0;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
.bb-tst__lb-close:hover { background: rgba(255, 255, 255, 0.24); }

@media (max-width: 860px) {
	.bb-tst__item { width: 150px; }
	.bb-tst__track { animation-duration: 48s; }
}


/* =====================================================================
   Services page — hero fan + pinned service chapters.
   The fan is a real arc of links: readable and clickable with no JS,
   and motion-scroll.js only adds the spread/entrance on top.
   ===================================================================== */

.bb-svc-hero {
	position: relative;
	background: #000;
	padding: 96px 0 0;
	overflow: hidden;
}
.bb-svc-hero__orb {
	position: absolute;
	top: -180px; left: 50%;
	width: 900px; height: 900px;
	transform: translateX(-50%);
	background: radial-gradient(circle, rgba(230, 55, 120, 0.20) 0%, transparent 62%);
	pointer-events: none;
}
.bb-svc-hero__head { position: relative; text-align: center; }
.bb-svc-hero__title {
	font-size: clamp(38px, 6.4vw, 82px);
	font-weight: 900;
	line-height: 1.04;
	letter-spacing: -0.03em;
	color: #fff;
	margin: 10px 0 0;
}
.bb-svc-hero__title em { color: var(--bb-primary); font-style: normal; }
.bb-svc-hero__sub {
	font-size: clamp(15px, 1.7vw, 19px);
	color: rgba(255, 255, 255, 0.62);
	max-width: 620px;
	margin: 18px auto 0;
	line-height: 1.6;
}
.bb-svc-hero__actions { margin-top: 28px; }

/* ---- the fan --------------------------------------------------------
   Cards overlap in a single grid cell and are rotated around a pivot far
   below the section, which is what makes the arc read as a fan. */
.bb-fan {
	position: relative;
	display: grid;
	place-items: center;
	margin: clamp(40px, 6vw, 72px) auto 0;
	width: min(1100px, 92vw);
	height: clamp(250px, 26vw, 320px);
}
.bb-fan__card {
	grid-area: 1 / 1;
	width: clamp(122px, 11.5vw, 144px);
	min-height: clamp(166px, 16vw, 196px);
	padding: 16px 14px;
	border-radius: 18px;
	background: linear-gradient(180deg, #1a1a1c 0%, #121213 100%);
	border: 1px solid rgba(255, 255, 255, 0.10);
	box-shadow: 0 28px 60px rgba(0, 0, 0, 0.55);
	display: flex;
	flex-direction: column;
	gap: 8px;
	text-decoration: none;
	transform-origin: 50% 190%;
	transition: border-color 0.25s ease, box-shadow 0.25s ease;
	will-change: transform;
}
.bb-fan__card::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 20px;
	background: radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--tint) 16%, transparent) 0%, transparent 62%);
	opacity: 0;
	transition: opacity 0.3s ease;
	pointer-events: none;
}
.bb-fan__card:hover { border-color: color-mix(in srgb, var(--tint) 55%, transparent); }
.bb-fan__card:hover::before { opacity: 1; }
.bb-fan__num {
	font-size: 12px; font-weight: 800; letter-spacing: 0.16em;
	color: var(--tint);
}
.bb-fan__title { font-size: 13.5px; font-weight: 800; color: #fff; line-height: 1.35; flex: 1; }
/* ten cards only fit legibly as number + name; the summary lives in
   the bento tile the card opens */
.bb-fan__lead { display: none; }
.bb-fan__go { font-size: 12px; font-weight: 700; color: var(--tint); }

/* No-JS / reduced-motion: a plain readable row, no arc. */
.bb-fan:not(.is-fanned) .bb-fan__card { position: relative; }

/* On a phone the fan would repeat, one screen early, the same ten tiles the
   grid below already lists in full. The hero keeps the promise and the CTA;
   the mobile reveal rules that used to live here went out with the pinned
   chapters they shared a media block with. */
@media (max-width: 860px) {
	.bb-fan { display: none; }
	.bb-svc-hero { padding-top: 64px; }
	.bb-svc-hero .bb-marquee { margin-top: 34px; }
}
@media (prefers-reduced-motion: reduce) {
	.bb-fan { height: auto; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; }
	.bb-fan__card { grid-area: auto; transform: none !important; }
}

.bb-svc-hero .bb-marquee { margin-top: clamp(36px, 5vw, 64px); }

/* =====================================================================
   Services wall — five infinite rows drifting in alternating directions,
   with a live filter. Rows pause on hover so a name can be read.
   ===================================================================== */

.bb-wall-sec { background: #000; padding: 84px 0 72px; border-top: 1px solid rgba(255, 255, 255, 0.06); }
.bb-wall__head { text-align: center; }
.bb-wall__h2 {
	font-size: clamp(30px, 4.4vw, 56px);
	font-weight: 900; letter-spacing: -0.03em; line-height: 1.1;
	color: #fff; margin: 8px 0 0;
}
.bb-wall__h2 em { color: var(--bb-primary); font-style: normal; }
.bb-wall__sub { font-size: 15.5px; color: rgba(255, 255, 255, 0.55); margin: 14px 0 0; }

.bb-wall__search {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	width: min(460px, 92%);
	margin: 24px auto 0;
	padding: 0 16px;
	height: 52px;
	border-radius: 999px;
	background: #141416;
	border: 1px solid rgba(255, 255, 255, 0.12);
	color: rgba(255, 255, 255, 0.45);
	transition: border-color 0.2s ease, background 0.2s ease;
}
.bb-wall__search:focus-within {
	border-color: var(--bb-primary);
	background: #17171a;
}
.bb-wall__search input {
	flex: 1;
	background: none;
	border: 0;
	outline: none;
	color: #fff;
	font: inherit;
	font-size: 15px;
}
.bb-wall__search input::placeholder { color: rgba(255, 255, 255, 0.35); }
.bb-wall__search input::-webkit-search-cancel-button { display: none; }
.bb-wall__clear {
	border: 0; background: none; cursor: pointer;
	color: rgba(255, 255, 255, 0.5); font-size: 22px; line-height: 1;
	padding: 0 2px;
}
.bb-wall__clear:hover { color: #fff; }

/* ---- the drifting rows --------------------------------------------- */
.bb-wall__rows {
	margin-top: 40px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	/* fade both ends so chips enter and leave instead of being cut */
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
}
/* `display` beats the hidden attribute, so the filter could not put the
   rows away — they stayed on screen underneath the results. */
.bb-wall__rows[hidden] { display: none; }
.bb-wall__row { overflow: hidden; }
.bb-wall__track { display: flex; width: max-content; }
.bb-wall__group { display: flex; gap: 12px; padding-inline-end: 12px; }

.bb-wall__row--a .bb-wall__track { animation: bb-wall-a var(--dur, 50s) linear infinite; }
.bb-wall__row--b .bb-wall__track { animation: bb-wall-b var(--dur, 50s) linear infinite; }
.bb-wall__row:hover .bb-wall__track { animation-play-state: paused; }

/* RTL: the track is right-aligned and extends LEFT, so its duplicate sits to
   the left of the original. Translating negative therefore walks the content
   out of the window with nothing following it. Both directions have to stay
   in the 0..+50% band, where a copy is always covering the visible strip. */
@keyframes bb-wall-a { from { transform: translateX(0); }   to { transform: translateX(50%); } }
@keyframes bb-wall-b { from { transform: translateX(50%); } to { transform: translateX(0); } }

.bb-wall__chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
	white-space: nowrap;
	padding: 10px 16px;
	border-radius: 999px;
	background: #131315;
	border: 1px solid rgba(255, 255, 255, 0.08);
	color: rgba(255, 255, 255, 0.72);
	font-size: 14px;
	transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.bb-wall__chip i {
	width: 6px; height: 6px; border-radius: 50%;
	flex-shrink: 0;
	display: block;
}
.bb-wall__row:hover .bb-wall__chip:hover {
	color: #fff;
	background: #1b1b1f;
	border-color: rgba(255, 255, 255, 0.24);
}

/* ---- filter results ------------------------------------------------- */
.bb-wall__results {
	max-width: 1000px;
	margin: 36px auto 0;
	padding-inline: 24px;
}
.bb-wall__count { text-align: center; font-size: 14px; color: rgba(255, 255, 255, 0.5); margin-bottom: 20px; }
.bb-wall__count b { color: var(--bb-primary); }
.bb-wall__grp { margin-bottom: 22px; }
.bb-wall__grp-h {
	font-size: 12px; font-weight: 800; letter-spacing: 0.12em;
	margin: 0 0 10px; display: flex; align-items: center; gap: 8px;
}
.bb-wall__grp-h i { width: 7px; height: 7px; border-radius: 50%; display: block; }
.bb-wall__hits { display: flex; flex-wrap: wrap; gap: 9px; }
.bb-wall__hits .bb-wall__chip { white-space: normal; }
.bb-wall__chip mark { background: none; color: var(--bb-primary); font-weight: 800; }
.bb-wall__none { text-align: center; color: rgba(255, 255, 255, 0.45); font-size: 15px; padding: 22px 0; }


@media (max-width: 860px) {
	.bb-wall-sec { padding: 60px 0 52px; }
	.bb-wall__rows { gap: 9px; margin-top: 30px; }
	.bb-wall__group { gap: 9px; padding-inline-end: 9px; }
	.bb-wall__chip { font-size: 13px; padding: 9px 13px; }
}

@media (prefers-reduced-motion: reduce) {
	.bb-wall__row--a .bb-wall__track,
	.bb-wall__row--b .bb-wall__track { animation: none; }
	.bb-wall__row { overflow-x: auto; }
}

/* =====================================================================
   Services finder — the search, on its own further down the page. The
   drifting rows answer "how much do you do"; this answers "do you do the
   one thing I need". Keeping them apart stops them competing.
   ===================================================================== */

.bb-finder-sec {
	background: #0A0A0B;
	border-top: 1px solid rgba(255, 255, 255, 0.06);
	padding: 76px 0 72px;
}
.bb-finder__head { text-align: center; }
.bb-finder__h2 {
	font-size: clamp(28px, 4vw, 48px);
	font-weight: 900; letter-spacing: -0.03em; line-height: 1.12;
	color: #fff; margin: 8px 0 0;
}
.bb-finder__h2 em { color: var(--bb-primary); font-style: normal; }

.bb-finder__hints {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin-top: 16px;
}
.bb-finder__hint {
	border: 1px solid rgba(255, 255, 255, 0.12);
	background: transparent;
	color: rgba(255, 255, 255, 0.5);
	border-radius: 999px;
	padding: 7px 14px;
	font: inherit;
	font-size: 13px;
	cursor: pointer;
	transition: color 0.2s ease, border-color 0.2s ease;
}
.bb-finder__hint:hover {
	color: #fff;
	border-color: var(--bb-primary);
}

@media (max-width: 860px) {
	.bb-finder-sec { padding: 56px 0 52px; }
	.bb-finder__hints { gap: 7px; }
	.bb-finder__hint { font-size: 12.5px; padding: 6px 12px; }
}

/* The 16 domain names ride inside the rows instead of a legend below them:
   lit in their own colour, so they read as chapter markers among the 243
   quiet service chips drifting past. */
.bb-wall__chip--cat {
	color: #fff;
	font-weight: 800;
	background: color-mix(in srgb, var(--tint) 15%, #0c0c0e);
	border-color: color-mix(in srgb, var(--tint) 52%, transparent);
	box-shadow: 0 0 24px color-mix(in srgb, var(--tint) 26%, transparent);
	padding-inline-end: 10px;
}
.bb-wall__chip--cat i {
	width: 7px; height: 7px;
	box-shadow: 0 0 8px currentColor;
}
.bb-wall__chip--cat b {
	margin-inline-start: 4px;
	padding: 2px 7px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--tint) 22%, transparent);
	color: var(--tint);
	font-size: 11.5px;
	font-weight: 800;
}
.bb-wall__row:hover .bb-wall__chip--cat:hover {
	background: color-mix(in srgb, var(--tint) 24%, #0c0c0e);
	border-color: var(--tint);
}

/* Search-result label: one flex item, so a highlighted fragment inside a word
   cannot be pushed apart by the chip's flex gap. */
.bb-wall__lbl { display: inline; }

/* =====================================================================
   Google Ads format gallery (/ppc-management/).
   Every mock-up is hand-built HTML/CSS, never a screenshot of the Google
   interface, so it stays sharp at any size and keeps the site palette.
   ===================================================================== */

.bb-ga-sec {
	background: #0A0A0B;
	border-top: 1px solid rgba(255, 255, 255, 0.06);
	padding: 84px 0 88px;
}
.bb-ga__head { text-align: center; }
.bb-ga__h2 {
	font-size: clamp(30px, 4.2vw, 52px);
	font-weight: 900; letter-spacing: -0.03em; line-height: 1.1;
	color: #fff; margin: 8px 0 0;
}
.bb-ga__h2 em { color: var(--bb-primary); font-style: normal; }
.bb-ga__sub {
	font-size: 15.5px; color: rgba(255, 255, 255, 0.55);
	max-width: 560px; margin: 14px auto 0; line-height: 1.6;
}

.bb-ga__filters {
	display: flex; flex-wrap: wrap; justify-content: center;
	gap: 8px; margin-top: 30px;
}
.bb-ga__chip {
	display: inline-flex; align-items: center; gap: 7px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	background: transparent;
	color: rgba(255, 255, 255, 0.55);
	border-radius: 999px; padding: 8px 15px;
	font: inherit; font-size: 13.5px; font-weight: 600;
	cursor: pointer;
	transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.bb-ga__chip b {
	font-size: 11px; font-weight: 800;
	color: rgba(255, 255, 255, 0.35);
	transition: color 0.2s ease;
}
.bb-ga__chip:hover { color: #fff; border-color: rgba(255, 255, 255, 0.3); }
.bb-ga__chip.is-on {
	color: #fff;
	background: var(--bb-primary);
	border-color: var(--bb-primary);
}
.bb-ga__chip.is-on b { color: rgba(255, 255, 255, 0.75); }

.bb-ga__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 22px;
	margin-top: 34px;
}
.bb-ga__card {
	display: flex;
	flex-direction: column;
	gap: 14px;
	background: #121214;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 18px;
	padding: 18px;
	transition: border-color 0.25s ease, transform 0.25s ease;
}
.bb-ga__card:hover { border-color: rgba(255, 255, 255, 0.2); transform: translateY(-3px); }
.bb-ga__card[hidden] { display: none; }
.bb-ga__frame {
	background: #fff;
	border-radius: 12px;
	padding: 14px;
	min-height: 170px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.bb-ga__name { font-size: 16px; font-weight: 800; color: #fff; margin: 0; }
.bb-ga__note { font-size: 13.5px; line-height: 1.6; color: rgba(255, 255, 255, 0.5); margin: 6px 0 0; }

/* ---- the mock-ups themselves (light, like a real results page) ------ */
.bb-g-card {
	width: 100%;
	font-family: Arial, "Heebo", sans-serif;
	color: #202124;
	text-align: right;
	font-size: 12.5px;
	line-height: 1.45;
}
.bb-g-top { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; }
.bb-g-ad {
	font-size: 10px; font-weight: 700; color: #202124;
	border: 1px solid #dadce0; border-radius: 4px; padding: 0 4px;
}
.bb-g-url { font-size: 11.5px; color: #202124; }
.bb-g-title { font-size: 15px; color: #1a0dab; font-weight: 500; line-height: 1.3; }
.bb-g-title--sm { font-size: 13.5px; color: #202124; font-weight: 700; }
.bb-g-desc { font-size: 12px; color: #4d5156; margin-top: 3px; }
.bb-g-i { width: 12px; height: 12px; flex-shrink: 0; }

.bb-g-sl {
	display: grid; grid-template-columns: 1fr 1fr; gap: 3px 14px;
	margin-top: 8px; padding-top: 8px; border-top: 1px solid #ebebeb;
}
.bb-g-sl span { font-size: 12px; color: #1a0dab; }

.bb-g-ext {
	display: flex; align-items: center; gap: 5px;
	margin-top: 8px; font-size: 12px; color: #202124;
}
.bb-g-ext b { font-weight: 700; }
.bb-g-ext span { color: #70757a; }
.bb-g-ext .bb-g-i { color: #1a73e8; }

.bb-g-snip { margin-top: 5px; font-size: 11.5px; color: #4d5156; }
.bb-g-snip b { color: #202124; }

.bb-g-btn {
	display: inline-flex; align-items: center; gap: 5px;
	margin-top: 10px; padding: 6px 13px;
	border-radius: 999px; border: 1px solid #dadce0;
	font-size: 12px; font-weight: 700; color: #1a73e8; background: #fff;
}
.bb-g-btn--call { background: #1a73e8; color: #fff; border-color: #1a73e8; }
.bb-g-btn--wa { background: #25D366; color: #fff; border-color: #25D366; }
.bb-g-btn--sm { margin: 0; padding: 4px 10px; font-size: 11px; }

.bb-g-call__num {
	display: flex; align-items: center; gap: 6px;
	font-size: 20px; font-weight: 700; color: #1a73e8; margin-top: 4px;
}
.bb-g-call__num .bb-g-i { width: 16px; height: 16px; }

/* map */
.bb-g-map { position: relative; height: 150px; border-radius: 10px; overflow: hidden; background: #e8eaed; }
.bb-g-map__grid { position: absolute; inset: 0; }
.bb-g-map__grid i { position: absolute; background: #fff; }
.bb-g-map__grid i:nth-child(1) { top: 34%; left: 0; right: 0; height: 9px; }
.bb-g-map__grid i:nth-child(2) { top: 72%; left: 0; right: 0; height: 6px; }
.bb-g-map__grid i:nth-child(3) { left: 26%; top: 0; bottom: 0; width: 8px; }
.bb-g-map__grid i:nth-child(4) { left: 68%; top: 0; bottom: 0; width: 5px; }
.bb-g-map__pin {
	position: absolute; top: 26%; left: 46%;
	color: #ea4335; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.3));
}
.bb-g-map__pin .bb-g-i { width: 22px; height: 22px; }
.bb-g-map__card {
	position: absolute; inset-inline: 8px; bottom: 8px;
	background: #fff; border-radius: 8px; padding: 7px 9px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
	display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
}
.bb-g-map__card b { font-size: 12.5px; }
.bb-g-rate { display: flex; align-items: center; gap: 4px; font-size: 11px; color: #70757a; }
.bb-g-rate .bb-g-i { color: #fbbc04; }
.bb-g-rate i { font-style: normal; }

/* banner */
.bb-g-ban { position: relative; border-radius: 10px; overflow: hidden; background: #111; }
.bb-g-ban__img { height: 110px; }
.bb-g-ban__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bb-g-ban__bar {
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	padding: 9px 11px; background: #0D0D0D; color: #fff;
}
.bb-g-ban__bar b { font-size: 12px; }
.bb-g-ban__bar .bb-g-btn { background: var(--bb-primary); color: #fff; border-color: var(--bb-primary); }
.bb-g-tag {
	position: absolute; top: 8px; inset-inline-end: 8px;
	background: rgba(0, 0, 0, 0.68); color: #fff;
	font-size: 10px; padding: 3px 7px; border-radius: 4px;
}
.bb-g-tag--top { inset-inline-start: 8px; inset-inline-end: auto; }

/* feed / demand gen */
.bb-g-feed { border-radius: 10px; overflow: hidden; border: 1px solid #e5e5e5; }
.bb-g-feed__img { height: 96px; }
.bb-g-feed__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bb-g-feed__body { padding: 9px 10px; }
.bb-g-feed__who { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; }
.bb-g-feed__who b { font-size: 11.5px; }
.bb-g-ava {
	width: 17px; height: 17px; border-radius: 50%;
	background: var(--bb-primary); color: #fff;
	font-size: 10px; font-weight: 800;
	display: inline-flex; align-items: center; justify-content: center;
	flex-shrink: 0;
}

/* youtube */
.bb-g-yt { position: relative; border-radius: 10px; overflow: hidden; background: #000; }
.bb-g-yt__img { height: 130px; }
.bb-g-yt__img img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0.9; }
.bb-g-yt__skip {
	position: absolute; bottom: 34px; inset-inline-start: 0;
	background: rgba(0, 0, 0, 0.75); color: #fff;
	font-size: 11px; padding: 6px 10px;
}
.bb-g-yt__bar { position: absolute; bottom: 30px; inset-inline: 0; height: 3px; background: rgba(255, 255, 255, 0.3); }
.bb-g-yt__prog { display: block; height: 100%; width: 38%; background: #fbbc04; }
.bb-g-yt__cta {
	display: flex; align-items: center; gap: 7px;
	padding: 7px 9px; background: #0D0D0D; color: #fff;
}
.bb-g-yt__cta b { font-size: 11.5px; flex: 1; }
.bb-g-yt__cta .bb-g-btn { background: #fff; color: #0D0D0D; border-color: #fff; }

/* shorts */
.bb-g-short { position: relative; width: 108px; margin-inline: auto; border-radius: 10px; overflow: hidden; background: #000; }
.bb-g-short__img { height: 168px; }
.bb-g-short__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bb-g-short__foot {
	position: absolute; inset-inline: 0; bottom: 0;
	display: flex; align-items: center; justify-content: space-between; gap: 6px;
	padding: 7px 8px; color: #fff;
	background: linear-gradient(transparent, rgba(0, 0, 0, 0.85));
}
.bb-g-short__foot b { font-size: 10.5px; }
.bb-g-short__foot .bb-g-btn { background: #fff; color: #0D0D0D; border-color: #fff; padding: 3px 7px; font-size: 9.5px; }

/* shopping */
.bb-g-shop__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.bb-g-shop__it { border: 1px solid #e5e5e5; border-radius: 8px; padding: 6px; text-align: center; }
.bb-g-shop__img { height: 52px; border-radius: 5px; overflow: hidden; margin-bottom: 5px; }
.bb-g-shop__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bb-g-shop__it b { display: block; font-size: 12px; color: #202124; }
.bb-g-shop__it span { font-size: 10px; color: #70757a; }
.bb-g-shop__cap {
	display: flex; align-items: center; gap: 5px;
	margin-top: 8px; font-size: 11px; color: #70757a;
}

/* performance max */
.bb-g-pmax { position: relative; }
.bb-g-pmax__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.bb-g-pmax__cell {
	border: 1px dashed #cfd3d7; border-radius: 7px;
	padding: 13px 4px; text-align: center;
	font-size: 10.5px; color: #5f6368;
}
.bb-g-pmax__hub {
	display: flex; align-items: center; justify-content: center; gap: 6px;
	margin-top: 9px; padding: 7px;
	border-radius: 8px; background: #f1f3f4;
	font-size: 11.5px; color: #202124;
}
.bb-g-pmax__hub span:last-child { color: #70757a; }

@media (max-width: 860px) {
	.bb-ga-sec { padding: 60px 0 64px; }
	.bb-ga__grid { grid-template-columns: 1fr; gap: 16px; margin-top: 26px; }
	.bb-ga__filters { gap: 7px; margin-top: 24px; }
	.bb-ga__chip { font-size: 12.5px; padding: 7px 13px; }
	.bb-ga__frame { min-height: 0; }
}

/* =====================================================================
   Services bento — ten tiles that expand in place.
   Replaces the pinned chapter scrub: nothing here touches page scroll,
   so the reader never feels the page stick.
   ===================================================================== */

.bb-bento-sec {
	background: #0A0A0B;
	border-top: 1px solid rgba(255, 255, 255, 0.06);
	padding: 84px 0 88px;
}
.bb-bento__head { text-align: center; }
.bb-bento__h2 {
	font-size: clamp(30px, 4.4vw, 56px);
	font-weight: 900; letter-spacing: -0.03em; line-height: 1.1;
	color: #fff; margin: 8px 0 0;
}
.bb-bento__h2 em { color: var(--bb-primary); font-style: normal; }
.bb-bento__sub {
	font-size: 15.5px; color: rgba(255, 255, 255, 0.55);
	max-width: 560px; margin: 14px auto 0; line-height: 1.6;
}

.bb-bento {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	/* dense packing: the double-width tiles do not divide evenly into rows of
	   four, so without it every other row ends with a hole */
	grid-auto-flow: dense;
	gap: 16px;
	margin-top: 38px;
	align-items: start;
}
.bb-bento__tile--big { grid-column: span 2; }

.bb-bento__tile {
	position: relative;
	background: #121214;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 20px;
	overflow: hidden;
	transition: border-color 0.25s ease, background 0.25s ease;
}
.bb-bento__tile::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 20px;
	background: radial-gradient(120% 80% at 100% 0%, color-mix(in srgb, var(--tint) 15%, transparent) 0%, transparent 62%);
	opacity: 0;
	transition: opacity 0.3s ease;
	pointer-events: none;
}
.bb-bento__tile:hover { border-color: color-mix(in srgb, var(--tint) 45%, transparent); }
.bb-bento__tile:hover::before,
.bb-bento__tile.is-open::before { opacity: 1; }
.bb-bento__tile.is-open { border-color: color-mix(in srgb, var(--tint) 60%, transparent); }

.bb-bento__toggle {
	position: relative;
	z-index: 1;
	display: grid;
	width: 100%;
	gap: 6px;
	padding: 22px 20px;
	background: none;
	border: 0;
	text-align: start;
	font: inherit;
	color: inherit;
	cursor: pointer;
}
.bb-bento__badge {
	width: 42px; height: 42px;
	border-radius: 12px;
	display: inline-flex; align-items: center; justify-content: center;
	background: color-mix(in srgb, var(--tint) 16%, #16161a);
	color: var(--tint);
	margin-bottom: 6px;
}
.bb-bento__ico { width: 21px; height: 21px; }
.bb-bento__num {
	font-size: 11px; font-weight: 800; letter-spacing: 0.18em;
	color: var(--tint);
}
.bb-bento__name {
	font-size: 18px; font-weight: 800; color: #fff; line-height: 1.25;
}
.bb-bento__tile--big .bb-bento__name { font-size: 21px; }
.bb-bento__lead {
	font-size: 13.5px; line-height: 1.65;
	color: rgba(255, 255, 255, 0.5);
}

/* the open/close cue */
.bb-bento__cue {
	position: absolute;
	top: 24px; inset-inline-end: 20px;
	width: 22px; height: 22px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.2);
	transition: border-color 0.25s ease, transform 0.3s ease;
}
.bb-bento__cue::before,
.bb-bento__cue::after {
	content: "";
	position: absolute;
	top: 50%; left: 50%;
	width: 9px; height: 1.5px;
	background: rgba(255, 255, 255, 0.6);
	transform: translate(-50%, -50%);
	transition: transform 0.3s ease, background 0.25s ease;
}
.bb-bento__cue::after { transform: translate(-50%, -50%) rotate(90deg); }
.bb-bento__tile:hover .bb-bento__cue { border-color: var(--tint); }
.bb-bento__tile.is-open .bb-bento__cue { border-color: var(--tint); transform: rotate(180deg); }
.bb-bento__tile.is-open .bb-bento__cue::after { transform: translate(-50%, -50%) rotate(0deg); }
.bb-bento__tile.is-open .bb-bento__cue::before,
.bb-bento__tile.is-open .bb-bento__cue::after { background: var(--tint); }

/* The expanding panel: a 0fr -> 1fr grid row animates to the content's own
   height, which max-height guessing cannot do without clipping or lag. */
.bb-bento__more {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.38s ease;
}
.bb-bento__tile.is-open .bb-bento__more { grid-template-rows: 1fr; }
.bb-bento__inner { overflow: hidden; }
.bb-bento__bul {
	list-style: none;
	margin: 0;
	padding: 0 20px 4px;
	display: grid;
	gap: 8px;
}
.bb-bento__bul li {
	position: relative;
	padding-inline-start: 16px;
	font-size: 13.5px;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.72);
}
.bb-bento__bul li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0; top: 8px;
	width: 5px; height: 5px;
	border-radius: 50%;
	background: var(--tint);
}
.bb-bento__link {
	display: inline-block;
	margin: 14px 20px 20px;
	font-size: 13.5px; font-weight: 800;
	color: var(--tint);
	text-decoration: none;
}
.bb-bento__link:hover { text-decoration: underline; }

@media (max-width: 1100px) {
	.bb-bento { grid-template-columns: repeat(2, 1fr); }
	.bb-bento__tile--big { grid-column: span 2; }
}
@media (max-width: 700px) {
	.bb-bento-sec { padding: 58px 0 62px; }
	.bb-bento { grid-template-columns: 1fr; gap: 12px; margin-top: 28px; }
	.bb-bento__tile--big { grid-column: auto; }
	.bb-bento__toggle { padding: 18px 16px; }
	.bb-bento__name,
	.bb-bento__tile--big .bb-bento__name { font-size: 17px; }
	.bb-bento__bul { padding-inline: 16px; }
	.bb-bento__link { margin-inline: 16px; }
}

/* =====================================================================
   How we work — five steps, plain vertical list. No pin, no scrub.
   ===================================================================== */

.bb-steps-sec {
	background: var(--bb-dark);
	border-top: 1px solid rgba(255, 255, 255, 0.06);
	padding: 76px 0 80px;
}
.bb-steps__head { text-align: center; margin-bottom: 34px; }
.bb-steps__h2 {
	font-size: clamp(28px, 4vw, 48px);
	font-weight: 900; letter-spacing: -0.03em; line-height: 1.12;
	color: #fff; margin: 8px 0 0;
}
.bb-steps__h2 em { color: var(--bb-primary); font-style: normal; }

.bb-steps {
	list-style: none;
	/* max-width without an auto margin leaves the list hugging the right edge
	   in RTL instead of sitting under its centred heading */
	margin: 0 auto;
	padding: 0;
	max-width: 860px;
	display: grid;
	gap: 2px;
}
.bb-steps__item {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 20px;
	padding: 20px 22px;
	background: #121214;
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-radius: 14px;
	transition: border-color 0.25s ease, transform 0.25s ease;
}
.bb-steps__item:hover {
	border-color: rgba(230, 55, 120, 0.45);
	transform: translateX(-4px);
}
.bb-steps__n {
	font-size: 22px; font-weight: 900;
	color: var(--bb-primary);
	letter-spacing: -0.04em;
	min-width: 34px;
}
.bb-steps__t { font-size: 17px; font-weight: 800; color: #fff; margin: 0; }
.bb-steps__d { font-size: 13.5px; line-height: 1.6; color: rgba(255, 255, 255, 0.5); margin: 4px 0 0; }
.bb-steps__when {
	font-size: 12px; font-weight: 700;
	color: rgba(255, 255, 255, 0.42);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 999px;
	padding: 5px 12px;
	white-space: nowrap;
}

@media (max-width: 700px) {
	.bb-steps-sec { padding: 56px 0 58px; }
	.bb-steps__item {
		grid-template-columns: auto 1fr;
		gap: 14px;
		padding: 16px 16px;
	}
	.bb-steps__when { grid-column: 2; justify-self: start; margin-top: 4px; }
	.bb-steps__item:hover { transform: none; }
}