/* Option 2 · Navy + brass: same structure as Charcoal (white nav, sticky strip, Montserrat hero, squared corners) with navy #16283D bands and a brass/antique-gold accent. Built 2026-09-21 from the client's "Voltage Line Electrical" navy/brass mockup. Text accent (--copper) is a DARK brass for contrast on light backgrounds; the light brass (--brass) is for buttons, the strip, and text on navy. */
  :root{--band-accent:var(--brass);--bg:#f7f8fa;--panel:#eceff3;--ink:#1e2124;--slate:#1f3552;--deep:#16283d;--muted:#5b6470;--line:#dee2e7;
    --copper:#8c5d0f;--copper-dark:#6f4a0b;--copper-tint:#f6eedc;--sky:#e9edf2;--brass:#d9a83a;--teal:#d9a83a;--yellow:#d9a83a;--yellow-dark:#c7972b;--r:0px;
    --display:"Instrument Sans","Helvetica Neue",Arial,sans-serif}
  h1,h2,h3{letter-spacing:-.01em}
  .btn{border-radius:0;font-weight:700;font-family:var(--display);text-transform:uppercase;letter-spacing:.06em;font-size:14.5px}
  .btn-copper{background:var(--deep);color:#fff}.btn-copper:hover{background:#1f3552;color:#fff}
  .hero-e .btn-copper,.cta .btn-copper,.pagehead .btn-copper{background:var(--brass);color:#1a1a1a}
  .hero-e .btn-copper:hover,.cta .btn-copper:hover,.pagehead .btn-copper:hover{background:var(--yellow-dark);color:#1a1a1a}
  .btn-line{border-color:var(--slate);color:var(--slate)}.btn-line:hover{background:var(--slate);color:#fff}
  .hero-e .btn-line,.cta .btn-line,.pagehead .btn-line{border-color:rgba(255,255,255,.5);color:#fff}
  .hero-e .btn-line:hover,.cta .btn-line:hover,.pagehead .btn-line:hover{background:#fff;color:var(--deep);border-color:#fff}
  .note{background:#fff;color:#555;border-bottom:1px solid var(--line)}.note .sw a.on{color:var(--copper)}

  /* top strip: navy, brass number */
  .util{background:var(--deep);color:var(--brass);font-size:20px;font-weight:700;font-family:var(--display);position:sticky;top:0;z-index:21;border-bottom:2px solid var(--brass)}
  .util .wrap{height:48px;gap:12px}
  .util .wrap>a[href="/contact/"]{display:none}
  .util a[href^="tel:"]::before{content:"24/7 service";font-family:var(--body);font-weight:500;font-size:15px;color:rgba(255,255,255,.72);text-transform:uppercase;letter-spacing:.08em;margin-right:6px}
  .util a[href^="tel:"] svg{width:19px;height:19px;color:var(--brass)}
  html[data-nav="strip"] header.site{top:50px}
  .has-util header.site:not(.stuck) .hdr-right{display:flex}.has-util header.site:not(.stuck) .hdr-right .btn{display:inline-flex}.has-util .hdr-right .num{display:none}
  .has-util header.site:not(.stuck) nav.main{margin-left:0}
  .has-util header.site.stuck .hdr-right .num{display:none}
  nav.main a[href="/contact/"]{display:none}

  /* white nav, per client */
  header.site{background:#fff;border-bottom:1px solid var(--line)}
  header.site .wrap{height:92px}
  .logo .mark{height:60px}
  .logo .wordmark{line-height:1}
  .logo .name{font-size:37px;font-weight:700;letter-spacing:0;color:var(--deep)}
  .logo small{font-size:13px;font-weight:500;letter-spacing:.02em;color:var(--muted);margin-top:3px}
  nav.main{font-family:var(--display);font-size:16.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--deep);flex:1;display:flex;justify-content:space-evenly;gap:12px;padding:0 24px}
  nav.main a:hover{color:var(--copper)}nav.main a.on{color:var(--copper)}
  .hdr-right .btn{font-size:15.5px;padding:16px 26px;background:var(--brass);color:#1a1a1a}.hdr-right .btn:hover{background:var(--yellow-dark);color:#1a1a1a}
  .hdr-right .num svg{color:var(--copper)}

  /* hero: Montserrat, brass emphasis on navy */
  .hero-e h1,.hero-e .num,.hero-e .stage .k,.pagehead h1{font-family:"Montserrat","Helvetica Neue",Arial,sans-serif}
  .hero-e h1{font-weight:700;letter-spacing:-.015em}
  .hero-e h1 em,.hero-e .num svg{color:var(--brass)}
  .hero-e .stage .k{font-weight:600;color:var(--brass)}
  .ecard{border-radius:0;box-shadow:0 18px 44px rgba(22,40,61,.28)}.ecard .ic{border-radius:0;background:var(--copper-tint);color:var(--copper)}
  .ecard .k{font-family:var(--display)}
  .etrust{background:var(--bg)}.etrust .wrap{font-family:var(--display);font-weight:600}

  /* Turquoise accent (client, 2026-10-20): a small amount only. Deep teal on white, bright turquoise on navy; buttons and hero emphasis stay brass. */
  :root{--teal-deep:#0c727b;--teal-bright:#1fb8c4}  /* deep teal passes 4.5:1 on the grey panel (#eceff3) as well as white */
  .eyebrow{color:var(--teal-deep);letter-spacing:.14em;font-family:var(--display)}.eyebrow::before{background:var(--teal-deep)}
  .pagehead .eyebrow,.hero-e .stage .k,.process .n{color:var(--teal-bright)}
  html[data-bands="dark"] section.bandable .eyebrow,.cta .eyebrow{color:var(--teal-bright)}
  html[data-bands="dark"] section.bandable .eyebrow::before{background:var(--teal-bright)}
  nav.main a.on{color:var(--deep);box-shadow:0 2px 0 0 var(--teal-bright)}
  .mnav a.ml.on{color:var(--teal-deep)}
  .etrust .bk i{background:var(--teal-deep);box-shadow:0 0 0 4px rgba(14,124,134,.18)}
  .booking i{background:var(--brass);box-shadow:0 0 0 4px rgba(217,168,58,.25)}
  .process{background:var(--slate)}.process .n{color:var(--teal-bright)}
  .pagehead{background:var(--deep);color:#fff;border-bottom:0}
  .pagehead h1{color:#fff}.pagehead p{color:rgba(255,255,255,.74)}.pagehead .eyebrow{color:var(--teal-bright)}
  .cta{background:var(--deep)}.cta .btn-line:hover{color:var(--deep)}
  footer{background:var(--deep);color:rgba(255,255,255,.66);border-top:2px solid var(--brass);padding:48px 0 110px}
  footer strong{color:#fff}
  .hub{background:var(--slate);border-radius:0}.hub i{background:var(--brass)}
  .stars{color:var(--copper)}.lead .mark{color:var(--copper)}
  .lead,.rev{border-radius:0;background:transparent;padding:4px 0 4px 28px;border-left:2px solid var(--brass)}
  .lead .mark{display:none}.rev{border-left-color:var(--line)}
  html[data-bands="dark"] section.bandable .lead,html[data-bands="dark"] section.bandable .rev{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-left:2px solid var(--brass);padding:28px 30px}
  html[data-bands="dark"] section.bandable .rev{border-left-color:rgba(255,255,255,.35)}
  .card,.door,.work figure,.gallery figure,.portrait,form,form input,form textarea,form select,.zout,.towns li,.zrow input,.qs label,.result,.ledger .go{border-radius:0}
  @media (max-width:1180px){header.site .wrap{gap:12px}.logo small{font-size:11.5px}.logo .name{font-size:32.5px}nav.main{font-size:14px;letter-spacing:.03em;padding:0 8px}.hdr-right .btn{font-size:14px;padding:14px 18px}}
  @media (max-width:960px){nav.main{display:none}.util .wrap{height:44px}html[data-nav="strip"] header.site{top:46px}}
  @media (max-width:640px){.util{font-size:17px}.util a[href^="tel:"]::before{display:none}.util .wrap{height:40px}html[data-nav="strip"] header.site{top:42px}.callbar{background:var(--deep);color:#fff}}