/**
 * BH Theme — presentation layer.
 *
 * Colour, elevation and depth tokens are injected from PHP (inc/customizer-css.php)
 * as :root custom properties. Nothing here hardcodes a brand colour, so the whole
 * theme re-skins from three Customizer swatches.
 *
 * Structure
 *   01  Reset & base
 *   02  Type scale
 *   03  Layout primitives
 *   04  Bands (light / night sections)
 *   05  Buttons & links
 *   06  Chrome — topbar, header, nav, search, cursor, preloader, FAB
 *   07  Hero
 *   08  Marquee
 *   09  3D surface model (tilt cards)
 *   10  Sections
 *   11  Editorial — entry, comments, widgets, pagination
 *   12  Motion & reveal
 *   13  Responsive
 *
 * @package BH_Theme
 */

/* =============================================================================
   01  RESET & BASE
   ========================================================================== */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: 6rem;
}

body {
	margin: 0;
	background: var(--bh-canvas);
	color: var(--bh-text);
	font-family: var(--bh-font-body);
	font-size: var(--bh-body-size);
	line-height: 1.7;
	font-weight: 400;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
	height: auto;
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

button {
	cursor: pointer;
	background: none;
	border: 0;
	padding: 0;
}

a {
	color: inherit;
	text-decoration: none;
	transition: color 0.3s ease;
}

ul,
ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

figure {
	margin: 0;
}

:focus-visible {
	outline: 2px solid var(--bh-gold);
	outline-offset: 3px;
	border-radius: 2px;
}

::selection {
	background: var(--bh-gold);
	color: var(--bh-on-gold);
}

/* Fonts and geometry that are not client-configurable. ---------------------- */

:root {
	/*
	 * Serif-led. Body copy is set in a text serif rather than a UI sans, which
	 * is what gives the page its editorial, unhurried feel — the sans is kept
	 * only for the small caps-and-tracking labels, where a serif at 11px with
	 * 0.42em letter-spacing turns to mush.
	 */
	--bh-font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
	--bh-font-body: "EB Garamond", Georgia, "Times New Roman", serif;
	--bh-font-label: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;

	/* Garamond runs small; it needs more size than a sans at the same measure. */
	--bh-body-size: 1.125rem;
	--bh-container: 1400px;
	--bh-container-text: 46rem;
	--bh-gutter: clamp(1.25rem, 4vw, 3rem);
	--bh-section-y: clamp(4.5rem, 9vw, 8.5rem);

	--bh-radius-xs: 2px;
	--bh-radius-sm: 4px;
	--bh-radius-md: 10px;
	--bh-radius-lg: 20px;
	--bh-radius-pill: 999px;

	--bh-tracking-label: 0.42em;
	--bh-tracking-wide: 0.12em;

	/* 3D */
	--bh-persp: 1400px;
	--bh-tilt-max: 7deg;
	--bh-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--bh-ease-out: cubic-bezier(0.16, 1, 0.3, 1);

	/* Runtime values written by JS; declared so the CSS is valid without it. */
	--bh-rx: 0deg;
	--bh-ry: 0deg;
	--bh-px: 50%;
	--bh-py: 50%;
	--bh-scroll: 0;
}

/* =============================================================================
   02  TYPE SCALE
   ========================================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
	font-family: var(--bh-font-display);
	font-weight: 300;
	line-height: 1.1;
	letter-spacing: 0.01em;
}

p {
	margin: 0 0 1.15em;
}

p:last-child {
	margin-bottom: 0;
}

/*
 * Everything set in small caps with heavy tracking stays on the sans. A text
 * serif at 11px with 0.42em letter-spacing loses its joins and reads as noise,
 * so the label face is a deliberate exception to the serif-led body copy.
 */
.eyebrow,
.btn,
.nav__list a,
.topbar,
.card__tag,
.card__cta,
.stat__label,
.why__title,
.footer__heading,
.footer-bar,
.widget__title,
.project-facts__title,
.quote__role,
.filter__btn,
.post-meta,
.breadcrumbs,
.hero__badge,
.hero__sub,
.hero__outro-eyebrow,
.hero__scroll-label,
.marquee__item,
.comment__date,
.comment-reply-link,
.result__type,
.entry__tags-label,
.pagination .page-numbers,
.compare__tag,
.material__meta,
.service__unit,
.rating-head__source,
.link-underline,
.fab__label,
.screen-reader-text:focus {
	font-family: var(--bh-font-label);
}

.eyebrow {
	margin: 0 0 1.35rem;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: var(--bh-tracking-label);
	text-transform: uppercase;
	color: var(--bh-gold);
}

.section__title {
	font-size: clamp(2rem, 4.6vw, 3.5rem);
	letter-spacing: 0.02em;
}

.section__title--left {
	text-align: left;
}

.section__header {
	max-width: 46rem;
	margin: 0 auto clamp(2.5rem, 5vw, 4rem);
}

.section__header--center {
	text-align: center;
}

.section__header--left {
	margin-left: 0;
	text-align: left;
}

.section__header--center .eyebrow {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
}

.section__header--center .eyebrow::before,
.section__header--center .eyebrow::after {
	content: "";
	width: clamp(1.5rem, 5vw, 3.5rem);
	height: 1px;
	background: var(--bh-gold);
	opacity: 0.55;
}

.section__lead {
	margin-top: 1.25rem;
	font-size: 1.0625rem;
	color: var(--bh-text-soft);
}

.section__footer {
	margin-top: clamp(2.5rem, 5vw, 4rem);
	text-align: center;
}

/* Gold hairline used to open and close bands. */
.gold-rule {
	width: min(100%, 40rem);
	height: 1px;
	margin: 0 auto;
	background: var(--bh-rule);
}

/* =============================================================================
   03  LAYOUT PRIMITIVES
   ========================================================================== */

.container {
	width: 100%;
	max-width: var(--bh-container);
	margin: 0 auto;
	padding-inline: var(--bh-gutter);
}

.section {
	position: relative;
	padding-block: var(--bh-section-y);
}

.layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 20rem;
	gap: clamp(2rem, 5vw, 4.5rem);
	padding-block: var(--bh-section-y);
	align-items: start;
}

.has-no-sidebar .layout {
	grid-template-columns: minmax(0, 1fr);
}

.page-body {
	padding-block: var(--bh-section-y);
}

/* =============================================================================
   04  BANDS
   ========================================================================== */

/*
 * The page alternates warm canvas and deep ink bands. A band swaps the text
 * tokens rather than restating colours on every child, so components are band
 * agnostic — drop any card into either and it reads correctly.
 */

.band-canvas {
	background: var(--bh-canvas);
}

.band-canvas-alt {
	background: var(--bh-canvas-2);
}

.band-pearl {
	background: var(--bh-pearl);
}

.band-ink,
.band-ink-deep {
	--bh-text: var(--bh-text-on-ink);
	--bh-text-soft: var(--bh-text-on-ink-soft);
	--bh-text-muted: var(--bh-text-on-ink-muted);
	--bh-line: var(--bh-line-on-ink);
	--bh-surface: var(--bh-ink-2);
	--bh-surface-raised: var(--bh-ink-3);

	color: var(--bh-text-on-ink);
}

.band-ink {
	background: var(--bh-ink);
}

.band-ink-deep {
	background: var(--bh-ink-deep);
}

.band-canvas,
.band-canvas-alt,
.band-pearl {
	--bh-surface: var(--bh-pearl);
	--bh-surface-raised: #fff;
}

/* Hairline seam between consecutive bands. */
.section + .section:not(.band-ink):not(.band-ink-deep) {
	border-top: 1px solid var(--bh-line);
}

/* =============================================================================
   05  BUTTONS & LINKS
   ========================================================================== */

/*
 * Any author rule that sets `display` defeats the browser's
 * `[hidden] { display: none }`, because the UA sheet always loses to author
 * styles. Without this, every .btn marked hidden in markup still renders — the
 * calculator's Back and Submit buttons were both visible on every step and
 * overflowed their row. Declared once, globally, so the trap cannot recur.
 */
[hidden] {
	display: none !important;
}

.btn {
	--btn-bg: transparent;
	--btn-fg: var(--bh-text);
	--btn-border: var(--bh-gold);

	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.7rem;
	padding: 0.95rem 2.1rem;
	background: var(--btn-bg);
	color: var(--btn-fg);
	border: 1px solid var(--btn-border);
	border-radius: var(--bh-radius-xs);
	font-family: var(--bh-font-label);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	white-space: nowrap;
	transform: translateZ(0);
	transition: transform 0.35s var(--bh-ease), box-shadow 0.35s var(--bh-ease),
		background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}

.btn .icon {
	transition: transform 0.35s var(--bh-ease);
}

.btn:hover .icon {
	transform: translateX(4px);
}

.btn--gold {
	--btn-bg: var(--bh-gold);
	--btn-fg: var(--bh-on-gold);

	box-shadow: var(--bh-e2);
}

.btn--gold:hover {
	background: var(--bh-gold-soft);
	border-color: var(--bh-gold-soft);
	transform: translateY(-3px);
	box-shadow: var(--bh-e3), 0 0 0 1px var(--bh-gold-glow);
}

.btn--outline:hover {
	background: var(--bh-gold);
	color: var(--bh-on-gold);
	transform: translateY(-3px);
	box-shadow: var(--bh-e2);
}

.btn--ghost {
	--btn-border: var(--bh-line-strong);

	backdrop-filter: blur(6px);
}

.btn--ghost:hover {
	border-color: var(--bh-gold);
	color: var(--bh-gold);
	transform: translateY(-3px);
}

.btn--lg {
	padding: 1.15rem 2.6rem;
	font-size: 0.75rem;
}

.btn:active {
	transform: translateY(-1px) scale(0.985);
}

/* Understated text link with an animated rule. */
.link-underline {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: var(--bh-tracking-wide);
	text-transform: uppercase;
	color: var(--bh-gold);
}

.link-underline::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -5px;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: right;
	transition: transform 0.45s var(--bh-ease);
}

.link-underline:hover::after {
	transform: scaleX(1);
	transform-origin: left;
}

/* =============================================================================
   06  CHROME
   ========================================================================== */

/* Skip link ---------------------------------------------------------------- */

.skip-link:focus {
	z-index: 100001;
}

/* Preloader ---------------------------------------------------------------- */

.preloader {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: grid;
	place-content: center;
	gap: 1.5rem;
	background: var(--bh-ink);
	transition: opacity 0.7s ease, visibility 0.7s ease;
}

.preloader.is-done {
	opacity: 0;
	visibility: hidden;
}

.preloader__mark {
	font-family: var(--bh-font-display);
	font-size: 3rem;
	letter-spacing: 0.25em;
	text-indent: 0.25em;
	color: var(--bh-gold);
}

.preloader__bar {
	position: relative;
	display: block;
	width: 8rem;
	height: 1px;
	background: var(--bh-line-on-ink);
	overflow: hidden;
}

.preloader__bar::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--bh-gold);
	transform: scaleX(0);
	transform-origin: left;
	animation: bh-load 1.4s var(--bh-ease) infinite;
}

@keyframes bh-load {
	0% { transform: scaleX(0); transform-origin: left; }
	50% { transform: scaleX(1); transform-origin: left; }
	51% { transform: scaleX(1); transform-origin: right; }
	100% { transform: scaleX(0); transform-origin: right; }
}

/* Top bar ------------------------------------------------------------------ */

.topbar {
	position: relative;
	z-index: 60;
	background: var(--bh-ink-deep);
	color: var(--bh-text-on-ink-soft);
	font-size: 0.72rem;
	letter-spacing: 0.06em;
	border-bottom: 1px solid rgba(var(--bh-gold-rgb), 0.18);
}

.topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	min-height: 2.75rem;
	padding-block: 0.5rem;
}

.topbar__note {
	margin: 0;
}

.topbar__contact {
	display: flex;
	gap: 1.75rem;
}

.topbar__contact a {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.topbar__contact a:hover {
	color: var(--bh-gold);
}

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

/*
 * Header behaviour is a Customizer choice, set as a body class.
 *
 * The three differ in one way that matters: sticky and static stay in the
 * document flow, so content naturally begins below the bar. Fixed is taken out
 * of flow, so without an explicit offset the first thing on every page sits
 * underneath it. --bh-header-h is measured in JS (the bar shrinks on scroll and
 * the top bar is optional, so a hardcoded value would be wrong half the time).
 */
.site-header {
	position: sticky;
	top: 0;
	z-index: 70;
	background: color-mix(in srgb, var(--bh-ink) 88%, transparent);
	backdrop-filter: blur(18px) saturate(150%);
	border-bottom: 1px solid transparent;
	transition: background-color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}

.site-header.is-stuck {
	background: color-mix(in srgb, var(--bh-ink) 96%, transparent);
	border-bottom-color: rgba(var(--bh-gold-rgb), 0.22);
	box-shadow: 0 10px 40px rgba(var(--bh-ink-rgb), 0.45);
}

/* --- Header modes ------------------------------------------------------- */

.has-header-static .site-header {
	position: relative;
}

.has-header-fixed .site-header {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
}

/*
 * Push the page down by the bar's real height. Skipped on the front page,
 * where the full-height hero is meant to run under a transparent header —
 * offsetting it there would leave a dead band above the hero.
 */
.has-header-fixed:not(.is-front-page) .site-main {
	padding-top: var(--bh-header-h, 5rem);
}

/* The top bar scrolls away, so the fixed header sits below it initially. */
.has-header-fixed .topbar {
	position: relative;
	z-index: 71;
}

.has-header-fixed .site-header {
	top: var(--bh-topbar-h, 0px);
}

.has-header-fixed .site-header.is-stuck {
	top: 0;
	transition: top 0.35s var(--bh-ease), background-color 0.4s ease,
		border-color 0.4s ease, box-shadow 0.4s ease;
}

/* Anchor links must clear whichever bar is pinned. */
.has-header-fixed,
.has-header-sticky {
	scroll-padding-top: calc( var(--bh-header-h, 5rem) + 1rem );
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	min-height: 5rem;
}

.brand {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.brand img,
.brand .custom-logo {
	max-height: 3rem;
	width: auto;
}

/*
 * Brand lockup: a bordered monogram beside a stacked name and tagline. Carried
 * over from the earlier BH Group build, where it read better than a plain
 * wordmark — the monogram gives the header an anchor at small sizes and the
 * tagline earns the second line.
 */
.brand__lockup {
	margin: 0;
	font-weight: 400;
}

.brand__lockup a {
	display: flex;
	align-items: center;
	gap: 0.85rem;
}

.brand__mark {
	display: grid;
	place-content: center;
	width: 2.75rem;
	height: 2.75rem;
	flex-shrink: 0;
	border: 1px solid var(--bh-gold);
	font-family: var(--bh-font-display);
	font-size: 1.2rem;
	letter-spacing: 0.06em;
	text-indent: 0.06em;
	color: var(--bh-gold);
	transition: background-color 0.4s var(--bh-ease), color 0.4s var(--bh-ease);
}

.brand__lockup a:hover .brand__mark {
	background: var(--bh-gold);
	color: var(--bh-on-gold);
}

.brand__text {
	display: flex;
	flex-direction: column;
}

.brand__name {
	font-family: var(--bh-font-display);
	font-size: 1.35rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	line-height: 1.1;
	color: var(--bh-canvas);
}

.brand__tagline {
	margin-top: 0.3rem;
	font-family: var(--bh-font-label);
	font-size: 0.5rem;
	font-weight: 500;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--bh-gold);
}

/* On a light band the lockup has to invert. */
.band-canvas .brand__name,
.band-canvas-alt .brand__name,
.site-footer .brand__name {
	color: var(--bh-text);
}

.site-footer .brand__name {
	color: var(--bh-text-on-ink);
}

/* Header call to action — a flat gold block, not the rounded button. */
.site-header__cta {
	padding: 0.85rem 1.9rem;
	background: var(--bh-gold);
	color: var(--bh-on-gold);
	font-family: var(--bh-font-label);
	font-size: 0.6rem;
	font-weight: 600;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	white-space: nowrap;
	transition: background-color 0.35s ease, transform 0.35s var(--bh-ease);
}

.site-header__cta:hover {
	background: var(--bh-gold-soft);
	color: var(--bh-on-gold);
	transform: translateY(-2px);
}

.brand__wordmark .brand__name {
	background: linear-gradient(105deg, var(--bh-canvas) 20%, var(--bh-gold) 50%, var(--bh-canvas) 80%);
	background-size: 200% auto;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	transition: background-position 0.8s var(--bh-ease);
}

.brand__wordmark a:hover .brand__name {
	background-position: 100% center;
}

/* Navigation --------------------------------------------------------------- */

.nav__list {
	display: flex;
	align-items: center;
	gap: clamp(1.25rem, 2.4vw, 2.5rem);
}

/* Contact block belongs to the mobile overlay only; the desktop bar has its own. */
.nav__foot {
	display: none;
}

.nav__list a {
	position: relative;
	display: block;
	padding-block: 0.5rem;
	color: var(--bh-text-on-ink-soft);
	font-size: 0.74rem;
	font-weight: 500;
	letter-spacing: var(--bh-tracking-wide);
	text-transform: uppercase;
}

.nav__list a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1px;
	background: var(--bh-gold);
	transform: scaleX(0);
	transform-origin: right;
	transition: transform 0.4s var(--bh-ease);
}

