@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
:root{
  --ink:#1c2024; --ink2:#3a4047; --muted:#6b7280; --muted2:#9aa1aa;
  --line:#e7e9ec; --line2:#eef0f2; --bg:#fff; --bg2:#f6f7f8; --bg3:#eceef0;
  --red:#E11B22; --red2:#b3141a; --steel:#23262B; --steel2:#1b1e22;
  --metal:#eceef0; --stroke:#2b2f36;
}
*{box-sizing:border-box;margin:0;padding:0;}
body{background:#dcdcd6;font-family:'Poppins',-apple-system,"Segoe UI",sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased;padding:26px;font-size:15px;line-height:1.6;}
.win{max-width:1280px;margin:0 auto;border-radius:14px;overflow:hidden;box-shadow:0 22px 60px rgba(0,0,0,.26);background:#fff;}
.chrome{display:flex;align-items:center;gap:8px;padding:11px 16px;background:#e9eaec;border-bottom:1px solid #d7d8da;}
.tl{width:12px;height:12px;border-radius:50%;}
.url{margin-left:10px;font-size:13px;color:#5b6066;background:#fff;border:1px solid #d9dadd;border-radius:7px;padding:5px 18px;}
a{text-decoration:none;color:inherit;}
.wrap{max-width:1180px;margin:0 auto;padding:0 36px;}

.hd{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 2px 14px rgba(0,0,0,.05);}
.hd-in{max-width:1180px;margin:0 auto;padding:0 36px;height:74px;display:flex;align-items:center;justify-content:space-between;}
/* flex:0 0 auto — a squeezed header used to shrink the brand mark itself (276px
   down to 122px between 821 and 1040px) and let a wrapped nav label butt into it */
.logo{display:flex;align-items:center;gap:11px;flex:0 0 auto;}
.lmark{height:36px;min-width:36px;padding:0 9px;border-radius:8px;background:var(--red);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;letter-spacing:1px;}
.lname{font-weight:700;font-size:17px;letter-spacing:-.2px;color:var(--ink);line-height:1.1;}
.lsub{font-size:10px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;}
.nav{display:flex;align-items:center;gap:30px;}
.nav-item{position:relative;font-size:14.5px;font-weight:500;color:var(--ink2);display:flex;align-items:center;gap:5px;cursor:pointer;padding:26px 0;}
/* a nav label must never wrap onto a second line — that is what painted "Product
   types" across the wordmark. Scoped to the top row so the mega-menu copy inside
   .menu (which has multi-line <small> descriptions) still wraps normally. */
.nav>.nav-item{white-space:nowrap;}
.nav>.nav-item .menu{white-space:normal;}
.nav-item:focus-visible{outline:2px solid var(--red);outline-offset:2px;border-radius:4px;}
.nav-item .car{width:9px;height:9px;border-right:2px solid var(--muted2);border-bottom:2px solid var(--muted2);transform:rotate(45deg);margin-top:-3px;}
.nav-right{display:flex;align-items:center;gap:18px;}
.navsearch{display:none}
/* overflow:hidden keeps a typed query inside the pill — the injected .search-inp
   was a fixed 150px inside a 150px pill that also holds the icon and padding, so
   the text ran out past the rounded border and under the red Contact button */
.search{display:flex;align-items:center;gap:8px;background:var(--bg2);border:1px solid var(--line);border-radius:20px;padding:7px 14px;color:var(--muted2);font-size:13px;width:186px;overflow:hidden;}
/* justify-content + text-align: <button class=btn> got the browser's default
   centering and <a class=btn> did not, so a label that wrapped (only happens at
   phone widths) came out centered on one and left-aligned on the other */
.btn{font-family:inherit;display:inline-flex;align-items:center;justify-content:center;text-align:center;gap:8px;background:var(--red);color:#fff;font-weight:600;font-size:14px;padding:11px 22px;border-radius:7px;cursor:pointer;border:0;}
.btn.dark{background:var(--steel);}
.btn.outline{background:#fff;border:1.5px solid var(--line);color:var(--ink);}

.btn.lg{font-size:15px;padding:13px 26px;}
.btn.sm{font-size:13px;padding:8px 16px;}

.menu{position:absolute;top:72px;left:50%;transform:translateX(-50%);background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 18px 50px rgba(0,0,0,.16);padding:18px;display:none;}
.nav-item.open .menu{display:block;}
/* hover-open only on real pointer devices — on touch, :hover sticks and fights the tap-toggle */
/* focus-within keeps the mega-menu reachable by keyboard: _nav.js makes the div
   trigger a tab stop, and this opens the panel on Tab alone (Enter/Space still
   toggle .open). Without it the menu opened on :hover only — mouse users only. */
@media (hover:hover){.nav-item:hover .menu,.nav-item:focus-within .menu{display:block;}}
.menu.wide{width:520px;}
.menu-cols{display:grid;grid-template-columns:1fr 1fr;gap:8px 26px;}
.menu-h{font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--red);padding:4px 10px 8px;}
.menu a{display:block;padding:8px 10px;border-radius:8px;color:var(--ink);font-size:14px;font-weight:500;}
.menu a small{display:block;font-size:11.5px;color:var(--muted);font-weight:400;margin-top:1px;}
.menu a:hover{background:var(--bg2);}

.hero2{background:var(--bg2);border-bottom:1px solid var(--line);}
.hero2 .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;padding:64px 36px;}
.kick{font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--red);font-weight:600;margin-bottom:16px;}
.hx{font-size:44px;line-height:1.1;font-weight:600;letter-spacing:-1px;color:var(--ink);}
.hx .rd{color:var(--red);}
.lead{font-size:15.5px;line-height:1.65;color:var(--muted);margin-top:18px;max-width:500px;}
.hero2 .cta{display:flex;gap:14px;align-items:center;margin-top:26px;}
.hero2 .call{font-size:14px;color:var(--muted);}
.heroimg{border-radius:14px;overflow:hidden;min-height:380px;background:var(--bg3);position:relative;box-shadow:0 14px 40px rgba(0,0,0,.12);}
.heroimg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.guar{display:inline-flex;align-items:center;gap:9px;margin-top:24px;background:#fff;border:1px solid var(--line);border-radius:9px;padding:10px 15px;font-size:13px;color:var(--ink2);}
.guar svg{width:20px;height:20px;color:var(--red);}
.guar b{font-weight:600;}

.bar{background:#fff;border-bottom:1px solid var(--line);}
.bar .wrap{display:grid;grid-template-columns:repeat(4,1fr);}
.bcell{padding:20px 18px;display:flex;gap:12px;align-items:center;border-right:1px solid var(--line);}
.bcell:last-child{border-right:0;}
.bcell svg{width:24px;height:24px;color:var(--red);flex-shrink:0;}
.bcell b{display:block;font-size:14px;font-weight:600;}
.bcell span{font-size:12px;color:var(--muted);}

section{padding:62px 0;}
section.grey{background:var(--bg2);}
.shead{margin-bottom:34px;}
.shead.row{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;}
.center{text-align:center;}
h2{font-size:31px;font-weight:600;letter-spacing:-.5px;color:var(--ink);line-height:1.14;}
.slead{font-size:15px;color:var(--muted);margin-top:10px;max-width:600px;line-height:1.6;}
.center .slead{margin-left:auto;margin-right:auto;}
.slink{font-size:14px;font-weight:600;color:var(--red);white-space:nowrap;}

.ptypes{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.ptypes-c{display:flex;flex-wrap:wrap;justify-content:center;}
.ptypes-c .ptype{flex:0 0 calc((100% - 44px)/3);min-width:0;}
.ptype{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff;transition:.15s;display:flex;flex-direction:column;}
.ptype .pic{height:170px;background:var(--bg3);position:relative;display:flex;align-items:center;justify-content:center;}
.ptype .pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.ptype .pic svg{width:150px;height:96px;position:relative;}
.ptype .tb{padding:20px 22px 22px;flex:1 1 auto;display:flex;flex-direction:column;}
.ptype .nm{font-size:18px;font-weight:600;color:var(--ink);}
.ptype .sl{font-size:13.5px;color:var(--muted);margin-top:6px;line-height:1.5;}
/* margin-top:auto pins the CTA to the bottom of the (already equal-height) card so
   a row of cards has one CTA baseline instead of a ~19px stagger wherever one
   blurb runs a line shorter. padding-top keeps the old 13px minimum breathing room. */
.ptype .go{font-size:13px;font-weight:600;color:var(--red);margin-top:auto;padding-top:13px;display:inline-block;align-self:flex-start;}

.browse-group{margin-bottom:44px;}
.bg-h{display:flex;align-items:center;gap:14px;margin-bottom:22px;}
.bg-h .tag{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:var(--steel);border-radius:5px;padding:5px 11px;}
.bg-h h3{font-size:21px;font-weight:600;color:var(--ink);}
.bg-h .ln{flex:1;height:1px;background:var(--line);}
.pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.pcard{border:1px solid var(--line);border-radius:13px;overflow:hidden;background:#fff;display:flex;flex-direction:column;}
.pcard .pic{position:relative;height:130px;background:linear-gradient(180deg,#fbfcfc,#eef1f2);display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--line2);}
.pcard .pic svg{width:150px;height:92px;}
.pcard .tb{padding:15px 16px 17px;flex:1 1 auto;display:flex;flex-direction:column;}
.pcard .code{font-size:11px;font-weight:600;color:var(--red);letter-spacing:.04em;}
.pcard .nm{font-size:15.5px;font-weight:600;margin-top:3px;}
.pcard .meta{font-size:12px;color:var(--muted);margin-top:5px;}
/* see .ptype .go — same ragged-CTA fix for the catalog grids */
.pcard .go{font-size:12.5px;font-weight:600;color:var(--ink);margin-top:auto;padding-top:11px;display:inline-block;align-self:flex-start;}
/* the card image is a fixed-height band; without flex:0 0 auto it would shrink
   when the flex column runs short of room */
.pcard .pic,.ptype .pic,.artcard .pic{flex:0 0 auto;}

.pd{display:grid;grid-template-columns:300px 1fr 248px;gap:26px;align-items:start;}
/* grid items default to min-width:auto, i.e. they refuse to shrink below their
   content's min-content width. Without this the wide "Sizes & profile" drawing
   (an 840px panel cross-section) pushed the whole middle column out to 842px on a
   390px phone, where .win's overflow-x:clip simply cut the right half off instead
   of letting .prof-big scroll. */
.pd>*{min-width:0;}
.pd-left{background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:22px 20px;}
.pd-render{background:#fff;border:1px solid var(--line);border-radius:10px;height:185px;display:flex;align-items:center;justify-content:center;margin-bottom:18px;}
.pd-render svg{width:190px;height:120px;}
.pd-left .pn{font-size:21px;font-weight:600;letter-spacing:-.3px;}
.pd-left .pc{font-size:12.5px;color:var(--red);font-weight:600;margin-top:2px;}
.pd-left .pt{font-size:12.5px;color:var(--muted);margin-bottom:16px;}
.pd-left .btn{width:100%;justify-content:center;margin-bottom:9px;}
.reslist{margin-top:18px;border-top:1px solid var(--line);padding-top:16px;display:flex;flex-direction:column;gap:13px;}
.reslist a{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--ink2);font-weight:500;}
.reslist a svg{width:17px;height:17px;color:var(--red);}
.tabs{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:16px;}
.tab{font-size:12.5px;font-weight:500;color:var(--ink2);background:var(--bg2);border:1px solid var(--line);border-radius:7px;padding:7px 11px;}
.tab.on{background:var(--steel);color:#fff;border-color:var(--steel);}
.pd-photo{border-radius:13px;overflow:hidden;height:300px;background:var(--bg3);position:relative;}
.pd-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.pd-photo img.render{object-fit:contain;background:#fff;padding:10px;}
.pd-photo.rphoto{height:380px;background:#fff;border:1px solid var(--line,#e6e2da);}
.pd-photo.rphoto .cap{background:linear-gradient(180deg,transparent,rgba(255,255,255,.92) 55%);color:#2b2f36;}
.pd-photo .cap{position:absolute;left:0;bottom:0;padding:24px 16px 12px;color:#fff;font-size:13px;font-weight:500;background:linear-gradient(180deg,transparent,rgba(0,0,0,.7));right:0;}
.featlist{display:grid;grid-template-columns:1fr 1fr;gap:11px 24px;margin-top:24px;}
.feat{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--ink2);font-weight:500;line-height:1.4;}
.feat svg{width:18px;height:18px;color:var(--red);flex-shrink:0;margin-top:1px;}
.pd-desc{margin-top:24px;font-size:14px;line-height:1.7;color:var(--ink2);}
.spectable{margin-top:22px;border:1px solid var(--line);border-radius:11px;overflow:hidden;}
/* Two real columns with a real gutter. This was a bare space-between flex row with
   gap:normal, so the moment a value grew long enough to eat the free space the bold
   label and the value butted together with 0px between them and read as one word —
   "Pitch4/12 as sold online", "Bend55° standard online", "FitsStyle A box gutter".
   The gap is now structural, so it survives any future long SPECS value. */
.spectable .r{display:flex;justify-content:space-between;align-items:baseline;gap:18px;padding:11px 16px;font-size:13.5px;border-bottom:1px solid var(--line2);}
.spectable .r:last-child{border-bottom:0;}
.spectable .r:nth-child(odd){background:var(--bg2);}
.spectable .r b{font-weight:600;color:var(--ink);flex:0 1 auto;min-width:0;max-width:46%;}
.spectable .r span{color:var(--muted);flex:1 1 auto;min-width:0;text-align:right;overflow-wrap:anywhere;}
.pd-right{display:flex;flex-direction:column;gap:18px;}
.rr{border:1px solid var(--line);border-radius:12px;padding:16px 17px;}
.rr h4{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:12px;}
.rr a{display:block;font-size:13.5px;font-weight:500;color:var(--ink);padding:7px 0;border-bottom:1px solid var(--line2);}
.rr a:last-child{border-bottom:0;}
.rr .news{font-size:13px;color:var(--ink2);padding:8px 0;border-bottom:1px solid var(--line2);line-height:1.4;}
/* --muted2 (#9aa1aa) is 2.61:1 on white — decorative only. Text uses --muted (4.83:1). */
.rr .news span{display:block;font-size:11px;color:var(--muted);margin-top:2px;}
.takeoff-box{background:var(--steel);color:#fff;border-radius:12px;padding:20px 18px;}
.takeoff-box .ic{width:34px;height:34px;border-radius:8px;background:var(--red);display:flex;align-items:center;justify-content:center;margin-bottom:12px;}
.takeoff-box .ic svg{width:19px;height:19px;color:#fff;}
.takeoff-box h4{font-size:16px;font-weight:600;color:#fff;margin-bottom:7px;}
.takeoff-box p{font-size:12.5px;color:#bcc2c9;line-height:1.5;margin-bottom:14px;}
/* full-width button belongs to the NARROW product-page sidebar box only — colors2
   reuses .takeoff-box as a wide flex banner, where width:100% made a 710px slab */
.pd-right .takeoff-box .btn{width:100%;justify-content:center;}

.phero{background:var(--steel);color:#fff;}
.phero .wrap{padding:40px 36px 44px;}
.crumb{font-size:12.5px;color:#8a919a;margin-bottom:14px;}
.crumb a{color:#c9d0d8;text-decoration:underline;text-underline-offset:2px;}
.crumb a:hover{color:var(--red);text-decoration:underline;}
.crumb .sep{padding:0 8px;}
.phero h1{font-size:34px;font-weight:600;letter-spacing:-.5px;margin-bottom:12px;}
.phero .intro{font-size:15px;color:#c3c9d0;max-width:720px;line-height:1.6;}

.form-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:30px 32px;}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:15px 16px;}
.fld{display:flex;flex-direction:column;}
.fld.full{grid-column:1/-1;}
.fld label{font-size:12px;font-weight:500;color:var(--ink2);margin-bottom:6px;}
.fld label .req{color:var(--red);}
.inp{height:42px;border:1px solid #d9dbde;border-radius:8px;background:#fcfcfd;padding:0 13px;font-size:13.5px;color:var(--muted);display:flex;align-items:center;}
.inp.ta{height:92px;align-items:flex-start;padding-top:11px;}
.dz{grid-column:1/-1;border:1.5px dashed #c9cbcf;border-radius:10px;background:var(--bg2);padding:24px;text-align:center;color:var(--muted);font-size:13px;}
.dz svg{width:24px;height:24px;color:var(--red);}
.dz b{color:var(--ink);font-weight:600;}
.fact{margin-top:18px;display:flex;align-items:center;gap:15px;}
/* the form submit is a flex item next to the "we'll get back to you" note, so it
   was shrinking and wrapping its own label ("Request my / takeoff" in a 178x72
   block on /takeoff2). /customfab2 only escaped because its button carries an
   inline white-space:nowrap. */
.fact .btn{flex:0 0 auto;white-space:nowrap;}
.fact .note{font-size:12.5px;color:var(--muted);}

.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.step{background:#fff;border:1px solid var(--line);border-radius:13px;padding:24px 22px;}
.step .n{width:34px;height:34px;border-radius:8px;background:var(--red);color:#fff;font-weight:600;display:flex;align-items:center;justify-content:center;margin-bottom:14px;}
.step h3{font-size:16px;font-weight:600;margin-bottom:6px;}
.step p{font-size:13px;color:var(--muted);line-height:1.55;}

.fcta{background:var(--red);color:#fff;}
.fcta .wrap{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:42px 36px;}
.fcta h2{color:#fff;}
.fcta p{color:#ffd9da;font-size:14.5px;margin-top:6px;}
.fcta .btn{background:#fff;color:var(--red);}

footer{background:#fff;border-top:1px solid var(--line);}
footer .wrap{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:30px;padding:50px 36px 28px;}
footer .fa{font-size:13px;line-height:1.6;color:var(--muted);max-width:270px;margin-top:13px;}
footer h4{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink);margin-bottom:13px;font-weight:600;}
footer a{display:block;font-size:13.5px;color:var(--muted);margin-bottom:9px;}
.fbar{border-top:1px solid var(--line);}
.fbar a{display:inline}
.fbar .wrap{display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:space-between;align-items:baseline;padding:16px 36px;font-size:12px;color:var(--muted);}
.fbar .wrap>span{display:inline}
.swgrid{display:grid;grid-template-columns:repeat(8,1fr);gap:14px;}
.swgrid.g6{grid-template-columns:repeat(6,1fr);}
.sw .chip{height:60px;border-radius:9px;border:1px solid rgba(0,0,0,.12);}
.sw .nm2{font-size:12px;color:var(--muted);margin-top:7px;text-align:center;}
.sw .pr{font-size:10.5px;color:var(--red);text-align:center;font-weight:600;margin-top:1px;}
.dlcard{border:1px solid var(--line);border-radius:12px;padding:15px 18px;display:flex;justify-content:space-between;align-items:center;gap:14px;background:#fff;margin-bottom:11px;text-decoration:none;color:inherit;transition:border-color .15s,box-shadow .15s;}
a.dlcard:hover{border-color:var(--red);box-shadow:0 6px 18px rgba(0,0,0,.06);}
.dlcard .t{font-size:14.5px;font-weight:600;color:var(--ink);}
.dlcard .s{font-size:12.5px;color:var(--muted);margin-top:2px;}
.dlcard a,.dlcard .dllink{font-size:13px;font-weight:600;color:var(--red);white-space:nowrap;display:inline-flex;align-items:center;gap:6px;}
.logos{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.logobox{border:1px solid var(--line);border-radius:12px;height:92px;display:flex;align-items:center;justify-content:center;color:var(--muted2);font-weight:600;background:var(--bg2);text-align:center;font-size:14px;padding:10px;}
.split2{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;}
.bio2{border:1px solid var(--line);border-radius:14px;padding:22px;background:#fff;}
.map2{border:1px solid var(--line);border-radius:14px;background:var(--bg3);min-height:300px;display:flex;align-items:center;justify-content:center;color:var(--muted2);}
.checkrow{display:grid;grid-template-columns:1fr 1fr;gap:11px 24px;}
.crk{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--ink2);line-height:1.4;}
.crk svg{width:18px;height:18px;color:var(--red);flex-shrink:0;margin-top:2px;}
.artcard{border:1px solid var(--line);border-radius:13px;overflow:hidden;background:#fff;display:flex;flex-direction:column;}
.artcard .pic{height:150px;background:var(--bg3);position:relative;}
.artcard .pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.artcard .tb{padding:16px 18px 18px;flex:1 1 auto;display:flex;flex-direction:column;}
/* the blog / resources cards carry an inline margin-top on the CTA, so !important
   is the only way to pin it to the bottom from the stylesheet */
.artcard .go{margin-top:auto!important;padding-top:13px;align-self:flex-start;}
.artcard .dt{font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;}
.artcard .at{font-size:16px;font-weight:600;margin-top:5px;line-height:1.3;}
.artcard .ex{font-size:13px;color:var(--muted);margin-top:7px;line-height:1.5;}
.hcap{position:absolute;left:14px;bottom:14px;background:rgba(0,0,0,.55);color:#fff;font-size:12.5px;font-weight:500;padding:7px 13px;border-radius:8px;}

/* ================= PRODUCTION FRAME + RESPONSIVE (Sanders Sheet Metal) ================= */
/* Turn the framed mockup into a real, full-width website */
html{overflow-x:clip;}
body{background:#fff;padding:0;overflow-x:clip;}
/* overflow MUST be reset to visible here. The mockup rule above sets
   overflow:hidden, and overflow-x:clip alone left overflow-y:hidden standing —
   which makes .win a scroll container, which silently kills position:sticky on the
   header it wraps (the header reported position:sticky but rect.top of -1800 after
   scrolling, on every page). overflow-x:clip + overflow-y:visible is a legal pair
   and is NOT a scroll container, so sideways bleed is still clipped and the sticky
   header now sticks to the viewport. */
.win{max-width:none;border-radius:0;box-shadow:none;overflow:visible;overflow-x:clip;}
.chrome{display:none;}
img{max-width:100%;}
/* fluid type — scales smoothly across every screen size instead of jumping at breakpoints */
.hx{font-size:clamp(28px,6.4vw,44px);}
h2{font-size:clamp(22px,4.6vw,31px);}
.phero h1{font-size:clamp(26px,6vw,44px);}
.lead{font-size:clamp(14.5px,1.6vw,15.5px);}

/* Mobile menu button (hidden on desktop) */
.navtoggle{display:none;width:44px;height:44px;border:1px solid var(--line);border-radius:9px;background:#fff;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:0;}
.navtoggle span{display:block;width:20px;height:2px;background:var(--ink);border-radius:2px;}
.navback{display:none;}
.navhead,.navfoot{display:none;}

/* the widened pill (186px) is a desktop luxury — hand the width back to the nav row
   just above the hamburger breakpoint, where the header has the least slack */
@media (max-width:1200px){
  .nav-right .search{width:150px;}
}

@media (max-width:1000px){
  .wrap{padding:0 24px;}
  .hd-in{padding:0 24px;}
  .hero2 .wrap{grid-template-columns:1fr;gap:28px;padding:44px 24px;}
  .hx{font-size:38px;}
  .heroimg{min-height:280px;}
  .ptypes{grid-template-columns:repeat(2,1fr);}
  .ptypes-c .ptype{flex-basis:calc((100% - 22px)/2);}
  .pgrid{grid-template-columns:repeat(2,1fr);}
  .pd{grid-template-columns:1fr!important;}
  /* the identity block (render + name + part code + price box) leads on phones —
     ordering it after the tab column buried the price ~1.8 viewports down */
  .pd-left{order:0;}
  .pd-right{order:3;}
  footer .wrap{grid-template-columns:1fr 1fr;}
  .logos{grid-template-columns:repeat(3,1fr);}
  .swgrid,.swgrid.g6{grid-template-columns:repeat(4,1fr);}
  .split2{grid-template-columns:1fr!important;}
  /* dark CTA banners + any inline 2-col grid stack full-width so text isn't squeezed to a sliver */
  .takeoff-box{grid-template-columns:1fr!important;gap:20px!important;text-align:left;}
  .takeoff-box .btn{width:100%;justify-content:center;}
  .menu.wide{width:460px;}
}

/* ---- mobile nav breakpoint ----------------------------------------------
   1060px, NOT 820px. The desktop row (logo + 4 nav labels + search pill +
   Contact) needs ~1060px of viewport before it has comfortable gutters — at 1041
   it was down to 3px of slack. Between 821 and 1040 it ran out of room and the
   header collided with itself: the wordmark shrank, "Product types" wrapped to
   two lines and butted flush against "SANDERS SHEET METAL", and "Company" was
   overrun by the Search pill. Verified clean now at 830 / 900 / 1024 (iPad Pro
   portrait) and unchanged at 1100 / 1366.
   Keep this number in sync with NAVBP in public/_nav.js. */
@media (max-width:1060px){
  .navtoggle{display:flex;}
  .nav{position:fixed;top:0;right:-105%;height:100vh;width:min(340px,88vw);background:#fff;flex-direction:column;align-items:stretch;gap:0;padding:16px 12px 24px;box-shadow:-14px 0 50px rgba(0,0,0,.2);transition:right .25s ease;overflow-y:auto;z-index:60;}
  .navhead{display:flex;align-items:center;justify-content:space-between;padding:2px 4px 14px;margin-bottom:4px;border-bottom:1px solid var(--line2);}
  .navhead .logo img{height:30px!important;width:auto;display:block;}
  .navclose{width:40px;height:40px;border:1px solid var(--line);border-radius:10px;background:#fff;font-size:19px;line-height:1;color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;}
  .navfoot{display:block;margin-top:16px;padding:16px 4px 4px;border-top:1px solid var(--line2);}
  .navfoot .btn{width:100%;justify-content:center;padding:13px;font-size:15px;}
  .navfoot .navcall{text-align:center;font-size:13.5px;color:var(--muted);margin-top:11px;}
  .navfoot .navcall b{color:var(--ink);font-weight:600;}
  body.navopen .nav{right:0;}
  /* the closed panel is only parked off-screen at right:-105% — without this its
     ~6 focusable children (logo, close, search, Contact us, direct links) stay in
     the tab order with the focus ring invisible. Visibility is delayed on close so
     the slide-out still animates. */
  body:not(.navopen) .nav{visibility:hidden;transition:right .25s ease,visibility 0s linear .25s;}
  body.navopen{overflow:hidden;}
  /* display:block: the desktop rule sets display:flex, which made the expanded
     dropdown a flex SIBLING of its label instead of stacking beneath it */
  .nav-item{display:block;padding:0;font-size:16px;border-bottom:1px solid var(--line2);cursor:pointer;position:relative;}
  .nav-item>a{padding:15px 6px;display:block;font-weight:600;}
  .nav-item:not(:has(>a)){padding:15px 40px 15px 6px;font-weight:600;}
  .nav-item>.car{position:absolute;right:10px;top:21px;transition:transform .2s ease;}
  .nav-item.open>.car{transform:rotate(-135deg);top:24px;}
  .menu.wide{width:auto;}
  .menu{position:static;transform:none;border:0;box-shadow:none;padding:2px 0 12px 6px;border-radius:0;}
  .menu-cols{grid-template-columns:1fr;gap:0;}
  .menu-h{padding:12px 8px 4px;}
  .menu a{padding:9px 8px;}
  /* the search pill moves into the slide-in menu on phones instead of
     disappearing -- it used to vanish with no replacement under 820px */
  .nav-right .search{display:none;}
  .navsearch{display:block;padding:14px 20px 4px;}
  .navsearch .search{width:100%;box-sizing:border-box;}
  .navsearch .search .search-inp{width:100%;}
  .nav-right{gap:10px;}
  .navback{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:55;}
  body.navopen .navback{display:block;}
  .nav-item>a[href]{font-weight:600;}
  /* the in-menu pill is the only search a collapsed-nav viewport can reach, and it
     is the one control that must not trigger iOS's focus-zoom (see the guard at
     the foot of this file, which stays at 820px so small laptops keep 13.5px form text) */
  .navsearch .search,.navsearch .search .search-inp{font-size:16px;}
  /* a 44px tap target flush against the wordmark reads as an overlap — measured
     gap was 0px at both 390px and 360px, the two most common phone widths */
  .navtoggle{flex:0 0 auto;margin-left:14px;}
  /* the logo is flex:0 0 auto site-wide so a squeezed desktop header can't shrink
     the brand mark — but a phone genuinely has to give, or the Contact button gets
     pushed off the right edge (measured clipped at 320px and 360px). Let it shrink
     here; the margin above is what guarantees the gap now, not the logo's width. */
  .hd-in .logo{flex:0 1 auto;min-width:0;}
  .hd-in .nav-right{flex:0 0 auto;}
  .hd-in .lname,.hd-in .lsub{overflow-wrap:anywhere;}
}

@media (max-width:640px){
  .hd-in{height:64px;}
  .hd-in .logo img{height:30px!important;}
  .hd-in .nav-right{gap:9px;}
  .hd-in .nav-right>.btn{padding:8px 15px;font-size:13px;}
  .lname{font-size:15px;}
  .hx{font-size:29px;letter-spacing:-.5px;}
  .lead{font-size:15px;}
  .bar .wrap{grid-template-columns:1fr 1fr;}
  .bcell{border-right:0;border-bottom:1px solid var(--line);padding:16px 16px;}
  .bcell:nth-child(odd){border-right:1px solid var(--line);}
  .ptypes{grid-template-columns:1fr;}
  .ptypes-c .ptype{flex-basis:100%;}
  .pgrid{grid-template-columns:1fr 1fr;gap:12px;}
  h2{font-size:25px;}
  .phero h1{font-size:26px;}
  .phero .wrap{padding:30px 24px 32px;}
  section{padding:44px 0;}
  .shead.row{flex-direction:column;align-items:flex-start;gap:10px;}
  .featlist,.fgrid,.checkrow{grid-template-columns:1fr!important;}
  .steps{grid-template-columns:1fr;}
  .fcta .wrap{flex-direction:column;align-items:flex-start;text-align:left;padding:34px 24px;gap:16px;}
  footer .wrap{grid-template-columns:1fr 1fr;gap:24px 20px;padding:40px 24px 24px;}
  /* 22px rows on a 31px pitch were under the 44px tap guideline (and under WCAG
     2.5.8's 24px floor); padding keeps the visual rhythm and lifts the row height */
  footer .wrap a:not(.logo){padding:9px 0;margin-bottom:0;}
  footer .wrap a[href^="tel:"]{padding:11px 0;}
  .fbar .wrap{flex-direction:column;gap:6px;text-align:center;align-items:center;}
  .swgrid,.swgrid.g6{grid-template-columns:repeat(3,1fr);}
  .logos{grid-template-columns:repeat(2,1fr);}
  .form-card{padding:22px 20px;}
  .fgrid{grid-template-columns:1fr;}
  .hero2 .cta{flex-direction:column;align-items:stretch;}
  .hero2 .cta .btn{justify-content:center;}
  .fact{flex-wrap:wrap;}
  .menu-cols{grid-template-columns:1fr;}
  /* /colors2 reuses .takeoff-box as a wide banner with an INLINE display:flex, so
     the grid-template-columns:1fr!important rule at <=1000px could not stack it —
     it kept the copy squeezed into ~55% of a 390px screen with the button crammed
     alongside. Every other dark CTA band on the site stacks on a phone. */
  .takeoff-box{flex-direction:column!important;align-items:stretch!important;}
}

@media (max-width:420px){
  /* scale the wordmark down on the narrowest phones so it stops fighting the
     hamburger for room — at 320px the full-size mark pushed Contact off-screen */
  .hd-in .lname{font-size:13.5px;}
  .hd-in .lsub{font-size:9px;letter-spacing:.06em;}
  .hd-in .lmark{height:30px;min-width:30px;padding:0 7px;font-size:13px;}
  .hd-in .logo{gap:8px;}
  .pgrid{grid-template-columns:1fr;}
  .bar .wrap{grid-template-columns:1fr;}
  .bcell,.bcell:nth-child(odd){border-right:0;}
  .swgrid,.swgrid.g6{grid-template-columns:repeat(2,1fr);}
  footer .wrap{grid-template-columns:1fr;}
  .wrap{padding:0 18px;}
  .hd-in{padding:0 18px;}
}

/* below ~350px the tagline is what tips the wordmark into a third line — drop it
   rather than let the header grow a whole row taller (360px keeps it) */
@media (max-width:344px){
  .hd-in .lsub{display:none;}
}

/* ---- real form controls (wired quote/takeoff forms) ---- */
input.inp,select.inp,textarea.inp{width:100%;font-family:inherit;color:var(--ink);-webkit-appearance:none;appearance:none;outline:none;transition:border-color .15s,box-shadow .15s;}
input.inp::placeholder,textarea.inp::placeholder{color:var(--muted);}
textarea.inp{display:block;height:110px;line-height:1.5;padding:11px 13px;resize:vertical;}
select.inp{cursor:pointer;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7076' stroke-width='2.4'><path d='M6 9l6 6 6-6'/></svg>");background-repeat:no-repeat;background-position:right 12px center;padding-right:34px;}
.inp:focus{border-color:var(--red);box-shadow:0 0 0 3px rgba(210,35,42,.13);background:#fff;}
.inp.err{border-color:var(--red);background:#fff7f7;}
/* per-field error text (written by _form.js) — the red border alone communicated
   failure by color only */
.fld-err{font-size:12px;font-weight:600;color:#b32020;margin-top:5px;line-height:1.4;}
.chk{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--ink2);line-height:1.4;cursor:pointer;}
.chk input{width:17px;height:17px;margin-top:1px;accent-color:var(--red);flex-shrink:0;cursor:pointer;}
.form-msg{grid-column:1/-1;display:none;border-radius:9px;padding:13px 15px;font-size:13.5px;line-height:1.5;margin-bottom:2px;}
.form-msg.show{display:block;}
.form-msg.ok{background:#eef8f0;border:1px solid #bfe2c6;color:#1f7a37;}
.form-msg.bad{background:#fdecec;border:1px solid #f2c2c2;color:#b32020;}
.btn[disabled]{opacity:.6;cursor:default;}
.fileinfo{grid-column:1/-1;font-size:12.5px;color:var(--muted);margin-top:-4px;}
label.dz{cursor:pointer;display:block;}
label.dz input[type=file]{display:none;}

/* swapped-in product photos fill the render box */
.pd-render{position:relative;overflow:hidden;}
.pd-render img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}

/* clip repositioned/zoomed photos to their frames */
.pic,.heroimg,.pd-render{overflow:hidden;}

/* product tabs */
.tab{cursor:pointer;user-select:none}
.tabpanel{display:none}
.tabpanel.on{display:block}
.tab-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.prof-big{background:#fff;border:1px solid var(--line);border-radius:12px;padding:22px;margin-bottom:16px;display:flex;justify-content:center}
.prof-big svg,.prof-big img{width:100%;max-width:430px;height:auto}
/* ---- "Sizes & profile" drawing on phones ----
   The dimensioned drawing is the only place a customer can read the actual sizes,
   and it was being squeezed into a ~310px card (22px padding inside an 18px-padded
   wrap). The wide panel profiles carry an 840px viewBox with 8.5px labels, so they
   scaled down to 4-5px CSS — coloured smudges, unreadable even zoomed 4x.
   Below 480px the drawing now takes the full card width, and any drawing whose own
   authored width is wider than that renders at 1:1 and scrolls sideways instead of
   shrinking its labels into illegibility.
   NOTE: this roughly doubles the worst offenders (pbr36/ram36/corr34 go from ~4.2px
   to their authored 8.5px). Getting them to the 11px target needs the SVGs
   regenerated with a viewport-aware font-size — that is /img/profiles/*.svg +
   tools/gen_profile_svgs.py, not this file. */
@media (max-width:480px){
  .prof-big{padding:14px 0;justify-content:flex-start;overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
  .prof-big svg,.prof-big img{flex:0 0 auto;width:auto;min-width:100%;max-width:none;height:auto}
  .prof-cap{padding:0 4px}
}
.prof-cap{font-size:12.5px;color:var(--muted);line-height:1.55;margin:-6px 0 18px;text-align:center;max-width:460px}

/* box gutter style grid */
.bgstyles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-bottom:18px}
.bgstyles figure{margin:0;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff}
.bgstyles .bgs-img{padding:12px;display:flex;align-items:center;justify-content:center;min-height:120px}
.bgstyles .bgs-img img{width:100%;height:auto;display:block}
.bgstyles figcaption{padding:7px 10px;border-top:1px solid var(--line2);font-size:12.5px;font-weight:600;color:var(--ink);background:var(--bg2);text-align:center}

.pic>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* ---- catalog price / CTA box (product pages) ---- */
.pricebox{border:1px solid var(--line);border-radius:12px;padding:21px 16px 17px;margin:4px 0 14px;background:linear-gradient(180deg,#fff,#fafbfc)}
.pb-price{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;justify-content:center;text-align:center}
.pb-lead{font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.pb-amt{font-size:15px;font-weight:600;color:var(--ink);letter-spacing:-.2px;line-height:1}
.pb-unit{font-size:13px;color:var(--muted)}
.pb-sub{font-size:12.5px;color:var(--muted);margin-top:6px;text-align:center}
.pb-mtag{color:var(--ink2);font-weight:600}
.pb-opt{margin-top:9px}
.pb-opt label{display:block;font-size:12px;font-weight:600;color:var(--ink2);margin-bottom:5px}

.pb-opt select{width:100%;padding:8px 32px 8px 11px;border:1px solid var(--line);border-radius:8px;font-family:inherit;font-size:13.5px;color:var(--ink);background:#fff;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7076' stroke-width='2.4'><path d='M6 9l6 6 6-6'/></svg>");background-repeat:no-repeat;background-position:right 11px center}
.pb-invite{font-size:12.5px;line-height:1.45;color:var(--ink2);margin:10px 0 9px;padding:1px 0 1px 10px;border-left:3px solid var(--red)}
.pricebox .btn.pb-quote{width:100%;justify-content:center;font-size:14px;padding:10px 18px}
.callbtn{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;margin-top:9px;padding:10px 10px;border-radius:7px;border:1.5px solid var(--red);color:var(--red);font-weight:700;font-size:14px;background:#fff;white-space:nowrap}
.callbtn svg{width:15px;height:15px;flex:0 0 auto}
.callbtn:hover{background:#fff5f5}
.pb-buy{display:block;width:100%;margin-top:9px;background:#fff;border:1px solid var(--line);color:var(--ink2);font-size:12.5px;font-weight:600;padding:9px;border-radius:7px;cursor:pointer;font-family:inherit}
.pb-buy:hover{border-color:var(--muted2);color:var(--ink)}
a.news{display:block;color:inherit;text-decoration:none}
a.news:hover{color:var(--red)}
.pb-note{margin-top:9px;font-size:12.5px;line-height:1.5;color:var(--ink2);background:var(--bg2);border:1px solid var(--line);border-radius:8px;padding:9px 11px}
/* quote-only variant */
.pricebox.quote{background:#fff}
.pb-qh{font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--red);font-weight:700;margin-bottom:5px}
.pb-qt{font-size:19px;font-weight:600;color:var(--ink);letter-spacing:-.3px;line-height:1.2;margin-bottom:6px}
.pb-qp{font-size:13px;line-height:1.55;color:var(--muted);margin-bottom:13px}
/* category-card price chip */
.pchip{display:inline-block;font-size:12px;font-weight:600;color:var(--ink);background:var(--bg2);border:1px solid var(--line);border-radius:20px;padding:3px 11px;margin:1px 0 9px}
.pchip.quote{color:var(--red);background:#fff5f5;border-color:#f4d0d1}
/* chimney priority call/quote band */
.callband{background:var(--steel);color:#fff}
.callband .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 36px;flex-wrap:wrap}
.callband .cbl{font-size:15px;font-weight:500;color:#e9eaec}
.callband .cbl b{color:#fff;font-weight:600}
.callband .cbr{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.callband .cbtel{display:inline-flex;align-items:center;gap:8px;font-size:20px;font-weight:700;color:#fff}
.callband .cbtel svg{width:19px;height:19px}
@media(max-width:640px){.callband .cbtel{font-size:18px;padding:8px 0}.callband .wrap{padding:16px 22px}}

.bgstyles figure{cursor:zoom-in}
.bgstyles figure:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.bgs-ovl{position:fixed;inset:0;z-index:400;background:rgba(20,22,26,.55);display:none;align-items:center;justify-content:center;padding:28px}
.bgs-ovl.on{display:flex}
.bgs-ovl .card{background:#fff;border-radius:14px;max-width:620px;width:100%;padding:26px;position:relative;box-shadow:0 24px 70px rgba(0,0,0,.3)}
.bgs-ovl .card svg,.bgs-ovl .card img{width:100%;height:auto;max-height:68vh;display:block}
.bgs-ovl .ttl{font-weight:600;font-size:15px;margin-bottom:14px;padding-right:30px}
.bgs-ovl .x{position:absolute;top:10px;right:14px;border:0;background:none;font-size:24px;line-height:1;cursor:pointer;color:var(--muted)}

.prof-big img.tall{width:auto;max-width:100%;max-height:420px;display:block;margin:0 auto}
/* must sit AFTER the rule above (same specificity) so the phone override wins.
   Tall drawings are height-bound, not width-bound — they stay centred and whole
   instead of being stretched to min-width:100% by the <=480px rule. */
@media (max-width:480px){
  .prof-big img.tall{min-width:0;width:auto;max-width:100%;max-height:60vh;margin:0 auto}
}

/* Sanders standard spec block (product left rail) */
.stdspec{margin:10px 0 12px;border:1px solid var(--line);border-radius:10px;padding:12px 14px;background:#fafbfc}
.stdspec .ssh{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--red);margin-bottom:4px}
.stdspec .spectable{margin:0}
.stdspec .ssn{font-size:12px;color:var(--muted);margin-top:8px;line-height:1.5}

/* ---- iOS focus-zoom guard ----
   Any control under 16px makes iOS Safari zoom the viewport in on focus and leave
   it zoomed after blur (the pages ship initial-scale=1 with no maximum-scale, so
   nothing suppresses it). Placed last so it beats the later 13.5px declarations
   in .pb-opt select / .inp rather than losing on source order. */
@media (max-width:820px){
  input.inp,select.inp,textarea.inp,.pb-opt select,.cal input{font-size:16px;}
  /* the in-menu search pill is the only search input phones can reach */
  .navsearch .search,.navsearch .search .search-inp{font-size:16px;}
}

/* /contractors2's "What do you install?" placeholder is 109 characters — the
   longest on the site — and its last line ("how much metal you buy.") was sliced
   in half by the 110px box, with a scrollbar appearing inside an empty field. The
   16px guard directly above makes the text taller still, so this has to sit after
   BOTH the 110px base rule and that guard to win on source order. */
@media (max-width:640px){
  textarea.inp{height:138px;}
}

@media (max-width:560px){.dlcard{flex-direction:column;align-items:flex-start;gap:10px}}