/*
 * Per-block styles. Each block scopes itself with .bc-block--<name>.
 * Block render.php files emit get_block_wrapper_attributes() with that class.
 * Mobile media queries grouped at the bottom.
 */

/* ───────────────────────────── Navbar ───────────────────────────── */

.bc-navbar {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--bc-brand-800);
	box-shadow: var(--bc-shadow-xs);
}

.bc-navbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--bc-space-5);
	padding-block: 28px;
}

/* Navbar uses a thinner gutter than the rest of the site so the desktop
 * menu can fit at typical laptop widths. The 160px container gutter is
 * for body content; a navbar full of 7 items + logo + CTA needs more
 * room (~1094px content min). */
.bc-navbar .bc-container { padding-inline: var(--bc-space-6); }

/* Brand identity must not squeeze. The image keeps its intrinsic ratio
 * via width:auto; flex-shrink:0 prevents the parent from being shrunk
 * by the menu when space gets tight. The hamburger breakpoint kicks in
 * before that point anyway, but this guards laptop widths between 1024
 * and the new burger threshold. */
.bc-navbar__logo { display: inline-flex; align-items: center; flex-shrink: 0; margin-right: auto; }
.bc-navbar__logo-img { height: 32px; width: auto; }

.bc-navbar__nav { flex: 0 0 auto; }
.bc-navbar__nav--lang { margin-left: calc(-1 * var(--bc-space-5)); }
.bc-navbar__menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 0;
}
.bc-navbar__menu-item { position: relative; }
.bc-navbar__menu-item > a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 8px 12px;
	font-family: var(--bc-font-tag);
	font-weight: 500;
	font-size: var(--bc-text-sm-size);
	line-height: var(--bc-text-sm-leading);
	color: var(--bc-text-200);
	transition: color 120ms ease;
}
.bc-navbar__menu-item > a:hover { color: var(--bc-text-25); }
.bc-navbar__menu-item { flex-shrink: 0; }
.bc-navbar__menu-item > a { white-space: nowrap; }
.bc-navbar__cta { flex-shrink: 0; }
.bc-navbar__chevron {
	display: inline-flex;
	width: 20px;
	height: 20px;
	transition: transform 200ms ease;
}
.bc-navbar__menu-item--has-children:hover > a .bc-navbar__chevron,
.bc-navbar__menu-item--has-children:focus-within > a .bc-navbar__chevron {
	transform: rotate(180deg);
}

/* Desktop dropdown — Figma 20933:368 / 20933:387 / 20933:406 */
.bc-navbar__submenu {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	min-width: 200px;
	margin: 0;
	padding: 16px 0;
	list-style: none;
	background: var(--bc-bg-white-b, #f9f8f8);
	border-top: 2px solid var(--bc-brand-600);
	border-bottom-left-radius: 20px;
	border-bottom-right-radius: 20px;
	box-shadow: 0 8px 8px -4px rgba(16, 24, 40, 0.03), 0 20px 24px -4px rgba(16, 24, 40, 0.08);
	display: flex;
	flex-direction: column;
	gap: 14px;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 200ms ease, visibility 200ms ease;
	z-index: 100;
}
.bc-navbar__menu-item--has-children:hover > .bc-navbar__submenu,
.bc-navbar__menu-item--has-children:focus-within > .bc-navbar__submenu {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}
.bc-navbar__submenu-item a {
	display: block;
	padding: 4px 14px;
	font-family: var(--bc-font-body, 'Mulish'), sans-serif;
	font-weight: 400;
	font-size: 14px;
	line-height: 20px;
	color: var(--bc-text-950, #14141c);
	white-space: nowrap;
	transition: color 120ms ease;
}
.bc-navbar__submenu-item a:hover { color: var(--bc-brand-600); }

/* Contact page light variant — Figma 23010:1530 (Navbar/Variant2):
 * white-bg navbar with bottom border, gray menu text, dark logo. */
body.page-contact .bc-navbar {
	background: var(--bc-bg-white);
	border-bottom: 1px solid var(--bc-text-200);
	box-shadow: none;
}
body.page-contact .bc-navbar__menu-item a { color: var(--bc-text-600); }
body.page-contact .bc-navbar__menu-item a:hover { color: var(--bc-brand-600); }
/* Invert white logo so it reads on the light bg. The PNG is single-color
 * white, so a straight invert produces a near-black mark that matches the
 * dark logo seen in Figma without needing a second asset. */
body.page-contact .bc-navbar__logo-img { filter: invert(1) brightness(0.18); }
body.page-contact .bc-navbar__burger span { background: var(--bc-text-950); }

.bc-navbar__cta {
	/* Match Figma's asymmetric pill: rounded everywhere except top-left. */
	border-radius: 0 22px 22px 22px;
	padding: 12px 20px;
}

.bc-navbar__burger {
	display: none;
	flex-direction: column;
	gap: 4px;
	padding: 8px;
}
.bc-navbar__burger span {
	display: block;
	width: 24px;
	height: 2px;
	background: var(--bc-text-25);
}

/* Mobile-only phone pill (Figma 23074:100304): white circle, brand-600 icon. */
.bc-navbar__phone {
	display: none;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--bc-bg-gray);
	color: var(--bc-brand-600);
	flex-shrink: 0;
	transition: background 150ms ease, color 150ms ease;
}
.bc-navbar__phone:hover { background: var(--bc-brand-600); color: var(--bc-bg-gray); }
.bc-navbar__phone svg { width: 18px; height: 18px; }

/* ─────────────────────── Mobile menu overlay (20957:5077) ─────────────────────── */

.bc-mobile-menu {
	position: fixed;
	inset: 0;
	z-index: 200;
	background: rgba(20, 20, 28, 0.4);
	display: block;
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	transition: opacity 200ms ease, visibility 0s linear 200ms;
}
.bc-mobile-menu.is-open {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
	transition: opacity 200ms ease, visibility 0s linear;
}
.bc-mobile-menu__panel {
	transform: translateY(-100%);
	transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
}
.bc-mobile-menu.is-open .bc-mobile-menu__panel { transform: translateY(0); }

.bc-mobile-menu__panel {
	background: var(--bc-bg-white);
	display: flex;
	flex-direction: column;
	align-items: stretch;
	border-bottom-left-radius: 21px;
	border-bottom-right-radius: 21px;
	width: 100%;
	max-width: 100%;
	overflow: hidden;
}

.bc-mobile-menu__lang {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	padding: 16px 24px;
	border-bottom: 1px solid var(--bc-text-200);
}
.bc-mobile-menu__lang-toggle {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-family: var(--bc-font-body);
	font-weight: 500;
	font-size: var(--bc-text-xs-size);
	line-height: var(--bc-text-xs-leading);
	color: var(--bc-text-500);
	background: transparent;
	border: 0;
	padding: 0;
	cursor: pointer;
}
.bc-mobile-menu__lang-toggle svg { width: 18px; height: 18px; }

.bc-mobile-menu__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 24px;
}
.bc-mobile-menu__logo { display: inline-flex; align-items: center; flex-shrink: 0; }
/* Same logo asset as the navbar (white on dark). The mobile panel is white,
 * so invert the rendering so the wordmark stays legible. */
