/**
 * Homepage hero — Wimira card carousel styles.
 */

@keyframes wimira-show {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes wimira-progress1 {
	from {
		transform: scaleX(0);
	}
	to {
		transform: scaleX(1);
	}
}

.section--head-home {
	position: relative;
	scroll-padding-top: 120px;
	overflow-x: clip;
	margin-top: calc(var(--admin-bar-offset) + var(--admin-bar-gap));
	/* Soft, unhurried accordion expand. */
	--hero-expand-ms: 920ms;
	--hero-expand-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--hero-content-delay: 0.38s;
	--hero-content-ms: 0.55s;
}

@media (max-width: 767px) {
	.section--head-home {
		height: var(--wimira-hero-h);
		min-height: var(--wimira-hero-min);
		max-height: var(--wimira-hero-max);
	}

	.section--head-home .container-n,
	.section__cards-holder,
	.section__cards {
		min-height: var(--wimira-hero-h);
		height: var(--wimira-hero-h);
	}

	.card,
	.card.active,
	.card:not(.active) {
		min-height: var(--wimira-hero-h);
		height: var(--wimira-hero-h);
	}

	.section--head-home .title-h1,
	.section--head-home .card .title-h1,
	.section--head-home h1.title-h1 {
		font-size: 26px !important;
		line-height: 1.25 !important;
		margin-bottom: 10px;
		max-width: none;
	}

	.card__tagline {
		font-size: 15px;
		line-height: 1.25;
		margin-bottom: 10px;
	}

	.card__tagline-line--last {
		margin-top: 4px;
	}

	.section--head-home .description-n {
		font-size: 13px !important;
		line-height: 1.5 !important;
		max-width: none;
	}

	.card__text {
		padding-bottom: 88px;
	}

	.card__logos {
		gap: 12px;
	}

	.card__logo {
		height: 56px;
		max-width: 96px;
	}

	.card__name {
		font-size: 14px;
		margin-left: 8px;
	}
}

@media (min-width: 768px) {
	.section--head-home {
		height: var(--wimira-hero-h);
		min-height: var(--wimira-hero-min);
		max-height: var(--wimira-hero-max);
	}

	.section--head-home .description-n {
		margin-bottom: 8px;
	}
}

.section--head-home .container-n {
	height: 100%;
}

.section__cards-holder {
	height: 100%;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
	position: relative;
}

.section__cards {
	display: flex;
	gap: 8px;
	width: 100%;
	max-width: 100vw;
	overflow: hidden;
	grid-column: 1;
	grid-row: 1;
	opacity: 0;
}

@media (max-width: 767px) {
	.section__cards {
		visibility: hidden;
		contain: layout style;
	}

	.section__cards.is-visible {
		visibility: visible;
		animation: wimira-show 0.6s forwards;
	}

	.section__cards:not(.is-visible) .card {
		transition: none !important;
	}
}

.section__cards.is-visible {
	opacity: 1;
	visibility: visible;
}

@media (min-width: 1280px) {
	.section__cards {
		gap: 10px;
	}
}

.card__label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 16px;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	opacity: 0;
	transition: opacity var(--hero-content-ms) var(--hero-expand-ease) var(--hero-content-delay);
}

.card__label-dot {
	flex: 0 0 8px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--wimira-red);
}

.section--head-home .title-h1 {
	color: #fff;
	margin: 0 0 16px;
	max-width: 528px;
	opacity: 0;
	font-size: 44px !important;
	line-height: 1.15 !important;
	transition: opacity var(--hero-content-ms) var(--hero-expand-ease) var(--hero-content-delay);
}

.card__tagline {
	display: flex;
	flex-direction: column;
	margin: 0 0 16px;
	color: #fff;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.2;
	opacity: 0;
	transition: opacity var(--hero-content-ms) var(--hero-expand-ease) calc(var(--hero-content-delay) + 0.06s);
}

.card__title-accent {
	color: var(--wimira-red);
}

.card__title-color--purple {
	color: #b794f6;
}

.card__title-color--blue {
	color: #4fd1e8;
}

.card__title-color--red {
	color: var(--wimira-red);
}

.card__title-color--orange {
	color: #f5a742;
}

.card__title-color--teal {
	color: #4fd1c5;
}

.card__tagline-line--last {
	color: #e22c28;
	margin-top: 8px;
}

.card:not(.active) .title-h1,
.card:not(.active) .description-n,
.card:not(.active) .card__label,
.card:not(.active) .card__tagline,
.card:not(.active) .card__ctas,
.card:not(.active) .card__capabilities-label,
.card:not(.active) .card__capabilities,
.card:not(.active) .card__agents {
	transition-delay: 0s;
	transition-duration: 0.22s;
}

@media (min-width: 960px) {
	.section--head-home .title-h1 {
		max-width: 624px;
	}

	.section--head-home .description-n {
		margin-bottom: 8px;
	}
}

@media (min-width: 1280px) {
	.section--head-home .title-h1 {
		max-width: 820px;
		margin-bottom: 24px;
	}

	.section--head-home .description-n {
		margin-bottom: 16px;
	}
}

@media (min-width: 1680px) {
	.section--head-home .title-h1 {
		max-width: 920px;
	}
}

@media (min-width: 1920px) {
	.section--head-home .title-h1 {
		max-width: 1060px;
		margin-bottom: 40px;
	}

	.section--head-home .description-n {
		margin-bottom: 24px;
	}
}

@media (min-width: 2560px) {
	.section--head-home .title-h1 {
		max-width: 1366px;
		margin-bottom: 64px;
	}

	.section--head-home .description-n {
		max-width: 676px;
		margin-bottom: 32px;
	}
}

.section--head-home .description-n {
	color: #fff;
	margin-bottom: 16px;
	max-width: 480px;
	opacity: 0;
	font-size: 14px !important;
	line-height: 16px !important;
	transition: opacity var(--hero-content-ms) var(--hero-expand-ease) calc(var(--hero-content-delay) + 0.1s);
}

/* ── Cards ── */
.card {
	position: relative;
	flex: 1 1 100%;
	width: 100%;
	border-radius: 14px;
	color: #fff;
	overflow: hidden;
	cursor: pointer;
	min-height: initial;
	height: auto;
	transform: translateZ(0);
	border: 1px solid transparent;
	transition:
		transform var(--hero-expand-ms) var(--hero-expand-ease),
		flex-grow var(--hero-expand-ms) var(--hero-expand-ease),
		flex-basis var(--hero-expand-ms) var(--hero-expand-ease),
		box-shadow 700ms ease,
		border-color 700ms ease;
}

