/* Hallmark · shape: Ledge hero · genre: editorial · theme: Grid (adapted to brand)
 * redesign: full · hero: Ledge · nav: single rule under a 72px bar · footer: catalogue columns
 * imagery: photographs, duotone · signature: the red rule that indexes every section
 * axes: light/grotesk-sans/cool · v2.0.0
 *
 * 这一层在 style.css 之后加载：先把旧令牌指回 tokens.css，再把形态（圆角/阴影/玻璃）
 * 收进系统，最后给出首页的新组件。旧页面无需改动即可继承新的 chrome 与控件。
 */

/* ── 1. 旧令牌指回新系统 ─────────────────────────────── */
:root{
  --ink: var(--color-ink);
  --muted: var(--color-muted);
  --yellow: var(--color-accent);
  --gold: var(--color-mark);
  --deep: var(--color-ink);
  --accent: var(--color-accent);
  --accent-soft: var(--color-paper-2);
  --fg: var(--color-ink);
  --line-strong: var(--color-rule);
  --cream: var(--color-paper);
  --paper: var(--color-paper);
  --line: var(--color-rule);
  --tint: var(--color-paper-2);
  /* 形态：方角、无阴影。旧组件立刻跟着变。 */
  --radius-pill: 0;
  --radius-sm: 0; --radius-md: 0; --radius-lg: 0; --radius-xl: 0;
  --shadow: none; --shadow-sm: none; --shadow-md: none;
  /* 旧字号梯度指到新阶梯 */
  --fs-2xs: var(--text-xs); --fs-xs: var(--text-sm); --fs-sm: var(--text-sm);
  --fs-body: var(--text-sm); --fs-md: var(--text-md); --fs-lg: var(--text-lg);
  --fs-xl: var(--text-lg); --fs-2xl: var(--text-xl); --fs-3xl: var(--text-xl);
  --fs-4xl: var(--text-2xl); --fs-5xl: var(--text-3xl);
}

html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + var(--space-lg))}
body{background:var(--color-paper);color:var(--color-ink);font-family:var(--font-body);font-size:var(--text-md);line-height:1.6}
h1,h2,h3,h4{max-width:none;font-family:var(--font-display);font-weight:var(--display-weight);letter-spacing:var(--tracking-display);line-height:1.1}
button,input,select,textarea{font-family:var(--font-body)}
:focus-visible,button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--color-focus);outline-offset:3px;border-color:var(--color-focus)}
::selection{background:var(--color-accent);color:var(--color-accent-ink)}
.container{max-width:var(--container);padding-inline:var(--gutter)}

/* ── 2. Chrome：一条 72px 的横条，底下一条规则线 ───────── */
.nav{position:fixed;inset:0 0 auto;z-index:var(--z-sticky-nav);background:var(--color-paper);
  border-bottom:var(--rule-hair) solid var(--color-rule);backdrop-filter:none;-webkit-backdrop-filter:none;
  box-shadow:none;transition:background var(--dur-short) var(--ease-out)}
.nav.scrolled{background:color-mix(in oklab, var(--color-paper) 94%, var(--color-ink));box-shadow:none}
.nav-inner{max-width:var(--container);height:var(--nav-h);padding-inline:var(--gutter);gap:var(--space-2xl)}
.brand img{width:auto;height:34px}
.brand-word{display:inline-flex;align-items:baseline;gap:var(--space-2xs);margin-left:var(--space-sm)}
.brand-word b{font-family:var(--font-display);font-size:1.125rem;font-weight:700;letter-spacing:-0.01em}
.brand-word i{font-style:normal;font-size:var(--text-xs);color:var(--color-muted);letter-spacing:.08em}
.nav-links{gap:var(--space-xl)}
.nav-item{font-size:var(--text-sm);font-weight:500;color:var(--color-ink-2);letter-spacing:0}
.nav-item:hover,.nav-item.active{color:var(--color-accent)}
.nav-item.active{font-weight:650}
.nav-right{gap:var(--space-md)}
.nav-pill{display:inline-flex;align-items:center;height:40px;padding:0 var(--space-lg);
  border:var(--rule-hair) solid var(--color-ink);border-radius:0;background:var(--color-ink);
  color:var(--color-paper);font-size:var(--text-sm);font-weight:600;transition:background var(--dur-micro) var(--ease-out)}
.nav-pill:hover{background:var(--color-accent)}
.lang-switch{display:inline-flex;align-items:center;height:40px;padding:0 var(--space-sm);border:0;
  border-radius:0;background:transparent;color:var(--color-muted);font-size:var(--text-sm);font-weight:600}
