/* Mills Electric Inc — site styles
   All values sourced from brand_assets/tokens.css (brand book v3.1).
   No ad-hoc colors, spacing from the 4px scale only, radii <= 10px.

   Signal Red is trim, not a theme — budget is 2% of the visual field.
   It appears in exactly three places on this site:
     1. a 3px edge under the masthead            (see note at .masthead)
        — only once light content scrolls under it; hidden over the black band
     2. the 12deg sheared edge on the home hero  (the bolt accent)
     3. error state on the contact form          (status, via --danger)
   Never --red as type on black (4.19:1) — use --red-300.
   Never red touching gold (2.27:1) — keep black or white between them.

   Gold is flat on screen. The brushed sheen belongs to the lockup artwork and to
   large-format print only — never to a CSS fill. */

:root{
  --black:#0B0B0C; --black-900:#000000; --black-700:#1A1A1D; --black-600:#2B2B30;
  --black-400:#8E8E97; --black-200:#C9C9CF; --black-50:#EFEFF1;
  --gold:#DFAD37; --gold-700:#6E5212; --gold-600:#B98A1E; --gold-300:#EAC97B;
  --gold-100:#EEDEB9; --gold-50:#F8F3E8;
  --red:#E90206; --red-800:#7E0103; --red-700:#B60205; --red-600:#C50205;
  --red-300:#FE6C6F; --red-100:#FDBABB; --red-50:#FEE9EA;
  --ink:#111113; --slate:#6B6B73; --line:#DCDCE0; --mist:#F6F6F7; --white:#fff;
  --success:#15803D; --warning:#B54708; --danger:#B60205; --info:#0E7490;

  --shadow-sm:0 1px 2px rgba(11,11,12,.08);
  --shadow-md:0 4px 12px rgba(11,11,12,.12);
  --shadow-lg:0 12px 32px rgba(11,11,12,.16);
  /* gold-600 clears 3:1 on white; core gold is only 2.06:1 and fails as a lone
     non-text indicator. On black surfaces the ring switches to gold-300. */
  --focus:0 0 0 3px rgba(185,138,30,.65);
  --focus-dark:0 0 0 3px rgba(234,201,123,.70);
  --ease:cubic-bezier(.2,0,0,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--white); color:var(--ink);
  font-family:'Inter',-apple-system,'Segoe UI',sans-serif;
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0; text-wrap:balance}
p{margin:0}
img{max-width:100%; display:block}
/* baseline icon size — class rules below (.btn svg, .stars svg, ...) override this */
svg{width:24px; height:24px; flex:none}
ul{margin:0; padding:0; list-style:none}

/* ---------- type scale: 1.25 ratio, 16px base ---------- */
.t-display{font-family:'Archivo Black',Arial Black,sans-serif; text-transform:uppercase;
  font-size:clamp(2.441rem,6.4vw,3.815rem); line-height:1.02; letter-spacing:-.02em; font-weight:400}
.t-h1{font-family:'Archivo Black',Arial Black,sans-serif; text-transform:uppercase;
  font-size:clamp(2.441rem,5vw,3.05rem); line-height:1.06; letter-spacing:-.02em; font-weight:400}
.t-h2{font-family:'Archivo Black',Arial Black,sans-serif; text-transform:uppercase;
  font-size:clamp(1.953rem,4vw,2.441rem); line-height:1.12; letter-spacing:-.015em; font-weight:400}
.t-h3{font-size:1.953rem; line-height:1.2; letter-spacing:-.01em; font-weight:700}
.t-h4{font-size:1.563rem; line-height:1.3; letter-spacing:-.01em; font-weight:700}
.t-lead{font-size:1.25rem; line-height:1.55}
.t-small{font-size:.875rem; line-height:1.5}
.t-caption{font-size:.75rem; line-height:1.45; font-weight:500}
.t-eyebrow{font-size:.75rem; line-height:1.2; font-weight:700; letter-spacing:.12em; text-transform:uppercase}
.t-data{font-family:'JetBrains Mono',ui-monospace,monospace; font-size:.875rem; line-height:1.5;
  font-variant-numeric:tabular-nums}
