/* A J Leo Electric & Solar */
@font-face{font-family:"Barlow Condensed";font-weight:600;font-display:swap;src:url(/assets/fonts/barlow-condensed-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-weight:700;font-display:swap;src:url(/assets/fonts/barlow-condensed-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Source Sans 3";font-weight:400;font-display:swap;src:url(/assets/fonts/source-sans-3-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Source Sans 3";font-weight:400;font-style:italic;font-display:swap;src:url(/assets/fonts/source-sans-3-latin-400-italic.woff2) format("woff2")}
@font-face{font-family:"Source Sans 3";font-weight:600;font-display:swap;src:url(/assets/fonts/source-sans-3-latin-600-normal.woff2) format("woff2")}

:root{
  --steel:#EEF1F3;   /* page */
  --card:#FFFFFF;
  --ink:#13212E;     /* text, header */
  --cell:#1D4A70;    /* solar-cell blue */
  --sun:#F2B705;     /* safety yellow, actions only */
  --rule:#C5CED6;
  --muted:#4A5866;
  --head:"Barlow Condensed","Arial Narrow",Arial,sans-serif;
  --body:"Source Sans 3","Segoe UI",Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--steel);color:var(--ink);font:400 1.0625rem/1.6 var(--body)}
img{max-width:100%;height:auto;display:block}
a{color:var(--cell)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--sun);outline-offset:2px}
h1,h2,h3{font-family:var(--head);font-weight:700;line-height:1.05;letter-spacing:.005em;margin:0 0 .5em}
h1{font-size:clamp(2.4rem,5.2vw,4rem)}
h2{font-size:clamp(1.7rem,3vw,2.2rem)}
p{margin:0 0 1em}
.wrap{max-width:1140px;margin:0 auto;padding:0 1.25rem}
.skip{position:absolute;left:-999px}.skip:focus{left:1rem;top:1rem;background:var(--sun);color:var(--ink);padding:.5rem 1rem;z-index:9}

