/**
 * Contact Us -- page-scoped stylesheet.
 *
 * Loaded only by page-templates/template-contact.php (via a <link> that
 * template prints itself), so nothing here is shared with the home page
 * (assets/css/home.css) or the S/4HANA service page stylesheets.
 *
 * Every rule is namespaced under .page-template-contact or a .contact-*
 * class, using the same design tokens (colours, 1280px container,
 * Geist font) as the rest of the site -- see assets/css/about.css for
 * the identical pattern this file follows.
 *
 * @package sap-migration-theme
 */

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

.page-template-contact {
	--contact-navy: #004195;
	--contact-navy-deep: #0b1733;
	--contact-cyan: #01aef0;
	--contact-ink: #0f172a;
	--contact-body: #475569;
	--contact-muted: #6b7280;
	--contact-line: #e6ecf5;
	--contact-tint: #eef6ff;
	--contact-pad-x: var(--header-padding-x, 80px);
	--contact-pad-x-tablet: var(--header-padding-x-tablet, 24px);
	--contact-pad-x-mobile: var(--header-padding-x-mobile, 16px);
	--contact-max: var(--header-max-width, 1280px);

	background-color: #ffffff;
	font-family: 'Geist', sans-serif;
	color: var(--contact-body);
}

.page-template-contact section {
	position: relative;
	padding: 96px var(--contact-pad-x);
}

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

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

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

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

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

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

/* Manual <br>s (via sapmig_text_with_breaks()) only apply above tablet,
   same rule as every other page-scoped stylesheet in this theme.
   Class corrected to what WordPress actually renders for this template
   (confirmed directly against the live <body> class): body_class()
   turns page-templates/template-contact.php into
   "page-template-template-contact" -- "template" appears twice, once
   from WordPress's own "page-template-" prefix and once because the
   file itself is named template-contact.php. The old single-"template"
   selector below never matched anything, so manual breaks were
   silently never hidden on tablet/mobile here. */
.page-template-template-contact .home-break {
	display: inline;
}

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

/* ==========================================================================
   Hero -- centered heading + description, pulled up behind the floating
   header exactly like the home page's hero (see .home-hero in home.css
   and .about-hero in about.css for the identical pattern): the section's
   negative top margin (16px header gap + 80px pill height) lets its
   background show through the header pill, which is already transparent
   by default (see .site-header__inner in main.css) -- no page-specific
   header code needed.
   ========================================================================== */

.contact-hero {
	position: relative;
	overflow: hidden;
	padding: 0;
	text-align: center;
	background:
		radial-gradient(circle at 50% 0%, rgba(1, 174, 240, 0.14) 0%, rgba(1, 174, 240, 0) 60%),
		radial-gradient(circle at 50% 20%, var(--contact-tint) 0%, #ffffff 70%);
	margin-top: -96px;
}

.contact-hero.contact-hero--has-bg {
	background: #ffffff;
}

@media (max-width: 640px) {
	.contact-hero {
		margin-top: -88px;
	}
}

.contact-hero__bg-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.85;
}

.contact-hero__inner {
	position: relative;
	padding: 180px var(--contact-pad-x) 96px;
}

@media (max-width: 1024px) {
	.contact-hero__inner {
		padding: 150px var(--contact-pad-x-tablet) 64px;
	}
}

@media (max-width: 640px) {
	.contact-hero__inner {
		padding: 130px var(--contact-pad-x-mobile) 48px;
	}
}

.contact-hero__heading {
	margin-inline: auto;
	font-family: 'Geist', sans-serif;
	font-weight: 700;
	font-size: 64px;
	line-height: 80px;
	letter-spacing: -1.5px;
	color: var(--contact-ink);
}

@media (max-width: 1024px) {
	.contact-hero__heading {
		font-size: 40px;
		line-height: 1.25;
		letter-spacing: -0.5px;
	}
}

@media (max-width: 640px) {
	.contact-hero__heading {
		font-size: 40px;
		line-height: 1.25;
		letter-spacing: 0;
	}
}

