@font-face{font-family:"Barlow Condensed";font-weight:500;font-display:swap;src:url(fonts/barlow-condensed-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-weight:600;font-display:swap;src:url(fonts/barlow-condensed-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-weight:400;font-display:swap;src:url(fonts/barlow-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-weight:600;font-display:swap;src:url(fonts/barlow-latin-600-normal.woff2) format("woff2")}

:root{
  /* 低饱和钢蓝配色 */
  --paper:#EEF2F5;      /* 页面底色：浅灰蓝 */
  --white:#FFFFFF;
  --ink:#1B2A36;        /* 正文 */
  --steel:#566875;      /* 次要文字 */
  --blue:#2D4A5E;       /* 首屏、页头：灰蓝 */
  --blue-deep:#22394A;  /* 联系区、页脚 */
  --on-blue:#C5D3DD;    /* 蓝底上的次要文字 */
  --rule-on-blue:rgba(255,255,255,.22);
  --zinc:#D6E1E9;
  --line:#C6D2DB;
  --red:#C8232A;
  --red-bright:#E2474C;
  --cn:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC","Noto Sans CJK SC",sans-serif;
  --display:"Barlow Condensed",var(--cn);
  --body:"Barlow",var(--cn);
  --wrap:1160px;
  --gutter:24px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.7;-webkit-tap-highlight-color:rgba(45,74,94,.15)}
body:lang(zh),:lang(zh) body{font-size:16px;line-height:1.85}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:2px solid var(--red-bright);outline-offset:3px}
dd{overflow-wrap:anywhere}
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:max(var(--gutter),env(safe-area-inset-left));padding-right:max(var(--gutter),env(safe-area-inset-right))}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:8px;background:var(--white);padding:8px 12px;z-index:10}

/* header */
.top{background:var(--white);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.top .wrap{display:flex;align-items:center;gap:32px;min-height:68px}
.brand{display:flex;align-items:center;text-decoration:none;flex-shrink:0}
.brand img{height:40px;width:auto}
.nav{display:flex;gap:28px;margin-left:auto;align-items:center}
.nav a{text-decoration:none;color:var(--steel);font-size:15px;padding:10px 0;border-bottom:2px solid transparent;white-space:nowrap}
.nav a:hover{color:var(--ink)}
.nav a[aria-current=page]{color:var(--ink);border-bottom-color:var(--red)}
.nav .lang{border:1px solid var(--line);border-radius:3px;padding:5px 12px;color:var(--ink)}
.nav .lang:hover{border-color:var(--ink)}

/* type */
h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.15;margin:0;letter-spacing:.005em}
:lang(zh) h1,:lang(zh) h2,:lang(zh) h3{font-family:var(--cn);font-weight:700;letter-spacing:.02em}
h1{font-size:clamp(32px,5vw,58px)}
h2{font-size:clamp(24px,3.2vw,36px)}
h3{font-size:22px}
:lang(zh) h3{font-size:19px}
p{margin:0 0 1em;max-width:68ch}
.lede{font-size:19px;color:var(--steel);max-width:52ch}
:lang(zh) .lede{font-size:17px;max-width:38em}
.muted{color:var(--steel)}

/* buttons */
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;text-decoration:none;padding:10px 22px;border-radius:3px;font-weight:600;font-size:16px;border:1px solid var(--ink)}
.btn.primary{background:var(--red);border-color:var(--red);color:var(--white)}
.btn.primary:hover{background:#A91C22;border-color:#A91C22}
.btn.plain:hover{background:var(--ink);color:var(--white)}

/* blue surfaces */
.hero,.page-head{background:var(--blue);color:var(--white)}
.hero .lede,.page-head .lede{color:var(--on-blue)}
.hero .btn.plain,.contact-band .btn.plain{border-color:var(--white);color:var(--white)}
.hero .btn.plain:hover,.contact-band .btn.plain:hover{background:var(--white);color:var(--blue)}
.page-head a{color:var(--white)}

/* hero */
.hero{padding:64px 0 0}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}
.hero h1{margin-bottom:20px}
.hero-photo{background-color:var(--zinc);background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:24px 24px;padding:28px;border-radius:2px}
.hero-photo img{margin:0 auto;mix-blend-mode:multiply;width:100%;max-width:420px}

