/*
 * Home — rebuilt from `Form_Home_Dave_Layout_Form_Style_v6.html` (Ben, 2 Oct 2026).
 *
 * Loaded on the front page only, and every selector is `home-*` (the header rules, which have to reach a shared partial, are under `body.home`), so nothing here can
 * reach another template. The brief is explicit that Home's new composition must not disturb Work, Case Studies, About, How we help, the journey pages, Financial,
 * Contact, Start a Project, Insights or the shared secondary-panel typography.
 *
 * The prototype stacks five style blocks, each overriding the last, and two of its media queries lose to later unqueried rules (its hero stays two columns on a phone,
 * so the copy column is 0px wide at 390). What is reproduced here is the RENDERED result, measured at 1600 / 1366 / 820 / 390 with docs/verification/home-metrics.js,
 * not the first rule that matched. Two deliberate departures, both for production:
 *
 *   - the hero stacks to one column at 1100 and below, which is what the prototype's own 1100px rule intended and its source order broke;
 *   - the shared system wins where it already gives the same visible result: the `.wrap` measure, the 16px button radius and 48px button, the card accent bar, the
 *     radius scale (`--r-card` 22, `--r-panel` 20, `--r-tag` 13), the route accents and `--orange-text`.
 *
 * Display type is not scaled by Larger text (it carries no factor anywhere in the site); body and small text are, through `--type-reading` and `--type-small`.
 * No `!important`.
 */

/* ------------------------------------------------------------------- header over the hero */
/*
 * The header is transparent over the black hero, so its logo, links and controls go white until the page is scrolled (`.is-scrolled`), and then take the shared header
 * exactly as every other page has it. The logo is the real artwork, inverted to white. An open mobile menu does not change this: its paper panel starts below the header
 * (`inset: var(--header-h) 0 0`), so at the top of the page the header strip is still over the black hero and its white logo and cross are the ones that can be read.
 */
body.home .site-header:not(.is-scrolled) .logo img {
	filter: brightness(0) invert(1);
}

body.home .site-header:not(.is-scrolled) .nav a {
	color: #fff;
}

body.home .site-header:not(.is-scrolled) .nav .nav-cta {
	background: #fff;
	color: var(--ink);
}

body.home .site-header:not(.is-scrolled) :is(.viewing-trigger, .viewing-menu-trigger) {
	border-color: rgba(255, 255, 255, 0.55);
	color: #fff;
}

body.home .site-header:not(.is-scrolled) :is(.viewing-trigger, .viewing-menu-trigger):hover {
	border-color: #fff;
}

body.home .site-header:not(.is-scrolled) .menu-icon,
body.home .site-header:not(.is-scrolled) .menu-icon::before,
body.home .site-header:not(.is-scrolled) .menu-icon::after {
	background: #fff;
}

/* The cross: the middle bar goes when the menu is open, as it does everywhere (shell.css), and the white above must not bring it back. */
body.home.nav-open .site-header:not(.is-scrolled) .menu-icon {
	background: transparent;
}

/*
 * Home's text face. The prototype's body is Inter 500 at 17px (16px on a phone) and its labels, spans and small caps inherit that; production's body is Montserrat, so
 * each Home section states it, and everything inside inherits as the prototype's does. Headings and the button face set their own below.
 */
.home-hero,
.home-problems,
.home-trust,
.home-work,
.home-financial {
	font-family: var(--font-body);
	font-size: calc(17px * var(--type-reading));
	font-weight: 500;
	/*
	 * One vertical rhythm for Home's panels (Ben, 2 Oct 2026: "panel to panel the gap is inconsistent from either the top of the text or the bottom"). The space from a
	 * panel's edge to its nearest text is the same at the top and at the bottom of every panel, measured to the text and not to the box: the hero's buttons, the problems
	 * title's capitals, the cards, the Trusted by label and logos, the Financial eyebrow's capitals and its last line. 100px; 72px on a phone. The Trusted by strip is a
	 * band, not a panel, and keeps its own equal 64px either side. The closing CTA is the shared component and keeps its own.
	 */
	--home-panel-y: 100px;
	--home-band-y: 64px;
}

