@charset "utf-8";
/* ==========================================================================
   FENGMING HUANYU — international site
   Design system: Swiss technical / editorial.  Archivo + IBM Plex Mono.
   Rules: no rounded corners, no shadows, no gradients-as-decoration,
   hairline rules do the structural work, one signal colour.
   ========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------- */
@font-face{
  font-family:'Archivo';
  src:url('../fonts/archivo-var-latin.woff2') format('woff2-variations');
  font-weight:100 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Plex Mono';
  src:url('../fonts/plex-mono-400-latin.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Plex Mono';
  src:url('../fonts/plex-mono-500-latin.woff2') format('woff2');
  font-weight:500; font-style:normal; font-display:swap;
}

:root{
  --ink:#121417;
  --ink-2:#191C20;
  --ink-3:#24282D;
  --paper:#F1EFE9;
  --paper-2:#E7E4DC;
  --white:#FFFFFF;
  --steel:#6F757C;
  --steel-2:#9AA0A6;
  --accent:#E8B22B;
  --navy:#16324F;

  --hair:rgba(18,20,23,.15);
  --hair-2:rgba(18,20,23,.28);
  --hair-inv:rgba(241,239,233,.16);

  --f-sans:'Archivo','Helvetica Neue',Helvetica,Arial,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;
  --f-mono:'Plex Mono',ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,'PingFang SC','Microsoft YaHei',monospace;

  --gut:clamp(20px,4vw,64px);          /* outer margin */
  --col:clamp(14px,1.5vw,24px);        /* column gutter */
  --max:1560px;

  --sec-y:clamp(64px,8.5vw,140px);
  --head-h:66px;
}

/* ---------- 2. Reset ----------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-sans);
  font-size:16.5px;
  line-height:1.6;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-variant-numeric:tabular-nums;
  overflow-x:hidden;
}
img{max-width:100%;display:block;border:0}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4,h5,p,ul,ol,figure,dl,dd{margin:0}
ul,ol{list-style:none;padding:0}
hr{border:0;border-top:1px solid var(--hair);margin:0}
::selection{background:var(--accent);color:var(--ink)}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ---------- 3. Layout ---------------------------------------------------- */
.shell{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.grid{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:var(--col);
}
.section{padding-block:var(--sec-y);position:relative}
.section--tight{padding-block:clamp(44px,5.5vw,86px)}
.section--ink{background:var(--ink);color:var(--paper)}
.section--white{background:var(--white)}
.section--paper2{background:var(--paper-2)}
.section--top{border-top:1px solid var(--hair)}
.section--bottom{border-bottom:1px solid var(--hair)}

/* ---------- 4. Type ------------------------------------------------------ */
.mono{
  font-family:var(--f-mono);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:500;
}
.mono--lg{font-size:12.5px;letter-spacing:.1em}
.mono--dim{color:var(--steel)}

.d1{
  font-size:clamp(2.4rem,5.9vw,5.3rem);
  line-height:.98;
  letter-spacing:-.035em;
  font-weight:600;
}
.d2{
  font-size:clamp(1.85rem,3.5vw,3.15rem);
  line-height:1.04;
  letter-spacing:-.025em;
  font-weight:600;
}
.d3{
  font-size:clamp(1.15rem,1.55vw,1.5rem);
  line-height:1.2;
  letter-spacing:-.012em;
  font-weight:600;
}
.d4{font-size:1.0625rem;line-height:1.35;letter-spacing:-.005em;font-weight:600}
.lead{
  font-size:clamp(1.02rem,1.28vw,1.2rem);
  line-height:1.58;
  color:var(--ink);
  font-weight:400;
}
.muted{color:var(--steel)}
.section--ink .lead,.section--ink .muted{color:rgba(241,239,233,.72)}
.small{font-size:.875rem;line-height:1.62}
.tiny{font-size:.8125rem;line-height:1.6}
.accent{color:var(--accent)}
.nowrap{white-space:nowrap}

/* ---------- 5. Rules & markers ------------------------------------------ */
.rule{height:1px;background:var(--hair);border:0}
.section--ink .rule{background:var(--hair-inv)}
.tick{width:26px;height:3px;background:var(--accent);display:block}

/* ---------- 6. Header --------------------------------------------------- */
.masthead{
  position:sticky;top:0;z-index:60;
  background:var(--paper);
  border-bottom:1px solid var(--hair);
  transition:background .25s ease;
}
.masthead.is-stuck{background:rgba(241,239,233,.93);backdrop-filter:saturate(140%) blur(10px)}
.masthead__in{
  height:var(--head-h);
  display:flex;align-items:center;gap:clamp(16px,3vw,48px);
}
.brand{display:flex;align-items:center;flex:0 1 auto;min-width:0}
.brand img{max-height:30px;width:auto;max-width:min(66vw,220px)}
.brand__tag{
  display:none;
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--steel);line-height:1.35;
  padding-left:12px;margin-left:12px;border-left:1px solid var(--hair);
  white-space:nowrap;
}

.nav{margin-left:auto}
.nav__list{display:flex;align-items:center;gap:clamp(14px,1.7vw,30px)}
.nav__link{
  position:relative;display:block;padding-block:22px;
  font-family:var(--f-mono);font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink);
}
.nav__link::after{
  content:"";position:absolute;left:0;right:0;bottom:16px;height:2px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform .28s cubic-bezier(.22,1,.36,1);
}
.nav__link:hover::after,.nav__link[aria-current="page"]::after{transform:scaleX(1)}
.nav__link[aria-current="page"]{color:var(--ink);font-weight:500}

