/*
 * Service page stylesheet -- every section that only the "service" post
 * type's single page uses (single-service.php / template-parts/services/
 * and template-parts/partners/logo-slider.php): Hero, Why, Offerings,
 * Methodology, Process, Assessment, Risk, Deployment, Value, Trust, CTA and
 * the Partners logo band.
 *
 * Moved out of main.css so these ~2,900 lines no longer load on every page.
 * Sections the Service page shares with other pages (Resources cards, FAQ,
 * Contact form) stay in main.css. Enqueued only on single service pages --
 * see inc/enqueue/styles.php.
 */

/* ==========================================================================
   Service Hero -- two-column layout (content + image with floating stat
   badges) on desktop, stacked on tablet/mobile.
   ========================================================================== */

.service-hero {
	background-color: #f8fafc;
}

.service-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	align-items: center;
	gap: 64px;
	max-width: var(--header-max-width);
	margin-inline: auto;
	padding: 96px var(--header-padding-x);
}

@media (max-width: 1024px) {
	.service-hero__inner {
		grid-template-columns: 1fr;
		padding: 64px var(--header-padding-x-tablet) 48px;
		gap: 48px;
	}
}

@media (max-width: 640px) {
	.service-hero__inner {
		padding: 48px var(--header-padding-x-mobile) 40px;
	}
}

/* Content column. */

.service-hero__eyebrow {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 20px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-eyebrow);
}

.service-hero__eyebrow-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: var(--gradient-btn-end);
	flex-shrink: 0;
}

.service-hero__heading {
	margin: 0 0 24px;
	font-size: 56px;
	font-weight: 800;
	line-height: 66px;
	letter-spacing: -0.01em;
	color: var(--color-heading);
}

@media (max-width: 1024px) {
	.service-hero__heading {
		font-size: 42px;
	}
}

@media (max-width: 640px) {
	.service-hero__heading {
		font-size: 32px;
	}
}

.service-hero__description {
	max-width: 34em;
	margin: 0 0 32px;
	font-size: 18px;
	line-height: 28px;
	color: var(--color-body-text);
}

.service-hero__buttons {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	margin-bottom: 40px;
}

.service-hero__btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 16px 28px;
	border-radius: 999px;
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
	transition: opacity 0.15s ease, border-color 0.15s ease;
}

.service-hero__btn--primary {
	color: #fff;
	border: none;
	background: linear-gradient(103.84deg, #004195 0%, #01aef0 100%);
}

.service-hero__btn--primary:hover,
.service-hero__btn--primary:focus-visible {
	opacity: 0.92;
}

.service-hero__btn--secondary {
	color: var(--color-heading);
	background-color: #fff;
	border: 1px solid var(--color-btn-outline-border);
}

.service-hero__btn--secondary:hover,
.service-hero__btn--secondary:focus-visible {
	border-color: var(--color-navy);
}

.service-hero__btn-icon {
	display: inline-flex;
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}

.service-hero__btn-icon svg {
	width: 100%;
	height: 100%;
}

.service-hero__checklist {
	display: flex;
	flex-wrap: wrap;
	gap: 16px 32px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.service-hero__checklist li {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 15px;
	font-weight: 600;
	color: var(--color-heading);
}

.service-hero__checklist-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	flex-shrink: 0;
	border-radius: 50%;
	color: #fff;
	background-color: var(--gradient-btn-end);
}

.service-hero__checklist-icon svg {
	width: 13px;
	height: 13px;
}

/* Media column. */

.service-hero__media {
	position: relative;
}

.service-hero__image {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 24px;
	object-fit: cover;
	box-shadow: 0 24px 60px rgba(15, 23, 42, 0.16);
}

.service-hero__image--placeholder {
	aspect-ratio: 10 / 9;
	background-color: #e2e8f0;
}

/* Floating stat badges -- position/icon per slot fixed to match the
   reference design; label/value text is the only editorial content. */

.service-hero__badge {
	position: absolute;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 16px;
	background-color: #fff;
	border-radius: 14px;
	box-shadow: 0 12px 28px rgba(15, 23, 42, 0.14);
	white-space: nowrap;
}

@media (max-width: 640px) {
	.service-hero__badge {
		padding: 8px 12px;
		gap: 8px;
		border-radius: 10px;
	}
}

.service-hero__badge-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	flex-shrink: 0;
	border-radius: 50%;
	color: var(--gradient-btn-start);
}

@media (max-width: 640px) {
	.service-hero__badge-icon {
		width: 28px;
		height: 28px;
	}
}

.service-hero__badge-icon svg {
	width: 18px;
	height: 18px;
}

@media (max-width: 640px) {
	.service-hero__badge-icon svg {
		width: 14px;
		height: 14px;
	}
}

.service-hero__badge-icon--light {
	background-color: var(--color-badge-icon-light-bg);
}

.service-hero__badge-icon--dark {
	color: #fff;
	background-color: var(--color-badge-icon-dark-bg);
}

.service-hero__badge-label {
	display: block;
	font-size: 12px;
	color: var(--color-eyebrow);
}

@media (max-width: 640px) {
	.service-hero__badge-label {
		font-size: 10px;
	}
}

.service-hero__badge-value {
	display: block;
	font-size: 14px;
	font-weight: 700;
	color: var(--color-heading);
}

@media (max-width: 640px) {
	.service-hero__badge-value {
		font-size: 12px;
	}
}

/* Slot 1: Migration Progress -- top-left. */
.service-hero__badge--1 {
	top: 6%;
	left: -4%;
}

/* Slot 2: Cloud Ready -- top-right. */
.service-hero__badge--2 {
	top: 4%;
	right: -6%;
}

/* Slot 3: Data Integrity -- bottom-left. */
.service-hero__badge--3 {
	bottom: 18%;
	left: -6%;
}

/* Slot 4: Zero Downtime -- bottom-right. */
.service-hero__badge--4 {
	bottom: 20%;
	right: -8%;
}

/* Slot 5: Real-Time Analytics -- bottom-center. */
.service-hero__badge--5 {
	bottom: -4%;
	left: 50%;
	transform: translateX(-50%);
}

@media (max-width: 1024px) {
	.service-hero__badge--1 {
		left: 2%;
	}

	.service-hero__badge--2 {
		right: 2%;
	}

	.service-hero__badge--3 {
		left: 2%;
	}

	.service-hero__badge--4 {
		right: 2%;
	}
}

