/* =====================================================================================================
   WxTrade DVX · DOM layer in the TECH language
   Geist 300/500 for headings and body · Geist Mono 500/700 for numbers, labels, the index and captions.
   Colours: black, #071934, #062145, #0080ff, white, ice #bfe0ff (as alpha tints). Self-hosted fonts only.
   Motion: no bounce, no spring; hover responds immediately; html.reduced switches every effect off.
   ===================================================================================================== */
@font-face{font-family:"Geist";font-style:normal;font-weight:300;font-display:swap;src:url("../vendor/fonts/geist-latin-300-normal.woff2") format("woff2")}
@font-face{font-family:"Geist";font-style:normal;font-weight:500;font-display:swap;src:url("../vendor/fonts/geist-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Geist Mono";font-style:normal;font-weight:500;font-display:swap;src:url("../vendor/fonts/geist-mono-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Geist Mono";font-style:normal;font-weight:700;font-display:swap;src:url("../vendor/fonts/geist-mono-latin-700-normal.woff2") format("woff2")}

:root{
  --bg:#000; --navy:#071934; --navy-2:#062145; --blue:#0080ff; --ice:#bfe0ff; --text:#fff;
  --muted:rgba(255,255,255,.70); --faint:rgba(255,255,255,.46); --dim:rgba(255,255,255,.34);
  --ice-text:rgba(191,224,255,.78); --hair:rgba(191,224,255,.17); --hair-2:rgba(191,224,255,.32);
  --font-display:"Geist",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --font-text:"Geist",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --font-mono:"Geist Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --track-label:.2em;                       /* mono labels: wide, uppercase */
  --gutter:max(24px,7.5vw);
  --ease-out:cubic-bezier(.22,.7,.18,1);    /* decelerate only: no overshoot anywhere */
  --legible:0 0 1px rgba(0,0,0,.55),0 0 18px rgba(0,0,0,.6);   /* local scrim for small text over the moving canvas */
  /* corner brackets for empty slots (only visible until a scene registers) */
  --bk:rgba(191,224,255,.26);
  --corners:
    linear-gradient(var(--bk),var(--bk)) 0 0/10px 1px no-repeat,linear-gradient(var(--bk),var(--bk)) 0 0/1px 10px no-repeat,
    linear-gradient(var(--bk),var(--bk)) 100% 0/10px 1px no-repeat,linear-gradient(var(--bk),var(--bk)) 100% 0/1px 10px no-repeat,
    linear-gradient(var(--bk),var(--bk)) 0 100%/10px 1px no-repeat,linear-gradient(var(--bk),var(--bk)) 0 100%/1px 10px no-repeat,
    linear-gradient(var(--bk),var(--bk)) 100% 100%/10px 1px no-repeat,linear-gradient(var(--bk),var(--bk)) 100% 100%/1px 10px no-repeat;
}
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--text);font:300 16px/1.5 var(--font-text);font-synthesis:none;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
a{color:inherit}
::selection{background:rgba(0,128,255,.5);color:#fff}
.sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.nc{text-transform:none}                   /* keeps "iOS" correct inside uppercase mono */
.nw{white-space:nowrap}                    /* a semantic unit that never breaks ("iOS + Android", "Your data.") */
.dxc.is-scr{color:var(--ice);opacity:.55}  /* decrypt-in: a scrambling glyph (locks to white) */

/* ---------- the fixed visual layer (one full-screen canvas + a DOM layer for components) ---------- */
.layer{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(80% 62% at 50% 38%,rgba(6,33,69,.55) 0%,rgba(7,25,52,.26) 48%,rgba(0,0,0,0) 100%),#000}
.layer canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.layer__dom{position:absolute;inset:0}
.layer__label{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:12px 16px;background:var(--corners);
  font:500 10px/1.4 var(--font-mono);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--dim);white-space:nowrap}
body.has-scene .layer__label{display:none}

/* ---------- header ---------- */
.top{position:fixed;left:0;right:0;top:0;z-index:5;height:76px;display:flex;align-items:center;padding:0 var(--gutter);pointer-events:none;transition:opacity .3s linear}
.top.is-dim{opacity:0}                         /* the logo steps aside while a heading or text block passes under it */
.top.is-dim a{pointer-events:none}
.top:focus-within{opacity:1}
.top a{display:block;pointer-events:auto}
.top img{display:block;height:20px;width:auto;opacity:.94}
.top a:focus-visible{outline:1px solid var(--ice);outline-offset:6px}

main{position:relative;z-index:1}

/* ---------- button: one calm style (hero + form). Hover is immediate, no bounce, no glow ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:14px;height:44px;padding:0 18px 0 20px;
  border:1px solid rgba(0,128,255,.9);border-radius:0;background:linear-gradient(rgba(0,128,255,.16),rgba(0,128,255,.16)),rgba(0,3,10,.55);color:#fff;
  font:500 12px/1 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;white-space:nowrap;
  cursor:pointer;-webkit-tap-highlight-color:transparent;transition:none}
.btn:hover{background:var(--blue);border-color:var(--blue)}
.btn:active{background:rgba(0,128,255,.78)}
.btn:focus-visible{outline:1px solid var(--ice);outline-offset:3px}
.btn svg{flex:none;width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:square;stroke-linejoin:miter}

/* ---------- 0 hero ---------- */
.hero{position:relative;overflow:hidden;height:100vh;min-height:560px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:0 24px 14vh;text-align:center}
.hero__copy{position:relative;max-width:940px}
/* local scrim: quiets the moving sea behind the copy without a visible panel (soft radial falloff, no edge) */
.hero__copy::before{content:"";position:absolute;z-index:-1;left:50%;top:52%;width:calc(100% + 280px);height:calc(100% + 200px);transform:translate(-50%,-50%);
  background:radial-gradient(closest-side,rgba(0,0,0,.5),rgba(0,0,0,.38) 30%,rgba(0,0,0,.2) 56%,rgba(0,0,0,.08) 78%,rgba(0,0,0,0));pointer-events:none}
.hero h1{margin:0;font:300 clamp(40px,5.5vw,86px)/1.02 var(--font-display);letter-spacing:-.045em;text-wrap:balance;text-shadow:0 0 42px rgba(0,0,0,.4)}
.hero p{margin:24px auto 0;max-width:44ch;font:300 clamp(17px,1.45vw,22px)/1.5 var(--font-text);letter-spacing:-.006em;color:rgba(255,255,255,.82);text-wrap:pretty;text-shadow:var(--legible)}
.hero p b{font-weight:500;color:var(--text)}
.hero .btn{margin-top:34px;height:52px;padding:0 22px 0 26px;gap:16px;font-size:13.5px;letter-spacing:.17em}
.hero .btn svg{width:16px;height:16px}

/* ---------- 1 film: pinned, scroll-scrubbed; captions are mono, uppercase, decrypt in ---------- */
.film{position:relative;height:700vh}            /* 600vh of pinned scroll + the stage itself */
.film__stage{position:sticky;top:0;height:100vh;overflow:hidden}
.slot{position:absolute;inset:0}
.cap{position:absolute;left:var(--gutter);bottom:13vh;margin:0;max-width:min(32ch,86vw);opacity:0;--r:0;
  font:500 clamp(19px,1.6vw,28px)/1.34 var(--font-mono);letter-spacing:.045em;text-transform:uppercase;color:var(--text);
  font-variant-ligatures:none;text-shadow:var(--legible)}
.cap__text{display:block}
/* local scrim behind every caption: small mono text stays readable over any moving scene (soft radial, no edge) */
.cap::before{content:"";position:absolute;z-index:-1;left:50%;top:50%;width:calc(100% + 220px);height:calc(100% + 150px);transform:translate(-50%,-50%);
  background:radial-gradient(closest-side,rgba(0,0,0,.52),rgba(0,0,0,.38) 34%,rgba(0,0,0,.19) 62%,rgba(0,0,0,.06) 84%,rgba(0,0,0,0));pointer-events:none}
.cap__sweep{display:none}                    /* the old mask sweep is replaced by the decrypt-in */
.cap--center{left:50%;bottom:auto;top:47%;transform:translate(-50%,-50%);text-align:center;max-width:none;white-space:nowrap}
.cap__num{display:block;margin-right:-.06em;font:500 clamp(68px,11vw,190px)/.9 var(--font-mono);letter-spacing:-.06em;font-variant-numeric:tabular-nums}
.cap__unit{display:block;margin-top:1.5em;padding-left:.24em;font:500 clamp(15px,1.32vw,21px)/1 var(--font-mono);letter-spacing:.24em;color:#fff;text-shadow:0 0 1px rgba(0,0,0,.8),0 0 14px rgba(0,0,0,.85)}
/* film meter: a scale with five beat ticks, not a stray line */
.film__meter{position:absolute;right:var(--gutter);bottom:13vh;width:1px;height:120px;background:var(--hair-2)}
.film__meter::before{content:"";position:absolute;left:-3px;top:0;width:7px;height:100%;background:repeating-linear-gradient(180deg,var(--hair-2) 0 1px,transparent 1px 24px)}
.film__meter::after{content:"";position:absolute;left:-3px;bottom:0;width:7px;height:1px;background:var(--hair-2)}
.film__meter i{position:absolute;left:0;top:0;width:1px;height:100%;background:var(--ice);transform-origin:top;transform:scaleY(var(--p,0))}

/* ---------- 2 surfaces: pinned, index 01-03 (the 3D world shows the objects: right column stays transparent) ---------- */
.surfaces{position:relative;height:400vh}
.surfaces__stage{position:sticky;top:0;height:100vh;display:grid;grid-template-columns:minmax(300px,5fr) 7fr;align-items:center;gap:4vw;padding:0 var(--gutter)}
.h2{margin:0;font:300 clamp(34px,3.9vw,62px)/1.02 var(--font-display);letter-spacing:-.042em;text-wrap:balance;text-shadow:0 0 36px rgba(0,0,0,.45)}
.index{list-style:none;margin:54px 0 0;padding:0;max-width:440px;border-top:1px solid var(--hair)}
.index li{position:relative;display:flex;align-items:baseline;padding:22px 0 21px;border-bottom:1px solid var(--hair);color:rgba(255,255,255,.6);text-shadow:var(--legible);transition:color .25s linear}
.index__n{flex:none;width:64px;font:700 12px/1 var(--font-mono);letter-spacing:var(--track-label);color:inherit}
.index li b{font:500 clamp(14px,1.12vw,17px)/1.3 var(--font-mono);letter-spacing:.14em;text-transform:uppercase}
.index li::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--blue);transform:scaleX(0);transform-origin:0 50%;transition:transform .55s var(--ease-out)}
.index li.is-active{color:var(--text)}
.index li.is-active .index__n{color:var(--blue)}
.index li.is-active::after{transform:scaleX(1)}
.vslot{position:relative;height:min(62vh,640px);background:var(--corners)}
body.has-scene .vslot{background:none}
.vslot__label{position:absolute;left:18px;top:16px;font:500 10px/1.4 var(--font-mono);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--dim)}
body.has-scene .vslot__label{display:none}

