/* TradesFolks 18.4.110 — Premium Global Sourcing Hero
   CSS-only visual upgrade. Existing hero markup/data/search/slider behavior is preserved. */

/* hero outer shell / common current variants */
.tf-homepage [class*="hero"]{
  box-sizing:border-box;
}

.tf-homepage .hero,
.tf-homepage .hero-slider,
.tf-homepage .homepage-hero,
.tf-homepage .home-hero,
.tf-homepage .tf-hero,
.tf-homepage .tf-home-hero{
  position:relative!important;
  isolation:isolate!important;
}

/* visible slide/frame */
.tf-homepage .hero-slide,
.tf-homepage .hero-slider-slide,
.tf-homepage .swiper-slide.hero-slide,
.tf-homepage .tf-hero-slide,
.tf-homepage .tf-home-hero-slide{
  position:relative!important;
  overflow:hidden!important;
  border:1px solid rgba(255,255,255,.14)!important;
  border-radius:22px!important;
  background:#071d38!important;
  box-shadow:0 18px 48px rgba(4,18,47,.16)!important;
}

/* image rendering */
.tf-homepage .hero-slide img,
.tf-homepage .hero-slider-slide img,
.tf-homepage .tf-hero-slide img,
.tf-homepage .tf-home-hero-slide img,
.tf-homepage .hero-background img,
.tf-homepage .hero-bg img{
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  object-fit:cover!important;
  object-position:center!important;
  transform:none!important;
}

/* layered cinematic overlay */
.tf-homepage .hero-slide:before,
.tf-homepage .hero-slider-slide:before,
.tf-homepage .tf-hero-slide:before,
.tf-homepage .tf-home-hero-slide:before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:1!important;
  pointer-events:none!important;
  background:
    linear-gradient(90deg,rgba(3,20,42,.92) 0%,rgba(3,20,42,.78) 25%,rgba(3,20,42,.40) 49%,rgba(3,20,42,.10) 71%,rgba(3,20,42,.18) 100%),
    linear-gradient(180deg,rgba(3,20,42,.04) 0%,rgba(3,20,42,.12) 65%,rgba(3,20,42,.48) 100%)!important;
}

.tf-homepage .hero-slide:after,
.tf-homepage .hero-slider-slide:after,
.tf-homepage .tf-hero-slide:after,
.tf-homepage .tf-home-hero-slide:after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:1!important;
  pointer-events:none!important;
  background:
    radial-gradient(circle at 15% 18%,rgba(7,91,199,.18),transparent 24%),
    radial-gradient(circle at 73% 68%,rgba(249,189,43,.10),transparent 21%)!important;
}

/* common content wrappers */
.tf-homepage .hero-content,
.tf-homepage .hero-copy,
.tf-homepage .hero-inner,
.tf-homepage .hero-caption,
.tf-homepage .hero-search-panel{
  position:relative!important;
  z-index:3!important;
}

/* verified/supplier badge variants */
.tf-homepage .hero-content .badge,
.tf-homepage .hero-content .eyebrow,
.tf-homepage .hero-copy .badge,
.tf-homepage .hero-kicker{
  display:inline-flex!important;
  align-items:center!important;
  min-height:30px!important;
  padding:0 12px!important;
  border:1px solid rgba(249,189,43,.68)!important;
  border-radius:999px!important;
  background:rgba(4,22,48,.46)!important;
  backdrop-filter:blur(10px)!important;
  -webkit-backdrop-filter:blur(10px)!important;
  color:#ffd35d!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.03)!important;
  font-size:7px!important;
  font-weight:900!important;
  letter-spacing:.055em!important;
}

/* headline */
.tf-homepage .hero h1,
.tf-homepage .hero-content h1,
.tf-homepage .hero-copy h1,
.tf-homepage .hero-content h2,
.tf-homepage .tf-home-hero h1{
  max-width:640px!important;
  margin:12px 0 8px!important;
  color:#fff!important;
  font-size:42px!important;
  font-weight:950!important;
  line-height:.98!important;
  letter-spacing:-.045em!important;
  text-shadow:0 4px 20px rgba(0,0,0,.20)!important;
}

/* descriptive copy */
.tf-homepage .hero-content p,
.tf-homepage .hero-copy p,
.tf-homepage .hero-description{
  max-width:620px!important;
  margin:0 0 12px!important;
  color:rgba(255,255,255,.87)!important;
  font-size:12px!important;
  line-height:1.42!important;
}

/* Search container */
.tf-homepage .hero-search,
.tf-homepage .hero-search-form,
.tf-homepage .hero-searchbox,
.tf-homepage .hero-search-bar,
.tf-homepage form[class*="hero"][class*="search"]{
  display:flex!important;
  align-items:stretch!important;
  width:min(650px,100%)!important;
  min-height:54px!important;
  overflow:hidden!important;
  border:1px solid rgba(255,255,255,.58)!important;
  border-radius:15px!important;
  background:rgba(255,255,255,.96)!important;
  box-shadow:0 14px 32px rgba(4,18,47,.20)!important;
}

