/**
 * Nexly — Homepage (Figma build)
 * Source: Figma "Nexly" file O6jk4Ma5W7O78BI9Ie6Rza, node 20:490 (1920 × 16889).
 *
 * Self-contained: this file owns every token and rule the Figma homepage needs so
 * it never inherits from main.css. Scoped under .fh so the rest of the theme is
 * untouched.
 *
 * @package Nexly
 */

/* ============================================================
   TOKENS — lifted from the Figma node tree
   ============================================================ */
.fh {
	--fh-ink: #171717;
	--fh-ink-2: #262626;
	--fh-ink-3: #5d5d5d;
	--fh-muted: #64748b;
	--fh-muted-2: #94a3b8;
	--fh-faint: #a3a3a3;

	--fh-blue: #2947a3;
	--fh-blue-btn: #1d4ed8;
	--fh-blue-100: #dbeafe;
	--fh-blue-50: #eff6ff;
	--fh-blue-chip: #e7eaf5;

	--fh-page: #fafaf8;
	--fh-surface: #ffffff;
	--fh-panel: #eef1f6;
	--fh-panel-2: #e7ebf1;
	--fh-panel-3: #f7f8fb;
	--fh-line: #e5e4df;
	--fh-line-2: #ebeae3;
	--fh-mist: #f4f3ed;   /* matches main.css --mist, used by the nav hover pill */

	--fh-green: #12b76a;
	--fh-green-ink: #15803d;
	--fh-green-bg: #f0fdf4;
	--fh-red-bg: #fef2f2;

	--fh-r-sm: 5px;
	--fh-r-md: 12px;
	--fh-r-lg: 14px;
	--fh-r-xl: 16px;
	--fh-r-pill: 999px;

	/* The design's hero row is 1400px of content, but edge-to-edge that leaves the
	   page feeling cramped on wide screens and sits wider than the shared footer.
	   1280 of content (1360 box − both gutters) gives a roomier margin and lets
	   the footer line up with the sections above it. */
	--fh-container: 1360px;
	--fh-gutter: 40px;

	/* Design file: Helvetica Regular for the three display numerals/headline,
	   Manrope for everything else (Medium 500 dominant, SemiBold 600 for labels). */
	/* Inter leads deliberately. The old stack fell through to Arial on Windows,
	   which ships only 400 and 700 — so every font-weight: 500/600 in this file
	   was being faux-bolded by the browser, which is what made the headings look
	   muddy and uneven. Inter is already loaded at 400/500/600/700 (see
	   nexly-home-fonts), so those weights are now real cuts. */
	--fh-display: "Inter", "Helvetica Neue", Helvetica, Arial, "Liberation Sans", sans-serif;
	--fh-body: "Manrope", "Helvetica Neue", Arial, sans-serif;
}

/* ============================================================
   BASE
   ============================================================ */
.fh {
	background: var(--fh-page);
	color: var(--fh-ink);
	font-family: var(--fh-body);
	/* Design body weight is Manrope Medium; display faces set 400 themselves. */
	font-weight: 500;
	-webkit-font-smoothing: antialiased;
	/* clip, not hidden: `hidden` makes this a scroll container, which silently
	   breaks position:sticky on the "What's included" rail. `hidden` stays as the
	   fallback for iOS Safari < 16, which loses the sticky rail but still clips. */
	overflow-x: hidden;
	overflow-x: clip;
}
.fh *,
.fh *::before,
.fh *::after { box-sizing: border-box; }

/* :where() keeps this reset at .fh's specificity. As a plain descendant list it
   scored (0,1,1) and silently beat every component rule like
   `.fh-stats { margin-top: 88px }` (0,1,0) — so section spacing set on classes
   was being dropped across the page. */
.fh :where(p, h1, h2, h3, h4, h5, h6, ul, ol, figure) { margin: 0; padding: 0; }
/* main.css sets `h1,h2,h3,h4 { color: var(--ink) }` — an element rule that beats
   inherited colour, so every heading on a dark section rendered near-black.
   Inheriting instead gives ink on light grounds and white on dark ones.
   :where() keeps this at .fh's specificity so component classes still win. */
.fh :where(h1, h2, h3, h4, h5, h6) { color: inherit; }
.fh ul, .fh ol { list-style: none; }
.fh img { max-width: 100%; display: block; }
/* :where() keeps these resets at zero specificity so component classes such as
   .fh__btn--light and .fh-team__li can set their own colour. Without it,
   ".fh a" (0,1,1) beats ".fh__btn--light" (0,1,0) and white-on-dark anchors
   inherit white text onto white pills. */
:where(.fh) :where(a) { color: inherit; text-decoration: none; }
:where(.fh) :where(button) { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

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

/* Display headings — Figma: Helvetica 400, tight tracking */
.fh__d1, .fh__d2, .fh__d3, .fh__d4 {
	font-family: var(--fh-display);
	font-weight: 400;
	color: var(--fh-ink);
	letter-spacing: -0.02em;
}
.fh__d1 { font-size: clamp(2.25rem, 1.35rem + 2.8vw, 3.375rem); line-height: 1.18; }  /* 54px */
.fh__d2 { font-size: clamp(1.75rem, 1.28rem + 1.5vw, 2.625rem); line-height: 1.2; }   /* 42px */
.fh__d3 { font-size: clamp(1.5rem, 1.22rem + 1vw, 2rem); line-height: 1.25; }         /* 32px */
.fh__d4 { font-size: clamp(1.25rem, 1.12rem + 0.5vw, 1.5rem); line-height: 1.3; }     /* 24px */

.fh__lead {
	font-family: var(--fh-body);
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.6;
	color: var(--fh-ink-2);
}

/* Eyebrow — blue bar + uppercase label */
.fh__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--fh-body);
	font-size: 14px;
	line-height: 160%;
	font-weight: 600;
	letter-spacing: 0px;
	text-transform: uppercase;
	color: var(--fh-ink-2);
}
.fh__eyebrow::before {
	content: "";
	width: 4px;
	height: 16px;
	border-radius: 2px;
	background: var(--fh-blue);
	flex: none;
}

.fh__section { padding-block: 88px; }
.fh__head { max-width: 900px; }
.fh__head .fh__d2,
.fh__head .fh__d3 { margin-top: 18px; }
.fh__head .fh__lead { margin-top: 16px; }

/* ============================================================
   BUTTONS
   ============================================================ */
.fh__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	height: 48px;
	padding-inline: 26px;
	border-radius: var(--fh-r-pill);
	font-family: var(--fh-body);
	font-size: 0.9375rem;
	font-weight: 600;
	white-space: nowrap;
	transition: transform .18s ease, box-shadow .22s ease, background-color .22s ease, color .22s ease, filter .2s ease;
}
.fh__btn svg { flex: none; transition: transform .24s cubic-bezier(.34,1.56,.64,1); }
.fh__btn:hover svg { transform: translateX(4px); }

