/**
 * Challenge — the master's `#view-subroute`.
 *
 * Only what belongs to this family. The hero shares every value with
 * `.route-hero`, so route.css carries both selectors rather than repeating
 * them here; the shared sections come from components.css.
 *
 * Measured on the rendered master at the ratified shapes: 1600x900, 1600x1000,
 * 1366x768, 1366x900, 1366x1000, 820x1180 and 390x844.
 */

/* ------------------------------------------------------------------ hero */
/*
 * Everything else about this hero is in route.css, on the same selectors as
 * `.route-hero`. What is here is what a challenge hero adds: it clips a very
 * large yellow ring behind the copy.
 */
.sub-hero {
	position: relative;
	overflow: hidden;
}

/*
 * The Fintech hero (Ben, 8 Oct 2026) is a picture of a lion standing in its right third. The hero box is close to square, so the centred crop every hero gets would cut the lion off at the
 * right; this one is held to the right edge, which keeps all of it in view at every width (the crop worked out from the hero box measured at 1600, 1366, 820 and 390: 598x504 at 1366, 638x684 at 1600, 754x533 at 820, 350x380 at 390). Keyed to the page's slug, which the hero already prints.
 */
.sub-hero[data-journey-challenge="fintech-data"] .route-hero-media img {
	object-position: 100% 50%;
}

/*
 * `top: 11vh` — a viewport-height unit, not a media query, so it moves with
 * the window rather than stepping at a breakpoint. It is also why a tall
 * full-page screenshot misplaces this ring: the capture height, not the
 * window height, is what `vh` resolves against.
 */
/* The copy sits above the ring. `.route-hero-grid` has no stacking context in
   the master; only the challenge hero's does, because only it has something
   behind to clear. */
.sub-hero-grid {
	position: relative;
	z-index: 2;
}


/* ---------------------------------------------------------------- lead */
/*
 * The short introduction under a landing-page hero (Fintech, Ben, 8 Oct 2026): an eyebrow over the page's `.display-sm` title on one side, the copy on the other from the wide layout up. Its padding and
 * the eyebrow's gap come from the site's panel system (panel-headings.css), the same as every other panel on the page.
 */
.challenge-lead-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 22px;
	align-items: start;
}

.challenge-lead .copy {
	margin: 0 0 1em;
}

.challenge-lead .copy:last-child {
	margin-bottom: 0;
}

@media screen and (min-width: 1101px) {
	.challenge-lead-grid {
		grid-template-columns: 1.1fr 0.9fr;
		gap: 70px;
	}
}

/*
 * The alternating panel grounds of a landing page (Ben, 8 Oct 2026): white, then the page's paper, so two neighbouring panels never run into one. The class is doubled so it outranks a panel's own
 * single-class background (`.system`, `.faq-section`, `.work-detail-video-section`) without `!important`; both are the site's existing tokens.
 */
.tone-white.tone-white {
	background: var(--white);
}

.tone-paper.tone-paper {
	background: var(--paper);
}

/*
 * "Recognise any of these?" as the section's own title on a landing page (Ben, 8 Oct 2026), at the page's `.display-sm` size, with the room an H2 needs above the cards.
 */
.symptom-title {
	margin: 0 0 30px;
}

/*
 * The work behind "Load more" on a landing page (Ben, 8 Oct 2026): out of sight, out of the Tab order and out of the accessibility tree until revealed, while its links stay in the page's HTML, as on the
 * Work page (`.big-work-card.is-later`, work.css).
 */
.project-card.is-later {
	display: none;
}

.challenge-load-more {
	display: flex;
	justify-content: center;
	padding: 28px 0 4px;
}

/* ------------------------------------------------------------- symptoms */
.symptom-section {
	padding: 72px 0 100px;
}

