/*
 * TIS How It Works. Desktop: Figma frame 1672 x 941 on #001426 — headline block beside a 753 x 493 photo,
 * then five 282px step cards with icon rings and arrow buttons.
 */

.tis-steps {
	background: #001426;
	color: #fff;
	overflow: hidden;
}

.tis-steps__curves {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: calc(119 * var(--tis-u));
	overflow: hidden;
	pointer-events: none;
}

.tis-steps__curves .tis-steps__curves-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tis-steps__inner {
	position: relative;
	padding-right: calc(70 * var(--tis-u));
	padding-left: calc(70 * var(--tis-u));
}

/* Photo + fade */
.tis-steps__photo {
	--fl: 46%;
	--fb: 30%;
	position: absolute;
	top: 0;
	right: 0;
	z-index: 0;
	width: calc(800 * var(--tis-u));
	height: calc(440 * var(--tis-u));
	overflow: hidden;
}

.tis-steps__photo .tis-steps__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tis-steps__fade {
	--tis-fade: #001426;
	position: absolute;
	top: calc(155 * var(--tis-u));
	right: calc(665 * var(--tis-u));
	z-index: 1;
	width: calc(202 * var(--tis-u));
	height: calc(375 * var(--tis-u));
	background: linear-gradient(90deg, var(--tis-fade) 0%, transparent 100%);
	pointer-events: none;
}

/* Heading block */
.tis-steps__head {
	position: relative;
	z-index: 2;
	max-width: calc(930 * var(--tis-u));
	min-height: calc(360 * var(--tis-u)); /* keeps the headline block as tall as the car photo beside it */
	padding-left: calc(19 * var(--tis-u));
}

.tis-steps__eyebrow { color: #98bff7; }
.tis-steps__eyebrow .tis-eyebrow__line { width: calc(88 * var(--tis-u)); background: var(--tis-primary); }

.tis-steps__title {
	margin: calc(20.6 * var(--tis-u)) 0 0 calc(-8 * var(--tis-u));
	font-family: var(--tis-font-display);
	font-size: max(32px, calc(82 * var(--tis-u)));
	font-weight: 900;
	line-height: 1.15;
	color: #fff;
}

.tis-steps__text {
	max-width: calc(769 * var(--tis-u));
	margin-top: calc(20.7 * var(--tis-u));
	font-size: max(16px, calc(24 * var(--tis-u)));
	font-weight: 400;
	line-height: 1.48;
	color: #dce3f8;
}

.tis-steps__text p { margin: 0 0 0.5em; }
.tis-steps__text p:last-child { margin-bottom: 0; }

/* Steps */
.tis-steps__grid {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	column-gap: calc(30.5 * var(--tis-u));
	margin: var(--tis-gap) 0 0;
	padding: 0;
	list-style: none;
}

.tis-steps__step { position: relative; padding-top: calc(41 * var(--tis-u)); }

.tis-steps__ring {
	position: absolute;
	top: 0;
	left: 50%;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: calc(112 * var(--tis-u));
	height: calc(112 * var(--tis-u));
	border: 1px solid #123b70;
	border-radius: 50%;
	background: #031f3d;
	transform: translateX(-50%);
}

.tis-steps__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: calc(90 * var(--tis-u));
	height: calc(90 * var(--tis-u));
	border: 1px solid #2775ff;
	border-radius: 50%;
	background: #00152b;
	color: #a9c4ff;
	box-shadow: 0 0 26px rgba(39, 117, 255, 0.28);
}

.tis-steps__icon svg,
.tis-steps__icon i {
	width: max(24px, calc(43 * var(--tis-u)));
	height: max(24px, calc(43 * var(--tis-u)));
	font-size: max(24px, calc(43 * var(--tis-u)));
}