.contact-hero__description {
	margin: 24px auto 0;
	font-family: 'Geist', sans-serif;
	font-weight: 400;
	font-size: 18px;
	line-height: 28px;
	letter-spacing: 0;
	color: var(--contact-muted);
}

/* ==========================================================================
   "Get in Touch" -- proof stats (left) + form card (right)
   ========================================================================== */

.contact-get-in-touch__header {
	margin: 0 auto 56px;
	text-align: center;
}

.contact-get-in-touch__heading {
	font-family: 'Geist', sans-serif;
	font-weight: 700;
	font-size: 48px;
	line-height: 58px;
	letter-spacing: 0;
	color: var(--contact-ink);
}

@media (max-width: 1024px) {
	.contact-get-in-touch__heading {
		font-size: 30px;
		line-height: 1.25;
	}
}

@media (max-width: 640px) {
	.contact-get-in-touch__heading {
		font-size: 30px;
		line-height: 1.25;
	}
}

.contact-get-in-touch__subheading {
	margin-top: 16px;
	font-family: 'Geist', sans-serif;
	font-weight: 400;
	font-size: 18px;
	line-height: 28px;
	color: var(--contact-muted);
}

.contact-get-in-touch__layout {
	display: grid;
	grid-template-columns: minmax(0, 590fr) minmax(0, 524fr);
	align-items: stretch;
	gap: 24px;
}

@media (max-width: 1024px) {
	.contact-get-in-touch__layout {
		grid-template-columns: 1fr;
	}
}

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

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

.contact-stats-grid__value {
	font-family: 'Geist', sans-serif;
	font-weight: 800;
	font-size: 40px;
	line-height: 1;
	color: var(--contact-navy);
}

.contact-stats-grid__label {
	margin-top: 8px;
	font-family: 'Geist', sans-serif;
	font-weight: 700;
	font-size: 18px;
	line-height: 26px;
	color: var(--contact-ink);
}

.contact-stats-grid__description {
	margin-top: 8px;
	font-family: 'Geist', sans-serif;
	font-weight: 400;
	font-size: 15px;
	line-height: 24px;
	color: var(--contact-muted);
}

/* .service-contact__form-card (main.css) supplies the white card's border,
   radius, shadow and padding -- this file only adds the "Get in Touch"
   heading/description sitting above the reused form fields. */

.contact-form-card__heading {
	font-family: 'Geist', sans-serif;
	font-weight: 700;
	font-size: 24px;
	line-height: 1.3;
	color: var(--contact-ink);
}

.contact-form-card__description {
	margin-top: 8px;
	margin-bottom: 24px;
	font-family: 'Geist', sans-serif;
	font-weight: 400;
	font-size: 14px;
	line-height: 22px;
	color: var(--contact-muted);
}

.contact-form-card__response-note {
	margin-top: 8px;
	margin-bottom: 24px;
	font-family: 'Geist', sans-serif;
	font-weight: 400;
	font-style: italic;
	font-size: 13px;
	line-height: 20px;
	color: var(--contact-navy);
}

.contact-form-card__optional {
	font-weight: 400;
	color: var(--contact-muted);
	text-transform: none;
}

/* The shared .service-contact__field styling (main.css) has no <select>
   rule -- this form is the first to need one, so it's added here rather
   than in main.css since it's currently only used on this page. */
.service-contact__field select {
	display: block;
	width: 100%;
	padding: 14px 16px;
	font-family: 'Geist', sans-serif;
	font-size: 15px;
	color: var(--color-heading, var(--contact-ink));
	background: #f4f8fc;
	border: 1px solid #e6ecf5;
	border-radius: 10px;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2364748B' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.service-contact__field select:focus {
	outline: none;
	border-color: var(--gradient-btn-start, var(--contact-navy));
	box-shadow: 0 0 0 3px rgba(11, 77, 162, 0.12);
}

.service-contact__field select[aria-invalid='true'] {
	border-color: #dc2626;
}

/* ==========================================================================
   "SAP S/4HANA Transformation Services" -- photo + connected item list
   ========================================================================== */

.contact-services {
	background-color: #f8fafc;
}

.contact-services__header {
	margin: 0 auto 56px;
	text-align: center;
}