.nav__list a:hover,
.nav__list .current-menu-item > a,
.nav__list .current_page_item > a {
	color: var(--bh-gold);
}

.nav__list a:hover::after,
.nav__list .current-menu-item > a::after {
	transform: scaleX(1);
	transform-origin: left;
}

/* Sub menus */
.nav__list li {
	position: relative;
}

.nav__list .sub-menu {
	position: absolute;
	top: 100%;
	left: 50%;
	min-width: 14rem;
	padding: 0.75rem 0;
	background: var(--bh-ink-2);
	border: 1px solid var(--bh-line-on-ink);
	border-radius: var(--bh-radius-sm);
	box-shadow: var(--bh-e4);
	opacity: 0;
	visibility: hidden;
	transform: translate(-50%, 12px);
	transition: opacity 0.3s ease, transform 0.3s var(--bh-ease), visibility 0.3s;
}

.nav__list li:hover > .sub-menu,
.nav__list li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
}

.nav__list .sub-menu a {
	padding: 0.6rem 1.25rem;
	text-transform: none;
	letter-spacing: 0.04em;
	font-size: 0.8rem;
}

.nav__list .sub-menu a::after {
	display: none;
}

.site-header__actions {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.icon-btn {
	display: grid;
	place-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	color: var(--bh-text-on-ink-soft);
	transition: color 0.3s ease, background-color 0.3s ease, transform 0.3s var(--bh-ease);
}

.icon-btn:hover {
	color: var(--bh-gold);
	background: rgba(var(--bh-gold-rgb), 0.1);
	transform: translateY(-2px);
}

/* Mobile toggle ------------------------------------------------------------ */

.nav-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 2.5rem;
	height: 2.5rem;
}

