/**
 * McMyra gradient accents.
 *
 * Applied through two hook classes so nothing here leaks into the other card
 * rows on the site (pricing, FAQs, the portfolio grids):
 *
 *   .heading-gradient  - a single heading set in the brand gradient
 *   .accent-cards      - a card row whose cards each take their own accent
 *
 * Every stop in every gradient is dark enough to clear 4.5:1 on white, so the
 * text stays readable across the whole sweep rather than fading out at the end.
 * The clip is wrapped in @supports and a solid colour is declared first, so a
 * browser without background-clip:text shows ink rather than nothing.
 */

:root {
	--mc-grad-blue: linear-gradient( 100deg, #00305e 0%, #1374c3 55%, #0a7a6a 100% );
	--mc-grad-teal: linear-gradient( 100deg, #0a5c52 0%, #0a7a6a 45%, #1374c3 100% );
	--mc-grad-amber: linear-gradient( 100deg, #8a4b00 0%, #b26a12 50%, #1374c3 100% );
	--mc-grad-deep: linear-gradient( 100deg, #001f3d 0%, #1a4371 50%, #0a7a6a 100% );
	--mc-grad-sea: linear-gradient( 100deg, #0a5c52 0%, #1374c3 50%, #00305e 100% );
}

/* ---------- section heading ---------- */

/* Elementor emits its heading colours as `.elementor .heading-2`, so these
 * selectors are weighted to win outright rather than relying on load order. */
.elementor .heading-gradient,
.elementor .heading-gradient.heading-2 {
	color: var( --ink, #0e2034 );
}

@supports ( background-clip: text ) or ( -webkit-background-clip: text ) {
	.elementor .heading-gradient,
	.elementor .heading-gradient.heading-2 {
		background-image: var( --mc-grad-blue );
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
		-webkit-text-fill-color: transparent;
	}
}

/* ---------- accent cards ---------- */

.accent-cards .card-service {
	position: relative;
	overflow: hidden;
	transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

/* The bar is the colour cue that survives even where gradient text does not. */
.accent-cards .card-service::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	inset-inline-end: 0;
	height: 5px;
	background-image: var( --mc-grad-blue );
}

.accent-cards .card-service:hover {
	transform: translateY( -3px );
	border-color: transparent;
	box-shadow: 0 12px 30px rgba( 14, 32, 52, 0.12 );
}

.accent-cards .card-service:nth-child( 2 )::before { background-image: var( --mc-grad-teal ); }
.accent-cards .card-service:nth-child( 3 )::before { background-image: var( --mc-grad-amber ); }
.accent-cards .card-service:nth-child( 4 )::before { background-image: var( --mc-grad-deep ); }

/* Index numerals pick up the head of their card's gradient. */
.accent-cards .card-service:nth-child( 1 ) .card-index { color: #1374c3; }
.accent-cards .card-service:nth-child( 2 ) .card-index { color: #0a7a6a; }
.accent-cards .card-service:nth-child( 3 ) .card-index { color: #b26a12; }
.accent-cards .card-service:nth-child( 4 ) .card-index { color: #1a4371; }

.accent-cards .card-service .heading-3 {
	color: var( --ink, #0e2034 );
}

@supports ( background-clip: text ) or ( -webkit-background-clip: text ) {
	.accent-cards .card-service .heading-3 {
		background-image: var( --mc-grad-blue );
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
		-webkit-text-fill-color: transparent;
	}

	.accent-cards .card-service:nth-child( 2 ) .heading-3 { background-image: var( --mc-grad-teal ); }
	.accent-cards .card-service:nth-child( 3 ) .heading-3 { background-image: var( --mc-grad-amber ); }
	.accent-cards .card-service:nth-child( 4 ) .heading-3 { background-image: var( --mc-grad-deep ); }
}

/* ---------- accent panel: a callout that carries the same colour system ---------- */

.accent-panel {
	overflow: hidden;
	box-shadow: 0 10px 30px rgba( 14, 32, 52, 0.06 );
}

.accent-panel::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	inset-inline-end: 0;
	height: 5px;
	background-image: var( --mc-grad-blue );
}

/* ---------- numbered steps ---------- */

/* flex-start rather than centre so the badge stays level with the first line
 * when a step wraps, which also keeps the connector meeting it squarely. */
.steps-accent > * {
	position: relative;
	align-items: flex-start;
}

.steps-accent > *:not( :last-child )::after {
	content: "";
	position: absolute;
	inset-inline-start: 21px;
	inset-block-start: 44px;
	inset-block-end: -24px;
	width: 2px;
	border-radius: 2px;
	background-image: linear-gradient( 180deg, rgba( 19, 116, 195, 0.45 ), rgba( 10, 122, 106, 0.12 ) );
}

.steps-accent .step-number {
	background-image: var( --mc-grad-blue );
	box-shadow: 0 4px 12px rgba( 14, 32, 52, 0.18 );
}

.steps-accent > *:nth-child( 2 ) .step-number { background-image: var( --mc-grad-teal ); }
.steps-accent > *:nth-child( 3 ) .step-number { background-image: var( --mc-grad-amber ); }

/* The step text sits beside a 44px badge; give it room to breathe. */
.steps-accent .body-text {
	padding-block-start: 9px;
}

/* ---------- audience strip as cards ---------- */

/* The strip band is pale blue, so white cards read as raised objects on it
 * rather than as boxes drawn on white. Equal heights come free: the row is a
 * flex container and align-items defaults to stretch, so the longest column
 * sets the height and the rest fill it instead of ending raggedly. */
.strip-cards .strip-col {
	position: relative;
	padding: 26px 22px 24px;
	border-radius: 18px;
	background-color: var( --white, #ffffff );
	box-shadow: 0 1px 2px rgba( 14, 32, 52, 0.05 ), 0 12px 28px rgba( 14, 32, 52, 0.07 );
	overflow: hidden;
	transition: transform 200ms ease, box-shadow 200ms ease;
}

.strip-cards .strip-col::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	inset-inline-end: 0;
	height: 5px;
	background-image: var( --mc-grad-blue );
}

.strip-cards .strip-col:hover {
	transform: translateY( -4px );
	box-shadow: 0 2px 4px rgba( 14, 32, 52, 0.06 ), 0 20px 40px rgba( 14, 32, 52, 0.12 );
}

.strip-cards .strip-col:nth-child( 2 )::before { background-image: var( --mc-grad-teal ); }
.strip-cards .strip-col:nth-child( 3 )::before { background-image: var( --mc-grad-amber ); }
.strip-cards .strip-col:nth-child( 4 )::before { background-image: var( --mc-grad-deep ); }
.strip-cards .strip-col:nth-child( 5 )::before { background-image: var( --mc-grad-sea ); }

.strip-cards .strip-item {
	color: var( --ink, #0e2034 );
}

@supports ( background-clip: text ) or ( -webkit-background-clip: text ) {
	.strip-cards .strip-col .strip-item {
		background-image: var( --mc-grad-blue );
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
		-webkit-text-fill-color: transparent;
	}

	.strip-cards .strip-col:nth-child( 2 ) .strip-item { background-image: var( --mc-grad-teal ); }
	.strip-cards .strip-col:nth-child( 3 ) .strip-item { background-image: var( --mc-grad-amber ); }
	.strip-cards .strip-col:nth-child( 4 ) .strip-item { background-image: var( --mc-grad-deep ); }
	.strip-cards .strip-col:nth-child( 5 ) .strip-item { background-image: var( --mc-grad-sea ); }
}

@media ( max-width: 1024px ) {
	.strip-cards .strip-col { padding: 22px 18px 20px; }
}

/* ---------- accented tick list ---------- */

/* The dots carry the same blue / teal / amber run as the cards and the steps,
 * so a reader meets one colour system across the site rather than three. They
 * grow from 7px to 9px because a gradient needs a little more area to read as
 * a gradient rather than as a muddy single colour. */
.tick-accent .tick-dot {
	width: 9px;
	height: 9px;
	min-width: 9px;
	margin-block-start: 9px;
	background-image: var( --mc-grad-blue );
	box-shadow: 0 0 0 3px rgba( 19, 116, 195, 0.12 );
}

.tick-accent .tick-item:nth-child( 2 ) .tick-dot {
	background-image: var( --mc-grad-teal );
	box-shadow: 0 0 0 3px rgba( 10, 122, 106, 0.12 );
}

.tick-accent .tick-item:nth-child( 3 ) .tick-dot {
	background-image: var( --mc-grad-amber );
	box-shadow: 0 0 0 3px rgba( 178, 106, 18, 0.12 );
}

/* Windows high-contrast: hand the text back to the system palette. */
@media ( forced-colors: active ) {
	.elementor .heading-gradient,
	.accent-cards .card-service .heading-3 {
		background-image: none;
		color: CanvasText;
		-webkit-text-fill-color: CanvasText;
	}
}

@media ( forced-colors: active ) {
	.strip-cards .strip-col {
		border: 1px solid CanvasText;
	}

	.strip-cards .strip-col .strip-item {
		background-image: none;
		color: CanvasText;
		-webkit-text-fill-color: CanvasText;
	}

	.accent-panel::before,
	.strip-cards .strip-col::before,
	.steps-accent > *:not( :last-child )::after,
	.tick-accent .tick-dot {
		background-image: none;
		background-color: CanvasText;
		box-shadow: none;
	}

	.steps-accent .step-number {
		background-image: none;
		background-color: Canvas;
		border: 2px solid CanvasText;
		color: CanvasText;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.accent-cards .card-service,
	.accent-cards .card-service:hover,
	.strip-cards .strip-col,
	.strip-cards .strip-col:hover {
		transition: none;
		transform: none;
	}
}