/* ============================================================
Contractor SEO & Lead Generation — industry landing page
(reusable template; brand #ff7a45 / black / white / cream)
============================================================ */
   .hv,
   .hv h1,
   .hv h2,
   .hv h3,
   .hv h4,
   .hv h5,
   .hv p,
   .hv span,
   .hv a,
   .hv div,
   .hv li,
   .hv summary {
      font-family: "Poppins", sans-serif
   }

   .hv {
      --o: #ff7a45;
      --o2: #ff9e6b;
      --od: #e5622f;
      --ink: #141414;
      --cream: #FFF4EF;
      --dark: #0e0f12;
      --dark2: #17181d;
      position: relative;
      z-index: 2
   }

   #mainfooter {
      position: relative;
      z-index: 1
   }

   .hv * {
      box-sizing: border-box
   }

   #mainheader {
      min-height: 0 !important;
      padding: 0 !important
   }

   .hv .container {
      max-width: 1180px;
      width: 100%;
      margin-left: auto;
      margin-right: auto;
      padding-left: 20px;
      padding-right: 20px
   }

   .hv .cmn_padd {
      padding: 78px 20px
   }

   /* buttons */
   .hv-btn {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      background: var(--o);
      color: #fff;
      font-weight: 600;
      font-size: 15px;
      padding: 15px 30px;
      border-radius: 10px;
      text-decoration: none;
      transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
      border: 2px solid var(--o);
      box-shadow: 0 10px 26px rgba(255, 122, 69, .28)
   }

   .hv-btn:hover {
      background: var(--od);
      border-color: var(--od);
      color: #fff;
      transform: translateY(-3px);
      box-shadow: 0 16px 34px rgba(255, 122, 69, .4)
   }

   .hv-btn.out {
      background: transparent;
      color: var(--o);
      box-shadow: none
   }

   .hv-btn.out:hover {
      background: var(--o);
      color: #fff
   }

   .hv-btn svg {
      width: 17px;
      height: 17px
   }

   .hv-btns {
      display: flex;
      flex-wrap: wrap;
      gap: 15px;
      margin-top: 32px
   }

   /* reveal */
   .hv .reveal {
      opacity: 0;
      transform: translateY(28px);
      transition: opacity .7s cubic-bezier(.16, 1, .3, 1), transform .7s cubic-bezier(.16, 1, .3, 1);
      transition-delay: var(--d, 0s)
   }

   .hv .reveal.in {
      opacity: 1;
      transform: none
   }

   @media(prefers-reduced-motion:reduce) {
      .hv .reveal {
         opacity: 1 !important;
         transform: none !important;
         transition: none !important
      }

      .hv [class*="hv-float"] {
         animation: none !important;
      }
   }

   /* headings */
   .hv-head {
      text-align: center;
      max-width: 800px;
      margin: 0 auto
   }

   .hv-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 1.6px;
      text-transform: uppercase;
      color: var(--o);
      background: #fff4ef;
      border: 1px solid #ffd8c6;
      padding: 7px 15px;
      border-radius: 30px;
      margin-bottom: 16px
   }

   .hv-eyebrow svg {
      width: 14px;
      height: 14px;
      stroke: var(--o)
   }

   .hv-eyebrow.on-dark {
      background: rgba(255, 122, 69, .12);
      border-color: rgba(255, 122, 69, .35)
   }

   .hv-head h2 {
      font-size: 36px;
      line-height: 1.15;
      font-weight: 700;
      color: var(--ink);
      margin: 0
   }

   .hv-head h2 span {
      color: var(--o)
   }

   .hv-head .uline {
      width: 110px;
      height: 5px;
      border-radius: 4px;
      background: linear-gradient(90deg, var(--o), #ffc3a3);
      margin: 16px auto 0
   }

   .hv-head p {
      font-size: 16px;
      line-height: 1.7;
      color: #5c5c5c;
      max-width: 680px;
      margin: 20px auto 0
   }

   /* =====================================================================
HERO (dark, two column) with phone mockup
===================================================================== */
   .hv-hero {
      padding: 160px 20px 100px;
   }

   .hv-hero:before {
      top: -160px;
      right: -120px;
      width: 640px;
      height: 640px;
      background: radial-gradient(circle, rgba(255, 122, 69, .27), transparent 62%);
   }

   .hv-hero:after {
      mask-image: radial-gradient(circle at 30% 40%, #000, transparent 78%);
      -webkit-mask-image: radial-gradient(circle at 30% 40%, #000, transparent 78%);
   }

   .hv-hero .container {
      display: grid;
      grid-template-columns: 1.1fr .9fr;
      gap: 50px;
      align-items: center;
   }

   .hv-hero-eyebrow {
      margin-bottom: 22px;
   }

   .hv-h1 {
      font-size: 52px;
      line-height: 1.07;
      margin: 0 0 20px;
   }

   .hv-sub {
      font-size: 18px;
   }

   .hv-trust {
      gap: 10px 22px;
      margin-top: 30px;
   }

   .hv-trust .t {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 13.5px;
      font-weight: 500;
      color: #cfd2db;
   }

   .hv-trust .t svg {
      width: 16px;
      height: 16px;
      stroke: var(--o);
      flex: 0 0 auto;
   }

   .hv-hero .anim {
      transform: translateY(26px);
      animation: hvUp .8s cubic-bezier(.16, 1, .3, 1) forwards;
   }

   .hv-hero .anim.d1 {
      animation-delay: .06s;
   }

   .hv-hero .anim.d2 {
      animation-delay: .16s;
   }

   .hv-hero .anim.d3 {
      animation-delay: .26s;
   }

   .hv-hero .anim.d4 {
      animation-delay: .36s;
   }

   .hv-hero .anim.d5 {
      animation-delay: .46s;
   }

   @keyframes hvUp {
      to {
         opacity: 1;
         transform: none
      }
   }

   @media(prefers-reduced-motion:reduce) {}

   .hv-float {
      animation: hvFloaty 6s ease-in-out infinite;
   }

   @keyframes hvFloaty {

      0%,
      100% {
         transform: translateY(0)
      }

      50% {
         transform: translateY(-12px)
      }
   }

   /* phone mockup */
   .hv-heright {
      position: relative
   }

   .hv-heright:before {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      width: 460px;
      height: 460px;
      transform: translate(-50%, -50%);
      background: radial-gradient(circle, rgba(255, 122, 69, .22), transparent 62%);
      pointer-events: none;
      z-index: 0
   }

   .hv-phonewrap {
      position: relative;
      z-index: 1;
      display: flex;
      justify-content: center
   }

   .hv-phone {
      position: relative;
      width: 286px;
      background: #0a0b0d;
      border-radius: 42px;
      padding: 13px;
      box-shadow: 0 40px 80px rgba(0, 0, 0, .55);
      border: 1px solid rgba(255, 255, 255, .08)
   }

   .hv-phone .notch {
      position: absolute;
      top: 20px;
      left: 50%;
      transform: translateX(-50%);
      width: 110px;
      height: 22px;
      background: #0a0b0d;
      border-radius: 0 0 14px 14px;
      z-index: 3
   }

   .hv-phone .screen {
      background: #f4f1ee;
      border-radius: 32px;
      overflow: hidden;
      min-height: 520px
   }

   .hv-phone .sbar {
      background: #fff;
      margin: 0;
      padding: 34px 16px 14px;
      display: flex;
      align-items: center;
      gap: 9px;
      box-shadow: 0 1px 0 #eee
   }

   .hv-phone .sbar .q {
      flex: 1;
      background: #f1eeeb;
      border: 1px solid #e6e0da;
      border-radius: 20px;
      padding: 9px 13px;
      font-size: 12.5px;
      color: #333;
      font-weight: 500
   }

   .hv-phone .sbar .mg {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: var(--o);
      display: flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto
   }

   .hv-phone .sbar .mg svg {
      width: 15px;
      height: 15px;
      stroke: #fff
   }

   .hv-phone .body {
      padding: 14px
   }

   .hv-phone .ai {
      display: flex;
      align-items: center;
      gap: 7px;
      font-size: 10.5px;
      font-weight: 700;
      letter-spacing: .5px;
      text-transform: uppercase;
      color: var(--o);
      margin-bottom: 9px
   }

   .hv-phone .ai svg {
      width: 13px;
      height: 13px;
      stroke: var(--o)
   }

   .hv-phone .card {
      background: #fff;
      border-radius: 16px;
      padding: 15px;
      box-shadow: 0 10px 24px rgba(0, 0, 0, .08);
      border: 1px solid #efe7e2;
      position: relative
   }

   .hv-phone .card .rec {
      position: absolute;
      top: -9px;
      right: 12px;
      background: var(--o);
      color: #fff;
      font-size: 9.5px;
      font-weight: 700;
      padding: 4px 10px;
      border-radius: 20px
   }

   .hv-phone .card .top {
      display: flex;
      align-items: center;
      gap: 10px
   }

   .hv-phone .card .lg {
      width: 40px;
      height: 40px;
      border-radius: 11px;
      background: linear-gradient(135deg, var(--o), #ff9e6b);
      color: #fff;
      font-weight: 800;
      font-size: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto
   }

   .hv-phone .card h5 {
      margin: 0;
      font-size: 14px;
      font-weight: 700;
      color: #111
   }

   .hv-phone .card .meta {
      font-size: 11px;
      color: #8a8a8a;
      margin-top: 1px
   }

   .hv-phone .card .stars {
      color: var(--o);
      font-size: 12px;
      letter-spacing: 1.5px;
      margin: 10px 0 0
   }

   .hv-phone .card .stars small {
      color: #999;
      letter-spacing: 0;
      margin-left: 5px
   }

   .hv-phone .card .call {
      margin-top: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      background: var(--o);
      color: #fff;
      font-size: 13px;
      font-weight: 700;
      padding: 11px;
      border-radius: 10px;
      text-decoration: none
   }

   .hv-phone .card .call svg {
      width: 15px;
      height: 15px;
      stroke: #fff
   }

   .hv-phone .u {
      height: 9px;
      border-radius: 5px;
      background: #e7e0da;
      margin-top: 12px
   }

   .hv-phone .u.s {
      width: 70%
   }

   /* =====================================================================
PAIN POINTS (light, 3-up strip)
===================================================================== */
   .hv-pain {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 22px;
      margin-top: 12px
   }

   .hv-pain .it {
      position: relative;
      overflow: hidden;
      background: #fff;
      border: 1px solid #f2ece7;
      border-radius: 18px;
      padding: 30px 26px 28px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, .06);
      transition: transform .32s cubic-bezier(.16, 1, .3, 1), box-shadow .32s ease, border-color .32s ease
   }

   .hv-pain .it:before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: linear-gradient(90deg, var(--o), #ff9e6b)
   }

   .hv-pain .it:hover {
      transform: translateY(-10px);
      box-shadow: 0 26px 52px rgba(255, 122, 69, .16);
      border-color: #ffd8c6
   }

   .hv-pain .it .ic {
      width: 52px;
      height: 52px;
      border-radius: 14px;
      background: linear-gradient(135deg, #fff2ea, #ffe0d1);
      border: 1px solid #ffe0d1;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--o);
      margin-bottom: 16px;
      box-shadow: 0 8px 18px rgba(255, 122, 69, .14)
   }

   .hv-pain .it .ic svg {
      width: 26px;
      height: 26px;
      stroke: var(--o)
   }

   .hv-pain .it h4 {
      font-size: 17px;
      font-weight: 700;
      color: #111;
      margin: 0 0 8px
   }

   .hv-pain .it p {
      font-size: 14px;
      line-height: 1.7;
      color: #666;
      margin: 0
   }

   /* =====================================================================
HOW WE GROW CONTRACTOR (cream) — single growth-plan strip
===================================================================== */
   .hv-plan {
      position: relative;
      max-width: 940px;
      margin: 48px auto 0;
      background: #fff;
      border: 1px solid #f0e5de;
      border-radius: 22px;
      padding: 12px 30px;
      box-shadow: 0 24px 60px rgba(0, 0, 0, .09)
   }

   .hv-plan:before {
      content: "";
      position: absolute;
      left: 60px;
      top: 70px;
      bottom: 70px;
      width: 2px;
      background: repeating-linear-gradient(#ffcaad 0 7px, transparent 7px 15px);
      z-index: 0
   }

   .hv-plan .step {
      display: flex;
      align-items: center;
      gap: 22px;
      padding: 24px 8px;
      text-decoration: none;
      border-bottom: 1px solid #f4efec;
      position: relative;
      z-index: 1;
      border-radius: 14px;
      transition: background .25s ease, box-shadow .25s ease
   }

   .hv-plan .step:last-child {
      border-bottom: 0
   }

   .hv-plan .step .n {
      position: relative;
      z-index: 1;
      width: 60px;
      height: 60px;
      flex: 0 0 60px;
      border-radius: 16px;
      background: linear-gradient(135deg, #fff2ea, #ffe0d1);
      border: 1px solid #ffe0d1;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--o);
      box-shadow: 0 10px 22px rgba(255, 122, 69, .18);
      transition: box-shadow .25s ease, transform .25s ease
   }

   .hv-plan .step .n svg {
      width: 30px;
      height: 30px;
      stroke: var(--o)
   }

   .hv-plan .svc {
      flex: 0 0 32%;
      min-width: 0
   }

   .hv-plan .svc b {
      display: flex;
      align-items: center;
      gap: 7px;
      font-size: 16px;
      font-weight: 700;
      color: #111
   }

   .hv-plan .svc b svg {
      width: 15px;
      height: 15px;
      stroke: var(--o);
      flex: 0 0 auto;
      transition: transform .25s ease
   }

   .hv-plan .svc small {
      display: inline-block;
      font-size: 12px;
      color: var(--o);
      font-weight: 700;
      letter-spacing: .3px;
      margin-top: 4px
   }

   .hv-plan .arrow {
      color: #e0d4cc;
      flex: 0 0 auto
   }

   .hv-plan .arrow svg {
      width: 20px;
      height: 20px;
      stroke: #e6d8d0;
      transition: stroke .25s ease, transform .25s ease
   }

   .hv-plan .out {
      flex: 1;
      font-size: 14.5px;
      line-height: 1.6;
      color: #555;
      font-weight: 500
   }

   .hv-plan .step:hover {
      background: #fff8f4;
      box-shadow: 0 14px 32px rgba(255, 122, 69, .12)
   }

   .hv-plan .step:hover .n {
      transform: translateY(-2px);
      box-shadow: 0 14px 28px rgba(255, 122, 69, .34)
   }

   .hv-plan .step:hover .svc b svg {
      transform: translateX(4px)
   }

   .hv-plan .step:hover .svc small {
      text-decoration: underline
   }

   .hv-plan .step:hover .arrow svg {
      stroke: var(--o);
      transform: translateX(3px)
   }

   .hv-plan .step:hover .out {
      color: #333
   }

   /* =====================================================================
PROOF (dark)
===================================================================== */
   .hv-proof {
      background: var(--dark);
      position: relative;
      overflow: hidden
   }

   .hv-proof:before {
      content: "";
      position: absolute;
      top: -150px;
      left: -120px;
      width: 520px;
      height: 520px;
      background: radial-gradient(circle, rgba(255, 122, 69, .16), transparent 62%);
      pointer-events: none
   }

   .hv-proof .container {
      position: relative;
      z-index: 2
   }

   .hv-proofgrid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 26px;
      align-items: stretch
   }

   .hv-stat {
      background: var(--dark2);
      border: 1px solid rgba(255, 255, 255, .08);
      border-radius: 20px;
      padding: 36px 32px;
      display: flex;
      flex-direction: column;
      justify-content: center
   }

   .hv-stat .big {
      font-size: 56px;
      font-weight: 800;
      color: var(--o);
      line-height: 1;
      letter-spacing: -1px
   }

   .hv-stat p {
      margin: 14px 0 0;
      font-size: 15px;
      line-height: 1.65;
      color: #c8cbd3
   }

   .hv-tst {
      background: #fff;
      border-radius: 20px;
      padding: 36px 32px;
      box-shadow: 0 24px 56px rgba(0, 0, 0, .35);
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: center
   }

   .hv-tst .stars {
      color: var(--o);
      font-size: 15px;
      letter-spacing: 3px;
      margin-bottom: 12px
   }

   .hv-tst .q {
      font-size: 15px;
      line-height: 1.75;
      color: #333;
      margin: 0 0 18px
   }

   .hv-tst .who {
      display: flex;
      align-items: center;
      gap: 12px
   }

   .hv-tst .av {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--o), #ff9e6b);
      color: #fff;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 17px
   }

   .hv-tst .nm {
      font-weight: 700;
      color: #111
   }

   .hv-tst .nm small {
      display: block;
      font-weight: 500;
      color: #999;
      font-size: 12.5px
   }

   .hv-certs {
      display: flex;
      flex-wrap: wrap;
      align-items: stretch;
      justify-content: center;
      gap: 16px;
      margin-top: 38px
   }

   .hv-certs .lab {
      flex-basis: 100%;
      text-align: center;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 1.4px;
      text-transform: uppercase;
      color: #8a8d99;
      margin-bottom: 4px
   }

   .hv-certs .c {
      background: #fff;
      border: 1px solid #efe7e2;
      border-radius: 14px;
      padding: 16px 18px 13px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 9px;
      min-width: 126px;
      box-shadow: 0 12px 30px rgba(0, 0, 0, .3);
      transition: transform .3s ease, box-shadow .3s ease
   }

   .hv-certs .c:hover {
      transform: translateY(-5px);
      box-shadow: 0 20px 40px rgba(255, 122, 69, .2)
   }

   .hv-certs .c img {
      height: 36px;
      width: auto;
      max-width: 132px;
      object-fit: contain
   }

   .hv-certs .c .nm {
      font-size: 11px;
      font-weight: 600;
      color: #555;
      text-align: center
   }

   /* =====================================================================
FAQ (light, accordion)
===================================================================== */
   .hv-faq {
      max-width: 840px;
      margin: 44px auto 0
   }

   .hv-faq details {
      background: #fff;
      border: 1px solid #f2ece7;
      border-radius: 14px;
      margin-bottom: 14px;
      box-shadow: 0 8px 24px rgba(0, 0, 0, .05);
      transition: box-shadow .3s ease, border-color .3s ease
   }

   .hv-faq details[open] {
      border-color: #ffd8c6;
      box-shadow: 0 16px 38px rgba(255, 122, 69, .12)
   }

   .hv-faq summary {
      cursor: pointer;
      list-style: none;
      padding: 20px 50px 20px 24px;
      font-weight: 600;
      color: #1E1E1E;
      font-size: 16px;
      position: relative
   }

   .hv-faq summary::after {
      content: "";
      position: absolute;
      right: 24px;
      top: 24px;
      width: 9px;
      height: 9px;
      border-right: 2px solid #c3a99b;
      border-bottom: 2px solid #c3a99b;
      transform: rotate(45deg);
      transition: transform .3s ease, border-color .3s ease
   }

   .hv-faq details[open] summary::after {
      transform: rotate(-135deg);
      border-color: var(--o)
   }

   .hv-faq summary::-webkit-details-marker {
      display: none
   }

   .hv-faq details[open] summary {
      color: var(--o)
   }

   .hv-faq .fa {
      padding: 0 24px 20px;
      color: #666;
      font-size: 14.5px;
      line-height: 1.75;
      overflow: hidden;
      box-sizing: border-box;
      transition: max-height .32s ease
   }

   .hv-faq .fa a {
      color: var(--o);
      font-weight: 600;
      text-decoration: none
   }

   .hv-faq .fa .ph {
      color: #a99f98;
      font-style: italic;
      font-size: 12.5px
   }

   /* =====================================================================
CLOSING CTA (dark)
===================================================================== */
   .hv-close {
      background: var(--dark);
      position: relative;
      overflow: hidden;
      padding: 76px 20px
   }

   .hv-close:before {
      content: "";
      position: absolute;
      top: -140px;
      left: 50%;
      transform: translateX(-50%);
      width: 640px;
      height: 420px;
      background: radial-gradient(circle, rgba(255, 122, 69, .24), transparent 62%);
      pointer-events: none
   }

   .hv-close .container {
      position: relative;
      z-index: 2;
      text-align: center
   }

   .hv-close h2 {
      color: #fff;
      font-size: 36px;
      font-weight: 700;
      margin: 0 auto 14px;
      letter-spacing: -.4px
   }

   .hv-close h2 span {
      color: var(--o)
   }

   .hv-close p {
      color: #b9bcc6;
      font-size: 16.5px;
      line-height: 1.7;
      max-width: 540px;
      margin: 0 auto
   }

   .hv-close .hv-btns {
      justify-content: center
   }

   /* =====================================================================
RESPONSIVE
===================================================================== */
   @media(max-width:992px) {
      .hv-hero {
         padding: 145px 18px 72px;
      }

      .hv-hero .container {
         display: flex;
         flex-direction: column;
         gap: 44px;
      }

      .hv-h1 {
         font-size: 42px;
      }

      .hv-pain {
         grid-template-columns: 1fr
      }

      .hv-plan:before {
         display: none
      }

      .hv-plan .step {
         flex-wrap: wrap;
         gap: 14px
      }

      .hv-plan .svc {
         flex: 1 1 auto
      }

      .hv-plan .arrow {
         display: none
      }

      .hv-plan .out {
         flex: 1 1 100%;
         padding-left: 82px
      }

      .hv-proofgrid {
         grid-template-columns: 1fr
      }
   }

   @media(max-width:600px) {
      .hv-h1 {
         font-size: 34px;
      }

      .hv-head h2,
      .hv-close h2 {
         font-size: 27px
      }

      .hv-btns {
         flex-direction: column
      }

      .hv-btn {
         justify-content: center
      }

      .hv-plan .out {
         padding-left: 0
      }
   }