/* Hero-only three.js background (lab). Everything here applies only once hero3d.js has rendered its first frame.
   Without JS/WebGL the hero is exactly the current hero. */
[data-hero3d]{position:relative}
[data-hero3d] .hero__grid{position:relative;z-index:1}
/* phone: the billboard legs need room below the card */
@media (max-width:699px){[data-hero3d].h3d-on{padding-block-end:calc(clamp(56px,7vw,104px) + 84px)}}
/* text, slabs and card stay above the canvas; the card keeps its own z-index 4 inside (see .hero__grid above) */
.h3d{position:absolute;inset-block:0 -48px;inset-inline:0;z-index:0;pointer-events:none;opacity:0;transition:opacity .4s ease;
  -webkit-user-select:none;user-select:none;contain:layout paint}
.h3d.is-in{opacity:1}
.h3d__layer{position:absolute;inset:0;pointer-events:none;will-change:opacity}
.h3d canvas{position:absolute;inset:0;inline-size:100%;block-size:100%;display:block;pointer-events:none}
@media print{.h3d{display:none}}
@media (prefers-reduced-motion:reduce){.h3d{transition:none}}