/* ─────────────────────────────────────────────────────────────────────
   设计系统
   配色沿用自有蓝+金方案；字体系统栈 + 宋体大标题。零境外 CDN。
   语义变量随 data-theme 切换，组件本身不感知深浅色。
   ───────────────────────────────────────────────────────────────────── */
/* 自托管，不走任何境外 CDN。子集由 tools/build-fonts.py 从源码提取字符生成，
   改文案后重跑即可，不会漏字。Noto Serif SC 为 SIL OFL 1.1 许可，商用与网页嵌入均免费。 */
/* ── 自托管字体 ───────────────────────────────────────────────────────
   苹方、SF Pro、Segoe UI 都是各自系统的专有字体，不能分发；只要依赖系统字体，
   各端字形必然不同。因此四款全部自托管，靠逐字符回退与 unicode-range 分工：
     数字 Manrope → 英文 Inter → 中文 MiSans（正文）/ Noto Serif SC（大标题）
   构建见 tools/build-fonts.py，已接入打包流程，改文案会自动重生成子集。
   ─────────────────────────────────────────────────────────────────── */
@font-face{font-family:'HA Digits';font-weight:400 700;font-display:swap;
  src:url('assets/fonts/manrope-digits.woff2') format('woff2');
  unicode-range:U+0030-0039,U+002B,U+002D,U+002C,U+002E,U+0025}

