/* ==========================================================================
   九渡殡仪用品厂 · 官方网站设计系统
   Jiudu Funeral Supplies · Web Design System
   --------------------------------------------------------------------------
   本文件严格遵循《九渡 VIS 视觉形象识别手册》A 基础系统：
     A-14 标准色     纯黑 #000000 / 纯白 #FFFFFF / 品牌明黄 #FDD000
     A-15 品牌色阶   明黄 100/80/60/40/20%，中性灰阶 7 档
     A-19 专用字体   中文 微软雅黑 / 英文数字 Arial / 标语 楷体
     A-19 排版规范   正文行距 ≥ 1.6 倍；同物料中文不超过两种字重
     A-13 安全留白   标志四周留白 = 图形标高度 ÷ 4
   --------------------------------------------------------------------------
   禁止项（A-14 / A-17）：不得使用高饱和彩色、渐变、描边、投影、发光。
   ========================================================================== */

:root{
  /* ---- A-14 标准色：仅此三色 ---- */
  --k:#000000;              /* 纯黑 · 主色 · 线条与文字 */
  --w:#ffffff;              /* 纯白 · 反白用 */
  --y:#FDD000;              /* 品牌明黄 · 品牌专属背景色 */

  /* ---- A-15 中性灰阶：版式层次与说明文字 ---- */
  --g1:#333333;
  --g2:#666666;
  --g3:#999999;             /* 说明文字下限 */
  --g4:#cccccc;
  --g5:#eeeeee;
  --g6:#f7f7f7;

  /* ---- A-15 明黄色阶：仅用于图表、分区、底纹 ---- */
  --y80:#FCD832;
  --y60:#FCE164;
  --y40:#FBE996;
  --y20:#FBF2C8;

  /* ---- A-19 专用字体 ---- */
  --cn:"Microsoft YaHei","微软雅黑",sans-serif;
  --en:Arial,Helvetica,"Microsoft YaHei",sans-serif;
  --kai:"KaiTi","楷体",serif;

  /* ---- 版式栅格 ---- */
  --max:1200px;
  --gut:32px;
  --rhythm:6px;             /* 基础间距单位 */
}

/* ---------------------------------------------------------------- 基础 */
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--w);
  color:var(--k);
  font-family:var(--cn);
  font-size:16px;
  font-weight:400;
  line-height:1.85;              /* A-19：正文行距 ≥ 1.6 */
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

.wrap{max-width:var(--max);margin:0 auto;padding:0 40px}

/* 英文／数字统一 Arial（A-19） */
.en{font-family:var(--en)}
.kai{font-family:var(--kai)}

/* 小标签：Arial 全大写 + 字距（英文视觉层级） */
.eyebrow{
  font-family:var(--en);
  font-size:11px;font-weight:400;
  letter-spacing:.24em;text-transform:uppercase;
  color:var(--g2);
}

/* 标题层级：同一物料中文不超过两种字重（A-19） */
h1,h2,h3,h4{font-weight:700;line-height:1.35;letter-spacing:0}
h1{font-size:clamp(30px,4.6vw,54px)}
h2{font-size:clamp(24px,3vw,36px)}
h3{font-size:19px}
h4{font-size:16px}

p{color:var(--g1)}
.lead{font-size:17px;color:var(--g1)}

/* 品牌明黄分隔线（替代原有渐变装饰） */
.rule{height:4px;width:56px;background:var(--y);border:0}

/* ---------------------------------------------------------------- 页头 */
.site-header{
  position:sticky;top:0;z-index:50;
  background:var(--w);
  border-bottom:1px solid var(--k);
}
.site-header .wrap{
  display:flex;align-items:center;justify-content:space-between;
  height:76px;gap:var(--gut);
}
.brand img{height:38px;width:auto}          /* A-12：屏幕端图形标最小 30px */

.nav{display:flex;align-items:center;gap:30px}
.nav a{
  font-family:var(--en);
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--k);padding:4px 0;border-bottom:2px solid transparent;
}
.nav a:hover,.nav a[aria-current]{border-bottom-color:var(--y)}

.lang{
  display:flex;border:1px solid var(--k);
  font-family:var(--en);font-size:11px;letter-spacing:.1em;
}
.lang button{
  border:0;background:transparent;color:var(--k);
  padding:6px 12px;cursor:pointer;font:inherit;letter-spacing:inherit;
}
.lang button[aria-pressed="true"]{background:var(--k);color:var(--w)}

