/* Site-wide ambient video background.
   One fixed layer behind every page; the clip is pre-baked as a seamless
   38 s loop (the last 2 s crossfade into the first), so a single <video loop>
   never shows a restart seam. The poster paints first; the video fades in
   once it is actually playing. */
.site-bg{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;
  background:#0a0518 url(/bg/bg-v1-poster.jpg) center/cover no-repeat}
.site-bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.4s ease}
.site-bg video.on{opacity:1}
.site-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,5,24,.42) 0%,rgba(10,5,24,.58) 45%,rgba(10,5,24,.7) 100%)}
/* let the flow continue under the footer: glass instead of a solid block */
footer.site{background:rgba(18,8,41,.62);-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%)}
@media (prefers-reduced-motion:reduce){.site-bg video{display:none}}

/* ── homepage glass (Zeus-style): sections float over the video ── */
/* stats band: a frosted strip */
.proof{background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.03));
  -webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%);
  border-top-color:rgba(255,255,255,.12);border-bottom-color:rgba(255,255,255,.12)}
/* How we work: formerly a pale block, now a frosted glass panel with dark-glass cards */
#process{margin-inline:clamp(10px,2vw,28px);border-radius:clamp(22px,3vw,36px);
  background:linear-gradient(160deg,rgba(255,255,255,.09) 0%,rgba(255,255,255,.035) 55%,rgba(177,140,255,.07) 100%);
  -webkit-backdrop-filter:blur(24px) saturate(160%);backdrop-filter:blur(24px) saturate(160%);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 40px 90px -40px rgba(0,0,0,.7)}
#process .step-t{color:var(--vio-lt)}
#process .step p{color:var(--w-2)}
#process .step-n{color:var(--vio-lt)}
/* never show the browser's own play button / controls over the background
   (iOS Low Power Mode shows one on videos it refuses to autoplay) */
.site-bg video::-webkit-media-controls,
.site-bg video::-webkit-media-controls-panel,
.site-bg video::-webkit-media-controls-start-playback-button,
.site-bg video::-webkit-media-controls-overlay-play-button{display:none!important;-webkit-appearance:none;opacity:0!important}

/* ── mobile tap targets (homepage) ── */
/* service and industry cards: the whole card is the link, not just its title */
.pillar:has(.card-link){position:relative}
.pillar:has(.card-link)>:has(.card-link){position:static}
.card-link::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:3}
.card-link:focus-visible{outline:none}
.pillar:has(.card-link:focus-visible){outline:2px solid var(--vio-lt);outline-offset:3px}
/* contact email: 44px tap height without moving the layout */
#contact a[href^="mailto:"]{display:inline-block;padding-block:12px;margin-block:-12px}

/* ── hero 3D scene: fade into the video instead of painting the old page
   colour. The original 70px ::after gradient went to solid --ink, which
   read as a dark box once the video sat behind it. A mask fades the scene
   itself to transparent at the bottom and softly at the sides. ── */
.hero-scene::after{display:none}
.hero-scene{
  -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 110px),transparent),linear-gradient(to right,transparent,#000 7%,#000 93%,transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to bottom,#000 calc(100% - 110px),transparent),linear-gradient(to right,transparent,#000 7%,#000 93%,transparent);
  mask-composite:intersect}