/**
 * BCMB main stylesheet.
 * Loaded on the front end and in the editor.
 */

:root {
	--bcmb-blue: #14376b;
	--bcmb-cyan: #236192;
	/* Text colours. The page title (h1) is black; h2–h6 keep the concept
	 * palette (navy, Pantone 312 light blue, green, black) and body copy is
	 * Pantone 432 — a softer black from the BCMB secondary palette. */
	--bcmb-ink: #000000;
	--bcmb-body: #333f48;
	/* Pantone 312, the lighter secondary blue used for content headings. Kept
	 * separate from --bcmb-cyan, which the client darkened for links. */
	--bcmb-heading-blue: #00a6ce;
	--bcmb-green: #3dae2b;
	--bcmb-lime: #c2d500;
	--bcmb-mid-blue: #236092;
	--bcmb-mid-green: #60ab3a;
	--bcmb-leaf: #54b948;
	--bcmb-pale-blue: #dceffb;
	--bcmb-content: 1000px;
	--bcmb-wide: 1200px;
	--bcmb-overlay: linear-gradient(90deg, rgba(84, 185, 72, 0.5) 0%, rgba(35, 96, 146, 1) 100%);
}

/* ---------------------------------------------------------------------------
 * Base
 * ------------------------------------------------------------------------- */
body {
	overflow-x: hidden;
}

/* Text selection uses the brand green. */
::selection {
	background: var(--bcmb-green);
	color: #fff;
}

::-moz-selection {
	background: var(--bcmb-green);
	color: #fff;
}

/* Full-bleed: break out of any constrained ancestor to the viewport edges.
 * Works regardless of nesting because it doesn't rely on the parent width,
 * only on the block being horizontally centered (margin auto). */
.bcmb-hero.alignfull,
.bcmb-cta.alignfull,
.bcmb-posts.alignfull,
.bcmb-depot-toolbar.alignfull,
.bcmb-notices.alignfull,
.bcmb-page-banner.alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* ===========================================================================
 * Buttons (primary)
 * ======================================================================== */
.bcmb-button,
.wp-block-button__link,
.wp-block-button .wp-element-button {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 20px 40px;
	border: none;
	border-radius: 8px;
	background: var(--bcmb-green);
	color: #fff;
	font-weight: 800;
	font-size: 1.4rem;
	line-height: 1.2;
	text-decoration: none;
	transition: filter 0.2s ease, transform 0.2s ease;
}

.bcmb-button:hover,
.wp-block-button__link:hover,
.wp-block-button .wp-element-button:hover {
	filter: brightness(1.06);
	transform: translateY(-1px);
	color: #fff;
}

.bcmb-button svg {
	width: 11px;
	height: auto;
	flex: 0 0 auto;
}

/* Core button block: append the same chevron as the hero button. */
.wp-block-button__link::after,
.wp-block-button .wp-element-button::after {
	content: "";
	flex: 0 0 auto;
	width: 11px;
	height: 20px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.05 25.8'%3E%3Cpath d='M.41 2.45A1.44 1.44 0 0 1 .44.41a1.44 1.44 0 0 1 2.04.03l11.16 11.5-1.04 1.01 1.04-1.01c.56.58.54 1.49-.03 2.05l-.05.05L2.48 25.36c-.56.57-1.47.59-2.04.03s-.58-1.47-.03-2.04l10.18-10.4z'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.05 25.8'%3E%3Cpath d='M.41 2.45A1.44 1.44 0 0 1 .44.41a1.44 1.44 0 0 1 2.04.03l11.16 11.5-1.04 1.01 1.04-1.01c.56.58.54 1.49-.03 2.05l-.05.05L2.48 25.36c-.56.57-1.47.59-2.04.03s-.58-1.47-.03-2.04l10.18-10.4z'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ===========================================================================
 * Header
 * ======================================================================== */
.bcmb-header {
	position: absolute;
	inset: 0 0 auto 0;
	z-index: 100;
}

/* Remove the global block-gap margin between the top bar and main bar so the
 * logo's negative offset can reach the very top of the page. */
.bcmb-header > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* Offset the header so the WordPress admin bar doesn't cover it. */
.admin-bar .bcmb-header {
	top: 32px;
}

@media screen and (max-width: 782px) {
	.admin-bar .bcmb-header {
		top: 46px;
	}
}

.bcmb-topbar {
	background: var(--bcmb-mid-blue);
	padding-top: 8px;
	padding-bottom: 8px;
}

/* Avenir Black (900), all caps, white — per client direction. */
.bcmb-topbar__nav {
	color: #fff;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.bcmb-topbar__nav a,
.bcmb-topbar__nav .wp-block-navigation-item__content {
	color: #fff;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	text-decoration: none;
}

.bcmb-topbar__nav a:hover {
	color: var(--bcmb-lime);
}

.bcmb-mainbar {
	padding-top: 0;
	padding-bottom: 0;
}

.bcmb-mainbar__inner {
	align-items: center;
	justify-content: flex-end;
	min-height: 90px;
	padding-left: 200px; /* reserve space for the floating logo */
}

/* White logo block: floats from the very top of the page, in front of the
 * blue top bar, with rounded bottom corners. */
.bcmb-logo {
	position: absolute;
	top: 0;
	left: max(20px, calc(50% - 600px));
	z-index: 110;
	margin: 0;
	padding: 18px 26px 22px;
	background: #fff;
	border-radius: 0 0 18px 18px;
}

.bcmb-logo .wp-block-site-logo img {
	display: block;
	width: 180px;
	height: auto;
}

.bcmb-mainbar__right {
	align-items: center;
	gap: 24px;
}

/* Primary nav */
.bcmb-primary-nav {
	font-weight: 700;
	font-size: 1.0625rem;
}

.bcmb-primary-nav a,
.bcmb-primary-nav .wp-block-navigation-item__content {
	color: #fff;
	text-decoration: none;
}

.bcmb-primary-nav a:hover {
	color: var(--bcmb-lime);
}

.bcmb-primary-nav .wp-block-navigation__submenu-container {
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 12px 30px rgba(20, 55, 107, 0.18);
	padding: 0;
	min-width: 240px;
	margin-top: 18px;
}

/* Invisible bridge filling the gap between the toggle and the dropped-down
 * panel, so moving the cursor from the link down into the submenu keeps the
 * parent :hover alive (otherwise the menu closes over the gap). */
.bcmb-primary-nav .has-child::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	height: 18px;
}

/* Core drops a 1px border on the panel and forces overflow:visible on hover
 * (higher specificity than a single-class rule), which squares off our rounded
 * corners and lets item hover backgrounds spill past them. Out-specify both so
 * the panel stays a clean rounded, edge-clipped card. */
.bcmb-primary-nav.wp-block-navigation .has-child > .wp-block-navigation__submenu-container,
.bcmb-primary-nav.wp-block-navigation .has-child:hover > .wp-block-navigation__submenu-container,
.bcmb-primary-nav.wp-block-navigation .has-child:focus-within > .wp-block-navigation__submenu-container {
	border: none;
	border-radius: 10px;
	overflow: hidden;
}

/* Each item is a full-bleed row whose hover background touches the panel edges. */
.bcmb-primary-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	display: block;
	color: var(--bcmb-blue);
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.3;
	padding: 0.75rem 1.125rem;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.bcmb-primary-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.bcmb-primary-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus {
	color: #fff;
	background: var(--bcmb-green);
}

/* Search icon */
.bcmb-search .wp-block-search__button {
	background: var(--bcmb-lime);
	border: none;
	border-radius: 50%;
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	color: var(--bcmb-blue);
}

.bcmb-search .wp-block-search__button:hover {
	background: #fff;
}

/* Swap the default search icon for the brand SVG (masked so we keep the colour). */
.bcmb-search .wp-block-search__button svg {
	display: none;
}

.bcmb-search .wp-block-search__button::before {
	content: "";
	width: 18px;
	height: 18px;
	background-color: var(--bcmb-blue);
	-webkit-mask: url(../svg/icon-search.svg) no-repeat center / contain;
	mask: url(../svg/icon-search.svg) no-repeat center / contain;
}

/* ===========================================================================
 * Main / interior pages
 * ======================================================================== */
.bcmb-main--flush > .wp-block-post-content > *:first-child {
	margin-top: 0;
}

/* Interior pages clear the absolute header via the page banner, so the main
 * region only needs a little breathing room beneath it. The front page uses
 * the --flush variant (hero sits behind the header), so it gets no padding. */
.bcmb-main:not(.bcmb-main--flush) {
	padding-top: 2.5rem;
}

/* ===========================================================================
 * Page banner (interior pages)
 * ======================================================================== */
.bcmb-page-banner {
	position: relative;
	/* Sit flush at the top so the absolute header overlays the image. */
	margin-block-start: 0;
}

.bcmb-page-banner__media {
	position: relative;
	height: 210px;
	overflow: hidden;
}

.bcmb-page-banner__bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: 0 560px;
	z-index: 0;
}