.head-actions{display:flex;align-items:center;gap:14px;margin-left:auto;flex:0 0 auto}
.lang{display:flex;align-items:center;border:1px solid var(--hair-2);height:30px}
.lang a,.lang span{
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  padding:0 9px;height:100%;display:flex;align-items:center;color:var(--steel);
}
.lang a:hover{color:var(--ink)}
.lang .is-on{background:var(--ink);color:var(--paper)}

.btn{
  display:inline-flex;align-items:center;gap:10px;
  border:1px solid var(--ink);
  padding:11px 16px;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  background:var(--ink);color:var(--paper);
  cursor:pointer;white-space:nowrap;
  transition:background .22s ease,color .22s ease,border-color .22s ease;
}
.btn:hover{background:var(--accent);border-color:var(--accent);color:var(--ink)}
.btn__arw{transition:transform .28s cubic-bezier(.22,1,.36,1)}
.btn:hover .btn__arw{transform:translateX(4px)}
.btn--ghost{background:transparent;color:var(--ink)}
.btn--ghost:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.section--ink .btn{background:var(--accent);border-color:var(--accent);color:var(--ink)}
.section--ink .btn:hover{background:var(--paper);border-color:var(--paper)}
.section--ink .btn--ghost{background:transparent;color:var(--paper);border-color:var(--hair-inv)}
.section--ink .btn--ghost:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}

.burger{
  display:none;width:42px;height:42px;border:1px solid var(--hair-2);
  background:transparent;cursor:pointer;position:relative;
}
.burger i{position:absolute;left:11px;width:20px;height:1.5px;background:var(--ink);transition:transform .3s ease,opacity .2s ease}
.burger i:nth-child(1){top:16px}
.burger i:nth-child(2){top:20.5px}
.burger i:nth-child(3){top:25px}
.burger.is-open i:nth-child(1){transform:translateY(4.5px) rotate(45deg)}
.burger.is-open i:nth-child(2){opacity:0}
.burger.is-open i:nth-child(3){transform:translateY(-4.5px) rotate(-45deg)}

/* ---------- 7. Mobile drawer ------------------------------------------- */
.drawer{
  position:fixed;inset:0;z-index:70;background:var(--ink);color:var(--paper);
  display:none;overflow-x:hidden;overflow-y:auto;
  transform:translateY(-101%);transition:transform .42s cubic-bezier(.22,1,.36,1);
  flex-direction:column;
}
.drawer.is-open{display:flex;transform:none}
.drawer .shell{min-width:0;max-width:100%}
.drawer__top{display:flex;align-items:center;justify-content:space-between;height:var(--head-h);border-bottom:1px solid var(--hair-inv);gap:16px}
.drawer__close{width:42px;height:42px;flex:0 0 42px;border:1px solid var(--hair-inv);background:transparent;color:var(--paper);cursor:pointer;font-size:19px;line-height:1}
.drawer__nav{padding:8px 0 0}
.drawer__nav a{
  display:flex;align-items:baseline;gap:14px;padding:17px 0;
  border-bottom:1px solid var(--hair-inv);font-size:clamp(1.35rem,5.4vw,1.5rem);letter-spacing:-.02em;font-weight:600;
  min-width:0;overflow-wrap:anywhere;
}
.drawer__nav a span{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;color:var(--accent);font-weight:500}
.drawer__foot{padding:26px 0 40px;margin-top:auto}

