/**
 * Section — Homepage hero (hero redesign pass, 5 Oct 2026; NOT
 * design-locked — awaiting Aaron's visual review)
 *
 * Markup: modules/frontend/views/sections/hero.php. Behaviour:
 * assets/js/components/home-hero.js.
 *
 * One composition: identity line → carousel → proof ribbon.
 *
 * Carousel: a clipped viewport; every slide sits in the same centred
 * grid cell and is moved by data-pos:
 *   0     centre — full size, lit edge and glow; the status badge
 *         centred on the artwork's top edge; a small price tag (the
 *         number only) inside the artwork's bottom-left corner; caption
 *         (title + cash alternative) beneath;
 *  -1/+1  neighbours — smaller, dimmed, tucked just behind the centre and
 *         cut by the viewport edge: the swipe cue, never competition;
 *  -2/+2  off-stage, invisible.
 * Changing slide only changes data-pos: the incoming neighbour travels
 * to the centre and settles (slight overshoot) while the outgoing one
 * recedes. Transform / opacity / filter only.
 * Reduced motion: positions jump, only opacity fades; no auto-advance.
 *
 * --ec-hero-w is the active artwork frame's width; everything derives
 * from it. The frame is 16:9 (EC artwork's own shape) at every width;
 * other shapes are fitted whole inside it, never cropped.
 */

.ec-home-hero {
	--ec-hero-w: 80vw;
	--ec-hero-frame: 0.5625;
	--ec-hero-side-scale: 0.86;
	--ec-hero-side-shift: 0.78;
	--ec-hero-top: 1.1rem;
	--ec-hero-ease: cubic-bezier(0.22, 1.18, 0.36, 1);
	--ec-pearl: linear-gradient(120deg, #7cecf3, #f9c2ec 55%, #2cd5e3);
	position: relative;
	overflow: hidden;
	background-color: var(--ec-color-canvas);
}

.ec-home-hero__demo {
	position: relative;
	z-index: 4;
	width: fit-content;
	max-width: calc(100% - 2rem);
	margin: var(--ec-space-3) auto 0;
	padding: var(--ec-space-1) var(--ec-space-3);
	border: 1px dashed rgba(247, 172, 112, 0.6);
	border-radius: var(--ec-radius-full);
	color: var(--ec-color-warm);
	font-size: var(--ec-font-size-caption);
	text-align: center;
}

/* ----- Ambient backdrop: the active artwork, blurred, full-bleed ------ */

.ec-home-hero__ambient {
	position: absolute;
	inset: 0;
	pointer-events: none;
	/* Capture hardening (14 Oct 2026): the blurred, scaled artwork layers are composited; WebKit's
	   full-page screenshot (and print) can draw them unclipped as a huge teal shape. overflow + paint
	   containment + an explicit clip keep them inside the hero in every renderer. The hero already
	   clips with overflow: hidden, so what is seen on screen does not change. */
	overflow: hidden;
	contain: paint;
	clip-path: inset(0);
}

.ec-home-hero__ambient-layer {
	position: absolute;
	inset: -80px;
	background-position: center;
	background-size: cover;
	filter: blur(60px) saturate(1.3);
	opacity: 0;
	transform: scale(1.1);
	transition: opacity 900ms var(--ec-ease-standard);
}

.ec-home-hero__ambient-layer.is-active {
	opacity: 0.34;
}

.ec-home-hero__ambient::after {
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse 50% 38% at 50% 0%, rgba(44, 213, 227, 0.14), rgba(44, 213, 227, 0) 72%),
		radial-gradient(ellipse 45% 55% at 50% 48%, rgba(44, 213, 227, 0.1), rgba(44, 213, 227, 0) 70%),
		radial-gradient(ellipse 30% 30% at 82% 30%, rgba(249, 194, 236, 0.06), rgba(249, 194, 236, 0) 70%),
		radial-gradient(ellipse 75% 40% at 50% 100%, rgba(44, 213, 227, 0.18), rgba(44, 213, 227, 0) 72%),
		linear-gradient(180deg, rgba(5, 10, 18, 0.45) 0%, rgba(5, 10, 18, 0.55) 55%, rgba(5, 10, 18, 0.5) 100%);
}