@font-face{font-family:'HA Sans';font-weight:100 900;font-display:swap;
  src:url('assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range:U+0020-007E,U+00A0-00FF,U+2018-201F,U+2022,U+2026,U+2030,U+2039-203A,U+20AC,U+2122}

@font-face{font-family:'HA CJK';font-weight:400;font-display:swap;
  src:url('assets/fonts/misans-sc-400.woff2') format('woff2')}
@font-face{font-family:'HA CJK';font-weight:500 700;font-display:swap;
  src:url('assets/fonts/misans-sc-600.woff2') format('woff2')}

@font-face{font-family:'HA Serif';font-weight:600;font-display:swap;
  src:url('assets/fonts/noto-serif-sc.woff2') format('woff2')}

:root{
  --navy-900:#061627; --navy-800:#0b2340; --navy-700:#143b64;
  --blue-600:#24578c; --blue-500:#2f6fb0; --blue-400:#5292cc;
  --blue-100:#dceaf7; --blue-50:#f2f7fc;
  --gold:#c8952f; --gold-lift:#dda746; --gold-soft:#f0e0c0;

  --wrap:1140px; --gut:clamp(20px,5vw,56px); --bar-h:72px;
  /* 字体回退是逐字符的：拉丁字体必须排在中文字体之前，
     否则 Windows 上英文会被 Microsoft YaHei 的拉丁字形接管，字形偏差且发虚。 */
  --sans:'HA Digits','HA Sans','HA CJK',
         -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  /* 大标题自托管子集，避免 Windows 一路降级到 SimSun——
     SimSun 是为小字号做的点阵微调字体，60px 下笔画发飘。 */
  --serif:'HA Digits','HA Sans','HA Serif',
          Georgia,"Songti SC",SimSun,serif;
  --ease:cubic-bezier(.22,.61,.36,1);
}
html[data-theme="dark"]{
  --bg:#061627; --surface:#0b2340; --surface-2:#0f2c4f;
  --text:#e9f0f8; --text-soft:#9fb6ce; --text-dim:#6f8aa6;
  --line:rgba(255,255,255,.13); --line-strong:rgba(255,255,255,.26);
  --hero-scrim:linear-gradient(100deg,rgba(4,14,26,.94) 0%,rgba(4,16,30,.80) 38%,rgba(4,16,30,.34) 68%,rgba(4,16,30,.55) 100%);
  --card:rgba(255,255,255,.05); --card-line:rgba(255,255,255,.14);
  --shadow:0 24px 60px rgba(0,0,0,.5);
  --band-tint:linear-gradient(to bottom,rgba(6,22,39,.62) 0,rgba(6,22,39,.22) 46%,rgba(6,22,39,.68) 100%);
}
html[data-theme="light"]{
  --bg:#ffffff; --surface:#f6f9fc; --surface-2:#eef4fa;
  --text:#0f1f2e; --text-soft:#4a5c6e; --text-dim:#7c8ea1;
  --line:#dfe6ee; --line-strong:#c3d2e0;
  /* 竖向主导，横向只做很轻的补充。早先是纯横向铺满，结果画面顶部那片天空
     正好落在白纱最浓的一端，被洗成近白色——底图换了也看不出来。
     文字带在 36%–62% 之间，把保护集中到那一段，顶部完全放开留住蓝天：
     标题对比度反而从 8.79 升到 11.04，天空 rgb(165,206,244) → rgb(100,171,236)。*/
  --hero-scrim:
    linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.04) 20%,rgba(255,255,255,.55) 36%,rgba(255,255,255,.66) 62%,rgba(255,255,255,.34) 100%),
    linear-gradient(100deg,rgba(255,255,255,.60) 0%,rgba(255,255,255,.34) 32%,rgba(246,250,253,.08) 62%,rgba(232,242,251,.04) 100%);
  --card:#fff; --card-line:#dfe6ee;
  --shadow:0 20px 46px rgba(11,35,64,.12);
  --band-tint:linear-gradient(to bottom,rgba(255,255,255,.42) 0,rgba(220,234,247,.14) 46%,rgba(255,255,255,.5) 100%);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
/* 顶栏是 position:fixed，锚点若直接落到元素顶边，标题会被压在栏下。
   统一让开一个栏高再多留一点余地。 */
:target{scroll-margin-top:calc(var(--bar-h) + 18px)}
body{margin:0;font-family:var(--sans);background:var(--bg);color:var(--text);
  font-variant-numeric:tabular-nums;
  font-size:16px;line-height:1.75;-webkit-font-smoothing:antialiased;
  transition:background .35s var(--ease),color .35s var(--ease)}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
html[data-lang="zh"] .en{display:none}
html[data-lang="en"] .zh{display:none}

/* ── 顶栏 ─────────────────────────────────────────────────────────── */
/* 内容常显，只有底板随滚动淡入 */
.topbar{position:fixed;inset:0 0 auto;height:var(--bar-h);z-index:70;
  display:flex;align-items:center}
.topbar > .wrap{max-width:1460px}
.topbar::before{content:"";position:absolute;inset:0;z-index:-1;
  background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:saturate(150%) blur(14px);
  border-bottom:1px solid var(--line);
  opacity:0;transition:opacity .3s var(--ease)}
.topbar.on::before{opacity:1}
/* Hero 上方尚无底板时，给文字加一点压边保证可读 */
.topbar:not(.on) .utils{text-shadow:0 1px 12px rgba(0,0,0,.45)}
html[data-theme="light"] .topbar:not(.on) .utils{text-shadow:0 1px 10px rgba(255,255,255,.9)}
.barinner{display:flex;align-items:center;gap:26px;width:100%}
/* 品牌区拆成两个链接：RBI 标识跳全球站，华安德跳首页。
   两者的相对大小沿用原合成版的比例——标识高为文字块的 62%；
   中间 26px 是品牌规范 §2.2.1 的净空（≥ 标识宽度的 20%，此处标识约 120px 宽）。
   深浅各一版：浅色版 RBI 标识为官方蓝，深色版为白色，均无底板。 */
.brand{display:flex;align-items:center;flex:none;gap:26px}
.brand a{display:block;transition:opacity .18s var(--ease)}
.brand a:hover{opacity:.72}
.brand .wordmark{height:42px;width:auto;display:block}
.brand .mark{height:26px;width:auto;display:block}
html[data-theme="dark"] .lg-light{display:none}
html[data-theme="light"] .lg-dark{display:none}
@media(max-width:700px){
  .brand{gap:16px}
  .brand .wordmark{height:32px}
  .brand .mark{height:20px}
}
/* 幽灵导航：不可见，只用来量顶栏里每一项的最终落点 */
.ghostnav{display:flex;gap:4px;margin:0 auto;visibility:hidden;flex:0 1 auto;min-width:0}
.ghostnav a{padding:8px 13px;font-size:15px;white-space:nowrap}
/* 当前栏目。只在 plain / menu 两种模式下有意义——首页用转盘，
   .ghostnav 是隐形测量替身，标记出来反而会在测量时多占宽度。 */
html[data-nav="plain"] .ghostnav a[aria-current],
html[data-nav="menu"]  .ghostnav a[aria-current]{color:var(--gold)}
.utils{display:flex;align-items:center;gap:10px;flex:none;margin-left:auto}
.iconbtn{width:36px;height:36px;border:1px solid var(--line);background:none;color:var(--text);
  cursor:pointer;display:grid;place-items:center;font:inherit;font-size:13px;
  transition:.16s;border-radius:2px}
.iconbtn:hover{border-color:var(--line-strong);background:var(--card)}
/* 主题图标同理跟 data-theme 走，不再由 shared.js 改字——否则每进一页都先显示
   HTML 里的占位符，再跳成 ☀ / ☾。 */
#theme::before{content:"☀"}
html[data-theme="light"] #theme::before{content:"☾"}
.langsw{display:inline-flex;border:1px solid var(--line);border-radius:2px;overflow:hidden}
.langsw button{background:none;border:0;color:var(--text-soft);font:inherit;font-size:12.5px;
  padding:6px 11px;cursor:pointer;transition:.16s}
/* 高亮跟 <html data-lang> 走，不跟 aria-pressed：后者写死在 HTML 里（中文为真），
   要等 body 末尾的 shared.js 才改过来，英文页首帧会先亮着「中」。data-lang 则在
   首帧前已由 <head> 的 boot 脚本定下。aria-pressed 仍由 shared.js 维护，供读屏用。 */
html[data-lang="zh"] .langsw button[data-set="zh"],
html[data-lang="en"] .langsw button[data-set="en"]{background:var(--blue-500);color:#fff}


/* ── Hero ─────────────────────────────────────────────────────────── */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;
  overflow:hidden;isolation:isolate}
.hero-media{position:absolute;inset:0;z-index:0;overflow:hidden}
/* 新图为完整 16:9，构图已排好，不再裁切。position-y 保持 38%：
   宽而矮的视口下 cover 会纵向裁切，偏上取景才不会切掉中国尊塔尖。 */
.hero-bg{position:absolute;inset:0;background-size:cover;background-position:50% 38%;
  transform:scale(1.02);transition:transform 1.1s var(--ease);will-change:transform}
.hero:hover .hero-bg{transform:scale(1.11)}
/* 深浅主题各用一张实拍，按主题与视口选档，避免两张都下载 */
html[data-theme="dark"]  .hero-bg{background-image:image-set(
  url("assets/hero/beijing-cbd-night-1280.webp") type("image/webp"),
  url("assets/hero/beijing-cbd-night-1280.jpg") type("image/jpeg"))}
html[data-theme="light"] .hero-bg{background-image:image-set(
  url("assets/hero/beijing-cbd-day-1280.webp") type("image/webp"),
  url("assets/hero/beijing-cbd-day-1280.jpg") type("image/jpeg"))}
@media(min-width:1024px){
  html[data-theme="dark"]  .hero-bg{background-image:image-set(
    url("assets/hero/beijing-cbd-night-1920.webp") type("image/webp"),
    url("assets/hero/beijing-cbd-night-1920.jpg") type("image/jpeg"))}
  html[data-theme="light"] .hero-bg{background-image:image-set(
    url("assets/hero/beijing-cbd-day-1920.webp") type("image/webp"),
    url("assets/hero/beijing-cbd-day-1920.jpg") type("image/jpeg"))}
}
@media(min-width:1600px){
  html[data-theme="dark"]  .hero-bg{background-image:image-set(
    url("assets/hero/beijing-cbd-night-2560.webp") type("image/webp"),
    url("assets/hero/beijing-cbd-night-2560.jpg") type("image/jpeg"))}
  /* 日景原片只有 1671px 宽，2560 档纯属放大，不如让浏览器拿 1920 缩放，
     因此这里没有 light 的对应规则——它继续沿用上一档。 */
}
.hero-scrim{position:absolute;inset:0;z-index:1;background:var(--hero-scrim);pointer-events:none}
.hero > .wrap{position:relative;z-index:3}
.hero .scrollcue{z-index:3}
.hero .wrap{width:100%;display:grid;grid-template-columns:1fr 420px;
  gap:clamp(24px,4vw,64px);align-items:center;
  padding-top:var(--bar-h);padding-bottom:40px}
.eyebrow{display:inline-flex;align-items:center;gap:12px;
  font-size:clamp(13px,1.15vw,15px);font-weight:500;letter-spacing:2px;
  text-transform:uppercase;color:var(--gold);margin-bottom:20px}
.eyebrow::before{content:"";width:32px;height:1px;background:var(--gold)}
.hero h1{margin:0 0 20px;font-family:var(--serif);font-weight:600;
  font-size:clamp(32px,5vw,60px);line-height:1.16;letter-spacing:-.5px}
.hero h1 em{font-style:normal;color:var(--blue-400)}
html[data-theme="light"] .hero h1 em{color:var(--blue-600)}
.hero p.lede{margin:0 0 30px;font-size:clamp(15px,1.5vw,17.5px);line-height:1.85;
  color:var(--text-soft);max-width:52ch}
/* 浅色下这行压在照片上，--text-soft 的对比度只有 3.09，本就不到 AA 4.5。
   照片背景不比实色底，正文得单独调深；深色主题不受影响。 */
html[data-theme="light"] .hero p.lede{color:#22364a}
.acts{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-block;padding:13px 26px;font-size:14.5px;font-weight:500;
  border:1px solid transparent;cursor:pointer;transition:.18s var(--ease)}
.btn-p{background:var(--gold);color:#1d1405}
.btn-p:hover{background:var(--gold-lift)}
.btn-g{border-color:var(--line-strong);color:var(--text)}
.btn-g:hover{background:var(--card)}

/* ── 通用区块 ─────────────────────────────────────────────────────── */
section{padding:clamp(60px,7.5vw,100px) 0}
.shead{max-width:74ch;margin-bottom:clamp(32px,4vw,52px)}
.kicker{font-size:12px;letter-spacing:1.7px;text-transform:uppercase;color:var(--gold);font-weight:700}
.shead h2{margin:12px 0 14px;font-family:var(--serif);font-weight:600;
  font-size:clamp(26px,3.3vw,38px);line-height:1.28}
.shead p{margin:0;color:var(--text-soft);font-size:16.5px}

.stats{background:var(--surface);border-block:1px solid var(--line)}
.stats .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line)}
.stat{background:var(--surface);padding:30px 22px}
.stat b{display:block;font-family:var(--serif);font-size:clamp(28px,3.4vw,40px);line-height:1.1}
.stat span{display:block;margin-top:6px;font-size:13.5px;color:var(--text-soft)}

/* ── 网络荣誉 ─────────────────────────────────────────────────────── */
.creds{background:var(--surface);border-bottom:1px solid var(--line)}
.creds .wrap{display:flex;align-items:center;justify-content:center;
  gap:clamp(26px,4vw,56px);padding-block:clamp(24px,3vw,36px)}
.creds-badges{display:flex;align-items:center;gap:18px;flex:none}
/* 2022 那张是白底不透明，深色主题下垫白块反而干净；等 RBI 给到矢量版再换 */
/* 上限 132px 是被 2019 那张卡住的：源图 150×181，再大就不足 1.35× 会发虚。
   2022 那张 300×300 余量充足。等 RBI 给到矢量版可以进一步放大。 */
.creds-badges img{height:clamp(92px,9.4vw,132px);width:auto;
  background:#fff;padding:8px 11px;border-radius:3px}
.creds-text{min-width:0}
.creds-text p{margin:8px 0 0;font-size:clamp(13.5px,1.35vw,15.5px);
  line-height:1.7;color:var(--text-soft);max-width:62ch}
.creds-text strong{color:var(--text);font-weight:600}
@media(max-width:720px){
  .creds .wrap{flex-direction:column;align-items:flex-start;gap:18px}
  .creds-badges img{height:84px}
}

/* ── 通栏图带 ─────────────────────────────────────────────────────── */
/* 文字一律放在实色面板里，不压在照片上——清晰度是结构上的保证，
   不靠调遮罩透明度去凑。 */
.band{position:relative;margin:clamp(22px,3vw,36px) 0 clamp(24px,3.2vw,40px);
  height:clamp(150px,18vw,250px)}
.band-bg{position:absolute;inset:0;background-size:cover;background-position:50% 46%;
  /* 上下渐隐，避免生硬的矩形贴在版面上 */
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 24%,#000 76%,transparent 100%);
          mask-image:linear-gradient(to bottom,transparent 0,#000 24%,#000 76%,transparent 100%);
  background-image:image-set(
    url("assets/hero/services-meeting-1280.webp") type("image/webp"),
    url("assets/hero/services-meeting-1280.jpg") type("image/jpeg"))}
@media(min-width:1024px){.band-bg{background-image:image-set(
    url("assets/hero/services-meeting-1920.webp") type("image/webp"),
    url("assets/hero/services-meeting-1920.jpg") type("image/jpeg"))}}
@media(min-width:1600px){.band-bg{background-image:image-set(
    url("assets/hero/services-meeting-2560.webp") type("image/webp"),
    url("assets/hero/services-meeting-2560.jpg") type("image/jpeg"))}}
/* 深色主题下原图偏亮，压暗并略降饱和，才不会在深蓝版面上刺眼 */
html[data-theme="dark"]  .band-bg{filter:brightness(.66) saturate(.8) contrast(1.02)}
html[data-theme="light"] .band-bg{filter:brightness(1.02) saturate(.88)}
/* 四边都要融进页面：上下靠遮罩，左右靠一层页面底色的渐变；
   再叠一层主题色罩把照片的色相拉进配色，否则它只是「贴上去的一块矩形」。 */
.band::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(to right,var(--bg) 0,transparent 15%,transparent 85%,var(--bg) 100%),
    var(--band-tint)}


.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line)}
}
}
@media(max-width:480px){.grid5{grid-template-columns:1fr}}
.svc{background:var(--bg);padding:28px 24px 30px;display:flex;flex-direction:column;transition:.18s}
.svc:hover{background:var(--surface)}
.svc .n{font-family:var(--serif);font-size:13px;color:var(--gold);letter-spacing:1.5px}
.svc h3{margin:11px 0 15px;font-size:17.5px;line-height:1.4;font-weight:600}
.svc ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.svc li a{font-size:14px;color:var(--text-soft);display:flex;gap:8px;align-items:baseline}
.svc li a::before{content:"›";color:var(--blue-400)}
.svc li a:hover{color:var(--gold)}

