/* 鑫维度官网 — 纸感克制型 */
:root{
  --paper:#F4F0E7;
  --paper-2:#EAE3D4;
  --ink:#191512;
  --ink-2:#3F3931;
  --ink-3:#6B6255;
  --red:#C2773E;
  --line:rgba(25,21,18,.16);
  --line-soft:rgba(25,21,18,.09);
  --panel:#14110E;
  --panel-line:rgba(244,240,231,.18);
  --on-panel:#F4F0E7; /* 深底区块专用文字色：不随主题纸色变化 */

  --serif:"STZhongsong","华文中宋","Songti SC","Source Han Serif SC","Noto Serif SC",serif;
  --sans:"DengXian","等线","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --mono:ui-monospace,"Cascadia Mono","Consolas",monospace;

  --w:1240px;
  --pad:clamp(20px,4vw,56px);

  /* 叙事 SVG 配色（随主题切换） */
  --sv-bg:#F4F0E7;--sv-grid:#C9C0AD;
  --sv-wall:#E9E2D3;--sv-wall-line:#2B2621;
  --sv-door:#F1EBDD;--sv-door-line:#8A8072;
  --sv-band:#FBF7EE;--sv-panel:#EDE6D7;
  --sv-ink:#191512;--sv-frame:#8A8072;--sv-accent:#C2773E;
  color-scheme:light;
}
/* 夜间模式：暖黑纸感，不用纯黑 */
:root[data-theme="night"]{
  --paper:#17140F;
  --paper-2:#211B14;
  --ink:#F0EADC;
  --ink-2:#CFC6B4;
  --ink-3:#948B79;
  --red:#DE9250;
  --line:rgba(240,234,220,.17);
  --line-soft:rgba(240,234,220,.09);
  --panel:#0E0C09;
  --panel-line:rgba(240,234,220,.15);
  --on-panel:#F4F0E7;

  --sv-bg:#17140F;--sv-grid:#4B4335;
  --sv-wall:#221D15;--sv-wall-line:#6E6455;
  --sv-door:#2A2419;--sv-door-line:#7C7264;
  --sv-band:#2E2820;--sv-panel:#332C21;
  --sv-ink:#F0EADC;--sv-frame:#7C7264;--sv-accent:#DE9250;
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:hidden;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  transition:background-color .45s ease,color .45s ease;
  font-family:var(--sans);
  font-size:17px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
h1,h2,h3{margin:0;font-family:var(--serif);font-weight:400}
p{margin:0}
a{color:inherit;text-decoration:none}
ul,ol,dl{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit}

/* ---------- 页头 ---------- */
.site-head{
  position:fixed;inset:0 0 auto 0;z-index:60;
  display:flex;align-items:center;gap:clamp(20px,4vw,56px);
  padding:18px var(--pad);
  background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-soft);
}
.mark{display:flex;align-items:center;gap:10px;flex-shrink:0}
.mark-logo{width:30px;height:30px;object-fit:contain;flex-shrink:0}
.mark-cn{font-family:var(--serif);font-size:21px;letter-spacing:.06em;line-height:1}
.mark-sub{font-size:10.5px;letter-spacing:.16em;color:var(--ink-3);line-height:1}
.nav{position:relative;display:flex;gap:2px;margin-left:auto}
.nav a{
  position:relative;padding:6px 12px;font-size:14.5px;color:var(--ink-2);
  transition:color .2s ease;
}
.nav a:hover{color:var(--ink)}
.nav a.is-active{color:var(--ink)}
.nav-indicator{
  position:absolute;left:0;bottom:0;height:2px;width:0;
  background:var(--red);
  transition:transform .38s cubic-bezier(.22,1,.36,1),width .38s cubic-bezier(.22,1,.36,1);
  opacity:0;
}
.nav-indicator.on{opacity:1}
.head-meta{
  font-size:13px;color:var(--ink-3);letter-spacing:.06em;flex-shrink:0;
  border-left:1px solid var(--line);padding-left:clamp(14px,2vw,24px);
  transition:color .2s;
}
.head-meta:hover{color:var(--red)}
.theme-toggle{
  flex-shrink:0;
  width:38px;height:38px;
  display:flex;align-items:center;justify-content:center;
  background:transparent;
  border:1px solid var(--line);border-radius:3px;
  color:var(--ink-2);cursor:pointer;
  transition:color .2s ease,border-color .2s ease,background .2s ease;
}
/* 底部导航里的月亮按钮只在手机端出现 */
.nav-theme{display:none}
.theme-toggle:hover{color:var(--red);border-color:var(--red)}
.theme-toggle:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.theme-toggle svg{
  width:17px;height:17px;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
}
.theme-toggle .ic-sun{display:none}
:root[data-theme="night"] .theme-toggle .ic-sun{display:block}
:root[data-theme="night"] .theme-toggle .ic-moon{display:none}