/* ---------- 8. Section heading ----------------------------------------- */
.shead{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col);align-items:end;margin-bottom:clamp(34px,4vw,60px)}
.shead__idx{grid-column:span 2;font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;color:var(--steel);display:flex;gap:10px;align-items:baseline;padding-bottom:.55em}
.shead__idx b{color:var(--accent);font-weight:500}
.shead__txt{grid-column:span 7;padding-right:clamp(0px,2.5vw,44px)}
.shead__txt .d2{margin-top:14px}
.shead__side{grid-column:span 3;padding-bottom:.6em}
.shead__side .small{color:var(--steel)}
.section--ink .shead__idx,.section--ink .shead__side .small{color:rgba(241,239,233,.6)}
.shead--wide .shead__txt{grid-column:span 9}

/* ---------- 9. Hero ----------------------------------------------------- */
.hero{position:relative;border-bottom:1px solid var(--hair);overflow:hidden}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(to right,var(--hair) 1px,transparent 1px);
  background-size:calc(100%/6) 100%;
  opacity:.5;
}
.hero__in{
  position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:var(--col);
  padding-top:clamp(48px,6.5vw,104px);
  padding-bottom:clamp(30px,3.5vw,52px);
  min-height:min(88vh,860px);
  align-content:space-between;
}
.hero__main{grid-column:span 7;align-self:center;padding-bottom:clamp(20px,4vw,54px)}
.hero__eyebrow{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-bottom:clamp(20px,2.6vw,34px)}
.hero__eyebrow .mono{color:var(--steel)}
.hero__eyebrow b{color:var(--ink);font-weight:500}
/* the <br> tags in the markup control the rag, so don't also clamp the
   measure — 15ch would re-wrap the line breaks the author placed */
.hero h1{max-width:none}
.hero h1 em{
  font-style:normal;background:var(--accent);color:var(--ink);
  padding:.02em .16em .06em;margin-right:-.16em;box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
}
.hero__lead{margin-top:clamp(22px,2.4vw,32px);max-width:52ch}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(28px,3vw,40px)}
.hero__meta{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:clamp(26px,3vw,40px)}

.hero__plate{grid-column:8 / span 5;align-self:center;padding-bottom:clamp(20px,4vw,54px)}
.plate{background:var(--white);border:1px solid var(--hair-2);display:flex;flex-direction:column}
.plate__img{position:relative;aspect-ratio:4/3;overflow:hidden;background:#fff;padding:4.5%}
.plate__img img{width:100%;height:100%;object-fit:contain;transition:transform .6s cubic-bezier(.22,1,.36,1)}
.plate:hover .plate__img img{transform:scale(1.035)}
.plate__cap{display:flex;justify-content:space-between;gap:12px;padding:11px 14px;border-top:1px solid var(--hair-2)}
.plate__cap .mono{color:var(--steel)}
.specs{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--hair-2)}
.specs div{padding:12px 14px;border-right:1px solid var(--hair-2)}
.specs div:last-child{border-right:0}
.specs dt{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--steel);margin-bottom:5px}
.specs dd{font-size:.95rem;font-weight:600;letter-spacing:-.01em;line-height:1.25}

/* ---------- 10. Figure band -------------------------------------------- */
.figures{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--hair);position:relative}
.figures > div{padding:26px clamp(14px,1.6vw,26px) 24px;border-right:1px solid var(--hair)}
.figures > div:last-child{border-right:0}
.figures dt{font-family:var(--f-mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--steel);margin-bottom:14px}
.figures dd{font-size:clamp(1.7rem,3.1vw,2.65rem);line-height:1;letter-spacing:-.035em;font-weight:600}
.figures dd sup{font-size:.42em;vertical-align:super;letter-spacing:0;color:var(--accent);font-weight:500;margin-left:2px}
.figures .fig-note{font-size:.8125rem;color:var(--steel);margin-top:9px;line-height:1.45}

/* ---------- 11. Editorial columns --------------------------------------- */
.cols{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col)}
.cols > * + *{border-left:1px solid var(--hair);padding-left:clamp(18px,2vw,32px)}
.col-3{grid-column:span 3}
.col-4{grid-column:span 4}
.col-5{grid-column:span 5}
.col-6{grid-column:span 6}
.col-7{grid-column:span 7}
.col-8{grid-column:span 8}
.col-9{grid-column:span 9}
.col-start-5{grid-column:5 / span 8}

