/* TradesFolks 18.4.113 — Hero Slider Production Fix
   Scope: fix current hero only. Preserve current width, current markup and content.
   Images preserve aspect ratio and are never stretched. */

/* ==========================
   HERO FRAME / MEDIA
   ========================== */
.tf-homepage .tf-home-v3{
  padding-top:0!important;
}

.tf-homepage .tf-home-v3-hero{
  position:relative!important;
  isolation:isolate!important;
  width:calc(100% - 56px)!important;
  aspect-ratio:30 / 9!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  margin:0 auto!important;
  overflow:hidden!important;
  border:1px solid #d7e2ee!important;
  border-radius:20px!important;
  background:#071d38!important;
  box-shadow:0 12px 32px rgba(8,31,61,.10)!important;
}

/* Slider image is a CSS background. `cover` preserves its natural proportions:
   no width/height stretching is possible. */
.tf-homepage .tf-home-v3-media,
.tf-homepage .tf-home-v3-slide{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  margin:0!important;
  padding:0!important;
}

.tf-homepage .tf-home-v3-media{
  z-index:0!important;
  overflow:hidden!important;
  border-radius:inherit!important;
}

.tf-homepage .tf-home-v3-slide{
  opacity:0!important;
  background-repeat:no-repeat!important;
  background-size:cover!important;
  background-position:center center!important;
  transform:none!important;
  transition:opacity .42s ease!important;
}

.tf-homepage .tf-home-v3-slide.is-active{
  opacity:1!important;
}

/* readable left-side cinematic overlay, but do not wash out artwork */
.tf-homepage .tf-home-v3-overlay{
  position:absolute!important;
  inset:0!important;
  z-index:1!important;
  width:100%!important;
  height:100%!important;
  pointer-events:none!important;
  background:
    linear-gradient(90deg,
      rgba(4,20,42,.88) 0%,
      rgba(4,20,42,.75) 24%,
      rgba(4,20,42,.40) 44%,
      rgba(4,20,42,.08) 68%,
      rgba(4,20,42,.04) 100%),
    linear-gradient(180deg,
      rgba(4,20,42,.02) 0%,
      rgba(4,20,42,.04) 68%,
      rgba(4,20,42,.24) 100%)!important;
}

/* ==========================
   CONTENT — COMPACT & BALANCED
   ========================== */
.tf-homepage .tf-home-v3-inner{
  position:relative!important;
  z-index:2!important;
  display:flex!important;
  align-items:center!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  max-height:100%!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
}

.tf-homepage .tf-home-v3-copy{
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  width:min(625px,45%)!important;
  height:auto!important;
  max-height:calc(100% - 28px)!important;
  margin:0!important;
  padding:18px 0 18px 48px!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
}

/* Kicker */
.tf-homepage .tf-home-v3-eyebrow{
  display:inline-flex!important;
  align-items:center!important;
  align-self:flex-start!important;
  min-height:27px!important;
  margin:0 0 9px!important;
  padding:0 11px!important;
  border:1px solid rgba(249,189,43,.70)!important;
  border-radius:999px!important;
  background:rgba(5,24,52,.32)!important;
  color:#ffd35d!important;
  backdrop-filter:blur(8px)!important;
  font-size:6.4px!important;
  font-weight:900!important;
  letter-spacing:.055em!important;
}

/* Hero title */
.tf-homepage .tf-home-v3-copy h1{
  display:-webkit-box!important;
  width:100%!important;
  max-width:590px!important;
  max-height:100px!important;
  margin:0 0 7px!important;
  overflow:hidden!important;
  color:#fff!important;
  font-size:clamp(34px,2.45vw,48px)!important;
  font-weight:950!important;
  line-height:.99!important;
  letter-spacing:-.045em!important;
  text-shadow:0 3px 14px rgba(0,0,0,.18)!important;
  -webkit-box-orient:vertical!important;
  -webkit-line-clamp:2!important;
}

