/* Sweepro Tech website: tech.sweepromfg.com. Catalogue style (design system note). Copied as-is into assets/ by
   Maintenance Scripts/59_build_sweeprotech_site.py. Outfit and Montserrat only; no green; amber is the one accent. */
@font-face{font-family:Outfit;font-weight:700;font-display:swap;src:url(fonts/Outfit-Bold.ttf) format("truetype")}
@font-face{font-family:Outfit;font-weight:600;font-display:swap;src:url(fonts/Outfit-SemiBold.ttf) format("truetype")}
@font-face{font-family:Montserrat;font-weight:400;font-display:swap;src:url(fonts/Montserrat-Regular.ttf) format("truetype")}
:root{--black:#1C2124;--white:#FFFFFF;--amber:#C8812A;--steel:#8A999F;--lsteel:#C9D6DB;--ink:#3D4D54;--line:#D9E0E3;--muted:#6F7F85;--paper:#F4F6F6;--deep:#171B1E;--max:1160px;--gut:24px}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--white);color:var(--ink);font:400 16.5px/1.6 Montserrat,"Helvetica Neue",Arial,sans-serif}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:Outfit,"Helvetica Neue",Arial,sans-serif;font-weight:700;color:var(--black);margin:0;line-height:1.08;text-wrap:balance}
h1{font-size:clamp(38px,6vw,66px);letter-spacing:-.015em}
h2{font-size:clamp(28px,3.6vw,44px);letter-spacing:-.01em;margin-bottom:14px}
h3{font-size:19px;line-height:1.25;margin-bottom:6px}
h1 em,h2 em{font-style:normal;color:var(--amber)}
p{margin:0 0 14px}
figure{margin:0}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.skip{position:absolute;left:-999px;top:0;background:var(--amber);color:#fff;padding:10px 14px;z-index:99}
.skip:focus{left:8px}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
.label{font:600 12px/1 Outfit,Arial,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--amber);margin:0 0 16px}
.label .no{color:var(--steel);margin-right:12px;letter-spacing:.1em}
.sec.dark .label .no{color:#6c7a80}
.mk{display:inline-block;width:6px;height:6px;background:var(--amber);margin-right:10px;vertical-align:.18em;flex:none}
.btn{display:inline-block;background:var(--amber);color:#fff;text-decoration:none;font:600 14px/1 Outfit,Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;padding:17px 26px;border:0;transition:background .15s}
.btn:hover{background:#b07022}
.btn-s{padding:12px 18px;font-size:13px}
.textlink{font:600 15px/1 Outfit,Arial,sans-serif;color:#fff;text-decoration:none;border-bottom:1px solid var(--amber);padding-bottom:4px}
.textlink.dark{color:var(--black)}
.textlink::after{content:"  →";color:var(--amber)}
.cta{display:flex;flex-wrap:wrap;gap:22px;align-items:center;margin-top:26px}
.shead{display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap}

/* header */
.top{position:sticky;top:0;z-index:50;background:var(--black);border-bottom:3px solid var(--amber)}
.bar{display:flex;align-items:center;justify-content:space-between;height:76px}
.brand img{height:56px;width:auto}
.top nav{display:flex;align-items:center;gap:30px}
.top nav a:not(.btn){color:#fff;text-decoration:none;font:600 14px/1 Outfit,Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase}
.top nav a:not(.btn):hover,.top nav a.on:not(.btn){color:var(--amber)}
.menu{display:none;background:none;border:1px solid var(--steel);color:#fff;font:600 13px/1 Outfit,Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;padding:10px 14px;cursor:pointer}

/* hero */
.hero{position:relative;overflow:hidden;background:var(--black);color:#fff;min-height:min(88vh,780px);display:flex;align-items:flex-end;padding:140px 0 64px}
.hero-img{position:absolute;inset:0;background:url(img/cover.jpg) 42% 0/max(160%,1100px) auto no-repeat;transform-origin:42% 20%;animation:kb 26s ease-in-out infinite alternate}
@keyframes kb{from{transform:scale(1)}to{transform:scale(1.08) translate(-1%,1%)}}
.hero::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(28,33,36,.1) 0%,rgba(28,33,36,.35) 28%,rgba(28,33,36,.92) 56%,var(--black) 74%)}
.hero .wrap{position:relative;z-index:2;width:100%}
.hero h1{color:#fff;max-width:900px}
.hero .lead,.hero h1{text-shadow:0 1px 18px rgba(16,20,22,.75)}
.hero .label{display:inline-block;background:rgba(16,20,22,.82);border-left:3px solid var(--amber);padding:9px 12px 8px;margin-bottom:22px}
.lead{font-size:18px;color:var(--lsteel);max-width:640px;margin-top:20px}
.js .hero .label,.js .hero .l1,.js .hero .l2,.js .hero .lead,.js .hero .cta,.js .hero .proof{opacity:0;transform:translateY(18px);animation:up .9s cubic-bezier(.2,.7,.2,1) forwards}
.js .hero .l1{display:inline-block;animation-delay:.15s}.js .hero .l2{display:inline-block;animation-delay:.35s}
.js .hero .lead{animation-delay:.55s}.js .hero .cta{animation-delay:.7s}.js .hero .proof{animation-delay:.9s}
@keyframes up{to{opacity:1;transform:none}}
.proof{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:56px 0 0;border-top:1px solid #3a4246;padding-top:22px;max-width:820px}
.proof div{padding-right:20px}.proof div+div{border-left:1px solid #3a4246;padding-left:22px}
.proof dt{font:700 20px/1.2 Outfit,Arial,sans-serif;color:#fff}.proof dd{margin:4px 0 0;color:var(--lsteel);font-size:14px}

/* page head */
.phead{background:var(--black);color:#fff;padding:84px 0 64px;position:relative;background-size:cover}
.phead.withimg{padding-top:200px}
.phead.withimg::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(28,33,36,.1) 0%,rgba(28,33,36,.85) 55%,var(--black) 85%)}
.phead .wrap{position:relative}
.phead h1{color:#fff}
.phead.withimg h1,.phead.withimg .lead{text-shadow:0 1px 18px rgba(16,20,22,.75)}
.phead.withimg .label{display:inline-block;background:rgba(16,20,22,.82);border-left:3px solid var(--amber);padding:9px 12px 8px;margin-bottom:22px}

/* belt: the logo's belt, running */
.belt{position:relative;background:var(--black);border-top:1px solid #31393d;height:64px;overflow:hidden}
.belt .track{position:absolute;left:0;right:0;top:12px;bottom:12px;border-top:3px solid var(--steel);border-bottom:3px solid var(--steel);overflow:hidden;display:flex;align-items:center}
.belt .run{display:flex;align-items:center;white-space:nowrap;animation:run 48s linear infinite;will-change:transform}
.belt span{font:600 13px/1 Outfit,Arial,sans-serif;letter-spacing:.24em;text-transform:uppercase;color:#fff;padding:0 22px}
.belt i{width:6px;height:6px;background:var(--amber);flex:none}
.belt .hub{display:none}
@keyframes run{to{transform:translateX(-50%)}}

/* sections */
.sec{padding:96px 0}
.sec.dark{background:var(--black);color:var(--lsteel)}
.sec.dark h2,.sec.dark h3{color:#fff}
.sec.paper{background:var(--paper)}
.intro{max-width:720px;font-size:17px;margin-bottom:44px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 36px}
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:44px 28px}
.who h3{display:flex;align-items:baseline}
.who p{color:var(--lsteel);font-size:15.5px;padding-left:16px}
.sec:not(.dark) .who p{color:var(--ink)}

/* fact bands */
.facts{background:var(--black);color:#fff;padding:34px 0}
.facts .grid3>div{border-left:1px solid #3a4246;padding-left:22px}
.facts .grid3>div:first-child{border-left:0;padding-left:0}
.facts strong{display:block;font:700 22px/1.2 Outfit,Arial,sans-serif;color:#fff}
.facts span{display:block;color:var(--lsteel);font-size:14.5px;margin-top:4px}
.facts.thin{padding:26px 0;margin-top:56px}
.promise{padding:52px 0}
.promise .label{margin-bottom:22px}

/* photos and products */
.ph{background:#fff;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;overflow:hidden}
.ph img{width:100%;height:100%;object-fit:contain}
.ph.fill img{object-fit:cover}
.ph.tall{aspect-ratio:3/4}
.crop{background-repeat:no-repeat;background-color:#fff}
/* close crops of one part from the moulded-parts photo (square, 1024 px), centred on the part (X, 8 Oct 2026) */
.crop[aria-label="Pump diaphragm"]{background-size:280%!important;background-position:50.5% 70.4%!important}
/* the flanged bush sits 48 px from the photo's left edge, so it is centred by letting the frame run past that edge;
   the gap is filled with the photo's own backdrop grey (#f1f1f1, sampled) so it does not show (X, 8 Oct 2026) */
.crop[aria-label="Rubber-to-metal bush"]{background-size:225%!important;background-position:-13.1% 54.1%!important;background-color:#f1f1f1;position:relative}
.crop[aria-label="Rubber-to-metal bush"]::before{content:"";position:absolute;left:0;top:0;bottom:0;width:25%;background:linear-gradient(90deg,#f1f1f1 64%,rgba(241,241,241,0));pointer-events:none}
.cap{font:600 15px/1.3 Outfit,Arial,sans-serif;color:var(--black);margin:14px 0 4px;display:flex;align-items:baseline}
.sub{font-size:14.5px;color:var(--muted);margin:0}
.mosaic{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.tile{position:relative;display:flex;flex-direction:column;text-decoration:none;color:inherit;background:#fff;border:1px solid var(--line);transition:border-color .2s}
.tile .ph{aspect-ratio:4/3;border-bottom:1px solid var(--line)}
.tile .ph img{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.tile:hover{border-color:var(--black)}.tile:hover .ph img{transform:scale(1.05)}
.tcap{padding:16px 18px 18px;position:relative}
.tcap::before{content:"";position:absolute;left:0;top:-1px;height:3px;width:0;background:var(--amber);transition:width .4s}
.tile:hover .tcap::before{width:100%}
.tcap .code{display:block;font:600 11px/1 Outfit,Arial,sans-serif;letter-spacing:.18em;color:var(--amber);margin-bottom:8px}
.tcap strong{display:block;font:700 18px/1.2 Outfit,Arial,sans-serif;color:var(--black)}
.tcap .sub{display:block;margin-top:6px;font-size:14px}
.tile.t0{grid-column:span 2;grid-row:span 2}.tile.t0 .ph{aspect-ratio:auto;flex:1;min-height:320px}.tile.t0 .tcap strong{font-size:26px}
.tile.t7{grid-column:span 2}.tile.t7 .ph{aspect-ratio:16/6}
.jump{background:var(--paper);border-bottom:1px solid var(--line);position:sticky;top:79px;z-index:40}
.jump .wrap{display:flex;gap:26px;overflow-x:auto;padding-top:16px;padding-bottom:16px;scrollbar-width:none}
.jump a{white-space:nowrap;text-decoration:none;font:600 13px/1 Outfit,Arial,sans-serif;letter-spacing:.06em;color:var(--black)}
.jump a:hover{color:var(--amber)}
.fam{padding:88px 0 0;scroll-margin-top:130px}
.famgrid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:28px;align-items:start}
.famgrid .main .ph{aspect-ratio:16/10}
.side{display:grid;gap:22px}
.side .ph{aspect-ratio:16/10}
.tablewrap{overflow-x:auto;margin-top:40px}
table{border-collapse:collapse;width:100%;min-width:520px}
.spec th,.spec td,.cmp th,.cmp td{text-align:left;padding:15px 14px;border-bottom:1px solid var(--line);vertical-align:top;font-size:15.5px}
.spec thead th,.cmp thead th{font:600 12px/1 Outfit,Arial,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);border-bottom:2px solid var(--black)}
.spec tbody th{font:600 16px/1.3 Outfit,Arial,sans-serif;color:var(--black);width:32%}
.spec.two tbody th{width:28%}
.cmp thead th{background:var(--black);color:var(--lsteel);border:0;padding:16px 14px}
.cmp thead th.us{color:var(--amber)}
.cmp tbody tr:nth-child(even){background:var(--paper)}
.cmp tbody th{font:600 16px/1.3 Outfit,Arial,sans-serif;color:var(--black);width:26%}
.cmp td.us{font:600 16px/1.3 Outfit,Arial,sans-serif;color:var(--black)}
.cmp td{color:var(--muted)}
.need{margin-top:40px;background:var(--paper);padding:28px 30px}
.need ol{margin:0;padding-left:22px;columns:2;column-gap:40px}
.need li{margin-bottom:8px;break-inside:avoid}

/* steps */
.step{border-top:2px solid var(--black);padding-top:18px}
.step .n{font:700 40px/1 Outfit,Arial,sans-serif;color:var(--amber);display:block;margin-bottom:12px}

/* machine */
.machine-sec{overflow:hidden}
.machine-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:64px;align-items:center}
.mstep{list-style:none;margin:28px 0 0;padding:0}
.mstep li{display:flex;gap:18px;align-items:baseline;padding:14px 0;border-top:1px solid #31393d;font:600 17px/1.3 Outfit,Arial,sans-serif;color:#fff}
.mstep span{color:var(--amber);font-size:14px;letter-spacing:.1em}
.cnc{margin:0;background:#0d1112;border:1px solid #2f383c;box-shadow:0 30px 80px rgba(0,0,0,.45)}
.cnc-top{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid #2f383c;font:600 12px/1 Outfit,Arial,sans-serif;letter-spacing:.18em;color:var(--lsteel)}
.cnc-top .cnc-job{margin-left:auto;color:#6c7a80}
.led{width:9px;height:9px;background:#3a4448;flex:none;transition:background .2s,box-shadow .2s}
.led.on{background:var(--amber);box-shadow:0 0 10px var(--amber)}
.cnc-dro{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-bottom:1px solid #2f383c}
.cnc-dro span{padding:10px 16px;font:600 11px/1 Outfit,Arial,sans-serif;letter-spacing:.16em;color:#6c7a80;border-right:1px solid #2f383c;display:flex;gap:10px;align-items:baseline}
.cnc-dro span:last-child{border-right:0}
.cnc-dro b{font:600 17px/1 Outfit,Arial,sans-serif;letter-spacing:.02em;color:#e9eef0;font-variant-numeric:tabular-nums;margin-left:auto}
#cnc{display:block;width:100%;height:auto}
#cnc .pocket{fill:none;stroke:#252c2f;stroke-width:13;stroke-linecap:round;stroke-linejoin:round}
#cnc .cut{fill:none;stroke:#1a1f22;stroke-width:4}
#cnc .pin{fill:url(#steel);stroke:#55636a;stroke-width:1.5;opacity:0}
#cnc .bolt circle{fill:#5d6a70;stroke:#3e484d}#cnc .bolt path{stroke:#2d3538;stroke-width:1.5}
#cnc .datum{stroke:#C8812A;stroke-width:1;opacity:.8}
#cnc .glow{fill:none;stroke:#C8812A;stroke-width:2;opacity:0;transition:opacity .2s}
#cnc.cutting .glow{opacity:.55}
#cnc text{font:600 13px Outfit,Arial,sans-serif;letter-spacing:.2em;fill:#C8812A}
.cnc-code{padding:12px 16px;border-top:1px solid #2f383c;font:600 13px/1.2 Outfit,Arial,sans-serif;letter-spacing:.08em;color:var(--amber);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cnc-code::before{content:"> ";color:#6c7a80}

/* statement band */
.statement{position:relative;background:var(--black) url(img/belt-in-service.jpg) 50% 55%/cover no-repeat;color:#fff;padding:150px 0}
.statement::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(28,33,36,.95) 0%,rgba(28,33,36,.8) 45%,rgba(28,33,36,.35) 100%)}
.statement .wrap{position:relative}
.statement h2{color:#fff;font-size:clamp(34px,5vw,60px);max-width:860px}

/* who we supply */
.who2{list-style:none;margin:36px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 56px}
.who2 li{display:flex;gap:22px;padding:24px 0;border-top:1px solid var(--line)}
.who2 .idx{font:700 15px/1.6 Outfit,Arial,sans-serif;color:var(--amber);letter-spacing:.06em}
.who2 h3{font-size:20px}.who2 p{margin:0;color:var(--ink)}

/* story */
.story{display:grid;grid-template-columns:1fr 1fr;background:var(--black);color:var(--lsteel)}
.story .img{background-size:cover;background-position:50% 45%;min-height:460px}
.story .txt{padding:80px clamp(24px,6vw,88px);display:flex;flex-direction:column;justify-content:center}
.story h2{color:#fff}
.split{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:56px;align-items:start;margin-top:48px}
.wrap.split{margin-top:0}
.story2 p{font-size:17px}
blockquote{margin:30px 0 0;border-left:3px solid var(--amber);padding-left:22px}
blockquote p{font:700 clamp(24px,2.6vw,32px)/1.15 Outfit,Arial,sans-serif;color:var(--black);margin:0}
blockquote em{font-style:normal;color:var(--amber)}
.ind{list-style:none;margin:30px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px 28px}
.ind li{display:flex;align-items:baseline;font:600 16px/1.35 Outfit,Arial,sans-serif;color:var(--black);border-bottom:1px solid var(--line);padding-bottom:12px}

/* quote page */
.diagram{background:#fff;padding:24px;margin-top:20px;max-width:880px}
.diagram svg{width:100%;height:auto;display:block}
.note{margin-top:18px;color:var(--ink)}
.checklist{list-style:none;padding:0;margin:24px 0 0}
.checklist li{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 6px;padding:12px 0;border-bottom:1px solid var(--line)}
.checklist strong{font:600 16px/1.3 Outfit,Arial,sans-serif;color:var(--black)}
.formpanel{background:var(--black);color:var(--lsteel);padding:40px 36px}
.formpanel h2{color:#fff}
.todo{background:#5a2b10;color:#fff;padding:14px;font:600 14px/1.4 Outfit,Arial,sans-serif}

/* closing and footer (set out like sweepromfg.com) */
.closing{background:var(--black);color:var(--lsteel);padding:96px 0;border-top:1px solid #31393d}
.closing h2{color:#fff}
.closing p{max-width:640px;font-size:17px}
.foot{background:var(--black);color:var(--lsteel);border-top:3px solid var(--amber);font-size:14.5px}
.fcenter{display:flex;flex-direction:column;align-items:center;text-align:center;padding-top:64px;padding-bottom:36px}
.fcenter img{height:70px;width:auto;margin-bottom:14px}
.foot .tag{font:600 16px/1.3 Outfit,Arial,sans-serif;color:#fff;margin:0}
.fnav,.flegal{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 28px;margin:22px 0 0}
.fnav a{font:600 15px/1.2 Outfit,Arial,sans-serif;color:#fff;text-decoration:none}
.flegal{padding-top:22px;border-top:1px solid #31393d;margin-top:26px}
.flegal a{font:600 14px/1.2 Outfit,Arial,sans-serif;color:var(--lsteel);text-decoration:none}
.fnav a:hover,.flegal a:hover,.fdiv a:hover,.fby a:hover{color:var(--amber)}
.fdiv{margin:28px 0 6px;color:var(--steel)}.fdiv a{color:var(--lsteel)}
.fcopy{margin:0 0 6px;color:#fff;font:600 15px/1.3 Outfit,Arial,sans-serif}
.fby{margin:0;font-size:13px;color:var(--steel)}.fby a{color:var(--lsteel)}
.fbase{text-align:center;font-size:12px;line-height:1.6;color:#6c7a80;border-top:1px solid #31393d;padding-top:20px;padding-bottom:28px}
.fbase p{max-width:860px;margin:0 auto}

/* header extras: request list counter and scroll progress */
.top{position:sticky}
.top .prog{position:absolute;left:0;right:0;bottom:-3px;height:3px;background:#fff;opacity:.85;transform-origin:0 50%;transform:scaleX(0);pointer-events:none}
.reqlink{display:none!important;align-items:center;gap:8px}
.reqlink.has{display:inline-flex!important}
.reqlink b,.mlist b{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;background:var(--amber);color:#fff;font:700 12px/1 Outfit,Arial,sans-serif;letter-spacing:0}
/* phone quote bar */
.mbar{display:none}
@media (max-width:960px){
  .mbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;gap:10px;align-items:center;background:rgba(28,33,36,.97);border-top:3px solid var(--amber);padding:10px var(--gut) calc(10px + env(safe-area-inset-bottom,0px));transform:translateY(110%);transition:transform .3s cubic-bezier(.2,.7,.2,1)}
  .mbar.on{transform:none}
  .mbar .btn{flex:1;text-align:center;padding:15px 12px}
  .mlist{display:none;align-items:center;gap:8px;color:#fff;text-decoration:none;font:600 13px/1 Outfit,Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;border:1px solid #4a5458;padding:12px 12px}
  .mlist.has{display:inline-flex}
}
/* toast */
.toast{position:fixed;left:50%;bottom:24px;z-index:80;transform:translate(-50%,140%);background:var(--black);color:#fff;border-left:3px solid var(--amber);padding:14px 18px;font-size:14.5px;max-width:min(92vw,520px);box-shadow:0 18px 50px rgba(0,0,0,.35);opacity:0;visibility:hidden;transition:transform .35s cubic-bezier(.2,.7,.2,1),opacity .25s,visibility 0s .35s}
.toast.on{transform:translate(-50%,0);opacity:1;visibility:visible;transition:transform .35s cubic-bezier(.2,.7,.2,1),opacity .25s}
.toast a{color:var(--amber);font-weight:600}
@media (max-width:960px){.toast{bottom:92px}}
/* products: search, add button, photo viewer */
.psearch{flex:none;width:190px;border:1px solid var(--line);background:#fff;padding:9px 12px;font:400 14px Montserrat,Arial,sans-serif;color:var(--black);border-radius:0;-webkit-appearance:none}
.psearch:focus{border-color:var(--amber);outline:none}
.addbtn{display:inline-flex;align-items:center;gap:10px;margin:-20px 0 30px;background:none;border:1px solid var(--black);color:var(--black);font:600 13px/1 Outfit,Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;padding:13px 18px;cursor:pointer;transition:background .15s,color .15s}
.addbtn span{color:var(--amber);font-size:17px;line-height:0}
.addbtn:hover{background:var(--black);color:#fff}
.zoomable{cursor:zoom-in}
.lb{position:fixed;inset:0;z-index:90;background:rgba(16,20,22,.94);display:flex;align-items:center;justify-content:center;padding:60px 20px 30px}
.lb[hidden]{display:none}
.lb figure{max-width:1100px;width:100%;background:#fff;padding:18px}
.lb img{width:100%;max-height:72vh;object-fit:contain}
.lb figcaption{font:600 15px Outfit,Arial,sans-serif;color:var(--black);margin-top:12px}
.lbx{position:absolute;top:16px;right:20px;background:none;border:1px solid #4a5458;color:#fff;font:600 13px Outfit,Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;padding:10px 14px;cursor:pointer}
html.lbopen{overflow:hidden}
.nomatch{padding-bottom:40px}
/* quote page: part builder */
.builder{background:#fff;border-top:1px solid var(--line);scroll-margin-top:90px}
.builder .hint{font-size:13px;color:var(--muted)}
.bgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:start}
.bform{display:grid;gap:16px}
.row2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:end}
.dims{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.fld{display:flex;flex-direction:column;gap:7px;position:relative}
.fld[hidden]{display:none}
.fld span{font:600 12px/1 Outfit,Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--black)}
.fld input,.fld select{width:100%;border:1px solid #c3ccd0;background:#fff;padding:13px 52px 13px 14px;font:400 16px Montserrat,Arial,sans-serif;color:var(--black);border-radius:0;-webkit-appearance:none;appearance:none}
.fld.sel select{padding-right:34px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23C8812A' stroke-width='2'/%3E%3C/svg%3E") right 14px center no-repeat}
.fld input:focus,.fld select:focus{border-color:var(--amber);outline:none;box-shadow:0 0 0 3px rgba(200,129,42,.15)}
.fld em{position:absolute;right:12px;bottom:14px;font:600 12px Outfit,Arial,sans-serif;font-style:normal;color:var(--muted);pointer-events:none}
.fld em .u{font-style:normal}
.units{display:inline-flex;border:1px solid var(--black);justify-self:start}
.units button{background:#fff;border:0;padding:13px 18px;font:600 13px/1 Outfit,Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--black);cursor:pointer}
.units button.on{background:var(--black);color:#fff}
.warn{margin:0;background:#fbf1e4;border-left:3px solid var(--amber);padding:10px 12px;font-size:14.5px;color:#5a3a12}
.warn[hidden]{display:none}
.bform .cta{margin-top:4px}
button.textlink{background:none;border:0;border-bottom:1px solid var(--amber);cursor:pointer;padding:0 0 4px}
button.textlink::after{content:""}
.bview{position:sticky;top:110px}
.sheet{background:#fff;border:1px solid var(--line);padding:14px;background-image:linear-gradient(#eef2f3 1px,transparent 1px),linear-gradient(90deg,#eef2f3 1px,transparent 1px);background-size:20px 20px}
.sheet svg{display:block;width:100%;height:auto}
.sheet .paper{fill:transparent}
.sheet .rub{fill:none;stroke:var(--black)}
.sheet .rubf{fill:var(--black)}
.sheet .pipe{fill:#c9d3d6;stroke:#8a999f;stroke-width:1.5}
.sheet .pcd{fill:none;stroke:var(--amber);stroke-width:1;stroke-dasharray:4 4}
.sheet .dm{stroke:var(--amber);stroke-width:1.4;fill:none}
.sheet text{font:600 13px Outfit,Arial,sans-serif;fill:var(--amber);letter-spacing:.04em}
.sheet text.ph{fill:var(--muted);font:400 13px Montserrat,Arial,sans-serif}
.sheet text.sm{fill:var(--muted);font:400 11px Montserrat,Arial,sans-serif}
.scale{margin:10px 0 0;font:600 11px Outfit,Arial,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.rlist{margin-top:56px;border-top:2px solid var(--black);padding-top:22px}
.rlist h3{font-size:22px}
.rcount{font:600 12px Outfit,Arial,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--amber)}
.rlist ol{list-style:none;margin:16px 0 0;padding:0;counter-reset:r}
.rlist li{display:flex;gap:18px;align-items:flex-start;justify-content:space-between;padding:16px 0;border-bottom:1px solid var(--line);counter-increment:r}
.rlist li::before{content:counter(r,decimal-leading-zero);font:700 15px/1.5 Outfit,Arial,sans-serif;color:var(--amber);flex:none;width:28px}
.rlist li div{flex:1;min-width:0}
.rlist li strong{display:block;font:600 17px/1.3 Outfit,Arial,sans-serif;color:var(--black)}
.rlist li span{display:block;font-size:14.5px;color:var(--ink);margin-top:3px}
.rlist li button{background:none;border:0;color:var(--muted);font:600 12px Outfit,Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;padding:4px 0}
.rlist li button:hover{color:var(--amber)}
.rlist .empty{color:var(--muted);margin-top:14px}
.racts[hidden],.howto[hidden],.empty[hidden]{display:none}
.howto{margin-top:14px;font-size:14.5px;color:var(--ink)}
.btn.ghost{background:none;border:1px solid var(--black);color:var(--black)}
.btn.ghost:hover{background:var(--black);color:#fff}
button.btn{cursor:pointer}
@media (max-width:960px){.bgrid{grid-template-columns:minmax(0,1fr)}.bview{position:static;order:-1}.psearch{width:150px}}
@media (max-width:560px){.row2,.dims{grid-template-columns:minmax(0,1fr)}.units{width:100%}.units button{flex:1}.foot{padding-bottom:72px}
  .statement::before{background:linear-gradient(180deg,rgba(28,33,36,.55) 0%,rgba(28,33,36,.9) 45%,rgba(28,33,36,.95) 100%)}
  .phead.withimg{padding-top:150px}}

/* guidance: start-here routes, active family, back to top, measuring help */
.guide{background:var(--paper);padding:72px 0;border-bottom:1px solid var(--line)}
.guide h2{margin-bottom:28px}
.gopts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.gopt{display:flex;flex-direction:column;gap:10px;background:#fff;border:1px solid var(--line);border-top:3px solid var(--black);padding:26px 24px;text-decoration:none;color:var(--ink);transition:border-color .2s,transform .2s}
.gopt strong{font:700 21px/1.2 Outfit,Arial,sans-serif;color:var(--black)}
.gopt span{font-size:15px}
.gopt i{margin-top:auto;padding-top:10px;font:600 14px/1 Outfit,Arial,sans-serif;font-style:normal;letter-spacing:.12em;text-transform:uppercase;color:var(--amber)}
.gopt i::after{content:"  →"}
.gopt:hover{border-top-color:var(--amber);transform:translateY(-3px)}
.jump .wrap{align-items:center;padding-top:10px;padding-bottom:10px;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 56px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 56px),transparent)}
.jump .wrap.atend{-webkit-mask-image:none;mask-image:none}
.jump a{display:inline-flex;align-items:center;height:40px;padding:2px 0 0;border-bottom:2px solid transparent;transition:color .2s,border-color .2s}
.psearch{height:40px}
.jump a.on{color:var(--amber);border-bottom-color:var(--amber)}
.totop{position:fixed;right:24px;bottom:24px;z-index:55;width:48px;height:48px;background:var(--black);color:#fff;border:1px solid #3a4448;font:600 20px/1 Outfit,Arial,sans-serif;cursor:pointer;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .25s,transform .25s,visibility 0s .25s}
.totop.on{opacity:1;visibility:visible;transform:none;transition:opacity .25s,transform .25s}
.totop:hover{background:var(--amber);border-color:var(--amber)}
@media (max-width:960px){.totop{display:none}.gopts{grid-template-columns:minmax(0,1fr)}.guide{padding:56px 0}}
.mhelp{margin:12px 0 0;font-size:14px;color:var(--ink)}
.mhelp a{color:var(--black);font-weight:600;text-decoration:none;border-bottom:1px solid var(--amber)}
#measure{scroll-margin-top:90px}
.phead .cta .textlink{color:#fff}

/* questions and answers (quote page) */
.faq{border-top:1px solid var(--line)}
.faqs{margin-top:26px;border-top:2px solid var(--black)}
.faqs details{border-bottom:1px solid var(--line)}
.faqs summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;align-items:baseline;padding:20px 0;font:600 18px/1.3 Outfit,Arial,sans-serif;color:var(--black)}
.faqs summary::-webkit-details-marker{display:none}
.faqs summary::after{content:"+";color:var(--amber);font-size:24px;line-height:1;flex:none;transition:transform .2s}
.faqs details[open] summary::after{transform:rotate(45deg)}
.faqs details p{margin:-6px 0 20px;max-width:760px}
/* footer share */
.share{margin-top:18px;background:none;border:1px solid #4a5458;color:#fff;font:600 12px/1 Outfit,Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;padding:11px 16px;cursor:pointer}
.share:hover{border-color:var(--amber);color:var(--amber)}

/* scroll reveal */
.js .reveal{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.js .reveal.in{opacity:1;transform:none}
.mosaic .reveal:nth-child(2){transition-delay:.06s}.mosaic .reveal:nth-child(3){transition-delay:.12s}.mosaic .reveal:nth-child(4){transition-delay:.18s}
@media (prefers-reduced-motion:reduce){.hero-img,.belt .run{animation:none}.js .reveal,.js .hero *{opacity:1!important;transform:none!important;animation:none!important}}

/* responsive */
@media (max-width:960px){
  .mosaic{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tile.t0{grid-row:auto}.tile.t0 .ph{min-height:0;aspect-ratio:16/10}
  .machine-grid{grid-template-columns:minmax(0,1fr);gap:40px}
  .who2{grid-template-columns:minmax(0,1fr)}
  .proof{grid-template-columns:minmax(0,1fr);gap:12px}.proof div+div{border-left:0;padding-left:0}
  .grid4,.ind{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid3{grid-template-columns:minmax(0,1fr);gap:28px}
  .facts .grid3{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
  .facts .grid3>div{padding-left:14px}
  .facts strong{font-size:17px}
  .famgrid,.split,.story{grid-template-columns:minmax(0,1fr)}
  .story .img{min-height:300px}
  .hero-img{background-position:30% 0}
  .hero::before{background:linear-gradient(180deg,rgba(28,33,36,.15) 0%,rgba(28,33,36,.55) 20%,rgba(28,33,36,.93) 40%,var(--black) 56%)}
  .menu{display:block}
  .top nav{display:none;position:absolute;left:0;right:0;top:79px;background:var(--black);flex-direction:column;align-items:flex-start;padding:20px var(--gut) 28px;gap:22px;border-bottom:3px solid var(--amber)}
  .top.open nav{display:flex}
  .need ol{columns:1}
}
@media (max-width:560px){
  :root{--gut:16px}
  body{font-size:16px}
  .sec{padding:68px 0}
  .grid4{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px 16px}
  .ind{grid-template-columns:minmax(0,1fr)}
  .facts .grid3{grid-template-columns:minmax(0,1fr)}
  .facts .grid3>div{border-left:0;padding-left:0;border-top:1px solid #3a4246;padding-top:12px}
  .facts .grid3>div:first-child{border-top:0;padding-top:0}
  .brand img{height:46px}
  .bar{height:68px}
  .top nav{top:71px}
  .jump{top:71px}
  .hero{padding-top:110px}
  .hero-img{background-position:28% 0}
  .hero::before{background:linear-gradient(180deg,rgba(28,33,36,.15) 0%,rgba(28,33,36,.5) 22%,rgba(28,33,36,.95) 44%,var(--black) 58%)}
  .formpanel{padding:30px 22px}
  .mosaic{grid-template-columns:minmax(0,1fr)}
  .tile.t0,.tile.t7{grid-column:auto}.tile.t7 .ph{aspect-ratio:4/3}
  .cnc-dro{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cnc-dro span:nth-child(2){border-right:0}.cnc-dro span:nth-child(-n+2){border-bottom:1px solid #2f383c}
  .cnc-top .cnc-job{display:none}
  .statement{padding:100px 0}
  .belt span{letter-spacing:.18em;padding:0 16px}
}

/* ---------- 8 Oct 2026 audit: industry filter, "used in", parts at a glance, photo backdrops, phone tables ---------- */
.ptools{background:#fff;border-bottom:1px solid var(--line)}
.ptools .wrap{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding-top:14px;padding-bottom:14px}
.ptools label{font:600 12px/1 Outfit,Arial,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.pind{height:40px;min-width:240px;border:1px solid var(--line);background:#fff;padding:0 36px 0 12px;font:600 14px Outfit,Arial,sans-serif;color:var(--black);border-radius:0;-webkit-appearance:none;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--amber) 50%),linear-gradient(135deg,var(--amber) 50%,transparent 50%);background-position:calc(100% - 18px) 17px,calc(100% - 13px) 17px;background-size:5px 5px;background-repeat:no-repeat}
.pind:focus{border-color:var(--amber);outline:none}
.pcount{font:400 14px Montserrat,Arial,sans-serif;color:var(--muted)}
.jump a[hidden]{display:none}
.usedin{margin:22px 0 0;font:400 14.5px/1.7 Montserrat,Arial,sans-serif;color:var(--muted)}
.usedin span{font:600 12px/1 Outfit,Arial,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--amber);margin-right:12px}
.usedin a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
.usedin a:hover{color:var(--amber);border-color:var(--amber)}
.glance{border-top:1px solid var(--line);margin-top:88px}
.glgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:34px 28px;margin-top:36px}
.gl h3{font:600 16px/1.3 Outfit,Arial,sans-serif;margin:0 0 12px;padding-bottom:10px;border-bottom:2px solid var(--black)}
.gl h3 a{color:var(--black);text-decoration:none}.gl h3 a:hover{color:var(--amber)}
.gl ul{list-style:none;margin:0;padding:0}
.gl li{font:400 14.5px/1.5 Montserrat,Arial,sans-serif;color:var(--ink);padding:6px 0;border-bottom:1px solid var(--line)}
.ind li a{display:flex;align-items:baseline;color:inherit;text-decoration:none;width:100%}
.ind li a:hover{color:var(--amber)}
/* photos shot on a grey backdrop fill their frame, so no grey box sits inside the white one */
.ph img[src$="moulded.jpg"],.ph img[src$="couplings.jpg"]{object-fit:cover}
@media (max-width:960px){.glgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){
  .glgrid{grid-template-columns:minmax(0,1fr)}
  .pind{min-width:0;flex:1}
  /* the search box stays in view while the family links scroll under it */
  .psearch{position:sticky;left:0;z-index:2;box-shadow:12px 0 10px -4px var(--paper)}
  /* spec tables become stacked rows on a phone: part, what it is, then the size */
  .spec thead{display:none}
  .spec,.spec tbody,.spec tr,.spec th,.spec td{display:block;width:auto;min-width:0}
  .spec tr{padding:14px 0;border-bottom:1px solid var(--line)}
  .spec tbody th,.spec td{border:0;padding:0}
  .spec tbody th{width:auto;margin-bottom:4px}
  .spec td{font-size:15px;color:var(--ink)}
  .spec td+td{margin-top:4px;font:600 12px/1.6 Outfit,Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--amber)}
}

/* ---------- the hidden industry selector, /selector (X, 8 Oct 2026) ---------- */
.isel{position:relative;overflow:hidden;background:var(--black);color:#fff;padding:150px 0 90px;min-height:100vh}
.isel::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:44px 44px;pointer-events:none}
.selglow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(520px circle at var(--x,70%) var(--y,20%),rgba(200,129,42,.16),transparent 60%);transition:background .2s}
.isel .wrap{position:relative}
.selq{font:700 clamp(40px,6.4vw,84px)/1.02 Outfit,Arial,sans-serif;letter-spacing:-.02em;margin:0 0 22px}
.selblank{color:var(--amber);display:inline-block;min-width:1.2em;border-bottom:3px solid var(--amber);padding-bottom:2px}
.isel .lead{color:var(--lsteel);max-width:620px;margin:0 0 46px}
.selgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.selt{position:relative;text-align:left;background:rgba(255,255,255,.035);border:1px solid #2f383c;color:#fff;padding:20px 20px 22px;cursor:pointer;
  font:inherit;display:flex;flex-direction:column;gap:8px;min-height:132px;transition:border-color .2s,background .2s,transform .25s cubic-bezier(.2,.7,.2,1)}
.selt .no{font:600 12px/1 Outfit,Arial,sans-serif;letter-spacing:.16em;color:var(--amber)}
.selt strong{font:600 18px/1.25 Outfit,Arial,sans-serif}
.selt .meta{font:400 13px/1.4 Montserrat,Arial,sans-serif;color:#8a999f;margin-top:auto}
.selt i{position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--amber);transition:width .35s cubic-bezier(.2,.7,.2,1)}
.selt:hover,.selt:focus-visible{border-color:var(--amber);background:rgba(200,129,42,.07);transform:translateY(-3px);outline:none}
.selt:hover i,.selt:focus-visible i{width:100%}
.selt.on{background:var(--amber);border-color:var(--amber)}
.selt.on .no,.selt.on .meta{color:var(--black)}.selt.on strong{color:var(--black)}.selt.on i{width:100%;background:var(--black)}
.selready .selt{opacity:0;transform:translateY(14px);animation:selin .5s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:var(--d,0ms)}
@keyframes selin{to{opacity:1;transform:none}}
.selall{margin:34px 0 0}.isel .textlink{color:#fff}
.selres{background:var(--black);padding:0 0 110px}
.selcard{background:#fff;color:var(--black);padding:44px 46px;border-top:4px solid var(--amber);box-shadow:0 30px 80px rgba(0,0,0,.45)}
.selres.in .selcard{animation:cardup .55s cubic-bezier(.2,.7,.2,1)}
@keyframes cardup{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
.selcard h2{margin:0 0 8px}.selcard h2 em{color:var(--amber);font-style:normal}
.rsum{color:var(--muted);margin:0 0 20px}.rsum b{color:var(--black);font:700 20px Outfit,Arial,sans-serif}
.rsay{font:600 20px/1.4 Outfit,Arial,sans-serif;margin:0 0 14px}
.rsteps{margin:0 0 26px;padding:0;list-style:none;counter-reset:st;display:grid;gap:10px}
.rsteps li{counter-increment:st;display:flex;gap:14px;align-items:baseline;opacity:0;animation:selin .45s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:var(--d,0ms)}
.rsteps li::before{content:counter(st);flex:none;display:inline-grid;place-items:center;width:26px;height:26px;background:var(--black);color:var(--amber);font:700 13px/1 Outfit,Arial,sans-serif}
.rsteps a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}.rsteps a:hover{color:var(--amber);border-color:var(--amber)}
.rfams{list-style:none;margin:0 0 26px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.rfams li{border:1px solid var(--line);padding:7px 12px;font:600 13px/1 Outfit,Arial,sans-serif;opacity:0;animation:selin .4s forwards;animation-delay:var(--d,0ms)}
.rlink{display:flex;gap:10px;margin:0 0 22px}
.rlink input{flex:1;min-width:0;height:48px;border:1px solid var(--line);background:var(--paper);padding:0 14px;font:400 14px Montserrat,Arial,sans-serif;color:var(--ink);border-radius:0}
.rlink .btn{flex:none}
body:has(.isel) .mbar{display:none}
/* ---------- the products page tailored to one industry (?for=) ---------- */
.fyban{background:var(--black);color:#fff;padding:64px 0 58px;border-bottom:3px solid var(--amber)}
.fyban h2{color:#fff;margin:0 0 12px}.fyban h2 em{color:var(--amber);font-style:normal}
.fyban .intro{color:var(--lsteel)}.fyban .textlink{color:#fff}
.fysay{font:600 20px/1.4 Outfit,Arial,sans-serif;margin:26px 0 14px;color:#fff}
.fysteps{list-style:none;margin:0 0 30px;padding:0;counter-reset:st;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 28px;max-width:980px}
.fysteps li{counter-increment:st;display:flex;gap:14px;align-items:baseline}
.fysteps li::before{content:counter(st);flex:none;display:inline-grid;place-items:center;width:26px;height:26px;background:var(--amber);color:var(--black);font:700 13px/1 Outfit,Arial,sans-serif}
.fysteps a{color:#e9eef0;text-decoration:none;border-bottom:1px solid #3a4246}.fysteps a:hover{color:var(--amber);border-color:var(--amber)}
.fybadge{display:inline-block;margin-left:12px;background:var(--amber);color:var(--black);padding:4px 8px 3px;font:700 11px/1 Outfit,Arial,sans-serif;letter-spacing:.14em}
.fyrest{border-top:1px solid var(--line);margin-top:88px;padding:64px 0 0}.fyrest h2{margin:0}
.fytip{display:flex;gap:14px;align-items:flex-start;background:#FBF4EA;border-left:3px solid var(--amber);padding:14px 18px;margin:22px 0 0;max-width:760px;font-size:15px;line-height:1.55}
.fyi{flex:none;display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--amber);color:#fff;font:700 12px/1 Outfit,Arial,sans-serif}
.fytip.ping{animation:ping 1.2s ease-out}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(200,129,42,.55)}100%{box-shadow:0 0 0 18px rgba(200,129,42,0)}}
.gpill{position:fixed;left:24px;bottom:24px;z-index:60;display:flex;align-items:center;gap:14px;max-width:min(520px,calc(100vw - 48px));background:var(--black);color:#fff;
  padding:12px 12px 12px 16px;border:1px solid #2f383c;border-left:3px solid var(--amber);box-shadow:0 18px 50px rgba(0,0,0,.35);opacity:0;transform:translateY(20px);transition:opacity .35s,transform .35s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.gpill.on{opacity:1;transform:none;pointer-events:auto}
.gdot{flex:none;width:10px;height:10px;border-radius:50%;background:var(--amber);animation:gd 2s ease-in-out infinite}
@keyframes gd{50%{box-shadow:0 0 0 6px rgba(200,129,42,.18)}}
.gtxt{display:flex;flex-direction:column;gap:3px;min-width:0}
.gk{font:600 11px/1 Outfit,Arial,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#8a999f}.gk b{color:var(--amber)}
.gs{font:400 14px/1.4 Montserrat,Arial,sans-serif;color:#e9eef0}
.ggo{flex:none;background:var(--amber);color:var(--black);border:0;padding:10px 14px;font:700 12px/1 Outfit,Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
.gx{flex:none;background:none;border:0;color:#8a999f;font-size:22px;line-height:1;padding:4px 6px;cursor:pointer}.gx:hover{color:#fff}
@media (max-width:960px){.selgrid{grid-template-columns:repeat(2,minmax(0,1fr))}.fysteps{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){
  .isel{padding:118px 0 64px}
  .selgrid{gap:8px}.selt{min-height:112px;padding:16px 14px}.selt strong{font-size:16px}
  .selcard{padding:30px 22px}.rlink{flex-direction:column}.rlink .btn{width:100%}
  .gpill{left:12px;right:12px;bottom:84px;max-width:none}.gs{font-size:13px}
  .fybadge{display:table;margin:10px 0 0}
}
@media (prefers-reduced-motion:reduce){.selready .selt,.rsteps li,.rfams li{animation:none;opacity:1;transform:none}.selres.in .selcard,.gdot,.fytip.ping{animation:none}}
@media (max-width:960px){.gpill{bottom:84px}}

/* home: four routes in "Start here", and the way into the selector under the industries (8 Oct 2026) */
.gopts{grid-template-columns:repeat(4,minmax(0,1fr))}
.indcta{margin-top:34px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}.indcta .hint{color:var(--muted);font-size:15px}
@media (max-width:960px){.gopts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.gopts{grid-template-columns:minmax(0,1fr)}}
.isel .selq{color:#fff}
.fytip{margin-bottom:26px}.fytip b{color:var(--black);font-weight:700}
.fytip{margin-bottom:42px}
.selres{scroll-margin-top:84px}
@media (max-width:560px){.rlink input{flex:none;width:100%;height:48px}}
@media (max-width:560px){.gpill{padding:9px 8px 9px 12px;gap:10px}.gs{font-size:12.5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.ggo{padding:9px 10px;font-size:11px}.gk{font-size:10px}}
/* photo frames in the photos' own 4:3 shape; photos with a grey backdrop, a vignette or a full scene fill the frame,
   so no grey box or bars sit inside the white one (audit, 8 Oct 2026) */
.famgrid .main .ph,.side .ph{aspect-ratio:4/3}
.ph img[src$="washers.jpg"],.ph img[src$="belt-roll.jpg"],.ph img[src$="belt-in-service.jpg"],.ph img[src$="sheet.jpg"]{object-fit:cover}
.tile.t7 .ph img{object-fit:cover}
/* bigger logo (X, 8 Oct 2026, after launch): the header grows with it, and everything that sits under the header
   (sticky product bar, phone menu, section jumps) moves down to match */
.bar{height:92px}
.brand img{height:72px}
.jump{top:95px}
.fam{scroll-margin-top:146px}
.builder,#measure{scroll-margin-top:106px}
.selres{scroll-margin-top:100px}
@media (max-width:960px){.top nav{top:95px}}
@media (max-width:560px){
  .bar{height:78px}
  .brand img{height:58px}
  .top nav{top:81px}
  .jump{top:81px}
}
/* the "Start here" card links stay on one line, so all four sit on the same line at the foot of their cards */
.gopt i{white-space:nowrap}
@media (min-width:961px) and (max-width:1180px){.gopt i{font-size:13px;letter-spacing:.07em}}

/* hamburger menu button (X, 8 Oct 2026): three lines that turn into a cross when the menu is open */
.menu{width:46px;height:46px;padding:0;border:0;position:relative;font-size:0}
.menu span{position:absolute;left:10px;right:10px;height:2px;background:#fff;border-radius:1px;
  transition:transform .25s cubic-bezier(.2,.7,.2,1),opacity .2s,top .25s cubic-bezier(.2,.7,.2,1)}
.menu span:nth-child(1){top:15px}.menu span:nth-child(2){top:22px}.menu span:nth-child(3){top:29px}
.menu:hover span,.menu:focus-visible span{background:var(--amber)}
.menu:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.open .menu span:nth-child(1){top:22px;transform:rotate(45deg)}
.open .menu span:nth-child(2){opacity:0}
.open .menu span:nth-child(3){top:22px;transform:rotate(-45deg)}
/* menu links and the menu button sit in the vertical middle of the header (X, 8 Oct 2026: "centre it") */
@media (max-width:960px){.menu{margin-right:-10px}}