/**
 * CN Samaritan Aviation — widget styles.
 *
 * Values follow the site's Elementor global kit (Primary #223357,
 * Secondary #EEB53F, Bebas Neue headings, Poppins body) and the Hope Can't
 * Wait comp. Colours are exposed as custom properties so each widget instance
 * can be re-themed from the Elementor Style tab without extra CSS.
 */

.cnsa-give,
.cnsa-hero,
.cnsa-meter,
.cnsa-countdown,
.cnsa-story,
.cnsa-speed,
.cnsa-record,
.cnsa-tiers,
.cnsa-runway {
	--cnsa-primary: #223357;
	--cnsa-accent: #eeb53f;
	--cnsa-active: #eeb53f;
	--cnsa-active-text: #223357;
	--cnsa-idle: #f3f7f9;
	--cnsa-idle-text: #7c7c7c;
	--cnsa-panel: #203552;
	--cnsa-digit-bg: #223357;
	--cnsa-heading: #ffffff;
	--cnsa-hero-gradient: #223357;
	--cnsa-gradient-height: 60%;
	--cnsa-gradient-solid: 18%;
	box-sizing: border-box;
}

.cnsa-give *,
.cnsa-hero *,
.cnsa-meter *,
.cnsa-countdown *,
.cnsa-story *,
.cnsa-speed *,
.cnsa-record *,
.cnsa-tiers *,
.cnsa-runway * {
	box-sizing: inherit;
}

/*
 * Buttons the plugin renders.
 *
 * Elementor's kit styles buttons as `.elementor-kit-9 button { … }` — one
 * class plus one element, which outranks any single-class rule in this file.
 * That is how the record carousel's arrows and dots came back as gold
 * rectangles on staging instead of navy tiles and pills. Every button rule
 * below therefore carries its block class, and this reset clears the
 * properties a theme is most likely to set before those rules run.
 */
.cnsa-give .cnsa-give__tab,
.cnsa-give .cnsa-give__amount,
.cnsa-story .cnsa-story__dot,
.cnsa-record .cnsa-record__nav,
.cnsa-record .cnsa-record__dot,
.cnsa-record .cnsa-record__more {
	-webkit-appearance: none;
	appearance: none;
	margin: 0;
	border: 0;
	box-shadow: none;
	text-transform: none;
	text-decoration: none;
	color: inherit;
}

/* ---------------------------------------------------------------- Give form */

.cnsa-give__tabs {
	display: flex;
	gap: 8px;
	margin-bottom: 16px;
}