/* ---------- 3 built light: headline + hairline spec strip over a grid signal ---------- */
.built{position:relative;min-height:100vh;padding:16vh var(--gutter) 14vh;display:grid;grid-template-columns:5fr 7fr;grid-template-rows:auto 1fr auto;gap:0 4vw}
.built .h2{grid-column:1;align-self:start}
.built .vslot{grid-column:2;grid-row:1 / span 2;height:min(40vh,400px)}
.spec-wrap{position:relative;grid-column:1 / -1;margin-top:9vh;isolation:isolate}
.gridsig{position:absolute;z-index:-1;left:calc(-1 * var(--gutter));top:-150px;width:calc(100% + 2 * var(--gutter));height:calc(100% + 290px);pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 30%,#000 72%,transparent 100%),linear-gradient(90deg,transparent 0,#000 16%,#000 84%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(180deg,transparent 0,#000 30%,#000 72%,transparent 100%),linear-gradient(90deg,transparent 0,#000 16%,#000 84%,transparent 100%);
  mask-composite:intersect}
.spec{position:relative;display:grid;grid-template-columns:repeat(3,1fr)}
.spec::before,.spec::after{content:"";position:absolute;left:0;right:0;height:1px;background:var(--hair-2);transform:scaleX(0);transform-origin:0 50%;transition:transform 1.1s var(--ease-out)}
.spec::before{top:0}
.spec::after{bottom:0;transition-delay:.18s}
.spec > div{position:relative;padding:26px 28px 30px 0}
.spec > div + div{padding-left:28px}
.spec > div + div::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--hair);transform:scaleY(0);transform-origin:50% 0;transition:transform .8s var(--ease-out) .35s}
.spec > div:nth-child(3)::before{transition-delay:.5s}
.spec i{display:block;margin-bottom:22px;font:700 12px/1 var(--font-mono);font-style:normal;letter-spacing:var(--track-label);color:var(--blue);text-shadow:var(--legible)}
.spec b{position:relative;display:block;max-width:24ch;font:500 clamp(14px,1.15vw,17px)/1.5 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--text);text-shadow:var(--legible)}
/* text-shaped scrim behind each label (under the grid signal): readable over any scene, no band or box edge */
.spec b::before{content:"";position:absolute;z-index:-2;left:50%;top:50%;width:calc(100% + 90px);height:calc(100% + 64px);transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(closest-side,rgba(0,0,0,.5),rgba(0,0,0,.34) 40%,rgba(0,0,0,.14) 72%,rgba(0,0,0,0))}
.spec-wrap.is-in .spec::before,.spec-wrap.is-in .spec::after{transform:scaleX(1)}
.spec-wrap.is-in .spec > div + div::before{transform:scaleY(1)}
.spec-wrap:not(.is-in) .spec b{visibility:hidden}

