:root{
  --navy:#22344e;        /* deepened from the logo blue */
  --blue:#375579;        /* logo blue */
  --navy-soft:#52647a;
  --coral:#ff7580;       /* logo coral, decorative */
  --coral-deep:#d0394a;  /* coral dark enough for white text */
  --panel:#e4e9f0;
  --paper:#f5f7fa;
  --white:#ffffff;
  --display:"Barlow Condensed","Arial Narrow",Arial,sans-serif;
  --body:"Barlow","Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:6.5rem}
body{margin:0;background:var(--paper);color:var(--navy);font:400 1.0625rem/1.6 var(--body);-webkit-text-size-adjust:100%}
img,svg{max-width:100%;display:block}
img{height:auto}
a{color:inherit}
:focus-visible{outline:3px solid var(--coral-deep);outline-offset:3px;border-radius:2px}
.wrap{width:min(100% - 2.5rem,68rem);margin-inline:auto}
h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.05;margin:0;letter-spacing:.005em}
h1{font-size:clamp(2.9rem,9vw,5.25rem)}
h2{font-size:clamp(2.1rem,5.5vw,3.25rem)}
h3{font-size:1.5rem;line-height:1.15}
p{margin:0}

/* Header */
.site-head{position:sticky;top:0;z-index:10;background:var(--white);border-bottom:3px solid var(--navy)}
.site-head .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.15rem 1.5rem;padding-block:.45rem}
.brand{display:block;flex:none}
.brand img{height:3.4rem;width:auto}
.site-nav{display:flex;gap:1.4rem;flex-wrap:wrap;font-weight:500;font-size:1rem}
.site-nav a{text-decoration:none;padding-block:.35rem;border-bottom:2px solid transparent}
.site-nav a:hover{border-bottom-color:var(--coral)}
.call{background:var(--coral-deep);color:var(--white);text-decoration:none;font-weight:600;padding:.55rem .95rem;border-radius:4px;white-space:nowrap}
.call:hover{background:#b62f3f}
@media (max-width:46rem){
  .site-nav{order:3;width:100%;gap:1.4rem;font-size:.95rem;overflow-x:auto;flex-wrap:nowrap;white-space:nowrap;padding-bottom:.1rem}
  .call{font-size:.95rem;padding:.5rem .7rem}
  .nav-extra{display:none}
}
@media (min-width:54rem){.brand img{height:4.5rem}}

/* Hero */
.hero{background:var(--panel)}
.hero .wrap{display:grid;gap:2.5rem;padding-block:3.25rem 3rem;align-items:center}
.hero p{max-width:34rem;font-size:1.15rem;margin-top:1.25rem;color:#33465c}
.sectors{margin-top:.9rem;font-weight:600;color:var(--blue)}
.actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.9rem}
.btn{display:inline-block;font:600 1.05rem/1 var(--body);padding:.95rem 1.4rem;border-radius:4px;text-decoration:none;border:2px solid var(--navy);cursor:pointer}
.btn-solid{background:var(--navy);color:var(--white)}
.btn-solid:hover{background:var(--blue);border-color:var(--blue)}
.btn-line{background:transparent;color:var(--navy)}
.btn-line:hover{background:rgba(34,52,78,.08)}
@media (min-width:54rem){.hero .wrap{grid-template-columns:1.1fr .9fr;padding-block:5rem 4.5rem}}

/* Single line diagram */
.sld{background:var(--white);border:2px solid var(--navy);border-radius:6px;padding:1rem .75rem .5rem}
.sld text{font-family:var(--body);font-weight:600;fill:var(--navy)}
.sld .node{fill:var(--navy)}
.sld .wire{stroke:var(--navy);stroke-width:3;fill:none;stroke-linecap:round}
.sld .bus{stroke-width:7}
.sld .plate{fill:var(--paper);stroke:var(--navy);stroke-width:2}
.sld .cb{fill:var(--white);stroke:var(--navy);stroke-width:3}
.sld .blade{transform-box:view-box;transform-origin:180px 104px;transform:rotate(-28deg)}
@media (prefers-reduced-motion:no-preference){
  .sld .blade{animation:close .45s cubic-bezier(.5,0,.2,1.4) .5s both}
  .sld .live{animation:energise .35s ease-out both}
  .sld .d1{animation-delay:.95s}.sld .d2{animation-delay:1.15s}.sld .d3{animation-delay:1.3s}
  .sld .d4{animation-delay:1.45s}.sld .d5{animation-delay:1.6s}
  @keyframes close{from{transform:rotate(-28deg)}to{transform:rotate(0)}}
  @keyframes energise{from{stroke:var(--navy)}to{stroke:var(--coral-deep)}}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .sld .blade{transform:none}
  .sld .live{stroke:var(--coral-deep)}
}

/* Sections */
section{padding-block:4rem}
.lede{max-width:38rem;margin-top:1rem;color:var(--navy-soft)}
@media (min-width:54rem){section{padding-block:5.5rem}}

/* Our work */
.work{background:var(--white)}
.feature{margin:2.25rem 0 0}
.feature figure,.tiles figure{margin:0}
.work img{width:100%;border-radius:4px;background:var(--navy)}
.feature .main img{aspect-ratio:16/10;object-fit:cover}
.swatches{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin-top:.6rem}
.swatches img{aspect-ratio:4/3;object-fit:cover}
.work figcaption{margin-top:.6rem;font-size:.98rem;color:var(--navy-soft)}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem .9rem;margin-top:2.5rem}
.tiles img{aspect-ratio:4/3;object-fit:cover}
.work a{display:block;border-radius:4px}
@media (max-width:53.99rem){.tiles figure:last-child:nth-child(odd){grid-column:1/-1}}
@media (min-width:54rem){
  .tiles{grid-template-columns:repeat(6,1fr);gap:2rem 1.5rem}
  .tiles figure{grid-column:span 2}
  /* whatever the photo count, the last row always fills: two left over share the row, one left over becomes a banner */
  .tiles figure:nth-last-child(2):nth-child(3n+1),.tiles figure:last-child:nth-child(3n+2){grid-column:span 3}
  .tiles figure:last-child:nth-child(3n+1){grid-column:1/-1}
  .tiles figure:last-child:nth-child(3n+1) img{aspect-ratio:21/9}
}