/* ----- 1. Identity ---------------------------------------------------- */

.ec-home-hero__intro {
	position: relative;
	z-index: 3;
	display: grid;
	justify-items: center;
	gap: 0.35rem;
	padding: var(--ec-space-5) var(--ec-space-4) var(--ec-space-2);
	text-align: center;
}

.ec-home-hero__headline {
	margin: 0;
	color: var(--ec-color-text-primary);
	font-family: var(--ec-font-family-base);
	font-size: clamp(1.625rem, 3.2vw, 2.75rem);
	font-weight: var(--ec-font-weight-bold);
	letter-spacing: -0.01em;
	line-height: 1.05;
	text-transform: uppercase;
	text-wrap: balance;
}

.ec-home-hero__headline-accent {
	background: linear-gradient(100deg, #67e6f0 0%, #2cd5e3 45%, #a8f1f6 70%, #f9c2ec 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	filter: drop-shadow(0 0 18px rgba(44, 213, 227, 0.28));
}

.ec-home-hero__tagline {
	margin: 0;
	color: var(--ec-color-text-secondary);
	font-size: var(--ec-font-size-body-lg);
	line-height: 1.4;
}

/* ----- 2. Carousel ----------------------------------------------------- */

.ec-home-hero__carousel {
	position: relative;
	z-index: 1;
}

.ec-home-hero__viewport {
	position: relative;
	overflow: hidden;
	touch-action: pan-y;
}

.ec-home-hero__stage {
	display: grid;
	justify-items: center;
}

.ec-home-hero__slide {
	grid-area: 1 / 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: var(--ec-hero-w);
	min-width: 0;
	padding-top: var(--ec-hero-top);
	/* Scale around the artwork's centre, not the whole slide's */
	transform-origin: 50% calc(var(--ec-hero-top) + var(--ec-hero-w) * var(--ec-hero-frame) / 2);
	transition:
		transform 850ms var(--ec-hero-ease),
		opacity 650ms var(--ec-ease-standard),
		filter 650ms var(--ec-ease-standard);
	will-change: transform;
}

.ec-home-hero__slide[data-pos='0'] {
	z-index: 3;
	transform: none;
	/* 16 Oct 2026: a layer kept on will-change keeps the raster it got at its 0.6 / side scale, so
	   the centred artwork looked slightly soft; the centre slide drops the hint and is redrawn crisp. */
	will-change: auto;
}

.ec-home-hero__slide[data-pos='-1'],
.ec-home-hero__slide[data-pos='1'] {
	z-index: 2;
	opacity: 0.5;
	filter: brightness(0.5) saturate(0.8);
	cursor: pointer;
}

.ec-home-hero__slide[data-pos='-1'] {
	transform: translateX(calc(var(--ec-hero-w) * var(--ec-hero-side-shift) * -1)) scale(var(--ec-hero-side-scale));
}

.ec-home-hero__slide[data-pos='1'] {
	transform: translateX(calc(var(--ec-hero-w) * var(--ec-hero-side-shift))) scale(var(--ec-hero-side-scale));
}

.ec-home-hero__slide[data-pos='-2'],
.ec-home-hero__slide[data-pos='2'] {
	z-index: 1;
	opacity: 0;
	pointer-events: none;
}

.ec-home-hero__slide[data-pos='-2'] {
	transform: translateX(calc(var(--ec-hero-w) * -1.6)) scale(0.6);
}

.ec-home-hero__slide[data-pos='2'] {
	transform: translateX(calc(var(--ec-hero-w) * 1.6)) scale(0.6);
}

.ec-home-hero__slide[data-pos='-1']:hover,
.ec-home-hero__slide[data-pos='1']:hover {
	opacity: 0.7;
	filter: brightness(0.7) saturate(0.9);
}

/* The slide's one link: artwork + badge + price + caption */
.ec-home-hero__visual {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	border-radius: var(--ec-radius-lg);
	color: inherit;
	text-decoration: none;
	-webkit-user-drag: none;
	user-select: none;
}

.ec-home-hero__visual:focus-visible {
	outline: none;
}

/* Fixed 16:9 frame; the artwork is fitted whole and centred inside it.
   The wrap shrinks to the artwork, so the badge and price tag anchor to
   the artwork's own edges whatever its shape. */
.ec-home-hero__frame {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: calc(var(--ec-hero-w) * var(--ec-hero-frame));
}

.ec-home-hero__art-wrap {
	position: relative;
	display: flex;
	max-width: 100%;
	max-height: 100%;
}

.ec-home-hero__art {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: calc(var(--ec-hero-w) * var(--ec-hero-frame));
	object-fit: contain;
	border-radius: var(--ec-radius-lg);
	box-shadow: 0 30px 70px -24px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(150, 192, 228, 0.14);
	transition: box-shadow 650ms var(--ec-ease-standard), transform 450ms var(--ec-ease-standard);
}

/* The active artwork: a lit teal / pearl edge and a soft glow */
.ec-home-hero__slide[data-pos='0'] .ec-home-hero__art {
	box-shadow:
		0 34px 80px -24px rgba(0, 0, 0, 0.85),
		0 0 0 1px rgba(124, 236, 243, 0.4),
		0 0 60px rgba(44, 213, 227, 0.2),
		0 0 110px rgba(249, 194, 236, 0.07);
}

.ec-home-hero__visual:focus-visible .ec-home-hero__art {
	box-shadow: var(--ec-focus-ring), 0 34px 80px -24px rgba(0, 0, 0, 0.85);
	transition: none;
}

.ec-home-hero__art--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--ec-hero-w);
	height: calc(var(--ec-hero-w) * var(--ec-hero-frame));
	padding: var(--ec-space-5);
	box-sizing: border-box;
	background: linear-gradient(135deg, var(--ec-color-surface-elevated), var(--ec-color-surface));
	color: var(--ec-color-text-primary);
	font-size: var(--ec-font-size-h3);
	font-weight: var(--ec-font-weight-bold);
	text-align: center;
}

