/**
 * S/4HANA Cloud Migration Services -- page-scoped stylesheet.
 *
 * Loaded only by page-templates/template-s4hana-cloud-migration-services.php (via a
 * <link> that template prints itself), so nothing here is shared with the
 * home page (assets/css/home.css) or the existing single-service layout.
 *
 * Every rule is namespaced under .page-template-s4hana-cloud-migration or a
 * .s4c-* class. Sections that read as black in the Figma comps are
 * transparent frames -- only .s4c-section--dark is genuinely dark navy.
 *
 * @package sap-migration-theme
 */

/* ==========================================================================
   Tokens + page shell
   ========================================================================== */

.page-template-s4hana-cloud-migration {
	--s4c-navy: #004195;
	--s4c-navy-deep: #0b1733;
	--s4c-cyan: #01aef0;
	--s4c-ink: #0f172a;
	--s4c-body: #475569;
	--s4c-muted: #64748b;
	--s4c-line: #e6ecf5;
	--s4c-tint: #eef6ff;
	--s4c-card-bg: #ffffff;
	--s4c-pad-x: var(--header-padding-x, 80px);
	--s4c-pad-x-tablet: var(--header-padding-x-tablet, 24px);
	--s4c-pad-x-mobile: var(--header-padding-x-mobile, 16px);
	--s4c-max: var(--header-max-width, 1280px);
	--s4c-radius: 20px;

	background-color: #f8fafc;
	font-family: 'Geist', sans-serif;
	color: var(--s4c-body);
	overflow-x: hidden;
}

.page-template-s4hana-cloud-migration section {
	position: relative;
	padding: 96px var(--s4c-pad-x);
}

.page-template-s4hana-cloud-migration section > [class$="__inner"] {
	max-width: var(--s4c-max);
	margin-inline: auto;
}

/* Zero-specificity reset (:where) so per-section margins/paddings below
   are never out-specified by these element selectors. */
.page-template-s4hana-cloud-migration :where(h1, h2, h3, p, ul, ol, li, figure) {
	margin: 0;
	padding: 0;
}

.page-template-s4hana-cloud-migration :where(ul, ol) {
	list-style: none;
}

.page-template-s4hana-cloud-migration :where(img) {
	display: block;
	max-width: 100%;
	height: auto;
}

@media (max-width: 1024px) {
	.page-template-s4hana-cloud-migration section {
		padding: 64px var(--s4c-pad-x-tablet);
	}
}

@media (max-width: 640px) {
	.page-template-s4hana-cloud-migration section {
		padding: 48px var(--s4c-pad-x-mobile);
	}
}

/* ==========================================================================
   Section headers

   Every section's heading + subheading has its own dedicated rules below,
   so any one section can be retuned (size, colour, spacing, alignment)
   without touching the others. They start from the same baseline values.
   ========================================================================== */

/* Shared responsive rule: every section heading (not the hero) drops to
   30px on tablet and mobile alike; the subheading keeps its size. */

/* --- Overview (used only by the Options section on this page): "SAP
   S/4HANA Migration Services for a Confident Transition" --- */
.s4c-overview__header {
	margin-bottom: 100px;
	text-align: center;
}

.s4c-overview__heading {
	font-family: 'Geist', sans-serif;
	font-weight: 700;
	font-size: 48px;
	line-height: 58px;
	letter-spacing: 0;
	color: #0f172a;
}

.s4c-overview__subheading {
	margin-top: 16px;
	font-family: 'Geist', sans-serif;
	font-weight: 400;
	font-size: 18px;
	line-height: 28px;
	letter-spacing: 0;
	color: #64748b;
}

@media (max-width: 1024px) {
	.s4c-overview__header {
		margin-bottom: 72px;
	}

	.s4c-overview__heading {
		font-size: 30px;
		line-height: 1.25;
	}
}

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

/* --- Assessment: "End-to-End SAP S/4HANA Readiness Assessment Services" --- */
.s4c-assessment__header {
	margin-bottom: 60px;
	text-align: center;
}

.s4c-assessment__heading {
	font-family: 'Geist', sans-serif;
	font-weight: 700;
	font-size: 48px;
	line-height: 58px;
	letter-spacing: 0;
	color: #0f172a;
}

.s4c-assessment__subheading {
	margin-top: 16px;
	font-family: 'Geist', sans-serif;
	font-weight: 400;
	font-size: 18px;
	line-height: 28px;
	letter-spacing: 0;
	color: #64748b;
}

@media (max-width: 1024px) {
	.s4c-assessment__header {
		margin-bottom: 44px;
	}

	.s4c-assessment__heading {
		font-size: 30px;
		line-height: 1.25;
	}
}

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

/* --- Approach (dark): "Choose the Right SAP S/4HANA Migration Approach" --- */
.s4c-approach__header {
	margin-bottom: 60px;
	text-align: center;
}

.s4c-approach__heading {
	font-family: 'Geist', sans-serif;
	font-weight: 700;
	font-size: 48px;
	line-height: 58px;
	letter-spacing: 0;
	color: #ffffff;
}

.s4c-approach__subheading {
	margin-top: 16px;
	font-family: 'Geist', sans-serif;
	font-weight: 400;
	font-size: 18px;
	line-height: 28px;
	letter-spacing: 0;
	color: rgba(255, 255, 255, 0.8);
}

@media (max-width: 1024px) {
	.s4c-approach__header {
		margin-bottom: 44px;
	}

	.s4c-approach__heading {
		font-size: 30px;
		line-height: 1.25;
	}
}

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

/* --- Process: "Our Structured S/4HANA Cloud Migration Approach"
       (mirrors the home page's .home-framework header) --- */
.s4c-process__header {
	margin-bottom: 60px;
	text-align: center;
}

