/* ==========================================================================
   HBFS Studio — cinematic system
   Hummingbird Film Studios Inc.

   Balance target: 55% black/charcoal, 25% photography, 15% warm ivory,
   4% crimson, 1% gold. Crimson carries action. Gold is reserved for
   hairlines, micro-labels and small marks — never large fills.
   ========================================================================== */

:root {
	--hbfs-black: #08090a;
	--hbfs-charcoal: #141416;
	--hbfs-border: #2b2928;
	--hbfs-ivory: #f7f3eb;
	--hbfs-ivory-warm: #f5f1e8;
	--hbfs-gray: #aaa6a0;
	--hbfs-near-black: #171719;
	--hbfs-crimson: #be1230;
	--hbfs-crimson-deep: #8e0d24;
	--hbfs-gold: #c39a47;

	--hbfs-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--hbfs-slow: 900ms;
	--hbfs-gutter: clamp(1.25rem, 5vw, 4.5rem);
	--hbfs-section-y: clamp(4.5rem, 9vw, 8.5rem);
	--hbfs-header-h: 84px;
}

/* --------------------------------------------------------------------------
   1. Base
   -------------------------------------------------------------------------- */

body.hbfs {
	background-color: var(--hbfs-black);
	color: var(--hbfs-ivory);
	font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	font-weight: 400;
	line-height: 1.65;
	letter-spacing: 0.005em;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: clip;
}

.hbfs h1,
.hbfs h2,
.hbfs h3,
.hbfs h4 {
	font-weight: 600;
	letter-spacing: -0.022em;
	line-height: 1.1;
	text-wrap: balance;
}

.hbfs p {
	text-wrap: pretty;
}

/* Extremely light film grain. Present, never dirty, never retro. */
body.hbfs::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 9999;
	pointer-events: none;
	opacity: 0.025;
	mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml,%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");
}

.hbfs :is(a, button, input, select, textarea):focus-visible {
	outline: 2px solid var(--hbfs-gold);
	outline-offset: 3px;
}

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

/* --------------------------------------------------------------------------
   2. Editorial marks — micro-labels, numbers, hairlines
   -------------------------------------------------------------------------- */

.hbfs-label {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--hbfs-gray);
	margin: 0 0 clamp(1rem, 2vw, 1.75rem);
	display: flex;
	align-items: center;
	gap: 0.75em;
}

.hbfs-label--gold {
	color: var(--hbfs-gold);
}

/*
 * Optical alignment: large display type is set with negative letter-spacing,
 * which pulls its first glyph very slightly left of the true text edge. The
 * micro-label above it is nudged by the same amount so the two share a visually
 * straight left edge rather than a mathematically straight one.
 */
.hbfs-label,
.hbfs-textlink {
	margin-left: 0;
	padding-left: 0;
	text-indent: -0.04em;
}

.hbfs-num {
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	color: var(--hbfs-gold);
	letter-spacing: 0.04em;
}

.hbfs-label .hbfs-num::after {
	content: "";
	display: inline-block;
	width: 2.25rem;
	height: 1px;
	margin-left: 0.75em;
	vertical-align: middle;
	background: var(--hbfs-crimson);
}