.bcmb-page-banner__bg--placeholder {
	background: linear-gradient(120deg, #2c5f8a, #4a8c3d);
}

/* Bottles straddle the bottom edge of the image into the content area. */
.bcmb-page-banner__bottles {
	position: absolute;
	top: 125px;
	right: max(20px, calc(50% - 600px));
	height: 235px;
	z-index: 2;
	pointer-events: none;
}

.bcmb-page-banner__bottles svg {
	height: 100%;
	width: auto;
}

.bcmb-page-banner__content {
	position: relative;
	z-index: 3;
	max-width: var(--bcmb-content);
	margin: 0 auto;
	padding: 1.5rem 20px 0.5rem;
}

.bcmb-breadcrumbs {
	color: #9aa6b2;
	font-size: 0.8rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin-bottom: 1.5rem;
}

.bcmb-breadcrumbs a {
	color: var(--bcmb-mid-blue);
	font-weight: 800;
	text-decoration: none;
}

.bcmb-breadcrumbs a:hover {
	color: var(--bcmb-cyan);
}

/* Current page: muted grey, not a link. */
.bcmb-breadcrumbs .breadcrumb_last {
	color: #9aa6b2;
	font-weight: 600;
}

.bcmb-page-banner__title {
	color: var(--bcmb-green);
	font-size: clamp(2.2rem, 5vw, 3.6rem);
	font-weight: 700;
	line-height: 1.05;
	margin: 0;
	max-width: 80%;
}

/* Pages (not posts) get a thinner, blue title. */
.page .bcmb-page-banner__title {
	color: var(--bcmb-ink);
	font-weight: 500;
}

.bcmb-page-banner__subtitle {
	color: var(--bcmb-body);
	font-size: 1.35rem;
	font-weight: 700;
	margin: 0.5rem 0 0;
}

/* When a subheading is present the green rule moves below it, so the pair
 * reads as one title block. */
.bcmb-page-banner__title:has(+ .bcmb-page-banner__subtitle)::after {
	display: none;
}

.bcmb-page-banner__subtitle::after {
	content: "";
	display: block;
	width: 90px;
	height: 4px;
	margin-top: 1rem;
	background: var(--bcmb-green);
	border-radius: 2px;
}

/* Short green underline beneath the page title. */
.bcmb-page-banner__title::after {
	content: "";
	display: block;
	width: 90px;
	height: 4px;
	margin-top: 1rem;
	background: var(--bcmb-green);
	border-radius: 2px;
}

@media (max-width: 782px) {
	.bcmb-page-banner__media {
		height: 150px;
	}

	.bcmb-page-banner__bottles {
		display: none;
	}

	.bcmb-page-banner__title {
		max-width: 100%;
	}
}

.bcmb-page__title {
	font-size: clamp(2rem, 4vw, 3rem);
	margin-bottom: 0.5rem;
}

.bcmb-post-meta {
	color: var(--bcmb-mid-blue);
}

.bcmb-post-featured {
	margin: 1.5rem auto 2rem;
	max-width: var(--bcmb-content);
}

.bcmb-post-featured img {
	border-radius: 14px;
	width: 100%;
}

/* Single post: content + sidebar columns. */
.bcmb-single__columns.alignwide {
	max-width: var(--bcmb-content); /* 1000px instead of the 1200px wide-size */
	gap: 3rem;
	margin-top: 0.5rem;
}

/* Post tags ("Tags  Reports  Recycling System"). */
.bcmb-post-tags {
	margin-bottom: 1.5rem;
	color: var(--bcmb-blue);
	font-size: 0.95rem;
}

.bcmb-post-tags a {
	color: var(--bcmb-blue);
	text-decoration: underline;
	text-decoration-color: var(--bcmb-green);
	text-decoration-thickness: 3px;
	text-underline-offset: 5px;
	margin-left: 0.6rem;
}

.bcmb-post-tags a:hover {
	color: var(--bcmb-cyan);
}

/* Sidebar */
.bcmb-single__sidebar {
	font-size: 0.95rem;
	position: relative;
}

.bcmb-single__sidebar-title {
	color: #6b7280;
	font-weight: 600;
	border-bottom: 3px solid var(--bcmb-green);
	padding-bottom: 0.5rem;
	margin-bottom: 1.25rem;
}

/* "More Topics" category list. */
.bcmb-topics {
	list-style: none;
	margin: 0;
	padding-left: 0;
}

.bcmb-topics li {
	margin-bottom: 1rem;
}

.bcmb-topics a {
	color: var(--bcmb-blue);
	font-weight: 800;
	text-decoration: none;
}

.bcmb-topics a:hover {
	color: var(--bcmb-cyan);
}

/* Decorative bottles floating out in the right gutter, pinned to the browser
 * edge. The columns are alignwide (1000px, centered), so the sidebar's right
 * edge sits at viewport-center + 500px; calc(500px - 50vw) reaches the edge. */
.bcmb-single__sidebar::after {
	content: "";
	position: absolute;
	top: 70px;
	right: calc(500px - 50vw);
	width: 280px;
	aspect-ratio: 373 / 608;
	background: url(../svg/bottles-06.svg) no-repeat top center;
	background-size: contain;
	pointer-events: none;
}

/* No gutter to float into on narrower screens — hide the decoration. */
@media (max-width: 1320px) {
	.bcmb-single__sidebar::after {
		display: none;
	}
}

/* Related posts grid (below the post content). */
.bcmb-related {
	margin-top: 3rem;
}

.bcmb-related__title {
	color: #6b7280;
	font-weight: 600;
	font-size: 1.1rem;
	border-bottom: 3px solid var(--bcmb-green);
	padding-bottom: 0.5rem;
	margin: 0 0 1.5rem;
}

.bcmb-related__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.bcmb-related__grid .bcmb-card {
	min-height: 160px;
}

.bcmb-related__grid .bcmb-card__title {
	left: 18px;
	right: 18px;
	top: 16px;
	font-size: 1.1rem;
}

@media (max-width: 600px) {
	.bcmb-related__grid {
		grid-template-columns: 1fr;
	}
}

/* ===========================================================================
 * Content styles (post / page body)
 * ======================================================================== */
.wp-block-post-content h2,
.wp-block-post-content h3 {
	color: var(--bcmb-heading-blue);
}

.wp-block-post-content h2 {
	font-size: 1.75rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	margin-top: 2rem;
}

.wp-block-post-content h3 {
	font-size: 1.35rem;
}

/* Content links: green with a thicker underline, cyan on hover. Excludes the
 * Depot Notices links and breadcrumb links, which carry their own styling
 * (breadcrumbs only land inside post-content via the depot toolbar block). */
.wp-block-post-content a:not(.bcmb-button):not(.wp-element-button):not(.bcmb-notices__link):not(.bcmb-notices__cat):not(.bcmb-breadcrumbs a):not(.bcmb-cta__inner a):not(.bcmb-hero__col--feature):not(.bcmb-director__name-link):not(.bcmb-director__photo-link):not(.bcmb-director-bio__back):not(.bcmb-partner__logo-link):not(.bcmb-partner__name-link):not(.bcmb-tabs__doc-link):not(.bcmb-careers__job-link):not(.bcmb-research-cards__card-link):not(.bcmb-doclist__link):not(.bcmb-notices__page) {
	color: var(--bcmb-green);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.wp-block-post-content a:not(.bcmb-button):not(.wp-element-button):not(.bcmb-notices__link):not(.bcmb-notices__cat):not(.bcmb-breadcrumbs a):not(.bcmb-cta__inner a):not(.bcmb-hero__col--feature):not(.bcmb-director__name-link):not(.bcmb-director__photo-link):not(.bcmb-director-bio__back):not(.bcmb-partner__logo-link):not(.bcmb-partner__name-link):not(.bcmb-tabs__doc-link):not(.bcmb-careers__job-link):not(.bcmb-research-cards__card-link):not(.bcmb-doclist__link):not(.bcmb-notices__page):hover {
	color: var(--bcmb-cyan);
}

.wp-block-post-content ul li::marker {
	color: var(--bcmb-green);
}

/* ===========================================================================
 * Hero block
 * ======================================================================== */
.bcmb-hero {
	position: relative;
	overflow: hidden;
	min-height: 820px;
	display: flex;
	align-items: center;
	color: #fff;
}

.bcmb-hero__bg {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 140%;
	background-size: cover;
	background-position: center 0%;
	z-index: 0;
	will-change: transform;
	/* Default nudge up 20px; the parallax JS overrides transform on scroll. */
	transform: translate3d(0, -20px, 0);
}

.bcmb-hero__bg--placeholder {
	background: linear-gradient(120deg, #2c5f8a, #4a8c3d);
}

.bcmb-hero__bottles {
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	pointer-events: none;
}

.bcmb-hero__bottles svg {
	height: 90%;
	width: auto;
}

.bcmb-hero__inner {
	position: relative;
	z-index: 3;
	width: 100%;
	max-width: var(--bcmb-wide);
	margin: 0 auto;
	padding: 90px 30px 60px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
}

/* Translucent blue panel behind the hero copy. It bleeds off the left edge of
 * the viewport (via ::before) and is rounded on its right-hand corners only. */
.bcmb-hero__col--content {
	position: relative;
	box-sizing: border-box;
	max-width: 680px;
	padding: 48px 56px 52px;
	background: rgba(0, 86, 148, 0.8);
	border-radius: 0 18px 18px 0;
}

.bcmb-hero__col--content::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	right: 100%;
	width: 100vw;
	background: inherit;
	z-index: -1;
}

.bcmb-hero__heading {
	color: #fff;
	font-size: clamp(2.25rem, 4.5vw, 3.25rem);
	line-height: 1.1;
	margin: 0 0 1rem;
}

.bcmb-hero__text {
	font-size: 1.0625rem;
	line-height: 1.55;
	margin: 0 0 1.75rem;
}

.bcmb-hero__col--feature {
	text-align: center;
	color: #fff;
	text-decoration: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	margin-right: clamp(40px, 9vw, 150px);
	transition: transform 0.2s ease;
}

a.bcmb-hero__col--feature,
a.bcmb-hero__col--feature .bcmb-hero__feature-text {
	color: #fff;
	text-decoration: none;
}

a.bcmb-hero__col--feature:hover {
	transform: translateY(-3px);
}

a.bcmb-hero__col--feature:hover,
a.bcmb-hero__col--feature:hover .bcmb-hero__feature-text {
	color: var(--bcmb-green);
}

.bcmb-hero__feature-img {
	width: 150px;
	height: auto;
}

.bcmb-hero__feature-text {
	font-size: 1.6rem;
	font-weight: 800;
	line-height: 1.1;
	max-width: 180px;
}

/* ===========================================================================
 * Recent Posts block
 * ======================================================================== */
.bcmb-posts {
	max-width: var(--bcmb-wide);
	margin: 60px auto;
	padding: 0 30px;
}

.bcmb-posts__grid {
	display: grid;
	grid-template-columns: 2fr 1fr;
	grid-auto-rows: 1fr;
	gap: 24px;
}

.bcmb-card {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: 16px;
	min-height: 220px;
	color: #fff;
	text-decoration: none;
	box-shadow: 0 14px 30px rgba(20, 55, 107, 0.18);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.bcmb-card--feature {
	grid-row: span 2;
}

.bcmb-card__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* The strip behind the title. Its colour comes from the post's Colour Theme
 * field as an inline custom property (see bcmb_card_colour_style()). */
.bcmb-card__bar {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	display: block;
	padding: 18px 24px 20px;
	background: var(--bcmb-card-wash, rgba(0, 86, 148, 0.8));
}

.bcmb-card__title {
	display: block;
	font-size: 1.35rem;
	font-weight: 800;
	line-height: 1.2;
	text-transform: uppercase;
	color: #fff;
}

.bcmb-card:not(.bcmb-card--feature) .bcmb-card__title {
	font-size: 1.15rem;
}

.bcmb-card:hover {
	transform: scale(1.015) translateY(-4px);
	box-shadow: 0 24px 44px rgba(20, 55, 107, 0.28);
}

.bcmb-card:hover .bcmb-card__img {
	transform: scale(1.06);
}

.bcmb-card__img {
	transition: transform 0.5s ease;
}

/* ===========================================================================
 * Call to Action block
 * ======================================================================== */
.bcmb-cta {
	position: relative;
	background: var(--bcmb-mid-green);
	color: #fff;
	text-align: left;
}

/* Bottles and copy share one flex row so they can never drift apart: an
 * earlier version centred each on the viewport independently and they
 * overlapped at wide widths. The cluster hangs above the top edge of the band
 * via a negative margin, so the section must not clip its overflow. */
.bcmb-cta__inner {
	position: relative;
	z-index: 1;
	box-sizing: border-box;
	max-width: var(--bcmb-wide);
	margin: 0 auto;
	padding: 70px 30px 70px 40px;
	display: flex;
	align-items: flex-start;
	gap: 80px;
	text-align: left;
	font-size: 1.0625rem;
	line-height: 1.7;
}

.bcmb-cta__bottles {
	flex: 0 0 193px;
	margin-top: -108px; /* 70px of padding, plus 38px above the band */
	pointer-events: none;
}

.bcmb-cta__bottles svg {
	display: block;
	width: 100%;
	height: auto;
}

.bcmb-cta__content {
	flex: 1 1 auto;
	min-width: 0;
}

/* Native InnerBlocks content inside the CTA. */
.bcmb-cta__inner :is(h1, h2, h3, h4) {
	color: #fff;
	margin: 0 0 1rem;
}

.bcmb-cta__inner h2 {
	font-size: clamp(2rem, 4vw, 3rem);
	line-height: 1.15;
}

/* Links: white on the green, lime on hover (override the green content link
 * style, which has high specificity, by matching it and coming later). */
.bcmb-cta__inner a,
.wp-block-post-content .bcmb-cta__inner a:not(.wp-element-button) {
	color: #fff;
	text-decoration: underline;
	text-decoration-thickness: 2px;
}

.bcmb-cta__inner a:hover,
.wp-block-post-content .bcmb-cta__inner a:not(.wp-element-button):hover {
	color: var(--bcmb-lime);
}

/* ===========================================================================
 * Footer
 * ======================================================================== */
/* Decorative bottle band above the footer (interior pages only). Full-bleed;
 * the SVG's light-blue colour is baked in and its aspect ratio drives height. */
.bcmb-footer-bottles {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	margin-bottom: 0;
	aspect-ratio: 1343.39 / 274.14;
	background: url(../svg/bottles-04.svg) no-repeat center bottom;
	background-size: 100% auto;
}

/* The template-part wrapper is a direct child of .wp-site-blocks, which adds a
 * top margin; remove it so the footer sits flush against the content above. */
footer.wp-block-template-part {
	margin-block-start: 0;
}

.bcmb-footer {
	position: relative;
	overflow: hidden;
	background: var(--bcmb-mid-blue);
	color: #fff;
	margin: 0;
}

.bcmb-footer__inner {
	padding: 60px 30px 40px;
	position: relative;
	z-index: 1;
}

/* Decorative bottles, bottom-right. The SVG bakes in its own 0.6 opacity, so
 * this doesn't fade it a second time. Box matches the artwork's 487x251
 * aspect ratio. */
.bcmb-footer::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	width: 488px;
	height: 251px;
	background: url("../svg/footer-bottles.svg") no-repeat right bottom;
	background-size: contain;
	z-index: 0;
	pointer-events: none;
}

.bcmb-footer__logo {
	width: 160px;
	height: 70px;
	background: url("../svg/logo-white.svg") no-repeat left top;
	background-size: contain;
	margin-bottom: 24px;
}

.bcmb-footer__cols {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 40px;
}

.bcmb-footer__brand {
	flex: 0 0 250px;
}

/* Footer menu block: each top-level menu item is a column, auto-flowing into a
 * 4-up grid. Sub-items that overflow the first row tuck under column 1, etc. */
.bcmb-footer-menu {
	flex: 1 1 600px;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 36px 40px;
}

.bcmb-footer-menu__heading {
	color: var(--bcmb-lime);
	font-size: 1.05rem;
	font-weight: 800;
	margin: 0 0 14px;
}

.bcmb-footer-menu__heading a {
	color: inherit;
	text-decoration: none;
}

.bcmb-footer-menu__links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.bcmb-footer-menu__links a {
	color: #fff;
	text-decoration: none;
	font-size: 0.95rem;
}

.bcmb-footer-menu__links a:hover,
.bcmb-footer-menu__heading a:hover {
	color: var(--bcmb-lime);
}

@media (max-width: 900px) {
	.bcmb-footer-menu {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 560px) {
	.bcmb-footer-menu {
		grid-template-columns: 1fr;
	}
}

.bcmb-footer__address {
	font-size: 0.95rem;
	line-height: 1.8;
	color: #fff;
}

.bcmb-footer__address a {
	color: #fff;
	text-decoration: none;
}

.bcmb-footer__heading {
	color: var(--bcmb-lime);
	font-size: 1.05rem;
	font-weight: 800;
	margin: 0 0 14px;
}

.bcmb-footer__brand + .wp-block-column .bcmb-footer__heading:nth-of-type(2),
.bcmb-footer__cols .bcmb-footer__heading:not(:first-child) {
	margin-top: 28px;
}

.bcmb-footer__nav a,
.bcmb-footer__nav .wp-block-navigation-item__content {
	color: #fff;
	text-decoration: none;
	font-size: 0.95rem;
}

.bcmb-footer__nav a:hover {
	color: var(--bcmb-lime);
}

.bcmb-footer__legal {
	margin-top: 50px;
}

.bcmb-footer__legal-nav a {
	color: var(--bcmb-cyan);
	text-decoration: none;
	font-weight: 700;
	font-size: 0.95rem;
}

.bcmb-footer__legal-nav a:hover {
	color: var(--bcmb-lime);
}

/* ===========================================================================
 * Responsive
 * ======================================================================== */
@media (max-width: 900px) {
	.bcmb-posts__grid {
		grid-template-columns: 1fr;
	}

	.bcmb-card--feature {
		grid-row: span 1;
	}

	.bcmb-hero__inner {
		flex-direction: column;
		align-items: flex-start;
		padding-top: 150px;
	}

	.bcmb-hero__col--content {
		padding: 32px 28px 36px;
	}

	/* Not enough room for the bottles beside the copy — stack them above it. */
	.bcmb-cta__inner {
		flex-direction: column;
		gap: 1.75rem;
		padding: 50px 30px;
	}

	.bcmb-cta__bottles {
		flex-basis: auto;
		width: 130px;
		margin-top: -80px;
	}
}

/* ===========================================================================
 * Depot Operators landing — hero banner variant
 * Taller image with the white H1 sitting over the photo; breadcrumb moves
 * into the toolbar band below, so it's hidden here.
 * ======================================================================== */
/* The depot toolbar butts straight up against the hero — drop the global
 * `:where(.wp-site-blocks) > *` top margin that WP gives the <main>. */
.bcmb-depot-main {
	margin-block-start: 0;
}

.bcmb-page-banner--hero .bcmb-page-banner__media {
	height: 340px;
	box-shadow: none;
}

.bcmb-page-banner--hero .bcmb-page-banner__bottles {
	top: 150px;
	height: 250px;
}

.bcmb-page-banner--hero .bcmb-page-banner__content {
	position: absolute;
	inset: auto 0 0 0;
	padding-bottom: 2rem;
}

.bcmb-page-banner--hero .bcmb-breadcrumbs {
	display: none;
}

.bcmb-page-banner--hero .bcmb-page-banner__title {
	color: #fff;
	font-weight: 700;
	max-width: 100%;
}

.bcmb-page-banner--hero .bcmb-page-banner__title::after {
	display: none;
}

@media (max-width: 782px) {
	.bcmb-page-banner--hero .bcmb-page-banner__media {
		height: 220px;
	}
}

/* ===========================================================================
 * Depot toolbar (pale-blue button band with arrow graphic)
 * ======================================================================== */
.bcmb-depot-toolbar {
	position: relative;
	padding: 1.5rem 0 2.75rem;
	margin: 0;
	overflow: hidden;
}

.bcmb-depot-toolbar__inner {
	position: relative;
	z-index: 2;
	max-width: var(--bcmb-content);
	margin: 0 auto;
	padding: 0 20px;
}

.bcmb-depot-toolbar .bcmb-breadcrumbs {
	margin-bottom: 1.25rem;
}

.bcmb-depot-toolbar__grid {
	align-items: center;
	margin: 0;
}

/* Left column: 2x2 grid of pill buttons. */
.bcmb-depot-toolbar__btns.wp-block-buttons {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 230px));
	gap: 14px;
}

.bcmb-depot-toolbar__btns.wp-block-buttons > .wp-block-button {
	width: 100%;
}

/* Right column: portal button pushed to the far edge. */
.bcmb-depot-toolbar__portal.wp-block-column {
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

/* ===========================================================================
 * Button style — "Outline Pill" (white, bordered)
 * ======================================================================== */
.wp-block-button.is-style-bcmb-outline .wp-block-button__link {
	background: #fff;
	color: var(--bcmb-blue);
	border: 2px solid var(--bcmb-blue);
	border-radius: 12px;
	padding: 15px 24px;
	font-size: 1.15rem;
	font-weight: 800;
	width: 100%;
	justify-content: center;
	box-shadow: 0 2px 7px rgba(20, 55, 107, 0.12);
}

.wp-block-button.is-style-bcmb-outline .wp-block-button__link::after {
	display: none;
}

.wp-block-button.is-style-bcmb-outline .wp-block-button__link:hover {
	background: var(--bcmb-blue);
	color: #fff;
	transform: translateY(-1px);
}

/* Depot Portal: the standard solid green button from the home page, not an
 * outline pill (the `is-style-bcmb-outline` class on it is overridden here). */
.wp-block-button.bcmb-btn-portal .wp-block-button__link {
	background: var(--bcmb-green);
	color: #fff;
	border: none;
	border-radius: 8px;
	box-shadow: none;
	min-width: 230px;
}

.wp-block-button.bcmb-btn-portal .wp-block-button__link:hover {
	background: var(--bcmb-green);
	color: #fff;
}

/* ===========================================================================
 * Depot intro (small green tick above the paragraph)
 * ======================================================================== */
.bcmb-depot-intro {
	margin-top: 2.5rem;
}

.bcmb-depot-intro::before {
	content: "";
	display: block;
	width: 44px;
	height: 4px;
	background: var(--bcmb-green);
	border-radius: 2px;
	margin-bottom: 1.25rem;
}

/* ===========================================================================
 * Depot Notices listing
 * ======================================================================== */
.bcmb-notices {
	margin: 3rem 0;
}

.bcmb-notices__head {
	display: grid;
	grid-template-columns: 200px auto 1fr auto;
	align-items: end;
	gap: 1rem 2rem;
	border-bottom: 3px solid var(--bcmb-green);
	padding-bottom: 0.85rem;
}

.bcmb-notices__cat-label,
.bcmb-notices__date-label {
	color: #7a8aa0;
	font-size: 1.05rem;
}

.bcmb-notices__date-label {
	justify-self: end;
}

.bcmb-notices__title {
	margin: 0;
	color: var(--bcmb-cyan);
	font-size: clamp(1.8rem, 3vw, 2.5rem);
	font-weight: 800;
	white-space: nowrap;
}

.bcmb-notices__search {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: #fff;
	border: 1px solid #d3e3f0;
	border-radius: 100px;
	padding: 4px 4px 4px 18px;
	justify-self: start;
}

.bcmb-notices__search input[type="search"] {
	border: none;
	background: transparent;
	outline: none;
	font-size: 0.95rem;
	min-width: 150px;
	color: var(--bcmb-blue);
}

.bcmb-notices__search button {
	border: none;
	background: var(--bcmb-lime);
	width: 38px;
	height: 38px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	cursor: pointer;
	flex: 0 0 auto;
}

.bcmb-notices__search button svg {
	width: 17px;
	height: 17px;
}

.bcmb-notices__body {
	display: grid;
	grid-template-columns: 200px minmax(0, 1fr);
	gap: 1rem 2rem;
	padding-top: 1.25rem;
}

.bcmb-notices__cats {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

/* Out-specify theme.json's global link style (`:root :where(a)…`, 0,2,0)
 * which would otherwise paint these green + underlined. */
.bcmb-notices a.bcmb-notices__cat {
	color: var(--bcmb-blue);
	font-weight: 800;
	font-size: 1.05rem;
	text-decoration: none;
}

.bcmb-notices a.bcmb-notices__cat:hover,
.bcmb-notices a.bcmb-notices__cat.is-active {
	color: var(--bcmb-cyan);
}

.bcmb-notices__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.bcmb-notices__row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1.5rem;
	padding: 0.85rem 1.25rem;
}

.bcmb-notices__row:nth-child(even) {
	background: #eaf4fb;
}

.bcmb-notices a.bcmb-notices__link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--bcmb-blue);
	font-weight: 800;
	font-size: 1.15rem;
	text-decoration: none;
	line-height: 1.3;
}