.s4c-process__heading {
	font-family: 'Geist', sans-serif;
	font-weight: 700;
	font-size: 48px;
	line-height: 58px;
	letter-spacing: 0;
	color: #0f172a;
}

.s4c-process__subheading {
	margin-top: 16px;
	font-family: 'Geist', sans-serif;
	font-weight: 400;
	font-size: 18px;
	line-height: 28px;
	letter-spacing: 0;
	color: #64748b;
}

@media (max-width: 1024px) {
	.s4c-process__header {
		margin-bottom: 44px;
	}

	.s4c-process__heading {
		font-size: 30px;
		line-height: 1.25;
	}
}

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

/* --- Risk: "Reduce Risk Across Every Stage of Your Migration" --- */
.s4c-risk__header {
	margin-bottom: 60px;
	text-align: center;
}

.s4c-risk__heading {
	font-family: 'Geist', sans-serif;
	font-weight: 700;
	font-size: 48px;
	line-height: 58px;
	letter-spacing: 0;
	color: #0f172a;
}

.s4c-risk__subheading {
	margin-top: 16px;
	font-family: 'Geist', sans-serif;
	font-weight: 400;
	font-size: 18px;
	line-height: 28px;
	letter-spacing: 0;
	color: #64748b;
}

@media (max-width: 1024px) {
	.s4c-risk__header {
		margin-bottom: 44px;
	}

	.s4c-risk__heading {
		font-size: 30px;
		line-height: 1.25;
	}
}

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

/* --- Deployment: "SAP S/4HANA Migration for Cloud and On-Premise Environments" --- */
.s4c-deployment__header {
	margin-bottom: 100px;
	text-align: center;
}

.s4c-deployment__heading {
	font-family: 'Geist', sans-serif;
	font-weight: 700;
	font-size: 48px;
	line-height: 58px;
	letter-spacing: 0;
	color: #0f172a;
}

.s4c-deployment__subheading {
	margin-top: 16px;
	font-family: 'Geist', sans-serif;
	font-weight: 400;
	font-size: 18px;
	line-height: 28px;
	letter-spacing: 0;
	color: #64748b;
}

@media (max-width: 1024px) {
	.s4c-deployment__header {
		margin-bottom: 72px;
	}

	.s4c-deployment__heading {
		font-size: 30px;
		line-height: 1.25;
	}
}

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

/* --- Why choose us (dark): "Why Choose Us as Your SAP S/4HANA Migration Company?" --- */
.s4c-why__header {
	margin-bottom: 60px;
	text-align: center;
}

.s4c-why__heading {
	font-family: 'Geist', sans-serif;
	font-weight: 700;
	font-size: 48px;
	line-height: 58px;
	letter-spacing: 0;
	color: #ffffff;
}

.s4c-why__subheading {
	margin-top: 16px;
	font-family: 'Geist', sans-serif;
	font-weight: 400;
	font-size: 18px;
	line-height: 28px;
	letter-spacing: 0;
	color: rgba(255, 255, 255, 0.8);
}

@media (max-width: 1024px) {
	.s4c-why__header {
		margin-bottom: 44px;
	}

	.s4c-why__heading {
		font-size: 30px;
		line-height: 1.25;
	}
}

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

/* --- FAQ: "Common Questions About SAP S/4HANA Migration"
       (mirrors the home page's .home-faq header) --- */
.s4c-faq__header {
	margin: 0 auto 48px;
	text-align: center;
}

.s4c-faq__heading {
	margin: 0 0 20px;
	font-family: 'Geist', sans-serif;
	font-weight: 700;
	font-size: 48px;
	line-height: 58px;
	letter-spacing: 0;
	color: #0f172a;
}

.s4c-faq__subheading {
	margin: 0;
	font-family: 'Geist', sans-serif;
	font-weight: 400;
	font-size: 18px;
	line-height: 28px;
	letter-spacing: 0;
	color: #64748b;
}

@media (max-width: 1024px) {
	.s4c-faq__heading {
		font-size: 30px;
		line-height: 1.25;
	}
}

@media (max-width: 640px) {
	.s4c-faq__header {
		margin-bottom: 32px;
	}

	.s4c-faq__subheading {
		font-size: 15px;
	}
}

/* Manual <br> only takes effect on desktop (mirrors home.css).
   Class corrected to what WordPress actually renders for this template
   (confirmed directly against the live <body> class): the real file is
   page-templates/template-s4hana-cloud-migration-services.php, which
   body_class() turns into
   "page-template-template-s4hana-cloud-migration-services" -- the old
   selector below didn't match either the real filename OR the usual
   double-"template-" pattern, so manual breaks were silently never
   hidden on tablet/mobile here. */
.page-template-template-s4hana-cloud-migration-services .home-break {
	display: inline;
}

@media (max-width: 1024px) {
	.page-template-template-s4hana-cloud-migration-services .home-break {
		display: none;
	}
}

/* ==========================================================================
   Dark section backgrounds -- one rule per section so each can be
   recoloured independently (kept identical for now).
   ========================================================================== */

.s4c-approach.s4c-section--dark {
	padding-top: 80px;
	padding-bottom: 80px;
	background-color: var(--s4c-navy-deep);
	color: rgba(226, 240, 255, 0.8);
}

/* When an ACF background image is set, the inline style adds the layered
   image; keep it covering and fixed to the section. */
.s4c-approach--has-bg {
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

@media (max-width: 1024px) {
	.s4c-approach.s4c-section--dark {
		padding-top: 64px;
		padding-bottom: 64px;
	}
}

@media (max-width: 640px) {
	.s4c-approach.s4c-section--dark {
		padding-top: 48px;
		padding-bottom: 48px;
	}
}

.s4c-why.s4c-section--dark {
	background-color: var(--s4c-navy-deep);
	color: rgba(226, 240, 255, 0.8);
}

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

.s4c-hero {
	padding-top: 56px;
	padding-bottom: 88px;
	background: #ffffff;
}

.s4c-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 580px) minmax(0, 640px);
	justify-content: space-between;
	gap: 40px;
	align-items: center;
}