/* ---------------------------------------------------------------- 主视觉 */
/* 纯黑底 + 明黄点缀；无渐变、无投影（A-14 / A-17） */
.hero{background:var(--k);color:var(--w);overflow:hidden}
.hero .wrap{
  display:grid;grid-template-columns:1.15fr .85fr;gap:64px;
  align-items:center;padding-top:88px;padding-bottom:88px;
}
.hero h1{color:var(--w)}
.hero h1 em{font-style:normal;color:var(--y)}   /* 明黄点睛，仅此一处强调 */
.hero .lead{color:var(--g4);margin-top:22px;max-width:44ch}
.hero .actions{margin-top:38px;display:flex;gap:14px;flex-wrap:wrap}
.hero-mark{display:flex;align-items:center;justify-content:center}
.hero-mark img{height:300px;width:auto}          /* 竖排组合：反白版 */

/* 按钮：直角、平色、无阴影 */
.btn{
  display:inline-block;font-family:var(--en);
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  padding:15px 30px;border:1.5px solid var(--w);color:var(--w);
  background:transparent;cursor:pointer;transition:background .15s,color .15s;
}
.btn:hover{background:var(--w);color:var(--k)}
.btn--y{background:var(--y);border-color:var(--y);color:var(--k)}
.btn--y:hover{background:var(--w);border-color:var(--w);color:var(--k)}
.btn--k{border-color:var(--k);color:var(--k)}
.btn--k:hover{background:var(--k);color:var(--w)}

/* ---------------------------------------------------------------- 通用区块 */
.sec{padding:88px 0}
.sec--tint{background:var(--g6)}      /* 分区底纹 */
.sec--y{background:var(--y)}          /* 品牌专属背景 */
.sec--k{background:var(--k);color:var(--w)}
.sec--k p,.sec--k .lead{color:var(--g4)}

.sec-head{max-width:64ch;margin-bottom:48px}
.sec-head .rule{margin:18px 0 22px}

/* 两栏图文（VIS 版式：左文右图 / 左图右文） */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}

/* 三栏 / 四栏栅格 */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}

/* ---------------------------------------------------------------- 卡片 */
/* 平色 + 1px 细线，不用投影 */
.card{border:1px solid var(--k);background:var(--w);padding:26px}
.card--fill{background:var(--y);border-color:var(--y)}
.card--g{border-color:var(--g5)}

/* 产品图框：统一画框比例，图片 object-fit 裁切 */
.frame{background:var(--g6);border:1px solid var(--g5);aspect-ratio:4/3;overflow:hidden}
.frame img{width:100%;height:100%;object-fit:cover}
.frame--tall{aspect-ratio:3/4}

.cat{display:block}
.cat .frame{aspect-ratio:1/1;transition:border-color .15s}
.cat:hover .frame{border-color:var(--k)}
.cat .nm{margin-top:14px;font-weight:700}
.cat .en-nm{font-family:var(--en);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--g2);margin-top:2px}

/* ---------------------------------------------------------------- 数据条 */
/* 数字一律 Arial（A-19） */
.stats{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--k)}
.stats div{padding:30px 24px;border-right:1px solid var(--k);text-align:center}
.stats div:last-child{border-right:0}
.stats b{display:block;font-family:var(--en);font-size:38px;font-weight:700;line-height:1.1}
.stats span{display:block;margin-top:8px;font-size:13px;color:var(--g2)}

/* ---------------------------------------------------------------- 引文 */
.quote{background:var(--k);color:var(--w);text-align:center;padding:76px 0}
.quote q{font-family:var(--kai);font-size:clamp(22px,2.6vw,32px);
  line-height:1.7;quotes:none;display:block}
.quote cite{display:block;margin-top:22px;font-style:normal;
  font-family:var(--en);font-size:11px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--y)}

/* ---------------------------------------------------------------- 行动区 */
.cta{background:var(--y);padding:72px 0}
.cta .wrap{display:flex;align-items:center;justify-content:space-between;
  gap:40px;flex-wrap:wrap}
.cta h2{max-width:26ch}