.bcmb-notices a.bcmb-notices__link:hover {
	color: var(--bcmb-cyan);
	text-decoration: none;
}

.bcmb-notices__link svg {
	flex: none;
	width: 15px;
	color: var(--bcmb-cyan);
}

.bcmb-notices__date {
	color: #5a6b7d;
	font-size: 1rem;
	white-space: nowrap;
}

.bcmb-notices__pagination {
	grid-column: 2;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
	margin-top: 2rem;
}

.bcmb-notices a.bcmb-notices__page {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 0.5rem;
	border-radius: 8px;
	background: #eaf4fb;
	color: var(--bcmb-blue);
	font-weight: 800;
	font-size: 0.95rem;
	text-decoration: none;
}

.bcmb-notices a.bcmb-notices__page:hover {
	background: #d3e3f0;
	color: var(--bcmb-cyan);
}

.bcmb-notices a.bcmb-notices__page.is-active {
	background: var(--bcmb-green);
	color: #fff;
}

@media (max-width: 782px) {
	.bcmb-depot-toolbar {
		background-image: none;
	}

	.bcmb-depot-toolbar__btns.wp-block-buttons {
		grid-template-columns: 1fr;
	}

	.bcmb-notices__head {
		grid-template-columns: 1fr;
		gap: 0.75rem;
	}

	.bcmb-notices__date-label {
		display: none;
	}

	.bcmb-notices__body {
		grid-template-columns: 1fr;
	}

	.bcmb-notices__pagination {
		grid-column: 1;
	}

	.bcmb-notices__row {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.25rem;
	}
}