/* Badge, price tag and caption belong to the active slide only; they
   fade out with an outgoing slide and in (a beat later) with the new. */
.ec-home-hero__badge,
.ec-home-hero__price,
.ec-home-hero__caption {
	opacity: 0;
	visibility: hidden;
	transition: opacity 300ms var(--ec-ease-standard), transform 450ms var(--ec-ease-standard), visibility 0s linear 300ms;
}

.ec-home-hero__slide[data-pos='0'] .ec-home-hero__badge,
.ec-home-hero__slide[data-pos='0'] .ec-home-hero__price,
.ec-home-hero__slide[data-pos='0'] .ec-home-hero__caption {
	opacity: 1;
	visibility: visible;
	transition: opacity 450ms var(--ec-ease-standard) 300ms, transform 450ms var(--ec-ease-standard) 300ms, visibility 0s;
}

/* Status badge, centred on the artwork's top edge */
.ec-home-hero__badge {
	position: absolute;
	top: 0;
	left: 50%;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	padding: 0.38rem 0.85rem;
	border: 1px solid var(--ec-color-border-strong);
	border-radius: var(--ec-radius-full);
	background-color: rgba(6, 12, 22, 0.88);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
	color: var(--ec-color-text-primary);
	font-size: var(--ec-font-size-caption);
	font-weight: var(--ec-font-weight-bold);
	letter-spacing: 0.1em;
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
	transform: translate(-50%, -50%);
}

.ec-home-hero__badge--warm {
	border-color: rgba(247, 172, 112, 0.6);
	color: var(--ec-color-warm);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45), 0 0 18px rgba(247, 172, 112, 0.25);
}

.ec-home-hero__badge--new {
	border-color: rgba(31, 157, 100, 0.6);
	color: #9fe3c2;
}

.ec-home-hero__badge--promo {
	border-color: rgba(240, 96, 200, 0.5);
	color: var(--ec-color-magenta-300);
}

.ec-home-hero__badge--auto {
	border-color: rgba(150, 192, 228, 0.45);
}

.ec-home-hero__badge--featured {
	border-color: rgba(44, 213, 227, 0.55);
	color: var(--ec-color-accent-strong);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45), 0 0 18px rgba(44, 213, 227, 0.25);
}

