/* ============================================================================
   Firefly Electric — emergencyelectriciantucson.com
   Palette sampled directly from the Firefly Electric badge:
     #144248 -> #006D77 -> #40D6CF  the teal gradient across the wordmark
     #73744B olive badge border · #6B6D44 firefly body · #D87B65 coral inner line
     #B0B551 chartreuse bolt · #FFFBF8 cream badge panel
   Greer's instruction 2026-09-12: "The Logo has a Gradient Blueish Teal Gradient
   please make sure that it carries throughout the website!" — so that exact ramp is
   --grad below and it drives the primary button, every section rule, the hero
   underline, the icon fills and the call band. Do not flatten it to one colour.
   The badge is drawn on CREAM, so the header band is cream. The page is built around
   the logo, never the logo around the page.
   Fonts self-hosted. NO Google Fonts on any DFD site.
   Scarlett Serif is patched for em-dash / en-dash / middot (the raw face lacks them).
   ========================================================================== */

@font-face{
  font-family:"Ragat";
  src:url("/fonts/ragat.woff2?v=94a71104") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"InterVar";
  src:url("/fonts/inter-var.woff2?v=f11d729b") format("woff2");
  font-weight:100 900;font-style:normal;font-display:swap;
}

:root{
  --night:#0E2A2E;
  --night-2:#143A3F;
  --night-3:#1B4A50;
  --line:#24595F;
  --ink:#144248;
  --body-ink:#2B3A34;
  --teal-dark:#144248;
  --teal:#006D77;
  --teal-lt:#40D6CF;
  --grad:linear-gradient(90deg,#144248 0%,#006D77 52%,#40D6CF 100%);
  /* the same ramp lifted for dark grounds — the #144248 end of --grad disappears
     against the #0E2A2E footer, so gradient TEXT on dark uses this instead */
  --grad-on-dark:linear-gradient(90deg,#2E9BA3 0%,#40D6CF 55%,#9BEDE8 100%);
  --grad-135:linear-gradient(135deg,#144248 0%,#006D77 58%,#2FBFB8 100%);
  --olive:#73744B;
  --olive-deep:#6B6D44;
  --coral:#D87B65;
  --coral-deep:#C0664F;
  --chartreuse:#B0B551;
  --bar:#9FB6B4;
  --cream:#FFFBF8;
  --paper:#FFFFFF;
  --muted:#9FB6B4;
  --muted-dark:#5F6F6B;
  --ok:#3FA06B;
  --wrap:1180px;
  --r:14px;
  --shadow:0 10px 30px rgba(20,66,72,.14);
  --display:"Ragat","Arial Narrow",Impact,system-ui,sans-serif;
  --body:"InterVar",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:90px}
body{
  margin:0;font-family:var(--body);font-size:17px;line-height:1.65;
  color:var(--body-ink);background:var(--paper);
  padding-bottom:64px; /* room for the mobile call bar */
  -webkit-font-smoothing:antialiased;
}
@media(min-width:900px){body{padding-bottom:0}}
img{max-width:100%;height:auto;display:block}
a{color:var(--ink);text-decoration-thickness:1px;text-underline-offset:2px}
h1,h2,h3,h4{font-family:var(--display);font-weight:400;line-height:1.06;letter-spacing:.005em;margin:0 0 .5em}
h1{font-size:clamp(2.15rem,5.6vw,4rem)}
h2{font-size:clamp(1.65rem,3.6vw,2.6rem)}
h3{font-size:clamp(1.12rem,2vw,1.4rem)}
p{margin:0 0 1em}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 20px}
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:12px;top:12px;z-index:999;background:var(--teal);color:#fff;padding:10px 16px;border-radius:8px}
:focus-visible{outline:3px solid var(--teal);outline-offset:2px;border-radius:4px}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-family:var(--display);font-size:1.02rem;letter-spacing:.02em;
  padding:.86em 1.5em;border-radius:10px;border:2px solid transparent;
  text-decoration:none;cursor:pointer;transition:transform .12s ease,box-shadow .12s ease,background .12s ease;
  /* NOT nowrap: the long "Call (520) ..." labels overflowed a 390px viewport. Labels wrap;
     the phone number itself is kept intact with .nb below. */
  text-align:center;max-width:100%;
}
.btn .nb{white-space:nowrap}
.btn:hover{transform:translateY(-1px)}
.btn-teal{background:var(--grad-135);color:#fff;box-shadow:0 6px 18px rgba(20,66,72,.30)}
.btn-teal:hover{background:linear-gradient(135deg,#1B5560 0%,#068290 58%,#45D3CC 100%)}
.btn-coral{background:var(--coral);color:#fff}
.btn-coral:hover{background:#E08A74}
.btn-ghost{background:transparent;color:var(--cream);border-color:rgba(64,214,207,.55)}
.btn-ghost:hover{background:rgba(64,214,207,.14);color:#fff}
.btn-lg{font-size:1.16rem;padding:1em 1.8em}
.btn-block{width:100%}

/* ---------- header ----------
   The badge is drawn on a cream panel with an olive border and a dark-teal wordmark, so the
   header band is cream and the artwork drops straight in, unmodified.

   Sizing, measured from the supplied file: the "FIREFLY ELECTRIC" line is 14.0% of the lockup
   height and the sub-tagline 12.0%, so a 104px lockup puts them at ~15px and ~12px. That is why
   the band is ~116px on desktop rather than the usual ~80px — the header was sized to the logo.
   ---------- */
.site-header{position:sticky;top:0;z-index:60;background:var(--cream);border-bottom:1px solid #DFE9E7}
.site-header::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--grad)}
.header-in{display:flex;align-items:center;gap:14px;padding-top:8px;padding-bottom:8px;flex-wrap:wrap;transition:padding .22s ease}
.site-header.is-scrolled .header-in{padding-top:5px;padding-bottom:5px}
@media(min-width:1000px){.header-in{flex-wrap:nowrap;gap:16px}}
.brand{display:flex;align-items:center;text-decoration:none;margin-right:auto;flex:none}
/* THE LOGO IS THE POINT. It sits at 152px at the top of the page — bigger than any other
   element in the bar — and shrinks to 68px once you scroll, so the sticky bar stays usable
   without ever showing a postage-stamp logo. `.is-scrolled` is toggled by main.js. */
.nh-lockup{height:112px;width:auto;display:block;transition:height .22s ease}
@media(min-width:700px){.nh-lockup{height:136px}}
@media(min-width:1000px){.nh-lockup{height:152px}}
.site-header.is-scrolled .nh-lockup{height:56px}
@media(min-width:700px){.site-header.is-scrolled .nh-lockup{height:62px}}
@media(min-width:1000px){.site-header.is-scrolled .nh-lockup{height:68px}}
.header-call{display:none;flex:none;white-space:nowrap}
@media(min-width:1000px){.header-call{display:inline-flex}}

.nav-toggle{display:flex;flex-direction:column;justify-content:center;gap:4px;width:40px;height:36px;background:#fff;border:1.5px solid #C9DAD8;border-radius:9px;cursor:pointer;padding:0 10px}
.nav-toggle span{display:block;height:2px;background:var(--ink);border-radius:2px;transition:.2s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(min-width:900px){.nav-toggle{display:none}}

.main-nav{display:none;width:100%;order:9;min-width:0}
.main-nav.open{display:block}
.main-nav ul{list-style:none;margin:0;padding:6px 0 8px;display:flex;flex-direction:column;gap:2px}
.main-nav a{display:block;padding:11px 6px;color:var(--ink);text-decoration:none;font-weight:700;font-size:.98rem;border-bottom:1px solid #E5EEEC}
.main-nav a:hover{color:var(--coral-deep)}
@media(min-width:900px){
  .main-nav{display:block;width:auto;order:0;flex:0 0 auto}
  .main-nav ul{flex-direction:row;gap:15px;padding:0}
  .main-nav a{border:0;padding:6px 0;font-size:.88rem;white-space:nowrap}
}
@media(min-width:1200px){.main-nav ul{gap:18px}.main-nav a{font-size:.93rem}}
@media(min-width:1000px) and (max-width:1199px){.main-nav .nav-lo{display:none}}

.license-bar{background:var(--night-2);color:var(--bar);font-size:.79rem;border-bottom:1px solid var(--line)}
.license-bar .wrap{padding-top:7px;padding-bottom:7px;text-align:center}

.info-strip{background:var(--night-3);color:#C2D9D7;font-size:.8rem}
.info-strip .wrap{padding-top:8px;padding-bottom:8px;display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;justify-content:center;text-align:center}
.strip-sep{opacity:.4;display:none}
@media(min-width:1000px){.strip-sep{display:inline}}
.strip-live{display:inline-flex;align-items:center;gap:8px;color:#fff;font-weight:600}
.pulse{width:9px;height:9px;border-radius:50%;background:#B0B551;box-shadow:0 0 0 0 rgba(176,181,81,.75);animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(176,181,81,0)}100%{box-shadow:0 0 0 0 rgba(176,181,81,0)}}
@media(prefers-reduced-motion:reduce){.pulse{animation:none}html{scroll-behavior:auto}}

/* ---------- sections ---------- */
section{padding:58px 0}
@media(min-width:900px){section{padding:78px 0}}
.sec-dark{background:var(--night);color:var(--cream)}
.sec-dark h2,.sec-dark h3{color:#fff}
.sec-dark p{color:#C7D7E5}
.sec-tint{background:linear-gradient(180deg,#F2FAF9 0%,#E6F4F2 100%)}
.sec-cream{background:var(--cream)}
/* the gradient again, as a hairline at the top of every dark section */
.sec-dark{position:relative}
.sec-dark::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad)}
.eyebrow{font-family:var(--display);font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;color:var(--teal);margin:0 0 .7em}
.sec-dark .eyebrow{color:var(--teal-lt)}
.lede{font-size:1.1rem;max-width:62ch}
.center{text-align:center}
.center .lede{margin-left:auto;margin-right:auto}

/* ---------- hero ---------- */
.hero{
  position:relative;background:
    radial-gradient(1100px 520px at 80% -12%, rgba(64,214,207,.26) 0%, rgba(64,214,207,0) 62%),
    radial-gradient(900px 480px at 10% 112%, rgba(216,123,101,.20) 0%, rgba(216,123,101,0) 60%),
    var(--night);
  color:var(--cream);padding:52px 0 60px;overflow:hidden;
}
@media(min-width:900px){.hero{padding:76px 0 84px}}
.hero-grid{display:grid;gap:36px;align-items:center}
@media(min-width:960px){.hero-grid{grid-template-columns:1.08fr .92fr;gap:52px}}
.hero h1{color:#fff;margin-bottom:.35em}
.hero h1 .hot{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;padding-right:3px}
.hero-sub{font-size:1.14rem;color:#C7D7E5;max-width:54ch}
.hero-badges{display:flex;flex-wrap:wrap;gap:9px;margin:0 0 22px;padding:0;list-style:none}
.hero-badges li{font-size:.83rem;font-weight:600;background:rgba(64,214,207,.10);border:1px solid rgba(64,214,207,.28);color:var(--teal-lt);padding:7px 13px;border-radius:999px}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:18px}
.hero-note{font-size:.87rem;color:var(--muted);margin:0}
/* the logo gradient, used as the rule under every H1 */
.hero-rule{height:4px;border-radius:4px;background:var(--grad);margin:0 0 24px;max-width:200px}

/* ---------- form card ---------- */
.form-card{background:#fff;color:var(--body-ink);border-radius:var(--r);padding:26px 22px;box-shadow:var(--shadow);border-top:5px solid transparent;border-image:var(--grad) 1}
.form-card h2,.form-card h3{color:var(--ink);margin-bottom:.3em}
.form-card .form-note{font-size:.86rem;color:var(--muted-dark);margin:0 0 16px}
.field{margin-bottom:13px}
.field label{display:block;font-size:.83rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--ink);margin-bottom:5px}
.field input,.field select,.field textarea{
  width:100%;font:inherit;font-size:1rem;color:var(--body-ink);
  padding:12px 13px;border:1.5px solid #C9DAD8;border-radius:9px;background:#fff;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--teal);outline:none;box-shadow:0 0 0 3px rgba(0,109,119,.18)}
.field textarea{min-height:92px;resize:vertical}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-legal{font-size:.76rem;color:var(--muted-dark);margin:12px 0 0;line-height:1.5}

/* ---------- generic cards ---------- */
.grid{display:grid;gap:18px}
.g2{grid-template-columns:1fr}
.g3{grid-template-columns:1fr}
.g4{grid-template-columns:1fr 1fr}
@media(min-width:700px){.g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:1fr 1fr}}
@media(min-width:960px){.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}}
.card{background:#fff;border:1px solid #DBE8E6;border-radius:var(--r);padding:22px 20px}
.card h3{color:var(--ink);margin-bottom:.35em}
.card p:last-child{margin-bottom:0}
.sec-dark .card{background:var(--night-2);border-color:var(--line)}
.sec-dark .card h3{color:#fff}
.sec-dark .card p{color:#B9CCDC}
.card-ico{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;font-size:1.15rem;margin-bottom:12px;background:var(--grad-135);color:#fff}
.card-ico.warm{background:linear-gradient(135deg,var(--coral),var(--coral-deep))}
.card-ico.olive{background:linear-gradient(135deg,var(--chartreuse),var(--olive-deep))}

/* symptom list */
.symptoms{list-style:none;margin:0;padding:0;display:grid;gap:11px}
@media(min-width:700px){.symptoms{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.symptoms{grid-template-columns:repeat(3,1fr)}}
.symptoms li{background:#fff;border:1px solid #DBE8E6;border-radius:10px;padding:14px 16px;position:relative;overflow:hidden}
.symptoms li::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--grad-135)}
.symptoms b{display:block;color:var(--ink);font-family:var(--display);font-weight:400;font-size:1.1rem;letter-spacing:.01em;margin-bottom:3px}
.symptoms span{font-size:.92rem;color:var(--muted-dark)}

/* steps */
.steps{list-style:none;counter-reset:s;margin:0;padding:0;display:grid;gap:16px}
@media(min-width:800px){.steps{grid-template-columns:repeat(4,1fr)}}
.steps li{counter-increment:s;position:relative;padding-top:46px}
.steps li::before{
  content:counter(s);position:absolute;top:0;left:0;width:36px;height:36px;border-radius:50%;
  display:grid;place-items:center;font-family:var(--display);font-size:1.05rem;
  background:var(--grad-135);color:#fff;
}
.steps h3{font-size:1.1rem;margin-bottom:.25em}
.steps p{font-size:.94rem;margin:0}

/* areas */
.areas{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:9px}
.areas li{background:rgba(64,214,207,.11);border:1px solid rgba(64,214,207,.3);color:var(--teal-lt);padding:9px 15px;border-radius:999px;font-size:.93rem;font-weight:600}

/* trust row */
.trust{display:grid;gap:16px;text-align:center}
@media(min-width:700px){.trust{grid-template-columns:repeat(4,1fr)}}
/* gradient text — the wordmark treatment, reused on the trust figures */
.trust .n{font-family:var(--display);font-size:2.1rem;line-height:1;display:block;margin-bottom:6px;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-fill-color:transparent;padding-right:2px}
.trust p{font-size:.92rem;margin:0}

/* FAQ */
.faq{max-width:860px;margin:0 auto}
.faq details{background:#fff;border:1px solid #DBE8E6;border-radius:12px;margin-bottom:11px;overflow:hidden}
.faq details[open]{border-color:var(--teal)}
.faq summary{
  cursor:pointer;list-style:none;padding:17px 46px 17px 19px;position:relative;
  font-family:var(--display);font-size:1.06rem;color:var(--ink);letter-spacing:.01em;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:18px;top:50%;transform:translateY(-50%);font-size:1.5rem;color:var(--teal);line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq .ans{padding:0 19px 18px;font-size:.97rem;color:var(--muted-dark)}
.faq .ans p:last-child{margin-bottom:0}

/* call band */
.callband{background:var(--grad-135);color:#fff;text-align:center}
.callband h2{color:#fff}
.callband p{color:rgba(255,255,255,.94);max-width:58ch;margin-left:auto;margin-right:auto}
.callband .btn-coral{background:#fff;color:var(--teal-dark)}
.callband .btn-ghost{border-color:rgba(255,255,255,.65);color:#fff}
.callband-cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:22px}

/* prose (legal pages) */
.prose{max-width:800px}
.prose h2{margin-top:1.5em}
.prose h3{margin-top:1.3em}
.prose ul,.prose ol{padding-left:1.3em}
.prose li{margin-bottom:.45em}

/* ---------- footer ---------- */
.site-footer{background:var(--night);color:#B9CCDC;font-size:.94rem;padding-top:46px}
.footer-grid{display:grid;gap:28px;padding-bottom:34px}
@media(min-width:760px){.footer-grid{grid-template-columns:1.35fr 1fr 1fr 1fr}}
.site-footer h3{font-size:.84rem;letter-spacing:.19em;text-transform:uppercase;color:var(--teal-lt);margin-bottom:.9em}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin-bottom:.5em}
.site-footer a{color:#B9CCDC;text-decoration:none}
.site-footer a:hover{color:var(--teal-lt);text-decoration:underline}
.footer-brand .nh-stack{width:150px;height:auto;margin:0 0 14px}
.footer-tagline{font-family:var(--display);font-size:1.05rem;letter-spacing:.07em;margin:0 0 4px;text-transform:uppercase;
  background:var(--grad-on-dark);-webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-fill-color:transparent;padding-right:2px}
.footer-tagline-sub{font-style:italic;font-size:.85rem;color:var(--muted);margin:0 0 12px}
.footer-roc{font-size:.83rem;color:var(--muted);margin:0}
.footer-legal{border-top:1px solid var(--line);padding-top:20px;padding-bottom:26px;font-size:.79rem;color:var(--muted-dark)}
.footer-legal a{color:var(--muted)}
.footer-legal p{margin:0 0 .7em}
.dfd-credit a{display:inline-flex;align-items:center;gap:9px}
.dfd-credit span{font-size:.76rem;color:var(--muted-dark)}
.dfd-credit img{width:150px;height:auto;opacity:.85}


/* Referral to the daytime/other-trade partner. Greer 2026-09-12: she owns both sites today,
   and the two genuinely complement each other on hours or trade, so this is a real referral
   rather than a claim of shared ownership — the copy says "referral", never "sister company".
   MUST BE REMOVED when either site is rented to a third party: see the pre/post-renter
   tracker, welcome kit and renter checklist. Add rel="nofollow" here if the two ever need
   to be kept apart in Google's link graph. */
.site-footer li.refer{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);line-height:1.45}
.refer-q{display:block;font-size:.78rem;letter-spacing:.02em;opacity:.75;margin-bottom:2px}
.site-footer li.refer a{font-weight:700;text-decoration:underline;text-underline-offset:2px}
.refer-why{display:block;font-size:.76rem;opacity:.6;margin-top:1px}

/* ---------- mobile call bar ---------- */
.mobile-bar{position:fixed;left:0;right:0;bottom:0;z-index:80;display:grid;grid-template-columns:1.55fr 1fr;box-shadow:0 -4px 18px rgba(5,14,26,.28)}
.mobile-bar a{display:flex;align-items:center;justify-content:center;gap:.4em;padding:15px 8px;font-family:var(--display);font-size:1.02rem;text-decoration:none;color:#fff}
.mb-call{background:var(--grad-135)}
.mb-text{background:var(--coral);color:#fff}
@media(min-width:900px){.mobile-bar{display:none}}

@media print{.site-header,.mobile-bar,.info-strip,.license-bar{display:none}body{padding-bottom:0}}