/* ==========================================================================
   Service — premium art direction
   Homepage + machine-detail are the visual reference.
   ========================================================================== */

.service-page {
	overflow: hidden;
}

.service-page .eyebrow {
	margin-bottom: 18px;
}


/* Hero
   ========================================================================== */

.service-hero {
	position: relative;
	min-height: min(790px, 84vh);
	overflow: hidden;
	background: #1f1f1f;
	color: #fff;
}

.service-hero::after {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(
			90deg,
			rgb(25 25 25 / 98%) 0%,
			rgb(25 25 25 / 91%) 38%,
			rgb(25 25 25 / 54%) 62%,
			rgb(25 25 25 / 16%) 100%
		),
		linear-gradient(180deg, transparent 72%, rgb(0 0 0 / 26%));
	content: "";
}

.service-hero::before {
	position: absolute;
	z-index: 2;
	top: -18%;
	right: 8%;
	width: 130px;
	height: 145%;
	background: rgb(245 166 35 / 7%);
	content: "";
	transform: skewX(-11deg);
	pointer-events: none;
}

.service-hero__media {
	position: absolute;
	inset: 0;
	margin: 0;
}

.service-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 46%;
	transform: scale(1.035);
}

.service-hero__container {
	position: relative;
	z-index: 3;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(270px, 0.38fr);
	align-items: end;
	gap: clamp(52px, 8vw, 120px);
	min-height: min(790px, 84vh);
	padding-top: clamp(104px, 11vw, 154px);
	padding-bottom: clamp(82px, 9vw, 120px);
}

.service-hero__content {
	max-width: 780px;
}

.service-hero h1 {
	max-width: 10.5ch;
	margin: 0;
	color: #fff;
	font-size: clamp(56px, 6.6vw, 96px);
	line-height: 0.92;
	letter-spacing: -0.058em;
}

.service-hero__lead {
	max-width: 660px;
	margin: 28px 0 0;
	color: rgb(255 255 255 / 70%);
	font-size: 18px;
	line-height: 1.72;
}

.service-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 24px;
	margin-top: 36px;
}

.service-link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	font-weight: 800;
	text-decoration: none;
}

.service-link--light {
	color: #fff;
}

.service-link span {
	color: var(--color-orange);
	transition: transform 180ms ease;
}

.service-hero__rail {
	align-self: end;
	margin: 0 0 4px;
	padding: 28px 30px 20px;
	border-top: 3px solid var(--color-orange);
	background: rgb(18 18 18 / 80%);
	box-shadow: 0 25px 60px rgb(0 0 0 / 20%);
	backdrop-filter: blur(8px);
}

.service-hero__rail > p {
	margin: 0 0 18px;
	color: rgb(255 255 255 / 48%);
	font-size: 10px;
	font-weight: 850;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.service-hero__rail ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

.service-hero__rail li {
	display: grid;
	grid-template-columns: 38px 1fr;
	align-items: center;
	min-height: 54px;
	border-top: 1px solid rgb(255 255 255 / 12%);
}

.service-hero__rail span {
	color: var(--color-orange);
	font-size: 10px;
	font-weight: 850;
}

.service-hero__rail strong {
	color: #fff;
	font-size: 14px;
}

@media (hover: hover) and (pointer: fine) {
	.service-link:hover span {
		transform: translateX(4px);
	}
}


/* Journey / first section
   ========================================================================== */

.service-path {
	padding: clamp(96px, 10vw, 154px) 0;
	background: #fff;
}

.service-path__header {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.58fr);
	align-items: end;
	gap: clamp(50px, 9vw, 128px);
	margin-bottom: clamp(42px, 5vw, 66px);
}

.service-path__header h2 {
	max-width: 800px;
	margin: 0;
	font-size: clamp(44px, 5.2vw, 74px);
	line-height: 0.96;
	letter-spacing: -0.055em;
}

.service-path__header > p {
	margin: 0;
	padding-top: 26px;
	border-top: 1px solid var(--color-border-strong);
	color: var(--color-text-muted);
	font-size: 16px;
	line-height: 1.75;
}

.service-path__visual {
	position: relative;
	min-height: 670px;
	overflow: hidden;
	background: #181818;
	box-shadow: var(--shadow-premium);
}