.tis-steps__card {
	min-height: calc(288 * var(--tis-u));
	padding: calc(72 * var(--tis-u)) calc(14 * var(--tis-u)) calc(30 * var(--tis-u)) calc(50 * var(--tis-u));
	border: 1px solid rgba(0, 85, 169, 0.55);
	border-radius: calc(20 * var(--tis-u));
	background: rgba(0, 22, 41, 0.42);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.tis-steps__step.is-visible:hover .tis-steps__card {
	border-color: #1f7be0;
	box-shadow: 0 18px 40px rgba(0, 85, 255, 0.18);
}

.tis-steps__number {
	display: block;
	font-size: max(16px, calc(22 * var(--tis-u)));
	font-weight: 600;
	line-height: 1.4;
	color: #0055ff;
}

.tis-steps__step-title {
	min-height: calc(55 * var(--tis-u));
	margin: calc(7.2 * var(--tis-u)) 0 calc(8 * var(--tis-u));
	font-family: var(--tis-font-body);
	font-size: max(16px, calc(22 * var(--tis-u)));
	font-weight: 600;
	line-height: 1.25;
	color: #fff;
}

.tis-steps__step-text {
	margin: 0;
	font-size: max(14px, calc(19 * var(--tis-u)));
	font-weight: 400;
	line-height: 1.45;
	color: #d1d8eb;
}

.tis-steps__arrow {
	position: absolute;
	top: calc(142 * var(--tis-u));
	right: calc(-42.25 * var(--tis-u)); /* centred in the gap, overlapping each card edge by ~12u like the design */
	z-index: 6;
	display: flex;
	align-items: center;
	justify-content: center;
	width: calc(54 * var(--tis-u));
	height: calc(54 * var(--tis-u));
	border: 1px solid #0055ff;
	border-radius: 50%;
	background: rgba(0, 29, 56, 0.9);
	color: #a9c4ff;
	font-size: max(16px, calc(24 * var(--tis-u)));
}

/* ---------------------------------------------------------------------
 * Tablet
 * ------------------------------------------------------------------ */
@media (max-width: 1024px) {
	.tis-steps__inner { display: flex; flex-direction: column; padding-left: var(--tis-gutter); padding-right: var(--tis-gutter); }
	.tis-steps__head { order: 1; max-width: none; min-height: 0; padding-left: 0; }
	.tis-steps__title { margin: 14px 0 0; font-size: 52px; }
	.tis-steps__text { margin-top: 16px; font-size: 19px; }
	.tis-steps__photo { --fl: 0%; --ft: 32%; --fb: 24%; position: relative; order: 2; width: calc(100% + 2 * var(--tis-gutter)); height: clamp(260px, 52vw, 420px); margin: 36px calc(-1 * var(--tis-gutter)) 0; }
	.tis-steps__fade { display: none; }
	.tis-steps__grid { order: 3; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 64px 20px; margin-top: var(--tis-gap); }
	.tis-steps__step { padding-top: 40px; }
	.tis-steps__ring { width: 92px; height: 92px; }
	.tis-steps__icon { width: 74px; height: 74px; }
	.tis-steps__icon svg,
	.tis-steps__icon i { width: 34px; height: 34px; font-size: 34px; }
	.tis-steps__card { min-height: 0; padding: 62px 18px 26px 26px; border-radius: 18px; }
	.tis-steps__number { font-size: 19px; }
	.tis-steps__step-title { min-height: 0; margin: 6px 0 10px; font-size: 20px; }
	.tis-steps__step-text { font-size: 16px; }
	.tis-steps__arrow { display: none; }
	.tis-steps__curves { height: 90px; }
}

/* ---------------------------------------------------------------------
 * Mobile
 * ------------------------------------------------------------------ */
@media (max-width: 767px) {
	.tis-steps__title { font-size: 34px; }
	.tis-steps__text { font-size: 16px; }
	.tis-steps__photo { height: clamp(210px, 62vw, 320px); }
	.tis-steps__grid { grid-template-columns: 1fr; gap: 58px; margin-top: var(--tis-gap); }
	.tis-steps__card { padding-left: 28px; }
}