/*
 * The bottom is 82px, not the 100 of `.symptom-section`: the master carries a
 * bare `.symptom-lite { padding: 68px 0 82px }` that beats it on source order,
 * and then puts the top back to 34 with an `!important`. Stated in full here
 * so the two halves cannot drift apart — and a reminder that a rule can be
 * written against the modifier alone, which an extraction keyed to the block
 * name will walk straight past.
 */
.symptom-section.symptom-lite {
	padding: 34px 0 82px;
}

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

.symptom-card {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 158px;
	padding: 28px;
	border: 1px solid var(--line);
	border-radius: var(--r-card);
	background: var(--white);
}

.symptom-card b {
	font-size: calc(39px * var(--type-heading));
	line-height: 1;
	letter-spacing: -0.07em;
	color: var(--orange-text);
}

.symptom-card p {
	margin: 20px 0 0;
	font-size: var(--fs-body);
	line-height: 1.5;
	font-weight: var(--fw-card-title);
	letter-spacing: -0.02em;
	color: var(--spec-lede);
}

/* --------------------------------------------------- journey · insights */
/*
 * Rendered only when the challenge has relevant insights. The master omits the
 * whole section otherwise, and fifteen of the twenty-two challenges do.
 */
.journey-insights {
	padding: 54px 0 58px;
	background: var(--white);
	border-top: 1px solid var(--hairline);
}

.journey-insights-head {
	max-width: 800px;
	margin-bottom: 20px;
}

.journey-insights-head .display-sm {
	max-width: 680px;
	font-size: clamp(31px, 3.3vw, 44px);
}

.journey-insights-head p {
	margin: 14px 0 0;
	font-size: var(--fs-body);
	line-height: 1.55;
	color: var(--head-lede);
}

.journey-insights-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
}

.journey-insight-card {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 170px;
	padding: 20px;
	border: 1px solid var(--line);
	border-radius: 19px;
	background: var(--paper);
	color: var(--ink);
	text-decoration: none;
	overflow: hidden;
}

/* The static corner ring is gone (Ben, 29 Sep 2026); the card now answers hover and focus with the
   shared side bar in components.css, in the ring's colours. */
.journey-insight-card {
	--card-accent: var(--cyan);
}

.journey-insight-card:nth-child(2) {
	--card-accent: var(--magenta);
}

.journey-insight-card > * {
	position: relative;
	z-index: 2;
}

.journey-insight-card span {
	font-size: max(calc(9.5px * var(--type-small)), var(--type-floor));
	font-weight: var(--fw-eyebrow);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--home-trust-label);
}

.journey-insight-card h3 {
	max-width: 480px;
	margin: 26px 0 0;
	font-size: calc(22px * var(--type-heading));
	line-height: 1.05;
	letter-spacing: var(--tr-display);
	font-weight: var(--fw-card-title);
}

.journey-insight-card .cta-chevron {
	display: block;
	align-self: flex-start;
	margin: 20px 0 0;
	color: var(--ink);
	--chevron-size: 27px;
}

/* ------------------------------------------------------- journey · next */
.journey-next {
	padding: 65px 0 70px;
	background: var(--journey-next-bg);
	border-top: 1px solid var(--hairline);
	border-bottom: 1px solid var(--hairline);
}

.journey-next-head {
	max-width: 860px;
	margin-bottom: 28px;
}

.journey-next-head .display-sm {
	max-width: 820px;
	font-size: clamp(38px, 4.5vw, 64px);
}

.journey-next-head p {
	max-width: 720px;
	margin: 18px 0 0;
	font-size: var(--fs-body);
	line-height: 1.58;
	color: var(--journey-lede);
}

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

.journey-next-card {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 220px;
	padding: 22px;
	border: 1px solid var(--journey-card-border);
	border-radius: var(--r-card);
	background: var(--white);
	color: var(--ink);
	text-align: left;
	text-decoration: none;
	overflow: hidden;
	cursor: pointer;
	transition: box-shadow 0.26s ease, border-color 0.26s ease;
}

/* A real <button>, so it needs the font and width a div would have had. */
button.journey-next-card {
	width: 100%;
	font: inherit;
}

