/* ============================================================
   Dékuple China — brand design system v3
   Reference: the Dekuple Group site (dekuple.com, Nov 2026): Poppins,
   cyan #5ae6fa as the one accent, purple #462880 in glows, cool grey panels.
   China keeps its deep purple surfaces (header, hero, footer).
   Palette: purple #2e1452 / group purple #462880 / cyan #5ae6fa
   Fonts: Poppins 400/600/700 (self-hosted, latin + latin-ext) + system CJK
   ============================================================ */

/* Poppins — self-hosted (SIL OFL 1.1, @fontsource/poppins 5.2.7), no external refs. */
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/poppins-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/poppins-latin-ext-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/poppins-latin-600-normal.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/poppins-latin-ext-600-normal.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/poppins-latin-700-normal.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/poppins-latin-ext-700-normal.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --purple: #2e1452;
  --purple-deep: #1f0e3a;
  --blue: #462880;        /* accent text on light surfaces: the group's purple (was blue #462880) */
  --blue-light: #6a4bb0;
  --cyan: #5ae6fa;
  --ink: #494949;
  --ink-strong: #282828;
  --muted: #9a94ad;
  --line: #e6e8ee;
  --bg: #ffffff;
  --bg-soft: #f7f8fa;
  /* themable roles: headings/text in brand purple, card and panel surfaces.
     --purple itself stays the brand surface colour (header, hero, footer). */
  --heading: var(--purple);
  --surface: #fff;
  --surface-tint: #f7f8fa;
  --surface-tint-line: #e6e8ee;
  --font-latin: "Poppins", -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-cjk: "Poppins", -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --font-heading: "Poppins", -apple-system, "Segoe UI", Roboto, sans-serif;
  --radius: 8px;
  --radius-lg: 12px;
  --shadow: 0 3px 18px rgba(46, 20, 82, 0.08);
  --shadow-hover: 0 14px 34px rgba(46, 20, 82, 0.16);
  --header-h: 72px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }

body {
  font-family: var(--font-cjk);
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

.container { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.container-narrow { max-width: 820px; }

a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--heading); }

img { max-width: 100%; height: auto; }

/* ============================================================
   HEADER — always the brand purple, never white.
   The hero and every page-head use the same gradient, which starts at
   --purple, so a solid purple bar joins them without a seam.
   ============================================================ */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--header-h);
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  transition: background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}
/* A solid, fully opaque brand purple so the bar is exactly the colour the
   gradient starts at on the homepage. No alpha and no backdrop-filter:
   a translucent bar picked up the white page behind it and rendered lighter
   than the hero, and backdrop-filter also makes the header a containing
   block for position:fixed children — which broke the mobile drawer. */
.site-header.scrolled,
.site-header.solid {
  background: var(--purple);
  border-bottom-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 2px 14px rgba(46, 20, 82, 0.22);
}

/* Pages that open with a purple page-head pull that section up behind the
   header, so the bar sits on the same gradient the homepage hero uses and
   the two read as one continuous surface. */
body:has(.page-head) .site-header:not(.scrolled),
body:has(.team-hero) .site-header:not(.scrolled) {
  background: transparent;
  border-bottom-color: rgba(255, 255, 255, 0.14);
  box-shadow: none;
}
.header-inner { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); }

.logo { display: flex; align-items: center; gap: 10px; }
.logo img { height: 34px; width: auto; display: block; }
/* the bar is always dark now, so only the on-dark logo is ever shown */
.logo .logo-light-img { display: none; }

.site-nav { display: flex; align-items: center; gap: 26px; position: relative; }
.site-nav a {
  color: rgba(255, 255, 255, 0.92); font-size: 15px; font-weight: 500;
  padding: 6px 0; position: relative; transition: color 0.25s ease;
}
.site-nav a:hover { color: var(--cyan); }
/* home icon before 服务: icon only in the bar, icon + label in the mobile menu */
.site-nav .nav-home { display: inline-flex; align-items: center; gap: 8px; }
.site-nav .nav-home svg { display: block; transition: transform 0.25s ease; }
.site-nav .nav-home:hover svg { transform: translateY(-1px); }
.nav-home-text { display: none; }
.site-nav .lang-switch {
  font-family: var(--font-heading); font-size: 13px; font-weight: 600;
  border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 999px;
  padding: 4px 16px; color: #fff; transition: all 0.25s ease;
}
.site-nav .lang-switch:hover { background: var(--cyan); border-color: var(--cyan); color: var(--purple) !important; }
.site-nav .nav-cta {
  background: var(--cyan); color: var(--purple) !important; font-weight: 700;
  padding: 8px 18px; border-radius: 999px; line-height: 1.2;
  box-shadow: 0 6px 18px rgba(90, 230, 250, 0.28);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.site-nav .nav-cta:hover { color: var(--heading) !important; transform: translateY(-1px); box-shadow: 0 10px 24px rgba(90, 230, 250, 0.42); }

/* sliding underline indicator */
.nav-indicator {
  position: absolute; bottom: -2px; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, var(--cyan), var(--blue-light));
  transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s;
  opacity: 0; pointer-events: none;
}
.nav-indicator.on { opacity: 1; }

/* mobile hamburger */
.nav-toggle {
  display: none; background: none; border: 0; cursor: pointer;
  width: 40px; height: 40px; position: relative; z-index: 110;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  display: block; width: 22px; height: 2px; background: #fff; border-radius: 2px;
  transition: all 0.3s ease;
}
.nav-toggle span { margin: 0 auto; position: relative; top: 0; }
.nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 0; }
.nav-toggle span::before { top: -7px; }
.nav-toggle span::after { top: 7px; }
body.nav-open .nav-toggle span { background: transparent; }
body.nav-open .nav-toggle span::before { top: 0; transform: rotate(45deg); }
body.nav-open .nav-toggle span::after { top: 0; transform: rotate(-45deg); }

main { padding-top: var(--header-h); }
.home-main { padding-top: 0; }

/* ============================================================
   SHARED PURPLE BACKDROP — hero and page-head
   A linear-gradient's colour at a given row depends on the element's own
   height (the gradient line is centred on the box), so the short page-head
   drifted lighter than the tall hero. Painting one fixed-size tile at the top
   makes the two pixel-identical, and background-color matches the gradient's
   end so nothing changes below the tile.
   ============================================================ */
.hero,
.page-head {
  background-color: var(--purple-deep);
  background-image: linear-gradient(160deg, var(--purple) 0%, var(--purple-deep) 100%);
  background-size: 100% 900px;
  background-position: top left;
  background-repeat: no-repeat;
}

/* ============================================================
   HERO — purple stage, caption + title + banner
   ============================================================ */
.hero {
  color: #fff;
  /* bottom = the trust strip's own top padding (28px) plus a little, so the
     logos sit centred in their band instead of on 96px of empty purple */
  padding: calc(var(--header-h) + 72px) 0 34px;
  position: relative;
  overflow: hidden;
}
.hero::after { /* faint grid texture */
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px);
  background-size: 26px 26px; pointer-events: none;
}
.hero .container { position: relative; z-index: 1; }
.hero-caption {
  font-size: 25px; font-weight: 400; color: rgba(255, 255, 255, 0.92);
  margin-bottom: 14px; letter-spacing: 0.02em;
}
.hero-title {
  font-family: var(--font-heading);
  font-size: 44px; line-height: 1.38; font-weight: 700; color: #fff;
  max-width: 720px; margin-bottom: 56px;
}
.hero-title em { font-style: normal; color: var(--cyan); }
.hero-actions { display: flex; gap: 16px; margin-bottom: 0; flex-wrap: wrap; }
.btn-hero-ghost { border-color: rgba(255, 255, 255, 0.55); color: #fff; background: transparent; }
.btn-hero-ghost:hover { background: rgba(255, 255, 255, 0.12); border-color: #fff; color: #fff; }

/* ============================================================
   BUTTONS
   Convention (keep to it on new pages):
   - btn-gradient  primary action on light surfaces
   - btn-cyan      primary action on dark/purple surfaces (hero, CTA bands)
   - btn-line      secondary action on light surfaces
   - btn-hero-ghost secondary action on the purple hero
   ============================================================ */
.btn {
  display: inline-block; font-family: var(--font-heading); font-size: 14px; font-weight: 700;
  letter-spacing: 0; padding: 15px 32px; border-radius: 999px;
  border: 1px solid transparent; cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-gradient {
  background: linear-gradient(90deg, var(--blue-light), var(--blue));
  color: #fff; box-shadow: 0 8px 22px rgba(70, 40, 128, 0.35);
}
.btn-gradient:hover { color: #fff; box-shadow: 0 12px 28px rgba(70, 40, 128, 0.45); }
.btn-cyan { background: var(--cyan); color: var(--purple); }
/* hero main CTA: AI visibility check — spark, sliding arrow, shine sweep */
.btn-ai {
  position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 26px 15px 22px; font-weight: 700; color: var(--heading);
  background: linear-gradient(120deg, #5ae6fa 0%, #a8f2fc 48%, #5ae6fa 100%);
  box-shadow: 0 10px 28px rgba(90, 230, 250, 0.38), inset 0 0 0 1px rgba(255, 255, 255, 0.35);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.btn-ai::after {
  content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.65), transparent);
  transform: skewX(-20deg); animation: btn-ai-shine 3.8s ease-in-out infinite;
}
.btn-ai:hover { color: var(--purple); transform: translateY(-2px); box-shadow: 0 14px 34px rgba(90, 230, 250, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.5); }
.btn-ai-spark { flex-shrink: 0; animation: btn-ai-spark 2.4s ease-in-out infinite; }
.btn-ai-arrow { flex-shrink: 0; transition: transform 0.25s ease; }
.btn-ai:hover .btn-ai-arrow { transform: translateX(4px); }
@keyframes btn-ai-shine { 0%, 55% { left: -60%; } 100% { left: 130%; } }
@keyframes btn-ai-spark { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(1.18) rotate(15deg); } }
/* hero buttons: same size in both languages (no uppercase / wide tracking in
   English, which made the pair wrap), and a visible outline on the ghost one.
   Declared after .btn so these win over its transparent border. */
.hero-actions .btn { text-transform: none; letter-spacing: 0.01em; font-size: 15px; height: 54px; display: inline-flex; align-items: center; padding-top: 0; padding-bottom: 0; }
.hero-actions .btn-hero-ghost { border: 1.5px solid rgba(255, 255, 255, 0.7); padding-left: 28px; padding-right: 28px; }
.hero-actions .btn-hero-ghost:hover { border-color: #fff; background: rgba(255, 255, 255, 0.12); }
.hero-ai-note { margin-top: 14px; font-size: 13.5px; color: rgba(255, 255, 255, 0.62); }
.hero-ai-note::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 8px 2px 2px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 4px rgba(90, 230, 250, 0.18); }
.btn-cyan:hover { color: var(--purple); box-shadow: 0 8px 22px rgba(90, 230, 250, 0.4); }
.btn-ghost { border-color: rgba(255, 255, 255, 0.55); color: #fff; background: transparent; }
.btn-ghost:hover { background: #fff; color: var(--purple); }
.btn-line { border-color: var(--heading); color: var(--heading); background: transparent; }
.btn-line:hover { background: var(--purple); color: #fff; }

/* ============================================================
   SECTIONS
   ============================================================ */
.section { padding: 84px 0; }
.section-soft { background: var(--bg-soft); }
/* two white sections in a row: the first one's bottom padding is gap enough,
   so the second starts flush (no doubled 84px + 84px blank band). Sections
   with their own background keep full padding on both sides. */
.section:not(.section-soft):not(.contact-cta):not(.why-section):not(.grp-china) + .section:not(.section-soft):not(.contact-cta):not(.why-section):not(.ins-section):not(.grp-china) { padding-top: 0; }
.section-title {
  font-family: var(--font-heading); font-size: 30px; font-weight: 700;
  color: var(--heading); margin-bottom: 18px; line-height: 1.42;
}
.section-title.center { text-align: center; }
.section-title::after {
  content: ""; display: block; width: 48px; height: 4px; border-radius: 2px;
  background: linear-gradient(90deg, var(--cyan), var(--blue)); margin-top: 14px;
}
.section-title.center::after { margin-left: auto; margin-right: auto; }
.section-intro {
  max-width: 690px; font-size: 17px; color: var(--ink); margin-bottom: 52px;
}
.section-intro.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-more { margin-top: 40px; text-align: center; }

/* ============================================================
   FLIP CARDS — 4 core capabilities (3D flip on hover)
   ============================================================ */
.flip-section { padding: 72px 0 84px; }
.flip-grid { gap: 22px; }
.flip-card { perspective: 1200px; height: 240px; }
.flip-inner {
  position: relative; width: 100%; height: 100%;
  transition: transform 0.65s cubic-bezier(0.4, 0.15, 0.2, 1);
  transform-style: preserve-3d;
}
.flip-card:hover .flip-inner, .flip-card.flipped .flip-inner { transform: rotateY(180deg); }
.flip-face {
  position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border-radius: var(--radius-lg); padding: 30px 26px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
}
.flip-front {
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow);
}
.flip-front .flip-icon { color: var(--heading); margin-bottom: 16px; }
.flip-front h3 { font-size: 19px; font-weight: 600; color: var(--ink-strong); }
.flip-front .flip-hint {
  margin-top: 14px; font-family: var(--font-latin); font-size: 11px; font-weight: 600;
  letter-spacing: 0.14em; color: var(--muted); text-transform: uppercase;
}
.flip-back {
  background: linear-gradient(150deg, var(--purple) 0%, var(--blue) 100%);
  color: #fff; transform: rotateY(180deg);
  box-shadow: var(--shadow-hover);
}
.flip-back p { font-size: 14.5px; line-height: 1.7; color: rgba(255, 255, 255, 0.92); margin-bottom: 18px; }
.flip-back .flip-link {
  font-family: var(--font-latin); font-size: 13px; font-weight: 700; letter-spacing: 0.08em;
  color: var(--cyan); text-transform: uppercase;
}
.flip-back .flip-link:hover { color: #fff; }

/* ============================================================
   INDUSTRIES — icon + label
   ============================================================ */
.industries { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; }
.industry {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 30px 10px 26px; text-align: center;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.industry:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover); border-color: var(--cyan); }
.industry .ind-icon { color: var(--heading); margin-bottom: 14px; display: inline-flex; }
.industry:hover .ind-icon { color: var(--blue); }
.industry h3 { font-size: 16px; font-weight: 500; color: var(--ink-strong); }

/* ============================================================
   SERVICES — feature boxes
   ============================================================ */
/* tinted cards with a solid icon tile and a brand bar on top, so the grid
   doesn't wash out white-on-white; hover flips the card to brand purple */
.services-grid { gap: 22px; }
.service-card {
  position: relative; overflow: hidden;
  background: var(--surface-tint); border: 1px solid var(--surface-tint-line); border-radius: var(--radius-lg);
  padding: 34px 26px 28px; display: flex; flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}
.service-card::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
  background: linear-gradient(90deg, var(--cyan), var(--blue));
}
/* diagonal corner ribbon (GEO: hot, DFP: key); the card's overflow:hidden clips its ends */
.svc-ribbon {
  position: absolute; top: 16px; right: -42px; z-index: 1; width: 150px; padding: 5px 0;
  transform: rotate(45deg); text-align: center; font-size: 12.5px; font-weight: 700; letter-spacing: 0.06em; line-height: 1.3;
  box-shadow: 0 3px 8px rgba(46, 20, 82, 0.18); pointer-events: none;
}
.svc-ribbon--hot { background: linear-gradient(90deg, #ff7a3d, #e8574a); color: #fff; }
.svc-ribbon--key { background: var(--cyan); color: var(--purple); }
.service-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover); background: var(--purple); border-color: var(--heading); }
.service-card .svc-icon {
  width: 52px; height: 52px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  background: var(--purple); color: var(--cyan); margin-bottom: 20px;
  transition: background 0.25s ease, color 0.25s ease;
}
.service-card:hover .svc-icon { background: var(--cyan); color: var(--purple); }
.service-card h3 { font-size: 17px; font-weight: 700; color: var(--heading); margin-bottom: 10px; transition: color 0.25s ease; }
.service-card p { font-size: 14px; color: var(--ink); flex: 1; transition: color 0.25s ease; }
.service-card .svc-more {
  margin-top: 18px; font-family: var(--font-latin); font-size: 12.5px; font-weight: 700;
  letter-spacing: 0.08em; color: var(--blue); text-transform: uppercase; transition: color 0.25s ease;
}
.service-card:hover h3 { color: #fff; }
.service-card:hover p { color: rgba(255, 255, 255, 0.78); }
.service-card:hover .svc-more { color: var(--cyan); }

/* ============================================================
   WHY CHOOSE — parallax image + copy + gradient CTA
   ============================================================ */
.why-section { background: var(--bg-soft); overflow: hidden; }
.why-grid {
  display: grid; grid-template-columns: 5fr 6fr; gap: 56px; align-items: center;
}
.why-media { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-hover); }
.why-media img { display: block; width: 100%; will-change: transform; }
.why-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(46, 20, 82, 0.14), rgba(70, 40, 128, 0.1));
}
.why-content h3 { font-family: var(--font-heading); font-size: 26px; font-weight: 700; color: var(--heading); margin-bottom: 18px; }
.why-divider { width: 56px; height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--cyan), var(--blue)); margin-bottom: 24px; }
.why-content p { font-size: 15.5px; color: var(--ink); margin-bottom: 16px; }
.why-content .btn { margin-top: 18px; }
.why-stats { display: flex; gap: 36px; margin: 26px 0 8px; }
.why-stat b { display: block; font-family: var(--font-latin); font-size: 30px; font-weight: 700; color: var(--blue); line-height: 1.1; }
.why-stat span { font-size: 13px; color: var(--muted); }