.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,68px);align-items:center}
.split p{color:var(--text-soft);margin:0 0 16px}
.tenet{border-left:3px solid var(--gold);padding:4px 0 4px 22px;margin:24px 0 0;
  font-family:var(--serif);font-size:19px;line-height:1.6}
.figure{margin:0;position:relative}
.figure img{width:100%;border:1px solid var(--line)}
.figure figcaption{margin-top:10px;font-size:12.5px;color:var(--text-dim)}

/* 邮箱一律以「发送邮件」呈现，不在页面上明文写出地址。
   注意这只挡住了肉眼与截图，地址仍在 mailto 的 href 里，
   真要防采集得由脚本拼装 href——但那样禁用 JS 时链接就失效了。 */
.maillink{color:var(--blue-400)}
.maillink::after{content:" ›"}
html[data-theme="light"] .maillink{color:var(--blue-600)}

/* 首页「团队」那一节只留栏目名，没有大标题，字号要相应提上来 */
.kicker.kicker-lg{font-size:clamp(20px,2.4vw,30px);letter-spacing:.04em;
  color:var(--text);font-weight:600;text-transform:none}

/* ── 人物 ─────────────────────────────────────────────────────────
   两种呈现：
     .facerow   首页头像行——只有圆形头像与姓名，点进组织页看详情
     .people    组织页名录——左圆照、右文字，不再是卡片
   照片已抠成透明 PNG（见 tools/build-portraits.py），圆盘底色在此给，
   于是深浅主题各自成立、八张观感统一。张小煦那张未抠底，
   自带深色影棚背景，圆形裁切后仍成立。                              */