/* ---------- 3 built light (two beats) + 4 statement: ONE style, the owner's original statement style ----------
   Left at the gutter, Geist 300, one sentence per line, words brighten .22 -> 1 as you scroll (js/dvx-dom.js litBeat),
   each beat on a pinned 100vh stage. 2026-11-04 "fade in place": every beat fades IN after its stage pins and OUT before
   it unpins (opacity + a small blur, linear in scroll; reduced motion: opacity only; no px drift: it stepped 1 px at a
   time), so no lit text ever slides across the screen. The next beat overlaps the last 100vh of the previous one (margin-top -100vh): its stage
   pins exactly as the previous one unpins, and both stages move only while their text is invisible.
   Pin budget per beat, in vh (LIT in index.html): 4 edge + 24 fade-in (the first line starts brightening at 18), 40 per
   line + 20 rest between lines, then the hold with everything lit (>= 110: owner >= ~100vh of digest time), 45 fade-out,
   10 empty edge. Block height = 100 (the stage) + that pin. The total stays 1020vh as before (the close does not move).
   (.built / .spec / .gridsig further up are no longer used by the page; lab/s5-flat-fee.html still uses them.) */
.statement{position:relative;height:380vh}                      /* lab pages (s6) keep the old pin */
#built + .statement{height:443vh;margin-top:-100vh}             /* 3 lines: 4 + 14 + 3 x 40 + 2 x 20 = 178, hold 110, + 55 */
.lit{position:relative;height:334vh}                            /* "Built light." alone: 18 + 40 = 58, hold 121, + 55 */
.lit--facts{height:443vh;margin-top:-100vh}                     /* the three facts: as the statement */
.statement__stage,.lit__stage{position:sticky;top:0;height:100vh;display:flex;align-items:center;padding:0 var(--gutter);pointer-events:none}
.statement p,.lit__text{margin:0;font:300 clamp(44px,6.8vw,120px)/1 var(--font-display);letter-spacing:-.05em;text-shadow:0 0 48px rgba(0,0,0,.45);
  font-size:min(clamp(44px,6.8vw,120px),calc((100vw - 2 * var(--gutter)) / 8.2))}   /* 8.2 em = "Your infrastructure." (7.53 em) + 9% air */