.fh__btn--primary { background: var(--fh-blue-btn); color: #fff; }
.fh__btn--primary:hover {
	transform: translateY(-1px) scale(1.03);
	box-shadow: 0 12px 32px rgba(41, 71, 163, .38);
	filter: brightness(1.08);
}
.fh__btn--primary:active { transform: scale(.98); box-shadow: 0 4px 12px rgba(41, 71, 163, .25); }

.fh__btn--ghost { background: transparent; color: var(--fh-ink); box-shadow: inset 0 0 0 1px var(--fh-ink); }
.fh__btn--ghost:hover { background: var(--fh-ink); color: #fff; transform: translateY(-1px) scale(1.03); }

.fh__btn--light { background: #fff; color: var(--fh-ink); }
.fh__btn--light:hover { transform: translateY(-1px) scale(1.03); box-shadow: 0 10px 28px rgba(0, 0, 0, .18); }

.fh__btn--sm { height: 42px; padding-inline: 20px; font-size: .875rem; }

/* Text link with arrow */
.fh__arrowlink {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: .9375rem;
	font-weight: 600;
	color: var(--fh-ink);
}
.fh__arrowlink svg { transition: transform .22s cubic-bezier(.34,1.56,.64,1); }
.fh__arrowlink:hover { color: var(--fh-blue); }
.fh__arrowlink:hover svg { transform: translateX(4px); }

/* ============================================================
   1. HEADER
   ============================================================ */
.fh-header {
	position: sticky;
	top: 0;
	z-index: 60;
	background: #fff;
	border-bottom: 1px solid #f1f1ef;
}
/* Chrome matched to the site-wide header in nav.css: 20px rail gap, 72px bar. */
.fh-header__inner {
	display: flex;
	align-items: center;
	gap: 20px;
	min-height: 72px;
}
.fh-header__brand { display: flex; align-items: center; flex: none; }
/* Brand lockup is a single 2048×625 asset — height drives it, width follows. */
.fh-header__logo {
	height: 34px;
	width: auto;
	display: block;
	transition: transform .28s cubic-bezier(.34,1.4,.64,1);
}
.fh-header__brand:hover .fh-header__logo { transform: scale(1.04); }
/* Separation comes from the gap, not from wide pills — tight padding keeps the
   whole rail short so it isn't crowding the logo and CTA on either side. */
.fh-nav { display: flex; align-items: center; gap: 10px; margin-inline: auto; }
.fh-nav__item { position: relative; }
.fh-nav__link {
	position: relative;   /* anchors the underline below */
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 9px 10px;
	border-radius: 10px;
	font-size: .875rem;
	font-weight: 500;
	letter-spacing: -0.005em;
	white-space: nowrap;
	color: var(--fh-ink-2);
	transition: background-color .18s ease, color .18s ease;
}
/* Neutral hover pill + chevron fade, as on the rest of the site. The blue "open"
   pill comes from nav.css's `.nav__item.is-open .nav__link`. No underline. */
/* Was 16px at 1.5 stroke and .65 opacity — effectively invisible. Heavier stroke
   and near-full opacity make the drop-down affordance readable. */
.fh-nav__link svg {
	opacity: .8;
	stroke-width: 2.25;
	transition: transform .22s ease, opacity .2s ease;
}
/* Underline sits just below the chip and wipes out from the centre. */
.fh-nav__link::after {
	content: "";
	position: absolute;
	left: 0; right: 0;
	bottom: -6px;
	height: 2px;
	border-radius: 2px;
	background: var(--fh-blue);
	transform: scaleX(0);
	transition: transform .22s cubic-bezier(.34,1.4,.64,1);
}
/* Hover and open share one treatment, and it applies to every item — including
   Case Studies and About, which have no panel. */
.fh-nav__item:hover > .fh-nav__link,
.fh-nav__item.is-open > .fh-nav__link {
	background: var(--fh-blue-chip);
	color: var(--fh-blue);
}
.fh-nav__item:hover > .fh-nav__link::after,
.fh-nav__item.is-open > .fh-nav__link::after { transform: scaleX(1); }
.fh-nav__item:hover > .fh-nav__link svg { opacity: 1; }
/* ---- Service dropdowns ----
   The panels are the site-wide .mega component (nav.css + main.js), so only the
   homepage-specific alignment lives here: match the .fh__container gutters, and
   drop the hover underline where the chevron pill already signals the open item. */
.fh-header .mega__inner,
.fh-header .mega__foot-in {
	max-width: var(--fh-container);
	padding-inline: var(--fh-gutter);
	margin-inline: auto;
}
/* Chip + underline now come from the shared hover/open rule above; only the
   chevron flip is specific to an open panel. */
.fh-nav__item.has-mega.is-open > .fh-nav__link svg { transform: rotate(180deg); opacity: 1; }

.fh-header__cta { display: flex; align-items: center; gap: 10px; flex: none; }
/* Trimmed from the site-wide .btn metrics (.98rem / 1.6em): About carries one
   pill here, the homepage carries two, and at full size they squeezed the nav
   rail to ~25px of clearance on each side. */
.fh-header__cta .fh__btn--sm {
	height: auto;
	padding: .85em 1.35em;
	font-size: .875rem;
	font-weight: 700;
	border-radius: var(--fh-r-pill);
	line-height: 1;
}
/* The .btn--glow treatment from nav.css: gradient, lifted shadow, sweeping shine. */
.fh-header__cta .fh__btn--primary {
	position: relative;
	overflow: hidden;
	background: linear-gradient(135deg, var(--fh-blue), #3a5fc8);
	box-shadow: 0 10px 24px -10px rgba(41, 71, 163, .7);
}
.fh-header__cta .fh__btn--primary::before {
	content: "";
	position: absolute;
	top: 0; left: -70%;
	width: 45%; height: 100%;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .5), transparent);
	transform: skewX(-20deg);
	animation: nx-shine 3.6s ease-in-out infinite;
	pointer-events: none;
}
.fh-header__cta .fh__btn--primary:hover {
	transform: translateY(-1px);
	filter: none;
	box-shadow: 0 14px 30px -10px rgba(41, 71, 163, .8);
}
.fh-header__cta .fh__btn--ghost { border: 1.5px solid var(--fh-ink); box-shadow: none; }
.fh-header__cta .fh__btn--ghost:hover { background: var(--fh-ink); color: #fff; transform: translateY(-1px); }

/* Menu icon: three equal bars. Three real <span>s rather than the old
   single-span box-shadow trick, because the open state animates each bar
   independently into an X. */
.fh-header__burger {
	display: none;
	width: 44px;
	height: 44px;
	place-content: center;
	justify-items: center;
	gap: 5px;
	border-radius: 10px;
}
.fh-header__burger span {
	display: block;
	width: 20px;
	height: 2px;
	border-radius: 2px;
	background: var(--fh-ink);
	transition: transform .22s ease, opacity .16s ease;
}

/* Open state — home.js was already maintaining aria-expanded but nothing was
   styled off it, so the toggle never changed appearance. Row pitch is 7px
   (2px bar + 5px gap), which is the translate needed for the bars to meet. */
.fh-header__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.fh-header__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(.2); }
.fh-header__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (prefers-reduced-motion: reduce) {
	.fh-header__burger span { transition: none; }
}

/* ============================================================
   2. HERO
   ============================================================ */
/* Design: the section is backed by the full-bleed abstract (hero-bg) under a
   flat 50% white wash, padded 84px top / 54px bottom. */
.fh-hero {
	position: relative;
	background: var(--fh-page);
	padding-block: 84px 54px;
	overflow: hidden;
}
.fh-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(rgba(255, 255, 255, .5), rgba(255, 255, 255, .5)),
		url(../images/home/hero/hero-bg.png) center / cover no-repeat;
	pointer-events: none;
}
.fh-hero > * { position: relative; z-index: 1; }
/* Design: copy column max-w-[620px], media column max-w-[680px], justify-between
   inside a 1400px row. Columns keep that 620:680 ratio as the viewport narrows. */
.fh-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 620fr) minmax(0, 680fr);
	gap: clamp(24px, 7vw, 100px);
	align-items: center;
}
.fh-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap : 6px;
	letter-spacing: 0px;
	line-height: 100%;
	font-size: 1rem;
	font-weight: 500;
	color: var(--fh-ink);
}
.fh-hero__eyebrow svg { flex: none; color: #95bf47; } /* Shopify green, per Figma */
/* Helvetica Regular 72px / 74.16px / -2px tracking. The size tracks the column's
   own growth rate (5vw − 2px), so the three-line break "Shopify Stores That /
   Convert, Built & / Grown in Australia" survives every width down to the
   single-column breakpoint instead of only holding at 1480. */
.fh-hero__title {
	margin-top: 16px;
	font-size: 72px;
	line-height: 74.16px;
	letter-spacing: -2px;
	max-width: 620px;
	color: var(--fh-ink);
}
.fh-hero__sub {
	margin-top: 24px;
	max-width: 620px;
	font-size: 16px;
	letter-spacing: 0px;
	font-weight: 500;
	line-height: normal;
	color: var(--fh-ink);
}
.fh-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
/* Design pills: 12px/20px and 13px/21px padding rather than a fixed height. */
.fh-hero__actions .fh__btn {
	height: auto;
	gap: 4px;
	padding: 12px 20px;
	font-size: 1rem;
	font-weight: 600;
	border-radius: 50px;
}
.fh-hero__actions .fh__btn--primary {
	background: var(--fh-blue);
	box-shadow: 0 16px 18px rgba(0, 0, 0, .1), 0 40px 20px rgba(0, 0, 0, .03);
}
.fh-hero__actions .fh__btn--ghost { padding: 13px 21px; background: #fff; }
/* Must out-specify the rule above, or the shared ghost hover sets white text on
   a background this rule is still holding white. */
.fh-hero__actions .fh__btn--ghost:hover { background: var(--fh-ink); color: #fff; }

.fh-hero__proof { display: flex; align-items: center; gap: 8px; margin-top: 42px; flex-wrap: wrap; }
.fh-hero__avatars { display: flex; }
.fh-hero__avatars img {
	width: 24px; height: 24px;
	border-radius: 50%;
	object-fit: cover;
	margin-left: -6px;
}
.fh-hero__avatars img:first-child { margin-left: 0; }
.fh-hero__stars { color: #282420; letter-spacing: 1px; font-size: 1rem; }
.fh-hero__score { font-weight: 500; font-size: 1rem; color: var(--fh-ink); }
.fh-hero__divider { width: 1px; height: 24px; background: #ededed; }
.fh-hero__merchants { font-size: 1rem; font-weight: 500; color: var(--fh-ink); }

/* Hero right — storefront stack + two stat cards.
   --fh-hero-ease / --fh-hero-dur keep the three panels' hovers in step. */
/* Design: media column max-w-[680px], 6px between the stack and the card row. */
.fh-hero__media {
	display: grid;
	gap: 6px;
	--fh-hero-dur: .28s;
	--fh-hero-ease: cubic-bezier(.34,1.25,.64,1);
	--fh-hero-accent: #5d3fd3;
}
/* 680 × 380 in the design — held as a ratio so it scales. */
.fh-hero__stack {
	position: relative;
	aspect-ratio: 680 / 380;
	border-radius: 12px;
	background: #e5e5e5;
	overflow: hidden;
	/* Not cursor:pointer — the mockups are decorative <figure>s with no click
	   behaviour. Only the "Create a Projects" pills are links, and being <a>
	   they carry their own pointer cursor. */
	cursor: default;
}
.fh-hero__shots { position: absolute; inset: 0; }
/* Each mockup is 439 × 424 inside the 680 × 380 plate. Sources are portrait
   full-page grabs, so cover + top anchor reproduces the design's crop exactly. */
.fh-hero__shot {
	position: absolute;
	width: 64.56%;          /* 439 / 680 */
	aspect-ratio: 439 / 424;
	border-radius: 24px;
	overflow: hidden;
	box-shadow: 0 18px 44px rgba(15, 23, 42, .22);
	transition: transform var(--fh-hero-dur) var(--fh-hero-ease), box-shadow var(--fh-hero-dur) ease;
}
.fh-hero__shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.fh-hero__shot--1 { left: 4.71%;  top: 34.47%; z-index: 3; }  /* 32 / 131  */
.fh-hero__shot--2 { left: 23.68%; top: 20.53%; z-index: 2; }  /* 161 / 78  */
.fh-hero__shot--3 { left: 37.06%; top: 6.32%;  z-index: 1; }  /* 252 / 24  */
/* Each mockup lifts on its own hover. z-index is deliberately NOT touched:
   the shots must keep their 3 / 2 / 1 order so the two background mockups stay
   behind the front card instead of jumping over it. */
.fh-hero__shot:hover {
	transform: translateY(-10px);
	box-shadow: 0 28px 60px rgba(15, 23, 42, .3);
}
/* The two background mockups are secondary, so they lift a little less and on
   a plain ease rather than the front card's springy overshoot. Declared after
   the shared :hover above — equal specificity, so source order decides. */
.fh-hero__shot--2,
.fh-hero__shot--3 {
	transition: transform .3s ease, box-shadow .3s ease;
}
.fh-hero__shot--2:hover,
.fh-hero__shot--3:hover {
	transform: translateY(-8px);
}

/* Design puts a white outlined pill flush to the bottom of every mockup. It's
   revealed on hover of its own shot rather than shown permanently. */
.fh-hero__stack-cta {
	position: absolute;
	z-index: 6;
	bottom: 18px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 9px 13px;
	border-radius: var(--fh-r-pill);
	background: #fff;
	box-shadow: inset 0 0 0 1px var(--fh-ink);
	color: var(--fh-ink);
	font-size: .75rem;
	font-weight: 600;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transform: translate(-50%, 6px);
	transition: opacity var(--fh-hero-dur) ease, transform var(--fh-hero-dur) var(--fh-hero-ease), background-color .2s ease, color .2s ease;
}
/* Centred on the front mockup: left = shot left + half the shot's width.
   Shots 2 and 3 have no pill — the --2 / --3 position rules and their reveal
   selectors were removed with them. */
.fh-hero__stack-cta--1 { left: 36.99%; }

.fh-hero__shot--1:hover ~ .fh-hero__stack-cta--1,
.fh-hero__stack-cta:hover,
.fh-hero__stack-cta:focus-visible {
	opacity: 1;
	pointer-events: auto;
	transform: translate(-50%, 0);
}
.fh-hero__stack-cta:hover { background: var(--fh-ink); color: #fff; }

/* 434 : 240 with a 6px gutter, per the design. */
.fh-hero__cards { display: grid; grid-template-columns: minmax(0, 434fr) minmax(0, 240fr); gap: 6px; }
.fh-hero__card {
	position: relative;
	border-radius: 12px;
	padding: 24px;
	min-height: 280px;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	cursor: pointer;
	transition: box-shadow var(--fh-hero-dur) ease, transform var(--fh-hero-dur) var(--fh-hero-ease);
}
.fh-hero__card:hover { transform: translateY(-3px); }
.fh-hero__card--speed { background: #f3e8ff; align-items: center; text-align: center; padding: 21px 25px; }
.fh-hero__card--speed:hover { box-shadow: 0 14px 40px rgba(93, 63, 211, .18); }
/* Hover: a 4px lift plus a soft blue circle expanding out of the bottom-left
   corner. The base .fh-hero__card already supplies position:relative and
   overflow:hidden, the latter clipping the circle to the rounded corners. */
.fh-hero__card--stat {
	background: #dbeafe;
	justify-content: space-between;
	overflow: hidden;
	transition: transform .3s ease, box-shadow .3s ease;
}
.fh-hero__card--stat::before {
	content: "";
	position: absolute;
	bottom: -60px;
	left: -60px;
	width: 180px;
	height: 180px;
	border-radius: 50%;
	background: radial-gradient(circle,
		rgba(210, 230, 255, .9) 0%,
		rgba(230, 242, 255, .5) 60%,
		rgba(255, 255, 255, 0) 100%);
	transform: scale(0);
	transform-origin: bottom left;
	transition: transform .6s cubic-bezier(.25, 1, .5, 1);
	pointer-events: none;
}
/* Copy and the stretched link stay above the animated background. The circle
   sits at the default z-index, so it paints over the card's own background but
   under these — no negative z-index or stacking context needed. */
.fh-hero__card--stat > * { position: relative; z-index: 2; }

.fh-hero__card--stat:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 30px rgba(0, 0, 0, .08);
}
.fh-hero__card--stat:hover::before { transform: scale(4.5); }

/* Arrow slides on card hover; the label keeps its colour (the reference
   declares a colour transition but never changes the colour), so the
   site-wide blue on .fh__arrowlink:hover is suppressed here. */
.fh-hero__card--stat:hover .fh__arrowlink svg { transform: translateX(4px); }
.fh-hero__card--stat .fh__arrowlink:hover { color: #292929; }

.fh-hero__card-label { align-self: flex-start; font-size: .875rem; font-weight: 500; color: #292929; }
.fh-hero__gauge {
	position: relative;
	width: 140px; height: 140px;
	margin: 15px auto 0;
	display: grid;
	place-items: center;
}
.fh-hero__gauge svg { position: absolute; inset: 0; transform: rotate(-90deg); }
/* Design: Helvetica Regular 31.46px, #262626, centred in the 140px ring. */
.fh-hero__gauge-val {
	position: relative;
	z-index: 1;
	font-family: var(--fh-display);
	font-weight: 400;
	font-size: 1.966rem;
	letter-spacing: -0.01em;
	color: #262626;
}

/* The ring and its value stay put. Hover feedback is colour only — the card's
   lifted shadow plus the violet ring and value; nothing translates or resizes,
   so the gauge reads at the same spot whether or not the pointer is on it.
   (The svg keeps its base rotate(-90deg); that sets where the arc starts and
   is not part of the hover.) */
.fh-hero__gauge-val { transition: color var(--fh-hero-dur) ease; }
.fh-hero__gauge circle { transition: stroke var(--fh-hero-dur) ease; }

@media (hover: hover) {
	.fh-hero__card--speed:hover .fh-hero__gauge-val { color: var(--fh-hero-accent); }
	.fh-hero__card--speed:hover .fh-hero__gauge circle { stroke: #cfc2f0; }
	.fh-hero__card--speed:hover .fh-hero__gauge circle + circle { stroke: var(--fh-hero-accent); }
}
.fh-hero__card-title { font-family: var(--fh-body); font-size: 1rem; font-weight: 600; color: #292929; margin-top: auto; }
.fh-hero__delta { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 12px; font-size: .875rem; }
.fh-hero__delta b { color: var(--fh-green-ink); font-weight: 700; }
.fh-hero__delta span { color: #292929; font-weight: 500; }

/* Design: Helvetica Regular 40px / 46px / -2px tracking, #292929. */
.fh-hero__bignum { font-family: var(--fh-display); font-weight: 400; font-size: 2.5rem; line-height: 1.15; letter-spacing: -0.05em; color: #292929; }
.fh-hero__card--stat p { font-size: .875rem; font-weight: 300; color: #292929; margin-top: 0; }
/* Must out-specify ".fh-hero__card--stat p" above, or the body copy stays
   bunched under the number instead of sitting at the foot of the card. */
.fh-hero__card--stat .fh-hero__card-body { margin-top: 0; max-width: 176px; font-size: .875rem; font-weight: 500; line-height: 1.35; color: #292929; }
.fh-hero__card--stat .fh__arrowlink { margin-top: 12px; gap: 4px; font-size: .875rem; font-weight: 500; color: #292929; }
/* Stretch the link over the card so the card-wide pointer cursor is honest. */
.fh-hero__card-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }

/* ============================================================
   3. RECENT RESULTS TICKER
   ============================================================ */
.fh-ticker {
	background: #fafafa;
	border-block: 1px solid #f5f5f5;
	overflow: hidden;
	padding-block: 17px;
	display: flex;
	align-items: center;
	gap: 32px;
}
.fh-ticker__label {
	flex: none;
	padding-left: max(var(--fh-gutter), calc((100vw - var(--fh-container)) / 2 + var(--fh-gutter)));
	font-size: .875rem;
	font-weight: 700;
	color: var(--fh-ink);
	white-space: nowrap;
}
.fh-ticker__viewport { overflow: hidden; flex: 1 1 auto; }
.fh-ticker__track { display: flex; align-items: center; gap: 56px; width: max-content; animation: fh-marquee 42s linear infinite; }
.fh-ticker:hover .fh-ticker__track { animation-play-state: paused; }
.fh-ticker__item { display: flex; align-items: center; gap: 10px; white-space: nowrap; font-size: .875rem; font-weight: 500; color: var(--fh-ink-2); }
.fh-ticker__ico { width: 24px; height: 24px; flex: none; display: grid; place-items: center; border-radius: 7px; background: var(--fh-blue-chip); color: var(--fh-blue); }
@keyframes fh-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ============================================================
   4. NEXLY BUILDS — logos + stat cards
   ============================================================ */
.fh-builds { position: relative; background: #f9f9fb; overflow: hidden; }
/* Oversized brand N as the section backdrop — the same extracted glyph the
   footer uses, masked so background-color sets the tint. Scaled well past the
   section so only the middle of the mark is in frame and it reads as sweeping
   diagonals rather than a recognisable letter. */
.fh-builds::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 165%;
	aspect-ratio: 452 / 231;
	transform: translate(-50%, -50%);
	background-color: #f0f1f4;
	-webkit-mask: url(../images/nexly-n-mark.png) center / contain no-repeat;
	mask: url(../images/nexly-n-mark.png) center / contain no-repeat;
	z-index: 0;
	pointer-events: none;
}
/* Narrow screens: the same crop leaves only a flat wedge on screen, so pull the
   mark back and shift it right of the copy. */
@media (max-width: 900px) {
	.fh-builds::before {
		width: 230%;
		left: 60%;
		top: 44%;
	}
}
.fh-builds > * { position: relative; z-index: 1; }
.fh-builds__top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .74fr); gap: 64px; align-items: start; }
/* Airy leading is the point of this block — it reads as editorial, not as a heading. */
.fh-builds__title { margin-top: 22px; max-width: 880px; line-height: 160%; letter-spacing: -1.26px; }
.fh-logos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px 40px; align-items: center; justify-items: center; }
.fh-logos img { max-height: 38px; width: auto; object-fit: contain; filter: grayscale(1); opacity: .55; transition: opacity .25s ease, filter .25s ease; }
.fh-logos img:hover { opacity: 1; filter: grayscale(0); }
.fh-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-top: 88px; }
.fh-stat {
	background: #f1f1ef;
	border-radius: var(--fh-r-lg);
	padding: 22px 22px 24px;
	min-height: 230px;
	display: flex;
	flex-direction: column;
	transition: transform .22s ease, box-shadow .25s ease;
}
.fh-stat:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(23, 23, 23, .07); }
/* Sized so the longest value ("WCAG 2.1 AA") stays on one line inside a fifth of
   the 1280px content column — at 2.125rem it wrapped and broke the card rhythm. */
.fh-stat__v { font-family: var(--fh-display); font-size: 1.875rem; font-weight: 400; line-height: 1.1; letter-spacing: -0.02em; }
.fh-stat__l { margin-top: auto; font-size: .875rem; line-height: 1.5; color: var(--fh-ink-2); }

/* ============================================================
   5. SHOPIFY AUDIT — feature cards
   ============================================================ */
.fh-audit { background: var(--fh-blue-50); }
.fh-audit__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: center; }
/* Was "Plus Jakarta Sans" 800 — a family the homepage never loads, so it rendered
   as Arial Bold. The design sets this in the display face at regular weight, and
   the max-width holds the two-line break. */
.fh-audit__title {
	font-family: var(--fh-display);
	font-weight: 500;
	font-size: clamp(1.75rem, 1.25rem + 1.75vw, 2.625rem);
	line-height: 1.2;
	letter-spacing: -0.025em;
	margin-top: 16px;
	max-width: 680px;
}
.fh-audit__head .fh__btn { justify-self: end; }
.fh-audit__copy { margin-top: 26px; max-width: 900px; }
.fh-audit__copy p + p { margin-top: 14px; }
.fh-audit__copy b { font-weight: 700; color: var(--fh-ink); }
.fh-cards4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; margin-top: 62px; }
.fh-fcard {
	background: #fff;
	border: 1px solid #eceff5;
	border-radius: var(--fh-r-lg);
	padding: 28px;
	transition: transform .22s ease, box-shadow .25s ease;
}
.fh-fcard:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(23, 23, 23, .08); }
.fh-fcard__ico {
	width: 46px; height: 46px;
	border-radius: var(--fh-r-md);
	display: grid; place-items: center;
	background: #f3f3f1;
	color: var(--fh-ink);
}
.fh-fcard--dark .fh-fcard__ico { background: var(--fh-ink); color: #fff; }
.fh-fcard h3 { font-family: var(--fh-display); font-weight: 600; font-size: 1.25rem; letter-spacing: -0.01em; margin-top: 30px; }
.fh-fcard p { margin-top: 12px; font-size: .9375rem; line-height: 1.55; color: var(--fh-ink-2); }

/* ============================================================
   6. FIGMA → SHOPIFY split
   ============================================================ */
.fh-figma { display: grid; grid-template-columns: 1fr 1fr; min-height: 642px; }
.fh-figma__left { background: var(--fh-ink); color: #fff; display: flex; align-items: center; padding: 72px 0; }
.fh-figma__inner { width: 100%; max-width: 660px; margin-left: auto; padding-inline: var(--fh-gutter); padding-right: 60px; }
/* Larger than the shared d3 so it breaks over two lines, as in the design. */
.fh-figma__left .fh__d3 {
	color: #fff;
	font-size: clamp(1.75rem, 1.1rem + 1.7vw, 2.75rem);
	line-height: 1.16;
	letter-spacing: -0.025em;
}
.fh-figma__left p { margin-top: 22px; font-size: 1rem; line-height: 1.6; color: #d4d4d4; }
.fh-figma__list { margin-top: 34px; }
.fh-figma__row {
	display: flex; align-items: center; justify-content: space-between; gap: 20px;
	padding: 20px 0;
	border-top: 1px solid rgba(255, 255, 255, .16);
	font-family: var(--fh-display);
	font-size: 1.25rem;
	letter-spacing: -0.01em;
}
.fh-figma__row:last-child { border-bottom: 1px solid rgba(255, 255, 255, .16); }
.fh-figma__row svg { flex: none; opacity: .85; }
.fh-figma__left .fh__btn { margin-top: 36px; }
.fh-figma__right {
	background: #fff;
	display: grid;
	place-items: center;
	padding: 60px 40px;
	/* Right inset matches the .fh__container edge, so the mock stops on the same
	   line as every other section instead of running out toward the viewport. */
	padding-right: max(var(--fh-gutter), calc((100vw - var(--fh-container)) / 2 + var(--fh-gutter)));
	position: relative;
	overflow: hidden;
}
.fh-figma__mock { position: relative; width: 100%; max-width: 700px; }

/* Small browser-chrome mockups (pure CSS, no images) */
.fh-win { background: #fff; border-radius: 10px; box-shadow: 0 18px 44px rgba(15, 23, 42, .14); overflow: hidden; }
.fh-win__bar { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: #fff; }
.fh-win__dots { display: flex; gap: 5px; }
.fh-win__dots i { width: 10px; height: 10px; border-radius: 50%; display: block; }
.fh-win__dots i:nth-child(1) { background: #ff5f57; }
.fh-win__dots i:nth-child(2) { background: #febc2e; }
.fh-win__dots i:nth-child(3) { background: #28c840; }
.fh-win__url { flex: 1; height: 22px; border-radius: 6px; background: #f1f3f7; display: flex; align-items: center; padding-inline: 10px; font-size: 11px; color: #94a3b8; }

.fh-figma__a { position: relative; z-index: 1; width: 78%; }
.fh-figma__a-body { background: #f3efe6; padding: 22px; }
.fh-figma__a-body h5 { font-family: "Playfair Display", Georgia, serif; font-style: italic; font-weight: 600; font-size: 1.05rem; line-height: 1.25; color: #1c1c1a; max-width: 220px; }
.fh-figma__a-body p { margin-top: 8px; font-size: 11px; color: #6b6b66; max-width: 190px; }
.fh-figma__a-cta { display: inline-block; margin-top: 12px; background: var(--fh-ink); color: #fff; font-size: 11px; font-weight: 600; padding: 7px 12px; border-radius: 5px; }
.fh-figma__a-img { position: absolute; right: 18px; top: 52px; width: 44%; height: 132px; border-radius: 6px; background: radial-gradient(circle at 50% 45%, #cfd6cb, #9aa596); }
/* Design overlaps the two windows only slightly — a deeper offset buried the
   Figma window's artboard behind the storefront one. */
.fh-figma__b { position: relative; z-index: 2; width: 74%; margin: -44px 0 0 auto; }
.fh-figma__b-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 14px; background: #fff; }
.fh-figma__b-grid > div { border-radius: 6px; background: linear-gradient(180deg, #eef1f6, #e3e8f0); aspect-ratio: 3 / 4; position: relative; }
.fh-figma__b-grid > div::after { content: ""; position: absolute; left: 10px; bottom: 10px; width: 42%; height: 7px; border-radius: 3px; background: #4b5563; }
.fh-figma__badge {
	position: absolute; z-index: 4;
	width: 46px; height: 46px;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 8px 22px rgba(15, 23, 42, .16);
	display: grid; place-items: center;
	/* Anchored to the Figma window's edge, not a flat percentage. The window
	   is 78% wide, so 22% of the mock sits to its right; subtracting the badge's
	   own 46px plus a 10px gap keeps that gap constant at every width. A plain
	   percentage shrank the clearance as the mock narrowed and clipped the
	   window edge again below ~1100px. */
	right: calc(22% - 56px); top: 6%;
}
.fh-figma__arrow { position: absolute; z-index: 4; right: 7%; top: 12%; }
.fh-figma__s {
	position: absolute; z-index: 4; right: 0; top: 18%;
	width: 44px; height: 44px;
	border-radius: 10px;
	background: #7ab55c;
	color: #fff;
	display: grid; place-items: center;
	font-weight: 700;
}

/* ============================================================
   7. FULL THEME COVERAGE — 8 cards + navy banner
   ============================================================ */
.fh-cov { background: #f7f7f6; }
.fh-cov__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 52px; }
.fh-ccard {
	background: #fff;
	border: 1px solid #efefec;
	border-radius: var(--fh-r-lg);
	padding: 26px;
	display: flex;
	flex-direction: column;
	transition: transform .22s ease, box-shadow .25s ease;
}
.fh-ccard:hover { transform: translateY(-4px); box-shadow: 0 18px 44px rgba(23, 23, 23, .08); }
.fh-ccard__top { display: flex; align-items: flex-start; justify-content: space-between; }
.fh-ccard__ico { width: 44px; height: 44px; border-radius: var(--fh-r-md); background: #f3f3f1; display: grid; place-items: center; color: var(--fh-ink); }
.fh-ccard__n { font-size: .875rem; font-weight: 500; color: var(--fh-faint); }
.fh-ccard h3 { font-family: var(--fh-display); font-weight: 600; font-size: 1.25rem; letter-spacing: -0.01em; margin-top: 28px; }
.fh-ccard p { margin-top: 10px; font-size: .9375rem; line-height: 1.55; color: var(--fh-ink-2); }
.fh-ccard__meta { display: flex; align-items: center; gap: 8px; margin-top: 20px; font-size: .6875rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--fh-ink-2); }
.fh-ccard__meta::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--fh-ink); flex: none; }
.fh-ccard .fh__arrowlink { margin-top: 22px; }

.fh-os2 {
	position: relative;
	overflow: hidden;
	margin-top: 42px;
	border-radius: 28px;
	background: linear-gradient(112deg, #142d68 0%, #1a3785 50%, #1f3f94 100%);
	color: #fff;
	padding: 56px;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 48px;
	align-items: center;
}
/* Broad concentric arcs swinging in from off the right edge. */
.fh-os2::after {
	content: "";
	position: absolute;
	inset: 0;
	background: repeating-radial-gradient(circle at 106% 50%,
		rgba(255, 255, 255, 0) 0px,
		rgba(255, 255, 255, .13) 120px,
		rgba(255, 255, 255, 0) 250px);
	/* Fade the arcs out toward the copy so they stay decorative behind the text. */
	-webkit-mask-image: linear-gradient(90deg, transparent 36%, #000 88%);
	mask-image: linear-gradient(90deg, transparent 36%, #000 88%);
	pointer-events: none;
}
/* The audit band keeps the softer bottom-right rings. */
.fh-band::after {
	content: "";
	position: absolute;
	inset: 0;
	background: repeating-radial-gradient(circle at 118% 132%,
		rgba(255, 255, 255, 0) 0px,
		rgba(255, 255, 255, .05) 86px,
		rgba(255, 255, 255, 0) 172px);
	pointer-events: none;
}
.fh-os2__t { font-family: var(--fh-display); font-weight: 600; font-size: clamp(1.75rem, 1.35rem + 1.4vw, 2.625rem); letter-spacing: -0.025em; position: relative; z-index: 1; }
/* ~62% of the banner, which reproduces the design's two-line break. */
.fh-os2 p { margin-top: 16px; max-width: 790px; font-size: .9375rem; line-height: 1.65; color: rgba(255, 255, 255, .82); position: relative; z-index: 1; }
/* Narrower than the paragraph so the chips break 3 + 2, as in the design. */
.fh-os2__chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; max-width: 720px; position: relative; z-index: 1; }
.fh-os2__chip {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 9px 16px;
	border-radius: var(--fh-r-pill);
	border: 1px solid rgba(255, 255, 255, .22);
	font-size: .8125rem;
	font-weight: 500;
	color: rgba(255, 255, 255, .92);
}
/* Grid items stretch by default — pin the pill to its own width. */
.fh-os2 .fh__btn {
	position: relative;
	z-index: 1;
	justify-self: start;
	overflow: hidden;
	box-shadow: 0 10px 26px -12px rgba(0, 0, 0, .55);
	transition: transform .24s cubic-bezier(.34,1.3,.64,1), box-shadow .24s ease;
}
/* Light sweep that runs across the pill on hover. */
.fh-os2 .fh__btn::before {
	content: "";
	position: absolute;
	top: 0; left: -80%;
	width: 45%; height: 100%;
	background: linear-gradient(100deg, transparent, rgba(41, 71, 163, .18), transparent);
	transform: skewX(-20deg);
	transition: left .55s cubic-bezier(.4, 0, .2, 1);
	pointer-events: none;
}
.fh-os2 .fh__btn:hover {
	transform: translateY(-3px);
	box-shadow: 0 20px 40px -12px rgba(0, 0, 0, .6);
}
.fh-os2 .fh__btn:hover::before { left: 135%; }

/* ============================================================
   8. COMPARISON TABLE
   ============================================================ */
.fh-cmp__wrap { margin-top: 48px; overflow-x: auto; }
.fh-cmp { width: 100%; min-width: 900px; border-collapse: separate; border-spacing: 0; font-size: .9375rem; }
.fh-cmp th, .fh-cmp td { padding: 16px 20px; text-align: left; vertical-align: middle; }
.fh-cmp thead th { background: #f1f1ef; font-weight: 600; }
.fh-cmp thead th:first-child { border-radius: var(--fh-r-md) 0 0 0; }
.fh-cmp thead th.is-own { background: var(--fh-ink); color: #fff; text-align: center; }
.fh-cmp thead th.is-alt { background: #dfe8fb; text-align: center; }
.fh-cmp thead th.is-alt2 { background: #ececea; text-align: center; border-radius: 0 var(--fh-r-md) 0 0; }
.fh-cmp thead small { display: block; margin-top: 4px; font-size: .75rem; font-weight: 500; opacity: .72; }
.fh-cmp tbody tr { border-top: 1px solid #e9e9e6; }
.fh-cmp tbody td { border-top: 1px solid #e9e9e6; }
.fh-cmp tbody td:not(:first-child) { text-align: center; width: 190px; }
.fh-cmp td.c-yes { background: #f4fbf6; }
.fh-cmp td.c-no { background: #fdf4f4; }
.fh-cmp td.c-mid { background: #fafafa; }
.fh-mark { width: 22px; height: 22px; flex: none; border-radius: 50%; display: inline-grid; place-items: center; line-height: 0; }
.fh-mark svg { display: block; }
.fh-mark--yes { background: var(--fh-green-ink); color: #fff; }
.fh-mark--no { background: #fbdcdc; color: #b42318; }
.fh-mark--mid { background: #e6e6e3; color: #57534e; }
.fh-cmp__toggle { display: none; }
.fh-cmp__legend { display: flex; justify-content: center; gap: 26px; flex-wrap: wrap; margin-top: 22px; font-size: .875rem; color: var(--fh-ink-2); }
/* Direct child only — as a descendant selector this also matched the nested
   .fh-mark chip and replaced its `place-items: center` with `align-items:
   center`, which left the glyph flush left inside its circle. */
.fh-cmp__legend > span { display: inline-flex; align-items: center; gap: 8px; }

/* ============================================================
   9. WHAT'S INCLUDED — tabs + panels + CTA band
   ============================================================ */
/* Dark section (Figma 90:517, fill #022c22): heading row, then a 210px sticky
   rail + 920px panel column inside the 1320px container. */
.fh-inc {
	position: relative;
	background: #141414;
	color: #fff;
	padding-block: 96px 88px;
}
/* Faint dot field over the dark ground, per the design. */
.fh-inc::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px);
	background-size: 22px 22px;
	pointer-events: none;
}
.fh-inc > * { position: relative; z-index: 1; }
.fh__eyebrow--light { color: #e5e7eb; }
.fh-inc__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 48px; align-items: start; }
.fh-inc__title {
	font-family: var(--fh-display);
	font-weight: 600;
	font-size: clamp(1.6rem, 1.25rem + 1.2vw, 2rem);
	line-height: 1.22;
	letter-spacing: -0.022em;
	margin-top: 18px;
	max-width: 720px;
}
.fh-inc__sub { margin-top: 14px; max-width: 700px; font-size: .9375rem; line-height: 1.6; color: #cbd5e1; }
.fh-inc__headcta { display: flex; gap: 12px; flex-wrap: wrap; }

.fh-inc__body { display: grid; grid-template-columns: 210px minmax(0, 920px); gap: 190px; margin-top: 56px; align-items: start; }
.fh-inc__rail { position: sticky; top: 100px; }
.fh-inc__nav ul { display: grid; gap: 24px; }
.fh-inc__nav a {
	display: block;
	font-size: .875rem;
	font-weight: 500;
	color: #d1d5db;
	transition: color .18s ease, padding-left .18s ease;
}
.fh-inc__nav a:hover { color: #fff; padding-left: 4px; }
.fh-inc__nav a[aria-current="true"] {
	position: relative;
	font-size: 1rem;
	font-weight: 600;
	color: #fff;
	padding-left: 14px;
}
/* Square node marker, not a bar, per the design. */
.fh-inc__nav a[aria-current="true"]::before {
	content: "";
	position: absolute;
	left: 0; top: 50%;
	width: 11px; height: 11px;
	border-radius: 2px;
	background: var(--fh-blue-btn);
	transform: translateY(-50%);
}
.fh-inc__nav a[aria-current="true"] { padding-left: 22px; }
/* Sits well below the rail nav — these are the end-of-section action, not part
   of the list. anim.js also holds them hidden until the reader reaches the
   bottom of the section (desktop only; they are display:none on mobile). */
.fh-inc__railcta { display: grid; gap: 10px; justify-items: start; margin-top: 118px; }
.fh-inc__railcta .fh__btn { width: 100%; }
/* Eight stacked panel cards (Figma 90:551 — 8 × 920×720 blocks, fill #eff6ff). */
.fh-inc__panels { display: grid; gap: 28px; }
.fh-panel {
	background: var(--fh-blue-50);
	border-radius: var(--fh-r-lg);
	padding: 24px;
	scroll-margin-top: 100px;
	color: var(--fh-ink);
}
.fh-panel__head { text-align: center; max-width: 620px; margin-inline: auto; }
.fh-panel__pill {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 8px 16px;
	border-radius: var(--fh-r-pill);
	background: #dfeaff;
	color: var(--fh-blue-btn);
	font-size: .875rem;
	font-weight: 700;
}
.fh-panel__head h3 { font-family: var(--fh-display); font-weight: 600; font-size: 1.5rem; letter-spacing: -0.018em; margin-top: 18px; }
.fh-panel__head p { margin-top: 10px; font-size: .9375rem; line-height: 1.55; color: var(--fh-ink-2); }
.fh-panel__stage { margin-top: 28px; display: grid; place-items: center; }
.fh-panel__stage .fh-win { width: 100%; max-width: 532px; }
.fh-editor { display: grid; grid-template-columns: 158px 1fr 172px; min-height: 280px; background: #fff; border-top: 1px solid #eef1f6; }
.fh-editor__col { padding: 14px; font-size: 11px; }
.fh-editor__col + .fh-editor__col { border-left: 1px solid #eef1f6; }
.fh-editor__lbl { font-size: 9px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: #94a3b8; }
.fh-editor__li { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 6px; margin-top: 5px; color: #64748b; }
.fh-editor__li i { width: 9px; height: 9px; border-radius: 3px; background: #dfe3ea; display: block; flex: none; }
.fh-editor__li.is-on { background: #f1f3f7; color: var(--fh-ink); font-weight: 700; }
.fh-editor__field { margin-top: 10px; }
.fh-editor__field span { display: block; font-size: 10px; color: #64748b; }
.fh-editor__field i { display: block; height: 15px; border-radius: 4px; background: #f1f3f7; margin-top: 5px; }
.fh-editor__canvas { padding: 16px; background: #fff; }
.fh-editor__hero { background: #f3efe6; border-radius: 6px; padding: 16px; text-align: center; }
.fh-editor__hero h6 { font-family: "Playfair Display", Georgia, serif; font-style: italic; font-weight: 600; font-size: 13px; color: #1c1c1a; }
.fh-editor__hero span { display: inline-block; margin-top: 8px; background: var(--fh-ink); color: #fff; font-size: 10px; font-weight: 600; padding: 5px 10px; border-radius: 4px; }
.fh-editor__row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 10px; }
.fh-editor__row i { display: block; aspect-ratio: 3 / 4; border-radius: 5px; background: #f1f3f7; }

/* Single-column mockups (metrics + generic) — no 3-column min-height. */
.fh-editor--solo { grid-template-columns: 1fr; min-height: 0; }
.fh-editor--solo .fh-editor__row i { aspect-ratio: 4 / 3; }
.fh-editor__col--metrics { text-align: center; padding: 26px; }
.fh-editor__score { font-family: var(--fh-display); font-size: 2.4rem; letter-spacing: -0.02em; color: var(--fh-green-ink); }
.fh-editor__scorelbl { font-size: 12px; color: var(--fh-muted); margin-top: 4px; }
.fh-editor__metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 22px; }
.fh-editor__metrics > span { display: block; text-align: center; }
.fh-editor__mk { display: block; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--fh-muted-2); }
.fh-editor__metrics b { display: block; margin-top: 4px; font-size: 14px; color: var(--fh-green-ink); }
/* White 3-card strip sitting inside the panel (Figma 90:678, 872 × 125). */
.fh-panel__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 28px; }
.fh-panel__card { background: #fff; border-radius: var(--fh-r-md); padding: 18px; }
.fh-panel__card h4 { font-size: .9375rem; font-weight: 700; }
.fh-panel__card p { margin-top: 8px; font-size: .8125rem; line-height: 1.5; color: var(--fh-ink-2); }

.fh-band {
	position: relative;
	overflow: hidden;
	margin-top: 60px;
	border-radius: 24px;
	background: linear-gradient(104deg, #1b3a8f 0%, #23429f 52%, #1a3688 100%);
	color: #fff;
	padding: 52px 56px;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 40px;
	align-items: center;
}
.fh-band h3 { font-family: var(--fh-display); font-weight: 600; font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2.125rem); letter-spacing: -0.025em; position: relative; z-index: 1; }
.fh-band p { margin-top: 14px; font-size: .9375rem; line-height: 1.6; color: rgba(255, 255, 255, .8); max-width: 760px; position: relative; z-index: 1; }
.fh-band .fh__btn { justify-self: start; position: relative; z-index: 1; }
.fh-audit__head .fh__btn { justify-self: start; }

/* ============================================================
   10. STACK & TOOLING
   ============================================================ */
.fh-stack { background: var(--fh-page); padding-block: 120px; }
.fh-stack__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .78fr); gap: 72px; align-items: center; }
/* max-width holds the two-line break: "Built on the tools modern Shopify / themes run on." */
.fh-stack__title { font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.5rem); line-height: 1.25; letter-spacing: -0.025em; max-width: 620px; }
.fh-stack__sub { margin-top: 22px; max-width: 640px; }

/* ============================================================
   11. PROCESS — zigzag with numbered spine
   ============================================================ */
.fh-proc { background: var(--fh-page); }
.fh-proc__head { text-align: center; max-width: 840px; margin-inline: auto; }
.fh-proc__head .fh__eyebrow { justify-content: center; }
/* Set by anim.js only when the scroll timeline is actually built, so the
   undrawn state can never be left behind if JS is absent or fails. Declared in
   CSS rather than via gsap.set(): a custom property assigned this way is a real
   cascade value that GSAP can read as a tween start. */
.fh-proc.is-anim .fh-proc__step {
	--seg: 0;
	--branch: 0;
	/* Depth for the cards' rotateY entry. Only under .is-anim so the static
	   layout never gains a 3D context it doesn't need. */
	perspective: 1400px;
}
/* The travelling head of the line. Created by anim.js, so it simply doesn't
   exist without JS — nothing to hide or fail-safe. */
.fh-proc__comet {
	position: absolute;
	left: 50%;
	top: 0;
	width: 7px;
	height: 7px;
	margin: -3px 0 0 -3px;
	border-radius: 50%;
	background: var(--fh-blue-btn, #2947a3);
	box-shadow:
		0 0 0 4px rgba(41, 71, 163, .12),
		0 0 16px 3px rgba(41, 71, 163, .55);
	pointer-events: none;
	opacity: 0;
	z-index: 2;
}
@media (max-width: 1024px) {
	/* Mobile moves the spine to the node column, so the comet follows it. */
	.fh-proc__comet { left: calc(var(--proc-dot) / 2); }
}

.fh-proc__list {
	position: relative;
	margin-top: 58px;
	/* vw-based so the same value resolves identically on the grid track and on
	   the connector width below. */
	--proc-mid: clamp(140px, 20vw, 300px);
	--proc-dot: 56px;
}
/* Spine is drawn per step rather than once across the list: a single line had a
   fixed 40px inset that bore no relation to where the first and last nodes
   actually sit, so it overhung above node 1 and below the last one. Each step
   carries its own segment, and the end steps stop at their node's centre. */
.fh-proc__step::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 0;
	bottom: 0;
	width: 1px;
	background: #e2e2df;
	/* --seg / --branch are the scroll-driven draw progress. GSAP cannot target
	   a pseudo-element, so it animates these custom properties on the <li> and
	   the pseudo-elements inherit them. Both default to 1, so with JS disabled
	   or GSAP missing the lines are simply drawn in full. */
	transform: translateX(-50%) scaleY(var(--seg, 1));
	transform-origin: top center;
}
/* -of-type, not -child: anim.js appends the comet <span> to this list, which
   would make the last <li> stop being :last-child and let its segment run the
   full height of the step — a line dangling below the final node. */
.fh-proc__step:first-of-type::before { top: 50%; }
.fh-proc__step:last-of-type::before { bottom: 50%; }
.fh-proc__step {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--proc-mid) minmax(0, 1fr);
	align-items: center;
}
/* Cards alternate sides, so the vertical overlap never collides — it just pulls
   the zigzag tight, as in the design. */
.fh-proc__step + .fh-proc__step { margin-top: -110px; }
.fh-proc__num {
	grid-column: 2;
	grid-row: 1;              /* pin: without it the odd card is pushed to row 2 */
	justify-self: center;
	width: var(--proc-dot); height: var(--proc-dot);
	border-radius: 50%;
	background: #fff;
	border: 1px solid #e2e2df;
	display: grid; place-items: center;
	font-family: var(--fh-display);
	font-size: 1.25rem;
	color: var(--fh-ink);
	position: relative;
	z-index: 1;
}
.fh-proc__card {
	background: #fff;
	border: 1px solid #ececea;
	border-radius: var(--fh-r-xl);
	padding: 28px;
	transition: transform .22s ease, box-shadow .25s ease;
}
.fh-proc__card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(23, 23, 23, .07); }
.fh-proc__step:nth-child(odd) .fh-proc__card { grid-column: 1; grid-row: 1; }
.fh-proc__step:nth-child(even) .fh-proc__card { grid-column: 3; grid-row: 1; }
.fh-proc__ico { width: 34px; height: 34px; color: var(--fh-ink); }
.fh-proc__card h3 { font-size: 1.25rem; font-weight: 700; margin-top: 22px; }
.fh-proc__card > p { margin-top: 10px; font-size: .9375rem; line-height: 1.55; color: var(--fh-ink-2); }
/* No rule above the list — the design runs the checklist straight off the copy,
   and the old border-top collided with the paragraph's last line. */
.fh-proc__ticks { margin-top: 30px; display: grid; gap: 12px; }
.fh-proc__ticks li { display: flex; align-items: center; gap: 10px; font-size: .9375rem; color: var(--fh-ink-2); }
.fh-proc__ticks svg { flex: none; color: var(--fh-ink); }

/* Connector spans the whole gap between the node and its card, so the line
   actually reaches the card edge instead of stopping 22px out. */
.fh-proc__num::after {
	content: "";
	position: absolute;
	top: 50%;
	width: calc((var(--proc-mid) - var(--proc-dot)) / 2);
	height: 1px;
	background: #e2e2df;
	transform: scaleX(var(--branch, 1));
}
/* Card on the left: the branch runs leftward, so it must grow from its right
   (node) end. Card on the right: mirror image. */
.fh-proc__step:nth-child(odd) .fh-proc__num::after { right: 100%; transform-origin: right center; }
.fh-proc__step:nth-child(even) .fh-proc__num::after { left: 100%; transform-origin: left center; }

/* ============================================================
   12. TEAM CAROUSEL
   ============================================================ */
.fh-team { background: var(--fh-page); overflow: hidden; }
.fh-team__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: end; }
.fh-team__nav { display: flex; gap: 12px; }
.fh-team__btn {
	width: 42px; height: 42px;
	border-radius: 50%;
	border: 1px solid #d7d7d3;
	display: grid; place-items: center;
	color: var(--fh-ink);
	transition: background-color .2s ease, color .2s ease, border-color .2s ease, opacity .2s ease;
}
.fh-team__btn:hover { background: var(--fh-blue-btn); border-color: var(--fh-blue-btn); color: #fff; }
.fh-team__btn[disabled] { opacity: .4; cursor: not-allowed; }
.fh-team__btn[disabled]:hover { background: none; color: var(--fh-ink); border-color: #d7d7d3; }
.fh-team__viewport { margin-top: 40px; overflow: hidden; }
.fh-team__track { display: flex; gap: 22px; transition: transform .45s cubic-bezier(.4, 0, .2, 1); }
.fh-team__card {
	position: relative;
	flex: 0 0 clamp(240px, 24%, 320px);
	aspect-ratio: 320 / 420;
	border-radius: 10px;
	overflow: hidden;
	background: #ddd;
}
.fh-team__card img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.25,.46,.45,.94); }
.fh-team__card:hover img { transform: scale(1.04); }
.fh-team__meta {
	position: absolute; inset: auto 0 0 0;
	padding: 18px;
	padding-top: 64px;
	display: flex; align-items: flex-end; justify-content: space-between; gap: 12px;
	/* Deeper scrim — the old .55 stop left names unreadable over light portraits. */
	background: linear-gradient(to top, rgba(0, 0, 0, .82) 0%, rgba(0, 0, 0, .55) 42%, rgba(0, 0, 0, 0) 100%);
	color: #fff;
}
.fh-team__who { display: block; min-width: 0; }
/* Explicit, or a global `strong` colour rule wins over the inherited white. */
.fh-team__meta .fh-team__who strong { display: block; font-size: 1rem; font-weight: 700; color: #fff; }
.fh-team__meta .fh-team__who span { display: block; margin-top: 3px; font-size: .8125rem; color: rgba(255, 255, 255, .8); }
/* Out-specifies ".fh-team__meta span", which used to paint the glyph white on
   the white chip and made it vanish. */
.fh-team__meta .fh-team__li {
	width: 32px; height: 32px; flex: none;
	border-radius: 50%;
	background: #fff;
	color: var(--fh-ink);
	display: grid; place-items: center;
	margin: 0;
	transition: background-color .2s ease, color .2s ease, transform .2s ease;
}
.fh-team__meta .fh-team__li:hover { background: var(--fh-blue-btn); color: #fff; transform: translateY(-2px); }

/* ============================================================
   13. FAQ
   ============================================================ */
.fh-faq { background: var(--fh-page); }
.fh-faq__grid { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1fr); gap: 76px; align-items: start; }
.fh-faq__cta {
	margin-top: 56px;
	background: #000;
	color: #fff;
	border-radius: var(--fh-r-xl);
	padding: 34px;
}
.fh-faq__cta h3 { font-family: var(--fh-display); font-weight: 600; font-size: 1.75rem; letter-spacing: -0.02em; }
.fh-faq__cta p { margin-top: 16px; font-size: .9375rem; line-height: 1.6; color: rgba(255, 255, 255, .74); }
.fh-faq__cta .fh__btn { margin-top: 34px; }
.fh-acc__item { border-bottom: 1px solid #e6e6e2; }
.fh-acc__q {
	width: 100%;
	display: flex; align-items: center; justify-content: space-between; gap: 24px;
	padding: 22px 0;
	text-align: left;
	font-size: 1rem;
	font-weight: 500;
	color: var(--fh-ink);
}
.fh-acc__q:hover { color: var(--fh-blue); }
.fh-acc__sign { flex: none; width: 18px; height: 18px; position: relative; }
.fh-acc__sign::before,
.fh-acc__sign::after {
	content: ""; position: absolute; inset: 50% 0 auto 0;
	height: 1.5px; background: currentColor; transition: transform .25s ease, opacity .25s ease;
}
.fh-acc__sign::after { transform: rotate(90deg); }
.fh-acc__item.is-open .fh-acc__sign::before { transform: rotate(45deg); }
.fh-acc__item.is-open .fh-acc__sign::after { transform: rotate(-45deg); }
.fh-acc__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
.fh-acc__item.is-open .fh-acc__a { grid-template-rows: 1fr; }
.fh-acc__a > div { overflow: hidden; }
.fh-acc__a p { padding-bottom: 22px; font-size: .9375rem; line-height: 1.65; color: var(--fh-ink-2); max-width: 700px; }

/* ============================================================
   14. FOOTER
   ============================================================ */
.fh-foot {
	position: relative;
	background: #0d0d0d;
	color: #fff;
	padding-block: 112px 40px;
	overflow: hidden;
}
/* Oversized brand mark bled off the baseline. Sits just above the ground colour
   so it reads as texture, never as content. */
/* The brand N, applied as a mask so background-color controls the tint — the
   source PNG is white-on-transparent and could not be recoloured directly.
   aspect-ratio replaces the SVG's intrinsic ratio (452 x 231 native). */
.fh-foot__watermark {
	position: absolute;
	left: 50%;
	bottom: -8%;
	display: block;
	width: min(820px, 66vw);
	aspect-ratio: 452 / 231;
	background-color: #141414;
	-webkit-mask: url(../images/nexly-n-mark.png) center / contain no-repeat;
	mask: url(../images/nexly-n-mark.png) center / contain no-repeat;
	transform: translateX(-52%);
	pointer-events: none;
	-webkit-user-select: none;
	user-select: none;
}
.fh-foot__inner { position: relative; z-index: 1; }

/* CTA left, service columns right. */
.fh-foot__top {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
	gap: clamp(48px, 6vw, 96px);
	align-items: start;
}
.fh-foot__t {
	font-family: var(--fh-display);
	font-weight: 400;
	font-size: clamp(2.25rem, 1rem + 3vw, 4.25rem);
	line-height: 1.16;
	letter-spacing: -0.03em;
	max-width: 9ch;          /* holds the two-line break */
	text-wrap: balance;
}
.fh-foot__btn {
	margin-top: 40px;
	height: auto;
	padding: 16px 26px;
	font-size: 1rem;
	font-weight: 700;
	border-radius: var(--fh-r-pill);
	transition: transform .24s cubic-bezier(.34,1.3,.64,1), box-shadow .24s ease;
}
.fh-foot__btn:hover { transform: translateY(-3px); box-shadow: 0 18px 38px -14px rgba(0, 0, 0, .9); }

.fh-foot__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 32px; }
.fh-foot__h { font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #7a7a7a; }
.fh-foot__col ul { margin-top: 26px; display: grid; gap: 18px; }
.fh-foot__col a {
	font-size: 1rem;
	color: #d9d9d9;
	transition: color .2s ease, transform .2s ease;
	display: inline-block;
}
.fh-foot__col a:hover { color: #fff; transform: translateX(3px); }

/* Single utility row: brand · copyright · policies. */
.fh-foot__bottom {
	margin-top: clamp(72px, 9vw, 128px);
	padding-top: 32px;
	border-top: 1px solid #232323;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px 40px;
	flex-wrap: wrap;
}
.fh-foot__brand { display: inline-flex; align-items: center; flex: none; }
/* Real white lockup (2560×781) — height drives it, width follows. */
.fh-foot__logo {
	height: 46px;
	width: auto;
	display: block;
	transition: transform .28s cubic-bezier(.34,1.4,.64,1);
}
.fh-foot__brand:hover .fh-foot__logo { transform: scale(1.04); }
.fh-foot__copy { font-size: .9375rem; color: #7a7a7a; }
.fh-foot__legal { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 28px; font-size: .9375rem; color: #d9d9d9; }
.fh-foot__legal a { transition: color .2s ease; }
.fh-foot__legal a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* ---- Header rail: tighten in stages as the bar runs out of width, rather than
   letting the CTA clip off the right edge. ---- */
@media (max-width: 1200px) {
	.fh-stats { grid-template-columns: repeat(3, 1fr); }
	.fh-cards4 { grid-template-columns: repeat(2, 1fr); }
	.fh-cov__grid { grid-template-columns: repeat(2, 1fr); }
	.fh-panel__cards { grid-template-columns: 1fr; }
	/* Drop the secondary pill first — "Start a Project" is the priority action. */
	.fh-header__cta .fh__btn--ghost { display: none; }
}

@media (max-width: 1150px) {
	.fh-header__inner { gap: 12px; }
	.fh-nav { gap: 4px; }
	.fh-nav__link { padding: 9px 7px; font-size: .8125rem; }
}

@media (max-width: 1024px) {
	.fh-nav, .fh-header__cta { display: none; }
	.fh-header__burger { display: grid; margin-left: auto; }
	/* Burger drawer lists the top-level links; panels would overlay it. */
	/* ---- Mobile service panels ----
	   The desktop .mega flyout is reused rather than duplicating 50 links into a
	   second drawer: main.js's trigger click has no desktop guard, so tapping a
	   nav item already toggles the right panel. It just needs to stack and cap
	   its height instead of laying out as a 2-column mega. */
	.mega { position: static; opacity: 1; visibility: visible; transform: none; }
	.mega__panel { box-shadow: none; border-bottom: 0; }
	.mega__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 22px;
		padding: 18px 0 22px;
		max-height: min(62vh, 560px);
		overflow-y: auto;
		overscroll-behavior: contain;
	}
	.mega__cols { grid-template-columns: minmax(0, 1fr); gap: 20px; }
	.mega__card { padding: 10px 8px; }
	.mega__feat { padding: 20px 18px; }
	.mega__foot-in { padding: 12px 0; flex-wrap: wrap; gap: 10px; }
	/* Panels belong inside the open drawer only. */
	.fh-header:not(.is-open) .mega { display: none; }

	/* Burger-expanded state: stack nav + CTAs under the bar. */
	.fh-header.is-open { position: relative; }
	.fh-header.is-open .fh-header__inner { flex-wrap: wrap; height: auto; padding-bottom: 20px; }
	.fh-header.is-open .fh-nav,
	.fh-header.is-open .fh-header__cta {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		width: 100%;
		order: 3;
		margin: 0;
		gap: 8px;
	}
	.fh-header.is-open .fh-nav { border-top: 1px solid #f1f1ef; padding-top: 14px; }
	.fh-header.is-open .fh-nav__link { padding: 12px 4px; }
	.fh-header.is-open .fh-nav__link::after { display: none; }
	.fh-header.is-open .fh-header__cta { margin-top: 12px; }
	.fh-hero__grid { grid-template-columns: 1fr; gap: 44px; }
	.fh-builds__top, .fh-stack__grid { grid-template-columns: 1fr; gap: 40px; }
	.fh-figma { grid-template-columns: 1fr; }
	.fh-figma__inner { max-width: var(--fh-container); margin-inline: auto; padding-right: var(--fh-gutter); }
	.fh-audit__head { grid-template-columns: 1fr; }
	.fh-inc__head { grid-template-columns: 1fr; gap: 28px; }
	.fh-inc__body { grid-template-columns: 1fr; gap: 36px; }
	.fh-inc__rail { position: static; }
	.fh-inc__nav ul { display: flex; flex-wrap: wrap; gap: 10px 18px; }
	.fh-inc__railcta { display: none; }
	.fh-os2, .fh-band { grid-template-columns: 1fr; padding: 36px; }
	.fh-faq__grid { grid-template-columns: 1fr; gap: 40px; }
	.fh-foot__top { grid-template-columns: minmax(0, 1fr); gap: 56px; }
	.fh-foot__t { max-width: 14ch; }
	.fh-proc__step::before { left: calc(var(--proc-dot) / 2); }
	.fh-proc__step { grid-template-columns: var(--proc-dot) 1fr; gap: 20px; }
	/* Single rail: no side-alternation, so drop the overlap and the connector. */
	.fh-proc__step + .fh-proc__step { margin-top: 28px; }
	.fh-proc__num { grid-column: 1; justify-self: start; }
	/* Kept, but resized: the desktop width is derived from --proc-mid (140-300px)
	   which massively overshoots the 20px grid gap here, which is why this used
	   to be hidden. The card is always to the right on mobile, so the branch
	   always grows rightward from the node. */
	.fh-proc__num::after {
		display: block;
		left: 100%;
		right: auto;
		width: 20px;
		transform-origin: left center;
	}
	.fh-proc__step:nth-child(odd) .fh-proc__num::after,
	.fh-proc__step:nth-child(even) .fh-proc__num::after {
		left: 100%;
		right: auto;
		transform-origin: left center;
	}
	.fh-proc__step:nth-child(odd) .fh-proc__card,
	.fh-proc__step:nth-child(even) .fh-proc__card { grid-column: 2; }
}

@media (max-width: 720px) {
	.fh { --fh-gutter: 20px; }
	.fh__section { padding-block: 60px; }
	.fh-hero { padding-block: 48px 60px; }
	.fh-stats { grid-template-columns: repeat(2, 1fr); }
	.fh-cards4, .fh-cov__grid { grid-template-columns: 1fr; }
	.fh-logos { grid-template-columns: repeat(2, 1fr); }
	.fh-team__card { flex-basis: 78%; }
	.fh-foot { padding-block: 64px 32px; }
	.fh-foot__cols { grid-template-columns: minmax(0, 1fr); gap: 34px; }
	.fh-foot__bottom { justify-content: flex-start; gap: 20px; }
	.fh-foot__legal { gap: 10px 20px; }
	.fh-editor { grid-template-columns: 1fr; }
	.fh-editor__col + .fh-editor__col { border-left: 0; border-top: 1px solid #eef1f6; }
	.fh-ticker__label { padding-left: var(--fh-gutter); }
}

/* ============================================================
   Hero — mobile (Figma 375px frame)

   The desktop hero is a three-mockup fan plus a 434/240 card split.
   Neither survives 375px: the fan crops to unreadable slivers and the
   cards stack into a ~700px column. This block rebuilds the hero to the
   mobile comp — one storefront image, full-width buttons, and the two
   stat cards side by side.
   ============================================================ */
@media (max-width: 720px) {

	/* --- Copy --- */
	.fh-hero__title { font-size: clamp(1.95rem, 8.6vw, 2.35rem); line-height: 1.12; letter-spacing: -0.03em; }
	.fh-hero__sub { font-size: .9375rem; line-height: 1.55; margin-top: 16px; }

	/* Full-bleed buttons, stacked — the comp shows them edge to edge. */
	.fh-hero__actions { flex-wrap: nowrap; flex-direction: column; gap: 10px; margin-top: 22px; }
	.fh-hero__actions > .fh__btn { width: 100%; justify-content: center; }

	/* Rating stays on one line; it wrapped "610+ Happy Merchants" onto its own row. */
	.fh-hero__proof { flex-wrap: nowrap; gap: 7px; margin-top: 24px; font-size: .78rem; }
	.fh-hero__score, .fh-hero__merchants { font-size: .78rem; white-space: nowrap; }
	.fh-hero__stars { font-size: .8rem; letter-spacing: -.5px; }

	/* --- Media: one storefront, not a fan --- */
	.fh-hero__stack {
		aspect-ratio: auto;          /* the single shot sets the height now */
		background: none;
		overflow: visible;
		cursor: default;
		margin-top: 32px;
	}
	.fh-hero__shots { position: static; }
	/* Shot 1 is the Strada "Wind of Change" frame used in the mobile comp. */
	.fh-hero__shot--1 {
		position: static;
		width: 100%;
		aspect-ratio: 1.9 / 1;
		border-radius: 14px;
		box-shadow: 0 10px 26px rgba(15, 23, 42, .14);
	}
	.fh-hero__shot--2,
	.fh-hero__shot--3,
	.fh-hero__stack-cta { display: none; }
	/* The lift-on-hover belongs to the fan; a lone static image shouldn't move. */
	.fh-hero__shot--1:hover { transform: none; }

	/* --- Cards: side by side --- */
	.fh-hero__cards { grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
	.fh-hero__card { padding: 14px; border-radius: 14px; }
	.fh-hero__card-label { font-size: .75rem; }
	.fh-hero__card-title { font-size: .8125rem; margin-top: 10px; }
	.fh-hero__delta { font-size: .7rem; }
	.fh-hero__card-body { font-size: .7rem; line-height: 1.4; }
	.fh-hero__card-link { font-size: .7rem; }
	.fh-hero__bignum { font-size: 1.5rem; }

	/* The SVG carries viewBox="0 0 140 140", so resizing width/height rescales
	   the arc correctly. (A transform: scale() would pivot on the 140px centre
	   inside a 104px box and push the ring down-right.) */
	.fh-hero__gauge { width: 104px; height: 104px; margin: 10px auto; }
	.fh-hero__gauge svg { width: 104px; height: 104px; }
	.fh-hero__gauge-val { font-size: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
	.fh *, .fh *::before, .fh *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}
}

/* ============================================================
   15. SHARED FOOTER — homepage alignment
   ============================================================ */
/* The CTA band + site footer render outside .fh (see footer-home.php), so they
   use main.css's narrower .container and were sitting inboard of the sections
   above them. home.css only loads on the front page, so scoping to the body
   class keeps every other page on the site-wide measure. */
.nexly-fh-page .cta-band > .container,
.nexly-fh-page .site-footer > .container {
	max-width: 1360px;
	padding-inline: 40px;
}

@media (max-width: 720px) {
	.nexly-fh-page .cta-band > .container,
	.nexly-fh-page .site-footer > .container { padding-inline: 20px; }
}

/* ============================================================
   16. MOBILE — carousel + table restructure
   ============================================================ */
@media (max-width: 1024px) {
	/* ---- "What's included": 8 stacked panels was ~7000px of scroll. Becomes a
	   native scroll-snap carousel — no JS, momentum scrolling, one panel per
	   swipe — with the rail above it as a scrollable chip strip. ---- */
	.fh-inc__body { display: block; }

	.fh-inc__rail { position: static; margin-bottom: 22px; }
	/* Eight short labels wrap to three rows in ~120px — every option stays
	   visible, which beats hiding half of them behind a horizontal scroll. */
	.fh-inc__nav ul { display: flex; flex-wrap: wrap; gap: 8px; }
	.fh-inc__nav li { flex: none; }
	.fh-inc__nav a {
		display: block;
		padding: 9px 14px;
		border-radius: 999px;
		border: 1px solid rgba(255, 255, 255, .18);
		background: rgba(255, 255, 255, .04);
		white-space: nowrap;
		font-size: .8125rem;
	}
	.fh-inc__nav a:hover { padding-left: 14px; }
	.fh-inc__nav a[aria-current="true"] {
		padding-left: 14px;
		background: var(--fh-blue-btn);
		border-color: var(--fh-blue-btn);
		color: #fff;
		font-size: .8125rem;
	}
	.fh-inc__nav a[aria-current="true"]::before { display: none; }

	/* Full-bleed track so panels can peek past the container edges. */
	.fh-inc__panels {
		display: flex;
		gap: 14px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--fh-gutter);
		margin-inline: calc(var(--fh-gutter) * -1);
		padding-inline: var(--fh-gutter);
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior-x: contain;
	}
	.fh-inc__panels::-webkit-scrollbar { display: none; }
	.fh-panel {
		flex: 0 0 min(88%, 460px);
		scroll-snap-align: center;
		scroll-margin-inline: var(--fh-gutter);
	}
	.fh-inc__railcta { margin-top: 26px; }

	/* ---- Comparison table: min-width 900px meant only the row labels were on
	   screen and the verdicts — the whole point — were unreachable. Restructure
	   to one card per capability with the three verdicts labelled inline. ---- */
	.fh-cmp__wrap { overflow: visible; }
	.fh-cmp { min-width: 0; width: 100%; display: block; }
	.fh-cmp thead { display: none; }
	.fh-cmp tbody, .fh-cmp tbody tr { display: block; }
	.fh-cmp tbody tr {
		border: 1px solid #e9e9e6;
		border-radius: var(--fh-r-md);
		padding: 16px;
		background: #fff;
	}
	.fh-cmp tbody tr + tr { margin-top: 12px; }
	.fh-cmp tbody th[scope="row"] {
		display: block;
		padding: 0 0 12px;
		font-size: .9375rem;
		font-weight: 700;
	}
	.fh-cmp tbody td,
	.fh-cmp tbody td:not(:first-child) {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		width: auto;
		padding: 8px 0;
		text-align: left;
		border-top: 1px solid #f1f1ef;
		background: none;
	}
	.fh-cmp tbody td::before {
		content: attr(data-col);
		font-size: .8125rem;
		color: var(--fh-ink-2);
	}
	.fh-cmp__legend { justify-content: flex-start; gap: 14px 18px; }

	/* Collapsed by default: only the first row-card shows. Eight stacked cards
	   made this section run for several screens on a phone. */
	.fh-cmp__wrap:not(.is-open) tbody tr:nth-child(n+2) { display: none; }
	.fh-cmp__toggle {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		margin: 14px 0 0 auto;      /* auto-left pushes it to the right edge */
		padding: 10px 16px;
		border-radius: var(--fh-r-pill);
		border: 1px solid #e2e2df;
		background: #fff;
		font-family: var(--fh-body);
		font-size: .8125rem;
		font-weight: 600;
		color: var(--fh-ink);
		cursor: pointer;
		transition: border-color .2s ease, background-color .2s ease;
	}
	.fh-cmp__toggle:hover { border-color: var(--fh-ink); }
	.fh-cmp__toggle svg { transition: transform .25s ease; }
	.fh-cmp__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
	/* The wrap is the flex/flow parent of both the table and the button. */
	.fh-cmp__wrap { display: flex; flex-direction: column; align-items: stretch; }
}

/* nav.css hides .mega outright below 1100px because the site-wide header swaps
   in a separate drawer with its own copy of the links. The homepage reuses the
   panels instead, so restore them — (0,2,0) beats nav.css's (0,1,0). Between
   1025 and 1100 the desktop rail is still showing, so they stay absolute
   flyouts there; the static/stacked treatment only kicks in under 1024. */
@media (max-width: 1100px) {
	.fh-header .mega { display: block; }
	.fh-header .mega__feat { display: flex; }
}

/* ---- Mobile submenu: panel relocated inside its nav item (see home.js) ----
   Reads as an accordion body rather than a full-width mega. */
@media (max-width: 1024px) {
	.fh-nav__item .mega__panel {
		display: none;
		background: none;
		box-shadow: none;
		border-bottom: 0;
		padding: 2px 0 12px;
	}
	.fh-nav__item .mega__panel.is-active { display: block; }
	.fh-nav__item .mega__inner {
		display: block;
		width: auto;
		max-width: none;
		max-height: none;
		overflow: visible;
		padding: 0;
		margin: 0;
	}
	.fh-nav__item .mega__cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
	.fh-nav__item .mega__colh { font-size: .625rem; margin-bottom: 8px; }
	.fh-nav__item .mega__list { gap: 2px; }
	/* nav.css zeroes card opacity and animates it back in only under
	   `.mega.is-open` — an ancestor these no longer have. */
	.fh-nav__item .mega__card {
		opacity: 1;
		animation: none;
		padding: 8px 6px;
		border-radius: 10px;
	}
	.fh-nav__item .mega__ic { width: 30px; height: 30px; }
	.fh-nav__item .mega__ic svg { width: 15px; height: 15px; }
	.fh-nav__item .mega__n { font-size: .875rem; }
	/* Spotlight card and foot bar are desktop chrome — the accordion just lists. */
	.fh-nav__item .mega__feat,
	.fh-nav__item .mega__foot { display: none; }
}

/* ============================================================
   17. SERVICE PAGE — hero
   ============================================================ */
/* Navy base with a blue-violet light beam crossing upper-right → lower-left.
   The band runs perpendicular to the gradient axis, so 135deg produces the "/"
   diagonal; the colour fades to transparent on both sides so the navy carries
   the corners and the section reads with depth rather than as flat fill. */
.fh-shero {
	position: relative;
	background: url(../images/services/hero-bg.webp) center / cover no-repeat;
	background-color: #253a7e;
	color: #fff;
	padding-block: 84px;
	overflow: hidden;
}
.fh-shero > * { position: relative; z-index: 3; }

.fh-shero__crumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-bottom: 20px;
	font-size: .8125rem;
	color: rgba(255, 255, 255, .6);
}
.fh-shero__crumb a { transition: color .2s ease; }
.fh-shero__crumb a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.fh-shero__crumb .sep { opacity: .5; }

/* Headline column + the subhead note card. */
.fh-shero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
	gap: clamp(32px, 4vw, 72px);
	align-items: start;
}
/* Frosted glass: translucent white over the beam, hairline border, blurred. */
.fh-shero__pill {
	display: inline-flex;
	align-items: center;
	padding: 9px 18px;
	border-radius: var(--fh-r-pill);
	background: rgba(255, 255, 255, .13);
	border: 1px solid rgba(255, 255, 255, .2);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	color: #fff;
	font-size: .9375rem;
	font-weight: 500;
}
/* No max-width: the headline fills its grid column. A 17ch cap clamped it far
   short of the column and forced a third line. */
.fh-shero__title {
	margin-top: 22px;
	font-family: var(--fh-display);
	font-weight: 400;
	font-size: clamp(2.125rem, 1rem + 3.3vw, 4rem);
	line-height: 1.2;
	letter-spacing: -0.028em;
	color: #fff;
}
.fh-shero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.fh-shero__actions .fh__btn {
	height: auto;
	padding: 13px 24px;
	font-size: .9375rem;
	font-weight: 600;
	border-radius: var(--fh-r-pill);
}
/* Primary reads black on the navy band, not blue-on-blue. */
.fh-shero__actions .fh__btn--primary { background: var(--fh-ink); box-shadow: none; }
.fh-shero__actions .fh__btn--primary:hover {
	background: #000;
	filter: none;
	transform: translateY(-2px);
	box-shadow: 0 14px 30px rgba(0, 0, 0, .32);
}
.fh-shero__actions .fh__btn--light:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0, 0, 0, .22); }

/* Same glass treatment as the pill. */
.fh-shero__note {
	margin-top: 42px;
	padding: 16px;
	border-radius: 12px;
	background: rgba(255, 255, 255, .13);
	border: 1px solid rgba(255, 255, 255, .2);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	font-size: .9375rem;
	line-height: 1.65;
	color: rgba(255, 255, 255, .9);
}

.fh-shero__stats {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 10px;
	margin-top: clamp(44px, 5vw, 72px);
}
/* Off-white, not pure white, with a minimal lift off the navy. */
.fh-shero__stats li {
	display: flex;
	flex-direction: column;
	min-height: 145px;
	padding: 22px;
	border-radius: 12px;
	background: #fafaf8;
	color: var(--fh-ink);
	text-align: left;
	box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 6px 16px rgba(16, 24, 40, .06);
}
.fh-shero__v { font-family: var(--fh-display); font-weight: 700; font-size: 1.875rem; line-height: 1.1; letter-spacing: -0.02em; }
.fh-shero__l { margin-top: auto; font-size: .8125rem; line-height: 1.45; color: #6b7280; }

@media (max-width: 1024px) {
	.fh-shero { padding-block: 64px 60px; }
	.fh-shero__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
	.fh-shero__title { max-width: none; }
	.fh-shero__note { margin-top: 0; }
	.fh-shero__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
	.fh-shero__stats { grid-template-columns: minmax(0, 1fr); }
	.fh-shero__stats li { min-height: 0; }
	.fh-shero__actions .fh__btn { width: 100%; justify-content: center; }
}

/* ============================================================
   18. SERVICE PAGE — problems grid
   ============================================================ */
/* Shares the hero's off-white and navy tokens so the two sections read as one
   page: --fh-shero-cream is the stat-card fill, --fh-shero-navy the beam base. */
.fh-prob {
	background: #fafaf8;
	padding-block: clamp(64px, 7vw, 104px);
}
.fh-prob__head { max-width: 760px; margin-inline: auto; text-align: center; }
.fh-prob__title {
	font-family: var(--fh-display);
	font-weight: 400;
	font-size: clamp(1.875rem, 1rem + 2.2vw, 2.75rem);
	line-height: 1.18;
	letter-spacing: -0.025em;
	color: #111;
}
.fh-prob__intro {
	max-width: 650px;
	margin: 16px auto 0;
	font-size: 1.125rem;
	font-weight: 400;
	line-height: 1.6;
	color: #56564F;
}
.fh-prob__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	margin-top: 48px;
}
.fh-prob__card {
	background: #fff;
	border: 1px solid #eaeaea;
	border-radius: 16px;
	padding: 28px;
	box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px rgba(16, 24, 40, .05);
	transition: transform .22s cubic-bezier(.34,1.25,.64,1), box-shadow .22s ease;
}
.fh-prob__card:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(16, 24, 40, .05), 0 16px 34px rgba(16, 24, 40, .09); }
.fh-prob__num {
	display: grid;
	place-items: center;
	width: 40px; height: 40px;
	border-radius: 10px;
	background: #e8e9fa;
	color: #3b4a9e;
	font-family: var(--fh-body);
	font-size: .9375rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}
.fh-prob__h {
	margin-top: 16px;
	font-family: var(--fh-body);
	font-size: 1.1875rem;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: #111;
}
.fh-prob__b {
	margin-top: 8px;
	font-size: .9375rem;
	font-weight: 400;
	line-height: 1.6;
	color: #6b6b6b;
}

@media (max-width: 1024px) {
	.fh-prob__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
	.fh-prob__grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
	.fh-prob__card { padding: 22px; }
}

/* ============================================================
   19. SERVICE PAGE — development paths
   ============================================================ */
.fh-paths {
	background: #fff;
	padding-block: clamp(64px, 7vw, 104px);
}
.fh-paths__head { max-width: 760px; margin-inline: auto; text-align: center; }
.fh-paths__title {
	font-family: var(--fh-display);
	font-weight: 400;
	font-size: clamp(1.875rem, 1rem + 2.2vw, 2.75rem);
	line-height: 1.18;
	letter-spacing: -0.025em;
	color: #111;
}
.fh-paths__intro {
	max-width: 600px;
	margin: 14px auto 0;
	font-size: .9375rem;
	font-weight: 400;
	line-height: 1.6;
	color: #6b6b6b;
}
/* Narrower than the container so the six cards read as a tighter cluster. */
.fh-paths__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	margin-top: 44px;
	max-width: 1100px;
	margin-inline: auto;
}
/* justify-content pins the link to the foot so all six cards align. */
.fh-paths__card {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	background: #fff;
	border: 1px solid #d9d9d4;
	border-radius: 14px;
	padding: 22px;
}
.fh-paths__h {
	font-family: var(--fh-body);
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.015em;
	color: #111;
}
.fh-paths__label {
	margin-top: 7px;
	font-size: .6875rem;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: #2563eb;
}
.fh-paths__desc {
	margin-top: 12px;
	font-size: .875rem;
	font-weight: 400;
	line-height: 1.6;
	color: #6b6b6b;
}
/* Spec rows: grey label left, bold value right-aligned. */
.fh-paths__spec {
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid #e4e4e0;
	display: grid;
	gap: 10px;
}
.fh-paths__spec > div {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 16px;
	align-items: start;
}
.fh-paths__spec dt { font-size: .8125rem; font-weight: 400; color: #6b6b6b; }
.fh-paths__spec dd {
	margin: 0;
	text-align: right;
	font-size: .8125rem;
	font-weight: 700;
	line-height: 1.45;
	color: #111;
}
.fh-paths__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 20px;
	font-size: .875rem;
	font-weight: 700;
	color: #111;
}
.fh-paths__link svg { transition: transform .22s cubic-bezier(.34,1.4,.64,1); }
.fh-paths__link:hover svg { transform: translateX(4px); }

@media (max-width: 1024px) {
	.fh-paths__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
	.fh-paths__grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
	.fh-paths__card { padding: 22px; }
}

/* ============================================================
   20. ABOUT PAGE — hero
   ============================================================ */
/* Backed by the same full-bleed abstract the homepage hero uses, under a flat
   50% white wash — matching the design's 84px top/bottom padding and #FFFFFF
   at 50%. This replaces the CSS-drawn stripe construction (repeating gradients
   + blur + intersected masks) that was approximating this artwork. */
.fh-ahero {
	position: relative;
	background-color: #ffffff;
	overflow: hidden;
	padding-block: 84px;
}
.fh-ahero::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(rgba(255, 255, 255, .5), rgba(255, 255, 255, .5)),
		url(../images/home/hero/hero-bg.png) center / cover no-repeat;
	pointer-events: none;
}
/* Above the background artwork. */
.fh-ahero__inner {
	position: relative;
	z-index: 1;
	max-width: 768px;
	margin-inline: auto;
	padding-inline: 24px;
	text-align: center;
}
.fh-ahero__pill {
	display: inline-block;
	padding: 8px 12px 8px 12px;
	margin-bottom: 24px;
	border-radius: 999px;
	background: #DBEAFE;
	border: 1px solid #e2e8f0;
	font-size: 14px;
	font-weight: 500;
	color: #2947A3;
	letter-spacing: 0%;
	line-height: 100%;
}
.fh-ahero__title {
	max-width: 950px;
	margin: 0 auto 24px;
	/* Inter, not the Helvetica display stack: Arial has no 500 on Windows so the
	   browser would fake it (the muddy look from before). Inter ships a real 500
	   and is already loaded. */
	font-family: var(--fh-display);
	font-weight: 400;
	font-size: 64px;
	line-height: 74.16px;
	letter-spacing: -2px;
	color: #171717;
}
.fh-ahero__sub {
	max-width: 850px;
	margin: 0 auto 40px;
	font-size: 16px;
	font-weight: 500;
	line-height: 160%;
	letter-spacing: 0px;
	color: #171717;
}
.fh-ahero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.fh-ahero__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 24px;
	border-radius: var(--fh-r-pill);
	font-size: .875rem;
	font-weight: 600;
	white-space: nowrap;
	transition: transform .2s ease, background-color .2s ease, border-color .2s ease;
}
.fh-ahero__btn--dark { background: #111827; color: #fff; }
.fh-ahero__btn--dark:hover { background: #000; transform: translateY(-2px); }
.fh-ahero__btn--line { background: #fff; color: #111827; border: 1px solid #d1d5db; }
.fh-ahero__btn--line:hover { border-color: #111827; transform: translateY(-2px); }
.fh-ahero__btn svg { flex: none; transition: transform .22s cubic-bezier(.34,1.4,.64,1); }
.fh-ahero__btn:hover svg { transform: translateX(3px); }

@media (max-width: 560px) {
	.fh-ahero__actions { flex-direction: column; align-items: stretch; }
	.fh-ahero__btn { justify-content: center; }
}

/* ---- About page: align main.css components with the chrome's typography ----
   The page body still runs on main.css (Plus Jakarta Sans + Inter) while the
   header, footer and hero use Inter + Manrope. Remapping the two variables
   brings the whole page onto one system. Headings drop 800 -> 700 because Inter
   is only loaded to 700; at 800 the browser would fake it. */
body.page-template-template-about {
	--font-display: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--font-body: "Manrope", "Helvetica Neue", Arial, sans-serif;
}
body.page-template-template-about h1,
body.page-template-template-about h2,
body.page-template-template-about h3,
body.page-template-template-about h4 { font-weight: 400; }
/* The Playfair italic accent was the last serif on the page and read as a
   leftover once everything else moved to Inter/Manrope. */
body.page-template-template-about .serif-accent {
	font-family: var(--font-display);
	font-style: normal;
	font-weight: 700;
}

/* ============================================================
   404 — search + popular links beneath the navy hero
   ============================================================ */
.fh-404__inner { max-width: 720px; }
.fh-404__search { margin-inline: auto; }
/* The WP search form ships as a plain label+input+button; style it to match the
   theme's inputs rather than leaving browser defaults on a branded page. */
.fh-404__search form {
	display: flex;
	gap: 10px;
	align-items: center;
}
.fh-404__search label { flex: 1 1 auto; margin: 0; }
.fh-404__search input[type="search"],
.fh-404__search input[type="text"] {
	width: 100%;
	padding: 14px 18px;
	border: 1px solid #e2e2df;
	border-radius: var(--fh-r-pill);
	font-family: var(--fh-body);
	font-size: .9375rem;
	color: var(--fh-ink);
	background: #fff;
	transition: border-color .2s ease, box-shadow .2s ease;
}
.fh-404__search input[type="search"]:focus,
.fh-404__search input[type="text"]:focus {
	outline: none;
	border-color: var(--fh-blue-btn);
	box-shadow: 0 0 0 3px rgba(41, 71, 163, .12);
}
.fh-404__search input[type="submit"],
.fh-404__search button {
	flex: none;
	padding: 14px 22px;
	border: 0;
	border-radius: var(--fh-r-pill);
	background: var(--fh-ink);
	color: #fff;
	font-family: var(--fh-body);
	font-size: .9375rem;
	font-weight: 600;
	cursor: pointer;
	transition: transform .2s ease, box-shadow .2s ease;
}
.fh-404__search input[type="submit"]:hover,
.fh-404__search button:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(0, 0, 0, .16); }

.fh-404__popular { margin-top: 44px; text-align: center; }
.fh-404__label {
	font-family: var(--fh-body);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--fh-ink-2);
	margin-bottom: 14px;
}
.fh-404__links { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

@media (max-width: 600px) {
	.fh-404__search form { flex-wrap: wrap; }
	.fh-404__search label { flex: 1 1 100%; }
	.fh-404__search input[type="submit"],
	.fh-404__search button { width: 100%; }
}

/* ============================================================
   Enquiry thank-you
   ============================================================ */
/* Centred variant of the navy hero. The default hero is a two-column grid
   (copy + note card); a confirmation has nothing to sit beside it, so this
   variant drops the grid and centres a single column. Extra top padding
   because this is the first thing seen after submitting — it wants air. */
.fh-shero--center { padding-block: 132px 108px; text-align: center; }
.fh-shero__centre {
	max-width: 760px;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.fh-shero--center .fh-shero__title { max-width: 20ch; }
.fh-shero--center .fh-shero__actions { justify-content: center; }

/* Success green rather than the neutral white ring — this page only renders
   once the enquiry is actually saved, so the tick is a state, not decoration.
   Solid fill with a white glyph reads clearly on the navy; the halo softens
   the edge so it doesn't look pasted on. Uses the theme's own --fh-green. */
.fh-ty__tick {
	width: 68px;
	height: 68px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	margin-bottom: 26px;
	color: #fff;
	background: var(--fh-green);
	border: 0;
	box-shadow: 0 0 0 7px rgba(18, 183, 106, .20);
}
.fh-ty__lead {
	margin-top: 18px;
	max-width: 60ch;
	font-size: 1rem;
	line-height: 1.65;
	color: rgba(255, 255, 255, .82);
}

/* Four steps rather than the hub's three. */
.fh-prob__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1024px) {
	.fh-prob__grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
	.fh-shero--center { padding-block: 96px 76px; }
	.fh-ty__tick { width: 58px; height: 58px; margin-bottom: 20px; }
	.fh-prob__grid--4 { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
   Hero glow — pointer-reactive light (see heroGlow() in anim.js)
   ============================================================ */
/* Child combinator, not a bare class: .fh-shero > * sets z-index 3 on every
   direct child, which would drag the glow in front of the copy. (0,2,0) beats
   it, and the later position settles position:absolute over its relative. */
.fh-shero > .fh-shero__glow {
	position: absolute;
	top: 0;
	left: 0;
	width: 460px;
	height: 460px;
	/* Centred on the pointer with negative margins rather than a
	   translate(-50%,-50%), so GSAP owns `transform` outright and never has to
	   compose with a CSS-authored value — same technique as .nx-cursor. */
	margin: -230px 0 0 -230px;
	border-radius: 50%;
	/* Theme tokens only: --fh-hero-accent violet, --fh-blue-btn, --fh-blue. */
	background: radial-gradient(circle,
		rgba(93, 63, 211, .55) 0%,
		rgba(29, 78, 216, .34) 40%,
		rgba(41, 71, 163, .14) 68%,
		rgba(41, 71, 163, 0) 100%);
	filter: blur(72px);
	pointer-events: none;
	opacity: 0;
	z-index: 0;
	will-change: transform;
	contain: layout style paint;
}

/* The glow is created from JS, so there is nothing to hide on touch or under
   reduced motion — heroGlow() simply returns null and no element exists. */