.s4c-hero__heading {
	font-weight: 700;
	font-size: 60px;
	line-height: 74px;
	letter-spacing: 0;
	color: #0f172a;
}

.s4c-hero__description {
	margin-top: 20px;
	font-weight: 400;
	font-size: 18px;
	line-height: 28px;
	letter-spacing: 0;
	color: #64748b;
}

.s4c-hero__media {
	display: flex;
	justify-content: flex-end;
	max-width: 640px;
	margin-left: auto;
}

.s4c-hero__image {
	width: auto;
	height: auto;
	max-width: 100%;
}

.s4c-hero__image--placeholder {
	width: 100%;
	aspect-ratio: 640 / 480;
	background: transparent;
	border: 1px dashed var(--s4c-line);
}

@media (max-width: 1180px) {
	.s4c-hero__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
}

@media (max-width: 1024px) {
	.s4c-hero__inner {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.s4c-hero__media {
		max-width: none;
		margin-left: 0;
	}

	/* Hero heading stays 40px on tablet and mobile alike. */
	.s4c-hero__heading {
		font-size: 40px;
		line-height: 1.2;
	}
}

/* ==========================================================================
   Overview -- 2x2 card grid on a light-blue band
   ========================================================================== */

.s4c-overview {
	padding-top: 80px;
	padding-bottom: 80px;
	background: #eef6ff;
}

@media (max-width: 1024px) {
	.s4c-overview {
		padding-top: 64px;
		padding-bottom: 64px;
	}
}

@media (max-width: 640px) {
	.s4c-overview {
		padding-top: 48px;
		padding-bottom: 48px;
	}
}

.s4c-overview__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
}

.s4c-overview__card {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 16px;
	padding: 32px;
	border: 1px solid var(--s4c-line);
	border-radius: 16px;
	background: var(--s4c-card-bg);
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.s4c-overview__card-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: 6px;
	background: #f2f5fa;
	color: var(--s4c-navy);
}

.s4c-overview__card-icon svg { width: 24px; height: 24px; }
.s4c-overview__card-icon img { width: 22px; height: 22px; object-fit: contain; }

.s4c-overview__card-text {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.s4c-overview__card-title {
	font-family: 'Geist', sans-serif;
	font-size: 22px;
	font-weight: 700;
	line-height: 28px;
	letter-spacing: 0;
	color: #0d1b2e;
}

.s4c-overview__card-description {
	font-family: 'Geist', sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 26px;
	letter-spacing: 0;
	color: #6b7a99;
}

.s4c-overview__figure {
	border-radius: 16px;
	overflow: hidden;
	background: #dbe9fb;
	min-height: 240px;
}

.s4c-overview__figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.s4c-overview__figure--dark {
	background: var(--s4c-navy-deep);
}

.s4c-overview__figure--placeholder {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 240px;
	background: linear-gradient(135deg, rgba(1, 174, 240, 0.18), rgba(0, 65, 149, 0.18));
}

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

	.s4c-overview__figure {
		min-height: 200px;
	}

	.s4c-overview__card {
		padding: 24px;
	}

	.s4c-overview__card-title {
		font-size: 20px;
	}
}

/* ==========================================================================
   Assessment -- image + accordion
   ========================================================================== */

.s4c-assessment {
	padding-top: 80px;
	padding-bottom: 80px;
	background: #ffffff;
}

@media (max-width: 1024px) {
	.s4c-assessment {
		padding-top: 64px;
		padding-bottom: 64px;
	}
}

@media (max-width: 640px) {
	.s4c-assessment {
		padding-top: 48px;
		padding-bottom: 48px;
	}
}

.s4c-assessment__content {
	display: grid;
	grid-template-columns: minmax(0, 470px) minmax(0, 1fr);
	gap: 48px;
	align-items: start;
}

.s4c-assessment__media {
	position: sticky;
	top: 100px;
}

.s4c-assessment__image {
	width: 100%;
	border-radius: 16px;
	object-fit: cover;
}

.s4c-assessment__image--placeholder {
	aspect-ratio: 3 / 4;
	background: linear-gradient(135deg, rgba(1, 174, 240, 0.18), rgba(0, 65, 149, 0.18));
}

.s4c-assessment__accordion {
	display: flex;
	flex-direction: column;
}

.s4c-assessment__item {
	border-bottom: 1px solid #c4c4c4;
	background: transparent;
}

.s4c-assessment__item-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 18px 0;
	min-height: 62px;
	box-sizing: border-box;
	font-family: 'Geist', sans-serif;
	font-size: 22px;
	font-weight: 700;
	line-height: 28px;
	letter-spacing: 0;
	color: #0f172a;
	cursor: pointer;
	list-style: none;
}

.s4c-assessment__item-title::-webkit-details-marker {
	display: none;
}

.s4c-assessment__item-toggle {
	position: relative;
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
}

.s4c-assessment__item-toggle::before {
	content: "";
	width: 9px;
	height: 9px;
	margin-top: -3px;
	border-right: 2px solid #0f172a;
	border-bottom: 2px solid #0f172a;
	transform: rotate(45deg);
	transition: transform 0.2s ease, margin 0.2s ease;
}

.s4c-assessment__item[open] .s4c-assessment__item-toggle::before {
	margin-top: 3px;
	transform: rotate(-135deg);
}

.s4c-assessment__item-body {
	padding: 0 0 24px;
}

.s4c-assessment__item-body p {
	font-family: 'Geist', sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 26px;
	letter-spacing: 0;
	color: #64748b;
}

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

	.s4c-assessment__media {
		position: static;
	}

	.s4c-assessment__image--placeholder {
		aspect-ratio: 16 / 9;
	}
}