.cnsa-give .cnsa-give__tab {
	flex: 1;
	padding: 14px 16px;
	border: 0;
	cursor: pointer;
	background: var(--cnsa-idle);
	color: var(--cnsa-idle-text);
	font-family: 'Poppins', sans-serif;
	font-weight: 700;
	font-size: 15px;
	letter-spacing: 2px;
	text-transform: uppercase;
	line-height: 1;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.cnsa-give .cnsa-give__tab[aria-selected='true'] {
	background: var(--cnsa-active);
	color: var(--cnsa-active-text);
}

.cnsa-give__amounts {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	margin-bottom: 12px;
}

.cnsa-give .cnsa-give__amount {
	padding: 16px 8px;
	border: 0;
	cursor: pointer;
	background: var(--cnsa-idle);
	color: var(--cnsa-idle-text);
	font-family: 'Poppins', sans-serif;
	font-weight: 700;
	font-size: 16px;
	line-height: 1.2;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.cnsa-give .cnsa-give__amount.is-selected {
	background: var(--cnsa-active);
	color: var(--cnsa-active-text);
}

.cnsa-give__custom {
	width: 100%;
	padding: 16px;
	margin-bottom: 16px;
	border: 1px solid #dfe6ea;
	background: #fff;
	font-family: 'Poppins', sans-serif;
	font-size: 16px;
	color: var(--cnsa-primary);
}

/* Two classes, to outrank the kit's `.elementor-kit-9 a` rule (0,1,1), which
   had been resetting this button to regular weight instead of bold. */
.cnsa-give .cnsa-give__cta {
	display: block;
	padding: 16px 32px;
	background: var(--cnsa-active);
	color: var(--cnsa-active-text);
	font-family: 'Poppins', sans-serif;
	font-weight: 700;
	font-size: 16px;
	letter-spacing: 2px;
	line-height: 1.125;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.cnsa-give .cnsa-give__cta:hover,
.cnsa-give .cnsa-give__cta:focus {
	background: var(--cnsa-primary);
	color: #fff;
}

/* -------------------------------------------------------------------- Hero */

.cnsa-hero {
	position: relative;
	min-height: 1000px;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	isolation: isolate;
}

.cnsa-hero__image,
.cnsa-hero__scrim {
	position: absolute;
	inset: 0;
	z-index: -1;
}

/*
 * Two classes, because Elementor's own `.elementor img { height: auto }`
 * outranks one. With the single-class rule the photograph kept its natural
 * height: at 1440 wide that happens to be the hero's 1000px, which is why it
 * looked right on a desktop, but anywhere narrower it stopped short and left
 * the hero's lower half as bare page — on a phone, 271px of photograph and
 * white under it, with the white first line of the title lost against it.
 */
.cnsa-hero .cnsa-hero__image {
	width: 100%;
	max-width: none;
	height: 100%;
	object-fit: cover;
	object-position: var(--cnsa-hero-focus, center center);
}

.cnsa-hero__scrim {
	background: rgba(0, 0, 0, 0.25);
}

/*
 * Bottom-anchored fade. Height sets how far up the hero it reaches; the solid
 * stop sets how much of it is opaque before the fade begins, so the photo can
 * be given back as much of the frame as the campaign wants.
 */
.cnsa-hero__gradient {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -1;
	height: var(--cnsa-gradient-height, 60%);
	background: linear-gradient(
		to top,
		var(--cnsa-hero-gradient) 0%,
		var(--cnsa-hero-gradient) var(--cnsa-gradient-solid, 18%),
		transparent 100%
	);
}

.cnsa-hero__inner {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 48px;
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
	padding: 80px 120px;
}

.cnsa-hero__col--title {
	/* As wide as the longest heading line needs — "Your gift can go" and
	   "Every flight" run wider than "Hope" — from the comp's 433px up to
	   well over half the hero, before the text column. */
	flex: 0 0 auto;
	min-width: min(433px, 100%);
	max-width: 64%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
}

/*
 * Two classes deep on purpose. Elementor emits kit typography as
 * `.elementor-kit-9 h1 { color: … }` — one class plus one element — so a
 * single-class rule here loses and the heading inherits the kit's navy,
 * which is invisible against the navy gradient. Colours are also set on the
 * lines themselves rather than inherited from the h1, so neither line can be
 * caught by a future kit change.
 */
.cnsa-hero .cnsa-hero__title {
	margin: 0;
	font-family: 'Bebas Neue', sans-serif;
	font-size: 120px;
	line-height: 110px;
	text-transform: uppercase;
	color: var(--cnsa-heading);
}

.cnsa-hero .cnsa-hero__title-line {
	display: block;
	color: var(--cnsa-heading);
}

.cnsa-hero .cnsa-hero__title-line--accent {
	color: var(--cnsa-accent);
}

/* Heading line 2 with [accent] round part of it: only that part is accent. */
.cnsa-hero .cnsa-hero__title-line--accent.is-partial {
	color: var(--cnsa-heading);
}

.cnsa-hero .cnsa-hero__accent {
	color: var(--cnsa-accent);
}

.cnsa-hero .cnsa-hero__body strong {
	font-weight: 700;
	color: #fff;
}

.cnsa-hero .cnsa-hero__body .cnsa-hero__accent {
	font-weight: 700;
}

/* Only the live phase shows; the rest wait in the page for their date. */
.cnsa-hero[hidden] {
	display: none !important;
}

/* The small line above the heading, e.g. "Fuel Week · Dec 7–12". */
.cnsa-hero .cnsa-hero__eyebrow {
	margin: 0 0 18px;
	font-family: 'Bebas Neue', 'Oswald', sans-serif;
	font-size: 18px;
	line-height: 1;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var(--cnsa-accent);
}

/* A campaign's own mark, top right of the hero (Fuel for Life). */
.cnsa-hero .cnsa-hero__logo {
	position: absolute;
	top: 88px;
	right: max(24px, calc((100% - var(--cnsa-hero-max, 1200px)) / 2));
	z-index: 1;
	width: var(--cnsa-hero-logo-w, 270px);
	max-width: 40%;
	height: auto;
}

@media (max-width: 767px) {
	.cnsa-hero .cnsa-hero__logo {
		top: 20px;
		right: 20px;
		width: min(var(--cnsa-hero-logo-w, 270px), 42vw);
	}
}

/* Two classes, to outrank the kit's `.elementor-kit-9 a` rule (0,1,1), which
   had been resetting this button to regular weight instead of bold. */
.cnsa-hero .cnsa-hero__cta {
	display: inline-block;
	padding: 16px 32px;
	background: var(--cnsa-hero-btn, var(--cnsa-accent));
	color: var(--cnsa-hero-btn-ink, var(--cnsa-primary));
	font-family: 'Poppins', sans-serif;
	font-weight: 700;
	font-size: 16px;
	letter-spacing: 2px;
	line-height: 1.125;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.cnsa-hero .cnsa-hero__cta:hover,
.cnsa-hero .cnsa-hero__cta:focus {
	background: #fff;
	color: var(--cnsa-primary);
}

.cnsa-hero__col--copy {
	flex: 0 1 685px;
	min-width: 340px;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.cnsa-hero .cnsa-hero__lede,
.cnsa-hero .cnsa-hero__body,
.cnsa-hero .cnsa-hero__kicker {
	margin: 0;
	font-family: 'Poppins', sans-serif;
	line-height: 1.2;
}

.cnsa-hero .cnsa-hero__lede {
	font-size: 24px;
	font-weight: 700;
	font-style: italic;
	color: #fff;
}

.cnsa-hero .cnsa-hero__body {
	font-size: 18px;
	font-weight: 400;
	color: rgba(255, 255, 255, 0.8);
	line-height: 1.6;
}

.cnsa-hero .cnsa-hero__kicker {
	font-size: 24px;
	font-weight: 600;
	color: var(--cnsa-accent);
}

@media (max-width: 1024px) {
	.cnsa-hero {
		min-height: 720px;
	}

	.cnsa-hero__inner {
		flex-direction: column;
		align-items: flex-start;
		gap: 32px;
		padding: 56px 40px;
	}

	.cnsa-hero__col--title,
	.cnsa-hero__col--copy {
		flex: 1 1 auto;
		width: 100%;
		min-width: 0;
		max-width: none;
	}

	/* Two classes, like the rule they override — with one, these sizes never
	   applied and the title stayed at its desktop 120px on every screen. */
	.cnsa-hero .cnsa-hero__title {
		font-size: 88px;
		line-height: 0.92;
	}
}

/*
 * Phones: the photograph is a band across the top, whole and uncropped by
 * default, and the copy sits under it on the gradient colour. The first line
 * of the title rides up onto the foot of the picture, where the picture fades
 * into that colour — the desktop's overlap, kept at a size a phone can read.
 *
 * Everything here is in the flow, so nothing depends on knowing how tall the
 * photograph turns out to be.
 */
@media (max-width: 767px) {
	.cnsa-hero {
		--cnsa-hero-overlap: 116px;
		display: block;
		background: var(--cnsa-hero-gradient);
	}

	.cnsa-hero .cnsa-hero__image {
		position: relative;
		inset: auto;
		z-index: 0;
		display: block;
		height: var(--cnsa-hero-photo-phone, auto);
	}

	/* The desktop's darkening and fade are sized to the whole hero; on a phone
	   the fade belongs to the foot of the photograph, drawn below. */
	.cnsa-hero__scrim,
	.cnsa-hero__gradient {
		display: none;
	}

	.cnsa-hero__inner {
		position: relative;
		z-index: 1;
		gap: 28px;
		margin-top: calc(-1 * var(--cnsa-hero-overlap));
		padding: calc(var(--cnsa-hero-overlap) - 64px) 20px 48px;
		background: linear-gradient(
			to bottom,
			transparent 0,
			var(--cnsa-hero-gradient) var(--cnsa-hero-overlap)
		);
	}

	.cnsa-hero__col--title {
		gap: 24px;
	}

	/* Sized to the screen, so CAN'T WAIT holds one line from 360px up. */
	.cnsa-hero .cnsa-hero__title {
		font-size: min(96px, 22.5vw);
		line-height: 0.92;
	}

	.cnsa-hero .cnsa-hero__lede,
	.cnsa-hero .cnsa-hero__kicker {
		font-size: 20px;
	}

	.cnsa-hero .cnsa-hero__body {
		font-size: 16px;
	}
}

/* ------------------------------------------------------------- Match meter */

.cnsa-meter {
	--cnsa-bracket-color: rgba(255, 255, 255, 0.4);
	--cnsa-bracket-size: 32px;
	--cnsa-bracket-inset: 16px;
	--cnsa-bracket-weight: 1px;
	/* A size container, so the numeral can be held to the panel's own width
	   at every size — see the numeral rule. */
	container-type: inline-size;
	position: relative;
	padding: 40px;
	background: var(--cnsa-panel);
	color: #fff;
}

/*
 * Corner brackets: 32×32 with only two borders each, inset 16px — the crop
 * marks framing the panel in the comp.
 */
.cnsa-meter__bracket {
	position: absolute;
	width: var(--cnsa-bracket-size);
	height: var(--cnsa-bracket-size);
	pointer-events: none;
}

.cnsa-meter__bracket--tl {
	top: var(--cnsa-bracket-inset);
	left: var(--cnsa-bracket-inset);
	border-top: var(--cnsa-bracket-weight) solid var(--cnsa-bracket-color);
	border-left: var(--cnsa-bracket-weight) solid var(--cnsa-bracket-color);
}

.cnsa-meter__bracket--tr {
	top: var(--cnsa-bracket-inset);
	right: var(--cnsa-bracket-inset);
	border-top: var(--cnsa-bracket-weight) solid var(--cnsa-bracket-color);
	border-right: var(--cnsa-bracket-weight) solid var(--cnsa-bracket-color);
}

.cnsa-meter__bracket--bl {
	bottom: var(--cnsa-bracket-inset);
	left: var(--cnsa-bracket-inset);
	border-bottom: var(--cnsa-bracket-weight) solid var(--cnsa-bracket-color);
	border-left: var(--cnsa-bracket-weight) solid var(--cnsa-bracket-color);
}

.cnsa-meter__bracket--br {
	bottom: var(--cnsa-bracket-inset);
	right: var(--cnsa-bracket-inset);
	border-bottom: var(--cnsa-bracket-weight) solid var(--cnsa-bracket-color);
	border-right: var(--cnsa-bracket-weight) solid var(--cnsa-bracket-color);
}

/*
 * Phones: the brackets nearer the panel's edge (Style → Bracket inset on
 * phones), clear of the figures and the button. Its own token, because
 * Elementor writes the desktop inset for every screen size.
 */
@media (max-width: 767px) {
	.cnsa-meter .cnsa-meter__bracket--tl { top: var(--cnsa-bracket-inset-m, 6px); left: var(--cnsa-bracket-inset-m, 6px); }
	.cnsa-meter .cnsa-meter__bracket--tr { top: var(--cnsa-bracket-inset-m, 6px); right: var(--cnsa-bracket-inset-m, 6px); }
	.cnsa-meter .cnsa-meter__bracket--bl { bottom: var(--cnsa-bracket-inset-m, 6px); left: var(--cnsa-bracket-inset-m, 6px); }
	.cnsa-meter .cnsa-meter__bracket--br { bottom: var(--cnsa-bracket-inset-m, 6px); right: var(--cnsa-bracket-inset-m, 6px); }
}

.cnsa-meter .cnsa-meter__label {
	margin: 0 0 4px;
	font-family: 'Bebas Neue', sans-serif;
	font-size: 16px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.75);
}

.cnsa-meter__label--chart {
	position: absolute;
	top: 0;
	left: 24px;
	z-index: 2;
	font-size: 24px;
	color: #fff;
}

/*
 * The chart is one stacking context: the numeral sits behind the curve so the
 * gradient wedge washes over it, exactly as the comp has it.
 */
.cnsa-meter__chart {
	position: relative;
	height: var(--cnsa-chart-height, 300px);
	margin: 0 0 24px;
}

.cnsa-meter .cnsa-meter__match {
	position: absolute;
	top: 15px;
	left: 18px;
	z-index: 1;
	margin: 0;
	font-family: 'Bebas Neue', sans-serif;
	font-size: var(--cnsa-numeral-size, 195px);
	/*
	 * Never wider than the panel. "$250,000" in Bebas Neue is about 3.6 times
	 * its size across, so at the comp's 195px it needs a 700px panel; on a
	 * tablet the 195px ran off the right-hand edge. The first line is for a
	 * browser without container units.
	 */
	font-size: min(var(--cnsa-numeral-size, 195px), 25cqw);
	line-height: 1;
	white-space: nowrap;
	opacity: var(--cnsa-numeral-opacity, 0.7);
	/* Gradient-filled numeral, per the comp: gold at the top left, fading out. */
	background-image: linear-gradient(173.72deg, var(--cnsa-accent) 17.89%, rgba(19, 35, 67, 0) 79.19%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* If background-clip: text is unavailable, fall back to a flat gold numeral. */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
	.cnsa-meter .cnsa-meter__match {
		background-image: none;
		color: var(--cnsa-accent);
	}
}

.cnsa-meter__svg {
	position: absolute;
	inset: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.cnsa-meter__axis {
	stroke: rgba(255, 255, 255, 0.2);
	stroke-width: 1;
	vector-effect: non-scaling-stroke;
}

/*
 * Stops measured off the exported wedge: the hue is the brand gold and the
 * alpha falls from 0.25 at the top of the chart to 0 at the baseline, holding
 * slightly above linear through the middle.
 */
.cnsa-meter__stop--from {
	stop-color: var(--cnsa-accent);
	stop-opacity: var(--cnsa-fill-strength, 0.25);
}

.cnsa-meter__stop--mid {
	stop-color: var(--cnsa-accent);
	stop-opacity: calc(var(--cnsa-fill-strength, 0.25) * 0.55);
}

.cnsa-meter__stop--to {
	stop-color: var(--cnsa-accent);
	stop-opacity: 0;
}

.cnsa-meter__area {
	opacity: 0;
	transition: opacity 0.9s ease 0.2s;
}

.cnsa-meter__track {
	fill: none;
	stroke: rgba(255, 255, 255, 0.18);
	stroke-width: 1.5;
	vector-effect: non-scaling-stroke;
}

/* The travelled part of the trajectory, revealed by dash offset. */
.cnsa-meter__trail {
	fill: none;
	stroke: var(--cnsa-accent);
	stroke-width: 2.5;
	stroke-linecap: round;
	vector-effect: non-scaling-stroke;
	filter: drop-shadow(0 0 6px rgba(238, 181, 63, 0.45));
}

.cnsa-meter.is-visible .cnsa-meter__area {
	opacity: 1;
}

.cnsa-meter__plane {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 3;
	width: var(--cnsa-plane-width, 126px);
	height: auto;
	opacity: 0;
	transform-origin: 50% 50%;
	/*
	 * Quick and with no delay. It used to wait 0.3s and take 0.4s more, and
	 * the line covers nearly half its travel in its first 0.3s — so the line
	 * set off alone and the plane turned up late, which read as the line
	 * outrunning it. The script now holds the flight until this has finished,
	 * so the plane is fully there, on its mark, when the two leave together.
	 */
	transition: opacity var(--cnsa-meter-appear, 200ms) ease;
	will-change: transform;
}

.cnsa-meter.is-visible .cnsa-meter__plane {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.cnsa-meter__area,
	.cnsa-meter__plane {
		transition: none;
	}
}

.cnsa-meter__footer {
	display: flex;
	align-items: flex-end;
	gap: 40px;
}

/*
 * Raised and goal figures in the display face, like every other figure on the
 * page — the match numeral above, the countdown, the giving bar. They were
 * Poppins Bold, which review flagged as the wrong font. Two classes, because
 * these are paragraphs and the kit's `.elementor-kit-9 p` rule is (0,1,1).
 * Bebas Neue has a single weight, so no weight is asked for: asking for 700
 * gets a synthesised bold that smears the counters.
 */
.cnsa-meter .cnsa-meter__value {
	margin: 0;
	font-family: 'Bebas Neue', 'Oswald', sans-serif;
	font-weight: 400;
	font-size: 44px;
	line-height: 1;
	letter-spacing: 0.5px;
	color: #fff;
}

/* Two classes, to outrank the kit's `.elementor-kit-9 a` rule (0,1,1), which
   had been resetting this button to regular weight instead of bold. */
.cnsa-meter .cnsa-meter__cta {
	margin-left: auto;
	padding: 16px 32px;
	background: var(--cnsa-accent);
	color: var(--cnsa-primary);
	font-family: 'Poppins', sans-serif;
	font-weight: 700;
	font-size: 15px;
	letter-spacing: 2px;
	text-decoration: none;
	text-transform: uppercase;
}

/*
 * Phones.
 *
 * The meter's saved sizes — a 195px numeral, a 300px chart — reach a phone
 * untouched, because Elementor writes them on a selector this file cannot
 * outrank; and the old phone rule for the numeral had one class where the
 * rule it meant to override has two, so it never applied either. On staging
 * the numeral ran a third of its width off the panel.
 *
 * So the phone sizes are caps measured against the panel itself: the meter
 * is a size container, and the numeral, the chart and the plane are each held
 * to a share of its width, whatever they are set to. The panel is narrower
 * than the screen — it sits inside the section's padding — which is why this
 * is measured against the panel and not the viewport.
 */
@media (max-width: 767px) {
	.cnsa-meter {
		padding: 24px 20px 24px;
	}

	/*
	 * On a phone the chart is wide and low, as reviewed: it runs to the
	 * panel's edges rather than stopping at its padding, and stands about
	 * under half its width tall rather than two-thirds — the curve reads
	 * as a long climb, not a steep wall. The label and the match figure keep
	 * their line with the words below by moving in by the padding the chart
	 * now reaches across; the figure still sits in the empty corner the curve
	 * leaves at the top left.
	 */
	.cnsa-meter__label--chart {
		left: 20px;
		font-size: 18px;
	}

	.cnsa-meter__chart {
		height: min(var(--cnsa-chart-height, 300px), 160px);
		height: min(var(--cnsa-chart-height, 300px), 45cqw);
		margin: 0 -20px 20px;
	}

	/* "$250,000" in Bebas Neue is about 3.6 times its size across. */
	.cnsa-meter .cnsa-meter__match {
		top: 22px;
		left: 20px;
		font-size: min(var(--cnsa-numeral-size, 195px), 18vw);
		font-size: min(var(--cnsa-numeral-size, 195px), 19cqw);
	}

	.cnsa-meter .cnsa-meter__plane {
		width: min(var(--cnsa-plane-width, 126px), 96px);
		width: min(var(--cnsa-plane-width, 126px), 32cqw);
	}

	.cnsa-meter__footer {
		flex-wrap: wrap;
		gap: 18px 24px;
	}

	.cnsa-meter .cnsa-meter__value {
		font-size: 36px;
	}

	.cnsa-meter .cnsa-meter__cta {
		margin-left: 0;
		width: 100%;
		padding: 16px 20px;
		text-align: center;
	}
}

/* ---------------------------------------------------------------- Countdown */

/*
 * Measurements come from Figma node 2378:6755 (828×203):
 * plate padding 20/28, radius 8, 1px #BBC2CF border; tiles 160×81 with a 1px
 * white-40% border, #233257 fill and an inset 0 4px 24px black-12% shadow;
 * digits Bebas Neue 60px tracked -1.06px; unit labels 20px at 50%; the header
 * 24px #E5A624 tracked 1.4px; 23px screws inset 8px at each corner.
 */
.cnsa-countdown {
	--cnsa-plate-base: rgba(34, 51, 87, 0.25);
	--cnsa-plate-border: #bbc2cf;
	--cnsa-plate-sheen: 0.2;
	--cnsa-digit-bg: #233257;
	--cnsa-digit-border: rgba(255, 255, 255, 0.4);
	--cnsa-digit-color: #ffffff;
	--cnsa-digit-size: 60px;
	--cnsa-tile-width: 160px;
	--cnsa-tile-height: 81px;
	--cnsa-unit-label: #ffffff;
	--cnsa-screw-size: 23px;
	--cnsa-screw-inset: 8px;
	position: relative;
	z-index: 1; /* so a following panel can be pulled up over the plate */
	text-align: center;
}

.cnsa-countdown__panel {
	position: relative;
	max-width: 828px;
	margin: 0 auto;
	padding: 20px 24px 28px;
	border-radius: 8px;
}

/*
 * Glass, not a slab. Sampling the comp, the plate and the tiles read within a
 * point or two of the section behind them — the fills are largely transparent
 * and the plate is carried by its sheen and 1px border. An opaque navy base
 * here made it look like a light grey card sitting on the page.
 */
.cnsa-countdown--plate-css .cnsa-countdown__panel {
	border: 1px solid var(--cnsa-plate-border);
	background-color: var(--cnsa-plate-base);
	background-image:
		linear-gradient(
			96.18deg,
			rgba(255, 255, 255, var(--cnsa-plate-sheen)) 0.79%,
			rgba(174, 174, 174, var(--cnsa-plate-sheen)) 21.05%,
			rgba(110, 110, 110, var(--cnsa-plate-sheen)) 31.6%,
			rgba(255, 255, 255, var(--cnsa-plate-sheen)) 45.7%,
			rgba(174, 174, 174, var(--cnsa-plate-sheen)) 84.48%,
			rgba(110, 110, 110, var(--cnsa-plate-sheen)) 92.26%,
			rgba(255, 255, 255, var(--cnsa-plate-sheen)) 102.91%
		);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
}

.cnsa-countdown--plate-image .cnsa-countdown__panel {
	border: 1px solid var(--cnsa-plate-border);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center;
}

.cnsa-countdown--plate-none .cnsa-countdown__panel {
	padding-left: 0;
	padding-right: 0;
}

/* Screws: one flow-free layer, each corner placed by nth-child. */
.cnsa-countdown__screws {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.cnsa-countdown__screw {
	position: absolute;
	width: var(--cnsa-screw-size);
	height: var(--cnsa-screw-size);
	border-radius: 50%;
	mix-blend-mode: hard-light;
}

/*
 * Screw → Icon or SVG: a library icon or an uploaded SVG, in the screw
 * colour. It is a glyph, not a photograph of metal, so it is drawn plainly
 * rather than blended into the plate. Screw turn rotates any of the three.
 */
.cnsa-countdown .cnsa-countdown__screw {
	rotate: var(--cnsa-screw-turn, 0deg);
}

.cnsa-countdown .cnsa-countdown__screw--icon {
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 0;
	mix-blend-mode: normal;
	color: var(--cnsa-screw-color, #8b94a3);
	font-size: var(--cnsa-screw-size);
	line-height: 1;
}

.cnsa-countdown .cnsa-countdown__screw--icon svg {
	display: block;
	width: 100%;
	height: 100%;
	fill: currentColor;
}

.cnsa-countdown .cnsa-countdown__screw--icon i {
	font-size: var(--cnsa-screw-size);
	line-height: 1;
}

.cnsa-countdown__screw:nth-child(1) { top: var(--cnsa-screw-inset); left: var(--cnsa-screw-inset); }
.cnsa-countdown__screw:nth-child(2) { top: var(--cnsa-screw-inset); right: var(--cnsa-screw-inset); }
.cnsa-countdown__screw:nth-child(3) { bottom: var(--cnsa-screw-inset); left: var(--cnsa-screw-inset); }
.cnsa-countdown__screw:nth-child(4) { bottom: var(--cnsa-screw-inset); right: var(--cnsa-screw-inset); }

/* Stand-in screw for when no image is supplied. */
.cnsa-countdown__screw--drawn {
	background:
		linear-gradient(145deg, #e8ecf2 0%, #9aa5b4 45%, #6f7a8b 100%);
	box-shadow:
		inset 0 1px 1px rgba(255, 255, 255, 0.8),
		inset 0 -1px 2px rgba(0, 0, 0, 0.45),
		0 1px 2px rgba(0, 0, 0, 0.35);
}

.cnsa-countdown__screw--drawn::before,
.cnsa-countdown__screw--drawn::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	background: rgba(40, 48, 60, 0.75);
	transform: translate(-50%, -50%);
}

.cnsa-countdown__screw--drawn::before {
	width: 58%;
	height: 2px;
}

.cnsa-countdown__screw--drawn::after {
	width: 2px;
	height: 58%;
}

.cnsa-countdown .cnsa-countdown__header {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 0 0 20px;
	font-family: 'Bebas Neue', sans-serif;
	font-weight: 700;
	font-size: 24px;
	line-height: 24px;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var(--cnsa-accent);
}

.cnsa-countdown__icon {
	flex: none;
	color: var(--cnsa-accent);
}

/*
 * One row at every width. Each unit asks for its tile width and gives way
 * when the row is narrower than three of them — on a tablet, three of
 * staging's 248px steel tiles did not fit, and the minutes wrapped onto a
 * line of their own.
 */
.cnsa-countdown__units {
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-start;
	justify-content: center;
	gap: 16px;
}

.cnsa-countdown__unit {
	display: flex;
	flex: 0 1 var(--cnsa-tile-width);
	flex-direction: column;
	align-items: center;
	min-width: 0;
	max-width: 100%;
}

/*
 * Height is set outright rather than left to padding plus a line box: the
 * comp's tile is 81px with the 60px digits optically centred, and a fixed
 * height keeps every tile identical whatever the digit count.
 */
.cnsa-countdown__tile {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: var(--cnsa-tile-height);
	padding: 0 1px;
	border: 1px solid var(--cnsa-digit-border);
	border-radius: 8px;
	background: var(--cnsa-digit-bg);
	box-shadow: inset 0 4px 24px 1px rgba(0, 0, 0, 0.12);
}

.cnsa-countdown .cnsa-countdown__digits {
	display: block;
	font-family: 'Bebas Neue', sans-serif;
	font-weight: 700;
	font-size: var(--cnsa-digit-size);
	line-height: 1;
	letter-spacing: -1.06px;
	text-align: center;
	color: var(--cnsa-digit-color);
	font-variant-numeric: tabular-nums;
	/*
	 * Centred on the figures themselves. A line box holds the font's whole
	 * ascent and descent, and the space above the figures is never the same
	 * as the space below them — how uneven depends on the face — so a tile
	 * that centres the line box leaves the digits sitting high or low in it.
	 * Trimmed to the top of the capitals and the baseline, the box is the
	 * figures, and the tile's centring lands on them in any font. Browsers
	 * without text-box keep the line box, which for Bebas Neue is within a
	 * pixel of centre.
	 */
	text-box: trim-both cap alphabetic;
}

.cnsa-countdown .cnsa-countdown__digit {
	text-box: trim-both cap alphabetic;
}

/* The comp's pre-launch state: placeholder zeros at 10%. */
.cnsa-countdown.is-dimmed .cnsa-countdown__digits {
	opacity: 0.1;
}

.cnsa-countdown__unit-label {
	margin-top: var(--cnsa-unit-space, 10px);
	font-family: 'Bebas Neue', sans-serif;
	font-weight: 700;
	font-size: 20px;
	line-height: 20px;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: var(--cnsa-unit-label);
	/* Style → Digits → Unit label strength; half strength as drawn. */
	opacity: var(--cnsa-unit-opacity, 0.5);
}

.cnsa-countdown__sep {
	align-self: flex-start;
	margin-top: calc(var(--cnsa-tile-height) / 2 - 18px);
	font-family: 'Inter', 'Poppins', sans-serif;
	font-weight: 800;
	font-size: 30px;
	line-height: 36px;
	color: #fff;
	opacity: 0.5;
}

.cnsa-countdown__finished {
	margin: 0;
	font-family: 'Poppins', sans-serif;
	font-size: 18px;
	color: var(--cnsa-accent);
}

/*
 * Phones: the three units stay on one row and share it.
 *
 * The tokens above are only a starting point here. A page's saved sizes are
 * written by Elementor as `--cnsa-tile-width: 170px` on a selector that
 * outranks anything in this file, so on staging these phone values never
 * applied — the tiles kept their desktop width, wrapped one per line, and the
 * colons were left hanging at the right of each row. So the rules that use
 * the sizes cap them against the screen instead: whatever a tile is set to,
 * on a phone it gets a third of the row at most, and the digits and height
 * follow from the width available rather than from the desktop numbers.
 */
@media (max-width: 767px) {
	.cnsa-countdown {
		--cnsa-tile-width: 96px;
		--cnsa-tile-height: 60px;
		--cnsa-digit-size: 36px;
		--cnsa-screw-size: 16px;
		--cnsa-tile-h-live: min(var(--cnsa-tile-height), 17vw);
	}

	.cnsa-countdown__panel {
		padding: 16px 12px 20px;
	}

	.cnsa-countdown__units {
		flex-wrap: nowrap;
		gap: 6px;
	}

	.cnsa-countdown__unit {
		flex: 1 1 0;
		max-width: var(--cnsa-tile-width);
	}

	.cnsa-countdown__tile {
		min-height: var(--cnsa-tile-h-live);
	}

	.cnsa-countdown .cnsa-countdown__digits {
		font-size: min(var(--cnsa-digit-size), 10vw);
		letter-spacing: -0.5px;
	}

	.cnsa-countdown .cnsa-countdown__header {
		font-size: 18px;
		letter-spacing: 1px;
	}

	.cnsa-countdown__sep {
		flex: none;
		margin-top: calc(var(--cnsa-tile-h-live) / 2 - 14px);
		font-size: 20px;
		line-height: 28px;
	}

	.cnsa-countdown__unit-label {
		margin-top: var(--cnsa-unit-space, 8px);
		font-size: 14px;
		line-height: 16px;
	}
}

/* Screen-reader-only text, in case the theme does not provide it. */
.cnsa-give .screen-reader-text,
.cnsa-meter .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ------------------------------------------------------------ Scroll story */

/*
 * A pinned stage inside a taller track. The track supplies the scroll
 * distance; the stage sticks to the viewport and its steps cross-fade as the
 * reader moves through. `--cnsa-stacked` is the signal the script reads to
 * know the layout has fallen back — it is set by the media query below rather
 * than duplicated as a width check in JavaScript.
 */
.cnsa-story {
	--cnsa-accent: #eeb53f;
	--cnsa-story-text: #ffffff;
	--cnsa-story-scrim: 0.12;
	/*
	 * Measured off Figma 2435:10170, not estimated: the heading is Bebas Neue
	 * 107.5/107.5 in a 720px column, the lead word 382.6px, the lines beside it
	 * 95.5px with a 38.2px gap, the pull line Poppins Bold Italic 32px and body
	 * 16/25.6. The first pass was running at roughly half these sizes.
	 */
	--cnsa-story-heading: 107.5px;
	--cnsa-story-lead: 383px;
	--cnsa-story-lead-lines: 95.5px;
	--cnsa-story-pull: 32px;
	--cnsa-story-body: 16px;
	--cnsa-story-copy-max: 720px;
	--cnsa-story-width: 1200px;
	--cnsa-stage-height: 100vh;
	--cnsa-track-height: 100vh;
	--cnsa-copy-alpha: 1;
	--cnsa-open-zoom: 0.4;
	--cnsa-open-to: 30%;
	--cnsa-rise: 24px;
	--cnsa-copy-rise: 0px;
	--cnsa-stage-bg: #223357;
	--cnsa-bg-fit: cover;
	--cnsa-bg-zoom: 1;
	--cnsa-stacked: 0;
	position: relative;
}

.cnsa-story--pinned .cnsa-story__track {
	position: relative;
	height: var(--cnsa-track-height);
	background: var(--cnsa-stage-bg);
}

.cnsa-story--pinned .cnsa-story__stage {
	position: sticky;
	top: 0;
	height: var(--cnsa-stage-height);
	overflow: hidden;
	/* Never let the track show through as bare page behind a shorter step. */
	background: var(--cnsa-stage-bg);
}

/*
 * Fallback for when an ancestor disables native sticky — a container set to
 * Overflow: Hidden does it, which is one click away in Elementor and common.
 *
 * The previous fallback positioned the stage from the scroll handler. It could
 * never be smooth, and measurement says how badly: driven by real wheel events,
 * the stage slipped from the top of the viewport on half of all frames, by up
 * to 51px. Frame timing stayed at a clean 60fps throughout, which is why
 * looking at it never found the cause — the stage was sliding and snapping
 * back, not stuttering.
 *
 * `position: fixed` is pinned by the browser, so it cannot lag the scroll at
 * all, and unlike sticky it survives an ancestor that clips overflow. The
 * script's only job becomes flipping between three states at the ends of the
 * track, which happens twice per visit rather than sixty times a second.
 */
.cnsa-story.is-fixed-pin .cnsa-story__stage {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
}

/* Before the track reaches the top of the viewport, and after it has passed. */
.cnsa-story.is-fixed-pin.is-before .cnsa-story__stage {
	position: absolute;
	top: 0;
}

.cnsa-story.is-fixed-pin.is-after .cnsa-story__stage {
	position: absolute;
	top: auto;
	bottom: 0;
}

.cnsa-story.is-fixed-pin .cnsa-story__track {
	position: relative;
}

/*
 * The sentinels the observer watches: 1px markers, never seen.
 *
 * Centred rather than at the left edge, and that is not cosmetic. The track is
 * full-bleed, so its left edge sits outside an ancestor that clips overflow —
 * which is precisely the ancestor that sent us down this path in the first
 * place. A sentinel out there is clipped away, the observer treats it as never
 * intersecting, no crossing is ever reported, and the stage stays stuck in its
 * starting state. Centred, it is inside any container worth the name.
 */
.cnsa-story__edge {
	position: absolute;
	left: 50%;
	width: 1px;
	height: 1px;
	pointer-events: none;
	opacity: 0;
}

.cnsa-story__edge--top {
	top: 0;
}

.cnsa-story__edge--bottom {
	bottom: 0;
}

/*
 * No transition here on purpose: on the fallback path opacity is recomputed
 * every frame from the scroll position, and a CSS transition would fight that
 * and keep animating after the reader stops.
 */
.cnsa-story__step {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	opacity: 0;
	visibility: hidden;
}

.cnsa-story__step.is-active {
	opacity: 1;
	visibility: visible;
}

/*
 * The preferred path: hand the whole cross-fade to the browser.
 *
 * A scroll-driven animation runs on the compositor. No scroll handler, no
 * per-frame style writes, nothing on the main thread at all — which is as
 * close as the platform gets to "while scrolling nothing is happening, only
 * the contents change". The timeline is the track's own progress through the
 * viewport, and `contain` is exactly the stretch during which the track fills
 * the screen, which is the stretch the stage is pinned for.
 *
 * Each step carries its own window as two custom properties, worked out
 * server-side from its position in the sequence, so nothing here has to do
 * arithmetic on a count it cannot see.
 *
 * Chrome and Edge have had this since 115, Safari since 26. Firefox has not
 * shipped it, so the script below keeps the old per-frame path for it.
 */
@supports (animation-timeline: view()) {
	.cnsa-story--driven .cnsa-story__track {
		view-timeline: --cnsa-story block;
	}

	.cnsa-story--driven .cnsa-story__step {
		opacity: 0;
		visibility: visible;
		animation: cnsa-story-fade linear both;
		animation-timeline: --cnsa-story;
		animation-range: contain var(--cnsa-from) contain var(--cnsa-to);
		/* Each scene is its own compositor layer, so the fade never touches
		   layout or paint. */
		will-change: opacity;
	}

	/* The first scene has nothing to hand over from, so it simply starts on. */
	.cnsa-story--driven .cnsa-story__step--first {
		animation: none;
		opacity: 1;
	}
}

/*
 * Fade in and stay. Nothing fades out: the next step paints over this one, so
 * the hand-over is a cross-fade without a second animation to keep in step
 * with the first. Scrolling back up runs the same keyframe in reverse, which
 * is why the sequence is correct in both directions without any extra work.
 */
@keyframes cnsa-story-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}

/*
 * The copy arrives after its scene. Same timeline, a window shifted later, so
 * this is also compositor work rather than another value written per frame.
 */
@supports (animation-timeline: view()) {
	.cnsa-story--driven .cnsa-story__content,
	.cnsa-story--driven .cnsa-story__subject {
		animation: cnsa-story-copy linear both;
		animation-timeline: --cnsa-story;
		animation-range: contain var(--cnsa-copy-from) contain var(--cnsa-copy-to);
		will-change: opacity;
	}

	.cnsa-story--driven .cnsa-story__content {
		animation-name: cnsa-story-copy, cnsa-story-rise;
		animation-timing-function: linear, ease-out;
		animation-fill-mode: both, both;
		animation-timeline: --cnsa-story, --cnsa-story;
		animation-range:
			contain var(--cnsa-copy-from) contain var(--cnsa-copy-to),
			contain var(--cnsa-copy-from) contain var(--cnsa-copy-to);
		will-change: opacity, translate;
	}

	.cnsa-story--driven .cnsa-story__step--first .cnsa-story__content {
		animation-name: cnsa-story-copy-first, cnsa-story-rise;
	}

	.cnsa-story--driven .cnsa-story__step--last .cnsa-story__content {
		animation-name: cnsa-story-copy-last, cnsa-story-rise;
	}

	/* The section opens on a finished picture: the first copy is already
	   there before a single pixel has been scrolled. */
	.cnsa-story--driven .cnsa-story__step--first .cnsa-story__content,
	.cnsa-story--driven .cnsa-story__step--first .cnsa-story__subject {
		animation-name: cnsa-story-copy-first;
	}

	.cnsa-story--driven .cnsa-story__step--last .cnsa-story__content,
	.cnsa-story--driven .cnsa-story__step--last .cnsa-story__subject {
		animation-name: cnsa-story-copy-last;
	}

	/* One step is not a sequence: nothing to hand over to or from. */
	.cnsa-story--driven .cnsa-story__step--first.cnsa-story__step--last,
	.cnsa-story--driven .cnsa-story__step--first.cnsa-story__step--last .cnsa-story__content,
	.cnsa-story--driven .cnsa-story__step--first.cnsa-story__step--last .cnsa-story__subject {
		animation: none;
		opacity: 1;
	}
}

/*
 * In after its own scene lands, held while the scene sits still, out again as
 * the next scene arrives — so two headings are never legible at once during a
 * cross-fade.
 */
@keyframes cnsa-story-copy {
	0% { opacity: 0; }
	30%, 70% { opacity: 1; }
	100% { opacity: 0; }
}

/*
 * The settle, as a second animation rather than part of the fade.
 *
 * It rides the same window, but only the copy gets it: a cut-out is part of
 * the scene, and sliding it would both fight the placement offsets it was
 * given and read as the picture coming loose. `translate` is its own property,
 * so this never collides with a `transform` the layout is already using.
 */
@keyframes cnsa-story-rise {
	0% { translate: 0 var(--cnsa-rise); }
	30%, 100% { translate: 0 0; }
}

/* Nothing precedes the first scene, so its copy is there from the start. */
@keyframes cnsa-story-copy-first {
	0%, 70% { opacity: 1; }
	100% { opacity: 0; }
}

/* Nothing follows the last scene, so its copy holds to the end. */
@keyframes cnsa-story-copy-last {
	0% { opacity: 0; }
	30%, 100% { opacity: 1; }
}

/*
 * Cut-outs stay fully solid (Behaviour). The cut-out arrives with its own
 * copy — never before it — but quicker than the words, so it is whole by the
 * time they can be read, and it holds at full strength until the copy leaves.
 * It is not tied to the scene: over a filmstrip, or a step that keeps the
 * previous background, the scene does not change, and the cut-out showed up
 * before its words.
 */
.cnsa-story--subject-solid .cnsa-story__subject {
	opacity: var(--cnsa-subject-alpha, 1);
}

@supports (animation-timeline: view()) {
	.cnsa-story--driven.cnsa-story--subject-solid:not(.is-stacked) .cnsa-story__step .cnsa-story__subject {
		animation-name: cnsa-story-subject;
	}

	.cnsa-story--driven.cnsa-story--subject-solid:not(.is-stacked) .cnsa-story__step--first .cnsa-story__subject {
		animation-name: cnsa-story-copy-first;
	}

	.cnsa-story--driven.cnsa-story--subject-solid:not(.is-stacked) .cnsa-story__step--last .cnsa-story__subject {
		animation-name: cnsa-story-subject-last;
	}

	.cnsa-story--driven.cnsa-story--subject-solid:not(.is-stacked) .cnsa-story__step--first.cnsa-story__step--last .cnsa-story__subject {
		animation: none;
		opacity: 1;
	}
}

@keyframes cnsa-story-subject {
	0% { opacity: 0; }
	18%, 70% { opacity: 1; }
	100% { opacity: 0; }
}

@keyframes cnsa-story-subject-last {
	0% { opacity: 0; }
	18%, 100% { opacity: 1; }
}

/*
 * Three states where nothing may be timed against anything: a reader who has
 * asked for less motion, a phone where the sequence has fallen back to
 * stacking, and the moment before the script has run.
 *
 * The script takes the driven class off in the first two, and that would be
 * enough if opacity were only ever declared. It is not — these are animations
 * with a fill, and a filled animation beats any declared value, so the
 * stylesheet has to say it as well. Without this, a script that is slow,
 * deferred or blocked leaves a phone reader looking at a blank section.
 */
@supports (animation-timeline: view()) {
	.cnsa-story--driven.is-stacked .cnsa-story__step,
	.cnsa-story--driven.is-stacked .cnsa-story__content {
		animation: none;
		opacity: 1;
	}

	/* The subject keeps whatever opacity its own rules give it — on a phone
	   that is a deliberate 0.55 behind the copy — so only the timing goes. */
	.cnsa-story--driven.is-stacked .cnsa-story__subject {
		animation: none;
	}

	@media (prefers-reduced-motion: reduce) {
		.cnsa-story--driven .cnsa-story__step,
		.cnsa-story--driven .cnsa-story__content {
			animation: none;
			opacity: 1;
		}

		.cnsa-story--driven .cnsa-story__subject {
			animation: none;
		}
	}

	@media (max-width: 767px) {
		.cnsa-story--driven.cnsa-story--stack-on-mobile .cnsa-story__step,
		.cnsa-story--driven.cnsa-story--stack-on-mobile .cnsa-story__content {
			animation: none;
			opacity: 1;
		}

		.cnsa-story--driven.cnsa-story--stack-on-mobile .cnsa-story__subject {
			animation: none;
		}
	}
}

/* ---------------------------------------------------------------- filmstrip
 *
 * One tall photograph the stage travels down, instead of a set of separate
 * images handing over to each other. It is what the comp actually is — a
 * single continuous scene, sky at the top and the river at the bottom — and
 * it is the cheaper of the two by a wide margin: one element, one transform,
 * no cross-fades to co-ordinate at all.
 */
.cnsa-story__strip {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.cnsa-story__strip-img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
	display: block;
	/*
	 * If the picture is not actually taller than the stage there is nothing to
	 * travel, and the calc below would push it downwards and expose bare page.
	 * Cover-cropping to the stage height makes that case hold still instead.
	 */
	min-height: var(--cnsa-stage-height);
	object-fit: cover;
	will-change: transform;
}

.cnsa-story__strip-img--left { object-position: left top; }
.cnsa-story__strip-img--right { object-position: right top; }
.cnsa-story__strip-img--center { object-position: center top; }

.cnsa-story__scrim--strip {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

@supports (animation-timeline: view()) {
	.cnsa-story--driven .cnsa-story__strip-img {
		animation: cnsa-story-pan linear both;
		animation-timeline: --cnsa-story;
		animation-range: contain 0% contain 100%;
	}
}

/*
 * The whole travel, in one declaration and with nothing measured in script.
 *
 * The percentage in a transform resolves against the element's own height, so
 * `-100%` is the bottom of the picture arriving at the top of the stage, and
 * adding the stage height back brings its bottom edge to rest flush with the
 * bottom of the stage. Exact at every viewport width, and correct the moment
 * the image loads without waiting for a measurement.
 */
@keyframes cnsa-story-pan {
	from { transform: translateY(0); }
	to { transform: translateY(calc(-100% + var(--cnsa-stage-height))); }
}

/*
 * In this mode the steps are captions over one continuous picture, not scenes
 * in their own right, so nothing fades the scene layer — only the copy keeps
 * its beat.
 */
.cnsa-story--filmstrip .cnsa-story__step {
	opacity: 1;
	visibility: visible;
}

@supports (animation-timeline: view()) {
	.cnsa-story--driven.cnsa-story--filmstrip .cnsa-story__step {
		animation: none;
		opacity: 1;
	}
}

/* Stacked: the picture becomes an ordinary band at the top rather than a
   three-thousand-pixel image shoved above the copy. */
.cnsa-story.is-stacked .cnsa-story__strip,
.cnsa-story--stacked .cnsa-story__strip {
	position: relative;
	height: 56vh;
}

.cnsa-story.is-stacked .cnsa-story__strip-img,
.cnsa-story--stacked .cnsa-story__strip-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	min-height: 0;
	animation: none;
	transform: none;
}

/*
 * The opening.
 *
 * The section arrives rather than cutting in: the scene starts larger than the
 * stage and settles to its true size across the first step's beat, handing over
 * to the second step as it lands. Since 0.33 this pull back is the default, and
 * it pivots on the middle of the screen, like a camera drawing back, rather
 * than shrinking up towards the top edge. Scaling up about any point inside the
 * picture only ever covers more of the stage, so no edge can show.
 *
 * `scale` is its own property, applied before `transform`, so this composes with
 * the pan on the same element without either having to know about the other.
 */
/* Pull back: the picture starts oversized and settles to true size. */
@keyframes cnsa-story-zoom {
	from { scale: calc(1 + var(--cnsa-open-zoom)); }
	to { scale: 1; }
}

/*
 * Push in: the opening picture grows as the reader scrolls, peaks as the
 * second step arrives, and is released behind it.
 *
 * It has to come back to true size. The first scene is not a separate picture
 * in filmstrip mode — it is the top of the same tall image the rest of the
 * section pans down — so a zoom left running would magnify every shot after
 * it, and change the distance the pan has to travel. Peaking at the hand-over
 * and releasing while the next scene takes the screen puts the move exactly
 * where it is wanted and nowhere else.
 */
@keyframes cnsa-story-zoom-in {
	0% { scale: 1; }
	70% { scale: calc(1 + var(--cnsa-open-zoom)); }
	100% { scale: 1; }
}

@supports (animation-timeline: view()) {
	.cnsa-story--driven .cnsa-story__strip-img,
	.cnsa-story--driven .cnsa-story__step--first .cnsa-story__bg {
		/*
		 * Both moves pivot on the middle of what is on screen: pulling back
		 * reads as the camera drawing away, pushing in as moving forward into
		 * the picture. The strip's own override below explains why its middle
		 * is half the stage height and not half the picture.
		 */
		transform-origin: center center;
		animation-name: cnsa-story-pan, cnsa-story-zoom;
		animation-timing-function: linear, ease-out;
		animation-fill-mode: both, both;
		animation-timeline: --cnsa-story, --cnsa-story;
		animation-range: contain 0% contain 100%, contain 0% contain var(--cnsa-open-to);
	}

	/*
	 * A step background is not panned, only zoomed — naming the pan for it as
	 * well would translate it by the strip's travel, which it does not have.
	 */
	.cnsa-story--driven .cnsa-story__strip-img {
		transform-origin: 50% calc(var(--cnsa-stage-height, 100vh) / 2);
	}

	.cnsa-story--driven .cnsa-story__step--first .cnsa-story__bg {
		animation-name: cnsa-story-zoom;
		animation-timing-function: ease-out;
		animation-fill-mode: both;
		animation-timeline: --cnsa-story;
		animation-range: contain 0% contain var(--cnsa-open-to);
	}

	/*
	 * Pushing in has to pivot on the middle of what is on screen, which for
	 * the strip is not the middle of the picture. The strip is several screens
	 * tall, so its own centre is far below the fold — at 1440px wide, 1,320px
	 * down a 900px screen — and scaling about a point that far away does not
	 * read as a zoom at all: the sky simply slides up and off the top, like a
	 * sudden fast scroll. The origin is set in the picture's own untransformed
	 * box, and the pan is applied before the scale, so half the stage height
	 * is the middle of the screen at every point of the pan.
	 */
	.cnsa-story--open-in.cnsa-story--driven .cnsa-story__strip-img {
		transform-origin: 50% calc(var(--cnsa-stage-height, 100vh) / 2);
		animation-name: cnsa-story-pan, cnsa-story-zoom-in;
		animation-timing-function: linear, ease-in-out;
	}

	.cnsa-story--open-in.cnsa-story--driven .cnsa-story__step--first .cnsa-story__bg {
		transform-origin: center center;
		animation-name: cnsa-story-zoom-in;
		animation-timing-function: ease-in-out;
	}
}

/* The same two moves on the per-frame path, where the script supplies the
   numbers rather than the timeline. */
.cnsa-story.is-script .cnsa-story__content {
	translate: 0 var(--cnsa-copy-rise);
}

.cnsa-story.is-script .cnsa-story__strip-img,
.cnsa-story.is-script .cnsa-story__step--first .cnsa-story__bg {
	transform-origin: center center;
	scale: var(--cnsa-open-scale, 1);
}

.cnsa-story.is-script .cnsa-story__strip-img {
	transform-origin: 50% calc(var(--cnsa-stage-height, 100vh) / 2);
}

.cnsa-story--open-in.is-script .cnsa-story__step--first .cnsa-story__bg {
	transform-origin: center center;
}

/* The middle of the screen, not of the picture: see the driven rule above. */
.cnsa-story--open-in.is-script .cnsa-story__strip-img {
	transform-origin: 50% calc(var(--cnsa-stage-height, 100vh) / 2);
}

/* A step that keeps the previous scene has no background of its own, so the
   one beneath it must stay painted. */
.cnsa-story__step.is-holding {
	background: none;
}

.cnsa-story__bg {
	position: absolute;
	inset: 0;
	background-size: var(--cnsa-bg-fit);
	background-repeat: no-repeat;
	/*
	 * Zoom defaults to 1. The old 1.04 overscale cropped the photograph
	 * further on every screen for the sake of a little parallax headroom,
	 * which read as "too zoomed in" once the widget went full width.
	 *
	 * Static, and that is the whole idea: the comp reads as one continuous
	 * scene, so within a beat nothing moves at all and only the contents
	 * change. Nothing here transitions, so nothing can be caught mid-flight
	 * when the reader stops scrolling.
	 */
	transform: scale(var(--cnsa-bg-zoom));
}

.cnsa-story__scrim {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, var(--cnsa-story-scrim));
}

/*
 * The cut-out sits in its own frame, not against the stage.
 *
 * The stage is full-bleed, so a cut-out pinned to its left edge drifts further
 * from the headline on every wider monitor: the copy stops at the content
 * column and the picture keeps going. The frame is that same column, centred,
 * so "left" means the left of the column the copy sits in and the two hold
 * their relationship at any width. It also makes a percentage width mean
 * something — a share of the column rather than a share of the monitor.
 */
.cnsa-story__subject-frame {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 100%;
	max-width: var(--cnsa-story-width);
	transform: translateX(-50%);
	/* It spans the stage, and the copy sits over it — never let it swallow a
	   click meant for a link in the copy. */
	pointer-events: none;
}

/* For a cut-out meant to bleed off the edge of the screen instead. */
.cnsa-story__subject-frame--stage {
	max-width: none;
}

/*
 * Clipped to its own frame, so a cut-out nudged past the edge of the column
 * ends at that edge instead of carrying on across the rest of the screen. It
 * is what makes the offsets usable: a subject can be pushed half out of frame
 * on purpose and still finish cleanly where the copy does.
 *
 * Safe to clip here, and worth saying why. This element holds nothing but the
 * cut-out — the track that carries the scroll timeline is far above it, and
 * the stage is its sibling's ancestor, not its descendant. So the scroll
 * container this creates has nothing in it whose pinning or timing could be
 * measured against it.
 */
.cnsa-story__subject-frame.is-clipped {
	overflow: hidden;
}

.cnsa-story__subject {
	/*
	 * Two offsets from whichever corner was anchored, rather than absolute
	 * coordinates: anchor bottom-right and it stays bottom-right as the screen
	 * changes, with the nudge keeping its meaning. `base` carries the half-step
	 * a centred anchor needs, so both offsets live in one transform and the
	 * nine anchor combinations need no special cases.
	 */
	--cnsa-sub-x: 0px;
	--cnsa-sub-y: 0px;
	--cnsa-sub-base-x: 0px;
	--cnsa-sub-base-y: 0px;
	position: absolute;
	width: 58%;
	height: auto;
	object-fit: contain;
	transform: translate(
		calc(var(--cnsa-sub-base-x) + var(--cnsa-sub-x) * var(--cnsa-sub-k, 1)),
		calc(var(--cnsa-sub-base-y) - var(--cnsa-sub-y) * var(--cnsa-sub-k, 1))
	);
}

.cnsa-story__subject--left { left: 0; }
.cnsa-story__subject--right { right: 0; }
.cnsa-story__subject--center { left: 50%; --cnsa-sub-base-x: -50%; }

.cnsa-story__subject--vtop { top: 0; }
.cnsa-story__subject--vbottom { bottom: 0; }
.cnsa-story__subject--vmiddle { top: 50%; --cnsa-sub-base-y: -50%; }

/*
 * Copy lined up with a cut-out sits a little below the cut-out's middle by
 * default: a floatplane's weight is in its floats, and centring on the whole
 * drawing, tail fin included, left the paragraph looking high. Steps →
 * Move the copy down replaces the 48px.
 */
.cnsa-story__step[data-copy-follow] .cnsa-story__content {
	top: calc(var(--cnsa-copy-align, 0px) + var(--cnsa-copy-nudge, 48px));
}

/* The copy arrives after its scene — alpha is ramped later than the step's. */
.cnsa-story__content {
	position: relative;
	/*
	 * Lines the copy up with the cut-out beside it (Steps → Line the copy up
	 * with the cut-out). The script measures both and writes the difference;
	 * "top" rather than a transform or translate, because the copy's settle
	 * already animates translate and the two must not fight.
	 */
	top: calc(var(--cnsa-copy-align, 0px) + var(--cnsa-copy-nudge, 0px));
	display: flex;
	align-items: baseline;
	gap: 24px;
	width: 100%;
	max-width: var(--cnsa-story-width);
	margin: 0 auto;
	padding: 0 24px;
	opacity: var(--cnsa-copy-alpha);
}

.cnsa-story__subject {
	/*
	 * The cut-out belongs to its step and to no other.
	 *
	 * This used to floor at 0.35, so the cut-out never fully left: it sat at a
	 * third of full strength over every other step in the section, which reads
	 * exactly like a ghost of the wrong picture bleeding through the right one.
	 * It tracks its step's copy the whole way now — in with the heading it
	 * belongs to, and completely gone the rest of the time.
	 */
	opacity: var(--cnsa-copy-alpha);
}

.cnsa-story__copy {
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-width: var(--cnsa-story-copy-max);
}

.cnsa-story .cnsa-story__heading {
	margin: 0;
	font-family: 'Bebas Neue', sans-serif;
	font-size: var(--cnsa-story-heading);
	line-height: 1;
	text-transform: uppercase;
	color: var(--cnsa-story-text);
}

.cnsa-story__line {
	display: block;
}

.cnsa-story__accent {
	color: var(--cnsa-accent);
}

.cnsa-story .cnsa-story__body {
	margin: 0;
	font-family: 'Poppins', sans-serif;
	font-size: var(--cnsa-story-body);
	line-height: 1.6;
	color: var(--cnsa-story-text);
	max-width: 468px;
}

.cnsa-story .cnsa-story__pull {
	margin: 0;
	font-family: 'Poppins', sans-serif;
	font-weight: 700;
	font-style: italic;
	font-size: var(--cnsa-story-pull);
	line-height: 1;
	color: var(--cnsa-accent);
}

.cnsa-story .cnsa-story__lead {
	margin: 0;
	font-family: 'Bebas Neue', sans-serif;
	/* 383px is the comp's size at 1440px wide; below that it scales with the
	   stage rather than crowding out the lines beside it. */
	font-size: min(var(--cnsa-story-lead), 26.6vw);
	line-height: 1;
	text-transform: uppercase;
	color: var(--cnsa-accent);
}

/* Layouts, one per panel in the comp. */
.cnsa-story__step--copy-right .cnsa-story__content { justify-content: flex-end; }
.cnsa-story__step--copy-right .cnsa-story__copy { text-align: left; }

/*
 * Steps → Move the body text right, or — in "Copy right" with a cut-out —
 * the distance the script finds keeps the paragraphs clear of the picture.
 * The heading does not move.
 *
 * Moved by relative position, not margin. The copy column is pinned to the
 * right of the stage, so a margin widened the column leftwards instead and
 * the paragraph's right edge — and so the paragraph — stayed where it was.
 * Relative position leaves the column alone; the paragraph moves right and
 * narrows only as far as it must to keep inside the column's right edge.
 * Desktops only: below 1024px the copy is at the top, the picture below it.
 */
.cnsa-story .cnsa-story__body,
.cnsa-story .cnsa-story__pull {
	--cnsa-body-x: var(--cnsa-body-shift, var(--cnsa-body-auto, 0px));
	position: relative;
	left: var(--cnsa-body-x);
}

.cnsa-story .cnsa-story__body {
	max-width: min(468px, calc(100% - var(--cnsa-body-x)));
}

.cnsa-story .cnsa-story__pull {
	max-width: calc(100% - var(--cnsa-body-x));
}

@media (max-width: 1024px) {
	.cnsa-story .cnsa-story__body,
	.cnsa-story .cnsa-story__pull {
		--cnsa-body-x: 0px;
	}
}

.cnsa-story__step--lead-word .cnsa-story__content { justify-content: center; align-items: flex-start; gap: 38.2px; }
.cnsa-story__step--lead-word .cnsa-story__copy { gap: 0; }
.cnsa-story__step--lead-word .cnsa-story__heading {
	/*
	 * Capped against the viewport as well as the author's size. The lines are
	 * set to stay on one row beside the lead word, so on a narrower screen —
	 * or anywhere Bebas Neue has not loaded and a much wider fallback face is
	 * standing in — the longest line would otherwise run off the stage and be
	 * clipped. The cap equals the comp's 95.5px at the 1440px it was drawn at.
	 */
	font-size: min(var(--cnsa-story-lead-lines), 6.6vw);
	line-height: 1;
}

/*
 * The comp keeps each line on one row beside the lead word, and at the comp's
 * sizes in Bebas Neue they do fit. `white-space: nowrap` used to enforce that,
 * but it turns a line that does not fit into one that runs off the stage and
 * is clipped — which is exactly what happens for the moment before a webfont
 * loads, or permanently if it fails to. Letting a line that cannot fit wrap
 * instead costs nothing when it does fit, and degrades to something readable
 * when it does not.
 */
.cnsa-story__step--lead-word .cnsa-story__line {
	text-wrap: nowrap;
	overflow-wrap: break-word;
}

@supports not (text-wrap: nowrap) {
	.cnsa-story__step--lead-word .cnsa-story__line {
		white-space: normal;
	}
}

.cnsa-story__step--split .cnsa-story__content { justify-content: flex-end; align-items: center; }
.cnsa-story__step--split .cnsa-story__copy { max-width: 420px; }

.cnsa-story__step--center .cnsa-story__content { justify-content: center; text-align: center; }
.cnsa-story__step--center .cnsa-story__copy { align-items: center; text-align: center; }

/*
 * The step dots are buttons: each scrolls to its step. The visible dot is
 * 8px, but the button around it is 28 by 18, so it can be hit with a finger
 * or a mouse without precision — the dots keep their 18px spacing, and the
 * extra width is invisible. Above the steps, so no layer swallows a click.
 */
.cnsa-story__progress {
	position: absolute;
	z-index: 4;
	right: 14px;
	top: 50%;
	display: flex;
	flex-direction: column;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	transform: translateY(-50%);
}

.cnsa-story__progress > li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.cnsa-story .cnsa-story__dot {
	position: relative;
	display: block;
	width: 28px;
	height: 18px;
	min-height: 0;
	padding: 0;
	border-radius: 9px;
	background: transparent;
	cursor: pointer;
}

.cnsa-story .cnsa-story__dot::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 8px;
	height: 8px;
	margin: -4px 0 0 -4px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.35);
	transition: background-color 0.3s ease, transform 0.3s ease;
}

.cnsa-story .cnsa-story__dot:hover,
.cnsa-story .cnsa-story__dot:focus {
	background: transparent;
}

.cnsa-story .cnsa-story__dot:hover::before {
	background: rgba(255, 255, 255, 0.7);
	transform: scale(1.25);
}

.cnsa-story .cnsa-story__dot.is-active::before {
	background: var(--cnsa-accent);
	transform: scale(1.4);
}

.cnsa-story .cnsa-story__dot:focus {
	outline: none;
}

.cnsa-story .cnsa-story__dot:focus-visible {
	outline: 2px solid var(--cnsa-accent);
	outline-offset: -2px;
}

/*
 * Stacked fallback: each step becomes an ordinary full-width band in document
 * order. Used on phones by default, and whenever the reader has asked for
 * reduced motion.
 */
.cnsa-story.is-stacked .cnsa-story__track,
.cnsa-story--stacked .cnsa-story__track {
	height: auto;
}

.cnsa-story.is-stacked .cnsa-story__stage,
.cnsa-story--stacked .cnsa-story__stage {
	position: static;
	height: auto;
	overflow: visible;
}

.cnsa-story.is-stacked .cnsa-story__step,
.cnsa-story--stacked .cnsa-story__step {
	position: relative;
	inset: auto;
	min-height: 60vh;
	padding: 64px 0;
	opacity: 1;
	visibility: visible;
	transition: none;
}

.cnsa-story.is-stacked .cnsa-story__bg,
.cnsa-story.is-stacked .cnsa-story__subject,
.cnsa-story.is-stacked .cnsa-story__content,
.cnsa-story--stacked .cnsa-story__bg,
.cnsa-story--stacked .cnsa-story__subject,
.cnsa-story--stacked .cnsa-story__content {
	transform: none;
	transition: none;
}

/* Stacked, the copy follows its picture in the flow; nothing to line up. */
.cnsa-story.is-stacked .cnsa-story__step .cnsa-story__content,
.cnsa-story--stacked .cnsa-story__step .cnsa-story__content {
	top: 0;
}

/* Stacked, the frame has no column to hold and the cut-out is just an image
   in the flow above its copy. */
.cnsa-story.is-stacked .cnsa-story__subject-frame,
.cnsa-story--stacked .cnsa-story__subject-frame {
	position: relative;
	top: auto;
	bottom: auto;
	left: auto;
	max-width: none;
	transform: none;
}

.cnsa-story.is-stacked .cnsa-story__subject,
.cnsa-story--stacked .cnsa-story__subject {
	position: relative;
	top: auto;
	bottom: auto;
	left: auto;
	right: auto;
}

.cnsa-story.is-stacked .cnsa-story__progress,
.cnsa-story--stacked .cnsa-story__progress {
	display: none;
}

/*
 * Type sizes below the desktop.
 *
 * These used to be token overrides — `--cnsa-story-heading: 40px` and so on —
 * and on staging not one of them applied: Elementor writes the page's saved
 * sizes as the same tokens on a selector this file cannot outrank, so a phone
 * got the desktop's 107px heading. Written as caps on the rules that use the
 * sizes instead, they hold whatever the page has saved, and a smaller size
 * set for a device in Elementor still wins because it is smaller.
 */
@media (min-width: 768px) and (max-width: 1200px) {
	.cnsa-story {
		--cnsa-sub-k: 0.7;
	}

	.cnsa-story .cnsa-story__heading {
		font-size: min(var(--cnsa-story-heading), 68px);
	}

	.cnsa-story .cnsa-story__lead {
		font-size: min(var(--cnsa-story-lead), 220px);
	}

	.cnsa-story .cnsa-story__step--lead-word .cnsa-story__heading {
		font-size: min(var(--cnsa-story-lead-lines), 58px);
	}

	.cnsa-story__step--lead-word .cnsa-story__content { gap: 24px; }
}

@media (max-width: 767px) {
	.cnsa-story--stack-on-mobile {
		--cnsa-stacked: 1;
	}

	.cnsa-story {
		/* The cut-outs' nudges were placed on a 1,200px column; a phone's is
		   about a third of that, so they travel a third as far. */
		--cnsa-sub-k: 0.33;
	}

	.cnsa-story .cnsa-story__heading {
		font-size: min(var(--cnsa-story-heading), 11.2vw);
		line-height: 0.98;
	}

	.cnsa-story .cnsa-story__pull {
		font-size: min(var(--cnsa-story-pull), 6.4vw);
	}

	.cnsa-story .cnsa-story__body {
		font-size: min(var(--cnsa-story-body), 15px);
		line-height: 1.55;
	}

	.cnsa-story .cnsa-story__step--lead-word .cnsa-story__heading {
		font-size: min(var(--cnsa-story-lead-lines), 8.4vw);
	}

	/* In Bebas Neue each line fits its row at this size. In anything wider —
	   the fallback face before the webfont arrives — a line that cannot fit
	   wraps rather than running off the side of the screen. */
	.cnsa-story__step--lead-word .cnsa-story__line {
		text-wrap: wrap;
		white-space: normal;
	}

	.cnsa-story__step--lead-word .cnsa-story__content { gap: 14px; }

	/* Stacked: every step a plain band, the cut-out a faint image above its
	   copy. */
	.cnsa-story.is-stacked .cnsa-story__content,
	.cnsa-story--stacked .cnsa-story__content {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}

	.cnsa-story.is-stacked .cnsa-story__subject,
	.cnsa-story--stacked .cnsa-story__subject {
		width: 70% !important;
		opacity: 0.55;
	}

	.cnsa-story--subject-solid.is-stacked .cnsa-story__subject,
	.cnsa-story--subject-solid.cnsa-story--stacked .cnsa-story__subject {
		opacity: 1;
	}
}

/*
 * Tablets and phones, pinned: the desktop's scene, laid out for a narrower
 * screen.
 *
 * On a desktop the copy and the cut-out sit side by side. Below 1024px there
 * is not the width for both — the copy column alone is most of a tablet — and
 * they were drawn over each other. So the copy that shares the screen with a
 * cut-out goes to the top, clear of the site header (and, past the match
 * section, the giving bar) that covers the top 100px of a pinned stage, and
 * the cut-out keeps the foot of the screen, held to the lower half of it. The
 * lead word and the opening stay centred.
 */
@media (max-width: 1024px) {
	/* The copy is at the top of the screen here, not beside the cut-out, so
	   the desktop's automatic 48px does not apply; a set value still does. */
	.cnsa-story .cnsa-story__step[data-copy-follow] .cnsa-story__content {
		top: calc(var(--cnsa-copy-align, 0px) + var(--cnsa-copy-nudge, 0px));
	}

	.cnsa-story--pinned:not(.is-stacked) .cnsa-story__step--copy-right,
	.cnsa-story--pinned:not(.is-stacked) .cnsa-story__step--split {
		align-items: flex-start;
		padding-top: 132px;
	}

	.cnsa-story--pinned:not(.is-stacked) .cnsa-story__step--copy-right .cnsa-story__content,
	.cnsa-story--pinned:not(.is-stacked) .cnsa-story__step--split .cnsa-story__content {
		justify-content: flex-start;
	}

	.cnsa-story--pinned:not(.is-stacked) .cnsa-story__step--split .cnsa-story__copy {
		max-width: 620px;
	}

	.cnsa-story--pinned:not(.is-stacked) .cnsa-story__subject {
		max-height: 46%;
	}
}

@media (max-width: 767px) {
	/* A phone is narrow, so the picture only has somewhere to travel if it is
	   drawn taller than the screen and cropped at the sides. */
	.cnsa-story--filmstrip:not(.is-stacked) .cnsa-story__strip-img {
		height: calc(var(--cnsa-stage-height) * var(--cnsa-strip-phone, 1.7));
		object-fit: cover;
	}

	.cnsa-story--pinned:not(.is-stacked) .cnsa-story__content {
		padding: 0 22px;
	}

	.cnsa-story--pinned:not(.is-stacked) .cnsa-story__step--split .cnsa-story__copy {
		max-width: none;
		gap: 12px;
	}

	/* Side by side still fits a phone: NO sized to the three lines beside it,
	   as on the desktop, rather than stacked above them. */
	.cnsa-story--pinned:not(.is-stacked) .cnsa-story__step--lead-word .cnsa-story__content {
		flex-direction: row;
		align-items: flex-start;
		justify-content: center;
	}

	.cnsa-story--pinned:not(.is-stacked) .cnsa-story__progress {
		right: 0;
	}
}

/*
 * Phones → Lead word: one line per scroll (on by default). "No" stands large
 * at the top; under it road, ambulance and quick route to care slide up one at
 * a time as the reader scrolls, and back down scrolling back.
 */
@media (max-width: 767px) {
	.cnsa-story--phone-lines.cnsa-story--pinned:not(.is-stacked) .cnsa-story__step--lead-word .cnsa-story__content {
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 6px;
		text-align: center;
	}

	.cnsa-story.cnsa-story--phone-lines:not(.is-stacked) .cnsa-story__step--lead-word .cnsa-story__lead {
		font-size: var(--cnsa-story-m-lead, 46vw);
		line-height: 0.86;
		text-align: center;
	}

	.cnsa-story.cnsa-story--phone-lines:not(.is-stacked) .cnsa-story__step--lead-word .cnsa-story__copy {
		align-items: center;
		width: 100%;
	}

	.cnsa-story.cnsa-story--phone-lines:not(.is-stacked) .cnsa-story__step--lead-word .cnsa-story__heading {
		font-size: var(--cnsa-story-m-lines, 11vw);
		line-height: 1.02;
		text-align: center;
	}

	.cnsa-story--phone-lines:not(.is-stacked) .cnsa-story__step--lead-word .cnsa-story__line {
		display: block;
		text-wrap: balance;
	}

	.cnsa-story--phone-lines.is-lines-ready:not(.is-stacked) .cnsa-story__step--lead-word .cnsa-story__line {
		opacity: 0;
		translate: 0 0.55em;
		transition:
			opacity 0.45s ease,
			translate 0.6s cubic-bezier(0.22, 1, 0.36, 1);
	}

	.cnsa-story--phone-lines.is-lines-ready:not(.is-stacked) .cnsa-story__step--lead-word .cnsa-story__line.is-shown {
		opacity: 1;
		translate: none;
	}

	.cnsa-story--measuring .cnsa-story__line {
		translate: none !important;
		transition: none !important;
	}
}

/*
 * Countdown screws on phones: smaller and right in the corners (Style →
 * Screw size / Screw inset on phones). The desktop values are written by
 * Elementor for every screen size, so the phone sizes are their own tokens,
 * applied here above both.
 */
@media (max-width: 767px) {
	.cnsa-countdown.cnsa-countdown .cnsa-countdown__screw {
		width: var(--cnsa-screw-size-m, 12px);
		height: var(--cnsa-screw-size-m, 12px);
		font-size: var(--cnsa-screw-size-m, 12px);
	}

	.cnsa-countdown.cnsa-countdown .cnsa-countdown__screw:nth-child(1) { top: var(--cnsa-screw-inset-m, 4px); right: auto; bottom: auto; left: var(--cnsa-screw-inset-m, 4px); }
	.cnsa-countdown.cnsa-countdown .cnsa-countdown__screw:nth-child(2) { top: var(--cnsa-screw-inset-m, 4px); right: var(--cnsa-screw-inset-m, 4px); bottom: auto; left: auto; }
	.cnsa-countdown.cnsa-countdown .cnsa-countdown__screw:nth-child(3) { top: auto; right: auto; bottom: var(--cnsa-screw-inset-m, 4px); left: var(--cnsa-screw-inset-m, 4px); }
	.cnsa-countdown.cnsa-countdown .cnsa-countdown__screw:nth-child(4) { top: auto; right: var(--cnsa-screw-inset-m, 4px); bottom: var(--cnsa-screw-inset-m, 4px); left: auto; }
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
	.cnsa-story--phone-lines.is-lines-ready .cnsa-story__step--lead-word .cnsa-story__line {
		transition: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cnsa-story {
		--cnsa-stacked: 1;
	}

	.cnsa-story__step,
	.cnsa-story__bg,
	.cnsa-story__subject,
	.cnsa-story__content {
		transition: none;
	}
}

/*
 * Full-bleed: the backgrounds span the viewport while the copy stays inside
 * the content width. 100vw is deliberately not used — it includes the
 * scrollbar and would push the page sideways — so the script measures the
 * scrollbar once and exposes it as --cnsa-sbw.
 */
.cnsa-story--full-bleed {
	--cnsa-sbw: 0px;
	width: calc(100vw - var(--cnsa-sbw));
	max-width: calc(100vw - var(--cnsa-sbw));
	margin-left: calc(50% - (100vw - var(--cnsa-sbw)) / 2);
	margin-right: calc(50% - (100vw - var(--cnsa-sbw)) / 2);
}

/*
 * position: sticky fails silently inside an ancestor that clips overflow or
 * establishes a containing block. The widget's own Elementor wrappers are
 * cleared here; anything further up is the page's own markup, which the
 * script detects and reports.
 */
.elementor-widget-cnsa-scroll-story,
.elementor-widget-cnsa-scroll-story > .elementor-widget-container {
	overflow: visible;
}

/* Fallback state when sticky cannot work in this position. */
.cnsa-story.is-unsupported .cnsa-story__progress {
	display: none;
}

/* --------------------------------------------------------- Speed Compare */

.cnsa-speed {
	--cnsa-speed-wash: rgba(28, 44, 82, 0.72);
	--cnsa-speed-accent: #eeb53f;
	--cnsa-speed-rule: rgba(255, 255, 255, 0.28);
	--cnsa-speed-band: rgba(28, 44, 82, 0.62);
	--cnsa-speed-title: 56px;
	--cnsa-speed-value: 64px;
	--cnsa-speed-label: 24px;
	--cnsa-speed-lane: 170px;
	--cnsa-speed-max: 1200px;
	--cnsa-speed-pad: 90px;
	--cnsa-speed-vehicle: 250px;
	/* Space between the end of each route and its time. */
	--cnsa-speed-value-gap: 24px;
	/* The centre line, the circles at its ends and the VS badge. The colours
	   are left unset so they follow the Hairlines colour until given one. */
	--cnsa-speed-spine-w: 1px;
	--cnsa-speed-cap: 16px;
	--cnsa-speed-cap-line: 1px;
	--cnsa-speed-vs: 80px;
	--cnsa-speed-vs-line: 1px;
	/*
	 * The width the editor sets is written on the lane, and an Elementor
	 * desktop value applies at every breakpoint that has not been given its
	 * own. So a 250px canoe set once on desktop is also a 295px canoe on a
	 * 390px phone, which pushes the route to nothing. The cap lives on the
	 * section, per breakpoint, where the lane's value cannot override it.
	 */
	--cnsa-speed-vehicle-max: 9999px;
	--cnsa-speed-lift: 0px;
	--cnsa-speed-gutter: 24px;
	/*
	 * Where a vehicle waits before it leaves. `before`: parked ahead of the
	 * start marker in a slot of its own, the route beginning after it, as the
	 * comp draws it. `on`: parked on top of the start of a full-width route —
	 * the phone layout. Read by the script, which works out the trip from it.
	 */
	--cnsa-speed-park: before;
	/* How far the plane rises while it hovers at the finish. */
	--cnsa-speed-hover: 14px;
	/* Shaded lanes: the darkest colour, the edge lines, and how far the shade
	   runs past each end of the lane. */
	--cnsa-speed-shade: rgba(22, 32, 58, 0.9);
	--cnsa-speed-shade-edge: rgba(255, 255, 255, 0.16);
	--cnsa-speed-shade-bleed: 96px;

	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: var(--cnsa-speed-pad) var(--cnsa-speed-gutter);
	background-color: var(--cnsa-primary);
	color: #fff;
}

/*
 * The photograph is a background on a pseudo-element rather than on the
 * section itself, so the wash above it can be a flat colour the editor sets
 * directly instead of a gradient they have to hand-write.
 */
.cnsa-speed::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -2;
	background-image: var(--cnsa-speed-photo, none);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.cnsa-speed__wash {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--cnsa-speed-wash);
	pointer-events: none;
}

/*
 * Full bleed measured against the scrollbar rather than 100vw: on Windows and
 * on any always-visible-scrollbar setting, 100vw includes the scrollbar and
 * the section would push a horizontal scroll onto the page. Shared with the
 * scroll story, which sets --cnsa-sbw on the document element.
 */
.cnsa-speed--full-bleed {
	--cnsa-sbw: 0px;
	width: calc(100vw - var(--cnsa-sbw));
	max-width: calc(100vw - var(--cnsa-sbw));
	margin-left: calc(50% - (100vw - var(--cnsa-sbw)) / 2);
	margin-right: calc(50% - (100vw - var(--cnsa-sbw)) / 2);
}

.cnsa-speed__inner {
	max-width: var(--cnsa-speed-max);
	margin: 0 auto;
}

.cnsa-speed__title {
	margin: 0 0 56px;
	font-family: 'Bebas Neue', 'Oswald', sans-serif;
	font-size: var(--cnsa-speed-title);
	line-height: 1.08;
	letter-spacing: 0.5px;
	text-align: center;
	text-transform: uppercase;
	text-wrap: balance;
}

/* Two classes, because the kit emits `.elementor-kit-9 h2 { color: … }` at
   (0,1,1) and would otherwise win over a single-class rule here. */
.cnsa-speed .cnsa-speed__title-line {
	display: block;
	color: #fff;
}

.cnsa-speed .cnsa-speed__title-line--accent {
	color: var(--cnsa-speed-accent);
}

/* ------------------------------------------------------------- the race */

.cnsa-speed__race {
	position: relative;
	padding: 34px 0;
}

/*
 * The centre line, drawn in CSS so every part of it is a setting.
 *
 * One element, the full height, from the top end to the bottom end. Where it
 * should not show — behind the VS badge, and inside the two shaded lanes, as
 * the design has it — the script measures those and hands the element a mask
 * with a gap for each, so the line stops cleanly at their edges whatever the
 * badge, the lane height or the screen. Without the script the line is whole,
 * and the opaque badge still covers its part.
 *
 * The circles at the ends are separate elements (below), so nothing of them
 * falls outside the line's own box, where a mask would cut it off.
 */
.cnsa-speed {
	--cnsa-speed-spine-ink: var(--cnsa-speed-spine, var(--cnsa-speed-rule));
	/* The circle at each end; an end without one counts as 0, so the line
	   runs right to it. */
	--cnsa-speed-cap-t: var(--cnsa-speed-cap);
	--cnsa-speed-cap-b: var(--cnsa-speed-cap);
}

.cnsa-speed--caps-none {
	--cnsa-speed-cap-t: 0px;
	--cnsa-speed-cap-b: 0px;
}

.cnsa-speed--cap-at-bottom {
	--cnsa-speed-cap-t: 0px;
}

.cnsa-speed--cap-at-top {
	--cnsa-speed-cap-b: 0px;
}

.cnsa-speed__spine {
	/*
	 * The line as a paint layer, so it can be solid or dashed from one
	 * setting. Dashes are a repeating gradient: exact at any length.
	 */
	--cnsa-speed-spine-paint: linear-gradient(var(--cnsa-speed-spine-ink), var(--cnsa-speed-spine-ink));
	position: absolute;
	top: calc(-1 * var(--cnsa-speed-spine-top, 0px));
	bottom: calc(-1 * var(--cnsa-speed-spine-bottom, 0px));
	left: 50%;
	width: var(--cnsa-speed-spine-w);
	margin-left: calc(var(--cnsa-speed-spine-w) / -2);
	/* It stops at the edge of each circle rather than running into it. */
	background:
		var(--cnsa-speed-spine-paint)
		0 calc(var(--cnsa-speed-cap-t) / 2)
		/ 100% calc(100% - var(--cnsa-speed-cap-t) / 2 - var(--cnsa-speed-cap-b) / 2)
		no-repeat;
	pointer-events: none;
}

.cnsa-speed--spine-dashed .cnsa-speed__spine {
	--cnsa-speed-spine-paint: repeating-linear-gradient(
		to bottom,
		var(--cnsa-speed-spine-ink) 0,
		var(--cnsa-speed-spine-ink) var(--cnsa-speed-spine-dash, 6px),
		transparent var(--cnsa-speed-spine-dash, 6px),
		transparent calc(var(--cnsa-speed-spine-dash, 6px) + var(--cnsa-speed-spine-space, 6px))
	);
}

/* The circle at the end of the line: the design's artwork by default. */
.cnsa-speed__cap {
	position: absolute;
	left: 50%;
	width: var(--cnsa-speed-cap);
	height: var(--cnsa-speed-cap);
	margin-left: calc(var(--cnsa-speed-cap) / -2);
	border: var(--cnsa-speed-cap-line) solid var(--cnsa-speed-cap-color, var(--cnsa-speed-spine-ink));
	border-radius: 50%;
	background: var(--cnsa-speed-cap-fill, transparent);
	pointer-events: none;
}

.cnsa-speed__cap--top {
	top: calc(-1 * var(--cnsa-speed-spine-top, 0px) - var(--cnsa-speed-cap) / 2);
}

.cnsa-speed__cap--bottom {
	bottom: calc(-1 * var(--cnsa-speed-spine-bottom, 0px) - var(--cnsa-speed-cap) / 2);
}

.cnsa-speed--caps-dot .cnsa-speed__cap {
	border: 0;
	background: var(--cnsa-speed-cap-color, var(--cnsa-speed-spine-ink));
}

.cnsa-speed--caps-image .cnsa-speed__cap {
	border: 0;
	border-radius: 0;
	background: var(--cnsa-speed-cap-img) center / contain no-repeat;
}

.cnsa-speed--caps-image .cnsa-speed__cap--bottom {
	background-image: var(--cnsa-speed-cap-img-bottom, var(--cnsa-speed-cap-img));
}

.cnsa-speed__label {
	margin: 0 0 10px;
	font-family: 'Bebas Neue', 'Oswald', sans-serif;
	font-size: var(--cnsa-speed-label);
	line-height: 1;
	letter-spacing: 1.4px;
	text-align: right;
	text-transform: uppercase;
	color: #fff;
}

.cnsa-speed__band {
	position: relative;
	display: flex;
	align-items: center;
	/* No gap: the parked vehicle should sit flush with the left edge of the
	   band, as drawn, so the slot alone sets where the route begins. The time
	   takes its own margin instead. */
	gap: 0;
	height: var(--cnsa-speed-lane);
	padding: 0 8px;
	border-top: 1px solid var(--cnsa-speed-rule);
	border-bottom: 1px solid var(--cnsa-speed-rule);
	background: var(--cnsa-speed-band);
}

/*
 * Shaded lanes, as the design draws them: no box, but a dark band that
 * deepens towards the time and fades back into the photograph at both ends,
 * its edge lines fading with it. The curve is read off the design — faint
 * under the vehicle, darkest just before the time, gone a little past it.
 *
 * It is painted on a layer behind the lane's contents and faded with a mask,
 * so the vehicle, the route and the time stay fully opaque. The layer runs
 * out past both ends of the lane (Shade reaches past the lane) so the fade
 * happens beyond the vehicle and the time rather than under them — but never
 * past the edge of the screen, where the section would cut it off square.
 */
.cnsa-speed--lanes-fade .cnsa-speed__band {
	isolation: isolate;
	border-color: transparent;
	background: none;
}

.cnsa-speed--lanes-fade .cnsa-speed__band::before {
	--cnsa-speed-shade-reach: min(var(--cnsa-speed-shade-bleed), max(0px, (100vw - 100%) / 2));
	content: '';
	position: absolute;
	z-index: -1;
	top: -1px;
	bottom: -1px;
	left: calc(-1 * var(--cnsa-speed-shade-reach));
	right: calc(-1 * var(--cnsa-speed-shade-reach));
	background:
		linear-gradient(var(--cnsa-speed-shade-edge), var(--cnsa-speed-shade-edge)) top / 100% 1px no-repeat,
		linear-gradient(var(--cnsa-speed-shade-edge), var(--cnsa-speed-shade-edge)) bottom / 100% 1px no-repeat,
		linear-gradient(var(--cnsa-speed-shade), var(--cnsa-speed-shade));
	-webkit-mask-image: linear-gradient(
		90deg,
		transparent 0%,
		rgba(0, 0, 0, 0.25) 10%,
		rgba(0, 0, 0, 0.55) 25%,
		rgba(0, 0, 0, 0.75) 40%,
		rgba(0, 0, 0, 0.92) 60%,
		#000 78%,
		rgba(0, 0, 0, 0.65) 88%,
		rgba(0, 0, 0, 0.28) 94%,
		transparent 100%
	);
	mask-image: linear-gradient(
		90deg,
		transparent 0%,
		rgba(0, 0, 0, 0.25) 10%,
		rgba(0, 0, 0, 0.55) 25%,
		rgba(0, 0, 0, 0.75) 40%,
		rgba(0, 0, 0, 0.92) 60%,
		#000 78%,
		rgba(0, 0, 0, 0.65) 88%,
		rgba(0, 0, 0, 0.28) 94%,
		transparent 100%
	);
	pointer-events: none;
}

/* The route must not clip the vehicle, which hangs to the left of the start
   marker and into the slot reserved for it. */
.cnsa-speed__band,
.cnsa-speed__route {
	overflow: visible;
}

/*
 * The vehicle's parked width reserves the slot, so the route always starts
 * clear of the cut-out and the two lanes line up with each other even when
 * the canoe and the plane are different widths.
 */
.cnsa-speed__vehicle-slot {
	position: relative;
	flex: 0 0 auto;
	width: min(var(--cnsa-speed-vehicle), var(--cnsa-speed-vehicle-max));
	height: 100%;
}

.cnsa-speed__route {
	position: relative;
	flex: 1 1 auto;
	height: 60%;
	min-width: 0;
}

.cnsa-speed__svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.cnsa-speed__track {
	fill: none;
	stroke: rgba(255, 255, 255, 0.85);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-dasharray: 9 7;
}

/*
 * The trail is the same route drawn over the dashes in the accent colour and
 * revealed by dash offset, so the covered distance reads at a glance. It is
 * drawn solid rather than dashed: two dashed strokes on the same geometry
 * shimmer against each other as one slides.
 */
.cnsa-speed__trail {
	fill: none;
	stroke: var(--cnsa-speed-accent);
	stroke-width: 2;
	stroke-linecap: round;
	opacity: 0.9;
}

.cnsa-speed__lane--slow .cnsa-speed__trail {
	stroke: #fff;
}

.cnsa-speed__lane--fast .cnsa-speed__track {
	stroke: var(--cnsa-speed-accent);
	opacity: 0.55;
	stroke-dasharray: 11 9;
}

.cnsa-speed__origin {
	position: absolute;
	top: 50%;
	left: 0;
	width: 11px;
	height: 11px;
	margin: -5.5px 0 0 -5.5px;
	border: 2px solid #fff;
	border-radius: 50%;
}

.cnsa-speed__lane--fast .cnsa-speed__origin {
	border-color: var(--cnsa-speed-accent);
}

/*
 * Moved by transform only, so the travelling vehicle never triggers layout and
 * the whole animation stays on the compositor. These top/left values park it at
 * the start of the route before the script runs; the script then zeroes them
 * and carries the full offset in the transform, so the two never stack.
 */
.cnsa-speed__vehicle {
	position: absolute;
	top: 50%;
	left: 0;
	width: min(var(--cnsa-speed-vehicle), var(--cnsa-speed-vehicle-max));
	max-width: none;
	height: auto;
	transform: translate(-100%, -50%);
	transform-origin: 50% 50%;
	will-change: transform;
	pointer-events: none;
	z-index: 2;
}

/*
 * Resting on the line rather than threaded on it. Parked with its nose on the
 * start marker and its hull on the marker's level, and turned about its own
 * top-left corner so the script's transform — which puts the middle of the
 * hull on the route and turns it there — composes the same way.
 */
.cnsa-speed--seat-top .cnsa-speed__vehicle {
	transform: translate(-100%, calc(-100% - var(--cnsa-speed-lift)));
	transform-origin: 0 0;
}

/*
 * A soft shadow under the plane, cast down and away, which is what makes its
 * lift off the line read as flight rather than as the picture sliding up.
 * Follows the cut-out's own outline, not its box.
 */
.cnsa-speed--plane-shadow .cnsa-speed__lane--fast .cnsa-speed__vehicle {
	filter: drop-shadow(0 12px 9px rgba(5, 12, 30, 0.42));
}

.cnsa-speed__vehicle--empty {
	display: block;
	width: min(var(--cnsa-speed-vehicle), var(--cnsa-speed-vehicle-max));
	height: 2px;
}

/*
 * No reserved width: the route takes everything up to the time itself, so the
 * line — and the vehicle's nose at the finish — ends right beside the words.
 * It used to hold 4.5em for the time, about twice what "3 Days" needs, and
 * the route stopped well short of it.
 */
.cnsa-speed__value {
	flex: 0 0 auto;
	min-width: 0;
	margin: 0 0 0 var(--cnsa-speed-value-gap);
	font-family: 'Bebas Neue', 'Oswald', sans-serif;
	font-size: var(--cnsa-speed-value);
	line-height: 1;
	text-align: right;
	text-transform: uppercase;
	color: var(--cnsa-speed-accent);
}

/*
 * Held back until the vehicle lands. Opacity and a small lift only — animating
 * the type's size would reflow the lane and nudge the route beside it.
 */
.cnsa-speed--reveal .cnsa-speed__value {
	opacity: 0.18;
	transform: translateY(6px);
	transition: opacity 0.45s ease, transform 0.45s ease;
}

.cnsa-speed--reveal .is-arrived .cnsa-speed__value {
	opacity: 1;
	transform: none;
}

.cnsa-speed__phone-head {
	display: none;
	margin: 0 0 12px;
	font-family: 'Bebas Neue', 'Oswald', sans-serif;
	font-size: var(--cnsa-speed-phone-head, 34px);
	line-height: 1.05;
	letter-spacing: 0.5px;
	text-align: left;
	text-transform: uppercase;
	color: var(--cnsa-speed-phone-label, #fff);
}

.cnsa-speed .cnsa-speed__phone-value {
	color: var(--cnsa-speed-accent);
}

/* Held back until the vehicle lands, like the time in the lane. */
.cnsa-speed--reveal .cnsa-speed__phone-value {
	opacity: 0.18;
	transition: opacity 0.45s ease;
}

.cnsa-speed--reveal .is-arrived .cnsa-speed__phone-value,
.cnsa-speed.is-static .cnsa-speed__phone-value {
	opacity: 1;
}

.cnsa-speed__versus {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--cnsa-speed-vs);
	height: var(--cnsa-speed-vs);
	margin: 0 auto;
	border: var(--cnsa-speed-vs-line) solid var(--cnsa-speed-vs-border, var(--cnsa-speed-rule));
	border-radius: 50%;
	background: var(--cnsa-speed-vs-fill, var(--cnsa-primary));
	font-family: 'Bebas Neue', 'Oswald', sans-serif;
	font-size: 22px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--cnsa-speed-vs-ink, #fff);
}

/*
 * The badge artwork from the design, at the badge width and its own height.
 * Two classes on the image, because `.elementor img` caps images at the width
 * of their box and would otherwise have the last word.
 */
.cnsa-speed--vs-image .cnsa-speed__versus {
	height: auto;
	border: 0;
	border-radius: 0;
	background: none;
}

.cnsa-speed .cnsa-speed__versus-art {
	display: block;
	width: 100%;
	max-width: none;
	height: auto;
}

.cnsa-speed--vs-image .cnsa-speed__versus-text {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Leave room above and below the badge so the two lanes are not cramped. */
.cnsa-speed__lane--slow {
	margin-bottom: 40px;
}

.cnsa-speed__lane--fast {
	margin-top: 40px;
}

.cnsa-speed .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ------------------------------------------------------------ copy block */

.cnsa-speed__copy {
	max-width: 820px;
	margin: 72px auto 0;
	text-align: center;
}

.cnsa-speed .cnsa-speed__copy-heading {
	margin: 0 0 40px;
	font-family: 'Bebas Neue', 'Oswald', sans-serif;
	font-size: 60px;
	line-height: 1;
	text-transform: uppercase;
	color: #fff;
}

.cnsa-speed .cnsa-speed__accent {
	color: var(--cnsa-speed-accent);
}

.cnsa-speed__copy-body {
	max-width: 652px;
	/* Follows Positioning → Copy below the race: centred by default, and to
	   the left or right edge with the rest of the copy. */
	margin: 0 var(--cnsa-mr, auto) 40px var(--cnsa-ml, auto);
	font-family: 'Poppins', sans-serif;
	font-size: 16px;
	line-height: 1.6;
	color: #fff;
}

.cnsa-speed__copy-body p {
	margin: 0 0 1.6em;
}

.cnsa-speed__copy-body p:last-child {
	margin-bottom: 0;
}

/* Two classes, to outrank the kit's `.elementor-kit-9 a` rule (0,1,1), which
   had been resetting this button to regular weight instead of bold. */
.cnsa-speed .cnsa-speed__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 16px 32px;
	background: var(--cnsa-speed-accent);
	font-family: 'Poppins', sans-serif;
	font-weight: 700;
	font-size: 16px;
	line-height: 1.125;
	letter-spacing: 2px;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--cnsa-primary);
	transition: filter 0.2s ease;
}

.cnsa-speed .cnsa-speed__cta:hover,
.cnsa-speed .cnsa-speed__cta:focus {
	filter: brightness(0.94);
	color: var(--cnsa-primary);
}

/* ----------------------------------------------------------- responsive */

@media (max-width: 1024px) {
	.cnsa-speed {
		--cnsa-speed-title: 42px;
		--cnsa-speed-value: 48px;
		--cnsa-speed-lane: 140px;
		--cnsa-speed-vehicle: 165px;
		--cnsa-speed-vehicle-max: 190px;
	}

	.cnsa-speed .cnsa-speed__copy-heading {
		font-size: 44px;
	}
}

/*
 * Narrow: the label moves above its own lane and the time sits under the
 * route, because at phone width a vehicle, a route long enough to read as a
 * journey, and a 48px number cannot share one row without the route
 * collapsing to a stub — which would destroy the only thing the section is
 * trying to show.
 */
@media (max-width: 767px) {
	/*
	 * The route runs the full width of the band, and each vehicle waits on top
	 * of its start rather than in a slot beside it. Side by side, a phone had
	 * room for only half a route — the line began in the middle of the band —
	 * which undersold the one thing the section is showing: how far each has to
	 * go. The vehicle leaves from there and stops with its nose on the finish.
	 */
	.cnsa-speed {
		--cnsa-speed-title: 32px;
		--cnsa-speed-value: 40px;
		--cnsa-speed-label: 18px;
		--cnsa-speed-lane: 200px;
		--cnsa-speed-vehicle: 130px;
		/* Well under half the line, so there is still a journey to see. */
		--cnsa-speed-vehicle-max: min(150px, calc((100vw - 2 * var(--cnsa-speed-gutter)) * 0.38));
		--cnsa-speed-pad: 56px;
		--cnsa-speed-gutter: 20px;
		--cnsa-speed-park: on;
		--cnsa-speed-row: 118px;
		--cnsa-speed-hover: 9px;
		--cnsa-speed-vs: 64px;
	}

	.cnsa-speed__band {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto auto;
		align-items: center;
		gap: 10px 0;
		height: auto;
		padding: 16px 8px 18px;
	}

	/* The slot and the route share one cell: the slot keeps the row's height,
	   which the script centres the trip in, and takes no width from the line. */
	.cnsa-speed__vehicle-slot,
	.cnsa-speed__route {
		grid-row: 1;
		grid-column: 1;
		width: 100%;
		height: var(--cnsa-speed-row);
	}

	/* Before the script runs: waiting on the start of the line, tail on the
	   marker, not parked ahead of it. */
	.cnsa-speed .cnsa-speed__vehicle {
		transform: translate(0, -50%);
	}

	.cnsa-speed--seat-top .cnsa-speed__vehicle {
		transform: translate(0, calc(-100% - var(--cnsa-speed-lift)));
	}

	.cnsa-speed__value {
		grid-row: 2;
		grid-column: 1;
		min-width: 0;
		margin-left: 0;
	}

	.cnsa-speed__label {
		text-align: left;
	}

	/*
	 * Phones → Time and label on one line: "3 Days by Canoe" over the lane,
	 * then the animation. Both lanes are the route's row plus the same room
	 * above it, and the flight is flattened to fit that room, so the canoe's
	 * lane and the seaplane's are the same height.
	 */
	.cnsa-speed--phone-head {
		/* A percentage of the desktop arc, as a bare number the script reads. */
		--cnsa-speed-arc-scale: var(--cnsa-speed-arc-phone, 40);
		/* A short row for the line itself: the vehicles ride above it, in the
		   room left at the top of the lane, so the lane is only as tall as
		   the vehicle plus its route. */
		--cnsa-speed-row: var(--cnsa-speed-phone-row, 72px);
	}

	.cnsa-speed--phone-head .cnsa-speed__label,
	.cnsa-speed--phone-head .cnsa-speed__band .cnsa-speed__value {
		display: none;
	}

	.cnsa-speed--phone-head .cnsa-speed__phone-head {
		display: block;
	}

	/* Either side of the centre line (Phones → Heading sits): "By Canoe" in
	   the left corner, "3 Days" in the right, the line running whole in the gap
	   between them. Label left whatever the Order setting says. */
	.cnsa-speed.cnsa-speed--phone-head-split .cnsa-speed__phone-head {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		align-items: baseline;
		column-gap: 28px;
		white-space: nowrap;
		font-size: min(var(--cnsa-speed-phone-head, 34px), calc((50vw - 44px) / 4.2));
	}

	/* Out at the corners: the label at the lane's left edge, the time at its
	   right, in line with the ends of the route below. */
	.cnsa-speed.cnsa-speed--phone-head-split .cnsa-speed__phone-head {
		padding-right: 14px;
		padding-left: 14px;
	}

	.cnsa-speed--phone-head-split .cnsa-speed__phone-label {
		grid-column: 1;
		grid-row: 1;
		justify-self: start;
	}

	.cnsa-speed--phone-head-split .cnsa-speed__phone-value {
		grid-column: 2;
		grid-row: 1;
		justify-self: end;
	}

	/* Right of the centre line (Phones → Heading sits), on one line, sized
	   down to fit the half of the screen it has. */
	.cnsa-speed.cnsa-speed--phone-head-right .cnsa-speed__phone-head {
		padding-left: calc(50% + 14px);
		white-space: nowrap;
		font-size: min(var(--cnsa-speed-phone-head, 34px), calc((50vw - 34px) / 5.6));
	}

	.cnsa-speed--phone-head .cnsa-speed__band {
		grid-template-rows: auto;
		/* The same above and below: the script centres the vehicle and its
		   line together on the row, so equal padding centres them in the lane. */
		padding: var(--cnsa-speed-phone-top, 22px) 14px;
	}

	/* The spine would run straight through both vehicles at this width. The
	   badge alone carries the comparison. */
	.cnsa-speed__spine,
	.cnsa-speed__cap {
		display: none;
	}

	/*
	 * Phones → Centre line: with the one-line headings the line is back, as
	 * on desktop, circle and all. The script hides it inside the lanes and
	 * behind the headings, so it never runs through a vehicle or a word.
	 */
	.cnsa-speed--phone-head.cnsa-speed--phone-spine .cnsa-speed__spine,
	.cnsa-speed--phone-head.cnsa-speed--phone-spine .cnsa-speed__cap {
		display: block;
	}

	.cnsa-speed .cnsa-speed__copy-heading {
		font-size: 34px;
	}

	.cnsa-speed__copy {
		margin-top: 48px;
	}
}

/*
 * Readers who have asked for less motion get the finished comparison. The
 * script also checks this and skips the loop entirely; the rule is here so the
 * held-back times are visible even if the script never runs.
 */
@media (prefers-reduced-motion: reduce) {
	.cnsa-speed--reveal .cnsa-speed__phone-value {
		opacity: 1;
		transition: none;
	}

	.cnsa-speed--reveal .cnsa-speed__value {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

.cnsa-speed.is-static .cnsa-speed__value {
	opacity: 1;
	transform: none;
}

/* The full-bleed section must not be clipped by its own Elementor wrappers. */
.elementor-widget-cnsa-speed-compare,
.elementor-widget-cnsa-speed-compare > .elementor-widget-container {
	overflow: visible;
}

/* ------------------------------------------------- Patient Record carousel */

.cnsa-record {
	--cnsa-rec-ink: #223357;
	--cnsa-rec-accent: #eeb53f;
	--cnsa-rec-muted: #8a8a8a;
	--cnsa-rec-meta: #223357;
	--cnsa-rec-alert: #c8322c;
	--cnsa-rec-card: #ffffff;
	--cnsa-rec-bar: #e4e6ea;
	--cnsa-rec-rule: #dcdcdc;
	--cnsa-rec-page: #f8f8f8;
	--cnsa-rec-band-color: #223357;
	--cnsa-rec-tape: rgba(238, 181, 63, 0.85);

	--cnsa-rec-max: 1200px;
	--cnsa-rec-band: 300px;
	--cnsa-rec-pad: 80px;
	--cnsa-rec-card-pad: 56px;
	--cnsa-rec-aside: 470px;
	--cnsa-rec-radius: 4px;
	--cnsa-rec-nav: 64px;
	--cnsa-rec-nav-icon: 24px;
	--cnsa-rec-tilt: -1.5deg;
	--cnsa-rec-ratio: 7 / 6;
	--cnsa-rec-stamp-tilt: -4deg;
	--cnsa-rec-stamp-lift: 16px;
	--cnsa-rec-stamp-push: 26px;
	--cnsa-rec-stamp-scale: 1.25;
	--cnsa-rec-fade: 350ms;
	--cnsa-rec-slide: 750ms;
	--cnsa-rec-gutter: 24px;

	/*
	 * The faces the comp uses. Each is a stack, not a single family, so the
	 * card still reads as a document on a machine missing the webfont — a
	 * typewriter value falling back to Helvetica would lose the whole
	 * conceit. Choosing a family in the Typography tab overrides these and
	 * makes Elementor enqueue the webfont.
	 */
	--cnsa-rec-display: 'Bebas Neue', 'Oswald', sans-serif;
	--cnsa-rec-mono: 'Courier Prime', 'Courier New', ui-monospace, monospace;
	--cnsa-rec-hand: 'Caveat', 'Bradley Hand', 'Segoe Script', cursive;
	--cnsa-rec-body: 'Poppins', sans-serif;

	position: relative;
	padding: var(--cnsa-rec-pad) var(--cnsa-rec-gutter);
	background: var(--cnsa-rec-page);
	color: var(--cnsa-rec-ink);
}

/*
 * The navy band behind the top of the card. A background on the section
 * itself could not stop partway down, and a separate sibling element would
 * be one more thing for the editor to keep aligned with the card.
 */
.cnsa-record__band {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: var(--cnsa-rec-band);
	background: var(--cnsa-rec-band-color);
	pointer-events: none;
}

.cnsa-record--full-bleed-band .cnsa-record__band {
	--cnsa-sbw: 0px;
	right: auto;
	left: 50%;
	width: calc(100vw - var(--cnsa-sbw));
	margin-left: calc((100vw - var(--cnsa-sbw)) / -2);
}

/*
 * The stage: the whole width of the section, gutters included, clipped
 * sideways only. A record sliding away travels to the edge of the section and
 * no further, so it can never make the page scroll sideways — while its
 * shadow above and below, and the arrows on a phone under the card, are left
 * alone. `hidden` first for browsers without `clip`, which do then clip the
 * shadow below the card as well.
 */
.cnsa-record__stage {
	position: relative;
	margin: 0 calc(var(--cnsa-rec-gutter) * -1);
	padding: 0 var(--cnsa-rec-gutter);
	overflow-x: hidden;
	overflow-x: clip;
}

/*
 * With the band spanning the window, the stage does too: a record sliding
 * away goes right off the screen, like a card pushed off the desk, instead of
 * vanishing at the section's edge. Padded back in so everything inside stays
 * where it was. Only once the script has measured the scrollbar — a stage a
 * scrollbar wider than the window would scroll the page sideways.
 */
.cnsa-record--full-bleed-band.is-bleed-ready .cnsa-record__stage {
	--cnsa-rec-vw: calc(100vw - var(--cnsa-rec-sbw, 0px));
	margin-right: calc(50% - var(--cnsa-rec-vw) / 2);
	margin-left: calc(50% - var(--cnsa-rec-vw) / 2);
	padding-right: calc(var(--cnsa-rec-vw) / 2 - 50%);
	padding-left: calc(var(--cnsa-rec-vw) / 2 - 50%);
}

.cnsa-record__frame {
	position: relative;
	max-width: var(--cnsa-rec-max);
	margin: 0 auto;
}

/*
 * One grid cell, every record in it. The deck is therefore as tall as the
 * longest record and stays that height throughout, so paging never moves the
 * rest of the page — and the change is opacity only, which stays off the
 * main thread.
 */
.cnsa-record__deck {
	display: grid;
	grid-template-areas: 'card';
}

.cnsa-record__slide {
	grid-area: card;
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--cnsa-rec-fade) ease, visibility 0s linear var(--cnsa-rec-fade);
}

.cnsa-record__slide.is-active {
	opacity: 1;
	visibility: visible;
	transition: opacity var(--cnsa-rec-fade) ease;
}

/*
 * Slide: the script moves the records; the classes only say which is showing.
 * The record on its way out keeps its place on screen until it has gone.
 */
.cnsa-record--slide .cnsa-record__slide,
.cnsa-record--slide .cnsa-record__slide.is-active {
	transition: none;
}

.cnsa-record--slide .cnsa-record__slide.is-leaving {
	opacity: 1;
	visibility: visible;
}

/* The stamp before it has come down, while the section is still below. */
.cnsa-record .cnsa-record__slide.is-stamp-pending .cnsa-record__stamp {
	opacity: 0;
}

.cnsa-record__card {
	height: 100%;
	overflow: hidden;
	border-radius: var(--cnsa-rec-radius);
	background: var(--cnsa-rec-card);
	box-shadow: 0 24px 60px rgba(14, 24, 48, 0.16);
}

/* ------------------------------------------------------------- header bar */

.cnsa-record__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: 64px;
	padding: 16px var(--cnsa-rec-card-pad);
	background: var(--cnsa-rec-bar);
}

.cnsa-record__mark {
	display: flex;
	align-items: center;
	gap: 14px;
	min-width: 0;
}

.cnsa-record__badge {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	border-radius: 4px;
	background: #d8352f;
}

.cnsa-record__badge svg {
	width: 17px;
	height: 17px;
	fill: #fff;
}

.cnsa-record__badge--image {
	width: 30px;
	height: 30px;
	border-radius: 4px;
	object-fit: contain;
	background: none;
}

/* Two classes throughout: the kit emits `.elementor-kit-9 h3 { color: … }` at
   (0,1,1), which outranks any single-class rule in here. */
.cnsa-record .cnsa-record__bar-title {
	margin: 0;
	font-family: var(--cnsa-rec-display);
	font-size: 26px;
	line-height: 1;
	letter-spacing: 1.56px;
	text-transform: uppercase;
	color: var(--cnsa-rec-bar-title, var(--cnsa-rec-ink));
}

/* Style → Colours → Record meta. Blue, as reviewed; it was the label grey. */
.cnsa-record .cnsa-record__meta {
	margin: 0;
	font-family: var(--cnsa-rec-mono);
	font-size: 10.5px;
	line-height: 1.4;
	letter-spacing: 1.47px;
	text-align: right;
	text-transform: uppercase;
	color: var(--cnsa-rec-meta, var(--cnsa-rec-muted));
}

/* Each part whole: a line breaks between the parts, never inside one. */
.cnsa-record__meta-part {
	white-space: nowrap;
}

/* ------------------------------------------------------------------ body */

/*
 * Less under the contents than round them: the full padding below the button
 * or the stamp left a deep empty band — a chin — along the foot of the card.
 */
.cnsa-record__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--cnsa-rec-aside);
	gap: 48px;
	padding: var(--cnsa-rec-card-pad);
	padding-bottom: calc(var(--cnsa-rec-card-pad) * 0.72);
}

.cnsa-record .cnsa-record__headline {
	margin: 0 0 44px;
	font-family: var(--cnsa-rec-display);
	font-size: 52px;
	line-height: 1.04;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	text-wrap: balance;
	color: var(--cnsa-rec-ink);
}

.cnsa-record .cnsa-record__accent {
	color: var(--cnsa-rec-accent);
}

.cnsa-record__fields {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 26px 56px;
	margin-bottom: 34px;
}

/*
 * The dotted rule under each value is a bottom border on the field, not an
 * underline on the text: it has to run the full column whether the value is
 * two words or eight, the way a ruled form does.
 */
.cnsa-record__field {
	padding-bottom: 14px;
	border-bottom: 1px dashed var(--cnsa-rec-rule);
}

.cnsa-record .cnsa-record__label {
	margin: 0 0 10px;
	font-family: var(--cnsa-rec-display);
	font-size: 14px;
	line-height: 1;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var(--cnsa-rec-muted);
}

.cnsa-record .cnsa-record__value {
	margin: 0;
	font-size: 17px;
	line-height: 1.35;
	color: var(--cnsa-rec-ink);
	overflow-wrap: break-word;
}

.cnsa-record .cnsa-record__value--mono,
.cnsa-record .cnsa-record__value--alert {
	font-family: var(--cnsa-rec-mono);
	letter-spacing: 0.4px;
}

.cnsa-record .cnsa-record__value--alert {
	color: var(--cnsa-rec-alert);
}

.cnsa-record .cnsa-record__value--hand {
	font-family: var(--cnsa-rec-hand);
	font-size: 21px;
}

.cnsa-record .cnsa-record__value--body {
	font-family: var(--cnsa-rec-body);
}

.cnsa-record__notes {
	margin-bottom: 36px;
}

.cnsa-record .cnsa-record__notes-body {
	margin: 0;
	font-family: var(--cnsa-rec-body);
	font-size: 18px;
	font-style: italic;
	line-height: 24px;
	color: var(--cnsa-rec-ink);
}

/*
 * Read more: set like the field labels above it — the display face, capitals,
 * tracked — with an accent underline so it reads as a control and not as
 * another heading, and a chevron that turns over once the notes are open.
 * Every state is named with the block class, because the kit's
 * `.elementor-kit-9 button` rules otherwise paint it as a gold slab.
 */
.cnsa-record .cnsa-record__more {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 0;
	margin: 14px 0 0;
	padding: 0 0 3px;
	border: 0;
	border-bottom: 2px solid var(--cnsa-rec-accent);
	border-radius: 0;
	background: none;
	cursor: pointer;
	font-family: var(--cnsa-rec-display);
	font-size: 16px;
	font-weight: 400;
	font-style: normal;
	line-height: 1.2;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: var(--cnsa-rec-ink);
	transition: color 0.2s ease, border-color 0.2s ease;
}

.cnsa-record .cnsa-record__more:hover,
.cnsa-record .cnsa-record__more:focus {
	background: none;
	color: var(--cnsa-rec-ink);
	border-bottom-color: var(--cnsa-rec-ink);
}

.cnsa-record .cnsa-record__more:focus {
	outline: none;
}

.cnsa-record .cnsa-record__more:focus-visible {
	outline: 2px solid var(--cnsa-rec-accent);
	outline-offset: 4px;
}

.cnsa-record__more-icon {
	width: 12px;
	height: 12px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform 0.25s ease;
}

.cnsa-record__more[aria-expanded='true'] .cnsa-record__more-icon {
	transform: rotate(180deg);
}

/* Two classes, to outrank the kit's `.elementor-kit-9 a` rule (0,1,1), which
   had been resetting this button to regular weight instead of bold. */
.cnsa-record .cnsa-record__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 18px 34px;
	border-radius: 2px;
	background: var(--cnsa-rec-accent);
	font-family: var(--cnsa-rec-body);
	font-weight: 700;
	font-size: 16px;
	line-height: 1.125;
	letter-spacing: 1.8px;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--cnsa-rec-ink);
	transition: filter 0.2s ease;
}

