/* drone hero: scroll-driven frame sequence */
.wrap.dv{height:calc(100vh + 220vh + 45vh + 85vh)}
.dv .stage{background:#8a96a3}
.dv-poster,.dv-poster img,#dvCanvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.dv-poster img{object-fit:cover;object-position:50% 50%}
#dvCanvas{z-index:1;opacity:0}
.dv.live #dvCanvas{opacity:1}
.dv.live .dv-poster{visibility:hidden}
.dv-grade{z-index:2;pointer-events:none;opacity:0;background:
  linear-gradient(180deg,rgba(3,18,10,.62) 0%,rgba(3,18,10,.32) 30%,rgba(3,18,10,0) 52%,rgba(3,18,10,0) 78%,rgba(5,25,15,.35) 100%)}
.tall .dv-grade{background:linear-gradient(180deg,rgba(3,18,10,.35) 0%,rgba(3,18,10,0) 22%,rgba(3,18,10,0) 42%,rgba(5,25,15,.55) 62%,rgba(5,25,15,.9) 100%)}
/* title shows only once the drone has landed */
.dv .title{opacity:0;visibility:hidden;transition:opacity .5s ease,visibility 0s .5s}
.dv .title.on{opacity:1;visibility:visible;transition:opacity .5s ease}
.dv .title h1 .w>span{transition-delay:0s!important;transition-duration:.9s}
.dv .title.on h1 .w>span{transform:none}
.dv .title.on h1 .w:nth-child(2)>span{transition-delay:.08s!important}
.dv .title.on h1 .w:nth-child(4)>span{transition-delay:.16s!important}
.dv .title.on h1 .w:nth-child(5)>span{transition-delay:.24s!important}
.dv .title .lead,.dv .title .ctas{transition:all .8s ease .25s}
.dv .title.on .lead,.dv .title.on .ctas{opacity:1;transform:none}
.dv .title.on h1 .w{overflow:visible}
.dv .hint{opacity:1;transition:opacity .4s ease}
.dv .hint.off{opacity:0}
.dv .title:not(.on) h1 .w>span{transform:translateY(110%)}
.dv .title:not(.on) .lead,.dv .title:not(.on) .ctas{opacity:0;transform:translateY(14px)}

/* captions that come and go while the drone descends */
.dv-caps{position:absolute;inset:0;z-index:3;pointer-events:none}
.dv-cap{position:absolute;inset-inline:0;top:clamp(110px,22vh,200px);padding:0 max(16px,6vw);color:#fff;opacity:0;will-change:opacity,transform;text-shadow:0 2px 28px rgba(0,20,10,.55)}
.dv-cap b{display:block;max-width:12em;font-size:clamp(21px,3.2vw,44px);font-weight:700;line-height:1.3;text-wrap:balance}
.dv-cap b em{font-style:normal;color:var(--g-light)}
.dv-cap small{display:block;font-size:clamp(15px,1.5vw,21px);font-weight:300;opacity:.92;margin-top:10px}
.dv-fly{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(180deg,rgba(3,18,10,.42) 0%,rgba(3,18,10,.18) 38%,rgba(3,18,10,0) 60%)}
.dv-poster{z-index:0}
html[dir=ltr] .dv-cap{direction:ltr;text-align:left}