.lang-switch:hover{background:transparent;color:var(--color-accent);border:0}
.hamburger{padding:var(--space-2xs);border-radius:0}
.hamburger svg{width:22px;height:22px}
.mobile-panel{background:var(--color-paper);border-bottom:var(--rule-hair) solid var(--color-rule)}
.mobile-panel a{font-family:var(--font-display);font-size:var(--text-lg);font-weight:650}
.nav-menu{box-shadow:none;border-top:var(--rule-hair) solid var(--color-rule);background:var(--color-paper)}
.nav-menu-col a{font-weight:600}
.nav-menu-col a:hover{transform:none;color:var(--color-accent)}
main{margin-top:var(--nav-h)}

/* ── 3. 控件：方角、44px、红只铺在主动作上 ────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-sm);
  min-height:48px;padding:0 var(--space-xl);border:var(--rule-hair) solid var(--color-accent);
  border-radius:0;background:var(--color-accent);color:var(--color-accent-ink);
  font-size:var(--text-md);font-weight:600;letter-spacing:0;
  transition:background var(--dur-micro) var(--ease-out),color var(--dur-micro) var(--ease-out)}
.btn:hover{transform:none;background:var(--color-accent-deep);border-color:var(--color-accent-deep);color:var(--color-accent-ink)}
.btn.secondary,.btn.ghost{background:transparent;color:var(--color-ink);border-color:var(--color-ink)}
.btn.secondary:hover,.btn.ghost:hover{background:var(--color-ink);color:var(--color-paper)}
.btn.yellow{background:var(--color-accent);color:var(--color-accent-ink)}
.btn.yellow:hover{background:var(--color-accent-deep)}
.btn .arrow,.btn .link-arrow{display:none}
input,textarea,select{background:var(--color-paper);border:var(--rule-hair) solid var(--color-rule);
  border-radius:0;padding:var(--space-sm) var(--space-md);min-height:48px;color:var(--color-ink);font-size:var(--text-md)}
input::placeholder,textarea::placeholder{color:var(--color-muted)}
input:focus,textarea:focus,select:focus{outline:2px solid var(--color-focus);outline-offset:2px;border-color:var(--color-focus)}

/* ── 4. 排版：标题说自己的话，标签退成索引 ───────────── */
.h1{font-family:var(--font-display);font-size:var(--text-display);line-height:1.04;font-weight:var(--display-weight);letter-spacing:-0.02em;margin:0}
.h2{font-family:var(--font-display);font-size:var(--text-section);line-height:1.08;font-weight:var(--display-weight);letter-spacing:-0.018em;margin:0}
.h3{font-family:var(--font-display);font-size:var(--text-title);line-height:1.25;font-weight:650;letter-spacing:-0.012em;margin:0}
.lead{font-size:var(--text-lead);line-height:1.5;color:var(--color-ink-2);font-weight:400;max-width:52ch}
.text{font-size:var(--text-md);line-height:1.7;color:var(--color-muted)}
/* 旧的 eyebrow 是全大写宽字距小标：中文里散且重复标题。改成红方块索引。 */
.eyebrow{display:flex;align-items:center;gap:var(--space-sm);text-transform:none;letter-spacing:var(--tracking-label);
  font-size:var(--text-xs);font-weight:600;color:var(--color-muted);margin-bottom:var(--space-lg)}
.eyebrow::before{content:"";width:8px;height:8px;background:var(--color-accent);flex:none}
.eyebrow.on-dark{color:color-mix(in oklab, var(--color-paper) 78%, var(--color-ink))}
.eyebrow.on-gold{color:color-mix(in oklab, var(--color-paper) 82%, var(--color-ink))}
.section{padding:var(--section-gap) 0}
.section-sm{padding:var(--section-gap-s) 0}
.section.tint{background:var(--color-paper-2)}
.section.hh,.split.hh{min-height:0}
.section.hh{display:block;padding:var(--section-gap) 0}
.section-title-row{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);align-items:end;
  gap:var(--gap-columns);margin-bottom:var(--space-2xl);padding-bottom:var(--space-lg);
  border-bottom:var(--rule-hair) solid var(--color-rule)}
.section-title-row > div{grid-column:1}
.section-title-row > .link-arrow{grid-column:2;justify-self:end;align-self:end}
.section-sub{max-width:52ch;color:var(--color-muted);font-size:var(--text-md);line-height:1.7;margin-top:var(--space-md)}
.link-arrow{font-size:var(--text-sm);font-weight:600;letter-spacing:0;display:inline-flex;align-items:center;gap:var(--space-xs);
  color:var(--color-accent);border-bottom:var(--rule-hair) solid transparent;transition:border-color var(--dur-micro) var(--ease-out)}
.link-arrow:hover{gap:var(--space-xs);border-bottom-color:var(--color-accent)}
.reveal{opacity:1;transform:none;transition:none}
.reveal.seen{opacity:1;transform:none}

/* ── 5. 旧卡片：拆掉阴影、圆角、描边，只留规则线 ──────── */
.pillar-card,.line-card,.news-card,.spec-card,.person-card,.tool-card,.store-card,.price-card,
.award-card,.char-card,.career-item,.tier-item,.bf-cell,.system-cell,.plate,.cs-value,.promo{
  border-radius:0;box-shadow:none}
