/**
 * About Us -- page-scoped stylesheet.
 *
 * Loaded only by page-templates/template-about.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-about or an .about-*
 * class, using the same design tokens (colours, 1280px container,
 * Geist font) as the rest of the site.
 *
 * @package sap-migration-theme
 */

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

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

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

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

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

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

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

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

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

@media (max-width: 640px) {
	.page-template-about section {
		padding: 48px var(--about-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-about.php into
   "page-template-template-about" -- "template" appears twice, once
   from WordPress's own "page-template-" prefix and once because the
   file itself is named template-about.php. The old single-"template"
   selector below never matched anything, so manual breaks were
   silently never hidden on tablet/mobile here. */
.page-template-template-about .home-break {
	display: inline;
}

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

/* ==========================================================================
   Shared button (hero primary + final CTA): solid brand gradient pill
   with a white icon circle, same treatment as the home page's
   .home-hero__btn--primary / .home-banner__btn--solid.
   ========================================================================== */

.about-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: 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;
}

.about-btn--primary {
	background: linear-gradient(103.84deg, #004195 0%, #01aef0 100%);
	color: #ffffff;
}

.about-btn--primary:hover,
.about-btn--primary:focus-visible {
	opacity: 0.92;
}

.about-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: var(--about-navy);
}

.about-btn__icon svg,
.about-btn__icon img {
	width: 14px;
	height: 14px;
	object-fit: contain;
}

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

/* Higher-specificity selector needed: the page-wide
   ".page-template-about section" rule near the top of this file applies
   96px padding to every section by default and outranks a plain
   .about-hero selector, so a lower-specificity override here would
   silently get out-specified and do nothing (same gotcha documented for
   the S/4HANA pages' finalcta banners). */
.page-template-about section.about-hero {
	position: relative;
	overflow: hidden;
	padding: 0;
	text-align: center;
	/* Decorative fallback for when no photo is uploaded. When
	   .about-hero__bg-image IS present, .about-hero--has-bg below
	   replaces this with a plain white background (matching
	   .home-hero exactly) so the photo's own contrast/detail shows
	   through cleanly at its 0.85 opacity instead of blending with a
	   second gradient underneath and washing out. */
	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(--about-tint) 0%, #ffffff 70%);
	/* Pulled up to sit behind the floating header (16px top gap + 80px
	   pill height = 96px -- see .site-header in main.css) instead of
	   starting below it, so the background gradient/photo shows through
	   around the header pill -- same treatment as .home-hero in
	   home.css. .about-hero__inner's extra padding-top below puts the
	   actual heading back where it visually belongs. */
	margin-top: -96px;
}

.page-template-about section.about-hero.about-hero--has-bg {
	background: #ffffff;
}

@media (max-width: 640px) {
	.page-template-about section.about-hero {
		margin-top: -88px;
	}
}

/* Optional uploaded background image, same treatment as the home page's
   .home-hero__bg-image: an <img> absolutely covering the section at a
   fixed low opacity so it reads as texture behind the heading rather
   than competing with it (see template-parts/about/hero.php). */
.about-hero__bg-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.85;
}

/* No special max-width here anymore -- uses the same 1280px cap as every
   other section via the generic ".page-template-about section >
   [class$='__inner']" rule near the top of this file. Only the padding
   is hero-specific, so no specificity fight is needed for that (a
   different property than what the generic rule sets). */
.about-hero__inner {
	/* Positioned (not just for layout) so it paints above the absolutely
	   positioned .about-hero__bg-image despite coming later in DOM order
	   -- same reasoning as .home-hero__inner in home.css. */
	position: relative;
	padding: 224px var(--about-pad-x) 96px;
}

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

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

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

.about-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(--about-muted);
}

.about-hero__btn {
	margin-top: 32px;
}

.about-hero__partners {
	margin-top: 64px;
}

.about-hero__partners-label {
	display: block;
	font-family: 'Geist', sans-serif;
	font-weight: 600;
	font-size: 22px;
	line-height: 30px;
	letter-spacing: 0.08em;
	color: var(--about-muted);
}

.about-hero__partners-content {
	margin: 8px auto 0;
	font-family: 'Geist', sans-serif;
	font-weight: 400;
	font-size: 18px;
	line-height: 28px;
	color: var(--about-muted);
}

.about-hero__partners-row {
	margin-top: 40px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 32px 40px;
}