/* Price tag: the ticket price alone ("87p"), small, inside the
   artwork's bottom-left corner — navy, a pearl edge, a soft teal glow. */
.ec-home-hero__price {
	position: absolute;
	left: clamp(0.5rem, 2.4%, 1rem);
	bottom: clamp(0.5rem, 2.4%, 1rem);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	padding: 0.28rem 0.6rem 0.3rem;
	border: 1px solid transparent;
	border-radius: 0.6rem;
	background:
		linear-gradient(160deg, rgba(16, 34, 58, 0.94), rgba(7, 16, 30, 0.94)) padding-box,
		var(--ec-pearl) border-box;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45), 0 0 14px rgba(44, 213, 227, 0.25);
	color: #fff;
	font-size: 1.0625rem;
	font-weight: var(--ec-font-weight-bold);
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.01em;
	line-height: 1;
	white-space: nowrap;
}

/* Caption: the competition's name, and its cash alternative */
.ec-home-hero__caption {
	display: grid;
	justify-items: center;
	gap: 0.3rem;
	max-width: min(100%, 44rem);
	margin-top: var(--ec-space-4);
	padding: 0 var(--ec-space-2);
	text-align: center;
}

.ec-home-hero__name {
	position: relative;
	color: var(--ec-color-text-primary);
	font-family: var(--ec-font-family-base);
	font-size: clamp(1.25rem, 1.8vw, 1.625rem);
	font-weight: var(--ec-font-weight-bold);
	letter-spacing: var(--ec-letter-spacing-tight);
	line-height: 1.2;
	text-wrap: balance;
	overflow-wrap: anywhere;
	transition: color 250ms var(--ec-ease-standard);
}

.ec-home-hero__cash {
	color: var(--ec-color-accent-strong);
	font-size: var(--ec-font-size-caption);
	font-weight: var(--ec-font-weight-semibold);
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.ec-home-hero__cash strong {
	color: var(--ec-color-text-primary);
	font-size: var(--ec-font-size-body);
	letter-spacing: 0;
	font-variant-numeric: tabular-nums;
}

/* A quiet "go" mark beside the title on hover / focus — zero-width, so
   it never shifts the centred title */
.ec-home-hero__go {
	position: relative;
	display: inline-block;
	width: 0;
	height: 1em;
	vertical-align: -0.1em;
	color: var(--ec-color-accent);
	opacity: 0;
	transform: translateX(-6px);
	transition: opacity 250ms var(--ec-ease-standard), transform 250ms var(--ec-ease-standard);
}

.ec-home-hero__go .ec-icon {
	position: absolute;
	top: 50%;
	left: 0.4rem;
	width: 1.1rem;
	height: 1.1rem;
	margin-top: -0.55rem;
}

/* Discoverable, not a button: the artwork lifts a touch and glows
   brighter, the title takes the accent and its "go" mark slides in. */
.ec-home-hero__slide[data-pos='0'] .ec-home-hero__visual:hover .ec-home-hero__name,
.ec-home-hero__slide[data-pos='0'] .ec-home-hero__visual:focus-visible .ec-home-hero__name {
	color: var(--ec-color-accent-strong);
}

.ec-home-hero__slide[data-pos='0'] .ec-home-hero__visual:hover .ec-home-hero__go,
.ec-home-hero__slide[data-pos='0'] .ec-home-hero__visual:focus-visible .ec-home-hero__go {
	opacity: 1;
	transform: none;
}

.ec-home-hero__slide[data-pos='0'] .ec-home-hero__visual:hover .ec-home-hero__art {
	transform: translateY(-4px);
	box-shadow:
		0 40px 90px -24px rgba(0, 0, 0, 0.9),
		0 0 0 1px rgba(124, 236, 243, 0.6),
		0 0 80px rgba(44, 213, 227, 0.26),
		0 0 120px rgba(249, 194, 236, 0.1);
}

.ec-home-hero__slide[data-pos='0'] .ec-home-hero__visual:hover .ec-home-hero__price,
.ec-home-hero__slide[data-pos='0'] .ec-home-hero__visual:hover .ec-home-hero__badge {
	transition-delay: 0s;
}

.ec-home-hero__slide[data-pos='0'] .ec-home-hero__visual:hover .ec-home-hero__price {
	transform: translateY(-4px);
}

.ec-home-hero__slide[data-pos='0'] .ec-home-hero__visual:hover .ec-home-hero__badge {
	transform: translate(-50%, calc(-50% - 4px));
}

.ec-home-hero__visual:focus-visible .ec-home-hero__name {
	text-decoration: underline;
	text-decoration-color: var(--ec-color-accent);
	text-underline-offset: 0.3em;
}

/* ----- Controls -------------------------------------------------------
   Understated: ‹ • ● • › plus a small pause/play icon. The artwork
   (click a neighbour, swipe, ←/→) is the main interface. */

.ec-home-hero__controls {
	position: relative;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--ec-space-1);
	padding: var(--ec-space-2) var(--ec-space-4) 0;
}