.pillar-card,.line-card,.news-card,.spec-card,.tool-card,.store-card,.price-card,.award-card{
  background:transparent;border:0;border-top:var(--rule-hair) solid var(--color-rule);padding-top:var(--space-lg)}
.pillar-card:hover,.line-card:hover,.news-card:hover,.person-card:hover,.tool-card:hover{transform:none;box-shadow:none}
.person-card{border-radius:0}
.person-photo,.cover,.plate,.news-card .cover{border-radius:0}
.person-photo img,.cover img{border-radius:0}
.page-hero,.page-hero-split{background:var(--color-ink);color:var(--color-paper);border-radius:0}
.footer{border-radius:0;box-shadow:none}
/* nav 在窄屏收口：64px 的列间距会把右侧按钮挤出视口 */
@media (max-width:60rem){
  .nav-inner{gap:var(--space-lg)}
  .nav-pill{height:36px;padding:0 var(--space-md);font-size:var(--text-xs)}
  .brand img{height:30px}
}
@media (max-width:40rem){
  .nav-inner{gap:var(--space-sm)}
  .nav-pill{display:none}
}


/* ── 6. 首页：人站在版面上 + 规则线索引的板块 ─────────────
 * 咨询业的产品就是人，首屏直接把联合创始人竖幅人像请上来：脚踩一条墨色地平线，
 * 左边大字主张、右边人，两栏共用地平线收口；照片一律不做灰度，人物保持本色。 */

.hb-hero{position:relative;min-height:calc(100svh - var(--nav-h));display:flex;align-items:flex-end;
  padding-block:var(--space-xl) 0;overflow:clip;border-bottom:2px solid var(--color-ink)}
.hb-hero-base{max-width:var(--container);margin-inline:auto;width:100%;padding-inline:var(--gutter)}
/* 文字与人像要"靠得住"，靠的不是把缝留小，是让右栏宽度由人像自己撑出来：
 * 原来 4fr 先摊开一块空位、图片再缩在里头居中，中间必然横着一条死白。
 * 改成 auto 后右栏=人像实际宽度，缝只剩一个栏距；再让标题按版面宽度（cqw）缩放，
 * 大标题会自己长到接近中线，人站在字旁而不是站在另一栏。 */
.hb-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:var(--space-md) clamp(1rem, 2vw, 2rem);align-items:end;height:100%;container-type:inline-size}
.hb-hero-copy{display:flex;flex-direction:column;padding-bottom:var(--space-xl)}
.hb-hero h1{margin:0;font-size:clamp(3.5rem, min(15cqw, 21vh), 15rem);line-height:0.96;letter-spacing:-0.035em;font-weight:700;
  text-wrap:balance}
@supports not (container-type: inline-size){
  .hb-hero h1{font-size:clamp(3.25rem, 9.6vw, 9.25rem)}
}
.hb-hero h1 em{font-style:normal;color:var(--color-accent)}
.hb-hero-lead{margin:var(--space-lg) 0 0;font-size:var(--text-lead);line-height:1.45;color:var(--color-ink-2);
  max-width:36ch}
.hb-hero-cta{display:flex;flex-wrap:wrap;gap:var(--space-sm);margin-top:var(--space-lg)}
.hb-hero-meta{display:flex;flex-wrap:wrap;gap:var(--space-sm) var(--space-2xl);
  margin:var(--space-xl) 0 0;padding:0;list-style:none}
.hb-hero-meta li{padding:0;font-size:var(--text-sm);color:var(--color-muted)}
.hb-hero-portrait{position:relative;margin:0;align-self:end;display:flex;
  justify-content:flex-end;align-items:flex-end;height:100%}
/* 人像高度按"视口减去导航与首屏内边距"算，而不是按视口百分比：
 * 86svh 在 730/640 这类矮屏上会超出可用高度，脚被视口底切掉一截，
 * 看着像图没放正。扣掉留白后，任何高度都刚好踩到底线。 */
.hb-hero-portrait img{display:block;width:auto;max-width:100%;height:min(calc(100svh - 8rem), 50rem);
  object-fit:contain;object-position:bottom center;filter:none;mix-blend-mode:normal}
.hb-hero-portrait figcaption{position:absolute;left:0;bottom:var(--space-xl);writing-mode:vertical-rl;
  font-size:var(--text-xs);letter-spacing:0.16em;color:var(--color-muted)}

/* 主张 + 档案：左边一句狠话（红竖线起头），右边五行身份字段
 * 原来的「七个数字刻度」是把公司做成招商展板，改成一份可核对的档案。 */
/* 首屏与第二屏之间必须有断层：首屏白底、人脚踩一条墨色地平线，第二屏换成纸灰底，
 * 颜色一跳，两屏不再糊成一片。 */