@media (max-width: 767px) {
	.card {
		min-height: 520px;
		contain: layout paint;
	}

	.card:not(.active) {
		position: absolute;
		inset: 0;
		flex: none;
		width: 100%;
		min-height: 100%;
		opacity: 0;
		pointer-events: none;
		visibility: hidden;
	}

	.card.active {
		position: relative;
		opacity: 1;
		visibility: visible;
	}

	.card__ctas {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
		max-width: 100%;
	}

	.card__ctas .btn-n,
	.card__ctas .link-n,
	.card__ctas .card__btn-link {
		width: 100%;
		justify-content: center;
	}
}

.section__cards {
	position: relative;
}

.section__cards.is-transitioning .card {
	pointer-events: none;
}

@media (min-width: 768px) {
	.card,
	.card:not(.active) {
		position: relative;
		--card-basis: 52px;
		flex-grow: 0;
		flex-shrink: 0;
		flex-basis: var(--card-basis);
		width: var(--card-basis);
		min-width: var(--card-basis);
		max-width: var(--card-basis);
		min-height: 0;
		height: auto;
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		inset: auto;
		cursor: pointer;
		overflow: hidden;
	}

	.card.active {
		flex-grow: 1;
		flex-shrink: 1;
		flex-basis: 0%;
		width: auto;
		max-width: none;
		min-width: 0;
		/* Keep hidden so border-radius clips image/mask (open slide tops). */
		overflow: hidden;
		cursor: default;
	}
}

@media (min-width: 960px) {
	.card:not(.active) {
		--card-basis: 78px;
	}
}

@media (min-width: 1280px) {
	.card:not(.active) {
		--card-basis: 78px;
	}
}

/* Production closed-strip widths at large desktops. */
@media (min-width: 1440px) {
	.card:not(.active) {
		--card-basis: 86px;
	}
}

@media (min-width: 1920px) {
	.card:not(.active) {
		--card-basis: 126px;
	}
}

@media (min-width: 2560px) {
	.card:not(.active) {
		--card-basis: 174px;
	}
}

.card.active .title-h1,
.card.active .description-n,
.card.active .card__label,
.card.active .card__tagline,
.card.active .card__ctas,
.card.active .card__capabilities-label,
.card.active .card__capabilities,
.card.active .card__agents {
	opacity: 1;
}

.card__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: translateZ(0);
	backface-visibility: hidden;
	pointer-events: none;
	-webkit-user-drag: none;
	user-select: none;
}

.card--closed-blue .card__image {
	filter: brightness(0.72) saturate(1.1) hue-rotate(-12deg);
}

.card--closed-blue.active::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image:
		radial-gradient(1.5px 1.5px at 78% 22%, rgba(255, 90, 90, 0.8), transparent),
		radial-gradient(1px 1px at 88% 38%, rgba(255, 90, 90, 0.6), transparent),
		radial-gradient(1.5px 1.5px at 65% 15%, rgba(255, 90, 90, 0.7), transparent),
		radial-gradient(1px 1px at 92% 55%, rgba(255, 90, 90, 0.55), transparent),
		radial-gradient(1.5px 1.5px at 72% 48%, rgba(255, 90, 90, 0.6), transparent);
}

.card__mask {
	position: absolute;
	inset: 0;
	background-color: rgba(0, 0, 0, 0.5);
	transition: background var(--hero-expand-ms) var(--hero-expand-ease);
}

@media (min-width: 768px) {
	.card__mask {
		background-color: transparent;
		background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(30, 29, 40, 0.56) 100%);
		backdrop-filter: blur(20px);
		-webkit-backdrop-filter: blur(20px);
	}

	.card.active .card__mask {
		background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(30, 29, 40, 0.56) 100%);
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}

	.card--closed-purple.active .card__mask {
		background-image:
			linear-gradient(
				90deg,
				rgba(10, 8, 20, 0.78) 0%,
				rgba(10, 8, 20, 0.52) 38%,
				rgba(10, 8, 20, 0.18) 68%,
				transparent 100%
			),
			linear-gradient(to bottom, rgba(10, 8, 20, 0.4) 0%, rgba(10, 8, 20, 0.78) 100%);
	}

	.card--closed-purple .card__image {
		object-position: 78% center;
	}

	.card--closed-orange.active .card__mask {
		background-image: linear-gradient(to bottom, rgba(10, 8, 20, 0.55) 0%, rgba(10, 8, 20, 0.8) 100%);
	}

	.card--closed-teal.active .card__mask {
		background-image: linear-gradient(to bottom, rgba(10, 8, 20, 0.55) 0%, rgba(10, 8, 20, 0.8) 100%);
	}

	.card--closed-steel.active .card__mask {
		background-image: linear-gradient(to bottom, rgba(8, 14, 24, 0.55) 0%, rgba(8, 14, 24, 0.8) 100%);
	}

	.card--closed-rose.active .card__mask {
		background-image: linear-gradient(to bottom, rgba(28, 10, 18, 0.55) 0%, rgba(28, 10, 18, 0.8) 100%);
	}

	.card--closed-blue.active .card__mask {
		background-image: linear-gradient(to bottom, rgba(4, 10, 24, 0.5) 0%, rgba(4, 10, 24, 0.72) 100%);
	}

	/*
	 * AI slide: person + industrial field on the right.
	 * Dual scrim: darken the copy column, keep the subject readable.
	 */
	.card--closed-red.active .card__mask {
		background-image:
			linear-gradient(
				90deg,
				rgba(6, 8, 16, 0.78) 0%,
				rgba(6, 8, 16, 0.55) 34%,
				rgba(6, 8, 16, 0.22) 58%,
				rgba(6, 8, 16, 0.06) 78%,
				transparent 100%
			),
			linear-gradient(
				180deg,
				rgba(6, 8, 16, 0.35) 0%,
				rgba(6, 8, 16, 0.1) 28%,
				rgba(6, 8, 16, 0.18) 55%,
				rgba(6, 8, 16, 0.72) 100%
			);
	}

	.card--closed-red .card__image {
		object-position: 70% center;
	}
}

.card__text {
	position: relative;
	display: flex;
	flex-direction: column;
	height: calc(100% - 60px);
	padding: 0 16px 64px;
	z-index: 1;
}

@media (min-width: 768px) {
	.card__text {
		position: absolute;
		width: 62vw;
		height: 100%;
		padding: 40px 16px 16px;
	}
}

@media (min-width: 960px) {
	.card__text {
		padding-top: 48px;
	}
}

@media (min-width: 1280px) {
	.card__text {
		padding-top: 56px;
		padding-bottom: 24px;
	}
}