/* ============================================================
   TESTIMONIALS — framed cards with overlapping avatar
   ============================================================ */
.testimonials { gap: 26px; margin-top: 60px; }
.testimonial {
  position: relative; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 66px 28px 30px; text-align: center;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.testimonial:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover); border-color: var(--cyan); }
.testimonial .t-avatar {
  position: absolute; top: -32px; left: 50%; transform: translateX(-50%);
  width: 64px; height: 64px; border-radius: 50%; overflow: hidden;
  border: 3px solid #fff; box-shadow: var(--shadow);
}
.testimonial .t-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.testimonial .t-quote-mark {
  font-family: Georgia, serif; font-size: 44px; line-height: 1; color: var(--cyan);
  display: block; margin-bottom: 6px;
}
.testimonial p { font-size: 14.5px; color: var(--ink); font-style: italic; margin-bottom: 18px; }
.testimonial .t-name { font-size: 15px; font-weight: 700; color: var(--heading); }
.testimonial .t-role { font-size: 13px; color: var(--muted); margin-top: 2px; }

/* ============================================================
   CASES — zoom-on-hover grid
   ============================================================ */
.case-grid { gap: 24px; }
.case-card { display: block; color: inherit; }
.case-card:hover { color: inherit; }
.case-thumb {
  border-radius: var(--radius-lg); overflow: hidden; position: relative;
  box-shadow: var(--shadow); background: var(--bg-soft);
  aspect-ratio: 4 / 3;
}
.case-thumb img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.case-card:hover .case-thumb img { transform: scale(1.1); }
.case-thumb::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(46, 20, 82, 0) 55%, rgba(46, 20, 82, 0.32));
  opacity: 0; transition: opacity 0.35s ease;
}
.case-card:hover .case-thumb::after { opacity: 1; }
.case-card h3 { font-size: 16px; font-weight: 600; color: var(--ink-strong); margin-top: 16px; transition: color 0.25s ease; }
.case-card:hover h3 { color: var(--blue); }
.case-card .case-tag {
  display: inline-block; margin-top: 6px; font-family: var(--font-latin);
  font-size: 12px; font-weight: 600; letter-spacing: 0.08em; color: var(--muted); text-transform: uppercase;
}

/* ============================================================
   CONTACT CTA
   ============================================================ */
.contact-cta {
  background: linear-gradient(150deg, var(--purple) 0%, var(--blue) 130%);
  color: #fff; text-align: center; position: relative; overflow: hidden;
}
.contact-cta::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-size: 26px 26px;
}
.contact-cta .container { position: relative; z-index: 1; }
.contact-cta h2 { font-family: var(--font-heading); font-size: 32px; font-weight: 700; color: #fff; margin-bottom: 18px; }
.contact-cta p { max-width: 680px; margin: 0 auto 36px; color: rgba(255, 255, 255, 0.85); font-size: 16px; }

/* ============================================================
   GENERIC CARDS (articles / lists)
   ============================================================ */
.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-5 { grid-template-columns: repeat(5, 1fr); }

.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 26px; box-shadow: var(--shadow);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.card h3 { font-size: 18px; color: var(--ink-strong); margin-bottom: 10px; }
.card p { font-size: 14.5px; color: var(--ink); }
.card-link { display: block; }
.card-link:hover { border-color: var(--cyan); color: inherit; }
.card-more { display: inline-block; margin-top: 14px; font-size: 14px; font-weight: 600; color: var(--blue); }
.card-date { display: block; font-family: var(--font-latin); font-size: 13px; color: var(--muted); margin-bottom: 8px; }

/* ============================================================
   ARTICLE
   ============================================================ */
.article { padding: 48px 0 84px; }
.breadcrumb { font-size: 13.5px; color: var(--muted); margin-bottom: 28px; }
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--blue); }
.breadcrumb-sep { margin: 0 8px; }
.article-header { margin-bottom: 28px; }
.article-category {
  display: inline-block; font-family: var(--font-latin); font-size: 12.5px; font-weight: 600;
  letter-spacing: 0.1em; color: var(--blue); text-transform: uppercase; margin-bottom: 10px;
}
.article-header h1 { font-family: var(--font-heading); font-size: 34px; line-height: 1.35; color: var(--heading); margin-bottom: 12px; }
.article-meta { font-size: 14px; color: var(--muted); }
.article-cover { margin: 28px 0; border-radius: var(--radius-lg); overflow: hidden; }

.conclusion {
  background: var(--bg-soft);
  border-left: 4px solid var(--cyan);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  padding: 22px 26px; margin: 28px 0 36px;
}
.conclusion-label {
  display: block; font-family: var(--font-latin); font-size: 12.5px; font-weight: 700;
  letter-spacing: 0.14em; color: var(--blue); margin-bottom: 8px;
}
.conclusion p { font-size: 17px; line-height: 1.8; color: var(--ink-strong); font-weight: 500; }

.toc {
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 18px 24px; margin-bottom: 36px; background: var(--surface);
}
.toc-title { font-weight: 700; color: var(--heading); font-size: 14px; display: block; margin-bottom: 8px; }
.toc ol { padding-left: 20px; }
.toc li { font-size: 14.5px; margin: 4px 0; }

.prose h2 {
  font-family: var(--font-heading); font-size: 23px; color: var(--heading); margin: 40px 0 16px;
  padding-bottom: 10px; border-bottom: 1px solid var(--line);
}
.prose h3 { font-size: 18px; color: var(--ink-strong); margin: 26px 0 10px; }
.prose p { margin-bottom: 16px; }
.prose ul, .prose ol { padding-left: 24px; margin-bottom: 16px; }
.prose img { border-radius: var(--radius-lg); margin: 20px 0; }
.prose blockquote {
  border-left: 3px solid var(--cyan); padding: 4px 18px; margin: 20px 0;
  color: var(--ink-strong); background: var(--bg-soft); border-radius: 0 8px 8px 0;
}

/* in-body article tables share the data-table look */
.data-table, .prose table { width: 100%; border-collapse: collapse; margin: 20px 0 28px; font-size: 14.5px; }
.data-table th, .prose th {
  text-align: left; font-family: var(--font-latin); font-size: 13px; letter-spacing: 0.06em;
  color: #fff; background: var(--purple); padding: 10px 14px;
}
.data-table td, .prose td { border-bottom: 1px solid var(--line); padding: 10px 14px; vertical-align: top; }
.data-table tr:nth-child(even) td, .prose tr:nth-child(even) td { background: var(--bg-soft); }
.data-table a { word-break: break-all; font-size: 13px; }
@media (max-width: 640px) {
  /* wide body tables scroll sideways instead of squashing the columns */
  .prose table { display: block; overflow-x: auto; }
  .prose th, .prose td { min-width: 110px; }
}

.faq { margin: 48px 0; }
.faq h2 { font-family: var(--font-heading); font-size: 23px; color: var(--heading); margin-bottom: 20px; }
.faq-item { border: 1px solid var(--line); border-radius: var(--radius-lg); margin-bottom: 12px; background: var(--surface); }
.faq-item summary {
  cursor: pointer; padding: 16px 20px; font-weight: 600; color: var(--ink-strong); list-style: none;
}
.faq-item summary::before { content: "Q"; font-family: var(--font-latin); color: var(--blue); font-weight: 700; margin-right: 10px; }
.faq-item[open] summary { border-bottom: 1px solid var(--line); }
.faq-item p { padding: 14px 20px 18px 46px; font-size: 15px; }

.related { margin-top: 56px; }
.related h2 { font-family: var(--font-heading); font-size: 21px; color: var(--heading); margin-bottom: 20px; }

.page-title { font-family: var(--font-heading); font-size: 32px; color: var(--heading); margin-bottom: 32px; }
.pagination { display: flex; gap: 8px; margin-top: 36px; justify-content: center; }
.pagination a {
  min-width: 36px; text-align: center; padding: 6px 12px; border-radius: var(--radius-lg);
  border: 1px solid var(--line); color: var(--ink-strong); font-family: var(--font-latin);
}
.pagination a.active, .pagination a:hover { background: var(--purple); border-color: var(--heading); color: #fff; }

/* ============================================================
   FOOTER — 3 columns + copyright + back-to-top
   ============================================================ */
.site-footer { background: var(--purple-deep); color: rgba(255, 255, 255, 0.72); }
.footer-main { padding: 56px 0 40px; }
.footer-grid { display: grid; grid-template-columns: 1.3fr 0.8fr 1fr 1.4fr; gap: 40px; align-items: start; }
.footer-col h4 {
  font-family: var(--font-heading); font-size: 13px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: #fff; margin-bottom: 16px;
}
.footer-links { list-style: none; display: grid; gap: 9px; }
.footer-links a { color: rgba(255, 255, 255, 0.72); font-size: 14px; line-height: 1.5; transition: color 0.2s ease; }
.footer-links a:hover { color: var(--cyan); }

/* --- brand block --- */
.footer-logo { display: inline-block; margin-bottom: 14px; }
.footer-logo img { height: 32px; width: auto; display: block; }
.footer-slogan { font-family: var(--font-latin); font-size: 17px; font-weight: 700; color: var(--cyan); margin: 2px 0 6px; letter-spacing: -0.01em; }
.footer-tagline { font-size: 14px; line-height: 1.7; color: rgba(255, 255, 255, 0.66); max-width: 280px; }
.footer-follow { display: flex; align-items: center; gap: 14px; margin-top: 20px; }
.footer-follow img { width: 76px; height: 76px; border-radius: 8px; background: #fff; padding: 4px; flex-shrink: 0; }
.footer-follow span { display: block; font-size: 12.5px; color: rgba(255, 255, 255, 0.6); margin-bottom: 10px; }

/* --- contact block: label + value pairs --- */
.footer-info { list-style: none; display: grid; gap: 12px; }
.footer-info li { display: grid; gap: 2px; }
.footer-info-label { font-size: 12px; font-weight: 600; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.45); }
.footer-info-value { font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, 0.8); }
.footer-info-value a { color: rgba(255, 255, 255, 0.8); }
.footer-info-value a:hover { color: var(--cyan); }

.footer-social { display: flex; gap: 12px; align-items: center; }
.footer-social a,
.footer-wechat {
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.28);
  display: flex; align-items: center; justify-content: center; color: #fff;
  background: transparent; padding: 0; cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.footer-social a:hover,
.footer-wechat:hover { background: var(--cyan); border-color: var(--cyan); color: var(--purple); transform: translateY(-3px); }
.footer-wechat[aria-expanded="true"] { background: var(--cyan); border-color: var(--cyan); color: var(--purple); }
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12); padding: 20px 0;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.footer-bottom-right { display: flex; align-items: center; gap: 22px; }
.footer-copy { font-size: 13px; color: rgba(255, 255, 255, 0.55); }
.footer-icp { font-size: 12.5px; color: rgba(255, 255, 255, 0.5); }
.footer-icp:hover { color: var(--cyan); }
.footer-lang { font-size: 12.5px; font-weight: 600; color: rgba(255, 255, 255, 0.75); padding: 4px 12px; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 999px; }
.footer-lang:hover { color: var(--purple); background: var(--cyan); border-color: var(--cyan); }
.footer-actions, .footer-follow .ff-press { display: none; }

/* --- WeChat QR popup --- */
/* Visibility must never depend on an animation finishing: if the animation is
   skipped or stalls (reduced-motion, GPU/compositor quirks), an opacity-based
   entrance leaves the popup invisible. So the base state is fully opaque and
   the entrance only animates transform. */
.wechat-pop {
  position: fixed; z-index: 130;
  right: max(24px, calc((100vw - 1120px) / 2 + 24px)); bottom: 96px;
  width: 248px; padding: 22px 20px 18px;
  background: var(--surface); border-radius: var(--radius-lg);
  box-shadow: 0 18px 48px rgba(31, 14, 58, 0.32);
  text-align: center;
  display: none;
  opacity: 1;
}
.wechat-pop.is-open {
  display: block;
  animation: wechatPop 0.2s ease-out;
}
@keyframes wechatPop {
  from { transform: translateY(10px) scale(0.98); }
  to   { transform: none; }
}
.wechat-pop-close {
  position: absolute; top: 6px; right: 10px;
  background: none; border: 0; cursor: pointer; padding: 4px;
  font-size: 22px; line-height: 1; color: var(--muted);
}
.wechat-pop-close:hover { color: var(--purple); }
.wechat-pop-title {
  font-size: 14px; font-weight: 600; color: var(--ink-strong);
  margin-bottom: 14px; padding: 0 16px;
}
.wechat-pop img { display: block; width: 200px; height: 200px; margin: 0 auto; }
.wechat-pop-note { margin-top: 10px; font-size: 12.5px; color: var(--muted); }
@media (max-width: 560px) {
  .wechat-pop { right: 16px; left: 16px; width: auto; bottom: 84px; }
}

/* back to top */
.back-to-top {
  position: fixed; right: 26px; bottom: 26px; z-index: 90;
  width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer;
  background: linear-gradient(135deg, var(--blue-light), var(--blue)); color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 26px rgba(70, 40, 128, 0.4);
  opacity: 0; visibility: hidden; transform: translateY(14px);
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
}
.back-to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { transform: translateY(-3px); }

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.6, 0.2, 1); }
.reveal.in { opacity: 1; transform: none; }
.reveal-left { opacity: 0; transform: translateX(-36px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.6, 0.2, 1); }
.reveal-left.in { opacity: 1; transform: none; }
.reveal-right { opacity: 0; transform: translateX(36px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.6, 0.2, 1); }
.reveal-right.in { opacity: 1; transform: none; }
.reveal-zoom { opacity: 0; transform: scale(0.92); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.6, 0.2, 1); }
.reveal-zoom.in { opacity: 1; transform: none; }

/* hero entrance */
.hero-caption, .hero-title, .hero-actions { opacity: 0; transform: translateY(26px); animation: heroIn 0.9s cubic-bezier(0.2, 0.6, 0.2, 1) forwards; }
.hero-caption { animation-delay: 0.15s; }
.hero-title { animation-delay: 0.3s; }
.hero-actions { animation-delay: 0.45s; }
@keyframes heroIn { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .reveal, .reveal-left, .reveal-right, .reveal-zoom { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   SECTION PAGES — page head + info cards
   ============================================================ */
/* Same gradient as .hero, and pulled up behind the header so the purple runs
   from the very top of the viewport exactly as it does on the homepage. */
.page-head {
  color: #fff;
  margin-top: calc(-1 * var(--header-h));
  padding: calc(var(--header-h) + 64px) 0 72px;
  position: relative; overflow: hidden;
}
/* The homepage hero carries a large cyan glow on the right; without it the
   page heads read as a flat purple slab and feel like a different site.
   ::after already holds the dot texture, so the glow goes on ::before.
   Two radial washes on one full-bleed layer: the cyan one mirrors the hero's
   glow on the right, a fainter blue one adds depth low-left. Percentage
   positioning means it adapts to any page-head height with no hard edge. */
.page-head::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 86% 42%,
      rgba(90, 230, 250, 0.19) 0%,
      rgba(70, 40, 128, 0.12) 22%,
      transparent 50%),
    radial-gradient(circle at 4% 96%,
      rgba(70, 40, 128, 0.14) 0%,
      transparent 42%);
}
.page-head::after {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px);
  background-size: 26px 26px; pointer-events: none;
}
.page-head .container { position: relative; z-index: 1; }
.page-head:has(> .page-head-person) { min-height: var(--section-hero-h); }
.page-head .breadcrumb { margin-bottom: 20px; font-size: 13.5px; color: rgba(255, 255, 255, 0.55); }
.page-head .breadcrumb a { color: rgba(255, 255, 255, 0.72); }
.page-head .breadcrumb a:hover { color: var(--cyan); }
.page-head h1 { font-family: var(--font-heading); font-size: 40px; font-weight: 700; color: #fff; margin-bottom: 16px; }
.page-head .page-intro { font-size: 17px; line-height: 1.75; color: rgba(255, 255, 255, 0.85); max-width: 780px; }
/* contact page-head: the consultant stands inside the cyan glow (::before),
   right side. z-index:1 lifts her above the glow + dot texture (both
   z-index:auto pseudos); .container is also z-index:1 but comes earlier in
   tree order and never overlaps her spatially. Decorative side imagery —
   hidden once the head gets too narrow for the text to keep clear of her. */
/* Height is the smaller of the design clamp and the space that actually
   exists below the fixed header: 100% resolves against the page-head's
   padding box, so calc() keeps a 32px clearance under the nav no matter
   how tall the head content gets. Without this the figure (330px) grew
   past the header and overlapped it by ~35px on desktop. */
.page-head-person {
  position: absolute;
  right: clamp(20px, 5vw, 72px);
  bottom: 0;
  height: min(clamp(200px, 26vw, 290px), calc(100% - var(--header-h) - 32px));
  pointer-events: none;
  z-index: 1;
  filter: drop-shadow(0 16px 30px rgba(0, 0, 0, 0.30));
}
.page-head-person img { display: block; height: 100%; width: auto; }
@media (max-width: 1100px) {
  .page-head-person { display: none; }
}

/* ============================================================
   ENQUIRY FORM — /contact/form/ (Flask-rendered, POST-backed)
   Two-column shell: the form card carries the conversation, the
   aside answers "what if I'd rather email / meet the team first".
   ============================================================ */

/* A shorter head than the marketing pages. The standard one is 397px tall,
   which pushed the first field — and, worse, the confirmation card after
   submitting — below the fold on a 720/800px-tall laptop screen. Nothing in
   this head needs that much room: it is a utility page, not a landing page. */
.page-head.page-head--form {
  padding: calc(var(--header-h) + 28px) 0 34px;
}
.page-head--form h1 { font-size: 32px; margin-bottom: 12px; }
.page-head--form .breadcrumb { margin-bottom: 14px; }
.page-head--form .page-intro { font-size: 16px; max-width: 700px; }
/* Once the enquiry is in, "one minute to tell us…" has done its job — drop it
   so the receipt card lands inside the first screen instead of below it. */
.page-head--form.is-done { padding-bottom: 28px; }
.page-head--form.is-done .page-intro { display: none; }
/* the form is the content here: halve the standard 84px section lead-in */
.section--form { padding-top: 44px; }

.form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 40px;
  align-items: start;
}
.inquiry-form {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 34px 36px;
}
/* Form controls — one shared skin so inputs, selects and textareas
   read as the same component. 16px keeps iOS Safari from zooming
   the viewport when a field takes focus. */