.tf-homepage .hero-search select,
.tf-homepage .hero-search input,
.tf-homepage .hero-search-form select,
.tf-homepage .hero-search-form input,
.tf-homepage .hero-searchbox select,
.tf-homepage .hero-searchbox input,
.tf-homepage .hero-search-bar select,
.tf-homepage .hero-search-bar input{
  min-height:52px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:#0b2343!important;
  box-shadow:none!important;
  font-size:10px!important;
}

.tf-homepage .hero-search select,
.tf-homepage .hero-search-form select,
.tf-homepage .hero-searchbox select,
.tf-homepage .hero-search-bar select{
  flex:0 0 138px!important;
  border-right:1px solid #e5eaf0!important;
  font-weight:850!important;
}

.tf-homepage .hero-search input,
.tf-homepage .hero-search-form input,
.tf-homepage .hero-searchbox input,
.tf-homepage .hero-search-bar input{
  flex:1 1 auto!important;
  min-width:0!important;
  padding-inline:14px!important;
}

.tf-homepage .hero-search button,
.tf-homepage .hero-search-form button,
.tf-homepage .hero-searchbox button,
.tf-homepage .hero-search-bar button{
  flex:0 0 132px!important;
  min-height:52px!important;
  border:0!important;
  border-radius:0!important;
  background:linear-gradient(180deg,#ffc93f 0%,#f9bd2b 100%)!important;
  color:#0b2343!important;
  box-shadow:none!important;
  font-size:10px!important;
  font-weight:950!important;
}

/* keyword chips */
.tf-homepage .hero-popular,
.tf-homepage .hero-keywords,
.tf-homepage .popular-searches{
  display:flex!important;
  align-items:center!important;
  flex-wrap:wrap!important;
  gap:5px!important;
  margin-top:8px!important;
  color:rgba(255,255,255,.74)!important;
  font-size:7px!important;
}

.tf-homepage .hero-popular a,
.tf-homepage .hero-keywords a,
.tf-homepage .popular-searches a{
  display:inline-flex!important;
  align-items:center!important;
  min-height:25px!important;
  padding:0 9px!important;
  border:1px solid rgba(255,255,255,.28)!important;
  border-radius:999px!important;
  background:rgba(5,24,52,.34)!important;
  backdrop-filter:blur(8px)!important;
  color:#fff!important;
  text-decoration:none!important;
  font-size:6.7px!important;
}

/* CTA group */
.tf-homepage .hero-actions,
.tf-homepage .hero-cta-row{
  display:flex!important;
  gap:8px!important;
  margin-top:10px!important;
}

.tf-homepage .hero-actions a,
.tf-homepage .hero-actions button,
.tf-homepage .hero-cta-row a,
.tf-homepage .hero-cta-row button{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:40px!important;
  padding:0 14px!important;
  border-radius:10px!important;
  font-size:8px!important;
  font-weight:900!important;
  text-decoration:none!important;
}

/* stats / metrics */
.tf-homepage .hero-stats,
.tf-homepage .hero-metrics,
.tf-homepage .hero-stat-grid{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  width:min(630px,100%)!important;
  margin-top:12px!important;
  overflow:hidden!important;
  border:1px solid rgba(255,255,255,.22)!important;
  border-radius:14px!important;
  background:rgba(5,24,52,.36)!important;
  backdrop-filter:blur(10px)!important;
  -webkit-backdrop-filter:blur(10px)!important;
  box-shadow:0 10px 24px rgba(4,18,47,.13)!important;
}

.tf-homepage .hero-stats>*,
.tf-homepage .hero-metrics>*,
.tf-homepage .hero-stat-grid>*{
  min-height:58px!important;
  padding:10px 14px!important;
  border-right:1px solid rgba(255,255,255,.16)!important;
}

.tf-homepage .hero-stats>*:last-child,
.tf-homepage .hero-metrics>*:last-child,
.tf-homepage .hero-stat-grid>*:last-child{
  border-right:0!important;
}

.tf-homepage .hero-stats strong,
.tf-homepage .hero-metrics strong,
.tf-homepage .hero-stat-grid strong{
  display:block!important;
  color:#fff!important;
  font-size:16px!important;
  font-weight:950!important;
  line-height:1!important;
}

.tf-homepage .hero-stats span,
.tf-homepage .hero-stats small,
.tf-homepage .hero-metrics span,
.tf-homepage .hero-metrics small,
.tf-homepage .hero-stat-grid span,
.tf-homepage .hero-stat-grid small{
  display:block!important;
  margin-top:5px!important;
  color:rgba(255,255,255,.73)!important;
  font-size:6.5px!important;
}

/* Slider arrows */
.tf-homepage .hero-slider .swiper-button-prev,
.tf-homepage .hero-slider .swiper-button-next,
.tf-homepage .hero-prev,
.tf-homepage .hero-next,
.tf-homepage .hero-arrow{
  width:38px!important;
  height:38px!important;
  border:1px solid rgba(255,255,255,.36)!important;
  border-radius:50%!important;
  background:rgba(5,24,52,.58)!important;
  backdrop-filter:blur(8px)!important;
  color:#fff!important;
  box-shadow:0 6px 16px rgba(4,18,47,.18)!important;
}

/* Dots */
.tf-homepage .hero-slider .swiper-pagination-bullet,
.tf-homepage .hero-dots button,
.tf-homepage .hero-dots span{
  width:7px!important;
  height:7px!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.58)!important;
  opacity:1!important;
}

