:root{
  /* =====================================================================
     DESIGN TOKENS — 金爷汇 GOLDENPAPAS design system
     Colors keep their EXISTING values (per project decision) but are now
     named as semantic brand tokens. Spacing / radius / breakpoints are new.
     ===================================================================== */

  /* ---- Brand color roles ---- */
  --color-navy:#0B1F33;         /* Deep Navy   — hero, nav, footer, dark bands */
  --color-navy-2:#122A42;       /* raised navy surface (cards on dark) */
  --color-navy-deep:#081726;    /* deepest navy — footer legal bar */
  --color-gold:#B89452;         /* Old Gold    — accents, CTAs, numerals */
  --color-gold-hi:#D2B27B;      /* gold hover */
  --color-cream:#F5F0E8;        /* Warm Cream  — alternating section ground */
  --color-cream-2:#EDE6D9;      /* deeper cream */
  --color-charcoal:#20252B;     /* Charcoal    — headings & strong body text */
  --color-white:#FFFFFF;
  --color-rust:#A6552F;         /* secondary accent (badges, alerts) */

  /* ---- Legacy variable names kept so every existing page keeps working ---- */
  --ink:var(--color-charcoal);
  --ivory:var(--color-charcoal);
  --gold:var(--color-gold);
  --gold-soft:rgba(184,148,82,0.12);
  --gold-line:rgba(184,148,82,0.42);
  --rust:var(--color-rust);
  --rust-soft:rgba(166,85,47,0.10);
  --panel:var(--color-cream);
  --panel-2:var(--color-cream-2);
  --card:var(--color-white);
  --card-hi:#FBF7F1;
  --mist:#5F6771;
  --mist-dim:#8B929B;
  --line:#E4DDD1;
  --line-strong:#D2C8B7;
  --bg:var(--color-white);
  --bg-soft:var(--color-cream);

  /* ---- Text/lines on dark navy surfaces ---- */
  --on-dark:var(--color-white);
  --on-dark-soft:#C3CEDA;
  --on-dark-dim:#8E9CAC;
  --line-dark:rgba(255,255,255,0.14);
  --line-dark-strong:rgba(255,255,255,0.26);

  /* ---- Layout ---- */
  --maxw:1280px;                 /* unified content max-width */
  --edge:32px;                   /* default side gutter, shrinks at small widths */

  /* ---- Spacing scale (8px base grid) — use for layout rhythm ---- */
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:24px;
  --space-6:32px;
  --space-7:48px;
  --space-8:64px;
  --space-9:96px;
  --space-10:128px;

  /* ---- Radius ---- */
  --radius-sm:2px;
  --radius-md:4px;
  --radius-lg:8px;
  --radius-full:50%;

  /* ---- Font stacks (per-language; see html[lang] rules below) ---- */
  --font-sc:'Noto Sans SC','PingFang SC','Microsoft YaHei',-apple-system,BlinkMacSystemFont,sans-serif;
  --font-tc:'Noto Sans TC','PingFang TC','Microsoft JhengHei',-apple-system,BlinkMacSystemFont,sans-serif;
  --font-en:'Helvetica Neue','Inter',Arial,-apple-system,BlinkMacSystemFont,sans-serif;
  --font-mono:'Space Mono',monospace;
  --font-body:var(--font-sc);     /* default; overridden per html[lang] below */
  --font-heading:var(--font-body); /* headings now share the body sans stack (no more serif) */
}

/* Reference breakpoints used consistently across this stylesheet:
   Desktop 1440px · Laptop 1200px · Tablet 768px · Mobile 390px
   (CSS custom properties cannot be read inside @media, so the raw
   px values are repeated at each query — kept in sync with this comment). */

html[lang="zh-HK"]{ --font-body:var(--font-tc); }
html[lang="en"]{ --font-body:var(--font-en); }

*{margin:0;padding:0;box-sizing:border-box;}
[hidden]{display:none !important;}
html{scroll-behavior:smooth;font-size:17.9px;}
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--ivory);
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* height:auto 是给 HTML 上的 width/height 属性兜底的。
   每个 <img> 现在都带真实宽高属性（浏览器靠它在图片下载完成前就预留好位置，
   避免正文被顶下去，也就是 CLS）。但 height 属性同时也是一个「表现层提示」：
   若某张图的 CSS 只写了 width 没写 height，那个像素高度就会生效，把图压变形。
   这一行用一条真正的 CSS 规则把它压掉；下面所有 .xxx img 的规则选择器更具体，
   仍然照常生效。 */
img{display:block;max-width:100%;height:auto;}
a{color:inherit;text-decoration:none;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--edge);}
.eyebrow{
  font-family:var(--font-mono);
  font-size:13.4px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--gold);
  display:flex;align-items:center;gap:10px;
  margin-bottom:var(--space-4);
}
.eyebrow::before{content:'';width:22px;height:1px;background:var(--gold);display:inline-block;}
.eyebrow--mt{margin-top:var(--space-6);}
h1,h2,h3{font-family:var(--font-heading);color:var(--ivory);font-weight:700;}
.placeholder-tag{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:12.3px;
  color:var(--rust);
  background:var(--rust-soft);
  border:1px solid rgba(176,96,58,0.35);
  padding:2px 8px;
  border-radius:var(--radius-sm);
  letter-spacing:0.02em;
  white-space:nowrap;
}

/* ===== brand line (tagline) ===== */
.brand-line{
  display:flex;flex-direction:column;gap:2px;
  font-family:var(--font-mono);
  color:var(--mist-dim);
}
.brand-line .bl-name{font-size:12.3px;letter-spacing:0.08em;color:var(--mist);}
.brand-line .bl-tag{font-size:11.2px;letter-spacing:0.1em;text-transform:uppercase;color:var(--gold);}
.brand-line .bl-slogan{font-size:11.2px;letter-spacing:0.08em;text-transform:uppercase;color:var(--gold);font-weight:600;}

/* ===== reveal on scroll ===== */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease, transform .7s ease;}
.reveal.in-view{opacity:1;transform:translateY(0);}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none;}}

/* ===== NAV (dark navy bar, bilingual labels) ===== */
nav{
  position:fixed;top:0;left:0;width:100%;
  z-index:1000;
  background:rgba(11,31,51,0.94);
  backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line-dark);
}
.nav-inner{
  max-width:var(--maxw);margin:0 auto;padding:0 var(--edge);
  min-height:76px;display:flex;align-items:center;justify-content:space-between;
  gap:var(--space-5);
}
/* Brand lockup: gold GP mark + white 金爷汇 / GOLDENPAPAS wordmark */
.nav-brand{display:flex;align-items:center;gap:14px;flex-shrink:0;}
.nav-mark{height:44px;width:auto;display:block;color:var(--gold);flex-shrink:0;}
/* 中英两个字标并排，中间一道细分隔线，读起来是两个独立的标志而不是一个上下
   叠起来的组合。align-items:center 让两者视觉居中对齐；两个 img 都
   flex-shrink:0，任何宽度下都不会被 flex 压扁变形。
   尺寸：金爷汇 26→40px，GOLDENPAPAS 11→24px，都比原来显著大一圈。 */
.nav-wordmark{display:flex;flex-direction:row;align-items:center;gap:var(--space-4);}
.nav-wordmark .nw-cn{height:40px;width:auto;display:block;color:var(--on-dark);flex-shrink:0;}
.nav-wordmark .nw-en{height:24px;width:auto;display:block;color:var(--on-dark-soft);flex-shrink:0;}
/* 两个字标之间只用间距分开，不画分隔线。
   分隔线得靠 img 的 border+padding 来实现，而 padding 会把图片的外框撑宽，
   浏览器算出来的宽高比就跟图片本身对不上了——变形检测会当成真的压扁来报，
   视觉上也确实多出一截空白。间距足够说明「这是两个标志」。 */
.nav-wordmark{column-gap:var(--space-5);}
/* English pages carry the GOLDENPAPAS wordmark on its own, so it sits larger.
   34px（原 17px 的两倍）：字标本身是 841.89 × 118.64 的长条，高度翻倍宽度也翻倍，
   从 121px 涨到 242px。1024px 以下导航已经收成汉堡菜单，不受影响；1024～1200px
   这一段最挤，下面有专门的收窄规则。 */
.nav-wordmark .nw-solo{height:34px;width:auto;display:block;color:var(--on-dark);}
.nav-logo{height:46px;width:auto;display:block;}
.nav-logo-en{display:none;}
/* nowrap：导航是一条横排，宁可挤也不能掉到第二行——掉行会把导航栏撑高，
   下面所有为固定导航预留高度的页面都要跟着错位。 */
.nav-links{display:flex;flex-wrap:nowrap;gap:var(--space-6);list-style:none;}
/* 英文页把 GOLDENPAPAS 字标放大到两倍后，品牌区宽了 121px；导航内容区是固定的
   1216px（1280 减两侧 32px 留白），不会因为屏幕更宽而变宽，所以 7 个菜单项在任何
   桌面宽度下都会被挤掉一行。把英文页的菜单间距从 32px 收到 22px 正好补回来。
   简体和繁体的字标没变，间距也就不动。 */
html[lang="en"] .nav-links{gap:22px;}
.nav-links a{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  color:var(--on-dark);transition:color .2s;position:relative;padding-bottom:4px;
}
.nav-links .nl-cn{font-size:14.6px;line-height:1.3;}
.nav-links .nl-en{
  font-family:var(--font-mono);font-size:9.6px;letter-spacing:0.1em;
  text-transform:uppercase;color:var(--on-dark-dim);transition:color .2s;line-height:1.2;
}
.nav-links a:hover,.nav-links a.is-active{color:var(--gold);}
.nav-links a:hover .nl-en,.nav-links a.is-active .nl-en{color:var(--gold);}
.nav-links a.is-active::after{
  content:'';position:absolute;left:50%;transform:translateX(-50%);bottom:-2px;
  width:22px;height:2px;background:var(--gold);
}
.nav-cta{
  font-family:var(--font-body);
  font-size:14.6px;font-weight:600;
  background:var(--gold);color:var(--color-navy);
  padding:11px 22px;border-radius:var(--radius-sm);
  letter-spacing:0.02em;
  display:inline-flex;align-items:center;gap:8px;
  transition:background .2s, transform .2s;
  flex-shrink:0;
}
.nav-cta:hover{background:var(--color-gold-hi);transform:translateY(-1px);}
.nav-toggle{display:none;background:none;border:none;color:var(--on-dark);font-size:29.1px;cursor:pointer;line-height:1;}