.numrow{display:flex;gap:12px;align-items:baseline;margin-bottom:14px}
.numrow i{font-family:var(--f-mono);font-style:normal;font-size:11px;letter-spacing:.12em;color:var(--accent);font-weight:500}
.numrow h3{font-size:1.02rem;font-weight:600;letter-spacing:-.005em;line-height:1.3}

/* ---------- 12. Ledger table (product families) ------------------------ */
.ledger{width:100%;border-collapse:collapse;text-align:left}
.ledger thead th{
  font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--steel);font-weight:500;padding:0 16px 12px 0;border-bottom:1px solid var(--ink);
}
.ledger tbody tr{border-bottom:1px solid var(--hair);transition:background .2s ease}
.ledger tbody tr:hover{background:var(--ink)}
.ledger tbody tr:hover td,.ledger tbody tr:hover th{color:var(--paper)}
.ledger tbody tr:hover .led__no,.ledger tbody tr:hover .led__arw{color:var(--accent)}
.ledger td{padding:20px 16px 20px 0;vertical-align:middle}
.ledger .led__no{font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;color:var(--accent);width:44px;font-weight:500}
.ledger .led__name{font-size:1.06rem;font-weight:600;letter-spacing:-.012em;line-height:1.25;width:26%}
.ledger .led__desc{color:var(--steel);font-size:.9rem;line-height:1.5;padding-right:24px}
.ledger tr:hover .led__desc{color:rgba(241,239,233,.74)}
.ledger .led__duty{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.02em;color:var(--steel);width:20%}
.ledger tr:hover .led__duty{color:rgba(241,239,233,.74)}
.ledger .led__arw{width:40px;text-align:right;color:var(--steel);font-size:14px;transition:transform .28s ease}
.ledger tr:hover .led__arw{transform:translateX(4px)}
.section--ink .ledger thead th{color:rgba(241,239,233,.55);border-bottom-color:var(--paper)}
.section--ink .ledger tbody tr{border-bottom-color:var(--hair-inv)}
.section--ink .ledger tbody tr:hover{background:var(--paper)}
.section--ink .ledger tbody tr:hover td,.section--ink .ledger tbody tr:hover th{color:var(--ink)}
.section--ink .ledger .led__desc{color:rgba(241,239,233,.7)}
.section--ink .ledger tr:hover .led__desc{color:var(--steel)}

/* ledger with thumbnail */
.ledger--media .led__media{width:112px;padding-right:22px}
.ledger--media .led__media img{width:112px;height:74px;object-fit:contain;padding:6px;background:#fff;border:1px solid var(--hair-2)}
.section--ink .ledger--media .led__media img{border-color:var(--hair-inv)}

/* ---------- 13. Plates / figure blocks --------------------------------- */
.split{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col);align-items:center}
.split__media{grid-column:span 6;background:var(--white);border:1px solid var(--hair-2);padding:clamp(20px,3.2vw,52px);display:flex;flex-direction:column;justify-content:center}
.split__media img{width:100%;height:auto;max-height:52vh;object-fit:contain}
.split__txt{grid-column:8 / span 5}
.split--right .split__media{grid-column:8 / span 5}
.split--rev .split__media{grid-column:8 / span 5;order:2}
.split--rev .split__txt{grid-column:span 5;order:1}
.figcap{
  margin-top:16px;padding-top:12px;border-top:1px solid var(--hair);
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--steel);
}

/* ---------- 13b. Tech list ---------------------------------------------- */
.techlist{border-top:1px solid var(--hair)}
.techlist > div{padding:20px 0;border-bottom:1px solid var(--hair);display:grid;grid-template-columns:52px 1fr;gap:4px 18px;align-items:baseline}
.techlist i{font-family:var(--f-mono);font-style:normal;font-size:11px;letter-spacing:.12em;color:var(--accent);font-weight:500}
.techlist h3{font-size:1.04rem;font-weight:600;letter-spacing:-.012em;line-height:1.3}
.techlist p{grid-column:2;font-size:.89rem;line-height:1.58;color:var(--steel)}
.section--ink .techlist{border-top-color:var(--hair-inv)}
.section--ink .techlist > div{border-bottom-color:var(--hair-inv)}
.section--ink .techlist p{color:rgba(241,239,233,.7)}