/* Services as a switchboard legend */
.legend{margin-top:2.25rem;background:var(--white);border:2px solid var(--navy);border-radius:6px;overflow:hidden}
.legend-row{display:grid;gap:.4rem 2rem;padding:1.4rem 1.25rem;border-top:1px solid var(--panel)}
.legend-row:first-child{border-top:0}
.legend-row p,.legend-row ul{color:#3a4b61}
.legend-row ul{margin:0;padding-left:1.1rem}
.legend-row li{margin-block:.15rem}
.legend-row li::marker{color:var(--coral-deep)}
@media (min-width:46rem){
  .legend-row{grid-template-columns:16rem 1fr;padding:1.6rem 2rem;align-items:baseline}
}

/* Where we work */
.areas{background:var(--panel)}
.legend details{border-top:1px solid var(--panel)}
.legend details:first-child{border-top:0}
.legend summary{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:1.1rem 1.25rem;cursor:pointer;list-style:none;font:600 1.4rem/1.15 var(--display)}
.legend summary::-webkit-details-marker{display:none}
.legend summary span{font:400 .95rem/1 var(--body);color:var(--navy-soft);white-space:nowrap}
.legend summary span::after{content:" +";font-weight:600;font-size:1.15rem;color:var(--coral-deep)}
.legend details[open] summary span::after{content:" \2212"}
.legend summary:focus-visible{outline-offset:-4px}
.legend details p{padding:0 1.25rem 1.3rem;color:#3a4b61}
@media (min-width:46rem){.legend summary{padding:1.2rem 2rem}.legend details p{padding:0 2rem 1.5rem;max-width:58rem}}

/* Switchboard maintenance + FAQ */
.board{background:var(--white)}
.faq{background:var(--panel)}
.legend details p a{text-decoration-color:var(--coral);text-decoration-thickness:2px;text-underline-offset:3px}

/* Testimonials */
.said{background:var(--navy);color:var(--white)}
.said .lede{color:#c5cfdb}
.quotes{display:grid;gap:2.5rem;margin-top:2.5rem}
.quotes figure{margin:0;border-left:4px solid var(--coral);padding-left:1.25rem}
.quotes blockquote{margin:0;font-size:1.08rem}
.quotes blockquote p + p{margin-top:.8rem}
.quotes figcaption{margin-top:1rem;font-weight:600}
.quotes figcaption span{display:block;font-weight:400;color:#c5cfdb}
@media (min-width:54rem){.quotes{grid-template-columns:repeat(3,1fr);gap:2.5rem}}

/* Contact */
.contact .wrap{display:grid;gap:2.5rem}
.details{list-style:none;padding:0;margin:1.75rem 0 0;display:grid;gap:.9rem;font-size:1.15rem;font-weight:500}
.details a{text-decoration-color:var(--coral);text-decoration-thickness:2px;text-underline-offset:4px}
.details small{display:block;font-size:.9rem;font-weight:400;color:var(--navy-soft)}
.jot{background:var(--white);border:2px solid var(--navy);border-radius:6px;overflow:hidden}
.jot iframe{width:100%;min-width:100%;height:1100px;border:0;display:block}
.jot-alt{padding:.75rem 1rem;font-size:.95rem;color:var(--navy-soft);border-top:1px solid var(--panel)}
@media (min-width:54rem){.contact .wrap{grid-template-columns:.8fr 1.2fr;gap:4rem;align-items:start}}

/* Footer */
footer{background:var(--white);border-top:3px solid var(--navy);color:var(--navy-soft);padding-block:2rem;font-size:.98rem}
footer .wrap{display:flex;flex-wrap:wrap;gap:1rem 2rem;justify-content:space-between;align-items:center}
footer img{height:3.5rem;width:auto}
footer a{color:var(--navy);font-weight:500}

/* Solar page */
.hero-photo img{border-radius:6px;border:2px solid var(--navy);aspect-ratio:4/3;object-fit:cover;width:100%}
.sub .wrap{display:grid;gap:2rem}
.sub .wrap img{border-radius:6px;border:2px solid var(--navy);width:100%;object-fit:cover;aspect-ratio:4/3}
@media (min-width:54rem){.sub .wrap{grid-template-columns:1fr 1fr;gap:3.5rem;align-items:center}.sub.flip .wrap>div:first-child{order:2}}
.sub ul{margin:1rem 0 0;padding-left:1.1rem;color:#3a4b61}
.sub li{margin-block:.3rem}
.sub li::marker{color:var(--coral-deep)}
.sub h3{margin-top:1.5rem}
.sub p+p{margin-top:.8rem}