@media (max-width:1200px){
  .nav-links{
    position:fixed;top:76px;left:0;width:100%;
    background:var(--color-navy);
    flex-direction:column;gap:0;
    max-height:0;overflow:hidden;
    transition:max-height .35s ease;
    border-bottom:1px solid var(--line-dark);
  }
  .nav-links.open{max-height:640px;overflow-y:auto;}
  .nav-links a{
    flex-direction:row;align-items:baseline;gap:10px;
    padding:var(--space-4) var(--edge);border-bottom:1px solid var(--line-dark);
    width:100%;
  }
  .nav-links a.is-active::after{display:none;}
  .nav-toggle{display:block;}
  .nav-cta{display:none;}
}

/* ===== HERO (full-bleed split) ===== */
.hero-split{
  display:grid;grid-template-columns:1fr 1fr;
  min-height:88vh;
  background:var(--bg-soft);
}
.hero-copy-col{
  display:flex;align-items:center;
  padding:150px var(--space-8) var(--space-8) clamp(var(--edge), calc((100vw - 1280px)/2 + var(--edge)), 120px);
  background:
    radial-gradient(ellipse 700px 500px at -10% 90%, rgba(198,160,85,0.08), transparent 60%),
    var(--bg-soft);
}
.hero-copy{max-width:560px;width:100%;}
.hero-copy h1{font-size:clamp(26px, 3.2vw + 10px, 44px);line-height:1.32;margin-bottom:var(--space-5);letter-spacing:0.5px;}
.hero-copy h1 em{font-style:normal;color:var(--gold);}
.hero-sub{font-size:18.5px;color:var(--mist);max-width:520px;margin-bottom:var(--space-8);}
.hero-ctas{display:flex;gap:var(--space-4);flex-wrap:wrap;margin-bottom:var(--space-9);}
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:15px 28px;border-radius:var(--radius-sm);
  font-size:16.2px;font-weight:600;letter-spacing:0.02em;
  transition:transform .2s, background .2s, border-color .2s;
  cursor:pointer;border:1px solid transparent;
}
.btn-gold{background:var(--gold);color:var(--ink);}
.btn-gold:hover{transform:translateY(-2px);background:#DDBF8C;}
.btn-ghost{border-color:var(--line-strong);color:var(--ivory);}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-2px);}

.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line);padding-top:var(--space-5);}
.stat-row .stat{padding:0 var(--space-4);text-align:center;border-right:1px solid var(--line);min-width:0;}
.stat-row .stat:last-child{border-right:none;}
.stat-num{font-family:var(--font-mono);font-size:clamp(26px, 3.6vw, 66px);font-weight:700;color:var(--gold);line-height:1.05;letter-spacing:-0.01em;}
.stat-label{font-size:14px;color:var(--mist-dim);margin-top:var(--space-1);}

/* Hero photo: Grid-based stacking (image + badge share one grid cell) —
   replaces the previous position:absolute image/overlay technique. */
.hero-photo-col{display:grid;overflow:hidden;}
.hero-photo-col img{
  grid-area:1/1;
  width:100%;height:100%;object-fit:cover;object-position:top center;
  filter:saturate(0.95) contrast(1.03);
}
.hero-photo-col .photo-tag{
  grid-area:1/1;
  align-self:end;justify-self:end;
  z-index:2;
  margin:0 var(--space-6) var(--space-6) 0;
  background:var(--gold);color:var(--ink);
  font-family:var(--font-mono);
  font-size:13.4px;letter-spacing:0.06em;
  padding:9px 18px;
}
/* Homepage-only positioning statement, shown over the hero photo (per
   project decision: this tagline appears in no other location). */
.hero-photo-col .brand-line{
  grid-area:1/1;
  align-self:start;justify-self:start;
  z-index:2;
  margin:var(--space-6) 0 0 var(--space-6);
  background:var(--bg);
  padding:12px 18px;
  gap:4px;
}
.hero-photo-col .brand-line .bl-name{color:var(--ink);font-weight:700;font-size:13px;}

/* ===== SECTION shared ===== */
section{padding:var(--space-10) 0;}
.section-head{margin-bottom:var(--space-8);}
.section-head h2{font-size:clamp(24px, 1.6vw + 18px, 35.8px);line-height:1.4;}
.section-head p{color:var(--mist);font-size:17.4px;margin-top:var(--space-3);}
.section-head--flush{margin-bottom:0;}
.panel{background:var(--panel);}
.panel-2{background:var(--panel-2);}

/* ===== shared content-column utilities (homepage + other core pages) ===== */
.wrap-narrow{max-width:880px;}
.wrap-tight{max-width:720px;}
.proof-text h2{font-size:clamp(22px, 1.4vw + 16px, 30px);margin-bottom:20px;}
.section-cta{text-align:center;margin-top:var(--space-6);}
.ci-label--gap{margin-bottom:var(--space-4);}
.event-cta{margin-top:var(--space-6);}
.btn-block{justify-content:center;width:100%;border:none;font-family:inherit;}
.contact-section{background:var(--bg);border-top:1px solid var(--line);}
.contact-layout h2{font-size:clamp(22px, 1.2vw + 16px, 28px);margin-bottom:var(--space-4);}
.contact-lead{color:var(--mist);font-size:15px;margin-bottom:var(--space-5);}
.case-box--flush-top{margin-top:0;margin-bottom:var(--space-6);}
.lead-text{color:var(--mist);font-size:16px;line-height:1.8;}
.lead-text strong{color:var(--ink);}
.section-head p strong{color:var(--ink);}
.form-note{color:var(--mist-dim);font-size:11.5px;}
.btn--form{justify-content:center;margin-top:var(--space-2);}
.btn--form-tight{justify-content:center;margin-top:var(--space-1);}
.text-sm{font-size:14px;}
.gallery-grid--flush{margin-top:0;}
.event-box--mt{margin-top:var(--space-5);}
.m-val-note{font-size:12px;font-weight:400;color:var(--mist-dim);}
.discount-note{font-size:13.5px;color:var(--mist);margin-top:-6px;margin-bottom:18px;}
.case-box--tight{margin-top:20px;}
.event-cap strong{color:var(--ink);}
.form-note--tight{color:var(--mist-dim);font-size:11.5px;margin-bottom:-4px;}
.label-spaced{margin-top:var(--space-1);}
.form-hint-gold{color:var(--gold);font-size:12px;margin-top:var(--space-1);}
.event-confirm strong{color:var(--ink);}

/* ===== PAIN POINTS (compact card grid) ===== */
.pain-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6);}
.pain-card{
  background:var(--card);border:1px solid var(--line);display:flex;flex-direction:column;
  text-decoration:none;color:inherit;transition:border-color .2s ease,transform .2s ease;
}
.pain-card:hover{border-color:var(--gold-line);transform:translateY(-2px);}
.pain-card:hover .pain-read{color:var(--gold);}
.pain-card-img{aspect-ratio:16/10;overflow:hidden;}
.pain-card-img img{width:100%;height:100%;object-fit:cover;display:block;}
.pain-card-body{padding:var(--space-5);flex:1;display:flex;flex-direction:column;}
.pain-num{
  font-family:var(--font-mono);font-size:11px;color:var(--rust);
  letter-spacing:0.1em;margin-bottom:var(--space-3);display:block;
}
.pain-card-body h3{font-size:19px;line-height:1.35;margin-bottom:var(--space-4);font-family:var(--font-heading);}
.pain-card-body ul{list-style:none;color:var(--mist);font-size:13.5px;}
.pain-card-body li{position:relative;padding-left:18px;margin-bottom:9px;line-height:1.55;}
.pain-card-body li::before{content:'—';position:absolute;left:0;color:var(--gold);}
.pain-read{
  margin-top:auto;padding-top:var(--space-4);font-family:var(--font-mono);
  font-size:12px;color:var(--mist-dim);letter-spacing:0.04em;transition:color .2s ease;
}
.pain-cta{
  text-align:center;background:var(--gold-soft);border:1px solid var(--gold-line);
  padding:var(--space-7) var(--space-6);margin-top:var(--space-8);
}
.pain-cta h3{color:var(--gold);font-size:26.9px;margin-bottom:var(--space-3);font-family:var(--font-heading);}
.pain-cta p{color:var(--mist);font-size:16.2px;margin-bottom:var(--space-5);}
@media (max-width:1200px){
  .pain-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:768px){
  .pain-grid{grid-template-columns:1fr;}
}

/* ===== PROOF / photo contact sheet ===== */
.proof-layout{display:grid;grid-template-columns:0.9fr 1.1fr;gap:var(--space-9);align-items:start;}
.proof-text p{color:var(--mist);font-size:17.4px;margin-bottom:var(--space-4);}
.proof-quote{
  border-left:2px solid var(--gold);
  padding:var(--space-4) 0 var(--space-4) var(--space-5);margin:var(--space-6) 0;
  font-family:var(--font-heading);font-size:20.2px;color:var(--ivory);
  font-style:normal;line-height:1.7;
}
.platform-row{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-3);margin-top:var(--space-6);}
.platform-card{
  background:var(--card);border:1px solid var(--line);padding:var(--space-4) var(--space-5);
}
.platform-card .p-name{font-size:14.6px;color:var(--mist);margin-bottom:var(--space-2);}
.platform-card .p-num{font-family:var(--font-mono);font-size:clamp(28px,2.8vw,48px);color:var(--gold);font-weight:700;line-height:1.1;}

.gal-pill{
  font-family:var(--font-mono);font-size:14px;color:var(--mist);
  background:var(--card);border:1px solid var(--line-strong);padding:9px 18px;
  cursor:pointer;letter-spacing:0.02em;transition:background .2s,color .2s,border-color .2s;
}
.gal-pill.active{background:var(--gold);color:var(--ink);border-color:var(--gold);font-weight:700;}
.gal-pill:hover{border-color:var(--gold);}
.gallery-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-3);margin-top:var(--space-6);
}
.gal-tile{aspect-ratio:8/9;overflow:hidden;border:1px solid var(--line);background:var(--card);}
.gal-tile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s;}
.gal-tile:hover img{transform:scale(1.05);}

