/* ============================================================
   COMODO · 科莫多 — 龙头、淋浴套装与水暖卫浴配件
   Direction: the finish on a chromed fitting. Cool light greys,
   graphite type, one water blue. Air everywhere; the only dense
   thing on the page is the data plate, because a spec is what a
   buyer of faucets and valves actually reads.
   ============================================================ */

/* ---------- fonts ---------- */
@font-face{font-family:'Plex';src:url('fonts/ibm-plex-sans-latin-400-normal.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Plex';src:url('fonts/ibm-plex-sans-latin-500-normal.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Plex';src:url('fonts/ibm-plex-sans-latin-600-normal.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Plex';src:url('fonts/ibm-plex-sans-latin-700-normal.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'PlexCond';src:url('fonts/ibm-plex-sans-condensed-latin-700-normal.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'PlexMono';src:url('fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'PlexMono';src:url('fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2');font-weight:500;font-display:swap}

/* ---------- tokens ---------- */
:root{
  --ink:#0F1519;
  --graphite:#1B242B;
  --slate:#5A6670;
  --slate-lt:#8C979F;
  --mist:#F1F3F4;
  --mist-2:#E7EAEC;
  --paper:#FFFFFF;
  --line:#DEE2E4;
  --line-dk:#2C3942;
  --water:#0B6E9E;
  --water-dk:#08587E;

  --cn:"PingFang SC","Microsoft YaHei","Hiragino Sans GB","Noto Sans CJK SC",sans-serif;
  --sans:'Plex',system-ui,-apple-system,"Segoe UI",var(--cn);
  --cond:'PlexCond','Plex',system-ui,var(--cn);
  --mono:'PlexMono',ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  --pad:clamp(1.25rem,4vw,3.25rem);
  --gap:clamp(2rem,5vw,4.5rem);
  --sec-y:clamp(5rem,11vw,9.5rem);
}

/* ---------- 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:400 clamp(1rem,.96rem + .2vw,1.0625rem)/1.65 var(--sans);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{margin:0;font-weight:600;line-height:1.06;letter-spacing:-.025em}
p{margin:0}
ul,ol,dl,dd{margin:0;padding:0}
li{list-style:none}
button,input,textarea,select{font:inherit;color:inherit}

.wrap{width:min(1280px,100%);margin-inline:auto;padding-inline:var(--pad)}
.wrap-wide{width:min(1560px,100%);margin-inline:auto;padding-inline:var(--pad)}

.skip{position:absolute;left:-9999px;top:0;z-index:99;background:var(--water);color:#fff;padding:.75rem 1rem}
.skip:focus{left:0}
:where(a,button,input,textarea,select):focus-visible{outline:2px solid var(--water);outline-offset:3px}

/* shared label style — the mono "stamped" caption used site-wide */
.tag{
  font-family:var(--mono);font-size:.6875rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--water);
}

/* ============================================================
   HEADER
   ============================================================ */
.hdr{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.92);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.hdr-in{display:flex;align-items:center;gap:var(--gap);min-height:74px}

.mark{text-decoration:none;display:flex;flex-direction:column;line-height:1;margin-right:auto}
.mark-d{font-family:var(--cond);font-weight:700;font-size:1.5rem;letter-spacing:.14em}
.mark-i{font-family:var(--mono);font-size:.5625rem;letter-spacing:.2em;color:var(--slate-lt);margin-top:.35rem}

.nav{display:flex;gap:clamp(1rem,2.2vw,2.25rem)}
.nav a{
  font-size:.9375rem;text-decoration:none;color:var(--slate);
  padding:.4rem 0;border-bottom:1px solid transparent;transition:color .18s,border-color .18s;
}
.nav a:hover,.nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--water)}

.hdr-act{display:flex;align-items:center;gap:.85rem}
/* three-way language control — visible at a glance on a trade-show screen */
.lang{display:flex;border:1px solid var(--line)}
.lang button{
  background:none;border:none;border-right:1px solid var(--line);
  color:var(--slate);font-family:var(--mono);font-size:.6875rem;letter-spacing:.06em;
  padding:.45rem .58rem;cursor:pointer;transition:background .18s,color .18s;
}
.lang button:last-child{border-right:none}
.lang button:hover{color:var(--ink);background:var(--mist)}
.lang button.on{background:var(--water);color:#fff}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  background:var(--water);color:#fff;text-decoration:none;
  font-size:.9375rem;font-weight:500;letter-spacing:.01em;
  padding:.85rem 1.6rem;border:1px solid var(--water);cursor:pointer;
  transition:background .18s,border-color .18s;
}
.btn:hover{background:var(--water-dk);border-color:var(--water-dk)}
.btn-sm{padding:.55rem 1.05rem;font-size:.875rem}
.btn-line{background:none;color:var(--ink);border-color:var(--line)}
.btn-line:hover{background:var(--mist);border-color:var(--slate-lt)}
.btn-block{width:100%}

/* ============================================================
   HERO — the company's name, stated plainly and given room
   ============================================================ */
.hero{padding-block:clamp(3.5rem,8vw,7rem) clamp(2.5rem,5vw,4rem);text-align:center}
.hero-copy{max-width:64rem;margin-inline:auto;display:flex;flex-direction:column;align-items:center}
.hero .tag{margin-bottom:1.75rem}

/* the name: latin wordmark over the registered Chinese name */
.namemark{margin-bottom:1.75rem}
.namemark-en{
  display:block;font-family:var(--cond);font-weight:700;
  font-size:clamp(2.4rem,6vw,4.6rem);letter-spacing:.16em;line-height:1;
  text-indent:.16em;
}
.namemark-cn{
  display:block;margin-top:1.15rem;font-size:clamp(1.0625rem,2.1vw,1.5rem);
  font-weight:500;letter-spacing:.06em;color:var(--ink);
}
.namemark-rule{
  display:block;width:3.5rem;height:2px;background:var(--water);
  margin:1.6rem auto 0;
}

.hero h1{
  font-size:clamp(1.6rem,3.5vw,2.8rem);font-weight:600;
  line-height:1.18;margin-bottom:1.15rem;max-width:26ch;
}
.hero h1 em{font-style:normal;color:var(--water)}
/* the second line: one plain sentence, held just under the claim */
.hero .lede{font-size:clamp(1.0625rem,1rem + .45vw,1.3125rem);color:var(--slate);max-width:46ch}
.lede{max-width:56ch;color:var(--slate);font-size:clamp(1rem,.95rem + .3vw,1.1875rem);line-height:1.72}
.hero-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem;margin-top:2.5rem}

/* ---------- full-bleed plant photograph ---------- */
.bleed{position:relative;background:var(--mist-2);overflow:hidden}
.bleed-img{aspect-ratio:21/9;background:var(--mist-2)}
.bleed-img img{width:100%;height:100%;object-fit:cover}
.bleed-cap{
  margin-top:.85rem;font-family:var(--mono);font-size:.6875rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--slate);
}
@media (max-width:760px){.bleed-img{aspect-ratio:4/3}}

/* SIGNATURE: the spec plate, as stamped on a valve body */
.plate{
  position:absolute;left:clamp(1rem,3vw,2.75rem);bottom:clamp(1rem,3vw,2.75rem);
  z-index:2;background:rgba(255,255,255,.96);backdrop-filter:blur(6px);
  border:1px solid var(--line);padding:1.15rem 1.35rem;min-width:min(21rem,72vw);
  box-shadow:0 18px 40px -22px rgba(15,21,25,.5);text-align:left;
}
.plate-hd{
  font-family:var(--mono);font-size:.625rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--slate-lt);padding-bottom:.7rem;margin-bottom:.15rem;border-bottom:1px solid var(--line);
}
.plate-rows > div{
  display:flex;align-items:baseline;gap:1rem;
  padding:.5rem 0;border-bottom:1px solid var(--mist-2);
}
.plate-rows > div:last-child{border-bottom:none}
.plate-rows dt{
  font-family:var(--mono);font-size:.625rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--slate);white-space:nowrap;
}
.plate-rows dd{margin-left:auto;font-family:var(--mono);font-size:.8125rem;font-weight:500}

