/* Mountain West Lighting — marketing site
   One stylesheet, no framework, no build step. The whole site is static HTML
   so it can be edited by anybody who can read HTML, and served by Apache with
   nothing to go wrong at 2am in December. */

:root{
  --green:#0b3b28; --green-mid:#0f5537; --gold:#c9a227; --warm:#f7f3ea;
  --ink:#16201b; --muted:#5c6b63; --line:#dfe6e1; --white:#fff;
  --max:1120px;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--white);color:var(--ink);
  font:17px/1.65 -apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--green-mid)}
.wrap{max-width:var(--max);margin:0 auto;padding:0 22px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- header ---- */
.top{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.96);backdrop-filter:blur(6px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:18px;min-height:74px}
.logo{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--green);font-weight:800;letter-spacing:-.01em}
.logo img{width:42px;height:42px;border-radius:9px}
.logo span{font-size:17px;line-height:1.15;max-width:170px}
nav{margin-left:auto;display:flex;align-items:center;gap:26px}
nav a{color:var(--ink);text-decoration:none;font-size:15px;font-weight:600}
nav a:hover,nav a[aria-current=page]{color:var(--green-mid)}
.callbtn{
  background:var(--green);color:#fff !important;padding:11px 20px;border-radius:999px;
  font-weight:700;font-size:15px;white-space:nowrap
}
.callbtn:hover{background:var(--green-mid)}
.menu-toggle{display:none;margin-left:auto;background:none;border:1px solid var(--line);border-radius:8px;padding:8px 11px;font-size:19px;cursor:pointer}

/* ---- hero ---- */
.hero{
  background:linear-gradient(155deg,#0b3b28 0%,#123f2c 45%,#0a2c1e 100%);
  color:#fff;padding:86px 0 92px;position:relative;overflow:hidden
}
.hero:after{
  /* A suggestion of lights along a roofline, drawn rather than photographed --
     no stock photo pretends to be their work. */
  content:"";position:absolute;inset:auto 0 0 0;height:130px;
  background:
    radial-gradient(circle at 6% 62%,rgba(201,162,39,.85) 0 3px,transparent 4px),
    radial-gradient(circle at 14% 50%,rgba(255,244,214,.8) 0 3px,transparent 4px),
    radial-gradient(circle at 22% 66%,rgba(201,162,39,.75) 0 3px,transparent 4px),
    radial-gradient(circle at 30% 48%,rgba(255,244,214,.85) 0 3px,transparent 4px),
    radial-gradient(circle at 38% 64%,rgba(201,162,39,.8) 0 3px,transparent 4px),
    radial-gradient(circle at 46% 52%,rgba(255,244,214,.75) 0 3px,transparent 4px),
    radial-gradient(circle at 54% 66%,rgba(201,162,39,.85) 0 3px,transparent 4px),
    radial-gradient(circle at 62% 49%,rgba(255,244,214,.8) 0 3px,transparent 4px),
    radial-gradient(circle at 70% 63%,rgba(201,162,39,.75) 0 3px,transparent 4px),
    radial-gradient(circle at 78% 51%,rgba(255,244,214,.85) 0 3px,transparent 4px),
    radial-gradient(circle at 86% 65%,rgba(201,162,39,.8) 0 3px,transparent 4px),
    radial-gradient(circle at 94% 53%,rgba(255,244,214,.75) 0 3px,transparent 4px);
  opacity:.9;pointer-events:none
}
.hero h1{font-size:46px;line-height:1.1;margin:0 0 16px;letter-spacing:-.02em;max-width:15ch}
.hero p{font-size:19.5px;max-width:52ch;color:#dae7df;margin:0 0 30px}
.eyebrow{
  display:inline-block;font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold);margin-bottom:16px
}
.cta-row{display:flex;flex-wrap:wrap;gap:13px}
.btn{
  display:inline-block;padding:15px 28px;border-radius:999px;text-decoration:none;
  font-weight:700;font-size:16.5px;border:2px solid transparent;transition:.15s
}
.btn-gold{background:var(--gold);color:#231c00}
.btn-gold:hover{background:#dcb43a}
.btn-ghost{border-color:rgba(255,255,255,.5);color:#fff}
.btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.09)}
.btn-green{background:var(--green);color:#fff}
.btn-green:hover{background:var(--green-mid)}

/* ---- sections ---- */
section{padding:74px 0}
section.warm{background:var(--warm)}
h2{font-size:33px;line-height:1.2;margin:0 0 14px;letter-spacing:-.015em;color:var(--green)}
h3{font-size:19px;margin:0 0 8px;color:var(--green)}
.lede{font-size:19px;color:var(--muted);max-width:62ch;margin:0 0 34px}
.grid{display:grid;gap:26px}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:26px 24px}
.card p{margin:0;color:var(--muted);font-size:16px}
.card .ico{font-size:26px;margin-bottom:12px;display:block}

/* numbered steps */
.step{position:relative;padding-left:56px}
.step .n{
  position:absolute;left:0;top:2px;width:38px;height:38px;border-radius:50%;
  background:var(--green);color:#fff;display:grid;place-items:center;font-weight:800
}

/* ---- service area ---- */
.towns{display:flex;flex-wrap:wrap;gap:9px;margin-top:8px}
.town{background:#fff;border:1px solid var(--line);border-radius:999px;padding:7px 15px;font-size:14.5px}

/* ---- band ---- */
.band{background:var(--green);color:#fff;text-align:center}
.band h2{color:#fff}
.band p{color:#cfe0d6;max-width:56ch;margin:0 auto 26px;font-size:18px}

/* ---- forms ---- */
.form{background:#fff;border:1px solid var(--line);border-radius:14px;padding:28px}
.field{margin-bottom:17px}
label{display:block;font-weight:700;font-size:14.5px;margin-bottom:6px}
input[type=text],input[type=email],input[type=tel],textarea,select{
  width:100%;padding:13px 14px;border:1px solid #cfd8d2;border-radius:9px;
  font:inherit;font-size:16px;background:#fff
}
textarea{min-height:120px;resize:vertical}
input:focus,textarea:focus,select:focus{outline:2px solid var(--green-mid);outline-offset:1px;border-color:var(--green-mid)}
.consent{display:flex;gap:11px;align-items:flex-start;background:var(--warm);border:1px solid var(--line);border-radius:10px;padding:15px}
.consent input{margin-top:4px;width:19px;height:19px;flex:none}
.consent label{font-weight:400;font-size:14px;line-height:1.55;margin:0;color:var(--ink)}
.hp{position:absolute;left:-9999px}
.note{font-size:13.5px;color:var(--muted)}

/* ---- footer ---- */
footer{background:#0a2419;color:#b9ccc1;padding:52px 0 30px;font-size:15px}
footer h4{color:#fff;font-size:15px;margin:0 0 12px}
footer a{color:#dbe9e1;text-decoration:none}
footer a:hover{text-decoration:underline}
.fgrid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:34px;margin-bottom:34px}
.fbot{border-top:1px solid #1d3a2c;padding-top:20px;display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;font-size:13.5px}

@media (max-width:860px){
  .g3,.g4,.g2,.fgrid{grid-template-columns:1fr}
  .hero{padding:60px 0 70px}
  .hero h1{font-size:34px}
  .hero p{font-size:17.5px}
  h2{font-size:27px}
  nav{display:none}
  nav.open{
    display:flex;position:absolute;top:74px;left:0;right:0;flex-direction:column;
    align-items:flex-start;gap:0;background:#fff;border-bottom:1px solid var(--line);padding:8px 22px 18px
  }
  nav.open a{padding:12px 0;width:100%}
  .menu-toggle{display:block}
}