@media (min-width: 1440px) {
	.card__text {
		padding-top: 64px;
		padding-bottom: 40px;
	}
}

@media (min-width: 1920px) {
	.card__text {
		padding-top: 80px;
		padding-bottom: 56px;
	}
}

@media (min-width: 2560px) {
	.card__text {
		padding-top: 96px;
		padding-bottom: 80px;
	}
}

.card__block {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	flex: 1;
	min-height: 0;
}

.card__ctas {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	opacity: 0;
	transition: opacity var(--hero-content-ms) var(--hero-expand-ease) calc(var(--hero-content-delay) + 0.14s);
}

.card__watch {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	color: #fff;
	text-decoration: none;
	font-size: 15px;
	font-weight: 600;
}

.card__watch-icon {
	display: flex;
	color: #fff;
	transition: color 0.3s;
}

.card__watch-icon svg {
	display: block;
	width: 32px;
	height: 32px;
}

.card__watch:hover .card__watch-icon,
.card__watch:focus-visible .card__watch-icon {
	color: #e22c28;
}

.card__name {
	font-size: 16px;
	line-height: 1.5;
	margin: 16px 0 20px 16px;
	padding-left: 26px;
	position: relative;
	white-space: nowrap;
	z-index: 1;
}

.card__name-count {
	display: none;
	margin-left: 8px;
	color: rgba(255, 255, 255, 0.55);
	font-size: 13px;
	font-weight: 400;
}

.card.active .card__name-count {
	display: inline;
}

.card__name::after {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 10px;
	height: 10px;
	margin-top: -5px;
	border: 1px solid #fff;
	border-radius: 50%;
}

@media (min-width: 768px) {
	.card__name {
		position: absolute;
		right: 24px;
		top: -4px;
		width: 250px;
		margin: 16px 0 20px;
		padding-left: 0;
		padding-right: 26px;
		font-size: 14px;
		line-height: 1.43;
		text-align: right;
		transform: rotate(-90deg);
		transform-origin: right;
		transition:
			transform var(--hero-expand-ms) var(--hero-expand-ease),
			top var(--hero-expand-ms) var(--hero-expand-ease);
		will-change: transform;
	}

	.card__name::after {
		left: auto;
		right: 0;
	}

	.card:not(.active):hover .card__name,
	.card:not(.active):has(.card__icon:focus-visible) .card__name {
		transform: rotate(-90deg) translateY(-8px);
	}

	.card.active .card__name {
		transform: rotate(0) translateX(8px);
		top: 1px;
		will-change: auto;
	}
}

@media (min-width: 960px) {
	.card__name {
		right: 34px;
		top: -3px;
		font-size: 15px;
		line-height: 24px;
	}

	.card.active .card__name {
		top: 2px;
		transform: rotate(0) translateX(16px);
	}

	.card:not(.active):hover .card__name,
	.card:not(.active):has(.card__icon:focus-visible) .card__name {
		transform: rotate(-90deg) translateY(-12px);
	}

	.card__progress {
		margin-bottom: 19px;
		max-width: 80%;
	}
}

@media (min-width: 1280px) {
	.card__name {
		right: 44px;
		top: 14px;
	}

	.card.active .card__name {
		top: 19px;
	}

	.card:not(.active):hover .card__name,
	.card:not(.active):has(.card__icon:focus-visible) .card__name {
		transform: rotate(-90deg) translateY(-16px);
	}
}

@media (min-width: 1440px) {
	.card__name {
		right: 48px;
	}
}

@media (min-width: 1920px) {
	.card__name {
		right: 68px;
		top: 47px;
		font-size: 16px;
		line-height: 24px;
	}

	.card.active .card__name {
		top: 52px;
		transform: rotate(0) translateX(20px);
	}

	.card:not(.active):hover .card__name,
	.card:not(.active):has(.card__icon:focus-visible) .card__name {
		transform: rotate(-90deg) translateY(-26px);
	}

	.card__logos {
		gap: 70px;
	}
}

@media (min-width: 2560px) {
	.card__name {
		right: 88px;
		top: 61px;
		font-size: 20px;
		line-height: 1.6;
	}

	.card.active .card__name {
		top: 66px;
		transform: rotate(0) translateX(24px);
	}

	.card:not(.active):hover .card__name,
	.card:not(.active):has(.card__icon:focus-visible) .card__name {
		transform: rotate(-90deg) translateY(-36px);
	}

	.card__logos {
		gap: 72px;
	}

	.card__logo {
		height: 100px;
	}
}

.card__info {
	margin-top: auto;
	flex-shrink: 0;
	opacity: 0;
	visibility: hidden;
	transition:
		opacity var(--hero-content-ms) var(--hero-expand-ease) calc(var(--hero-content-delay) + 0.08s),
		visibility 0s linear var(--hero-expand-ms);
}

.card--closed-blue.active .card__info {
	margin-top: 24px;
}

.card--closed-blue.active .card__block {
	flex: 0 1 auto;
}

.card--closed-red.active .card__info,
.card--closed-purple.active .card__info,
.card--closed-orange.active .card__info,
.card--closed-teal.active .card__info,
.card--closed-steel.active .card__info,
.card--closed-rose.active .card__info {
	margin-top: 32px;
}

.card--closed-red.active .card__block,
.card--closed-purple.active .card__block,
.card--closed-orange.active .card__block,
.card--closed-teal.active .card__block,
.card--closed-steel.active .card__block,
.card--closed-rose.active .card__block {
	flex: 0 1 auto;
}

@media (min-width: 768px) {
	.card--closed-red.active .card__text,
	.card--closed-purple.active .card__text,
	.card--closed-orange.active .card__text,
	.card--closed-teal.active .card__text,
	.card--closed-steel.active .card__text,
	.card--closed-rose.active .card__text {
		justify-content: center;
	}
}

.card.active .card__info {
	opacity: 1;
	visibility: visible;
	transition:
		opacity var(--hero-content-ms) var(--hero-expand-ease) calc(var(--hero-content-delay) + 0.08s),
		visibility 0s linear 0s;
}

.card__progress {
	position: relative;
	height: 1px;
	margin-top: 16px;
	margin-bottom: 8px;
	max-width: 420px;
	background: rgba(199, 199, 214, 0.4);
	border-radius: 2px;
	opacity: 0;
	transition: opacity 300ms;
}

@media (min-width: 1280px) {
	.card__progress {
		max-width: 546px;
	}
}

.card.active .card__progress {
	opacity: 1;
}

.card:not(.active) .card__progress {
	transition-delay: 0s;
}