.inquiry-form input[type="text"],
.inquiry-form input[type="email"],
.inquiry-form input[type="tel"],
.inquiry-form select,
.inquiry-form textarea {
  width: 100%;
  font: inherit;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-strong);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  -webkit-appearance: none;
  appearance: none;
}
.inquiry-form textarea { resize: vertical; min-height: 108px; }
.inquiry-form input::placeholder,
.inquiry-form textarea::placeholder { color: var(--muted); }
.inquiry-form input:focus,
.inquiry-form select:focus,
.inquiry-form textarea:focus {
  outline: none;
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(90, 230, 250, 0.18);
}
/* Select: strip the native arrow, paint the brand one back in. */
.inquiry-form select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%232e1452' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m1 1 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
  cursor: pointer;
}

/* Honeypot — invisible to humans, irresistible to bots. Off-screen rather
   than display:none, which cheap bots skip entirely. The selector must
   out-specify .inquiry-form input[type="text"] above (same specificity,
   later in the sheet wins), otherwise the control skin leaks onto it. */
.inquiry-form input.hp-field {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  background: transparent;
  opacity: 0;
  pointer-events: none;
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-bottom: 18px;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}
.inquiry-form > .field { margin-bottom: 22px; }
.field-label {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-strong);
}
.field-label i,
.cat-field legend i { font-style: normal; color: #d92d20; margin-left: 2px; }
.field-error { font-size: 12.5px; line-height: 1.5; color: #d92d20; }
.field-hint { font-size: 12.5px; line-height: 1.6; color: var(--muted); }

/* Category + budget pickers — compact radio pills that wrap, so seven
   options fit in two short rows instead of a wall of cards. The whole pill
   is the hit area. */
.cat-field {
  border: 0;
  padding: 0;
  margin: 0 0 22px;
  min-width: 0;
}
.cat-field legend {
  display: block;
  padding: 0;
  margin-bottom: 10px;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-strong);
}
.field-label em,
.cat-field legend em {
  font-style: normal;
  font-weight: 400;
  font-size: 12.5px;
  color: var(--muted);
  margin-left: 6px;
}
.pick-group { display: flex; flex-wrap: wrap; gap: 8px; }
.pick {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px 8px 11px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--ink-strong);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.pick--sm { padding: 6px 13px; font-size: 13.5px; }
.pick:hover { border-color: rgba(90, 230, 250, 0.7); }
.pick input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  margin: 0;
}
.pick-icon { display: flex; color: var(--heading); }
.pick-icon svg { width: 17px; height: 17px; }
.pick:has(input:checked) {
  border-color: var(--cyan);
  background: linear-gradient(135deg, rgba(90, 230, 250, 0.14), rgba(70, 40, 128, 0.08));
  box-shadow: 0 0 0 1px var(--cyan);
  color: var(--heading);
}
.pick:has(input:checked) .pick-icon { color: var(--blue); }
.pick:has(input:focus-visible) {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

/* Group-site form skin (dekuple.com, Nov 2026): fields sit straight on a
   cool grey panel, white pill inputs with a mid-grey outline, bold labels
   inset to the text, black asterisks. Overrides the card skin above. */
.section--form { background: var(--bg-soft); }
.inquiry-form { background: transparent; border: 0; box-shadow: none; padding: 4px 0 0; }
.inquiry-form input[type="text"],
.inquiry-form input[type="email"],
.inquiry-form input[type="tel"],
.inquiry-form select,
.inquiry-form textarea {
  background-color: #fff;
  border: 1px solid #8a8f99;
  border-radius: 999px;
  padding: 14px 24px;
}
.inquiry-form textarea { border-radius: 26px; padding: 16px 24px; min-height: 120px; }
.inquiry-form input::placeholder,
.inquiry-form textarea::placeholder { color: #5a616b; opacity: 0.8; }
.inquiry-form input:focus,
.inquiry-form select:focus,
.inquiry-form textarea:focus { border-color: #000; box-shadow: 0 0 0 3px rgba(90, 230, 250, 0.35); }
.inquiry-form select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m1 1 5 5 5-5'/%3E%3C/svg%3E");
  background-position: right 24px center;
  padding-right: 52px;
}
.field { gap: 9px; }
.field-label,
.cat-field legend { font-size: 15px; font-weight: 700; letter-spacing: 0; color: var(--ink-strong); padding-left: 24px; }
.cat-field legend { padding-left: 0; }
.field-label i,
.cat-field legend i { color: inherit; margin-left: 1px; }
.field-error { padding-left: 24px; }
.pick { border-color: #8a8f99; background: #fff; }
.pick:has(input:checked) { border-color: #000; background: var(--cyan); box-shadow: none; color: #000; }
.pick:has(input:checked) .pick-icon { color: #000; }
html[data-theme="dark"] .inquiry-form input[type="text"],
html[data-theme="dark"] .inquiry-form input[type="email"],
html[data-theme="dark"] .inquiry-form input[type="tel"],
html[data-theme="dark"] .inquiry-form select,
html[data-theme="dark"] .inquiry-form textarea,
html[data-theme="dark"] .pick { background-color: var(--surface); border-color: rgba(255, 255, 255, 0.28); }
html[data-theme="dark"] .inquiry-form select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m1 1 5 5 5-5'/%3E%3C/svg%3E"); }
html[data-theme="dark"] .inquiry-form input::placeholder,
html[data-theme="dark"] .inquiry-form textarea::placeholder { color: var(--muted); }
html[data-theme="dark"] .inquiry-form input:focus,
html[data-theme="dark"] .inquiry-form select:focus,
html[data-theme="dark"] .inquiry-form textarea:focus { border-color: var(--cyan); }
html[data-theme="dark"] .pick:has(input:checked) { background: var(--cyan); border-color: var(--cyan); color: #000; }
.inquiry-form .btn-gradient { background: var(--cyan); color: #000; }
.inquiry-form .btn-gradient:hover { color: #000; box-shadow: 0 10px 24px rgba(90, 230, 250, 0.45); }

.form-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 26px;
}
.form-eta { font-size: 13px; line-height: 1.6; color: var(--muted); }
.form-alert {
  font-size: 14px;
  line-height: 1.7;
  color: #b42318;
  background: #fef3f2;
  border: 1px solid #fda29b;
  border-radius: var(--radius-lg);
  padding: 12px 16px;
  margin-bottom: 20px;
}

/* Aside — email + team shortcuts; sticks beside the form on desktop. */
.form-aside {
  display: grid;
  gap: 24px;
  position: sticky;
  top: calc(var(--header-h) + 24px);
}

/* Success state — replaces the whole grid, centred like a receipt. */
.form-tool-banner {
  margin: 0 0 18px; padding: 12px 16px; border-radius: var(--radius-lg);
  background: rgba(90, 230, 250, 0.12); border-left: 3px solid var(--cyan);
  font-size: 14.5px; font-weight: 600; color: var(--heading);
}
.tool-actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }

.form-success {
  max-width: 640px;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 56px 48px;
  text-align: center;
}
.form-success-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  margin: 0 auto 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, var(--cyan), var(--blue));
  box-shadow: 0 10px 24px rgba(70, 40, 128, 0.35);
}
.form-success h2 {
  font-family: var(--font-heading);
  font-size: 26px;
  font-weight: 700;
  color: var(--ink-strong);
  margin-bottom: 12px;
}
.form-success-id { font-size: 14px; color: var(--muted); margin-bottom: 14px; }
.form-success-id b { color: var(--ink-strong); font-weight: 700; letter-spacing: 0.04em; }
.form-success > p { font-size: 15px; line-height: 1.8; max-width: 460px; margin: 0 auto; }
/* where the reference number used to be: a short proverb instead (a visible
   id would tell the visitor how few enquiries we get). The label on the left
   tells them what the phrase is for — quote it back to us and we know which
   enquiry it is, without ever exposing a count. */
.form-success p.form-success-quote {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--ink-strong);
  max-width: 520px;
  margin: 0 auto 20px;
  padding-bottom: 18px;
  position: relative;
}
.form-success-quote .quote-label {
  flex: 0 0 auto;
  font-family: var(--font-cjk);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1;
  padding: 6px 9px 5px;
  border: 1px solid rgba(70, 40, 128, 0.32);
  border-radius: 999px;
  color: var(--blue);
  background: rgba(70, 40, 128, 0.06);
  white-space: nowrap;
}
.form-success-quote .quote-text { flex: 0 1 auto; }
.form-success p.form-success-quote::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 34px;
  height: 2px;
  margin-left: -17px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--cyan), var(--blue));
}
.form-success-links {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 30px;
}

@media (max-width: 1100px) {
  .form-grid { grid-template-columns: 1fr; gap: 32px; }
  .form-aside { position: static; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .inquiry-form { padding: 26px 20px; }
  .field-row { grid-template-columns: 1fr; gap: 0; margin-bottom: 0; }
  .field-row .field { margin-bottom: 18px; }
  .pick { font-size: 13.5px; padding: 7px 12px 7px 10px; }
  .form-aside { grid-template-columns: 1fr; }
  .form-success { padding: 44px 24px; }
  .form-success h2 { font-size: 22px; }
  /* keep the label above the phrase instead of squeezing on one line */
  .form-success p.form-success-quote { font-size: 16px; gap: 10px; }
  .form-success-quote .quote-label { font-size: 10px; }
}

.info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.info-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.info-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 34px 30px; display: flex; flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.info-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); border-color: rgba(90, 230, 250, 0.55); }
.info-card .info-icon {
  width: 52px; height: 52px; border-radius: 14px; margin-bottom: 18px;
  background: linear-gradient(135deg, rgba(90, 230, 250, 0.18), rgba(70, 40, 128, 0.12));
  color: var(--heading); display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.info-card h3 { font-size: 19px; color: var(--ink-strong); margin-bottom: 10px; }
.info-card p { font-size: 14.5px; line-height: 1.75; color: var(--ink); }
.info-card .info-link { margin-top: 18px; font-size: 14px; font-weight: 600; color: var(--blue); }
.info-card .info-link:hover { color: var(--heading); }

.addr-block { font-size: 15px; line-height: 1.9; color: var(--ink); }
.addr-block b { color: var(--ink-strong); font-weight: 600; }
.addr-block p + p { margin-top: 16px; }

/* ============================================================
   CASE DETAIL
   ============================================================ */
.case-client {
  display: inline-block; margin-bottom: 14px; padding: 5px 14px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--cyan); background: rgba(90, 230, 250, 0.14);
  border: 1px solid rgba(90, 230, 250, 0.45);
}
.case-meta {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line);
  border-radius: var(--radius-lg); overflow: hidden;
}
.case-meta-item {
  background: var(--surface); padding: 24px 26px; display: flex; flex-direction: column; gap: 8px;
}
.case-meta-label {
  font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-muted, #8b8b9a);
}
.case-meta-value { font-size: 16px; font-weight: 600; color: var(--ink-strong); line-height: 1.5; }
.case-prose h2 { margin-top: 40px; }
.case-prose h2:first-child { margin-top: 0; }
.case-prose ul { margin: 14px 0; padding-left: 22px; }
.case-prose li { margin-bottom: 10px; line-height: 1.8; color: var(--ink); }

/* Case result metrics. The legacy importer stored one metric as three
   separate <li>s (value / unit / label); publisher._regroup_case_kpis()
   rebuilds them as tiles so "+" and "%" stop being their own bullet points. */
.kpi-period {
  margin: -6px 0 20px; font-family: var(--font-latin); font-style: italic;
  font-size: 15px; letter-spacing: 0.02em; color: var(--muted);
}
.kpi-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px;
  margin: 18px 0 34px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden;
}
.kpi-item {
  padding: 30px 32px; display: flex; flex-direction: column; gap: 10px;
  background-color: var(--surface);
  background-image:
    linear-gradient(rgba(46, 20, 82, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(46, 20, 82, 0.035) 1px, transparent 1px);
  background-size: 24px 24px;
}
.kpi-value {
  font-family: var(--font-latin); font-size: clamp(38px, 4.6vw, 56px);
  font-weight: 800; line-height: 1.02; letter-spacing: -0.035em;
  color: var(--ink-strong); white-space: nowrap;
}
.kpi-unit { font-size: 0.62em; font-weight: 700; margin-left: 3px; color: var(--purple); }
.kpi-label { font-size: 14.5px; font-weight: 700; color: var(--ink-strong); line-height: 1.5; }
@media (max-width: 640px) {
  .kpi-grid { grid-template-columns: 1fr; }
  .kpi-item { padding: 24px 26px; }
  .kpi-value { font-size: 44px; }
}
.case-gallery { display: grid; gap: 28px; }
.case-shot {
  margin: 0; border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--line); background: var(--surface);
}
.case-shot img { display: block; width: 100%; height: auto; }

/* ============================================================
   SERVICE DETAIL
   ============================================================ */