@media (max-width: 640px) {
	.s4c-assessment__item-title {
		font-size: 18px;
		line-height: 26px;
	}
}

/* ==========================================================================
   Approach -- dark, 2x2 + image
   ========================================================================== */

.s4c-approach__content {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 468px);
	gap: 48px;
	align-items: center;
}

.s4c-approach__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0;
}

.s4c-approach__card {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 16px;
	padding: 28px;
	background: transparent;
}

/* Thin divider grid between the four cards (no per-card boxes). */
.s4c-approach__card:nth-child(odd) {
	border-right: 1px solid rgba(255, 255, 255, 0.12);
}

.s4c-approach__card:nth-child(1),
.s4c-approach__card:nth-child(2) {
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.s4c-approach__card:first-child { padding-top: 0; }
.s4c-approach__card:nth-child(2) { padding-top: 0; }
.s4c-approach__card:nth-child(odd) { padding-left: 0; }
.s4c-approach__card:nth-child(even) { padding-right: 0; }

.s4c-approach__card-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: 6px;
	background: rgba(1, 174, 240, 0.1);
	color: var(--s4c-cyan);
}

.s4c-approach__card-icon svg { width: 22px; height: 22px; }
.s4c-approach__card-icon img { width: 22px; height: 22px; object-fit: contain; }

.s4c-approach__card-text {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.s4c-approach__card-title {
	font-family: 'Geist', sans-serif;
	font-size: 22px;
	font-weight: 700;
	line-height: 28px;
	letter-spacing: 0;
	color: #ffffff;
}

.s4c-approach__card-description {
	font-family: 'Geist', sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 26px;
	letter-spacing: 0;
	color: rgba(255, 255, 255, 0.8);
}

.s4c-approach__media {
	border-radius: 16px;
	overflow: hidden;
}

.s4c-approach__image {
	width: 100%;
	object-fit: cover;
}

.s4c-approach__image--placeholder {
	aspect-ratio: 4 / 3;
	background: linear-gradient(135deg, rgba(1, 174, 240, 0.28), rgba(0, 65, 149, 0.32));
}

@media (max-width: 1024px) {
	.s4c-approach__content {
		grid-template-columns: 1fr;
		gap: 32px;
	}
}

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

	.s4c-approach__card,
	.s4c-approach__card:nth-child(odd),
	.s4c-approach__card:nth-child(even) {
		padding: 24px 0;
		border-right: 0;
		border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	}

	.s4c-approach__card:last-child {
		border-bottom: 0;
		padding-bottom: 0;
	}

	.s4c-approach__card:first-child {
		padding-top: 0;
	}
}

/* ==========================================================================
   Process -- circular stage diagram

   Deliberately identical to the home page's .home-framework circle
   (assets/css/home.css) so this section reads as the same component.
   ========================================================================== */

.s4c-process {
	background-color: #f8fafc;
}

.s4c-process__circle {
	position: relative;
	width: min(600px, 100%);
	aspect-ratio: 1 / 1;
	/* Extra top/bottom room for the stage title + description blocks that
	   sit outside the ring above the top node and below the two lower
	   nodes. */
	margin: 180px auto 190px;
}

.s4c-process__ring {
	position: absolute;
	inset: 60px;
	border-radius: 50%;
	border: 2px solid rgba(1, 174, 240, 0.25);
	background: radial-gradient(circle at 50% 50%, rgba(1, 174, 240, 0.08) 0%, rgba(0, 65, 149, 0.02) 55%, rgba(0, 65, 149, 0) 100%);
}

.s4c-process__nodes {
	position: absolute;
	inset: 60px;
}

.s4c-process__center {
	position: absolute;
	top: 50%;
	left: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 180px;
	height: 148px;
	padding: 12px;
	text-align: center;
	transform: translate(-50%, -50%);
}

.s4c-process__center span {
	font-family: 'Geist', sans-serif;
	font-weight: 700;
	font-size: 22px;
	line-height: 28px;
	letter-spacing: 0;
	color: #0f172a;
}

.s4c-process__node {
	position: absolute;
	top: var(--sapmig-y);
	left: var(--sapmig-x);
	width: 0;
	height: 0;
}