/* supporting description */
.tf-homepage .tf-home-v3-copy>p{
  display:-webkit-box!important;
  width:100%!important;
  max-width:570px!important;
  max-height:38px!important;
  margin:0 0 9px!important;
  overflow:hidden!important;
  color:rgba(255,255,255,.86)!important;
  font-size:8.4px!important;
  font-weight:500!important;
  line-height:1.36!important;
  -webkit-box-orient:vertical!important;
  -webkit-line-clamp:2!important;
}

/* Search */
.tf-homepage .tf-home-v3-search{
  display:flex!important;
  align-items:stretch!important;
  width:min(610px,100%)!important;
  height:47px!important;
  min-height:47px!important;
  max-height:47px!important;
  margin:0!important;
  overflow:hidden!important;
  border:1px solid rgba(255,255,255,.58)!important;
  border-radius:12px!important;
  background:#fff!important;
  box-shadow:0 9px 22px rgba(0,0,0,.14)!important;
}

.tf-homepage .tf-home-v3-search select,
.tf-homepage .tf-home-v3-search input,
.tf-homepage .tf-home-v3-search button{
  height:45px!important;
  min-height:45px!important;
  max-height:45px!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
}

.tf-homepage .tf-home-v3-search select{
  flex:0 0 132px!important;
  padding:0 12px!important;
  border-right:1px solid #e4e9ef!important;
  background:#fff!important;
  color:#0b2343!important;
  font-size:7.4px!important;
  font-weight:850!important;
}

.tf-homepage .tf-home-v3-search input{
  flex:1 1 auto!important;
  min-width:0!important;
  padding:0 12px!important;
  background:#fff!important;
  color:#0b2343!important;
  font-size:7.5px!important;
}

.tf-homepage .tf-home-v3-search button{
  flex:0 0 112px!important;
  background:linear-gradient(180deg,#ffc93f,#f9bd2b)!important;
  color:#0b2343!important;
  font-size:7.5px!important;
  font-weight:950!important;
}

/* Popular pills — compact */
.tf-homepage .tf-home-v3-popular{
  display:flex!important;
  align-items:center!important;
  flex-wrap:nowrap!important;
  gap:4px!important;
  width:min(590px,100%)!important;
  min-height:22px!important;
  margin:5px 0 0!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  scrollbar-width:none!important;
  color:rgba(255,255,255,.72)!important;
  font-size:5.7px!important;
}
.tf-homepage .tf-home-v3-popular::-webkit-scrollbar{display:none!important}
.tf-homepage .tf-home-v3-popular a{
  flex:0 0 auto!important;
  display:inline-flex!important;
  align-items:center!important;
  min-height:21px!important;
  padding:0 7px!important;
  border:1px solid rgba(255,255,255,.29)!important;
  border-radius:999px!important;
  background:rgba(5,24,52,.26)!important;
  color:#fff!important;
  font-size:5.5px!important;
  text-decoration:none!important;
}

/* CTA row */
.tf-homepage .tf-home-v3-actions{
  display:flex!important;
  align-items:center!important;
  gap:7px!important;
  width:min(520px,100%)!important;
  min-height:34px!important;
  margin:6px 0 0!important;
}
.tf-homepage .tf-home-v3-actions a{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:34px!important;
  padding:0 11px!important;
  border-radius:8px!important;
  font-size:6.3px!important;
  font-weight:900!important;
  text-decoration:none!important;
}

/* Stats stay, but don't dominate the banner */
.tf-homepage .tf-home-v3-stats{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  width:min(500px,100%)!important;
  height:55px!important;
  min-height:55px!important;
  max-height:55px!important;
  margin:7px 0 0!important;
  overflow:hidden!important;
  border:1px solid rgba(255,255,255,.22)!important;
  border-radius:11px!important;
  background:rgba(5,24,52,.32)!important;
  backdrop-filter:blur(7px)!important;
}
.tf-homepage .tf-home-v3-stats>div{
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  min-width:0!important;
  padding:7px 11px!important;
  border-right:1px solid rgba(255,255,255,.15)!important;
}
.tf-homepage .tf-home-v3-stats>div:last-child{border-right:0!important}
.tf-homepage .tf-home-v3-stats strong{
  color:#fff!important;
  font-size:13px!important;
  font-weight:950!important;
  line-height:1!important;
}
.tf-homepage .tf-home-v3-stats span{
  margin-top:4px!important;
  color:rgba(255,255,255,.72)!important;
  font-size:5.2px!important;
  line-height:1.05!important;
}

/* ==========================
   SLIDER CONTROLS
   ========================== */
.tf-homepage .tf-home-v3-slider-ui{
  position:absolute!important;
  left:0!important;
  right:0!important;
  bottom:10px!important;
  z-index:4!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:7px!important;
  padding:0 14px!important;
  pointer-events:none!important;
}

.tf-homepage .tf-home-v3-slider-ui>button{
  pointer-events:auto!important;
  display:grid!important;
  place-items:center!important;
  width:34px!important;
  height:34px!important;
  min-width:34px!important;
  min-height:34px!important;
  padding:0!important;
  border:1px solid rgba(255,255,255,.34)!important;
  border-radius:50%!important;
  background:rgba(5,24,52,.55)!important;
  color:#fff!important;
  backdrop-filter:blur(7px)!important;
  font-size:22px!important;
}

.tf-homepage .tf-home-v3-dots{
  display:flex!important;
  align-items:center!important;
  gap:4px!important;
  pointer-events:auto!important;
}
.tf-homepage .tf-home-v3-dots button{
  width:6px!important;
  height:6px!important;
  min-width:6px!important;
  min-height:6px!important;
  padding:0!important;
  border:0!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.55)!important;
}
.tf-homepage .tf-home-v3-dots button.is-active{
  width:21px!important;
  background:#f9bd2b!important;
}

