/* =====================================================================
   KARE — "IMPERIAL JADE" EDITION  (v8)
   Jade framework × Cinnabar voice.
   Sans for commerce. Serif for conviction.
   ===================================================================== */
:root{
  --jade:      #0B4A42;
  --jade-deep: #06332D;
  --jade-ink:  #042522;
  --jade-br:   #1A8C72;
  --jade-mist: #E7F0EC;
  --jade-mist2:#F2F6F4;
  --paper:     #FAFBFA;
  --white:     #FFFFFF;
  --ink:       #10211D;
  --ink-2:     #3D514B;
  --muted:     #74867F;
  --amber:     #F5A623;
  --amber-d:   #D88C0A;
  --line:      #DCE6E1;
  --line-2:    #C2D2CB;
  --head: 'Familjen Grotesk', sans-serif;
  --body: 'Instrument Sans', sans-serif;
  --mono: 'DM Mono', monospace;
  --serif:'Fraunces', serif;          /* the editorial voice */
  --max: 1340px;
  --gut: clamp(20px, 4vw, 52px);
  --r: 4px;

  /* ===== IMAGE SLOTS — replace with real photos ===== */
  --img-hero:    url('https://picsum.photos/id/1078/1600/2000');
  --img-factory: url('https://picsum.photos/id/146/1700/1200');
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--body);
  color:var(--ink);
  background:var(--paper);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
button,input,select,textarea{font:inherit;color:inherit;}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut);}
h1,h2,h3,h4{font-family:var(--head); letter-spacing:-.02em;}

.eyebrow{
  font-family:var(--mono);
  font-size:12px; font-weight:500; letter-spacing:.22em; text-transform:uppercase;
  color:var(--jade-br);
  display:inline-flex; align-items:center; gap:12px;
}
.eyebrow::before{content:''; width:32px; height:2px; background:var(--amber);}
.sec-title{
  font-size:clamp(32px,4vw,52px);
  font-weight:700;
  line-height:1.04;
  color:var(--jade-ink);
  margin-top:16px;
}
.sec-title .lt{color:var(--jade-br);}
.sec-title em{font-family:var(--serif); font-style:italic; font-weight:400; letter-spacing:-.01em;}
.sec-sub{color:var(--ink-2); font-size:clamp(15px,1.2vw,17.5px); margin-top:16px; max-width:62ch; line-height:1.7;}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--head);
  font-weight:600; font-size:15.5px;
  padding:16px 30px;
  border-radius:var(--r);
  border:0; cursor:pointer;
  transition:.22s;
  white-space:nowrap;
}
.btn .ar{transition:transform .22s;}
.btn:hover .ar{transform:translateX(4px);}
.btn-amber{background:var(--amber); color:var(--jade-ink); box-shadow:0 8px 22px rgba(245,166,35,.32);}
.btn-amber:hover{background:#FFB845;}
.btn-line{background:transparent; color:var(--jade-ink); border:1.5px solid var(--line-2);}
.btn-line:hover{border-color:var(--jade); color:var(--jade); background:var(--jade-mist);}
.btn-white{background:#fff; color:var(--jade-ink);}
.btn-white:hover{background:var(--jade-mist);}

/* ============ TOPBAR ============ */
.topbar{background:var(--jade-ink); color:rgba(255,255,255,.8); font-size:13px;}
.topbar-in{
  display:flex; justify-content:space-between; align-items:center;
  gap:16px 28px; min-height:42px; flex-wrap:wrap;
}
.topbar-l{display:flex; align-items:center; gap:28px; flex-wrap:wrap;}
.topbar-l a{display:inline-flex; align-items:center; gap:9px; transition:color .2s; line-height:1;}
.topbar-l a:hover{color:#fff;}
.topbar-l svg{width:15px;height:15px;color:var(--jade-br); flex-shrink:0;}
/* language dropdown */
.lang{position:relative;}
.lang-btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.08em;
  color:rgba(255,255,255,.85);
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.14);
  padding:6px 12px; border-radius:4px; line-height:1; cursor:pointer;
  transition:.2s;
}
.lang-btn:hover{background:rgba(255,255,255,.13); color:#fff;}
.lang-btn .globe{width:14px;height:14px;color:var(--jade-br);}
.lang-btn .cur{font-weight:500;}
.lang-btn .chev{width:11px;height:11px; transition:transform .25s; opacity:.7;}
.lang.open .lang-btn{background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.28);}
.lang.open .chev{transform:rotate(180deg);}
.lang-menu{
  position:absolute; top:calc(100% + 8px); right:0;
  min-width:178px;
  background:#fff;
  border-radius:6px;
  box-shadow:0 18px 44px rgba(4,37,34,.28);
  padding:6px;
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .22s, transform .22s, visibility .22s;
  z-index:120;
}
.lang.open .lang-menu{opacity:1; visibility:visible; transform:translateY(0);}
.lang-menu a{
  display:flex; align-items:center; gap:10px;
  padding:9px 12px; border-radius:4px;
  font-family:var(--body); font-size:13.5px; color:var(--ink-2);
  transition:.16s;
}
.lang-menu a:hover{background:var(--jade-mist); color:var(--jade-ink);}
.lang-menu a.on{background:var(--jade-mist2); color:var(--jade-ink); font-weight:600;}
.lang-menu a .flag{font-size:15px; line-height:1; width:20px; text-align:center;}
.lang-menu a .en{font-family:var(--mono); font-size:10px; letter-spacing:.08em; color:var(--muted); margin-left:auto;}
.lang-menu a.on .en{color:var(--amber-d);}
@media(max-width:640px){
  .topbar-l a:nth-child(2) .lbl-wa{display:none;}
}

/* ============ NAV ============ */
.nav{
  position:sticky; top:0; z-index:100;
  background:rgba(250,251,250,.94);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.nav-in{display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:80px;}
.logo{display:flex; align-items:center; gap:13px;}
.logo-mk{
  width:46px; height:46px;
  background:var(--jade);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--head); font-weight:700; font-size:23px;
  border-radius:var(--r);
  position:relative; overflow:hidden;
}
.logo-mk::after{content:''; position:absolute; right:-7px; bottom:-7px; width:20px; height:20px; background:var(--amber); transform:rotate(45deg);}
/* v1.5.31 logo 文字竖排：品牌名在上、副标在下。原来 .a/.b 是 inline span 横排——
   短副标（SUZHOU · SINCE 2008）勉强，footer 长公司全名横排会换行难看。 */
.logo-tx{display:inline-flex; flex-direction:column; justify-content:center; gap:2px;}
.logo-tx .a{font-family:var(--head); font-weight:700; font-size:21px; color:var(--jade-ink); line-height:1.1;}
.logo-tx .b{font-size:11px; color:var(--muted); letter-spacing:.1em; text-transform:uppercase; font-family:var(--mono); line-height:1.4;}
/* v1.5.14 顶部导航 11 项挤/折行修复：header 横条放宽（页面内容仍 --max:1340）+ 每项不折行 + 微缩字号间距 */
.nav > .wrap, .topbar > .wrap{max-width:1480px;}
.menu{display:flex; gap:2px;}
.menu a{
  font-family:var(--head); font-weight:600; font-size:14px; white-space:nowrap;
  padding:9px 11px; color:var(--ink-2); letter-spacing:-.005em;
  position:relative; transition:.2s;
}
.menu a::after{
  content:''; position:absolute; left:11px; right:11px; bottom:4px;
  height:2px; background:var(--amber);
  transform:scaleX(0); transform-origin:left;
  transition:transform .28s cubic-bezier(.7,0,.2,1);
}
.menu a:hover{color:var(--jade-ink);}
.menu a:hover::after{transform:scaleX(1);}
/* v1.5.15 顶部导航下拉分组（Capabilities / Company）——桌面 hover / focus / click 展开 */
.nav-dd{position:relative; display:inline-flex;}
.dd-top{font-family:var(--head); font-weight:600; font-size:14px; white-space:nowrap; padding:9px 11px; color:var(--ink-2); background:none; border:0; cursor:pointer; display:inline-flex; align-items:center; gap:5px; letter-spacing:-.005em; transition:.2s;}
.dd-top:hover{color:var(--jade-ink);}
.dd-caret{font-size:13px; line-height:1; margin-top:1px; transition:transform .25s;}
/* v1.5.16 下拉面板：top:100% 无缝贴 button（防 hover 掉链），z-index 拉到 header 之上（.nav backdrop-filter 建了 stacking context）；
   顶部留 8px 透明桥（::before）保证鼠标从 button 移到面板途中不脱离 :hover */
.dd-panel{position:absolute; top:100%; left:0; min-width:200px; background:#fff; border:1px solid var(--line); border-radius:var(--r); box-shadow:0 18px 44px rgba(4,37,34,.18); padding:6px; display:flex; flex-direction:column; gap:2px; opacity:0; visibility:hidden; transform:translateY(-6px); transition:opacity .2s, transform .2s, visibility .2s; z-index:600;}
.dd-panel::before{content:''; position:absolute; left:0; right:0; top:-8px; height:8px;}
.nav-dd:hover .dd-panel, .nav-dd:focus-within .dd-panel, .nav-dd.dd-open .dd-panel{opacity:1; visibility:visible; transform:none;}
.nav-dd:hover .dd-caret, .nav-dd:focus-within .dd-caret, .nav-dd.dd-open .dd-caret{transform:rotate(180deg);}
.dd-item{display:block; padding:9px 12px; font-family:var(--head); font-weight:600; font-size:13.5px; color:var(--ink-2); white-space:nowrap; border-radius:6px; transition:.15s;}
.dd-item:hover{background:var(--jade-mist2); color:var(--jade-ink);}

.nav-right{display:flex; align-items:center; gap:20px;}
.nav-phone{text-align:right; line-height:1.25;}
.nav-phone .p1{font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted);}
.nav-phone .p2{font-family:var(--head); font-weight:700; font-size:16.5px; color:var(--jade-ink);}
@media(max-width:1100px){.menu{display:none;}.nav-phone{display:none;}}

/* ============ HERO ============ */
.hero{position:relative; background:var(--paper); overflow:hidden;}
.hero-grid{display:grid; grid-template-columns:1.08fr 1fr; min-height:min(86vh,820px);}
.hero-copy{
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(48px,6vw,90px) clamp(28px,4.5vw,72px) clamp(48px,6vw,90px) var(--gut);
  position:relative; z-index:2;
}
.hero h1{
  font-size:clamp(40px,4.9vw,72px);
  font-weight:700; line-height:1.0;
  color:var(--jade-ink);
  margin-top:8px;
}
.hero h1 em{
  font-family:var(--serif); font-style:italic; font-weight:400;
  color:var(--jade-br); letter-spacing:-.01em;
}
.hero h1 .und{position:relative; white-space:nowrap;}
.hero h1 .und::after{
  content:''; position:absolute; left:0; right:0; bottom:6px;
  height:clamp(8px,1vw,14px); background:var(--amber);
  z-index:-1; opacity:.85;
}
.hero p.lead{
  margin-top:24px;
  font-size:clamp(16px,1.35vw,19px);
  line-height:1.7; color:var(--ink-2);
  max-width:52ch;
}
.hero p.lead b{color:var(--jade-ink); font-weight:600;}
.hero p.lead em{font-family:var(--serif); font-style:italic; color:var(--jade);}
.hero-ctas{margin-top:34px; display:flex; gap:14px; flex-wrap:wrap;}
.hero-proof{
  margin-top:clamp(36px,4.5vw,56px);
  padding-top:26px; border-top:1px solid var(--line);
  display:flex; gap:clamp(22px,3vw,44px); flex-wrap:wrap;
}
.proof{line-height:1.2;}
.proof .n{font-family:var(--head); font-weight:700; font-size:clamp(24px,2.2vw,32px); color:var(--jade-ink);}
.proof .n i{font-style:normal; color:var(--amber-d); font-size:.65em;}
.proof .l{font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-top:5px;}

.hero-visual{position:relative;}
.hero-img{
  position:absolute; inset:0;
  background-image:var(--img-hero);
  background-size:cover; background-position:center;
}
.hero-img::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(200deg, rgba(4,37,34,0) 35%, rgba(4,37,34,.55) 100%);
}
.hero-visual::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:10px;
  background:var(--jade); z-index:3;
}
.fcard{
  position:absolute; z-index:4;
  background:#fff; border-radius:var(--r);
  box-shadow:0 18px 46px rgba(4,37,34,.22);
  padding:16px 20px;
  display:flex; align-items:center; gap:14px;
}
.fcard .ic{
  width:42px;height:42px; border-radius:var(--r);
  background:var(--jade-mist); color:var(--jade);
  display:flex; align-items:center; justify-content:center;
}
.fcard .ic svg{width:21px;height:21px;}
.fcard .t1{font-family:var(--head); font-weight:700; font-size:15.5px; color:var(--jade-ink); line-height:1.2;}
.fcard .t2{font-size:12.5px; color:var(--muted);}
.fcard-a{top:9%; right:7%; animation:bob 5s ease-in-out infinite;}
.fcard-b{bottom:11%; left:-46px; animation:bob 5s 1.2s ease-in-out infinite;}
@keyframes bob{0%,100%{transform:translateY(0);}50%{transform:translateY(-9px);}}
.fcard .live{
  width:9px;height:9px;border-radius:50%;
  background:#27C281;
  box-shadow:0 0 0 4px rgba(39,194,129,.2);
  animation:blink 1.8s infinite;
}
@keyframes blink{50%{opacity:.45;}}