.journey-next-card:hover,
.journey-next-card:focus-visible,
.journey-next-card:has(.stretched-link:focus-visible) {
	border-color: var(--journey-card-border-hover);
	box-shadow: var(--journey-card-shadow);
}

/* The corner ring is gone (Ben, 29 Sep 2026); the rollover is the shared side bar in components.css,
   in the ring's colour. The card no longer lifts, and its outline is no longer suppressed. */
.journey-next-card {
	--card-accent: var(--cyan);
}

.journey-next-card.journey-next-talk {
	--card-accent: var(--orange-text);
}

.journey-next-card > * {
	position: relative;
	z-index: 2;
}

/* The action line of a link card holds the stretched link, so it is not the box the overlay measures from (the card is). Its own place in the flow is unchanged. */
.journey-next-card > .journey-next-action:has(.stretched-link) {
	position: static;
}

.journey-next-action > .stretched-link {
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	letter-spacing: inherit;
	text-transform: inherit;
}

.journey-next-label {
	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(--home-trust-label);
}

.journey-next-card h3 {
	max-width: 500px;
	margin: 30px 0 10px;
	font-size: calc(29px * var(--type-heading));
	line-height: 1.02;
	letter-spacing: var(--tr-display);
	font-weight: var(--fw-card-title);
}

.journey-next-card p {
	max-width: 540px;
	margin: 0;
	font-size: var(--fs-body);
	line-height: 1.52;
	color: var(--head-lede);
}