/* ============================================================
   FIGURES / STAT BAR
   ============================================================ */
.figs{background:var(--mist);border-bottom:1px solid var(--line)}
.figs-in{display:grid;grid-template-columns:repeat(4,1fr)}
.fig{padding:clamp(2rem,4vw,3.25rem) clamp(1rem,2vw,2rem);border-right:1px solid var(--line)}
.fig:last-child{border-right:none}
.fig-n{display:block;font-size:clamp(1.9rem,3.4vw,2.75rem);font-weight:600;letter-spacing:-.03em;line-height:1}
.fig-l{display:block;margin-top:.7rem;color:var(--slate);font-size:.875rem}

/* ============================================================
   SECTIONS
   ============================================================ */
.sec{padding-block:var(--sec-y)}
.sec-mist{background:var(--mist)}
.sec-dark{background:var(--graphite);color:#fff}

.sec-hd{max-width:60ch;margin-bottom:clamp(2.5rem,5vw,4.25rem)}
.sec-hd .tag{display:block;margin-bottom:1.15rem}
.sec-hd h2{font-size:clamp(1.85rem,3.6vw,2.9rem);margin-bottom:1.15rem}
.sec-sub{max-width:56ch;color:var(--slate);font-size:clamp(1rem,.96rem + .22vw,1.125rem);line-height:1.7}
.sec-dark .sec-sub{color:#A9B6BF}
.sec-hd-row{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--gap);max-width:none}
.sec-hd-row .sec-hd{margin-bottom:0}

/* ---------- category cards (link to products page) ---------- */
.cats{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:clamp(1rem,2vw,1.75rem)}
.cat{
  display:flex;flex-direction:column;background:var(--paper);
  border:1px solid var(--line);text-decoration:none;
  transition:border-color .2s,transform .2s,box-shadow .2s;
}
.cat:hover{border-color:var(--slate-lt);transform:translateY(-3px);box-shadow:0 22px 44px -30px rgba(15,21,25,.55)}
.cat-img{aspect-ratio:4/3;background:var(--mist-2);overflow:hidden}
.cat-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.cat:hover .cat-img img{transform:scale(1.03)}
.cat-body{padding:clamp(1.3rem,2.2vw,1.8rem);display:flex;flex-direction:column;flex:1}
.cat-body h3{font-size:1.35rem;margin-bottom:.6rem}
.cat-body p{color:var(--slate);font-size:.9375rem;line-height:1.6}
.cat-list{
  margin-top:1.1rem;padding-top:1.1rem;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.06em;color:var(--slate);line-height:1.9;
}
.cat-go{
  margin-top:auto;padding-top:1.3rem;display:flex;align-items:center;gap:.45rem;
  color:var(--water);font-size:.875rem;font-weight:500;
}
.cat-go::after{content:"→";transition:transform .2s}
.cat:hover .cat-go::after{transform:translateX(4px)}

/* ---------- factory: wide image band ---------- */
.band{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:clamp(1rem,2vw,1.5rem)}
.band figure{margin:0}
.band .shot{aspect-ratio:3/2;background:var(--mist-2);overflow:hidden;border:1px solid var(--line)}
.band .shot img{width:100%;height:100%;object-fit:cover}
.band figcaption{
  margin-top:.75rem;font-family:var(--mono);font-size:.6875rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--slate);
}

