/**
 * Beaufort — components.
 *
 * Header / mega navigation, cards, tiles, CTA, marquee, process rail, stats.
 * Every component is shadowless and square-cornered by construction.
 */

/* ===========================================================================
   HEADER
   ======================================================================== */

.bf-header {
	position: sticky;
	top: 0;
	z-index: 100;
	width: 100%;
	background: var(--wp--preset--color--mist);
	border-bottom: var(--bf-hairline);
	transition: background-color 500ms var(--bf-ease-power3),
		border-color 500ms var(--bf-ease-power3);
}

/*
 * Wider than the 1280px content grid on purpose. The header is chrome, not
 * content: brand lockup, seven nav items, two icons and a button do not fit in
 * 1280 minus gutters, and capping it there pushed the enquiry button off the
 * right edge of the viewport.
 */
.bf-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	max-width: 1600px;
	margin-inline: auto;
	padding-inline: var(--bf-margin-inline);
	height: var(--bf-header-h);
	transition: height 400ms var(--bf-ease-power3);
}

.bf-header.is-scrolled .bf-header__inner {
	height: var(--bf-header-h-scrolled);
}

/*
 * Sticky is a header setting, not a fact of the theme. When it is switched off
 * the bar scrolls away with the page like any other band.
 */
.bf-header-static .bf-header {
	position: static;
}

/* --- Transparent-over-hero variant ------------------------------------- */

.bf-has-overlay-header .bf-header {
	position: fixed;
	background: transparent;
	border-bottom-color: transparent;
}

/*
 * The overlay treatment must also stand down while a panel is open — the panel
 * paints a light surface behind the bar, and white-on-white is unreadable.
 */
.bf-has-overlay-header .bf-header:not( .is-scrolled ):not( .has-open-panel ) .bf-header__brand-name,
.bf-has-overlay-header .bf-header:not( .is-scrolled ):not( .has-open-panel ) .bf-header__brand-sub,
.bf-has-overlay-header .bf-header:not( .is-scrolled ):not( .has-open-panel ) .bf-nav__link,
.bf-has-overlay-header .bf-header:not( .is-scrolled ):not( .has-open-panel ) .bf-header__icon,
.bf-has-overlay-header .bf-header:not( .is-scrolled ):not( .has-open-panel ) .bf-burger {
	color: var(--wp--preset--color--white);
}

.bf-has-overlay-header .bf-header:not( .is-scrolled ):not( .has-open-panel ) .bf-header__brand-text {
	border-left-color: rgba( 255, 255, 255, 0.4 );
}

.bf-has-overlay-header .bf-header:not( .is-scrolled ):not( .has-open-panel ) .bf-header__logo img {
	filter: brightness( 0 ) invert( 1 );
}

.bf-has-overlay-header .bf-header:not( .is-scrolled ):not( .has-open-panel ) .bf-header__cta {
	background: transparent;
	border-color: rgba( 255, 255, 255, 0.7 );
	color: var(--wp--preset--color--white);
}

.bf-has-overlay-header .bf-header:not( .is-scrolled ):not( .has-open-panel ) .bf-header__cta:hover {
	background: var(--wp--preset--color--white);
	border-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--navy);
}

/*
 * Overlay without sticky. `static` would put the bar back in the flow and push
 * the hero down, losing the overlay; `absolute` keeps it over the hero and lets
 * it scroll away, which is what switching sticky off is asking for. There is no
 * positioned ancestor, so this resolves against the viewport at the document
 * origin — where the header already is.
 */
.bf-header-static.bf-has-overlay-header .bf-header {
	position: absolute;
}

.bf-has-overlay-header .bf-header.is-scrolled {
	background: var(--wp--preset--color--mist);
	border-bottom-color: var(--wp--preset--color--silver);
}

/* Open mega panel forces the solid treatment so tiles stay legible. */
.bf-header.has-open-panel {
	background: var(--wp--preset--color--mist);
	border-bottom-color: var(--wp--preset--color--silver);
}

/* --- Brand lockup ------------------------------------------------------- */

.bf-header__brand {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	text-decoration: none;
	flex-shrink: 0;
}

/*
 * The supplied mark is a full wordmark (lettering above the device), so it is
 * sized for the lettering to stay legible rather than treated as a bare icon.
 */
.bf-header__logo img {
	display: block;
	height: 3rem;
	width: auto;
	object-fit: contain;
	transition: height 400ms var(--bf-ease-power3),
		filter 400ms var(--bf-ease-power3);
}

.bf-header.is-scrolled .bf-header__logo img {
	height: 2.5rem;
}

.bf-header__brand-text {
	display: none;
	border-left: var(--bf-hairline);
	padding-left: 0.875rem;
	line-height: 1;
}

/*
 * The wordmark lockup is the first thing to go: the supplied logo already
 * contains the word "Beaufort", so dropping the text costs recognition but
 * not information, and it buys ~140px for the navigation.
 */
@media ( min-width: 1500px ) {
	.bf-header__brand-text {
		display: block;
	}
}

.bf-header__brand-name {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.25rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--navy);
	margin-bottom: 0.25rem;
}

.bf-header__brand-sub {
	display: block;
	font-size: 0.5625rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--secondary);
}

/* --- Brand variants ----------------------------------------------------- */

/*
 * Six treatments, one per header in the reference pack, chosen in the block
 * sidebar. `logo` is the default and is styled by the rules above; the other
 * five carry the brand as type instead of as a mark, which makes the lockup the
 * widest thing in the bar — see the breakpoint overrides at the end of this
 * section for the two that grow enough to matter.
 */

/*
 * Where the type *is* the brand it can never be hidden, and there is no mark
 * beside it for the divider rule to separate it from.
 */
