/* ===========================================================================
   Grayspark Electric — shared site styles
   ---------------------------------------------------------------------------
   BRAND COLORS LIVE IN ONE PLACE. Every colour on the site is driven by the
   custom properties in :root below. When the logo arrives, change the
   --accent / --accent-deep / --ink values here and the whole site follows.
   No other file needs editing.

   The placeholder accent is "spark amber" — chosen to read as electrical and
   solar against the gray shell (gray + spark). Swap it for the logo colour.
   =========================================================================== */

:root{
  /* --- brand: taken from the Grayspark logo (gold bolt, silver wordmark) --- */
  --accent:#F5C518;          /* the bolt */
  --accent-deep:#D9A800;     /* hover fill for gold buttons */
  --accent-ink:#16181D;      /* text that sits on top of --accent */
  --accent-text:#7A5C00;     /* gold-toned TEXT on white — dark enough to read.
                                never use --accent for text on a light ground:
                                gold on white is about 1.7:1 and fails badly. */

  /* --- neutral shell --- */
  --ink:#16181D;
  --ink-2:#242832;
  --ink-soft:#4A505C;
  --paper:#FFFFFF;
  --wash:#F5F6F8;
  --wash-2:#EBEDF1;
  --line:#E1E4EA;

  /* --- on dark backgrounds --- */
  --on-dark:#D9DCE3;
  --on-dark-dim:#969DAA;
  --dark-hairline:rgba(255,255,255,.14);

  --display:'Archivo',system-ui,-apple-system,sans-serif;
  --body:'Inter',system-ui,-apple-system,sans-serif;

  --wrap:1200px;
  --radius:14px;
  --shadow:0 1px 2px rgba(22,24,29,.05),0 8px 28px rgba(22,24,29,.07);
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--body);
  color:var(--ink);
  background:var(--paper);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
/* Gold alone is nearly invisible as a focus ring on white, so pair it with a
   dark halo. The gold reads on the dark sections, the halo reads on the light
   ones, and one rule covers both. */
:focus-visible{
  outline:3px solid var(--accent);outline-offset:2px;border-radius:4px;
  box-shadow:0 0 0 6px rgba(22,24,29,.28);
}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 clamp(1.25rem,4vw,2.5rem);}

/* ---------- type ---------- */
h1,h2,h3,h4{font-family:var(--display);font-weight:700;line-height:1.1;letter-spacing:-.02em;}
h1{font-size:clamp(2.4rem,6vw,4.1rem);font-weight:800;}
h2{font-size:clamp(1.85rem,3.6vw,2.75rem);}
h3{font-size:clamp(1.15rem,1.7vw,1.35rem);letter-spacing:-.01em;}
p{max-width:68ch;}
/* Everything is margin-reset, so give a paragraph that directly follows a
   heading its own breathing room wherever it appears. */
h1 + p,h2 + p,h3 + p{margin-top:1.15rem;}
.lede{font-size:clamp(1.05rem,1.7vw,1.28rem);color:var(--ink-soft);line-height:1.6;}
.lede.on-dark{color:var(--on-dark);}

.eyebrow{
  font-family:var(--body);font-size:.72rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-soft);margin-bottom:1rem;
  display:flex;align-items:center;gap:.7rem;
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--accent);flex:none;}
.eyebrow.on-dark{color:var(--accent);}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--body);font-weight:650;font-size:.97rem;line-height:1;
  padding:.95rem 1.7rem;border-radius:999px;border:2px solid transparent;
  cursor:pointer;transition:transform .15s ease,background .15s ease,color .15s ease,border-color .15s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-1px);}
.btn-accent{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);}
.btn-accent:hover{background:var(--accent-deep);border-color:var(--accent-deep);}
.btn-dark{background:var(--ink);color:#fff;border-color:var(--ink);}
.btn-dark:hover{background:var(--ink-2);border-color:var(--ink-2);}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line);}
.btn-ghost:hover{border-color:var(--ink);}
.btn-outline-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.4);}
.btn-outline-light:hover{background:#fff;color:var(--ink);border-color:#fff;}
.btn-sm{padding:.7rem 1.25rem;font-size:.9rem;}
.btn-row{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2rem;}

/* ---------- header ---------- */
/* Solid background rather than a translucent blur: backdrop-filter on a sticky
   element causes repaint artefacts in Chromium and buys nothing here. */
.site-header{
  position:sticky;top:0;z-index:60;background:var(--paper);
  border-bottom:1px solid var(--line);
}
/* Taller than a typical header because the logo carries a lot of vertical
   whitespace — the bolt runs the full height of the artwork while the wordmark
   sits in the middle third, so the mark has to be set large for "electric" to
   be readable at all. */
.header-in{display:flex;align-items:center;gap:1.5rem;min-height:88px;}

/* The header uses the real logo file. The footer still uses the wordmark below,
   because the logo's gray letters sit at roughly 3.5:1 on the near-black footer
   — legible but muddy. Swap the footer too once a light/white logo variant
   exists, and delete the .brand-mark / .brand-name rules if nothing else uses
   them. */
.brand{display:flex;align-items:center;gap:.6rem;flex:none;font-family:var(--display);}
.brand img{height:58px;width:auto;}
.brand-mark{
  width:34px;height:34px;border-radius:9px;background:var(--ink);
  display:grid;place-items:center;flex:none;
}
.brand-mark svg{width:18px;height:18px;display:block;color:var(--accent);}
.brand-name{display:flex;flex-direction:column;line-height:1;}
.brand-name b{font-size:1.12rem;font-weight:800;letter-spacing:-.025em;}
.brand-name span{
  font-family:var(--body);font-size:.6rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-soft);margin-top:.22rem;
}