.nav-toggle__bar {
	display: block;
	width: 22px;
	height: 1.5px;
	margin-inline: auto;
	background: var(--bh-canvas);
	transition: transform 0.4s var(--bh-ease), opacity 0.3s ease, width 0.4s var(--bh-ease);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
	transform: translateY(6.5px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) {
	opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
	transform: translateY(-6.5px) rotate(-45deg);
}

/* Search overlay ----------------------------------------------------------- */

.search-overlay {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: grid;
	place-content: center;
	padding: var(--bh-gutter);
	background: color-mix(in srgb, var(--bh-ink) 96%, transparent);
	backdrop-filter: blur(14px);
	animation: bh-fade 0.35s ease;
}

.search-overlay[hidden] {
	display: none;
}

.search-overlay__inner {
	width: min(46rem, 90vw);
}

.search-overlay .search-form {
	--bh-text: var(--bh-text-on-ink);
}

.search-overlay__close {
	position: fixed;
	top: 1.75rem;
	right: 1.75rem;
	color: var(--bh-canvas);
}

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

/* Search form -------------------------------------------------------------- */

.search-form {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	border-bottom: 1px solid var(--bh-line-strong);
	transition: border-color 0.35s ease;
}

.search-form:focus-within {
	border-color: var(--bh-gold);
}

.search-form__input {
	flex: 1;
	padding: 0.9rem 0;
	background: none;
	border: 0;
	font-family: var(--bh-font-display);
	font-size: clamp(1.25rem, 3vw, 2rem);
	color: var(--bh-text);
}

.search-form__input:focus {
	outline: none;
}

.search-form__input::placeholder {
	color: var(--bh-text-muted);
}

.search-form__submit {
	color: var(--bh-gold);
}

/* Custom cursor ------------------------------------------------------------ */

.cursor,
.cursor-dot {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9998;
	pointer-events: none;
	border-radius: 50%;
	mix-blend-mode: difference;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.cursor {
	width: 2.25rem;
	height: 2.25rem;
	border: 1px solid var(--bh-gold);
	transition: opacity 0.3s ease, width 0.35s var(--bh-ease), height 0.35s var(--bh-ease),
		background-color 0.35s ease;
}

.cursor-dot {
	width: 5px;
	height: 5px;
	background: var(--bh-gold);
}

.is-cursor-active .cursor,
.is-cursor-active .cursor-dot {
	opacity: 1;
}

.cursor.is-hovering {
	width: 4rem;
	height: 4rem;
	background: rgba(var(--bh-gold-rgb), 0.12);
}

/* Back to top -------------------------------------------------------------- */

.to-top {
	position: fixed;
	right: clamp(1rem, 3vw, 2rem);
	bottom: clamp(1rem, 3vw, 2rem);
	z-index: 90;
	display: grid;
	place-content: center;
	width: 3rem;
	height: 3rem;
	background: var(--bh-gold);
	color: var(--bh-on-gold);
	border-radius: 50%;
	box-shadow: var(--bh-e3);
	transition: transform 0.4s var(--bh-ease), box-shadow 0.4s var(--bh-ease), opacity 0.3s ease;
}

.to-top[hidden] {
	display: none;
}

.to-top:hover {
	transform: translateY(-4px);
	box-shadow: var(--bh-e4);
}

/* Floating contact card ---------------------------------------------------- */

.fab {
	position: fixed;
	left: clamp(1rem, 3vw, 2rem);
	bottom: clamp(1rem, 3vw, 2rem);
	z-index: 90;
	display: flex;
	align-items: center;
	gap: 0.85rem;
	padding: 0.7rem 1.35rem 0.7rem 0.7rem;
	background: var(--bh-ink-2);
	color: var(--bh-text-on-ink);
	border: 1px solid rgba(var(--bh-gold-rgb), 0.3);
	border-radius: var(--bh-radius-pill);
	box-shadow: var(--bh-e4);
	transform: translateY(150%);
	transition: transform 0.6s var(--bh-ease), box-shadow 0.4s var(--bh-ease);
}

.fab.is-visible {
	transform: translateY(0);
}

.fab:hover {
	box-shadow: var(--bh-e4), 0 0 0 1px var(--bh-gold-glow);
}

.fab__icon {
	display: grid;
	place-content: center;
	width: 2.4rem;
	height: 2.4rem;
	background: var(--bh-gold);
	color: var(--bh-on-gold);
	border-radius: 50%;
}

.fab__label {
	display: block;
	font-size: 0.6rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--bh-gold);
}

.fab__value {
	display: block;
	font-size: 0.9rem;
	letter-spacing: 0.04em;
}

/* =============================================================================
   07  HERO
   ========================================================================== */

/*
 * Cinematic hero.
 *
 * A tall scroll track with a sticky stage. Inside the stage is one perspective
 * camera; every layer sits at its own Z depth and is counter-scaled so it still
 * fills the frame:
 *
 *     scale = 1 - (z / perspective)
 *
 * Because the depth is real, tilting the camera (pointer) or dollying it
 * (scroll) produces true parallax — near layers sweep further than far ones —
 * instead of a per-layer translate faked in JS.
 *
 * JS writes three values and nothing else:
 *   --bh-scroll  0→1 across the track
 *   --bh-mx/--bh-my  -1→1 pointer position
 *
 * Every "from" state lives inside a no-preference query, so under reduced
 * motion the hero renders as a still, fully legible frame.
 */

.hero {
	--persp: 1100;
	--bh-scroll: 0;
	--bh-mx: 0;
	--bh-my: 0;

	position: relative;
	background: var(--bh-ink);
	color: var(--bh-text-on-ink);
	--bh-text: var(--bh-text-on-ink);
	--bh-text-soft: var(--bh-text-on-ink-soft);
	--bh-text-muted: var(--bh-text-on-ink-muted);
}

/*
 * Track length is the animation's budget: everything the scroll drives has to
 * fit inside it. It is a Customizer choice because the right answer is a taste
 * call — a longer track gives the camera move room to breathe, a shorter one
 * gets the visitor to the content sooner.
 *
 * "single" is a plain one-screen hero: no scroll sequence at all, just the
 * intro choreography on load. The outro has nowhere to play, so it is removed
 * rather than left invisible.
 */
.hero--cinematic {
	height: 190vh;
}

.hero--len-single   { height: 100vh; height: 100svh; }
.hero--len-compact  { height: 190vh; }
.hero--len-medium   { height: 250vh; }
.hero--len-long     { height: 320vh; }

.hero--len-single .hero__outro {
	display: none;
}

.hero__stage {
	position: sticky;
	top: 0;
	height: 100vh;
	height: var(--bh-hero-height, 100svh);
	min-height: 32rem;
	overflow: hidden;
	perspective: calc(var(--persp) * 1px);
	/*
	 * Must stay dead centre. The layer counter-scale (1 - z/perspective)
	 * assumes the projection scales about the element's own centre; an
	 * off-centre origin breaks that assumption and leaves the far layers
	 * short of the frame — a visible seam along one edge.
	 */
	perspective-origin: 50% 50%;
}

/*
 * The camera.
 *
 * No CSS transition here on purpose: --bh-scroll is rewritten every scroll
 * frame, and a transition on the same property fights each update, arriving
 * late and smearing the motion. Pointer values are already eased in JS, so the
 * transform can be applied raw and stay locked to the scroll position.
 */
.hero__scene {
	position: absolute;
	inset: 0;
	transform-style: preserve-3d;
	transform:
		rotateX(calc(var(--bh-my) * -2.4deg + var(--bh-scroll) * 4deg))
		rotateY(calc(var(--bh-mx) * 2.8deg))
		translateZ(calc(var(--bh-scroll) * 460px))
		translateY(calc(var(--bh-scroll) * -6vh));
	will-change: transform;
}

/* Shared layer geometry: sit at --z, counter-scale to stay full-bleed. */
.hero__backdrop,
.hero__haze,
.hero__grid,
.hero__plate,
.hero__content {
	position: absolute;
	/*
	 * --bleed oversizes the layer beyond the frame. Tilting the camera slides a
	 * layer sideways by roughly |z| * tan(angle); at z = -700 and ~6° of combined
	 * scroll and pointer tilt that is nearly 80px, which would drag the layer's
	 * edge into view. The bleed is scaled to depth so the deepest layers, which
	 * travel furthest, have the most margin.
	 */
	inset: calc(var(--bleed, 0px) * -1);
	/*
	 * Counter-scale keeps the layer full-bleed at its depth; --zoom adds an
	 * optional scroll-driven push-in on top, so far layers can creep forward
	 * while the camera dollies through them.
	 */
	transform:
		translateZ(calc(var(--z) * 1px))
		scale(calc((1 - (var(--z) / var(--persp))) * (1 + var(--zoom, 0) * var(--bh-scroll))));
	transform-style: preserve-3d;
}

/*
 * Depth ladder. The content must sit nearest the camera — inside preserve-3d
 * the painting order follows Z position, so any layer with a larger --z than
 * the content will occlude the headline no matter what z-index says. The plate
 * therefore parallaxes between the grid and the veil rather than in front.
 */
.hero__backdrop { --z: -700; --zoom: 0.20; --bleed: 110px; z-index: 1; }
.hero__haze     { --z: -430; --zoom: 0.14; --bleed:  75px; z-index: 2; }
.hero__grid     { --z: -250; --zoom: 0.10; --bleed:  50px; z-index: 3; }
.hero__plate    { --z:  -90; --zoom: 0.06; --bleed:  24px; z-index: 4; }
.hero__content  { --z:  120; z-index: 6; } /* No bleed: it is laid-out content, not scenery. */

/* --- Backdrop ---------------------------------------------------------- */

.hero__backdrop {
	overflow: hidden;
	background: var(--bh-ink);
}

.hero__slide,
.hero__video,
.hero__gradient {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

/*
 * Full-bleed cover, framed on the chosen focal point.
 *
 * The push-in and drift are driven by --bh-scroll rather than by a timer, so
 * the backdrop is scrubbed by the scroll wheel the way a video timeline is
 * scrubbed — move and it moves, stop and it stops. That direct coupling is what
 * reads as footage; a time-based loop always feels like it is running to its own
 * clock, independently of the visitor.
 */
.hero__slide,
.hero__video {
	background-position: var(--bh-hero-focus, center center);
	background-size: cover;
	background-repeat: no-repeat;
	object-fit: cover;
	object-position: var(--bh-hero-focus, center center);
	filter: blur(var(--bh-hero-blur, 0px));
	transform:
		scale(calc(1.04 + var(--bh-scroll) * var(--bh-hero-zoom, 0.22)))
		translate3d(0, calc(var(--bh-scroll) * -4%), 0);
	will-change: transform;
}

.hero__slide {
	opacity: 0;
	transition: opacity 1.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero__slide.is-active {
	opacity: 1;
}

.hero__gradient {
	background:
		radial-gradient(58% 46% at 50% 8%, rgba(var(--bh-gold-rgb), 0.20), transparent 68%),
		radial-gradient(44% 44% at 82% 96%, rgba(var(--bh-gold-rgb), 0.11), transparent 70%),
		radial-gradient(52% 52% at 12% 82%, rgba(var(--bh-gold-rgb), 0.07), transparent 70%),
		var(--bh-ink);
}

/* Slow drift, so a still image never looks frozen. Alternating direction keeps
   consecutive slides from appearing to jump. */
/*
 * The slow timed drift only runs on a single-screen hero, where there is no
 * scroll travel for the backdrop to be scrubbed by. Everywhere else it is
 * suppressed: an animated transform overrides the scroll-driven one entirely,
 * so running both would silently disable the scroll motion.
 */
@media (prefers-reduced-motion: no-preference) {
	.hero--len-single.hero--kenburns .hero__slide.is-active,
	.hero--len-single.hero--kenburns .hero__gradient {
		animation: bh-drift 22s ease-in-out infinite alternate;
	}

	.hero--len-single.hero--kenburns .hero__slide:nth-child(even).is-active {
		animation-name: bh-drift-alt;
	}
}

@keyframes bh-drift {
	from { transform: scale(1.06) translate3d(0, 0, 0); }
	to   { transform: scale(1.16) translate3d(-1.6%, -1.6%, 0); }
}

@keyframes bh-drift-alt {
	from { transform: scale(1.14) translate3d(1.4%, -1%, 0); }
	to   { transform: scale(1.05) translate3d(0, 1%, 0); }
}

/* --- Atmosphere -------------------------------------------------------- */

.hero__haze {
	background:
		radial-gradient(40% 60% at 20% 30%, rgba(var(--bh-gold-rgb), 0.13), transparent 70%),
		radial-gradient(36% 50% at 84% 66%, rgba(var(--bh-gold-rgb), 0.10), transparent 72%);
	opacity: calc(0.85 - var(--bh-scroll) * 0.5);
	pointer-events: none;
}

.hero__grid {
	background-image:
		linear-gradient(rgba(var(--bh-gold-rgb), 0.075) 1px, transparent 1px),
		linear-gradient(90deg, rgba(var(--bh-gold-rgb), 0.075) 1px, transparent 1px);
	background-size: 7rem 7rem;
	-webkit-mask-image: radial-gradient(68% 58% at 50% 45%, #000 22%, transparent 76%);
	mask-image: radial-gradient(68% 58% at 50% 45%, #000 22%, transparent 76%);
	pointer-events: none;
}

.hero__plate {
	background-position: center bottom;
	background-size: contain;
	background-repeat: no-repeat;
	pointer-events: none;
}

/*
 * Untransformed, so it rests at z = 0 — between the plate (-90) and the
 * content (+120). That is what lets it darken the scenery without ever
 * dimming the headline.
 */
.hero__veil {
	position: absolute;
	inset: 0;
	z-index: 5;
	pointer-events: none;
	/*
	 * Scaled by the Customizer overlay setting so a busy photograph can be
	 * darkened until the headline is legible, without editing the image.
	 */
	background: linear-gradient(
		to bottom,
		rgba(var(--bh-ink-rgb), calc(var(--bh-hero-overlay, 0.55) * 0.55)) 0%,
		rgba(var(--bh-ink-rgb), calc(var(--bh-hero-overlay, 0.55) * 1.05)) 48%,
		rgba(var(--bh-ink-rgb), calc(var(--bh-hero-overlay, 0.55) * 1.6)) 82%,
		var(--bh-ink) 100%
	);
	opacity: calc(0.92 + var(--bh-scroll) * 0.08);
}

/* --- Ornament frame ---------------------------------------------------- */

.hero__ornament {
	position: absolute;
	z-index: 3;
	border: 1px solid rgba(var(--bh-gold-rgb), 0.34);
	pointer-events: none;
}

.hero__ornament--outer { inset: clamp(0.75rem, 1.6vw, 1.5rem); }
.hero__ornament--inner {
	inset: clamp(1.35rem, 2.4vw, 2.25rem);
	border-color: rgba(var(--bh-gold-rgb), 0.16);
}

/* --- Content ----------------------------------------------------------- */

/*
 * The content pane rotates slightly *against* the camera. Counter-rotation is
 * what sells depth: if the text tilted with the scenery it would read as one
 * flat picture being turned, but leaning the other way makes it feel like a
 * pane suspended in front of the scene.
 */
.hero__content {
	display: grid;
	place-items: center;
	text-align: center;
	/* Left alignment is a Customizer choice; see .hero--align-left below. */
	transform:
		translateZ(calc(var(--z) * 1px))
		scale(calc(1 - (var(--z) / var(--persp))))
		rotateY(calc(var(--bh-mx) * -1.2deg))
		rotateX(calc(var(--bh-my) * 1deg));
}

/*
 * Scroll choreography.
 *
 * The intro used to reach zero opacity at ~0.42 while the outro only began at
 * 0.58, leaving a dead stretch where the stage was empty. It now holds through
 * the first third, then leaves as it recedes — and the outro starts arriving
 * before it has finished, so the two cross over instead of leaving a gap.
 */
/* Left-aligned variant: the composition shifts wholesale, not just the text. */
.hero--align-left .hero__content {
	place-items: center start;
	text-align: left;
}

.hero--align-left .hero__quote,
.hero--align-left .hero__sub {
	margin-inline: 0;
}

.hero--align-left .hero__rule {
	margin-inline: 0;
}

.hero--align-left .hero__actions {
	justify-content: flex-start;
}

.hero--align-left .hero__badge {
	justify-content: flex-start;
}

.hero__intro {
	opacity: calc(1 - (var(--bh-scroll) - 0.30) * 3.1);
	transform:
		translate3d(0, calc(var(--bh-scroll) * -9vh), 0)
		scale(calc(1 - var(--bh-scroll) * 0.14));
	transform-origin: 50% 40%;
	will-change: transform, opacity;
}

/*
 * No blur on the exit, deliberately. A filter — even blur(0px) — creates a
 * containing block and flattens preserve-3d for everything inside it, which
 * would silently drop the perspective from the word reveal's rotateX. The
 * recede is carried by scale, lift and opacity instead, which cost nothing.
 */

/*
 * Vertical rhythm is vh-aware throughout the intro. On a short laptop screen
 * fixed rem gaps are what push the last headline line out of the stage, so
 * every gap collapses proportionally rather than clipping.
 */
.hero__badge {
	display: inline-flex;
	align-items: center;
	gap: 1rem;
	margin: 0 0 clamp(0.85rem, 2.6vh, 1.75rem);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: var(--bh-tracking-label);
	text-transform: uppercase;
	color: var(--bh-gold);
}

.hero__badge-rule {
	width: clamp(1.25rem, 5vw, 3rem);
	height: 1px;
	background: currentColor;
	opacity: 0.55;
}

/*
 * Sized against viewport HEIGHT as well as width. Width alone overflows the
 * stage on ordinary laptop screens — three lines at 10.5vw is ~450px before the
 * badge, quote, rule, sub and buttons are counted, which pushed the last line
 * out of the frame. min() lets whichever axis is tighter win.
 */
.hero__title {
	margin: 0;
	font-size: clamp(2.4rem, min(9.6vw, 13vh), 7.5rem);
	font-weight: 300;
	line-height: 1;
	letter-spacing: 0.02em;
	transform-style: preserve-3d;
}

.hero__line {
	display: block;
}

/*
 * Depth staircase. Each line sits at its own Z inside the title's preserve-3d
 * context, so they slide against one another as the camera tilts — the
 * headline reads as three stacked planes rather than flat text on a photo.
 *
 * Values are deliberately small: a nearer line is also a larger line, and past
 * roughly 40px the size difference stops looking like depth and starts looking
 * like a mistake. The accent line gets the most, so the emphasis is structural.
 */
.hero__line:nth-child(1) { transform: translateZ(0); }
.hero__line:nth-child(2) { transform: translateZ(38px); }
.hero__line:nth-child(3) { transform: translateZ(14px); }

.hero__line--accent {
	font-style: italic;
	color: var(--bh-gold);
	text-shadow: 0 18px 46px rgba(var(--bh-ink-rgb), 0.45);
}

/* Each word is a clipping frame; the inner span is what moves. */
.hero__word {
	display: inline-block;
	overflow: hidden;
	vertical-align: bottom;
	padding-bottom: 0.06em;
}

.hero__word + .hero__word {
	margin-left: 0.24em;
}

.hero__word > span {
	display: inline-block;
}

.hero__quote {
	margin: clamp(0.9rem, 2.4vh, 1.9rem) auto 0;
	max-width: 34rem;
	font-family: var(--bh-font-display);
	font-size: clamp(1.05rem, 2.1vw, 1.4rem);
	font-style: italic;
	color: var(--bh-text-on-ink-soft);
}

.hero__rule {
	display: block;
	width: min(22rem, 60vw);
	height: 1px;
	margin: clamp(0.9rem, 2.3vh, 1.9rem) auto 0;
	background: var(--bh-rule);
	transform-origin: center;
}

.hero__sub {
	margin: clamp(0.75rem, 2vh, 1.6rem) auto 0;
	max-width: 40rem;
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--bh-text-on-ink-muted);
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: center;
	margin-top: clamp(1.15rem, 3.2vh, 2.5rem);
}

/* --- Intro choreography ------------------------------------------------ */

/*
 * The hidden "from" state is scoped to .bh-js, which an inline script in the
 * document head sets. With JS disabled the class never lands, so the headline
 * is simply visible — it is never hidden by a reveal that cannot run.
 */
@media (prefers-reduced-motion: no-preference) {
	.bh-js .hero__word > span,
	.bh-js [data-hero-in] {
		opacity: 0;
	}

	.bh-js .hero__word > span {
		transform: translateY(105%) rotateX(-55deg);
		transform-origin: bottom center;
	}

	.bh-js [data-hero-in] {
		transform: translateY(1.5rem);
	}

	.bh-js .hero__rule[data-hero-in] {
		transform: scaleX(0);
	}

	.bh-js .hero__ornament {
		opacity: 0;
		transform: scale(1.035);
	}

	/* is-ready is set on load; if JS never runs, the fallback below fires. */
	.hero.is-ready .hero__word > span {
		opacity: 1;
		transform: none;
		transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
			transform 1.05s cubic-bezier(0.16, 1, 0.3, 1);
		transition-delay: calc(var(--i) * 85ms + 150ms);
	}

	.hero.is-ready [data-hero-in] {
		opacity: 1;
		transform: none;
		transition: opacity 0.85s ease, transform 0.95s cubic-bezier(0.16, 1, 0.3, 1);
		transition-delay: calc(var(--d, 0) * 85ms + 150ms);
	}

	.hero.is-ready .hero__rule[data-hero-in] {
		transform: scaleX(1);
		transition: opacity 0.6s ease, transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
	}

	.hero.is-ready .hero__ornament {
		opacity: 1;
		transform: none;
		transition: opacity 1.4s ease 0.35s, transform 1.6s cubic-bezier(0.16, 1, 0.3, 1) 0.35s;
	}

	/*
	 * Second safety net: if the script loads but the reveal never fires (a JS
	 * error elsewhere on the page, a blocked bundle), show the hero anyway
	 * rather than leaving a blank stage. Harmless when is-ready arrives —
	 * both paths resolve to the same final state.
	 */
	.bh-js .hero:not(.is-ready) .hero__word > span,
	.bh-js .hero:not(.is-ready) [data-hero-in],
	.bh-js .hero:not(.is-ready) .hero__ornament {
		animation: bh-hero-fallback 0.01s linear 3s forwards;
	}
}

@keyframes bh-hero-fallback {
	to { opacity: 1; transform: none; }
}

/* Gold sweep across the headline once the words have landed. */
@media (prefers-reduced-motion: no-preference) {
	.hero.is-ready .hero__title::after {
		content: "";
		position: absolute;
		inset: 0;
		pointer-events: none;
		background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, 0.16) 50%, transparent 58%);
		background-size: 260% 100%;
		animation: bh-sweep 2.6s cubic-bezier(0.4, 0, 0.2, 1) 1.5s 1;
	}

	.hero__title {
		position: relative;
	}
}

@keyframes bh-sweep {
	from { background-position: 180% 0; }
	to   { background-position: -80% 0; }
}

/* --- Outro ------------------------------------------------------------- */

.hero__outro {
	position: absolute;
	inset: 0;
	z-index: 6;
	display: grid;
	place-content: center;
	gap: 1.15rem;
	text-align: center;
	pointer-events: none;
	/* Begins arriving at 0.48, while the intro is still leaving — they cross. */
	opacity: calc((var(--bh-scroll) - 0.48) * 3.4);
	transform:
		translate3d(0, calc((1 - var(--bh-scroll)) * 6rem), 0)
		scale(calc(0.94 + var(--bh-scroll) * 0.06));
	will-change: transform, opacity;
}

.hero__outro.is-live {
	pointer-events: auto;
}

.hero__outro-eyebrow {
	margin: 0;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: var(--bh-tracking-label);
	text-transform: uppercase;
	color: var(--bh-gold);
}

.hero__outro-line {
	margin: 0;
	font-family: var(--bh-font-display);
	font-size: clamp(2rem, 5.6vw, 4.25rem);
	font-weight: 300;
	font-style: italic;
}

/* --- Grain & vignette --------------------------------------------------- */

.hero__grain,
.hero__vignette {
	position: absolute;
	inset: 0;
	z-index: 7;
	pointer-events: none;
}

.hero__vignette {
	background: radial-gradient(72% 62% at 50% 42%, transparent 40%, rgba(var(--bh-ink-rgb), 0.55) 100%);
}

/* Static SVG noise — no image request, no canvas, negligible cost. */
.hero__grain {
	opacity: 0.05;
	mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

@media (prefers-reduced-motion: no-preference) {
	.hero__grain {
		animation: bh-grain 0.9s steps(3) infinite;
	}
}

@keyframes bh-grain {
	0%   { transform: translate3d(0, 0, 0); }
	33%  { transform: translate3d(-3%, 2%, 0); }
	66%  { transform: translate3d(2%, -3%, 0); }
	100% { transform: translate3d(0, 0, 0); }
}

/* --- Slide dots --------------------------------------------------------- */

.hero__dots {
	position: absolute;
	left: 50%;
	bottom: 5.5rem;
	z-index: 8;
	display: flex;
	gap: 0.6rem;
	transform: translateX(-50%);
	opacity: calc(1 - var(--bh-scroll) * 3);
}

.hero__dot {
	width: 2rem;
	height: 2px;
	background: rgba(var(--bh-canvas-rgb), 0.3);
	transition: background-color 0.4s ease, transform 0.4s var(--bh-ease);
}

.hero__dot.is-active {
	background: var(--bh-gold);
	transform: scaleY(2);
}

/* --- Scroll cue --------------------------------------------------------- */

.hero__scroll {
	position: absolute;
	left: 50%;
	bottom: 2rem;
	z-index: 8;
	display: grid;
	justify-items: center;
	gap: 0.7rem;
	transform: translateX(-50%);
	opacity: calc(1 - var(--bh-scroll) * 3);
}

.hero__scroll-label {
	font-size: 0.6rem;
	font-weight: 600;
	letter-spacing: 0.4em;
	text-transform: uppercase;
	color: var(--bh-text-on-ink-muted);
}

.hero__scroll-line {
	position: relative;
	width: 1px;
	height: 3.25rem;
	background: var(--bh-line-on-ink);
	overflow: hidden;
}

.hero__scroll-line::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--bh-gold);
	transform: translateY(-100%);
}

@media (prefers-reduced-motion: no-preference) {
	.hero__scroll-line::after {
		animation: bh-scroll-cue 2.2s cubic-bezier(0.22, 1, 0.36, 1) infinite;
	}
}

@keyframes bh-scroll-cue {
	0%        { transform: translateY(-100%); }
	60%, 100% { transform: translateY(100%); }
}

/* --- Reduced motion: collapse to a still frame -------------------------- */

@media (prefers-reduced-motion: reduce) {
	.hero--cinematic {
		height: auto;
	}

	.hero__stage {
		position: relative;
		height: auto;
		min-height: 0;
		padding-block: clamp(5rem, 12vw, 9rem);
		perspective: none;
	}

	.hero__scene {
		position: relative;
		transform: none;
	}

	.hero__backdrop,
	.hero__haze,
	.hero__grid,
	.hero__plate {
		position: absolute;
		transform: none;
	}

	.hero__content {
		position: relative;
		transform: none;
	}

	.hero__intro {
		opacity: 1;
	}

	.hero__outro,
	.hero__scroll,
	.hero__grain {
		display: none;
	}
}
/* Page hero (all non-front templates) -------------------------------------- */

.page-hero {
	position: relative;
	padding-block: clamp(4rem, 10vw, 7.5rem) clamp(2.5rem, 6vw, 4rem);
	background:
		radial-gradient(60% 100% at 50% 0%, rgba(var(--bh-gold-rgb), 0.12), transparent 70%),
		var(--bh-ink);
	color: var(--bh-text-on-ink);
	text-align: center;
	overflow: hidden;
}

.page-hero--compact  { padding-block: clamp(3rem, 7vw, 5rem) clamp(2rem, 4vw, 3rem); }
.page-hero--tall     { padding-block: clamp(5.5rem, 14vw, 10rem) clamp(3.5rem, 8vw, 5.5rem); }

/*
 * Cover image as its own layer rather than a background on .page-hero, so the
 * veil can sit between the photograph and the text. Painting the overlay onto
 * the same element would tint the type along with the image.
 */
.page-hero__media {
	position: absolute;
	inset: 0;
	background-image: var(--bh-pagehero-image);
	background-size: cover;
	background-position: center;
}

.page-hero__veil {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to bottom,
		rgba(var(--bh-ink-rgb), calc(var(--bh-pagehero-overlay, 0.62) * 0.75)) 0%,
		rgba(var(--bh-ink-rgb), calc(var(--bh-pagehero-overlay, 0.62) * 1.05)) 55%,
		rgba(var(--bh-ink-rgb), calc(var(--bh-pagehero-overlay, 0.62) * 1.35)) 100%
	);
}

.page-hero__inner {
	position: relative;
	z-index: 1;
}

/* A little more room to breathe when there is a picture behind the words. */
.page-hero--cover {
	padding-block: clamp(5rem, 12vw, 9rem) clamp(3rem, 7vw, 5rem);
}

.page-hero--cover.page-hero--compact {
	padding-block: clamp(3.5rem, 8vw, 6rem) clamp(2.5rem, 5vw, 3.5rem);
}

.page-hero--cover.page-hero--tall {
	padding-block: clamp(6.5rem, 16vw, 12rem) clamp(4rem, 9vw, 6.5rem);
}