.ec-home-hero__arrow,
.ec-home-hero__pause {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	flex-shrink: 0;
	padding: 0;
	border: 0;
	border-radius: var(--ec-radius-full);
	background: none;
	color: var(--ec-color-text-secondary);
	cursor: pointer;
	transition: color var(--ec-duration-fast) var(--ec-ease-standard), background-color var(--ec-duration-fast) var(--ec-ease-standard);
}

.ec-home-hero__arrow .ec-icon {
	width: 1.1rem;
	height: 1.1rem;
}

.ec-home-hero__arrow--prev .ec-icon {
	transform: rotate(180deg);
}

.ec-home-hero__arrow:hover,
.ec-home-hero__pause:hover {
	color: var(--ec-color-text-primary);
	background-color: rgba(150, 192, 228, 0.1);
}

.ec-home-hero__arrow:focus-visible,
.ec-home-hero__dot:focus-visible,
.ec-home-hero__pause:focus-visible {
	outline: none;
	box-shadow: var(--ec-focus-ring);
}

.ec-home-hero__dots {
	display: flex;
	align-items: center;
}

.ec-home-hero__dot {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.25rem;
	height: 2.5rem;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.ec-home-hero__dot span {
	display: block;
	width: 0.375rem;
	height: 0.375rem;
	border-radius: var(--ec-radius-full);
	background-color: rgba(150, 192, 228, 0.35);
	transition: width 300ms var(--ec-ease-standard), background-color 300ms var(--ec-ease-standard);
}

.ec-home-hero__dot[aria-current='true'] span {
	width: 1rem;
	background: var(--ec-pearl);
	box-shadow: 0 0 8px rgba(44, 213, 227, 0.45);
}

.ec-home-hero__pause {
	width: 2rem;
	height: 2rem;
	margin-left: var(--ec-space-2);
	color: var(--ec-color-text-tertiary);
}

.ec-home-hero__pause svg {
	width: 0.75rem;
	height: 0.75rem;
	fill: currentColor;
}

.ec-home-hero__play-icon,
.ec-home-hero__pause[aria-pressed='true'] .ec-home-hero__pause-icon {
	display: none;
}

.ec-home-hero__pause[aria-pressed='true'] .ec-home-hero__play-icon {
	display: block;
}

/* ----- 3. Proof ribbon — the hero's bottom edge ------------------------
   One slim line: [faces] 5 Winners · £25,990 Awarded · 4 Draws
   completed · ✓ Guaranteed draws. The number beside the faces is ALL
   public winners; the faces are the latest Winner Media photos. */

.ec-home-hero__trust {
	position: relative;
	z-index: 3;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
	max-width: 1440px;
	margin: var(--ec-space-4) auto 0;
	padding: 0.7rem var(--ec-gutter, var(--ec-space-4));
	border-top: 1px solid transparent;
	border-image: linear-gradient(90deg, rgba(44, 213, 227, 0), rgba(124, 236, 243, 0.4) 30%, rgba(249, 194, 236, 0.3) 55%, rgba(124, 236, 243, 0.4) 75%, rgba(44, 213, 227, 0)) 1;
	background: linear-gradient(180deg, rgba(44, 213, 227, 0.07), rgba(44, 213, 227, 0.015));
	color: var(--ec-color-text-secondary);
	font-size: var(--ec-font-size-body-sm);
	line-height: 1.2;
	white-space: nowrap;
}

.ec-home-hero__trust-item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	min-width: 0;
	padding: 0 var(--ec-space-5);
}

