/*
 * WordPress glue for the original design.
 *
 * styles.css and extras.css are the static demo's stylesheets, kept byte-for-byte
 * so the design stays diffable against the demo. Everything WordPress needs on
 * top of them lives here: core editor classes the demo never had, and the few
 * places where CMS data (real logo images) replaces the demo's hard-coded text.
 */

/* ---------------------------------------------------------------
 * Brand strip + About panel spacing (client request).
 *
 * - Brand strip on a WHITE background (was the off-white --bg-alt).
 * - Symmetric top/bottom padding so the strip reads as one even band.
 * - A moderate white gap before the blue About panel (earlier it was
 *   flush; the client now wants a little breathing room). transform-origin
 *   stays at the top so the panel's scroll-grow doesn't reveal white above.
 * - Rounded corners on all four sides (client request). The demo kept the
 *   full-bleed panel square; rounding it lets the white .x-about base show
 *   through the corner notches, reading as one big card. Set here (wp.css
 *   loads after extras.css) so it beats the base and reduced-motion
 *   border-radius:0 rules.
 * - Side gaps too (client request): the demo's scroll-grow settled the panel
 *   full-bleed (edge to edge); padding-inline on .x-about holds a consistent
 *   margin so it lands as an inset floating card, not a full-width band. The
 *   grow animation still runs — it just grows into the inset width.
 * ------------------------------------------------------------- */
.x-brand-strip { background: #fff; padding: 30px 0; }
@media (max-width: 700px) { .x-brand-strip { padding: 22px 0; } }
.x-about { padding-top: 40px; padding-inline: clamp(16px, 4vw, 56px); }
.x-about-panel { transform-origin: center top; border-radius: 24px; }

/* ---------------------------------------------------------------
 * Wider content container (client request).
 *
 * The demo capped content at 1200px; now that the About panel sits as a wide
 * inset card, 1200 read narrow beside it. Bump the shared --container token to
 * 1320 (≈ the About panel's width on a 1440 screen) so every .container block —
 * nav, all sections, the footer, and the panel's own copy — reads wider and
 * sits comfortably with the panel. Overriding the token here (wp.css loads
 * after styles.css) keeps styles.css byte-identical to the demo, and every
 * var(--container) consumer picks it up.
 * ------------------------------------------------------------- */
:root { --container: 1320px; }

/* ---------------------------------------------------------------
 * "Ready to Go Global?" CTA — real container-port photo behind frosted
 * glass (client request: a genuine photo from the library, blurred, with
 * a matte "膜玻璃" film).
 *
 * PERF — this replaces the previous backdrop, which drifted two blurred,
 * mix-blend-mode:screen layers on infinite animations. Scaling a blurred +
 * blended layer forces the compositor to re-rasterise it every frame, which
 * was the cause of the scroll jank felt around this band. The new version
 * is fully static and cheap:
 *   • the photo is PRE-BLURRED at build time (a 12 KB WebP) — no runtime
 *     blur() filter, no mix-blend-mode, no backdrop-filter, no animation;
 *   • translateZ(0) promotes it to its own layer so it rasterises once and
 *     only composites on scroll.
 *   ::before — the pre-blurred port photo (dimmed for text contrast).
 *   ::after  — the frosted-glass film: a top scrim for the title, a navy
 *              tint (darkest on the left, under the copy), a cool corner
 *              glow, a faint diagonal sheen, and a bottom vignette that
 *              grounds the glass panel into the footer.
 * ------------------------------------------------------------- */
.cta-footer { position: relative; overflow: hidden; isolation: isolate; background: #0b2743; }
.cta-footer::before {
	content: "";
	position: absolute;
	inset: 0;
	background: url("../assets/img/cta-port.webp?v=2") center 42% / cover no-repeat;
	filter: saturate(1.05) brightness(.85);
	transform: translateZ(0);
	z-index: 0;
	pointer-events: none;
}
.cta-footer::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background:
		linear-gradient(180deg, rgba(6,18,36,.58) 0%, rgba(6,18,36,.12) 26%, rgba(6,18,36,0) 42%),
		linear-gradient(100deg, rgba(6,19,38,.90) 0%, rgba(8,25,48,.72) 42%, rgba(9,32,58,.48) 100%),
		radial-gradient(120% 120% at 84% -6%, rgba(92,162,226,.20), rgba(92,162,226,0) 52%),
		linear-gradient(112deg, rgba(255,255,255,0) 42%, rgba(255,255,255,.055) 50%, rgba(255,255,255,0) 58%);
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,.14),
		inset 0 -150px 120px -70px rgba(4,13,28,.94);
}
.cta-footer .container,
.cta-footer > .container { position: relative; z-index: 1; }

/* ---------------------------------------------------------------
 * Footer — layered depth (client request "页脚层次感"). The flat navy fill
 * becomes a distinct stacked plane below the CTA: a vertical navy gradient
 * (darker at the base to ground the page), a soft top-left ambient glow, and
 * a crisp gold-tinted top hairline so the footer reads as lifted over the
 * glass band above. All paint-time — no scroll cost.
 * ------------------------------------------------------------- */
.x-foot { position: relative; background: linear-gradient(180deg, #0a2742 0%, #071b31 60%, #05152a 100%); }
.x-foot::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(74% 66% at 14% -16%, rgba(86,158,228,.20), rgba(86,158,228,0) 60%);
}
.x-foot::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 1px;
	pointer-events: none;
	background: linear-gradient(90deg, transparent, rgba(255,255,255,.16) 24%, rgba(233,169,60,.55) 50%, rgba(255,255,255,.16) 76%, transparent);
}
.x-foot > .container { position: relative; z-index: 1; }
.x-foot__h { color: rgba(255,255,255,.52); }
.x-foot__col a { color: rgba(255,255,255,.74); }
.x-foot .x-foot__bottom { border-top: 1px solid rgba(255,255,255,.10); margin-top: 54px; }
/* Brand column stacks logo over the CTA link — the blurb that used to separate
   them was removed, so without this they'd sit side by side. */
.x-foot__brand { display: flex; flex-direction: column; align-items: flex-start; }
/* Bigger footer logo (client request). */
.x-foot__brand .nav-logo__mark,
.x-foot__brand .nav-logo img { width: 54px; height: 54px; }
.x-foot__brand .nav-logo__cn { font-size: 19px; }
.x-foot__brand .nav-logo__en { font-size: 18px; letter-spacing: .04em; text-indent: .04em; }
/* "Talk to our go-global expert" → a refined outlined gold pill that fills on hover
   (client request — nicer than a bare text link). */