.cnsa-record .cnsa-record__cta:hover,
.cnsa-record .cnsa-record__cta:focus {
	filter: brightness(0.94);
	color: var(--cnsa-rec-ink);
}

/* --------------------------------------------------------- photo and stamp */

.cnsa-record__aside {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
}

/*
 * A print, not a frame: white surround with a deeper lip under the caption,
 * tilted a degree or two so it reads as something placed on the file rather
 * than a cropped image slot.
 */
.cnsa-record__print {
	position: relative;
	width: 100%;
	margin: 0;
	padding: 14px 14px 0;
	background: #fff;
	box-shadow: 0 14px 34px rgba(14, 24, 48, 0.22);
	transform: rotate(var(--cnsa-rec-tilt));
}

.cnsa-record__photo {
	display: block;
	width: 100%;
	aspect-ratio: var(--cnsa-rec-ratio, 7 / 6);
	object-fit: cover;
}

.cnsa-record .cnsa-record__caption {
	padding: 16px 8px 30px;
	font-family: var(--cnsa-rec-body);
	font-size: 14px;
	font-style: italic;
	line-height: 1.4;
	text-align: center;
	color: #5c6470;
}

.cnsa-record__tape {
	position: absolute;
	top: -14px;
	width: 96px;
	height: 30px;
	background: var(--cnsa-rec-tape);
	box-shadow: 0 2px 6px rgba(14, 24, 48, 0.14);
}

