/* ===========================================================
   2026-10-21 第六轮 · 板块背景「真实照片 + 渐变雾化」
   -----------------------------------------------------------
   【图片清单】目录 img/bg/（en 站、id 站各存一份，文件名完全相同）
   全部为 Pexels / Unsplash 免费图库的实拍照片，已统一压到 1600px 宽。
   注：.container2 / .container3 在产品页、关于页也被复用（内容完全不同），
   所以首页只给这一块加了 --bg 修饰类，不会污染其他页面。

   【2026-10-22 现状：第 5、6 项在用，其余 5 块已停用照片、回到纯色底】
   1. #lgHotSale  ★在用★ → hot-sale-grains.jpg             饲料原料(左)+奶牛绵羊鸡(右)，主体集中上半部，2048x952
      （2026-10-22 用户选定：AI 生成的写实照片，1536x1024 → 压到 1600px；
        网上免费图库里「饱满玉米粒 + 翠绿玉米杆」没有满意的 CC0 实拍，故按用户授权生成）
   2. .container2--bg   →（已停用）animal-pasture.jpg        关键词：farm countryside green pasture
   3. .container3--bg   →（已停用）welcome-fields.jpg        关键词：green fields countryside / farm landscape
   4. .lgAssure         →（已停用）nz-sheep-flock.jpg        关键词：sheep grazing close up lush green field（Unsplash）
   5. .lgBlock--steps  ★在用★ → shipping-bg.jpg             海上运输：集装箱货轮航行于蓝海，船体占左侧，2048x1024→1600x800
   6. .lgWork  ★在用★   → why-cornfield.jpg                 关键词：dark farm field / corn field dusk
   7. .lgBlock--team    →（已停用）nz-sheep-portrait.jpg     关键词：sheep close up green field soft light（Unsplash）

   保留带照片的板块：#lgHotSale（Hot Sale Products）、.lgBlock--steps（How We Work，2026-10-22 恢复并换海上运输图）、
   .lgWork（Why Work With Us / Built for Buyers Who Need Certainty）。
   图片文件仍保存在 img/bg/ 下，随时可以一行 CSS 恢复，不用重新下载。

   【2026-10-21 更新 · 三个板块换成「新西兰牧场近景特写」】
   ▸ 风格统一：前景是清晰的牛/羊（面部或身体特写），背景是虚化或连绵的绿色草场；
     三张构图不同——两头牛正脸 / 单只小羊侧脸 / 羊群低头吃草，不会看起来一样。
   ▸ 只换了图片文件与上表的 --bg-img，--bg-a（雾化强度）与 --bg-tint（底色）一律没动。
   ▸ 原图 2000px 宽，统一压到 1600px / JPEG q76，并做了 autocontrast + 对比 1.16 +
     饱和 1.12 + 轻锐化：0.85 的遮罩只透 15%，提过对比的照片透出来才有毛色和草纹。
   ▸ 来源：Unsplash 免费图库（可商用，无需署名）；原图编号：031 / 022 / 112。

   【2026-10-22 现状】
   ▸ 背景图：.lgBlock--steps（shipping-bg.jpg，海上运输）、#lgHotSale（hot-sale-grains.jpg，顶部清晰向下模糊）、
     .lgWork（why-cornfield.jpg）三块在用，其余 4 块停用。
   ▸ 背景色：已全部还原为第六轮加照片之前的原始设置，本文件不再做任何覆写 ——
     #lgHotSale #FAF7EF / .lgBlock--team #F0F3EF（.lgBlock--steps 已改用 244,247,248 浅蓝灰底，见第 5 条规则）；
     .container2 白 + .container2_bc 黄色渐变 / .container3 #F7F6F2（见 index.css）；
     .lgAssure 不设底色（透明，露出页面白底）；.lgWork #143B29。
   ▸ 想恢复某块照片：把对应规则里注释掉的 --bg-img 放开，并把该选择器加回上方的雾化骨架即可。

   【想自己调】
   --bg-a     雾化强度，0 = 照片完全露出，1 = 完全遮住（现在 0.85~0.90）
   --bg-tint  雾化底色，写 RGB 三个数字，逗号分隔，不要写 rgb()
   =========================================================== */

/* ===========================================================
   Lingu Biotechnology · 新增模块样式（信任板块 / 流程 / 表单 / 待填标记）
   仅新增，不改动原有样式
   =========================================================== */

/* ---------- 通用区块容器 ---------- */
.lgBlock {
    padding: 6.25rem 0;
}
.lgBlock--alt {
    background: #f7f6f2;
}
.lgBlock_head {
    text-align: center;
    margin-bottom: 3.25rem;
}
.lgBlock_eyebrow {
    font-size: 0.875rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #2F8F6B;
    font-weight: 700;
    margin-bottom: 0.75rem;
}
.lgBlock_title {
    font-size: 2.25rem;
    font-weight: 700;
    color: #1f5138;
    line-height: 1.35;
    margin: 0 0 0.875rem;
}
.lgBlock_title span {
    color: #2F8F6B;
}
.lgBlock_sub {
    font-size: 1rem;
    color: #6b6b6b;
    max-width: 46rem;
    margin: 0 auto;
    line-height: 1.8;
}

/* ---------- 痛点 ↔ 方案 对照卡 ---------- */
.lgWhy {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid #e8e6e0;
    border-radius: 14px;
    padding: 1.75rem 1.625rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    transition: transform .25s ease, box-shadow .25s ease;
}
.lgWhy:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.09);
}
.lgWhy_tag {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: .06em;
    color: #b45309;
    background: #fff4e3;
    border-radius: 20px;
    padding: 3px 12px;
    margin-bottom: .875rem;
}
.lgWhy_q {
    font-size: 1.0625rem;
    font-weight: 600;
    color: #333;
    margin-bottom: .75rem;
    line-height: 1.6;
}
.lgWhy_a {
    font-size: 0.9375rem;
    color: #5f5f5f;
    line-height: 1.8;
    margin: 0;
}

/* ---------- 流程四步 ---------- */
.lgStep {
    position: relative;
    text-align: center;
    padding: 0 1rem;
}
.lgStep_num {
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    background: #1f5138;
    color: #fff;
    font-size: 1.25rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.125rem;
}
.lgStep_title {
    font-size: 1.0625rem;
    font-weight: 700;
    color: #1f5138;
    margin-bottom: .5rem;
}
.lgStep_desc {
    font-size: 0.9rem;
    color: #6b6b6b;
    line-height: 1.75;
    margin: 0;
}

/* ---------- 实拍图墙 ---------- */
.lgGallery_li {
    display: block;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #e8e6e0;
}
.lgGallery_img {
    width: 100%;
    display: block;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: #f0f0f0;
}
.lgGallery_cap {
    font-size: 0.875rem;
    color: #555;
    padding: .625rem .875rem;
    text-align: center;
    line-height: 1.5;
}