.bf-header--wordmark .bf-header__brand-text,
.bf-header--stacked .bf-header__brand-text,
.bf-header--compact .bf-header__brand-text,
.bf-header--mixed .bf-header__brand-text {
	display: block;
	border-left: 0;
	padding-left: 0;
}

.bf-header--monogram .bf-header__brand-text {
	display: block;
}

/* wordmark — letterspaced caps, no mark. */
.bf-header--wordmark .bf-header__brand-name {
	font-size: 1.375rem;
	letter-spacing: 0.24em;
}

.bf-header--wordmark .bf-header__brand-sub {
	letter-spacing: 0.36em;
}

.bf-header.is-scrolled .bf-header--wordmark .bf-header__brand-name {
	font-size: 1.1875rem;
}

/* stacked — the full name set large in the display serif, over two lines. */
.bf-header--stacked .bf-header__brand-name,
.bf-header--stacked .bf-header__brand-sub {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.375rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	line-height: 1.15;
	text-transform: none;
	color: var(--wp--preset--color--navy);
}

.bf-header--stacked .bf-header__brand-name {
	margin-bottom: 0;
}

.bf-header.is-scrolled .bf-header--stacked .bf-header__brand-name,
.bf-header.is-scrolled .bf-header--stacked .bf-header__brand-sub {
	font-size: 1.125rem;
}

/* compact — one word, no descriptor. */
.bf-header--compact .bf-header__brand-name {
	font-size: 1.5rem;
	letter-spacing: 0.18em;
	margin-bottom: 0;
}

.bf-header.is-scrolled .bf-header--compact .bf-header__brand-name {
	font-size: 1.25rem;
}

/* monogram — a navy tile standing in for the mark. */
.bf-header__monogram {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	flex-shrink: 0;
	width: 2.75rem;
	height: 2.75rem;
	border: 1px solid var(--wp--preset--color--navy);
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1;
	transition: width 400ms var(--bf-ease-power3),
		height 400ms var(--bf-ease-power3),
		background-color 500ms var(--bf-ease-power3),
		border-color 500ms var(--bf-ease-power3);
}

.bf-header.is-scrolled .bf-header__monogram {
	width: 2.25rem;
	height: 2.25rem;
	font-size: 1.25rem;
}

/* A navy tile disappears into a dark hero, so over one it becomes an outline. */
.bf-has-overlay-header .bf-header:not( .is-scrolled ):not( .has-open-panel ) .bf-header__monogram {
	background: transparent;
	border-color: rgba( 255, 255, 255, 0.7 );
	color: var(--wp--preset--color--white);
}

/* mixed — name and descriptor on one line, separated by weight alone. */
.bf-header--mixed .bf-header__brand-text {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
}

.bf-header--mixed .bf-header__brand-name,
.bf-header--mixed .bf-header__brand-sub {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.125rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin-bottom: 0;
}

.bf-header--mixed .bf-header__brand-name {
	font-weight: 700;
}

.bf-header--mixed .bf-header__brand-sub {
	font-weight: 300;
	color: var(--wp--preset--color--secondary);
}

/*
 * The desktop nav switches on at 1200px, which is exactly enough room for the
 * default lockup — and only because that lockup drops its text below 1500px,
 * leaving a 111px mark. A lockup made of type cannot do that: it *is* the
 * brand. Measured, the five type-led treatments run 157–336px, overflowing the
 * bar by 32–75px at 1200px.
 *
 * They pay for the extra width by keeping the drawer to 1320px rather than by
 * pushing the enquiry button off the right edge, which is what happened the
 * last time this bar was over-filled.
 */
@media ( max-width: 1319px ) {
	.bf-header--wordmark .bf-nav,
	.bf-header--stacked .bf-nav,
	.bf-header--compact .bf-nav,
	.bf-header--monogram .bf-nav {
		display: none;
	}

	.bf-header--wordmark .bf-burger,
	.bf-header--stacked .bf-burger,
	.bf-header--compact .bf-burger,
	.bf-header--monogram .bf-burger {
		display: inline-flex;
	}
}

/*
 * `mixed` runs horizontally rather than stacking, so at 336px it is twice the
 * width of the others and needs the full 1440 before the nav will fit beside it.
 */
@media ( max-width: 1439px ) {
	.bf-header--mixed .bf-nav {
		display: none;
	}

	.bf-header--mixed .bf-burger {
		display: inline-flex;
	}
}

/* And below the drawer breakpoint it stacks like every other lockup. */
@media ( max-width: 781px ) {
	.bf-header--mixed .bf-header__brand-text {
		display: block;
	}

	.bf-header--mixed .bf-header__brand-sub {
		font-size: 0.75rem;
		letter-spacing: 0.16em;
	}
}

/* --- Header actions ----------------------------------------------------- */

.bf-header__actions {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	flex-shrink: 0;
}

/*
 * The mail and phone shortcuts are a convenience, not navigation — they yield
 * their space to the nav until there is room for both.
 */
.bf-header__icons {
	display: none;
	gap: 0.875rem;
}

@media ( min-width: 1620px ) {
	.bf-header__icons {
		display: flex;
	}
}

.bf-header__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	color: var(--wp--preset--color--navy);
	transition: transform 200ms var(--bf-ease-power3), color 200ms linear;
}

.bf-header__icon:hover {
	transform: translateY( -2px );
}

.bf-header__icon svg {
	width: 1.125rem;
	height: 1.125rem;
}

.bf-header__cta {
	display: none;
	align-items: center;
	background: var(--wp--preset--color--navy);
	border: 1px solid var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
	font-size: var(--wp--preset--font-size--label-caps);
	font-weight: 700;
	letter-spacing: 0.1em;
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
	padding: 0.9375rem 2rem;
	transition: background-color 200ms linear, color 200ms linear,
		border-color 200ms linear, transform 120ms linear;
}