.hbfs-hair {
	display: block;
	width: 64px;
	height: 1px;
	background: var(--hbfs-gold);
	margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

.hbfs-display {
	font-size: clamp(1.9rem, 4.4vw, 3.6rem);
	line-height: 1.06;
	letter-spacing: -0.03em;
	max-width: 20ch;
	margin: 0 0 clamp(1.25rem, 2.5vw, 2rem);
}

.hbfs-lede {
	font-size: clamp(1.0625rem, 1.5vw, 1.3rem);
	color: var(--hbfs-gray);
	max-width: 56ch;
}

.hbfs-textlink a {
	color: var(--hbfs-ivory);
	font-weight: 600;
	letter-spacing: 0.02em;
	text-decoration: none;
	padding-bottom: 0.35em;
	border-bottom: 1px solid var(--hbfs-crimson);
	transition: border-color 240ms var(--hbfs-ease), color 240ms var(--hbfs-ease);
}

.hbfs-textlink a:hover {
	color: var(--hbfs-gold);
	border-bottom-color: var(--hbfs-gold);
}

/* --------------------------------------------------------------------------
   3. Section rhythm — alternating dark and warm ivory
   -------------------------------------------------------------------------- */

.hbfs-section {
	padding: var(--hbfs-section-y) var(--hbfs-gutter);
	position: relative;
}

.hbfs-section--flush {
	padding-left: 0;
	padding-right: 0;
}

.hbfs-section--black {
	background: var(--hbfs-black);
}

.hbfs-section--charcoal {
	background: var(--hbfs-charcoal);
}

.hbfs-section--ivory {
	background: var(--hbfs-ivory-warm);
	color: var(--hbfs-near-black);
}

.hbfs-section--ivory :is(h1, h2, h3, h4) {
	color: var(--hbfs-near-black);
}

.hbfs-section--ivory .hbfs-label {
	color: #6b665f;
}

.hbfs-section--ivory .hbfs-lede,
.hbfs-section--ivory p {
	color: #47433e;
}

.hbfs-section--ivory .hbfs-textlink a {
	color: var(--hbfs-near-black);
}

/* Asymmetry: no two adjacent sections share the same text/image rhythm. */
.hbfs-split {
	gap: clamp(2rem, 5vw, 5rem);
	align-items: start;
}

.hbfs-split__aside {
	padding-top: clamp(0.5rem, 2.5vw, 2.75rem);
}

.hbfs-split__aside p {
	color: var(--hbfs-gray);
	max-width: 46ch;
}

/* --------------------------------------------------------------------------
   4. Header — transparent over the hero, warm charcoal once scrolled
   -------------------------------------------------------------------------- */

.hbfs .site-header {
	position: fixed;
	inset: 0 0 auto;
	z-index: 900;
	background: transparent;
	border-bottom: 1px solid transparent;
	transition: background-color 420ms var(--hbfs-ease), border-color 420ms var(--hbfs-ease), backdrop-filter 420ms var(--hbfs-ease);
}

.hbfs .site-header .inside-header {
	padding-top: 1.15rem;
	padding-bottom: 1.15rem;
}

.hbfs.hbfs-scrolled .site-header {
	background: rgba(20, 20, 22, 0.92);
	backdrop-filter: saturate(140%) blur(10px);
	border-bottom-color: var(--hbfs-border);
}

/* Pages without a hero start on charcoal so the nav is always legible. */
.hbfs:not(.hbfs-has-hero) .site-header {
	background: var(--hbfs-charcoal);
	border-bottom-color: var(--hbfs-border);
}

.hbfs:not(.hbfs-has-hero) .site-content {
	padding-top: var(--hbfs-header-h);
}

/* Optional warm-ivory header treatment for the colour logo. */
.hbfs.hbfs-header-light .site-header,
.hbfs.hbfs-header-light.hbfs-scrolled .site-header {
	background: var(--hbfs-ivory-warm);
	border-bottom-color: rgba(23, 23, 25, 0.12);
	backdrop-filter: none;
}

.hbfs.hbfs-header-light .main-navigation a {
	color: var(--hbfs-near-black);
}

/*
 * Logo: generous clear space, never distorted, never recreated in text.
 * The wordmark already says "Hummingbird Film Studios Inc.", so GeneratePress's
 * text site title and tagline are suppressed — printing both duplicates the
 * name next to the mark and breaks the logo's clear space.
 */
body.hbfs .site-branding,
body.hbfs .main-title,
body.hbfs .site-description {
	display: none;
}

.hbfs .site-logo img {
	width: auto;
	height: clamp(35px, 3.9vw, 48px);
	max-width: none;
	padding: 0.25rem 0;
}

.hbfs .main-navigation,
.hbfs .main-navigation .main-nav ul li a {
	background: transparent;
	color: var(--hbfs-ivory);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.hbfs .main-navigation .main-nav ul li a {
	position: relative;
}

.hbfs .main-navigation .main-nav ul li a::after {
	content: "";
	position: absolute;
	left: 20px;
	right: 20px;
	bottom: 22px;
	height: 1px;
	background: var(--hbfs-crimson);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 280ms var(--hbfs-ease);
}

.hbfs .main-navigation .main-nav ul li:hover > a::after,
.hbfs .main-navigation .main-nav ul li.current-menu-item > a::after {
	transform: scaleX(1);
}

/* Persistent Start a Project CTA in the menu: add class "hbfs-nav-cta". */
.hbfs .main-navigation .main-nav ul li.hbfs-nav-cta > a {
	background: var(--hbfs-crimson);
	color: var(--hbfs-ivory);
	margin: 0 0 0 0.75rem;
}

.hbfs .main-navigation .main-nav ul li.hbfs-nav-cta > a:hover {
	background: var(--hbfs-crimson-deep);
}

.hbfs .main-navigation .main-nav ul li.hbfs-nav-cta > a::after {
	display: none;
}

/* --------------------------------------------------------------------------
   5. Hero
   -------------------------------------------------------------------------- */

.hbfs-hero {
	min-height: 100svh;
	display: grid;
	align-items: end;
	padding-bottom: clamp(3.5rem, 8vh, 7rem);
	padding-top: calc(var(--hbfs-header-h) + 2rem);
	isolation: isolate;
	overflow: clip;
}

.hbfs-hero--page {
	min-height: 62svh;
}

.hbfs-hero__media,
.hbfs-hero__picture {
	position: absolute;
	inset: 0;
	z-index: -1;
	display: block;
}

.hbfs-hero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.06);
	transition: transform 2400ms var(--hbfs-ease);
}

.hbfs-hero.is-revealed .hbfs-hero__img {
	transform: scale(1);
}

.hbfs-scrim {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to top, rgba(8, 9, 10, 0.94) 0%, rgba(8, 9, 10, 0.55) 42%, rgba(8, 9, 10, 0.18) 78%),
		linear-gradient(to right, rgba(8, 9, 10, 0.5), rgba(8, 9, 10, 0) 62%);
}

.hbfs-scrim--soft {
	background: linear-gradient(to right, rgba(8, 9, 10, 0.92) 0%, rgba(8, 9, 10, 0.72) 45%, rgba(8, 9, 10, 0.25) 100%);
}

/* Text sits centre-right so the subject on the left of the image stays clear. */
.hbfs-hero__inner {
	width: 100%;
	margin-inline: auto;
}

.hbfs-hero__title {
	font-size: clamp(2.75rem, 7.4vw, 6.25rem);
	line-height: 0.98;
	letter-spacing: -0.04em;
	margin: 0 0 clamp(1.25rem, 2.5vw, 2rem);
	max-width: 15ch;
}