@media (prefers-reduced-motion: no-preference) {
	/* Slow settle on load, so the banner does not feel like a flat panel. */
	.page-hero--cover .page-hero__media {
		animation: bh-pagehero-settle 1.6s var(--bh-ease-out) both;
	}
}

@keyframes bh-pagehero-settle {
	from { transform: scale(1.08); opacity: 0; }
	to   { transform: none; opacity: 1; }
}

.page-hero__title {
	margin: 0.75rem 0 0;
	font-size: clamp(2.25rem, 5.5vw, 4rem);
}

.page-hero__sub {
	margin: 1.25rem auto 0;
	max-width: 40rem;
	color: var(--bh-text-on-ink-muted);
}

.breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: center;
	font-size: 0.7rem;
	letter-spacing: var(--bh-tracking-wide);
	text-transform: uppercase;
	color: var(--bh-text-on-ink-muted);
}

.breadcrumbs li + li::before {
	content: "/";
	margin-right: 0.5rem;
	opacity: 0.5;
}

.breadcrumbs a:hover {
	color: var(--bh-gold);
}

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

.marquee {
	padding-block: 1.4rem;
	background: var(--bh-gold);
	color: var(--bh-on-gold);
	overflow: hidden;
	white-space: nowrap;
	border-block: 1px solid rgba(var(--bh-ink-rgb), 0.1);
}

.marquee__track {
	display: inline-flex;
	gap: 3.5rem;
	animation: bh-marquee 32s linear infinite;
}

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

.marquee__item {
	font-size: 0.74rem;
	font-weight: 600;
	letter-spacing: 0.3em;
	text-transform: uppercase;
}

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

/* =============================================================================
   09  3D SURFACE MODEL
   ========================================================================== */

/*
 * Any grid marked [data-tilt-scene] establishes one shared perspective, so all
 * its cards read as objects under a single camera rather than each having its
 * own vanishing point. JS writes --bh-rx/--bh-ry per card from pointer position
 * and --bh-px/--bh-py for the specular sheen.
 */

[data-tilt-scene] {
	perspective: var(--bh-persp);
}

.tilt {
	position: relative;
	transform-style: preserve-3d;
	transition: transform 0.6s var(--bh-ease), box-shadow 0.6s var(--bh-ease);
	will-change: transform;
}

.tilt.is-tilting {
	transition: transform 0.12s linear, box-shadow 0.4s var(--bh-ease);
	transform: rotateX(var(--bh-rx)) rotateY(var(--bh-ry)) translateZ(0);
}

/* Specular highlight that tracks the pointer. */
.tilt__sheen {
	position: absolute;
	inset: 0;
	z-index: 3;
	border-radius: inherit;
	pointer-events: none;
	opacity: 0;
	background: radial-gradient(
		30rem circle at var(--bh-px) var(--bh-py),
		rgba(255, 255, 255, 0.16),
		transparent 45%
	);
	transition: opacity 0.4s ease;
}

.tilt.is-tilting .tilt__sheen {
	opacity: 1;
}

/* Children lift off the card plane. */
.tilt__layer {
	transform: translateZ(38px);
	transform-style: preserve-3d;
}

/* =============================================================================
   10  SECTIONS
   ========================================================================== */

/* Cards — shared ----------------------------------------------------------- */

.card {
	position: relative;
	background: var(--bh-surface);
	border: 1px solid var(--bh-line);
	border-radius: var(--bh-radius-sm);
	overflow: hidden;
	box-shadow: var(--bh-e1);
	transition: box-shadow 0.5s var(--bh-ease), border-color 0.5s ease, transform 0.5s var(--bh-ease);
}

.card:hover {
	border-color: rgba(var(--bh-gold-rgb), 0.4);
	box-shadow: var(--bh-e-lift);
}

.card__link {
	display: block;
	height: 100%;
}

.card__media {
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 5;
	background: var(--bh-canvas-3);
}

.card--post .card__media {
	aspect-ratio: 16 / 10;
}

.card__media img,
.card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.9s var(--bh-ease), filter 0.6s ease;
}

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

/*
 * Fallback tile for posts without a featured image. --a (angle) and --t (tone)
 * are set per post in PHP from the post id, so a grid of them reads as a
 * designed set instead of one grey card repeated.
 */
.card__placeholder {
	position: relative;
	display: grid;
	place-content: center;
	height: 100%;
	background:
		linear-gradient(
			var(--a, 135deg),
			var(--bh-ink) 0%,
			var(--bh-ink-3) calc(48% + var(--t, 0%)),
			var(--bh-ink-2) 100%
		);
	overflow: hidden;
}

/* Faint gold wash, offset from the gradient so the two do not band together. */
.card__placeholder::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(
		68% 58% at calc(30% + var(--t, 0%)) 22%,
		rgba(var(--bh-gold-rgb), 0.22),
		transparent 68%
	);
}

.card__placeholder-mark {
	position: relative;
	font-family: var(--bh-font-display);
	font-size: clamp(2.25rem, 5vw, 3.25rem);
	font-weight: 300;
	letter-spacing: 0.22em;
	text-indent: 0.22em;
	color: rgba(var(--bh-canvas-rgb), 0.5);
}

.card__placeholder-frame {
	position: absolute;
	inset: 0.9rem;
	border: 1px solid rgba(var(--bh-gold-rgb), 0.28);
}

.card__body {
	position: relative;
	padding: clamp(1.4rem, 2.5vw, 2rem);
}

.card__tag {
	margin: 0 0 0.6rem;
	font-size: 0.62rem;
	font-weight: 600;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--bh-gold);
}

.card__title {
	margin: 0;
	font-size: clamp(1.25rem, 2.2vw, 1.6rem);
	transition: color 0.35s ease;
}

.card:hover .card__title {
	color: var(--bh-gold);
}

.card__excerpt {
	margin: 0.8rem 0 0;
	font-size: 0.9rem;
	color: var(--bh-text-soft);
}

.card__meta {
	margin: 0.6rem 0 0;
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	color: var(--bh-text-muted);
}

.card__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 1.25rem;
	font-size: 0.66rem;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--bh-gold);
}

.card__cta .icon {
	transition: transform 0.4s var(--bh-ease);
}

.card:hover .card__cta .icon {
	transform: translateX(5px);
}

/* Intro -------------------------------------------------------------------- */

.intro__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(2rem, 6vw, 5.5rem);
	align-items: center;
}

.intro__media {
	position: relative;
	aspect-ratio: 4 / 5;
	perspective: var(--bh-persp);
}

.intro__media img,
.intro__media-placeholder {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--bh-radius-sm);
	box-shadow: var(--bh-e4);
	transform: rotateY(-4deg) rotateX(1.5deg);
	transition: transform 0.9s var(--bh-ease);
}

.intro__media:hover img,
.intro__media:hover .intro__media-placeholder {
	transform: rotateY(0deg) rotateX(0deg) translateZ(20px);
}

.intro__media-placeholder {
	background: linear-gradient(135deg, var(--bh-canvas-2), var(--bh-canvas-3));
}

.intro__media-frame {
	position: absolute;
	inset: 1.75rem -1.75rem -1.75rem 1.75rem;
	border: 1px solid var(--bh-gold);
	border-radius: var(--bh-radius-sm);
	opacity: 0.5;
	pointer-events: none;
	z-index: -1;
}

.intro__text {
	font-size: 1.05rem;
	color: var(--bh-text-soft);
}

.intro__copy .btn {
	margin-top: 1.5rem;
}

/* Stats -------------------------------------------------------------------- */

.stat-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	gap: 1px;
	background: var(--bh-line);
	border: 1px solid var(--bh-line);
	border-radius: var(--bh-radius-sm);
	overflow: hidden;
}

.stat {
	padding: clamp(2rem, 4vw, 3rem) 1.5rem;
	background: var(--bh-surface);
	text-align: center;
	transition: background-color 0.5s ease;
}

.stat:hover {
	background: var(--bh-surface-raised);
}

.stat__num {
	margin: 0;
	font-family: var(--bh-font-display);
	font-size: clamp(2.75rem, 6vw, 4.25rem);
	font-weight: 300;
	line-height: 1;
	color: var(--bh-gold);
}

.stat__label {
	margin: 0.85rem 0 0;
	font-size: 0.66rem;
	font-weight: 600;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--bh-text-muted);
}

/* Divisions ---------------------------------------------------------------- */

.concern-grid,
.project-grid,
.post-grid {
	display: grid;
	gap: clamp(1.25rem, 2.5vw, 2rem);
}

.concern-grid {
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.project-grid {
	grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
}

.post-grid {
	grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
}

/* Services ----------------------------------------------------------------- */

.service-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
	gap: clamp(1.25rem, 2.5vw, 1.75rem);
}

.service {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: clamp(1.75rem, 3vw, 2.5rem);
	background: var(--bh-surface);
	border: 1px solid var(--bh-line);
	border-radius: var(--bh-radius-sm);
	box-shadow: var(--bh-e1);
	transition: box-shadow 0.5s var(--bh-ease), border-color 0.4s ease;
}

.service:hover {
	border-color: rgba(var(--bh-gold-rgb), 0.45);
	box-shadow: var(--bh-e-lift);
}

.service__num {
	margin: 0 0 1.25rem;
	font-family: var(--bh-font-display);
	font-size: 0.95rem;
	letter-spacing: 0.3em;
	color: var(--bh-gold);
}

.service__title {
	margin: 0;
	font-size: 1.45rem;
}

.service__text {
	margin: 0.85rem 0 0;
	font-size: 0.9rem;
	color: var(--bh-text-soft);
}

.service__price {
	margin: 1.5rem 0 0;
	font-family: var(--bh-font-display);
	font-size: 1.6rem;
	color: var(--bh-gold);
}

.service__unit {
	font-family: var(--bh-font-label);
	font-size: 0.7rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--bh-text-muted);
}

.service__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: auto;
	padding-top: 1.5rem;
}

.service__rule {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 2px;
	background: var(--bh-gold);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.6s var(--bh-ease);
}

.service:hover .service__rule {
	transform: scaleX(1);
}

.services__note {
	margin: 2rem 0 0;
	font-size: 0.78rem;
	letter-spacing: 0.06em;
	text-align: center;
	color: var(--bh-text-muted);
}

/* Before & after ----------------------------------------------------------- */

.compare-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
	gap: clamp(1.25rem, 3vw, 2.25rem);
}

.compare {
	position: relative;
	border-radius: var(--bh-radius-sm);
	overflow: hidden;
	box-shadow: var(--bh-e3);
}

.compare__frame {
	position: relative;
	aspect-ratio: 4 / 3;
	background: var(--bh-canvas-3);
	touch-action: pan-y;
	cursor: ew-resize;
	user-select: none;
}

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

.compare__after {
	clip-path: inset(0 0 0 var(--bh-split, 50%));
}

.compare__handle {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--bh-split, 50%);
	width: 2px;
	background: var(--bh-gold);
	transform: translateX(-1px);
	pointer-events: none;
}

.compare__knob {
	position: absolute;
	top: 50%;
	left: 50%;
	display: grid;
	place-content: center;
	width: 2.75rem;
	height: 2.75rem;
	background: var(--bh-gold);
	color: var(--bh-on-gold);
	border-radius: 50%;
	box-shadow: var(--bh-e3);
	transform: translate(-50%, -50%);
	font-size: 0.75rem;
}

.compare__tag {
	position: absolute;
	top: 1rem;
	z-index: 2;
	padding: 0.35rem 0.85rem;
	background: rgba(var(--bh-ink-rgb), 0.72);
	color: var(--bh-canvas);
	border-radius: var(--bh-radius-pill);
	font-size: 0.6rem;
	font-weight: 600;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	backdrop-filter: blur(6px);
}

.compare__tag--before {
	left: 1rem;
}

.compare__tag--after {
	right: 1rem;
	color: var(--bh-gold);
}

.compare__range {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: ew-resize;
}

.compare__caption {
	padding: 1.1rem 1.35rem;
	background: var(--bh-surface);
	border-top: 1px solid var(--bh-line);
	font-size: 0.85rem;
	color: var(--bh-text-soft);
}

/* Materials rail ----------------------------------------------------------- */

.materials {
	position: relative;
	perspective: 1600px;
}

.material-rail {
	display: flex;
	gap: 1.25rem;
	padding-block: 2rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	transform-style: preserve-3d;
}

.material-rail::-webkit-scrollbar {
	display: none;
}

.material {
	position: relative;
	flex: 0 0 clamp(11rem, 22vw, 15rem);
	scroll-snap-align: center;
	border-radius: var(--bh-radius-sm);
	overflow: hidden;
	box-shadow: var(--bh-e2);
	transform: rotateY(calc(var(--bh-tilt, 0) * 1deg));
	transition: transform 0.6s var(--bh-ease), box-shadow 0.5s var(--bh-ease);
}

.material:hover {
	transform: rotateY(0deg) translateZ(50px) scale(1.03);
	box-shadow: var(--bh-e-lift);
	z-index: 2;
}

.material__swatch {
	aspect-ratio: 3 / 4;
	background: var(--bh-swatch, var(--bh-canvas-3));
	background-size: cover;
	background-position: center;
}

.material__body {
	padding: 1rem 1.15rem;
	background: var(--bh-surface);
	border-top: 1px solid var(--bh-line);
}

.material__name {
	margin: 0;
	font-family: var(--bh-font-display);
	font-size: 1.1rem;
}

.material__meta {
	margin: 0.3rem 0 0;
	font-size: 0.68rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--bh-text-muted);
}

/* Filter bar --------------------------------------------------------------- */

.filter {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	justify-content: center;
	margin-bottom: clamp(2rem, 4vw, 3rem);
}

.filter__btn {
	padding: 0.6rem 1.4rem;
	border: 1px solid var(--bh-line-strong);
	border-radius: var(--bh-radius-pill);
	font-size: 0.66rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--bh-text-muted);
	transition: color 0.3s ease, border-color 0.3s ease, background-color 0.3s ease,
		transform 0.3s var(--bh-ease);
}

.filter__btn:hover {
	color: var(--bh-gold);
	border-color: var(--bh-gold);
	transform: translateY(-2px);
}

.filter__btn.is-active {
	background: var(--bh-gold);
	border-color: var(--bh-gold);
	color: var(--bh-on-gold);
}

.card.is-hidden {
	display: none;
}

/* Process ------------------------------------------------------------------ */

.process {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: clamp(1.5rem, 3vw, 2.5rem);
	counter-reset: step;
}

.process__step {
	position: relative;
	padding-top: 3.25rem;
}

.process__step::before {
	content: "";
	position: absolute;
	top: 1.15rem;
	left: 0;
	right: 0;
	height: 1px;
	background: var(--bh-line-strong);
}

.process__step:last-child::before {
	right: 50%;
}

.process__step:first-child::before {
	left: 0;
}

.process__marker {
	position: absolute;
	top: 0;
	left: 0;
	display: grid;
	place-content: center;
	width: 2.35rem;
	height: 2.35rem;
	background: var(--bh-surface);
	border: 1px solid var(--bh-gold);
	border-radius: 50%;
	font-family: var(--bh-font-display);
	font-size: 0.8rem;
	color: var(--bh-gold);
	transition: transform 0.5s var(--bh-ease), background-color 0.4s ease, color 0.4s ease;
}

.process__step:hover .process__marker {
	background: var(--bh-gold);
	color: var(--bh-on-gold);
	transform: translateY(-4px) scale(1.08);
}

.process__title {
	margin: 0 0 0.6rem;
	font-size: 1.35rem;
}

.process__text {
	margin: 0;
	font-size: 0.9rem;
	color: var(--bh-text-soft);
}

/* Why us ------------------------------------------------------------------- */

.why-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	gap: clamp(1.5rem, 3vw, 3rem);
}

.why {
	padding-top: 1.75rem;
	border-top: 1px solid var(--bh-line-strong);
}

.why__num {
	margin: 0;
	font-family: var(--bh-font-display);
	font-size: clamp(3rem, 6vw, 4.5rem);
	font-weight: 300;
	line-height: 1;
	color: var(--bh-gold);
}

.why__title {
	margin: 0.5rem 0 1rem;
	font-family: var(--bh-font-label);
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--bh-text-muted);
}