/* ---------------------------------------------------------------------------
 * Circle Photo (core/image block style) + Board of Directors listing/bio pages
 * ------------------------------------------------------------------------ */

.wp-block-image.is-style-bcmb-circle img {
	border-radius: 50%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	box-shadow: 0 6px 18px rgba(20, 55, 107, 0.16);
}

.bcmb-directors__section {
	margin-bottom: 3rem;
}

.bcmb-directors__section:last-child {
	margin-bottom: 0;
}

.bcmb-directors__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 2.25rem 1.5rem;
	margin-top: 1.5rem;
}

/* The grid's own children are still tagged .is-layout-flow by Gutenberg
 * (no explicit "layout" attribute was set on the block), so core's default
 * flow spacing gives the first card margin-block-start:0 but every other
 * card 1.5rem -- misaligning the row. Spacing here comes entirely from
 * `gap` above, so zero out the flow margin on all of them uniformly. */
.bcmb-directors__grid.wp-block-group > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

@media (max-width: 960px) {
	.bcmb-directors__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 560px) {
	.bcmb-directors__grid {
		grid-template-columns: 1fr;
	}
}

.bcmb-director {
	text-align: center;
}

.bcmb-director .wp-block-image {
	width: 160px;
	margin: 0 auto;
}

.bcmb-director__name {
	margin: 1rem 0 0.25rem;
	font-size: 1.05rem;
	line-height: 1.3;
}