.contact-services__heading {
	font-family: 'Geist', sans-serif;
	font-weight: 700;
	font-size: 48px;
	line-height: 58px;
	letter-spacing: 0;
	color: var(--contact-ink);
}

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

@media (max-width: 640px) {
	.contact-services__heading {
		font-size: 30px;
		line-height: 1.25;
	}
}

.contact-services__subheading {
	margin-top: 16px;
	font-family: 'Geist', sans-serif;
	font-weight: 400;
	font-size: 18px;
	line-height: 28px;
	color: var(--contact-muted);
}

.contact-services__layout {
	display: block;
}

.contact-services__layout--with-media {
	display: grid;
	grid-template-columns: minmax(0, 610fr) minmax(0, 610fr);
	align-items: stretch;
	gap: 40px;
}

@media (max-width: 1024px) {
	.contact-services__layout--with-media {
		grid-template-columns: 1fr;
	}
}

.contact-services__media {
	/* Grid items default to min-height: auto, which lets an item's content
	   (here, the img) refuse to shrink to fit the row's stretched height --
	   a well-known cause of "stretch looks like it isn't working" when a
	   sized child (or one with its own aspect ratio) is involved. */
	min-height: 0;
	border-radius: 24px;
	overflow: hidden;
}

.contact-services__media img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 320px;
	object-fit: cover;
}

.contact-services__list {
	position: relative;
	min-height: 0;
	display: grid;
	grid-template-columns: 44px 1fr;
	column-gap: 20px;
	/* Kept as a fixed, known value -- .contact-services__item-icon::before
	   bridges exactly this distance between consecutive rows, so it must
	   stay a real, reliable 20px everywhere (not stretched/redistributed
	   by e.g. align-content: space-between, which made the *actual*
	   rendered gap variable and broke that fixed-pixel bridge). */
	row-gap: 20px;
}

.contact-services__item {
	display: contents;
}

/* The icon cell stretches to match its row's height (the card next to it,
   which is usually taller than the 44px icon) rather than being fixed-size
   -- that's what lets the connector line below be sized to each row's own
   real height instead of guessing one fixed length for the whole list.
   The 44px circle itself doesn't stretch (it has an explicit size), so
   flex's fallback alignment (behaves like align-self: flex-start for a
   sized item) pins it to the TOP of this stretched cell -- its own
   vertical center therefore always sits at a fixed 22px (half its height)
   from the cell's top, regardless of how tall the row/card is. */
.contact-services__item-icon {
	position: relative;
	display: flex;
	justify-content: center;
}

/* Continuous vertical connector, drawn per-row (not as one element spanning
   the whole list) so each segment is naturally exactly as tall as its own
   row -- a list built from cards of different heights (different
   description line counts) can't have one fixed-length line guessed to
   fit every row. Full height for a middle item (so it visually passes
   behind the icon, continuing the line from the row above into the row
   below). For the first/last item, trimmed to stop exactly at the 44px
   circle's own vertical center (a fixed 22px from this cell's top -- see
   the comment above -- NOT 50% of the cell, which is the row/card's full
   height and would stop well past the circle for any row taller than
   44px, leaving a visible stray stub below the last icon or above the
   first one). */
.contact-services__item-icon::before {
	content: '';
	position: absolute;
	left: 50%;
	top: 0;
	/* Extends 20px past this cell's own bottom edge -- exactly the grid's
	   row-gap -- so the line bridges that gap and reaches flush against
	   the next row's top edge instead of stopping at its own row boundary
	   and leaving a visible gap with no line in it before the next
	   segment picks up. */
	bottom: -20px;
	width: 2px;
	background-color: rgba(1, 174, 240, 0.25);
	transform: translateX(-50%);
}

.contact-services__item--first .contact-services__item-icon::before {
	top: 22px;
}

.contact-services__item--last .contact-services__item-icon::before {
	top: 0;
	bottom: auto;
	height: 22px;
}

.contact-services__item-icon-circle {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	border-radius: 50%;
	background-color: #ffffff;
	border: 2px solid var(--contact-line);
	color: var(--contact-navy);
}

