/* ==========================================================================
   S08 站点皮肤 · 令牌语义重映射层（必须在 modules.css 之后加载）
   依据：02-模块拆解库/站点设计规范/S08-设计规范.md
     · 主色前缀 --navy-* → Deep Forest Green 色阶（官方 / 公证信任）
       规范实测值：--navy-800 #0f3d2e / --navy-600 #166534 / --navy-500 #15803d
                   --navy-100 #bbf7d0 / --navy-50 #f0fdf4
     · 强调色：S08 规范前缀写作 --crimson-*，取值与组件库 gold-500 #c9a227 同族
       （香槟金）。故 --gold-500/300/50 直接复用组件库原值，不另起一套。
     · --gold-ink / --accent-ink **不覆盖**：它们承载「强调色当文字色」的角色，
       组件库已按 WCAG AA 逐表面调过（§51），改动会引入对比度回归。
   换肤只改这一处 —— 51 个组件零改动复用，站内差异只来自配色令牌。
   ========================================================================== */
:root{
  --navy-900:#081a12;   /* 深底带渐变起点（比规范主色再深一档，保证深底上的浅字对比度） */
  --navy-800:#0f3d2e;   /* ← S08 规范主色 */
  --navy-700:#14532d;   /* 链接 / 标题（白底 9.6:1） */
  --navy-500:#15803d;   /* 强调描边 / hover */
  --navy-100:#bbf7d0;   /* 深底上的正文色（深绿底 ~14:1） */
  --navy-50:#f0fdf4;    /* 浅色交替区块底 */

  --border:#cfe3d6;     /* 蓝灰 → 绿灰，跟随主色，避免冷暖打架 */
  --surface:#fff;

  --shadow-sm:0 1px 2px rgba(8,26,18,.06);
  --shadow:0 4px 14px rgba(8,26,18,.08);
  --shadow-lg:0 14px 34px rgba(8,26,18,.14);
  --shadow-gold:0 4px 14px rgba(201,162,39,.3);

  /* S08 没有可用照片（assets/img 为空）时的降级块底色，跟随绿系 */
  --ph-tint:#e7f5ea;
}

/* 降级块在绿系皮肤下的底色（组件库默认给的是蓝系 --navy-100） */
.img-ph{
  background:
    linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,0) 58%),
    repeating-linear-gradient(45deg, rgba(15,61,46,.045) 0 9px, rgba(15,61,46,0) 9px 18px),
    var(--ph-tint);
}

/* --------------------------------------------------------------------------
   组件库内「写死的 S02 藏蓝值」（不走令牌）—— 皮肤层逐点收编。
   来源：2026-09-14 对 modules.css 全量色值扫描。令牌重映射只覆盖 var(--navy-*)，
   组件里的硬编码 hex/rgba 不受影响，必须在此按同选择器、靠加载顺序覆盖。
   -------------------------------------------------------------------------- */