.bc-mobile-menu__logo-img { height: 32px; width: auto; filter: invert(1) brightness(0.18); }
.bc-mobile-menu__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	background: transparent;
	border: 0;
	padding: 0;
	color: var(--bc-text-950);
	cursor: pointer;
	transition: color 150ms ease;
}
.bc-mobile-menu__close:hover { color: var(--bc-brand-600); }

.bc-mobile-menu__list {
	background: var(--bc-bg-gray);
	list-style: none;
	margin: 0;
	padding: 0 24px;
	display: flex;
	flex-direction: column;
}
.bc-mobile-menu__item {
	border-bottom: 1px solid var(--bc-text-200);
}
.bc-mobile-menu__item:last-child { border-bottom: 0; }
.bc-mobile-menu__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 12px 0;
	font-family: var(--bc-font-body);
	font-weight: 500;
	font-size: var(--bc-text-md-size);
	line-height: var(--bc-text-md-leading);
	color: var(--bc-text-950);
	background: transparent;
	border: 0;
	cursor: pointer;
	text-align: left;
	transition: color 150ms ease;
}
.bc-mobile-menu__link:hover { color: var(--bc-brand-600); }
.bc-mobile-menu__chevron {
	display: inline-flex;
	transition: transform 200ms ease;
	color: var(--bc-text-950);
}
.bc-mobile-menu__item--has-children[aria-expanded="true"] .bc-mobile-menu__chevron,
.bc-mobile-menu__link[aria-expanded="true"] .bc-mobile-menu__chevron { transform: rotate(180deg); }

.bc-mobile-menu__sublist {
	list-style: none;
	margin: 0 0 12px;
	padding: 0 0 0 var(--bc-space-3);
	display: flex;
	flex-direction: column;
	gap: 8px;
}
/* The HTML `hidden` attribute is overridden by the rule above
 * (display: flex wins), so submenus appeared permanently expanded.
 * Force collapse explicitly. */
.bc-mobile-menu__sublist[hidden] { display: none; }
.bc-mobile-menu__sublist a {
	display: block;
	padding: 8px 0;
	font-size: var(--bc-text-sm-size);
	color: var(--bc-text-600);
	transition: color 150ms ease;
}
.bc-mobile-menu__sublist a:hover { color: var(--bc-brand-600); }

.bc-mobile-menu__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 16px;
	background: var(--bc-brand-600);
	color: var(--bc-bg-white);
	border-bottom-left-radius: 20px;
	border-bottom-right-radius: 20px;
	font-family: var(--bc-font-body);
	font-weight: 400;
	font-size: var(--bc-text-xs-size);
	line-height: var(--bc-text-xs-leading);
	transition: background-color 150ms ease;
}
.bc-mobile-menu__cta:hover { background: var(--bc-text-500); color: var(--bc-bg-white); }
.bc-mobile-menu__cta svg { color: var(--bc-bg-white); }

body.bc-mobile-menu-open { overflow: hidden; }

/* ───────────────────────────── Footer ───────────────────────────── */
/* Figma 22893:4005 — dark slab, brand+newsletter on the left, three columns
 * on the right, bordered address row, centred copyright. */

.bc-footer {
	background: var(--bc-brand-800);
	color: var(--bc-text-25);
	padding-block-start: var(--bc-space-25);
}

.bc-footer__inner {
	display: flex;
	flex-direction: column;
	gap: var(--bc-space-12);
}

.bc-footer__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--bc-space-10);
}

.bc-footer__brand {
	display: flex;
	flex-direction: column;
	gap: 60px;
	flex: 0 0 auto;
}

.bc-footer__logo { display: inline-flex; align-self: flex-start; }
.bc-footer__logo-img { height: 60px; width: auto; }

.bc-footer__newsletter { display: flex; flex-direction: column; gap: var(--bc-space-3); width: 417px; max-width: 100%; }
.bc-footer__newsletter-label {
	font-family: var(--bc-font-body);
	font-weight: 500;
	font-size: var(--bc-text-xl-size);
	line-height: var(--bc-text-xl-leading);
	color: var(--bc-brand-25);
	text-transform: none;
}

.bc-footer__newsletter-row {
	display: flex;
	align-items: center;
	background: var(--bc-bg-white);
	border-radius: 0 25px 25px 25px;
	padding: 1px 1px 1px 21px;
	gap: var(--bc-space-2);
}
.bc-footer__newsletter-row input {
	flex: 1;
	border: 0;
	background: transparent;
	padding: 12px 0;
	font-family: var(--bc-font-body);
	font-size: var(--bc-text-xs-size);
	color: var(--bc-text-500);
	outline: none;
}
.bc-footer__newsletter-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--bc-brand-800);
	color: var(--bc-text-25);
	border: 0;
	border-radius: 30px;
	padding: 10px 18px;
	font-family: var(--bc-font-body);
	font-weight: 600;
	font-size: var(--bc-text-md-size);
	line-height: var(--bc-text-md-leading);
	box-shadow: var(--bc-shadow-xs);
	cursor: pointer;
	transition: background-color 150ms ease, color 150ms ease;
}
.bc-footer__newsletter-submit:hover { background: var(--bc-brand-600); color: var(--bc-text-25); }

.bc-footer__columns {
	display: flex;
	gap: var(--bc-space-16);
	align-items: flex-start;
	flex: 0 1 auto;
}

.bc-footer__col {
	display: flex;
	flex-direction: column;
	gap: var(--bc-space-5);
	min-width: 0;
}
.bc-footer__col--contact { width: 253px; }

.bc-footer__col-title {
	margin: 0;
	font-family: var(--bc-font-body);
	font-weight: 500;
	font-size: var(--bc-text-lg-size);
	line-height: var(--bc-text-lg-leading);
	color: var(--bc-text-25);
}