.service-path__visual::after {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgb(0 0 0 / 7%) 25%, rgb(0 0 0 / 18%) 58%, rgb(0 0 0 / 86%) 100%),
		linear-gradient(90deg, rgb(0 0 0 / 28%) 0%, transparent 48%);
	content: "";
	pointer-events: none;
}

.service-path__image {
	position: absolute;
	inset: 0;
	margin: 0;
}

.service-path__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 48%;
	transform: scale(1.025);
}

.service-path__stamp {
	position: absolute;
	z-index: 3;
	top: 36px;
	left: 36px;
	display: grid;
	gap: 2px;
	padding: 16px 18px;
	border-left: 3px solid var(--color-orange);
	background: rgb(25 25 25 / 78%);
	color: #fff;
	backdrop-filter: blur(8px);
}

.service-path__stamp span {
	color: var(--color-orange);
	font-size: 10px;
	font-weight: 850;
	letter-spacing: 0.12em;
}

.service-path__stamp strong {
	font-size: 10px;
	letter-spacing: 0.09em;
}

.service-path__steps {
	position: absolute;
	z-index: 3;
	right: 0;
	bottom: 0;
	left: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	border-top: 1px solid rgb(255 255 255 / 15%);
	background: rgb(20 20 20 / 84%);
	backdrop-filter: blur(9px);
}

.service-path__step {
	position: relative;
	min-height: 214px;
	padding: 27px 28px 30px;
	border-right: 1px solid rgb(255 255 255 / 12%);
	color: #fff;
	transition:
		background-color 220ms ease,
		transform 220ms var(--ease-premium);
}

.service-path__step:last-child {
	border-right: 0;
}

.service-path__step::before {
	position: absolute;
	top: 0;
	left: 28px;
	width: 32px;
	height: 3px;
	background: var(--color-orange);
	content: "";
	transform: scaleX(0.45);
	transform-origin: left;
	transition: transform 220ms ease;
}

.service-path__step > span {
	display: block;
	margin: 6px 0 44px;
	color: var(--color-orange);
	font-size: 10px;
	font-weight: 850;
	letter-spacing: 0.12em;
}

.service-path__step h3 {
	margin: 0 0 11px;
	color: #fff;
	font-size: 22px;
	line-height: 1.08;
}

.service-path__step p {
	margin: 0;
	color: rgb(255 255 255 / 58%);
	font-size: 13px;
	line-height: 1.62;
}

@media (hover: hover) and (pointer: fine) {
	.service-path__step:hover {
		background: rgb(255 255 255 / 5%);
		transform: translateY(-5px);
	}

	.service-path__step:hover::before {
		transform: scaleX(1);
	}
}


/* Implementation / image art direction
   ========================================================================== */

.service-implementation {
	padding: clamp(100px, 11vw, 170px) 0;
	background: #f2f2f1;
}

.service-implementation__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.18fr) minmax(370px, 0.82fr);
	align-items: center;
	gap: 0;
}

.service-implementation__visual {
	position: relative;
	z-index: 1;
	min-height: 720px;
}

.service-implementation__primary {
	position: absolute;
	inset: 0 13% 6% 0;
	margin: 0;
	overflow: hidden;
	background: #ddd;
	box-shadow: 0 30px 70px rgb(0 0 0 / 11%);
}

.service-implementation__primary::after {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 82px;
	height: 4px;
	background: var(--color-orange);
	content: "";
}

.service-implementation__primary img,
.service-implementation__secondary img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.service-implementation__primary img {
	object-position: 57% center;
}

.service-implementation__secondary {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 40%;
	height: 35%;
	margin: 0;
	overflow: hidden;
	border: 9px solid #f2f2f1;
	background: #ddd;
	box-shadow: 0 26px 60px rgb(0 0 0 / 20%);
}

.service-implementation__index {
	position: absolute;
	z-index: 3;
	top: 34px;
	right: 7%;
	display: grid;
	gap: 2px;
	padding: 17px 19px;
	background: var(--color-orange);
	color: #1f1f1f;
}

.service-implementation__index span {
	font-size: 9px;
	font-weight: 850;
}