.lit__text{padding:0;list-style:none}
.statement p,.lit__text{pointer-events:auto}                    /* the stages overlap while one fades: only visible text takes the pointer */
.statement p.is-gone,.lit__text.is-gone{pointer-events:none}
.lit--facts .lit__text{font-size:min(clamp(44px,6.8vw,120px),calc((100vw - 2 * var(--gutter)) / 14.2))}   /* as large as the statement while each fact fits one line */
.statement .sl,.lit .sl{display:block;white-space:nowrap}                              /* one sentence per line */
.statement .w,.lit .w{opacity:.22;transition:opacity .12s linear}

/* ---------- 5 close: 2x2 mono recap with hairlines + the work-email form (no ring, no glow) ---------- */
.close{position:relative;min-height:100vh;padding:14vh var(--gutter) 6vh;display:flex;flex-direction:column;align-items:center}
.close .vslot{width:min(560px,86vw);height:min(28vh,300px)}
.recap{position:relative;display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;width:min(820px,100%);margin-top:5vh;border-top:1px solid var(--hair)}
.recap::before{content:"";position:absolute;inset:-4px;pointer-events:none;--c:rgba(191,224,255,.6);   /* crosshair ticks at the corners and centre */
  background:
    linear-gradient(var(--c),var(--c)) 0 4px/9px 1px no-repeat,linear-gradient(var(--c),var(--c)) 4px 0/1px 9px no-repeat,
    linear-gradient(var(--c),var(--c)) 100% 4px/9px 1px no-repeat,linear-gradient(var(--c),var(--c)) calc(100% - 4px) 0/1px 9px no-repeat,
    linear-gradient(var(--c),var(--c)) 0 calc(100% - 4px)/9px 1px no-repeat,linear-gradient(var(--c),var(--c)) 4px 100%/1px 9px no-repeat,
    linear-gradient(var(--c),var(--c)) 100% calc(100% - 4px)/9px 1px no-repeat,linear-gradient(var(--c),var(--c)) calc(100% - 4px) 100%/1px 9px no-repeat,
    linear-gradient(var(--c),var(--c)) 50% 50%/9px 1px no-repeat,linear-gradient(var(--c),var(--c)) 50% 50%/1px 9px no-repeat}