/* ---------- 按钮 ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.5em;
  padding:13px 26px;border-radius:2px;
  font-size:15px;letter-spacing:.04em;
  border:1px solid var(--ink);
  transition:background .22s ease,color .22s ease,transform .12s ease,border-color .22s ease;
  cursor:pointer;
}
.btn-solid{background:var(--ink);color:var(--paper)}
.btn-solid:hover{background:var(--red);border-color:var(--red)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--ink)}
.btn:active{transform:scale(.975)}
.btn:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.on-dark .btn-solid{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.on-dark .btn-solid:hover{background:#FFE9C2;border-color:#FFE9C2}
.on-dark .btn-ghost{color:var(--paper);border-color:var(--panel-line)}
.on-dark .btn-ghost:hover{border-color:var(--paper)}

/* ---------- 首屏 ---------- */
.hero{
  position:relative;
  min-height:100svh;
  padding:clamp(110px,15vh,170px) var(--pad) 0;
  display:flex;flex-direction:column;
  overflow:hidden;
}
.hero-type{position:relative;z-index:2;max-width:var(--w);margin:0 auto;width:100%}
.hero-title{
  font-size:clamp(3.4rem,8.6vw,8rem);
  line-height:1.06;
  letter-spacing:.01em;
}
.hl{display:block;overflow:hidden}
.hl>span{display:block;will-change:transform}
.hl em{
  font-style:normal;color:var(--red);
}
.hero-strip{
  position:absolute;z-index:1;
  right:clamp(78px,6.6vw,104px);top:clamp(96px,13vh,150px);
  width:clamp(210px,23vw,340px);
  margin:0;
  height:clamp(340px,64vh,660px);
  overflow:hidden;
  transform:none;
}
.hero-strip img{width:100%;height:100%;object-fit:cover;object-position:62% 42%;transition:filter .45s ease}
.hero-foot{
  position:relative;z-index:3;
  max-width:var(--w);width:100%;margin:auto auto 0;
  display:flex;flex-wrap:wrap;
  align-items:flex-end;gap:clamp(18px,3vw,44px);
  padding:clamp(28px,5vh,56px) 0 28px;
}
.hero-lead{
  font-size:17px;line-height:1.8;color:var(--ink-2);
  max-width:30ch;
}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.hero-facts{
  display:flex;flex-wrap:wrap;gap:clamp(16px,3vw,48px);
  padding:22px 0 26px;
  border-top:1px solid var(--line);
  max-width:var(--w);width:100%;margin:0 auto;
  font-size:14px;
}
.hero-facts dt{color:var(--ink-3);font-size:12.5px;letter-spacing:.16em;margin-bottom:4px}
.hero-facts dd{margin:0;color:var(--ink-2)}

/* ---------- 通用区块 ---------- */
section{position:relative}
.works,.services,.materials,.process,.about,.showcase,.faq,.scenes{max-width:var(--w);margin:0 auto;padding:clamp(72px,11vh,140px) var(--pad)}
.sec-title{
  font-size:clamp(2rem,3.6vw,3rem);line-height:1.24;letter-spacing:.01em;
  margin-bottom:clamp(32px,5vh,64px);
}
.sec-kicker{
  display:flex;align-items:center;gap:12px;
  font-family:var(--mono);font-size:12px;letter-spacing:.2em;
  color:var(--ink-3);margin:0 0 16px;
}
.sec-kicker::before{content:"";width:24px;height:1px;background:var(--red);flex-shrink:0}