.nav{display:flex;align-items:center;gap:.35rem;margin-left:auto;}
.nav a{
  font-size:.93rem;font-weight:550;color:var(--ink-soft);white-space:nowrap;
  padding:.5rem .7rem;border-radius:8px;transition:color .15s ease,background .15s ease;
}
.nav a:hover{color:var(--ink);background:var(--wash);}
.nav a[aria-current="page"]{color:var(--ink);font-weight:650;}
/* The nav carries its own "Get a quote" button for the mobile panel; on desktop
   the one in .header-cta is the visible one, so hide this to avoid a duplicate. */
.nav > .btn{display:none;}
.header-cta{display:flex;align-items:center;gap:.6rem;flex:none;}
.header-phone{
  display:inline-flex;align-items:center;gap:.45rem;
  font-family:var(--display);font-weight:700;font-size:1.02rem;letter-spacing:-.01em;
}
.header-phone svg{width:15px;height:15px;flex:none;color:var(--accent);}

.navtoggle{
  display:none;margin-left:auto;background:none;border:1px solid var(--line);
  border-radius:9px;padding:.55rem .65rem;cursor:pointer;color:var(--ink);
}
.navtoggle svg{width:20px;height:20px;display:block;}

@media (max-width:1040px){
  .site-header{position:relative;}
  .nav{
    display:none;position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:stretch;gap:0;margin:0;
    background:var(--paper);border-bottom:1px solid var(--line);
    padding:.5rem clamp(1.25rem,4vw,2.5rem) 1.25rem;box-shadow:var(--shadow);
  }
  .nav.open{display:flex;}
  .nav a{padding:.85rem .25rem;border-bottom:1px solid var(--line);border-radius:0;font-size:1rem;}
  /* the last plain link sits above the button, so drop its rule */
  .nav a:nth-last-of-type(2){border-bottom:0;}
  .nav > .btn{display:inline-flex;margin-top:1.1rem;border-bottom:0;}
  /* phone first, hamburger last, so the menu button sits where people reach for it */
  .header-cta{order:3;margin-left:auto;}
  .header-cta .btn{display:none;}
  .navtoggle{display:block;order:4;margin-left:.75rem;}
}
@media (max-width:520px){
  .header-in{min-height:74px;}
  .brand img{height:46px;}
  .header-phone span{display:none;}
  .brand-name span{display:none;}
}