.bc-footer__col ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--bc-space-3);
}
.bc-footer__col a {
	font-family: var(--bc-font-body);
	font-weight: 400;
	font-size: var(--bc-text-md-size);
	line-height: var(--bc-text-md-leading);
	color: var(--bc-text-500);
	transition: color 150ms ease;
}
.bc-footer__col a:hover { color: var(--bc-text-25); }

.bc-footer__contact { color: var(--bc-text-500); }
.bc-footer__contact li { display: flex; gap: 6px; flex-wrap: wrap; align-items: baseline; }
.bc-footer__contact span { color: var(--bc-text-500); }
.bc-footer__contact a { text-decoration: underline; text-underline-offset: 2px; }

ul.bc-footer__social {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: row;
	gap: 15px;
	align-items: center;
}
.bc-footer__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 35px;
	height: 35px;
	border-radius: 50%;
	border: 1px solid var(--bc-brand-25);
	color: var(--bc-text-25);
	background: transparent;
	transition: background-color 150ms ease, color 150ms ease, transform 150ms ease;
}
.bc-footer__social a:hover { background: var(--bc-brand-25); color: var(--bc-brand-800); transform: translateY(-1px); }
.bc-footer__social svg { display: block; }

/* Bordered address row + Haut-de-page */
.bc-footer__addressbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--bc-space-5);
	padding-block: var(--bc-space-8);
	border-block: 1px solid var(--bc-brand-25);
	color: var(--bc-bg-white);
}

.bc-footer__addresses {
	display: flex;
	align-items: center;
	gap: var(--bc-space-3);
	flex: 1 1 auto;
	min-width: 0;
}
.bc-footer__address {
	display: flex;
	align-items: flex-start;
	gap: var(--bc-space-3);
	max-width: 340px;
	color: var(--bc-bg-white);
	opacity: 0.7;
	font-size: var(--bc-text-md-size);
	line-height: var(--bc-text-md-leading);
}
.bc-footer__address-icon { color: var(--bc-bg-white); flex-shrink: 0; line-height: 0; }
.bc-footer__address-icon svg { display: block; }
.bc-footer__addresses-divider {
	display: inline-block;
	width: 1px;
	height: 48px;
	background: var(--bc-brand-25);
	opacity: 0.4;
	margin-inline: var(--bc-space-3);
	flex-shrink: 0;
}

.bc-footer__backtotop {
	/* Inherits .bc-button + .bc-button--primary + .bc-button--pill-asymmetric */
	padding: 12px 20px;
	flex-shrink: 0;
}
.bc-footer__backtotop svg { display: block; }

.bc-footer__legalbar {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding-block: var(--bc-space-8);
}
.bc-footer__copyright { margin: 0; color: var(--bc-brand-25); font-size: var(--bc-text-md-size); line-height: var(--bc-text-md-leading); }
.bc-footer__copyright-icon { color: var(--bc-brand-25); font-size: 18px; line-height: 1; }

/* ───────────────────────────── Hero ───────────────────────────── */

.bc-block--hero {
	position: relative;
	background: var(--bc-bg-white);
	overflow: hidden;
	padding-block-start: var(--bc-space-25); /* 100px */
	padding-block-end: 0;
	margin-block-end: var(--bc-space-25);
}

/* Dark wedge with rounded bottom-right corner — sits behind text + top half of image. */
.bc-block--hero__dark {
	position: absolute;
	inset: 0 auto auto 0;
	width: 100%;
	height: 688px;
	background: var(--bc-brand-800);
	border-bottom-right-radius: 200px;
	z-index: 0;
}

.bc-block--hero__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--bc-space-12); /* 50px between text and image (Figma 50px) */
}

.bc-block--hero__intro {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: var(--bc-space-5);
	color: var(--bc-text-25);
}

.bc-block--hero__headline {
	font-family: var(--bc-font-display);
	font-weight: 300;
	font-size: var(--bc-display-2xl-size);
	line-height: var(--bc-display-2xl-leading);
	letter-spacing: var(--bc-display-2xl-tracking);
	color: var(--bc-text-25);
	max-width: 902px;
	margin: 0;
}

.bc-block--hero__meta {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: var(--bc-space-10);
	color: var(--bc-text-200);
	font-size: var(--bc-text-md-size);
	line-height: var(--bc-text-md-leading);
}

.bc-block--hero__subtitle {
	width: 277px;
	max-width: 50%;
	color: var(--bc-text-200);
	margin: 0;
}

.bc-block--hero__description {
	width: 372px;
	max-width: 50%;
	color: var(--bc-text-200);
	margin: 0;
}

.bc-block--hero__cta { align-self: flex-start; margin-top: var(--bc-space-6); }
/* Desktop has the Commencer pill in the navbar; hide the hero fallback so it
 * isn't duplicated. Surfaces only when the burger is active. */
@media (min-width: 1200px) {
	.bc-block--hero__cta { display: none; }
}

.bc-block--hero__media {
	width: 100%;
	max-width: var(--bc-container);
	margin: 0;
	border-radius: 50px;
	overflow: hidden;
	aspect-ratio: 1120 / 581;
	background: var(--bc-text-50);
}

.bc-block--hero__media > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.bc-block--hero__video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ─────────────────────────── Services Grid ─────────────────────────── */

.bc-block--services-grid { background: var(--bc-bg-white); }

.bc-block--services-grid__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--bc-space-12); /* 50px */
}

.bc-block--services-grid__header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--bc-space-1);
	text-align: center;
	max-width: 1120px;
}

.bc-block--services-grid__title {
	color: var(--bc-text-950);
	font-family: var(--bc-font-display);
	font-weight: 300;
	margin-block-start: 4px;
}

.bc-block--services-grid__description { margin-top: var(--bc-space-4); }

/* Figma 20828:105810 default + 20877:7747 hover variant.
 * Default card 256×370, hover variant 440×370 (icon-only btn → "En Savoir Plus →" pill).
 * Switch from grid to flex so a hovered card can grow while siblings shrink. */
.bc-block--services-grid__cards {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: var(--bc-space-8); /* 32px */
	justify-content: center;
	width: 100%;
	max-width: 100%;
}

.bc-block--services-grid__card {
	margin: 0;
	flex: 0 0 256px;
	min-width: 0;
	transition: flex-basis 250ms ease-out;
}
.bc-block--services-grid__card:hover {
	flex-basis: 440px;
}

.bc-block--services-grid__card-link {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-end;
	gap: var(--bc-space-3);
	width: 100%;
	height: 370px;
	padding: var(--bc-space-8);
	border-radius: 30px;
	overflow: hidden;
	color: var(--bc-bg-white);
	box-sizing: border-box;
	text-decoration: none;
	transform: translateZ(0);
	transition: box-shadow 200ms ease;
}
.bc-block--services-grid__card:hover .bc-block--services-grid__card-link {
	box-shadow: 0 18px 36px rgba(20, 20, 28, 0.22);
}