.about-hero__partner {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: 'Geist', sans-serif;
	font-weight: 600;
	font-size: 15px;
	color: var(--about-muted);
}


.about-hero__partner-text {
	white-space: nowrap;
}

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

	.about-hero__description {
		font-size: 16px;
		line-height: 26px;
	}

	.about-hero__partners-row {
		gap: 24px 28px;
	}
}

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

	.about-hero__partners-row {
		gap: 20px 24px;
	}
}

/* ==========================================================================
   SAP Partnership & Credentials (also reused, differently tinted, as the
   "Credentials & Commitments" section further down the page -- see the
   .about-credentials rules, which share this same header+list pattern).
   ========================================================================== */

.about-partnership {
	background-color: #ffffff;
}

.about-partnership__header {
	margin: 0 auto 32px;
	text-align: center;
}

.about-partnership__heading {
	font-family: 'Geist', sans-serif;
	font-weight: 700;
	font-size: 34px;
	line-height: 1.3;
	color: var(--about-ink);
}

.about-partnership__description {
	margin-top: 16px;
	font-family: 'Geist', sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 26px;
	color: var(--about-muted);
}

.about-partnership__list-label {
	display: block;
	text-align: center;
	margin-bottom: 20px;
	font-family: 'Geist', sans-serif;
	font-weight: 700;
	font-size: 14px;
	color: var(--about-navy);
}

.about-partnership__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 14px 16px;
}

.about-partnership__item {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 20px;
	border-radius: 999px;
	background-color: var(--about-tint);
	font-family: 'Geist', sans-serif;
	font-weight: 600;
	font-size: 14px;
	color: var(--about-navy);
}

.about-partnership__item-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	color: var(--about-cyan);
}

.about-partnership__item-icon svg,
.about-partnership__item-icon img {
	width: 100%;
	height: 100%;
}

@media (max-width: 640px) {
	.about-partnership__heading {
		font-size: 26px;
	}
}

/* ==========================================================================
   End-to-End S/4HANA Transformation Approach: photo + connected list of
   7 stages, each with an icon on a continuous vertical line and a
   bordered content card -- same pattern as the Contact Us page's
   "SAP S/4HANA Transformation Services" section
   (.contact-services__* in contact.css), renamed under .about-approach.
   Replaces an earlier circular seven-stage diagram design.
   ========================================================================== */

.about-approach {
	background-color: var(--about-tint);
}

.about-approach__header {
	margin: 0 auto 56px;
	text-align: center;
}

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

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

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

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

.about-approach__layout {
	display: block;
}

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

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

.about-approach__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. */
	min-height: 0;
	border-radius: 24px;
	overflow: hidden;
}

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

.about-approach__list {
	position: relative;
	min-height: 0;
	display: grid;
	grid-template-columns: 44px 1fr;
	column-gap: 20px;
	row-gap: 20px;
}

.about-approach__item {
	display: contents;
}

.about-approach__item-icon {
	position: relative;
	display: flex;
	justify-content: center;
}

.about-approach__item-icon::before {
	content: '';
	position: absolute;
	left: 50%;
	top: 0;
	bottom: -20px;
	width: 2px;
	background-color: rgba(1, 174, 240, 0.25);
	transform: translateX(-50%);
}

.about-approach__item--first .about-approach__item-icon::before {
	top: 22px;
}

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

.about-approach__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(--about-line);
	color: var(--about-navy);
}

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

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

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

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

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

	.about-approach__item-icon-circle {
		width: 36px;
		height: 36px;
	}

	.about-approach__item-icon-circle svg,
	.about-approach__item-icon-circle img {
		width: 18px;
		height: 18px;
	}
}

/* ==========================================================================
   Our Journey (timeline)
   ========================================================================== */

.about-journey {
	background-color: #ffffff;
}

.about-journey__header {
	margin-bottom: 72px;
	text-align: center;
}

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

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

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

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

.about-journey__track {
	position: relative;
}

.about-journey__line {
	position: absolute;
	/* Centered through the dot's 12px height (266px upper-stop height +
	   half the dot), not just touching its top edge. */
	top: 266px;
	left: 0;
	right: 0;
	height: 2px;
	background-color: var(--about-cyan);
}

.about-journey__stops {
	position: relative;
	display: flex;
	align-items: stretch;
}

