/* ==========================================================================
   UV DTF Decor — final design system
   Loaded after main.css. Re-points the shared chrome tokens, then defines the
   page-level components. Prefix: .u-
   --------------------------------------------------------------------------
   Two surfaces only:
     DARK  — #0B0C0F page / #191B20 card / real photography
     PAPER — warm off-white bands that break the dark and let photos breathe
   Accent: amber, used in ~3 places per screen (CTA, marker, one word).
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
body.skin-utf{
  --u-bg:#0B0C0F;
  --u-bg-2:#111317;
  --u-card:#191B20;
  --u-card-2:#22252B;
  --u-line:rgba(255,255,255,.085);
  --u-line-2:rgba(255,255,255,.16);
  --u-ink:#F3F4F6;
  --u-body:#A5AAB2;
  --u-mute:#6D727B;

  --u-amber:#F2A93B;
  --u-amber-2:#FFC670;
  --u-amber-ink:#150E02;

  --u-paper:#F2F0EB;
  --u-paper-2:#FFFFFF;
  --u-paper-ink:#131519;
  --u-paper-body:#565C65;
  --u-paper-line:rgba(19,21,25,.14);

  --u-gut:clamp(20px,3.4vw,64px);
  --u-y:clamp(72px,8vw,132px);
  --u-y-tight:clamp(56px,5.6vw,92px);

  /* shared chrome re-pointed */
  --brand:var(--u-amber);
  --brand-dark:#C9861F;
  --brand-light:var(--u-amber-2);
  --brand-wash:rgba(242,169,59,.13);

  background:var(--u-bg);
  color:var(--u-ink);
}

/* ---------- 2. Chrome ---------- */
body.skin-utf .container{max-width:none; padding-inline:var(--u-gut);}

body.skin-utf .topbar{
  background:#000; color:var(--u-mute); padding-block:10px;
  border-bottom:1px solid var(--u-line);
}
body.skin-utf .topbar strong{color:var(--u-amber);}

