.tz-header, .tz-header *{box-sizing:border-box}
.tz-header{
  position:relative;
  width:100%;
  height:clamp(210px,33vw,430px);
  overflow:hidden;
  background:#080808;
}
.tz-gl{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  pointer-events:none;
  z-index:0;
}
.tz-header.is-production .tz-replay{display:none}
.tz-final-vector{
  position:absolute;
  left:0;
  top:0;
  opacity:0;
  pointer-events:none;
  z-index:1;
  overflow:visible;
}
.tz-replay{
  position:absolute;
  right:18px;
  bottom:18px;
  z-index:2;
  border:1px solid rgba(255,255,255,.28);
  border-radius:999px;
  background:rgba(0,0,0,.4);
  color:rgba(255,255,255,.9);
  padding:9px 14px;
  font:600 12px/1 Arial,Helvetica,sans-serif;
  letter-spacing:.04em;
  cursor:pointer;
}
.tz-header.tz-reduced-motion .tz-gl{display:none}
.tz-header.tz-reduced-motion .tz-final-vector{
  opacity:1 !important;
  left:10% !important;
  top:12% !important;
  width:80% !important;
  height:auto !important;
}

/* Full-bleed viewport layout for Snakepit/WPBakery */
.tz-header{
  width:100vw !important;
  max-width:none !important;
  margin-left:calc(50% - 50vw) !important;
  margin-right:calc(50% - 50vw) !important;
  position:relative;
  --tz-logo-width:86%;
}
@media (max-width:768px){
  .tz-header{--tz-logo-width:92%;}
}

/* v1.4: transparent, responsive full-height animation area */
.tz-header{
  background:transparent !important;
  height:100% !important;
  min-height:clamp(360px,46vw,700px);
  max-height:none !important;
}

/* v1.7 exact final-vector handoff */
.tz-header .tz-final-vector{
  max-width:none !important;
  max-height:none !important;
  min-width:0 !important;
  min-height:0 !important;
  transform:none !important;
}

/* v1.9 mobile hero depth
   v1.8 was correctly centering the logo, but the mobile animation
   container itself was only reaching the 360px clamp minimum.
   Give mobile a viewport-relative particle field so the centered logo
   sits around the visual middle of the phone hero. */
@media (max-width:768px){
  .tz-header{
    min-height:65svh !important;
  }
}

/* v2.0 mobile composition */
@media (max-width:768px){
  .tz-header{
    min-height:72svh !important;
  }
}

/* v2.6 click-through overlay
   The animation is purely visual, so the full-width/full-height wrapper must
   never intercept taps/clicks intended for navigation, social icons, buttons,
   or other elements positioned underneath it. */
.tz-header{
  pointer-events:none !important;
}
.tz-header .tz-gl,
.tz-header .tz-final-vector{
  pointer-events:none !important;
}