.section-head-with-qr{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--space-7);margin-bottom:var(--space-8);flex-wrap:wrap;}
.video-qr-row{display:flex;gap:var(--space-4);flex-shrink:0;}
.video-qr-item{background:#fff;border:1px solid var(--line-strong);padding:var(--space-3);text-align:center;box-shadow:0 2px 8px rgba(21,42,68,0.06);}
.video-qr-img{width:88px;height:88px;object-fit:cover;display:block;}
.video-qr-label{font-size:12.9px;color:var(--mist-dim);margin-top:var(--space-2);font-family:var(--font-mono);letter-spacing:0.03em;}
/* 二维码底下把账号名写出来：扫不到码的人（比如在电脑上看）也能搜到账号，
   而且这串字符是把网站和社交平台上那个人绑成同一个实体的关键信号。 */
.video-qr-handle{font-size:11.4px;color:var(--gold);margin-top:2px;font-family:var(--font-mono);letter-spacing:0.02em;}
.video-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--space-3);margin-top:var(--space-6);}
.video-tile{background:var(--card);border:1px solid var(--line);overflow:hidden;}
/* The tap target that takes a clip full-screen. It has to match the VIDEO
   box, not the tile (the tile is taller by its caption), so it takes the
   video's own 9:16 ratio; clip-path then trims the foot of it so the native
   control bar underneath stays clickable. */
.video-tile.has-play{position:relative;}
.video-tile .video-play{
  position:absolute;left:0;top:0;width:100%;
  aspect-ratio:9/16;
  clip-path:inset(0 0 46px 0);
  z-index:2;border:0;padding:0;background:transparent;cursor:pointer;
  display:grid;place-items:center;
}
.video-tile .video-play::before{
  content:'';width:54px;height:54px;border-radius:var(--radius-full);
  background:rgba(11,31,51,0.62);
  border:1.5px solid rgba(255,255,255,0.85);
  transition:background .2s ease, transform .2s ease;
}
.video-tile .video-play::after{
  content:'';position:absolute;
  border-left:16px solid #fff;border-top:10px solid transparent;
  border-bottom:10px solid transparent;margin-left:5px;
}
.video-tile .video-play:hover::before{background:var(--gold);transform:scale(1.06);}
.video-tile .video-play:focus-visible{outline:2px solid var(--gold);outline-offset:-4px;}
.video-error{
  padding:10px 12px;font-size:12.6px;line-height:1.6;
  color:var(--color-rust);background:var(--rust-soft);
}
.video-tile video{width:100%;aspect-ratio:9/16;display:block;background:#000;}
.video-title{padding:10px 12px 14px;font-size:14px;color:var(--mist);line-height:1.5;}

/* ===== SERVICES ===== */
.service-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);}
.service-card{background:var(--panel);padding:var(--space-6) var(--space-5);display:flex;flex-direction:column;min-height:100%;}
.service-card .s-eyebrow{font-family:var(--font-mono);font-size:12.3px;color:var(--mist-dim);letter-spacing:0.08em;margin-bottom:var(--space-4);}
.service-card h3{font-size:21.3px;margin-bottom:var(--space-3);line-height:1.4;}
.service-card .s-price{font-family:var(--font-mono);font-size:26.9px;color:var(--gold);font-weight:700;margin-bottom:var(--space-4);}
.service-card .s-price span{font-size:13.4px;color:var(--mist-dim);font-family:var(--font-body);}
.service-card p{color:var(--mist);font-size:15.5px;margin-bottom:var(--space-5);flex-grow:1;}
.service-card .s-fit{font-size:14px;color:var(--mist-dim);border-top:1px solid var(--line);padding-top:var(--space-4);margin-bottom:var(--space-5);}
.service-card .s-fit b{color:var(--gold);font-weight:500;}
.service-card .btn{align-self:flex-start;padding:10px 20px;font-size:14.6px;}
@media (max-width:1200px){.service-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:768px){.service-grid{grid-template-columns:1fr;}}

/* ===== BOOK ===== */
.book-layout{display:grid;grid-template-columns:0.55fr 1.45fr;gap:var(--space-8);align-items:center;}
.book-cover{
  aspect-ratio:3/4;background:var(--card);border:1px solid var(--gold-line);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-3);
  padding:var(--space-5);text-align:center;position:relative;
}
.book-cover .spine{position:absolute;left:0;top:0;bottom:0;width:8px;background:var(--gold-soft);}
.book-cover .bc-title{font-family:var(--font-heading);font-size:20.2px;color:var(--mist);}
.book-form{display:flex;gap:var(--space-3);margin-top:var(--space-5);flex-wrap:wrap;}
.field{
  background:var(--card);border:1px solid var(--line-strong);color:var(--ivory);
  padding:13px 16px;font-size:15.7px;font-family:var(--font-body);flex:1;min-width:180px;
}
.field::placeholder{color:var(--mist-dim);}

/* ===== EVENT ===== */
#event{padding:0 0 var(--space-10);}
.event-content-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:var(--space-8);margin-top:var(--space-4);}
.step-phase{margin-bottom:var(--space-5);}
.step-phase-label{
  font-family:var(--font-mono);font-size:12px;color:var(--gold);
  letter-spacing:0.06em;margin-bottom:var(--space-2);padding-top:var(--space-4);border-top:1px solid var(--gold-line);
}
.step-phase:first-child .step-phase-label{padding-top:0;border-top:none;}
.steps-list{list-style:none;}
.steps-list li{
  position:relative;display:flex;gap:var(--space-4);align-items:flex-start;
  padding:var(--space-3) 0;font-size:15.2px;color:var(--mist);line-height:1.5;
}
.step-num{
  flex-shrink:0;margin-top:1px;
  font-family:var(--font-mono);font-size:12.5px;color:var(--gold);font-weight:700;
  width:24px;height:24px;border:1px solid var(--gold-line);border-radius:var(--radius-full);
  display:flex;align-items:center;justify-content:center;
}
.steps-list li b{color:var(--ink);font-weight:700;}
.audience-list{list-style:none;}
.audience-list li{
  position:relative;padding-left:var(--space-6);margin-bottom:var(--space-4);
  font-size:16.2px;color:var(--mist);line-height:1.6;
}
.audience-list li::before{content:'—';position:absolute;left:0;color:var(--gold);}
@media (max-width:1200px){
  .event-content-grid{grid-template-columns:1fr;gap:var(--space-6);}
}

/* Event banner: Grid-based stacking (image + text overlay share one cell) */
/* Group photo is 4:3 with the front row's feet at ~84% of the frame. An 8:5
   window anchored to the bottom keeps 83% of it — stage screen through to the
   shoes — and leaves the chair row underneath free for the headline. */
.event-banner{display:grid;grid-template-rows:minmax(0,1fr);aspect-ratio:8/5;overflow:hidden;}
.event-banner img{grid-area:1/1;width:100%;height:100%;object-fit:cover;object-position:center bottom;display:block;}
/* Full-width photo banner variant (fixed aspect ratio instead of viewport-height) */
.event-banner--photo{width:100%;aspect-ratio:4/3;height:auto;max-height:88vh;}
.event-banner--photo img{object-position:center 45%;}
/* Section-spacing exception: tighter top padding directly under a full-bleed
   banner, so the section padding doesn't double up with the banner's own gap. */
.section--pt-tight{padding-top:44px;}
.event-banner-overlay{
  grid-area:1/1;
  background:linear-gradient(180deg,
    rgba(11,31,51,0.05) 0%, rgba(11,31,51,0.30) 58%, rgba(11,31,51,0.90) 100%);
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:var(--space-7);
}
.event-banner-badge{
  display:inline-block;background:var(--rust);color:#fff;
  font-family:var(--font-mono);font-size:14.6px;letter-spacing:0.06em;
  padding:8px 18px;margin-bottom:var(--space-4);width:fit-content;
}
.event-banner-overlay h1,.event-banner-overlay h2{color:#fff;font-size:clamp(27px, 2.4vw + 14px, 49.3px);line-height:1.3;}
.event-box{
  background:var(--card);border:1px solid var(--gold-line);
  display:grid;grid-template-columns:0.85fr 1.15fr;
  margin-top:-1px;
  min-width:0;
}
.event-info{padding:var(--space-8) var(--space-7);min-width:0;}
.event-info .eyebrow{margin-bottom:var(--space-5);}
.event-meta{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-5);margin:var(--space-6) 0;}
.event-meta div{border-top:1px solid var(--line);padding-top:var(--space-3);}
.event-meta .m-label{font-size:13.4px;color:var(--mist-dim);margin-bottom:var(--space-2);}
.event-meta .m-val{font-family:var(--font-mono);font-size:19px;color:var(--gold);}
.event-date-hero{font-family:var(--font-mono);font-size:clamp(30px, 2vw + 18px, 57px);font-weight:700;color:var(--ink);line-height:1;margin:var(--space-5) 0 var(--space-1);}
.lang-notice{
  color:var(--ink);font-size:17px;font-weight:500;line-height:1.5;
  margin:var(--space-3) 0 var(--space-5);letter-spacing:.01em;
}
.lang-notice b{color:var(--gold);font-weight:700;font-size:18px;}
.m-val-bold{font-family:var(--font-mono);font-size:clamp(20px, 1vw + 14px, 26px);font-weight:700;color:var(--ink);}
.event-cap{font-size:15.1px;color:var(--mist);}
.event-form{background:var(--panel-2);padding:var(--space-8) var(--space-7);display:flex;flex-direction:column;min-width:0;}
.event-form label{font-size:14px;color:var(--mist-dim);margin-bottom:-6px;}
.event-form .field,.event-form select{min-width:0;max-width:100%;box-sizing:border-box;}
.ef-section{
  font-family:var(--font-mono);font-size:12.3px;color:var(--gold);
  letter-spacing:0.08em;text-transform:uppercase;
  margin-top:var(--space-4);padding-top:var(--space-4);border-top:1px solid var(--line);
}
.event-form > .ef-section:first-child{margin-top:0;padding-top:0;border-top:none;}
.ef-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4);min-width:0;}
.ef-grid .ef-field{display:flex;flex-direction:column;gap:6px;min-width:0;}
.ef-radio-group,.ef-check-group{display:flex;flex-direction:column;gap:9px;margin-top:2px;}
.ef-radio-group label,.ef-check-group label{
  display:flex;align-items:center;gap:9px;font-size:15.1px;color:var(--ivory);
  margin-bottom:0;cursor:pointer;
}
.ef-radio-group input,.ef-check-group input{accent-color:var(--gold);width:15px;height:15px;flex-shrink:0;}
select.field{
  padding:13px 16px;font-size:15.7px;font-family:var(--font-body);
  background:var(--card);border:1px solid var(--line-strong);color:var(--ivory);
  appearance:none;width:100%;min-width:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238497AE' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;
}
.ef-price-display{
  background:var(--gold-soft);border:1px solid var(--gold-line);padding:var(--space-4) var(--space-5);
  font-size:15.1px;color:var(--ivory);
}
.ef-price-display b{color:var(--gold);font-family:var(--font-mono);font-size:17.9px;}
@media (max-width:1200px){
  .event-box{grid-template-columns:1fr;}
  .ef-grid{grid-template-columns:repeat(2,1fr);gap:10px;}
  .ef-grid .ef-field label{font-size:11.5px;}
  .event-banner{aspect-ratio:3/2;}
  .event-banner-overlay{padding:var(--space-6) var(--space-5);}
}