.why__text {
	margin: 0;
	font-size: 0.92rem;
	color: var(--bh-text-soft);
}

/* Testimonials ------------------------------------------------------------- */

.rating-head {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	margin-bottom: 2.5rem;
	color: var(--bh-gold);
}

.rating-head__score {
	font-family: var(--bh-font-display);
	font-size: 1.5rem;
}

.rating-head__source {
	font-size: 0.68rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--bh-text-muted);
}

.stars {
	display: inline-flex;
	gap: 0.15rem;
	color: var(--bh-gold);
}

.stars .icon {
	fill: currentColor;
	stroke: none;
}

/* 3D testimonial carousel -------------------------------------------------- */

/*
 * One perspective camera; each card is placed by its distance from the active
 * slide (--pos, negative to the left). Neighbours turn away and recede, so the
 * set reads as objects in a room rather than panels in a row.
 *
 * Without JS the .is-live class never lands, and the cards fall back to a plain
 * readable stack — every quote present, nothing hidden behind a control that
 * cannot move.
 */
.tcarousel {
	position: relative;
	margin-top: 1rem;
	/*
	 * The off-centre cards are pushed sideways out of the stage by design, and
	 * nothing was catching them — so the document grew wider than the viewport
	 * and phones rendered the whole page zoomed out. `clip` on the X axis only:
	 * `hidden` would force a scroll container and cut the lifted card's shadow
	 * off vertically, and it cannot be paired with `visible` on the other axis.
	 *
	 * Applied to the wrapper, not the stage — the stage owns the perspective,
	 * and any non-visible overflow there would flatten the 3D.
	 */
	overflow-x: clip;
	overflow-y: visible;
	overflow-clip-margin: 2rem;
}

.tcarousel__stage {
	display: grid;
	gap: 1.25rem;
}

.tcarousel.is-live .tcarousel__stage {
	display: block;
	position: relative;
	height: var(--stage-h, 26rem);
	perspective: 1500px;
	perspective-origin: 50% 45%;
	transform-style: preserve-3d;
	touch-action: pan-y;
	cursor: grab;
}

.tcarousel.is-live.is-dragging .tcarousel__stage {
	cursor: grabbing;
}

.tcarousel.is-live .tcarousel__card {
	position: absolute;
	top: 0;
	left: 50%;
	width: min(30rem, 84%);
	margin: 0;
	/*
	 * --shift carries the in-progress drag so the deck follows the finger
	 * before it snaps. --pos is the settled distance from centre.
	 */
	transform:
		translateX( calc( -50% + ( var(--pos) + var(--shift, 0) ) * 46% ) )
		translateZ( calc( max( -1 * abs( var(--pos) + var(--shift, 0) ), -3 ) * 170px ) )
		rotateY( calc( ( var(--pos) + var(--shift, 0) ) * -32deg ) )
		scale( calc( 1 - min( abs( var(--pos) + var(--shift, 0) ), 3 ) * 0.08 ) );
	opacity: calc( 1 - min( abs( var(--pos) + var(--shift, 0) ), 3 ) * 0.34 );
	transition: transform 0.62s var(--bh-ease), opacity 0.5s ease, box-shadow 0.5s ease;
	will-change: transform, opacity;
	pointer-events: none;
	z-index: calc( 10 - min( abs( var(--pos) ), 9 ) );
}

.tcarousel.is-live.is-dragging .tcarousel__card {
	transition: none; /* Follow the finger 1:1 while dragging. */
}

/* Cards past the third neighbour are out of the scene entirely. */
.tcarousel.is-live .tcarousel__card[data-far] {
	opacity: 0;
	pointer-events: none;
}

.tcarousel.is-live .tcarousel__card.is-active {
	pointer-events: auto;
	box-shadow: var(--bh-e-lift);
}

/* The active card earns a little gold; the rest stay quiet. */
.tcarousel.is-live .tcarousel__card.is-active .quote__rating .icon {
	animation: bh-star-pop 0.5s var(--bh-ease-out) backwards;
}

.tcarousel.is-live .tcarousel__card.is-active .quote__rating .icon:nth-child(2) { animation-delay: 0.06s; }
.tcarousel.is-live .tcarousel__card.is-active .quote__rating .icon:nth-child(3) { animation-delay: 0.12s; }
.tcarousel.is-live .tcarousel__card.is-active .quote__rating .icon:nth-child(4) { animation-delay: 0.18s; }
.tcarousel.is-live .tcarousel__card.is-active .quote__rating .icon:nth-child(5) { animation-delay: 0.24s; }

@keyframes bh-star-pop {
	from { opacity: 0; transform: scale(0.4) rotate(-25deg); }
	to   { opacity: 1; transform: none; }
}

/* Controls */
.tcarousel__controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1.25rem;
	margin-top: 2rem;
}

.tcarousel__arrow {
	display: grid;
	place-content: center;
	width: 2.9rem;
	height: 2.9rem;
	border: 1px solid var(--bh-line-strong);
	border-radius: 50%;
	color: var(--bh-text-soft);
	transition: color 0.3s ease, border-color 0.3s ease, background-color 0.3s ease,
		transform 0.35s var(--bh-ease);
}

.tcarousel__arrow .icon {
	transform: rotate(180deg); /* Same arrow glyph, mirrored for "previous". */
}

.tcarousel__arrow--next .icon {
	transform: none;
}

.tcarousel__arrow:hover {
	background: var(--bh-gold);
	border-color: var(--bh-gold);
	color: var(--bh-on-gold);
	transform: translateY(-2px);
}

.tcarousel__dots {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.tcarousel__dot {
	width: 0.55rem;
	height: 0.55rem;
	border-radius: 50%;
	background: var(--bh-line-strong);
	transition: background-color 0.35s ease, transform 0.35s var(--bh-ease), width 0.35s var(--bh-ease);
}

.tcarousel__dot.is-active {
	width: 1.6rem;
	border-radius: var(--bh-radius-pill);
	background: var(--bh-gold);
}

@media (prefers-reduced-motion: reduce) {
	/* No depth, no motion — a readable column instead. */
	.tcarousel.is-live .tcarousel__stage {
		display: grid;
		height: auto;
		perspective: none;
	}

	.tcarousel.is-live .tcarousel__card {
		position: static;
		width: auto;
		transform: none;
		opacity: 1;
		pointer-events: auto;
	}

	.tcarousel__controls {
		display: none;
	}
}

.slider__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(min(22rem, 82vw), 1fr);
	gap: clamp(1rem, 2.5vw, 1.75rem);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-bottom: 1.25rem;
	scrollbar-width: thin;
}

.slider__track > * {
	scroll-snap-align: start;
}

.quote {
	display: flex;
	flex-direction: column;
	padding: clamp(1.75rem, 3vw, 2.5rem);
	background: var(--bh-surface);
	border: 1px solid var(--bh-line);
	border-radius: var(--bh-radius-sm);
	box-shadow: var(--bh-e1);
	transition: box-shadow 0.5s var(--bh-ease), transform 0.5s var(--bh-ease);
}

.quote:hover {
	box-shadow: var(--bh-e3);
	transform: translateY(-4px);
}

.quote > .icon {
	color: var(--bh-gold);
	opacity: 0.55;
}

.quote__rating {
	margin: 1rem 0 0;
}

.quote__body {
	margin: 1.25rem 0 0;
	font-family: var(--bh-font-display);
	font-size: 1.1rem;
	font-style: italic;
	line-height: 1.6;
	color: var(--bh-text-soft);
}

.quote__body p:last-child {
	margin-bottom: 0;
}

.quote__cite {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	margin-top: auto;
	padding-top: 1.75rem;
}

.quote__avatar {
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}

/* Initial-letter stand-in, so a caption without a photo still balances. */
.quote__avatar--empty {
	display: grid;
	place-content: center;
	background: var(--bh-ink);
	font-family: var(--bh-font-display);
	font-size: 1.15rem;
	color: var(--bh-gold);
}

.quote__name {
	display: block;
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.06em;
}

.quote__role {
	display: block;
	margin-top: 0.15rem;
	font-size: 0.62rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--bh-text-muted);
}

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

.faq {
	max-width: 52rem;
	margin-inline: auto;
}

.faq__item {
	border-bottom: 1px solid var(--bh-line);
}

.faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	width: 100%;
	padding: 1.5rem 0;
	font-family: var(--bh-font-display);
	font-size: clamp(1.1rem, 2vw, 1.4rem);
	text-align: left;
	transition: color 0.3s ease;
}

.faq__q:hover,
.faq__item.is-open .faq__q {
	color: var(--bh-gold);
}

.faq__sign {
	position: relative;
	flex-shrink: 0;
	width: 1rem;
	height: 1rem;
}

.faq__sign::before,
.faq__sign::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 1px;
	background: currentColor;
	transition: transform 0.4s var(--bh-ease);
}

.faq__sign::after {
	transform: rotate(90deg);
}

.faq__item.is-open .faq__sign::after {
	transform: rotate(0deg);
}

.faq__a {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.45s var(--bh-ease);
}

.faq__item.is-open .faq__a {
	grid-template-rows: 1fr;
}

.faq__a-inner {
	overflow: hidden;
}

.faq__a p {
	padding-bottom: 1.5rem;
	color: var(--bh-text-soft);
}

/* CTA ---------------------------------------------------------------------- */

.cta {
	position: relative;
	padding-block: clamp(5rem, 11vw, 9rem);
	background: var(--bh-ink-deep);
	color: var(--bh-text-on-ink);
	text-align: center;
	overflow: hidden;
	--bh-text-soft: var(--bh-text-on-ink-soft);
}

.cta__bg {
	position: absolute;
	inset: 0;
	background-image: var(--bh-cta-image, none);
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
	opacity: 0.28;
}

.cta:not(.cta--has-image) .cta__bg {
	background:
		radial-gradient(60% 80% at 50% 50%, rgba(var(--bh-gold-rgb), 0.15), transparent 70%);
	opacity: 1;
}

.cta__inner {
	position: relative;
	z-index: 1;
}

.cta__title {
	margin: 0;
	font-size: clamp(2.25rem, 6vw, 4.5rem);
	line-height: 1.05;
}

.cta__line {
	display: block;
}

.cta__line--accent {
	font-style: italic;
	color: var(--bh-gold);
}

.cta__sub {
	margin: 1.75rem auto 2.5rem;
	max-width: 38rem;
	color: var(--bh-text-on-ink-soft);
}

/* Contact ------------------------------------------------------------------ */

.contact__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: start;
}

.contact-list {
	display: grid;
	gap: 1.1rem;
	margin: 1.75rem 0 0;
}

.contact-list li {
	display: flex;
	gap: 0.9rem;
	align-items: flex-start;
	font-size: 0.9rem;
	color: var(--bh-text-soft);
}

.contact-list .icon {
	flex-shrink: 0;
	margin-top: 0.2rem;
	color: var(--bh-gold);
}

.contact-list a:hover {
	color: var(--bh-gold);
}

.contact-list--lg li {
	font-size: 1rem;
}

.contact__map {
	aspect-ratio: 4 / 3;
	border-radius: var(--bh-radius-sm);
	overflow: hidden;
	box-shadow: var(--bh-e3);
	filter: grayscale(1) contrast(1.1);
	transition: filter 0.6s ease;
}

.contact__map:hover {
	filter: grayscale(0) contrast(1);
}

.contact__map iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

/* About page --------------------------------------------------------------- */

.about__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: start;
}

.about__lead .entry-content {
	max-width: none;
	font-size: 1.0625rem;
}

.about__facts {
	position: sticky;
	top: 7rem;
	padding: clamp(1.5rem, 3vw, 2.25rem);
	background: var(--bh-ink);
	color: var(--bh-text-on-ink);
	border-radius: var(--bh-radius-sm);
	box-shadow: var(--bh-e3);
}

.about__facts-title {
	margin: 0 0 1.25rem;
	font-family: var(--bh-font-label);
	font-size: 0.66rem;
	font-weight: 600;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--bh-gold);
}

.about__facts dl {
	margin: 0 0 1.75rem;
}

.about__fact {
	padding: 0.8rem 0;
	border-top: 1px solid var(--bh-line-on-ink);
}

.about__fact dt {
	margin-bottom: 0.2rem;
	font-family: var(--bh-font-label);
	font-size: 0.62rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--bh-text-on-ink-muted);
}

.about__fact dd {
	margin: 0;
	font-size: 0.95rem;
	color: var(--bh-text-on-ink);
}

/* Company profile download ------------------------------------------------- */

.profile-dl {
	margin-top: 1.25rem;
}

.profile-dl__note {
	margin: 0 0 0.75rem;
	font-size: 0.85rem;
	color: var(--bh-text-soft);
}

.profile-dl__link {
	width: 100%;
	justify-content: center;
}

.profile-dl__meta {
	margin: 0.6rem 0 0;
	font-family: var(--bh-font-label);
	font-size: 0.66rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-align: center;
	color: var(--bh-text-muted);
}

/* In the footer it sits in a column, so it should not stretch full width. */
.site-footer .profile-dl__link {
	width: auto;
}

.site-footer .profile-dl__meta {
	text-align: left;
}

/* Founder ------------------------------------------------------------------ */

.founder__grid {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	gap: clamp(2.5rem, 6vw, 5rem);
	align-items: center;
}

.founder__portrait {
	position: relative;
	aspect-ratio: 4 / 5;
}

.founder__portrait img,
.founder__portrait-empty {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	border-radius: var(--bh-radius-sm);
	box-shadow: var(--bh-e4);
}

.founder__portrait-empty {
	display: grid;
	place-content: center;
	background: linear-gradient(150deg, var(--bh-ink), var(--bh-ink-3));
	font-family: var(--bh-font-display);
	font-size: clamp(4rem, 10vw, 7rem);
	color: rgba(var(--bh-canvas-rgb), 0.35);
}

/* Offset rule that gives the portrait somewhere to sit. */
.founder__frame {
	position: absolute;
	inset: 1.75rem -1.75rem -1.75rem 1.75rem;
	z-index: -1;
	border: 1px solid var(--bh-gold);
	border-radius: var(--bh-radius-sm);
	opacity: 0.55;
	pointer-events: none;
}

.founder__figures {
	position: absolute;
	right: -1.25rem;
	bottom: -1.25rem;
	display: flex;
	gap: 1px;
	background: var(--bh-line);
	border: 1px solid var(--bh-line);
	border-radius: var(--bh-radius-xs);
	overflow: hidden;
	box-shadow: var(--bh-e3);
}

.founder__figures li {
	padding: 0.85rem 1.15rem;
	background: var(--bh-pearl);
	text-align: center;
}

.founder__figure-value {
	display: block;
	font-family: var(--bh-font-display);
	font-size: 1.5rem;
	line-height: 1;
	color: var(--bh-gold-text);
}

.founder__figure-label {
	display: block;
	margin-top: 0.3rem;
	font-family: var(--bh-font-label);
	font-size: 0.58rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--bh-text-soft);
}

.founder__quote {
	margin: 1.5rem 0 0;
	padding-left: 1.5rem;
	border-left: 2px solid var(--bh-gold);
}

.founder__quote .icon {
	color: var(--bh-gold);
	opacity: 0.6;
}

.founder__quote p {
	margin: 0.6rem 0 0;
	font-family: var(--bh-font-display);
	font-size: clamp(1.2rem, 2.4vw, 1.6rem);
	font-style: italic;
	line-height: 1.45;
	color: var(--bh-text);
}

.founder__note {
	margin-top: 1.75rem;
	font-size: 1.0625rem;
	color: var(--bh-text-soft);
}

.founder__note p + p {
	margin-top: 1rem;
}

.founder__sign {
	margin-top: 2rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--bh-line);
}

.founder__signature {
	max-width: 11rem;
	margin-bottom: 0.75rem;
	/* Ink signatures are usually black on white; this drops the white out. */
	mix-blend-mode: multiply;
}

.founder__name {
	margin: 0;
	font-family: var(--bh-font-display);
	font-size: 1.5rem;
	color: var(--bh-text);
}

.founder__role {
	margin: 0.2rem 0 0;
	font-family: var(--bh-font-label);
	font-size: 0.66rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--bh-gold-text);
}

