@import url("https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;1,6..72,400;1,6..72,500&family=Manrope:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap");
/* Webfont loading.
   FLAGGED SUBSTITUTION: no brand font files were supplied with the source
   material (four logo-mark images only). Newsreader / Manrope / IBM Plex
   Mono are Google Fonts nearest-match choices for a quiet, tailored,
   grey-toned premium contracting brand. Ask the user for real brand type
   files if any exist and swap this import for local @font-face rules. */



/* Nine Six Electrical — Color tokens
   A warm, desaturated stone-grey neutral system (never blue-grey) with a
   single muted brass/ember accent drawn from the lightbulb filament in the
   mark. Greys carry the brand; the accent is used sparingly — CTAs, focus,
   links, active states — never as a background fill. */

:root {
  /* ---- Base: Stone (warm neutral) ---- */
  --stone-0: #ffffff;
  --stone-50: #faf9f7;
  --stone-100: #f3f1ee;
  --stone-200: #e7e3de;
  --stone-300: #d3cdc5;
  --stone-400: #a9a099;
  --stone-500: #857c74;
  --stone-600: #675f59;
  --stone-700: #514a44;
  --stone-800: #383230;
  --stone-900: #221f1d;
  --stone-950: #161413;

  /* ---- Base: Ember (brass accent) ---- */
  --ember-100: #f3e6cf;
  --ember-200: #e4cda2;
  --ember-300: #d3ad72;
  --ember-400: #c2934f;
  --ember-500: #ab7c3d;
  --ember-600: #8c6431;
  --ember-700: #6c4c26;

  /* ---- Base: Semantic hues (muted, same family as ember) ---- */
  --sage-500: #5c7a63;
  --sage-600: #48604d;
  --brick-500: #a4493c;
  --brick-600: #82392f;
  --slate-500: #5c6d75;
  --slate-600: #48565d;

  /* ---- Semantic: surfaces ---- */
  --surface-page: var(--stone-50);
  --surface-card: var(--stone-0);
  --surface-sunken: var(--stone-100);
  --surface-inverse: var(--stone-950);
  --surface-overlay: rgba(22, 20, 19, 0.56);

  /* ---- Semantic: text ---- */
  --text-primary: var(--stone-900);
  --text-secondary: var(--stone-600);
  --text-tertiary: var(--stone-400);
  --text-on-inverse: var(--stone-50);
  --text-on-inverse-secondary: var(--stone-300);
  --text-link: var(--ember-600);
  --text-link-hover: var(--ember-700);

  /* ---- Semantic: borders ---- */
  --border-subtle: var(--stone-200);
  --border-default: var(--stone-300);
  --border-strong: var(--stone-500);
  --border-inverse: rgba(250, 249, 247, 0.16);

  /* ---- Semantic: interactive ---- */
  --accent: var(--ember-400);
  --accent-hover: var(--ember-500);
  --accent-active: var(--ember-600);
  --accent-subtle: var(--ember-100);
  --focus-ring: var(--ember-400);

  --action-primary-bg: var(--stone-900);
  --action-primary-bg-hover: var(--stone-800);
  --action-primary-bg-active: var(--stone-950);
  --action-primary-text: var(--stone-50);

  /* ---- Semantic: feedback ---- */
  --success: var(--sage-600);
  --success-bg: #eef2ee;
  --warning: var(--ember-600);
  --warning-bg: var(--ember-100);
  --danger: var(--brick-600);
  --danger-bg: #f6ece9;
  --info: var(--slate-600);
  --info-bg: #edf1f2;

  /* ---- Shadows (warm-tinted, never pure black) ---- */
  --shadow-color: 22, 20, 19;
  --shadow-sm: 0 1px 2px rgba(var(--shadow-color), 0.06);
  --shadow-md: 0 4px 12px rgba(var(--shadow-color), 0.08), 0 1px 2px rgba(var(--shadow-color), 0.06);
  --shadow-lg: 0 12px 32px rgba(var(--shadow-color), 0.12), 0 2px 6px rgba(var(--shadow-color), 0.06);
  --shadow-inset: inset 0 1px 2px rgba(var(--shadow-color), 0.08);
}