/* ------------------------------------------------------------------------------------- hero */
.home-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	min-height: 100vh;
	/*
	 * The whole copy group sits 20px higher on a desktop (Ben, 8 Oct 2026: "still feels too low"): the hero's top offset under the header is 146px less this raise, so the eyebrow, headline, paragraph, line and
	 * buttons move together and none of the space between them changes. On a window with spare height the bottom-anchored copy rises with the top offset; on one without it (1600 x 900) the offset is what sets
	 * it. The tablet and phone rules below set their own top padding and are not affected.
	 */
	--home-hero-raise: 20px;
	padding: calc(146px - var(--home-hero-raise)) 0 var(--home-panel-y);
	background: #0a0a0c;
	color: #fff;
}

@supports (min-height: 100svh) {
	.home-hero {
		min-height: 100svh;
	}
}

/* The shoal. Behind the copy and never in the way of a click or a swipe. */
.home-hero-canvas {
	position: absolute;
	inset: 0;
	z-index: -2;
	display: block;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

/*
 * A dark wash over the field, strongest under the copy, so the text reads over the animation. It was .98 / .90 under the copy, which left the left half of the shoal almost invisible
 * (Ben, 2 Oct 2026: show more of it on the left). At .75 / .70 the brightest swimmer drawn under the paragraph still leaves it above 4.5:1 (docs/verification/home-shoal-spread.js).
 */
.home-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(circle at 74% 42%, rgba(255, 101, 0, 0.08), transparent 26%),
		linear-gradient(90deg, rgba(10, 10, 12, 0.75) 0%, rgba(10, 10, 12, 0.7) 43%, rgba(10, 10, 12, 0.27) 70%, rgba(10, 10, 12, 0.5) 100%);
}

/*
 * Two columns with the right one deliberately empty: that is what holds the copy to the prototype's measure (675px at 1600), and the field shows through where
 * the prototype's caption sat. The prototype's caption is its own commentary and is not carried over.
 */
.home-hero-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.08fr) minmax(420px, 0.92fr);
	gap: 70px;
	/*
	 * The copy sits on the hero's bottom padding, so the space from the buttons to the hero's edge is the panel rhythm at every viewport height (centred, it was 100px at 1600
	 * and 360px at 820, depending on how tall the window was). Any spare height goes above the eyebrow, where the shoal is.
	 */
	align-items: end;
	min-height: calc(100vh - 220px);
}

.home-hero-copy {
	max-width: 860px;
}

/*
 * The hero eyebrow is the prototype's, 20% above Dave's original 11px (Ben, 2 Oct 2026): 13.2px, Inter 800, uppercase, 0.18em. Home's own; it is not the shared
 * editorial eyebrow and it does not become a site rule.
 */
.home-hero-eyebrow,
.home-financial-eyebrow {
	margin: 0 0 18px;
	font-family: var(--font-body);
	font-size: max(calc(13.2px * var(--type-small)), var(--type-floor));
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.home-hero-eyebrow {
	color: #b4afa8;
}

.home-hero-title {
	max-width: 9ch;
	margin: 0;
	font-family: var(--font);
	font-size: clamp(62px, 7.35vw, 124px);
	font-weight: 900;
	line-height: 0.86;
	/* 10% less negative than the -0.038em it was (Ben, 5 Oct 2026). */
	letter-spacing: -0.0342em;
	color: #fff;
}

.home-hero-accent {
	/* The plain orange, not `--orange-text`: the hero is black, where it is 7:1 and better, and High contrast darkens `--orange-text` for paper. */
	color: var(--orange);
}

.home-hero-body {
	max-width: 700px;
	margin: 30px 0 0;
	font-family: var(--font-body);
	font-size: var(--fs-body);
	font-weight: 500;
	line-height: 1.58;
	color: #c7c1ba;
}

.home-hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 44px;
}