.service-implementation__index strong {
	font-size: 10px;
	letter-spacing: 0.08em;
}

.service-implementation__panel {
	position: relative;
	z-index: 2;
	margin-left: -62px;
	padding: clamp(40px, 5vw, 66px);
	border-top: 4px solid var(--color-orange);
	background: #fff;
	box-shadow: 0 30px 72px rgb(0 0 0 / 11%);
}

.service-implementation__panel h2 {
	max-width: 640px;
	margin: 0;
	font-size: clamp(42px, 4.8vw, 68px);
	line-height: 0.97;
	letter-spacing: -0.052em;
}

.service-implementation__lead {
	max-width: 590px;
	margin: 25px 0 0;
	color: var(--color-text-muted);
	font-size: 16px;
	line-height: 1.75;
}

.service-implementation__points {
	margin-top: 34px;
	border-top: 1px solid var(--color-border-strong);
}

.service-implementation__points > div {
	display: grid;
	grid-template-columns: 42px 1fr;
	align-items: center;
	min-height: 64px;
	border-bottom: 1px solid var(--color-border-strong);
}

.service-implementation__points span {
	color: var(--color-orange-dark);
	font-size: 9px;
	font-weight: 850;
}

.service-implementation__points strong {
	font-size: 13px;
}


/* Continuity / aftersales
   ========================================================================== */

.service-continuity {
	position: relative;
	padding: clamp(102px, 11vw, 160px) 0;
	overflow: hidden;
	background: #202020;
	color: #fff;
}

.service-continuity::after {
	position: absolute;
	top: -15%;
	right: 7%;
	width: 130px;
	height: 140%;
	background: rgb(245 166 35 / 6%);
	content: "";
	transform: skewX(-11deg);
	pointer-events: none;
}

.service-continuity__header,
.service-continuity__layout {
	position: relative;
	z-index: 2;
}

.service-continuity__header {
	display: grid;
	grid-template-columns: minmax(0, 1.18fr) minmax(280px, 0.58fr);
	align-items: end;
	gap: clamp(50px, 9vw, 128px);
	margin-bottom: clamp(44px, 5vw, 66px);
}

.service-continuity__header h2 {
	max-width: 800px;
	margin: 0;
	color: #fff;
	font-size: clamp(44px, 5.2vw, 74px);
	line-height: 0.96;
	letter-spacing: -0.055em;
}

.service-continuity__header > p {
	margin: 0;
	padding-top: 26px;
	border-top: 1px solid rgb(255 255 255 / 16%);
	color: rgb(255 255 255 / 56%);
	font-size: 15px;
	line-height: 1.72;
}

.service-continuity__layout {
	display: grid;
	grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
	align-items: stretch;
	border-top: 1px solid rgb(255 255 255 / 13%);
	border-left: 1px solid rgb(255 255 255 / 13%);
}

.service-continuity__media {
	position: relative;
	min-height: 620px;
	margin: 0;
	overflow: hidden;
	border-right: 1px solid rgb(255 255 255 / 13%);
	border-bottom: 1px solid rgb(255 255 255 / 13%);
	background: #151515;
}

.service-continuity__media::after {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 48%, rgb(0 0 0 / 72%) 100%);
	content: "";
}

.service-continuity__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.service-continuity__media figcaption {
	position: absolute;
	z-index: 2;
	right: 28px;
	bottom: 28px;
	left: 28px;
	display: grid;
	gap: 4px;
	padding: 18px 20px;
	border-left: 3px solid var(--color-orange);
	background: rgb(20 20 20 / 78%);
	backdrop-filter: blur(7px);
}

.service-continuity__media figcaption span {
	color: var(--color-orange);
	font-size: 9px;
	font-weight: 850;
	letter-spacing: 0.11em;
	text-transform: uppercase;
}

.service-continuity__media figcaption strong {
	color: #fff;
	font-size: 15px;
}

.service-continuity__services {
	display: grid;
	grid-template-rows: repeat(4, 1fr);
}

.service-continuity__services article {
	position: relative;
	display: grid;
	grid-template-columns: 62px 1fr;
	align-items: center;
	gap: 24px;
	min-height: 155px;
	padding: 26px 32px;
	border-right: 1px solid rgb(255 255 255 / 13%);
	border-bottom: 1px solid rgb(255 255 255 / 13%);
	transition:
		background-color 220ms ease,
		padding-left 220ms var(--ease-premium);
}

