/* HFM product showcase. Scoped so theme chrome stays intact. */

.hfm {
	--ink: #161410;
	--ink-soft: #3c372f;
	--muted: #6f675d;
	--line: rgba(22, 20, 16, 0.1);
	--paper: #f4f0e8;
	--paper-2: #ebe4d8;
	--white: #fffcf8;
	--gold: #c4a574;
	--gold-deep: #8d6a3a;
	--moss: #234237;
	--navy: #1c2740;
	--shadow: 0 30px 70px rgba(22, 20, 16, 0.1);
	--sans: "Plus Jakarta Sans", "Montserrat", system-ui, sans-serif;
	--display: "Outfit", "Plus Jakarta Sans", system-ui, sans-serif;
	color: var(--ink);
	font-family: var(--sans);
	background: var(--white);
	overflow: clip;
}

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

.hfm p {
	margin: 0;
}

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

.hfm button {
	font: inherit;
	color: inherit;
	background: transparent;
	border: 0;
	border-radius: 999px;
	padding: 0;
	cursor: pointer;
}

.hfm-wrap {
	width: min(1180px, calc(100% - 2.5rem));
	margin-inline: auto;
}

.hfm-section {
	padding: 5.5rem 0;
	scroll-margin-top: 6.5rem;
}

.hfm-section--paper {
	background: var(--paper);
}

.hfm-section--ink {
	background: var(--ink);
	color: #f6f1e8;
}

.hfm-section--ink h2,
.hfm-section--ink h3,
.hfm-final,
.hfm-final h2 {
	color: #f6f1e8;
}

.hfm-kicker {
	margin: 0 0 0.85rem;
	font-size: 0.72rem;
	font-weight: 650;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--gold-deep);
}

.hfm-section--ink .hfm-kicker {
	color: var(--gold);
}

.hfm-title {
	margin: 0;
	font-family: var(--display);
	font-weight: 600;
	letter-spacing: -0.035em;
	line-height: 1.05;
	color: var(--ink);
}

.hfm h1.hfm-title,
.hfm h2.hfm-title,
.hfm h3 {
	color: var(--ink);
}

.hfm .hfm-section--ink h2.hfm-title,
.hfm .hfm-final h2.hfm-title,
.hfm .hfm-section--ink h3,
.hfm .hfm-vargrid h3,
.hfm .hfm-vargrid p {
	color: #f6f1e8;
}

.hfm .hfm-vargrid p,
.hfm .hfm-section--ink .hfm-lede,
.hfm .hfm-final .hfm-lede {
	color: rgba(246, 241, 232, 0.78);
}

.hfm-title--hero {
	font-size: clamp(2.4rem, 4.6vw, 4.15rem);
	max-width: 12ch;
}

.hfm-title--section {
	font-size: clamp(1.85rem, 3vw, 2.7rem);
	max-width: 16ch;
}

.elementor-1203 .elementor-heading-title {
	text-transform: none;
}

.hfm-lede {
	max-width: 38rem;
	margin-top: 1rem;
	color: var(--ink-soft);
	font-size: 1.05rem;
	line-height: 1.65;
}

.hfm-section--ink .hfm-lede {
	color: rgba(246, 241, 232, 0.78);
}

.hfm-head {
	display: grid;
	gap: 1.5rem;
	margin-bottom: 2.4rem;
}

@media (min-width: 860px) {
	.hfm-head {
		grid-template-columns: 1.1fr 0.9fr;
		align-items: end;
	}

	.hfm-head .hfm-lede {
		margin-top: 0;
		justify-self: end;
	}
}

.hfm-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 1.6rem;
}

.hfm-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 3rem;
	padding: 0.7rem 1.25rem;
	border-radius: 999px;
	border: 1px solid transparent;
	font-size: 0.95rem;
	font-weight: 650;
	line-height: 1;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.hfm-btn:hover {
	transform: translateY(-1px);
}

.hfm-btn--ink {
	background: var(--ink);
	color: #fff;
}

.hfm-btn--ink:hover {
	background: #2a241c;
	color: #fff;
}

.hfm-btn--line {
	border-color: rgba(22, 20, 16, 0.2);
	background: transparent;
	color: var(--ink);
}

.hfm-btn--line:hover {
	border-color: var(--ink);
	background: transparent;
	color: var(--ink);
}

.hfm-section--ink .hfm-btn--ink {
	background: var(--gold);
	color: #1a140c;
}

.hfm-section--ink .hfm-btn--ink:hover {
	background: #d7bc93;
	color: #1a140c;
}