.hbfs-hero__title--page {
	font-size: clamp(2.1rem, 5vw, 4rem);
	max-width: 18ch;
}

.hbfs-hero__lede {
	font-size: clamp(1rem, 1.4vw, 1.25rem);
	color: var(--hbfs-gray);
	max-width: 50ch;
	margin: 0 0 clamp(1.75rem, 3vw, 2.5rem);
}

.hbfs-hero__rule {
	position: absolute;
	left: var(--hbfs-gutter);
	right: var(--hbfs-gutter);
	bottom: 0;
	height: 1px;
	background: linear-gradient(to right, var(--hbfs-crimson) 0%, var(--hbfs-crimson) 12%, var(--hbfs-border) 12%, var(--hbfs-border) 100%);
}

/*
 * The hero shares the same left edge as every other section. The composition
 * stays cinematic through scale and the scrim rather than by shifting the text
 * across the page, which broke alignment with the sections below it.
 */
@media (min-width: 1025px) {
	.hbfs-hero__inner > * {
		max-width: 44ch;
	}

	.hbfs-hero__title {
		max-width: 14ch;
	}

	.hbfs-hero__lede {
		max-width: 46ch;
	}
}

/* --------------------------------------------------------------------------
   6. Buttons — crimson with ivory text. No gradients, no glow.
   -------------------------------------------------------------------------- */

.hbfs .wp-block-button__link {
	background: var(--hbfs-crimson);
	color: var(--hbfs-ivory);
	border-radius: 0;
	border: 1px solid var(--hbfs-crimson);
	padding: 1rem 2.1rem;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	transition: background-color 240ms var(--hbfs-ease), border-color 240ms var(--hbfs-ease), color 240ms var(--hbfs-ease);
}

.hbfs .wp-block-button__link:hover {
	background: var(--hbfs-crimson-deep);
	border-color: var(--hbfs-crimson-deep);
}

.hbfs .hbfs-btn-ghost .wp-block-button__link {
	background: transparent;
	border-color: var(--hbfs-border);
	color: var(--hbfs-ivory);
}

.hbfs .hbfs-btn-ghost .wp-block-button__link:hover {
	border-color: var(--hbfs-gold);
	color: var(--hbfs-gold);
	background: transparent;
}

.hbfs-section--ivory .hbfs-btn-ghost .wp-block-button__link {
	color: var(--hbfs-near-black);
	border-color: rgba(23, 23, 25, 0.25);
}

.hbfs-actions {
	gap: 0.75rem 1rem;
}

/* --------------------------------------------------------------------------
   7. Selected Work — horizontal poster track (desktop), stack (mobile)
   -------------------------------------------------------------------------- */

.hbfs-work {
	position: relative;
	margin: clamp(2.5rem, 5vw, 4rem) 0;
}

.hbfs-work__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(260px, 25vw);
	gap: clamp(1rem, 2vw, 2rem);
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scroll-padding-left: var(--hbfs-gutter);
	padding: 0 var(--hbfs-gutter) 1.25rem;
	scrollbar-width: thin;
	scrollbar-color: var(--hbfs-border) transparent;
	overscroll-behavior-x: contain;
}

.hbfs-work__item {
	scroll-snap-align: start;
}

.hbfs-work__link {
	display: block;
	text-decoration: none;
	color: inherit;
}

.hbfs-work__frame {
	display: block;
	position: relative;
	aspect-ratio: 2 / 3;
	overflow: hidden;
	background: var(--hbfs-charcoal);
	border: 1px solid var(--hbfs-border);
}

.hbfs-work__frame::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(8, 9, 10, 0.55), transparent 55%);
	opacity: 0;
	transition: opacity 420ms var(--hbfs-ease);
}

.hbfs-work__img {
	transition: transform 1200ms var(--hbfs-ease);
}

.hbfs-work__link:hover .hbfs-work__img {
	transform: scale(1.035);
}

.hbfs-work__link:hover .hbfs-work__frame::after {
	opacity: 1;
}

.hbfs-work__meta {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-top: 1.15rem;
	font-size: 0.7rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--hbfs-gray);
}

.hbfs-work__title {
	font-size: clamp(1.25rem, 1.7vw, 1.6rem);
	margin: 0.5rem 0 0.5rem;
}

.hbfs-work__link:hover .hbfs-work__title {
	color: var(--hbfs-gold);
}

.hbfs-work__excerpt {
	color: var(--hbfs-gray);
	font-size: 0.9375rem;
	margin: 0;
	max-width: 34ch;
}

.hbfs-work__controls {
	display: none;
	gap: 0.5rem;
	padding-inline: var(--hbfs-gutter);
}

.hbfs-work__btn {
	width: 44px;
	height: 44px;
	background: transparent;
	border: 1px solid var(--hbfs-border);
	color: var(--hbfs-ivory);
	cursor: pointer;
	transition: border-color 240ms var(--hbfs-ease), color 240ms var(--hbfs-ease);
}

.hbfs-work__btn:hover:not(:disabled) {
	border-color: var(--hbfs-gold);
	color: var(--hbfs-gold);
}

.hbfs-work__btn:disabled {
	opacity: 0.35;
	cursor: default;
}

@media (min-width: 1025px) {
	.hbfs-work__controls {
		display: flex;
	}
}

