/* Techtrim V19 — approved perspective hero + genuinely continuous hero-to-white blend. */

/* Use the approved hero composition itself. Keep its aspect ratio so the 3D wordmark is never flattened. */
.techtrim-home .tt-hero{
  position:relative!important;
  isolation:isolate!important;
  width:100%!important;
  height:clamp(350px,24.4140625vw,470px)!important;
  max-height:none!important;
  overflow:hidden!important;
  background:#fff!important;
}
.techtrim-home .tt-hero>img{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:cover!important;
  object-position:center top!important;
  transform:none!important;
  filter:none!important;
  background:#fff!important;
  -webkit-mask-image:linear-gradient(to bottom,
    #000 0%,
    #000 66%,
    rgba(0,0,0,.995) 71%,
    rgba(0,0,0,.97) 76%,
    rgba(0,0,0,.90) 81%,
    rgba(0,0,0,.78) 86%,
    rgba(0,0,0,.60) 90%,
    rgba(0,0,0,.40) 94%,
    rgba(0,0,0,.20) 97%,
    transparent 100%)!important;
  mask-image:linear-gradient(to bottom,
    #000 0%,
    #000 66%,
    rgba(0,0,0,.995) 71%,
    rgba(0,0,0,.97) 76%,
    rgba(0,0,0,.90) 81%,
    rgba(0,0,0,.78) 86%,
    rgba(0,0,0,.60) 90%,
    rgba(0,0,0,.40) 94%,
    rgba(0,0,0,.20) 97%,
    transparent 100%)!important;
}

/* Long white veil begins while the mirrored Techtrim is still visible; there is no blue/white seam. */
.techtrim-home .tt-hero::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  z-index:5!important;
  left:0!important;
  right:0!important;
  bottom:-1px!important;
  height:43%!important;
  pointer-events:none!important;
  background:linear-gradient(to bottom,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.008) 10%,
    rgba(255,255,255,.025) 20%,
    rgba(255,255,255,.06) 31%,
    rgba(255,255,255,.12) 42%,
    rgba(255,255,255,.22) 53%,
    rgba(255,255,255,.36) 64%,
    rgba(255,255,255,.52) 74%,
    rgba(255,255,255,.68) 82%,
    rgba(255,255,255,.82) 89%,
    rgba(255,255,255,.92) 94%,
    rgba(255,255,255,.98) 98%,
    #fff 100%)!important;
}

.techtrim-home .tt-light-zone{
  margin-top:-1px!important;
  padding:0 0 12px!important;
  background:#fff!important;
}
.techtrim-home .tt-light-zone::before{display:none!important}

/* Cards begin only after a visible band of the mirror reflection; do not climb into the hero. */
.techtrim-home .tt-info-grid{
  position:relative!important;
  z-index:10!important;
  margin-top:-7px!important;
  margin-bottom:0!important;
  gap:10px!important;
}
.techtrim-home .tt-info-grid article{
  height:82px!important;
  min-height:82px!important;
  padding:10px 13px!important;
}

/* Keep the rest of the homepage tight, matching the approved compact mockup. */
.techtrim-home .tt-section{padding-top:2px!important}
.techtrim-home .tt-section h2{margin:0!important;line-height:1!important}
.techtrim-home .tt-title-line{margin:2px auto 5px!important}
.techtrim-home .tt-service-cards.three{gap:9px!important;margin-top:0!important}
.techtrim-home .tt-service-card{height:160px!important;min-height:160px!important}
.techtrim-home .tt-service-visual,.techtrim-home .tt-service-visual img{height:160px!important;min-height:160px!important}
.techtrim-home .tt-cars{padding-top:5px!important}
.techtrim-home .tt-cars .tt-title-line{margin-bottom:4px!important}

/* Cars stay proportional at browser zoom and on narrower desktop widths. */
.techtrim-home .tt-car-grid a.tt-approved-car,
.techtrim-home .tt-car-grid a.tt-more-car{aspect-ratio:171/108!important}
.techtrim-home .tt-car-grid a.tt-approved-car>img{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center!important;
  transform:none!important;
}

/* The old mask was built for the straight wordmark, so do not let it draw a misplaced sweep on this approved perspective logo. */
.techtrim-home .tt-logo-sheen{display:none!important}

@media (min-width:981px) and (max-width:1179px){
  .techtrim-home .tt-hero{height:clamp(330px,24.4140625vw,390px)!important}
  .techtrim-home .tt-info-grid{margin-top:-5px!important}
}
@media (max-width:980px){
  .techtrim-home .tt-hero{height:clamp(285px,30vw,350px)!important}
  .techtrim-home .tt-hero>img{width:100%!important;height:100%!important;left:0!important;top:0!important;transform:none!important;object-fit:cover!important}
  .techtrim-home .tt-hero::after{height:48%!important}
  .techtrim-home .tt-info-grid{margin-top:0!important}
}