.hfm-section--ink .hfm-btn--line {
	border-color: rgba(246, 241, 232, 0.28);
	color: #f6f1e8;
}

.hfm-section--ink .hfm-btn--line:hover {
	border-color: #f6f1e8;
	color: #f6f1e8;
	background: transparent;
}

.hfm-note {
	margin-top: 1rem;
	color: var(--muted);
	font-size: 0.82rem;
}

/* Hero */

.hfm-hero {
	padding: 4.2rem 0 3.2rem;
	background:
		radial-gradient(900px 420px at 85% 0%, rgba(196, 165, 116, 0.18), transparent 60%),
		var(--paper);
}

.hfm-hero__grid {
	display: grid;
	gap: 2.5rem;
	align-items: center;
}

@media (min-width: 980px) {
	.hfm-hero__grid {
		grid-template-columns: 0.86fr 1.14fr;
	}
}

.hfm-product {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	margin-bottom: 1rem;
	padding: 0.35rem 0.7rem 0.35rem 0.4rem;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: rgba(255, 252, 248, 0.7);
	font-size: 0.78rem;
	font-weight: 650;
}

.hfm-mark {
	display: grid;
	place-items: center;
	width: 1.45rem;
	height: 1.45rem;
	border-radius: 0.4rem;
	background: var(--ink);
	color: var(--gold);
	font-family: var(--display);
	font-size: 0.72rem;
	font-weight: 700;
}

/* Browser mock */

.hfm-browser {
	border: 1px solid rgba(22, 20, 16, 0.08);
	border-radius: 1.15rem;
	background: #fff;
	box-shadow: var(--shadow);
	overflow: hidden;
}

.hfm-browser__bar {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	padding: 0.7rem 0.9rem;
	background: #f7f4ee;
	border-bottom: 1px solid var(--line);
}

.hfm-dots {
	display: flex;
	gap: 0.32rem;
}

.hfm-dots i {
	width: 0.55rem;
	height: 0.55rem;
	border-radius: 50%;
	background: #ddd4c6;
}