.about-journey__stop {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.about-journey__stop-upper {
	/* Sized to what a *top*-position stop's own content actually needs
	   (title + description, no list -- only stop 6 has the bulleted
	   list, and it's always in the lower box, a 'bottom'-position stop).
	   Content is anchored to the bottom of this box via justify-content
	   below, so any extra unused height here shows up as dead space
	   *above* the card, between it and the section header -- a fixed
	   340px (sized for the *lower* box's very different stop-6 needs)
	   left a large, visibly empty gap above every top-position card. */
	height: 260px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	padding: 0 10px;
}

.about-journey__stop-lower {
	/* min-height (not a fixed height like .about-journey__stop-upper) --
	   the lower box's height has no effect on the dots' alignment (only
	   the upper box's height feeds into .about-journey__line's `top`), so
	   it can safely grow past this floor for a stop with more content
	   (stop 6's intro + bulleted list) instead of clipping/overflowing,
	   while every other (shorter) bottom-position stop just uses the
	   floor value, matching the upper box's own height for symmetry. */
	min-height: 260px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	padding: 0 10px;
}

/* Short line connecting the card to its dot on the timeline -- Figma's
   "Vertical Divider", 1px wide, 36px tall, in the same cyan as the dot. */

.about-journey__connector {
	flex-shrink: 0;
	width: 1px;
	height: 36px;
	background-color: var(--about-cyan);
}

.about-journey__dot {
	flex-shrink: 0;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: linear-gradient(135deg, #004195 0%, #01aef0 100%);
}

/* Wider than its own flex column (each of the 8 alternating stops only
   gets ~1/8 of the 1280px section width) -- deliberately overflows that
   narrow column rather than being capped by it, since only every other
   column actually has a visible card in a given row (top/bottom
   alternate), leaving room on either side. clamp() keeps this safe down
   to the narrowest viewport this desktop layout still renders at
   (just above the 1024px stacked-layout breakpoint, where columns are
   at their tightest) without letting two neighbouring visible cards
   collide, while still growing usefully wider at full 1280px+ width. */
.about-journey__card {
	width: clamp(200px, 21vw, 300px);
	text-align: left;
}

/* The middle stops' cards are safe to overflow symmetrically (centered
   on their dot) because they bleed into an always-empty neighbouring
   column. The first and last stops have no such neighbour on their
   outward side, so centering them would push the card's edge straight
   past the section's own 1280px boundary (verified via screenshot: the
   first stop's card was landing ~30px left of the container edge).
   Anchoring them to the inward-facing edge instead keeps their card
   flush with the section boundary and growing only inward, never past
   it -- the dot itself is unaffected (its position comes from
   .about-journey__stop's own align-items:center, a sibling rule, not
   this one). */
/* Scoped to the same desktop-only range as the rest of this alternating
   timeline layout -- the stacked mobile/tablet layout (see the
   max-width: 1024px block below) already left-aligns every stop's card
   uniformly and must not be overridden by this desktop-only rule, which
   would otherwise win on specificity and right-align just the last
   stop's card on mobile too. */
@media (min-width: 1025px) {
	/* Two levels needed, not one: .about-journey__stop-upper/-lower are
	   NOT stretched by their parent (.about-journey__stop uses
	   align-items:center, not stretch, so the dot -- a sibling -- stays
	   centered on its own narrow column), so once the box grows wider
	   than its column to fit a wide card, the *box itself* still gets
	   centered as a whole unit by that grandparent rule -- overriding
	   only what happens *inside* the box (below) was not enough; the box
	   was still landing centered, and with it, overflowing evenly on
	   both sides. align-self here overrides the grandparent's centering
	   for just this one box, without touching the dot beside it. */
	.about-journey__stop:first-child .about-journey__stop-upper,
	.about-journey__stop:first-child .about-journey__stop-lower {
		align-self: flex-start;
		align-items: flex-start;
	}

	.about-journey__stop:last-child .about-journey__stop-upper,
	.about-journey__stop:last-child .about-journey__stop-lower {
		align-self: flex-end;
		align-items: flex-end;
	}

	/* The short dot-to-card connector line is a sibling of the card
	   inside the same box, so it inherited the same flex-start/flex-end
	   alignment above and drifted off to the card's edge with it --
	   visibly detached from the dot, which stays centered on the
	   column regardless (a separate rule, unaffected by any of this).
	   Every other (middle) stop's connector is unaffected by this bug:
	   its box is still centered by the unmodified grandparent rule, so
	   the connector -- itself still centered within that symmetric box
	   -- lines up with the column centre "for free". Only the first/last
	   stop's now-asymmetric box breaks that. Fixed by taking just the
	   connector out of flow and pinning it with position:absolute
	   relative to .about-journey__stop itself (the narrow column, not
	   the wide overflowing box), so `left:50%` always lands on the
	   dot's true centre no matter how many stops exist or how wide the
	   card grows. Vertical offsets are plain arithmetic from the other
	   fixed values already in this file: the upper box's own fixed
	   260px height, and the dot's 12px height. */
	.about-journey__stop:first-child,
	.about-journey__stop:last-child {
		position: relative;
	}

	.about-journey__stop:first-child .about-journey__stop-upper .about-journey__connector,
	.about-journey__stop:last-child .about-journey__stop-upper .about-journey__connector {
		position: absolute;
		left: 50%;
		top: 224px; /* 260px upper-box height - 36px connector height */
		transform: translateX(-50%);
	}

	.about-journey__stop:first-child .about-journey__stop-lower .about-journey__connector,
	.about-journey__stop:last-child .about-journey__stop-lower .about-journey__connector {
		position: absolute;
		left: 50%;
		top: 272px; /* 260px upper-box height + 12px dot height */
		transform: translateX(-50%);
	}

	/* Taking the connector out of flow (above) also removed the 36px of
	   space it used to contribute *in flow*, between the card and the
	   box's near edge -- confirmed via getBoundingClientRect(): the last
	   stop's card and its (now-absolute) connector landed at the exact
	   same `top`, i.e. genuinely overlapping, not just visually close.
	   Every other stop still has its connector in normal flow, so this
	   margin only needs adding back for these two. */
	.about-journey__stop:first-child .about-journey__stop-upper .about-journey__card {
		margin-bottom: 36px;
	}

	.about-journey__stop:last-child .about-journey__stop-lower .about-journey__card {
		margin-top: 36px;
	}
}

/* Icon sits inline right before the year/period, not stacked above it in
   its own boxed background -- matches the Figma dev-mode spec exactly. */

.about-journey__card-meta {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
}

.about-journey__card-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}

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

.about-journey__card-period {
	font-family: 'Geist', sans-serif;
	font-weight: 700;
	font-size: 16px;
	line-height: 18px;
	letter-spacing: 0.03em;
	color: var(--about-muted);
}

.about-journey__card-title {
	font-family: 'Geist', sans-serif;
	font-weight: 700;
	font-size: 22px;
	line-height: 28px;
	color: var(--about-ink);
	margin-bottom: 8px;
}

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

/* Only stop 6 ("Complete S/4HANA Transformation Partner") uses this --
   an intro line (.about-journey__card-description above) followed by a
   bulleted list of capabilities, matching the Figma dev-mode spec
   exactly. Every other stop has no list_items, so this never renders
   for them. */
.about-journey__card-list {
	margin-top: 8px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.about-journey__card-list li {
	position: relative;
	padding-left: 16px;
	font-family: 'Geist', sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 26px;
	color: var(--about-muted);
}

.about-journey__card-list li::before {
	content: '';
	position: absolute;
	left: 4px;
	top: 12px;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background-color: var(--about-cyan);
}

@media (max-width: 1024px) {
	.about-journey__stops {
		flex-direction: column;
		gap: 32px;
	}

	.about-journey__line {
		display: none;
	}

	.about-journey__stop {
		flex-direction: row;
		align-items: flex-start;
		gap: 16px;
	}

	.about-journey__stop-upper,
	.about-journey__stop-lower {
		height: auto;
		min-height: 0;
		flex-direction: row;
		align-items: flex-start;
		justify-content: flex-start;
		padding: 0;
	}

	.about-journey__connector {
		display: none;
	}

	.about-journey__stop-upper {
		display: none;
	}

	.about-journey__stop--top .about-journey__stop-upper {
		display: flex;
	}

	.about-journey__stop--top .about-journey__stop-lower {
		display: none;
	}

	.about-journey__dot {
		/* Desktop DOM order is upper-card, dot, lower-card so the dot sits
		   between them on the timeline; collapsed to a single-column list,
		   that would put the dot after the card text for "top" stops (only
		   "bottom" stops render their card after the dot). Forcing it first
		   in every row keeps it consistently leading, regardless of which
		   half of the pair actually has content here. */
		order: -1;
		margin-top: 4px;
	}

	.about-journey__card {
		/* Desktop's clamp()/overflow-past-its-column trick doesn't apply
		   to this stacked single-column layout -- the card just fills
		   the remaining row width next to the dot/icon normally. */
		width: auto;
		flex: 1 1 auto;
		min-width: 0;
	}
}

/* ==========================================================================
   Mission & Vision
   ========================================================================== */

.about-mv {
	background-color: var(--about-tint);
}

.about-mv__heading {
	text-align: center;
	margin-bottom: 60px;
	font-family: 'Geist', sans-serif;
	font-weight: 700;
	font-size: 48px;
	line-height: 58px;
	letter-spacing: 0;
	color: var(--about-ink);
}

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

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

.about-mv__grid {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	/* Stretch (not center) so both cards match the taller one's height
	   instead of each sizing to its own content -- the connector below
	   overrides this back to centered for itself via align-self. */
	align-items: stretch;
	/* Kept inside the standard 1280px section width (not widened) --
	   smaller than the connector's own comfortable spacing (60px) so each
	   card gets more of that fixed width instead. */
	gap: 40px;
}

.about-mv__card {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 40px;
	border-radius: 16px;
}

.about-mv__card--mission {
	background-color: #ffffff;
	border: 1px solid var(--about-line);
}

.about-mv__card--vision {
	background: linear-gradient(180deg, #0d1830 0%, #0a1020 100%);
}

.about-mv__card-meta {
	display: flex;
	align-items: center;
	gap: 12px;
}

.about-mv__card-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	flex-shrink: 0;
	border-radius: 8px;
}

.about-mv__card--mission .about-mv__card-icon {
	background-color: #e6f7fe;
	color: #01AEF0;
}

.about-mv__card--vision .about-mv__card-icon {
	background: linear-gradient(135deg, rgba(0, 65, 149, 0.08) 0%, rgba(1, 174, 240, 0.06) 100%);
	color: var(--about-cyan);
}

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

.about-mv__card-eyebrow {
	display: block;
	font-family: 'Geist', sans-serif;
	font-weight: 700;
	font-size: 12px;
	line-height: 18px;
	letter-spacing: 0.08em;
	color: var(--about-cyan);
}

.about-mv__card-heading {
	font-family: 'Geist', sans-serif;
	font-weight: 700;
	font-size: 22px;
	line-height: 28px;
}

.about-mv__card--mission .about-mv__card-heading {
	color: var(--about-ink);
}

.about-mv__card--vision .about-mv__card-heading {
	color: #ffffff;
}

.about-mv__card-text {
	font-family: 'Geist', sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 26px;
}

.about-mv__card--mission .about-mv__card-text {
	color: var(--about-muted);
}

.about-mv__card--vision .about-mv__card-text {
	color: rgba(255, 255, 255, 0.6);
}

.about-mv__card-tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 20px;
}

.about-mv__card-tags li {
	position: relative;
	padding-left: 16px;
	font-family: 'Geist', sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 26px;
}

.about-mv__card-tags li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: var(--about-cyan);
	transform: translateY(-50%);
}