/* ===== FAQ ===== */
.faq-item{border-top:1px solid var(--line);padding:var(--space-6) 0;}
.faq-item:last-child{border-bottom:1px solid var(--line);}
.faq-q{display:flex;gap:var(--space-4);align-items:baseline;cursor:pointer;}
.faq-q .qmark{font-family:var(--font-mono);color:var(--gold);font-size:15.7px;flex-shrink:0;}
.faq-q h3{font-size:19px;font-weight:600;font-family:var(--font-body);color:var(--ivory);}
.faq-a{color:var(--mist);font-size:16.2px;margin-top:var(--space-4);margin-left:var(--space-6);max-width:720px;}

/* ===== CONTACT ===== */
.contact-layout{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-9);}
.contact-form{display:flex;flex-direction:column;}
.form-fields-stack{display:flex;flex-direction:column;gap:var(--space-4);}
.contact-form textarea{background:var(--card);border:1px solid var(--line-strong);color:var(--ivory);padding:14px 16px;font-size:15.7px;font-family:var(--font-body);min-height:120px;resize:vertical;}
.direct-list{list-style:none;}
.direct-list li{border-top:1px solid var(--line);padding:var(--space-5) 0;display:flex;justify-content:space-between;gap:var(--space-4);font-size:16.2px;flex-wrap:wrap;}
.direct-list li:last-child{border-bottom:1px solid var(--line);}
.direct-list .d-label{color:var(--mist-dim);flex-shrink:0;white-space:nowrap;}
.direct-list li span:last-child{text-align:right;word-break:break-word;}
.qr-big-block{
  background:var(--card);border:1px solid var(--gold-line);
  display:inline-flex;flex-direction:column;align-items:center;gap:var(--space-5);
  padding:var(--space-7) var(--space-8);margin-top:var(--space-6);
}
.qr-big-img{width:340px;height:340px;object-fit:cover;border:1px solid var(--line-strong);}
.qr-big-cap{font-size:19px;color:var(--ink);text-align:center;line-height:1.6;font-weight:600;}

/* ===== FOOTER ===== */
footer{background:var(--color-navy);color:var(--on-dark-soft);padding:var(--space-8) 0 0;}
/* 第一栏给 370px 保底：中英两个字标并排之后，GP 标记 + 金爷汇 + GOLDENPAPAS
   一共要 341px，原来那 279px 装不下，字标会被挤出栏外或者掉行。 */
.footer-grid{display:grid;grid-template-columns:minmax(370px,1.9fr) repeat(4,minmax(0,1fr));gap:var(--space-7);margin-bottom:var(--space-8);}
footer h4{font-size:14.6px;color:var(--on-dark);letter-spacing:0.04em;margin-bottom:var(--space-4);font-family:var(--font-body);font-weight:600;}
footer h4 span{
  display:block;font-family:var(--font-mono);font-size:9.6px;font-weight:400;
  letter-spacing:0.12em;text-transform:uppercase;color:var(--on-dark-dim);margin-top:2px;
}
footer .f-brand{font-family:var(--font-heading);font-size:22.4px;color:var(--on-dark);margin-bottom:var(--space-2);}
.footer-logo{width:230px;height:auto;display:block;margin-bottom:var(--space-4);color:var(--on-dark);}
footer .footer-grid p{color:var(--on-dark-dim);font-size:14.6px;max-width:340px;line-height:1.8;}
footer ul{list-style:none;}
footer ul li{margin-bottom:var(--space-3);}
footer ul a{color:var(--on-dark-soft);font-size:15.1px;transition:color .2s;}
footer ul a:hover{color:var(--gold);}
/* footer brand lockup (mirrors the nav lockup) */
.footer-brand{display:flex;align-items:center;gap:14px;margin-bottom:var(--space-5);}
.footer-brand .nav-mark{height:46px;}
/* 页脚字标和导航一样是 34px（原 17px 的两倍）。
   问题是页脚第一栏在桌面端只有 279px 宽，34px 的字标要占 241px，
   加上 GP 标记和间距一共 319px，横着放不下——flex 会把它压扁（高度不变、
   宽度被挤，字就变形）。所以让 .footer-brand 允许换行：放不下时 GP 标记
   自己一行、字标自己一行，241px < 279px，宽宽松松。
   flex-shrink:0 保证它任何时候都不会被压变形。 */
.footer-brand{flex-wrap:wrap;row-gap:var(--space-3);}
/* nowrap：这两个字标要并排，栏宽已经按它们的实际宽度留够了。 */
.footer-brand .nav-wordmark{flex-shrink:0;flex-wrap:nowrap;column-gap:var(--space-4);}
.footer-brand .nw-solo{height:34px;width:auto;flex-shrink:0;}
.footer-brand .nw-cn{height:38px;}
.footer-brand .nw-en{height:22px;}
.footer-social{display:flex;gap:var(--space-3);margin-top:var(--space-5);}
.footer-social a{
  width:34px;height:34px;border:1px solid var(--line-dark-strong);border-radius:var(--radius-full);
  display:flex;align-items:center;justify-content:center;color:var(--on-dark-soft);
  transition:border-color .2s,color .2s;
}
.footer-social a:hover{border-color:var(--gold);color:var(--gold);}
.footer-social svg{width:16px;height:16px;display:block;fill:currentColor;}
.footer-legal{
  border-top:1px solid var(--line-dark);padding:var(--space-5) 0 var(--space-6);
  color:var(--on-dark-dim);font-size:12.9px;line-height:1.8;
}
.footer-legal p{margin-bottom:var(--space-2);max-width:none;width:100%;}
.footer-legal p:last-of-type{margin-bottom:var(--space-4);}
.footer-legal b{color:var(--on-dark-soft);font-weight:600;}
.footer-legal-links{display:flex;gap:var(--space-2);font-size:12.9px;flex-wrap:wrap;}
.footer-legal-links a{color:var(--on-dark-dim);text-decoration:underline;text-underline-offset:2px;}
.footer-legal-links a:hover{color:var(--gold);}
.footer-bottom{
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--space-3);
  color:var(--on-dark-dim);font-size:13.4px;
  border-top:1px solid var(--line-dark);padding:var(--space-5) 0;
}
/* Slim copyright bar, matching the template's footer base */
.footer-baseline{
  background:var(--color-navy-deep);
  border-top:1px solid var(--line-dark);
  padding:var(--space-4) 0;
}
.footer-baseline .wrap{
  display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);flex-wrap:wrap;
  color:var(--on-dark-dim);font-size:12.9px;
}
.footer-baseline a{color:var(--on-dark-dim);transition:color .2s;}
.footer-baseline a:hover{color:var(--gold);}
@media (max-width:1200px){
  .footer-grid{grid-template-columns:1fr 1fr;gap:var(--space-6);}
}
@media (max-width:768px){
  .footer-grid{grid-template-columns:1fr;}
}

@media (max-width:1200px){
  .proof-layout,.book-layout,.contact-layout{grid-template-columns:1fr;}
  .hero-split{grid-template-columns:1fr;}
  .hero-photo-col{order:-1;aspect-ratio:2/3;width:100%;}
  .hero-copy-col{padding:36px var(--edge) var(--space-8);}
  .stat-row{grid-template-columns:repeat(2,1fr);row-gap:var(--space-5);}
  .stat-row .stat:nth-child(2n){border-right:none;}
  .platform-row{grid-template-columns:repeat(2,1fr);}
  .footer-grid{grid-template-columns:1fr;}
  section{padding:var(--space-8) 0;}
  .qr-big-block{padding:var(--space-5);width:100%;}
  .qr-big-img{width:100%;height:auto;aspect-ratio:1;max-width:320px;}
  .gallery-grid{grid-template-columns:repeat(2,1fr);}
  .video-grid{grid-template-columns:repeat(2,1fr);}
  .section-head-with-qr{flex-direction:column;align-items:flex-start;gap:var(--space-5);}
  .video-qr-row{gap:var(--space-3);}
  .video-qr-img{width:76px;height:76px;}
}

@media (max-width:768px){
  .edge{--edge:20px;}
  .nav-inner{padding:0 20px;}
  .wrap{padding:0 20px;}
}

/* ===== Utility ===== */
.ci-label{font-size:12.3px;color:var(--mist-dim);letter-spacing:0.05em;font-family:var(--font-mono);text-transform:uppercase;}

/* ===== Collaborations page ===== */
.collab-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);}
.collab-card{background:var(--panel);padding:var(--space-6) var(--space-6);}
.cc-num{font-family:var(--font-mono);font-size:13.4px;color:var(--gold);letter-spacing:0.1em;margin-bottom:var(--space-3);}
.collab-card h3{font-size:20.2px;margin-bottom:var(--space-3);font-family:var(--font-heading);line-height:1.4;}
.collab-card p{font-size:15.7px;color:var(--mist);line-height:1.7;}