.hb-belief{background:var(--color-paper-2);padding:var(--section-gap-s) 0;
  border-bottom:var(--rule-hair) solid var(--color-rule)}
.hb-belief-inner{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter);
  display:grid;grid-template-columns:minmax(0,8fr) minmax(0,3.4fr);gap:var(--gap-columns) var(--space-3xl);
  align-items:start}
.hb-belief-main{position:relative;padding-left:var(--space-xl)}
.hb-belief-main::before{content:"";position:absolute;left:0;top:0.35em;bottom:0.2em;width:2px;background:var(--color-accent)}
.hb-belief-text{margin:0;font-family:var(--font-display);font-size:clamp(2.25rem, 3.2vw + 1rem, 4.25rem);
  line-height:1.08;font-weight:650;letter-spacing:-0.025em;text-wrap:balance}
.hb-belief-text em{font-style:normal;color:var(--color-accent)}
.hb-belief-note{margin:var(--space-lg) 0 0;font-size:var(--text-lead);line-height:1.5;color:var(--color-muted);
  max-width:38ch}
.hb-belief-facts{margin:0;padding:0;border-top:1px solid var(--color-ink)}
.hb-belief-row{display:grid;grid-template-columns:3.25rem minmax(0,1fr);gap:var(--space-md);
  align-items:baseline;padding:var(--space-sm) 0;border-bottom:var(--rule-hair) solid var(--color-rule)}
.hb-belief-row dt{font-size:var(--text-xs);letter-spacing:0.16em;color:var(--color-muted);
  font-variant-numeric:tabular-nums}
.hb-belief-row dd{margin:0;font-size:var(--text-sm);line-height:1.5;color:var(--color-ink)}

/* 板块通用头：标题压左，链接靠右，一条墨线收口 */
.hb-head{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:var(--gap-columns);
  align-items:end;padding-bottom:var(--space-lg);border-bottom:1px solid var(--color-ink);margin-bottom:var(--space-2xl)}
.hb-head h2{margin:0;font-size:var(--text-section);line-height:1.06;letter-spacing:-0.018em}
.hb-head-desc{margin-top:var(--space-md);color:var(--color-muted);max-width:52ch;font-size:var(--text-md)}
.hb-head-action{justify-self:end;align-self:end;padding-bottom:var(--space-2xs)}

/* 三大板块 */
.hb-pillars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap-columns)}
.hb-pillar{display:flex;flex-direction:column;gap:var(--space-sm);padding-top:var(--space-lg);
  border-top:2px solid var(--color-ink);color:inherit;transition:border-color var(--dur-short) var(--ease-out)}
.hb-pillar:hover{border-top-color:var(--color-accent)}
.hb-pillar-no{font-family:var(--font-outlier);font-size:var(--text-sm);color:var(--color-accent);font-variant-numeric:tabular-nums}
.hb-pillar-verb{font-size:var(--text-sm);color:var(--color-muted);letter-spacing:var(--tracking-label)}
.hb-pillar h3{margin:0;font-size:var(--text-2xl);line-height:1.15;letter-spacing:-0.015em}
.hb-pillar p{margin:0;font-size:var(--text-md);line-height:1.65;color:var(--color-ink-2);max-width:34ch}
.hb-pillar .hb-go{margin-top:auto;padding-top:var(--space-md);font-size:var(--text-sm);font-weight:600;color:var(--color-accent)}

/* 四条服务线：四列清单 */
.hb-lines{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap-columns)}
.hb-line{display:flex;flex-direction:column;gap:var(--space-sm);padding-top:var(--space-lg);
  border-top:var(--rule-hair) solid var(--color-rule);color:inherit;transition:border-color var(--dur-short) var(--ease-out)}
.hb-line:hover{border-top-color:var(--color-accent)}
.hb-line-key{font-family:var(--font-outlier);font-size:var(--text-xs);color:var(--color-accent);letter-spacing:var(--tracking-label)}
.hb-line h3{margin:0;font-size:var(--text-lg);line-height:1.25;font-weight:650;letter-spacing:-0.01em}
.hb-line-audience{margin:0;font-size:var(--text-xs);color:var(--color-muted);line-height:1.5}
.hb-line ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:var(--space-2xs)}
.hb-line li{font-size:var(--text-sm);line-height:1.5;color:var(--color-ink-2);padding-left:var(--space-sm);position:relative}
.hb-line li::before{content:"";position:absolute;left:0;top:0.62em;width:4px;height:1px;background:var(--color-rule-strong)}
.hb-line-result{margin-top:auto;padding-top:var(--space-md);font-size:var(--text-xs);color:var(--color-muted);
  border-top:var(--rule-hair) solid var(--color-rule);line-height:1.5}

