/**
 * Route family — the seven "How we help" children and the brand variant,
 * and the hero half of the Challenge family.
 *
 * The shared parts of these pages (.system, .steps, .work-section,
 * .project-card, .faq-section, .section-action, .kicker, .funnel) are in
 * components.css, because Work, Case Studies and Insights use them too. What
 * is here is only what belongs to a route page: the hero, the options band and
 * the cards.
 *
 * Every value measured on the rendered master at 390 / 820 / 1366 / 1600, and
 * at the band edges where a value turned out to be fluid. One ascending
 * media-query set at 651 / 1101 / 1501; every laptop override reset at 1501.
 *
 * `.sub-hero` shares every hero value with `.route-hero` in the master, so it
 * rides the same selectors here rather than being repeated in challenge.css,
 * and this file is enqueued on challenge pages too. The challenge hero's own
 * additions — it is `position: relative` and clips a large ring — are in
 * challenge.css. `.route-hero-media` is already shared by name: the master
 * uses that same class inside the challenge hero.
 *
 * On breakpoints: the master collapses these grids at 1000px, where 28_ §1
 * puts the state change at 1100. The four approved states win, as they do in
 * every other template here, and the four test widths render identically
 * either way — only 1001–1100 differs, a band that already shows the
 * hamburger header.
 */

/* ------------------------------------------------------------------ hero */
.route-hero,
.sub-hero {
	display: flex;
	align-items: flex-end;
	min-height: auto;
	padding: 145px 0 34px;
}

.route-hero-grid,
.sub-hero-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 70px;
	align-items: center;
}

.route-hero .lead,
.sub-hero .lead {
	max-width: 760px;
	margin-top: 20px;
}

.route-hero .btn-row,
.sub-hero .btn-row {
	margin-top: 24px;
}

.route-hero .btn-row .btn,
.sub-hero .btn-row .btn {
	min-width: 165px;
	justify-content: space-between;
}

.route-hero-media {
	position: relative;
	min-height: 300px;
	margin: 0;
	border-radius: 26px;
	overflow: hidden;
	background: var(--media-bg);
}

.route-hero-media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	background: var(--media-placeholder);
}

.route-hero-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--media-scrim);
}

.route-hero-media figcaption {
	position: absolute;
	z-index: 2;
	left: 28px;
	right: 28px;
	bottom: 26px;
	max-width: 640px;
	color: var(--white);
	font-size: var(--fs-image-overlay);
	font-weight: var(--fw-eyebrow);
	line-height: 1.35;
}

/* --------------------------------------------------------------- options */
.route-options {
	padding: 38px 0 88px;
}

/* Block, not the two-column flex of the master's base rule: its QA pass moves
   the supporting line under the heading. Same treatment as .work-head. */
.route-title-row {
	display: block;
	margin-bottom: 28px;
}

.route-title-row p {
	max-width: 720px;
	margin: 18px 0 0;
	font-size: var(--fs-body);
	line-height: 1.55;
	color: var(--head-lede);
}

.route-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
}

/*
 * Two columns from the tablet band up. The master's own phone rule dropped it to one but a later base rule restored two, so the financial route stayed a 2x2 on a phone with
 * cards 168px wide, and "Brokerage" and "management" ran off the card edge (Ben, 2 Oct 2026, from a phone: stack them like the other pages). One card per row at 650px and below.
 */
.route-grid-four {
	grid-template-columns: repeat(2, 1fr);
}

@media screen and (max-width: 650px) {
	.route-grid-four {
		grid-template-columns: 1fr;
	}
}

/*
 * The four financial cards are two across and wide, so the 235 to 280px a card is given in the three-up routes left them mostly empty (Ben, 2 Oct 2026: reduce the depth).
 * Two-up they take their content's height plus the padding, with 20px kept between the number and the title; a phone's one-per-row cards keep the usual height.
 */
@media screen and (min-width: 651px) {
	.route-grid-four .route-card {
		min-height: 0;
		gap: 20px;
	}

	/* Titles and descriptions keep to the 300px and 310px measures made for a third of the page; in a card half the page wide they wrapped to four and three short lines. */
	.route-grid-four .route-card h3 {
		max-width: none;
	}

	.route-grid-four .route-card p {
		max-width: 520px;
	}
}

.route-card {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 280px;
	padding: 28px;
	border: 1px solid var(--line);
	border-radius: var(--r-card);
	background: var(--white);
	color: var(--ink);
	text-decoration: none;
	overflow: hidden;
	cursor: pointer;
	transition: 0.3s;
}

.route-card:hover,
.route-card:focus-visible,
.route-card:has(.stretched-link:focus-visible) {
	box-shadow: var(--shadow-lift);
}

.route-card .num {
	font-family: var(--font-body);
	font-size: var(--fs-eyebrow-label);
	font-weight: 800;
	letter-spacing: var(--ls-eyebrow-label);
	text-transform: uppercase;
	color: var(--muted);
}

.route-card h3 {
	max-width: 300px;
	margin: 0;
	font-size: calc(29px * var(--type-heading));
	line-height: 1.04;
	letter-spacing: -0.012em;
	font-weight: var(--fw-card-title);
}

.route-card p {
	max-width: 310px;
	font-size: var(--fs-body);
	line-height: 1.5;
	font-weight: 400;
	color: var(--spec-lede);
}