/* The shared button, on black: white outline, and a white fill for the primary. Its face is the site's (`--font`), not the section's Inter. */
.home-hero-btn {
	font-family: var(--font);
	border-color: #fff;
	color: #fff;
}

.home-hero-btn--light {
	background: #fff;
	color: var(--ink);
}

/*
 * Between the body copy and the buttons (Ben, 2 Oct 2026): 13px, 30% up from the 10px it was, with the same restrained tracked caps.
 * Thin separators between the items (Ben, 5 Oct 2026), drawn as a pseudo-element on each item so no "|" is in the HTML for a screen reader to read. The row is pulled left by the
 * width of that border and padding and clipped there, so an item that starts a line, including after a wrap, shows no separator and the text still starts on the copy's edge.
 */
.home-hero-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
	margin: 34px 0 0 -23px;
	clip-path: inset(0 0 0 23px);
	font-size: max(calc(13px * var(--type-small)), var(--type-floor));
	font-weight: 800;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: #8f8b86;
}

/*
 * "20+ Years", the last item, is dropped on phones (Ben, 6 Oct 2026): at 430px and under the row no longer fits and the last item drops onto a second line. Kent, London and Global
 * fit from 320px up. It stays on tablets and desktop, and in the HTML, so only the phone layout changes.
 */
@media screen and (max-width: 480px) {
	.home-hero-meta span:last-child {
		display: none;
	}
}

.home-hero-meta span {
	position: relative;
	padding-left: 23px;
	line-height: 1.15;
}

/*
 * The separator: 1.4px, 40% over the 1px it was (Ben, 5 Oct 2026). A border cannot be 1.4px (browsers round it to whole device pixels), so it is a 1px line scaled across by 1.4,
 * which a transform draws as a true fractional width on any screen. It sits in the 23px the row is clipped by, so a line-start item still shows none.
 */
.home-hero-meta span::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 1px;
	background: rgba(255, 255, 255, 0.26);
	transform: scaleX(1.4);
	transform-origin: left center;
}

/* -------------------------------------------------------------------- Start with the problem */
.home-problems {
	/*
	 * Top: 100px to the title's capitals, so the line box's own 0.1185em above them comes off. Bottom: the band's height less the 1px rule and the 27px above its label's capitals (24 + 3), 36px on desktop,
	 * so the band is 64px above its label and 64px below its logos.
	 */
	padding: calc(var(--home-panel-y) - 0.1185 * var(--home-problems-size)) 0 calc(var(--home-band-y) - 28px);
	--home-problems-size: clamp(48px, 5.4vw, 84px);
	background: var(--paper);
	color: var(--ink);
}

.home-problems-head {
	display: grid;
	grid-template-columns: minmax(0, 0.95fr) minmax(360px, 1.05fr);
	gap: 86px;
	align-items: stretch;
	margin-bottom: 44px;
}

/* Three lines, as written: the browser is not allowed to make a different wrap. */
.home-problems-title {
	margin: 0;
	font-family: var(--font);
	font-size: var(--home-problems-size);
	font-weight: 900;
	line-height: 0.92;
	letter-spacing: -0.028em;
	white-space: nowrap;
}

/* Greeting on top, paragraph under it, the pair spaced down the full height of the title beside it. */
.home-problems-context {
	display: flex;
	flex-direction: column;
	/*
	 * The greeting and the paragraph travel together and rest on the bottom of the row, so the paragraph's last line lands on the bottom of "problem." on the left (Ben,
	 * 2 Oct 2026) with the greeting a short, fixed step above it. (Spread to the ends of the row the paragraph was far from the greeting; at the top it was far from the
	 * left title's foot.) The two sides are measured to their baselines in docs/verification/home-baseline.js.
	 */
	justify-content: flex-end;
	/* Fine step so the paragraph's last baseline meets the title's: the title's baseline is 0.1015em above its line box and the paragraph's 0.4465em above its own. */
	margin-bottom: calc(0.1015 * var(--home-problems-size) - 0.4465 * 17px * var(--type-reading));
	padding: 0;
}