/* ---------- hero ---------- */
.hero{background:var(--ink);color:#fff;padding:clamp(3.5rem,8vw,6.5rem) 0 clamp(3rem,6vw,5rem);position:relative;overflow:hidden;}
.hero::after{
  content:"";position:absolute;inset:auto 0 0 0;height:3px;
  background:linear-gradient(90deg,var(--accent) 0%,var(--accent) 22%,transparent 22%);
}
.hero h1{max-width:20ch;}
.hero h1 em{font-style:normal;color:var(--accent);}
.hero .lede{margin-top:1.4rem;max-width:56ch;}
.hero-sub{padding-bottom:clamp(2.5rem,5vw,3.5rem);}
.hero-sub h1{max-width:26ch;}

.trust{
  display:flex;flex-wrap:wrap;gap:.6rem 2rem;margin-top:2.6rem;
  padding-top:1.6rem;border-top:1px solid var(--dark-hairline);
}
.trust li{
  list-style:none;display:flex;align-items:center;gap:.5rem;
  font-size:.87rem;font-weight:550;color:var(--on-dark);
}
.trust svg{width:15px;height:15px;color:var(--accent);flex:none;}

/* ---------- sections ---------- */
.section{padding:clamp(3.5rem,7vw,5.75rem) 0;}
.section-wash{background:var(--wash);}
.section-dark{background:var(--ink);color:#fff;}
.section-dark h2,.section-dark h3{color:#fff;}
.section-head{max-width:60ch;margin-bottom:2.75rem;}
.section-head p{margin-top:1rem;}

/* ---------- cards ---------- */
.cards{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));}
.card{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.9rem 1.7rem;display:flex;flex-direction:column;
  transition:border-color .16s ease,transform .16s ease,box-shadow .16s ease;
}
a.card:hover{border-color:var(--ink);transform:translateY(-3px);box-shadow:var(--shadow);}
.card-ico{
  width:42px;height:42px;border-radius:11px;background:var(--wash-2);
  display:grid;place-items:center;margin-bottom:1.15rem;flex:none;
  transition:background .16s ease;
}
.card-ico svg{width:21px;height:21px;color:var(--ink);}
a.card:hover .card-ico{background:var(--accent);}
.card h3{margin-bottom:.6rem;}
.card p{font-size:.95rem;color:var(--ink-soft);margin:0;}
.card .more{
  margin-top:auto;padding-top:1.15rem;font-size:.88rem;font-weight:650;color:var(--ink);
  display:inline-flex;align-items:center;gap:.4rem;
}
a.card:hover .more{color:var(--accent-text);}
.card-tag{
  align-self:flex-start;margin-bottom:1rem;font-size:.68rem;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--accent-ink);
  background:var(--accent);padding:.3rem .6rem;border-radius:5px;
}

/* ---------- feature (text + image) ---------- */
.feature{display:grid;gap:clamp(2rem,5vw,4rem);align-items:center;grid-template-columns:1fr 1fr;}
.feature.top{align-items:start;}
.feature.flip .feature-media{order:-1;}
.feature-media{margin:0;}
/* Feature photos keep their own aspect ratio (no cropping), but are capped in
   height so a portrait shot cannot tower over the text column beside it. */
.feature-media img{
  border-radius:var(--radius);
  max-width:100%;width:auto;height:auto;max-height:560px;margin:0 auto;
}
.feature-media figcaption{
  font-size:.8rem;color:var(--ink-soft);margin-top:.7rem;font-style:italic;
}
.section-dark .feature-media figcaption{color:var(--on-dark-dim);}
@media (max-width:840px){
  .feature{grid-template-columns:1fr;}
  .feature.flip .feature-media{order:0;}
}

/* ---------- checklist ---------- */
.checks{list-style:none;display:grid;gap:.85rem;margin-top:1.75rem;}
.checks li{display:flex;gap:.75rem;font-size:.97rem;color:var(--ink-soft);}
.checks svg{width:19px;height:19px;color:var(--accent);flex:none;margin-top:.22rem;}
.section-dark .checks li{color:var(--on-dark);}

/* ---------- steps ---------- */
.steps{list-style:none;counter-reset:s;display:grid;gap:1.4rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));}
.steps li{counter-increment:s;padding-top:1.1rem;border-top:2px solid var(--line);}
.steps li::before{
  content:counter(s,decimal-leading-zero);display:block;font-family:var(--display);
  font-weight:800;font-size:.9rem;color:var(--accent-text);margin-bottom:.5rem;
}
.steps h3{font-size:1.08rem;margin-bottom:.4rem;}
.steps p{font-size:.93rem;color:var(--ink-soft);margin:0;}
/* On the dark sections the light-background colours above are unreadable:
   --ink-soft body text lands near 2:1, and --accent-text is a deep gold chosen
   for white. Flip all three to their on-dark counterparts. */
.section-dark .steps p{color:var(--on-dark);}
.section-dark .steps li::before{color:var(--accent);}
.section-dark .steps li{border-top-color:rgba(255,255,255,.22);}

/* ---------- quote ---------- */
.quote{
  background:var(--paper);border:1px solid var(--line);border-left:4px solid var(--accent);
  border-radius:var(--radius);padding:clamp(1.75rem,4vw,2.75rem);max-width:800px;
}
.quote blockquote{font-family:var(--display);font-size:clamp(1.15rem,2.2vw,1.5rem);font-weight:600;line-height:1.4;letter-spacing:-.015em;}
.quote figcaption{margin-top:1.15rem;font-size:.9rem;font-weight:650;color:var(--ink-soft);}
.stars{display:flex;gap:.15rem;margin-bottom:1.1rem;color:var(--accent);}
.stars svg{width:17px;height:17px;}

/* ---------- gallery ---------- */
.gallery{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));}
.gallery figure{margin:0;}
/* height:auto is required — the width/height attributes on the <img> are
   presentational hints that would otherwise win over aspect-ratio and leave
   the row ragged, since these photos are not all the same shape. */
