/* First Alarm Lighting Co — shared site styles */

:root{
  --ground:#0A0F1A; --surface:#111A29; --surface-2:#162134; --line:#22304a;
  --red:#C8102E; --red-deep:#A50E26; --navy:#22336B;
  --glow:#F2C57C; --glow-hi:#FFE3B0;
  --white:#F5F6F8; --grey:#9AA5B4; --grey-dim:#6E7C8E;
  color-scheme: dark;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{animation:none!important;transition:none!important} }

body{background:var(--ground);color:var(--grey);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:1080px;margin:0 auto;padding-left:20px;padding-right:20px}
.narrow{max-width:760px;margin:0 auto}

h1,h2,h3,.display{font-family:Archivo,-apple-system,Helvetica,Arial,sans-serif;
  color:var(--white);letter-spacing:-.025em;text-wrap:balance}
h1{font-weight:900;font-size:clamp(32px,5.6vw,56px);line-height:1.03}
h2{font-weight:900;font-size:clamp(25px,4.2vw,38px);line-height:1.08}
h3{font-weight:800;font-size:20px;line-height:1.25;letter-spacing:-.015em}
p{margin:0 0 12px}
strong,b{color:var(--white);font-weight:700}

.block{font-family:Saira,Archivo,-apple-system,Helvetica,Arial,sans-serif}
.eyebrow{font-family:Saira,Archivo,sans-serif;font-size:12.5px;font-weight:800;
  letter-spacing:.2em;text-transform:uppercase;color:var(--red)}
.eyebrow.warm{color:var(--glow)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:Archivo,sans-serif;font-weight:700;font-size:16px;padding:15px 26px;
  border-radius:9px;border:0;cursor:pointer;background:var(--red);color:#fff;
  text-decoration:none;transition:background .15s ease, transform .1s ease}
.btn:hover{background:var(--red-deep)}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:transparent;color:var(--glow);
  box-shadow:inset 0 0 0 1.5px rgba(242,197,124,.42)}
.btn.ghost:hover{background:rgba(242,197,124,.09)}
.btn.big{font-size:17.5px;padding:17px 32px}
:focus-visible{outline:2.5px solid var(--glow);outline-offset:3px;border-radius:4px}

/* ---------- header ---------- */
header.site{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;
  background:rgba(10,15,26,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.hdr{display:flex;align-items:center;gap:12px;padding-block:11px}
.hdr .mark{display:flex;align-items:center;gap:12px;text-decoration:none;margin-right:auto}
.hdr .mark img{height:50px;width:auto;flex:none;
  filter:drop-shadow(0 0 14px rgba(200,16,46,.28))}
.hdr .nm{font-family:Saira,Archivo,sans-serif;font-weight:800;font-size:15.5px;line-height:1.1;
  color:var(--white);letter-spacing:.04em}
.hdr .nm span{display:block;font-size:10.5px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--grey-dim);margin-top:3px}
.hdr nav{display:flex;align-items:center;gap:20px}
.hdr .navlink{font-family:Saira,Archivo,sans-serif;font-weight:700;font-size:12.5px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--grey);text-decoration:none;
  white-space:nowrap;transition:color .15s ease}
.hdr .navlink:hover{color:var(--glow)}
.hdr .navlink[aria-current="page"]{color:var(--glow-hi)}
.hdr .tel{font-family:Archivo,sans-serif;font-weight:800;font-size:17px;color:var(--white);
  text-decoration:none;white-space:nowrap}
.hdr .tel:hover{color:var(--glow)}
.hdr .btn{padding:11px 18px;font-size:15px}
@media(max-width:1020px){ .hdr .btn{display:none} }
@media(max-width:860px){ .hdr nav{display:none} .hdr .mark .nm span{display:none} }

/* mobile nav strip under the header */
.mobnav{display:none;border-bottom:1px solid var(--line);background:var(--surface);
  overflow-x:auto;-webkit-overflow-scrolling:touch}
.mobnav .inner{display:flex;gap:6px;padding:9px 16px;min-width:max-content}
.mobnav a{font-family:Saira,Archivo,sans-serif;font-size:11.5px;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;text-decoration:none;color:var(--grey);
  padding:7px 11px;border-radius:6px;background:var(--ground);border:1px solid var(--line);
  white-space:nowrap}