/* dimension band: the signature element */
.dims{display:grid;grid-template-columns:repeat(4,1fr);margin-top:56px;border-top:1px solid rgba(255,255,255,.6)}
.dim{padding:20px 24px 28px 0;min-width:0}
.dim+.dim{padding-left:24px;border-left:1px solid var(--rule-on-blue)}
.dim-label{display:block;font-size:14px;color:var(--on-blue);margin-bottom:10px}
.dim-line{display:flex;align-items:center;gap:10px;font-family:"Barlow Condensed",var(--cn);font-weight:600;font-size:30px;line-height:1;white-space:nowrap}
.dim-line i{flex:1;min-width:24px;height:1px;background:var(--white);position:relative}
.dim-line i::before,.dim-line i::after{content:"";position:absolute;top:-4px;border:4.5px solid transparent}
.dim-line i::before{left:-1px;border-right:9px solid var(--red-bright);border-left:0}
.dim-line i::after{right:-1px;border-left:9px solid var(--red-bright);border-right:0}
.dim-words{font-family:"Barlow Condensed",var(--cn);font-weight:600;font-size:24px;line-height:1.25}
:lang(zh) .dim-words{font-family:var(--cn);font-size:19px;font-weight:600}
.dim-unit{font-size:16px;color:var(--on-blue);font-weight:500}

/* sections */
.section{padding:80px 0}
.section.alt{background:var(--white);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:12px 24px;margin-bottom:36px;flex-wrap:wrap}
.section-head p{margin:0}

/* product rows on home */
.range{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.range li{display:grid;grid-template-columns:180px 1fr auto;gap:32px;align-items:center;padding:22px 0;border-bottom:1px solid var(--line)}
.range img{width:180px;height:120px;object-fit:contain;background:var(--white);border:1px solid var(--line)}
.range h3{margin-bottom:6px}
.range p{margin:0;color:var(--steel)}
.range a.more{text-decoration:none;font-weight:600;border-bottom:1px solid var(--red);white-space:nowrap;padding:6px 0}

/* facts list */
.facts{display:grid;grid-template-columns:repeat(2,1fr);gap:0 56px}
.fact{padding:22px 0;border-top:1px solid var(--line)}
.fact h3{margin-bottom:8px}
.fact p{margin:0;color:var(--steel)}

.tags{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0;margin:0}
.tags li{border:1px solid var(--line);background:var(--white);padding:8px 16px;border-radius:2px}
.section.alt .tags li{background:var(--paper)}

/* galleries */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;list-style:none;padding:0;margin:0}
.gallery figure{margin:0;background:var(--white);border:1px solid var(--line);height:100%}
.gallery img{width:100%;aspect-ratio:4/3;object-fit:contain;padding:8px}
.gallery.photo img{object-fit:cover;padding:0}
.gallery figcaption{font-size:14px;padding:8px 12px;border-top:1px solid var(--line);color:var(--steel)}
.wide-fig{margin:0;background:var(--white);border:1px solid var(--line);padding:16px;overflow-x:auto}
.wide-fig img{margin:0 auto}

/* product detail */
.cat{padding:72px 0;border-top:1px solid var(--line)}
.cat:nth-of-type(even){background:var(--white)}
.cat-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.cat-grid .sample{background:var(--white);border:1px solid var(--line);padding:16px}
.cat-grid .sample img{margin:0 auto}
.cat h2{margin-bottom:16px}
.spec{margin:20px 0 0;border-top:1px solid var(--ink)}
.spec div{display:grid;grid-template-columns:7.5em 1fr;gap:16px;padding:10px 0;border-bottom:1px solid var(--line)}
.spec dt{color:var(--steel)}
.spec dd{margin:0}
.types{columns:3 220px;column-gap:32px;padding:0;margin:20px 0 0;list-style:none}
.types li{padding:7px 0;border-bottom:1px solid var(--line);break-inside:avoid}
.sub-h{margin-top:40px}
.cat .gallery{margin-top:32px}

.subnav{background:var(--white);border-bottom:1px solid var(--line);position:sticky;top:69px;z-index:4}
.subnav .wrap{display:flex;gap:8px 28px;overflow-x:auto;scrollbar-width:none}
.subnav .wrap::-webkit-scrollbar{display:none}
.subnav a{text-decoration:none;color:var(--steel);padding:14px 0;white-space:nowrap}
.subnav a:hover{color:var(--ink)}
.cat{scroll-margin-top:130px}

.page-head{padding:56px 0 52px}
.page-head h1{margin-bottom:14px}