.about-mv__card--mission .about-mv__card-tags li {
	color: var(--about-muted);
}

.about-mv__card--vision .about-mv__card-tags li {
	color: rgba(255, 255, 255, 0.6);
}

.about-mv__connector {
	display: flex;
	align-items: center;
	justify-content: center;
	align-self: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: linear-gradient(135deg, #277eff 0%, #00c2e0 100%);
	box-shadow: 0 0 16px rgba(0, 194, 224, 0.35);
	color: #ffffff;
	z-index: 1;
}

.about-mv__connector svg {
	width: 16px;
	height: 16px;
}

@media (max-width: 1024px) {
	.about-mv__grid {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.about-mv__connector {
		display: none;
	}
}

/* ==========================================================================
   Why Choose KloudData (dark)
   ========================================================================== */

.about-why {
	background-color: var(--about-navy-deep);
}

.about-why__header {
	margin: 0 auto 56px;
	text-align: center;
}

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

@media (max-width: 1024px) {
	.about-why__heading {
		font-size: 30px;
		line-height: 1.2;
	}
}

@media (max-width: 640px) {
	.about-why__heading {
		font-size: 30px;
		line-height: 1.2;
	}
}

.about-why__subheading {
	margin-top: 16px;
	font-family: 'Geist', sans-serif;
	font-weight: 400;
	font-size: 17px;
	line-height: 27px;
	color: rgba(255, 255, 255, 0.65);
}

.about-why__layout {
	display: grid;
	grid-template-columns: 1fr;
}

.about-why__layout--with-media {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 24px;
	align-items: stretch;
}

.about-why__media {
	border-radius: 24px;
	overflow: hidden;
}

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

.about-why__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	/* Without this, each grid ROW sizes to its own tallest card, so a row
	   with longer titles/descriptions ends up visibly taller than the
	   other row -- cards are equal-height within a row by default, but not
	   across the whole grid. Forcing every row to the same height makes
	   all 6 cards match regardless of which row has more content. */
	grid-auto-rows: 1fr;
	gap: 20px;
}

.about-why__layout--with-media .about-why__grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.about-why__card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 24px;
	border-radius: 16px;
	background-color: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.08);
	box-shadow: 0 2px 20px rgba(0, 0, 0, 0.04);
	overflow: hidden;
}

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

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

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

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