.contact-services__item-icon-circle svg,
.contact-services__item-icon-circle img {
	width: 24px;
	height: 24px;
	object-fit: contain;
}

.contact-services__item-card {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 16px;
	border-radius: 16px;
	background-color: #ffffff;
	border: 1px solid var(--contact-line);
	box-shadow: 0 2px 12px rgba(0, 65, 149, 0.05);
}

.contact-services__item-title {
	font-family: 'Geist', sans-serif;
	font-weight: 700;
	font-size: 22px;
	line-height: 28px;
	color: var(--contact-ink);
}

.contact-services__item-description {
	font-family: 'Geist', sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 26px;
	color: var(--contact-muted);
}

@media (max-width: 640px) {
	.contact-services__list {
		grid-template-columns: 36px 1fr;
	}

	.contact-services__item-icon-circle {
		width: 36px;
		height: 36px;
	}

	.contact-services__item-icon-circle svg,
	.contact-services__item-icon-circle img {
		width: 18px;
		height: 18px;
	}
}

/* ==========================================================================
   "Connect With Our SAP Team" -- 3-column contact-method cards
   ========================================================================== */

.contact-connect {
	background-color: var(--contact-tint);
}

.contact-connect__header {
	margin: 0 auto 56px;
	text-align: center;
}

.contact-connect__heading {
	font-family: 'Geist', sans-serif;
	font-weight: 700;
	font-size: 48px;
	line-height: 58px;
	letter-spacing: 0;
	color: var(--contact-ink);
}

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

@media (max-width: 640px) {
	.contact-connect__heading {
		font-size: 30px;
		line-height: 1.25;
	}
}

.contact-connect__subheading {
	margin-top: 16px;
	font-family: 'Geist', sans-serif;
	font-weight: 400;
	font-size: 18px;
	line-height: 28px;
	color: var(--contact-muted);
}

.contact-connect__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}

@media (max-width: 1024px) {
	.contact-connect__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

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

.contact-connect__card {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 32px;
	border-radius: 16px;
	background-color: #ffffff;
	border: 1px solid var(--contact-line);
	box-shadow: 0 2px 20px rgba(0, 0, 0, 0.04);
}

.contact-connect__card-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	flex-shrink: 0;
	border-radius: 8px;
	background-color: #e6f7fe;
	color: var(--contact-navy);
}

.contact-connect__card-icon svg,
.contact-connect__card-icon img {
	width: 24px;
	height: 24px;
	object-fit: contain;
}

.contact-connect__card-title {
	font-family: 'Geist', sans-serif;
	font-weight: 700;
	font-size: 22px;
	line-height: 28px;
	color: var(--contact-ink);
}

.contact-connect__card-description {
	font-family: 'Geist', sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 26px;
	color: var(--contact-muted);
}

.contact-connect__card-link {
	font-family: 'Geist', sans-serif;
	font-weight: 500;
	font-size: 16px;
	line-height: 20px;
	color: var(--contact-navy);
	text-decoration: none;
}

.contact-connect__card-link:hover,
.contact-connect__card-link:focus-visible {
	text-decoration: none;
}

/* ==========================================================================
   "Supporting SAP Transformation Worldwide" -- one bordered row, 3
   columns separated by vertical dividers (not 3 separate cards).
   ========================================================================== */

.contact-locations {
	background-color: #ffffff;
}

.contact-locations__header {
	margin: 0 auto 56px;
	text-align: center;
}

.contact-locations__heading {
	font-family: 'Geist', sans-serif;
	font-weight: 700;
	font-size: 48px;
	line-height: 58px;
	letter-spacing: 0;
	color: var(--contact-ink);
}

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

@media (max-width: 640px) {
	.contact-locations__heading {
		font-size: 30px;
		line-height: 1.25;
	}
}

.contact-locations__subheading {
	margin-top: 16px;
	font-family: 'Geist', sans-serif;
	font-weight: 400;
	font-size: 18px;
	line-height: 28px;
	color: var(--contact-muted);
}