.card__progress-line {
	position: absolute;
	inset: 0;
	width: 100%;
	background: #fff;
	transform: scaleX(0);
	transform-origin: left;
}

.card.active .card__progress-line {
	animation: wimira-progress1 18s linear forwards;
}

.card__subtitle {
	margin-bottom: 12px;
	color: #fff;
}

@media (min-width: 1280px) {
	.card__subtitle {
		margin-bottom: 16px;
	}
}

.card__links {
	display: none;
}

@media (min-width: 960px) {
	.card__links {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 16px 24px;
		max-width: 420px;
	}
}

@media (min-width: 1280px) {
	.card__links {
		max-width: 546px;
	}
}

.card__link {
	color: #fff;
	text-decoration: none;
	transition: color 0.3s;
}

.card__link:hover,
.card__link:focus-visible {
	color: var(--wimira-red-light);
}

.card__logos {
	display: none;
	flex-wrap: wrap;
	align-items: center;
	gap: 24px;
	max-width: 420px;
}

@media (min-width: 960px) {
	.card__logos {
		display: flex;
		gap: 30px;
	}
}

@media (min-width: 1280px) {
	.card__logos {
		max-width: 546px;
	}
}

.card__logo {
	display: block;
	height: 56px;
	width: auto;
	max-width: 120px;
	object-fit: contain;
}

@media (min-width: 1280px) {
	.card__logo {
		height: 80px;
		max-width: 140px;
	}
}

.card__capabilities-label {
	display: none;
	margin-bottom: 12px;
	color: rgba(255, 255, 255, 0.55);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0;
	transition: opacity var(--hero-content-ms) var(--hero-expand-ease) calc(var(--hero-content-delay) + 0.18s);
}

@media (min-width: 960px) {
	.card__capabilities-label {
		display: block;
	}
}

.card__capabilities {
	display: none;
	flex-wrap: wrap;
	gap: 12px;
	max-width: 100%;
	padding-right: 108px;
	box-sizing: border-box;
	opacity: 0;
	transition: opacity var(--hero-content-ms) var(--hero-expand-ease) calc(var(--hero-content-delay) + 0.22s);
}

@media (min-width: 960px) {
	.card__capabilities {
		display: flex;
	}
}

@media (min-width: 1280px) {
	.card__capabilities {
		padding-right: 120px;
	}
}

.card__capability {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 148px;
	padding: 12px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.04);
	color: #fff;
	text-decoration: none;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	transition: border-color 0.3s, background-color 0.3s;
}

.card__capability-label {
	flex: 1 1 auto;
}

.card__capability-arrow {
	flex: 0 0 auto;
	color: rgba(255, 255, 255, 0.4);
}

.card__capability:hover,
.card__capability:focus-visible {
	background: rgba(255, 255, 255, 0.08);
}

.card__capability-icon {
	display: flex;
	flex: 0 0 auto;
}

.card__capability--red .card__capability-icon {
	color: #f36a6a;
}

.card__capability--purple .card__capability-icon {
	color: #b794f6;
}

.card__capability--orange .card__capability-icon {
	color: #f5a742;
}

.card__capability--blue .card__capability-icon {
	color: #6ea8fe;
}

.card__capability-arrow {
	color: rgba(255, 255, 255, 0.4);
	font-size: 13px;
}

.card__agents {
	display: none;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 14px;
	max-width: 100%;
	/* Keep labels clear of absolute prev/next arrows */
	padding-right: 108px;
	box-sizing: border-box;
	opacity: 0;
	transition: opacity var(--hero-content-ms) var(--hero-expand-ease) calc(var(--hero-content-delay) + 0.22s);
}

@media (min-width: 960px) {
	.card__agents {
		display: flex;
	}
}

@media (min-width: 1280px) {
	.card__agents {
		padding-right: 120px;
		gap: 10px 16px;
	}
}

.card__agent {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #fff;
	text-decoration: none;
	max-width: 100%;
}

.card__agent-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	transition: opacity 0.3s;
}

.card__agent:hover .card__agent-icon,
.card__agent:focus-visible .card__agent-icon {
	opacity: 0.75;
}

.card__agent-icon svg {
	display: block;
	width: 22px;
	height: 22px;
}

.card__agent-title {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	white-space: nowrap;
}

@media (max-width: 1439px) {
	.card__agent-title {
		font-size: 13px;
	}
}

.card__agent--red .card__agent-icon {
	color: var(--wimira-red);
}

.card__agent--blue .card__agent-icon {
	color: #4fd1e8;
}

.card__agent--orange .card__agent-icon {
	color: #f5a742;
}

.card__agent--teal .card__agent-icon {
	color: #4fd1c5;
}

.section--head-home .card__btn.btn-n {
	display: none;
	margin-top: 16px;
	font-size: 15px;
	line-height: 24px;
}

.section--head-home .card__btn-link.link-n {
	display: none;
	margin-top: 16px;
}

.section--head-home .card.active .card__btn-link.link-n {
	display: inline-flex;
}

@media (min-width: 1280px) {
	.section--head-home .card.active .card__btn.btn-n {
		display: inline-flex;
	}

	.section--head-home .card.active .card__btn-link.link-n {
		display: none;
	}
}

.card__icon {
	display: none;
	position: absolute;
	bottom: 16px;
	left: 6px;
	z-index: 2;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	transition:
		opacity var(--hero-expand-ms) var(--hero-expand-ease),
		transform var(--hero-expand-ms) var(--hero-expand-ease);
}

@media (min-width: 768px) {
	.card__icon {
		display: block;
	}

	.card:not(.active):hover .card__icon,
	.card:not(.active):has(.card__icon:focus-visible) .card__icon {
		transform: translateX(6px);
	}
}

@media (min-width: 960px) {
	.card__icon {
		left: 14px;
	}
}

@media (min-width: 1280px) {
	.card__icon {
		bottom: 28px;
		left: 24px;
	}
}

@media (min-width: 1440px) {
	.card__icon {
		bottom: 32px;
		left: 28px;
	}
}

.card.active .card__icon {
	visibility: hidden;
	opacity: 0;
}

/* ── Closed-state custom panel (e.g. EduTech card) ── */
.card__closed {
	display: none;
}

