@charset "utf-8";
/* ==========================================================
   小牛乱逛 · 企业官网 http://www.xiaoniu.net.cn/
   设计基调：简约 / 大气 / 留白 / 牧场自然色
   ========================================================== */

/* ---------- 设计变量 ---------- */
:root {
  --ink:        #14181A;
  --ink-2:      #3D4744;
  --muted:      #7C8784;
  --line:       #EBE6DC;
  --line-soft:  #F4F0E9;
  --cream:      #FDFBF7;
  --cream-2:    #F8F4ED;
  --white:      #FFFFFF;
  /* 2026-10-03 整体提亮：主色仍为墨绿，但明度上调，去掉"闷"感 */
  --green:      #276B55;
  --green-2:    #338568;
  --green-soft: #EDF3EE;
  --gold:       #B98B3E;
  --gold-soft:  #F4EBDA;

  /* 2026-10-06：history.html「品牌故事」海报版专用（取自品牌故事海报·宣纸版） */
  --paper:      #F4F0E6;   /* 宣纸底色（取自海报原图） */
  --sienna:     #7A4A28;   /* 暖赭：年代轴数字 / 居中重点句 */

  /* 站点主色（墨绿）· 首页顶部滚动广告沿用这一套，与全站保持一致 */
  --hero:        #42957A;
  --hero-deep:   #357B63;
  --hero-2:      #4EA187;
  --hero-3:      #5EAE95;
  --hero-accent: #E7C98A;
  --hero-soft:   #EDF3EE;

  --radius:     6px;
  --radius-lg:  14px;
  --shadow:     0 2px 20px rgba(20, 24, 26, .06);
  --shadow-lg:  0 18px 50px rgba(20, 24, 26, .10);

  /* 2026-10-03 加宽：版面更开阔，图片可显示得更大 */
  --maxw:       1320px;
  --nav-h:      72px;

  --sans: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif: "Source Han Serif SC", "Noto Serif SC", "Songti SC", "STSong", Georgia, serif;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- 基础重置 ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.8;
  color: var(--ink-2);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; transition: color .25s var(--ease); }