/*
 * The ring that sat in each card's corner is gone (Ben, 29 Sep 2026); the rollover is
 * the shared side bar in components.css, which reads `--card-accent`. The colours are
 * the ring's, position for position.
 *
 * Card two is ink, not cyan. The master asks for `var(--cyan)` and never
 * defines it, so the declaration is invalid at computed-value time and
 * border-color falls back to currentColor — measured as rgb(17,17,17) on the
 * rendered master at all four widths. Reproduced deliberately: --cyan does
 * exist in tokens.css, so writing the obvious rule here would have made this
 * the one route card that does not match the master. Logged for Ben.
 */
.route-card {
	--card-accent: var(--yellow);
}

.route-card:nth-child(2) {
	--card-accent: var(--ink);
}

.route-card:nth-child(3) {
	--card-accent: var(--red);
}

/* The four-card financial variant does define all four, and is a 2x2 at every
   width above mobile rather than a single row. */
.route-grid-four .route-card:nth-child(1) {
	--card-accent: var(--magenta);
}

.route-grid-four .route-card:nth-child(2) {
	--card-accent: var(--cyan);
}

.route-grid-four .route-card:nth-child(3) {
	--card-accent: var(--yellow);
}

.route-grid-four .route-card:nth-child(4) {
	--card-accent: var(--accent-grey);
}

/* ------------------------------------------------- tablet, 651px and up */
@media screen and (min-width: 651px) {
	.route-hero-media {
		min-height: 411px;
	}

	.route-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* --------------------------------------------- laptop band, 1101px and up */
@media screen and (min-width: 1101px) {
	.route-hero,
	.sub-hero {
		padding: 112px 0 30px;
	}

	.route-hero-grid,
	.sub-hero-grid {
		grid-template-columns: var(--hero-copy-col) var(--hero-media-col);
		gap: 48px;
	}

	.route-hero-media {
		min-height: 396px;
		border-radius: 22px;
	}

	.route-options {
		padding: 34px 0 66px;
	}

	.route-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	/*
	 * Restated, not inherited from the tablet band. `.route-grid-four` and
	 * `.route-grid` have the same specificity, so the three-column rule above
	 * would otherwise win here simply by coming later, and the financial route
	 * would go from the master's 2x2 to a row of three with one card orphaned
	 * underneath. It stays two columns at every width above mobile.
	 */
	.route-grid-four {
		grid-template-columns: repeat(2, 1fr);
	}

	.route-card {
		min-height: 235px;
		padding: 23px;
	}

	.route-card h3 {
		font-size: calc(27px * var(--type-heading));
	}

	.route-card p {
		font-size: var(--fs-body);   /* was 13.5px in this band (Ben, 1 Oct 2026: card descriptions no smaller than 14.5px) */
	}
}

/* ---------------------------------------------- large desktop, 1501px and up */
@media screen and (min-width: 1501px) {
	.route-hero,
	.sub-hero {
		padding: 145px 0 34px;
	}

	.route-hero-grid,
	.sub-hero-grid {
		gap: 70px;
	}

	.route-hero-media {
		min-height: 492px;
		border-radius: 26px;
	}

	.route-options {
		padding: 38px 0 88px;
	}

	.route-card {
		min-height: 280px;
		padding: 28px;
	}

	.route-card h3 {
		font-size: calc(29px * var(--type-heading));
	}

	.route-card p {
		font-size: var(--fs-body);
	}
}

/*
 * A viewport-height rule, not a width one, and the master applies it after the
 * laptop band so it reaches both laptop and desktop. At 1600x900 and 1366x768
 * — two of the four verification sizes — it is what actually sets the hero's
 * top padding, which is why it cannot be folded into the width bands.
 */
@media screen and (min-width: 1101px) and (max-height: 900px) {
	.route-hero,
	.sub-hero {
		padding-top: 98px;
	}
}

/* ------------------------------------- hero media: one footprint, site-wide */
/*
 * The caption's frame. `.route-hero-media` keeps every rule it had; it is a
 * div inside this figure now rather than the figure itself, so the caption
 * below it is no longer drawn over the artwork (Ben, 24 Sep 2026).
 */
.route-hero-figure {
	margin: 0;
}

/*
 * The 49/51 tokens made every hero column the same width, and the media still
 * did not match: at 1600 Work stood 684px tall and Route and Challenge 492 — a
 * quarter shorter in an identical column, which is exactly what Ben could see
 * and the grid measurement could not.
 *
 * Work is the benchmark, so the shorter families come up to it and nothing
 * comes down. The pictures still crop with `object-fit: cover`, so aspect
 * ratios are respected rather than forced; what is normalised is the
 * footprint, not the frame's shape.
 *
 * Work's own scale, measured on staging: 380 below 651, 533 to 1100, 504 to
 * 1500, 684 above. 533 being taller than 504 is Work's, not a slip — the
 * column is 754px wide at 820 and narrows to 598 at 1366.
 *
 * Each family carries its own copy because the stylesheets are enqueued per
 * template: `route.css` never loads on a Case Study, so a rule for one written
 * in the other's file would simply never arrive.
 */
.route-hero-media {
	min-height: 380px;
}

@media screen and (min-width: 651px) {
	.route-hero-media {
		min-height: 533px;
	}
}

@media screen and (min-width: 1101px) {
	.route-hero-media {
		min-height: 504px;
	}
}

@media screen and (min-width: 1501px) {
	.route-hero-media {
		min-height: 684px;
	}
}