/* Self-hosted fonts (SIL Open Font License): Lexend for headings, Source Sans 3 for text */
@font-face{font-family:'Lexend';font-style:normal;font-weight:300 700;font-display:swap;src:url(fonts/lexend-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Lexend';font-style:normal;font-weight:300 700;font-display:swap;src:url(fonts/lexend-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/source-sans-3-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/source-sans-3-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* =====================================================================
   Standard Coating (M) Sdn Bhd - site stylesheet
   Direction: a plant data sheet. Wide stamped headings, a solid red
   nameplate, a left heading rail, ruled rows, cool steel neutrals.
   ===================================================================== */

:root{
  --red:#c8161d;--red-d:#8f0f14;--red-l:#fbeaea;
  --ink:#17191c;--ink2:#23272b;--steel:#3d444b;--mute:#5d656d;--mist:#eef0f2;--rule:#d3d8dc;
  /* aliases used by inline styles in the pages */
  --brand:var(--red);--brand-d:var(--red-d);--brand-l:var(--red-l);--dark:var(--ink);--dark2:var(--ink2);--soft:var(--mist);--line:var(--rule);--muted:var(--mute);
  --display:"Lexend","Noto Sans SC","Microsoft YaHei","PingFang SC",system-ui,sans-serif;
  --body:"Source Sans 3","Noto Sans SC","Microsoft YaHei","PingFang SC",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --r:0;--w:1180px;--nav:84px;
  --red-t:var(--red);--bg:#fff;--surface:#fff;--dk:#17191c;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:110px}
body{font-family:var(--body);font-size:18px;line-height:1.65;color:var(--steel);background:#fff;overflow-x:hidden;overflow-x:clip;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
h1,h2,h3,h4{font-family:var(--display);font-stretch:112%;color:var(--ink);font-weight:700;line-height:1.12}
html:lang(zh-Hans) body{line-height:1.85;letter-spacing:.02em}
html:lang(zh-Hans) h1,html:lang(zh-Hans) h2,html:lang(zh-Hans) h3,html:lang(zh-Hans) h4{font-stretch:100%;letter-spacing:0;line-height:1.3}
.wrap{--gut:28px;max-width:var(--w);margin:0 auto;padding:0 max(var(--gut),env(safe-area-inset-right)) 0 max(var(--gut),env(safe-area-inset-left))}

a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--red);outline-offset:3px}
.skip{position:absolute;left:12px;top:-60px;z-index:200;background:var(--ink);color:#fff;padding:12px 18px;border-radius:var(--r);font-weight:600;transition:top .15s}
.skip:focus{top:12px;outline:3px solid #fff;outline-offset:2px}

/* ---------- top bar + header ---------- */
.topbar{background:var(--ink);color:#b9c0c6;font-size:13px}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-top:7px;padding-bottom:7px;flex-wrap:wrap}
.topbar a[href^="tel"]{color:#fff;font-weight:600}
.topr{display:flex;align-items:center;gap:22px}
.langs{display:flex;gap:2px}
.langs a{color:#b9c0c6;padding:2px 9px;font-weight:500;border-radius:2px}
.langs a[aria-current]{background:#fff;color:var(--ink);font-weight:600}
header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--rule)}
header.scrolled{box-shadow:0 6px 20px rgba(23,25,28,.08)}
.nav{display:flex;align-items:center;justify-content:space-between;height:var(--nav)}
.logo{display:flex;align-items:center}
.logo img{height:54px;width:auto;display:block}
nav ul{display:flex;gap:2px;align-items:center}
nav a{display:block;position:relative;padding:10px 15px;font-size:15px;font-weight:500;color:var(--ink)}
nav a:not(.cta)::after{content:"";position:absolute;left:15px;right:15px;bottom:2px;height:3px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .2s}
nav a.active::after{transform:scaleX(1)}
nav a.active{font-weight:600}
nav a.cta{background:var(--red);color:#fff;font-weight:600;margin-left:12px;padding:12px 22px;border-radius:var(--r)}
.toggle{display:none;background:none;border:0;font-size:28px;line-height:1;cursor:pointer;color:var(--ink);width:48px;height:48px}

/* ---------- buttons ---------- */
.btn{display:inline-block;background:var(--red);color:#fff!important;font:600 15px/1.1 var(--body);padding:16px 28px;border:2px solid var(--red);border-radius:var(--r);cursor:pointer;text-align:center;transition:background .18s,border-color .18s,color .18s}
.btn.outline{background:transparent;color:var(--ink)!important;border-color:var(--ink)}
.btn.ghost{background:transparent;border-color:rgba(255,255,255,.75)}
.actions{display:flex;flex-wrap:wrap;gap:12px}
.more{display:inline-block;color:var(--red-t);font-weight:600;border-bottom:2px solid var(--red);padding-bottom:1px}

/* ---------- home hero: photo slideshow, headline, service shortcuts ---------- */
.hero{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:clamp(500px,calc(100vh - 206px),680px);background:var(--ink);color:#fff;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(23,25,28,.8) 0%,rgba(23,25,28,.5) 48%,rgba(23,25,28,.12) 100%),linear-gradient(0deg,rgba(23,25,28,.55),rgba(23,25,28,0) 40%)}
.slides{position:absolute;inset:0}
.slide{position:absolute;inset:0;background:center/cover no-repeat;opacity:0;transform:scale(1.06);transition:opacity 1s,transform 7s linear}
.slide.on{opacity:1;transform:scale(1)}
.hero.slider.paused .slide{transition:opacity 1s}
.hero>.wrap{position:relative;z-index:2;width:100%;padding-top:96px;padding-bottom:60px}
.hero-copy{max-width:640px}
.hero-copy h1{color:#fff;font-size:clamp(34px,4.6vw,62px);font-weight:700;font-stretch:104%;line-height:1.06;margin-bottom:20px}
.hero-copy .lead{max-width:46ch;font-size:19px;line-height:1.6;color:rgba(255,255,255,.93);margin-bottom:32px}
.hero-copy>*{animation:heroRise .9s cubic-bezier(.2,.65,.25,1) both}
.hero-copy>*:nth-child(2){animation-delay:.1s}
.hero-copy>*:nth-child(3){animation-delay:.2s}
.hero-copy>*:nth-child(4){animation-delay:.3s}
@keyframes heroRise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.s-ctrl{position:absolute;z-index:3;right:max(28px,calc((100vw - var(--w))/2 + 28px));bottom:26px;display:flex;align-items:center;gap:0}
.s-dot{position:relative;width:24px;height:24px;padding:0;border:0;background:transparent;cursor:pointer;transition:width .2s}
.s-dot::before{content:"";position:absolute;top:50%;left:50%;width:10px;height:10px;box-sizing:border-box;border:2px solid #fff;transform:translate(-50%,-50%);transition:width .25s var(--ease-out),background-color .2s var(--ease-out)}
.s-dot.on{width:42px}
.s-dot.on::before{width:28px;background:#fff}
.s-pause{width:32px;height:32px;margin-left:6px;border:2px solid #fff;background:rgba(23,25,28,.4);color:#fff;font-size:10px;line-height:1;cursor:pointer;padding:0}
.s-arrow{position:absolute;z-index:3;top:50%;margin-top:-28px;width:46px;height:56px;border:0;background:rgba(23,25,28,.5);color:#fff;font-size:24px;cursor:pointer;transition:background .2s}
.s-prev{left:0}.s-next{right:0}
.cap{position:absolute;z-index:3;right:max(28px,calc((100vw - var(--w))/2 + 28px));bottom:62px;color:#fff;font-size:13px;text-shadow:0 1px 4px rgba(0,0,0,.65)}
.s-ctrl button:focus-visible,.s-arrow:focus-visible,.lb button:focus-visible{outline:3px solid #fff;outline-offset:3px}
@media(prefers-reduced-motion:reduce){.hero-copy>*{animation-name:bandFade}}
@media(max-width:980px){
  .s-ctrl{bottom:auto;top:20px}
}
@media(max-width:760px){
  .hero{min-height:0}
  .hero>.wrap{padding-top:130px;padding-bottom:44px}
  .hero-copy .lead{font-size:17px;margin-bottom:26px}
  .hero-copy .actions .btn{width:100%}
}

/* ---------- facts strip under the hero ---------- */

/* ---------- page banner (inner pages) ---------- */
.page-hero{position:relative;color:#fff;background:var(--ink) center/cover;border-bottom:6px solid var(--red)}
.page-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--ink) 30%,rgba(23,25,28,.74) 62%,rgba(23,25,28,.3))}
.page-hero .wrap{position:relative;padding-top:78px;padding-bottom:72px}
.page-hero h1{color:#fff;font-size:clamp(30px,4vw,50px);font-weight:800;font-stretch:116%;margin-bottom:14px;max-width:22ch}
.page-hero p{color:#d3d8dc;font-size:18px;max-width:56ch}
.crumbs{font-size:14px;color:#aab2b9;margin-bottom:20px}

/* ---------- sections + the heading rail ---------- */
section{padding:96px 0}
section.alt{background:var(--mist)}
section.dark{background:var(--ink);color:#c3cad0}
.head{max-width:62ch;margin-bottom:44px}
.head h2,.split h2{font-size:clamp(26px,2.7vw,38px);margin-bottom:14px}
.head p{color:var(--mute);font-size:17.5px}
.head p+p{margin-top:14px}
.dark .head h2{color:#fff}
.dark .head p{color:#aab2b9}
.head.center{text-align:left;margin-left:0;margin-right:0}
.head.head-link .btn{margin-top:14px}
@media(min-width:981px){
  body:not(.pg-gallery) section:not(.dark)>.wrap:has(>.head:first-child):not(.split){display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);column-gap:56px;align-items:start}
  body:not(.pg-gallery) section:not(.dark)>.wrap:has(>.head:first-child):not(.split)>.head{grid-column:1;grid-row:1/span 12;margin:0;max-width:none;position:sticky;top:calc(var(--nav) + 28px)}
  body:not(.pg-gallery) section:not(.dark)>.wrap:has(>.head:first-child):not(.split)>*:not(.head){grid-column:2}
  body:not(.pg-gallery) section:not(.dark)>.wrap:has(>.head:first-child):not(.split)>*:not(.head)+*{margin-top:40px}
}

.split{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
.split>.reveal,.split>div{min-width:0}
.split p{max-width:62ch;margin-bottom:16px}
.split .head{margin-bottom:20px}
.split img.photo{display:block;width:100%;border-radius:var(--r)}
.split.top>div>.head+p{font-size:20px;line-height:1.6;color:var(--ink);font-weight:500;max-width:56ch}
.ticks{margin:18px 0 26px}
.ticks li{position:relative;padding-left:22px;margin-bottom:9px;font-weight:500;color:var(--ink)}
.ticks li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:9px;background:var(--red)}

.facts{margin:22px 0 28px;border-top:3px solid var(--ink)}
.facts>div{display:grid;grid-template-columns:150px 1fr;gap:16px;padding:12px 0;border-bottom:1px solid var(--rule)}
.facts dt{font-weight:600;color:var(--ink);font-size:15px}
.facts dd{margin:0;color:var(--steel)}

/* ---------- cards and rows ---------- */
.grid{display:grid;gap:28px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.card{background:#fff;border:1px solid var(--rule);border-radius:var(--r);overflow:hidden}
.card img.cover{display:block;width:100%;height:210px;object-fit:cover}
.card .body{padding:24px 26px 28px}
.card h3{font-size:22px;margin-bottom:8px}
.card p{font-size:16px;color:var(--mute)}
.card:not(:has(img)){border-top:3px solid var(--red)}
.dark .card{background:var(--ink2);border-color:#30363b}
.dark .card h3{color:#fff}
.dark .card p{color:#aab2b9}
.stage{display:inline-block;margin-top:14px;padding:2px 0 2px 10px;border-left:3px solid var(--red);font-size:14px;font-weight:600;color:var(--ink);line-height:1.35}
.dark .stage{color:#fff}
/* service index on the home page: ruled rows, not tiles */
/* why us: plain text blocks under a heavy rule */

/* photos */
.photos{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.shot{position:relative;margin:0;overflow:hidden;border-radius:var(--r)}
.shot img{display:block;width:100%;height:320px;object-fit:cover;transition:transform .6s}
.shot figcaption{position:absolute;left:0;right:0;bottom:0;padding:48px 20px 16px;color:#fff;font-weight:600;font-size:15px;background:linear-gradient(transparent,rgba(23,25,28,.82))}

/* ---------- galleries ---------- */
.filters{display:flex;flex-wrap:wrap;gap:8px;position:sticky;top:calc(var(--nav) - 1px);z-index:20;background:#fff;padding:14px 0;margin:-14px 0 34px;border-bottom:1px solid var(--rule)}
.filters button{font:600 14px/1 var(--body);padding:12px 20px;border:1px solid var(--rule);background:#fff;color:var(--ink);border-radius:var(--r);cursor:pointer;transition:border-color .15s,background .15s}
.filters button.on{background:var(--ink);border-color:var(--ink);color:#fff}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:20px}
.gallery figure{position:relative;margin:0;background:#fff;border:1px solid var(--rule);border-radius:var(--r);overflow:hidden;cursor:zoom-in;display:flex;flex-direction:column}
.gallery img{display:block;width:100%;object-fit:cover;transition:transform .6s}
.gallery figcaption{padding:12px 14px;font-size:14.5px;font-weight:600;line-height:1.35;color:var(--ink);border-top:1px solid var(--rule);background:#fff;position:relative}
.gallery.big{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.gallery.big img{aspect-ratio:4/3;height:auto}
.gallery.parts{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.gallery.parts img{aspect-ratio:4/3;background:#fff}
.gallery.fac{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.gallery.fac img{aspect-ratio:1/1}
.gallery.fac.uniform{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.gallery.fac.uniform.uniform-sm{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.gallery.fac.uniform.r43 img{aspect-ratio:4/3}
.pg-index .gallery.parts{grid-template-columns:repeat(4,1fr);gap:16px}

/* ---------- logos ---------- */
.logo-wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));padding:0 1px 1px 0;overflow:hidden;margin-bottom:48px}
.logo-tile{display:grid;place-items:center;height:116px;padding:16px 20px;background:#fff;border:1px solid var(--rule);margin:0 -1px -1px 0}
.logo-tile img{max-width:100%;max-height:72px;width:auto;height:auto;object-fit:contain}
.logo-wall.home{grid-template-columns:repeat(4,1fr);margin-bottom:30px}
.logo-wall.sup-logos{grid-template-columns:repeat(4,1fr)}
.callout{display:grid;grid-template-columns:170px 1fr;gap:32px;align-items:center;background:var(--ink);color:#fff;padding:30px 34px;border-left:6px solid var(--red)}
.callout img{display:block;width:170px;height:170px;object-fit:contain;background:#fff;padding:10px}
.callout h3{color:#fff;font-size:28px;margin-bottom:8px}
.callout p{color:#cfd5da;max-width:58ch;margin-bottom:14px}
.callout .more{color:#fff;border-color:var(--red)}
.subhead{font-size:26px;margin:0 0 16px}
.search{display:block;width:100%;max-width:420px;padding:14px 16px;border:1px solid #b8c0c7;border-radius:var(--r);font:inherit;margin-bottom:22px;background:#fff}
.search:focus{outline:3px solid var(--red);outline-offset:1px;border-color:var(--red)}
.cust{display:grid;grid-template-columns:repeat(2,1fr);gap:0 40px}
.cust li{padding:14px 0;border-bottom:1px solid var(--rule);font-weight:500;color:var(--ink);font-size:16px}
.empty{display:none;color:var(--mute);padding:16px 0}

/* ---------- about page ---------- */
.trophy{margin:0;background:#fff;border:1px solid var(--rule);border-radius:var(--r);padding:26px 26px 18px;text-align:center;max-width:420px;justify-self:center;width:100%}
.trophy img{display:block;width:100%;max-height:520px;object-fit:contain;margin:0 auto}
.trophy figcaption{margin-top:14px;padding-top:14px;border-top:1px solid var(--rule);font-size:14.5px;font-weight:600;color:var(--ink)}
.trophy.zoomable{cursor:zoom-in}
.awards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px}
.cert-logos{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:26px}
.cert-chip{display:flex;align-items:center;justify-content:center;height:92px;padding:12px 18px;background:#fff;border:1px solid var(--rule);border-radius:var(--r)}
.cert-chip img{height:64px;width:auto;display:block}
.cert-note{margin-top:12px;font-size:14px;color:var(--mute)}
.env{display:grid;grid-template-columns:1.25fr 1fr;gap:64px;align-items:start}
.env p{max-width:60ch;margin-bottom:16px;color:var(--mute)}
.env-box{background:var(--mist);border-top:4px solid var(--red);padding:30px}
.env-box h3{font-size:24px;margin-bottom:14px}
.env-box .ticks{margin:0}
.alt .env-box{background:#fff}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chips li{padding:9px 16px;border:1px solid var(--rule);background:#fff;border-radius:var(--r);font-weight:600;font-size:15px;color:var(--ink)}
.suppliers{display:grid;grid-template-columns:1fr 1fr;gap:20px 56px}
.suppliers h3{font-size:28px;padding-bottom:12px;border-bottom:3px solid var(--ink);margin-bottom:0}
.suppliers li{padding:14px 4px;border-bottom:1px solid var(--rule);font-weight:500;color:var(--ink);font-size:16px}

/* ---------- services page ---------- */
.flow{display:grid;grid-template-columns:repeat(4,1fr);margin:0 0 44px;border:1px solid #30363b;background:var(--ink2)}
.flow li{position:relative;display:flex;flex-direction:column;gap:8px;padding:24px 26px;border-left:1px solid #30363b}
.flow li:first-child{border-left:0}
.flow li:not(:last-child)::after{content:"";position:absolute;right:-9px;top:50%;width:16px;height:16px;margin-top:-8px;background:var(--ink2);border-top:1px solid #30363b;border-right:1px solid #30363b;transform:rotate(45deg);z-index:2}
.flow b{font-family:var(--display);font-stretch:112%;font-size:34px;line-height:1;font-weight:700;color:#ff8f94}
.flow span{color:#fff;font-weight:600;font-size:16px;line-height:1.35}
.va-note{color:var(--mute);font-size:15.5px}
#process .card img.cover{height:250px}
.faq{max-width:none}
.faq details{border-top:1px solid var(--rule)}
.faq details:last-child{border-bottom:1px solid var(--rule)}
.faq summary{position:relative;cursor:pointer;list-style:none;padding:20px 54px 20px 0;font-weight:600;font-size:17.5px;line-height:1.4;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);font-size:28px;font-weight:400;color:var(--red-t);line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq .ans{padding:0 0 22px;color:var(--mute);max-width:68ch}
.faq .ans p{margin:0}
.faq-more{margin-top:30px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;font-weight:600;color:var(--ink)}
.faq-more .btn{padding:11px 20px;font-size:14px}

/* ---------- contact page ---------- */
.quick{padding:0;margin-top:-44px;position:relative;z-index:5}
.quick+section{padding-top:80px}
.qa-grid{display:grid;grid-template-columns:repeat(3,1fr);background:#fff;border-top:4px solid var(--ink);box-shadow:0 14px 34px rgba(23,25,28,.14)}
.qa{display:flex;align-items:center;gap:18px;padding:26px 28px;border-left:1px solid var(--rule);color:var(--ink);font-size:17px;font-weight:600;line-height:1.35;transition:background .2s}
.qa:first-child{border-left:0}
.qa svg{flex:none;color:var(--red-t)}
.qa span{display:block;min-width:0;overflow-wrap:anywhere}
.qa b{display:block;font-family:var(--body);font-stretch:100%;font-size:13.5px;font-weight:600;color:var(--red-t)}
.qa small{display:block;font-size:14px;font-weight:400;color:var(--mute)}
.contact{display:grid;grid-template-columns:1fr 1.15fr;gap:64px;align-items:start}
.info-item{border-top:1px solid var(--rule);padding:16px 0}
.info-item:last-of-type{border-bottom:1px solid var(--rule);margin-bottom:24px}
.info-item .ico{display:none}
.info-item b{display:block;font-family:var(--body);font-stretch:100%;font-size:13.5px;font-weight:600;color:var(--red-t);margin-bottom:3px}
.info-item span{color:var(--ink);font-size:17px}
.info-item a[href^="tel"],.info-item a[href^="mailto"]{color:var(--red-t);font-weight:600;overflow-wrap:anywhere}
.dir-links{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 20px}
.dir-links .btn{padding:11px 18px;font-size:14px}
.hours{max-width:380px;margin-top:6px}
.hours li{display:flex;justify-content:space-between;gap:20px;padding:5px 0;border-bottom:1px dashed var(--rule);color:var(--ink);font-size:16px}
.hours li:last-child{border-bottom:0}
.hours li span:first-child{color:var(--mute)}
form{display:grid;gap:15px;align-content:start;padding:36px;background:#fff;border:1px solid var(--rule);border-top:4px solid var(--ink);border-radius:var(--r)}
form h3{font-size:28px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:15px}
label{font-size:14px;font-weight:600;color:var(--ink)}
input,textarea,select{display:block;width:100%;margin-top:6px;padding:13px 14px;border:1px solid #b8c0c7;border-radius:var(--r);font:inherit;font-weight:400;color:var(--ink);background:#fff}
input:focus,textarea:focus,select:focus{outline:3px solid var(--red);outline-offset:1px;border-color:var(--red)}
.note{font-size:13.5px;color:var(--mute)}
.err{display:block;margin-top:4px;color:#b3261e;font-size:13px;font-weight:600}
input.bad,textarea.bad{border-color:#b3261e}
.ok{display:none;scroll-margin-top:100px;padding:14px 16px;background:#e8f7ec;color:#17692f;font-weight:600;border-radius:var(--r)}
.map{display:block;width:100%;height:400px;border:0;margin-top:48px;border-radius:var(--r)}
.steps3{counter-reset:st;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.steps3 li{counter-increment:st;background:#fff;border:1px solid var(--rule);border-top:3px solid var(--ink);padding:26px}
.steps3 li::before{content:counter(st);display:block;font-family:var(--display);font-stretch:112%;font-size:42px;line-height:1;font-weight:700;color:var(--red-t);margin-bottom:12px}
.steps3 h3{font-size:22px;margin-bottom:8px}
.steps3 p{font-size:15.5px;color:var(--mute)}
.checklist{background:#fff;border:1px solid var(--rule);padding:28px 32px}
.checklist h3{font-size:24px;margin-bottom:14px}
.checklist .ticks{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px 32px;margin:0}

/* ---------- call-to-action band + footer ---------- */
.band{background:var(--red);color:#fff;padding:64px 0}
.band .wrap{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap}
.band h2{color:#fff;font-size:clamp(26px,3vw,38px);margin-bottom:6px}
.band p{color:rgba(255,255,255,.92);font-size:17.5px}
.band .btn{background:#fff;border-color:#fff;color:var(--red-t)!important}
footer{background:var(--ink);color:#aeb6bd;font-size:15px}
.foot{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.4fr;gap:40px;padding-top:68px;padding-bottom:48px}
footer h4,footer h3{font-family:var(--body);font-stretch:100%;font-size:15px;font-weight:600;color:#fff;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid #30363b}
footer li{margin-bottom:9px}
footer a[href^="tel"],footer a[href^="mailto"]{color:#fff}
.logo-box{display:inline-block;background:#fff;padding:12px 16px;margin-bottom:16px;border-radius:var(--r)}
.logo-box img{display:block;height:44px;width:auto}
.foot-hours{margin-top:16px;font-size:13.5px;line-height:1.6}
.foot-hours b{display:block;color:#fff;font-weight:600;margin-bottom:2px}
.iso-chip{display:inline-block;margin-top:14px;padding:6px 12px;border:1px solid #4a5258;font-size:12.5px;font-weight:600;color:#fff}
.copy{border-top:1px solid #30363b;font-size:13.5px}
.copy .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;padding-top:20px;padding-bottom:20px}

/* ---------- lightbox, back-to-top, mobile call bar ---------- */
.lb{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;padding:30px;background:rgba(15,17,19,.95)}
.lb.open{display:flex}
.lb img{max-width:92vw;max-height:80vh;background:#fff;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.lb-cap{position:absolute;bottom:22px;left:0;right:0;text-align:center;color:#e3e7ea;font-size:14px}
.lb button{position:absolute;width:48px;height:48px;border:0;background:rgba(255,255,255,.14);color:#fff;font-size:24px;cursor:pointer}
.lb-x{top:20px;right:20px}.lb-p{left:20px;top:50%}.lb-n{right:20px;top:50%}
#top-btn{position:fixed;right:20px;bottom:max(20px,env(safe-area-inset-bottom));z-index:40;width:48px;height:48px;border:0;border-radius:var(--r);background:var(--red);color:#fff;font-size:22px;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .25s}
#top-btn.show{opacity:1;pointer-events:auto}
.callbar{display:none}

/* ---------- scroll reveal (works with site.js) ---------- */
.reveal,.reveal.in{opacity:1;transform:none;transition:none}
.sr{opacity:0;transform:translateY(32px);transition:opacity .8s cubic-bezier(.2,.65,.25,1) var(--d,0s),transform .8s cubic-bezier(.2,.65,.25,1) var(--d,0s)!important;will-change:opacity,transform}
.sr[data-sr="left"]{transform:translateX(-48px)}
.sr[data-sr="right"]{transform:translateX(48px)}
.sr.in{opacity:1;transform:none}
@keyframes bandIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes bandFade{from{opacity:0}to{opacity:1}}
.page-hero .wrap>*{animation:bandIn .8s cubic-bezier(.2,.65,.25,1) both}
.page-hero .wrap>*:nth-child(2){animation-delay:.1s}
.page-hero .wrap>*:nth-child(3){animation-delay:.2s}
@media(prefers-reduced-motion:reduce){
  .sr,.sr[data-sr],.sr[data-sr="left"],.sr[data-sr="right"]{transform:none!important}
  .page-hero .wrap>*{animation-name:bandFade}
}

/* =====================  responsive  ===================== */
@media(max-width:1100px){
  .pg-index .gallery.parts{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:980px){
  .toggle{display:block}
  nav ul{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:2px;padding:12px 28px 22px;background:#fff;border-bottom:1px solid var(--rule);box-shadow:0 14px 20px rgba(23,25,28,.08);max-height:calc(100vh - 130px);overflow:auto}
  nav ul.open{display:flex}
  nav a{padding:14px 4px}
  nav a:not(.cta)::after{left:4px;right:auto;width:36px;bottom:6px}
  nav a.cta{margin:10px 0 0;text-align:center}
  section{padding:76px 0}
  .split{grid-template-columns:1fr;gap:44px}
  .contact,.env{grid-template-columns:1fr;gap:40px}
  .g3{grid-template-columns:1fr 1fr}
  .foot{grid-template-columns:1fr 1fr}
  .flow{grid-template-columns:1fr 1fr}
  .flow li:nth-child(3){border-left:0}
  .flow li:nth-child(n+3){border-top:1px solid #30363b}
  .flow li::after{display:none}
  .sr[data-sr="left"],.sr[data-sr="right"]{transform:translateY(28px)}
  .sr.in[data-sr]{transform:none}
  .head{margin-bottom:34px}
}
@media(max-width:760px){
  :root{--nav:72px}
  .logo img{height:40px}
  .topbar .wrap{justify-content:flex-end}
  .topbar .wrap>span:first-child,.hide-s{display:none}
  .s-arrow,.cap{display:none}
  .s-ctrl{right:20px;bottom:auto;top:20px}
  section{padding:60px 0}
  .band{padding:48px 0}
  .band .wrap{flex-direction:column;align-items:flex-start}
  .g2,.g3,.steps3,.row,.cust,.suppliers,.checklist .ticks,.photos,.qa-grid{grid-template-columns:minmax(0,1fr)}
  .pg-index .gallery.parts{grid-template-columns:1fr 1fr;gap:12px}
  .gallery{gap:12px}
  .gallery.parts,.gallery.big{grid-template-columns:1fr 1fr}
  .gallery.fac,.gallery.fac.uniform,.gallery.fac.uniform.uniform-sm{grid-template-columns:1fr 1fr}
  .logo-wall,.logo-wall:not(.home),.logo-wall.home,.logo-wall.sup-logos{grid-template-columns:repeat(2,1fr)}
  .logo-tile{height:92px;padding:12px}
  .callout{grid-template-columns:1fr;gap:20px;padding:24px 22px}
  .callout img{width:140px;height:140px}
  .facts>div{grid-template-columns:1fr;gap:2px}
  .flow{grid-template-columns:minmax(0,1fr)}
  .flow li{flex-direction:row;align-items:center;gap:16px;padding:18px 22px;border-left:0;border-top:1px solid #30363b}
  .flow li:first-child{border-top:0}
  .flow b{min-width:44px;font-size:28px}
  .qa-grid{margin:0}
  .quick{margin-top:-30px}
  .qa{border-left:0;border-top:1px solid var(--rule);padding:18px 22px}
  .qa:first-child{border-top:0}
  .foot{grid-template-columns:1fr;padding-top:52px;padding-bottom:36px}
  .copy .wrap{flex-direction:column}
  .filters{top:calc(var(--nav) - 1px);flex-wrap:nowrap;overflow-x:auto;margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:16px}
  .filters button{flex:none}
  .map{height:280px}
  .lb{padding:12px}
  .lb-p{left:8px;top:auto;bottom:70px}.lb-n{right:8px;top:auto;bottom:70px}
  .lb img{max-height:68vh}
  .callbar{display:grid;grid-template-columns:1fr 1fr;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:60;padding:8px 10px calc(8px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--rule);box-shadow:0 -6px 20px rgba(0,0,0,.12)}
  .callbar a{display:flex;align-items:center;justify-content:center;gap:8px;min-height:46px;border-radius:var(--r);font-weight:700;font-size:15.5px;color:#fff}
  .callbar .cb-call{background:var(--red)}
  .callbar .cb-dir{background:var(--ink)}
  body{padding-bottom:calc(66px + env(safe-area-inset-bottom))}
  #top-btn{bottom:calc(78px + env(safe-area-inset-bottom))}
}
@media(max-width:560px){
  .actions .btn,.band .btn{width:100%}
  .sr{transform:translateY(22px)}
  form{padding:24px 18px}
}
@media(max-width:420px){
  .wrap{--gut:18px}
  .gallery.big{grid-template-columns:minmax(0,1fr)}
  .gallery figcaption{padding:10px 11px;font-size:13.5px}
}
@media(hover:none){
  .gallery figure:hover img,.shot:hover img{transform:none}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.card .more{margin-top:12px;font-size:15px}

/* gallery: counts, preview + "show all", hover cue */
.filters button .n{margin-left:8px;font-size:13px;font-weight:500;opacity:.65}
.filters button.on .n{opacity:.8}
.gallery-block.collapsed .gallery figure.over{display:none}
.gal-more{display:block;margin:30px auto 0;padding:14px 30px;border:2px solid var(--ink);border-radius:var(--r);background:transparent;color:var(--ink);font:600 15px/1.1 var(--body);cursor:pointer;transition:background .18s,color .18s}
.single .gal-more{display:none}
.gallery figure::after{content:"";position:absolute;top:10px;right:10px;width:34px;height:34px;background:rgba(23,25,28,.72) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M16 16l5 5'/%3E%3C/svg%3E") center/18px no-repeat;opacity:0;transition:opacity .2s;pointer-events:none}
.gallery figure:focus-visible::after{opacity:1}
.gallery figure:focus-visible{outline:3px solid var(--red);outline-offset:2px}
@media(hover:none){.gallery figure::after{display:none}}

/* hover styles only where a real pointer can hover (stops sticky hover on touch) */
@media (hover:hover) and (pointer:fine){
.topbar a[href^="tel"]:hover{text-decoration:underline}
.langs a:hover{color:#fff}
nav a:not(.cta):hover::after{transform:scaleX(1)}
nav a.cta:hover{background:var(--red-d)}
.btn:hover{background:var(--red-d);border-color:var(--red-d)}
.btn.outline:hover{background:var(--ink);color:#fff!important}
.btn.ghost:hover{background:#fff;border-color:#fff;color:var(--red-t)!important}
.more:hover{color:var(--red-d);border-color:var(--red-d)}
.s-pause:hover{background:var(--red);border-color:var(--red)}
.s-arrow:hover{background:var(--red)}
.crumbs a:hover{color:#fff;text-decoration:underline}
.shot:hover img{transform:scale(1.04)}
.filters button:hover{border-color:var(--ink)}
.gallery figure:hover img{transform:scale(1.04)}
.faq summary:hover{color:var(--red-t)}
.qa:hover{background:var(--mist)}
.info-item a:hover{text-decoration:underline}
.band .btn:hover{background:var(--ink);border-color:var(--ink);color:#fff!important}
footer a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.lb button:hover{background:var(--red)}
.card h3 a:hover{color:var(--red-t)}
.gal-more:hover{background:var(--ink);color:#fff}
.gallery figure:hover::after{opacity:1}
}

/* =====================================================================
   Craft pass: motion, press feedback, type, materials, mobile behaviour
   ===================================================================== */
:root{--ease-out:cubic-bezier(.23,1,.32,1);--ease-in-out:cubic-bezier(.77,0,.175,1)}

/* ---- type: tracking follows size, balanced headings, tabular figures ---- */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{font-kerning:normal;text-rendering:optimizeLegibility}
h1{letter-spacing:-.022em}
h2{letter-spacing:-.016em}
h3{letter-spacing:-.008em}
h4{letter-spacing:0}
.hero-copy h1,.page-hero h1{letter-spacing:-.026em}
h1,h2,h3{text-wrap:balance}
p,li{text-wrap:pretty}
.flow b,.steps3 li::before,.hours li span{font-variant-numeric:tabular-nums}
html:lang(zh-Hans) h1,html:lang(zh-Hans) h2,html:lang(zh-Hans) h3{letter-spacing:0}

/* ---- materials: the header is a translucent layer, content scrolls under it ---- */
header{background:rgba(255,255,255,.88);-webkit-backdrop-filter:saturate(170%) blur(16px);backdrop-filter:saturate(170%) blur(16px)}
@media(max-width:760px){.callbar{background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}}
@media(prefers-reduced-transparency:reduce){header,.callbar{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}}
@media(prefers-contrast:more){header{background:#fff;border-bottom-color:var(--ink)}.btn.ghost{border-color:#fff}.ht{border-color:#fff}}

/* ---- press feedback: instant on touch-down, specific properties only ---- */
.btn,.gal-more,.filters button,nav a.cta,.qa,.s-arrow,.s-pause,#top-btn,.callbar a{transition:transform .16s var(--ease-out),background-color .18s var(--ease-out),border-color .18s var(--ease-out),color .18s var(--ease-out),opacity .2s var(--ease-out)}
.btn:active,.gal-more:active,.filters button:active,nav a.cta:active,.qa:active,.s-pause:active,#top-btn:active,.callbar a:active{transform:scale(.97)}
.s-arrow:active{background:var(--red-d)}
nav a:not(.cta)::after{transition:transform .22s var(--ease-out)}
.s-dot{transition:width .25s var(--ease-out)}
.gallery img,.shot img{transition:transform .4s var(--ease-out)}
@media (hover:hover) and (pointer:fine){.gallery figure:hover img,.shot:hover img{transform:scale(1.03)}}

/* ---- scroll reveal: shorter, smaller travel, strong ease-out ---- */
.sr{transform:translateY(18px);transition:opacity .55s var(--ease-out) var(--d,0s),transform .55s var(--ease-out) var(--d,0s)!important}
.sr[data-sr="left"]{transform:translateX(-30px)}
.sr[data-sr="right"]{transform:translateX(30px)}
.sr.in{opacity:1;transform:none}
@media(max-width:980px){.sr[data-sr="left"],.sr[data-sr="right"]{transform:translateY(18px)}.sr.in[data-sr]{transform:none}}
@media(max-width:560px){.sr{transform:translateY(14px)}}
.hero-copy>*{animation-duration:.7s;animation-timing-function:var(--ease-out)}
.hero-copy>*:nth-child(2){animation-delay:.08s}
.hero-copy>*:nth-child(3){animation-delay:.16s}
.hero-copy>*:nth-child(4){animation-delay:.24s}
.page-hero .wrap>*{animation-duration:.6s;animation-timing-function:var(--ease-out)}
.page-hero .wrap>*:nth-child(2){animation-delay:.07s}
.page-hero .wrap>*:nth-child(3){animation-delay:.14s}

/* ---- occasional motion: mobile menu and lightbox open ---- */
@keyframes menuIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@keyframes lbFade{from{opacity:0}to{opacity:1}}
@keyframes lbPop{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
@media(max-width:980px){nav ul.open{transform-origin:top;animation:menuIn .2s var(--ease-out)}}
.lb.open{animation:lbFade .18s ease-out}
.lb.open img{animation:lbPop .22s var(--ease-out)}
@media(prefers-reduced-motion:reduce){nav ul.open,.lb.open,.lb.open img{animation:none}}

/* ---- phone behaviour: no tap flash, no double-tap delay, controls aren't selectable ---- */
html{-webkit-tap-highlight-color:transparent}
a,button,summary,[role="button"],input,select,textarea{touch-action:manipulation}
button,.btn,nav a,.langs a,.s-dot,.s-arrow,.s-pause,.callbar a,.qa,summary,#top-btn,.filters button,.gal-more{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.hero,.slides{touch-action:pan-y}
.lb,nav ul{overscroll-behavior:contain}
input,textarea,select{font-size:max(16px,1rem)}
@supports (min-height:100svh){.hero{min-height:clamp(500px,calc(100svh - 206px),680px)}}

/* long emails, URLs and unbroken strings wrap instead of widening their column */
main :is(li,dd,p,span,a),footer :is(li,a),.faq summary{overflow-wrap:anywhere}

/* =====================================================================
   Impeccable pass: certification band, flat service cards, drawn icons,
   photo wipe, themed browser surfaces
   ===================================================================== */

/* certification band under the hero (replaces the metric strip) */
.assure{background:#fff;border-bottom:1px solid var(--rule)}
.assure .wrap{display:flex;align-items:center;flex-wrap:wrap;gap:18px 36px;padding-top:22px;padding-bottom:22px}
.assure-marks{display:flex;align-items:stretch;gap:12px}
.assure-chip{display:flex;align-items:center;justify-content:center;height:68px;padding:8px 14px;background:#fff;border:1px solid var(--rule)}
.assure-chip img{display:block;height:50px;width:auto}
.assure p{flex:1 1 300px;max-width:60ch;margin:0;color:var(--steel);font-size:16.5px}
.assure p b{color:var(--ink);font-weight:600}
.tb-l a{margin-left:16px}
.hero-copy>*:nth-child(2){animation-delay:.08s}
.hero-copy>*:nth-child(3){animation-delay:.16s}

/* service tags: a small square marker instead of a coloured side stripe */
.stage{position:relative;padding:0 0 0 16px;border-left:0}
.stage::before{content:"";position:absolute;left:0;top:.5em;width:8px;height:8px;background:var(--red)}

/* cards are open columns under a heavy rule, not boxes */
.card{border:0;border-top:3px solid var(--ink);border-radius:0;background:none}
.card:not(:has(img)){border-top:3px solid var(--ink)}
.card .body{padding:20px 0 0}
.dark .card{background:var(--ink2);border-top-color:var(--red)}
.dark .card .body{padding:22px 24px 26px}
.callout{border-left:0;border-top:4px solid var(--red)}

/* drawn icons: one grid, one stroke */
.s-arrow svg,.toggle svg,#top-btn svg,.s-pause svg,.lb button svg{display:block;margin:auto;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.s-pause svg{width:16px;height:16px}
.s-pause svg.solid{fill:currentColor;stroke:none}
.toggle svg{width:26px;height:26px}
.s-arrow{display:grid;place-items:center}
.toggle{display:none;place-items:center}
@media(max-width:980px){.toggle{display:grid}}
.s-pause{display:grid;place-items:center}
#top-btn{display:grid;place-items:center}
.lb button{display:grid;place-items:center}
.faq summary::after{content:"";right:6px;width:16px;height:16px;font-size:0;background:linear-gradient(var(--red),var(--red)) center/16px 2px no-repeat,linear-gradient(var(--red),var(--red)) center/2px 16px no-repeat;transition:transform .22s var(--ease-out)}
.faq details[open] summary::after{content:"";background:linear-gradient(var(--red),var(--red)) center/16px 2px no-repeat}

/* photos are uncovered with a wipe; reduced motion gets a plain fade */
.sr[data-sr="wipe"]{opacity:1;transform:none;clip-path:inset(0 0 100% 0);transition:clip-path .8s var(--ease-out) var(--d,0s)!important}
.sr[data-sr="wipe"].in{clip-path:inset(0 0 0 0)}
@media(prefers-reduced-motion:reduce){
  .sr[data-sr="wipe"]{clip-path:none;opacity:0;transition:opacity .4s ease!important}
  .sr[data-sr="wipe"].in{opacity:1}
}

/* the parts of the browser nobody drew */
::selection{background:var(--red);color:#fff}
input,textarea,select{caret-color:var(--red);accent-color:var(--red)}
main a:not(.btn):not(.more):not(.qa){text-decoration-thickness:1px;text-underline-offset:.22em}
html{scrollbar-color:#8f979e var(--mist)}
.langs a[aria-current]:hover{color:var(--ink)}

/* page not found */
.nf{padding:120px 0 140px}
.nf h1{max-width:18ch;margin-bottom:18px;font-size:clamp(34px,4.5vw,56px);letter-spacing:-.024em}
.nf .lead{max-width:52ch;margin-bottom:32px;color:var(--steel);font-size:19px}
.nf .lead a{color:var(--red-t);font-weight:600}
.nf-lang{display:grid;gap:8px;margin-top:52px;padding-top:24px;border-top:1px solid var(--rule)}
.nf-lang p{margin:0}
.nf-lang a{color:var(--red-t);font-weight:600;border-bottom:1.5px solid var(--red)}
@media(max-width:760px){.nf{padding:72px 0 90px}}

/* enquiry form feedback */
.form-summary{display:none;margin:0;padding:12px 14px;border:1px solid #b3261e;border-radius:var(--r);background:#fdecea;color:#8c1d18;font-size:15px;font-weight:600}
.ok{display:none;margin:0;padding:18px 20px;border-radius:var(--r);background:#e9f5ec;color:#14532d;outline:0;scroll-margin-top:110px}
.ok h3{margin:0 0 6px;color:#14532d;font-size:19px}
.ok p{margin:0 0 8px;color:#14532d;font-size:15.5px}
.ok .ok-sub{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:0 0 6px;font-size:14.5px}
.ok a{color:#14532d;font-weight:600;text-decoration:underline;text-underline-offset:.2em}
.ok-copy{padding:8px 14px;border:1.5px solid #14532d;border-radius:var(--r);background:transparent;color:#14532d;font:600 14px/1.2 var(--body);cursor:pointer;transition:background-color .18s var(--ease-out),color .18s var(--ease-out),transform .16s var(--ease-out)}
.ok-copy:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.ok-copy:hover{background:#14532d;color:#fff}}

/* print: a clean company sheet, no menus, buttons or slideshow */
@page{margin:16mm}
@media print{
  *,*::before,*::after{box-shadow:none!important;text-shadow:none!important}
  html,body{background:#fff!important;color:#000!important;font-size:11pt;line-height:1.5;padding:0!important}
  .topbar,.callbar,#top-btn,.skip,.band,.filters,.s-ctrl,.s-arrow,.cap,.lb,.gal-more,.search,.dir-links,.map,.actions,form,.faq-more,nav,.toggle,.assure .more,.quick{display:none!important}
  header{display:block!important;position:static!important;background:#fff!important;border:0!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  .nav{height:auto;padding:0 0 10pt}
  .logo img{height:36pt}
  .sr,.sr[data-sr]{opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important}
  .hero{display:block;min-height:0!important;background:#fff!important;color:#000!important}
  .hero::before,.slides{display:none!important}
  .hero>.wrap{padding:0 28px 12pt}
  .hero-copy h1,.hero-copy .lead{color:#000!important}
  .page-hero{background:#fff!important;background-image:none!important;color:#000!important;border-bottom:2pt solid #000}
  .page-hero::before{display:none}
  .page-hero .wrap{padding-top:0;padding-bottom:12pt}
  .page-hero h1,.page-hero p,.crumbs,.crumbs a{color:#000!important}
  section,section.alt,section.dark{background:#fff!important;color:#000!important;padding:16pt 0!important}
  .dark .head h2,.dark .head p,.dark h3,.dark p,.dark li,.dark b,.dark .stage,.flow span{color:#000!important}
  .dark .card,.flow{background:#fff!important;border-color:#999!important}
  section>.wrap{display:block!important}
  .head{position:static!important;max-width:none!important;margin-bottom:10pt!important}
  h1,h2,h3{break-after:avoid}
  figure,.card,.logo-tile,.faq details,.steps3 li,.info-item{break-inside:avoid}
  .gallery-block.collapsed .gallery figure.over{display:flex!important}
  .gallery,.logo-wall{gap:6pt}
  a{color:#000!important;text-decoration:none!important}
  main a[href^="http"]::after{content:" (" attr(href) ")";font-size:.82em;word-break:break-all}
  footer{background:#fff!important;color:#000!important;border-top:2pt solid #000!important;font-size:10pt}
  footer h3,footer h4{color:#000!important;border-bottom:1px solid #000!important}
  footer a,footer li{color:#000!important}
  .logo-box{background:#fff!important;padding:0}
  .iso-chip{border-color:#000!important;color:#000!important}
}
@media print{
  .split,.env,.contact{display:block!important}
  .split img.photo{max-width:60%;margin:8pt 0}
  .split.top>div>.head+p{font-size:12pt}
}

/* ---- Sales pass: process on the home page, fuller quote form, quote button on the phone bar ---- */
.flow small{display:block;margin-top:6px;font-size:14px;font-weight:400;line-height:1.45;color:#aab2b9}
.dark .flow+.btn{margin-top:0}
.check{display:flex;align-items:flex-start;gap:12px;font-weight:500;cursor:pointer}
.check input{flex:none;width:20px;height:20px;margin:2px 0 0;padding:0}
.checklist-act{margin:24px 0 0}
.ok-attach{display:flex;gap:10px;align-items:baseline;font-weight:600;color:var(--ink)}
.ok-attach::before{content:"";flex:none;width:8px;height:8px;background:var(--red)}
.callbar .cb-call{background:var(--ink)}
.callbar .cb-dir{background:var(--red)}
@media print{.checklist-act{display:none}}

/* ---- Reference pass: full-height quote block in the menu, image tiles under the hero, process directory ---- */
@media(min-width:981px){
  nav ul{align-items:stretch;gap:0;height:var(--nav)}
  nav li{display:flex;align-items:center}
  nav li:last-child{margin-left:14px}
  nav a.cta{display:flex;align-items:center;height:100%;margin:0;padding:0 28px;border-radius:0;letter-spacing:.01em}
}
@media(max-width:980px){nav a.cta{display:block;border-radius:var(--r)}}

.dir{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:1px solid var(--rule)}
.dir-col{padding:26px 24px 28px 0;border-bottom:1px solid var(--rule)}
.dir-col+.dir-col{padding-left:24px;border-left:1px solid var(--rule)}
.dir-col h3{font-size:21px;margin-bottom:14px}
.dir-col h3 a{color:var(--ink)}
.dir-col li{position:relative;padding-left:20px;margin-bottom:9px;font-weight:500;color:var(--steel);overflow-wrap:anywhere}
.dir-col li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;background:var(--red)}
@media (hover:hover) and (pointer:fine){.dir-col h3 a:hover{color:var(--red-t)}}
@media(max-width:980px){
  .dir{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dir-col:nth-child(odd){padding-left:0;border-left:0}
  .dir-col:nth-child(even){padding-left:24px;border-left:1px solid var(--rule)}
}
@media(max-width:600px){
  .dir{grid-template-columns:minmax(0,1fr)}
  .dir-col,.dir-col+.dir-col,.dir-col:nth-child(even){padding:22px 0;border-left:0}
}
@media print{.dir{display:block}.dir-col{break-inside:avoid;border:0;padding:0 0 12px}}
/* the directory sits in the narrower right-hand column, so it is a 2 x 2 grid */
.dir{grid-template-columns:repeat(2,minmax(0,1fr))}
.dir-col,.dir-col+.dir-col{padding:26px 24px 28px 0;border-left:0}
.dir-col:nth-child(even){padding-left:28px;border-left:1px solid var(--rule)}
@media(max-width:600px){
  .dir{grid-template-columns:minmax(0,1fr)}
  .dir-col,.dir-col+.dir-col,.dir-col:nth-child(even){padding:22px 0;border-left:0}
}
@media(min-width:981px) and (max-width:1120px){
  nav a{padding:10px 9px;font-size:14.5px}
  nav a:not(.cta)::after{left:9px;right:9px}
  nav li:last-child{margin-left:6px}
  nav a.cta{padding:0 16px}
}
@media(min-width:981px){nav a{white-space:nowrap}}
@media(min-width:981px) and (max-width:1039px){
  nav a{padding:10px 6px;font-size:14px}
  nav a:not(.cta)::after{left:6px;right:6px}
  nav li:last-child{margin-left:4px}
  nav a.cta{padding:0 12px}
  .logo img{height:48px;width:auto}
}

/* ---- Home: service image tiles ---- */
.sec-intro .head{max-width:640px;margin-bottom:34px}
.svc-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.tile{position:relative;display:block;overflow:hidden;aspect-ratio:3/4;background:var(--ink);color:#fff;border-radius:var(--r)}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease-out)}
.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(23,25,28,.04) 34%,rgba(23,25,28,.93) 100%)}
.tile span{position:absolute;left:22px;right:22px;bottom:22px;z-index:1;display:block}
.tile b{display:block;font-family:var(--display);font-stretch:110%;font-size:24px;line-height:1.12;font-weight:700;text-wrap:balance}
.tile small{display:block;margin-top:10px;padding-top:10px;border-top:2px solid var(--red);font-size:14.5px;line-height:1.4;color:rgba(255,255,255,.92)}
.tile:focus-visible{outline:3px solid var(--red);outline-offset:3px}
.tile:active{transform:scale(.98)}
@media (hover:hover) and (pointer:fine){.tile:hover img{transform:scale(1.05)}}
@media(max-width:980px){.svc-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}.tile{aspect-ratio:4/5}}
@media(max-width:600px){
  .svc-tiles{gap:10px}
  .tile span{left:14px;right:14px;bottom:14px}
  .tile b{font-size:18px}
  .tile small{font-size:13px;margin-top:8px;padding-top:8px}
}
.dark .flow:last-child{margin-bottom:0}
@media print{.svc-tiles{display:grid}}
.actions .more{align-self:center}
/* the red quote block runs through the header's bottom border, so no white line shows under it */
@media(min-width:981px){nav a.cta{align-self:flex-start;height:calc(var(--nav) + 1px);margin-bottom:-1px}}

/* ---- Motion ----
   Focal moment: on the process diagram a red line sweeps across once and each stage lights up as it passes.
   Feedback: the form confirmation and errors arrive instead of just appearing. */
.flow{position:relative}
.flow::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:3px;background:var(--red);transform-origin:left;z-index:3}
.flow li:nth-child(1){--i:0}.flow li:nth-child(2){--i:1}.flow li:nth-child(3){--i:2}.flow li:nth-child(4){--i:3}
.flow li b,.flow li span{transition:color .5s var(--ease-out),opacity .5s var(--ease-out)}
/* waiting state applies instantly; only the play-through animates */
.flow.armed:not(.run)::before{transform:scaleX(0);transition:none}
.flow.armed:not(.run) li b{color:#7b8590;transition:none}
.flow.armed:not(.run) li span{opacity:.8;transition:none}
.flow.armed.run::before{transition:transform 1.3s cubic-bezier(.4,0,.2,1)}
.flow.armed.run li b,.flow.armed.run li span{transition-delay:calc(var(--i,0)*.3s + .05s)}
@keyframes fbIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes fbFade{from{opacity:0}to{opacity:1}}
.ok,.form-summary{animation:fbIn .35s var(--ease-out)}
.err{animation:fbFade .2s var(--ease-out)}
/*RM-START*/
@media(prefers-reduced-motion:reduce){
  .flow.armed.run::before{transition:opacity .4s ease}
  .flow.armed:not(.run)::before{transform:none;opacity:0}
  .flow.armed.run li b,.flow.armed.run li span{transition-delay:0s}
  .ok,.form-summary{animation:fbFade .2s linear}
}
/*RM-END*/
@media print{.flow::before{display:none}.flow li span{opacity:1!important}.flow li b{color:#000!important}}

/* ---- Usability pass: error summary links, target sizes, focus clearance ---- */
.form-summary .fs-title{margin:0;font-weight:700}
.form-summary ul{margin:8px 0 0;padding:0;list-style:none}
.form-summary li{margin:0}
.form-summary a{display:inline-block;padding:3px 0;color:#8c1d18;font-weight:600;text-decoration:underline;text-underline-offset:.2em}
.form-summary:focus-visible{outline:3px solid var(--red);outline-offset:2px}
.check input{width:24px;height:24px;margin-top:0}
.dir-col h3 a{display:inline-block;min-height:24px;padding-block:1px}
@media(pointer:coarse){.s-pause{width:44px;height:44px}}
@media(max-width:760px){html{scroll-padding-bottom:84px}}

/* ---- Redesign: slate + red, Lexend / Source Sans 3, sharp corners; hero copy on a solid panel ---- */
h1,h2,h3,h4{letter-spacing:-.012em}
.hero::before{background:linear-gradient(0deg,rgba(23,25,28,.5),rgba(23,25,28,0) 42%),linear-gradient(90deg,rgba(23,25,28,.28),rgba(23,25,28,0) 60%)}
.hero>.wrap{padding-top:64px;padding-bottom:0}
.hero-copy{max-width:640px;padding:40px 44px 44px;background:rgba(23,25,28,.92);border-top:4px solid var(--red)}
.hero-copy h1{font-size:clamp(30px,3.7vw,48px);font-weight:700;font-stretch:100%;line-height:1.12;letter-spacing:-.018em;margin-bottom:18px;text-wrap:balance;overflow-wrap:break-word}
.hero-copy .lead{font-size:19px;line-height:1.55;margin-bottom:28px}
.hero-copy .actions .btn{min-height:48px}
@media(max-width:760px){
  .hero>.wrap{padding-top:40px}
  .hero-copy{padding:28px 22px 30px}
  .hero-copy h1{font-size:clamp(27px,8vw,34px)}
  .hero-copy .lead{font-size:17px}
}
.btn.ghost{border-color:rgba(255,255,255,.7)}

/* ---- Taste pass: calmer display weights, Carbon-style fields ---- */
h1,h2{font-weight:500}
h3{font-weight:600}
.hero-copy h1,.page-hero h1{font-weight:500;font-stretch:100%}
.tile b{font-weight:600}
body{letter-spacing:.008em}
input:not([type=checkbox]),textarea,select{background:var(--mist);border:0;border-bottom:1px solid var(--steel);padding:13px 14px}
input:not([type=checkbox]):focus,textarea:focus,select:focus{outline:2px solid var(--red);outline-offset:-2px;border-bottom-color:var(--ink)}
input.bad,textarea.bad,select.bad{border-bottom:2px solid #b3261e;background:#fdecea}
::placeholder{color:#5d656d;opacity:1}
/* hero headline: at most three lines on desktop in every language */
.hero-copy{max-width:700px}
.hero-copy h1{font-size:clamp(28px,3.4vw,44px)}
@media(max-width:760px){.hero-copy h1{font-size:clamp(25px,7.2vw,32px)}}
/* menu spacing tiers: six links plus the quote block must never touch the logo, even with longer Malay labels */
@media(min-width:1030px) and (max-width:1099px){
  nav a{padding:10px 6px;font-size:14px}
  nav a:not(.cta)::after{left:6px;right:6px}
  nav li:last-child{margin-left:4px}
  nav a.cta{padding:0 12px}
  .logo img{height:48px;width:auto}
}
@media(min-width:1236px){
  nav a{padding:10px 12px}
  nav a:not(.cta)::after{left:12px;right:12px}
}
@media(min-width:1100px) and (max-width:1235px){
  nav a{padding:10px 10px;font-size:15px}
  nav a:not(.cta)::after{left:10px;right:10px}
  nav li:last-child{margin-left:8px}
}
/* Facility page: the four quality instruments sit in one row */
@media(min-width:981px){#quality .gallery{grid-template-columns:repeat(4,minmax(0,1fr))}}
#machines .gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
/* the header's bottom line is drawn inside the header, so the menu block can be exactly as tall as the header */
header{border-bottom:0;box-shadow:inset 0 -1px 0 var(--rule)}
header.scrolled{box-shadow:inset 0 -1px 0 var(--rule),0 6px 20px rgba(23,25,28,.08)}
@media(prefers-contrast:more){header{box-shadow:inset 0 -1px 0 var(--ink)}}
@media(min-width:981px){nav a.cta{align-self:stretch;height:100%;margin-bottom:0}}

/* ---- FAQ: longer answers with paragraphs and links ---- */
.faq .ans p+p{margin-top:12px}
.faq .ans a{color:var(--ink);font-weight:600;text-decoration:underline;text-decoration-color:var(--red);text-decoration-thickness:2px;text-underline-offset:3px}
.faq .ans a:hover{color:var(--red-t)}
.faq .ans{max-width:72ch}

/* ---- Gallery: pointer to the Facility page ---- */
.gal-note{margin:44px 0 0;padding-top:22px;border-top:1px solid var(--rule);color:var(--mute);display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline}

/* ---- Privacy notice: a readable column ---- */
.legal .wrap{max-width:820px}
.legal h2{font-size:22px;margin:38px 0 12px}
.legal p,.legal li{max-width:68ch}
.legal ul{margin:10px 0 14px;padding-left:22px;list-style:disc}
.legal li{margin:6px 0}
.legal .stamp{color:var(--mute);font-size:15px;margin:0 0 14px}
.copy a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.copy a:hover{color:#fff}

/* ---- Services dropdown ---- */
nav ul.sub{list-style:none;margin:0;padding:0}
nav ul.sub a::after{display:none!important}
@media(min-width:981px){
  nav li.has-sub{position:relative}
  nav ul.sub{display:none;position:absolute;top:100%;left:0;min-width:270px;height:auto;flex-direction:column;align-items:stretch;gap:0;padding:8px 0 10px;background:#fff;box-shadow:inset 0 3px 0 var(--red),0 20px 34px rgba(23,25,28,.16);z-index:60}
  nav ul.sub li{display:block;margin-left:0}
  nav ul.sub a{padding:11px 24px;font-size:15px;font-weight:500;white-space:nowrap;color:var(--ink)}
  nav ul.sub a.active{color:var(--red-t);font-weight:600}
  nav ul.sub .sep{border-top:1px solid var(--rule);margin-top:6px;padding-top:6px}
  nav li.has-sub:focus-within>ul.sub{display:flex}
}
@media(min-width:981px) and (hover:hover) and (pointer:fine){
  nav li.has-sub:hover>ul.sub{display:flex}
  nav ul.sub a:hover{background:var(--mist);color:var(--red-t)}
}
@media(max-width:980px){
  nav ul.sub{display:block!important;position:static;box-shadow:none;border:0;background:none;padding:0 0 6px 16px;max-height:none;overflow:visible}
  nav ul.sub a{padding:10px 4px;font-size:15px;font-weight:400;color:var(--steel)}
  nav ul.sub a.active{color:var(--red-t);font-weight:600}
  nav ul.sub .sep{border-top:1px solid var(--rule);margin-top:6px;padding-top:6px}
}

/* ---- "Keep reading" links ---- */
.rel{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));border-top:1px solid var(--rule)}
.rel li{border-bottom:1px solid var(--rule)}
.rel a{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:18px 6px;color:var(--ink)}
.rel a b{font-family:var(--display);font-weight:600;font-size:17px;line-height:1.35}
.rel a::after{content:"";flex:none;width:9px;height:9px;border-top:2px solid var(--red);border-right:2px solid var(--red);transform:rotate(45deg)}
@media(hover:hover) and (pointer:fine){.rel a:hover b{color:var(--red-t)}}

/* ---- Photo grid, two columns ---- */
@media(min-width:981px){.gallery.gal-2{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---- Guides: a readable column, a comparison table, a numbered list ---- */
.prose .wrap{max-width:820px}
.prose h2{font-size:24px;margin:40px 0 12px}
.prose h2:first-child{margin-top:0}
.prose p{margin:0 0 14px;max-width:68ch}
.prose ul,.prose ol.num{margin:10px 0 20px;padding-left:22px}
.prose ul{list-style:disc}
.prose ol.num{list-style:decimal}
.prose li{margin:9px 0;max-width:68ch}
.prose li::marker{color:var(--red-t);font-weight:700}
.prose a:not(.btn){font-weight:600;border-bottom:2px solid var(--red)}
@media(hover:hover) and (pointer:fine){.prose a:not(.btn):hover{color:var(--red-t)}}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cmp-wrap{margin:28px 0 36px}
.cmp{width:100%;border-collapse:collapse;font-size:16px}
.cmp th,.cmp td{padding:14px 18px;text-align:left;vertical-align:top;border-bottom:1px solid var(--rule)}
.cmp thead th{background:var(--ink);color:#fff;font-family:var(--display);font-weight:600}
.cmp tbody th{width:22%;font-weight:600;color:var(--ink);background:var(--mist)}
.cmp td{width:39%;color:var(--steel)}
@media(max-width:700px){
  .cmp thead{display:none}
  .cmp,.cmp tbody,.cmp tr,.cmp th,.cmp td{display:block;width:100%}
  .cmp tr{border:1px solid var(--rule);margin-bottom:14px}
  .cmp th,.cmp td{border-bottom:1px solid var(--rule)}
  .cmp tr>:last-child{border-bottom:0}
  .cmp td::before{content:attr(data-label);display:block;margin-bottom:3px;font-size:14px;font-weight:600;color:var(--ink)}
}
@media print{.cmp thead{display:table-header-group}}

/* ---- Open now / closed now badge ---- */
.open-now{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;line-height:1.3;color:inherit}
.open-now[hidden]{display:none}
.open-now::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:#6b747c}
.open-now.is-open::before{background:#168a45}
.topbar .open-now,footer .foot-hours .open-now{color:#fff}
.topbar .open-now::before,footer .open-now::before{background:#8a949c}
.topbar .open-now.is-open::before,footer .open-now.is-open::before{background:#3ecf7d}
@media(min-width:761px){.topr .hide-s{display:inline-flex;align-items:center;gap:18px}}
footer .foot-hours .open-now{display:flex;margin:3px 0 6px}
.info-item .open-now{display:flex;margin:0 0 8px;font-size:15px;color:var(--ink)}
.hours-note{margin-top:10px;font-size:14px;color:var(--mute);max-width:380px}

/* ---- Map that loads on request ---- */

/* ---- Process flow: steps link to their pages ---- */
.flow li span a{color:inherit;border-bottom:1px solid currentColor}
@media(hover:hover) and (pointer:fine){.flow li span a:hover{color:#fff;border-color:var(--red)}}

/* ---- Quality equipment: what each instrument checks ---- */
.cap-sub{display:block;margin-top:4px;font-size:13.5px;font-weight:400;line-height:1.4;color:var(--mute)}
@media(max-width:560px){.cap-sub{font-size:13px}}

/* ---- CTA bar: a call button next to the quote button ---- */
.band-act{display:flex;flex-wrap:wrap;gap:12px}
.band .btn.call{background:transparent;border-color:#fff;color:#fff!important}
.band .btn.call:hover{background:#fff;color:var(--red-t)!important}
@media(max-width:760px){.band .btn.call{display:none}}

/* ---- Services dropdown: Escape closes it ---- */
@media(min-width:981px){nav li.has-sub.closed>ul.sub{display:none!important}}

/* ---- Services link: a small arrow shows there is a dropdown ---- */
@media(min-width:981px){
  nav li.has-sub>a{display:flex;align-items:center;gap:6px}
  nav li.has-sub>a::before{content:"";order:2;flex:none;width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .2s var(--ease-out)}
  nav li.has-sub:not(.closed):focus-within>a::before{transform:translateY(1px) rotate(-135deg)}
}
@media(min-width:981px) and (hover:hover) and (pointer:fine){
  nav li.has-sub:not(.closed):hover>a::before{transform:translateY(1px) rotate(-135deg)}
}
@media(prefers-reduced-motion:reduce){nav li.has-sub>a::before{transition:none}}
@media(min-width:1040px){nav li.has-sub>a{padding-right:7px}nav li.has-sub>a::after{right:7px}}

/* ---- Theme switch ---- */
:root[data-theme="light"]{color-scheme:light}
.logo .logo-d{display:none}
.theme-toggle{display:grid;place-items:center;width:30px;height:26px;padding:0;border:1px solid rgba(255,255,255,.28);border-radius:2px;background:transparent;color:#b9c0c6;cursor:pointer}
.theme-toggle[hidden]{display:none}
.theme-toggle svg{display:block;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.theme-toggle .i-sun{display:none}
.theme-toggle:focus-visible{outline:3px solid #fff;outline-offset:2px}
@media(hover:hover) and (pointer:fine){.theme-toggle:hover{color:#fff;border-color:#fff}}
@media print{.theme-toggle{display:none!important}}

/*DARK-START*/
/* ---- Dark theme: follows the device setting, or the manual switch (see Edit Website\dark-theme.src.css) ---- */
@media screen and (prefers-color-scheme:dark){
:root:not([data-theme="light"]){color-scheme:dark;--bg:#111315;--surface:#1b1f23;--mist:#171a1d;--rule:#2c3237;--ink:#eef1f3;--steel:#c6cdd3;--mute:#9aa3ab;--red-t:#ff6b70;--ink2:#16191c;--dk:#0a0b0c;--red-l:#3a1d1f;scrollbar-color:#4a525a #171a1d}
:root:not([data-theme="light"]) body{background:var(--bg)}

/* header, menus, top bar */
:root:not([data-theme="light"]) header{background:rgba(17,19,21,.95)}
:root:not([data-theme="light"]) .topbar{background:var(--dk)}
:root:not([data-theme="light"]) .langs a[aria-current],:root:not([data-theme="light"]) .langs a[aria-current]:hover{color:#17191c}
:root:not([data-theme="light"]) .skip{background:#c8161d;color:#fff}
:root:not([data-theme="light"]) .logo .logo-l{display:none}
:root:not([data-theme="light"]) .logo .logo-d{display:block}
@media(min-width:981px){:root:not([data-theme="light"]) nav ul.sub{background:var(--surface);box-shadow:inset 0 3px 0 #c8161d,0 20px 34px rgba(0,0,0,.5)}}
@media(max-width:980px){:root:not([data-theme="light"]) nav ul{background:var(--surface)}}
:root:not([data-theme="light"]) .callbar{background:rgba(17,19,21,.94)}
:root:not([data-theme="light"]) .callbar .cb-call{background:#2b3238}

/* dark sections, hero and footer sit deeper than the page */
:root:not([data-theme="light"]) section.dark,:root:not([data-theme="light"]) footer,:root:not([data-theme="light"]) .hero,:root:not([data-theme="light"]) .tile{background:var(--dk)}
:root:not([data-theme="light"]) .page-hero{background-color:var(--dk)}
:root:not([data-theme="light"]) .page-hero::before{background:linear-gradient(90deg,#0a0b0c 30%,rgba(10,11,12,.74) 62%,rgba(10,11,12,.3))}
:root:not([data-theme="light"]) .callout{background:var(--ink2)}
:root:not([data-theme="light"]) .cmp thead th{background:var(--dk)}

/* surfaces that are white in the light theme */
:root:not([data-theme="light"]) .filters{background:var(--bg)}
:root:not([data-theme="light"]) .filters button,:root:not([data-theme="light"]) .gallery figure,:root:not([data-theme="light"]) .gallery figcaption,:root:not([data-theme="light"]) .search,:root:not([data-theme="light"]) .alt .env-box,:root:not([data-theme="light"]) .chips li,:root:not([data-theme="light"]) .qa-grid,:root:not([data-theme="light"]) form,:root:not([data-theme="light"]) .steps3 li,:root:not([data-theme="light"]) .checklist,:root:not([data-theme="light"]) .trophy{background:var(--surface)}
:root:not([data-theme="light"]) .assure{background:var(--bg)}
:root:not([data-theme="light"]) .search{border-color:#4a525a}
:root:not([data-theme="light"]) ::placeholder{color:#8b949c}
:root:not([data-theme="light"]) iframe.map{filter:invert(.92) hue-rotate(180deg) contrast(.9)}

/* buttons whose fill is the page ink in the light theme */
:root:not([data-theme="light"]) .filters button.on{background:#eef1f3;border-color:#eef1f3;color:#111315}
:root:not([data-theme="light"]) .band .btn{color:#c8161d!important}
:root:not([data-theme="light"]) .band .btn.call{color:#fff!important}
:root:not([data-theme="light"]) .band .btn.call:hover{background:#fff;color:#c8161d!important}
@media(hover:hover) and (pointer:fine){
  :root:not([data-theme="light"]) .btn.outline:hover,:root:not([data-theme="light"]) .gal-more:hover{background:#eef1f3;color:#111315!important;border-color:#eef1f3}
  :root:not([data-theme="light"]) .band .btn:hover{background:#111315;border-color:#111315;color:#fff!important}
  :root:not([data-theme="light"]) .btn.ghost:hover{color:#c8161d!important}
  :root:not([data-theme="light"]) .ok-copy:hover{background:#b7ecc7;color:#0f2a19}
}

/* form feedback */
:root:not([data-theme="light"]) .err{color:#ff8a82}
:root:not([data-theme="light"]) input.bad,:root:not([data-theme="light"]) textarea.bad,:root:not([data-theme="light"]) select.bad{background:#3a1614;border-bottom-color:#ff8a82}
:root:not([data-theme="light"]) .form-summary{background:#3a1614;border-color:#ff8a82;color:#ffd0cc}
:root:not([data-theme="light"]) .form-summary a{color:#ffd0cc}
:root:not([data-theme="light"]) .ok{background:#12301d;color:#b7ecc7}
:root:not([data-theme="light"]) .ok h3,:root:not([data-theme="light"]) .ok p,:root:not([data-theme="light"]) .ok a{color:#b7ecc7}
:root:not([data-theme="light"]) .ok-copy{border-color:#7fd69a;color:#b7ecc7}

/* the theme switch shows the sun when the page is dark */
:root:not([data-theme="light"]) .theme-toggle .i-sun{display:block}
:root:not([data-theme="light"]) .theme-toggle .i-moon{display:none}
}
@media screen{
:root[data-theme="dark"]{color-scheme:dark;--bg:#111315;--surface:#1b1f23;--mist:#171a1d;--rule:#2c3237;--ink:#eef1f3;--steel:#c6cdd3;--mute:#9aa3ab;--red-t:#ff6b70;--ink2:#16191c;--dk:#0a0b0c;--red-l:#3a1d1f;scrollbar-color:#4a525a #171a1d}
:root[data-theme="dark"] body{background:var(--bg)}

/* header, menus, top bar */
:root[data-theme="dark"] header{background:rgba(17,19,21,.95)}
:root[data-theme="dark"] .topbar{background:var(--dk)}
:root[data-theme="dark"] .langs a[aria-current],:root[data-theme="dark"] .langs a[aria-current]:hover{color:#17191c}
:root[data-theme="dark"] .skip{background:#c8161d;color:#fff}
:root[data-theme="dark"] .logo .logo-l{display:none}
:root[data-theme="dark"] .logo .logo-d{display:block}
@media(min-width:981px){:root[data-theme="dark"] nav ul.sub{background:var(--surface);box-shadow:inset 0 3px 0 #c8161d,0 20px 34px rgba(0,0,0,.5)}}
@media(max-width:980px){:root[data-theme="dark"] nav ul{background:var(--surface)}}
:root[data-theme="dark"] .callbar{background:rgba(17,19,21,.94)}
:root[data-theme="dark"] .callbar .cb-call{background:#2b3238}

/* dark sections, hero and footer sit deeper than the page */
:root[data-theme="dark"] section.dark,:root[data-theme="dark"] footer,:root[data-theme="dark"] .hero,:root[data-theme="dark"] .tile{background:var(--dk)}
:root[data-theme="dark"] .page-hero{background-color:var(--dk)}
:root[data-theme="dark"] .page-hero::before{background:linear-gradient(90deg,#0a0b0c 30%,rgba(10,11,12,.74) 62%,rgba(10,11,12,.3))}
:root[data-theme="dark"] .callout{background:var(--ink2)}
:root[data-theme="dark"] .cmp thead th{background:var(--dk)}

/* surfaces that are white in the light theme */
:root[data-theme="dark"] .filters{background:var(--bg)}
:root[data-theme="dark"] .filters button,:root[data-theme="dark"] .gallery figure,:root[data-theme="dark"] .gallery figcaption,:root[data-theme="dark"] .search,:root[data-theme="dark"] .alt .env-box,:root[data-theme="dark"] .chips li,:root[data-theme="dark"] .qa-grid,:root[data-theme="dark"] form,:root[data-theme="dark"] .steps3 li,:root[data-theme="dark"] .checklist,:root[data-theme="dark"] .trophy{background:var(--surface)}
:root[data-theme="dark"] .assure{background:var(--bg)}
:root[data-theme="dark"] .search{border-color:#4a525a}
:root[data-theme="dark"] ::placeholder{color:#8b949c}
:root[data-theme="dark"] iframe.map{filter:invert(.92) hue-rotate(180deg) contrast(.9)}

/* buttons whose fill is the page ink in the light theme */
:root[data-theme="dark"] .filters button.on{background:#eef1f3;border-color:#eef1f3;color:#111315}
:root[data-theme="dark"] .band .btn{color:#c8161d!important}
:root[data-theme="dark"] .band .btn.call{color:#fff!important}
:root[data-theme="dark"] .band .btn.call:hover{background:#fff;color:#c8161d!important}
@media(hover:hover) and (pointer:fine){
  :root[data-theme="dark"] .btn.outline:hover,:root[data-theme="dark"] .gal-more:hover{background:#eef1f3;color:#111315!important;border-color:#eef1f3}
  :root[data-theme="dark"] .band .btn:hover{background:#111315;border-color:#111315;color:#fff!important}
  :root[data-theme="dark"] .btn.ghost:hover{color:#c8161d!important}
  :root[data-theme="dark"] .ok-copy:hover{background:#b7ecc7;color:#0f2a19}
}

/* form feedback */
:root[data-theme="dark"] .err{color:#ff8a82}
:root[data-theme="dark"] input.bad,:root[data-theme="dark"] textarea.bad,:root[data-theme="dark"] select.bad{background:#3a1614;border-bottom-color:#ff8a82}
:root[data-theme="dark"] .form-summary{background:#3a1614;border-color:#ff8a82;color:#ffd0cc}
:root[data-theme="dark"] .form-summary a{color:#ffd0cc}
:root[data-theme="dark"] .ok{background:#12301d;color:#b7ecc7}
:root[data-theme="dark"] .ok h3,:root[data-theme="dark"] .ok p,:root[data-theme="dark"] .ok a{color:#b7ecc7}
:root[data-theme="dark"] .ok-copy{border-color:#7fd69a;color:#b7ecc7}

/* the theme switch shows the sun when the page is dark */
:root[data-theme="dark"] .theme-toggle .i-sun{display:block}
:root[data-theme="dark"] .theme-toggle .i-moon{display:none}
}
/*DARK-END*/

/* ---- Photos that open in the viewer ---- */
[data-zoom]{cursor:zoom-in}
[data-zoom]:focus-visible{outline:3px solid var(--red);outline-offset:3px}
.cert-chip[data-zoom]{transition:border-color .18s var(--ease-out)}
@media(hover:hover) and (pointer:fine){.cert-chip[data-zoom]:hover{border-color:var(--ink)}}

/* ---- Service path, previous / next, "Viewed" marks ---- */
.path-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:3px solid var(--ink)}
.path-list li{min-width:0;border-bottom:1px solid var(--rule)}
.path-list li+li{border-left:1px solid var(--rule)}
.path-in{display:flex;flex-direction:column;gap:6px;height:100%;padding:20px 18px 24px;color:var(--ink)}
.path-in b{font-family:var(--display);font-weight:600;font-size:18px;line-height:1.3;color:var(--ink)}
.path-in small{display:block;font-size:14.5px;line-height:1.45;color:var(--mute)}
.is-current{background:var(--mist)}
.tag{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;margin-top:8px;padding:3px 9px;font-size:12.5px;font-weight:600;line-height:1.3;letter-spacing:.02em;border:1px solid var(--ink);color:var(--ink)}
.tag-next{background:var(--red);border-color:var(--red);color:#fff}
.tag-seen{border-color:var(--mute);color:var(--mute)}
.tag-seen::before{content:"";flex:none;width:9px;height:5px;margin-top:-2px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg)}
a.is-seen b{color:var(--mute)}
@media(hover:hover) and (pointer:fine){a.path-in:hover b,.pn a:hover b{color:var(--red-t)}}
a.path-in:focus-visible,.pn a:focus-visible{outline:3px solid var(--red);outline-offset:-3px}
.pn{display:grid;grid-template-columns:1fr 1fr;gap:0 24px;margin-top:44px;border-top:1px solid var(--rule)}
.pn a{display:grid;gap:4px;align-content:start;padding:22px 0}
.pn .next{text-align:right;justify-items:end}
.pn small{font-size:14px;font-weight:600;color:var(--red-t)}
.pn b{font-family:var(--display);font-weight:600;font-size:20px;line-height:1.3;color:var(--ink)}
.pn .tag{margin-top:6px}
.pn-sec{padding:0 0 40px}
.pn-sec .pn{margin-top:0}
.rel a .tag-seen{margin:0 0 0 auto}
.rel a.is-seen b{color:var(--mute)}
@media(max-width:980px){
  .path-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .path-list li:nth-child(odd){border-left:0}
  .path-list li:nth-child(n+3){border-top:0}
}
@media(max-width:560px){
  .path-list{grid-template-columns:minmax(0,1fr)}
  .path-list li+li{border-left:0}
  .pn{grid-template-columns:minmax(0,1fr)}
  .pn .next{text-align:left;justify-items:start;border-top:1px solid var(--rule)}
}
@media print{.path-list,.pn,.pn-sec{display:none!important}}
.pn .prev .tag{justify-self:start}
.pn .next .tag{justify-self:end}

/* ---- Home: "Why customers choose" ---- */
.why-sec{padding-bottom:72px}
.why-top{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:0 48px;align-items:center}
.why-head h2{font-size:clamp(32px,4.2vw,50px);line-height:1.12;margin:0;max-width:12em}
.why-acc{display:block;color:var(--red-t)}
.why-rule{display:block;width:64px;height:4px;margin-top:26px;background:var(--red)}
.why-photo img.photo{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;clip-path:polygon(0 0,100% 0,100% 100%,0 86%)}
.why5{list-style:none;margin:44px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(176px,1fr));gap:36px 28px}
.why5 li{display:grid;gap:8px;align-content:start;padding-top:24px;border-top:1px solid var(--rule)}
.why-ico{width:44px;height:44px;margin-bottom:6px;fill:none;stroke:var(--red-t);stroke-width:1.7;stroke-linejoin:miter;stroke-linecap:butt}
.why5 b{font-family:var(--display);font-weight:600;font-size:19px;line-height:1.3;color:var(--ink)}
.why5 span{font-size:16px;line-height:1.55;color:var(--steel)}
.why-act{margin-top:40px}
@media(max-width:860px){
  .why-top{grid-template-columns:minmax(0,1fr);gap:28px}
  .why-head h2{max-width:none}
  .why-photo img.photo{clip-path:polygon(0 0,100% 0,100% 100%,0 92%)}
}
@media(max-width:560px){
  .why5{grid-template-columns:minmax(0,1fr);gap:28px}
  .why5 li{grid-template-columns:44px minmax(0,1fr);column-gap:16px;padding-top:20px}
  .why-ico{grid-row:1 / span 2;margin:0}
}
@media print{.why-photo img.photo{clip-path:none}}

/* ---- Gallery: parts can be narrowed by type ---- */
/* stays in view under the main filter bar while scrolling (--filters-h is set by the script) */
.subfilters{display:flex;flex-wrap:wrap;gap:8px;position:sticky;top:calc(var(--nav) + var(--filters-h,68px) - 2px);z-index:19;background:var(--bg);padding:12px 0;margin:0 0 26px;border-bottom:1px solid var(--rule)}
.subfilters[hidden]{display:none}
.subfilters button{font:600 14px/1 var(--body);padding:10px 16px;border:1px solid var(--rule);background:transparent;color:var(--steel);border-radius:var(--r);cursor:pointer;transition:border-color .15s,color .15s,background .15s}
.subfilters button .n{margin-left:8px;font-size:13px;font-weight:500;opacity:.7}
.subfilters button.on{border-color:var(--ink);color:var(--ink);background:var(--mist);box-shadow:inset 0 -3px 0 var(--red)}
@media(hover:hover) and (pointer:fine){.subfilters button:hover{border-color:var(--ink);color:var(--ink)}}
.subfilters button:focus-visible{outline:3px solid var(--red);outline-offset:2px}
.gallery figure.type-off{display:none}
@media(max-width:560px){.subfilters{flex-wrap:nowrap;overflow-x:auto;margin-left:-16px;margin-right:-16px;padding:10px 16px}.subfilters button{flex:none;padding:9px 14px}.subfilters{scrollbar-width:none}.subfilters::-webkit-scrollbar{display:none}}
@media print{.subfilters{display:none!important}.gallery figure.type-off{display:flex!important}}

/* ---- Facility: full list of inspection and test equipment ---- */
.eq{margin-top:56px;max-width:820px}
.eq h3{font-size:22px;color:#fff;margin:0 0 18px}
.eq-table{width:100%;border-collapse:collapse;font-size:17px}
.eq-table th,.eq-table td{padding:13px 16px;text-align:left;border-bottom:1px solid rgba(255,255,255,.16);vertical-align:top}
.eq-table thead th{background:rgba(255,255,255,.08);color:#fff;font-family:var(--display);font-weight:600;font-size:15px;letter-spacing:.02em;border-bottom-color:rgba(255,255,255,.3)}
.eq-table td{width:76px;color:#aab2b9;font-variant-numeric:tabular-nums}
.eq-table tbody th{font-weight:500;color:#e6eaed}
@media(max-width:560px){.eq{margin-top:40px}.eq-table{font-size:16px}.eq-table th,.eq-table td{padding:11px 12px}.eq-table td{width:56px}}
@media print{.eq{color:#000}.eq h3,.eq-table thead th,.eq-table tbody th,.eq-table td{color:#000!important;background:none!important;border-color:#999!important}}

/* ---- Service cards: five across (Clear chromate and Zinc phosphate each have a card) ---- */
.svc-tiles{grid-template-columns:repeat(5,minmax(0,1fr))}
@media(max-width:1099px){
  .svc-tiles{grid-template-columns:repeat(6,minmax(0,1fr))}
  .svc-tiles .tile{grid-column:span 2;aspect-ratio:3/4}
  .svc-tiles .tile:nth-child(4){grid-column:2 / 4}
  .svc-tiles .tile:nth-child(5){grid-column:4 / 6}
}
@media(max-width:760px){
  .svc-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .svc-tiles .tile,.svc-tiles .tile:nth-child(4){grid-column:auto;aspect-ratio:4/5}
  .svc-tiles .tile:nth-child(5){grid-column:1 / -1;aspect-ratio:16/9}
}
#workflow .card img.cover{height:240px}
#modes .card img.cover{height:300px}
.review-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:24px 56px}
.review-row p{max-width:52ch}
.review-act{display:flex;flex-direction:column;align-items:center;gap:12px}
.review-act .va-note{margin:0;text-align:center}
@media(max-width:700px){.review-act{align-items:flex-start}.review-act .va-note{text-align:left}}
#review-us{border-top:1px solid var(--rule)}
.qr-card{display:flex;align-items:center;gap:32px 44px;flex-wrap:wrap}
.qr-card .qr{display:block;width:176px;height:176px;flex:none;background:#fff;border-radius:8px;border:1px solid var(--rule)}
.qr-card p{max-width:54ch}
.qr-act{display:flex;align-items:center;gap:16px 24px;flex-wrap:wrap;margin-top:18px}
.qr-link{font-weight:600;text-decoration:underline;text-underline-offset:3px}
.review-act .va-note a{color:inherit;text-decoration:underline;text-underline-offset:3px}
#laboratory .gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:560px){#laboratory .gallery{grid-template-columns:minmax(0,1fr)}}
form fieldset.svc{border:0;margin:0;padding:0;min-width:0}
form fieldset.svc legend{padding:0;margin-bottom:8px;font-size:14px;font-weight:600;color:var(--ink)}
.svc-opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 16px}
.svc-opts .check{font-size:15px;line-height:1.35;padding:11px 12px;border:1px solid var(--rule);border-radius:var(--r)}
@media(max-width:700px){.svc-opts{grid-template-columns:minmax(0,1fr)}}
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
form .note a{text-decoration:underline;text-underline-offset:3px}