/**
 * Base styles.
 *
 * theme.json owns colour, type, spacing, radius and shadow. This file covers what
 * theme.json cannot express: the ambient atmosphere, the grain overlay, the glow beam,
 * glass surfaces, focus behaviour, motion preferences and the shared component classes.
 *
 * Every value below comes from a token. Nothing here hard-codes a hex, a spacing step,
 * a radius or an easing curve that already exists as a custom property.
 *
 * Naming follows the design system: .btn, .card-surface, .card-photo, .badge, .tag,
 * .accordion, .beam, .grain. Project-specific components keep the hfn- prefix.
 */

/* -------------------------------------------------------------------------- */
/* Tokens not expressible in theme.json                                       */
/* -------------------------------------------------------------------------- */

:root {
	--glass: var(--wp--custom--glass);
	--glass-hi: var(--wp--custom--glass-hi);
	--line: var(--wp--custom--line);
	--line-strong: var(--wp--custom--line-strong);
	--line-glow: var(--wp--custom--line-glow);

	--r-sm: var(--wp--custom--radius--sm);
	--r-md: var(--wp--custom--radius--md);
	--r-lg: var(--wp--custom--radius--lg);
	--r-pill: var(--wp--custom--radius--pill);

	--ease-out: var(--wp--custom--motion--ease-out);
	--dur-fast: var(--wp--custom--motion--dur-fast);
	--dur-med: var(--wp--custom--motion--dur-med);
	--dur-rise: var(--wp--custom--motion--dur-rise);
	--stagger: var(--wp--custom--motion--stagger);
	--rise-dist: var(--wp--custom--motion--rise-dist);

	--grad-ambient:
		radial-gradient(1000px 500px at 50% 0%, rgba(255, 230, 0, 0.05), transparent 70%),
		radial-gradient(800px 400px at 80% 30%, rgba(56, 189, 248, 0.04), transparent 60%),
		linear-gradient(180deg, #080808 0%, #0C0C0C 50%, #060606 100%);

	/*
	 * violet-soft was dropped from the theme.json palette when the site moved to yellow,
	 * but a dozen rules across this file, the footer and the focus styles still reference
	 * the preset. An undefined custom property is invalid at computed-value time, so those
	 * colours silently fell back to inherit: focus rings vanished, permit stamps went
	 * white, ticker dots disappeared. Aliasing the old name to the accent fixes every one
	 * of them without hunting down each call site.
	 */
	--wp--preset--color--violet-soft: #FFE600;
}

/* -------------------------------------------------------------------------- */
/* Document                                                                   */
/* -------------------------------------------------------------------------- */

/*
 * Border-box everywhere.
 *
 * The theme never set this, so padding and borders were adding to declared widths and
 * heights all over the site. It is what made the location card captions overflow their
 * own cards (height:100% plus padding measured taller than the card), and the same trap
 * was waiting in every panel that pairs a width with padding. WordPress core sets this on
 * some of its own blocks but never globally, so the page was a mix of both models.
 */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	background-color: #080808;
	overflow-x: clip;
}

@media (prefers-reduced-motion: no-preference) {

	html:focus-within {
		scroll-behavior: smooth;
	}
}

body {
	min-height: 100vh;
	background-color: #080808;
	background-image: var(--grad-ambient);
	background-attachment: fixed;
	color: #FFFFFF;
	font-family: 'Outfit', 'Plus Jakarta Sans', -apple-system, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

::selection {
	background-color: #FFE600;
	color: #000000;
}

.wp-site-blocks {
	padding-top: 0 !important;
	margin-top: 0 !important;
}

.wp-site-blocks > header.hfn-header,
.wp-site-blocks > .hfn-header {
	margin-block-start: 0 !important;
	margin-top: 0 !important;
}

p,
li,
dd,
dt,
h1,
h2,
h3,
h4,
h5,
h6 {
	overflow-wrap: break-word;
}

/* Fix broken violet-soft color tokens — remap to electric yellow */
.has-violet-soft-color {
	color: #FFE600 !important;
}

/* Section eyebrow labels — h6 across the whole site */
h6.wp-block-heading,
.wp-block-heading.has-xs-font-size {
	font-family: 'Outfit', sans-serif !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	letter-spacing: 0.16em !important;
	text-transform: uppercase !important;
	color: #FFE600 !important;
	margin-bottom: 12px !important;
}

/* Section h2 headings — bold Outfit, not light weight */
h2.wp-block-heading {
	font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.15;
	color: #FFFFFF;
}

/* hfn-serif spans used inside headings → yellow */
.hfn-serif {
	font-style: normal;
	color: #FFE600;
}


img,
video,
svg {
	max-width: 100%;
	height: auto;
}

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

/*
 * Film grain. Sits above everything, ignores pointer events, and is decorative only.
 * At 5% opacity it reads as texture rather than noise.
 */
.hfn-grain {
	position: fixed;
	z-index: 40;
	inset: 0;
	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='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
	mix-blend-mode: overlay;
	opacity: 0.05;
	pointer-events: none;
}

/*
 * The glow beam. Budget is one full-strength beam per page, in the hero, plus one
 * soft variant on the final call to action. It is purely decorative and never
 * carries meaning, so it is hidden from assistive technology.
 */
/* The beam was three blue and violet gradients left over from the palette the site had
   before it moved to yellow, so the one lit element on the page belonged to no scheme. */
.hfn-beam {
	position: absolute;
	z-index: 0;
	bottom: -16vh;
	left: 50%;
	width: min(920px, 92vw);
	height: 78vh;
	background:
		radial-gradient(46% 52% at 50% 78%, rgba(255, 230, 0, 0.16), transparent 70%),
		radial-gradient(60% 66% at 50% 88%, rgba(255, 214, 0, 0.12), transparent 72%),
		radial-gradient(85% 80% at 50% 100%, rgba(255, 196, 0, 0.1), transparent 74%);
	filter: blur(6px);
	pointer-events: none;
	transform: translateX(-50%);
}

.hfn-beam--soft {
	height: 48vh;
	opacity: 0.7;
}

/* Any section holding a beam must clip it and stack its own content above. */
.hfn-has-beam {
	position: relative;
	overflow: hidden;
}

.hfn-has-beam > * {
	position: relative;
	z-index: 1;
}

/* -------------------------------------------------------------------------- */
/* Focus                                                                      */
/* -------------------------------------------------------------------------- */

/*
 * One visible focus treatment everywhere. :focus-visible means a mouse click does not
 * draw a ring but keyboard and programmatic focus always do, which is what WCAG 2.2
 * expects.
 */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	border-radius: var(--r-pill);
	outline: 2px solid var(--wp--preset--color--violet-soft);
	outline-offset: 3px;
}

/* A programmatically focused region is not an interactive control. */
[tabindex="-1"]:focus {
	outline: none;
}

/* -------------------------------------------------------------------------- */
/* Skip link and screen reader helpers                                        */
/* -------------------------------------------------------------------------- */

.skip-link {
	position: absolute;
	z-index: 100000;
	top: 0;
	left: 0;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
	border-radius: 0 0 var(--r-md) 0;
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 500;
	text-decoration: underline;
}

.skip-link:focus {
	width: auto;
	height: auto;
	clip: auto;
	clip-path: none;
	outline: 2px solid var(--wp--preset--color--violet-soft);
	outline-offset: 3px;
}

.screen-reader-text {
	position: absolute !important; /* Must beat any block layout rule. */
	overflow: hidden;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	clip-path: inset(50%);
	word-wrap: normal !important; /* Prevents a one-character-per-line column. */
}

/* -------------------------------------------------------------------------- */
/* Motion                                                                     */
/* -------------------------------------------------------------------------- */

@keyframes hfn-rise {

	from {
		opacity: 0;
		transform: translateY(var(--rise-dist));
	}

	to {
		opacity: 1;
		transform: none;
	}
}

.hfn-rise {
	animation: hfn-rise var(--dur-rise) var(--ease-out) forwards;
	opacity: 0;
}

.hfn-rise:nth-child(2) { animation-delay: calc(var(--stagger) * 1); }

.hfn-rise:nth-child(3) { animation-delay: calc(var(--stagger) * 2); }

.hfn-rise:nth-child(4) { animation-delay: calc(var(--stagger) * 3); }

.hfn-rise:nth-child(5) { animation-delay: calc(var(--stagger) * 4); }

/*
 * Honour the visitor's motion preference globally. Durations collapse to effectively
 * instant rather than to zero, so state changes that wait on a transitionend event
 * still fire.
 */
@media (prefers-reduced-motion: reduce) {

	.hfn-rise {
		animation: none;
		opacity: 1;
	}

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

/* -------------------------------------------------------------------------- */
/* Layout helpers                                                             */
/* -------------------------------------------------------------------------- */

.hfn-measure {
	max-width: var(--wp--custom--width--measure);
}

/* Long-form copy stays left-aligned inside a centred section: centring a full
   paragraph makes every line start in a different place. */
.hfn-prose p,
.hfn-prose li {
	text-align: start;
}

.hfn-eyebrow {
	margin-block-end: var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--violet-soft);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 500;
	letter-spacing: var(--wp--custom--tracking--caps);
	text-transform: uppercase;
}

.hfn-serif {
	font-family: var(--wp--preset--font-family--serif);
	font-style: italic;
	font-weight: 400;
	letter-spacing: 0;
}

/* -------------------------------------------------------------------------- */
/* Buttons                                                                    */
/* -------------------------------------------------------------------------- */

/*
 * The design system allows one solid button per view section. Everything else is a
 * ghost. Both meet the 44px minimum target; the default 52px is the comfortable size.
 */
.wp-block-button__link,
/*
 * The base button never had padding-inline: only the --sm variant did. Every full-size
 * button was therefore exactly as wide as its label with no breathing room, so longer
 * labels like "Send a production brief" ran into the edge of the pill and read as
 * clipped. The type is also brought in line with the rest of the site's buttons.
 */
.hfn-btn {
	display: inline-flex;
	min-height: 52px;
	align-items: center;
	justify-content: center;
	padding-inline: 30px;
	border: 0;
	border-radius: var(--r-pill);
	cursor: pointer;
	font-family: 'Outfit', sans-serif;
	font-size: 13.5px;
	font-weight: 800;
	gap: var(--wp--preset--spacing--20);
	letter-spacing: 0.06em;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
	transition:
		transform var(--dur-fast) var(--ease-out),
		box-shadow var(--dur-fast) var(--ease-out);
}

.wp-block-button__link:hover,
.hfn-btn:hover {
	transform: translateY(-1.5px);
}

.wp-block-button__link:active,
.hfn-btn:active {
	transform: translateY(0);
}

/*
 * White text on the yellow fill was unreadable: roughly 1.7:1 against #FFE600, well under
 * the 4.5:1 minimum. Near-black on yellow is about 16:1. The purple glows below were the
 * last of the pre-yellow palette.
 */
