/* ============================================================
   main.css — ZIGA GLOBAL · "Precision Catalogue"
   ------------------------------------------------------------
   Design intent: a technical catalogue with a dark cover and
   warm figure plates. Deep ink carries the structure; product
   photography sits on small parchment plates (the cut-outs are
   shot on white, so they need a light ground); red appears only
   on the single primary action and the mark, gold only as
   hairline, index numeral and small-caps label.

   Colour is authored in OKLCH so lightness steps are perceptually
   even. Component class names are historical (--blue = the red
   accent) — they are referenced by every generated page, so the
   values are changed, never the names.
   ============================================================ */

:root{
  /* ---- ink: structure, dominant surface (oklch 16.5% 0.013 275) ---- */
  --ink-950:#0D0E14;
  --ink-900:#12131A;
  --ink-850:#171920;
  --ink-800:#1E2028;
  --ink-700:#2B2D37;
  --ink-line:#353740;

  /* ---- paper: figure + data plates (oklch 97% 0.007 85) ---- */
  --paper:#F7F5F0;
  --paper-2:#EFECE6;
  --paper-3:#E5E1D9;
  --plate:#D7D0C6;        /* figure plates: aged-paper tone, one step darker than --paper so
                               white-ground cut-outs sit inside the plate instead of glaring */

  /* ---- text ---- */
  --on-ink:#F0EEEB;      /* 16.6:1 on ink */
  --on-ink-2:#BAB7B2;    /*  9.6:1 */
  --on-ink-3:#8C8983;    /*  5.5:1 */
  --on-paper:#191A21;    /* 15.9:1 on paper */
  --on-paper-2:#56585F;  /*  6.5:1 */
  --on-paper-3:#7E8086;  /*  3.6:1 — labels only */

  /* ---- accents ---- */
  --gold:#D3AA5C;        /*  8.9:1 on ink */
  --gold-bright:#E3BF76;
  --gold-deep:#87611E;   /*  5.1:1 on paper */
  --red:#A71729;         /*  6.9:1 on paper; 2.6:1 on ink — never as text there */
  --red-deep:#84071C;
  --red-soft:#FAE6E5;

  /* legacy aliases — every generated page references these names */
  --blue:var(--red);
  --blue-2:var(--red-deep);
  --blue-soft:var(--red-soft);
  --gold-soft:#F1E8D6;
  --gold-on-dark:var(--gold);
  --ink:var(--on-paper);
  --navy:var(--ink-950);
  --navy-2:var(--ink-900);
  --navy-3:var(--ink-800);
  --navy-line:var(--ink-line);
  --navy-text:var(--on-ink-2);
  --body:var(--on-paper-2);
  --soft:var(--on-paper-3);
  --bg:var(--ink-950);
  --panel:var(--paper-2);
  --line:#DCD7CC;
  --notice:#8A5A00;
  --danger:#9E1B2A;
  --mono:ui-monospace,"SFMono-Regular",Consolas,"Roboto Mono","Courier New",monospace;
  --display:"Playfair Display","Noto Serif SC",Georgia,serif;
  --sans:"DM Sans","Noto Sans SC",system-ui,"Segoe UI",Arial,"Microsoft YaHei",sans-serif;
  --wrap:1240px;
  --radius:2px;
  --ease:cubic-bezier(.22,1,.36,1);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
/* Safety net only — the real fixes are in the layout rules below.
   Prevents any stray 1px overflow from producing a horizontal scroll. */
html,body{max-width:100%;overflow-x:hidden;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg);
  color:var(--body);
  font-family:"DM Sans","Noto Sans SC",system-ui,"Segoe UI",Arial,"Microsoft YaHei",sans-serif;
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
body.has-cookie-bar{padding-bottom:var(--cookiebar-h,72px);}
body.has-inquire-bar{padding-bottom:84px;}
body.has-cookie-bar.has-inquire-bar{padding-bottom:calc(84px + var(--cookiebar-h,72px));}
img{display:block;max-width:100%;height:auto;}
a{color:inherit;text-decoration:none;}
ul{margin:0;}
h1,h2,h3,h4{margin:0;}
/* long, non-breaking tokens (model numbers, ratios) must never force overflow */
.model,.specs .v,.hero-spec .v,.kpi .v,.count,.crumb,.barh a{overflow-wrap:anywhere;}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 40px;}
.mono{font-family:var(--mono);}
.center{text-align:center;}

/* ---------- a11y ---------- */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--blue);color:#fff;padding:12px 18px;border-radius:0 0 var(--radius) 0;
}
.skip-link:focus{left:0;}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid #7FA6E0;outline-offset:2px;border-radius:2px;
}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

/* ---------- top strip ---------- */
.topstrip{height:5px;background:linear-gradient(90deg,var(--blue) 0%,var(--gold) 100%);}