.bc-block--services-grid__card-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 30px;
}

.bc-block--services-grid__card-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.2);
	border-radius: 30px;
}

.bc-block--services-grid__card-title {
	position: relative;
	font-family: var(--bc-font-tag);
	font-weight: 700;
	font-size: var(--bc-display-xs-size);
	line-height: var(--bc-display-xs-leading);
	color: var(--bc-bg-white);
	text-align: center;
}

/* CTA: icon-only pill by default (Figma 20877:5335 — 41×40 charcoal circle).
 * On parent hover, label slides in and the pill grows to fill the card width
 * (Figma Variant3 → 342px, "En Savoir Plus →"). */
.bc-block--services-grid__card-cta {
	position: relative;
	align-self: center;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--bc-space-2);
	height: 40px;
	width: 40px;
	padding: 0;
	border-radius: 30px;
	background: var(--bc-brand-800);
	color: var(--bc-text-25);
	font-family: var(--bc-font-body);
	font-weight: 600;
	font-size: var(--bc-text-md-size);
	line-height: var(--bc-text-md-leading);
	box-shadow: var(--bc-shadow-xs);
	overflow: hidden;
	transition: width 200ms ease-out, padding 200ms ease-out, align-self 200ms ease-out, background 200ms ease;
}
.bc-block--services-grid__card-cta-label {
	max-width: 0;
	opacity: 0;
	white-space: nowrap;
	transition: max-width 200ms ease-out, opacity 150ms ease-out 50ms;
}
.bc-block--services-grid__card-cta-arrow {
	flex-shrink: 0;
}
.bc-block--services-grid__card:hover .bc-block--services-grid__card-cta {
	align-self: stretch;
	width: 100%;
	padding: 10px 18px;
	background: var(--bc-brand-600);
}
.bc-block--services-grid__card:hover .bc-block--services-grid__card-cta-label {
	max-width: 200px;
	opacity: 1;
}

/* ─────────────────────────── About ─────────────────────────── */

.bc-block--about { background: var(--bc-brand-600); color: var(--bc-text-25); }

.bc-block--about__inner {
	display: flex;
	flex-direction: column;
	gap: var(--bc-space-12);
}

.bc-block--about__top {
	display: grid;
	grid-template-columns: minmax(0, 478px) minmax(0, 558px);
	gap: var(--bc-space-16);
	align-items: stretch;
	justify-content: space-between;
}

.bc-block--about__copy {
	display: flex;
	flex-direction: column;
	gap: var(--bc-space-6);
	min-height: 400px;
	justify-content: space-between;
}

.bc-block--about__tag { color: var(--bc-brand-25); }
.bc-block--about__title { color: var(--bc-text-25); margin: 0; }

.bc-block--about__values {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--bc-space-3);
	color: var(--bc-brand-25);
	font-size: var(--bc-text-xl-size);
	line-height: var(--bc-text-xl-leading);
}
.bc-block--about__values li { display: flex; align-items: center; gap: var(--bc-space-3); }
.bc-block--about__check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 999px;
	background: var(--bc-bg-gray);
	color: var(--bc-text-950);
	font-size: 12px;
	border: 1px solid var(--bc-text-950);
	flex-shrink: 0;
}

.bc-block--about__cta {
	display: inline-flex;
	align-items: center;
	gap: var(--bc-space-2);
	padding: 10px 16px;
	background: var(--bc-bg-gray);
	color: var(--bc-text-950);
	border: 1px solid var(--bc-text-200);
	border-radius: 30px;
	box-shadow: var(--bc-shadow-xs);
	font-weight: 600;
	font-size: var(--bc-text-md-size);
	line-height: var(--bc-text-md-leading);
	text-decoration: none;
	width: fit-content;
}

.bc-block--about__media { margin: 0; height: 400px; border-radius: 30px; overflow: hidden; }
.bc-block--about__image { width: 100%; height: 100%; object-fit: cover; display: block; }

.bc-block--about__stats {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--bc-space-8);
}
.bc-block--about__stat {
	background: #742033; /* darker shade of brand 600 — verbatim Figma */
	border-radius: 30px;
	padding: var(--bc-space-10);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--bc-space-2);
	text-align: center;
	min-height: 174px;
}
.bc-block--about__stat-value {
	font-family: var(--bc-font-display);
	font-weight: 300;
	font-size: var(--bc-display-lg-size);
	line-height: var(--bc-display-lg-leading);
	letter-spacing: var(--bc-display-lg-tracking);
	color: var(--bc-text-25);
}
.bc-block--about__stat-label {
	color: var(--bc-text-200);
	font-size: var(--bc-text-md-size);
	line-height: var(--bc-text-md-leading);
}

/* ─────────────────────────── CTA Banner ─────────────────────────── */

.bc-block--cta-banner__inner {
	display: flex;
	flex-direction: column;
	gap: var(--bc-space-12);
}

.bc-block--cta-banner__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--bc-space-10);
}

.bc-block--cta-banner__title { max-width: 563px; margin: 0; }
.bc-block--cta-banner__buttons { display: flex; gap: var(--bc-space-3); flex-shrink: 0; }

.bc-block--cta-banner__body {
	display: grid;
	grid-template-columns: 525px minmax(0, 430px);
	gap: var(--bc-space-16);
	align-items: start;
	justify-content: space-between;
}

.bc-block--cta-banner__media,
.bc-block--cta-banner__media-placeholder {
	margin: 0;
	width: 525px;
	height: 180px;
	border-radius: 30px;
	overflow: hidden;
	background: var(--bc-bg-gray);
}
.bc-block--cta-banner__image { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; display: block; }
.bc-block--cta-banner__description {
	max-width: 430px;
	color: var(--bc-text-600);
	font-size: var(--bc-text-md-size);
	line-height: var(--bc-text-md-leading);
	margin-top: 42px;
}

/* ─────────────────────────── Page Header ─────────────────────────── */
/*
 * Figma 22932:18988 — centered eyebrow + display heading + description,
 * with the SECTION itself featuring a large bottom-right rounded cutout
 * (~80px radius matching the hero panel) where the page-header bg meets
 * the next section.
 */