.service-prose h2 { margin-top: 44px; }
/* service pages: the top TOC box only shows where the sticky side list is hidden */
.svc-toc { margin: 0 0 32px; padding: 20px 24px; background: var(--bg-soft); border-radius: var(--radius-lg); border: 1px solid var(--line); }
.svc-toc .toc-title { margin-bottom: 10px; }
.svc-toc ol { margin: 0; }
.svc-toc li { margin: 6px 0; }
/* mid-page call to action: sits between two sections, never blocks reading */
.svc-inline-cta {
  margin: 40px 0; padding: 28px 30px; border-radius: var(--radius-lg);
  background: linear-gradient(150deg, var(--purple) 0%, var(--blue) 130%); color: #fff;
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.svc-inline-cta p { margin: 0; color: #fff; font-size: 17px; font-weight: 600; line-height: 1.6; }
.svc-inline-cta .btn { white-space: nowrap; flex-shrink: 0; }
/* expert faces inside the button: the photos sit at the pill's left end */
.btn-faces { display: inline-flex; align-items: center; gap: 12px; padding: 7px 24px 7px 8px; }
.btn-faces-imgs { display: flex; flex-shrink: 0; }
.btn-faces-imgs img { width: 32px; height: 32px; margin: 0; border-radius: 50%; object-fit: cover; border: 2px solid #fff; background: #fff; }
.prose .btn-faces { display: inline-flex; }
.btn-faces-imgs img[hidden] { display: none; }
.btn-faces-imgs img + img { margin-left: -10px; }
.btn-faces:hover .btn-faces-imgs img { transform: translateY(-1px); }
/* desktop: question and button on one line, never wrapped */
@media (min-width: 900px) { .svc-inline-cta { flex-wrap: nowrap; } .svc-inline-cta p { white-space: nowrap; } }
@media (max-width: 560px) { .svc-inline-cta { flex-direction: column; align-items: flex-start; padding: 22px; gap: 16px; } .svc-inline-cta p { font-size: 15px; } }
.service-prose h2:first-child { margin-top: 0; }
.service-prose figure { margin: 8px 0 22px; }
.service-prose figure img { display: block; width: 100%; height: auto; margin: 0; border-radius: var(--radius-lg); border: 1px solid var(--line); }
.service-prose figcaption { margin-top: 8px; font-size: 13px; line-height: 1.6; color: var(--muted); text-align: center; }
/* the data/FAQ block continues the same text column: same heading gap as any other h2 */
.service-prose + .service-prose > h2:first-child { margin-top: 44px; }
.service-prose + .faq, .service-prose + .service-prose + .faq { margin-top: 44px; }
.svc-layout .article-main > .faq:last-child { margin-bottom: 0; }
/* last block in a section: the section's own padding is the gap */
.section .container > .faq:last-child { margin-bottom: 0; }
.service-prose ul { margin: 16px 0; padding-left: 22px; }
.service-prose li { margin-bottom: 10px; line-height: 1.8; color: var(--ink); }

.step-list { list-style: none; margin: 26px 0 0; padding: 0; counter-reset: step; }
.step-item {
  display: flex; gap: 20px; padding: 22px 0; border-top: 1px solid var(--line);
}
.step-item:first-child { border-top: none; padding-top: 6px; }
.step-num {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-latin); font-size: 14px; font-weight: 700;
  color: var(--heading); background: rgba(70, 40, 128, 0.09);
  border: 1px solid rgba(70, 40, 128, 0.18);
}
.step-body { flex: 1; min-width: 0; }
/* the heading's first line sits level with the 40px number badge, also when
   it wraps (.prose h3 would add a 26px top margin): (40 - 24) / 2 = 8px */
.step-body h3 {
  margin: 0 0 6px; padding-top: 8px;
  font-size: 17px; line-height: 24px; color: var(--ink-strong);
}
.step-body > :last-child { margin-bottom: 0; }
.step-body ul { margin-top: 0; }
.step-body p { font-size: 15px; line-height: 1.8; color: var(--ink); }
.step-body p + p { margin-top: 8px; }

.service-figures { display: grid; gap: 24px; margin-top: 30px; }
.service-figure {
  margin: 0; border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--line); background: var(--surface);
}
.service-figure img { display: block; width: 100%; height: auto; }

/* ============================================================
   TEAM — hero image + roster grouped by function
   ============================================================ */
/* Every section index page (service, case, insights, tools, team, career,
   contact) opens with the same hero height: --section-hero-h is a floor
   sized for the longest intro (EN insights, four lines), so pages with shorter copy no longer open
   shorter. Text is anchored to the top (stretch + fixed top padding), so the
   breadcrumb and title sit at the same spot on every page. */
:root { --section-hero-h: 430px; }
.team-hero {
  position: relative; display: flex; align-items: stretch;
  min-height: var(--section-hero-h);
  overflow: hidden;
  background: var(--purple-deep);
  /* like .page-head, sit behind the header so the photo reaches the top edge */
  margin-top: calc(-1 * var(--header-h));
}
.team-hero picture { position: absolute; inset: 0; }
.team-hero img { width: 100%; height: 100%; object-fit: cover; object-position: center 62%; display: block; }
.team-hero-overlay {
  position: relative; z-index: 1; width: 100%;
  padding: calc(var(--header-h) + 48px) 0 73px;
  background: linear-gradient(to top,
    rgba(31, 14, 58, 0.94) 0%,
    rgba(31, 14, 58, 0.72) 38%,
    rgba(31, 14, 58, 0.28) 72%,
    rgba(31, 14, 58, 0.05) 100%);
}
/* Drawn backdrops (career: tools/make_career_hero.py, the section pages:
   tools/make_section_heroes.py). Their art sits on the right, so anchor it
   there and shade from the left instead of the bottom — the text column
   stays calm, the illustration stays visible. */
.team-hero--art { background: linear-gradient(#140c26, #2a1a4f 60%, #1c1236); }
.team-hero--art img { object-position: right center; }
/* Wider than the art's own 1600×440 ratio, "cover" would crop its top and
   bottom (labels slide under the header). Fit it whole instead, right-aligned;
   the hero background above is the art's own sky, so the left edge is seamless. */
@media (min-width: 1565px) { /* hero is 430px tall: 1565/430 ≈ 1600/440 */
  .team-hero--art img { object-fit: contain; }
}
.team-hero--art .team-hero-overlay {
  background: linear-gradient(to right,
    rgba(31, 14, 58, 0.88) 0%,
    rgba(31, 14, 58, 0.62) 34%,
    rgba(31, 14, 58, 0.10) 62%,
    rgba(31, 14, 58, 0) 100%);
}
/* Below ~1280px the text column reaches into the art: carry the shade
   further right so the copy stays clean and the art reads on the far side. */
@media (max-width: 1279px) {
  .team-hero--art .team-hero-overlay {
    background: linear-gradient(to right,
      rgba(31, 14, 58, 0.92) 0%,
      rgba(31, 14, 58, 0.84) 58%,
      rgba(31, 14, 58, 0.35) 82%,
      rgba(31, 14, 58, 0.15) 100%);
  }
}
.team-hero-overlay .breadcrumb { margin-bottom: 22px; font-size: 13.5px; color: rgba(255, 255, 255, 0.55); }
.team-hero-overlay .breadcrumb a { color: rgba(255, 255, 255, 0.72); }
.team-hero-overlay .breadcrumb a:hover { color: var(--cyan); }
.team-hero-kicker {
  font-family: var(--font-latin); font-size: 12px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--cyan); margin-bottom: 10px;
}
.team-hero-overlay h1 {
  font-family: var(--font-heading); font-size: clamp(30px, 4.4vw, 40px);
  font-weight: 700; line-height: 1.28; color: #fff; margin-bottom: 16px;
}
.team-hero-lead { font-size: 17px; line-height: 1.8; color: rgba(255, 255, 255, 0.86); max-width: 660px; }

.team-section { padding-top: 52px; }
/* spacing lives on the row so a paired row reads as one band */
.team-row { margin-top: 56px; }
.team-row:first-of-type { margin-top: 24px; }
/* two small groups share a line instead of each owning a full band */
.team-row-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
.team-group { margin-top: 0; }
/* In a paired row the two descriptions have different lengths, which pushed the
   avatar grids onto different baselines. Stretch both columns and let the
   roster absorb the slack, so the two grids always start on the same line. */
.team-row-pair .team-group { display: flex; flex-direction: column; }
.team-row-pair .team-roster { margin-top: auto; }
.team-group-head { margin-bottom: 28px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.team-group-head h3 {
  font-family: var(--font-heading); font-size: 22px; font-weight: 700;
  color: var(--heading); line-height: 1.4;
}
.team-group-head h3::after {
  content: ""; display: block; width: 34px; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, var(--cyan), var(--blue)); margin-top: 10px;
}
.team-group-head p {
  margin-top: 14px;
  font-size: 15px;
  line-height: 1.9;
  color: #3a3a46;
  /* span the full content width so the description's left/right edges line up
     with the member-photo grid sitting directly below it */
  max-width: none;
  letter-spacing: 0.005em;
}
/* in a paired row the column is half as wide — tighten the measure so the
   paragraph does not run edge to edge under a narrow heading */
.team-row-pair .team-group-head p { max-width: 100%; font-size: 14.5px; line-height: 1.85; }

.team-roster { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 28px 22px; }
/* inside a paired row the column is ~half as wide, so cap the roster at two
   cards — that keeps card sizes identical across both side-by-side blocks */
.team-row-pair .team-roster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* leadership group: CEO card spans the top, then Cyril + Boson sit on the next
   row, and the group's intro paragraph drops to a full-width band on its own
   row so it is no longer squeezed into a narrow 3-line box and its left/right
   edges line up with the photo grid below. */
.team-roster-lead { grid-template-columns: repeat(4, 1fr); }
.team-roster-lead .team-lead-note {
  grid-column: 1 / -1; align-self: stretch;
  display: flex; flex-direction: column; justify-content: center;
  padding: 22px 26px; border-radius: var(--radius-lg);
  background: rgba(90, 230, 250, 0.055);
  border: 1px solid rgba(90, 230, 250, 0.22);
  color: var(--ink-strong); font-size: 14.5px; line-height: 1.85;
}
.member { text-align: center; }
.member-avatar {
  display: flex; align-items: center; justify-content: center;
  width: 92px; height: 92px; margin: 0 auto 14px; border-radius: 50%;
  overflow: hidden; background: linear-gradient(135deg, rgba(90, 230, 250, 0.16), rgba(70, 40, 128, 0.12));
  border: 1px solid rgba(70, 40, 128, 0.16);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.member:hover .member-avatar { transform: translateY(-3px); box-shadow: var(--shadow); border-color: rgba(90, 230, 250, 0.6); }
.member-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.member-initial { font-family: var(--font-latin); font-size: 32px; font-weight: 700; color: var(--heading); }
.member-name { font-size: 16px; font-weight: 600; color: var(--ink-strong); line-height: 1.45; }
.member-role { margin-top: 4px; font-size: 13px; line-height: 1.6; color: var(--ink-muted, #8b8b9a); }

/* --- featured member (the group CEO) — spans the row and carries an accent --- */
.member-featured {
  grid-column: 1 / -1; position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: stretch; text-align: left;
  padding: 26px 30px; border-radius: var(--radius-lg);
  background: linear-gradient(115deg, rgba(46, 20, 82, 0.055) 0%, rgba(70, 40, 128, 0.05) 52%, rgba(90, 230, 250, 0.07) 100%);
  border: 1px solid var(--line);
}
.member-featured::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg, var(--cyan), var(--blue));
}
.member-featured-id { display: flex; align-items: center; gap: 26px; }
.member-featured .member-avatar {
  width: 112px; height: 112px; margin: 0; flex-shrink: 0;
  border-color: rgba(90, 230, 250, 0.5);
  background: linear-gradient(135deg, rgba(90, 230, 250, 0.22), rgba(70, 40, 128, 0.16));
}
.member-featured:hover .member-avatar { transform: none; box-shadow: none; }
.member-featured .member-initial { font-size: 42px; }
.member-info { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.member-badge {
  display: inline-block; padding: 4px 12px; border-radius: 999px;
  font-family: var(--font-latin); font-size: 11px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--heading); background: rgba(90, 230, 250, 0.18);
  border: 1px solid rgba(90, 230, 250, 0.45);
}
.member-featured .member-name { font-family: var(--font-heading); font-size: 25px; font-weight: 700; line-height: 1.3; }
.member-featured .member-role { margin-top: 0; font-size: 14.5px; color: var(--blue); font-weight: 600; }

/* CEO pull quote + clickable BFM interview thumbnail, side by side */
.ceo-quote-row {
  display: flex; align-items: stretch; gap: 22px;
  margin-top: 22px;
}
.member-featured .ceo-quote {
  position: relative; flex: 1 1 auto; margin: 0;
  padding: 18px 22px 18px 28px;
  border-radius: 14px; border: 1px solid rgba(90, 230, 250, 0.22);
  background: rgba(90, 230, 250, 0.055);
  color: var(--ink-strong); font-size: 14.5px; line-height: 1.85;
}
.member-featured .ceo-quote::before {
  content: "\201C"; position: absolute; left: 6px; top: -8px;
  font-family: var(--font-heading); font-size: 46px; line-height: 1;
  color: rgba(90, 230, 250, 0.55);
}
.member-featured .ceo-quote p { margin: 0; }

.ceo-video-thumb {
  position: relative; display: block; flex: 0 0 auto;
  width: 220px; overflow: hidden;
  aspect-ratio: 16 / 9; border-radius: 12px;
  text-decoration: none; background: #0d1024;
  border: 1px solid rgba(255, 255, 255, 0.10);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.ceo-video-thumb:hover { transform: translateY(-2px); border-color: rgba(90, 230, 250, 0.45); box-shadow: 0 16px 38px rgba(12, 14, 42, 0.28); }
.ceo-video-thumb img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0.92; transition: transform .45s ease, opacity .25s ease;
}
.ceo-video-thumb:hover img { transform: scale(1.03); opacity: 1; }
.ceo-video-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.20) 0%, rgba(0,0,0,0.10) 45%, rgba(0,0,0,0.62) 100%);
  pointer-events: none;
}
.ceo-video-play {
  position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%);
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 6px 18px rgba(0,0,0,0.32); color: #14264f;
  transition: transform .25s ease, background .25s ease;
}
.ceo-video-thumb:hover .ceo-video-play { transform: translate(-50%, -50%) scale(1.06); background: #fff; }
.ceo-video-play svg { width: 18px; height: 18px; margin-left: 2px; fill: currentColor; }
.ceo-video-title {
  position: absolute; left: 10px; right: 10px; bottom: 8px;
  color: #fff; font-size: 11px; font-weight: 600; line-height: 1.3;
  text-shadow: 0 1px 3px rgba(0,0,0,0.45);
}

@media (max-width: 820px) {
  :root { --section-hero-h: 360px; }
  .team-hero-overlay { padding-top: calc(var(--header-h) + 36px); padding-bottom: 48px; }
  /* phones: the skyline would sit behind the text, so shade evenly */
  .team-hero--art .team-hero-overlay { background: rgba(31, 14, 58, 0.78); }
  .team-roster { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 24px 16px; }
  .member-avatar { width: 76px; height: 76px; }
  .team-row { margin-top: 44px; }
  /* on narrow screens the paired blocks stack again */
  .team-row-pair { grid-template-columns: 1fr; gap: 0; }
  .team-row-pair .team-group + .team-group { margin-top: 44px; }
  .team-group-head h3 { font-size: 19px; }
  .member-featured { padding: 22px 18px; }
  .member-featured-id { flex-direction: column; align-items: flex-start; gap: 14px; }
  .member-featured .member-avatar { width: 84px; height: 84px; }
  .member-featured .member-name { font-size: 20px; }
  .ceo-quote-row { flex-direction: column; gap: 16px; }
  .ceo-video-thumb { width: 100%; max-width: 320px; }
  .member-featured .ceo-quote { font-size: 13.5px; line-height: 1.8; padding: 14px 16px 14px 22px; }
  .ceo-video-title { font-size: 13px; }
  .ceo-video-play { width: 50px; height: 50px; }
  .ceo-video-play svg { width: 20px; height: 20px; }
  /* stack the leadership row: Cyril / Boson / intro paragraph */
  .team-roster-lead { grid-template-columns: 1fr; }
  .team-roster-lead .team-lead-note { grid-column: auto; }
}

/* ============================================================
   V3 — HERO SPLIT · TRUST STRIP · BENTO · RAILS · INSIGHT · TOOLS · READING
   Only CSS + self-hosted assets. All copy stays in HTML (crawlable).
   ============================================================ */

/* --- eyebrow micro-label --- */
.eyebrow {
  font-family: var(--font-latin); font-size: 12px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--blue);
  margin-bottom: 12px;
}
.eyebrow.center { text-align: center; }

/* --- hero: left copy + right ecosystem panel + single glow --- */
.hero-layout {
  display: grid; grid-template-columns: 1.2fr 1fr;
  gap: 64px; align-items: center;
}
.hero-glow {
  position: absolute; top: -18%; right: -8%; width: 640px; height: 640px;
  border-radius: 50%; pointer-events: none; z-index: 0;
  background: radial-gradient(circle, rgba(90, 230, 250, 0.20) 0%, rgba(70, 40, 128, 0.13) 42%, transparent 70%);
  animation: glowBreath 9s ease-in-out infinite;
}
@keyframes glowBreath {
  0%, 100% { opacity: 0.65; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.07); }
}
.hero-copy { min-width: 0; }
.hero-kicker {
  font-family: var(--font-latin); font-size: 12px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--cyan); margin-bottom: 18px;
}
.hero-copy .hero-caption { font-size: 20px; color: rgba(255, 255, 255, 0.74); margin-bottom: 10px; letter-spacing: 0; }
.hero-title { margin-bottom: 24px; max-width: 640px; }
.hero-title span { color: var(--cyan); }
.hero-lead {
  font-size: 17px; line-height: 1.85; color: rgba(255, 255, 255, 0.84);
  max-width: 560px; margin-bottom: 36px;
}
.hero-actions { margin-bottom: 0; }

/* right panel — China digital ecosystem (real <ul>/<li>, so crawlers read it) */
.hero-map { position: relative; z-index: 1; }
.map-label {
  font-family: var(--font-latin); font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--cyan); margin-bottom: 18px;
}
.map-nodes { list-style: none; display: grid; gap: 9px; }
/* icon | label+desc | badge */
.node {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: 12px;
  padding: 11px 14px; border-radius: 9px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: background 0.25s ease, border-color 0.25s ease;
}
.node:hover { background: rgba(255, 255, 255, 0.09); border-color: rgba(255, 255, 255, 0.18); }
.node { position: relative; cursor: pointer; outline: none; }
/* selected row: colour only — rows never change size */
.node.is-active { background: rgba(255, 255, 255, 0.11); border-color: rgba(90, 230, 250, 0.55); }
.node.is-active .node-icon { color: var(--cyan); }
.node:focus-visible { box-shadow: 0 0 0 2px var(--cyan); }
.node-icon { display: inline-flex; flex-shrink: 0; color: rgba(255, 255, 255, 0.66); }
.node-text { display: block; min-width: 0; }
.node-text b {
  display: block; font-family: var(--font-latin); font-size: 13.5px; font-weight: 600;
  color: #fff; line-height: 1.35;
}
.node-text span {
  display: block; margin-top: 2px; font-size: 12px; line-height: 1.5;
  color: rgba(255, 255, 255, 0.6);
}
.node-tag {
  display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0;
  padding: 3px 9px 3px 7px; border-radius: 999px;
  font-family: var(--font-latin); font-size: 10px; font-weight: 700;
  letter-spacing: 0.08em; line-height: 1;
  color: var(--cyan); background: rgba(90, 230, 250, 0.16);
  border: 1px solid rgba(90, 230, 250, 0.5);
}
/* the lead capability gets a lifted, accented treatment */
.node-hot { background: rgba(90, 230, 250, 0.12); border-color: rgba(90, 230, 250, 0.42); }
.node-hot:hover { background: rgba(90, 230, 250, 0.17); border-color: rgba(90, 230, 250, 0.6); }
.node-hot .node-icon { color: var(--cyan); }
.node-hot .node-text b { color: var(--cyan); }
@media (prefers-reduced-motion: reduce) {
  .btn-ai::after, .btn-ai-spark { animation: none; }
}
/* "China digital ecosystem": a light list — product name, then the promise
   under it (stacked, not two columns), hairline dividers. No frame, no boxes
   and no hover colour, so it doesn't outweigh the headline on the left. */