.contact-locations__row {
	display: flex;
	border-radius: 18px;
	border: 1px solid #e2eaf4;
	box-shadow: 0 2px 16px rgba(0, 65, 149, 0.05);
	overflow: hidden;
}

@media (max-width: 1024px) {
	.contact-locations__row {
		flex-direction: column;
	}
}

.contact-locations__col {
	flex: 1 1 0;
	min-width: 0;
	padding: 40px;
	border-left: 1px solid #e2eaf4;
}

.contact-locations__col:first-child {
	border-left: none;
}

@media (max-width: 1024px) {
	.contact-locations__col {
		border-left: none;
		border-top: 1px solid #e2eaf4;
	}

	.contact-locations__col:first-child {
		border-top: none;
	}
}

.contact-locations__col-eyebrow {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 15px;
	font-family: 'Geist', sans-serif;
	font-weight: 600;
	font-size: 16px;
	line-height: 16px;
	letter-spacing: 0;
	text-transform: uppercase;
	color: #6b7fa3;
}

.contact-locations__col-eyebrow-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	color: var(--contact-navy);
}

.contact-locations__col-eyebrow-icon svg,
.contact-locations__col-eyebrow-icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.contact-locations__col-city {
	font-family: 'Geist', sans-serif;
	font-weight: 700;
	font-size: 22px;
	line-height: 28px;
	color: var(--contact-ink);
}

.contact-locations__col-address {
	margin-top: 8px;
	font-family: 'Geist', sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 26px;
	color: #6b7fa3;
}

/* ==========================================================================
   "Proven SAP Transformation Outcomes" -- 3 testimonial cards. The 3
   variants (dark / gradient / light) are fixed by position to match the
   Figma design exactly -- see template-parts/contact/testimonials.php.
   ========================================================================== */

.contact-testimonials {
	background-color: var(--contact-tint);
}

.contact-testimonials__header {
	margin: 0 auto 60px;
	text-align: center;
}

.contact-testimonials__heading {
	font-family: 'Geist', sans-serif;
	font-weight: 700;
	font-size: 48px;
	line-height: 58px;
	letter-spacing: 0;
	color: var(--contact-ink);
}

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

@media (max-width: 640px) {
	.contact-testimonials__heading {
		font-size: 30px;
		line-height: 1.25;
	}
}

.contact-testimonials__subheading {
	margin-top: 16px;
	font-family: 'Geist', sans-serif;
	font-weight: 400;
	font-size: 18px;
	line-height: 28px;
	color: var(--contact-muted);
}

.contact-testimonials__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}

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

.contact-testimonials__card {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 40px 32px;
	border-radius: 20px;
	border: 1px solid transparent;
}

.contact-testimonials__card--dark {
	background-color: var(--contact-ink);
	border-color: rgba(255, 255, 255, 0.08);
}

.contact-testimonials__card--gradient {
	background: linear-gradient(135deg, var(--contact-cyan) 0%, var(--contact-navy) 100%);
	border-color: rgba(255, 255, 255, 0.1);
}

.contact-testimonials__card--light {
	background-color: #ffffff;
	border-color: var(--contact-line);
	box-shadow: 0 2px 16px rgba(0, 65, 149, 0.05);
}

.contact-testimonials__stars {
	display: flex;
	align-items: center;
	gap: 4px;
}

.contact-testimonials__star {
	display: inline-flex;
	width: 14px;
	height: 14px;
	color: #ffba45;
}

.contact-testimonials__star svg {
	width: 100%;
	height: 100%;
}

.contact-testimonials__star--empty {
	color: rgba(100, 116, 139, 0.25);
}

.contact-testimonials__card-title {
	font-family: 'Geist', sans-serif;
	font-weight: 700;
	font-size: 22px;
	line-height: 28px;
}

.contact-testimonials__card--dark .contact-testimonials__card-title,
.contact-testimonials__card--gradient .contact-testimonials__card-title {
	color: #ffffff;
}

.contact-testimonials__card--light .contact-testimonials__card-title {
	color: var(--contact-ink);
}

.contact-testimonials__card-quote {
	font-family: 'Geist', sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 26px;
}