/* ---------- 单证 / 贸易条款 条带 ---------- */
.lgDocs {
    background: #1f5138;
    color: #fff;
    padding: 4rem 0;
}
.lgDocs_title {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 .5rem;
}
.lgDocs_sub {
    font-size: .9375rem;
    opacity: .8;
    margin: 0 0 2rem;
}
.lgDocs_row {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}
.lgDocs_chip {
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 999px;
    padding: .5rem 1.125rem;
    font-size: .9375rem;
    line-height: 1.4;
}
.lgDocs_note {
    margin-top: 1.75rem;
    font-size: .875rem;
    opacity: .75;
    line-height: 1.7;
}

/* ---------- 联系表单 ---------- */
.lgForm {
    background: #fff;
    border: 1px solid #e8e6e0;
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .06);
}
.lgForm_row {
    display: flex;
    flex-wrap: wrap;
    gap: .875rem;
    margin-bottom: .875rem;
}
.lgForm_field {
    flex: 1 1 45%;
    min-width: 12rem;
}
.lgForm_field--full {
    flex: 1 1 100%;
}
.lgForm_label {
    display: block;
    font-size: .8125rem;
    font-weight: 600;
    color: #444;
    margin-bottom: .375rem;
}
.lgForm_input,
.lgForm_select,
.lgForm_textarea {
    width: 100%;
    border: 1px solid #ddd9d2;
    border-radius: 8px;
    padding: .625rem .75rem;
    font-size: .9375rem;
    font-family: inherit;
    color: #2a2a2a;
    background: #fcfcfb;
    box-sizing: border-box;
}
.lgForm_input:focus,
.lgForm_select:focus,
.lgForm_textarea:focus {
    outline: none;
    border-color: #2F8F6B;
    background: #fff;
}
.lgForm_textarea {
    min-height: 6.5rem;
    resize: vertical;
}
.lgForm_actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: 1.25rem;
}
.lgBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    border: none;
    border-radius: 8px;
    padding: .75rem 1.5rem;
    font-size: .9375rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    line-height: 1.2;
}
.lgBtn--primary {
    background: #178A3C;
    color: #fff;
    font-weight: 700;
    padding: .875rem 2.25rem;
    font-size: 1rem;
    border-radius: 10px;
    box-shadow: 0 4px 14px rgba(23, 138, 60, .35);
    transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.lgBtn--primary:hover {
    background: #156B2B;
    color: #fff;
    box-shadow: 0 6px 18px rgba(21, 107, 43, .45);
    transform: translateY(-1px);
}
.lgForm_hint {
    font-size: .8125rem;
    color: #8a8a8a;
    margin-top: .875rem;
    line-height: 1.6;
}

/* ---------- Get a Quote 询价表单（2026-10-24 新增） ---------- */
.lgQuote {
    border-radius: 10px;
}
/* 必填字段标签：黑字 + 前置红星（星号用 ::before，不参与文本） */
.lgQuote .lgForm_label[for="lgqEmail"]::before,
.lgQuote .lgForm_label[for="lgqCompany"]::before,
.lgQuote .lgForm_label[for="lgqMsg"]::before {
    content: '* ';
    color: #E4002B;
}
/* 间距压缩（宽度与左右布局不变） */
.lgQuote > .lgForm_row {
    gap: .625rem;
    margin-bottom: .625rem;
}
.lgQuote > .lgForm_field {
    margin-bottom: .625rem;
}
.lgQuote .lgForm_label {
    margin-bottom: .1875rem;
}
.lgQuote .lgForm_input,
.lgQuote .lgForm_select,
.lgQuote .lgForm_textarea {
    padding: .4375rem .75rem;
}
/* 区号 + 手机号并排（移动端保持并排） */
.lgQuote_phone {
    display: flex;
    gap: .625rem;
}
/* 区号列加宽到 14.5rem（232px），保证 "+852 (Hong Kong, China)" 等长标签完整显示；
   手机号输入框占剩余空间 */
.lgQuote_code {
    flex: 0 0 14.5rem;
    min-width: 14.5rem;
}
/* ---------- 可搜索区号下拉：组件样式统一在 header.css（产品页不加载本文件） ---------- */
.lgQuote_tel {
    flex: 1 1 auto;
    min-width: 0;
}
/* 留言多行文本域 + 实时字数统计 */
.lgQuote_counter {
    text-align: right;
    font-size: .6875rem;
    color: #9a9a9a;
    margin-top: .125rem;
    line-height: 1.3;
}
/* 校验错误：红框 + 红色提示 */
.lgQuote_err {
    display: none;
    font-size: .75rem;
    color: #d43c3c;
    margin-top: .25rem;
    line-height: 1.5;
}
.lgQuote_err:not(:empty) {
    display: block;
}
.lgQuote_input--error {
    border-color: #d43c3c !important;
    background: #fff5f5;
}
/* 提交按钮（绿色主按钮，居中）+ WhatsApp 小按钮 */
.lgQuote_actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    margin-top: .875rem;
}
.lgQuote_submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    min-width: 12rem;
    border: none;
    border-radius: 8px;
    padding: .5625rem 3rem;
    font-size: 1rem;
    font-weight: 600;
    background: #1E8549;
    color: #fff;
    cursor: pointer;
    line-height: 1.2;
}
.lgQuote_submit svg {
    width: 1.125rem;
    height: 1.125rem;
    flex: 0 0 auto;
}
.lgQuote_submit:hover {
    background: #17733d;
}
/* WhatsApp 次按钮：白底绿描边，与实心 Submit 明显区分 */
.lgQuote_wa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    border: 1px solid #1E8549;
    border-radius: 8px;
    padding: .5rem 1.75rem;
    font-size: .9375rem;
    font-weight: 600;
    color: #1E8549;
    background: #fff;
    text-decoration: none;
}
.lgQuote_wa svg {
    width: 1.125rem;
    height: 1.125rem;
}
.lgQuote_wa:hover {
    background: #EEF8F1;
    text-decoration: none;
}
/* 提交后的提示条：请完成发送邮件 */
.lgQuote_notice {
    display: none;
    margin-top: .875rem;
    background: #eef8f1;
    border: 1px solid #bfe3cb;
    color: #1E8549;
    border-radius: 8px;
    padding: .625rem .875rem;
    font-size: .875rem;
    line-height: 1.6;
}
.lgQuote_notice.is-visible {
    display: block;
}
@media (max-width: 576px) {
    /* 区号组件（.lgPC）的移动端尺寸统一在 header.css 的 575px 断点内 */
    .lgQuote_submit {
        width: 100%;
    }
}