/* Nine Six Electrical — Typography tokens
   Pairing: Newsreader (display serif, quiet luxury) for headlines/quotes,
   Manrope (grotesk sans) for UI and body, IBM Plex Mono for specs, quote
   numbers and technical figures. See fonts.css for @font-face / CDN source —
   these are Google Fonts substitutions; no brand font files were supplied. */

:root {
  --font-display: "Newsreader", "Iowan Old Style", "Georgia", serif;
  --font-sans: "Manrope", -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;

  /* ---- Type scale (px, fluid via clamp for display sizes) ---- */
  --text-display-xl: 4.5rem;
  --text-display-lg: 3.25rem;
  --text-display-md: 2.25rem;
  --text-heading-lg: 1.5rem;
  --text-heading-md: 1.25rem;
  --text-heading-sm: 1.0625rem;
  --text-body-lg: 1.125rem;
  --text-body-md: 1rem;
  --text-body-sm: 0.9375rem;
  --text-caption: 0.8125rem;
  --text-overline: 0.75rem;

  --leading-tight: 1.1;
  --leading-snug: 1.25;
  --leading-normal: 1.45;
  --leading-relaxed: 1.7;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.02em;
  --tracking-overline: 0.12em;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-serif-regular: 400;
  --weight-serif-medium: 500;
}

/* Nine Six Electrical — Spacing, radius, borders, motion tokens */

:root {
  /* ---- Spacing (4px base) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* ---- Radius: small and quiet — never pill-everything ---- */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  /* ---- Border widths ---- */
  --border-thin: 1px;
  --border-thick: 1.5px;

  /* ---- Motion: understated, no bounce ---- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --ease-out: cubic-bezier(0, 0, 0.2, 1); /* @kind other */
  --duration-fast: 120ms; /* @kind other */
  --duration-base: 200ms; /* @kind other */
  --duration-slow: 320ms; /* @kind other */

  /* ---- Container ---- */
  --container-max: 1200px;
  --container-pad: clamp(20px, 4vw, 64px);
}

/* Nine Six Electrical — base resets, applied globally to consumers */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-body-md);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 { margin: 0; font-family: var(--font-display); font-weight: var(--weight-serif-medium); letter-spacing: var(--tracking-tight); }
p { margin: 0; }

a { color: var(--text-link); text-decoration: none; }
a:hover { color: var(--text-link-hover); text-decoration: underline; }

img, svg { display: block; max-width: 100%; }

::selection { background: var(--accent-subtle); color: var(--stone-900); }

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}