/* ---------- 14. Index grid (applications) ------------------------------ */
.idx-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--ink);border-left:1px solid var(--hair)}
.idx-cell{
  border-right:1px solid var(--hair);border-bottom:1px solid var(--hair);
  padding:24px clamp(16px,1.5vw,26px) 26px;min-height:172px;
  display:flex;flex-direction:column;transition:background .22s ease,color .22s ease;
}
.idx-cell:hover{background:var(--ink);color:var(--paper)}
.idx-cell:hover .idx-cell__n,.idx-cell:hover .idx-cell__fluids{color:var(--accent)}
.idx-cell__n{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.13em;color:var(--steel);margin-bottom:16px;display:block}
.idx-cell h3{font-size:1.06rem;font-weight:600;letter-spacing:-.012em;line-height:1.22;margin-bottom:9px}
.idx-cell__body{font-size:.875rem;line-height:1.55;color:var(--steel);transition:color .22s ease}
.idx-cell:hover .idx-cell__body{color:rgba(241,239,233,.72)}
.idx-cell__fluids{margin-top:auto;padding-top:16px;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.06em;color:var(--steel-2);transition:color .22s ease}

/* ---------- 15. Timeline ------------------------------------------------ */
.tl{position:relative;border-top:1px solid var(--hair)}
.tl__row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col);border-bottom:1px solid var(--hair);padding:26px 0;align-items:baseline;transition:background .2s ease}
.tl__row:hover{background:var(--paper-2)}
.tl__yr{grid-column:span 2;font-family:var(--f-mono);font-size:13px;letter-spacing:.1em;font-weight:500}
.tl__tx{grid-column:3 / span 7;font-size:1rem;line-height:1.5}
.tl__tag{grid-column:11 / span 2;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--steel);text-align:right}

/* ---------- 16. Marquee strip ------------------------------------------ */
.strip{border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);overflow:hidden;background:var(--paper)}
.strip__track{display:flex;width:max-content;animation:slide 46s linear infinite}
.strip:hover .strip__track{animation-play-state:paused}
.strip__item{
  display:flex;align-items:center;gap:24px;padding:15px 26px;
  font-family:var(--f-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--steel);white-space:nowrap;
}
.strip__item::after{content:"";width:5px;height:5px;background:var(--accent);display:block}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.strip__track{animation:none}}

/* ---------- 17. Client list -------------------------------------------- */
.clients{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--hair);border-left:1px solid var(--hair)}
.clients li{border-right:1px solid var(--hair);border-bottom:1px solid var(--hair);padding:22px 18px;display:flex;align-items:center;min-height:92px}
.clients span{font-size:.98rem;font-weight:600;letter-spacing:-.008em;line-height:1.3}
.clients small{display:block;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--steel-2);margin-top:6px;font-weight:400}

/* ---------- 18. News list ---------------------------------------------- */
.news li{border-bottom:1px solid var(--hair);transition:background .2s ease}
.news li:hover{background:var(--paper-2)}
.news a{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col);align-items:baseline;padding:22px 0}
.news__d{grid-column:span 2;font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;color:var(--steel)}
.news__t{grid-column:3 / span 7;font-size:1.05rem;font-weight:600;letter-spacing:-.012em;line-height:1.35}
.news__c{grid-column:10 / span 2;font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--steel)}
.news__a{grid-column:12;justify-self:end;color:var(--steel);transition:transform .28s ease,color .2s ease}
.news li:hover .news__a{transform:translateX(5px);color:var(--accent)}

/* ---------- 19. Process list ------------------------------------------- */
.proc{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--hair);border-left:1px solid var(--hair)}
.proc > div{border-right:1px solid var(--hair);border-bottom:1px solid var(--hair);padding:28px clamp(16px,1.5vw,28px) 30px}
.proc h3{font-size:1.02rem;font-weight:600;letter-spacing:-.01em;margin:14px 0 10px}
.proc p{font-size:.875rem;line-height:1.6;color:var(--steel)}
.proc i{font-family:var(--f-mono);font-style:normal;font-size:11px;letter-spacing:.12em;color:var(--accent);font-weight:500}