.journey-next-action {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	margin-top: 30px;
	padding-top: 18px;
	border-top: 1px solid var(--line);
	font-size: max(calc(11px * var(--type-small)), var(--type-floor));
	font-weight: var(--fw-eyebrow);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.journey-next-action .cta-chevron {
	--chevron-size: 27px;
}

/* ------------------------------------------------- journey · more panel */
.journey-more-panel {
	display: none;
	margin-top: 16px;
	padding-top: 30px;
	border-top: 1px solid var(--journey-card-border);
}

.journey-more-panel.open {
	display: block;
	animation: form-page-in 0.35s ease both;
}

@keyframes form-page-in {
	from {
		opacity: 0;
		transform: translateY(10px);
	}

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

.journey-more-head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
	gap: 25px;
	margin-bottom: 20px;
}

.journey-more-head h3 {
	margin: 0;
	font-size: clamp(38px, 4vw, 58px);
	line-height: 0.98;
	letter-spacing: var(--tr-display);
	font-weight: var(--fw-title);
}

.journey-more-head p {
	max-width: 520px;
	margin: 0;
	font-size: var(--fs-body);
	line-height: 1.5;
	color: var(--journey-more-lede);
}

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

.journey-proof-card {
	position: relative;
	min-height: 340px;
	border-radius: 20px;
	overflow: hidden;
	isolation: isolate;
	background: var(--grey-tile);
	color: var(--white);
	text-decoration: none;
}

.journey-proof-card > img,
.journey-proof-card > .journey-proof-fallback {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.journey-proof-card:hover > img,
.journey-proof-card:focus-visible > img {
	transform: scale(1.03);
}

.journey-proof-card::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: var(--journey-proof-scrim);
}

/* Drawn, not an image: the master paints a dot and a ring over a dark
   gradient when a proof item has no picture. */
.journey-proof-fallback {
	background: var(--journey-proof-fallback);
}

.journey-proof-copy {
	position: absolute;
	z-index: 2;
	left: 21px;
	right: 21px;
	bottom: 19px;
}

.journey-proof-copy span {
	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;
	margin-bottom: 8px;
	color: var(--journey-proof-eyebrow);
}

.journey-proof-copy h4 {
	max-width: 470px;
	margin: 0;
	font-size: calc(25px * var(--type-heading));
	line-height: 1.02;
	letter-spacing: var(--tr-display);
	font-weight: var(--fw-card-title);
}

.journey-more-actions {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-end;
	gap: 8px;
	margin-top: 18px;
}

/* ------------------------------------------------- tablet, 651px and up */
@media screen and (min-width: 651px) {
	.journey-next {
		padding: 82px 0 88px;
	}

	.journey-next-card {
		min-height: 245px;
		padding: 26px;
	}

	.journey-next-card h3 {
		margin-top: 38px;
		font-size: calc(clamp(27px, 2.8vw, 39px) * var(--type-heading));
	}

	.symptom-grid {
		grid-template-columns: 1fr 1fr;
	}

	/* Two columns from 651, not from the 1101 the rest of the page steps at:
	   the master's only rule for this grid is a max-width:650 single column. */
	.journey-insights-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.journey-more-actions {
		flex-direction: row;
		align-items: normal;
	}
}

/* ---------------------------------------- journey grids, 901px and up */
/* The master splits these at 900, not at the 1101 the rest of the site uses,
   so they are their own step rather than folded into the laptop band. */
@media screen and (min-width: 901px) {
	.journey-next-grid,
	.journey-more-grid {
		grid-template-columns: 1fr 1fr;
	}

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

	.journey-more-head {
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
	}

	.journey-proof-card {
		min-height: 310px;
	}
}

/* --------------------------------------------- laptop band, 1101px and up */
@media screen and (min-width: 1101px) {
	.sub-hero::after {
		opacity: 0.35;
	}

	.symptom-section.symptom-lite {
		padding: 28px 0 60px;
	}

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

	.symptom-card {
		min-height: 140px;
		padding: 20px;
	}

	.journey-next {
		padding: 62px 0 68px;
	}

	.journey-next-head .display-sm {
		font-size: clamp(38px, 3.5vw, 52px);
	}

	.journey-next-card {
		min-height: 210px;
		padding: 22px;
	}

	.journey-next-card h3 {
		margin-top: 28px;
		font-size: calc(31px * var(--type-heading));
	}

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

	.journey-more-grid {
		gap: 12px;
	}

	.journey-more-head h3 {
		font-size: 46px;
	}

	.journey-proof-card {
		min-height: 270px;
	}

	.journey-proof-copy h4 {
		font-size: calc(22px * var(--type-heading));
	}
}

/* ---------------------------------------------- large desktop, 1501px and up */
@media screen and (min-width: 1501px) {
	.symptom-section.symptom-lite {
		padding: 34px 0 82px;
	}

	.symptom-card {
		min-height: 158px;
		padding: 28px;
	}

	.journey-next {
		padding: 82px 0 88px;
	}

	.journey-next-head .display-sm {
		font-size: clamp(38px, 4.5vw, 64px);
	}

	.journey-next-card {
		min-height: 245px;
		padding: 26px;
	}

	.journey-next-card h3 {
		margin-top: 38px;
		font-size: calc(clamp(27px, 2.8vw, 39px) * var(--type-heading));
	}

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

	.journey-more-grid {
		gap: 14px;
	}

	.journey-more-head h3 {
		font-size: clamp(38px, 4vw, 58px);
	}

	.journey-proof-card {
		min-height: 310px;
	}

	.journey-proof-copy h4 {
		font-size: calc(25px * var(--type-heading));
	}
}

/* ------------------------------------------------------- reduced motion */
/*
 * Movement only. The panel still opens and closes, the cards still change
 * colour: what goes is the arrow's nudge and the panel's slide. (The card's side
 * bar has its own reduced-motion rule in components.css.)
 */
@media (prefers-reduced-motion: reduce) {
	.journey-next-card,
	.journey-proof-card > img {
		transition: none;
	}

	.journey-next-card:hover,
	.journey-next-card:focus-visible,
.journey-next-card:has(.stretched-link:focus-visible),
	.journey-proof-card:hover > img,
	.journey-proof-card:focus-visible > img {
		transform: none;
	}

	.journey-more-panel.open {
		animation: none;
	}
}