@media (max-width: 640px) {
	.service-hero__badge {
		position: static;
		transform: none;
		margin-top: 12px;
	}

	.service-hero__media {
		display: flex;
		flex-direction: column;
		gap: 0;
	}

	.service-hero__badge--5 {
		left: 0;
	}
}

/* ==========================================================================
   Service Why -- centered heading over a responsive grid of 6 icon cards.
   ========================================================================== */

.service-why {
	background-color: #f8fafc;
}

.service-why__inner {
	max-width: var(--header-max-width);
	margin-inline: auto;
	padding: 96px var(--header-padding-x);
	background: #F8FAFC;
}

@media (max-width: 1024px) {
	.service-why__inner {
		padding: 64px var(--header-padding-x-tablet);
	}
}

@media (max-width: 640px) {
	.service-why__inner {
		padding: 48px var(--header-padding-x-mobile);
	}
}

/* Header block. */

.service-why__header {
	max-width: 720px;
	margin: 0 auto 56px;
	text-align: center;
}

@media (max-width: 640px) {
	.service-why__header {
		margin-bottom: 40px;
	}
}

.service-why__eyebrow {
	margin: 0 0 16px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
color: #004195;
}

.service-why__heading {
	margin: 0 0 20px;
	font-size: 44px;
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--color-heading);
}

@media (max-width: 1024px) {
	.service-why__heading {
		font-size: 36px;
	}
}

@media (max-width: 640px) {
	.service-why__heading {
		font-size: 28px;
	}
}

.service-why__subheading {
	margin: 0;
	font-size: 18px;
	line-height: 1.6;
color: #64748B;
}

@media (max-width: 640px) {
	.service-why__subheading {
		font-size: 16px;
	}
}

/* Card grid. */

.service-why__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

@media (max-width: 1024px) {
	.service-why__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 640px) {
	.service-why__grid {
		grid-template-columns: 1fr;
	}
}

.service-why__card {
	display: flex;
	flex-direction: column;
	padding: 32px;
	background-color: #fff;
border: 1px solid #E6ECF5;
	border-radius: 20px;
box-shadow: 0px 2px 20px 0px #0000000A;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.service-why__card:hover,
.service-why__card:focus-within,
.service-offerings__card:hover,
.service-offerings__card:focus-within,
.service-assessment__item:hover,
.service-assessment__item:focus-within,
.service-value__item:hover,
.service-value__item:focus-within {
	transform: translateY(-6px);
	border-color: #004195;
	box-shadow: 0px 16px 40px 0px #0041951F;
}

@media (max-width: 640px) {
	.service-why__card {
		padding: 24px;
	}
}

.service-why__card-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin-bottom: 20px;
	border-radius: 14px;
background: linear-gradient(135deg, rgba(230, 247, 254, 0.5) 0%, #E6F7FE 100%);
color: #004195;
}

.service-why__card-icon svg,
.service-why__card-icon img {
	width: 22px;
	height: 22px;
	object-fit: contain;
}

.service-why__card-title {
	margin: 0 0 10px;
	font-size: 20px;
	font-weight: 700;
	color: var(--color-heading);
}

.service-why__card-description {
	flex-grow: 1;
	margin: 0 0 20px;
	font-size: 16px;
	line-height: 26px;
color: #64748B;
}

.service-why__card-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 700;
color: #004195;
	text-decoration: none;
}

.service-why__card-link-icon {
	display: inline-flex;
	width: 16px;
	height: 16px;
	transition: transform 0.15s ease;
}

.service-why__card-link-icon svg {
	width: 100%;
	height: 100%;
}

.service-why__card-link:hover .service-why__card-link-icon,
.service-why__card-link:focus-visible .service-why__card-link-icon {
	transform: translateX(3px);
}

/* ==========================================================================
   Service Offerings -- "Our Services" section: a centered heading over a
   responsive 3x3 grid of service cards, each with a solid-color icon
   badge. Structurally identical to Service Why above (same grid /
   card / link pattern) but with a filled icon badge and a light blue
   section background, matching the reference design.
   ========================================================================== */

.service-offerings {
	background-color: #EEF6FF;
}

.service-offerings__inner {
	max-width: var(--header-max-width);
	margin-inline: auto;
	padding: 96px var(--header-padding-x);
}

@media (max-width: 1024px) {
	.service-offerings__inner {
		padding: 64px var(--header-padding-x-tablet);
	}
}

@media (max-width: 640px) {
	.service-offerings__inner {
		padding: 48px var(--header-padding-x-mobile);
	}
}

/* Header block. */

.service-offerings__header {
	max-width: 720px;
	margin: 0 auto 56px;
	text-align: center;
}

@media (max-width: 640px) {
	.service-offerings__header {
		margin-bottom: 40px;
	}
}

.service-offerings__eyebrow {
	margin: 0 0 16px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
color: #004195;
}

.service-offerings__heading {
	margin: 0 0 20px;
	font-size: 44px;
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: #0F172A;
}

@media (max-width: 1024px) {
	.service-offerings__heading {
		font-size: 36px;
	}
}

@media (max-width: 640px) {
	.service-offerings__heading {
		font-size: 28px;
	}
}

.service-offerings__subheading {
	margin: 0;
	font-size: 18px;
	line-height: 1.6;
color: #64748B;
}

@media (max-width: 640px) {
	.service-offerings__subheading {
		font-size: 16px;
	}
}

/* Card grid. */

.service-offerings__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	align-items: start;
	gap: 45px;
}

@media (max-width: 1024px) {
	.service-offerings__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 640px) {
	.service-offerings__grid {
		grid-template-columns: 1fr;
	}
}