/*
 * The right-hand title is the greeting alone, in the left title's face, weight, leading and tracking (Montserrat 900, 0.92, -0.028em) and in the orange text token, at 70%
 * of the left title's size (Ben, 2 Oct 2026: "reduce font by 30%"; it was level with it). It takes the left title's own `--home-problems-size`, so the two still move
 * together. Its lines are broken by home-greeting.js to three at most, each inside the column, at every width and in Larger text (display type carries no Larger text factor).
 */
.home-greeting {
	max-width: 760px;
	margin: 0;
	font-family: var(--font);
	font-size: calc(var(--home-problems-size) * 0.7);
	font-weight: 900;
	line-height: 0.92;
	letter-spacing: -0.028em;
	color: var(--orange-text);
}

/* Until the greeting is painted the title holds its place, unseen. */
.home-greeting.is-pending {
	visibility: hidden;
}

.home-greeting-line {
	display: block;
	white-space: nowrap;
}

.home-problems-intro {
	max-width: 690px;
	margin: 18px 0 0;
	font-family: var(--font-body);
	font-size: var(--fs-body);
	font-weight: 500;
	line-height: 1.62;
	color: var(--work-body);
}

.home-problem-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}

/* Route colours, in the site's order: magenta, yellow, cyan, black, grey, orange. The rollover bar is the shared card accent bar (components.css). */
.home-problem-card {
	--card-accent: var(--magenta);
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto 1fr auto;
	gap: 15px;
	min-height: 244px;
	padding: 28px;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: var(--r-card);
	background: var(--white);
	color: var(--ink);
	text-decoration: none;
	transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.home-problem-card:nth-child(2) {
	--card-accent: var(--yellow);
}

.home-problem-card:nth-child(3) {
	--card-accent: var(--cyan);
}

.home-problem-card:nth-child(4) {
	--card-accent: var(--ink);
}

.home-problem-card:nth-child(5) {
	--card-accent: var(--accent-grey);
}

.home-problem-card:nth-child(6) {
	--card-accent: var(--orange);
}

.home-problem-card:hover,
.home-problem-card:focus-visible {
	transform: translateY(-3px);
	border-color: rgba(17, 17, 19, 0.24);
	box-shadow: 0 18px 42px rgba(60, 42, 28, 0.08);
}

.home-problem-num {
	font-family: var(--font-body);
	font-size: var(--fs-eyebrow-label);
	font-weight: 800;
	letter-spacing: var(--ls-eyebrow-label);
	text-transform: uppercase;
	/* The prototype's #827c74 is 4.13:1 on white at 11px, under AA; the site's own `--muted` is 5.2:1 and reads the same. */
	color: var(--muted);
}

.home-problem-title {
	grid-column: 1;
	align-self: end;
	max-width: 13ch;
	margin: 0;
	font-family: var(--font);
	font-size: calc(clamp(29px, 2.9vw, 43px) * var(--type-heading));
	font-weight: 800;
	line-height: 0.98;
	letter-spacing: -0.022em;
}

.home-problem-copy {
	grid-column: 1;
	align-self: start;
	max-width: 50ch;
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--fs-body);
	font-weight: 500;
	line-height: 1.52;
	color: var(--journey-more-lede);
}

/*
 * One visible focus on every control Home adds. On the black hero and Financial panel it is the site's orange (7:1 and better on black); on the paper and white it is ink,
 * because the same orange is only 2.65:1 there and a focus indicator needs 3:1.
 */
.home-hero-btn:focus-visible,
.home-financial-action:focus-visible {
	outline: 3px solid var(--orange);
	outline-offset: 3px;
}

.home-problem-card:focus-visible {
	outline: 3px solid var(--ink);
	outline-offset: 3px;
}

/* ------------------------------------------------------------------------------ Trusted by */
/*
 * Dave's position and treatment: a paper band between the cards and the Financial panel, a small label, one continuous duplicated ticker with masked ends. The marks
 * are the site's real client artwork rather than the prototype's typed names, and they are 10% larger than the previous Home (18px, 19.5px at 1501+ and 15px on a
 * phone, now 19.8px, 21.45px and 16.5px).
 */