.bc-block--page-header {
	position: relative;
	background: var(--bc-bg-white);
	border-bottom-right-radius: 80px;
	z-index: 1;
}
.bc-block--page-header__inner {
	display: flex;
	flex-direction: column;
	gap: var(--bc-space-3);
	align-items: center;
	text-align: center;
	max-width: 1120px;
}
.bc-block--page-header__title { margin-block: 4px 0; }
.bc-block--page-header__description { max-width: 720px; }

/* ─────────────────────────── Contact Form ─────────────────────────── */
/* Single card with burgundy left sidebar (~36%) + form (~64%). */

.bc-block--contact-form { background: var(--bc-bg-gray); }
/* Figma 22914:5276 — outer card (1120x514) holds the burgundy sidebar
 * (30px inset, all 4 corners rounded) and the form (40px gap from the
 * sidebar, 12px extra vertical breathing room). overflow:hidden was
 * cropping the nested sidebar's own corners and pulling it flush against
 * the right edge; padding + per-child border-radius gives the airy
 * nested-card look the Figma frame shows. */
.bc-block--contact-form__inner {
	display: grid;
	grid-template-columns: 360px minmax(0, 1fr);
	gap: 40px;
	align-items: stretch;
	background: var(--bc-bg-white);
	border-radius: 24px;
	padding: 30px;
	box-shadow: var(--bc-shadow-xs);
}

.bc-block--contact-form__sidebar {
	background: var(--bc-brand-600);
	color: var(--bc-text-25);
	padding: var(--bc-space-10);
	border-radius: 24px;
	display: flex;
	flex-direction: column;
	gap: var(--bc-space-6);
}
.bc-block--contact-form__sidebar-title { margin: 0; color: var(--bc-text-25); font-size: 32px; line-height: 40px; }
.bc-block--contact-form__sidebar-description { color: var(--bc-text-200); font-size: var(--bc-text-md-size); line-height: var(--bc-text-md-leading); }
.bc-block--contact-form__contact-list {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--bc-space-3);
}
.bc-block--contact-form__contact-list > div { display: flex; flex-direction: column; gap: 2px; }
.bc-block--contact-form__contact-list dt { font-weight: 600; font-size: var(--bc-text-sm-size); color: var(--bc-text-25); }
.bc-block--contact-form__contact-list dd { margin: 0; }
.bc-block--contact-form__contact-list a { color: var(--bc-text-25); text-decoration: underline; }

.bc-block--contact-form__form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--bc-space-5) var(--bc-space-6);
	padding: var(--bc-space-10);
}

/* CF7 wraps the form in <div class="wpcf7"><form class="wpcf7-form">…</form></div>.
 * Make those wrappers transparent so the <label> fields become direct grid
 * children of .bc-block--contact-form__form, where --half / --full apply. */
.bc-block--contact-form__form > .wpcf7,
.bc-block--contact-form__form .wpcf7-form { display: contents; }
.bc-block--contact-form__form .hidden-fields-container,
.bc-block--contact-form__form .screen-reader-response { display: none; }
.bc-block--contact-form__form .wpcf7-response-output { grid-column: 1 / -1; margin: 0; }
.bc-block--contact-form__form .wpcf7-form-control-wrap { display: block; }
/* When .bc-block--contact-form__submit is on the <input> directly (no field wrapper) */
input.bc-block--contact-form__submit { width: auto; }

.bc-block--contact-form__field { display: flex; flex-direction: column; gap: var(--bc-space-2); }
.bc-block--contact-form__field--full { grid-column: 1 / -1; }
.bc-block--contact-form__field--half { grid-column: span 1; }
.bc-block--contact-form__field span:first-child { font-size: var(--bc-text-sm-size); color: var(--bc-text-600); }
.bc-block--contact-form__field input,
.bc-block--contact-form__field textarea,
.bc-block--contact-form__field select {
	font: inherit;
	padding: 12px 0 6px;
	border: 0;
	border-bottom: 1px solid var(--bc-text-200);
	border-radius: 0;
	background: transparent;
	color: var(--bc-text-950);
	width: 100%;
}
.bc-block--contact-form__field input:focus,
.bc-block--contact-form__field textarea:focus,
.bc-block--contact-form__field select:focus {
	outline: 0;
	border-bottom-color: var(--bc-brand-600);
}
.bc-block--contact-form__field textarea { resize: vertical; min-height: 80px; }
.bc-block--contact-form__req { color: var(--bc-brand-600); }
.bc-block--contact-form__submit {
	grid-column: 1 / -1;
	justify-self: flex-start;
}

/* ─────────────────────────── Addresses Map ─────────────────────────── */

.bc-block--addresses-map__inner { display: flex; flex-direction: column; gap: var(--bc-space-8); }
.bc-block--addresses-map__header { text-align: center; display: flex; flex-direction: column; gap: var(--bc-space-2); align-items: center; }
.bc-block--addresses-map__header .bc-display-lg { max-width: 1120px; }
.bc-block--addresses-map__header p { max-width: 683px; margin-inline: auto; }
.bc-block--addresses-map__offices {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 373px));
	gap: var(--bc-space-5);
	justify-content: center;
	width: 100%;
}
/* Figma 22954:19142 — top 4px brand bar, bottom-rounded card, centred text. */
.bc-block--addresses-map__office {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--bc-space-5);
	padding: var(--bc-space-6) var(--bc-space-4) var(--bc-space-4);
	background: var(--bc-bg-gray);
	border: 0;
	border-top: 4px solid var(--bc-text-200);
	border-radius: 0 0 20px 20px;
	cursor: pointer;
	text-align: center;
	min-height: 135px;
	transition: border-top-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}
.bc-block--addresses-map__office:hover {
	border-top-color: var(--bc-brand-600);
	transform: translateY(-2px);
	box-shadow: var(--bc-shadow-xs);
}
.bc-block--addresses-map__office.is-active {
	border-top-color: var(--bc-brand-600);
}
.bc-block--addresses-map__office-title {
	margin: 0;
	font-family: var(--bc-font-body);
	font-weight: 600;
	font-size: var(--bc-text-xl-size);
	line-height: var(--bc-text-xl-leading);
	color: var(--bc-text-950);
	transition: color 150ms ease;
}
.bc-block--addresses-map__office:hover .bc-block--addresses-map__office-title,
.bc-block--addresses-map__office.is-active .bc-block--addresses-map__office-title {
	color: var(--bc-brand-600);
}
.bc-block--addresses-map__office-address {
	margin: 0;
	color: var(--bc-text-500);
	font-size: var(--bc-text-md-size);
	line-height: var(--bc-text-md-leading);
}

