/* TradesFolks 18.4.111 — Exact Hero Slider Geometry Fix
   Targets the REAL homepage hero classes.
   Desktop banner geometry = 32:9 (recommended asset 1920x540).
   No stretching. Content cannot resize the slider. */

/* ===== REAL HERO ROOT ===== */
.tf-homepage .tf-home-v3-hero{
  position:relative!important;
  isolation:isolate!important;
  width:100%!important;
  aspect-ratio:32 / 9!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow:hidden!important;
  border:1px solid #d7e2ee!important;
  border-radius:20px!important;
  background:#071d38!important;
  box-shadow:0 14px 38px rgba(5,24,52,.13)!important;
  contain:layout paint!important;
}

/* Media, slide and overlay must exactly fill hero */
.tf-homepage .tf-home-v3-media,
.tf-homepage .tf-home-v3-slide,
.tf-homepage .tf-home-v3-overlay{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  min-width:100%!important;
  min-height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  margin:0!important;
  padding:0!important;
}

/* Background artwork: never stretch */
.tf-homepage .tf-home-v3-media{
  z-index:0!important;
  overflow:hidden!important;
  border-radius:inherit!important;
}
.tf-homepage .tf-home-v3-slide{
  z-index:0!important;
  background-repeat:no-repeat!important;
  background-size:cover!important;
  background-position:center center!important;
  transform:none!important;
  transition:opacity .35s ease!important;
}
.tf-homepage .tf-home-v3-slide img,
.tf-homepage .tf-home-v3-media img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  min-width:100%!important;
  min-height:100%!important;
  object-fit:cover!important;
  object-position:center center!important;
  aspect-ratio:auto!important;
  transform:none!important;
}

/* Premium overlay with readable left content */
.tf-homepage .tf-home-v3-overlay{
  z-index:1!important;
  pointer-events:none!important;
  background:
    linear-gradient(90deg,
      rgba(3,18,39,.94) 0%,
      rgba(3,18,39,.83) 25%,
      rgba(3,18,39,.52) 44%,
      rgba(3,18,39,.15) 67%,
      rgba(3,18,39,.10) 100%),
    linear-gradient(180deg,
      rgba(3,18,39,.03) 0%,
      rgba(3,18,39,.10) 68%,
      rgba(3,18,39,.42) 100%)!important;
}

/* Content layer fills hero but cannot alter hero size */
.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;
}

/* Left content: compact, premium, no overflow */
.tf-homepage .tf-home-v3-copy{
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  width:min(640px,46%)!important;
  height:100%!important;
  min-height:0!important;
  max-height:100%!important;
  margin:0!important;
  padding:24px 0 22px 48px!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
}

/* Eyebrow */
.tf-homepage .tf-home-v3-eyebrow{
  display:inline-flex!important;
  align-items:center!important;
  align-self:flex-start!important;
  min-height:29px!important;
  margin:0!important;
  padding:0 12px!important;
  border:1px solid rgba(249,189,43,.72)!important;
  border-radius:999px!important;
  background:rgba(5,24,52,.40)!important;
  color:#ffd157!important;
  font-size:7px!important;
  font-weight:900!important;
  letter-spacing:.06em!important;
  backdrop-filter:blur(8px)!important;
}

/* Headline */
.tf-homepage .tf-home-v3-copy h1{
  display:-webkit-box!important;
  max-width:600px!important;
  max-height:104px!important;
  margin:12px 0 8px!important;
  overflow:hidden!important;
  color:#fff!important;
  font-size:clamp(34px,2.75vw,52px)!important;
  font-weight:950!important;
  line-height:1!important;
  letter-spacing:-.045em!important;
  text-shadow:0 3px 16px rgba(0,0,0,.18)!important;
  -webkit-box-orient:vertical!important;
  -webkit-line-clamp:2!important;
}

/* Intro copy */
.tf-homepage .tf-home-v3-copy>p{
  display:-webkit-box!important;
  max-width:570px!important;
  max-height:48px!important;
  margin:0 0 10px!important;
  overflow:hidden!important;
  color:rgba(255,255,255,.84)!important;
  font-size:10px!important;
  line-height:1.42!important;
  -webkit-box-orient:vertical!important;
  -webkit-line-clamp:2!important;
}