.s4c-process__node-icon {
	position: absolute;
	top: 0;
	left: 0;
	transform: translate(-50%, -50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	flex-shrink: 0;
	border-radius: 50%;
	border: 1px solid rgba(0, 65, 149, 0.1);
	color: #004195;
	background-color: #fff;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03), 0 4px 24px rgba(0, 65, 149, 0.09);
	transition: background 0.2s ease, color 0.2s ease;
}

.s4c-process__node-icon:hover {
	color: #fff;
	background: linear-gradient(145deg, #004195 0%, #01aef0 100%);
}

.s4c-process__node-icon svg,
.s4c-process__node-icon img {
	width: 28px;
	height: 28px;
	object-fit: contain;
}

.s4c-process__node-text {
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
	width: 240px;
}

.s4c-process__node--top .s4c-process__node-text,
.s4c-process__node--bottom .s4c-process__node-text {
	text-align: center;
	transform: translate(-50%, 0);
}

.s4c-process__node--top .s4c-process__node-text {
	transform: translate(-50%, calc(-100% - 56px));
}

.s4c-process__node--bottom .s4c-process__node-text {
	transform: translate(-50%, 56px);
}

.s4c-process__node--left .s4c-process__node-text {
	text-align: right;
	transform: translate(calc(-100% - 56px), -50%);
}

.s4c-process__node--right .s4c-process__node-text {
	text-align: left;
	transform: translate(56px, -50%);
}

/* The two lower nodes drop their label straight down (clear of the ring)
   instead of centring it on a point that sits low on the circle. */
.s4c-process__node--bottom-right .s4c-process__node-text {
	text-align: left;
	transform: translate(-16px, 52px);
}

.s4c-process__node--bottom-left .s4c-process__node-text {
	text-align: right;
	transform: translate(calc(-100% + 16px), 52px);
}

.s4c-process__node-title {
	display: block;
	font-family: 'Geist', sans-serif;
	font-weight: 700;
	font-size: 22px;
	line-height: 28px;
	letter-spacing: 0;
	color: #0f172a;
}

.s4c-process__node-description {
	display: block;
	font-family: 'Geist', sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 26px;
	letter-spacing: 0;
	color: #64748b;
}

/* The wide stage labels need more room than the circle layout can give
   below full desktop width, so switch to a vertical list early. */
@media (max-width: 1200px) {
	.s4c-process__circle {
		width: 100%;
		aspect-ratio: auto;
		height: auto;
		margin: 0 auto;
	}

	.s4c-process__ring,
	.s4c-process__center {
		display: none;
	}

	.s4c-process__nodes {
		position: static;
		inset: auto;
		display: flex;
		flex-direction: column;
		gap: 28px;
	}

	.s4c-process__node {
		position: static;
		display: flex;
		align-items: flex-start;
		gap: 16px;
		width: 100%;
		max-width: 520px;
		height: auto;
		margin: 0 auto;
	}

	.s4c-process__node-icon {
		position: static;
		transform: none;
		width: 52px;
		height: 52px;
	}

	.s4c-process__node-icon svg,
	.s4c-process__node-icon img {
		width: 24px;
		height: 24px;
	}

	.s4c-process__node-text {
		position: static;
		width: auto;
	}

	.s4c-process__node--top .s4c-process__node-text,
	.s4c-process__node--right .s4c-process__node-text,
	.s4c-process__node--bottom .s4c-process__node-text,
	.s4c-process__node--bottom-right .s4c-process__node-text,
	.s4c-process__node--bottom-left .s4c-process__node-text,
	.s4c-process__node--left .s4c-process__node-text {
		text-align: left;
		transform: none;
	}
}

/* ==========================================================================
   Risk -- image + connected timeline
   ========================================================================== */

.s4c-risk {
	background: #ffffff;
}

.s4c-risk__content {
	display: grid;
	grid-template-columns: minmax(0, 480px) minmax(0, 1fr);
	gap: 60px;
	align-items: start;
}

.s4c-risk__media {
	position: sticky;
	top: 100px;
}

.s4c-risk__image {
	width: 100%;
	border-radius: 16px;
	object-fit: cover;
}

.s4c-risk__image--placeholder {
	aspect-ratio: 3 / 4;
	background: linear-gradient(135deg, rgba(1, 174, 240, 0.18), rgba(0, 65, 149, 0.18));
}

.s4c-risk__timeline {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 36px;
}

.s4c-risk__item {
	position: relative;
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr);
	gap: 24px;
	align-items: start;
}

/* 2px cyan connector from each icon down to the next one -- no trailing
   segment past the last item. */
.s4c-risk__item::before {
	content: "";
	position: absolute;
	left: 23px;
	top: 48px;
	bottom: -36px;
	width: 2px;
	background: rgba(1, 174, 240, 0.25);
}

.s4c-risk__item:last-child::before {
	display: none;
}

.s4c-risk__item-icon {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: #ffffff;
	border: 2px solid #e6ecf5;
	color: #004195;
	box-shadow: 0 2px 12px rgba(0, 65, 149, 0.08);
}

.s4c-risk__item-icon svg { width: 24px; height: 24px; }
.s4c-risk__item-icon img { width: 24px; height: 24px; object-fit: contain; }

.s4c-risk__item-text {
	padding-top: 2px;
}

.s4c-risk__item-title {
	font-family: 'Geist', sans-serif;
	font-size: 22px;
	font-weight: 700;
	line-height: 28px;
	letter-spacing: 0;
	color: #0d1b2e;
}

.s4c-risk__item-description {
	margin-top: 8px;
	font-family: 'Geist', sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 26px;
	letter-spacing: 0;
	color: #6b7a99;
}

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

	.s4c-risk__media {
		position: static;
	}

	.s4c-risk__image--placeholder {
		aspect-ratio: 16 / 9;
	}
}

@media (max-width: 640px) {
	.s4c-risk__item-title {
		font-size: 18px;
		line-height: 26px;
	}
}

/* ==========================================================================
   Deployment -- option cards whose gradient icon overhangs the card top
   ========================================================================== */

.s4c-deployment {
	padding-top: 80px;
	padding-bottom: 80px;
	background: #eef6ff;
}

@media (max-width: 1024px) {
	.s4c-deployment {
		padding-top: 64px;
		padding-bottom: 64px;
	}
}

@media (max-width: 640px) {
	.s4c-deployment {
		padding-top: 48px;
		padding-bottom: 48px;
	}
}

.s4c-deployment__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
	/* Room for the icon that pops out above the top row of cards. */
	padding-top: 26px;
}

.s4c-deployment__card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 48px 24px 24px;
	border: 1px solid var(--s4c-line);
	border-radius: 16px;
	background: var(--s4c-card-bg);
	box-shadow: 0 4px 24px rgba(0, 65, 149, 0.07);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.s4c-deployment__card:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 44px rgba(0, 65, 149, 0.14);
}