@media (min-width: 768px) {
	.card__closed {
		position: absolute;
		inset: 0;
		z-index: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 12px;
		padding: 28px 0 0;
		background-repeat: no-repeat;
		opacity: 0;
		visibility: hidden;
		transition:
			opacity calc(var(--hero-expand-ms) * 0.7) var(--hero-expand-ease),
			visibility 0s linear var(--hero-expand-ms);
	}

	.card--closed-purple .card__closed {
		background-image:
			repeating-linear-gradient(60deg, rgba(196, 181, 253, 0.05) 0, rgba(196, 181, 253, 0.05) 1px, transparent 1px, transparent 26px),
			repeating-linear-gradient(-60deg, rgba(196, 181, 253, 0.05) 0, rgba(196, 181, 253, 0.05) 1px, transparent 1px, transparent 26px),
			radial-gradient(1.5px 1.5px at 22% 78%, rgba(255, 255, 255, 0.9), transparent),
			radial-gradient(1px 1px at 62% 68%, rgba(255, 255, 255, 0.7), transparent),
			radial-gradient(1.5px 1.5px at 78% 88%, rgba(196, 181, 253, 0.85), transparent),
			radial-gradient(1px 1px at 38% 92%, rgba(255, 255, 255, 0.6), transparent),
			radial-gradient(1.5px 1.5px at 30% 58%, rgba(196, 181, 253, 0.7), transparent),
			radial-gradient(1px 1px at 85% 60%, rgba(255, 255, 255, 0.6), transparent),
			radial-gradient(1.5px 1.5px at 55% 82%, rgba(255, 255, 255, 0.8), transparent),
			radial-gradient(circle at 50% 20%, rgba(91, 49, 163, 0.5) 0%, rgba(44, 20, 87, 0.72) 55%, rgba(14, 10, 28, 0.9) 100%),
			url("../images/technology_consulting_slide.webp");
		background-size: cover;
	}

	.card--closed-red .card__closed {
		background-image:
			repeating-linear-gradient(60deg, rgba(120, 220, 235, 0.05) 0, rgba(120, 220, 235, 0.05) 1px, transparent 1px, transparent 26px),
			repeating-linear-gradient(-60deg, rgba(120, 220, 235, 0.05) 0, rgba(120, 220, 235, 0.05) 1px, transparent 1px, transparent 26px),
			radial-gradient(1.5px 1.5px at 20% 72%, rgba(140, 230, 240, 0.9), transparent),
			radial-gradient(1px 1px at 58% 66%, rgba(255, 255, 255, 0.5), transparent),
			radial-gradient(1.5px 1.5px at 75% 85%, rgba(80, 200, 215, 0.85), transparent),
			radial-gradient(1px 1px at 34% 90%, rgba(140, 230, 240, 0.55), transparent),
			radial-gradient(1.5px 1.5px at 28% 55%, rgba(80, 200, 215, 0.7), transparent),
			radial-gradient(1px 1px at 82% 58%, rgba(255, 255, 255, 0.4), transparent),
			radial-gradient(1.5px 1.5px at 50% 80%, rgba(140, 230, 240, 0.75), transparent),
			radial-gradient(1px 1px at 65% 94%, rgba(80, 200, 215, 0.6), transparent),
			radial-gradient(1.5px 1.5px at 42% 68%, rgba(255, 255, 255, 0.4), transparent),
			radial-gradient(circle at 50% 20%, rgba(14, 58, 74, 0.42) 0%, rgba(9, 34, 45, 0.65) 55%, rgba(3, 10, 14, 0.88) 100%),
			url("../images/ai_automation_slide.webp");
		background-size: cover;
	}

	.card--closed-orange .card__closed {
		background-image:
			repeating-linear-gradient(60deg, rgba(255, 200, 120, 0.05) 0, rgba(255, 200, 120, 0.05) 1px, transparent 1px, transparent 26px),
			repeating-linear-gradient(-60deg, rgba(255, 200, 120, 0.05) 0, rgba(255, 200, 120, 0.05) 1px, transparent 1px, transparent 26px),
			radial-gradient(1.5px 1.5px at 22% 74%, rgba(255, 200, 120, 0.9), transparent),
			radial-gradient(1px 1px at 60% 64%, rgba(255, 255, 255, 0.6), transparent),
			radial-gradient(1.5px 1.5px at 76% 86%, rgba(255, 160, 60, 0.9), transparent),
			radial-gradient(1px 1px at 36% 92%, rgba(255, 210, 140, 0.7), transparent),
			radial-gradient(1.5px 1.5px at 30% 56%, rgba(255, 160, 60, 0.8), transparent),
			radial-gradient(1px 1px at 84% 60%, rgba(255, 255, 255, 0.5), transparent),
			radial-gradient(1.5px 1.5px at 52% 82%, rgba(255, 200, 120, 0.85), transparent),
			radial-gradient(1px 1px at 66% 94%, rgba(255, 160, 60, 0.7), transparent),
			radial-gradient(1.5px 1.5px at 40% 68%, rgba(255, 255, 255, 0.5), transparent),
			radial-gradient(circle at 50% 20%, #7a4a12 0%, #3a2308 50%, #120b04 100%);
	}

	.card--closed-teal .card__closed {
		background-image:
			radial-gradient(1.5px 1.5px at 22% 74%, rgba(120, 235, 220, 0.9), transparent),
			radial-gradient(1px 1px at 60% 64%, rgba(255, 255, 255, 0.6), transparent),
			radial-gradient(1.5px 1.5px at 76% 86%, rgba(60, 200, 190, 0.9), transparent),
			radial-gradient(1px 1px at 36% 92%, rgba(140, 230, 220, 0.7), transparent),
			radial-gradient(1.5px 1.5px at 30% 56%, rgba(60, 200, 190, 0.8), transparent),
			radial-gradient(1px 1px at 84% 60%, rgba(255, 255, 255, 0.5), transparent),
			radial-gradient(1.5px 1.5px at 52% 82%, rgba(120, 235, 220, 0.85), transparent),
			radial-gradient(1px 1px at 66% 94%, rgba(60, 200, 190, 0.7), transparent),
			radial-gradient(1.5px 1.5px at 40% 68%, rgba(255, 255, 255, 0.5), transparent),
			radial-gradient(circle at 50% 20%, rgba(15, 74, 74, 0.42) 0%, rgba(10, 38, 38, 0.65) 55%, rgba(5, 18, 18, 0.88) 100%),
			url("../images/hero_slide_healthcare.webp");
		background-size: cover;
	}

	.card--closed-teal .card__closed::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: 18%;
		height: 36px;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='36' viewBox='0 0 140 36'%3E%3Cpolyline points='0,18 34,18 40,4 46,32 52,18 64,18 70,10 76,26 82,18 140,18' fill='none' stroke='%234fd1c5' stroke-width='1.5' stroke-opacity='0.4'/%3E%3C/svg%3E");
		background-repeat: repeat-x;
		background-size: 140px 36px;
	}

	.card--closed-steel .card__closed {
		background-image:
			repeating-linear-gradient(60deg, rgba(148, 180, 210, 0.05) 0, rgba(148, 180, 210, 0.05) 1px, transparent 1px, transparent 26px),
			repeating-linear-gradient(-60deg, rgba(148, 180, 210, 0.05) 0, rgba(148, 180, 210, 0.05) 1px, transparent 1px, transparent 26px),
			radial-gradient(1.5px 1.5px at 22% 74%, rgba(170, 200, 230, 0.9), transparent),
			radial-gradient(1px 1px at 60% 64%, rgba(255, 255, 255, 0.55), transparent),
			radial-gradient(1.5px 1.5px at 76% 86%, rgba(100, 150, 200, 0.85), transparent),
			radial-gradient(1px 1px at 36% 92%, rgba(180, 205, 230, 0.65), transparent),
			radial-gradient(1.5px 1.5px at 30% 56%, rgba(100, 150, 200, 0.75), transparent),
			radial-gradient(1px 1px at 84% 60%, rgba(255, 255, 255, 0.45), transparent),
			radial-gradient(1.5px 1.5px at 52% 82%, rgba(170, 200, 230, 0.8), transparent),
			radial-gradient(circle at 50% 20%, rgba(28, 48, 72, 0.5) 0%, rgba(14, 24, 38, 0.72) 55%, rgba(6, 10, 16, 0.9) 100%),
			url("../images/software_engineering_slide.webp");
		background-size: cover;
	}

	.card--closed-rose .card__closed {
		background-image:
			repeating-linear-gradient(60deg, rgba(240, 160, 196, 0.05) 0, rgba(240, 160, 196, 0.05) 1px, transparent 1px, transparent 26px),
			repeating-linear-gradient(-60deg, rgba(240, 160, 196, 0.05) 0, rgba(240, 160, 196, 0.05) 1px, transparent 1px, transparent 26px),
			radial-gradient(1.5px 1.5px at 22% 74%, rgba(255, 180, 210, 0.9), transparent),
			radial-gradient(1px 1px at 60% 64%, rgba(255, 255, 255, 0.55), transparent),
			radial-gradient(1.5px 1.5px at 76% 86%, rgba(220, 90, 150, 0.85), transparent),
			radial-gradient(1px 1px at 36% 92%, rgba(255, 190, 215, 0.65), transparent),
			radial-gradient(1.5px 1.5px at 30% 56%, rgba(220, 90, 150, 0.75), transparent),
			radial-gradient(1px 1px at 84% 60%, rgba(255, 255, 255, 0.45), transparent),
			radial-gradient(1.5px 1.5px at 52% 82%, rgba(255, 180, 210, 0.8), transparent),
			radial-gradient(circle at 50% 20%, #8a2f5a 0%, #4a1832 50%, #1a0a12 100%),
			url("../images/edutech_slide.webp");
		background-size: cover;
	}

	.card--closed-blue .card__closed {
		background-color: transparent;
		background-image: none;
		isolation: isolate;
	}

	/* Photo behind the closed UI (brightened — Earth night plate is too dark otherwise). */
	.card--closed-blue .card__closed::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 0;
		pointer-events: none;
		background-image: url("../images/hero-network-bg.webp");
		background-size: cover;
		background-position: 62% center;
		filter: brightness(1.6) saturate(1.45) contrast(1.15);
	}

	.card--closed-blue .card__closed::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 0;
		pointer-events: none;
		background-image:
			repeating-linear-gradient(60deg, rgba(140, 190, 255, 0.05) 0, rgba(140, 190, 255, 0.05) 1px, transparent 1px, transparent 26px),
			repeating-linear-gradient(-60deg, rgba(140, 190, 255, 0.05) 0, rgba(140, 190, 255, 0.05) 1px, transparent 1px, transparent 26px),
			radial-gradient(1.5px 1.5px at 22% 74%, rgba(140, 190, 255, 0.9), transparent),
			radial-gradient(1px 1px at 60% 64%, rgba(255, 255, 255, 0.6), transparent),
			radial-gradient(1.5px 1.5px at 76% 86%, rgba(80, 140, 230, 0.9), transparent),
			radial-gradient(1px 1px at 36% 92%, rgba(150, 195, 255, 0.7), transparent),
			radial-gradient(1.5px 1.5px at 30% 56%, rgba(80, 140, 230, 0.8), transparent),
			radial-gradient(1px 1px at 84% 60%, rgba(255, 255, 255, 0.5), transparent),
			radial-gradient(1.5px 1.5px at 52% 82%, rgba(140, 190, 255, 0.85), transparent),
			linear-gradient(180deg, rgba(8, 24, 56, 0.22) 0%, rgba(4, 12, 28, 0.38) 100%);
	}

	.card--closed-blue .card__closed > *:not(.card__closed-title) {
		position: relative;
		z-index: 1;
	}

	.card--closed-blue .card__closed-title {
		z-index: 1;
	}

	.card--has-closed:not(.active) .card__closed {
		opacity: 1;
		visibility: visible;
		transition:
			opacity calc(var(--hero-expand-ms) * 0.65) var(--hero-expand-ease) 0.12s,
			visibility 0s linear 0s;
	}

	.card--has-closed:not(.active) .card__image,
	.card--has-closed:not(.active) .card__mask {
		opacity: 0;
	}

	.card--has-closed:not(.active) .card__name {
		opacity: 0;
		visibility: hidden;
	}
}