.avatar{border-radius:50%;background:var(--surface-2);object-fit:cover;
  object-position:center top;flex:none}

/* 首页：头像一行 */
.facerow{display:flex;flex-wrap:wrap;gap:clamp(18px,2.6vw,34px);justify-content:center}
.faceitem{display:flex;flex-direction:column;align-items:center;gap:11px;
  width:clamp(96px,10vw,128px);text-align:center}
.faceitem .avatar{width:clamp(84px,8.6vw,112px);height:clamp(84px,8.6vw,112px);
  transition:transform .28s var(--ease)}
.faceitem:hover .avatar{transform:translateY(-4px)}
.faceitem b{font-size:14.5px;font-weight:600;line-height:1.35}
.faceitem span{font-size:11.5px;color:var(--gold);font-weight:600;line-height:1.4}

/* 组织页：左圆照 + 右文字 */
.people{display:grid;grid-template-columns:1fr;gap:0}
.person{display:flex;gap:clamp(20px,2.6vw,34px);align-items:flex-start;
  padding:30px 0;border-top:1px solid var(--line)}
.person:first-child{border-top:0}
.person .avatar{width:clamp(96px,9vw,124px);height:clamp(96px,9vw,124px)}
.person .body{min-width:0;flex:1}
.person h3{margin:0 0 5px;font-size:19px;line-height:1.3}
.person .role{font-size:12.5px;color:var(--gold);font-weight:600;letter-spacing:.4px}
.person p{margin:12px 0 0;font-size:14.5px;color:var(--text-soft);line-height:1.75;max-width:70ch}
.person .mail{display:inline-block;margin-top:12px;font-size:13.5px;color:var(--blue-400)}
html[data-theme="light"] .person .mail{color:var(--blue-600)}
/* 简介尚未提供的（严华、肖庆）留白，不写占位话术 */
@media(max-width:560px){
  .person{flex-direction:column;gap:16px}
}

.insights{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:22px}
.card{border:1px solid var(--card-line);background:var(--card);padding:26px 24px 28px;
  display:flex;flex-direction:column;transition:.18s}
.card:hover{border-color:var(--blue-400);transform:translateY(-3px)}
.card time{font-size:12px;letter-spacing:1.1px;color:var(--gold);font-weight:600}
.card h3{margin:11px 0 11px;font-size:17.5px;line-height:1.45}
.card p{margin:0;font-size:14px;color:var(--text-soft);flex:1}
.card .more{margin-top:16px;font-size:13.5px;color:var(--blue-400)}

.contact{background:var(--surface);border-top:1px solid var(--line)}
.offices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line)}
@media(max-width:760px){.offices{grid-template-columns:1fr}}
.office{background:var(--surface);padding:30px 28px}
.office h3{margin:0 0 16px;font-family:var(--serif);font-size:22px}
.office dl{margin:0;display:grid;grid-template-columns:76px 1fr;gap:9px 14px;font-size:14.5px}
.office dt{color:var(--gold);font-size:12.5px;padding-top:2px}
.office dd{margin:0;color:var(--text-soft);line-height:1.6}

/* ── 子页面 ───────────────────────────────────────────────────────── */
/* 首页靠 Hero 把内容顶到固定顶栏之下；子页面没有 Hero，
   得自己让开 --bar-h，否则标题会被顶栏压住。 */