.bc-block--addresses-map__maps { position: relative; border-radius: 24px; overflow: hidden; min-height: 480px; background: var(--bc-bg-gray); }
.bc-block--addresses-map__map {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	opacity: 0;
	pointer-events: none;
	transition: opacity 200ms ease;
}
.bc-block--addresses-map__map.is-active { opacity: 1; pointer-events: auto; }

/* ─────────────────────────── Testimonials ─────────────────────────── */

/* Figma 20842:40495 — testimonial section sits on the brand-25 beige. */
.bc-block--testimonials { background: var(--bc-brand-25); }
.bc-block--testimonials__inner { display: flex; flex-direction: column; gap: var(--bc-space-12); align-items: stretch; }
/* Figma 20842:40496 — split header: tag+title left (544px), description right (457px) */
.bc-block--testimonials__header {
	display: grid;
	grid-template-columns: minmax(0, 544px) minmax(0, 457px);
	gap: var(--bc-space-16);
	align-items: center;
	justify-content: center;
}
.bc-block--testimonials__header-lead { display: flex; flex-direction: column; gap: var(--bc-space-1); }
.bc-block--testimonials__header-aside { display: flex; flex-direction: column; gap: var(--bc-space-6); align-items: flex-start; max-width: 457px; }
.bc-block--testimonials__title { margin: 0; max-width: 544px; }
.bc-block--testimonials__viewport {
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	width: 100%;
}
.bc-block--testimonials__viewport::-webkit-scrollbar { display: none; }
.bc-block--testimonials__cards {
	list-style: none;
	margin: 0;
	padding: 0 0 var(--bc-space-2);
	display: flex;
	gap: var(--bc-space-8);
	width: max-content;
	min-width: 100%;
	justify-content: flex-start;
}
.bc-block--testimonials__card {
	flex: 0 0 352px;
	scroll-snap-align: start;
	background: var(--bc-bg-gray);
	border-radius: 20px;
	padding: var(--bc-space-8);
	display: flex;
	flex-direction: column;
	gap: var(--bc-space-8);
	box-shadow: none;
	border: 0;
	align-self: stretch;
}
.bc-block--testimonials__nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--bc-space-4);
	width: 100%;
}
.bc-block--testimonials__arrows { display: flex; gap: var(--bc-space-3); }
/* Carousel arrows — Figma 22822:66312 (light/inactive) + 22822:66313 (filled).
 * Inactive: white pill, gray border. Active/next: brand-600 fill. */
.bc-block--testimonials__arrow {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid var(--bc-text-200);
	background: var(--bc-bg-gray);
	color: var(--bc-text-950);
	box-shadow: var(--bc-shadow-xs);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background 150ms ease, color 150ms ease, border-color 150ms ease, transform 150ms ease;
}
.bc-block--testimonials__arrow:hover {
	background: var(--bc-brand-600);
	color: var(--bc-text-25);
	border-color: var(--bc-brand-600);
	transform: translateY(-1px);
}
.bc-block--testimonials__arrow:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }
.bc-block--testimonials__arrow--active {
	/* "Next" arrow comes pre-highlighted in Figma — inverse of inactive. */
	background: var(--bc-brand-600);
	border-color: var(--bc-brand-600);
	color: var(--bc-text-25);
}
/* Figma rating frame is 122×18: 5 × 18px stars with 8px gaps. */
.bc-block--testimonials__rating { color: #FFB400; display: flex; gap: 8px; }
.bc-block--testimonials__star { display: block; }
.bc-block--testimonials__quote {
	margin: 0;
	font-size: var(--bc-text-md-size);
	line-height: var(--bc-text-md-leading);
	color: var(--bc-text-950);
	font-style: normal;
}
.bc-block--testimonials__author { display: flex; align-items: center; gap: var(--bc-space-2); margin: 0; }
.bc-block--testimonials__avatar { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.bc-block--testimonials__avatar--placeholder {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--bc-brand-600);
	color: #fff;
	font-weight: 600;
	font-size: 20px;
}
.bc-block--testimonials__author-meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bc-block--testimonials__author-name {
	display: block;
	font-weight: 500;
	color: var(--bc-text-950);
	font-size: var(--bc-text-md-size);
	line-height: 24px;
}
.bc-block--testimonials__author-role {
	display: block;
	color: var(--bc-text-500);
	font-size: var(--bc-text-xs-size);
	line-height: 18px;
}
.bc-block--testimonials__body {
	display: flex;
	flex-direction: column;
	gap: var(--bc-space-5);
	flex: 1;
}
.bc-block--testimonials__company-logo {
	display: block;
	width: 130px;
	height: 33px;
	object-fit: contain;
	object-position: left center;
	margin-top: auto;
	margin-right: auto;
	align-self: flex-start;
}
/* When no company logo image is set, render the name as a wordmark
 * placeholder so the card still has the bottom anchor seen in Figma. */
.bc-block--testimonials__company-name {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: auto;
	font-family: var(--bc-font-tag);
	font-weight: 700;
	font-size: 20px;
	line-height: 24px;
	color: var(--bc-text-950);
}
.bc-block--testimonials__company-name::before {
	content: "";
	display: inline-block;
	width: 24px;
	height: 24px;
	background: var(--bc-text-950);
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2 3 7v10l9 5 9-5V7l-9-5Zm0 2.18L19 8v8l-7 3.82L5 16V8l7-3.82Z'/></svg>") center/contain no-repeat;
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2 3 7v10l9 5 9-5V7l-9-5Zm0 2.18L19 8v8l-7 3.82L5 16V8l7-3.82Z'/></svg>") center/contain no-repeat;
}
.bc-block--testimonials__cta { margin: 0; }

/* ─────────────────────────── Expertise Showcase ─────────────────────────── */

.bc-block--expertise-showcase {
	background: var(--bc-brand-800);
	color: var(--bc-text-25);
}
.bc-block--expertise-showcase .bc-tag { color: var(--bc-brand-600); }
.bc-block--expertise-showcase__inner {
	display: grid;
	grid-template-columns: 352px minmax(0, 736px);
	gap: var(--bc-space-16);
	align-items: start;
}
.bc-block--expertise-showcase__intro { display: flex; flex-direction: column; gap: var(--bc-space-6); }
.bc-block--expertise-showcase__cards {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--bc-space-8);
}
.bc-block--expertise-showcase__card {
	display: flex;
	flex-direction: column;
	gap: var(--bc-space-6);
}
.bc-block--expertise-showcase__media {
	width: 100%;
	height: 250px;
	border-radius: 16px;
	overflow: hidden;
	background: var(--bc-bg-gray);
}
.bc-block--expertise-showcase__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bc-block--expertise-showcase__body { display: flex; flex-direction: column; gap: var(--bc-space-3); }
.bc-block--expertise-showcase__card-title { margin: 0; color: var(--bc-text-25); }
.bc-block--expertise-showcase__card-desc { color: var(--bc-text-200); }
.bc-block--expertise-showcase__card-cta {
	width: 40px;
	height: 40px;
	background: var(--bc-brand-600);
	color: #fff;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.bc-block--expertise-showcase__intro h2,
.bc-block--expertise-showcase__intro .bc-display-lg { color: var(--bc-text-25); }
.bc-block--expertise-showcase__intro .bc-text-muted { color: var(--bc-text-200); }

/* ─────────────────────────── Rich Text ─────────────────────────── */

.bc-block--rich-text__inner { max-width: 720px; margin-inline: auto; }
.bc-block--rich-text__inner p { margin-block: var(--bc-space-3); }

/* ─────────────────────────── Project Showcase ─────────────────────────── */

.bc-block--project-showcase__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--bc-space-12); }
.bc-block--project-showcase__item {
	display: grid;
	grid-template-columns: 490px minmax(0, 518px);
	gap: var(--bc-space-8);
	align-items: center;
	background: var(--bc-bg-gray);
	border-radius: 20px;
	padding: var(--bc-space-10);
	justify-content: center;
}
.bc-block--project-showcase__item.is-reversed > .bc-block--project-showcase__media { order: 2; }
.bc-block--project-showcase__media { width: 490px; height: 434px; border-radius: 30px; overflow: hidden; background: var(--bc-bg-gray); }
.bc-block--project-showcase__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bc-block--project-showcase__body { display: flex; flex-direction: column; gap: var(--bc-space-6); }
.bc-block--project-showcase__title { margin: 0; max-width: 508px; }
.bc-block--project-showcase__desc { max-width: 508px; }
.bc-block--project-showcase__desc p { margin: 0; }
.bc-block--project-showcase__cta { align-self: flex-start; }