/* ---------- capability rows (manifest style) ---------- */
.rows{border-top:1px solid var(--line-dk)}
.sec:not(.sec-dark) .rows{border-top-color:var(--line)}
.rows li{
  display:grid;grid-template-columns:3.75rem minmax(8rem,13rem) minmax(0,1fr);
  align-items:baseline;gap:clamp(1rem,3vw,2.5rem);
  padding:1.45rem .25rem;border-bottom:1px solid var(--line-dk);
}
.sec:not(.sec-dark) .rows li{border-bottom-color:var(--line)}
.rows-n{font-family:var(--mono);font-size:.75rem;letter-spacing:.12em;color:var(--water)}
.sec-dark .rows-n{color:#4FA9D6}
.rows li h3{font-size:1.15rem}
.rows li p{color:var(--slate);font-size:.9375rem;line-height:1.62;max-width:60ch}
.sec-dark .rows li p{color:#A9B6BF}

/* ---------- quality specs ---------- */
.q-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:var(--gap);align-items:start}
.q-hd{margin-bottom:0;position:sticky;top:110px}
.specs{border-top:1px solid var(--line)}
.sec-dark .specs{border-top-color:var(--line-dk)}
.spec{padding:1.5rem 0;border-bottom:1px solid var(--line)}
.sec-dark .spec{border-bottom-color:var(--line-dk)}
.spec dt{
  font-family:var(--mono);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;
  margin-bottom:.55rem;
}
.spec dd{color:var(--slate);font-size:.9688rem;line-height:1.62}
.sec-dark .spec dd{color:#A9B6BF}

/* ---------- certification chips ---------- */
.certs{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:2rem}
.certs li{
  font-family:var(--mono);font-size:.75rem;letter-spacing:.08em;
  padding:.4rem .7rem;border:1px solid var(--line);color:var(--slate);
}
.sec-dark .certs li{border-color:var(--line-dk);color:#A9B6BF}

/* ============================================================
   PRODUCTS PAGE
   ============================================================ */
.phero{background:var(--mist);border-bottom:1px solid var(--line);padding-block:clamp(3rem,7vw,5.5rem)}
.phero h1{font-size:clamp(2rem,4.2vw,3.4rem);margin-bottom:1.1rem}
.phero .tag{display:block;margin-bottom:1.1rem}

.pnav{
  position:sticky;top:74px;z-index:40;background:var(--paper);
  border-bottom:1px solid var(--line);
}
.pnav-in{display:flex;gap:1.75rem;overflow-x:auto;padding-block:1rem}
.pnav a{
  white-space:nowrap;text-decoration:none;color:var(--slate);font-size:.9375rem;
  padding-bottom:.3rem;border-bottom:1px solid transparent;
}
.pnav a:hover{color:var(--ink);border-bottom-color:var(--water)}

.pgroup{padding-block:clamp(3.5rem,7vw,6rem);border-bottom:1px solid var(--line)}
.pgroup:last-of-type{border-bottom:none}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:clamp(1rem,2vw,1.75rem)}
.item{border:1px solid var(--line);background:var(--paper);display:flex;flex-direction:column}
.item-img{aspect-ratio:1/1;background:var(--paper);overflow:hidden}
.item-img img{width:100%;height:100%;object-fit:contain;transition:transform .5s ease}
.item:hover .item-img img{transform:scale(1.04)}
.item-body{padding:1.15rem 1.25rem 1.35rem}
.item-body h3{font-size:1.0625rem;margin-bottom:.45rem}
.item-code{font-family:var(--mono);font-size:.6875rem;letter-spacing:.09em;color:var(--water);margin-bottom:.6rem}
.item-spec{
  margin-top:.85rem;padding-top:.85rem;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.04em;color:var(--slate);line-height:1.85;
}
.product-photo .item-body{display:flex;flex:1;flex-direction:column}
.product-photo .item-spec{margin-top:auto}
.catalog-pending{
  min-height:12rem;border:1px dashed var(--line);background:var(--mist);
  display:grid;place-content:center;text-align:center;padding:2rem;color:var(--slate)
}
.pending-mark{
  display:block;margin:0 auto .85rem;width:2.5rem;height:2.5rem;border:1px solid var(--water);
  color:var(--water);font-size:1.55rem;line-height:2.3rem
}
.catalog-pending p{font-family:var(--mono);font-size:.75rem;letter-spacing:.05em}
.legacy-placeholder,.legacy-placeholder-section{display:none}

/* ============================================================
   CONTACT
   ============================================================ */
.cta-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:var(--gap);align-items:start}
.cta-copy h2{font-size:clamp(1.85rem,3.6vw,2.9rem);margin-bottom:1.15rem}
.cta-copy .tag{display:block;margin-bottom:1.15rem}
.cta-copy .sec-sub{margin-bottom:2.5rem}
.contact{border-top:1px solid var(--line)}
.contact > div{display:flex;align-items:baseline;gap:1rem;padding:.95rem 0;border-bottom:1px solid var(--line)}
.contact dt{
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--slate);min-width:7.5rem;
}
.contact dd{font-size:.9688rem;font-weight:500}
.contact a{color:var(--water);text-decoration:none;border-bottom:1px solid rgba(11,110,158,.3)}
.contact a:hover{border-bottom-color:var(--water)}