/* ---------- 招牌工程（深底） ---------- */
.works{
  max-width:none;margin:0;
  background:var(--panel);color:var(--on-panel);
  padding-left:0;padding-right:0;
  --ink:#F4F0E7;--ink-2:#D9D2C4;--ink-3:#A79E8E;--line:rgba(244,240,231,.2);--line-soft:rgba(244,240,231,.1);
}
.works>*{max-width:var(--w);margin-left:auto;margin-right:auto;padding-left:var(--pad);padding-right:var(--pad)}
.works-head{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(24px,5vw,80px);align-items:end;margin-bottom:clamp(44px,7vh,88px)}
.works-head h2{
  font-size:clamp(1.85rem,3.2vw,2.9rem);line-height:1.28;
}
.works-head p{color:#C6BCA8;font-size:16.5px;max-width:36ch}
.craft-list{border-top:1px solid var(--line)}
.craft-list li{
  display:grid;grid-template-columns:80px 1fr auto;gap:clamp(12px,3vw,40px);
  align-items:baseline;
  padding:clamp(20px,3vh,30px) 0;
  border-bottom:1px solid var(--line);
  transition:padding-left .3s ease;
}
.craft-list li:hover{padding-left:10px}
.craft-num{font-family:var(--mono);font-size:13px;color:#7C7466;letter-spacing:.1em}
.craft-list h3{font-size:clamp(1.25rem,1.9vw,1.6rem);font-family:var(--serif)}
.craft-list p{color:#C6BCA8;font-size:15.5px;max-width:46ch;margin-top:6px;line-height:1.7}
/* 物料轮播：整幅通栏，左右出血到视口边缘 */
.works > .works-gallery{
  max-width:none;
  width:100vw;
  margin:clamp(40px,6vh,72px) 0 0 50%;
  padding:0;
  transform:translateX(-50%);
}
.carousel{position:relative;overflow:hidden;background:#1B1712}
.car-track{display:flex;transition:transform .72s cubic-bezier(.22,1,.36,1);will-change:transform}
.car-slide{flex:0 0 100%;min-width:0}
.car-slide img{width:100%;height:clamp(240px,43vh,400px);object-fit:cover;object-position:50% 50%;display:block}
.car-btn{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:46px;height:46px;display:flex;align-items:center;justify-content:center;
  background:rgba(20,17,14,.42);border:1px solid rgba(244,240,231,.28);border-radius:50%;
  color:#F4F0E7;cursor:pointer;
  transition:background .22s ease,border-color .22s ease,transform .18s ease;
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
}
.car-btn:hover{background:rgba(194,119,62,.88);border-color:transparent}
.car-btn:active{transform:translateY(-50%) scale(.94)}
.car-btn:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.car-prev{left:16px}
.car-next{right:16px}
.car-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.car-dots{
  position:absolute;left:50%;bottom:16px;transform:translateX(-50%);z-index:2;
  display:flex;gap:9px;padding:8px 13px;border-radius:99px;
  background:rgba(20,17,14,.42);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
}
.car-dot{
  width:8px;height:8px;padding:0;border:0;border-radius:99px;cursor:pointer;
  background:rgba(244,240,231,.45);transition:width .3s ease,background .3s ease;
}
.car-dot:hover{background:rgba(244,240,231,.75)}
.car-dot.on{width:22px;background:var(--red)}

/* ---------- 滚动叙事 ---------- */
.story{
  background:var(--paper);
  border-top:1px solid var(--line-soft);
  min-height:100svh;
  padding:clamp(84px,12vh,110px) 0 clamp(56px,8vh,80px);
}
.story-inner{
  max-width:var(--w);margin:0 auto;padding:0 var(--pad);
  display:grid;grid-template-columns:1.45fr .55fr;
  gap:clamp(28px,5vw,72px);
  align-items:center;
  min-height:calc(100svh - 190px);
}
.story-stage{position:relative;width:100%;max-width:880px}
.story-svg{width:100%;height:auto;display:block}
.story-svg text{font-family:var(--serif);font-weight:400}
.s-wall,.s-band,.s-door rect{fill-opacity:0}
.s-chars text{opacity:0}
.story-steps{
  position:absolute;left:0;bottom:-30px;
  display:flex;gap:clamp(14px,2.4vw,30px);
  font-size:13px;letter-spacing:.08em;color:var(--ink-3);
}
.story-steps li{
  display:flex;align-items:baseline;gap:7px;
  transition:color .3s ease;
}
.story-steps b{font-family:var(--mono);font-weight:400;font-size:11.5px;letter-spacing:.06em;color:#A9A093}
.story-steps li.is-on{color:var(--red)}
.story-steps li.is-on b{color:var(--red)}
.story-copy{max-width:36ch;padding-top:6px}
.story-title{
  font-size:clamp(1.5rem,2.4vw,2.1rem);line-height:1.42;margin-bottom:18px;
  transition:opacity .25s ease;
}
.story-text{
  font-size:16px;line-height:1.85;color:var(--ink-2);max-width:32ch;
  min-height:7.4em;
  transition:opacity .25s ease;
}
/* 叙事 SVG 双主题配色：CSS 变量覆盖表现属性；通电动画由 GSAP 内联样式覆盖 */
.story-svg #s-bg{fill:var(--sv-bg)}
.story-svg #draftGrid circle{fill:var(--sv-grid)}
.story-svg .s-wall{fill:var(--sv-wall);stroke:var(--sv-wall-line)}
.story-svg .s-ground{stroke:var(--sv-wall-line)}
.story-svg .s-door{stroke:var(--sv-door-line)}
.story-svg .s-door rect{fill:var(--sv-door)}
.story-svg .s-band{fill:var(--sv-band);stroke:var(--sv-wall-line)}
.story-svg .s-panel{fill:var(--sv-panel)}
.story-svg .s-chars{fill:var(--sv-ink)}
.story-svg .s-frame{stroke:var(--sv-frame)}
.story-svg .s-mark{stroke:var(--sv-accent)}
.story-svg .s-dim{stroke:var(--sv-accent)}
.story-svg .s-dim-text{fill:var(--sv-accent)}

/* ---------- 服务范围 ---------- */
.services{}
.service-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line);
}
.service-grid li{
  padding:clamp(22px,3.4vh,34px) 28px clamp(26px,3.4vh,38px) 0;
  border-bottom:1px solid var(--line);
  border-right:1px solid var(--line-soft);
}
.service-grid li:nth-child(3n){border-right:0}
.service-grid h3{font-size:1.35rem;margin-bottom:8px}
.service-grid p{font-size:15px;color:var(--ink-3);line-height:1.7;max-width:26ch}

/* ---------- 材料 ---------- */
.materials{}
.materials-head{
  display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(24px,5vw,80px);
  align-items:end;margin-bottom:clamp(32px,5vh,56px);
}
.materials-head h2{font-size:clamp(2rem,3.6vw,3rem);line-height:1.24}
.materials-head p{color:var(--ink-2);font-size:16.5px;max-width:36ch}
.materials-photo{margin:0 0 clamp(32px,5vh,56px)}
.materials-photo img{width:100%;height:clamp(220px,36vh,400px);object-fit:cover;transition:filter .45s ease}
.material-list{
  display:grid;grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line);
}
.material-list li{
  padding:22px 26px 26px 0;
  border-bottom:1px solid var(--line-soft);
  border-right:1px solid var(--line-soft);
}
.material-list li:nth-child(3n){border-right:0}
.material-list h3{font-size:1.1rem;margin-bottom:6px}
.material-list p{font-size:14.5px;color:var(--ink-3);line-height:1.7;max-width:24ch}

/* ---------- 流程 ---------- */
.process{
  background:var(--paper-2);
  max-width:none;margin:0;
  border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
}
.process>*{max-width:var(--w);margin-left:auto;margin-right:auto}
.steps{
  position:relative;
  display:grid;grid-template-columns:repeat(6,1fr);
  gap:clamp(12px,2vw,28px);
  padding-top:26px;
}
.steps::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:var(--red);
  transform:scaleX(0);transform-origin:left center;
  transition:transform .8s cubic-bezier(.22,1,.36,1);
}
.steps.drawn::before{transform:scaleX(1)}
.steps li{position:relative;padding-top:6px}
.steps li::before{
  content:"";position:absolute;top:-4px;left:0;
  width:7px;height:7px;border-radius:50%;background:var(--paper-2);
  border:1px solid var(--ink-3);
}
.steps b{
  display:block;font-family:var(--mono);font-weight:400;font-size:12px;
  color:var(--red);letter-spacing:.1em;margin-bottom:10px;
}
.steps h3{font-size:1.1rem;margin-bottom:6px}
.steps p{font-size:14.5px;color:var(--ink-3);line-height:1.7;max-width:20ch}

/* ---------- 能力展示（图+文） ---------- */
.showcase{}
.show-list{margin-top:clamp(32px,5vh,56px);border-top:1px solid var(--line)}
.show-list li{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,72px);
  align-items:center;padding:clamp(36px,6vh,72px) 0;
  border-bottom:1px solid var(--line-soft);
}
.show-list li:nth-child(even) figure{order:2}
.show-list figure{margin:0;overflow:hidden;border-radius:3px}
.show-list img{width:100%;height:clamp(260px,40vh,440px);object-fit:cover;transition:transform .7s cubic-bezier(.22,1,.36,1),filter .45s ease}
.show-list figure:hover img{transform:scale(1.05)}
.show-list h3{font-size:clamp(1.5rem,2.4vw,2.1rem);line-height:1.36;margin-bottom:16px}
.show-list p{font-size:16px;line-height:1.85;color:var(--ink-2);max-width:38ch}
.show-lede{font-size:16px;color:var(--ink-2);max-width:52ch;margin:-10px 0 clamp(24px,4vh,40px);line-height:1.8}
.show-tag{
  display:inline-block;font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;
  color:var(--red);padding:3px 9px;border-radius:2px;margin-bottom:14px;
  border:1px solid color-mix(in srgb,var(--red) 42%,transparent);
}
.show-meta{margin:18px 0 0;padding-top:14px;border-top:1px solid var(--line-soft);display:grid;gap:7px}
.show-meta>div{display:grid;grid-template-columns:64px 1fr;gap:12px;font-size:14.5px;line-height:1.6}
.show-meta dt{color:var(--ink-3);font-size:12.5px;letter-spacing:.1em;padding-top:2px}
.show-meta dd{margin:0;color:var(--ink-2)}