@media (max-width: 900px) {
	.about__grid,
	.founder__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.about__facts {
		position: static;
	}

	.founder__portrait {
		max-width: 22rem;
	}

	.founder__frame {
		inset: 1rem -1rem -1rem 1rem;
	}

	.founder__figures {
		right: -0.5rem;
		bottom: -0.75rem;
	}
}

/* Cost calculator ---------------------------------------------------------- */

.calc-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: start;
}

.calc-hero__intro {
	margin: 1.25rem 0 0;
	max-width: 34rem;
	font-size: 1.05rem;
	color: var(--bh-text-on-ink-soft);
}

.calc-hero__points {
	display: grid;
	gap: 0.8rem;
	margin: 2rem 0 0;
}

.calc-hero__points li {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-size: 0.92rem;
	color: var(--bh-text-on-ink-soft);
}

.calc-hero__points .icon {
	color: var(--bh-gold);
}

.calc-hero__phone {
	margin: 1.75rem 0 0;
	font-size: 0.92rem;
	color: var(--bh-text-on-ink-muted);
}

.calc-hero__phone a {
	margin-left: 0.4rem;
	font-family: var(--bh-font-display);
	font-size: 1.3rem;
	color: var(--bh-gold);
}

/*
 * A light card inside a dark band has to restore the light-surface tokens.
 * .band-ink reassigns --bh-text and friends for content sitting ON the dark
 * band; a card placed inside it would otherwise inherit those and render
 * light-on-light. Everything below reads from these, so one reset fixes the
 * whole subtree rather than colour being restated component by component.
 */
.on-canvas,
.calc {
	--bh-text: var(--bh-text-on-canvas);
	--bh-text-soft: var(--bh-text-on-canvas-soft);
	--bh-text-muted: var(--bh-text-on-canvas-muted);
	--bh-line: rgba(var(--bh-ink-rgb), 0.14);
	--bh-line-strong: rgba(var(--bh-ink-rgb), 0.28);

	color: var(--bh-text);
}

/* The wizard sits on a light card so it reads as a form, not scenery. */
.calc {
	position: relative;
	padding: clamp(1.5rem, 3vw, 2.5rem);
	background: var(--bh-pearl);
	border-radius: var(--bh-radius-sm);
	box-shadow: var(--bh-e4);
}

.calc__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.calc__steps {
	display: flex;
	gap: 0.5rem;
	margin-bottom: 1.75rem;
	padding-bottom: 1.25rem;
	border-bottom: 1px solid var(--bh-line);
}

.calc__step-dot {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	flex: 1;
	font-family: var(--bh-font-label);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--bh-text-muted);
	transition: color 0.35s ease;
}

.calc__step-num {
	display: grid;
	place-content: center;
	width: 2rem;
	height: 2rem;
	flex-shrink: 0;
	border: 1px solid var(--bh-line-strong);
	border-radius: 50%;
	font-size: 0.8rem;
	transition: background-color 0.35s ease, border-color 0.35s ease, color 0.35s ease;
}

.calc__step-dot.is-active {
	color: var(--bh-text);
}

.calc__step-dot.is-active .calc__step-num {
	background: var(--bh-gold);
	border-color: var(--bh-gold);
	color: var(--bh-on-gold);
}

/* A rail behind the step dots that fills as the visitor advances. */
.calc__steps {
	position: relative;
}

.calc__steps::before,
.calc__steps::after {
	content: "";
	position: absolute;
	left: 1rem;
	right: 1rem;
	top: 1rem;
	height: 1px;
	background: var(--bh-line-strong);
	z-index: 0;
}

.calc__steps::after {
	right: auto;
	width: calc( (100% - 2rem) * var(--calc-progress, 0) );
	background: var(--bh-gold);
	transition: width 0.5s var(--bh-ease);
}

.calc__step-dot {
	position: relative;
	z-index: 1;
}

.calc__step-num {
	background: var(--bh-pearl);
}

/* Panels arrive rather than snap. */
.calc__panel.is-active {
	animation: bh-calc-in 0.42s var(--bh-ease-out);
}

@keyframes bh-calc-in {
	from { opacity: 0; transform: translateY(0.75rem); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.calc__panel.is-active {
		animation: none;
	}
}

.calc__q {
	margin: 0 0 0.9rem;
	font-size: 1.25rem;
}

.calc__panel > .calc__q ~ .calc__q {
	margin-top: 1.75rem;
}

.calc__field {
	display: flex;
	flex-direction: column;
	margin: 0 0 1rem;
}

.calc__field label {
	margin-bottom: 0.5rem;
	font-family: var(--bh-font-label);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--bh-text-soft);
}

.calc__req {
	color: var(--bh-gold);
}

.calc__field input {
	min-height: 3rem;
	padding: 0.9rem 1.05rem;
	background: #fff;
	border: 1px solid var(--bh-line-strong);
	border-radius: var(--bh-radius-xs);
	font-family: var(--bh-font-body);
	font-size: 1rem;
	color: var(--bh-text);
	transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.calc__field input:focus {
	outline: none;
	border-color: var(--bh-gold);
	box-shadow: 0 0 0 3px rgba(var(--bh-gold-rgb), 0.16);
}

.calc__field.has-error input {
	border-color: #a8452f;
}

.calc__error:not(:empty) {
	margin-top: 0.35rem;
	font-size: 0.8rem;
	color: #a8452f;
}

.calc__hint {
	margin-top: 0.4rem;
	font-size: 0.84rem;
	color: var(--bh-text-soft);
}

.calc__hint--block {
	display: block;
	margin: -0.4rem 0 1rem;
}

/* Radio choices as pressable chips. */
.calc__choices {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}

.calc__choice input,
.calc__package input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.calc__choice span {
	display: block;
	min-height: 2.75rem;
	display: flex;
	align-items: center;
	padding: 0.7rem 1.2rem;
	border: 1px solid var(--bh-line-strong);
	border-radius: var(--bh-radius-pill);
	font-size: 0.85rem;
	cursor: pointer;
	transition: border-color 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}

.calc__choice input:checked + span {
	background: var(--bh-gold);
	border-color: var(--bh-gold);
	color: var(--bh-on-gold);
}

/* Focus must stay visible even though the input itself is hidden. */
.calc__choice input:focus-visible + span,
.calc__package input:focus-visible + .calc__package-body {
	outline: 2px solid var(--bh-gold);
	outline-offset: 2px;
}

.calc__packages {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
	gap: 0.75rem;
}

.calc__package {
	position: relative;
	display: block;
}

.calc__package-body {
	display: grid;
	gap: 0.35rem;
	padding: 1.1rem 1rem;
	background: #fff;
	border: 1px solid var(--bh-line-strong);
	border-radius: var(--bh-radius-xs);
	cursor: pointer;
	transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s var(--bh-ease);
}

.calc__package input:checked + .calc__package-body {
	border-color: var(--bh-gold);
	box-shadow: 0 0 0 2px rgba(var(--bh-gold-rgb), 0.25);
	transform: translateY(-2px);
}

/* A tick on the chosen package — cheaper to read than colour alone, and it
   does not rely on colour vision to tell you what you picked. */
.calc__package-body::after {
	content: "✓";
	position: absolute;
	top: 0.5rem;
	right: 0.6rem;
	display: grid;
	place-content: center;
	width: 1.35rem;
	height: 1.35rem;
	background: var(--bh-gold);
	color: var(--bh-on-gold);
	border-radius: 50%;
	font-size: 0.7rem;
	opacity: 0;
	transform: scale(0.5);
	transition: opacity 0.25s ease, transform 0.35s var(--bh-ease);
}

.calc__package input:checked + .calc__package-body::after {
	opacity: 1;
	transform: scale(1);
}

/* Rooms the visitor has actually counted step forward. */
.calc__room.is-counted {
	border-color: rgba(var(--bh-gold-rgb), 0.5);
	background: rgba(var(--bh-gold-rgb), 0.05);
}

.calc__room.is-counted .calc__room-count {
	color: var(--bh-gold-text);
	font-weight: 500;
}

.calc__package-name {
	font-family: var(--bh-font-display);
	font-size: 1.2rem;
}

.calc__package-rate {
	font-family: var(--bh-font-label);
	font-size: 0.86rem;
	font-weight: 600;
	color: var(--bh-gold-text);
}

.calc__package-rate small {
	font-weight: 400;
	color: var(--bh-text-soft);
}

/* Rooms */
.calc__rooms {
	display: grid;
	gap: 0.5rem;
	max-height: 22rem;
	overflow-y: auto;
	padding-right: 0.25rem;
}

.calc__room {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.55rem 0.85rem;
	transition: border-color 0.3s ease, background-color 0.3s ease;
	background: #fff;
	border: 1px solid var(--bh-line);
	border-radius: var(--bh-radius-xs);
}

.calc__room-name {
	font-size: 1rem;
}

.calc__stepper {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	flex-shrink: 0;
}

.calc__step-btn {
	width: 2.75rem;
	height: 2.75rem;
	display: grid;
	place-content: center;
	background: var(--bh-canvas-2);
	border: 1px solid var(--bh-line-strong);
	border-radius: var(--bh-radius-xs);
	font-size: 1rem;
	line-height: 1;
	color: var(--bh-text);
	transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.calc__step-btn:hover {
	background: var(--bh-gold);
	border-color: var(--bh-gold);
	color: var(--bh-on-gold);
}

.calc__room-count {
	width: 3rem;
	padding: 0.4rem 0;
	background: transparent;
	border: 0;
	font-family: var(--bh-font-display);
	font-size: 1.1rem;
	text-align: center;
	color: var(--bh-text);
	-moz-appearance: textfield;
	appearance: textfield;
}

.calc__room-count::-webkit-outer-spin-button,
.calc__room-count::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Result */
.calc__result,
.calc__done {
	padding: 1.5rem;
	margin-bottom: 1.5rem;
	background: var(--bh-ink);
	color: var(--bh-text-on-ink);
	border-radius: var(--bh-radius-xs);
	text-align: center;
}

.calc__result-label {
	margin: 0 0 0.6rem;
	font-family: var(--bh-font-label);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--bh-gold);
}

.calc__result-figure {
	margin: 0;
	font-family: var(--bh-font-display);
	font-size: clamp(1.5rem, 4vw, 2.35rem);
	font-weight: 300;
	line-height: 1.15;
	color: var(--bh-text-on-ink);
}

.calc__result-dash {
	color: var(--bh-gold);
}

.calc__result-note,
.calc__done-msg {
	margin: 0.85rem 0 0;
	font-size: 0.8rem;
	color: var(--bh-text-on-ink-muted);
}

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

.calc__contact .calc__field:last-child {
	grid-column: 1 / -1;
}

.calc__nav {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-top: 1.75rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--bh-line);
}

.calc__nav .btn:last-of-type {
	margin-left: auto;
}

/* Sized to sit in the nav row, not to dominate the card. */
.calc__nav .btn {
	padding: 0.85rem 1.6rem;
	font-size: 0.72rem;
	letter-spacing: 0.16em;
}

/*
 * Waiting on required fields. Dimmed but still focusable and clickable —
 * pressing it names the missing field and jumps there, which is far more
 * useful than a button that silently refuses.
 */
/*
 * Set the button's own tokens rather than overriding the background it derives
 * from them. .btn resolves `background: var(--btn-bg)`, so re-pointing --btn-bg
 * works with that system instead of racing it — and it keeps every other state
 * (hover, focus, active) consistent for free.
 */
.calc__nav .btn.is-waiting {
	--btn-bg: var(--bh-canvas-3);
	--btn-fg: var(--bh-text-soft);
	--btn-border: var(--bh-line-strong);

	box-shadow: none;
	cursor: not-allowed;
}

.calc__nav .btn.is-waiting:hover {
	--btn-bg: var(--bh-canvas-3);
	--btn-fg: var(--bh-text-soft);
	--btn-border: var(--bh-line-strong);

	transform: none;
	box-shadow: none;
}

.calc__nav .btn.is-waiting .icon {
	opacity: 0.5;
}

/*
 * The withheld figure. Obscured rather than absent, so the visitor can see
 * there is a real number waiting — a blank space reads as "nothing here yet",
 * which is a much weaker reason to fill the form in.
 */
.calc__locked {
	position: relative;
	padding: 1.5rem;
	margin-bottom: 1.5rem;
	background: var(--bh-ink);
	color: var(--bh-text-on-ink);
	border-radius: var(--bh-radius-xs);
	text-align: center;
	overflow: hidden;
}

.calc__locked::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(105deg, transparent 40%, rgba(var(--bh-gold-rgb), 0.14) 50%, transparent 60%);
	background-size: 240% 100%;
}

@media (prefers-reduced-motion: no-preference) {
	.calc__locked::after {
		animation: bh-sweep 3.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
	}
}

.calc__locked-icon {
	display: inline-grid;
	place-content: center;
	width: 2.5rem;
	height: 2.5rem;
	margin-bottom: 0.6rem;
	border: 1px solid rgba(var(--bh-gold-rgb), 0.4);
	border-radius: 50%;
	color: var(--bh-gold);
}

.calc__locked-label {
	margin: 0 0 0.4rem;
	font-family: var(--bh-font-label);
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--bh-gold);
}

.calc__locked-figure {
	margin: 0;
	font-family: var(--bh-font-display);
	font-size: clamp(1.3rem, 3.4vw, 1.9rem);
	letter-spacing: 0.06em;
	color: var(--bh-text-on-ink-muted);
}

.calc__status {
	margin: 1rem 0 0;
	font-size: 0.88rem;
}

.calc__status.is-error {
	color: #a8452f;
}

@media (max-width: 900px) {
	.calc-hero__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 640px) {
	/*
	 * No inner scroll on a phone. A scrollable list inside a scrollable page
	 * traps the gesture — the visitor swipes expecting the page to move and the
	 * room list moves instead. Let it run its full height and scroll the page.
	 */
	.calc__rooms {
		max-height: none;
		overflow-y: visible;
		padding-right: 0;
	}
}

@media (max-width: 560px) {
	.calc__contact {
		grid-template-columns: minmax(0, 1fr);
	}

	.calc__step-label {
		display: none;
	}

	.calc__step-dot {
		flex: 0 0 auto;
	}

	/*
	 * On a phone the running total takes its own row above the buttons, which
	 * then split the width evenly. Letting all three share one line squeezed
	 * the buttons to unequal, cramped widths.
	 */
	.calc__nav {
		flex-wrap: wrap;
		gap: 0.75rem;
	}

	.calc__running {
		order: -1;
		width: 100%;
		text-align: center;
	}

	.calc__nav .btn {
		flex: 1 1 0;
		justify-content: center;
		min-width: 0;
		padding-inline: 1rem;
	}

	/* margin-left:auto from the desktop rule would break the even split. */
	.calc__nav .btn:last-of-type {
		margin-left: 0;
	}
}

/* Division page ------------------------------------------------------------ */

.division__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: start;
}

.division__body .entry-content {
	max-width: none;
	font-size: 1.0625rem;
}

.division__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin-top: 2.5rem;
}

.division__aside {
	position: sticky;
	top: 7rem;
	display: grid;
	gap: 1.75rem;
}

.division__media {
	margin: 0;
	aspect-ratio: 4 / 5;
	border-radius: var(--bh-radius-sm);
	overflow: hidden;
	box-shadow: var(--bh-e3);
}

.division__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.division__media--empty {
	display: grid;
	place-content: center;
	background: linear-gradient(140deg, var(--bh-ink), var(--bh-ink-3));
	font-family: var(--bh-font-display);
	font-size: 3rem;
	letter-spacing: 0.2em;
	text-indent: 0.2em;
	color: rgba(var(--bh-canvas-rgb), 0.45);
}

@media (max-width: 900px) {
	.division__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.division__aside {
		position: static;
	}
}

/* Quote form --------------------------------------------------------------- */

.quote__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: start;
}

.quote__intro {
	margin: 1.25rem 0 2.5rem;
	max-width: 42rem;
	color: var(--bh-text-soft);
}

.quote-form__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.25rem 1.5rem;
}

.quote-form__field {
	margin: 0;
	display: flex;
	flex-direction: column;
}

.quote-form__field--full {
	grid-column: 1 / -1;
}

.quote-form__field label {
	margin-bottom: 0.5rem;
	font-family: var(--bh-font-label);
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--bh-text-muted);
}