.service-offerings__card {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 44px 28px 28px;
	background-color: #fff;
	border: 1px solid var(--color-border-light);
	border-radius: 16px;
	box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

@media (max-width: 640px) {
	.service-offerings__card {
		padding: 40px 20px 20px;
	}
}

.service-offerings__card-icon {
	position: absolute;
	top: -20px;
	left: 28px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 45px;
	height: 45px;
	border-radius: 10px;
background: linear-gradient(135deg, #004195 0%, #0077C8 100%);
box-shadow: 0px 6px 20px 0px #0041954D;
color: #fff;
}

@media (max-width: 640px) {
	.service-offerings__card-icon {
		left: 20px;
	}
}

.service-offerings__card-icon svg,
.service-offerings__card-icon img {
	width: 18px;
	height: 18px;
	object-fit: contain;
}

.service-offerings__card-title {
	margin: 0 0 8px;
	font-size: 18px;
	font-weight: 700;
	color: #0B1733;
}

.service-offerings__card-description {
	flex-grow: 1;
	margin: 0 0 16px;
	font-size: 14px;
	line-height: 1.6;
	color:#64748B;
}

.service-offerings__card-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 700;
color: #004195;
	text-decoration: none;
}

.service-offerings__card-link-icon {
	display: inline-flex;
	width: 16px;
	height: 16px;
	transition: transform 0.15s ease;
}

.service-offerings__card-link-icon svg {
	width: 100%;
	height: 100%;
}

.service-offerings__card-link:hover .service-offerings__card-link-icon,
.service-offerings__card-link:focus-visible .service-offerings__card-link-icon {
	transform: translateX(3px);
}

/* ==========================================================================
   Service Methodology -- "Our Methodology" section: a centered heading
   over a feature panel (photo + pitch copy) beside a responsive 2x2 grid
   of migration-approach cards. The blue "active" card look in the
   reference design is a hover/focus-within state only -- cards are
   neutral (white) by default and only switch to the gradient fill while
   hovered or focused, per client direction.
   ========================================================================== */

.service-methodology {
	position: relative;
	overflow: hidden;
	background: #F8FAFC;
}

.service-methodology::before,
.service-methodology::after {
	content: '';
	position: absolute;
	width: 420px;
	height: 420px;
	border-radius: 50%;
	pointer-events: none;
	z-index: 0;
}

.service-methodology::before {
	top: -160px;
	right: -140px;
background: radial-gradient(70.71% 70.71% at 50% 50%, rgba(1, 174, 240, 0.07) 0%, rgba(1, 174, 240, 0) 60%);

}

.service-methodology::after {
	bottom: -160px;
	left: -140px;
background: radial-gradient(70.71% 70.71% at 50% 50%, rgba(1, 174, 240, 0.07) 0%, rgba(1, 174, 240, 0) 60%);

}

.service-methodology__inner {
	position: relative;
	z-index: 1;
	max-width: var(--header-max-width);
	margin-inline: auto;
	padding: 96px var(--header-padding-x);
}

@media (max-width: 1024px) {
	.service-methodology__inner {
		padding: 64px var(--header-padding-x-tablet);
	}
}

@media (max-width: 640px) {
	.service-methodology__inner {
		padding: 48px var(--header-padding-x-mobile);
	}
}

/* Header block. */

.service-methodology__header {
	max-width: 720px;
	margin: 0 auto 56px;
	text-align: center;
}

@media (max-width: 640px) {
	.service-methodology__header {
		margin-bottom: 40px;
	}
}

.service-methodology__eyebrow {
	margin: 0 0 16px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
color: #004195;
}

.service-methodology__heading {
	margin: 0 0 20px;
	font-size: 44px;
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--color-heading);
}

@media (max-width: 1024px) {
	.service-methodology__heading {
		font-size: 36px;
	}
}

@media (max-width: 640px) {
	.service-methodology__heading {
		font-size: 28px;
	}
}

.service-methodology__subheading {
	margin: 0;
	font-size: 18px;
	line-height: 1.6;
color: #64748B;
}

@media (max-width: 640px) {
	.service-methodology__subheading {
		font-size: 16px;
	}
}

/* Content layout -- feature panel + card grid. */

.service-methodology__content {
	display: grid;
	grid-template-columns: minmax(260px, 380px) 1fr;
	align-items: stretch;
	gap: 24px;
}

@media (max-width: 1024px) {
	.service-methodology__content {
		grid-template-columns: 1fr;
	}
}

/* Feature panel. */

.service-methodology__panel {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 420px;
	overflow: hidden;
	border-radius: 20px;
	background: linear-gradient(160deg, #142a52 0%, #0a1730 100%);
}

@media (max-width: 1024px) {
	.service-methodology__panel {
		min-height: 320px;
	}
}

@media (max-width: 640px) {
	.service-methodology__panel {
		min-height: 240px;
	}
}

.service-methodology__panel-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

.service-methodology__panel-scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(180deg, rgba(10, 20, 40, 0) 0%, rgba(6, 20, 45, 0.85) 60%, rgba(4, 14, 35, 0.94) 100%);
}

.service-methodology__panel-content {
	position: relative;
	z-index: 2;
	padding: 32px;
	color: #fff;
}

.service-methodology__panel-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 20px;
	padding: 6px 14px;
border: 1px solid #FFFFFF40;
	border-radius: 999px;
background: #FFFFFF26;
backdrop-filter: blur(3px);
	font-size: 12px;
	font-weight: 700;
}

.service-methodology__panel-badge-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background-color: var(--gradient-btn-end);
}

.service-methodology__panel-heading {
	margin: 0 0 12px;
	font-size: 26px;
	font-weight: 800;
	line-height: 1.25;
}

.service-methodology__panel-description {
	margin: 0 0 24px;
	max-width: 320px;
	font-size: 14px;
	line-height: 1.6;
color: rgba(255, 255, 255, 0.65);
	font-weight: 400;
}

.service-methodology__panel-accent {
	display: block;
	height: 2px;
	width: 100%;
	border-radius: 2px;
background: linear-gradient(90deg, #004195 0%, #01AEF0 50%, rgba(1, 174, 240, 0.2) 100%);
}

/* Card grid. */

.service-methodology__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
}

@media (max-width: 640px) {
	.service-methodology__grid {
		grid-template-columns: 1fr;
	}
}

.service-methodology__card {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 28px;
	background-color: #fff;
	border: 1px solid #E6ECF5;
	border-radius: 24px;
	box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
	transition: background-color 0.2s ease;
}

.service-methodology__card::after {
	content: '';
	position: absolute;
	left: 28px;
	right: 28px;
	bottom: 0;
	height: 2px;
	border-radius: 2px 2px 0 0;
	background:#01AEF0;
	transition: opacity 0.25s ease;
}

.service-methodology__card:hover,
.service-methodology__card:focus-within {
background: linear-gradient(117.5deg, #004195 2.66%, #01AEF0 97.15%);
}

.service-methodology__card:hover::after,
.service-methodology__card:focus-within::after {
	opacity: 0;
}

.service-methodology__card-number {
	position: absolute;
	top: 24px;
	right: 24px;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.02em;
	color:#004195;
	transition: color 0.2s ease;
}

.service-methodology__card:hover .service-methodology__card-number,
.service-methodology__card:focus-within .service-methodology__card-number {
	color: #fff;
}

.service-methodology__card-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 45px;
	height: 45px;
	margin-bottom: 20px;
	border-radius: 10px;
	color: #004195;
background: #F5FBFF;
	transition: color 0.2s ease, background-color 0.2s ease;
	border: 1px solid #E6F7FE
}