.bcmb-director__name-link {
	color: var(--bcmb-blue);
	text-decoration: none;
}

.bcmb-director__name-link:hover {
	color: var(--bcmb-cyan);
}

.bcmb-director__role {
	color: #5a6b7d;
	font-size: 0.88rem;
	font-style: italic;
	line-height: 1.4;
	margin: 0;
}

.bcmb-director-bio__header {
	display: flex;
	align-items: flex-start;
	gap: 2.5rem;
	flex-wrap: wrap;
	margin-bottom: 2rem;
}

.bcmb-director-bio__photo {
	width: 220px;
	flex: 0 0 220px;
}

.bcmb-director-bio__meta {
	flex: 1 1 320px;
	color: #5a6b7d;
}

.bcmb-director-bio__role {
	color: var(--bcmb-blue);
	font-size: 1.15rem;
	font-weight: 700;
	margin: 0 0 0.5rem;
}

.bcmb-director-bio__meta strong {
	display: block;
	color: var(--bcmb-blue);
	font-size: 0.95rem;
	margin-top: 1rem;
}

.bcmb-director-bio__meta strong:first-child {
	margin-top: 0;
}

.bcmb-director-bio__meta ul {
	margin: 0.25rem 0 0;
	padding: 0;
	list-style: none;
}