.pagehead{padding-top:calc(var(--bar-h) + clamp(44px,6vw,84px));
  padding-bottom:clamp(36px,4.5vw,60px);
  background:var(--surface);border-bottom:1px solid var(--line)}
.crumb{font-size:13px;color:var(--text-soft);margin-bottom:18px}
.crumb a{color:var(--text-soft)}
.crumb a:hover{color:var(--gold)}
.crumb span{opacity:.5;margin:0 7px}

.jobs{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.job{background:var(--bg);padding:clamp(26px,3.4vw,40px)}
.job-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 16px;
  padding-bottom:18px;margin-bottom:22px;border-bottom:1px solid var(--line)}
.job-head h3{margin:0;font-family:var(--serif);font-weight:600;
  font-size:clamp(21px,2.3vw,27px);line-height:1.3}
/* 职级标签。用 --gold 的描边而非实底，实底在深色下太抢，会压过职位名 */
.tag{font-size:12px;letter-spacing:.6px;color:var(--gold);
  border:1px solid var(--gold);padding:3px 10px;white-space:nowrap}
/* 任职要求。序号用 --gold 排在悬挂缩进里，长条目回行时对齐正文而非序号。
   同 .article ul li：用 padding + 绝对定位，不用 grid——grid 会按子节点
   拆分网格项，条目里一旦出现行内元素，后半段就会掉进序号列。 */
.job ol{list-style:none;margin:0;padding:0;display:grid;gap:13px;counter-reset:req}
.job ol li{counter-increment:req;position:relative;padding-left:36px;
  font-size:15.5px;line-height:1.8;color:var(--text-soft)}
.job ol li::before{content:counter(req,decimal-leading-zero);
  position:absolute;left:0;top:5px;
  font-family:var(--serif);font-size:13px;color:var(--gold);letter-spacing:.5px}
.job h4{margin:0 0 16px;font-size:13px;letter-spacing:1.4px;
  text-transform:uppercase;color:var(--gold);font-weight:700}

/* 文章页。正文限宽 68ch——中文全角字宽是拉丁的两倍，
   按 ch 限宽在两种语言下都落在舒适的每行字数区间。 */
.article{max-width:68ch}
.article h3{margin:38px 0 14px;font-family:var(--serif);font-weight:600;
  font-size:clamp(19px,2.1vw,24px);line-height:1.35}
.article p{margin:0 0 18px;font-size:16.5px;line-height:1.9;color:var(--text-soft)}
/* 正文两端对齐（2026-10-21 审阅意见：法定审计、开曼、出海、涉税鉴证、转让定价等页
   右缘参差）。服务详情页与文章页共用这一类，一并对齐；英文开连字符断词，
   否则窄屏上两端对齐会把词距拉出大空洞。 */
.article p,.article li{text-align:justify}
html[data-lang="en"] .article p,html[data-lang="en"] .article li{hyphens:auto;-webkit-hyphens:auto}
/* 2026-10-22 起扩展到区块与页头导语、申请框和文章引语：英文版新闻与国际联系页的导语
   右缘参差，和已对齐的正文放在一起很显眼。单行文字不受影响。
   首页新闻卡片不对齐：文字栏只有约 190px，英文长词一多，两端对齐会把词距拉出大洞。 */
.shead p,.apply p,.article blockquote{text-align:justify}
html[data-lang="en"] .shead p,html[data-lang="en"] .apply p,
html[data-lang="en"] .article blockquote{hyphens:auto;-webkit-hyphens:auto}
/* 窄屏英文改回左对齐：一行只剩四十来个字符，两端对齐即使断词也会把词距拉出空洞
   （手机上的国际联系页首行就是如此）。中文逐字排列，窄屏两端对齐照样整齐，不受影响。 */
@media(max-width:560px){
  html[data-lang="en"] .article p,html[data-lang="en"] .article li,html[data-lang="en"] .shead p,
  html[data-lang="en"] .apply p,html[data-lang="en"] .article blockquote,
  html[data-lang="en"] .legal p{text-align:left}
}
.article ul{margin:0 0 20px;padding:0;list-style:none;display:grid;gap:11px}
/* 悬挂缩进必须用 padding + 绝对定位的 ::before，不能用 grid：
   grid 会把 li 的每个子节点各算一个网格项，条目里只要出现 <b>，
   它后面的文本就会被塞进序号列，变成一字一行。 */
.article ul li{position:relative;padding-left:24px;
  font-size:16px;line-height:1.85;color:var(--text-soft)}
.article ul li::before{content:"›";position:absolute;left:0;top:0;color:var(--blue-400)}
.article b{color:var(--text);font-weight:600}
/* 引述。左侧金色竖线而非引号，中文里成对引号在竖排边界上容易显脏 */
.quote{margin:26px 0;padding:4px 0 4px 22px;border-left:2px solid var(--gold)}
.quote p{margin:0 0 8px;font-family:var(--serif);font-size:19px;
  line-height:1.65;color:var(--text)}
.quote cite{font-style:normal;font-size:13.5px;color:var(--text-soft)}
/* 原文出处 */
.source{margin-top:40px;padding-top:22px;border-top:1px solid var(--line);
  font-size:14px;color:var(--text-soft)}
.source a{color:var(--blue-400);word-break:break-all}
.source a:hover{color:var(--gold)}
.backlink{display:inline-block;margin-top:30px;font-size:14.5px;color:var(--blue-400)}
.backlink:hover{color:var(--gold)}

/* 公文正文：条文密集，行距与段距要比普通文章更松才读得下去 */
.article .doc h3{margin:38px 0 14px;font-size:19px;font-weight:600}
.article .doc h4{margin:26px 0 10px;font-size:16px;font-weight:600;color:var(--text)}
.article .doc p{margin:0 0 14px;font-size:15px;line-height:1.95;color:var(--text-soft)}
.article .doc h3:first-child{margin-top:0}
/* 公文英译文末的「仅供参考」说明：与正文分开、字号更小 */
.article .doc .doc-note{margin-top:30px;padding-top:14px;border-top:1px solid var(--line);
  font-size:13px;line-height:1.8;color:var(--text-dim);text-align:left}