.prose{max-width:68ch}

/* ---------- layout ---------- */
.wrap{max-width:1200px; margin:0 auto; padding-inline:24px}
.section{padding-block:96px}
.section-sm{padding-block:64px}
.mist{background:var(--mist); border-block:1px solid var(--line)}
.dark{background:var(--black); color:var(--white)}
.dark .t-lead,.dark p{color:var(--black-200)}
.grid{display:grid}
.auto-3{grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}
.auto-2{grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr))}
.gap-6{gap:24px} .gap-8{gap:32px} .gap-12{gap:48px}
@media (max-width:960px){ .section{padding-block:64px} .section-sm{padding-block:48px} }
@media (max-width:600px){ .section{padding-block:48px} .wrap{padding-inline:16px} }

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:48px; padding-inline:24px; border:0; border-radius:6px; cursor:pointer;
  font-family:inherit; font-size:1rem; line-height:1; font-weight:600; letter-spacing:.02em;
  text-decoration:none; white-space:nowrap;
  transition:background var(--ease) 200ms, color var(--ease) 200ms, box-shadow var(--ease) 200ms}
.btn:focus-visible{outline:0; box-shadow:var(--focus)}
.btn svg{width:18px; height:18px; flex:none}
.btn-primary{background:var(--gold); color:var(--black)}
.btn-primary:hover{background:var(--gold-600)}
.btn-ondark{background:var(--white); color:var(--black)}
.btn-ondark:focus-visible{box-shadow:var(--focus-dark)}
.btn-ondark:hover{background:var(--black-50)}
.btn-outline{background:transparent; color:var(--black); box-shadow:inset 0 0 0 2px currentColor}
.btn-outline:hover{background:var(--black-50)}
.btn-outline:focus-visible{box-shadow:inset 0 0 0 2px currentColor, var(--focus)}
.btn-sm{height:40px; padding-inline:16px; font-size:.875rem}

/* ---------- header ---------- */
.masthead{background:var(--black); border-bottom:3px solid transparent;
  position:sticky; top:0; z-index:40;
  transition:border-bottom-color var(--ease) 200ms}
/* The red trim only earns its edge against light content. While the black hero or
   pagehead is still behind the header the border stays transparent — red on black is
   4.19:1 and reads as decoration rather than an edge. Width never changes, so nothing
   shifts when it appears. Toggled by .past-dark in assets/site.js.

   3px, not the book's 2px hairline: this is a full-width architectural edge, not a
   rule under a heading. It stays under the 4px of the gold hero/pagehead/band
   rules on purpose — red must never carry the same weight as the gold accent. */
.masthead.past-dark{border-bottom-color:var(--red)}
/* more room above than below so the logo isn't crowded against the browser chrome */
.masthead-in{display:flex; align-items:center; gap:24px; padding-block:24px 16px}
.masthead img{width:165px; height:auto}  /* brand book: 160px digital minimum for the lockup */
.logo-link{display:block; border-radius:4px}
.logo-link:focus-visible{outline:0; box-shadow:var(--focus-dark)}
.nav{display:flex; align-items:center; gap:4px; margin-left:auto}
.navlink{color:var(--black-200); text-decoration:none; font-size:.875rem; font-weight:500;
  padding:8px 12px; border-radius:4px;
  transition:color var(--ease) 200ms, background var(--ease) 200ms}
.navlink:hover{color:var(--white); background:rgba(255,255,255,.08)}
.navlink:focus-visible{outline:0; box-shadow:var(--focus-dark)}
.navlink[aria-current="page"]{color:var(--white); background:rgba(223,173,55,.18)}
@media (max-width:960px){
  .masthead-in{flex-wrap:wrap; gap:16px}
  .nav{width:100%; margin-left:0; flex-wrap:wrap; order:3}
  .nav .btn{margin-left:auto}
}