/* ---------------------------------------------------------------- 页脚 */
.site-footer{background:var(--k);color:var(--w);padding:64px 0 30px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}
.site-footer h4{font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  font-family:var(--en);color:var(--y);margin-bottom:16px;font-weight:400}
.site-footer li{list-style:none;margin-bottom:9px;font-size:14px;color:var(--g4)}
.site-footer a:hover{color:var(--y)}
.foot-logo{height:52px;width:auto;margin-bottom:20px}
.foot-note{border-top:1px solid #222;margin-top:48px;padding-top:24px;
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  font-family:var(--en);font-size:11px;letter-spacing:.08em;color:var(--g3)}

/* ---------------------------------------------------------------- 语言切换 */
[data-lang]{display:none}
html[data-active="en"] [data-lang="en"]{display:block}
html[data-active="cn"] [data-lang="cn"]{display:block}
span[data-lang]{display:none}
html[data-active="en"] span[data-lang="en"]{display:inline}
html[data-active="cn"] span[data-lang="cn"]{display:inline}

/* ---------------------------------------------------------------- 响应式 */
@media (max-width:960px){
  .hero .wrap{grid-template-columns:1fr;gap:44px;padding-top:60px;padding-bottom:60px}
  .hero-mark{order:-1}
  .hero-mark img{height:190px}
  .split{grid-template-columns:1fr;gap:34px}
  .grid4{grid-template-columns:repeat(2,1fr)}
  .grid3{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(2,1fr)}
  .stats div:nth-child(2){border-right:0}
  .stats div:nth-child(-n+2){border-bottom:1px solid var(--k)}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .wrap{padding:0 22px}
  .sec{padding:60px 0}
  .nav{display:none}
  .grid3,.grid4{grid-template-columns:1fr}
}

/* 器物而非商品：3×2 方图网格 */
.objgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.objgrid .frame{aspect-ratio:1/1;border:1px solid var(--k);background:var(--g6)}
.objgrid .frame img{width:100%;height:100%;object-fit:cover}
@media (max-width:900px){.objgrid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){.objgrid{grid-template-columns:repeat(2,1fr);gap:8px}}

/* 从原木到成品：深底工序竖幅 3×2 网格 */
.craftgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.craftgrid .frame{border:1px solid var(--g2);background:var(--k)}
@media (max-width:900px){.craftgrid{grid-template-columns:repeat(3,1fr);gap:6px}}
@media (max-width:640px){.craftgrid{grid-template-columns:repeat(2,1fr);gap:6px}}

/* 工序网格：每行 5 张，图下带标题，全部平铺 */
.stagegrid{display:grid;grid-template-columns:repeat(5,1fr);gap:26px 16px}
.stagegrid figure{margin:0;position:relative}
.stagegrid .ph{aspect-ratio:3/4;border:1px solid var(--k);background:var(--g6);overflow:hidden}
.stagegrid .ph img{width:100%;height:100%;object-fit:cover;display:block}
.stagegrid figcaption{position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:12px 12px 12px;text-align:left;font-size:12.5px;line-height:1.5;color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,.9),0 0 12px rgba(0,0,0,.6);pointer-events:none}
@media (max-width:900px){.stagegrid{grid-template-columns:repeat(3,1fr);gap:20px 12px}}
@media (max-width:640px){.stagegrid{grid-template-columns:repeat(2,1fr);gap:16px 10px}}

/* ===== 幻灯片（VIS：直角、平色、1px 黑线）· 全自动无控制条 ===== */
.slideshow{background:var(--k);border:1px solid var(--k);display:block;position:relative}
.sec--tint .slideshow{border-color:var(--k)}
.ss-view{position:relative;aspect-ratio:3/4;background:var(--k);overflow:hidden}
/* 方形变体：器物区块 */
.ss--sq .ss-view{aspect-ratio:1/1}
/* 图说：叠在图片上、居中、无底色（避免黑块） */
.ss-cap{position:absolute;left:0;right:0;bottom:0;z-index:3;
  padding:14px 18px 16px;text-align:left;
  font-size:13px;letter-spacing:.02em;line-height:1.5;color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,.9),0 0 14px rgba(0,0,0,.6);
  pointer-events:none}
@media (max-width:640px){.ss-cap{padding:10px 12px 12px;font-size:12px}}
.ss-view img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  opacity:0;transition:opacity .5s linear}
.ss-view img.is-on{opacity:1}
@media (prefers-reduced-motion:reduce){.ss-view img{transition:none}}
/* 深底区块内的幻灯片：与周围同底色 */
.sec--k .slideshow{border-color:var(--g2)}