/* 分屏：八列文字 + 四列图，图做灰度 */
.hb-split{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--space-3xl);align-items:center}
.hb-split.reverse .hb-split-figure{order:-1}
.hb-split-text h2{margin:0 0 var(--space-md);font-size:var(--text-section);line-height:1.06;letter-spacing:-0.018em}
.hb-split-text > p{margin:0;color:var(--color-muted);max-width:52ch;line-height:1.7}
.hb-steps{list-style:none;margin:var(--space-xl) 0 0;padding:0;display:flex;flex-direction:column}
.hb-steps li{display:grid;grid-template-columns:var(--space-xl) minmax(0,1fr);gap:var(--space-md);
  padding:var(--space-md) 0;border-top:var(--rule-hair) solid var(--color-rule)}
.hb-steps b{font-family:var(--font-outlier);font-size:var(--text-sm);color:var(--color-accent);font-weight:600;font-variant-numeric:tabular-nums}
.hb-steps strong{display:block;font-size:var(--text-md);font-weight:650;margin-bottom:var(--space-3xs)}
.hb-steps span{display:block;font-size:var(--text-sm);color:var(--color-muted);line-height:1.6}
.hb-split-figure{margin:0;position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--color-paper-2)}
.hb-split-figure img{width:100%;height:100%;object-fit:cover;filter:none}

/* 团队 */
.hb-team{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap-columns)}
.hb-person{color:inherit;display:flex;flex-direction:column;gap:var(--space-md)}
.hb-person-photo{aspect-ratio:1/1;overflow:hidden;background:var(--color-paper-2)}
.hb-person-photo img{width:100%;height:100%;object-fit:cover;filter:none}
.hb-person-name{font-size:var(--text-md);font-weight:650}
.hb-person-role{font-size:var(--text-xs);color:var(--color-muted);line-height:1.5}

/* 动态：三列，封面小图 */
.hb-news{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap-columns)}
.hb-news-item{display:flex;flex-direction:column;gap:var(--space-sm);padding-top:var(--space-lg);
  border-top:var(--rule-hair) solid var(--color-rule);color:inherit}
.hb-news-cover{aspect-ratio:16/10;overflow:hidden;background:var(--color-paper-3)}
.hb-news-cover img{width:100%;height:100%;object-fit:cover;filter:none}
.hb-news-meta{font-family:var(--font-outlier);font-size:var(--text-xs);color:var(--color-muted);
  font-variant-numeric:tabular-nums;letter-spacing:0.02em}
.hb-news-item h3{margin:0;font-size:var(--text-lg);line-height:1.3;font-weight:650;letter-spacing:-0.01em}
.hb-news-item p{margin:0;font-size:var(--text-sm);line-height:1.6;color:var(--color-muted)}

/* 收尾：墨色整幅 */
.hb-cta{background:var(--color-ink);color:var(--color-paper);padding:var(--section-gap) 0}
.hb-cta-inner{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter);
  display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:var(--gap-columns);align-items:end}
.hb-cta h2{margin:0;font-size:var(--text-section);line-height:1.06;letter-spacing:-0.02em;color:var(--color-paper)}
.hb-cta p{margin:var(--space-md) 0 0;color:color-mix(in oklab, var(--color-paper) 72%, var(--color-ink));max-width:46ch;line-height:1.65}
.hb-cta-action{justify-self:end;align-self:end}
.hb-cta .btn{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-accent-ink);min-width:200px}
.hb-cta .btn:hover{background:var(--color-paper);border-color:var(--color-paper);color:var(--color-ink)}

/* 首页在窄屏的顺序与字号 */
/* 首屏掉成单栏的临界点比其它板块更靠下：960 这种矮宽屏还撑得住左右分栏，
 * 一旦提前进单栏，人像只能拿高度换算宽度，被压成细细一条——"别的端看着不正常"就在这。 */
