/* v2 "wow" homepage layer. Real job media + illustrative backgrounds. */
.vx-hero{position:relative;min-height:min(88vh,820px);display:flex;align-items:flex-end;color:#fff;background:var(--ink) url(/work/boiler-walkthrough.jpg) center/cover;overflow:hidden;isolation:isolate}
.vx-hero-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.vx-hero-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(8,14,26,.94) 0%,rgba(8,14,26,.78) 42%,rgba(8,14,26,.25) 100%),linear-gradient(0deg,rgba(8,14,26,.9) 0%,transparent 45%)}
.vx-hero-in{padding:120px 0 72px}
.vx-hero .eyebrow{color:#9fc4f5}
.vx-hero h1{font-size:clamp(3.1rem,7.4vw,6.6rem);max-width:820px;margin:14px 0 24px;text-shadow:0 2px 30px rgba(0,0,0,.4)}
.vx-hero h1 em{font-style:normal;color:var(--sky)}
.vx-hero .lede{max-width:560px;color:#dfe6f0}
.vx-tag{display:inline-flex;align-items:center;gap:10px;margin:28px 0 0;font:500 .78rem/1.3 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:#c9d3e2}
.vx-dot{width:9px;height:9px;border-radius:50%;background:var(--ember);box-shadow:0 0 0 0 rgba(31,139,255,.7);animation:vxPulse 2s infinite}
@keyframes vxPulse{70%{box-shadow:0 0 0 12px rgba(31,139,255,0)}100%{box-shadow:0 0 0 0 rgba(31,139,255,0)}}

.vx-pick{background:var(--ink)}
.vx-pick-in{display:grid;grid-template-columns:1fr 1fr}
.vx-door{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:440px;padding:48px clamp(24px,4vw,64px);color:#fff;text-decoration:none;overflow:hidden;isolation:isolate}
.vx-door::before{content:"";position:absolute;inset:0;z-index:-2;background:var(--bg) center/cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.vx-door::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(8,14,26,.95) 10%,rgba(8,14,26,.35) 70%,rgba(8,14,26,.2))}
.vx-door:hover::before,.vx-door:focus-visible::before{transform:scale(1.06)}
.vx-door .eyebrow{color:#9fc4f5}
.vx-door-heat .eyebrow{color:#9fc4f5}
.vx-door h2{font-size:clamp(2.2rem,4vw,3.4rem);margin-bottom:12px}
.vx-door p{max-width:440px;color:#d6dde8}
.vx-go{font-weight:600;color:#fff;border-bottom:2px solid var(--ember);align-self:flex-start;padding-bottom:2px}
.vx-illus{position:absolute;top:14px;right:16px;font:500 .66rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.55)}

.vx-ba-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.vx-ba{position:relative;aspect-ratio:3/4;max-height:640px;border-radius:8px;overflow:hidden;background:var(--ink);box-shadow:0 30px 60px -30px rgba(12,21,36,.6);user-select:none}
.vx-ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vx-ba-before{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.vx-ba-handle{position:absolute;top:0;bottom:0;left:var(--pos);width:3px;margin-left:-1.5px;background:#fff;pointer-events:none}
.vx-ba-handle::after{content:"⟷";position:absolute;top:50%;left:50%;width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;background:var(--ember);color:#fff;display:grid;place-items:center;font-size:1.3rem;box-shadow:0 4px 18px rgba(0,0,0,.35)}
.vx-ba input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}
.vx-ba input:focus-visible+*{outline:none}
.vx-ba:focus-within{outline:3px solid var(--blue);outline-offset:3px}
.vx-ba-l,.vx-ba-r{position:absolute;top:14px;padding:6px 10px;border-radius:3px;font:500 .72rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#fff;background:rgba(8,14,26,.75);pointer-events:none}
.vx-ba-l{left:14px}.vx-ba-r{right:14px;background:var(--ember)}

.vx-proof{background:var(--ink);color:#fff}
.vx-proof .sec-head p{color:#b9c4d4}
.vx-proof .eyebrow{color:#9fc4f5}
.vx-reel{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
.vx-reel li{position:relative;border-radius:6px;overflow:hidden;aspect-ratio:3/4;background:var(--ink-2)}
.vx-reel img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.vx-reel li:hover img{transform:scale(1.05)}
.vx-reel span{position:absolute;left:0;right:0;bottom:0;padding:36px 14px 14px;font-size:.88rem;line-height:1.35;color:#d6dde8;background:linear-gradient(0deg,rgba(8,14,26,.95),transparent)}
.vx-reel b{display:block;font:700 1.2rem/1.1 var(--head);color:#fff;margin-bottom:3px}
.vx-proof .work-more a{color:#9fc4f5}

.vx-night{position:relative;color:#fff;padding:140px 0;background:linear-gradient(90deg,rgba(6,12,24,.92) 0%,rgba(6,12,24,.6) 50%,rgba(6,12,24,.1)),var(--bg) center/cover}
.vx-night .eyebrow{color:#9fc4f5}
.vx-night h2{max-width:620px;font-size:clamp(2.4rem,5vw,4.2rem);margin-bottom:18px}
.vx-night .lede{max-width:520px;color:#dfe6f0}

.vx-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;counter-reset:s}
.vx-steps li{padding:28px 24px;border-top:3px solid var(--ember);background:var(--white);border-radius:0 0 6px 6px}
.vx-steps b{display:block;font:500 .85rem/1 var(--mono);color:var(--ember-deep);margin-bottom:14px}
.vx-steps h3{margin-bottom:10px}
.vx-steps p{color:var(--muted);margin:0}

@media(max-width:1000px){.vx-reel{grid-template-columns:repeat(3,minmax(0,1fr))}.vx-steps{grid-template-columns:1fr 1fr}}
@media(max-width:760px){
  .vx-hero{min-height:auto}
  .vx-hero-in{padding:96px 0 44px}
  .vx-hero h1{font-size:3.2rem}
  .vx-hero-shade{background:linear-gradient(0deg,rgba(8,14,26,.96) 30%,rgba(8,14,26,.55))}
  .vx-hero .cta-row .btn{flex:1 1 100%}
  .vx-pick-in,.vx-ba-grid{grid-template-columns:1fr;gap:32px}
  .vx-door{min-height:340px;padding:32px 22px}
  .vx-reel{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .vx-night{padding:88px 0;background:linear-gradient(0deg,rgba(6,12,24,.95) 35%,rgba(6,12,24,.45)),var(--bg) 70% center/cover}
  .vx-steps{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){.vx-hero-vid{display:none}.vx-dot{animation:none}.vx-door::before,.vx-reel img{transition:none}}
