/* XKR trade-site stylesheet — mirrors xkrelectrical.com: dark navy field, red-ruled header,
   extended-black display headings, coral pill buttons, red-topped navy cards. */
@font-face{font-family:'Archivo';src:url(../fonts/archivo.woff2) format('woff2');font-weight:100 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:'Public Sans';src:url(../fonts/publicsans.woff2) format('woff2');font-weight:100 900;font-display:swap}
:root{--navy:#111B2E;--header:#0c1424;--card:#17243C;--card-line:#304468;--deep:#0b101d;--panel:#101828;--red:#BE1E2D;--coral:#E34F5D;--slate:#4D5462;--steel:#ACAFB6;--pale:#BECDE4;--white:#fff}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--navy);color:var(--white);font-family:'Public Sans',Arial,sans-serif;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
.disp,h1,h2,h3.disp{font-family:'Archivo',Arial,sans-serif;font-stretch:125%;font-weight:900;text-transform:uppercase;letter-spacing:0;line-height:1.02}
.skip{position:absolute;left:-999px;top:0;background:var(--coral);color:var(--navy);padding:8px 14px;z-index:200}
.skip:focus{left:8px}
/* header */
.hdr{position:sticky;top:0;z-index:100;background:var(--header);border-bottom:1px solid var(--red);height:78px;display:flex;align-items:center;padding:0 36px;gap:56px}
.hdr .logo img{height:30px;width:auto}
.nav{display:flex;align-items:center;gap:0;margin:0;padding:0;list-style:none}
.nav>li{position:relative}
.nav>li>a{display:block;padding:0 24px;line-height:78px;font-size:14px;font-weight:500;text-decoration:none;color:#fff;white-space:nowrap;position:relative}
.nav>li>a:hover,.nav>li>a.on{color:#fff}
.nav>li>a.on:after,.nav>li>a:hover:after{content:'';position:absolute;left:24px;right:24px;bottom:22px;height:2px;background:var(--coral)}
.nav .caret:after{content:'';display:inline-block;margin-left:7px;border:4px solid transparent;border-top-color:#fff;border-bottom:0;vertical-align:2px;position:static;background:none;height:0;width:0}
.dd{display:none;position:absolute;top:78px;left:0;min-width:330px;background:var(--header);border-top:2px solid var(--red);border-bottom:1px solid var(--card-line);padding:10px 0;box-shadow:0 18px 30px rgba(0,0,0,.45)}
.nav>li:hover>.dd,.nav>li:focus-within>.dd{display:block}
.dd a{display:block;padding:11px 26px;font-size:14px;text-decoration:none;color:var(--pale)}
.dd a:hover{background:var(--card);color:#fff}
.dd b{color:var(--coral);font-family:'Archivo';font-stretch:125%;font-weight:800;margin-right:10px;font-size:12px}
.burger{display:none;margin-left:auto;background:none;border:1px solid var(--card-line);color:#fff;font-size:22px;width:44px;height:40px;border-radius:6px;cursor:pointer}
/* buttons */
.pill{display:inline-block;background:var(--coral);color:var(--navy);text-decoration:none;text-transform:uppercase;font-size:15px;font-weight:500;text-align:center;padding:14px 26px;border-radius:40px;line-height:1.25;transition:background .25s}
.pill:hover{background:#f0707b}
.rect{display:inline-block;background:var(--red);color:#fff;text-decoration:none;text-transform:uppercase;font-family:'Archivo';font-stretch:125%;font-weight:800;font-size:15px;letter-spacing:.04em;padding:19px 32px;transition:background .25s}
.rect:hover{background:#d92a3a}
.eyebrow{display:block;color:var(--coral);font-family:'Archivo',Arial,sans-serif;font-stretch:125%;font-weight:700;font-size:13px;letter-spacing:.22em;text-transform:uppercase;margin-bottom:20px}
/* home divisions */
.divs{max-width:1440px;margin:0 auto;padding:22px 32px 70px}
.dgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px 22px;align-items:start}
.dcard{background:var(--card);border:1px solid var(--card-line);border-top:5px solid var(--red);border-radius:10px;padding:32px 32px 34px}
.dcard h2{font-size:clamp(24px,2.2vw,32px);margin:0 0 22px}
.dcard h2 span{display:block}
.dcard .sub{font-family:'Archivo';font-stretch:125%;font-weight:800;color:var(--pale);font-size:15px;line-height:1.25;margin:0 0 22px;text-transform:none}
.dcard ul{list-style:none;margin:0 0 28px;padding:0;font-size:14px;line-height:1.55;color:#fff}
.dcard li:before{content:'• '}
.dcard .pill{display:block;border-radius:40px}
.c1{grid-column:1;grid-row:1}.c2{grid-column:3;grid-row:1}.c3{grid-column:1;grid-row:2}.c4{grid-column:2;grid-row:2}.c5{grid-column:3;grid-row:2}
.center{grid-column:2;grid-row:1;align-self:end;text-align:center;padding:0 12px 24px}
.center img{width:min(300px,80%);margin:0 auto 22px}
.center h1{font-size:19px;letter-spacing:.01em;margin:0 0 12px;line-height:1.1}
.center p{margin:0;color:var(--pale);font-size:14px;line-height:1.6}
/* statement */
.statement{max-width:1440px;margin:0 auto;padding:60px 36px 40px}
.statement hr{border:0;border-top:1px solid var(--steel);opacity:.5;margin:0 0 34px}
.statement h2{font-size:clamp(34px,4.3vw,62px);max-width:900px;margin:0 0 34px}
.statement p{max-width:720px;font-size:17px;margin:0 0 14px;color:#fff}
.slogan{color:var(--coral);font-family:'Archivo';font-stretch:125%;font-weight:800;text-transform:uppercase;letter-spacing:.08em;font-size:15px!important}
.pillars{max-width:1440px;margin:0 auto;padding:30px 36px 80px;display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.pillar{border:1px solid var(--card-line);padding:26px 30px 24px;background:transparent}
.pillar .no{display:block;color:var(--coral);font-family:'Archivo';font-stretch:125%;font-weight:900;font-size:clamp(46px,5vw,70px);line-height:1}
.pillar h3{font-family:'Archivo';font-stretch:125%;font-weight:800;text-transform:uppercase;font-size:clamp(16px,1.6vw,22px);margin:10px 0 6px;color:#fff}
.pillar p{margin:0;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--steel)}
/* extra home bands */
.band{background:var(--deep);padding:70px 36px}
.band .in{max-width:1440px;margin:0 auto}
.band h2{font-size:clamp(28px,3.4vw,50px);margin:0 0 30px}
.mgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.mtile{background:var(--panel);border:1px solid var(--card-line);padding:22px 24px;font-size:14px;color:var(--steel)}
.mtile b{display:block;color:#fff;font-family:'Archivo';font-stretch:125%;font-weight:800;text-transform:uppercase;font-size:14px;margin-bottom:6px;line-height:1.2}
.cta{background:linear-gradient(180deg,var(--navy),var(--header));text-align:center;padding:80px 28px;border-top:1px solid var(--card-line)}
.cta h2{font-size:clamp(28px,3.4vw,48px);margin:0 auto 18px;max-width:960px}
.cta p{color:var(--pale);margin:0 auto 30px;max-width:640px}
/* sub-page hero */
.hero{position:relative;min-height:640px;display:flex;align-items:center;background-size:cover;background-position:center;padding:100px 36px 90px}
.hero:before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(12,20,36,.88) 0%,rgba(12,20,36,.62) 55%,rgba(12,20,36,.35) 100%)}
.hero .in{position:relative;max-width:1440px;margin:0 auto;width:100%}
.hero h1{font-size:clamp(34px,4.6vw,66px);max-width:960px;margin:0 0 28px;overflow-wrap:break-word}
.hero p.lead{font-size:18px;max-width:600px;margin:0 0 36px;color:#fff}
/* capability band */
.capband{position:relative;background-size:cover;background-position:center;padding:70px 36px 90px}
.capband:before{content:'';position:absolute;inset:0;background:rgba(12,20,36,.55)}
.capband .in{position:relative;max-width:1440px;margin:0 auto}
.capband h2{font-size:clamp(30px,4vw,60px);margin:0 0 50px}
.caps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.cap{background:var(--card);border-left:2px solid var(--red);padding:42px 24px 34px;text-align:center;min-height:360px}
.cap h3{font-family:'Archivo';font-stretch:125%;font-weight:800;text-transform:uppercase;font-size:clamp(15px,1.35vw,19px);line-height:1.12;margin:0 0 44px}
.cap p{margin:0;font-size:13.5px;line-height:1.55;color:#fff}
/* detail */
.detail{background:var(--deep);padding:90px 36px}
.detail .in{max-width:1440px;margin:0 auto}
.detail h2{font-size:clamp(30px,3.8vw,56px);margin:0 0 56px;max-width:1100px}
.ig{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.item{background:var(--panel);padding:26px 30px;font-size:15px;line-height:1.6;color:var(--steel);border:1px solid #17213a}
.item b{color:#fff;text-transform:uppercase;font-weight:700}
.std{background:var(--navy);padding:80px 36px}
.std .in{max-width:1440px;margin:0 auto}
.std h2{font-size:clamp(26px,3vw,42px);margin:0 0 40px}
.sg{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.sbox{border:1px solid var(--card-line);border-top:3px solid var(--red);background:var(--card);padding:24px;font-size:14px;color:var(--pale)}
.sbox b{display:block;color:#fff;text-transform:uppercase;font-family:'Archivo';font-stretch:125%;font-weight:800;font-size:13px;margin-bottom:8px;line-height:1.25}
.rfq{background:var(--deep);padding:70px 36px}
.rfq .in{max-width:1440px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
.rfq h2{font-size:clamp(24px,2.6vw,38px);margin:0 0 20px;font-stretch:125%}
.rfq ul{margin:0;padding-left:20px;color:var(--pale)}
.rfq li{margin-bottom:6px}
/* markets */
.mk{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.mkc{background:var(--card);border-top:4px solid var(--red);border-radius:8px;overflow:hidden;display:flex;flex-direction:column}
.mkc img{width:100%;aspect-ratio:16/10;object-fit:cover}
.mkc div{padding:20px 22px 24px}
.mkc h3{font-family:'Archivo';font-stretch:125%;font-weight:800;text-transform:uppercase;font-size:15px;margin:0 0 10px;line-height:1.2}
.mkc p{margin:0;font-size:13.5px;color:var(--pale)}
.page-intro{max-width:1440px;margin:0 auto;padding:80px 36px 20px}
.page-intro p{max-width:800px;font-size:18px}
.srcs{font-size:13px;color:var(--steel);margin-top:34px}
.srcs a{color:var(--pale)}
.srcs li{margin-bottom:4px}
/* about / safety */
.two{display:grid;grid-template-columns:1fr 1fr;gap:50px;max-width:1440px;margin:0 auto;padding:0 36px}
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.pcard{background:var(--card);border-top:4px solid var(--red);padding:30px 28px;border-radius:8px}
.pcard h3{font-family:'Archivo';font-stretch:125%;font-weight:800;text-transform:uppercase;font-size:17px;line-height:1.2;margin:0 0 14px}
.pcard p{margin:0;color:var(--pale);font-size:15px}
.about-top{max-width:1440px;margin:0 auto;padding:90px 36px 50px}
.about-top .eyebrow{margin-bottom:16px}
.about-top h1{font-size:clamp(34px,4.6vw,66px);margin:0 0 26px}
.about-top p{max-width:900px;font-size:18px;margin:0 0 20px}
.section{padding:70px 36px;max-width:1440px;margin:0 auto}
.section h2{font-size:clamp(26px,3.2vw,46px);margin:0 0 36px}
.family{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.family a{display:block;background:var(--card);border:1px solid var(--card-line);padding:20px;text-decoration:none;font-size:14px;color:var(--pale)}
.family a b{display:block;color:#fff;font-family:'Archivo';font-stretch:125%;font-weight:800;text-transform:uppercase;font-size:14px;margin-bottom:6px}
.family a:hover{border-color:var(--coral)}
/* contact */
.chead{max-width:1440px;margin:0 auto;padding:90px 36px 30px}
.chead{text-align:center}.chead h1{font-size:clamp(36px,5.2vw,78px);margin:0 auto 30px;max-width:900px}
.chead p{max-width:760px;margin-left:auto;margin-right:auto;font-size:18px;color:var(--pale)}
.cgrid{display:grid;grid-template-columns:1fr 1fr;gap:70px;max-width:1440px;margin:0 auto;padding:30px 36px 100px}
.cgrid h3{font-family:'Archivo';font-stretch:125%;font-weight:800;text-transform:uppercase;font-size:15px;margin:30px 0 8px;letter-spacing:.02em}
.cgrid h3:first-child{margin-top:0}
.cgrid p{margin:0;color:var(--pale)}
.cgrid h2{font-size:clamp(22px,2.4vw,32px);margin:50px 0 16px}
.cgrid ul{padding-left:22px;color:var(--pale)}
form label{display:block;font-size:13px;margin:0 0 6px;color:#fff}
form input,form textarea{width:100%;background:#1D2638;border:1px solid #2a3652;color:#fff;font:inherit;font-size:15px;padding:12px 14px;margin-bottom:18px;border-radius:2px}
form input:focus,form textarea:focus{outline:2px solid var(--coral);outline-offset:0}
form .row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
form textarea{min-height:130px;resize:vertical}
form button{width:100%;background:var(--coral);color:#fff;border:0;font:inherit;font-size:15px;padding:15px;cursor:pointer;text-transform:uppercase}
form button:hover{background:#f0707b}
.fnote{margin-top:14px;font-size:14px;color:var(--pale);min-height:22px}
.g3{grid-template-columns:repeat(3,1fr)}
/* footer */
.ftr{background:var(--navy);border-top:1px solid var(--card-line);padding:60px 36px 28px}
.ftr .in{max-width:1440px;margin:0 auto}
.fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.1fr;gap:44px}
.ftr .flogo{height:34px;width:auto;margin-bottom:26px}
.ftr p{margin:0 0 8px;font-size:14px;color:#fff}
.ftr h4{font-family:'Archivo';font-stretch:125%;font-weight:800;text-transform:uppercase;font-size:13px;letter-spacing:.06em;margin:4px 0 16px;color:#fff}
.ftr ul{list-style:none;margin:0;padding:0}
.ftr li{margin-bottom:9px;font-size:14px}
.ftr li a{color:var(--steel);text-decoration:none}
.ftr li a:hover{color:#fff;text-decoration:underline}
.ftr .tag{margin-top:46px;padding-top:26px;border-top:1px solid #1d2a45;font-size:12.5px;color:var(--steel)}
.ftr .bottom{margin-top:14px;font-size:12.5px;color:var(--steel);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.ftr .bottom b{color:var(--coral);font-family:'Archivo';font-stretch:125%;font-weight:800;text-transform:uppercase;letter-spacing:.06em}
@media(max-width:1100px){
 .g3{grid-template-columns:repeat(2,1fr)!important}
 .hdr{padding:0 20px;gap:20px}
 .burger{display:block}
 .nav{display:none;position:absolute;top:78px;left:0;right:0;background:var(--header);flex-direction:column;align-items:stretch;border-bottom:1px solid var(--red);max-height:calc(100vh - 78px);overflow:auto}
 .nav.open{display:flex}
 .nav>li>a{line-height:50px;padding:0 24px}
 .nav>li>a.on:after,.nav>li>a:hover:after{display:none}
 .dd{display:block;position:static;box-shadow:none;border:0;padding:0 0 8px 12px;min-width:0}
 .dgrid{grid-template-columns:1fr 1fr}
 .c1,.c2,.c3,.c4,.c5,.center{grid-column:auto;grid-row:auto}
 .center{grid-column:1/-1;order:-1;padding-top:30px}
 .caps,.sg,.mk,.mgrid{grid-template-columns:repeat(2,1fr)}
 .family{grid-template-columns:repeat(2,1fr)}
 .fgrid{grid-template-columns:1fr 1fr}
 .rfq .in,.cgrid,.two{grid-template-columns:1fr;gap:30px}
 .three{grid-template-columns:1fr}
}
@media(max-width:700px){
 .c1{order:1}.c2{order:2}.center{order:3!important;grid-column:1/-1}.c3{order:4}.c4{order:5}.c5{order:6}
 h1,h2,h3{overflow-wrap:anywhere}
 .cta h2{font-size:23px}
 .g3{grid-template-columns:1fr!important}
 .hdr{height:68px}.hdr .logo img{height:26px}.nav{top:68px}
 .dgrid,.caps,.sg,.mk,.mgrid,.ig,.pillars,.family,.fgrid{grid-template-columns:1fr}
 .hero{min-height:520px;padding:70px 22px 60px}
 .detail,.std,.rfq,.band,.capband,.section,.statement,.pillars,.divs,.about-top,.chead,.cgrid,.page-intro,.two{padding-left:22px;padding-right:22px}
 .hero p.lead{font-size:16px}
 .cap{min-height:0}.cap h3{margin-bottom:20px}
 form .row{grid-template-columns:1fr}
 .rect{padding:16px 22px;font-size:13px}
 .ftr{padding:46px 22px 24px}
}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}