@media (max-width:59.9375rem){
  .hb-hero{min-height:auto;padding-block:var(--space-lg) 0}
  .hb-hero-grid{grid-template-columns:minmax(0,1fr);gap:var(--space-md)}
  .hb-hero h1{font-size:clamp(2.6rem, 9.2vw, 5.5rem)}
  .hb-hero-copy{padding-bottom:var(--space-md)}
  .hb-hero-portrait{height:auto;flex-direction:column;align-items:center;justify-content:flex-end;
    margin:var(--space-sm) 0 0;gap:var(--space-xs)}
  /* 单栏改由宽度说话：人像按栏宽站定，高度自己长，不再被高度上限掐成一道细条。
   * 同时给高度留个上限，平板竖屏才不会被人像一个人吃掉整屏。 */
  .hb-hero-portrait img{width:auto;height:auto;max-width:min(100%, 22rem);
    max-height:clamp(14rem, 50svh, 34rem)}
  .hb-hero-portrait figcaption{position:static;writing-mode:horizontal-tb;text-align:center;
    letter-spacing:0.14em}
}
@media (max-width:64rem){
  .hb-belief-inner{grid-template-columns:minmax(0,1fr);gap:var(--space-2xl)}
  .hb-belief-main{padding-left:var(--space-lg)}
  .hb-pillars,.hb-lines,.hb-team,.hb-news{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hb-head{grid-template-columns:minmax(0,1fr)}
  .hb-head-action{justify-self:start}
  .hb-split{grid-template-columns:minmax(0,1fr);gap:var(--space-2xl)}
  .hb-split.reverse .hb-split-figure{order:0}
  .hb-split-figure{aspect-ratio:16/10}
  .hb-cta-inner{grid-template-columns:minmax(0,1fr);gap:var(--space-xl)}
  .hb-cta-action{justify-self:start}
}
@media (max-width:40rem){
  .hb-pillars,.hb-lines,.hb-team,.hb-news{grid-template-columns:1fr}
  .hb-belief-text{font-size:clamp(1.85rem, 7.4vw, 2.5rem)}
  .hb-belief-note{font-size:var(--text-md)}
  .hb-hero h1{font-size:clamp(2.35rem, 10.5vw, 3.4rem)}
  .hb-hero-lead{font-size:var(--text-md);max-width:none}
  .hb-hero-cta{margin-top:var(--space-md)}
  .hb-hero-meta{margin-top:var(--space-lg)}
  .hb-hero-portrait img{width:auto;height:auto;max-width:min(100%, 14rem);max-height:35svh}
  .hb-hero-meta li{border-right:0;padding-right:0;margin-right:0}
}
/* 矮台账屏（笔记本 1280×640 / 150% 缩放后的 1152×620 这类）：
 * 高度不够时先把首屏内边距和段间距收掉，再谈人像大小——否则左栏文字先顶出视口，
 * 人像跟着被推到屏幕下沿，脚就露不出来。 */
@media (max-height:44rem) and (min-width:64rem){
  .hb-hero{padding-block:var(--space-md) 0}
  .hb-hero-copy{padding-bottom:var(--space-md)}
  .hb-hero-lead{margin-top:var(--space-md)}
  .hb-hero-cta{margin-top:var(--space-md)}
  .hb-hero-meta{margin-top:var(--space-md)}
}
/* 横过来的手机（矮而宽）：高度只剩三百多，一旦堆叠必然顶出一屏，
 * 这里回到左右分栏，标题占左、人靠右，首屏才装得下。 */
@media (max-height:34rem) and (min-width:40rem){
  .hb-hero{min-height:auto;padding-block:var(--space-sm) 0}
  .hb-hero-grid{grid-template-columns:minmax(0,1fr) auto;gap:0 var(--space-md)}
  .hb-hero-copy{padding-bottom:var(--space-sm)}
  .hb-hero h1{font-size:clamp(1.8rem, 6.3vw, 3rem)}
  .hb-hero-lead{margin-top:var(--space-sm);font-size:var(--text-sm);line-height:1.4;max-width:38ch}
  .hb-hero-cta{margin-top:var(--space-sm);gap:var(--space-xs)}
  .hb-hero-meta{margin-top:var(--space-sm)}
  .hb-hero-portrait{height:auto;flex-direction:row;align-items:flex-end;justify-content:flex-end;
    margin:0;gap:0}
  .hb-hero-portrait img{width:auto;height:min(62svh, 17rem);max-width:none;max-height:none}
  .hb-hero-portrait figcaption{position:static;order:-1;writing-mode:vertical-rl;
    text-orientation:mixed;text-align:end;margin:0 var(--space-xs) 0 0;letter-spacing:0.12em}
}


/* 控件状态：按下有回应，禁用明确不可点 */
.btn:active{background:var(--color-accent-deep);border-color:var(--color-accent-deep);transform:none}
.btn.secondary:active,.btn.ghost:active{background:var(--color-ink);color:var(--color-paper)}
.btn:disabled,.btn[aria-disabled="true"]{background:var(--color-rule-strong);border-color:var(--color-rule-strong);
  color:var(--color-paper);cursor:not-allowed}
.nav-item:active,.link-arrow:active,.hb-pillar:active,.hb-line:active{color:var(--color-accent)}

/* ── 7. 内页首屏：与首页同一语汇（纸底、墨线、大标题、右侧刻度） ──
 * 旧首屏是一整块深色 + 红色径向光斑，与首页的纸底完全两套。这里统一成一套：
 * 深色只留给页面收尾与页脚，首屏回到纸面。 */
.page-hero,.page-hero.deep,.deep{background:var(--color-paper);color:var(--color-ink);
  padding:calc(var(--space-4xl) + var(--space-lg)) 0 var(--space-2xl);overflow:visible;min-height:0;border-bottom:var(--rule-hair) solid var(--color-rule)}
.deep::before{display:none}
.deep .eyebrow,.page-hero .eyebrow{color:var(--color-muted)}
.deep .h1,.page-hero .h1{color:var(--color-ink)}
.deep .lead,.page-hero .lead{color:var(--color-ink-2)}
.page-hero-split{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,3fr);gap:var(--space-3xl);
  align-items:end;background:transparent;color:inherit}
