/* Brain Balance company hub. Loaded only on /brain-balance/. */

/*
 * WordPress' constrained-layout rules add auto margins and content-width limits
 * to direct children. These sections use those children as explicit grid items,
 * so neutralise the generated constraints before applying the editorial grid.
 */
.bb-site .entry-content > .bb-company-team > *,
.bb-site .entry-content > .bb-company-intro > *,
.bb-site .entry-content > .bb-company-approach > *,
.bb-site .entry-content > .bb-company-final > * {
	width: 100%;
	max-width: none;
	margin-right: 0 !important;
	margin-left: 0 !important;
}

.bb-site .entry-content > .bb-company-team > .bb-company-team__signal,
.bb-site .entry-content > .bb-company-intro > .ab-eyebrow,
.bb-site .entry-content > .bb-company-approach > .bb-company-approach__copy {
	width: auto;
}

/* Shared links. */
.bb-site .bb-company-team__link,
.bb-site .bb-company-intro__link {
	margin: 1.55rem 0 0;
}

.bb-site .bb-company-team__link a,
.bb-site .bb-company-intro__link a {
	display: inline-flex;
	gap: 0.72rem;
	align-items: center;
	min-height: 3.15rem;
	padding: 0.5rem 0.58rem 0.5rem 1.28rem;
	border-radius: 999px;
	font-size: 0.88rem;
	font-weight: 760;
	text-decoration: none;
	transition: background-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.bb-site .bb-company-team__link a::after,
.bb-site .bb-company-intro__link a::after {
	display: inline-grid;
	width: 2.05rem;
	flex: 0 0 2.05rem;
	place-items: center;
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--bb-sun);
	color: var(--bb-petrol-dark);
	content: "↗";
	font-size: 0.78rem;
}

/* 1. Photo-led team hero: the copy is genuinely over the image. */
.bb-site .entry-content > .bb-company-team {
	position: relative;
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: clamp(1.5rem, 4vw, 4.5rem);
	min-height: clamp(31rem, 42vw, 39rem);
	align-items: center;
	overflow: hidden;
	padding-block: clamp(3.2rem, 5vw, 4.75rem);
	background:
		linear-gradient(90deg, rgb(7 42 40 / 96%) 0%, rgb(7 42 40 / 88%) 38%, rgb(7 42 40 / 42%) 64%, rgb(7 42 40 / 14%) 100%),
		url("../images/company-team-connection-v1.webp") center 48% / cover no-repeat,
		var(--bb-petrol-dark);
	color: var(--bb-white);
	isolation: isolate;
}

.bb-site .entry-content > .bb-company-team::before {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(180deg, rgb(255 255 255 / 5%), transparent 35%),
		radial-gradient(circle at 18% 14%, rgb(242 233 168 / 11%), transparent 22rem);
	content: "";
	pointer-events: none;
}

.bb-site .entry-content > .bb-company-team::after {
	position: absolute;
	right: clamp(1.25rem, 4vw, 4.5rem);
	bottom: 1.45rem;
	left: clamp(1.25rem, 4vw, 4.5rem);
	height: 1px;
	background: rgb(255 255 255 / 20%);
	content: "";
	pointer-events: none;
}

.bb-site .bb-company-team__intro,
.bb-site .bb-company-team__signal {
	position: relative;
	z-index: 1;
}

.bb-site .bb-company-team__intro {
	grid-column: 1 / 7;
	margin: 0;
}

.bb-site .bb-company-team__intro > .ab-eyebrow {
	--bb-eyebrow-surface: var(--bb-sun);
	--bb-eyebrow-ink: var(--bb-petrol-dark);

	justify-self: start;
	margin: 0 0 1.25rem !important;
}

.bb-site .bb-company-team__intro > h1 {
	max-width: 10ch;
	margin: 0;
	color: var(--bb-white);
	font-size: clamp(3.25rem, 5.3vw, 5.4rem);
	line-height: 0.94;
	text-align: left !important;
	text-wrap: balance;
}

.bb-site .bb-company-team__lead {
	max-width: 48ch;
	margin: 1.35rem 0 0;
	color: rgb(255 253 249 / 82%);
	font-size: clamp(0.96rem, 1.08vw, 1.06rem);
	line-height: 1.65;
}

.bb-site .bb-company-team__link a {
	background: var(--bb-white);
	color: var(--bb-petrol-dark);
}

.bb-site .bb-company-team__link a:hover {
	background: var(--bb-sun);
	transform: translateY(-2px);
}

.bb-site .bb-company-team__signal {
	grid-column: 8 / -1;
	align-self: start;
	justify-self: end;
	max-width: 24rem;
	margin: clamp(4.75rem, 7vw, 6.5rem) 0 0 !important;
	padding: 1.1rem 1.25rem;
	border: 1px solid rgb(255 255 255 / 20%);
	border-radius: 1.15rem;
	background: rgb(7 42 40 / 44%);
	box-shadow: 0 1rem 2.4rem rgb(3 29 28 / 18%);
	backdrop-filter: blur(0.45rem);
}