/* 关于卡：顶部车间照 */
.card-photo{
  margin:calc(-1 * clamp(24px,3vw,34px)) calc(-1 * clamp(24px,3vw,34px)) 22px;
  overflow:hidden;border-radius:3px 3px 0 0;
}
.card-photo img{width:100%;height:clamp(150px,18vh,200px);object-fit:cover}

/* 客户名录 */
.clients{grid-column:1 / -1;margin-top:clamp(30px,5vh,52px);border-top:1px solid var(--line);padding-top:24px}
.clients-label{font-family:var(--mono);font-size:12px;letter-spacing:.2em;color:var(--ink-3);margin:0 0 16px}
.client-list{display:flex;flex-wrap:wrap}
.client-list li{
  font-size:14.5px;color:var(--ink-2);letter-spacing:.02em;line-height:1.6;
  padding:4px 16px;border-left:1px solid var(--line-soft);
}
.client-list li:first-child{border-left:0;padding-left:0}

/* ---------- 业态标签 ---------- */
.works-tags-label{font-size:13px;letter-spacing:.16em;color:var(--ink-3);margin:clamp(28px,4vh,44px) 0 14px}
.trade-tags{display:flex;flex-wrap:wrap;gap:10px}
.trade-tags li{
  font-size:13.5px;color:var(--ink-2);
  padding:6px 14px;border:1px solid var(--line);border-radius:999px;
  letter-spacing:.04em;transition:border-color .2s ease,color .2s ease;
}
.trade-tags li:hover{border-color:var(--red);color:var(--red)}

/* ---------- 问答 ---------- */
.faq{}
.faq-list{margin-top:clamp(28px,4vh,48px);border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line-soft)}
.faq-item summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:clamp(18px,2.4vh,24px) 0;
  font-family:var(--serif);font-size:clamp(1.05rem,1.6vw,1.3rem);
  color:var(--ink);transition:color .2s ease;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{color:var(--red)}
.faq-item summary::after{
  content:"";flex-shrink:0;width:14px;height:14px;
  background:
    linear-gradient(var(--ink-3),var(--ink-3)) center/14px 1.5px no-repeat,
    linear-gradient(var(--ink-3),var(--ink-3)) center/1.5px 14px no-repeat;
  transition:transform .3s ease,background .2s ease;
}
.faq-item[open] summary::after{
  background:linear-gradient(var(--red),var(--red)) center/14px 1.5px no-repeat;
  transform:rotate(45deg);
}
.faq-item p{
  font-size:15.5px;line-height:1.85;color:var(--ink-2);
  max-width:62ch;padding:0 0 clamp(18px,2.4vh,24px);
}
.faq .sec-title{margin-bottom:18px}
.faq-lede{font-size:16px;color:var(--ink-2);max-width:48ch;margin:0 0 clamp(20px,3vh,32px)}

/* ---------- 关于 ---------- */
.about{
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,6vw,90px);
  align-items:start;
}
.about-copy h2{font-size:clamp(2rem,3.4vw,2.9rem);line-height:1.26;margin-bottom:26px}
.about-card{
  background:var(--paper-2);border:1px solid var(--line-soft);border-radius:3px;
  padding:clamp(24px,3vw,34px);
}
.about-card h3{font-family:var(--sans);font-weight:400;font-size:14px;letter-spacing:.12em;color:var(--ink-3);margin:0 0 18px}
.about-card ul{border-top:1px solid var(--line)}
.about-card li{
  display:grid;grid-template-columns:92px 1fr;gap:14px;
  padding:16px 0;border-bottom:1px solid var(--line-soft);
  font-size:15px;line-height:1.7;color:var(--ink-2);
}
.about-card li b{font-family:var(--sans);font-weight:600;color:var(--ink);font-size:14px;letter-spacing:.02em}
.about-copy p{color:var(--ink-2);font-size:16.5px;line-height:1.85;margin-bottom:16px;max-width:40ch}
.mono{font-family:var(--mono);font-size:13.5px;letter-spacing:.02em}