@media ( min-width: 782px ) {
	.bf-header__cta {
		display: inline-flex;
	}
}

.bf-header__cta:hover {
	background: var(--wp--preset--color--navy-mid);
	border-color: var(--wp--preset--color--navy-mid);
	color: var(--wp--preset--color--white);
}

.bf-header__cta:active {
	transform: scale( 0.97 );
}

/* ===========================================================================
   PRIMARY NAVIGATION + MEGA MENU
   ======================================================================== */

.bf-nav {
	display: none;
	align-items: center;
	gap: 1.25rem;
	margin-inline: auto;
}

@media ( min-width: 1200px ) {
	.bf-nav {
		display: flex;
	}
}

/* Only widen the gaps once there is genuinely room for them. */
@media ( min-width: 1560px ) {
	.bf-nav {
		gap: 2rem;
	}
}

/*
 * Alignment. The default `auto` margins centre the nav in whatever space the
 * lockup and the actions leave; `right` collapses that space onto the left so
 * the nav sits against the enquiry button.
 */
.bf-header--nav-right .bf-nav {
	margin-inline: auto 0;
}

.bf-nav__item {
	position: relative;
	display: flex;
	align-items: center;
}

/* The Dubai panel spans the viewport, so its parent must not be positioned. */
.bf-nav__item--mega {
	position: static;
}

.bf-nav__link {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	font-size: var(--wp--preset--font-size--label-caps);
	font-weight: 700;
	letter-spacing: 0.1em;
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	color: var(--wp--preset--color--secondary);
	padding-block: 0.5rem;
	border-bottom: 2px solid transparent;
	transition: color 300ms linear, border-color 300ms linear;
	background: none;
	border-left: 0;
	border-right: 0;
	border-top: 0;
	cursor: pointer;
	font-family: inherit;
}

.bf-nav__link:hover,
.bf-nav__item.is-open > .bf-nav__link {
	color: var(--wp--preset--color--navy);
}

.bf-nav__link[aria-current="page"],
.bf-nav__item.is-current > .bf-nav__link {
	color: var(--wp--preset--color--navy);
	border-bottom-color: currentColor;
}

.bf-nav__chevron {
	width: 0.75rem;
	height: 0.75rem;
	transition: transform 300ms var(--bf-ease-power3);
}

.bf-nav__item.is-open .bf-nav__chevron {
	transform: rotate( 180deg );
}

/* --- Simple dropdown (Perth, Civil Works) ------------------------------- */

.bf-dropdown {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 17.5rem;
	background: var(--wp--preset--color--white);
	border: var(--bf-hairline);
	opacity: 0;
	visibility: hidden;
	transform: translateY( -6px );
	transition: opacity 250ms var(--bf-ease-power3),
		transform 250ms var(--bf-ease-power3), visibility 250ms;
	z-index: 110;
}

.bf-nav__item.is-open .bf-dropdown {
	opacity: 1;
	visibility: visible;
	transform: translateY( 0 );
}

.bf-dropdown__link {
	display: block;
	padding: 1rem;
	font-size: var(--wp--preset--font-size--label-caps);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--wp--preset--color--navy);
	border-bottom: var(--bf-hairline);
	transition: background-color 200ms linear, color 200ms linear,
		padding-left 200ms var(--bf-ease-power3);
}

.bf-dropdown__link:last-child {
	border-bottom: 0;
}

.bf-dropdown__link:hover {
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
	padding-left: 1.375rem;
}

/* --- Mega panel (Dubai sectors) ----------------------------------------- */

.bf-mega {
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	background: var(--wp--preset--color--white);
	border-bottom: var(--bf-hairline);
	border-top: var(--bf-hairline);
	overflow: hidden;
	max-height: 0;
	opacity: 0;
	visibility: hidden;
	transition: max-height 500ms var(--bf-ease-power3),
		opacity 300ms linear, visibility 500ms;
	z-index: 110;
}

.bf-nav__item.is-open .bf-mega {
	max-height: 34rem;
	opacity: 1;
	visibility: visible;
}

.bf-mega__inner {
	max-width: 1280px;
	margin-inline: auto;
	padding: 2.5rem var(--bf-margin-inline);
}

.bf-mega__grid {
	display: grid;
	grid-template-columns: repeat( 7, minmax( 0, 1fr ) );
	gap: 1rem;
	margin-bottom: 2rem;
}

@media ( max-width: 1200px ) {
	.bf-mega__grid {
		grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	}
}

.bf-mega__tile {
	display: block;
	text-decoration: none;
	color: var(--wp--preset--color--navy);
}

/*
 * Tiles stagger in when the panel opens. This is keyed off `.is-open` rather
 * than the scroll observer used elsewhere: the panel is `max-height: 0` until
 * opened, so an IntersectionObserver would never report it as visible and the
 * tiles would stay at zero opacity forever.
 *
 * Written inside a no-preference query so the resting state is *visible* —
 * if motion is reduced or the query is unsupported, the tiles simply show.
 */