/* v4: the bare list floated next to the headline and read as small print,
   so it now sits in a quiet glass panel; each row links to its service. */
.hero-map {
  padding: 22px 18px 14px;
  border-radius: 20px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025));
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 24px 60px -28px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.hero-map .map-label { padding: 0 12px; margin-bottom: 10px; }
.eco-rows { list-style: none; }
.eco-row + .eco-row { border-top: 1px solid rgba(255, 255, 255, 0.08); }
.eco-link {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 12px;
  padding: 13px 12px; border-radius: 12px; color: inherit; text-decoration: none;
  transition: background 0.2s ease;
}
.eco-link:hover, .eco-link:focus-visible { background: rgba(255, 255, 255, 0.06); outline: none; }
.eco-link:focus-visible { box-shadow: 0 0 0 2px var(--cyan); }
.eco-prod { display: flex; align-items: center; gap: 12px; }
.eco-prod .node-icon {
  width: 34px; height: 34px; align-items: center; justify-content: center;
  border-radius: 10px; background: rgba(255, 255, 255, 0.07); color: rgba(255, 255, 255, 0.78);
}
.eco-prod h3 { font-family: var(--font-latin); font-size: 15.5px; font-weight: 700; line-height: 1.35; color: #fff; }
.eco-say { grid-column: 1; padding: 3px 0 0 46px; }
.eco-pain { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.eco-promise { font-size: 13.5px; line-height: 1.6; color: rgba(255, 255, 255, 0.68); }
.eco-go {
  grid-column: 2; grid-row: 1 / span 2; color: rgba(255, 255, 255, 0.35);
  transition: color 0.2s ease, transform 0.2s ease;
}
.eco-link:hover .eco-go { color: var(--cyan); transform: translateX(3px); }
/* the lead service */
.eco-row--hot .eco-link { background: rgba(90, 230, 250, 0.08); }
.eco-row--hot .eco-link:hover { background: rgba(90, 230, 250, 0.13); }
.eco-row--hot .eco-prod .node-icon { background: rgba(90, 230, 250, 0.18); color: var(--cyan); }
.eco-row--hot .eco-prod h3, .eco-row--hot .eco-go { color: var(--cyan); }
.eco-row--hot + .eco-row { border-top-color: transparent; }
/* visually hidden, still read by screen readers */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.eco-flame { display: inline-flex; flex-shrink: 0; filter: drop-shadow(0 0 6px rgba(255, 122, 61, 0.55)); }
.eco-flame svg { display: block; width: 14px; height: 18px; }
.map-foot {
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  font-size: 12.5px; line-height: 1.6; color: rgba(255, 255, 255, 0.52);
}

/* --- trust strip --- */
.trust-strip {
  position: relative; z-index: 1;
  margin-top: 64px; padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.trust-inner { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; }
.trust-label {
  font-family: var(--font-latin); font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5); white-space: nowrap;
}
/* 9 names now — a slightly tighter gap keeps them on one line without crowding */
.trust-logos { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 18px 32px; }
.trust-logos li { display: flex; align-items: center; height: 40px; }
.trust-logos img { display: block; width: auto; opacity: 0.78; transition: opacity 0.25s ease; }
/* pull-quote band: breaks the eyebrow/title/grid rhythm between testimonials and cases */
.pullquote-band { background: var(--bg-soft); padding: 72px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pullquote-inner { max-width: 880px; text-align: center; }
.pullquote-text {
  font-family: var(--font-heading); font-size: 26px; line-height: 1.6; font-weight: 600;
  color: var(--ink-strong); margin: 0 0 18px;
}
.pullquote-by { font-family: var(--font-latin); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 560px) { .pullquote-text { font-size: 20px; } .pullquote-band { padding: 52px 0; } }
.trust-logos li:hover img { opacity: 1; }

/* --- bento: asymmetric capability grid (replaces 3D flip) --- */
.bento { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(190px, auto); gap: 22px; }
.bento-card {
  position: relative; display: flex; flex-direction: column;
  padding: 30px 28px; border-radius: var(--radius-lg);
  background: var(--surface); border: 1px solid var(--line); color: inherit;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.bento-card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(90, 230, 250, 0.6);
  opacity: 0; transition: opacity 0.3s ease; pointer-events: none;
}
.bento-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); color: inherit; }
.bento-card:hover::after { opacity: 1; }
.bento-lg { grid-column: span 2; grid-row: span 2; }
.bento-wide { grid-column: span 3; }
.bento-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 14px; margin-bottom: 20px; flex-shrink: 0;
  background: linear-gradient(135deg, rgba(90, 230, 250, 0.18), rgba(70, 40, 128, 0.12));
  color: var(--heading);
}
.bento-card h3 { font-size: 19px; font-weight: 600; color: var(--ink-strong); margin-bottom: 10px; }
.bento-lg h3 { font-size: 24px; }
.bento-card p { font-size: 14.5px; line-height: 1.78; color: var(--ink); flex: 1; }
.bento-lg p { font-size: 16px; max-width: 520px; }
.bento-more { margin-top: 18px; font-size: 14px; font-weight: 600; color: var(--blue); }

/* --- industry rail: one horizontal band, not another card grid --- */
.industry-rail { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; }
.industry {
  text-align: center; padding: 24px 12px; border-radius: var(--radius-lg);
  background: var(--surface); border: 1px solid var(--line);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.industry:hover { transform: translateY(-3px); border-color: rgba(90, 230, 250, 0.55); box-shadow: var(--shadow); }
.ind-icon { display: inline-flex; color: var(--blue); margin-bottom: 12px; }
.industry h3 { font-size: 14.5px; font-weight: 600; color: var(--ink-strong); }

/* --- journey steps (service path) --- */
.journey { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 24px; margin: 0 0 48px; padding: 0; }
.journey li { position: relative; padding: 16px 0 0; font-size: 15px; color: var(--ink-strong); border-top: 2px solid var(--line); }
.journey li::before { content: ""; position: absolute; top: -2px; left: 0; width: 32px; height: 2px; background: var(--cyan); }
.journey li b { display: block; font-family: var(--font-latin); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; color: var(--cyan); margin-bottom: 6px; }

/* --- insight cards (with cover image) --- */
.insight-grid { gap: 26px; }
.insight-card {
  display: flex; flex-direction: column; color: inherit; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.insight-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); border-color: rgba(90, 230, 250, 0.5); color: inherit; }
.insight-thumb { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--bg-soft); }
.insight-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.45s ease; }
/* posts without a cover keep the same card height via a brand-gradient plate */
.insight-thumb.is-empty {
  background:
    radial-gradient(rgba(255, 255, 255, 0.13) 1px, transparent 1px),
    linear-gradient(150deg, var(--purple) 8%, var(--blue) 68%, var(--cyan) 135%);
  background-size: 18px 18px, cover;
  position: relative;
}
.insight-thumb.is-empty::after {
  content: ""; position: absolute; left: 20px; bottom: 18px;
  width: 46px; height: 4px; border-radius: 2px;
  background: rgba(255, 255, 255, 0.65);
}
.insight-card:hover .insight-thumb img { transform: scale(1.05); }
.insight-card .card-date { padding: 20px 24px 0; margin-bottom: 8px; }
.card-topic {
  display: inline-block; margin-right: 10px; padding: 2px 9px; border-radius: 999px;
  font-family: var(--font-cjk); font-size: 12px; font-weight: 600; color: var(--heading);
  background: rgba(90, 230, 250, 0.14);
}
.insight-card h3 { padding: 0 24px; font-size: 17px; line-height: 1.5; color: var(--ink-strong); }
.insight-card p { padding: 10px 24px 0; font-size: 14px; line-height: 1.75; color: var(--ink); flex: 1; }
.insight-card .card-more { padding: 16px 24px 22px; margin-top: 0; }

/* --- case mosaic + industry filter chips --- */
.case-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 34px; }
.chip {
  font-family: var(--font-cjk); font-size: 13.5px; padding: 8px 18px;
  border-radius: 999px; border: 1px solid var(--line); background: var(--surface);
  color: var(--ink); cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.chip:hover { border-color: rgba(70, 40, 128, 0.5); color: var(--blue); }
.chip.is-on { background: var(--purple); border-color: var(--heading); color: #fff; }

.case-mosaic { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.case-mosaic .case-card {
  display: flex; flex-direction: column; color: inherit; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.case-mosaic .case-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); border-color: rgba(90, 230, 250, 0.5); color: inherit; }
.case-mosaic .case-thumb { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--bg-soft); }
.case-body { display: block; padding: 22px 24px; }
.case-kpi {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin-bottom: 10px; font-size: 13px; font-weight: 600; line-height: 1.55; color: var(--blue);
}
.case-mosaic .case-card h3 { padding: 0; margin-top: 0; font-size: 16px; }
.case-mosaic .case-tag { margin-top: 12px; }
.case-card.is-hidden { display: none; }

/* --- tool feature: show the product, not three icon cards --- */
.tool-feature { display: grid; grid-template-columns: 1fr 1.05fr; gap: 56px; align-items: center; }
.tool-copy .eyebrow { margin-bottom: 10px; }
.tool-copy h2 { font-size: 30px; font-weight: 700; color: var(--heading); margin-bottom: 16px; line-height: 1.42; }
.tool-copy > p { font-size: 16px; line-height: 1.85; color: var(--ink); margin-bottom: 24px; }
.tool-points { list-style: none; margin-bottom: 28px; }
.tool-points li { position: relative; padding-left: 26px; margin-bottom: 11px; font-size: 15px; color: var(--ink-strong); }
.tool-points li::before { content: ""; position: absolute; left: 0; top: 11px; width: 14px; height: 2px; background: var(--cyan); }
.tool-shot { margin: 0; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow); }
.tool-shot img { display: block; width: 100%; height: auto; }
/* Brand Pulse: module list, copyright certificate, equal-size screenshot thumbs */
.tool-modules { display: grid; gap: 12px; margin: 0 0 10px; }
.tool-modules > div {
  padding: 12px 16px; border: 1px solid var(--line); border-left: 3px solid var(--cyan);
  border-radius: 0 var(--radius) var(--radius) 0; background: var(--surface);
}
.tool-modules dt { font-family: var(--font-latin); font-size: 15px; font-weight: 700; color: var(--heading); margin-bottom: 2px; }
.tool-modules dd { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--ink); }
.tool-copy > p.tool-more { font-size: 14px; color: var(--muted); margin-bottom: 26px; }
/* Viewer: fixed square stage so portrait certificate and 2:1 screenshots swap
   without the layout jumping; four equal thumbnails underneath. */