/* ---------- 20. Diagram ------------------------------------------------- */
.diagram{background:var(--white);border:1px solid var(--hair-2);padding:clamp(18px,2.6vw,40px)}
.diagram svg{width:100%;height:auto;display:block;color:var(--ink)}
.diagram figcaption{margin-top:18px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

.dg-line{stroke:currentColor;stroke-width:1.4;fill:none;opacity:.78}
.dg-soft{opacity:.34}
.dg-accent{stroke:var(--accent);opacity:1;stroke-width:1.8}
.dg-solid{fill:var(--ink);opacity:.8}
.dg-drop{fill:var(--accent)}
.dg-mesh{opacity:.55}
.dg-txt{font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;fill:var(--ink);text-transform:uppercase}
.dg-txt .dg-txt-sm{font-size:10.5px;fill:var(--steel);text-transform:none;letter-spacing:.04em}
.dg-txt-sm{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.04em;fill:var(--steel)}

/* ---------- 21. Form ---------------------------------------------------- */
.form{display:grid;grid-template-columns:repeat(8,1fr);gap:0}
.field{grid-column:span 4;border-top:1px solid var(--hair-2);padding:16px 0 12px;display:flex;flex-direction:column;gap:8px}
.field--full{grid-column:span 8}
.field label{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--steel)}
.field input,.field select,.field textarea{
  border:0;border-bottom:1px solid var(--hair-2);background:transparent;
  padding:6px 0 10px;font-size:1rem;font-family:var(--f-sans);width:100%;
  transition:border-color .2s ease;
}
.field textarea{resize:vertical;min-height:96px}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-bottom-color:var(--accent)}
.field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);background-position:calc(100% - 12px) 16px,calc(100% - 7px) 16px;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:28px}
.form__foot{grid-column:span 8;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px;padding-top:26px}

/* ---------- 22. CTA band ----------------------------------------------- */
.cta{background:var(--ink);color:var(--paper);padding-block:clamp(56px,7vw,112px)}
.cta__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col);align-items:end}
.cta__txt{grid-column:span 8}
.cta__txt h2{max-width:16ch}
.cta__side{grid-column:10 / span 3}
.cta__side dl{margin-top:20px}
.cta__side dt{font-family:var(--f-mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:rgba(241,239,233,.5);margin-bottom:4px}
.cta__side dd{font-size:.95rem;margin-bottom:16px}

/* ---------- 23. Footer ------------------------------------------------- */
.foot{background:var(--ink);color:var(--paper);border-top:1px solid var(--hair-inv);padding-top:clamp(48px,5.5vw,84px)}
.foot__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col);row-gap:36px}
.foot__brand{grid-column:span 4}
.foot__brand img{height:26px;filter:brightness(0) invert(1);opacity:.9}
.foot__brand p{margin-top:18px;font-size:.9rem;line-height:1.6;color:rgba(241,239,233,.66);max-width:34ch}
.foot__col{grid-column:span 2}
.foot__col h4{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(241,239,233,.5);margin-bottom:16px}
.foot__col li{margin-bottom:9px}
.foot__col a{font-size:.9rem;color:rgba(241,239,233,.82);transition:color .18s ease;overflow-wrap:anywhere}
.foot__col a:hover{color:var(--accent)}
.foot__bar a{overflow-wrap:anywhere}
.foot__bar{
  margin-top:clamp(40px,4.5vw,64px);border-top:1px solid var(--hair-inv);
  padding-block:20px;display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:space-between;align-items:center;
}
.foot__bar .mono{color:rgba(241,239,233,.5)}

/* ---------- 24. Page head (inner pages) -------------------------------- */
.phead{border-bottom:1px solid var(--hair);padding-block:clamp(42px,5.5vw,86px) clamp(34px,4.5vw,64px)}
.phead__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col);align-items:end}
.phead__txt{grid-column:span 8}
.phead__txt h1{margin-top:16px}
.phead__side{grid-column:10 / span 3}
.phead__side .mono{color:var(--steel);display:block;margin-bottom:10px}
.phead__side address{font-style:normal;font-size:.92rem;line-height:1.6;color:var(--steel)}

/* ---------- 25. Sub nav ------------------------------------------------ */
.subnav{border-bottom:1px solid var(--hair);background:var(--paper)}
.subnav__in{display:flex;gap:clamp(16px,2.4vw,38px);overflow-x:auto;scrollbar-width:none}
.subnav__in::-webkit-scrollbar{display:none}
.subnav a{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  padding:15px 0;color:var(--steel);position:relative;white-space:nowrap;
}
.subnav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .26s ease}
.subnav a:hover{color:var(--ink)}
.subnav a:hover::after,.subnav a.is-on::after{transform:scaleX(1)}
.subnav a.is-on{color:var(--ink)}