/* ─────────────────────────── Accreditations ─────────────────────────── */

.bc-block--accreditations__inner { display: flex; flex-direction: column; gap: var(--bc-space-5); }
.bc-block--accreditations__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--bc-space-8);
}
.bc-block--accreditations__title { margin: 0; max-width: 952px; }
.bc-block--accreditations__cta { flex-shrink: 0; }
.bc-block--accreditations__body {
	display: grid;
	grid-template-columns: minmax(0, 597px) auto;
	gap: var(--bc-space-12);
	align-items: center;
	justify-content: space-between;
	padding-top: var(--bc-space-12);
	border-top: 1px solid var(--bc-text-200);
}
.bc-block--accreditations__copy { display: flex; flex-direction: column; gap: var(--bc-space-3); }
.bc-block--accreditations__logo { width: 256px; height: 94px; margin: 0; }
.bc-block--accreditations__logo img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* ─────────────────────────────────────────────────────────────────────
 * Responsive: tablet (≤1023) + mobile (≤639)
 * Mobile reference: Figma 20940:4489 (Home) / 23079:1622 (Contact).
 * ───────────────────────────────────────────────────────────────────── */

/* Navbar burger threshold: the desktop menu (logo 179 + 7 items ~738 +
 * CTA ~137 + gaps) needs ~1094px of horizontal room. Below that the
 * items would crowd and the logo would shrink, so we collapse to the
 * mobile overlay earlier than the rest of the layout (1023px). */
@media (max-width: 1199px) {
	.bc-navbar__nav { display: none; }
	.bc-navbar__cta { display: none; }
	.bc-navbar__burger { display: inline-flex; }
	.bc-navbar__phone { display: inline-flex; order: 99; }
	/* Burger sits before phone in source for screen-reader order, but Figma
	 * places phone last visually — relax flex order. */
	.bc-navbar__burger { order: 98; }
}

@media (max-width: 1199px) {
	/* Hero — narrow paddings, stack subtitle/description */
	.bc-block--hero__dark { height: 100%; border-bottom-right-radius: 80px; }
	.bc-block--hero__headline { font-size: 48px; line-height: 60px; max-width: 100%; }
	.bc-block--hero__meta { flex-direction: column; gap: var(--bc-space-3); }
	.bc-block--hero__subtitle, .bc-block--hero__description { width: 100%; max-width: 100%; }
	.bc-block--hero__media { border-radius: 24px; }

	/* Services grid: wrap to 2 columns on tablet. */
	.bc-block--services-grid__cards { flex-wrap: wrap; }
	.bc-block--services-grid__card,
	.bc-block--services-grid__card:hover { flex-basis: calc(50% - var(--bc-space-8) / 2); }

	/* Testimonials header: stack tag/title above description on tablet, and
	 * release the desktop max-widths so each piece uses the full column. */
	.bc-block--testimonials__header { grid-template-columns: 1fr; gap: var(--bc-space-6); }
	.bc-block--testimonials__title,
	.bc-block--testimonials__header-aside { max-width: none; }

	/* About: stack copy + image */
	.bc-block--about__top { grid-template-columns: 1fr; }
	.bc-block--about__media { height: 320px; }
	.bc-block--about__stats { grid-template-columns: repeat(2, 1fr); }

	/* CTA banner: stack head + body */
	.bc-block--cta-banner__head { flex-direction: column; align-items: stretch; }
	.bc-block--cta-banner__body { grid-template-columns: 1fr; }
	.bc-block--cta-banner__media, .bc-block--cta-banner__media-placeholder { width: 100%; }
	.bc-block--cta-banner__description { margin-top: 0; max-width: 100%; }

	/* Expertise showcase: stack intro + cards */
	.bc-block--expertise-showcase__inner { grid-template-columns: 1fr; }
	.bc-block--expertise-showcase__cards { grid-template-columns: 1fr 1fr; }

	/* Contact form: shrink sidebar column, force form fields full-width
	 * (half/half pairs would be too cramped at tablet width). */
	.bc-block--contact-form__inner { grid-template-columns: 280px minmax(0, 1fr); }
	.bc-block--contact-form__sidebar { padding: var(--bc-space-6); }
	.bc-block--contact-form__form { grid-template-columns: 1fr; padding: var(--bc-space-6); }
	.bc-block--contact-form__field--half { grid-column: 1 / -1; }

	/* Addresses map: keep 2-col office grid at tablet */
	.bc-block--addresses-map__maps { min-height: 360px; }

	/* Project showcase: stack image+body, shrink media to fit */
	.bc-block--project-showcase__item { grid-template-columns: 1fr; padding: var(--bc-space-6); }
	.bc-block--project-showcase__item.is-reversed > .bc-block--project-showcase__media { order: 0; }
	.bc-block--project-showcase__media { width: 100%; height: auto; aspect-ratio: 490/434; }
	.bc-block--project-showcase__title,
	.bc-block--project-showcase__desc { max-width: none; }

	/* Accreditations: stack head row, body row */
	.bc-block--accreditations__head { flex-direction: column; align-items: flex-start; gap: var(--bc-space-3); }
	.bc-block--accreditations__body { grid-template-columns: 1fr; padding-top: var(--bc-space-6); }
	.bc-block--accreditations__logo { justify-self: flex-start; }

	/* Footer: stack brand + columns; address bar wraps */
	.bc-footer__top { flex-direction: column; gap: var(--bc-space-12); }
	.bc-footer__brand { gap: var(--bc-space-8); width: 100%; }
	.bc-footer__columns { gap: var(--bc-space-10); flex-wrap: wrap; width: 100%; }
	.bc-footer__addressbar { flex-direction: column; align-items: flex-start; }
	.bc-footer__addresses { flex-direction: column; align-items: flex-start; gap: var(--bc-space-3); }
	.bc-footer__addresses-divider { display: none; }

	/* Tighten display sizes */
	.bc-display-2xl { font-size: 48px; line-height: 56px; letter-spacing: -1px; }
	.bc-display-lg { font-size: 36px; line-height: 44px; letter-spacing: -0.72px; }
}