.x-foot__cta {
	margin-top: 26px;
	padding: 11px 22px;
	border: 1.5px solid rgba(233, 169, 60, .5);
	border-radius: 999px;
	gap: 10px;
	font-size: .95rem;
	transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.x-foot__cta:hover { background: var(--gold); border-color: var(--gold); color: var(--navy); }

/* ---------------------------------------------------------------
 * Eyebrows without the leading gold dash (client request).
 *
 * .x-eyebrow::before draws a 24×2px gold rule before every section
 * label (我们的能力 / 关于我们 / 客户成功 …). Dropping it site-wide keeps
 * the taglines consistent — removing it from one section only would
 * clash with the others.
 * ------------------------------------------------------------- */
/* Eyebrow kicker → no background, just gold uppercase text with a small gold dot
   (client request: drop the pill, keep it clean but designed). The old gold dash
   ::before is repurposed as the dot. Bright gold on dark section heads. */
.x-eyebrow {
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	color: var(--gold-dark);
	gap: 9px;
	margin-bottom: 14px;
}
.x-eyebrow::before {
	display: inline-block;
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--gold);
	flex: none;
}
.section--navy .x-eyebrow,
.section--royal .x-eyebrow,
.section-head--light .x-eyebrow { color: var(--gold); }

/* ---------------------------------------------------------------
 * Brand strip: one uniform logo height (client request).
 *
 * The demo gave icon+wordmark lockups (KAILAS, KAYOU) a .x-brand--tall
 * boost to 40px while everything else sat at 30px, so those two stuck
 * up above the rest. Drop the exception — every logo is the same
 * height and vertically centred; width follows each logo's own aspect,
 * which is normal for a scrolling logo wall. object-fit keeps them
 * from distorting, and the greyscale/opacity treatment is untouched.
 * ------------------------------------------------------------- */
.x-brand img,
.x-brand--tall img {
	height: 30px;
	width: auto;
	max-width: 220px;
	object-fit: contain;
}
@media (max-width: 700px) {
	.x-brand img,
	.x-brand--tall img {
		height: 24px;
		max-width: 150px;
	}
}

/* ---------------------------------------------------------------
 * Partner marquee: the demo used styled text wordmarks; the CMS
 * stores real logo images, so give those images the sizing the
 * text used to get from its font rules.
 * ------------------------------------------------------------- */
.partner-logo img {
	display: block;
	width: auto;
	height: 38px;
	max-width: 190px;
	object-fit: contain;
	filter: grayscale(1);
	opacity: .72;
	transition: filter .3s ease, opacity .3s ease;
}

/* Logos stay monochrome on hover (client request — no colour reveal); only a
   subtle opacity lift remains as feedback. Covers the partner marquee here and
   the trusted-brands strip (overriding extras.css) just below. */
.x-marquee:hover .partner-logo img,
.partner-logo:hover img {
	opacity: 1;
}
.x-marquee--brands:hover .x-brand img { filter: grayscale(1); }
/* Tighten the trusted-brands marquee — logos were too far apart (client request). */
.x-marquee--brands .x-marquee__group { gap: 64px; padding-right: 64px; }
/* Stats-only About panel: drop the .stats 56px top margin (it used to clear the
   removed About heading/paragraph) so the numbers sit vertically centred, not low. */
.x-about--stats .stats { margin-top: 0; }

@media (max-width: 600px) {
	.partner-logo img { height: 28px; }
}

/* A QR card with no back-face copy must not flip to an empty side. */
.x-qr-flip--static .x-qr-flip__inner { transform: none !important; }

/* ---------------------------------------------------------------
 * Solution cards, rest state.
 *
 * The ≥1024px accordion in extras.css gives the card body a fixed
 * ~300px text column (wider than a collapsed 273px card) so nothing
 * re-wraps mid-hover. The demo got away with it because its titles
 * carried a hard <br> ("Global Retail<br>Solutions"); CMS post titles
 * don't, so at rest a long title ran under the card's overflow:hidden
 * edge. Constrain the column only while no card is hovered — the
 * hover animation still gets its fixed width.
 * ------------------------------------------------------------- */
@media (min-width: 1024px) {
	.solutions-grid:not(:hover) .solution-card__body { width: 100%; }
}

/* ---------------------------------------------------------------
 * Card titles — consistent line counts (client request).
 *
 * - Solution cards: every title on ONE line. The demo forced a hard <br>
 *   ("Global Retail<br>Solutions"); CMS titles carry none, so the longest
 *   ("Global Payment Solutions") wrapped while the others didn't. nowrap + a
 *   slightly smaller display size fits all four on one line at the card width;
 *   ellipsis guards a future over-long title. One line stays well under the
 *   hover-accordion's 4em max-height, so the expand/collapse still works.
 * - Insight / News cards: cap the title at two tidy lines (the longest ran four
 *   and broke the row rhythm) — same clamp the case captions already use.
 * ------------------------------------------------------------- */
.solution-card__title {
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	font-size: clamp(15px, 1.3vw, 18px);
}
.news-card__title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
}

/* ---------------------------------------------------------------
 * Top bar (Customizer: 外观 → 自定义 → 顶部信息条).
 *
 * Rendered INSIDE .site-nav so the header stays one fixed block. It scrolls
 * away with .is-scrolled (main.js already toggles that at 60px), which hands
 * the height back to the page once the visitor starts reading.
 * ------------------------------------------------------------- */
:root { --topbar-h: 36px; }

.x-topbar {
	height: var(--topbar-h);
	overflow: hidden;
	font-size: 12.5px;
	letter-spacing: .01em;
	transition: height .35s var(--ease), opacity .3s var(--ease);
}

.x-topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	height: var(--topbar-h);
}

.x-topbar__msg {
	margin: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.x-topbar__meta {
	display: flex;
	align-items: center;
	gap: 20px;
	flex: none;
}

.x-topbar__item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
	opacity: .9;
	transition: opacity .2s ease;
}
.x-topbar__item:hover { opacity: 1; }
.x-topbar__item svg { flex: none; opacity: .75; }

.x-topbar__langs {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-weight: 600;
}
.x-topbar__langs a { opacity: .65; transition: opacity .2s ease; }
.x-topbar__langs a:hover,
.x-topbar__langs a.is-active { opacity: 1; }
.x-topbar__langs a + a { border-left: 1px solid currentColor; padding-left: 9px; }