h1, h2, h3, h4, h5 { font-family: var(--serif); color: var(--ink); margin: 0; font-weight: 600; line-height: 1.35; letter-spacing: .01em; }
p { margin: 0 0 1em; }
ul { margin: 0; padding: 0; list-style: none; }
button, input, textarea, select { font: inherit; color: inherit; }
::selection { background: var(--green); color: #fff; }

.container { width: min(100% - 48px, var(--maxw)); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- 通用排版组件 ---------- */
.eyebrow {
  font-size: 12px; letter-spacing: .28em; text-transform: uppercase;
  color: var(--gold); font-weight: 600; display: inline-flex; align-items: center; gap: 10px;
}
.eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--gold); display: inline-block; }
.section { padding: 108px 0; }
/* 2026-10-05：产品页品类区块（9 个），收窄上下留白，避免整页过长 */
.section--cat { padding: 76px 0; }
.section--cat .section-head { margin-bottom: 42px; }
.section--cream { background: var(--cream); }
.section--soft { background: var(--cream-2); }
.section-head { max-width: 760px; margin-bottom: 60px; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head h2 { font-size: clamp(28px, 3.4vw, 42px); margin: 18px 0 16px; }
.section-head p { color: var(--muted); font-size: 16.5px; margin: 0; }
.divider { width: 56px; height: 2px; background: var(--gold); margin: 22px 0 0; }
.center .divider { margin-inline: auto; }

.lead { font-size: 17.5px; color: var(--ink-2); }

/* ---------- 按钮 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 50px; padding: 0 30px; border-radius: var(--radius);
  font-size: 15px; font-weight: 500; letter-spacing: .04em;
  border: 1px solid transparent; cursor: pointer;
  transition: all .3s var(--ease);
}
.btn-primary { background: var(--green); color: #fff; }
.btn-primary:hover { background: var(--green-2); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(39,107,85,.24); }
.btn-ghost { border-color: rgba(255,255,255,.6); color: #fff; }
.btn-ghost:hover { background: #fff; color: var(--green); }
.btn-outline { border-color: var(--green); color: var(--green); }
.btn-outline:hover { background: var(--green); color: #fff; }
.btn .arrow { transition: transform .3s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }

/* ---------- 顶部信息条 + 导航 ---------- */
.topbar { background: var(--green-2); color: rgba(255,255,255,.94); font-size: 13px; height: 40px; display: flex; align-items: center; }
.topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.topbar-links { display: flex; align-items: center; gap: 22px; }
.topbar a:hover { color: #fff; }

.site-header { position: fixed; inset: 0 0 auto 0; z-index: 100; transition: background .35s var(--ease), box-shadow .35s var(--ease); }
.site-header .nav-wrap { transition: background .35s var(--ease); }
.site-header.is-stuck { background: rgba(255,255,255,.94); backdrop-filter: saturate(1.4) blur(12px); box-shadow: 0 1px 0 var(--line), 0 8px 30px rgba(20,24,26,.05); }
.site-header.is-stuck .brand-sub,
.site-header.is-stuck .nav-links a { color: var(--ink-2); }
.site-header.is-stuck .brand-mark { color: var(--ink); }
.site-header.is-stuck .nav-links a:hover,
.site-header.is-stuck .nav-links a.active { color: var(--green); }

.nav { height: var(--nav-h); display: flex; align-items: center; gap: 40px; }
.brand { display: flex; align-items: center; gap: 12px; margin-right: auto; }
.brand svg { width: 40px; height: 40px; flex: none; }
.brand-logo { width: 40px; height: 40px; flex: none; object-fit: contain; border-radius: 50%; }
.brand-logo--footer { background: #fff; padding: 4px; box-sizing: border-box; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-mark { font-family: var(--serif); font-size: 21px; font-weight: 700; letter-spacing: .06em; color: var(--ink); }
.brand-sub { font-size: 10.5px; letter-spacing: .22em; color: var(--muted); text-transform: uppercase; }

.nav-links { display: flex; align-items: center; gap: 38px; }
/* 导航项增至 9 个后，中等宽度屏幕收窄间距，避免换行 */
@media (max-width: 1500px) { .nav { gap: 28px; } .nav-links { gap: 26px; } }
@media (max-width: 1320px) { .nav { gap: 20px; } .nav-links { gap: 18px; } .nav-links a { font-size: 15px; } }

/* 双列图片行（物料细节 / 对比图） */
.duo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
@media (max-width: 860px) { .duo-grid { grid-template-columns: 1fr; } }
.nav-links a { position: relative; font-size: 15.5px; color: var(--ink-2); padding: 6px 0; }
.nav-links a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1.5px; width: 0; background: var(--gold);
  transition: width .35s var(--ease);
}
.nav-links a:hover::after, .nav-links a.active::after { width: 100%; }
.nav-links a:hover, .nav-links a.active { color: var(--green); }

.nav-toggle { display: none; width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer; padding: 10px; }
.nav-toggle span { display: block; height: 1.5px; background: var(--ink); margin: 5px 0; transition: all .3s var(--ease); }
.nav-toggle.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* 导航透明态（覆盖在 Hero / 内页横幅图上）——全站生效，未吸顶时统一白字
   说明：所有页面（首页 + 8 个内页）顶部都有深色图片横幅，头部 fixed 且未吸顶时无底色，
   故深色文字会看不清；这里统一压成白色，吸顶（.is-stuck）后才恢复深色。 */
/* 横幅压暗减弱后，靠文字投影保证透明态导航依然读得清（2026-10-03） */
.site-header:not(.is-stuck) .brand-mark { color: #fff; text-shadow: 0 1px 9px rgba(4,26,40,.6); }
.site-header:not(.is-stuck) .brand-sub { color: rgba(255,255,255,.82); text-shadow: 0 1px 9px rgba(4,26,40,.6); }
.site-header:not(.is-stuck) .nav-links a { color: rgba(255,255,255,.95); text-shadow: 0 1px 9px rgba(4,26,40,.6); }
.site-header:not(.is-stuck) .nav-links a:hover,
.site-header:not(.is-stuck) .nav-links a.active { color: #fff; }
.site-header:not(.is-stuck) .nav-links a::after { background: rgba(255,255,255,.9); }
.site-header:not(.is-stuck) .nav-toggle span { background: #fff; }
.site-header:not(.is-stuck) .topbar { background: rgba(20,40,33,.22); }
/* 未吸顶时「商务合作」按钮改成白色实底 + 深绿字，压在图上更亮、更清楚 */
.site-header:not(.is-stuck) .nav-cta { background: #fff; border-color: #fff; color: var(--green); }
.site-header:not(.is-stuck) .nav-cta:hover { background: rgba(255,255,255,.88); border-color: transparent; color: var(--hero-deep); }

/* ---------- 页面头部（内页） ---------- */
.page-hero {
  position: relative; padding: calc(var(--nav-h) + 96px) 0 96px;
  min-height: clamp(520px, 66vh, 680px);      /* 2026-10-03：横幅加高，画面更满 */
  display: flex; align-items: center;
  background: linear-gradient(120deg, #357B63 0%, #42957A 55%, #4EA187 100%);
  color: #fff; overflow: hidden;
}
.page-hero::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(900px 400px at 82% 20%, rgba(185,139,62,.22), transparent 65%);
}
/* 内页顶部实景横幅：图片铺满 + 左侧加深，保证白色文字始终读得清 */
.page-hero-media { position: absolute; inset: 0; z-index: 0; }
.page-hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 55%; }
.page-hero-media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(11,30,24,.52) 0%, rgba(11,30,24,.36) 38%, rgba(11,30,24,.16) 72%, rgba(11,30,24,.08) 100%),
    linear-gradient(180deg, rgba(11,30,24,.22) 0%, rgba(11,30,24,0) 30%, rgba(11,30,24,.20) 100%);
}
.page-hero .container { position: relative; z-index: 2; }
/* 压暗层减弱后，靠文字投影补回对比度（2026-10-03） */
.page-hero h1 { color: #fff; font-size: clamp(32px, 4.4vw, 52px); margin: 16px 0 18px; text-shadow: 0 2px 22px rgba(7,20,16,.66); }
.page-hero p { color: #fff; max-width: 640px; font-size: 17px; margin: 0; text-shadow: 0 1px 14px rgba(7,20,16,.62); }
.page-hero .eyebrow { color: #fff; text-shadow: 0 1px 12px rgba(7,20,16,.62); }          /* 横幅区：小标题统一白色 */
.page-hero .eyebrow::before { background: rgba(255,255,255,.72); }
.crumb { font-size: 13px; color: #fff; display: flex; gap: 8px; align-items: center; text-shadow: 0 1px 10px rgba(7,20,16,.6); }
.crumb a:hover { color: #fff; }

/* ---------- history 顶部：西迁路线图（动态 SVG） ---------- */
.page-hero-media svg { width: 100%; height: 100%; display: block; }
.hr-route {
  stroke-dasharray: 1; stroke-dashoffset: 1;       /* pathLength=1 时整条为一段，靠 offset 描出 */
  animation: hr-draw 3.4s ease forwards;
}
@keyframes hr-draw { to { stroke-dashoffset: 0; } }
.hr-caravan {
  offset-path: path("M1300,610 C1180,560 1120,490 960,430 C820,372 620,430 430,560 C360,608 300,662 250,689");
  offset-rotate: 0deg;                              /* 小罐始终保持正立 */
  animation: hr-move 7.5s linear infinite;
}
@keyframes hr-move { from { offset-distance: 0%; } to { offset-distance: 100%; } }
.hr-pulse, .hr-pulse2 {
  transform-box: fill-box; transform-origin: center;
  animation: hr-pulse 3s ease-out infinite;
}
@keyframes hr-pulse {
  0%   { transform: scale(.4); opacity: .85; }
  80%  { transform: scale(2.8); opacity: 0; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hr-route { animation: none; stroke-dashoffset: 0; }
  .hr-caravan { animation: none; offset-distance: 100%; }
  .hr-pulse, .hr-pulse2 { animation: none; opacity: 0; }
}

/* 终点原在左上被导航遮挡：把正文改顶部对齐，终点标注翻到节点下方左下角（2026-10-04 修复） */
.page-hero--route {
  align-items: flex-start; padding-top: calc(var(--nav-h) + 48px);
  /* 路线图是 16:9，窄屏改为整图居中后上下会露出底色。默认背景是亮绿渐变，
     会与深色路线图割裂成「绿边 + 黑图」；这里换成与 SVG 同一条深色渐变，接缝即消失（2026-10-06） */
  background: linear-gradient(150deg, #15231e 0%, #1e2a22 58%, #2c2118 100%);
}
/* 窄屏：slice 会把「赛里木湖·温泉县」等两侧节点连标注一起裁出屏幕，
   改为整图按比例居中显示。断点由 600px 提到 1080px —— 实测 820px 视口下已有节点被裁（2026-10-06） */
@media (max-width: 1080px) {
  .page-hero--route .page-hero-media { display: flex; align-items: center; justify-content: center; }
  .page-hero--route .page-hero-media svg { width: 100%; height: auto; }
  /* SVG 自带底色画不满整幅，会留下矩形接缝；隐藏后由横幅自身的同色渐变接续，画面才连续 */
  .page-hero--route .page-hero-media svg .hr-frame { display: none; }
  /* 远山雪峰本是顶部装饰，窄屏整图居中后正落在正文下方，降淡以免干扰阅读 */
  .page-hero--route .page-hero-media svg .hr-peaks { opacity: .2; }
}
/* 手机：屏更矮，城市标注会与正文打架，仅保留路线与节点光点作氛围装饰 */
@media (max-width: 600px) {
  .page-hero--route .page-hero-media svg text { display: none; }
}

/* ---------- 首页 · 顶部滚动广告（3 个广告位） ---------- */
.hero {
  position: relative; display: flex; flex-direction: column; color: #fff; overflow: hidden;
  /* 图片尚未上传时的兜底底色：赛里木湖蓝，保证白色文字始终有足够对比 */
  background: linear-gradient(120deg, var(--hero-deep) 0%, var(--hero) 52%, var(--hero-2) 100%);
}

.slides-viewport { position: relative; overflow: hidden; flex: 1 1 auto; }
.slides-track { display: flex; width: 100%; will-change: transform; transition: transform .9s var(--ease); }

.slide {
  position: relative; flex: 0 0 100%; min-height: clamp(660px, 94vh, 1020px);   /* 2026-10-03：接近满屏，画面更大气 */
  display: flex; align-items: flex-end;
  /* 每屏底色略有差异，未放图时三屏也能看出层次（2026-10-03 同步提亮） */
  background: linear-gradient(120deg, var(--hero-deep) 0%, var(--hero) 52%, var(--hero-2) 100%);
}
.slide:nth-child(2) { background: linear-gradient(120deg, #2E7A61 0%, #3A8C6F 55%, #46A184 100%); }
.slide:nth-child(3) { background: linear-gradient(120deg, #3A866B 0%, #45977C 48%, #51A88B 100%); }

.slide-media { position: absolute; inset: 0; }
.slide-media .ph { position: absolute; inset: 0; background: transparent; }
.slide-media img { width: 100%; height: 100%; object-fit: cover; }
/* 压暗层：只压左侧文字区，右侧大片保持通透
   2026-10-03 二次提亮：整屏压暗取消，改为「文字区局部压暗」——
   左侧 0–22% 保留 .50/.30 保证白字可读，48% 以后降到 .08/.02 直至全透明，画面主体几乎原色
   2026-10-03 三次微调：新增一枚只罩住文字块的柔和椭圆压暗（radial），
   因为换成镜面亮水 + 厚雪后，描述行压在亮青色水面上对比不够 —— 只在左侧 12%/72% 处加深，右侧天空与湖面不受影响 */
.slide-media::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(1020px 640px at 12% 72%, rgba(9,26,20,.40), rgba(9,26,20,0) 68%),
    linear-gradient(96deg, rgba(13,32,26,.50) 0%, rgba(13,32,26,.30) 24%, rgba(13,32,26,.08) 48%, rgba(13,32,26,.02) 72%, transparent 100%),
    linear-gradient(180deg, rgba(13,32,26,.20) 0%, rgba(13,32,26,0) 30%, rgba(13,32,26,.16) 100%);
}

.slide-inner { position: relative; z-index: 3; width: 100%; padding: calc(var(--nav-h) + 88px) 0 152px; }
.slide-copy { max-width: 720px; opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.slide-copy.in { opacity: 1; transform: none; }
/* 兜底：脚本未执行时，第一屏文案必须可见（不依赖 JS 才能读到核心信息） */
.slide:first-child .slide-copy { opacity: 1; transform: none; }

.slide-eyebrow {
  display: inline-flex; align-items: center; gap: 12px; font-size: 12px; font-weight: 600;
  letter-spacing: .28em; text-transform: uppercase; color: #fff;
  text-shadow: 0 2px 18px rgba(4,26,40,.80), 0 1px 5px rgba(4,26,40,.55);
}
.slide-eyebrow::before { content: ""; width: 28px; height: 1px; background: rgba(255,255,255,.72); display: inline-block; }

.hero .container > h1,
.slide h1 { color: #fff; font-size: clamp(32px, 5vw, 62px); line-height: 1.24; margin: 20px 0 18px; text-shadow: 0 2px 26px rgba(4,26,40,.80), 0 1px 6px rgba(4,26,40,.55); }
.slide h1 em, .slide-title em { font-style: normal; color: #fff; font-weight: 700; }
.slide-title { color: #fff; font-size: clamp(30px, 4.6vw, 56px); line-height: 1.3; margin: 20px 0 18px; text-shadow: 0 2px 26px rgba(4,26,40,.80), 0 1px 6px rgba(4,26,40,.55); }
.slide-title em { font-style: normal; color: #fff; font-weight: 700; }
.slide-desc { font-size: 17.5px; font-weight: 500; color: #fff; max-width: 570px; margin: 0; text-shadow: 0 2px 18px rgba(4,26,40,.80), 0 1px 5px rgba(4,26,40,.55); }

/* 胶囊标签：2026-10-03 三个广告位均已去掉（与下方数据条重复、文案过密），
   样式保留备回溯；如需恢复，在 .slide-desc 之后加回 <div class="slide-badges"> 即可 */
.slide-badges { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 34px; }
.slide-badges span {
  font-size: 13.5px; letter-spacing: .05em; color: #fff; padding: 7px 15px; border-radius: 999px;
  /* 背景变亮后，胶囊改深色底才压得住（2026-10-03） */
  background: rgba(13,32,26,.34); border: 1px solid rgba(255,255,255,.38);
  backdrop-filter: blur(3px); text-shadow: 0 1px 6px rgba(4,26,40,.5);
}
/* 去掉胶囊后，按钮与描述之间靠这里留白（原来由 .slide-badges 的下外边距提供） */
.slide-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 34px; }
/* 首屏次按钮落在亮水面上，加一层深色底才看得清（仅作用于滚动广告区，其他页 .btn-ghost 不受影响） */
.slide-actions .btn-ghost { background: rgba(13,32,26,.30); border-color: rgba(255,255,255,.55); backdrop-filter: blur(3px); }
.slide-actions .btn-ghost:hover { background: #fff; color: var(--green); border-color: #fff; }

/* 按钮沿用站点默认样式：主按钮墨绿底白字，次按钮白描边（与改版前的首屏一致） */

/* 左右箭头 */
.sl-arrow {
  position: absolute; top: 50%; z-index: 6; width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  border: 1px solid rgba(255,255,255,.42); background: rgba(13,32,26,.18); color: #fff;
  transform: translateY(-50%); transition: all .3s var(--ease); backdrop-filter: blur(3px);
  box-shadow: 0 2px 12px rgba(4,26,40,.28);
}
.sl-arrow:hover { background: #fff; color: var(--hero-deep); border-color: #fff; transform: translateY(-50%) scale(1.06); }
.sl-prev { left: 30px; }
.sl-next { right: 30px; }

/* 底部进度指示点 */
.sl-dots { position: absolute; left: 0; right: 0; bottom: 46px; z-index: 6; display: flex; justify-content: center; gap: 14px; }
.sl-dot {
  position: relative; width: 46px; height: 3px; padding: 0; border: 0; border-radius: 2px;
  background: rgba(255,255,255,.42); overflow: hidden; cursor: pointer; transition: background .3s var(--ease);
  box-shadow: 0 1px 5px rgba(4,26,40,.35);
}
.sl-dot:hover { background: rgba(255,255,255,.7); }
.sl-dot span { position: absolute; inset: 0 auto 0 0; width: 0; background: #fff; border-radius: 2px; }
.sl-dot.is-active span { animation: slProgress 5.6s linear forwards; }
.sl-dot.is-static span { width: 100%; animation: none; }
@keyframes slProgress { from { width: 0; } to { width: 100%; } }
.hero.is-paused .sl-dot.is-active span { animation-play-state: paused; }

/* 广告位缺图时的占位：沿用深墨绿，避免冒出一块米底色 */
.slide-media .ph.img-missing::before {
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.045) 0 12px, transparent 12px 24px),
    linear-gradient(135deg, #3A8C6F, #2E7A61);
}
.slide-media .ph.img-missing::after { color: rgba(255,255,255,.92); border: 1px dashed rgba(255,255,255,.42); margin: 60px; }

@media (prefers-reduced-motion: reduce) {
  .slides-track { transition: none; }
  .slide-copy { opacity: 1; transform: none; transition: none; }
}

/* 数据带：2026-10-03 二次提亮 —— 由「深绿底白字」改为「浅底深字」，首页下半部明显变亮 */
.hero-stats { position: relative; z-index: 3; padding-bottom: 34px; background: rgba(255,255,255,.95); backdrop-filter: blur(8px); }
.hero-stats .container { display: grid; grid-template-columns: repeat(4, 1fr); }
.hero-stats .stat { padding: 34px 0 40px; border-right: 1px solid var(--line); padding-right: 20px; }
.hero-stats .stat:last-child { border-right: 0; }
.hero-stats .stat:not(:first-child) { padding-left: 28px; }
.stat-num { font-family: var(--serif); font-size: 40px; font-weight: 700; color: var(--green); line-height: 1.1; text-shadow: none; }
.stat-num i { font-style: normal; font-size: 18px; margin-left: 6px; color: var(--green-2); }
.stat-label { font-size: 13.5px; color: var(--muted); letter-spacing: .1em; margin-top: 8px; }

/* ---------- 图片占位（缺图时优雅降级） ---------- */
.ph { position: relative; margin: 0; overflow: hidden; background: var(--cream-2); }
.ph img { width: 100%; height: 100%; object-fit: cover; }
.ph.img-missing::before {
  content: ""; position: absolute; inset: 0;
  background:
    repeating-linear-gradient(45deg, rgba(39,107,85,.045) 0 12px, transparent 12px 24px),
    linear-gradient(135deg, #F6F2EA, #EDE7DA);
}
.ph.img-missing::after {
  content: attr(data-label) "\A" attr(data-size);
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px; white-space: pre; text-align: center;
  font-size: 13px; line-height: 1.7; color: var(--muted); letter-spacing: .04em; padding: 20px;
  border: 1px dashed rgba(39,107,85,.28); margin: 14px;
}
.ph.img-missing img { opacity: 0; }
.ratio-21-9 { aspect-ratio: 21 / 9; }
.ratio-16-9 { aspect-ratio: 16 / 9; }
.ratio-4-3  { aspect-ratio: 4 / 3; }
.ratio-1-1  { aspect-ratio: 1 / 1; }
.ratio-3-4  { aspect-ratio: 3 / 4; }

/* ---------- 业务板块卡片 ---------- */
.biz-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.biz-card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.biz-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: transparent; }
.biz-card .ph { aspect-ratio: 4 / 5; }     /* 2026-10-03：业务卡片图加高 */
.biz-body { padding: 26px 26px 30px; }
.biz-body h3 { font-size: 21px; margin-bottom: 6px; }
.biz-en { font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.biz-body p { color: var(--muted); font-size: 14.8px; margin: 12px 0 18px; }
.biz-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.biz-tags span { font-size: 12.5px; padding: 4px 11px; background: var(--green-soft); color: var(--green); border-radius: 999px; }
.biz-more { font-size: 14px; color: var(--green); display: inline-flex; align-items: center; gap: 8px; font-weight: 500; }
.biz-more:hover { gap: 14px; }

/* ---------- 关于摘要 ---------- */
.about-split { display: grid; grid-template-columns: 1.05fr .95fr; gap: 76px; align-items: center; }
.about-split .ph { border-radius: var(--radius); aspect-ratio: 1/1; }  /* 2026-10-03：配图加高，画面更满 */
.about-split .ph.img-missing::after { margin: 14px; }

/* ---------- 品牌故事 · 长文叙事（2026-10-04 传说版） ---------- */
.brand-story .section-head { margin-bottom: 48px; }
.story-body { max-width: 820px; margin: 0 auto; }
.story-body > p { color: var(--muted); font-size: 16.6px; line-height: 2.02; margin: 0 0 22px; }
.story-body > p strong { color: var(--ink); font-weight: 600; }
.story-photo { margin: 40px 0 34px; }
.story-photo .ph { border-radius: var(--radius); aspect-ratio: 4 / 3; }
.story-photo figcaption { font-size: 13.6px; color: var(--muted); margin-top: 14px; line-height: 1.72; text-align: center; }
/* 结尾金句：需盖过 .story-body > p，故用同级更高特异性选择器 */
.story-body > p.story-final {
  font-family: var(--serif); font-size: clamp(19px, 2.1vw, 23px); line-height: 1.82;
  color: var(--ink); text-align: center; margin: 44px 0 0;
  padding-top: 36px; border-top: 1px solid var(--line-soft);
}
.story-body > p.story-final strong { color: var(--gold); font-weight: 600; }
@media (max-width: 860px) {
  .story-body > p { font-size: 15.8px; line-height: 1.95; margin-bottom: 18px; }
  .story-photo { margin: 30px 0 26px; }
  .story-photo figcaption { text-align: left; }
  .story-body > p.story-final { font-size: 19px; padding-top: 28px; margin-top: 34px; }
}
.about-facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); margin: 34px 0 32px; border: 1px solid var(--line); }
.about-facts div { background: var(--white); padding: 22px 24px; }
.about-facts strong { display: block; font-family: var(--serif); font-size: 27px; color: var(--green); line-height: 1.2; }
.about-facts span { font-size: 13.5px; color: var(--muted); }

/* ---------- 品质承诺 ---------- */
.promise-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
.promise { padding: 34px 28px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); }
.promise .num { font-family: var(--serif); font-size: 15px; color: var(--gold); letter-spacing: .16em; }
.promise h3 { font-size: 19px; margin: 14px 0 10px; }
.promise p { font-size: 14.6px; color: var(--muted); margin: 0; }

/* ---------- 荣誉 ---------- */
.honor-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.honor {
  padding: 30px 28px; border-radius: var(--radius); background: var(--white);
  border: 1px solid var(--line); border-left: 3px solid var(--gold);
}
.honor h4 { font-size: 17px; margin-bottom: 8px; }
.honor p { font-size: 13.8px; color: var(--muted); margin: 0; }

/* ---------- 时间轴 ---------- */
.timeline { position: relative; padding-left: 34px; }
.timeline::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 1px; background: var(--line); }
.tl-item { position: relative; padding-bottom: 42px; scroll-margin-top: calc(var(--nav-h, 72px) + 28px); }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before {
  content: ""; position: absolute; left: -34px; top: 9px; width: 15px; height: 15px; border-radius: 50%;
  background: var(--white); border: 2px solid var(--green);
}
.tl-year { font-family: var(--serif); font-size: 20px; color: var(--green); font-weight: 700; }
.tl-item h4 { font-size: 17px; margin: 6px 0 8px; }
.tl-item p { font-size: 14.8px; color: var(--muted); margin: 0; }

/* 时间轴条目 · 标题外链（点击在新窗口打开第三方原文） */
.tl-item h4 a.tl-link { color: inherit; transition: color .25s var(--ease); }
.tl-item h4 a.tl-link:hover { color: var(--green); }
.ext-icon {
  display: inline-block; margin-left: 7px; font-size: 12.5px; font-weight: 400;
  color: var(--gold); transform: translateY(-1px);
  transition: transform .25s var(--ease), color .25s var(--ease);
}
.tl-item h4 a.tl-link:hover .ext-icon { transform: translate(2px, -3px); color: var(--green); }
.story-note .src-link {
  display: inline-flex; align-items: center; gap: 6px; margin-left: 4px;
  color: var(--green); font-weight: 500; white-space: nowrap;
  border-bottom: 1px solid rgba(39,107,85,.28); transition: color .25s var(--ease), border-color .25s var(--ease);
}
.story-note .src-link:hover { color: var(--gold); border-color: var(--gold); }
.story-note .src-link .arrow { transition: transform .3s var(--ease); }
.story-note .src-link:hover .arrow { transform: translateX(4px); }
.tl-hint { text-align: center; font-size: 13.5px; color: var(--muted); margin: -22px 0 40px; }

/* 延伸阅读 · 往期足迹索引 */
.src-sub {
  font-family: var(--serif); font-size: 20px; color: var(--ink);
  margin: 54px 0 22px; padding-bottom: 12px; border-bottom: 1px solid var(--line);
}
.src-sub:first-of-type { margin-top: 10px; }
.past-list { display: grid; gap: 0; max-width: 900px; }
.past-item {
  display: grid; grid-template-columns: 132px 1fr; gap: 20px;
  padding: 20px 0; border-bottom: 1px dashed var(--line);
}
.past-item:last-child { border-bottom: 0; }
.past-date { font-family: var(--serif); font-size: 15px; font-weight: 700; color: var(--green); letter-spacing: .03em; }
.past-body h4 { font-size: 16px; margin: 0 0 6px; line-height: 1.6; transition: color .25s var(--ease); }
.past-body h4 a { color: inherit; }
.past-body h4 a:hover { color: var(--green); }
.past-body p { font-size: 14.2px; color: var(--muted); line-height: 1.8; margin: 0; }
.src-badge {
  display: inline-block; margin: 0 10px; padding: 2px 9px;
  font-size: 11.5px; color: var(--green); background: var(--green-soft);
  border-radius: 999px; white-space: nowrap;
}
@media (max-width: 600px) {
  .past-item { grid-template-columns: 1fr; gap: 8px; }
  .src-sub { font-size: 18px; margin: 40px 0 18px; }
}

/* ---------- 产品页 ---------- */
.prod-block { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; padding: 72px 0; border-bottom: 1px solid var(--line); }
.prod-block:last-of-type { border-bottom: 0; }
.prod-block.reverse .prod-media { order: 2; }

.cat-head { margin: 10px 0 0; }
.cat-head .eyebrow { margin-bottom: 4px; }
.cat-head h3 { font-size: clamp(24px, 2.6vw, 30px); margin: 6px 0 10px; color: var(--green); }
.cat-head .prod-desc { margin: 0 0 4px; }
.prod-media { border-radius: var(--radius); aspect-ratio: 4/5; }   /* 2026-10-03：产品图加高，画面更满 */
/* ↑ 上方 .prod-block / .prod-media / .cat-head 属旧「左右大图分栏」布局，2026-10-03 已停用，保留仅供回溯 */

/* ---------- 八大品类 · 卡片网格（2026-10-03 新布局，替代左右大图分栏） ---------- */
.cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.cat-card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
  /* 顶部导航条（topbar 40 + nav 72）会遮住锚点定位，跳转时留出偏移 */
  scroll-margin-top: calc(var(--nav-h) + 40px);
}
.cat-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: transparent; }
.cat-card .ph { aspect-ratio: 4 / 3; }
.cat-body { padding: 22px 22px 26px; display: flex; flex-direction: column; flex: 1 1 auto; }
.cat-body .eyebrow { font-size: 11.5px; letter-spacing: .2em; }
.cat-body h3 { font-size: 19px; margin: 8px 0 10px; color: var(--ink); line-height: 1.35; }
.cat-desc { font-size: 14.2px; color: var(--muted); line-height: 1.75; margin: 0 0 16px; }
/* margin-top:auto 让要点贴底，卡片内容不等高时也能对齐 */
.cat-points { list-style: none; margin: auto 0 0; padding: 0; display: grid; gap: 9px; }
.cat-points li { font-size: 13.2px; color: var(--ink-2); line-height: 1.6; display: flex; gap: 8px; align-items: flex-start; }
.cat-points li::before { content: ""; width: 6px; height: 6px; margin-top: 8px; border-radius: 50%; background: var(--gold); flex: none; }
/* 无图卡片（08 其它）：浅底居中 */
.cat-card--text { background: linear-gradient(160deg, var(--cream) 0%, var(--cream-2) 100%); }
.cat-card--text .cat-body { padding: 30px 24px 32px; justify-content: center; }
.cat-more { font-size: 14px; color: var(--green); display: inline-flex; align-items: center; gap: 8px; font-weight: 500; }
.cat-more:hover { gap: 14px; }
.cat-cta { margin-top: 44px; text-align: center; }
.cat-cta .btn { margin-bottom: 14px; }
.cat-cta p { font-size: 14px; color: var(--muted); margin: 0; }

/* 板块导航：8 个分类的紧凑索引条（2026-10-03 缩小版，原先复用 .biz-grid + .promise 过大） */
.cat-nav { display: grid; grid-template-columns: repeat(9, 1fr); gap: 11px; }
.cat-nav-item {
  display: block; text-align: center; padding: 13px 8px 14px;
  background: var(--white); border: 1px solid var(--line); border-radius: 8px;
  transition: border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.cat-nav-item:hover { border-color: var(--gold); transform: translateY(-3px); box-shadow: var(--shadow); }
.cat-nav-item .num { font-family: var(--serif); font-size: 11.5px; color: var(--gold); letter-spacing: .14em; line-height: 1; }
.cat-nav-item h3 { font-size: 14.5px; margin: 7px 0 0; line-height: 1.3; color: var(--ink); }
.prod-body h3 { font-size: clamp(26px, 3vw, 34px); margin: 14px 0 6px; }
.prod-desc { color: var(--muted); font-size: 16px; margin: 16px 0 24px; }
.spec-table { width: 100%; border-collapse: collapse; margin-bottom: 26px; }
.spec-table th, .spec-table td { text-align: left; padding: 13px 0; border-bottom: 1px solid var(--line-soft); font-size: 14.8px; vertical-align: top; }
.spec-table th { width: 116px; color: var(--ink); font-weight: 500; font-family: var(--sans); }
.spec-table td { color: var(--muted); }
.check-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 24px; margin-bottom: 30px; }
.check-list li { font-size: 14.8px; color: var(--ink-2); display: flex; gap: 10px; align-items: flex-start; }
.check-list li::before { content: ""; width: 7px; height: 7px; margin-top: 11px; border-radius: 50%; background: var(--gold); flex: none; }

.cooper-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.cooper { padding: 32px 26px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); }
.cooper h4 { font-size: 18px; margin-bottom: 10px; }
.cooper p { font-size: 14.4px; color: var(--muted); margin: 0; }

/* ---------- CTA 条 ---------- */
.cta-band { background: linear-gradient(120deg, var(--green-2) 0%, var(--hero-2) 100%); color: #fff; padding: 76px 0; }
.cta-band .container { display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.cta-band h2 { color: #fff; font-size: clamp(26px, 3vw, 36px); margin-bottom: 10px; }
.cta-band p { color: rgba(255,255,255,.76); margin: 0; }

/* ---------- 联系页 ---------- */
.contact-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 60px; align-items: start; }
/* 表单移除后只剩「门店与基地」一栏：改单列居中，避免右侧空出半栏（2026-10-06） */
.contact-grid--solo { grid-template-columns: 1fr; max-width: 920px; margin-inline: auto; }
.info-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-bottom: 56px; }
.info-card { padding: 30px 26px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); }
.info-card .ic-label { font-size: 12px; letter-spacing: .18em; color: var(--gold); text-transform: uppercase; }
.info-card h4 { font-size: 19px; margin: 12px 0 6px; }
.info-card p { font-size: 14.6px; color: var(--muted); margin: 0; }
/* 微信号：纯数字要挑出来才好找、好复制 */
.info-card .ic-wx { font-size: 19px; font-weight: 600; color: var(--ink); letter-spacing: .06em; }
/* 基地 / 到店两张卡并排；窄屏回落单列 */
.visit-grid { display: grid; gap: 18px; grid-template-columns: repeat(2, 1fr); margin: 26px 0 30px; }

.store-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
/* 2026-10-05：零售单品 4 张时改 4 列一行铺满（≤1080 回落到 2 列，≤600 单列） */
.store-grid--4 { grid-template-columns: repeat(4, 1fr); }
/* 2026-10-05：两件一行的品类（酸奶烘焙 / 生鲜牛羊肉）用 2 列 */
.store-grid--2 { grid-template-columns: repeat(2, 1fr); }
.store { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.store .ph { aspect-ratio: 5/4; }          /* 2026-10-03：门店图加高，画面更满 */
/* 2026-10-04：产品单品图（源图为 4:3）直接用 4:3，避免 cover 再切一刀 */
.store-grid--43 .store .ph { aspect-ratio: 4 / 3; }
.store-body { padding: 24px 24px 28px; }
.store-body h4 { font-size: 17.5px; margin-bottom: 10px; }
.store-body p { font-size: 14.4px; color: var(--muted); margin: 0; }
.store-body .tag { display: inline-block; font-size: 12px; color: var(--green); background: var(--green-soft); padding: 3px 10px; border-radius: 999px; margin-bottom: 12px; }

/* ===== 门店形象页：装修实景图 + 规格条目 + 装修要点网格（2026-10-04） =====
   ⚠️ 2026-10-04 二次改版：单图一律不再撑满 1320px 容器。
   原因：1200×900 的店内全景被拉到 1320×990 显示（放大 1.10x）→ 画面发虚；
   且全幅大图单张就占满一屏，信息密度太低。改为「图文并排 + 限宽居中」，
   单图显示宽控制在 420–1040px，并同步重出「显示尺寸 ×2」的高清源文件保 Retina 清晰。 */

/* 整幅单图：限宽居中（不再铺满） */
.store-photo { margin: 0 auto 34px; max-width: 1040px; }
/* 独立大图（未包 .store-photo 时）：限 960px，与 1920px 源文件正好构成 2x，Retina 下清晰 */
.store-wide { max-width: 960px; margin-left: auto; margin-right: auto; }
.store-photo .ph { border-radius: var(--radius); aspect-ratio: 16 / 9; }
.store-photo--43 .ph { aspect-ratio: 4 / 3; }      /* 源图为 4:3 的店内全景 */
.store-photo figcaption { font-size: 13.6px; color: var(--muted); margin-top: 14px; line-height: 1.7; }
.store-photo figcaption b { color: var(--ink); font-weight: 600; }

/* 图文并排：图约 54%、文字 46%，单图显示宽降到 ~690px */
.split-feature { display: grid; grid-template-columns: 1.16fr 1fr; gap: 46px; align-items: start; }
.split-feature > .store-photo { margin-bottom: 0; max-width: none; }
.split-feature--reverse > .store-photo { order: 2; }
.split-feature > .spec-list { margin-top: 0; }

/* 竖版物料图：固定窄列居中，避免两列撑到 647px 过高 */
.duo-grid--portrait { grid-template-columns: repeat(2, minmax(0, 420px)); justify-content: center; gap: 30px; }
.duo-grid--portrait .ph { aspect-ratio: 3 / 4; }
/* 两张并排：同样限宽 */
.photo-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 507px)); justify-content: center; gap: 26px; margin-bottom: 34px; }
.photo-pair .ph { border-radius: var(--radius); aspect-ratio: 4 / 3; }
.photo-pair figcaption { font-size: 13.6px; color: var(--muted); margin-top: 12px; }
/* 规格条目：左侧编号 + 右侧说明 */
.spec-list { margin-top: 8px; }
.spec-item { display: grid; grid-template-columns: 78px 1fr; gap: 18px; padding: 22px 0; border-top: 1px solid var(--line-soft); align-items: start; }
.spec-item:first-child { border-top: 0; padding-top: 0; }
.spec-item .k { font-family: var(--serif); font-size: 15px; color: var(--gold); letter-spacing: .06em; padding-top: 1px; }
.spec-item h4 { font-size: 17px; margin: 0 0 7px; }
.spec-item p { font-size: 14.4px; color: var(--muted); margin: 0; line-height: 1.78; }
/* 装修要点网格：紧凑四列，重心放在文字 */
.fit-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 44px; }
.fit-item { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 22px 26px; }
.fit-item .num { font-family: var(--serif); font-size: 13px; letter-spacing: .16em; color: var(--gold); }
.fit-item h4 { font-size: 16.5px; margin: 10px 0 8px; }
.fit-item p { font-size: 14px; color: var(--muted); margin: 0; line-height: 1.76; }
@media (max-width: 1080px) {
  .fit-grid { grid-template-columns: repeat(2, 1fr); }
  .split-feature { grid-template-columns: 1fr; gap: 30px; }
  .split-feature--reverse > .store-photo { order: 0; }
  .store-photo { max-width: 100%; }
}
@media (max-width: 860px) {
  .photo-pair, .duo-grid--portrait { grid-template-columns: 1fr; gap: 22px; }
  .duo-grid--portrait { max-width: 420px; margin-left: auto; margin-right: auto; }
  .store-photo .ph, .store-photo--43 .ph { aspect-ratio: 4 / 3; }
  .duo-grid--portrait .ph { aspect-ratio: 4 / 5; }
  .spec-item { grid-template-columns: 1fr; gap: 6px; padding: 20px 0; }
}
@media (max-width: 600px) {
  .fit-grid { grid-template-columns: 1fr; }
}

.form-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 40px 38px; box-shadow: var(--shadow); }
.form-card h3 { font-size: 23px; margin-bottom: 6px; }
.form-card .form-note { font-size: 14px; color: var(--muted); margin-bottom: 26px; }
.field { margin-bottom: 20px; }
.field label { display: block; font-size: 13.5px; color: var(--ink); margin-bottom: 8px; }
.field label i { color: #C0563E; font-style: normal; margin-left: 3px; }
.field input, .field textarea, .field select {
  width: 100%; padding: 13px 15px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--cream); font-size: 15px; transition: border-color .25s var(--ease), background .25s var(--ease);
}
.field input:focus, .field textarea:focus, .field select:focus { outline: 0; border-color: var(--green); background: #fff; }
.field textarea { min-height: 118px; resize: vertical; }
.field .err { display: none; font-size: 12.5px; color: #C0563E; margin-top: 6px; }
.field.has-err input, .field.has-err textarea { border-color: #C0563E; }
.field.has-err .err { display: block; }
.form-tip { font-size: 12.8px; color: var(--muted); margin: 14px 0 0; }
.form-success { display: none; padding: 16px 18px; background: var(--green-soft); color: var(--green); border-radius: var(--radius); font-size: 14.5px; margin-bottom: 20px; }
.form-success.show { display: block; }

.map-box { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); aspect-ratio: 16/9; }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q { width: 100%; background: none; border: 0; padding: 24px 0; text-align: left; font-size: 17px; color: var(--ink); cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; font-family: var(--serif); }
.faq-q .ic { flex: none; width: 22px; height: 22px; position: relative; }
.faq-q .ic::before, .faq-q .ic::after { content: ""; position: absolute; background: var(--green); transition: transform .3s var(--ease); }
.faq-q .ic::before { left: 0; top: 10px; width: 22px; height: 1.5px; }
.faq-q .ic::after { left: 10px; top: 0; width: 1.5px; height: 22px; }
.faq-item.open .faq-q .ic::after { transform: rotate(90deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .4s var(--ease); }
.faq-a p { padding: 0 40px 24px 0; color: var(--muted); font-size: 15.2px; margin: 0; }

/* ---------- 发展史 / 文章页 ---------- */
.story-lead { max-width: 840px; }
.big-quote {
  font-family: var(--serif); font-size: clamp(25px, 3.5vw, 38px); line-height: 1.55;
  color: var(--ink); margin: 0 0 28px; position: relative; padding-left: 38px;
}
.big-quote::before {
  content: "\201C"; position: absolute; left: 0; top: -.18em;
  font-size: 76px; line-height: 1; color: var(--gold); font-family: Georgia, serif;
}
.story-lead p { font-size: 17px; color: var(--ink-2); }
.story-note { font-size: 14px; color: var(--muted); }

.quote-block {
  border-left: 3px solid var(--gold); background: var(--cream);
  padding: 24px 30px; margin: 30px 0; border-radius: 0 var(--radius) var(--radius) 0;
}
.quote-block p { font-family: var(--serif); font-size: 17.5px; color: var(--ink); line-height: 1.95; margin: 0; }
.quote-block cite { display: block; margin-top: 14px; font-size: 13.5px; color: var(--muted); font-style: normal; }

.fact-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: 48px; }
.fact-strip div { background: var(--white); padding: 26px 24px; }
.fact-strip strong { display: block; font-family: var(--serif); font-size: 32px; color: var(--green); line-height: 1.2; }
.fact-strip span { font-size: 13.5px; color: var(--muted); }

.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.why-card { padding: 32px 28px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); }
.why-card .w-num { font-family: var(--serif); font-size: 14px; letter-spacing: .16em; color: var(--gold); }
.why-card h4 { font-size: 19px; margin: 14px 0 10px; }
.why-card p { font-size: 14.8px; color: var(--muted); margin: 0; }

.lineup { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.lineup span { font-size: 14.5px; padding: 9px 18px; background: var(--green-soft); color: var(--green); border-radius: 999px; }

.source-link {
  display: inline-flex; align-items: center; gap: 10px; font-size: 14.5px; color: var(--green);
  border-bottom: 1px solid rgba(39,107,85,.3); padding-bottom: 3px;
}
.source-link:hover { gap: 16px; border-color: var(--gold); color: var(--gold); }

/* ---------- 品牌动态页：分类筛选 / 事件标签 / 来源列表 ---------- */
.filter-bar { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 0 46px; }
.filter-btn {
  font: inherit; font-size: 14.5px; cursor: pointer;
  padding: 9px 20px; border-radius: 999px;
  background: var(--white); color: var(--ink-2);
  border: 1px solid var(--line); transition: all .2s ease;
}
.filter-btn:hover { border-color: var(--gold); color: var(--green); }
.filter-btn.is-active { background: var(--green); border-color: var(--green); color: #fff; }

.tl-tag {
  display: inline-block; margin-left: 12px; padding: 3px 11px;
  font-family: var(--sans); font-size: 11.5px; font-weight: 500; letter-spacing: .06em;
  color: var(--green); background: var(--green-soft); border-radius: 999px;
  vertical-align: middle;
}

.source-list { display: grid; gap: 18px; max-width: 860px; }
.source-list .source-link { display: inline-flex; width: fit-content; max-width: 100%; }

/* 首页 · 品牌动态卡片 */
.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.news-card {
  display: block; padding: 30px 26px 26px;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); color: inherit;
  transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.news-card:hover { transform: translateY(-4px); border-color: var(--gold); box-shadow: 0 14px 32px rgba(39,107,85,.10); }
.nc-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin-bottom: 14px; }
.nc-date { font-family: var(--serif); font-size: 15px; font-weight: 700; color: var(--green); letter-spacing: .04em; }
.nc-meta .tl-tag { margin-left: 0; }
.news-card h3 { font-size: 18.5px; line-height: 1.6; margin: 0 0 12px; transition: color .25s var(--ease); }
.news-card:hover h3 { color: var(--green); }
.news-card p { font-size: 14.6px; color: var(--muted); line-height: 1.85; margin: 0; }
.nc-more { display: inline-flex; align-items: center; gap: 7px; margin-top: 20px; font-size: 13.5px; color: var(--green); font-weight: 500; }
.nc-more .arrow { transition: transform .3s var(--ease); }
.news-card:hover .nc-more .arrow { transform: translateX(5px); }

@media (max-width: 1080px) { .why-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 1080px) { .news-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 860px) { .fact-strip { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) {
  .fact-strip, .why-grid, .news-grid { grid-template-columns: 1fr; }
  .news-card { padding: 26px 22px 22px; }
  .filter-bar { gap: 8px; margin-bottom: 34px; }
  .filter-btn { font-size: 13.5px; padding: 8px 15px; }
  .tl-tag { margin-left: 8px; font-size: 11px; }
}

/* ---------- 页脚 ---------- */
.site-footer { background: #2E6B54; color: rgba(255,255,255,.82); padding: 78px 0 0; font-size: 14.5px; }
.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 46px; padding-bottom: 52px; }
.site-footer h5 { color: #fff; font-size: 15.5px; font-family: var(--sans); font-weight: 600; letter-spacing: .08em; margin-bottom: 22px; }
.site-footer li { margin-bottom: 12px; }
.site-footer a:hover { color: #fff; }
.footer-about p { margin: 18px 0 0; font-size: 14px; line-height: 1.9; }
.footer-brand { display: flex; align-items: center; gap: 12px; }
.footer-brand .brand-mark { color: #fff; }
.footer-brand .brand-sub { color: rgba(255,255,255,.80); }
.footer-contact li { display: flex; gap: 10px; }
.footer-contact .k { color: rgba(255,255,255,.76); flex: none; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.18); padding: 24px 0 34px; display: flex; flex-direction: column; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: rgba(255,255,255,.80); text-align: center; }
.footer-bottom .beian a { color: rgba(255,255,255,.88); }
.footer-bottom .beian a:hover { color: #fff; }

/* ---------- 返回顶部 ---------- */
.to-top {
  position: fixed; right: 28px; bottom: 28px; width: 46px; height: 46px; border-radius: 50%;
  background: var(--green); color: #fff; border: 0; cursor: pointer; z-index: 90;
  display: grid; place-items: center; opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: all .35s var(--ease); box-shadow: 0 10px 26px rgba(39,107,85,.3);
}
.to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }

/* ---------- 滚动动画 ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------- 响应式 ---------- */
@media (max-width: 1080px) {
  .biz-grid, .promise-grid, .cooper-grid { grid-template-columns: repeat(2, 1fr); }
  .honor-grid, .info-cards, .store-grid { grid-template-columns: repeat(2, 1fr); }
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
  .cat-nav { grid-template-columns: repeat(4, 1fr); }   /* 窄屏 9 列太挤，落成 4 列 */
  .about-split, .prod-block, .contact-grid { grid-template-columns: 1fr; gap: 44px; }
  .prod-block.reverse .prod-media { order: 0; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 40px; }
}
@media (max-width: 860px) {
  .section { padding: 76px 0; }
  .container { width: calc(100% - 36px); }
  .topbar { display: none; }
  .nav { gap: 16px; }
  .nav-cta { display: none; }
  .nav-toggle { display: block; }
  .nav-links {
    position: fixed; inset: 0 0 0 auto; width: min(84vw, 340px); background: #fff;
    flex-direction: column; align-items: flex-start; gap: 0; padding: 96px 32px 40px;
    transform: translateX(100%); transition: transform .4s var(--ease); box-shadow: var(--shadow-lg);
  }
  .nav-links.is-open { transform: none; }
  .nav-links a { width: 100%; padding: 16px 0; border-bottom: 1px solid var(--line-soft); font-size: 17px; color: var(--ink) !important; }
  .nav-backdrop { position: fixed; inset: 0; background: rgba(16,28,24,.45); opacity: 0; visibility: hidden; transition: all .3s var(--ease); z-index: -1; }
  .nav-backdrop.show { opacity: 1; visibility: visible; }
  /* 滚动广告：窄屏隐藏箭头，靠手指左右滑 */
  .slide { min-height: 80vh; }
  .slide-inner { padding: calc(var(--nav-h) + 60px) 0 116px; }
  .slide-desc { font-size: 16px; }
  .sl-arrow { display: none; }
  .sl-dots { bottom: 28px; gap: 10px; }
  .sl-dot { width: 34px; }
  .hero-stats .container { grid-template-columns: repeat(2, 1fr); }
  .hero-stats .stat { padding: 22px 0 26px; }
  .hero-stats .stat:nth-child(2) { border-right: 0; }
  .hero-stats .stat:nth-child(3), .hero-stats .stat:nth-child(4) { padding-left: 0; }
  .stat-num { font-size: 30px; }
  .check-list { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .biz-grid, .promise-grid, .cooper-grid, .honor-grid, .info-cards, .store-grid, .cat-grid { grid-template-columns: 1fr; }
  .visit-grid { grid-template-columns: 1fr; }
  .cat-nav { grid-template-columns: repeat(2, 1fr); }
  .footer-top { grid-template-columns: 1fr; }
  .about-facts { grid-template-columns: 1fr; }
  .form-card { padding: 28px 22px; }
  .cta-band .container { flex-direction: column; align-items: flex-start; }
  .to-top { right: 16px; bottom: 16px; }
}

/* ============================================================
   有机认证标注（products.html）
   ============================================================ */
/* 2026-10-03：产品页改卡片网格后，认证标签挂在 .cat-body 下，两个选择器都要覆盖 */
.prod-body h3 .cert-tag,
.cat-body h3 .cert-tag {
  display: inline-block;
  vertical-align: middle;
  margin-left: 14px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--green-2);
  background: var(--green-soft);
  border: 1px solid rgba(31, 74, 60, .16);
  padding: 5px 11px;
  border-radius: 3px;
  white-space: nowrap;
}

/* 证书编号未录入时的醒目提示：上线前必须替换为真实信息 */
.spec-table td.cert-pending {
  color: var(--gold);
  font-weight: 500;
  background: var(--gold-soft);
  padding: 4px 10px;
  border-radius: 3px;
}

@media (max-width: 600px) {
  .prod-body h3 .cert-tag,
  .cat-body h3 .cert-tag { display: inline-block; margin: 10px 0 0; vertical-align: baseline; }
}

/* ============================================================
   品牌实力页（strength.html）
   ============================================================ */
.cred-lead {
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius);
  padding: 48px 54px 44px;
  margin-bottom: 30px;
}
.cred-lead-badge {
  display: inline-block;
  font-size: 12px;
  letter-spacing: .18em;
  color: var(--gold);
  background: var(--gold-soft);
  padding: 7px 14px;
  border-radius: 3px;
  margin-bottom: 24px;
}
.cred-year {
  display: block;
  font-family: var(--serif);
  font-size: 15px;
  letter-spacing: .1em;
  font-weight: 700;
  color: var(--gold);
  margin-bottom: 10px;
}
.cred-lead-body h3 { font-size: clamp(24px, 2.6vw, 34px); margin: 0 0 18px; }
.cred-lead-body > p:not(.cred-note) { font-size: 16.2px; color: var(--ink-2); line-height: 2.05; margin: 0 0 30px; max-width: 900px; }

.cred-meta {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px 44px;
  border-top: 1px solid var(--line-soft);
  padding-top: 28px;
}
.cred-meta h5 { font-size: 13px; letter-spacing: .08em; color: var(--green); margin: 0 0 7px; font-weight: 700; }
.cred-meta p { font-size: 14.4px; color: var(--muted); line-height: 1.85; margin: 0; }

.cred-threshold {
  margin-top: 26px;
  background: var(--cream);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  padding: 22px 26px;
}
.cred-threshold h5 { font-size: 13px; letter-spacing: .08em; color: var(--green); margin: 0 0 8px; font-weight: 700; }
.cred-threshold p { font-size: 14.4px; color: var(--muted); line-height: 1.9; margin: 0; }

.cred-note { font-size: 13px; color: var(--muted); line-height: 1.85; margin: 18px 0 0; }
.cred-note a { color: var(--green); border-bottom: 1px solid var(--gold); }

.cred-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.cred-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 3px solid var(--green-2);
  border-radius: var(--radius);
  padding: 34px 32px;
}
.cred-card h4 { font-size: 20px; margin: 0 0 8px; }
.cred-by { font-size: 13.5px; color: var(--gold); letter-spacing: .04em; margin: 0 0 16px; }
.cred-card p:last-child { font-size: 14.6px; color: var(--muted); line-height: 1.95; margin: 0; }

.heritage {
  display: grid;
  grid-template-columns: 210px 1fr;
  gap: 54px;
  align-items: start;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 48px 54px;
}
.heritage-year { border-right: 1px solid var(--line-soft); padding-right: 28px; }
.heritage-year strong { display: block; font-family: var(--serif); font-size: 46px; color: var(--green); line-height: 1.1; }
.heritage-year span { display: block; margin-top: 12px; font-size: 13.5px; color: var(--gold); letter-spacing: .1em; }
.heritage-body h3 { font-size: clamp(21px, 2.2vw, 27px); margin: 0 0 20px; }
.heritage-body p { font-size: 15.6px; color: var(--ink-2); line-height: 2.05; margin: 0 0 20px; }
.heritage-body .quote-block { margin-top: 26px; }

.note-box {
  max-width: 920px;
  margin-inline: auto;
  background: var(--cream);
  border: 1px solid var(--line);
  border-left: 3px solid var(--green-2);
  border-radius: var(--radius);
  padding: 34px 40px;
}
.note-box h4 { font-size: 18px; margin: 0 0 14px; }
.note-box p { font-size: 14.8px; color: var(--muted); line-height: 2; margin: 0 0 12px; }
.note-box p:last-child { margin: 0; }

@media (max-width: 860px) {
  .cred-meta { grid-template-columns: 1fr; gap: 18px; }
  .heritage { grid-template-columns: 1fr; gap: 26px; }
  .heritage-year { border-right: 0; border-bottom: 1px solid var(--line-soft); padding: 0 0 22px; }
}

/* ============================================================
   history.html · 品牌故事「我爷爷的爷爷的酸奶」（2026-10-06 海报版）
   按品牌故事海报（宣纸版）重构主干，解决三处「乱」：
   ① 原「左窄栏（840px）+ 通栏数据条 + 左窄栏时间轴」左右来回跳
      → 全页叙事统一为 880px 居中窄栏；
   ② 原开篇「大引语 + 四格数据条 + 七段时间轴」三段讲同一件事
      → 海报式年代轴（四行）+ 居中重点句 + 收尾句，简洁收口；
   ③ 「为什么是酸奶」四张卡排 3 列，第二行只剩一张孤卡
      → 改 4 列（--4 修饰符，不动 moments / strength 的 3 列）。
   ============================================================ */

/* 宣纸底：整段品牌故事像一张摊开的纸 */
.section--paper { background: var(--paper); }
/* 宣纸更暖，正文沿用 --muted 会发灰显脏，这里压深一档（只作用于本段） */
.section--paper .story-body > p { color: var(--ink-2); }

/* 叙事居中窄栏（时间轴 / 正文 / 延伸阅读共用同一条视觉中线） */
.hist-narrow { max-width: 880px; margin-inline: auto; }

/* --- 海报主标题（我爷爷的爷爷的酸奶） --- */
.post-title {
  font-family: var(--serif); font-weight: 700; text-align: center;
  font-size: clamp(27px, 4vw, 44px); line-height: 1.32;
  letter-spacing: .05em; color: var(--ink);
  max-width: 880px; margin: 0 auto 16px;
}

/* --- 年代轴上方的细caption --- */
.post-caption {
  text-align: center; font-size: 12.5px; font-weight: 600;
  letter-spacing: .26em; color: var(--gold); margin: 0 0 36px;
}

/* --- 海报式年代轴（年份 + 小圆点 + 一行说明，圆点串在中轴线上） --- */
.yearline {
  --yl-year: 80px; --yl-dot: 22px;
  --yl-spine: calc(var(--yl-year) + var(--yl-dot) / 2);
  position: relative; list-style: none;
  max-width: 760px; margin: 0 auto 50px; padding: 0;
}
.yearline::before {
  content: ""; position: absolute; left: var(--yl-spine); top: 18px; bottom: 18px;
  width: 1px; background: rgba(122, 74, 40, .24);
}
.yearline li {
  display: grid; grid-template-columns: var(--yl-year) var(--yl-dot) 1fr;
  align-items: center; padding: 9px 0;
}
.yearline .yl-year {
  font-family: var(--serif); font-weight: 700; text-align: right;
  font-size: clamp(21px, 2.5vw, 30px); line-height: 1.25;
  color: var(--sienna); letter-spacing: .01em;
}
.yearline .yl-dot {
  justify-self: center; position: relative; z-index: 1;
  width: 9px; height: 9px; border-radius: 50%; background: var(--sienna);
}
.yearline p { margin: 0; padding-left: 22px; font-size: 16.4px; line-height: 1.78; color: var(--ink-2); }

/* --- 居中重点句（我的先祖，就是这支队伍里的一个兵。） --- */
.post-punch {
  font-family: var(--serif); font-weight: 700; text-align: center;
  font-size: clamp(20px, 2.5vw, 30px); line-height: 1.62;
  color: var(--sienna); max-width: 880px; margin: 0 auto 52px;
}

/* --- 收尾句（为了一杯好酸奶，我们经营了一个牧场。口径与全站标语一致） --- */
.post-final {
  font-family: var(--serif); font-weight: 700; text-align: center;
  font-size: clamp(18px, 2.1vw, 25px); line-height: 1.72;
  color: var(--sienna); max-width: 880px;
  margin: 52px auto 0; padding-top: 40px; border-top: 1px solid var(--line);
}

/* --- 深入年表：与海报年代轴同一暖赭色系统，层级只靠字号区分 --- */
.timeline--mid { max-width: 880px; margin-inline: auto; }
.timeline--mid .tl-year { color: var(--sienna); }
.timeline--mid .tl-item::before { border-color: var(--sienna); }

/* --- 居中收窄的引语块 --- */
.hist-quote { max-width: 880px; margin: 52px auto 0; }

/* --- 四张卡片排 4 列（原 3 列会剩一张孤行）；只作用于带 --4 的网格 --- */
.why-grid--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1080px) {
  .why-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .hist-narrow, .post-title, .post-punch, .post-final { max-width: 100%; }
}
@media (max-width: 600px) {
  .why-grid--4 { grid-template-columns: 1fr; }
  .yearline { --yl-year: 56px; --yl-dot: 18px; }
  .yearline::before { top: 14px; bottom: 14px; }
  .yearline li { padding: 8px 0; }
  .yearline p { padding-left: 16px; font-size: 15.4px; }
}
@media (max-width: 600px) {
  .cred-lead { padding: 30px 24px; }
  .heritage { padding: 30px 24px; }
  .cred-grid { grid-template-columns: 1fr; }
  .note-box { padding: 26px 22px; }
}

/* 单品零售卡：仅一张时居中限宽（放在末尾以覆盖各断点下的 .store-grid 列定义） */
.store-grid--solo { grid-template-columns: minmax(0, 520px); justify-content: center; }
@media (max-width: 640px) {
  .store-grid--solo { grid-template-columns: 1fr; }
}