.s4c-deployment__card-icon {
	position: absolute;
	top: -26px;
	left: 24px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 8px;
	background: linear-gradient(180deg, #004195 0%, #0077c8 100%);
	color: #ffffff;
	box-shadow: 0 6px 20px rgba(0, 65, 149, 0.3);
}

.s4c-deployment__card-icon svg { width: 28px; height: 28px; }
.s4c-deployment__card-icon img { width: 28px; height: 28px; object-fit: contain; }

.s4c-deployment__card-title {
	font-family: 'Geist', sans-serif;
	font-size: 22px;
	font-weight: 700;
	line-height: 28px;
	letter-spacing: 0;
	color: #0f172a;
}

.s4c-deployment__card-description {
	font-family: 'Geist', sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 26px;
	letter-spacing: 0;
	color: #64748b;
}

@media (max-width: 1024px) {
	.s4c-deployment__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 46px 24px;
	}
}

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

/* ==========================================================================
   Why choose us -- dark; 3-col grid, each item marked by a cyan gradient
   top rule (no card background)
   ========================================================================== */

.s4c-why.s4c-section--dark {
	padding-top: 80px;
	padding-bottom: 80px;
}

.s4c-why--has-bg {
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

@media (max-width: 1024px) {
	.s4c-why.s4c-section--dark {
		padding-top: 64px;
		padding-bottom: 64px;
	}
}

@media (max-width: 640px) {
	.s4c-why.s4c-section--dark {
		padding-top: 48px;
		padding-bottom: 48px;
	}
}

.s4c-why__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 44px 40px;
}

.s4c-why__card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 24px 0 0;
}

.s4c-why__card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: linear-gradient(90deg, #01aef0 0%, #01d4da 100%);
}

.s4c-why__card-title {
	font-family: 'Geist', sans-serif;
	font-size: 22px;
	font-weight: 700;
	line-height: 28px;
	letter-spacing: 0;
	color: #ffffff;
}

.s4c-why__card-description {
	font-family: 'Geist', sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 26px;
	letter-spacing: 0;
	color: rgba(255, 255, 255, 0.8);
}

@media (max-width: 1024px) {
	.s4c-why__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 40px 32px;
	}
}

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

	.s4c-why__card-title {
		font-size: 20px;
	}
}

/* ==========================================================================
   FAQ -- accordion
   ========================================================================== */

/* Exact copy of the home page's .home-faq accordion (assets/css/home.css). */

.s4c-faq {
	background-color: #f8fafc;
}

.s4c-faq__list {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.s4c-faq__item {
	background-color: #fff;
	border: 1px solid #e6ecf5;
	border-radius: 16px;
	box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.04);
}

.s4c-faq__item-question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 24px 28px;
	list-style: none;
	cursor: pointer;
}

.s4c-faq__item-question::-webkit-details-marker {
	display: none;
}

.s4c-faq__item-question-text {
	font-family: 'Geist', sans-serif;
	font-weight: 700;
	font-size: 18px;
	line-height: 28px;
	letter-spacing: 0;
	color: #111827;
}

@media (max-width: 640px) {
	.s4c-faq__item-question {
		padding: 20px;
	}

	.s4c-faq__item-question-text {
		font-size: 15px;
	}
}

.s4c-faq__item-toggle {
	position: relative;
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	border-radius: 999px;
	color: #004195;
	background-color: #e6f7fe;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.s4c-faq__item[open] .s4c-faq__item-toggle {
	color: #fff;
	background: linear-gradient(103.84deg, #004195 0%, #01aef0 100%);
}

.s4c-faq__item-toggle::before,
.s4c-faq__item-toggle::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	background-color: currentColor;
	border-radius: 1px;
	transform: translate(-50%, -50%);
}

.s4c-faq__item-toggle::before {
	width: 14px;
	height: 2px;
}

.s4c-faq__item-toggle::after {
	width: 2px;
	height: 14px;
	transition: opacity 0.15s ease;
}

.s4c-faq__item[open] .s4c-faq__item-toggle::after {
	opacity: 0;
}

.s4c-faq__item-answer {
	padding: 0 28px 24px;
	border-top: 1px solid #e6f7fe;
	margin-top: -1px;
	padding-top: 20px;
}

.s4c-faq__item-answer p {
	margin: 0;
	font-family: 'Geist', sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 26px;
	letter-spacing: 0;
	color: #64748b;
}

@media (max-width: 640px) {
	.s4c-faq__item-answer {
		padding-left: 20px;
		padding-right: 20px;
	}
}

/* ==========================================================================
   Editor content appended after the sections
   ========================================================================== */

.s4c-entry-content {
	max-width: var(--s4c-max);
	margin: 0 auto 96px;
	padding: 0 var(--s4c-pad-x);
	font-size: 16px;
	line-height: 1.7;
	color: var(--s4c-body);
}

@media (max-width: 1024px) {
	.s4c-entry-content {
		padding: 0 var(--s4c-pad-x-tablet);
		margin-bottom: 64px;
	}
}

@media (max-width: 640px) {
	.s4c-entry-content {
		padding: 0 var(--s4c-pad-x-mobile);
	}
}

/* ==========================================================================
   Cloud-migration-page-only sections (Capabilities / Benefits / Options /
   Final CTA). Built on the same --s4c-* tokens as the shared components.
   ========================================================================== */

/* --- Section 3: Cloud Migration Capabilities (dark; 2/3/2 card grid) ---
   Values below are taken from the Figma dev-mode inspector for this
   section: card radius 16px/padding 24px/gap 16px, bg #fff@5%,
   border #fff@8%; icon box 48x48 radius 8px, gradient #004195@8% ->
   #01aef0@6%, border #01aef0@10%, cyan glyph; title 22/28 white;
   description 16/26 white@60%. */
.s4c-capabilities.s4c-section--dark {
	padding-top: 80px;
	padding-bottom: 80px;
	background-color: var(--s4c-navy-deep);
	color: rgba(226, 240, 255, 0.8);
}