/* ---------- 26. Product rows (products page) ---------------------------- */
.prow{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col);border-top:1px solid var(--hair);padding-block:clamp(32px,3.6vw,56px);align-items:start}
.prow:last-child{border-bottom:1px solid var(--hair)}
.prow__media{grid-column:span 5;background:var(--white);border:1px solid var(--hair-2);padding:clamp(16px,2.4vw,38px)}
.prow__media img{width:100%;aspect-ratio:4/3;object-fit:contain}
.prow__body{grid-column:7 / span 6}
.prow__head{display:flex;align-items:baseline;gap:14px;margin-bottom:8px}
.prow__head i{font-family:var(--f-mono);font-style:normal;font-size:11px;letter-spacing:.13em;color:var(--accent);font-weight:500}
.prow__body h2{font-size:clamp(1.4rem,2.3vw,2.05rem);line-height:1.1;letter-spacing:-.025em;font-weight:600}
.prow__zh{font-size:.95rem;color:var(--steel);margin-top:6px;letter-spacing:.01em}
.prow__body > p{margin-top:16px;font-size:.98rem;line-height:1.62;color:var(--ink)}
.deflist{margin-top:22px;border-top:1px solid var(--hair)}
.deflist > div{display:grid;grid-template-columns:minmax(120px,26%) 1fr;gap:16px;padding:11px 0;border-bottom:1px solid var(--hair)}
.deflist dt{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--steel);padding-top:2px}
.deflist dd{font-size:.92rem;line-height:1.55}

/* ---------- 27. Note / callout ----------------------------------------- */
.note{border:1px solid var(--hair-2);padding:clamp(18px,2.2vw,30px);display:flex;gap:16px;align-items:flex-start}
.note__mark{width:3px;align-self:stretch;background:var(--accent);flex:0 0 3px}

/* ---------- 28. Reveal animation --------------------------------------- */
[data-rv]{opacity:0;transform:translateY(14px);transition:opacity .6s cubic-bezier(.22,1,.36,1),transform .6s cubic-bezier(.22,1,.36,1)}
[data-rv].is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  [data-rv]{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* ---------- 29. Utilities ---------------------------------------------- */
.u-mt-l{margin-top:clamp(36px,4.4vw,72px)}
.u-mt-m{margin-top:clamp(22px,2.4vw,36px)}
.u-mt-s{margin-top:14px}
.u-mb-l{margin-bottom:clamp(34px,4vw,64px)}
.u-list li{position:relative;padding-left:18px;margin-bottom:8px;font-size:.95rem;line-height:1.6;color:var(--steel)}
.u-list li::before{content:"";position:absolute;left:0;top:.66em;width:7px;height:1px;background:var(--accent)}
.section--ink .u-list li{color:rgba(241,239,233,.74)}
.link-arrow{display:inline-flex;align-items:center;gap:9px;font-family:var(--f-mono);font-size:11px;letter-spacing:.11em;text-transform:uppercase;border-bottom:1px solid var(--hair-2);padding-bottom:5px;transition:border-color .2s ease,color .2s ease}
.link-arrow:hover{border-bottom-color:var(--accent)}
.link-arrow svg{transition:transform .28s cubic-bezier(.22,1,.36,1)}
.link-arrow:hover svg{transform:translateX(4px)}
.measure{max-width:62ch}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--paper);padding:10px 16px;z-index:99}
.skip:focus{left:8px;top:8px}