/* --- colour variants --- */
.x-topbar--ink   { background: #0a2540; color: rgba(255, 255, 255, .88); }
.x-topbar--gold  { background: var(--gold); color: #10233c; }
.x-topbar--light { background: #f2f4f7; color: #45506a; border-bottom: 1px solid rgba(10, 37, 64, .08); }
.x-topbar a { color: inherit; }

/* --- collapse on scroll --- */
.site-nav.is-scrolled .x-topbar--collapse { height: 0; opacity: 0; }

@media (max-width: 900px) {
	.x-topbar__msg { display: none; }
}
@media (max-width: 768px) {
	.x-topbar--no-mobile { display: none; }
	.x-topbar__inner { justify-content: flex-end; gap: 16px; }
	.x-topbar__item span { display: none; }
	.x-topbar__item svg { width: 15px; height: 15px; }
}

/* ---------------------------------------------------------------
 * First section must clear the fixed nav.
 *
 * extras.css does this with `.site-nav + section:not(.hero)`, which relies on
 * the section being the header's immediate sibling. WordPress wraps the page
 * in <main id="main">, breaking that adjacency, so inner pages fell back to
 * the generic 72px and sat only 16px below an 80px nav. Re-apply the intended
 * clearance; full-bleed heroes still start at the very top.
 * ------------------------------------------------------------- */
#main > section:first-child:not(.hero):not(.x-phero) {
	padding-top: calc(var(--nav-h) + 40px);
}

/* The top bar sits above the nav inside the same fixed header, so the header is
   that much taller — inner pages need the extra clearance too. */
.has-topbar #main > section:first-child:not(.hero):not(.x-phero) {
	padding-top: calc(var(--nav-h) + var(--topbar-h) + 40px);
}
@media (max-width: 768px) {
	/* …unless the bar is hidden on phones, where the nav is flush to the top. */
	body.topbar-no-mobile #main > section:first-child:not(.hero):not(.x-phero) {
		padding-top: calc(var(--nav-h) + 40px);
	}
}

/* ---------------------------------------------------------------
 * Breadcrumb on light sections.
 *
 * The demo only ever printed .x-page-crumb over a navy/royal hero, so it is
 * styled white. WordPress prints a trail on every inner view — including the
 * white ones — where white on white is invisible. Give those the ink variant;
 * the dark heroes keep the original treatment.
 * ------------------------------------------------------------- */
.section:not(.section--navy):not(.section--royal) .x-page-crumb {
	color: rgba(10, 37, 64, .58);
}
.section:not(.section--navy):not(.section--royal) .x-page-crumb a {
	color: rgba(10, 37, 64, .82);
}
.section:not(.section--navy):not(.section--royal) .x-page-crumb a:hover {
	color: var(--gold);
}

/* ---------------------------------------------------------------
 * WordPress core classes the static demo never needed.
 * ------------------------------------------------------------- */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	top: -60px;
	left: 16px;
	z-index: 999;
	padding: 10px 18px;
	background: #0b1b3a;
	color: #fff;
	border-radius: 4px;
	font-size: 14px;
	transition: top .2s ease;
}
.skip-link:focus { top: 12px; }