.service-continuity__services article::before {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 3px;
	background: var(--color-orange);
	content: "";
	transform: scaleY(0);
	transform-origin: center;
	transition: transform 220ms var(--ease-premium);
}

.service-continuity__services article > span {
	color: var(--color-orange);
	font-size: 10px;
	font-weight: 850;
	letter-spacing: 0.12em;
}

.service-continuity__services h3 {
	margin: 0 0 8px;
	color: #fff;
	font-size: 23px;
}

.service-continuity__services p {
	max-width: 520px;
	margin: 0;
	color: rgb(255 255 255 / 55%);
	font-size: 13px;
	line-height: 1.62;
}

@media (hover: hover) and (pointer: fine) {
	.service-continuity__services article:hover {
		padding-left: 38px;
		background: rgb(255 255 255 / 3.5%);
	}

	.service-continuity__services article:hover::before {
		transform: scaleY(1);
	}
}


/* Final conversion block
   ========================================================================== */

.service-advice {
	padding: clamp(96px, 10vw, 150px) 0;
	background: #fff;
}

.service-advice__inner {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.04fr) minmax(360px, 0.76fr);
	align-items: center;
	gap: clamp(60px, 9vw, 130px);
	overflow: hidden;
	padding: clamp(48px, 6vw, 82px);
	border-left: 4px solid var(--color-orange);
	background: #202020;
	box-shadow: 0 30px 70px rgb(0 0 0 / 10%);
	color: #fff;
}

.service-advice__inner::after {
	position: absolute;
	top: -45%;
	right: 10%;
	width: 150px;
	height: 200%;
	background: rgb(245 166 35 / 8%);
	content: "";
	transform: skewX(-11deg);
}

.service-advice__inner > * {
	position: relative;
	z-index: 2;
}

.service-advice__content h2 {
	max-width: 760px;
	margin: 0;
	color: #fff;
	font-size: clamp(42px, 4.8vw, 68px);
	line-height: 0.98;
	letter-spacing: -0.052em;
}

.service-advice__content > p:not(.eyebrow) {
	max-width: 650px;
	margin: 22px 0 0;
	color: rgb(255 255 255 / 62%);
	font-size: 15px;
	line-height: 1.7;
}

.service-advice__action {
	padding-top: 2px;
}

.service-advice__facts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	border-top: 1px solid rgb(255 255 255 / 14%);
	border-left: 1px solid rgb(255 255 255 / 14%);
}