/* Decorative accent nub sitting on the card's bottom edge -- Figma's
   "Horizontal Divider": partial-width, rounded top corners only, low
   opacity. Purely visual, no content. */
.about-why__card-accent {
	position: absolute;
	left: 24px;
	bottom: 0;
	width: 200px;
	max-width: calc(100% - 48px);
	height: 4px;
	border-radius: 100px 100px 0 0;
	background-color: rgba(1, 174, 240, 0.25);
}

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

	.about-why__layout--with-media {
		grid-template-columns: 1fr;
	}

	.about-why__media {
		height: 320px;
	}
}

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

/* ==========================================================================
   KloudData Leadership
   ========================================================================== */

.about-leadership {
	background-color: var(--about-tint);
}

.about-leadership__header {
	margin-bottom: 56px;
	text-align: center;
}

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

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

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

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

.about-leadership__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	/* Matches .about-why__grid's fix (see above): without this, a row with
	   longer titles (e.g. "President & Head of Delivery and Operations")
	   renders taller than the other row, so the 6 cards don't read as a
	   uniform 3x2 grid even though each row is internally equal-height. */
	grid-auto-rows: 1fr;
	gap: 24px;
}

.about-leadership__card {
	display: flex;
	flex-direction: column;
	padding: 24px;
	border-radius: 16px;
	background-color: rgba(255, 255, 255, 0.8);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.1);
}

