/* ═══════════════════════════════════════════════════════════
   GXY CULTIN — v6 pilot stylesheet (homepage only)
   Based on v5 baseline; visual language reworked toward the
   approved GoGlobal reference: warm cream base, serif Latin
   accents, duotone photography, soft geometry, bronze line-art.
   Brand CI unchanged: Charcoal #14171F / Bronze #B8843D family.
   1760px shell preserved; inner text columns tightened via .inner.
═══════════════════════════════════════════════════════════ */

/* ─── SELF-HOSTED FONTS (China-safe; no Google CDN) ───
   Subset variable WOFF2 built by scripts/build-fonts.py.
   Re-run that script if new Chinese characters are added to the copy. */
@font-face {
  font-family: "Noto Sans SC";
  src: url("../../assets/fonts/noto-sans-sc.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Domine";
  src: url("../../assets/fonts/domine.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
}

/* ─── RESET ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  background: var(--cream); color: #14171F;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}

/* ─── TOKENS ─── */
:root {
  --charcoal:      #14171F;
  --charcoal2:     #0B0D12;
  --bronze:        #B8843D;
  --bronze2:       #9A6E2E;
  --cream:         #FFFFFF;   /* light bg 1 of 2: white (v5 baseline) */
  --bronze-tint:   #F3EEE6;
  --tint-deep:     #F3EEE6;   /* light bg 2 of 2: bronze tint (v5 baseline) */
  --bronze-border: #E2D5BE;
  --muted:         #454B5C;
  --muted2:        #6b7280;
  --container-pad: 80px;
  --r-lg: 28px;               /* v6 soft-geometry radii */
  --r-md: 18px;
  --serif: "Domine", "Noto Sans SC", "PingFang SC", serif;
}
@media (max-width: 1439px) { :root { --container-pad: 40px; } }
@media (max-width: 767px)  { :root { --container-pad: 16px; } }

/* ─── LAYOUT ─── */
.wrap { max-width: 1760px; margin: 0 auto; padding: 0 var(--container-pad); }
.inner { max-width: 1380px; margin: 0 auto; }   /* v6: tightened content column inside the 1760 shell */
section { position: relative; }

/* Photography shown in natural color (GoGlobal reference: no filter masking) */
.ph-duo { filter: none; }

/* ─── TYPOGRAPHY ─── */
.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 16px; font-weight: 600;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--bronze); margin-bottom: 20px;
}
.eyebrow::before { content: ''; width: 26px; height: 2px; background: var(--bronze); border-radius: 2px; }
.sec-h {
  font-family: var(--serif);
  font-size: clamp(36px, 4.2vw, 68px); font-weight: 700;
  color: var(--charcoal); line-height: 1.25; margin-bottom: 20px;
}
.sec-h--light { color: #fff; }

/* ─── BUTTONS (pill shape, no arrow icon — matches v5 baseline) ─── */
.btn-primary, .btn-ghost {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 13px 30px; font-family: "Noto Sans SC", sans-serif;
  font-size: 19px; font-weight: 600; letter-spacing: 0.04em;
  white-space: nowrap; text-decoration: none; cursor: pointer;
  border-radius: 100px; transition: background .2s, color .2s, transform .15s, box-shadow .2s;
}
.btn-primary { background: var(--bronze); color: #fff; border: 2px solid var(--bronze); }
.btn-primary:hover { background: var(--bronze2); border-color: var(--bronze2); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(184,132,61,0.28); }
.btn-ghost { background: transparent; color: var(--charcoal); border: 2px solid var(--bronze); }
.btn-ghost:hover { background: var(--bronze); color: #fff; transform: translateY(-2px); }
.btn-ghost--light { color: #fff; border-color: rgba(255,255,255,0.55); }
.btn-ghost--light:hover { background: rgba(255,255,255,0.12); color: #fff; border-color: #fff; }

/* text-link on cards — bronze text + small inline arrow (v5 style) */
.link-arr {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 18px; font-weight: 600; color: var(--bronze);
  text-decoration: none; letter-spacing: 0.04em; transition: gap .15s;
}
.link-arr svg { width: 14px; height: 14px; }
.link-arr:hover { gap: 10px; }


/* ══════════════════════════════════════════
   NAV — cream bar, soft bottom corners
══════════════════════════════════════════ */
.nav {
  position: fixed; top: 14px; left: 20px; right: 20px; z-index: 200;
  background: rgba(255,255,255,0.72);
  -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
  border-radius: var(--r-lg);
  box-shadow: 0 6px 24px rgba(20,23,31,0.08);
  transition: box-shadow .3s;
}
.nav.scrolled { box-shadow: 0 12px 34px rgba(20,23,31,0.14); }
.nav-inner {
  max-width: 1760px; margin: 0 auto; padding: 0 36px;
  height: 84px; display: flex; align-items: center; justify-content: space-between;
}
.nav-logo { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; }
.nav-logo-full { height: 68px; width: auto; display: block; }

.nav-links { display: flex; align-items: center; gap: 36px; list-style: none; }
.nav-links a { font-size: 19px; font-weight: 500; text-decoration: none; letter-spacing: 0.02em; color: var(--charcoal); transition: color .15s; }
.nav-links a:hover, .nav-links a.active { color: var(--bronze); }

.nav-has-sub { position: relative; }
.nav-has-sub > a { display: flex; align-items: center; gap: 4px; }
.nav-sub {
  display: none; position: absolute; top: 100%; left: -16px;
  background: #fff; min-width: 200px; list-style: none;
  box-shadow: 0 12px 40px rgba(20,23,31,0.14);
  padding: 10px 0; border-radius: 14px; overflow: hidden;
}
.nav-has-sub:hover .nav-sub { display: block; }
.nav-sub li a { display: block; padding: 10px 20px; font-size: 18px; color: var(--charcoal) !important; white-space: nowrap; }
.nav-sub li a:hover { color: var(--bronze) !important; background: var(--bronze-tint); }

.btn-nav {
  display: inline-flex; align-items: center; padding: 10px 24px;
  font-family: "Noto Sans SC", sans-serif; font-size: 18px; font-weight: 600;
  letter-spacing: 0.04em; text-decoration: none; white-space: nowrap; cursor: pointer; border: none;
  background: var(--bronze); color: #fff; border-radius: 100px; transition: background .15s, transform .15s;
}
.btn-nav:hover { background: var(--bronze2); transform: translateY(-1px); }

.nav-hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 4px; background: none; border: none; z-index: 210; position: relative; }
.nav-hamburger span { display: block; width: 24px; height: 2px; background: var(--charcoal); border-radius: 2px; transition: transform .3s cubic-bezier(.4,0,.2,1), opacity .2s; }
.nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Full-page mobile menu — Apple-style: wipes up on open, down on close (apple-design 2026-08-15) */
.nav-mobile {
  position: fixed; inset: 0; z-index: 150;
  background: var(--cream);
  display: flex; flex-direction: column; justify-content: flex-start;
  gap: 0; padding: 104px 28px 40px;
  transform: translateY(100%);
  transition: transform .5s cubic-bezier(.16,1,.3,1);
  overflow-y: auto; overscroll-behavior: contain;
}
.nav-mobile.open { transform: translateY(0); }
.nav-mobile a {
  display: block; padding: 16px 2px; font-family: var(--serif);
  font-size: 20px; font-weight: 500; color: var(--charcoal);
  text-decoration: none;
  transition: color .15s;
}
/* only the direct-child rows carry the divider + wipe-up reveal */
.nav-mobile > a, .nav-mobile-group { border-bottom: 1px solid var(--bronze-border); }
.nav-mobile > a, .nav-mobile-group {
  opacity: 0; transform: translateY(18px);
  transition: opacity .45s ease, transform .45s cubic-bezier(.16,1,.3,1);
}
.nav-mobile.open > a, .nav-mobile.open .nav-mobile-group { opacity: 1; transform: translateY(0); }
.nav-mobile a:active, .nav-mobile a:hover { color: var(--bronze); }
.nav-mobile > a:last-of-type { border-bottom: none; }

/* collapsible 服务总览 group */
.nav-mobile-grouphead { display: flex; align-items: center; justify-content: space-between; }
.nav-mobile-grouphead > a { flex: 1 1 auto; }
.nav-mobile-caret {
  flex: 0 0 auto; background: none; border: none; cursor: pointer;
  color: var(--charcoal); padding: 16px 4px 16px 18px; display: flex; align-items: center;
}
.nav-mobile-caret svg { transition: transform .3s ease; }
.nav-mobile-group.open .nav-mobile-caret svg { transform: rotate(180deg); }
.nav-mobile-sub {
  max-height: 0; overflow: hidden; padding-left: 18px;
  transition: max-height .35s cubic-bezier(.16,1,.3,1);
}
.nav-mobile-group.open .nav-mobile-sub { max-height: 340px; }
.nav-mobile-sub a { font-size: 17px; font-weight: 400; padding: 13px 2px; border-bottom: 1px solid var(--bronze-border); }
.nav-mobile-sub a:last-child { border-bottom: none; }

.nav-mobile .btn-nav { margin-top: 28px; align-self: flex-start; padding: 14px 34px; font-size: 18px;
  opacity: 0; transform: translateY(18px);
  transition: opacity .45s ease, transform .45s cubic-bezier(.16,1,.3,1), background .15s; }
.nav-mobile.open .btn-nav { opacity: 1; transform: translateY(0); }
/* staggered reveal as the panel wipes up (covers links + services group + CTA) */
.nav-mobile.open > *:nth-child(1) { transition-delay: .10s; }
.nav-mobile.open > *:nth-child(2) { transition-delay: .15s; }
.nav-mobile.open > *:nth-child(3) { transition-delay: .20s; }
.nav-mobile.open > *:nth-child(4) { transition-delay: .25s; }
.nav-mobile.open > *:nth-child(5) { transition-delay: .30s; }
.nav-mobile.open > *:nth-child(6) { transition-delay: .35s; }
.nav-mobile.open > *:nth-child(7) { transition-delay: .40s; }
.nav-mobile.open > *:nth-child(8) { transition-delay: .45s; }
body.menu-open { overflow: hidden; }

/* ══════════════════════════════════════════
   HERO — v6: light editorial hero on cream
══════════════════════════════════════════ */
.hero-v6 { background: var(--cream); padding: 176px 0 96px; overflow: hidden; }
.hero-v6-grid {
  display: grid; grid-template-columns: 1.05fr 0.95fr;
  gap: 64px; align-items: center;
}
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 14px; font-size: 16px; font-weight: 600;
  letter-spacing: 0.28em; text-transform: uppercase; color: var(--bronze); margin-bottom: 28px;
}
.hero-eyebrow::before { content: ''; display: block; width: 32px; height: 2px; background: var(--bronze); border-radius: 2px; }
.hero-h1 {
  font-family: var(--serif);
  font-size: clamp(48px, 5.4vw, 92px); font-weight: 700;
  color: var(--charcoal); line-height: 1.22; margin-bottom: 30px; max-width: 720px;
}
.hero-hl { color: var(--bronze); white-space: nowrap; }
.hero-sub {
  font-size: clamp(20px, 1.6vw, 22px); font-weight: 400; color: var(--muted);
  line-height: 1.9; margin-bottom: 44px; max-width: 540px;
}
.hero-btns { display: flex; gap: 16px; flex-wrap: wrap; }

/* photo: wide rectangle, same treatment as the about photo (radius + offset bronze back frame) */
.hero-v6-visual { position: relative; z-index: 0; }
.hero-photo {
  position: relative; width: 100%; max-width: 660px; margin-left: auto;
  border-radius: var(--r-lg); overflow: hidden;
  aspect-ratio: 16 / 11;
  box-shadow: 0 30px 70px rgba(20,23,31,0.18);
}
.hero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-outline {
  position: absolute; top: 22px; right: -22px;
  width: min(100%, 660px); height: 100%;
  border: 2px solid var(--bronze); border-radius: var(--r-lg);
  opacity: .7; pointer-events: none; z-index: -1;
}

/* ══════════════════════════════════════════
   WHY BAND — charcoal, soft corners
══════════════════════════════════════════ */
.why-band { background: var(--cream); padding: 0 0 104px; }
.why-band-inner {
  background: var(--charcoal); border-radius: var(--r-lg);
  padding: 96px var(--container-pad) 88px;
  margin: 0 20px;
}
.why-band-head { text-align: center; max-width: 900px; margin: 0 auto 72px; }
.why-band-head .eyebrow { justify-content: center; }
.why-band-head .eyebrow::before { display: none; }
.why-band-h {
  font-family: var(--serif);
  font-size: clamp(32px, 3.6vw, 56px); font-weight: 700; color: #fff; line-height: 1.35;
}
.why-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  max-width: 1380px; margin: 0 auto;
}
.why-card { padding: 8px 48px; border-left: 1px solid rgba(255,255,255,0.12); }
.why-card:first-child { border-left: none; }
.why-icon { width: 56px; height: 56px; margin-bottom: 24px; color: var(--bronze); }
.why-icon svg { width: 100%; height: 100%; }
.why-title { font-size: 23px; font-weight: 700; color: #fff; margin-bottom: 12px; }
.why-body { font-size: 19px; color: rgba(255,255,255,0.62); line-height: 1.85; }

/* ══════════════════════════════════════════
   SERVICES — framed warm cards
══════════════════════════════════════════ */
.services { padding: 8px 0 112px; background: var(--cream); }
/* standalone services page: header needs breathing room below the hero (matches about page) */
.services--page { padding-top: 72px; }
.services-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 56px; flex-wrap: wrap; }
.services-head .sec-h { margin-bottom: 0; }
.services-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.svc-card {
  background: var(--tint-deep); border-radius: var(--r-md);
  padding: 16px; display: flex; flex-direction: column;
  transition: transform .25s, box-shadow .25s; overflow: hidden;
}
.svc-card:hover { transform: translateY(-6px); box-shadow: 0 24px 56px rgba(20,23,31,0.12); }
.svc-card:hover .svc-img { transform: scale(1.04); }
.svc-img-wrap { display: block; width: 100%; aspect-ratio: 3/2; overflow: hidden; border-radius: calc(var(--r-md) - 6px); }
.svc-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .45s ease; }
.svc-content { padding: 28px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.svc-topline { display: flex; align-items: center; margin-bottom: 16px; }
.svc-num { font-family: var(--serif); font-size: 19px; font-weight: 700; letter-spacing: 0.14em; color: var(--bronze); }
.svc-title { display: block; font-size: 25px; font-weight: 700; color: var(--charcoal); margin-bottom: 14px; line-height: 1.35; text-decoration: none; transition: color .15s; }
a.svc-title:hover { color: var(--bronze); }
.svc-content .btn-pill { margin-top: auto; }
.svc-title .svc-title-en { font-family: var(--serif); font-size: 17px; font-weight: 500; color: var(--muted2); letter-spacing: 0.06em; }
.svc-body { font-size: 19px; color: var(--muted); line-height: 1.85; flex: 1; margin-bottom: 26px; max-width: 620px; }

/* ══════════════════════════════════════════
   INDUSTRIES — deeper warm tint band
══════════════════════════════════════════ */
.industries { padding: 104px 0; background: var(--tint-deep); border-radius: var(--r-lg); margin: 0 20px; text-align: center; }
.industries .eyebrow { justify-content: center; }
.industries .eyebrow::before { display: none; }
.industries-hex { position: relative; width: 100%; max-width: 1040px; aspect-ratio: 800 / 620; margin: 24px auto 0; }
.hex-lines { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.hex-lines line { stroke: var(--bronze); stroke-width: 1.5; stroke-dasharray: 3 5; opacity: 0.55; }
.hex-center {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 22.5%; aspect-ratio: 1 / 1; border-radius: 50%; background: var(--cream);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 16px; box-shadow: 0 12px 40px rgba(20,23,31,0.12); z-index: 3;
  border: 1px solid var(--bronze-border);
}
.hex-center-label { font-family: var(--serif); font-size: 22px; font-weight: 700; color: var(--charcoal); line-height: 1.3; }
.hex-center-sub { font-size: 16px; color: var(--muted2); margin-top: 6px; line-height: 1.5; }
.hex-center-logo { width: 58%; max-width: 128px; height: auto; display: block; }
.hex-node { position: absolute; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 12px; transform: translate(-50%, -50%); transition: transform .3s; }
.hex-node:hover { transform: translate(-50%, -50%) scale(1.07); }
.hex-shape {
  width: 210px; height: 152px;
  border-radius: var(--r-md);
  overflow: hidden; box-shadow: 0 10px 26px rgba(20,23,31,0.16); background: var(--charcoal);
}
.hex-shape img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hex-tag {
  background: var(--charcoal); color: #fff; font-size: 19px; font-weight: 600;
  padding: 7px 18px; border-radius: 20px; white-space: nowrap; box-shadow: 0 4px 14px rgba(20,23,31,0.2);
}
.hex-node[data-pos="l1"] { top: 17%;  left: 25%; }
.hex-node[data-pos="l2"] { top: 50%;  left: 11%; }
.hex-node[data-pos="l3"] { top: 83%;  left: 25%; }
.hex-node[data-pos="r1"] { top: 17%;  left: 75%; }
.hex-node[data-pos="r2"] { top: 50%;  left: 89%; }
.hex-node[data-pos="r3"] { top: 83%;  left: 75%; }

@media (max-width: 1040px) {
  .industries { padding: 56px 0; margin: 0 10px; }
  .industries-hex { display: none; }
  .industries-grid-mobile { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 24px; padding: 0 16px; }
  .industries-grid-mobile .orbit-card { background: var(--cream); border-radius: 14px; overflow: hidden; box-shadow: 0 6px 20px rgba(20,23,31,0.08); }
  .industries-grid-mobile .orbit-card img { width: 100%; height: 90px; object-fit: cover; display: block; }
  .industries-grid-mobile .orbit-card-label { font-size: 18px; font-weight: 600; color: var(--charcoal); padding: 10px; text-align: center; }
}
@media (min-width: 1041px) { .industries-grid-mobile { display: none; } }

/* ══════════════════════════════════════════
   KEYWORD NETWORK — charcoal rounded band
══════════════════════════════════════════ */
.keyword-network {
  background: var(--charcoal2); padding: 104px 0 96px; overflow: hidden;
  border-radius: var(--r-lg); margin: 40px 20px;
}
.keyword-network .wrap { position: relative; z-index: 2; text-align: center; }
.keyword-network .eyebrow { color: var(--bronze); justify-content: center; }
.keyword-network .eyebrow::before { display: none; }
.keyword-network .sec-h { color: #fff; }
.keyword-network-sub { color: rgba(255,255,255,0.5); font-size: 20px; max-width: 560px; margin: 0 auto 8px; line-height: 1.8; }
.keyword-canvas-wrap { position: relative; width: 100%; height: 560px; margin-top: 8px; }
.keyword-canvas-wrap canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: default; }
.kw-node-link {
  position: absolute; width: 44px; height: 44px; margin: -22px 0 0 -22px;
  border-radius: 50%; z-index: 5; cursor: pointer;
  -webkit-tap-highlight-color: rgba(184,132,61,0.25);
}
.kw-node-link:focus-visible { outline: 2px solid var(--bronze); outline-offset: 2px; }
@media (max-width: 860px) { .keyword-canvas-wrap { height: 460px; } }
@media (max-width: 640px) { .keyword-network { padding: 56px 0; margin: 24px 10px; } .keyword-canvas-wrap { height: 380px; } }

/* ══════════════════════════════════════════
   ABOUT — cream, arch photo + quote doodle
══════════════════════════════════════════ */
.about { padding: 104px 0; background: var(--cream); }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 88px; align-items: center; }
.about-img-wrap { position: relative; max-width: 620px; }
.about-photo { border-radius: var(--r-lg); overflow: hidden; box-shadow: 0 26px 60px rgba(20,23,31,0.16); }
.about-img { width: 100%; height: 560px; object-fit: cover; display: block; }
.about-outline {
  position: absolute; top: 22px; left: -22px; width: 100%; height: 100%;
  border: 2px solid var(--bronze); border-radius: var(--r-lg);
  opacity: .7; pointer-events: none; z-index: -1;
}
.about-body { font-size: 21px; color: var(--muted); line-height: 1.95; margin-bottom: 30px; max-width: 620px; }
.about-feats { display: flex; flex-direction: column; gap: 16px; margin-bottom: 40px; }
.about-feat { display: flex; align-items: flex-start; gap: 16px; }
.about-feat-icon { width: 30px; height: 30px; flex-shrink: 0; color: var(--bronze); margin-top: 3px; }
.about-feat-icon svg { width: 100%; height: 100%; }
.about-feat-text { font-size: 19px; color: var(--muted); line-height: 1.75; }
.about-feat-text strong { color: var(--charcoal); font-weight: 600; }

/* ══════════════════════════════════════════
   BLOG — homepage insights, horizontal scroller (GoGlobal-style)
══════════════════════════════════════════ */
.blog-sec { padding: 0 0 112px; background: var(--cream); }
.blog-scroller-wrap { position: relative; }
.blog-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  width: 52px; height: 52px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(255,255,255,0.5); color: var(--charcoal);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(20,23,31,0.18);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  transition: background .2s, transform .15s, opacity .2s;
}
.blog-arrow svg { width: 20px; height: 20px; }
.blog-arrow:hover { background: rgba(255,255,255,0.85); transform: translateY(-50%) scale(1.06); }
.blog-arrow--prev { left: 14px; }
.blog-arrow--next { right: 14px; }
.blog-arrow[disabled] { opacity: 0.35; cursor: default; }
.blog-arrow[disabled]:hover { background: rgba(255,255,255,0.5); transform: translateY(-50%); }
.blog-scroller {
  display: flex; gap: 24px; overflow-x: auto;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  padding: 4px 4px 24px; scrollbar-color: var(--bronze) var(--bronze-tint); scrollbar-width: thin;
}
.blog-scroller::-webkit-scrollbar { height: 6px; }
.blog-scroller::-webkit-scrollbar-track { background: var(--bronze-tint); border-radius: 3px; }
.blog-scroller::-webkit-scrollbar-thumb { background: var(--bronze); border-radius: 3px; }
.blog-card-home {
  flex: 0 0 auto; width: min(496px, 82vw); scroll-snap-align: start;   /* 2.7 cards visible in the 1380px column */
  display: flex; flex-direction: column; text-decoration: none;
  background: var(--tint-deep); border-radius: var(--r-md); padding: 14px;
  transition: transform .25s, box-shadow .25s;
}
.blog-card-home:hover { transform: translateY(-6px); box-shadow: 0 20px 48px rgba(20,23,31,0.12); }
.blog-card-home .blog-img-wrap {
  width: 100%; aspect-ratio: 16 / 10; overflow: hidden;
  border-radius: calc(var(--r-md) - 6px); margin-bottom: 20px;
}
.blog-card-home .blog-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .45s ease; }
.blog-card-home:hover .blog-img-wrap img { transform: scale(1.05); }
.blog-card-body { padding: 0 10px 12px; display: flex; flex-direction: column; flex: 1; }
.blog-meta { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.blog-cat {
  font-size: 16px; font-weight: 600; color: var(--bronze);
  background: var(--cream); border: 1px solid var(--bronze-border);
  padding: 4px 14px; border-radius: 20px; white-space: nowrap;
}
.blog-date { font-size: 16px; color: var(--muted2); letter-spacing: 0.04em; }
.blog-card-h {
  font-size: 22px; font-weight: 700; color: var(--charcoal);
  line-height: 1.5; margin-bottom: 16px; flex: 1; transition: color .15s;
}
.blog-card-home:hover .blog-card-h { color: var(--bronze); }

/* ══════════════════════════════════════════
   CTA — cityscape strip into charcoal band
══════════════════════════════════════════ */
.cta-sec { background: var(--cream); padding: 64px 0 0; }
/* closed card above the floating footer; a page that continues into .faq
   below needs top-only radius + margin-bottom 0 (add a modifier at migration) */
.cta-band {
  background: var(--charcoal2); border-radius: var(--r-lg);
  position: relative; overflow: hidden; margin: 0 20px 24px;
  padding: 96px var(--container-pad) 104px;
}
.cta-band::before {
  content: ''; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(45deg, rgba(184,132,61,0.04) 0px, rgba(184,132,61,0.04) 1px, transparent 1px, transparent 64px);
}
.cta-inner {
  position: relative; z-index: 1; max-width: 1380px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 48px; flex-wrap: wrap;
}
.cta-left { max-width: 640px; position: relative; }
.cta-heading {
  font-family: var(--serif);
  font-size: clamp(36px, 4.2vw, 68px); font-weight: 700; color: #fff; line-height: 1.28; margin-bottom: 18px;
}
.cta-sub { font-size: 21px; color: rgba(255,255,255,0.55); line-height: 1.8; }
.cta-btns { display: flex; gap: 16px; flex-wrap: wrap; }
/* CTA-band buttons run one size up from the base pill (was inline style="font-size:20px;padding:15px 34px" on every page) */
.cta-btns .btn-primary, .cta-btns .btn-ghost { font-size: 20px; padding: 15px 34px; }
/* standalone section lead paragraph (was ad-hoc inline styles on service pages) */
.sec-lead { font-size: 19px; color: var(--muted); line-height: 1.9; }

/* ══════════════════════════════════════════
   FAQ — continues the charcoal block
══════════════════════════════════════════ */
.faq { padding: 24px 0 104px; background: var(--charcoal2); border-radius: 0 0 var(--r-lg) var(--r-lg); margin: 0 20px 64px; }
.faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; max-width: 1380px; margin: 0 auto; }
.faq-left .eyebrow { color: var(--bronze); }
.faq-left .sec-h { color: #fff; }
.faq-list { display: flex; flex-direction: column; }
.faq-item { border-bottom: 1px solid rgba(255,255,255,0.14); }
.faq-item:first-child { border-top: 1px solid rgba(255,255,255,0.14); }
.faq-q {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 24px 0;
  font-size: 20px; font-weight: 600; color: #fff; cursor: pointer; line-height: 1.5;
  user-select: none; background: none; border: none; text-align: left; width: 100%; transition: color .15s;
}
.faq-q:hover { color: var(--bronze); }
.faq-q svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--bronze); transition: transform .25s; }
.faq-item.open .faq-q svg { transform: rotate(45deg); }
.faq-a { font-size: 19px; color: rgba(255,255,255,0.6); line-height: 1.85; max-height: 0; overflow: hidden; transition: max-height .35s ease, padding .3s ease; }
.faq-item.open .faq-a { max-height: 300px; padding-bottom: 22px; }