.hfn-btn--solid {
	background: linear-gradient(180deg, #FFEC4D 0%, #FFE600 46%, #F5D400 100%);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.5),
		0 10px 28px rgba(255, 230, 0, 0.22);
	color: #0A0A0A;
}

.hfn-btn--solid:hover {
	background: linear-gradient(180deg, #FFF382 0%, #FFEC4D 46%, #FFE600 100%);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.6),
		0 16px 38px rgba(255, 230, 0, 0.32);
	color: #0A0A0A;
}

/* Ghost variant, also available as a core button style variation. */
.hfn-btn--ghost,
.is-style-ghost .wp-block-button__link {
	border: 1px solid rgba(255, 255, 255, 0.14);
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.03));
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
	color: var(--wp--preset--color--ink);
}

.hfn-btn--ghost:hover,
.is-style-ghost .wp-block-button__link:hover {
	border-color: rgba(255, 230, 0, 0.5);
	background: linear-gradient(180deg, rgba(255, 230, 0, 0.12), rgba(255, 230, 0, 0.04));
	color: #FFE600;
}

.hfn-btn--sm {
	min-height: 44px;
	padding-inline: 22px;
	font-size: var(--wp--preset--font-size--sm);
}

.hfn-btn:disabled,
.wp-block-button__link:disabled {
	cursor: not-allowed;
	filter: saturate(0.4);
	opacity: 0.4;
	pointer-events: none;
}

/* -------------------------------------------------------------------------- */
/* Glass surfaces                                                             */
/* -------------------------------------------------------------------------- */

.hfn-glass {
	border: 1px solid var(--line);
	background: linear-gradient(180deg, var(--glass-hi), rgb(255 255 255 / 2%));
	backdrop-filter: blur(var(--wp--custom--blur--nav));
	box-shadow: var(--wp--preset--shadow--nav);

	/* Laid out as a row: brand, then nav pushed right, then the button. */
	display: flex;
	align-items: center;
	gap: 28px;
}

.hfn-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	padding: 7px 9px 7px 18px;
	border: 1px solid var(--line);
	border-radius: var(--r-pill);
	background: var(--glass);
	backdrop-filter: blur(var(--wp--custom--blur--pill));
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--xs);
}

.hfn-tag {
	display: inline-block;
	padding: 6px 10px;
	border: 1px solid rgb(255 255 255 / 14%);
	border-radius: var(--r-pill);
	background: rgb(11 8 18 / 45%);
	backdrop-filter: blur(var(--wp--custom--blur--tag));
	color: rgb(244 242 248 / 85%);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: var(--wp--custom--tracking--caps);
	text-transform: uppercase;
}

/* -------------------------------------------------------------------------- */
/* Cards                                                                      */
/* -------------------------------------------------------------------------- */

.hfn-card-surface {
	padding: var(--wp--preset--spacing--50);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	background: var(--wp--preset--gradient--card);
	box-shadow: var(--wp--preset--shadow--card);
	transition:
		transform var(--dur-med) var(--ease-out),
		border-color var(--dur-med) var(--ease-out);
}

.hfn-card-surface:hover {
	border-color: var(--line-strong);
	transform: translateY(-4px);
}

.hfn-card-photo {
	position: relative;
	overflow: hidden;
	border: 1px solid rgb(255 255 255 / 12%);
	border-radius: var(--r-lg);
	background: var(--wp--preset--gradient--card);
	box-shadow: var(--wp--preset--shadow--card);
	transition:
		transform var(--dur-med) var(--ease-out),
		box-shadow var(--dur-med) var(--ease-out);
}

.hfn-card-photo:hover {
	transform: translateY(-8px);
}

/*
 * All photography ships black and white. Colour belongs to the interface; the
 * photographs supply texture and truth.
 */
.hfn-card-photo img {
	width: 100%;
	height: 100%;
	filter: grayscale(1) contrast(1.06) brightness(0.94);
	object-fit: cover;
}

.hfn-card-photo::after {
	position: absolute;
	border-radius: inherit;
	background: var(--wp--preset--gradient--photo-fade);
	box-shadow: inset 0 0 0 1px rgb(255 255 255 / 5%);
	content: "";
	inset: 0;
}

/* One glow card per view marks the flagship item. Never a whole grid. */
.hfn-card-photo--glow {
	border-color: var(--line-glow);
	box-shadow: var(--wp--preset--shadow--card-glow);
}

.hfn-card-photo .hfn-tag {
	position: absolute;
	z-index: 2;
	bottom: var(--wp--preset--spacing--30);
	left: var(--wp--preset--spacing--30);
}

/* -------------------------------------------------------------------------- */
/* Touch targets                                                              */
/* -------------------------------------------------------------------------- */

/*
 * WCAG 2.2 asks for 24x24 minimum; 44x44 is the comfortable target and what this
 * theme uses for anything a thumb has to hit. Inline links inside a paragraph are
 * exempt under the standard and are left alone.
 */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close,
.hfn-icon-button {
	display: inline-flex;
	min-width: 44px;
	min-height: 44px;
	align-items: center;
	justify-content: center;
}

/* -------------------------------------------------------------------------- */
/* Header and footer                                                          */
/* -------------------------------------------------------------------------- */

header.hfn-header,
.hfn-header {
	position: fixed !important;
	top: 16px !important;
	left: 0 !important;
	right: 0 !important;
	width: 100% !important;
	z-index: 99999 !important;
	background: transparent !important;
	background-color: transparent !important;
	border: none !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0 !important;
	pointer-events: none;
}

.admin-bar header.hfn-header,
.admin-bar .hfn-header {
	top: calc(var(--wp-admin--admin-bar--height, 32px) + 16px) !important;
}

/*
 * The nav pill matches the content measure.
 *
 * The project had four widths that never agreed: this bar at 1080px, a custom "nav" token
 * of 1120px that nothing used, and content at 1240px. The nav sat 80px narrower per side
 * than everything beneath it, so no edge on the page lined up with any other. One token
 * now drives the bar and the content, and their left and right edges land together.
 */
.hfn-header__bar {
	pointer-events: auto;
	display: flex;
	max-width: var(--wp--custom--width--content);
	width: calc(100% - 32px);
	align-items: center;
	padding: 8px 10px 8px 22px;
	border: 1px solid rgba(255, 255, 255, 0.14) !important;
	border-radius: 999px !important;
	margin-inline: auto;
	background: rgba(12, 12, 12, 0.88) !important;
	backdrop-filter: blur(20px) !important;
	-webkit-backdrop-filter: blur(20px) !important;
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.05) !important;
	gap: 20px;
}

.hfn-footer__legal {
	color: var(--wp--preset--color--dim);
	font-size: var(--wp--preset--font-size--xs);
}

/* -------------------------------------------------------------------------- */
/* Editorial helpers                                                          */
/* -------------------------------------------------------------------------- */

/* Placeholder copy the client still has to supply. Deliberately loud: it must be
   impossible to miss on a staging site, and it is stripped entirely once launch
   mode is enabled. */
.hfn-placeholder {
	display: inline-block;
	padding: 2px 10px;
	border: 1px dashed rgb(242 184 75 / 45%);
	border-radius: var(--r-sm);
	background-color: var(--wp--custom--warn-bg);
	color: var(--wp--preset--color--warn);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 400;
}

/* -------------------------------------------------------------------------- */
/* Media placeholders                                                         */
/* -------------------------------------------------------------------------- */

/*
 * The plugin draws these inside its own blocks and ships matching styles with them.
 * These rules cover the same component used directly in a template, a part or a
 * pattern, where the plugin's conditionally-loaded block stylesheet is not present.
 *
 * Photography for this site does not exist yet. Rather than leave the boxes empty and
 * let every grid collapse to ragged heights, each one holds an image icon at the exact
 * size the real picture will take, so dropping the artwork in later moves nothing.
 */
.hfn-media-placeholder {
	display: flex;
	container-type: inline-size;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--20);
	padding: var(--wp--preset--spacing--30);
	border: 1px dashed var(--line-strong);
	border-radius: var(--r-md);
	background-color: var(--glass);
	color: var(--wp--preset--color--dim);
	text-align: center;
}

/* Photographic slots carry the same generous radius as a real photo card, so the
   placeholder and its eventual replacement have the same silhouette. */
.hfn-media-placeholder--landscape,
.hfn-media-placeholder--gallery,
.hfn-media-placeholder--video {
	border-radius: var(--r-lg);
}

.hfn-media-placeholder__icon {
	width: 2rem;
	height: 2rem;
	flex: none;
	opacity: 0.75;
}

.hfn-media-placeholder--portrait .hfn-media-placeholder__icon,
.hfn-media-placeholder--logo .hfn-media-placeholder__icon {
	width: 1.75rem;
	height: 1.75rem;
}

.hfn-media-placeholder__label {
	max-width: 22ch;
	font-size: var(--wp--preset--font-size--xs);
	line-height: 1.35;
}

/* In a narrow box the label crowds the icon out, so the icon alone carries it. */
@container (max-width: 12rem) {

	.hfn-media-placeholder__label {
		display: none;
	}
}

/*
 * The client logo wall. Each slot is a separate mark from a separate organisation, so
 * they are laid out as individual tiles rather than one shared strip, and each holds its
 * own placeholder until that specific logo is supplied and cleared for use.
 *
 * No logo is ever displayed without written permission on file. See docs/qa-checklist.md.
 */