.tf-homepage .hero-slider .swiper-pagination-bullet-active,
.tf-homepage .hero-dots .active{
  width:22px!important;
  background:#f9bd2b!important;
}

/* bottom trust strip */
.tf-homepage .hero-trust-strip,
.tf-homepage .hero-bottom-strip,
.tf-homepage .hero-usps,
.tf-homepage .hero-benefits{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex-wrap:wrap!important;
  gap:16px!important;
  min-height:42px!important;
  margin-top:0!important;
  padding:8px 14px!important;
  border:1px solid #dfe7f0!important;
  border-top:0!important;
  border-radius:0 0 18px 18px!important;
  background:#fff!important;
  color:#38506d!important;
  box-shadow:0 7px 18px rgba(7,31,63,.035)!important;
  font-size:6.8px!important;
  font-weight:800!important;
}

/* desktop height */
@media(min-width:1200px){
  .tf-homepage .hero-slide,
  .tf-homepage .hero-slider-slide,
  .tf-homepage .tf-hero-slide,
  .tf-homepage .tf-home-hero-slide{
    min-height:510px!important;
    max-height:560px!important;
  }
}

/* mobile */
@media(max-width:699px){
  .tf-homepage .hero-slide,
  .tf-homepage .hero-slider-slide,
  .tf-homepage .tf-hero-slide,
  .tf-homepage .tf-home-hero-slide{
    min-height:500px!important;
    border-radius:16px!important;
  }

  .tf-homepage .hero-slide:before,
  .tf-homepage .hero-slider-slide:before,
  .tf-homepage .tf-hero-slide:before,
  .tf-homepage .tf-home-hero-slide:before{
    background:linear-gradient(180deg,rgba(3,20,42,.50) 0%,rgba(3,20,42,.80) 52%,rgba(3,20,42,.94) 100%)!important;
  }

  .tf-homepage .hero h1,
  .tf-homepage .hero-content h1,
  .tf-homepage .hero-copy h1,
  .tf-homepage .hero-content h2,
  .tf-homepage .tf-home-hero h1{
    max-width:100%!important;
    font-size:29px!important;
    line-height:1!important;
  }

  .tf-homepage .hero-content p,
  .tf-homepage .hero-copy p,
  .tf-homepage .hero-description{
    font-size:9px!important;
    line-height:1.35!important;
  }

  .tf-homepage .hero-search,
  .tf-homepage .hero-search-form,
  .tf-homepage .hero-searchbox,
  .tf-homepage .hero-search-bar{
    min-height:46px!important;
    border-radius:12px!important;
  }

  .tf-homepage .hero-search select,
  .tf-homepage .hero-search-form select,
  .tf-homepage .hero-searchbox select,
  .tf-homepage .hero-search-bar select{
    flex-basis:92px!important;
    min-height:44px!important;
    font-size:8px!important;
  }

  .tf-homepage .hero-search input,
  .tf-homepage .hero-search-form input,
  .tf-homepage .hero-searchbox input,
  .tf-homepage .hero-search-bar input{
    min-height:44px!important;
    padding-inline:9px!important;
    font-size:8px!important;
  }

  .tf-homepage .hero-search button,
  .tf-homepage .hero-search-form button,
  .tf-homepage .hero-searchbox button,
  .tf-homepage .hero-search-bar button{
    flex-basis:78px!important;
    min-height:44px!important;
    font-size:8px!important;
  }

  .tf-homepage .hero-stats,
  .tf-homepage .hero-metrics,
  .tf-homepage .hero-stat-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }

  .tf-homepage .hero-stats>*,
  .tf-homepage .hero-metrics>*,
  .tf-homepage .hero-stat-grid>*{
    min-height:50px!important;
    padding:8px 7px!important;
  }

  .tf-homepage .hero-stats strong,
  .tf-homepage .hero-metrics strong,
  .tf-homepage .hero-stat-grid strong{
    font-size:12px!important;
  }

  .tf-homepage .hero-trust-strip,
  .tf-homepage .hero-bottom-strip,
  .tf-homepage .hero-usps,
  .tf-homepage .hero-benefits{
    gap:8px 12px!important;
    min-height:38px!important;
    padding:7px 8px!important;
    font-size:5.7px!important;
  }
}