.cnsa-record__tape--left {
	left: -26px;
	transform: rotate(-24deg);
}

.cnsa-record__tape--right {
	right: -26px;
	transform: rotate(22deg);
}

/*
 * The stamp overlaps the bottom-right corner of the print. Negative margin
 * rather than absolute positioning, so a record with no photograph does not
 * leave it floating over the notes. The lift is smaller than the print's
 * bottom padding on purpose: it has to clear the caption, which is part of
 * the print and has to stay readable.
 */
.cnsa-record__stamp {
	position: relative;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	align-self: flex-end;
	/* The bottom margin lets it hang into the card's lower padding rather than
	   adding its whole height to the column — the other half of the chin. */
	margin: calc(var(--cnsa-rec-stamp-lift, 16px) * -1) calc(var(--cnsa-rec-stamp-push, 26px) * -1) calc(var(--cnsa-rec-card-pad) * -0.3) 0;
	padding: calc(10px * var(--cnsa-rec-stamp-scale)) calc(18px * var(--cnsa-rec-stamp-scale));
	gap: calc(12px * var(--cnsa-rec-stamp-scale));
	border: calc(3px * var(--cnsa-rec-stamp-scale)) solid var(--cnsa-rec-ink);
	border-radius: 3px;
	background: var(--cnsa-rec-card);
	color: var(--cnsa-rec-ink);
	transform: rotate(var(--cnsa-rec-stamp-tilt));
}

.cnsa-record__stamp--image {
	display: block;
	/* Style → Layout → Stamp size; 125% by default, as reviewed. */
	width: calc(230px * var(--cnsa-rec-stamp-scale));
	height: auto;
	padding: 0;
	border: 0;
	background: none;
}

.cnsa-record__stamp-plane {
	width: calc(32px * var(--cnsa-rec-stamp-scale));
	height: calc(24px * var(--cnsa-rec-stamp-scale));
	fill: currentColor;
}

.cnsa-record__stamp-rule {
	width: calc(2px * var(--cnsa-rec-stamp-scale));
	height: calc(26px * var(--cnsa-rec-stamp-scale));
	background: currentColor;
	opacity: 0.85;
}

.cnsa-record .cnsa-record__stamp-text {
	font-family: var(--cnsa-rec-display);
	font-size: calc(26px * var(--cnsa-rec-stamp-scale));
	line-height: 1;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--cnsa-rec-ink);
}

/* ---------------------------------------------------------------- controls */

.cnsa-record .cnsa-record__nav {
	position: absolute;
	top: 34%;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--cnsa-rec-nav);
	height: var(--cnsa-rec-nav);
	padding: 0;
	border: 0;
	border-radius: 6px;
	cursor: pointer;
	background: var(--cnsa-rec-ink);
	color: #fff;
	box-shadow: 0 10px 24px rgba(14, 24, 48, 0.28);
	transition: background-color 0.2s ease, opacity 0.2s ease;
}

/* Covers the drawn chevron, an icon font glyph and an uploaded SVG alike. */
.cnsa-record .cnsa-record__nav .cnsa-record__nav-icon,
.cnsa-record .cnsa-record__nav .cnsa-record__nav-icon svg,
.cnsa-record .cnsa-record__nav svg {
	display: block;
	width: var(--cnsa-rec-nav-icon);
	height: var(--cnsa-rec-nav-icon);
	font-size: var(--cnsa-rec-nav-icon);
	line-height: 1;
	fill: currentColor;
	color: inherit;
}

.cnsa-record .cnsa-record__nav .cnsa-record__nav-icon svg {
	fill: currentColor;
}

/* An uploaded SVG that draws with strokes rather than fills still needs a
   colour; `currentColor` inherits the tile's own. */
.cnsa-record .cnsa-record__nav .cnsa-record__nav-icon [stroke]:not([stroke='none']) {
	stroke: currentColor;
}

/* Half on the card, half off it, as drawn. */
.cnsa-record__nav--prev {
	left: -32px;
}

.cnsa-record__nav--next {
	right: -32px;
}

.cnsa-record .cnsa-record__nav:hover:not(:disabled),
.cnsa-record .cnsa-record__nav:focus-visible {
	background: #2f4470;
}

.cnsa-record .cnsa-record__nav:disabled {
	opacity: 0.35;
	cursor: default;
}

.cnsa-record__dots {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-top: 34px;
}

.cnsa-record .cnsa-record__dot {
	width: 10px;
	height: 10px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	background: #cfd3da;
	transition: width 0.25s ease, background-color 0.25s ease;
}

.cnsa-record .cnsa-record__dot.is-active {
	width: 34px;
	background: var(--cnsa-rec-ink);
}

.cnsa-record.is-single .cnsa-record__nav,
.cnsa-record.is-single .cnsa-record__dots {
	display: none;
}

.cnsa-record .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* --------------------------------------------------------------- responsive */

@media (max-width: 1200px) {
	/* Inside the card once there is no longer room beside it. */
	.cnsa-record__nav--prev {
		left: 12px;
	}

	.cnsa-record__nav--next {
		right: 12px;
	}
}

@media (max-width: 1024px) {
	.cnsa-record {
		--cnsa-rec-card-pad: 36px;
		--cnsa-rec-aside: 340px;
	}

	.cnsa-record__body {
		gap: 32px;
	}

	.cnsa-record .cnsa-record__headline {
		font-size: 40px;
	}
}

/*
 * A narrow tablet: the photograph goes above the record rather than beside
 * it. Beside it, at 768px, the column left for the text was under 300px wide
 * and the two ruled field columns in it broke names one letter to a line.
 */
@media (max-width: 900px) {
	.cnsa-record__body {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}

	.cnsa-record__aside {
		order: -1;
		width: min(100%, 460px);
		margin: 0 auto;
	}

	/* The photograph is above the text here, so the stamp keeps its space. */
	.cnsa-record__stamp {
		margin-bottom: 0;
	}
}

/*
 * Narrow: one column, photograph first. The fields also drop to one column —
 * two ruled columns at this width leave each value about eight characters
 * wide, which stops looking like a form and starts looking like a bug.
 */
@media (max-width: 767px) {
	.cnsa-record {
		--cnsa-rec-card-pad: 22px;
		--cnsa-rec-pad: 48px;
		--cnsa-rec-gutter: 16px;
		--cnsa-rec-band: 200px;
	}

	.cnsa-record__body {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
	}

	.cnsa-record__aside {
		order: -1;
	}

	.cnsa-record__fields {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
	}

	.cnsa-record .cnsa-record__headline {
		margin-bottom: 28px;
		font-size: 30px;
	}

	.cnsa-record__bar {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
		padding: 16px 22px;
	}

	.cnsa-record .cnsa-record__meta {
		text-align: left;
	}

	.cnsa-record .cnsa-record__cta {
		width: 100%;
		padding: 16px 20px;
		font-size: 14px;
	}

	/*
	 * On a phone the arrows cannot sit on the card: at this width the card is
	 * the full screen and they land on the photograph, the caption and the
	 * stamp. They move down to the dots row instead, where they are also a
	 * proper thumb-sized target at the edges of the screen.
	 */
	.cnsa-record .cnsa-record__nav {
		top: auto;
		bottom: -68px;
		/* Clamped rather than fixed, so a tile the editor made larger is kept
		   and only an oversized one is brought down to fit the row. */
		width: min(var(--cnsa-rec-nav), 56px);
		height: min(var(--cnsa-rec-nav), 56px);
	}

	.cnsa-record__nav--prev {
		left: 0;
	}

	.cnsa-record__nav--next {
		right: 0;
	}

	.cnsa-record__dots {
		height: 48px;
		margin-top: 20px;
	}

	.cnsa-record .cnsa-record__stamp-text {
		font-size: calc(20px * var(--cnsa-rec-stamp-scale));
	}

	.cnsa-record__stamp {
		--cnsa-rec-stamp-push: 0px;
	}

	/*
	 * The header on a phone: the title, then each part of the record meta on
	 * its own line, a touch smaller and less tracked. It wrapped as one string
	 * before, breaking "River / Landing" and leaving a dot at a line end.
	 */
	.cnsa-record .cnsa-record__meta {
		font-size: 11px;
		line-height: 1.55;
		letter-spacing: 1px;
	}

	.cnsa-record__meta-part {
		display: block;
		white-space: normal;
	}

	.cnsa-record__meta-sep {
		display: none;
	}

	/* The print narrower than the card, so its tape lands on the card instead
	   of running off both edges and being cut by them. */
	.cnsa-record__print {
		width: 86%;
		margin: 0 auto;
	}
}

/*
 * Phones → Compact card on phones (on by default). The headline — the name on
 * its own line, "couldn't wait" under it — with a small photograph to its
 * right, then the details, the notes and the button across the card. No
 * stamp, no caption, no tape, and tighter spacing throughout.
 *
 * The main column is display: contents here, so the headline and the photo
 * can share the top row of the body's grid while the fields run under both.
 */