.ribbon{background:var(--jade); color:#fff; overflow:hidden; border-top:4px solid var(--amber);}
.ribbon-track{
  display:inline-flex; white-space:nowrap;
  padding:14px 0;
  animation:slide 44s linear infinite;
  font-family:var(--head); font-weight:600; font-size:14.5px; letter-spacing:.04em;
}
.ribbon-track span{padding:0 26px; display:inline-flex; align-items:center; gap:26px;}
.ribbon-track .d{color:var(--amber); font-size:11px;}
@keyframes slide{to{transform:translateX(-50%);}}
@media(max-width:980px){
  .hero-grid{grid-template-columns:1fr;}
  .hero-visual{min-height:54vw;}
  .fcard-b{left:14px;}
  .hero-visual::before{left:0; top:0; right:0; bottom:auto; height:8px; width:auto;}
}

/* ============ №01 — THE EIGHT HOUSES (index list + hover preview) ============ */
.houses{padding:clamp(72px,9vw,120px) 0; background:var(--white); position:relative;}
.houses-head{
  display:flex; justify-content:space-between; align-items:flex-end; gap:28px; flex-wrap:wrap;
  margin-bottom:clamp(32px,4vw,50px);
}
.hl{border-top:1px solid var(--line-2); position:relative;}
.hl-row{
  display:grid;
  grid-template-columns: 64px 1.35fr 1.5fr auto 44px;
  align-items:center; gap:clamp(16px,2.4vw,32px);
  padding:clamp(20px,2.6vw,30px) 10px;
  border-bottom:1px solid var(--line);
  transition:background .3s, padding .3s;
}
.hl-row:hover{background:var(--jade-mist2); padding-left:clamp(16px,2.2vw,26px);}
.hl-row:hover .hl-name{color:var(--jade);}
.hl-row:hover .hl-go{background:var(--amber); border-color:var(--amber); color:var(--jade-ink); transform:translateX(4px) rotate(-45deg);}
.hl-no{font-family:var(--mono); font-size:11px; letter-spacing:.16em; color:var(--muted);}
.hl-main{display:flex; align-items:center; gap:14px; flex-wrap:wrap;}
.hl-name{
  font-family:var(--head); font-weight:700;
  font-size:clamp(24px,2.7vw,40px);
  line-height:1; color:var(--jade-ink);
  transition:color .3s;
}
.hl-name em{font-family:var(--serif); font-style:italic; font-weight:400; color:var(--jade);}
.hl-tag{
  font-family:var(--head); font-weight:700; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase;
  background:var(--amber); color:var(--jade-ink);
  padding:4px 9px; border-radius:3px;
}
.hl-tag.jd{background:var(--jade); color:#fff;}
.hl-desc{font-size:13.5px; color:var(--ink-2); line-height:1.55; max-width:54ch;}
.hl-side{display:flex; flex-direction:column; align-items:flex-end; gap:5px; text-align:right;}
.hl-dom{font-family:var(--mono); font-size:12px; letter-spacing:.06em; color:var(--amber-d);}
.hl-sku{font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; color:var(--muted); text-transform:uppercase;}
.hl-go{
  width:42px;height:42px; border-radius:50%;
  border:1.5px solid var(--line-2);
  display:flex;align-items:center;justify-content:center;
  font-size:17px; color:var(--jade-ink);
  transition:.3s;
}
/* floating photo preview that follows the cursor */
#hl-preview{
  position:fixed; left:0; top:0; z-index:80; will-change:transform;
  width:min(300px,26vw); aspect-ratio:4/3;
  border-radius:6px; overflow:hidden;
  box-shadow:0 26px 60px rgba(4,37,34,.34);
  pointer-events:none;
  opacity:0;
  transition:opacity .25s;
  background-size:cover; background-position:center;
  border:3px solid #fff;
}
#hl-preview.on{opacity:1;}
#hl-preview .pv-tag{
  position:absolute; left:10px; bottom:10px;
  font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  background:rgba(4,37,34,.85); color:#fff;
  padding:5px 10px; border-radius:3px;
}
/* fallback CTA bar under the list */
.hl-cta{
  margin-top:26px;
  background:var(--jade-ink);
  border-radius:var(--r);
  padding:22px clamp(20px,3vw,34px);
  display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap;
  color:#fff;
}
.hl-cta .t{font-family:var(--serif); font-style:italic; font-weight:350; font-size:clamp(17px,1.6vw,22px);}
.hl-cta .t b{color:var(--amber); font-style:normal; font-family:var(--head); font-weight:700;}
@media(max-width:900px){
  .hl-row{grid-template-columns:44px 1fr 44px;}
  .hl-desc,.hl-side{display:none;}
  #hl-preview{display:none;}
}