.page-hero .h1{font-size:clamp(2.5rem,5.6vw,4.75rem);line-height:1.02;letter-spacing:-0.028em;max-width:18ch}
.page-hero .lead{margin-top:var(--space-lg);max-width:46ch;font-size:var(--text-lead);line-height:1.5}
.page-hero .hero-cta,.page-hero .cta-row{display:flex;flex-wrap:wrap;gap:var(--space-sm);margin-top:var(--space-xl)}
.deep .btn.ghost,.page-hero .btn.ghost{background:transparent;border-color:var(--color-ink);color:var(--color-ink)}
.deep .btn.ghost:hover,.page-hero .btn.ghost:hover{background:var(--color-ink);color:var(--color-paper)}
.hero-mini-stats{border-top:1px solid var(--color-ink);padding-top:0;display:flex;flex-direction:column}
.hero-mini-stats > div{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-md);
  padding:var(--space-sm) 0;border-bottom:var(--rule-hair) solid var(--color-rule)}
.hero-mini-stats > div b{font-family:var(--font-display);font-size:var(--text-xl);line-height:1;
  font-variant-numeric:tabular-nums;letter-spacing:-0.01em;color:var(--color-ink)}
.hero-mini-stats > div span{font-size:var(--text-xs);color:var(--color-muted);text-align:right;line-height:1.4}
@media (max-width:64rem){
  .page-hero{padding:calc(var(--space-3xl) + var(--space-lg)) 0 var(--space-xl)}
  .page-hero-split{grid-template-columns:minmax(0,1fr);gap:var(--space-xl)}
  .hero-mini-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--space-lg)}
}

/* 旧首屏在 .page-hero.deep 上写死了白字（0,3,0），这里用同级选择器盖回纸面可读性 */
.page-hero.deep .h1{color:var(--color-ink)}
.page-hero.deep .lead{color:var(--color-ink-2)}
.page-hero.deep .eyebrow{color:var(--color-muted)}
.page-hero.deep .hero-mini-stats{border-top-color:var(--color-ink)}
.page-hero.deep .hero-mini-stats b{color:var(--color-ink)}
.page-hero.deep .hero-mini-stats span{color:var(--color-muted)}
.page-hero.deep .hero-mini-stats > div{border-bottom-color:var(--color-rule)}

/* 小字号金色在纸面上的对比度不足 3:1（导航序号、获奖年份、联系表单标签），
 * 统一回到强调红/正文灰；金色只留给深色收尾区。 */
.pillar-no{color:var(--color-accent);font-variant-numeric:tabular-nums;letter-spacing:0.12em}
.award-year{color:var(--color-accent)}
.cs-label{color:var(--color-muted);font-size:var(--text-xs);letter-spacing:0.08em}

/* 工具卡片的编号代替旧的表情图标：同一套等宽数字，读起来像目录而不是贴纸 */
.tool-card-icon{font-family:var(--font-display);font-size:var(--text-sm);font-weight:400;
  letter-spacing:0.08em;color:var(--color-accent);font-variant-numeric:tabular-nums;line-height:1}

/* ============================================================
   超级会员 / 服务成果（新增页专用，2026-11）
   全部复用 tokens 令源，不引入新色值
   ============================================================ */
.hb-table-wrap{overflow-x:auto;margin-top:var(--space-xl)}
.hb-rights{width:100%;border-collapse:collapse;font-size:var(--text-sm);line-height:1.6}
.hb-rights th,.hb-rights td{padding:var(--space-md) var(--space-sm);
  border-bottom:var(--rule-hair) solid var(--color-rule);text-align:left;vertical-align:top}
.hb-rights thead th{font-size:var(--text-xs);font-weight:600;letter-spacing:var(--tracking-label);
  color:var(--color-muted);border-bottom:var(--rule-hair) solid var(--color-rule-strong);white-space:nowrap}
.hb-rights tbody tr:hover{background:var(--color-paper-2)}
.hb-rights td.c{text-align:center;white-space:nowrap;font-variant-numeric:tabular-nums}
.hb-rights td:first-child{max-width:52ch}

.hb-tags{display:flex;flex-wrap:wrap;gap:var(--space-sm);list-style:none;padding:0;margin:var(--space-xl) 0 0}
.hb-tags li{padding:var(--space-2xs) var(--space-md);border:var(--rule-hair) solid var(--color-rule);
  background:var(--color-paper);color:var(--color-ink-2);font-size:var(--text-sm)}