.faq-contact-card { background: var(--bronze-tint); padding: 48px 44px; border-radius: var(--r-md); }
.faq-contact-title { font-family: var(--serif); font-size: 28px; font-weight: 700; color: var(--charcoal); margin-bottom: 14px; line-height: 1.4; }
.faq-contact-body { font-size: 19px; color: var(--muted); line-height: 1.85; margin-bottom: 28px; }
.faq-contact-btns { display: flex; flex-direction: column; gap: 12px; }

/* ══════════════════════════════════════════
   FAQ PAGE (v6) — light dedicated page
   Reuses the shared .faq-item/.faq-q/.faq-a JS hooks (main.js), but
   re-skins them light (the base .faq styles are the dark homepage teaser).
══════════════════════════════════════════ */
.faq-page { background: var(--cream); padding: 24px 0 96px; }
.faq-page .inner { max-width: 900px; }
.faq-intro { font-size: 20px; color: var(--muted); line-height: 1.85; max-width: 760px; margin: 0 0 8px; }

.faq-cat { margin-top: 60px; }
.faq-cat:first-of-type { margin-top: 40px; }
.faq-cat-head {
  font-family: var(--serif); font-size: 24px; font-weight: 700; color: var(--charcoal);
  margin-bottom: 22px; padding-bottom: 12px; border-bottom: 2px solid var(--bronze); display: inline-block;
}