@media (max-width: 767px) {
	.cnsa-record--phone-compact {
		--cnsa-rec-m-photo: 136px;
		--cnsa-rec-m-headline: 34px;
		--cnsa-rec-m-space: 14px;
	}

	.cnsa-record--phone-compact .cnsa-record__body {
		grid-template-columns: minmax(0, 1fr) var(--cnsa-rec-m-photo);
		align-items: start;
		gap: var(--cnsa-rec-m-space) 14px;
		padding-bottom: var(--cnsa-rec-card-pad);
	}

	.cnsa-record--phone-compact .cnsa-record__main {
		display: contents;
	}

	.cnsa-record--phone-compact .cnsa-record__main > * {
		grid-column: 1 / -1;
		margin-top: 0;
		margin-bottom: 0;
	}

	.cnsa-record--phone-compact .cnsa-record__main > .cnsa-record__headline {
		grid-column: 1;
		grid-row: 1;
		align-self: start;
		margin: 0;
		font-size: var(--cnsa-rec-m-headline);
		line-height: 1.02;
		text-wrap: pretty;
	}

	.cnsa-record--phone-compact .cnsa-record__name {
		display: block;
	}

	.cnsa-record--phone-compact .cnsa-record__aside {
		order: 0;
		grid-column: 2;
		grid-row: 1;
		align-self: center;
	}

	.cnsa-record--phone-compact .cnsa-record__print {
		width: 100%;
		margin: 0;
		padding: 5px;
		box-shadow: 0 6px 14px rgba(14, 24, 48, 0.2);
	}

	/* When the caption is left off, the print's lip goes with it. */
	.cnsa-record--phone-no-caption .cnsa-record__caption {
		display: none;
	}

	.cnsa-record--phone-no-stamp .cnsa-record__stamp {
		display: none;
	}

	.cnsa-record--phone-no-tape .cnsa-record__tape {
		display: none;
	}

	/* Two small strips of tape across the top corners, sized to the photo. */
	.cnsa-record--phone-compact .cnsa-record__tape {
		top: -5px;
		width: 40%;
		height: 11px;
	}

	.cnsa-record--phone-compact .cnsa-record__tape--left {
		left: -9%;
		transform: rotate(-24deg);
	}

	.cnsa-record--phone-compact .cnsa-record__tape--right {
		right: -6%;
		transform: rotate(22deg);
	}

	/* The button: its words centred, and a size down. */
	.cnsa-record.cnsa-record--phone-compact .cnsa-record__cta {
		justify-content: center;
		text-align: center;
		padding: 14px 16px;
		font-size: 12.5px;
		letter-spacing: 1.6px;
	}

	/*
	 * The first detail moves up beside the photograph, under the headline, so
	 * the photo's height is used rather than leaving white space under the
	 * name. The rest run the full width below it. The field list is display:
	 * contents so its fields can take their places in the body's own grid.
	 */
	.cnsa-record--phone-compact .cnsa-record__body {
		row-gap: 10px;
	}

	.cnsa-record--phone-compact .cnsa-record__main > .cnsa-record__fields {
		display: contents;
	}

	.cnsa-record--phone-compact .cnsa-record__field {
		grid-column: 1 / -1;
	}

	.cnsa-record--phone-compact .cnsa-record__field:first-child {
		grid-column: 1;
		grid-row: 2;
		align-self: end;
	}

	.cnsa-record--phone-compact .cnsa-record__aside {
		grid-row: 1 / span 2;
		align-self: start;
	}

	.cnsa-record--phone-compact .cnsa-record__main > .cnsa-record__notes,
	.cnsa-record--phone-compact .cnsa-record__main > .cnsa-record__cta {
		margin-top: 6px;
	}

	.cnsa-record--phone-compact .cnsa-record__field {
		padding-bottom: 8px;
	}

	.cnsa-record--phone-compact .cnsa-record .cnsa-record__label,
	.cnsa-record.cnsa-record--phone-compact .cnsa-record__label {
		margin-bottom: 5px;
	}

	.cnsa-record.cnsa-record--phone-compact .cnsa-record__value {
		font-size: 15px;
		line-height: 1.3;
	}

	.cnsa-record.cnsa-record--phone-compact .cnsa-record__value--hand {
		font-size: 18px;
	}

	.cnsa-record.cnsa-record--phone-compact .cnsa-record__notes-body {
		font-size: 16px;
		line-height: 22px;
	}

	.cnsa-record--phone-compact .cnsa-record__bar {
		gap: 4px;
		min-height: 0;
		padding: 12px var(--cnsa-rec-card-pad);
	}
}

@media (prefers-reduced-motion: reduce) {
	/*
	 * `.is-active` carries a second class, so it outranks a single-class
	 * override however late it comes in the file — both states have to be
	 * named here or the fade survives the reader's preference.
	 */
	.cnsa-record__slide,
	.cnsa-record__slide.is-active,
	.cnsa-record .cnsa-record__dot {
		transition: none;
	}

	.cnsa-record .cnsa-record__slide.is-stamp-pending .cnsa-record__stamp {
		opacity: 1;
	}
}

/* The band is wider than the widget, so its wrappers must not clip it. */
.elementor-widget-cnsa-patient-record,
.elementor-widget-cnsa-patient-record > .elementor-widget-container {
	overflow: visible;
}

/* ---------------------------------------------------------- Tangible Giving */

.cnsa-tiers {
	--cnsa-tier-bg: #07090a;
	--cnsa-tier-tile: #13171a;
	--cnsa-tier-edge: #2d3032;
	--cnsa-tier-highlight: #e1524c;
	--cnsa-tier-text: #ffffff;
	--cnsa-tier-muted: #cacaca;
	--cnsa-tier-rule: #4e4f50;
	--cnsa-tier-wash: rgba(7, 9, 10, 0.88);

	--cnsa-tier-max: 1252px;
	--cnsa-tier-pad: 72px;
	--cnsa-tier-tile-pad: 28px;
	--cnsa-tier-gap: 20px;
	--cnsa-tier-radius: 6px;
	--cnsa-tier-cols: 4;
	--cnsa-tier-plane: 54px;
	--cnsa-tier-drum: 26px;
	--cnsa-tier-row: 36px;
	--cnsa-tier-gutter: 24px;

	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: var(--cnsa-tier-pad) var(--cnsa-tier-gutter);
	background-color: var(--cnsa-tier-bg);
	color: var(--cnsa-tier-text);
}

.cnsa-tiers::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -2;
	background-image: var(--cnsa-tier-photo, none);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.cnsa-tiers__wash {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--cnsa-tier-wash);
	pointer-events: none;
}

.cnsa-tiers--full-bleed {
	--cnsa-sbw: 0px;
	width: calc(100vw - var(--cnsa-sbw));
	max-width: calc(100vw - var(--cnsa-sbw));
	margin-left: calc(50% - (100vw - var(--cnsa-sbw)) / 2);
	margin-right: calc(50% - (100vw - var(--cnsa-sbw)) / 2);
}

.cnsa-tiers__inner {
	max-width: var(--cnsa-tier-max);
	margin: 0 auto;
}

/* --------------------------------------------------------------- the header */

/*
 * Heading, then a rule that takes whatever width is left, then the note. The
 * rule is a flexible item rather than a border on the row, so it starts and
 * stops exactly at the text on either side however long that text is.
 */
.cnsa-tiers__header {
	--cnsa-tier-rule-display: block;
	display: flex;
	align-items: center;
	gap: 18px;
	margin-bottom: 30px;
}

.cnsa-tiers .cnsa-tiers__heading {
	margin: 0;
	font-family: 'Bebas Neue', 'Oswald', sans-serif;
	font-size: 30px;
	line-height: 1;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--cnsa-tier-text);
}

/*
 * Figma 2378:5632: a 1.25px dashed stroke, white at 25%, 18px clear of the
 * text on either side. Drawn as a repeating gradient rather than a dashed
 * border, because every browser spaces a dashed border differently and at
 * this weight Chrome's comes out as a dotted line.
 */
.cnsa-tiers__rule {
	display: var(--cnsa-tier-rule-display, block);
	flex: 1 1 auto;
	min-width: 24px;
	height: 1.25px;
	background-image: linear-gradient(to right, var(--cnsa-tier-dash, rgba(255, 254, 254, 0.25)) 0 7px, transparent 7px 12px);
	background-size: 12px 100%;
	background-repeat: repeat-x;
}

.cnsa-tiers__spacer {
	display: var(--cnsa-tier-rule-display, block);
	flex: 1 1 auto;
}

.cnsa-tiers .cnsa-tiers__note {
	flex: 0 0 auto;
	margin: 0;
	font-family: 'Bebas Neue', 'Oswald', sans-serif;
	font-size: 15px;
	line-height: 1;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--cnsa-tier-text);
}

/* ---------------------------------------------------------------- the tiles */

