/* ============================================================
   extras.css — concatenated section-local overrides/helpers
   Auto-assembled from _build/*.css (do not hand-edit).
   ============================================================ */

/* ===== about.css ===== */
/* About section — local helper only (SPEC classes implemented in styles.css). */

/* Center the Contact Us button beneath the copy block. */
.x-about-actions {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

/* ===== case-article.css ===== */
/* case-article.css — helpers for the case-detail article body. */
/* All classes prefixed x-case-article-. Nothing here redefines a SPEC class. */
/* Solid nav, no hero: the .section vertical padding clears the fixed nav. */

.x-case-article {
  max-width: 980px;
  margin-inline: auto;
}

/* --- Article header --- */
.x-case-article__head {
  text-align: center;
  max-width: 820px;
  margin-inline: auto;
}

.x-case-article__kicker {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--blue);
  background: var(--blue-soft);
  padding: 7px 16px;
  border-radius: 999px;
}

.x-case-article__title {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--ink);
  font-size: clamp(26px, 3.6vw, 42px);
  line-height: 1.25;
  letter-spacing: .005em;
  margin-top: 22px;
}

.x-case-article__meta {
  color: var(--muted);
  font-size: clamp(14px, 1.4vw, 16px);
  letter-spacing: .02em;
  margin-top: 18px;
}