.hb-faq{display:flex;flex-direction:column;gap:var(--space-lg);margin:var(--space-xl) 0 0}
.hb-faq-item{padding-top:var(--space-md);border-top:var(--rule-hair) solid var(--color-rule)}
.hb-faq-item dt{margin:0 0 var(--space-2xs);font-size:var(--text-md);font-weight:650}
.hb-faq-item dd{margin:0;color:var(--color-muted);font-size:var(--text-sm);line-height:1.7;max-width:72ch}

.hb-cases{display:flex;flex-direction:column;margin-top:var(--space-xl)}
.hb-case{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:var(--space-2xl);align-items:start;padding-top:var(--space-xl);
  border-top:var(--rule-hair) solid var(--color-rule-strong)}
.hb-case + .hb-case{margin-top:var(--space-2xl)}
.hb-case-figure{margin:0;aspect-ratio:4/3;overflow:hidden;background:var(--color-paper-2)}
.hb-case-figure img{width:100%;height:100%;object-fit:cover;filter:none}
.hb-case-body{display:flex;flex-direction:column;gap:var(--space-xs)}
.hb-case-meta{display:flex;align-items:baseline;gap:var(--space-sm)}
.hb-case-no{font-family:var(--font-outlier);font-size:var(--text-sm);color:var(--color-accent);
  font-variant-numeric:tabular-nums}
.hb-case-label{font-size:var(--text-xs);color:var(--color-muted);letter-spacing:var(--tracking-label)}
.hb-case h3{margin:0;font-size:var(--text-2xl);line-height:1.15;letter-spacing:-0.015em}
.hb-case-list{list-style:none;padding:0;margin:0 0 var(--space-md);display:flex;flex-direction:column;gap:var(--space-2xs)}
.hb-case-list li{position:relative;padding-left:var(--space-md);font-size:var(--text-sm);
  line-height:1.6;color:var(--color-ink-2)}
.hb-case-list li::before{content:"";position:absolute;left:0;top:.66em;width:5px;height:1px;
  background:var(--color-rule-strong)}
.price-card .hb-case-list{margin:var(--space-md) 0 0}
.price-card .hb-case-list li{font-size:var(--text-xs);line-height:1.55}

@media (max-width:900px){
  .hb-case{grid-template-columns:minmax(0,1fr);gap:var(--space-lg)}
  .hb-case-figure{aspect-ratio:16/10}
}

.hb-doc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--space-lg);margin:var(--space-xl) 0 0}
.hb-doc-grid figure{margin:0}
.hb-doc-grid img{display:block;width:100%;height:auto;background:var(--color-paper-2);
  border:var(--rule-hair) solid var(--color-rule)}
.hb-doc-grid figcaption{margin-top:var(--space-2xs);font-size:var(--text-xs);
  color:var(--color-muted);letter-spacing:var(--tracking-label)}
@media (max-width:900px){.hb-doc-grid{grid-template-columns:minmax(0,1fr);gap:var(--space-md)}}

/* 首页 03 两条进路 */
.hb-offer{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--space-lg);margin-top:var(--space-xl)}
.hb-offer-card{display:flex;flex-direction:column;gap:var(--space-xs);
  padding:var(--space-xl) var(--space-lg);border:var(--rule-hair) solid var(--color-rule-strong);
  background:var(--color-paper);color:inherit;text-decoration:none;
  transition:background .18s ease,border-color .18s ease}
.hb-offer-card:hover{background:var(--color-paper-2);border-color:var(--color-ink)}
.hb-offer-label{font-size:var(--text-xs);letter-spacing:var(--tracking-label);color:var(--color-accent)}
.hb-offer-card h3{margin:0;font-size:var(--text-2xl);line-height:1.2;letter-spacing:-0.015em}
.hb-offer-card p{margin:0;color:var(--color-muted);font-size:var(--text-sm);line-height:1.7}
.hb-offer-card ul{list-style:none;padding:0;margin:var(--space-xs) 0 0;
  display:flex;flex-direction:column;gap:var(--space-2xs)}
.hb-offer-card li{position:relative;padding-left:var(--space-md);font-size:var(--text-sm);
  line-height:1.6;color:var(--color-ink-2)}
.hb-offer-card li::before{content:"";position:absolute;left:0;top:.66em;width:5px;height:1px;
  background:var(--color-rule-strong)}
.hb-offer-cta{margin-top:var(--space-sm);font-size:var(--text-sm);font-weight:650;
  border-bottom:var(--rule-hair) solid var(--color-ink);align-self:flex-start;padding-bottom:2px}
@media (max-width:900px){.hb-offer{grid-template-columns:minmax(0,1fr);gap:var(--space-md)}}

/* hb-rights 手机端横向滚动，避免列被挤压到不可读 */
@media (max-width:640px){
  .hb-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .hb-rights{min-width:560px}
  .hb-rights th,.hb-rights td{padding:var(--space-sm) var(--space-2xs)}
}