/* ==========================
   TRUST STRIP + NEXT SECTION GAP
   ========================== */
.tf-homepage .tf-home-v3-trust{
  width:calc(100% - 56px)!important;
  min-height:42px!important;
  margin:0 auto 16px!important;
  padding:0!important;
  overflow:hidden!important;
  border:1px solid #dbe5ef!important;
  border-top:0!important;
  border-radius:0 0 16px 16px!important;
  background:#fff!important;
  box-shadow:0 5px 16px rgba(8,31,61,.035)!important;
}

.tf-homepage .tf-home-v3-trust>.shell{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex-wrap:wrap!important;
  gap:10px!important;
  width:100%!important;
  min-height:42px!important;
  margin:0!important;
  padding:6px 12px!important;
  box-sizing:border-box!important;
}
.tf-homepage .tf-home-v3-trust span{
  color:#3d5874!important;
  font-size:6px!important;
  font-weight:800!important;
  white-space:nowrap!important;
}
.tf-homepage .tf-home-v3-trust i{
  width:4px!important;
  height:4px!important;
  border-radius:50%!important;
  background:#f9bd2b!important;
}

/* Explicit separation so the blue industries section never looks attached */
.tf-homepage .tf-home-v3-industries{
  margin-top:0!important;
  border-top:0!important;
}

/* ==========================
   TABLET
   ========================== */
@media(min-width:700px) and (max-width:1023px){
  .tf-homepage .tf-home-v3-hero{
    width:calc(100% - 32px)!important;
    aspect-ratio:auto!important;
    height:390px!important;
    min-height:390px!important;
    max-height:390px!important;
    border-radius:17px!important;
  }
  .tf-homepage .tf-home-v3-copy{
    width:58%!important;
    max-height:calc(100% - 20px)!important;
    padding:16px 0 16px 28px!important;
  }
  .tf-homepage .tf-home-v3-copy h1{
    font-size:31px!important;
    max-height:66px!important;
  }
  .tf-homepage .tf-home-v3-trust{
    width:calc(100% - 32px)!important;
    margin-bottom:14px!important;
  }
}

/* ==========================
   MOBILE
   ========================== */
