/* =========================================================
   KEELY ELECTRIC — STYLE SHEET
   -----------------------------------------------------------
   Colors, fonts and spacing are set as CSS variables at the
   top of this file. Change a value here and it updates
   everywhere on the site — you shouldn't need to touch
   anything below the ":root" block to restyle colors/fonts.
========================================================= */

:root {
  /* Brand colors */
  --green: #6dbe4c;
  --green-dark: #00743b;
  --near-black: #15150f;
  --dark-panel: #0e0e0b;
  --deep-green: #16261a;
  --cream: #f5f4f0;
  --white: #ffffff;
  --text-dark: #1c1c18;
  --text-muted: #5c5c54;
  --border-light: #e7e6e0;

  /* Type */
  --font-display: 'Archivo', 'Inter', sans-serif;
  --font-body: 'Inter', sans-serif;

  /* Layout */
  --max-width: 1640px;
  --radius: 6px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text-dark);
  background: var(--white);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
h1, h2, h3 { font-family: var(--font-display); margin: 0 0 .5em; line-height: 1.1; }
p { margin: 0 0 1em; }
ul { margin: 0; padding: 0; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  padding: 14px 26px;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .03em;
  border-radius: var(--radius);
  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(-2px); }
.btn svg { flex-shrink: 0; }
.btn-primary { background: var(--green); color: var(--near-black); }
.btn-primary:hover { background: var(--green-dark); color: var(--white); }
.btn-outline { background: transparent; border-color: var(--white); color: var(--white); }
.btn-outline:hover { background: var(--white); color: var(--near-black); }
.btn-outline-dark { background: transparent; border-color: var(--near-black); color: var(--near-black); }
.btn-outline-dark:hover { background: var(--near-black); color: var(--white); }
.btn-lg { padding: 18px 32px; font-size: 16px; border-radius: 4px; font-weight: 800; }
.btn-block { width: 100%; }

/* ---------- Section title helper ---------- */
.section-title {
  text-align: center;
  font-size: clamp(24px, 3vw, 32px);
  letter-spacing: .02em;
}
.title-underline {
  width: 60px;
  height: 4px;
  background: var(--green);
  margin: 0 auto 40px;
  border-radius: 2px;
}

/* =========================================================
   HEADER
========================================================= */
.site-header {
  background: var(--near-black);
  position: sticky;
  top: 0;
  z-index: 100;
  transition: transform .3s ease, opacity .3s ease;
}
.site-header.header-hidden {
  transform: translateY(-16px);
  opacity: 0;
  pointer-events: none;
}
.header-inner {
  max-width: none;
  width: 100%;
  margin: 0;
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 20px;
  min-height: 84px;
}
.logo { display: flex; flex-direction: column; line-height: 1; flex-shrink: 0; }
.logo-main { font-family: 'OCR A BT', 'OCR A Std', 'OCRA', monospace; font-weight: 900; font-size: 20px; color: var(--green); letter-spacing: .02em; }
.logo-sub { font-family: 'OCR A BT', 'OCR A Std', 'OCRA', monospace; font-weight: 700; font-size: 11px; color: var(--white); letter-spacing: .25em; }

/* ---- Angled logo drop panel ----
   The header bar itself stays a constant height edge to edge. At the
   logo, a panel (same header color) drops well past the nav row and is
   sliced by a diagonal edge, wide enough at every height to fully
   contain the icon and the "KEELY ELECTRIC" wordmark. */
.logo-spacer { width: 520px; flex-shrink: 0; }
.logo-drop {
  position: absolute;
  top: 0;
  left: 0;
  width: 520px;
  height: 224px;
  background: var(--near-black);
  clip-path: polygon(0 0, 100% 0, calc(100% - 156px) 100%, 0 100%);
  z-index: 1;
  pointer-events: none;
}
.header-logo {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 14px;
  height: 224px;
  padding-left: 19px;
}
.header-logo img { height: 198px; width: auto; display: block; }
.header-logo .logo-text { display: flex; flex-direction: column; align-items: center; line-height: 1; }
.header-logo .logo-main { font-size: 60px; color: var(--green); }
.header-logo .logo-sub { font-size: 31px; color: var(--white); letter-spacing: .12em; }

/* =========================================================
   EDIT ME: Header social icons (sit above "KEELY")
   Change the links in each page's header. Colors below.
========================================================= */
/* Sits inside the black logo drop, above the KEELY / ELECTRIC text.
   Nudge 'top' / 'left' to reposition. */