.service-methodology__card-icon svg,
.service-methodology__card-icon img {
	width: 18px;
	height: 18px;

	object-fit: contain;
}

.service-methodology__card-icon img {
	filter: brightness(0) saturate(100%) invert(14%) sepia(75%) saturate(3207%) hue-rotate(199deg) brightness(94%) contrast(101%);
}

.service-methodology__card:hover .service-methodology__card-icon,
.service-methodology__card:focus-within .service-methodology__card-icon {
	color: #fff;
	border: 1px solid #FFFFFF33;
background: #FFFFFF26;
}

.service-methodology__card:hover .service-methodology__card-icon img,
.service-methodology__card:focus-within .service-methodology__card-icon img {
	filter: brightness(0) invert(1);
}

.service-methodology__card-title {
	margin: 0 0 8px;
	font-size: 18px;
	font-weight: 700;
	color: var(--color-heading);
	transition: color 0.2s ease;
}

.service-methodology__card:hover .service-methodology__card-title,
.service-methodology__card:focus-within .service-methodology__card-title {
	color: #fff;
}

.service-methodology__card-description {
	flex-grow: 1;
	margin: 0 0 16px;
	font-size: 14px;
	line-height: 1.6;
color: #64748B;
	transition: color 0.2s ease;
}

.service-methodology__card:hover .service-methodology__card-description,
.service-methodology__card:focus-within .service-methodology__card-description {
	color: rgba(255, 255, 255, 0.85);
}

.service-methodology__card-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 700;
color: #004195;
	text-decoration: none;
	transition: color 0.2s ease;
}

.service-methodology__card:hover .service-methodology__card-link,
.service-methodology__card:focus-within .service-methodology__card-link {
	color: #fff;
}

.service-methodology__card-link-icon {
	display: inline-flex;
	width: 16px;
	height: 16px;
	transition: transform 0.15s ease;
}

.service-methodology__card-link-icon svg {
	width: 100%;
	height: 100%;
}

.service-methodology__card-link:hover .service-methodology__card-link-icon,
.service-methodology__card-link:focus-visible .service-methodology__card-link-icon {
	transform: translateX(3px);
}

/* ==========================================================================
   Service Process -- "Our Methodology" section: a centered heading over a
   7-step zigzag timeline (desktop) that collapses to a simple vertical
   stepped list (tablet/mobile), followed by a gradient CTA banner.

   The zigzag alternates each step's icon between a "top" row (text above,
   icon below) and a "bottom" row (icon above, text below) using explicit
   CSS Grid rows -- .service-process__step uses display:contents so its
   text/stub/icon children become direct grid items, each placed via the
   --sapmig-col custom property (set inline per step) and a grid-row that
   differs by variant. This lets row heights auto-size to real content
   (so a longer description doesn't misalign the wave) without needing
   per-step pixel math. A single decorative SVG wave spans the icon rows
   (grid-row 3/5) behind the icons to visually connect them.
   ========================================================================== */

.service-process {
	background-color: #fff;
}

.service-process__inner {
	max-width: var(--header-max-width);
	margin-inline: auto;
	padding: 96px var(--header-padding-x);
}

@media (max-width: 1024px) {
	.service-process__inner {
		padding: 64px var(--header-padding-x-tablet);
	}
}

@media (max-width: 640px) {
	.service-process__inner {
		padding: 48px var(--header-padding-x-mobile);
	}
}

/* Header block. */

.service-process__header {
	max-width: 720px;
	margin: 0 auto 72px;
	text-align: center;
}

@media (max-width: 640px) {
	.service-process__header {
		margin-bottom: 48px;
	}
}

.service-process__eyebrow {
	margin: 0 0 16px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #004195;
}

.service-process__heading {
	margin: 0 0 20px;
	font-size: 44px;
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--color-heading);
}

@media (max-width: 1024px) {
	.service-process__heading {
		font-size: 36px;
	}
}

@media (max-width: 640px) {
	.service-process__heading {
		font-size: 28px;
	}
}

.service-process__subheading {
	margin: 0;
	font-size: 18px;
	line-height: 1.6;
	color: #64748B;
}

@media (max-width: 640px) {
	.service-process__subheading {
		font-size: 16px;
	}
}

/* Zigzag track (desktop). */

.service-process__track {
	position: relative;
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	grid-template-rows: auto 24px auto auto 24px auto;
	column-gap: 8px;
}

.service-process__wave {
	position: absolute;
	grid-column: 1 / -1;
	grid-row: 3 / 5;
	width: 100%;
	height: 100%;
	overflow: visible;
	pointer-events: none;
}

.service-process__step {
	display: contents;
}

.service-process__step-text {
	grid-column: var(--sapmig-col);
	justify-self: center;
	max-width: 200px;
	text-align: center;
}

.service-process__step--top .service-process__step-text {
	grid-row: 1;
	align-self: end;
	margin-bottom: 8px;
}

.service-process__step--bottom .service-process__step-text {
	grid-row: 6;
	align-self: start;
	margin-top: 8px;
}

.service-process__step-stub {
	grid-column: var(--sapmig-col);
	justify-self: center;
	width: 2px;
	height: 100%;
background: linear-gradient(180deg, rgba(0, 65, 149, 0.3) 0%, rgba(1, 174, 240, 0.5) 100%);
}

.service-process__step--top .service-process__step-stub {
	grid-row: 2;
}

.service-process__step--bottom .service-process__step-stub {
	grid-row: 5;
}

.service-process__step-icon {
	position: relative;
	grid-column: var(--sapmig-col);
	justify-self: center;
	align-self: center;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 33554400px;
	background-color: #fff;
border: 1px solid #E6ECF5;
	color: #004195;
box-shadow: 0px 4px 16px 0px #0041951A;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.service-process__step-icon:hover {
	border-color: transparent;
	color: #fff;
	background-color: var(--color-badge-icon-dark-bg);
	box-shadow: 0px 4px 16px 0px #00419540;

box-shadow: 0px 0px 24px 0px #00419559;

}

.service-process__step--top .service-process__step-icon {
	grid-row: 3;
}

.service-process__step--bottom .service-process__step-icon {
	grid-row: 4;
}

.service-process__step-icon svg,
.service-process__step-icon img {
	width: 22px;
	height: 22px;
	object-fit: contain;
}