/* ============ №02 — THE HOUSE (Cinnabar split: label+video / manifesto) ============ */
.factory{
  padding:clamp(72px,9vw,120px) 0;
  background:var(--jade-mist2);
  position:relative; overflow:hidden;
}
.factory::before{
  content:'KARE';
  position:absolute; right:-30px; top:18px;
  font-family:var(--head); font-weight:700;
  font-size:clamp(110px,16vw,260px);
  letter-spacing:-.04em;
  color:var(--jade);
  opacity:.05; line-height:1; pointer-events:none;
}
.fact-grid{
  display:grid; grid-template-columns:1fr 1.45fr;
  gap:clamp(36px,5.5vw,84px);
  align-items:start;
  position:relative; z-index:1;
}
.fact-left{position:sticky; top:110px;}
.fact-video{
  margin-top:clamp(22px,2.8vw,32px);
  border-radius:var(--r); overflow:hidden;
  aspect-ratio:16/10;
  background-image:var(--img-factory);
  background-size:cover; background-position:center;
  position:relative;
  box-shadow:0 22px 52px rgba(4,37,34,.18);
}
.fact-video::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg, transparent 50%, rgba(4,37,34,.55));}
.fact-play{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:68px;height:68px;border-radius:50%;
  background:rgba(255,255,255,.96); color:var(--jade);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  animation:pulse 2.4s infinite;
  transition:.25s; z-index:2;
}
.fact-play:hover{transform:translate(-50%,-50%) scale(1.07); background:var(--amber);}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(255,255,255,.45);}
  70%{box-shadow:0 0 0 24px rgba(255,255,255,0);}
  100%{box-shadow:0 0 0 0 rgba(255,255,255,0);}
}
.fact-cap{
  position:absolute; left:16px; bottom:14px; z-index:2;
  color:#fff;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
}
/* v1.5.32 factory 视频：有真视频时海报块可点，播放键跳动 */
.fact-video.has-video{cursor:pointer;}
.fact-video.has-video .fact-play{animation:pulse 2.4s infinite;}
.fact-video.has-video:hover .fact-play,
.fact-video.has-video:focus-visible .fact-play{transform:translate(-50%,-50%) scale(1.07); background:var(--amber);}
.fact-video.has-video:focus-visible{outline:3px solid var(--amber); outline-offset:3px;}
/* v1.5.32 视频 lightbox（YouTube/Vimeo/MP4 共用一个弹窗） */
.sz-vlb{
  position:fixed; inset:0; z-index:9999;
  display:none; align-items:center; justify-content:center;
  padding:24px; background:rgba(4,37,34,.9); backdrop-filter:blur(4px);
}
.sz-vlb.open{display:flex;}
.sz-vlb-inner{
  position:relative; width:min(1040px,94vw); aspect-ratio:16/9;
  background:#000; border-radius:var(--r); overflow:hidden;
  box-shadow:0 30px 90px rgba(0,0,0,.55);
}
.sz-vlb-frame{position:absolute; inset:0;}
.sz-vlb-frame iframe,
.sz-vlb-frame video{width:100%; height:100%; display:block; border:0;}
.sz-vlb-close{
  position:absolute; top:-46px; right:0; z-index:2;
  width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.14); color:#fff; border:1px solid rgba(255,255,255,.4);
  font-size:24px; line-height:1; cursor:pointer; transition:.2s;
}
.sz-vlb-close:hover{background:var(--amber); color:var(--jade-ink); border-color:var(--amber);}
.sz-vlb-close:focus-visible{outline:3px solid var(--amber); outline-offset:2px;}
@media(max-width:560px){ .sz-vlb-close{top:-42px;} .sz-vlb{padding:16px;} }
.fact-stats{
  display:flex; gap:clamp(20px,2.6vw,36px);
  margin-top:18px; padding-top:16px;
  border-top:1px solid var(--line-2);
}
.fact-stats .fs .n{font-family:var(--head); font-weight:700; font-size:clamp(20px,1.8vw,26px); color:var(--jade-ink); line-height:1.1;}
.fact-stats .fs .n i{font-style:normal; color:var(--amber-d); font-size:.65em;}
.fact-stats .fs .l{font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-top:4px;}

/* Cinnabar manifesto voice — main column */
.manif{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(19px,1.85vw,26px);
  line-height:1.55;
  color:var(--ink-2);
}
.manif p+p{margin-top:1.1em;}
.manif em{font-style:italic; color:var(--jade);}
.manif .drop{
  font-size:4.1em; float:left; line-height:.82;
  font-style:italic; font-weight:300;
  color:var(--jade);
  margin:0.04em 0.1em 0 -0.02em;
}
.manif-sign{
  margin-top:34px;
  display:flex; align-items:center; gap:16px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted);
}
.manif-sign svg{height:26px;}
@media(max-width:980px){
  .fact-grid{grid-template-columns:1fr;}
  .fact-left{position:static;}
}