.collab-form{display:flex;flex-direction:column;}
.collab-form label{font-size:14px;color:var(--mist-dim);margin-bottom:-6px;}
.collab-form select.field{
  padding:13px 16px;font-size:15.7px;font-family:var(--font-body);
  background:var(--card);border:1px solid var(--line-strong);color:var(--ivory);
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238497AE' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;
}
.collab-form textarea.field{min-height:110px;resize:vertical;}
@media (max-width:768px){
  .collab-grid{grid-template-columns:1fr;}
}

/* ===== Event registration title & form validation ===== */
.event-register-title{
  font-size:clamp(24px, 1.6vw + 16px, 38.1px);line-height:1.35;text-align:center;
  margin-top:var(--space-8);color:var(--ink);
}
.ef-required{color:var(--rust);margin-left:2px;}
.field.field-error,select.field-error{border-color:var(--rust) !important;}
.ef-error-msg{color:var(--rust);font-size:14px;margin-top:-4px;}
.event-confirm{text-align:center;padding:var(--space-5) 0;}
.event-confirm .ec-check{
  width:56px;height:56px;border-radius:var(--radius-full);background:var(--gold);color:var(--ink);
  display:flex;align-items:center;justify-content:center;font-size:29.1px;margin:0 auto var(--space-4);
}
.event-confirm h3{font-size:24.6px;margin-bottom:var(--space-3);}
.event-confirm p{color:var(--mist);font-size:16.2px;margin-bottom:var(--space-2);line-height:1.7;}
.event-confirm .ec-qr{width:150px;height:150px;object-fit:cover;border:1px solid var(--line-strong);margin:var(--space-5) auto 10px;display:block;}
.event-confirm .ec-qr-cap{font-size:13.4px;color:var(--mist-dim);}

/* ===== Event registration poster (Grid stacking, no absolute) ===== */
/* definite column + minmax(0,…): the nowrap meta line inside is wider than
   the phone viewport in English, and an implicit auto column would size the
   whole poster to it */
.event-poster{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);aspect-ratio:4/3;overflow:hidden;width:100%;min-width:0;}
.event-poster img{grid-area:1/1;width:100%;height:100%;object-fit:cover;display:block;}
.event-poster-overlay{
  grid-area:1/1;
  background:linear-gradient(180deg, rgba(11,23,40,0.05) 0%, rgba(11,23,40,0.85) 100%);
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:var(--space-5);
}
.event-poster-badge{
  display:inline-block;background:var(--rust);color:#fff;
  font-family:var(--font-mono);font-size:12.9px;letter-spacing:0.04em;
  padding:6px 14px;margin-bottom:var(--space-3);width:fit-content;
}
.event-poster-overlay h3{color:#fff;font-size:26.9px;line-height:1.3;margin-bottom:var(--space-2);font-family:var(--font-heading);}
.event-poster-meta{color:var(--gold);font-family:var(--font-mono);font-size:14.6px;letter-spacing:0.03em;}

/* ===== Session history: grouped by city (dedicated sharing-session page) ===== */
.city-group-list{margin-top:var(--space-5);}
.city-group{padding:var(--space-5) 0;border-top:1px solid var(--line);}
.city-group:last-child{border-bottom:1px solid var(--line);}
.city-group-head{display:flex;align-items:baseline;gap:var(--space-3);margin-bottom:var(--space-4);flex-wrap:wrap;}
.city-name{font-family:var(--font-heading);font-size:20px;font-weight:700;color:var(--ink);}
.city-count{font-family:var(--font-mono);font-size:13px;color:var(--gold);}
.date-tags{display:flex;flex-wrap:wrap;gap:var(--space-2);}
.date-tag{
  font-family:var(--font-mono);font-size:12.5px;color:var(--mist);
  background:var(--card);border:1px solid var(--line);padding:5px 10px;
}
.date-tag-pending{color:var(--mist-dim);font-style:italic;}
.session-gallery-note{margin-top:var(--space-7);}

/* ===== Homepage event teaser (phase pills) ===== */
.phase-pills{display:flex;flex-wrap:wrap;gap:var(--space-3);}
.phase-pill{
  background:var(--card);border:1px solid var(--gold-line);color:var(--ink);
  padding:8px 16px;font-size:13px;font-family:var(--font-mono);
}

/* ===== Sharing session: terms & conditions ===== */
.event-terms{border-top:1px solid var(--line);margin-top:var(--space-5);padding-top:var(--space-5);font-size:13px;color:var(--mist-dim);line-height:1.75;}
.event-terms b{color:var(--mist);}

/* ===== Language switcher (multilingual site) ===== */
.lang-switcher{display:flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:13px;flex-shrink:0;}
.lang-switcher a{color:var(--on-dark-dim);padding:4px 6px;transition:color .2s;}
.lang-switcher a:hover{color:var(--gold);}
.lang-switcher a.lang-active{color:var(--gold);font-weight:700;}
.lang-mobile-only{display:none;}
@media (max-width:1200px){
  .lang-switcher{display:none;}
  .lang-mobile-only{display:block;}
}

/* =====================================================================
   TEMPLATE LAYOUT SYSTEM — 2026 homepage
   Bands alternate: navy → white → cream → white → cream → navy → …
   Every band is Grid/Flex; images all use aspect-ratio + object-fit.
   Breakpoints: 1440 / 1200 / 768 / 390 (see header comment).
   ===================================================================== */

/* ---- shared band scaffolding ---- */
.band{padding:var(--space-9) 0;}
.band-tight{padding:var(--space-8) 0;}
.band-cream{background:var(--color-cream);}
.band-white{background:var(--color-white);}
.band-navy{background:var(--color-navy);color:var(--on-dark-soft);}
.band-navy h2,.band-navy h3,.band-navy h4{color:var(--on-dark);}

/* left rail heading used by services / cases / insights / sessions */
.rail{display:grid;grid-template-columns:260px minmax(0,1fr);gap:var(--space-8);align-items:start;}
.rail-head h2{font-size:clamp(21px, 1.1vw + 15px, 27px);line-height:1.35;margin-bottom:4px;}
.rail-head .rh-en{
  font-family:var(--font-mono);font-size:11.2px;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--mist-dim);
}
.band-navy .rail-head .rh-en{color:var(--on-dark-dim);}
.rail-head p{color:var(--mist);font-size:14.6px;line-height:1.85;margin:var(--space-4) 0 var(--space-5);}
.band-navy .rail-head p{color:var(--on-dark-soft);}

/* ---- extra button variants ---- */
.btn-outline{border-color:var(--line-strong);color:var(--ink);background:transparent;}
.btn-outline:hover{border-color:var(--gold);color:var(--gold);}
.btn-light{border-color:var(--line-dark-strong);color:var(--on-dark);background:transparent;}
.btn-light:hover{border-color:var(--gold);color:var(--gold);}
.btn-sm{padding:10px 20px;font-size:14px;}

/* =====================  1. HERO  ===================== */
.hero-full{
  display:grid;
  /* definite column: without it the single auto column is sized to the items'
     max-content and the hero blows past the viewport on small screens */
  grid-template-columns:minmax(0,1fr);
  background:var(--color-navy);
  /* the nav is fixed and paints OVER this section, so the hero reserves its
     height as padding — without it the top of the portrait (and of the head)
     sits underneath the nav bar */
  padding-top:76px;
  min-height:min(94vh, 900px);
  overflow:hidden;
  align-items:center;
}
/* The portrait is 1090x1443. Give the pane that exact ratio and size it by
   HEIGHT, so the width follows and object-fit never has anything to crop —
   the full figure and the gold 金爷 signature at its foot both stay in frame.
   (aspect-ratio derives the missing axis from the definite one; height is the
   definite axis here, and justify-self:end stops the grid stretching it.) */
.hero-media{
  grid-area:1/1;min-width:0;
  justify-self:end;align-self:center;
  height:min(72vh, 700px);
  aspect-ratio:1090/1443;
  width:auto;
  /* The hero bleeds full-width, but the portrait should not run off toward
     the viewport edge — it lines up inside the same 1280px column the copy
     sits in (hence the .wrap arithmetic), then steps in one more gutter so
     it reads as part of the layout rather than pinned to the edge. */
  margin-right:calc(max(var(--edge), (100% - var(--maxw)) / 2 + var(--edge)) + var(--space-6));
  display:grid;grid-template-rows:minmax(0,1fr);
}
.hero-media img{
  grid-area:1/1;
  width:100%;height:100%;object-fit:contain;object-position:center;
}
/* left-to-right scrim so the headline always sits on solid navy */
.hero-media::after{
  content:'';grid-area:1/1;
  /* only a narrow fade at the left edge now — the copy no longer runs under
     the portrait, so nothing needs to be darkened to stay readable */
  background:linear-gradient(90deg,
    rgba(11,31,51,0.80) 0%,
    rgba(11,31,51,0.25) 8%,
    rgba(11,31,51,0) 18%);
}
/* the portrait already carries 金爷's own gold signature — a second script
   signature on top of it competes with the real one, so it is not painted */
.hero-signature{display:none;}
.hero-signature-legacy{
  grid-area:1/1;align-self:end;justify-self:end;
  display:grid;gap:2px;justify-items:end;text-align:right;
  padding:0 var(--space-7) var(--space-7) 0;
}
.hero-signature .hs-name{
  font-family:'Brush Script MT','Snell Roundhand',cursive;
  font-size:clamp(26px, 2vw + 14px, 40px);color:var(--gold);line-height:1;
}
.hero-signature .hs-role{
  font-family:var(--font-mono);font-size:9.6px;letter-spacing:0.16em;
  text-transform:uppercase;color:rgba(255,255,255,0.6);
}
.hero-inner{grid-area:1/1;width:100%;min-width:0;}
.hero-copy{max-width:620px;}
.hero-eyebrow{
  font-family:var(--font-mono);font-size:11.8px;letter-spacing:0.2em;
  text-transform:uppercase;color:var(--gold);margin-bottom:var(--space-5);
}
.hero-full h1{
  font-size:clamp(32px, 4.2vw + 4px, 62px);
  line-height:1.08;letter-spacing:-0.01em;color:var(--on-dark);
  margin-bottom:var(--space-5);
}
.hero-lead{
  font-size:clamp(17px, 0.7vw + 13px, 22px);color:var(--gold);
  font-weight:600;margin-bottom:var(--space-4);line-height:1.5;
}
.hero-sub{
  font-size:15.7px;color:var(--on-dark-soft);line-height:1.9;
  max-width:520px;margin-bottom:var(--space-7);
}
.hero-full .hero-ctas{display:flex;gap:var(--space-4);flex-wrap:wrap;margin-bottom:0;}

