/* HFC TT Hero Slider */
.hfc-hero{--accent:#C7F835; --gap: clamp(20px,3vw,40px); --xfade: 1000ms; margin: clamp(10px,2vw,30px) auto; max-width: 1280px; padding: clamp(10px,1.5vw,20px);}
.hfc-hero__inner{display:grid; grid-template-columns: 1.1fr 1fr; align-items:center; gap: var(--gap);}

.hfc-hero__title{font-weight: 800; line-height: .92; letter-spacing:-.02em; margin:0 0 .3em 0; font-size: clamp(56px, 9vw, 150px); text-align:right;}
.hfc-hero__sub{color:#7a7a7a; font-size: clamp(14px,1.5vw,22px); max-width: 46ch; margin: 0 0 clamp(18px,2vw,26px); text-align:right;}

.hfc-hero__stats{display:grid; grid-template-columns: 1fr 1fr; gap: clamp(28px,3vw,60px); margin-top: clamp(20px,2vw,30px);}
.hfc-hero .stat__big{font-weight:900; font-size: clamp(44px,6vw,90px); color: var(--accent); line-height:1; margin-bottom: .2em;}
.hfc-hero .stat__text{color:#555; font-size: clamp(13px,1.1vw,18px); max-width: 30ch;}

.hfc-hero__right{position:relative;}
.hfc-hero__imageWrap{position:relative; width: min(100%, 620px); height: clamp(320px, 45vw, 620px); justify-self:end;}
.hfc-hero__image{position:absolute; inset:0; background-image: var(--bg); background-size: cover; background-position: center; border-radius: 28px;
  -webkit-mask-image: var(--shape);
  mask-image: var(--shape);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  overflow:hidden;
}
.hfc-hero__image.layer-next{opacity:0; transition: opacity var(--xfade) ease;}
.hfc-hero__image.layer-next.is-show{opacity:1;}

.hfc-hero__thumbs{position:absolute; left: -40px; bottom: clamp(8px,2vw,20px); display:flex; flex-direction:column; gap: 14px;}
.hfc-hero__thumbs .thumb{width: 84px; height: 84px; border-radius: 999px; background-size: cover; background-position: center; box-shadow: 0 8px 24px rgba(0,0,0,.18); border: 4px solid #fff; cursor:pointer; transition: transform .2s ease, box-shadow .2s ease;}
.hfc-hero__thumbs .thumb:hover{transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0,0,0,.22);}
.hfc-hero__thumbs .thumb.is-active{outline: 3px solid var(--accent);}

@media (max-width: 980px){
  .hfc-hero__inner{grid-template-columns: 1fr; }
  .hfc-hero__right{order:-1;}
  .hfc-hero__imageWrap{width:100%; height: clamp(300px, 60vw, 520px);}
  .hfc-hero__thumbs{left: 10px; bottom: 10px; flex-direction:row;}
  .hfc-hero__stats{grid-template-columns: 1fr; gap: 20px;}
  .hfc-hero .stat__text{max-width: none;}
}