.hfm-dots i:first-child { background: #e3b7a4; }
.hfm-dots i:nth-child(2) { background: #ead7a4; }
.hfm-dots i:nth-child(3) { background: #c9d7c2; }

.hfm-url {
	flex: 1;
	min-width: 0;
	padding: 0.28rem 0.7rem;
	border-radius: 999px;
	background: #fff;
	color: var(--muted);
	font-size: 0.72rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.hfm-site {
	background: #fbfaf7;
}

.hfm-bar {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	min-height: 3.4rem;
	padding: 0.55rem 0.9rem;
	background: #fff;
	border-bottom: 1px solid rgba(22, 20, 16, 0.06);
}

.hfm-logo {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-family: var(--display);
	font-weight: 650;
	font-size: 0.92rem;
	letter-spacing: -0.03em;
}

.hfm-logo__gem {
	width: 1.15rem;
	height: 1.15rem;
	border-radius: 0.35rem;
	background: linear-gradient(145deg, #1a1714, #3a3228);
	box-shadow: inset 0 0 0 1px rgba(196, 165, 116, 0.7);
}

.hfm-logo__img {
	display: block;
	height: 1.35rem;
	width: auto;
	max-width: 7.5rem;
	object-fit: contain;
}

.hfm-nav {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	margin-left: auto;
	color: var(--ink-soft);
	font-size: 0.75rem;
	font-weight: 600;
}

.hfm-nav span.is-open {
	color: var(--ink);
}

.hfm-caret {
	display: inline-block;
	width: 0.35rem;
	height: 0.35rem;
	margin-left: 0.2rem;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-0.1rem) rotate(45deg);
}

.hfm-pill {
	display: inline-flex;
	align-items: center;
	padding: 0.38rem 0.7rem;
	border-radius: 999px;
	background: #1a1714;
	color: #fff;
	font-size: 0.72rem;
	font-weight: 650;
}

.hfm-hero-art {
	display: grid;
	grid-template-columns: 1.2fr 0.8fr;
	gap: 0.8rem;
	min-height: 11rem;
	padding: 1rem;
}

.hfm-hero-art__copy {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 1rem;
	border-radius: 0.9rem;
	background:
		linear-gradient(180deg, rgba(22, 20, 16, 0.05), rgba(22, 20, 16, 0.45)),
		linear-gradient(135deg, #d7c4a4, #8d9a86 55%, #24352d);
	color: #fff;
	min-height: 9.5rem;
}

.hfm-hero-art__copy strong {
	font-family: var(--display);
	font-size: 1.35rem;
	font-weight: 600;
	letter-spacing: -0.03em;
	line-height: 1.1;
}

.hfm-hero-art__copy span {
	margin-top: 0.35rem;
	font-size: 0.75rem;
	opacity: 0.85;
}

.hfm-cards {
	display: grid;
	gap: 0.55rem;
}

.hfm-cards i {
	display: block;
	height: 2.7rem;
	border-radius: 0.7rem;
	background: #efe8dc;
}

.hfm-cards i:nth-child(2) { background: #e4ece6; }
.hfm-cards i:nth-child(3) { background: #f3e7d4; }

.hfm-mega {
	display: grid;
	grid-template-columns: 1.15fr 0.7fr 0.7fr 0.7fr;
	gap: 0.7rem;
	margin: 0 0.7rem 0.7rem;
	padding: 0.85rem;
	border-radius: 0.9rem;
	background: #fff;
	box-shadow: 0 16px 40px rgba(22, 20, 16, 0.08);
}

.hfm-mega__feat {
	padding: 0.35rem;
}

.hfm-mega__shot {
	height: 4.4rem;
	border-radius: 0.65rem;
	background:
		linear-gradient(160deg, rgba(255, 255, 255, 0.2), transparent 40%),
		linear-gradient(135deg, #efe2cc, #c4a574 40%, #6e8f7c);
}

.hfm-mega h4,
.hfm-mega h5 {
	margin: 0.45rem 0 0.2rem;
	font-family: var(--display);
	letter-spacing: -0.03em;
}

.hfm-mega h5 {
	font-size: 0.62rem;
	font-weight: 650;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--gold-deep);
}

.hfm-mega h4 {
	font-size: 0.95rem;
	font-weight: 600;
}

.hfm-mega p,
.hfm-mega li {
	color: var(--muted);
	font-size: 0.72rem;
	line-height: 1.45;
}

.hfm-mega ul {
	margin: 0.35rem 0 0;
	padding: 0;
	list-style: none;
}

.hfm-mega li + li {
	margin-top: 0.28rem;
}

.hfm-stage {
	position: relative;
	padding-bottom: 1.6rem;
}

.hfm-float {
	position: absolute;
	right: -0.4rem;
	bottom: -1.3rem;
	width: min(250px, 70%);
	padding: 0.75rem;
	border: 1px solid var(--line);
	border-radius: 0.95rem;
	background: rgba(255, 252, 248, 0.96);
	box-shadow: 0 18px 40px rgba(22, 20, 16, 0.12);
}

.hfm-float__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 0.55rem;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.hfm-float__tabs {
	display: flex;
	gap: 0.35rem;
	color: var(--muted);
	font-weight: 650;
	letter-spacing: 0;
	text-transform: none;
}

.hfm-float__tabs b {
	color: var(--ink);
	border-bottom: 2px solid var(--gold);
}

.hfm-widget {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.38rem 0.4rem;
	border-radius: 0.45rem;
	font-size: 0.75rem;
}

.hfm-widget.is-on {
	background: #f3ecdf;
	outline: 1px solid rgba(196, 165, 116, 0.7);
}

.hfm-widget i {
	width: 0.85rem;
	height: 0.85rem;
	border-radius: 0.2rem;
	background: #1a1714;
}

.hfm-jump {
	position: sticky;
	top: 4.7rem;
	z-index: 15;
	background: rgba(255, 252, 248, 0.92);
	border-bottom: 1px solid var(--line);
	backdrop-filter: blur(14px);
}

.hfm-jump__row {
	display: flex;
	gap: 0.35rem;
	overflow-x: auto;
	padding: 0.7rem 0;
	scrollbar-width: none;
}

.hfm-jump__row::-webkit-scrollbar {
	display: none;
}

.hfm-jump a {
	flex: 0 0 auto;
	padding: 0.4rem 0.75rem;
	border-radius: 999px;
	color: var(--ink-soft);
	font-size: 0.8rem;
	font-weight: 650;
}

.hfm-jump a:hover {
	background: var(--paper);
	color: var(--ink);
}

/* Build grid */

.hfm-build {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: 0.9rem;
}

.hfm-tile {
	grid-column: span 12;
	padding: 0.85rem;
	border: 1px solid var(--line);
	border-radius: 1.1rem;
	background: var(--white);
}

.hfm-tile figcaption {
	margin-top: 0.75rem;
	font-family: var(--display);
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: -0.02em;
}

.hfm-tile small {
	display: block;
	margin-top: 0.2rem;
	color: var(--muted);
	font-size: 0.8rem;
	line-height: 1.45;
}

@media (min-width: 720px) {
	.hfm-tile--wide { grid-column: span 6; }
	.hfm-tile--third { grid-column: span 4; }
}

@media (min-width: 980px) {
	.hfm-tile--heroish { grid-column: span 7; }
	.hfm-tile--side { grid-column: span 5; }
	.hfm-tile--third { grid-column: span 4; }
}

.hfm-mini {
	border-radius: 0.8rem;
	background: var(--paper);
	overflow: hidden;
	min-height: 8.5rem;
}

.hfm-mini .hfm-bar {
	min-height: 2.4rem;
	padding: 0.35rem 0.6rem;
	font-size: 0.7rem;
}

.hfm-mini .hfm-nav {
	gap: 0.45rem;
	font-size: 0.62rem;
}

.hfm-drop {
	position: relative;
}

.hfm-drop ul {
	position: absolute;
	top: 1.7rem;
	left: 2.2rem;
	z-index: 2;
	margin: 0;
	padding: 0.4rem;
	list-style: none;
	min-width: 6.5rem;
	border-radius: 0.55rem;
	background: #fff;
	box-shadow: 0 10px 24px rgba(22, 20, 16, 0.1);
	font-size: 0.65rem;
	color: var(--ink-soft);
}

.hfm-drop li + li { margin-top: 0.25rem; }

.hfm-foot {
	padding: 0.7rem;
	background: #1c1916;
	color: #f4efe6;
}

.hfm-foot--light {
	background: #f7f4ee;
	color: var(--ink);
}

.hfm-foot__cols {
	display: grid;
	grid-template-columns: 1.3fr repeat(3, 1fr);
	gap: 0.6rem;
}

.hfm-foot h4 {
	margin: 0 0 0.35rem;
	font-size: 0.72rem;
}

.hfm-foot li {
	color: rgba(244, 239, 230, 0.72);
	font-size: 0.65rem;
	list-style: none;
}

.hfm-foot--light li { color: var(--muted); }

.hfm-foot ul { margin: 0; padding: 0; }

.hfm-foot__bar {
	margin-top: 0.65rem;
	padding-top: 0.45rem;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	font-size: 0.62rem;
	color: rgba(244, 239, 230, 0.6);
}

.hfm-foot--light .hfm-foot__bar {
	border-top-color: var(--line);
	color: var(--muted);
}

/* Story + editor */

.hfm-split {
	display: grid;
	gap: 1.2rem;
}

@media (min-width: 980px) {
	.hfm-split {
		grid-template-columns: 0.9fr 1.1fr;
		align-items: start;
	}
}

.hfm-steps {
	display: grid;
	gap: 0.7rem;
	margin-top: 1.4rem;
}

.hfm-step {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.75rem;
	align-items: start;
}

.hfm-step b {
	display: grid;
	place-items: center;
	width: 1.7rem;
	height: 1.7rem;
	border-radius: 50%;
	background: var(--ink);
	color: #fff;
	font-size: 0.75rem;
}

.hfm-step strong {
	display: block;
	font-size: 0.95rem;
}

.hfm-step span {
	display: block;
	margin-top: 0.15rem;
	color: var(--muted);
	font-size: 0.85rem;
	line-height: 1.45;
}

.hfm-editor {
	display: grid;
	grid-template-columns: 1fr 210px;
	min-height: 22rem;
	border: 1px solid rgba(22, 20, 16, 0.08);
	border-radius: 1.1rem;
	background: #e7e2d8;
	box-shadow: var(--shadow);
	overflow: hidden;
}

.hfm-canvas {
	padding: 0.8rem;
}

.hfm-canvas__label {
	margin-bottom: 0.45rem;
	color: #6d655b;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.hfm-select {
	outline: 1.5px dashed #c4a574;
	outline-offset: 3px;
	border-radius: 0.4rem;
}

.hfm-panel {
	background: #fff;
	border-left: 1px solid var(--line);
	padding: 0.7rem 0.65rem;
}

.hfm-panel h3 {
	margin: 0 0 0.55rem;
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.hfm-ctrl {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.4rem;
	padding: 0.38rem 0;
	border-top: 1px solid var(--line);
	font-size: 0.72rem;
	color: var(--ink-soft);
}

.hfm-swatch {
	width: 0.85rem;
	height: 0.85rem;
	border-radius: 0.2rem;
	background: var(--ink);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.hfm-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-top: 0.9rem;
}

.hfm-chip {
	padding: 0.38rem 0.7rem;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: #fff;
	font-size: 0.75rem;
	font-weight: 650;
}

.hfm button.hfm-chip:hover {
	background: var(--paper) !important;
	color: var(--ink) !important;
	border-color: var(--ink) !important;
}

.hfm button.hfm-chip.is-active,
.hfm button.hfm-chip.is-active:hover,
.hfm-chip[aria-selected="true"] {
	background: var(--ink) !important;
	border-color: var(--ink) !important;
	color: #fff !important;
}

.hfm-section--ink button.hfm-chip {
	background: transparent;
	color: #f6f1e8;
	border-color: rgba(246, 241, 232, 0.28);
}

.hfm-section--ink button.hfm-chip:hover {
	background: transparent !important;
	color: #fff !important;
	border-color: #fff !important;
}

.hfm-section--ink button.hfm-chip.is-active,
.hfm-section--ink button.hfm-chip.is-active:hover {
	background: var(--gold) !important;
	border-color: var(--gold) !important;
	color: #1a140c !important;
}

.hfm-editor[data-style="colors"] .hfm-pill {
	background: var(--moss);
}

.hfm-editor[data-style="colors"] .hfm-nav {
	color: var(--moss);
}

.hfm-editor[data-style="type"] .hfm-nav,
.hfm-editor[data-style="type"] .hfm-logo {
	font-family: Georgia, "Times New Roman", serif;
	letter-spacing: 0.01em;
}

.hfm-editor[data-style="space"] .hfm-nav {
	gap: 1.35rem;
}

.hfm-editor[data-style="space"] .hfm-bar {
	padding-top: 0.95rem;
	padding-bottom: 0.95rem;
}

.hfm-editor[data-style="border"] .hfm-bar {
	border-bottom: 2px solid var(--gold);
}

.hfm-editor[data-style="shadow"] .hfm-bar {
	box-shadow: 0 14px 28px rgba(22, 20, 16, 0.12);
}

.hfm-editor[data-style="layout"] .hfm-bar {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
}

.hfm-editor[data-style="layout"] .hfm-logo {
	grid-column: 2;
}

.hfm-editor[data-style="layout"] .hfm-nav {
	grid-column: 1;
	margin-left: 0;
}

.hfm-editor[data-style="layout"] .hfm-pill {
	grid-column: 3;
	justify-self: end;
}

.hfm-burger {
	display: none;
	width: 1.7rem;
	height: 1.7rem;
	margin-left: auto;
	border-radius: 0.4rem;
	background:
		linear-gradient(#1a1714, #1a1714) center 0.45rem / 0.85rem 1.5px no-repeat,
		linear-gradient(#1a1714, #1a1714) center / 0.85rem 1.5px no-repeat,
		linear-gradient(#1a1714, #1a1714) center 1.25rem / 0.85rem 1.5px no-repeat,
		#f4f0e8;
}

.hfm-editor[data-style="responsive"] .hfm-nav,
.hfm-editor[data-style="responsive"] .hfm-pill {
	display: none;
}

.hfm-editor[data-style="responsive"] .hfm-burger {
	display: block;
}

.hfm-cta-alt { display: none; }

.hfm-editor[data-style="content"] .hfm-cta-default { display: none; }
.hfm-editor[data-style="content"] .hfm-cta-alt { display: inline; }

.hfm-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem 0.8rem;
	margin-top: 0.8rem;
	padding: 0;
	list-style: none;
	color: var(--muted);
	font-size: 0.75rem;
	font-weight: 650;
}

.hfm-legend i {
	display: inline-block;
	width: 0.55rem;
	height: 0.55rem;
	margin-right: 0.3rem;
	border-radius: 50%;
	background: var(--gold);
	vertical-align: 0.05rem;
}

/* Footer gallery */

.hfm-footgrid {
	display: grid;
	gap: 0.9rem;
}

@media (min-width: 800px) {
	.hfm-footgrid {
		grid-template-columns: 1.3fr 1fr 1fr;
	}

	.hfm-footcard--wide {
		grid-column: span 2;
	}
}

.hfm-footcard {
	padding: 0.7rem;
	border-radius: 1rem;
	border: 1px solid var(--line);
	background: #fff;
}

.hfm-footcard figcaption {
	display: flex;
	justify-content: space-between;
	gap: 0.6rem;
	margin-top: 0.65rem;
	font-size: 0.82rem;
	font-weight: 700;
}

.hfm-footcard figcaption span {
	color: var(--muted);
	font-weight: 600;
}

.hfm-news {
	display: flex;
	gap: 0.3rem;
	margin-top: 0.45rem;
}

.hfm-news i {
	flex: 1;
	height: 1.3rem;
	border-radius: 999px;
	background: #fff;
	border: 1px solid rgba(22, 20, 16, 0.12);
}

.hfm-news b {
	width: 2.2rem;
	border-radius: 999px;
	background: var(--gold);
}

/* Flow */

.hfm-flow {
	display: grid;
	gap: 0.8rem;
}

@media (min-width: 900px) {
	.hfm-flow {
		grid-template-columns: repeat(4, 1fr);
	}
}

.hfm-flow article {
	padding: 0.85rem;
	border-radius: 1rem;
	background: #fff;
	border: 1px solid var(--line);
}

.hfm-flow em {
	display: block;
	margin-bottom: 0.55rem;
	font-style: normal;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--gold-deep);
}

.hfm-menu-ui,
.hfm-assign {
	border-radius: 0.7rem;
	background: var(--paper);
	padding: 0.6rem;
	font-size: 0.72rem;
}

.hfm-menu-ui div,
.hfm-assign div {
	display: flex;
	justify-content: space-between;
	gap: 0.4rem;
	padding: 0.32rem 0;
	border-bottom: 1px solid rgba(22, 20, 16, 0.08);
}

.hfm-menu-ui strong,
.hfm-assign strong {
	font-weight: 650;
}

.hfm-badge {
	display: inline-flex;
	padding: 0.05rem 0.35rem;
	border-radius: 999px;
	background: var(--gold);
	color: #1a140c;
	font-size: 0.62rem;
	font-weight: 700;
}

/* Mega */

.hfm-tabs {
	display: flex;
	gap: 0.4rem;
	overflow-x: auto;
	padding-bottom: 0.8rem;
	scrollbar-width: none;
}

.hfm-tabs::-webkit-scrollbar { display: none; }

.hfm-mega-stage[data-mega="icons"] .hfm-mega,
.hfm-mega-stage[data-mega="images"] .hfm-mega,
.hfm-mega-stage[data-mega="categories"] .hfm-mega,
.hfm-mega-stage[data-mega="services"] .hfm-mega,
.hfm-mega-stage[data-mega="wide"] .hfm-mega {
	display: none;
}

.hfm-panel-icons,
.hfm-panel-images,
.hfm-panel-cats,
.hfm-panel-services,
.hfm-panel-wide {
	display: none;
	margin: 0 0.7rem 0.7rem;
	padding: 0.85rem;
	border-radius: 0.9rem;
	background: #fff;
	box-shadow: 0 16px 40px rgba(22, 20, 16, 0.08);
}

.hfm-mega-stage[data-mega="icons"] .hfm-panel-icons,
.hfm-mega-stage[data-mega="images"] .hfm-panel-images,
.hfm-mega-stage[data-mega="categories"] .hfm-panel-cats,
.hfm-mega-stage[data-mega="services"] .hfm-panel-services,
.hfm-mega-stage[data-mega="wide"] .hfm-panel-wide {
	display: block;
}

.hfm-mega-note {
	display: none;
	margin-top: 0.85rem;
	color: var(--ink-soft);
	font-size: 0.95rem;
	line-height: 1.6;
}

.hfm-mega-stage[data-mega="gallery"] .hfm-mega-note[data-for="gallery"],
.hfm-mega-stage[data-mega="icons"] .hfm-mega-note[data-for="icons"],
.hfm-mega-stage[data-mega="images"] .hfm-mega-note[data-for="images"],
.hfm-mega-stage[data-mega="categories"] .hfm-mega-note[data-for="categories"],
.hfm-mega-stage[data-mega="services"] .hfm-mega-note[data-for="services"],
.hfm-mega-stage[data-mega="wide"] .hfm-mega-note[data-for="wide"] {
	display: block;
}

.hfm-panel-icons h5,
.hfm-panel-images h5,
.hfm-panel-cats h5,
.hfm-panel-services h4,
.hfm-panel-wide h5 {
	margin: 0 0 0.3rem;
	font-family: var(--display);
	font-size: 0.72rem;
	font-weight: 650;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.hfm-panel-services h4 {
	font-size: 1rem;
	letter-spacing: -0.03em;
	text-transform: none;
}

.hfm-panel-icons ul,
.hfm-panel-cats ul,
.hfm-panel-icons li,
.hfm-panel-cats li,
.hfm-panel-services p {
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--muted);
	font-size: 0.75rem;
	line-height: 1.45;
}

.hfm-panel-icons li + li,
.hfm-panel-cats li + li {
	margin-top: 0.25rem;
}

.hfm-mega-stage[data-mega="icons"] .hfm-mega,
.hfm-mega-stage[data-mega="images"] .hfm-mega,
.hfm-mega-stage[data-mega="categories"] .hfm-mega,
.hfm-mega-stage[data-mega="services"] .hfm-mega,
.hfm-mega-stage[data-mega="wide"] .hfm-mega {
	display: none;
}

.hfm-iconrow,
.hfm-imgrow,
.hfm-catrow,
.hfm-svcrow {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0.7rem;
}

.hfm-iconrow article,
.hfm-imgrow article,
.hfm-catrow article,
.hfm-svcrow article {
	min-width: 0;
}

.hfm-ico {
	display: grid;
	place-items: center;
	width: 1.6rem;
	height: 1.6rem;
	margin-bottom: 0.35rem;
	border-radius: 0.45rem;
	background: #f3ecdf;
	color: var(--gold-deep);
	font-size: 0.75rem;
	font-weight: 700;
}

.hfm-imgrow .shot {
	height: 4.2rem;
	margin-bottom: 0.4rem;
	border-radius: 0.6rem;
	background: linear-gradient(135deg, #d9c7aa, #7f9a88);
}

.hfm-imgrow article:nth-child(2) .shot { background: linear-gradient(135deg, #c9d4ea, #6d7ea0); }
.hfm-imgrow article:nth-child(3) .shot { background: linear-gradient(135deg, #ead7c2, #b08968); }
.hfm-imgrow article:nth-child(4) .shot { background: linear-gradient(135deg, #d5e2d4, #5f7d68); }

.hfm-panel-wide {
	background: #1c1916;
	color: #f6f1e8;
}

.hfm-wide {
	display: grid;
	grid-template-columns: 1.2fr 0.8fr 0.8fr;
	gap: 1rem;
}

.hfm-wide h4 {
	margin: 0 0 0.35rem;
	font-family: var(--display);
	font-size: 1.35rem;
	letter-spacing: -0.03em;
}

.hfm-wide p,
.hfm-wide li {
	color: rgba(246, 241, 232, 0.72);
	font-size: 0.75rem;
}

.hfm-wide ul { margin: 0; padding: 0; list-style: none; }
.hfm-wide li + li { margin-top: 0.3rem; }

.hfm-callout {
	margin-top: 0.9rem;
	padding: 0.85rem 1rem;
	border-left: 3px solid var(--gold);
	background: rgba(255, 252, 248, 0.7);
	color: var(--ink-soft);
	font-size: 0.92rem;
	line-height: 1.55;
}

.hfm-section--paper .hfm-callout {
	background: #fff;
}

/* Devices */

.hfm-devices {
	display: grid;
	grid-template-columns: 1.35fr 0.9fr 0.72fr;
	gap: 0.9rem;
	align-items: start;
}

.hfm-device figcaption {
	margin-top: 0.55rem;
	font-size: 0.8rem;
	font-weight: 700;
}

.hfm-device small {
	display: block;
	margin-top: 0.15rem;
	color: var(--muted);
	font-weight: 600;
}

.hfm-drawer-demo {
	display: grid;
	grid-template-columns: 1fr 0.72fr;
	min-height: 11rem;
	background: #f7f4ee;
}

.hfm-drawer {
	padding: 0.7rem;
	background: #fff;
	box-shadow: -12px 0 30px rgba(22, 20, 16, 0.08);
}

.hfm-drawer div {
	padding: 0.45rem 0;
	border-bottom: 1px solid var(--line);
	font-size: 0.75rem;
	font-weight: 650;
}

/* Variations */

.hfm-var[data-skin="corp"] .hfm-bar { background: var(--navy); color: #fff; }
.hfm-var[data-skin="corp"] .hfm-nav { color: rgba(255,255,255,0.82); }
.hfm-var[data-skin="corp"] .hfm-logo__gem { background: var(--gold); box-shadow: none; }
.hfm-var[data-skin="corp"] .hfm-pill { background: var(--gold); color: #1a140c; }

.hfm-var[data-skin="agency"] .hfm-site { background: #1a1714; }
.hfm-var[data-skin="agency"] .hfm-bar { background: transparent; color: #fff; border-bottom-color: transparent; }
.hfm-var[data-skin="agency"] .hfm-nav { color: rgba(255,255,255,0.8); }
.hfm-var[data-skin="agency"] .hfm-pill { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.45); }
.hfm-var[data-skin="agency"] .hfm-bar {
	position: relative;
	z-index: 2;
}

.hfm-var[data-skin="agency"] .hfm-hero-art {
	margin-top: -3.2rem;
	padding-top: 4.2rem;
}

.hfm-var[data-skin="agency"] .hfm-hero-art__copy { min-height: 12rem; }

.hfm-var[data-skin="shop"] .hfm-bar { background: #f7f1e6; }
.hfm-var[data-skin="shop"] .hfm-pill { background: var(--gold-deep); }

.hfm-vargrid {
	display: grid;
	gap: 0.8rem;
	margin-top: 1rem;
}

@media (min-width: 800px) {
	.hfm-vargrid { grid-template-columns: repeat(4, 1fr); }
}

.hfm-vargrid article {
	padding: 0.85rem;
	border-radius: 0.9rem;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(246, 241, 232, 0.1);
}

.hfm-vargrid h3 {
	margin: 0.7rem 0 0.25rem;
	font-family: var(--display);
	font-size: 1rem;
}

.hfm-vargrid p {
	color: rgba(246, 241, 232, 0.68);
	font-size: 0.8rem;
	line-height: 1.45;
}

/* Workflow */

.hfm-work {
	display: grid;
	gap: 0.8rem;
}

@media (min-width: 900px) {
	.hfm-work { grid-template-columns: repeat(4, 1fr); }
}

.hfm-work article {
	padding: 1.1rem;
	border-radius: 1.05rem;
	background: #fff;
	border: 1px solid var(--line);
	min-height: 100%;
}

.hfm-work em {
	font-family: var(--display);
	font-style: normal;
	font-size: 1.8rem;
	letter-spacing: -0.04em;
	color: var(--gold-deep);
}

.hfm-work h3 {
	margin: 0.4rem 0;
	font-family: var(--display);
	font-size: 1.15rem;
	letter-spacing: -0.03em;
}

.hfm-work p {
	color: var(--muted);
	font-size: 0.88rem;
	line-height: 1.5;
}

/* Features */

.hfm-features {
	display: grid;
	gap: 0.75rem;
}

@media (min-width: 700px) {
	.hfm-features { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1000px) {
	.hfm-features { grid-template-columns: 1fr 1fr 1fr; }
}

.hfm-feature {
	padding: 1rem 1rem 1.05rem;
	border: 1px solid var(--line);
	border-radius: 1rem;
	background: #fff;
}

.hfm-feature svg {
	display: block;
	margin-bottom: 0.7rem;
	color: var(--gold-deep);
}

.hfm-feature h3 {
	margin: 0 0 0.3rem;
	font-family: var(--display);
	font-size: 1.02rem;
	letter-spacing: -0.02em;
}

.hfm-feature p {
	color: var(--muted);
	font-size: 0.86rem;
	line-height: 1.5;
}

/* Final */

.hfm-final {
	padding: 5.5rem 0 6rem;
	background:
		radial-gradient(700px 280px at 80% 100%, rgba(196, 165, 116, 0.22), transparent 60%),
		var(--ink);
	color: #f6f1e8;
	text-align: center;
}

.hfm-final .hfm-title {
	max-width: 16ch;
	margin-inline: auto;
}

.hfm-final .hfm-lede {
	margin-inline: auto;
}

.hfm-final .hfm-actions {
	justify-content: center;
}

@media (max-width: 720px) {
	.hfm-jump {
		top: 4.2rem;
	}

	.hfm-jump__row {
		flex-wrap: wrap;
		overflow: visible;
	}
}
@media (max-width: 800px) {
	.hfm-editor {
		grid-template-columns: 1fr;
	}

	.hfm-panel {
		border-left: 0;
		border-top: 1px solid var(--line);
	}

	.hfm-mega,
	.hfm-iconrow,
	.hfm-imgrow,
	.hfm-catrow,
	.hfm-svcrow,
	.hfm-wide,
	.hfm-foot__cols,
	.hfm-devices {
		grid-template-columns: 1fr 1fr;
	}

	.hfm-float {
		position: static;
		width: auto;
		margin-top: 0.8rem;
	}

	.hfm-stage {
		padding-bottom: 0;
	}

	.hfm-hero-art {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 640px) {
	.hfm-section { padding: 3.6rem 0; }
	.hfm-devices,
	.hfm-mega,
	.hfm-iconrow,
	.hfm-imgrow,
	.hfm-catrow,
	.hfm-svcrow,
	.hfm-wide,
	.hfm-foot__cols,
	.hfm-drawer-demo {
		grid-template-columns: 1fr;
	}

	.hfm-nav {
		gap: 0.45rem;
		font-size: 0.68rem;
	}
}