/* =====================  2. STAT STRIP  ===================== */
.stat-strip{background:var(--color-white);border-bottom:1px solid var(--line);}
.stat-strip .wrap{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));}
.ss-item{
  /* 左右留白从 24px 收到 16px：数字放大之后，最长的「3,500 SKUs」需要这
     多出来的 16px 才不会顶到分隔线上。 */
  padding:var(--space-7) var(--space-4);text-align:center;
  border-right:1px solid var(--line);
}
.ss-item:last-child{border-right:none;}
.ss-num{
  font-family:var(--font-mono);font-weight:700;color:var(--color-navy);
  /* 40 → 62px。上限卡在这里是量出来的，不是估的：内容区宽度封顶 1280px，
     四栏平分再扣掉留白，每格只有 272px；最长的「3,500 SKUs」按等宽字体折算
     约等于 4.08 个字号，62px 刚好占 253px。再大就会顶到分隔线上。 */
  font-size:clamp(26px, 4.6vw, 62px);line-height:1.05;letter-spacing:-0.01em;
}
.ss-num .ss-unit{font-size:0.45em;color:var(--gold);margin-left:5px;letter-spacing:0.04em;}
.ss-label{font-size:14px;color:var(--ink);margin-top:var(--space-3);font-weight:600;}
.ss-sub{font-size:12.3px;color:var(--mist-dim);margin-top:2px;}

/* =====================  3. FOUNDER + TIMELINE  ===================== */
.founder-inner{display:grid;grid-template-columns:minmax(0,0.85fr) minmax(0,1.6fr);gap:var(--space-8);align-items:start;}
.founder-copy h2{font-size:clamp(23px, 1.3vw + 16px, 31px);line-height:1.3;margin-bottom:2px;}
.founder-copy .rh-en{
  font-family:var(--font-mono);font-size:11.2px;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--mist-dim);margin-bottom:var(--space-5);
}
.founder-copy p{color:var(--mist);font-size:14.6px;line-height:1.9;margin-bottom:var(--space-2);}
.founder-copy .founder-cta{margin-top:var(--space-5);}
.timeline{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;}
.tl-item{display:grid;gap:10px;align-content:start;padding-right:var(--space-4);}
.tl-rail{display:flex;align-items:center;}
.tl-dot{width:11px;height:11px;border-radius:var(--radius-full);background:var(--gold);flex-shrink:0;}
.tl-line{flex:1;height:1px;background:var(--gold-line);}
.tl-item:last-child .tl-line{display:none;}
/* 年份是这一栏的锚点，原来 19px 比正文大不了多少，扫视时抓不住。 */
.tl-year{font-family:var(--font-mono);font-size:clamp(24px,2.6vw,44px);font-weight:700;color:var(--ink);line-height:1.05;letter-spacing:-0.01em;}
.tl-text{font-size:12.9px;color:var(--mist);line-height:1.7;}

/* =====================  4. SERVICES  ===================== */
.service-grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-4);}
.svc-card{
  display:grid;
  /* width must be definite, otherwise aspect-ratio + min-height resolves the
     WIDTH from the height (240 x 5/4 = 300px) and the cards overflow the track */
  width:100%;min-width:0;
  aspect-ratio:5/4;min-height:240px;overflow:hidden;
  /* minmax(0,...) is required: a plain 1fr row keeps an auto min-content floor,
     so a portrait photo still grows the row and pushes the caption out of view */
  grid-template-rows:minmax(0,1fr);
  background:var(--color-navy);color:var(--on-dark);
  transition:transform .25s ease;
}
.svc-card:hover{transform:translateY(-3px);}
.svc-card img{grid-area:1/1;width:100%;height:100%;object-fit:cover;}
.svc-card::after{
  content:'';grid-area:1/1;
  background:linear-gradient(180deg, rgba(11,31,51,0.55) 0%, rgba(11,31,51,0.86) 48%, rgba(11,31,51,0.97) 100%);
}
.svc-body{
  grid-area:1/1;align-self:end;z-index:2;
  padding:var(--space-5);display:grid;gap:6px;
}
.svc-icon{color:var(--gold);margin-bottom:var(--space-2);}
.svc-icon svg{width:22px;height:22px;display:block;stroke:currentColor;fill:none;stroke-width:1.5;}
.svc-card h3{font-size:16.5px;line-height:1.35;color:var(--on-dark);font-weight:600;}
.svc-en{
  font-family:var(--font-mono);font-size:9.6px;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--gold);
}
.svc-tags{
  display:flex;flex-wrap:wrap;gap:5px;margin-top:6px;
  font-size:10.6px;color:var(--on-dark-soft);
}
.svc-tags span{white-space:nowrap;}
.svc-tags span + span::before{content:'·';margin-right:6px;color:var(--on-dark-dim);}

/* =====================  5. CASES  ===================== */
.case-grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-5);}
.cs-card{
  background:var(--color-white);border:1px solid var(--line);
  display:flex;flex-direction:column;color:inherit;
  transition:border-color .2s ease, transform .2s ease;
}
.cs-card:hover{border-color:var(--gold-line);transform:translateY(-2px);}
.cs-thumb{aspect-ratio:16/10;overflow:hidden;background:var(--color-cream-2);}
.cs-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.cs-body{padding:var(--space-4) var(--space-5) var(--space-5);display:grid;gap:6px;}
.cs-card h3{font-size:15.7px;font-weight:600;line-height:1.4;}
.cs-meta{font-family:var(--font-mono);font-size:11.2px;letter-spacing:0.06em;color:var(--gold);}
.cs-desc{font-size:13.4px;color:var(--mist);line-height:1.7;}
.cs-more{font-size:13px;color:var(--mist-dim);margin-top:var(--space-2);}
.cs-card:hover .cs-more{color:var(--gold);}

/* =====================  6. GP17 FRAMEWORK BAND  ===================== */
.framework-band{background:var(--color-navy);color:var(--on-dark-soft);padding:var(--space-8) 0;}
.fw-inner{display:grid;grid-template-columns:270px minmax(0,1fr);gap:var(--space-8);align-items:center;}
.fw-head .rh-en{
  font-family:var(--font-mono);font-size:11.2px;letter-spacing:0.16em;
  text-transform:uppercase;color:var(--gold);margin-bottom:var(--space-2);
}
.fw-head h2{font-size:clamp(21px, 1.1vw + 15px, 27px);line-height:1.35;color:var(--on-dark);margin-bottom:var(--space-3);}
.fw-head p{font-size:13.4px;color:var(--on-dark-dim);line-height:1.8;}
.fw-steps{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr);gap:var(--space-4);align-items:start;}
.fw-step{display:grid;gap:6px;align-content:start;}
.fw-top{display:flex;align-items:baseline;gap:10px;}
.fw-num{font-family:var(--font-mono);font-size:29px;font-weight:700;color:var(--gold);line-height:1;}
.fw-en{font-family:var(--font-mono);font-size:12.3px;letter-spacing:0.06em;color:var(--on-dark);}
.fw-title{font-size:14px;color:var(--on-dark);font-weight:600;}
.fw-tags{font-size:11.2px;color:var(--on-dark-dim);line-height:1.7;}
.fw-arrow{color:var(--gold);font-size:26px;line-height:1;align-self:center;opacity:.75;font-family:var(--font-mono);}

/* =====================  7. INSIGHTS  ===================== */
.insight-grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-4);}
.in-card{
  display:flex;flex-direction:column;color:inherit;
  background:var(--color-white);border:1px solid var(--line);
  transition:border-color .2s ease, transform .2s ease;
}
.in-card:hover{border-color:var(--gold-line);transform:translateY(-2px);}
.in-thumb{display:grid;grid-template-rows:minmax(0,1fr);aspect-ratio:16/9;overflow:hidden;background:var(--color-cream-2);}
.in-thumb img{grid-area:1/1;width:100%;height:100%;object-fit:cover;display:block;}
.in-tag{
  grid-area:1/1;align-self:start;justify-self:start;z-index:2;
  margin:10px;background:var(--color-navy);color:var(--on-dark);
  font-size:10.6px;letter-spacing:0.04em;padding:4px 9px;
}
.in-body{padding:var(--space-4) var(--space-4) var(--space-5);display:grid;gap:8px;}
.in-card h3{font-size:14.6px;font-weight:600;line-height:1.5;}
.in-card p{font-size:12.9px;color:var(--mist);line-height:1.7;}
.in-foot{
  font-family:var(--font-mono);font-size:11.2px;color:var(--mist-dim);
  display:flex;justify-content:space-between;gap:var(--space-3);margin-top:var(--space-2);
}

/* =====================  8. SHARING SESSIONS  ===================== */
.session-inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,0.72fr) minmax(0,1.9fr);gap:var(--space-7);align-items:center;}
.session-count{text-align:center;}
.session-count .sc-num{
  font-family:var(--font-mono);font-weight:700;color:var(--gold);
  font-size:clamp(50px, 5.4vw, 104px);line-height:1;letter-spacing:-0.01em;
}
.session-count .sc-label{font-size:13.4px;color:var(--ink);margin-top:var(--space-3);font-weight:600;}
.session-count .sc-sub{font-size:12.3px;color:var(--mist-dim);margin-top:2px;}
.session-photos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-3);}
.session-photos figure{margin:0;aspect-ratio:4/3;overflow:hidden;border:1px solid var(--line);}
.session-photos img{width:100%;height:100%;object-fit:cover;display:block;}