/* ---------- 产品页：包装/装柜/询价 ---------- */
.lgSpec {
    margin-top: 1.5rem;
    background: #fff;
    border: 1px solid #e8e6e0;
    border-radius: 14px;
    padding: 1.5rem 1.625rem;
}
.lgSpec_title {
    font-size: 1.0625rem;
    font-weight: 700;
    color: #1f5138;
    margin: 0 0 .875rem;
}
.lgSpec_list {
    margin: 0;
    padding: 0;
    list-style: none;
}
.lgSpec_list li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .5rem 0;
    border-bottom: 1px dashed #ecebe6;
    font-size: .9375rem;
    line-height: 1.6;
}
.lgSpec_list li:last-child {
    border-bottom: none;
}
.lgSpec_key {
    color: #2a2a2a;
    font-weight: 700;
    flex: 0 0 auto;
}
.lgSpec_val {
    color: #2a2a2a;
    font-weight: 400;
    text-align: right;
}
/* ---------- FAQ ---------- */
.lgFaq_item {
    background: #fff;
    border: 1px solid #e8e6e0;
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    margin-bottom: .875rem;
}
.lgFaq_q {
    font-size: 1.0625rem;
    font-weight: 700;
    color: #1f5138;
    margin: 0 0 .5rem;
}
.lgFaq_a {
    font-size: .9375rem;
    color: #555;
    line-height: 1.85;
    margin: 0;
}

/* ---------- 待填标记（上线前必须替换） ---------- */
.lgTodo {
    background: #fff3cd;
    border: 1px dashed #d39e00;
    color: #8a5a00;
    font-weight: 700;
    border-radius: 4px;
    padding: 0 .35rem;
}
.lgNote {
    background: #fff8ed;
    border-left: 4px solid #b45309;
    border-radius: 6px;
    padding: .875rem 1.125rem;
    font-size: .875rem;
    color: #7c4a03;
    line-height: 1.7;
    margin-top: 1.5rem;
}

/* ---------- 移动端 ---------- */
@media (max-width: 767px) {
    .lgBlock {
        padding: 3.5rem 0;
    }
    .lgBlock_title {
        font-size: 1.625rem;
    }
    .lgDocs {
        padding: 2.75rem 0;
    }
    .lgForm {
        padding: 1.25rem;
    }
}

/* ---------- 内页头部 / FAQ 分类 ---------- */
.lgPageHead {
    background: #1f5138;
    color: #fff;
    padding: 4.5rem 0 4rem;
    text-align: center;
}
.lgPageHead_crumb {
    font-size: .8125rem;
    opacity: .72;
    margin-bottom: .875rem;
}
.lgPageHead_crumb a {
    display: inline; /* base.css 全局 a 为 block，会使面包屑竖排，恢复行内排成一行 */
    color: #fff;
    text-decoration: underline;
}
.lgPageHead h1 {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 .875rem;
}
.lgPageHead p {
    font-size: 1rem;
    opacity: .85;
    max-width: 44rem;
    margin: 0 auto;
    line-height: 1.8;
}
.lgFaq_cat {
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #2F8F6B;
    margin: 2.25rem 0 .875rem;
}
.lgFaq_wrap {
    max-width: 58rem;
    margin: 0 auto;
}
@media (max-width: 767px) {
    .lgPageHead {
        padding: 3rem 0 2.5rem;
    }
    .lgPageHead h1 {
        font-size: 1.75rem;
    }
}


/* ===========================================================
   2026-10-21 第二轮优化
   ① 成员卡片（修改项2）  ② Why Work With Us 新版（修改项3）
   ③ News 卡片（从 index.css 迁来，供独立新闻页用，修改项4）
   ④ 视觉层次优化（修改项5）：字重/字色/板块背景交替/间距
   =========================================================== */

/* 头像放大到 198px 后单卡横向空间变紧：本区块容器加宽到 1400px，保证右侧文字不被挤成竖条 */
.lgBlock--team .content {
	max-width: 1400px;
}

/* ---------- 修改项2：成员卡片网格 ---------- */
.lgTeamGrid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
	align-items: stretch;
}

.lgMember {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 1.1rem;
	text-align: left;
	padding: 1rem;
	background: #fff;
	border: 1px solid #e8e7e1;
	border-radius: 16px;
	transition: transform .25s ease, box-shadow .25s ease;
}

.lgMember:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 30px rgba(21, 63, 43, .10);
}

.lgMember_photo {
	flex: 0 0 198px;
	width: 198px;
	height: 198px;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	overflow: hidden;
	background: #F0F3EF;
}

.lgMember_photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
}

/* 右侧信息列：姓名 → 职位 → WhatsApp → 邮箱 */
.lgMember_info {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: .3rem;
}

.lgMember_name {
	margin: 0;
	font-size: 1.0625rem;
	font-weight: 700;
	color: #141414;
	line-height: 1.3;
}

.lgMember_role {
	margin: 0;
	font-size: .8125rem;
	font-weight: 600;
	color: #6b7a70;
	line-height: 1.4;
}

/* 职位职责描述：小号浅色字，位于职位下方（2026-10-25 卡 3 Mia） */
.lgMember_role_desc {
	margin: 0;
	font-size: .8rem;
	font-weight: 400;
	line-height: 1.5;
	color: #5A6B61;
}

.lgMember_links {
	display: flex;
	flex-direction: column;
	gap: .4rem;
	margin-top: .15rem;
}

.lgMember_links a {
	align-self: flex-start;
	max-width: 100%;
	font-size: .8125rem;
	font-weight: 600;
	line-height: 1.45;
	text-decoration: none;
	overflow-wrap: anywhere;
	border-bottom: 1px solid currentColor;
}

.lgMember_links .lgMember_link--wa {
	color: #1a7f4b;
}

.lgMember_links .lgMember_link--mail {
	color: #1d6fd0;
	border-bottom: 0; /* 仅展示文本，去掉下划线（2026-10-28） */
}

/* 邮箱仅展示不跳转（2026-10-28）：无 href 的 <a>，光标为默认、悬停不变淡 */
.lgMember_links a:not([href]) {
	cursor: default;
}

.lgMember_links a[href]:hover {
	opacity: .75;
}

/* 字母头像：暂无真人照片的成员使用，照片到位后 HTML 里换回 <img> 即可
   尺寸/圆角继承 .lgMember_photo（198px 圆形），仅改底色为品牌深绿 + 白字居中 */
.lgMember_photo--initial {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #1E8549;
}

.lgMember_photo--initial span {
	color: #fff;
	font-size: 3.25rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .02em;
}

/* 卡 3（Mia · Supply Chain Manager）：照片铺满圆形外框，四周不留白（2026-10-26）
   取消上一版的 88% 缩放——88% 会在圆框内露出一圈外框底色，观感不佳。
   外框（.lgMember_photo 198px、border-radius:50%、底色）与另两张完全一致、本次不动；
   img 恢复 100% 填充 + object-fit:cover（继承自 .lgMember_photo img），
   team_mia.jpg 为 800×800 方形，在方形容器内不会被裁切，object-position
   居中保证面部主体在圆心。 */