/* ---------- page hero (inner pages) ---------- */
.pagehead{background:var(--black); color:var(--white); border-bottom:4px solid var(--gold);
  padding-block:64px}
.pagehead p{color:var(--black-200)}
.crumb{color:var(--gold-300); margin-bottom:16px}

/* ---------- home hero ---------- */
.hero{background:var(--black); color:var(--white); border-bottom:4px solid var(--gold)}
.hero-in{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; padding-block:96px}
.hero p{color:var(--black-200)}
/* the bolt accent — 12 degrees, one per page */
.hero-media{position:relative; height:500px; overflow:hidden;
  clip-path:polygon(106px 0, 100% 0, 100% 100%, 0 100%)}
.hero-media img{width:100%; height:100%; object-fit:cover; object-position:84% 50%}
.hero-media::after{content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg, rgba(11,11,12,.78) 0%, rgba(11,11,12,.18) 60%, rgba(11,11,12,0) 100%)}
/* the sheared edge, drawn in Signal Red — one diagonal per page, red OR yellow, never both */
.hero-media::before{content:""; position:absolute; inset:0; z-index:2;
  background:var(--red); clip-path:polygon(106px 0, 111px 0, 5px 100%, 0 100%)}
@media (max-width:960px){
  .hero-in{grid-template-columns:1fr; gap:48px; padding-block:64px}
  .hero-media{height:320px; clip-path:none}
  .hero-media::before{display:none}
}
@media (max-width:600px){ .hero-in{padding-block:48px} }
.actions{display:flex; flex-wrap:wrap; gap:16px; margin-top:32px}
.facts{display:flex; flex-wrap:wrap; gap:8px; margin-top:32px}
.fact{font-size:.75rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--black-200); background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.15); border-radius:4px; padding:8px 12px}

/* ---------- cards ---------- */
.card{background:var(--white); border:1px solid var(--line); border-radius:10px; padding:32px;
  box-shadow:var(--shadow-sm);
  transition:box-shadow var(--ease) 200ms, border-color var(--ease) 200ms}
.card-hover:hover{box-shadow:var(--shadow-md); border-color:var(--black-200)}
.icon-box{width:56px; height:56px; border-radius:6px; background:var(--black-50); color:var(--black);
  display:flex; align-items:center; justify-content:center; margin-bottom:24px}
.icon-box svg{width:24px; height:24px}

/* ---------- google rating snapshot ---------- */
.snapshot{background:var(--white); border:1px solid var(--line); border-radius:10px;
  box-shadow:var(--shadow-md); overflow:hidden}
.snapshot-head{display:flex; align-items:center; gap:12px; padding:16px 32px;
  border-bottom:1px solid var(--line); background:var(--mist)}
.snapshot-head .t-eyebrow{color:var(--slate)}
.snapshot-head svg{width:20px; height:20px; color:var(--gold-700)}
.snapshot-body{display:grid; grid-template-columns:repeat(3,1fr); gap:32px; padding:32px}
.snap-cell{text-align:center}
.snap-n{font-family:'Archivo Black',Arial Black,sans-serif; font-size:2.441rem; line-height:1.12;
  letter-spacing:-.015em; color:var(--black)}
.snap-l{font-size:.875rem; color:var(--slate); margin-top:8px}
.snapshot-foot{padding:24px 32px; border-top:1px solid var(--line); display:flex;
  flex-wrap:wrap; gap:16px; align-items:center}
@media (max-width:600px){
  .snapshot-body{grid-template-columns:1fr; gap:24px}
  .snapshot-head,.snapshot-body,.snapshot-foot{padding-inline:24px}
}