.rfq{background:var(--paper);border:1px solid var(--line);padding:clamp(1.5rem,3vw,2.25rem)}
.sec-mist .rfq{box-shadow:0 24px 50px -38px rgba(15,21,25,.5)}
.rfq-hd{
  font-family:var(--mono);font-size:.75rem;letter-spacing:.15em;text-transform:uppercase;
  padding-bottom:1rem;margin-bottom:1.5rem;border-bottom:1px solid var(--ink);
}
.rfq label{display:block;font-size:.8125rem;color:var(--slate);margin-bottom:.4rem}
.rfq input,.rfq textarea,.rfq select{
  width:100%;background:var(--paper);border:1px solid var(--line);
  padding:.7rem .8rem;margin-bottom:1.1rem;border-radius:0;transition:border-color .18s;
}
.rfq input:focus,.rfq textarea:focus,.rfq select:focus{border-color:var(--water)}
.rfq textarea{resize:vertical;min-height:6.5rem}
.rfq-note{margin-top:.9rem;font-size:.8125rem;color:var(--slate);text-align:center}

/* ============================================================
   FOOTER
   ============================================================ */
.ftr{background:var(--graphite);color:#fff;padding-block:clamp(3rem,6vw,4.5rem)}
.ftr-in{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr));gap:var(--gap)}
.ftr .mark-d{font-size:1.4rem}
.ftr .mark-i{color:#7C8993}
.ftr-line{margin-top:1.2rem;color:#A9B6BF;font-size:.9063rem;max-width:34ch;line-height:1.7}
.ftr h4{
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;
  color:#7C8993;margin-bottom:1.1rem;font-weight:500;
}
.ftr ul li{margin-bottom:.6rem}
.ftr a{color:#CBD4DA;text-decoration:none;font-size:.9375rem}
.ftr a:hover{color:#fff}
.ftr-btm{
  margin-top:clamp(2.5rem,5vw,3.5rem);padding-top:1.5rem;border-top:1px solid var(--line-dk);
  display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;justify-content:space-between;
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.06em;color:#6E7B85;
}

/* ============================================================
   IMAGE PLACEHOLDERS — visible until real photos are dropped in
   ============================================================ */
.ph{
  width:100%;height:100%;display:grid;place-content:center;gap:.4rem;text-align:center;
  background:
    repeating-linear-gradient(45deg,transparent 0 12px,rgba(90,102,112,.045) 12px 24px),
    var(--mist-2);
  color:var(--slate-lt);padding:1rem;
}
.ph b{font-family:var(--mono);font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;font-weight:500}
.ph span{font-family:var(--mono);font-size:.625rem;letter-spacing:.04em;color:#A7B1B8}

/* ============================================================
   MOTION
   ============================================================ */
.rise{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s ease}
.rise.in{opacity:1;transform:none}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.hero-copy > *{animation:fadeUp .65s both}
.hero-copy > .tag{animation-delay:.05s}
.hero-copy > h1{animation-delay:.12s}
.hero-copy > .lede{animation-delay:.2s}
.hero-copy > .hero-cta{animation-delay:.28s}
.plate{animation:fadeUp .7s .42s both}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-delay:0!important;transition-duration:.001ms!important}
  .rise{opacity:1;transform:none}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1000px){
  .plate{position:static;min-width:0;box-shadow:none;margin-top:.85rem}
  .q-in,.cta-in{grid-template-columns:1fr}
  .q-hd{position:static}
  .figs-in{grid-template-columns:repeat(2,1fr)}
  .fig:nth-child(2){border-right:none}
  .fig:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .ftr-in{grid-template-columns:1fr 1fr}
  .ftr-brand{grid-column:1/-1}
}
@media (max-width:820px){
  .nav{display:none}
  .hdr-in{gap:1rem}
  .pnav{top:0}
  .rows li{grid-template-columns:3.25rem minmax(0,1fr);gap:.55rem 1.1rem;padding:1.25rem .25rem}
  .rows li p{grid-column:2}
}
@media (max-width:560px){
  .hdr-act .btn-sm{display:none}
  .contact > div{flex-direction:column;gap:.3rem}
  .contact dt{min-width:0}
  .hero-cta{display:grid;grid-template-columns:1fr;gap:.7rem}
  .ftr-in{grid-template-columns:1fr}
}