.contact-testimonials__card--dark .contact-testimonials__card-quote,
.contact-testimonials__card--gradient .contact-testimonials__card-quote {
	color: rgba(255, 255, 255, 0.85);
}

.contact-testimonials__card--light .contact-testimonials__card-quote {
	color: var(--contact-muted);
}

.contact-testimonials__stats {
	display: flex;
	flex-wrap: wrap;
	gap: 24px 32px;
}

.contact-testimonials__stat {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.contact-testimonials__stat-value {
	font-family: 'Geist', sans-serif;
	font-weight: 700;
	font-size: 22px;
	line-height: 28px;
	color: var(--contact-cyan);
}

.contact-testimonials__stat-label {
	font-family: 'Geist', sans-serif;
	font-weight: 400;
	font-size: 12px;
	line-height: 16px;
	color: #64748b;
}

.contact-testimonials__person {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.contact-testimonials__person-name {
	font-family: 'Geist', sans-serif;
	font-weight: 700;
	font-size: 14px;
	line-height: 16px;
}

.contact-testimonials__card--dark .contact-testimonials__person-name,
.contact-testimonials__card--gradient .contact-testimonials__person-name {
	color: #ffffff;
}

.contact-testimonials__card--light .contact-testimonials__person-name {
	color: var(--contact-ink);
}

.contact-testimonials__person-role {
	font-family: 'Geist', sans-serif;
	font-weight: 400;
	font-size: 12px;
	line-height: 16px;
}

/* ==========================================================================
   Final CTA -- same dark banner + button treatment used sitewide for
   closing CTAs (see .home-banner--finalcta in home.css and
   .about-finalcta in about.css: same background gradient, same
   heading/description type scale and colors, same gradient button) so
   this page's closing banner matches every other page's exactly rather
   than introducing new values.
   ========================================================================== */

.contact-cta__banner {
	position: relative;
	border-radius: 26px;
	overflow: hidden;
	background: radial-gradient(circle at 85% 0%, #0d3f7a 0%, #0a1e3d 55%, #060f1f 100%);
	padding: 80px;
	text-align: center;
}

.contact-cta__banner--has-bg {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

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

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

@media (max-width: 640px) {
	.contact-cta__heading {
		font-size: 30px;
		line-height: 1.25;
	}
}

.contact-cta__description {
	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);
}

.contact-cta__buttons {
	position: relative;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
}

.contact-cta__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 6px 6px 6px 16px;
	border-radius: 999px;
	border: none;
	font-family: 'Geist', sans-serif;
	font-size: 16px;
	line-height: 20px;
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
	transition: opacity 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.contact-cta__btn--solid {
	color: #ffffff;
	background: linear-gradient(103.84deg, #004195 0%, #01aef0 100%);
}

.contact-cta__btn--solid:hover,
.contact-cta__btn--solid:focus-visible {
	opacity: 0.92;
}

.contact-cta__btn--outline {
	color: #ffffff;
	background-color: transparent;
	border: 1px solid rgba(255, 255, 255, 0.4);
}

.contact-cta__btn--outline:hover,
.contact-cta__btn--outline:focus-visible {
	border-color: #ffffff;
}

.contact-cta__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: #0b1733;
}

.contact-cta__btn--outline .contact-cta__btn-icon {
	background-color: rgba(255, 255, 255, 0.12);
	color: #ffffff;
}

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

@media (max-width: 1024px) {
	.contact-cta__banner {
		padding: 56px 40px;
	}
}

@media (max-width: 640px) {
	.contact-cta__banner {
		border-radius: 20px;
		padding: 44px 24px;
	}
}

/* Per Figma dev-mode: each variant uses its own role colour, not one
   shared grey token -- dark card = white at 60% opacity, gradient card =
   solid white (the shared #64748b grey has almost no contrast against
   the mid-tone blue), light card = the standard muted grey. */
.contact-testimonials__card--dark .contact-testimonials__person-role {
	color: rgba(255, 255, 255, 0.6);
}

.contact-testimonials__card--gradient .contact-testimonials__person-role {
	color: #ffffff;
}

.contact-testimonials__card--light .contact-testimonials__person-role {
	color: #64748b;
}