.s4c-capabilities--has-bg {
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

/* Six-column track: the default (7 visible cards) is a 2 / 3 / 2 layout --
   the 2-card rows span 3 columns each (2 x 3 = 6), the middle 3-card row
   spans 2 columns each (3 x 2 = 6). Card classes are assigned by the
   template based on how many cards are actually VISIBLE (not by which
   numbered ACF slot they came from), so when the 8th, reserved slot is
   hidden the remaining cards simply render as --1 through --7 again and
   this base rule applies unchanged -- no gap, no extra markup needed.
   When all 8 defined cards are visible the template adds the
   ".s4c-capabilities__grid--8" modifier, which turns the trailing row into
   a 3-card row spanning 2 columns each (2 / 3 / 3) instead of leaving the
   8th card with no matching span rule. */
.s4c-capabilities__grid {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 20px;
}

.s4c-capabilities__card--1,
.s4c-capabilities__card--2,
.s4c-capabilities__card--6,
.s4c-capabilities__card--7 {
	grid-column: span 3;
}

.s4c-capabilities__card--3,
.s4c-capabilities__card--4,
.s4c-capabilities__card--5 {
	grid-column: span 2;
}

.s4c-capabilities__grid--8 .s4c-capabilities__card--6,
.s4c-capabilities__grid--8 .s4c-capabilities__card--7,
.s4c-capabilities__grid--8 .s4c-capabilities__card--8 {
	grid-column: span 2;
}

.s4c-capabilities__card {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 24px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.05);
}

.s4c-capabilities__card-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	flex-shrink: 0;
	border-radius: 8px;
	border: 1px solid rgba(1, 174, 240, 0.1);
	background: linear-gradient(135deg, rgba(0, 65, 149, 0.08), rgba(1, 174, 240, 0.06));
	color: var(--s4c-cyan);
}

.s4c-capabilities__card-icon svg { width: 24px; height: 24px; }
.s4c-capabilities__card-icon img { width: 24px; height: 24px; object-fit: contain; }

.s4c-capabilities__card-title {
	font-family: 'Geist', sans-serif;
	font-size: 22px;
	font-weight: 700;
	line-height: 28px;
	letter-spacing: 0;
	color: #ffffff;
}

.s4c-capabilities__card-description {
	font-family: 'Geist', sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 26px;
	letter-spacing: 0;
	color: rgba(255, 255, 255, 0.6);
}

@media (max-width: 1024px) {
	.s4c-capabilities.s4c-section--dark {
		padding-top: 64px;
		padding-bottom: 64px;
	}

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

	.s4c-capabilities__card--1,
	.s4c-capabilities__card--2,
	.s4c-capabilities__card--3,
	.s4c-capabilities__card--4,
	.s4c-capabilities__card--5,
	.s4c-capabilities__card--6,
	.s4c-capabilities__card--7,
	.s4c-capabilities__card--8 {
		grid-column: span 1;
	}
}

@media (max-width: 640px) {
	.s4c-capabilities.s4c-section--dark {
		padding-top: 48px;
		padding-bottom: 48px;
	}

	.s4c-capabilities__grid {
		grid-template-columns: 1fr;
	}

	.s4c-capabilities__card-title {
		font-size: 20px;
	}
}

/* --- Section 5: Business Benefits (list + image)
   Values from the Figma dev-mode inspector: icon box 40x40 radius 6px
   bg #e6f7fe / navy #004195 glyph; title 22/28 #0f172a; description
   16/26 #64748b; each row divided by a 1px #e6ecf5 bottom border with
   16px padding before it (no border/padding under the last row). --- */
.s4c-benefits {
	background-color: #ffffff;
}

.s4c-benefits__content {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
	gap: 56px;
	align-items: center;
}

.s4c-benefits__list {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.s4c-benefits__item {
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr);
	gap: 16px;
	align-items: start;
	padding-bottom: 16px;
	border-bottom: 1px solid #e6ecf5;
}

.s4c-benefits__item:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.s4c-benefits__item-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	flex-shrink: 0;
	border-radius: 6px;
	background: #e6f7fe;
	color: #004195;
}

.s4c-benefits__item-icon svg { width: 20px; height: 20px; }
.s4c-benefits__item-icon img { width: 20px; height: 20px; object-fit: contain; }

.s4c-benefits__item-title {
	font-family: 'Geist', sans-serif;
	font-size: 22px;
	font-weight: 700;
	line-height: 28px;
	letter-spacing: 0;
	color: #0f172a;
}

.s4c-benefits__item-description {
	margin-top: 4px;
	font-family: 'Geist', sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 26px;
	letter-spacing: 0;
	color: #64748b;
}

.s4c-benefits__media {
	border-radius: 16px;
	overflow: hidden;
}

.s4c-benefits__image {
	width: 100%;
	object-fit: cover;
}

.s4c-benefits__image--placeholder {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	background: linear-gradient(135deg, rgba(1, 174, 240, 0.18), rgba(0, 65, 149, 0.18));
}

@media (max-width: 1024px) {
	.s4c-benefits__content {
		grid-template-columns: 1fr;
		gap: 36px;
	}
}

/* --- Section 6: Migration Options (image + 2x2 cards)
   Values from the Figma dev-mode inspector: section bg #eef6ff; card
   padding 32/24, gap 16, border #e6ecf5; icon box 48x48 radius 6px,
   bg #e6f7fe, navy #004195 glyph; title 18px/100%, description
   14px/22px, both #64748b for the description / #0f172a for the title. --- */
.s4c-options {
	background-color: #eef6ff;
}

.s4c-options__content {
	display: grid;
	grid-template-columns: minmax(0, 480px) minmax(0, 1fr);
	gap: 48px;
	align-items: center;
}

.s4c-options__media {
	border-radius: 16px;
	overflow: hidden;
}

.s4c-options__image {
	width: 100%;
	object-fit: cover;
}

.s4c-options__image--placeholder {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 4;
	background: linear-gradient(135deg, rgba(1, 174, 240, 0.18), rgba(0, 65, 149, 0.18));
}