.service-process__step-icon img {
	filter: brightness(0) saturate(100%) invert(14%) sepia(75%) saturate(3207%) hue-rotate(199deg) brightness(94%) contrast(101%);
}

.service-process__step-icon:hover img {
	filter: brightness(0) invert(1);
}

.service-process__step-title {
	margin: 0 0 6px;
	font-size: 16px;
	font-weight: 700;
	color: #0B1733;
}

.service-process__step-description {
	margin: 0;
	font-size: 13px;
	line-height: 1.6;
	color: #64748B;
}

/* Stepped list fallback (tablet/mobile). */

@media (max-width: 1024px) {
	.service-process__track {
		display: block;
	}

	.service-process__wave {
		display: none;
	}

	.service-process__step {
		display: flex;
		align-items: flex-start;
		gap: 20px;
		position: relative;
		padding-bottom: 32px;
	}

	.service-process__step:last-child {
		padding-bottom: 0;
	}

	.service-process__step:not(:last-child)::after {
		content: '';
		position: absolute;
		left: 27px;
		top: 56px;
		bottom: 0;
		width: 2px;
		background-color: var(--color-border-light);
	}

	.service-process__step-text {
		order: 2;
		max-width: none;
		text-align: left;
		margin: 0;
	}

	.service-process__step-stub {
		display: none;
	}

	.service-process__step-icon {
		order: 1;
		flex-shrink: 0;
	}
}

/* Bottom CTA banner. */

.service-process__banner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin-top: 72px;
	padding: 40px 48px;
	border-radius: 20px;
background: linear-gradient(90.4deg, #004195 0.35%, #01AEF0 93.36%);
}

@media (max-width: 640px) {
	.service-process__banner {
		flex-direction: column;
		align-items: flex-start;
		margin-top: 48px;
		padding: 32px 24px;
	}
}

.service-process__banner-heading {
	margin: 0 0 8px;
	font-size: 22px;
	font-weight: 800;
	color: #fff;
}

.service-process__banner-description {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.65);
}

.service-process__banner-button {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 28px;
	border-radius: 20px;
	background-color: #fff;
	color: #004195;
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}

@media (max-width: 640px) {
	.service-process__banner-button {
		width: 100%;
	}
}

/* ==========================================================================
   Service Assessment -- "Pre-Migration Assessment" section: a centered
   heading over a side photo beside a 2-column checklist of assessment
   items, followed by a gradient "SAP Readiness Check" banner.
   ========================================================================== */

.service-assessment {
	background-color: #f8fafc;
}

.service-assessment__inner {
	max-width: var(--header-max-width);
	margin-inline: auto;
	padding: 96px var(--header-padding-x);
}

@media (max-width: 1024px) {
	.service-assessment__inner {
		padding: 64px var(--header-padding-x-tablet);
	}
}

@media (max-width: 640px) {
	.service-assessment__inner {
		padding: 48px var(--header-padding-x-mobile);
	}
}

/* Header block. */

.service-assessment__header {
	max-width: 720px;
	margin: 0 auto 56px;
	text-align: center;
}

@media (max-width: 640px) {
	.service-assessment__header {
		margin-bottom: 40px;
	}
}

.service-assessment__eyebrow {
	margin: 0 0 16px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color:#004195;
}

.service-assessment__heading {
	margin: 0;
	font-size: 44px;
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color:#0F172A;
}

@media (max-width: 1024px) {
	.service-assessment__heading {
		font-size: 36px;
	}
}

@media (max-width: 640px) {
	.service-assessment__heading {
		font-size: 28px;
	}
}

/* Content layout -- side photo + checklist panel. */

.service-assessment__content {
	display: grid;
	grid-template-columns: minmax(260px, 400px) 1fr;
	align-items: stretch;
	gap: 50px;
}

@media (max-width: 1024px) {
	.service-assessment__content {
		grid-template-columns: 1fr;
	}
}

.service-assessment__media {
	position: relative;
}

.service-assessment__image {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 420px;
	border-radius: 24px;
	object-fit: cover;
}

.service-assessment__image--placeholder {
	background-color: #e2e8f0;
}

@media (max-width: 1024px) {
	.service-assessment__image {
		min-height: 280px;
	}
}

/* Checklist panel. */

.service-assessment__panel {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.service-assessment__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
}

@media (max-width: 640px) {
	.service-assessment__grid {
		grid-template-columns: 1fr;
	}
}