/* header */
.site-head{background:var(--ink);color:#fff}
.head-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-top:.85rem;padding-bottom:.6rem}
.brand{display:flex;align-items:center;gap:.75rem;color:#fff;text-decoration:none}
.brand img{width:56px;height:56px;border-radius:6px;background:#fff}
.brand span{font:700 1.65rem/1 var(--head)}
.brand small{display:block;font-weight:600;font-size:1.05rem;color:#AFC4D6;margin-top:.15rem}
.head-call{color:var(--ink);background:var(--sun);font:700 1.15rem/1 var(--head);padding:.6rem .9rem;border-radius:4px;text-decoration:none;white-space:nowrap}
.nav{list-style:none;margin:0;padding:0 0 .2rem;display:flex;gap:.25rem 1.4rem;flex-wrap:wrap}
.nav a{display:inline-block;color:#DCE6EE;text-decoration:none;font:600 1.15rem/1 var(--head);padding:.55rem 0 .65rem;border-bottom:3px solid transparent}
.nav a:hover{color:#fff}
.nav a[aria-current=page]{color:#fff;border-bottom-color:var(--sun)}

/* hero */
.hero{background:var(--ink);color:#fff;padding:2.5rem 0 3.5rem}
.hero-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:2.5rem;align-items:center}
.hero h1{max-width:13ch}
.lede{font-size:1.2rem;max-width:58ch}
.hero .lede{color:#D3DFE9}
.hero-note{color:#AFC4D6;margin-top:1.25rem;font-size:.98rem}
.hero-photo{margin:0;border:6px solid #fff;border-radius:3px;box-shadow:12px 12px 0 var(--cell)}
.hero-photo img{aspect-ratio:4/3;object-fit:cover;width:100%}

/* buttons */
.cta-row{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.5rem}
.btn{display:inline-block;font:700 1.25rem/1 var(--head);padding:.85rem 1.3rem;border-radius:4px;text-decoration:none;border:2px solid transparent;cursor:pointer}
.btn-sun{background:var(--sun);color:var(--ink)}
.btn-sun:hover{background:#FFC928}
.btn-line{border-color:#fff;color:#fff}
.btn-line-dark{border-color:var(--ink);color:var(--ink)}
.more{font:700 1.2rem/1 var(--head);color:var(--cell);text-decoration-thickness:2px;text-underline-offset:4px}
.more-light{color:#fff}

/* sections */
main>section{padding:3rem 0}
main>section.wrap{padding:3rem 1.25rem}
.band{background:var(--card);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.split{display:grid;grid-template-columns:1fr 1.25fr;gap:2.5rem;align-items:start}
.split-wide{grid-template-columns:1.3fr 1fr}
.split-form{grid-template-columns:1.4fr 1fr}
.page-head{background:var(--ink);color:#fff;padding:2.25rem 0 2rem!important}
.page-head .lede{color:#D3DFE9;margin:0}
.page-head a{color:var(--sun)}
.split.about-snip{grid-template-columns:300px 1fr;align-items:center}
.about-snip figure{margin:0;max-width:300px}
.about-snip img{border-radius:3px;border:6px solid #fff;box-shadow:8px 8px 0 var(--rule)}
.prose{max-width:62ch}
.prose ul{padding-left:1.2rem}
.prose li{margin-bottom:.35rem}
.side-photo{margin:0}
.side-photo img{border:6px solid #fff;border-radius:3px;box-shadow:10px 10px 0 var(--rule)}
.solar-snip{background:var(--cell);color:#fff}
.solar-snip p{max-width:60ch}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.facts p{color:var(--muted)}
.cols{columns:3 15rem;column-gap:2rem;padding-left:1.1rem;margin:0 0 1rem}
.cols li{break-inside:avoid;margin-bottom:.3rem}

/* panel directory: the signature element */
.panel{background:#fff;border:2px solid var(--ink);border-radius:4px;font-size:1rem}
.panel-head{display:flex;justify-content:space-between;background:var(--ink);color:#fff;font:700 1.1rem/1 var(--head);padding:.6rem .85rem;letter-spacing:.02em}
.panel-head span:last-child{color:var(--sun)}
.panel-grid{display:grid;grid-template-columns:1fr 1fr}
.ckt{display:flex;gap:.7rem;align-items:baseline;padding:.55rem .85rem;border-bottom:1px solid var(--rule)}
.ckt:nth-child(odd){border-right:1px solid var(--rule)}
.ckt-n{flex:none;width:1.8rem;height:1.8rem;display:inline-grid;place-items:center;border:2px solid var(--ink);border-radius:50%;font:700 .95rem/1 var(--head);transform:translateY(.2rem)}
.ckt:nth-last-child(-n+2){border-bottom:0}

/* gallery */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:.75rem;margin-bottom:1.25rem}
.gallery-4{grid-template-columns:repeat(4,1fr)}
.g-item{display:block;background:#fff;padding:5px;border:1px solid var(--rule);border-radius:3px}
.g-item img{width:100%;aspect-ratio:1/1;object-fit:cover}
.g-item:hover{border-color:var(--cell)}
.lightbox{border:0;padding:0;background:transparent;max-width:min(92vw,1200px)}
.lightbox::backdrop{background:rgba(10,18,26,.88)}
.lightbox img{max-height:84vh;width:auto;margin:0 auto;border:6px solid #fff}
.lb-close{display:block;margin:0 0 .5rem auto;background:var(--sun);border:0;font:700 1.1rem/1 var(--head);padding:.5rem .8rem;border-radius:4px;cursor:pointer}

/* contact card */
.contact-card{background:#fff;border:1px solid var(--rule);border-radius:4px;padding:1.4rem 1.5rem;color:var(--ink)}
.contact-card .cc-co{font:700 1.4rem/1.15 var(--head)}
.contact-card dl{margin:0 0 1rem}
.contact-card dt{font-weight:600;font-size:.9rem;color:var(--muted);margin-top:.7rem}
.contact-card dd{margin:0;font-size:1.1rem}
.vcf{font-weight:600}

/* work-order form */
.work-order{background:#fff;border:2px solid var(--ink);border-radius:4px;padding:0 1.5rem 1.5rem}
.wo-head{display:flex;justify-content:space-between;align-items:baseline;margin:0 -1.5rem 1.25rem;padding:.75rem 1.5rem;border-bottom:2px dashed var(--ink);font:700 1.35rem/1 var(--head)}
.wo-no{color:#B0262B;font-size:1.15rem}
fieldset{border:0;margin:0;padding:0}
legend{font-weight:600;padding:0;margin-bottom:.3rem}
label{display:block;font-weight:600;margin-bottom:1rem}
fieldset label{font-weight:400;color:var(--muted);font-size:.95rem}
input,textarea{display:block;width:100%;margin-top:.3rem;font:inherit;color:var(--ink);background:#F8FAFB;border:0;border-bottom:2px solid var(--ink);border-radius:2px 2px 0 0;padding:.6rem .7rem}
textarea{border:2px solid var(--ink);border-radius:2px;resize:vertical}
input:focus,textarea:focus{background:#FFFBEA}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.req{color:#B0262B}
.hp{position:absolute;left:-5000px;width:1px;height:1px;overflow:hidden}
.cf-turnstile{margin:.25rem 0 1rem;min-height:65px}
.fine{font-size:.9rem;color:var(--muted);margin:.75rem 0 0}
.form-msg{padding:.8rem 1rem;border-radius:3px;margin-bottom:1rem;font-weight:600}
.form-msg.ok{background:#E3F2E6;border-left:5px solid #2E7D3E}
.form-msg.err{background:#FBE6E6;border-left:5px solid #B0262B}
.invalid{background:#FBE6E6!important}

/* footer */
.site-foot{background:var(--ink);color:#D3DFE9;padding:2.5rem 0 1.25rem;margin-top:0}
.foot-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:2rem;align-items:start}
.foot-lic{font:700 1.4rem/1.2 var(--head);color:#fff}
.foot-nav{list-style:none;padding:0;margin:0;columns:2}
.foot-nav a{color:#DCE6EE;line-height:2}
.foot-copy{font-size:.9rem;color:#90A6B9;margin-top:2rem}

@media (max-width:860px){
  .hero-grid,.split,.split-wide,.split-form,.foot-grid,.facts,.split.about-snip{grid-template-columns:1fr}
  .hero-photo{box-shadow:8px 8px 0 var(--cell)}
  .gallery-4{grid-template-columns:repeat(2,1fr)}
  .nav{flex-wrap:nowrap;overflow-x:auto;gap:1.1rem;-webkit-overflow-scrolling:touch}
  .nav a{white-space:nowrap}
}
@media (max-width:560px){
  .panel-grid{grid-template-columns:1fr}
  .ckt:nth-child(odd){border-right:0}
  .ckt:nth-last-child(2){border-bottom:1px solid var(--rule)}
  .row2{grid-template-columns:1fr}
  .head-call{font-size:1rem;padding:.5rem .6rem}
  .brand span{font-size:1.4rem}
  .brand img{width:46px;height:46px}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}