.cnsa-tiers__grid {
	display: grid;
	grid-template-columns: repeat(var(--cnsa-tier-cols), minmax(0, 1fr));
	gap: var(--cnsa-tier-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.cnsa-tiers__item {
	display: flex;
	margin: 0;
}

/*
 * The tile is the whole interactive target, not a button inside it. Written
 * with two classes because the kit styles bare `a` at (0,1,1) — the same trap
 * that turned the record carousel's controls gold.
 */
.cnsa-tiers .cnsa-tiers__tile {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: var(--cnsa-tier-tile-pad);
	border: 1px solid var(--cnsa-tier-edge);
	border-radius: var(--cnsa-tier-radius);
	background: var(--cnsa-tier-tile);
	text-decoration: none;
	color: var(--cnsa-tier-text);
	transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

/*
 * Hover and keyboard focus get the identical treatment. A hover-only highlight
 * means a keyboard reader tabbing through four amounts cannot tell which one
 * they are on, which on a giving page is the difference between donating and
 * giving up.
 */
.cnsa-tiers .cnsa-tiers__tile:hover,
.cnsa-tiers .cnsa-tiers__tile:focus-visible,
.cnsa-tiers .cnsa-tiers__tile.is-featured {
	border-color: var(--cnsa-tier-highlight);
	color: var(--cnsa-tier-text);
	outline: none;
}

.cnsa-tiers .cnsa-tiers__tile:hover .cnsa-tiers__amount,
.cnsa-tiers .cnsa-tiers__tile:focus-visible .cnsa-tiers__amount,
.cnsa-tiers .cnsa-tiers__tile.is-featured .cnsa-tiers__amount {
	color: var(--cnsa-tier-highlight);
}

.cnsa-tiers--lift .cnsa-tiers__tile:hover,
.cnsa-tiers--lift .cnsa-tiers__tile:focus-visible {
	transform: translateY(-3px);
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
}

/*
 * Fixed row height, so the counts sit on one line across all four tiles even
 * though the aircraft is wide and shallow and the drum is narrow and tall.
 * Without it each tile sets its own rhythm and the amounts stop aligning.
 */
.cnsa-tiers__row {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: var(--cnsa-tier-row);
}

.cnsa-tiers__rows {
	display: flex;
	flex-direction: column;
	/* Positioning → Text inside the tiles: centred or right-aligned tiles
	   move the icon rows with the text. */
	align-items: var(--cnsa-justify, stretch);
	gap: 8px;
	margin-bottom: 20px;
}

.cnsa-tiers__icon {
	flex: 0 0 auto;
	width: var(--cnsa-tier-plane);
	max-height: var(--cnsa-tier-row);
	object-fit: contain;
	object-position: var(--cnsa-align, left) center;
}

.cnsa-tiers__row--drum .cnsa-tiers__icon {
	width: var(--cnsa-tier-drum);
}

.cnsa-tiers__icon--empty {
	display: block;
	height: 1px;
}

.cnsa-tiers .cnsa-tiers__count {
	margin: 0;
	/* "× 5" is one thing; never a × on one line and the 5 on the next. */
	white-space: nowrap;
	font-family: 'Poppins', sans-serif;
	font-size: 22px;
	font-weight: 400;
	line-height: 1;
	color: var(--cnsa-tier-text);
}

.cnsa-tiers__times {
	margin-right: 2px;
	opacity: 0.75;
}

.cnsa-tiers .cnsa-tiers__amount {
	margin: 0 0 16px;
	font-family: 'Bebas Neue', 'Oswald', sans-serif;
	font-size: 40px;
	line-height: 1;
	letter-spacing: 0.5px;
	color: var(--cnsa-tier-text);
	transition: color 0.2s ease;
}

.cnsa-tiers__divider {
	display: block;
	height: 1px;
	margin-bottom: 14px;
	background: var(--cnsa-tier-edge);
}

.cnsa-tiers .cnsa-tiers__caption {
	margin: 0;
	/* As drawn: Bebas Neue 14px on 17.6px, tracked 1.32px (Lei #38). */
	font-family: 'Bebas Neue', 'Oswald', sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 17.6px;
	letter-spacing: 1.32px;
	text-transform: uppercase;
	color: var(--cnsa-tier-muted);
}

/* Editor-only note; never rendered on the front end. */
.cnsa-tiers__drift {
	margin-top: 24px;
	padding: 14px 18px;
	border-left: 3px solid var(--cnsa-tier-highlight);
	background: rgba(225, 82, 76, 0.1);
	font-family: 'Poppins', sans-serif;
	font-size: 13px;
	line-height: 1.5;
	color: var(--cnsa-tier-text);
}

.cnsa-tiers__drift ul {
	margin: 6px 0 0;
	padding-left: 18px;
}

/* --------------------------------------------------------------- responsive */

@media (max-width: 1024px) {
	.cnsa-tiers {
		--cnsa-tier-cols: 2;
	}

	.cnsa-tiers .cnsa-tiers__amount {
		font-size: 36px;
	}
}

/*
 * Narrow: the header stacks, because a dashed rule between a heading and a
 * note at this width is about eight pixels of nothing. Tiles stay side by
 * side down to the smallest phone — two amounts next to each other is the
 * comparison the section is making, and one per row loses it.
 */
@media (max-width: 767px) {
	.cnsa-tiers {
		--cnsa-tier-pad: 48px;
		--cnsa-tier-gutter: 16px;
		--cnsa-tier-tile-pad: 18px;
		--cnsa-tier-gap: 12px;
		--cnsa-tier-plane: 42px;
		--cnsa-tier-drum: 20px;
		--cnsa-tier-row: 28px;
	}

	.cnsa-tiers__header {
		--cnsa-tier-rule-display: none;
		flex-wrap: wrap;
		gap: 10px;
		margin-bottom: 22px;
	}

	.cnsa-tiers .cnsa-tiers__heading {
		font-size: 24px;
	}

	.cnsa-tiers .cnsa-tiers__note {
		font-size: 13px;
	}

	.cnsa-tiers .cnsa-tiers__amount {
		font-size: 28px;
	}

	.cnsa-tiers .cnsa-tiers__count {
		font-size: 17px;
	}

	.cnsa-tiers .cnsa-tiers__caption {
		font-size: 12px;
		line-height: 15px;
		letter-spacing: 1px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cnsa-tiers .cnsa-tiers__tile,
	.cnsa-tiers .cnsa-tiers__amount {
		transition: none;
	}

	.cnsa-tiers--lift .cnsa-tiers__tile:hover,
	.cnsa-tiers--lift .cnsa-tiers__tile:focus-visible {
		transform: none;
	}
}

.elementor-widget-cnsa-tangible-give,
.elementor-widget-cnsa-tangible-give > .elementor-widget-container {
	overflow: visible;
}

/* --------------------------------------------------- Rivers Become Runways */

.cnsa-runway {
	--cnsa-run-ink: #223357;
	--cnsa-run-accent: #eeb53f;
	--cnsa-run-card: #fbfbfc;
	--cnsa-run-page: #ffffff;
	--cnsa-run-body: #676767;
	--cnsa-run-muted: #939393;
	--cnsa-run-ghost: #223357;

	--cnsa-run-max: 1520px;
	--cnsa-run-card-side: 40px;
	--cnsa-run-photo: 536px;
	--cnsa-run-pad: 56px;
	--cnsa-run-radius: 24px;
	--cnsa-run-below: 60px;
	--cnsa-run-arc: 600px;
	--cnsa-run-plane: 250px;
	--cnsa-run-number: 150px;
	--cnsa-run-gutter: 24px;
	--cnsa-run-fade: 700ms;
	/* The slide between pillars: one duration and one curve for the card,
	   the number and the photograph, so they arrive together. */
	--cnsa-run-slide: 650ms;
	--cnsa-run-slide-ease: cubic-bezier(0.65, 0, 0.35, 1);
	--cnsa-run-clouds: 150px;
	--cnsa-run-clouds-drop: 34px;
	/*
	 * Two banks side by side, so the weather is longer than a single export —
	 * but held inside the dial's own column. At 168% it reached across into
	 * the paragraph beside it and laid white over the words.
	 */
	--cnsa-run-clouds-span: 124%;
	--cnsa-run-plane-top: 30%;
	--cnsa-run-dial-pivot: 52.1%;
	--cnsa-run-dial-ink: #d6dbe1;
	--cnsa-run-dial-face: #e5e7ed;
	--cnsa-run-dial-period: 60s;
	--cnsa-run-number-y: 56px;
	--cnsa-run-photo-fade: 65%;
	/* The lower part of the fade is solid, so the card's bottom corners sit
	   on plain white rather than on the last of the photograph. */
	--cnsa-run-photo-fade-solid: 45%;
	/* The card's own colour by default, so the card's foot is invisible. */
	--cnsa-run-photo-fade-to: var(--cnsa-run-card);
	/* The cloud's modelling: stronger than before, so a white bank on a
	   near-white card still reads as cloud (Style → Cloud shading). */
	--cnsa-run-cloud-belly: #dfe6f0;
	--cnsa-run-cloud-far: #d3dce8;
	--cnsa-run-cloud-shade: #9dadc6;
	--cnsa-run-cloud-strength: 0.62;
	--cnsa-run-cloud-lift: 0.45;
	/* Two cloud images: widths, and positions from the middle of the dial
	   (x) and the top of the number (y). Read off the design at 1440px. */
	--cnsa-run-cloud-l-w: 500px;
	--cnsa-run-cloud-l-x: 7px;
	--cnsa-run-cloud-l-y: 16px;
	--cnsa-run-cloud-r-w: 320px;
	--cnsa-run-cloud-r-x: 27px;
	--cnsa-run-cloud-r-y: 9px;
	--cnsa-run-cloud-edge: rgba(86, 104, 140, 0.28);
	--cnsa-run-dial-solid: 58%;
	--cnsa-run-fade-alpha: 0.92;
	--cnsa-run-bob: 16px;
	--cnsa-run-bob-time: 4.2s;
	/* Sized from the arc rather than pinned at the comp's 761px, so the wash
	   keeps its proportion when the dial is resized in the editor. */
	--cnsa-run-glow: calc(var(--cnsa-run-arc) * 1.345);
	/* The comp's disc: the dial's own circle, white at the top and settling
	   to a pale blue-grey from about 40% down, softly edged. */
	--cnsa-run-glow-size: 124%;
	--cnsa-run-glow-blur: 40px;
	--cnsa-run-glow-alpha: 1;
	--cnsa-run-glow-from: #ffffff;
	--cnsa-run-glow-to: #eff1f5;
	--cnsa-run-fade-h: 90px;
	/* The number as drawn: navy at 60% at the top of the figure, fading
	   evenly to nothing three quarters of the way down. */
	--cnsa-run-number-solid: 0%;
	--cnsa-run-number-gone: 76%;
	--cnsa-run-number-alpha: 60%;
	/* The three columns across the top: the heading's column only as wide as
	   the heading, so the dial sits close to it, as in the comp. */
	--cnsa-run-top-gap: 32px;
	--cnsa-run-row-space: 24px;
	/* The two cloud images fade out down their own height, so they end
	   on the row's foot rather than hanging into the cards. */
	--cnsa-run-cloud-solid: 38%;
	--cnsa-run-cloud-gone: 78%;
	--cnsa-run-aside-w: 360px;
	--cnsa-run-badge: 52px;
	--cnsa-run-badge-icon: 22px;
	--cnsa-run-badge-bg: #eeb53f;
	--cnsa-run-badge-ink: #223357;
	/* Off by default: a ring in the card colour read as a white notch bitten
	   out of the navy card around the badge. */
	--cnsa-run-badge-ring: 0px;

	position: relative;
	/*
	 * The top padding reserves the photograph band. It has to be padding, not
	 * a margin on the card: a top margin collapses straight out through the
	 * section, which leaves the section's box starting at the card and the
	 * absolutely positioned band drawn outside it entirely.
	 */
	padding: var(--cnsa-run-photo) var(--cnsa-run-gutter) var(--cnsa-run-below);
	background: var(--cnsa-run-page);
	color: var(--cnsa-run-ink);
}

/* --------------------------------------------------------- the photographs */

.cnsa-runway__media {
	position: absolute;
	/* Its own stacking context, so the photographs' order while one slides
	   over another, and the fade above them, stay behind the card. */
	z-index: 0;
	top: 0;
	right: 0;
	left: 0;
	overflow: hidden;
}

/*
 * Two reaches for the photograph. As a band it stops where the card starts;
 * as a fill it runs the height of the section and the card floats on it. The
 * card is opaque either way, so the difference shows at its margins and in
 * the strip below it — which is the whole point of the fill.
 */
/*
 * The photograph fades into white towards the foot of the section, so the
 * base of the card sits in white rather than on the picture. A layer over
 * every photo at once, so it holds through the cross-fades between them.
 */
.cnsa-runway--card-foot-shadow .cnsa-runway__card {
	box-shadow: 0 30px 70px rgba(14, 24, 48, 0.1);
}

.cnsa-runway__media::after {
	content: '';
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	/* Above the photographs, including one sliding in over another. */
	z-index: 3;
	height: var(--cnsa-run-photo-fade);
	background: linear-gradient(
		to bottom,
		transparent 0%,
		var(--cnsa-run-photo-fade-to) calc(100% - var(--cnsa-run-photo-fade-solid)),
		var(--cnsa-run-photo-fade-to) 100%
	);
	pointer-events: none;
}

.cnsa-runway--no-photo-fade .cnsa-runway__media::after {
	display: none;
}

.cnsa-runway--fill-band .cnsa-runway__media {
	height: var(--cnsa-run-photo);
}

.cnsa-runway--fill-section .cnsa-runway__media {
	bottom: 0;
	height: auto;
}

.cnsa-runway--full-bleed .cnsa-runway__media {
	--cnsa-sbw: 0px;
	right: auto;
	left: 50%;
	width: calc(100vw - var(--cnsa-sbw));
	margin-left: calc((100vw - var(--cnsa-sbw)) / -2);
}

/*
 * Stacked, not a track: the band keeps its height whatever is in it and the
 * swap is opacity alone, which stays off the main thread. It also means a
 * pillar with no photograph simply shows the one behind rather than a gap.
 */
.cnsa-runway__photo {
	position: absolute;
	inset: 0;
	opacity: 0;
	background-color: var(--cnsa-run-ink);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	transition: opacity var(--cnsa-run-fade) ease;
}

.cnsa-runway__photo.is-active {
	opacity: 1;
}

/* ---------------------------------------------------------------- the card */

.cnsa-runway__card {
	position: relative;
	z-index: 1;
	/*
	 * The soft wash behind the arc is far larger than the dial and, unclipped,
	 * spilled out over the top of the card as a pale disc laid on the
	 * photograph. `clip` rather than `hidden`: it makes no scroll container,
	 * and the card's own shadow, being outside its box, is untouched.
	 */
	overflow: clip;
	max-width: var(--cnsa-run-max);
	/* Sits at the foot of the photograph, which the section's top padding has
	   already reserved, leaving it visible above and to either side. */
	margin: 0 auto;
	padding: var(--cnsa-run-pad);
	border-radius: var(--cnsa-run-radius);
	background: var(--cnsa-run-card);
	/* Up and to the sides only: a shadow below would mark the card's foot and
	   corners where it meets the fade (Style → Shadow under the card). */
	box-shadow: 0 -40px 60px -24px rgba(14, 24, 48, 0.12);
}

/*
 * Card wider than the column (Style → Card wider than the column): the
 * Elementor container is boxed narrower than the comp, which held the card —
 * and so the dial's column — small. The card is centred on the column and
 * sized against the window instead, never closer to its edge than the side
 * space. Phones keep their own layout.
 */
@media (min-width: 768px) {
	.cnsa-runway--card-wide .cnsa-runway__card {
		width: min(var(--cnsa-run-max), calc(100vw - var(--cnsa-sbw, 0px) - 2 * var(--cnsa-run-card-side)));
		max-width: none;
		margin-left: calc(50% - min(var(--cnsa-run-max), calc(100vw - var(--cnsa-sbw, 0px) - 2 * var(--cnsa-run-card-side))) / 2);
		margin-right: 0;
	}
}

.cnsa-runway__top {
	display: grid;
	/* The dial's column the widest, as drawn, so the arc is not held small. */
	/*
	 * The heading's column is only as wide as the heading and the paragraph's
	 * a set width, so the dial takes everything between them and its arc
	 * starts close to the heading and the button — as in the comp, where the
	 * arc begins about where the heading ends. With equal shares the heading's
	 * column grew with the card and pushed the aircraft away from the button.
	 */
	grid-template-columns: max-content minmax(0, 1fr) minmax(0, min(var(--cnsa-run-aside-w), 25vw));
	align-items: start;
	gap: var(--cnsa-run-top-gap);
	/* Close under the clouds, as in the comp (Style → Space above the cards). */
	margin-bottom: var(--cnsa-run-row-space);
}

/* Two classes: the kit emits `.elementor-kit-9 h2 { color: … }` at (0,1,1). */
.cnsa-runway .cnsa-runway__title {
	margin: 0 0 30px;
	font-family: 'Bebas Neue', 'Oswald', sans-serif;
	font-size: 58px;
	line-height: 1.02;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--cnsa-run-ink);
}

.cnsa-runway .cnsa-runway__title-line {
	display: block;
	color: var(--cnsa-run-ink);
}

.cnsa-runway .cnsa-runway__title-line--accent {
	color: var(--cnsa-run-accent);
}

.cnsa-runway .cnsa-runway__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 17px 30px;
	border-radius: 2px;
	background: var(--cnsa-run-accent);
	font-family: 'Poppins', sans-serif;
	font-weight: 700;
	font-size: 15px;
	line-height: 1.1;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--cnsa-run-ink);
	transition: filter 0.2s ease;
}

.cnsa-runway .cnsa-runway__cta:hover,
.cnsa-runway .cnsa-runway__cta:focus-visible {
	filter: brightness(0.94);
	color: var(--cnsa-run-ink);
}

.cnsa-runway .cnsa-runway__body {
	margin: 0;
	font-family: 'Poppins', sans-serif;
	/* As drawn: 14px on a 24px line (Lei #14). */
	font-size: 14px;
	line-height: 24px;
	color: var(--cnsa-run-body);
}

/* ---------------------------------------------------------------- the dial */

/*
 * The dial's box IS the aircraft's orbit: the script reads this element's
 * width and height and treats the bottom centre as the circle's centre and
 * half the width as its radius. The arc graphic is a half circle drawn to the
 * same box, so the two agree by construction rather than by a magic number.
 */
.cnsa-runway__dial {
	position: relative;
	width: var(--cnsa-run-arc);
	max-width: 100%;
	/*
	 * Half as tall as it is wide, from its real width. This used to be half of
	 * the *requested* width, so whenever the column was narrower than the arc
	 * setting — which at 1440px it is, 451 against 566 — the box came out too
	 * tall and the graphic, stretched to fill it, was drawn as an egg rather
	 * than a circle. A turning dial makes that impossible to miss.
	 */
	aspect-ratio: 2 / 1;
	height: auto;
	margin: 0 auto calc(var(--cnsa-run-clouds-drop) + 10px);
	overflow: visible;
}

/*
 * A large soft panel behind the arc, taken from the comp: a square of pale
 * blue-grey under a heavy layer blur. Its job is contrast — the cloud bank is
 * white on a near-white card, so without something cooler behind it the
 * weather disappears into the panel.
 *
 * It is square and blurred rather than a radial gradient because a radial
 * gradient of this size bands visibly on 8-bit displays, whereas a blurred
 * fill is resolved by the compositor at full precision.
 */
.cnsa-runway__glow {
	position: absolute;
	bottom: calc(var(--cnsa-run-glow) * -0.34);
	left: 50%;
	/*
	 * Zero, not -1. The card is a stacking context of its own, so a negative
	 * index here would put the wash behind the card's background rather than
	 * behind the arc, and it would simply not be there.
	 */
	z-index: 0;
	width: var(--cnsa-run-glow);
	height: var(--cnsa-run-glow);
	border-radius: 50%;
	background: linear-gradient(160deg, var(--cnsa-run-glow-from), var(--cnsa-run-glow-to));
	opacity: var(--cnsa-run-glow-alpha);
	filter: blur(var(--cnsa-run-glow-blur));
	/*
	 * Gone by the foot of the dial. The foot is 66% of the way down this
	 * box (it hangs 34% below the dial), and left whole the wash carried on
	 * for a third of its height below the cloud — tinting the card, so the
	 * white fade under the cloud ended on a visible line against it. The mask
	 * is applied after the blur, so it cuts the blurred result, not the square.
	 */
	-webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 42%, transparent 66%);
	mask-image: linear-gradient(to bottom, #000 0%, #000 42%, transparent 66%);
	transform: translateX(-50%);
	pointer-events: none;
}

/*
 * The wash as drawn in the comp: the dial's own circle, a touch larger than
 * the arc, centred where the arc is — white at its top and a pale blue-grey
 * from about 40% down — carried on down behind the clouds to the foot of the
 * row, so the white clouds have something darker than the card to read
 * against. Sized from the dial's real width rather than the arc setting, so
 * it stays on the circle when the column is narrower than the arc.
 */
.cnsa-runway .cnsa-runway__glow {
	bottom: calc(var(--cnsa-run-glow-size) * -1);
	width: var(--cnsa-run-glow-size);
	height: auto;
	aspect-ratio: 1;
	background: linear-gradient(to bottom, var(--cnsa-run-glow-from) 0%, var(--cnsa-run-glow-to) 42%, var(--cnsa-run-glow-to) 100%);
	/*
	 * Feathered all round, not only at the foot: the disc fades out from a
	 * little past the arc into the card, so there is no edge — no outer
	 * circle — where the blue-grey meets the white. The two masks are
	 * intersected: the round feather, and the cut at the foot of the row.
	 */
	filter: blur(18px);
	-webkit-mask-image:
		radial-gradient(closest-side circle, #000 62%, rgba(0, 0, 0, 0.55) 80%, transparent 100%),
		linear-gradient(to bottom, #000 0%, #000 calc(50% + var(--cnsa-run-clouds-drop) - var(--cnsa-run-fade-h) * 0.5), transparent calc(50% + var(--cnsa-run-clouds-drop) - var(--cnsa-run-fade-h) * 0.2));
	mask-image:
		radial-gradient(closest-side circle, #000 62%, rgba(0, 0, 0, 0.55) 80%, transparent 100%),
		linear-gradient(to bottom, #000 0%, #000 calc(50% + var(--cnsa-run-clouds-drop) - var(--cnsa-run-fade-h) * 0.5), transparent calc(50% + var(--cnsa-run-clouds-drop) - var(--cnsa-run-fade-h) * 0.2));
	-webkit-mask-composite: source-in;
	mask-composite: intersect;
}

/*
 * The wash is wider than the dial and the dial does not clip, so at desktop
 * widths it reaches into the columns either side. Lifting the words out of
 * its way is better than shrinking it: a wash small enough to clear the text
 * is too small to do its job behind the cloud.
 */
.cnsa-runway__intro,
.cnsa-runway__aside {
	position: relative;
	z-index: 1;
}

/*
 * The frame the arc turns inside.
 *
 * The arc is drawn on a circle whose centre is the bottom of the dial, so a
 * turn has to pivot there — which sends the drawn half sweeping down across
 * the pillars for half of every revolution. This clips it to the dial's box.
 * The cloud, the wash and the aircraft are siblings of the frame, not children
 * of it, so they still hang below as before.
 */
.cnsa-runway__gauge {
	position: absolute;
	inset: 0;
	z-index: 1;
	overflow: hidden;
	pointer-events: none;
	/*
	 * The face dissolves into the card over the lower part of the dial,
	 * rather than stopping on the straight line where the frame clips the
	 * circle. That line is a half-opaque grey against white, and only a tall
	 * fade could cover it; this removes it at any fade height, including a
	 * short one or none.
	 */
	-webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 var(--cnsa-run-dial-solid), transparent 100%);
	mask-image: linear-gradient(to bottom, #000 0%, #000 var(--cnsa-run-dial-solid), transparent 100%);
}

/*
 * The dial is a full circle, of which only the top half is ever shown.
 *
 * It is placed by the centre of its circle rather than by its box: `top: 100%`
 * puts the element's top edge on the foot of the dial, and the `translate`
 * lifts it by the pivot's share of its own height (a translate percentage
 * resolves against the element itself), which lands the circle's centre
 * exactly on that foot at any width. The same point is the transform origin,
 * so a turn pivots there and the circle never wanders off its mark.
 */
.cnsa-runway__arc {
	display: block;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 1;
	width: 100%;
	height: auto;
	max-width: none;
	translate: 0 calc(var(--cnsa-run-dial-pivot) * -1);
	transform-origin: 50% var(--cnsa-run-dial-pivot);
}

.cnsa-runway__arc--drawn {
	--cnsa-run-dial-pivot: 50%;
	aspect-ratio: 1;
	overflow: visible;
}

/* Colours live here, not in attributes, so they can be themed per widget. */
.cnsa-runway__ticks {
	stroke: var(--cnsa-run-dial-ink);
	stroke-width: 5;
	/*
	 * The group is drawn about 0,0, so this is the circle's centre. Stated
	 * rather than left to the SVG default, which older engines resolved
	 * against the element's bounding box instead.
	 */
	transform-box: view-box;
	transform-origin: 0 0;
}

.cnsa-runway__face-top {
	stop-color: #ffffff;
	stop-opacity: 0;
}

.cnsa-runway__face-foot {
	stop-color: var(--cnsa-run-dial-face);
	stop-opacity: 0.5;
}

.cnsa-runway__ring-top {
	stop-color: var(--cnsa-run-dial-ink);
	stop-opacity: 1;
}

.cnsa-runway__ring-foot {
	stop-color: var(--cnsa-run-dial-ink);
	stop-opacity: 0.08;
}

/*
 * One turn per change. The script accumulates the angle and never reduces it,
 * so every turn is clockwise and a burst of changes cannot unwind one another.
 * Drawn, only the ticks are in the turning group; uploaded, the whole graphic
 * turns.
 */
.cnsa-runway--spin [data-cnsa-dial-turn] {
	transition: transform 1400ms cubic-bezier(0.42, 0, 0.2, 1);
	will-change: transform;
}

@keyframes cnsa-runway-dial-spin {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}

.cnsa-runway--spin-always [data-cnsa-dial-turn] {
	animation: cnsa-runway-dial-spin var(--cnsa-run-dial-period) linear infinite;
}

.cnsa-runway__numbers {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
	/* The whole row, so the per-number entrance transform is left alone. */
	translate: 0 var(--cnsa-run-number-y);
	display: grid;
	grid-template-areas: 'n';
	justify-items: center;
	pointer-events: none;
}

.cnsa-runway .cnsa-runway__number {
	grid-area: n;
	font-family: 'Bebas Neue', 'Oswald', sans-serif;
	font-size: var(--cnsa-run-number);
	line-height: 0.82;
	letter-spacing: 2px;
	color: var(--cnsa-run-ghost);
	/* At its own strength, then faded down the figure by the mask below. */
	color: color-mix(in srgb, var(--cnsa-run-ghost) var(--cnsa-run-number-alpha), transparent);
	opacity: 0;
	transform: translateY(10px);
	transition: opacity var(--cnsa-run-fade) ease, transform var(--cnsa-run-fade) ease;

	/*
	 * The figure dissolves downward rather than being cut off. Measured from
	 * the comp: solid at the top, gone by the baseline. A hard stop — an
	 * overlay in the card colour, or a clip — leaves a visible edge across
	 * the glyph, which is what gives away that something is covering it.
	 */
	-webkit-mask-image: linear-gradient(to bottom, #000 var(--cnsa-run-number-solid), transparent var(--cnsa-run-number-gone, 100%));
	mask-image: linear-gradient(to bottom, #000 var(--cnsa-run-number-solid), transparent var(--cnsa-run-number-gone, 100%));
}

.cnsa-runway .cnsa-runway__number.is-active {
	opacity: 1;
	transform: none;
}

/*
 * The cloud bank sits across the foot of the dial, over the number and under
 * the aircraft. It is wider than the dial on purpose: cloud that stops exactly
 * at the arc's edge reads as a cut-out rather than weather.
 */
.cnsa-runway__cloudbank {
	position: absolute;
	bottom: calc(var(--cnsa-run-clouds-drop) * -1);
	left: 50%;
	/*
	 * Over the white fade, not under it. Laid under the fade, the cloud was
	 * washed out by it and read as more fade; on top, the fade becomes the
	 * white the cloud sits in, and the cloud keeps its shape.
	 */
	z-index: 3;
	display: flex;
	align-items: flex-end;
	width: var(--cnsa-run-clouds-span);
	height: var(--cnsa-run-clouds);
	transform: translateX(-50%);
	/* Only the ends are faded here; each style takes care of its own foot. */
	-webkit-mask-image: linear-gradient(to right, transparent 0%, #000 9%, #000 91%, transparent 100%);
	mask-image: linear-gradient(to right, transparent 0%, #000 9%, #000 91%, transparent 100%);
	pointer-events: none;
}

/*
 * An uploaded cloud, shown whole.
 *
 * It used to be cropped with `object-fit: cover` into a box as tall as the
 * cloud-height setting, and a wide, low cloudscape cover-cropped into a
 * near-square box keeps only its middle third, blown up — a soft white blob
 * rather than a cloud. Contained, the artwork keeps its proportions and its
 * outline. The faint cool shadow gives a plain white cloud an edge to read by
 * against the white card; artwork with its own shading barely changes.
 */
.cnsa-runway__cloudbank--image {
	-webkit-mask-image:
		linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%),
		linear-gradient(to bottom, #000 0%, #000 72%, transparent 100%);
	mask-image:
		linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%),
		linear-gradient(to bottom, #000 0%, #000 72%, transparent 100%);
	-webkit-mask-composite: source-in;
	mask-composite: intersect;
}

.cnsa-runway__clouds {
	flex: 1 1 50%;
	min-width: 0;
	height: 100%;
	object-fit: contain;
	object-position: center bottom;
}

.cnsa-runway__cloudbank--image .cnsa-runway__clouds {
	filter:
		drop-shadow(0 3px 6px var(--cnsa-run-cloud-edge))
		drop-shadow(0 6px 14px rgba(70, 90, 128, calc(0.34 * var(--cnsa-run-cloud-lift))));
}

/* Two copies side by side, the second mirrored, meeting on a matched edge. */
.cnsa-runway__clouds--echo {
	transform: scaleX(-1);
}

/* The drawn bank: one piece across the whole width, standing on the foot. */
.cnsa-runway__clouds--svg {
	display: block;
	flex: 1 1 100%;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.cnsa-runway__cloud-belly { stop-color: var(--cnsa-run-cloud-belly); }
.cnsa-runway__cloud-far { stop-color: var(--cnsa-run-cloud-far); }
.cnsa-runway__cloud-shadow {
	fill: var(--cnsa-run-cloud-shade);
	opacity: var(--cnsa-run-cloud-strength);
}

.cnsa-runway__cloud-back {
	opacity: 0.9;
}

/* Style → Cloud outline: the soft shadow drawn round the cloud's silhouette. */
.cnsa-runway__cloud-lift {
	flood-opacity: calc(0.34 * var(--cnsa-run-cloud-lift));
}

/*
 * Behind the cloud, in front of the white fade: the cloud's own shape covers
 * the foot of the number, so it sinks into the weather. Behind the fade too,
 * the wash rising from the foot of the dial would bleach the whole figure out
 * long before the cloud reached it.
 */
.cnsa-runway--number-cloud .cnsa-runway__numbers {
	z-index: 2;
}

/* Gone before the cloud's own foot thins out, so no part of it shows
   through underneath. */
.cnsa-runway--number-cloud {
	--cnsa-run-number-gone: 76%;
}

.cnsa-runway--number-cloud .cnsa-runway__fade {
	z-index: 1;
}

/*
 * Two cloud images, one either side of the number.
 *
 * The pair hangs from a point with no size: the middle of the dial across,
 * and the top of the number down — the number's box stands on the foot of
 * the dial, moved by its offset, and is 0.82 of its font size tall. Each
 * cloud is placed from that point by its own edge, so the pair keeps its
 * arrangement round the figure at any width and goes with it when it moves.
 * Level with the drawn bank: over the number, under the aircraft.
 *
 * They overhang the dial into the columns either side, as in the design; the
 * card clips them at its edges, so a wide cloud can never scroll the page
 * sideways on a phone.
 */
.cnsa-runway__cloudpair {
	position: absolute;
	top: calc(100% + var(--cnsa-run-number-y) - var(--cnsa-run-number) * 0.82);
	left: 50%;
	z-index: 3;
	width: 0;
	height: 0;
	pointer-events: none;
}

/* Two classes, because `.elementor img` caps an image at its box's width. */
.cnsa-runway .cnsa-runway__cloud {
	position: absolute;
	display: block;
	max-width: none;
	height: auto;
	pointer-events: none;
	user-select: none;
	/*
	 * Faded out down its own height (Style → Clouds fade out). Over the
	 * wash, not under it, the clouds were never landed by it and hung their
	 * full height down into the cards, leaving a tall band of white between
	 * the dial and the pillars. The comp cuts them off at the row's foot.
	 */
	-webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 var(--cnsa-run-cloud-solid), transparent var(--cnsa-run-cloud-gone));
	mask-image: linear-gradient(to bottom, #000 0%, #000 var(--cnsa-run-cloud-solid), transparent var(--cnsa-run-cloud-gone));
}

.cnsa-runway .cnsa-runway__cloud--left {
	top: var(--cnsa-run-cloud-l-y);
	right: calc(var(--cnsa-run-cloud-l-x) * -1);
	width: var(--cnsa-run-cloud-l-w);
}

.cnsa-runway .cnsa-runway__cloud--right {
	top: var(--cnsa-run-cloud-r-y);
	left: var(--cnsa-run-cloud-r-x);
	width: var(--cnsa-run-cloud-r-w);
}

.cnsa-runway .cnsa-runway__cloud.is-flipped {
	transform: scaleX(-1);
}

/*
 * Clouds drift over the text beside the dial: off. The heading, button and
 * paragraph come forward of everything in the dial — the clouds, and the
 * aircraft on the rare turn that brings it over the paragraph's edge.
 */
.cnsa-runway--text-over-clouds .cnsa-runway__intro,
.cnsa-runway--text-over-clouds .cnsa-runway__aside {
	z-index: 5;
}

/*
 * In front of the cloud and the fade, for a number that has been moved down
 * into them. Level with the aircraft and earlier in the markup, so the
 * aircraft still passes in front of it.
 */
.cnsa-runway--number-front .cnsa-runway__numbers {
	z-index: 4;
}

/*
 * A wash of the card colour rising from the bottom of the dial. This is what
 * cuts the number and the cloud off, so neither has to stop on a hard edge —
 * and it is why the number can be set large enough to read without running
 * into the pillars underneath.
 */
.cnsa-runway__fade {
	position: absolute;
	/*
	 * Derived from the cloud bank rather than set to a number, so widening the
	 * weather cannot leave its ends hanging past the wash that is meant to
	 * land them. A 168% bank overhangs 34% each side; this is that, stated
	 * once.
	 */
	right: calc((var(--cnsa-run-clouds-span) - 100%) / -2);
	bottom: calc(var(--cnsa-run-clouds-drop) * -1);
	left: calc((var(--cnsa-run-clouds-span) - 100%) / -2);
	/* Under the cloud: the white it sits in. */
	z-index: 2;
	height: var(--cnsa-run-fade-h);
	/*
	 * Clear at the top, strong by the middle, and the card colour for the
	 * last quarter, so it lands on the card with nothing left to see. The
	 * strength is the editor's; the landing is not.
	 */
	background: linear-gradient(
		to bottom,
		rgba(255, 255, 255, 0) 0%,
		rgba(255, 255, 255, var(--cnsa-run-fade-alpha)) 50%,
		var(--cnsa-run-card) 75%,
		var(--cnsa-run-card) 100%
	);
	/*
	 * The wash is a rectangle with a vertical gradient, so on its own it has
	 * two hard vertical edges — and being the brightest thing in the dial, it
	 * was those edges, not the cloud's, that drew a white slab across the
	 * section. Same fade as the bank it lands, so the two end together.
	 */
	-webkit-mask-image: linear-gradient(to right, transparent 0%, #000 18%, #000 82%, transparent 100%);
	mask-image: linear-gradient(to right, transparent 0%, #000 18%, #000 82%, transparent 100%);
	pointer-events: none;
}

/*
 * Positioned from the dial's own origin and moved by transform only, so the
 * orbit never triggers layout. The script owns the transform outright — the
 * parked position before it runs comes from top/left, which it then zeroes.
 */
.cnsa-runway__plane {
	position: absolute;
	top: 0;
	left: 50%;
	z-index: 4;
	width: var(--cnsa-run-plane);
	height: auto;
	/* Parks the aircraft at the top of the arc before the script runs. The
	   script then zeroes top/left and carries the whole offset in the
	   transform, so the two never stack. */
	transform: translate(-50%, -50%);
	transform-origin: 50% 50%;
	will-change: transform, opacity;
	pointer-events: none;
}

.cnsa-runway__plane--empty {
	height: 2px;
}

/*
 * Riding, rather than flying a turn.
 *
 * The aircraft holds its station at the top of the arc and rises and falls,
 * which is what an aircraft in level flight looks like from the ground. A
 * turn on every card change said "carousel"; this says "flying".
 *
 * It animates the `translate` property, not `transform`. Independent
 * transform properties are applied before `transform`, so this composes with
 * the centring translate(-50%, -50%) above instead of overwriting it — which
 * is what lets the ride be pure CSS with no measurement and no script.
 */
@keyframes cnsa-runway-bob {
	0%,
	100% {
		translate: 0 calc(var(--cnsa-run-bob) * -0.5);
	}

	50% {
		translate: 0 calc(var(--cnsa-run-bob) * 0.5);
	}
}

.cnsa-runway--bob .cnsa-runway__plane {
	/*
	 * On the dial rather than straddling its top edge. At the apex the
	 * aircraft is centred on the dial's top, so half of it is outside the
	 * dial and its nose is cut off by the top of the card. The script does
	 * not run in this mode, so top/left are the position rather than a
	 * placeholder for one.
	 */
	top: var(--cnsa-run-plane-top);
	animation: cnsa-runway-bob var(--cnsa-run-bob-time) ease-in-out infinite;
}

/* ------------------------------------------------------------- the pillars */

.cnsa-runway__pillars {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * Every pillar carries the lit pillar's padding and border at all times, and
 * the lit state only changes colour. Without that the row reflows each time
 * the carousel advances — four columns nudging sideways every five seconds,
 * which is exactly the kind of movement a reader notices and cannot explain.
 */
.cnsa-runway__pillar {
	position: relative;
	margin: 0;
	padding: 46px 26px 30px;
	border-radius: 14px;
	border: 1px solid transparent;
	background: transparent;
	text-align: center;
	transition: background-color var(--cnsa-run-fade) ease, color var(--cnsa-run-fade) ease;
}

.cnsa-runway__pillar.is-active {
	background: var(--cnsa-run-ink);
}

/*
 * The stretched control. Two classes and the reset because these are <button>
 * and <a> elements: the kit styles both at (0,1,1) and a single-class rule
 * loses to it — the same trap that turned the record carousel's controls into
 * gold rectangles. The inline style on the element itself handles the
 * positioning, so a stale stylesheet cannot drop it back into the card.
 */
.cnsa-runway a.cnsa-runway__hit,
.cnsa-runway button.cnsa-runway__hit {
	-webkit-appearance: none;
	appearance: none;
	z-index: 2;
	/* No width or height: `inset: 0` on the element already sizes it to the
	   card, and a 100% width would resolve against the padding box and come
	   up short by the border. */
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: inherit;
	cursor: pointer;
	background: none;
	box-shadow: none;
	font: inherit;
	text-decoration: none;
	color: inherit;
}

/*
 * The ring goes on the card, not on the invisible control sitting over it —
 * an outline on a transparent overlay is an outline nobody can associate with
 * anything. Replaced rather than merely removed: a control with no visible
 * focus state is a control a keyboard reader cannot find.
 *
 * Keyboard focus only. It used to follow :focus-within, which a mouse click
 * also sets — clicking a card focuses its button — and that left the gold
 * border round a card after it had been clicked. :focus-visible is the
 * browser's own judgement of when a ring is wanted, and it says no for a
 * click or a tap. Navy rather than gold, so it reads as a focus ring and not
 * as a second style of selected card.
 */
.cnsa-runway .cnsa-runway__hit:focus,
.cnsa-runway .cnsa-runway__hit:focus-visible {
	outline: none;
}

.cnsa-runway__pillar:has(.cnsa-runway__hit:focus-visible) {
	outline: 2px solid var(--cnsa-run-ink);
	outline-offset: 4px;
}

@supports not selector(:has(*)) {
	.cnsa-runway__pillar:focus-within {
		outline: 2px solid var(--cnsa-run-ink);
		outline-offset: 4px;
	}
}

.cnsa-runway__badge {
	position: absolute;
	top: 0;
	left: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--cnsa-run-badge);
	height: var(--cnsa-run-badge);
	border: var(--cnsa-run-badge-ring) solid var(--cnsa-run-card);
	border-radius: 50%;
	background: var(--cnsa-run-badge-bg);
	opacity: 0;
	transform: translate(-50%, -50%) scale(0.8);
	transition: opacity var(--cnsa-run-fade) ease, transform var(--cnsa-run-fade) ease;
}

.cnsa-runway__pillar.is-active .cnsa-runway__badge {
	opacity: 1;
	transform: translate(-50%, -50%) scale(1);
}

/* Covers the drawn cross, an icon font glyph, an uploaded SVG and artwork. */
.cnsa-runway__badge svg,
.cnsa-runway__badge img,
.cnsa-runway__badge i {
	display: block;
	width: var(--cnsa-run-badge-icon);
	height: var(--cnsa-run-badge-icon);
	font-size: var(--cnsa-run-badge-icon);
	line-height: 1;
	object-fit: contain;
	fill: var(--cnsa-run-badge-ink);
	color: var(--cnsa-run-badge-ink);
}

.cnsa-runway__badge [stroke]:not([stroke='none']) {
	stroke: var(--cnsa-run-badge-ink);
}

/*
 * Slide: one navy panel travels between the cards instead of each card
 * fading its own fill in and out. The script sizes it to the lit card and
 * moves it by transform; the card itself stays transparent. Until the script
 * has placed it — and for anyone without script — the lit card keeps its own
 * fill, so there is never a moment with no card lit.
 */
.cnsa-runway__row {
	position: relative;
}

.cnsa-runway__row > .cnsa-runway__pillars {
	position: relative;
	z-index: 1;
}

.cnsa-runway__lit {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	width: 0;
	height: 0;
	border-radius: 14px;
	background: var(--cnsa-run-ink);
	opacity: 0;
	pointer-events: none;
	will-change: transform;
	transition:
		transform var(--cnsa-run-slide) var(--cnsa-run-slide-ease),
		width var(--cnsa-run-slide) var(--cnsa-run-slide-ease),
		height var(--cnsa-run-slide) var(--cnsa-run-slide-ease);
}

.cnsa-runway--slide.is-lit-ready .cnsa-runway__lit {
	opacity: 1;
}

.cnsa-runway--slide.is-lit-ready .cnsa-runway__pillar,
.cnsa-runway--slide.is-lit-ready .cnsa-runway__pillar.is-active {
	background: transparent;
	transition: none;
}

/*
 * The words change colour as the panel reaches them, not as it sets off —
 * white text on the pale card, before the navy arrives, would vanish for a
 * moment. A transition uses the timing of the state it is going to, so the
 * card being lit waits and the card being left changes at once.
 */
.cnsa-runway--slide .cnsa-runway__pillar-title,
.cnsa-runway--slide .cnsa-runway__pillar-text {
	transition: color 160ms ease;
}

.cnsa-runway--slide .cnsa-runway__pillar.is-active .cnsa-runway__pillar-title,
.cnsa-runway--slide .cnsa-runway__pillar.is-active .cnsa-runway__pillar-text {
	transition: color 220ms ease calc(var(--cnsa-run-slide) * 0.5);
}

/* The badge pops on as the panel lands, rather than fading. */
.cnsa-runway--slide .cnsa-runway__badge {
	transform: translate(-50%, -50%) scale(0.2);
	transition: opacity 120ms ease, transform 160ms ease;
}

.cnsa-runway--slide .cnsa-runway__pillar.is-active .cnsa-runway__badge {
	transform: translate(-50%, -50%) scale(1);
	transition:
		opacity 120ms ease calc(var(--cnsa-run-slide) * 0.6),
		transform 460ms cubic-bezier(0.34, 1.56, 0.64, 1) calc(var(--cnsa-run-slide) * 0.6);
}

/*
 * The number rolls: the new one rises out of the cloud as the old one goes up
 * and out of sight. The row is clipped top and bottom so neither is seen
 * outside it — sideways it is left generous, so nothing of the glyphs is cut.
 * Resting, the lit number is in place and the rest wait below the clip; the
 * script animates the two that are changing.
 */
.cnsa-runway--slide .cnsa-runway__numbers {
	clip-path: inset(-18% -40% 0 -40%);
}

/*
 * Sunk into the cloud, the number's own foot is under the cloud's soft lower
 * edge, so a number rolling up from there was seen passing beneath the cloud
 * before it went behind it. Clipped higher, it rises out of the solid middle
 * of the cloud instead. The part cut off is already dissolved and covered.
 */
.cnsa-runway--slide.cnsa-runway--number-cloud .cnsa-runway__numbers {
	clip-path: inset(-18% -40% 24% -40%);
}

/*
 * With two cloud images the clouds reach well below the number, so the roll
 * can start from further down — exactly where the figure has faded to
 * nothing (86% of it), so see-through, wispy artwork never shows the cut.
 */
.cnsa-runway--slide.cnsa-runway--number-cloud.cnsa-runway--clouds-pair .cnsa-runway__numbers {
	clip-path: inset(-18% -40% 14% -40%);
}

.cnsa-runway.cnsa-runway--slide .cnsa-runway__number {
	opacity: 1;
	transform: translateY(115%);
	transition: none;
}

.cnsa-runway.cnsa-runway--slide .cnsa-runway__number.is-active {
	transform: none;
}

/* The photographs are moved by the script too; no cross-fade underneath. */
.cnsa-runway--photo-slide .cnsa-runway__photo {
	transition: none;
}

.cnsa-runway .cnsa-runway__pillar-title {
	margin: 0 0 14px;
	font-family: 'Bebas Neue', 'Oswald', sans-serif;
	font-size: 28px;
	line-height: 32px;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: var(--cnsa-run-ink);
	transition: color var(--cnsa-run-fade) ease;
}

.cnsa-runway .cnsa-runway__pillar.is-active .cnsa-runway__pillar-title {
	color: var(--cnsa-run-accent);
}

.cnsa-runway .cnsa-runway__pillar-text {
	margin: 0;
	font-family: 'Poppins', sans-serif;
	font-size: 16px;
	line-height: 1.6;
	color: var(--cnsa-run-muted);
	transition: color var(--cnsa-run-fade) ease;
}

.cnsa-runway .cnsa-runway__pillar.is-active .cnsa-runway__pillar-text {
	color: #ffffff;
}

/* Four cards across below 1200px leave about 200px of line: a size down so the
   longer titles stay on one line. Two across (tablets) and one (phones) have
   room for the design's 28px again. */
@media (min-width: 1025px) and (max-width: 1200px) {
	.cnsa-runway .cnsa-runway__pillar-title {
		font-size: 23px;
		line-height: 28px;
	}

	.cnsa-runway .cnsa-runway__pillar-text {
		font-size: 15px;
	}
}

/* --------------------------------------------------------------- responsive */

@media (max-width: 1200px) {
	.cnsa-runway {
		--cnsa-run-pad: 36px;
		--cnsa-run-arc: 420px;
		--cnsa-run-plane: 190px;
		--cnsa-run-number: 110px;
		--cnsa-run-number-y: 36px;
		--cnsa-run-clouds: 116px;
		--cnsa-run-clouds-drop: 30px;
		--cnsa-run-cloud-l-w: 366px;
		--cnsa-run-cloud-l-x: 5px;
		--cnsa-run-cloud-l-y: 12px;
		--cnsa-run-cloud-r-w: 236px;
		--cnsa-run-cloud-r-x: 20px;
		--cnsa-run-cloud-r-y: 7px;
		--cnsa-run-fade-h: 60px;
	}

	.cnsa-runway .cnsa-runway__title {
		font-size: 44px;
	}

	/* A laptop is too narrow for a paragraph column at its full width
	   beside a dial of any size: the two share what is left. */
	.cnsa-runway__top {
		grid-template-columns: max-content minmax(0, 1fr) minmax(0, 0.8fr);
		gap: min(var(--cnsa-run-top-gap), 28px);
	}
}

/*
 * Below the three-column layout the dial moves to the top and spans the width.
 * It is the only part of the section that moves, so squeezing it into a third
 * of a tablet column is the one thing not worth doing here.
 */
@media (max-width: 1024px) {
	.cnsa-runway__top {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 32px;
	}

	.cnsa-runway__dial {
		grid-column: 1 / -1;
		grid-row: 1;
	}

	.cnsa-runway__pillars {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.cnsa-runway {
		--cnsa-run-pad: 22px;
		--cnsa-run-gutter: 14px;
		--cnsa-run-photo: 280px;
		--cnsa-run-arc: 300px;
		--cnsa-run-plane: 140px;
		--cnsa-run-number: 76px;
		--cnsa-run-number-y: 36px;
		--cnsa-run-radius: 16px;
		--cnsa-run-clouds: 86px;
		--cnsa-run-clouds-drop: 56px;
		--cnsa-run-cloud-l-w: 280px;
		--cnsa-run-cloud-l-x: 4px;
		--cnsa-run-cloud-l-y: 8px;
		--cnsa-run-cloud-r-w: 180px;
		--cnsa-run-cloud-r-x: 14px;
		--cnsa-run-cloud-r-y: 5px;
		--cnsa-run-fade-h: 52px;
		/*
		 * Both of these are measured from the arc and both hang outside it, so
		 * on a phone they are the section's only route to a sideways scroll.
		 * They stay wider than the dial — which is what makes the weather read
		 * as weather — but not wider than the card that holds it.
		 */
		--cnsa-run-clouds-span: 116%;
		--cnsa-run-glow: calc(var(--cnsa-run-arc) * 1.15);
		--cnsa-run-glow-blur: 30px;
	}

	.cnsa-runway__top {
		grid-template-columns: minmax(0, 1fr);
		gap: 26px;
		margin-bottom: 36px;
	}

	.cnsa-runway .cnsa-runway__title {
		font-size: 34px;
		margin-bottom: 22px;
	}

	.cnsa-runway .cnsa-runway__cta {
		width: 100%;
		padding: 15px 18px;
		font-size: 13px;
	}

	.cnsa-runway__pillars {
		grid-template-columns: minmax(0, 1fr);
		gap: 12px;
	}

	.cnsa-runway__pillar {
		padding: 40px 20px 24px;
	}

	/*
	 * A band on a phone, never the whole section. Filling the section works on
	 * a desktop, where the section is about as tall as it is wide; stacked on a
	 * phone the same section is over 2,000px tall and 390 wide, so a landscape
	 * photograph covering it is cropped to a vertical sliver of its middle —
	 * on staging it read as zoomed right in and soft. As a band it keeps most
	 * of its width. It runs a little under the top of the card and fades out
	 * there, as it does at the foot of the section on a desktop.
	 */
	.cnsa-runway--fill-section .cnsa-runway__media {
		bottom: auto;
		height: calc(var(--cnsa-run-photo) + 56px);
	}

	.cnsa-runway {
		padding-top: calc(var(--cnsa-run-photo) - 24px);
	}
}

/* ---------------------------------------------- phones: text + carousel */

/*
 * Phones → Layout on phones → carousel (the default). The heading, paragraph
 * and button centred at the top, then the carousel card, then its arrows and
 * dots. Each slide carries its pillar's photograph and card; the dial, the
 * clouds, the aircraft and the numbers are one layer over the track, so they
 * hold still while the slides move beneath them and only the number changes.
 *
 * The desktop layout and this one are both printed; each is display: none
 * where the other shows, which also keeps the hidden copy out of the
 * accessibility tree.
 */
.cnsa-runway__phone {
	display: none;
}

@media (max-width: 767px) {
	.cnsa-runway {
		--cnsa-run-m-photo: 220px;
		--cnsa-run-m-dial: 330px;
		--cnsa-run-m-plane: 170px;
		--cnsa-run-m-number: 96px;
		--cnsa-run-m-space: 20px;
		--cnsa-run-m-gap: 32px;
		--cnsa-run-m-pad: 12px;
		--cnsa-run-m-arrow: 44px;
		--cnsa-run-m-slide: 700ms;
	}

	.cnsa-runway.cnsa-runway--phone-carousel {
		padding-top: 48px;
		padding-bottom: 48px;
	}

	.cnsa-runway--phone-carousel .cnsa-runway__media,
	.cnsa-runway--phone-carousel .cnsa-runway__card {
		display: none;
	}

	.cnsa-runway--phone-carousel .cnsa-runway__phone {
		display: flex;
		flex-direction: column;
		gap: var(--cnsa-run-m-gap);
	}

	/* The text: no box of its own, centred. */
	.cnsa-runway__m-intro {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 20px;
		padding: 0 4px;
		text-align: center;
	}

	.cnsa-runway .cnsa-runway__m-intro .cnsa-runway__title,
	.cnsa-runway .cnsa-runway__m-intro .cnsa-runway__body {
		margin: 0;
		text-align: center;
	}

	/* The carousel card. */
	.cnsa-runway__m-carousel {
		position: relative;
	}

	.cnsa-runway__m-frame {
		padding: var(--cnsa-run-m-pad);
		border-radius: var(--cnsa-run-radius);
		background: var(--cnsa-run-m-box, var(--cnsa-run-card));
		box-shadow: 0 18px 44px rgba(14, 24, 48, 0.1);
	}

	.cnsa-runway__m-viewport {
		/* The dial layer reads the desktop's own tokens; set here from the
		   phone sizes so its clouds and number sit as they do on desktop. */
		--cnsa-run-arc: var(--cnsa-run-m-dial);
		--cnsa-run-number: var(--cnsa-run-m-number);
		position: relative;
		overflow: hidden;
		border-radius: calc(var(--cnsa-run-radius) - 4px);
		touch-action: pan-y;
	}

	/*
	 * Above the dial layer. Each slide is its own stacking context while it
	 * glides (it is scaled), so a card could not climb over the layer from
	 * inside it: the fade under the clouds cut the top off the badge. The
	 * slides are clear everywhere but their photo and card, so the dial, the
	 * clouds and the number still show through the room between them.
	 */
	.cnsa-runway__m-track {
		position: relative;
		z-index: 3;
		display: flex;
		gap: var(--cnsa-run-m-space);
		transition: transform var(--cnsa-run-m-slide) var(--cnsa-run-slide-ease);
		will-change: transform;
	}

	.cnsa-runway__m-track.is-dragging,
	.cnsa-runway__m-track.is-jumping,
	.cnsa-runway__m-track.is-jumping .cnsa-runway__m-slide {
		transition: none;
	}

	.cnsa-runway__m-slide {
		flex: 0 0 100%;
		min-width: 0;
		display: flex;
		flex-direction: column;
		transform-origin: 50% 35%;
		transition:
			transform var(--cnsa-run-m-slide) var(--cnsa-run-slide-ease),
			opacity var(--cnsa-run-m-slide) ease;
	}

	/*
	 * Depth glide: the slide leaving sinks back and dims while the next one
	 * glides in from behind it and settles forward — the gap between them
	 * opens as they pass rather than two flat cards touching edge to edge.
	 */
	.cnsa-runway__m-carousel--glide .cnsa-runway__m-slide:not(.is-active) {
		transform: scale(0.86);
		opacity: 0.35;
	}

	/* Cross-fade: the slides stacked in one cell. */
	.cnsa-runway__m-carousel--fade .cnsa-runway__m-track {
		display: grid;
		transform: none !important;
	}

	.cnsa-runway__m-carousel--fade .cnsa-runway__m-slide {
		grid-area: 1 / 1;
		opacity: 0;
	}

	.cnsa-runway__m-carousel--fade .cnsa-runway__m-slide.is-active {
		opacity: 1;
	}

	.cnsa-runway__m-carousel--fade .cnsa-runway__m-slide.is-clone {
		display: none;
	}

	.cnsa-runway__m-photo {
		height: var(--cnsa-run-m-photo);
		border-radius: calc(var(--cnsa-run-radius) - 4px);
		background-color: var(--cnsa-run-ink);
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
	}

	/* Room for the dial layer: the dial, the number under it and the clouds. */
	.cnsa-runway__m-room {
		height: calc(var(--cnsa-run-m-dial) / 2 + var(--cnsa-run-clouds-drop) + 30px);
	}

	.cnsa-runway__m-pillar {
		position: relative;
		z-index: 3;
		padding: 40px 20px 26px;
		border-radius: 16px;
		background: var(--cnsa-run-ink);
		text-align: center;
	}

	.cnsa-runway .cnsa-runway__m-pillar .cnsa-runway__pillar-title {
		margin: 0 0 12px;
		color: var(--cnsa-run-accent);
	}

	.cnsa-runway .cnsa-runway__m-pillar .cnsa-runway__pillar-text {
		margin: 0;
		color: #ffffff;
	}

	.cnsa-runway__m-badge {
		position: absolute;
		top: 0;
		left: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		width: var(--cnsa-run-badge);
		height: var(--cnsa-run-badge);
		border: var(--cnsa-run-badge-ring) solid var(--cnsa-run-card);
		border-radius: 50%;
		background: var(--cnsa-run-badge-bg);
		transform: translate(-50%, -50%);
	}

	.cnsa-runway__m-badge svg,
	.cnsa-runway__m-badge img,
	.cnsa-runway__m-badge i {
		display: block;
		width: var(--cnsa-run-badge-icon);
		height: var(--cnsa-run-badge-icon);
		font-size: var(--cnsa-run-badge-icon);
		line-height: 1;
		object-fit: contain;
		fill: var(--cnsa-run-badge-ink);
		color: var(--cnsa-run-badge-ink);
	}

	.cnsa-runway .cnsa-runway__m-hit {
		position: absolute;
		inset: 0;
		border-radius: inherit;
	}

	.cnsa-runway .cnsa-runway__m-hit:focus-visible {
		outline: 2px solid var(--cnsa-run-accent);
		outline-offset: 3px;
	}

	/* The dial layer: over the track, under the pillar cards. */
	.cnsa-runway__m-stage {
		position: absolute;
		top: calc(var(--cnsa-run-m-photo) + 12px);
		right: 0;
		left: 0;
		z-index: 2;
		display: flex;
		justify-content: center;
		pointer-events: none;
		/* Cut level with the foot of the photograph, so the soft wash behind
		   the dial never lays itself over the picture. Open on the other
		   three sides for the clouds and the number. */
		clip-path: inset(0 -100vw -100vh -100vw);
	}

	.cnsa-runway .cnsa-runway__m-dial {
		flex: 0 0 auto;
		width: var(--cnsa-run-arc);
		max-width: 100%;
		margin: 0;
	}

	.cnsa-runway__m-numbers {
		position: absolute;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 2;
		translate: 0 var(--cnsa-run-number-y);
		display: grid;
		grid-template-areas: 'n';
		justify-items: center;
	}

	/*
	 * The number rolls as on desktop: the old one sinks back into the cloud
	 * while the slide moves, and the new one rises out of it as the slide
	 * settles.
	 */
	.cnsa-runway__m-num {
		grid-area: n;
		font-family: 'Bebas Neue', 'Oswald', sans-serif;
		font-size: var(--cnsa-run-number);
		line-height: 0.82;
		letter-spacing: 2px;
		color: color-mix(in srgb, var(--cnsa-run-ghost) var(--cnsa-run-number-alpha), transparent);
		opacity: 0;
		transform: translateY(75%);
		transition:
			transform calc(var(--cnsa-run-m-slide) * 0.8) var(--cnsa-run-slide-ease),
			opacity calc(var(--cnsa-run-m-slide) * 0.6) ease;
		-webkit-mask-image: linear-gradient(to bottom, #000 var(--cnsa-run-number-solid), transparent var(--cnsa-run-number-gone, 100%));
		mask-image: linear-gradient(to bottom, #000 var(--cnsa-run-number-solid), transparent var(--cnsa-run-number-gone, 100%));
	}

	.cnsa-runway__m-num.is-active {
		opacity: 1;
		transform: none;
		transition-delay: calc(var(--cnsa-run-m-slide) * 0.4);
	}

	.cnsa-runway__m-dial .cnsa-runway__ticks,
	.cnsa-runway__m-dial .cnsa-runway__m-turn {
		transition: transform calc(var(--cnsa-run-m-slide) * 1.6) cubic-bezier(0.42, 0, 0.2, 1);
	}

	.cnsa-runway .cnsa-runway__m-plane {
		position: absolute;
		top: var(--cnsa-run-plane-top);
		left: 50%;
		z-index: 4;
		width: var(--cnsa-run-m-plane);
		max-width: 70%;
		height: auto;
		translate: -50% -50%;
		filter: drop-shadow(0 10px 10px rgba(14, 24, 48, 0.16));
		animation: cnsa-run-m-bob var(--cnsa-run-bob-time) ease-in-out infinite;
	}

	/* A small bank as the slides change, then level again. */
	.cnsa-runway__m-carousel.is-moving .cnsa-runway__m-plane {
		rotate: var(--cnsa-run-m-bank, -4deg);
		transition: rotate calc(var(--cnsa-run-m-slide) * 0.5) ease;
	}

	.cnsa-runway .cnsa-runway__m-plane {
		transition: rotate calc(var(--cnsa-run-m-slide) * 0.8) ease;
	}

	/* Arrows and dots: under the card. Two classes and a reset, because the
	   kit paints every <button> as a gold slab at (0,1,1). */
	.cnsa-runway__m-nav {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 18px;
		margin-top: 18px;
	}

	.cnsa-runway .cnsa-runway__m-arrow {
		-webkit-appearance: none;
		appearance: none;
		flex: 0 0 auto;
		display: flex;
		align-items: center;
		justify-content: center;
		width: var(--cnsa-run-m-arrow);
		height: var(--cnsa-run-m-arrow);
		margin: 0;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: var(--cnsa-run-m-arrow-bg, var(--cnsa-run-ink));
		box-shadow: 0 8px 18px rgba(14, 24, 48, 0.18);
		color: var(--cnsa-run-m-arrow-ink, #ffffff);
		cursor: pointer;
		transition: transform 0.2s ease;
	}

	.cnsa-runway .cnsa-runway__m-arrow:hover,
	.cnsa-runway .cnsa-runway__m-arrow:focus {
		background: var(--cnsa-run-m-arrow-bg, var(--cnsa-run-ink));
		color: var(--cnsa-run-m-arrow-ink, #ffffff);
	}

	.cnsa-runway .cnsa-runway__m-arrow:active {
		transform: scale(0.94);
	}

	.cnsa-runway .cnsa-runway__m-arrow:focus-visible {
		outline: 2px solid var(--cnsa-run-accent);
		outline-offset: 2px;
	}

	.cnsa-runway__m-arrow svg {
		width: 45%;
		height: 45%;
		fill: none;
		stroke: currentColor;
		stroke-width: 2.4;
		stroke-linecap: round;
		stroke-linejoin: round;
	}

	.cnsa-runway__m-dots {
		display: flex;
		justify-content: center;
		gap: 2px;
	}

	.cnsa-runway .cnsa-runway__m-dot {
		-webkit-appearance: none;
		appearance: none;
		position: relative;
		width: 22px;
		height: 22px;
		margin: 0;
		padding: 0;
		border: 0;
		background: none;
		cursor: pointer;
	}

	.cnsa-runway .cnsa-runway__m-dot::before {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		width: 8px;
		height: 8px;
		border-radius: 4px;
		background: var(--cnsa-run-m-dot, #d3d7df);
		transform: translate(-50%, -50%);
		transition: width 0.3s ease, background-color 0.3s ease;
	}

	.cnsa-runway .cnsa-runway__m-dot.is-active::before {
		width: 20px;
		background: var(--cnsa-run-m-dot-on, var(--cnsa-run-accent));
	}

	.cnsa-runway .cnsa-runway__m-dot:hover,
	.cnsa-runway .cnsa-runway__m-dot:focus {
		background: none;
	}
}

/*
 * Phones → Photograph on phones → behind the slide (the default). Like the
 * hero: the photograph fills the top of the carousel card and carries on
 * behind the dial, the aircraft and the number, fading into the card before
 * the pillar card. The photographs are their own track under the dial layer,
 * moved with the slides; the slides' own photo box stays as the space the
 * picture shows in.
 */
@media (max-width: 767px) {
	.cnsa-runway {
		--cnsa-run-m-overlap: 24px;
	}

	/*
	 * No padding round the picture: it runs to the card's edges and corners.
	 * The pillar card keeps its own margin inside the carousel card.
	 */
	.cnsa-runway__m-carousel--photo-bg .cnsa-runway__m-frame {
		padding: 0 0 12px;
		overflow: hidden;
	}

	.cnsa-runway__m-carousel--photo-bg .cnsa-runway__m-viewport {
		border-radius: var(--cnsa-run-radius) var(--cnsa-run-radius) 0 0;
	}

	.cnsa-runway__m-carousel--photo-bg .cnsa-runway__m-pillar {
		margin-right: 12px;
		margin-left: 12px;
	}

	.cnsa-runway__m-carousel--photo-bg .cnsa-runway__m-photo {
		border-radius: 0;
	}

	/*
	 * Carousel spans the screen: out past the section's gutter and any
	 * container padding to the edges of the phone, square-cornered, as the
	 * hero's photograph is. The page never scrolls sideways — the section
	 * clips at the screen's width.
	 */
	.cnsa-runway__m-carousel--bleed .cnsa-runway__m-frame {
		width: 100vw;
		max-width: 100vw;
		margin-left: calc(50% - 50vw);
		border-radius: 0;
		box-shadow: none;
	}

	.cnsa-runway__m-carousel--bleed .cnsa-runway__m-viewport {
		border-radius: 0;
	}

	.cnsa-runway__m-carousel--bleed .cnsa-runway__m-pillar {
		margin-right: var(--cnsa-run-gutter);
		margin-left: var(--cnsa-run-gutter);
	}

	.cnsa-runway.cnsa-runway--phone-carousel:has(.cnsa-runway__m-carousel--bleed) {
		overflow-x: clip;
	}

	.cnsa-runway__m-backs {
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		z-index: 1;
		display: flex;
		gap: var(--cnsa-run-m-space);
		transition: transform var(--cnsa-run-m-slide) var(--cnsa-run-slide-ease);
		will-change: transform;
		pointer-events: none;
	}

	.cnsa-runway__m-backs.is-dragging,
	.cnsa-runway__m-backs.is-jumping,
	.cnsa-runway__m-backs.is-jumping .cnsa-runway__m-back {
		transition: none;
	}

	.cnsa-runway__m-back {
		position: relative;
		flex: 0 0 100%;
		/* The picture's own height: it has faded to white by the top of the
		   dial, so the aircraft and the dial stand on white, as on desktop. */
		height: calc(var(--cnsa-run-m-photo) + 12px);
		border-radius: 0;
		background-color: var(--cnsa-run-ink);
		background-size: cover;
		background-position: center top;
		background-repeat: no-repeat;
		transform-origin: 50% 35%;
		transition:
			transform var(--cnsa-run-m-slide) var(--cnsa-run-slide-ease),
			opacity var(--cnsa-run-m-slide) ease;
	}

	/* Clear over the picture, then into the card colour behind the dial. */
	.cnsa-runway__m-back::after {
		content: '';
		position: absolute;
		inset: 0;
		background: linear-gradient(
			to bottom,
			transparent 0%,
			transparent 62%,
			color-mix(in srgb, var(--cnsa-run-m-fade, var(--cnsa-run-m-box, var(--cnsa-run-card))) 60%, transparent) 80%,
			var(--cnsa-run-m-fade, var(--cnsa-run-m-box, var(--cnsa-run-card))) 94%,
			var(--cnsa-run-m-fade, var(--cnsa-run-m-box, var(--cnsa-run-card))) 100%
		);
	}

	.cnsa-runway__m-carousel--glide .cnsa-runway__m-back:not(.is-active) {
		transform: scale(0.86);
		opacity: 0.35;
	}

	.cnsa-runway__m-carousel--fade .cnsa-runway__m-backs {
		display: grid;
		transform: none !important;
	}

	.cnsa-runway__m-carousel--fade .cnsa-runway__m-back {
		grid-area: 1 / 1;
		opacity: 0;
	}

	.cnsa-runway__m-carousel--fade .cnsa-runway__m-back.is-active {
		opacity: 1;
	}

	.cnsa-runway__m-carousel--fade .cnsa-runway__m-back.is-clone {
		display: none;
	}

	/* The slide's own photo box is only the space the picture shows in. */
	.cnsa-runway__m-carousel--photo-bg .cnsa-runway__m-photo {
		height: calc(var(--cnsa-run-m-photo) - var(--cnsa-run-m-overlap));
		background: none !important;
	}

	.cnsa-runway__m-carousel--photo-bg .cnsa-runway__m-stage {
		top: calc(var(--cnsa-run-m-photo) - var(--cnsa-run-m-overlap) + 12px);
	}
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
	.cnsa-runway__m-backs,
	.cnsa-runway__m-back {
		transition: none !important;
	}
}

@keyframes cnsa-run-m-bob {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(calc(var(--cnsa-run-bob) * -0.6)); }
}

@media (prefers-reduced-motion: reduce) {
	.cnsa-runway__m-track,
	.cnsa-runway__m-slide,
	.cnsa-runway__m-num,
	.cnsa-runway__m-dial .cnsa-runway__ticks {
		transition: none !important;
	}

	.cnsa-runway .cnsa-runway__m-plane {
		animation: none;
	}
}

/*
 * With reduced motion the section still advances — it is the only way the
 * other three pillars are ever seen — but nothing slides. The script skips the
 * flight and puts the aircraft straight on its mark; these rules drop the
 * cross-fades to match.
 */
@media (prefers-reduced-motion: reduce) {
	.cnsa-runway__lit,
	.cnsa-runway--slide .cnsa-runway__badge,
	.cnsa-runway--slide .cnsa-runway__pillar.is-active .cnsa-runway__badge,
	.cnsa-runway--slide .cnsa-runway__pillar-title,
	.cnsa-runway--slide .cnsa-runway__pillar-text,
	.cnsa-runway--slide .cnsa-runway__pillar.is-active .cnsa-runway__pillar-title,
	.cnsa-runway--slide .cnsa-runway__pillar.is-active .cnsa-runway__pillar-text,
	.cnsa-runway__photo,
	.cnsa-runway .cnsa-runway__number,
	.cnsa-runway__pillar,
	.cnsa-runway__badge,
	.cnsa-runway .cnsa-runway__pillar-title,
	.cnsa-runway .cnsa-runway__pillar-text {
		transition: none;
	}

	.cnsa-runway .cnsa-runway__number {
		transform: none;
	}

	/* The ride is continuous, so it is exactly the kind of motion this
	   preference is asking about. The aircraft simply sits on its mark. */
	.cnsa-runway--bob .cnsa-runway__plane {
		animation: none;
	}

	.cnsa-runway--spin [data-cnsa-dial-turn],
	.cnsa-runway--spin-always [data-cnsa-dial-turn] {
		transition: none;
		animation: none;
	}
}

.cnsa-runway .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.elementor-widget-cnsa-runway,
.elementor-widget-cnsa-runway > .elementor-widget-container {
	overflow: visible;
}

/* ------------------------------------------------------- countdown: steel
 *
 * The second countdown design: a brushed steel plate with the unit names
 * above the digits, white tiles pressed into the metal, and a row of ticked
 * statements beneath.
 *
 * Everything here is a token override plus the list — the markup is the same
 * as the first design, and the unit name moves above its tile by reversing
 * the column rather than by rendering anything twice.
 */
.cnsa-countdown--steel {
	--cnsa-plate-base: #d3d6dd;
	--cnsa-plate-border: #aab2c3;
	--cnsa-plate-sheen: 0.55;
	--cnsa-digit-bg: #ffffff;
	--cnsa-digit-border: transparent;
	--cnsa-digit-color: #1b2a4a;
	--cnsa-digit-size: 56px;
	--cnsa-digit-track: 0.34em;
	--cnsa-unit-label: #74809a;
	--cnsa-tile-width: 232px;
	--cnsa-tile-height: 96px;
	--cnsa-tile-radius: 8px;
	--cnsa-tile-press: rgba(116, 128, 154, 0.25);
	--cnsa-card-bg: #ffffff;
	--cnsa-card-radius: 10px;
	--cnsa-check-box: #eef0f3;
	--cnsa-check-border: #e6e8ec;
	--cnsa-check-mark: #1b2a4a;
	--cnsa-check-text: #2a3242;
	--cnsa-check-rule: #e7e9ee;
	--cnsa-check-size: 24px;
	/* The fine near-white edge round the plate, and the rim round each tile. */
	--cnsa-plate-outline: rgba(255, 255, 255, 0.9);
	--cnsa-tile-edge: #e4e6ea;
	/* Steel screws sit further in than the first design's, as drawn. */
	--cnsa-screw-steel: 8px;
	text-align: left;
}

/*
 * Brushed metal: a light base with bands of highlight and shade running
 * across it. The bands are partly transparent so the base colour still shows
 * through and the whole plate can be retinted from one control.
 */
.cnsa-countdown--steel.cnsa-countdown--plate-css .cnsa-countdown__panel {
	background-color: var(--cnsa-plate-base);
	background-image:
		/* A little more light along the top edge, as rolled steel catches it. */
		linear-gradient(180deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0) 58%),
		linear-gradient(
			90deg,
			rgba(255, 255, 255, var(--cnsa-plate-sheen)) 0%,
			rgba(174, 174, 174, calc(var(--cnsa-plate-sheen) * 0.22)) 18%,
			rgba(110, 110, 110, calc(var(--cnsa-plate-sheen) * 0.16)) 32%,
			rgba(255, 255, 255, calc(var(--cnsa-plate-sheen) * 1.15)) 47%,
			rgba(174, 174, 174, calc(var(--cnsa-plate-sheen) * 0.22)) 64%,
			rgba(110, 110, 110, calc(var(--cnsa-plate-sheen) * 0.16)) 78%,
			rgba(255, 255, 255, var(--cnsa-plate-sheen)) 100%
		);
	/* The design's fine near-white edge all the way round (Plate outline). */
	border: 1px solid var(--cnsa-plate-outline, rgba(255, 255, 255, 0.9));
	border-radius: var(--cnsa-card-radius) var(--cnsa-card-radius) 0 0;
	/* The lit top edge of a pressed panel. */
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
	padding: 26px 32px 30px;
	max-width: 1200px;
}

.cnsa-countdown--steel .cnsa-countdown__units {
	gap: 8px;
}

/* Name above digits, without a second copy of the markup. The gap is the
   space between them; Style → Digits → Space between name and digits. */
.cnsa-countdown--steel .cnsa-countdown__unit {
	flex-direction: column-reverse;
	gap: var(--cnsa-unit-space, 14px);
}

/*
 * Unit names in the display face, as the first design has them and as every
 * other label on the page is set. They were Poppins semibold, which review
 * flagged as the wrong font. Bebas Neue has one weight; the base rule's 700
 * would synthesise a bold, so it is put back to 400 here.
 */
.cnsa-countdown--steel .cnsa-countdown__unit-label {
	/* Above the tile here, so the spacing setting goes to the gap instead. */
	margin-top: 10px;
	font-family: 'Bebas Neue', 'Oswald', sans-serif;
	font-size: 20px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var(--cnsa-unit-label);
}

/* Pressed into the plate rather than sitting on it, with the light rim the
   design draws round each tile. */
.cnsa-countdown--steel .cnsa-countdown__tile {
	background: var(--cnsa-digit-bg);
	border: 0;
	border-radius: var(--cnsa-tile-radius);
	box-shadow:
		inset 0 0 0 1px var(--cnsa-tile-edge),
		inset 0 4px 4px var(--cnsa-tile-press);
}

/*
 * The design's figures: Bebas Neue, each digit centred in its own share of
 * the tile — a quarter of the way in from either side for two — rather than
 * set side by side with tracking. Each digit is its own element, so the
 * spacing follows the tile's width at every screen size.
 */
.cnsa-countdown--steel .cnsa-countdown__digits {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	align-items: center;
	justify-items: center;
	width: 100%;
	font-family: 'Bebas Neue', 'Oswald', sans-serif;
	font-weight: 400;
	letter-spacing: 0;
	font-variant-numeric: tabular-nums;
}

/* Digit spacing → Together: side by side, tracked, as before. */
.cnsa-countdown--steel.cnsa-countdown--digits-together .cnsa-countdown__digits {
	display: block;
	width: auto;
	/* The trailing space the tracking adds after the last digit is taken
	   back, so the pair stays centred. */
	letter-spacing: var(--cnsa-digit-track);
	margin-right: calc(var(--cnsa-digit-track) * -1);
}

.cnsa-countdown--steel .cnsa-countdown__sep {
	color: var(--cnsa-digit-color);
	font-family: 'Poppins', sans-serif;
	font-weight: 700;
	align-self: flex-end;
	/* Sits with the digits, not with the names above them. */
	padding-bottom: calc(var(--cnsa-tile-height) / 2 - 0.5em);
}

/*
 * The colon as drawn: a 28px column holding two 10px dots, 10px apart, in
 * #1F2D4D (Style → Digits → Colon colour and Colon dot size). The column is
 * exactly as tall as a tile and stands on the same line as the tiles, so the
 * pair is centred on them. Three classes, so the phone rules for the old
 * text colon further down cannot move it.
 */
.cnsa-countdown--steel .cnsa-countdown__sep.cnsa-countdown__sep--dots {
	display: flex;
	flex: 0 0 var(--cnsa-colon-width, 28px);
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--cnsa-colon-dot, 10px);
	align-self: flex-end;
	width: var(--cnsa-colon-width, 28px);
	height: var(--cnsa-tile-height);
	margin: 0;
	padding: 0;
	opacity: 1;
}

.cnsa-countdown__colon-dot {
	display: block;
	flex: 0 0 auto;
	width: var(--cnsa-colon-dot, 10px);
	height: var(--cnsa-colon-dot, 10px);
	border-radius: 50%;
	background: var(--cnsa-colon-color, #1f2d4d);
}

/* A further 8px in from each corner than the first design, as drawn. */
.cnsa-countdown--steel .cnsa-countdown__screw:nth-child(1) { top: calc(var(--cnsa-screw-inset) + var(--cnsa-screw-steel)); left: calc(var(--cnsa-screw-inset) + var(--cnsa-screw-steel)); }
.cnsa-countdown--steel .cnsa-countdown__screw:nth-child(2) { top: calc(var(--cnsa-screw-inset) + var(--cnsa-screw-steel)); right: calc(var(--cnsa-screw-inset) + var(--cnsa-screw-steel)); }
.cnsa-countdown--steel .cnsa-countdown__screw:nth-child(3) { bottom: calc(var(--cnsa-screw-inset) + var(--cnsa-screw-steel)); left: calc(var(--cnsa-screw-inset) + var(--cnsa-screw-steel)); }
.cnsa-countdown--steel .cnsa-countdown__screw:nth-child(4) { bottom: calc(var(--cnsa-screw-inset) + var(--cnsa-screw-steel)); right: calc(var(--cnsa-screw-inset) + var(--cnsa-screw-steel)); }

.cnsa-countdown--steel .cnsa-countdown__screw--drawn {
	background: radial-gradient(circle at 34% 30%, #ffffff, #cdd2da 46%, #9aa2b1);
	border-color: #8b93a2;
	box-shadow: 0 1px 1px rgba(255, 255, 255, 0.55);
}

/* ------------------------------------------------ the readiness list */
.cnsa-countdown__checks {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
	background: var(--cnsa-card-bg);
	border-radius: 0 0 var(--cnsa-card-radius) var(--cnsa-card-radius);
	overflow: hidden;
}

.cnsa-countdown__check {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 22px 26px 30px;
	/* One rule between columns: drawn on the left and hidden on the first of
	   each row, so it never lands against the outside edge of the card at any
	   column count. */
	border-left: 1px solid var(--cnsa-check-rule);
}

.cnsa-countdown__check:first-child {
	border-left: 0;
}

/*
 * The box as drawn: pale grey, pressed slightly into the card — a soft shade
 * along its top inside edge — with a fine light rim round it.
 */
.cnsa-countdown__check-box {
	position: relative;
	flex: 0 0 auto;
	width: var(--cnsa-check-size);
	height: var(--cnsa-check-size);
	border: 1px solid var(--cnsa-check-border);
	border-radius: 6px;
	background: var(--cnsa-check-box);
	box-shadow:
		inset 0 2px 3px rgba(34, 51, 87, 0.13),
		0 0 0 1px rgba(255, 255, 255, 0.9);
}

/*
 * The tick: a single stroke with round ends and a round corner, as drawn,
 * cut from the mark colour with a mask so the colour setting still reaches
 * it. The old tick was two squared-off borders turned 45 degrees.
 */
.cnsa-countdown__check-box::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--cnsa-check-mark);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.4 12.6l3.9 3.8 7.4-8.6' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.4 12.6l3.9 3.8 7.4-8.6' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

.cnsa-countdown .cnsa-countdown__check-text {
	margin: 0;
	font-family: 'Poppins', sans-serif;
	font-size: 16px;
	line-height: 1.55;
	color: var(--cnsa-check-text);
}

@media (max-width: 1024px) {
	.cnsa-countdown--steel {
		--cnsa-tile-width: 168px;
		--cnsa-tile-height: 78px;
		--cnsa-digit-size: 40px;
	}

	/*
	 * Four statements will not sit side by side on a tablet. The Columns
	 * control can override this per device, but the stylesheet has to stand up
	 * on its own — a widget dropped in without anyone opening that control
	 * should still be readable on a phone.
	 */
	.cnsa-countdown__checks {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.cnsa-countdown--steel {
		--cnsa-tile-width: 116px;
		--cnsa-tile-height: 62px;
		--cnsa-digit-size: 30px;
		--cnsa-check-size: 20px;
		--cnsa-tile-h-live: min(var(--cnsa-tile-height), 16vw);
	}

	.cnsa-countdown--steel.cnsa-countdown--plate-css .cnsa-countdown__panel {
		padding: 20px 14px 22px;
	}

	.cnsa-countdown--steel .cnsa-countdown__unit {
		gap: var(--cnsa-unit-space, 8px);
	}

	.cnsa-countdown--steel .cnsa-countdown__unit-label {
		margin-top: 0;
		font-size: 15px;
		letter-spacing: 1px;
	}

	/* Scaled with the screen so three tiles still fit across a phone. */
	.cnsa-countdown--steel .cnsa-countdown__digits {
		font-size: min(var(--cnsa-digit-size), 7.4vw);
	}

	.cnsa-countdown--steel.cnsa-countdown--digits-together .cnsa-countdown__digits {
		letter-spacing: 0.12em;
		margin-right: -0.12em;
	}

	.cnsa-countdown--steel .cnsa-countdown__sep {
		margin-top: 0;
		padding-bottom: calc(var(--cnsa-tile-h-live) / 2 - 14px);
	}

	/* The phone's tiles are shorter and three have to fit across, so the
	   column narrows; the dots take their own phone size (8px). */
	.cnsa-countdown--steel .cnsa-countdown__sep.cnsa-countdown__sep--dots {
		--cnsa-colon-width: 16px;
		height: var(--cnsa-tile-h-live);
		padding: 0;
	}

	.cnsa-countdown__checks {
		grid-template-columns: minmax(0, 1fr);
	}

	/* A row each, box beside its words, not stacked above them. */
	.cnsa-countdown__check {
		flex-direction: row;
		align-items: center;
		gap: 14px;
		padding: 14px 18px;
		border-left: 0;
		border-top: 1px solid var(--cnsa-check-rule);
	}

	.cnsa-countdown__check:first-child {
		border-top: 0;
	}

	.cnsa-countdown .cnsa-countdown__check-text {
		font-size: 15px;
		line-height: 1.45;
	}
}

/* -------------------------------------------------------------- Giving bar */

/*
 * The "Hero Header Nav – Scrolled" state, Figma 2378:6389 (1440 × 100).
 *
 * The site header is an Elementor sticky container, fixed at the top, 100px
 * tall, z-index 99. This bar is the same height and sits one layer above it,
 * so when it slides down it reads as the header changing state rather than a
 * second bar arriving. The script lifts it out to the end of <body>, which is
 * why every rule here hangs off its own class and nothing off the page.
 */
.cnsa-givebar {
	--cnsa-bar-h: 100px;
	--cnsa-bar-top: 0px;
	--cnsa-bar-bg: #ffffff;
	--cnsa-bar-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
	--cnsa-bar-track: rgba(0, 0, 0, 0.05);
	--cnsa-bar-fill: #eeb53f;
	--cnsa-bar-num: #223357;
	--cnsa-bar-word: rgba(18, 18, 18, 0.5);
	--cnsa-bar-give-bg: #eeb53f;
	--cnsa-bar-give-text: #223357;
	--cnsa-bar-give-hover-bg: #223357;
	--cnsa-bar-give-hover-text: #ffffff;
	--cnsa-bar-max: 1200px;
	--cnsa-bar-gutter: 40px;
	--cnsa-bar-logo-w: 180px;
	--cnsa-bar-gap-logo: 69px;
	--cnsa-bar-gap-give: 30px;
	--cnsa-bar-plane-w: 73px;
	--cnsa-bar-label: 16px;
	--cnsa-bar-p: 0%;
	--cnsa-bar-slide: 450ms;
	--cnsa-bar-ease: cubic-bezier(0.22, 1, 0.36, 1);

	position: fixed;
	top: var(--cnsa-bar-top);
	right: 0;
	left: 0;
	z-index: 1000;
	box-sizing: border-box;
	height: var(--cnsa-bar-h);
	margin: 0;
	background: var(--cnsa-bar-bg);
	box-shadow: var(--cnsa-bar-shadow);
	/* Parked just above the top edge, shadow included, until it is needed. */
	transform: translateY(calc(-100% - 12px));
	visibility: hidden;
	transition:
		transform var(--cnsa-bar-slide) var(--cnsa-bar-ease),
		visibility 0s linear var(--cnsa-bar-slide);
}

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

.cnsa-givebar.is-shown {
	transform: none;
	visibility: visible;
	transition:
		transform var(--cnsa-bar-slide) var(--cnsa-bar-ease),
		visibility 0s;
}

/* The WordPress toolbar, for logged-in editors. Below 600px it scrolls away. */
body.admin-bar .cnsa-givebar {
	--cnsa-bar-top: 32px;
}

@media (max-width: 782px) {
	body.admin-bar .cnsa-givebar {
		--cnsa-bar-top: 46px;
	}
}

@media (max-width: 600px) {
	body.admin-bar .cnsa-givebar {
		--cnsa-bar-top: 0px;
	}
}

/*
 * The site header, hidden once the bar has finished covering it — not
 * before, or the page would show through for the length of the slide — and
 * back the instant the bar starts to leave.
 */
.cnsa-givebar-covers {
	visibility: hidden !important;
	transition: visibility 0s linear var(--cnsa-bar-slide, 450ms) !important;
}

/*
 * The widget's own spot on the page. Nothing is drawn there, and an empty
 * widget still opens a container gap, so it comes out of the layout unless
 * the bar is timed from that spot.
 */
body:not(.elementor-editor-active) .elementor-widget.cnsa-givebar-after-meter,
body:not(.elementor-editor-active) .elementor-widget.cnsa-givebar-after-selector {
	display: none;
}

.cnsa-givebar-anchor {
	display: block;
	height: 0;
	margin: 0;
	padding: 0;
}

.cnsa-givebar__inner {
	display: flex;
	align-items: center;
	width: min(var(--cnsa-bar-max), calc(100% - 2 * var(--cnsa-bar-gutter)));
	height: 100%;
	margin: 0 auto;
}

/* The logo is the one part that gives way when the figures need the room,
   which only happens with it switched on at phone width. */
.cnsa-givebar .cnsa-givebar__logo {
	display: flex;
	flex: 0 1 auto;
	align-items: center;
	width: var(--cnsa-bar-logo-w);
	min-width: 0;
	height: 100%;
	margin-right: var(--cnsa-bar-gap-logo);
	text-decoration: none;
}

.cnsa-givebar .cnsa-givebar__logo img {
	display: block;
	width: 100%;
	max-width: none;
	height: auto;
	max-height: calc(var(--cnsa-bar-h) - 16px);
	object-fit: contain;
	object-position: left center;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.cnsa-givebar__wordmark {
	font-family: 'Bebas Neue', 'Oswald', sans-serif;
	font-size: 26px;
	line-height: 1;
	color: var(--cnsa-bar-num);
}

/* Never narrower than the two figures under it. */
.cnsa-givebar__progress {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-width: min-content;
}

/* 33px tall with the 8px line 12px down: the comp's own box, so the plane,
   which is 35px tall at 73 wide, sits on the line with a pixel over each
   edge exactly as drawn. */
.cnsa-givebar__rail {
	position: relative;
	height: 33px;
}

.cnsa-givebar__track {
	position: absolute;
	top: 12px;
	right: 0;
	left: 0;
	display: block;
	height: 8px;
	overflow: hidden;
	border-radius: 6px;
	background: var(--cnsa-bar-track);
}

.cnsa-givebar__fill {
	display: block;
	width: var(--cnsa-bar-p);
	height: 100%;
	border-radius: 6px;
	background: var(--cnsa-bar-fill);
}

/*
 * Centred on the head of the fill, from the same number the fill is drawn
 * from, so the two cannot drift apart while the line fills. At the very end
 * the plane stops with its nose on the end of the line instead of running
 * on into the button.
 */
.cnsa-givebar .cnsa-givebar__plane {
	position: absolute;
	top: 16px;
	left: min(
		calc(var(--cnsa-bar-p) - var(--cnsa-bar-plane-w) / 2),
		calc(100% - var(--cnsa-bar-plane-w))
	);
	display: block;
	width: var(--cnsa-bar-plane-w);
	max-width: none;
	height: auto;
	margin: 0;
	translate: 0 -50%;
	pointer-events: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.cnsa-givebar__labels {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	font-family: 'Bebas Neue', 'Oswald', sans-serif;
	font-size: var(--cnsa-bar-label);
	font-weight: 400;
	/* Bebas Neue ships one weight. The comp's "Bold" figures are carried by
	   their colour; a synthesised bold would smear at this size. */
	font-synthesis: none;
	line-height: 1.2;
	/* 1.14px at 16px, the comp's tracking, kept in proportion. */
	letter-spacing: 0.07125em;
	text-transform: uppercase;
	white-space: nowrap;
}

.cnsa-givebar__stat--end {
	text-align: right;
}

.cnsa-givebar__num {
	color: var(--cnsa-bar-num);
}

.cnsa-givebar__word {
	color: var(--cnsa-bar-word);
}

/* Two classes, to outrank the kit's `.elementor-kit-9 a` link rule. */
.cnsa-givebar .cnsa-givebar__give {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	margin: 0 0 0 var(--cnsa-bar-gap-give);
	padding: 16px 20px;
	border: 0;
	border-radius: 0;
	background: var(--cnsa-bar-give-bg);
	color: var(--cnsa-bar-give-text);
	font-family: 'Poppins', sans-serif;
	font-size: 15px;
	font-weight: 700;
	line-height: 15px;
	letter-spacing: 2px;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
	box-shadow: none;
	transition: background-color 0.3s, color 0.3s;
}

.cnsa-givebar .cnsa-givebar__give:hover,
.cnsa-givebar .cnsa-givebar__give:focus-visible {
	background: var(--cnsa-bar-give-hover-bg);
	color: var(--cnsa-bar-give-hover-text);
	text-decoration: none;
}

.cnsa-givebar .cnsa-givebar__give:focus-visible {
	outline: 2px solid var(--cnsa-bar-give-bg);
	outline-offset: 2px;
}

@media (max-width: 1024px) {
	.cnsa-givebar {
		--cnsa-bar-gutter: 24px;
		--cnsa-bar-logo-w: 150px;
		--cnsa-bar-gap-logo: 40px;
		--cnsa-bar-gap-give: 24px;
	}
}

@media (max-width: 767px) {
	.cnsa-givebar {
		--cnsa-bar-gutter: 16px;
		--cnsa-bar-logo-w: 120px;
		--cnsa-bar-gap-logo: 16px;
		--cnsa-bar-gap-give: 14px;
		--cnsa-bar-plane-w: 56px;
		--cnsa-bar-label: 13px;
	}

	/* Both figures have to fit under the line on the narrowest phones, so
	   below about 380px the size set for phones becomes a ceiling. */
	.cnsa-givebar__labels {
		gap: 8px;
		font-size: min(var(--cnsa-bar-label), 3.4vw);
	}

	.cnsa-givebar .cnsa-givebar__give {
		padding: 14px 16px;
		font-size: 13px;
		line-height: 13px;
		letter-spacing: 1.5px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cnsa-givebar {
		--cnsa-bar-slide: 1ms;
	}
}

/*
 * In the Elementor editor the bar stays where it was dropped, in the page,
 * fully drawn, so it can be selected and styled like any other widget.
 */
.elementor-editor-active .cnsa-givebar {
	position: relative;
	top: auto;
	z-index: auto;
	transform: none;
	visibility: visible;
	transition: none;
}

/* -------------------------------------------------------------- Photo Cards */

/*
 * Short headings joined by a broken line, each over a white card with an icon
 * tile on its top edge, a photograph and a caption. Every measurement is a
 * token so the widget's controls can move any of it without a rule of their
 * own; the controls write the tokens at the widget, the rules read them here.
 */
.cnsa-cards {
	--cnsa-cards-cols: 3;
	--cnsa-cards-gap: 24px;
	--cnsa-cards-row-gap: 48px;

	--cnsa-cards-heading: #374465;
	--cnsa-cards-caption: #374465;
	--cnsa-cards-head-space: 30px;
	--cnsa-cards-grow-before: 1;
	--cnsa-cards-grow-after: 1;
	--cnsa-cards-col-before: 1fr;
	--cnsa-cards-col-after: 1fr;
	--cnsa-cards-head-align: center;

	/* The broken line. "Between" by default: no line outside the first and
	   last headings, and each half reaching halfway into the gap. */
	--cnsa-cards-line: block;
	--cnsa-cards-before: visible;
	--cnsa-cards-edge-before: hidden;
	--cnsa-cards-edge-after: hidden;
	--cnsa-cards-join: 1;
	--cnsa-cards-bridge: calc(var(--cnsa-cards-gap) / 2);
	--cnsa-cards-line-color: #d9d8d3;
	--cnsa-cards-line-weight: 1px;
	--cnsa-cards-dash: 7px;
	--cnsa-cards-dash-gap: 4px;
	--cnsa-cards-line-space: 12px;
	--cnsa-cards-line-y: 0px;

	--cnsa-cards-tile: 60px;
	--cnsa-cards-icon: 24px;
	--cnsa-cards-tile-bg: #374465;
	--cnsa-cards-icon-color: #ffffff;
	--cnsa-cards-tile-radius: 2px;
	--cnsa-cards-tile-above: 0.5;
	--cnsa-cards-tile-left: 50%;
	--cnsa-cards-tile-shift: -50%;
	--cnsa-cards-tile-inset: 24px;
	--cnsa-cards-tile-x: 0px;
	--cnsa-cards-tile-y: 0px;

	--cnsa-cards-card-bg: #ffffff;
	--cnsa-cards-pad-x: 12px;
	--cnsa-cards-pad-bottom: 20px;
	--cnsa-cards-tile-gap: 26px;
	--cnsa-cards-radius: 0px;

	--cnsa-cards-ratio: 1.03;
	--cnsa-cards-photo-h: auto;
	--cnsa-cards-focus: center;
	--cnsa-cards-photo-radius: 0px;
	--cnsa-cards-cap-space: 16px;

	width: 100%;
}

.cnsa-cards__grid {
	display: grid;
	grid-template-columns: repeat(var(--cnsa-cards-cols), minmax(0, 1fr));
	column-gap: var(--cnsa-cards-gap);
	row-gap: var(--cnsa-cards-row-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.cnsa-cards__item {
	display: flex;
	flex-direction: column;
	min-width: 0;
	margin: 0;
	padding: 0;
}

/* --------------------------------------------------------- heading and line */

/*
 * Three tracks: line, heading, line. The outer tracks share what is left
 * equally, so the heading sits in the middle of its column whatever the lines
 * do — they reach into the gap with negative margins, which in a grid move the
 * line without moving the tracks. Alignment turns one outer track off (0fr).
 */
.cnsa-cards__head {
	display: grid;
	grid-template-columns: minmax(0, var(--cnsa-cards-col-before, 1fr)) minmax(0, auto) minmax(0, var(--cnsa-cards-col-after, 1fr));
	align-items: center;
	margin-bottom: var(--cnsa-cards-head-space);
}

.cnsa-cards .cnsa-cards__heading {
	grid-column: 2;
	grid-row: 1;
	min-width: 0;
	margin: 0;
	padding: 0;
	font-family: 'Bebas Neue', 'Oswald', sans-serif;
	font-size: 34px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	text-align: var(--cnsa-cards-head-align);
	color: var(--cnsa-cards-heading);
}

/*
 * Drawn as a repeating gradient rather than a dashed border: every browser
 * spaces a dashed border differently, and none lets the dash and gap be set.
 *
 * The half after a heading counts its dashes from its right end, the half
 * before the next heading from its left end, and they meet in the middle of
 * the column gap — so where they join it is one dash, one gap, one dash, the
 * same as anywhere else along the line.
 *
 * How far each half reaches into the gap, for "Between the headings"
 * (--cnsa-cards-join: 1; the other modes set 0 and stay in their column):
 * half the gap each when the headings are centred; with the headings to one
 * side, one half has no width and the other crosses the whole gap, stopping
 * the usual space short of the next heading.
 */
.cnsa-cards__line {
	display: var(--cnsa-cards-line, block);
	position: relative;
	top: var(--cnsa-cards-line-y);
	grid-row: 1;
	min-width: 0;
	height: var(--cnsa-cards-line-weight);
	background-image: linear-gradient(to right, var(--cnsa-cards-line-color) 0 var(--cnsa-cards-dash), transparent var(--cnsa-cards-dash) 100%);
	background-size: calc(var(--cnsa-cards-dash) + var(--cnsa-cards-dash-gap)) 100%;
	background-repeat: repeat-x;
}

.cnsa-cards__line--before {
	grid-column: 1;
	visibility: var(--cnsa-cards-before);
	margin-right: var(--cnsa-cards-line-space);
	margin-left: calc(-1 * var(--cnsa-cards-join) * var(--cnsa-cards-grow-before) * (var(--cnsa-cards-bridge) * (2 - var(--cnsa-cards-grow-after)) - (1 - var(--cnsa-cards-grow-after)) * var(--cnsa-cards-line-space)));
	background-position: left center;
}

.cnsa-cards__line--after {
	grid-column: 3;
	margin-left: var(--cnsa-cards-line-space);
	margin-right: calc(-1 * var(--cnsa-cards-join) * var(--cnsa-cards-grow-after) * (var(--cnsa-cards-bridge) * (2 - var(--cnsa-cards-grow-before)) - (1 - var(--cnsa-cards-grow-before)) * var(--cnsa-cards-line-space)));
	background-position: right center;
}

/* Nothing outside the row: the outer halves never reach past the widget. */
.cnsa-cards__item:first-child .cnsa-cards__line--before {
	visibility: var(--cnsa-cards-edge-before);
	margin-left: 0;
}

.cnsa-cards__item:last-child .cnsa-cards__line--after {
	visibility: var(--cnsa-cards-edge-after);
	margin-right: 0;
}

/* ------------------------------------------------------------------ the card */

/*
 * The kit styles bare `a`, so the linked card is written with two classes.
 * The tile hangs off the top edge; the card's top margin makes room for the
 * part above it and its top padding for the part inside, so moving the tile
 * up or down never lets it cover the heading or the photograph.
 */
.cnsa-cards .cnsa-cards__card {
	position: relative;
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	padding: var(--cnsa-cards-pad-x) var(--cnsa-cards-pad-x) var(--cnsa-cards-pad-bottom);
	border-radius: var(--cnsa-cards-radius);
	background-color: var(--cnsa-cards-card-bg);
	box-shadow: 0 12px 34px rgba(26, 34, 56, 0.1);
	color: inherit;
	text-decoration: none;
}

.cnsa-cards--equal .cnsa-cards__card {
	flex: 1 1 auto;
}

.cnsa-cards--tiles .cnsa-cards__card {
	margin-top: calc(var(--cnsa-cards-tile) * var(--cnsa-cards-tile-above));
	padding-top: calc(var(--cnsa-cards-tile) * (1 - var(--cnsa-cards-tile-above)) + var(--cnsa-cards-tile-gap));
}

.cnsa-cards .cnsa-cards__tile {
	position: absolute;
	top: 0;
	left: var(--cnsa-cards-tile-left);
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--cnsa-cards-tile);
	height: var(--cnsa-cards-tile);
	border-radius: var(--cnsa-cards-tile-radius);
	background-color: var(--cnsa-cards-tile-bg);
	color: var(--cnsa-cards-icon-color);
	transform: translate(
		calc(var(--cnsa-cards-tile-shift) + var(--cnsa-cards-tile-x)),
		calc(var(--cnsa-cards-tile) * var(--cnsa-cards-tile-above) * -1 + var(--cnsa-cards-tile-y))
	);
}

.cnsa-cards__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--cnsa-cards-icon);
	height: var(--cnsa-cards-icon);
	font-size: var(--cnsa-cards-icon);
	line-height: 1;
	color: inherit;
}

.cnsa-cards__icon i {
	font-size: var(--cnsa-cards-icon);
	line-height: 1;
	color: inherit;
}

.cnsa-cards__icon svg {
	display: block;
	width: 100%;
	height: 100%;
	fill: currentColor;
}

.cnsa-cards .cnsa-cards__icon--image {
	width: var(--cnsa-cards-icon);
	height: var(--cnsa-cards-icon);
	max-width: none;
	object-fit: contain;
}

.cnsa-cards .cnsa-cards__figure {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	margin: 0;
}

.cnsa-cards__photo {
	position: relative;
	overflow: hidden;
	aspect-ratio: var(--cnsa-cards-ratio);
	height: var(--cnsa-cards-photo-h);
	border-radius: var(--cnsa-cards-photo-radius);
	background-color: #ecebe6;
}

/* Two classes: `.elementor img { height: auto }` is (0,1,1). */
.cnsa-cards .cnsa-cards__img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: var(--cnsa-cards-focus);
	border-radius: inherit;
}

.cnsa-cards .cnsa-cards__caption {
	margin: var(--cnsa-cards-cap-space) 0 0;
	padding: 0;
	font-family: 'Poppins', sans-serif;
	font-size: 16px;
	font-style: italic;
	font-weight: 400;
	line-height: 1.45;
	text-align: center;
	color: var(--cnsa-cards-caption);
}

.cnsa-cards a.cnsa-cards__card:focus-visible {
	outline: 2px solid var(--cnsa-cards-tile-bg);
	outline-offset: 4px;
}

.cnsa-cards--lift a.cnsa-cards__card {
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.cnsa-cards--lift a.cnsa-cards__card:hover,
.cnsa-cards--lift a.cnsa-cards__card:focus-visible {
	transform: translateY(-4px);
	box-shadow: 0 18px 40px rgba(26, 34, 56, 0.16);
}

@media (max-width: 1024px) {
	.cnsa-cards {
		--cnsa-cards-gap: 16px;
		--cnsa-cards-tile: 56px;
		--cnsa-cards-icon: 22px;
		--cnsa-cards-head-space: 26px;
		--cnsa-cards-pad-bottom: 18px;
		--cnsa-cards-tile-gap: 24px;
		--cnsa-cards-cap-space: 14px;
	}

	.cnsa-cards .cnsa-cards__heading {
		font-size: 28px;
	}

	.cnsa-cards .cnsa-cards__caption {
		font-size: 15px;
	}
}

/* One card per row, and a line on both sides of each heading: with nothing
   beside it there is nothing for the line to join. */
@media (max-width: 767px) {
	.cnsa-cards {
		--cnsa-cards-cols: 1;
		--cnsa-cards-row-gap: 40px;
		--cnsa-cards-head-space: 24px;
		--cnsa-cards-edge-before: visible;
		--cnsa-cards-edge-after: visible;
		--cnsa-cards-join: 0;
	}

	.cnsa-cards .cnsa-cards__heading {
		font-size: 30px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cnsa-cards--lift a.cnsa-cards__card {
		transition: none;
	}

	.cnsa-cards--lift a.cnsa-cards__card:hover,
	.cnsa-cards--lift a.cnsa-cards__card:focus-visible {
		transform: none;
	}
}

/* ------------------------------------------------ Page-optimiser safeguards */

/*
 * WP Rocket's Automatic Lazy Rendering marks sections far down the page with
 * data-wpr-lazyrender and gives them content-visibility:auto. That brings
 * paint containment with it, always, not only while the section is off
 * screen: a full-bleed widget is clipped to its container, and anything
 * position:fixed inside (the scroll story's pinned stage, the giving bar
 * before it moves itself to <body>) is pinned to the section instead of the
 * screen. Sections that hold one of these widgets are rendered normally.
 */
[data-wpr-lazyrender]:has([class*="elementor-widget-cnsa-"]) {
	content-visibility: visible !important;
	contain: none !important;
	contain-intrinsic-size: none !important;
}


/*
 * Shade behind the copy on phones (Behaviour → Shade behind the copy on
 * phones). White words over a bright picture — the jungle under "It is a
 * lifeline" — were hard to read on a small screen. The shade belongs to the
 * copy, so it fades in and out with it on both the scroll-driven path and the
 * script's, and over a filmstrip it never stacks up across steps. It runs the
 * full width of the screen and feathers away above and below the words.
 */
@media (max-width: 767px) {
	.cnsa-story {
		--cnsa-m-scrim: #0b1830;
		--cnsa-m-scrim-a: 50%;
		--cnsa-m-scrim-reach: 70px;
	}

	.cnsa-story--phone-scrim .cnsa-story__content.has-phone-shade {
		isolation: isolate;
	}

	.cnsa-story--phone-scrim .cnsa-story__content.has-phone-shade::before {
		content: '';
		position: absolute;
		z-index: -1;
		top: calc(var(--cnsa-m-scrim-reach) * -1);
		bottom: calc(var(--cnsa-m-scrim-reach) * -1);
		left: 50%;
		width: 100vw;
		margin-left: -50vw;
		pointer-events: none;
		background: linear-gradient(
			to bottom,
			transparent 0,
			color-mix(in srgb, var(--cnsa-m-scrim) var(--cnsa-m-scrim-a), transparent) var(--cnsa-m-scrim-reach),
			color-mix(in srgb, var(--cnsa-m-scrim) var(--cnsa-m-scrim-a), transparent) calc(100% - var(--cnsa-m-scrim-reach)),
			transparent 100%
		);
	}
}

/*
 * Rivers Become Runways on phones: the floating card (Photograph on phones →
 * Behind a floating card, as on desktop). The photograph runs the width of
 * the screen and the white card — the dial, the aircraft, the number and the
 * pillar — floats on its foot, inset so the picture shows to either side of
 * it, as the desktop card does. The card itself stays put; the slides move
 * inside it, clipped to its edges, and the photographs move behind it.
 */
@media (max-width: 767px) {
	.cnsa-runway {
		--cnsa-run-m-side: 24px;
		--cnsa-run-m-float: 80px;
		--cnsa-run-m-arrow-y: 0px;
		/* Where the dial layer starts, for the side arrows. */
		--cnsa-run-m-stage-top: calc(var(--cnsa-run-m-pad) + var(--cnsa-run-m-photo) + 12px);
	}

	.cnsa-runway__m-carousel--photo-bg {
		--cnsa-run-m-stage-top: calc(var(--cnsa-run-m-photo) - var(--cnsa-run-m-overlap) + 12px);
	}

	.cnsa-runway__m-carousel--float {
		--cnsa-run-m-card-top: calc(var(--cnsa-run-m-photo) - var(--cnsa-run-m-float));
		--cnsa-run-m-stage-top: calc(var(--cnsa-run-m-card-top) + 12px);
	}

	.cnsa-runway__m-carousel--photo-bg.cnsa-runway__m-carousel--float .cnsa-runway__m-frame {
		width: 100vw;
		max-width: 100vw;
		margin-left: calc(50% - 50vw);
		padding: 0;
		overflow: visible;
		border-radius: 0;
		background: none;
		box-shadow: none;
	}

	.cnsa-runway__m-carousel--photo-bg.cnsa-runway__m-carousel--float .cnsa-runway__m-viewport {
		/* Room under the card for its shadow, inside the clip. */
		padding-bottom: 30px;
		border-radius: 0;
	}

	/* The card: fixed, under the dial layer and the slides. */
	.cnsa-runway__m-carousel--photo-bg.cnsa-runway__m-carousel--float .cnsa-runway__m-viewport::before {
		content: '';
		position: absolute;
		z-index: 1;
		top: var(--cnsa-run-m-card-top);
		right: var(--cnsa-run-m-side);
		bottom: 30px;
		left: var(--cnsa-run-m-side);
		border-radius: var(--cnsa-run-radius);
		background: var(--cnsa-run-m-box, var(--cnsa-run-card));
		box-shadow: 0 -24px 40px -22px rgba(14, 24, 48, 0.22), 0 16px 30px -18px rgba(14, 24, 48, 0.2);
		pointer-events: none;
	}

	.cnsa-runway__m-carousel--photo-bg.cnsa-runway__m-carousel--float .cnsa-runway__m-backs {
		z-index: 0;
	}

	/* The photograph at its own height, feathered into the page at its foot
	   rather than into the card, which now sits on top of it. */
	.cnsa-runway__m-carousel--photo-bg.cnsa-runway__m-carousel--float .cnsa-runway__m-back {
		height: var(--cnsa-run-m-photo);
	}

	.cnsa-runway__m-carousel--photo-bg.cnsa-runway__m-carousel--float .cnsa-runway__m-back::after {
		background: linear-gradient(
			to bottom,
			transparent 0%,
			transparent 70%,
			var(--cnsa-run-m-fade, var(--cnsa-run-page)) 100%
		);
	}

	/* The slides' photo box is the space above the card. */
	.cnsa-runway__m-carousel--photo-bg.cnsa-runway__m-carousel--float .cnsa-runway__m-photo {
		height: var(--cnsa-run-m-card-top);
	}

	.cnsa-runway__m-carousel--photo-bg.cnsa-runway__m-carousel--float .cnsa-runway__m-stage {
		top: var(--cnsa-run-m-stage-top);
		/* The weather stays inside the card. */
		clip-path: inset(0 var(--cnsa-run-m-side) -100vh var(--cnsa-run-m-side));
	}

	/* The slides, cut to the card: a slide leaving or arriving is only ever
	   seen inside it, never over the photograph beside it. */
	.cnsa-runway__m-carousel--float .cnsa-runway__m-clip {
		position: relative;
		z-index: 3;
		clip-path: inset(var(--cnsa-run-m-card-top) var(--cnsa-run-m-side) 0 var(--cnsa-run-m-side) round var(--cnsa-run-radius));
	}

	.cnsa-runway__m-carousel--photo-bg.cnsa-runway__m-carousel--float .cnsa-runway__m-slide {
		padding-bottom: 14px;
	}

	.cnsa-runway__m-carousel--photo-bg.cnsa-runway__m-carousel--float .cnsa-runway__m-pillar {
		margin-right: calc(var(--cnsa-run-m-side) + 14px);
		margin-left: calc(var(--cnsa-run-m-side) + 14px);
	}

	.cnsa-runway__m-carousel--float .cnsa-runway__m-nav {
		margin-top: 4px;
	}

	/*
	 * Arrows either side of the card, level with the middle of the dial
	 * (Arrows → Either side of the card). On the floating card they sit on
	 * its edges, half on the card and half on the photograph beside it; the
	 * dots stay underneath.
	 */
	.cnsa-runway__m-carousel--side-arrows .cnsa-runway__m-nav {
		position: static;
	}

	.cnsa-runway .cnsa-runway__m-carousel--side-arrows .cnsa-runway__m-arrow {
		position: absolute;
		z-index: 5;
		top: calc(var(--cnsa-run-m-stage-top) + var(--cnsa-run-m-dial) / 4 - var(--cnsa-run-m-arrow) / 2 + var(--cnsa-run-m-arrow-y));
		box-shadow: 0 6px 16px rgba(14, 24, 48, 0.28);
	}

	.cnsa-runway .cnsa-runway__m-carousel--side-arrows .cnsa-runway__m-arrow--prev {
		left: 6px;
	}

	.cnsa-runway .cnsa-runway__m-carousel--side-arrows .cnsa-runway__m-arrow--next {
		right: 6px;
	}

	/* Measured from the edge of the screen, as the card is: the carousel
	   itself sits inside the section's gutter. */
	.cnsa-runway .cnsa-runway__m-carousel--float.cnsa-runway__m-carousel--side-arrows .cnsa-runway__m-arrow--prev {
		left: calc(max(4px, var(--cnsa-run-m-side) - var(--cnsa-run-m-arrow) / 2) - (100vw - 100%) / 2);
	}

	.cnsa-runway .cnsa-runway__m-carousel--float.cnsa-runway__m-carousel--side-arrows .cnsa-runway__m-arrow--next {
		right: calc(max(4px, var(--cnsa-run-m-side) - var(--cnsa-run-m-arrow) / 2) - (100vw - 100%) / 2);
	}

	.cnsa-runway.cnsa-runway--phone-carousel:has(.cnsa-runway__m-carousel--float) {
		overflow-x: clip;
	}
}


/*
 * Patient Record on phones.
 *
 * The arrows at the card's middle, on its edges (Phones → Arrows either
 * side of the card), as in Rivers Become Runways, rather than down in the dots
 * row. "Middle" is the card's: the frame also holds the dots row under it.
 *
 * The stamp over the photograph's lower right corner in the compact card
 * (Leave off the stamp: off), as on desktop, half on the print.
 */
@media (max-width: 767px) {
	.cnsa-record {
		--cnsa-rec-m-stamp: 0.5;
		--cnsa-rec-m-nav: min(var(--cnsa-rec-nav), 34px);
		/* How much of each arrow lies on the card: little, so it stays clear of
		   the words inside the card's padding. */
		--cnsa-rec-m-nav-on: 8px;
	}

	.cnsa-record.cnsa-record--phone-arrows-mid .cnsa-record__nav {
		top: calc((100% - 68px) / 2);
		bottom: auto;
		width: var(--cnsa-rec-m-nav);
		height: var(--cnsa-rec-m-nav);
		margin-top: calc(var(--cnsa-rec-m-nav) / -2);
	}

	.cnsa-record.cnsa-record--phone-arrows-mid .cnsa-record__nav--prev {
		/* Never closer than 4px to the edge of the screen. */
		/* Measured to the screen's edge: the card is centred on the screen,
		   so the room beside it is half the difference in width. */
		left: max(calc(var(--cnsa-rec-m-nav-on) - var(--cnsa-rec-m-nav)), calc(4px - (100vw - 100%) / 2));
	}

	.cnsa-record.cnsa-record--phone-arrows-mid .cnsa-record__nav--next {
		/* Never closer than 4px to the edge of the screen. */
		/* Measured to the screen's edge: the card is centred on the screen,
		   so the room beside it is half the difference in width. */
		right: max(calc(var(--cnsa-rec-m-nav-on) - var(--cnsa-rec-m-nav)), calc(4px - (100vw - 100%) / 2));
	}

	.cnsa-record--phone-arrows-mid .cnsa-record__dots {
		height: auto;
		margin-top: 22px;
	}

	/* Room under the photograph for the part of the stamp that hangs below
	   it, so the stamp never reaches the detail underneath. */
	.cnsa-record--phone-compact.cnsa-record--phone-stamp .cnsa-record__aside {
		position: relative;
		padding-bottom: var(--cnsa-rec-m-stamp-hang, 14px);
	}

	/* Over the photograph's lower right corner, as on desktop. */
	.cnsa-record.cnsa-record--phone-compact.cnsa-record--phone-stamp .cnsa-record__stamp {
		--cnsa-rec-stamp-scale: var(--cnsa-rec-m-stamp);
		position: absolute;
		right: -10px;
		bottom: 0;
		z-index: 3;
		max-width: none;
		margin: 0;
	}

	.cnsa-record.cnsa-record--phone-compact.cnsa-record--phone-stamp .cnsa-record__stamp-text {
		font-size: calc(26px * var(--cnsa-rec-m-stamp));
		white-space: nowrap;
	}
}


/* Speed Compare: the line break after each comma in the copy (Phones: new
   line after each comma) — hidden above phone width. */
.cnsa-speed .cnsa-speed__m-br {
	display: none;
}

@media (max-width: 767px) {
	.cnsa-speed .cnsa-speed__m-br {
		display: inline;
	}
}

/*
 * Rivers Become Runways: the clouds given an edge to read by (Style → Cloud
 * definition). White cloud on the white card disappears; a soft, cool shadow
 * under an uploaded cloud keeps its shape without greying the cloud itself.
 * The drawn clouds carry their own shading and are left alone.
 */
.cnsa-runway {
	--cnsa-run-cloud-def: 0.16;
}

.cnsa-runway .cnsa-runway__cloud,
.cnsa-runway .cnsa-runway__cloudbank--image .cnsa-runway__clouds {
	filter: drop-shadow(0 10px 22px rgba(34, 51, 87, var(--cnsa-run-cloud-def)));
}


/*
 * Rivers Become Runways: the dial in two pieces (Dial → Outer ring). The
 * ring with its two markers stays still; only the face inside it, with the
 * tick marks, turns. The face is a plain circle, so it turns about its own
 * centre, which sits on the foot of the dial where the ring's centre is.
 */
.cnsa-runway {
	--cnsa-run-dial-inner: 90.9%;
}

.cnsa-runway--dial-pair .cnsa-runway__arc--image {
	--cnsa-run-dial-pivot: 50%;
	left: calc((100% - var(--cnsa-run-dial-inner)) / 2);
	width: var(--cnsa-run-dial-inner);
}

/* The top half of the ring, standing on the foot of the dial. Two classes,
   because `.elementor img` caps an image at its box. */
.cnsa-runway .cnsa-runway__arc-outer {
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 2;
	display: block;
	width: 100%;
	max-width: none;
	height: auto;
	pointer-events: none;
}