.lgMember--photo-sm .lgMember_photo img {
	width: 100%;
	height: 100%;
	object-position: center center;
}

/* 无直连联系方式的成员：邮箱行位置显示文字说明（非链接） */
.lgMember_link--note {
	align-self: flex-start;
	font-size: .8125rem;
	color: #7D8599;
	cursor: default;
}

/* ---------- 修改项3：Why Work With Us 新版（深色高对比卡片） ---------- */
.lgWork {
	background: #143B29;
}

.lgWork .lgBlock_eyebrow {
	color: #8FD9B6;
}

.lgWork .lgBlock_title {
	color: #fff;
}

.lgWork .lgBlock_title span {
	color: #8FD9B6;
}

.lgWork .lgBlock_sub {
	color: rgba(255, 255, 255, .78);
}

.lgWork_grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.25rem;
}

.lgWork_card {
	position: relative;
	padding: 2rem 1.5rem 1.75rem;
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 16px;
	transition: transform .25s ease, border-color .25s ease, background .25s ease;
}

.lgWork_card:hover {
	transform: translateY(-6px);
	background: rgba(255, 255, 255, .1);
	border-color: rgba(143, 217, 182, .55);
}

.lgWork_num {
	position: absolute;
	top: 1rem;
	left: 1.25rem;
	font-size: .8125rem;
	font-weight: 800;
	letter-spacing: .08em;
	color: rgba(143, 217, 182, .85);
}

.lgWork_icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	margin: 0 0 1.125rem;
	border-radius: 50%;
	background: rgba(143, 217, 182, .14);
}

.lgWork_icon svg {
	width: 1.5rem;
	height: 1.5rem;
}

.lgWork_tag {
	display: inline-block;
	margin-bottom: .875rem;
	padding: .25rem .625rem;
	border-radius: 999px;
	background: rgba(143, 217, 182, .16);
	color: #8FD9B6;
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .1em;
}

.lgWork_q {
	margin: 0 0 .75rem;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.5;
	color: #fff;
}

.lgWork_a {
	margin: 0;
	font-size: .9375rem;
	line-height: 1.8;
	color: rgba(255, 255, 255, .72);
}

/* ---------- 修改项5：视觉层次 · 字重与字色 ---------- */
.lgBlock_title {
	font-weight: 800;
	color: #111111;
	letter-spacing: -.01em;
}

.lgBlock_sub {
	color: #6b6b6b;
}

.lgHot_name,
.lgPromise_h3,
.lgTeam_name,
.lgNews_h3 {
	font-weight: 700;
	color: #141414;
}

.lgHot_desc,
.lgNews_p {
	color: #4a4a4a;
}

.lgHot_spec {
	font-weight: 800;
	color: #1E8549;
}

/* ---------- 修改项5：板块背景交替 + 上下间距 ---------- */
.lgBlock {
	padding: 7rem 0;
}

#lgHotSale {
	background: #FAF7EF;
}

.lgBlock--team {
	background: #F0F3EF;
}

.lgBlock--steps {
	background: #F7F6F2;
}

.lgBlock--gallery {
	background: #FAF7EF;
}

/* ---------- 响应式 ---------- */
@media (max-width: 1199px) {
	/* 平板及以下：卡片纵向堆叠，限宽居中，避免单卡被拉得过宽 */
	.lgTeamGrid {
		grid-template-columns: 1fr;
		max-width: 34rem;
		margin-inline: auto;
	}

	.lgWork_grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 767px) {
	.lgBlock {
		padding: 3.5rem 0;
	}

	.lgTeamGrid,
	.lgWork_grid {
		grid-template-columns: 1fr;
		gap: 1.25rem;
	}

	.lgMember {
		padding: 1.1rem .9rem;
		gap: .85rem;
	}

	.lgMember_photo {
		flex: 0 0 162px;
		width: 162px;
		height: 162px;
	}

}

/* ---------- 5) NEWS & INSIGHTS（2026-10-25 改版：左图右文列表，仅 news.html 使用） ---------- */
.lgNewsList {
	display: flex;
	flex-direction: column;
}

.lgNewsList_item {
	display: flex;
	align-items: flex-start;
	gap: 2rem;
	padding: 2.25rem 0;
	border-bottom: 1px solid #e8e7e1;
}

.lgNewsList_item:first-child {
	padding-top: 0;
}

.lgNewsList_item:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

/* 滚动加载机制：超过 20 条时由 news-load.js 隐藏后续条目，滚动到底部分批显示 */
.lgNewsList_item.is-hidden {
	display: none;
}

/* 缩略图：240×180（4:3）裁切，整张可点击 */
.lgNews_thumb {
	flex: 0 0 240px;
	border-radius: 10px;
	overflow: hidden;
	line-height: 0;
}

.lgNews_thumb img {
	display: block;
	width: 100%;
	height: 180px;
	object-fit: cover;
	transition: transform .3s ease;
}

.lgNewsList_item:hover .lgNews_thumb img {
	transform: scale(1.04);
}

/* 右侧文字：标题 + 摘要 + 日期 */
.lgNews_info {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: .5rem;
}

.lgNews_h3 {
	margin: 0;
	font-size: 1.375rem;
	font-weight: 700;
	line-height: 1.45;
	color: #16382a;
}

.lgNews_info .lgNews_h3 a {
	color: inherit;
}

.lgNews_info .lgNews_h3 a:hover {
	color: #1E8549;
}

.lgNews_date {
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #1E8549;
}

.lgNews_p {
	margin: 0;
	font-size: 1.1875rem;
	line-height: 1.75;
	color: #6B766F;
}

/* ---------- 页头横幅图 + 从左到右渐隐遮罩（仅 News 列表页，文章页 lgPageHead--post 不受影响）
   左侧深色保证文字可读，右侧遮罩淡出让图片自然显现；文字左对齐、占左侧约 55-60% ---------- */
.lgPageHead--banner {
	min-height: 340px;
	display: flex;
	align-items: center;
	background:
		linear-gradient(90deg, rgba(31, 61, 43, .9) 0%, rgba(31, 61, 43, .65) 40%, rgba(31, 61, 43, .25) 70%, rgba(31, 61, 43, 0) 100%),
		url('/assets/img/index/banner2.jpeg') center / cover no-repeat;
	text-align: left;
}

.lgPageHead--banner .content {
	width: 100%;
	padding-right: 40%;
}

.lgPageHead--banner h1 {
	font-size: 2.25rem;
	line-height: 1.35;
}

.lgPageHead--banner p {
	max-width: 36rem;
	margin: 0;
}

/* ---------- News 列表滚动加载指示器（news-load.js，>20 条时出现） ---------- */
.lgNewsMore {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: .75rem;
	padding: 2.5rem 0 1rem;
}