/* =====================  9. COMMUNITY  ===================== */
.community-inner{display:grid;grid-template-columns:250px minmax(0,1fr) 300px;gap:var(--space-7);align-items:center;}
.comm-features{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-5);}
.comm-feature{text-align:center;}
.comm-icon{
  width:46px;height:46px;border:1px solid var(--gold-line);border-radius:var(--radius-full);
  display:grid;place-items:center;margin:0 auto var(--space-3);color:var(--gold);
}
.comm-icon svg{width:20px;height:20px;display:block;stroke:currentColor;fill:none;stroke-width:1.5;}
.comm-feature h4{font-size:14.6px;font-weight:600;margin-bottom:6px;}
.comm-feature p{font-size:12.3px;color:var(--mist);line-height:1.7;}
.comm-card{
  background:var(--color-navy);border:1px solid var(--gold-line);
  padding:var(--space-6) var(--space-5);text-align:center;display:grid;gap:6px;
}
.comm-card h3{font-size:17.4px;color:var(--on-dark);font-weight:600;}
.comm-card .cc-sub{font-size:12.9px;color:var(--on-dark-dim);margin-bottom:var(--space-4);}
.comm-card .cc-num{
  font-family:var(--font-mono);font-size:clamp(32px,4.6vw,72px);
  font-weight:700;color:var(--gold);line-height:1;letter-spacing:-0.01em;
}
.comm-card .cc-num-label{font-size:12.3px;color:var(--on-dark-soft);}
.comm-card .cc-platforms{
  font-size:11.2px;color:var(--on-dark-dim);line-height:1.7;
  border-top:1px solid var(--line-dark);padding-top:var(--space-3);margin-top:var(--space-3);
}

/* =====================  RESPONSIVE  ===================== */
@media (max-width:1200px){
  .rail{grid-template-columns:minmax(0,1fr);gap:var(--space-6);}
  .rail-head{max-width:640px;}
  .rail-head p{margin-bottom:var(--space-4);}
  .service-grid-4{grid-template-columns:repeat(2,minmax(0,1fr));}
  .insight-grid-4{grid-template-columns:repeat(2,minmax(0,1fr));}
  .founder-inner{grid-template-columns:minmax(0,1fr);gap:var(--space-7);}
  .timeline{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:var(--space-5);}
  .tl-item:nth-child(3) .tl-line{display:none;}
  .fw-inner{grid-template-columns:minmax(0,1fr);gap:var(--space-6);}
  .fw-steps{grid-template-columns:minmax(0,1fr) minmax(0,1fr);row-gap:var(--space-6);}
  .fw-arrow{display:none;}
  .session-inner{grid-template-columns:minmax(0,1fr) minmax(0,1fr);row-gap:var(--space-6);}
  .session-photos{grid-column:1/-1;}
  .community-inner{grid-template-columns:minmax(0,1fr);gap:var(--space-6);}
  .comm-features{grid-template-columns:repeat(4,minmax(0,1fr));}
  .comm-card{max-width:420px;}
  .hero-media{height:min(64vh, 580px);}
}
@media (max-width:1024px){
  /* the extra step-in goes away here — from about this width the headline
     reaches across and pulling the portrait further left crowds its last word */
  .hero-media{margin-right:var(--edge);}
}
@media (max-width:768px){
  .band,.framework-band{padding:var(--space-8) 0;}
  /* hero stacks: photo on top, copy below — no text over the portrait */
  .hero-full{grid-template-rows:auto auto;min-height:0;align-items:stretch;padding-top:76px;}
  /* align-self:start is required: stretched into an auto row the photo would be
     sized by its intrinsic height and aspect-ratio would never apply */
  .hero-media{
    grid-area:1/1;width:100%;justify-self:stretch;
    align-self:start;height:auto;aspect-ratio:1090/1443;
    margin-right:0;max-width:520px;justify-self:center;
  }
  .hero-media img{object-fit:contain;object-position:center;}
  .hero-media::after{
    /* the 金爷 signature sits low in the frame, so the fade to the navy band
       below only touches the last few percent of the photo */
    background:linear-gradient(180deg, rgba(11,31,51,0) 0%, rgba(11,31,51,0) 94%, rgba(11,31,51,0.55) 98%, var(--color-navy) 100%);
  }
  .hero-inner{grid-area:2/1;padding-top:0;padding-bottom:var(--space-8);}
  .stat-strip .wrap{grid-template-columns:repeat(2,minmax(0,1fr));}
  .ss-item{border-bottom:1px solid var(--line);}
  .ss-item:nth-child(2n){border-right:none;}
  .ss-item:nth-last-child(-n+2){border-bottom:none;}
  .service-grid-4{grid-template-columns:minmax(0,1fr);}
  .svc-card{aspect-ratio:16/10;min-height:210px;}
  .case-grid-3{grid-template-columns:minmax(0,1fr);}
  .insight-grid-4{grid-template-columns:minmax(0,1fr);}
  .timeline{grid-template-columns:minmax(0,1fr);row-gap:var(--space-5);}
  .tl-line{display:none;}
  .tl-item{padding-right:0;}
  .fw-steps{grid-template-columns:minmax(0,1fr);}
  .session-inner{grid-template-columns:minmax(0,1fr);}
  .session-count{text-align:left;}
  .comm-features{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:var(--space-6);}
  .footer-baseline .wrap{justify-content:flex-start;}
  /* too little room to sit text over the group on a phone: show the photo
     uncropped and drop the headline into a solid block underneath */
  .event-banner{aspect-ratio:auto;grid-template-rows:auto auto;}
  .event-banner img{grid-area:1/1;width:100%;height:auto;aspect-ratio:4/3;}
  .event-banner-overlay{
    grid-area:2/1;background:var(--color-navy);
    padding:var(--space-6) var(--edge) var(--space-7);
  }
}
@media (max-width:390px){
  .session-photos{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
  .session-photos figure:last-child{display:none;}
}

/* =====================================================================
   COMMUNITY PAGE — free-to-join landing
   ===================================================================== */
.community-hero{
  background:var(--color-navy);color:var(--on-dark-soft);
  padding:calc(76px + var(--space-9)) 0 var(--space-9);
}
.community-hero .rh-en{
  font-family:var(--font-mono);font-size:11.8px;letter-spacing:0.2em;
  text-transform:uppercase;color:var(--gold);margin-bottom:var(--space-4);
}
.community-hero h1{
  font-size:clamp(30px, 2.6vw + 16px, 52px);line-height:1.2;
  color:var(--on-dark);margin-bottom:var(--space-5);
}
.community-hero .ch-lead{
  font-size:clamp(15px, 0.5vw + 13px, 18px);color:var(--on-dark-soft);
  line-height:1.9;max-width:680px;margin-bottom:var(--space-7);
}
/* the whole point of the page: joining costs nothing */
.free-badge{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--gold);color:var(--color-navy);
  font-weight:700;font-size:16.2px;letter-spacing:0.02em;
  padding:10px 22px;border-radius:var(--radius-sm);margin-bottom:var(--space-5);
}
.free-badge .fb-sub{
  font-family:var(--font-mono);font-size:11.2px;font-weight:400;
  letter-spacing:0.08em;text-transform:uppercase;opacity:.75;
}
.community-hero .ch-stats{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--space-5);max-width:900px;
  border-top:1px solid var(--line-dark);padding-top:var(--space-6);
}
.ch-stat .chs-num{
  font-family:var(--font-mono);font-size:clamp(30px,5vw,78px);
  font-weight:700;color:var(--gold);line-height:1;letter-spacing:-0.01em;
}
.ch-stat .chs-label{font-size:13.4px;color:var(--on-dark-soft);margin-top:8px;}

.audience-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4) var(--space-8);}
.audience-cols li{
  padding-left:24px;color:var(--mist);font-size:15.7px;line-height:1.7;
  list-style:none;position:relative;
}
.audience-cols li::before{content:'—';position:absolute;left:0;color:var(--gold);}

/* two ways in: scan the QR, or leave contact details */
.join-grid{display:grid;grid-template-columns:0.9fr 1.1fr;gap:var(--space-6);align-items:start;}
.join-card{background:var(--color-white);border:1px solid var(--line);padding:var(--space-7) var(--space-6);}
.join-card.is-primary{border-color:var(--gold-line);background:var(--gold-soft);}
.join-step{
  font-family:var(--font-mono);font-size:11.8px;letter-spacing:0.1em;
  text-transform:uppercase;color:var(--gold);margin-bottom:var(--space-3);
}
.join-card h3{font-size:20.2px;margin-bottom:var(--space-3);}
.join-card p{color:var(--mist);font-size:14.6px;line-height:1.8;margin-bottom:var(--space-5);}
.join-card .qr-big-block{margin:0;}
.join-note{
  font-size:13px;color:var(--mist-dim);line-height:1.7;
  border-top:1px solid var(--line);padding-top:var(--space-4);margin-top:var(--space-5);
}
.consult-footnote{
  border-top:1px solid var(--line);padding-top:var(--space-5);
  font-size:14px;color:var(--mist-dim);text-align:center;
}
.consult-footnote a{color:var(--gold);}
.consult-footnote a:hover{text-decoration:underline;}

@media (max-width:1200px){
  .join-grid{grid-template-columns:minmax(0,1fr);}
}
@media (max-width:768px){
  .community-hero{padding:calc(76px + var(--space-7)) 0 var(--space-7);}
  .community-hero .ch-stats{grid-template-columns:minmax(0,1fr);gap:var(--space-4);}
  .audience-cols{grid-template-columns:minmax(0,1fr);}
}

/* =====================================================================
   SERVICE DETAIL PAGES  (services/*.html)
   ===================================================================== */
.page-hero{
  background:var(--color-navy);color:var(--on-dark-soft);
  padding:calc(76px + var(--space-9)) 0 var(--space-9);
}
.page-hero .rh-en{
  font-family:var(--font-mono);font-size:11.8px;letter-spacing:0.2em;
  text-transform:uppercase;color:var(--gold);margin-bottom:var(--space-4);
}
.page-hero h1{
  font-size:clamp(30px, 2.6vw + 16px, 52px);line-height:1.2;
  color:var(--on-dark);margin-bottom:var(--space-5);
}
.page-hero .ph-lead{
  font-size:clamp(15px, 0.5vw + 13px, 18px);color:var(--on-dark-soft);
  line-height:1.9;max-width:720px;margin-bottom:var(--space-7);
}
.ph-meta{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--space-5) var(--space-6);
  border-top:1px solid var(--line-dark);padding-top:var(--space-6);
}
.phm-label{
  font-family:var(--font-mono);font-size:11.2px;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--gold);margin-bottom:8px;
}
.phm-val{font-size:14.8px;color:var(--on-dark);line-height:1.65;}

