/* ============================================================
     EFX.co.uk framework replica — colors swapped to YSDICE gold
     ============================================================ */
  :root{
    --primary:#0099a8;          /* EFX teal */
    --primary-d:#005f70;        /* EFX dark teal */
    --primary-tint:#e6fdff;     /* EFX teal tint */
    --accent:#ffc600;           /* EFX yellow kept-family but ours */
    --shape-2:#41586b;          /* secondary shape color (EFX lime → dusty blue) */
    --ink:#222222;
    --body:#555555;
    --grey:#f5f5f5;
    --line:#e8e4dc;
    --dark:#141413;             /* EFX footer black */
    --head:"Jost",-apple-system,"PingFang SC",sans-serif;      /* ≈ cera-pro */
    --sans:"Nunito Sans",-apple-system,"PingFang SC",sans-serif; /* ≈ rooney-sans */
    --max:1460px;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{overflow-x:clip}
  body{background:#fff;color:var(--body);font-family:var(--sans);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:clip}
  a{color:inherit;text-decoration:none}
  img{max-width:100%;display:block}
  ::selection{background:var(--primary);color:#fff}
  .container{max-width:var(--max);margin:0 auto;padding:0 clamp(10px,2vw,30px);position:relative}
  h1,h2,h3,h4{font-family:var(--head);color:var(--ink);font-weight:500;line-height:1.18}

  /* EFX sub-heading: small uppercase tracked label */
  .sub-heading{font-family:var(--head);font-size:15px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--primary);margin-bottom:12px}
  .heading--1{font-size:clamp(32px,3.4vw,46px);margin-bottom:18px}
  .heading--2{font-size:clamp(27px,2.8vw,38px);margin-bottom:16px}

  /* EFX button: uppercase, tracked, arrow icon, pill */
  /* EFX button: two-layer fill, diagonal wipe (clip-path 83%) slides in on hover, icon +8px */
  .btn{display:inline-flex;align-items:center;gap:14px;font-family:var(--head);font-size:16px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:transparent;border:none;padding:16px 30px;cursor:pointer;position:relative;overflow:hidden;z-index:1;transition:color .2s}
  .btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--primary)}
  .btn::after{content:"";position:absolute;top:0;left:0;height:100%;width:120%;z-index:-1;background:var(--primary-d);transform:translateX(-100%);transform-origin:left center;transition:transform .2s linear;clip-path:polygon(0 0,100% 0,83% 100%,0 100%)}
  .btn:hover::after{transform:none}
  .btn:active{transform:scale(.985)}
  .btn .arr{transition:transform .2s}
  .btn:hover .arr{transform:translateX(8px)}
  .btn--white{color:var(--primary)}
  .btn--white::before{background:#fff}
  .btn--white::after{background:var(--primary-tint)}
  .btn--dark{color:#fff}
  .btn--dark::before{background:#222}
  .btn--dark::after{background:#000}
  .btn:focus-visible{outline:3px solid rgba(0,153,168,.4);outline-offset:2px}
  .arr-svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.4;flex-shrink:0}

  /* ============ EFX fixed floating header ============ */
  .header{position:fixed;top:0;left:0;right:0;z-index:1000;padding:10px;display:flex;transition:padding .1s linear}
  /* --p = scroll progress 0(top,big logo,transparent) -> 1(scrolled,small logo,white). Set by JS, 1:1 with scroll = silky */
  .header{--p:1}
  .header.on-hero{--p:0}
  .header__bg{position:absolute;inset:0;background:#fff;box-shadow:0 6px 18px -8px rgba(20,20,19,.18);opacity:var(--p);pointer-events:none}
  .header__inner{position:relative;width:100%;max-width:var(--max);margin:0 auto;display:flex;flex-direction:column;padding:0 clamp(4px,1.4vw,20px)}
  /* EFX top contact row — collapses smoothly as you scroll */
  .header__top{display:flex;justify-content:flex-end;align-items:center;gap:28px;font-family:var(--head);font-size:13.5px;font-weight:500;letter-spacing:.04em;color:var(--ink);overflow:hidden;padding-top:12px}
  .header.on-hero .header__top{color:#fff;opacity:calc(1 - var(--p));max-height:calc((1 - var(--p)) * 44px);padding-top:calc((1 - var(--p)) * 12px)}
  .header__top a{display:inline-flex;align-items:center;gap:8px;transition:color .2s}
  .header__top a:hover{color:var(--accent)}
  .header__row{display:flex;align-items:center;justify-content:space-between;gap:18px;height:64px;padding-top:calc((1 - var(--p)) * 76px)}
  .logo{display:flex;align-items:center;gap:14px}
  /* EFX-style logo: big "YUSHUN" circle at top, scrubs down to small "YS" circle on scroll */
  .logo-mark{width:calc(56px + (1 - var(--p)) * 102px);height:calc(56px + (1 - var(--p)) * 102px);border-radius:50%;background:#141413;border:solid var(--primary);border-width:calc(6px + (1 - var(--p)) * 6px);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-family:var(--head);font-weight:700;color:#fff;position:relative;will-change:width,height}
  .logo-mark .lm-full img{width:58%;height:58%;object-fit:contain;display:block;margin-top:4%}
  .lw-img{height:27px;width:auto;display:block;margin-bottom:2px}
  footer .logo-word .lw-img{height:25px}
  .logo-mark .lm-full,.logo-mark .lm-short{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
  .logo-mark .lm-full{font-size:calc(13px + (1 - var(--p)) * 10px);letter-spacing:.02em;opacity:clamp(0,calc((0.55 - var(--p)) / 0.4),1)}
  .logo-mark .lm-short{font-size:16px;letter-spacing:.05em;opacity:clamp(0,calc((var(--p) - 0.55) / 0.4),1)}
  .logo-mark .lm-die{width:58%;height:58%;display:block}
  .logo-word{opacity:clamp(0,calc((var(--p) - 0.45) / 0.45),1);transform:translateX(calc((1 - var(--p)) * -6px));white-space:nowrap}
  .logo b{font-family:var(--head);font-size:23px;font-weight:700;color:var(--ink);line-height:1.05;letter-spacing:.02em}
  .logo b span{color:var(--primary)}
  .logo small{display:block;font-family:var(--head);font-size:10px;letter-spacing:.22em;color:#999;text-transform:uppercase;font-weight:600}
  .header.on-hero:not(.scrolled) .logo small{color:rgba(255,255,255,.75)}
  nav>ul{display:flex;gap:2px;list-style:none;align-items:center}
  /* EFX nav: uppercase, tracked, with dropdown chevrons */
  nav a.top{display:inline-flex;align-items:center;gap:7px;font-family:var(--head);font-size:14px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:color-mix(in srgb,#222 calc(var(--p) * 100%),#fff);padding:10px 15px;transition:color .15s}
  nav a.top:hover{color:var(--accent)}
  .chev{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2;flex-shrink:0;opacity:.8}
  /* EFX dropdown menus: white panel, circular thumbs, dividers, browse-all footer */
  nav>ul>li{position:relative}
  .sub{display:block;visibility:hidden;opacity:0;transform:translateY(16px);pointer-events:none;position:absolute;top:100%;left:8px;background:rgba(255,255,255,.7);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:4px;box-shadow:0 20px 50px rgba(0,0,0,.18);padding:0;min-width:260px;z-index:60;list-style:none;overflow:hidden;transition:opacity .26s ease,transform .34s cubic-bezier(.22,1,.36,1),visibility 0s linear .3s}
  nav>ul>li:hover>.sub,nav>ul>li:focus-within>.sub{visibility:visible;opacity:1;transform:translateY(0);pointer-events:auto;transition-delay:0s,0s,0s}
  nav>ul>li:hover>a.top{color:var(--accent);text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px}
  .header.scrolled nav>ul>li:hover>a.top{color:var(--primary)}
  .sub li+li{border-top:1px solid var(--line)}
  .sub a{display:flex;align-items:center;gap:14px;font-family:var(--sans);font-size:15.5px;font-weight:700;letter-spacing:0;text-transform:none;color:var(--ink);padding:11px 18px;transition:color .15s}
  .sub a:hover{color:var(--primary)}
  .sub .thumb{width:38px;height:38px;border-radius:50%;object-fit:cover;flex-shrink:0;box-shadow:0 1px 4px rgba(0,0,0,.25)}
  .sub .browse-all{font-weight:800}
  .sub .browse-all svg{width:12px;height:12px;fill:none;stroke:var(--primary);stroke-width:2.4}
  /* product / manufacturing card grids (EFX browse-by-material) */
  .cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
  .pcard{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;transition:transform .25s,box-shadow .25s;display:block;position:relative}
  .pcard:hover{transform:translateY(-6px);box-shadow:0 20px 44px -16px rgba(0,0,0,.16)}
  .pcard .im{overflow:hidden;position:relative}
  .pcard img{aspect-ratio:4/3;object-fit:cover;width:100%;transition:transform .5s}
  .pcard:hover img{transform:scale(1.05)}
  .pcard .moq{position:absolute;top:12px;left:12px;background:#fff;color:var(--primary-d);font-family:var(--head);font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:7px 13px;box-shadow:0 2px 8px rgba(0,0,0,.12)}
  .pcard .bd{padding:18px 20px 20px}
  .pcard h3{font-size:20px;margin-bottom:5px}
  .pcard h3 small{font-family:var(--sans);font-size:12.5px;color:#999;font-weight:700;margin-left:8px}
  .pcard p{font-size:14.5px}
  .pcard .fx{margin-top:10px;display:inline-flex;align-items:center;gap:9px;font-family:var(--head);font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--primary)}
  .pcard:hover .fx{text-decoration:underline;text-underline-offset:3px}
  .pcard--flat{background:linear-gradient(150deg,var(--primary-tint),#fff)}
  .pcard--flat .bd{padding:26px 24px;display:flex;flex-direction:column;justify-content:center;min-height:100%}
  /* sustainability strip */
  .sustain{background:var(--primary-tint);border-radius:20px;max-width:var(--max);margin:0 auto clamp(60px,7vw,120px);padding:clamp(28px,4vw,52px);display:grid;grid-template-columns:1.15fr 1fr;gap:40px;align-items:center;position:relative;overflow:hidden}
  .sustain ul{list-style:none;display:flex;flex-direction:column;gap:12px;font-size:15.5px}
  .sustain li{display:flex;gap:11px;align-items:baseline}
  .sustain li::before{content:"✓";color:var(--primary);font-weight:800}
  .sustain .ph{border-radius:14px;overflow:hidden;box-shadow:0 18px 40px -16px rgba(0,0,0,.2)}
  .sustain img{aspect-ratio:4/3;object-fit:cover;width:100%}
  .header .btn{padding:13px 26px;font-size:14.5px}
  .menu-toggle{display:none;background:#fff;border:1px solid var(--line);border-radius:10px;padding:9px 13px;font-size:17px;cursor:pointer;line-height:1;color:var(--ink)}

  /* ============ HERO: full-width 16:9 video ============ */
  /* EFX hero: full-width 16:9 video — fills the whole first viewport */
  .hero{position:relative;width:100%;aspect-ratio:16/9;min-height:480px;background:var(--dark);margin-bottom:clamp(70px,8vw,130px);overflow:visible;z-index:3}
  /* widescreen: the video owns the whole first viewport, not a 16:9 letterbox */
  @media(min-width:900px){.hero{aspect-ratio:auto;height:100svh;min-height:560px;max-height:1300px}}
  .hero__media{position:absolute;inset:0;overflow:hidden}
  .hero video,.hero .hero-fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
  .hero__note{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);background:rgba(20,20,19,.65);backdrop-filter:blur(6px);color:#ddd;font-size:12px;border-radius:999px;padding:7px 16px;letter-spacing:.04em;white-space:nowrap;z-index:3}
  /* hero caption removed per client — keep video clean, no overlay gradient */
  /* hero captions — triggered by video time via .play/.bye classes */
  .hero__kinetic{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden}
  .kin{position:absolute;left:0;right:0;top:50%;translate:0 -50%;text-align:center;opacity:1}
  .kin.bye{animation:kinHide .7s ease forwards}
  @keyframes kinHide{to{opacity:0}}
  /* logo: cinematic blur -> sharp */
  .kin--logo .k-solid{display:inline-block;height:clamp(50px,9.5vw,140px);width:auto;opacity:0;filter:blur(16px) drop-shadow(0 6px 30px rgba(0,0,0,.5));transform:scale(1.1)}
  .kin--logo.play .k-solid{animation:cineIn 1.5s cubic-bezier(.22,1,.36,1) .1s forwards}
  @keyframes cineIn{to{opacity:1;filter:blur(0) drop-shadow(0 6px 30px rgba(0,0,0,.5));transform:scale(1)}}
  /* taglines: EFX echo slide-out from behind the white text */
  .kin--text{font-size:clamp(22px,4.2vw,58px);height:5.2em}
  .kin--text span{position:absolute;left:50%;top:50%;translate:-50% -50%;font-family:var(--head);font-weight:700;letter-spacing:.05em;white-space:nowrap;color:transparent;opacity:0}
  .kin--text .k-solid{color:#fff;text-shadow:0 4px 26px rgba(0,0,0,.5);z-index:2}
  .kin--text .e3,.kin--text .e4{-webkit-text-stroke:1.4px rgba(0,153,168,.7)}
  .kin--text .e2,.kin--text .e5{-webkit-text-stroke:1.2px rgba(0,153,168,.45)}
  .kin--text .e1,.kin--text .e6{-webkit-text-stroke:1px rgba(0,153,168,.25)}
  @keyframes kinSolid{to{opacity:1}}
  @keyframes tOut1{0%{translate:-50% -50%;opacity:0}30%{opacity:.25}100%{translate:-50% calc(-50% - 1.95em);opacity:.35}}
  @keyframes tOut2{0%{translate:-50% -50%;opacity:0}30%{opacity:.4}100%{translate:-50% calc(-50% - 1.3em);opacity:.6}}
  @keyframes tOut3{0%{translate:-50% -50%;opacity:0}30%{opacity:.6}100%{translate:-50% calc(-50% - .65em);opacity:.9}}
  @keyframes tOut4{0%{translate:-50% -50%;opacity:0}30%{opacity:.6}100%{translate:-50% calc(-50% + .65em);opacity:.9}}
  @keyframes tOut5{0%{translate:-50% -50%;opacity:0}30%{opacity:.4}100%{translate:-50% calc(-50% + 1.3em);opacity:.6}}
  @keyframes tOut6{0%{translate:-50% -50%;opacity:0}30%{opacity:.25}100%{translate:-50% calc(-50% + 1.95em);opacity:.35}}
  .kin--text.play .k-solid{animation:kinSolid .8s cubic-bezier(.22,1,.36,1) .05s forwards}
  .kin--text.play .e3{animation:tOut3 1.6s cubic-bezier(.22,1,.36,1) .55s forwards}
  .kin--text.play .e4{animation:tOut4 1.6s cubic-bezier(.22,1,.36,1) .55s forwards}
  .kin--text.play .e2{animation:tOut2 1.6s cubic-bezier(.22,1,.36,1) .7s forwards}
  .kin--text.play .e5{animation:tOut5 1.6s cubic-bezier(.22,1,.36,1) .7s forwards}
  .kin--text.play .e1{animation:tOut1 1.6s cubic-bezier(.22,1,.36,1) .85s forwards}
  .kin--text.play .e6{animation:tOut6 1.6s cubic-bezier(.22,1,.36,1) .85s forwards}
  .hero__caption{position:absolute;inset:0;z-index:4;display:flex;align-items:center}
  .hero__caption h1{color:#fff;font-size:clamp(30px,4.4vw,58px);line-height:1.08;max-width:16ch;margin-bottom:16px;text-shadow:0 2px 24px rgba(0,0,0,.35)}
  .hero__caption p{color:rgba(255,255,255,.92);font-size:clamp(15px,1.5vw,19px);max-width:52ch;margin-bottom:26px;text-shadow:0 1px 12px rgba(0,0,0,.4)}
  .hero__cta{display:flex;gap:14px;flex-wrap:wrap}
  @media(max-width:600px){.hero__caption{align-items:flex-end;padding-bottom:60px}.hero::after{background:linear-gradient(0deg,rgba(20,20,19,.75),transparent 60%)}}
  /* real store trust stats — big band directly under hero (delei-mfg style) */
  .statband{padding:clamp(30px,4vw,56px) 0 clamp(40px,5vw,70px)}
  .trustbar{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(24px,5vw,72px);text-align:center;position:relative;z-index:5}
  .trustbar__i b{display:block;font-family:var(--head);font-size:clamp(40px,5.5vw,68px);font-weight:700;color:var(--primary-d);line-height:1;letter-spacing:-.01em}
  .trustbar__i span{display:block;margin-top:10px;font-size:14px;color:var(--body);line-height:1.45;font-weight:600}
  .trustbar__i{opacity:0;transform:translateY(16px);transition:opacity .5s,transform .5s}
  .trustbar.in .trustbar__i{opacity:1;transform:none}
  .trustbar.in .trustbar__i:nth-child(2){transition-delay:.08s}
  .trustbar.in .trustbar__i:nth-child(3){transition-delay:.16s}
  .trustbar.in .trustbar__i:nth-child(4){transition-delay:.24s}
  .trustbar.in .trustbar__i:nth-child(5){transition-delay:.32s}
  /* logo die: slow silky spin-morph between the 11 shapes */
  .logo-mark .lm-die{transition:transform .38s cubic-bezier(.4,0,.2,1),opacity .38s ease}
  .lm-die.die-out{transform:rotate(90deg) scale(.35);opacity:0}
  .lm-die.die-in{animation:dieIn .45s cubic-bezier(.22,1,.36,1)}
  @keyframes dieIn{0%{transform:rotate(-90deg) scale(.35);opacity:0}100%{transform:rotate(0) scale(1);opacity:1}}
  /* process flow: rotating dice circles + flowing connector lines */
  .flow__die{border:2px solid var(--primary);background:#fff;color:var(--primary-d)}
  .flow__die svg{width:60%;height:60%;fill:none;stroke:var(--primary-d);stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round;animation:spinDie 9s linear infinite}
  .flow__step:nth-child(even) .flow__die svg{animation-duration:12s;animation-direction:reverse}
  .flow__step:nth-child(3n) .flow__die svg{animation-duration:7s}
  @keyframes spinDie{to{transform:rotate(360deg)}}
  .flow__step:not(:last-child)::after{background:linear-gradient(90deg,var(--primary) 0%,var(--accent) 25%,var(--primary) 50%,var(--accent) 75%,var(--primary) 100%);background-size:200% 100%;animation:lineFlow 2.4s linear infinite}
  @keyframes lineFlow{to{background-position:-200% 0}}
  @media(prefers-reduced-motion:reduce){.flow__die svg,.flow__step:not(:last-child)::after{animation:none}}
  /* EFX decorative shapes — real assets, recolored to YSDICE palette */
  .shape{position:absolute;background:no-repeat center center/contain;pointer-events:none;user-select:none}
  .hero .shape--hero-left{background-image:url(shape-1.svg?dice2);width:clamp(230px,26vw,380px);height:clamp(263px,30vw,434px);left:-55px;bottom:-330px;z-index:4}
  /* pulled right and behind the stat bar so it can never cover the numbers */
  .hero .shape--hero-right{background-image:url(shape-5.svg?dice2);width:clamp(300px,34vw,500px);height:clamp(343px,39vw,571px);right:-220px;bottom:-455px;z-index:1}

  /* ============ image-text (EFX homepage intro) ============ */
  .image-text{margin-bottom:clamp(60px,7vw,120px);position:relative}
  .image-text .shape--grey{background-image:url(shape-grey.svg?dice2);opacity:.2;width:434px;height:497px;top:-150px;left:50%;transform:translateX(140px);z-index:-1}
  .image-text .container{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,80px);align-items:center}
  .image-text__text{max-width:730px}
  .image-text__text p{margin-bottom:26px;max-width:56ch}
  .image-text__text p a{color:var(--primary);font-weight:700;text-decoration:underline;text-underline-offset:2px}
  /* image-grid: floating photos that cycle (EFX hero-images) */
  .image-grid{position:relative;display:grid;grid-template-columns:repeat(8,1fr);grid-auto-rows:34px;gap:14px}
  .ig{border-radius:14px;overflow:hidden;box-shadow:0 18px 40px -14px rgba(0,0,0,.28);position:relative}
  .ig img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;opacity:0;transition:opacity .8s ease}
  .ig img.active{opacity:1}
  .ig--1{grid-column:1/span 5;grid-row:1/span 7}
  .ig--2{grid-column:6/span 3;grid-row:2/span 4}
  .ig--3{grid-column:6/span 3;grid-row:6/span 5}
  .ig--4{grid-column:2/span 4;grid-row:8/span 4}
  .image-grid .shape--ig{background-image:url(shape-3.svg?dice2);right:-85px;bottom:-95px;width:235px;height:268px;z-index:-1}

  /* ============ products blocks (EFX .blocks asymmetric grid) ============ */
  .section{margin-bottom:clamp(60px,7vw,120px)}
  .blocks{display:grid;grid-template-columns:730fr 20px 400fr;grid-template-rows:min-content 20px min-content}
  .blocks__block{border-radius:18px;overflow:hidden;position:relative;display:block}
  .blocks__block:nth-child(1){grid-column:1;grid-row:1/span 3}
  .blocks__block:nth-child(2){grid-column:3;grid-row:1}
  .blocks__block:nth-child(3){grid-column:3;grid-row:3}
  .card--pb{position:relative;height:100%;min-height:250px;background:var(--grey)}
  .card--pb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
  .card--pb:hover img{transform:scale(1.045)}
  .card--pb .veil{position:absolute;inset:0;background:linear-gradient(to top,rgba(15,12,8,.82) 0%,rgba(15,12,8,.25) 46%,transparent 70%)}
  .card--pb .card__content{position:absolute;left:0;right:0;bottom:0;padding:26px 30px;color:#fff}
  .card--pb .sub-heading{color:var(--accent);margin-bottom:6px;font-size:13px}
  .card--pb h3{font-size:clamp(22px,2vw,30px);color:#fff;margin-bottom:6px}
  .card--pb p{font-size:15px;color:rgba(255,255,255,.85);max-width:52ch;margin-bottom:12px}
  .card--pb .faux{display:inline-flex;align-items:center;gap:10px;font-family:var(--head);font-size:14px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
  .card--pb .faux .arr-svg{transition:transform .2s}
  .card--pb:hover .faux .arr-svg{transform:translateX(4px)}

  /* ============ CTA strips (EFX cta-strip) ============ */
  .cta-strip{position:relative;color:#fff;margin:0 auto clamp(80px,9vw,160px);max-width:var(--max);border-radius:20px;background:var(--primary);display:grid;grid-template-columns:1fr 1.15fr;overflow:visible}
  .cta-strip--blue{background:var(--shape-2)}
  .cta-strip__image{position:relative;border-radius:20px 0 0 20px;overflow:hidden;min-height:300px}
  .cta-strip__image img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .cta-strip__content{padding:clamp(30px,4vw,60px);display:flex;flex-direction:column;justify-content:center;position:relative;z-index:2}
  .cta-strip h2{color:#fff;font-size:clamp(26px,2.6vw,36px);margin-bottom:12px}
  .cta-strip p{color:rgba(255,255,255,.9);max-width:56ch;margin-bottom:24px}
  .cta-strip .btn{align-self:flex-start}
  .cta-strip .shape--cta{background-image:url(cta-shape.svg?dice2);width:528px;height:638px;right:-276px;bottom:-177px;z-index:1}
  .cta-stats{display:flex;gap:34px;flex-wrap:wrap;margin-bottom:26px}
  .cta-stat b{font-family:var(--head);font-size:clamp(34px,3vw,46px);font-weight:700;color:var(--accent);display:block;line-height:1.05}
  .cta-stat span{font-size:14px;color:rgba(255,255,255,.85)}

  /* ============ clients (EFX section--clients) ============ */
  .clients{text-align:center}
  .clients h2{font-size:clamp(22px,2vw,28px);margin-bottom:30px}
  .clients__row{display:flex;justify-content:center;align-items:center;gap:clamp(14px,2vw,26px);flex-wrap:wrap;max-width:1000px;margin:0 auto}
  .clients__logo{font-family:var(--head);font-weight:600;font-size:17px;letter-spacing:.04em;color:#777;background:var(--grey);border-radius:999px;padding:11px 22px;transition:color .2s,background .2s}
  .clients__logo:hover{color:var(--primary-d);background:var(--primary-tint)}
  .clients__note{margin-top:24px;font-size:14px;color:#999}

  /* ============ testimonials (EFX slider) ============ */
  .testimonials .container{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,80px);align-items:center}
  /* EFX testimonial animation: 250ms, directional ±50px slide */
  .testimonials__slides{display:grid;min-height:220px}
  .t-slide{grid-row:1;grid-column:1;position:relative;opacity:0;transition:opacity 250ms ease,transform 250ms ease;pointer-events:none}
  .t-slide.active{opacity:1;transform:none;pointer-events:auto}
  .t-slide.in-fwd{transform:translateX(50px)}
  .t-slide.in-bwd{transform:translateX(-50px)}
  .t-slide.out-fwd{transform:translateX(-50px);opacity:0}
  .t-slide.out-bwd{transform:translateX(50px);opacity:0}
  .t-slide blockquote{font-family:var(--head);font-size:clamp(20px,1.9vw,26px);font-weight:500;color:var(--ink);line-height:1.4;margin-bottom:18px}
  .t-slide blockquote::before{content:"“";color:var(--primary);font-size:1.4em;line-height:0;margin-right:2px}
  .t-name{font-weight:800;color:var(--ink);font-size:15px}
  .t-role{font-size:13.5px;color:#999}
  .testimonials__actions{display:flex;align-items:center;gap:22px;margin-top:28px}
  .t-pips{display:flex;gap:8px}
  .t-pip{width:34px;height:4px;border-radius:2px;background:var(--line);cursor:pointer;transition:background .25s;border:none;padding:0}
  .t-pip.active{background:var(--primary)}
  .t-arrows{display:flex;gap:10px}
  .t-arrow{width:46px;height:46px;border-radius:50%;border:2px solid var(--line);background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--ink);transition:border-color .2s,background .2s,color .2s}
  .t-arrow:hover{border-color:var(--primary);color:var(--primary)}
  .testimonials__images{position:relative;aspect-ratio:1/.92}
  .t-img{position:absolute;inset:0;opacity:0;pointer-events:none}
  .t-img.active{opacity:1}
  .t-img .main,.t-img .cut{transition:transform 450ms ease,opacity 450ms ease}
  .t-img.pre .main{transform:translateY(150px);opacity:0}
  .t-img.pre .cut{opacity:0}
  .t-img.out{opacity:1}
  .t-img.out .main{transform:translateY(-100px);opacity:0}
  .t-img.out .cut{opacity:0}
  .t-img .main{position:absolute;inset:0;border-radius:20px;overflow:hidden;box-shadow:0 24px 50px -16px rgba(0,0,0,.3)}
  .t-img .main img{width:100%;height:100%;object-fit:cover}
  .t-img .cut{position:absolute;right:-16px;bottom:-20px;width:44%;aspect-ratio:1/1;border-radius:16px;overflow:hidden;border:6px solid #fff;box-shadow:0 16px 36px -12px rgba(0,0,0,.3)}
  .t-img .cut img{width:100%;height:100%;object-fit:cover}
  .testimonials .shape--t{background-image:url(shape-2.svg?dice2);left:-150px;top:-90px;width:300px;height:340px;z-index:-1}
  .shape--diamond{background-image:url(diamond-shape.svg?dice2);width:170px;height:455px;left:-77px;top:-70px;z-index:-1}

  /* ============ news track (EFX draggable) ============ */
  .heading-section{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:34px}
  .news-track{overflow:hidden;cursor:grab;margin:0 -10px}
  .news-track.dragging{cursor:grabbing}
  .news-track__track{display:flex;gap:0;transition:transform .1s ease;will-change:transform}
  .news-track.dragging .news-track__track{transition:none}
  .news-item{flex:0 0 auto;width:300px;padding:0 10px}
  .news-card{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;height:100%;display:flex;flex-direction:column;transition:transform .22s,box-shadow .25s}
  .news-card:hover{transform:translateY(-5px);box-shadow:0 18px 40px -16px rgba(0,0,0,.16)}
  .news-card__top{position:relative}
  .news-card__top img{aspect-ratio:16/10;object-fit:cover;width:100%}
  .news-card__category{position:absolute;top:12px;left:12px;background:var(--primary);color:#fff;font-family:var(--head);font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;border-radius:999px;padding:6px 13px}
  .news-card__content{padding:18px 20px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
  .news-card__content h3{font-size:18px;line-height:1.35}
  .news-card__date{font-family:var(--head);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#999;margin-top:auto}
  .btn-section{text-align:center;margin-top:34px}
  .drag-hint{font-family:var(--head);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:#999}

  /* ============ FAQ (EFX accordion) ============ */
  .faqs{max-width:960px;margin:0 auto}
  .faq-item{border-bottom:1px solid var(--line)}
  .faq-item:first-of-type{border-top:1px solid var(--line)}
  .faq-item__q{width:100%;background:none;border:none;text-align:left;padding:22px 6px;font-family:var(--head);font-size:19px;font-weight:600;color:var(--ink);cursor:pointer;display:flex;justify-content:space-between;gap:16px;align-items:center}
  .faq-item__icon{color:var(--primary);transition:transform .25s;flex-shrink:0}
  .faq-item.active .faq-item__icon{transform:rotate(-90deg)}
  .faq-item__content{max-height:0;overflow:hidden;transition:max-height .3s ease}
  .faq-item__content p{padding:0 6px 22px;max-width:72ch}

  /* ============ footer (EFX 3-part) ============ */
  footer{position:relative}
  .newsletter{background:var(--primary-tint);border-radius:20px;max-width:var(--max);margin:0 auto clamp(50px,5vw,80px);padding:clamp(28px,3.5vw,48px);display:grid;grid-template-columns:1fr auto;gap:26px;align-items:center}
  .newsletter h3{font-family:var(--head);font-size:clamp(22px,2.2vw,30px);margin-bottom:6px}
  .newsletter p{font-size:15px}
  .newsletter form{display:flex;gap:10px;flex-wrap:wrap}
  .newsletter input{border:2px solid #e5d9c2;border-radius:999px;padding:14px 22px;font-family:var(--sans);font-size:15px;min-width:260px;background:#fff}
  .newsletter input:focus{outline:none;border-color:var(--primary)}
  .footer-middle{max-width:var(--max);margin:0 auto clamp(40px,4vw,64px);padding:0 clamp(10px,2vw,30px);display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;position:relative}
  .footer-middle h5{font-family:var(--head);font-size:14px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--primary-d);margin-bottom:16px}
  .footer-middle ul{list-style:none;display:flex;flex-direction:column;gap:10px;font-size:15px}
  .footer-middle ul a:hover{color:var(--primary)}
  .footer-middle p{font-size:14.5px;max-width:300px;margin-top:14px}
  .footer-bottom{background:var(--dark);color:#b5b1a8;padding:34px 0 90px;position:relative;overflow:hidden}
  .footer-bottom .shape--footer{background-image:url(footer-shape.svg?dice2);right:-298px;top:60px;width:515px;height:641px}
  .footer-bottom .container{display:flex;justify-content:space-between;gap:26px;flex-wrap:wrap;font-size:14px}
  .footer-bottom a{color:#ddd8cd}
  .footer-bottom a:hover{color:#fff}
  .footer-banner{display:none!important}
  /* ===== all-black footer ===== */
  footer{background:var(--dark)}
  .footer-middle{color:#b7b3aa;padding-top:clamp(40px,4vw,60px)}
  .footer-middle h5{color:#5cc6d2}
  .footer-middle ul a{color:#ddd8cd}
  .footer-middle ul a:hover{color:#fff}
  .footer-middle p{color:#9c988f}
  .footer-middle .logo b{color:#fff}
  .footer-middle .logo b span{color:var(--primary)}
  .footer-middle .logo small{color:#8a867d}
  /* footer logo: fixed small circle with the die icon (no --p scrubbing outside header) */
  footer .logo-mark{width:52px;height:52px;border-width:3px}
  footer .logo-mark .lm-full{opacity:0}
  footer .logo-mark .lm-short{opacity:1}
  footer .logo-word{opacity:1;transform:none}
  .newsletter{background:#1d1c1a}
  .newsletter h3{color:#fff}
  .newsletter p{color:#a9a59c}
  .newsletter input{background:var(--dark);border:1px solid #35342f;color:#fff}
  .newsletter input::placeholder{color:#777}
  .footer-bottom{padding-bottom:40px;border-top:1px solid #262521}

  .wa{position:fixed;right:22px;bottom:22px;z-index:950;width:56px;height:56px;border-radius:50%;background:none;display:flex;align-items:center;justify-content:center;transition:transform .2s}
  /* at the top of the page the disc fades out entirely — only the white glyph floats over the hero */
  .wa::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--primary);box-shadow:0 10px 24px -8px rgba(0,0,0,.4);opacity:var(--wap,1);transition:opacity .25s}
  .wa svg{position:relative;fill:#fff;filter:drop-shadow(0 2px 6px rgba(0,0,0,.35))}
  .wa:hover{transform:scale(1.07)}

  html.js .rv{opacity:0;transform:translateY(20px);transition:opacity .65s ease,transform .65s ease}
  html.js .rv.in{opacity:1;transform:none}

  /* ============ responsive ============ */
  @media(max-width:1000px){
    .image-text .container,.testimonials .container{grid-template-columns:1fr;gap:44px}
    .blocks{grid-template-columns:1fr;grid-template-rows:none;gap:18px}
    .blocks__block:nth-child(n){grid-column:1;grid-row:auto}
    .card--pb{min-height:300px}
    .cta-strip{grid-template-columns:1fr}
    .cta-strip__image{border-radius:20px 20px 0 0;min-height:220px}
    .footer-middle{grid-template-columns:1fr 1fr}
    .newsletter{grid-template-columns:1fr}
    .header__top{display:none}
    .cards3{grid-template-columns:1fr 1fr}
    .sustain{grid-template-columns:1fr;gap:26px}
    .sub{display:block;position:static;visibility:visible;opacity:1;transform:none;pointer-events:auto;transition:none;box-shadow:none;border-radius:0;padding:0 0 8px 16px;min-width:0}
    nav>ul{display:none;position:absolute;top:80px;left:10px;right:10px;background:#fff;border-radius:16px;box-shadow:0 24px 50px rgba(0,0,0,.18);flex-direction:column;gap:0;padding:12px;align-items:stretch}
    nav>ul.open{display:flex}
    nav a.top{color:var(--ink)!important;padding:13px 16px}
    .header__inner .btn{display:none}
    .menu-toggle{display:block}
  }
  @media(max-width:760px){
    .hero .shape--hero-left{width:150px;height:171px;left:-45px;bottom:-130px}
    .hero .shape--hero-right{width:180px;height:206px;right:-60px;bottom:-165px}
    .cta-strip .shape--cta{width:314px;height:380px;right:-165px;bottom:-106px}
    .footer-bottom .shape--footer{width:300px;height:373px;right:-175px}
    .image-text .shape--grey,.testimonials .shape--t,.shape--diamond{display:none}
  }
  @media(max-width:620px){
    .hero{aspect-ratio:auto;height:60vh}
    .logo-mark{width:calc(48px + (1 - var(--p)) * 68px)!important;height:calc(48px + (1 - var(--p)) * 68px)!important}
    .cards3{grid-template-columns:1fr}
    .footer-middle{grid-template-columns:1fr}
    .image-grid{grid-auto-rows:26px}
    .newsletter input{min-width:0;width:100%}
    .t-img .cut{width:52%}
  }

/* ===== EFX subpage templates ===== */
.usps{background:var(--primary-tint);margin-top:118px}
.usps__row{max-width:var(--max);margin:0 auto;display:flex;justify-content:space-between;gap:12px;padding:15px clamp(10px,2vw,30px);flex-wrap:wrap}
.usp{display:flex;align-items:center;gap:10px;font-family:var(--head);font-size:15px;font-weight:600;color:var(--ink)}
.usp svg{fill:none;stroke:var(--primary);stroke-width:1.8;flex-shrink:0}
.breadcrumb{font-size:14px;color:#999;margin:26px 0 20px;display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.breadcrumb a:hover{color:var(--primary)}
.breadcrumb b{color:var(--primary);font-weight:700}
.product{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,64px);align-items:start;margin-bottom:clamp(56px,6vw,90px)}
.gallery__main{position:relative;border-radius:14px;overflow:hidden;background:var(--grey)}
.gallery__main img{aspect-ratio:1/1;object-fit:cover;width:100%;display:none}
.gallery__main img.active{display:block}
.gallery__btns{position:absolute;inset:0;display:flex;justify-content:space-between;align-items:center;padding:0 12px;pointer-events:none}
.gallery__btns button{pointer-events:auto;width:46px;height:46px;border-radius:50%;border:none;background:rgba(255,255,255,.88);color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(0,0,0,.18)}
.gallery__thumbs{display:flex;gap:10px;margin-top:12px}
.gallery__thumbs img{width:76px;height:76px;object-fit:cover;border-radius:10px;cursor:pointer;border:2px solid transparent}
.gallery__thumbs img.active{border-color:var(--primary)}
.product h1{font-size:clamp(30px,3vw,42px);margin-bottom:14px}
.product .desc p{margin-bottom:14px}
.opt h3{font-size:18px;margin:22px 0 10px}
.chips{display:flex;gap:10px;flex-wrap:wrap}
.chipx{border:2px solid var(--line);padding:8px 15px;font-family:var(--head);font-weight:600;font-size:14px;color:var(--body)}
.product-cta{margin-top:26px;border-top:1px solid var(--line);padding-top:24px}
.product-cta h3{font-size:22px;margin-bottom:8px}
.product-cta p{margin-bottom:16px}
.product-cta .row{display:flex;gap:12px;flex-wrap:wrap}
.pt3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:clamp(56px,6vw,90px)}
.pt{background:var(--grey);border-radius:14px;padding:24px}
.pt p{font-size:15px;margin-bottom:12px}
.pt b{font-family:var(--head);font-size:13.5px;color:var(--ink);display:block}
.pt small{display:block;color:#999;font-size:12.5px}
.rel4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.relc{display:block;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;transition:transform .22s,box-shadow .22s}
.relc:hover{transform:translateY(-5px);box-shadow:0 16px 36px -14px rgba(0,0,0,.16)}
.relc img{aspect-ratio:1/1;object-fit:cover;width:100%}
.relc h2{font-size:16.5px;padding:14px 16px;font-weight:600}
.hero-inner{position:relative;padding:150px 0 30px}
.hero-inner .container{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(26px,4vw,60px);align-items:center}
.hero-inner h1{font-size:clamp(34px,4vw,52px);margin:10px 0 14px}
.hero-inner p.lead{font-size:17.5px;max-width:56ch}
.hero-inner .sq{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.hero-inner .sq img{aspect-ratio:1/1;object-fit:cover;width:100%;border-radius:12px;box-shadow:0 14px 30px -12px rgba(0,0,0,.22)}
.hero-inner .sq img:first-child{grid-row:span 2;aspect-ratio:auto;height:100%}
.tech4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.techc{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.techc img{aspect-ratio:4/3;object-fit:cover;width:100%}
.techc .bd{padding:16px 18px}
.techc h3{font-size:17px;margin-bottom:5px}
.techc p{font-size:13.5px}
/* EFX-style stepped "how it works" — numbered rows, alternating image/text */
.howto{display:flex;flex-direction:column;gap:clamp(52px,7vw,96px)}
.howto__row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,72px);align-items:center}
.howto__media{position:relative}
.howto__media img{width:100%;border-radius:14px;box-shadow:0 22px 46px -18px rgba(0,0,0,.3);aspect-ratio:455/375;object-fit:cover;display:block}
.howto__row:nth-child(even) .howto__media{order:2}
.howto__step{display:flex;align-items:center;font-family:var(--head);font-size:13px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--primary);margin-bottom:14px}
.howto__step b{display:inline-flex;width:34px;height:34px;border-radius:50%;background:var(--primary);color:#fff;align-items:center;justify-content:center;margin-right:14px;font-size:15px;flex-shrink:0}
.howto__body h3{font-size:clamp(22px,2.2vw,28px);margin-bottom:12px}
.howto__body p{margin-bottom:14px;max-width:52ch}
.howto__meta{display:inline-block;font-family:var(--head);font-size:13px;font-weight:600;letter-spacing:.04em;color:var(--primary-d);background:var(--primary-tint);border-radius:20px;padding:5px 14px}
@media(max-width:820px){.howto__row{grid-template-columns:1fr;gap:22px}.howto__row:nth-child(even) .howto__media{order:0}}
/* ===== homepage qymirror-flow blocks ===== */
/* Design · Production · Sales trio */
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.trio__col{text-align:center;padding:0 8px}
.trio__ic{width:78px;height:78px;border-radius:50%;background:var(--primary-tint);color:var(--primary-d);display:flex;align-items:center;justify-content:center;margin:0 auto 22px}
.trio__ic svg{width:36px;height:36px;fill:none;stroke:currentColor;stroke-width:1.7}
.trio__col h3{font-size:22px;margin-bottom:10px}
.trio__col p{font-size:15.5px;max-width:36ch;margin:0 auto}
@media(max-width:820px){.trio{grid-template-columns:1fr;gap:36px}}
/* OEM / ODM two-card band */
.oem2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,34px)}
.oem-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:clamp(26px,3vw,44px);position:relative;overflow:hidden}
.oem-card__tag{display:inline-block;font-family:var(--head);font-weight:700;letter-spacing:.14em;font-size:13px;text-transform:uppercase;color:#fff;background:var(--primary);border-radius:20px;padding:6px 16px;margin-bottom:16px}
.oem-card:nth-child(2) .oem-card__tag{background:var(--primary-d)}
.oem-card h3{font-size:clamp(21px,2.2vw,26px);margin-bottom:12px}
.oem-card p{margin-bottom:16px;max-width:46ch}
.oem-card ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.oem-card li{position:relative;padding-left:26px;font-size:15px}
.oem-card li::before{content:"";position:absolute;left:0;top:7px;width:14px;height:14px;border-radius:50%;background:var(--primary-tint);border:2px solid var(--primary)}
@media(max-width:820px){.oem2{grid-template-columns:1fr}}
/* 6-step "how a dice is made" flow */
.flow{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.flow__step{position:relative;text-align:center;padding-top:4px}
.flow__num{width:60px;height:60px;border-radius:50%;background:#fff;border:2px solid var(--primary);color:var(--primary-d);font-family:var(--head);font-weight:700;font-size:22px;display:flex;align-items:center;justify-content:center;margin:0 auto 14px;position:relative;z-index:2}
.flow__step:not(:last-child)::after{content:"";position:absolute;top:30px;left:calc(50% + 34px);right:calc(-50% + 34px);height:2px;background:linear-gradient(90deg,var(--primary),var(--line));z-index:1}
.flow__step h4{font-size:15.5px;margin-bottom:5px}
.flow__step .zh{display:block;font-size:12px;color:var(--primary-d);font-weight:700;letter-spacing:.05em;margin-bottom:6px}
.flow__step p{font-size:12.5px;line-height:1.5}
@media(max-width:940px){.flow{grid-template-columns:repeat(3,1fr);gap:30px 14px}.flow__step:nth-child(3)::after,.flow__step:nth-child(6)::after{display:none}}
@media(max-width:560px){.flow{grid-template-columns:repeat(2,1fr)}.flow__step:nth-child(2n)::after{display:none}}
/* Featured Series product grid (real Alibaba products) */
.featured{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.fcard{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;transition:transform .25s,box-shadow .25s;display:flex;flex-direction:column}
.fcard:hover{transform:translateY(-6px);box-shadow:0 20px 44px -16px rgba(0,0,0,.16)}
.fcard .im{aspect-ratio:1/1;overflow:hidden;background:#f4f4f4;position:relative}
.fcard .im img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.fcard:hover .im img{transform:scale(1.05)}
.fcard .im .tag{position:absolute;top:10px;left:10px;background:rgba(20,20,19,.82);color:#fff;font-family:var(--head);font-size:11px;font-weight:600;letter-spacing:.06em;padding:4px 10px;border-radius:14px}
.fcard .bd{padding:13px 15px 15px;display:flex;flex-direction:column;gap:5px;flex:1}
.fcard h3{font-size:14.5px;line-height:1.32;font-weight:700;color:var(--ink)}
.fcard .price{font-family:var(--head);font-weight:700;color:var(--primary-d);font-size:16px;margin-top:auto}
.fcard .fmoq{font-size:12.5px;color:var(--body)}
@media(max-width:900px){.featured{grid-template-columns:repeat(2,1fr)}}
@media(max-width:1000px){
  .usps{margin-top:88px}
  .usps__row{justify-content:flex-start}
  .product,.hero-inner .container{grid-template-columns:1fr}
  .pt3{grid-template-columns:1fr}
  .rel4,.tech4{grid-template-columns:1fr 1fr}
  .sub .thumb{width:30px;height:30px}
}
@media(max-width:620px){.rel4,.tech4{grid-template-columns:1fr}}


/* ===== EFX category page template ===== */
.cat-hero{position:relative;margin:118px 0 0;background:linear-gradient(100deg,#007a89,#0099a8 55%,#00a7b6);color:#fff;overflow:hidden}
.cat-hero::after{content:"";position:absolute;left:-70px;bottom:-90px;width:300px;height:343px;background:url(shape-1.svg?dice2) no-repeat center/contain;opacity:.3;pointer-events:none}
.cat-hero::before{content:"";position:absolute;inset:0;background:
  linear-gradient(115deg,rgba(87,199,182,.35) 0 60px,transparent 60px 61px),
  linear-gradient(295deg,rgba(0,95,112,.35) 0 40px,transparent 40px),
  repeating-linear-gradient(115deg,rgba(255,255,255,.045) 0 2px,transparent 2px 110px);pointer-events:none}
.cat-hero .container{display:grid;grid-template-columns:1.45fr .85fr;gap:0;align-items:stretch;min-height:clamp(170px,19vw,225px);padding:0;max-width:none;margin:0}
.cat-hero .txt{align-self:center;padding:clamp(22px,3vw,40px) clamp(8px,2vw,30px) clamp(22px,3vw,40px) max(30px,calc((100vw - 1460px)/2 + 30px))}
.cat-hero h1{color:#fff;font-size:clamp(28px,3.1vw,44px);font-weight:500;margin-bottom:10px}
.cat-hero p{color:rgba(255,255,255,.93);max-width:64ch;font-size:15.5px;line-height:1.55;margin:0}
.cat-hero .img{position:relative;min-height:170px;clip-path:polygon(16% 0,100% 0,100% 100%,0 100%)}
.cat-hero .img img,.cat-hero .img video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cat-layout{display:grid;grid-template-columns:250px 1fr;gap:clamp(24px,3.5vw,48px);margin:34px 0 clamp(56px,6vw,90px)}
.filter h4{font-family:var(--head);letter-spacing:.16em;text-transform:uppercase;font-size:15px;display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.filter h4 button{background:none;border:none;font-family:var(--sans);font-size:13px;color:#999;cursor:pointer;text-decoration:underline}
.fgroup{border-top:1px solid var(--line);padding:16px 0 12px}
.fgroup h5{font-size:16.5px;font-family:var(--head);font-weight:600;margin-bottom:8px}
.fgroup label{display:flex;gap:10px;align-items:center;font-size:15px;padding:6px 0;color:var(--body);cursor:pointer}
.fgroup input{width:18px;height:18px;accent-color:var(--primary)}
.fgroup small{color:#aaa}
.controls{display:flex;justify-content:flex-end;gap:26px;align-items:center;font-size:14.5px;color:var(--body);margin-bottom:20px}
.controls select{border:none;border-bottom:2px solid var(--line);font-family:var(--sans);font-size:14.5px;padding:5px 4px;background:transparent;color:var(--ink)}
.unique-banner{display:flex;align-items:center;gap:22px;background:var(--primary-tint);padding:14px 22px;margin-bottom:26px;flex-wrap:wrap}
.unique-banner img{width:110px;height:72px;object-fit:cover;flex-shrink:0}
.unique-banner .t{flex:1;min-width:220px}
.unique-banner h3{font-size:20px;margin-bottom:2px}
.unique-banner p{font-size:14.5px}
.unique-banner .btn{padding:13px 24px;font-size:14px}
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.pitem{display:block}
.pitem .im{background:var(--grey);overflow:hidden;position:relative}
.pitem img{aspect-ratio:1/1;object-fit:cover;width:100%;transition:transform .4s}
.pitem:hover img{transform:scale(1.045)}
.pitem .badge{position:absolute;top:12px;left:12px;background:var(--primary);color:#fff;font-family:var(--head);font-size:12.5px;font-weight:600;padding:7px 13px;letter-spacing:.02em}
.pitem .badge--blue{background:var(--shape-2)}
/* hover swaps main image -> second gallery image (附图) */
.pitem .im{position:relative}
.pitem .im img.alt{position:absolute;inset:0;opacity:0;transition:opacity .38s ease;z-index:1}
.pitem:hover .im img.alt{opacity:1}
/* product video badge — click opens the factory video */
.vbadge{position:absolute;right:10px;bottom:10px;z-index:3;width:34px;height:34px;border-radius:50%;background:rgba(20,20,19,.78);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;cursor:pointer;transition:background .2s,transform .2s}
.vbadge:hover{background:var(--primary);transform:scale(1.12)}
/* nested category flyout (3rd level) in nav dropdowns */
.sub li{position:relative}
.sub .sub2{display:block;visibility:hidden;opacity:0;transform:translateX(12px);pointer-events:none;position:absolute;left:100%;top:-1px;background:rgba(255,255,255,.7);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:4px;box-shadow:0 20px 50px rgba(0,0,0,.18);min-width:210px;list-style:none;z-index:70;overflow:hidden;transition:opacity .22s ease,transform .28s cubic-bezier(.22,1,.36,1),visibility 0s linear .25s}
.sub li:hover>.sub2{visibility:visible;opacity:1;transform:translateX(0);pointer-events:auto;transition-delay:0s,0s,0s}
.sub .sub2 a{padding:10px 16px;font-size:14.5px}
.sub .has-kids>a::after{content:"›";margin-left:auto;color:#bbb;font-weight:800}
/* Alibaba-style category tree sidebar (products.html) */
.cattree{list-style:none;margin:0;padding:0}
.cattree>li{border-top:1px solid var(--line)}
.cattree .row{display:flex;align-items:center}
.cattree .row>a{flex:1;display:block;padding:11px 4px;font-size:15px;color:var(--ink);font-weight:600;transition:color .15s}
.cattree .row>a:hover{color:var(--primary)}
.cattree .row>a small{color:#aaa;font-weight:400;margin-left:6px}
.cattree .tgl{background:none;border:none;cursor:pointer;padding:8px 10px;color:#999;display:flex;align-items:center;transition:color .15s}
.cattree .tgl:hover{color:var(--primary)}
.cattree .tgl svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.2;transition:transform .25s}
.cattree li.open>.row .tgl svg{transform:rotate(90deg)}
.cattree ul{list-style:none;margin:0;padding:0 0 0 16px;display:block;max-height:0;overflow:hidden;opacity:0;transform:translateY(-6px);transition:max-height .42s cubic-bezier(.4,0,.2,1),opacity .3s ease,transform .32s ease,padding-bottom .3s ease}
.cattree li.open>ul{max-height:800px;opacity:1;transform:none;padding-bottom:8px}
.cattree ul a{display:block;padding:7px 4px;font-size:14px;color:var(--body)}
.cattree ul a:hover{color:var(--primary)}
.cattree ul ul{padding-left:14px}
.cattree ul ul a{font-size:13.5px;color:#8b8b8b}
/* sub-category chips on category pages */
.subcats{display:flex;flex-wrap:wrap;gap:10px;margin:6px 0 26px}
.subcats a{font-family:var(--head);font-size:13.5px;font-weight:600;letter-spacing:.04em;border:1.5px solid var(--line);border-radius:20px;padding:8px 18px;color:var(--ink);transition:all .15s}
.subcats a:hover,.subcats a.on{background:var(--primary);border-color:var(--primary);color:#fff}
.pitem h2{font-size:17px;font-weight:600;padding:13px 2px 3px;line-height:1.32}
.pitem:hover h2{color:var(--primary)}
.pitem .meta{padding:2px 2px 0;display:flex;flex-direction:column;gap:2px}
.pitem .meta .pr{font-family:var(--head);font-weight:700;color:var(--primary-d);font-size:15.5px}
.pitem .meta .mo{font-size:12.5px;color:var(--body)}
.controls .sortSel{border:none;border-bottom:2px solid var(--line);font-family:var(--sans);font-size:14.5px;padding:5px 4px;background:transparent;color:var(--ink)}
.vws{display:inline-flex;gap:6px}
.vw{width:34px;height:34px;border:1.5px solid var(--line);border-radius:8px;background:#fff;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:all .15s}
.vw svg{width:15px;height:15px;fill:#999}
.vw.on,.vw:hover{border-color:var(--primary)}
.vw.on svg{fill:var(--primary)}
.pgrid.sm{grid-template-columns:repeat(5,1fr);gap:14px}
.pgrid.sm .pitem h2{font-size:13.5px;line-height:1.35}
.pgrid.sm .pitem .meta{font-size:12.5px}
.pgrid.sm .badge{font-size:11px;padding:5px 9px}
.pgrid.sm .vbadge{width:28px;height:28px;font-size:11px}
@media(max-width:1100px){.pgrid.sm{grid-template-columns:repeat(4,1fr)}}
@media(max-width:900px){.pgrid.sm{grid-template-columns:repeat(3,1fr)}}
@media(max-width:620px){.pgrid.sm{grid-template-columns:1fr 1fr}}
.pager{display:flex;justify-content:center;gap:7px;margin-top:44px;flex-wrap:wrap}
.pager a{min-width:42px;height:42px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:9px;font-family:var(--head);font-weight:600;font-size:14px;color:var(--ink);transition:all .15s}
.pager a.on,.pager a:hover{background:var(--primary);color:#fff;border-color:var(--primary)}
.pager a.dots{border:none;pointer-events:none}
.filter__count{font-size:14px;color:var(--body);margin-bottom:18px}
.filter__count b{color:var(--ink)}
.cat-empty{background:var(--grey);border-radius:14px;padding:40px;text-align:center}
.cat-empty p{max-width:52ch;margin:0 auto 18px}
@media(max-width:1000px){
  .cat-hero .container{grid-template-columns:1fr}
  .cat-hero .img{clip-path:none;min-height:220px;margin:0 -20px}
  .cat-layout{grid-template-columns:1fr}
  .pgrid{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){.pgrid{grid-template-columns:1fr}}


/* ===== QYMIRROR-style blog / knowledge center ===== */
.kc-hero{background:linear-gradient(115deg,var(--primary-d) 0%,var(--primary) 70%,#d99a3e 100%);color:#fff;padding:150px 0 0;position:relative;overflow:hidden}
.kc-hero::before{content:"";position:absolute;right:-70px;top:-40px;width:260px;height:300px;background:url(shape-1.svg?dice2) no-repeat center/contain;opacity:.45;pointer-events:none}
.kc-hero h1{color:#fff;font-size:clamp(32px,4vw,50px);margin-bottom:12px}
.kc-hero h1 em{font-style:italic;color:var(--accent)}
.kc-hero .lead{color:rgba(255,255,255,.92);max-width:62ch;font-size:17px;margin-bottom:22px}
.kc-hero .txt{padding-bottom:34px}
.hero-dl{background:rgba(0,0,0,.18);padding:26px 0;position:relative}
.dl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.dl-ghost{border:1px solid rgba(255,255,255,.3);padding:18px 20px}
.dl-ghost h3{color:#fff;font-size:17px;margin-bottom:5px}
.dl-ghost p{font-size:13.5px;color:rgba(255,255,255,.8);margin-bottom:10px}
.link-arrow{font-family:var(--head);font-weight:700;font-size:14px;letter-spacing:.06em;color:var(--accent)}
.link-arrow:hover{text-decoration:underline}
.kc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.kc-card{display:block;background:#fff;border:1px solid var(--line);overflow:hidden;transition:transform .22s,box-shadow .25s}
.kc-card:hover{transform:translateY(-5px);box-shadow:0 18px 40px -16px rgba(0,0,0,.16)}
.kc-card img{aspect-ratio:16/9;object-fit:cover;width:100%}
.kc-card-body{padding:16px 18px 18px}
.kc-card .cat{display:inline-block;font-family:var(--head);font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--primary-d);background:var(--primary-tint);padding:4px 10px;margin-bottom:9px}
.kc-card h3{font-size:17.5px;line-height:1.35;margin-bottom:8px}
.kc-card .rt{font-size:12.5px;color:#999}
.kc-list{list-style:none;display:flex;flex-direction:column}
.kc-row{display:flex;align-items:center;gap:18px;padding:14px 6px;border-bottom:1px solid var(--line);transition:background .15s}
.kc-row:hover{background:var(--primary-tint)}
.kc-thumb{flex-shrink:0;width:86px;height:60px;overflow:hidden}
.kc-thumb img{width:100%;height:100%;object-fit:cover}
.kc-row-text{flex:1}
.kc-row-text .cat{font-family:var(--head);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--primary)}
.kc-row-text h3{font-size:16.5px;font-weight:600}
.kc-row .rt{font-size:12.5px;color:#999;white-space:nowrap}
.kc-row.soon{opacity:.55;pointer-events:none}
.pagination{display:flex;gap:8px;justify-content:center;margin-top:30px;list-style:none}
.page-numbers{display:flex;align-items:center;justify-content:center;min-width:40px;height:40px;border:2px solid var(--line);font-family:var(--head);font-weight:700;font-size:15px;color:var(--body);padding:0 10px}
.page-numbers.current{background:var(--primary);border-color:var(--primary);color:#fff}
/* article prose */
.article{max-width:780px;margin:0 auto}
.article .meta{display:flex;gap:14px;align-items:center;margin:14px 0 22px;font-size:13.5px;color:#999}
.article .hero-img{border-radius:14px;overflow:hidden;margin-bottom:30px}
.article .hero-img img{aspect-ratio:16/8;object-fit:cover;width:100%}
.article h2{font-size:26px;margin:36px 0 14px}
.article h3{font-size:20px;margin:26px 0 10px}
.article p,.article li{font-size:16.5px;line-height:1.75;margin-bottom:16px}
.article ul,.article ol{padding-left:22px;margin-bottom:16px}
.article li{margin-bottom:8px}
.article table{width:100%;border-collapse:collapse;margin:20px 0 26px;font-size:15px}
.article th{font-family:var(--head);text-align:left;background:var(--primary-tint);color:var(--primary-d);padding:10px 12px;border:1px solid var(--line)}
.article td{padding:10px 12px;border:1px solid var(--line)}
.article .tip{background:var(--primary-tint);border-left:4px solid var(--primary);padding:16px 20px;margin:22px 0;font-size:15.5px}
.article .lead{font-size:20px;line-height:1.6;color:var(--ink);margin-bottom:24px}
.article blockquote{margin:32px 0;padding:6px 0 6px 28px;border-left:4px solid var(--primary);font-family:var(--head);font-size:23px;line-height:1.4;color:var(--ink);font-weight:500}
.article blockquote cite{display:block;margin-top:12px;font-family:var(--sans);font-size:14px;font-style:normal;color:#999;letter-spacing:.02em}
.article figure{margin:30px 0}
.article figure img{border-radius:14px;width:100%;object-fit:cover}
.article figcaption{font-size:13.5px;color:#999;margin-top:9px;text-align:center}
.article .figrow{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:30px 0}
.article .figrow img{border-radius:12px;aspect-ratio:1/1;object-fit:cover;width:100%}
.article .key{background:var(--grey);border-radius:14px;padding:22px 26px;margin:28px 0}
.article .key h3{margin:0 0 12px;font-size:18px}
.article .key ul{margin:0;padding-left:20px}
.article .end-cta{border-top:1px solid var(--line);margin-top:36px;padding-top:26px}
@media(max-width:600px){.article blockquote{font-size:20px}.article .figrow{grid-template-columns:1fr}}
/* article header: centered title, no collage */
.article-head{max-width:880px;margin:0 auto;padding:150px clamp(10px,2vw,30px) 10px;text-align:center}
.article-head__text .breadcrumb{margin-top:0;justify-content:center}
.article-head__text h1{font-size:clamp(30px,3.6vw,50px);line-height:1.1;margin:10px 0 16px}
.article-head__text .meta{justify-content:center}
@media(max-width:820px){.article-head{padding-top:128px}}
/* article table of contents */
.toc{background:var(--grey);border-radius:14px;padding:22px 26px;margin:0 0 34px}
.toc h4{font-family:var(--head);font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--primary-d);margin-bottom:12px}
.toc ol{margin:0;padding-left:20px;columns:2;column-gap:34px}
.toc li{margin-bottom:8px;font-size:14.5px;break-inside:avoid;padding-left:2px}
.toc a{color:var(--ink)}
.toc a:hover{color:var(--primary);text-decoration:underline}
html{scroll-behavior:smooth}
.article h2[id]{scroll-margin-top:110px}
@media(max-width:600px){.toc ol{columns:1}}
/* two-column article with sticky left TOC sidebar (delei-mfg style) */
.article-layout{display:grid;grid-template-columns:230px minmax(0,1fr) 265px;gap:clamp(26px,3vw,54px);max-width:var(--max);margin:0 auto;align-items:start}
.article-layout .article{max-width:none;margin:0}
.toc-side{position:sticky;top:104px}
.toc-side h4{font-family:var(--head);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--primary-d);margin-bottom:14px}
.toc-side ol{list-style:none;margin:0;padding:0;counter-reset:toc}
.toc-side li{counter-increment:toc}
.toc-side a{display:flex;gap:10px;padding:8px 0 8px 16px;border-left:2px solid var(--line);color:var(--body);font-size:14px;line-height:1.35;transition:all .15s}
.toc-side a::before{content:counter(toc);font-family:var(--head);font-weight:700;color:#bbb;font-size:12.5px}
.toc-side a:hover{color:var(--ink);border-left-color:var(--primary)}
.toc-side a.active{border-left-color:var(--primary);color:var(--primary-d);font-weight:700}
.toc-side a.active::before{color:var(--primary)}
@media(max-width:900px){.article-layout{grid-template-columns:1fr;gap:0}.toc-side{position:static;margin-bottom:28px;background:var(--grey);border-radius:14px;padding:20px 24px}.toc-side a{border-left:none;padding:6px 0}}
@media(max-width:1000px){.dl-grid{grid-template-columns:1fr}.kc-grid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.kc-grid{grid-template-columns:1fr}.kc-thumb{width:64px;height:46px}}

/* Faint d20 triangle-facet background texture on white sections */
/* 背景纹理已移除：原三角网格太密显乱，改为干净纯色背景 */
.shelf,.faq-band,.strip-band{position:relative}

/* blog list tools: search, time sort, view toggle */
.blog-tools{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin:0 0 24px}
.blog-search{flex:1;min-width:230px;border:2px solid var(--line);padding:11px 16px;font-family:inherit;font-size:15px;border-radius:10px;background:#fff}
.blog-search:focus{outline:none;border-color:var(--primary)}
.kdate{display:block;font-size:12.5px;color:#aaa;margin-top:4px}
.kc-list.as-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;list-style:none}
.kc-list.as-grid li{border:none}
.kc-list.as-grid .kc-row{display:block;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;padding:0;height:100%}
.kc-list.as-grid .kc-thumb{display:block;width:100%}
.kc-list.as-grid .kc-thumb img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:center;border-radius:0}
.kc-list.as-grid .kc-row-text{display:block;padding:14px 16px 4px}
.kc-list.as-grid .rt{display:block;padding:0 16px 14px;font-size:13px;color:#999}
@media(max-width:900px){.kc-list.as-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.kc-list.as-grid{grid-template-columns:1fr}}

/* related products sidebar (article pages) */
.rel-side{position:sticky;top:104px}
.rel-side h4{font-family:var(--head);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--primary-d);margin-bottom:14px}
.rp{display:block;border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-bottom:14px;transition:transform .2s,box-shadow .2s}
.rp:hover{transform:translateY(-3px);box-shadow:0 14px 30px -14px rgba(0,0,0,.18)}
.rp img{width:100%;aspect-ratio:16/11;object-fit:cover;display:block}
.rp b{display:block;font-size:13.5px;line-height:1.35;padding:10px 12px;color:var(--ink);font-weight:700}
.rp small{display:block;padding:0 12px 11px;color:var(--primary-d);font-weight:700;font-size:12.5px}
@media(max-width:1180px){.article-layout{grid-template-columns:220px minmax(0,1fr)}.rel-side{display:none}}
/* related articles strip */
.relarts{margin:clamp(40px,5vw,70px) auto}
.relart-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.relart{display:block;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;transition:transform .2s,box-shadow .2s}
.relart:hover{transform:translateY(-4px);box-shadow:0 18px 38px -16px rgba(0,0,0,.16)}
.relart img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}
.relart .b{padding:14px 16px}
.relart .cat{font-family:var(--head);font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--primary)}
.relart h3{font-size:16px;line-height:1.35;margin-top:6px;color:var(--ink)}
@media(max-width:800px){.relart-grid{grid-template-columns:1fr}}

/* ============ OEM/ODM material showcase ============ */
.matb{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(26px,4vw,60px);align-items:center;margin-top:clamp(38px,5vw,64px)}
.matb--flip .matv{order:2}
.matv{position:relative;border-radius:18px;overflow:hidden;background:#fff;border:1px solid var(--line);aspect-ratio:1.12}
.matv img{width:100%;height:100%;object-fit:cover;display:block}
.matv .cap{position:absolute;left:0;bottom:0;background:var(--primary);color:#fff;font-family:var(--head);font-weight:700;letter-spacing:.09em;text-transform:uppercase;font-size:12.5px;padding:9px 18px;border-radius:0 12px 0 0}
.mat-info h3{font-size:clamp(22px,2.3vw,29px);margin-bottom:10px}
.mat-info .craft{margin-bottom:10px}
.mat-info .mroutes{font-family:var(--head);font-weight:600;font-size:14px;color:var(--primary-d);margin-bottom:4px}
.mstyles{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 18px}
.mstyle{display:flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:40px;padding:5px 15px 5px 5px;background:#fff;cursor:pointer;font-family:var(--head);font-weight:600;font-size:13.5px;letter-spacing:.03em;color:var(--ink);transition:border-color .2s,background .2s,color .2s,box-shadow .2s}
.mstyle img{width:34px;height:34px;border-radius:50%;object-fit:cover;display:block}
.mstyle:hover,.mstyle.on{border-color:var(--primary);background:var(--primary);color:#fff;box-shadow:0 8px 18px -8px rgba(0,153,168,.55)}
@media(max-width:860px){.matb{grid-template-columns:1fr}.matb--flip .matv{order:0}}

/* ============ trusted-by brand marquee ============ */
.trustedby{padding:30px 0 36px;background:#fff;overflow:hidden}
.tb-label{font-family:var(--head);font-weight:700;letter-spacing:.18em;text-transform:uppercase;font-size:12.5px;color:var(--primary);text-align:center;margin-bottom:20px}
.tb-marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.tb-track{display:flex;align-items:center;gap:clamp(28px,4vw,56px);width:max-content;animation:tbScroll 34s linear infinite}
.tb-track span{font-family:var(--head);font-weight:700;font-size:clamp(15px,1.7vw,21px);letter-spacing:.12em;text-transform:uppercase;color:rgba(16,37,43,.32);white-space:nowrap}
.tb-track i{width:7px;height:7px;flex:none;background:var(--primary);opacity:.45;transform:rotate(45deg)}
.tb-marquee:hover .tb-track{animation-play-state:paused}
@keyframes tbScroll{to{transform:translateX(-50%)}}

/* ============ contact page: form responsiveness + EFX-style side shapes ============ */
@media(max-width:860px){.cform{grid-template-columns:1fr!important}}
.shape--form-left{background-image:url(shape-2.svg?dice2);width:clamp(220px,24vw,360px);height:clamp(250px,28vw,410px);left:-120px;top:120px;z-index:0}
.shape--form-right{background-image:url(shape-3.svg?dice2);width:clamp(240px,26vw,400px);height:clamp(275px,30vw,460px);right:-110px;bottom:-40px;z-index:0}
.shape--form-mid{background-image:url(shape-1.svg?dice2);width:clamp(260px,30vw,460px);height:clamp(290px,33vw,520px);left:34%;top:38%;z-index:0;opacity:.55}

/* ============ OEM finishes & personalisation spec cards ============ */
.fingroup{margin-top:34px}
.fingroup h3{font-family:var(--head);font-size:15.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--primary-d);margin-bottom:14px}
.finrow{display:grid;grid-template-columns:repeat(auto-fill,minmax(185px,1fr));gap:14px}
.fincard{display:block;color:inherit;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;transition:transform .25s,box-shadow .25s}
.fincard:hover{transform:translateY(-4px);box-shadow:0 16px 34px -14px rgba(0,153,168,.4)}
.fincard img{width:100%;aspect-ratio:1.15;object-fit:cover;display:block}
.fincard b{display:block;font-family:var(--head);font-size:15px;padding:11px 14px 2px}
.fincard small{display:block;padding:0 14px 13px;color:#777;font-size:12.8px;line-height:1.45}

/* ============ trio diagonal image strip (Design/Production/Sales) ============ */
.trio-imgs{display:flex;gap:10px;margin:4px 0 38px}
.trio-imgs div{flex:1}
.trio-imgs div:nth-child(1){clip-path:polygon(0 0,100% 0,90% 100%,0 100%)}
.trio-imgs div:nth-child(2){clip-path:polygon(10% 0,100% 0,90% 100%,0 100%)}
.trio-imgs div:nth-child(3){clip-path:polygon(10% 0,100% 0,100% 100%,0 100%)}
.trio-imgs img{width:100%;height:clamp(150px,20vw,270px);object-fit:cover;display:block}
@media(max-width:700px){.trio-imgs img{height:100px}}

/* ============ FAQ: have-more-questions card + category layout ============ */
.qmore{max-width:480px;width:100%;background:var(--primary);border-radius:6px;overflow:hidden;box-shadow:0 24px 50px -18px rgba(0,122,137,.55)}
.qmore__img{clip-path:polygon(0 0,100% 0,100% 97%,0 51%)}
.qmore__img img{width:100%;aspect-ratio:16/12;object-fit:cover;object-position:center 55%;display:block}
.qmore__bd{padding:6px 26px 26px}
.qmore__bd h3{color:#fff;font-size:22px;margin-bottom:8px}
.qmore__bd p{color:rgba(255,255,255,.85);font-size:14.5px;margin-bottom:18px}
@media(max-width:800px){.faqcat{grid-template-columns:1fr!important}.faqcat>div:first-child{position:static!important}}

/* spacing between statband / trustedby / products */
.statband{margin-bottom:clamp(30px,4.5vw,60px)}
.trustedby{padding:clamp(36px,5vw,64px) 0;margin-bottom:clamp(16px,2.5vw,36px)}

/* trio columns: themed background photos with diagonal split */
.trio__col{padding:clamp(30px,4vw,48px) clamp(28px,4vw,46px)}
.trio__col:nth-child(1){clip-path:polygon(0 0,100% 0,91% 100%,0 100%)}
.trio__col:nth-child(2){clip-path:polygon(9% 0,100% 0,91% 100%,0 100%)}
.trio__col:nth-child(3){clip-path:polygon(9% 0,100% 0,100% 100%,0 100%)}
@media(max-width:800px){.trio__col{clip-path:none!important}}

/* blog pagination */
.bpager{display:flex;gap:8px;justify-content:center;margin-top:36px;flex-wrap:wrap}
.bpager button{min-width:40px;height:40px;border:1.5px solid var(--line);background:#fff;border-radius:9px;font-family:var(--head);font-weight:600;font-size:14.5px;color:var(--ink);cursor:pointer;transition:all .15s}
.bpager button:hover{border-color:var(--primary);color:var(--primary)}
.bpager button.on{background:var(--primary);border-color:var(--primary);color:#fff}

/* FAQ: EFX-style two-column with sticky ask card */
.faq2col{display:grid;grid-template-columns:1fr 360px;gap:clamp(30px,4.5vw,70px);align-items:start}
.faq-side{position:sticky;top:104px}
.fqgroup{margin-bottom:38px}
.fqhead{display:flex;align-items:center;gap:14px;margin-bottom:8px}
.fqhead img{width:58px;height:58px;border-radius:12px;object-fit:cover;flex:none}
.fqhead h2{font-size:21px;margin:0}
.fqhead small{color:#999;font-size:13px}
@media(max-width:900px){.faq2col{grid-template-columns:1fr}.faq-side{position:static;order:2}}

/* footer contact + social */
.f-contact{list-style:none;margin:18px 0 0;padding:0;font-size:13.8px;line-height:1.55;color:rgba(255,255,255,.72)}
.f-contact li{margin-bottom:7px}
.f-contact a{color:rgba(255,255,255,.85);transition:color .15s}
.f-contact a:hover{color:var(--accent)}
.f-social{display:flex;gap:10px;margin-top:16px}
.f-social a{width:38px;height:38px;border:1.5px solid rgba(255,255,255,.25);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;transition:all .2s}
.f-social a:hover{background:var(--primary);border-color:var(--primary);transform:translateY(-2px)}
.f-social svg{width:17px;height:17px;fill:currentColor}

/* footer share row */
.f-share{display:flex;align-items:center;gap:9px}
.f-share small{font-family:var(--head);font-weight:600;letter-spacing:.12em;text-transform:uppercase;font-size:11.5px;color:rgba(255,255,255,.55);margin-right:2px}
.f-share a,.f-share button{width:32px;height:32px;border:1.5px solid rgba(255,255,255,.25);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;background:none;cursor:pointer;padding:0;transition:all .2s}
.f-share a:hover,.f-share button:hover{background:var(--primary);border-color:var(--primary);transform:translateY(-2px)}
.f-share button.ok{background:var(--primary);border-color:var(--primary)}
.f-share svg{width:15px;height:15px;fill:currentColor}

/* ============ process zigzag timeline ============ */
.zig{position:relative;max-width:1300px;margin:10px auto 0}
.zig::before{display:none}
.zig__item{display:grid;grid-template-columns:1fr 90px 1fr;align-items:center;margin-bottom:clamp(4px,0.6vw,10px);position:relative}
.zig__mid{grid-column:2;display:flex;flex-direction:column;align-items:center;gap:6px}
.zig__die{width:64px;height:64px;border-radius:50%;background:#fff;border:2px solid var(--primary);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 22px -10px rgba(0,153,168,.45)}
.zig__die svg{width:30px;height:30px;fill:none;stroke:var(--primary);stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
.zig__mid .zh{font-size:13px;color:var(--primary-d);font-weight:600}
.zig__bd{grid-column:1;text-align:right;padding-right:6px}
.zig__sp{grid-column:3}
.zig__item--r .zig__bd{grid-column:3;grid-row:1;text-align:left;padding-right:0;padding-left:6px}
.zig__item--r .zig__sp{grid-column:1;grid-row:1}
.zig__num{font-family:var(--head);font-weight:700;font-size:clamp(26px,3vw,38px);color:rgba(0,153,168,.22);line-height:1;display:block;margin-bottom:4px}
.zig__bd h3{font-size:clamp(18px,1.9vw,23px);margin-bottom:6px}
.zig__bd p{font-size:14.5px;color:#666;max-width:56ch;display:inline-block}
@media(max-width:760px){
  .zig::before{left:32px}
  .zig__item{grid-template-columns:64px 1fr;gap:14px}
  .zig__mid{grid-column:1;grid-row:1}
  .zig__bd,.zig__item--r .zig__bd{grid-column:2;grid-row:1;text-align:left;padding:0}
  .zig__sp,.zig__item--r .zig__sp{display:none}
}

/* ============ product detail page ============ */
.pd{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(28px,4vw,64px);align-items:start;margin-top:18px}
.pd-main{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff}
.pd-main img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block}
.pd-thumbs{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.pd-thumbs img{width:76px;height:76px;border-radius:10px;object-fit:cover;border:2px solid var(--line);cursor:pointer;transition:border-color .15s}
.pd-thumbs img.on,.pd-thumbs img:hover{border-color:var(--primary)}
.pd-video{margin-top:14px;background:none;border:1.5px solid var(--primary);color:var(--primary);border-radius:30px;padding:9px 20px;font-family:var(--head);font-weight:600;font-size:14px;cursor:pointer;transition:all .2s}
.pd-video:hover{background:var(--primary);color:#fff}
.pd-i h1{font-size:clamp(22px,2.4vw,32px);line-height:1.25;margin-bottom:12px}
.pd-price{font-family:var(--head);font-weight:700;font-size:clamp(22px,2.4vw,30px);color:var(--primary-d);margin-bottom:18px}
.pd-price small{font-size:15px;color:#888;font-weight:600}
.pd-specs{list-style:none;margin:0 0 22px;padding:0;border-top:1px solid var(--line)}
.pd-specs li{padding:11px 2px;border-bottom:1px solid var(--line);font-size:14.5px;color:#555}
.pd-specs b{color:var(--ink);font-family:var(--head);font-weight:600;margin-right:10px;text-transform:uppercase;font-size:12.5px;letter-spacing:.06em}
.pd-cta{width:100%;justify-content:center;padding:16px 20px;font-size:15px}
.pd-note{font-size:13.5px;color:#888;margin-top:14px}
.pd-note a{color:var(--primary);font-weight:700}
.pd-craft{margin-top:26px;background:var(--grey);border-radius:14px;padding:20px 22px}
.pd-craft h3{font-size:16px;margin-bottom:8px}
.pd-craft p{font-size:14px;color:#666}
.pd-rel{margin:clamp(40px,6vw,70px) 0 30px}
.pd-relgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:18px}
.relp{display:block;color:inherit;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff;transition:transform .2s,box-shadow .2s}
.relp:hover{transform:translateY(-4px);box-shadow:0 16px 30px -14px rgba(0,153,168,.35)}
.relp img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block}
.relp b{display:block;font-family:var(--head);font-size:13.5px;padding:10px 12px 2px;line-height:1.35}
.relp small{display:block;padding:0 12px 12px;color:var(--primary-d);font-weight:700;font-size:13px}
.vmodal{position:fixed;inset:0;background:rgba(10,14,15,.82);z-index:1200;display:flex;align-items:center;justify-content:center;padding:20px}
.vbox{position:relative;max-width:820px;width:100%}
.vbox video{width:100%;border-radius:12px;background:#000}
.vx{position:absolute;top:-44px;right:0;background:none;border:none;color:#fff;font-size:34px;cursor:pointer}
@media(max-width:820px){.pd{grid-template-columns:1fr}.pd-relgrid{grid-template-columns:1fr 1fr}}

/* product detail image strip */
.pd-detail{margin-top:clamp(36px,5vw,60px)}
.pd-detail img{display:block;width:100%;max-width:860px;margin:14px auto;border-radius:12px}

/* alibaba-style key attributes + lead time */
.pd-attrs{margin-top:clamp(36px,5vw,56px);max-width:980px}
.attr-grid{display:grid;grid-template-columns:170px 1fr 170px 1fr;border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-top:14px}
.attr-grid>div{padding:11px 16px;font-size:14px;border-bottom:1px solid var(--line)}
.attr-grid .al{background:var(--grey);color:#777;font-weight:600}
.attr-grid .av{color:var(--ink)}
.attr-grid>div:nth-last-child(-n+2){border-bottom:none}
.lead-t{width:100%;border-collapse:collapse;margin-top:14px;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.lead-t th{background:var(--grey);text-align:left;font-family:var(--head);font-size:13.5px;padding:11px 16px;border-bottom:1px solid var(--line);width:190px}
.lead-t td{padding:11px 16px;font-size:14px;border-bottom:1px solid var(--line);border-left:1px solid var(--line)}
@media(max-width:760px){.attr-grid{grid-template-columns:140px 1fr}}

/* ============ six-material making process (manufacture page) ============ */
.mk{display:grid;grid-template-columns:0.9fr 1.1fr;gap:clamp(24px,3.5vw,54px);align-items:center;margin-bottom:clamp(34px,4.5vw,56px)}
.mk--flip .mk-img{order:2}
.mk-img{border:2px dashed var(--line);border-radius:16px;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;background:var(--grey)}
.mk-img span{font-family:var(--head);font-weight:600;letter-spacing:.08em;text-transform:uppercase;font-size:12.5px;color:#b5bcbf}
.mk-bd h3{font-size:clamp(20px,2.1vw,26px);margin-bottom:2px}
.mk-sub{font-family:var(--head);font-weight:600;font-size:13.5px;color:var(--primary-d);margin-bottom:14px}




.mk-note{margin-top:12px;font-size:13.5px;color:var(--primary-d);font-weight:700}
@media(max-width:760px){.mk{grid-template-columns:1fr}.mk--flip .mk-img{order:0}}

/* footer contact-us column with icons */
.footer-middle{grid-template-columns:1.35fr .9fr .9fr .9fr 1.15fr}
.f-ic li{display:flex;gap:10px;align-items:flex-start}
.f-ic svg{width:15px;height:15px;fill:var(--primary);flex:none;margin-top:3px}
@media(max-width:980px){.footer-middle{grid-template-columns:1fr 1fr}}

.footer-middle h5 a{color:inherit;transition:color .15s}
.footer-middle h5 a:hover{color:var(--accent)}

.f-follow{font-family:var(--head);font-weight:700;letter-spacing:.16em;text-transform:uppercase;font-size:11.5px;color:var(--accent);margin:20px 0 10px}

/* home line-card hover carousel fade */
#products .pcard .im img{transition:opacity .18s ease,transform .4s}

/* blog grid view: featured-card format, 4 per row (slightly smaller) */
.kc-list.as-grid{grid-template-columns:repeat(4,1fr);gap:18px}
.kc-list.as-grid .kc-row{border:1px solid var(--line);transition:transform .22s,box-shadow .25s}
.kc-list.as-grid li:hover .kc-row{transform:translateY(-5px);box-shadow:0 18px 40px -16px rgba(0,0,0,.16)}
.kc-list.as-grid .kc-thumb img{aspect-ratio:16/9;object-fit:cover;object-position:center;width:100%;height:auto;background:#fff;padding:0}
.kc-list.as-grid .kc-row-text{display:block;padding:13px 15px 4px}
.kc-list.as-grid .kc-row-text .cat{display:inline-block;font-family:var(--head);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--primary-d);background:var(--primary-tint);padding:3px 9px;margin-bottom:8px}
.kc-list.as-grid .kc-row-text h3{font-size:15px;line-height:1.35;margin-bottom:6px}
.kc-list.as-grid .kdate{font-size:12px;color:#999}
.kc-list.as-grid .rt{display:block;padding:2px 15px 14px;font-size:12px;color:#999}
@media(max-width:1100px){.kc-list.as-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:820px){.kc-list.as-grid{grid-template-columns:1fr 1fr}}
@media(max-width:540px){.kc-list.as-grid{grid-template-columns:1fr}}

/* customization options: one block per option, hover cycles choices */
.copt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:26px}
.copt{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;transition:transform .22s,box-shadow .25s;cursor:default}
.copt:hover{transform:translateY(-5px);box-shadow:0 18px 40px -16px rgba(0,153,168,.35)}
.copt-im{position:relative}
.copt-im img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}

.copt-bd{padding:14px 18px 16px}
.copt-bd h3{font-size:17px;margin-bottom:2px}
.copt-bd small{display:block;font-family:var(--head);font-weight:600;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--primary-d);margin-bottom:8px}
.copt-bd p{font-size:13.5px;color:#777;min-height:38px}
@media(max-width:900px){.copt-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.copt-grid{grid-template-columns:1fr}}

/* blog grid: thumbnail as full-card background, slight grayscale, brighten on hover */
.kc-list.as-grid .kc-row{position:relative;aspect-ratio:1/1.08;overflow:hidden;display:block;padding:0}
.kc-list.as-grid .kc-thumb{position:absolute;inset:0;width:100%;height:100%}
.kc-list.as-grid .kc-thumb img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover;object-position:center;padding:0;filter:grayscale(.45) brightness(.97);transition:filter .35s ease,transform .45s ease}
.kc-list.as-grid li:hover .kc-thumb img{filter:grayscale(0) brightness(1.04);transform:scale(1.03)}
.kc-list.as-grid .kc-row::after{content:'';position:absolute;left:0;right:0;bottom:0;height:64%;background:linear-gradient(transparent,rgba(255,255,255,.95) 58%);pointer-events:none}
.kc-list.as-grid .kc-row-text{position:absolute;left:0;right:0;bottom:24px;padding:0 15px;z-index:2;background:none}
.kc-list.as-grid .kdate{display:none}
.kc-list.as-grid .rt{position:absolute;left:15px;bottom:8px;z-index:2;padding:0}

/* product page: colour variants + video thumb */
.pd-varwrap{margin:-6px 0 20px}
.pd-varwrap b{display:block;font-family:var(--head);font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#777;margin-bottom:8px}
.pd-vars{display:flex;flex-wrap:wrap;gap:8px}
.pd-sku{width:52px;height:52px;padding:0;border:2px solid var(--line);border-radius:10px;overflow:hidden;background:#fff;cursor:pointer;transition:border-color .15s}
.pd-sku:hover{border-color:var(--primary)}
.pd-sku img{width:100%;height:100%;object-fit:cover;display:block}
.pd-vth{position:relative;width:76px;height:76px;padding:0;border:2px solid var(--line);border-radius:10px;overflow:hidden;background:#000;cursor:pointer;flex:none;transition:border-color .15s}
.pd-vth:hover{border-color:var(--primary)}
.pd-vth img{width:100%;height:100%;object-fit:cover;opacity:.75;display:block}
.pd-vth span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:22px;text-shadow:0 2px 8px rgba(0,0,0,.6)}

/* customization lead-time tables */
.cust-t,.lead-t{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.cust-t th,.lead-t th{background:var(--primary-tint);font-family:var(--head);font-size:13px;letter-spacing:.05em;text-transform:uppercase;color:var(--primary-d);text-align:left;padding:11px 16px;border-bottom:1px solid var(--line)}
.cust-t td,.lead-t td{padding:11px 16px;font-size:14px;border-bottom:1px solid var(--line)}
.cust-t tr:last-child td,.lead-t tr:last-child td,.lead-t tr:last-child th{border-bottom:none}
.cust-t td+td,.cust-t th+th,.lead-t td+td,.lead-t th+td{border-left:1px solid var(--line)}

/* footer bottom: share aligns with Contact-us column, same row as copyright */
@media(min-width:981px){
  .footer-bottom .container{display:grid;grid-template-columns:1.35fr .9fr .9fr .9fr 1.15fr;gap:40px;align-items:center;max-width:var(--max);padding:0 clamp(10px,2vw,30px)}
  .footer-bottom .container>span:first-child{grid-column:1/5}
  .footer-bottom .f-share{grid-column:5;justify-self:start}
}

/* force pure fractional tracks so footer-middle and footer-bottom columns align exactly */
@media(min-width:981px){
  .footer-middle{grid-template-columns:minmax(0,1.35fr) minmax(0,.9fr) minmax(0,.9fr) minmax(0,.9fr) minmax(0,1.15fr)}
  .footer-bottom .container{grid-template-columns:minmax(0,1.35fr) minmax(0,.9fr) minmax(0,.9fr) minmax(0,.9fr) minmax(0,1.15fr)}
}

/* home line-card carousel: seamless crossfade layer, badge always on top */
#products .pcard .im{position:relative}
#products .pcard .im .cf{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .38s ease;z-index:1;pointer-events:none}
#products .pcard .im .moq{z-index:3}
#products .pcard .im img{transition:transform .4s}


/* transparent dice animation (canvas-composited, no background box) */
.tdice{position:relative;display:block;width:100%}
.tdice .tdice-c{width:100%;height:auto;display:block;filter:drop-shadow(0 18px 30px rgba(0,0,0,.22))}
.tdice--float{max-width:clamp(220px,26vw,380px);margin:0 auto}
@media(prefers-reduced-motion:reduce){.tdice .tdice-c{filter:none}}

/* testimonials: single-photo layout (no cut-out overlay when a review has only one image) */
.t-img--one .main{width:100%}
.t-img--one .cut{display:none}

/* product gallery: stage, arrows, hover zoom */
.pd-stage{position:relative}
.pd-main{overflow:hidden;cursor:zoom-in}
.pd-main.zooming{cursor:zoom-out}
.pd-main img{transition:transform .18s ease-out;will-change:transform}
.pd-nav{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;border-radius:50%;border:none;background:rgba(255,255,255,.92);box-shadow:0 4px 14px rgba(0,0,0,.18);display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;transition:opacity .2s,background .2s;z-index:3}
.pd-stage:hover .pd-nav{opacity:1}
.pd-nav:hover{background:var(--primary)}
.pd-nav svg{width:16px;height:16px;fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.pd-nav:hover svg{stroke:#fff}
.pd-prev{left:12px}.pd-next{right:12px}
@media(hover:none){.pd-nav{opacity:1}}
/* second CTA: retail */
.pd-cta--retail{margin-top:10px;color:var(--primary)}
.pd-cta--retail::before{background:#fff;border:2px solid var(--primary)}
.pd-cta--retail::after{background:var(--primary-tint)}
.pd-cta--retail:hover{color:var(--primary-d)}
.pd-cta--retail .arr-svg{stroke:currentColor}


/* Process page: factory filmstrip inside the normal image slot (layout unchanged) */
.matv--strip{container-type:inline-size;background:#0d1214}
.mstrip-track{display:flex;height:100%;width:max-content;transform:translateX(0);transition:transform 22s linear}
.matv--strip:hover .mstrip-track,.matv--strip:focus-within .mstrip-track{transform:translateX(calc(100cqw - 100%))}
.mstrip-track img{height:100%;width:auto;max-width:none;display:block;object-fit:cover}
@media(prefers-reduced-motion:reduce){.mstrip-track{transition:none}}

/* process steps: numbered two-column list (replaces wrapping chips) */
.mk-steps{list-style:none;margin:0;padding:0;counter-reset:mkstep;display:grid;grid-template-columns:1fr 1fr;gap:0 26px}
.mk-steps li{counter-increment:mkstep;display:flex;gap:11px;align-items:baseline;padding:8px 0;border-bottom:1px solid var(--line);font-size:14.2px;color:#555;line-height:1.4}
.mk-steps li::before{content:counter(mkstep,decimal-leading-zero);font-family:var(--head);font-weight:700;font-size:12px;color:var(--primary);min-width:20px;letter-spacing:.04em}
@media(max-width:760px){.mk-steps{grid-template-columns:1fr}}
/* overview block without a companion image */
.image-text--solo .container{display:block}
.image-text--solo .image-text__text{max-width:78ch}

/* OEM route cards: full-bleed background photo, brightens on hover */
.oem-card--bg{position:relative;overflow:hidden;background:#fff}
.oem-card--bg::after{content:'';position:absolute;inset:0;z-index:0;background-image:var(--bg);background-size:cover;background-position:center;opacity:.42;transition:opacity .35s ease,transform .6s ease}
.oem-card--bg:hover::after{opacity:.62;transform:scale(1.03)}
.oem-card--bg::before{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(100deg,rgba(255,255,255,.94) 0%,rgba(255,255,255,.86) 42%,rgba(255,255,255,.55) 100%);transition:background .35s ease}
.oem-card--bg:hover::before{background:linear-gradient(100deg,rgba(255,255,255,.9) 0%,rgba(255,255,255,.78) 42%,rgba(255,255,255,.42) 100%)}
.oem-card--bg>*{position:relative;z-index:2}


/* blog grid cards: image fills the card, no white gradient, brighten on hover */
.kc-list.as-grid .kc-row::after{display:none}
.kc-list.as-grid .kc-thumb img{filter:brightness(.9);transition:filter .3s ease,transform .5s ease}
.kc-list.as-grid li:hover .kc-thumb img{filter:brightness(1.06);transform:scale(1.04)}
.kc-list.as-grid .kc-row-text{background:linear-gradient(transparent,rgba(10,14,15,.82) 42%);padding:34px 15px 6px}
.kc-list.as-grid .kc-row-text h3{color:#fff}
.kc-list.as-grid .kc-row-text .cat{background:var(--primary);color:#fff}
.kc-list.as-grid .rt{color:rgba(255,255,255,.75);z-index:2}

/* Design · Production · Sales — one full-bleed photo band behind the whole section */
.trio-band{position:relative;isolation:isolate;overflow:hidden;padding-top:clamp(52px,6vw,86px);padding-bottom:clamp(52px,6vw,86px)}
/* three real photos joined on the site's signature diagonal.
   One shared skew angle for every panel — the seams stay exactly parallel,
   which per-panel clip-path percentages could not guarantee. */
.tb-bg{--tb-skew:-5deg;position:absolute;inset:0;z-index:-2;display:flex;overflow:hidden}
.tb-p{position:relative;flex:1;overflow:hidden;transform:skewX(var(--tb-skew))}
.tb-p:first-child{margin-left:-80px}
.tb-p:last-child{margin-right:-80px}
.tb-p img{width:100%;height:100%;object-fit:cover;display:block;transform:skewX(calc(-1 * var(--tb-skew))) scale(1.2);transition:transform .8s ease}
.trio-band:hover .tb-p img{transform:skewX(calc(-1 * var(--tb-skew))) scale(1.24)}
@media(max-width:700px){.tb-bg{--tb-skew:-3deg}.tb-p:first-child{margin-left:-40px}.tb-p:last-child{margin-right:-40px}}
.trio-band::before{content:'';position:absolute;inset:0;z-index:-1;background:rgba(255,255,255,.8);transition:background .4s ease}
.trio-band:hover::before{background:rgba(255,255,255,.66)}
.trio-band:hover::after{transform:scale(1.03)}
.trio-band .trio__col{clip-path:none!important;padding:clamp(20px,2.5vw,32px) clamp(18px,2.5vw,34px)}

/* manufacture sub-page: real production filmstrip per material */
.mk-img--strip{position:relative;container-type:inline-size;overflow:hidden;border:none;background:#0d1214;border-radius:16px;display:block;aspect-ratio:auto;padding:0}
.mk-track{display:flex;width:max-content;transform:translateX(0);transition:transform 26s linear}
.mk-img--strip:hover .mk-track,.mk-img--strip:focus-within .mk-track{transform:translateX(calc(100cqw - 100%))}
.mk-track img{height:clamp(230px,26vw,340px);width:auto;max-width:none;display:block}
.mk-hint{position:absolute;right:10px;bottom:8px;z-index:2;font-family:var(--head);font-weight:600;font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:rgba(255,255,255,.72);background:rgba(13,18,20,.6);padding:4px 10px;border-radius:20px}
@media(prefers-reduced-motion:reduce){.mk-track{transition:none}}

/* ============ contact page: EFX-style hero collage + see-through form ============ */
.chero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center}
.chero-txt .lead{max-width:52ch}
.chero-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.chero-chips span{display:inline-flex;align-items:center;gap:8px;border:2px solid var(--line);border-radius:999px;padding:8px 15px;font-size:13.5px;font-weight:700;color:var(--primary-d);background:#fff}
.chero-chips span::before{content:"";width:8px;height:8px;flex:none;background:var(--primary);transform:rotate(45deg)}
.chero-art{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
.chero-art figure{margin:0;overflow:hidden;border-radius:14px;background:var(--grey)}
.chero-art img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.chero-art figure:hover img{transform:scale(1.05)}
.chero-art .ca-tall{grid-row:span 2;aspect-ratio:3/4.35}
.chero-art .ca-a{aspect-ratio:4/3;margin-top:clamp(22px,4vw,54px)}
.chero-art .ca-b{aspect-ratio:1/1}
@media(max-width:900px){.chero{grid-template-columns:1fr;gap:30px}.chero-art .ca-a{margin-top:0}}
@media(max-width:560px){.chero-art .ca-tall{grid-row:auto;aspect-ratio:4/3}.chero-art{grid-template-columns:1fr 1fr}.chero-art .ca-tall{grid-column:span 2}}

.cform-wrap{position:relative;z-index:1;background:rgba(255,255,255,.42);-webkit-backdrop-filter:blur(3px) saturate(1.05);backdrop-filter:blur(3px) saturate(1.05);border:1px solid rgba(255,255,255,.75);border-radius:18px;padding:clamp(22px,3.4vw,44px);box-shadow:0 18px 60px -34px rgba(12,60,52,.5)}
.cform input,.cform textarea,.cform select{background:rgba(255,255,255,.62)!important;transition:background .2s,border-color .2s}
.cform input:focus,.cform textarea:focus,.cform select:focus{background:#fff!important;border-color:var(--primary)!important;outline:none}
.sec-shapes{position:relative;overflow:hidden}
.sec-shapes .shape{opacity:.85}
.sec-shapes .shape--form-mid{opacity:.42}

/* ghost button — .btn paints its fill in ::before, so an inline background is
   invisible; this variant repaints that layer instead of fighting it */
.btn--ghost{color:var(--primary);border:2px solid var(--primary);padding:14px 28px}
.btn--ghost::before{background:#fff}
.btn--ghost::after{background:var(--primary)}
.btn--ghost:hover{color:#fff}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.btn-row .btn{flex:none}

/* brand mark used as a story panel instead of a photo */
.ig--mark{background:var(--grey);box-shadow:none}
.ig--mark img{object-fit:contain!important;padding:clamp(26px,5%,64px)}
/* zigzag: image column first, text second */
.image-text--flip .container > *:first-child{order:2}
.image-text--flip .container > *:last-child{order:1}
@media(max-width:900px){.image-text--flip .container > *{order:0!important}}
.hero-mark{display:flex;align-items:center;justify-content:center;padding:clamp(10px,3vw,40px)}
.hero-mark img{width:100%;max-width:420px;height:auto;display:block}
/* founder placeholder tile in the story collage */
.ca-founder{display:flex;align-items:center;justify-content:center;background:var(--grey);border:2px dashed var(--line)}
.ca-founder span{font-family:var(--head);font-weight:600;font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:#9aa;text-align:center;line-height:1.7}
.tech4--six{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.tech4--six{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.tech4--six{grid-template-columns:1fr}}

/* blog author box */
.author-box{display:flex;gap:20px;align-items:flex-start;margin-top:clamp(36px,5vw,56px);padding:clamp(20px,3vw,28px);background:var(--grey);border-radius:14px}
.author-box>img{width:76px;height:76px;border-radius:50%;object-fit:cover;flex:none;background:#fff}
.author-box .ab-k{font-family:var(--head);font-weight:700;font-size:16.5px;color:var(--ink);display:block}
.author-box .ab-r{display:block;font-size:13.5px;color:var(--primary-d);font-weight:700;margin:2px 0 8px}
.author-box p{font-size:14.5px;color:#555;margin:0}
.author-box a{color:var(--primary);font-weight:700}
@media(max-width:560px){.author-box{flex-direction:column}.author-box>img{width:64px;height:64px}}
.pd-desc p{font-size:15px;line-height:1.75;color:#555;max-width:88ch;margin-top:12px}


/* ---------- 工艺时间轴动效:虚线流动 + 骰子滚入 ---------- */
@keyframes zigDash{from{background-position:center 0}to{background-position:center 14px}}


/* 骰子:滚入(带回弹)、悬停自转、入场后呼吸光晕 */
.zig__die{transition:transform .55s cubic-bezier(.34,1.56,.64,1),box-shadow .35s ease}
.zig__die svg{transition:transform .6s cubic-bezier(.34,1.56,.64,1)}
html.js .rv .zig__die{transform:rotate(-150deg) scale(.65)}
html.js .rv.in .zig__die{transform:none}
.zig__item:nth-child(2) .zig__die{transition-delay:.06s}
.zig__item:nth-child(3) .zig__die{transition-delay:.12s}
.zig__item:nth-child(4) .zig__die{transition-delay:.18s}
.zig__item:nth-child(5) .zig__die{transition-delay:.24s}
.zig__item:nth-child(6) .zig__die{transition-delay:.3s}
@keyframes zigGlow{0%,100%{box-shadow:0 8px 22px -10px rgba(0,153,168,.45)}50%{box-shadow:0 10px 28px -8px rgba(0,153,168,.75)}}
.zig__item.in .zig__die{animation:zigGlow 3.2s ease-in-out infinite}
.zig__item.in:nth-child(even) .zig__die{animation-delay:1.6s}
.zig__die:hover svg{transform:rotate(360deg)}

@media (prefers-reduced-motion:reduce){
  .zig::before{animation:none}
  .zig__item.in .zig__die{animation:none}
  html.js .rv .zig__die{transform:none}
  .zig__die,.zig__die svg{transition:none}
}


/* ---------- 工艺流程区块:车间实拍背景 + 白色柔化遮罩 ---------- */
.proc-bg{position:relative;overflow:hidden}
.proc-bg::before{content:'';position:absolute;inset:-2%;background:url(process-bg.jpg) center/cover no-repeat;filter:blur(2px)}
.proc-bg::after{content:'';position:absolute;inset:0;background:rgba(255,255,255,.88)}
.proc-bg>*{position:relative;z-index:1}
@media (max-width:760px){.proc-bg::after{background:rgba(255,255,255,.93)}}


/* ---------- 时间轴连接线:逐段绘制,首尾不越出骰子 ---------- */
.zig__mid{position:relative;z-index:2}
.zig__item:not(:last-child)::after{
  content:'';position:absolute;left:50%;transform:translateX(-50%);z-index:0;
  top:50%;height:calc(100% + clamp(4px,0.6vw,10px));width:3px;
  background:linear-gradient(var(--primary) 58%,transparent 0) center/3px 15px repeat-y;
  animation:zigDash 1.1s linear infinite;
}
@media (max-width:760px){.zig__item:not(:last-child)::after{left:32px}}
@media (prefers-reduced-motion:reduce){.zig__item:not(:last-child)::after{animation:none}}

/* ---------- WhatsApp 悬浮按钮:每隔一段时间轻晃一下 ---------- */
@keyframes waNudge{
  0%,88%,100%{transform:rotate(0) scale(1)}
  90%{transform:rotate(-13deg) scale(1.08)}
  92%{transform:rotate(11deg) scale(1.08)}
  94%{transform:rotate(-8deg) scale(1.05)}
  96%{transform:rotate(6deg) scale(1.03)}
  98%{transform:rotate(0) scale(1)}
}
@keyframes waRing{
  0%,86%,100%{box-shadow:0 10px 24px -8px rgba(0,0,0,.4)}
  90%{box-shadow:0 10px 24px -8px rgba(0,0,0,.4),0 0 0 10px rgba(0,153,168,.28)}
  97%{box-shadow:0 10px 24px -8px rgba(0,0,0,.4),0 0 0 22px rgba(0,153,168,0)}
}
.wa{animation:waNudge 7s ease-in-out infinite}
.wa::before{animation:waRing 7s ease-in-out infinite}
.wa:hover{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.wa,.wa::before{animation:none}}
.mk-intro{font-size:14.5px;line-height:1.7;color:#666;max-width:70ch;margin:4px 0 14px}

/* category line essay above the grid */
.cat-intro{max-width:88ch;margin:6px 0 26px}
.cat-intro p{font-size:15px;line-height:1.75;color:#555;margin-top:10px}

/* ============ exit-intent popup — split panel, pure white form ============ */
.xit{position:fixed;inset:0;z-index:1200;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(12,25,28,.55);backdrop-filter:blur(3px);opacity:0;transition:opacity .28s ease}
.xit.on{opacity:1}
.xit__card{position:relative;background:#fff;max-width:900px;width:100%;display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);border-radius:18px;overflow:hidden;box-shadow:0 40px 90px -30px rgba(0,0,0,.55);transform:translateY(14px);transition:transform .28s ease}
.xit.on .xit__card{transform:none}
.xit__side{background:var(--primary-d);color:#fff;padding:clamp(24px,3.5vw,38px) clamp(22px,3vw,34px);display:flex;flex-direction:column;gap:14px}
.xit__im{position:relative;min-height:100%}
.xit__im img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .45s ease}
@media(max-width:720px){.xit__im{min-height:180px}}
.xit__side h3{font-family:var(--head);font-size:clamp(20px,2.3vw,26px);line-height:1.22;color:#fff}
.xit__pill{align-self:flex-start;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:5px 13px;font-size:12.5px;font-weight:600;letter-spacing:.03em}
.xit__list{list-style:none;display:grid;gap:11px;margin-top:4px}
.xit__list li{position:relative;padding-left:26px;font-size:13.5px;line-height:1.5;color:rgba(255,255,255,.92)}
.xit__list li::before{content:'\2713';position:absolute;left:0;top:0;width:17px;height:17px;border-radius:50%;background:var(--accent);color:var(--ink);font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center}
.xit__form{background:#fff;padding:clamp(22px,3vw,34px) clamp(22px,3vw,32px);display:grid;gap:12px;align-content:center}
.xit__row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.xit__form label{display:grid;gap:5px;font-weight:700;font-size:12.5px;color:var(--ink)}
.xit__form input,.xit__form select,.xit__form textarea{border:1.5px solid var(--line);border-radius:9px;padding:10px 12px;font-family:inherit;font-size:14px;background:#fff;width:100%}
.xit__form input:focus,.xit__form select:focus,.xit__form textarea:focus{border-color:var(--primary);outline:none}
.xit__form textarea{min-height:84px;resize:vertical}
.xit__form .btn{justify-content:center;width:100%;margin-top:2px}
.xit__ok{display:none;background:#e9f7ee;border:1px solid #bfe5cb;color:#1c7c39;padding:10px 14px;font-weight:700;font-size:13.5px;border-radius:9px}
.xit__x{position:absolute;top:10px;right:12px;z-index:2;background:#fff;border:1px solid var(--line);width:34px;height:34px;border-radius:50%;font-size:16px;line-height:1;cursor:pointer;color:var(--ink);box-shadow:0 4px 14px rgba(0,0,0,.12)}
@media(max-width:720px){.xit__card{grid-template-columns:1fr;max-height:92vh;overflow:auto}.xit__side{gap:10px}.xit__list{gap:8px}}

/* ============ brand intro splash (homepage) ============ */
.splash{position:fixed;inset:0;z-index:3000;background:#fff;display:flex;align-items:center;justify-content:center;transition:opacity .65s ease}
.splash img{width:clamp(200px,32vw,380px);height:auto;opacity:0;transform:scale(.96);animation:splashIn .8s ease .1s forwards}
@keyframes splashIn{to{opacity:1;transform:none}}
.splash.bye{opacity:0;pointer-events:none}
html.no-splash .splash{display:none}

/* lead-time table: border-collapse kills the table's own border/radius, so run it
   in separate mode with the same frame as .attr-grid above it */
.lead-t{border-collapse:separate;border-spacing:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-top:14px}
.lead-t tr:last-child th{border-bottom:none}

/* OEM artwork template downloads */
.dl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;margin-top:26px}
.dl{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px;transition:border-color .2s,transform .2s,box-shadow .2s}
.dl:hover{border-color:var(--primary);transform:translateY(-2px);box-shadow:0 12px 26px -18px rgba(0,153,168,.6)}
.dl-d{flex:none;width:48px;height:48px;border-radius:10px;background:var(--primary-tint);color:var(--primary-d);font-family:var(--head);font-weight:700;font-size:15px;display:flex;align-items:center;justify-content:center}
.dl-m{font-family:var(--head);font-weight:600;font-size:14.5px;color:var(--ink);line-height:1.3;display:flex;flex-direction:column;gap:3px}
.dl-m small{font-family:var(--sans);font-weight:400;font-size:12.5px;color:#999}
.dl--guide .dl-d{background:var(--primary);color:#fff}

/* OEM — two customisation options, the client's binary model */
.split2{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:26px}
.split2-c{border:1px solid var(--line);border-radius:16px;padding:clamp(22px,3vw,32px);background:#fff}
.split2-c--semi{border-top:4px solid var(--primary)}
.split2-c--full{border-top:4px solid #7c5cc4}
.split2-tag{display:inline-block;font-family:var(--head);font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;padding:5px 12px;border-radius:999px;margin-bottom:12px}
.split2-c--semi .split2-tag{background:var(--primary-tint);color:var(--primary-d)}
.split2-c--full .split2-tag{background:#efe9fb;color:#5b3fa0}
.split2-c h3{font-size:clamp(19px,2.1vw,23px);margin-bottom:6px}
.split2-lead{font-size:14.5px;color:#666;margin-bottom:14px}
.split2-yes{list-style:none;display:grid;gap:9px;margin-bottom:16px}
.split2-yes li{position:relative;padding-left:24px;font-size:14.5px;line-height:1.5}
.split2-yes li::before{content:"";position:absolute;left:0;top:7px;width:9px;height:9px;transform:rotate(45deg)}
.split2-c--semi .split2-yes li::before{background:var(--primary)}
.split2-c--full .split2-yes li::before{background:#7c5cc4}
.split2-fixed{background:var(--grey);border-radius:10px;padding:12px 14px;font-size:13.5px;color:#555}
@media(max-width:820px){.split2{grid-template-columns:1fr}}

.logo-rule{margin-top:26px;border:1px solid var(--line);border-radius:16px;padding:clamp(20px,3vw,30px);background:#fff}
.logo-rule__t{font-family:var(--head);font-size:13px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--primary-d);margin-bottom:14px}
.logo-rule__row{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:center}
.logo-rule__side{border-radius:12px;padding:16px 18px;display:grid;gap:5px}
.logo-rule__side b{font-family:var(--head);font-size:16px}
.logo-rule__side span{font-size:13.5px}
.logo-rule__side--ok{background:var(--primary-tint);color:var(--primary-d)}
.logo-rule__side--no{background:#efe9fb;color:#5b3fa0}
.logo-rule__vs{font-family:var(--head);font-weight:700;color:#bbb;font-size:13px}
.logo-rule__note{font-size:13.5px;color:#777;margin-top:14px}
@media(max-width:700px){.logo-rule__row{grid-template-columns:1fr}.logo-rule__vs{text-align:center}}

.copt-tag{font-style:normal;font-family:var(--head);font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;border-radius:999px;vertical-align:middle;margin-left:6px}
.copt-tag--semi{background:var(--primary-tint);color:var(--primary-d)}
.copt-tag--full{background:#efe9fb;color:#5b3fa0}
.tag-semi{color:var(--primary-d)}
.tag-full{color:#5b3fa0}

/* OEM — per-material customisation spec blocks */
.spec-list{display:grid;gap:14px;margin-top:26px}
.spec{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden}
.spec--live{border-color:rgba(0,153,168,.45);box-shadow:0 14px 34px -26px rgba(0,153,168,.55)}
.spec__h{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px clamp(18px,2.6vw,28px);border-bottom:1px solid var(--line)}
.spec--soon .spec__h{border-bottom:none}
.spec__h h3{font-size:clamp(17px,2vw,21px);line-height:1.2}
.spec__sub{display:block;font-size:13px;color:#8a8a8a;margin-top:3px}
.spec__badge{flex:none;font-family:var(--head);font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;padding:6px 12px;border-radius:999px;background:var(--grey);color:#9a9a9a;white-space:nowrap}
.spec__badge--live{background:var(--primary-tint);color:var(--primary-d)}
.spec__body{display:grid;grid-template-columns:1fr 1fr;gap:0}
.spec__col{padding:20px clamp(18px,2.6vw,28px)}
.spec__col+.spec__col{border-left:1px solid var(--line)}
.spec__k{font-family:var(--head);font-size:12.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;margin-bottom:10px}
.spec__k--semi{color:var(--primary-d)}
.spec__k--full{color:#5b3fa0}
.spec__col ul{list-style:none;display:grid;gap:8px;margin-bottom:12px}
.spec__col li{position:relative;padding-left:22px;font-size:14.5px;line-height:1.5}
.spec__col li::before{content:"";position:absolute;left:0;top:7px;width:8px;height:8px;transform:rotate(45deg)}
.spec__k--semi ~ ul li::before{background:var(--primary)}
.spec__k--full ~ ul li::before{background:#7c5cc4}
.spec__fixed{font-size:13px;color:#777;background:var(--grey);border-radius:9px;padding:10px 12px}
.spec__times{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);background:#fcfcfb}
.spec__times div{padding:14px clamp(18px,2.6vw,28px);display:grid;gap:3px}
.spec__times div+div{border-left:1px solid var(--line)}
.spec__times span{font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;color:#9a9a9a;font-family:var(--head);font-weight:600}
.spec__times b{font-size:14.5px;color:var(--ink)}
.spec__soon{padding:0 clamp(18px,2.6vw,28px) 20px;font-size:14.5px;color:#888;max-width:82ch}
@media(max-width:760px){.spec__body{grid-template-columns:1fr}.spec__col+.spec__col{border-left:none;border-top:1px solid var(--line)}.spec__times{grid-template-columns:1fr}.spec__times div+div{border-left:none;border-top:1px solid var(--line)}}

/* dieline downloads — one row, PDF thumbnails */
.dl-row{grid-template-columns:repeat(7,1fr);gap:12px}
.dl-row .dl{flex-direction:column;align-items:stretch;gap:0;padding:0;overflow:hidden;text-align:center}
.dl-th{display:block;background:#fff;border-bottom:1px solid var(--line);padding:14px 10px}
.dl-th img{display:block;width:100%;height:96px;object-fit:contain}
.dl-row .dl-m{padding:12px 10px 14px;gap:2px;font-size:13px;align-items:center}
.dl-row .dl-m b{font-family:var(--head);font-size:15px;color:var(--primary-d);letter-spacing:.02em}
.dl-row .dl-m small{font-size:11.5px}
.dl-row .dl:hover .dl-th img{transform:scale(1.06)}
.dl-th img{transition:transform .35s ease}
@media(max-width:1100px){.dl-row{grid-template-columns:repeat(4,1fr)}}
@media(max-width:620px){.dl-row{grid-template-columns:repeat(2,1fr)}}
.spec__figwrap{padding:clamp(18px,2.6vw,28px) clamp(18px,2.6vw,28px) 0}
.spec__fig{margin:0}
.spec__fig img{display:block;width:100%;height:auto;border-radius:12px;border:1px solid var(--line)}
.spec__fig figcaption{font-size:13px;color:#8a8a8a;padding:10px 2px 0;line-height:1.55;max-width:88ch}

/* 移动端文章布局修正:900px 以下强制单列(修正 1180px 规则的源顺序覆盖问题) */
@media(max-width:900px){
  .article-layout{grid-template-columns:1fr!important;gap:0!important}
  .toc-side{position:static!important;margin-bottom:24px}
  .rel-side{grid-column:auto!important;margin-top:8px}
}

/* 视觉隐藏但对 SEO/读屏可见 */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}