.faq-page .faq-list { gap: 14px; }
.faq-page .faq-item {
  border: 1px solid var(--bronze-border); border-radius: var(--r-md); background: #fff;
  padding: 2px 26px; transition: border-color .2s ease, box-shadow .2s ease;
}
.faq-page .faq-item:first-child { border-top: 1px solid var(--bronze-border); }
.faq-page .faq-item.open { border-color: var(--bronze); box-shadow: 0 12px 32px rgba(20,23,31,0.06); }
.faq-page .faq-q { color: var(--charcoal); font-size: 19px; padding: 22px 0; }
.faq-page .faq-q:hover { color: var(--bronze); }
.faq-page .faq-a { color: var(--muted); font-size: 18px; }
.faq-page .faq-item.open .faq-a { max-height: 1200px; padding-bottom: 24px; }

/* ── 咨询前请准备 checklist band (from client intake questionnaire) ── */
.faq-prep { margin: 0 20px 64px; border-radius: var(--r-lg); background: var(--tint-deep); padding: 88px 0; }
.faq-prep .inner { max-width: 1080px; }
.faq-prep .eyebrow { justify-content: center; }
.faq-prep .eyebrow::before { display: none; }
.faq-prep-head { text-align: center; }
.faq-prep-head .sec-h { margin-top: 6px; }
.faq-prep-sub { text-align: center; font-size: 19px; color: var(--muted); max-width: 700px; margin: 14px auto 52px; line-height: 1.8; }
.faq-prep-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 44px 56px; }
.faq-prep-col-head {
  font-family: var(--serif); font-size: 19px; font-weight: 700; color: var(--charcoal);
  margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid var(--bronze-border);
}
.faq-check { list-style: none; display: flex; flex-direction: column; gap: 15px; }
.faq-check li { display: flex; gap: 12px; font-size: 17px; color: var(--muted); line-height: 1.6; }
.faq-check li svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--bronze); margin-top: 1px; }
@media (max-width: 760px) {
  .faq-prep { padding: 64px 0; }
  .faq-prep-grid { grid-template-columns: 1fr; gap: 34px; }
}