/* ---------- 联系 ---------- */
.contact{
  background:var(--panel);color:var(--on-panel);
  padding:clamp(72px,11vh,130px) var(--pad);
  display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(32px,6vw,90px);
  --ink:#F4F0E7;--ink-3:#A79E8E;--line:rgba(244,240,231,.2);
}
.contact h2{font-size:clamp(2.1rem,4vw,3.4rem);line-height:1.22;margin-bottom:22px}
.contact-lead{color:#C6BCA8;font-size:16.5px;line-height:1.8;max-width:36ch;margin-bottom:34px}
.contact-tel h3{
  font-size:12.5px;letter-spacing:.2em;color:#9A9080;margin:0 0 10px;
  font-family:var(--sans);font-weight:400;
}
.tel{
  display:inline-block;
  font-family:var(--serif);
  font-size:clamp(1.9rem,3.2vw,2.8rem);
  line-height:1.1;letter-spacing:.04em;
  color:#FFE9C2;
  border-bottom:1px solid rgba(255,233,194,.3);
  padding-bottom:6px;
  transition:border-color .22s ease,color .22s ease;
}
.tel:hover{border-color:#FFE9C2}
.tel:focus-visible{outline:2px solid #FFE9C2;outline-offset:4px}
.tel-note{color:#A79E8E;font-size:14.5px;line-height:1.7;margin-top:14px;max-width:32ch}
.tel-line{margin-top:14px;font-size:14.5px;color:#A79E8E;line-height:1.7}
.tel-line span{display:inline-block;min-width:34px;color:#9A9080;letter-spacing:.04em;margin-right:8px}
.tel-line a{color:#D9D2C4;border-bottom:1px solid rgba(217,210,196,.3);transition:border-color .2s ease}
.tel-line a:hover{border-color:#D9D2C4}
.contact-qr{margin:0;display:flex;align-items:center;gap:16px}
.contact-qr img{width:112px;height:112px;background:#fff;padding:6px;flex-shrink:0}
.contact-qr figcaption{font-size:13.5px;color:#A79E8E;line-height:1.6;letter-spacing:.04em}
.btn-copy{align-self:flex-start;font-size:14px;padding:10px 20px}

/* ---------- 页脚 ---------- */
.foot{
  display:flex;flex-wrap:wrap;gap:8px 28px;
  justify-content:space-between;
  padding:26px var(--pad);
  background:var(--panel);color:#958D7F;
  font-size:13px;letter-spacing:.04em;
  border-top:1px solid var(--panel-line);
}

/* ---------- 提示条 ---------- */
.toast{
  position:fixed;left:50%;bottom:28px;z-index:90;
  transform:translate(-50%,14px);
  background:var(--ink);color:var(--paper);
  padding:11px 20px;border-radius:2px;
  font-size:14px;letter-spacing:.02em;
  opacity:0;pointer-events:none;
  transition:opacity .22s ease,transform .26s cubic-bezier(.22,1,.36,1),background-color .45s ease,color .45s ease;
  max-width:min(90vw,520px);
}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- 留资表单（深底） ---------- */
.contact-form{
  align-self:start;
  background:rgba(244,240,231,.04);
  border:1px solid var(--panel-line);
  border-radius:3px;
  padding:clamp(24px,3vw,34px);
}
.contact-form h3{
  font-family:var(--sans);font-weight:400;
  font-size:15px;letter-spacing:.02em;color:#D9D2C4;
  margin:0 0 22px;line-height:1.6;
}
.field{display:block;margin-bottom:18px}
.field>span{
  display:block;font-size:13px;color:#A79E8E;
  letter-spacing:.04em;margin-bottom:7px;
}
.field .req{color:var(--red);font-size:11px;margin-left:8px;letter-spacing:.06em}
.field input,.field textarea{
  width:100%;
  background:rgba(244,240,231,.06);
  border:1px solid rgba(244,240,231,.18);
  border-radius:2px;color:var(--paper);
  font:inherit;font-size:15px;padding:11px 13px;
  transition:border-color .2s ease,background .2s ease;
}
.field input::placeholder,.field textarea::placeholder{color:#6B6255}
.field input:focus,.field textarea:focus{
  outline:none;border-color:var(--red);background:rgba(244,240,231,.09);
}
.field textarea{resize:vertical;min-height:74px;line-height:1.6}
/* 蜜罐字段：真人看不见，脚本会填 —— 填了就直接丢弃 */
.field-honey{
  position:absolute!important;left:-9999px!important;top:auto!important;
  width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none;
}
.contact-form .form-send{
  width:100%;justify-content:center;margin-top:4px;
  background:var(--red);border-color:var(--red);color:#fff;
}
.contact-form .form-send:hover{background:#b06a33;border-color:#b06a33}
.contact-form .form-send:disabled{
  opacity:.62;cursor:progress;transform:none;
}
.form-note{
  font-size:13px;color:#A79E8E;margin-top:12px;
  min-height:1.4em;line-height:1.5;
}
.form-note.err{color:#E0A07A}
.form-note.ok{color:#9FC9A6}

/* ---------- 地址信息条 ---------- */
.contact-info{
  background:var(--paper-2);
  border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
  padding:clamp(34px,5vh,52px) max(calc((100% - var(--w))/2), var(--pad));
  display:grid;
  grid-template-columns:repeat(2,1fr) auto;
  gap:clamp(20px,4vw,56px);
  align-items:center;
}
.info-cell h3{
  font-family:var(--sans);font-weight:400;
  font-size:12.5px;letter-spacing:.18em;color:var(--ink-3);
  margin:0 0 10px;
}
.info-cell p{font-size:15px;line-height:1.75;color:var(--ink-2)}
.contact-info .btn-copy{justify-self:end;font-size:14px;padding:10px 20px}

/* ---------- 悬浮客服栏 ---------- */
.rail{
  position:fixed;
  right:clamp(10px,1.6vw,22px);
  top:50%;transform:translateY(-50%);
  z-index:70;
  display:flex;flex-direction:column;gap:8px;
}
.rail-item{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  width:54px;height:54px;
  background:var(--paper);color:var(--ink-2);
  border:1px solid var(--line);border-radius:3px;
  box-shadow:0 6px 18px rgba(25,21,18,.08);
  font-size:11px;letter-spacing:.04em;cursor:pointer;
  transition:color .2s ease,border-color .2s ease,transform .12s ease,background .45s ease,box-shadow .45s ease;
}
.rail-item svg{
  width:20px;height:20px;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
}
.rail-item:hover{color:var(--red);border-color:var(--red);transform:translateY(-1px)}
.rail-item:active{transform:translateY(0)}
.rail-item:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.rail-wx{position:relative}
/* 过桥：按钮与弹层之间有 12px 空隙，补一段透明区域，鼠标移过去时不会丢悬停 */
.rail-wx::after,.rail-qq::after{
  content:"";position:absolute;right:100%;top:-6px;bottom:-6px;width:20px;z-index:1;
}
.rail-qr{
  position:absolute;right:calc(100% + 12px);top:50%;
  transform:translateY(-50%) scale(.96);
  width:148px;background:var(--paper);
  border:1px solid var(--line);border-radius:4px;
  box-shadow:0 10px 28px rgba(25,21,18,.14);
  padding:12px;display:flex;flex-direction:column;align-items:center;gap:8px;
  opacity:0;visibility:hidden;pointer-events:none;z-index:2;
  transition:opacity .22s ease,transform .22s ease,visibility .22s;
}
.rail-qr img{width:120px;height:120px;background:#fff;padding:6px}
.rail-qr em{font-style:normal;font-size:12.5px;line-height:1.5;color:var(--ink-2);text-align:center;letter-spacing:.02em}
.rail-wx:hover .rail-qr,
.rail-wx:focus .rail-qr,
.rail-wx:focus-within .rail-qr{
  opacity:1;visibility:visible;pointer-events:auto;transform:translateY(-50%) scale(1);
}
.rail-qq{position:relative}
.rail-qq-pop{
  position:absolute;right:calc(100% + 12px);top:50%;
  transform:translateY(-50%) scale(.96);
  width:172px;background:var(--paper);
  border:1px solid var(--line);border-radius:4px;
  box-shadow:0 10px 28px rgba(25,21,18,.14);
  padding:10px;display:flex;flex-direction:column;gap:6px;
  opacity:0;visibility:hidden;pointer-events:none;z-index:2;
  transition:opacity .22s ease,transform .22s ease,visibility .22s;
}
.rail-qq-pop a{
  font-size:13px;color:var(--ink-2);padding:7px 8px;border-radius:2px;
  border:1px solid var(--line-soft);text-align:center;letter-spacing:.02em;
  transition:border-color .2s ease,color .2s ease;
}
.rail-qq-pop a:hover{border-color:var(--red);color:var(--red)}
.qq-tip{font-size:11.5px;color:var(--ink-3);line-height:1.5;margin:0 0 4px;text-align:center;letter-spacing:.02em}
.rail-qq-pop button.qq-copy{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  font:inherit;font-size:13px;color:var(--ink-2);letter-spacing:.02em;
  padding:8px 9px;border:1px solid var(--line-soft);border-radius:2px;background:transparent;
  cursor:pointer;transition:border-color .2s ease,color .2s ease,background-color .2s ease;
}
.rail-qq-pop button.qq-copy:hover{border-color:var(--red);color:var(--red);background:color-mix(in srgb,var(--red) 6%,transparent)}
.rail-qq-pop button.qq-copy:active{transform:scale(.985)}
.rail-qq-pop button.qq-copy em{font-style:normal;font-size:11px;color:var(--ink-3);letter-spacing:.08em;flex-shrink:0}
.rail-qq:hover .rail-qq-pop,
.rail-qq:focus .rail-qq-pop,
.rail-qq:focus-within .rail-qq-pop{
  opacity:1;visibility:visible;pointer-events:auto;transform:translateY(-50%) scale(1);
}

/* ---------- 区块间动效元件 ---------- */
.scroll-progress{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:80;
  background:linear-gradient(90deg,var(--red),#E8A96B);
  transform:scaleX(0);transform-origin:0 50%;pointer-events:none;
}
.divider{
  position:relative;height:1px;
  background:linear-gradient(90deg,transparent,var(--red) 12%,var(--red) 88%,transparent);
  transform:scaleX(0);transform-origin:left center;opacity:.5;
}
.sec-ghost{
  position:absolute;top:clamp(30px,6vh,72px);right:var(--pad);z-index:0;
  max-width:none;margin:0;padding:0;
  font-family:var(--serif);font-size:clamp(5.5rem,13vw,11rem);line-height:1;
  color:transparent;-webkit-text-stroke:1px var(--line);
  pointer-events:none;user-select:none;
}
.has-ghost>*:not(.sec-ghost){position:relative;z-index:1}
.works .sec-ghost{-webkit-text-stroke-color:rgba(244,240,231,.16)}
.scroll-cue{
  margin-left:auto;display:flex;flex-direction:column;align-items:center;gap:10px;
  font-family:var(--mono);font-size:11px;letter-spacing:.24em;color:var(--ink-3);
  padding-bottom:4px;transition:color .2s ease;
}
.scroll-cue:hover{color:var(--red)}
.scroll-cue i{
  display:block;width:1px;height:30px;background:var(--line);
  position:relative;overflow:hidden;
}
.scroll-cue i::after{
  content:"";position:absolute;left:0;top:-100%;width:100%;height:100%;
  background:var(--red);animation:drip 1.9s cubic-bezier(.65,0,.35,1) infinite;
}
@keyframes drip{0%{top:-100%}55%{top:100%}100%{top:100%}}

/* ---------- 日夜切换过渡与夜间增强 ---------- */
.site-head,.nav,.works,.contact,.process,.story,.contact-info,.foot,.about-card,.contact-form{
  transition:background-color .45s ease,border-color .45s ease,color .45s ease;
}
:root[data-theme="night"] .rail-item{box-shadow:0 6px 18px rgba(0,0,0,.42)}
:root[data-theme="night"] .hero-strip img,
:root[data-theme="night"] .show-list img,
:root[data-theme="night"] .car-slide img,
:root[data-theme="night"] .materials-photo img{filter:brightness(.86) saturate(.9)}
::selection{background:var(--red);color:#fff}

/* ---------- 现场实拍 ---------- */
.scene-group{margin-top:clamp(26px,4vh,44px)}
.scene-label{
  display:flex;align-items:baseline;gap:10px;
  font-family:var(--mono);font-size:12.5px;letter-spacing:.2em;color:var(--ink-3);
  margin:0 0 16px;padding-bottom:10px;border-bottom:1px solid var(--line);
}
.scene-label span{color:var(--red);font-size:11px;letter-spacing:.1em}
.scene-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.4vw,18px)}
.scene-grid-2{grid-template-columns:repeat(3,1fr)}
.scene-note{
  height:100%;min-height:clamp(170px,22vh,260px);
  display:flex;align-items:center;
  padding:18px 20px;border:1px solid var(--line-soft);border-radius:3px;
  background:var(--paper-2);
  font-size:14px;line-height:1.85;color:var(--ink-3);
}
.scene-grid figure{margin:0;overflow:hidden;border-radius:3px;background:var(--paper-2)}
.scene-grid img{
  width:100%;height:clamp(170px,22vh,260px);object-fit:cover;display:block;
  transition:transform .7s cubic-bezier(.22,1,.36,1);
}
.scene-grid figure:hover img{transform:scale(1.05)}
.scene-cap{font-size:13px;line-height:1.6;color:var(--ink-3);margin-top:9px;letter-spacing:.02em}

/* ---------- 鼠标交互增强 ---------- */
/* 按钮：悬停轻微上浮 + 暖色投影，按下回落 */
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.98)}
.btn-solid:hover{box-shadow:0 10px 22px rgba(194,119,62,.26)}
.btn-ghost:hover{background:color-mix(in srgb,var(--ink) 5%,transparent)}
.theme-toggle svg{transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
.theme-toggle:hover svg{transform:rotate(-18deg)}

/* 导航：悬停微抬 */
.nav a{transition:color .2s ease,transform .2s ease}
.nav a:hover{transform:translateY(-1px)}

/* 服务 / 材料网格：底色浮现 + 左侧橙色标记 + 标题变色 */
.service-grid li,.material-list li{
  transition:background-color .28s ease,box-shadow .28s ease;
}
.service-grid li:hover,.material-list li:hover{
  background:var(--paper-2);
  box-shadow:inset 2px 0 0 var(--red);
}
.service-grid h3,.material-list h3{transition:color .25s ease}
.service-grid li:hover h3,.material-list li:hover h3{color:var(--red)}

/* 工艺列表（深底）：标题与序号点亮 */
.craft-list h3,.craft-list .craft-num{transition:color .25s ease}
.craft-list li:hover h3{color:#E8A96B}
.craft-list li:hover .craft-num{color:#C2773E}

/* 业态标签：悬停加底色 */
.trade-tags li{transition:border-color .2s ease,color .2s ease,background-color .2s ease}
.trade-tags li:hover{background:rgba(244,240,231,.07)}

/* 问答：悬停时问题文字右侧轻移 */
.faq-item summary{transition:color .2s ease,padding-left .25s ease}
.faq-item summary:hover{padding-left:6px}

/* 关于卡：条目悬停浮起 + 关键词变色 */
.about-card li{transition:background-color .25s ease,transform .25s ease}
.about-card li:hover{background:color-mix(in srgb,var(--ink) 4%,transparent);transform:translateX(3px)}
.about-card li b{transition:color .25s ease}
.about-card li:hover b{color:var(--red)}

/* 图片：悬停放大 + 内框线浮现 */
.show-list figure{position:relative}
.show-list figure::after{
  content:"";position:absolute;inset:10px;pointer-events:none;
  border:1px solid rgba(255,255,255,.42);
  opacity:0;transition:opacity .4s ease;
}
.show-list figure:hover::after{opacity:1}
.show-list figure:hover img{transform:scale(1.06)}
.works-photo img,.materials-photo img{transition:filter .35s ease}
.works-photo img:hover,.materials-photo img:hover{filter:brightness(1.05) saturate(1.04)}
.contact-qr img{transition:transform .3s ease,box-shadow .3s ease}
.contact-qr img:hover{transform:scale(1.04);box-shadow:0 12px 26px rgba(0,0,0,.35)}

/* 表单：聚焦时标签变亮 */
.field>span{transition:color .2s ease}
.field:focus-within>span{color:var(--ink)}
.field input:hover,.field textarea:hover{border-color:rgba(244,240,231,.32)}

/* 悬浮客服栏：图标放大，按下回缩 */
.rail-item svg{transition:transform .25s ease}
.rail-item:hover svg{transform:scale(1.1)}
.rail-item:active{transform:scale(.94)}

/* 地址信息条：标题点亮 */
.info-cell h3{transition:color .25s ease}
.info-cell:hover h3{color:var(--red)}

/* 下滑提示：悬停时指示线变长 */
.scroll-cue i{transition:height .3s ease,background-color .3s ease}
.scroll-cue:hover i{height:40px;background:var(--red)}

/* ---------- 响应式 ---------- */
@media (max-width:1320px){
  .rail{display:none}
}
@media (max-width:1080px){
  .works-head,.materials-head{grid-template-columns:1fr;gap:20px}
  .about,.contact{grid-template-columns:1fr;gap:36px}
  .story{padding:70px 0 50px}
  .story-inner{grid-template-columns:1fr;gap:34px;min-height:0}
  .story-stage{max-width:none}
  .story-steps{position:static;margin-top:34px;flex-wrap:wrap;gap:10px 20px}
  .story-copy{max-width:none;padding-top:0}
  .story-text{min-height:0;max-width:40ch}
  .steps{grid-template-columns:repeat(3,1fr);gap:24px 20px;padding-top:22px}
  .steps::before{display:none}
  .steps li::before{display:none}
  .steps li{border-top:1px solid var(--line);padding-top:16px}
  .hero-strip{width:clamp(140px,20vw,200px);right:var(--pad);top:auto;bottom:34%}
  .contact-info{grid-template-columns:1fr 1fr;gap:24px 32px}
  .contact-info .btn-copy{grid-column:1 / -1;justify-self:start}
  .show-list li{grid-template-columns:1fr;gap:20px}
  .show-list li:nth-child(even) figure{order:0}
}
@media (max-width:820px){
  body{font-size:16px}
  .sec-ghost{display:none}
  .scene-grid{grid-template-columns:repeat(2,1fr)}
  .scene-grid-2{grid-template-columns:repeat(2,1fr)}
  .scene-grid img{height:clamp(130px,17vh,180px)}
  .scene-note{min-height:0;font-size:13px;padding:14px 16px}
  .car-slide img{height:clamp(150px,22vh,200px)}
  .car-btn{width:38px;height:38px}
  .car-prev{left:8px}
  .car-next{right:8px}
  .car-dots{bottom:10px;gap:7px}
  .car-dot{width:7px;height:7px}
  .car-dot.on{width:18px}
  .site-head{gap:12px;padding:14px var(--pad);backdrop-filter:none;background:var(--paper)}
  .mark-sub{display:none}
  .nav{
    position:fixed;left:0;right:0;bottom:0;top:auto;z-index:65;
    justify-content:space-between;
    background:var(--paper);border-top:1px solid var(--line-soft);
    padding:7px 8px calc(7px + env(safe-area-inset-bottom));
  }
  /* 7 个入口 + 主题按钮要塞进 390px：字号和间距都要收一档，保证不换行 */
  .nav a{font-size:12px;padding:6px 3px;white-space:nowrap;flex-shrink:1;min-width:0}
  .nav-indicator{bottom:2px}
  .head-meta{margin-left:auto;border:0;padding:0}
  .hero{padding-top:96px;min-height:auto}
  .hero-title{font-size:clamp(2.6rem,11.5vw,4.4rem);line-height:1.12}
  .hero-strip{
    position:relative;right:auto;top:auto;bottom:auto;
    width:100%;height:clamp(150px,22vh,220px);
    margin-top:26px;transform:none;
  }
  .hero-strip img{object-position:50% 45%}
  .hero-foot{grid-template-columns:1fr;align-items:start;gap:22px;padding-top:28px}
  .hero-actions{justify-content:flex-start}
  .hero-lead{max-width:none}
  .hero-facts{gap:18px 28px;font-size:13.5px}
  .works-photo{grid-template-columns:1fr}
  .works-photo img{height:200px}
  .craft-list li{grid-template-columns:44px 1fr;gap:12px}
  .service-grid,.material-list{grid-template-columns:1fr}
  .service-grid li,.material-list li{border-right:0;padding-right:0}
  .story-steps{position:static;margin-top:18px;flex-wrap:wrap;gap:10px 18px}
  .story-text{min-height:0}
  .about-facts>div{grid-template-columns:1fr;gap:4px}
  .contact-info{grid-template-columns:1fr;gap:18px}
  .foot{padding-bottom:78px;flex-direction:column;gap:4px}
  /* 手机端：底部导航占位，别让最后一块内容被压住 */
  body{padding-bottom:0}
  .foot{padding-bottom:calc(56px + env(safe-area-inset-bottom))}
  /* 手机端：悬浮客服栏回右侧上方纵向排列（贴 header 下方，不挡底部表单） */
  .rail{
    display:flex;
    flex-direction:column;
    right:10px;left:auto;top:auto;
    bottom:auto;
    top:84px;
    transform:none;gap:7px;
    z-index:70;
  }
  .rail-item{
    width:44px;height:44px;font-size:9.5px;gap:2px;
    box-shadow:0 4px 14px rgba(25,21,18,.12);
  }
  .rail-item svg{width:17px;height:17px}
  /* 弹层向左开（右侧悬浮，左边有空间），避免溢出屏幕 */
  .rail-qr,.rail-qq-pop{
    top:50%;bottom:auto;
    right:calc(100% + 12px);
    transform:translateY(-50%) scale(.96);
  }
  .rail-wx:hover .rail-qr,
  .rail-wx:focus .rail-qr,
  .rail-wx:focus-within .rail-qr,
  .rail-qq:hover .rail-qq-pop,
  .rail-qq:focus .rail-qq-pop,
  .rail-qq:focus-within .rail-qq-pop{
    transform:translateY(-50%) scale(1);
  }
  /* 过桥：按钮与弹层之间的 12px 空隙 */
  .rail-wx::after,.rail-qq::after{
    right:100%;left:auto;top:-6px;bottom:-6px;
    width:20px;height:auto;
  }
  .rail-qr{width:128px}
  .rail-qr img{width:100px;height:100px}
  .rail-qq-pop{width:152px}
  /* 主题按钮：桌面在顶部，手机移到底部导航里 */
  .head-theme{display:none}
  .nav-theme{
    display:flex;flex-shrink:0;margin-left:4px;
    width:34px;height:34px;padding:0;
    align-items:center;justify-content:center;
    border:1px solid var(--line);border-radius:3px;
    background:transparent;color:var(--ink-2);cursor:pointer;
  }
  .nav-theme svg{width:17px;height:17px}
  .nav-theme .ic-sun{display:none}
  :root[data-theme="night"] .nav-theme .ic-sun{display:block}
  :root[data-theme="night"] .nav-theme .ic-moon{display:none}
}
@media (max-width:520px){
  .steps{grid-template-columns:1fr}
  .contact-actions .btn{flex:1 1 100%;justify-content:center}
}

/* 减少动态效果 */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
  .hl>span{transform:none !important}
  html{scroll-behavior:auto}
  .divider{transform:scaleX(1);opacity:.35}
  .scroll-progress{display:none}
}