/* Virtual Void additions on top of the Genz template */
.vv-logo{font-family:'Montserrat','Noto Sans',sans-serif;font-size:1.2rem;letter-spacing:-.02em;line-height:1;color:#fff;text-decoration:none;align-items:center;gap:.55em}
.vv-mark{height:1.9em;width:auto;flex:none;filter:drop-shadow(1px 1px 1.5px rgba(0,0,0,.6))}
.vv-mark .fy{fill:#1938a0}
.vv-mark .fx{fill:#1188e9}
.vv-mark .ft{fill:#83ccfc}
.vv-word{display:inline-flex;align-items:baseline}
.vv-w1{font-weight:600;color:#fff}
.vv-w2{font-weight:800;margin-left:.15em}
/* gradient text: the template's end colour (1F006C) is too dark to read as text, so text uses a lighter blend */
.color-linear{background:linear-gradient(90deg,var(--t1),var(--t2) 50%,var(--t3))!important;-webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important}
.vv-hero-title{font-size:clamp(2.4rem,6vw,3.6rem);line-height:1.1}
.vv-hero-title .typewrite{display:block;font-size:.78em;line-height:1.15;min-height:2.4em}
.vv-hero-actions{display:flex;flex-wrap:wrap;gap:14px}
.btn-border{border:1px solid rgb(var(--g1-rgb) / .35);color:#e6f0ff;background:transparent}
.btn-border:hover{border-color:var(--g1);color:#fff}

.vv-card{border:1px solid;border-radius:20px;padding:28px}
.vv-icon{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:20px;background:linear-gradient(135deg,var(--g1),var(--g2));color:#fff;font-size:20px}
.vv-feature{box-shadow:0 0 60px rgb(var(--g1-rgb) / .12)}
.vv-price{font-size:clamp(2.2rem,5vw,3rem);font-weight:800;line-height:1.1;margin:10px 0 6px}
.vv-list{list-style:none;padding:0;margin:0}
.vv-list li{position:relative;padding-left:28px;margin-bottom:12px}
.vv-list li::before{content:"";position:absolute;left:0;top:.45em;width:14px;height:14px;border-radius:50%;background:linear-gradient(135deg,var(--g1),var(--g2))}
.vv-step{display:inline-flex;width:38px;height:38px;border-radius:50%;align-items:center;justify-content:center;font-weight:700;color:#fff;margin-bottom:18px;background:linear-gradient(135deg,var(--g1),var(--g2))}
.vv-cta{border:1px solid;border-radius:24px;padding:clamp(28px,5vw,64px)}
.vv-lead{max-width:760px;margin-inline:auto}
.vv-tiktok{overflow:hidden;padding:clamp(12px,3vw,32px)}
.vv-tiktok blockquote{margin-inline:auto!important}
select.form-control option{background:var(--bg900);color:#fff}

/* interactive cube (in the hero, where the template photo was) */
.vv-stage-wrap{position:relative;z-index:2;padding:0 0 10px}
.stage{--c1:var(--g1);--c3:var(--g2);position:relative;aspect-ratio:1/1;width:100%;max-width:520px;margin-inline:auto;border-radius:20px;overflow:hidden;touch-action:none;
  background:color-mix(in srgb,var(--bg950) 65%,transparent);isolation:isolate;border:1px solid rgba(255,255,255,.08)}
@keyframes vvdrift{from{background-position:0% 0%,100% 100%,0 0,0 0}to{background-position:100% 100%,0% 0%,40px 0,0 0}}
.outline{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.outline polygon{fill:none;stroke:rgba(255,255,255,.8);stroke-width:1.5;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.handle{position:absolute;width:28px;height:28px;margin:-14px 0 0 -14px;border-radius:50%;background:#fff;border:3px solid var(--bg950);box-shadow:0 0 0 2px var(--g1);cursor:grab;padding:0}
.handle:active{cursor:grabbing}
.stage-hint{position:absolute;left:12px;bottom:8px;font-size:.72rem;color:#94a9c9;pointer-events:none}

/* marquee strip */
.vv-strip-section{overflow:hidden}
.strip{overflow:hidden;white-space:nowrap;padding:18px 0;border-top:1px solid var(--bg800);border-bottom:1px solid var(--bg800);background:var(--bg950)}
.strip-track{display:inline-flex;will-change:transform;animation:vvslide 70s linear infinite}
.strip span{font-weight:700;font-size:clamp(1.05rem,3vw,1.4rem);padding:0 24px;color:#e6f0ff}
.strip span:nth-child(even){color:var(--t1)}
@keyframes vvslide{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.face,.strip-track{animation:none}}
@media (max-width:991px){.vv-hero-title{text-align:center}.banner .col-lg-6{text-align:center}.vv-hero-actions{justify-content:center}.banner .pt-100{padding-top:40px!important}}
.cover-home1{overflow-x:clip}

.vv-strip-section{margin-top:-20px}

/* spacing under the hero */
.cover-home1{padding-bottom:40px}
.cover-home1 + section{margin-top:70px}

/* colour picker (PREVIEW ONLY: delete this block and the picker script before publishing) */
input[type=date].form-control{color-scheme:dark}

/* ---------- theme-tinted background glows (replace the template's fixed-colour glow images) ---------- */
body{background:var(--bg900)}
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(60% 45% at 50% 0%,rgb(var(--g1-rgb)/.14),transparent 70%),radial-gradient(45% 40% at 100% 100%,rgb(var(--g2-rgb)/.30),transparent 70%)}
.main,.footer{position:relative;z-index:1}
.cover-home1::after{width:100%!important;background:radial-gradient(ellipse 55% 60% at 70% 0%,rgb(var(--g1-rgb)/.18),transparent 100%)!important}
.cover-home1::before{width:100%!important;background:radial-gradient(ellipse 45% 40% at 85% 55%,rgb(var(--g2-rgb)/.32),transparent 100%)!important}
.banner-img::before{background:radial-gradient(closest-side,rgb(var(--g1-rgb)/.22),transparent)!important}

/* ---------- inner page title: label on its own line ---------- */
.cover-home3 .text-sm-bold{display:block;margin-bottom:6px}

/* ---------- 1. hero depth: a slow projector beam behind the cube ---------- */

/* ---------- 2. cards glow under the cursor ---------- */
.vv-card{position:relative;overflow:hidden;transition:transform .3s,border-color .3s}
.vv-card>*{position:relative;z-index:1}
.vv-card::before{content:"";position:absolute;inset:0;z-index:0;opacity:0;transition:opacity .3s;pointer-events:none;background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),rgb(var(--g1-rgb)/.42),rgb(var(--g1-rgb)/.12) 45%,transparent 75%)}
.vv-card.lit::before,.vv-card:hover::before{opacity:1}.vv-card.lit,.vv-card:hover{border-color:rgb(var(--g1-rgb)/.7)!important;box-shadow:0 0 34px rgb(var(--g1-rgb)/.22)}

/* ---------- 5. dividers that draw themselves as you scroll ---------- */
.vv-divider{max-width:1140px;margin:0 auto 70px;padding:0 15px}
.vv-divider span{display:block;height:1px;transform:scaleX(0);transform-origin:left;transition:transform 1.1s cubic-bezier(.2,.7,.2,1);background:linear-gradient(90deg,transparent,var(--g1),rgb(var(--g2-rgb)/.0))}
.vv-divider.in span{transform:scaleX(1)}

/* ---------- 7. before / after slider ---------- */
.vv-ba{position:relative;aspect-ratio:16/9;max-width:900px;margin:0 auto;border-radius:20px;overflow:hidden;border:1px solid var(--bg800);user-select:none;touch-action:pan-y}
.vv-ba-layer{position:absolute;inset:0}
.vv-ba-before{background:radial-gradient(120% 90% at 50% 120%,#1a1f2c,transparent 60%),repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 2px,transparent 2px 46px),repeating-linear-gradient(90deg,rgba(255,255,255,.03) 0 2px,transparent 2px 96px),#141821}
.vv-ba-after{clip-path:inset(0 0 0 var(--pos,50%));background:radial-gradient(60% 70% at 30% 40%,rgb(var(--g1-rgb)/.85),transparent 60%),radial-gradient(55% 70% at 72% 62%,rgb(var(--g2-rgb)/.95),transparent 65%),repeating-conic-gradient(from 0deg at 50% 50%,rgba(0,0,0,.18) 0 8deg,transparent 8deg 20deg),repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 2px,transparent 2px 46px),#0c1226;background-size:140% 140%,140% 140%,100% 100%,100% 100%,100% 100%}
.vv-ba img{width:100%;height:100%;object-fit:cover}
.vv-ba-tag{position:absolute;top:14px;padding:5px 12px;border-radius:999px;font-size:.8rem;font-weight:700;background:rgba(0,0,0,.45);color:#e6f0ff;z-index:3}
.vv-ba-tag.l{left:14px}.vv-ba-tag.r{right:14px}
.vv-ba-handle{position:absolute;top:0;bottom:0;left:var(--pos,50%);width:2px;background:#fff;z-index:3;pointer-events:none;box-shadow:0 0 18px rgb(var(--g1-rgb)/.8)}
.vv-ba-handle::after{content:"\2194";position:absolute;top:50%;left:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:#fff;color:#0b1020;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700}
.vv-ba input[type=range]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;z-index:4;margin:0}

/* ---------- 8. page transitions (and the loading screen only on the first visit) ---------- */
body{animation:vvin .45s ease both}
@keyframes vvin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
body.vv-leaving{opacity:0;transform:translateY(-6px);transition:opacity .25s,transform .25s}
html.vv-visited #preloader-active{display:none!important}
@media (prefers-reduced-motion:reduce){body{animation:none}body.vv-leaving{transition:none}.vv-beam{animation:none}.face::before{animation:none}.vv-divider span{transition:none}}

/* ---------- 9. bolder headings ---------- */
.vv-kicker{display:block;font-size:.8rem;font-weight:800;letter-spacing:.22em;text-transform:uppercase;margin-bottom:12px;color:var(--t1)}
.vv-head h2,.vv-head h3{letter-spacing:-.02em;font-weight:800}
.vv-head h2::after{content:"";display:block;width:64px;height:4px;border-radius:4px;margin:16px auto 0;background:linear-gradient(90deg,var(--g1),var(--g2))}
.vv-hero-title{font-size:clamp(2.7rem,6.6vw,4.3rem)!important;letter-spacing:-.035em;line-height:1.04!important}
.vv-cta h2{letter-spacing:-.02em;font-weight:800}

/* ---------- cube faces (transform-animated: much cheaper than animating background-position) ---------- */
.face{position:absolute;inset:0;overflow:hidden}
.face::before{content:"";position:absolute;inset:-22%;will-change:transform;animation:vvface 8s ease-in-out infinite alternate}
.f-top::before{background-image:radial-gradient(circle at 30% 30%,var(--c1) 0,transparent 55%),radial-gradient(circle at 72% 72%,var(--c2) 0,transparent 60%),linear-gradient(135deg,var(--c3),var(--c1))}
.f-left::before{background-image:radial-gradient(circle at 25% 70%,var(--c2) 0,transparent 55%),radial-gradient(circle at 75% 25%,var(--c1) 0,transparent 60%),linear-gradient(160deg,var(--c1),var(--c3));animation-duration:11s}
.f-right::before{background-image:radial-gradient(circle at 70% 30%,var(--c1) 0,transparent 55%),radial-gradient(circle at 30% 75%,var(--c2) 0,transparent 60%),linear-gradient(200deg,var(--c3),var(--c2));animation-duration:7s}
@keyframes vvface{from{transform:translate3d(-6%,-6%,0) rotate(0deg)}to{transform:translate3d(6%,6%,0) rotate(5deg)}}
@media (prefers-reduced-motion:reduce){.face::before{animation:none}}

/* ---------- 1. hero depth: a spotlight cone from above + a glow on the "floor" (transform/opacity only, so it stays smooth) ---------- */
.vv-beam{position:absolute;z-index:1;pointer-events:none;left:2%;right:2%;top:-34%;height:96%;transform-origin:50% 0;filter:blur(16px);will-change:transform,opacity;animation:vvcone 9s ease-in-out infinite alternate}
.vv-beam::before{content:"";position:absolute;inset:0;clip-path:polygon(44% 0,56% 0,100% 100%,0 100%);background:radial-gradient(closest-side at 50% 100%,rgb(var(--g1-rgb)/.65),transparent) 50% 100%/90% 55% no-repeat,linear-gradient(180deg,rgb(var(--g1-rgb)/.85),rgb(var(--g1-rgb)/.32) 55%,transparent 97%)}
@keyframes vvcone{from{transform:rotate(-2deg) scaleX(.96);opacity:.8}to{transform:rotate(2deg) scaleX(1.04);opacity:1}}
.vv-stage-wrap::after{content:"";position:absolute;left:8%;right:8%;bottom:-26px;height:70px;z-index:0;pointer-events:none;background:radial-gradient(closest-side,rgb(var(--g1-rgb)/.5),transparent)}

/* ---------- fixes ---------- */
/* the template gives buttons a 0.3s transition: that was the lag when dragging the cube corners */
.stage,.stage *,.handle,.face,.outline polygon{transition:none!important}
.handle{will-change:left,top}
/* glow layers must never catch the mouse (they covered the first cards on the home page) */
.cover-home1::before,.cover-home1::after,.banner-img::before,.vv-beam,.vv-stage-wrap::after,body::before{pointer-events:none!important}
/* header stays above the hero light */
.header{z-index:1000}

/* buttons/icons use contrast-safe versions of the gradient (bright colours like lime or gold would wash out white text) */
.btn.btn-linear,.btn.btn-linear-small{background:linear-gradient(90deg,var(--btn-a),var(--btn-b) 51%,var(--btn-a)) var(--x,0)/200%!important}
.vv-icon,.vv-step{background:linear-gradient(135deg,var(--btn-a),var(--btn-b))}

.wow.vv-done{animation:none!important;opacity:1!important;visibility:visible!important;transform:none}
/* our own caret for the typed headline (the template's border caret left stray marks) */
.typewrite>.wrap{border-right:0!important}
.typewrite>.wrap::after{content:"";display:inline-block;width:.07em;height:.85em;margin-left:.1em;background:#fff;vertical-align:-.06em;-webkit-text-fill-color:#fff;animation:vvcaret 1s steps(1) infinite}
@keyframes vvcaret{50%{opacity:0}}



/* ---------- floating design panel (PREVIEW ONLY: delete with the picker) ---------- */
.vv-picker{position:fixed;left:14px;top:96px;z-index:99999;width:262px;max-width:calc(100vw - 12px);background:var(--bg950);border:1px solid var(--bg800);border-radius:14px;font-size:.8rem;color:#94a9c9;box-shadow:0 12px 40px rgba(0,0,0,.45)}
.vv-pk-head{display:flex;align-items:center;justify-content:space-between;padding:9px 10px 9px 14px;cursor:grab;touch-action:none;user-select:none;font-weight:700;color:#e6f0ff;border-bottom:1px solid var(--bg800)}
.vv-pk-head:active{cursor:grabbing}
.vv-pk-head button{width:26px;height:26px;border-radius:8px;border:1px solid var(--bg800);background:var(--bg850);color:#e6f0ff;cursor:pointer;font-size:16px;line-height:1;padding:0}
.vv-pk-body{padding:10px 14px 14px;max-height:min(70vh,520px);overflow:auto}
.vv-collapsed .vv-pk-body{display:none}.vv-collapsed .vv-pk-head{border-bottom:0}
.vv-pk-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:7px;margin-top:8px}
.vv-pk-grid button{aspect-ratio:1;width:100%;border-radius:50%;border:2px solid var(--bg800);cursor:pointer;padding:0}
.vv-pk-grid button[aria-pressed="true"]{border-color:#fff}
.vv-picker summary{cursor:pointer;margin-top:10px;color:#94a9c9}
.vv-pk-row{margin-top:12px;padding-top:10px;border-top:1px solid var(--bg800)}
.vv-pk-pills{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.vv-pk-pills button{border-radius:999px;padding:5px 11px;font-size:.75rem;color:#cbd5e1;background:var(--bg850);border:1px solid var(--bg800);cursor:pointer}
.vv-pk-pills button[aria-pressed="true"]{border-color:#fff;color:#fff}
.vv-pk-range{display:block;margin-top:12px}
.vv-pk-range output{float:right;color:#e6f0ff}
.vv-pk-range input{width:100%;margin-top:6px;accent-color:var(--g1)}

/* ---------- cube: see-through faces (drag a corner behind the cube and you can still see it) ---------- */
.stage{--face-op:.7}
.face{opacity:var(--face-op)}

/* ---------- cube surface styles (data-surface on #stage) ---------- */
.face::after{content:"";position:absolute;inset:0;pointer-events:none}
/* holographic: mostly clear, tinted, glowing edges */
.stage[data-surface="holo"] .face::before{opacity:.62}
.stage[data-surface="holo"] .face::after{background:linear-gradient(135deg,rgb(var(--g1-rgb)/.30),rgb(var(--g2-rgb)/.12) 60%,rgb(var(--g1-rgb)/.18))}
.stage[data-surface="holo"] .outline polygon{stroke:var(--c2);stroke-width:2;filter:drop-shadow(0 0 5px var(--g1))}
/* frosted: blurred glass, you see the grid behind it */
.stage[data-surface="frost"] .face{-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}
.stage[data-surface="frost"] .face::before{opacity:.55}
.stage[data-surface="frost"] .face::after{background:linear-gradient(160deg,rgba(255,255,255,.28),rgba(255,255,255,.05))}
/* neon outline: almost empty faces, bright glowing lines */
.stage[data-surface="neon"] .face::before{opacity:.14}
.stage[data-surface="neon"] .outline polygon{stroke:var(--g1);stroke-width:3;filter:drop-shadow(0 0 4px var(--g1)) drop-shadow(0 0 12px var(--g1))}
/* prism: each face is a different hue of your colours */
.stage[data-surface="prism"] .f-top::before{filter:hue-rotate(0deg) saturate(1.2)}
.stage[data-surface="prism"] .f-left::before{filter:hue-rotate(38deg) saturate(1.2)}
.stage[data-surface="prism"] .f-right::before{filter:hue-rotate(-38deg) saturate(1.2)}
/* aurora: soft stretched clouds of light drifting across */
.stage[data-surface="aurora"] .face::after{inset:-30%;background:radial-gradient(ellipse 60% 18% at 30% 35%,rgba(255,255,255,.38),transparent),radial-gradient(ellipse 55% 16% at 70% 62%,rgba(255,255,255,.3),transparent),radial-gradient(ellipse 45% 14% at 40% 85%,rgba(255,255,255,.22),transparent);transform:rotate(-18deg);will-change:transform;animation:vvaur 12s ease-in-out infinite alternate}
@keyframes vvaur{from{transform:rotate(-18deg) translate3d(-6%,-4%,0)}to{transform:rotate(-18deg) translate3d(6%,5%,0)}}
/* flat colour: solid blocks, no texture */
.stage[data-surface="flat"] .face::before{animation:none;inset:0;background-image:none}
.stage[data-surface="flat"] .f-top::before{background:var(--c2)}
.stage[data-surface="flat"] .f-left::before{background:var(--c1)}
.stage[data-surface="flat"] .f-right::before{background:var(--c3)}
@media (prefers-reduced-motion:reduce){.stage[data-surface="aurora"] .face::after{animation:none}}

/* grid sits ABOVE the cube faces, so it is the same colour whatever surface is picked (faces used to tint it) */
.stage::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(transparent 31px,rgba(255,255,255,.05) 32px) 0 0/100% 32px,linear-gradient(90deg,transparent 31px,rgba(255,255,255,.05) 32px) 0 0/32px 100%}
.stage .face{z-index:0}
.stage .outline,.stage .handle,.stage .stage-hint{z-index:2}

/* keep each face's moving texture inside its own clip (Safari can let composited children escape clip-path) */
.stage .face{isolation:isolate;transform:translateZ(0);-webkit-mask-image:-webkit-radial-gradient(white,black)}

/* ---------- downloads page ---------- */
.vv-tag{display:inline-block;padding:4px 12px;border-radius:999px;font-size:.75rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;background:rgb(var(--g1-rgb)/.18);color:var(--t1);border:1px solid rgb(var(--g1-rgb)/.45)}
.vv-tag.is-free{background:rgb(255 255 255/.06);color:#cfe3ff;border-color:rgb(255 255 255/.25)}
.vv-soon{font-weight:700;font-size:.9rem;color:var(--t1)}
.vv-icon.mb-0{margin-bottom:0}
.vv-faq summary{cursor:pointer;list-style:none}
.vv-faq summary::-webkit-details-marker{display:none}
.vv-faq summary::after{content:"+";float:right;color:var(--t1);font-weight:800}
.vv-faq details[open] summary::after{content:"\2013"}
.vv-faq summary h3{color:#fff!important;font-weight:700;font-size:1.05rem}

/* ---------- download card thumbnail ---------- */
.vv-thumb{display:block;width:100%;max-height:260px;object-fit:contain;background:#000;border-radius:14px;margin-bottom:20px}

/* ---------- index hero: photo blended into the ocean navy ---------- */
.cover-home1{position:relative;min-height:min(80vh,780px);display:flex;align-items:center;
  background:var(--bg900) url(../imgs/hero-jellyfish.jpg) right center/auto 100% no-repeat}
.cover-home1::before{content:"";position:absolute;inset:auto 0 0 0;height:140px;pointer-events:none;
  background:linear-gradient(180deg,transparent,var(--bg900))}
.cover-home1 .container{position:relative;z-index:1}
.cover-home1 .banner .pt-100{padding-bottom:90px}
@media (max-width:991px){.cover-home1{background-size:cover;background-position:72% center}
  .cover-home1::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,19,33,.35),rgba(11,19,33,.85));pointer-events:none}}
.vv-cube-demo{display:flex;justify-content:center}
.vv-cube-demo .vv-stage-wrap{width:min(520px,100%)}
/* keep the copy readable where the tentacles run behind it */
.cover-home1::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,var(--bg900) 0%,rgba(11,19,33,.82) 30%,rgba(11,19,33,0) 62%)}
@media (max-width:991px){.cover-home1::after{background:linear-gradient(180deg,rgba(11,19,33,.55),rgba(11,19,33,.9))}}
@media (max-width:991px){
  .cover-home1{min-height:0;display:block;padding-top:300px;background-size:auto 380px;background-position:78% 56px}
  .cover-home1::after{background:linear-gradient(180deg,rgba(11,19,33,0) 0,rgba(11,19,33,0) 150px,var(--bg900) 400px)}
  .cover-home1 .banner .pt-100{padding-top:0!important;padding-bottom:50px}
}

/* ---------- hero v2: photo is screen-blended, so the page glow shows through and nothing has an edge ---------- */
.cover-home1{background:none!important}
.vv-hero-photo{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url(../imgs/hero-jellyfish-alpha.webp) right center/auto 100% no-repeat}
/* the template's purple (g2) hero glow caused the purple band: keep only the blue one */
.cover-home1::before{content:none!important;display:none!important}
.cover-home1::after{content:""!important;position:absolute;inset:0;width:100%!important;pointer-events:none;
  background:radial-gradient(ellipse 55% 60% at 70% 0%,rgb(var(--g1-rgb)/.14),transparent 100%)!important}
@media (max-width:991px){
  .vv-hero-photo{background-size:auto 380px;background-position:78% 56px}
  .cover-home1::after{background:radial-gradient(ellipse 80% 40% at 60% 0%,rgb(var(--g1-rgb)/.14),transparent 100%)!important}
}
@media (min-width:992px){.vv-hero-photo{background-size:auto 100%}}
/* body is its own stacking context (page-in animation), so give html the colour and let body paint its own: the hero photo then blends against it */
html{background:var(--bg900)}

/* ---------- photo band (downloads): transparent webp, so it melts into the page ---------- */
.vv-photo-band{max-width:1100px;margin:-10px auto 30px;padding:0 16px;position:relative;z-index:1}
.vv-photo-band img{display:block;width:100%;height:auto;pointer-events:none}
.vv-path code{word-break:break-all;color:var(--t1);background:var(--bg850);padding:2px 8px;border-radius:6px}
.vv-card p{overflow-wrap:anywhere}
.vv-logo .vv-w2.color-linear{background:linear-gradient(90deg,#73c6fc,#0f9ffe 45%,#1938a0)!important;-webkit-background-clip:text!important;background-clip:text!important}

/* ---------- Artist Kit card (rentals) + Chemical Burn case study (visuals) ---------- */
.vv-kit{display:grid;gap:28px}
@media (min-width:992px){.vv-kit{grid-template-columns:1fr 1.15fr;align-items:center;padding:40px}}
.vv-chips{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0;margin:0}
.vv-chip{display:inline-flex;align-items:center;gap:10px;padding:5px 14px 5px 5px;border-radius:999px;background:rgb(255 255 255/.04);border:1px solid rgb(255 255 255/.12);font-size:.85rem;color:#cfe3ff}
.vv-chip b{font-weight:600;color:#8fa6c4;font-variant-numeric:tabular-nums}
.vv-sw{width:24px;height:24px;border-radius:50%;flex:none;background:var(--sw);box-shadow:0 0 12px color-mix(in srgb,var(--sw) 55%,transparent)}
.vv-shot img{display:block;width:100%;height:auto;border-radius:16px;background:#000;border:1px solid rgb(255 255 255/.08)}
.vv-shot figcaption{font-size:.85rem;line-height:1.5;margin-top:12px;color:#7d8da6}
.vv-video-slot{aspect-ratio:9/16;max-width:300px;margin-inline:auto;border:2px dashed rgb(var(--g1-rgb)/.5);border-radius:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px;
  background:repeating-linear-gradient(135deg,rgb(var(--g1-rgb)/.05) 0 14px,transparent 14px 28px),var(--bg850)}
/* 7 nav items (For artists added): tighter link padding so Contact stays on the first line at desktop widths */
@media (min-width:1200px){.header .main-header .header-nav .nav-main-menu ul.main-menu > li > a{padding-left:10px;padding-right:10px;white-space:nowrap}}

/* ---- Tier 1 restructure ---- */
[hidden]{display:none!important}
.vv-hero-title.vv-plain{font-size:clamp(2.1rem,4.8vw,3.3rem)!important;letter-spacing:-.03em;line-height:1.1!important}
.vv-hero-type{font-size:clamp(1.25rem,2.6vw,1.7rem);font-weight:700;min-height:2.4em;margin:0 0 14px;line-height:1.25}
.vv-hero-type .typewrite{display:inline}
@media (max-width:991px){.vv-hero-type{text-align:center}}
.vv-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:0 auto}
.vv-tabs a{padding:8px 18px;border-radius:999px;background:rgb(255 255 255/.04);border:1px solid rgb(255 255 255/.14);color:#cfe3ff;font-size:.9rem;font-weight:600;text-decoration:none;transition:border-color .2s,background .2s}
.vv-tabs a:hover,.vv-tabs a:focus-visible{border-color:var(--t1);background:rgb(var(--g1-rgb)/.14);color:#fff}
.vv-need{border:0;padding:0;margin:0}
.vv-need-card{display:block;position:relative;height:100%;cursor:pointer;margin:0}
.vv-need-card input{position:absolute;opacity:0;pointer-events:none}
.vv-need-card .vv-card{display:block;text-align:center;padding:20px 14px;border:1px solid rgb(255 255 255/.1);transition:border-color .2s,box-shadow .2s}
.vv-need-card .vv-card i{font-size:1.6rem;color:var(--t1)}
.vv-need-card:hover .vv-card{border-color:rgb(var(--g1-rgb)/.6)}
.vv-need-card input:checked+.vv-card{border-color:var(--t1)!important;box-shadow:0 0 0 1px var(--t1),0 0 28px rgb(var(--g1-rgb)/.25)}
.vv-need-card input:focus-visible+.vv-card{outline:2px solid #fff;outline-offset:2px}

/* ---- nav look + free call button ---- */
.header-right{display:flex;gap:10px;justify-content:flex-end;align-items:center}
.vv-call{display:none;white-space:nowrap}
.vv-call i{margin-right:8px;font-size:1rem;vertical-align:-2px}
@media (min-width:1400px){.vv-call{display:inline-block}}
@media (min-width:1200px){
  .header .main-header .header-nav .nav-main-menu ul.main-menu{display:flex;gap:2px;padding:5px;border-radius:999px;background:rgb(255 255 255/.045);border:1px solid rgb(255 255 255/.1)}
  .header .main-header .header-nav .nav-main-menu ul.main-menu>li{float:none}
  .header .main-header .header-nav .nav-main-menu ul.main-menu>li>a{padding:10px 18px;border-radius:999px;font-weight:600;font-size:15px;line-height:1;transition:background .2s,color .2s,box-shadow .2s}
  .header .main-header .header-nav .nav-main-menu ul.main-menu>li>a:hover{background:rgb(255 255 255/.08);color:#fff}
  .header .main-header .header-nav .nav-main-menu ul.main-menu>li>a.active{background:linear-gradient(135deg,rgb(var(--g1-rgb)/.34),rgb(var(--g2-rgb)/.34));color:#fff;box-shadow:inset 0 0 0 1px rgb(var(--g1-rgb)/.6),0 0 18px rgb(var(--g1-rgb)/.25)}
}
.header-right{flex:none}
.header-right .btn{white-space:nowrap;flex:none}

/* ---- header: real 3-column layout, centred pill, no overlap ---- */
@media (min-width:1200px){
  .header .main-header{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:center}
  .header .main-header .header-logo{max-width:none;width:auto;justify-self:start}
  .header .main-header .header-nav{width:auto;justify-self:center}
  .header .main-header .header-right{max-width:none;width:auto;justify-self:end}
  .header .main-header .header-nav .nav-main-menu ul.main-menu{gap:0;padding:4px}
  .header .main-header .header-nav .nav-main-menu ul.main-menu>li>a{padding:9px 15px;font-size:14.5px}
}
/* ---- contact form ---- */
.vv-legend{display:block;float:none;width:auto;padding:0;margin:0 0 18px;font-size:1.05rem;font-weight:800;color:#fff}
.vv-label{display:block;margin:0 0 8px;font-size:.85rem;font-weight:600;color:#8fa6c4}
.vv-form .form-control{height:52px}
.vv-form textarea.form-control{height:auto;min-height:130px}
.vv-form .form-group{margin-bottom:0}
.vv-callbar{padding:22px 28px;text-align:left}
.vv-form select.form-control{height:52px;padding-top:0;padding-bottom:0;line-height:normal;display:block}

/* ---- video reels ---- */
.vv-reel{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 16px;-webkit-overflow-scrolling:touch}
.vv-reel .vv-reel-item{flex:0 0 clamp(150px,44vw,230px);scroll-snap-align:start}
@media (min-width:992px){.vv-reel{justify-content:center;overflow:visible}.vv-reel .vv-reel-item{flex:1 1 0;max-width:230px}}
.vv-reel-item{margin:0}
.vv-reel-item video{display:block;width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:16px;background:#000;border:1px solid rgb(255 255 255/.1)}
.vv-reel-item figcaption{margin-top:10px;font-size:.85rem;font-weight:600;color:#8fa6c4;text-align:center}

/* ---- gallery: category buttons + one compact grid ---- */
.vv-gallery{padding:46px 0 84px}
.vv-g-head{margin-bottom:22px}
.vv-g-title{display:block;font-size:clamp(1.8rem,3.4vw,2.6rem);margin:8px 0 0}
.vv-g-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.vv-g-chip{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;border:1px solid rgb(255 255 255/.14);background:rgb(255 255 255/.04);color:#b9c9e2;font-size:.92rem;font-weight:600;cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.vv-g-chip span{font-size:.75rem;font-weight:700;color:#7d8da6;font-variant-numeric:tabular-nums}
.vv-g-chip:hover,.vv-g-chip:focus-visible{color:#fff;border-color:var(--t1)}
.vv-g-chip.is-on{color:#fff;border-color:rgb(var(--g1-rgb)/.7);background:linear-gradient(135deg,rgb(var(--g1-rgb)/.32),rgb(var(--g2-rgb)/.32))}
.vv-g-chip.is-on span{color:#dcecff}
.vv-g-intro{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;margin-bottom:24px;padding:14px 18px;border-radius:14px;background:rgb(255 255 255/.03);border:1px solid rgb(255 255 255/.08)}
.vv-g-intro p{margin:0;color:#9fb3cf}
.vv-g-intro .btn{padding:9px 18px;font-size:.9rem}
.vv-g-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px 16px}
@media (min-width:768px){.vv-g-grid{grid-template-columns:repeat(3,1fr);gap:26px 20px}}
@media (min-width:1100px){.vv-g-grid{grid-template-columns:repeat(4,1fr)}}
.vv-g-item{margin:0;min-width:0}
.vv-g-media{display:block;position:relative;width:100%;padding:0;aspect-ratio:4/5;border-radius:14px;overflow:hidden;background:#000;border:1px solid rgb(255 255 255/.1);cursor:pointer;transition:border-color .25s,transform .25s}
.vv-g-media:hover,.vv-g-media:focus-visible{border-color:rgb(var(--g1-rgb)/.7);transform:translateY(-3px)}
.vv-g-media video,.vv-g-media img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 62%}
.vv-g-text{padding-top:12px}
.vv-g-name{margin:0 0 3px;font-size:1.05rem;font-weight:700;color:#fff;line-height:1.25}
.vv-g-meta{margin:0;font-size:.84rem;color:#8fa6c4}
.vv-g-desc{display:none;margin:12px 0 0;color:#9fb3cf;font-size:1rem}
.vv-g-link{display:none;margin-top:12px;font-weight:700;color:var(--t1);text-decoration:none}
.vv-g-grid.is-few{grid-template-columns:1fr}
.vv-g-grid.is-few .vv-g-item{display:grid;gap:22px;align-items:center}
@media (min-width:768px){.vv-g-grid.is-few .vv-g-item{grid-template-columns:minmax(220px,360px) 1fr;gap:36px}}
.vv-g-grid.is-few .vv-g-text{padding-top:0}
.vv-g-grid.is-few .vv-g-name{font-size:1.6rem}
.vv-g-grid.is-few .vv-g-desc,.vv-g-grid.is-few .vv-g-link{display:block}
@media (max-width:767px){.vv-g-chips{flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px;margin-inline:-4px;scrollbar-width:none}.vv-g-chips::-webkit-scrollbar{display:none}.vv-g-chip{flex:none}}
/* clip viewer */
html.vv-lb-open{overflow:hidden}
.vv-lb{position:fixed;inset:0;z-index:5000;display:flex;align-items:center;justify-content:center;gap:10px;padding:20px;background:rgba(5,8,14,.94)}
.vv-lb[hidden]{display:none}
.vv-lb-fig{margin:0;text-align:center}
.vv-lb-fig video{display:block;max-height:80vh;max-width:min(90vw,calc(80vh*.5625));aspect-ratio:9/16;object-fit:cover;border-radius:16px;background:#000;border:1px solid rgb(255 255 255/.12)}
.vv-lb-fig figcaption{margin-top:12px;font-weight:700;color:#e8f1ff}
.vv-lb-x{position:absolute;top:14px;right:18px;width:44px;height:44px;border-radius:50%;border:1px solid rgb(255 255 255/.2);background:rgb(255 255 255/.06);color:#fff;font-size:1.6rem;line-height:1;cursor:pointer}
.vv-lb-nav{width:46px;height:46px;flex:none;border-radius:50%;border:1px solid rgb(255 255 255/.2);background:rgb(255 255 255/.06);color:#fff;font-size:1.8rem;line-height:1;cursor:pointer}
.vv-lb-x:hover,.vv-lb-nav:hover,.vv-lb-x:focus-visible,.vv-lb-nav:focus-visible{border-color:var(--t1)}
@media (max-width:600px){.vv-lb{flex-direction:column}.vv-lb-nav{position:absolute;bottom:20px}.vv-lb-prev{left:22px}.vv-lb-next{right:22px}}
@media (min-width:1400px){.vv-g-grid{grid-template-columns:repeat(5,1fr);gap:26px 18px}}
.vv-lb{font-family:"Noto Sans",system-ui,-apple-system,sans-serif;color:#e8f1ff}

/* contact links: template forces a:hover to black, unreadable on the dark page */
a.color-gray-500:hover,a.color-gray-500:focus-visible,.location:hover,.plane:hover{color:#fff}
.location,.plane{transition:color .2s}