.bcmb-director-bio__committees ul {
	columns: 2;
	column-gap: 2rem;
}

@media (max-width: 700px) {
	.bcmb-director-bio__committees ul {
		columns: 1;
	}
}

.bcmb-director-bio__back {
	display: inline-block;
	margin-top: 2.5rem;
	font-weight: 700;
	color: var(--bcmb-blue);
	text-decoration: none;
}

.bcmb-director-bio__back:hover {
	color: var(--bcmb-cyan);
}

/* ---------------------------------------------------------------------------
 * Industry Collaboration panel (core/media-text with a custom class)
 * ------------------------------------------------------------------------ */

.bcmb-industry-panel.wp-block-media-text {
	background: linear-gradient(90deg, var(--bcmb-blue) 0%, var(--bcmb-mid-blue) 100%);
	border-radius: 8px;
	overflow: hidden;
}

.bcmb-industry-panel .wp-block-media-text__content {
	padding: 2.75rem 3rem;
	color: #fff;
}

.bcmb-industry-panel .wp-block-media-text__content :is(h1, h2, h3, h4) {
	color: #fff;
	margin: 0 0 1rem;
}

.bcmb-industry-panel .wp-block-media-text__content p {
	font-style: italic;
	opacity: 0.92;
}

.bcmb-industry-panel .wp-block-media-text__media img {
	height: 100%;
	object-fit: cover;
}

/* ---------------------------------------------------------------------------
 * Industry Partners block
 * ------------------------------------------------------------------------ */

.bcmb-partners__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 2.5rem 1.75rem;
	margin-top: 2rem;
}

@media (max-width: 960px) {
	.bcmb-partners__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 560px) {
	.bcmb-partners__grid {
		grid-template-columns: 1fr;
	}
}

/* White, borderless logo plate — hides the white box baked into JPG logos. The
 * tinted panel moves down onto the caption instead. */
.bcmb-partner__logo {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 16 / 10;
	background: #fff;
	overflow: hidden;
}

.bcmb-partner__logo img {
	max-width: 78%;
	max-height: 68%;
	object-fit: contain;
}

.bcmb-partner__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(61, 174, 43, 0.88);
	color: #fff;
	font-weight: 700;
	font-size: 1.05rem;
	opacity: 0;
	transition: opacity 0.2s ease;
}

.bcmb-partner__overlay em {
	font-style: normal;
}

.bcmb-partner__overlay svg {
	width: 18px;
	height: 18px;
	margin-left: 0.4rem;
	fill: #fff;
	vertical-align: -2px;
}

.bcmb-partner__logo:hover .bcmb-partner__overlay,
.bcmb-partner__logo:focus-visible .bcmb-partner__overlay {
	opacity: 1;
}

/* Caption sits in its own tinted grey panel beneath the white logo plate.
 * The card is a flex column so captions in a row share a bottom edge. */
.bcmb-partner {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.bcmb-partner__caption {
	flex: 1;
	background: #f1f3f4;
	border-top: 2px solid #d9dee1;
	padding: 0.9rem 1rem 1rem;
	text-align: center;
}

.bcmb-partner__name {
	margin: 0;
	font-size: 1.05rem;
}

.bcmb-partner__name a {
	color: var(--bcmb-blue);
	text-decoration: none;
}

.bcmb-partner__name a:hover {
	color: var(--bcmb-cyan);
}

.bcmb-partner__desc {
	color: #5a6b7d;
	font-size: 0.88rem;
	line-height: 1.4;
	margin: 0.35rem 0 0;
}

/* Document Tabs block: pill-style tab nav (active tab dark blue, inactive
 * tabs pale blue) above a per-tab document list. Shared by every tabbed
 * block (Document Tabs, Research Cards, Content Tabs). */
.bcmb-tabs {
	margin-top: 2rem;
}

.bcmb-tabs__nav {
	display: flex;
	flex-wrap: wrap;
	border-bottom: 1px solid #d7dee4;
	margin: 0 0 1.75rem;
}

.bcmb-tabs__nav-item {
	appearance: none;
	border: 0;
	cursor: pointer;
	font-family: inherit;
	font-weight: 700;
	font-size: 1.05rem;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: #fff;
	background: var(--bcmb-mid-blue);
	padding: 0.9rem 1.75rem;
	opacity: 0.6;
	transition: opacity 0.15s ease;
}

.bcmb-tabs__nav-item:hover {
	opacity: 0.85;
}

.bcmb-tabs__nav-item.is-active {
	background: var(--bcmb-blue);
	opacity: 1;
}

.bcmb-tabs__panel:not(.is-active) {
	display: none;
}

.bcmb-tabs__intro {
	font-style: italic;
	color: #5a6b7d;
	font-weight: 700;
	margin: 0 0 1rem;
}

.bcmb-tabs__docs {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.75rem;
}

.bcmb-tabs__doc-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--bcmb-blue);
	font-weight: 700;
	font-style: italic;
	text-decoration: none;
}