.card__closed-icon {
	display: flex;
}

.card--closed-purple .card__closed-icon {
	color: #b794f6;
}

.card--closed-red .card__closed-icon {
	color: #4fd1e8;
}

.card--closed-orange .card__closed-icon {
	color: #f5a742;
}

.card--closed-teal .card__closed-icon {
	color: #4fd1c5;
}

.card--closed-steel .card__closed-icon {
	color: #8eb6e0;
}

.card--closed-rose .card__closed-icon {
	color: #f0a0c4;
}

.card--closed-blue .card__closed-icon {
	color: #6ea8fe;
}

.card__closed-icon svg {
	display: block;
	width: 36px;
	height: 36px;
}

.card__closed-divider {
	width: 2px;
	height: 16px;
}

.card--closed-purple .card__closed-divider {
	background: #b794f6;
}

.card--closed-red .card__closed-divider {
	background: #4fd1e8;
}

.card--closed-orange .card__closed-divider {
	background: #f5a742;
}

.card--closed-teal .card__closed-divider {
	background: #4fd1c5;
}

.card--closed-steel .card__closed-divider {
	background: #8eb6e0;
}

.card--closed-rose .card__closed-divider {
	background: #f0a0c4;
}

.card--closed-blue .card__closed-divider {
	background: #6ea8fe;
}