.bb-site .bb-company-team__signal-word {
	margin: 0;
	color: var(--bb-sun);
	font-family: var(--bb-editorial);
	font-size: clamp(2.9rem, 4vw, 4.2rem);
	font-style: italic;
	line-height: 0.9;
}

.bb-site .bb-company-team__signal-copy {
	margin: 0.75rem 0 0;
	color: rgb(255 253 249 / 78%);
	font-size: 0.84rem;
	line-height: 1.5;
}

/* 2. Compact editorial "about" block. */
.bb-site .entry-content > .bb-company-intro {
	position: relative;
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: clamp(1.6rem, 4.2vw, 4.8rem);
	row-gap: 1.15rem;
	align-items: start;
	overflow: hidden;
	padding-block: clamp(3.4rem, 5vw, 4.8rem);
	background:
		radial-gradient(circle at 94% 8%, rgb(223 233 222 / 58%), transparent 18rem),
		var(--bb-paper);
}

.bb-site .entry-content > .bb-company-intro::before {
	position: absolute;
	right: max(1rem, calc((100vw - 75rem) / 2));
	bottom: -2.4rem;
	color: rgb(35 78 75 / 4%);
	content: "BB";
	font-family: var(--bb-editorial);
	font-size: clamp(8rem, 14vw, 14rem);
	line-height: 0.75;
	pointer-events: none;
}

.bb-site .entry-content > .bb-company-intro > * {
	position: relative;
	z-index: 1;
}

.bb-site .bb-company-intro > .ab-eyebrow {
	--bb-eyebrow-surface: var(--bb-petrol);
	--bb-eyebrow-ink: var(--bb-white);

	grid-column: 1 / -1;
	justify-self: start;
	margin: 0 0 0.25rem !important;
}

.bb-site .bb-company-intro > h2 {
	grid-column: 1 / 7;
	max-width: 13ch;
	margin: 0 !important;
	font-size: clamp(2.65rem, 4vw, 4.15rem);
	line-height: 0.98;
	text-align: left !important;
	text-wrap: balance;
}

.bb-site .bb-company-intro__body {
	grid-column: 8 / -1;
	margin: 0 !important;
	padding-top: 0.35rem;
}

.bb-site .bb-company-intro__lead {
	max-width: 48ch;
	margin: 0;
	color: var(--bb-muted);
	font-size: clamp(0.97rem, 1.1vw, 1.06rem);
	line-height: 1.68;
}

.bb-site .bb-company-intro__facts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin: 1.65rem 0 0;
	border-block: 1px solid rgb(35 78 75 / 16%);
}

.bb-site .bb-company-intro__facts > p {
	margin: 0;
	padding: 1.05rem 1rem 1.05rem 0;
	color: var(--bb-muted);
	font-size: 0.84rem;
	line-height: 1.5;
}

.bb-site .bb-company-intro__facts > p + p {
	padding-left: 1rem;
	border-left: 1px solid rgb(35 78 75 / 16%);
}

.bb-site .bb-company-intro__facts strong {
	display: inline-block;
	margin-bottom: 0.2rem;
	color: var(--bb-petrol-dark);
	font-family: var(--bb-editorial);
	font-size: 1.18rem;
	font-weight: 500;
	line-height: 1.1;
}

.bb-site .bb-company-intro__link a {
	background: var(--bb-petrol);
	color: var(--bb-white);
}

.bb-site .bb-company-intro__link a:hover {
	background: var(--bb-petrol-dark);
	transform: translateY(-2px);
}