/* what the service solves */
.prob-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-6);}
.prob-card{border-top:2px solid var(--line-strong);padding-top:var(--space-5);}
.prob-card h3{font-size:18.4px;line-height:1.45;margin-bottom:var(--space-3);}
.prob-card p{color:var(--mist);font-size:15px;line-height:1.85;}

/* what is included */
.incl-list{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--space-6) var(--space-8);list-style:none;
}
.incl-item{border-top:1px solid var(--line-strong);padding-top:var(--space-4);}
.incl-item .ii-num{
  font-family:var(--font-mono);font-size:12px;letter-spacing:0.1em;
  color:var(--gold);margin-bottom:10px;
}
.incl-item h4{font-size:17.4px;line-height:1.45;margin-bottom:10px;}
.incl-item p{color:var(--mist);font-size:14.8px;line-height:1.85;}

/* how it works */
.flow-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-5);}
.flow-step{background:var(--color-white);border:1px solid var(--line);padding:var(--space-6) var(--space-5);}
.flow-step .fs-num{
  font-family:var(--font-mono);font-size:26px;font-weight:700;
  color:var(--gold);line-height:1;margin-bottom:var(--space-4);
}
.flow-step h4{font-size:16.6px;margin-bottom:10px;}
.flow-step p{color:var(--mist);font-size:14.2px;line-height:1.8;}

/* the promise / not-a-promise pair — the expectation-setting block */
.promise-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-6);}
.promise-card{background:var(--color-white);border:1px solid var(--line);padding:var(--space-7) var(--space-6);}
.promise-card.is-yes{border-color:var(--gold-line);background:var(--gold-soft);}
.promise-card h3{font-size:19.4px;margin-bottom:var(--space-5);}
.promise-card ul{list-style:none;}
.promise-card li{
  position:relative;padding-left:28px;margin-bottom:var(--space-4);
  color:var(--mist);font-size:15px;line-height:1.8;
}
.promise-card li:last-child{margin-bottom:0;}
.promise-card.is-yes li::before{content:'✓';position:absolute;left:0;top:0;color:var(--gold);font-weight:700;}
.promise-card.is-no li::before{content:'✕';position:absolute;left:0;top:0;color:var(--mist-dim);font-weight:700;}

/* who it fits */
.fit-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-6) var(--space-8);}
.fit-col ul{list-style:none;}
.fit-col li{
  position:relative;padding-left:24px;margin-bottom:var(--space-3);
  color:var(--mist);font-size:15.4px;line-height:1.75;
}
.fit-col li::before{content:'—';position:absolute;left:0;color:var(--line-strong);}
.fit-col h3{font-size:16px;letter-spacing:0.02em;margin-bottom:var(--space-5);padding-bottom:var(--space-3);border-bottom:1px solid var(--line);}
.fit-col h3.fit-yes{color:var(--gold);border-bottom-color:var(--gold-line);}
.fit-col h3.fit-no{color:var(--mist-dim);}
.fit-col h3.fit-yes + ul li::before{color:var(--gold);}

/* closing call to action */
.svc-cta{background:var(--color-navy);color:var(--on-dark-soft);padding:var(--space-9) 0;text-align:center;}
.svc-cta h2{color:var(--on-dark);margin-bottom:var(--space-4);}
.svc-cta p{max-width:640px;margin:0 auto var(--space-6);line-height:1.9;font-size:15.6px;}
.svc-cta-btns{display:flex;gap:var(--space-4);justify-content:center;flex-wrap:wrap;}

/* cross-links to the other three services */
.svc-other{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-5);}
.svc-other-card{
  display:block;background:var(--color-white);border:1px solid var(--line);
  padding:var(--space-5);transition:border-color .2s ease, transform .2s ease;
}
.svc-other-card:hover{border-color:var(--gold-line);transform:translateY(-2px);}
.svc-other-card .soc-en{
  font-family:var(--font-mono);font-size:10.8px;letter-spacing:0.1em;
  text-transform:uppercase;color:var(--gold);margin-bottom:8px;
}
.svc-other-card h4{font-size:17px;}
.svc-back{margin-top:var(--space-6);font-size:14.4px;}
.svc-back a{color:var(--mist);}
.svc-back a:hover{color:var(--gold);}
.section-head--tight{margin-bottom:var(--space-5);}

/* ---- services index ---- */
.svc-index-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-6);}
.svc-index-card{
  display:block;background:var(--color-white);border:1px solid var(--line);
  padding:var(--space-7) var(--space-6);transition:border-color .2s ease, transform .2s ease;
}
.svc-index-card:hover{border-color:var(--gold-line);transform:translateY(-2px);}
.svc-index-card .sic-num{
  font-family:var(--font-mono);font-size:12px;letter-spacing:0.12em;
  color:var(--gold);margin-bottom:var(--space-4);
}
.svc-index-card h3{font-size:22.4px;margin-bottom:6px;}
.svc-index-card .sic-en{
  font-family:var(--font-mono);font-size:11px;letter-spacing:0.1em;
  text-transform:uppercase;color:var(--mist-dim);margin-bottom:var(--space-5);
}
.svc-index-card p{color:var(--mist);font-size:15px;line-height:1.85;margin-bottom:var(--space-5);}
.sic-points{list-style:none;margin-bottom:var(--space-5);}
.sic-points li{
  position:relative;padding-left:22px;color:var(--ink);
  font-size:14.4px;line-height:1.7;margin-bottom:8px;
}
.sic-points li::before{content:'·';position:absolute;left:6px;color:var(--gold);font-weight:700;}
.sic-more{font-size:14.4px;color:var(--gold);font-weight:600;}

.pick-list{display:grid;gap:0;border-top:1px solid var(--line-strong);}
.pick-row{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-5);
  align-items:center;padding:var(--space-5) 0;border-bottom:1px solid var(--line);
}
.pk-if{color:var(--ink);font-size:16px;line-height:1.7;}
.pk-then{color:var(--gold);font-weight:600;font-size:15.4px;white-space:nowrap;}
.pk-then:hover{text-decoration:underline;}

.stance-box{
  background:var(--gold-soft);border:1px solid var(--gold-line);
  padding:var(--space-7) var(--space-7);max-width:900px;
}
.stance-box p{color:var(--ink);font-size:16.2px;line-height:2;}

@media (max-width:1200px){
  .prob-grid{grid-template-columns:minmax(0,1fr);gap:var(--space-5);}
  .flow-steps{grid-template-columns:repeat(2,minmax(0,1fr));}
  .svc-other{grid-template-columns:minmax(0,1fr);}
  .svc-index-grid{grid-template-columns:minmax(0,1fr);}
}
@media (max-width:768px){
  .page-hero{padding:calc(76px + var(--space-7)) 0 var(--space-7);}
  .ph-meta{grid-template-columns:minmax(0,1fr);gap:var(--space-4);}
  .incl-list{grid-template-columns:minmax(0,1fr);gap:var(--space-5);}
  .flow-steps{grid-template-columns:minmax(0,1fr);}
  .promise-grid{grid-template-columns:minmax(0,1fr);}
  .fit-grid{grid-template-columns:minmax(0,1fr);}
  .pick-row{grid-template-columns:minmax(0,1fr);gap:var(--space-2);}
  .pk-then{white-space:normal;}
  .stance-box{padding:var(--space-6) var(--space-5);}
}

/* ===== 问诊环节 .why-block —— 每张表单里的「點解想搵金爺？」 =====
   做成一个有底色的方框，跟上面那一串输入框分开：它问的不是资料，是原因，
   访客看到的时候需要慢一拍。勾选在上、留白在下——勾选让说不出口的人也能
   表达，留白给愿意展开的人。 */
.why-block{
  background:var(--gold-soft);border:1px solid var(--gold-line);
  padding:var(--space-6) var(--space-5);
  display:flex;flex-direction:column;gap:var(--space-4);
}
.why-head{
  font-size:19px;font-weight:600;color:var(--ink);line-height:1.4;
}
.why-intro{color:var(--mist);font-size:14.6px;line-height:1.8;margin:0;}
.why-label{
  font-family:var(--font-mono);font-size:12.3px;color:var(--gold);
  letter-spacing:0.06em;
}
.why-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px var(--space-5);}
.why-options--role{grid-template-columns:minmax(0,1fr);gap:10px;}
.why-opt{
  display:flex;align-items:flex-start;gap:9px;cursor:pointer;
  font-size:14.6px;line-height:1.55;color:var(--ink);margin-bottom:0;
}
.why-opt input{accent-color:var(--gold);width:15px;height:15px;flex-shrink:0;margin-top:3px;}
.why-ta-label{
  font-family:var(--font-mono);font-size:12.3px;color:var(--gold);
  letter-spacing:0.06em;margin-bottom:0;
}
.why-text{
  background:var(--card);border:1px solid var(--line-strong);color:var(--ivory);
  padding:14px 16px;font-size:15.1px;font-family:var(--font-body);line-height:1.75;
  min-height:110px;resize:vertical;width:100%;box-sizing:border-box;
}
.why-note{color:var(--mist-dim);font-size:12px;margin:0;}

/* WTDA 登记表：每一项都带标签，因为标签会随身份切换 */
.wj-group{display:flex;flex-direction:column;gap:7px;min-width:0;}
.wj-label{font-size:14px;color:var(--mist-dim);margin-bottom:0;line-height:1.5;}
.wtda-form .field{width:100%;box-sizing:border-box;min-width:0;}

@media (max-width:640px){
  .why-options{grid-template-columns:minmax(0,1fr);}
  .why-block{padding:var(--space-5) var(--space-4);}
}

/* 登记表从三项长到九项之后，右栏比左边的二维码卡高出一大截，左边就空了一大片。
   让二维码卡跟着滚动——填到一半想改主意扫码，不用再滚回去找。 */
@media (min-width:1001px){
  .join-grid--wtda .join-card.is-primary{position:sticky;top:96px;}
}