.service-assessment__item {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 20px 24px;
	background-color: #fff;
border: 1px solid #E6ECF5;
	border-radius: 20px;
box-shadow: 0px 1px 6px 0px #0000000A;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}


.service-assessment__item-icon {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 45px;
	height: 45px;
	border-radius: 50px;
	color: var(--gradient-btn-start);
background: linear-gradient(135deg, rgba(230, 247, 254, 0.5) 0%, #E6F7FE 100%);
}

.service-assessment__item-icon svg,
.service-assessment__item-icon img {
	width: 16px;
	height: 16px;
	object-fit: contain;
}

.service-assessment__item-text {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
color: #0F172A;
}

/* Bottom banner. */

.service-assessment__banner {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 28px 32px;
	border-radius: 16px;
background: linear-gradient(90.4deg, #004195 0.35%, #01AEF0 93.36%);
}

@media (max-width: 640px) {
	.service-assessment__banner {
		flex-direction: column;
		align-items: flex-start;
		padding: 24px;
	}
}

.service-assessment__banner-icon {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 16px;
	color: #fff;
	background-color: rgba(255, 255, 255, 0.18);
}

.service-assessment__banner-icon svg,
.service-assessment__banner-icon img {
	width: 20px;
	height: 20px;
	object-fit: contain;
}

.service-assessment__banner-heading {
	margin: 0 0 6px;
	font-size: 18px;
	font-weight: 800;
	color: #fff;
}

.service-assessment__banner-description {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.85);
}

/* ==========================================================================
   Service Risk -- "Risk Management" section: a dark, full-bleed band with
   a centered heading over a 2-column grid of 6 risk cards beside a side
   photo. Unlike the other sections above, this one is dark-themed to
   match the reference design.
   ========================================================================== */

.service-risk {
	background-color: #0F172A;
}

.service-risk__inner {
	max-width: var(--header-max-width);
	margin-inline: auto;
	padding: 96px var(--header-padding-x);
}

@media (max-width: 1024px) {
	.service-risk__inner {
		padding: 64px var(--header-padding-x-tablet);
	}
}

@media (max-width: 640px) {
	.service-risk__inner {
		padding: 48px var(--header-padding-x-mobile);
	}
}

/* Header block. */

.service-risk__header {
	max-width: 720px;
	margin: 0 auto 56px;
	text-align: center;
}

@media (max-width: 640px) {
	.service-risk__header {
		margin-bottom: 40px;
	}
}

.service-risk__eyebrow {
	margin: 0 0 16px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #01AEF0;
}

.service-risk__heading {
	margin: 0 0 20px;
	font-size: 44px;
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: #fff;
}

@media (max-width: 1024px) {
	.service-risk__heading {
		font-size: 36px;
	}
}

@media (max-width: 640px) {
	.service-risk__heading {
		font-size: 28px;
	}
}

.service-risk__subheading {
	margin: 0;
	font-size: 18px;
	line-height: 1.6;
	color: #94A3B899;
}

@media (max-width: 640px) {
	.service-risk__subheading {
		font-size: 16px;
	}
}

/* Content layout -- card grid + side photo. */

.service-risk__content {
	display: grid;
	grid-template-columns: 1fr minmax(280px, 420px);
	align-items: stretch;
	gap: 24px;
}

@media (max-width: 1024px) {
	.service-risk__content {
		grid-template-columns: 1fr;
	}
}

/* Card grid. */

.service-risk__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
}

@media (max-width: 640px) {
	.service-risk__grid {
		grid-template-columns: 1fr;
	}
}

.service-risk__card {
	padding: 28px;
background: #FFFFFF0D;
border: 1px solid #FFFFFF14;
	border-radius: 16px;
	transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.service-risk__card:hover,
.service-risk__card:focus-within,
.service-trust__stat:hover,
.service-trust__stat:focus-within,
.service-trust__card:hover,
.service-trust__card:focus-within {
	transform: translateY(-6px);
	background: #FFFFFF1A;
	border-color: #FFFFFF33;
}

.service-risk__card-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 45px;
	height: 45px;
	margin-bottom: 16px;
	border-radius: 50%;
	color: var(--gradient-btn-end);
background: #01AEF04D;
box-shadow: 0px 0px 20px 0px #0066FF40;

}

.service-risk__card-icon svg,
.service-risk__card-icon img {
	width: 18px;
	height: 18px;
	object-fit: contain;
}

.service-risk__card-title {
	margin: 0 0 8px;
	font-size: 16px;
	font-weight: 700;
	color: #fff;
}

.service-risk__card-description {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	color: #94A3B899;

}

/* Side photo. */

.service-risk__media {
	position: relative;
}

.service-risk__image {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 320px;
	border-radius: 20px;
	object-fit: cover;
}

.service-risk__image--placeholder {
	background-color: rgba(255, 255, 255, 0.06);
}

@media (max-width: 1024px) {
	.service-risk__image {
		min-height: 260px;
	}
}

/* ==========================================================================
   Service Deployment -- "Deployment Models" section: a centered heading
   over a responsive 4-column grid of deployment option cards. Exactly
   one card is normally marked "Featured" via an ACF toggle, giving it a
   permanent highlighted blue-gradient treatment (not a hover state).
   ========================================================================== */

.service-deployment {
	background-color: #f8fafc;
}

.service-deployment__inner {
	max-width: var(--header-max-width);
	margin-inline: auto;
	padding: 96px var(--header-padding-x);
}

@media (max-width: 1024px) {
	.service-deployment__inner {
		padding: 64px var(--header-padding-x-tablet);
	}
}

@media (max-width: 640px) {
	.service-deployment__inner {
		padding: 48px var(--header-padding-x-mobile);
	}
}

/* Header block. */

.service-deployment__header {
	max-width: 720px;
	margin: 0 auto 56px;
	text-align: center;
}

@media (max-width: 640px) {
	.service-deployment__header {
		margin-bottom: 40px;
	}
}

.service-deployment__eyebrow {
	margin: 0 0 16px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #004195;
}

.service-deployment__heading {
	margin: 0 0 20px;
	font-size: 44px;
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: #0F172A;
}

@media (max-width: 1024px) {
	.service-deployment__heading {
		font-size: 36px;
	}
}

@media (max-width: 640px) {
	.service-deployment__heading {
		font-size: 28px;
	}
}

.service-deployment__subheading {
	margin: 0;
	font-size: 18px;
	line-height: 1.6;
	color: #64748B;
}

@media (max-width: 640px) {
	.service-deployment__subheading {
		font-size: 16px;
	}
}

/* Card grid. */

.service-deployment__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}

@media (max-width: 1024px) {
	.service-deployment__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 640px) {
	.service-deployment__grid {
		grid-template-columns: 1fr;
	}
}