.lgNewsMore_spinner {
	width: 28px;
	height: 28px;
	border: 3px solid rgba(30, 133, 73, .18);
	border-top-color: #1E8549;
	border-radius: 50%;
	animation: lgNewsSpin .8s linear infinite;
}

@keyframes lgNewsSpin {
	to { transform: rotate(360deg); }
}

.lgNewsMore_txt {
	font-size: .9375rem;
	color: #8A948E;
	letter-spacing: .04em;
}

/* ---------- 响应式 ---------- */
@media (max-width: 991px) {
	.lgPageHead--banner .content {
		padding-right: 0;
	}

	.lgPageHead--banner h1 {
		font-size: 2rem;
	}

	.lgNews_thumb {
		flex: 0 0 200px;
	}

	.lgNews_thumb img {
		height: 150px;
	}
}

@media (max-width: 767px) {
	.lgNewsList_item {
		flex-direction: column;
		gap: 1rem;
		padding: 1.5rem 0;
	}

	.lgNews_thumb {
		flex: none;
		width: 100%;
	}

	.lgNews_thumb img {
		height: 200px;
	}

	.lgPageHead--banner {
		min-height: 260px;
	}

	.lgPageHead--banner h1 {
		font-size: 1.75rem;
	}
}

/* =============================================================
   2026-10-21 第三轮
   ② 数字信任横幅  ③ Buyer Assurance 买家信任  ④ 新闻文章页
   ============================================================= */

/* ---------- 修改项2：数字信任横幅 ---------- */
.lgStats {
	padding: 4rem 0;
	background: #FAF7EF;
	border-bottom: 1px solid #EFE9DA;
}

.lgStats_grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2rem 1.5rem;
	align-items: start;
}

/* 4 项统一居中（2026-10-28）：数字 / 标题 / 小字 全部 text-align:center */
.lgStats_item {
	text-align: center;
}

.lgStats_num {
	text-align: center;
	font-size: clamp(2.25rem, 3.4vw, 3rem);
	font-weight: 800;
	color: #1E8549;
	line-height: 1;
	letter-spacing: -.02em;
}

.lgStats_label {
	text-align: center;
	margin-top: .625rem;
	font-size: .9375rem;
	font-weight: 700;
	color: #111111;
	line-height: 1.5;
}

.lgStats_note {
	text-align: center;
	margin-top: .25rem;
	font-size: .8125rem;
	color: #6b6b6b;
	line-height: 1.6;
}

/* ---------- 修改项3：Buyer Assurance 买家信任（浅色卡片） ---------- */
.lgAssure_grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.25rem;
}

.lgAssure_card {
	padding: 1.75rem 1.5rem;
	background: #fff;
	border: 1px solid #e8e7e1;
	border-radius: 16px;
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.lgAssure_card:hover {
	transform: translateY(-4px);
	border-color: #cfe3d6;
	box-shadow: 0 14px 30px rgba(21, 63, 43, .08);
}

.lgAssure_icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	margin-bottom: 1rem;
	border-radius: 50%;
	background: #EAF5EE;
}

.lgAssure_icon svg {
	width: 1.5rem;
	height: 1.5rem;
}

.lgAssure_title {
	margin: 0 0 .5rem;
	font-size: 1.0625rem;
	font-weight: 700;
	color: #111111;
	line-height: 1.5;
}

.lgAssure_text {
	margin: 0;
	font-size: .9375rem;
	line-height: 1.8;
	color: #4a4a4a;
}

/* ---------- 修改项4：新闻文章页 ---------- */
/* 2026-10-25 页头视觉与列表页统一：背景图 + 从左到右渐隐蒙层（写法与 .lgPageHead--banner 完全一致），
   高度 400px、内容垂直居中；日期不再全大写；正文 block 顶部间距收紧过渡自然 */
.lgPageHead--post {
	min-height: 400px;
	display: flex;
	align-items: center;
	background:
		linear-gradient(90deg, rgba(31, 61, 43, .9) 0%, rgba(31, 61, 43, .65) 40%, rgba(31, 61, 43, .25) 70%, rgba(31, 61, 43, 0) 100%),
		url('/assets/img/index/banner2.jpeg') center / cover no-repeat;
	text-align: left;
	padding: 3.5rem 0;
}

.lgPageHead--post .content {
	width: 100%;
}

.lgPageHead--post .lgArticle_wrap {
	max-width: 46rem;
	margin: 0 auto;
}

/* 面包屑：浅绿灰、字距稍宽 */
.lgPageHead--post .lgPageHead_crumb {
	font-size: .875rem;
	color: #C9E3D3;
	letter-spacing: .02em;
}

.lgPageHead--post .lgPageHead_crumb a {
	color: #C9E3D3;
}

/* 日期行：去全大写，品牌浅绿 */
.lgArticle_date {
	display: inline-block;
	margin-bottom: 1.25rem;
	font-size: .875rem;
	font-weight: 700;
	letter-spacing: .05em;
	color: #8FD9B6;
}

/* 标题：舒展留白，与列表页 H1 同字号 */
.lgPageHead--post h1 {
	font-size: 2.25rem;
	line-height: 1.25;
	max-width: 46rem;
	margin: 0;
}

/* 正文首块与页头的衔接：顶部收紧，过渡自然 */
.lgPageHead--post + .lgBlock {
	padding-top: 3rem;
}

.lgArticle {
	max-width: 46rem;
	margin: 0 auto;
}

.lgArticle_img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 46rem;
	margin: 0 auto 1.75rem;
	border-radius: 12px;
	background: #F0F3EF;
}

.lgArticle_lead {
	font-size: 1.0625rem;
	line-height: 1.85;
	color: #333333;
	margin: 0 0 1.75rem;
}

.lgArticle_h2 {
	font-size: 1.25rem;
	font-weight: 800;
	color: #111111;
	line-height: 1.45;
	margin: 2.25rem 0 .875rem;
}

.lgArticle .lgArticle_p,
.lgArticle > p {
	font-size: 1rem;
	line-height: 1.9;
	color: #4a4a4a;
	margin: 0 0 1.25rem;
}

.lgArticle_list {
	margin: 0 0 1.5rem;
	padding-left: 1.25rem;
}

.lgArticle_list li {
	font-size: 1rem;
	line-height: 1.9;
	color: #4a4a4a;
	margin-bottom: .5rem;
}

.lgArticle_cta {
	margin-top: 2.5rem;
	padding: 1.5rem;
	border-radius: 12px;
	background: #F0F3EF;
	font-size: 1rem;
	line-height: 1.8;
	color: #333333;
}

.lgArticle_cta a {
	font-weight: 700;
	color: #1E8549;
	text-decoration: underline;
}

.lgArticle_back {
	margin-top: 2rem;
}