@media(max-width:900px){.grid3{grid-template-columns:1fr}}

/* 服务大类索引：每个最小服务项一张卡 */
.svcgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));
  border-top:1px solid var(--line);border-left:1px solid var(--line)}
/* 用每张卡自带的右/下边框拼出网格线，而不是「1px 间隙露出容器底色」。
   后者在末行不满时，空出来的格子会整块透出底色，看着像多了一张灰卡。 */
.svccard{border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:26px 24px 28px;display:flex;flex-direction:column;
  transition:background .18s var(--ease)}
.svccard:hover{background:var(--surface)}
.svccard .n{font-family:var(--serif);font-size:13px;color:var(--gold);letter-spacing:1.5px}
.svccard h3{margin:11px 0 10px;font-size:17.5px;line-height:1.4;font-weight:600}
.svccard p{margin:0;font-size:13.5px;line-height:1.7;color:var(--text-soft);flex:1}
.svccard .more{margin-top:16px;font-size:13.5px;color:var(--blue-400)}
html[data-theme="light"] .svccard .more{color:var(--blue-600)}

/* 同一大类内的上下篇 */
.pagers{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin:38px 0 0;padding-top:22px;border-top:1px solid var(--line)}
.pager{font-size:14px;color:var(--blue-400);transition:color .2s var(--ease)}
.pager:hover{color:var(--gold)}
html[data-theme="light"] .pager{color:var(--blue-600)}

/* 服务详情页 */
.svc-item{scroll-margin-top:calc(var(--bar-h) + 24px);padding:34px 0;border-top:1px solid var(--line)}
.svc-item:first-child{border-top:0;padding-top:0}
.svc-item h3{margin:0 0 14px;font-size:22px;font-weight:600;line-height:1.35}
.svc-item h4{margin:22px 0 8px;font-size:16px;font-weight:600;color:var(--text)}
.svc-item p{margin:0 0 12px;font-size:15px;line-height:1.9;color:var(--text-soft)}
.svc-item ul{margin:0 0 12px;padding:0;list-style:none;display:grid;gap:7px}
.svc-item li{font-size:14.5px;line-height:1.7;color:var(--text-soft);
  display:flex;gap:9px;align-items:baseline}
.svc-item li::before{content:"›";color:var(--blue-400);flex:none}
.svc-contact{margin-top:16px !important;font-size:14px;color:var(--text-dim)}
.svc-contact b{color:var(--text);font-weight:600}

/* ── 服务：卷帘 ───────────────────────────────────────────────────
   静止时帘子盖住整格，只露主题；悬停时帘子上卷，露出子目录。

   帘子的玻璃质感靠 backdrop-filter 的模糊 + 提亮，加一道极窄的高光边——
   纯半透明色块没有"玻璃"感，关键是它必须真的把身后的内容糊掉。
   Safari 需要 -webkit- 前缀。

   卷起用 transform:translateY(-100%) 而非改高度：高度动画每帧触发重排，
   transform 只在合成层跑。transform-origin 定在顶边，起卷才像帘子而非整体上移。 */
.svc{position:relative;overflow:hidden;isolation:isolate}
.svc-curtain{position:absolute;inset:0;z-index:2;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:22px 22px;cursor:pointer;
  background:color-mix(in srgb,var(--surface-2) 62%,transparent);
  backdrop-filter:blur(13px) saturate(150%) brightness(1.06);
  -webkit-backdrop-filter:blur(13px) saturate(150%) brightness(1.06);
  border:1px solid var(--card-line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16);
  transition:transform .52s var(--ease),opacity .34s var(--ease);
  transform-origin:top center}
.svc:hover .svc-curtain,
.svc:focus-within .svc-curtain{transform:translateY(-100%);opacity:0}
.svc-curtain h3{margin:0;font-size:17px;line-height:1.35}
.svc-curtain .n{position:static;font-size:12.5px;color:var(--gold);
  font-weight:600;letter-spacing:1px;flex:none}
/* 帘下内容先压暗一点，掀开时随之提上来，避免"帘子一走内容突然出现"的生硬 */
.svc-inner{opacity:.001;transform:translateY(10px);
  transition:opacity .4s .1s var(--ease),transform .46s .1s var(--ease)}
.svc:hover .svc-inner,
.svc:focus-within .svc-inner{opacity:1;transform:none}
/* 触摸设备没有悬停，帘子直接不出现，内容常显 */
@media(hover:none){
  .svc-curtain{display:none}
  .svc-inner{opacity:1;transform:none}
}
@media(prefers-reduced-motion:reduce){
  .svc-curtain,.svc-inner{transition-duration:.01s}
}

/* 带配图的洞察卡：图铺满整卡，正文压在玻璃蒙版上。
   蒙版用 backdrop-filter 真把图糊掉——纯半透明色块只会像蒙了层塑料，
   而且文字在照片的高频细节上会读不清。 */
.card-media{position:relative;overflow:hidden;isolation:isolate;min-height:230px}
.card-bg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:50% 42%;
  background-image:url("assets/news/apac-2026-cover-1277.webp");
  transform:scale(1.04);transition:transform .6s var(--ease)}