body.skin-utf .site-header{
  background:rgba(11,12,15,.82); border-bottom:1px solid var(--u-line);
  backdrop-filter:saturate(140%) blur(14px); -webkit-backdrop-filter:saturate(140%) blur(14px);
}
body.skin-utf .site-header .container{height:74px;}
body.skin-utf .logo-mark{background:var(--u-amber); color:var(--u-amber-ink);}
body.skin-utf .logo-text b{color:#fff;}
body.skin-utf .logo-text span{color:var(--u-mute);}
body.skin-utf .nav > li > a{color:var(--u-body);}
body.skin-utf .nav > li > a:hover{color:#fff;}
body.skin-utf .nav > li > a.is-active{color:var(--u-amber); border-bottom-color:var(--u-amber);}
/* WP 菜单：当前页高亮（wp_nav_menu 输出 current-menu-item 到 li） */
body.skin-utf .nav > li.current-menu-item > a{color:var(--u-amber); border-bottom-color:var(--u-amber);}
body.skin-utf .lang-switch{color:var(--u-body);}
body.skin-utf .lang-switch:hover{color:#fff;}
body.skin-utf .nav-toggle{border-color:var(--u-line-2);}
body.skin-utf .nav-toggle span,
body.skin-utf .nav-toggle span::before,
body.skin-utf .nav-toggle span::after{background:var(--u-ink);}

body.skin-utf .btn--primary{background:var(--u-amber); color:var(--u-amber-ink); font-weight:600;}
body.skin-utf .btn--primary:hover{background:var(--u-amber-2);}
body.skin-utf .btn--on-dark{color:#fff; border-color:rgba(255,255,255,.26);}
body.skin-utf .btn--on-dark:hover{background:#fff; color:#0B0C0F; border-color:#fff;}
body.skin-utf .btn--ink{background:var(--u-paper-ink); color:#fff;}
body.skin-utf .btn--ink:hover{background:#000;}

body.skin-utf .site-footer{background:#08090B; color:var(--u-mute);}
body.skin-utf .site-footer .logo-mark{background:var(--u-amber); color:var(--u-amber-ink);}
body.skin-utf .site-footer h4{color:#fff;}
body.skin-utf .site-footer a{color:var(--u-body);}
body.skin-utf .site-footer a:hover{color:var(--u-amber);}
body.skin-utf .footer-bottom{border-top-color:var(--u-line);}

/* Small text rows are ~17-18px tall on desktop. WCAG 2.2 wants 24px minimum,
   so pad the row instead of leaving a hairline hit area. */
body.skin-utf .site-footer li{margin-bottom:2px;}
body.skin-utf .site-footer li a,
body.skin-utf .footer-bottom .legal a,
body.skin-utf .topbar-links a{display:inline-block; padding-block:5px;}

body.skin-utf .wa-float{background:#25D366; border-radius:2px;}

body.skin-utf .proto-banner{
  background:#191307; color:var(--u-amber-2);
  border-bottom:1px solid rgba(242,169,59,.22);
}
body.skin-utf .proto-banner b{color:var(--u-amber);}
body.skin-utf .todo{border-bottom-color:#FF5FA2;}

/* Sticky bar: fixed, only after the hero, and it yields near the footer. */
body.skin-utf .sticky-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:55;
  background:rgba(8,9,11,.92); border-top:1px solid var(--u-line-2);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  padding-block:12px; transform:translateY(101%);
}
body.skin-utf .sticky-cta .txt{color:var(--u-body);}
body.skin-utf .sticky-cta .txt strong{color:#fff;}
body.skin-utf .sticky-cta.is-shown{transform:none;}
body.skin-utf .sticky-cta .container{display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;}

/* ---------- 3. Bands & heads ---------- */
.u-band{padding-block:var(--u-y); position:relative;}
.u-band--tight{padding-block:var(--u-y-tight);}
.u-band--deep{background:var(--u-bg-2);}
.u-band--paper{background:var(--u-paper); color:var(--u-paper-ink);}
.u-band--paper h2,.u-band--paper h3,.u-band--paper h4{color:var(--u-paper-ink);}
.u-band--paper p{color:var(--u-paper-body);}

.u-kicker{
  display:inline-flex; align-items:center; gap:11px;
  font-family:var(--font-mono); font-size:11px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--u-amber);
  margin-bottom:16px;
}
/* Section folio. The counter follows <section> order, so the number always matches
   where the reader actually is. Reads as a numbered document rather than a stack
   of bands — and replaces the decorative dash that repeated 11 times. */
body.skin-utf{counter-reset:u-sec;}
body.skin-utf > section{counter-increment:u-sec;}
.u-kicker::before{
  content:counter(u-sec,decimal-leading-zero);
  letter-spacing:.06em; opacity:.6;
  padding-right:11px; border-right:1px solid currentColor;
}
.u-band--paper .u-kicker{color:#A9700F;}

.u-h2{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(30px,3.5vw,50px); line-height:1.04; letter-spacing:-.032em;
  margin:0; text-wrap:balance;
}
.u-h2 em{font-style:normal; color:var(--u-amber);}
.u-band--paper .u-h2 em{color:#A9700F;}

/* head: default (left) */
.u-head{max-width:min(760px,60ch); margin-bottom:clamp(32px,3.6vw,56px);}
/* head: split — headline left, lede right. Fills the void beside the title. */
.u-head--split{
  display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(24px,4vw,72px); align-items:end;
  max-width:none; margin-bottom:clamp(32px,3.6vw,56px);
}
.u-head--split .u-lede{
  font-size:clamp(15px,1.15vw,17px); line-height:1.68; color:var(--u-body);
  margin:0 0 4px; max-width:56ch;
}
.u-band--paper .u-head--split .u-lede{color:var(--u-paper-body);}
/* head: row — headline left, link right */
.u-head--row{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:32px; flex-wrap:wrap; max-width:none;
}
.u-link{
  display:inline-flex; align-items:center; gap:9px; flex:0 0 auto;
  font-family:var(--font-mono); font-size:12px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--u-amber);
  padding-bottom:5px; border-bottom:1px solid rgba(242,169,59,.35);
  transition:border-color .16s;
}
.u-link:hover{border-bottom-color:var(--u-amber);}
.u-band--paper .u-link{color:#A9700F; border-bottom-color:rgba(169,112,15,.35);}

/* ---------- 4. Media ---------- */
.u-ph{position:relative; overflow:hidden; background:var(--u-card); display:block;}
.u-ph img{
  display:block; width:100%; height:100%; object-fit:cover;
  filter:saturate(.86) contrast(1.05);
  transition:transform .5s cubic-bezier(.2,.7,.3,1);
}
.u-ph--r43{aspect-ratio:4/3;}
.u-ph--r32{aspect-ratio:3/2;}
.u-ph--r11{aspect-ratio:1/1;}
.u-ph--r169{aspect-ratio:16/9;}
.u-ph--r219{aspect-ratio:21/9;}
.u-ph--fill{position:absolute; inset:0;}
.u-ph--fill img{position:absolute; inset:0;}

/* caption strip that sits under a photo, not over it */
.u-cap{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  padding-top:13px; font-family:var(--font-mono); font-size:11px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--u-mute);
}
.u-cap b{color:var(--u-ink); font-weight:700; letter-spacing:.06em;}
.u-band--paper .u-cap{color:#7C828B;}
.u-band--paper .u-cap b{color:var(--u-paper-ink);}

/* badge over a photo */
.u-tag{
  position:absolute; top:12px; left:12px; z-index:2;
  background:var(--u-amber); color:var(--u-amber-ink);
  font-family:var(--font-mono); font-size:10px; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; padding:6px 10px;
}
.u-tag--ink{background:rgba(11,12,15,.72); color:#fff; backdrop-filter:blur(6px);}

/* scrim for text over photography */
.u-scrim{position:absolute; inset:0; z-index:1; pointer-events:none;}

/* ---------- 5. Hero ---------- */
.u-hero{position:relative; background:#000; overflow:hidden;}
.u-hero-media{position:absolute; inset:0;}
.u-hero-media img{width:100%; height:100%; object-fit:cover; filter:brightness(1.07) saturate(.96) contrast(1.02);}
.u-hero-scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  /* 左边留够给标题压字，右边必须放开 —— 首屏换成了印好图案的成品，
     遮罩按原来那张「主体在右侧的产线图」调的话，成品会被整片压黑。 */
  background:
    linear-gradient(96deg, rgba(8,9,11,.93) 0%, rgba(8,9,11,.85) 28%, rgba(8,9,11,.44) 54%, rgba(8,9,11,.14) 76%, rgba(8,9,11,.38) 100%),
    linear-gradient(180deg, rgba(8,9,11,.44) 0%, rgba(8,9,11,0) 30%, rgba(8,9,11,.28) 100%);
}
.u-hero-in{
  position:relative; z-index:2;
  padding-block:clamp(72px,10vw,150px) clamp(40px,5vw,72px);
  min-height:min(86vh,860px);
  display:grid; grid-template-columns:minmax(0,1.16fr) minmax(0,.84fr);
  gap:clamp(32px,5vw,88px); align-items:center;
}
.u-hero-copy{max-width:800px;}
.u-hero h1{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(38px,5.6vw,80px); line-height:1.0; letter-spacing:-.038em;
  color:#fff; margin:0 0 24px;
}
.u-hero h1 em{font-style:normal; color:var(--u-amber);}
.u-hero-lead{
  font-size:clamp(15.5px,1.25vw,18.5px); line-height:1.68; color:#C6CAD1;
  max-width:56ch; margin:0 0 32px;
}
.u-hero .btn-row{gap:12px;}

/* the fact column fills the right half instead of leaving it black */
.u-facts{
  border-top:1px solid rgba(255,255,255,.22);
  background:rgba(10,11,14,.42);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  padding:0 clamp(16px,1.8vw,28px);
}
.u-facts > div{
  display:flex; align-items:baseline; justify-content:space-between; gap:18px;
  padding-block:clamp(14px,1.5vw,21px);
  border-bottom:1px solid rgba(255,255,255,.13);
}
.u-facts .k{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.13em;
  text-transform:uppercase; color:#9BA1AA;
}
.u-facts .v{
  font-family:var(--font-display); font-weight:700; font-size:clamp(15px,1.35vw,20px);
  color:#fff; letter-spacing:-.02em; text-align:right;
}
.u-facts .v small{font-size:.62em; font-weight:600; color:#9BA1AA; margin-left:3px;}

/* ---------- 6. Product cards ---------- */
.u-cards{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(16px,1.6vw,24px);}
.u-card{
  display:flex; flex-direction:column; background:var(--u-card);
  border:1px solid var(--u-line); transition:border-color .18s, transform .18s;
}
.u-card:hover{border-color:var(--u-line-2); transform:translateY(-3px);}
.u-card .u-ph img{transition:transform .6s cubic-bezier(.2,.7,.3,1);}
.u-card:hover .u-ph img{transform:scale(1.045);}
.u-card-b{padding:clamp(18px,1.7vw,26px); display:flex; flex-direction:column; gap:10px; flex:1;}
.u-card-b .t{
  font-family:var(--font-mono); font-size:10.5px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--u-amber);
}
.u-card-b .n{
  font-family:var(--font-display); font-weight:800; font-size:clamp(19px,1.5vw,23px);
  letter-spacing:-.025em; color:#fff; line-height:1.12;
}
.u-card-b .d{font-size:14.5px; line-height:1.62; color:var(--u-body); margin:0;}
.u-card-b .k{
  display:flex; flex-wrap:wrap; gap:6px; margin-top:auto; padding-top:14px;
  border-top:1px solid var(--u-line);
}
.u-card-b .k span{
  font-family:var(--font-mono); font-size:11px; color:var(--u-body);
  background:rgba(255,255,255,.055); padding:5px 9px;
}

/* ---------- 7. Peel test ---------- */
.u-peel{max-width:none;}
.u-peel-grid{
  display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,.72fr);
  gap:clamp(20px,2.4vw,42px); align-items:stretch;
}
.u-stage{
  position:relative; width:100%; aspect-ratio:16/9;
  overflow:hidden; background:#000; cursor:ew-resize; touch-action:none;
}
.u-layer{position:absolute; inset:0;}
.u-layer img{width:100%; height:100%; object-fit:cover; display:block;}
/* the carrier sheet: desaturated, with a sheen so it reads as film lying on top */
.u-layer--film{
  clip-path:inset(0 calc(100% - var(--pos,52%)) 0 0);
  z-index:2;
}
.u-layer--film img{filter:saturate(.62) brightness(.80) contrast(1.02);}
.u-layer--film::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(108deg, rgba(255,255,255,.17) 0%, rgba(255,255,255,.01) 22%,
                    rgba(255,255,255,.21) 42%, rgba(255,255,255,.01) 58%,
                    rgba(255,255,255,.13) 100%),
    repeating-linear-gradient(74deg, rgba(255,255,255,.028) 0 1px, transparent 1px 11px);
}
.u-seam{
  position:absolute; top:0; bottom:0; z-index:3; width:1px; background:#fff;
  left:var(--pos,52%); box-shadow:0 0 22px rgba(0,0,0,.6);
}
.u-grip{
  position:absolute; top:50%; z-index:4; left:var(--pos,52%);
  transform:translate(-50%,-50%);
  width:52px; height:52px; border-radius:50%; background:var(--u-amber);
  color:var(--u-amber-ink); display:grid; place-items:center; cursor:ew-resize;
  box-shadow:0 6px 22px rgba(0,0,0,.45);
}
.u-grip svg{width:24px; height:24px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round;}
.u-grip:focus-visible{outline:2px solid #fff; outline-offset:3px;}
.u-stage-badge{
  position:absolute; bottom:14px; z-index:5;
  font-family:var(--font-mono); font-size:10.5px; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase;
  background:rgba(8,9,11,.74); color:#fff; padding:7px 11px; backdrop-filter:blur(6px);
}
.u-stage-badge--l{left:14px;}
.u-stage-badge--r{right:14px;}
.u-peel-foot{
  display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap;
  margin-top:16px; font-family:var(--font-mono); font-size:11.5px;
  letter-spacing:.08em; text-transform:uppercase; color:#7C828B;
}
.u-peel-foot b{color:var(--u-paper-ink);}

/* side rail: fills the void beside the stage with a scannable procedure */
.u-peel-side{display:flex; flex-direction:column; min-width:0;}
.u-peel-side-t{
  font-family:var(--font-mono); font-size:11px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:#A9700F;
  margin:0 0 4px; padding-bottom:14px; border-bottom:1px solid var(--u-paper-line);
}
.u-peel-steps{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; flex:1;}
.u-peel-steps li{
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:14px;
  padding-block:clamp(13px,1.4vw,19px); border-bottom:1px solid var(--u-paper-line);
}
.u-peel-steps .n{
  font-family:var(--font-mono); font-size:11px; font-weight:700;
  letter-spacing:.1em; color:#A9700F; padding-top:4px;
}
.u-peel-steps b{
  display:block; font-family:var(--font-display); font-weight:800;
  font-size:17px; letter-spacing:-.02em; color:var(--u-paper-ink); margin-bottom:4px;
}
.u-peel-steps p{font-size:13.5px; line-height:1.55; color:var(--u-paper-body); margin:0;}
.u-peel-note{
  margin:auto 0 0; padding-top:18px;
  font-size:12.5px; line-height:1.62; color:#7C828B;
}

/* ---------- 8. Factory wall ---------- */
.u-wall{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(10px,1.1vw,16px);}
.u-wall figure{margin:0; position:relative;}
.u-wall .w-2x2{grid-column:span 2; grid-row:span 2;}
.u-wall .w-2x1{grid-column:span 2;}
.u-wall .u-ph{height:100%; min-height:150px;}
.u-wall .u-ph img{position:absolute; inset:0; height:100%;}
.u-wall figcaption{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:46px 14px 13px;
  font-family:var(--font-mono); font-size:10.5px; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:#fff;
  background:linear-gradient(to top,
    rgba(8,9,11,.94) 0%, rgba(8,9,11,.80) 34%, rgba(8,9,11,.42) 68%, rgba(8,9,11,0) 100%);
}

/* ---------- 9. Process rail ---------- */
.u-rail{
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(240px,1fr);
  gap:clamp(12px,1.2vw,18px); overflow-x:auto; padding-bottom:16px;
  scroll-snap-type:x proximity;
}
.u-rail::-webkit-scrollbar{height:4px;}
.u-rail::-webkit-scrollbar-thumb{background:var(--u-paper-line);}
.u-step{scroll-snap-align:start; display:flex; flex-direction:column; background:var(--u-paper-2);}
.u-step .u-ph{aspect-ratio:4/3;}
.u-step-b{padding:16px 16px 20px; display:flex; flex-direction:column; gap:8px; flex:1;}
.u-step-b .n{
  font-family:var(--font-mono); font-size:11px; font-weight:700;
  letter-spacing:.13em; color:#A9700F;
}
.u-step-b .t{font-family:var(--font-display); font-weight:800; font-size:17.5px; letter-spacing:-.02em; color:var(--u-paper-ink);}
.u-step-b .d{font-size:13.5px; line-height:1.6; color:var(--u-paper-body); margin:0;}
.u-rail-hint{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:#8A9099; margin:0;
}
.u-rail-foot{
  display:flex; align-items:center; justify-content:flex-start;
  gap:18px; margin-top:16px;
}
.u-rail-nav{display:flex; gap:8px;}
.u-rail-btn{
  width:42px; height:42px; display:grid; place-items:center;
  background:transparent; border:1px solid var(--u-paper-line);
  color:var(--u-paper-ink); cursor:pointer;
  transition:background .16s, border-color .16s, color .16s, opacity .16s;
}
.u-rail-btn svg{
  width:16px; height:16px; stroke:currentColor; fill:none;
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
}
.u-rail-btn:hover:not(:disabled){
  background:var(--u-paper-ink); border-color:var(--u-paper-ink); color:var(--u-paper);
}
.u-rail-btn:disabled{opacity:.28; cursor:default;}
/* nothing to scroll (very wide viewport): the controls have no job */
.u-rail-foot.is-static{display:none;}

/* ---------- 10. Stats ---------- */
.u-stats{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid var(--u-line);
}
.u-band--paper .u-stats{border-top-color:var(--u-paper-line);}
.u-stats > div{padding:clamp(20px,2.2vw,32px) clamp(14px,1.6vw,26px) clamp(20px,2.2vw,32px) 0;}
.u-stats > div + div{
  padding-left:clamp(14px,1.6vw,26px);
  border-left:1px solid var(--u-line);
}
.u-band--paper .u-stats > div + div{border-left-color:var(--u-paper-line);}
.u-stats .n{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(28px,3vw,46px); letter-spacing:-.035em; line-height:1;
  color:var(--u-amber); margin-bottom:10px;
}
.u-band--paper .u-stats .n{color:#A9700F;}
.u-stats .n small{font-size:.48em; font-weight:700; margin-left:3px; letter-spacing:-.01em;}
.u-stats .n small:first-child{margin-left:0; margin-right:2px;}
.u-stats .l{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--u-mute);
}
.u-band--paper .u-stats .l{color:#7C828B;}

/* ---------- 11. Quality split ---------- */
.u-qc{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(14px,1.5vw,22px);}
.u-qc figure{margin:0;}
.u-qc .u-ph{aspect-ratio:4/3;}
.u-qc figcaption{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  padding-top:12px; font-family:var(--font-mono); font-size:10.5px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--u-mute);
}
.u-qc figcaption b{color:#fff; font-weight:700;}

/* ---------- 12. OEM ---------- */
.u-oem{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(14px,1.5vw,22px);}
.u-oem figure{margin:0;}
.u-oem .u-ph{aspect-ratio:1/1;}
.u-oem figcaption{
  padding-top:12px; font-family:var(--font-mono); font-size:10.5px;
  letter-spacing:.12em; text-transform:uppercase; color:#7C828B;
}
.u-oem figcaption b{color:var(--u-paper-ink); font-weight:700;}

/* ---------- 13. Applications ---------- */
.u-tiles{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(12px,1.3vw,20px);}
.u-tile{position:relative; overflow:hidden; display:block;}
.u-tile .u-ph{aspect-ratio:4/3;}
.u-tile .u-ph img{transition:transform .6s cubic-bezier(.2,.7,.3,1);}
.u-tile:hover .u-ph img{transform:scale(1.05);}
.u-tile-cap{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:58px 16px 16px; display:flex; align-items:baseline;
  justify-content:space-between; gap:12px;
  background:linear-gradient(to top,
    rgba(8,9,11,.95) 0%, rgba(8,9,11,.86) 30%, rgba(8,9,11,.55) 62%, rgba(8,9,11,0) 100%);
}
.u-tile-cap b{
  font-family:var(--font-display); font-weight:800; font-size:18px;
  letter-spacing:-.022em; color:#fff;
}
.u-tile-cap span{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.12em;
  text-transform:uppercase; color:#A5AAB2;
}

/* ---------- 14. Documents ---------- */
.u-docs{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid var(--u-line); border-left:1px solid var(--u-line);
}
.u-docs > div{
  padding:clamp(18px,2vw,28px); border-right:1px solid var(--u-line);
  border-bottom:1px solid var(--u-line); display:flex; flex-direction:column; gap:9px;
}
.u-docs .k{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--u-mute);
}
.u-docs b{
  font-family:var(--font-display); font-weight:700; font-size:16.5px;
  letter-spacing:-.018em; color:#fff; line-height:1.3;
}

/* ---------- 15. CTA ---------- */
.u-cta{position:relative; background:#000; overflow:hidden;}
.u-cta-media{position:absolute; inset:0;}
.u-cta-media img{width:100%; height:100%; object-fit:cover; filter:saturate(.9) contrast(1.04);}
.u-cta-scrim{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(92deg, rgba(8,9,11,.95) 0%, rgba(8,9,11,.86) 40%, rgba(8,9,11,.42) 100%);
}
.u-cta-in{position:relative; z-index:2; padding-block:clamp(64px,7.5vw,116px);}
.u-cta-in h2{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(28px,3.4vw,48px); line-height:1.06; letter-spacing:-.033em;
  color:#fff; margin:0 0 18px; max-width:20ch;
}
.u-cta-in h2 em{font-style:normal; color:var(--u-amber);}
.u-cta-in p{font-size:clamp(15px,1.15vw,17px); line-height:1.68; color:#C6CAD1; max-width:56ch; margin:0 0 30px;}
.u-cta-points{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px;}
.u-cta-points li{
  display:flex; gap:12px; align-items:flex-start;
  font-size:14.5px; line-height:1.55; color:#C6CAD1;
}
.u-cta-points li::before{
  content:""; flex:0 0 auto; width:6px; height:6px; margin-top:7px; background:var(--u-amber);
}
/* anchored sections must clear the sticky header */
body.skin-utf [id]{scroll-margin-top:96px;}

/* ---------- 16. Reveal, focus, rail affordance ---------- */
/* Hidden state only exists when the inline head script set html.js-reveal,
   so a JS failure or reduced-motion preference never hides content. */
html.js-reveal [data-reveal]{opacity:0; transform:translateY(16px);}
html.js-reveal [data-reveal].is-in{
  opacity:1; transform:none;
  transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1);
}
@media (prefers-reduced-motion:reduce){
  html.js-reveal [data-reveal]{opacity:1; transform:none;}
}
/* A print or "save as PDF" never scrolls, so never hide anything there. */
@media print{
  html.js-reveal [data-reveal]{opacity:1 !important; transform:none !important;}
}

body.skin-utf a:focus-visible,
body.skin-utf button:focus-visible,
body.skin-utf [tabindex]:focus-visible{
  outline:2px solid var(--u-amber); outline-offset:3px;
}
body.skin-utf .u-band--paper a:focus-visible,
body.skin-utf .u-band--paper button:focus-visible{outline-color:#8A5A05;}

/* The process rail scrolls; fade the trailing edge so that reads as "more →" */
.u-rail{
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 72px),transparent 100%);
  mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 72px),transparent 100%);
}

/* ---------- 18. Credentials band ---------- */
.u-creds{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid var(--u-line); border-left:1px solid var(--u-line);
}
.u-creds > div{
  padding:clamp(18px,2vw,28px);
  border-right:1px solid var(--u-line); border-bottom:1px solid var(--u-line);
  display:flex; flex-direction:column; gap:9px;
}
.u-creds .k{
  font-family:var(--font-mono); font-size:10.5px; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:var(--u-amber);
}
.u-creds b{
  font-family:var(--font-display); font-weight:700; font-size:16.5px;
  letter-spacing:-.018em; color:#fff; line-height:1.28;
}
.u-creds p{font-size:13.5px; line-height:1.6; color:var(--u-body); margin:0;}

/* the credentials grid also runs on a light band */
.u-band--paper .u-creds{border-color:var(--u-paper-line);}
.u-band--paper .u-creds > div{border-color:var(--u-paper-line);}
.u-band--paper .u-creds .k{color:#A9700F;}
.u-band--paper .u-creds b{color:var(--u-paper-ink);}
.u-band--paper .u-creds p{color:var(--u-paper-body);}

/* A logo wall needs written consent from every distributor shown. Until those
   exist, an honest sentence beats six empty dashed boxes. */
.u-refs{
  display:grid; grid-template-columns:minmax(0,auto) minmax(0,1fr);
  gap:clamp(14px,2vw,32px); align-items:baseline;
  margin-top:clamp(26px,3vw,42px);
  padding-top:clamp(22px,2.4vw,32px); border-top:1px solid var(--u-line);
}
.u-refs .lbl{
  font-family:var(--font-mono); font-size:10.5px; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:var(--u-amber);
  white-space:nowrap;
}
.u-refs p{font-size:14px; line-height:1.65; color:var(--u-body); margin:0; max-width:74ch;}
.u-band--paper .u-refs{border-top-color:var(--u-paper-line);}
.u-band--paper .u-refs .lbl{color:#A9700F;}
.u-band--paper .u-refs p{color:var(--u-paper-body);}

/* ---------- 19. FAQ ---------- */
.u-faq{
  display:grid; grid-template-columns:minmax(0,.76fr) minmax(0,1.24fr);
  gap:clamp(28px,4vw,76px); align-items:start;
}
.u-faq .u-head{margin-bottom:0;}
.u-faq-side{position:sticky; top:104px;}
.u-faq-side .u-lede{
  font-size:15.5px; line-height:1.68; color:var(--u-paper-body);
  margin:18px 0 22px; max-width:44ch;
}
.u-band--paper .accordion{border-top-color:var(--u-paper-line);}
.u-band--paper .acc-item{border-bottom-color:var(--u-paper-line);}
.u-band--paper .acc-q{color:var(--u-paper-ink); font-size:17.5px; padding-block:21px;}
.u-band--paper .acc-q:hover{color:#A9700F;}
.u-band--paper .acc-a{color:var(--u-paper-body); max-width:none; font-size:15px; line-height:1.72;}

/* ---------- 20. Inline enquiry form on the CTA ---------- */
.u-cta-grid{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.84fr);
  gap:clamp(32px,4.5vw,80px); align-items:center;
}
.u-form-card{
  background:#fff; padding:clamp(22px,2.4vw,34px);
  box-shadow:0 26px 64px rgba(0,0,0,.46);
}
.u-form-card .fh{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(19px,1.5vw,23px); letter-spacing:-.026em;
  color:#131519; margin:0 0 7px;
}
.u-form-card .fp{font-size:13.5px; line-height:1.62; color:#565C65; margin:0 0 20px;}
.u-form-card .form-grid{gap:14px;}
.u-form-card .field{gap:6px;}
.u-form-card .field label{color:#3C424B; font-size:10.5px;}
.u-form-card .field input,
.u-form-card .field select{
  padding:11px 13px; font-size:14.5px; border-color:#D8DCE1; background:#fff; color:#131519;
}
.u-form-card .field input:focus,
.u-form-card .field select:focus{border-color:var(--u-amber); box-shadow:0 0 0 3px rgba(242,169,59,.22);}
.u-form-card .btn{width:100%; margin-top:6px;}
.u-form-card .form-note{color:#7C828B; margin-top:14px; font-size:11.5px;}
.u-form-card .form-success{margin-bottom:16px;}
.u-form-card .form-success.is-visible + .form-grid,
.u-form-card .form-success.is-visible ~ .btn{opacity:.55;}

/* ---------- 21. Responsive ---------- */
@media (max-width:1180px){
  .u-hero-in{grid-template-columns:minmax(0,1fr); min-height:0; gap:36px;}
  .u-facts{max-width:620px;}
  .u-cards{grid-template-columns:repeat(2,minmax(0,1fr));}
  .u-head--split{grid-template-columns:minmax(0,1fr); align-items:start;}
  .u-head--split .u-lede{max-width:none;}
  .u-peel-grid{grid-template-columns:minmax(0,1fr);}
  .u-peel-note{margin-top:0;}
  .u-wall{grid-template-columns:repeat(2,minmax(0,1fr));}
  .u-wall .w-2x2{grid-column:span 2; grid-row:span 1;}
  .u-wall .w-2x1{grid-column:span 2;}
  .u-stats{grid-template-columns:repeat(2,minmax(0,1fr));}
  .u-stats > div:nth-child(odd){padding-left:0; border-left:0;}
  .u-stats > div{border-top:1px solid var(--u-line);}
  .u-band--paper .u-stats > div{border-top-color:var(--u-paper-line);}
  .u-stats > div:nth-child(-n+2){border-top:0;}
  .u-tiles{grid-template-columns:repeat(2,minmax(0,1fr));}
  .u-docs{grid-template-columns:repeat(2,minmax(0,1fr));}
  .u-creds{grid-template-columns:repeat(2,minmax(0,1fr));}
  .u-faq{grid-template-columns:minmax(0,1fr);}
  .u-faq-side{position:static;}
  .u-cta-grid{grid-template-columns:minmax(0,1fr);}
}
@media (max-width:820px){
  .u-cards{grid-template-columns:minmax(0,1fr);}
  .u-qc{grid-template-columns:minmax(0,1fr);}
  .u-oem{grid-template-columns:minmax(0,1fr);}
  .u-tiles{grid-template-columns:minmax(0,1fr);}
  .u-docs{grid-template-columns:minmax(0,1fr);}
  .u-hero-in{padding-block:56px 44px;}
  .u-hero h1{font-size:clamp(32px,9vw,46px);}
  .u-facts{padding-inline:14px;}
  .u-peel-foot{font-size:10.5px;}
  .u-stage-badge{font-size:9.5px; padding:6px 9px;}
  .u-form-card .form-grid{grid-template-columns:minmax(0,1fr);}
  .u-refs{grid-template-columns:minmax(0,1fr); gap:10px;}

  /* small mono links are ~18px tall — give them a thumb-sized hit area */
  body.skin-utf .topbar-links a,
  body.skin-utf .u-link{padding-block:9px;}
  body.skin-utf .lang-switch{min-height:44px; padding-inline:8px; margin-inline:-8px;}
  body.skin-utf .site-footer li{margin-bottom:0;}
  body.skin-utf .site-footer li a{display:inline-block; padding-block:9px;}
  body.skin-utf .footer-bottom .legal a{display:inline-block; padding-block:9px;}
}
@media (max-width:560px){
  .u-wall{grid-template-columns:minmax(0,1fr);}
  .u-wall .w-2x2,.u-wall .w-2x1{grid-column:span 1;}
  .u-stats{grid-template-columns:minmax(0,1fr);}
  .u-stats > div{padding-left:0 !important; border-left:0 !important;}
  .u-stats > div:nth-child(2){border-top:1px solid var(--u-line);}
  .u-band--paper .u-stats > div:nth-child(2){border-top-color:var(--u-paper-line);}
  .u-grip{width:44px; height:44px;}
  .u-rail{grid-auto-columns:minmax(210px,1fr);}
  .u-creds{grid-template-columns:minmax(0,1fr);}
  .u-refs{grid-template-columns:minmax(0,1fr); gap:10px;}
}

/* ---------- 首页紧凑工厂带（第二十四轮） ----------
   原工厂区块靠 .w-2x2 跨两行撑高（7 图墙）。首页现在只留一段工厂内容：
   一行缩略图 + 4 个数字，细节全部移到 factory.html。
   宽度断点沿用 .u-wall（1180 / 560），但 ≤560 时**保持两列** ——
   4 张竖排会有 700px 高，与「工厂有就行」正好相反。
   放在文件末尾是为了盖过上面的 .u-wall 媒体查询（同特异度，后写者胜）。 */
.u-wall--strip .u-ph{min-height:clamp(170px,24vw,230px);}
@media (max-width:560px){
  .u-wall--strip{grid-template-columns:repeat(2,minmax(0,1fr));}
  .u-wall--strip .u-ph{min-height:clamp(120px,34vw,168px);}
}
/* 561–1180 走两列，单格变宽 → 提高高度，避免被压成 2:1 的扁条 */
@media (max-width:1180px) and (min-width:561px){
  .u-wall--strip .u-ph{min-height:clamp(200px,27vw,270px);}
}