/* contact */
.contact-band{background:var(--blue-deep);color:var(--white);padding:64px 0}
.contact-band .wrap{display:flex;justify-content:space-between;align-items:center;gap:28px;flex-wrap:wrap}
.contact-band p{color:var(--on-blue);margin:10px 0 0}
.contact-band .actions{margin-top:0}
.sr-h{margin-bottom:24px}
.people{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.person{background:var(--white);border:1px solid var(--line);border-top:3px solid var(--blue);padding:24px 28px}
.person h3{font-size:26px}
:lang(zh) .person h3{font-size:22px}
.person .role{color:var(--steel);margin:4px 0 16px}
.person dl{margin:0}
.person dl div{display:grid;grid-template-columns:4.5em 1fr;gap:12px;padding:10px 0;border-top:1px solid var(--line)}
.person dt{color:var(--steel);font-size:15px}
.person dd{margin:0;font-size:18px;font-weight:600}
.person dd a{text-decoration:none;border-bottom:1px solid var(--red)}
.card-list{display:grid;grid-template-columns:1fr;margin:24px 0 0}
.card-list div{padding:16px 0;border-bottom:1px solid var(--line)}
.card-list dt{color:var(--steel);font-size:14px}
.card-list dd{margin:4px 0 0;font-size:19px;font-weight:600}
.checklist{padding-left:1.2em;margin:0}
.checklist li{padding:6px 0}

/* footer */
.foot{padding:32px 0 calc(32px + env(safe-area-inset-bottom));font-size:14px;color:var(--on-blue);background:var(--blue-deep);border-top:1px solid var(--rule-on-blue)}
.foot .wrap{display:flex;justify-content:space-between;gap:8px 24px;flex-wrap:wrap}
.foot a{text-decoration:none;color:var(--white)}
.foot .sep{display:inline-block;width:12px}

/* ---------- 平板横屏 ≤1024 ---------- */
@media (max-width:1024px){
  .hero-grid{gap:40px}
  .range li{grid-template-columns:150px 1fr auto;gap:24px}
  .range img{width:150px;height:104px}
  .facts{gap:0 40px}
  .cat-grid{gap:36px}
}

/* ---------- 平板竖屏 ≤900 ---------- */
@media (max-width:900px){
  .hero{padding-top:44px}
  .hero-grid{grid-template-columns:1fr;gap:32px}
  .hero-photo{max-width:480px;padding:20px}
  .dims{grid-template-columns:1fr 1fr;margin-top:40px}
  .dim:nth-child(3){padding-left:0;border-left:0}
  .dim:nth-child(n+3){border-top:1px solid var(--rule-on-blue)}
  .cat-grid{grid-template-columns:1fr;gap:28px}
  .cat-grid .sample{max-width:560px}
  .cat{padding:56px 0}
  .section{padding:64px 0}
}

/* ---------- 手机 ≤760 ---------- */
@media (max-width:760px){
  :root{--gutter:16px}
  body{font-size:16px}
  .top{position:static}
  .top .wrap{flex-wrap:wrap;gap:0;padding-top:10px;min-height:0}
  .brand img{height:34px}
  .nav{margin-left:0;width:100%;gap:22px;overflow-x:auto;padding:2px 0;scrollbar-width:none}
  .nav::-webkit-scrollbar{display:none}
  .nav .lang{margin-left:auto}
  .subnav{top:0}
  .cat{scroll-margin-top:60px}
  .lede{font-size:17px}
  :lang(zh) .lede{font-size:16px}
  .range li{grid-template-columns:104px 1fr;gap:16px;padding:18px 0}
  .range img{width:104px;height:80px}
  .range a.more{grid-column:2;justify-self:start}
  .facts{grid-template-columns:1fr}
  .people{grid-template-columns:1fr}
  .section{padding:52px 0}
  .section-head{margin-bottom:24px}
  .gallery{grid-template-columns:repeat(2,1fr);gap:10px}
  .gallery figcaption{font-size:13px;padding:6px 8px}
  .contact-band{padding:48px 0}
  .contact-band .actions{width:100%}
}

/* ---------- 小屏手机 ≤480 ---------- */
@media (max-width:480px){
  .actions .btn{flex:1 1 140px}
  .dim{padding:16px 12px 20px 0}
  .dim+.dim{padding-left:12px}
  .dim:nth-child(3){padding-left:0}
  .dim-line{font-size:24px;gap:6px}
  .dim-line i{min-width:16px}
  .dim-words{font-size:20px}
  :lang(zh) .dim-words{font-size:16px}
  .dim-unit{font-size:13px}
  .hero-photo{padding:14px}
  .spec div{grid-template-columns:6em 1fr;gap:12px}
  .person{padding:20px}
  .person dl div{grid-template-columns:3.6em 1fr}
  .foot .wrap{flex-direction:column}
}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ===== v3 布局：双栏、产品图网格，减少空白 ===== */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.block-h{margin-bottom:20px}
.block-h3{margin:32px 0 14px}
.facts.one{grid-template-columns:1fr}
.more-line{margin:14px 0 0}
.more{text-decoration:none;font-weight:600;border-bottom:1px solid var(--red);padding:4px 0}
.narrow{max-width:46ch}
.gallery.two{grid-template-columns:repeat(2,1fr)}
.gallery.four{grid-template-columns:repeat(4,1fr)}
.gallery.fit{grid-template-columns:repeat(var(--n),1fr)}
.gallery.samples{grid-template-columns:repeat(6,1fr);gap:12px}
.gallery.samples img{aspect-ratio:1/1;object-fit:cover;padding:0}
.gallery.samples figcaption{font-size:13px;line-height:1.45}

.sub-head{display:flex;justify-content:space-between;align-items:end;gap:8px 24px;flex-wrap:wrap;margin:48px 0 18px}
.sub-head p{margin:0;font-size:14px}
.type-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;list-style:none;padding:0;margin:0}
.type-grid li{background:var(--white);border:1px solid var(--line);display:flex;flex-direction:column}
.type-grid img{width:100%;height:auto;aspect-ratio:2/1;padding:10px 8px 4px}
.type-grid span{font-size:14px;line-height:1.45;padding:8px 12px 12px;border-top:1px solid var(--line);margin-top:auto}