.about-leadership__card-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 8px;
	background: linear-gradient(103.84deg, #004195 0%, #01aef0 100%);
	color: #ffffff;
	margin-bottom: 16px;
}

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

.about-leadership__card-eyebrow {
	display: flex;
	align-items: center;
	gap: 6px;
	font-family: 'Geist', sans-serif;
	font-weight: 600;
	font-size: 14px;
	line-height: 12px;
	letter-spacing: 0.07em;
	color: var(--about-navy);
}

.about-leadership__card-eyebrow-dot {
	flex-shrink: 0;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: var(--about-navy);
}

.about-leadership__card-name {
	margin-top: 10px;
	font-family: 'Geist', sans-serif;
	font-weight: 700;
	font-size: 22px;
	line-height: 28px;
	color: var(--about-ink);
}

.about-leadership__card-title {
	margin-top: 4px;
	font-family: 'Geist', sans-serif;
	font-weight: 400;
	font-size: 14px;
	line-height: 18px;
	color: var(--about-ink);
}

.about-leadership__card-description {
	margin-top: 12px;
	font-family: 'Geist', sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 26px;
	color: var(--about-muted);
}

@media (max-width: 900px) {
	.about-leadership__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

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

/* ==========================================================================
   Credentials & Commitments -- shares .about-partnership's header+list
   pattern (same markup shape, different content) but tinted so the two
   don't read as the exact same section repeated on the page.
   ========================================================================== */

.about-credentials {
	/* White (not the tinted blue used by the Leadership section right
	   above it) so the two sections don't blend into one another with no
	   visible boundary between them. */
	background-color: #ffffff;
}

/* Extra top padding beyond the sitewide 96px (see the generic
   `.page-template-about section` rule) -- this section felt cramped
   against Leadership above it once the backgrounds matched. */
.page-template-about section.about-credentials {
	padding-top: 120px;
}

@media (max-width: 1024px) {
	.page-template-about section.about-credentials {
		padding-top: 80px;
	}
}

@media (max-width: 640px) {
	.page-template-about section.about-credentials {
		padding-top: 60px;
	}
}

.about-credentials__layout {
	display: grid;
	grid-template-columns: minmax(0, 610fr) minmax(0, 610fr);
	/* Vertically centers the credentials list against the left column
	   (heading + description + photo) -- with the default "start", the
	   list sat pinned to the top and looked disconnected once the photo
	   made the left column much taller than the list. */
	align-items: center;
	gap: 60px;
}

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

.about-credentials__content {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.about-credentials__header {
	text-align: left;
}

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

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

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

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

.about-credentials__media {
	border-radius: 24px;
	overflow: hidden;
}

.about-credentials__media img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
}

.about-credentials__list-col {
	padding-top: 4px;
}

.about-credentials__list-label {
	display: block;
	margin-bottom: 24px;
	font-family: 'Geist', sans-serif;
	font-weight: 700;
	font-size: 22px;
	color: #0D1B2E;
}

.about-credentials__list {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.about-credentials__item {
	display: flex;
	align-items: center;
	gap: 16px;
}

.about-credentials__item-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	flex-shrink: 0;
	border-radius: 6px;
	background-color: var(--about-navy);
	color: #ffffff;
}

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

.about-credentials__item-text {
	font-family: 'Geist', sans-serif;
	font-weight: 700;
	font-size: 22px;
	line-height: 28px;
	color: #0D1B2E;
}

@media (max-width: 640px) {
	.about-credentials__item-icon {
		width: 32px;
		height: 32px;
	}

	.about-credentials__item-icon svg,
	.about-credentials__item-icon img {
		width: 18px;
		height: 18px;
	}

	.about-credentials__item-text {
		font-size: 18px;
		line-height: 26px;
	}
}

/* ==========================================================================
   "Move Critical Business Data Without Losing Trust" band -- no longer
   rendered on the page (its field group was deactivated too) after the
   content doc's page-flow revision dropped this section; left in place,
   unused, rather than deleted.
   ========================================================================== */

.about-data-trust {
	background: linear-gradient(90deg, #ffffff 0%, var(--about-tint) 100%);
	overflow: hidden;
}

.about-data-trust__inner {
	position: relative;
	display: flex;
	align-items: center;
}

.about-data-trust__content {
	max-width: 640px;
}

.about-data-trust__heading {
	font-family: 'Geist', sans-serif;
	font-weight: 700;
	font-size: 34px;
	line-height: 1.3;
	color: var(--about-ink);
}

.about-data-trust__text {
	margin-top: 20px;
	font-family: 'Geist', sans-serif;
	font-weight: 400;
	font-size: 15px;
	line-height: 24px;
	color: var(--about-muted);
}

.about-data-trust__graphic {
	position: absolute;
	right: -40px;
	top: 50%;
	transform: translateY(-50%);
	width: 220px;
	height: 220px;
	color: var(--about-tint);
	opacity: 0.9;
}

.about-data-trust__graphic svg {
	width: 100%;
	height: 100%;
}

@media (max-width: 1024px) {
	.about-data-trust__graphic {
		display: none;
	}
}

@media (max-width: 640px) {
	.about-data-trust__heading {
		font-size: 26px;
	}
}

/* ==========================================================================
   Final CTA
   ========================================================================== */

.page-template-about section.about-finalcta {
	padding: 0 0 96px;
}

@media (max-width: 1024px) {
	.page-template-about section.about-finalcta {
		padding-bottom: 64px;
	}
}

@media (max-width: 640px) {
	.page-template-about section.about-finalcta {
		padding-bottom: 48px;
	}
}

.page-template-about section.about-finalcta > .about-finalcta__inner {
	max-width: none;
	margin-inline: auto;
}

.about-finalcta__banner {
	position: relative;
	width: min(var(--about-max), calc(100% - (var(--about-pad-x) * 2)));
	margin: 0 auto;
	border-radius: 26px;
	overflow: hidden;
	background: radial-gradient(circle at 85% 0%, #0d3f7a 0%, #0a1e3d 55%, #060f1f 100%);
	padding: 80px;
	text-align: center;
}

.about-finalcta__banner--has-bg {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.about-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;
}

.about-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);
}

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

.about-btn--secondary {
	color: #ffffff;
background: linear-gradient(103.84deg, #004195 0%, #01AEF0 100%);
}

.about-btn--secondary:hover,
.about-btn--secondary:focus-visible {
	border-color: #ffffff;
}

.about-btn--secondary .about-btn__icon {
	background-color: #fff;
	color: #004195;
}

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

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

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

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