/* ============ 04 — OEM/ODM (Cinnabar module, jade glaze) ============ */
.cap{
  background:var(--jade-ink);
  color:var(--paper);
  padding:clamp(76px,9.5vw,140px) 0;
  position:relative; overflow:hidden;
}
.cap::before{content:''; position:absolute; top:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg, var(--amber) 0 25%, var(--jade-br) 25% 50%, var(--amber) 50% 75%, var(--jade-br) 75%);}
.cap-header{
  padding-bottom:clamp(34px,4.2vw,56px);
  border-bottom:1px solid rgba(250,251,250,0.16);
}
.cap-title{
  font-family:var(--head);
  font-weight:700;
  font-size:clamp(34px,4.2vw,58px);
  line-height:1.02; letter-spacing:-.02em;
  color:var(--paper);
  max-width:18ch;
  margin-top:16px;
}
.cap-title em{font-family:var(--serif); font-style:italic; font-weight:400; color:#9FD8C5;}
.cap-body{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(56px,7.5vw,104px);
  padding-top:clamp(46px,5.6vw,72px);
}
.cap-col h3{
  font-family:var(--mono); font-size:11px; letter-spacing:.18em;
  color:var(--amber); text-transform:uppercase; font-weight:500;
  margin-bottom:22px;
}
.cap-col > p{
  font-family:var(--serif); font-weight:350;
  font-size:clamp(19px,1.6vw,24px);
  line-height:1.45; letter-spacing:-.01em;
  color:var(--paper);
  margin-bottom:1em;
}
.cap-col > p em{font-style:italic; color:#9FD8C5;}
.cap-list{list-style:none; border-top:1px solid rgba(250,251,250,.16); margin-top:22px;}
.cap-list li{
  display:grid; grid-template-columns:auto 1fr auto;
  gap:22px; padding:16px 0;
  border-bottom:1px solid rgba(250,251,250,.1);
  align-items:baseline;
}
.cap-list .k{font-family:var(--mono); font-size:10px; letter-spacing:.18em; color:rgba(250,251,250,.4); text-transform:uppercase; width:36px;}
.cap-list .l{font-family:var(--serif); font-size:clamp(17px,1.35vw,20px); font-weight:400; letter-spacing:-.01em;}
.cap-list .v{font-family:var(--mono); font-size:11px; letter-spacing:.12em; color:var(--amber); text-transform:uppercase;}
.cap-banner{
  margin-top:clamp(56px,6.8vw,92px);
  border-top:1px solid rgba(250,251,250,.18);
  padding-top:clamp(38px,4.6vw,62px);
  font-family:var(--serif); font-weight:350;
  font-size:clamp(34px,5.2vw,82px);
  line-height:1; letter-spacing:-.028em;
  color:var(--paper);
}
.cap-banner em{font-style:italic; font-weight:300; color:#9FD8C5;}
.cap-banner .am{color:var(--amber);}
.cap-banner .line2{display:block; text-align:right; padding-right:6%;}
.cap-banner .line3{display:block; padding-left:14%;}
@media(max-width:980px){
  .cap-header{grid-template-columns:1fr; align-items:start;}
  .cap-body{grid-template-columns:1fr;}
  .cap-banner .line2,.cap-banner .line3{padding:0; text-align:left;}
}

/* ============ 05 — PROCESS (Cinnabar module, jade glaze) ============ */
.process{padding:clamp(72px,9vw,120px) 0; background:var(--white);}
.proc-head{
  display:flex; justify-content:space-between; align-items:end; gap:24px; flex-wrap:wrap;
  border-bottom:2px solid var(--jade-ink);
  padding-bottom:22px;
  margin-bottom:0;
}
.proc-head .ref{font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted);}
.process-grid{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:var(--jade-ink);
  border:1px solid var(--jade-ink);
  border-top:0;
}
.step{
  background:var(--paper);
  padding:30px 26px;
  display:flex; flex-direction:column; gap:16px;
  position:relative;
  min-height:264px;
  transition:background .3s;
}
.step:hover{background:var(--jade-mist2);}
.step-no{font-family:var(--mono); font-size:11px; letter-spacing:.18em; color:var(--amber-d);}
.step-illo{width:54px; height:54px; opacity:.9;}
.step-name{
  font-family:var(--head);
  font-size:clamp(21px,1.8vw,27px);
  font-weight:700; line-height:1.08; letter-spacing:-.015em;
  margin-top:auto;
  color:var(--jade-ink);
}
.step-name em{font-family:var(--serif); font-style:italic; font-weight:400; color:var(--jade);}
.step-desc{font-size:13px; line-height:1.6; color:var(--ink-2);}
@media(max-width:1000px){.process-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.process-grid{grid-template-columns:1fr;}}

/* ============ 06 — QUALITY (Cinnabar module, jade glaze) ============ */
.quality{padding:clamp(72px,9vw,120px) 0; background:var(--jade-mist2);}
.qual-grid{
  display:grid; grid-template-columns:1.1fr 2fr;
  gap:clamp(36px,5.5vw,84px);
  align-items:start;
}
.qual-aside{position:sticky; top:110px;}
.qual-title{
  font-family:var(--head); font-weight:700;
  font-size:clamp(34px,4.2vw,54px);
  line-height:1.02; letter-spacing:-.02em;
  color:var(--jade-ink);
  margin-top:16px;
}
.qual-title em{font-family:var(--serif); font-style:italic; font-weight:400; color:var(--jade);}
.qual-note{
  font-family:var(--mono); font-size:12px; letter-spacing:.1em; line-height:2;
  text-transform:uppercase;
  color:var(--ink-2);
  margin-top:22px; max-width:34ch;
}
.qual-note b{color:var(--amber-d); font-weight:500;}
.qual-list{list-style:none; border-top:1px solid var(--line-2);}
.qual-list li{
  display:grid; grid-template-columns:76px 1fr auto;
  gap:26px; padding:24px 0;
  border-bottom:1px solid var(--line);
  align-items:center;
  transition:padding .35s, background .35s;
}
.qual-list li:hover{padding-left:16px; padding-right:16px; background:var(--white);}
.qual-list .qno{font-family:var(--mono); font-size:11px; letter-spacing:.18em; color:var(--muted);}
.qual-list .qname{
  font-family:var(--head);
  font-size:clamp(18px,1.5vw,23px);
  font-weight:600; letter-spacing:-.012em; line-height:1.2;
  color:var(--jade-ink);
}
.qual-list .qname .em{font-family:var(--serif); font-style:italic; color:var(--jade); font-weight:400;}
.qual-list .qmeta{font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--amber-d);}
@media(max-width:920px){
  .qual-grid{grid-template-columns:1fr;}
  .qual-aside{position:static;}
  .qual-list li{grid-template-columns:54px 1fr;}
  .qual-list .qmeta{grid-column:2;}
}

/* ============ 07 — GLOBAL (Cinnabar module, jade glaze) ============ */
.global{padding:clamp(72px,9vw,120px) 0; background:var(--white); overflow:hidden;}
.global-grid{
  display:grid; grid-template-columns:1.1fr 2fr;
  gap:clamp(36px,5vw,68px);
  align-items:start;
}
.global-headline{
  font-family:var(--head); font-weight:700;
  font-size:clamp(38px,5vw,72px);
  line-height:.98; letter-spacing:-.025em;
  color:var(--jade-ink);
  margin-top:18px;
}
.global-headline em{font-family:var(--serif); font-style:italic; color:var(--jade); font-weight:400;}
.regions{
  display:grid; grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line-2);
  border-left:1px solid var(--line-2);
  margin-top:22px;
}
.region{
  padding:20px 18px;
  border-right:1px solid var(--line-2);
  border-bottom:1px solid var(--line-2);
  transition:background .25s;
}
.region:hover{background:var(--jade-mist2);}
.region .rt{font-family:var(--mono); font-size:10px; letter-spacing:.16em; color:var(--amber-d); text-transform:uppercase;}
.region .rgv{
  font-family:var(--serif);
  font-size:clamp(26px,2.4vw,38px);
  font-weight:400; line-height:1;
  margin-top:11px; letter-spacing:-.018em;
  color:var(--jade-ink);
}
.region .rgv small{font-family:var(--mono); font-size:11px; margin-left:4px; color:var(--muted); vertical-align:top;}
.region .rn{font-size:11px; color:var(--muted); margin-top:9px; line-height:1.45; font-family:var(--mono); letter-spacing:.03em;}
.worldmap{
  margin-top:clamp(38px,4.6vw,64px);
  border-top:1px solid var(--line-2);
  padding-top:28px;
}
.worldmap svg{width:100%; height:auto; display:block;}
@media(max-width:980px){.global-grid{grid-template-columns:1fr;} .regions{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.regions{grid-template-columns:1fr;}}

/* ============ INQUIRY ============ */
.inquiry{
  padding:clamp(72px,9vw,120px) 0;
  background:
    radial-gradient(ellipse at 12% 0%, rgba(26,140,114,.32), transparent 50%),
    var(--jade);
  color:#fff;
}
.inq-grid{display:grid; grid-template-columns:1fr 1.08fr; gap:clamp(36px,5vw,80px); align-items:start;}
.inq-copy .eyebrow{color:#9FD8C5;}
.inq-copy h2{
  font-family:var(--head); font-weight:700;
  font-size:clamp(34px,4.4vw,56px);
  line-height:1.02; letter-spacing:-.02em;
  margin-top:16px;
}
.inq-copy h2 em{font-family:var(--serif); font-style:italic; font-weight:400; color:var(--amber);}
.inq-copy p{margin-top:18px; font-size:16.5px; color:rgba(255,255,255,.85); max-width:48ch; line-height:1.7;}
.inq-copy p em{font-family:var(--serif); font-style:italic; color:#9FD8C5;}
.inq-steps{list-style:none; margin-top:30px; display:flex; flex-direction:column; gap:16px;}
.inq-steps li{display:flex; gap:14px; align-items:flex-start; font-size:15px;}
.inq-steps .s{
  min-width:30px;height:30px;border-radius:50%;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.3);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--head); font-weight:700; font-size:13.5px;
  color:var(--amber);
}
.inq-steps b{display:block; font-family:var(--head); font-weight:700;}
.inq-steps span.d{color:rgba(255,255,255,.7); font-size:13.5px;}
.inq-direct{
  margin-top:32px; padding-top:26px;
  border-top:1px solid rgba(255,255,255,.2);
  display:flex; flex-direction:column; gap:11px;
}
.inq-direct a{display:inline-flex; gap:11px; align-items:center; font-family:var(--head); font-weight:600; font-size:16px; transition:.2s;}
.inq-direct a:hover{color:var(--amber);}
.inq-direct svg{width:18px;height:18px;color:var(--jade-br);}
.form{
  background:#fff; color:var(--ink);
  border-radius:8px;
  padding:clamp(26px,3.2vw,40px);
  box-shadow:0 30px 80px rgba(2,22,20,.4);
  position:relative;
}
.form::before{content:''; position:absolute; top:0; left:0; right:0; height:5px;
  background:linear-gradient(90deg, var(--amber), var(--jade-br));
  border-radius:8px 8px 0 0;}
.form h3{font-size:23px; font-weight:700; color:var(--jade-ink);}
.form .hint{font-size:13.5px; color:var(--muted); margin-top:6px;}
.frow{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:16px;}
.frow.full{grid-template-columns:1fr;}
.fld label{display:block; font-family:var(--head); font-size:13px; font-weight:600; color:var(--jade-ink); margin-bottom:7px;}
.fld label i{font-style:normal; color:var(--amber-d);}
.fld input,.fld select,.fld textarea{
  width:100%;
  border:1.5px solid var(--line-2);
  border-radius:var(--r);
  padding:13px 15px;
  font-size:14.5px;
  background:var(--paper);
  transition:.2s;
}
.fld input:focus,.fld select:focus,.fld textarea:focus{
  outline:none; border-color:var(--jade); background:#fff;
  box-shadow:0 0 0 3px rgba(11,74,66,.13);
}
/* v1.4.6 a11y: 键盘 Tab 到询盘字段时显浓 amber outline（jade box-shadow 只 13% 透明太淡）— WCAG 2.4.7 */
.fld input:focus-visible,.fld select:focus-visible,.fld textarea:focus-visible{
  outline:2px solid var(--amber); outline-offset:2px;
}
.fld textarea{min-height:108px; resize:vertical;}
.form .btn{width:100%; margin-top:20px; padding:17px;}
.fsec{margin-top:14px; text-align:center; font-size:12.5px; color:var(--muted); display:flex; justify-content:center; gap:8px; align-items:center;}
.fsec svg{width:14px;height:14px;color:var(--jade-br);}
@media(max-width:920px){.inq-grid{grid-template-columns:1fr;}}
@media(max-width:560px){.frow{grid-template-columns:1fr;}}

/* ============ FOOTER + giant wordmark (Cinnabar's finale) ============ */
.foot{background:var(--jade-ink); color:rgba(255,255,255,.75); font-size:14.5px;}
.foot-top{
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr 1.2fr;
  gap:clamp(28px,3.4vw,48px);
  padding:clamp(52px,6.4vw,80px) 0 46px;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.foot .logo-tx .a{color:#fff;}
.foot .logo-tx .b{color:rgba(255,255,255,.5);}
.foot-about p{
  margin-top:18px; line-height:1.6; max-width:32ch;
  font-family:var(--serif); font-weight:350; font-size:16px;
  color:rgba(255,255,255,.85);
}
.foot-certs{margin-top:20px; display:flex; gap:8px; flex-wrap:wrap;}
.foot-certs span{
  border:1px solid rgba(255,255,255,.25); border-radius:3px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.08em;
  padding:5px 10px;
}
.foot h4{color:#fff; font-size:16px; font-weight:700; margin-bottom:18px;}
.foot ul{list-style:none; display:flex; flex-direction:column; gap:11px;}
.foot ul a{transition:.2s;}
.foot ul a:hover{color:var(--amber); padding-left:6px;}
.foot-contact li{display:flex; gap:12px; align-items:flex-start; margin-bottom:14px; line-height:1.55;}
.foot-contact svg{width:17px;height:17px; margin-top:3px; color:var(--jade-br); flex-shrink:0;}

/* —— the Cinnabar finale: giant italic wordmark —— */
.foot-wordmark{
  margin:clamp(44px,5.5vw,68px) 0 clamp(26px,3vw,40px);
  font-family:var(--serif);
  font-weight:300; font-style:italic;
  font-size:clamp(72px,16.5vw,300px);
  line-height:.85; letter-spacing:-.04em;
  color:var(--paper);
  text-align:center;
  border-top:1px solid rgba(255,255,255,.14);
  border-bottom:1px solid rgba(255,255,255,.14);
  padding:clamp(18px,2.6vw,34px) 0 clamp(10px,1.6vw,20px);
}
.foot-wordmark sup{
  font-family:var(--mono); font-style:normal;
  font-size:clamp(10px,1vw,14px); letter-spacing:.12em;
  color:var(--amber);
  vertical-align:top; margin-left:8px;
}
.foot-bottom{
  display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap;
  padding:22px 0;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.04em;
  color:rgba(255,255,255,.5);
}
.foot-bottom a:hover{color:#fff;}
@media(max-width:1080px){.foot-top{grid-template-columns:1fr 1fr 1fr;}}
@media(max-width:760px){.foot-top{grid-template-columns:1fr 1fr;}}
@media(max-width:480px){.foot-top{grid-template-columns:1fr;}}

.wa{
  position:fixed; right:22px; bottom:22px; z-index:90;
  width:58px;height:58px;border-radius:50%;
  background:#23B265; color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 12px 30px rgba(35,178,101,.45);
  transition:.25s;
}
.wa:hover{transform:scale(1.08);}
.wa svg{width:28px;height:28px;}

/* v1.5.13 reveal 改纯 CSS 自动播放动画（照搬 KareWash .animate-up 模式）。
   原用 IntersectionObserver + JS 加 .in 做 scroll-reveal，Elementor 编辑器里 widget 异步注入后
   observer 抓不到 → 内容永久 opacity:0 隐身。纯 CSS animation 一渲染就自动播放，编辑器/前台都正常，
   零 JS 依赖。前端 JS 里的 reveal observer 已同步删除。 */
.rv{animation:rvIn .75s cubic-bezier(.2,.6,.2,1) backwards;}
@keyframes rvIn{from{opacity:0; transform:translateY(24px);} to{opacity:1; transform:none;}}
.rv[data-d="1"]{animation-delay:.08s;}
.rv[data-d="2"]{animation-delay:.16s;}
.rv[data-d="3"]{animation-delay:.24s;}

/* =====================================================================
   SHARED INNER-PAGE COMPONENTS  (added for multi-page site)
   ===================================================================== */

/* ---- mobile nav toggle (shared) ---- */
.nav-burger{
  display:none;
  width:44px;height:44px;
  border:1px solid var(--line);
  border-radius:var(--r);
  align-items:center; justify-content:center;
  flex-direction:column; gap:4px;
  cursor:pointer; background:#fff;
}
.nav-burger span{display:block; width:20px; height:2px; background:var(--jade-ink); transition:.25s;}
.mobile-menu{
  display:none;
  position:fixed; inset:0; z-index:200;
  background:var(--jade-ink); color:#fff;
  flex-direction:column;
  padding:24px var(--gut);
}
.mobile-menu.open{display:flex;}
.mobile-menu .mm-top{display:flex; justify-content:space-between; align-items:center; min-height:56px;}
.mobile-menu .mm-close{font-size:30px; color:#fff; line-height:1; background:none; border:0; cursor:pointer;}
.mobile-menu nav{display:flex; flex-direction:column; gap:4px; margin-top:30px;}
.mobile-menu nav a{
  font-family:var(--head); font-weight:600; font-size:24px;
  color:#fff; padding:14px 0;
  border-bottom:1px solid rgba(255,255,255,.12);
}
/* v1.5.15 移动菜单里下拉分组：static 展开，分组标题 + 缩进子项（不折叠，触屏直接可见） */
.mobile-menu .nav-dd{display:block; width:100%;}
.mobile-menu .dd-top{width:100%; justify-content:space-between; color:#fff; font-family:var(--head); font-weight:600; font-size:24px; padding:14px 0; border-bottom:1px solid rgba(255,255,255,.12); background:none; border-left:0; border-right:0; border-top:0;}
.mobile-menu .dd-caret{display:none;}
.mobile-menu .dd-panel{position:static; opacity:1; visibility:visible; transform:none; background:none; border:0; box-shadow:none; padding:4px 0 10px 16px; min-width:0; gap:0;}
.mobile-menu .dd-item{color:rgba(255,255,255,.82); font-size:18px; padding:11px 0; border-bottom:1px solid rgba(255,255,255,.08); border-radius:0;}
.mobile-menu .dd-item:hover{background:none; color:#fff;}
.mobile-menu nav a em{font-family:var(--serif); font-style:italic; color:#9FD8C5;}
.mobile-menu .mm-cta{margin-top:28px;}
.mobile-menu .mm-contact{margin-top:auto; padding-top:24px; font-family:var(--mono); font-size:12px; letter-spacing:.08em; color:rgba(255,255,255,.6); line-height:2;}
@media(max-width:1100px){ .nav-burger{display:flex;} }

/* mark active nav item */
.menu a.active{color:var(--jade-ink);}
.menu a.active::after{transform:scaleX(1);}

/* ---- page hero (inner pages) ---- */
.phero{
  position:relative; isolation:isolate;
  background:var(--jade-ink); color:#fff;
  overflow:hidden;
}
.phero::before{
  content:''; position:absolute; top:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg, var(--amber) 0 25%, var(--jade-br) 25% 50%, var(--amber) 50% 75%, var(--jade-br) 75%);
}
.phero-bg{
  position:absolute; inset:0; z-index:-1;
  background-size:cover; background-position:center;
  opacity:.16;
}
.phero-in{
  padding:clamp(56px,7vw,104px) 0 clamp(48px,6vw,80px);
  position:relative; z-index:1;
}
.crumbs{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(255,255,255,.55);
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  margin-bottom:24px;
}
.crumbs a{transition:.2s;}
.crumbs a:hover{color:var(--amber);}
.crumbs .sep{opacity:.5;}
.crumbs .cur{color:#fff;}
.phero h1{
  font-family:var(--head); font-weight:700;
  font-size:clamp(38px,5.4vw,72px);
  line-height:1.0; letter-spacing:-.025em;
  max-width:18ch;
}
.phero h1 em{font-family:var(--serif); font-style:italic; font-weight:400; color:#9FD8C5;}
.phero p{
  margin-top:20px; max-width:56ch;
  font-size:clamp(16px,1.3vw,19px); line-height:1.7;
  color:rgba(255,255,255,.82);
}
.phero p em{font-family:var(--serif); font-style:italic; color:#9FD8C5;}
.phero-meta{
  margin-top:clamp(34px,4vw,52px);
  padding-top:26px;
  border-top:1px solid rgba(255,255,255,.16);
  display:flex; gap:clamp(28px,4vw,56px); flex-wrap:wrap;
}
.phero-meta .m .n{font-family:var(--head); font-weight:700; font-size:clamp(24px,2.4vw,34px); color:#fff; line-height:1;}
.phero-meta .m .n i{font-style:normal; color:var(--amber); font-size:.6em;}
.phero-meta .m .l{font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.6); margin-top:6px;}

/* ---- generic section helpers ---- */
.sec{padding:clamp(64px,8vw,110px) 0;}
.sec.mist{background:var(--jade-mist2);}
.sec.white{background:var(--white);}
.sec.dark{background:var(--jade-ink); color:#fff;}
.sec.dark .sec-title{color:#fff;}
.sec.dark .sec-sub{color:rgba(255,255,255,.75);}
.sec.dark .eyebrow{color:#9FD8C5;}
.lead-serif{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(20px,2vw,28px); line-height:1.5;
  color:var(--ink-2); max-width:60ch;
}
.lead-serif em{font-style:italic; color:var(--jade);}
.prose{max-width:68ch;}
.prose p{font-size:16.5px; line-height:1.75; color:var(--ink-2); margin-bottom:1.1em;}
.prose p b{color:var(--jade-ink); font-weight:600;}
.prose p em{font-family:var(--serif); font-style:italic; color:var(--jade);}
.prose h3{font-family:var(--head); font-weight:700; font-size:clamp(22px,2vw,28px); color:var(--jade-ink); margin:1.6em 0 .5em; letter-spacing:-.015em;}
.prose h3 em{font-family:var(--serif); font-style:italic; font-weight:400; color:var(--jade);}

/* ---- two-column content ---- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,5vw,80px); align-items:center;}
.split.sticky-left .col-left{position:sticky; top:110px; align-self:start;}
.split-img{border-radius:var(--r); overflow:hidden; aspect-ratio:4/3.2; background-size:cover; background-position:center; box-shadow:0 24px 56px rgba(4,37,34,.18);}
@media(max-width:900px){.split{grid-template-columns:1fr;} .split.sticky-left .col-left{position:static;}}

/* ---- value cards grid ---- */
.vgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:clamp(36px,4.4vw,52px);}
.vcard{
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(24px,2.8vw,34px);
  transition:.25s;
}
.vcard:hover{box-shadow:0 18px 44px rgba(4,37,34,.12); transform:translateY(-4px); border-color:transparent;}
.vcard .ic{
  width:50px;height:50px; border-radius:var(--r);
  background:var(--jade-mist); color:var(--jade);
  display:flex; align-items:center; justify-content:center; margin-bottom:18px;
}
.vcard .ic svg{width:24px;height:24px;}
.vcard h3{font-family:var(--head); font-weight:700; font-size:19px; color:var(--jade-ink); line-height:1.2;}
.vcard h3 em{font-family:var(--serif); font-style:italic; font-weight:400; color:var(--jade);}
.vcard p{font-size:14px; color:var(--ink-2); line-height:1.6; margin-top:10px;}
@media(max-width:920px){.vgrid{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.vgrid{grid-template-columns:1fr;}}

/* ---- timeline (about) ---- */
.tl{margin-top:clamp(36px,4.4vw,56px); border-left:2px solid var(--line-2); padding-left:clamp(24px,3vw,40px);}
.tl-item{position:relative; padding-bottom:clamp(28px,3.4vw,44px);}
.tl-item:last-child{padding-bottom:0;}
.tl-item::before{
  content:''; position:absolute; left:calc(-1*clamp(24px,3vw,40px) - 7px); top:6px;
  width:12px;height:12px;border-radius:50%; background:var(--amber);
  box-shadow:0 0 0 4px var(--jade-mist2);
}
.tl-yr{font-family:var(--head); font-weight:700; font-size:clamp(22px,2vw,28px); color:var(--jade); letter-spacing:-.01em;}
.tl-item h4{font-family:var(--head); font-weight:700; font-size:17px; color:var(--jade-ink); margin-top:4px;}
.tl-item p{font-size:14.5px; color:var(--ink-2); line-height:1.6; margin-top:6px; max-width:56ch;}

/* ---- product overview cards (products page) ---- */
.pov-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:clamp(36px,4.4vw,52px);}
.pov{
  position:relative; border-radius:var(--r); overflow:hidden;
  background:var(--jade-mist2); border:1px solid var(--line);
  display:flex; flex-direction:column; transition:.3s;
}
.pov:hover{box-shadow:0 22px 54px rgba(4,37,34,.16); transform:translateY(-5px); border-color:transparent;}
.pov:hover .pov-img img{transform:scale(1.07);}
.pov:hover .pov-foot{background:var(--jade); color:#fff;}
.pov:hover .pov-foot .ar{transform:translateX(4px);}
.pov-img{aspect-ratio:16/10; overflow:hidden; position:relative; background:var(--jade-mist);}
.pov-img img{width:100%;height:100%;object-fit:cover; transition:transform .55s cubic-bezier(.2,.6,.2,1);}
.pov-no{position:absolute; top:0; left:0; background:var(--jade-ink); color:#fff; font-family:var(--mono); font-size:11px; letter-spacing:.14em; padding:7px 13px; z-index:2;}
.pov-tag{position:absolute; top:12px; right:12px; background:var(--amber); color:var(--jade-ink); font-family:var(--head); font-weight:700; font-size:11px; letter-spacing:.04em; text-transform:uppercase; padding:5px 11px; border-radius:3px; z-index:2;}
.pov-tag.jd{background:var(--jade); color:#fff;}
.pov-body{padding:22px 22px 0; flex:1;}
.pov-name{font-family:var(--head); font-weight:700; font-size:21px; color:var(--jade-ink); line-height:1.15;}
.pov-name em{font-family:var(--serif); font-style:italic; font-weight:400; color:var(--jade);}
.pov-desc{font-size:13.5px; color:var(--ink-2); line-height:1.6; margin-top:10px;}
.pov-list{list-style:none; margin-top:14px; display:flex; flex-wrap:wrap; gap:6px;}
.pov-list li{font-family:var(--mono); font-size:10.5px; letter-spacing:.04em; color:var(--jade); background:var(--jade-mist); padding:4px 9px; border-radius:3px;}
.pov-foot{
  margin-top:18px; border-top:1px solid var(--line);
  padding:14px 22px;
  display:flex; justify-content:space-between; align-items:center;
  font-family:var(--head); font-weight:600; font-size:13.5px; color:var(--jade);
  transition:.25s;
}
.pov-foot .ar{transition:transform .25s;}
.pov-foot .sku{font-family:var(--mono); font-weight:400; font-size:11px; letter-spacing:.1em; color:var(--muted);}
.pov:hover .pov-foot .sku{color:rgba(255,255,255,.7);}
@media(max-width:1000px){.pov-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:600px){.pov-grid{grid-template-columns:1fr;}}

/* ---- FAQ accordion ---- */
.faq{max-width:820px; margin:clamp(36px,4.4vw,52px) auto 0; border-top:1px solid var(--line-2);}
.faq-item{border-bottom:1px solid var(--line);}
.faq-q{
  width:100%; text-align:left; background:none; border:0; cursor:pointer;
  padding:22px 8px; display:flex; justify-content:space-between; gap:20px; align-items:center;
  font-family:var(--head); font-weight:600; font-size:clamp(16px,1.4vw,19px); color:var(--jade-ink);
}
/* v1.4.6 a11y: FAQ 按钮键盘 focus 可见（WCAG 2.4.7）— 现在是真 <button>，需 focus-visible outline */
.faq-q:focus-visible{outline:2px solid var(--amber); outline-offset:2px;}
.faq-q .pm{font-size:24px; color:var(--jade); transition:transform .25s; line-height:1; flex-shrink:0;}
.faq-item.open .faq-q .pm{transform:rotate(45deg);}
.faq-a{max-height:0; overflow:hidden; transition:max-height .3s ease;}
.faq-a-in{padding:0 8px 22px; font-size:15px; color:var(--ink-2); line-height:1.7; max-width:64ch;}
.faq-a-in b{color:var(--jade-ink);}

/* ---- step cards (oem/process) ---- */
.steps-row{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:clamp(36px,4.4vw,52px);}
.scard{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:26px 24px; position:relative;}
.scard .sn{width:46px;height:46px;border-radius:50%; background:var(--jade); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--head); font-weight:700; font-size:18px;}
.scard h3{font-family:var(--head); font-weight:700; font-size:18px; color:var(--jade-ink); margin-top:18px;}
.scard h3 em{font-family:var(--serif); font-style:italic; font-weight:400; color:var(--jade);}
.scard p{font-size:13.5px; color:var(--ink-2); line-height:1.6; margin-top:8px;}
.scard .tt{display:inline-block; margin-top:12px; font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--amber-d); border:1px solid var(--line-2); border-radius:3px; padding:4px 9px;}
@media(max-width:900px){.steps-row{grid-template-columns:1fr 1fr;}}
@media(max-width:520px){.steps-row{grid-template-columns:1fr;}}

/* ---- cta band (reusable) ---- */
.ctaband{
  background:
    radial-gradient(ellipse at 12% 0%, rgba(26,140,114,.32), transparent 50%),
    var(--jade);
  color:#fff; text-align:center;
  padding:clamp(60px,7.5vw,110px) 0;
}
.ctaband h2{font-family:var(--head); font-weight:700; font-size:clamp(30px,4vw,52px); line-height:1.04; letter-spacing:-.02em;}
.ctaband h2 em{font-family:var(--serif); font-style:italic; font-weight:400; color:var(--amber);}
.ctaband p{margin:16px auto 0; max-width:52ch; font-size:16.5px; color:rgba(255,255,255,.85); line-height:1.7;}
.ctaband .btns{margin-top:30px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap;}

/* ---- news / cards ---- */
.news-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:clamp(36px,4.4vw,52px);}
.ncard{background:#fff; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; display:flex; flex-direction:column; transition:.3s;}
.ncard:hover{box-shadow:0 20px 48px rgba(4,37,34,.14); transform:translateY(-4px); border-color:transparent;}
.ncard:hover .ncard-img img{transform:scale(1.06);}
.ncard-img{aspect-ratio:16/10; overflow:hidden; background:var(--jade-mist);}
.ncard-img img{width:100%;height:100%;object-fit:cover; transition:transform .5s;}
.ncard-body{padding:22px; flex:1; display:flex; flex-direction:column;}
.ncard-cat{font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--amber-d);}
.ncard h3{font-family:var(--head); font-weight:700; font-size:18px; color:var(--jade-ink); line-height:1.25; margin-top:10px;}
.ncard p{font-size:14px; color:var(--ink-2); line-height:1.6; margin-top:8px; flex:1;}
.ncard .date{font-family:var(--mono); font-size:11px; color:var(--muted); margin-top:14px; letter-spacing:.04em;}
@media(max-width:1000px){.news-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:600px){.news-grid{grid-template-columns:1fr;}}

/* ---- contact layout ---- */
.contact-grid{display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(36px,5vw,72px); align-items:start;}
.cinfo{display:flex; flex-direction:column; gap:22px;}
.cinfo-item{display:flex; gap:16px; align-items:flex-start;}
.cinfo-item .ic{min-width:48px;height:48px;border-radius:var(--r); background:var(--jade-mist); color:var(--jade); display:flex; align-items:center; justify-content:center;}
.cinfo-item .ic svg{width:22px;height:22px;}
.cinfo-item .ct{font-family:var(--head); font-weight:700; font-size:16px; color:var(--jade-ink);}
.cinfo-item .cd{font-size:14.5px; color:var(--ink-2); line-height:1.6; margin-top:3px;}
.cinfo-item .cd a:hover{color:var(--jade);}
.map-box{margin-top:8px; border-radius:var(--r); overflow:hidden; aspect-ratio:16/7; background:var(--jade-mist); border:1px solid var(--line); position:relative;}
.map-box .map-note{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; color:var(--muted); font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase;}
.map-box svg{width:30px;height:30px;color:var(--jade-br);}
@media(max-width:900px){.contact-grid{grid-template-columns:1fr;}}

/* ---- spec table (products / quality) ---- */
.spec-table{width:100%; border-collapse:collapse; margin-top:clamp(28px,3vw,40px); font-size:14.5px;}
.spec-table th,.spec-table td{text-align:left; padding:15px 18px; border-bottom:1px solid var(--line);}
.spec-table th{font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); font-weight:500; background:var(--jade-mist2);}
.spec-table td{color:var(--ink-2);}
.spec-table td b{color:var(--jade-ink); font-weight:600;}
.spec-table tr:hover td{background:var(--jade-mist2);}

/* page-level inner anchor offset for sticky nav */
:target{scroll-margin-top:130px;}

/* =====================================================================
   MARKET BARS + EXPORT-FACTS CARD  (used on about / contact)
   ===================================================================== */
.mrow{
  display:grid; grid-template-columns:150px 1fr 56px;
  gap:18px; align-items:center;
  padding:13px 0;
  border-bottom:1px solid var(--line);
}
.mrow:first-child{border-top:1px solid var(--line-2);}
.m-name{font-family:var(--head); font-weight:700; font-size:16px; color:var(--jade-ink);}
.m-track{height:14px; background:var(--jade-mist); border-radius:2px; overflow:hidden; position:relative;}
.m-fill{
  height:100%; width:0;
  background:linear-gradient(90deg, var(--jade), var(--jade-br));
  transition:width 1.2s cubic-bezier(.6,0,.2,1);
  position:relative;
}
.m-fill::after{content:''; position:absolute; right:0; top:0; bottom:0; width:3px; background:var(--amber);}
.m-pct{font-family:var(--head); font-weight:700; font-size:17px; color:var(--jade); text-align:right;}

.mk-card{
  background:var(--jade-ink);
  color:#fff;
  border-radius:var(--r);
  padding:clamp(28px,3.2vw,40px);
  position:relative; overflow:hidden;
}
.mk-card::after{
  content:''; position:absolute; right:-60px; top:-60px;
  width:200px;height:200px;border-radius:50%;
  border:36px solid rgba(26,140,114,.25);
}
.mk-card h3{font-family:var(--head); font-weight:700; font-size:21px;}
.mk-card ul{list-style:none; margin-top:22px; position:relative; z-index:1;}
.mk-card li{
  display:flex; justify-content:space-between; gap:16px;
  padding:13px 0;
  border-bottom:1px solid rgba(255,255,255,.13);
  font-size:14.5px; align-items:baseline;
}
.mk-card li:last-child{border-bottom:0;}
.mk-card li span{color:rgba(255,255,255,.65); flex-shrink:0;}
.mk-card li b{font-weight:600; text-align:right;}
.mk-card li b.am{color:var(--amber);}
@media(max-width:560px){
  .mrow{grid-template-columns:110px 1fr 48px; gap:12px;}
  .mk-card li{flex-direction:column; gap:3px;}
  .mk-card li b{text-align:left;}
}

/* =====================================================================
   GALLERY + LIGHTBOX
   ===================================================================== */
.gal-filter{
  display:flex; gap:10px; flex-wrap:wrap;
  margin-top:clamp(28px,3.4vw,44px);
}
.gal-filter button{
  font-family:var(--head); font-weight:600; font-size:13.5px;
  padding:9px 18px; border-radius:100px;
  border:1.5px solid var(--line-2); background:#fff; color:var(--ink-2);
  cursor:pointer; transition:.2s;
}
.gal-filter button:hover{border-color:var(--jade); color:var(--jade);}
.gal-filter button.on{background:var(--jade); border-color:var(--jade); color:#fff;}
.gal-grid{
  margin-top:clamp(28px,3.4vw,40px);
  columns:3; column-gap:16px;
}
.gal-item{
  break-inside:avoid; margin-bottom:16px;
  border-radius:var(--r); overflow:hidden;
  position:relative; cursor:pointer;
  display:block;
}
.gal-item img{width:100%; display:block; transition:transform .5s cubic-bezier(.2,.6,.2,1);}
.gal-item:hover img{transform:scale(1.06);}
.gal-item::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 60%, rgba(4,37,34,.55));
  opacity:0; transition:.3s;
}
.gal-item:hover::after{opacity:1;}
.gal-cap{
  position:absolute; left:14px; bottom:12px; z-index:2;
  color:#fff; font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  opacity:0; transform:translateY(6px); transition:.3s;
}
.gal-item:hover .gal-cap{opacity:1; transform:none;}
.gal-item.hide{display:none;}
@media(max-width:900px){.gal-grid{columns:2;}}
@media(max-width:560px){.gal-grid{columns:1;}}

.lightbox{
  position:fixed; inset:0; z-index:300;
  background:rgba(4,18,16,.94);
  display:none; align-items:center; justify-content:center;
  padding:40px;
}
.lightbox.open{display:flex;}
.lightbox img{max-width:90vw; max-height:84vh; border-radius:var(--r); box-shadow:0 30px 80px rgba(0,0,0,.5);}
.lb-close{position:absolute; top:24px; right:30px; font-size:36px; color:#fff; background:none; border:0; cursor:pointer; line-height:1;}
.lb-nav{position:absolute; top:50%; transform:translateY(-50%); width:54px; height:54px; border-radius:50%; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25); color:#fff; font-size:22px; cursor:pointer; transition:.2s;}
.lb-nav:hover{background:var(--amber); color:var(--jade-ink); border-color:var(--amber);}
.lb-prev{left:24px;} .lb-next{right:24px;}
.lb-cap{position:absolute; bottom:24px; left:0; right:0; text-align:center; color:rgba(255,255,255,.8); font-family:var(--mono); font-size:12px; letter-spacing:.1em;}

/* =====================================================================
   ARTICLE / NEWS DETAIL
   ===================================================================== */
.article{max-width:760px; margin:0 auto;}
.article-meta{
  display:flex; gap:18px; align-items:center; flex-wrap:wrap;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
  padding-bottom:22px; border-bottom:1px solid var(--line); margin-bottom:32px;
}
.article-meta .cat{color:var(--amber-d); font-weight:500;}
.article-lead{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(20px,2vw,26px); line-height:1.5; color:var(--ink-2);
  margin-bottom:32px;
}
.article-lead em{font-style:italic; color:var(--jade);}
.article-body p{font-size:16.5px; line-height:1.8; color:var(--ink-2); margin-bottom:1.3em;}
.article-body p b{color:var(--jade-ink); font-weight:600;}
.article-body h3{font-family:var(--head); font-weight:700; font-size:clamp(20px,1.9vw,26px); color:var(--jade-ink); margin:1.6em 0 .5em;}
.article-body h3 em{font-family:var(--serif); font-style:italic; font-weight:400; color:var(--jade);}
.article-body img{border-radius:var(--r); margin:1.6em 0;}
.article-body blockquote{
  border-left:3px solid var(--amber); padding:8px 0 8px 24px; margin:1.6em 0;
  font-family:var(--serif); font-style:italic; font-size:clamp(19px,1.8vw,24px); color:var(--jade); line-height:1.5;
}
.article-body ul{margin:1em 0 1.3em 0; padding-left:0; list-style:none;}
.article-body ul li{position:relative; padding-left:26px; margin-bottom:10px; font-size:16px; color:var(--ink-2); line-height:1.7;}
.article-body ul li::before{content:''; position:absolute; left:4px; top:11px; width:8px; height:8px; background:var(--amber); border-radius:2px;}
.article-share{
  margin-top:40px; padding-top:24px; border-top:1px solid var(--line);
  display:flex; gap:12px; align-items:center; flex-wrap:wrap;
  font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
}
.article-img-hero{width:100%; aspect-ratio:21/9; object-fit:cover; border-radius:var(--r); margin-bottom:clamp(28px,3.4vw,44px);}

/* related cards reuse .news-grid / .ncard */

/* =====================================================================
   PRODUCT DETAIL
   ===================================================================== */
.pd-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,5vw,72px); align-items:start;}
.pd-gallery{position:sticky; top:110px;}
.pd-main{
  width:100%; aspect-ratio:4/3; object-fit:cover;
  border-radius:var(--r); box-shadow:0 24px 56px rgba(4,37,34,.16);
}
.pd-thumbs{display:flex; gap:12px; margin-top:14px;}
.pd-thumbs img{
  width:84px; height:64px; object-fit:cover; border-radius:var(--r);
  border:2px solid transparent; cursor:pointer; transition:.2s; opacity:.7;
}
.pd-thumbs img:hover{opacity:1;}
.pd-thumbs img.on{border-color:var(--jade); opacity:1;}
.pd-tagrow{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px;}
.pd-tag{font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--jade); background:var(--jade-mist); padding:5px 11px; border-radius:3px;}
.pd-tag.amber{color:var(--jade-ink); background:var(--amber);}
.pd-title{font-family:var(--head); font-weight:700; font-size:clamp(30px,3.6vw,46px); line-height:1.04; letter-spacing:-.02em; color:var(--jade-ink);}
.pd-title em{font-family:var(--serif); font-style:italic; font-weight:400; color:var(--jade);}
.pd-sub{font-family:var(--serif); font-style:italic; font-size:clamp(17px,1.5vw,21px); color:var(--ink-2); margin-top:12px; line-height:1.5;}
.pd-desc{font-size:16px; line-height:1.75; color:var(--ink-2); margin-top:20px;}
.pd-feat{list-style:none; margin-top:24px; display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.pd-feat li{display:flex; gap:10px; align-items:flex-start; font-size:14.5px; color:var(--ink-2);}
.pd-feat svg{width:18px;height:18px;color:var(--jade-br); flex-shrink:0; margin-top:2px;}
.pd-cta{margin-top:30px; display:flex; gap:14px; flex-wrap:wrap;}
.pd-site{
  margin-top:22px; padding:16px 20px; border:1px solid var(--line); border-radius:var(--r);
  display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;
  background:var(--jade-mist2);
}
.pd-site .l{font-size:13.5px; color:var(--ink-2);}
.pd-site .l b{color:var(--jade-ink); font-family:var(--mono); font-size:13px;}
@media(max-width:900px){.pd-grid{grid-template-columns:1fr;} .pd-gallery{position:static;} .pd-feat{grid-template-columns:1fr;}}

/* =====================================================================
   ALBUM LIST  (trade-show / factory album covers)
   ===================================================================== */
.album-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:clamp(36px,4.4vw,52px);}
.album{
  position:relative; border-radius:var(--r); overflow:hidden;
  display:block; aspect-ratio:4/3; background:var(--jade-ink);
}
.album img{width:100%;height:100%;object-fit:cover; transition:transform .5s cubic-bezier(.2,.6,.2,1); opacity:.9;}
.album:hover img{transform:scale(1.06); opacity:1;}
.album::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg, transparent 35%, rgba(4,37,34,.85));}
.album-info{position:absolute; left:0; right:0; bottom:0; z-index:2; padding:22px; color:#fff;}
.album-cat{font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--amber);}
.album-info h3{font-family:var(--head); font-weight:700; font-size:clamp(20px,1.9vw,25px); line-height:1.15; margin-top:8px;}
.album-info h3 em{font-family:var(--serif); font-style:italic; font-weight:400; color:#9FD8C5;}
.album-meta{display:flex; gap:14px; align-items:center; margin-top:10px; font-family:var(--mono); font-size:11px; letter-spacing:.08em; color:rgba(255,255,255,.75);}
.album-count{display:inline-flex; align-items:center; gap:6px;}
.album-count svg{width:13px;height:13px;}
.album-arrow{position:absolute; top:16px; right:16px; z-index:2; width:38px;height:38px;border-radius:50%; background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.3); display:flex; align-items:center; justify-content:center; color:#fff; transition:.25s;}
.album:hover .album-arrow{background:var(--amber); border-color:var(--amber); color:var(--jade-ink); transform:rotate(-45deg);}
@media(max-width:1000px){.album-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.album-grid{grid-template-columns:1fr;}}

/* album detail intro strip */
.album-head{display:grid; grid-template-columns:1.4fr 1fr; gap:clamp(28px,4vw,56px); align-items:end;}
.album-facts{list-style:none; border-top:1px solid var(--line-2);}
.album-facts li{display:flex; justify-content:space-between; gap:16px; padding:12px 0; border-bottom:1px solid var(--line); font-size:14px;}
.album-facts li span{color:var(--muted);}
.album-facts li b{color:var(--jade-ink); font-weight:600; text-align:right;}
@media(max-width:760px){.album-head{grid-template-columns:1fr;}}

/* =====================================================================
   BRANDS / SISTER-SITE MATRIX
   ===================================================================== */
.brand-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-top:clamp(36px,4.4vw,52px);}
.brandcard{
  position:relative; border-radius:var(--r); overflow:hidden;
  display:grid; grid-template-columns:1fr 1fr; min-height:230px;
  border:1px solid var(--line); background:#fff; transition:.3s;
}
.brandcard:hover{box-shadow:0 22px 54px rgba(4,37,34,.16); transform:translateY(-4px); border-color:transparent;}
.brandcard:hover .bc-img img{transform:scale(1.07);}
.brandcard:hover .bc-go{background:var(--amber); border-color:var(--amber); color:var(--jade-ink); transform:rotate(-45deg);}
.bc-img{overflow:hidden; background:var(--jade-mist);}
.bc-img img{width:100%;height:100%;object-fit:cover; transition:transform .55s cubic-bezier(.2,.6,.2,1);}
.bc-body{padding:24px 24px; display:flex; flex-direction:column;}
.bc-no{font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--muted);}
.bc-name{font-family:var(--head); font-weight:700; font-size:21px; color:var(--jade-ink); line-height:1.15; margin-top:8px;}
.bc-name em{font-family:var(--serif); font-style:italic; font-weight:400; color:var(--jade);}
.bc-desc{font-size:13px; color:var(--ink-2); line-height:1.55; margin-top:8px; flex:1;}
.bc-dom{font-family:var(--mono); font-size:12px; letter-spacing:.04em; color:var(--amber-d); margin-top:12px;}
.bc-go{position:absolute; top:16px; right:16px; width:38px;height:38px;border-radius:50%; border:1.5px solid var(--line-2); display:flex; align-items:center; justify-content:center; color:var(--jade-ink); transition:.3s; background:#fff;}
@media(max-width:760px){.brand-grid{grid-template-columns:1fr;} .brandcard{grid-template-columns:1fr;} .bc-img{aspect-ratio:16/9;}}

/* sister-site callout used inside category pages */
.sister-callout{
  margin-top:clamp(32px,4vw,48px);
  background:var(--jade-ink); color:#fff; border-radius:var(--r);
  padding:clamp(26px,3vw,40px);
  display:grid; grid-template-columns:1fr auto; gap:24px; align-items:center;
}
.sister-callout .sc-l .k{font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--amber); margin-bottom:8px;}
.sister-callout .sc-l h3{font-family:var(--head); font-weight:700; font-size:clamp(22px,2.2vw,30px); line-height:1.1;}
.sister-callout .sc-l h3 em{font-family:var(--serif); font-style:italic; font-weight:400; color:#9FD8C5;}
.sister-callout .sc-l p{font-size:14.5px; color:rgba(255,255,255,.78); margin-top:10px; max-width:52ch;}
@media(max-width:680px){.sister-callout{grid-template-columns:1fr;}}

/* category list intro */
.cat-toolbar{display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; margin-top:clamp(28px,3.4vw,40px); padding-bottom:18px; border-bottom:1px solid var(--line);}
.cat-count{font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted);}

/* v1.5.22 已删 .subcat-bar 全套规则 —— 电商版分类页用左侧 facet 侧栏，设计稿的水平 subcat-bar
   从未在主题模板输出（死 CSS，配套 JS 也已清）。.pov.hide 保留（filter 通用隐藏类）。 */
.pov.hide{display:none;}

/* sub-category section header (when shown grouped) */
.subcat-head{
  display:flex; align-items:baseline; gap:16px;
  margin:clamp(40px,5vw,64px) 0 clamp(20px,2.4vw,28px);
  padding-bottom:14px; border-bottom:2px solid var(--jade-ink);
}
.subcat-head:first-of-type{margin-top:clamp(28px,3.4vw,40px);}
.subcat-head h3{font-family:var(--head); font-weight:700; font-size:clamp(22px,2.2vw,30px); color:var(--jade-ink); letter-spacing:-.015em;}
.subcat-head h3 em{font-family:var(--serif); font-style:italic; font-weight:400; color:var(--jade);}
.subcat-head .n{font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted);}
.subcat-head .more{margin-left:auto; font-family:var(--head); font-weight:600; font-size:13px; color:var(--jade); display:inline-flex; align-items:center; gap:6px;}
.subcat-head .more:hover{color:var(--amber-d);}

/* products hub: category card now shows sub-category chips that hint depth */
.pov-subs{list-style:none; margin-top:12px; display:flex; flex-wrap:wrap; gap:6px;}
.pov-subs li{font-family:var(--mono); font-size:10.5px; letter-spacing:.03em; color:var(--ink-2); background:#fff; border:1px solid var(--line); padding:4px 9px; border-radius:3px;}

/* =====================================================================
   HERO · CINEMA EDITION  (full-bleed background image/video + overlay)
   ===================================================================== */
.hero-cine{
  position:relative;
  min-height:min(92vh,900px);
  display:flex; flex-direction:column;
  justify-content:flex-end;
  overflow:hidden;
  isolation:isolate;
}
/* background media layer */
.hero-cine-bg{
  position:absolute; inset:0; z-index:-2;
  background:var(--jade-ink);
}
.hero-cine-bg img,
.hero-cine-bg video{
  width:100%; height:100%; object-fit:cover;
  display:block;
}
/* the translucent overlay — the part you asked for */
.hero-cine-bg::after{
  content:''; position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg, rgba(4,37,34,.42) 0%, rgba(4,37,34,.32) 38%, rgba(4,37,34,.82) 100%),
    linear-gradient(105deg, rgba(4,37,34,.66) 0%, rgba(4,37,34,.18) 58%, transparent 100%);
}
/* subtle top accent line, same as inner page heroes */
.hero-cine::before{
  content:''; position:absolute; top:0; left:0; right:0; height:4px; z-index:3;
  background:linear-gradient(90deg, var(--amber) 0 25%, var(--jade-br) 25% 50%, var(--amber) 50% 75%, var(--jade-br) 75%);
}
.hero-cine-in{
  position:relative; z-index:2;
  width:100%;
  padding:clamp(48px,7vw,96px) 0 clamp(40px,5vw,64px);
}
.hero-cine .eyebrow{color:#9FD8C5;}
.hero-cine .eyebrow::before{background:var(--amber);}
.hero-cine h1{
  font-family:var(--head); font-weight:700;
  font-size:clamp(44px,6.6vw,104px);
  line-height:.96; letter-spacing:-.03em;
  color:#fff;
  margin-top:18px;
  max-width:16ch;
  text-shadow:0 2px 30px rgba(0,0,0,.25);
}
.hero-cine h1 em{
  font-family:var(--serif); font-style:italic; font-weight:300;
  color:#9FD8C5; letter-spacing:-.01em;
}
.hero-cine h1 .und{position:relative; white-space:nowrap;}
.hero-cine h1 .und::after{
  content:''; position:absolute; left:0; right:0; bottom:.1em;
  height:.1em; background:var(--amber); z-index:-1; opacity:.9;
}
.hero-cine .lead{
  margin-top:24px; max-width:54ch;
  font-size:clamp(16px,1.4vw,20px); line-height:1.65;
  color:rgba(255,255,255,.9);
  text-shadow:0 1px 16px rgba(0,0,0,.3);
}
.hero-cine .lead b{color:#fff; font-weight:600;}
.hero-cine .lead em{font-family:var(--serif); font-style:italic; color:#9FD8C5;}
.hero-cine-ctas{margin-top:32px; display:flex; gap:14px; flex-wrap:wrap;}
.hero-cine .btn-line{border-color:rgba(255,255,255,.5); color:#fff;}
.hero-cine .btn-line:hover{background:rgba(255,255,255,.12); border-color:#fff; color:#fff;}
/* proof stats row on glass */
.hero-cine-proof{
  margin-top:clamp(40px,5vw,60px);
  padding-top:28px;
  border-top:1px solid rgba(255,255,255,.22);
  display:flex; gap:clamp(24px,4vw,60px); flex-wrap:wrap;
}
.hero-cine-proof .proof .n{font-family:var(--head); font-weight:700; font-size:clamp(26px,2.6vw,40px); color:#fff; line-height:1;}
.hero-cine-proof .proof .n i{font-style:normal; color:var(--amber); font-size:.6em;}
.hero-cine-proof .proof .l{font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.65); margin-top:7px;}
/* live badge floating top-right */
.hero-cine-badge{
  position:absolute; top:clamp(20px,3vw,34px); right:var(--gut); z-index:3;
  display:inline-flex; align-items:center; gap:10px;
  background:rgba(4,37,34,.55); backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.18); border-radius:100px;
  padding:9px 16px 9px 14px;
  color:#fff; font-size:13px;
}
.hero-cine-badge .live{width:9px;height:9px;border-radius:50%; background:#27C281; box-shadow:0 0 0 4px rgba(39,194,129,.25); animation:blink 1.8s infinite;}
.hero-cine-badge b{font-family:var(--head); font-weight:600;}
.hero-cine-badge span{color:rgba(255,255,255,.7); font-family:var(--mono); font-size:11px; letter-spacing:.04em;}
/* optional play button for video */
.hero-cine-play{
  position:absolute; left:50%; top:46%; transform:translate(-50%,-50%); z-index:3;
  width:84px;height:84px;border-radius:50%;
  background:rgba(255,255,255,.92); color:var(--jade);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  animation:pulse 2.4s infinite; transition:.25s;
}
.hero-cine-play:hover{transform:translate(-50%,-50%) scale(1.08); background:var(--amber);}
@media(max-width:680px){
  .hero-cine{min-height:88vh;}
  .hero-cine-badge{display:none;}
  .hero-cine h1{font-size:clamp(40px,11vw,64px);}
}