.tool-viewer-main {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1 / 1; padding: 18px; border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgba(90, 230, 250, 0.08), rgba(70, 40, 128, 0.08));
  border: 1px solid var(--line); cursor: zoom-in;
}
.tool-viewer-main img {
  display: block; max-width: 100%; max-height: 100%; width: auto; height: auto;
  border-radius: 10px; filter: drop-shadow(0 16px 30px rgba(46, 20, 82, 0.22));
}
.tool-viewer-cap { margin: 12px 0 14px; text-align: center; font-size: 13.5px; color: var(--muted); }
.tool-viewer-thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.tool-viewer-thumb {
  display: block; padding: 0; font: inherit; text-align: center; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.tool-viewer-thumb:hover { transform: translateY(-2px); border-color: rgba(90, 230, 250, 0.6); }
.tool-viewer-thumb.is-active { border-color: var(--cyan); box-shadow: 0 0 0 2px var(--cyan); }
.tool-viewer-thumb:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
/* every thumb is the same box: 4:3, cropped from the top */
.tool-viewer-thumb img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: top; }
.tool-viewer-thumb:first-child img { object-position: center; }
.tool-viewer-thumb span {
  display: block; padding: 6px 4px; font-size: 12px; font-weight: 600; line-height: 1.3;
  color: var(--heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ============================================================
   INSIGHTS HUB + TOPIC PAGES — /knowledge/, /knowledge/<topic>/
   ============================================================ */
.ins-section { padding: 56px 0; }
.ins-section + .ins-section:not(.section-soft) { padding-top: 8px; }
.ins-h2 { font-family: var(--font-heading); font-size: 24px; font-weight: 700; color: var(--heading); margin-bottom: 22px; }
.ins-row-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 13px; color: var(--muted); }
.ins-row-meta .card-topic { margin-right: 0; }
.ins-row-by { font-size: 13px; color: var(--muted); }

/* featured: lead story + two side stories */
.ins-featured { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 24px; }
.ins-lead, .ins-side-card {
  display: flex; flex-direction: column; background: var(--surface); color: inherit;
  border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow);
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.ins-lead:hover, .ins-side-card:hover { transform: translateY(-3px); border-color: rgba(90, 230, 250, 0.5); color: inherit; }
.ins-lead-img, .ins-side-img { position: relative; display: block; overflow: hidden; background: var(--bg-soft); }
/* the lead keeps the covers' 16:9 (they carry text, any crop cuts it); when the
   side column is taller, the text area below takes the extra height */
.ins-lead-img { aspect-ratio: 16 / 9; flex: none; }
.ins-lead-img img, .ins-side-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ins-lead-img.is-empty, .ins-side-img.is-empty {
  background:
    radial-gradient(rgba(255, 255, 255, 0.13) 1px, transparent 1px),
    linear-gradient(150deg, var(--purple) 8%, var(--blue) 68%, var(--cyan) 135%);
  background-size: 18px 18px, cover;
}
.ins-lead-body { display: flex; flex-direction: column; gap: 10px; padding: 22px 26px 24px; flex: 1 0 auto; }
.ins-lead-body .ins-row-by { margin-top: auto; }
.ins-lead-title { font-family: var(--font-heading); font-size: 24px; font-weight: 700; line-height: 1.4; color: var(--ink-strong); }
.ins-lead-sum { font-size: 15px; line-height: 1.75; color: var(--ink); }
/* side stories: full 16:9 cover on top — covers carry text, a narrow crop cut it */
.ins-side { display: grid; align-content: start; gap: 24px; }
.ins-side-img { aspect-ratio: 16 / 9; flex: none; }
.ins-side-body { display: flex; flex-direction: column; gap: 6px; padding: 14px 18px 16px; min-width: 0; }
.ins-side-title { font-size: 16px; font-weight: 700; line-height: 1.5; color: var(--ink-strong); }

/* topic tiles */
.ins-topics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.ins-topic {
  display: flex; flex-direction: column; gap: 12px; padding: 22px 20px;
  background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--cyan); border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.ins-topic.is-empty { border-top-color: var(--line); }
.ins-topic-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ins-topic h3 { font-size: 17px; font-weight: 700; line-height: 1.4; color: var(--heading); }
.ins-topic h3 a { color: inherit; }
.ins-topic h3 a:hover { color: var(--blue); }
.ins-topic-count { flex: 0 0 auto; font-size: 12.5px; color: var(--muted); }
.ins-topic-desc { font-size: 13.5px; line-height: 1.7; color: var(--ink); }
/* topic tiles: read as a table of contents, not one wall of text */
.ins-topic-top { list-style: none; display: grid; gap: 0; padding-top: 6px; border-top: 1px solid var(--line); }
.ins-topic-top li { position: relative; padding: 10px 0 10px 18px; border-bottom: 1px solid var(--line); }
.ins-topic-top li:last-child { border-bottom: 0; }
.ins-topic-top li::before {
  content: ""; position: absolute; left: 2px; top: 17px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); opacity: .75;
}
.ins-topic-top a { font-size: 13.5px; line-height: 1.55; color: var(--ink-strong); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ins-topic-top a:hover { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.ins-topic .info-link { margin-top: auto; }

/* filter chips + compact list */
.ins-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.ins-chip {
  font: inherit; font-size: 13.5px; padding: 6px 14px; border-radius: 999px; cursor: pointer;
  color: var(--ink); background: var(--surface); border: 1px solid var(--line);
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.ins-chip span { color: var(--muted); margin-left: 2px; }
.ins-chip:hover { border-color: rgba(70, 40, 128, 0.5); color: var(--blue); }
.ins-chip.is-on { background: var(--purple); border-color: var(--heading); color: #fff; }
.ins-chip.is-on span { color: rgba(255, 255, 255, 0.7); }
.ins-filter-sep { width: 1px; height: 20px; background: var(--line); margin: 0 4px; }
.ins-list { list-style: none; border-top: 1px solid var(--line); }
.ins-row { border-bottom: 1px solid var(--line); }
.ins-row a {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "meta by" "title title" "sum sum";
  gap: 6px 16px; padding: 18px 4px; color: inherit; transition: background 0.2s ease;
}
.ins-row a:hover { background: rgba(90, 230, 250, 0.05); color: inherit; }
.ins-row .ins-row-meta { grid-area: meta; }
.ins-row .ins-row-by { grid-area: by; align-self: center; }
.ins-row-title { grid-area: title; font-size: 17px; font-weight: 700; line-height: 1.5; color: var(--ink-strong); }
.ins-row a:hover .ins-row-title { color: var(--blue); }
.ins-row-sum { grid-area: sum; font-size: 14px; line-height: 1.7; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ins-empty { padding: 28px 4px; color: var(--muted); }

/* topic page: other topics */
.ins-other { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 32px; font-size: 14px; }
.ins-other > span { color: var(--muted); }
.ins-other a { font-weight: 600; color: var(--heading); }
.ins-other a:hover { color: var(--blue); }
.ins-other small { color: var(--muted); font-weight: 400; }

/* next-step bands */
.ins-bands-wrap { padding-top: 8px; }
.ins-bands { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
.ins-band { padding: 26px 28px; border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--surface); }
.ins-band h3 { font-size: 19px; font-weight: 700; color: var(--heading); margin: 6px 0 10px; line-height: 1.45; }
.ins-band p { font-size: 14px; line-height: 1.75; color: var(--ink); }
.ins-band .eyebrow { margin-bottom: 0; }
.ins-band--tool { background: linear-gradient(135deg, rgba(90, 230, 250, 0.10), rgba(70, 40, 128, 0.08)); }
.ins-band--tool .btn { margin-top: 16px; }
.ins-band--follow { display: flex; align-items: center; gap: 22px; }
.ins-band--follow img { flex: 0 0 auto; width: 112px; height: 112px; border-radius: 8px; border: 1px solid var(--line); }

@media (max-width: 1100px) {
  .ins-featured { grid-template-columns: 1fr; }
  .ins-side { grid-template-columns: 1fr 1fr; }
  .ins-topics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .ins-section { padding: 40px 0; }
  .ins-side { grid-template-columns: 1fr; gap: 16px; }
  .ins-topics { grid-template-columns: 1fr; }
  .ins-lead-body { padding: 18px 18px 20px; }
  .ins-lead-title { font-size: 20px; }
  .ins-row a { grid-template-areas: "meta meta" "title title" "sum sum" "by by"; padding: 16px 0; }
  .ins-row-title { font-size: 16px; }
  .ins-band { padding: 22px 20px; }
}

/* ============================================================
   CAREERS — /career/ list + /career/<slug>.html detail (careers.py)
   ============================================================ */
.job-section { padding: 56px 0; }
.job-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 4px; }
.job-head .ins-h2 { margin-bottom: 18px; }
.job-count { font-size: 14px; color: var(--muted); }
.job-list { list-style: none; display: grid; gap: 16px; }
.job-card {
  display: grid; grid-template-columns: 210px minmax(0, 1fr) auto; gap: 28px; align-items: stretch;
  padding: 0 28px 0 0; background: var(--surface); color: inherit; overflow: hidden;
  border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow); transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.job-card:hover { transform: translateY(-4px); border-color: rgba(90, 230, 250, 0.6); box-shadow: 0 18px 40px rgba(46, 20, 82, 0.14); color: inherit; }
/* illustration tile: same purple + cyan language as the heroes */
.job-art {
  position: relative; display: flex; align-items: center; justify-content: center; padding: 18px;
  background:
    radial-gradient(circle at 80% 15%, rgba(90, 230, 250, 0.35), transparent 55%),
    radial-gradient(rgba(255, 255, 255, 0.10) 1px, transparent 1px),
    linear-gradient(150deg, #1f0e3a 0%, #2e1452 55%, #462880 140%);
  background-size: auto, 16px 16px, auto;
}
.job-art svg { width: 100%; max-width: 180px; height: auto; transition: transform 0.35s ease; }
.job-card:hover .job-art svg { transform: scale(1.05) rotate(-1deg); }
.job-new {
  position: absolute; top: 12px; left: 12px; padding: 3px 9px; border-radius: 999px;
  font-family: var(--font-latin); font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  color: var(--purple); background: var(--cyan);
}
.job-card .job-card-main { padding: 26px 0; }
.job-card .job-card-side { padding: 26px 0; justify-content: center; }
.job-card-main { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.job-card-team { font-size: 12.5px; font-weight: 600; letter-spacing: 0.04em; color: var(--blue); }
.job-card-title { font-family: var(--font-heading); font-size: 22px; font-weight: 700; line-height: 1.35; color: var(--heading); }
.job-card-sub { font-size: 14px; color: var(--muted); }
.job-card-sum { font-size: 14.5px; line-height: 1.7; color: var(--ink); margin-top: 4px; }
.job-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; list-style: none; }
.job-tags > * {
  font-size: 12.5px; padding: 3px 10px; border-radius: 999px;
  color: var(--heading); background: rgba(90, 230, 250, 0.12);
}
.job-card-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; text-align: right; white-space: nowrap; font-size: 13px; color: var(--muted); }
.job-card-side b { font-size: 17px; color: var(--ink-strong); }
.job-card-btn { margin-top: 10px; pointer-events: none; }
.job-people { display: flex; align-items: center; gap: 12px; margin-top: 14px; font-size: 13px; color: var(--muted); }
.job-avatars { display: flex; flex-shrink: 0; }
.job-avatars img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(46, 20, 82, 0.15); }
.job-avatars img + img { margin-left: -10px; }
/* detail page: future colleagues */
.job-team { padding: 20px 24px; border: 1px solid var(--line); border-radius: var(--radius-lg); }
.job-team h3 { font-size: 16px; font-weight: 700; color: var(--heading); margin-bottom: 12px; }
.job-team-row { display: flex; align-items: center; gap: 12px; padding: 7px 0; }
.job-team-row img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.job-team-row b { display: block; font-size: 14px; color: var(--ink-strong); }
.job-team-row small { display: block; font-size: 12.5px; color: var(--muted); }
.job-team .info-link { display: inline-block; margin-top: 10px; }
.job-none { padding: 24px 0; color: var(--ink); }
.job-open-app {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  margin-top: 20px; padding: 22px 28px; border: 1px dashed rgba(70, 40, 128, 0.35); border-radius: var(--radius-lg);
}
.job-open-app h3 { font-size: 17px; font-weight: 700; color: var(--heading); margin-bottom: 4px; }
.job-open-app p { font-size: 14px; line-height: 1.7; color: var(--ink); max-width: 640px; }

/* hiring steps */
.hire-steps { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; counter-reset: none; }
.hire-steps li { position: relative; padding: 22px 20px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.hire-steps li:not(:last-child)::after {
  content: ""; position: absolute; top: 38px; right: -20px; width: 20px; height: 2px; background: var(--cyan);
}
.hire-num {
  display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%;
  font-family: var(--font-latin); font-weight: 700; color: var(--heading); background: rgba(90, 230, 250, 0.18); margin-bottom: 12px;
}
.hire-steps h3 { font-size: 16px; font-weight: 700; color: var(--heading); margin-bottom: 6px; }
.hire-steps p { font-size: 13.5px; line-height: 1.7; color: var(--ink); overflow-wrap: anywhere; }

/* life at Dékuple: 3 columns, the middle one dropped half a card (错位) */
.life-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 24px; }
.life-card {
  padding: 0 0 24px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.life-card:nth-child(3n + 2) { transform: translateY(36px); }
.life-card:hover { box-shadow: 0 18px 40px rgba(46, 20, 82, 0.12); border-color: rgba(90, 230, 250, 0.55); }
.life-card:nth-child(3n + 1):hover, .life-card:nth-child(3n):hover { transform: translateY(-4px); }
.life-card:nth-child(3n + 2):hover { transform: translateY(32px); }
/* illustration band on top of each card */
.life-art {
  display: flex; align-items: center; justify-content: center; height: 128px; margin-bottom: 20px;
  background:
    radial-gradient(rgba(46, 20, 82, 0.07) 1px, transparent 1px),
    linear-gradient(135deg, rgba(90, 230, 250, 0.14), rgba(70, 40, 128, 0.10));
  background-size: 14px 14px, auto;
}
.life-card:nth-child(3n + 2) .life-art {
  background:
    radial-gradient(rgba(255, 255, 255, 0.10) 1px, transparent 1px),
    linear-gradient(150deg, #e9fbfb, #dfe6ff);
  background-size: 14px 14px, auto;
}
.life-svg { width: 160px; height: 96px; transition: transform 0.35s ease; }
.life-card:hover .life-svg { transform: scale(1.06); }
.life-card h3, .life-card p { padding: 0 24px; }
.life-card h3 { font-size: 17px; font-weight: 700; color: var(--heading); margin-bottom: 8px; }
.life-card p { font-size: 14px; line-height: 1.75; color: var(--ink); }
/* life-art animations — gentle loops; off for reduced motion */
.la-spin { transform-origin: 68px 50px; animation: la-spin 6s steps(60) infinite; }
.la-twinkle { animation: la-twinkle 2.4s ease-in-out infinite; }
.la-dot { animation: la-dot 1.2s ease-in-out infinite; }
.la-blink { animation: la-blink 1s steps(1) infinite; }
.la-pulse { transform-origin: 136px 24px; animation: la-pulse 2.2s ease-in-out infinite; }
.la-bob { animation: la-bob 2.6s ease-in-out infinite; }
.la-grow { transform-origin: center bottom; transform-box: fill-box; animation: la-grow 3.6s ease-out infinite; }
.la-d2 { animation-delay: 0.25s; }
.la-d3 { animation-delay: 0.5s; }
.la-d4 { animation-delay: 0.75s; }
.la-bob.la-d2 { animation-delay: 1.3s; }
@keyframes la-spin { to { transform: rotate(360deg); } }
@keyframes la-twinkle { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }
@keyframes la-dot { 0%, 60%, 100% { transform: translateY(0); opacity: 0.45; } 30% { transform: translateY(-5px); opacity: 1; } }
@keyframes la-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes la-pulse { 0%, 100% { transform: scale(0.85); opacity: 0.75; } 50% { transform: scale(1.12); opacity: 1; } }
@keyframes la-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes la-grow { 0% { transform: scaleY(0.15); } 35%, 85% { transform: scaleY(1); } 100% { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) {
  .life-svg *, .life-svg { animation: none !important; }
}
.life-more { margin-top: 56px; }

/* job detail */
.job-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 56px; align-items: start; }
.job-main h2 { font-family: var(--font-heading); font-size: 21px; font-weight: 700; color: var(--heading); margin: 34px 0 14px; }
.job-main > p { font-size: 15.5px; line-height: 1.85; color: var(--ink); }
.job-tags--lg > * { font-size: 13.5px; padding: 5px 12px; }
.job-tags--lg .is-salary { background: var(--purple); color: #fff; }
.job-points { list-style: none; display: grid; gap: 10px; }
.job-points li { position: relative; padding-left: 22px; font-size: 15px; line-height: 1.75; color: var(--ink); }
.job-points li::before { content: ""; position: absolute; left: 0; top: 11px; width: 10px; height: 2px; background: var(--cyan); }
.job-points--perks li::before { width: 8px; height: 8px; top: 9px; border-radius: 50%; }
.job-apply-end {
  display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  margin-top: 40px; padding: 22px 26px; border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgba(90, 230, 250, 0.10), rgba(70, 40, 128, 0.08));
}
.job-apply-end p { font-size: 15px; color: var(--ink-strong); }
.job-closed { padding: 14px 18px; margin-bottom: 20px; border-radius: var(--radius-lg); background: #fef3f2; color: #b42318; font-size: 14.5px; }
.job-aside { position: sticky; top: calc(var(--header-h) + 24px); display: grid; gap: 20px; }
.job-summary { padding: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.job-summary h3, .job-others h3 { font-size: 16px; font-weight: 700; color: var(--heading); margin-bottom: 14px; }
.job-summary dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 16px; margin-bottom: 20px; font-size: 14px; }
.job-summary dt { color: var(--muted); }
.job-summary dd { margin: 0; color: var(--ink-strong); font-weight: 600; }
.job-summary .btn { width: 100%; justify-content: center; text-align: center; }
/* Apply: gradient sweep, soft pulse ring, the send icon flies on hover */
.btn-apply { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; overflow: visible;
  background-size: 200% 100%; background-image: linear-gradient(90deg, var(--blue-light), var(--blue), var(--cyan), var(--blue-light));
  animation: apply-sweep 4s linear infinite; }
.btn-apply::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 0 rgba(90, 230, 250, 0.55); animation: apply-pulse 2.4s ease-out infinite; pointer-events: none; }
.btn-apply:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(70, 40, 128, 0.35); }
.btn-apply-icon { transition: transform 0.35s ease; }
.btn-apply:hover .btn-apply-icon { transform: translate(4px, -4px) rotate(-8deg); }
@keyframes apply-sweep { to { background-position: -200% 0; } }
@keyframes apply-pulse { 0% { box-shadow: 0 0 0 0 rgba(90, 230, 250, 0.5); } 70%, 100% { box-shadow: 0 0 0 14px rgba(90, 230, 250, 0); } }
@media (prefers-reduced-motion: reduce) { .btn-apply, .btn-apply::after { animation: none; } }
/* follow us (replaces the repeated email line) */
.job-follow { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.job-follow p { font-size: 13px; color: var(--muted); margin-bottom: 10px; }
.job-follow-row { display: flex; align-items: center; gap: 14px; }
.job-follow-row img { width: 88px; height: 88px; border-radius: 8px; border: 1px solid var(--line); flex-shrink: 0; }
.job-follow-wechat { display: block; font-size: 13px; color: var(--ink-strong); font-weight: 600; margin-bottom: 10px; }
.job-follow-li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; color: #0a66c2; border: 1px solid rgba(10, 102, 194, 0.35); transition: background 0.2s ease; }
.job-follow-li:hover { background: rgba(10, 102, 194, 0.08); color: #0a66c2; }
.job-others { padding: 20px 24px; border: 1px solid var(--line); border-radius: var(--radius-lg); }
.job-others a { display: block; padding: 8px 0; font-weight: 600; color: var(--heading); border-top: 1px solid var(--line); }
.job-others small { display: block; font-weight: 400; color: var(--muted); }

@media (max-width: 1100px) {
  .hire-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hire-steps li::after { display: none; }
  .life-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .life-card:nth-child(3n + 2), .life-card:nth-child(3n + 2):hover { transform: none; }
  .life-card:nth-child(2n), .life-card:nth-child(2n):hover { transform: translateY(28px); }
  .job-layout { grid-template-columns: 1fr; gap: 32px; }
  .job-aside { position: static; }
}
@media (max-width: 640px) {
  .job-section { padding: 40px 0; }
  .job-card { grid-template-columns: 1fr; gap: 0; padding: 0; }
  .job-art { height: 130px; }
  .job-art svg { max-width: 150px; }
  .job-card .job-card-main { padding: 20px 20px 0; }
  .job-card .job-card-side { padding: 14px 20px 22px; align-items: flex-start; text-align: left; }
  .job-people span:last-child { font-size: 12.5px; }
  .job-card-title { font-size: 19px; }
  .hire-steps, .life-grid { grid-template-columns: 1fr; }
  .life-card:nth-child(n), .life-card:nth-child(n):hover { transform: none; }
  .life-more { margin-top: 24px; }
  .job-open-app { padding: 20px; }
}

/* --- reading progress + sticky table of contents --- */
.read-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 200; pointer-events: none; background: transparent; }
.read-progress span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--cyan), var(--blue)); }
/* Body fills its column (~780px at full width: ~42 CJK / ~85 Latin chars per
   line); the old 640px cap left a 170px blank strip before the TOC. */
.article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 232px; gap: 56px; align-items: start; }
.article-main { min-width: 0; }
.toc-sticky { position: sticky; top: calc(var(--header-h) + 28px); margin-bottom: 0; }
.toc-sticky ol { padding-left: 18px; }
.toc-sticky li { font-size: 13.5px; line-height: 1.5; margin: 6px 0; }
.toc-sticky a { color: var(--ink); transition: color 0.2s ease; }
.toc-sticky a:hover, .toc-sticky a.is-active { color: var(--blue); }
.toc-mobile { display: none; }

@media (max-width: 1100px) {
  .hero-layout { grid-template-columns: 1fr; gap: 44px; }
  .hero-glow { width: 520px; height: 520px; top: -14%; right: -18%; }
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento-lg { grid-column: span 2; grid-row: span 1; }
  .bento-wide { grid-column: span 2; }
  .case-mosaic { grid-template-columns: repeat(2, 1fr); }
  .tool-feature { grid-template-columns: 1fr; gap: 36px; }
  .tool-viewer-thumbs { gap: 8px; }
  .tool-viewer-thumb span { white-space: normal; font-size: 11px; padding: 5px 3px; }
  .article-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
  /* TOC hidden: keep a reading width and centre it instead of a flush-left column */
  .article-main { max-width: 780px; width: 100%; margin: 0 auto; }
  .toc-sticky { display: none; }
  .toc-mobile { display: block; }
  /* contact: 4-up cards cram to ~85px tracks on phones and the grid blows
     out 269px of horizontal scroll. 3-up grids elsewhere still fit, so only
     cols-4 collapses (2-up here, 1-up at 560px). */
  .info-grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 960px) {
  .industry-rail { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 820px) {
  .bento { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .bento-lg, .bento-wide { grid-column: span 1; grid-row: span 1; }
  /* 01–04 only works as one row; stacked it is just four labels */
  .journey { display: none; }
  .hero-title { font-size: 32px; }
  .hero-copy .hero-caption { font-size: 17px; }
  .trust-inner { gap: 16px; }
  .trust-logos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 12px; width: 100%; }
  .trust-logos li { justify-content: center; }
  .trust-logos img { max-width: 100%; object-fit: contain; }  /* shrink to fit, never squash */
}

@media (max-width: 560px) {
  .industry-rail { grid-template-columns: repeat(2, 1fr); }
  .case-mosaic { grid-template-columns: 1fr; }
  .bento-card { padding: 24px 22px; }
  .tool-copy h2 { font-size: 24px; }
  .hero-map { padding: 16px 8px 8px; border-radius: 16px; }
  .eco-link { padding: 12px 10px; }
  /* phones: services and cases become compact tappable rows instead of
     full-width desktop cards (one screen instead of three) */
  .services-grid { gap: 10px; }
  .service-card {
    display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; align-items: center;
    padding: 14px 40px 14px 14px; border-radius: 14px;
  }
  .service-card::after, .case-mosaic .case-card::after {
    content: ""; position: absolute; top: 50%; right: 16px; left: auto; width: 8px; height: 8px;
    background: none; border-right: 2px solid var(--blue); border-bottom: 2px solid var(--blue);
    transform: translateY(-50%) rotate(-45deg);
  }
  .service-card:hover, .case-mosaic .case-card:hover { transform: none; }
  .service-card:hover::after { border-color: var(--cyan); }
  .service-card .svc-icon { grid-row: 1 / span 2; width: 40px; height: 40px; border-radius: 10px; margin: 0; }
  .service-card .svc-icon svg { width: 20px; height: 20px; }
  .service-card h3 { grid-column: 2; font-size: 15.5px; line-height: 1.4; margin: 0 0 2px; }
  .service-card p {
    grid-column: 2; font-size: 13px; line-height: 1.5;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .service-card .svc-more { display: none; }
  .svc-ribbon {
    top: 8px; right: 10px; width: auto; padding: 1px 8px; border-radius: 999px;
    transform: none; font-size: 10.5px; letter-spacing: 0.02em; box-shadow: none;
  }
  .case-mosaic { gap: 10px; }
  .case-mosaic .case-card { position: relative; flex-direction: row; align-items: center; padding-right: 36px; border-radius: 14px; }
  .case-mosaic .case-thumb { width: 112px; flex-shrink: 0; }
  .case-mosaic .case-body { min-width: 0; padding: 10px 0 10px 14px; }
  .case-mosaic .case-card h3 {
    font-size: 14.5px; line-height: 1.45;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .case-mosaic .case-tag { margin-top: 6px; }
  .node { grid-template-columns: auto minmax(0, 1fr); gap: 12px; row-gap: 0; }
  .node-tag { margin-top: 8px; }
  .node-tag { grid-column: 2; justify-self: start; }
  .info-grid.cols-4 { grid-template-columns: 1fr; }
}

/* CJK typography: wide tracking + uppercase are latin-only devices and look
   loose on Chinese glyphs, so relax them on Chinese pages. */
html[lang^="zh"] .btn,
html[lang^="zh"] .eyebrow,
html[lang^="zh"] .hero-kicker,
html[lang^="zh"] .map-label,
html[lang^="zh"] .trust-label { letter-spacing: 0.02em; }

/* the only motion added in v3 must also be switchable off */
@media (prefers-reduced-motion: reduce) {
  .hero-glow { animation: none; }
  .bento-card:hover, .insight-card:hover, .case-mosaic .case-card:hover, .industry:hover { transform: none; }
  .insight-card:hover .insight-thumb img { transform: none; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 960px) {
  .why-grid { grid-template-columns: 1fr; gap: 36px; }
  .industries { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .info-grid { grid-template-columns: repeat(2, 1fr); }
  .case-meta { grid-template-columns: repeat(2, 1fr); }
}

/* The nav now carries 8 items plus the language switch, so the drawer has to
   take over earlier than the old 820px — the English labels overflowed below
   ~900px. */
@media (max-width: 900px) {
  .site-nav {
    position: fixed; top: 0; right: 0; bottom: 0; width: min(78vw, 320px);
    background: var(--surface); flex-direction: column; align-items: flex-start; gap: 6px;
    padding: calc(var(--header-h) + 24px) 32px 32px;
    transform: translateX(100%); transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: -10px 0 40px rgba(46, 20, 82, 0.18); z-index: 105;
    overflow-y: auto;
  }
  body.nav-open .site-nav { transform: translateX(0); }
  /* The scrim must sit BELOW the header (z-index 100). Above it, it covered the
     drawer along with every link inside — the menu looked blank and nothing
     could be tapped. 99 keeps it over the page and under the bar. */
  body.nav-open::after { content: ""; position: fixed; inset: 0; background: rgba(46, 20, 82, 0.45); z-index: 99; }
  .site-nav a { color: var(--ink-strong) !important; font-size: 17px; padding: 12px 0; width: 100%; border-bottom: 1px solid var(--line); }
  .nav-home-text { display: inline; }
  .site-nav .lang-switch { margin-top: 14px; color: var(--purple) !important; border-color: var(--line); }
  .site-nav .nav-cta { width: auto; margin-top: 10px; border-bottom: 0; padding: 12px 24px; font-size: 16px; }
  .nav-toggle { display: block; }
  .nav-indicator { display: none; }
}

@media (max-width: 820px) {
  .hero-title { font-size: 32px; }
  .hero-caption { font-size: 20px; }
  .section { padding: 60px 0; }
  .section-title { font-size: 25px; }
  .grid-3, .grid-4, .grid-5 { grid-template-columns: repeat(2, 1fr); }
  .flip-card { height: 260px; }
}

@media (max-width: 560px) {
  .grid-2, .grid-3, .grid-4, .grid-5 { grid-template-columns: 1fr; }
  .industries { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .footer-brand, .footer-contact { grid-column: 1 / -1; }
  .info-grid { grid-template-columns: 1fr; }
  .case-meta { grid-template-columns: 1fr; }
  .case-gallery { gap: 18px; }
  /* the head is pulled up behind the 72px fixed header, so the top padding
     must clear it or the breadcrumb hides under the bar */
  .page-head { padding: calc(var(--header-h) + 28px) 0 56px; }
  .page-head h1 { font-size: 30px; }
  /* the form page keeps its own rhythm on phones too — and the standard 48px
     top padding sits behind the 72px fixed header, so it needs real clearance */
  .page-head.page-head--form { padding: calc(var(--header-h) + 20px) 0 28px; }
  .page-head.page-head--form.is-done { padding-bottom: 24px; }
  .page-head--form h1 { font-size: 27px; }
  .section--form { padding-top: 30px; }
  .hero { padding-top: calc(var(--header-h) + 48px); }
  .hero-title { font-size: 27px; }
  .why-stats { gap: 22px; }
  .back-to-top { right: 16px; bottom: 16px; }
}

/* ---- CTA meta: response time + direct email under the closing CTA ---- */
.cta-meta {
  display: flex; gap: 22px; justify-content: center; align-items: center;
  flex-wrap: wrap; margin-top: 20px; font-size: 13.5px; color: rgba(255, 255, 255, 0.78);
}
/* .contact-cta p (margin: 0 auto 36px) outranks .cta-meta, which left the
   line glued to the button — restate the spacing at the same weight */
.contact-cta .cta-meta { margin: 28px auto 0; max-width: none; }
.cta-eta { display: inline-flex; align-items: center; gap: 7px; }
.cta-mail { color: var(--cyan); border-bottom: 1px solid transparent; transition: border-color 0.2s ease; }
.cta-mail:hover { border-bottom-color: var(--cyan); }

/* ---- case section: real published counts, read from the DB ---- */
.case-stats {
  display: flex; justify-content: center; align-items: center; gap: 18px;
  margin: -6px 0 34px; font-size: 14.5px; color: var(--muted);
}
.case-stats b { font-family: var(--font-latin); font-size: 22px; font-weight: 700; color: var(--blue); margin-right: 4px; }
.case-stats-sep { width: 1px; height: 16px; background: var(--line); }

/* ---- case detail TOC reuses the service TOC shell at every width ---- */
.toc.case-toc { display: block; }
.case-toc { margin: 0 0 32px; padding: 20px 24px; background: var(--bg-soft); border-radius: var(--radius-lg); border: 1px solid var(--line); }
.case-toc .toc-title { margin-bottom: 10px; }
@media (max-width: 560px) { .cta-meta { flex-direction: column; gap: 10px; } }


/* ============================================================
   ABOUT DÉKUPLE GROUP (/dekuple-group/) — data from group.py
   ============================================================ */
.grp-figures { list-style: none; display: grid; grid-template-columns: repeat(6, 1fr); margin-top: 34px; border-top: 1px solid rgba(255, 255, 255, 0.14); }
.grp-figures li { padding: 18px 16px 0 0; }
.grp-figures b { display: block; font-family: var(--font-latin); font-size: 30px; font-weight: 800; color: var(--cyan); line-height: 1.1; }
.grp-figures span { display: block; margin-top: 6px; font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, 0.72); }
.grp-asof { margin-top: 14px; font-size: 12px; color: rgba(255, 255, 255, 0.45); }

.grp-intro { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.grp-intro .prose h2 { margin-top: 0; }
.grp-facts { background: var(--surface-tint); border: 1px solid var(--surface-tint-line); border-top: 4px solid var(--cyan); border-radius: var(--radius-lg); padding: 24px 24px 18px; }
.grp-facts h3 { font-size: 15px; font-weight: 700; color: var(--heading); margin-bottom: 12px; }
.grp-facts dl div { padding: 9px 0; border-bottom: 1px solid var(--line); }
.grp-facts dl div:last-child { border-bottom: 0; }
.grp-facts dt { font-size: 12px; font-weight: 600; letter-spacing: 0.03em; color: var(--muted); }
.grp-facts dd { font-size: 14.5px; font-weight: 600; color: var(--ink-strong); line-height: 1.5; }

.grp-slogan { font-size: 46px; letter-spacing: -0.02em; }
.grp-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 30px; }
.grp-pillar { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px 26px; }
.grp-pillar.is-ours { border-color: var(--cyan); box-shadow: 0 0 0 1px var(--cyan) inset; }
.grp-pillar-key { display: block; font-family: var(--font-latin); font-size: 34px; font-weight: 700; line-height: 1; color: var(--heading); margin-bottom: 14px; }
.grp-pillar h3 { font-size: 18px; font-weight: 700; color: var(--heading); }
.grp-pillar p { font-size: 14.5px; line-height: 1.75; }
.grp-pillar .grp-pillar-where { margin-top: 12px; font-size: 13px; color: var(--muted); }
@media (max-width: 900px) { .grp-pillars { grid-template-columns: 1fr; } .grp-slogan { font-size: 34px; } }
.grp-divs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 8px; }
.grp-div { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px 26px; }
.grp-share { display: block; font-family: var(--font-latin); font-size: 44px; font-weight: 800; line-height: 1; color: var(--heading); }
.grp-bar { display: block; height: 6px; border-radius: 3px; background: var(--line); margin: 14px 0 18px; overflow: hidden; }
.grp-bar i { display: block; height: 100%; max-width: 100%; background: linear-gradient(90deg, var(--cyan), var(--blue)); border-radius: 3px; }
.grp-div h3 { font-size: 19px; font-weight: 700; color: var(--heading); }
.grp-div-lead { margin: 4px 0 10px; font-size: 13.5px; font-weight: 600; color: var(--blue); }
.grp-div p { font-size: 14.5px; line-height: 1.75; }

.grp-two { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.grp-h2 { font-family: var(--font-heading); font-size: 24px; font-weight: 700; color: var(--heading); margin-bottom: 10px; }
.grp-sub { font-size: 14.5px; color: var(--muted); margin-bottom: 16px; }
.grp-sub a { color: var(--blue); font-weight: 600; }
.grp-table { margin-top: 6px; }
.grp-table th { text-align: left; font-family: inherit; font-size: 14.5px; letter-spacing: 0; font-weight: 600; color: var(--ink); background: transparent; border-bottom: 1px solid var(--line); width: 42%; vertical-align: top; }
.grp-table td b { font-family: var(--font-latin); font-size: 17px; color: var(--ink-strong); }
.grp-table td span { display: block; font-size: 12.5px; color: var(--muted); }
.grp-note { font-size: 14px; color: var(--ink); padding: 12px 16px; border-left: 3px solid var(--cyan); background: var(--surface-tint); border-radius: 0 var(--radius) var(--radius) 0; }
.grp-src { margin: -14px 0 16px; font-size: 13px; color: var(--muted); line-height: 1.7; }
.grp-src a { color: var(--blue); font-weight: 600; }
.grp-note-src { display: block; margin-top: 4px; font-size: 12.5px; color: var(--blue); }
.grp-ambition { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.grp-ambition li { padding: 18px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.grp-ambition li:first-child { grid-column: 1 / -1; background: var(--purple); border-color: var(--purple); }
.grp-ambition b { display: block; font-family: var(--font-latin); font-size: 26px; font-weight: 800; color: var(--heading); }
.grp-ambition span { font-size: 13.5px; line-height: 1.5; }
.grp-ambition li:first-child b { color: var(--cyan); }
.grp-ambition li:first-child span { color: rgba(255, 255, 255, 0.8); }

.grp-timeline { list-style: none; position: relative; margin-top: 10px; }
.grp-timeline::before { content: ""; position: absolute; left: 100px; top: 6px; bottom: 6px; width: 2px; background: var(--line); }
.grp-timeline li { display: grid; grid-template-columns: 90px 1fr; gap: 32px; padding: 12px 0; position: relative; }
.grp-timeline li::after { content: ""; position: absolute; left: 95px; top: 20px; width: 12px; height: 12px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 4px var(--bg-soft); }
.grp-year { font-family: var(--font-latin); font-size: 16px; font-weight: 800; color: var(--heading); padding-top: 2px; text-align: right; }
.grp-timeline p { font-size: 15px; line-height: 1.7; }

.grp-cities { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; }
.grp-cities li { padding: 7px 16px; border: 1px solid var(--line); border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--ink-strong); background: var(--surface); }
.grp-cities li.is-cn { background: var(--cyan); border-color: var(--cyan); color: var(--purple); }
.grp-ceo { position: relative; margin: 0 0 20px; max-width: 360px; border-radius: 14px; overflow: hidden; background: #0b0d1c; box-shadow: 0 10px 28px rgba(46, 20, 82, 0.18); }
.grp-ceo img { display: block; width: 100%; height: auto; aspect-ratio: 720 / 798; object-fit: cover; }
.grp-ceo figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 48px 20px 18px; background: linear-gradient(transparent, rgba(8, 9, 22, 0.88)); color: #fff; }
.grp-ceo figcaption b { display: block; font-size: 18px; }
.grp-ceo figcaption span { font-size: 13px; color: var(--cyan); letter-spacing: 0.04em; }
.grp-leaders { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; }
.grp-leaders li { padding: 10px 0; border-bottom: 1px solid var(--line); }
.grp-leaders b { display: block; font-size: 15px; color: var(--ink-strong); }
.grp-leaders span { font-size: 13px; color: var(--muted); }

.grp-china { background: linear-gradient(150deg, var(--purple) 0%, var(--purple-deep) 100%); color: rgba(255, 255, 255, 0.82); }
.grp-china .eyebrow { color: var(--cyan); }
.grp-china h2 { font-family: var(--font-heading); font-size: 28px; color: #fff; margin: 6px 0 18px; }
.grp-china p { font-size: 15.5px; line-height: 1.8; margin-bottom: 14px; }
.grp-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 22px; }
.grp-china-facts { list-style: none; display: grid; gap: 12px; }
.grp-china-facts li { display: grid; grid-template-columns: 70px 1fr; gap: 16px; align-items: center; padding: 18px 20px; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: var(--radius-lg); background: rgba(255, 255, 255, 0.04); }
.grp-china-facts b { font-family: var(--font-latin); font-size: 22px; font-weight: 800; color: var(--cyan); }
.grp-china-facts span { font-size: 14.5px; color: #fff; }

.grp-checks { list-style: none; display: grid; gap: 12px; }
.grp-checks li { position: relative; padding-left: 30px; font-size: 15px; line-height: 1.6; }
.grp-checks li::before {
  content: ""; position: absolute; left: 0; top: 4px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--cyan) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232e1452' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center / 11px no-repeat;
}
.grp-press { list-style: none; display: grid; gap: 4px; margin-bottom: 18px; }
.grp-press li { padding: 12px 0; border-bottom: 1px solid var(--line); }
.grp-press span { display: block; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.grp-press a { font-size: 15px; font-weight: 600; color: var(--ink-strong); line-height: 1.5; }
.grp-press a:hover { color: var(--blue); }
.grp-sources { margin-top: 40px; }
.grp-sources h2 { font-family: var(--font-heading); font-size: 19px; color: var(--heading); margin-bottom: 12px; }
.grp-sources ol { padding-left: 20px; display: grid; gap: 6px; font-size: 14px; }
.grp-sources a { color: var(--blue); word-break: break-word; }

@media (max-width: 900px) {
  .grp-figures { grid-template-columns: repeat(3, 1fr); row-gap: 8px; }
  .grp-intro, .grp-two { grid-template-columns: 1fr; gap: 36px; }
  .grp-divs { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .grp-figures { grid-template-columns: repeat(2, 1fr); }
  .grp-figures b { font-size: 24px; }
  .grp-ambition, .grp-leaders { grid-template-columns: 1fr; }
  .grp-timeline::before { left: 70px; }
  .grp-timeline li { grid-template-columns: 60px 1fr; gap: 26px; }
  .grp-timeline li::after { left: 65px; }
  .grp-year { font-size: 13px; }
}

/* ============================================================
   THEME TOGGLE + DARK THEME
   html[data-theme] is set before first paint by the inline script in
   base.html (saved choice, else the OS setting); the button flips it.
   Dark mode mostly re-points the role tokens; the rules after that cover
   the few places with hard-coded light colours.
   ============================================================ */
/* a small icon-only button tucked right after the nav; the nav keeps its
   place at the right (margin-left:auto) instead of being centred by the
   header's space-between */
.site-nav { margin-left: auto; }
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; margin-left: 12px; padding: 0; flex-shrink: 0;
  border: 0; border-radius: 50%; background: transparent;
  color: rgba(255, 255, 255, 0.7); cursor: pointer;
  transition: color 0.25s ease, background 0.25s ease;
}
@media (hover: hover) {
  .theme-toggle:hover { color: var(--cyan); background: rgba(255, 255, 255, 0.08); }
}
.theme-toggle svg { display: block; }
.theme-toggle .ic-sun { display: none; }
html[data-theme="dark"] .theme-toggle .ic-sun { display: block; }
html[data-theme="dark"] .theme-toggle .ic-moon { display: none; }
@media (max-width: 900px) {
  .theme-toggle { margin-left: auto; margin-right: 8px; }
}

html[data-theme="dark"] {
  color-scheme: dark;
  --heading: #efeaff;
  --ink: #c2bcd2;
  --ink-strong: #f1eef8;
  --muted: #8f88a6;
  --line: rgba(255, 255, 255, 0.10);
  --bg: #120a22;
  --bg-soft: #180e2c;
  --surface: #1d1335;
  --surface-tint: #221740;
  --surface-tint-line: rgba(255, 255, 255, 0.08);
  --blue: #5ae6fa;
  --shadow: 0 3px 18px rgba(0, 0, 0, 0.35);
  --shadow-hover: 0 14px 34px rgba(0, 0, 0, 0.5);
}
html[data-theme="dark"] .service-card:hover { background: #2e1d55; border-color: #3d2a6c; }
html[data-theme="dark"] .service-card .svc-icon { background: #3a2569; }
html[data-theme="dark"] .btn-line:hover { background: var(--cyan); border-color: var(--cyan); color: var(--purple); }
html[data-theme="dark"] .chip.is-on, html[data-theme="dark"] .ins-chip.is-on,
html[data-theme="dark"] .pagination a.active, html[data-theme="dark"] .pagination a:hover { background: var(--cyan); border-color: var(--cyan); color: var(--purple); }
html[data-theme="dark"] .job-closed { background: rgba(244, 63, 94, 0.12); color: #ff9aa8; }
html[data-theme="dark"] .footer-main, html[data-theme="dark"] .site-footer { background: #0d0719; }
html[data-theme="dark"] .site-header.scrolled, html[data-theme="dark"] .site-header.solid { box-shadow: 0 2px 14px rgba(0, 0, 0, 0.45); }
html[data-theme="dark"] input, html[data-theme="dark"] textarea, html[data-theme="dark"] select {
  background-color: var(--surface); color: var(--ink-strong); border-color: rgba(255, 255, 255, 0.16);
}
html[data-theme="dark"] ::placeholder { color: var(--muted); }
html[data-theme="dark"] .prose img, html[data-theme="dark"] .tool-shot { opacity: 0.94; }
@media (max-width: 900px) {
  html[data-theme="dark"] .site-nav { background: var(--surface); }
  html[data-theme="dark"] .site-nav .lang-switch { color: var(--heading) !important; border-color: rgba(255, 255, 255, 0.25); }
}

/* --- phone footer: nav + service lists go (the header menu has both); what
   is left is what someone on a phone does here — book, follow on WeChat
   (long-press the QR inside WeChat), copy the address or email, switch
   language --- */
@media (max-width: 560px) {
  .footer-main { padding: 30px 0 18px; }
  .footer-grid { gap: 22px; }
  .footer-nav { display: none; }
  .footer-logo { margin-bottom: 8px; }
  .footer-logo img { height: 28px; }
  .footer-tagline { font-size: 13px; line-height: 1.6; max-width: none; }
  .footer-follow { margin-top: 14px; gap: 12px; }
  .footer-follow img { width: 64px; height: 64px; padding: 3px; }
  .footer-follow span { margin-bottom: 8px; }
  .footer-follow .ff-scan { display: none; }
  .footer-follow .ff-press { display: inline; margin: 0; }
  .footer-social a { width: 32px; height: 32px; }
  .footer-actions { display: block; margin-top: 16px; }
  .footer-act {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    height: 46px; border-radius: 999px; background: var(--cyan); color: var(--purple);
    font-size: 15px; font-weight: 700;
  }
  .footer-contact h4 { display: none; }
  .footer-info { gap: 8px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.12); }
  .footer-info li { grid-template-columns: 56px 1fr; gap: 10px; align-items: baseline; }
  .footer-info-label { font-size: 12px; }
  .footer-info-value { font-size: 13px; line-height: 1.55; }
  .footer-bottom { flex-direction: column; align-items: center; gap: 8px; padding: 14px 0 18px; text-align: center; }
  .footer-bottom-right { gap: 14px; }
  .footer-copy { font-size: 12px; line-height: 1.5; }
  .footer-icp, .footer-lang { font-size: 12px; }
}

/* --- phones: no "see more / learn more / go to" text links. Cards that carry
   one action link become compact rows and the whole card is the tap target
   (the link is stretched over it); email addresses stay visible because the
   address is the information. Stand-alone "meet the team" links go: the
   header menu has them. --- */
@media (max-width: 560px) {
  .info-grid { gap: 10px; }
  .info-card { padding: 14px 16px; border-radius: 14px; }
  .info-card h3 { font-size: 15.5px; line-height: 1.4; margin: 0 0 2px; }
  .info-card p { font-size: 13px; line-height: 1.55; }
  .info-card:has(.info-link) {
    position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr);
    column-gap: 14px; align-items: center; padding: 14px 40px 14px 14px;
  }
  .info-card:has(.info-link):not(:has(.info-icon)) { grid-template-columns: minmax(0, 1fr); }
  .info-card:has(.info-link):hover { transform: none; }
  .info-card:has(.info-link)::after {
    content: ""; position: absolute; top: 50%; right: 16px; width: 8px; height: 8px;
    border-right: 2px solid var(--blue); border-bottom: 2px solid var(--blue);
    transform: translateY(-50%) rotate(-45deg);
  }
  .info-card:has(.info-link) .info-icon { grid-row: 1 / span 3; width: 40px; height: 40px; border-radius: 10px; margin: 0; }
  .info-card:has(.info-link) .info-icon svg { width: 20px; height: 20px; }
  .info-card:has(.info-link) h3 { grid-column: -2 / -1; font-size: 15.5px; line-height: 1.4; margin: 0 0 2px; }
  .info-card:has(.info-link) p {
    grid-column: -2 / -1; font-size: 13px; line-height: 1.5;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .info-card:has(.info-link) p.addr-block { display: block; }
  .info-card .info-link { grid-column: -2 / -1; margin: 0; font-size: 0; line-height: 0; }
  .info-card .info-link::before { content: ""; position: absolute; inset: 0; border-radius: inherit; }
  .info-card .info-link[href^="mailto:"] { font-size: 13px; line-height: 1.5; margin-top: 4px; }
  /* the VPN note is information, not a "see more": keep it, as plain grey text */
  .info-card .info-link[href*="linkedin.com"] { font-size: 12px; line-height: 1.5; margin-top: 4px; font-weight: 400; color: var(--muted, #8a8399); }
  .info-arrow, .card-more, .ins-topic .info-link, .job-team .info-link, .life-more { display: none; }
}

/* --- phones: homepage insights as compact rows (thumb, date, two-line
   title) like the case rows; the summary is left for the article itself --- */
@media (max-width: 560px) {
  .insight-grid { gap: 10px; }
  .insight-card {
    position: relative; display: grid; grid-template-columns: 120px minmax(0, 1fr);
    grid-template-rows: auto auto; column-gap: 12px; align-content: center;
    padding: 8px 36px 8px 8px; border-radius: 14px;
  }
  .insight-card::after {
    content: ""; position: absolute; top: 50%; right: 16px; width: 8px; height: 8px;
    border-right: 2px solid var(--blue); border-bottom: 2px solid var(--blue);
    transform: translateY(-50%) rotate(-45deg);
  }
  /* the whole 16:9 cover, small, rather than a crop through its text */
  .insight-card .insight-thumb { grid-row: 1 / span 2; align-self: center; aspect-ratio: 16 / 9; border-radius: 8px; }
  .insight-card .card-date { grid-column: 2; align-self: end; padding: 0; margin: 0 0 2px; font-size: 12px; }
  .insight-card h3 {
    grid-column: 2; align-self: start; padding: 0; margin: 0; font-size: 14.5px; line-height: 1.45;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .insight-card p { display: none; }
}

/* --- phones: "related services / more cases / related reading" link cards
   become the same compact tappable rows --- */
@media (max-width: 560px) {
  .grid:has(> .card-link) { gap: 10px; }
  .card-link {
    position: relative; padding: 14px 40px 14px 16px; border-radius: 14px; box-shadow: none;
  }
  .card-link:hover { transform: none; }
  .card-link::after {
    content: ""; position: absolute; top: 50%; right: 16px; width: 8px; height: 8px;
    border-right: 2px solid var(--blue); border-bottom: 2px solid var(--blue);
    transform: translateY(-50%) rotate(-45deg);
  }
  .card-link .card-date { font-size: 12px; margin-bottom: 2px; }
  .card-link h3 {
    font-size: 15.5px; line-height: 1.4; margin: 0 0 2px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .card-link p {
    font-size: 13px; line-height: 1.5;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
}


/* --- phones: insights featured side stories, topic tiles and career "life" cards
   become compact rows too --- */
@media (max-width: 560px) {
  .ins-side { gap: 10px; }
  .ins-side-card { display: grid; grid-template-columns: 120px minmax(0, 1fr); align-items: center; gap: 12px;
    position: relative; padding: 8px 36px 8px 8px; border-radius: 14px; box-shadow: none; }
  .ins-side-card::after { content: ""; position: absolute; top: 50%; right: 16px; width: 8px; height: 8px;
    border-right: 2px solid var(--blue); border-bottom: 2px solid var(--blue); transform: translateY(-50%) rotate(-45deg); }
  .ins-side-card:hover { transform: none; }
  .ins-side-img { aspect-ratio: 16 / 9; border-radius: 8px; }
  .ins-side-body { padding: 0; gap: 2px; }
  .ins-side-title { font-size: 14.5px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .ins-side-card .ins-row-by { display: none; }

  .ins-topics { gap: 10px; }
  .ins-topic { position: relative; gap: 4px; padding: 14px 40px 14px 16px; border-radius: 0 0 14px 14px; }
  .ins-topic-top { display: none; }
  .ins-topic-desc { font-size: 13px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .ins-topic h3 { font-size: 15.5px; }
  .ins-topic h3 a::before { content: ""; position: absolute; inset: 0; }
  .ins-topic:has(h3 a)::after { content: ""; position: absolute; top: 50%; right: 16px; width: 8px; height: 8px;
    border-right: 2px solid var(--blue); border-bottom: 2px solid var(--blue); transform: translateY(-50%) rotate(-45deg); }

  .life-grid { gap: 10px; }
  .life-card { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 14px; align-items: center; padding: 12px 16px; }
  .life-art { grid-row: span 2; height: 64px; margin: 0; border-radius: 10px; }
  .life-svg { width: 56px; height: 34px; }
  .life-card h3, .life-card p { padding: 0; }
  .life-card h3 { font-size: 15.5px; margin: 0 0 2px; align-self: end; }
  .life-card p { font-size: 13px; line-height: 1.55; align-self: start; }
}

/* --- desktop: all nine client logos on one row (label beside them on wide
   screens, above them on narrower ones) --- */
@media (min-width: 821px) {
  .trust-logos { flex: 1 1 100%; min-width: 0; flex-wrap: nowrap; justify-content: space-between; gap: 16px; }
}
@media (min-width: 1200px) {
  .trust-inner { flex-wrap: nowrap; }
  .trust-logos { flex-basis: 0; gap: 22px; }
}

/* 404 page */
.nf-code { font-family: var(--font-heading); font-size: 96px; font-weight: 800; line-height: 1; margin: 0 0 8px;
  background: linear-gradient(120deg, var(--cyan), #ffffff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nf-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
@media (max-width: 640px) { .nf-code { font-size: 72px; } .nf-actions .btn { flex: 1 1 100%; justify-content: center; } }

/* ---------- site search ---------- */
/* header button: same look as the theme toggle it sits beside */
.search-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; margin-left: 12px; padding: 0; flex-shrink: 0;
  border: 0; border-radius: 50%; background: transparent;
  color: rgba(255, 255, 255, 0.7); cursor: pointer;
  transition: color 0.25s ease, background 0.25s ease;
}
.search-toggle svg { display: block; }
.search-toggle + .theme-toggle { margin-left: 6px; }
@media (hover: hover) {
  .search-toggle:hover { color: var(--cyan); background: rgba(255, 255, 255, 0.08); }
}
@media (max-width: 900px) {
  .search-toggle { margin-left: auto; }
  .search-toggle + .theme-toggle { margin-left: 4px; }
}

.search-layer {
  position: fixed; inset: 0; z-index: 1200; display: none;
  padding: 9vh 16px 16px; background: rgba(14, 8, 30, 0.62);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.search-layer.open { display: block; }
body.search-open { overflow: hidden; }
.search-box {
  max-width: 680px; margin: 0 auto; max-height: 82vh; display: flex; flex-direction: column;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35); overflow: hidden;
}
.search-field { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.search-field svg { flex: none; color: var(--muted); }
.search-input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink-strong);
  font: inherit; font-size: 17px; line-height: 1.5; padding: 4px 0;
}
.search-input::placeholder { color: var(--muted); }
.search-input::-webkit-search-cancel-button { display: none; }
.search-close {
  flex: none; border: 1px solid var(--line); border-radius: 6px; background: transparent; color: var(--muted);
  font: inherit; font-size: 12px; line-height: 1; padding: 6px 8px; cursor: pointer;
}
.search-results { overflow-y: auto; overscroll-behavior: contain; padding: 6px 8px 10px; }
.search-group { padding: 12px 10px 4px; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; color: var(--muted); }
.search-hit { display: block; padding: 10px 12px; border-radius: 10px; color: inherit; text-decoration: none; }
.search-hit.active, .search-hit:hover { background: var(--bg-soft); color: inherit; }
.search-hit-top { display: flex; align-items: baseline; gap: 10px; }
.search-hit-title { flex: 1; min-width: 0; font-size: 15px; font-weight: 700; line-height: 1.45; color: var(--ink-strong); }
.search-hit-label { flex: none; font-size: 12px; color: var(--muted); white-space: nowrap; }
.search-hit-sum {
  margin-top: 3px; font-size: 13px; line-height: 1.6; color: var(--muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.search-hit mark { background: rgba(90, 230, 250, 0.28); color: inherit; border-radius: 3px; padding: 0 1px; }
.search-empty { padding: 22px 12px 10px; font-size: 14px; line-height: 1.7; color: var(--muted); }
.search-empty a { color: var(--blue); font-weight: 600; }
html[data-theme="dark"] .search-empty a { color: var(--cyan); }
.search-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 6px 12px 12px; }
.search-chip {
  border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink);
  font: inherit; font-size: 13px; padding: 6px 14px; cursor: pointer;
}
.search-chip:hover { border-color: var(--cyan); }
.search-foot {
  display: flex; gap: 16px; padding: 9px 18px; border-top: 1px solid var(--line);
  font-size: 12px; color: var(--muted);
}
.search-foot kbd {
  font: inherit; font-size: 11px; border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px; margin-right: 4px;
}
@media (max-width: 640px) {
  .search-layer { padding: 0; }
  .search-box { max-width: none; max-height: none; height: 100%; border: 0; border-radius: 0; }
  .search-input { font-size: 16px; } /* 16px: iOS does not zoom the page on focus */
  .search-foot { display: none; }
  /* topic and date go under the title: beside it they squeeze it into a narrow column */
  .search-hit-top { flex-direction: column; gap: 2px; }
  .search-hit-label { order: 2; white-space: normal; }
}