.mosaic{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mosaic figure{margin:0;background:var(--white);border:1px solid var(--line);display:flex;flex-direction:column}
.mosaic figure:first-child{grid-column:1/-1}
.mosaic img{width:100%;aspect-ratio:16/10;object-fit:contain;padding:10px}
.mosaic figure:first-child img{aspect-ratio:21/10}
.mosaic figcaption{font-size:14px;color:var(--steel);padding:8px 12px;border-top:1px solid var(--line)}

.cat-grid .sample{display:flex;align-items:center;justify-content:center;min-height:100%}
.contact-split{grid-template-columns:1.35fr 1fr}
.contact-split .people{grid-template-columns:1fr 1fr;gap:16px}
.panel{background:var(--white);border:1px solid var(--line);padding:32px}
.panel .actions{margin-top:24px}
.panel .btn.plain:hover{background:var(--ink);color:var(--white)}
.addr dd{font-size:17px}

@media (max-width:1024px){
  .split{gap:40px}
  .type-grid{grid-template-columns:repeat(4,1fr)}
  .gallery.samples{grid-template-columns:repeat(4,1fr)}
  .contact-split{grid-template-columns:1fr}
}
@media (max-width:900px){
  .split{grid-template-columns:1fr;gap:48px}
  .gallery.four{grid-template-columns:repeat(4,1fr)}
  .gallery.fit{grid-template-columns:repeat(min(var(--n),3),1fr)}
  .narrow{max-width:none}
}
@media (max-width:760px){
  .type-grid{grid-template-columns:repeat(3,1fr);gap:8px}
  .type-grid span{font-size:12.5px;padding:6px 8px 8px}
  .gallery.samples{grid-template-columns:repeat(3,1fr);gap:8px}
  .gallery.samples figcaption{font-size:12px}
  .gallery.four,.gallery.fit{grid-template-columns:repeat(2,1fr)}
  .contact-split .people{grid-template-columns:1fr}
  .panel{padding:22px}
  .sub-head{margin-top:36px}
}
@media (max-width:420px){
  .nav{gap:14px}
  .nav a{font-size:14px}
  .nav .lang{padding:4px 9px}
}
@media (max-width:340px){
  .type-grid{grid-template-columns:repeat(2,1fr)}
  .gallery.samples{grid-template-columns:repeat(2,1fr)}
}

.contact-split .person{padding:20px 22px}
.contact-split .person dl div{grid-template-columns:3em 1fr}
.contact-split .person dd{font-size:16px;overflow-wrap:normal;word-break:keep-all}