.quote-form__req {
	color: var(--bh-gold);
}

.quote-form__field input,
.quote-form__field select,
.quote-form__field textarea {
	width: 100%;
	padding: 0.9rem 1.1rem;
	background: var(--bh-surface, var(--bh-pearl));
	border: 1px solid var(--bh-line-strong);
	border-radius: var(--bh-radius-xs);
	font-family: var(--bh-font-body);
	font-size: 1rem;
	color: var(--bh-text);
	transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Native select arrow, drawn so it matches the rest of the field furniture. */
.quote-form__field select {
	appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
		linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: calc(100% - 1.25rem) 55%, calc(100% - 1rem) 55%;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	padding-right: 2.75rem;
}

.quote-form__field input:focus,
.quote-form__field select:focus,
.quote-form__field textarea:focus {
	outline: none;
	border-color: var(--bh-gold);
	box-shadow: 0 0 0 3px rgba(var(--bh-gold-rgb), 0.16);
}

.quote-form__field.has-error input,
.quote-form__field.has-error select,
.quote-form__field.has-error textarea {
	border-color: #a8452f;
}

.quote-form__error {
	min-height: 0;
	margin-top: 0.35rem;
	font-size: 0.8rem;
	color: #a8452f;
}

.quote-form__field.has-error .quote-form__error {
	min-height: 1.2rem;
}

/* Off-screen rather than display:none — bots skip what is not rendered. */
.quote-form__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.quote-form__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.25rem;
	margin-top: 2rem;
}

.quote-form__note {
	margin: 0;
	font-size: 0.82rem;
	color: var(--bh-text-muted);
}

.quote-form__status {
	margin: 1rem 0 0;
	font-size: 0.9rem;
}

.quote-form__status.is-error {
	color: #a8452f;
}

.quote-form__done {
	margin: 0;
	padding: 2rem;
	background: var(--bh-surface, var(--bh-pearl));
	border: 1px solid var(--bh-gold);
	border-radius: var(--bh-radius-sm);
	font-family: var(--bh-font-display);
	font-size: 1.35rem;
	text-align: center;
}

.quote__side {
	position: sticky;
	top: 7rem;
	padding: clamp(1.75rem, 3vw, 2.5rem);
	background: var(--bh-ink);
	color: var(--bh-text-on-ink);
	border-radius: var(--bh-radius-sm);
	box-shadow: var(--bh-e3);
}

.quote__side-title {
	margin: 0 0 1.5rem;
	font-size: 1.5rem;
	color: var(--bh-text-on-ink);
}

.quote__steps {
	display: grid;
	gap: 1.1rem;
	counter-reset: quote-step;
}

.quote__steps li {
	display: flex;
	gap: 0.9rem;
	font-size: 0.92rem;
	color: var(--bh-text-on-ink-soft);
}

.quote__step-num {
	flex-shrink: 0;
	font-family: var(--bh-font-display);
	font-size: 0.95rem;
	letter-spacing: 0.1em;
	color: var(--bh-gold);
}

.quote__contact {
	margin-top: 2rem;
	padding-top: 1.75rem;
	border-top: 1px solid var(--bh-line-on-ink);
}

.quote__urgent {
	margin: 0 0 0.6rem;
	font-family: var(--bh-font-label);
	font-size: 0.66rem;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--bh-text-on-ink-muted);
}

.quote__phone {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-family: var(--bh-font-display);
	font-size: 1.5rem;
	color: var(--bh-gold);
}

.quote__hours {
	margin: 0.75rem 0 0;
	font-size: 0.82rem;
	color: var(--bh-text-on-ink-muted);
}

@media (max-width: 900px) {
	.quote__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.quote__side {
		position: static;
	}
}

@media (max-width: 640px) {
	.quote-form__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Social ------------------------------------------------------------------- */

.social {
	display: flex;
	gap: 0.6rem;
	margin-top: 1.75rem;
}

.social a {
	display: grid;
	place-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border: 1px solid var(--bh-line-strong);
	border-radius: 50%;
	color: var(--bh-text-muted);
	transition: color 0.35s ease, border-color 0.35s ease, transform 0.35s var(--bh-ease),
		background-color 0.35s ease;
}

.social a:hover {
	color: var(--bh-on-gold);
	background: var(--bh-gold);
	border-color: var(--bh-gold);
	transform: translateY(-3px);
}

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

.site-footer {
	background: var(--bh-ink);
	color: var(--bh-text-on-ink-soft);
	--bh-text: var(--bh-text-on-ink);
	--bh-text-soft: var(--bh-text-on-ink-soft);
	--bh-text-muted: var(--bh-text-on-ink-muted);
	--bh-line: var(--bh-line-on-ink);
	--bh-line-strong: rgba(var(--bh-canvas-rgb), 0.2);
}

.newsletter {
	padding-block: clamp(2.5rem, 5vw, 4rem);
	background: var(--bh-ink-2);
	border-bottom: 1px solid var(--bh-line-on-ink);
}

.newsletter__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(1.5rem, 4vw, 3.5rem);
	align-items: center;
}

.newsletter__title {
	margin: 0;
	font-size: clamp(1.5rem, 3vw, 2.25rem);
	color: var(--bh-text-on-ink);
}

.newsletter__text {
	margin: 0.6rem 0 0;
	font-size: 0.9rem;
}

.newsletter__form {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 0.75rem;
}

.newsletter__form input[type="email"] {
	padding: 0.95rem 1.25rem;
	background: transparent;
	border: 1px solid var(--bh-line-strong);
	border-radius: var(--bh-radius-xs);
	color: var(--bh-text-on-ink);
	transition: border-color 0.35s ease;
}

.newsletter__form input[type="email"]:focus {
	outline: none;
	border-color: var(--bh-gold);
}

.newsletter__msg {
	grid-column: 1 / -1;
	margin: 0;
	min-height: 1.25rem;
	font-size: 0.8rem;
}

.newsletter__msg.is-error {
	color: var(--bh-gold-soft);
}

.newsletter__msg.is-success {
	color: var(--bh-gold);
}

.footer-main {
	padding-block: clamp(3rem, 6vw, 5rem);
}

/*
 * Brand column carries the most weight, contact needs room for an address, and
 * the two link columns are narrow. Explicit ratios rather than auto-fit, which
 * gave all four equal width and left the address wrapping awkwardly.
 */
.footer-main__grid {
	display: grid;
	grid-template-columns: 2.2fr 1fr 1fr 1.4fr;
	gap: clamp(2rem, 4vw, 4rem);
}

.footer__desc {
	margin: 1.5rem 0 0;
	font-size: 0.88rem;
	max-width: 30rem;
}

.footer__heading {
	margin: 0 0 1.75rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--bh-line-on-ink);
	font-family: var(--bh-font-label);
	font-size: 0.58rem;
	font-weight: 700;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--bh-gold);
}

/*
 * Footer contact rows: a bordered icon square beside the text, rather than a
 * loose inline icon. The square gives the column a visual left edge that lines
 * up with the link columns beside it.
 */
.site-footer .contact-list li {
	align-items: flex-start;
	gap: 0.9rem;
}

.site-footer .contact-list .icon {
	box-sizing: content-box;
	width: 1.1rem;
	height: 1.1rem;
	padding: 0.5rem;
	margin-top: 0;
	border: 1px solid var(--bh-line-on-ink);
	color: var(--bh-gold);
	transition: border-color 0.35s ease, background-color 0.35s ease;
}

.site-footer .contact-list li:hover .icon {
	border-color: var(--bh-gold);
	background: rgba(var(--bh-gold-rgb), 0.06);
}

/* Square social tiles to match the icon squares above them. */
.social--footer a {
	width: 2.4rem;
	height: 2.4rem;
	border-radius: 0;
	border-color: var(--bh-line-on-ink);
}

.social--footer a:hover {
	background: rgba(var(--bh-gold-rgb), 0.06);
	border-color: var(--bh-gold);
	color: var(--bh-gold);
}

.footer__menu {
	display: grid;
	gap: 0.85rem;
	font-size: 0.88rem;
}

.footer__menu a:hover {
	color: var(--bh-gold);
	padding-left: 0.35rem;
}

.footer__menu a {
	transition: color 0.3s ease, padding-left 0.3s var(--bh-ease);
}

.footer-bar {
	padding-block: 1.5rem;
	border-top: 1px solid var(--bh-line-on-ink);
	font-size: 0.75rem;
}

.footer-bar__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.footer-bar__copy {
	margin: 0;
}

.footer-bar__menu {
	display: flex;
	gap: 1.5rem;
}

.footer-bar__menu a:hover {
	color: var(--bh-gold);
}

/* Empty state -------------------------------------------------------------- */

.empty-state {
	max-width: 32rem;
	margin-inline: auto;
	padding-block: clamp(3rem, 8vw, 6rem);
	text-align: center;
}

.empty-state__title {
	font-size: clamp(1.75rem, 4vw, 2.5rem);
}

.empty-state__text {
	margin: 1rem 0 2rem;
	color: var(--bh-text-soft);
}

/* 404 ---------------------------------------------------------------------- */

.error-404 {
	max-width: 40rem;
	margin-inline: auto;
	text-align: center;
}

.error-404__code {
	margin: 0;
	font-family: var(--bh-font-display);
	font-size: clamp(6rem, 22vw, 14rem);
	font-weight: 300;
	line-height: 0.9;
	color: transparent;
	-webkit-text-stroke: 1px var(--bh-gold);
	opacity: 0.65;
}

.error-404__title {
	margin: 0 0 1rem;
	font-size: clamp(1.75rem, 4vw, 2.75rem);
}

.error-404__text {
	margin: 0 0 2rem;
	color: var(--bh-text-soft);
}

.error-404__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: center;
	margin-top: 2rem;
}

/* Project single — image and specification in one row ---------------------- */

.project-single__top {
	padding-top: clamp(2rem, 4vw, 3.5rem);
}

.project-hero {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: clamp(1.75rem, 4vw, 3.5rem);
	align-items: center;
	margin-top: 1.5rem;
}

.project-hero__media {
	border-radius: var(--bh-radius-sm);
	overflow: hidden;
	box-shadow: var(--bh-e4);
}

.project-hero__img,
.project-hero__empty {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.project-hero__empty {
	display: grid;
	place-content: center;
	background: linear-gradient(140deg, var(--bh-ink), var(--bh-ink-3));
	font-family: var(--bh-font-display);
	font-size: clamp(3rem, 8vw, 5rem);
	letter-spacing: 0.12em;
	color: rgba(var(--bh-canvas-rgb), 0.4);
}

.project-hero__cat {
	margin: 0 0 0.6rem;
	font-family: var(--bh-font-label);
	font-size: 0.62rem;
	font-weight: 600;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--bh-gold-text);
}

.project-hero__title {
	margin: 0;
	font-size: clamp(1.9rem, 4vw, 3rem);
	line-height: 1.08;
}

.project-hero__excerpt {
	margin: 1rem 0 0;
	color: var(--bh-text-soft);
}

/*
 * Two columns of facts keeps the specification compact beside the image
 * instead of running it into a long single-column list.
 */
.project-hero__facts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0;
	margin: 1.5rem 0 0;
	border-top: 1px solid var(--bh-line);
}

.project-hero__fact {
	padding: 0.75rem 0;
	border-bottom: 1px solid var(--bh-line);
}

.project-hero__fact:nth-child(odd) {
	padding-right: 1rem;
}

.project-hero__fact dt {
	margin-bottom: 0.15rem;
	font-family: var(--bh-font-label);
	font-size: 0.58rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--bh-text-muted);
}

.project-hero__fact dd {
	margin: 0;
	font-size: 0.98rem;
	color: var(--bh-text);
}

.project-hero__actions {
	margin-top: 1.75rem;
}

@media (max-width: 900px) {
	.project-hero {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 420px) {
	.project-hero__facts {
		grid-template-columns: minmax(0, 1fr);
	}

	.project-hero__fact:nth-child(odd) {
		padding-right: 0;
	}
}

/* Project single ----------------------------------------------------------- */

.project-single__hero {
	margin-top: -3rem;
	margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.project-single__img {
	width: 100%;
	border-radius: var(--bh-radius-sm);
	box-shadow: var(--bh-e4);
}

.project-single__grid {
	display: grid;
	grid-template-columns: 18rem minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 4rem);
	padding-bottom: var(--bh-section-y);
	align-items: start;
}

.project-facts {
	position: sticky;
	top: 7rem;
	padding: 1.75rem;
	background: var(--bh-surface, var(--bh-pearl));
	border: 1px solid var(--bh-line);
	border-radius: var(--bh-radius-sm);
}

.project-facts__title {
	margin: 0 0 1.25rem;
	font-family: var(--bh-font-label);
	font-size: 0.66rem;
	font-weight: 600;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--bh-gold);
}

.project-facts dl {
	margin: 0;
}

.project-facts__row {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.75rem 0;
	border-top: 1px solid var(--bh-line);
	font-size: 0.85rem;
}

.project-facts dt {
	color: var(--bh-text-muted);
}

.project-facts dd {
	margin: 0;
	text-align: right;
	font-weight: 500;
}

/* =============================================================================
   11  EDITORIAL
   ========================================================================== */

.entry-content {
	max-width: var(--bh-container-text);
}

.entry-content > * {
	margin-bottom: 1.5rem;
}

.entry-content h2,
.entry-content h3,
.entry-content h4 {
	margin-top: 2.5rem;
	margin-bottom: 1rem;
}

.entry-content h2 {
	font-size: clamp(1.65rem, 3vw, 2.25rem);
}

.entry-content h3 {
	font-size: clamp(1.35rem, 2.4vw, 1.75rem);
}

.entry-content a:not(.btn) {
	color: var(--bh-gold);
	text-decoration: underline;
	text-underline-offset: 0.2em;
	text-decoration-thickness: 1px;
}

.entry-content ul,
.entry-content ol {
	padding-left: 1.4rem;
}

.entry-content ul {
	list-style: disc;
}

.entry-content ol {
	list-style: decimal;
}

.entry-content li {
	margin-bottom: 0.5rem;
}

.entry-content blockquote {
	margin: 2.5rem 0;
	padding-left: 1.75rem;
	border-left: 2px solid var(--bh-gold);
	font-family: var(--bh-font-display);
	font-size: 1.35rem;
	font-style: italic;
	color: var(--bh-text-soft);
}

.entry-content img,
.entry-content .wp-block-image img {
	border-radius: var(--bh-radius-sm);
}

.entry-content code,
.entry-content pre {
	background: var(--bh-canvas-3);
	border-radius: var(--bh-radius-xs);
	font-size: 0.875em;
}

.entry-content code {
	padding: 0.15em 0.4em;
}

.entry-content pre {
	padding: 1.25rem;
	overflow-x: auto;
}

.entry-content table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9rem;
}

.entry-content th,
.entry-content td {
	padding: 0.75rem 1rem;
	border: 1px solid var(--bh-line);
	text-align: left;
}

.entry-content th {
	background: var(--bh-canvas-2);
	font-weight: 600;
}

.entry__thumb {
	margin-bottom: 2.5rem;
}

.entry__thumb img {
	width: 100%;
	border-radius: var(--bh-radius-sm);
	box-shadow: var(--bh-e3);
}

.entry__footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	margin-top: 3rem;
	padding-top: 1.75rem;
	border-top: 1px solid var(--bh-line);
}

.entry__tags-label {
	font-size: 0.66rem;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--bh-text-muted);
}

.entry__tags a {
	display: inline-block;
	margin: 0 0.35rem 0.35rem 0;
	padding: 0.3rem 0.85rem;
	border: 1px solid var(--bh-line-strong);
	border-radius: var(--bh-radius-pill);
	font-size: 0.72rem;
}

.entry__tags a:hover {
	border-color: var(--bh-gold);
	color: var(--bh-gold);
}

.post-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
	margin: 0 0 1rem;
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	color: var(--bh-text-muted);
}

.post-meta li {
	display: flex;
	align-items: center;
	gap: 0.4rem;
}

.post-meta .icon {
	color: var(--bh-gold);
}

.post-meta a:hover {
	color: var(--bh-gold);
}

/* Post navigation ---------------------------------------------------------- */