.gallery img{
  border-radius:var(--radius);width:100%;height:auto;
  aspect-ratio:4/3;object-fit:cover;object-position:center;
}
.gallery figcaption{font-size:.85rem;color:var(--ink-soft);margin-top:.6rem;}
.section-dark .gallery figcaption{color:var(--on-dark-dim);}

/* ---------- CTA band ---------- */
.band{background:var(--accent);color:var(--accent-ink);padding:clamp(2.75rem,6vw,4rem) 0;}
.band-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.75rem;}
.band h2{font-size:clamp(1.6rem,3vw,2.25rem);max-width:26ch;}
.band p{margin-top:.6rem;font-weight:550;opacity:.82;max-width:46ch;}

/* ---------- forms ---------- */
.form{display:grid;gap:1.15rem;max-width:620px;}
.field{display:grid;gap:.4rem;}
.field label{font-size:.87rem;font-weight:650;}
.field .hint{font-size:.8rem;color:var(--ink-soft);font-weight:400;}
.field input,.field select,.field textarea{
  font-family:var(--body);font-size:1rem;color:var(--ink);background:var(--paper);
  border:1.5px solid var(--line);border-radius:10px;padding:.8rem .95rem;width:100%;
  transition:border-color .15s ease;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--ink);outline:none;}
.field textarea{min-height:140px;resize:vertical;}
.field-2{display:grid;gap:1.15rem;grid-template-columns:1fr 1fr;}
@media (max-width:600px){.field-2{grid-template-columns:1fr;}}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.notice{border-radius:10px;padding:.95rem 1.15rem;font-size:.94rem;font-weight:550;margin-bottom:1.5rem;}
.notice-ok{background:#E8F5EC;border:1px solid #B6DFC3;color:#14532D;}
.notice-bad{background:#FDECEC;border:1px solid #F5C2C2;color:#7F1D1D;}
.form-note{font-size:.85rem;color:var(--ink-soft);}

/* ---------- contact detail list ---------- */
.detail{list-style:none;display:grid;gap:1.4rem;}
.detail li{display:flex;gap:.9rem;}
.detail svg{width:19px;height:19px;color:var(--accent);flex:none;margin-top:.28rem;}
.detail dt{font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:.2rem;}
.detail dd{font-size:1.02rem;font-weight:600;}
.detail dd span{display:block;font-size:.9rem;font-weight:400;color:var(--ink-soft);margin-top:.15rem;}

/* ---------- footer ---------- */
.site-footer{background:var(--ink);color:var(--on-dark);padding:clamp(3rem,6vw,4.5rem) 0 2rem;font-size:.93rem;}
.site-footer .brand-name b{color:#fff;}
.site-footer .brand-name span{color:var(--on-dark-dim);}
.site-footer .brand-mark{background:var(--accent);}
.site-footer .brand-mark svg{color:var(--accent-ink);}
.foot-grid{display:grid;gap:2.5rem;grid-template-columns:1.4fr 1fr 1fr;}
@media (max-width:800px){.foot-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:520px){.foot-grid{grid-template-columns:1fr;}}
.foot-grid h4{
  font-family:var(--body);font-size:.72rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--on-dark-dim);margin-bottom:1.1rem;
}
.foot-grid ul{list-style:none;display:grid;gap:.6rem;}
.foot-grid a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px;}
.foot-blurb{margin:1.25rem 0 1.5rem;max-width:34ch;color:var(--on-dark-dim);font-size:.9rem;}
.foot-phone{font-family:var(--display);font-weight:800;font-size:1.3rem;color:#fff;letter-spacing:-.02em;}
.socials{display:flex;gap:.6rem;margin-top:1.25rem;}
.socials a{
  width:36px;height:36px;border-radius:9px;border:1px solid var(--dark-hairline);
  display:grid;place-items:center;transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.socials a:hover{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);}
.socials svg{width:17px;height:17px;}
.foot-base{
  margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--dark-hairline);
  display:flex;flex-wrap:wrap;gap:.6rem 1.75rem;align-items:center;
  font-size:.84rem;color:var(--on-dark-dim);
}
.foot-base a:hover{color:#fff;}

/* ---------- misc ---------- */
.skip{position:absolute;left:-9999px;}
.skip:focus{left:1rem;top:1rem;z-index:100;background:var(--paper);color:var(--ink);padding:.7rem 1.1rem;border-radius:8px;box-shadow:var(--shadow);}
.center{text-align:center;}
.center p{margin-left:auto;margin-right:auto;}
.center .eyebrow{justify-content:center;}
.center .btn-row{justify-content:center;}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important;}
  html{scroll-behavior:auto;}
}