/* Phased Power Solutions — site styles. Page layout is inline (from the design); this file adds header, menu, forms and the mobile layer. */
html{background:#0B1725}
body{margin:0;background:#F3F5F8;font-family:'Plus Jakarta Sans',system-ui,sans-serif;color:#0B1725;-webkit-text-size-adjust:100%}
a{color:#0B1725}a:hover{color:#0F66AB}
.page{margin:0 auto;background:#F3F5F8}
img{display:block}

/* header */
.topbar{background:#0B1725;color:#AAB8C8;font-size:14px;font-weight:500}
.tb-in{height:40px;display:flex;align-items:center;justify-content:space-between;padding:0 80px;gap:28px}
.tb-area{color:#609CE2;margin-right:auto}
.tb-right a{color:#fff;text-decoration:none;font-weight:600;margin-left:20px}
.navbar{height:92px;background:#F3F5F8;border-bottom:1px solid #D6DDE6;display:flex;align-items:center;justify-content:space-between;padding:0 80px;box-sizing:border-box;gap:24px}
.navbar .logo img{height:66px;width:auto}
.navbar .logo-white{display:none}
.navlinks{display:flex;gap:32px;align-items:center;font-size:16px;font-weight:500}
.navlinks a{text-decoration:none}
.navlinks a.on{color:#0F66AB;font-weight:700}
.navcta{text-decoration:none;background:#1379C8;color:#fff;font-weight:600;font-size:16px;padding:14px 22px;border-radius:8px}
.navcta:hover{background:#0F66AB;color:#fff}
.mobactions{display:none;gap:10px}
.iconbtn{width:44px;height:44px;border-radius:10px;background:#15253B;border:1px solid #24364D;display:flex;align-items:center;justify-content:center;color:#fff;font-size:24px;text-decoration:none;cursor:pointer;padding:0}
.iconbtn.call{background:#1379C8;border-color:#1379C8}

/* mobile menu */
#pmenu{display:none;position:fixed;inset:0;background:rgba(11,23,37,.98);z-index:1000;padding:20px 20px 32px;box-sizing:border-box;flex-direction:column;gap:2px;overflow:auto}
#pmenu.open{display:flex}
.pm-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.pm-top img{height:44px;width:auto}
#pmenu>a{color:#fff;text-decoration:none;font-size:22px;font-weight:700;padding:14px 0;border-bottom:1px solid #24364D}
#pmenu>a.pm-cta{margin-top:20px;border:0;background:#1379C8;font-size:17px;font-weight:600;height:54px;border-radius:10px;display:flex;align-items:center;justify-content:center;padding:0}
#pmenu>a.pm-call{border:1.5px solid #3A4E66;font-size:17px;font-weight:600;height:54px;border-radius:10px;display:flex;align-items:center;justify-content:center;padding:0;margin-top:10px}

/* service cards: white, dark on hover */
.svc{transition:background .18s,border-color .18s,transform .18s}
.svc:hover{background:#0B1725!important;border-color:#0B1725!important;transform:translateY(-2px)}
.svc:hover>div{background:#15253B!important}
.svc:hover svg{stroke:#609CE2}
.svc:hover span{color:#FFFFFF!important}
.svc:hover span[style*="margin-top: auto"]{color:#609CE2!important}
.svc:hover span[style*="color: #5A6B7F"]{color:#AAB8C8!important}

/* tier picked from the cards */
.q-tiernote{display:flex;justify-content:space-between;align-items:center;gap:12px;background:#E4EFFA;border:1px solid #B9D3EE;border-radius:8px;padding:10px 14px;font-size:14px;color:#0B1725}
.q-tiernote a{color:#0F66AB;font-weight:600;text-decoration:none;white-space:nowrap}

/* forms */
.qform{display:contents}
.qform input,.qform select,.qform textarea{font:inherit;color:#0B1725}
.qform input:focus,.qform select:focus,.qform textarea:focus{outline:2px solid #1379C8;outline-offset:1px}
.qform button{cursor:pointer}
.qform button:hover{filter:brightness(1.1)}
.choices{display:grid;gap:8px}
.choices label{position:relative;display:block}
.choices input{position:absolute;opacity:0;width:0;height:0}
.choices span{display:flex;align-items:center;justify-content:center;height:48px;border:1.5px solid #C3CDD9;background:#fff;border-radius:8px;font-size:15px;font-weight:600;cursor:pointer}
.choices input:checked+span{background:#0B1725;color:#fff;border-color:#0B1725}
.choices input:focus-visible+span{outline:2px solid #1379C8}
.upload{display:block;border:2px dashed #0F66AB;background:#E4EFFA;border-radius:12px;padding:18px;text-align:center;cursor:pointer}
.upload input{width:100%;font-size:14px}

/* sticky mobile bar */
.stickybar{display:none}

/* ---------- mobile ---------- */
@media (max-width:1023px){
 .page{width:100%!important;min-width:0!important;padding-bottom:84px}
 .page>div{min-width:0!important;max-width:100%!important;box-sizing:border-box;padding-left:16px!important;padding-right:16px!important;flex-direction:column!important;align-items:stretch!important;gap:24px!important;margin-left:0!important;margin-right:0!important}
 .page>div>div:not([style*="border-radius"]){padding-left:0!important;padding-right:0!important}
 .page>div>div[style*="border-radius"][style*="padding"]{padding-left:20px!important;padding-right:20px!important}
 .page>div>div[style*="border-radius"]>form{padding-left:0!important;padding-right:0!important}
 .topbar{display:none}
 .navbar{height:72px;background:#0B1725;border:0;padding:0 16px;position:sticky;top:0;z-index:50}
 .navbar .logo img{height:48px}
 .navbar .logo-dark{display:none}.navbar .logo-white{display:block}
 .navlinks,.navcta{display:none}
 .mobactions{display:flex}
 div[style*="grid-template-columns"]{grid-template-columns:1fr!important}
 div[style*="display: flex"]{flex-wrap:wrap}
 h1{font-size:36px!important;line-height:1.05!important}
 h2{font-size:26px!important;line-height:1.1!important}
 p{font-size:16px!important}
 img{max-width:100%!important;height:auto!important}
 img[alt="Phased Power Solutions"]{width:auto!important;height:64px!important;max-width:none!important}
 .navbar .logo img{height:48px!important}
 .pm-top img{height:44px!important}
 img[alt="Ben Gray"]{height:260px!important}
 img[src$="saa.png"],img[src$="cec.png"]{height:34px!important;width:auto!important}
 img[style*="height: 44px; width: auto"]{height:36px!important;width:auto!important;max-width:150px!important}
 img[style*="height: 28px; width: auto"]{height:28px!important;width:auto!important}
 img[src$="netcc.png"]{height:44px!important;width:auto!important}
 div[style*="height: 64px; padding"]{height:56px!important;padding:8px 14px!important}
 div[style*="gap: 40px; margin-top: 8px"]{gap:24px!important}
 .page{overflow-x:hidden}
 .page *{min-width:0}
 #quote2{width:100%!important}
 img[style*="height: 300px"],img[style*="height: 280px"],img[style*="height: 260px"],img[style*="height: 220px"]{height:220px!important}
 img[style*="width: 620px"],img[style*="width: 640px"],img[style*="width: 600px"],img[style*="width: 520px"],img[style*="width: 480px"]{width:100%!important;height:260px!important}
 img[style*="height: 420px"]{height:200px!important}
 div[style*="width: 440px"],div[style*="width: 480px"],div[style*="width: 380px"],div[style*="width: 400px"],div[style*="width: 560px"]{width:100%!important}
 div[style*="max-width: 700px"],div[style*="max-width: 720px"]{max-width:100%!important}
 div[style*="font-size: 58px"],div[style*="font-size: 56px"]{font-size:36px!important}
 div[style*="padding: 96px"],div[style*="padding: 88px"],div[style*="padding: 80px"],div[style*="padding: 72px"]{padding-top:44px!important;padding-bottom:44px!important}
 div[style*="padding: 56px 64px"]{padding:28px 20px!important}
 div[style*="border-radius: 20px"]{margin:0 16px!important}
 .stickybar{display:flex;position:fixed;left:0;right:0;bottom:0;height:84px;background:#fff;border-top:1px solid #DDE3EB;padding:12px 16px 20px;box-sizing:border-box;gap:10px;z-index:40;box-shadow:0 -8px 24px rgba(11,23,37,.12)}
 .sb-call{flex:1;text-decoration:none;height:52px;border-radius:10px;border:1.5px solid #0B1725;color:#0B1725;font-weight:600;font-size:16px;display:flex;align-items:center;justify-content:center;gap:8px}
 .sb-quote{flex:1.6;text-decoration:none;height:52px;border-radius:10px;background:#1379C8;color:#fff;font-weight:600;font-size:16px;display:flex;align-items:center;justify-content:center}
 .choices[style*="repeat(3"]{grid-template-columns:repeat(3,minmax(0,1fr))!important}
 .choices[style*="repeat(2"]{grid-template-columns:1fr 1fr!important}
 .chips{margin-left:0!important;justify-content:flex-start!important;max-width:none!important}
 img[src$="proj-zappi.jpg"],img[src$="proj-zappi.webp"]{height:auto!important}

 /* mobile polish */
 a[style*="padding: 18px 28px"]{flex:1 1 100%;display:flex;justify-content:center;box-sizing:border-box;text-align:center}
 div[style*="justify-content: space-between"][style*="border-bottom"]{flex-wrap:nowrap!important}
 .page>div>div[style*="justify-content: space-between"][style*="align-items: flex-end"]{flex-direction:column;align-items:flex-start!important;gap:12px!important}
 div[style*="gap: 14px; flex-wrap: wrap; justify-content: center"]{display:grid!important;grid-template-columns:1fr 1fr;gap:10px!important;width:100%}
 div[style*="gap: 14px; flex-wrap: wrap; justify-content: center"]>div{height:72px!important;padding:12px!important;width:auto!important}
 div[style*="gap: 14px; flex-wrap: wrap; justify-content: center"] img{max-width:100%!important;height:auto!important;max-height:40px!important}
 .page>div[style*="align-items: stretch"]{padding:0!important;gap:0!important}
 .page>div[style*="align-items: stretch"]>div{padding:36px 16px!important}
 .page>div[style*="align-items: stretch"]>img{height:280px!important;border-radius:0!important}
 img[style*="width: 520px"]{height:340px!important}
 .finance{padding:28px 20px!important;flex-direction:column;align-items:stretch!important}
 .finance>div{max-width:none!important}
 .page>div>div[style*="repeat(4"][style*="gap: 40px"]{grid-template-columns:1fr 1fr!important;gap:28px 20px!important}
 .page>div>div[style*="repeat(4"][style*="gap: 40px"]>div:first-child,.page>div>div[style*="repeat(4"][style*="gap: 40px"]>div:last-child{grid-column:1/-1}
 a[href^="mailto:"]{word-break:break-all;font-size:15px!important}
 h2[style*="font-size: 40px"],span[style*="font-size: 40px"]{font-size:28px!important;line-height:1.1!important}
 div[style*="padding: 56px 64px"] a{flex:1 1 100%}
 .page>div.hero{background-image:none!important;background-color:#0B1725!important;padding-top:0!important}
 .hero::before{content:"";display:block;height:240px;margin:0 -16px 4px -16px;background-image:linear-gradient(180deg,rgba(11,23,37,0) 55%,#0B1725 100%),var(--hero-img);background-size:cover;background-position:center 50%}
}
@media (min-width:1024px) and (max-width:1439px){
 .page{width:100%!important;overflow-x:hidden}
 .page *{min-width:0}
 .page>div{padding-left:32px!important;padding-right:32px!important;min-width:0;max-width:100%;box-sizing:border-box}
 .tb-in,.navbar{padding-left:32px;padding-right:32px;gap:16px}
 .tb-in{font-size:13px;white-space:nowrap}
 .tb-area{display:none}
 .navlinks{gap:20px;font-size:15px}
 .navbar .logo img{height:56px}
 div[style*="border-radius: 20px"]{margin-left:32px!important;margin-right:32px!important}
 h1{font-size:48px!important}
 div[style*="width: 620px"],div[style*="width: 640px"]{width:46%!important}
 img[style*="width: 620px"],img[style*="width: 640px"],img[style*="width: 600px"]{width:46%!important}
 .page>div>img[style*="width: 520px"],.page>div>img[style*="width: 480px"]{width:42%!important}
 .page>div>div>img[style*="width: 480px"]{width:100%!important;height:auto!important}
 div[style*="width: 440px"],div[style*="width: 480px"]{width:40%!important}
 div[style*="grid-template-columns: repeat(4"]{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 div[style*="grid-template-columns: repeat(5"]{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}

/* ================= refresh (26 Sep 2026) =================
   Full-bleed bands on big screens, a sticky header, the bolt as a brand mark,
   and hover/press states that match COMMAND HUB. Layout stays as designed. */
:root{--navy:#0B1725;--navy2:#15253B;--blue:#1379C8;--blue-ink:#0F66AB;--sky:#609CE2;--mist:#F3F5F8;--line:#DDE3EB;--edge:max(80px,calc((100vw - 1280px) / 2))}
html{scroll-behavior:smooth;scroll-padding-top:100px}
body{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
h1,h2{text-wrap:balance;letter-spacing:-.02em!important}
p{text-wrap:pretty}
::selection{background:#CFE3F7;color:#0B1725}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid rgba(19,121,200,.55)!important;outline-offset:3px}

/* big screens: colour bands run edge to edge, content stays on the 1280px grid */
@media (min-width:1440px){
 html{background:#F3F5F8}
 .page{width:100%!important}
 .tb-in,.navbar{padding-left:var(--edge)!important;padding-right:var(--edge)!important}
 .page>div:not(.topbar):not(#pmenu):not(.stickybar):not([style*="align-items: stretch"]):not([style*="border-radius: 20px"]){padding-left:var(--edge)!important;padding-right:var(--edge)!important}
 .page>div[style*="border-radius: 20px"]{margin-left:var(--edge)!important;margin-right:var(--edge)!important}
 .page>div[style*="align-items: stretch"]>div{padding-right:var(--edge)!important}
 .page>div[style*="align-items: stretch"]>div:first-child{padding-left:var(--edge)!important;padding-right:64px!important}
 .page>div[style*="align-items: stretch"]>img{width:min(46vw,860px)!important}
}

/* header: stays with you on desktop */
@media (min-width:1024px){
 .navbar{position:sticky;top:0;z-index:60;background:rgba(243,245,248,.86);-webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px);transition:box-shadow .2s}
 .navlinks a{position:relative;padding:6px 0;transition:color .15s}
 .navlinks a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;border-radius:2px;background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform .2s ease}
 .navlinks a:hover::after,.navlinks a.on::after{transform:scaleX(1)}
}
.navcta{box-shadow:0 1px 0 rgba(255,255,255,.2) inset,0 6px 16px rgba(19,121,200,.28);transition:background .15s,transform .1s,box-shadow .15s}
.navcta:active{transform:translateY(1px)}

/* the bolt: a small brand mark in front of every section label */
span[style*="letter-spacing: 3px"]{display:inline-flex;align-items:center;gap:10px}
span[style*="letter-spacing: 3px"]::before{content:"";width:9px;height:16px;flex:none;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 373 673'%3E%3Cpath d='M124 136 L328 0 L180 318 L373 318 L0 673 L146 405 L0 407 Z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 373 673'%3E%3Cpath d='M124 136 L328 0 L180 318 L373 318 L0 673 L146 405 L0 407 Z'/%3E%3C/svg%3E") center/contain no-repeat}
div[style*="align-items: center; text-align: center"]>span[style*="letter-spacing: 3px"]{justify-content:center}

/* buttons and links that look pressable */
a[style*="padding: 18px 28px"],a[style*="padding: 16px 26px"],a[style*="height: 50px"],a[style*="height: 44px"],button[type="submit"]{transition:transform .12s ease,box-shadow .15s ease,filter .15s,background .15s}
a[style*="background: #1379C8"]{box-shadow:0 1px 0 rgba(255,255,255,.22) inset,0 8px 20px rgba(19,121,200,.30)}
a[style*="padding: 18px 28px"]:hover,a[style*="padding: 16px 26px"]:hover,a[style*="height: 50px"]:hover,a[style*="height: 44px"]:hover{transform:translateY(-1px);filter:brightness(1.06)}
a[style*="border: 1.5px solid #3A4E66"]:hover{border-color:var(--sky)!important;background:rgba(96,156,226,.08)}
a[style*="padding: 18px 28px"]:active,a[style*="height: 50px"]:active,button[type="submit"]:active{transform:translateY(1px)}

/* the instant quote card */
#quote{box-shadow:0 30px 70px rgba(0,0,0,.38),0 0 0 1px rgba(255,255,255,.06)!important}
#quote input,#quote select{transition:border-color .15s,box-shadow .15s}
#quote input:focus,#quote select:focus{border-color:var(--blue)!important;box-shadow:0 0 0 4px rgba(19,121,200,.14);outline:none!important}

/* cards lift a little under the cursor */
.page div[style*="border-radius: 16px"][style*="background: #FFFFFF"]{transition:transform .2s ease,box-shadow .2s ease,border-color .2s}
@media (hover:hover){
 .page div[style*="border-radius: 16px"][style*="background: #FFFFFF"][style*="overflow: hidden"]:hover,
 #tiers div[style*="position: relative"]:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(11,23,37,.10)}
 .svc:hover{box-shadow:0 18px 40px rgba(11,23,37,.18)}
}
div[style*="overflow: hidden"]>img[style*="object-fit: cover"]{transition:transform .5s ease}
@media (hover:hover){div[style*="overflow: hidden"]:hover>img[style*="object-fit: cover"]{transform:scale(1.04)}}
#tiers div[style*="background: #0B1725; border: 1px solid #0B1725"]{background:linear-gradient(165deg,#0B1725 0%,#15283F 100%)!important}

/* brand logos: calm grey until you point at them */
div[style*="gap: 14px; flex-wrap: wrap; justify-content: center"]>div{transition:border-color .2s,box-shadow .2s}
div[style*="gap: 14px; flex-wrap: wrap; justify-content: center"] img{transition:transform .25s}
div[style*="gap: 14px; flex-wrap: wrap; justify-content: center"]>div:hover img{transform:scale(1.05)}
div[style*="gap: 14px; flex-wrap: wrap; justify-content: center"]>div:hover{border-color:#B9D3EE!important;box-shadow:0 8px 22px rgba(11,23,37,.07)}

/* how it works: the four steps read as one run */
div[style*="grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px"]{position:relative;counter-reset:none}
div[style*="grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px"]>div[style*="background: #F3F5F8"]{position:relative;border:1px solid transparent;transition:border-color .2s,background .2s}
div[style*="grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px"]>div[style*="background: #F3F5F8"]:hover{border-color:#B9D3EE;background:#EEF4FB!important}
div[style*="grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px"]>div[style*="background: #F3F5F8"]:not(:last-child)::after{content:"";position:absolute;top:52px;right:-19px;width:14px;height:2px;background:#B9D3EE}
div[style*="grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px"] span[style*="font-size: 48px"]{font-variant-numeric:tabular-nums;background:linear-gradient(180deg,#609CE2,#1379C8);-webkit-background-clip:text;background-clip:text;color:transparent!important}

/* dark bands: a faint oversized bolt behind the words */
.finance,div[style*="margin-top: 96px; background: #0B1725"]{position:relative;overflow:hidden;isolation:isolate}
.finance::before,div[style*="margin-top: 96px; background: #0B1725"]::before{content:"";position:absolute;z-index:-1;right:-60px;top:-40px;width:320px;height:578px;background:#122338;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 373 673'%3E%3Cpath d='M124 136 L328 0 L180 318 L373 318 L0 673 L146 405 L0 407 Z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 373 673'%3E%3Cpath d='M124 136 L328 0 L180 318 L373 318 L0 673 L146 405 L0 407 Z'/%3E%3C/svg%3E") center/contain no-repeat;pointer-events:none}
div[style*="margin-top: 96px; background: #0B1725"] a:hover{color:#FFFFFF!important}

/* footer links and small print */
div[style*="margin-top: 96px; background: #0B1725"] a{transition:color .15s}

/* phones */
@media (max-width:1023px){
 .navbar{box-shadow:0 1px 0 rgba(255,255,255,.05),0 8px 20px rgba(6,14,24,.25)}
 .stickybar{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:rgba(255,255,255,.92)!important;padding-bottom:calc(20px + env(safe-area-inset-bottom,0px))!important;height:auto!important}
 div[style*="grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px"]>div:not(:last-child)::after{display:none}
 .finance::before{width:220px;height:398px;right:-80px}
 span[style*="letter-spacing: 3px"]{font-size:12px!important;letter-spacing:2.5px!important}
 /* service cards: icon beside the name, no empty height */
 .svc{min-height:0!important;padding:18px 18px 20px!important;display:grid!important;grid-template-columns:44px minmax(0,1fr);column-gap:14px;row-gap:8px;align-items:center}
 .svc>div{width:44px!important;height:44px!important}
 .svc>span:nth-of-type(1){font-size:19px!important}
 .svc>span:nth-of-type(2),.svc>span:nth-of-type(3){grid-column:1/-1}
 .svc>span:nth-of-type(2){font-size:15px!important}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;scroll-behavior:auto!important}}
/* final call-to-action band: headline in white so it reads on the blue */
div[style*="background: #1379C8; border-radius: 20px"] h2{color:#FFFFFF!important}
div[style*="background: #1379C8; border-radius: 20px"]{background:linear-gradient(135deg,#1379C8 0%,#0F66AB 100%)!important;position:relative;overflow:hidden;isolation:isolate}
div[style*="background: #1379C8; border-radius: 20px"]::before{content:"";position:absolute;z-index:-1;right:18%;top:-60px;width:220px;height:398px;background:rgba(255,255,255,.08);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 373 673'%3E%3Cpath d='M124 136 L328 0 L180 318 L373 318 L0 673 L146 405 L0 407 Z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 373 673'%3E%3Cpath d='M124 136 L328 0 L180 318 L373 318 L0 673 L146 405 L0 407 Z'/%3E%3C/svg%3E") center/contain no-repeat;pointer-events:none}