/* 3. Approach: short editorial statement plus three crisp principles. */
.bb-site .entry-content > .bb-company-approach {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
	gap: clamp(2rem, 5vw, 5.5rem);
	align-items: start;
	overflow: hidden;
	padding-block: clamp(3.5rem, 5.2vw, 5rem);
	background:
		radial-gradient(circle at 3% 100%, rgb(242 233 168 / 18%), transparent 22rem),
		linear-gradient(145deg, #123f3d, var(--bb-petrol-dark));
	color: var(--bb-white);
}

.bb-site .entry-content > .bb-company-approach::before {
	position: absolute;
	top: -8rem;
	right: -7rem;
	width: 20rem;
	aspect-ratio: 1;
	border: 1px solid rgb(255 255 255 / 8%);
	border-radius: 50%;
	content: "";
	pointer-events: none;
}

.bb-site .bb-company-approach__copy,
.bb-site .bb-company-principles {
	position: relative;
	z-index: 1;
}

.bb-site .bb-company-approach__copy {
	position: sticky;
	top: 8rem;
	translate: 0 -2.85rem;
	margin: 0 !important;
}

.bb-site .bb-company-approach__copy > .ab-eyebrow {
	--bb-eyebrow-surface: var(--bb-sun);
	--bb-eyebrow-ink: var(--bb-petrol-dark);

	justify-self: start;
	margin: 0 0 1.25rem !important;
}

.bb-site .bb-company-approach__copy > h2 {
	max-width: 12ch;
	margin: 0;
	color: var(--bb-white);
	font-size: clamp(2.55rem, 3.75vw, 3.9rem);
	line-height: 0.99;
	text-align: left !important;
	text-wrap: balance;
}

.bb-site .bb-company-approach__lead {
	max-width: 45ch;
	margin: 1.3rem 0 0;
	color: rgb(255 253 249 / 76%);
	font-size: 0.96rem;
	line-height: 1.65;
}

.bb-site .bb-company-principles {
	display: grid;
	gap: 0.8rem;
	margin: 0 !important;
}

.bb-site .bb-company-principle {
	display: grid;
	grid-template-columns: 4.15rem minmax(0, 1fr);
	gap: 1.2rem;
	align-items: start;
	margin: 0;
	padding: clamp(1.25rem, 2vw, 1.65rem);
	border: 1px solid rgb(255 255 255 / 14%);
	border-radius: 1.2rem;
	background: rgb(255 255 255 / 8%);
	box-shadow: 0 1rem 2.6rem rgb(3 29 28 / 13%);
}

.bb-site .bb-company-principle:nth-child(2) {
	background: rgb(223 233 222 / 11%);
}

.bb-site .bb-company-principle__number {
	display: grid;
	width: 3.7rem;
	place-items: center;
	aspect-ratio: 1;
	margin: 0;
	border: 1px solid rgb(242 233 168 / 42%);
	border-radius: 50%;
	color: var(--bb-sun);
	font-family: var(--bb-editorial);
	font-size: 1.25rem;
	line-height: 1;
}

.bb-site .bb-company-principle__copy {
	margin: 0;
}

.bb-site .bb-company-principle__copy > h3 {
	margin: 0 0 0.45rem;
	color: var(--bb-white);
	font-size: clamp(1.45rem, 1.8vw, 1.75rem);
	line-height: 1.08;
}

.bb-site .bb-company-principle__copy > p {
	max-width: 52ch;
	margin: 0;
	color: rgb(255 253 249 / 72%);
	font-size: 0.88rem;
	line-height: 1.58;
}

/* 4. Final contact banner, visually aligned with Psychotherapy. */
.bb-site .bb-company-final {
	position: relative;
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: clamp(1rem, 2vw, 1.5rem);
	row-gap: clamp(0.75rem, 1.4vw, 1.1rem);
	overflow: hidden;
	margin-bottom: clamp(0.8rem, 1.3vw, 1.15rem);
	padding-block: clamp(2.8rem, 4.3vw, 3.8rem);
	background:
		linear-gradient(90deg, rgb(13 55 53 / 96%) 0%, rgb(13 55 53 / 89%) 43%, rgb(13 55 53 / 28%) 72%, rgb(13 55 53 / 10%) 100%),
		url("../images/psychotherapy-first-step-cta-v1.webp") center / cover no-repeat,
		var(--bb-petrol-dark);
	color: var(--bb-white);
}

.bb-site .bb-company-final > h2 {
	grid-column: 1 / 7;
	max-width: 13ch;
	margin: 0;
	color: var(--bb-white);
	font-size: clamp(2.55rem, 3.7vw, 3.75rem);
	line-height: 0.97;
	text-align: left !important;
}

.bb-site .bb-company-final > h2 .bb-title-accent {
	color: var(--bb-sun);
}

.bb-site .bb-company-final > p:not(.ab-safety-note),
.bb-site .bb-company-final > .wp-block-buttons {
	grid-column: 1 / 7;
}

.bb-site .bb-company-final > p:not(.ab-safety-note) {
	max-width: 46ch;
	margin: 0;
	color: rgb(255 253 249 / 84%);
	font-size: 0.96rem;
	line-height: 1.58;
	text-align: left !important;
}

.bb-site .bb-company-final > .wp-block-buttons {
	justify-content: flex-start;
	margin: 0;
}

.bb-site .bb-company-final .wp-block-button__link {
	border-color: var(--bb-sun);
	background: var(--bb-sun);
	color: var(--bb-petrol-dark);
}

.bb-site .bb-company-final > .ab-safety-note {
	grid-column: 1 / 8;
	max-width: 78ch;
	margin: 0.25rem 0 0;
	padding-top: 0.85rem;
	border-top: 1px solid rgb(255 255 255 / 20%);
	color: rgb(255 253 249 / 68%);
	font-size: 0.74rem;
	line-height: 1.46;
	text-align: left !important;
}

/* Small, deliberate separation between chapters. */
.bb-site .entry-content > .bb-company-team + .bb-company-intro,
.bb-site .entry-content > .bb-company-intro + .bb-company-approach {
	margin-top: clamp(0.7rem, 1.15vw, 1rem);
}

.bb-site .entry-content > .bb-company-approach + .bb-company-final {
	margin-top: clamp(1.35rem, 2.2vw, 2rem);
}

@media (max-width: 900px) {
	.bb-site .bb-company-team__intro {
		grid-column: 1 / 8;
	}

	.bb-site .bb-company-team__signal {
		grid-column: 8 / -1;
	}

	.bb-site .bb-company-intro > h2 {
		grid-column: 1 / 7;
	}

	.bb-site .bb-company-intro__body {
		grid-column: 7 / -1;
	}
}

@media (max-width: 720px) {
	.bb-site .entry-content > .bb-company-team,
	.bb-site .entry-content > .bb-company-intro,
	.bb-site .entry-content > .bb-company-approach {
		display: block;
		padding-block: 3.25rem;
	}

	.bb-site .entry-content > .bb-company-team {
		min-height: 39rem;
		padding-bottom: 2.75rem;
		background:
			linear-gradient(180deg, rgb(7 42 40 / 94%) 0%, rgb(7 42 40 / 78%) 44%, rgb(7 42 40 / 35%) 72%, rgb(7 42 40 / 66%) 100%),
			url("../images/company-team-connection-v1.webp") center 50% / cover no-repeat,
			var(--bb-petrol-dark);
	}

	.bb-site .bb-company-team__intro > h1 {
		max-width: 9ch;
		font-size: clamp(3.1rem, 13vw, 4.6rem);
	}

	.bb-site .bb-company-team__lead {
		max-width: 38rem;
	}

	.bb-site .bb-company-team__signal {
		max-width: 19rem;
		margin: 2rem 0 0 auto !important;
		padding: 0.95rem 1.05rem;
	}

	.bb-site .bb-company-team__signal-word {
		font-size: 2.8rem;
	}

	.bb-site .bb-company-intro > h2,
	.bb-site .bb-company-approach__copy > h2 {
		max-width: 17ch;
		font-size: clamp(2.55rem, 10.8vw, 3.65rem);
	}

	.bb-site .bb-company-intro__body {
		margin-top: 1.4rem;
		padding-top: 0;
	}

	.bb-site .entry-content > .bb-company-approach {
		padding-block: 3.5rem;
	}

	.bb-site .bb-company-approach__copy {
		position: relative;
		top: auto;
		translate: none;
	}

	.bb-site .bb-company-principles {
		margin-top: 2.1rem;
	}

	.bb-site .bb-company-final {
		grid-template-columns: minmax(0, 1fr);
		min-height: 30rem;
		align-content: end;
		padding-block: 3rem;
		background:
			linear-gradient(180deg, rgb(13 55 53 / 16%) 0%, rgb(13 55 53 / 78%) 42%, rgb(13 55 53 / 97%) 100%),
			url("../images/psychotherapy-first-step-cta-mobile-v1.webp") center 24% / cover no-repeat,
			var(--bb-petrol-dark);
	}

	.bb-site .bb-company-final > h2,
	.bb-site .bb-company-final > p:not(.ab-safety-note),
	.bb-site .bb-company-final > .wp-block-buttons,
	.bb-site .bb-company-final > .ab-safety-note {
		grid-column: 1;
	}

	.bb-site .bb-company-final > h2 {
		max-width: 12ch;
		font-size: clamp(2.55rem, 10.8vw, 3.65rem);
	}
}

@media (max-width: 480px) {
	.bb-site .bb-company-team__link a,
	.bb-site .bb-company-intro__link a,
	.bb-site .bb-company-final .wp-block-button,
	.bb-site .bb-company-final .wp-block-button__link {
		width: 100%;
	}

	.bb-site .bb-company-team__link a,
	.bb-site .bb-company-intro__link a,
	.bb-site .bb-company-final .wp-block-button__link {
		justify-content: space-between;
	}

	.bb-site .bb-company-intro__facts {
		grid-template-columns: minmax(0, 1fr);
	}

	.bb-site .bb-company-intro__facts > p + p {
		padding-top: 0;
		padding-left: 0;
		border-left: 0;
	}

	.bb-site .bb-company-principle {
		grid-template-columns: 3.35rem minmax(0, 1fr);
		gap: 0.85rem;
		padding: 1.15rem;
	}

	.bb-site .bb-company-principle__number {
		width: 3.15rem;
	}
}

@supports not (backdrop-filter: blur(0.45rem)) {
	.bb-site .bb-company-team__signal {
		background: rgb(7 42 40 / 78%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.bb-site .bb-company-team__link a,
	.bb-site .bb-company-intro__link a {
		transition: none;
	}
}