.lgArticle_back a {
	display: inline-block;
	padding: .65rem 1.4rem;
	border-radius: 10px;
	background: #1E8549;
	color: #ffffff;
	font-weight: 700;
	font-size: .9375rem;
	text-decoration: none;
	transition: background .2s ease, transform .2s ease;
}

.lgArticle_back a:hover {
	background: #166b3b;
	transform: translateY(-2px);
}

/* ---------- 修改项4：列表页卡片改成链接 ---------- */
.lgNews_item {
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

a.lgNews_item:hover {
	transform: translateY(-3px);
	box-shadow: 0 14px 28px rgba(21, 63, 43, .10);
	border-color: #cfe3d6;
}

.lgNews_more {
	display: inline-block;
	margin-top: .25rem;
	font-size: .8125rem;
	font-weight: 700;
	color: #1E8549;
}

/* ---------- 响应式 ---------- */
@media (max-width: 1199px) {
	.lgStats_grid,
	.lgAssure_grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 767px) {
	.lgSpec_list li {
		flex-direction: column;
		gap: .25rem;
		text-align: left;
	}

	.lgSpec_val {
		text-align: left;
	}

	.lgStats {
		padding: 2.5rem 0;
	}

	.lgStats_grid,
	.lgAssure_grid {
		grid-template-columns: 1fr;
		gap: 1.25rem;
	}

	.lgPageHead--post {
		min-height: 300px;
		padding: 2.5rem 0;
	}

	.lgArticle_h2 {
		font-size: 1.125rem;
	}
}

/* ---------- 修改项4：文章内对比表（窄屏可横向滑动） ---------- */
.lgArticle_tableWrap {
	overflow-x: auto;
	margin: 0 0 1.5rem;
}

.lgArticle_table {
	width: 100%;
	min-width: 30rem;
	border-collapse: collapse;
	font-size: .9375rem;
}

.lgArticle_table th,
.lgArticle_table td {
	padding: .75rem .875rem;
	text-align: left;
	border: 1px solid #e8e7e1;
	color: #4a4a4a;
	line-height: 1.6;
}

.lgArticle_table th {
	background: #F0F3EF;
	color: #111111;
	font-weight: 700;
	white-space: nowrap;
}

/* ---------- 通用雾化背景骨架（新板块要加背景，复制这一段并补 3 个变量即可） ---------- */
/* 【2026-10-22 调整】首页只保留 1 个板块带照片背景：
   .lgWork = "Why Work With Us / Built for Buyers Who Need Certainty"。
   其余 6 个板块已停用照片，回到纯色底（见文件末尾「已停用照片的板块」）。
   想恢复某块：把该文件末尾规则里的对应选择器删掉，再把那块规则里注释掉的 --bg-img 放开即可。 */
.lgBlock--bg,
.lgWork {
	background-color: rgb(var(--bg-tint));
	/* 第一层 = 雾化渐变（上下两端为不透明底色，与相邻板块无缝衔接）
	   第二层 = 背景照片 */
	background-image:
		linear-gradient(180deg,
			rgba(var(--bg-tint), 1) 0%,
			rgba(var(--bg-tint), .95) 8%,
			rgba(var(--bg-tint), var(--bg-a)) 26%,
			rgba(var(--bg-tint), var(--bg-a)) 74%,
			rgba(var(--bg-tint), .95) 92%,
			rgba(var(--bg-tint), 1) 100%),
		var(--bg-img);
	background-repeat: no-repeat, no-repeat;
	background-size: 100% 100%, cover;
	background-position: center center, center center;
	/* 两层都跟随板块滚动：照片按板块框取景，渐隐边缘才能严丝合缝对上板块上下边。
	   不用 fixed 的原因：fixed 会让照片按「视口」取景，每个板块只能截到同一水平条带，
	   而且照片与拖影边缘不同步，实测反而更生硬。 */
	background-attachment: scroll, scroll;
}

/* ---------- 各板块：图片 + 底色 + 强度 ---------- */
/* 1 · Hot Sale Products：金色麦田全景，米色雾化 */
#lgHotSale {
	/* 2026-10-22 停用背景图（用户要求，只有 .lgWork 保留）→ nz-cow-closeup.jpg
	   --bg-img: url('/assets/img/bg/nz-cow-closeup.jpg'); */
	--bg-tint: 250, 247, 239;
	--bg-a: .85;
}

/* 2 · 动物分类区：田园远景，浅绿灰雾化
   注意：.container2 在产品页/关于页也被复用（内容完全不同），
   所以这里只用首页专属的 .container2--bg，不碰通用类 */
.container2--bg {
	/* 2026-10-22 停用背景图（用户要求，只有 .lgWork 保留）→ animal-pasture.jpg
	   --bg-img: url('/assets/img/bg/animal-pasture.jpg'); */
	--bg-tint: 240, 243, 239;
	--bg-a: .85;
}

/* 3 · Welcome to Lingu：航拍农田，米色雾化（同样只用首页专属类） */
.container3--bg {
	/* 2026-10-22 停用背景图（用户要求，只有 .lgWork 保留）→ welcome-fields.jpg
	   --bg-img: url('/assets/img/bg/welcome-fields.jpg'); */
	--bg-tint: 250, 247, 239;
	--bg-a: .85;
}

/* 4 · Buyer Assurance：晨雾田野，近白暖调雾化（保证 4 张白卡清晰） */
.lgAssure {
	/* 2026-10-22 停用背景图（用户要求，只有 .lgWork 保留）→ nz-sheep-flock.jpg
	   --bg-img: url('/assets/img/bg/nz-sheep-flock.jpg'); */
	--bg-tint: 250, 249, 245;
	--bg-a: .85;
}

/* 5 · How We Work：海上运输（集装箱货轮航行于蓝海）
   -----------------------------------------------------------
   图片：img/bg/shipping-bg.jpg（en、id 各一份，同名）
        1600×667（2.4:1）。来源：AI 生成的写实照片——免费图库里没有一张
        "无第三方船公司涂装"的干净货轮（找到的几张都是 COSCO / MAERSK 大字船身）。
        构图：船在左半幅（x 12%~44%，纵向 20%~74%，整船完整），右侧是空旷海面 + 海平线。
   换图：覆盖同名文件即可（建议 ≥1600 宽、比例 2.4:1 左右）。
         若新图船的位置不同，改文件末尾「How We Work 专用」那条规则里的 background-position。
   遮罩：--bg-a = .85（= 工单允许的 0.85~0.90 下限，透出 15%）
         --bg-tint = 244,247,248（浅蓝灰）
         文字直接浮在图上、没有白卡片，所以遮罩不能更透；调到 .80 以下标题开始发虚。
         窄屏（≤767px）单独提到 .90，见文件末尾。
   ----------------------------------------------------------- */