/* stars — filled for ratings (a data display, not an interface icon) */
.stars{display:inline-flex; gap:4px; align-items:center}
.stars svg{width:16px; height:16px; fill:var(--gold-600); stroke:none}
.stars.on-dark svg{fill:var(--gold-300)}
.stars-lg svg{width:20px; height:20px}

/* ---------- reviews ---------- */
.review{background:var(--white); border:1px solid var(--line); border-radius:10px; padding:24px;
  box-shadow:var(--shadow-sm); display:flex; flex-direction:column; gap:12px}
.review-top{display:flex; align-items:center; gap:12px}
.avatar{width:40px; height:40px; border-radius:9999px; background:var(--black-50); color:var(--black);
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.875rem; flex:none}
.review-name{font-weight:600; font-size:.875rem; color:var(--ink)}
.review-date{font-size:.75rem; color:var(--slate)}
.review-body{color:var(--slate); font-size:.875rem; line-height:1.6}

/* placeholder notice */
.notice{background:var(--gold-50); border:1px solid var(--gold-100);
  border-left:4px solid var(--warning); border-radius:0 6px 6px 0; padding:16px 24px;
  display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:start}
.notice svg{width:20px; height:20px; color:var(--warning); flex:none; margin-top:4px}
.notice p{font-size:.875rem; color:var(--ink)}
.notice b{color:var(--warning)}

/* ---------- steps (a real sequence) ---------- */
.step{display:grid; grid-template-columns:auto 1fr; gap:24px; align-items:start;
  padding-block:24px; border-top:1px solid rgba(255,255,255,.12)}
.step:first-child{border-top:0}
.step-n{font-family:'JetBrains Mono',ui-monospace,monospace; font-size:.875rem; font-weight:700;
  color:var(--gold-300); font-variant-numeric:tabular-nums; padding-top:4px}

/* ---------- stats ---------- */
.stat-n{font-family:'Archivo Black',Arial Black,sans-serif; font-size:2.441rem; line-height:1.12;
  letter-spacing:-.015em; color:var(--black)}
.dark .stat-n{color:var(--white)}
/* a word rather than a figure — steps down so it fits the same column the
   numbers sit in, and stays under them in weight so the row still reads as data.
   line-height is pinned to .stat-n's box (2.441rem x 1.12) so the caption under a
   word lines up with the caption under a figure across the grid row. */
.stat-word{font-size:clamp(1.563rem,3.2vw,1.953rem); letter-spacing:-.01em;
  line-height:2.734rem}

/* ---------- tables ---------- */
.tbl{width:100%; border-collapse:collapse}
.tbl th{text-align:left; font-size:.75rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--slate); padding:0 16px 12px; border-bottom:1px solid var(--line)}
.tbl td{padding:12px 16px; border-bottom:1px solid var(--line); font-size:.875rem}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr:nth-child(odd){background:var(--black-50)}

/* ---------- town chips ---------- */
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{font-size:.875rem; font-weight:500; color:var(--black); background:var(--black-50);
  border:1px solid var(--line); border-radius:4px; padding:8px 12px}

/* ---------- FAQ ---------- */
.faq{border:1px solid var(--line); border-radius:10px; overflow:hidden; background:var(--white)}
.faq details{border-top:1px solid var(--line)}
.faq details:first-child{border-top:0}
.faq summary{cursor:pointer; padding:24px; font-weight:600; font-size:1rem; color:var(--black);
  display:flex; align-items:center; gap:12px; list-style:none;
  transition:background var(--ease) 200ms}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{background:var(--mist)}
.faq summary:focus-visible{outline:0; box-shadow:var(--focus)}
.faq summary::after{content:""; margin-left:auto; width:10px; height:10px; flex:none;
  border-right:2px solid var(--slate); border-bottom:2px solid var(--slate);
  transform:rotate(45deg); transition:transform var(--ease) 200ms}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq .faq-body{padding:0 24px 24px; color:var(--slate); font-size:.875rem; line-height:1.6}