@media (max-width: 767px) {
	/* Contact form: stack sidebar + form on phones */
	.bc-block--contact-form__inner { grid-template-columns: 1fr; }
	.bc-block--contact-form__sidebar { padding: var(--bc-space-8); }
	.bc-block--contact-form__form { padding: var(--bc-space-8); }

	/* Addresses map: stack offices below the map */
	.bc-block--addresses-map__offices { grid-template-columns: 1fr; gap: var(--bc-space-5); }
	.bc-block--addresses-map__maps { min-height: 320px; }
}

@media (max-width: 639px) {
	/* Display further down */
	.bc-display-2xl { font-size: 36px; line-height: 44px; }
	.bc-display-lg { font-size: 28px; line-height: 36px; }

	.bc-block--hero__headline { font-size: 36px; line-height: 44px; }
	/* Mobile: 2x2 grid with hover expansion. Card slot stays at 50% so the
	 * grid never reflows; the link is absolutely positioned and grows to
	 * 440px on top of its right neighbor (overflow: visible on the slot).
	 * Cards in the right column anchor to the right so they expand left. */
	.bc-block--services-grid__card,
	.bc-block--services-grid__card:hover {
		flex-basis: calc(50% - var(--bc-space-8) / 2);
		position: relative;
		height: 370px;
		overflow: visible;
	}
	.bc-block--services-grid__card .bc-block--services-grid__card-link {
		position: absolute;
		inset: 0;
		width: auto;
		transition: width 250ms ease-out, left 250ms ease-out, right 250ms ease-out;
	}
	.bc-block--services-grid__card:hover {
		z-index: 10;
	}
	.bc-block--services-grid__card:hover .bc-block--services-grid__card-link {
		width: min(440px, calc(100vw - 2 * var(--bc-gutter-mobile)));
	}
	.bc-block--services-grid__card:nth-child(even):hover .bc-block--services-grid__card-link {
		left: auto;
		right: 0;
	}
	.bc-block--about__stats { grid-template-columns: 1fr 1fr; gap: var(--bc-space-3); }
	.bc-block--about__stat { padding: var(--bc-space-6); min-height: 140px; }
	.bc-block--about__stat-value { font-size: 36px; line-height: 44px; }
	.bc-block--expertise-showcase__cards { grid-template-columns: 1fr; }
	.bc-block--cta-banner__buttons { flex-wrap: wrap; }

	/* Footer: stack columns; tighten newsletter */
	.bc-footer__columns { flex-direction: column; gap: var(--bc-space-8); }
	.bc-footer__col,
	.bc-footer__col--contact { width: 100%; }
	.bc-footer__newsletter-row { padding: 1px 1px 1px 16px; }
	.bc-footer__legalbar { text-align: center; }
}

/* ─────────────────────────── Hover polish ───────────────────────────
 * Per-element interaction states. Add color/transform/shadow on hover for
 * any element that the Figma marks as interactive (buttons, cards, links,
 * icon affordances) so the live site feels as responsive as the design.
 */

/* About CTA — light pill on burgundy bg, darkens on hover */
.bc-block--about__cta { transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease; }
.bc-block--about__cta:hover {
	background: var(--bc-brand-800);
	color: var(--bc-text-25);
	border-color: var(--bc-brand-800);
}

/* Expertise showcase card — circle arrow gets a hover, image zooms slightly */
.bc-block--expertise-showcase__card-cta { transition: background-color 150ms ease, transform 150ms ease; }
.bc-block--expertise-showcase__card:hover .bc-block--expertise-showcase__card-cta {
	background: var(--bc-text-25);
	color: var(--bc-brand-800);
	transform: translateY(-2px);
}

/* Addresses map office card — title shifts to brand on hover */
.bc-block--addresses-map__office { transition: opacity 150ms ease, transform 150ms ease; }
.bc-block--addresses-map__office:hover { opacity: 1; transform: translateY(-2px); }
.bc-block--addresses-map__office-title { transition: color 150ms ease; }
.bc-block--addresses-map__office:hover .bc-block--addresses-map__office-title,
.bc-block--addresses-map__office.is-active .bc-block--addresses-map__office-title { color: var(--bc-brand-600); }


/* Accreditations logo lifts on hover */
.bc-block--accreditations__logo img { transition: transform 200ms ease, filter 200ms ease; }
.bc-block--accreditations__logo:hover img { transform: translateY(-2px); }

/* Hero CTA inherits bc-button hover but ensure pill gets translate as well */
.bc-block--hero__cta { transition: background-color 150ms ease, color 150ms ease, transform 150ms ease; }
.bc-block--hero__cta:hover { transform: translateY(-1px); }

/* Focus-visible ring for keyboard users — works on all interactive surfaces */
.bc-button:focus-visible,
.bc-footer__social a:focus-visible,
.bc-footer__backtotop:focus-visible,
.bc-mobile-menu__link:focus-visible,
.bc-mobile-menu__close:focus-visible,
.bc-navbar__menu-item a:focus-visible,
.bc-navbar__cta:focus-visible,
.bc-block--services-grid__card-link:focus-visible {
	outline: 2px solid var(--bc-brand-600);
	outline-offset: 2px;
}