.klarstrom { --electric-bg: #091218; --electric-panel: #101f27; --electric-grid: rgba(113,236,207,.13); --electric-mint: #70efd0; --electric-yellow: #ffd35b; --electric-text: #edf9f6; background: var(--electric-bg); color: var(--electric-text); font-family: "SFMono-Regular", Consolas, "Liberation Mono", ui-monospace, monospace; line-height: 1.65; }
.klarstrom .demo-bar { background: var(--electric-yellow); font-family: inherit; }
.electric-header { position: relative; display: grid; grid-template-columns: 210px 1fr auto; align-items: stretch; min-height: 88px; border-bottom: 1px solid var(--electric-grid); }
.electric-logo { display: grid; grid-template-columns: 38px 1fr; grid-template-rows: 1fr 1fr; align-items: end; gap: 0 .7rem; padding: 1rem var(--side); color: #fff; text-decoration: none; }
.electric-logo > span { grid-row: 1 / 3; display: grid; place-items: center; width: 38px; aspect-ratio: 1; background: var(--electric-mint); color: #071117; font-weight: 950; clip-path: polygon(0 0,100% 0,77% 100%,0 100%); }
.electric-logo strong { align-self: end; text-transform: uppercase; letter-spacing: .08em; }
.electric-logo small { align-self: start; color: var(--electric-mint); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; }
.electric-header nav { display: grid; grid-template-columns: repeat(4, 1fr); border-inline: 1px solid var(--electric-grid); }
.electric-header nav a { display: flex; align-items: center; gap: .6rem; min-height: 60px; padding: 1rem; border-right: 1px solid var(--electric-grid); color: #fff; font-size: .77rem; text-decoration: none; }
.electric-header nav a span { color: var(--electric-mint); }
.electric-call { display: flex; align-items: center; gap: 1rem; padding: 1rem var(--side); background: var(--electric-mint); color: #071117; font-size: .8rem; font-weight: 900; text-decoration: none; }
.electric-hero { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; min-height: 720px; overflow: hidden; background-image: linear-gradient(var(--electric-grid) 1px, transparent 1px), linear-gradient(90deg, var(--electric-grid) 1px, transparent 1px); background-size: 52px 52px; }
.electric-hero::before { position: absolute; inset: 0; background: radial-gradient(circle at 70% 45%, rgba(112,239,208,.15), transparent 30%), linear-gradient(90deg, var(--electric-bg) 10%, transparent 70%); content: ""; }
.electric-copy, .electric-art { position: relative; z-index: 1; }
.electric-copy { padding: clamp(3rem, 7vw, 7rem); }
.electric-code, .electric-section-heading p { color: var(--electric-mint); font-size: .75rem; font-weight: 800; letter-spacing: .12em; }
.electric-copy h1 { margin: 1.3rem 0; font-family: ui-sans-serif, system-ui, sans-serif; font-size: clamp(3.3rem, 7vw, 7rem); line-height: .9; letter-spacing: -.06em; }
.electric-copy h1 em { color: var(--electric-mint); font-style: normal; }
.electric-copy > p:not(.electric-code) { max-width: 650px; color: rgba(237,249,246,.75); font-family: ui-sans-serif, system-ui, sans-serif; font-size: 1.12rem; }
.electric-copy > div { display: flex; align-items: center; flex-wrap: wrap; gap: 1.2rem; margin-top: 2rem; }
.electric-copy > div > span { color: rgba(237,249,246,.6); font-size: .72rem; }
.electric-button { display: inline-flex; align-items: center; min-height: 50px; padding: .7rem 1.2rem; background: var(--electric-mint); color: #071117; font-weight: 900; text-decoration: none; clip-path: polygon(0 0,100% 0,calc(100% - 14px) 100%,0 100%); }
.electric-art { padding: 2rem var(--side) 2rem 0; }
.electric-art img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; object-position: 68% center; border: 1px solid var(--electric-grid); filter: drop-shadow(0 0 35px rgba(112,239,208,.15)); }
.electric-art > div { display: flex; justify-content: space-between; gap: 1rem; margin-top: -1px; padding: 1rem; border: 1px solid var(--electric-grid); background: rgba(9,18,24,.75); }
.electric-art > div span { color: rgba(237,249,246,.6); font-size: .7rem; text-transform: uppercase; }
.electric-art > div strong { color: var(--electric-mint); font-size: .75rem; text-transform: uppercase; }
.electric-services, .electric-projects, .electric-process, .electric-contact-section { width: min(100% - 2rem, 1400px); margin: 0 auto; padding-block: clamp(5rem, 9vw, 9rem); }
.electric-section-heading { display: grid; grid-template-columns: .35fr 1fr; gap: 2rem; margin-bottom: 3rem; }
.electric-section-heading h2, .electric-quality h2, .electric-process h2, .electric-contact-section h2 { max-width: 14ch; margin: 0; font-family: ui-sans-serif, system-ui, sans-serif; font-size: clamp(2.4rem, 5vw, 4.8rem); line-height: .98; letter-spacing: -.055em; }
.electric-service-grid { border-top: 1px solid var(--electric-grid); }
.electric-service-grid article { display: grid; grid-template-columns: 70px minmax(0, 1fr) 40px; gap: 1rem; align-items: start; padding: 1.5rem 0; border-bottom: 1px solid var(--electric-grid); transition: padding .2s ease, background .2s ease; }
.electric-service-grid article:hover { padding-inline: 1rem; background: var(--electric-panel); }
.electric-service-grid article > span { color: var(--electric-mint); }
.electric-service-grid article > b { color: var(--electric-yellow); }
.electric-service-grid h3 { margin: 0; font-family: ui-sans-serif, system-ui, sans-serif; font-size: 1.35rem; }
.electric-service-grid p { margin: .3rem 0 0; color: rgba(237,249,246,.65); font-family: ui-sans-serif, system-ui, sans-serif; }
.electric-quality { display: grid; grid-template-columns: .9fr 1.1fr; gap: 5rem; padding: clamp(5rem, 9vw, 9rem) max(var(--side), calc((100vw - 1400px) / 2)); background: var(--electric-panel); }
.electric-quality-intro > p, .electric-process > div > p, .electric-contact-section > div > p:first-child { color: var(--electric-mint); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; }
.electric-quality-grid { display: grid; gap: 1rem; }
.electric-quality-grid article { position: relative; padding: 1.5rem 1.5rem 1.5rem 2.3rem; border: 1px solid var(--electric-grid); }
.electric-quality-grid article > span { position: absolute; left: -.35rem; top: 1.8rem; width: .7rem; height: .7rem; background: var(--electric-yellow); box-shadow: 0 0 0 5px var(--electric-panel); transform: rotate(45deg); }
.electric-quality-grid h3 { margin: 0; color: var(--electric-mint); }
.electric-quality-grid p { margin: .4rem 0 0; color: rgba(237,249,246,.7); font-family: ui-sans-serif, system-ui, sans-serif; }
.electric-project-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.electric-project-grid article { padding: 1rem; border: 1px solid var(--electric-grid); background: #0d1920; }
.electric-project-graphic { position: relative; height: 240px; overflow: hidden; background-color: #0c171e; background-image: linear-gradient(var(--electric-grid) 1px,transparent 1px),linear-gradient(90deg,var(--electric-grid) 1px,transparent 1px); background-size: 24px 24px; }
.electric-project-graphic i { position: absolute; display: block; background: var(--electric-mint); box-shadow: 0 0 18px rgba(112,239,208,.5); }
.electric-project-graphic i:nth-child(1) { left: 20%; top: 20%; width: 2px; height: 60%; }
.electric-project-graphic i:nth-child(2) { left: 20%; top: 50%; width: 60%; height: 2px; }
.electric-project-graphic i:nth-child(3) { right: 20%; top: 30%; width: 18px; height: 18px; border: 3px solid var(--electric-yellow); border-radius: 50%; background: transparent; }
.graphic-2 { transform: scaleX(-1); }
.graphic-3 i:nth-child(1) { left: 50%; transform: rotate(35deg); }
.electric-project-grid article > p { color: rgba(237,249,246,.6); font-family: ui-sans-serif, system-ui, sans-serif; font-size: .8rem; }
.electric-project-grid h3 { margin: .5rem 0; font-family: ui-sans-serif, system-ui, sans-serif; }
.electric-process { display: grid; grid-template-columns: .8fr 1.2fr; gap: 4rem; border-top: 1px solid var(--electric-grid); }
.electric-process > div > span { color: rgba(237,249,246,.6); }
.electric-process ol { padding: 0; margin: 0; list-style: none; counter-reset: electric-step; }
.electric-process li { display: grid; grid-template-columns: 80px 1fr; padding: 1.3rem 0; border-bottom: 1px solid var(--electric-grid); counter-increment: electric-step; }
.electric-process li::before { content: "0" counter(electric-step); color: var(--electric-mint); }
.electric-process h3 { margin: 0; }
.electric-process p { margin: .3rem 0; color: rgba(237,249,246,.65); font-family: ui-sans-serif, system-ui, sans-serif; }
.electric-process li > p { grid-column: 2; min-width: 0; overflow-wrap: anywhere; }
.electric-contact-section { display: grid; grid-template-columns: 1.2fr .8fr; gap: 4rem; width: 100%; padding-inline: max(var(--side), calc((100vw - 1400px) / 2)); background: var(--electric-mint); color: #071117; }
.electric-contact-section > div > p:first-child { color: #164d44; }
.electric-contact-section > div > a { display: inline-flex; align-items: center; min-height: 50px; margin-top: 1rem; padding: .7rem 1rem; background: #071117; color: #fff; font-weight: 900; text-decoration: none; }
.electric-contact-section .contact-facts { border: 1px solid rgba(7,17,23,.25); border-radius: 0; background: transparent; }
.electric-contact-section .hours-list { border-color: rgba(7,17,23,.25); }

@media (max-width: 950px) {
  .electric-header { grid-template-columns: 1fr auto auto; }
  .electric-header nav { position: absolute; z-index: 10; top: 100%; right: 1rem; left: 1rem; grid-template-columns: 1fr; background: #0b171e; }
  .electric-header [data-nav-menu] { display: none; }
  .electric-header [data-nav-menu][data-open="true"] { display: grid; }
  .electric-header .nav-toggle { display: inline-flex; margin: auto 1rem; color: #fff; }
  .electric-hero, .electric-quality, .electric-process, .electric-contact-section { grid-template-columns: 1fr; }
  .electric-art { width: min(100%, 700px); padding: 1rem; }
  .electric-art img { aspect-ratio: 4 / 3; }
  .electric-project-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 620px) {
  .electric-call { display: none; }
  .electric-header { grid-template-columns: 1fr auto; }
  .electric-copy { padding: 4rem 1rem; }
  .electric-copy h1 { font-size: clamp(3rem, 16vw, 5rem); }
  .electric-section-heading, .electric-project-grid { grid-template-columns: 1fr; }
  .electric-service-grid article { grid-template-columns: 42px minmax(0, 1fr) 24px; }
  .electric-service-grid article > div { min-width: 0; overflow-wrap: anywhere; }
  .electric-project-graphic { height: 200px; }
}