.bcmb-tabs__doc-link:hover {
	color: var(--bcmb-cyan);
}

.bcmb-tabs__doc-link svg {
	flex: none;
	color: var(--bcmb-mid-blue);
}

/* ===========================================================================
 * Current Openings (Careers) block
 * ======================================================================== */
.bcmb-careers {
	max-width: var(--bcmb-content);
	margin: 0 auto;
}

/* Deliberately a rung below the page's own h2 ("Work at BCMB"): smaller, not
 * uppercase, with a rule under it. Two classes so it out-specifies the
 * `.wp-block-post-content h3` colour rule. */
.bcmb-careers .bcmb-careers__heading {
	color: var(--bcmb-ink);
	font-size: 1.3rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	margin: 3rem 0 1.5rem;
	padding-bottom: 0.6rem;
	border-bottom: 2px solid var(--bcmb-green);
}

.bcmb-careers__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1rem;
}

.bcmb-careers__job {
	background: #f4f8fb;
	border-left: 4px solid var(--bcmb-green);
	border-radius: 6px;
	overflow: hidden;
}

.bcmb-careers__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	padding: 1.5rem 2rem;
	cursor: pointer;
	list-style: none;
	transition: background 0.2s ease;
}

/* Safari still paints the default disclosure triangle without this. */
.bcmb-careers__summary::-webkit-details-marker {
	display: none;
}

.bcmb-careers__summary:hover {
	background: #eaf1f7;
}

.bcmb-careers__summary:focus-visible {
	outline: 2px solid var(--bcmb-green);
	outline-offset: -2px;
}

.bcmb-careers__job-info {
	display: block;
}

.bcmb-careers__job-title {
	display: block;
	color: var(--bcmb-ink);
	font-size: 1.3rem;
	font-weight: 800;
	line-height: 1.2;
	margin-bottom: 0.5rem;
}

.bcmb-careers__job-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
}

.bcmb-careers__job-meta span {
	font-weight: 700;
	font-size: 0.85rem;
	color: var(--bcmb-mid-blue);
}

.bcmb-careers__job-location:not(:last-child)::after,
.bcmb-careers__job-type:not(:last-child)::after {
	content: "\2022";
	margin-left: 1rem;
	color: var(--bcmb-lime);
}

/* Plus/minus toggle, flipped by the open state. */
.bcmb-careers__toggle {
	position: relative;
	flex: none;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--bcmb-green);
}

.bcmb-careers__toggle::before,
.bcmb-careers__toggle::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: #fff;
	border-radius: 1px;
}

.bcmb-careers__toggle::before {
	width: 12px;
	height: 2px;
}

.bcmb-careers__toggle::after {
	width: 2px;
	height: 12px;
	transition: opacity 0.15s ease;
}

.bcmb-careers__details[open] .bcmb-careers__toggle::after {
	opacity: 0;
}

.bcmb-careers__panel {
	padding: 0 2rem 1.75rem;
}

.bcmb-careers__job-body {
	color: var(--bcmb-body);
	font-size: 0.98rem;
	max-width: 68ch;
	margin-bottom: 1.5rem;
}

.bcmb-careers__job-body > *:first-child {
	margin-top: 0;
}

.bcmb-careers__apply {
	font-size: 1.05rem;
	padding: 14px 30px;
}

.bcmb-careers__empty {
	color: #45566a;
	font-style: italic;
}

@media (max-width: 720px) {
	.bcmb-careers__summary {
		gap: 1rem;
		padding: 1.25rem 1.25rem;
	}

	.bcmb-careers__panel {
		padding: 0 1.25rem 1.5rem;
	}
}

/* ===========================================================================
 * Job Details block (single Job Posting page)
 * ======================================================================== */
.bcmb-job-details {
	max-width: var(--bcmb-content);
	margin: 0 auto 2rem;
	padding: 1.75rem 2rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	background: #f4f8fb;
	border-left: 4px solid var(--bcmb-green);
	border-radius: 6px;
}

.bcmb-job-details__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
}

.bcmb-job-details__meta span {
	font-weight: 700;
	font-size: 0.95rem;
	color: var(--bcmb-mid-blue);
}

.bcmb-job-details__location:not(:last-child)::after,
.bcmb-job-details__type:not(:last-child)::after {
	content: "•";
	margin-left: 1rem;
	color: var(--bcmb-lime);
}

.bcmb-job-details__apply {
	flex: none;
	padding: 14px 28px;
	font-size: 1rem;
}

@media (max-width: 600px) {
	.bcmb-job-details {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* ===========================================================================
 * Contact page: Forminator contact form brand override
 * ======================================================================== */
.bcmb-contact__columns {
	align-items: flex-start;
}

.bcmb-contact__columns .forminator-button-submit {
	display: inline-flex;
	align-items: center;
	padding: 20px 40px !important;
	border: none !important;
	border-radius: 8px !important;
	background: var(--bcmb-green) !important;
	color: #fff !important;
	font-weight: 800 !important;
	font-size: 1.1rem !important;
	text-transform: none !important;
	box-shadow: none !important;
	transition: filter 0.2s ease, transform 0.2s ease;
}

.bcmb-contact__columns .forminator-button-submit:hover,
.bcmb-contact__columns .forminator-button-submit:focus {
	filter: brightness(1.06);
	transform: translateY(-1px);
	background: var(--bcmb-green) !important;
	color: #fff !important;
}

.bcmb-contact__columns .forminator-label {
	color: var(--bcmb-ink);
	font-weight: 700;
}

/* White fields with a light hairline border — Forminator's own shading reads
 * too dark against the page. `!important` because the plugin ships its
 * field styles with high specificity. */
.bcmb-contact__columns input.forminator-input,
.bcmb-contact__columns textarea.forminator-input,
.bcmb-contact__columns select.forminator-select,
.bcmb-contact__columns .forminator-textarea {
	background: #fff !important;
	border: 1px solid #d7dee4 !important;
	border-radius: 6px !important;
	color: var(--bcmb-ink) !important;
	box-shadow: none !important;
}

.bcmb-contact__columns input.forminator-input:focus,
.bcmb-contact__columns textarea.forminator-input:focus,
.bcmb-contact__columns .forminator-textarea:focus {
	border-color: var(--bcmb-green) !important;
	background: #fff !important;
}

.bcmb-contact__columns input.forminator-input::placeholder,
.bcmb-contact__columns textarea.forminator-input::placeholder,
.bcmb-contact__columns .forminator-textarea::placeholder {
	color: #7d8892;
}

/* ===========================================================================
 * Research Cards block: tab nav reuses .bcmb-tabs styling; panels hold a
 * 3-across grid of shadowed cards, each linking to its own reports page.
 * ======================================================================== */
.bcmb-research-cards {
	max-width: var(--bcmb-wide);
	margin-left: auto;
	margin-right: auto;
}

/* Document-list style: an icon-led list of reports rather than a card grid,
 * which the client found visually cluttered. Cards stay reserved for the two
 * or three recent publications above. */
.bcmb-research-cards__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.85rem;
}

.bcmb-research-cards__item {
	position: relative;
	padding-left: 1.1rem;
}

.bcmb-research-cards__item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.6em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--bcmb-green);
}