.lgBlock--steps {
	--bg-img: url('/assets/img/bg/shipping-bg.jpg');
	--bg-tint: 244, 247, 248;
	--bg-a: .85;   /* 工单允许 0.85~0.90，取下限：再淡就看不见船，再透标题发虚 */
}

/* 6 · Why Work With Us：玉米地暗调，深绿雾化（保持深色高端，白字清晰） */
.lgWork {
	--bg-img: url('/assets/img/bg/why-cornfield.jpg');
	--bg-tint: 20, 59, 41;
	--bg-a: .89;
}

/* 7 · Meet Our Team：浅色草地，浅绿灰雾化 */
.lgBlock--team {
	/* 2026-10-22 停用背景图（用户要求，只有 .lgWork 保留）→ nz-sheep-portrait.jpg
	   --bg-img: url('/assets/img/bg/nz-sheep-portrait.jpg'); */
	--bg-tint: 240, 243, 239;
	--bg-a: .89;
}

/* ===========================================================
   2026-10-22 · Hot Sale Products：玉米 / 谷物特写背景
   -----------------------------------------------------------
   图片：img/bg/hot-sale-grains.jpg（en、id 各一份，同名）。AI 生成，2048×952，不放大。
        构图：左＝麻袋玉米粒/带苞叶玉米棒/青麦穗/大豆/花生；右＝奶牛+绵羊+鸡；
        主体全部压在上半部，中下部留空（正被 4 张白卡覆盖）。
   换图：覆盖同名文件即可，不用改 CSS。

   三层结构：
     ① 板块自身 = 清晰原图（顶部能看见玉米粒 / 植株细节）
     ② ::before = 同一张图 blur(9px)，mask 渐变「0% 透明 → 30% 仍透明 → 75% 全显」，
        顶部 0-30% 完全露出清晰原图（标题区细节可见），30-75% 平滑过渡逐渐模糊，
        75% 以下完全模糊（卡片区融入背景，无断层）
        后续微调：想加宽顶部清晰区→把第 2 个 30% 调大；想更模糊→blur 值调大
     ③ ::after  = 米色雾化层（顶淡底浓），保证标题与 4 张卡片可读
   内容层 .content 用 z-index:2 压在两层之上。
   =========================================================== */
#lgHotSale.lgHotSale--bg {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background-color: #FAF7EF;
	background-image: url('/assets/img/bg/hot-sale-grains.jpg');
	background-size: cover;
	background-position: center center;
}

#lgHotSale.lgHotSale--bg::before {
	content: '';
	position: absolute;
	inset: -24px;
	background-image: url('/assets/img/bg/hot-sale-grains.jpg');
	background-size: cover;
	background-position: center center;
	/* blur(9px) + mask：0%透明 → 30%透明（顶部清晰区）→ 75%全显（向下逐渐模糊） */
	filter: blur(9px);
	-webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 1) 75%);
	mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 1) 75%);
	pointer-events: none;
	z-index: 0;
}

/* 用户在用实拍玉米地照片：雾化层整体减淡，让照片看得清；只在底部加重，与下一板块衔接 */
#lgHotSale.lgHotSale--bg::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom,
			rgba(250, 247, 239, .48) 0%,
			rgba(250, 247, 239, .42) 9%,
			rgba(250, 247, 239, .44) 19%,
			rgba(250, 247, 239, .30) 30%,
			rgba(250, 247, 239, .19) 58%,
			rgba(250, 247, 239, .60) 82%,
			rgba(250, 247, 239, .94) 100%);
	pointer-events: none;
	z-index: 1;
}

#lgHotSale .content {
	position: relative;
	z-index: 2;
}

/* Hot Sale 用实拍照片后，标题区文字加轻微白色描边保证可读 */
#lgHotSale .lgBlock_eyebrow,
#lgHotSale .lgBlock_title,
#lgHotSale .lgBlock_sub {
	/* 明亮绿底上，重描边会把深色字糊成灰雾：只用极轻的一层提亮 */
	text-shadow: 0 1px 1px rgba(255, 255, 255, .35);
}

/* 标题压在图上的麻袋/玉米棒上会看不清：在标题区背后铺一块柔和米色柔光（不影响照片清晰度） */
#lgHotSale .lgBlock_head {
	position: relative;
}

#lgHotSale .lgBlock_head::before {
	content: '';
	position: absolute;
	inset: -22px -6%;
	background: radial-gradient(ellipse at center, rgba(250, 247, 239, .88) 0%, rgba(250, 247, 239, .66) 38%, rgba(250, 247, 239, .26) 62%, rgba(250, 247, 239, 0) 78%);
	filter: blur(4px);
	z-index: -1;
	pointer-events: none;
}

/* 混合谷物图顶部是亮色玉米粒：小标与副标题加深，保证压在亮底上仍清晰 */
#lgHotSale .lgBlock_eyebrow {
	color: #1F6B4D;
}

#lgHotSale .lgBlock_sub {
	color: #333B36;
}


/* ===========================================================
   2026-10-22 · How We Work（.lgBlock--steps）海上运输背景
   -----------------------------------------------------------
   图片：img/bg/shipping-bg.jpg    1600×800（2:1），en / id 同名各一份
   遮罩：--bg-a = .85   --bg-tint = 244,247,248（浅蓝灰米白）
         这两项写在上面第 5 条 .lgBlock--steps 里。
   换图后若要重定位，只改下面这一行的第 2 个值：
     第 1 个值 = 雾化渐变层（100% 100%，不要动）
     第 2 个值 = 照片层
        45% 50%     ← 当前：略偏左、垂直居中（船在左半幅，偏左才不会切船尾）
        left  /  right      → 把船推到画面左/右边缘
        center 30% / 70%    → 船往上 / 往下
   -----------------------------------------------------------
   为什么是 45% 50%：容器比例随屏宽变（en 站实测 1024=1.63:1、1440=2.38:1、1920=3.18:1），
   照片是 2.4:1 —— cover 时 ≥1440 纵向能露 76%~100%，整船（纵向 20%~74%）装得下；
   只有 ≤1024 会横向裁掉两侧，所以水平取 45% 让船往左靠，别切到船头。
   这条规则必须用 .lgBlock--steps.lgBlock--bg 双类选择器：
   .lgBlock--bg 是单类，和老骨架同权重，靠文件位置靠后才生效；双类更保险。
   =========================================================== */
.lgBlock--steps.lgBlock--bg {
	background-position: 45% center, 45% 50%;
}

/* 窄屏（≤767px）容器很窄很长，cover 后只剩照片宽度的一小条，
   船被裁成一条竖带、压在文字后面偏花 → 遮罩提到 .90（仍在工单 0.85~0.90 区间内）压一档 */
@media (max-width: 767px) {
	.lgBlock--steps {
		--bg-a: .90;
	}
}