.card__closed-dot {
	position: absolute;
	top: 62px;
	left: 50%;
	margin-left: -3px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--wimira-red);
}

.card__closed-title {
	display: none;
}

@media (min-width: 768px) {
	.card__closed-title {
		display: block;
		position: absolute;
		right: 24px;
		top: 80px;
		width: 250px;
		padding-right: 26px;
		font-size: 14px;
		font-weight: 500;
		line-height: 1.43;
		text-align: right;
		color: #fff;
		white-space: normal;
		transform: rotate(-90deg);
		transform-origin: right;
	}

	.card__closed-title::after {
		content: "";
		position: absolute;
		right: 0;
		top: 50%;
		width: 10px;
		height: 10px;
		margin-top: -5px;
		border: 1px solid #fff;
		border-radius: 50%;
	}
}

@media (min-width: 960px) {
	.card__closed-title {
		right: 39px;
		top: 84px;
		font-size: 15px;
		line-height: 24px;
	}
}

@media (min-width: 1280px) {
	.card__closed-title {
		right: 39px;
		top: 100px;
	}
}

@media (min-width: 1440px) {
	.card__closed-title {
		right: 43px;
		top: 96px;
	}
}

@media (min-width: 1920px) {
	.card__closed-title {
		right: 63px;
		top: 108px;
		font-size: 16px;
		line-height: 24px;
	}
}

@media (min-width: 2560px) {
	.card__closed-title {
		right: 83px;
		top: 120px;
		font-size: 20px;
		line-height: 1.6;
	}
}

.card--has-closed .card__icon {
	left: 50%;
	margin-left: -20px;
}

.card--has-closed:not(.active) .card__icon {
	z-index: 2;
}

.card--closed-blue:not(.active) .card__icon {
	color: #6ea8fe;
}

.card--closed-red:not(.active) .card__icon {
	color: #4fd1e8;
}

.card--closed-purple:not(.active) .card__icon {
	color: #b794f6;
}

.card--closed-orange:not(.active) .card__icon {
	color: #f5a742;
}

.card--closed-teal:not(.active) .card__icon {
	color: #4fd1c5;
}

.card--closed-steel:not(.active) .card__icon {
	color: #8eb6e0;
}

.card--closed-rose:not(.active) .card__icon {
	color: #f0a0c4;
}

/* ── Active-card emphasis (border only — no shadow) ── */
@media (min-width: 768px) {
	.card.active {
		box-shadow: none;
	}

	.card--closed-blue.active {
		border-color: rgba(110, 168, 254, 0.6);
		box-shadow: none;
	}

	.card--closed-red.active {
		border-color: rgba(79, 209, 232, 0.5);
		box-shadow: none;
	}

	.card--closed-purple.active {
		border-color: rgba(183, 148, 246, 0.6);
		box-shadow: none;
	}

	.card--closed-orange.active {
		border-color: rgba(245, 167, 66, 0.6);
		box-shadow: none;
	}

	.card--closed-teal.active {
		border-color: rgba(79, 209, 197, 0.6);
		box-shadow: none;
	}

	.card--closed-steel.active {
		border-color: rgba(142, 182, 224, 0.6);
		box-shadow: none;
	}

	.card--closed-rose.active {
		border-color: rgba(240, 160, 196, 0.6);
		box-shadow: none;
	}
}

/* ── Closed-card hover: widen peek, tone glow, brighter art ── */
@keyframes wimira-dot-pulse {
	from {
		box-shadow: 0 0 0 0 rgba(226, 44, 40, 0.55);
	}
	to {
		box-shadow: 0 0 0 10px rgba(226, 44, 40, 0);
	}
}

@media (min-width: 768px) {
	.card:not(.active):hover,
	.card:not(.active):has(.card__icon:focus-visible) {
		box-shadow: none;
		border-color: rgba(255, 255, 255, 0.3);
	}

	.card--closed-blue:not(.active):hover,
	.card--closed-blue:not(.active):has(.card__icon:focus-visible) {
		border-color: rgba(110, 168, 254, 0.55);
	}

	.card--closed-red:not(.active):hover,
	.card--closed-red:not(.active):has(.card__icon:focus-visible) {
		border-color: rgba(79, 209, 232, 0.5);
	}

	.card--closed-purple:not(.active):hover,
	.card--closed-purple:not(.active):has(.card__icon:focus-visible) {
		border-color: rgba(183, 148, 246, 0.55);
	}

	.card--closed-orange:not(.active):hover,
	.card--closed-orange:not(.active):has(.card__icon:focus-visible) {
		border-color: rgba(245, 167, 66, 0.55);
	}

	.card--closed-teal:not(.active):hover,
	.card--closed-teal:not(.active):has(.card__icon:focus-visible) {
		border-color: rgba(79, 209, 197, 0.55);
	}

	.card--closed-steel:not(.active):hover,
	.card--closed-steel:not(.active):has(.card__icon:focus-visible) {
		border-color: rgba(142, 182, 224, 0.55);
	}

	.card--closed-rose:not(.active):hover,
	.card--closed-rose:not(.active):has(.card__icon:focus-visible) {
		border-color: rgba(240, 160, 196, 0.55);
	}

	.card__closed {
		transition:
			opacity calc(var(--hero-expand-ms) * 0.7) var(--hero-expand-ease),
			visibility 0s linear var(--hero-expand-ms),
			filter 0.45s ease;
	}

	.card--has-closed:not(.active):hover .card__closed,
	.card--has-closed:not(.active):has(.card__icon:focus-visible) .card__closed {
		filter: brightness(1.16) saturate(1.08);
	}

	.card__image {
		transition: transform 0.7s var(--hero-expand-ease), opacity 0.45s ease;
	}

	.card:not(.active):hover .card__image,
	.card:not(.active):has(.card__icon:focus-visible) .card__image {
		transform: scale(1.06);
	}

	.card__closed-icon {
		transition: transform 0.35s ease, filter 0.35s ease;
	}

	.card--has-closed:not(.active):hover .card__closed-icon,
	.card--has-closed:not(.active):has(.card__icon:focus-visible) .card__closed-icon {
		transform: translateY(-4px) scale(1.08);
	}

	.card--has-closed:not(.active):hover .card__closed-dot,
	.card--has-closed:not(.active):has(.card__icon:focus-visible) .card__closed-dot {
		animation: wimira-dot-pulse 1.1s ease-out infinite;
	}
}