/* 01/01 Hero 基类（变体 A 直接继承）：原 linear-gradient(#061a33,#0a2547,#0f3460) */
.m-hero{ background:linear-gradient(135deg,#081a12,#0f3d2e 60%,#14532d); }
.m-hero .lead{ color:#d7e8de; }        /* 原蓝白 #d6e4f5 → 绿白（深绿底 ~11:1） */

/* Header 变体 B（S08 全站头部用此变体）：原 rgba(6,26,51,.97)/rgba(10,37,71,.94) 渐变 */
.m-hdr[data-v="b"]{
  background:linear-gradient(180deg,rgba(8,26,18,.97),rgba(15,61,46,.94));
}

/* 01/08 数据统计（深底卡）：标签文字原蓝白 #d6e4f5 */
.m-stats .l{ color:#d7e8de; }

/* 03/05 演示块播放钮 / 08/04 弹窗遮罩：蓝黑暗调 → 绿黑暗调 */
.m-demo .play span{ background:rgba(8,26,18,.82); }
.m-modal{ background:rgba(8,26,18,.6); }

/* 06 组 m-sop 色板半格：原 #0f3460 半格 */
.m-sop .swatch.c{ background:linear-gradient(135deg,#f5f4f1 50%,#14532d 50%); }

/* ===== S08 补齐模块（UK 深绿金） ===== */
.m8-quote{max-width:860px;margin:0 auto;padding:34px 44px;text-align:center}
.m8-quote .q-mark{font-size:64px;line-height:1;color:#c9a227;font-family:Georgia,serif}
.m8-quote p{font-size:24px;font-weight:600;color:var(--navy-900,#081a12);line-height:1.6;margin:8px 0}
.m8-quote cite{font-style:normal;color:#475569;font-size:14px}
.m8-top{position:fixed;right:22px;bottom:26px;width:46px;height:46px;border-radius:50%;background:var(--navy-800,#0f3d2e);color:#fff;border:1px solid #c9a227;cursor:pointer;font-size:20px;z-index:900;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:.3s;box-shadow:0 4px 14px rgba(8,26,18,.35)}
.m8-top.show{opacity:1;pointer-events:auto}
.m8-lc{position:fixed;left:22px;bottom:26px;z-index:900;display:flex;flex-direction:column;gap:10px}
.m8-lc-btn{width:54px;height:54px;border-radius:50%;border:0;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#fff;font-size:22px;box-shadow:0 4px 14px rgba(0,0,0,.18)}
.m8-lc-wa{background:#25d366}
.m8-lc-chat{background:linear-gradient(135deg,var(--navy-700,#14532d),#c9a227)}
.m8-chatpop{position:fixed;left:22px;bottom:92px;z-index:950;width:300px;background:#fff;border:1px solid var(--border,#cfe3d6);border-top:4px solid #c9a227;border-radius:12px;padding:20px;display:none;box-shadow:0 12px 30px rgba(8,26,18,.2)}
.m8-chatpop.open{display:block}
.m8-chatpop h4{margin:0 0 6px;color:var(--navy-900,#081a12)}
.m8-chatpop p{margin:0 0 12px;font-size:13px;color:#475569}
.m8-chatpop input,.m8-chatpop textarea{width:100%;box-sizing:border-box;padding:11px;border:1px solid var(--border,#cfe3d6);border-radius:8px;margin-bottom:10px;font-size:14px}
.m8-chatpop .btn{width:100%}

/* hero real photo */
.m-hero .m-hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:0;display:block;}
.m-hero .m-hero-shade{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(8,18,40,.85) 0%,rgba(8,18,40,.5) 55%,rgba(8,18,40,.15) 100%);}
.m-hero .wrap,.m-hero .hero-in{position:relative;z-index:2;}

/* ---- 卡片真实图片缩略图 (2026-09-24) ---- */
.card .thumb-card{ display:block; width:100%; margin:0 0 16px; border-radius:10px; overflow:hidden;
  background:rgba(255,255,255,.05); flex:0 0 auto; }
.card .thumb-card img{ display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover;
  transition:transform .35s ease; }
.card:hover .thumb-card img{ transform:scale(1.04); }
@media (max-width:640px){ .card .thumb-card img{ aspect-ratio:16/10; } }

/* ============================================================
   卡片缩略图 · 按容器形态自适应 (2026-09-24 修订)
   背景：全站把 .ic-box 小图标替换为 .thumb-card 真实图片后，三种
   "非网格"容器（药丸标签 / 横向 flex / 单列列表）会被 16:9 大图撑爆。
   此处按形态给出适配尺寸：保留真实图片，同时不破坏原布局节奏。
   ============================================================ */

/* --- A. 药丸标签 m-cat[b]（border-radius:999px 横排）→ 图标位换小方图 --- */
.m-cat[data-v="b"] .card .thumb-card{
  width:44px; height:44px; flex:0 0 44px; margin:0; border-radius:10px;
  background:rgba(255,255,255,.08);
}
.m-cat[data-v="b"] .card .thumb-card img{
  width:44px; height:44px; aspect-ratio:auto; margin:0; object-fit:cover;
}

/* --- B. m-feat[b]：原为"小图标在左 + 文本在右"横排；换成图片后横排会把
   描述列压到 5~6 行，故改为纵向图片卡片（图在上、标题描述在下）。 --- */
.m-feat[data-v="b"] .card{ flex-direction:column; gap:0; align-items:stretch; }
.m-feat[data-v="b"] .card .thumb-card{
  width:100%; flex:0 0 auto; margin:0 0 14px; border-radius:10px;
}
.m-feat[data-v="b"] .card .thumb-card img{ aspect-ratio:16/9; }
.m-feat[data-v="b"] .card h3{ margin:0; }
.m-feat[data-v="b"] .card p{ margin:6px 0 0; }

/* --- C. 单列带分隔线列表 m-feat[c] → 改为"图左 / 标题描述右"两栏 --- */
.m-feat[data-v="c"] .card{
  display:grid; grid-template-columns:210px minmax(0,1fr);
  grid-template-rows:auto 1fr; gap:0 20px; align-items:start;
}
.m-feat[data-v="c"] .card .thumb-card{
  grid-column:1; grid-row:1 / -1; width:100%; margin:0; align-self:start;
}
.m-feat[data-v="c"] .card h3{ grid-column:2; grid-row:1; margin:0; }
.m-feat[data-v="c"] .card p{ grid-column:2; grid-row:2; align-self:start; margin:0; }

/* --- 移动端：收敛为纵向单列 --- */
@media (max-width:640px){
  /* 药丸在 342px 宽下 flex 横排会把标题逐词硬断（"Vie w det ails →"）；
     改 grid 两栏：左图 + 右侧标题/描述/链接竖排，文本列 262px 不再断词。
     注：此为既有缺陷（A/B 证实换图前后断词一致），本次一并修复。 */
  .m-cat[data-v="b"] .card{
    display:grid; grid-template-columns:36px minmax(0,1fr);
    gap:4px 12px; align-items:start; border-radius:14px; padding:14px 16px;
    overflow-wrap:anywhere;
  }
  .m-cat[data-v="b"] .card .thumb-card{
    grid-column:1; grid-row:1 / span 3; align-self:start;
    width:36px; height:36px; flex-basis:36px;
  }
  .m-cat[data-v="b"] .card .thumb-card img{ width:36px; height:36px; }
  .m-cat[data-v="b"] .card h3{ grid-column:2; grid-row:1; margin:0; }
  .m-cat[data-v="b"] .card p{ grid-column:2; grid-row:2; margin:0; }
  .m-cat[data-v="b"] .card .more{ grid-column:2; grid-row:3; margin-top:6px; }

  .m-feat[data-v="b"] .card .thumb-card{ width:100%; flex-basis:auto; margin-bottom:12px; }
  .m-feat[data-v="c"] .card{ grid-template-columns:minmax(0,1fr); gap:10px; }
  .m-feat[data-v="c"] .card .thumb-card{ grid-column:1; grid-row:auto; }
  .m-feat[data-v="c"] .card h3{ grid-column:1; grid-row:auto; margin:0; }
  .m-feat[data-v="c"] .card p{ grid-column:1; grid-row:auto; margin:0; }
}

/* ==================== 第三轮（2026-09-24）：相关推荐卡 .img-ph 占位块 → 真实图片 ====================
   背景：全站 670 处 / 161 页的 .card > .thumb > .img-ph 原本是 modules.css 里那段
   「图片槽位降级块」（图库为空时用的斜纹占位），被塞了 hero 图当 background-image 充数，
   语义随机 —— 例如「Sponsor Licence Document Translation」配 hero-medical-1（医疗照）、
   「Cyber Essentials Compliant Translation」配 hero-language-3。
   本段只做两件事：关掉降级渐变、让内部真实 <img> 填满盒子。
   盒子自身的 width/height/aspect-ratio/overflow/border-radius 全部沿用 .img-ph 原值
   → 与 background-image 时期像素级同尺寸，**零布局变更**、零 CLS。 */
.img-ph.has-img{ background:none; }
.img-ph.has-img::after{ display:none; }
.img-ph > img.ph-img{
  display:block; width:100%; height:100%; object-fit:cover;
  transition:transform .35s ease;
}
.m-rel .card:hover .img-ph > img.ph-img{ transform:scale(1.04); }

/* 头像卡首字母徽章：.m-team .av 的渐变底 / 26px / 800 / 白字沿用 modules.css 原值，
   此处只把行高钉成 1，保证单/双字母在 80px（及 120px / 56px 变体）圆内垂直居中。
   —— 84 处 .av 原先被塞了 img-ph 占位块（含 13 张可辨识真人照），改为徽章。 */
.m-team .av > .ini{
  font: inherit; line-height: 1; letter-spacing: .02em; color: #fff;
}
/* .m-team[data-v="c"] 的卡片在窄屏是 flex 行，.av 作为 flex item 默认 flex-shrink:1，
   实测 390px 下被压成 24~34×56 的椭圆（PC 无此问题）。原先里面是不透明照片尚不易察觉，
   换成文字徽章后会很显眼 —— 钉死基准尺寸。 */
.m-team .av{ flex: 0 0 auto; }

/* ==================== 移动端 hero 堆叠修复（2026-09-24 第四轮） ====================
   背景：PC 版 .m-hero .wrap 是 flex 横排（modules.css 1546-1549：hero-in 56% / hero-media
   42% max 560px）。窄屏**没有对应断点**，于是两个 flex item 继续并排、各自被压成极窄一列：
   实测 390px 下 .hero-in 仅 168px、.hero-media 126×380（宽高比 0.33，图被拉成竖条），
   hero 区整体挤成"文字竖条 + 图片竖条"两列 —— 用户已批准改为移动端纵向堆叠。
   做法：只在皮肤覆盖层（本文件，加载于 modules.css 之后）追加断点，**不动 PC 规则**；
   媒体盒改为整行宽 + 16:9，文字在上、图片在下自然堆叠。零 PC 影响。 */
@media (max-width:720px){
  .m-hero .wrap{ flex-direction:column; align-items:stretch; gap:24px; }
  .m-hero .hero-in{ flex:0 0 auto; width:100%; min-width:0; }
  .m-hero .hero-media{ flex:0 0 auto; width:100%; max-width:100%; }
  .m-hero .hero-media .img-ph{ height:auto; min-height:0; aspect-ratio:16/9; }
}


/* >>> 2026-09-26 导航粘连 / 折叠断点 / 页脚统计区空白修复 <<< */
/* 1) 品牌与导航链接强制不换行，避免品牌末尾与首项 Services 视觉粘连 */
.m-hdr .brand,.m-hdr .brand span,.m-hdr .nav a.top{ white-space:nowrap; }
.m-hdr .bar{ gap:16px; }
.m-hdr .nav{ min-width:0; }

/* 2) 提高折叠断点：<=1280px 导航走汉堡菜单，避免中等宽度下 10 个导航项拥挤、
   品牌与 Services 粘连、以及右侧 Enterprise/About Us 被裁切 */
@media (max-width:1280px){
  .m-hdr .nav{ display:none; }
  .m-hdr .nav.open{ display:block; position:absolute; top:100%; left:0; right:0;
    background:var(--surface); border-bottom:1px solid var(--border);
    box-shadow:var(--shadow-lg); padding:14px 24px 20px; }
  .m-hdr .nav.open>ul{ flex-direction:column; }
  .m-hdr .nav.open .mega{ position:static; display:grid!important; box-shadow:none;
    border:0; padding:6px 0 10px 10px; border-left:2px solid var(--gold-300);
    margin:6px 0 10px; }
  .m-hdr .burger{ display:flex; }
}

/* 3) 页脚上方统计区(.m-stats)内容常驻可见：原先 .rv 默认 opacity:0 靠滚动
   观察器淡入，直达底部时整段深绿呈现为约 270px 空块。仅让统计数字立即可见，
   不影响其它区块的 reveal 动效。 */
.m-stats .rv{ opacity:1 !important; transform:none !important; transition:none !important; }
/* <<< end 2026-09-26 S08 fix >>> */

/* === lingomere logo rollout 2026-09-28 === */
a.brand, header .brand, .main-header .brand, .site-header .brand, .m-hdr .brand {
  max-width: none !important;
  overflow: visible !important;
  white-space: nowrap !important;
}
.brand-logo, .brand .mark, .brand .lg, .brand .brand-mark {
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center;
  padding: 0 !important;
  max-width: none !important;
}
.brand-logo-img, .brand .mark img, .brand .lg img, .brand .brand-mark img {
  height: 36px !important;
  width: auto !important;
  max-width: none !important;
  border-radius: 0 !important;
  display: inline-block !important;
}
.brand-text, .brand .mark + span, .brand .lg + span, .brand .brand-mark + span {
  display: none !important;
}
.brand-logo::after, .brand .mark::after, .brand .lg::after, .brand .brand-mark::after {
  display: none !important;
}