.card-media:hover .card-bg{transform:scale(1.1)}
.card-veil{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(4,14,26,.30) 0%,rgba(4,14,26,.72) 100%)}
.card-body{position:relative;z-index:2;display:flex;flex-direction:column;height:100%;
  margin:auto -24px -28px;padding:18px 24px 22px;
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  border-top:1px solid rgba(255,255,255,.18)}
.card-media time{color:var(--gold-soft)}
.card-media h3{color:#fff}
.card-media p{color:rgba(255,255,255,.82)}
.card-media .more{color:#cfe4f7}

/* 文章插图 */
.afig{margin:26px 0;padding:0}
.afig img{width:100%;height:auto;border-radius:4px}
.afig figcaption{margin-top:9px;font-size:13px;color:var(--text-dim)}
.afig-lead{margin:0 0 30px}

/* ── 客户标识传送带（首页预览） ───────────────────────────────────── */
/* 两侧淡出用 mask 而不是盖两块渐变遮片：遮片得跟着页面底色走，
   深浅主题各配一次，换背景就露馅；mask 直接裁掉像素，与底色无关。 */
/* display:block 不能省——这是个 <a>，行内元素上的 overflow:hidden 不生效，
   轨道会直接把页面撑出横向滚动条。 */
.marquee{display:block;position:relative;overflow:hidden;padding:6px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%)}
.marquee-track{display:flex;width:max-content;
  animation:marquee var(--dur,52s) linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
/* 轨道里放两份相同的序列，位移到 -50% 时画面与起点完全重合，
   于是可以瞬间跳回而看不出接缝——单份序列做不到无缝循环。 */
@keyframes marquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.marquee-cell{flex:none;width:172px;height:74px;margin-right:14px;
  background:#fff;display:grid;place-items:center;padding:14px;border-radius:2px}
.marquee-cell img{max-width:132px;max-height:44px;width:auto;height:auto;object-fit:contain}
@media(prefers-reduced-motion:reduce){.marquee-track{animation:none}}
@media(max-width:640px){
  .marquee-cell{width:132px;height:60px;padding:10px}
  .marquee-cell img{max-width:104px;max-height:36px}
}

/* 团队传送带：与客户标识共用同一套轨道机制（两份相同序列、位移 -50% 无缝），
   只是单元换成头像 + 姓名 + 职衔。速度放慢一些——要看清人名，
   比扫一眼标识需要更多时间。 */
.marquee-people{--dur:64s}
.marquee-people .marquee-track{align-items:flex-start}
.pcell{flex:none;width:clamp(132px,13vw,164px);margin-right:clamp(14px,1.8vw,26px);
  display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.pcell .avatar{width:clamp(88px,9vw,116px);height:clamp(88px,9vw,116px);
  transition:transform .28s var(--ease)}
.pcell:hover .avatar{transform:translateY(-4px)}
.pcell b{font-size:14.5px;font-weight:600;line-height:1.35}
.pcell > span{font-size:11.5px;color:var(--gold);font-weight:600;line-height:1.4}

/* ── 奖项（国际联系页） ───────────────────────────────────────────── */
/* 首页那条是并排的小徽章；这里是主角，给到实际尺寸并配说明。
   两张源图都不透明白底，深浅主题下都垫白板，观感一致。 */
.awardgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:26px}
.award{margin:0;display:flex;gap:22px;align-items:center;
  border:1px solid var(--card-line);background:var(--card);padding:24px 26px}
.award img{height:clamp(132px,13vw,168px);width:auto;flex:none;background:#fff;padding:9px 12px;border-radius:3px}
.award figcaption{display:flex;flex-direction:column;gap:7px;font-size:13.5px;
  line-height:1.65;color:var(--text-soft);min-width:0}
.award figcaption b{font-size:15.5px;color:var(--text);font-weight:600;line-height:1.4}
@media(max-width:560px){
  .award{flex-direction:column;align-items:flex-start;gap:16px}
  .award img{height:112px}
}

/* ── 客户标识墙 ───────────────────────────────────────────────────── */
/* 每枚标识坐在白色小板上。客户标识颜色各异，深色主题下深色字标会直接消失，
   而逐个做深色版既不现实也改动了对方的品牌资产——白板是唯一两套主题都成立的解。 */
.logowall{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line)}
/* 反白版标识（品牌方出的白色版本）落在深色板上。改色不合适——
   白版本就是为深底做的；换板才是正确用法。 */
.logo-cell.on-dark,.marquee-cell.on-dark{background:var(--navy-800)}
.logo-cell{background:#fff;aspect-ratio:5/2;display:grid;place-items:center;padding:16px}
/* 源图多在 100–250px 宽，框子给到 150×54 已是它们的极限，再大就发虚 */
.logo-cell img{max-width:150px;max-height:54px;width:auto;height:auto;object-fit:contain}
@media(max-width:520px){
  .logowall{grid-template-columns:repeat(auto-fill,minmax(132px,1fr))}
  .logo-cell{padding:12px}
  .logo-cell img{max-width:110px;max-height:44px}
}

.apply{background:var(--surface);border:1px solid var(--line);
  padding:clamp(26px,3.4vw,40px);margin-top:34px}
.apply h3{margin:0 0 12px;font-family:var(--serif);font-size:clamp(19px,2vw,23px)}
.apply p{margin:0 0 18px;color:var(--text-soft);font-size:15.5px;max-width:64ch}
.apply a.mail{font-size:17px;color:var(--blue-400);font-weight:500}
.apply a.mail:hover{color:var(--gold)}

footer{background:var(--bg);border-top:1px solid var(--line);
  color:var(--text-soft);font-size:13.5px;padding:52px 0 30px}
.fgrid{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:34px;
  padding-bottom:32px;border-bottom:1px solid var(--line)}
@media(max-width:900px){.fgrid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.fgrid{grid-template-columns:1fr}}
footer h4{margin:0 0 13px;color:var(--text);font-size:12.5px;letter-spacing:1.1px;text-transform:uppercase}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
footer a:hover{color:var(--gold)}
.awards{display:flex;align-items:center;gap:16px;margin-top:18px;flex-wrap:wrap}
.awards img{height:52px;width:auto;background:#fff;padding:4px;border-radius:2px}
.awards .cap{font-size:12px;color:var(--text-dim);max-width:30ch;line-height:1.6}
.legal{padding-top:22px;font-size:12.5px;line-height:1.9;color:var(--text-dim)}
.fof{display:flex;align-items:center;gap:16px;margin-bottom:18px;
  padding-bottom:18px;border-bottom:1px solid var(--line)}
.fof img{height:34px;width:auto;flex:none}
/* Forum of Firms 标识本身就是 Space Blue #00448a：
   浅色主题下直接用，不需要任何底板；深色主题下反而看不清，垫白底承托。
   规范 §4 限定该标识配色为 PAN 2748 Space Blue 或黑色，因此不做反白处理。 */
html[data-theme="dark"] .fof img{background:#fff;padding:5px 9px;border-radius:2px}
.fof span{font-size:12.5px;line-height:1.7;max-width:70ch}
@media(max-width:560px){.fof{flex-direction:column;align-items:flex-start;gap:10px}}
.legal .row{display:flex;flex-wrap:wrap;gap:8px 20px;margin-bottom:10px}
.legal p{text-align:justify}           /* 页脚成员声明两端对齐（同上审阅意见） */

.burger{display:none}
/* 子页面：.ghostnav 本身就是导航，须显形。
   必须限定在宽屏——这条选择器（属性+类）权重高于窄屏媒体查询里的 .ghostnav，
   不限定的话会把汉堡菜单的 visibility:hidden 盖掉，菜单未点开就一直摊在页面上。 */
@media(min-width:1001px){
  html[data-nav="plain"]:not(.nav-cramped) .ghostnav{visibility:visible}
}
/* 子页面内容紧贴顶栏，底板须常驻；首页要的是「图卡铺满时才浮出」，
   因此不由 data-nav 决定，改由各页自己声明 data-bar="solid"。 */
html[data-bar="solid"] .topbar::before{opacity:1}

/* ── 窄屏：整条导航退回汉堡菜单 ──────────────────────────────────
   原先这套样式挂在 html[data-nav="menu"] 下，由 JS 实测顶栏宽度后切换。
   那段 JS 随转盘一起删掉了，于是 menu 模式再也没被触发过——手机上
   七个栏目仍按横排渲染，把顶栏撑爆。改为直接由媒体查询驱动，不依赖 JS。

   断点取 1000px：七项中文标签横排约需 620px，加上组合标识与右侧按钮，
   1000px 以下就开始互相挤压。 */
/* 断点是保底：无 JS 时也能用。但固定断点必然失准——英文标签比中文宽，
   以后加栏目也会变。因此另有一段 JS 实测顶栏是否真的放得下，放不下就给
   <html> 加 nav-cramped，两条路任一命中都退回菜单。 */
html.nav-cramped .burger{display:grid}
html.nav-cramped .topbar::before{opacity:1}
html.nav-cramped .ghostnav{position:fixed;left:0;right:0;top:var(--bar-h);margin:0;
  flex-direction:column;gap:0;visibility:hidden;
  background:var(--bg);border-bottom:1px solid var(--line);
  box-shadow:var(--shadow);max-height:calc(100svh - var(--bar-h));overflow-y:auto;
  transform:translateY(-8px);opacity:0;
  transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s}
html.nav-cramped .ghostnav a{padding:15px var(--gut);font-size:16px;border-top:1px solid var(--line)}
html.nav-cramped body.navopen .ghostnav,
html.nav-cramped .ghostnav.open{visibility:visible;opacity:1;transform:translateY(0)}
html.nav-cramped .navlang{display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:14px var(--gut);border-top:1px solid var(--line);
  font-size:14px;color:var(--text-soft)}
html.nav-cramped .utils .langsw{display:none}
/* shared.js 量宽度时要先摘下 nav-cramped 再挂回，中间那次强制排版会被当成
   一次样式变化而触发过渡：本已收起的菜单面板凭空闪现，再花 0.22s 淡出。
   量的这一瞬把相关过渡整体关掉。 */
html.nav-measuring .ghostnav,html.nav-measuring .topbar::before{transition:none}

@media(max-width:1000px){
  .burger{display:grid}
  .topbar::before{opacity:1}          /* 菜单要盖在实底上，否则文字压着页面内容 */
  .ghostnav{position:fixed;left:0;right:0;top:var(--bar-h);margin:0;
    flex-direction:column;gap:0;visibility:hidden;
    background:var(--bg);border-bottom:1px solid var(--line);
    box-shadow:var(--shadow);max-height:calc(100svh - var(--bar-h));overflow-y:auto;
    transform:translateY(-8px);opacity:0;
    transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s}
  .ghostnav a{padding:15px var(--gut);font-size:16px;border-top:1px solid var(--line)}
  .ghostnav a:hover{color:var(--gold);background:var(--surface)}
  body.navopen .ghostnav{visibility:visible;opacity:1;transform:translateY(0)}
  /* 语言切换在菜单里单独占一行，别和栏目挤在一起 */
  .navlang{display:flex;align-items:center;justify-content:space-between;
    gap:12px;padding:14px var(--gut);border-top:1px solid var(--line);
    font-size:14px;color:var(--text-soft)}
}
@media(min-width:1001px){ .navlang{display:none} }

@media(max-width:1000px){
  .barinner{gap:12px}
  .utils{gap:6px}
  .utils .langsw{display:none}       /* 语言切换移入菜单，顶栏不再重复 */
}
@media(max-width:980px){
  .split{grid-template-columns:1fr}
  .stats .wrap{grid-template-columns:repeat(2,1fr)}
}
.navlang{display:none}
/* 窄屏顶栏容不下全部元素，但 RBI 标识必须留在右上角（品牌规范 §3.1），
   因此把语言切换挪进菜单面板，并压缩其余元素。 */
@media(max-width:700px){
      .barinner{gap:8px}
  .utils{gap:7px}
  .utils > .langsw{display:none}
  .iconbtn{width:32px;height:32px}
  .navlang{display:flex;align-items:center;justify-content:space-between;
    padding:13px var(--gut);border-top:1px solid var(--line);
    font-size:13px;color:var(--text-dim)}
  .navlang .langsw{display:inline-flex}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .hero:hover .hero-media img{transform:scale(1.02)}
}