@media ( prefers-reduced-motion: no-preference ) {
	.bf-mega__tile {
		opacity: 0;
		transform: translateY( 14px );
		transition: opacity 400ms var(--bf-ease-power3),
			transform 400ms var(--bf-ease-power3);
	}

	.bf-nav__item.is-open .bf-mega__tile {
		opacity: 1;
		transform: translateY( 0 );
	}

	.bf-nav__item.is-open .bf-mega__tile:nth-child( 1 ) { transition-delay: 60ms; }
	.bf-nav__item.is-open .bf-mega__tile:nth-child( 2 ) { transition-delay: 110ms; }
	.bf-nav__item.is-open .bf-mega__tile:nth-child( 3 ) { transition-delay: 160ms; }
	.bf-nav__item.is-open .bf-mega__tile:nth-child( 4 ) { transition-delay: 210ms; }
	.bf-nav__item.is-open .bf-mega__tile:nth-child( 5 ) { transition-delay: 260ms; }
	.bf-nav__item.is-open .bf-mega__tile:nth-child( 6 ) { transition-delay: 310ms; }
	.bf-nav__item.is-open .bf-mega__tile:nth-child( 7 ) { transition-delay: 360ms; }
}

/*
 * `display: block` is load-bearing, not cosmetic — the element is a <span>
 * (it sits inside an <a>, where a <div> would be invalid), and inline boxes
 * ignore aspect-ratio and overflow entirely.
 */
.bf-mega__thumb {
	display: block;
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	margin-bottom: 0.75rem;
	background: var(--wp--preset--color--surface-container);
}

.bf-mega__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale( 100% );
	transition: transform 500ms var(--bf-ease-power3), filter 500ms linear;
}

.bf-mega__tile:hover .bf-mega__thumb img {
	transform: scale( 1.08 );
	filter: grayscale( 0 );
}

.bf-mega__label {
	display: block;
	text-align: center;
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	line-height: 1.4;
	text-transform: uppercase;
}

.bf-mega__footer {
	display: flex;
	justify-content: flex-end;
	border-top: var(--bf-hairline);
	padding-top: 1.5rem;
}

.bf-arrow-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: var(--wp--preset--font-size--label-caps);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--wp--preset--color--navy);
	border-bottom: 1px solid currentColor;
	padding-bottom: 0.25rem;
}

.bf-arrow-link svg {
	width: 1rem;
	height: 1rem;
	transition: transform 250ms var(--bf-ease-power3);
}

.bf-arrow-link:hover svg {
	transform: translateX( 4px );
}

/* ===========================================================================
   MOBILE DRAWER
   ======================================================================== */

.bf-burger {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
	color: var(--wp--preset--color--navy);
}

@media ( min-width: 1200px ) {
	.bf-burger {
		display: none;
	}
}

.bf-burger span {
	display: block;
	width: 1.5rem;
	height: 1px;
	background: currentColor;
	transition: transform 300ms var(--bf-ease-power3), opacity 200ms linear;
}

.bf-burger[aria-expanded="true"] span:nth-child( 1 ) {
	transform: translateY( 6px ) rotate( 45deg );
}

.bf-burger[aria-expanded="true"] span:nth-child( 2 ) {
	opacity: 0;
}

.bf-burger[aria-expanded="true"] span:nth-child( 3 ) {
	transform: translateY( -6px ) rotate( -45deg );
}

.bf-drawer {
	position: fixed;
	inset: 0;
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
	z-index: 200;
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	transform: translateX( 100% );
	visibility: hidden;
	transition: transform 450ms var(--bf-ease-power3), visibility 450ms;
}

.bf-drawer.is-open {
	transform: translateX( 0 );
	visibility: visible;
}

.bf-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1.5rem var(--bf-margin-inline);
	border-bottom: var(--bf-hairline-inverse);
	min-height: var(--bf-header-h);
}

.bf-drawer__head img {
	height: 2.25rem;
	width: auto;
	filter: brightness( 0 ) invert( 1 );
}

.bf-drawer__close {
	background: none;
	border: 0;
	color: inherit;
	cursor: pointer;
	padding: 0.5rem;
	display: inline-flex;
}

.bf-drawer__close svg {
	width: 1.5rem;
	height: 1.5rem;
}

.bf-drawer__body {
	flex: 1;
	padding: 1rem var(--bf-margin-inline) 3rem;
}

.bf-drawer__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 1.25rem 0;
	background: none;
	border: 0;
	border-bottom: var(--bf-hairline-inverse);
	color: inherit;
	cursor: pointer;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--label-caps);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-align: left;
	text-transform: uppercase;
	text-decoration: none;
}

.bf-drawer__link svg {
	width: 1rem;
	height: 1rem;
	transition: transform 300ms var(--bf-ease-power3);
}

.bf-drawer__group.is-open > .bf-drawer__link svg {
	transform: rotate( 180deg );
}

.bf-drawer__sub {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 350ms var(--bf-ease-power3);
}

.bf-drawer__group.is-open .bf-drawer__sub {
	grid-template-rows: 1fr;
}

.bf-drawer__sub-inner {
	overflow: hidden;
}

.bf-drawer__sub a {
	display: block;
	padding: 0.875rem 0 0.875rem 1rem;
	border-bottom: var(--bf-hairline-inverse);
	color: var(--wp--preset--color--pale-blue);
	font-size: var(--wp--preset--font-size--body-md);
	letter-spacing: 0.04em;
	text-decoration: none;
}

.bf-drawer__foot {
	padding: 2rem var(--bf-margin-inline) 3rem;
	border-top: var(--bf-hairline-inverse);
	display: grid;
	gap: 1rem;
}

.bf-drawer__foot a {
	color: var(--wp--preset--color--pale-blue);
	text-decoration: none;
	font-size: var(--wp--preset--font-size--body-md);
}

body.bf-drawer-open {
	overflow: hidden;
}

/* ===========================================================================
   PROJECT CARD
   ======================================================================== */

.bf-card {
	display: flex;
	flex-direction: column;
	border: var(--bf-hairline);
	background: var(--wp--preset--color--white);
	height: 100%;
	overflow: hidden;
}

.bf-card__media {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--wp--preset--color--surface-container);
}

.bf-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 700ms var(--bf-ease-power3);
}

