/* ===========================================================
   Sundog Electric — design tokens
   Base: graphite blueprint dark / warm paper light
   Accent: burnt copper (the material of the trade)
   Type: Fraunces (headlines, has weight/warmth — 20 yrs in business)
         IBM Plex Sans (body — technical, drafting-table feel)
   =========================================================== */

/* Fonts are self-hosted in the /fonts folder (same files Google Fonts
   serves, Latin subset, all SIL Open Font License) instead of loaded
   from fonts.googleapis.com. Loading from Google cost two extra server
   connections before any text could draw — about 750ms on a phone.
   "Generate Site Files" inlines this whole stylesheet into every page
   and adds <link rel="preload"> tags for these five files, so they
   start downloading immediately. font-display:optional means a font
   that isn't ready in time is simply skipped for that page view, so
   text never jumps (no layout shift). Do not switch to @import or
   back to Google's servers. */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:100 900;font-display:optional;src:url(fonts/fraunces-latin-opsz-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:100 700;font-display:optional;src:url(fonts/ibm-plex-sans-latin-wght-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:optional;src:url(fonts/ibm-plex-mono-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:300;font-display:optional;src:url(fonts/poppins-latin-300-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:optional;src:url(fonts/poppins-latin-700-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --graphite: #15191d;
  --graphite-soft: #1e2429;
  --paper: #ece7dc;
  --paper-dim: #ddd6c6;
  --copper: #823d17;
  --copper-bright: #d3793f;
  --slate: #465158;
  --ink: #1c1f22;
  --header-bg: #ffffff;
  --line: rgba(236,231,220,0.14);
  --line-dark: rgba(28,31,34,0.12);
  --max: 1120px;
  --serif: 'Fraunces', serif;
  --sans: 'IBM Plex Sans', sans-serif;
  --mono: 'IBM Plex Mono', monospace;
}

*{box-sizing:border-box;}
[hidden]{display:none !important;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;}
:focus-visible{outline:2px solid var(--copper);outline-offset:3px;}

.wrap{max-width:var(--max);margin:0 auto;padding:0 28px;}

/* -------- header -------- */
header.site{
  background:var(--header-bg);
  color:var(--ink);
  border-bottom:1px solid var(--line-dark);
}
.nav{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  padding:20px 28px;
  max-width:1400px;
  margin:0 auto;
  gap:16px 20px;
}
.brand{
  font-family:var(--serif);
  font-weight:600;
  font-size:1.35rem;
  letter-spacing:0.01em;
  color:var(--ink);
  text-decoration:none;
  display:flex;
  align-items:center;
  gap:8px;
}
.brand-text{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  width:max-content;
}
.brand-name{
  font-family:'Poppins', sans-serif;
  font-weight:700;
  font-size:1.15rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  white-space:nowrap;
  text-align:center;
}
.brand-sub{
  display:flex;
  justify-content:space-between;
  font-family:'Poppins', sans-serif;
  font-weight:300;
  font-size:0.62rem;
  text-transform:lowercase;
  line-height:1.4;
}
.brand-est{
  font-family:var(--mono);
  font-size:0.62rem;
  color:var(--copper);
  font-weight:500;
  letter-spacing:0.04em;
  text-transform:uppercase;
  white-space:nowrap;
}
.brand-logo{
  height:40px;
  width:auto;
  object-fit:contain;
  display:block;
}
.gallery-photo-card{
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 6px 20px rgba(0,0,0,0.10);
}

/* -------- lightbox (full-size, uncropped photo viewer) -------- */
.group-detail img,
[data-f="svc-gallery"] img{
  cursor:zoom-in;
}
.lightbox{
  position:fixed;
  inset:0;
  background:rgba(21,25,29,0.94);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:1000;
  padding:48px;
  cursor:zoom-out;
}
.lightbox-img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  border-radius:4px;
  cursor:default;
  box-shadow:0 12px 40px rgba(0,0,0,0.4);
}
.lightbox-close{
  position:absolute;
  top:18px;
  right:24px;
  background:none;
  border:none;
  color:var(--paper);
  font-size:2.4rem;
  line-height:1;
  cursor:pointer;
  padding:4px 12px;
}
.lightbox-close:hover{color:var(--copper-bright);}
.lightbox-prev,
.lightbox-next{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  background:rgba(255,255,255,0.1);
  border:none;
  color:var(--paper);
  font-size:2.4rem;
  line-height:1;
  cursor:pointer;
  padding:14px 18px;
  border-radius:4px;
}
.lightbox-prev{left:16px;}
.lightbox-next{right:16px;}
.lightbox-prev:hover,
.lightbox-next:hover{background:rgba(255,255,255,0.2);color:var(--copper-bright);}
@media (max-width:600px){
  .lightbox{padding:20px;}
  .lightbox-close{top:8px;right:12px;font-size:2rem;}
  .lightbox-prev,
  .lightbox-next{font-size:1.8rem;padding:10px 12px;}
  .lightbox-prev{left:6px;}
  .lightbox-next{right:6px;}
}
.gallery-photo-card img{
  display:block;
}
.map-photo{
  width:100%;
  height:auto;
  aspect-ratio:16/9;
  object-fit:cover;
  border-radius:10px;
  display:block;
  border:1px solid var(--line-dark);
  box-shadow:0 6px 20px rgba(0,0,0,0.10);
}
.map-photo-empty{
  width:100%;
  aspect-ratio:16/9;
  border-radius:10px;
  background:var(--paper-dim);
  border:1px dashed var(--line-dark);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--slate);
  font-family:var(--mono);
  font-size:0.76rem;
  text-align:center;
  padding:18px;
}
.hero-photo{
  width:100%;
  height:auto;
  aspect-ratio:4/3;
  object-fit:cover;
  border-radius:10px;
  display:block;
  border:1px solid var(--line);
  box-shadow:0 6px 20px rgba(0,0,0,0.10);
}
.hero-photo-empty{
  width:100%;
  aspect-ratio:4/3;
  border-radius:10px;
  background:var(--graphite-soft);
  border:1px dashed var(--line);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--paper-dim);
  font-family:var(--mono);
  font-size:0.76rem;
  text-align:center;
  padding:18px;
}
.nav-links{
  display:flex;
  gap:28px;
  list-style:none;
  margin:0;
  padding:0;
  font-size:0.94rem;
  flex-shrink:0;
}
.nav-links a{text-decoration:none;color:var(--slate);white-space:nowrap;}
.nav-links a:hover{color:var(--copper);}
.nav-links a.current{color:var(--copper);}
.nav-cta{
  background:var(--copper);
  color:#fff;
  padding:10px 18px;
  border-radius:2px;
  text-decoration:none;
  font-size:0.92rem;
  font-weight:500;
  white-space:nowrap;
}
.nav-cta:hover{background:var(--copper-bright);}
.nav-toggle-btn{
  display:none;
  background:none;
  border:1px solid var(--line-dark);
  color:var(--ink);
  font-size:1.2rem;
  line-height:1;
  padding:9px 13px;
  border-radius:2px;
  cursor:pointer;
}
.nav-toggle-btn:hover{border-color:var(--copper);color:var(--copper);}
.nav-phone{
  color:var(--ink);
  text-decoration:none;
  font-size:1.02rem;
  font-weight:600;
  letter-spacing:0.01em;
  white-space:nowrap;
  display:inline-flex;
  align-items:center;
  gap:7px;
}
.nav-phone::before{
  content:'';
  display:inline-block;
  flex-shrink:0;
  width:15px;
  height:15px;
  background:var(--copper);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79a15.05 15.05 0 0 0 6.59 6.59l2.2-2.2a1 1 0 0 1 1.01-.24c1.12.37 2.33.57 3.58.57a1 1 0 0 1 1 1V20a1 1 0 0 1-1 1C10.61 21 3 13.39 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.46.57 3.58a1 1 0 0 1-.25 1.01l-2.2 2.2Z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79a15.05 15.05 0 0 0 6.59 6.59l2.2-2.2a1 1 0 0 1 1.01-.24c1.12.37 2.33.57 3.58.57a1 1 0 0 1 1 1V20a1 1 0 0 1-1 1C10.61 21 3 13.39 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.46.57 3.58a1 1 0 0 1-.25 1.01l-2.2 2.2Z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.nav-phone:hover{color:var(--copper);}
.nav-phone:hover::before{background:var(--copper-bright);}
.nav-toggle{display:none;}

@media (max-width:760px){
  .nav{position:relative;flex-wrap:wrap;}
  .nav-toggle-btn{display:inline-block;}
  .brand-est{display:none;}
  .nav-links{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    background:var(--header-bg);
    flex-direction:column;
    gap:0;
    padding:6px 28px 18px;
    border-bottom:1px solid var(--line-dark);
    z-index:20;
  }
  .nav-links.open{display:flex;}
  .nav-links li{width:100%;}
  .nav-links a{display:block;padding:13px 0;border-bottom:1px solid var(--line-dark);}
}

/* -------- hero -------- */
.hero{
  background:var(--graphite);
  color:var(--paper);
  position:relative;
  overflow:hidden;
  border-bottom:1px solid var(--line);
}
.hero .wrap{
  padding:72px 28px 84px;
  display:grid;
  grid-template-columns:1.15fr 0.85fr;
  gap:48px;
  align-items:start;
}
.hero .wrap>div{
  min-width:0;
}
@media (max-width:820px){
  .hero .wrap{grid-template-columns:1fr;padding:52px 24px 56px;}
}
.eyebrow-mark{
  font-family:var(--mono);
  font-size:0.78rem;
  color:var(--copper-bright);
  margin:0 0 18px;
  letter-spacing:0.02em;
}
.hero h1{
  font-family:var(--serif);
  font-weight:600;
  font-size:clamp(2.2rem,4.6vw,3.6rem);
  line-height:1.06;
  margin:0 0 22px;
  max-width:14ch;
}
.hero p.lead{
  font-size:1.12rem;
  color:var(--paper-dim);
  max-width:46ch;
  margin:0 0 30px;
}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;}
.btn{
  display:inline-block;
  padding:13px 24px;
  border-radius:2px;
  text-decoration:none;
  font-weight:500;
  font-size:0.96rem;
  border:1px solid transparent;
}
.btn-primary{background:var(--copper);color:#fff;}
.btn-primary:hover{background:var(--copper-bright);}
.btn-ghost{border-color:var(--line);color:var(--paper);}
.btn-ghost:hover{border-color:var(--copper-bright);color:var(--copper-bright);}

.hero-facts{
  border-left:1px solid var(--line);
  padding-left:32px;
  display:flex;
  flex-direction:column;
  gap:22px;
}
@media (max-width:820px){
  .hero-facts{border-left:none;border-top:1px solid var(--line);padding-left:0;padding-top:28px;}
}
.hero-fact .num{
  font-family:var(--serif);
  font-size:2.1rem;
  color:var(--copper-bright);
  line-height:1;
}
.hero-fact .label{
  font-size:0.86rem;
  color:var(--paper-dim);
  margin-top:6px;
}

/* -------- sections -------- */
section{padding:64px 0;}
section.tight{padding:44px 0;}
.section-head{max-width:60ch;margin-bottom:38px;}
.kicker{
  font-family:var(--mono);
  font-size:0.76rem;
  color:var(--copper);
  margin:0 0 10px;
}
h2{
  font-family:var(--serif);
  font-weight:600;
  font-size:clamp(1.6rem,3vw,2.3rem);
  margin:0 0 12px;
  line-height:1.15;
}
h3{
  font-family:var(--serif);
  font-weight:600;
  font-size:1.3rem;
  margin:0 0 10px;
}
[data-f="services-list"] h2{
  font-family:var(--serif);
  font-weight:600;
  font-size:1.3rem;
  margin:0 0 10px;
}
p{margin:0 0 16px;}
.subdued{color:var(--slate);}

.divider{
  height:1px;
  background:var(--line-dark);
  border:none;
  margin:0;
}

/* -------- grid cards -------- */
.grid{
  display:grid;
  gap:1px;
  background:var(--line-dark);
  border:1px solid var(--line-dark);
}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-2{grid-template-columns:repeat(2,1fr);}
@media (max-width:760px){
  .grid-3,.grid-2{grid-template-columns:1fr;}
}
.cell{
  background:var(--paper);
  padding:30px 28px;
}
.cell .tag{
  font-family:var(--mono);
  font-size:0.72rem;
  color:var(--copper);
  display:block;
  margin-bottom:10px;
}

/* -------- brand strip -------- */
.brandstrip{
  background:var(--paper-dim);
  border-top:1px solid var(--line-dark);
  border-bottom:1px solid var(--line-dark);
  padding:26px 0;
}
.brandstrip .wrap{
  display:flex;
  align-items:center;
  gap:34px;
  flex-wrap:wrap;
}
.brandstrip .label{
  font-family:var(--mono);
  font-size:0.74rem;
  color:var(--slate);
  white-space:nowrap;
}
.brandstrip ul{
  display:flex;
  gap:28px;
  flex-wrap:wrap;
  list-style:none;
  margin:0;padding:0;
  font-family:var(--serif);
  font-weight:500;
  font-size:1.02rem;
  color:var(--ink);
}

/* -------- testimonials (step-and-hold carousel) -------- */
.testimonials{
  background:var(--paper-dim);
  border-bottom:1px solid var(--line-dark);
  padding:36px 0;
}
.testimonials .section-head{margin:0 0 24px;padding:0 28px;max-width:var(--max);margin-left:auto;margin-right:auto;}
.testimonial-track{
  overflow:hidden;
  width:920px;
  max-width:100%;
  margin:0 auto;
  padding:0 20px;
  box-sizing:border-box;
}
.testimonial-track-inner{
  display:flex;
  align-items:stretch;
  gap:20px;
  width:max-content;
  transition:transform 0.6s ease;
}
.testimonial-card{
  flex:0 0 auto;
  width:280px;
  box-sizing:border-box;
  padding:4px 0;
  display:flex;
  flex-direction:column;
}
@media (max-width:660px){
  .testimonial-track{overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:20px;}
  .testimonial-card{width:85vw;scroll-snap-align:start;}
}
.testimonial-card .stars{
  color:var(--copper);
  font-size:0.9rem;
  letter-spacing:2px;
  margin-bottom:10px;
}
.testimonial-card p{
  font-size:0.94rem;
  color:var(--ink);
  margin:0 0 14px;
  line-height:1.55;
  display:-webkit-box;
  -webkit-line-clamp:6;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.testimonial-readmore{
  display:none;
  font-family:var(--mono);
  font-size:0.78rem;
  color:var(--copper);
  text-decoration:none;
  margin:-8px 0 14px;
}
.testimonial-readmore:hover{
  color:var(--copper-bright);
  text-decoration:underline;
}
.testimonial-readmore.visible{
  display:inline-block;
}
.testimonial-card .who{
  font-family:var(--mono);
  font-size:0.76rem;
  color:var(--slate);
  margin-top:auto;
  padding-top:10px;
}

/* -------- service areas -------- */
.areas ul{
  columns:2;
  list-style:none;
  margin:0;padding:0;
  gap:0 40px;
}
.areas li{
  padding:10px 0;
  border-bottom:1px solid var(--line-dark);
  break-inside:avoid;
}

/* -------- FAQ -------- */
.faq-item{
  border-bottom:1px solid var(--line-dark);
  padding:26px 0;
}
.faq-item h2{margin-bottom:8px;font-size:1.14rem;}
.faq-item p{margin-bottom:0;color:var(--slate);}

/* -------- CTA band -------- */
.ctaband{
  background:var(--graphite);
  color:var(--paper);
}
.ctaband .wrap{
  padding:56px 28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
}
.ctaband h2{color:var(--paper);margin:0;}
.ctaband p{color:var(--paper-dim);margin:6px 0 0;}

/* -------- footer -------- */
footer.site{
  background:var(--graphite);
  color:var(--paper-dim);
  border-top:1px solid var(--line);
  font-size:0.92rem;
}
footer.site .wrap{
  padding:40px 28px;
  display:flex;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
}
footer.site a{text-decoration:none;color:var(--paper-dim);}
footer.site a:hover{color:var(--copper-bright);}
footer.site .brand{color:var(--paper);}
footer.site .cols{display:flex;gap:60px;flex-wrap:wrap;}
footer.site .footer-label{
  font-family:var(--mono);
  font-size:0.72rem;
  color:var(--copper-bright);
  margin:0 0 12px;
  font-weight:500;
}
footer.site ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;}
footer.site [data-f="footer-serviceAreas"]{
  display:block;
  columns:2;
  column-gap:24px;
  max-width:280px;
}
footer.site [data-f="footer-serviceAreas"] li{
  margin-bottom:8px;
  break-inside:avoid;
}
.fineprint{
  border-top:1px solid var(--line);
  padding:18px 28px;
  max-width:var(--max);
  margin:0 auto;
  font-size:0.8rem;
  color:var(--paper-dim);
}
/* Extra breathing room at the very bottom of every page so the
   fixed back-to-top button and the Housecall Pro chat bubble (which
   always hover in the same viewport corner, regardless of scroll)
   never sit on top of this copyright line once the page is
   scrolled all the way down. */
footer.site{padding-bottom:160px;}
@media (max-width:480px){
  footer.site{padding-bottom:150px;}
}

/* -------- misc -------- */
.field-note{
  background:var(--paper-dim);
  border-left:3px solid var(--copper);
  padding:18px 22px;
  font-size:0.95rem;
  color:var(--ink);
  margin:0 0 20px;
}
.field-note .tag{
  font-family:var(--mono);
  font-size:0.7rem;
  color:var(--copper);
  display:block;
  margin-bottom:6px;
}

/* -------- back-to-top button --------
   Added by loader.js on every page once the visitor scrolls past the
   header. Fixed position, doesn't affect page layout/CLS since it's
   position:fixed and only fades in via opacity (never inserted with
   a size that shifts anything else). */
.back-to-top{
  position:fixed;
  right:20px;   /* arrow's circle centered over the 48px chat button
                   (the circle sits ~4.6% right of the image's middle) */
  bottom:86px;  /* chat button bottom (26) + height (48) + 12px gap */
  width:58px;
  height:58px;
  background:url(back-to-top.png) center/contain no-repeat;
  border:none;
  padding:0;
  cursor:pointer;
  opacity:0;
  visibility:hidden;
  transform:translateY(8px) scale(0.92);
  transition:opacity 0.2s ease, transform 0.2s ease;
  z-index:30;
  filter:drop-shadow(0 3px 8px rgba(0,0,0,0.25));
}
.back-to-top.visible{
  opacity:1;
  visibility:visible;
  transform:translateY(0) scale(1);
}
.back-to-top.visible:hover{transform:translateY(0) scale(1.06);}
@media (max-width:480px){
  .back-to-top{right:21.5px;width:54px;height:54px;}
}
@media (prefers-reduced-motion:reduce){
  .back-to-top{transition:opacity 0.2s ease;}
}
/* While the Housecall Pro chat window is open, the arrow steps aside. */
body.chat-open .back-to-top{display:none;}

/* -------- "text us" chat button --------
   A lightweight stand-in for Housecall Pro's chat bubble, drawn by
   loader.js. The real Housecall Pro widget (about 1.6 MB) only loads
   when this is tapped, then takes over. Sized and placed to match
   Housecall Pro's own bubble. */
.chat-launcher{
  position:fixed;
  right:22px;
  bottom:26px;
  width:48px;
  height:48px;
  border-radius:50%;
  border:none;
  padding:0;
  background:#964a1e;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:40;
  box-shadow:0 3px 10px rgba(0,0,0,0.28);
  transition:transform 0.15s ease;
}
.chat-launcher:hover{transform:scale(1.06);}
.chat-launcher[hidden]{display:none;}
.chat-launcher.loading svg{animation:chat-pulse 0.9s ease-in-out infinite;}
@keyframes chat-pulse{50%{opacity:0.35;}}
@media (prefers-reduced-motion:reduce){
  .chat-launcher{transition:none;}
  .chat-launcher.loading svg{animation:none;opacity:0.6;}
}