.home-trust {
	/* 24px under the rule plus the label's own 3px above its capitals: with the 36px under the cards and the 1px rule, 64px from the cards to the label's letters; 64px under the logos. */
	padding: 24px 0 var(--home-band-y);
	border-top: 1px solid var(--line);
	background: var(--paper);
}

.home-trust-label {
	font-family: var(--font-body);
	font-size: var(--fs-eyebrow-label);
	font-weight: 800;
	letter-spacing: var(--ls-eyebrow-label);
	text-transform: uppercase;
	margin-bottom: 14px;
	/* The prototype's #756f67 is 4.41:1 on the paper at 11px, under AA; `--muted` is 4.63:1. */
	color: var(--muted);
}

.home-trust-marquee {
	overflow: hidden;
	min-width: 0;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

.home-trust-track {
	display: flex;
	align-items: center;
	width: max-content;
	animation: home-trust-marquee 46s linear infinite;
	will-change: transform;
}

.home-trust-set {
	display: flex;
	flex: none;
	align-items: center;
	gap: 52px;
	padding-right: 52px;
}

.home-trust-marquee img {
	display: block;
	flex: none;
	width: auto;
	height: 19.8px;
	max-width: 108.9px;
	object-fit: contain;
	opacity: 0.72;
	filter: grayscale(1) brightness(0.52) contrast(1.35);
}

@keyframes home-trust-marquee {
	from {
		transform: translateX(0);
	}

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

/* ------------------------------------------------------------------------------ Selected work */
/*
 * Eight text-free image cards (Ben, 8 Oct 2026), full width: pure imagery, so nothing is printed on or over them. The heading exists for the document outline and assistive technology only. Each card
 * is one anchor (one Tab stop, one click) with the Work card's white circle and chevron where the Work cards have it (24px from the side, 22px from the bottom, `.round-arrow`). Every
 * picture is a true 3:2 file in a 3:2 box, so cover-fit never crops a second time.
 */
/* Full width (Ben, 8 Oct 2026, after seeing both): the page's own gutter below 1101px, and from 1101px the cards run edge to edge on a 14px gutter, the same 14px as the gaps between them. */
.home-work {
	padding: var(--home-band-y) var(--pad-x);
	background: var(--white);
}

@media screen and (min-width: 1101px) {
	.home-work {
		padding-inline: 14px;
	}
}

.home-work-title {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.home-work-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}

.home-work-card {
	position: relative;
	display: block;
	aspect-ratio: 3 / 2;
	border-radius: var(--r-card);
	overflow: hidden;
	isolation: isolate;
	background: var(--grey-tile);
	color: var(--ink);
	text-decoration: none;
	transition: transform 0.5s cubic-bezier(0.34, 1.32, 0.64, 1), box-shadow 0.5s ease;
}

.home-work-card picture,
.home-work-card img {
	display: block;
	width: 100%;
	height: 100%;
}

.home-work-card img {
	object-fit: cover;
	object-position: var(--home-work-focus, 50% 50%);
	transition: transform 0.6s cubic-bezier(0.34, 1.32, 0.64, 1);
}

/* The white circle sits over the picture exactly where the Work cards put it; a soft shadow keeps it readable on a pale corner (the Bondford snow). */
.home-work-card .round-arrow {
	position: absolute;
	z-index: 1;
	right: 24px;
	bottom: 22px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.26);
}

/* "View all work" under the tiles: centred, the shared dark button (the closing CTA's). */
.home-work-action {
	display: flex;
	justify-content: center;
	margin-top: 34px;
}

/* Four across from 1101px (the tablet band is two). */
@media screen and (min-width: 1101px) {
	.home-work-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* A real pointer only: the lift (6px) and the image's zoom; the zoom stays inside the rounded card. Keyboard focus gets the ring below and the zoom, not the lift. */
@media (hover: hover) and (pointer: fine) {
	.home-work-card:hover {
		transform: translateY(-6px);
		box-shadow: var(--journey-card-shadow);
	}
}

.home-work-card:hover img,
.home-work-card:focus-visible img {
	transform: scale(1.04);
}

.home-work-card:focus-visible {
	outline: 3px solid var(--ink);
	outline-offset: 3px;
}

/* ---------------------------------------------------------------- Financial & fintech */
/* Dave's black version, not the yellow, orange and red gradient (Ben, 2 Oct 2026): this is Home's specialist panel and nothing else, and the shared closing CTA is untouched. A solid black panel: the rings the prototype drew behind it are gone (Ben, 2 Oct 2026). */
.home-financial {
	/* The title's size is a property of the section because the right column is positioned from it (below). */
	--home-fin-size: clamp(54px, 6.2vw, 96px);
	position: relative;
	isolation: isolate;
	overflow: hidden;
	/* Top: 100px to the eyebrow's capitals (its line box has 2.5px above them). Bottom: 100px under the last line. */
	padding: calc(var(--home-panel-y) - 2.5px) 0 var(--home-panel-y);
	background: #111113;
	color: #fff;
}

.home-financial-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
	grid-template-areas:
		"eyebrow ."
		"copy panel";
	column-gap: 90px;
	align-items: start;
}

/*
 * The two buttons side by side (Ben, 8 Oct 2026). Together they are 576px (288 + 12 + 276); the right column was 554px at 1600, so the second wrapped under the first. From 1101px the columns are
 * equal and 64px apart, which gives the buttons 578px or more once the page container is at its 1220px laptop width (about 1300px screens and up); the title still has 578px, and 628px at the
 * 1320px container, for its widest word. Narrower laptops keep the wrap, and a phone has stacked full-width buttons.
 */
@media screen and (min-width: 1101px) {
	.home-financial-grid {
		grid-template-columns: minmax(0, 1fr) minmax(320px, 1fr);
		column-gap: 64px;
	}
}

.home-financial-copy {
	grid-area: copy;
}

.home-financial-eyebrow {
	grid-area: eyebrow;
	color: #9b9690;
}

.home-financial-title {
	max-width: 10ch;
	margin: 0;
	font-family: var(--font);
	font-size: var(--home-fin-size);
	font-weight: 900;
	line-height: 0.9;
	letter-spacing: -0.032em;
	color: #fff;
}

/* The yellow word. `.home-financial-title em` is more specific than the shared orange split, which is for light grounds. */
.home-financial-title em {
	font-style: normal;
	color: var(--yellow);
}

.home-financial-text {
	max-width: 620px;
	margin: 25px 0 0;
	font-family: var(--font-body);
	font-size: var(--fs-body);
	font-weight: 500;
	line-height: 1.6;
	color: #bbb5af;
}

.home-financial-panel {
	grid-area: panel;
	/*
	 * The panel's top rule lines up with the top of the title's capitals (Ben, 2 Oct 2026), not with the bottom of the left column or the middle of the section. The title
	 * is set at line-height 0.9 in Montserrat (ascent 0.968, descent 0.251, cap height 0.7), so its capitals begin 0.1085em below the top of its line box.
	 */
	margin-top: calc(var(--home-fin-size) * 0.1085);
	padding-top: 24px;
	border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.home-financial-label {
	font-family: var(--font-body);
	font-size: var(--fs-eyebrow-label);
	font-weight: 800;
	letter-spacing: var(--ls-eyebrow-label);
	text-transform: uppercase;
	display: block;
	color: #88837e;
}

.home-financial-clients {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 13px 26px;
	margin: 18px 0 30px;
}

.home-financial-clients span,
.home-financial-clients a {
	font-family: var(--font);
	font-size: calc(18px * var(--type-reading));
	font-weight: 700;
	color: #fff;
}

/* The names that link to Form's own proof (Ben, 5 Oct 2026): the same type, with a thin underline so they read as links, and a full one on hover and focus. */
.home-financial-clients a {
	justify-self: start;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-decoration-color: rgba(255, 255, 255, 0.4);
	text-underline-offset: 4px;
}

.home-financial-clients a:is(:hover, :focus-visible) {
	text-decoration-color: #fff;
}

/* The last two words of the label never part, so a wrapped label drops "fintech marketing" to the second line together (Ben, 7 Oct 2026). */
.home-financial-action .keep-together {
	white-space: nowrap;
}

.home-financial-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.home-financial-action {
	min-width: 210px;
	font-family: var(--font);
	justify-content: space-between;
	border-color: #fff;
	background: #fff;
	color: var(--ink);
}

/* ------------------------------------------------------------------------------ tablet */
@media screen and (max-width: 1100px) {
	/* The prototype's own 1100px rule: one column. (Its later hero-grid rule undid this, which left the copy 290px wide at 820 and 0px at 390.) */
	/*
	 * The shoal runs across the whole width when the copy is one column (Ben, 2 Oct 2026: on a phone it was a thin strip down the right edge). The desktop wash is darkest at the
	 * left where the copy is and clearer at the right; stacked, the copy fills the width, so that wash left only the last third of the hero visible. Here it is one even 70% over the
	 * whole hero, the same strength the desktop wash has under the paragraph, so the field is seen edge to edge and the copy stays above 4.5:1 (home-shoal-spread.js).
	 */
	.home-hero::before {
		background:
			radial-gradient(circle at 74% 42%, rgba(255, 101, 0, 0.08), transparent 26%),
			linear-gradient(180deg, rgba(10, 10, 12, 0.7) 0%, rgba(10, 10, 12, 0.7) 100%);
	}

	/*
	 * On a phone the wash is 62%, not 70%, and the paragraph is lighter than the tablet's (Ben, 6 Oct 2026: the dashes were still dull; then Dave, 7 Oct 2026: 15% less bright than the 55% wash,
	 * (1 - .62) / (1 - .55) = 0.84). The copy fills the width here, so the wash cannot be eased far without raising the text: with the brightest swimmer directly behind it the title is 6.7:1 and
	 * the paragraph 5.8:1 (docs/verification/home-shoal-spread.js), both over 4.5:1.
	 */
	@media screen and (max-width: 600px) {
		.home-hero::before {
			background:
				radial-gradient(circle at 74% 42%, rgba(255, 101, 0, 0.08), transparent 26%),
				linear-gradient(180deg, rgba(10, 10, 12, 0.62) 0%, rgba(10, 10, 12, 0.62) 100%);
		}

		.home-hero-body {
			color: #f2efea;
		}
	}

	/* The copy rests on the hero's bottom padding here too (see `.home-hero-grid`): the hero is still a full screen, and the spare height goes above the eyebrow. */
	.home-hero {
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		padding-top: 120px;
	}

	.home-hero-grid {
		grid-template-columns: 1fr;
		gap: 44px;
		min-height: 0;
	}

	.home-hero-title {
		max-width: 10ch;
	}

	/* `minmax(0, 1fr)`, not `1fr`: a bare `1fr` can grow to its content, which let the greeting widen its own column past the gutter. */
	.home-problems-head {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}

	.home-problems-context {
		display: block;
		height: auto;
		padding: 0;
	}

	.home-problems-intro {
		margin-top: 16px;
	}

	/* Stacked: the eyebrow, the headline, then the clients, 34px apart. */
	.home-financial-grid {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"eyebrow"
			"copy"
			"panel";
	}

	.home-financial {
		--home-fin-size: 54px;
	}

	.home-financial-panel {
		margin-top: 34px;
	}
}

/* ------------------------------------------------------------------------------ large desktop */
@media screen and (min-width: 1501px) {
	.home-trust-marquee img {
		height: 21.45px;
		max-width: 119.6px;
	}

	/*
	 * The hero copy's height on a wide screen (Ben, 8 Oct 2026: "I want it to be like it was previous"). The copy rests on the bottom of a hero that is at least one screen tall, so on a tall window
	 * its top is the spare height minus the copy's own height. The 7 Oct type rules set the paragraph at a fixed 17.8px where it had been clamp(17px, 1.35vw, 20px), 20px from 1481px up, so the copy became
	 * 46px shorter and, bottom-anchored, its top (eyebrow, headline, paragraph, buttons together) dropped 46px on every tall, wide window: 1600 x 1015, 1920 x 1080, 2250 x 1140 (measured against 564f661, the
	 * commit before). The lift takes that 46px back off the grid's minimum height so the whole group is where it was. Below 1501px the old paragraph was 17.8px or less within 5px of today's, and a window
	 * short enough for the copy to fill the hero never had a spare to move, so neither is touched.
	 */
	.home-hero-grid {
		--home-hero-lift: 46px;
		min-height: calc(100vh - 220px - var(--home-hero-lift));
	}
}

/* ------------------------------------------------------------------------------- mobile */
@media screen and (max-width: 650px) {
	.home-hero,
	.home-problems,
	.home-trust,
	.home-work,
	.home-financial {
		font-size: calc(16px * var(--type-reading));
		--home-panel-y: 72px;
		--home-band-y: 56px;
	}

	/*
	 * Selected work: two columns at 390px make a card 168px wide, where the Work cards' 45px circle (24px / 22px inset) is a full-width card's control and would cover about a third of the
	 * picture. The same circle, scaled to the card: 32px, 10px from the side and bottom, chevron scaled with it (29.7 x 32 / 45 = 21.1px). From 651px it is the Work card's own size.
	 */
	.home-work-card .round-arrow {
		right: 10px;
		bottom: 10px;
		width: 32px;
		height: 32px;
		min-width: 32px;
		--chevron-size: 21.1px;
	}

	.home-hero {
		min-height: 92vh;
		padding: 102px 0 var(--home-panel-y);
	}

	@supports (min-height: 100svh) {
		.home-hero {
			min-height: 92svh;
		}
	}

	.home-hero-grid {
		min-height: 0;
	}

	.home-hero-title {
		font-size: clamp(56px, 17vw, 80px);
		line-height: 0.88;
	}

	.home-hero-body {
		font-size: var(--fs-body);
	}

	.home-problem-card {
		grid-template-columns: 1fr;
		min-height: 210px;
		padding: 24px;
		border-radius: var(--r-panel);
	}

	.home-problem-title {
		font-size: calc(31px * var(--type-heading));
	}

	.home-problem-copy {
		font-size: var(--fs-body);
	}

	.home-problem-grid {
		grid-template-columns: 1fr;
	}

	.home-trust-marquee img {
		height: 16.5px;
		max-width: 92.4px;
	}

	.home-financial {
		padding: calc(var(--home-panel-y) - 2.5px) 0 var(--home-panel-y);
	}

	.home-financial {
		--home-fin-size: 58px;
	}
}

/* ----------------------------------------------------------------------------- less motion */
/*
 * A reader who has asked for less motion (the device, or Viewing options through the generated mirror in reduced-motion.css) gets the ticker as a still row they can
 * scroll, the cards without their lift and the symbol without its turn. The shoal checks the same two switches itself and draws one still frame.
 */
@media (prefers-reduced-motion: reduce) {
	.home-trust-track {
		animation: none;
		transform: none;
	}

	.home-trust-marquee {
		overflow-x: auto;
	}

	.home-problem-card {
		transition: none;
	}

	.home-problem-card:hover,
	.home-problem-card:focus-visible {
		transform: none;
	}

	/* Selected work: no lift, no zoom (the chevron's nudge is switched off by components.css). The state stays, still: hover is a 2px ink ring and the card's shadow, focus keeps its 3px ring, and the circle stays. */
	.home-work-card,
	.home-work-card img {
		transition: none;
	}

	.home-work-card:hover,
	.home-work-card:focus-visible {
		transform: none;
	}

	.home-work-card:hover {
		box-shadow: 0 0 0 2px var(--ink), var(--journey-card-shadow);
	}

	.home-work-card:hover img,
	.home-work-card:focus-visible img {
		transform: none;
	}
}