/* ---------- contact layout ---------- */
.contact-grid{display:grid; gap:48px; grid-template-columns:1fr; align-items:start}
@media (min-width:900px){ .contact-grid{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)} }

/* long unbroken strings (emails, urls) must not force the page wide */
.breakable{overflow-wrap:anywhere}

/* ---------- forms ---------- */
.field{display:block; margin-bottom:24px}
.label{display:block; font-size:.875rem; font-weight:600; color:var(--black); margin-bottom:8px}
.input,.textarea,.select{width:100%; font-family:inherit; font-size:1rem; color:var(--ink);
  background:var(--white); border:1px solid var(--line); border-radius:4px; padding:12px 16px;
  transition:border-color var(--ease) 200ms, box-shadow var(--ease) 200ms}
.input:hover,.textarea:hover,.select:hover{border-color:var(--black-200)}
.input:focus-visible,.textarea:focus-visible,.select:focus-visible{
  outline:0; border-color:var(--black-600); box-shadow:var(--focus)}
.textarea{min-height:128px; resize:vertical; line-height:1.6}
.hint{font-size:.75rem; color:var(--slate); margin-top:8px}

/* honeypot — off-screen for bots, invisible and unreachable for people */
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

.form-status{margin-top:16px; padding:12px 16px; border-radius:4px; font-size:.875rem;
  border-left:4px solid var(--slate); background:var(--mist); color:var(--ink)}
.form-status.is-ok{border-left-color:var(--success); background:var(--black-50)}
.form-status.is-err{border-left-color:var(--danger); background:var(--red-50)}
.form-status.is-pending{border-left-color:var(--info)}

/* ---------- footer ---------- */
.foot{background:var(--black-900); color:var(--black-400); border-top:1px solid rgba(255,255,255,.10)}
.foot a{color:var(--black-200); text-decoration:none; font-size:.875rem; display:block; padding-block:8px;
  transition:color var(--ease) 200ms}
.foot a:hover{color:var(--white)}
.foot a:focus-visible{outline:0; box-shadow:var(--focus-dark); border-radius:2px}
.foot h4{font-size:.75rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--white); margin-bottom:12px}

/* ---------- CTA band ---------- */
.band{background:var(--black); color:var(--white); border-top:4px solid var(--gold)}
.band p{color:var(--black-200)}

/* ---------- utility ---------- */
.skip{position:absolute; left:-9999px}
.skip:focus{left:24px; top:24px; z-index:50; background:var(--gold); color:var(--black);
  padding:12px 24px; border-radius:6px; font-weight:600}
.mt-3{margin-top:12px} .mt-4{margin-top:16px} .mt-6{margin-top:24px}
.mt-8{margin-top:32px} .mt-12{margin-top:48px}
.muted{color:var(--slate)}
.on-dark-muted{color:var(--black-200)}

/* ---------- service-area links (v3.1, added with the town pages) ----------
   Town names in index.html's service-area table and about.html's chip row link
   through to the per-town pages. Without these the town pages are orphans
   reachable only from sitemap.xml, which is not a crawl path worth relying on.
   Core gold is 2.06:1 on white and must never be link text, so the light
   surface uses gold-700 (7.30:1) and the dark chips use gold-300 (12.31:1).
   There is no generic a:focus-visible rule in this sheet, so both get one. */
.tbl a{color:var(--gold-700); text-decoration:none; font-weight:600}
.tbl a:hover{text-decoration:underline}
.tbl a:focus-visible{outline:0; box-shadow:var(--focus); border-radius:2px}
.chip-link{color:var(--gold-300); text-decoration:none}
.chip-link:hover{text-decoration:underline}
.chip-link:focus-visible{outline:0; box-shadow:var(--focus-dark); border-radius:4px}

@media (prefers-reduced-motion:reduce){ *{transition:none!important; animation:none!important} }