@media (max-width: 782px) {
	.hbfs-work__track {
		grid-auto-flow: row;
		grid-auto-columns: auto;
		overflow-x: visible;
		gap: clamp(2rem, 6vw, 3rem);
	}
}

/* --------------------------------------------------------------------------
   8. Capabilities list
   -------------------------------------------------------------------------- */

/*
 * Compact capability grid. The earlier stacked list ran the full height of the
 * screen for five short statements; this says the same thing in about a third
 * of the space and reads as a considered set rather than a long scroll.
 */
.hbfs-capgrid {
	display: grid;
	gap: 1px;
	background: rgba(23, 23, 25, 0.12);
	border: 1px solid rgba(23, 23, 25, 0.12);
	margin: clamp(2rem, 4vw, 3rem) 0 clamp(1.75rem, 3vw, 2.5rem);
}

.hbfs-cap {
	background: var(--hbfs-ivory-warm);
	padding: clamp(1.4rem, 2.4vw, 2rem);
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.hbfs-cap__num {
	margin: 0;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	color: var(--hbfs-crimson);
}

.hbfs-cap__title {
	font-size: clamp(1.0625rem, 1.35vw, 1.25rem);
	line-height: 1.25;
	margin: 0;
}

.hbfs-cap__text {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.55;
	max-width: 40ch;
}

@media (min-width: 700px) {
	.hbfs-capgrid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1025px) {
	.hbfs-capgrid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* --------------------------------------------------------------------------
   9. Signature statement
   -------------------------------------------------------------------------- */

.hbfs-statement {
	padding-block: clamp(6rem, 14vw, 12rem);
	text-align: left;
}

.hbfs-statement__text {
	font-size: clamp(1.75rem, 4vw, 3.25rem);
	line-height: 1.14;
	letter-spacing: -0.028em;
	margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
	max-width: 22ch;
}

.hbfs-statement__sub {
	color: var(--hbfs-gray);
	max-width: 54ch;
	margin: 0;
}

/* --------------------------------------------------------------------------
   10. Founder section
   -------------------------------------------------------------------------- */

.hbfs-section--founder {
	position: relative;
	isolation: isolate;
	padding-block: clamp(5rem, 12vw, 10rem);
	overflow: clip;
}

.hbfs-sectionbg {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.hbfs-sectionbg__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hbfs-founder__inner {
	position: relative;
}

.hbfs-founder__panel {
	max-width: 620px;
}

.hbfs-founder__panel p {
	color: var(--hbfs-gray);
}

/* --------------------------------------------------------------------------
   Founder portrait — Studio page only.
   Shown on a clean charcoal surface at full size, never cropped to a forced
   ratio and never layered over atmospheric imagery.
   -------------------------------------------------------------------------- */

.hbfs-founderpage__media {
	align-self: start;
}

.hbfs-founder__portrait {
	margin: 0;
	position: relative;
	max-width: 460px;
}

.hbfs-founder__portrait .hbfs-img,
.hbfs-founder__portraitimg {
	width: 100%;
	height: auto;
	aspect-ratio: auto;
	object-fit: contain;
	display: block;
}

.hbfs-founder__portrait::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -10px;
	width: 40%;
	height: 2px;
	background: var(--hbfs-crimson);
}

@media (max-width: 860px) {
	.hbfs-founder__portrait {
		margin-top: clamp(2rem, 5vw, 3rem);
		max-width: 340px;
	}
}

/* Legacy homepage placement, retained only as a safety net. */
.hbfs-section--founder .hbfs-founder__portrait {
	display: none;
}

.hbfs-founder__portrait--legacy {
	margin: clamp(2.5rem, 5vw, 0) 0 0;
	max-width: 320px;
	position: relative;
}

.hbfs-founder__portrait::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 44%;
	height: 2px;
	background: var(--hbfs-crimson);
}

/* --------------------------------------------------------------------------
   10b. Clients and partners band
   -------------------------------------------------------------------------- */

.hbfs-clients {
	background: var(--hbfs-charcoal);
	padding: clamp(3rem, 6vw, 5rem) var(--hbfs-gutter);
	border-top: 1px solid var(--hbfs-border);
}

.hbfs-clients__inner {
	max-width: 1360px;
	margin-inline: auto;
}

.hbfs-clients .hbfs-partners {
	margin-top: clamp(1.5rem, 3vw, 2.5rem);
	gap: clamp(2rem, 5vw, 4.5rem);
}

.hbfs-clients .hbfs-partnerlogo {
	max-width: 150px;
	max-height: 52px;
}

/* --------------------------------------------------------------------------
   11. Journey timeline
   -------------------------------------------------------------------------- */

.hbfs-journey {
	list-style: none;
	margin: clamp(2.5rem, 5vw, 4rem) 0 0;
	padding: 0;
	display: grid;
	gap: 0;
	counter-reset: journey;
}

.hbfs-journey__item {
	display: grid;
	gap: 0.5rem clamp(2rem, 5vw, 5rem);
	padding: clamp(1.5rem, 3vw, 2.25rem) 0;
	border-top: 1px solid var(--hbfs-border);
	position: relative;
}

.hbfs-journey__item::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 0;
	width: 34px;
	height: 1px;
	background: var(--hbfs-gold);
}

.hbfs-journey__marker {
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--hbfs-gold);
}

.hbfs-journey__body p {
	margin: 0;
	color: var(--hbfs-gray);
	max-width: 60ch;
}

@media (min-width: 861px) {
	.hbfs-journey__item {
		grid-template-columns: 260px minmax(0, 1fr);
	}
}