/* ===========================================================
   2026-10-24 · SEE THE WORK 改为 3x3「工厂与仓库实景」九宫格
   第 1 排 3 个视频（自动静音循环、悬停暂停、点击全屏）
   第 2、3 排 6 张 800x600 实拍图
   =========================================================== */
.lgGallery_grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
}

.lgGallery_cell {
	position: relative;
	overflow: hidden;
	border-radius: 10px;
	background: #F4F0E7;
	border: 1px solid #e8e6e0;
	box-shadow: 0 2px 10px rgba(21, 63, 43, .05);
	transition: box-shadow .3s ease, transform .3s ease;
}

.lgGallery_cell:hover {
	box-shadow: 0 14px 30px rgba(21, 63, 43, .12);
}

/* 视频与图片统一 4:3 卡片：视频完整显示（contain + 深绿留白），图片铺满（cover） */
.lgGallery_cell .lgGallery_img,
.lgGallery_cell .lgGallery_video {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 3;
	transition: transform .5s ease;
}

.lgGallery_cell .lgGallery_video {
	object-fit: contain;
	object-position: center;
	background: #1F3D2B;
}

.lgGallery_cell .lgGallery_img {
	object-fit: cover;
	object-position: center;
	background: #F4F0E7;
}

.lgGallery_cell:hover .lgGallery_img {
	transform: scale(1.04);
}

.lgGallery_cell--video .lgGallery_video {
	cursor: pointer;
}

/* 视频格：留白处用品牌深绿填充，整格视觉统一 */
.lgGallery_cell--video {
	background: #1F3D2B;
	border-color: #1F3D2B;
}

@media (max-width: 1199px) {
	.lgGallery_grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 575px) {
	.lgGallery_grid {
		grid-template-columns: 1fr;
		gap: .875rem;
	}
}


.lgGallery_cell--video .lgGallery_video {
	cursor: pointer;
}

/* 视频格：留白处用品牌深绿填充，整格视觉统一 */
.lgGallery_cell--video {
	background: #1F3D2B;
	border-color: #1F3D2B;
}

/* 中央播放按钮：默认可见，播放中隐藏；暂停后再次点击可继续 */
.lgGallery_play {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 3.5rem;
	height: 3.5rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .92);
	color: #1F3D2B;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .25s ease, transform .25s ease, opacity .25s ease;
}

.lgGallery_play svg {
	width: 1.4rem;
	height: 1.4rem;
	margin-left: .15rem;
	fill: currentColor;
}

.lgGallery_play:hover {
	background: #fff;
	transform: translate(-50%, -50%) scale(1.06);
}

.lgGallery_play:focus-visible {
	outline: 2px solid #224B2E;
	outline-offset: 3px;
}

.lgGallery_cell--video.is-playing .lgGallery_play {
	opacity: 0;
	pointer-events: none;
}

/* ============================================================
   团队卡 WhatsApp 仿聊天浮层（2026-10-28）
   仅由 .js-wa-popup（Pandeng / Sandy 两张卡）触发；
   footer / Get In Touch / 表单弹窗的 WhatsApp 链接不受影响。
   ============================================================ */
.lgwa {
	position: fixed;
	inset: 0;
	z-index: 9998;
	visibility: hidden;
	opacity: 0;
	transition: opacity .22s ease, visibility .22s ease;
}
.lgwa.is-open {
	visibility: visible;
	opacity: 1;
}
.lgwa_mask {
	position: absolute;
	inset: 0;
	background: rgba(14, 32, 23, .32);
}
.lgwa_panel {
	position: absolute;
	right: 24px;
	bottom: 24px;
	width: 320px;
	max-width: calc(100vw - 32px);
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 18px 48px rgba(12, 40, 26, .26);
	overflow: hidden;
	transform: translateY(14px);
	transition: transform .24s cubic-bezier(.22, .61, .36, 1);
}
.lgwa.is-open .lgwa_panel {
	transform: none;
}
.lgwa_head {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 13px 46px 13px 14px;
	background: #2F8F6B;
	color: #fff;
}
.lgwa_avatar {
	width: 40px;
	height: 40px;
	flex: 0 0 auto;
	border-radius: 50%;
	object-fit: cover;
	background: #dbe8e0;
	border: 2px solid rgba(255, 255, 255, .6);
}
.lgwa_meta {
	min-width: 0;
}
.lgwa_name {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	color: #fff;
}
.lgwa_dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #57E389;
	box-shadow: 0 0 0 2px rgba(87, 227, 137, .28);
}
.lgwa_sub {
	margin-top: 3px;
	font-size: 11.5px;
	line-height: 1.3;
	color: rgba(255, 255, 255, .88);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.lgwa_close {
	position: absolute;
	top: 9px;
	right: 9px;
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .18);
	color: #fff;
	font-size: 19px;
	line-height: 1;
	cursor: pointer;
	transition: background .18s ease;
}
.lgwa_close:hover {
	background: rgba(255, 255, 255, .34);
}
.lgwa_body {
	padding: 16px 14px;
	background: #EFF4F0;
}
.lgwa_bubble {
	position: relative;
	background: #E3EDE6;
	border-radius: 4px 12px 12px 12px;
	padding: 9px 12px;
	box-shadow: 0 1px 2px rgba(18, 48, 32, .07);
}
.lgwa_bubble::before {
	content: '';
	position: absolute;
	left: -6px;
	top: 0;
	width: 12px;
	height: 12px;
	background: #E3EDE6;
	clip-path: polygon(100% 0, 100% 100%, 0 0);
}
.lgwa_text {
	display: block;
	width: 100%;
	min-height: 72px;
	max-height: 160px;
	padding: 0;
	border: 0;
	outline: none;
	background: transparent;
	resize: none;
	overflow-y: auto;
	font-family: inherit;
	font-size: 13.5px;
	line-height: 1.55;
	color: #1E2A24;
}
.lgwa_foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 11px 14px 13px;
	background: #fff;
	border-top: 1px solid #EDF1EE;
}
.lgwa_hint {
	font-size: 11px;
	line-height: 1.3;
	color: #7B8A82;
}
.lgwa_send {
	flex: 0 0 auto;
	padding: 9px 22px;
	border: 0;
	border-radius: 999px;
	background: #2F8F6B;
	color: #fff;
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
	transition: background .18s ease;
}
.lgwa_send:hover {
	background: #287A5B;
}
@media (max-width: 640px) {
	.lgwa_mask {
		background: rgba(14, 32, 23, .45);
	}
	.lgwa_panel {
		right: 0;
		left: 0;
		bottom: 0;
		width: 100%;
		max-width: none;
		border-radius: 16px 16px 0 0;
		transform: translateY(100%);
	}
	.lgwa.is-open .lgwa_panel {
		transform: none;
	}
	.lgwa_text {
		font-size: 14px;
	}
}