.mobnav a[aria-current="page"]{color:var(--glow-hi);border-color:rgba(242,197,124,.4)}
@media(max-width:860px){ .mobnav{display:block} }

/* ---------- masthead ---------- */
.mast{border-bottom:1px solid var(--line);
  background:radial-gradient(120% 90% at 82% -20%, rgba(242,197,124,.13) 0%, rgba(242,197,124,0) 58%),
    linear-gradient(172deg,#0A0F1A 0%,#0D1523 100%)}
.mast .wrap{padding-block:clamp(44px,6.5vw,80px) clamp(38px,5vw,60px)}
.mast h1{margin-top:10px;max-width:19ch}
.mast .trust{font-family:Archivo,sans-serif;font-weight:800;color:var(--glow-hi);
  font-size:clamp(19px,2.7vw,28px);line-height:1.15;letter-spacing:-.02em;margin-top:14px}
.mast .lede{font-size:clamp(17px,2.1vw,19.5px);margin-top:18px;max-width:58ch}
.mast .lede b{color:var(--white);font-weight:600}
.mast .acts{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}

.badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.bdg{font-family:Saira,Archivo,sans-serif;font-size:11.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;padding:8px 12px;border-radius:6px;
  background:rgba(245,246,248,.06);color:#B9C4D2;border:1px solid var(--line)}
.bdg.red{background:rgba(200,16,46,.15);color:#F09A8E;border-color:rgba(200,16,46,.4)}

/* ---------- sections ---------- */
section.grp{padding-block:clamp(48px,6.5vw,80px);border-bottom:1px solid var(--line)}
section.grp.alt{background:var(--surface)}
.sec-head{max-width:60ch}
.sec-head h2{margin-top:10px}
.sec-head p{margin-top:15px;font-size:17.5px}

.cards{display:grid;gap:14px;margin-top:32px}
.cards.c3{grid-template-columns:repeat(3,1fr)}
.cards.c4{grid-template-columns:repeat(4,1fr)}
@media(max-width:940px){ .cards.c3,.cards.c4{grid-template-columns:repeat(2,1fr)} }
@media(max-width:560px){ .cards.c3,.cards.c4{grid-template-columns:1fr} }
.card{background:var(--surface-2);border:1px solid var(--line);border-radius:13px;padding:22px 21px}
section.grp.alt .card{background:var(--ground)}
.card .n{font-family:Saira,Archivo,sans-serif;font-size:11.5px;font-weight:800;letter-spacing:.17em;
  color:var(--glow);text-transform:uppercase}
.card h3{margin:11px 0 8px}
.card p{font-size:15.5px;line-height:1.5}

.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:32px}
@media(max-width:760px){ .steps{grid-template-columns:1fr} }
.step{padding-top:19px;border-top:2px solid var(--line)}
.step .num{font-family:Saira,Archivo,sans-serif;font-weight:800;font-size:13px;color:var(--red);
  letter-spacing:.16em}
.step h3{margin:9px 0 8px}
.step p{font-size:15.5px;line-height:1.5}

.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,48px);align-items:center}
@media(max-width:820px){ .split{grid-template-columns:1fr} }
.split .shot{border-radius:14px;overflow:hidden;border:1px solid var(--line);
  box-shadow:0 20px 50px rgba(0,0,0,.4)}
.split h2 em{font-style:normal;color:var(--red)}
.split p{margin-top:15px;font-size:17px}
.kicker{margin-top:20px;padding-left:15px;border-left:3px solid var(--red);
  font-size:16.5px;color:var(--white);font-weight:600}

.pull{background:var(--surface-2);border-left:3px solid var(--red);border-radius:0 9px 9px 0;
  padding:15px 18px;margin:13px 0}
section.grp.alt .pull{background:var(--ground)}
.pull .n{font-family:Archivo,sans-serif;font-weight:900;color:var(--glow-hi);
  font-size:clamp(21px,3vw,27px);line-height:1.15;letter-spacing:-.02em;display:block}
.pull .c{font-size:14px;color:var(--grey-dim);margin-top:7px;line-height:1.45}

.qs{margin-top:28px;max-width:74ch}
.qa{border-top:1px solid var(--line);padding-block:21px}
.qa:last-child{border-bottom:1px solid var(--line)}
.qa h3{font-size:19px;line-height:1.28;margin-bottom:9px}
.qa p{font-size:16.5px;line-height:1.58}
.qa p:last-child{margin-bottom:0}

.towns{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.town{font-family:Archivo,sans-serif;font-size:14px;font-weight:600;padding:9px 15px;
  border-radius:7px;background:var(--surface-2);border:1px solid var(--line);color:var(--white)}
section.grp.alt .town{background:var(--ground)}
.town.primary{background:rgba(200,16,46,.16);border-color:rgba(200,16,46,.45);color:var(--white)}
section.grp.alt .town.primary{background:rgba(200,16,46,.16)}

/* ---------- forms ---------- */
.quote{background:var(--surface);border:1px solid var(--line);border-radius:15px;
  padding:24px 22px;box-shadow:0 24px 60px rgba(0,0,0,.45)}
.quote .qh{font-family:Archivo,sans-serif;font-weight:900;font-size:22px;color:var(--white);
  letter-spacing:-.02em;line-height:1.15}
.quote .qs2{font-size:14.5px;margin-top:8px;color:var(--grey)}
.quote form{display:flex;flex-direction:column;gap:12px;margin-top:18px}
.fld{display:flex;flex-direction:column;gap:6px}
.fld label{font-family:Saira,Archivo,sans-serif;font-size:11.5px;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;color:var(--grey-dim)}
.fld input,.fld select,.fld textarea{font-family:inherit;font-size:16px;color:var(--white);
  background:var(--ground);border:1px solid var(--line);border-radius:8px;padding:13px;
  width:100%;appearance:none}
.fld textarea{min-height:88px;resize:vertical}
.fld select{background-image:linear-gradient(45deg,transparent 50%,var(--grey) 50%),linear-gradient(135deg,var(--grey) 50%,transparent 50%);
  background-position:calc(100% - 19px) calc(50% + 2px),calc(100% - 14px) calc(50% + 2px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:38px}
.fld input::placeholder,.fld textarea::placeholder{color:var(--grey-dim)}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--glow);outline:none}
.quote .fine{font-size:12.5px;color:var(--grey-dim);line-height:1.45;margin-top:2px}
.hp{position:absolute;left:-9999px}
.thanks{display:none;text-align:center;padding:22px 4px}
.thanks h3{color:var(--glow-hi);margin-bottom:8px}

/* ---------- final cta + footer ---------- */
.final{padding-block:clamp(48px,6.5vw,80px);text-align:center;
  background:radial-gradient(100% 120% at 50% -20%, rgba(242,197,124,.15) 0%, rgba(242,197,124,0) 60%),
    linear-gradient(180deg,#0D1523 0%,#0A0F1A 100%)}
.final h2{max-width:20ch;margin:11px auto 0}
.final p{margin:15px auto 0;max-width:52ch;font-size:17.5px}
.final .acts{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:26px}

footer.site{border-top:1px solid var(--line);background:var(--ground);
  padding-block:36px 44px;font-size:14.5px;color:var(--grey-dim)}
.foot{display:flex;flex-wrap:wrap;gap:26px;justify-content:space-between;align-items:flex-start}
.foot .col{display:flex;flex-direction:column;gap:7px;min-width:170px}
.foot .flogo{height:104px;width:auto;align-self:flex-start;object-fit:contain;
  margin-bottom:8px;filter:drop-shadow(0 0 22px rgba(200,16,46,.22))}
.foot .ft{font-family:Saira,Archivo,sans-serif;font-size:11px;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--grey);margin-bottom:3px}
.foot a{text-decoration:none}
.foot a:hover{color:var(--glow)}
.foot .legal{width:100%;border-top:1px solid var(--line);padding-top:18px;margin-top:8px;font-size:13px}

/* ---------- scroll reveal ---------- */
.js :where(.sec-head, .card, .seg, .step, .qa, .split > div, .doc, .col-box, .towns, .final .wrap, .pull){
  opacity:0;transform:translateY(18px)}
.js .in{opacity:1;transform:none;
  transition:opacity .66s cubic-bezier(.22,.61,.36,1), transform .66s cubic-bezier(.22,.61,.36,1)}
@media (prefers-reduced-motion:reduce){
  .js :where(.sec-head, .card, .seg, .step, .qa, .split > div, .doc, .col-box, .towns, .final .wrap, .pull){
    opacity:1;transform:none;transition:none}
}