/* --------------------------------------------------------------------------
   12. Ventures
   -------------------------------------------------------------------------- */

.hbfs-ventures {
	display: grid;
	gap: 1px;
	background: var(--hbfs-border);
	border: 1px solid var(--hbfs-border);
	margin: clamp(2.5rem, 5vw, 4rem) 0;
}

.hbfs-venture {
	background: var(--hbfs-charcoal);
	padding: clamp(1.75rem, 3.5vw, 3rem);
	transition: background-color 320ms var(--hbfs-ease);
}

.hbfs-venture:hover {
	background: #17171a;
}

.hbfs-venture__logo {
	margin-bottom: 1.5rem;
	min-height: 40px;
	display: flex;
	align-items: center;
}

.hbfs-partnerlogo {
	width: auto;
	max-width: 180px;
	max-height: 44px;
	height: auto;
	object-fit: contain;
}

.hbfs-venture__title {
	font-size: clamp(1.2rem, 1.8vw, 1.5rem);
	margin: 0 0 0.75rem;
}

.hbfs-venture__title a {
	text-decoration: none;
	color: inherit;
}

.hbfs-venture__title a:hover {
	color: var(--hbfs-gold);
}

.hbfs-venture__text {
	color: var(--hbfs-gray);
	margin: 0;
	font-size: 0.9375rem;
}

.hbfs-venture__note {
	margin: 1rem 0 0;
	padding-top: 1rem;
	border-top: 1px solid var(--hbfs-border);
	font-size: 0.8125rem;
	color: var(--hbfs-gold);
}