.bf-card:hover .bf-card__media img {
	transform: scale( 1.08 );
}

.bf-card__tag {
	position: absolute;
	top: 1rem;
	right: 1rem;
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	line-height: 1;
	text-transform: uppercase;
	padding: 0.625rem 1rem;
}

.bf-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 2rem;
}

.bf-card__title {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--title-md);
	font-weight: 600;
	letter-spacing: 0.01em;
	line-height: 1.5;
	color: var(--wp--preset--color--navy);
	margin: 0 0 0.5rem;
}

.bf-card__title a {
	color: inherit;
	text-decoration: none;
}

.bf-card__excerpt {
	font-size: var(--wp--preset--font-size--body-md);
	color: var(--wp--preset--color--secondary);
	margin: 0 0 1.5rem;
}

.bf-card__meta {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 1rem;
	border-top: var(--bf-hairline);
	padding-top: 1.5rem;
	margin-top: auto;
}

.bf-card__meta-value {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--title-md);
	font-weight: 600;
	color: var(--wp--preset--color--navy);
	line-height: 1.3;
}

/* ===========================================================================
   FLAT CARD (civil works)
   ======================================================================== */

.bf-flatcard {
	display: flex;
	flex-direction: column;
	background: var(--wp--preset--color--white);
	border: var(--bf-hairline);
	padding: 2.5rem;
	height: 100%;
	text-decoration: none;
	transition: background-color 300ms linear, border-color 300ms linear;
}

.bf-flatcard:hover {
	background: var(--wp--preset--color--mist-low);
	border-color: var(--wp--preset--color--outline);
}

.bf-flatcard__title {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--title-md);
	font-weight: 600;
	color: var(--wp--preset--color--navy);
	margin: 0 0 1.5rem;
}

.bf-flatcard__text {
	font-size: var(--wp--preset--font-size--body-md);
	color: var(--wp--preset--color--graphite);
	margin: 0 0 2rem;
	flex: 1;
}

.bf-flatcard__action {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--navy);
}

.bf-flatcard__action svg {
	width: 0.875rem;
	height: 0.875rem;
	transition: transform 250ms var(--bf-ease-power3);
}

.bf-flatcard:hover .bf-flatcard__action svg {
	transform: translate( 3px, -3px );
}

/* ===========================================================================
   MARKET SPLIT
   ======================================================================== */

.bf-split {
	display: flex;
	flex-direction: column;
	border-bottom: var(--bf-hairline);
}

@media ( min-width: 782px ) {
	.bf-split {
		flex-direction: row;
		min-height: 34rem;
	}
}

.bf-split__panel {
	position: relative;
	flex: 1;
	overflow: hidden;
	background: var(--wp--preset--color--navy);
	min-height: 22rem;
	display: flex;
	text-decoration: none;
}

.bf-split__panel + .bf-split__panel {
	border-top: var(--bf-hairline-inverse);
}

@media ( min-width: 782px ) {
	.bf-split__panel + .bf-split__panel {
		border-top: 0;
		border-left: var(--bf-hairline-inverse);
	}
}

.bf-split__bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: 0.45;
	transition: transform 1000ms var(--bf-ease-power3), opacity 500ms linear;
}

.bf-split__panel:hover .bf-split__bg {
	transform: scale( 1.06 );
	opacity: 0.55;
}

.bf-split__content {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	width: 100%;
	padding: var(--wp--preset--spacing--60) var(--bf-margin-inline);
	color: var(--wp--preset--color--white);
}

/* The eyebrow defaults to a grey meant for light surfaces. */
.bf-split__content .bf-eyebrow {
	color: rgba( 255, 255, 255, 0.75 );
}

.bf-split__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--display-md);
	font-weight: 400;
	letter-spacing: 0.04em;
	line-height: 1.2;
	color: var(--wp--preset--color--white);
	margin: 0 0 1.5rem;
}

.bf-split__text {
	max-width: 28rem;
	font-size: var(--wp--preset--font-size--body-md);
	margin: 0 0 2rem;
	opacity: 0.85;
	transition: opacity 500ms linear;
}

@media ( min-width: 782px ) and ( hover: hover ) {
	.bf-split__text {
		opacity: 0;
	}

	.bf-split__panel:hover .bf-split__text,
	.bf-split__panel:focus-visible .bf-split__text {
		opacity: 0.85;
	}
}

/*
 * Reduced motion asks for nothing that depends on movement, and a paragraph
 * that only exists while the cursor is over it is exactly that: a mouse user
 * who never hovers this panel never learns the copy is there. Show it outright.
 * Must follow the hover block — same specificity, later wins.
 */
@media ( prefers-reduced-motion: reduce ) {
	.bf-split__text {
		opacity: 0.85;
	}
}

.bf-split__rule {
	height: 1px;
	width: 100%;
	background: rgba( 255, 255, 255, 0.35 );
	transform: scaleX( 0 );
	transform-origin: left;
	transition: transform 700ms var(--bf-ease-power3);
}

.bf-split__panel:hover .bf-split__rule,
.bf-split__panel:focus-visible .bf-split__rule {
	transform: scaleX( 1 );
}

/* ===========================================================================
   SECTOR TILES
   ======================================================================== */

.bf-sectors {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 1px;
	background: rgba( 255, 255, 255, 0.14 );
}

@media ( min-width: 600px ) {
	.bf-sectors {
		grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	}
}

@media ( min-width: 1024px ) {
	.bf-sectors {
		grid-template-columns: repeat( 7, minmax( 0, 1fr ) );
	}
}

.bf-sector-tile {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 2rem;
	aspect-ratio: 1 / 1;
	padding: 1.5rem;
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
	text-decoration: none;
	transition: background-color 300ms linear;
}