.alignleft  { float: left;  margin: 0 1.5em 1em 0; }
.alignright { float: right; margin: 0 0 1em 1.5em; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.alignwide, .alignfull { max-width: none; }

.wp-caption { max-width: 100%; }
.wp-caption-text,
.wp-element-caption {
	margin-top: .6em;
	font-size: 14px;
	color: #6b7280;
}

.sticky, .gallery-caption, .bypostauthor { /* required by the theme check */ }

/* Editor content inside page.php / single.php */
.entry-content img { max-width: 100%; height: auto; }
.entry-content figure { margin: 2em 0; }
.entry-content ul, .entry-content ol { padding-left: 1.4em; margin: 1em 0; }
.entry-content li { margin: .4em 0; }
.entry-content blockquote {
	margin: 1.8em 0;
	padding-left: 1.2em;
	border-left: 3px solid #d4a13a;
	color: #4b5563;
}
.entry-content a { text-decoration: underline; }

/* Pagination shared by the archives */
.x-pagination {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-top: 56px;
	flex-wrap: wrap;
}
.x-pagination .page-numbers {
	min-width: 42px;
	padding: 10px 14px;
	text-align: center;
	border: 1px solid rgba(11, 27, 58, .16);
	border-radius: 999px;
	font-size: 14px;
	color: #0b1b3a;
}
.x-pagination .page-numbers.current,
.x-pagination .page-numbers:hover {
	background: #0b1b3a;
	border-color: #0b1b3a;
	color: #fff;
}

/* ---------------------------------------------------------------
 * "More Success Stories" related cards (audit fix).
 *
 * The related section on single case/solution/insight pages shipped with NO CSS,
 * so the brand name ran straight into the caption ("CARPENTER TANCraftsmanship…")
 * and the images stacked full-bleed. Style it as a tidy 3-up card grid matching
 * the case cards; the brand becomes a small eyebrow above a two-line caption.
 * ------------------------------------------------------------- */
.x-related { background: var(--bg-alt, #F4F7FB); padding-block: clamp(48px, 6vw, 84px); }
.x-related__h { font-family: var(--font-display); font-weight: 800; color: var(--ink); font-size: clamp(24px, 3vw, 34px); text-align: center; margin: 0 0 40px; }
.x-related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.x-related-card { display: flex; flex-direction: column; background: #fff; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); text-decoration: none; transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.x-related-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.x-related-card__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.x-related-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.x-related-card:hover .x-related-card__media img { transform: scale(1.05); }
.x-related-card__body { display: flex; flex-direction: column; gap: 9px; padding: 20px 22px 24px; }
.x-related-card .case-brand { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; font-family: var(--font-display); }
.x-related-card .case-brand .cn { font-weight: 700; font-size: 14px; color: var(--ink); }
.x-related-card .case-brand .en { font-weight: 700; font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--gold-dark); }
.x-related-card__cap { font-family: var(--font-display); font-weight: 600; font-size: 15px; line-height: 1.5; color: var(--ink); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
@media (max-width: 900px) { .x-related-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .x-related-grid { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------
 * Mobile overflow fixes (audit).
 * - Solution index-row copy: drop the 46ch cap on phones so long CJK lines wrap
 *   inside the viewport instead of clipping off the right edge.
 * - CTA QR pair: keep it within the viewport and stop the gold caption bubble
 *   (width:max-content; max-width:128%) from spilling past the edge on phones.
 * ------------------------------------------------------------- */
@media (max-width: 820px) {
	.x-sol-row__desc { max-width: 100%; }
}
@media (max-width: 760px) {
	.x-qr-pair { max-width: 100%; }
	.x-qr-bubble { max-width: 100%; }
}

/* ---------------------------------------------------------------
 * About stats — icon-led, bigger numbers, no dividers (client request).
 *
 * Each stat becomes an icon badge over a larger gold number over its label; the
 * vertical divider rules are dropped. Desktop keeps three centred columns;
 * phones switch to a clean stacked list with the icon to the left of each
 * number + label (the demo's 2-col mobile grid left an orphan third stat).
 * ------------------------------------------------------------- */
.stat + .stat::before { display: none; }
.stats--3 { max-width: 900px; gap: 20px 44px; }
.stat__icon { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 18px; background: rgba(233, 169, 60, .15); color: var(--gold); margin-bottom: 10px; }
.stat__icon svg { width: 28px; height: 28px; }
.stat__num { font-size: clamp(42px, 5.2vw, 66px); font-weight: 800; line-height: 1; }
.stat__label { font-size: .95rem; margin-top: 5px; }
.section:not(.section--navy):not(.section--royal) .stat__icon { background: var(--blue-soft); color: var(--blue); }
@media (max-width: 560px) {
	.stats, .stats--2, .stats--3, .stats--4 { grid-template-columns: 1fr; gap: 18px; max-width: 300px; }
	.stat { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 16px; text-align: left; }
	.stat__icon { grid-row: 1 / 3; margin-bottom: 0; width: 50px; height: 50px; }
	.stat__num { grid-column: 2; font-size: 40px; }
	.stat__label { grid-column: 2; margin-top: 2px; }
}
/* Stats-only About panel (heading/paragraph/button removed) + 4-up row. */
.x-about--stats .x-about-panel {
	padding-block: clamp(30px, 3.6vw, 46px);
	background:
		radial-gradient(120% 120% at 82% 12%, rgba(14, 110, 184, .38), rgba(14, 110, 184, 0) 55%),
		linear-gradient(158deg, #08213b 0%, #0b3a63 48%, #05548f 100%);
}
/* Animated premium "mesh" gradient (client request "动态的高级渐变"). Soft colour
   blobs drift on their OWN GPU layers via transform only — no blur, no blend-mode,
   no background-position animation → fully composited, zero repaint, zero scroll
   jank. Two pseudo-layers at different durations never re-sync, so it feels organic.
   Frozen under prefers-reduced-motion. */
.x-about--stats .x-about-panel::before,
.x-about--stats .x-about-panel::after {
	content: "";
	position: absolute;
	inset: -30%;
	z-index: 0;
	pointer-events: none;
	will-change: transform;
}
.x-about--stats .x-about-panel::before {
	background:
		radial-gradient(38% 48% at 24% 34%, rgba(52, 150, 230, .55), rgba(52, 150, 230, 0) 62%),
		radial-gradient(34% 44% at 76% 66%, rgba(7, 26, 52, .70), rgba(7, 26, 52, 0) 60%);
	animation: x-mesh-a 26s ease-in-out infinite alternate;
}
.x-about--stats .x-about-panel::after {
	background:
		radial-gradient(30% 40% at 60% 20%, rgba(20, 130, 190, .48), rgba(20, 130, 190, 0) 60%),
		radial-gradient(42% 50% at 30% 84%, rgba(5, 60, 110, .55), rgba(5, 60, 110, 0) 58%);
	animation: x-mesh-b 34s ease-in-out infinite alternate;
}
@keyframes x-mesh-a {
	from { transform: translate3d(-4%, -3%, 0) scale(1.05); }
	to   { transform: translate3d(5%, 4%, 0) scale(1.18); }
}
@keyframes x-mesh-b {
	from { transform: translate3d(4%, 3%, 0) scale(1.12); }
	to   { transform: translate3d(-5%, -4%, 0) scale(1.02); }
}
.x-about--stats .x-about-panel > .container { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) {
	.x-about--stats .x-about-panel::before,
	.x-about--stats .x-about-panel::after { animation: none; }
}
.stats--4 { max-width: 1080px; gap: 20px 32px; margin-inline: auto; }
/* About stats: icons with NO badge background — just the bare gold glyph, larger
   (client request). Unscoped so the badge is gone at every breakpoint; the desktop
   size is bumped again inside the min-561 block below. */
.x-about--stats .stat__icon { background: none; border: 0; border-radius: 0; width: auto; height: auto; margin-bottom: 6px; }
.x-about--stats .stat__icon svg { width: 34px; height: 34px; }
/* About panel: smaller, tighter, centred number row (client request "缩小 + 居中").
   Desktop-only so the ≤560px stacked list keeps its own tuned sizing. */
@media (min-width: 561px) {
	.x-about--stats .stats--4 { max-width: 900px; gap: 20px 28px; }
	.x-about--stats .stat__num { font-size: clamp(32px, 3.4vw, 48px); }
	.x-about--stats .stat__icon svg { width: 44px; height: 44px; }
	.x-about--stats .stat__label { font-size: .9rem; }
}

/* ---------------------------------------------------------------
 * Our Team page — rebuilt in the homepage style (light section, gold-dot
 * eyebrow, homepage-style "person" cards: portrait/monogram + name + gold
 * role + bio, with the same rounded/shadow/hover-lift as the other cards).
 * ------------------------------------------------------------- */
.x-teampage { background: #fff; }
/* Team lede: use the ample horizontal room so the sentence sits on two lines
   instead of leaving a lonely third line. */
.x-teampage .x-section-lead { max-width: 84ch; }
.x-team-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 28px;
	margin-top: clamp(34px, 4vw, 56px);
}
.x-person {
	display: flex;
	flex-direction: row;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
	transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.x-person:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.x-person__media { position: relative; flex: 1 1 0; align-self: stretch; overflow: hidden; background: var(--blue-soft); }
.x-person__media img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform .55s var(--ease); }
.x-person:hover .x-person__media img { transform: scale(1.045); }
.x-person__media--mono { display: grid; place-items: center; background: linear-gradient(150deg, var(--navy) 0%, var(--royal) 100%); }
.x-person__mono { font-family: var(--font-display); font-weight: 800; font-size: clamp(46px, 6vw, 68px); color: rgba(255, 255, 255, .92); letter-spacing: .02em; }
.x-person__body { display: flex; flex-direction: column; justify-content: flex-start; gap: 5px; padding: 26px; flex: 1 1 0; min-width: 0; }
.x-person__name { font-family: var(--font-display); font-weight: 800; font-size: 1.16rem; line-height: 1.2; color: var(--ink); }
.x-person__name span { display: block; margin-top: 3px; font-size: .82rem; font-weight: 600; color: var(--muted); letter-spacing: .01em; }
.x-person__role { font-family: var(--font-display); font-weight: 700; font-size: .76rem; letter-spacing: .05em; text-transform: uppercase; color: var(--gold-dark); }
.x-person__bio { margin-top: 9px; color: var(--muted); font-size: .95rem; line-height: 1.72; }
@media (max-width: 820px) { .x-team-grid { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; gap: 22px; } }
@media (max-width: 460px) { .x-person { flex-direction: column; } .x-person__media { flex: none; width: 100%; align-self: auto; aspect-ratio: 4 / 5; } }

/* ---------------------------------------------------------------
 * Inner-page header depth (client request "层次感"). On light inner pages the
 * breadcrumb becomes an elevated white pill; pages that carry a .section-head
 * (team / archives / industry) also get a soft tint-to-white header wash and a
 * hairline that separates the header block from the content below. Dark-hero
 * pages (solutions / partners) are untouched.
 * ------------------------------------------------------------- */
.section:not(.section--navy):not(.section--royal) .x-page-crumb {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 7px 15px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 999px;
	box-shadow: 0 1px 3px rgba(16, 46, 79, .05);
	margin-bottom: 22px;
}
.section:has(> .container > .x-page-crumb):has(.section-head) {
	background: linear-gradient(180deg, #ecf2f9 0%, #f3f8fc 170px, #fff 360px);
}
.section:has(> .container > .x-page-crumb) .section-head {
	border-bottom: 1px solid var(--line);
	padding-bottom: clamp(24px, 3vw, 38px);
}

/* ---------------------------------------------------------------
 * Industry / case-study filter tabs (.x-case-filter). Shipped with NO
 * CSS, so on the industry archive the links ran together as one line of
 * plain text ("All Beauty & Cosmetics Consumer Lifestyle Fashion &
 * Apparel"). Style as a centered row of pill tabs sharing the pagination
 * + breadcrumb language; the current industry is a filled navy pill.
 * ------------------------------------------------------------- */
.x-case-filter {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin: clamp(26px, 3vw, 40px) 0 clamp(34px, 4.4vw, 56px);
}
.x-case-filter a {
	display: inline-flex;
	align-items: center;
	padding: 9px 18px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: #fff;
	color: var(--muted);
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: .01em;
	text-decoration: none;
	white-space: nowrap;
	box-shadow: 0 1px 3px rgba(16, 46, 79, .04);
	transition: color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.x-case-filter a:hover {
	color: var(--navy);
	border-color: var(--royal);
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(4, 110, 184, .12);
}
.x-case-filter a.is-active {
	background: linear-gradient(135deg, var(--navy), var(--navy-2));
	border-color: var(--navy);
	color: #fff;
	box-shadow: 0 6px 16px rgba(10, 37, 64, .22);
}
@media (max-width: 620px) {
	.x-case-filter { gap: 8px; }
	.x-case-filter a { padding: 8px 14px; font-size: 13px; }
}

/* ============================================================
   0710 item 2 + client reference logo strip:
   render brand + partner logos as uniform dark-ink wordmarks
   (like the reference), evenly spaced, with soft edge fade.
   ============================================================ */
.x-brand img,
.x-brand--tall img,
.partner-logo img,
.x-partners-cta-logo img {
	filter: grayscale(1) brightness(0);
	opacity: .82;
	transition: opacity .25s ease;
}
.x-marquee--brands:hover .x-brand img,
.x-marquee:hover .partner-logo img,
.partner-logo:hover img {
	filter: grayscale(1);
	opacity: 1;
}
/* uniform sizing */
.x-brand img { height: 30px; max-width: 170px; }
.x-brand--tall img { height: 42px; }
.partner-logo img { height: 30px; width: auto; max-width: 170px; object-fit: contain; }
/* Balance every partner-marquee logo to a uniform visual size — all-caps marks
   read larger, and the Global Blue "BY SHIFT4" tagline eats height, so each gets
   its own tuned height. Logos are trimmed tight (own attachments) so this sticks. */
.partner-logo img[src*="cegid"]      { height: 33px; }
.partner-logo img[src*="adyen"]      { height: 31px; }
.partner-logo img[src*="tekid"]      { height: 28px; }
.partner-logo img[src*="viseo"]      { height: 28px; }
.partner-logo img[src*="klarna"]     { height: 30px; }
.partner-logo img[src*="globalblue"] { height: 44px; max-width: 220px; }
/* even breathing room between marks */
.x-marquee--brands .x-marquee__group { gap: 88px; padding-right: 88px; }
.partners .x-marquee__group { gap: 72px; padding-right: 72px; }
/* KAYOU (cartoon mascot) and Mizan (app badge) are not flat wordmarks:
   brightness(0) collapses them into a solid black blob/box. Desaturate only —
   keep them monochrome to match the wall, but legible (no blob). */
.x-brand img[src*="kayou"],
.x-brand img[src*="mizan"] { filter: grayscale(1); opacity: .9; }
/* Per-brand size balancing: the wall mixes wordmarks, tagline-lockups, and
   square icon badges. A single height makes taglines/icons read small and the
   very-wide URBAN REVIVO get width-capped. Tune each so the primary mark reads
   at a comparable size across the strip. */
.x-brand img[src*="popmart"]   { height: 26px; }
.x-brand img[src*="ur-fixed"]  { height: 22px; max-width: 300px; }
.x-brand img[src*="maogeping"] { height: 38px; }
.x-brand img[src*="icicle"]    { height: 27px; }
.x-brand img[src*="eifini"]    { height: 34px; }
.x-brand img[src*="songmont"]  { height: 27px; }
.x-brand img[src*="kailas"]    { height: 46px; }
.x-brand img[src*="kayou"]     { height: 44px; }
.x-brand img[src*="mm.png"]    { height: 40px; }
.x-brand img[src*="mizan"]     { height: 40px; }
.x-brand img[src*="brand-wm"]  { height: 40px; }
.x-brand img[src*="brand-tan"] { height: 30px; }
/* soft fade at both strip edges so the scrolling strip reads as designed */
.x-brand-strip .x-marquee,
.partners .x-marquee {
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
	        mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
@media (max-width: 700px) {
	.x-brand img, .partner-logo img { height: 24px; }
	.x-brand--tall img { height: 34px; }
	.x-marquee--brands .x-marquee__group,
	.partners .x-marquee__group { gap: 52px; padding-right: 52px; }
}

/* Client request: remove the gold "● WHAT WE OFFER" style section-eyebrow
   labels site-wide (drop these everywhere, not just one — matches the
   design note above about keeping eyebrows consistent across sections). */
.x-eyebrow { display: none !important; }

/* Team photos — guarantee every headshot is exactly the same height:
   a fixed 4:5 box that never stretches (grid cells align to the top so a
   longer bio can't pull one card, and no flex min-height can expand the img). */
.x-team-grid { align-items: stretch; }
.x-person__media { min-height: clamp(196px, 22vw, 244px); }
.x-person__media img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 460px) { .x-person__media { min-height: 0; } }

/* ============================================================
   Solution detail pages (0710 slides 17-34) — reusable section
   components built on existing design tokens so all four pages
   read as one system. Authored inside the post body as
   <section class="section …">…</section> blocks.
   ============================================================ */
.x-sol-page > .section { padding-block: clamp(46px, 6vw, 82px); }
.x-sol-page .container { max-width: 1120px; }
/* centred section heading */
.x-solh { text-align: center; max-width: 780px; margin: 0 auto clamp(26px, 3.4vw, 42px); }
.x-solh__ey { display: inline-block; font-family: var(--font-display); font-weight: 700; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-dark); margin-bottom: 10px; }
.x-solh__t { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.45rem, 2.9vw, 2.15rem); line-height: 1.16; color: var(--ink); }
.x-solh__lead { margin-top: 12px; color: var(--muted); font-size: 1.02rem; line-height: 1.7; }
.section--navy .x-solh__t, .section--royal .x-solh__t { color: #fff; }
.section--navy .x-solh__ey, .section--royal .x-solh__ey { color: var(--gold); }
.section--navy .x-solh__lead, .section--royal .x-solh__lead { color: rgba(255,255,255,.82); }
/* KPI wall */
.x-solkpi { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: clamp(38px, 7vw, 100px); text-align: center; }
.x-solkpi > div { flex: 0 0 auto; }
.x-solkpi__n { font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 4vw, 3rem); line-height: 1; color: var(--gold); }
.x-solkpi__l { margin-top: 8px; font-size: .92rem; color: var(--muted); }
.section--navy .x-solkpi__l, .section--royal .x-solkpi__l { color: rgba(255,255,255,.8); }
/* capability / feature grid (icon tiles) */
.x-solgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 16px; }
.x-soltile { display: flex; flex-direction: column; gap: 9px; padding: 22px 20px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.x-soltile:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(10,37,64,.10); }
.x-soltile__ic { width: 30px; height: 30px; color: var(--gold); flex: none; }
.x-soltile__ic svg { width: 100%; height: 100%; display: block; }
.x-soltile__t { font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; color: var(--ink); line-height: 1.25; }
.x-soltile__d { color: var(--muted); font-size: .92rem; line-height: 1.62; }
.section--navy .x-soltile, .section--royal .x-soltile { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); }
.section--navy .x-soltile__t, .section--royal .x-soltile__t { color: #fff; }
.section--navy .x-soltile__d, .section--royal .x-soltile__d { color: rgba(255,255,255,.72); }
/* compact chip list (labels only) */
.x-solchips { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.x-solchips span { padding: 10px 18px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-weight: 600; font-size: .92rem; color: var(--ink); }
.section--navy .x-solchips span, .section--royal .x-solchips span { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.18); color: #fff; }
/* data-centre / region chips (gold accent) */
.x-soldc span { background: rgba(233,169,60,.16); color: var(--gold-dark); font-weight: 700; border: 0; }
.section--navy .x-soldc span, .section--royal .x-soldc span { color: var(--gold); }
/* highlight trio (One Contract / One Integration / …) */
.x-soltrio { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.x-soltrio__c { padding: 26px 24px; border-radius: var(--radius-lg); background: linear-gradient(150deg, var(--navy) 0%, var(--royal) 100%); color: #fff; }
.x-soltrio__c b { display: block; font-family: var(--font-display); font-weight: 800; font-size: 1.12rem; margin-bottom: 8px; }
.x-soltrio__c span { color: rgba(255,255,255,.82); font-size: .94rem; line-height: 1.62; }
/* video frame reuse (uses existing .x-cegid-video__frame/.x-cegid-video__player) */
.x-sol-video { max-width: 900px; margin: clamp(26px,3vw,40px) auto 0; }
/* closing CTA band */
.x-solcta { text-align: center; }
.x-solcta__t { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.4rem, 2.6vw, 2rem); color: #fff; }
.x-solcta__s { margin-top: 10px; color: rgba(255,255,255,.82); }
.x-solcta__b { margin-top: 22px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.x-sol-hero__cta { margin-top: 22px; display: inline-flex; }
@media (max-width: 560px) { .x-solgrid, .x-soltrio { grid-template-columns: 1fr; } }

/* Inquiry form — "已出海?" radio group (0710 pptx slide 16). */
.x-cform__gg { display: block; margin-bottom: 4px; }
.x-cform__radios { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 8px; }
.x-cform__radio { display: inline-flex; align-items: center; gap: 7px; font-size: .95rem; color: var(--ink); cursor: pointer; }
.x-cform__radio input { accent-color: var(--gold); width: 16px; height: 16px; }

/* Partners page — cards match 0710 pptx slide 14: left-aligned colour logo,
   description below, exclusive partner (Cegid) gets a gold crown badge. */
.x-pcard { position: relative; }
.x-pcard--ex { border-color: rgba(233,169,60,.55); box-shadow: 0 6px 24px rgba(233,169,60,.12); }
.x-pcard__badge { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: rgba(233,169,60,.15); color: var(--gold-dark); font-family: var(--font-display); font-weight: 700; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; }
.x-pcard__badge::before { content: "\265B"; font-size: 1em; line-height: 1; }
.x-pcard__logo { justify-content: flex-start; }
.x-pcard__link { align-self: flex-start; }

/* "Learn more about our solutions / Read our latest news" — recurring bottom
   link cards (0710 pptx slides 21/27/31/34). */
.x-explore { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.x-explore__card { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 26px 30px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.x-explore__card:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(10,37,64,.12); }
.x-explore__t { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.05rem, 1.8vw, 1.3rem); color: var(--ink); line-height: 1.3; }
.x-explore__a { flex: none; width: 40px; height: 40px; border-radius: 999px; background: var(--gold); color: var(--navy); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.1rem; }
@media (max-width: 640px) { .x-explore { grid-template-columns: 1fr; } }

/* Partner card is fully clickable when a partner site URL is set. */
.x-pcard--link { text-decoration: none; color: inherit; cursor: pointer; }
.x-pcard__go { margin-top: auto; font-family: var(--font-display); font-weight: 700; font-size: .82rem; letter-spacing: .03em; color: var(--gold-dark); display: inline-flex; align-items: center; gap: 6px; }
.x-pcard--link:hover .x-pcard__go { gap: 10px; }

/* Global Retail cloud section — world data-centre map (0710 pptx slide 19). */
.x-cloudmap { position: relative; margin: 0 auto clamp(28px,3.5vw,46px); max-width: 1000px; border-radius: var(--radius-lg); overflow: hidden; background: #0f2340; box-shadow: 0 14px 40px rgba(4,13,28,.35); }
.x-cloudmap img { width: 100%; height: auto; display: block; }
.x-cloudmap__cap { position: absolute; left: clamp(18px,3vw,42px); bottom: clamp(16px,3vw,34px); color: #fff; max-width: 60%; }
.x-cloudmap__cap b { display: inline-block; font-family: var(--font-display); font-weight: 800; font-size: clamp(1rem,1.6vw,1.25rem); border-bottom: 2px solid var(--gold); padding-bottom: 6px; margin-bottom: 8px; }
.x-cloudmap__cap span { display: block; color: rgba(255,255,255,.88); font-size: clamp(.85rem,1.2vw,.98rem); line-height: 1.6; }
@media (max-width: 640px) { .x-cloudmap__cap { position: static; max-width: none; padding: 14px 18px; } }

/* Solution page hero — full-bleed lifestyle photo (0710 pptx slide 17/22/28/32). */
.x-sol-hero--photo { position: relative; overflow: hidden; isolation: isolate; }
.x-sol-hero--photo > .container { position: relative; z-index: 2; }
.x-sol-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 0; }
.x-sol-hero__ov { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(6,19,38,.92) 0%, rgba(6,19,38,.78) 42%, rgba(6,19,38,.45) 100%); }

/* Solution page section figures (screenshots / diagrams from 0710 pptx). */
.x-solfig { margin: clamp(24px,3vw,42px) auto 0; max-width: 920px; }
.x-solfig img { width: 100%; height: auto; display: block; border-radius: var(--radius-lg); }
.x-solfig--screen img { box-shadow: 0 20px 54px rgba(10,37,64,.20); }
.x-solfig--diagram { max-width: 540px; }
.x-solfig--diagram img { border-radius: var(--radius-lg); }

/* Decorative section illustrations (transparent globe / map / compass from ppt). */
.x-solfig--illo { max-width: 620px; }
.x-solfig--illo img { border-radius: 0; box-shadow: none; }
.section--navy .x-solfig--illo img, .section--royal .x-solfig--illo img { filter: none; }

/* Center solution figures — beats .entry-content figure{margin:2em 0} specificity. */
.entry-content .x-solfig, .entry-content .x-cloudmap { margin-left: auto; margin-right: auto; }


/* ---- Solution-page partner logo wall — "Our Retail Partners" (0710 pptx s20) ---- */
.x-sollogos { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap: clamp(30px,4.6vw,66px); max-width:1000px; margin: clamp(30px,4vw,50px) auto 0; }
.x-sollogos img { height: clamp(28px,3.2vw,44px); width:auto; max-width:160px; object-fit:contain; filter:grayscale(1); opacity:.72; transition:filter .25s ease, opacity .25s ease; }
.x-sollogos img:hover { filter:none; opacity:1; }

/* ---- Payment-methods badge grid — "Accept Local Payments Anywhere" (0710 pptx s24) ---- */
.x-paygrid { display:grid; grid-template-columns: repeat(auto-fill, minmax(88px,1fr)); gap:12px; max-width:920px; margin: clamp(28px,4vw,48px) auto 0; }
.x-paygrid img { display:block; width:100%; aspect-ratio:119/100; object-fit:cover; border-radius:10px; box-shadow:0 1px 4px rgba(11,26,45,.10); border:1px solid rgba(11,26,45,.06); background:#fff; }
@media (max-width:520px){ .x-paygrid{ grid-template-columns: repeat(auto-fill, minmax(72px,1fr)); gap:9px; } }


/* ---- Solution detail hero — ppt split layout: text left, photo right (0710 s17/22/28/32) ---- */
.x-sol-hero2 { display:grid; grid-template-columns: 1.05fr 1fr; align-items:stretch; background:#fff; }
.x-sol-hero2__text { padding: clamp(46px,7vw,104px) clamp(24px,5vw,76px); display:flex; flex-direction:column; align-items:flex-start; justify-content:center; }
.x-sol-hero2__eyebrow { display:inline-block; border:1.5px solid rgba(11,26,45,.28); color: var(--navy,#0b1a2d); border-radius:999px; padding:7px 18px; font-size:.78rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; margin-bottom: clamp(20px,2.6vw,32px); }
.x-sol-hero2__title { font-family: var(--font-display); font-weight:800; font-size: clamp(2rem,4.4vw,3.5rem); line-height:1.08; color: var(--navy,#0b1a2d); margin:0 0 clamp(16px,2vw,26px); }
.x-sol-hero2__desc { color:#54626f; font-size: clamp(1rem,1.25vw,1.16rem); line-height:1.72; max-width:36em; margin:0 0 clamp(28px,3.4vw,40px); }
.x-sol-hero2__cta { align-self:flex-start; }
.x-sol-hero2__media { position:relative; }
.x-sol-hero2__media img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.x-sol-hero2--solo .x-sol-hero2__text { grid-column:1 / -1; max-width:900px; margin:0 auto; text-align:center; align-items:center; }
@media (max-width: 900px){
  .x-sol-hero2 { grid-template-columns:1fr; }
  .x-sol-hero2__media { min-height: clamp(240px,46vw,360px); order:-1; }
  .x-sol-hero2__text { padding: clamp(36px,7vw,58px) clamp(22px,6vw,44px); }
}


/* ---- Case study facts — Markets (left) + capability bullets (right), tidy 2-col (Image #24) ---- */
/* Case body now holds the facts block (not magazine text) — kill extras.css column-count:2, which was
   flowing the whole .x-casefacts into 2 magazine columns and slicing capability items mid-phrase. */
.x-case-article__body { column-count: 1 !important; column-gap: normal !important; }
.x-casefacts { display:grid; grid-template-columns: minmax(150px,230px) 1fr; gap: clamp(24px,4vw,64px); align-items:start; margin: clamp(28px,4vw,44px) 0; padding-top: clamp(22px,3vw,32px); border-top:1px solid rgba(11,26,45,.12); }
.x-casefacts__label { display:block; font-size:.75rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color: var(--gold,#c8992e); margin-bottom:8px; }
.x-casefacts__val { display:block; font-family:var(--font-display); font-weight:800; font-size: clamp(1.15rem,1.7vw,1.45rem); color: var(--navy,#0b1a2d); line-height:1.25; }
.x-casefacts__caps { list-style:none; margin:0; padding:0; display:grid; gap: clamp(10px,1.4vw,15px); }
.x-casefacts__caps li { position:relative; padding-left:24px; color:#33414f; font-size: clamp(1rem,1.2vw,1.1rem); line-height:1.5; }
.x-casefacts__caps li::before { content:""; position:absolute; left:0; top:.55em; width:8px; height:8px; border-radius:50%; background: var(--gold,#c8992e); }
/* "…" continuation line — signals "and more" without a dot, muted & aligned with the copy above. */
.x-casefacts__caps li.is-more { color: rgba(51,65,79,.5); letter-spacing:.12em; }
.x-casefacts__caps li.is-more::before { display:none; }
@media (max-width:640px){ .x-casefacts{ grid-template-columns:1fr; gap:16px; } }

/* ---- Awards — feature the first (Cegid) full-width, rest in a tidy 2-col grid (Image #25) ---- */
.x-awards__list { display:grid !important; grid-template-columns:1fr 1fr; gap:16px; }
.x-award { align-items:flex-start; }
.x-award--featured { flex-direction:column; align-items:flex-start; gap:6px; background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.30); border-left:4px solid var(--gold,#c8992e); padding:20px 26px; }
.x-award--featured strong { font-size:1.3rem; }
.x-award--featured small { font-size:.98rem; color: rgba(255,255,255,.85); margin-top:2px; }
@media (max-width:640px){ .x-awards__list{ grid-template-columns:1fr !important; } }



/* ---- Solution section spot illustrations (0710 ppt s29/s30/s33) — Market Entry & Localization ---- */
.x-solspot { max-width: clamp(280px,42vw,460px); margin: clamp(22px,3vw,36px) auto clamp(6px,1.5vw,16px); }
.entry-content .x-solspot { margin-left:auto; margin-right:auto; }
.x-solspot img { display:block; width:auto; max-width:100%; max-height:400px; margin:0 auto; }
.section--navy .x-solspot { background:#fff; border-radius: var(--radius-lg,16px); padding: clamp(18px,2.5vw,30px); }


/* Global Retail hero photo — the two shoppers' faces sit near the top of the crop;
   pin the image to the top so faces stay in frame (the floor at the bottom is cropped instead). */
.postid-190 .x-sol-hero2__media img, .postid-40 .x-sol-hero2__media img { object-position: center top; }


/* Cloud-platform section (Global Retail) — let its long title sit on one line on desktop. */
.section--navy:has(.x-cloudmap) .x-solh { max-width: none; }
.section--navy:has(.x-cloudmap) .x-solh__t { white-space: nowrap; }
@media (max-width: 860px) { .section--navy:has(.x-cloudmap) .x-solh__t { white-space: normal; } }


/* Retail-partner logo wall (Global Retail "Our Retail Partners", ppt s20) — 12 colour logos, 6x2 grid. */
.x-sollogos--wall { display:grid; grid-template-columns: repeat(6,1fr); align-items:center; justify-items:center; gap: clamp(24px,3vw,44px) clamp(16px,1.8vw,28px); max-width:1240px; margin:0 auto; }
.x-sollogos--wall img { filter:none; opacity:1; height: clamp(24px,2.8vw,32px); width:auto; max-width:100%; }
@media (max-width:760px){ .x-sollogos--wall{ grid-template-columns: repeat(3,1fr); } }
@media (max-width:430px){ .x-sollogos--wall{ grid-template-columns: repeat(2,1fr); } }


/* ---- Market Entry split sections — illo one side, title+desc+bullets the other, alternating (ppt s29/s30) ---- */
.x-msplit { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(30px,5vw,72px); align-items:center; max-width:1140px; margin:0 auto; }
.x-msplit--rev .x-msplit__media { order:2; }
.x-msplit__media { text-align:center; }
.x-msplit__media img { max-width:100%; max-height:340px; width:auto; height:auto; display:inline-block; }
.x-msplit__t { font-family:var(--font-display); font-weight:800; font-size:clamp(1.5rem,2.5vw,2.05rem); line-height:1.16; color:var(--ink); margin:0 0 14px; }
.x-msplit__d { color:var(--muted); font-size:clamp(1rem,1.2vw,1.12rem); line-height:1.7; margin:0; }
.x-msplit__list { list-style:none; margin:22px 0 0; padding:0; display:grid; gap:12px; }
.x-msplit__list li { position:relative; padding-left:26px; font-size:clamp(1rem,1.2vw,1.12rem); color:var(--ink); line-height:1.4; }
.x-msplit__list li::before { content:""; position:absolute; left:0; top:.48em; width:9px; height:9px; border-radius:50%; background:var(--gold,#c8992e); }
@media (max-width:820px){ .x-msplit { grid-template-columns:1fr; gap:24px; } .x-msplit--rev .x-msplit__media { order:0; } .x-msplit__media img { max-height:260px; } }

/* ---- Primary nav: center the menu in the header (client request).
   Desktop: the .nav-menu wrapper grows and centers its items between the logo
   and the right-hand search/language controls. Mobile (<=900px): the wrapper
   dissolves (display:contents) so items keep flowing into the slide-in panel. ---- */
@media (min-width:901px){
  .site-nav .nav-links { flex:1 1 auto; }
  .site-nav .nav-links .nav-menu { flex:1 1 auto; display:flex; align-items:center; justify-content:center; gap:34px; }
}
@media (max-width:900px){
  .site-nav .nav-links .nav-menu { display:contents; }
}