.logo-social {
  position: absolute;
  top: 26px;
  left: 236px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 8px;
}
.social-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.16);
  color: var(--white);
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.social-link svg { display: block; }
.social-link:hover { transform: translateY(-1px); }
.social-facebook:hover { background: #1877F2; border-color: #1877F2; color: #fff; }
.social-instagram:hover {
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
  border-color: #d6249f; color: #fff;
}
.social-google { background: #fff; border-color: #fff; }
.social-google:hover { background: #fff; border-color: #dadce0; box-shadow: 0 2px 6px rgba(0,0,0,.3); }


.main-nav { display: flex; align-items: center; gap: 9px; flex: 1; }
.main-nav a {
  color: var(--white);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .01em;
  padding: 8px 0;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.main-nav a.active,
.main-nav a:hover { color: var(--green); border-color: var(--green); }
.has-dropdown { position: relative; }
.has-dropdown .caret { font-size: 10px; }
.dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--near-black);
  border: 1px solid #2a2a22;
  min-width: 220px;
  padding: 8px 0;
  display: none;
  border-radius: var(--radius);
}
.has-dropdown:hover .dropdown { display: block; }
.dropdown a { display: block; padding: 10px 16px; border: none; }
.dropdown a:hover { background: #1e1e17; }

.header-cta { flex-shrink: 0; padding: 8px 12px; font-size: 11.5px; }
.nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 6px; }
.nav-toggle span { width: 24px; height: 2px; background: var(--white); }

/* =========================================================
   HERO
========================================================= */
.hero { position: relative; }
.hero-bg {
  position: absolute; inset: 0;
  background: url('images/keely-electric-service-vans-star-idaho.jpg') center 62% / cover no-repeat;
}
.hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(9,9,7,.92) 0%, rgba(9,9,7,.78) 32%, rgba(9,9,7,.42) 60%, rgba(9,9,7,.18) 100%);
}
.hero-inner {
  position: relative;
  z-index: 3;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 64px 32px 56px;
}
.hero-content { color: var(--white); padding-top: 165px; max-width: 700px; }
.hero-content h1 {
  font-size: clamp(30px, 3.6vw, 44px);
  font-weight: 900;
  letter-spacing: .01em;
}
.hero-content h1 .accent { color: var(--green); }
.hero-text { color: #cfcfc7; font-size: 17px; max-width: 560px; }

@media (min-width: 600px) {
  .hero-content h1 { white-space: nowrap; }
}

.trust-row {
  display: flex;
  gap: 34px;
  margin: 24px 0 32px;
  flex-wrap: wrap;
}
.trust-item { display: flex; align-items: center; gap: 10px; }
.trust-icon { display: flex; align-items: center; justify-content: center; color: var(--green); flex-shrink: 0; }
.trust-icon svg { width: 32px; height: 32px; }
.trust-item strong { display: block; font-size: 15px; font-weight: 800; color: var(--white); }
.trust-item span { font-size: 12.5px; color: #d5d5cc; }

.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 22px; }
.service-list { font-size: 12.5px; color: #9c9c92; letter-spacing: .02em; }

/* ---- Lead form card ---- */
.hero-form {
  background: #1a1a13;
  border: 1px solid #2c2c22;
  border-radius: 10px;
  padding: 24px;
  color: var(--white);
}
@media (min-width: 1340px) {
  .hero-form {
    position: absolute;
    top: 64px;
    right: 32px;
    width: 480px;
    z-index: 5;
  }
}
.hero-form h2 { color: var(--green); font-size: 17px; letter-spacing: .04em; margin-bottom: 14px; }
.form-label-top { font-size: 12.5px; color: #b9b9ae; margin: 14px 0 8px; font-weight: 600; }
.checkbox-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; margin-bottom: 6px; }
.checkbox-grid label, .radio-row label {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: #d8d8cf; cursor: pointer;
}
.checkbox-grid .full-width { grid-column: 1 / -1; }
.checkbox-grid input, .radio-row input { accent-color: var(--green); width: 15px; height: 15px; }

.field { display: block; font-size: 12.5px; font-weight: 600; color: #b9b9ae; margin-top: 14px; }
.field input, .field textarea {
  display: block; width: 100%; margin-top: 6px;
  background: #101009; border: 1px solid #33332a; border-radius: var(--radius);
  padding: 11px 12px; color: var(--white); font-family: var(--font-body); font-size: 14px;
}
.field input::placeholder, .field textarea::placeholder { color: #6b6b60; }
.field input:focus, .field textarea:focus, .file-drop:focus-within {
  outline: none; border-color: var(--green);
}
.radio-row { display: flex; gap: 20px; flex-wrap: wrap; }

.file-drop {
  margin-top: 6px; border: 1.5px dashed #3a3a2f; border-radius: var(--radius);
  padding: 22px; text-align: center; font-size: 12.5px; color: #8f8f83; position: relative;
}
.file-drop input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

.hero-form .btn-block { margin-top: 20px; }

/* =========================================================
   SERVICES GRID
========================================================= */
.services { max-width: var(--max-width); margin: 0 auto; padding: 72px 20px 60px; background: var(--white); position: relative; }

/* Below 1340px there isn't reliably enough room for the text and a
   480px floating form side by side, so both the form and this section
   fall back to their normal, stacked, full-width behavior. */
@media (max-width: 1339px) {
  .hero-content { max-width: 100%; }
  .hero-form { margin-top: 32px; width: 100%; }
}
.service-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 44px 32px;
  max-width: 1280px;
  margin: 36px auto 0;
}
.service-card { text-align: center; }
.service-icon {
  width: 56px; height: 56px; margin: 0 auto 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; color: var(--green);
  background: #eef7e5; border-radius: 12px;
}
.service-icon svg { width: 26px; height: 26px; }
.service-card h3 { font-size: 15px; margin-bottom: 6px; }
.service-card p { font-size: 13px; color: var(--text-muted); margin: 0; }

/* =========================================================
   WHY CHOOSE US
========================================================= */
.why-us { background: var(--deep-green); color: var(--white); padding: 70px 20px; }
.why-inner { max-width: var(--max-width); margin: 0 auto; display: grid; grid-template-columns: 1fr 1.1fr; gap: 50px; align-items: center; }
.why-left h2 { font-size: clamp(24px, 3vw, 32px); }
.why-left p { color: #cdd9cd; max-width: 440px; }
.why-right { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 32px; }
.why-item { display: flex; gap: 12px; align-items: flex-start; }
.why-icon { font-size: 30px; flex-shrink: 0; }
.why-item strong { font-size: 14px; display: block; margin-bottom: 2px; }
.why-item p { font-size: 12.5px; color: #b7c4b7; margin: 0; }

/* =========================================================
   REVIEWS + CTA
========================================================= */
.reviews-cta { display: grid; grid-template-columns: 1.3fr 1fr; }
.reviews-col { padding: 70px 40px 70px 20px; max-width: var(--max-width); margin-left: auto; }
.reviews-col h2 { font-size: clamp(22px, 2.6vw, 28px); }
.reviews-sub { color: var(--text-muted); font-size: 14px; }
.stars-inline { color: #f2b400; letter-spacing: 2px; font-size: 15px; }
.review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 24px 0; }
.review-card {
  background: var(--cream); border-radius: var(--radius); padding: 18px;
  border: 1px solid var(--border-light); font-size: 13px;
}
.review-header { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.google-g { width: 18px; height: 18px; flex-shrink: 0; }
.stars { color: #f2b400; letter-spacing: 2px; font-size: 13px; }
.review-card p { margin-bottom: 10px; color: var(--text-dark); }
.reviewer { font-size: 12px; color: var(--text-muted); font-weight: 600; }
.btn-google {
  background: var(--white); color: var(--text-dark); border-color: var(--border-light);
  gap: 10px;
}
.btn-google:hover { background: var(--cream); }

.cta-col { position: relative; min-height: 380px; color: var(--white); overflow: hidden; }
.cta-bg { position: absolute; inset: 0; background: url('images/electrical-service-request-treasure-valley-id.jpg') center 30% / cover no-repeat; }
.cta-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(12,12,9,1) 0%, rgba(12,12,9,.85) 25%, rgba(12,12,9,0) 50%, rgba(12,12,9,0) 100%); }
.cta-content { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: center; padding: 50px 40px; }
.cta-content h2 { font-size: 24px; }
.cta-content p { color: #cfcfc7; }
.or-divider { display: flex; align-items: center; gap: 10px; font-size: 12px; color: #9c9c92; margin: 16px 0; }
.or-divider span { flex: 1; height: 1px; background: #333327; }
.cta-content .btn { align-self: flex-start; }

/* =========================================================
   GALLERY
========================================================= */
.gallery { max-width: var(--max-width); margin: 0 auto; padding: 72px 20px 40px; }
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.gallery-item { margin: 0; }
.gallery-item figcaption { margin-top: 8px; font-size: 13px; font-weight: 600; text-align: center; }
.gallery-item img {
  width: 100%; aspect-ratio: 4/3; object-fit: cover;
  border-radius: var(--radius); border: 1px solid var(--border-light);
}
.center-btn { text-align: center; margin-top: 32px; }

/* Placeholder image blocks — replace with real <img> tags */
.ph-image {
  background: repeating-linear-gradient(45deg, #eceae3, #eceae3 10px, #e4e2d9 10px, #e4e2d9 20px);
  color: #8c8b80; font-size: 13px; font-weight: 600; letter-spacing: .05em;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius); border: 1px solid var(--border-light);
  aspect-ratio: 4/3;
}

/* =========================================================
   TEAM + SERVICE AREA
========================================================= */
.team-area { max-width: var(--max-width); margin: 0 auto; padding: 40px 20px 80px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.team-col { position: relative; border-radius: 10px; overflow: hidden; }
.team-photo { aspect-ratio: 16/10; border-radius: 10px; }
.team-caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 24px; background: linear-gradient(0deg, rgba(0,0,0,.75), transparent); color: var(--white); }
.team-caption h2 { font-size: 20px; }
.team-caption p { font-size: 13px; color: #ddd; }

.area-col h2 { font-size: 20px; }
.area-col p { color: var(--text-muted); font-size: 14px; }
.map-photo { aspect-ratio: 16/10; }
.map-embed {
  width: 100%; aspect-ratio: 16/10; border: 1px solid var(--border-light);
  border-radius: var(--radius); display: block; object-fit: cover; background: #f0ede3;
}
.map-link {
  display: inline-block; margin-top: 10px; font-size: 13px; font-weight: 600;
  color: var(--green-dark);
}
.map-link:hover { text-decoration: underline; }

/* =========================================================
   FINAL CTA BANNER
========================================================= */
.final-cta { background: var(--deep-green); color: var(--white); padding: 40px 20px; }
.final-cta-inner {
  max-width: var(--max-width); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.final-cta-text { display: flex; align-items: center; gap: 16px; }
.bolt { font-size: 30px; color: var(--green); }
.final-cta-text h2 { font-size: 20px; margin-bottom: 2px; }
.final-cta-text p { margin: 0; color: #cdd9cd; font-size: 13px; }
.final-cta-actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* =========================================================
   FOOTER
========================================================= */
.site-footer { background: var(--near-black); color: #c9c9bf; padding: 56px 20px 0; }
.footer-inner {
  max-width: var(--max-width); margin: 0 auto;
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; gap: 32px;
  padding-bottom: 40px; border-bottom: 1px solid #26261d;
}
.footer-col { display: flex; flex-direction: column; gap: 10px; }
.footer-col h3 { color: var(--white); font-size: 13px; letter-spacing: .05em; margin-bottom: 4px; }
.footer-col a, .footer-col span { font-size: 13px; color: #b3b3a8; }
.footer-col a:hover { color: var(--green); }
.footer-brand p { font-size: 13px; color: #9d9d92; max-width: 260px; }
.social-row { display: flex; gap: 10px; margin-top: 6px; }
.social-row a {
  width: 32px; height: 32px; border-radius: 50%; border: 1px solid #33332a;
  display: flex; align-items: center; justify-content: center; font-size: 13px;
}
.social-row a:hover { background: var(--green); color: var(--near-black); border-color: var(--green); }
.footer-bottom { text-align: center; font-size: 12px; color: #6f6f66; padding: 20px 0; }

/* =========================================================
   SUB-PAGE HERO (Residential, Commercial, About, etc.)
========================================================= */
.page-hero {
  position: relative;
  background: linear-gradient(120deg, #23231a 0%, #15150f 55%, #0c0c09 100%);
  color: var(--white);
  padding: 54px 20px 60px;
  text-align: center;
  overflow: hidden;
}
@media (min-width: 1361px) {
  .page-hero { padding-top: 210px; }
  .service-detail { scroll-margin-top: 260px; }
}
.page-hero::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle at 80% 10%, rgba(122,193,66,.12), transparent 55%);
}
.page-hero .breadcrumb { position: relative; font-size: 12.5px; color: #a9a99f; margin-bottom: 14px; }
.page-hero .breadcrumb a { color: var(--green); font-weight: 600; }
.page-hero h1 { position: relative; font-size: clamp(28px, 4.2vw, 44px); }
.page-hero p { position: relative; color: #cfcfc7; max-width: 600px; margin: 0 auto; }

/* =========================================================
   GENERIC CONTENT SECTIONS (used on sub-pages)
========================================================= */
.content-wrap { max-width: var(--max-width); margin: 0 auto; padding: 70px 20px; }
.content-wrap.narrow { max-width: 615px; margin: 0 auto; transform: translateX(-25px); }

.content-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.content-grid-2 .ph-image { aspect-ratio: 4/3; width: 100%; object-fit: cover; display: block; }
.content-grid-2 h2 { font-size: clamp(22px, 2.6vw, 30px); }
.content-grid-2 p { color: var(--text-muted); }
.content-grid-2.reverse .content-text { order: 2; }
.content-grid-2.reverse .ph-image { order: 1; }

.eyebrow {
  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .1em;
  color: var(--green-dark); background: #eef7e5; padding: 6px 12px; border-radius: 20px;
  margin-bottom: 14px; text-transform: uppercase;
}

.check-list { list-style: none; padding: 0; margin: 18px 0; }
.check-list li { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 12px; font-size: 14px; color: var(--text-dark); }
.check-list li::before { content: "✓"; color: var(--green); font-weight: 700; flex-shrink: 0; }

/* Service detail cards (services.html)
   All services share one layout now (originally proven out on Electrical
   Repairs): a wide row with a square photo (sized to match the text
   box's height) and a text box that's proportionally wider than the
   photo. Every service has the same number of checklist items (4) and
   a 2-line-clamped description, so content amount is consistent across
   all of them — which is what keeps every row the same height, rather
   than a guessed pixel value. */
.service-detail-grid { display: grid; gap: 22px; }

.service-detail {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch;
  scroll-margin-top: 110px;
}
.service-detail .service-photo-wrap {
  width: 100%; height: 100%;
  border-radius: 10px; border: 1px solid var(--border-light);
  overflow: hidden;
}
.service-detail .service-photo-wrap img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.service-box {
  display: flex; flex-direction: column; justify-content: center;
  padding: 15px; border: 1px solid var(--border-light); border-radius: 10px;
  background: var(--cream);
}
.service-box .service-icon { margin: 0 0 8px; width: 34px; height: 34px; font-size: 16px; }
.service-box h3 { font-size: 13px; margin-bottom: 3px; }
.service-box p {
  color: var(--text-muted); margin-bottom: 5px; font-size: 11px;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.service-box .check-list li { margin-bottom: 5px; font-size: 10.5px; }
.service-box .check-list { margin: 3px 0 0; }

/* Wide-screen template (proven out on Electrical Repairs): a wide row
   with a square photo matching the box's height, and a proportionally
   wider text box with larger type. This MUST come after the base rules
   above — same-specificity selectors resolve by source order, so if
   this block were earlier, the base rules below would silently win
   regardless of screen width. */
@media (min-width: 1350px) {
  .service-detail {
    width: 1230px; margin-left: -307.5px; margin-right: -307.5px;
    grid-template-columns: 300px 880px; gap: 50px;
  }
  .service-detail .service-photo-wrap {
    width: 300px; height: 300px;
    justify-self: start;
  }
  .service-box {
    height: 300px; overflow: hidden; box-sizing: border-box;
  }
  .service-box .service-icon { width: 51px; height: 51px; font-size: 24px; margin-bottom: 12px; }
  .service-box h3 { font-size: 20px; margin-bottom: 5px; }
  .service-box p { font-size: 16.5px; margin-bottom: 8px; }
  .service-box .check-list li { font-size: 16px; margin-bottom: 8px; }
}


/* Area / city grid (service-areas.html) */
.area-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 30px; }
.area-chip {
  background: var(--cream); border: 1px solid var(--border-light); border-radius: var(--radius);
  padding: 18px 12px; text-align: center; font-weight: 700; font-size: 14px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.area-chip span { color: var(--green); }

/* Safety / values cards (safety-plan.html, about.html) */
.safety-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 10px; }
.safety-card {
  background: var(--cream); border: 1px solid var(--border-light); border-radius: 10px; padding: 28px;
}
.safety-card .service-icon { margin: 0 0 14px; }
.safety-card h3 { font-size: 16px; }
.safety-card p { color: var(--text-muted); font-size: 13.5px; margin: 0; }

/* Numbered process steps (about.html / safety-plan.html) */
.step-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 10px; }
.step-item { position: relative; padding-top: 10px; }
.step-num { font-family: var(--font-display); font-size: 34px; font-weight: 900; color: var(--green); display: block; margin-bottom: 6px; }
.step-item h3 { font-size: 15px; margin-bottom: 6px; }
.step-item p { font-size: 13px; color: var(--text-muted); margin: 0; }

/* Team member grid (about.html) */
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 10px; }
.team-card { text-align: center; }
.team-card .ph-image { aspect-ratio: 1/1; border-radius: 50%; width: 100%; object-fit: cover; display: block; }
.team-card h3 { font-size: 14px; margin: 12px 0 2px; }
.team-card span { font-size: 12px; color: var(--text-muted); }

/* Book Online page — embedded ServiceM8 widget */
.booking-embed-wrap { max-width: 900px; margin: 0 auto; padding: 50px 20px 80px; }

/* Booking iframe.
   The height is deliberately viewport-relative rather than a big fixed pixel
   value. A fixed height (the old 1400px) left a large empty grey area under
   the ServiceM8 form and pushed the submit button below the fold, so people
   had to scroll around hunting for it.

   Height tracks the browser window instead, so the form and its buttons stay
   reachable. script.js will also shrink the frame to fit if ServiceM8 reports
   its real content height. */
.booking-embed {
  width: 100%;
  height: min(1150px, calc(100vh - 150px));
  min-height: 640px;
  border: 1px solid var(--border-light);
  border-radius: 10px;
  display: block;
  background: var(--cream);
  transition: height .2s ease;
}
@media (max-width: 720px) {
  .booking-embed {
    height: min(1250px, calc(100vh - 110px));
    min-height: 560px;
  }
}

/* "Open in its own tab" helper — the most reliable escape hatch if the
   embedded form ever feels cramped on a small screen. */
.booking-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 22px;
}
.booking-note {
  text-align: center;
  font-size: 13.5px;
  color: var(--text-muted);
  max-width: 620px;
  margin: 0 auto 22px;
  line-height: 1.65;
}
.booking-fallback { text-align: center; font-size: 13px; color: var(--text-muted); margin-top: 16px; }
.booking-fallback a { color: var(--green-dark); font-weight: 600; }

/* Careers page job listings */
.job-list { display: flex; flex-direction: column; gap: 16px; max-width: 820px; margin: 0 auto; }
.job-card {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  background: var(--cream); border: 1px solid var(--border-light); border-radius: 10px; padding: 22px 26px;
}
.job-card-main h3 { font-size: 17px; margin-bottom: 4px; }
.job-card-main p { font-size: 13px; color: var(--text-muted); margin: 0; }

/* Contact page */
.contact-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; max-width: var(--max-width); margin: 0 auto; padding: 70px 20px; align-items: start; }
.contact-info h2 { font-size: clamp(22px, 2.6vw, 30px); }
.contact-info .info-row { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 22px; }
.contact-info .info-icon { font-size: 20px; color: var(--green); flex-shrink: 0; }
.contact-info .info-row strong { display: block; font-size: 14px; margin-bottom: 2px; }
.contact-info .info-row span, .contact-info .info-row a { font-size: 13.5px; color: var(--text-muted); }
.contact-form-card {
  background: var(--cream); border: 1px solid var(--border-light); border-radius: 10px; padding: 28px;
}
.contact-form-card .field { color: var(--text-muted); }
.contact-form-card .field input, .contact-form-card .field textarea {
  background: var(--white); border: 1px solid var(--border-light); color: var(--text-dark);
}
.contact-form-card .field input::placeholder, .contact-form-card .field textarea::placeholder { color: #9a9a90; }

/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width: 980px) {
  .service-grid { grid-template-columns: repeat(3, 1fr); }
  .why-inner { grid-template-columns: 1fr; }
  .reviews-cta { grid-template-columns: 1fr; }
  .reviews-col { margin: 0; padding: 60px 20px; }
  .review-grid { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .team-area { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
}

/* The logo is now large enough that the full nav bar can't
   realistically fit beside it until quite wide screens, so the
   hamburger menu now kicks in much earlier than a typical mobile
   breakpoint. */
@media (max-width: 1360px) {
  .main-nav { display: none; }
  .nav-toggle { display: flex; }
  .header-cta { display: none; }
  .logo-spacer { width: 230px; }
  .logo-drop { width: 230px; height: 128px; clip-path: polygon(0 0, 100% 0, calc(100% - 40px) 100%, 0 100%); }
  .header-logo { height: 128px; padding-left: 14px; }
  .header-logo img { height: 88px; }
  .header-logo .logo-main { font-size: 18px; }
  .hero-content { padding-top: 20px; }
  .header-logo .logo-sub { font-size: 9.5px; }
  .logo-social { top: 12px; left: 104px; gap: 5px; }
  .logo-social .social-link { width: 22px; height: 22px; }
  .logo-social .social-link svg { width: 12px; height: 12px; }
  .site-header.open .main-nav {
    display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
    position: absolute; top: 100%; left: 0; right: 0; background: var(--near-black);
    padding: 16px 20px; border-top: 1px solid #2a2a22;
  }
}

@media (max-width: 720px) {
  .checkbox-grid { grid-template-columns: 1fr; }
  .trust-row { gap: 20px; }
  .service-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-grid { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; }
  .final-cta-inner { flex-direction: column; align-items: flex-start; }
  .content-grid-2 { grid-template-columns: 1fr; }
  .content-grid-2.reverse .content-text,
  .content-grid-2.reverse .ph-image { order: initial; }
  .area-grid { grid-template-columns: repeat(2, 1fr); }
  .safety-grid { grid-template-columns: 1fr; }
  .step-list { grid-template-columns: 1fr 1fr; }
  .contact-wrap { grid-template-columns: 1fr; }
  .service-detail { grid-template-columns: 1fr; }
  .service-box p { -webkit-line-clamp: initial; }
  .service-detail .service-photo-wrap { width: 100%; height: auto; aspect-ratio: 4/3; transform: none; }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 980px) {
  .area-grid { grid-template-columns: repeat(3, 1fr); }
}

/* City landing page links in the service-area chip grid */
a.area-chip { text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; }
a.area-chip:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.12); }


/* =========================================================
   CITY LANDING PAGES (electrician-boise.html, etc.)
   Self-contained so it can't inherit the dark-section
   text colors used by .why-item.
========================================================= */
.city-section { max-width: 1100px; margin: 0 auto; padding: 64px 24px; }
.city-section .section-title { text-align: left; margin-bottom: 10px; }
.city-lede {
  font-size: 16px;
  line-height: 1.75;
  color: var(--text-muted);
  max-width: 760px;
  margin: 0 0 8px;
}

/* Issue cards — dark text on white, no flex-icon assumptions */
.city-issues {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 34px;
}
.city-issue {
  background: var(--cream);
  border: 1px solid var(--border-light);
  border-left: 4px solid var(--green);
  border-radius: var(--radius);
  padding: 24px 26px;
}
.city-issue h3 {
  font-size: 17px;
  line-height: 1.3;
  color: var(--text-dark);
  margin: 0 0 10px;
}
.city-issue p {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--text-muted);
  margin: 0;
}

/* Service list — flexible, won't orphan the last card */
.city-services {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 20px;
  margin-top: 34px;
}
.city-service {
  display: block;
  text-decoration: none;
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  padding: 22px 24px;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.city-service:hover {
  border-color: var(--green);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,.07);
}
.city-service h3 {
  font-size: 15.5px;
  color: var(--text-dark);
  margin: 0 0 8px;
}
.city-service p {
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--text-muted);
  margin: 0;
}

/* Info panel (permits / coverage) */
.city-info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-top: 34px;
}
.city-info-card {
  background: var(--cream);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  padding: 26px 28px;
}
.city-info-card h3 {
  font-size: 16px;
  color: var(--text-dark);
  margin: 0 0 12px;
}
.city-info-card p {
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--text-muted);
  margin: 0 0 10px;
}
.city-info-card p:last-child { margin-bottom: 0; }
.city-zips {
  font-size: 13px;
  color: var(--text-dark);
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: 4px;
  padding: 10px 12px;
  line-height: 1.6;
}

@media (max-width: 860px) {
  .city-section { padding: 44px 20px; }
  .city-issues, .city-info { grid-template-columns: 1fr; gap: 18px; }
}

/* =========================================================
   WHO WE SERVE — three-path cards (added)
========================================================= */
.paths { padding: 64px 24px 24px; max-width: 1200px; margin: 0 auto; }
.path-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 32px;
}
.path-card {
  display: block; text-decoration: none; color: inherit;
  background: var(--white); border: 1px solid var(--border-light);
  border-radius: var(--radius); overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.path-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0,0,0,.12);
  border-color: var(--green);
}
.path-img { aspect-ratio: 16 / 10; overflow: hidden; background: var(--cream); }
.path-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.path-body { padding: 20px 22px 24px; }
.path-body h3 { font-size: 18px; margin-bottom: 8px; }
.path-body p { font-size: 13.5px; color: var(--text-muted); margin: 0 0 14px; }
.path-link { font-size: 13px; font-weight: 700; color: var(--green-dark); }
.path-card:hover .path-link { text-decoration: underline; }
@media (max-width: 900px) {
  .path-grid { grid-template-columns: 1fr; }
  .paths { padding-top: 48px; }
}

/* Hero form select — matches text inputs (added) */
.field select.field-select {
  display: block; width: 100%; margin-top: 6px;
  background: #101009; border: 1px solid #33332a; border-radius: var(--radius);
  padding: 11px 12px; color: var(--white); font-family: var(--font-body); font-size: 14px;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236dbe4c' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
.field select.field-select:focus { outline: none; border-color: var(--green); }
.field select.field-select:invalid { color: #6b6b60; }
.form-fine-print { font-size: 11.5px; color: #8f8f83; text-align: center; margin-top: 10px; }

/* Clickable service cards (added) */
a.service-card { text-decoration: none; color: inherit; display: block; border-radius: var(--radius); transition: transform .15s ease; }
a.service-card:hover { transform: translateY(-3px); }
a.service-card:hover h3 { color: var(--green-dark); }
a.service-card:hover .service-icon { background: var(--green); color: var(--white); }

/* Trust item as link (added) */
a.trust-link { text-decoration: none; }
a.trust-link:hover span { text-decoration: underline; }

/* Why-us SVG icons (added) */
.why-item .why-icon svg { width: 24px; height: 24px; }

/* =========================================================
   COMMERCIAL & INDUSTRIAL — bid form + industrial section (added)
========================================================= */
.industrial-section { background: var(--near-black); color: var(--white); padding: 72px 24px; }
.industrial-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }
.industrial-inner h2 { color: var(--white); }
.industrial-inner .lead { color: #d5d5cc; }
.industrial-list { list-style: none; padding: 0; margin: 20px 0 26px; }
.industrial-list li { padding: 7px 0 7px 28px; position: relative; font-size: 14.5px; color: #e8e8e0; }
.industrial-list li::before {
  content: ""; position: absolute; left: 0; top: 13px;
  width: 14px; height: 14px; border-radius: 3px;
  background: var(--green);
  clip-path: polygon(54% 0, 21% 58%, 46% 58%, 40% 100%, 79% 40%, 52% 40%);
}
.industrial-img { border-radius: var(--radius); overflow: hidden; }
.industrial-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 900px) {
  .industrial-inner { grid-template-columns: 1fr; }
}

.bid-section { padding: 72px 24px; background: var(--cream); }
.bid-inner { max-width: 760px; margin: 0 auto; }
.bid-form {
  background: var(--white); border: 1px solid var(--border-light);
  border-radius: var(--radius); padding: 32px 28px; margin-top: 28px;
}
.bid-form .field { color: var(--text-muted); }
.bid-form .field input, .bid-form .field textarea, .bid-form .field select.field-select {
  background: var(--white); border: 1px solid #d8d7cf; color: var(--text-dark);
}
.bid-form .field input::placeholder, .bid-form .field textarea::placeholder { color: #9a9a90; }
.bid-form .field input:focus, .bid-form .field textarea:focus, .bid-form .field select.field-select:focus { border-color: var(--green); }
.bid-form .file-drop { border-color: #cfceC5; color: #7c7c72; background: #fbfaf7; }
.bid-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
@media (max-width: 640px) { .bid-two-col { grid-template-columns: 1fr; } }

.sectors-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.sector-chip {
  font-size: 12.5px; font-weight: 600; color: var(--text-dark);
  background: var(--white); border: 1px solid var(--border-light);
  border-radius: 999px; padding: 7px 14px;
}

/* Clickable images: gallery, team photo, map (added) */
.gallery-link, .img-link { display: block; text-decoration: none; color: inherit; }
.gallery-link img, .img-link img { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.gallery-link:hover img, .img-link:hover img {
  transform: translateY(-3px);
  box-shadow: 0 10px 22px rgba(0,0,0,.14);
  border-color: var(--green);
}
.gallery-link:hover figcaption { color: var(--green-dark); text-decoration: underline; }

/* File size guard (added) */
.file-size-note {
  font-size: 12.5px; color: var(--text-muted);
  background: #f2f7ec; border: 1px solid #d8e8c8; border-radius: var(--radius);
  padding: 10px 12px; margin: 12px 0 0;
}
.file-size-note strong { color: var(--green-dark); }
.file-too-large {
  display: none;
  font-size: 13px; font-weight: 600; color: #a02020;
  background: #fdecec; border: 1px solid #f3c0c0; border-radius: var(--radius);
  padding: 10px 12px; margin-top: 10px;
}
.file-too-large.show { display: block; }
.file-too-large a { color: #a02020; }

/* =========================================================
   EDIT ME: "Remove file" button on the bid form
   Appears under the upload box as soon as a file is chosen,
   so an oversized PDF can be cleared out and a share link
   pasted instead.
========================================================= */
.file-remove-btn {
  display: inline-block;
  margin-top: 10px;
  font-family: var(--font-body);
  font-size: 12.5px; font-weight: 600;
  color: #a02020;
  background: var(--white);
  border: 1px solid #e2b8b8;
  border-radius: var(--radius);
  padding: 8px 14px;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.file-remove-btn:hover { background: #fdecec; border-color: #d89a9a; }
.file-remove-btn:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

/* Small grey helper line under a form field */
.field-hint {
  display: block;
  margin-top: 6px;
  font-size: 12px; font-weight: 400;
  color: var(--text-muted);
}
.field-hint strong { color: var(--green-dark); font-weight: 700; }

@media (max-width: 640px) {
  .file-remove-btn { display: block; width: 100%; text-align: center; }
}


/* =========================================================
   FAQ accordions (service + city pages)
========================================================= */
.faq-list { max-width: 800px; margin: 24px auto 0; display: grid; gap: 10px; }
.faq-item {
  background: var(--cream); border: 1px solid var(--border-light);
  border-radius: var(--radius); padding: 14px 18px;
}
.faq-item summary {
  cursor: pointer; font-weight: 700; font-size: 15px; color: var(--text-dark);
  list-style: none; display: flex; justify-content: space-between; gap: 12px; align-items: center;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; color: var(--green); font-weight: 800; font-size: 20px; line-height: 1; flex-shrink: 0; }
.faq-item[open] summary::after { content: "\2013"; }
.faq-item p { margin-top: 10px; font-size: 14px; color: var(--text-muted); }

/* =========================================================
   Sticky mobile call/book bar
========================================================= */
.mobile-cta-bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 90;
  display: none; grid-template-columns: 1fr 1fr; gap: 10px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: rgba(18, 18, 12, .97);
  border-top: 1px solid rgba(122, 193, 66, .4);
  box-shadow: 0 -6px 18px rgba(0, 0, 0, .25);
}
.mobile-cta-bar .btn { width: 100%; justify-content: center; }
@media (max-width: 720px) {
  .mobile-cta-bar { display: grid; }
  body { padding-bottom: 76px; }
}

/* =========================================================
   Fix: services page boxes — let text boxes grow instead of
   clipping the description and the detail buttons.
========================================================= */
.service-box p { display: block; -webkit-line-clamp: unset; overflow: visible; }
@media (min-width: 1350px) {
  .service-box { height: auto; min-height: 300px; overflow: visible; }
  .service-detail .service-photo-wrap { height: auto; min-height: 300px; align-self: stretch; }
}

/* =========================================================
   KEELY POWER SYSTEMS OVERRIDES
   Appended for the sister-company site: different hero/CTA
   photos and a smaller logo subtitle so "POWER SYSTEMS" fits.
========================================================= */
.hero-bg {
  background: url('images/keely-electric-service-vans-star-idaho.jpg') center 62% / cover no-repeat;
}
.cta-bg {
  background: url('images/electrical-troubleshooting-treasure-valley-id.jpg') center 30% / cover no-repeat;
}
.header-logo .logo-sub { font-size: 21px; letter-spacing: .1em; }
@media (max-width: 1360px) {
  .header-logo .logo-sub { font-size: 8px; letter-spacing: .1em; }
}

/* =========================================================
   TEGG BRAND — official red + logo
   TEGG red sampled from the official logo: #EB1C2D
========================================================= */
:root { --tegg-red: #eb1c2d; }
.tegg { color: var(--tegg-red); font-weight: 800; }

/* White chip so the red logo reads on dark backgrounds */
.tegg-logo-chip {
  display: inline-flex; align-items: center;
  background: #fff; border-radius: 6px; padding: 6px 10px;
}
.tegg-logo-chip img { display: block; height: 24px; width: auto; }

/* Hero trust badge (index) */
a.trust-link.tegg-badge { display: flex; align-items: center; gap: 10px; }
a.trust-link.tegg-badge > span:last-child { font-size: 12.5px; color: #d5d5cc; }

/* Light-background inline logo (index advantage section, about) */
.tegg-inline-logo { display: block; height: 34px; width: auto; margin-bottom: 12px; }

/* TEGG page hero chip — centered */
.page-hero .tegg-hero-chip { margin: 0 auto 16px; position: relative; }

/* TEGG-red step numbers in the TEGG advantage cards */
.reviews-cta .stars { color: var(--tegg-red); }

/* Trademark small print on the TEGG page */
.tegg-tm {
  font-size: 11.5px; color: var(--text-muted);
  text-align: center; max-width: 640px; margin: 26px auto 0;
}

/* FIX: the .page-hero::after glow overlay was capturing clicks on the
   hero buttons — lift interactive hero content above it. */
.page-hero .breadcrumb, .page-hero h1, .page-hero p { z-index: 1; }
.page-hero .hero-actions { position: relative; z-index: 1; }
.page-hero .tegg-logo-chip { position: relative; z-index: 1; }
/* keep "Worried about a panel?" text off the photo edge */
.cta-content h2 { max-width: 300px; }
.cta-content p { max-width: 290px; }
.reviews-cta .cta-overlay { background: linear-gradient(90deg, rgba(12,12,9,1) 0%, rgba(12,12,9,.94) 40%, rgba(12,12,9,.55) 70%, rgba(12,12,9,.25) 100%); }

/* Portrait poster images: show the whole image, uncropped */
.content-grid-2 .ph-image.ph-poster { aspect-ratio: 1119 / 1405; height: auto; object-fit: contain; max-width: 460px; justify-self: center; margin: 0 auto; background: none; border: 0; box-shadow: 0 8px 28px rgba(0,0,0,.25); }