/* ---------- 30. Responsive --------------------------------------------- */
@media (max-width:1180px){
  .hero__main{grid-column:span 12}
  .hero__plate{grid-column:span 12;max-width:520px;padding-bottom:36px}
  .hero__in{min-height:auto}
  .shead__idx{grid-column:span 12;padding-bottom:14px}
  .shead__txt{grid-column:span 12}
  .shead__side{grid-column:span 12;padding-top:18px}
  .idx-grid{grid-template-columns:repeat(3,1fr)}
  .clients{grid-template-columns:repeat(3,1fr)}
  .proc{grid-template-columns:repeat(2,1fr)}
  .split__media{grid-column:span 12}
  .split--right .split__media{grid-column:span 12}
  .split__txt,.split--rev .split__txt{grid-column:span 12;padding-top:34px}
  .split--rev .split__media{grid-column:span 12;order:1}
  .split--rev .split__txt{order:2}
  .prow__media{grid-column:span 12}
  .prow__body{grid-column:span 12;padding-top:28px}
  .phead__txt{grid-column:span 12}
  .phead__side{grid-column:span 12;padding-top:22px}
  .cta__txt{grid-column:span 12}
  .cta__side{grid-column:span 12;padding-top:30px}
  .foot__brand{grid-column:span 12}
  .foot__col{grid-column:span 4}
  /* .cols keeps its 12 tracks at every width, which turns .col-3/.col-4
     into slivers on small screens — collapse it to real columns instead. */
  .cols{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(20px,3vw,36px);row-gap:36px}
  .cols > [class*="col-"]{grid-column:span 1}
  .cols > * + *{border-left:0;padding-left:0}
  .figures{grid-template-columns:repeat(2,1fr)}
  .figures > div:nth-child(2n){border-right:0}
  .figures > div:nth-child(-n+2){border-bottom:1px solid var(--hair)}
  .ledger .led__duty{display:none}
}
@media (max-width:900px){
  /* .nav goes here, so the burger must arrive in the same query — otherwise
     721–900px (iPad portrait and most small tablets) has no navigation at
     all: no inline nav, no menu button. */
  .nav{display:none}
  .brand__tag{display:block}
  .lang{display:none}
  .burger{display:block}
}
@media (max-width:720px){
  body{font-size:16px}
  :root{--head-h:58px}
  .brand__tag{display:none}
  .head-actions .btn{display:none}
  .idx-grid{grid-template-columns:repeat(2,1fr)}
  .clients{grid-template-columns:repeat(2,1fr)}
  .proc{grid-template-columns:1fr}
  .figures{grid-template-columns:1fr}
  .figures > div{border-right:0;border-bottom:1px solid var(--hair)}
  .figures > div:last-child{border-bottom:0}
  .foot__col{grid-column:span 6}
  .hero::before{background-size:calc(100%/3) 100%}
  .field,.field--full{grid-column:span 8}
  .ledger thead{display:none}
  .ledger,.ledger tbody,.ledger tr,.ledger td{display:block;width:auto}
  .ledger tbody tr{padding:20px 0;position:relative}
  .ledger td{padding:0}
  .ledger .led__no{display:block;margin-bottom:8px}
  .ledger .led__name{width:auto;margin-bottom:8px;padding-right:40px}
  .ledger .led__desc{padding-right:0;font-size:.875rem}
  .ledger .led__arw{position:absolute;top:20px;right:0;width:auto}
  .ledger--media .led__media{width:auto;padding-right:0;margin-bottom:14px}
  .ledger--media .led__media img{width:100%;height:auto;max-height:190px}
  .news a{grid-template-columns:1fr;row-gap:8px}
  .news__d,.news__t,.news__c{grid-column:span 12}
  .news__a{display:none}
  .tl__yr{grid-column:span 12;margin-bottom:6px}
  .tl__tx{grid-column:span 12}
  .tl__tag{grid-column:span 12;text-align:left;margin-top:8px}
  .deflist > div{grid-template-columns:1fr;gap:5px}
  .shead__idx{flex-direction:row;gap:8px}
  .form__foot{flex-direction:column;align-items:flex-start}
  .cols{grid-template-columns:1fr;row-gap:28px}
  .cols > [class*="col-"]{grid-column:span 1}
  .cols > * + *{padding-top:26px;border-top:1px solid var(--hair)}
}
@media (max-width:420px){
  .idx-grid,.clients{grid-template-columns:1fr}
  .idx-cell{min-height:0}
  .foot__col{grid-column:span 12}
  .specs dd{font-size:.86rem}
}

/* ---------- 31. Chinese typographic adjustments ---------------------- */
/* CJK glyphs carry far more visual weight than Latin at the same px size,
   so display type is stepped down and ch-based measures are replaced. */
:lang(zh) .d1{font-size:clamp(2.1rem,4.5vw,4rem);line-height:1.1;letter-spacing:-.01em}
:lang(zh) .d2{line-height:1.16;letter-spacing:-.01em}
:lang(zh) .d3{letter-spacing:0}
:lang(zh) .hero h1{max-width:none}
:lang(zh) .mono{text-transform:none}
:lang(zh) .lead{line-height:1.85}