.service-advice__facts span {
	position: relative;
	min-height: 64px;
	padding: 22px 18px;
	border-right: 1px solid rgb(255 255 255 / 14%);
	border-bottom: 1px solid rgb(255 255 255 / 14%);
	color: rgb(255 255 255 / 68%);
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.service-advice__facts span::before {
	position: absolute;
	top: 0;
	left: 18px;
	width: 24px;
	height: 2px;
	background: var(--color-orange);
	content: "";
}

.service-advice__links {
	display: flex;
	align-items: center;
	gap: 24px;
	margin-top: 26px;
}

.service-advice__phone {
	display: grid;
	gap: 3px;
	color: #fff;
	text-decoration: none;
}

.service-advice__phone span {
	color: rgb(255 255 255 / 46%);
	font-size: 9px;
	font-weight: 850;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.service-advice__phone strong {
	font-size: 15px;
}


/* Responsive
   ========================================================================== */

@media (max-width: 68rem) {
	.service-hero__container,
	.service-path__header,
	.service-continuity__header,
	.service-advice__inner {
		grid-template-columns: 1fr;
	}

	.service-hero__rail {
		max-width: 430px;
	}

	.service-path__visual {
		min-height: 760px;
	}

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

	.service-path__step:nth-child(2) {
		border-right: 0;
	}

	.service-path__step:nth-child(-n + 2) {
		border-bottom: 1px solid rgb(255 255 255 / 12%);
	}

	.service-implementation__grid {
		grid-template-columns: 1fr;
		gap: 44px;
	}

	.service-implementation__panel {
		margin-left: 6%;
		margin-top: -84px;
	}

	.service-continuity__layout {
		grid-template-columns: 0.8fr 1.2fr;
	}
}

@media (max-width: 52rem) {
	.service-hero,
	.service-hero__container {
		min-height: 720px;
	}

	.service-hero::after {
		background: linear-gradient(
			180deg,
			rgb(25 25 25 / 34%) 0%,
			rgb(25 25 25 / 88%) 55%,
			rgb(25 25 25 / 98%) 100%
		);
	}

	.service-hero__media img {
		object-position: 62% center;
	}

	.service-hero__container {
		gap: 32px;
		padding-top: 240px;
		padding-bottom: 56px;
	}

	.service-hero h1 {
		font-size: clamp(44px, 13vw, 61px);
	}

	.service-hero__lead {
		font-size: 15px;
	}

	.service-hero__actions {
		align-items: stretch;
		flex-direction: column;
	}

	.service-hero__actions .button {
		width: 100%;
	}

	.service-path,
	.service-implementation,
	.service-continuity,
	.service-advice {
		padding: 68px 0;
	}

	.service-path__header,
	.service-continuity__header {
		gap: 22px;
		margin-bottom: 34px;
	}

	.service-path__header h2,
	.service-implementation__panel h2,
	.service-continuity__header h2,
	.service-advice__content h2 {
		font-size: 36px;
	}

	.service-path__visual {
		min-height: 0;
		overflow: visible;
		background: transparent;
		box-shadow: none;
	}

	.service-path__image {
		position: relative;
		inset: auto;
		aspect-ratio: 4 / 3;
		overflow: hidden;
	}

	.service-path__visual::after {
		display: none;
	}

	.service-path__stamp {
		top: 18px;
		left: 18px;
	}

	.service-path__steps {
		position: relative;
		grid-template-columns: 1fr;
		background: #202020;
	}

	.service-path__step {
		min-height: 0;
		padding: 24px 20px;
		border-right: 0;
		border-bottom: 1px solid rgb(255 255 255 / 12%);
	}

	.service-path__step::before {
		left: 20px;
	}

	.service-path__step > span {
		margin-bottom: 26px;
	}

	.service-implementation__visual {
		min-height: 470px;
	}

	.service-implementation__primary {
		inset: 0 9% 15% 0;
	}

	.service-implementation__secondary {
		width: 50%;
		height: 36%;
		border-width: 6px;
	}

	.service-implementation__index {
		top: 18px;
		right: 0;
	}

	.service-implementation__panel {
		margin: -54px 0 0 7%;
		padding: 30px 22px;
	}

	.service-continuity__layout {
		grid-template-columns: 1fr;
	}

	.service-continuity__media {
		min-height: 420px;
	}

	.service-continuity__services article {
		grid-template-columns: 44px 1fr;
		min-height: 0;
		padding: 24px 20px;
	}

	.service-advice__inner {
		gap: 36px;
		padding: 34px 24px;
	}

	.service-advice__links {
		align-items: stretch;
		flex-direction: column;
	}

	.service-advice__links .button {
		width: 100%;
	}
}

@media (max-width: 32rem) {
	.service-advice__facts {
		grid-template-columns: 1fr;
	}

	.service-implementation__panel {
		margin-left: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.service-hero__media img,
	.service-path__image img,
	.service-implementation__primary img,
	.service-implementation__secondary img,
	.service-continuity__media img {
		transform: none !important;
	}
}


/* V1.3.0 mobile final */
@media (max-width: 52rem) {
    .service-hero__container,
    .service-hero__content,
    .service-hero__rail {
        min-width: 0;
    }

    .service-hero h1 {
        max-width: 100%;
        font-size: clamp(34px, 9.5vw, 44px);
        line-height: 0.98;
        letter-spacing: -0.045em;
        hyphens: auto;
        overflow-wrap: break-word;
    }

    .service-hero__media img {
        object-position: 54% center;
    }

    .service-path__header h2,
    .service-implementation__panel h2,
    .service-continuity__header h2,
    .service-advice__content h2 {
        max-width: 100%;
        font-size: clamp(29px, 8vw, 35px);
        hyphens: auto;
        overflow-wrap: break-word;
    }
}