.bf-sector-tile:hover {
	background: var(--wp--preset--color--navy-mid);
	color: var(--wp--preset--color--white);
}

.bf-sector-tile__icon {
	width: 2.25rem;
	height: 2.25rem;
	stroke: currentColor;
	stroke-width: 1;
	fill: none;
}

.bf-sector-tile__label {
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	line-height: 1.4;
	text-transform: uppercase;
}

.bf-sector-tile__count {
	font-size: 0.625rem;
	letter-spacing: 0.08em;
	opacity: 0.55;
	display: block;
	margin-top: 0.375rem;
	font-weight: 400;
}

/* ===========================================================================
   PROCESS RAIL (What We Do — seven real steps)
   ======================================================================== */

.bf-process {
	position: relative;
	display: grid;
	gap: 2.5rem;
	counter-reset: bf-step;
}

@media ( min-width: 1024px ) {
	.bf-process {
		grid-template-columns: repeat( 7, minmax( 0, 1fr ) );
		gap: 1rem;
	}

	/* The connecting rail sits behind the numbered nodes. */
	.bf-process::before {
		content: "";
		position: absolute;
		top: 2rem;
		left: 7%;
		right: 7%;
		height: 1px;
		background: var(--wp--preset--color--silver);
	}
}

.bf-process__step {
	position: relative;
	display: flex;
	align-items: center;
	gap: 1.25rem;
	z-index: 1;
}

@media ( min-width: 1024px ) {
	.bf-process__step {
		flex-direction: column;
		text-align: center;
		gap: 1rem;
	}
}

.bf-process__node {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 4rem;
	height: 4rem;
	border: 1px solid var(--wp--preset--color--navy);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--navy);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--title-md);
	font-weight: 600;
	transition: background-color 300ms linear, color 300ms linear;
}

.bf-process__step:hover .bf-process__node {
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
}

.bf-process__label {
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.5;
	text-transform: uppercase;
	color: var(--wp--preset--color--navy);
	max-width: 11rem;
}

.bf-process__note {
	display: block;
	margin-top: 0.375rem;
	font-size: 0.625rem;
	font-weight: 400;
	letter-spacing: 0.04em;
	text-transform: none;
	color: var(--wp--preset--color--secondary);
}

/* ===========================================================================
   STATS BAND
   ======================================================================== */

.bf-stats {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 2.5rem var(--wp--preset--spacing--40);
	text-align: center;
}

@media ( min-width: 782px ) {
	.bf-stats {
		grid-template-columns: repeat( 5, minmax( 0, 1fr ) );
	}
}

.bf-stat__figure {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--display-md);
	font-weight: 400;
	letter-spacing: 0.02em;
	line-height: 1.1;
	color: inherit;
	margin-bottom: 0.75rem;
	font-variant-numeric: tabular-nums;
}

.bf-stat__label {
	display: block;
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	line-height: 1.5;
	text-transform: uppercase;
	opacity: 0.6;
}

/* ===========================================================================
   MARQUEE
   ======================================================================== */

.bf-marquee {
	overflow: hidden;
	white-space: nowrap;
	position: relative;
	border-block: var(--bf-hairline);
	background: var(--wp--preset--color--mist-low);
	padding-block: 3rem;
}

.bf-marquee__track {
	display: flex;
	width: max-content;
	animation: bf-marquee-scroll var(--bf-marquee-duration, 40s) linear infinite;
}

.bf-marquee:hover .bf-marquee__track {
	animation-play-state: paused;
}

.bf-marquee__group {
	display: flex;
	align-items: center;
	gap: 3rem;
	padding-right: 3rem;
	flex-shrink: 0;
}

.bf-marquee__item {
	font-family: var(--wp--preset--font-family--body);
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	color: var(--wp--preset--color--outline);
	opacity: 0.35;
}

.bf-marquee__dot {
	width: 0.375rem;
	height: 0.375rem;
	border-radius: 50%;
	background: var(--wp--preset--color--outline);
	opacity: 0.3;
	flex-shrink: 0;
}

@keyframes bf-marquee-scroll {
	from {
		transform: translateX( 0 );
	}
	to {
		transform: translateX( -50% );
	}
}

/* ===========================================================================
   CTA BAND
   ======================================================================== */

.bf-cta__contact {
	display: flex;
	align-items: center;
	gap: 1rem;
	text-decoration: none;
	color: inherit;
}

.bf-cta__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3.25rem;
	height: 3.25rem;
	flex-shrink: 0;
	background: rgba( 255, 255, 255, 0.1 );
	transition: background-color 300ms linear, color 300ms linear;
}

.bf-cta__icon svg {
	width: 1.25rem;
	height: 1.25rem;
}

.bf-cta__contact:hover .bf-cta__icon {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--navy);
}

.bf-cta__label {
	display: block;
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	opacity: 0.6;
	margin-bottom: 0.25rem;
}

.bf-cta__value {
	display: block;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--title-md);
	font-weight: 600;

	/*
	 * An email address is one unbroken token, so the tile cannot shrink below
	 * its width and a long one pushes the whole band past a narrow viewport.
	 * `anywhere` rather than `break-word` on purpose: only `anywhere` reduces
	 * the element's min-content width, which is what actually lets the flex
	 * item shrink. `break-word` wraps the text but leaves the intrinsic size,
	 * and the overflow stays.
	 */
	overflow-wrap: anywhere;
}

/* Flex children default to min-width:auto, which blocks the shrink above. */
.bf-cta__contact,
.bf-cta__contact > * {
	min-width: 0;
}