.service-deployment__card {
	display: flex;
	flex-direction: column;
	padding: 28px;
	background-color: #fff;
border: 1px solid #E6ECF5;
	border-radius: 16px;
box-shadow: 0px 2px 16px 0px #0000000A;
	transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.service-deployment__card:hover,
.service-deployment__card:focus-within {
	border-color: transparent;
background: linear-gradient(140.09deg, #004195 0%, #01AEF0 100%);
box-shadow: 0px 16px 48px 0px #0066FF40;
}

.service-deployment__card-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 45px;
	height: 45px;
	margin-bottom: 20px;
	border-radius: 10px;
	color: #004195;
background: linear-gradient(135deg, rgba(230, 247, 254, 0.5) 0%, #E6F7FE 100%);
	transition: color 0.2s ease, background-color 0.2s ease;
}

.service-deployment__card:hover .service-deployment__card-icon,
.service-deployment__card:focus-within .service-deployment__card-icon {
	color: #fff;
background: #FFFFFF33;
}

.service-deployment__card-icon svg,
.service-deployment__card-icon img {
	width: 18px;
	height: 18px;
	object-fit: contain;
}

.service-deployment__card-icon img {
	filter: brightness(0) saturate(100%) invert(14%) sepia(75%) saturate(3207%) hue-rotate(199deg) brightness(94%) contrast(101%);
}

.service-deployment__card:hover .service-deployment__card-icon img,
.service-deployment__card:focus-within .service-deployment__card-icon img {
	filter: brightness(0) invert(1);
}

.service-deployment__card-title {
	margin: 0 0 10px;
	font-size: 17px;
	font-weight: 700;
	color: #0F172A;
	transition: color 0.2s ease;
}

.service-deployment__card:hover .service-deployment__card-title,
.service-deployment__card:focus-within .service-deployment__card-title {
	color: #fff;
}

.service-deployment__card-description {
	flex-grow: 1;
	margin: 0 0 20px;
	font-size: 14px;
	line-height: 1.6;
	color: #64748B;
	transition: color 0.2s ease;
}

.service-deployment__card:hover .service-deployment__card-description,
.service-deployment__card:focus-within .service-deployment__card-description {
	color: rgba(255, 255, 255, 0.85);
}

.service-deployment__card-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.service-deployment__card-tag {
	padding: 6px 12px;
	border-radius: 999px;
background: #E6F7FE;
	color: #004196;
	font-size: 12px;
	font-weight: 500;
	transition: color 0.2s ease, background-color 0.2s ease;
}

.service-deployment__card:hover .service-deployment__card-tag,
.service-deployment__card:focus-within .service-deployment__card-tag {
background: #FFFFFF40;
	color: #fff;
}

/* ==========================================================================
   Service Value -- "Business Value" section: a centered heading over a
   side photo beside a 2-column checklist of value items, each with a
   solid-color icon badge (matching the Service Offerings badge style).
   ========================================================================== */

.service-value {
	background-color: #f8fafc;
}

.service-value__inner {
	max-width: var(--header-max-width);
	margin-inline: auto;
	padding: 96px var(--header-padding-x);
}

@media (max-width: 1024px) {
	.service-value__inner {
		padding: 64px var(--header-padding-x-tablet);
	}
}

@media (max-width: 640px) {
	.service-value__inner {
		padding: 48px var(--header-padding-x-mobile);
	}
}

/* Header block. */

.service-value__header {
	max-width: 720px;
	margin: 0 auto 56px;
	text-align: center;
}

@media (max-width: 640px) {
	.service-value__header {
		margin-bottom: 40px;
	}
}

.service-value__eyebrow {
	margin: 0 0 16px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #004195;
;
}

.service-value__heading {
	margin: 0;
	font-size: 44px;
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: #0F172A;
}

@media (max-width: 1024px) {
	.service-value__heading {
		font-size: 36px;
	}
}

@media (max-width: 640px) {
	.service-value__heading {
		font-size: 28px;
	}
}

/* Content layout -- side photo + checklist grid. */

.service-value__content {
	display: grid;
	grid-template-columns: minmax(260px, 400px) 1fr;
	align-items: stretch;
	gap: 50px;
}

@media (max-width: 1024px) {
	.service-value__content {
		grid-template-columns: 1fr;
	}
}

.service-value__media {
	position: relative;
}

.service-value__image {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 420px;
	border-radius: 24px;
	object-fit: cover;
}

.service-value__image--placeholder {
	background-color: #e2e8f0;
}

@media (max-width: 1024px) {
	.service-value__image {
		min-height: 280px;
	}
}

/* Checklist grid. */

.service-value__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
	align-content: start;
}

@media (max-width: 640px) {
	.service-value__grid {
		grid-template-columns: 1fr;
	}
}

.service-value__item {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 20px 24px;
	background-color: #fff;
border: 1px solid #E6ECF5;
	border-radius: 16px;
box-shadow: 0px 1px 8px 0px #0000000A;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}


.service-value__item-icon {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 45px;
	height: 45px;
	border-radius: 50%;
	color: #fff;
background: linear-gradient(135deg, #004195 0%, #01AEF0 100%);
}

.service-value__item-icon svg,
.service-value__item-icon img {
	width: 18px;
	height: 18px;
	object-fit: contain;
}

.service-value__item-text {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--color-heading);
}

/* ==========================================================================
   Service Trust -- "Why Choose Us" section: a dark, full-bleed band with
   a centered heading over a row of 4 animated count-up stats, followed
   by a 2x3 grid of trust/credibility cards. The count-up animation
   itself lives in assets/js/src/stat-counter.js (built to
   stat-counter.min.js); this block just supplies the static layout --
   the numbers render correctly even with JavaScript disabled.
   ========================================================================== */

.service-trust {
	background-color: #0F172A;
}

.service-trust__inner {
	max-width: var(--header-max-width);
	margin-inline: auto;
	padding: 96px var(--header-padding-x);
}

@media (max-width: 1024px) {
	.service-trust__inner {
		padding: 64px var(--header-padding-x-tablet);
	}
}

@media (max-width: 640px) {
	.service-trust__inner {
		padding: 48px var(--header-padding-x-mobile);
	}
}

/* Header block. */

.service-trust__header {
	max-width: 720px;
	margin: 0 auto 56px;
	text-align: center;
}

@media (max-width: 640px) {
	.service-trust__header {
		margin-bottom: 40px;
	}
}

.service-trust__eyebrow {
	margin: 0 0 16px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #01AEF0;
}

.service-trust__heading {
	margin: 0 0 20px;
	font-size: 44px;
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: #fff;
}

@media (max-width: 1024px) {
	.service-trust__heading {
		font-size: 36px;
	}
}

@media (max-width: 640px) {
	.service-trust__heading {
		font-size: 28px;
	}
}

.service-trust__subheading {
	margin: 0;
	font-size: 18px;
	line-height: 1.6;
	color: #FFFFFF99;
}

@media (max-width: 640px) {
	.service-trust__subheading {
		font-size: 16px;
	}
}

/* Stat row. */

.service-trust__stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	margin-bottom: 56px;
}

@media (max-width: 1024px) {
	.service-trust__stats {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 640px) {
	.service-trust__stats {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
		margin-bottom: 40px;
	}
}

.service-trust__stat {
	padding: 32px 20px;
	text-align: center;
background: #FFFFFF0A;
border: 1px solid #FFFFFF14;
border-radius: 16px;
	transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.service-trust__stat-value {
	margin: 0 0 8px;
	font-size: 40px;
	font-weight: 800;
	line-height: 1.1;
	color: #fff;
}

@media (max-width: 640px) {
	.service-trust__stat-value {
		font-size: 32px;
	}
}

.service-trust__stat-label {
	margin: 0;
	font-size: 14px;
	color: #FFFFFF99;
}

/* Card grid. */

.service-trust__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

@media (max-width: 1024px) {
	.service-trust__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 640px) {
	.service-trust__grid {
		grid-template-columns: 1fr;
	}
}

.service-trust__card {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 24px;
background: #FFFFFF0A;
border: 1px solid #FFFFFF14;
border-radius: 16px;
	transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.service-trust__card-icon {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 20px;
	color: var(--gradient-btn-end);
background: #01AEF040;
box-shadow: 0px 0px 20px 0px #0066FF33;
}

.service-trust__card-icon svg,
.service-trust__card-icon img {
	width: 20px;
	height: 20px;
	object-fit: contain;
}

.service-trust__card-title {
	margin: 0 0 6px;
	font-size: 16px;
	font-weight: 700;
	color: #fff;
}

.service-trust__card-description {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	color: #FFFFFF99;

}

/* ==========================================================================
   Service CTA -- closing "SAP Certified Migration Partner" banner: a
   rounded blue-gradient card with a badge/heading/description/buttons on
   the left, beside a stacked list of 4 trust-signal features on the
   right.
   ========================================================================== */

.service-cta {
	background-color: #fff;
}

.service-cta__inner {
	max-width: var(--header-max-width);
	margin-inline: auto;
	padding: 96px var(--header-padding-x);
}

@media (max-width: 1024px) {
	.service-cta__inner {
		padding: 64px var(--header-padding-x-tablet);
	}
}

@media (max-width: 640px) {
	.service-cta__inner {
		padding: 48px var(--header-padding-x-mobile);
	}
}

.service-cta__banner {
	display: grid;
	grid-template-columns: 1fr 360px;
	align-items: center;
	gap: 48px;
	padding: 64px 60px;
	border-radius: 24px;
	background: linear-gradient(104.29deg, #004195 0.01%, #0178c3 62.49%, #01aef0 110.8%);
	overflow: hidden;
}

@media (max-width: 1024px) {
	.service-cta__banner {
		grid-template-columns: 1fr;
		gap: 40px;
		padding: 48px;
	}
}

@media (max-width: 640px) {
	.service-cta__banner {
		padding: 32px 24px;
	}
}

.service-cta__badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 24px;
	padding: 8px 16px;
	border-radius: 999px;
background: #FFFFFF26;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.service-cta__badge-icon {
	display: inline-flex;
	width: 14px;
	height: 14px;
}

.service-cta__badge-icon svg,
.service-cta__badge-icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.service-cta__heading {
	margin: 0 0 20px;
	max-width: 640px;
	font-size: 40px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: #fff;
}

@media (max-width: 640px) {
	.service-cta__heading {
		font-size: 28px;
	}
}

.service-cta__description {
	margin: 0 0 32px;
	max-width: 540px;
	font-size: 17px;
	line-height: 1.6;
	color: #ffffffbf;
	font-weight: 400;
}

@media (max-width: 640px) {
	.service-cta__description {
		font-size: 15px;
	}
}

.service-cta__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.service-cta__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 16px 28px;
	border-radius: 12px;
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}

.service-cta__btn--primary {
	background-color: #fff;
	color: #004195;
}

.service-cta__btn--secondary {
	background: #ffffff26;
	border: 1px solid #ffffff40;
	color: #fff;
}

.service-cta__btn-icon {
	display: inline-flex;
	width: 16px;
	height: 16px;
}

.service-cta__btn-icon svg,
.service-cta__btn-icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.service-cta__features {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.service-cta__feature {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 20px;
	background: #ffffff1a;
	border: 1px solid #ffffff26;
	border-radius: 14px;
}

.service-cta__feature-icon {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	color: #fff;
background: #FFFFFF26;

}

.service-cta__feature-icon svg,
.service-cta__feature-icon img {
	width: 18px;
	height: 18px;
	object-fit: contain;
}

.service-cta__feature-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.service-cta__feature-title {
	font-size: 14px;
	font-weight: 700;
	color: #fff;
}

.service-cta__feature-subtitle {
	font-size: 12px;
color: #FFFFFF99;

}

/* ==========================================================================
   Partners -- "Trusted Technologies & Ecosystem Partners" band: a
   bordered strip with a centered eyebrow label over a continuously
   auto-scrolling logo row.

   The scroll is pure CSS -- see template-parts/partners/logo-slider.php,
   which renders the track twice (the second copy aria-hidden) so the
   @keyframes animation below can loop seamlessly with no JavaScript.
   ========================================================================== */

.partners {
	background-color: #fff;
	border-top: 1px solid var(--color-border-light);
	border-bottom: 1px solid var(--color-border-light);
}

.partners__inner {
	max-width: var(--header-max-width);
	margin-inline: auto;
	padding-top: 44px;
	padding-bottom: 44px;
	padding-left: var(--header-padding-x);
	padding-right: var(--header-padding-x);
	border-top: 1px solid #E6ECF5;
	border-bottom: 1px solid #E6ECF5;
}

@media (max-width: 1024px) {
	.partners__inner {
		padding-top: 36px;
		padding-bottom: 36px;
		padding-left: var(--header-padding-x-tablet);
		padding-right: var(--header-padding-x-tablet);
	}
}

@media (max-width: 640px) {
	.partners__inner {
		padding-top: 28px;
		padding-bottom: 28px;
		padding-left: var(--header-padding-x-mobile);
		padding-right: var(--header-padding-x-mobile);
	}
}

/* Eyebrow -- same type treatment as .service-hero__eyebrow (uppercase,
   letter-spaced, 13px/700), just centered and without the dot marker. */
.partners__eyebrow {
	margin: 0 0 40px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-align: center;
	color: var(--color-eyebrow);
}

@media (max-width: 1024px) {
	.partners__eyebrow {
		margin: 0 0 32px;
	}
}

@media (max-width: 640px) {
	.partners__eyebrow {
		margin: 0 0 24px;
	}
}

.partners__viewport {
	/* The two .partners__track copies must sit side by side on one line --
	   not stack as separate rows -- so the combined pair forms a single
	   strip twice the width of one copy, letting the -50% translateX
	   below scroll exactly to the start of the second copy for a
	   seamless loop. */
	display: flex;
	overflow: hidden;
	mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

.partners__track {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	gap: 64px;
	width: max-content;
	/* Trailing gap so the seamless loop reads as continuous spacing
	   between the end of one copy and the start of the duplicate. */
	padding-right: 64px;
	animation: partners-scroll 28s linear infinite;
}

@media (max-width: 640px) {
	.partners__track {
		gap: 40px;
		padding-right: 40px;
	}
}

.partners__viewport:hover .partners__track,
.partners__viewport:focus-within .partners__track {
	animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
	.partners__track {
		animation: none;
	}
}

@keyframes partners-scroll {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-50%);
	}
}

.partners__item {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
}

.partners__icon {
	display: inline-flex;
	width: 22px;
	height: 22px;
	flex-shrink: 0;
	color: #94A3B8;
}

.partners__icon svg,
.partners__icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.partners__name {
	font-size: 15px;
	font-weight: 600;
	color: #94A3B8;
	white-space: nowrap;
}