@media(max-width:699px){
  .tf-homepage .tf-home-v3-hero{
    width:calc(100% - 16px)!important;
    aspect-ratio:auto!important;
    height:420px!important;
    min-height:420px!important;
    max-height:420px!important;
    border-radius:15px!important;
  }

  /* keep image proportions; use full-height crop instead of distortion */
  .tf-homepage .tf-home-v3-slide{
    background-size:cover!important;
    background-position:center center!important;
  }

  .tf-homepage .tf-home-v3-overlay{
    background:
      linear-gradient(180deg,
        rgba(4,20,42,.16) 0%,
        rgba(4,20,42,.45) 38%,
        rgba(4,20,42,.88) 68%,
        rgba(4,20,42,.96) 100%)!important;
  }

  .tf-homepage .tf-home-v3-inner{
    align-items:flex-end!important;
  }

  .tf-homepage .tf-home-v3-copy{
    justify-content:flex-end!important;
    width:100%!important;
    height:auto!important;
    max-height:100%!important;
    padding:13px 12px 14px!important;
  }

  .tf-homepage .tf-home-v3-eyebrow{
    min-height:23px!important;
    margin-bottom:6px!important;
    padding:0 9px!important;
    font-size:5.5px!important;
  }

  .tf-homepage .tf-home-v3-copy h1{
    max-width:100%!important;
    max-height:57px!important;
    margin-bottom:5px!important;
    font-size:26px!important;
  }

  .tf-homepage .tf-home-v3-copy>p{
    max-width:100%!important;
    max-height:31px!important;
    margin-bottom:6px!important;
    font-size:7px!important;
    line-height:1.28!important;
  }

  .tf-homepage .tf-home-v3-search{
    height:42px!important;
    min-height:42px!important;
    max-height:42px!important;
    border-radius:10px!important;
  }
  .tf-homepage .tf-home-v3-search select,
  .tf-homepage .tf-home-v3-search input,
  .tf-homepage .tf-home-v3-search button{
    height:40px!important;
    min-height:40px!important;
    max-height:40px!important;
    font-size:6.7px!important;
  }
  .tf-homepage .tf-home-v3-search select{flex-basis:82px!important;padding-inline:8px!important}
  .tf-homepage .tf-home-v3-search input{padding-inline:8px!important}
  .tf-homepage .tf-home-v3-search button{flex-basis:66px!important}

  .tf-homepage .tf-home-v3-popular{
    margin-top:4px!important;
    min-height:20px!important;
  }
  .tf-homepage .tf-home-v3-popular a{
    min-height:19px!important;
    padding-inline:6px!important;
    font-size:5px!important;
  }

  .tf-homepage .tf-home-v3-actions{
    min-height:31px!important;
    margin-top:4px!important;
  }
  .tf-homepage .tf-home-v3-actions a{
    min-height:31px!important;
    padding-inline:8px!important;
    font-size:5.8px!important;
  }

  .tf-homepage .tf-home-v3-stats{
    height:46px!important;
    min-height:46px!important;
    max-height:46px!important;
    margin-top:5px!important;
  }
  .tf-homepage .tf-home-v3-stats>div{padding:5px!important}
  .tf-homepage .tf-home-v3-stats strong{font-size:10.5px!important}
  .tf-homepage .tf-home-v3-stats span{font-size:4.6px!important}

  .tf-homepage .tf-home-v3-slider-ui{
    bottom:7px!important;
    padding-inline:8px!important;
  }
  .tf-homepage .tf-home-v3-slider-ui>button{
    width:29px!important;
    height:29px!important;
    min-width:29px!important;
    min-height:29px!important;
    font-size:18px!important;
  }

  .tf-homepage .tf-home-v3-trust{
    width:calc(100% - 16px)!important;
    min-height:38px!important;
    margin:0 auto 12px!important;
    border-radius:0 0 13px 13px!important;
  }
  .tf-homepage .tf-home-v3-trust>.shell{
    justify-content:flex-start!important;
    flex-wrap:nowrap!important;
    min-height:38px!important;
    padding:6px 9px!important;
    overflow-x:auto!important;
    scrollbar-width:none!important;
  }
  .tf-homepage .tf-home-v3-trust>.shell::-webkit-scrollbar{display:none!important}
  .tf-homepage .tf-home-v3-trust span{
    flex:0 0 auto!important;
    font-size:5.4px!important;
  }
}