.post-nav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.5rem;
	margin-top: 3rem;
	padding-top: 2rem;
	border-top: 1px solid var(--bh-line);
}

.post-nav__item span {
	display: block;
	margin-bottom: 0.4rem;
	font-size: 0.62rem;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--bh-gold);
}

.post-nav__item a {
	font-family: var(--bh-font-display);
	font-size: 1.2rem;
}

.post-nav__item a:hover {
	color: var(--bh-gold);
}

.post-nav__item--next {
	text-align: right;
}

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

.search-results {
	display: grid;
	gap: 1.5rem;
}

.result {
	padding-bottom: 1.5rem;
	border-bottom: 1px solid var(--bh-line);
}

.result__type {
	margin: 0 0 0.4rem;
	font-size: 0.62rem;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--bh-gold);
}

.result__title {
	margin: 0 0 0.5rem;
	font-size: 1.5rem;
}

.result__title a:hover {
	color: var(--bh-gold);
}

.result__excerpt {
	margin: 0;
	font-size: 0.9rem;
	color: var(--bh-text-soft);
}

/* Widgets ------------------------------------------------------------------ */

.widget-area {
	display: grid;
	gap: 2.5rem;
}

.widget__title {
	margin: 0 0 1.25rem;
	font-family: var(--bh-font-label);
	font-size: 0.66rem;
	font-weight: 600;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--bh-gold);
}

.widget ul {
	display: grid;
	gap: 0.75rem;
	font-size: 0.9rem;
}

.widget a:hover {
	color: var(--bh-gold);
}

/* Pagination --------------------------------------------------------------- */

.pagination {
	margin-top: clamp(2.5rem, 5vw, 4rem);
}

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: center;
}

.pagination .page-numbers {
	display: grid;
	place-content: center;
	min-width: 2.75rem;
	height: 2.75rem;
	padding-inline: 0.75rem;
	border: 1px solid var(--bh-line-strong);
	border-radius: var(--bh-radius-xs);
	font-size: 0.8rem;
	transition: color 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
}

.pagination .page-numbers:hover,
.pagination .page-numbers.current {
	background: var(--bh-gold);
	border-color: var(--bh-gold);
	color: var(--bh-on-gold);
}

/* Comments ----------------------------------------------------------------- */

.comments-area {
	max-width: var(--bh-container-text);
	margin-top: 4rem;
	padding-top: 2.5rem;
	border-top: 1px solid var(--bh-line);
}

.comments-title,
.comment-reply-title {
	margin: 0 0 2rem;
	font-size: 1.75rem;
}

.comment-list {
	display: grid;
	gap: 2rem;
	margin-bottom: 3rem;
}

.comment-list .children {
	display: grid;
	gap: 2rem;
	margin-top: 2rem;
	padding-left: clamp(1rem, 4vw, 3rem);
	border-left: 1px solid var(--bh-line);
}

.comment__head {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	margin-bottom: 0.85rem;
}

.comment__head img {
	border-radius: 50%;
}

.comment__name {
	font-weight: 600;
	font-size: 0.9rem;
}

.comment__date {
	display: block;
	font-size: 0.68rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--bh-text-muted);
}

.comment__body {
	font-size: 0.95rem;
	color: var(--bh-text-soft);
}

.comment-reply-link {
	display: inline-block;
	margin-top: 0.75rem;
	font-size: 0.66rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--bh-gold);
}

.comment-form {
	display: grid;
	gap: 1.25rem;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%;
	padding: 0.9rem 1.15rem;
	background: var(--bh-surface, var(--bh-pearl));
	border: 1px solid var(--bh-line-strong);
	border-radius: var(--bh-radius-xs);
	transition: border-color 0.35s ease;
}

.comment-form input:focus,
.comment-form textarea:focus {
	outline: none;
	border-color: var(--bh-gold);
}

.comment-form label {
	display: block;
	margin-bottom: 0.4rem;
	font-size: 0.72rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--bh-text-muted);
}

.comment-form .submit {
	justify-self: start;
	padding: 0.95rem 2.1rem;
	background: var(--bh-gold);
	color: var(--bh-on-gold);
	border: 0;
	border-radius: var(--bh-radius-xs);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	transition: transform 0.35s var(--bh-ease), box-shadow 0.35s var(--bh-ease);
}

.comment-form .submit:hover {
	transform: translateY(-3px);
	box-shadow: var(--bh-e3);
}

/* =============================================================================
   12  MOTION & REVEAL
   ========================================================================== */

/*
 * Scoped to .bh-js (set inline in the head) so content is never hidden behind
 * an animation that cannot run. The body class alone is not enough — it is
 * emitted by PHP and would still apply with scripting disabled.
 */
.bh-js .has-animations [data-reveal] {
	opacity: 0;
	transform: translateY(2rem);
	transition: opacity 0.9s var(--bh-ease-out), transform 0.9s var(--bh-ease-out);
	transition-delay: calc(var(--bh-delay, 0) * 90ms);
}

.bh-js .has-animations [data-reveal].is-revealed {
	opacity: 1;
	transform: none;
}

/* Respect the visitor's system setting above every theme option. */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}

	.has-animations [data-reveal] {
		opacity: 1;
		transform: none;
	}

	.hero--cinematic {
		height: auto;
	}

	.hero__stage {
		position: relative;
		height: auto;
		min-height: 0;
		padding-block: clamp(5rem, 12vw, 9rem);
	}

	.hero__intro {
		opacity: 1;
		transform: none;
	}

	.hero__outro,
	.hero__scroll,
	.marquee__track {
		display: none;
	}
}

/* =============================================================================
   13  RESPONSIVE
   ========================================================================== */

@media (max-width: 1100px) {
	.layout {
		grid-template-columns: minmax(0, 1fr);
	}

	.project-single__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.project-facts {
		position: static;
	}
}

/* Call button — mobile only; the desktop top bar already shows the number. */
.icon-btn--call {
	display: none;
}

@media (max-width: 900px) {
	/*
	 * Mobile header.
	 *
	 * The top bar was costing 45px to display two bare icons — its
	 * announcement and its link text are both hidden at this width, so it was
	 * pure overhead on the smallest screens. Dropping it and moving the phone
	 * number into the bar itself reclaims that height AND makes calling a
	 * one-tap action, which is the thing a visitor on a phone most wants.
	 *
	 * Chrome drops from 126px (15% of an iPhone screen) to roughly 68px.
	 */
	.topbar {
		display: none;
	}

	.site-header__cta {
		display: none;
	}

	.site-header__inner {
		min-height: 4.25rem;
		gap: 1rem;
	}

	/* A larger mark, so the brand holds its side of a narrow bar. */
	.brand img,
	.brand .custom-logo {
		max-height: 2.75rem;
	}

	.brand__mark {
		width: 2.4rem;
		height: 2.4rem;
		font-size: 1.05rem;
	}

	.brand__name {
		font-size: 1.15rem;
		letter-spacing: 0.14em;
	}

	.site-header__actions {
		gap: 0.35rem;
	}

	.icon-btn--call {
		display: grid;
		background: var(--bh-gold);
		color: var(--bh-on-gold);
	}

	.icon-btn--call:hover,
	.icon-btn--call:focus-visible {
		background: var(--bh-gold-soft);
		color: var(--bh-on-gold);
	}

	/* A hairline that only appears once the bar is doing its pinned job. */
	.site-header.is-stuck {
		box-shadow: 0 6px 24px rgba(var(--bh-ink-rgb), 0.5);
	}

	.nav-toggle {
		display: flex;
	}

	/*
	 * The glass effect has to go on mobile. backdrop-filter makes an element the
	 * containing block for its position:fixed descendants, so with it applied the
	 * full-screen menu sized itself against the 81px header instead of the
	 * viewport — a stunted panel hanging off the top of the page. A solid bar
	 * reads just as well at this width and costs less to composite.
	 */
	.site-header,
	.site-header.is-stuck {
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		background: var(--bh-ink);
	}

	/*
	 * Full-screen menu rather than a side drawer. On a phone the drawer left a
	 * sliver of the page visible behind it, which read as an accident; taking
	 * the whole screen makes the menu feel like a place rather than a panel.
	 */
	.nav {
		position: fixed;
		inset: 0;
		z-index: 150;
		display: grid;
		/*
		 * "safe" centring is the whole point here. Plain `center` pushes the
		 * overflow equally in both directions when the menu is taller than the
		 * screen, so the first items end up above the top edge where scrolling
		 * cannot reach them. `safe center` falls back to start-alignment the
		 * moment it would overflow. The unprefixed value is declared first as a
		 * fallback for engines that do not understand the keyword.
		 */
		align-content: center;
		align-content: safe center;
		justify-items: center;
		padding: 5.25rem 1.5rem 2rem;
		overscroll-behavior: contain;
		background: var(--bh-ink);
		opacity: 0;
		visibility: hidden;
		/*
		 * pointer-events, not just visibility. Visibility is transitioned, and
		 * for the length of that transition the full-screen overlay still sits
		 * over the header swallowing clicks — including the click on the
		 * hamburger that is meant to open it.
		 */
		pointer-events: none;
		transform: scale(1.04);
		transition: opacity 0.45s var(--bh-ease), transform 0.5s var(--bh-ease), visibility 0.5s;
		overflow-y: auto;
	}

	.nav.is-open {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: none;
	}

	/*
	 * Keep the toggle above the overlay so the same button closes what it
	 * opened. Both live inside the header's stacking context, so a plain
	 * z-index bump is enough — it does not need to escape the header.
	 */
	.nav-toggle {
		position: relative;
		z-index: 200;
	}

	.site-header__actions {
		position: relative;
		z-index: 200;
	}

	.nav__list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		width: min(26rem, 100%);
		counter-reset: nav-item;
	}

	.nav__list > li {
		width: 100%;
		border-bottom: 1px solid var(--bh-line-on-ink);
		text-align: left;
	}

	/* Top-level items become display type — the menu is the page here. */
	.nav__list > li > a {
		display: flex;
		align-items: baseline;
		gap: 0.9rem;
		padding-block: 0.7rem;
		font-family: var(--bh-font-display);
		font-size: 1.32rem;
		font-weight: 400;
		letter-spacing: 0.04em;
		text-transform: none;
		color: var(--bh-text-on-ink);
	}

	/* Gold index numeral, counted so it survives menu edits. */
	.nav__list > li > a::before {
		counter-increment: nav-item;
		content: counter( nav-item, decimal-leading-zero );
		font-family: var(--bh-font-label);
		font-size: 0.6rem;
		font-weight: 600;
		letter-spacing: 0.2em;
		color: var(--bh-gold);
	}

	.nav__list > li > a::after {
		display: none; /* The desktop underline has no place at this size. */
	}

	/* Children are always visible — a dropdown inside an overlay is a trap. */
	.nav__list .sub-menu {
		display: grid;
		gap: 0;
		padding: 0 0 0.6rem 2.1rem;
	}

	.nav__list .sub-menu a {
		padding-block: 0.32rem;
		font-family: var(--bh-font-label);
		font-size: 0.66rem;
		letter-spacing: 0.16em;
		text-transform: uppercase;
		color: var(--bh-text-on-ink-muted);
	}

	.nav__list .sub-menu a:hover {
		color: var(--bh-gold);
	}

	/* Contact block beneath the menu. */
	.nav__foot {
		display: grid;
		justify-items: start;
		gap: 0.55rem;
		width: min(26rem, 100%);
		margin-top: 1.4rem;
	}

	.nav__phone {
		display: inline-flex;
		align-items: center;
		gap: 0.6rem;
		font-family: var(--bh-font-display);
		font-size: 1.28rem;
		color: var(--bh-gold);
	}

	.nav__email {
		font-size: 0.9rem;
		color: var(--bh-text-on-ink-soft);
	}

	.social--nav {
		margin-top: 0.5rem;
	}

	.social--nav a {
		border-radius: 0;
		border-color: var(--bh-line-on-ink);
	}

	/* Stagger the items in as the overlay opens. */
	.nav.is-open .nav__list > li {
		animation: bh-menu-in 0.5s var(--bh-ease-out) backwards;
	}

	.nav.is-open .nav__list > li:nth-child(1) { animation-delay: 0.06s; }
	.nav.is-open .nav__list > li:nth-child(2) { animation-delay: 0.12s; }
	.nav.is-open .nav__list > li:nth-child(3) { animation-delay: 0.18s; }
	.nav.is-open .nav__list > li:nth-child(4) { animation-delay: 0.24s; }
	.nav.is-open .nav__list > li:nth-child(5) { animation-delay: 0.30s; }
	.nav.is-open .nav__list > li:nth-child(6) { animation-delay: 0.36s; }
	.nav.is-open .nav__list > li:nth-child(7) { animation-delay: 0.42s; }

	@keyframes bh-menu-in {
		from { opacity: 0; transform: translateY(1rem); }
		to   { opacity: 1; transform: none; }
	}

	.brand__tagline {
		display: none;
	}

	.footer-main__grid {
		grid-template-columns: 1fr 1fr;
	}

	.nav__list .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		border: 0;
		background: transparent;
		padding: 0 0 0.75rem 1rem;
		min-width: 0;
	}

	.intro__grid,
	.contact__grid,
	.newsletter__inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.intro__media-frame {
		display: none;
	}

	.process__step::before {
		display: none;
	}

	.footer-main__grid {
		grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	}
}

@media (max-width: 640px) {
	:root {
		--bh-tracking-label: 0.3em;
	}

	/*
	 * Mobile hero.
	 *
	 * A phone has no pointer to drive the camera and far less room, so the
	 * scene is flattened deliberately: shorter track, no depth tilt, and the
	 * headline sized against height as well as width. What is left is a
	 * legible full-screen cover with a slow push-in, which is what actually
	 * reads well at this size.
	 */
	.hero--cinematic {
		height: 165vh;
	}

	.hero__stage {
		min-height: 30rem;
	}

	/* No pointer parallax; keep only the scroll dolly, and gently. */
	.hero__scene {
		transform:
			translateZ( calc( var(--bh-scroll) * 180px ) )
			translateY( calc( var(--bh-scroll) * -4vh ) );
	}

	/* Shallower depth so the counter-scale does not blow the backdrop up. */
	.hero__backdrop { --z: -420; --zoom: 0.14; --bleed: 70px; }
	.hero__haze     { --z: -260; --zoom: 0.10; --bleed: 50px; }
	.hero__grid     { --z: -150; --zoom: 0.07; --bleed: 36px; }
	.hero__plate    { --z:  -60; --zoom: 0.04; --bleed: 18px; }
	.hero__content  { --z:   60; }

	.hero__content {
		/* The counter-rotation needs a pointer to make sense of it. */
		transform:
			translateZ( calc( var(--z) * 1px ) )
			scale( calc( 1 - ( var(--z) / var(--persp) ) ) );
	}

	/* Line depth reads as mismatched type at this size. */
	.hero__line:nth-child(1),
	.hero__line:nth-child(2),
	.hero__line:nth-child(3) {
		transform: none;
	}

	.hero__title {
		font-size: clamp(2.1rem, min(11vw, 9.5vh), 3.4rem);
	}

	.hero__quote {
		font-size: 1rem;
	}

	.hero__sub {
		font-size: 0.68rem;
		letter-spacing: 0.14em;
	}

	/* Full-width buttons, so they stack as an even pair. */
	.hero__actions {
		flex-direction: column;
		align-items: stretch;
		gap: 0.75rem;
	}

	.hero__actions .btn {
		width: 100%;
		justify-content: center;
	}

	.hero__badge {
		font-size: 0.6rem;
	}

	.hero__badge-rule {
		width: 1rem;
	}

	.topbar__contact a span {
		display: none;
	}

	.post-nav {
		grid-template-columns: minmax(0, 1fr);
	}

	.post-nav__item--next {
		text-align: left;
	}

	.newsletter__form {
		grid-template-columns: minmax(0, 1fr);
	}

	.fab__text {
		display: none;
	}

	.fab {
		padding: 0.6rem;
	}

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

@media print {
	.site-header,
	.topbar,
	.site-footer,
	.to-top,
	.fab,
	.cursor,
	.cursor-dot,
	.preloader,
	.hero__scroll {
		display: none !important;
	}

	body {
		background: #fff;
		color: #000;
	}
}