.hfn-logo-wall {
	display: grid;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
	grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.hfn-logo-wall__item {
	display: flex;
	min-height: 4.5rem;
	align-items: center;
	justify-content: center;
	padding: var(--wp--preset--spacing--20);
}

/*
 * Supplied logos render as flat white marks. Client logos arrive in a dozen different
 * brand colours, and a row of them at full saturation fights the interface and looks
 * like a clip-art collage. Flattening to white unifies the row and matches the
 * greyscale treatment used for photography.
 */
.hfn-logo-wall__item img {
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 2.75rem;
	filter: grayscale(1) brightness(0) invert(1);
	opacity: 0.62;
	transition: opacity var(--dur-med) var(--ease-out);
}

.hfn-logo-wall__item a:hover img,
.hfn-logo-wall__item a:focus-visible img {
	opacity: 1;
}

.hfn-logo-wall .hfn-media-placeholder {
	width: 100%;
	min-height: 4.5rem;
}

/* -------------------------------------------------------------------------- */
/* Quick answer panel                                                         */
/* -------------------------------------------------------------------------- */

/*
 * The short version, at the top of a long guide. Most people arriving from a search
 * result want one fact, not fifteen hundred words, and burying it below the fold serves
 * nobody. Giving them the answer immediately is also what earns the click that follows.
 */
.hfn-quick-answer {
	max-width: var(--wp--custom--width--measure);
}

.hfn-quick-answer h2 {
	margin-block-start: 0;
	color: var(--wp--preset--color--violet-soft);
	font-size: var(--wp--preset--font-size--sm);
	letter-spacing: var(--wp--custom--tracking--caps);
	text-transform: uppercase;
}

.hfn-quick-answer ul {
	margin-block-end: 0;
}

.hfn-quick-answer li {
	font-size: var(--wp--preset--font-size--sm);
}

/* -------------------------------------------------------------------------- */
/* Section rhythm and banding                                                 */
/* -------------------------------------------------------------------------- */

/*
 * Every section was the same black with the same gap, so a long page read as one
 * undifferentiated slab and nothing told you where one idea ended and the next began.
 *
 * The fix is two things working together: a bigger, consistent gap, and alternating
 * surfaces. Alternate sections sit on a slightly raised panel; the ones between them
 * stay on the page canvas and instead carry a very faint accent wash. The tonal step is
 * deliberately small (about four points of lightness). It should register as "a new
 * section has started" without ever reading as a different colour scheme, which is why
 * the theme stays locked to one dark palette throughout.
 */
.hfn-sec {
	position: relative;
	margin-top: clamp(72px, 9vw, 132px);
	isolation: isolate;
}

/*
 * The band has to reach the full viewport while its content stays on the wide measure,
 * so it is painted by a pseudo-element rather than a background on the box itself. The
 * same 100vw technique the hero, ticker and image band already use.
 */
/*
 * The band reaches the full viewport while its content stays on the wide measure, so it
 * is painted by a pseudo-element rather than a background on the box itself: the same
 * 100vw technique the hero, ticker and image band already use. Its own padding provides
 * the separation, so it needs less outer margin than a canvas section.
 */
.hfn-sec--band {
	margin-top: clamp(56px, 7vw, 104px);
	padding-block: clamp(64px, 7.5vw, 108px);
}

.hfn-sec--band::before {
	position: absolute;
	z-index: -1;
	left: 50%;
	width: 100vw;
	border-top: 1px solid rgba(255, 255, 255, 0.055);
	border-bottom: 1px solid rgba(255, 255, 255, 0.04);
	background: linear-gradient(180deg, #0C0C0E 0%, #0A0A0C 60%, #08080A 100%);
	content: "";
	inset-block: 0;
	pointer-events: none;
	transform: translateX(-50%);
}

/*
 * Canvas sections are not left plain either. Each carries a faint accent wash entering
 * from a different point, so the two canvas sections either side of a band still read as
 * separate places rather than the same empty black.
 */
.hfn-sec--glow::before {
	position: absolute;
	z-index: -1;
	left: 50%;
	width: 100vw;
	background: radial-gradient(58% 62% at var(--hfn-glow-x, 50%) 0%, rgba(255, 230, 0, 0.045), transparent 68%);
	content: "";
	inset-block: -40px 0;
	pointer-events: none;
	transform: translateX(-50%);
}

.hfn-sec--glow-left { --hfn-glow-x: 20%; }

.hfn-sec--glow-right { --hfn-glow-x: 80%; }

.hfn-sec--glow-centre { --hfn-glow-x: 50%; }

/* -------------------------------------------------------------------------- */
/* Section headers                                                            */
/* -------------------------------------------------------------------------- */

/*
 * Eyebrow, headline, standfirst: one treatment, applied to every section that carries
 * that header shape.
 *
 * These were left-aligned at content-size while the grids underneath them span the wide
 * measure, so each heading sat visibly inboard of its own content. Centring the header
 * over the full section width settles the whole page onto one axis. Spacing lives here
 * rather than in per-block inline styles, so the rhythm is identical in every section
 * instead of drifting with whatever was typed into each one.
 *
 * Scoped to .hfn-sec so inner pages, which are built left-aligned, are untouched.
 */
.hfn-sec > .wp-block-heading,
.hfn-sec > p.hfn-measure {
	margin-inline: auto;
	text-align: center;
}

.hfn-sec > h6.wp-block-heading,
.hfn-sec > .wp-block-heading.has-xs-font-size {
	margin-bottom: 16px !important;
	margin-top: 0 !important;
}

.hfn-sec > h2.wp-block-heading {
	max-width: 20ch;
	margin-top: 0;
	margin-bottom: 0;
	text-wrap: balance;
}

/*
 * .hfn-measure caps the line length for left-aligned prose. Centred under a headline it
 * needs a slightly tighter measure, and the width has to come with auto side margins or
 * the block sits left inside its own centred parent.
 */
.hfn-sec > p.hfn-measure {
	max-width: 58ch;
	margin-top: 20px;
	margin-bottom: 0;
	text-wrap: pretty;
}

/* The content below the header keeps one gap, whatever component it happens to be. */
.hfn-sec > .hfn-grid,
.hfn-sec > .hfn-shots,
.hfn-sec > .hfn-people,
.hfn-sec > .hfn-stages,
.hfn-sec > .alignwide,
.hfn-sec > .wp-block-html {
	margin-top: clamp(38px, 4.5vw, 60px);
}

/* A trailing "see everything" link is centred with the header it belongs to. */
.hfn-sec > p.has-sm-font-size {
	margin-top: 32px;
	text-align: center;
}

@media (max-width: 640px) {

	.hfn-sec > h2.wp-block-heading {
		max-width: 18ch;
	}
}

/* -------------------------------------------------------------------------- */
/* Wide components inside a constrained group                                 */
/* -------------------------------------------------------------------------- */

/*
 * These components are raw markup dropped into a wp:group whose layout is "constrained",
 * so WordPress clamps them to contentSize (44rem) even when the group itself is alignwide.
 * That is why the grids, the table and the people list were rendering as a narrow ribbon
 * down the middle of a wide page. The child combinator beats core's :where()-wrapped
 * layout rule without needing !important or an alignwide class on every instance.
 */
.wp-block-group > .hfn-grid,
.wp-block-group > .hfn-people,
.wp-block-group > .hfn-compare-shell,
.wp-block-group > .hfn-shots,
.wp-block-group > .hfn-stages,
.wp-block-group > .hfn-showcase,
.wp-block-group > .hfn-videosplit {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
}

/* -------------------------------------------------------------------------- */
/* Card lists                                                                 */
/* -------------------------------------------------------------------------- */

/*
 * The markup is <div class="hfn-grid hfn-grid--3"><ul class="hfn-card-list"><li…>, so the
 * grid container holds exactly one child: the list. The plugin styles .hfn-grid but
 * nothing in the project ever styled .hfn-card-list, which meant every one of these
 * sections rendered as a single full-width column of stacked cards.
 *
 * Rather than rewrite the markup in three places, the list carries the tracks. The
 * breakpoints mirror the plugin's own .hfn-grid rules so the two agree.
 */
.hfn-card-list {
	display: grid;
	gap: var(--wp--preset--spacing--50, 1.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
	grid-template-columns: 1fr;
}

/*
 * The plugin's blocks.css turns .hfn-grid into a grid too, and it loads on any page where
 * one of its blocks renders. When both stylesheets are present the list becomes a single
 * item sitting in the first of three tracks, and every card is crushed into a third of a
 * third. Spanning every track makes the outer grid a no-op whether or not it is styled.
 */
.hfn-grid > .hfn-card-list {
	grid-column: 1 / -1;
	width: 100%;
}

@media (min-width: 48rem) {

	.hfn-grid--2 > .hfn-card-list,
	.hfn-grid--3 > .hfn-card-list,
	.hfn-grid--4 > .hfn-card-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 64rem) {

	.hfn-grid--3 > .hfn-card-list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.hfn-grid--4 > .hfn-card-list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/*
 * The card itself.
 *
 * These rules used to live only in the plugin's blocks.css, which WordPress attaches to
 * the plugin's blocks. Every card on the homepage is written straight into the pattern
 * rather than rendered by a block, so the moment no plugin block was left on the page the
 * cards lost their background, padding and border and collapsed into bare underlined
 * links. The theme owns its own card design now and works with the plugin inactive.
 */
.hfn-card {
	position: relative;
	display: flex;
	overflow: hidden;
	min-width: 0;
	flex-direction: column;
	padding: 28px 26px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 20px;
	background: linear-gradient(180deg, rgba(23, 23, 25, 0.92), rgba(14, 14, 16, 0.92));
	isolation: isolate;
	transition: transform 0.28s cubic-bezier(0.22, 0.68, 0.32, 1), border-color 0.28s ease, box-shadow 0.28s ease;
}

/*
 * Doubled class, deliberately. The plugin sets a flat background on .hfn-card, and if its
 * stylesheet loads after this one that background paints straight over the photograph
 * layer below. The extra specificity keeps the photo card transparent regardless of which
 * stylesheet lands last.
 */
.hfn-card.hfn-card--photo {
	background: rgba(12, 12, 13, 0.35);
}

/*
 * The photograph sits behind the copy at low opacity and lifts on hover. It is decorative
 * (the card already says what it is in text), so it is a background rather than an <img>
 * and never reaches the accessibility tree.
 */
.hfn-card--photo::before {
	position: absolute;
	z-index: -2;
	background-image: var(--hfn-card-image);
	background-position: center;
	background-size: cover;
	content: "";
	inset: 0;
	opacity: 0.28;
	transform: scale(1.03);
	transition: opacity 0.4s ease, transform 0.6s cubic-bezier(0.22, 0.68, 0.32, 1);
}

/* A scrim, so the copy keeps its contrast whatever the photograph is doing underneath. */
.hfn-card--photo::after {
	position: absolute;
	z-index: -1;
	background: linear-gradient(178deg, rgba(10, 10, 11, 0.62) 0%, rgba(9, 9, 10, 0.88) 52%, rgba(8, 8, 9, 0.96) 100%);
	content: "";
	inset: 0;
}

.hfn-card--photo:hover::before {
	opacity: 0.42;
	transform: scale(1.08);
}

.hfn-card:hover {
	border-color: rgba(255, 230, 0, 0.38);
	box-shadow: 0 26px 55px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 230, 0, 0.07);
	transform: translateY(-5px);
}

/*
 * Two content wrappers exist: the theme's patterns use __body, the plugin's grid blocks
 * render __content. Only __body was ever styled, so every card coming out of a plugin
 * grid (services, locations, projects, team) lost its internal spacing entirely.
 */
.hfn-card__body,
.hfn-card__content {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 10px;
}

/*
 * The image slot. These cards are rendered before any photography exists, so the
 * placeholder has to look deliberate rather than broken: a fixed-ratio panel that the
 * real image will drop straight into without moving anything.
 */
.hfn-card__media {
	display: grid;
	margin: -28px -26px 18px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	background: rgba(255, 255, 255, 0.022);
	aspect-ratio: 4 / 3;
	color: #3A3A42;
	place-items: center;
}

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

.hfn-card__media .hfn-media-placeholder__icon {
	width: 30px;
	height: 30px;
	opacity: 0.55;
}

/* The location or district line. Supporting information, so it sits below the title. */
.hfn-card__eyebrow {
	margin: 0;
	color: #C9A700;
	font-family: 'Outfit', sans-serif;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.1em;
	line-height: 1.4;
	text-transform: uppercase;
}

/* Access and season facts, as a compact definition list rather than loose paragraphs. */
.hfn-card__meta {
	display: grid;
	margin: 4px 0 0;
	padding-top: 14px;
	border-top: 1px solid rgba(255, 255, 255, 0.06);
	gap: 10px;
}

.hfn-card__meta dt {
	color: #FFE600;
	font-family: 'Outfit', sans-serif;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.hfn-card__meta dd {
	margin: 4px 0 0;
	color: #8A8A93;
	font-size: 12.5px;
	line-height: 1.5;
}

.hfn-card__title {
	margin: 0;
	color: #FFFFFF;
	font-family: 'Outfit', sans-serif;
	font-size: 19px;
	font-weight: 800;
	letter-spacing: -0.01em;
	line-height: 1.25;
}

.hfn-card__link {
	color: inherit;
	text-decoration: none;
	transition: color 0.2s ease;
}

/*
 * A card whose title holds a link becomes clickable in full. The anchor keeps the real
 * focus ring and the accessible name; the overlay only widens the hit area.
 */
.hfn-card__title a::after {
	position: absolute;
	content: "";
	inset: 0;
}

.hfn-card:hover .hfn-card__link {
	color: #FFE600;
}

.hfn-card__text {
	margin: 0;
	color: #A1A1AA;
	font-size: 14.5px;
	line-height: 1.6;
}

/* The arrow belongs to the card, so it moves on card hover, not just link hover. */
.hfn-card__cta {
	display: inline-flex;
	margin-top: auto;
	align-items: center;
	padding-top: 18px;
	color: #8A8A93;
	font-family: 'Outfit', sans-serif;
	font-size: 11.5px;
	font-weight: 800;
	gap: 8px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	transition: color 0.2s ease;
}

.hfn-card__cta::after {
	content: "→";
	transition: transform 0.22s cubic-bezier(0.22, 0.68, 0.32, 1);
}

.hfn-card:hover .hfn-card__cta {
	color: #FFE600;
}

.hfn-card:hover .hfn-card__cta::after {
	transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {

	.hfn-card,
	.hfn-card::before,
	.hfn-card__cta::after {
		transition: none;
	}

	.hfn-card:hover,
	.hfn-card:hover .hfn-card__cta::after {
		transform: none;
	}

	.hfn-card--photo:hover::before {
		transform: scale(1.03);
	}
}

/* -------------------------------------------------------------------------- */
/* Production types: "What kind of shoot is yours"                            */
/* -------------------------------------------------------------------------- */

/*
 * Header, then a row of image tiles. Everything here is driven by the Production Types
 * admin screen. The tile note is clamped to two lines so a long sentence typed into the
 * back end can never push the grid out of shape.
 */
.hfn-prodtypes-header {
	max-width: 660px;
	margin-inline: auto;
	text-align: center;
}

.hfn-prodtypes-eyebrow {
	margin: 0 0 14px;
	color: #FFE600;
	font-family: 'Outfit', sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.hfn-prodtypes-heading {
	margin: 0;
	color: #FFFFFF;
	font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif;
	font-size: clamp(30px, 4.4vw, 49px);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.1;
	text-wrap: balance;
}

.hfn-prodtypes-heading .hfn-serif {
	font-style: normal;
	color: #FFE600;
}

.hfn-prodtypes-intro {
	max-width: 54ch;
	margin: 18px auto 0;
	color: #A1A1AA;
	font-size: clamp(15px, 1.15vw, 16.5px);
	line-height: 1.65;
	text-wrap: pretty;
}

/*
 * Explicit column counts rather than auto-fit, so six cards land as a clean 3 x 2 rather
 * than 4 + 2 with a hole in the second row. Breakpoints mirror the .hfn-card-list rules.
 */
.hfn-prodtypes {
	display: grid;
	margin-top: clamp(36px, 4.5vw, 56px);
	padding: 0;
	gap: clamp(14px, 1.6vw, 22px);
	grid-template-columns: 1fr;
	list-style: none;
}

@media (min-width: 34rem) {

	.hfn-prodtypes {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 60rem) {

	.hfn-prodtypes {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.hfn-prodtype-item {
	display: flex;
	min-width: 0;
}

.hfn-prodtype {
	position: relative;
	display: flex;
	width: 100%;
	flex-direction: column;
	justify-content: flex-end;
	overflow: hidden;
	min-height: clamp(280px, 34vw, 360px);
	padding: 26px 24px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 18px;
	background: #101012;
	color: inherit;
	isolation: isolate;
	text-decoration: none;
	transition: transform 0.3s cubic-bezier(0.22, 0.68, 0.32, 1), border-color 0.3s ease, box-shadow 0.3s ease;
}

.hfn-prodtype__img {
	position: absolute;
	z-index: -2;
	inset: 0;
	background: #17171A center / cover no-repeat;
	transform: scale(1.02);
	transition: transform 0.6s cubic-bezier(0.22, 0.68, 0.32, 1);
}

.hfn-prodtype--plain .hfn-prodtype__img {
	background: radial-gradient(120% 120% at 15% 0%, rgba(255, 230, 0, 0.14), transparent 55%), #0F0F11;
}

/* Scrim, so the copy holds contrast over any photograph. */
.hfn-prodtype::before {
	position: absolute;
	z-index: -1;
	background: linear-gradient(180deg, rgba(8, 8, 10, 0.12) 0%, rgba(8, 8, 10, 0.5) 42%, rgba(6, 6, 8, 0.92) 100%);
	content: "";
	inset: 0;
}

.hfn-prodtype__num {
	margin-bottom: 10px;
	color: #FFE600;
	font-family: 'Outfit', sans-serif;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.14em;
}

.hfn-prodtype__title {
	color: #FFFFFF;
	font-family: 'Outfit', sans-serif;
	font-size: clamp(19px, 1.5vw, 22px);
	font-weight: 800;
	letter-spacing: -0.01em;
	line-height: 1.2;
}

.hfn-prodtype__note {
	display: -webkit-box;
	margin-top: 8px;
	overflow: hidden;
	color: rgba(255, 255, 255, 0.74);
	font-size: 13.5px;
	line-height: 1.55;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
}

.hfn-prodtype__cta {
	display: inline-flex;
	align-items: center;
	margin-top: 16px;
	color: #8A8A93;
	font-family: 'Outfit', sans-serif;
	font-size: 11px;
	font-weight: 800;
	gap: 7px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	transition: color 0.2s ease;
}

.hfn-prodtype__cta::after {
	content: "→";
	transition: transform 0.22s cubic-bezier(0.22, 0.68, 0.32, 1);
}

a.hfn-prodtype:hover {
	border-color: rgba(255, 230, 0, 0.4);
	box-shadow: 0 26px 55px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 230, 0, 0.07);
	transform: translateY(-4px);
}

a.hfn-prodtype:hover .hfn-prodtype__img {
	transform: scale(1.09);
}

a.hfn-prodtype:hover .hfn-prodtype__cta {
	color: #FFE600;
}

a.hfn-prodtype:hover .hfn-prodtype__cta::after {
	transform: translateX(4px);
}

a.hfn-prodtype:focus-visible {
	outline: 2px solid #FFE600;
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {

	.hfn-prodtype,
	.hfn-prodtype__img,
	.hfn-prodtype__cta::after {
		transition: none;
	}

	a.hfn-prodtype:hover {
		transform: none;
	}

	a.hfn-prodtype:hover .hfn-prodtype__img {
		transform: scale(1.02);
	}
}

/* -------------------------------------------------------------------------- */
/* Team wall: portrait grid on the About / Team pages                          */
/* -------------------------------------------------------------------------- */

/*
 * Replaces the plugin's team-grid block (see inc/team-seed.php). Compact circular
 * portraits so a full crew of fifteen reads as one wall rather than fifteen tall cards.
 */
.hfn-teamwall {
	max-width: var(--wp--style--global--wide-size, 1240px);
	margin-top: clamp(48px, 7vw, 88px);
	margin-inline: auto;
}

.hfn-teamwall__heading {
	margin: 0 auto clamp(28px, 4vw, 44px);
	max-width: 24ch;
	color: #FFFFFF;
	font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif;
	font-size: clamp(26px, 3.4vw, 40px);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.12;
	text-align: center;
	text-wrap: balance;
}

.hfn-teamwall__grid {
	display: grid;
	margin: 0;
	padding: 0;
	gap: clamp(20px, 3vw, 36px) clamp(14px, 2vw, 24px);
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	list-style: none;
}

.hfn-teammate {
	display: flex;
	min-width: 0;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.hfn-teammate__photo {
	position: relative;
	display: block;
	width: clamp(112px, 14vw, 148px);
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: 50%;
	background: #14141A;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 18px 34px rgba(0, 0, 0, 0.5);
	transition: box-shadow 0.28s ease, transform 0.28s cubic-bezier(0.22, 0.68, 0.32, 1);
}

.hfn-teammate__img,
.hfn-teammate__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hfn-teammate__img--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	background: radial-gradient(120% 120% at 30% 20%, rgba(255, 230, 0, 0.16), transparent 60%), #17171B;
	color: #FFE600;
	font-family: 'Outfit', sans-serif;
	font-size: 30px;
	font-weight: 800;
	letter-spacing: 0.02em;
}

.hfn-teammate__name {
	margin-top: 16px;
	color: #FFFFFF;
	font-family: 'Outfit', sans-serif;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.3;
	text-align: center;
}

.hfn-teammate__name a {
	color: inherit;
	text-decoration: none;
	transition: color 0.2s ease;
}

.hfn-teammate__name a:hover {
	color: #FFE600;
}

.hfn-teammate__role {
	margin-top: 5px;
	margin-inline: auto;
	max-width: 22ch;
	color: #8A8A93;
	font-family: 'Outfit', sans-serif;
	font-size: 12px;
	line-height: 1.45;
	text-align: center;
	text-wrap: pretty;
}

.hfn-teammate:hover .hfn-teammate__photo {
	box-shadow: 0 0 0 1px rgba(255, 230, 0, 0.45), 0 22px 40px rgba(0, 0, 0, 0.55);
	transform: translateY(-4px);
}

@media (max-width: 480px) {

	.hfn-teamwall__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 28px 16px;
	}
}

@media (prefers-reduced-motion: reduce) {

	.hfn-teammate__photo,
	.hfn-teammate:hover .hfn-teammate__photo {
		transition: none;
		transform: none;
	}
}

/* -------------------------------------------------------------------------- */
/* Comparison table                                                           */
/* -------------------------------------------------------------------------- */

/*
 * The shell turns a bare table into a panel. It also owns the horizontal scroll, so the
 * table can keep its own borders without a scrollbar cutting through them.
 */
.hfn-compare-shell {
	overflow-x: auto;
	border: 1px solid rgba(255, 255, 255, 0.09);
	border-radius: 20px;
	background: linear-gradient(180deg, rgba(20, 20, 22, 0.9), rgba(13, 13, 15, 0.9));
	box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5);
}

.hfn-compare {
	width: 100%;
	min-width: 680px;
	border-collapse: collapse;
	font-size: var(--wp--preset--font-size--sm);
}

.hfn-compare th,
.hfn-compare td {
	padding: 16px 18px;
	text-align: left;
}

.hfn-compare thead th {
	padding-top: 22px;
	padding-bottom: 14px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.09);
	color: var(--wp--preset--color--dim);
	font-family: 'Outfit', sans-serif;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	white-space: nowrap;
}

.hfn-compare tbody th {
	color: #C4C4CC;
	font-family: 'Outfit', sans-serif;
	font-size: 14.5px;
	font-weight: 400;
	line-height: 1.45;
}

/* One hairline between rows, never a box around each one. */
.hfn-compare tbody tr + tr th,
.hfn-compare tbody tr + tr td {
	border-top: 1px solid rgba(255, 255, 255, 0.055);
}

.hfn-compare tbody tr {
	transition: background 0.18s ease;
}

.hfn-compare tbody tr:hover {
	background: rgba(255, 255, 255, 0.022);
}

.hfn-compare tbody tr:hover th {
	color: #FFFFFF;
}

.hfn-compare td {
	width: 1%;
	text-align: center;
	white-space: nowrap;
}

/*
 * The column describing this business is the only one that gets emphasis: a tinted
 * channel running the height of the table, capped by the accent at the head.
 */
.hfn-compare .is-ours {
	background: rgba(255, 230, 0, 0.045);
	color: var(--wp--preset--color--ink);
}

.hfn-compare thead th.is-ours {
	border-bottom-color: rgba(255, 230, 0, 0.45);
	color: #FFE600;
}

.hfn-compare__icon {
	display: inline-flex;
	width: 26px;
	height: 26px;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
}

.hfn-compare__icon svg {
	width: 15px;
	height: 15px;
}

/*
 * Monochrome plus the brand accent, rather than the traffic-light green/amber/red this
 * used before. Red and green were the only two colours on the page that belonged to no
 * palette, and "no" does not need to read as an error: it is a fact about someone else.
 */
.hfn-compare__icon--yes {
	background: rgba(255, 230, 0, 0.14);
	color: #FFE600;
}

.hfn-compare__icon--partial {
	background: rgba(255, 255, 255, 0.07);
	color: #8A8A93;
}

.hfn-compare__icon--no {
	background: rgba(255, 255, 255, 0.035);
	color: #55555C;
}

/* A hint that the panel scrolls sideways before the user has to discover it. */
@media (max-width: 860px) {

	.hfn-compare-shell {
		mask-image: linear-gradient(90deg, #000 88%, transparent 100%);
		-webkit-mask-image: linear-gradient(90deg, #000 88%, transparent 100%);
	}
}

/* -------------------------------------------------------------------------- */
/* Header bar contents                                                        */
/* -------------------------------------------------------------------------- */

.hfn-header__brand {
	color: #FFFFFF;
	font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif;
	font-size: 20px;
	font-style: normal;
	font-weight: 900;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
}

.hfn-header__brand::after {
	color: #FFE600;
	content: ".";
	font-weight: 900;
}

.custom-logo-link {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
}

.custom-logo {
	max-height: 38px;
	width: auto;
	object-fit: contain;
	display: block;
}

.hfn-header__nav {
	display: flex;
	align-items: center;
	margin-left: auto;
	gap: 2px;
	background: none !important;
	border: none !important;
	padding: 0 !important;
}

.hfn-header__nav a {
	color: #A1A1AA;
	font-family: 'Outfit', sans-serif;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 7px 16px;
	border-radius: 999px;
	transition: all 0.2s ease;
}

.hfn-header__nav a:hover {
	color: #FFFFFF;
}

.hfn-header__nav a[aria-current="page"],
.hfn-header__nav a.active {
	background: #FFE600;
	color: #000000 !important;
	font-weight: 800;
}

.hfn-header__bar .hfn-header__cta {
	min-height: 40px;
	padding: 0 20px;
	font-family: 'Outfit', sans-serif;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.hfn-header__burger {
	display: none;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.15);
	background: rgba(255, 255, 255, 0.08);
	color: #FFFFFF;
	cursor: pointer;
	border-radius: 50%;
	width: 38px;
	height: 38px;
	align-items: center;
	justify-content: center;
	transition: background 0.2s ease;
}

.hfn-header__burger:hover {
	background: rgba(255, 255, 255, 0.15);
	color: #FFE600;
}

.hfn-header__drawer {
	display: flex;
	position: fixed;
	top: 72px;
	left: 16px;
	right: 16px;
	max-width: 440px;
	flex-direction: column;
	padding: 24px;
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 20px;
	backdrop-filter: blur(24px);
	-webkit-backdrop-filter: blur(24px);
	background: rgba(14, 14, 14, 0.95);
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.85), 0 0 30px rgba(255, 230, 0, 0.1);
	gap: 12px;
	margin-inline: auto;
	z-index: 10000;
}

.hfn-header__drawer[hidden] {
	display: none !important;
}

.hfn-header__drawer a:not(.pill) {
	color: #FFFFFF;
	font-family: 'Outfit', sans-serif;
	font-size: 15px;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 10px 14px;
	border-radius: 10px;
	transition: background 0.2s ease, color 0.2s ease;
}

.hfn-header__drawer a:not(.pill):hover {
	background: rgba(255, 255, 255, 0.08);
	color: #FFE600;
}

.hfn-header__drawer .pill {
	margin-top: 8px;
	width: 100%;
	min-height: 46px;
}

/* Header pill buttons */
.hfn-header .pill {
	display: inline-flex;
	min-height: 42px;
	align-items: center;
	justify-content: center;
	padding: 0 22px;
	border-radius: 999px;
	font-family: 'Outfit', sans-serif;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-decoration: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hfn-header .pill-solid {
	background: #FFE600;
	box-shadow: 0 0 20px rgba(255, 230, 0, 0.3);
	color: #000000;
}

.hfn-header .pill-solid:hover {
	transform: translateY(-2px);
	background: #FFF066;
	box-shadow: 0 0 28px rgba(255, 230, 0, 0.5);
	color: #000000;
}

@media (max-width: 900px) {

	.hfn-header__nav {
		display: none !important;
	}

	.hfn-header__burger {
		display: flex !important;
		margin-left: auto;
	}

	.hfn-header__bar .hfn-header__cta {
		display: none !important;
	}

	.hfn-header__bar {
		padding: 8px 14px;
	}
}

/* -------------------------------------------------------------------------- */

.hfn-header .wp-block-site-title a {
	color: #FFFFFF;
	font-family: 'Outfit', sans-serif;
	font-size: 20px;
	font-style: normal;
	font-weight: 900;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
}

.hfn-header .wp-block-site-title a::after {
	color: #FFE600;
	content: ".";
	font-weight: 900;
}

.hfn-header .wp-block-navigation-item__content {
	color: #94A3B8;
	font-size: 14.5px;
	font-weight: 500;
	transition: color 0.18s ease;
}

.hfn-header .wp-block-navigation-item__content:hover,
.hfn-header .current-menu-item > .wp-block-navigation-item__content {
	color: #FBBF24;
}

.hfn-header .wp-block-button__link {
	min-height: 44px;
	padding: 0 22px;
	font-size: 14.5px;
	font-weight: 700;
	color: #071912;
	background: linear-gradient(180deg, #FBBF24 0%, #F59E0B 55%, #D97706 100%);
}

/* -------------------------------------------------------------------------- */
/* Ticker                                                                     */
/* -------------------------------------------------------------------------- */

/*
 * A continuous strip of what the company actually covers. It reads as motion rather
 * than as a list, which is the point: it fills the beat after the hero without asking
 * the reader to process anything.
 */
.hfn-ticker {
	position: relative;
	overflow: hidden;
	width: 100vw;
	max-width: 100vw;
	padding-block: var(--wp--preset--spacing--40);
	border-block: 1px solid var(--line);

	/* !important defeats WordPress's constrained-layout margin:auto on this wp:html child. */
	margin-inline: calc(50% - 50vw) !important;
	mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.hfn-ticker__track {
	display: flex;
	width: max-content;
	animation: hfn-ticker 46s linear infinite;
	gap: 0;
}

.hfn-ticker:hover .hfn-ticker__track {
	animation-play-state: paused;
}

.hfn-ticker__item {
	display: inline-flex;
	align-items: center;
	padding-inline: 26px;
	color: var(--wp--preset--color--dim);
	font-size: var(--wp--preset--font-size--sm);
	gap: 26px;
	white-space: nowrap;
}

.hfn-ticker__item::after {
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--wp--preset--color--violet-soft);
	content: "";
	opacity: 0.7;
}

@keyframes hfn-ticker {

	from { transform: translateX(0); }

	to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {

	.hfn-ticker__track {
		animation: none;
	}

	.hfn-ticker {
		overflow-x: auto;
	}
}

/* -------------------------------------------------------------------------- */
/* Stage list                                                                 */
/* -------------------------------------------------------------------------- */

/* A numbered process where the number carries real information: these steps happen in
   this order, and the order is the thing that catches productions out. */
/*
 * Four stages, and the sequence is the point: these happen in this order and the lead
 * times compound. So the numbers are joined by a vertical rule that runs the height of
 * the list, which says "sequence" in a way four separate boxes never did.
 */
.hfn-stages {
	position: relative;
	display: flex;
	max-width: 1180px;
	flex-direction: column;
	gap: 14px;
	list-style: none;
	margin-inline: auto;
	padding: 0;
	counter-reset: hfn-stage;
}

.hfn-stage-item {
	position: relative;
	display: grid;
	padding: clamp(24px, 2.6vw, 36px) clamp(22px, 2.4vw, 34px);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 18px;
	background: linear-gradient(180deg, rgba(23, 23, 25, 0.88), rgba(14, 14, 16, 0.88));
	gap: clamp(20px, 2.4vw, 40px);
	grid-template-columns: 58px minmax(0, 1.15fr) minmax(0, 1fr);
	transition: border-color 0.28s ease, transform 0.28s cubic-bezier(0.22, 0.68, 0.32, 1), box-shadow 0.28s ease;
}

.hfn-stage-item:hover {
	border-color: rgba(255, 230, 0, 0.32);
	box-shadow: 0 22px 48px rgba(0, 0, 0, 0.5);
	transform: translateY(-3px);
}

/*
 * The connector. It is drawn from each item rather than the list, so it stops cleanly at
 * the last one and survives any number of stages.
 */
.hfn-stage-item:not(:last-child)::before {
	position: absolute;
	z-index: 0;
	top: calc(clamp(24px, 2.6vw, 36px) + 44px);
	bottom: -22px;
	left: calc(clamp(22px, 2.4vw, 34px) + 20px);
	width: 1px;
	background: linear-gradient(180deg, rgba(255, 230, 0, 0.4), rgba(255, 230, 0, 0.06));
	content: "";
}

.hfn-stage-item__num {
	position: relative;
	z-index: 1;
	display: flex;
	width: 40px;
	height: 40px;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(255, 230, 0, 0.35);
	border-radius: 50%;
	background: rgba(255, 230, 0, 0.08);
	color: #FFE600;
	font-family: 'Outfit', sans-serif;
	font-size: 13px;
	font-style: normal;
	font-weight: 800;
	letter-spacing: 0.02em;
	line-height: 1;
}

.hfn-stage-item__title {
	margin: 0 0 10px;
	color: #FFFFFF;
	font-family: 'Outfit', sans-serif;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.3;
}

.hfn-stage-item__text {
	margin: 0;
	color: #A1A1AA;
	font-size: 14.5px;
	line-height: 1.62;
}

/*
 * The deliverables sit in their own panel rather than loose in a third column, so the
 * eye reads "here is the stage, here is what you get from it" instead of two columns of
 * undifferentiated text.
 */
.hfn-stage-item__gets {
	display: grid;
	align-content: start;
	padding: 18px 20px;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.028);
	gap: 10px;
	grid-template-columns: 1fr;
	list-style: none;
	margin: 0;
}

.hfn-stage-item__gets li {
	position: relative;
	padding-left: 24px;
	color: #B4B4BD;
	font-size: 13px;
	line-height: 1.45;
}

.hfn-stage-item__gets li::before {
	position: absolute;
	top: 0.34em;
	left: 0;
	width: 9px;
	height: 5px;
	border-bottom: 1.5px solid #FFE600;
	border-left: 1.5px solid #FFE600;
	content: "";
	transform: rotate(-45deg);
}

@media (max-width: 900px) {

	.hfn-stage-item {
		gap: 18px;
		grid-template-columns: 44px minmax(0, 1fr);
	}

	.hfn-stage-item__gets {
		grid-column: 2;
	}

	.hfn-stage-item:not(:last-child)::before {
		left: calc(clamp(22px, 2.4vw, 34px) + 13px);
	}
}

@media (prefers-reduced-motion: reduce) {

	.hfn-stage-item {
		transition: none;
	}

	.hfn-stage-item:hover {
		transform: none;
	}
}

/* -------------------------------------------------------------------------- */
/* Closing call to action                                                     */
/* -------------------------------------------------------------------------- */

/*
 * The last thing on the page, so it gets the weight of one. A full-bleed dark field with
 * the accent glow pooling behind a raised panel, rather than a heading and a button
 * floating loose on the same black as everything above them.
 */
.hfn-close {
	position: relative;
	display: grid;
	width: 100vw;
	max-width: 100vw !important;
	margin-top: clamp(80px, 10vw, 140px);
	margin-inline: calc(50% - 50vw) !important;
	padding: clamp(56px, 7vw, 100px) 20px clamp(56px, 7vw, 96px);
	overflow: hidden;
	isolation: isolate;
	place-items: center;
}

.hfn-close::before {
	position: absolute;
	z-index: -2;
	border-top: 1px solid rgba(255, 255, 255, 0.055);
	background:
		radial-gradient(70% 100% at 50% 100%, rgba(255, 230, 0, 0.11), transparent 68%),
		linear-gradient(180deg, #08080A 0%, #0B0B0D 45%, #0D0D0F 100%);
	content: "";
	inset: 0;
	pointer-events: none;
}

.hfn-close__panel {
	position: relative;
	width: 100%;
	max-width: 780px;
	padding: clamp(36px, 4.5vw, 60px) clamp(24px, 4vw, 56px);
	border: 1px solid rgba(255, 255, 255, 0.09);
	border-radius: 26px;
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	background: linear-gradient(180deg, rgba(24, 24, 27, 0.72), rgba(14, 14, 16, 0.72));
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.07),
		0 34px 80px rgba(0, 0, 0, 0.6);
	text-align: center;
}

.hfn-close__eyebrow {
	margin: 0 0 16px;
	color: #FFE600;
	font-family: 'Outfit', sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.hfn-close h2 {
	margin: 0;
	color: #FFFFFF;
	font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif;
	font-size: clamp(30px, 4.4vw, 50px);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.08;
	text-wrap: balance;
}

.hfn-close__text {
	max-width: 54ch;
	margin: 20px auto 0;
	color: #A1A1AA;
	font-size: clamp(15px, 1.1vw, 16.5px);
	line-height: 1.65;
	text-wrap: pretty;
}

.hfn-close__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	margin-top: 34px;
	gap: 12px 26px;
}

.hfn-close__cta {
	display: inline-flex;
	min-height: 56px;
	align-items: center;
	justify-content: center;
	padding: 0 34px;
	border-radius: 999px;
	background: linear-gradient(180deg, #FFEC4D 0%, #FFE600 46%, #F5D400 100%);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.5),
		0 14px 34px rgba(255, 230, 0, 0.22);
	color: #0A0A0A;
	font-family: 'Outfit', sans-serif;
	font-size: 14px;
	font-weight: 900;
	gap: 10px;
	letter-spacing: 0.07em;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
	transition: transform 0.22s cubic-bezier(0.22, 0.68, 0.32, 1), box-shadow 0.22s ease, background 0.22s ease;
}

.hfn-close__cta::after {
	content: "→";
	transition: transform 0.22s cubic-bezier(0.22, 0.68, 0.32, 1);
}

.hfn-close__cta:hover {
	background: linear-gradient(180deg, #FFF382 0%, #FFEC4D 46%, #FFE600 100%);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.6),
		0 20px 44px rgba(255, 230, 0, 0.32);
	transform: translateY(-2px);
}

.hfn-close__cta:hover::after {
	transform: translateX(4px);
}

.hfn-close__cta:active {
	transform: translateY(0);
}

/* The secondary is a text link, not a second button: only one action here is primary. */
.hfn-close__alt {
	color: #8A8A93;
	font-family: 'Outfit', sans-serif;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	text-underline-offset: 4px;
	transition: color 0.2s ease;
}

.hfn-close__alt:hover {
	color: #FFFFFF;
	text-decoration: underline;
}

/* -------------------------------------------------------------------------- */
/* Corporate note                                                             */
/* -------------------------------------------------------------------------- */

/*
 * Company structure, which matters legally and for trust but must never compete with the
 * call to action above it. Small, dim, separated by a hairline rather than by a large
 * gap, so it reads as footing rather than as another section.
 */
.hfn-orgnote {
	max-width: 680px;
	margin: clamp(48px, 6vw, 80px) auto 0;
	padding: 28px 20px 0;
	border-top: 1px solid rgba(255, 255, 255, 0.06);
	text-align: center;
}

.hfn-orgnote p {
	margin: 0;
	color: #6E6E77;
	font-size: 13px;
	line-height: 1.65;
	text-wrap: pretty;
}

.hfn-orgnote strong {
	color: #9A9AA3;
	font-weight: 600;
}

.hfn-orgnote a {
	display: inline-block;
	margin-top: 12px;
	color: #8A8A93;
	font-family: 'Outfit', sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-decoration: none;
	text-transform: uppercase;
	transition: color 0.2s ease;
}

.hfn-orgnote a:hover {
	color: #FFE600;
}

@media (prefers-reduced-transparency: reduce) {

	.hfn-close__panel {
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		background: #141416;
	}
}

@media (prefers-reduced-motion: reduce) {

	.hfn-close__cta,
	.hfn-close__cta::after {
		transition: none;
	}

	.hfn-close__cta:hover,
	.hfn-close__cta:hover::after {
		transform: none;
	}
}

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

/*
 * Two things here that a generic agency footer does not have, and that a producer
 * planning from another continent actually needs:
 *
 * 1. The time in Nepal. The offset is UTC+5:45, which almost nobody guesses, and a
 *    producer about to call at what they think is a reasonable hour benefits from
 *    seeing it before they dial.
 * 2. This month's shooting conditions. The single most common first question is when to
 *    shoot, and the answer changes twelve times a year.
 *
 * Both are filled in by script and stay hidden without it, so nothing renders as an
 * empty box or a wrong value.
 */
.hfn-footer {
	position: relative;
	background: #080808;
	border-top: 1px solid rgba(255, 255, 255, 0.07);
	margin-top: var(--wp--preset--spacing--90);
}

.hfn-footer__inner {
	max-width: 1200px;
	margin-inline: auto;
	padding: 64px 24px 32px;
}

/* Top row: brand + CTA button */
.hfn-footer__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 32px;
	margin-bottom: 48px;
}

.hfn-footer__brand-name {
	display: block;
	font-family: 'Outfit', sans-serif;
	font-size: 22px;
	font-weight: 900;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #FFFFFF;
	text-decoration: none;
	margin-bottom: 14px;
}

.hfn-footer__brand-name::after {
	content: "";
}

.hfn-footer__blurb {
	max-width: 38ch;
	color: #71717A;
	font-family: 'Outfit', sans-serif;
	font-size: 14px;
	line-height: 1.7;
	margin: 0;
}

.hfn-footer__cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
	padding: 0 24px;
	height: 46px;
	border: 1px solid rgba(255, 230, 0, 0.5);
	border-radius: 999px;
	background: rgba(255, 230, 0, 0.06);
	color: #FFE600;
	font-family: 'Outfit', sans-serif;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background 0.2s ease, border-color 0.2s ease;
}

.hfn-footer__cta:hover {
	background: rgba(255, 230, 0, 0.12);
	border-color: #FFE600;
	color: #FFE600;
}

/* Divider */
.hfn-footer__divider {
	height: 1px;
	background: rgba(255, 255, 255, 0.07);
	margin-bottom: 48px;
}

/* Nav grid — 3 equal columns */
.hfn-footer__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 40px;
	margin-bottom: 48px;
}

.hfn-footer__col h3 {
	font-family: 'Outfit', sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #FFE600;
	margin: 0 0 20px;
}

.hfn-footer__col ul {
	display: flex;
	flex-direction: column;
	gap: 12px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.hfn-footer__col a {
	color: #71717A;
	font-family: 'Outfit', sans-serif;
	font-size: 14px;
	text-decoration: none;
	transition: color 0.2s ease;
}

.hfn-footer__col a:hover {
	color: #FFFFFF;
}

/* Status box */
.hfn-footer__status {
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.03);
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.hfn-footer__status[hidden] {
	display: none;
}

.hfn-footer__status h3 {
	font-family: 'Outfit', sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #FFE600;
	margin: 0 0 4px;
}

.hfn-footer__status-item {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.hfn-footer__status-label {
	font-family: 'Outfit', sans-serif;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #52525B;
}

.hfn-footer__status-value {
	font-family: 'Outfit', sans-serif;
	font-size: 15px;
	font-weight: 600;
	color: #FFFFFF;
}

/* Legal row */
.hfn-footer__legal {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
}

.hfn-footer__legal p {
	color: #3F3F46;
	font-family: 'Outfit', sans-serif;
	font-size: 13px;
	margin: 0;
}

.hfn-footer__legal-links {
	display: flex;
	gap: 24px;
}

.hfn-footer__legal-links a {
	color: #3F3F46;
	font-family: 'Outfit', sans-serif;
	font-size: 13px;
	text-decoration: none;
	transition: color 0.2s ease;
}

.hfn-footer__legal-links a:hover {
	color: #71717A;
}

/* Responsive */
@media (max-width: 1024px) {
	.hfn-footer__grid {
		grid-template-columns: repeat(3, 1fr);
	}
	.hfn-footer__status {
		grid-column: 1 / -1;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 24px;
	}
	.hfn-footer__status h3 {
		width: 100%;
		margin-bottom: 0;
	}
}

@media (max-width: 720px) {
	.hfn-footer__top {
		flex-direction: column;
	}
	.hfn-footer__grid {
		grid-template-columns: 1fr 1fr;
	}
}

/*
 * The footer's small-screen rules were pasted into the middle of the status table's own
 * media query, which closed it early. That left the two .hfn-status__cell rules outside
 * any query (so the stacked-cell borders applied at every width) and a stray brace behind
 * them. Both blocks are whole again below.
 */
@media (max-width: 480px) {

	.hfn-footer__grid {
		grid-template-columns: 1fr;
	}

	.hfn-status__cell {
		border-right: 0;
		border-bottom: 1px solid var(--line);
	}

	.hfn-status__cell:last-child {
		border-bottom: 0;
	}
}

/* -------------------------------------------------------------------------- */
/* Client wall                                                                */
/* -------------------------------------------------------------------------- */

/*
 * Wordmarks as text rather than image files. No logo assets have been supplied, and set
 * in the site's own face at low opacity a name reads as a considered credit rather than
 * a scraped logo. It is also accessible, always sharp, and carries no trademark file.
 */
.hfn-clients {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px 34px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.hfn-clients__item {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--sm);
	letter-spacing: 0.04em;
	opacity: 0.55;
	transition: opacity var(--dur-med) var(--ease-out);
}

.hfn-clients__item:hover {
	opacity: 1;
}

/* -------------------------------------------------------------------------- */
/* People                                                                     */
/* -------------------------------------------------------------------------- */

.hfn-people {
	display: grid;
	gap: var(--wp--preset--spacing--50);
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.hfn-person {
	display: flex;
	overflow: hidden;
	flex-direction: column;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: var(--glass);
	transition: transform var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out);
}

.hfn-person:hover {
	border-color: var(--line-strong);
	transform: translateY(-4px);
}

.hfn-person__portrait {
	display: grid;
	aspect-ratio: 3 / 4;
	background: linear-gradient(165deg, #154031 0%, #0E3024 55%, #072017 100%);
	color: var(--wp--preset--color--dim);
	place-items: center;
}

.hfn-person__portrait svg {
	width: 34px;
	height: 34px;
	opacity: 0.5;
}

.hfn-person__body {
	padding: var(--wp--preset--spacing--40);
}

.hfn-person__name {
	margin: 0;
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 500;
}

.hfn-person__role {
	margin: 4px 0 0;
	color: var(--wp--preset--color--emerald-soft);
	font-size: var(--wp--preset--font-size--xs);
}

.hfn-person__bio {
	margin: 12px 0 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.55;
}

/* -------------------------------------------------------------------------- */
/* Case studies                                                               */
/* -------------------------------------------------------------------------- */

.hfn-cases {
	display: grid;
	gap: var(--wp--preset--spacing--50);
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.hfn-case {
	display: flex;
	overflow: hidden;
	flex-direction: column;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: var(--glass);
	transition: transform var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out);
}

.hfn-case:hover {
	border-color: var(--line-strong);
	transform: translateY(-6px);
}

/* Exactly one featured card per grid, per the brand guidelines. */
.hfn-case--glow {
	border-color: rgb(173 214 255 / 30%);
	box-shadow: 0 26px 70px rgb(60 90 220 / 22%), 0 0 46px rgb(131 36 255 / 16%);
}

.hfn-case__media {
	position: relative;
	display: grid;
	aspect-ratio: 16 / 10;
	background: linear-gradient(165deg, #154031 0%, #0E3024 55%, #072017 100%);
	color: var(--wp--preset--color--dim);
	place-items: center;
}

.hfn-case__media svg {
	width: 30px;
	height: 30px;
	opacity: 0.45;
}

.hfn-case__tag {
	position: absolute;
	bottom: 12px;
	left: 12px;
	padding: 5px 10px;
	border: 1px solid rgb(255 255 255 / 14%);
	border-radius: var(--r-pill);
	backdrop-filter: blur(6px);
	background: rgb(11 8 18 / 45%);
	color: rgb(244 242 248 / 85%);
	font-size: 10px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.hfn-case__body {
	padding: var(--wp--preset--spacing--40);
}

.hfn-case__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 500;
}

.hfn-case__strap {
	margin: 10px 0 0;
	color: var(--wp--preset--color--violet-soft);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.5;
}

.hfn-case__problem {
	margin: 12px 0 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.6;
}

/* -------------------------------------------------------------------------- */
/* Client Logo Marquee                                                        */
/* -------------------------------------------------------------------------- */

.hfn-logos-label {
	text-align: center;
	font-family: 'Outfit', sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.25);
	margin-bottom: 36px;
}

.hfn-logo-marquee {
	position: relative;
	display: flex;
	overflow: hidden;
	width: 100vw;
	max-width: 100vw;
	margin-inline: calc(50% - 50vw);
	gap: 0;
	padding-block: 4px;
	border-top: 1px solid rgba(255, 255, 255, 0.07);
	border-bottom: 1px solid rgba(255, 255, 255, 0.07);
	mask-image: linear-gradient(
		90deg,
		transparent 0%,
		#000 8%,
		#000 92%,
		transparent 100%
	);
	-webkit-mask-image: linear-gradient(
		90deg,
		transparent 0%,
		#000 8%,
		#000 92%,
		transparent 100%
	);
}

.hfn-logo-marquee__track {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	gap: 0;
	list-style: none;
	margin: 0;
	padding: 0;
	animation: hfn-logo-scroll 36s linear infinite;
}

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

.hfn-logo-marquee__item {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 12px 52px;
	border-right: 1px solid rgba(255, 255, 255, 0.08);
	flex-shrink: 0;
	min-height: 72px;
}

.hfn-logo-marquee__item img {
	height: 40px;
	width: auto;
	max-width: 160px;
	object-fit: contain;
	filter: grayscale(1) brightness(0) invert(1);
	opacity: 0.5;
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.hfn-logo-marquee:hover .hfn-logo-marquee__item img {
	opacity: 0.85;
	transform: scale(1.05);
}

/* Text-only placeholder items (when no image uploaded) */
.hfn-logo-marquee__item--text span {
	font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif;
	font-size: 15px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.35);
	white-space: nowrap;
	transition: color 0.3s ease;
}

.hfn-logo-marquee:hover .hfn-logo-marquee__item--text span {
	color: rgba(255, 255, 255, 0.65);
}

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

@media (prefers-reduced-motion: reduce) {
	.hfn-logo-marquee__track {
		animation: none;
	}
	.hfn-logo-marquee {
		overflow-x: auto;
		mask-image: none;
		-webkit-mask-image: none;
	}
}

/* -------------------------------------------------------------------------- */
/* Image showcase: alternating photo and text rows                            */
/* -------------------------------------------------------------------------- */

/*
 * The media column takes the larger share. An even split leaves the photograph looking
 * like an afterthought next to a full column of prose, and the copy here is short enough
 * that it does not need half the page.
 */
.hfn-showcase {
	display: grid;
	align-items: center;
	margin-top: var(--wp--preset--spacing--50);
	gap: clamp(32px, 5vw, 72px);
	grid-template-columns: 1.15fr 1fr;
}

.hfn-showcase--flip .hfn-showcase__media {
	order: 2;
}

.hfn-showcase__media {
	position: relative;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 20px;
	background: #121212;
	box-shadow: 0 40px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.hfn-showcase__media img {
	display: block;
	width: 100%;
	height: 100%;
	max-height: 560px;
	object-fit: cover;
	aspect-ratio: 5 / 4;
	opacity: 0.92;
	transition: opacity 0.4s ease, transform 0.4s ease;
}

.hfn-showcase__media:hover img {
	opacity: 1;
	transform: scale(1.02);
}

.hfn-showcase__eyebrow {
	display: inline-block;
	color: #FFE600;
	font-family: 'Outfit', sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	margin-bottom: 16px;
}

.hfn-showcase__body h2 {
	margin-top: 0;
	font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif;
	font-size: clamp(26px, 3vw, 40px);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.15;
	color: #FFFFFF;
}

.hfn-showcase__body h2 .hfn-serif,
.hfn-showcase__body h2 em,
.hfn-showcase__body h2 span {
	font-style: normal;
	color: #FFE600;
}

.hfn-showcase__body p {
	max-width: 52ch;
	margin-top: var(--wp--preset--spacing--30);
	color: #A1A1AA;
	line-height: 1.75;
	font-size: 15px;
}

.hfn-showcase__list {
	margin-top: var(--wp--preset--spacing--40);
	list-style: none;
	padding: 0;
	display: grid;
	gap: 14px;
}

.hfn-showcase__list li {
	position: relative;
	padding-left: 32px;
	color: #A1A1AA;
	font-size: 14px;
	line-height: 1.55;
	font-family: 'Outfit', sans-serif;
}

.hfn-showcase__list li::before {
	position: absolute;
	top: 1px;
	left: 0;
	width: 20px;
	height: 20px;
	border: 1px solid rgba(255, 230, 0, 0.4);
	border-radius: 50%;
	background: rgba(255, 230, 0, 0.08);
	content: "";
}

.hfn-showcase__list li::after {
	position: absolute;
	top: 6px;
	left: 5px;
	width: 9px;
	height: 5px;
	border-bottom: 1.5px solid #FFE600;
	border-left: 1.5px solid #FFE600;
	content: "";
	transform: rotate(-45deg);
}


/* -------------------------------------------------------------------------- */
/* Full-bleed image band with an overlaid line                                */
/* -------------------------------------------------------------------------- */

.hfn-imageband {
	position: relative;
	display: grid;
	width: 100vw;

	/* The constrained layout caps children at content-size; override so the band spans the
	   viewport, matching the hero and ticker. */
	max-width: 100vw !important;
	min-height: clamp(380px, 52vh, 580px);
	margin-inline: calc(50% - 50vw) !important;
	margin-block: clamp(64px, 10vh, 120px);
	overflow: hidden;
	background-position: center;
	background-size: cover;
	place-items: center;
	isolation: isolate;
}

/*
 * Two scrim layers doing different jobs. The first is a vertical wash that fades the
 * photograph into the page background at the top and bottom edges, so the band reads as
 * part of the page rather than a rectangle pasted onto it. The second is a centre-weighted
 * pool that darkens behind the copy without flattening the whole image, which is what the
 * old single 82% wash did.
 */
.hfn-imageband::before {
	position: absolute;
	z-index: -1;
	background:
		linear-gradient(180deg, #080808 0%, rgba(8, 8, 8, 0.35) 22%, rgba(8, 8, 8, 0.35) 78%, #080808 100%),
		radial-gradient(72% 82% at 50% 50%, rgba(6, 6, 8, 0.82) 0%, rgba(6, 6, 8, 0.45) 55%, rgba(6, 6, 8, 0.2) 100%);
	content: "";
	inset: 0;
}

/* A whisper of the brand colour across the top edge, tying the band to the accent. */
.hfn-imageband::after {
	position: absolute;
	z-index: -1;
	background: radial-gradient(60% 100% at 50% 0%, rgba(255, 230, 0, 0.07), transparent 70%);
	content: "";
	inset: 0;
	pointer-events: none;
}

.hfn-imageband__inner {
	max-width: 820px;
	padding: clamp(48px, 8vh, 88px) var(--wp--preset--spacing--50);
	text-align: center;
}

.hfn-imageband__eyebrow {
	margin: 0;
	color: #FFE600;
	font-family: 'Outfit', sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.hfn-imageband h2 {
	margin-top: 18px;
	font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif;
	font-size: clamp(30px, 4.6vw, 54px);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.08;
	text-shadow: 0 2px 30px rgba(0, 0, 0, 0.5);
	text-wrap: balance;
}

.hfn-imageband p {
	max-width: 58ch;
	margin: 22px auto 0;
	color: rgba(255, 255, 255, 0.78);
	font-size: clamp(15px, 1.15vw, 16.5px);
	line-height: 1.68;
	text-wrap: pretty;
}

/*
 * The band carried no action at all, which made a full-viewport photograph a decoration.
 * The glass treatment keeps the photograph readable through the button instead of
 * punching a solid slab into the middle of it.
 */
.hfn-imageband__cta {
	display: inline-flex;
	min-height: 54px;
	align-items: center;
	justify-content: center;
	margin-top: 32px;
	padding: 0 32px;
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 999px;
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.05));
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.2),
		0 12px 34px rgba(0, 0, 0, 0.5);
	color: #FFFFFF;
	font-family: 'Outfit', sans-serif;
	font-size: 13px;
	font-weight: 800;
	gap: 10px;
	letter-spacing: 0.07em;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
	transition: transform 0.22s cubic-bezier(0.22, 0.68, 0.32, 1), background 0.22s ease, border-color 0.22s ease, color 0.22s ease;
}

.hfn-imageband__cta::after {
	content: "→";
	transition: transform 0.22s cubic-bezier(0.22, 0.68, 0.32, 1);
}

.hfn-imageband__cta:hover {
	border-color: #FFE600;
	background: linear-gradient(180deg, #FFEC4D, #FFE600);
	color: #0A0A0A;
	transform: translateY(-2px);
}

.hfn-imageband__cta:hover::after {
	transform: translateX(4px);
}

.hfn-imageband__cta:active {
	transform: translateY(0);
}

@media (prefers-reduced-transparency: reduce) {

	.hfn-imageband__cta {
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		background: rgba(20, 20, 22, 0.92);
	}
}

@media (prefers-reduced-motion: reduce) {

	.hfn-imageband__cta,
	.hfn-imageband__cta::after,
	.hfn-shot {
		transition: none;
	}

	.hfn-imageband__cta:hover,
	.hfn-imageband__cta:hover::after,
	.hfn-shot:hover {
		transform: none;
	}
}

/* -------------------------------------------------------------------------- */
/* Project video: full-bleed cinematic reel                                   */
/* -------------------------------------------------------------------------- */

/*
 * Same 100vw break-out the hero, ticker and image band use, so the reel spans the
 * viewport while its content stays on a comfortable measure. The video itself is a
 * poster + native controls: nothing downloads until the visitor presses play, which
 * keeps a 30MB+ clip off the homepage's initial payload.
 */
.hfn-filmreel {
	position: relative;
	width: 100vw;
	max-width: 100vw !important;
	margin-inline: calc(50% - 50vw) !important;
	margin-block: clamp(64px, 10vh, 120px);
	padding-block: clamp(56px, 8vw, 104px);
	overflow: hidden;
	border-top: 1px solid rgba(255, 255, 255, 0.055);
	border-bottom: 1px solid rgba(255, 255, 255, 0.04);
	background: linear-gradient(180deg, #080808 0%, #0B0B0D 50%, #080808 100%);
	isolation: isolate;
}

.hfn-filmreel::before {
	position: absolute;
	z-index: -1;
	background: radial-gradient(60% 60% at 50% 0%, rgba(255, 230, 0, 0.06), transparent 70%);
	content: "";
	inset: 0;
	pointer-events: none;
}

.hfn-filmreel__inner {
	max-width: 1180px;
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--50);
	text-align: center;
}

.hfn-filmreel__eyebrow {
	margin: 0;
	color: #FFE600;
	font-family: 'Outfit', sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.hfn-filmreel__title {
	margin-top: 18px;
	font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif;
	font-size: clamp(28px, 4.2vw, 50px);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.1;
	color: #FFFFFF;
	text-wrap: balance;
}

.hfn-filmreel__title .hfn-serif,
.hfn-filmreel__title em,
.hfn-filmreel__title span {
	font-style: normal;
	color: #FFE600;
}

.hfn-filmreel__lead {
	max-width: 58ch;
	margin: 20px auto 0;
	color: rgba(255, 255, 255, 0.72);
	font-size: clamp(15px, 1.15vw, 16.5px);
	line-height: 1.68;
	text-wrap: pretty;
}

.hfn-filmreel__frame {
	position: relative;
	margin: clamp(28px, 4vw, 48px) auto 0;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 18px;
	background: #000;
	box-shadow: 0 50px 100px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.04);
	aspect-ratio: 16 / 9;
}

.hfn-filmreel__video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	background: #000;
}

@media (max-width: 640px) {

	.hfn-filmreel__inner {
		padding-inline: var(--wp--preset--spacing--40);
	}

	.hfn-filmreel__frame {
		border-radius: 14px;
	}
}

/* -------------------------------------------------------------------------- */
/* Project video: split reel beside copy                                      */
/* -------------------------------------------------------------------------- */

/*
 * The mirror of .hfn-showcase, but the media column carries a video and sits on the
 * right. Same 16/9 poster-and-controls treatment as .hfn-filmreel.
 */
.hfn-videosplit {
	display: grid;
	align-items: center;
	margin-top: var(--wp--preset--spacing--50);
	gap: clamp(32px, 5vw, 72px);
	grid-template-columns: 1fr 1.15fr;
}

.hfn-videosplit__media {
	order: 2;
	position: relative;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 20px;
	background: #000;
	box-shadow: 0 40px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.04);
	aspect-ratio: 16 / 9;
}

.hfn-videosplit__media video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	background: #000;
}

.hfn-videosplit__eyebrow {
	display: inline-block;
	margin-bottom: 16px;
	color: #FFE600;
	font-family: 'Outfit', sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.hfn-videosplit__body h2 {
	margin-top: 0;
	font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif;
	font-size: clamp(26px, 3vw, 40px);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.15;
	color: #FFFFFF;
}

.hfn-videosplit__body h2 .hfn-serif,
.hfn-videosplit__body h2 em,
.hfn-videosplit__body h2 span {
	font-style: normal;
	color: #FFE600;
}

.hfn-videosplit__body p {
	max-width: 52ch;
	margin-top: var(--wp--preset--spacing--30);
	color: #A1A1AA;
	line-height: 1.75;
	font-size: 15px;
}

.hfn-videosplit__cta {
	display: inline-flex;
	align-items: center;
	height: 48px;
	margin-top: 32px;
	padding: 0 28px;
	border-radius: 999px;
	background: #FFE600;
	color: #000;
	font-family: 'Outfit', sans-serif;
	font-size: 13px;
	font-weight: 800;
	gap: 8px;
	letter-spacing: 0.05em;
	text-decoration: none;
	text-transform: uppercase;
	transition: transform 0.22s cubic-bezier(0.22, 0.68, 0.32, 1), background 0.22s ease;
}

.hfn-videosplit__cta:hover {
	background: #FFEC4D;
	transform: translateY(-2px);
}

.hfn-videosplit__cta:active {
	transform: translateY(0);
}

@media (max-width: 782px) {

	.hfn-videosplit {
		grid-template-columns: 1fr;
	}

	.hfn-videosplit__media {
		order: 0;
	}
}

@media (prefers-reduced-motion: reduce) {

	.hfn-videosplit__cta,
	.hfn-videosplit__cta:hover {
		transform: none;
		transition: none;
	}
}

/* -------------------------------------------------------------------------- */
/* Image cards (locations and the like)                                       */
/* -------------------------------------------------------------------------- */

.hfn-shots {
	display: grid;
	margin-top: var(--wp--preset--spacing--50);
	gap: var(--wp--preset--spacing--40);
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	list-style: none;
	padding: 0;
}

.hfn-shot {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 4 / 5;
	border: 1px solid rgba(255, 255, 255, 0.09);
	border-radius: 20px;
	text-decoration: none;
	isolation: isolate;
	transition: transform 0.3s cubic-bezier(0.22, 0.68, 0.32, 1), border-color 0.3s ease, box-shadow 0.3s ease;
}

.hfn-shot:hover {
	border-color: rgba(255, 230, 0, 0.35);
	box-shadow: 0 26px 55px rgba(0, 0, 0, 0.6);
	transform: translateY(-5px);
}

.hfn-shot img {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--dur-rise) var(--ease-out);
}

.hfn-shot::after {
	position: absolute;
	z-index: -1;
	background: linear-gradient(180deg, rgba(8, 8, 9, 0) 34%, rgba(8, 8, 9, 0.72) 68%, rgba(6, 6, 7, 0.95) 100%);
	content: "";
	inset: 0;
}

.hfn-shot:hover img {
	transform: scale(1.05);
}

/*
 * The caption was `height: 100%` plus padding on a page with no global border-box, so it
 * measured a full card tall and then grew by its own padding on top of that. The bottom
 * of every note was pushed past the card edge and clipped by the overflow. Filling the
 * card by inset instead means the padding is inside the box whatever box-sizing applies.
 */
.hfn-shot__body {
	position: absolute;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: var(--wp--preset--spacing--40);
	inset: 0;
}

.hfn-shot__title {
	display: block;
	margin: 0;
	color: var(--wp--preset--color--ink);
	font-family: 'Outfit', sans-serif;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.3;
}

.hfn-shot__note {
	display: block;
	margin: 6px 0 0;
	color: rgba(255, 255, 255, 0.72);
	font-size: 13.5px;
	line-height: 1.5;
}

@media (max-width: 782px) {

	.hfn-showcase {
		grid-template-columns: 1fr;
	}

	.hfn-showcase--flip .hfn-showcase__media {
		order: 0;
	}
}

@media (prefers-reduced-motion: reduce) {

	.hfn-shot img {
		transition: none;
	}

	.hfn-shot:hover img {
		transform: none;
	}
}