.recap > div{display:flex;align-items:center;min-height:78px;padding:20px 24px 20px 2px;border-bottom:1px solid var(--hair);
  font:500 clamp(13px,1.1vw,16px)/1.5 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--text);text-shadow:var(--legible)}   /* 2026-11-04 owner OK: was clamp(12px,.98vw,14px) / .14em */
.recap > div:nth-child(even){padding-left:26px;border-left:1px solid var(--hair)}
.recap:not(.is-in) .rv{visibility:hidden}
.notify{width:min(560px,100%);margin-top:6.5vh}
.notify h2{margin:0;text-align:center;font:300 clamp(26px,2.3vw,36px)/1.15 var(--font-display);letter-spacing:-.035em;text-shadow:0 0 30px rgba(0,0,0,.45)}
.field{display:flex;align-items:stretch;height:58px;margin-top:28px;padding:5px;border:1px solid rgba(191,224,255,.46);border-radius:0;background:rgba(0,0,0,.55);transition:none}   /* 2026-11-04: border .3 -> .46 (clearer field) */
.field:hover{border-color:rgba(191,224,255,.66)}
.field:focus-within{border-color:var(--blue)}
.field:has(input[aria-invalid="true"]){border-color:rgba(255,255,255,.8)}
.field input{flex:1;min-width:0;margin:0;padding:0 14px;border:0;border-radius:0;background:transparent;color:#fff;
  font:500 15px/1 var(--font-mono);letter-spacing:.04em;caret-color:var(--blue);-webkit-appearance:none;appearance:none}
