/*
Theme Name: Get Rooter Rebuild
Theme URI: https://getrooternow.com
Author: 2POINT / Get Rooter
Description: Rebuild theme converted from the approved 2026-10-28 website mockup (14 pages, San Diego + Phoenix). Faithful conversion of the mockup design.
Version: 1.1.0
Text Domain: getrooter-rebuild
*/

  * { box-sizing: border-box;  margin: 0; padding: 0; }
  body { font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background: #e8edf3; color: #14273c; }
  
  
  
  
  
  
  div.page { display: block; max-width: 1080px; margin: 18px auto 40px; background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 10px 34px rgba(10,30,55,.18); }
  
  /* Variant B header */
  .hdr { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 16px 22px; flex-wrap: wrap; }
  .brand { display: flex; align-items: center; gap: 12px; }
  .mark { background: #0b2a4a; color: #fff; font-weight: 900; font-size: 20px; border-radius: 10px; padding: 10px 12px; letter-spacing: .5px; }
  .mark span { color: #f97316; }
  .logoimg { height: 58px; width: auto; display: block; }
  .bname { font-size: 20px; font-weight: 800; color: #0b2a4a; line-height: 1.1; }
  .blic { font-size: 10px; letter-spacing: 3px; color: #5a7189; font-weight: 700; margin-top: 3px; }
  .callbox { text-align: right; }
  .callbox .lab { font-size: 11px; letter-spacing: 3px; color: #f97316; font-weight: 800; }
  .callbox .num { font-size: 30px; font-weight: 900; color: #0b2a4a; line-height: 1.05; }
  .callbox .sub { font-size: 12px; color: #5a7189; font-weight: 600; }
  .strip { background: #f97316; color: #fff; display: flex; justify-content: space-between; gap: 10px; padding: 10px 22px; font-weight: 800; font-size: 15px; flex-wrap: wrap; }
  .strip .lic { letter-spacing: 3px; font-size: 12px; font-weight: 700; align-self: center; }
  .nav { display: flex; gap: 18px; padding: 10px 22px; border-bottom: 1px solid #e3eaf1; font-size: 13.5px; font-weight: 600; color: #33506e; flex-wrap: wrap; }
  .hero { padding: 30px 22px 26px; background: linear-gradient(180deg, #f2f7fc, #ffffff); display: grid; grid-template-columns: 1.5fr 1fr; gap: 22px; }
  @media (max-width: 720px) { .hero { grid-template-columns: 1fr; } .callbox { text-align: left; } }
.hdr { position: sticky; top: 0; z-index: 40; background: #ffffff; box-shadow: 0 2px 10px rgba(11,42,74,.08); }
  .strip.disc { background: #0b2a4a; font-size: 17px; padding: 13px 22px; align-items: center; }
  .strip.disc b { font-size: 24px; color: #ffb703; letter-spacing: .5px; }
.strip.disc .lic { color: #ffb703; }
  .offers { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
  .offer { background: #f2f7fc; border-radius: 12px; padding: 20px; text-align: center; }
  .offer .big { font-size: 46px; font-weight: 900; color: #0b2a4a; line-height: 1; }
  .offer .t { font-weight: 800; color: #0b2a4a; margin-top: 6px; font-size: 16px; }
  .offer .d { color: #3c5872; font-size: 13.5px; line-height: 1.5; margin-top: 4px; }
  .offer.hot { background: linear-gradient(135deg, #f97316, #ea580c); }
  .offer.hot .big, .offer.hot .t { color: #ffffff; }
  .offer.hot .d { color: #ffedd5; }
  .pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
  .pillar { background: #f2f7fc; border-radius: 12px; padding: 16px; }
  .pillar h3 { color: #0b2a4a; font-size: 16px; margin-bottom: 6px; }
  .pillar p { color: #3c5872; font-size: 13.5px; line-height: 1.5; }
  .revband { display: grid; grid-template-columns: .8fr 1.4fr 1fr; gap: 12px; align-items: stretch; }
  @media (max-width: 720px) { .revband { grid-template-columns: 1fr; } }
  .revscore { background: #0b2a4a; color: #fff; border-radius: 12px; padding: 18px; text-align: center; }
  .revscore .big { font-size: 44px; font-weight: 900; line-height: 1; }
  .revscore .stars { color: #ffb703; font-size: 20px; letter-spacing: 2px; }
  .revquote { background: #fff7ed; border: 1px solid #fed7aa; border-radius: 12px; padding: 18px; }
  .revquote .q { font-size: 17px; line-height: 1.5; color: #0b2a4a; font-weight: 600; }
  .revquote .who { margin-top: 8px; font-size: 13px; color: #9a3412; }
  .revcard2 { background: #f2f7fc; border-radius: 12px; padding: 18px; color: #3c5872; font-size: 14px; line-height: 1.55; }
  .revcard2 b { color: #0b2a4a; }
  .callback { background: linear-gradient(120deg, #0b2a4a, #123c66); border-radius: 14px; padding: 20px; color: #fff; display: grid; grid-template-columns: 1fr 1.2fr; gap: 18px; align-items: center; }
  @media (max-width: 720px) { .callback { grid-template-columns: 1fr; } }
  .callback h2 { font-size: 22px; margin-bottom: 6px; }
  .callback p { font-size: 14px; color: #c9dcee; line-height: 1.5; }
  .cbform { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .cbform input, .cbform select { padding: 11px 12px; border-radius: 9px; border: none; font-size: 14px; width: 100%; }
  .cbform .full { grid-column: 1 / -1; }
  .cbform button { grid-column: 1 / -1; background: #f97316; color: #fff; border: none; padding: 12px; border-radius: 9px; font-weight: 800; font-size: 15px; cursor: pointer; }
  #stickybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; background: #0b2a4a; display: flex; gap: 10px; padding: 10px 14px; box-shadow: 0 -4px 16px rgba(0,0,0,.25); }
  #stickybar a { flex: 1; text-align: center; text-decoration: none; font-weight: 800; padding: 12px; border-radius: 10px; font-size: 16px; }
  #stickybar .call { background: #f97316; color: #fff; }
  #stickybar .book { background: #ffffff; color: #0b2a4a; }
  body { padding-bottom: 64px; }
  .hero { position: relative; overflow: hidden; }
  @keyframes tickmove { from { transform: translateX(0); } to { transform: translateX(-50%); } }
  .ticker { overflow: hidden; flex: 1; min-width: 0; white-space: nowrap; }
  .ticker .track { display: inline-flex; width: max-content; animation: tickmove 26s linear infinite; }
  .ticker .track span { padding-right: 12px; }
  @keyframes btnpulse { 0% { box-shadow: 0 0 0 0 rgba(249,115,22,.55); } 70% { box-shadow: 0 0 0 14px rgba(249,115,22,0); } 100% { box-shadow: 0 0 0 0 rgba(249,115,22,0); } }
  #stickybar .call, .pricecard .btn:not(.ghost) { animation: btnpulse 2.2s ease-out infinite; }
  @keyframes burstpulse { 0%,100% { transform: scale(1) rotate(-4deg); } 50% { transform: scale(1.07) rotate(-4deg); } }
  .burstwrap { animation: burstpulse 3.2s ease-in-out infinite; }
  @keyframes ctashift { from { background-position: 0% 0; } to { background-position: 200% 0; } }
  .bigcta { background: linear-gradient(120deg, #f97316, #ea580c, #f97316); background-size: 200% 100%; animation: ctashift 5s linear infinite; }
  @keyframes fadeup { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
  div.page.active .blk, div.page.active .hero { animation: fadeup .55s ease both; }
  .hero .herovid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
  .hero .heroshade { position: absolute; inset: 0; z-index: 1; background: linear-gradient(100deg, rgba(255,255,255,.94) 38%, rgba(255,255,255,.62) 68%, rgba(255,255,255,.32) 100%); }
  .hero > div:not(.heroshade) { position: relative; z-index: 2; }
  .hero.vanbg { background: url(assets/hero-van.jpg) center 30%/cover no-repeat; }
  .hero h1 { font-size: 34px; line-height: 1.12; color: #0b2a4a; font-weight: 900; }
  .hero h1 em { color: #f97316; font-style: normal; }
  .hero p { margin-top: 12px; font-size: 15.5px; line-height: 1.55; color: #3c5872; }
  .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
  .chip { background: #eaf2fa; color: #0b2a4a; border-radius: 999px; padding: 6px 12px; font-size: 12.5px; font-weight: 700; }
  .chip b { color: #b97d0f; }
  .pricecard { background: #0b2a4a; border-radius: 14px; color: #fff; padding: 20px; align-self: start; }
  .pricecard .k { font-size: 11px; letter-spacing: 2.5px; color: #ffb25e; font-weight: 800; }
  .pricecard .p { font-size: 52px; font-weight: 900; line-height: 1; margin: 6px 0 2px; }
  .pricecard .d { font-size: 14px; color: #c9d6e4; line-height: 1.45; }
  .btn { display: block; text-align: center; background: #f97316; color: #fff; font-weight: 800; font-size: 16px; padding: 13px; border-radius: 10px; margin-top: 14px; text-decoration: none; }
  .btn.ghost { background: transparent; border: 2px solid #5a7189; color: #dbe7f3; margin-top: 9px; font-size: 14px; padding: 10px; }
  section.blk { padding: 24px 22px 6px; }
  .blk h2 { font-size: 22px; color: #0b2a4a; font-weight: 900; }
  .blk .lede { color: #3c5872; font-size: 14.5px; margin-top: 6px; line-height: 1.55; }
  .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin: 16px 0 20px; }
  .svc { border: 1px solid #e3eaf1; border-radius: 12px; padding: 15px; }
  .svc h3 { font-size: 15.5px; color: #0b2a4a; }
  .svc p { font-size: 13px; color: #5a7189; line-height: 1.5; margin-top: 5px; }
  .svc .tag { display: inline-block; margin-top: 8px; font-size: 11px; font-weight: 800; color: #f97316; letter-spacing: 1px; }
  .offers { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 16px 0 20px; }
  @media (max-width: 720px) { .offers { grid-template-columns: 1fr; } }
  .offer { border-radius: 12px; padding: 18px; background: #fff4ea; border: 1px solid #ffd9b8; }
  .offer.blue { background: #eaf2fa; border-color: #c8dcee; }
  .offer h3 { color: #0b2a4a; font-size: 17px; }
  .offer p { font-size: 13.5px; color: #3c5872; line-height: 1.55; margin-top: 5px; }
  .revs { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin: 16px 0 20px; }
  .rev { border: 1px solid #e3eaf1; border-radius: 12px; padding: 15px; }
  .stars { color: #e8a812; font-size: 15px; letter-spacing: 2px; }
  .rev p { font-size: 14px; line-height: 1.55; color: #22364f; margin-top: 7px; }
  .rev .who { font-size: 12px; color: #5a7189; font-weight: 700; margin-top: 8px; }
  .areas { display: flex; flex-wrap: wrap; gap: 7px; margin: 14px 0 20px; }
  .areas span { background: #f2f7fc; border: 1px solid #dde7f0; border-radius: 999px; padding: 5px 11px; font-size: 12.5px; font-weight: 600; color: #33506e; }
  .faq { margin: 12px 0 22px; }
  .faq div { border-top: 1px solid #e3eaf1; padding: 12px 2px; }
  .faq h4 { font-size: 14.5px; color: #0b2a4a; }
  .faq p { font-size: 13.5px; color: #3c5872; line-height: 1.55; margin-top: 4px; }
  .note { background: #fff8e6; border: 1px dashed #d9a514; color: #6b5410; font-size: 13px; line-height: 1.55; padding: 12px 16px; margin: 0 22px 18px; border-radius: 10px; }
  .ftr .fine { flex-basis: 100%; font-size: 11px; color: #8fa6bd; letter-spacing: .4px; }
  .ftr { background: #0b2a4a; color: #c9d6e4; padding: 20px 22px; font-size: 13px; line-height: 1.7; display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
  .ftr b { color: #fff; }
  .ftr .lic { letter-spacing: 2.5px; font-size: 11px; color: #ffb25e; font-weight: 700; }
  
  .splash { background: url(assets/splash-kitchen.jpg) center 62%/cover no-repeat #0b2a4a; color: #fff; padding: 30px 22px 28px; display: grid; position: relative; overflow: hidden; grid-template-columns: .62fr 1.7fr; gap: 20px; align-items: center; }
  @media (max-width: 720px) { .splash { grid-template-columns: 1fr; } .splash .burstwrap { grid-column: 1 !important; grid-row: auto !important; margin: 6px auto 0; } .splash > div:not(.shade):not(.burstwrap) { grid-column: 1 !important; grid-row: auto !important; } } .splash h2 { font-size: 34px; } 

  .splash video.bgvid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 62%; z-index: 0; }
  .splash .shade { position: absolute; inset: 0; background: linear-gradient(260deg, rgba(6,24,44,.93) 30%, rgba(6,24,44,.72) 62%, rgba(6,24,44,.45) 100%); z-index: 1; }
  .splash > div:not(.shade) { position: relative; z-index: 2; }
  .splash > div:not(.shade):not(.burstwrap) { grid-column: 2; grid-row: 1; }
  .splash .kick { font-size: 12px; letter-spacing: 3px; color: #ffb25e; font-weight: 800; }
  .splash h2 { font-size: 42px; font-weight: 900; line-height: 1.04; margin-top: 8px; }
  .splash h2 em { color: #ffc21c; font-style: normal; }
  .splash p { margin-top: 12px; font-size: 15.5px; line-height: 1.55; color: #c9d6e4; max-width: 520px; }
  .splash .row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
  .splash .call { background: #f97316; color: #fff; font-weight: 800; font-size: 16px; padding: 13px 20px; border-radius: 10px; text-decoration: none; }
  .splash .book { background: transparent; border: 2px solid #5a7189; color: #dbe7f3; font-weight: 700; font-size: 15px; padding: 12px 18px; border-radius: 10px; text-decoration: none; }
  .splash .fine { margin-top: 14px; font-size: 12.5px; color: #8fb0d1; font-weight: 600; }
  .burstwrap { position: relative; width: 258px; height: 258px; margin: 34px auto 0 -28px; grid-column: 1; grid-row: 1; }
  .bursttxt { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #0b2a4a; text-align: center; }
  .bursttxt .amt { font-size: 62px; font-weight: 900; line-height: .95; }
  .bursttxt .lbl { font-size: 14px; font-weight: 900; letter-spacing: 1.5px; margin-top: 3px; }
  .bursttxt .sm { font-size: 11px; font-weight: 700; margin-top: 2px; }
  .bigcta { background: #f97316; color: #fff; text-align: center; padding: 22px; }
  .bigcta .n { font-size: 30px; font-weight: 900; }
  .bigcta .t { font-weight: 700; font-size: 14px; letter-spacing: 1px; }

/* === WP theme additions (not in mockup): nav links + blog === */
.nav a { color: inherit; text-decoration: none; }
.nav a:hover { text-decoration: underline; }
.gr-blog { max-width: 820px; margin: 0 auto; }
.gr-blog article { margin-bottom: 34px; }
.gr-blog h1, .gr-blog h2 { line-height: 1.25; margin-bottom: 10px; }
.gr-blog p { line-height: 1.65; margin-bottom: 14px; }
.gr-blog img { max-width: 100%; height: auto; }
.gr-blog .meta { font-size: 13px; color: #5b7186; margin-bottom: 12px; }
.gr-nav-posts { display: flex; justify-content: space-between; gap: 12px; margin-top: 26px; }

.cbform form { display: grid; gap: 10px; }
.cbform form p { margin: 0; }
.cbform .wpcf7-submit { background: #f97316; color: #fff; font-weight: 800; font-size: 15px; padding: 12px; border-radius: 10px; cursor: pointer; width: 100%; border: none; }
.cbform .wpcf7-response-output { margin: 10px 0 0; border-radius: 10px; }
#gr-geo-banner{display:none;align-items:center;gap:14px;flex-wrap:wrap;background:#0b2a4a;color:#fff;padding:12px 18px;font-size:14.5px;line-height:1.45;}
#gr-geo-banner a{color:#ffb25e;font-weight:800;}
#gr-geo-banner .gr-geo-btn{background:#f97316;color:#fff !important;text-decoration:none;padding:9px 14px;border-radius:9px;font-weight:800;white-space:nowrap;}
#gr-geo-banner .gr-geo-x{color:#c9d6e4;text-decoration:none;font-weight:700;margin-left:auto;}
#gr-geo-banner .gr-geo-txt{flex:1;min-width:220px;}