/* ══════════════════════════════════════════
   FOOTER — light bronze, all-corners floating band (Phase 2, 2026-08-13)
══════════════════════════════════════════ */
.footer {
  background: var(--bronze-tint); padding: 80px 0 0;
  margin: 0 20px 24px; border-radius: var(--r-lg); overflow: hidden;
}
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 48px; padding-bottom: 56px; }
.footer-logo-row { display: flex; align-items: center; margin-bottom: 18px; text-decoration: none; }
.footer-logo-full { height: 62px; width: auto; display: block; }
.footer-tagline { font-size: 18px; color: var(--muted); line-height: 1.8; margin-bottom: 28px; max-width: 260px; }
.footer-social { display: flex; gap: 12px; }
.footer-social a { width: 38px; height: 38px; border: 1px solid var(--bronze-border); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--muted2); text-decoration: none; transition: border-color .15s, color .15s, transform .15s; background: var(--cream); }
.footer-social a:hover { border-color: var(--bronze); color: var(--bronze); transform: translateY(-2px); }
.footer-social img { width: 18px; height: 18px; object-fit: contain; border-radius: 4px; }
.footer-col h4 { font-size: 16px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--bronze); margin-bottom: 20px; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 11px; }
.footer-col ul li a { font-size: 18px; color: var(--charcoal); text-decoration: none; transition: color .15s; }
.footer-col ul li a:hover { color: var(--bronze); }
.footer-contact-item { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.footer-contact-icon { width: 16px; flex-shrink: 0; color: var(--bronze); }
.footer-contact-text { font-size: 18px; color: var(--charcoal); line-height: 1.6; }
.footer-contact-text a { color: inherit; text-decoration: none; transition: color .2s ease; }
.footer-contact-text a:hover { color: var(--bronze); }
.footer-bottom { border-top: 1px solid var(--bronze-border); padding: 20px 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.footer-copy { font-size: 17px; color: var(--muted2); letter-spacing: 0.04em; }
.footer-bottom-links { display: flex; gap: 24px; }
.footer-bottom-links a { font-size: 17px; color: var(--muted2); text-decoration: none; transition: color .15s; }
.footer-bottom-links a:hover { color: var(--bronze); }

/* ══════════════════════════════════════════
   LEAD MODAL (v6: soft corners, warm surfaces)
══════════════════════════════════════════ */
.modal-backdrop { display: none; position: fixed; inset: 0; z-index: 500; background: rgba(11,13,18,0.82); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); align-items: center; justify-content: center; padding: 20px; }
.modal-backdrop.open { display: flex; }
.modal { background: var(--cream); width: 100%; max-width: 600px; max-height: 90vh; overflow-y: auto; position: relative; border-radius: var(--r-md); animation: modalIn .25s ease; }
@keyframes modalIn { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:translateY(0); } }
.modal-close { position: absolute; top: 16px; right: 20px; background: none; border: none; cursor: pointer; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; color: var(--muted2); font-size: 22px; line-height: 1; padding: 0; transition: color .15s; }
.modal-close:hover { color: var(--charcoal); }
.modal-progress { display: flex; align-items: center; gap: 8px; padding: 28px 40px 0; }
.modal-dot { width: 8px; height: 8px; border-radius: 4px; background: var(--bronze-border); transition: background .25s, width .25s; }
.modal-dot.active { background: var(--bronze); width: 24px; }
.modal-dot.done { background: var(--bronze); opacity: 0.4; }
.modal-step-label { margin-left: auto; font-size: 16px; font-weight: 500; color: var(--muted2); letter-spacing: 0.08em; }
.modal-body { padding: 24px 40px 40px; }
.modal-step { display: none; }
.modal-step.active { display: block; }
.modal-step-title { font-family: var(--serif); font-size: 27px; font-weight: 700; color: var(--charcoal); margin-bottom: 6px; line-height: 1.3; }
.modal-step-sub { font-size: 18px; color: var(--muted2); margin-bottom: 28px; line-height: 1.6; }
.modal-cards { display: grid; gap: 10px; margin-bottom: 32px; }
.modal-cards--4 { grid-template-columns: 1fr 1fr; }
.modal-cards--3 { grid-template-columns: repeat(3, 1fr); }
.modal-cards--6 { grid-template-columns: repeat(3, 1fr); }
.modal-card { padding: 18px 16px; border: 2px solid var(--bronze-border); border-radius: 12px; cursor: pointer; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; transition: border-color .15s, background .15s; user-select: none; background: #fff; }
.modal-card:hover { border-color: var(--bronze); background: var(--bronze-tint); }
.modal-card.selected { border-color: var(--bronze); background: var(--bronze-tint); }
.modal-card.selected .modal-card-icon { background: var(--bronze); }
.modal-card.selected .modal-card-icon svg { color: #fff; }
.modal-card-icon { width: 40px; height: 40px; background: var(--bronze-tint); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: background .15s; flex-shrink: 0; }
.modal-card-icon svg { width: 18px; height: 18px; color: var(--bronze); }
.modal-card-label { font-size: 18px; font-weight: 600; color: var(--charcoal); line-height: 1.3; }
.modal-card-sub { font-size: 16px; color: var(--muted2); line-height: 1.4; }
.modal-contact-methods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 24px; }
.modal-method { padding: 16px 12px; border: 2px solid var(--bronze-border); border-radius: 12px; cursor: pointer; text-align: center; transition: border-color .15s, background .15s; background: #fff; }
.modal-method:hover, .modal-method.selected { border-color: var(--bronze); background: var(--bronze-tint); }
.modal-method-icon { font-size: 22px; margin-bottom: 6px; }
.modal-method-name { font-size: 18px; font-weight: 600; color: var(--charcoal); }
.modal-field { margin-bottom: 16px; }
.modal-field label { display: block; font-size: 17px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted2); margin-bottom: 8px; }
.modal-field input { width: 100%; padding: 12px 16px; font-family: "Noto Sans SC", sans-serif; font-size: 19px; color: var(--charcoal); background: #fff; border: 2px solid var(--bronze-border); border-radius: 10px; outline: none; transition: border-color .15s; }
.modal-field input:focus { border-color: var(--bronze); }
.wechat-panel { display: none; text-align: center; padding: 24px; background: var(--bronze-tint); border-radius: 12px; margin-bottom: 16px; }
.wechat-panel.show { display: block; }
.wechat-qr-placeholder { width: 140px; height: 140px; background: #e8ddd0; border-radius: 10px; margin: 0 auto 12px; display: flex; align-items: center; justify-content: center; font-size: 16px; color: var(--muted2); text-align: center; line-height: 1.6; }
.wechat-id { font-size: 19px; font-weight: 600; color: var(--charcoal); margin-bottom: 6px; }
.wechat-note { font-size: 17px; color: var(--muted2); line-height: 1.6; margin-bottom: 12px; }
.wechat-mobile-btn { display: none; width: 100%; padding: 13px; font-family: "Noto Sans SC", sans-serif; font-size: 19px; font-weight: 600; background: #07C160; color: #fff; border: none; border-radius: 12px; cursor: pointer; margin-top: 8px; align-items: center; justify-content: center; gap: 8px; }
@media (pointer: coarse) { .wechat-mobile-btn { display: flex; } }
.modal-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; }
.modal-back { background: none; border: none; cursor: pointer; font-size: 18px; font-weight: 500; color: var(--muted2); padding: 0; transition: color .15s; display: flex; align-items: center; gap: 6px; }
.modal-back:hover { color: var(--charcoal); }
.modal-back:disabled { opacity: 0; pointer-events: none; }
.modal-back svg { width: 14px; height: 14px; }
.modal-success { display: none; text-align: center; padding: 48px 40px 56px; }
.modal-success.show { display: block; }
.modal-success-icon { width: 64px; height: 64px; background: var(--bronze-tint); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 24px; }
.modal-success-icon svg { width: 28px; height: 28px; color: var(--bronze); }
.modal-success h3 { font-size: 27px; font-weight: 700; color: var(--charcoal); margin-bottom: 12px; }
.modal-success p { font-size: 19px; color: var(--muted); line-height: 1.8; margin-bottom: 8px; }

/* ══════════════════════════════════════════
   SCROLL REVEAL
══════════════════════════════════════════ */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .6s ease, transform .6s ease; transition-delay: var(--rd, 0s); }
.reveal.reveal-visible { opacity: 1; transform: translateY(0); }
/* ── Accessibility: honor OS motion / transparency / contrast prefs (apple-design harvest 2026-08-15) ── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  /* replace slides/springs with a plain state; keep opacity/colour cues */
  *, *::before, *::after {
    animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important; scroll-behavior: auto !important;
  }
  .hero-cine-cue svg { animation: none !important; }
}
@media (prefers-reduced-transparency: reduce) {
  .nav { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .modal-backdrop, .wechat-qr-backdrop { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(11,13,18,0.94); }
}
@media (prefers-contrast: more) {
  .nav { background: #fff; border: 1px solid var(--charcoal); }
  .btn-ghost, .btn-pill--light { border-color: currentColor; }
}

/* ══════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════ */
@media (max-width: 1100px) {
  .hero-v6-grid { grid-template-columns: 1fr; gap: 48px; }
  .hero-photo { margin: 0 auto; max-width: 560px; }
  .hero-outline { display: none; }
  .why-grid { grid-template-columns: 1fr; gap: 40px; }
  .why-card { border-left: none; padding: 0; }
}
@media (max-width: 1000px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
  .services-grid { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .nav-links, .nav-inner .btn-nav { display: none; }
  .nav-hamburger { display: flex; }
  .about-grid, .faq-grid { grid-template-columns: 1fr; gap: 48px; }
  .about-img { height: 340px; }
  .about-outline { display: none; }
  .modal-cards--3, .modal-cards--6 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
  /* thinner floating nav on phones (Apple-style slim bar; logo scaled down) */
  .nav { top: 10px; left: 12px; right: 12px; }
  .nav-inner { height: 56px; padding: 0 16px; }
  .nav-logo-full { height: 40px; }
  .nav.scrolled { box-shadow: 0 8px 24px rgba(20,23,31,0.12); }
}
@media (max-width: 640px) {
  .hero-v6 { padding: 140px 0 64px; }
  .services, .about { padding: 64px 0; }
  .blog-sec { padding-bottom: 64px; }
  .faq { padding: 24px 0 64px; }
  .why-band { padding-bottom: 64px; }
  .why-band-inner { padding: 64px var(--container-pad) 56px; }
  .why-card { text-align: center; }
  .why-icon { margin-left: auto; margin-right: auto; }
  /* even inter-section rhythm on phones: preceding section already supplies a 64px
     bottom gap, so the CTA must not add its own top padding (was doubling to ~128px) */
  .cta-sec { padding-top: 0; }
  .cta-band { padding: 64px var(--container-pad) 72px; }
  .cta-inner { flex-direction: column; align-items: flex-start; gap: 32px; }
  .hero-btns { flex-direction: column; }
  .hero-btns .btn-primary, .hero-btns .btn-ghost { width: 100%; justify-content: center; }
  .footer { padding: 48px 0 0; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .modal-body { padding: 20px 24px 32px; }
  .modal-progress { padding: 22px 24px 0; }
  .modal-cards--4 { grid-template-columns: 1fr 1fr; }
  .modal-step-title { font-size: 24px; }
}


/* ══════════════════════════════════════════
   CONTACT PAGE (v6) — ported from v5, restyled
   to v6: light editorial hero, soft geometry,
   serif headings, static maps (China-safe).
══════════════════════════════════════════ */

/* light editorial page hero — bronze-tint inset band (v6 replaces v5's dark image hero);
   top corners sit hidden behind the fixed white nav, bottom corners echo the other bands */
.page-hero-v6 {
  background: var(--bronze-tint);
  margin: 112px 20px 0;
  border-radius: var(--r-lg);
  padding: 72px 0 64px;
}
.page-hero-v6 .breadcrumb { font-size: 15px; letter-spacing: 0.08em; color: var(--muted2); margin-bottom: 18px; }
.page-hero-v6 .breadcrumb a { color: var(--muted2); text-decoration: none; }
.page-hero-v6 .breadcrumb a:hover { color: var(--bronze); }
.page-hero-v6 h1 {
  font-family: var(--serif); font-size: clamp(40px, 5vw, 76px); font-weight: 700;
  color: var(--charcoal); line-height: 1.15; margin-bottom: 18px;
}
.page-hero-v6 .page-hero-sub { font-size: 20px; color: var(--muted); max-width: 760px; line-height: 1.8; }

.contact-main { padding: 72px 0 104px; background: var(--cream); }
.contact-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 64px; align-items: start; }

/* Office tabs — future branches are just another .office-tab + data-office block */
.office-tabs { display: flex; gap: 10px; margin-bottom: 32px; flex-wrap: wrap; }
.office-tab {
  font-size: 16px; font-weight: 600; padding: 10px 22px; border-radius: 100px;
  border: 2px solid var(--bronze); background: var(--bronze); color: #fff; cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.office-tab[data-office]:not(.office-tab--active) {
  background: transparent; color: var(--muted2); border-color: var(--bronze-border);
}
.office-tab[data-office]:not(.office-tab--active):hover { color: var(--bronze); border-color: var(--bronze); }

.office-card { background: var(--tint-deep); border-top: 3px solid var(--bronze); border-radius: var(--r-md); padding: 40px 36px; }
.office-info-row { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
.office-info-row:last-of-type { margin-bottom: 0; }
.office-icon { width: 40px; height: 40px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.office-icon svg { width: 18px; height: 18px; color: var(--bronze); }
.office-info-label { font-size: 15px; color: var(--muted2); letter-spacing: 0.04em; margin-bottom: 3px; }
.office-info-value { font-size: 19px; color: var(--charcoal); font-weight: 600; line-height: 1.6; }
.office-info-value--note { font-weight: 400; color: var(--muted); font-size: 16px; }
.office-info-value a { color: var(--bronze); text-decoration: none; transition: color .15s; }
.office-info-value a:hover { color: var(--charcoal); text-decoration: underline; }
.office-quick-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.office-quick-actions .btn-ghost { padding: 10px 22px; font-size: 16px; }

/* Static map (China-safe): a captured image + smart "open in maps" link.
   Replaces the live Google iframe that fails in mainland China. */
.office-map { margin-top: 28px; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--bronze-border); line-height: 0; }
.office-map img { width: 100%; height: 240px; object-fit: cover; display: block; filter: grayscale(0.12); }
.office-map iframe { width: 100%; height: 300px; border: 0; display: block; }
.map-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 15px; color: var(--bronze); text-decoration: none; font-weight: 600; letter-spacing: 0.02em; transition: gap .15s; }
.map-link svg { width: 17px; height: 17px; }
.map-link:hover { gap: 12px; text-decoration: underline; }

/* CTA panel — charcoal rounded card, sticky */
.contact-cta-card { background: var(--charcoal2); padding: 48px 40px; border-radius: var(--r-lg); position: sticky; top: 112px; }
.contact-cta-card .eyebrow { color: var(--bronze); }
.contact-cta-card h2 { font-family: var(--serif); font-size: clamp(26px, 2.6vw, 34px); font-weight: 700; color: #fff; line-height: 1.3; margin-bottom: 16px; }
.contact-cta-card p { font-size: 18px; color: rgba(255,255,255,0.62); line-height: 1.9; margin-bottom: 28px; }
.contact-cta-card .btn-primary { width: 100%; justify-content: center; padding: 15px 24px; font-size: 18px; margin-bottom: 16px; }
.contact-cta-note { font-size: 15px; color: rgba(255,255,255,0.42); text-align: center; }

@media (max-width: 1000px) {
  .contact-grid { grid-template-columns: 1fr; gap: 48px; }
  .contact-cta-card { position: static; }
}
@media (max-width: 640px) {
  .page-hero-v6 { padding: 56px 0 40px; margin: 92px 12px 0; }
  .contact-main { padding: 48px 0 64px; }
  .office-card, .contact-cta-card { padding: 32px 24px; }
  .office-quick-actions { flex-direction: column; }
  .office-quick-actions .btn-ghost { width: 100%; justify-content: center; }
}

/* ══════════════════════════════════════════
   ABOUT PAGE (v6) — story split (photo right),
   value cards, team teaser, rounded image banner
══════════════════════════════════════════ */
.about--page { padding: 72px 0 104px; }
/* offset outline flips to the right when the photo sits on the right column */
.about-outline--right { left: auto; right: -22px; }

.values-v6 { padding: 0 0 104px; background: var(--cream); }
.values-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 40px; }
.value-card {
  background: var(--tint-deep); border-radius: var(--r-md);
  padding: 40px 32px; transition: transform .25s, box-shadow .25s;
}
.value-card:hover { transform: translateY(-6px); box-shadow: 0 20px 48px rgba(20,23,31,0.10); }
.value-icon { width: 56px; height: 56px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; margin-bottom: 22px; }
.value-icon svg { width: 26px; height: 26px; color: var(--bronze); }
.value-title { font-size: 23px; font-weight: 700; color: var(--charcoal); margin-bottom: 10px; }
.value-body { font-size: 19px; color: var(--muted); line-height: 1.85; }

/* related-service card — service photo on top (same as homepage) + pill CTA */
.value-card--media { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.value-card--media .rel-img-wrap { width: 100%; aspect-ratio: 3/2; overflow: hidden; }
.value-card--media .rel-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .45s ease; }
.value-card--media:hover .rel-img { transform: scale(1.04); }
.value-card--media .rel-body { padding: 30px 32px 34px; display: flex; flex-direction: column; flex: 1; }
.value-card--media .value-body { flex: 1; }
/* pill CTA button used on cards (bronze-outline pill, fills on hover) */
.btn-pill { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  margin-top: 22px; padding: 11px 26px; border-radius: 100px;
  font-family: "Noto Sans SC", sans-serif; font-size: 17px; font-weight: 600; letter-spacing: 0.04em;
  color: var(--bronze); background: transparent; border: 2px solid var(--bronze); cursor: pointer;
  text-decoration: none; transition: background .2s, color .2s, transform .15s, box-shadow .2s; }
.btn-pill svg { width: 14px; height: 14px; }
.btn-pill:hover { background: var(--bronze); color: #fff; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(184,132,61,0.28); }

.team-v6 { padding: 0 0 104px; background: var(--cream); }
/* horizontal cards — bigger photo left, name/title/description right, 2 per row */
.team-grid-v6 { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 40px; }
.team-card-v6 {
  display: flex; align-items: stretch;
  background: var(--tint-deep); border-radius: var(--r-md); padding: 16px;
  transition: transform .25s, box-shadow .25s;
}
.team-card-v6:hover { transform: translateY(-6px); box-shadow: 0 20px 48px rgba(20,23,31,0.12); }
.team-photo-v6 {
  width: 42%; flex-shrink: 0; align-self: stretch; min-height: 300px;
  object-fit: cover; object-position: top center; display: block;
  border-radius: calc(var(--r-md) - 6px);
}
.team-info-v6 { padding: 10px 8px 10px 26px; display: flex; flex-direction: column; justify-content: center; }
.team-card-v6 .team-name { font-size: 24px; font-weight: 700; color: var(--charcoal); margin: 0 0 4px; }
.team-card-v6 .team-role { font-size: 15px; font-weight: 600; color: var(--bronze); line-height: 1.55; margin: 0 0 16px; }
.team-card-v6 .team-bio { font-size: 15.5px; color: var(--muted); line-height: 1.85; margin: 0; }

.about-banner-v6 { margin: 0 20px; border-radius: var(--r-lg); overflow: hidden; }
.about-banner-v6 img { width: 100%; height: clamp(280px, 36vw, 460px); object-fit: cover; display: block; }

@media (max-width: 1100px) {
  .values-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 980px) {
  .team-grid-v6 { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .about-outline--right { display: none; }
}
@media (max-width: 640px) {
  .about--page { padding: 48px 0 64px; }
  .values-v6, .team-v6 { padding-bottom: 64px; }
  /* even section rhythm: a cream .about split-section carries its own top padding,
     which doubled with the preceding section's bottom gap (→ 104–128px). Drop the
     top pad whenever .about follows another content section so every gap lands on the
     single 64px standard. These selectors only match on service pages; the homepage
     .about follows .keyword-network (not listed), so its spacing is untouched. */
  .values-v6 + .about,
  .svc-band + .about,
  .svc-cycle + .about,
  .svc-road + .about,
  .svc-proof + .about,
  .svc-grades + .about,
  .svc-journey + .about { padding-top: 0; }
  .values-grid { grid-template-columns: 1fr; gap: 16px; }
  .value-card { padding: 32px 24px; }
  .team-card-v6 { flex-direction: column; }
  /* keep the desktop 4:5 portrait ratio on mobile — no crop */
  .team-photo-v6 { width: 100%; min-height: 0; height: auto; aspect-ratio: 4 / 5; }
  .team-info-v6 { padding: 20px 6px 6px; }
  .about-banner-v6 { margin: 0 10px; }
}

/* ── Floating quick-chat widget (ported from v5) ── */
.chat-fab { position: fixed; right: 28px; bottom: 28px; z-index: 480; display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
.chat-fab-toggle {
  width: 60px; height: 60px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--bronze); color: #fff; align-self: flex-end;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 26px rgba(184,132,61,0.45); transition: background .2s, transform .2s;
}
.chat-fab-toggle:hover { background: var(--bronze2); transform: translateY(-2px); }
.chat-fab-toggle svg { width: 27px; height: 27px; }
.chat-fab-ic-close { display: none; }
.chat-fab.open .chat-fab-ic-chat { display: none; }
.chat-fab.open .chat-fab-ic-close { display: block; }
.chat-fab-menu {
  display: flex; flex-direction: column; gap: 12px; align-items: flex-end;
  opacity: 0; visibility: hidden; transform: translateY(12px) scale(.96);
  transform-origin: bottom right; transition: opacity .22s, transform .22s, visibility .22s;
}
.chat-fab.open .chat-fab-menu { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.chat-fab-item {
  display: flex; align-items: center; gap: 12px; cursor: pointer;
  background: #fff; border: 1px solid var(--bronze-border); border-radius: 44px;
  padding: 9px 20px 9px 10px; text-decoration: none; text-align: left;
  box-shadow: 0 6px 20px rgba(20,23,31,0.14); transition: transform .18s, box-shadow .18s;
  font-family: inherit;
}
.chat-fab-item:hover { transform: translateX(-3px); box-shadow: 0 10px 28px rgba(20,23,31,0.2); }
.chat-fab-item-icon { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.chat-fab-item--wa .chat-fab-item-icon { background: #25D366; }
.chat-fab-item--wc .chat-fab-item-icon { background: #07C160; }
.chat-fab-item-icon img { width: 24px; height: 24px; object-fit: contain; }
.chat-fab-item-label { display: flex; flex-direction: column; line-height: 1.25; font-size: 15.5px; font-weight: 600; color: var(--charcoal); white-space: nowrap; }
.chat-fab-item-label small { font-size: 12.5px; font-weight: 400; color: var(--muted2); }

/* ── WeChat QR popup (3 consultants) ── */
.wechat-qr-backdrop { display: none; position: fixed; inset: 0; z-index: 490; background: rgba(11,13,18,0.82); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); align-items: center; justify-content: center; padding: 20px; }
.wechat-qr-backdrop.open { display: flex; }
.wechat-qr-modal { position: relative; background: #fff; border-radius: var(--r-lg); padding: 40px 40px 44px; max-width: 620px; width: 100%; text-align: center; box-shadow: 0 24px 70px rgba(11,13,18,0.4); }
.wechat-qr-close { position: absolute; top: 16px; right: 20px; background: none; border: none; font-size: 22px; color: var(--muted2); cursor: pointer; line-height: 1; }
.wechat-qr-close:hover { color: var(--charcoal); }
.wechat-qr-title { font-family: var(--serif); font-size: 25px; font-weight: 700; color: var(--charcoal); margin-bottom: 8px; }
.wechat-qr-sub { font-size: 15.5px; color: var(--muted); margin-bottom: 30px; }
.wechat-qr-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
/* single-consultant view — compact box sized for one QR */
.wechat-qr-backdrop.single .wechat-qr-modal { max-width: 340px; }
.wechat-qr-backdrop.single .wechat-qr-grid { grid-template-columns: 1fr; }
.wechat-qr-backdrop.single .wechat-qr-img { max-width: 220px; margin: 0 auto; }
.wechat-qr-item { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.wechat-qr-img { width: 100%; aspect-ratio: 1; border-radius: 14px; background: #fff; border: 1px solid var(--bronze-border); object-fit: cover; }
.wechat-qr-name { font-size: 16px; font-weight: 600; color: var(--charcoal); }
@media (max-width: 560px) {
  .chat-fab { right: 18px; bottom: 18px; }
  .chat-fab-toggle { width: 54px; height: 54px; }
  .wechat-qr-modal { padding: 34px 20px 30px; }
  .wechat-qr-grid { gap: 12px; }
  .wechat-qr-title { font-size: 21px; }
}

/* ══════════════════════════════════════════
   SERVICE DETAIL PAGE (v6) — company registration
   Composes existing v6 components (about-grid,
   about-feats, values-grid/value-card, cta-band).
   New here: a 3-col value grid, an alt tint band,
   the ⭐ signature "journey" timeline, and a small
   document-reference card. WP-friendly: every grid
   below maps to an ACF repeater.
══════════════════════════════════════════ */

/* value grid, 3-up (services list / company types / advantages) */
.values-grid--3 { grid-template-columns: repeat(3, 1fr); }
.values-grid--2 { grid-template-columns: repeat(2, 1fr); }

/* service-page FIRST image ("... top" photo, ~16:9) — keep the real ratio so
   no one gets cropped out. Only the first/hero image uses this; remaining
   images may crop as usual. See docs/service-page-photo-guide.md */
.about-img--wide { height: auto; aspect-ratio: 3 / 2; }

/* a value-card section wrapped in a rounded bronze-tint band (rhythm contrast);
   cards flip to white so they lift off the tint. margin-bottom gives the next
   section (journey band / related-services) breathing room, matching page rhythm */
.svc-band { margin: 0 20px 96px; border-radius: var(--r-lg); background: var(--tint-deep); padding: 96px 0; }
.svc-band .values-grid { margin-top: 40px; }
.svc-band .value-card { background: #fff; box-shadow: 0 8px 30px rgba(20,23,31,0.05); }
.svc-band-note { text-align: center; margin-top: 36px; font-size: 19px; color: var(--muted); }
.svc-band-note a { color: var(--bronze); font-weight: 600; text-decoration: none; }
.svc-band-note a:hover { text-decoration: underline; }

/* document reference card (Borang F) — rounded v6 */
.svc-doc { display: flex; gap: 18px; align-items: center; margin-top: 30px; max-width: 620px;
  padding: 16px 18px; border: 1px solid var(--bronze-border); border-radius: var(--r-md);
  background: var(--bronze-tint); text-decoration: none; transition: box-shadow .2s, transform .18s; }
.svc-doc:hover { box-shadow: 0 12px 30px rgba(20,23,31,0.10); transform: translateY(-2px); }
.svc-doc img { width: 88px; flex: 0 0 auto; border-radius: 10px; display: block; box-shadow: 0 3px 12px rgba(20,23,31,.15); }
.svc-doc-t { display: block; font-weight: 700; font-size: 17px; color: var(--charcoal); }
.svc-doc-s { display: block; font-size: 15px; color: var(--muted); line-height: 1.7; margin-top: 4px; }
.svc-doc-s b { color: var(--bronze); font-weight: 600; }
/* grid wrapper — lets several .svc-doc reference cards sit side by side */
.svc-doc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 30px; }
.svc-doc-grid--3 { grid-template-columns: repeat(3, 1fr); }
.svc-doc-grid .svc-doc { max-width: none; margin-top: 0; }
@media (max-width: 900px) { .svc-doc-grid, .svc-doc-grid--3 { grid-template-columns: 1fr; } }

/* 3b — factory-licence landing process (dark step cards + bronze arrows; subordinate to the CIDB signature table) */
.svc-flow { display: flex; align-items: stretch; gap: 12px; margin-top: 46px; }
.svc-flow-step { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; gap: 15px;
  background: var(--charcoal); border-radius: var(--r-md); padding: 30px 16px; }
.svc-flow-num { width: 46px; height: 46px; border-radius: 50%; background: var(--bronze); color: #fff;
  font-family: var(--serif); font-size: 20px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.svc-flow-label { font-size: 16.5px; font-weight: 600; color: #fff; line-height: 1.45; }
.svc-flow-label small { display: block; font-size: 12.5px; font-weight: 600; color: var(--bronze); letter-spacing: .6px; margin-top: 5px; }
.svc-flow-arrow { flex: 0 0 auto; align-self: center; color: var(--bronze); display: flex; }
.svc-flow-arrow svg { width: 28px; height: 28px; }
/* 3a — other-licences 2-col checklist (collapses to 1 col on mobile; overrides .about-feats flex) */
.svc-feat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 48px; max-width: 920px; margin: 46px auto 0; }
@media (max-width: 640px) { .svc-feat-grid { grid-template-columns: 1fr; gap: 16px; max-width: 440px; } }
@media (max-width: 760px) {
  .svc-flow { flex-direction: column; align-items: center; gap: 10px; margin-left: auto; margin-right: auto; }
  .svc-flow-step { width: auto; min-width: 200px; flex-direction: row; justify-content: center; gap: 14px; text-align: left; padding: 24px 26px; }
  .svc-flow-num { flex: 0 0 auto; }
  .svc-flow-label { align-self: center; }
  .svc-flow-arrow { align-self: center; transform: rotate(90deg); margin: 0; }
}

/* ⭐ SIGNATURE — 4-step registration journey (charcoal floating band, connected timeline) */
.svc-journey { background: var(--charcoal2); border-radius: var(--r-lg); margin: 0 20px 104px;
  padding: 96px var(--container-pad) 100px; position: relative; overflow: hidden; text-align: center; }
.svc-journey::before { content: ''; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(45deg, rgba(184,132,61,0.045) 0px, rgba(184,132,61,0.045) 1px, transparent 1px, transparent 64px); }
.svc-journey .inner { position: relative; z-index: 1; }
.svc-journey .eyebrow { color: var(--bronze); justify-content: center; }
.svc-journey .eyebrow::before { display: none; }
.journey-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; margin-top: 56px; position: relative; }
/* bronze connector thread behind the discs */
.journey-steps::before { content: ''; position: absolute; top: 32px; left: 12.5%; right: 12.5%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--bronze) 10%, var(--bronze) 90%, transparent); opacity: .5; }
.journey-step { position: relative; }
.journey-num { width: 64px; height: 64px; border-radius: 50%; background: var(--bronze); color: #fff;
  font-family: var(--serif); font-size: 24px; font-weight: 700; display: flex; align-items: center; justify-content: center;
  margin: 0 auto 24px; position: relative; z-index: 1; box-shadow: 0 0 0 8px var(--charcoal2); }
.journey-title { font-size: 22px; font-weight: 700; color: #fff; margin-bottom: 10px; }
.journey-body { font-size: 17px; color: rgba(255,255,255,0.6); line-height: 1.8; max-width: 260px; margin: 0 auto; }

@media (max-width: 1100px) {
  .values-grid--3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1000px) {
  .journey-steps { grid-template-columns: 1fr 1fr; gap: 44px 28px; }
  .journey-steps::before { display: none; }
}
@media (max-width: 640px) {
  .values-grid--3 { grid-template-columns: 1fr; }
  .values-grid--2 { grid-template-columns: 1fr; }
  .svc-band { padding: 64px 0; margin: 0 10px 64px; }
  .svc-journey { padding: 64px var(--container-pad) 68px; margin: 0 10px 64px; }
  .journey-steps { grid-template-columns: 1fr; gap: 14px; max-width: 420px; margin-left: auto; margin-right: auto; }
  .journey-step { display: grid; grid-template-columns: 60px 1fr; gap: 20px; align-items: start; text-align: left; padding: 12px 0; }
  .journey-num { width: 60px; height: 60px; margin: 0; box-shadow: none; }
  .journey-body { max-width: none; }
  .svc-doc { flex-direction: row; }
}

/* ══════════════════════════════════════════
   ⭐ SIGNATURE (accounting) — 每月账务循环 radial ring
   Accounting's own bespoke signature: a LIGHT bronze-tint band
   with a 5-node monthly cycle drawn around a central hub — visually
   distinct from company-secretary's charcoal LINEAR journey timeline.
   Desktop = radial pentagon; ≤880px collapses to a numbered stack.
══════════════════════════════════════════ */
.svc-cycle { background: var(--tint-deep); border-radius: var(--r-lg); margin: 0 20px 104px;
  padding: 96px var(--container-pad) 100px; text-align: center; }
.svc-cycle .eyebrow { justify-content: center; }
.svc-cycle .eyebrow::before { display: none; }
.svc-cycle-lead { max-width: 720px; margin: 18px auto 0; font-size: 19px; color: var(--muted); line-height: 1.9; }
.svc-cycle-ring { position: relative; width: 680px; max-width: 100%; aspect-ratio: 1 / 1; margin: 48px auto 8px; }
/* dashed circular thread through the node centers */
.svc-cycle-ring::before { content: ''; position: absolute; left: 50%; top: 50%; width: 70%; height: 70%;
  transform: translate(-50%,-50%); border: 2px dashed var(--bronze-border); border-radius: 50%; }
.svc-cycle-hub { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 168px; height: 168px; border-radius: 50%; background: var(--bronze); color: #fff; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  box-shadow: 0 16px 40px rgba(184,132,61,0.35); }
.svc-cycle-hub svg { width: 34px; height: 34px; margin-bottom: 8px; }
.svc-cycle-hub-t { font-family: var(--serif); font-size: 22px; font-weight: 700; }
.svc-cycle-hub-s { font-size: 14px; opacity: .82; margin-top: 2px; }
.svc-cycle-node { position: absolute; width: 220px; transform: translate(-50%,-50%);
  background: #fff; border-radius: var(--r-md); padding: 18px 16px; box-shadow: 0 12px 32px rgba(20,23,31,0.10); }
.svc-cycle-node-num { width: 34px; height: 34px; border-radius: 50%; background: var(--bronze-tint); color: var(--bronze);
  font-family: var(--serif); font-weight: 700; font-size: 17px; display: flex; align-items: center; justify-content: center; margin: 0 auto 10px; }
.svc-cycle-node-t { font-size: 18px; font-weight: 700; color: var(--charcoal); margin-bottom: 4px; }
.svc-cycle-node-s { font-size: 14px; color: var(--muted); line-height: 1.6; }
/* pentagon placement, clockwise from top (hub = 1st child, nodes = 2nd–6th) */
.svc-cycle-node:nth-child(2) { left: 50%;   top: 15%; }
.svc-cycle-node:nth-child(3) { left: 83.3%; top: 39.2%; }
.svc-cycle-node:nth-child(4) { left: 70.6%; top: 78.3%; }
.svc-cycle-node:nth-child(5) { left: 29.4%; top: 78.3%; }
.svc-cycle-node:nth-child(6) { left: 16.7%; top: 39.2%; }
.svc-cycle-note { font-size: 18px; color: var(--bronze); font-weight: 600; margin-top: 10px; }

@media (max-width: 880px) {
  .svc-cycle-ring { width: 100%; max-width: 460px; aspect-ratio: auto; margin: 40px auto 0; }
  .svc-cycle-ring::before { display: none; }
  .svc-cycle-hub { position: static; transform: none; width: 100%; height: auto; border-radius: var(--r-md);
    flex-direction: row; gap: 12px; padding: 18px 22px; margin-bottom: 18px; }
  .svc-cycle-hub svg { margin-bottom: 0; }
  .svc-cycle-node { position: static; transform: none; width: 100%; margin-bottom: 14px; }
}
@media (max-width: 640px) {
  .svc-cycle { padding: 64px var(--container-pad) 68px; margin: 0 10px 64px; }
}

/* ═══════════════════════════════════════════
   SIGNATURE — 资质牌照: CIDB G1–G7 comparison table + capacity bars
   Tint band · white table · bronze bar per grade (--fill) · G7 row highlighted.
   Desktop = 3-col grid rows; ≤760px collapses (bar drops to its own full-width line).
══════════════════════════════════════════ */
.svc-grades { background: var(--tint-deep); border-radius: var(--r-lg); margin: 0 20px 104px;
  padding: 96px var(--container-pad) 100px; }
.svc-grades-head { text-align: center; }
.svc-grades-lead { max-width: 760px; margin: 18px auto 0; font-size: 19px; color: var(--muted); line-height: 1.9; }
.svc-grades-table { max-width: 940px; margin: 48px auto 0; background: #fff; border-radius: var(--r-md);
  overflow: hidden; box-shadow: 0 18px 44px rgba(20,23,31,0.08); }
.svc-grades-row { display: grid; grid-template-columns: 120px 1.1fr 1.5fr; align-items: center;
  gap: 28px; padding: 18px 34px; border-bottom: 1px solid var(--bronze-border); }
.svc-grades-row:last-child { border-bottom: none; }
.svc-grades-row--head { background: var(--charcoal); padding-top: 16px; padding-bottom: 16px; }
.svc-grades-row--head span { font-size: 15px; font-weight: 700; letter-spacing: .04em; color: rgba(255,255,255,0.92); }
.svc-grades-row--top { background: var(--bronze-tint); }
.svc-grades-grade { font-family: var(--serif); font-size: 26px; font-weight: 700; color: var(--charcoal); }
.svc-grades-row--top .svc-grades-grade { color: var(--bronze); }
.svc-grades-cap { font-size: 18px; color: var(--muted); }
.svc-grades-cap b { color: var(--charcoal); font-weight: 700; }
.svc-grades-track { height: 12px; border-radius: 100px; background: var(--bronze-tint); overflow: hidden; }
.svc-grades-row--top .svc-grades-track { background: #fff; }
.svc-grades-fill { height: 100%; border-radius: 100px; background: var(--bronze); width: var(--fill,10%); }
/* foreign-contractor prerequisites callout */
.svc-grades-note { max-width: 940px; margin: 28px auto 0; background: var(--charcoal2);
  border-radius: var(--r-md); padding: 32px 36px; }
.svc-grades-note h4 { font-family: var(--serif); font-size: 21px; color: #fff; margin-bottom: 18px; }
.svc-grades-note ul { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 13px 36px; }
.svc-grades-note li { position: relative; padding-left: 26px; font-size: 16px; line-height: 1.7; color: rgba(255,255,255,0.62); }
.svc-grades-note li::before { content: ''; position: absolute; left: 0; top: 9px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--bronze); }
.svc-grades-note li b { color: #fff; font-weight: 600; }

@media (max-width: 760px) {
  .svc-grades { padding: 64px var(--container-pad) 68px; margin: 0 10px 64px; }
  .svc-grades-row { grid-template-columns: 64px 1fr; gap: 6px 16px; padding: 16px 20px; }
  .svc-grades-row--head { display: none; }
  .svc-grades-track-cell { grid-column: 1 / -1; margin-top: 4px; }
  .svc-grades-grade { font-size: 22px; }
  .svc-grades-cap { font-size: 16px; }
  .svc-grades-note { padding: 26px 24px; }
  .svc-grades-note ul { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════
   COMPARISON TABLE (company-secretary) — 实体类型对比
   White table (same visual family as .svc-grades-table) sitting on
   the 公司类型 tint band: charcoal header + 3 entity rows × 5 columns.
   Desktop = real 5-col grid; ≤760px each row collapses to a labelled
   stack (data-label pattern — no horizontal scroll).
══════════════════════════════════════════ */
.svc-table { max-width: 1000px; margin: 48px auto 0; background: #fff; border-radius: var(--r-md);
  overflow: hidden; box-shadow: 0 18px 44px rgba(20,23,31,0.08); }
.svc-table-row { display: grid; grid-template-columns: 1fr 1fr 1.2fr 1.2fr 0.85fr; gap: 24px;
  padding: 20px 30px; border-bottom: 1px solid var(--bronze-border); align-items: baseline; }
.svc-table-row:last-child { border-bottom: none; }
.svc-table-row--head { background: var(--charcoal); align-items: center; }
.svc-table-row--head span { font-size: 15px; font-weight: 700; letter-spacing: .04em; color: rgba(255,255,255,0.92); }
.svc-table-type { font-family: var(--serif); font-size: 19px; font-weight: 700; color: var(--charcoal); line-height: 1.35; }
.svc-table-type small { display: block; font-size: 14px; font-weight: 500; color: var(--muted2); margin-top: 3px; }
.svc-table-cell { font-size: 16px; color: var(--muted); line-height: 1.6; }
.svc-table-cell b { color: var(--charcoal); font-weight: 700; }
/* 3-column comparison variant (dimension × two documents) — used in blog articles.
   Desktop-only grid override; ≤760px falls through to the generic 1fr stack above. */
@media (min-width: 761px) {
  .svc-table--cmp .svc-table-row { grid-template-columns: 0.72fr 1.35fr 1.35fr; }
}

@media (max-width: 760px) {
  .svc-table { max-width: 460px; }
  .svc-table-row { grid-template-columns: 1fr; gap: 0; padding: 20px 22px 10px; }
  .svc-table-row--head { display: none; }
  .svc-table-type { padding-bottom: 8px; margin-bottom: 4px; border-bottom: 2px solid var(--bronze); }
  .svc-table-cell { display: flex; justify-content: space-between; gap: 18px;
    padding: 9px 0; border-top: 1px solid var(--bronze-border); }
  .svc-table-cell::before { content: attr(data-label); flex: 0 0 auto; font-size: 14px;
    font-weight: 700; color: var(--charcoal); }
}

/* ══════════════════════════════════════════
   ⭐ SIGNATURE (consulting) — 投资落地路线图 ascending roadmap
   Consulting's own bespoke signature: a CHARCOAL band with 5 stage
   cards that CLIMB left→right on rising risers to a common baseline
   — the "climb-to-landing" metaphor for cross-border investment.
   Distinct from company-secretary's FLAT linear timeline, accounting's
   radial RING, and licensing's comparison TABLE.
   Desktop = ascending staircase; ≤880px collapses to a numbered stack.
══════════════════════════════════════════ */
.svc-road { background: var(--charcoal2); border-radius: var(--r-lg); margin: 0 20px 104px;
  padding: 96px var(--container-pad) 100px; position: relative; overflow: hidden; text-align: center; }
.svc-road::before { content: ''; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(45deg, rgba(184,132,61,0.045) 0px, rgba(184,132,61,0.045) 1px, transparent 1px, transparent 64px); }
.svc-road .inner { position: relative; z-index: 1; }
.svc-road .eyebrow { color: var(--bronze); justify-content: center; }
.svc-road .eyebrow::before { display: none; }
.svc-road h2 { color: #fff; }
.svc-road-lead { max-width: 760px; margin: 18px auto 0; font-size: 19px; color: rgba(255,255,255,0.6); line-height: 1.9; }

.road-track { display: flex; align-items: flex-end; gap: 20px; margin-top: 84px; position: relative; padding-bottom: 30px; }
/* ground baseline the risers land on */
.road-track::after { content: ''; position: absolute; left: 0; right: 0; bottom: 24px; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(184,132,61,0.4) 7%, rgba(184,132,61,0.4) 93%, transparent); }

.road-step { flex: 1; position: relative; margin-bottom: var(--lift, 0);
  background: rgba(255,255,255,0.035); border: 1px solid rgba(184,132,61,0.28); border-radius: var(--r-md);
  padding: 26px 22px 28px; text-align: left; }
/* riser leg: card bottom → baseline (height tracks --lift exactly) */
.road-step::after { content: ''; position: absolute; top: 100%; left: 34px; width: 2px; height: calc(var(--lift, 0px) + 6px);
  background: linear-gradient(rgba(184,132,61,0.6), rgba(184,132,61,0.15)); }
/* dot where the riser meets the baseline */
.road-step .road-foot { position: absolute; top: 100%; left: 34px; transform: translate(-50%, -50%);
  margin-top: calc(var(--lift, 0px) + 6px); width: 11px; height: 11px; border-radius: 50%;
  background: var(--bronze); box-shadow: 0 0 0 5px var(--charcoal2); }
.road-num { width: 46px; height: 46px; border-radius: 50%; background: var(--bronze); color: #fff;
  font-family: var(--serif); font-size: 20px; font-weight: 700; display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px; }
.road-title { font-size: 22px; font-weight: 700; color: #fff; margin-bottom: 9px; }
.road-body { font-size: 17px; color: rgba(255,255,255,0.6); line-height: 1.75; }

@media (max-width: 880px) {
  .road-track { flex-direction: column; align-items: stretch; gap: 14px; margin-top: 48px; padding-bottom: 0; }
  .road-track::after { display: none; }
  .road-step { margin-bottom: 0 !important; display: grid; grid-template-columns: 46px 1fr; grid-template-rows: auto auto;
    column-gap: 18px; row-gap: 8px; align-items: start; padding: 20px 22px; }
  .road-step::after, .road-step .road-foot { display: none; }
  .road-num { margin-bottom: 0; grid-column: 1; grid-row: 1; }
  .road-title { grid-column: 2; grid-row: 1; align-self: center; margin-bottom: 0; }
  .road-body { grid-column: 2; grid-row: 2; }
}
@media (max-width: 640px) {
  .svc-road { padding: 64px var(--container-pad) 68px; margin: 0 10px 64px; }
}

/* ══════════════════════════════════════════
   PROOF BAND (consulting) — 以往绩说话 track record
   Charcoal band leading with the sourced crown-jewel numbers +
   two "全马唯一" wholly-foreign-owned licence callouts. Sells the
   consulting page on proof over adjectives.
══════════════════════════════════════════ */
.svc-proof { background: var(--charcoal2); border-radius: var(--r-lg); margin: 0 20px 104px;
  padding: 88px var(--container-pad) 92px; text-align: center; position: relative; overflow: hidden; }
.svc-proof::before { content: ''; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(45deg, rgba(184,132,61,0.045) 0px, rgba(184,132,61,0.045) 1px, transparent 1px, transparent 64px); }
.svc-proof .inner { position: relative; z-index: 1; }
.svc-proof .eyebrow { color: var(--bronze); justify-content: center; }
.svc-proof .eyebrow::before { display: none; }
.svc-proof h2 { color: #fff; }
.svc-proof-lead { max-width: 720px; margin: 16px auto 0; font-size: 19px; color: rgba(255,255,255,0.6); line-height: 1.9; }
.proof-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; margin-top: 60px; }
.proof-num { font-family: var(--serif); font-size: 54px; font-weight: 700; color: var(--bronze); line-height: 1; }
.proof-num small { font-size: 26px; font-weight: 700; }
.proof-label { margin-top: 14px; font-size: 16.5px; color: rgba(255,255,255,0.72); line-height: 1.6; }
.proof-uniques { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 52px; }
.proof-unique { display: flex; gap: 16px; align-items: center; text-align: left; padding: 22px 26px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(184,132,61,0.28); border-radius: var(--r-md); }
.proof-unique-badge { flex: 0 0 auto; font-size: 13px; font-weight: 700; letter-spacing: 0.04em; color: var(--charcoal);
  background: var(--bronze); padding: 7px 13px; border-radius: 100px; white-space: nowrap; }
.proof-unique-text { font-size: 17px; color: rgba(255,255,255,0.86); line-height: 1.7; }

@media (max-width: 880px) {
  .proof-stats { grid-template-columns: 1fr 1fr; gap: 40px 28px; }
}
@media (max-width: 640px) {
  .svc-proof { padding: 64px var(--container-pad) 68px; margin: 0 10px 64px; }
  .proof-num { font-size: 46px; }
  .proof-uniques { grid-template-columns: 1fr; }
}


/* ══════════════════════════════════════════
   BLOG (v6) — archive listing + single article
   Composes v6 tokens (soft geometry, serif
   headings, bronze accents). Archive reuses the
   homepage .blog-card-home card in a grid.
══════════════════════════════════════════ */

/* ── archive listing ── */
.blog-page { background: var(--cream); padding: 24px 0 96px; }
.blog-page .inner { max-width: 1380px; }

/* search + category filter toolbar */
.blog-toolbar { display: flex; align-items: center; justify-content: space-between;
  gap: 28px; flex-wrap: wrap; margin: 40px 0 44px; }
.blog-search { position: relative; flex: 0 0 340px; max-width: 100%; }
.blog-search input {
  width: 100%; padding: 14px 48px 14px 20px; border-radius: 100px;
  border: 1px solid var(--bronze-border); background: #fff;
  font-family: "Noto Sans SC", sans-serif; font-size: 16px; color: var(--charcoal);
  transition: border-color .2s, box-shadow .2s; }
.blog-search input:focus { outline: none; border-color: var(--bronze);
  box-shadow: 0 0 0 3px rgba(184,132,61,0.12); }
.blog-search button { position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; border-radius: 50%; border: none; background: transparent;
  color: var(--muted2); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.blog-search button:hover { color: var(--bronze); }
.blog-search svg { width: 18px; height: 18px; }

.blog-filter { display: flex; flex-wrap: wrap; gap: 10px; }
.blog-filter a {
  padding: 10px 22px; border-radius: 100px; font-size: 16px; font-weight: 600;
  letter-spacing: 0.02em; color: var(--muted2); text-decoration: none;
  border: 2px solid var(--bronze-border); background: transparent;
  transition: background .2s, color .2s, border-color .2s; }
.blog-filter a:hover { color: var(--bronze); border-color: var(--bronze); }
.blog-filter a.active { background: var(--bronze); color: #fff; border-color: var(--bronze); }

/* card grid — reuses .blog-card-home tile in a 3-col grid */
.blog-grid-v6 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px 28px; }
.blog-grid-v6 .blog-card-home { min-width: 0; }
.blog-card-home .blog-excerpt { font-size: 16px; color: var(--muted); line-height: 1.75;
  margin: 0 0 16px; }

/* pagination */
.pagination { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 64px; }
.page-btn {
  display: inline-flex; align-items: center; gap: 8px; min-width: 44px; height: 44px;
  padding: 0 16px; border-radius: 100px; border: 1px solid var(--bronze-border);
  background: #fff; color: var(--muted); font-size: 16px; font-weight: 600;
  text-decoration: none; justify-content: center;
  transition: background .2s, color .2s, border-color .2s; }
.page-btn svg { width: 14px; height: 14px; }
.page-btn:hover { color: var(--bronze); border-color: var(--bronze); }
.page-btn.active { background: var(--charcoal); color: #fff; border-color: var(--charcoal); }
.page-btn { cursor: pointer; font-family: inherit; }
.page-btn:disabled { opacity: .4; cursor: not-allowed; }
.page-btn:disabled:hover { color: var(--muted); border-color: var(--bronze-border); }
.blog-filter a { cursor: pointer; }
.blog-empty { text-align: center; color: var(--muted); font-size: 17px; padding: 56px 0 8px; margin: 0; }

/* ── single article ── */
/* cover sits at the archive content width (.inner) with a fixed 3:2 width:height ratio */
.article-featured-v6 { margin: 28px 0 0; aspect-ratio: 3 / 2; border-radius: var(--r-lg); overflow: hidden; }
.article-featured-v6 img { width: 100%; height: 100%; object-fit: cover; display: block; }

.article-body-v6 { max-width: 950px; margin: 0 auto; padding: 56px 0 72px; }
.article-lead { font-family: var(--serif); font-size: 24px; line-height: 1.7;
  color: var(--charcoal); font-weight: 700; margin: 0 0 32px; }
.article-p { font-size: 19px; line-height: 1.9; color: var(--muted); margin: 0 0 26px; }
.article-h2 { font-family: var(--serif); font-size: 30px; font-weight: 700;
  color: var(--charcoal); line-height: 1.35; margin: 44px 0 20px; }
.article-list { list-style: none; margin: 0 0 26px; padding: 0; }
.article-list li { position: relative; padding-left: 30px; margin-bottom: 16px;
  font-size: 19px; line-height: 1.85; color: var(--muted); }
.article-list li::before { content: ''; position: absolute; left: 4px; top: 13px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--bronze); }
.article-list li strong { color: var(--charcoal); font-weight: 700; }
.article-quote { border-left: 3px solid var(--bronze); background: var(--bronze-tint);
  border-radius: 0 var(--r-md) var(--r-md) 0; padding: 26px 32px; margin: 0 0 32px;
  font-size: 19px; line-height: 1.8; color: var(--charcoal); font-weight: 500; }
.article-links { display: flex; flex-wrap: wrap; gap: 14px 28px; margin: 8px 0 36px; }
.article-links a { font-size: 18px; font-weight: 600; color: var(--bronze); text-decoration: none; }
.article-links a:hover { text-decoration: underline; }
.article-disclaimer { font-size: 15.5px; line-height: 1.8; color: var(--muted2);
  border-top: 1px solid var(--bronze-border); padding-top: 26px; margin: 8px 0 0; }
.article-disclaimer a { color: var(--bronze); font-weight: 600; }

/* ═══ LEGAL PAGES (privacy policy / terms of use) — v6 ═══ */
.article-h3 { font-family: var(--serif); font-size: 21px; font-weight: 700;
  color: var(--charcoal); margin: 32px 0 12px; }
.lang-switch { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.lang-switch a, .lang-switch span { font-size: 14px; letter-spacing: .04em;
  padding: 6px 15px; border-radius: 999px; text-decoration: none;
  border: 1px solid var(--bronze-border); transition: color .15s, background .15s; }
.lang-switch a.is-active { background: var(--charcoal); color: #fff; border-color: var(--charcoal); }
.lang-switch a:not(.is-active) { color: var(--charcoal); }
.lang-switch a:not(.is-active):hover { color: var(--bronze); }
.lang-switch span.is-soon { color: var(--muted2); opacity: .65; }
.legal-contact { background: var(--bronze-tint); border-radius: 18px;
  padding: 26px 32px; margin: 4px 0 8px; }
.legal-contact p { font-size: 17px; line-height: 1.9; color: var(--muted); margin: 0; }
.legal-contact strong { color: var(--charcoal); }

/* article meta row in the page-hero */
.article-meta-v6 { display: flex; align-items: center; gap: 14px; margin-top: 22px;
  font-size: 16px; color: var(--muted2); }
.article-meta-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--bronze); }

/* related articles */
.related-v6 { background: var(--cream); padding: 8px 0 96px; }
.related-v6 .related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px 28px; margin-top: 36px; }

@media (max-width: 1000px) {
  .blog-grid-v6, .related-v6 .related-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .blog-toolbar { flex-direction: column; align-items: stretch; }
  .blog-search { flex-basis: auto; }
}
@media (max-width: 640px) {
  .blog-grid-v6, .related-v6 .related-grid { grid-template-columns: 1fr; }
  .article-lead { font-size: 21px; }
  .article-h2 { font-size: 26px; }
  .article-featured-v6 { margin: 24px 0 0; }
}

/* ═══════════════════════════════════════════════════════════════════
   KEYWORD PAGE — related terms + cornerstone service card (v6)
   Below the centered .article-body-v6 reading column. Bronze-tint band,
   rounded chips (clickable → sibling keyword page, static if unpublished),
   cornerstone card links UP to the parent service page.
   ═══════════════════════════════════════════════════════════════════ */
.kw-related-v6 { background: var(--bronze-tint); padding: 64px 0 72px; }
.kw-related-v6 .inner { max-width: 950px; }
.kw-related-v6 .eyebrow { margin-bottom: 22px; }
.kw-chip-row { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 40px; }
.kw-chip { display: inline-block; padding: 9px 18px; font-size: 16px; font-weight: 500;
  background: var(--cream); color: var(--charcoal); border: 1px solid var(--bronze-border);
  border-radius: 999px; text-decoration: none; transition: border-color .15s, color .15s, transform .15s; }
a.kw-chip:hover { border-color: var(--bronze); color: var(--bronze); transform: translateY(-1px); }
.kw-chip--static { color: var(--muted2); background: transparent; cursor: default; }
.kw-service-card { display: flex; align-items: center; justify-content: space-between; gap: 24px;
  background: var(--cream); border: 1px solid var(--bronze-border); border-radius: var(--r-md);
  padding: 28px 32px; text-decoration: none;
  transition: border-color .15s, transform .15s, box-shadow .15s; }
.kw-service-card:hover { border-color: var(--bronze); transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(20,23,31,0.08); }
.kw-service-card-t { font-size: 22px; font-weight: 700; color: var(--charcoal); margin-bottom: 6px; }
.kw-service-card-d { font-size: 16px; line-height: 1.7; color: var(--muted); max-width: 560px; }
.kw-service-card-arr { display: inline-flex; align-items: center; gap: 7px; font-size: 17px;
  font-weight: 600; color: var(--bronze); white-space: nowrap; }
@media (max-width: 760px) {
  .kw-related-v6 { padding: 48px 0 56px; }
  .kw-service-card { flex-direction: column; align-items: flex-start; gap: 16px; padding: 24px; }
}

/* ═══════════════════════════════════════════════════════════
   CINEMATIC HERO (v6 test — KL skyline full-bleed)
   Additive: sits ABOVE the existing .hero-v6 on the homepage.
   ═══════════════════════════════════════════════════════════ */
.hero-cine { position: relative; margin: 112px 20px 24px;
  min-height: calc(100vh - 136px); min-height: calc(100svh - 136px);
  display: flex; align-items: center; overflow: hidden;
  border-radius: var(--r-lg); background: var(--charcoal); }
.hero-cine-bg { position: absolute; inset: 0; z-index: 0; }
.hero-cine-bg picture { display: block; width: 100%; height: 100%; }
.hero-cine-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center center; }
.hero-cine-overlay { position: absolute; inset: 0; z-index: 1; background:
  linear-gradient(90deg, rgba(15,17,23,.90) 0%, rgba(15,17,23,.78) 34%, rgba(15,17,23,.42) 66%, rgba(15,17,23,.12) 100%),
  linear-gradient(0deg, rgba(15,17,23,.55) 0%, rgba(15,17,23,0) 42%); }
.hero-cine .wrap { position: relative; z-index: 2; width: 100%; }
.hero-cine-inner { max-width: 780px; padding: 72px 0; }
.hero-cine-eyebrow { display: inline-flex; align-items: center; gap: 12px;
  font-size: 15px; font-weight: 600; letter-spacing: 0.18em; color: var(--bronze);
  text-transform: uppercase; margin-bottom: 26px; }
.hero-cine-eyebrow::before { content: ""; width: 40px; height: 2px; background: var(--bronze); display: inline-block; }
.hero-cine-h1 { font-family: "Domine", Georgia, serif; color: #fff; font-weight: 600;
  font-size: clamp(42px, 5.6vw, 86px); line-height: 1.08; letter-spacing: 0.005em; margin-bottom: 28px; }
.hero-cine-h1 .hl { color: var(--bronze); }
.hero-cine-sub { color: rgba(255,255,255,.84); font-size: clamp(17px, 1.45vw, 21px);
  line-height: 1.8; max-width: 600px; margin-bottom: 40px; }
.hero-cine-btns { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.hero-cine-btns .btn-pill { margin-top: 0; padding: 15px 36px; font-size: 18px; }
/* pill colour variants (reusable) */
.btn-pill--solid { background: var(--bronze); color: #fff; border-color: var(--bronze); }
.btn-pill--solid:hover { background: var(--bronze2); border-color: var(--bronze2); color: #fff; box-shadow: 0 12px 30px rgba(184,132,61,0.36); }
.btn-pill--light { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.btn-pill--light:hover { background: #fff; color: var(--charcoal); border-color: #fff; box-shadow: 0 12px 30px rgba(0,0,0,0.28); }
/* scroll cue */
.hero-cine-cue { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  color: rgba(255,255,255,.6); font-size: 13px; letter-spacing: 0.12em; }
.hero-cine-cue svg { width: 20px; height: 20px; animation: cueBob 1.8s ease-in-out infinite; }
@keyframes cueBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
@media (max-width: 760px) {
  .hero-cine { margin: 78px 12px 16px; min-height: calc(100svh - 94px); }
  .hero-cine-inner { padding: 56px 0; }
  .hero-cine-overlay { background:
    linear-gradient(90deg, rgba(15,17,23,.88) 0%, rgba(15,17,23,.7) 60%, rgba(15,17,23,.5) 100%),
    linear-gradient(0deg, rgba(15,17,23,.6) 0%, rgba(15,17,23,0) 45%); }
  .hero-cine-btns .btn-pill { padding: 11px 24px; font-size: 15px; }
  .hero-cine-cue { display: none; }
}

/* ═══ 免费咨询 modal — final-step contact form + success instant-contact ═══ */
.modal-form { margin-bottom: 28px; }
.modal-req { color: var(--bronze); }
.modal-consent { display: flex; align-items: flex-start; gap: 10px; margin: 2px 2px 0;
  font-size: 14.5px; line-height: 1.6; color: var(--muted); cursor: pointer; }
.modal-consent input { margin-top: 3px; width: 17px; height: 17px; flex-shrink: 0;
  accent-color: var(--bronze); cursor: pointer; }
.modal-consent a { color: var(--bronze); font-weight: 600; text-decoration: none; }
.modal-consent a:hover { text-decoration: underline; }
.modal-form-err { min-height: 20px; margin: 4px 2px 0; color: #c0392b; font-size: 15px; font-weight: 600; }
.modal-instant { margin-top: 28px; padding-top: 26px; border-top: 1px solid var(--bronze-border); }
.modal-instant-label { font-size: 16px; color: var(--muted2); margin-bottom: 16px; }
.modal-instant-btns { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }
.modal-instant-btns .btn-pill { margin-top: 0; }
.modal-instant-btns .btn-pill svg { width: 18px; height: 18px; }
.modal-qr-panel { margin-top: 24px; padding: 22px; background: var(--bronze-tint); border-radius: var(--r-md); }
.modal-qr-panel[hidden] { display: none; }
.modal-qr-hint { font-size: 15px; color: var(--muted2); margin-bottom: 16px; }
.modal-qr-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.modal-qr-item { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.modal-qr-item img { width: 100%; aspect-ratio: 1; border-radius: 12px; border: 1px solid var(--bronze-border); background: #fff; object-fit: cover; }
.modal-qr-item span { font-size: 15px; font-weight: 600; color: var(--charcoal); }
.modal-textbtn { margin-top: 30px; background: none; border: none; cursor: pointer; font-family: "Noto Sans SC", sans-serif; font-size: 16px; font-weight: 600; color: var(--muted2); letter-spacing: 0.04em; transition: color .15s; }
.modal-textbtn:hover { color: var(--bronze); }
@media (max-width: 560px) {
  .modal-instant-btns { flex-direction: column; }
  .modal-instant-btns .btn-pill { justify-content: center; width: 100%; }
  .modal-qr-grid { gap: 10px; }
}

/* ══════════════════════════════════════════
   MOBILE TYPOGRAPHY SCALE — COMPLETE  (2026-08-15, apple.com.cn reference)
   THE ONE source of truth for phone type. Desktop base sizes above are
   deliberately large (v5 heritage, client-approved) — this block re-maps
   EVERY text class to an Apple-calibrated tier at ≤640px. If a new text
   class is added anywhere above, it MUST also be added to a tier here.
   Tiers @390px: display 30–34 · section H2 26–27 · card title 19–22 ·
   reading body 17 · card/secondary body 15.5–16 · buttons 15–17 ·
   meta/labels 13–14. CJK: letter-spacing ≥ 0, body leading 1.7–1.8.
   Revert = delete this block.
══════════════════════════════════════════ */
@media (max-width: 640px) {
  /* ── T1 display / page titles ── */
  .hero-cine-h1  { font-size: 33px; line-height: 1.16; letter-spacing: 0; margin-bottom: 20px; }
  .hero-cine-sub { font-size: 17px; line-height: 1.7; margin-bottom: 32px; }
  .hero-h1       { font-size: 34px; line-height: 1.15; }
  .hero-sub      { font-size: 17px; line-height: 1.7; }
  .page-hero-v6 h1 { font-size: 30px; line-height: 1.18; }

  /* ── T2 section headings ── */
  .sec-h         { font-size: 27px; line-height: 1.22; }
  .why-band-h    { font-size: 26px; line-height: 1.28; }
  .cta-heading   { font-size: 27px; line-height: 1.25; }
  .contact-cta-card h2 { font-size: 24px; line-height: 1.3; }

  /* ── T3 card / sub-section titles ── */
  .svc-title { font-size: 22px; }
  .why-title, .value-title, .journey-title, .road-title, .kw-service-card-t { font-size: 20px; }
  .blog-card-h { font-size: 19px; line-height: 1.45; }
  .team-card-v6 .team-name { font-size: 21px; }
  .faq-contact-title { font-size: 22px; }
  .faq-cat-head { font-size: 21px; }
  .svc-grades-note h4 { font-size: 19px; }
  .svc-cycle-hub-t { font-size: 20px; }
  .wechat-qr-title { font-size: 21px; }
  .modal-success h3 { font-size: 22px; }

  /* ── T4 primary reading body → 17px ── */
  .about-body { font-size: 17px; line-height: 1.75; margin-bottom: 24px; }
  .article-p, .article-list li, .article-quote { font-size: 17px; line-height: 1.8; }
  .faq-intro { font-size: 17px; line-height: 1.75; }
  .svc-cycle-lead, .svc-grades-lead, .svc-road-lead, .svc-proof-lead { font-size: 17px; line-height: 1.75; }
  .faq-q, .faq-page .faq-q { font-size: 17px; }
  .office-info-value { font-size: 17px; }
  .page-hero-v6 .page-hero-sub, .page-hero-sub { font-size: 16px; line-height: 1.75; }
  .cta-sub { font-size: 16px; line-height: 1.7; }

  /* ── T5 card / secondary body → 15.5–16px ── */
  .svc-body { font-size: 16px; line-height: 1.75; }
  .faq-a, .faq-page .faq-a { font-size: 16px; line-height: 1.75; }
  .why-body, .value-body, .journey-body, .road-body { font-size: 16px; line-height: 1.7; }
  .about-feat-text { font-size: 16px; line-height: 1.65; }
  .faq-contact-body, .faq-prep-sub, .svc-band-note { font-size: 16px; line-height: 1.7; }
  .contact-cta-card p { font-size: 16px; line-height: 1.75; }
  .keyword-network-sub { font-size: 16px; line-height: 1.7; }
  .proof-unique-text { font-size: 16px; }
  .svc-cycle-note { font-size: 16px; }
  .faq-check li { font-size: 15.5px; }
  .proof-label { font-size: 15px; }
  .svc-flow-label { font-size: 15.5px; }
  .industries-grid-mobile .orbit-card-label { font-size: 15.5px; }
  .article-links a { font-size: 17px; }
  .article-disclaimer { font-size: 14px; }
  .office-info-value--note { font-size: 15px; }

  /* ── T6 buttons & pills — trimmed padding + size on phones (2026-08-20) ── */
  .btn-primary, .btn-ghost { font-size: 15px; padding: 11px 24px; }
  .cta-btns .btn-primary, .cta-btns .btn-ghost { font-size: 15px; padding: 12px 26px; }
  .contact-cta-card .btn-primary { font-size: 15px; padding: 13px 22px; }
  .sec-lead { font-size: 17px; line-height: 1.75; }
  .btn-pill { font-size: 15px; padding: 10px 22px; }
  .link-arr { font-size: 16px; }
  .office-tab, .blog-filter a, .page-btn, .kw-chip { font-size: 15px; }
  .office-quick-actions .btn-ghost { font-size: 15px; }

  /* ── T7 meta / labels / captions → 13–14px ── */
  .eyebrow, .hero-eyebrow, .hero-cine-eyebrow { font-size: 13px; }
  .page-hero-v6 .breadcrumb { font-size: 13px; }
  .blog-cat { font-size: 13px; }
  .blog-date { font-size: 13.5px; }
  .article-meta-v6 { font-size: 14px; }
  .office-info-label { font-size: 13.5px; }
  .contact-cta-note { font-size: 13.5px; }

  /* ── footer ── */
  .footer-col h4 { font-size: 13px; }
  .footer-col ul li a { font-size: 16px; }
  .footer-tagline { font-size: 15.5px; line-height: 1.7; }
  .footer-contact-text { font-size: 16px; }
  .footer-copy, .footer-bottom-links a { font-size: 13.5px; }

  /* ── modal & popups (inputs stay ≥16px so iOS Safari doesn't auto-zoom) ── */
  .modal-step-title { font-size: 24px; }
  .modal-step-label { font-size: 13px; }
  .modal-step-sub { font-size: 16px; }
  .modal-card-label { font-size: 16px; }
  .modal-card-sub { font-size: 14px; }
  .modal-method-name { font-size: 16px; }
  .modal-field label { font-size: 13px; }
  .modal-field input { font-size: 16px; }
  .modal-back { font-size: 15px; }
  .modal-success p { font-size: 16px; }
  .modal-instant-label { font-size: 15px; }
  .modal-form-err { font-size: 14px; }
  .modal-qr-hint { font-size: 14px; }
  .modal-qr-item span { font-size: 14px; }
  .modal-textbtn { font-size: 15px; }
  .wechat-id { font-size: 17px; }
  .wechat-note { font-size: 15px; }
  .wechat-mobile-btn { font-size: 17px; }
  .wechat-qr-sub { font-size: 14.5px; }
  .wechat-qr-name { font-size: 15px; }
}