:root{--wrap:1240px;--gut:clamp(20px,4vw,56px)}
html{scroll-behavior:smooth}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.skip{position:absolute;left:-999px;top:8px;background:var(--stone-900);color:#fff;padding:10px 14px;border-radius:6px;z-index:100}.skip:focus{left:8px}
.eyebrow{font:700 var(--text-overline)/1 var(--font-sans);letter-spacing:var(--tracking-overline);text-transform:uppercase;color:var(--ember-600);margin-bottom:18px;display:block}
.dark .eyebrow{color:var(--ember-300)}
h1{font-size:clamp(2.4rem,5.6vw,4.4rem);line-height:1.04}
h2{font-size:clamp(1.8rem,3.4vw,2.7rem);line-height:1.12}
h3{font-size:1.3rem;line-height:1.25}
.lede{font-size:var(--text-body-lg);line-height:var(--leading-relaxed);color:var(--text-secondary);max-width:62ch;text-wrap:pretty}
.dark .lede{color:var(--stone-300)}
em{font-style:italic}
/* header */
.hdr{position:sticky;top:0;z-index:50;background:rgba(250,249,247,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--border-subtle)}
.hdr .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;height:72px}
.brand{display:flex;align-items:center;gap:10px;color:var(--text-primary);text-decoration:none!important}
.brand img{height:34px;width:auto}
.brand span{font:500 1.2rem var(--font-display);letter-spacing:var(--tracking-tight)}
.nav{display:flex;align-items:center;gap:28px}
.nav a{font:600 .9rem var(--font-sans);color:var(--text-secondary);padding:6px 0;border-bottom:2px solid transparent;text-decoration:none}
.nav a:hover,.nav a[aria-current=page]{color:var(--text-primary);border-color:var(--accent);text-decoration:none}
.menu-btn{display:none;background:none;border:1px solid var(--border-default);border-radius:6px;padding:9px 12px;font:600 .85rem var(--font-sans);cursor:pointer}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:600 .95rem var(--font-sans);padding:14px 24px;border-radius:var(--radius-md);border:1.5px solid transparent;cursor:pointer;text-decoration:none!important;transition:background var(--duration-base) var(--ease-standard),color var(--duration-base),border-color var(--duration-base)}
.btn-primary{background:var(--stone-900);color:var(--stone-50)}.btn-primary:hover{background:var(--stone-800);color:#fff}
.btn-light{background:var(--stone-50);color:var(--stone-900)}.btn-light:hover{background:#fff}
.btn-ghost{border-color:var(--border-strong);color:var(--text-primary)}.btn-ghost:hover{background:var(--stone-100)}
.btn-ghost.on-dark{border-color:rgba(250,249,247,.45);color:var(--stone-50)}.btn-ghost.on-dark:hover{background:rgba(250,249,247,.1)}
.btn-sm{padding:10px 18px;font-size:.88rem}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
/* hero */
.hero{position:relative;min-height:min(86vh,760px);display:flex;align-items:flex-end;color:var(--stone-50);background:var(--stone-950);overflow:hidden}
.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(22,20,19,.82) 0%,rgba(22,20,19,.35) 55%,rgba(22,20,19,.15) 100%)}
.hero .wrap{position:relative;z-index:2;padding-bottom:clamp(40px,7vw,88px);padding-top:120px;width:100%}
.hero h1{max-width:15ch;color:#fff}.hero h1 em{color:var(--ember-300)}
.hero .lede{color:var(--stone-200);margin-top:22px}
.hero.short{min-height:min(60vh,520px)}
.hero.short h1{max-width:20ch;font-size:clamp(2.2rem,4.8vw,3.8rem)}
/* sections */
.sec{padding:clamp(64px,9vw,120px) 0}
.sec.sunk{background:var(--surface-sunken)}
.sec.dark{background:var(--stone-950);color:var(--stone-50)}
.sec.dark h2,.sec.dark h3{color:var(--stone-50)}
.sec-head{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,80px);align-items:end;margin-bottom:clamp(36px,5vw,64px)}
.sec-head .lede{justify-self:end}
.trust{background:var(--stone-900);color:var(--stone-200)}
.trust .wrap{display:flex;flex-wrap:wrap;gap:12px 40px;justify-content:space-between;padding-top:22px;padding-bottom:22px;font:600 .8rem var(--font-sans);letter-spacing:.06em;text-transform:uppercase}
.trust b{color:var(--ember-300);font-weight:700}
/* service cards */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.card{display:flex;flex-direction:column;background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);overflow:hidden;color:inherit;text-decoration:none!important;transition:box-shadow var(--duration-base),transform var(--duration-base)}
a.card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.card img{aspect-ratio:4/3;width:100%;object-fit:cover}
.card .b{padding:26px 26px 30px;display:flex;flex-direction:column;gap:12px;flex:1}
.card p{color:var(--text-secondary);font-size:.95rem;line-height:1.6}
.card .more{margin-top:auto;font:700 .88rem var(--font-sans);color:var(--ember-600);padding-top:8px}
/* split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,96px);align-items:center}
.split.rev>:first-child{order:2}
.split img{width:100%;aspect-ratio:5/4;object-fit:cover;border-radius:var(--radius-lg)}
.split h2{margin-bottom:20px}
.ticks{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:14px}
.ticks li{position:relative;padding-left:30px;line-height:1.55;color:var(--text-secondary)}
.ticks li::before{content:"";position:absolute;left:0;top:.55em;width:14px;height:1.5px;background:var(--accent)}
.ticks li b{color:var(--text-primary);font-weight:600}
/* process */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:1px solid var(--border-inverse)}
.step{padding:28px 28px 8px 0}
.step i{font:500 .85rem var(--font-mono);font-style:normal;color:var(--ember-300)}
.step h3{margin:14px 0 10px}
.step p{color:var(--stone-300);font-size:.95rem;line-height:1.6}
.sec:not(.dark) .steps{border-color:var(--border-default)}.sec:not(.dark) .step p{color:var(--text-secondary)}.sec:not(.dark) .step i{color:var(--ember-600)}
/* gallery */
.gal{display:grid;grid-template-columns:repeat(12,1fr);gap:20px}
.gal figure{margin:0;position:relative;border-radius:var(--radius-lg);overflow:hidden;background:var(--stone-200);grid-column:span 4;aspect-ratio:4/3}
.gal figure.w{grid-column:span 8;aspect-ratio:auto}
.gal img{width:100%;height:100%;object-fit:cover}
.gal figcaption{position:absolute;left:0;right:0;bottom:0;padding:48px 20px 18px;color:#fff;background:linear-gradient(0deg,rgba(22,20,19,.72),transparent)}
.gal figcaption small{display:block;font:700 .7rem var(--font-sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ember-300);margin-bottom:4px}
.gal figcaption span{font:500 1.1rem var(--font-display)}
/* faq */
.faq{max-width:820px}
.faq details{border-top:1px solid var(--border-default);padding:22px 0}
.faq details:last-child{border-bottom:1px solid var(--border-default)}
.faq summary{cursor:pointer;font:500 1.2rem var(--font-display);list-style:none;display:flex;justify-content:space-between;gap:20px}
.faq summary::after{content:"+";font:400 1.4rem var(--font-sans);color:var(--ember-600)}
.faq details[open] summary::after{content:"–"}
.faq p{margin-top:14px;color:var(--text-secondary);line-height:1.7;max-width:64ch}
/* areas */
.areas{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:1px solid var(--border-default)}
.areas div{padding:26px 24px 8px 0}
.areas h3{margin-bottom:8px}.areas p{color:var(--text-secondary);font-size:.93rem;line-height:1.6}
/* cta band */
.cta{background:var(--stone-900);color:var(--stone-50);text-align:left}
.cta .wrap{display:grid;grid-template-columns:1.4fr 1fr;gap:40px;align-items:center;padding-top:clamp(56px,8vw,96px);padding-bottom:clamp(56px,8vw,96px)}
.cta h2{color:#fff}.cta p{color:var(--stone-300);margin-top:14px;max-width:48ch;line-height:1.6}
.cta .btn-row{margin:0;justify-content:flex-end}
/* form */
.form-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,6vw,96px);align-items:start}
form.quote{display:grid;gap:18px;background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:clamp(24px,3vw,40px);box-shadow:var(--shadow-sm)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
label{display:grid;gap:8px;font:600 .82rem var(--font-sans);color:var(--text-secondary)}
input,select,textarea{font:400 1rem var(--font-sans);padding:13px 14px;border:1px solid var(--border-default);border-radius:var(--radius-md);background:var(--stone-50);color:var(--text-primary);width:100%}
input:focus,select:focus,textarea:focus{outline:2px solid var(--focus-ring);outline-offset:1px;border-color:var(--accent)}
textarea{min-height:120px;resize:vertical}
.fine{font-size:.82rem;color:var(--text-secondary);line-height:1.55}
.contact-list{display:grid;gap:22px;margin-top:32px}
.contact-list dt{font:700 .72rem var(--font-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ember-600);margin-bottom:4px}
.contact-list dd{margin:0;font-size:1.05rem;line-height:1.5}
.ok{display:none;padding:14px 16px;background:var(--success-bg);color:var(--success);border-radius:var(--radius-md);font-weight:600;font-size:.92rem}
/* footer */
.ftr{background:var(--stone-950);color:var(--stone-300);padding:72px 0 32px}
.ftr .cols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px}
.ftr h4{font:700 .72rem var(--font-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ember-300);margin:0 0 16px}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:.93rem}
.ftr a{color:var(--stone-300)}.ftr a:hover{color:#fff}
.ftr .brand{color:#fff;margin-bottom:16px}.ftr .brand img{filter:brightness(0) invert(1);opacity:.92}
.ftr .legal{margin-top:56px;padding-top:24px;border-top:1px solid var(--border-inverse);font-size:.78rem;line-height:1.7;color:var(--stone-400)}
.breadcrumb{font:600 .8rem var(--font-sans);color:var(--stone-300);margin-bottom:20px}.breadcrumb a{color:var(--stone-200)}
.prose{max-width:68ch}.prose p{color:var(--text-secondary);line-height:1.75;margin-top:18px}.prose h2{margin-top:48px}
.sticky-call{display:none}
@media(max-width:960px){
.nav{position:absolute;left:0;right:0;top:72px;background:var(--stone-50);flex-direction:column;align-items:flex-start;gap:0;padding:8px var(--gut) 20px;border-bottom:1px solid var(--border-subtle);display:none}
.nav.open{display:flex}.nav a{padding:14px 0;width:100%;border-bottom:1px solid var(--border-subtle)}
.menu-btn{display:block}
.cards,.steps,.areas{grid-template-columns:repeat(2,minmax(0,1fr))}
.sec-head,.split,.form-grid,.cta .wrap{grid-template-columns:1fr}
.sec-head .lede{justify-self:start}.split.rev>:first-child{order:0}
.cta .btn-row{justify-content:flex-start}
.ftr .cols{grid-template-columns:1fr 1fr}
.gal figure,.gal figure.w{grid-column:span 12;aspect-ratio:4/3}
.sticky-call{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--stone-900);padding:10px var(--gut);gap:10px}.sticky-call .btn{flex:1}
body{padding-bottom:64px}
}
@media(max-width:560px){.cards,.steps,.areas,.row2,.ftr .cols{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
.revs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.rev{margin:0;background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:30px;display:flex;flex-direction:column;gap:16px}.stars{color:var(--ember-500);letter-spacing:.2em;font-size:1rem}.rev blockquote{margin:0;font:400 1.1rem/1.6 var(--font-display);color:var(--text-primary);text-wrap:pretty}.rev figcaption{margin-top:auto;font:700 .85rem var(--font-sans)}.rev figcaption span{font-weight:500;color:var(--text-secondary)}.areas h3 a{color:inherit}.areas{gap:0 24px}
@media(max-width:1100px){.nav{position:absolute;left:0;right:0;top:72px;background:var(--stone-50);flex-direction:column;align-items:flex-start;gap:0;padding:8px var(--gut) 20px;border-bottom:1px solid var(--border-subtle);display:none}.nav.open{display:flex}.nav a{padding:14px 0;width:100%;border-bottom:1px solid var(--border-subtle)}.menu-btn{display:block}}
@media(max-width:700px){.revs{grid-template-columns:1fr}}
.hero h1{max-width:22ch;font-size:clamp(2.2rem,4.6vw,3.8rem)}.foot-areas{margin-top:48px;padding-top:24px;border-top:1px solid var(--border-inverse)}.foot-areas p{font-size:.85rem;line-height:2.1;color:var(--stone-400)}.foot-areas a{color:var(--stone-300)}@media(min-width:961px){.gal figure,.gal figure.w{aspect-ratio:auto;height:clamp(240px,26vw,340px)}}.blog-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:28px}.post-card{display:flex;flex-direction:column;background:var(--stone-50);border:1px solid var(--border-strong);border-radius:var(--radius-md);overflow:hidden;text-decoration:none!important;color:inherit;transition:transform var(--duration-base) var(--ease-standard)}.post-card:hover{transform:translateY(-3px)}.post-card img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block}.post-card div{padding:22px;display:flex;flex-direction:column;gap:10px}.post-card small{letter-spacing:.12em;text-transform:uppercase;font-size:.72rem;color:var(--text-secondary)}.post-card h2,.post-card h3{font-size:1.25rem;line-height:1.25;margin:0}.post-card p{margin:0;color:var(--text-secondary);font-size:.95rem;line-height:1.55}.prose{max-width:720px;margin:0 auto}.prose h2{margin:44px 0 14px}.prose h3{margin:28px 0 8px}.prose p,.prose li{line-height:1.75;font-size:1.05rem}.prose ul{padding-left:22px}.prose .meta{color:var(--text-secondary);font-size:.9rem;margin-bottom:28px}.prose details{border-top:1px solid var(--border-strong);padding:16px 0}.prose summary{font-weight:600;cursor:pointer}.post-cta{max-width:720px;margin:48px auto 0;padding:32px;background:var(--stone-900);color:var(--stone-50);border-radius:var(--radius-md)}.post-cta h2{margin:0 0 10px;color:var(--stone-50)}.post-cta p{color:var(--stone-300);margin:0}.card .tag{font:700 .72rem var(--font-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--text-secondary)}.cards.two{grid-template-columns:repeat(2,minmax(0,1fr))}div.card:hover{transform:none;box-shadow:none}.prose p:first-child{margin-top:0}@media(max-width:700px){.cards.two{grid-template-columns:1fr}}