:root{--bg:#05080d;--panel:#0b121b;--blue:#0a84ff;--text:#f7f9fc;--muted:#aeb8c5;--line:#19324e}
*{box-sizing:border-box}html,body{margin:0;width:100%;max-width:100%;overflow-x:hidden;background:#05080d;color:var(--text);font-family:Arial,Helvetica,sans-serif}
body{background:linear-gradient(rgba(3,7,12,.97),rgba(3,7,12,.97)),radial-gradient(circle at 50% 0,#0d2f59 0,transparent 26%)}
a{text-decoration:none;color:inherit}
.topbar{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;position:sticky;top:0;z-index:40;background:rgba(4,8,13,.96);border-bottom:1px solid #162234}
.logo-kb,.logo-hr{font-size:28px;font-weight:900;font-style:italic;letter-spacing:-4px}.logo-hr{color:var(--blue)}
.nav-toggle{display:block;background:#0b121b;color:white;border:1px solid #29425c;border-radius:6px;font-size:20px;padding:4px 9px}
nav{display:none;position:absolute;top:64px;left:0;right:0;background:#070b11;padding:18px;flex-direction:column;gap:14px}nav.open{display:flex}
.hero-banner-wrap{width:100%;padding:0;margin:0}.hero-banner-img{display:block;width:100%;height:auto}.hero-banner-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:14px 16px 8px}
.btn{display:flex;align-items:center;justify-content:center;min-height:48px;border-radius:6px;padding:0 16px;font-weight:800;border:1px solid var(--blue)}.primary{background:var(--blue)}.secondary{background:#07111f}
.section{width:min(1180px,100%);margin:0 auto;padding:58px 18px}.compact{padding-top:48px;padding-bottom:48px}.eyebrow{color:var(--blue);font-weight:800;text-transform:uppercase;letter-spacing:1.7px;font-size:12px}.section h2{font-size:34px;line-height:1.05;margin:8px 0 12px}.section-lead{color:var(--muted);max-width:780px}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:28px}.cards article{background:linear-gradient(180deg,#0b141f,#08101a);border:1px solid var(--line);border-radius:10px;padding:20px}.cards h3{font-size:17px}.cards p{font-size:13px;color:var(--muted)}.icon{color:var(--blue);font-size:28px}
.results-panel{text-align:center}.job-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:28px}.job-card{text-align:left;background:#07101a;border:1px solid #145ca6;border-radius:12px;overflow:hidden}.job-card h3{padding:12px 14px;margin:0;font-size:19px}.job-pair{display:grid;grid-template-columns:1fr 1fr}.job-pair figure{margin:0;position:relative;overflow:hidden}.job-pair img{display:block;width:100%;height:260px;object-fit:cover}.job-pair figcaption{position:absolute;left:10px;bottom:10px;background:#05080ddd;padding:6px 10px;font-weight:900}.job-pair figcaption.after{background:#0b4ea9e8}.actual{text-align:center;background:#063a84;color:white;font-weight:900;padding:8px}
.info-strip{width:min(1180px,calc(100% - 36px));margin:0 auto 20px;display:grid;grid-template-columns:repeat(4,1fr);border:1px solid #174a80;border-radius:10px;overflow:hidden;background:linear-gradient(90deg,#071321,#0b2748,#071321)}.info-strip div{padding:18px;text-align:center;border-right:1px solid #1d4b7c}.info-strip div:last-child{border-right:0}.info-strip b,.info-strip span{display:block}.info-strip span{font-size:12px;color:#c3ced9;margin-top:4px}
.youtube-box{display:flex;align-items:center;justify-content:space-between;gap:24px;background:#08121d;border:1px solid #193a5c;border-radius:12px;margin-top:34px;margin-bottom:34px}.youtube-box h2{color:#fff}.contact{background:#09121d;border-radius:12px;margin-bottom:40px}.contact-buttons{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}
footer{padding:28px 18px 90px;border-top:1px solid #18283b;color:#aeb8c5;font-size:12px;text-align:center;display:grid;gap:8px}.floating-call{position:fixed;left:10px;right:10px;bottom:10px;z-index:60;background:var(--blue);padding:14px;border-radius:7px;text-align:center;font-weight:900;box-shadow:0 10px 30px #000}
@media(max-width:900px){.cards{grid-template-columns:repeat(2,1fr)}.job-grid{grid-template-columns:1fr}.info-strip{grid-template-columns:repeat(2,1fr)}.youtube-box{display:grid}.job-pair img{height:220px}}
@media(max-width:560px){.hero-banner-actions{grid-template-columns:1fr}.section{padding-left:16px;padding-right:16px}.section h2{font-size:30px}.cards{grid-template-columns:repeat(2,1fr)}.cards article{padding:16px}.cards h3{font-size:15px}.cards p{font-size:12px}.job-pair img{height:175px}.info-strip{grid-template-columns:1fr 1fr}.info-strip div{padding:14px 10px}.youtube-box{margin-left:12px;margin-right:12px}.contact{margin-left:12px;margin-right:12px}.contact-buttons .btn{width:100%}}
@media(min-width:901px){.nav-toggle{display:none}nav{display:flex;position:static;background:none;padding:0;flex-direction:row}}


/* v7 forced mobile layout */
@media (max-width: 700px) {
  body, main { width: 100vw !important; max-width: 100vw !important; }
  .section, .compact, .results-panel {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .compact-cards, .cards {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }
  .cards article {
    width: auto !important;
    min-width: 0 !important;
  }
  .job-grid {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
  }
  .job-card { width: 100% !important; }
  .info-strip {
    width: calc(100% - 32px) !important;
    margin-left: 16px !important;
    margin-right: 16px !important;
    grid-template-columns: 1fr 1fr !important;
  }
  .youtube-box, .contact {
    width: calc(100% - 32px) !important;
    margin-left: 16px !important;
    margin-right: 16px !important;
  }
}

/* v8 Facebook link */
.facebook-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  border: 1px solid rgba(34,139,230,.55);
  background: rgba(10,34,60,.72);
  color: #fff;
  border-radius: 10px;
  padding: 10px 14px;
  margin: 8px 8px 8px 0;
}
.facebook-link .social-icon {
  width: 28px; height: 28px; border-radius: 50%;
  display: inline-grid; place-items: center;
  background: #1877F2; color: white; font-weight: 800;
  font-family: Arial, sans-serif;
}
.facebook-link span:last-child { display:flex; flex-direction:column; line-height:1.05; }
.facebook-link small { opacity:.72; margin-top:4px; }
@media (max-width:700px) {
  .facebook-link { width: 100%; justify-content:center; box-sizing:border-box; }
}


/* v10: approved v8 layout retained; only two comparison graphics added */
.compare-suite {
  width: min(1180px, 100%);
  margin: 0 auto;
}
.compare-stack {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  margin-top: 28px;
}
.compare-panel {
  background: #05080d;
  border: 1px solid #174f89;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 18px 55px rgba(0,0,0,.42);
}
.compare-panel img {
  display: block;
  width: 100%;
  height: auto;
}
.compare-caption {
  margin: 0;
  padding: 12px 16px 14px;
  color: #9faab7;
  font-size: 12px;
  line-height: 1.45;
}
@media (min-width: 1050px) {
  .compare-stack {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}
@media (max-width: 700px) {
  .compare-suite {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .compare-panel {
    border-radius: 10px;
  }
}

/* v12 SEO health update: visible local-service H1 while retaining approved styling */
.section h1{font-size:40px;line-height:1.04;margin:8px 0 10px;max-width:900px}
.section-tagline{font-size:21px;font-weight:800;margin:0 0 12px;color:#f7f9fc}
.cards h2{font-size:17px;margin-block-start:1em;margin-block-end:1em}
@media(max-width:560px){.section h1{font-size:31px}.section-tagline{font-size:19px}}


/* v13: keep warranty visible but secondary to price/service */
.info-strip .warranty-secondary{opacity:.72}
.info-strip .warranty-secondary b{font-size:.96em;font-weight:650}

/* v15 portfolio additions */
.detail-pair{margin-top:12px}
.detail-pair figure{opacity:.98}
.detail-pair figcaption{font-size:.72rem}

/* v16: Camry recent-job cards use stacked full-width comparisons for better mobile viewing */
.job-card.camry-stacked .job-pair {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  padding: 0 0 8px;
}
.job-card.camry-stacked .job-pair img {
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
  background: #03070c;
}
.job-card.camry-stacked .detail-pair {
  margin-top: 4px;
}
@media (max-width: 560px) {
  .job-card.camry-stacked .job-pair img {
    height: auto;
  }
  .job-card.camry-stacked .job-pair figcaption {
    font-size: 15px;
    padding: 6px 10px;
  }
}