.ec-home-hero__trust-item + .ec-home-hero__trust-item {
	border-left: 1px solid rgba(150, 192, 228, 0.18);
}

.ec-home-hero__stat strong {
	color: var(--ec-color-text-primary);
	font-size: var(--ec-font-size-body);
	font-weight: var(--ec-font-weight-bold);
	font-variant-numeric: tabular-nums;
}

.ec-home-hero__trust-item--guaranteed .ec-home-hero__stat {
	color: var(--ec-color-text-primary);
	font-weight: var(--ec-font-weight-semibold);
}

.ec-home-hero__trust-item .ec-icon {
	flex-shrink: 0;
	color: var(--ec-color-accent);
}

.ec-home-hero__faces {
	display: inline-flex;
	flex-shrink: 0;
}

.ec-home-hero__faces img {
	width: 1.75rem;
	height: 1.75rem;
	object-fit: cover;
	border: 2px solid var(--ec-color-canvas);
	border-radius: var(--ec-radius-full);
}

.ec-home-hero__faces img + img {
	margin-left: -0.55rem;
}

/* ----- Breakpoints ------------------------------------------------------ */

/* Desktop: a commanding centre, neighbours showing broadly at both sides
   (dimmed, tucked behind) to give the carousel life; the identity line
   on one line above. */
@media (min-width: 1024px) {
	.ec-home-hero {
		--ec-hero-w: min(50rem, 56vw);
		--ec-hero-side-scale: 0.74;
		--ec-hero-side-shift: 0.86;
		--ec-hero-top: 1.3rem;
	}

	.ec-home-hero__intro {
		padding-top: var(--ec-space-6);
	}
}

/* Tablets */
@media (min-width: 640px) and (max-width: 1023px) {
	.ec-home-hero {
		--ec-hero-w: 66vw;
		--ec-hero-side-scale: 0.8;
		--ec-hero-side-shift: 0.9;
	}

	.ec-home-hero__trust-item {
		padding: 0 var(--ec-space-3);
	}

	.ec-home-hero__trust {
		font-size: var(--ec-font-size-caption);
	}
}

/* Phones: the active artwork dominant (80vw), a controlled sliver of each
   neighbour at the screen edges; the ribbon one compact line. */
@media (max-width: 639px) {
	.ec-home-hero__intro {
		gap: 0.3rem;
		padding: var(--ec-space-4) var(--ec-space-4) var(--ec-space-1);
	}

	.ec-home-hero__headline {
		font-size: 1.625rem;
	}

	.ec-home-hero__headline > span {
		display: block;
	}

	.ec-home-hero__tagline {
		font-size: var(--ec-font-size-body-sm);
	}

	.ec-home-hero__ambient-layer {
		inset: -45%;
		filter: blur(40px) saturate(1.3);
	}

	.ec-home-hero__ambient-layer.is-active {
		opacity: 0.3;
	}

	.ec-home-hero__ambient::after {
		background:
			radial-gradient(ellipse 80% 22% at 50% 0%, rgba(44, 213, 227, 0.12), rgba(44, 213, 227, 0) 75%),
			linear-gradient(180deg, rgba(44, 213, 227, 0.05) 0%, rgba(44, 213, 227, 0.03) 55%, rgba(44, 213, 227, 0.1) 100%),
			linear-gradient(180deg, rgba(5, 10, 18, 0.42) 0%, rgba(5, 10, 18, 0.55) 60%, rgba(5, 10, 18, 0.45) 100%);
	}

	.ec-home-hero__badge {
		padding: 0.32rem 0.7rem;
		font-size: 0.6875rem;
	}

	.ec-home-hero__price {
		padding: 0.22rem 0.5rem 0.25rem;
		border-radius: 0.5rem;
		font-size: 0.9375rem;
	}

	.ec-home-hero__caption {
		gap: 0.2rem;
		margin-top: var(--ec-space-3);
	}

	.ec-home-hero__name {
		font-size: 1.1875rem;
	}

	.ec-home-hero__controls {
		padding-top: 0;
	}

	.ec-home-hero__arrow {
		width: 2.25rem;
		height: 2.25rem;
	}

	/* The ribbon: one line. Words that only add length on a phone
	   ("completed", "draws") drop; values stay strong. */
	.ec-home-hero__trust {
		justify-content: space-between;
		margin-top: var(--ec-space-2);
		padding: 0.6rem 0.75rem;
		font-size: 0.6875rem;
	}

	.ec-home-hero__trust-item {
		flex-shrink: 0;
		gap: 0.25rem;
		padding: 0 0.45rem;
	}

	.ec-home-hero__trust-item:first-child {
		padding-left: 0;
	}

	.ec-home-hero__trust-item:last-child {
		padding-right: 0;
	}

	.ec-home-hero__long {
		display: none;
	}

	.ec-home-hero__stat strong {
		font-size: 0.8125rem;
	}

	.ec-home-hero__trust-item .ec-icon {
		width: 0.875rem;
		height: 0.875rem;
	}

	.ec-home-hero__faces img {
		width: 1.1rem;
		height: 1.1rem;
		border-width: 1.5px;
	}

	.ec-home-hero__faces img + img {
		margin-left: -0.4rem;
	}
}