/*
 * The wrap above keeps any address inside the viewport, but breaking a domain
 * across two lines reads badly, and breaking off a single character reads
 * worse. Measured at 390px: the tile gives the value 282px, and the address
 * needs 287px at the desktop size. Stepping down one stop in the type scale
 * brings it to 268px, so it sits on one line with room to spare. The wrap
 * stays as the safety net for a buyer whose address is longer still.
 */
@media ( max-width: 781px ) {
	.bf-cta__value {
		font-size: var(--wp--preset--font-size--body-md);
	}

	/*
	 * Four pixels back off the icon gap. At 375px, one of the commonest phone
	 * widths, the address needed 268px and had 267 — this buys the line rather
	 * than dropping another step in the type scale for the sake of one pixel.
	 */
	.bf-cta__contact {
		gap: 0.75rem;
	}
}

/* ===========================================================================
   FOOTER
   ======================================================================== */

.bf-footer__mark img {
	height: 3rem;
	width: auto;
}

.bf-footer__heading {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--label-caps);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--pale-blue);
	margin: 0 0 2rem;
}

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

.bf-footer__list a {
	color: rgba( 255, 255, 255, 0.75 );
	text-decoration: none;
	font-size: var(--wp--preset--font-size--body-md);
	transition: color 200ms linear;
}

.bf-footer__list a:hover {
	color: var(--wp--preset--color--white);
}

.bf-footer__address {
	font-style: normal;
	font-size: var(--wp--preset--font-size--body-md);
	line-height: 1.8;
	color: rgba( 255, 255, 255, 0.75 );
}

.bf-footer__address a {
	color: inherit;
	text-decoration: none;
}

.bf-footer__address a:hover {
	color: var(--wp--preset--color--white);
}

.bf-footer__po {
	font-size: 0.75rem;
	margin-top: var(--wp--preset--spacing--30);
}

/* --- Copyright bar ------------------------------------------------------- */

.bf-footer__legal-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30);
	max-width: 1280px;
	margin-inline: auto;
	padding-inline: var(--bf-margin-inline);
	padding-block: var(--wp--preset--spacing--50);
}

/* Centre it when the legal menu is empty and there is only one child. */
.bf-footer__legal-inner:has( > :only-child ) {
	justify-content: center;
}

.bf-footer__copyright {
	margin: 0;
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba( 255, 255, 255, 0.4 );
}

.bf-footer__legal-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--40);
	list-style: none;
	margin: 0;
	padding: 0;
}

.bf-footer__legal-links a {
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	color: rgba( 255, 255, 255, 0.55 );
	transition: color 200ms linear;
}

.bf-footer__legal-links a:hover {
	color: var(--wp--preset--color--white);
}

/* --- Footer presets ------------------------------------------------------ */

/*
 * The centred preset stacks its quick links into a single horizontal row
 * rather than the four-column layout's vertical list.
 */
.bf-footer--centred .bf-footer__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--wp--preset--spacing--40);
	margin-top: var(--wp--preset--spacing--50);
}

.bf-footer--centred .bf-footer__list li {
	margin: 0;
}

.bf-footer--centred .wp-block-site-logo {
	display: flex;
	justify-content: center;
}

/* The minimal preset is only the bar, so it does not need a rule above it. */
.bf-footer--bar .bf-footer__legal {
	border-top: 0;
}

/* ===========================================================================
   HERO — a core/cover block, so it stays fully editable
   ======================================================================== */

/*
 * Height is set here, not inline on the block, so it can be capped. On a tall
 * desktop viewport a pure 100vh hero crops the photography to a sliver.
 */
.bf-hero {
	overflow: hidden;
	min-height: min( 100svh, 52rem );
}

/* The Ken Burns drift belongs to the cover's own background image. */
.bf-hero .wp-block-cover__image-background,
.bf-hero .wp-block-cover__video-background {
	animation: bf-kenburns 20s ease-in-out infinite alternate;
	will-change: transform;
}

/* Clear the fixed header so the headline never sits under it. */
.bf-hero .wp-block-cover__inner-container {
	width: 100%;
	padding-top: var(--bf-header-h);
}

.bf-hero__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--display-lg);
	font-weight: 400;
	letter-spacing: 0.05em;
	line-height: 1.1;
	color: var(--wp--preset--color--white);
	margin: 0 0 2rem;
	max-width: 20ch;
}

.bf-hero__rule {
	width: 6rem;
	height: 2px;
	background: var(--wp--preset--color--white);
	margin-bottom: 2rem;
}

.bf-hero__text {
	max-width: 42rem;
	font-size: var(--wp--preset--font-size--body-lg);
	color: rgba( 255, 255, 255, 0.85 );
	margin: 0 0 3rem;
}

.bf-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
}

.bf-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid transparent;
	font-size: var(--wp--preset--font-size--label-caps);
	font-weight: 700;
	letter-spacing: 0.1em;
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
	padding: 1.125rem 2.5rem;
	transition: background-color 250ms linear, color 250ms linear,
		border-color 250ms linear;
}

.bf-btn--light {
	background: var(--wp--preset--color--white);
	border-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--navy);
}

.bf-btn--light:hover {
	background: var(--wp--preset--color--surface-container);
	border-color: var(--wp--preset--color--surface-container);
	color: var(--wp--preset--color--navy);
}

.bf-btn--ghost {
	background: transparent;
	border-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--white);
}

.bf-btn--ghost:hover {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--navy);
}

.bf-btn--outline {
	background: transparent;
	border-color: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--navy);
}

.bf-btn--outline:hover {
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
}

/* ===========================================================================
   SECTION HEAD (eyebrow + heading + optional action)
   ======================================================================== */

.bf-sectionhead {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.5rem;
	margin-bottom: var(--wp--preset--spacing--60);
}