/* Search row */
.tf-homepage .tf-home-v3-search{
  display:flex!important;
  align-items:stretch!important;
  width:min(620px,100%)!important;
  min-height:48px!important;
  max-height:48px!important;
  margin:0!important;
  overflow:hidden!important;
  border:1px solid rgba(255,255,255,.55)!important;
  border-radius:13px!important;
  background:#fff!important;
  box-shadow:0 10px 26px rgba(0,0,0,.16)!important;
}
.tf-homepage .tf-home-v3-search select,
.tf-homepage .tf-home-v3-search input,
.tf-homepage .tf-home-v3-search button{
  min-height:46px!important;
  max-height:46px!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
}
.tf-homepage .tf-home-v3-search select{
  flex:0 0 135px!important;
  border-right:1px solid #e3e9ef!important;
  background:#fff!important;
  color:#0b2343!important;
  font-size:8px!important;
  font-weight:850!important;
}
.tf-homepage .tf-home-v3-search input{
  flex:1 1 auto!important;
  min-width:0!important;
  padding:0 13px!important;
  background:#fff!important;
  color:#0b2343!important;
  font-size:8px!important;
}
.tf-homepage .tf-home-v3-search button{
  flex:0 0 116px!important;
  background:linear-gradient(180deg,#ffc83b,#f9bd2b)!important;
  color:#0b2343!important;
  font-size:8px!important;
  font-weight:950!important;
}

/* Popular chips */
.tf-homepage .tf-home-v3-popular{
  display:flex!important;
  align-items:center!important;
  flex-wrap:nowrap!important;
  gap:4px!important;
  width:min(610px,100%)!important;
  min-height:26px!important;
  margin:6px 0 0!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  scrollbar-width:none!important;
  color:rgba(255,255,255,.70)!important;
  font-size:6.5px!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:23px!important;
  padding:0 8px!important;
  border:1px solid rgba(255,255,255,.30)!important;
  border-radius:999px!important;
  background:rgba(5,24,52,.30)!important;
  color:#fff!important;
  font-size:6.2px!important;
  text-decoration:none!important;
  white-space:nowrap!important;
}

/* CTA buttons */
.tf-homepage .tf-home-v3-actions{
  display:flex!important;
  align-items:center!important;
  gap:7px!important;
  width:min(520px,100%)!important;
  min-height:36px!important;
  margin:7px 0 0!important;
  overflow:hidden!important;
}
.tf-homepage .tf-home-v3-actions a,
.tf-homepage .tf-home-v3-actions button{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:36px!important;
  padding:0 12px!important;
  border-radius:9px!important;
  font-size:7px!important;
  font-weight:900!important;
  text-decoration:none!important;
}

/* Stats */
.tf-homepage .tf-home-v3-stats{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  width:min(510px,100%)!important;
  min-height:58px!important;
  max-height:58px!important;
  margin:8px 0 0!important;
  overflow:hidden!important;
  border:1px solid rgba(255,255,255,.24)!important;
  border-radius:12px!important;
  background:rgba(5,24,52,.38)!important;
  backdrop-filter:blur(8px)!important;
}
.tf-homepage .tf-home-v3-stats>*{
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  min-width:0!important;
  padding:8px 12px!important;
  border-right:1px solid rgba(255,255,255,.16)!important;
}
.tf-homepage .tf-home-v3-stats>*:last-child{border-right:0!important}
.tf-homepage .tf-home-v3-stats strong{
  color:#fff!important;
  font-size:14px!important;
  font-weight:950!important;
  line-height:1!important;
}
.tf-homepage .tf-home-v3-stats span,
.tf-homepage .tf-home-v3-stats small{
  margin-top:4px!important;
  color:rgba(255,255,255,.72)!important;
  font-size:5.8px!important;
  line-height:1.1!important;
}

/* Slider dots/arrows */
.tf-homepage .tf-home-v3-hero [class*="prev"],
.tf-homepage .tf-home-v3-hero [class*="next"]{
  z-index:5!important;
}
.tf-homepage .tf-home-v3-hero button[class*="prev"],
.tf-homepage .tf-home-v3-hero button[class*="next"],
.tf-homepage .tf-home-v3-hero .swiper-button-prev,
.tf-homepage .tf-home-v3-hero .swiper-button-next{
  width:36px!important;
  height:36px!important;
  border:1px solid rgba(255,255,255,.34)!important;
  border-radius:50%!important;
  background:rgba(5,24,52,.54)!important;
  color:#fff!important;
  backdrop-filter:blur(8px)!important;
}
.tf-homepage .tf-home-v3-hero .swiper-pagination-bullet{
  width:6px!important;
  height:6px!important;
  background:rgba(255,255,255,.58)!important;
  opacity:1!important;
}
.tf-homepage .tf-home-v3-hero .swiper-pagination-bullet-active{
  width:22px!important;
  border-radius:999px!important;
  background:#f9bd2b!important;
}

/* ===== TABLET ===== */
@media(min-width:700px) and (max-width:1023px){
  .tf-homepage .tf-home-v3-hero{
    aspect-ratio:auto!important;
    height:390px!important;
    min-height:390px!important;
    max-height:390px!important;
    border-radius:18px!important;
  }
  .tf-homepage .tf-home-v3-copy{
    width:58%!important;
    padding:20px 0 18px 28px!important;
  }
  .tf-homepage .tf-home-v3-copy h1{
    font-size:32px!important;
    max-height:68px!important;
  }
  .tf-homepage .tf-home-v3-search{min-height:45px!important;max-height:45px!important}
  .tf-homepage .tf-home-v3-search select,
  .tf-homepage .tf-home-v3-search input,
  .tf-homepage .tf-home-v3-search button{
    min-height:43px!important;
    max-height:43px!important;
  }
}

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

  .tf-homepage .tf-home-v3-slide{
    background-position:center center!important;
  }

  .tf-homepage .tf-home-v3-overlay{
    background:
      linear-gradient(180deg,
        rgba(3,18,39,.18) 0%,
        rgba(3,18,39,.52) 31%,
        rgba(3,18,39,.88) 59%,
        rgba(3,18,39,.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:16px 12px 14px!important;
  }

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

  .tf-homepage .tf-home-v3-copy h1{
    max-width:100%!important;
    max-height:58px!important;
    margin:8px 0 6px!important;
    font-size:27px!important;
    line-height:1!important;
    -webkit-line-clamp:2!important;
  }

  .tf-homepage .tf-home-v3-copy>p{
    max-width:100%!important;
    max-height:34px!important;
    margin-bottom:7px!important;
    font-size:8px!important;
    line-height:1.3!important;
    -webkit-line-clamp:2!important;
  }

  .tf-homepage .tf-home-v3-search{
    width:100%!important;
    min-height:43px!important;
    max-height:43px!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{
    min-height:41px!important;
    max-height:41px!important;
    font-size:7px!important;
  }

  .tf-homepage .tf-home-v3-search select{flex-basis:82px!important}
  .tf-homepage .tf-home-v3-search button{flex-basis:70px!important}

  .tf-homepage .tf-home-v3-popular{
    min-height:23px!important;
    margin-top:5px!important;
  }

  .tf-homepage .tf-home-v3-actions{
    min-height:32px!important;
    margin-top:5px!important;
  }
  .tf-homepage .tf-home-v3-actions a,
  .tf-homepage .tf-home-v3-actions button{
    min-height:32px!important;
    padding:0 9px!important;
    font-size:6.3px!important;
  }

  .tf-homepage .tf-home-v3-stats{
    min-height:48px!important;
    max-height:48px!important;
    margin-top:6px!important;
  }
  .tf-homepage .tf-home-v3-stats>*{padding:6px!important}
  .tf-homepage .tf-home-v3-stats strong{font-size:11px!important}
  .tf-homepage .tf-home-v3-stats span,
  .tf-homepage .tf-home-v3-stats small{font-size:5px!important}
}

/* Small phone */
@media(max-width:390px){
  .tf-homepage .tf-home-v3-hero{
    height:410px!important;
    min-height:410px!important;
    max-height:410px!important;
  }
  .tf-homepage .tf-home-v3-copy h1{font-size:24px!important}
}