.field input::placeholder{color:rgba(191,224,255,.84);font:500 13px/1 var(--font-mono);letter-spacing:var(--track-label);text-transform:uppercase;opacity:1}
.field input:focus{outline:none}
.field .btn{height:auto}
.msg{min-height:20px;margin:14px 0 0;font:500 13px/1.6 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--faint);text-shadow:var(--legible)}
.msg.is-error{color:#fff}
.msg.is-error::before{content:"";display:inline-block;width:5px;height:5px;margin-right:10px;vertical-align:2px;background:#fff}
.notify.is-done .field{display:none}
.notify.is-done .msg{display:flex;align-items:center;justify-content:center;gap:14px;min-height:58px;margin-top:28px;border:1px solid var(--hair-2);background:rgba(0,0,0,.55);color:#fff;font-size:13px}
.notify.is-done .msg{padding:12px 20px;text-align:center}
.notify.is-done .msg::before{content:"";width:6px;height:6px;flex:none;background:var(--blue)}
footer{position:relative;z-index:1;height:6vh}

/* ---------- responsive ---------- */
@media (max-width:820px){
  .hero{padding-bottom:13vh}
  .hero h1{font-size:clamp(36px,10.4vw,54px);letter-spacing:-.042em}
  .hero p{margin-top:18px}
  .hero .btn{margin-top:28px}
  .cap{bottom:15vh;font-size:clamp(19px,5.3vw,26px)}
  .cap__num{font-size:clamp(60px,19vw,110px)}
  .film__meter{display:none}
  .surfaces__stage{grid-template-columns:1fr;align-content:center;gap:5vh}
  .surfaces .vslot{height:34vh}
  .index{margin-top:30px}
  .index li{padding:18px 0 17px}
  .index__n{width:52px}
  .built{grid-template-columns:1fr;grid-template-rows:auto;padding-top:16vh}
  .built .vslot{grid-column:1;grid-row:auto;margin-top:5vh;height:28vh}
  .spec-wrap{margin-top:6vh}
  .spec{grid-template-columns:1fr}
  .spec > div,.spec > div + div{padding:20px 0 22px}
  .spec > div + div::before{left:0;right:0;top:0;bottom:auto;width:auto;height:1px;transform:scaleX(0);transform-origin:0 50%}
  .spec-wrap.is-in .spec > div + div::before{transform:scaleX(1)}
  .spec i{margin-bottom:12px}
  .gridsig{top:-90px;height:calc(100% + 180px)}
  .recap > div{min-height:88px;padding:16px 12px 16px 2px;font-size:13px;letter-spacing:.07em}
  .recap > div:nth-child(even){padding-left:14px}
  .notify{margin-top:5vh}
  .field input{padding:0 10px}
  .field .btn{padding:0 14px;gap:10px}
  .notify.is-done .msg{padding:12px 16px;font-size:12px;letter-spacing:.1em}
}

/* ---------- reduced motion: static frames, all text final, hairlines drawn ---------- */
html.reduced .cap,html.reduced .index li,html.reduced .index li::after,html.reduced .statement .w,html.reduced .lit .w,
html.reduced .spec::before,html.reduced .spec::after,html.reduced .spec > div + div::before{transition:none}
html.reduced .statement .w,html.reduced .lit .w{opacity:1}

/* ---------- wiring (js/dvx-dom.js): grid signal fades in with the strip; the hero copy settles in once ---------- */
.gridsig{display:block;opacity:0;transition:opacity 1.4s linear .15s}
.spec-wrap.is-in .gridsig{opacity:1}
@keyframes dvx-settle{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.hero__copy > *{animation:dvx-settle 1.1s var(--ease-out) both}
.hero__copy > p{animation-delay:.14s}
.hero__copy > .btn{animation-delay:.28s}
html.reduced .hero__copy > *{animation:none}
html.reduced .gridsig{transition:none}