.s4c-options__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
}

.s4c-options__card {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 32px 24px;
	border: 1px solid #e6ecf5;
	border-radius: 16px;
	background: #ffffff;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.s4c-options__card-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	flex-shrink: 0;
	border-radius: 6px;
	background: #e6f7fe;
	color: #004195;
}

.s4c-options__card-icon svg { width: 22px; height: 22px; }
.s4c-options__card-icon img { width: 22px; height: 22px; object-fit: contain; }

.s4c-options__card-title {
	font-family: 'Geist', sans-serif;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0;
	color: #0f172a;
}

.s4c-options__card-description {
	font-family: 'Geist', sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 26px;
	letter-spacing: 0;
	color: #64748b;
}

@media (max-width: 1024px) {
	.s4c-options__content {
		grid-template-columns: 1fr;
		gap: 36px;
	}
}

@media (max-width: 560px) {
	.s4c-options__grid {
		grid-template-columns: 1fr;
	}
}

/* --- Section 9: Final CTA banner -- matches the home page's closing
   .home-banner--finalcta card exactly: a rounded, width-capped floating
   card (not a full-bleed section) with the same radial navy gradient,
   64px outer margin, 88px vertical / 80px horizontal inner padding, and
   the same badge/heading/description/button treatment. --- */
/* Both overrides need extra specificity: the page-wide
   ".page-template-s4hana-cloud-migration section" (padding) and
   "section > [class$="__inner"]" (max-width:1280+auto-margins) rules near
   the top of this file apply to every section by default and outrank a
   plain .s4c-finalcta / .s4c-finalcta__inner selector, so a lower-specificity
   override here would silently get out-specified and do nothing. */
.page-template-s4hana-cloud-migration section.s4c-finalcta {
	padding: 40px 0 0;
	background-color: #ffffff;
}

@media (max-width: 1024px) {
	.page-template-s4hana-cloud-migration section.s4c-finalcta {
		padding-top: 32px;
	}
}

@media (max-width: 640px) {
	.page-template-s4hana-cloud-migration section.s4c-finalcta {
		padding-top: 24px;
	}
}

.page-template-s4hana-cloud-migration section.s4c-finalcta > .s4c-finalcta__inner {
	max-width: none;
	margin-inline: auto;
}

/* Width is the banner's own -- a full 1280px card on desktop, same formula
   as the home page's .home-banner, not the page's padded 1280px container
   (that would leave the card at 1280 - 160px of padding = 1120px). Below
   1280 + the gutter it shrinks with the viewport instead of touching the
   edges. */
.s4c-finalcta__banner {
	position: relative;
	width: min(var(--s4c-max), calc(100% - (var(--s4c-pad-x) * 2)));
	margin: 64px auto;
	border-radius: 26px;
	overflow: hidden;
	background: radial-gradient(circle at 85% 0%, #0d3f7a 0%, #0a1e3d 55%, #060f1f 100%);
	padding: 88px 80px;
	text-align: center;
}

/* When an ACF background image is set, the inline style (see
   template-parts/s4cloud/finalcta.php) replaces the radial gradient with
   a dark-scrim + photo; this just adds the sizing the inline style
   doesn't set -- same pattern as the home page's .home-banner--has-image. */
.s4c-finalcta__banner--has-bg {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.s4c-finalcta__badge {
	display: block;
	width: fit-content;
	margin: 0 auto 16px;
	padding: 6px 16px;
	border: 1px solid rgba(1, 174, 240, 0.3);
	border-radius: 999px;
	background-color: rgba(1, 174, 240, 0.1);
	font-family: 'Geist', sans-serif;
	font-size: 16px;
	color: #7db8f5;
}

.s4c-finalcta__heading {
	margin: 0 auto 20px;
	font-family: 'Geist', sans-serif;
	font-weight: 700;
	font-size: 48px;
	line-height: 58px;
	letter-spacing: 0;
	color: #ffffff;
}

.s4c-finalcta__text {
	margin: 0 auto 32px;
	font-family: 'Geist', sans-serif;
	font-weight: 400;
	font-size: 18px;
	line-height: 28px;
	letter-spacing: 0;
	color: rgba(255, 255, 255, 0.6);
}

.s4c-finalcta__btn {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 6px 6px 6px 16px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.4);
	background: transparent;
	color: #ffffff;
	font-family: 'Geist', sans-serif;
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
	transition: border-color 0.15s ease;
}

.s4c-finalcta__btn:hover,
.s4c-finalcta__btn:focus-visible {
	border-color: #ffffff;
}

.s4c-finalcta__btn-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	flex-shrink: 0;
	border-radius: 50%;
	background-color: #ffffff;
	color: #004195;
}

.s4c-finalcta__btn-icon svg,
.s4c-finalcta__btn-icon img { width: 14px; height: 14px; object-fit: contain; }

@media (max-width: 1024px) {
	.s4c-finalcta__banner {
		width: min(var(--s4c-max), calc(100% - (var(--s4c-pad-x-tablet) * 2)));
		margin: 48px auto;
		padding: 56px 40px;
	}

	.s4c-finalcta__heading {
		font-size: 30px;
		line-height: 1.25;
	}
}

@media (max-width: 640px) {
	.s4c-finalcta__banner {
		width: min(var(--s4c-max), calc(100% - (var(--s4c-pad-x-mobile) * 2)));
		margin: 36px auto;
		border-radius: 20px;
		padding: 44px 24px;
	}

	.s4c-finalcta__heading {
		font-size: 30px;
		line-height: 1.25;
	}

	/* white-space: nowrap (set above for the desktop/tablet single-line
	   pill) overflows past the viewport on mobile with this button's
	   longer labels -- let it wrap onto two lines instead. */
	.s4c-finalcta__btn {
		white-space: normal;
		text-align: center;
	}
}