/* JR Electrical Projects — shared stylesheet. Component styling is inline in the HTML; this file holds resets,
   keyframes, responsive switches for the header, and the hover/focus states (.jr-h*, .jr-f*) referenced by class. */
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:#0A0F1A;color:#fff;font-family:'Schibsted Grotesk',system-ui,sans-serif;font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;text-wrap:pretty}
img{display:block;max-width:100%}
a{color:#0848A6}a:hover{color:#11459C}
input,textarea,button{font-family:inherit}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:3px solid #8FBBFF;outline-offset:3px}
[hidden]{display:none!important}
.jr-spacer{height:118px}
[data-ref="trackRef"]::-webkit-scrollbar{display:none}
@media (max-width:899px){.jr-spacer{height:84px}[data-if="wide"]{display:none!important}}
@media (min-width:900px){[data-if="narrow"]{display:none!important}}
@media (max-width:1099px){[data-if="roomy"]{display:none!important}}
@keyframes drawX{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes drawY{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes menuIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@keyframes linkIn{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
@keyframes lineOn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes heroSettle{from{transform:scale(1.06)}to{transform:scale(1)}}
@keyframes nodePop{0%{transform:scale(0);opacity:0}60%{transform:scale(1.6);opacity:1;box-shadow:0 0 0 6px rgba(106,166,255,.28)}100%{transform:scale(1);opacity:1;box-shadow:0 0 0 0 rgba(106,166,255,0)}}
@keyframes powerFlicker{0%,42%{opacity:.94}47%{opacity:.5}52%{opacity:.9}57%{opacity:.22}63%{opacity:.62}100%{opacity:0}}
@keyframes energise{from{opacity:0;transform:translateY(16px);filter:blur(8px)}60%{filter:blur(0)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes sweep{from{transform:translateX(-120%)}to{transform:translateX(320%)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes checkPop{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.08);opacity:1}100%{transform:scale(1);opacity:1}}
@keyframes checkDraw{from{width:0;height:0;opacity:0}to{width:12px;height:22px;opacity:1}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-delay:0ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
/* pseudo-state styles generated from the design source */
.jr-f1:focus{top:16px}
.jr-h2:hover{color:#8FBBFF}
.jr-h3:hover{background:rgba(255,255,255,0.08); color:#fff}
.jr-h4:hover{background:#11459C; transform:translateY(-1px); box-shadow:0 12px 28px rgba(8,72,166,0.45)}
.jr-h5:hover{background:#11459C}
.jr-h6:hover{border-color:#fff; background:rgba(10,15,26,0.6)}
.jr-h7:hover{border-color:#fff; background:rgba(10,15,26,0.75)}
.jr-h8:hover{color:#fff}
.jr-h9:hover{border-color:#6AA6FF}
.jr-h10:hover{color:#11459C; text-decoration:underline}
.jr-h11:hover{transform:scale(1.03)}
.jr-h12:hover{border-color:#fff}
.jr-h13:hover{color:#fff; text-decoration:underline}
.jr-h14:hover{background:#0848A6}
.jr-h15:hover{border-color:#6AA6FF; background:rgba(106,166,255,0.1)}
.jr-h16:hover{background:#E6EEFB}
.jr-h17:hover{border-color:#6AA6FF; background:rgba(106,166,255,0.12)}
.jr-h18:hover{transform:scale(1.02)}
.jr-h19:hover{background:rgba(255,255,255,0.1)}
.jr-h20:hover{border-color:#0848A6}
.jr-f21:focus{border-color:#0848A6; box-shadow:0 0 0 3px rgba(8,72,166,0.18), inset 0 -2px 0 #0848A6}