/* ---------- header ---------- */
.topbar{border-bottom:1px solid var(--line);background:#fff;position:relative;z-index:60;}
.topbar .wrap{display:flex;align-items:center;gap:40px;height:80px;}
.brand{display:flex;align-items:center;gap:12px;flex:0 0 auto;}
.brand-name{font-size:19px;font-weight:700;color:var(--ink);letter-spacing:-0.01em;}
.nav{display:flex;gap:30px;margin-left:12px;}
.nav a{font-size:15px;color:var(--body);padding:6px 0;border-bottom:2px solid transparent;}
.nav a:hover{color:var(--blue);}
.nav a[aria-current="page"]{color:var(--blue);border-bottom-color:var(--blue);font-weight:600;}
.actions{margin-left:auto;display:flex;align-items:center;gap:24px;}
.lang{font-size:14px;color:var(--soft);display:flex;align-items:center;gap:8px;}
.lang a:hover{color:var(--blue);}
.lang .active{color:var(--blue);font-weight:700;}
.lang .sep{color:var(--line);}
.nav-toggle{
  display:none;margin-left:auto;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  width:44px;height:44px;align-items:center;justify-content:center;cursor:pointer;color:var(--ink);
}
.nav-toggle svg{width:22px;height:22px;}

/* ---------- buttons ---------- */
.btn{display:inline-block;font-weight:600;border-radius:var(--radius);cursor:pointer;border:1px solid transparent;font-family:inherit;}
.btn-primary{background:var(--blue);color:#fff;border-color:var(--blue);padding:13px 24px;font-size:15px;}
.btn-primary:hover{background:var(--blue-2);border-color:var(--blue-2);}
.btn-ghost{background:#fff;color:var(--blue);border-color:var(--blue);padding:13px 24px;font-size:15px;}
.btn-ghost:hover{background:var(--blue-soft);}
.btn-outline{background:#fff;color:var(--blue);border-color:var(--line);padding:13px 22px;font-size:15px;display:inline-flex;align-items:center;gap:10px;}
.btn-outline:hover{border-color:var(--blue);}
.btn-white{background:#fff;color:var(--blue);border-color:#fff;padding:15px 30px;font-size:16px;font-weight:700;}
.btn-white:hover{background:#EAF0FA;}
.btn-sm{padding:10px 18px;font-size:14px;}
.btn-lg{padding:15px 30px;font-size:16px;}
.btn-block{display:block;width:100%;text-align:center;}

/* ---------- hero (deep navy, as on the corporate site) ---------- */
.hero{background:linear-gradient(135deg,var(--navy) 0%,var(--navy-3) 100%);border-bottom:1px solid var(--navy-3);}
.hero .wrap{display:grid;grid-template-columns:1.05fr 0.95fr;gap:64px;align-items:center;padding-top:80px;padding-bottom:80px;}
.eyebrow{font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--blue-2);margin:0 0 20px;}
h1{font-size:46px;line-height:1.14;letter-spacing:-0.01em;font-weight:700;color:var(--ink);}
.hero h1{max-width:620px;margin-bottom:22px;color:#fff;}
.lede{font-size:17px;line-height:1.65;color:var(--body);margin:0 0 34px;max-width:560px;}
.hero .lede{color:var(--navy-text);}
.cta-row{display:flex;gap:14px;margin-bottom:26px;flex-wrap:wrap;}
.trustline{font-size:14px;color:var(--soft);margin:0;}
.trustline b{color:var(--blue);font-weight:600;}
.hero .trustline{color:rgba(255,255,255,.62);}
.hero .trustline b{color:var(--gold-on-dark);}
/* on navy the outline button needs light text to stay visible */
.hero .btn-outline{color:#fff;border-color:rgba(255,255,255,.45);}
.hero .btn-outline:hover{background:rgba(255,255,255,.1);border-color:#fff;}

/* Product shots are white-background cut-outs from the printed catalogues,
   so they stay on a light card; a gold hairline ties that card into the
   dark hero instead of letting it read as a pasted-on white box. */
.hero-visual{background:#fff;border:1px solid rgba(212,168,83,.55);border-top:3px solid var(--gold);border-radius:var(--radius);overflow:hidden;box-shadow:0 18px 48px rgba(0,0,0,.35);}
.hero-visual .shot{height:286px;display:flex;align-items:center;justify-content:center;padding:20px;border-bottom:1px solid var(--line);background:#fff;}
.hero-visual .shot img{max-height:246px;width:auto;object-fit:contain;mix-blend-mode:multiply;}
.hero-spec{list-style:none;margin:0;padding:16px 22px 6px;}
.hero-spec li{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px solid var(--line);font-size:14px;}
.hero-spec li:last-child{border-bottom:0;}
.hero-spec .k{color:var(--soft);}
.hero-spec .v{font-family:var(--mono);color:var(--ink);font-weight:600;}
.hero-cap{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);background:#F4F5F8;margin:8px 0 0;padding:12px 22px;font-weight:600;border-top:1px solid var(--line);}

/* ---------- sections ---------- */
section{padding:0 0 76px;}
.sec-space{padding-top:70px;}
.barh{background:var(--navy);color:#fff;border-radius:var(--radius);padding:16px 26px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:34px;border-left:3px solid var(--gold);}
.barh h2{font-size:24px;font-weight:600;color:#fff;}
.barh .sub{font-size:14px;color:rgba(255,255,255,.62);margin:6px 0 0;}
.barh a{font-size:14px;font-weight:600;color:#fff;border-bottom:1px solid rgba(255,255,255,.5);padding-bottom:2px;white-space:nowrap;}
.barh a.btn{border-bottom:1px solid var(--ink-line);padding-bottom:10px;}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:30px;}

/* ---------- grids ---------- */
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}

/* ---------- 原图版卡片（2026-10-26）----------
   扩孔器/扶正器/滚刀等蓝色产品与浅蓝底(#B2DEF7)色差极小，
   抠图必然把边缘抠成锯齿。用户明确：清晰度第一。
   所以这些卡片直接用原图版整块呈现：图铺满、不抠图、不做混合模式。 */
/* ⚠️ 必须加 .platefull 限定，否则会污染所有 .grid4 卡片：
   减速器的安装尺寸图是 785x1500 细长条，被 object-fit:cover 一裁
   就只剩中间一块白区，整张卡片看起来是空白。 */
.grid4.platefull .prod .thumb{
  padding:0;background:#B2DEF7;height:200px;overflow:hidden;
}
.grid4.platefull .prod .thumb img{
  width:100%;height:100%;max-width:none;max-height:none;
  object-fit:cover;object-position:center;mix-blend-mode:normal;
}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;}

/* ---------- cards ---------- */
.cat{border:1px solid var(--line);border-radius:var(--radius);background:#fff;overflow:hidden;display:flex;flex-direction:column;}
.cat .thumb{background:var(--panel);border-bottom:1px solid var(--line);height:190px;display:flex;align-items:center;justify-content:center;padding:10px;}
.cat .thumb img{max-height:100%;max-width:100%;width:auto;height:auto;object-fit:contain;mix-blend-mode:multiply;}
.cat .body{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1;}
.cat h3{font-size:17px;font-weight:700;color:var(--ink);margin-bottom:8px;}
.cat p{font-size:14px;color:var(--body);margin:0 0 16px;flex:1;line-height:1.6;}
/* count strip: neutral grey + gold index, mirroring the corporate site's
   "quiet chip on white card" treatment. Red stays reserved for CTAs. */
.count{font-size:13px;color:var(--ink);font-weight:600;background:#F4F5F8;border:1px solid var(--line);border-radius:3px;padding:8px 12px;display:inline-block;}
.count b{font-family:var(--mono);color:var(--gold);}

.prod{background:#fff;border:1px solid var(--line);border-radius:var(--radius);display:flex;flex-direction:column;}
.prod .thumb{height:210px;display:flex;align-items:center;justify-content:center;padding:10px;border-bottom:1px solid var(--line);background:var(--panel);}
.prod .thumb img{max-height:100%;max-width:100%;width:auto;height:auto;object-fit:contain;mix-blend-mode:multiply;}
.prod .body{padding:20px;display:flex;flex-direction:column;flex:1;}
.model{font-family:var(--mono);font-size:13px;font-weight:700;color:var(--blue);margin:0 0 6px;}
.prod h3{font-size:16px;font-weight:700;color:var(--ink);margin-bottom:16px;line-height:1.35;}
.specs{list-style:none;margin:0 0 18px;padding:0;flex:1;}
.specs li{display:flex;justify-content:space-between;gap:12px;font-size:13px;padding:6px 0;border-bottom:1px solid var(--line);}
.specs li:last-child{border-bottom:0;}
.specs .k{color:var(--soft);}
.specs .v{font-family:var(--mono);color:var(--ink);font-weight:600;text-align:right;}
.qlink{font-size:13px;font-weight:700;color:var(--blue);display:inline-flex;align-items:center;gap:7px;}
.qlink:hover{color:var(--blue-2);}
a.thumb{display:flex;}

/* placeholder image block (used when no real image is available) */
.ph-block{
  width:100%;height:100%;min-height:120px;display:flex;align-items:center;justify-content:center;
  background:repeating-linear-gradient(45deg,#F4F6F8,#F4F6F8 8px,#EAEFF5 8px,#EAEFF5 16px);
  color:var(--soft);font-size:12px;letter-spacing:.04em;text-align:center;padding:10px;
}
/* placeholder thumbnail tile in the detail gallery (class .t.ph) */
.t.ph{
  background:repeating-linear-gradient(45deg,#F4F6F8,#F4F6F8 8px,#EAEFF5 8px,#EAEFF5 16px);
  color:var(--soft);font-size:9px;line-height:1.2;letter-spacing:.02em;text-align:center;padding:6px;
}

/* ---------- trust band ---------- */
.trustband{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff;}
.trustband .wrap{display:grid;grid-template-columns:repeat(4,1fr);}
.trust{padding:36px 26px;border-right:1px solid var(--line);}
.trust:first-child{padding-left:0;}
.trust:last-child{border-right:0;padding-right:0;}
.trust .idx{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:var(--blue-soft);color:var(--blue);font-family:var(--mono);font-size:13px;font-weight:700;margin-bottom:14px;}
.trust h4{font-size:15px;font-weight:700;color:var(--ink);margin-bottom:8px;}
.trust p{font-size:13px;color:var(--body);margin:0;line-height:1.6;}

/* ---------- cta band ---------- */
.cta-band{padding:76px 0;}
.cta-band .inner{background:var(--navy);border-radius:6px;padding:54px 52px;display:flex;align-items:center;justify-content:space-between;gap:40px;color:#fff;border-left:3px solid var(--gold);}
.cta-band h2{font-size:30px;margin-bottom:10px;color:#fff;}
.cta-band p{margin:0;color:var(--navy-text);font-size:15px;max-width:640px;}
.cta-band .right{display:flex;flex-direction:column;align-items:flex-end;gap:12px;flex:0 0 auto;}
.cta-band .mail{font-family:var(--mono);font-size:13px;color:rgba(255,255,255,.55);}

/* ---------- page head (interior pages) ---------- */
.pagehead{background:linear-gradient(135deg,var(--navy) 0%,var(--navy-3) 100%);color:#fff;padding:30px 0 40px;border-bottom:3px solid var(--gold);}
.crumb{font-size:13px;color:rgba(255,255,255,.55);margin:0 0 20px;}
.crumb a{color:rgba(255,255,255,.82);}
.crumb a:hover{color:#fff;}
.crumb .sep{margin:0 9px;color:rgba(255,255,255,.32);}
.crumb .cur{color:#fff;font-family:var(--mono);}
.headrow{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;}
.pagehead h1{font-size:36px;line-height:1.1;font-weight:700;color:#fff;margin-bottom:12px;}
.pagehead p{margin:0;color:var(--navy-text);font-size:15px;max-width:660px;}
.headcount{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.32);color:#fff;border-radius:var(--radius);padding:11px 18px;font-family:var(--mono);font-weight:700;font-size:15px;white-space:nowrap;}

/* ---------- filters ---------- */
.results{padding:34px 0 78px;}
.filters{display:flex;align-items:center;gap:18px;padding-bottom:22px;border-bottom:1px solid var(--line);margin-bottom:30px;}
.chips{display:flex;gap:10px;flex-wrap:wrap;}
.chip{font-size:14px;font-weight:600;color:var(--body);background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 18px;white-space:nowrap;cursor:pointer;font-family:inherit;}
.chip:hover{border-color:var(--blue);color:var(--blue);}
.chip.active{background:var(--blue);color:#fff;border-color:var(--blue);}
.search{margin-left:auto;position:relative;flex:0 0 auto;}
.search svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);}
.search input{width:300px;max-width:100%;padding:10px 14px 10px 38px;border:1px solid var(--line);border-radius:var(--radius);font-size:14px;color:var(--ink);background:#fff;font-family:inherit;}
.search input::placeholder{color:var(--soft);}
.result-note{font-size:14px;color:var(--soft);margin:0 0 16px;}

/* ---------- pagination ---------- */
.pagination{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:46px;}
.pagination a,.pagination span{display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:42px;padding:0 14px;border:1px solid var(--line);border-radius:var(--radius);font-size:14px;font-weight:600;color:var(--body);background:#fff;}
.pagination a:hover{border-color:var(--blue);color:var(--blue);}
.pagination .active{background:var(--blue);color:#fff;border-color:var(--blue);}
.pagination .disabled{color:#C2CCD8;pointer-events:none;}

/* ---------- detail ---------- */
.detailgrid{display:grid;grid-template-columns:1fr 1fr;gap:58px;padding:46px 0 10px;}
.gallery .main{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);height:452px;display:flex;align-items:center;justify-content:center;padding:34px;}
.gallery .main img{max-height:384px;width:auto;object-fit:contain;mix-blend-mode:multiply;}
.thumbs{display:flex;gap:12px;margin-top:14px;flex-wrap:wrap;}
.thumbs .t{width:104px;height:104px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);display:flex;align-items:center;justify-content:center;padding:8px;overflow:hidden;}
.thumbs .t img{max-height:84px;width:auto;object-fit:contain;mix-blend-mode:multiply;}
.buybox .model{font-size:15px;letter-spacing:.03em;margin-bottom:10px;}
.buybox h1{font-size:36px;line-height:1.12;margin-bottom:16px;}
.buybox .desc{font-size:16px;color:var(--body);margin:0 0 24px;}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:26px;}
.kpi{border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;}
.kpi .k{font-size:11px;color:var(--soft);text-transform:uppercase;letter-spacing:.06em;font-weight:600;min-height:28px;}
.kpi .v{font-family:var(--mono);font-size:18px;font-weight:700;color:var(--ink);margin-top:7px;}
.buy-actions{display:flex;gap:14px;margin-bottom:22px;flex-wrap:wrap;}
.meta{font-size:13px;color:var(--soft);border-top:1px solid var(--line);padding-top:16px;}
.meta span{color:var(--body);font-family:var(--mono);}

.block{border-top:1px solid var(--line);padding:54px 0;}
.block h2{font-size:23px;font-weight:700;color:var(--ink);margin-bottom:8px;letter-spacing:-0.01em;}
.block .sub{font-size:14px;color:var(--soft);margin:0 0 28px;}
.spec-table{width:100%;border-collapse:collapse;}
.spec-table th,.spec-table td{text-align:left;padding:13px 18px;font-size:14px;border-bottom:1px solid var(--line);vertical-align:top;}
.spec-table tr:first-child th,.spec-table tr:first-child td{border-top:1px solid var(--line);}
.spec-table th{width:34%;color:var(--soft);font-weight:600;background:var(--panel);}
.spec-table td{color:var(--ink);font-family:var(--mono);}
.spec-table td.plain{font-family:inherit;}
.note{font-size:13px;color:var(--soft);margin:18px 0 0;}
.note b{color:var(--body);}
.prose p{font-size:15px;color:var(--body);margin:0 0 14px;max-width:840px;}
.prose ul{margin:0;padding-left:20px;max-width:840px;}
.prose li{font-size:15px;color:var(--body);margin-bottom:8px;}

/* ---------- WhatsApp (restrained: brand green used only as a small accent) ---------- */
.wa{display:inline-flex;align-items:center;gap:8px;}
.wa::before{content:"";width:8px;height:8px;border-radius:50%;background:#25D366;flex:0 0 auto;}
.fcol a.wa::before{width:7px;height:7px;}
.wa-box h3::before{content:"";display:inline-block;width:9px;height:9px;border-radius:50%;background:#25D366;margin-right:8px;vertical-align:middle;}
.btn.btn-outline.wa{border-color:#CDEBD9;color:var(--ink);}
.btn.btn-outline.wa:hover{border-color:#25D366;color:var(--ink);}

/* ---------- forms ---------- */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.field{display:flex;flex-direction:column;gap:6px;}
.field.full{grid-column:1 / -1;}
.field label{font-size:13px;font-weight:600;color:var(--ink);}
.field .req{color:var(--danger);margin-left:4px;}
.field input,.field select,.field textarea{
  font-family:inherit;font-size:15px;color:var(--ink);background:#fff;
  border:1px solid var(--line);border-radius:var(--radius);padding:11px 13px;
}
.field textarea{min-height:130px;resize:vertical;}
.field .err{font-size:12px;color:var(--danger);min-height:16px;}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--body);grid-column:1 / -1;}
.consent input{margin-top:3px;width:16px;height:16px;flex:0 0 auto;}
.form-msg{grid-column:1 / -1;font-size:14px;border-radius:var(--radius);padding:12px 14px;display:none;}
.form-msg.ok{display:block;background:#E9F4EC;color:#1E6B3A;border:1px solid #BFE0CB;}
.form-msg.bad{display:block;background:#FBEDEC;color:#B42318;border:1px solid #F1C7C4;}
.contact-side{display:flex;flex-direction:column;gap:20px;}
.info-box{border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px;background:var(--panel);}
.info-box h3{font-size:16px;font-weight:700;color:var(--ink);margin-bottom:10px;}
.info-box p{margin:0 0 6px;font-size:14px;}
.info-box .v{font-family:var(--mono);color:var(--ink);}

/* ---------- legal pages ---------- */
.legal-body{padding:52px 0 84px;max-width:840px;}
.legal-body h2{font-size:20px;font-weight:700;color:var(--ink);margin:34px 0 10px;}
.legal-body p{font-size:15px;margin:0 0 14px;}
.placeholder-badge{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--notice);background:#FDF3E6;border:1px solid #F3D9B0;border-radius:3px;padding:5px 10px;margin-bottom:18px;}

/* ---------- footer (deep navy, gold column headings) ---------- */
footer{background:var(--navy);border-top:1px solid var(--navy-3);padding:62px 0 0;color:var(--navy-text);}
.fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;padding-bottom:46px;}
.fbrand .brand{margin-bottom:16px;}
.fbrand p{font-size:13px;color:var(--navy-text);margin:0 0 6px;max-width:300px;line-height:1.6;}
.fbrand .static{font-family:var(--mono);font-size:13px;color:rgba(255,255,255,.55);}
.fbrand .branches{color:rgba(255,255,255,.42);}
.fcol h5{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-on-dark);margin:0 0 16px;font-weight:700;}
.fcol ul{list-style:none;padding:0;}
.fcol li{margin-bottom:10px;}
.fcol a{font-size:14px;color:var(--navy-text);}
.fcol a:hover{color:var(--gold-on-dark);}
.fcol .static{font-size:14px;color:var(--navy-text);font-family:var(--mono);}
.legal{border-top:1px solid var(--navy-line);padding:22px 0;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;}
.legal .links{display:flex;gap:22px;font-size:13px;color:var(--navy-text);flex-wrap:wrap;}
.legal .links a:hover{color:var(--gold-on-dark);}
.legal .copy{font-size:13px;color:rgba(255,255,255,.42);}

/* ---------- cookie bar ---------- */
.cookie{position:fixed;left:0;right:0;bottom:0;z-index:90;background:var(--navy);color:#fff;display:none;}
.cookie.show{display:block;}
.cookie .wrap{display:flex;align-items:center;gap:28px;padding-top:18px;padding-bottom:18px;flex-wrap:wrap;}
.cookie p{margin:0;font-size:14px;color:var(--navy-text);flex:1;min-width:260px;}
.cookie p a{color:#fff;border-bottom:1px solid rgba(255,255,255,.6);}
.cookie .cbtn{font-size:14px;font-weight:700;padding:10px 22px;border-radius:var(--radius);cursor:pointer;font-family:inherit;}
.cookie .accept{background:var(--blue);color:#fff;border:1px solid var(--blue);}
.cookie .decline{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.55);}

/* ---------- sticky inquire bar ---------- */
.inquire-bar{position:fixed;left:0;right:0;bottom:0;z-index:80;background:#fff;border-top:1px solid var(--line);box-shadow:0 -6px 18px rgba(11,61,145,.07);}
/* when the consent bar is on screen, ride the inquire bar above it */
body.has-cookie-bar .inquire-bar{bottom:var(--cookiebar-h,72px);}
.inquire-bar .wrap{display:flex;align-items:center;gap:24px;padding-top:16px;padding-bottom:16px;flex-wrap:wrap;}
.inquire-bar .label{font-size:15px;color:var(--body);}
.inquire-bar .label b{font-family:var(--mono);color:var(--ink);}
.inquire-bar .right{margin-left:auto;display:flex;align-items:center;gap:20px;flex-wrap:wrap;}
.inquire-bar .mail{font-family:var(--mono);font-size:13px;color:var(--soft);}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .wrap{padding:0 28px;}
  .grid4{grid-template-columns:repeat(2,1fr);}
  .fgrid{grid-template-columns:1fr 1fr;gap:32px;}
  .hero .wrap{gap:40px;padding-top:56px;padding-bottom:56px;}
  h1{font-size:38px;}
  .hero h1{font-size:38px;}
  .cta-band .inner{padding:40px 34px;}
  .cta-band h2{font-size:26px;}
}
@media (max-width:820px){
  .nav-toggle{display:inline-flex;}
  .topbar .wrap{height:auto;min-height:72px;flex-wrap:wrap;padding-top:12px;padding-bottom:12px;gap:16px;}
  .nav{display:none;order:3;width:100%;flex-direction:column;gap:0;margin:6px 0 0;border-top:1px solid var(--line);}
  .nav.open{display:flex;}
  .nav a{padding:13px 2px;border-bottom:1px solid var(--line);font-size:16px;}
  .nav a[aria-current="page"]{border-bottom-color:var(--blue);}
  .actions{margin-left:auto;gap:14px;}
  .grid3,.grid2{grid-template-columns:1fr 1fr;}
  .hero .wrap{grid-template-columns:1fr;}
  .hero-visual{order:-1;}
  .detailgrid{grid-template-columns:1fr;gap:32px;}
  .gallery .main{height:340px;}
  .gallery .main img{max-height:280px;}
  .kpis{grid-template-columns:1fr 1fr 1fr;}
  .eurows{grid-template-columns:1fr;}
  .filters{flex-direction:column;align-items:stretch;}
  .search{margin-left:0;width:100%;}
  .search input{width:100%;}
  .trustband .wrap{grid-template-columns:1fr 1fr;}
  .trust{border-right:0;border-bottom:1px solid var(--line);padding:26px 0;}
  .trust:last-child{border-bottom:0;}
  .headrow{flex-direction:column;align-items:flex-start;gap:18px;}
  .pagehead h1{font-size:30px;}
  .form-grid{grid-template-columns:1fr;}
}
@media (max-width:560px){
  .grid4,.grid3,.grid2{grid-template-columns:1fr;}
  .kpis{grid-template-columns:1fr;}
  .fgrid{grid-template-columns:1fr;}
  h1{font-size:31px;}
  .hero h1{font-size:31px;}
  .barh{padding:14px 18px;gap:10px;}
  .barh h2{font-size:20px;}
  .barh a{white-space:normal;}
  .cta-band .inner{flex-direction:column;align-items:flex-start;}
  .cta-band .right{align-items:flex-start;}
  .inquire-bar .right{margin-left:0;width:100%;justify-content:space-between;}
  .thumbs .t{width:88px;height:88px;}
  .thumbs .t.ph{font-size:9px;line-height:1.15;padding:4px;}
}


/* ---------- v2: home category blocks ---------- */
.catgrid{display:grid;grid-template-columns:1fr 1fr;gap:26px;}
.catblock{display:flex;gap:22px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;padding:22px;align-items:flex-start;}
.catblock .cb-thumb{flex:0 0 150px;height:150px;border-radius:var(--radius);overflow:hidden;background:var(--panel);display:flex;align-items:center;justify-content:center;}
.catblock .cb-thumb img{width:100%;height:100%;object-fit:contain;}
.catblock .cb-body{flex:1;min-width:0;}
.catblock h3{font-size:21px;font-weight:700;color:var(--ink);margin:0 0 8px;letter-spacing:-0.01em;}
.catblock h3 a{color:inherit;}
.catblock p{font-size:14px;color:var(--body);margin:0 0 14px;}
.gchips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px;}
.gchip{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--body);background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:6px 13px;}
.gchip:hover{border-color:var(--blue);color:var(--blue);}
.gchip .gnum{font-family:var(--mono);font-size:11px;color:var(--soft);}
.gchip.more{color:var(--blue);}
.catblock .qlink{font-size:14px;font-weight:600;color:var(--blue);}
@media (max-width:860px){.catgrid{grid-template-columns:1fr;}}

/* ---------- v2: nav search ---------- */
.nav-search{display:inline-flex;align-items:center;color:var(--soft);}
.nav-search:hover{color:var(--blue);}

/* ---------- v2: gallery grid + lightbox ---------- */
.gallery .block{border-top:0;padding-top:20px;}
.backlink{display:inline-block;font-size:14px;color:var(--blue);margin:26px 0 6px;}
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:14px;margin:8px 0 34px;}
.gitem{margin:0;border:1px solid var(--line);border-radius:var(--radius);background:#fff;overflow:hidden;}
.gitem .gbtn{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;}
.gitem img{max-width:100%;max-height:100%;object-fit:contain;}
.gitem .ph-block{width:100%;height:100%;}
.lb{position:fixed;inset:0;background:rgba(8,20,40,.82);display:none;align-items:center;justify-content:center;z-index:80;padding:40px;}
.lb.show{display:flex;}
.lb figure{margin:0;max-width:92vw;max-height:94vh;text-align:center;overflow:auto;}
.lb img{max-width:92vw;max-height:62vh;background:#fff;border-radius:6px;}
.lb figcaption{color:#fff;font-size:14px;margin-top:12px;}
.lb-close{position:absolute;top:18px;right:24px;font-size:30px;line-height:1;color:#fff;background:none;border:0;cursor:pointer;}

/* ---------- v2: big search box ---------- */
.search.big{max-width:640px;margin-top:8px;}
.search.big input{width:100%;font-size:16px;padding:13px 16px 13px 40px;}
.search.big svg{position:absolute;margin-left:14px;}
.search.big{position:relative;display:flex;align-items:center;}


/* ---------- v2: mobile overflow guards ---------- */
.detailgrid{min-width:0;}
.detailgrid>*{min-width:0;}
.gallery{min-width:0;}
.gallery .main img{max-width:100%;}
.thumbs .t img{max-width:100%;}
@media (max-width:560px){
  .catblock{flex-direction:column;gap:16px;padding:18px;}
  .catblock .cb-thumb{flex:0 0 auto;width:100%;height:190px;}
  .headcount{white-space:normal;}
  .gallery-grid{grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:10px;}
}

.scene-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;margin:8px 0 34px;}
.scene-grid .gitem{aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;cursor:default;}
.scene-grid .gitem img{max-width:100%;max-height:100%;object-fit:contain;}
@media (max-width:560px){.scene-grid{grid-template-columns:1fr 1fr;}}


/* ---------- v2.1: model table (travel drives) ---------- */
.tablewrap{overflow-x:auto;margin:8px 0 30px;border:1px solid var(--line);border-radius:var(--radius);}
.model-table{width:100%;border-collapse:collapse;min-width:720px;}
.model-table th,.model-table td{padding:12px 14px;font-size:14px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top;}
.model-table thead th{background:var(--panel);font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--soft);font-weight:700;white-space:nowrap;}
.model-table tbody tr:last-child th,.model-table tbody tr:last-child td{border-bottom:0;}
.model-table tbody tr:target{background:#FFF8E6;}
.model-table .mname{font-family:var(--mono);font-weight:700;color:var(--ink);white-space:nowrap;}
.model-table .num{font-family:var(--mono);}
.model-table .ratios{min-width:260px;color:var(--body);line-height:1.5;}
.model-table .act{white-space:nowrap;}
.btn-dwg{font-size:13px;font-weight:600;color:var(--blue);background:#EEF4FF;border:1px solid #CFE0FF;border-radius:var(--radius);padding:7px 12px;cursor:pointer;}
.btn-dwg:hover{background:#E2ECFF;}
.model-table .pending{color:var(--soft);}

/* ---------- v2.1: specification schema table ---------- */
.spec-table.schema td.pending{color:var(--soft);}
.spec-table.schema th{font-size:12px;white-space:nowrap;}

/* ---------- v2.1: gallery captions + part-number list ---------- */
.gitem .gbtn{position:relative;flex-direction:column;gap:6px;padding:8px;}
.gitem .gcap{font-size:11px;color:var(--soft);line-height:1.25;text-align:center;padding:0 2px 2px;}
.gitem img{max-height:150px;}
.seccount{font-family:var(--mono);font-size:13px;color:var(--soft);font-weight:600;margin-left:8px;}
.pnlist{margin:6px 0 34px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);padding:12px 16px;}
.pnlist summary{cursor:pointer;font-size:14px;font-weight:600;color:var(--blue);}
.pnnote{font-size:12px;color:var(--soft);margin:10px 0 6px;}
.pns{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:0;}
.pns li{font-family:var(--mono);font-size:12px;background:#fff;border:1px solid var(--line);border-radius:3px;padding:4px 8px;}

/* ---------- v2.1: lightbox specs ---------- */
.lb figure{max-width:min(92vw,1000px);}
.lbspecs{color:#E7EDF5;font-size:13px;margin-top:10px;text-align:left;max-width:820px;margin-left:auto;margin-right:auto;}
.lbspecs .lbrow{padding:3px 0;border-top:1px solid rgba(255,255,255,.14);}
.lb .lbinq{margin-top:14px;}
@media (max-width:560px){
  .model-table{min-width:560px;}
  .gitem img{max-height:110px;}
}

.spec-table.schema{min-width:680px;}
.spec-table.schema th,.spec-table.schema td{white-space:nowrap;}
@media (max-width:820px){.spec-table.schema{min-width:640px;}}

/* ---------- v2.1b: real spec tables (drilling multi-size / hydraulics NG) ---------- */
.spec-table.specgrid{min-width:900px;}
.spec-table.specgrid th{width:auto;white-space:nowrap;}
.spec-table.specgrid tbody th{font-family:var(--mono);color:var(--ink);background:var(--panel);font-size:13px;}
.spec-table.specgrid td{font-size:13px;}
.spec-table.ngt{min-width:900px;}
.spec-table.ngt tbody th{width:220px;white-space:nowrap;background:var(--panel);color:var(--ink);font-weight:600;}
.spec-table.ngt thead th.ng{text-align:center;min-width:62px;}
.spec-table.ngt td{text-align:center;}

/* ---------- v2.1b: part-number pairing on gallery cards ---------- */
.gitem .gcap.haspn{font-family:var(--mono);font-size:11px;color:var(--blue);font-weight:700;}
.gitem .gcap .gsub{display:block;color:var(--soft);font-family:inherit;font-weight:400;font-size:10px;margin-top:2px;}

/* ---------- v5: clickable category cards (products overview) ---------- */
/* Lift/hover is scoped to cards that actually link somewhere, so the
   informational .cat cards on Applications / Quality stay static. */
.cat{transition:transform .16s ease,border-color .16s ease;}
.cat--link{border-color:var(--line);}
.cat--link:hover{border-color:var(--blue);transform:translateY(-3px);}
.cat--link:focus-within{outline:2px solid var(--blue);outline-offset:2px;}
.catlink{display:flex;flex-direction:column;height:100%;color:inherit;text-decoration:none;}
.cat--link .thumb{overflow:hidden;}
.cat--link .thumb img{transition:transform .2s ease;}
.cat--link:hover .thumb img{transform:scale(1.04);}
.cat--link h3{transition:color .16s ease;}
.cat--link:hover h3{color:var(--blue);}
.catbtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;margin-top:14px;padding:12px 20px;
  background:var(--blue);color:#fff;border-radius:var(--radius);font-size:15px;font-weight:600;
  transition:background .16s ease;}
.catbtn .arr{transition:transform .16s ease;}
.cat--link:hover .catbtn{background:var(--blue-2);}
.cat--link:hover .catbtn .arr{transform:translateX(4px);}
.cat--link:focus-within .catbtn{background:var(--blue-2);}
.catbtn.sm{padding:10px 16px;font-size:14px;}

/* ---------- v5: home category blocks become visibly interactive ---------- */
.catblock{transition:transform .16s ease,border-color .16s ease;}
.catblock:hover{border-color:var(--blue);transform:translateY(-3px);}
.catblock:hover h3{color:var(--blue);}
.catblock .cb-thumb{overflow:hidden;}
.catblock .cb-thumb img{transition:transform .2s ease;}
.catblock:hover .cb-thumb img{transform:scale(1.04);}
.catblock .catbtn{margin-top:4px;}

/* the bar heading button must beat the generic ".barh a" text-link rule */
/* header-row action: a hairline that fills with paper on hover.
   (The old rule hard-coded a white plate with a red border, which
   competed with the single primary CTA on the page.) */
.barh .btn-outline{font-size:.8125rem;font-weight:600;letter-spacing:.06em;color:var(--on-ink);
  background:transparent;border:1px solid var(--ink-line);padding:10px 18px;
  border-radius:var(--radius);white-space:nowrap;
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease);}
.barh .btn-outline:hover{background:var(--paper);color:var(--ink-950);border-color:var(--paper);}
.barh .btn-outline .arr{transition:transform .16s ease;}
.barh .btn-outline:hover .arr{transform:translateX(4px);}

/* ---------- v6: whole-card links (category groups, product items, results) ---------- */
/* .prod becomes a link itself, so it needs the anchor reset .catlink has. */
.prod{transition:transform .16s ease,border-color .16s ease;}
a.prod{color:inherit;text-decoration:none;}
.prod--link:hover{border-color:var(--blue);transform:translateY(-3px);}
.prod--link:focus-within{outline:2px solid var(--blue);outline-offset:2px;}
.prod--link h3{transition:color .16s ease;}
.prod--link:hover h3{color:var(--blue);}
.prod .catbtn.sm{margin-top:auto;align-self:flex-start;}

/* ---------- v6: gallery card hover (clickable cards only) ---------- */
/* Scoped to .gallery-grid so the non-clickable .scene-grid figures stay static. */
.gallery-grid .gitem{transition:transform .16s ease,border-color .16s ease;}
.gallery-grid .gitem:hover{border-color:var(--blue);transform:translateY(-3px);}

/* ---------- v6: model-table drawing button + row hover ---------- */
.btn-dwg{font-size:13px;font-weight:600;color:#fff;background:var(--blue);border:1px solid var(--blue);
  border-radius:var(--radius);padding:9px 14px;cursor:pointer;transition:background .16s ease,border-color .16s ease;}
.btn-dwg:hover{background:var(--blue-2);border-color:var(--blue-2);}
.model-table tbody tr{transition:background .16s ease;}
.model-table tbody tr:hover{background:var(--blue-soft);}

/* ---------- v6: back link as a small button ---------- */
.backlink{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border:1px solid var(--line);
  border-radius:var(--radius);color:var(--blue);background:#fff;font-size:14px;font-weight:600;
  margin:26px 0 6px;text-decoration:none;transition:border-color .16s ease;}
.backlink:hover{border-color:var(--blue);}

/* ---------- ZIGA brand layer ---------- */
/* Display type is Playfair Display (as on zigaglobal.com); body stays sans. */
/* Playfair Display carries no CJK glyphs, so Chinese headings fall through to
   Noto Serif SC — the serif counterpart of the body face — and the display
   voice stays consistent in both languages. */
h1,h2,h3,.hero h1,.pagehead h1,.cat h3,.prod h3,.catblock h3,
.block h2,.detailgrid h1,.buybox h1,.fbrand .brand-name,.brand-name{
  font-family:"Playfair Display","Noto Serif SC","Songti SC",Georgia,serif;
  letter-spacing:0;
}
h1,h2,.hero h1,.pagehead h1{font-weight:600;}
/* avoid a single trailing character on the second line of a headline */
.hero h1,.pagehead h1{text-wrap:balance;}
.brand-name{font-weight:700;letter-spacing:.01em;}

/* header logo: the mark is square artwork, so it must never be stretched */
.brand{gap:13px;}
.brand-mark{width:34px;height:34px;object-fit:contain;display:block;flex:0 0 auto;}

/* footer lock-up: full logo (mark + 志稼国际 + ZIGA GLOBAL).
   88px keeps the two wordmark lines legible; at 56px they collapse. */
.fbrand-link{display:inline-block;margin-bottom:18px;}
/* The full artwork keeps its outline Chinese; it is only used where it can
   be shown large enough for those thin strokes to survive. */
.brand-lockup{height:88px;width:auto;max-width:190px;object-fit:contain;display:block;}

/* Footer / compact signature: mark + live text.
   Rendering the name as text keeps it crisp at every size and DPI, which the
   88px artwork lock-up could not do (its outline Chinese collapsed). */
.brand-sig{display:inline-flex;align-items:center;gap:14px;}
.brand-sig .brand-mark{width:40px;height:40px;flex:0 0 auto;}
.brand-sig-text{display:flex;flex-direction:column;gap:3px;line-height:1.1;}
.brand-sig-en{font-family:var(--display);font-size:1.0625rem;font-weight:600;letter-spacing:.16em;color:var(--on-ink);}
.brand-sig-zh{font-family:var(--sans);font-size:.6875rem;font-weight:500;letter-spacing:.34em;color:var(--on-ink-3);}
.fbrand .branches{font-size:12px;color:rgba(255,255,255,.42);margin-top:10px;letter-spacing:.01em;}

/* sparing gold accents: hairline under section headings and footer rule */
.block h2{position:relative;padding-bottom:12px;}
.block h2::after{content:"";position:absolute;left:0;bottom:0;width:46px;height:2px;background:var(--gold);}
footer{border-top:3px solid var(--gold);}
.legal{border-top:1px solid var(--gold-soft);}

/* hero tag: gold serif eyebrow above the headline, on the navy hero.
   Gold-on-navy measures well past AA; #8B6B22 would disappear here. */
.hero-tag{font-family:"Playfair Display","Noto Serif SC",Georgia,serif;font-size:13px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gold-on-dark);font-weight:700;margin:0 0 16px;}
.hero .eyebrow{color:rgba(255,255,255,.78);}

/* ---------- U+25A1 size placeholder in gearbox series names ---------- */
/* Rendered in the sans face: a hollow box in a serif face looks like a
   missing glyph, in DM Sans it reads as the notation it is. */
.sq{font-family:"DM Sans","Noto Sans SC",system-ui,sans-serif;font-weight:600;
  font-size:1em;display:inline-block;line-height:1;letter-spacing:.02em;
  /* the hollow-square glyph is a hairline at body size; a thin stroke keeps it
     legible in headings without turning it into a solid block */
  -webkit-text-stroke:.4px currentColor;}
.sqnote{font-size:12.5px;color:var(--soft);margin:10px 0 0;line-height:1.5;}
.sqnote .sq{color:inherit;}
/* the note also sits inside the red page head, where the muted grey is too
   light — inherit the head's own text colour there for AA contrast */
.pagehead .sqnote{color:rgba(255,255,255,.88);}

/* ============================================================
   PRECISION CATALOGUE — the design layer
   ------------------------------------------------------------
   Replaces the light content area with an ink document. Every
   rule below exists to fix one specific problem measured in the
   previous build:

   1. Red on ink measures 2.6:1 — unreadable. Red is therefore
      restricted to filled buttons (white text, 7.5:1) and to
      marks on paper. It never appears as text on ink.
   2. White catalogue cut-outs on ink read as glowing blocks. The
      photography now sits on small warm paper plates, which also
      lets `mix-blend-mode:multiply` dissolve the white background
      into the plate.
   3. Filled colour bars (.barh) and card-in-card stacking added
      noise. Bars become hairline rows; cards become ink surfaces
      with a single paper figure.
   ============================================================ */

/* ---------- 1 · canvas ---------- */
body{
  background:var(--ink-950);
  color:var(--on-ink-2);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.68;
  letter-spacing:.002em;
}
::selection{background:var(--gold);color:var(--ink-950);}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--gold);outline-offset:3px;border-radius:1px;
}

/* ---------- 2 · type scale ---------- */
h1,h2,h3,h4{font-family:var(--display);font-weight:600;letter-spacing:-.012em;color:var(--on-ink);}
h1{font-size:clamp(2.15rem,4.4vw,3.6rem);line-height:1.08;}
h2{font-size:clamp(1.5rem,2.3vw,2rem);line-height:1.16;}
h3{font-size:1.16rem;line-height:1.28;}
.hero h1{font-size:clamp(2.5rem,5.1vw,4.35rem);line-height:1.04;letter-spacing:-.022em;color:var(--on-ink);max-width:15ch;}
.lede{color:var(--on-ink-2);font-size:clamp(1rem,1.15vw,1.075rem);line-height:1.7;max-width:52ch;}
.sub,.note,.pnnote{color:var(--on-ink-3);}
/* small-caps label, the workhorse of the catalogue look */
.eyebrow,.hero-tag,.fcol h5,.count,.model,.headcount{
  font-family:var(--sans);
  font-size:.688rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
}
/* The small-caps eyebrow uses gold, but CJK glyphs render thinner than
   Latin at 11px — bump weight and use the brighter gold so the line
   holds up at both scripts. */
.eyebrow{color:var(--gold-bright);margin:0 0 22px;font-weight:700;}
.hero-tag{font-family:var(--display);font-size:.75rem;font-weight:600;letter-spacing:.22em;color:var(--gold-bright);margin:0 0 10px;}

/* ---------- 3 · header ---------- */
.topstrip{height:2px;background:linear-gradient(90deg,var(--red) 0%,var(--gold) 46%,var(--gold) 100%);}
.topbar{background:var(--ink-950);border-bottom:1px solid var(--ink-line);}
.topbar .wrap{height:74px;gap:44px;}
.brand-name{font-family:var(--display);font-size:1.125rem;font-weight:600;letter-spacing:.1em;color:var(--on-ink);}
.brand-mark{filter:none;}
.nav{gap:34px;}
.nav a{font-size:.875rem;letter-spacing:.01em;color:var(--on-ink-2);border-bottom:1px solid transparent;padding:5px 0;transition:color .2s var(--ease),border-color .2s var(--ease);}
.nav a:hover{color:var(--on-ink);border-bottom-color:var(--gold);}
.nav a[aria-current="page"]{color:var(--on-ink);border-bottom-color:var(--gold);font-weight:500;}
.lang{color:var(--on-ink-3);font-size:.8125rem;}
.lang a:hover{color:var(--on-ink);}
.lang .active{color:var(--gold);font-weight:600;}
.lang .sep{color:var(--ink-line);}
.nav-toggle{background:transparent;border:1px solid var(--ink-line);color:var(--on-ink);}
.nav-toggle:hover{border-color:var(--gold);}

/* ---------- 4 · buttons ----------
   Two levels only. Primary is the single filled action per view;
   everything else is a hairline link that fills on hover. */
.btn{font-family:var(--sans);font-size:.875rem;font-weight:600;letter-spacing:.04em;border-radius:var(--radius);transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease);}
.btn-primary{background:var(--red);color:#fff;border-color:var(--red);padding:14px 26px;}
.btn-primary:hover{background:var(--red-deep);border-color:var(--red-deep);}
.btn-ghost,.btn-outline{background:transparent;color:var(--on-ink);border:1px solid var(--ink-line);padding:14px 24px;}
.btn-ghost:hover,.btn-outline:hover{border-color:var(--gold);color:var(--gold);background:transparent;}
.btn-white{background:var(--paper);color:var(--ink-950);border-color:var(--paper);}
.btn-white:hover{background:var(--gold-bright);border-color:var(--gold-bright);}
.btn-sm{padding:10px 18px;font-size:.8125rem;}
.hero .btn-outline{color:var(--on-ink);border-color:var(--ink-line);}
.hero .btn-outline:hover{border-color:var(--gold);color:var(--gold);background:transparent;}

/* ---------- 5 · hero ---------- */
.hero{background:var(--ink-950);border-bottom:1px solid var(--ink-line);position:relative;overflow:hidden;}
/* a single soft gold wash, anchored right — depth without glow */
.hero::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(58% 82% at 82% 34%,rgba(211,170,92,.10) 0%,rgba(211,170,92,0) 68%);
  pointer-events:none;
}
.hero .wrap{position:relative;z-index:1;grid-template-columns:1.06fr .94fr;gap:clamp(40px,5vw,84px);padding-top:clamp(64px,7vw,104px);padding-bottom:clamp(64px,7vw,104px);}
.hero h1{margin-bottom:24px;}
.hero .lede{margin-bottom:36px;}
.cta-row{gap:12px;margin-bottom:30px;}
.hero .trustline{color:var(--on-ink-3);font-size:.8125rem;letter-spacing:.06em;}
.hero .trustline b{color:var(--gold);font-weight:600;}

/* figure plate: the product shot sits on warm paper, framed by a hairline */
.hero-visual{
  background:var(--plate);
  border:1px solid var(--ink-700);
  border-top:2px solid var(--gold);
  border-radius:0;
  overflow:hidden;
  box-shadow:0 32px 70px -28px rgba(0,0,0,.9);
}
.hero-visual .shot{height:clamp(240px,26vw,320px);background:var(--plate);border-bottom:1px solid var(--line);padding:26px;}
.hero-visual .shot img{mix-blend-mode:multiply;max-height:100%;}
.hero-cap{background:var(--plate);color:var(--on-paper-3);border-top:0;margin:0;padding:14px 26px;font-size:.6875rem;letter-spacing:.14em;}
.hero-spec{padding:0 26px 8px;background:var(--plate);}
.hero-spec li{border-bottom:1px solid var(--line);font-size:.8125rem;padding:10px 0;}
.hero-spec .k{color:var(--on-paper-3);}
.hero-spec .v{color:var(--on-paper);}

/* ---------- 6 · page head ---------- */
.pagehead{
  background:var(--ink-950);
  border-bottom:1px solid var(--ink-line);
  padding:clamp(34px,4vw,52px) 0 clamp(30px,3.6vw,46px);
  position:relative;
}
.pagehead::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,var(--gold) 0%,var(--ink-line) 38%,var(--ink-line) 100%);}
.pagehead h1{font-size:clamp(1.9rem,3.5vw,2.9rem);line-height:1.06;color:var(--on-ink);margin-bottom:14px;}
.pagehead p{color:var(--on-ink-2);font-size:.9375rem;max-width:62ch;}
.crumb{font-size:.75rem;letter-spacing:.09em;color:var(--on-ink-3);margin-bottom:22px;text-transform:uppercase;}
.crumb a{color:var(--on-ink-3);}
.crumb a:hover{color:var(--gold);}
.crumb .sep{color:var(--ink-line);margin:0 10px;}
.crumb .cur{color:var(--gold);font-family:var(--sans);}
.headcount{
  background:transparent;border:1px solid var(--ink-line);color:var(--on-ink-2);
  border-radius:var(--radius);padding:11px 18px;font-family:var(--mono);
  font-size:.75rem;letter-spacing:.04em;text-transform:none;white-space:nowrap;
}
.headcount b{color:var(--gold);}

/* ---------- 7 · section rhythm ---------- */
section{padding:0;}
.sec-space{padding-top:clamp(56px,6vw,88px);
  /* 原先只有 padding-top：同页连续两个 sec-space 区块时，
     前一块的最后一行卡片与后一块的标题之间是 0px（首页实测）。
     补成上下对称，块与块之间才有呼吸。 */
  padding-bottom:clamp(56px,6vw,88px);}
.results{padding:clamp(36px,4.5vw,60px) 0 clamp(64px,7vw,104px);counter-reset:sec;}
/* the filled colour bar becomes a hairline header row */
.barh{
  background:transparent;color:var(--on-ink);
  border:0;border-top:1px solid var(--ink-line);border-bottom:1px solid var(--ink-line);
  border-radius:0;padding:22px 0;margin-bottom:clamp(28px,3.2vw,42px);
  align-items:baseline;
}
.barh h2{font-size:clamp(1.45rem,2.4vw,2rem);color:var(--on-ink);}
.barh .sub{color:var(--on-ink-3);font-size:.8125rem;margin:8px 0 0;letter-spacing:.02em;}
.barh a{color:var(--gold);border-bottom:1px solid rgba(211,170,92,.35);font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase;font-weight:600;}
.barh a:hover{color:var(--gold-bright);border-bottom-color:var(--gold-bright);}

/* editorial section index — a catalogue chapter number */
.block{border-top:1px solid var(--ink-line);padding:clamp(40px,4.6vw,64px) 0;counter-increment:sec;}
.block h2{color:var(--on-ink);padding-bottom:0;font-size:clamp(1.4rem,2.1vw,1.85rem);}
.block h2::after{display:none;}
.block h2::before{
  content:counter(sec,decimal-leading-zero);
  display:block;font-family:var(--mono);font-size:.6875rem;font-weight:500;
  letter-spacing:.2em;color:var(--gold);margin-bottom:12px;
}
.block .sub{color:var(--on-ink-3);font-size:.875rem;max-width:70ch;}
.block > p,.block .note,.block .pnnote{color:var(--on-ink-2);}
.section-head h2{color:var(--on-ink);}

/* ---------- 8 · figure plates (the load-bearing idea) ----------
   The catalogue cut-outs are photographed on white. On ink they
   glare; on warm paper they read as printed figures, and the
   multiply blend dissolves their white ground into the plate. */
.cat .thumb,.prod .thumb,.catblock .cb-thumb,.detailgrid .gallery .main{
  background:var(--plate);
  border-bottom:1px solid var(--ink-line);
}
.cat .thumb img,.prod .thumb img,.catblock .cb-thumb img,.detailgrid .gallery .main img{
  mix-blend-mode:multiply;
}

/* ---------- 9 · catalogue cards ---------- */
.cat,.prod,.catblock{
  background:var(--ink-900);
  border:1px solid var(--ink-line);
  border-radius:var(--radius);
  transition:border-color .22s var(--ease),transform .22s var(--ease),background .22s var(--ease);
}
.cat:hover,.prod--link:hover,.catblock:hover{border-color:var(--gold);background:var(--ink-850);}
.cat--link:focus-within,.prod--link:focus-within{outline:2px solid var(--gold);outline-offset:2px;}
.cat h3,.prod h3,.catblock h3{color:var(--on-ink);}
.cat p,.prod .note,.catblock p{color:var(--on-ink-2);}
.cat .body{padding:22px 24px 24px;}
.prod .body{padding:20px 22px 24px;}
.prod .model{color:var(--gold);font-size:.6875rem;letter-spacing:.14em;margin-bottom:10px;}
/* card action: a hairline that fills, not a second large button */
.catbtn{
  background:transparent;color:var(--on-ink);
  border:1px solid var(--ink-line);border-radius:var(--radius);
  padding:11px 18px;font-size:.8125rem;font-weight:600;letter-spacing:.06em;
  transition:background .22s var(--ease),color .22s var(--ease),border-color .22s var(--ease);
}
.cat:hover .catbtn,.prod--link:hover .catbtn,.catblock:hover .catbtn{background:var(--paper);color:var(--ink-950);border-color:var(--paper);}
.catbtn .arr{transition:transform .22s var(--ease);}
.cat:hover .catbtn .arr,.prod--link:hover .catbtn .arr{transform:translateX(4px);}
.catbtn.sm{padding:10px 16px;font-size:.75rem;}
/* neutral chip for the count line, no red wash */
.count{background:transparent;border:1px solid var(--ink-line);color:var(--on-ink-3);border-radius:var(--radius);padding:7px 11px;font-family:var(--mono);font-size:.6875rem;letter-spacing:.06em;text-transform:none;}
.count b{color:var(--gold);}

/* home category block: figure left, copy right */
.catblock{border-left:2px solid transparent;}
.catblock:hover{border-left-color:var(--gold);}
.catblock .cb-thumb{flex:0 0 132px;height:132px;border:1px solid var(--line);border-radius:1px;}

/* chips: text + count, hairline only */
.gchip{background:transparent;border:1px solid var(--ink-line);color:var(--on-ink-2);border-radius:var(--radius);padding:5px 11px;font-size:.75rem;transition:border-color .2s var(--ease),color .2s var(--ease);}
.gchip:hover{border-color:var(--gold);color:var(--gold);}
.gchip .gnum{color:var(--on-ink-3);font-size:.6875rem;}
.gchip.more{color:var(--gold);border-color:rgba(211,170,92,.35);}

/* ---------- 10 · gallery cards ---------- */
.gitem{background:var(--plate);border:1px solid var(--line);border-radius:1px;}
.gallery-grid .gitem{transition:border-color .2s var(--ease),transform .2s var(--ease);}
.gallery-grid .gitem:hover{border-color:var(--gold-deep);transform:translateY(-2px);}
.gitem .gbtn{padding:10px;}
.gcap{color:var(--on-paper-2);}
.gitem .gcap.haspn{color:var(--gold-deep);}
.gitem .gcap .gsub{color:var(--on-paper-3);}
.scene-grid .gitem{background:var(--ink-900);border-color:var(--ink-line);}
.pnlist{background:var(--ink-900);border:1px solid var(--ink-line);color:var(--on-ink-2);}
.pnlist summary{color:var(--on-ink);}
.pns li{color:var(--on-ink-2);font-family:var(--mono);font-size:.8125rem;}

/* ---------- 11 · data plates ---------- */
.tablewrap{background:var(--paper);border:1px solid var(--ink-700);border-radius:1px;color:var(--on-paper);}
.model-table th,.model-table td{border-bottom:1px solid var(--line);color:var(--on-paper);}
.model-table thead th{background:var(--paper-2);color:var(--on-paper-3);font-size:.6875rem;letter-spacing:.1em;}
.model-table .mname{color:var(--on-paper);}
.model-table .ratios{color:var(--on-paper-2);}
.model-table .pending{color:var(--on-paper-3);}
.model-table tbody tr{transition:background .16s var(--ease);}
.model-table tbody tr:hover{background:var(--paper-2);}
.model-table tbody tr:target{background:var(--gold-soft);}
.spec-table th{background:var(--paper-2);color:var(--on-paper-3);}
.spec-table th,.spec-table td{border-bottom:1px solid var(--line);color:var(--on-paper);}
.spec-table td{font-family:var(--mono);color:var(--on-paper);}
.spec-table td.plain{font-family:var(--sans);color:var(--on-paper-2);}
.spec-table td.pending{color:var(--on-paper-3);}
/* drawing trigger: gold hairline on paper */
.btn-dwg{background:transparent;color:var(--gold-deep);border:1px solid rgba(135,97,30,.45);border-radius:1px;padding:8px 13px;font-size:.75rem;letter-spacing:.04em;transition:background .2s var(--ease),color .2s var(--ease);}
.btn-dwg:hover{background:var(--gold-deep);color:var(--paper);border-color:var(--gold-deep);}

/* ---------- 12 · detail page ---------- */
.detailgrid{padding:clamp(36px,4vw,56px) 0 10px;gap:clamp(36px,4.4vw,72px);}
.detailgrid .gallery .main{background:var(--plate);border:1px solid var(--ink-700);padding:24px;}
.detailgrid .gallery .thumbs .t{background:var(--plate);border:1px solid var(--line);}
.buybox h1{color:var(--on-ink);}
.buybox .model{color:var(--gold);}
.buybox .desc{color:var(--on-ink-2);}
.buybox .meta{color:var(--on-ink-3);border-top:1px solid var(--ink-line);}
.buybox .meta span{color:var(--on-ink);}
.kpi{background:transparent;border:1px solid var(--ink-line);border-radius:1px;}
.kpi .k{color:var(--on-ink-3);}
.kpi .v{color:var(--on-ink);}
.backlink{display:inline-flex;align-items:center;gap:7px;background:transparent;border:1px solid var(--ink-line);border-radius:1px;padding:8px 14px;color:var(--on-ink-2);font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;transition:border-color .2s var(--ease),color .2s var(--ease);}
.backlink:hover{border-color:var(--gold);color:var(--gold);}
.inquire-bar{background:var(--ink-900);border-top:1px solid var(--ink-line);box-shadow:0 -18px 40px -30px rgba(0,0,0,.9);}
.inquire-bar .label{color:var(--on-ink-2);}
.inquire-bar .label b{color:var(--on-ink);}
.inquire-bar .mail{color:var(--on-ink-3);font-size:.8125rem;}

/* ---------- 13 · trust strip / quiet blocks ---------- */
.trustband{background:var(--ink-900);border-top:1px solid var(--ink-line);border-bottom:1px solid var(--ink-line);}
.trust{border-right:1px solid var(--ink-line);padding:34px 26px;}
.trust:first-child{padding-left:0;}
.trust h4{font-family:var(--display);color:var(--on-ink);font-size:1rem;}
.trust p{color:var(--on-ink-3);font-size:.8125rem;}
.trust .idx{background:transparent;border:1px solid rgba(211,170,92,.4);color:var(--gold);width:32px;height:32px;font-size:.6875rem;}
.cta-band .inner{background:var(--ink-900);border:1px solid var(--ink-line);border-left:2px solid var(--gold);border-radius:1px;padding:clamp(34px,4vw,56px);}
/* CTA 主行动按钮改用红色实心（设计规范：红只用于按钮）。
   原来是 .btn-white → 深底上一块纯白，比标题还亮，把视线从文案上拽走；
   而且白块与整站"深墨+金"的调性冲突。 */
.cta-band .btn-primary{background:var(--red);color:#fff;border-color:var(--red);
  padding:16px 34px;font-size:1rem;font-weight:600;letter-spacing:.01em;}
.cta-band .btn-primary:hover{background:var(--red-deep);border-color:var(--red-deep);
  box-shadow:0 12px 30px -8px rgba(167,23,41,.55);}
.cta-band h2{color:var(--on-ink);}
.cta-band p{color:var(--on-ink-3);}
.cta-band .mail{color:var(--on-ink-3);}
.info-box{background:var(--ink-900);border:1px solid var(--ink-line);border-radius:1px;color:var(--on-ink-2);}
.info-box h4,.info-box .v{color:var(--on-ink);}
.legal-body h2{color:var(--on-ink);}
.legal-body p{color:var(--on-ink-2);}
.placeholder-badge{background:rgba(211,170,92,.1);border:1px solid rgba(211,170,92,.4);color:var(--gold);}

/* ---------- 14 · forms ---------- */
.field label{color:var(--on-ink);font-size:.8125rem;letter-spacing:.02em;}
.field label .req{color:var(--gold);}
.field input,.field select,.field textarea{background:var(--plate);border:1px solid var(--ink-line);color:var(--on-paper);border-radius:1px;
  padding:12px 14px;font-size:.9375rem;transition:border-color .2s var(--ease);}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--on-paper-3);}
.field input::placeholder,.field textarea::placeholder{color:var(--on-paper-3);}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--gold-deep);}
.field .err{color:var(--gold-bright);font-size:.75rem;}
.consent,.consent label{color:var(--on-ink-3);}
.form-msg{color:var(--gold);}
.search input{background:var(--plate);border:1px solid var(--ink-line);color:var(--on-paper);}
.search input::placeholder{color:var(--on-paper-3);}
.result-note{color:var(--on-ink-3);}
.chip{background:transparent;border:1px solid var(--ink-line);color:var(--on-ink-2);}
.chip:hover{border-color:var(--gold);color:var(--gold);}
.chip.active{background:var(--paper);color:var(--ink-950);border-color:var(--paper);}
.pagination .active{background:var(--paper);color:var(--ink-950);border-color:var(--paper);}

/* ---------- 15 · footer ---------- */
footer{background:var(--ink-950);border-top:1px solid var(--ink-line);color:var(--on-ink-3);padding:clamp(52px,5.5vw,76px) 0 0;}
.fbrand p{color:var(--on-ink-3);font-size:.8125rem;max-width:34ch;}
.fbrand .static{color:var(--on-ink-2);}
.fbrand .branches{color:var(--on-ink-3);letter-spacing:.06em;}
.fcol h5{color:var(--gold);font-size:.6875rem;}
.fcol a{color:var(--on-ink-2);font-size:.8125rem;transition:color .2s var(--ease);}
.fcol a:hover{color:var(--gold);}
.fcol .static{color:var(--on-ink-2);font-size:.8125rem;}
.legal{border-top:1px solid var(--ink-line);}
.legal .links{color:var(--on-ink-3);}
.legal .links a:hover{color:var(--gold);}
.legal .copy{color:var(--on-ink-3);font-size:.75rem;}

/* ---------- 16 · consent bar ---------- */
.cookie{background:var(--ink-900);border-top:1px solid var(--ink-line);color:var(--on-ink-2);}
.cookie p{color:var(--on-ink-2);font-size:.8125rem;}
.cookie p a{color:var(--gold);border-bottom:1px solid rgba(211,170,92,.4);}
.cookie .accept{background:var(--paper);color:var(--ink-950);border:1px solid var(--paper);}
.cookie .decline{background:transparent;color:var(--on-ink-2);border:1px solid var(--ink-line);}

/* ---------- 17 · motion ---------- */
@media (prefers-reduced-motion:no-preference){
  .cat,.prod,.catblock,.gitem,.catbtn,.btn{will-change:auto;}
}

/* ---------- 18 · responsive tuning ---------- */
@media (max-width:1024px){
  .hero .wrap{grid-template-columns:1fr;gap:44px;}
  .hero h1{max-width:none;}
  .hero-visual{order:-1;}
  .fcol h5{margin-top:8px;}
}
@media (max-width:768px){
  .wrap{padding:0 22px;}
  /* the header wraps to two rows on phones (brand + actions), so it must be
     auto-height — a fixed height let the action row overflow and cover the
     breadcrumb in .pagehead */
  .topbar .wrap{height:auto;min-height:64px;gap:14px;padding-top:10px;padding-bottom:10px;}
  .actions{gap:12px;}
  .btn-primary{padding:11px 16px;font-size:.8125rem;}
  .brand-name{font-size:1rem;letter-spacing:.08em;}
  .nav a{color:var(--on-ink-2);border-bottom:1px solid var(--ink-line);}
  .nav a[aria-current="page"]{border-bottom-color:var(--gold);}
  .barh{padding:18px 0;}
  .trust{border-right:0;border-bottom:1px solid var(--ink-line);padding:26px 0;}
  .trustband .wrap{grid-template-columns:1fr;}
  .block h2::before{margin-bottom:10px;}
  .block{padding:38px 0;}
}
@media (max-width:560px){
  .hero h1{font-size:clamp(2rem,8.6vw,2.5rem);}
  .hero-visual .shot{height:230px;}
  .cat .thumb{height:170px;}
  .cat .thumb img{max-height:142px;}
  .barh{align-items:flex-start;gap:14px;}
  .barh a{white-space:normal;}
  .catbtn{width:auto;align-self:flex-start;justify-content:flex-start;}
  .catblock{padding:18px;}
  .catblock .cb-thumb{width:100%;flex:0 0 auto;height:170px;}
}

/* ---------- dimension reference figures ----------
   The drawing explains the T1/T2/T3, D/D1/H/H1 codes the table uses. It sits
   directly above the table, on a paper plate so the line work stays legible,
   and follows the source aspect ratio instead of being cropped square. */
.dimref{margin-bottom:8px;}
.dimref-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px;}
.dimfig{margin:0;background:var(--plate);border:1px solid var(--line);border-radius:1px;}
.dimfig .gbtn{display:block;width:100%;padding:10px;cursor:zoom-in;border:0;background:none;aspect-ratio:auto;}
.dimfig img{display:block;width:100%;height:auto;max-height:none;object-fit:contain;}
.dimfig:hover{border-color:var(--gold-deep);}
@media (max-width:560px){
  .dimref-grid{grid-template-columns:1fr;}
}

/* ============ 旋挖斗详情页新增块（2026-10-22） ============
   尺寸图 + 代号对照 + 真参数表。用现有变量，不引入新色值。 */
.appblock{margin:0 0 22px;padding:14px 16px;background:rgba(255,255,255,.045);
  border-left:3px solid var(--accent);border-radius:0 var(--radius) var(--radius) 0;}
.appblock .applbl{display:block;font-size:11px;letter-spacing:.14em;font-weight:700;
  color:var(--gold);margin-bottom:6px;text-transform:uppercase;}
.appblock p{margin:0;font-size:15px;line-height:1.65;color:var(--on-ink-2);}

.dimblock .dimwrap{display:grid;grid-template-columns:1fr 300px;gap:44px;align-items:center;
  margin-top:22px;padding:28px;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);}
.dimfig{display:flex;align-items:center;justify-content:center;}
.dimfig img{max-width:100%;height:auto;max-height:420px;mix-blend-mode:multiply;}
.dimcodes{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:1fr 1fr;gap:8px 18px;}
.dimcodes li{font-size:13.5px;color:var(--on-ink-2);line-height:1.5;}
.dimcodes li b{display:inline-block;min-width:34px;font-weight:700;color:var(--gold);}

table.spec{width:100%;border-collapse:collapse;font-size:13.5px;margin-top:18px;
  white-space:nowrap;min-width:max-content;}
table.spec thead th{background:var(--ink);color:#fff;font-weight:500;font-size:12px;
  padding:11px 10px;text-align:right;vertical-align:bottom;line-height:1.28;
  max-width:118px;white-space:normal;}
table.spec thead th:first-child{text-align:left;}
table.spec thead th .dcode{display:block;font-size:10px;opacity:.62;margin-top:3px;
  font-weight:400;letter-spacing:.02em;}
table.spec tbody th{font-weight:600;padding:9px 10px;text-align:left;color:var(--on-paper);
  font-variant-numeric:tabular-nums;border-bottom:1px solid var(--paper-3);}
table.spec tbody td{padding:9px 10px;text-align:right;color:var(--on-paper);
  font-variant-numeric:tabular-nums;border-bottom:1px solid var(--paper-3);}
table.spec tbody tr:nth-child(even) td,table.spec tbody tr:nth-child(even) th{background:rgba(0,0,0,.028);}
@media(max-width:860px){
  .dimblock .dimwrap{grid-template-columns:1fr;gap:22px;padding:18px;}
  .dimcodes{grid-template-columns:1fr;}
}

/* 正文序号计数：本站 .block h2::before 用 counter(sec)，但详情页的
   .block 不在 .results 里，计数器会从上一页继承（出现 51、61 这种）。
   这里给详情页正文单独重置。 */
.specpage{counter-reset:sec;}
.specpage .block:first-of-type{counter-increment:none;}
.specpage .block h2::before{content:none;}

/* 参数表容器（2026-10-22 补：上一版忘了定义，导致表格溢出到容器外） */
.tblwrap{overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch;
  border:1px solid var(--line);border-radius:var(--radius);background:var(--paper-2);}
.tblwrap table.spec{margin:0;min-width:100%;}
/* 表格列宽的语义：首列规格窄，参数列等宽 */
table.spec thead th,
table.spec tbody td{white-space:nowrap;}

/* ============ 三级页新结构（2026-10-22 按客户要求调整） ============
   产品图 + 尺寸图并排 → 技术参数表 */
.prodhead{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;
  padding:34px 0 26px;align-items:start;}
.prodtitle .model{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--on-ink-3);margin:0 0 10px;font-weight:700;}
.prodtitle h1{font-size:clamp(26px,2.6vw,38px);line-height:1.14;margin:0 0 10px;}
.prodtitle .desc{font-size:16px;color:var(--on-ink-2);margin:0;}
.prodmeta .appblock{margin:0 0 16px;}
.prodmeta .meta{font-size:14px;color:var(--on-ink-2);margin:0 0 18px;}
.prodmeta .meta span{color:var(--gold);font-weight:600;}

.imgpair{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin:6px 0 10px;}
.shotbox{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:30px 26px 16px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;min-height:400px;}
.shotbox img{max-width:100%;max-height:340px;height:auto;object-fit:contain;
  mix-blend-mode:multiply;}
.shotbox figcaption{margin-top:14px;font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--on-ink-3);font-weight:700;}
.dimcodes{margin-top:20px;}
@media(max-width:900px){
  .prodhead{grid-template-columns:1fr;gap:22px;padding:24px 0 18px;}
  .imgpair{grid-template-columns:1fr;gap:16px;}
  .shotbox{min-height:280px;padding:20px 16px 12px;}
  .shotbox img{max-height:260px;}
}

/* 代号说明与页脚之间留白（之前被询价条压住） */
.specpage .dimcodes{margin-bottom:44px;}

/* 参数表铺满容器（列少时右侧会留白） */
.tblwrap table.spec{width:100%;}
.tblwrap table.spec thead th:last-child,
.tblwrap table.spec tbody td:last-child{padding-right:16px;}

/* ============================================================================
   三级详情页 v2 —— 三图结构（2026-10-22）
   ----------------------------------------------------------------------------
   客户三次纠正后的最终形态：详情页放的是三张图，各自独立成块、依次排布。
     01 产品图      —— 蓝底照片原样呈现（不刷白、不抠图、不用 multiply）
     02 尺寸图      —— 线稿
     03 技术参数    —— 参数表的原图，不再转成 HTML 表格

   图版底色用 --plate（#D7D0C6，原站图版色）；文字一律走 --on-ink 系列，
   因为页面主体是深色底，--ink / --on-paper 系列在深底上不可读。
   ============================================================================ */

.rz3{padding-bottom:58px;}

/* ---------- 面包屑：贴着页头，收一点下边距 ---------- */
.rz3 .crumb{margin-bottom:16px;}

/* ---------- 产品头部：左标题 / 右事实与行动 ---------- */
.rz3-head{display:grid;grid-template-columns:1.16fr .84fr;gap:52px;
  align-items:start;padding:18px 0 34px;border-bottom:1px solid var(--line);}
.rz3-kicker{margin:0 0 13px;font-size:11.5px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold);}
.rz3-head h1{font-family:var(--display);font-weight:600;
  font-size:clamp(27px,2.6vw,37px);line-height:1.18;letter-spacing:0;
  color:var(--on-ink);margin:0;max-width:none;}
.rz3-head h1 .en{display:block;margin-top:11px;font-family:var(--sans);font-weight:400;
  font-size:clamp(14px,1.15vw,17px);line-height:1.45;letter-spacing:.01em;
  color:var(--on-ink-2);}

.rz3-meta{padding-top:2px;}
.rz3-facts{margin:0 0 24px;border-top:1px solid var(--ink-line);}
.rz3-fact{display:flex;align-items:baseline;gap:18px;padding:12px 0;
  border-bottom:1px solid var(--ink-line);}
.rz3-fact .k{flex:0 0 86px;font-size:10.5px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--on-ink-3);}
.rz3-fact .v{font-size:14.5px;line-height:1.55;color:var(--on-ink);}
.rz3-fact .v b{font-family:var(--mono);font-weight:600;color:var(--gold);
  letter-spacing:.01em;white-space:nowrap;}
.rz3-fact .v i{margin-left:11px;font-style:normal;font-size:12.5px;color:var(--on-ink-3);}
.rz3-meta .btn-primary{display:block;width:100%;text-align:center;}

/* ---------- 三张图 ---------- */
.rz3-figs{padding-top:40px;}
.rz3-row{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:start;}
.rz3-fig{display:flex;flex-direction:column;margin:0;min-width:0;}

/* 技术参数图独占一行，上方一条细分割线与其他两块隔开 */
.rz3-fig--wide{margin-top:46px;padding-top:26px;border-top:1px solid var(--line);}

/* 编号小标题：左 01 + 中文名，右侧英文小字 */
.rz3-cap{display:flex;align-items:baseline;gap:11px;margin:0 0 13px;flex-wrap:wrap;}
.rz3-cap .num{font-family:var(--mono);font-size:11.5px;font-weight:700;
  letter-spacing:.06em;color:var(--gold);}
.rz3-cap .zh{font-size:13.5px;font-weight:700;letter-spacing:.05em;color:var(--on-ink);}
.rz3-cap .en{margin-left:auto;font-size:10px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--on-ink-3);white-space:nowrap;}

/* 图版：三种图各有各的底，绝不能套同一块色。
   01 产品图是蓝底照片 —— 蓝底本身就是这块图版的底色。各产品的蓝并不完全
      相同（实测有 #B2DEF6 和 #A3D7F5），铺任何固定板色都会在边上露一圈
      色差、把照片「染」进板里。所以这里不铺底、不留内边距，让图版紧贴照片。
   02 尺寸图、03 技术参数图是白底线稿/扫描件 —— 用 --paper 浅板，
      白底自然融进板面，线稿因此更清楚。 */
.rz3-plate{display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;}
.rz3-fig--photo .rz3-plate{
  background:none;border:0;              /* 产品照片不要边框，避免出现白框相框 */
}
.rz3-fig--dim .rz3-plate,
.rz3-fig--wide .rz3-plate{background:var(--paper);padding:20px;}

/* 产品图与尺寸图并排。两块图版各按自家图片定高（不裁切、不拉伸），
   顶端对齐即可 —— 强行拉成等高会在蓝底照片上下留出一条深色空带。 */
.rz3-plate img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;}
/* 产品图：高度与尺寸图对齐，避免竖长照片把图版拉成一根长条。
   竖长产品照（如冲抓斗 214x705）按宽度铺满会变成极高的一列，
   与右侧尺寸图完全失衡。改为按高度封顶、宽度自适应居中。 */
/* 产品图：竖长图按高度封顶，但图版本身要撑满格子宽度，
   否则照片会缩成一小块、右侧留下大片深色空白。

   ⚠️ 不要给 .rz3-plate 设 overflow:hidden —— 竖长产品（如 B 型绳索抓斗
   高宽比接近 3:1）会超出 540px 封顶，被 overflow 直接切掉底部。
   改为 min-height 随图自适应，并给图片留 8px 内边距。 */
.rz3-fig--photo .rz3-plate{
  width:100%;min-height:420px;overflow:visible;padding:8px;
  /* 竖长产品按高度贴满后，水平居中，避免右侧空一大块 */
  display:flex;align-items:center;justify-content:center;
}
/* 横长产品（如三轴搅拌式螺旋、法兰式螺旋，宽高比 2.4~3.0）：
   若仍用 min-height:420px，图片按宽度铺满后高度只有 150~190px，
   图版上下会留出大片空白。改为按内容高度收缩。 */
.rz3-fig--photo:has(img[src*=flight-augers-rod]:not([src*=-dim]):not([src*=-table])) .rz3-plate{
  min-height:0;
}
.rz3-fig--photo .rz3-plate img{
  width:auto;max-width:100%;max-height:560px;
  object-fit:contain;   /* 严格等比，绝不裁切 */
  margin:0 auto;
}
/* ---------- 图卡页的单块形态（只有 01 产品图）----------
   规则很简单：figure 占满整行，图版按图片自然尺寸、水平居中，
   标题永远贴左。不要设 min-height，否则会多出一个空框。 */
.rz3-row:has(> .rz3-fig:only-child){grid-template-columns:1fr;}
.rz3-row > .rz3-fig--photo:only-child .rz3-plate,
.rz3-figs .wrap > .rz3-fig--photo:only-child .rz3-plate{
  width:fit-content;min-height:0;margin:0 auto;}
.rz3-row > .rz3-fig--photo:only-child .rz3-plate img,
.rz3-figs .wrap > .rz3-fig--photo:only-child .rz3-plate img{
  max-height:520px;width:auto;}

/* 尺寸图是竖长线稿，限高，免得把产品图压成小方块 */
.rz3-fig--dim .rz3-plate img{max-height:430px;}
/* 尺寸图在 row 里被拉成独占整行时，图版跟着拉宽、线稿缩在中间。
   限一个合理宽度并居中，避免两侧大片空白。 */
.rz3-row > .rz3-fig--dim:only-child{max-width:560px;margin:0 auto;}
.rz3-fig--wide .rz3-plate{padding:18px;}
.rz3-fig--wide .rz3-plate img{width:100%;max-height:none;}

/* ---------- 响应式 ---------- */
@media (max-width:900px){
  .rz3-head{grid-template-columns:1fr;gap:26px;padding:14px 0 26px;}
  .rz3-row{grid-template-columns:1fr;gap:28px;}
  .rz3-fig--dim .rz3-plate{padding:16px;}
  .rz3-fig--dim .rz3-plate img{max-height:360px;}
  .rz3-fig--wide{margin-top:30px;padding-top:22px;}
  .rz3-fig--wide .rz3-plate{padding:12px;}
  .rz3-cap .en{display:none;}
  .rz3-fact .k{flex-basis:76px;}
}

/* ---------- 中类页内的小类分组（3 类并排展示） ----------
   一个中类下再分小类时，用小标题把卡片隔开；编号沿用详情页的
   「Precision Catalogue」序号习惯，金色小号等宽字。 */
.subgroup + .subgroup{margin-top:clamp(40px,4.2vw,60px);}
/* 中类页的 results 区是深墨底，这里必须用 ink 侧的色阶；
   用 --on-paper 系列会变成深字压深底、整行看不见。 */
.subhead{display:flex;align-items:baseline;gap:14px;margin:0 0 22px;padding-bottom:12px;
  border-bottom:1px solid var(--ink-line);}
.subhead .idx{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.1em;
  color:var(--gold);}
.subhead h2{margin:0;padding:0;font-family:var(--display);font-size:clamp(1.2rem,1.6vw,1.45rem);
  font-weight:600;color:var(--on-ink);letter-spacing:-.01em;}
.subhead .en{font-family:var(--sans);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--on-ink-3);}
.subhead .sc{margin-left:auto;font-family:var(--mono);font-size:12px;letter-spacing:.06em;
  color:var(--on-ink-3);}
@media (max-width:640px){
  .subhead{flex-wrap:wrap;gap:8px 12px;}
  .subhead .sc{margin-left:0;width:100%;}
}

/* ---------- 型号名专用字体（技术标识，必须零歧义） ----------
   Playfair Display 的 "11" 字形会被读成 "n"：
   截图实证 `A11V 控制阀` 渲染成 `AnV 控制阀`，`A11VO95` 渲染成 `AnVO95`。
   型号是采购标识，读错=买错件，所以型号类文字一律退出衬线体，
   改用 DM Sans + 等宽数字，保证 1/l/I、0/O 区分清晰。
   只在 .modelname / .mname / .pno 等型号容器上生效，不影响普通标题。 */
.modelname,.mname,.pno,.model-name,.typecode{
  font-family:"DM Sans","Noto Sans SC",system-ui,sans-serif !important;
  font-variant-numeric:tabular-nums;
  letter-spacing:.01em;
}
/* 型号出现在 h1/h2/h3 标题里时（如 "A11V 控制阀"），
   中文部分仍可用衬线，但整体改无衬线更安全——型号常与中文混排，
   逐字切换字体会导致基线跳动，故整个标题统一。 */
h1 .typecode,h2 .typecode,h3 .typecode{
  font-family:"DM Sans","Noto Sans SC",system-ui,sans-serif !important;
  font-weight:700;
}

/* ---------- 含型号的标题：退出衬线体 ----------
   见 tools/fix-modeltype-font.py：Playfair 的 "11" 会被读成 "n"
   （`A11V 控制阀` 渲染成 `AnV 控制阀`），型号读错=客户买错件。
   加 .is-typecode 的标题统一用 DM Sans + 等宽数字。 */
h1.is-typecode,h2.is-typecode,h3.is-typecode,
.is-typecode{
  font-family:"DM Sans","Noto Sans SC",system-ui,"Segoe UI",sans-serif !important;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.005em;
}

/* ---------- 首页「按工况选件」板块（2026-10-25 新增，同日改配色） ----------
   客户第一个问题是「我的工况该用哪个件」，所以首页要有工况到产品的入口。

   配色：原先写的是 #fff 白卡 + 旧浅色主题变量（--ink / --body / --paper-2），
   整块在深墨底上像贴了六张白纸，客户反馈「颜色太突兀」。
   现改为与 .cat / .prod / .catblock 完全同一套深色卡片：
   --ink-900 底（比 body 的 ink-950 亮一档）+ ink-line 细边，
   悬停时边框转金色、底色抬到 ink-850 —— 与全站卡片一致，不再跳出来。

   序号颜色：原来用 var(--blue) 即红色，但红在深底上只有 2.6:1，
   规范明确「红色绝不作深色底文字」。改用 --gold（8.9:1），
   同时红色回归它本来的用途——只出现在按钮上。 */
/* 区块底：比页面底微微抬起一档，让六张卡有"托"的感觉，
   而不是浮在同一片黑上只靠边框找边界 */
.sec-usecase{background:linear-gradient(180deg,
  rgba(18,19,26,.55) 0%, rgba(18,19,26,.28) 70%, transparent 100%);
  border-top:1px solid var(--ink-line);
  /* .sec-space 只给了 padding-top，没有下边距。
     区块底又是渐变（到 100% 才透明），结果最后一行卡片直接顶在
     下一条 .trustband 的上边框上 —— 客户看到的"黏连"。
     这里补下边距，让渐隐有落脚空间。 */
  padding-bottom:clamp(56px,6vw,88px);}
.usecase{background:var(--ink-900);border:1px solid var(--ink-line);
  border-radius:var(--radius);padding:22px 22px 18px;
  display:flex;flex-direction:column;height:100%;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
  transition:border-color .22s var(--ease),background .22s var(--ease);}
.usecase:hover{border-color:var(--gold);background:var(--ink-850);}
.usecase h3{font-size:17px;font-weight:600;color:var(--on-ink);
  margin:0 0 8px;letter-spacing:-.01em;}
.usecase .cond{font-family:var(--mono);font-size:.6875rem;letter-spacing:.14em;
  color:var(--gold);font-weight:600;margin:0 0 12px;display:flex;
  align-items:center;gap:10px;}
/* 序号后接一条细金线，做成「图版编号」的样子，替代原来纯数字的空洞感 */
.usecase .cond::after{content:"";flex:1;height:1px;
  background:linear-gradient(90deg,rgba(211,170,92,.42),transparent);}
.usecase p{font-size:13.5px;line-height:1.68;color:var(--on-ink-2);
  margin:0 0 16px;flex:1;}
.usecase .parts{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;
  padding-top:14px;border-top:1px solid rgba(53,55,64,.7);}
/* 标签：透明底 + 发丝边 + 次级灰，与 .count 同一套。
   已由 <span> 改为 <a>（真实跳转到对应产品中类），所以这里必须
   同时接过链接的默认样式（去下划线、继承颜色），并加可点的反馈：
   悬停/聚焦时边框与文字转金色，后面浮出一个小箭头。 */
.usecase .parts a{font-size:11.5px;color:var(--on-ink-3);
  background:transparent;border:1px solid var(--ink-line);
  border-radius:1px;padding:3px 8px;white-space:nowrap;
  text-decoration:none;display:inline-flex;align-items:center;gap:4px;
  transition:border-color .2s var(--ease),color .2s var(--ease),
             background .2s var(--ease);}
.usecase .parts a::after{content:"↗";font-size:9px;opacity:0;
  transform:translate(-3px,2px);transition:opacity .2s var(--ease),transform .2s var(--ease);}
.usecase .parts a:hover,.usecase .parts a:focus-visible{
  border-color:var(--gold);color:var(--gold);background:rgba(211,170,92,.07);}
.usecase .parts a:hover::after,.usecase .parts a:focus-visible::after{
  opacity:.85;transform:translate(0,0);}
.usecase:hover .parts a{border-color:rgba(211,170,92,.24);color:var(--on-ink-2);}
.usecase:hover .parts a:hover{border-color:var(--gold);color:var(--gold);}
/* 标题也变成入口：整卡只有标题和标签可点，标题悬停时转金色并带下划线位移 */
.usecase h3 a{color:inherit;text-decoration:none;
  background-image:linear-gradient(var(--gold),var(--gold));
  background-size:0 1px;background-repeat:no-repeat;background-position:0 100%;
  transition:color .2s var(--ease),background-size .28s var(--ease);}
.usecase h3 a:hover,.usecase h3 a:focus-visible{color:var(--gold);background-size:100% 1px;}
@media (max-width:980px){ .usecase{padding:18px;} }

/* ============ HERO · 电影感产品轮播（2026-10-25） ============
   左侧文案逐行升起 + 右侧产品浮台轮播（4 个类目）+ 金色刻度环 + 呼吸光。
   全部 CSS 动画，无 JS 依赖也能看到静态版；JS 只负责切帧与交互。
   渐隐切换用 opacity/transform，不触发 layout，60fps 无掉帧。 */
.hero{position:relative;overflow:hidden;overflow:clip;}
.hero::before{content:"";position:absolute;inset:-10%;pointer-events:none;
  background:
    radial-gradient(46% 44% at 74% 40%, rgba(211,170,92,.16), transparent 70%),
    radial-gradient(38% 40% at 20% 82%, rgba(167,23,41,.10), transparent 72%);
  animation:heroBreathe 16s ease-in-out infinite alternate;}
@keyframes heroBreathe{
  from{opacity:.55;transform:scale(1) rotate(0)}
  to{opacity:1;transform:scale(1.07) rotate(1.5deg)}}

.hero-tag{opacity:0;animation:heroRise .9s var(--ease) .08s forwards;}
.hero .eyebrow{opacity:0;animation:heroRise .9s var(--ease) .2s forwards;}
.hero h1{opacity:1;}
.hero h1 .h-line{display:block;overflow:hidden;padding-bottom:.06em;}
.hero h1 .h-line > span{display:block;transform:translateY(108%);
  animation:heroLineUp 1.1s var(--ease) forwards;}
.hero h1 .h-line:nth-child(1) > span{animation-delay:.3s}
.hero h1 .h-line:nth-child(2) > span{animation-delay:.4s}
.hero h1 .h-line:nth-child(3) > span{animation-delay:.5s}
.hero h1 em{font-style:normal;color:var(--gold);}
@keyframes heroLineUp{to{transform:translateY(0)}}
@keyframes heroRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.hero .lede{opacity:0;animation:heroRise .9s var(--ease) .6s forwards;}
.hero .cta-row{opacity:0;animation:heroRise .9s var(--ease) .72s forwards;}
.hero .trustline{opacity:0;animation:heroRise .9s var(--ease) .84s forwards;}

/* 展台 */
.hero-stage{position:relative;width:100%;aspect-ratio:1/.94;
  display:flex;align-items:center;justify-content:center;opacity:0;
  animation:heroStageIn 1.2s var(--ease) .26s forwards;}
@keyframes heroStageIn{
  from{opacity:0;transform:translateX(30px) scale(.96)}to{opacity:1;transform:none}}

.hero-stage .h-ring{position:absolute;inset:-13%;border-radius:50%;pointer-events:none;z-index:0;
  background:repeating-conic-gradient(from 0deg,
    rgba(211,170,92,.52) 0deg 1deg, transparent 1deg 8.5deg);
  -webkit-mask:radial-gradient(circle farthest-side, transparent 96%, #000 97%);
  mask:radial-gradient(circle farthest-side, transparent 96%, #000 97%);
  opacity:.85;
  animation:heroSpin 90s linear infinite;
  contain:layout paint;}
@keyframes heroSpin{to{rotate:360deg}}
.hero-stage .h-ring2{position:absolute;inset:-4%;border-radius:50%;
  pointer-events:none;border:1px solid rgba(211,170,92,.09);z-index:0;}

.hero-stage .h-halo{position:absolute;left:50%;bottom:9%;translate:-50% 0;
  width:58%;height:11%;border-radius:50%;pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%,rgba(211,170,92,.42),transparent 70%);
  filter:blur(20px);animation:heroHalo 6s ease-in-out infinite;}
@keyframes heroHalo{0%,100%{opacity:.5;scale:1}50%{opacity:1;scale:1.08}}

/* 产品卡：暖白卡纸 + 金色双线 */
.hero-stage .h-slide{position:absolute;left:50%;top:50%;
  translate:-50% -50%;
  width:76%;max-width:390px;aspect-ratio:1/1;border-radius:3px;overflow:hidden;
  background:linear-gradient(158deg,#FBFAF7 0%,var(--plate) 100%);
  border:1px solid rgba(211,170,92,.55);
  outline:1px solid rgba(211,170,92,.18);outline-offset:6px;
  box-shadow:0 2px 0 rgba(255,255,255,.07) inset,
             0 34px 60px -18px rgba(0,0,0,.78),
             0 10px 24px -10px rgba(0,0,0,.55);
  /* 非当前帧直接不渲染：交叉淡入淡出必然出现"两层同时半透明"的露底，
     改成硬切换 + 单帧淡入，任何时刻只有一张图存在 */
  display:none;}
.hero-stage .h-slide.on{display:block;
  animation:slideIn .7s var(--ease) both;}
@keyframes slideIn{
  from{opacity:0;transform:translateY(16px) scale(.96);
       filter:blur(3px) brightness(.9);}
  to{opacity:1;transform:none;filter:none;}
}
.hero-stage .h-slide img{width:100%;height:100%;object-fit:cover;display:block;
  mix-blend-mode:multiply;}

.hero-stage .h-cat{position:absolute;left:2px;top:2px;font-family:var(--mono);
  font-size:.66rem;letter-spacing:.2em;color:var(--gold);text-transform:uppercase;}
.hero-stage .h-meta{position:absolute;left:2px;right:2px;bottom:0;display:flex;
  align-items:center;justify-content:space-between;gap:14px;}
.hero-stage .h-code{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;
  color:var(--on-ink-3);margin:0;}
.hero-stage .h-code b{color:var(--gold);font-weight:700;font-size:1rem;
  font-variant-numeric:tabular-nums;}
.hero-stage .h-ticks{display:flex;gap:7px;align-items:center;}
.hero-stage .h-ticks i{display:block;width:22px;height:2px;
  background:rgba(255,255,255,.15);border-radius:1px;cursor:pointer;
  transition:background .35s var(--ease),width .35s var(--ease);}
.hero-stage .h-ticks i:hover{background:rgba(211,170,92,.55);}
.hero-stage .h-ticks i.on{background:var(--gold);width:40px;}

@media (prefers-reduced-motion:reduce){
  .hero::before,.hero-stage .h-ring,.hero-stage .h-halo{animation:none!important;}
  .hero h1 .h-line > span{transform:none!important;}
  .hero-tag,.hero .eyebrow,.hero .lede,.hero .cta-row,.hero .trustline,
  .hero-stage{opacity:1!important;transform:none!important;animation:none!important;}
  .hero-stage .h-slide{animation:none!important;}
}
@media (max-width:900px){
  .hero-stage{aspect-ratio:1/.9;max-width:430px;margin:0 auto;}
}

/* ---------- 移动端收口（2026-10-25） ----------
   390px 实测：.topbar .wrap 的 gap:40px（基础规则）在 flex-wrap 下
   把「获取报价」按钮挤出屏幕；hero 的产品卡 76% 宽 + 刻度环 inset:-13%
   也会溢出。这里统一收口。 */
@media (max-width:768px){
  .topbar .wrap{gap:10px 14px;justify-content:space-between;}
  .topbar .actions{margin-left:auto;}
  .topbar .btn-primary{white-space:nowrap;}
  .hero-stage{max-width:100%;overflow:hidden;contain:layout paint;}
  .hero-stage .h-ring{inset:0;}
  .hero-stage .h-ring2{inset:8%;}
  .hero-stage .h-slide{width:84%;max-width:330px;}
  .hero-stage .h-meta,.hero-stage .h-cat{left:0;right:0;}
}
@media (max-width:420px){
  .hero-stage .h-slide{width:90%;max-width:290px;}
  .hero-stage .h-ring{inset:0;}
  .hero-stage .h-ring2{display:none;}
}

/* 首页「产品大类」共 5 张卡，.catgrid 是两列 → 第 5 张独占一行、右侧留大片空白。
   让最后一张横跨两列，改成"上两行各 2 张 + 末行 1 张通栏"的节奏，
   空白消失，同时最后一块（整机配套传动件）视觉上更像总结块。 */
@media (min-width:861px){
  .catgrid > .catblock:last-child:nth-child(odd){grid-column:1 / -1;}
}

/* 同一行的 .catblock 卡片内容行数不同（液压件有 3 行标签、行走减速器只有 1 行），
   默认不会等高，右卡比左卡矮一截留下缺口。让卡撑满网格单元。 */
.catgrid > .catblock{height:100%;}

/* ---------- 信任条重做（2026-10-25） ----------
   客户：「这块感觉怪，版式与上下文不统一」。

   原来的问题（实测）：
   1. 它是全幅通栏的"表格带"：背景铺满、上下各一条通栏横线、四列用
      拉满高度的竖线分隔，且右侧没有边框收口 —— 上下都是 wrap 内的
      卡片网格，夹着这样一条"无边表格"，体系不同。
   2. 内容左右参差：`.trust:first-child{padding-left:0}` +
      `:last-child{padding-right:0}`，实测四项内容起点 0/26/26/26，
      第一项比后三项更靠左，右侧又少 26px 收尾。
   3. 序号用 32px 圆形徽章，而上一块「按工况选件」用的是 mono 数字+细线
      —— 同一页两套序号语言。

   改法：收成一块有边框的整面板（与 .cta-band .inner 同一语言），
   宽度对齐内容区；序号统一成 mono+金；内部分隔线留在面板内。 */
.trustband{background:transparent;border:0;padding:0;}
/* 不能写死 padding —— .wrap 在 900px 降到 28px、768px 降到 22px，
   写死 40px 会让面板比上方卡片各宽出 18px（实测 900px 下 40 vs 22）。
   改成 block 布局 + 继承 .wrap 自身的左右内距，三档宽度都对齐。 */
.trustband .wrap{display:block;}

.trustpanel{
  display:grid;grid-template-columns:repeat(4,1fr);
  background:var(--ink-900);
  border:1px solid var(--ink-line);
  border-radius:1px;
  overflow:hidden;
  /* 面板顶部一道金线：与 .cta-band .inner 的左侧金边呼应，
     说明"承诺 → 行动"是一组。
     淡出点定在 25%（= 第一列右边界），而不是随意的 42% ——
     这样金线正好覆盖第一格，与下方列分隔线对齐，不会像断了一截。 */
  background-image:linear-gradient(90deg,
    rgba(211,170,92,.62) 0%, rgba(211,170,92,.20) 24%, rgba(211,170,92,0) 26%);
  background-size:100% 1px;background-repeat:no-repeat;background-position:0 0;
}

/* 四列等分，内边距统一 —— 不再有首末项特例造成的参差 */
.trustpanel .trust{padding:26px 26px 28px;border-right:1px solid rgba(53,55,64,.75);}
.trustpanel .trust:first-child{padding-left:26px;}
.trustpanel .trust:last-child{border-right:0;padding-right:26px;}

/* 序号：与 .usecase .cond 同一套（mono + 金色 + 细线），去掉圆形徽章 */
.trustpanel .idx{
  display:inline-flex;align-items:center;gap:10px;
  width:auto;height:auto;border:0;border-radius:0;background:transparent;
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.14em;
  font-weight:600;color:var(--gold);margin:0 0 13px;
}
.trustpanel .idx::after{content:"";width:22px;height:1px;
  background:linear-gradient(90deg,rgba(211,170,92,.5),transparent);}

.trustpanel h4{font-family:var(--display);font-size:.95rem;font-weight:600;
  color:var(--on-ink);margin:0 0 8px;line-height:1.35;letter-spacing:-.005em;}
.trustpanel p{color:var(--on-ink-3);font-size:.8125rem;line-height:1.62;margin:0;}

/* 2 列：只保留列间竖线，行间用横线 */
@media (max-width:1024px){
  .trustpanel{grid-template-columns:1fr 1fr;}
  .trustpanel .trust:nth-child(2n){border-right:0;}
  .trustpanel .trust:nth-child(n+3){border-top:1px solid rgba(53,55,64,.75);}
}
/* 1 列：竖向堆叠，全部改成横线 */
@media (max-width:640px){
  .trustpanel{grid-template-columns:1fr;}
  .trustpanel .trust{padding:20px 22px;border-right:0;}
  .trustpanel .trust:nth-child(n+2){border-top:1px solid rgba(53,55,64,.75);}
}

/* ============================================================
   v6: inline gallery pane — 取代弹窗（lightbox）
   客户明确不要悬浮弹窗：要看图时页面上下文不能被遮住。
   改为「主图面板 + 缩略图网格」就地展开，不遮罩、不锁滚动。
   ============================================================ */

/* 旧 lightbox 已弃用：新版 main.js 不再创建 .lb 元素，
   因此这里无需隐藏规则。
   ⚠️ 不要加 .lb{display:none}——若访客缓存了旧版 main.js，
   旧 JS 仍会创建弹窗，强制隐藏会变成「点击完全没反应」，
   比看到旧弹窗更糟。正确做法是 main.js 带 ?v= 版本号（已全站处理）。 */



/* 缩略图放大：原 148px / 150px 太小，看不清产品轮廓 */
.gallery-grid{grid-template-columns:repeat(auto-fill,minmax(186px,1fr));gap:16px;}
.gitem img{max-height:186px;}
.gitem .gbtn{padding:10px;gap:8px;}
.gitem .gcap{font-size:11.5px;}

/* 主图面板 */
.gpane{
  display:grid;
  /* 图区宽度按图片比例自适应：小图不必占大位，大图要能铺开。
     JS 会写 --media-w；没有时退回 440px。 */
  grid-template-columns:minmax(0, min(var(--media-w, 440px), 62%)) minmax(0,1fr);
  gap:26px;
  align-items:start;
  margin:10px 0 26px;
  padding:18px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--panel);
}
.gpane[hidden]{display:none;}

.gpane-media{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:300px;
  max-height:56vh;
  overflow:auto;
  background:#fff;
  border:1px solid var(--line);
  border-radius:6px;
  padding:12px;
}
.gpane-img{
  display:block;
  max-width:100%;
  max-height:52vh;
  object-fit:contain;
  /* 默认不做任何插值放大：源图多大就显示多大，最锐 */
  image-rendering:auto;
}
/* 2× 放大用 nearest，边缘清晰不糊（源图小的时候比平滑放大更可读） */
.gpane[data-zoom="2"] .gpane-img{image-rendering:pixelated;}
.gpane[data-zoom="2"] .gpane-media,
.gpane[data-zoom="1"] .gpane-media{align-items:flex-start;justify-content:flex-start;}

.gpane-info{min-width:0;}
.gpane-kicker{
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--soft);margin:0 0 6px;
}
.gpane-title{
  font-family:var(--serif,inherit);font-size:22px;line-height:1.25;color:var(--ink);
  margin:0 0 10px;font-weight:600;
}
.gpane-meta{
  font-size:13px;color:var(--soft);margin:0 0 14px;
  display:flex;flex-wrap:wrap;gap:6px 14px;
}
.gpane-meta .gpm-mono{font-family:var(--mono);color:var(--blue);font-weight:700;}
.gpane-note{
  font-size:12.5px;line-height:1.55;color:var(--body);
  margin:0 0 16px;padding:10px 12px;
  background:#fff;border:1px solid var(--line);border-left:3px solid var(--gold,#D3AA5C);
  border-radius:4px;
}
.gpane-note b{color:var(--ink);}

.gpane-tools{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 4px;}
.zbtn{
  font-size:12.5px;font-weight:600;
  padding:7px 12px;border-radius:var(--radius);
  border:1px solid var(--line);background:#fff;color:var(--body);
  cursor:pointer;
}
.zbtn:hover{border-color:var(--blue);color:var(--blue);}
.zbtn[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff;}
.gpane-close{
  margin-left:auto;font-size:12.5px;font-weight:600;
  background:none;border:0;color:var(--soft);cursor:pointer;padding:7px 4px;
}
.gpane-close:hover{color:var(--blue);}

/* 当前选中的缩略图 */
.gitem.is-active{border-color:var(--blue);box-shadow:0 0 0 2px rgba(23,25,32,.08);}
.gitem.is-active .gcap{color:var(--blue);}

/* 图库内键盘提示 */
.gkbd{font-size:11.5px;color:var(--soft);margin:0 0 12px;}
.gkbd kbd{
  font-family:var(--mono);font-size:11px;background:#fff;border:1px solid var(--line);
  border-bottom-width:2px;border-radius:3px;padding:1px 5px;color:var(--body);
}

/* 型号表里的图纸按钮：就地插一行，不弹窗 */
.dwgrow>td{padding:0 !important;background:var(--panel);}
.dwgfig-inline{margin:0;padding:16px;display:flex;flex-direction:column;align-items:center;gap:10px;}
.dwgfig-inline img{max-width:100%;height:auto;background:#fff;border:1px solid var(--line);border-radius:6px;}
.dwgfig-inline figcaption{font-size:12.5px;color:var(--soft);text-align:center;}

@media (max-width:900px){
  .gpane{grid-template-columns:1fr;gap:16px;}
  .gpane-media{min-height:220px;max-height:none;}
  .gpane-img{max-height:none;}
}
@media (max-width:560px){
  .gallery-grid{grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px;}
  .gitem img{max-height:132px;}
}

/* 面板内：同组型号快速跳转 */
.gpane-jump{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);}
.gpane-jump-h{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--soft);margin:0 0 8px;font-weight:700;}
.gpane-jump-list{display:flex;flex-wrap:wrap;gap:6px;}
.jchip{
  font-family:var(--mono);font-size:11.5px;font-weight:600;
  padding:4px 9px;border-radius:3px;
  border:1px solid var(--line);background:#fff;color:var(--body);cursor:pointer;
}
.jchip:hover{border-color:var(--blue);color:var(--blue);}
.jchip.is-on{background:var(--blue);border-color:var(--blue);color:#fff;}

/* 钻具产品图改为透明底 PNG/WebP 后，
   mix-blend-mode:multiply 会把透明区的边缘算黑，改为 normal。 */
.cat .thumb img,
.prod .thumb img,
.thumbs .t img{ mix-blend-mode:normal; }


/* ---------- 2026-10-26 产品照片不要白框 ----------
   .rz3-plate 基础规则带 border:1px solid var(--line)，
   产品照片不是线稿，加边框会像白框相框，与页面割裂。
   这是最终覆盖，放在文件末尾以确保生效。 */
.rz3-fig--photo .rz3-plate{
  border:0 !important;
  background:none !important;
}
.rz3-fig--photo .rz3-plate img{
  border:0;
  box-shadow:none;
}

/* ---------- 产品说明区块（2026-10-26）----------
   不套固定模板：有参数表就放参数表，没有就用说明文字讲清楚产品。
   说明段落用衬线正文字体，行高放宽，便于阅读。 */
.rz3-body{padding:56px 0 24px;}
.rz3-h2{
  font-family:var(--serif);font-size:26px;font-weight:700;color:var(--paper);
  margin:0 0 18px;display:flex;align-items:baseline;gap:14px;
  padding-bottom:10px;border-bottom:1px solid var(--ink-line);
}
.rz3-h2 .en{
  font-family:var(--mono);font-size:11px;font-weight:400;letter-spacing:.16em;
  text-transform:uppercase;color:var(--soft);
}
.rz3-body p{
  font-size:15.5px;line-height:1.95;color:rgba(247,245,240,.78);
  margin:0 0 16px;max-width:74ch;
}
.rz3-lead{
  font-size:15px;line-height:1.8;color:var(--soft);margin:14px 0 0;max-width:60ch;
}
.rz3-tags{
  list-style:none;margin:0 0 28px;padding:0;
  display:flex;flex-wrap:wrap;gap:10px;
}
.rz3-tags li{
  font-size:13px;color:rgba(247,245,240,.82);background:rgba(255,255,255,.05);
  border:1px solid var(--ink-line);border-radius:2px;
  padding:7px 14px;letter-spacing:.02em;
}
.rz3-note{
  font-size:13px;line-height:1.85;color:var(--soft);
  border-left:2px solid var(--gold);padding:2px 0 2px 16px;
  margin:26px 0 0;max-width:70ch;
}

/* ---------- 产品图放大 · 单图页面（2026-10-26）----------
   原文件里产品图是整页最大元素，我们之前限高 520px 太小，
   1100px 的原图被压成 668px，细节全丢。
   单图页面改为按容器宽度铺满，最高 720px。 */
.rz3-figs .wrap > .rz3-fig--photo:only-child .rz3-plate{
  width:100%;max-width:980px;margin:0 auto;
  padding:0;               /* 不留内边距，图紧贴图版边缘 */
}
.rz3-figs .wrap > .rz3-fig--photo:only-child .rz3-plate img{
  width:100%;height:auto;max-height:720px;object-fit:contain;
}

/* ---------- 参数表图（2026-10-27）----------
   液压样本的技术参数表是扫描表格，1200px 宽、17~32 行数据。
   表格是白底线稿，放在浅纸色底板上最清楚；限宽保证字可读，
   过窄屏允许横向滚动而不是把字压小。 */
.spectable{margin:18px 0 0;}
.spectable a{
  display:block;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius);padding:10px;overflow-x:auto;
}
.spectable img{
  display:block;width:100%;max-width:100%;height:auto;margin:0 auto;
  image-rendering:-webkit-optimize-contrast;
}
.spectable figcaption{
  margin-top:10px;font-size:12.5px;line-height:1.6;color:var(--soft);
}

/* ---------- 规格摘要（rz3-spec，2026-10-27）----------
   速比、扭矩这类关键参数放在标题下方，采购方第一眼就能看到。 */
.rz3-spec{
  display:flex;flex-wrap:wrap;gap:32px;margin:26px 0 0;
  padding:18px 0 0;border-top:1px solid var(--ink-line);
}
.rz3-spec > div{display:flex;flex-direction:column;gap:6px;}
.rz3-spec dt{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--soft);
}
.rz3-spec dd{
  margin:0;font-family:var(--serif);font-size:22px;font-weight:700;color:var(--paper);
}

/* ---------- 减速器卡片（td-card，2026-10-27）----------
   安装尺寸图是白底线稿、细长条（785x1500）。用 contain 完整显示，
   底板给白纸色，与图纸底色一致；高度 220 保证线稿看得清。 */
.grid4.td-card .prod .thumb{
  padding:6px;background:var(--paper);height:220px;overflow:hidden;
  border-bottom:1px solid var(--line);
}
.grid4.td-card .prod .thumb img{
  width:100%;height:100%;max-width:none;max-height:none;
  object-fit:contain;object-position:center;mix-blend-mode:normal;
}
/* c5b: on-site / application photo shown below a model gallery (not counted as a model) */
.onsite{margin:4px 0 34px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;overflow:hidden;}
.onsite .onsite-label{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--soft);padding:10px 14px;border-bottom:1px solid var(--line);}
.onsite img{display:block;width:100%;height:auto;max-height:520px;object-fit:cover;}
.onsite img+img{border-top:1px solid var(--line);}
/* c5c: units (mm, kg, kN...) keep real case inside uppercase labels; build wraps them in .uc (table unit labels .u too) */
.uc,.u{text-transform:none;}
/* c6: unit spans keep normal tracking (no wide letter-spacing splitting 25mm) */
.uc{letter-spacing:normal;}


/* ===== theme.css (build 20261029-dbe2f80) ===== */
/* ==========================================================================
   theme.css — ZIGA GLOBAL "Industrial" design layer (build-time, appended to main.css)
   --------------------------------------------------------------------------
   Direction: premium industrial B2B (white canvas, charcoal structure, one red
   accent from the ZIGA mark, generous whitespace, one sans family).
   Mechanism: main.css names its surfaces "ink" (dark) and "paper" (light). Here
   the ROOT tokens are re-pointed so "ink" = the white canvas and "on-ink" = dark
   text; the genuinely dark bands (hero, footer, cookie bar) re-declare the dark
   values locally. Component class names are unchanged (every page uses them).
   ========================================================================== */
:root{
  --c-char:#14171A;      /* charcoal: hero, footer */
  --c-char-2:#1C2024;
  --c-char-3:#262B30;
  --c-char-line:#343A40;
  --c-text:#14171A;      /* 17:1 on white */
  --c-text-2:#4A5158;    /* 8.0:1 */
  --c-text-3:#6B737B;    /* 4.8:1 */
  --c-line:#E3E6E9;
  --c-line-2:#CDD2D7;
  --c-plate:#F3F4F5;     /* image plates */
  --c-tint:#F7F8F9;      /* alternating bands */
  --c-red:#9E1B2B;       /* refined ZIGA red (deeper, less saturated), 7.6:1 on white */
  --c-red-deep:#86101F;
  --c-red-soft:#FBEDEE;

  /* re-point main.css tokens: canvas becomes light */
  --ink-950:#FFFFFF; --ink-900:var(--c-tint); --ink-850:#FFFFFF; --ink-800:#F1F3F4; --ink-700:var(--c-line-2); --ink-line:var(--c-line);
  --on-ink:var(--c-text); --on-ink-2:var(--c-text-2); --on-ink-3:var(--c-text-3);
  --paper:var(--c-plate); --paper-2:var(--c-plate); --paper-3:#E9ECEE; --plate:var(--c-plate);
  --on-paper:var(--c-text); --on-paper-2:var(--c-text-2); --on-paper-3:var(--c-text-3);
  --gold:var(--c-red); --gold-bright:var(--c-red); --gold-deep:var(--c-red); --gold-soft:var(--c-line); --gold-on-dark:#FFFFFF;
  --red:var(--c-red); --red-deep:var(--c-red-deep); --red-soft:var(--c-red-soft);
  --line:var(--c-line); --panel:var(--c-plate);
  --sans:"Inter","Helvetica Neue",Helvetica,Arial,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC","Source Han Sans SC",system-ui,sans-serif;
  --display:"Playfair Display","Noto Serif SC","Noto Serif CJK SC","Source Han Serif SC","Songti SC","STSong",Georgia,"Times New Roman",serif;
  --mono:var(--sans);
  --wrap:1280px;
  --radius:2px;
  --header-h:64px;
}
/* dark bands keep dark tokens */
.hero,footer,.cookie,.t-dark{
  --ink-950:var(--c-char); --ink-900:var(--c-char-2); --ink-850:var(--c-char-2); --ink-800:var(--c-char-3); --ink-700:#3A4147; --ink-line:var(--c-char-line);
  --on-ink:#F4F5F6; --on-ink-2:#BCC2C8; --on-ink-3:#8F979F;
  --line:var(--c-char-line); --gold:#E2475A; --gold-bright:#E2475A;
}

/* ---------- base ---------- */
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + 12px);}
body{background:#fff;color:var(--c-text-2);font-family:var(--sans);font-size:16px;line-height:1.65;letter-spacing:0;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
::selection{background:var(--c-red);color:#fff;}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid var(--c-red);outline-offset:3px;}
h1,h2,h3,h4,h5,.hero h1,.pagehead h1,.cat h3,.prod h3,.catblock h3,.block h2,.detailgrid h1,.buybox h1,.brand-name,.fbrand .brand-name,.rz3-head h1,.subhead h2,.usecase h3,.trust h4,.cta-band h2,.brand-sig-en,.hero-tag,.rz3-h2{
  font-family:var(--sans);font-style:normal;
}
/* display serif (restored from the live site) for page titles and section heads */
h1,h2,.hero h1,.pagehead h1,.block h2,.detailgrid h1,.buybox h1,.rz3-head h1,.subhead h2,.cta-band h2,.barh h2,.rz3-h2,.legal-body h1{font-family:var(--display);font-weight:600;letter-spacing:-.005em;}
h1,h2,h3,h4{color:var(--c-text);letter-spacing:-.015em;font-weight:700;}
h1{font-size:clamp(2rem,3.6vw,3rem);line-height:1.1;}
h2{font-size:clamp(1.375rem,2vw,1.75rem);line-height:1.2;}
h3{font-size:1.0625rem;line-height:1.3;font-weight:650;}
:lang(zh) h1,:lang(zh) h2,:lang(zh) h3{letter-spacing:0;}
.wrap{max-width:var(--wrap);padding-left:clamp(20px,4vw,40px);padding-right:clamp(20px,4vw,40px);}
.lede{color:var(--c-text-2);}
.eyebrow,.hero-tag,.fcol h5,.count,.model,.headcount,.rz3-kicker,.rz3-cap,.subhead .en,.rz3-h2 .en{font-family:var(--sans);letter-spacing:.12em;}
.eyebrow{color:var(--c-red);font-size:.75rem;font-weight:700;margin:0 0 18px;}
.typecode,.is-typecode,.mname,.pno,.modelname,.model-name{font-family:var(--sans);font-feature-settings:"tnum" 1;letter-spacing:.01em;}

/* ---------- header: slim, sticky, white ---------- */
.topstrip{display:none;}
.topbar{position:sticky;top:0;z-index:80;background:rgba(255,255,255,.96);border-bottom:1px solid var(--c-line);-webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px);}
.topbar .wrap{height:var(--header-h);gap:36px;}
.brand{gap:12px;}
.brand-mark{width:32px;height:32px;}
.brand-name{font-size:1rem;font-weight:800;letter-spacing:.14em;color:var(--c-text);}
.nav{gap:28px;}
.nav a{font-size:.875rem;font-weight:500;color:var(--c-text-2);padding:21px 0 19px;border-bottom:2px solid transparent;}
.nav a:hover{color:var(--c-text);border-bottom-color:var(--c-line-2);}
.nav a[aria-current="page"]{color:var(--c-text);border-bottom-color:var(--c-red);font-weight:600;}
.lang{color:var(--c-text-3);font-size:.8125rem;}
.lang a{color:var(--c-text-2);}
.lang a:hover{color:var(--c-text);}
.lang .active{color:var(--c-text);font-weight:700;}
.nav-toggle{color:var(--c-text);border-color:var(--c-line-2);background:#fff;}

/* ---------- buttons ---------- */
.btn{border-radius:var(--radius);font-weight:600;letter-spacing:.01em;transition:background-color .15s ease,border-color .15s ease,color .15s ease;}
.btn-primary{background:var(--c-red);border-color:var(--c-red);color:#fff;}
.btn-primary:hover{background:var(--c-red-deep);border-color:var(--c-red-deep);color:#fff;}
.btn-ghost,.btn-outline{background:transparent;color:var(--c-text);border-color:var(--c-line-2);}
.btn-ghost:hover,.btn-outline:hover{border-color:var(--c-text);background:transparent;color:var(--c-text);}
.hero .btn-outline,.hero .btn-ghost{color:#fff;border-color:rgba(255,255,255,.4);}
.hero .btn-outline:hover,.hero .btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.06);}
.btn-white{background:#fff;color:var(--c-text);border-color:#fff;}

/* ---------- hero: full-width charcoal, one headline, one CTA, calm ---------- */
.hero{background:var(--c-char);border-bottom:0;position:relative;overflow:hidden;}
.hero::before{animation:none!important;opacity:.5;background:radial-gradient(60% 80% at 85% 40%,rgba(255,255,255,.06),transparent 70%)!important;}
.hero .wrap{padding-top:clamp(56px,8vw,112px);padding-bottom:clamp(56px,8vw,112px);gap:clamp(32px,5vw,72px);}
.hero h1{color:#fff;font-weight:700;letter-spacing:-.025em;font-size:clamp(2.25rem,4.6vw,3.75rem);line-height:1.06;max-width:16ch;}
.hero h1 em{font-style:normal;color:#fff;}
.hero .lede{color:#BCC2C8;font-size:1.0625rem;max-width:52ch;}
.hero-tag,.hero .eyebrow{color:#E2475A;font-size:.75rem;letter-spacing:.16em;font-weight:700;}
.hero .trustline{color:#8F979F;font-size:.8125rem;}
.hero .trustline b{color:#F4F5F6;}
.hero-stage{animation:none!important;}
.hero-stage .h-ring,.hero-stage .h-ring2,.hero-stage .h-halo{display:none!important;}
.hero-stage .h-slide{animation:none!important;transition:opacity .5s ease;}
.hero-stage .h-slide img{filter:none!important;}

/* ---------- page head: light, quiet ---------- */
.pagehead{background:#fff;color:var(--c-text);border-bottom:1px solid var(--c-line);padding:28px 0 40px;}
.pagehead::after,.pagehead::before{display:none!important;}
.pagehead h1{color:var(--c-text);font-size:clamp(1.875rem,3.4vw,2.75rem);font-weight:700;letter-spacing:-.02em;margin:10px 0 12px;}
.pagehead p{color:var(--c-text-2);max-width:68ch;font-size:1rem;}
.pagehead .sqnote{color:var(--c-text-3);}
.crumb{font-size:.8125rem;color:var(--c-text-3);margin:0;}
.crumb a{color:var(--c-text-3);}
.crumb a:hover{color:var(--c-red);}
.crumb .sep{color:var(--c-line-2);margin:0 8px;}
.crumb .cur{color:var(--c-text-2);}
.headcount{color:var(--c-text-3);}
.headcount b{color:var(--c-text);}

/* ---------- sections ---------- */
.sec-space,.results{background:#fff;}
.results{padding-top:clamp(32px,4vw,56px);padding-bottom:clamp(48px,6vw,88px);}
.barh{border-bottom:1px solid var(--c-line);padding-bottom:14px;margin-bottom:28px;}
.barh h2{color:var(--c-text);}
.barh a{color:var(--c-red);font-weight:600;}
.block{margin-top:clamp(36px,4vw,56px);}
.block h2{color:var(--c-text);padding-bottom:12px;}
.block h2::after{background:var(--c-red);width:32px;height:2px;}
.block h2::before{display:none;}
.block .sub,.block > p,.block .note,.block .pnnote,.note,.sub,.pnnote{color:var(--c-text-3);}
.seccount{color:var(--c-text-3);font-weight:500;}

/* ---------- cards: uniform image box, native size, never stretched ---------- */
.cat,.prod,.catblock,.usecase,.appcard{background:#fff;border:1px solid var(--c-line);border-radius:var(--radius);box-shadow:none;transform:none!important;transition:border-color .15s ease,box-shadow .15s ease;}
.cat:hover,.prod--link:hover,.catblock:hover,.usecase:hover{border-color:var(--c-line-2);box-shadow:0 1px 2px rgba(20,23,26,.04),0 8px 24px rgba(20,23,26,.06);}
.cat .thumb,.prod .thumb,.catblock .cb-thumb,.detailgrid .gallery .main{background:var(--c-plate);border:0;border-bottom:1px solid var(--c-line);}
.catblock .cb-thumb{border:0;}
.cat .thumb img,.prod .thumb img,.catblock .cb-thumb img,.detailgrid .gallery .main img{width:auto!important;height:auto!important;max-width:100%;max-height:100%;object-fit:contain;mix-blend-mode:multiply;transform:none!important;}
.cat h3,.prod h3,.catblock h3{color:var(--c-text);font-weight:650;}
.cat:hover h3,.prod--link:hover h3,.catblock:hover h3{color:var(--c-red);}
.cat p,.prod .note,.catblock p{color:var(--c-text-2);}
.catbtn{color:var(--c-red);font-weight:600;}
.count{color:var(--c-text-3);}
.count b{color:var(--c-text);}
.gchip{background:#fff;border:1px solid var(--c-line);color:var(--c-text-2);border-radius:999px;}
.gchip:hover{border-color:var(--c-text);color:var(--c-text);}
.gchip .gnum{color:var(--c-text-3);}

/* gallery / pick cards: fixed plate row, image centred at native size (never upscaled by CSS) */
.gallery-grid{gap:16px;grid-template-columns:repeat(auto-fill,minmax(184px,1fr));}
.gitem,.gallery-grid .gitem{background:#fff;border:1px solid var(--c-line);border-radius:var(--radius);transform:none!important;box-shadow:none;overflow:hidden;}
.gallery-grid .gitem:hover{border-color:var(--c-line-2);box-shadow:0 8px 24px rgba(20,23,26,.07);}
.gitem .gbtn{--plate-h:200px;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:var(--plate-h) 1fr;justify-content:stretch;align-content:stretch;aspect-ratio:auto;width:100%;height:100%;padding:0;gap:0;background:linear-gradient(var(--c-plate),var(--c-plate)) top/100% var(--plate-h) no-repeat,#fff;cursor:zoom-in;text-align:left;}
.gitem .gbtn > img{place-self:center;width:auto!important;height:auto!important;max-width:calc(100% - 28px);max-height:calc(var(--plate-h) - 28px);object-fit:contain;mix-blend-mode:multiply;}
.gcap,.gitem .gcap{display:block;align-self:stretch;padding:10px 12px 12px;text-align:left;color:var(--c-text-2);font-size:.75rem;line-height:1.35;border-top:1px solid var(--c-line);background:#fff;}
.gitem .gcap.haspn{color:var(--c-text);font-weight:700;font-size:.8125rem;letter-spacing:.01em;font-family:var(--sans);}
.gitem .gcap .gsub{display:block;color:var(--c-text-3);font-weight:400;font-size:.6875rem;margin-top:3px;letter-spacing:0;}
.pnlist{border:1px solid var(--c-line);background:var(--c-tint);border-radius:var(--radius);}
.pnlist summary{color:var(--c-text);font-weight:600;}
.pns li{color:var(--c-text-2);border-color:var(--c-line);background:#fff;}
.backlink{background:#fff;color:var(--c-text-2);border-color:var(--c-line);font-weight:500;}
.backlink:hover{color:var(--c-text);border-color:var(--c-text);}

/* ---------- tables ---------- */
.tablewrap,.tblwrap{border:1px solid var(--c-line);border-radius:var(--radius);background:#fff;overflow-x:auto;-webkit-overflow-scrolling:touch;}
.model-table,.spec-table,table.spec{border-collapse:collapse;font-feature-settings:"tnum" 1;}
.model-table th,.model-table td,.spec-table th,.spec-table td,table.spec th,table.spec td{border-color:var(--c-line)!important;color:var(--c-text);font-size:.875rem;}
.model-table thead th,.spec-table thead th,table.spec thead th{background:var(--c-tint);color:var(--c-text-3);font-size:.75rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;}
.spec-table th,table.spec tbody th{background:var(--c-tint);color:var(--c-text-2);font-weight:600;}
.spec-table td{font-family:var(--sans);}
table.spec tbody tr:nth-child(even) td,table.spec tbody tr:nth-child(even) th{background:#FBFBFC;}
.model-table tbody tr:hover,.model-table tbody tr:target{background:var(--c-red-soft);}
.model-table .mname{color:var(--c-text);font-weight:700;}
.model-table .pending,.spec-table td.pending{color:var(--c-text-3);}
.btn-dwg{background:#fff;color:var(--c-text);border:1px solid var(--c-line-2);font-weight:600;}
.btn-dwg:hover{background:var(--c-text);border-color:var(--c-text);color:#fff;}

/* ---------- product spec pages (rz3) ---------- */
.rz3,.specpage{background:#fff;}
.rz3-head{border-bottom:1px solid var(--c-line);}
.rz3-head h1{color:var(--c-text);font-weight:700;letter-spacing:-.02em;}
.rz3-kicker{color:var(--c-red);font-weight:700;}
.rz3-figs{background:#fff;}
.rz3-fig{background:#fff;border:1px solid var(--c-line);border-radius:var(--radius);}
.rz3-cap{color:var(--c-text-3);border-bottom:1px solid var(--c-line);background:#fff;}
.rz3-cap .num{color:var(--c-red);}
.rz3-cap .zh{color:var(--c-text-2);}
.rz3-plate{background:var(--c-plate);}
.rz3-fig--dim .rz3-plate,.rz3-fig--wide .rz3-plate{background:#fff;}
.rz3-plate img{max-width:100%;height:auto;mix-blend-mode:multiply;}
.rz3-fact{border-color:var(--c-line);}
.rz3-fact .k{color:var(--c-text-3);}
.rz3-fact .v{color:var(--c-text);}
.rz3-h2{color:var(--c-text);}
.rz3-body p,.rz3-lead{color:var(--c-text-2);}
.rz3-tags li{background:var(--c-tint);border:1px solid var(--c-line);color:var(--c-text-2);}
.rz3-note{background:var(--c-tint);border-left:2px solid var(--c-red);color:var(--c-text-2);}
.subhead{border-color:var(--c-line);}
.subhead .idx{color:var(--c-red);}
.subhead h2{color:var(--c-text);}

/* never upscale a bitmap with CSS: images render at most at their intrinsic size */
.dimfig img,.rz3-fig--wide .rz3-plate img,.rz3-plate img,.shotbox img,.gallery .main img{width:auto!important;max-width:100%;height:auto;}
.fbrand .static,.info-box .v,.hero-spec .v,.model-table td,.model-table .ratios{font-family:var(--sans);font-feature-settings:"tnum" 1;}

/* detail pages */
.buybox h1{color:var(--c-text);}
.buybox .desc,.buybox .meta{color:var(--c-text-2);}
.kpi{background:var(--c-tint);border-color:var(--c-line);}
.kpi .k{color:var(--c-text-3);}
.kpi .v{color:var(--c-text);}
.detailgrid .gallery .thumbs .t{background:var(--c-plate);border-color:var(--c-line);}

/* ---------- inquiry / contact ---------- */
.inquire-bar{background:rgba(255,255,255,.97);border-top:1px solid var(--c-line);box-shadow:0 -6px 24px rgba(20,23,26,.06);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);}
.inquire-bar .label{color:var(--c-text-2);}
.inquire-bar .label b{color:var(--c-text);}
.inquire-bar .mail{color:var(--c-text-3);}
.contact-side .info-box,.info-box{background:var(--c-tint);border:1px solid var(--c-line);border-radius:var(--radius);color:var(--c-text-2);}
.info-box h3,.info-box h4,.info-box .v{color:var(--c-text);}
#inquiry-form{background:#fff;}
.grid2 > div > h2[style]{color:var(--c-text)!important;}
.field label{color:var(--c-text);font-weight:600;font-size:.8125rem;}
.field label .req{color:var(--c-red);}
.field input,.field select,.field textarea{background:#fff;color:var(--c-text);border:1px solid var(--c-line-2);border-radius:var(--radius);font:inherit;font-size:.9375rem;}
.field input:hover,.field select:hover,.field textarea:hover{border-color:#9AA2AA;}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--c-text);box-shadow:0 0 0 3px rgba(20,23,26,.08);outline:none;}
.field input::placeholder,.field textarea::placeholder{color:#9AA2AA;}
.field .err{color:var(--c-red);}
.consent,.consent label{color:var(--c-text-2);}
.form-msg{color:var(--c-text);}
.cta-band .inner{background:var(--c-char);color:#BCC2C8;}
.cta-band h2{color:#fff;}
.cta-band p,.cta-band .mail{color:#BCC2C8;}
.legal-body{max-width:72ch;}
.legal-body h2{color:var(--c-text);font-size:1.125rem;margin:32px 0 8px;}
.legal-body p{color:var(--c-text-2);}
.legal-body .legal-lede{font-size:1.0625rem;color:var(--c-text);}
.legal-body a{color:var(--c-red);}
.placeholder-badge{display:none!important;}

/* trust / applications */
.trustband,.trustpanel{background:var(--c-tint);border-color:var(--c-line);}
.trust,.trustpanel .trust{border-color:var(--c-line);}
.trust h4,.trustpanel h4{color:var(--c-text);}
.trust p,.trustpanel p{color:var(--c-text-2);}
.trust .idx,.trustpanel .idx{color:var(--c-red);}
.usecase .cond{color:var(--c-red);}
.usecase p{color:var(--c-text-2);}
.usecase .parts a{color:var(--c-text);border-color:var(--c-line);}
.chip{border-color:var(--c-line);color:var(--c-text-2);background:#fff;}
.chip.active,.pagination .active{background:var(--c-text);border-color:var(--c-text);color:#fff;}
.search input{background:#fff;color:var(--c-text);border-color:var(--c-line-2);}

/* ---------- footer ---------- */
footer{background:var(--c-char);border-top:0;color:#BCC2C8;padding-top:clamp(48px,6vw,72px);}
footer .brand-sig-en{color:#fff;}
.fbrand p,.fbrand .static{color:#8F979F;}
.fcol h5{color:#fff;font-size:.75rem;}
.fcol a{color:#BCC2C8;}
.fcol a:hover{color:#fff;}
.legal{border-top:1px solid var(--c-char-line);}
.legal .links a,.legal .copy{color:#8F979F;}
.legal .links a:hover{color:#fff;}

/* ---------- cookie bar ---------- */
.cookie{background:var(--c-char);color:#BCC2C8;border-top:1px solid var(--c-char-line);}
.cookie p{color:#BCC2C8;}
.cookie p a{color:#fff;}

/* ---------- lightbox ---------- */
.lb{background:rgba(12,14,16,.92);}

/* ---------- motion: restrained ---------- */
@media (prefers-reduced-motion:no-preference){
  .cat,.prod,.catblock,.gitem,.catbtn,.btn{transition:border-color .15s ease,box-shadow .15s ease,background-color .15s ease,color .15s ease;}
}

/* product head: CTA is a button, not a bar */
.rz3-meta{display:flex;flex-direction:column;align-items:flex-start;gap:18px;}
.rz3-meta > *:not(.btn){align-self:stretch;}
.rz3-meta .btn-primary{display:inline-block;width:auto;padding:13px 28px;}

/* ---------- header on small screens: one slim row, menu drops below ---------- */
@media (max-width:820px){
  .topbar .wrap{height:auto;min-height:var(--header-h);flex-wrap:wrap;align-items:center;padding-top:8px;padding-bottom:8px;gap:0 10px;}
  .brand{order:0;margin-right:auto;min-width:0;}
  .topbar .actions{order:1;margin-left:0;gap:10px;}
  .nav-toggle{order:2;width:40px;height:40px;padding:0;align-items:center;justify-content:center;}
  .nav{order:3;width:100%;margin:8px 0 0;border-top:1px solid var(--c-line);}
  .nav a{padding:14px 0;border-bottom:1px solid var(--c-line);font-size:1rem;}
  .nav a[aria-current="page"]{border-bottom-color:var(--c-line);color:var(--c-red);}
  .topbar .btn-primary{padding:8px 12px;font-size:.8125rem;white-space:nowrap;}
}
@media (max-width:400px){
  .brand-name{font-size:.875rem;letter-spacing:.08em;}
  .brand-mark{width:28px;height:28px;}
  .lang{font-size:.75rem;}
}

/* product (rz3) top spacing + calm breadcrumb */
.rz3 > section:first-child{padding-top:28px;}
.rz3 .crumb,.specpage .crumb{text-transform:none;letter-spacing:0;font-size:.8125rem;line-height:1.6;}
@media (max-width:520px){
  .topbar .actions .btn-primary{display:none;}   /* quote CTA stays in hero / inquire bar / nav */
}

/* ---------- mobile ---------- */
@media (max-width:768px){
  :root{--header-h:56px;}
  .topbar .wrap{gap:12px;}
  .gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
  .gitem .gbtn{--plate-h:150px;}
  .hero h1{font-size:clamp(2rem,9vw,2.5rem);}
  .pagehead{padding:20px 0 28px;}
}

/* ==========================================================================
   c2 (QA round 2): self-hosted type, premium spacing, never-crop plates,
   HTML spec tables, tech-data panels, uniform category cards
   ========================================================================== */
@font-face{font-family:"Playfair Display";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/playfair-display-latin-500-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Playfair Display";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/playfair-display-latin-600-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Playfair Display";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/playfair-display-latin-700-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Playfair Display";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/playfair-display-latin-ext-600-normal.woff2") format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Playfair Display";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/playfair-display-latin-ext-700-normal.woff2") format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/inter-latin-400-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/inter-latin-500-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/inter-latin-600-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Inter";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/inter-latin-700-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

/* headings: serif display, calmer weights, generous rhythm */
h1{font-size:clamp(2.125rem,3.8vw,3.25rem);line-height:1.08;}
.hero h1{font-weight:600;letter-spacing:-.01em;font-size:clamp(2.5rem,5vw,4rem);line-height:1.04;max-width:15ch;}
.pagehead{padding:36px 0 52px;}
.pagehead h1{font-size:clamp(2.125rem,3.8vw,3.125rem);font-weight:600;letter-spacing:-.005em;margin:14px 0 16px;}
.rz3-head h1{font-size:clamp(2rem,3.4vw,2.875rem);font-weight:600;letter-spacing:-.005em;line-height:1.1;}
.block h2,.barh h2,.rz3-h2,.subhead h2{font-size:clamp(1.5rem,2.2vw,2rem);font-weight:600;}
.barh{padding-bottom:18px;margin-bottom:36px;}
:lang(zh) h1,:lang(zh) h2{font-weight:700;letter-spacing:.01em;}
.eyebrow,.rz3-kicker{letter-spacing:.18em;font-size:.6875rem;}
.results{padding-top:clamp(40px,5vw,72px);padding-bottom:clamp(64px,8vw,112px);}

/* inquiry bar: sticky at the end of the product, never covers content */
body.has-inquire-bar{padding-bottom:0!important;}
.inquire-bar{position:sticky!important;bottom:0;left:auto;right:auto;margin-top:48px;}

/* ---------- product plates: contain, centred, padded; never crop ---------- */
.rz3-row{gap:clamp(20px,2.4vw,32px);align-items:stretch;}
.rz3-fig{overflow:visible;}
.rz3-fig--photo,.rz3-fig--dim{height:100%;}
.rz3-plate{position:relative;display:flex;align-items:center;justify-content:center;flex:1;min-height:360px;padding:clamp(20px,3vw,40px)!important;background:#fff!important;overflow:visible;}
.rz3-fig--photo .rz3-plate,.rz3-fig--dim .rz3-plate{aspect-ratio:auto;height:auto;}
.rz3-plate img,.rz3-fig--dim .rz3-plate img,.rz3-fig--wide .rz3-plate img{display:block;width:auto!important;height:auto!important;max-width:100%!important;max-height:440px!important;object-fit:contain!important;object-position:center;margin:auto;mix-blend-mode:multiply;}
.rz3-cap{padding:12px 16px;margin:0;}
@media (max-width:820px){
  .rz3-plate{min-height:240px;padding:20px!important;}
  .rz3-plate img,.rz3-fig--dim .rz3-plate img{max-height:360px!important;}
}

/* ---------- technical data: HTML spec table ---------- */
.rz3-fig--table{margin-top:clamp(36px,4vw,56px);padding-top:0;border-top:0;}
.tdata{border:1px solid var(--c-line);border-top:0;background:#fff;overflow-x:auto;-webkit-overflow-scrolling:touch;}
.tdata table{width:100%;border-collapse:collapse;font-feature-settings:"tnum" 1,"lnum" 1;font-size:.875rem;line-height:1.35;}
.tdata th,.tdata td{padding:12px 14px;border-bottom:1px solid var(--c-line);text-align:center;vertical-align:middle;white-space:nowrap;color:var(--c-text);}
.tdata thead th{background:#F6F6F4;color:var(--c-text);font-weight:600;font-size:.75rem;letter-spacing:.02em;white-space:normal;min-width:84px;border-bottom:2px solid var(--c-text);}
.tdata thead th .u{display:block;margin-top:3px;color:var(--c-text-3);font-weight:500;font-size:.6875rem;letter-spacing:.04em;text-transform:none;}
.tdata tbody th{text-align:left;font-weight:600;background:#FBFBFA;white-space:normal;min-width:180px;}
.tdata tbody th .u{display:inline;margin-left:6px;color:var(--c-text-3);font-weight:500;font-size:.75rem;}
.tdata tbody td:first-child{font-weight:600;}
.tdata tbody tr:nth-child(even) td,.tdata tbody tr:nth-child(even) th{background:#FAFAF9;}
.tdata tbody tr:hover td,.tdata tbody tr:hover th{background:var(--c-red-soft);}
.tdata tbody tr:last-child th,.tdata tbody tr:last-child td{border-bottom:0;}
.tdata-note{margin:10px 2px 0;color:var(--c-text-3);font-size:.75rem;line-height:1.5;}

/* ---------- technical data: image panel + click to enlarge ---------- */
.tpanel{border:1px solid var(--c-line);border-top:0;background:#fff;padding:clamp(16px,2.4vw,28px);text-align:center;}
.tpanel a.tzoom{display:inline-block;max-width:100%;cursor:zoom-in;line-height:0;border:1px solid var(--c-line);background:#fff;}
.tpanel a.tzoom img{display:block;width:auto!important;height:auto!important;max-width:100%!important;max-height:none!important;mix-blend-mode:normal;}
.tpanel .thint{display:block;margin-top:12px;color:var(--c-text-3);font-size:.75rem;letter-spacing:.04em;line-height:1.4;}
.tpanel .thint::before{content:"";display:inline-block;width:10px;height:10px;margin-right:7px;border:1.5px solid currentColor;border-radius:50%;vertical-align:-1px;}
dialog.tlb{max-width:96vw;max-height:94vh;padding:0;border:0;background:transparent;overflow:auto;}
dialog.tlb::backdrop{background:rgba(12,14,16,.86);}
dialog.tlb img{display:block;max-width:none;width:auto;height:auto;background:#fff;}
dialog.tlb .tlb-x{position:fixed;top:14px;right:18px;width:40px;height:40px;border:0;border-radius:50%;background:#fff;color:var(--c-text);font-size:22px;line-height:40px;cursor:pointer;}

/* ---------- category grids: equal cards, one plate, one scale ---------- */
.grid4,.grid3{align-items:stretch;}
.prod,.cat{height:100%;}
.prod .thumb,.cat .thumb{height:auto!important;aspect-ratio:4/3;padding:22px!important;background:#fff!important;border-bottom:1px solid var(--c-line);overflow:hidden;}
.prod .thumb img,.cat .thumb img{width:auto!important;height:auto!important;max-width:100%!important;max-height:100%!important;object-fit:contain!important;object-position:center;mix-blend-mode:multiply;transform:none!important;}
.gitem .gbtn{background:#fff!important;}
.prod .body,.cat .body{padding:18px 20px 20px;}
.prod h3{font-family:var(--sans);font-size:.9375rem;font-weight:600;line-height:1.4;margin:0 0 16px;min-height:2.8em;}
.prod .body .note{display:none;}
.prod .catbtn,.cat .catbtn{margin-top:auto;}
.prod--dup{display:none!important;}
.catblock .cb-thumb{background:#fff!important;border:1px solid var(--c-line)!important;}
.catblock .cb-thumb img{object-fit:contain;padding:12px;mix-blend-mode:multiply;}

/* hydraulics data pages: product shot plate */
.detailgrid .gallery .main{background:#fff!important;padding:clamp(20px,3vw,40px);display:flex;align-items:center;justify-content:center;min-height:360px;}
.detailgrid .gallery .main img{max-height:440px!important;object-fit:contain;}

/* travel drives: facts always readable, ratio lists wrap */
.rz3-fact{display:flex;gap:16px;padding:12px 0;border-bottom:1px solid var(--c-line);}
.rz3-fact .k{color:var(--c-text-3)!important;opacity:1!important;visibility:visible!important;}
.rz3-fact .v{color:var(--c-text)!important;opacity:1!important;visibility:visible!important;}
.model-table td.ratios,.model-table .ratios{white-space:normal!important;word-break:normal;overflow-wrap:anywhere;min-width:160px;max-width:320px;line-height:1.5;}

/* c2: hydraulics data pages + panels outside rz3 captions */
.tdata--hyd,.spectable--panel .tpanel,.main--panel .tpanel{border-top:1px solid var(--c-line);}
.tdata--hyd{margin-top:18px;}
.tdata--hyd tbody td:first-child{font-weight:400;}
.tdata--hyd thead th{white-space:nowrap;}
.spectable--panel figcaption{margin-top:10px;}
.detailgrid .gallery .main.main--panel{padding:0;border:0;background:transparent;min-height:0;}
.main--panel .tpanel{width:100%;}
.c2-feats{margin-bottom:8px;}
.featlist{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:0 40px;}
.featlist li{position:relative;padding:12px 0 12px 22px;border-bottom:1px solid var(--c-line);color:var(--c-text-2);line-height:1.55;font-size:.9375rem;}
.featlist li::before{content:"";position:absolute;left:0;top:21px;width:10px;height:2px;background:var(--c-red);}
/* c2: travel-drive key figures were paper-coloured (dark-theme leftover) */
.rz3-spec{border-top-color:var(--c-line);}
.rz3-spec dt{color:var(--c-text-3);}
.rz3-spec dd{color:var(--c-text);font-family:var(--display);font-variant-numeric:lining-nums;}

/* =====================================================================
   c3 · cinematic hero (ambient site film + real catalogue product cutouts)
   transform / opacity only; poster-first; reduced-motion = static poster
   ===================================================================== */
.hero.hx{background:#0E1013;min-height:min(78vh,720px);display:flex;align-items:center;isolation:isolate;}
.hero.hx::before{display:none!important;}
.hx-bg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;}
.hx-bg picture,.hx-poster,.hx-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.hx-poster{transform:scale(1.06);animation:hxKen 26s ease-in-out infinite alternate;}
.hx-video{opacity:0;transition:opacity 1.6s ease;transform:scale(1.02);}
.hx-video.is-on{opacity:1;}
.hx-shade{position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(10,11,13,.94) 0%,rgba(10,11,13,.86) 34%,rgba(10,11,13,.55) 58%,rgba(10,11,13,.38) 100%),
    linear-gradient(180deg,rgba(10,11,13,.35) 0%,rgba(10,11,13,0) 30%,rgba(10,11,13,.0) 70%,rgba(10,11,13,.75) 100%);}
@keyframes hxKen{from{transform:scale(1.06) translate3d(0,0,0)}to{transform:scale(1.14) translate3d(-1.5%,-1%,0)}}
.hero.hx .wrap{position:relative;z-index:1;width:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;
  gap:clamp(24px,4vw,64px);padding-top:clamp(48px,6vw,88px);padding-bottom:clamp(48px,6vw,88px);}
.hero.hx h1{text-shadow:0 2px 24px rgba(0,0,0,.35);}
.hero.hx .lede{color:#C9CED3;}
.hero.hx .hero-tag{color:#E2475A;}
.hero.hx .eyebrow{color:rgba(255,255,255,.72);}

/* entrance: staggered rise */
.hero.hx .hero-tag,.hero.hx .eyebrow,.hero.hx .lede,.hero.hx .cta-row,.hero.hx .trustline{animation:hxUp .9s cubic-bezier(.2,.7,.2,1) both;}
.hero.hx .hero-tag{animation-delay:.05s}.hero.hx .eyebrow{animation-delay:.15s}
.hero.hx .lede{animation-delay:.55s}.hero.hx .cta-row{animation-delay:.68s}.hero.hx .trustline{animation-delay:.8s}
.hero.hx h1 .h-line{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em;}
.hero.hx h1 .h-line>span{display:block;animation:hxLine 1.05s cubic-bezier(.2,.7,.2,1) both;}
.hero.hx h1 .h-line:nth-child(1)>span{animation-delay:.22s}
.hero.hx h1 .h-line:nth-child(2)>span{animation-delay:.32s}
.hero.hx h1 .h-line:nth-child(3)>span{animation-delay:.42s}
@keyframes hxUp{from{opacity:0;transform:translate3d(0,18px,0)}to{opacity:1;transform:none}}
@keyframes hxLine{from{transform:translate3d(0,105%,0)}to{transform:none}}

/* product stage */
.hx-stage{position:relative;height:clamp(380px,40vw,540px);outline:none;animation:hxUp 1.1s cubic-bezier(.2,.7,.2,1) .3s both;}
.hx-glow{position:absolute;left:50%;top:44%;width:86%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(closest-side,rgba(158,27,43,.42),rgba(158,27,43,.12) 55%,transparent 72%);
  animation:hxPulse 7s ease-in-out infinite;}
@keyframes hxPulse{0%,100%{opacity:.75;transform:translate(-50%,-50%) scale(1)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.06)}}
.hx-floor{position:absolute;left:18%;right:18%;bottom:17%;height:34px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(0,0,0,.65),transparent);filter:blur(6px);}
.hx-sweep{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:3;
  -webkit-mask:radial-gradient(closest-side,#000 55%,transparent);mask:radial-gradient(closest-side,#000 55%,transparent);}
.hx-sweep::after{content:"";position:absolute;top:-20%;bottom:-20%;left:0;width:34%;
  background:linear-gradient(100deg,transparent 0%,rgba(226,71,90,.0) 20%,rgba(255,214,220,.16) 50%,rgba(226,71,90,.0) 80%,transparent 100%);
  transform:translate3d(-120%,0,0) skewX(-14deg);}
.hx-stage.sweep .hx-sweep::after{animation:hxSweep 1.6s cubic-bezier(.4,0,.2,1) both;}
@keyframes hxSweep{to{transform:translate3d(420%,0,0) skewX(-14deg)}}
.hx-slide{position:absolute;inset:0 0 64px 0;margin:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transition:opacity .9s ease,visibility 0s linear .9s;z-index:2;}
.hx-slide.on{opacity:1;visibility:visible;transition:opacity .9s ease,visibility 0s;}
.hx-media{flex:1;min-height:0;width:100%;display:flex;align-items:center;justify-content:center;
  transform:translate3d(var(--px,0),var(--py,0),0);transition:transform .6s cubic-bezier(.2,.7,.2,1);}
.hx-media img{max-width:min(82%,560px);max-height:100%;width:auto;height:auto;object-fit:contain;
  filter:drop-shadow(0 26px 34px rgba(0,0,0,.55));transform:translate3d(36px,0,0) scale(.96);opacity:0;
  transition:transform 1.1s cubic-bezier(.2,.7,.2,1),opacity .9s ease;}
.hx-slide.on .hx-media img{transform:none;opacity:1;}
.hx-cap{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;margin-top:8px;
  transform:translate3d(0,10px,0);opacity:0;transition:transform .8s cubic-bezier(.2,.7,.2,1) .25s,opacity .8s ease .25s;}
.hx-slide.on .hx-cap{transform:none;opacity:1;}
.hx-cat{font-size:.6875rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:#E2475A;}
.hx-name{font-family:var(--display);font-size:clamp(1.05rem,1.5vw,1.3rem);color:#fff;font-weight:600;}
.hx-link{font-size:.8125rem;font-weight:600;color:#D7DBDF;border-bottom:1px solid rgba(255,255,255,.3);padding-bottom:2px;margin-top:2px;}
.hx-link:hover{color:#fff;border-color:#E2475A;}
.hx-ctl{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;gap:18px;z-index:4;}
.hx-num{margin:0;font-size:.75rem;letter-spacing:.14em;color:rgba(255,255,255,.55);font-variant-numeric:tabular-nums;}
.hx-num b{color:#fff;font-weight:700;}
.hx-ticks{display:flex;gap:8px;}
.hx-ticks button{appearance:none;border:0;padding:10px 0;background:none;cursor:pointer;width:44px;}
.hx-ticks button i{display:block;height:2px;background:rgba(255,255,255,.2);position:relative;overflow:hidden;}
.hx-ticks button i::after{content:"";position:absolute;inset:0;background:#E2475A;transform:scaleX(0);transform-origin:left;}
.hx-ticks button.on i::after{animation:hxProg var(--dur,5600ms) linear both;}
.hx-stage.paused .hx-ticks button.on i::after{animation-play-state:paused;}
.hx-ticks button.done i::after{transform:scaleX(1);}
@keyframes hxProg{to{transform:scaleX(1)}}
.hx-ticks button:focus-visible{outline:2px solid #E2475A;outline-offset:2px;}

@media (max-width:900px){
  .hero.hx{min-height:0;}
  .hero.hx .wrap{grid-template-columns:1fr;gap:12px;}
  .hx-stage{height:340px;order:0;}
}
@media (max-width:768px){
  .hx-video{display:none!important;}
  .hx-shade{background:linear-gradient(180deg,rgba(10,11,13,.82) 0%,rgba(10,11,13,.78) 55%,rgba(10,11,13,.92) 100%);}
  .hx-stage{height:300px;}
  .hx-media img{max-width:76%;}
}
@media (prefers-reduced-motion:reduce){
  .hx-poster,.hx-glow,.hero.hx *{animation:none!important;}
  .hx-video{display:none!important;}
  .hx-slide,.hx-media,.hx-media img,.hx-cap{transition:none!important;}
}

/* c3 · scroll reveal + hover lift (only once JS has marked the page) */
.rv-on .rv{opacity:0;transform:translate3d(0,22px,0);transition:opacity .8s ease,transform .9s cubic-bezier(.2,.7,.2,1);}
.rv-on .rv.in{opacity:1;transform:none;}
.catblock,.prod,.cat{transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease,border-color .35s ease;}
@media (hover:hover){
  .catblock:hover,.prod:hover,.cat:hover{transform:translate3d(0,-4px,0);box-shadow:0 18px 36px -18px rgba(20,23,26,.28);}
}
@media (prefers-reduced-motion:reduce){.rv-on .rv{opacity:1!important;transform:none!important;transition:none!important;}
  .catblock:hover,.prod:hover,.cat:hover{transform:none;}}

/* c3 · gallery viewer: prev/next on the image, no zoom buttons */
.gpane-media{overflow:hidden;}
.gpane-nav{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;border:1px solid var(--c-line,#E3E5E8);
  background:rgba(255,255,255,.92);color:var(--c-text,#14171A);font-size:24px;line-height:36px;text-align:center;cursor:pointer;padding:0;z-index:2;}
.gpane-nav:hover{border-color:var(--c-red,#9E1B2B);color:var(--c-red,#9E1B2B);}
.gpane-prev{left:8px}.gpane-next{right:8px}
.gpane-nav[hidden]{display:none;}
.gpane-close{margin-left:auto;}

/* c3 · model-table drawings: whole drawing, contain-fit to the visible table width */
.dwgrow>td{padding:0!important;background:#F6F7F8;}
.dwgfig-inline{margin:0;padding:16px;box-sizing:border-box;position:sticky;left:0;width:var(--dw,100%);max-width:100%;}
.dwgfig-inline img{display:block;margin:0 auto;width:auto;height:auto;max-width:100%;max-height:78vh;object-fit:contain;background:#fff;border:1px solid var(--c-line,#E3E5E8);border-radius:4px;padding:10px;box-sizing:border-box;}
.dwgfig-inline figcaption{font-size:.8125rem;color:var(--c-text-3,#6B7280);text-align:center;margin-top:8px;}
/* c3: travel-drive notes */
.td-notes{margin:22px 0 0;padding:18px 22px;border-left:3px solid #9E1B2B;background:#f6f5f3;max-width:920px}
.td-notes h3{font-family:'Playfair Display',Georgia,serif;font-size:17px;margin:0 0 8px}
.td-notes ol{margin:0;padding-left:20px;font-size:14px;line-height:1.65;color:#3a3a3a}
.td-notes li+li{margin-top:4px}

/* ---------- c4: product head — CTA right-aligned on the H1 row (desktop), under the lead (mobile) ---------- */
.rz3-head{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:clamp(24px,4vw,56px);row-gap:0;align-items:start;}
.rz3-title,.rz3-meta{display:contents;}
.rz3-head .rz3-kicker{grid-column:1;grid-row:1;}
.rz3-head h1{grid-column:1;grid-row:2;}
.rz3-head .rz3-lead{grid-column:1;grid-row:3;}
.rz3-head .rz3-meta > .btn-primary{grid-column:2;grid-row:2;align-self:center;justify-self:end;width:auto;margin:0;white-space:nowrap;}
.rz3-head .rz3-facts{grid-column:1 / -1;grid-row:4;margin:24px 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));column-gap:32px;}
@media (max-width:820px){
  .rz3-head{grid-template-columns:minmax(0,1fr);}
  .rz3-head .rz3-meta > .btn-primary{grid-column:1;grid-row:4;justify-self:start;align-self:start;margin-top:20px;}
  .rz3-head .rz3-facts{grid-row:5;grid-template-columns:1fr;}
}
/* c4: EN pages — Chinese-only BOM / parts lists replaced by a note */
.bom-note .note{font-size:15px;line-height:1.6;max-width:68ch;margin-top:8px;color:var(--c-text-2);}
.bom-note .note a{text-decoration:underline;text-underline-offset:3px;}
/* c4: product photos that could not be cut out cleanly -> full-bleed in a rounded panel (no white frame) */
.rz3-plate.fb{padding:0!important;min-height:0;width:100%;max-width:none!important;border-radius:14px;overflow:hidden!important;background:#e9ecef!important;}
.rz3-plate.fb img{width:100%!important;max-width:100%!important;height:clamp(300px,48vw,640px)!important;max-height:none!important;object-fit:cover!important;mix-blend-mode:normal!important;border-radius:14px;}
.prod .thumb.fb,.cat .thumb.fb{padding:0!important;}
.prod .thumb.fb img,.cat .thumb.fb img{width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;object-fit:cover!important;mix-blend-mode:normal!important;}

/* c6: model pages - the lone back link and the first section follow the page header (no ~150px white gap) */
.results:has(> .wrap > .backlink:first-child){padding-top:24px;}
.results > .wrap > .backlink:first-child{margin:0;}
.results > .wrap > .backlink:first-child + .block{margin-top:20px;padding-top:28px;}

.results > .wrap > .backlink:first-child + :not(.block){margin-top:28px;}