.card__arrows {
	display: none;
}

@media (min-width: 768px) {
	.card__arrows {
		display: flex;
		gap: 16px;
		position: absolute;
		right: 16px;
		bottom: 16px;
		z-index: 2;
		opacity: 0;
		transform: translateX(24px);
		transition:
			opacity var(--hero-content-ms) var(--hero-expand-ease) calc(var(--hero-content-delay) + 0.2s),
			transform var(--hero-content-ms) var(--hero-expand-ease) calc(var(--hero-content-delay) + 0.2s);
		pointer-events: none;
	}

	.card.active .card__arrows {
		opacity: 1;
		transform: translateX(0);
		pointer-events: auto;
	}
}

.card__arrow {
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.card__arrow-circle {
	fill: transparent;
	transition: fill 0.3s;
}

.card__arrow-icon {
	transition: stroke 0.3s;
}

.card__arrow:hover .card__arrow-circle,
.card__arrow:focus-visible .card__arrow-circle {
	fill: #fff;
}

.card__arrow:hover .card__arrow-icon,
.card__arrow:focus-visible .card__arrow-icon {
	stroke: var(--wimira-ink);
}

.card__arrows--mobile {
	display: flex;
	gap: 16px;
	position: absolute;
	right: 16px;
	bottom: 16px;
	z-index: 3;
}

@media (min-width: 768px) {
	.card__arrows--mobile {
		display: none;
	}
}

/* ── CTA floater ── */
.section__cta {
	display: none;
	color: inherit;
	text-decoration: none;
	background-color: #fff;
	border-radius: 16px;
	gap: 16px;
	opacity: 0;
	padding: 10px;
	position: absolute;
	right: 0;
	top: 50%;
	width: 280px;
	transform: translate(-34px, -50%);
	transition: transform 0.3s;
}

@media (min-width: 768px) {
	.section__cta {
		display: flex;
		animation: wimira-show 0.6s 0.1s forwards;
	}
}

@media (min-width: 1440px) {
	.section__cta {
		width: 352px;
	}
}

@media (min-width: 1920px) {
	.section__cta {
		width: 468px;
	}

	.section__cta-video {
		flex-basis: 203px;
	}
}

@media (min-width: 2560px) {
	.section__cta {
		width: 610px;
	}

	.section__cta-video {
		flex-basis: 264px;
	}
}

.section__cta:hover,
.section__cta:focus-visible {
	transform: translate(-34px, calc(-50% - 4px));
}

.section__cta-video {
	max-width: none;
	border-radius: 8px;
	flex: 0 0 152px;
	width: 152px;
	height: auto;
	overflow: hidden;
	object-fit: cover;
}

.section__cta-info {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 10px 10px 10px 0;
}

.section__cta-title {
	color: var(--wimira-ink);
}

.section__cta-url {
	margin-left: -7px;
	margin-right: -7px;
}

/* ── Link pattern (hero only) ── */
.section--head-home .link-n {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	position: relative;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.6;
	text-decoration: none;
	color: var(--wimira-ink);
}

.section--head-home .link-n::before {
	content: "";
	flex: 0 0 10px;
	width: 10px;
	height: 10px;
	background-image: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 9L9 1M9 1H1M9 1V9' stroke='%231E1D28'/%3E%3C/svg%3E");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	transition: transform 0.3s;
}

.section--head-home .link-n--white {
	color: #fff;
}

.section--head-home .link-n--white::before {
	background-image: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 9L9 1M9 1H1M9 1V9' stroke='%23FFFFFF'/%3E%3C/svg%3E");
}

.section--head-home .link-n:hover::before,
.section--head-home .link-n:focus-visible::before {
	transform: translate(3px, -3px);
}

/* ── Hero padding offsets (Wimira pl-mid / pl-big) ── */
.section--head-home .pl-mid {
	padding-left: 16px;
}

.section--head-home .pl-big {
	padding-left: 16px;
}

@media (min-width: 768px) {
	.section--head-home .pl-mid,
	.section--head-home .pl-big {
		padding-left: 40px;
	}
}

@media (min-width: 960px) {
	.section--head-home .pl-mid,
	.section--head-home .pl-big {
		padding-left: 48px;
	}
}

@media (min-width: 1280px) {
	.section--head-home .pl-mid,
	.section--head-home .pl-big {
		padding-left: 56px;
	}
}

@media (min-width: 1440px) {
	.section--head-home .pl-mid,
	.section--head-home .pl-big {
		padding-left: 64px;
	}
}

/* ── Short desktop viewports (e.g. 1280x800 / 13" laptops) ──
   The hero height is viewport-driven (see the height calc up top), so on
   short screens the card gets less room than the design heights assume.
   Tighten the vertical rhythm so the full card content (label, title,
   tagline, description, CTAs, capabilities row) fits without the CTA row
   overflowing into the capabilities below it. Placed after all the
   width-based rules above so these equal-specificity overrides win by
   source order. */
@media (min-width: 768px) and (max-height: 820px) {
	.card__text {
		padding-top: 28px;
		padding-bottom: 20px;
	}

	.section--head-home .title-h1 {
		font-size: 34px !important;
		margin-bottom: 12px;
	}

	.card__tagline {
		font-size: 19px;
		margin-bottom: 12px;
	}

	.card__tagline-line--last {
		margin-top: 4px;
	}

	.card__label {
		margin-bottom: 10px;
	}

	.section--head-home .description-n {
		margin-bottom: 8px;
	}

	.card__progress {
		margin-top: 10px;
		margin-bottom: 6px;
	}

	.card__capabilities-label {
		margin-bottom: 8px;
	}

	.card__capability {
		width: 140px;
		padding: 9px 10px;
		font-size: 12.5px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.card,
	.card__name,
	.card__info,
	.card__progress,
	.card__arrows,
	.card__icon,
	.card__closed,
	.card__closed-icon,
	.card__image,
	.section--head-home .title-h1,
	.section--head-home .description-n {
		transition: none !important;
	}

	.card.active .card__progress-line {
		animation: none;
		transform: scaleX(1);
	}

	.card:not(.active):hover,
	.card:not(.active):has(.card__icon:focus-visible) {
		flex-grow: 0;
	}

	.card:not(.active):hover .card__image,
	.card:not(.active):has(.card__icon:focus-visible) .card__image {
		transform: none;
	}

	.card--has-closed:not(.active):hover .card__closed-dot,
	.card--has-closed:not(.active):has(.card__icon:focus-visible) .card__closed-dot {
		animation: none;
	}
}