/* The narrowest phones: a touch tighter, nothing removed. */
@media (max-width: 359px) {
	.ec-home-hero__headline {
		font-size: 1.3125rem;
	}

	.ec-home-hero__trust {
		padding-left: 0.4rem;
		padding-right: 0.4rem;
		font-size: 0.625rem;
	}

	.ec-home-hero__trust-item {
		gap: 0.2rem;
		padding: 0 0.22rem;
	}

	.ec-home-hero__stat strong {
		font-size: 0.75rem;
	}

	.ec-home-hero__trust-item .ec-icon {
		width: 0.8rem;
		height: 0.8rem;
	}

	.ec-home-hero__faces img {
		width: 1rem;
		height: 1rem;
	}

	.ec-home-hero__faces img + img {
		margin-left: -0.35rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ec-home-hero__slide {
		transition: opacity 200ms linear;
	}

	.ec-home-hero__ambient-layer,
	.ec-home-hero__badge,
	.ec-home-hero__price,
	.ec-home-hero__caption,
	.ec-home-hero__slide[data-pos='0'] .ec-home-hero__badge,
	.ec-home-hero__slide[data-pos='0'] .ec-home-hero__price,
	.ec-home-hero__slide[data-pos='0'] .ec-home-hero__caption,
	.ec-home-hero__go,
	.ec-home-hero__art,
	.ec-home-hero__dot span,
	.ec-home-hero__arrow {
		transition: none;
	}

	/* Hover / focus still signal the link (colour, glow, the go mark),
	   but nothing moves. */
	.ec-home-hero__slide[data-pos='0'] .ec-home-hero__visual:hover .ec-home-hero__art,
	.ec-home-hero__go,
	.ec-home-hero__slide[data-pos='0'] .ec-home-hero__visual:hover .ec-home-hero__go,
	.ec-home-hero__slide[data-pos='0'] .ec-home-hero__visual:focus-visible .ec-home-hero__go {
		transform: none;
	}

	.ec-home-hero__slide[data-pos='0'] .ec-home-hero__visual:hover .ec-home-hero__price {
		transform: none;
	}

	.ec-home-hero__slide[data-pos='0'] .ec-home-hero__visual:hover .ec-home-hero__badge {
		transform: translate(-50%, -50%);
	}
}

/* C-11 review signal: same item rhythm; a warm gold star; the whole item links to the public profile. */
.ec-home-hero__trust-item--rating {
	color: inherit;
	text-decoration: none;
}

.ec-home-hero__trust-item--rating .ec-icon {
	color: #f5c451;
}

.ec-home-hero__trust-item--rating:hover .ec-home-hero__stat,
.ec-home-hero__trust-item--rating:focus-visible .ec-home-hero__stat {
	text-decoration: underline;
	text-underline-offset: 3px;
}


/* Print / reduced-capture: the blurred ambient artwork is decoration only. */
@media print {
	.ec-home-hero__ambient-layer {
		display: none;
	}
}