/* Only the document name carries the underline — running it under the
 * description too made the list read as a wall of rules. */
.bcmb-research-cards__card-link {
	color: var(--bcmb-ink);
	font-size: 1rem;
	line-height: 1.5;
	text-decoration: none;
	transition: color 0.15s ease;
}

.bcmb-research-cards__name {
	font-weight: 600;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	text-decoration-color: rgba(0, 0, 0, 0.28);
	transition: text-decoration-color 0.15s ease;
}

.bcmb-research-cards__card-link:hover {
	color: var(--bcmb-green);
}

.bcmb-research-cards__card-link:hover .bcmb-research-cards__name {
	text-decoration-color: currentColor;
}

.bcmb-research-cards__card-link svg {
	width: 15px;
	height: auto;
	margin-right: 0.45rem;
	vertical-align: -2px;
	color: var(--bcmb-mid-blue);
}

/* Trailing meta (date, meeting name) reads as secondary. Non-breaking spaces
 * around the dash because HTML collapses leading/trailing whitespace in
 * generated content. */
.bcmb-research-cards__meta {
	color: #6b7a86;
	font-weight: 400;
}

.bcmb-research-cards__meta::before {
	content: "\00a0\2013\00a0";
	color: #6b7a86;
}

/* ===========================================================================
 * Document list: one report per line, name in bold, date/meeting in grey,
 * and a file icon that reads as the download. Used by hand-authored lists
 * inside rich-text panels (Reports & Publications).
 * ======================================================================== */
.bcmb-doclist {
	list-style: none;
	margin: 0.75rem 0 1.5rem;
	padding: 0;
}

.bcmb-doclist li {
	position: relative;
	padding-left: 1.1rem;
	margin: 0 0 0.45rem;
	line-height: 1.5;
}

.bcmb-doclist li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.62em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--bcmb-green);
}

.bcmb-doclist__link {
	color: var(--bcmb-ink);
	font-size: 1rem;
	text-decoration: none;
}

.bcmb-doclist__name {
	font-weight: 700;
}

/* Separator lives in CSS so the stored text stays clean. Non-breaking spaces
 * because HTML collapses whitespace in generated content. */
.bcmb-doclist__meta {
	color: #6b7a86;
}

.bcmb-doclist__meta::before {
	content: "\2013\00a0";
}

/* File icon drawn with a mask so the colour follows the link state and the
 * stored content stays free of inline SVG. */
.bcmb-doclist__link::after {
	content: "";
	display: inline-block;
	width: 14px;
	height: 14px;
	margin-left: 0.4rem;
	vertical-align: -2px;
	background-color: var(--bcmb-mid-blue);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 1.5A1.5 1.5 0 0 0 2 3v10a1.5 1.5 0 0 0 1.5 1.5h9A1.5 1.5 0 0 0 14 13V6.121a1.5 1.5 0 0 0-.44-1.06L9.94 1.44A1.5 1.5 0 0 0 8.879 1H3.5Z'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 1.5A1.5 1.5 0 0 0 2 3v10a1.5 1.5 0 0 0 1.5 1.5h9A1.5 1.5 0 0 0 14 13V6.121a1.5 1.5 0 0 0-.44-1.06L9.94 1.44A1.5 1.5 0 0 0 8.879 1H3.5Z'/%3E%3C/svg%3E") no-repeat center / contain;
	transition: background-color 0.15s ease;
}

.bcmb-doclist__link:hover {
	color: var(--bcmb-green);
}

.bcmb-doclist__link:hover .bcmb-doclist__meta {
	color: var(--bcmb-green);
}

.bcmb-doclist__link:hover::after {
	background-color: var(--bcmb-green);
}

/* ===========================================================================
 * Content Tabs block: tab nav reuses .bcmb-tabs styling; panels hold
 * free-form rich text (migrated prose, lists and links).
 * ======================================================================== */
.bcmb-content-tabs {
	max-width: var(--bcmb-content);
	margin-left: auto;
	margin-right: auto;
}

.bcmb-content-tabs__panel > *:first-child {
	margin-top: 0;
}

.bcmb-content-tabs__panel p,
.bcmb-content-tabs__panel ul,
.bcmb-content-tabs__panel ol {
	margin: 0 0 1.25rem;
	line-height: 1.6;
}

.bcmb-content-tabs__panel h2,
.bcmb-content-tabs__panel h3,
.bcmb-content-tabs__panel h4 {
	color: var(--bcmb-blue);
	margin: 2rem 0 1rem;
}

.bcmb-content-tabs__panel ul,
.bcmb-content-tabs__panel ol {
	padding-left: 1.5rem;
}

.bcmb-content-tabs__panel li {
	margin-bottom: 0.4rem;
}

/* ===========================================================================
 * Publication Highlights block: featured-report image cards with a
 * brand-gradient "Learn More" overlay on hover.
 * ======================================================================== */
.bcmb-pub-highlights {
	max-width: var(--bcmb-wide);
	margin: 2rem auto;
}

.bcmb-pub-highlights__heading {
	text-align: center;
	font-size: 2.5rem;
	font-weight: 800;
	color: var(--bcmb-blue);
	margin: 0 0 2rem;
}

.bcmb-pub-highlights__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2px;
	background: #e4e9ed;
}

.bcmb-pub-highlights__card {
	display: flex;
	flex-direction: column;
	background: #fff;
}

.bcmb-pub-highlights__img-wrap {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: #dce3e8;
}

.bcmb-pub-highlights__img-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.bcmb-pub-highlights__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--bcmb-green);
	opacity: 0;
	transition: opacity 0.2s ease;
	color: #fff;
	font-weight: 700;
	font-size: 1.15rem;
}

.bcmb-pub-highlights__overlay span {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}

.bcmb-pub-highlights__overlay svg {
	width: 9px;
	color: #fff;
}

.bcmb-pub-highlights__img-wrap:hover .bcmb-pub-highlights__overlay {
	opacity: 0.9;
}

.bcmb-pub-highlights__content {
	padding: 1.25rem 0.5rem 0.5rem;
}

.bcmb-pub-highlights__title {
	margin: 0 0 0.4rem;
	font-size: 1.35rem;
}

.bcmb-pub-highlights__title a {
	color: var(--bcmb-mid-blue);
	font-weight: 800;
	text-decoration: none;
}

.bcmb-pub-highlights__title a:hover {
	color: var(--bcmb-cyan);
}

.bcmb-pub-highlights__desc {
	color: #45566a;
	margin: 0;
	font-size: 0.95rem;
}

@media (max-width: 900px) {
	.bcmb-pub-highlights__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.bcmb-pub-highlights__grid {
		grid-template-columns: 1fr;
	}
}