@media (min-width: 861px) {
	.hbfs-ventures {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* --------------------------------------------------------------------------
   13. Panels, journal, partners
   -------------------------------------------------------------------------- */

.hbfs-panel {
	background: var(--hbfs-charcoal);
	padding: clamp(2.5rem, 6vw, 5rem);
	border-left: 2px solid var(--hbfs-crimson);
}

.hbfs-panel--crimson .hbfs-lede {
	max-width: 60ch;
	margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}

.hbfs-journal {
	display: grid;
	gap: clamp(2rem, 4vw, 3rem);
	margin: clamp(2.5rem, 5vw, 4rem) 0;
}

.hbfs-journal__media {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	margin-bottom: 1.25rem;
	border: 1px solid var(--hbfs-border);
}

.hbfs-journal__img {
	transition: transform 1000ms var(--hbfs-ease);
}

.hbfs-journal__item:hover .hbfs-journal__img {
	transform: scale(1.03);
}

.hbfs-journal__title {
	font-size: clamp(1.1rem, 1.5vw, 1.35rem);
	margin: 0 0 0.6rem;
}

.hbfs-journal__title a {
	text-decoration: none;
	color: inherit;
}

.hbfs-journal__title a:hover {
	color: var(--hbfs-gold);
}

.hbfs-journal__excerpt {
	color: var(--hbfs-gray);
	font-size: 0.9375rem;
	margin: 0;
}

@media (min-width: 861px) {
	.hbfs-journal {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.hbfs-partners {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(1.75rem, 4vw, 3.5rem);
	margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

.hbfs-partner {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	filter: grayscale(1);
	opacity: 0.75;
	transition: filter 320ms var(--hbfs-ease), opacity 320ms var(--hbfs-ease);
}

.hbfs-partner:hover {
	filter: none;
	opacity: 1;
}

.hbfs-partner__rel {
	font-size: 0.6875rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--hbfs-gray);
}

/* --------------------------------------------------------------------------
   14. Case study, gallery, trailer facade
   -------------------------------------------------------------------------- */

.hbfs-case__statement {
	font-size: clamp(1.25rem, 2.2vw, 1.75rem);
	line-height: 1.35;
	letter-spacing: -0.018em;
	color: var(--hbfs-ivory);
	padding-left: 1.25rem;
	border-left: 2px solid var(--hbfs-crimson);
	margin-bottom: clamp(2rem, 4vw, 3rem);
}

.hbfs-case__h {
	font-size: 0.75rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--hbfs-gold);
	margin-top: clamp(2rem, 4vw, 3rem);
}

.hbfs-gallery-grid {
	display: grid;
	gap: 1px;
	background: var(--hbfs-border);
}

.hbfs-gallery-grid__item {
	margin: 0;
	background: var(--hbfs-black);
}

.hbfs-gallery-grid figcaption {
	font-size: 0.8125rem;
	color: var(--hbfs-gray);
	padding: 0.75rem 1rem 1.25rem;
}

@media (min-width: 861px) {
	.hbfs-gallery-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.hbfs-trailer {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--hbfs-charcoal);
}

.hbfs-trailer__poster {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hbfs-trailer__play {
	position: absolute;
	inset: auto auto 2rem 2rem;
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.9rem 1.6rem;
	background: var(--hbfs-crimson);
	color: var(--hbfs-ivory);
	border: 0;
	font: inherit;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	cursor: pointer;
}

.hbfs-trailer__play:hover {
	background: var(--hbfs-crimson-deep);
}

.hbfs-trailer__icon {
	width: 0;
	height: 0;
	border-left: 10px solid currentColor;
	border-top: 6px solid transparent;
	border-bottom: 6px solid transparent;
}

.hbfs-trailer iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.hbfs-credits-list {
	margin: 1.5rem 0 0;
}

.hbfs-credits-list__row {
	display: grid;
	gap: 0.25rem 2rem;
	padding: 0.85rem 0;
	border-bottom: 1px solid var(--hbfs-border);
}

.hbfs-credits-list dt {
	font-size: 0.75rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--hbfs-gray);
}

.hbfs-credits-list dd {
	margin: 0;
}

@media (min-width: 641px) {
	.hbfs-credits-list__row {
		grid-template-columns: 220px minmax(0, 1fr);
	}
}

/* --------------------------------------------------------------------------
   15. Footer
   -------------------------------------------------------------------------- */

.hbfs-footer {
	background: var(--hbfs-black);
	border-top: 1px solid var(--hbfs-border);
	padding: clamp(3.5rem, 7vw, 6rem) var(--hbfs-gutter) clamp(2rem, 4vw, 3rem);
}

.hbfs-footer__mark {
	width: auto;
	height: 38px;
	margin-bottom: 1.5rem;
}

.hbfs-footer__blurb {
	color: var(--hbfs-gray);
	max-width: 46ch;
	font-size: 0.9375rem;
}

.hbfs-footer__nav a {
	color: var(--hbfs-ivory);
	text-decoration: none;
	font-size: 0.875rem;
}

.hbfs-footer__nav a:hover {
	color: var(--hbfs-gold);
}

.hbfs-footer__legal a,
.hbfs-footer__base {
	color: var(--hbfs-gray);
	font-size: 0.8125rem;
}

.hbfs-footer__base {
	margin-top: clamp(2.5rem, 5vw, 4rem);
	padding-top: 1.5rem;
	border-top: 1px solid var(--hbfs-border);
}

/* --------------------------------------------------------------------------
   15b. Site footer — rendered automatically on every page
   -------------------------------------------------------------------------- */

/* GeneratePress credit bar is removed in PHP; this is belt and braces. */
body.hbfs .site-info,
body.hbfs .copyright-bar {
	display: none;
}

.hbfs-sitefooter {
	position: relative;
	background: var(--hbfs-black);
	padding: clamp(3.5rem, 7vw, 6.5rem) var(--hbfs-gutter) clamp(1.75rem, 3vw, 2.5rem);
}

.hbfs-sitefooter__rule {
	position: absolute;
	top: 0;
	left: var(--hbfs-gutter);
	right: var(--hbfs-gutter);
	height: 1px;
	background: linear-gradient(to right, var(--hbfs-crimson) 0%, var(--hbfs-crimson) 9%, var(--hbfs-border) 9%, var(--hbfs-border) 100%);
}

.hbfs-sitefooter__inner {
	max-width: 1360px;
	margin-inline: auto;
	display: grid;
	gap: clamp(2.5rem, 5vw, 4rem);
}

.hbfs-sitefooter .hbfs-footer__mark {
	width: auto;
	height: 40px;
	margin-bottom: 1.5rem;
	display: block;
}

.hbfs-sitefooter__name {
	font-size: 1.125rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	margin: 0 0 1.25rem;
}

.hbfs-sitefooter__blurb {
	color: var(--hbfs-gray);
	font-size: 0.9375rem;
	max-width: 42ch;
	margin: 0 0 1.5rem;
}

.hbfs-sitefooter__menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.7rem;
}

.hbfs-sitefooter__menu a {
	color: var(--hbfs-ivory);
	text-decoration: none;
	font-size: 0.9375rem;
	position: relative;
	padding-bottom: 2px;
	border-bottom: 1px solid transparent;
	transition: color 240ms var(--hbfs-ease), border-color 240ms var(--hbfs-ease);
}

.hbfs-sitefooter__menu a:hover {
	color: var(--hbfs-gold);
	border-bottom-color: var(--hbfs-gold);
}

.hbfs-sitefooter__pitch {
	font-size: clamp(1.125rem, 1.6vw, 1.4rem);
	font-weight: 600;
	letter-spacing: -0.015em;
	margin: 0 0 1.5rem;
	max-width: 18ch;
}

.hbfs-sitefooter__btn {
	display: inline-block;
	padding: 0.95rem 1.9rem;
	background: var(--hbfs-crimson);
	color: var(--hbfs-ivory);
	text-decoration: none;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	border: 1px solid var(--hbfs-crimson);
	transition: background-color 240ms var(--hbfs-ease), border-color 240ms var(--hbfs-ease);
}

.hbfs-sitefooter__btn:hover {
	background: var(--hbfs-crimson-deep);
	border-color: var(--hbfs-crimson-deep);
	color: var(--hbfs-ivory);
}

.hbfs-sitefooter__base {
	max-width: 1360px;
	margin: clamp(3rem, 6vw, 5rem) auto 0;
	padding-top: 1.5rem;
	border-top: 1px solid var(--hbfs-border);
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 2rem;
	align-items: baseline;
	justify-content: space-between;
}

.hbfs-sitefooter__base p {
	margin: 0;
	color: var(--hbfs-gray);
	font-size: 0.8125rem;
}

.hbfs-sitefooter__note {
	max-width: 46ch;
}

.hbfs-sitefooter__legal {
	display: flex;
	gap: 1.5rem;
}

.hbfs-sitefooter__legal a {
	color: var(--hbfs-gray);
	text-decoration: none;
}

.hbfs-sitefooter__legal a:hover {
	color: var(--hbfs-gold);
}

@media (min-width: 861px) {
	.hbfs-sitefooter__inner {
		grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr);
	}
}

/* --------------------------------------------------------------------------
   16. Motion — slow cinematic reveals, fully optional
   -------------------------------------------------------------------------- */

.hbfs-reveal {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity var(--hbfs-slow) var(--hbfs-ease), transform var(--hbfs-slow) var(--hbfs-ease);
	will-change: opacity, transform;
}

.hbfs-reveal.is-revealed {
	opacity: 1;
	transform: none;
	will-change: auto;
}

/* If JavaScript never runs, content must still be visible. */
.no-js .hbfs-reveal {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.hbfs *,
	.hbfs *::before,
	.hbfs *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.hbfs-reveal {
		opacity: 1;
		transform: none;
	}

	.hbfs-hero__img {
		transform: none;
	}
}

/* --------------------------------------------------------------------------
   17. GeneratePress integration
   Set Customize → Layout → Container to "One Container" and Sidebars to
   "Content (no sidebars)". These rules then let the cinematic sections run
   edge to edge inside GP's shell.
   -------------------------------------------------------------------------- */

/*
 * GeneratePress prints its dynamic CSS inline in wp_head, after this
 * stylesheet. On equal specificity GP would win, so these overrides are
 * deliberately qualified with body.hbfs to sit one class higher.
 */
body.hbfs,
body.hbfs .site-content,
body.hbfs .content-area,
body.hbfs .site-main,
body.hbfs .inside-article,
body.hbfs .entry-content,
body.hbfs.one-container .site-content,
body.hbfs.separate-containers .inside-article,
body.hbfs.separate-containers .site-main {
	background-color: var(--hbfs-black);
	background-image: none;
	box-shadow: none;
	border: 0;
}

body.hbfs .site-content,
body.hbfs .content-area,
body.hbfs .site-main,
body.hbfs .inside-article,
body.hbfs .entry-content {
	padding: 0;
	margin: 0;
	width: 100%;
	max-width: none;
}

/*
 * Only the CONTENT container is released to full width. The header keeps its
 * measured column — releasing it too is what pushed the logo to the far left
 * edge, out of line with every section below it.
 */
body.hbfs .site-content > .container,
body.hbfs .site-content > .grid-container {
	max-width: none;
	padding: 0;
}

/* Header sits in exactly the same column as the page content. */
body.hbfs .site-header .inside-header {
	max-width: 1360px;
	margin-inline: auto;
	padding-inline: var(--hbfs-gutter);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp(1.5rem, 4vw, 3rem);
	width: 100%;
}

/* Sections paint their own surface so nothing depends on the container. */
body.hbfs .hbfs-hero,
body.hbfs .hbfs-section {
	background-color: var(--hbfs-black);
}

body.hbfs .hbfs-section--charcoal {
	background-color: var(--hbfs-charcoal);
}

body.hbfs .hbfs-section--ivory {
	background-color: var(--hbfs-ivory-warm);
}

/* Buttons: GP's own button colours are printed inline and must be overridden. */
body.hbfs .wp-block-button__link,
body.hbfs .wp-block-button .wp-block-button__link {
	background-color: var(--hbfs-crimson);
	color: var(--hbfs-ivory);
	border-color: var(--hbfs-crimson);
}

body.hbfs .wp-block-button__link:hover,
body.hbfs .wp-block-button .wp-block-button__link:hover {
	background-color: var(--hbfs-crimson-deep);
	border-color: var(--hbfs-crimson-deep);
	color: var(--hbfs-ivory);
}

body.hbfs .hbfs-btn-ghost .wp-block-button__link {
	background-color: transparent;
	border-color: var(--hbfs-border);
	color: var(--hbfs-ivory);
}

body.hbfs .hbfs-btn-ghost .wp-block-button__link:hover {
	background-color: transparent;
	border-color: var(--hbfs-gold);
	color: var(--hbfs-gold);
}

body.hbfs .hbfs-section--ivory .hbfs-btn-ghost .wp-block-button__link {
	color: var(--hbfs-near-black);
	border-color: rgba(23, 23, 25, 0.25);
}

/*
 * The content wrapper is already full width above, so full-bleed sections need
 * no negative margins. Negative margins based on 100vw overflow by the width of
 * the scrollbar, which is what was pushing sections out of alignment.
 */
body.hbfs .entry-content > .alignfull,
body.hbfs .entry-content > .alignwide {
	margin-left: 0;
	margin-right: 0;
	width: 100%;
	max-width: none;
}

/*
 * ONE measured column for the whole site.
 *
 * Every section is full-bleed for its background and imagery, but its content
 * sits in the same 1360px column with the same gutters. That shared left edge
 * is what makes the pages feel composed rather than drifting.
 */
body.hbfs .hbfs-section > *,
body.hbfs .hbfs-hero > .hbfs-hero__inner,
body.hbfs .hbfs-section__head,
body.hbfs .hbfs-section__foot {
	width: 100%;
	max-width: 1360px;
	margin-inline: auto;
}

/* Media and decorative layers must stay full-bleed, not join the column. */
body.hbfs .hbfs-section > .hbfs-hero__media,
body.hbfs .hbfs-section > .hbfs-sectionbg,
body.hbfs .hbfs-section > .hbfs-scrim,
body.hbfs .hbfs-section > .hbfs-hero__rule {
	max-width: none;
	margin-inline: 0;
}

/* Nothing may cause a horizontal scrollbar. */
body.hbfs,
body.hbfs .site,
body.hbfs .site-content {
	overflow-x: clip;
	max-width: 100%;
}

body.hbfs * {
	min-width: 0;
}

/*
 * Page titles are suppressed on pages: every HBFS section pattern supplies its
 * own H1, so GP's title would create a second, competing one. Posts keep theirs.
 */
.hbfs.page .entry-header,
.hbfs.page .page-header,
.hbfs .page .entry-header .entry-title {
	display: none;
}

.hbfs .entry-content > *:last-child {
	margin-bottom: 0;
}

/* GP separator/footer defaults that fight the dark system. */
.hbfs .site-footer,
.hbfs .site-info {
	background: var(--hbfs-black);
	color: var(--hbfs-gray);
	border-top: 1px solid var(--hbfs-border);
}

/* --------------------------------------------------------------------------
   17b. Navigation, ivory-section behaviour and empty states
   -------------------------------------------------------------------------- */

/* Primary navigation, floated into the header beside the logo. */
body.hbfs .main-navigation {
	background: transparent;
	flex: 0 1 auto;
}

body.hbfs .main-navigation .inside-navigation {
	padding: 0;
	max-width: none;
}

body.hbfs .main-navigation .main-nav > ul {
	display: flex;
	align-items: center;
	gap: clamp(0.25rem, 1vw, 0.75rem);
}

body.hbfs .main-navigation .main-nav ul li a {
	padding: 0.75rem 0.9rem;
	line-height: 1;
}

body.hbfs .main-navigation .main-nav ul li a::after {
	left: 0.9rem;
	right: 0.9rem;
	bottom: 0.4rem;
}

/* Persistent Start a Project CTA. */
body.hbfs .main-navigation .main-nav ul li.hbfs-nav-cta > a {
	background: var(--hbfs-crimson);
	color: var(--hbfs-ivory);
	padding: 0.8rem 1.4rem;
	margin-left: 0.6rem;
}

body.hbfs .main-navigation .main-nav ul li.hbfs-nav-cta > a:hover {
	background: var(--hbfs-crimson-deep);
}

body.hbfs .menu-toggle {
	background: transparent;
	color: var(--hbfs-ivory);
}

/*
 * Sections on warm ivory: rules, timeline and cards must switch to the dark-on-
 * light palette or they vanish against the light ground.
 */
.hbfs-section--ivory .hbfs-journey__item {
	border-top-color: rgba(23, 23, 25, 0.14);
}

.hbfs-section--ivory .hbfs-journey__item::before {
	background: var(--hbfs-crimson);
}

.hbfs-section--ivory .hbfs-journey__marker {
	color: #8a6d2f;
}

.hbfs-section--ivory .hbfs-journey__body p {
	color: #47433e;
}

.hbfs-section--ivory .hbfs-num {
	color: #8a6d2f;
}

/* Venture cards read as black on the charcoal band, not charcoal on charcoal. */
.hbfs-section--charcoal .hbfs-venture {
	background: var(--hbfs-black);
}

.hbfs-section--charcoal .hbfs-venture:hover {
	background: #101013;
}

/* A tighter display size for section headings that are not the page opener. */
.hbfs-display--tight {
	font-size: clamp(1.7rem, 3.2vw, 2.75rem);
	max-width: 24ch;
}

/* Founder copy keeps a readable measure instead of running edge to edge. */
.hbfs-founder__panel {
	max-width: 620px;
}

.hbfs-founder__panel p,
.hbfs-founder__panel .hbfs-display {
	max-width: 34ch;
}

.hbfs-founder__panel .hbfs-display {
	font-size: clamp(1.8rem, 3.4vw, 3rem);
}

/*
 * Empty states: a section with nothing in it is worse than no section. Selected
 * Work hides itself until a project is marked "Feature on homepage", and the
 * same applies to the journey, ventures and journal bands.
 */
.hbfs-section--work:not(:has(.hbfs-work)),
.hbfs-section--journey:not(:has(.hbfs-journey)),
.hbfs-section--ventures:not(:has(.hbfs-ventures)),
.hbfs-section--journal:not(:has(.hbfs-journal)) {
	display: none;
}

/* --------------------------------------------------------------------------
   18. Editor parity
   -------------------------------------------------------------------------- */

.editor-styles-wrapper {
	background-color: var(--hbfs-black);
	color: var(--hbfs-ivory);
}

.editor-styles-wrapper .hbfs-reveal {
	opacity: 1;
	transform: none;
}

/* The editor body has no .hbfs class, so button styling is repeated here. */
.editor-styles-wrapper .wp-block-button__link {
	background: var(--hbfs-crimson);
	color: var(--hbfs-ivory);
	border: 1px solid var(--hbfs-crimson);
	border-radius: 0;
	padding: 1rem 2.1rem;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.editor-styles-wrapper .hbfs-btn-ghost .wp-block-button__link {
	background: transparent;
	border-color: var(--hbfs-border);
	color: var(--hbfs-ivory);
}

.editor-styles-wrapper .hbfs-section--ivory .hbfs-btn-ghost .wp-block-button__link {
	color: var(--hbfs-near-black);
	border-color: rgba(23, 23, 25, 0.25);
}

.hbfs-notice {
	padding: 1rem 1.25rem;
	border: 1px dashed var(--hbfs-gold);
	color: var(--hbfs-gold);
	font-size: 0.875rem;
}