.bf-sectionhead__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--display-md);
	font-weight: 400;
	letter-spacing: 0.04em;
	line-height: 1.2;
	margin: 0;
}

/* ===========================================================================
   CARD GRID (used by patterns that emit raw markup)
   ======================================================================== */

.bf-cardgrid {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	grid-template-columns: 1fr;
}

@media ( min-width: 600px ) {
	.bf-cardgrid--2,
	.bf-cardgrid--3 {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

@media ( min-width: 900px ) {
	.bf-cardgrid--3 {
		grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	}
}

/* ===========================================================================
   PROJECT META
   ======================================================================== */

.bf-projectmeta--pairs {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 1rem;
}

.bf-projectmeta--pairs .bf-projectmeta__value,
.bf-projectmeta--bar .bf-projectmeta__value {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--title-md);
	font-weight: 600;
	line-height: 1.3;
	color: inherit;
	display: block;
}

.bf-projectmeta--bar {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 11rem, 1fr ) );
	gap: 2rem;
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
	padding: 2rem var(--bf-margin-inline);
}

.bf-projectmeta--bar .bf-microlabel {
	color: rgba( 255, 255, 255, 0.55 );
}

.bf-projectmeta--inline {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	align-items: center;
}

.bf-projectmeta--inline .bf-projectmeta__item {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: var(--wp--preset--font-size--body-md);
	color: var(--wp--preset--color--graphite);
}

.bf-projectmeta__icon {
	flex-shrink: 0;
	color: var(--wp--preset--color--navy);
}

.bf-projectmeta a {
	color: inherit;
	text-decoration: none;
}

/* ===========================================================================
   CORE BLOCK INTEGRATION
   ======================================================================== */

/*
 * Cards are assembled from core Group blocks, so core's flow-layout margins
 * have to be neutralised — the card's own padding does the spacing.
 */
.bf-card,
.bf-card__body {
	display: flex;
	flex-direction: column;
}

.bf-card > *,
.bf-card__media > *,
.bf-card__body > * {
	margin-block: 0;
}

.bf-card__body > * + * {
	margin-block-start: 0.5rem;
}

/*
 * Only the inner figure and link stretch — the media wrapper itself must keep
 * its aspect-ratio, so sibling cards crop to identical heights.
 */
.bf-card__media .wp-block-post-featured-image,
.bf-card__media .wp-block-post-featured-image a {
	display: block;
	margin: 0;
	height: 100%;
}

.bf-card__media .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 700ms var(--bf-ease-power3);
}

.bf-card:hover .wp-block-post-featured-image img {
	transform: scale( 1.08 );
}

/* The excerpt block wraps its text in a <p>; the "read more" link is dropped. */
.bf-card__excerpt p {
	margin: 0;
	font-size: var(--wp--preset--font-size--body-md);
	color: var(--wp--preset--color--secondary);
}

.bf-card__meta {
	margin-top: auto !important;
	padding-top: 1.5rem;
	border-top: var(--bf-hairline);
}

/* Grid layouts must stretch children so sibling cards share a height. */
.wp-block-post-template.is-layout-grid > li {
	display: flex;
}

.wp-block-post-template.is-layout-grid > li > * {
	width: 100%;
}

/* --- Button block styles ------------------------------------------------ */

.wp-block-button.is-style-light .wp-block-button__link {
	background-color: var(--wp--preset--color--white);
	border-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--navy);
}

.wp-block-button.is-style-light .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--surface-container);
	border-color: var(--wp--preset--color--surface-container);
	color: var(--wp--preset--color--navy);
}

.wp-block-button.is-style-ghost .wp-block-button__link {
	background-color: transparent;
	border: 1px solid var(--wp--preset--color--white);
	color: var(--wp--preset--color--white);
}

.wp-block-button.is-style-ghost .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--navy);
}

.wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent;
	border: 1px solid currentColor;
	color: var(--wp--preset--color--navy);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--navy);
	border-color: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
}

/* --- Group & image block styles ----------------------------------------- */

.wp-block-group.is-style-hairline-frame {
	border: var(--bf-hairline);
	padding: var(--wp--preset--spacing--50);
}

.bf-inverse .wp-block-group.is-style-hairline-frame,
.has-navy-background-color .wp-block-group.is-style-hairline-frame {
	border-color: rgba( 255, 255, 255, 0.16 );
}

.wp-block-image.is-style-duotone-navy img {
	filter: grayscale( 100% );
	transition: filter 600ms linear;
}

.wp-block-image.is-style-duotone-navy:hover img {
	filter: grayscale( 0 );
}

/* --- Page head ---------------------------------------------------------- */

.bf-pagehead {
	padding-top: calc( var(--bf-header-h) + var(--wp--preset--spacing--70) ) !important;
}

.bf-pagehead .wp-block-post-title {
	margin: 0;
}

/* --- Search + pagination ------------------------------------------------ */

.bf-search .wp-block-search__input {
	border: var(--bf-hairline);
	border-radius: 2px;
	padding: 0.875rem 1rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--body-lg);
	background: var(--wp--preset--color--white);
}

.bf-search .wp-block-search__input:focus {
	border-color: var(--wp--preset--color--navy);
	outline: none;
}

.bf-search .wp-block-search__button {
	border-radius: 0;
	background: var(--wp--preset--color--navy);
	border: 1px solid var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
	font-size: var(--wp--preset--font-size--label-caps);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 0.875rem 1.75rem;
}

.wp-block-query-pagination {
	border-top: var(--bf-hairline);
	padding-top: var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--label-caps);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* --- Footer site logo --------------------------------------------------- */

.bf-footer .wp-block-site-logo img {
	height: auto;
}

.bf-footer .wp-block-site-logo a {
	display: inline-block;
}