/* --- Hero image --- */
.x-case-article__hero {
  margin-top: 44px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.x-case-article__hero img {
  display: block;
  width: 100%;
  height: clamp(280px, 42vw, 520px);
  object-fit: cover;
}

/* --- Body: two-column magazine measure, collapses to one --- */
.x-case-article__body {
  margin-top: 56px;
  column-count: 2;
  column-gap: 56px;
  color: var(--ink);
}
.x-case-article__body > p {
  margin: 0 0 1.5em;
  font-size: 16.5px;
  line-height: 1.85;
  text-align: left;
  break-inside: avoid-column;
  -webkit-column-break-inside: avoid;
}
.x-case-article__body > p:first-child {
  font-size: clamp(18px, 2vw, 21px);
  line-height: 1.7;
  font-weight: 500;
  color: var(--navy);
}

/* --- Back link --- */
.x-case-article__back {
  margin-top: 8px;
  padding-top: 40px;
  border-top: 1px solid var(--line);
  text-align: center;
}

/* Tablet & mobile: single readable column */
@media (max-width: 860px) {
  .x-case-article__body {
    column-count: 1;
    max-width: 680px;
    margin-inline: auto;
    margin-top: 40px;
  }
  .x-case-article__hero { margin-top: 32px; }
}

@media (max-width: 699px) {
  .x-case-article__body > p { text-align: left; }
}

/* ===== hero.css ===== */
/* hero section: no extra helpers needed — all classes implemented in styles.css */

/* ===== industry.css ===== */
/* industry.css — helpers for the Industry case grid (cases.html body). */
/* All classes prefixed x-industry-. Nothing here redefines a SPEC class; */
/* .section, .industry-grid, .industry-card(+__cn/__en), .section-head, .reveal live in styles.css. */

/* One-line intro under the bilingual heading */
.x-industry-intro {
  margin-top: 14px;
  max-width: 720px;
  color: var(--muted, #5B6B7F);
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.7;
}

/* Faint centered hint after the grid (per ref page-07) */
.x-industry-hint {
  margin-top: 48px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--muted, #5B6B7F);
}
.x-industry-dots {
  font-family: var(--font-display, sans-serif);
  font-weight: 700;
  letter-spacing: .12em;
  font-size: clamp(18px, 2.4vw, 24px);
  color: var(--line, #E3E8EF);
  line-height: 1;
}
.x-industry-hint-text {
  font-size: 13px;
  letter-spacing: .04em;
  opacity: .7;
}

@media (max-width: 700px) {
  .x-industry-hint { margin-top: 36px; }
}

/* ===== news.css ===== */
/* news section uses only SPEC classes; no extra helpers needed */

/* ===== partners-cta.css ===== */
/* partners-cta.css — section-local helpers (prefix x-partners-cta-).
   Core .partners, .partners__title, .partners__logos, .partner-logo, .cta-footer*,
   .qr-card, .qr, .btn*, .section*, .container, .reveal classes are implemented in
   styles.css per SPEC; do NOT redefine them here. */

/* --- Partner wordmarks: trademark text treatment in brand colours, matching ref page-10.
   .partner-logo (SPEC) sets the muted base + font-display + hover→colour; these layer the
   distinctive brand hue so the strip reads like real logos, while staying pure text. */
.x-partners-cta-logo {
  position: relative;
  font-weight: 700;
  white-space: nowrap;
}

.x-partners-cta-cegid {
  color: #046EB8;
  font-weight: 600;
  letter-spacing: .01em;
}

.x-partners-cta-adyen {
  color: #0ABF53;
  font-weight: 800;
  letter-spacing: -.01em;
}

.x-partners-cta-viseo {
  color: #16181C;
  font-weight: 700;
  letter-spacing: .22em;
}

.x-partners-cta-capgemini {
  color: #12283C;
  font-weight: 600;
  font-style: italic;
  letter-spacing: -.01em;
  padding-right: .55em;
}

/* small blue dot accent after Capgemini, echoing its mark in the ref */
.x-partners-cta-cap-dot {
  position: absolute;
  top: .12em;
  right: 0;
  width: .42em;
  height: .42em;
  border-radius: 50%;
  background: #2EB6C8;
  box-shadow: .26em .22em 0 -.04em #046EB8;
}

.x-partners-cta-sunmi {
  color: #F26A21;
  font-weight: 800;
  letter-spacing: .04em;
}

.x-partners-cta-tekid {
  color: #17181C;
  font-weight: 800;
  letter-spacing: .02em;
}
.x-partners-cta-tekid span {
  color: #16B6CE;      /* the cyan "ID" mark in the TEKID wordmark */
  margin-left: .04em;
}

/* Real PPT store photos already carry their own brand label + contrast,
   so soften the case-card overlay to a gentle bottom fade only. */
.case-card--photo .case-card__media::after {
  background: linear-gradient(180deg, rgba(10,37,64,0) 58%, rgba(10,37,64,.26));
}
.case-card--photo:hover .case-card__media::after {
  background: linear-gradient(180deg, rgba(10,37,64,0) 46%, rgba(10,37,64,.36));
}

/* ===== Contact / inquiry page (PPT: Talk to our GoGlobal expert) ===== */
.btn--blue { background: var(--blue); color: #fff; border-color: var(--blue); }
.btn--blue:hover { background: var(--blue-dark); }

.x-contact-page { background: var(--bg-alt); }
.x-contact-grid {
  display: grid; grid-template-columns: 1fr 1.05fr; gap: 56px; align-items: start;
  padding-top: 20px;
}
.x-contact-eyebrow {
  font-family: var(--font-display); font-weight: 700; color: var(--gold-dark);
  letter-spacing: .1em; text-transform: uppercase; font-size: .8rem; margin-bottom: 16px;
}
/* gold eyebrow dash removed per client request (2026-07) */
.x-contact-title {
  font-family: var(--font-display); font-weight: 800; color: var(--ink);
  font-size: clamp(30px, 4vw, 46px); line-height: 1.12;
}
.x-contact-lead { margin-top: 16px; font-size: clamp(17px, 1.8vw, 20px); color: var(--blue-dark); font-weight: 600; }
.x-contact-sub { margin-top: 14px; color: var(--muted); line-height: 1.7; }
.x-contact-info {
  margin-top: 30px; display: flex; flex-direction: column; gap: 16px;
  border-top: 1px solid var(--line); padding-top: 26px;
}
.x-contact-info li { display: flex; flex-direction: column; gap: 3px; color: var(--ink); }
.x-contact-info span {
  font-size: .74rem; color: var(--muted); font-family: var(--font-display);
  font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
}
.x-contact-info a { color: var(--ink); }
.x-contact-info a:hover { color: var(--blue); }

.x-cform {
  background: #fff; border-radius: var(--radius-lg); padding: 30px;
  box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 18px;
}
.x-cform__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.x-field { display: flex; flex-direction: column; border: 0; padding: 0; margin: 0; min-width: 0; }
.x-field__label { font-family: var(--font-display); font-weight: 600; font-size: .84rem; color: var(--ink); margin-bottom: 7px; }
.x-field__label em { font-style: normal; color: var(--muted); font-weight: 500; }
.x-field__label em:empty { display: none; }   /* collapse the empty hint slot the English-ization left */
.x-field__label b { color: var(--gold-dark); font-weight: 700; }
.x-field input, .x-field textarea {
  font-family: var(--font-body); font-size: .96rem; color: var(--ink); width: 100%;
  padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 10px; background: #fff;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.x-field input:focus, .x-field textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
.x-field input.is-invalid { border-color: #E4572E; box-shadow: 0 0 0 3px rgba(228,87,46,.14); }
.x-field textarea { resize: vertical; min-height: 96px; }
.x-cform__radios { border: 0; }
.x-radio-row { display: flex; flex-wrap: wrap; gap: 10px; }
.x-radio {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer; white-space: nowrap;
  padding: 10px 18px; border: 1.5px solid var(--line); border-radius: 999px;
  font-size: .9rem; color: var(--ink);
  transition: border-color .2s var(--ease), background-color .2s var(--ease), color .2s var(--ease);
}
.x-radio input { accent-color: var(--blue); }
.x-radio:hover { border-color: var(--blue); }
.x-radio:has(input:checked) { border-color: var(--blue); background: var(--blue-soft); color: var(--blue-dark); font-weight: 600; }
.x-cform__submit { margin-top: 4px; justify-content: center; width: 100%; }
.x-cform__note { font-size: .78rem; color: var(--muted); text-align: center; line-height: 1.6; }
.x-cform__success { display: flex; flex-direction: column; gap: 8px; text-align: center; padding: 34px 10px; }
.x-cform__success[hidden] { display: none; }
.x-cform__success strong { font-family: var(--font-display); font-weight: 800; color: var(--blue); font-size: 1.35rem; }
.x-cform__success span { color: var(--muted); line-height: 1.7; }

@media (max-width: 860px) {
  .x-contact-grid { grid-template-columns: 1fr; gap: 34px; padding-top: 8px; }
}
@media (max-width: 560px) {
  .x-cform__row { grid-template-columns: 1fr; }
  .x-cform { padding: 22px; }
}

/* keep the brand hue on hover instead of the generic colour shift; gentle lift only */
.partner-logo.x-partners-cta-logo:hover {
  filter: saturate(1.12);
  transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
  .partner-logo.x-partners-cta-logo:hover { transform: none; }
}

/* --- Partners logo marquee: seamless infinite left scroll --- */
.x-marquee {
  position: relative;
  overflow: hidden;
  padding-block: 8px;
  /* logos fade in/out at both edges */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
}
.x-marquee__track {
  display: flex;
  width: max-content;
  animation: x-marquee-scroll 26s linear infinite;
  will-change: transform;
}
/* pause to let visitors read the logos */
.x-marquee:hover .x-marquee__track { animation-play-state: paused; }

.x-marquee__group {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 64px;
  padding-right: 64px;   /* keeps the seam spacing identical to the in-group gap */
}

/* track holds 4 identical groups; shifting by exactly half (=2 groups) loops seamlessly */
@keyframes x-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .x-marquee__track { animation: none; transform: none; flex-wrap: wrap; justify-content: center; }
}

/* ===== Nav dropdowns + search (matches PPT menu structure) ===== */
.nav-item { position: relative; display: flex; align-items: center; }
.x-caret {
  display: inline-block; width: 7px; height: 7px; margin-left: 7px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg); opacity: .8;
  transition: transform .25s var(--ease);
}
.x-has-menu:hover .x-caret { transform: translateY(0) rotate(225deg); }

.x-nav-menu {
  position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 210px;
  background: #fff; border-radius: 12px;
  box-shadow: var(--shadow); border: 1px solid var(--line);
  padding: 8px; margin-top: 12px;
  display: flex; flex-direction: column; gap: 2px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
  z-index: 1001;
}
.x-nav-menu--wide { min-width: 320px; }
/* hover bridge so the menu doesn't close in the gap */
.x-has-menu::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 16px; }
.x-has-menu:hover .x-nav-menu,
.x-has-menu:focus-within .x-nav-menu {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.x-nav-menu a {
  font-family: var(--font-body); font-size: 14px; font-weight: 500;
  color: var(--ink); padding: 9px 12px; border-radius: 8px; line-height: 1.35;
  transition: background-color .15s var(--ease), color .15s var(--ease);
}
.x-nav-menu a:hover { background: var(--blue-soft); color: var(--blue); }

.x-nav-search {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: transparent; border: 0; color: inherit; cursor: pointer;
  transition: background-color .2s var(--ease);
}
.x-nav-search:hover { background: rgba(255,255,255,.16); }
.site-nav.is-scrolled .x-nav-search:hover,
.site-nav--solid .x-nav-search:hover { background: var(--blue-soft); }

/* slide-down search bar */
.x-search-bar {
  position: absolute; top: 100%; right: 0; left: 0;
  display: flex; gap: 10px; align-items: center;
  max-width: var(--container); margin-inline: auto;
  padding: 0 24px;
  height: 0; overflow: hidden;
  background: transparent;
  transition: height .3s var(--ease), padding .3s var(--ease);
}
.site-nav.x-search-open .x-search-bar {
  height: 68px; padding-block: 14px;
}
.site-nav.x-search-open { background: #fff; box-shadow: var(--shadow-sm); }
.x-search-bar input {
  flex: 1; height: 44px; padding: 0 18px;
  border: 1.5px solid var(--line); border-radius: 999px;
  font-family: var(--font-body); font-size: 15px; color: var(--ink); background: #fff;
}
.x-search-bar input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
.x-search-bar button {
  height: 44px; padding: 0 22px; border: 0; border-radius: 999px;
  background: var(--blue); color: #fff; font-family: var(--font-display); font-weight: 600; cursor: pointer;
}
.x-search-bar button:hover { background: var(--blue-dark); }

/* ===== Client brand logo strip (looping) under hero ===== */
.x-brand-strip { background: var(--bg-alt); padding: 26px 0; }
/* wider gaps so the strip reads spacious, not cramped */
.x-marquee--brands .x-marquee__group { gap: 104px; padding-right: 104px; align-items: center; }
.x-marquee--brands .x-marquee__track { animation-duration: 52s; }
/* Uniform-height logo wall: source logos are trimmed to content (no internal
   padding), so a single fixed height makes every mark read at the same size. */
.x-brand {
  display: inline-flex; align-items: center; justify-content: center;
  height: 52px; flex: 0 0 auto;
}
.x-brand img {
  height: 30px; width: auto; max-width: 180px; object-fit: contain;
  filter: grayscale(1); opacity: .62;
  transition: filter .3s var(--ease), opacity .3s var(--ease);
}
/* icon+text lockups (mark stacked over a wordmark) read small & illegible at pure
   wordmark height — give just those a modest optical bump so the row stays balanced */
.x-brand--tall img { height: 40px; }
.x-marquee--brands:hover .x-brand img { filter: grayscale(0); opacity: 1; }

@media (max-width: 700px) {
  .x-brand-strip { padding: 22px 0; }
  .x-brand { height: 40px; }
  .x-brand img { height: 23px; max-width: 140px; }
  .x-brand--tall img { height: 34px; }
  .x-marquee--brands .x-marquee__group { gap: 64px; padding-right: 64px; }
}

/* Nav dropdowns collapse into the mobile panel (always expanded) */
@media (max-width: 900px) {
  .nav-item { flex-direction: column; align-items: flex-start; width: 100%; }
  .x-caret { display: none; }
  .x-nav-menu {
    position: static; transform: none; opacity: 1; visibility: visible; pointer-events: auto;
    box-shadow: none; border: 0; background: transparent; padding: 0 0 6px 14px; margin: 0; min-width: 0;
  }
  .x-nav-menu a { font-size: 14px; padding: 7px 0; color: var(--muted); }
  .x-nav-menu a:hover { background: transparent; color: var(--blue); }
  .x-has-menu::after { display: none; }
  .x-nav-search { margin-top: 10px; color: var(--ink); align-self: flex-start; }
  .x-nav-search:hover { background: var(--blue-soft); }
  .x-search-bar { padding-inline: 18px; }
}

/* --- QR speech-bubble caption inside the phone .qr-card (ref: gold pill with tail) --- */
.x-partners-cta-bubble {
  position: relative;
  align-self: flex-end;
  max-width: 100%;
  background: var(--gold);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(11px, 1vw, 13px);
  line-height: 1.35;
  text-align: center;
  padding: 8px 12px;
  border-radius: 12px 12px 4px 12px;
  box-shadow: var(--shadow-sm);
}

.x-partners-cta-bubble::after {
  content: "";
  position: absolute;
  right: 14px;
  bottom: -7px;
  border-width: 8px 7px 0 0;
  border-style: solid;
  border-color: var(--gold) transparent transparent transparent;
}

/* --- QR pattern fills the .qr placeholder crisply --- */
.x-partners-cta-qr-svg {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
}

/* ===== Realistic phone mockup (replaces the flat .qr-card in the CTA) ===== */
.x-phone {
  position: relative;
  justify-self: end;
  width: min(262px, 100%);
  margin-inline: auto;
  transition: transform .5s var(--ease);
}
.x-phone:hover { transform: translateY(-6px); }

/* Titanium body / bezel */
.x-phone__frame {
  position: relative;
  aspect-ratio: 9 / 18.6;
  padding: 12px;
  border-radius: 46px;
  background: linear-gradient(150deg, #33394604 0, #2b3140 6%, #0c0e13 46%, #191d25 100%);
  box-shadow:
    var(--shadow-lg),
    0 0 0 2px rgba(255,255,255,.05),
    inset 0 1px 1px rgba(255,255,255,.14),
    inset 0 -2px 8px rgba(0,0,0,.55);
}
/* side buttons */
.x-phone__frame::before,
.x-phone__frame::after {
  content: "";
  position: absolute;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(#3b4252, #232833);
}
.x-phone__frame::before { left: -3px; top: 116px; height: 62px; }   /* volume rocker */
.x-phone__frame::after  { right: -3px; top: 152px; height: 78px; }  /* power key */

/* Screen */
.x-phone__screen {
  position: relative;
  height: 100%;
  border-radius: 34px;
  overflow: hidden;
  background: radial-gradient(120% 90% at 50% 0%, #1a4c8f 0%, #0a2540 55%, #08192e 100%);
  display: flex;
  flex-direction: column;
  padding: 14px 14px 20px;
}
.x-phone__screen::after {           /* soft glass reflection */
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(118deg, rgba(255,255,255,.12), rgba(255,255,255,0) 32%);
  pointer-events: none;
}

/* Dynamic island + camera */
.x-phone__island {
  position: absolute;
  top: 12px; left: 50%; transform: translateX(-50%);
  width: 80px; height: 22px;
  background: #05070b;
  border-radius: 999px;
  z-index: 4;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.x-phone__island::after {
  content: ""; position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  width: 7px; height: 7px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #2b6cff, #0a1a33 70%);
}

/* Status bar */
.x-phone__status {
  position: relative; z-index: 3;
  display: flex; align-items: center; justify-content: space-between;
  margin: 3px 8px 16px;
  color: #fff; font-family: var(--font-display); font-weight: 600; font-size: 13px;
}
.x-phone__meta { display: flex; align-items: center; gap: 6px; font-size: 11px; }
.x-phone__bars {
  width: 17px; height: 11px;
  background:
    linear-gradient(#fff,#fff) 0    100% / 3px 4px  no-repeat,
    linear-gradient(#fff,#fff) 4.6px 100% / 3px 6px  no-repeat,
    linear-gradient(#fff,#fff) 9.2px 100% / 3px 8px  no-repeat,
    linear-gradient(#fff,#fff) 13.8px 100% / 3px 11px no-repeat;
}
.x-phone__batt {
  position: relative; width: 22px; height: 11px; border-radius: 3px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.75);
}
.x-phone__batt::before { content: ""; position: absolute; inset: 2px; right: 5px; border-radius: 1px; background: #fff; }
.x-phone__batt::after  { content: ""; position: absolute; right: -3px; top: 3px; width: 2px; height: 5px; border-radius: 0 2px 2px 0; background: rgba(255,255,255,.75); }

/* WeChat-style contact card */
.x-phone__card {
  position: relative; z-index: 3;
  margin: auto 0;
  background: #fff;
  border-radius: 18px;
  padding: 16px 16px 16px;
  box-shadow: 0 14px 34px rgba(0,0,0,.32);
}
.x-phone__id { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.x-phone__avatar {
  width: 42px; height: 42px; border-radius: 50%;
  object-fit: cover; object-position: 50% 22%;
  box-shadow: 0 0 0 2px var(--gold);
}
.x-phone__idtext { display: flex; flex-direction: column; line-height: 1.25; }
.x-phone__idtext strong { font-family: var(--font-display); font-weight: 700; color: var(--ink); font-size: 14px; }
.x-phone__idtext small { color: var(--muted); font-size: 11px; margin-top: 2px; }
.x-phone__qr {
  width: 100%; aspect-ratio: 1;
  border-radius: 12px; overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--line);
}
.x-phone__hint {
  margin: 12px 0 0; text-align: center;
  color: var(--muted); font-size: 12px; font-weight: 500;
}

/* Floating gold callout tag */
.x-phone__cta {
  position: absolute; z-index: 5;
  top: -14px; right: -8px;
  background: var(--gold); color: #fff;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(11px, 1vw, 13px); line-height: 1.35;
  padding: 8px 14px; border-radius: 12px 12px 12px 4px;
  box-shadow: var(--shadow);
  white-space: nowrap;
}
.x-phone__cta::after {
  content: ""; position: absolute; right: 16px; bottom: -7px;
  border-width: 8px 7px 0 0; border-style: solid;
  border-color: var(--gold) transparent transparent transparent;
}

@media (max-width: 700px) {
  .x-phone { justify-self: center; }
}
@media (prefers-reduced-motion: reduce) {
  .x-phone { transition: none; }
  .x-phone:hover { transform: none; }
}


/* ===== solutions.css ===== */
/* solutions section: uses only SPEC-defined classes; no custom CSS needed */

/* ===== stories.css ===== */
/* stories.css — helpers for the Success Stories section. All classes prefixed x-stories-. */
/* Nothing here redefines any SPEC class; only layout + the world-map watermark. */

#cases { position: relative; overflow: hidden; }

/* Faint dotted world-map watermark sitting behind content (no contrast impact) */
.x-stories-watermark {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  color: var(--blue, #046EB8);
  opacity: .06;
  display: flex;
  align-items: center;
  justify-content: center;
}
.x-stories-watermark svg {
  width: min(1200px, 100%);
  height: 100%;
}

/* Client-supplied dotted world map as the section backdrop.
   The source JPEG is grey dots on white; `multiply` drops the white so only
   the dots tint the light --bg-alt section, and low opacity keeps it a watermark. */
.x-stories-watermark--map {
  background: url("../assets/img/world-dots.jpg") center 46% / min(1180px, 94%) auto no-repeat;
  opacity: .5;
  mix-blend-mode: multiply;
}
@media (max-width: 1023px) {
  .x-stories-watermark--map { background-size: 150% auto; opacity: .38; }
}

/* Two-column layout: heading block beside the cards (per ref page-06) */
.x-stories-layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}

.x-stories-head {
  position: sticky;
  top: 104px;
}

.x-stories-intro {
  margin-top: 20px;
  max-width: 34ch;
  color: var(--muted, #5A6B80);
  font-size: clamp(15px, 1.08vw, 17px);
  line-height: 1.65;
}

.x-stories-cta {
  margin-top: 28px;
}

/* Cards keep the SPEC .cases-grid 2-col behaviour inside the right column */

@media (max-width: 1023px) {
  .x-stories-layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .x-stories-head {
    position: static;
    top: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .x-stories-watermark { opacity: .045; }
}

/* ===== team.css ===== */
/* team.css — section-local helpers (prefix x-team-) for the GOLD Team section.
   Core .team-* classes are implemented in styles.css per SPEC; do NOT redefine them. */


/* ===== About Us secondary pages (Our Company / Our Team) ===== */
.x-page-crumb {
  font-family: var(--font-display); font-weight: 600; font-size: .82rem;
  letter-spacing: .04em; color: rgba(255,255,255,.72); margin-bottom: 26px;
}
.x-page-crumb a { color: rgba(255,255,255,.9); text-decoration: underline; text-underline-offset: 3px; }
.x-page-crumb a:hover { color: var(--gold); }

.x-oc-top { display: grid; grid-template-columns: .8fr 1.2fr; gap: 56px; align-items: start; }
.x-oc-title {
  font-family: var(--font-display); font-weight: 800; color: #fff;
  font-size: clamp(34px, 5vw, 60px); line-height: 1.05; margin-bottom: 28px;
}
.x-oc-address { display: flex; gap: 12px; color: #fff; margin-bottom: 30px; }
.x-oc-address svg { color: var(--gold); flex: none; margin-top: 2px; }
.x-oc-address p { line-height: 1.55; font-size: 1.02rem; }
.x-oc-address span { display: block; margin-top: 8px; color: rgba(255,255,255,.72); font-size: .92rem; }
.x-oc-cn { color: #fff; font-size: clamp(15px, 1.5vw, 17px); line-height: 1.85; }
.x-oc-en { margin-top: 22px; display: flex; flex-direction: column; gap: 14px; }
.x-oc-en p { color: rgba(255,255,255,.88); line-height: 1.75; font-size: 1rem; }
/* stat block fills the shorter left column so the intro reads balanced */
.x-oc-stats { list-style: none; margin: 40px 0 0; padding: 0; display: grid; gap: 20px; }
.x-oc-stats li { display: flex; align-items: baseline; gap: 16px; }
.x-oc-stats strong { font-family: var(--font-display); font-weight: 800; color: var(--gold); font-size: clamp(28px, 3.2vw, 40px); line-height: 1; min-width: 88px; }
.x-oc-stats span { color: rgba(255,255,255,.82); font-size: .96rem; line-height: 1.4; }
/* stat rows: gentle hover — the row nudges right while the gold number scales up and glows */
.x-oc-stats li { transition: transform .3s var(--ease); cursor: default; }
.x-oc-stats strong { display: inline-block; transform-origin: left center; transition: transform .35s var(--ease), text-shadow .35s var(--ease); }
.x-oc-stats li:hover { transform: translateX(6px); }
.x-oc-stats li:hover strong { transform: scale(1.09); text-shadow: 0 8px 26px rgba(233,169,60,.5); }
@media (prefers-reduced-motion: reduce) {
  .x-oc-stats li, .x-oc-stats strong { transition: none; }
  .x-oc-stats li:hover, .x-oc-stats li:hover strong { transform: none; }
}

/* ===== Square-style heading word-rise: each word slides up from a mask, staggered on scroll-in ===== */
.x-rw { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .12em; margin-bottom: -.12em; }
.x-rw__i { display: inline-block; transform: translateY(120%); transition: transform 1.5s cubic-bezier(.2, .85, .3, 1); }
.x-rw-head.is-inview .x-rw__i { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .x-rw__i { transform: none; transition: none; }
}

.x-awards { margin-top: 64px; border-top: 1px solid rgba(255,255,255,.18); padding-top: 44px; }
.x-awards__title {
  font-family: var(--font-display); font-weight: 800; color: #fff;
  font-size: clamp(24px, 3vw, 34px); margin-bottom: 28px;
}
.x-awards__list { display: flex; flex-wrap: wrap; gap: 18px; }
.x-award { display: flex; align-items: center; gap: 14px; color: #fff; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); border-radius: 14px; padding: 16px 22px; }
.x-award svg { color: var(--gold); flex: none; }
.x-award strong { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; }
.x-award small { display: block; color: rgba(255,255,255,.7); font-size: .85rem; margin-top: 2px; }

.x-oc-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.x-navcard {
  position: relative; display: block; border-radius: var(--radius-lg); overflow: hidden;
  aspect-ratio: 16 / 9; box-shadow: var(--shadow);
}
.x-navcard img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.x-navcard__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(120deg, rgba(10,37,64,.78), rgba(10,37,64,.30));
  transition: background .4s var(--ease);
}
.x-navcard__body { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 32px; color: #fff; }
.x-navcard__title { font-family: var(--font-display); font-weight: 800; font-size: clamp(22px, 2.6vw, 32px); line-height: 1.12; }
.x-navcard__arrow { font-size: 1.6rem; margin-top: 14px; transition: transform .3s var(--ease); }
.x-navcard:hover img { transform: scale(1.06); }
.x-navcard:hover .x-navcard__overlay { background: linear-gradient(120deg, rgba(10,37,64,.86), rgba(10,37,64,.42)); }
.x-navcard:hover .x-navcard__arrow { transform: translateX(8px); }

.section--royal .team-card__bio { color: rgba(255,255,255,.9); }
.x-team-layout { margin-top: 40px; grid-template-columns: repeat(3, minmax(0, 320px)); gap: 48px; }
.x-team-lead { max-width: 620px; margin: 18px auto 0; text-align: center; color: rgba(255,255,255,.85); font-size: clamp(15px, 1.5vw, 18px); line-height: 1.75; }
@media (max-width: 940px) { .x-team-layout { grid-template-columns: repeat(2, minmax(0, 300px)); } }
@media (max-width: 620px) { .x-team-layout { grid-template-columns: minmax(0, 340px); } }

@media (max-width: 860px) {
  .x-oc-top { grid-template-columns: 1fr; gap: 34px; }
  .x-oc-cards { grid-template-columns: 1fr; }
}
/* ===== Partners detail page (PPT slide 14-15) ===== */
.x-phero { position: relative; min-height: 60vh; display: flex; align-items: center; overflow: hidden; color: #fff; }
.x-phero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.x-phero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(6,18,36,.86) 0%, rgba(6,18,36,.55) 55%, rgba(6,18,36,.32) 100%);
}
.x-phero__content { position: relative; z-index: 2; padding-block: 128px 64px; }
.x-phero__title {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(30px, 5vw, 58px); line-height: 1.1; margin-bottom: 18px;
  text-shadow: 0 2px 22px rgba(0,0,0,.35);
}
.x-phero__sub { max-width: 560px; margin-bottom: 30px; color: rgba(255,255,255,.85); font-size: clamp(15px, 1.6vw, 18px); line-height: 1.7; }

.x-pgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.x-pcard {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 34px 30px; box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: 20px;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.x-pcard:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.x-pcard__logo { height: 52px; display: flex; align-items: center; justify-content: center; }
.x-pcard__logo img { max-height: 44px; max-width: 168px; width: auto; object-fit: contain; }
.x-pcard__desc { color: var(--muted); line-height: 1.7; font-size: .96rem; }

/* partners grid section header (gold kicker, matches the Solutions rhythm) */
.x-p-head { max-width: 640px; margin-bottom: 44px; }
.x-p-kicker { display: inline-flex; align-items: center; gap: 11px; font-family: var(--font-display); font-weight: 700; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-dark); margin-bottom: 14px; }
/* gold kicker dash removed per client request (2026-07) */
.x-p-title { font-family: var(--font-display); font-weight: 800; color: var(--ink); font-size: clamp(24px, 3vw, 36px); line-height: 1.15; }
.x-p-lead { margin-top: 14px; color: var(--muted); line-height: 1.75; font-size: clamp(15px, 1.4vw, 17px); }

@media (max-width: 900px) { .x-pgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .x-pgrid { grid-template-columns: 1fr; } .x-phero { min-height: 50vh; } }
/* ===== Solutions detail page ===== */
.x-shero { padding-block: 128px 76px; background: var(--blue); }
.x-shero__title { font-family: var(--font-display); font-weight: 800; font-size: clamp(32px, 5vw, 56px); line-height: 1.1; color: #fff; }
.x-shero__sub { margin-top: 20px; max-width: 720px; color: rgba(255,255,255,.85); font-size: clamp(15px, 1.6vw, 18px); line-height: 1.8; }
/* gold breadcrumb/eyebrow dash removed per client request (2026-07) */
/* subpage royal heroes need extra top padding on mobile to clear the fixed nav */
/* inner pages: first content section must clear the fixed nav (general .section padding is < nav height) */
.site-nav + section:not(.hero) { padding-top: calc(var(--nav-h) + 40px); }
@media (max-width: 1023px) { section.section--royal:first-of-type { padding-top: 96px; } }

.x-sol-list { display: flex; flex-direction: column; gap: 84px; counter-reset: sol; }
.x-sol-row { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; scroll-margin-top: 90px; counter-increment: sol; }
.x-sol-row__media { border-radius: 18px; overflow: hidden; box-shadow: var(--shadow); aspect-ratio: 3 / 4; } /* portrait per feedback #12; payment/city are true portrait, retail/market-entry center-crop until vertical crops are supplied */
.x-sol-row__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.x-sol-row:hover .x-sol-row__media img { transform: scale(1.05); }
.x-sol-row:nth-child(even) .x-sol-row__media { order: 2; }
/* large ghosted number behind the copy for editorial depth (text stays above it) */
.x-sol-row__body { position: relative; }
.x-sol-row__body::before {
  content: counter(sol, decimal-leading-zero);
  position: absolute; top: -.42em; right: -.02em; z-index: 0; pointer-events: none;
  font-family: var(--font-display); font-weight: 800; letter-spacing: -.03em;
  font-size: clamp(84px, 11vw, 148px); line-height: 1; color: var(--blue); opacity: .05;
}
.x-sol-row__body > * { position: relative; z-index: 1; }
.x-sol-row__num { display: inline-flex; align-items: center; gap: 11px; font-family: var(--font-display); font-weight: 700; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-dark); margin-bottom: 16px; }
/* gold solution-number dash removed per client request (2026-07) */
.x-sol-row__title { font-family: var(--font-display); font-weight: 800; color: var(--ink); font-size: clamp(22px, 2.6vw, 32px); line-height: 1.2; }
.x-sol-row__en { margin-top: 12px; color: var(--blue); font-family: var(--font-display); font-weight: 600; font-size: clamp(15px, 1.45vw, 18px); line-height: 1.4; }
.x-sol-row__en:empty { display: none; }
.x-sol-row__desc { margin-top: 16px; color: var(--muted); line-height: 1.85; max-width: 46ch; }
.x-sol-row__cta { margin-top: 28px; }

/* ===== Cegid video feature (partners page) ===== */
.x-cegid-video__head { max-width: 720px; margin-bottom: 34px; }
.x-cegid-video__frame {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: #0b0e13;
  aspect-ratio: 16 / 9;
  max-width: 960px;
  margin-inline: auto;
}
.x-cegid-video__player {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.x-sol-row__points { margin-top: 26px; display: grid; gap: 14px; }
.x-sol-row__points li { position: relative; padding-left: 32px; color: var(--ink); line-height: 1.55; font-weight: 500; }
.x-sol-row__points li::before { content: ""; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border-radius: 7px; background: var(--blue-soft); }
.x-sol-row__points li::after { content: ""; position: absolute; left: 6px; top: 7px; width: 6px; height: 4px; border-left: 2px solid var(--blue); border-bottom: 2px solid var(--blue); transform: rotate(-45deg); }

.x-sol-cta {
  margin-top: 92px; padding: 46px 52px; border-radius: 20px;
  background: linear-gradient(135deg, #0f82cc 0%, #046eb8 55%, #034f82 100%);
  box-shadow: 0 24px 50px rgba(16, 46, 79, .16);
  display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap;
  position: relative; overflow: hidden;
}
.x-sol-cta::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 100% at 12% 0%, rgba(255, 255, 255, .10), rgba(255, 255, 255, 0) 60%);
}
.x-sol-cta > * { position: relative; z-index: 1; }
.x-sol-cta__title { font-family: var(--font-display); font-weight: 800; color: #fff; font-size: clamp(20px, 2.4vw, 28px); }
.x-sol-cta__sub { margin-top: 8px; color: rgba(255, 255, 255, .85); max-width: 52ch; }
/* collapse subtitle slots the English-ization emptied (no dangling gaps) */
.industry-card__en:empty, .cta-footer__cn:empty { display: none; }

@media (max-width: 820px) {
  .x-sol-row { grid-template-columns: 1fr; gap: 26px; }
  .x-sol-row:nth-child(even) .x-sol-row__media { order: 0; }
  .x-sol-cta { flex-direction: column; align-items: flex-start; }
}
/* ===== Hero on the earth-at-night photo (client update) ===== */
.hero--earth .hero__overlay {
  background:
    radial-gradient(120% 90% at 50% 38%, rgba(6,18,36,.32), rgba(6,18,36,0) 62%),
    linear-gradient(180deg, rgba(6,18,36,.58) 0%, rgba(6,18,36,.38) 45%, rgba(6,18,36,.66) 100%);
}
.hero--earth .hero__title {
  /* big & bold, but capped so "Powering Chinese Brands" still holds one line —
     the <br> then gives a grand, balanced two-line lockup (no orphaned "Brands") */
  font-size: clamp(34px, 6.2vw, 74px);
  line-height: 1.1;
  letter-spacing: -.015em;
  text-wrap: balance;
  text-shadow: 0 4px 30px rgba(0,0,0,.55);
}
.hero--earth .hero__subtitle {
  font-size: clamp(16px, 2vw, 22px);
  max-width: 820px;
}
.hero--earth .hero__subtitle {
  font-weight: 500;
  font-size: clamp(15px, 1.9vw, 21px);
  line-height: 1.55;
  max-width: 760px;
  margin-inline: auto;
  text-shadow: 0 2px 18px rgba(0,0,0,.5);
}

/* ===== Hero on the client-provided bright sailboat photo ===== */
.hero--photo .hero__overlay {
  background:
    linear-gradient(180deg, rgba(10,37,64,0) 0%, rgba(10,37,64,.02) 58%, rgba(10,37,64,.18) 100%),
    radial-gradient(95% 58% at 50% 53%, rgba(10,37,64,.16), rgba(10,37,64,0) 58%);
}
.hero--photo .hero__title { text-shadow: none; }
.hero--photo .hero__subtitle { text-shadow: none; }

/* short category label — only surfaced inside the desktop accordion (hidden on tablet/mobile) */
.solution-card__tag { display: none; }

/* ===== Solutions — Square-style expanding accordion (desktop ≥1024px) ===== */
@media (min-width: 1024px) {
  .solutions-grid { display: flex; gap: 20px; }
  .solution-card {
    flex: 1 1 0;
    min-width: 0;
    transition: flex-grow .55s var(--ease), transform .4s var(--ease), box-shadow .4s var(--ease);
  }
  /* hover anywhere on the row: siblings compress, the hovered panel expands wide */
  .solutions-grid:hover .solution-card { flex-grow: .82; }
  .solutions-grid:hover .solution-card:hover { flex-grow: 2.5; }

  /* --- "Square category swap" text treatment ---
     REST: only the short category word shows (full title collapsed). HOVER: the word
     shrinks into a gold eyebrow and the full title fades in beneath it. Text lives in a
     fixed-width column (vw-based, constant during a hover) so nothing re-wraps as the
     panel animates — no letter jitter — and collapsed siblings only ever render the short
     word, so a title can never be hard-clipped mid-word. */
  .solution-card__body {
    right: auto;
    width: clamp(230px, 22vw, 300px);
    padding: 26px 26px 30px;
    display: flex;
    flex-direction: column;
  }
  /* REST: the category is a small gold eyebrow ABOVE the full, readable title —
     so a non-hovering visitor still understands every card. */
  .solution-card__tag {
    display: block;
    order: -1;                 /* eyebrow sits above the title regardless of DOM order */
    font-family: var(--font-display);
    font-weight: 700;
    font-size: .8rem;
    line-height: 1.2;
    letter-spacing: .18em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--gold);
    margin-bottom: 9px;
    text-shadow: 0 2px 14px rgba(10, 37, 64, .55);
    transition: font-size .5s var(--ease), letter-spacing .45s var(--ease),
                color .4s var(--ease), margin-bottom .45s var(--ease);
  }
  .solution-card__title {
    max-height: 4em;
    margin: 0;
    opacity: 1;
    overflow: hidden;
    transition: max-height .5s var(--ease), opacity .4s var(--ease),
                margin-top .45s var(--ease);
  }
  /* any row hover → non-hovered siblings compress, so their title collapses and the
     category shrinks to a tracked-out caption that fits the narrow panel */
  .solutions-grid:hover .solution-card__title { max-height: 0; opacity: 0; }
  .solutions-grid:hover .solution-card__tag {
    font-size: clamp(11px, .82vw, 12px);
    letter-spacing: .2em;
    color: rgba(255, 255, 255, .72);
    margin-bottom: 3px;
  }
  /* the hovered/expanded panel: gold eyebrow + full title (desc + learn-more come from base rules) */
  .solutions-grid:hover .solution-card:hover .solution-card__title { max-height: 4em; opacity: 1; margin-top: 0; }
  .solutions-grid:hover .solution-card:hover .solution-card__tag {
    color: var(--gold); font-size: .8rem; letter-spacing: .18em; margin-bottom: 9px;
  }

  /* "Learn more" CTA slides in on the expanded panel */
  .solution-card__body::after {
    content: "Learn more \2192";
    display: block; margin-top: 12px;
    font-family: var(--font-display); font-weight: 600;
    font-size: .8rem; letter-spacing: .04em; color: #fff;
    opacity: 0; transform: translateY(6px);
    transition: opacity .4s var(--ease) .06s, transform .4s var(--ease) .06s;
  }
  .solution-card:hover .solution-card__body::after { opacity: 1; transform: none; }
}

/* ===== About — Square-style scroll grow: blue panel grows from an inset card to full-bleed on a white base ===== */
.x-about { background: #fff; padding-block: 48px; overflow-x: clip; }
/* Partners strip sits in a lot of white; trim its vertical padding + title→logos gap so the white isn't huge */
.partners { padding-block: 40px; }
.partners .partners__title { margin-bottom: 0; }
.partners .section-head { margin-bottom: 32px; }
.x-about-panel {                 /* full viewport-width block; content stays centred via inner .container */
  /* deep navy → royal gradient: gives the panel real depth, makes the gold stats
     pop, and keeps it distinct from the brighter CTA block near the page foot */
  background:
    radial-gradient(120% 120% at 82% 12%, rgba(14,110,184,.55), rgba(14,110,184,0) 55%),
    linear-gradient(158deg, var(--navy) 0%, #0b3a63 46%, var(--royal) 100%);
  border-radius: 0;
  padding-block: 84px;
  transform-origin: center;
  position: relative;
  overflow: hidden;
}
/* small when it enters (inset, white around), full-bleed when settled — square corners throughout */
@keyframes x-about-grow {
  from { transform: scale(.86); }
  to   { transform: scale(1); }
}
/* progressive enhancement: only where scroll-driven timelines exist; elsewhere the panel just shows full-bleed */
@supports (animation-timeline: view()) {
  .x-about-panel {
    animation: x-about-grow linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 45%;
  }
  @media (prefers-reduced-motion: reduce) { .x-about-panel { animation: none; border-radius: 0; } }
}
@media (max-width: 768px) {
  .x-about { padding-block: 48px; }
  .x-about-panel { padding-block: 56px; }
}

/* ===== Stats: count-up (JS) + hover micro-interaction ===== */
.stat { transition: transform .3s var(--ease); }
.stat__num { display: inline-block; transition: transform .3s var(--ease), text-shadow .3s var(--ease); will-change: transform; }
.stat:hover { transform: translateY(-4px); }
.stat:hover .stat__num { transform: scale(1.09); text-shadow: 0 8px 24px rgba(233,169,60,.42); }
@media (prefers-reduced-motion: reduce) {
  .stat, .stat__num { transition: none; }
  .stat:hover, .stat:hover .stat__num { transform: none; }
}
/* Nav enlarged (logo/text bigger) — scale the search control to match */
.x-nav-search { width: 46px; height: 46px; }
.x-nav-search svg { width: 23px; height: 23px; }
/* White pill button (hero: Join as a Partner) — white bg, blue text */
.btn--white { background: #fff; color: var(--blue); border-color: #fff; box-shadow: 0 5px 14px rgba(10,37,64,.12); }
.btn--white:hover { background: #fff; color: var(--blue-dark); box-shadow: 0 8px 20px rgba(10,37,64,.18); }

/* Hero buttons: keep both the same width (hover left as the default subtle shade) */
.hero__actions .btn { min-width: 230px; }
@media (max-width: 560px) { .hero__actions .btn { min-width: 0; } }
/* Case captions: wrap to at most two tidy lines (reserve the height so paired
   cards in a row stay aligned) instead of truncating a sentence mid-word. */
.case-card__caption {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  font-size: clamp(13px, 1.02vw, 15px);
  line-height: 1.45;
  min-height: 2.9em;
  letter-spacing: -.01em;
}
@media (max-width: 700px) { .case-card__caption { font-size: 14px; min-height: 0; } }

/* ===== Success Stories — hover a card and it expands to fill the whole 2x2 grid; the other three
   collapse to zero and hide; reverts on mouse-out. Pure CSS grid-track animation (desktop only). ===== */
@media (min-width: 1024px) {
  .x-stories-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    aspect-ratio: 1.46;
    transition: grid-template-columns .55s var(--ease), grid-template-rows .55s var(--ease);
  }
  .x-stories-grid .case-card { min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
  .x-stories-grid .case-card__media { flex: 1 1 auto; min-height: 0; aspect-ratio: auto; }
  .x-stories-grid .case-card__caption { flex: 0 0 auto; }
  .x-stories-grid .case-card:hover .case-card__media img { transform: none; }
  .x-stories-grid:has(.case-card:nth-child(1):hover) { grid-template-columns: 1fr 0fr; grid-template-rows: 1fr 0fr; }
  .x-stories-grid:has(.case-card:nth-child(2):hover) { grid-template-columns: 0fr 1fr; grid-template-rows: 1fr 0fr; }
  .x-stories-grid:has(.case-card:nth-child(3):hover) { grid-template-columns: 1fr 0fr; grid-template-rows: 0fr 1fr; }
  .x-stories-grid:has(.case-card:nth-child(4):hover) { grid-template-columns: 0fr 1fr; grid-template-rows: 0fr 1fr; }
}

/* ===== Structured footer — replaces the sparse 2-column footer with 4 organised columns ===== */
.x-foot { padding-block: 62px 28px; }
.x-foot .x-foot__top { display: grid; grid-template-columns: 1.8fr 1fr 1fr 1.25fr; gap: 44px; align-items: start; }
.x-foot__brand .nav-logo { align-items: center; text-align: center; }
.x-foot__blurb { margin: 20px 0 0; max-width: 34ch; line-height: 1.75; font-size: .92rem; color: rgba(255,255,255,.72); }
.x-foot__cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; color: var(--gold); font-family: var(--font-display); font-weight: 600; font-size: .92rem; text-decoration: none; }
.x-foot__cta::after { content: "\2192"; transition: transform .3s var(--ease); }
.x-foot__cta:hover::after { transform: translateX(4px); }
.x-foot__h { font-family: var(--font-display); font-weight: 700; font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.45); margin: 4px 0 20px; }
.x-foot__col { display: flex; flex-direction: column; gap: 13px; }
.x-foot__col a { color: rgba(255,255,255,.8); font-size: .93rem; text-decoration: none; width: max-content; transition: color .2s var(--ease); }
.x-foot__col a:hover { color: var(--gold); }
.x-foot__addr { color: rgba(255,255,255,.55); font-size: .86rem; line-height: 1.65; margin: 2px 0 0; max-width: 22ch; }
.x-foot__linkedin { display: inline-flex; align-items: center; gap: 8px; }
.x-foot__linkedin svg { flex: none; }
.x-foot .x-foot__bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 48px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.12); }
.x-foot .x-foot__bottom p { margin: 0; color: rgba(255,255,255,.48); font-size: .82rem; }
@media (max-width: 900px) { .x-foot .x-foot__top { grid-template-columns: 1fr 1fr; gap: 32px 24px; } }
@media (max-width: 560px) { .x-foot .x-foot__top { grid-template-columns: 1fr; } .x-foot .x-foot__bottom { flex-direction: column; align-items: flex-start; } }

/* --- Logo wordmark polish (legibility on hero + on-brand blue on white nav) --- */
.site-nav:not(.is-scrolled):not(.site-nav--solid) .nav-logo__cn,
.site-nav:not(.is-scrolled):not(.site-nav--solid) .nav-logo__en {
  text-shadow: 0 1px 6px rgba(10,37,64,.35);
}
.site-nav:not(.is-scrolled):not(.site-nav--solid) .nav-logo__en { opacity: .92; }
.site-nav.is-scrolled .nav-logo__cn,
.site-nav--solid .nav-logo__cn { color: #0A5AA6; }
/* ===== CTA: two QR codes with gold speech bubbles (PPT slide 8 style) ===== */
/* give the QR column more room so codes are bigger + bubbles read as wide rectangles */
.cta-footer .container { grid-template-columns: 1.2fr 1fr; }
.x-qr-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; max-width: 500px; margin-inline: auto; }
.x-qr-item { display: flex; flex-direction: column; align-items: stretch; min-width: 0; }
.x-qr-bubble {
  position: relative; align-self: center; text-align: center;
  width: max-content; max-width: 128%;
  background: var(--gold); color: #fff;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(12.5px, 1vw, 14px); line-height: 1.32;
  padding: 12px 18px; border-radius: 12px; margin-bottom: 20px;
  box-shadow: var(--shadow);
}
.x-qr-bubble::after {
  content: ""; position: absolute; left: 50%; transform: translateX(-50%); bottom: -9px;
  border-width: 10px 8px 0 8px; border-style: solid;
  border-color: var(--gold) transparent transparent transparent;
  transition: border-color .3s ease;
}
.x-qr-box {
  background: #fff; border-radius: 16px; padding: 14px;
  width: 100%; aspect-ratio: 1; box-shadow: var(--shadow-lg);
}
.x-qr-box .x-partners-cta-qr-svg,
.x-qr-box img { width: 100%; height: 100%; display: block; object-fit: contain; }

@media (max-width: 760px) {
  .x-qr-pair { max-width: 420px; gap: 18px; }
}
/* Real QR images fill the white box */
.x-qr-box img { width: 100%; height: 100%; object-fit: contain; display: block; border-radius: 8px; }

/* ===== CTA QR cards: flip to reveal the QR when scrolled into view =====
   Each card rests on the "expert / publication" info side and flips to the
   scannable QR as it scrolls into view — one-time, staggered. JS adds
   .is-revealed to the .x-qr-item; no hover/tap involved. */
.x-qr-flip { position: relative; width: 100%; aspect-ratio: 1; perspective: 1200px; }
.x-qr-flip__inner {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: rotateY(180deg);            /* rest: show the info side */
  transition: transform 1.6s cubic-bezier(.2, .7, .2, 1);
}
.x-qr-item.is-revealed .x-qr-flip__inner { transform: rotateY(0deg); }   /* flip to the QR */
.x-qr-pair .x-qr-item:nth-child(2) .x-qr-flip__inner { transition-delay: .32s; }
/* Once the slow reveal has settled, hovering flips the card back to the info side —
   snappier than the entrance, and driven by mousemove (not :hover) so scrolling a
   card under a stationary cursor never triggers it. */
.x-qr-item.is-interactive .x-qr-flip__inner { transition: transform .55s cubic-bezier(.2, .7, .3, 1); }
.x-qr-item.is-revealed.is-hovered .x-qr-flip__inner { transform: rotateY(180deg); }
.x-qr-flip__face {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  box-shadow: var(--shadow-lg);
}
.x-qr-flip__front .x-qr-box { width: 100%; height: 100%; aspect-ratio: auto; box-shadow: none; }
.x-qr-flip__back {
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 16px 14px;
  text-align: center;
  color: #fff;
  overflow: hidden;
  background:
    radial-gradient(115% 80% at 50% 0%, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0) 62%),
    linear-gradient(162deg, #0f82cc 0%, #046eb8 46%, #034f82 100%);
}
.x-qr-back__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(15px, 1.35vw, 18px);
  line-height: 1.15;
  letter-spacing: -.005em;
}
.x-qr-back__role {
  font-size: clamp(10px, .85vw, 11.5px);
  line-height: 1.35;
  letter-spacing: .02em;
  color: #f3c785;
  max-width: 16ch;
}
.x-qr-back__cta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 5px;
  padding: 5px 13px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .38);
  background: rgba(255, 255, 255, .08);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(10.5px, .9vw, 12px);
  color: #fff;
  white-space: nowrap;
}
.x-qr-back__arrow { width: 13px; height: 13px; }
/* Gold bubbles: a gentle, always-on float so they never feel static — plus a lift +
   brighten on hover, in sync with the card (same .is-hovered). The float uses the
   independent `translate` property so the hover `scale` composes cleanly with it. */
.x-qr-bubble {
  animation: xQrBubbleFloat 3.8s ease-in-out infinite;
  transition: transform .3s ease, background-color .3s ease;   /* transform(lift) is composited; NO box-shadow (that repaint caused jank) */
}
.x-qr-pair .x-qr-item:nth-child(2) .x-qr-bubble { animation-delay: -1.9s; }   /* out of phase */
@keyframes xQrBubbleFloat {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -4px; }
}
/* Deeper hover shadow via a pseudo we cross-fade with opacity (compositor-cheap),
   instead of transitioning box-shadow (which re-rasterises the 30px blur every frame). */
.x-qr-bubble::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 14px 30px rgba(16, 46, 79, .30);
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}
.x-qr-item.is-hovered .x-qr-bubble {
  transform: translateY(-4px);   /* lift, not scale — so the tail never changes size */
  background: #f3b64c;
}
.x-qr-item.is-hovered .x-qr-bubble::before { opacity: 1; }
/* Tail: match colour to the brightened bubble on hover. No scale anywhere, so the
   pointer keeps a fixed size (it only moves up with the bubble). */
.x-qr-item.is-hovered .x-qr-bubble::after {
  border-color: #f3b64c transparent transparent transparent;
}
@media (prefers-reduced-motion: reduce) {
  .x-qr-flip__inner,
  .x-qr-item.is-interactive .x-qr-flip__inner { transition: none; }
  .x-qr-flip__inner { transform: rotateY(0deg); }
  .x-qr-bubble { animation: none; }
  .x-qr-item.is-hovered .x-qr-bubble { scale: 1; }
}

/* CTA must stack to one column on tablet/phone. The 1.2fr/1fr rule above is
   unconditional and (loading after styles.css) was overriding the intended
   mobile single-column layout, cramming text + QRs side by side on phones. */
@media (max-width: 1023px) {
  .cta-footer .container { grid-template-columns: 1fr; gap: 40px; }
}
/* ===== CTA left content polish ===== */
.cta-footer__title { font-size: clamp(26px, 3.3vw, 40px); line-height: 1.18; letter-spacing: -.005em; text-wrap: balance; }
.cta-footer__cn { margin-top: 16px; max-width: 40ch; font-size: clamp(15px, 1.6vw, 19px); line-height: 1.5; color: rgba(255,255,255,.9); letter-spacing: .02em; text-wrap: balance; }
.cta-footer__main .btn { margin-top: 30px; }
.cta-footer__contact {
  margin-top: 32px; display: flex; flex-direction: column; gap: 14px;
  font-size: 1rem; line-height: 1.2; color: rgba(255,255,255,.94);
}
.cta-footer__contact p { display: inline-flex; align-items: center; gap: 11px; margin: 0; }
.cta-footer__contact svg { flex: none; color: var(--gold); }
/* company address sits under the email; wrap tidily beside its pin icon */
.cta-footer__addr { align-items: flex-start; max-width: 40ch; }
.cta-footer__addr svg { margin-top: 3px; }
.cta-footer__addr span { line-height: 1.45; }
.cta-footer__linkedin { align-items: center; }
.cta-footer__linkedin svg { margin-top: 0; }
.cta-footer__contact a { color: inherit; }
.cta-footer__contact a:hover { color: var(--gold); }

/* ===== Language switcher (nav right, UI toggle) ===== */
.x-lang { margin-left: 2px; }
.x-lang__btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 4px; }
.x-lang__btn::after { display: none; }            /* no underline sweep on the lang pill */
.x-lang__globe { flex: none; opacity: .92; }
.x-lang__cur { font-family: var(--font-display); font-weight: 600; font-size: 15px; letter-spacing: .04em; }
.x-lang .x-caret { margin-left: 2px; }
/* right-align the little menu under the pill (base .x-nav-menu is centre-anchored) */
.x-lang__menu { min-width: 128px; left: auto; right: 0; transform: translateX(0) translateY(8px); }
.x-lang:hover .x-lang__menu,
.x-lang:focus-within .x-lang__menu { transform: translateX(0) translateY(0); }
.x-lang__menu a.is-active { color: var(--blue); font-weight: 600; background: var(--blue-soft); }
@media (max-width: 900px) {
  .x-lang { margin-left: 0; }
  .x-lang__menu { right: auto; }
}
/* ============================================================
   Homepage hierarchy pass (design review follow-up)
   - reusable section eyebrow + supporting line
   - CTA gradient depth (distinct from the navy About block)
   - hero title wrap-safety on small screens
   - Success-Stories watermark cleared from behind the text column
   ============================================================ */

/* --- Section eyebrow (gold kicker) + supporting line --- */
.x-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-dark);
  margin-bottom: 14px;
}
/* gold eyebrow dash removed per client request (2026-07) */
.section-head--center .x-eyebrow { justify-content: center; }
/* on dark section heads the kicker uses the bright gold */
.section-head--light .x-eyebrow { color: var(--gold); }

.x-section-lead {
  margin-top: 14px;
  max-width: 62ch;
  color: var(--muted);
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.7;
}
.section-head--center .x-section-lead { margin-inline: auto; }

/* the word-rise script strips .reveal off the heading block, so the eyebrow/lead
   would otherwise sit at full opacity with no entrance — give them a gentle one */
.x-rw-head .x-eyebrow,
.x-rw-head .x-section-lead,
.x-rw-head + .x-section-lead { opacity: 1; }

/* --- CTA footer: richer gradient so the final action reads as the culminating
   moment, clearly distinct from the deep-navy About block up the page --- */
.cta-footer {
  background: linear-gradient(135deg, #0f82cc 0%, #046eb8 52%, #034f82 100%);
  position: relative;
  overflow: hidden;
}
.cta-footer::before {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 88% 4%, rgba(255,255,255,.12), rgba(255,255,255,0) 55%);
}
.cta-footer > .container { position: relative; z-index: 1; }

/* --- Hero: keep the two-line lockup on desktop (and for the CN word-rise), but let
   the title wrap naturally on small phones so a fallback font can never clip it --- */
@media (max-width: 560px) {
  /* drop the forced break so the title wraps naturally within the phone width;
     scale it for 320–430px so it can never clip (even before the webfont loads) */
  .hero--earth .hero__title br { display: none; }
  .hero--earth .hero__title {
    font-size: clamp(30px, 8vw, 44px);
    overflow-wrap: break-word;
  }
}

/* --- Success Stories: fade the dotted world-map out from behind the left text
   column so the intro copy + CTA stay crisp; map still reads behind the cards --- */
.x-stories-watermark--map {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, transparent 28%, #000 44%, #000 100%);
          mask-image: linear-gradient(90deg, transparent 0, transparent 28%, #000 44%, #000 100%);
}
@media (max-width: 1023px) {
  /* single-column: map sits behind everything, so keep it faint enough not to fight text */
  .x-stories-watermark--map {
    opacity: .28;
    -webkit-mask-image: none;
            mask-image: none;
  }
}