/* =============================================================================
   VAULT AMBIENCE — section depth, glows, particle fields, grid, watermarks
   Apply on any Elementor Section via its "CSS Classes" field:
     vault-fx-glow      corner ambient accent glow (animated breathe)
     vault-fx-dots      drifting starfield / particle dots
     vault-fx-grid      faint blueprint grid overlay
     vault-fx-band      alternate surface band (separates from neighbors)
     vault-fx-spot      single soft top spotlight
   Add on a Heading/Section:
     vault-watermark    giant outline word bleeding at the edge (set text via ::before? no — see .vault-wm)
   These are pure CSS; nothing here blocks editing.
   ============================================================================= */

/* Anchor pseudo-effects + keep content above them. Scope everything to PAGE
   CONTENT (.vault-fullwidth) so header/footer Elementor templates are never
   given section padding, alternating bands, or dividers. */
body.vault-theme .elementor-section{ position:relative; }
body.vault-theme .vault-fullwidth .elementor-top-section > .elementor-container{ position:relative; z-index:2; }

/* ── HERO FULL-BLEED (definitive) ──────────────────────────────────────────
   The PickViz hero widgets always span the full viewport width, whatever the
   Elementor section/column is set to. The inner content still centers via its
   own max-width. Covers Elementor's section, flexbox-container and the raw
   widget wrapper so no layout mode can box the hero. */
/* Hero fills its container. Full width comes from the SECTION being stretched
   with content_width:full (set in the demo importer / Elementor section settings)
   — NOT a CSS 100vw hack, which overflows by the scrollbar width and shifts the
   hero sideways. The hero's own inner max-width keeps the content centered. */
body .elementor-widget-pickviz_agency_hero, body .elementor-widget-pickviz_hero{ width:100%; max-width:100%; margin:0; }
body .elementor-widget-pickviz_agency_hero > .elementor-widget-container, body .elementor-widget-pickviz_hero > .elementor-widget-container{ padding:0 !important; width:100%; max-width:100%; margin:0; }
body .pvz-ah, body .pvz-ahm, body .pvz-ahx, body .pvz-hero{ width:100%; max-width:100%; margin:0; }
/* Belt-and-braces: if a hero lands in a boxed column, break it out to the row
   width using the document width (no scrollbar overflow like 100vw). */
body.vault-theme .elementor-widget-pickviz_agency_hero, body.vault-theme .elementor-widget-pickviz_hero{ align-self:stretch; }
/* Kill the top-of-section divider line directly above a hero (looked like a seam). */
body.vault-theme .vault-fullwidth .elementor-top-section:has(.pvz-ah,.pvz-ahm,.pvz-ahx,.pvz-hero) + .elementor-top-section::before,
body.vault-theme .vault-fullwidth .elementor-top-section:has(.pvz-ah,.pvz-ahm,.pvz-ahx,.pvz-hero)::before,
body.vault-theme .vault-fullwidth .e-con:has(.pvz-ah,.pvz-ahm,.pvz-ahx,.pvz-hero) + .e-con::before,
body.vault-theme .vault-fullwidth .e-con:has(.pvz-ah,.pvz-ahm,.pvz-ahx,.pvz-hero)::before{ display:none; }

/* Force true viewport centering and 100vw width for sections AND containers holding
   the hero. Applies globally (desktop + mobile) so it breaks out of boxed page
   templates. !important overrides Elementor's inline stretch-section JS. */
body.vault-theme .elementor-top-section:has(.pvz-ah,.pvz-ahm,.pvz-ahx,.pvz-hero),
body.vault-theme .e-con:has(.pvz-ah,.pvz-ahm,.pvz-ahx,.pvz-hero){
	position:relative !important; left:50% !important; width:100vw !important; max-width:100vw !important;
	transform:translateX(-50%) !important; margin-left:0 !important; margin-right:0 !important;
}

/* Remove the inner container max-width cap (normally min(1240px,100%-48px)) for hero
   sections ONLY — other sections keep their boxed content width. */
body.vault-theme .elementor-top-section:has(.pvz-ah,.pvz-ahm,.pvz-ahx,.pvz-hero) > .elementor-container,
body.vault-theme .e-con:has(.pvz-ah,.pvz-ahm,.pvz-ahx,.pvz-hero) > .e-con-inner{
	max-width:none !important; width:100% !important;
}

/* ── Sections are TRANSPARENT by default so the site-wide ambient particle layer
      shows through. Even sections get a faint translucent tint for gentle
      separation. :where() = ZERO specificity, so an explicit Elementor bg wins. ── */
:where(body.vault-theme .vault-fullwidth .elementor-top-section){ background:transparent; }
:where(body.vault-theme .vault-fullwidth .elementor-top-section:nth-of-type(even)){ background:color-mix(in srgb, var(--vt-surface) 45%, transparent); }
body.vault-theme .vault-fullwidth .elementor-top-section.vault-fx-band{ background:color-mix(in srgb, var(--vt-surface) 70%, transparent) !important; }
/* Soft divider glow between stacked content sections */
body.vault-theme .vault-fullwidth .elementor-top-section + .elementor-top-section::before{
	content:""; position:absolute; top:0; left:0; right:0; height:1px; z-index:3;
	background:linear-gradient(90deg,transparent,var(--vt-accent-line),transparent); opacity:.5;
}

/* ── Corner ambient glow (the lime/gold radial + breathe) ── */
.vault-fx-glow::before,
.vault-fx-glow::after{
	content:""; position:absolute; z-index:0; pointer-events:none;
	width:52vw; height:52vw; max-width:720px; max-height:720px; border-radius:50%;
	background:radial-gradient(circle, color-mix(in srgb, var(--vt-accent) 24%, transparent) 0%, transparent 62%);
	filter:blur(36px); opacity:1; animation:vault-breathe 9s ease-in-out infinite;
}
.vault-fx-glow::before{ top:-16%; left:-14%; }
.vault-fx-glow::after{ bottom:-20%; right:-14%; animation-delay:-4.5s; }
.vault-fx-glow--one::after{ display:none; }
@keyframes vault-breathe{ 0%,100%{ transform:scale(1); opacity:.7; } 50%{ transform:scale(1.18); opacity:1; } }

/* ═══════════════════════════════════════════════════════════════════════════
   SITE-WIDE AMBIENT PARTICLE BACKGROUND (fixed, behind everything)
   ═══════════════════════════════════════════════════════════════════════════ */
.vault-bg-fx{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
body.vault-theme > #page,
body.vault-theme .vault-site{ position:relative; z-index:1; }
.vault-bg-dots{ position:absolute; inset:-10%; opacity:.5;
	background-image:
		radial-gradient(1.6px 1.6px at 15% 22%, var(--vt-accent) 50%, transparent 51%),
		radial-gradient(1.6px 1.6px at 68% 58%, var(--vt-accent) 50%, transparent 51%),
		radial-gradient(1.2px 1.2px at 42% 82%, var(--vt-accent) 50%, transparent 51%),
		radial-gradient(1.2px 1.2px at 85% 18%, var(--vt-accent) 50%, transparent 51%),
		radial-gradient(1.6px 1.6px at 52% 12%, var(--vt-accent) 50%, transparent 51%),
		radial-gradient(1.2px 1.2px at 8% 60%, var(--vt-accent) 50%, transparent 51%),
		radial-gradient(1.4px 1.4px at 30% 45%, var(--vt-accent) 50%, transparent 51%),
		radial-gradient(1.2px 1.2px at 92% 76%, var(--vt-accent) 50%, transparent 51%);
	background-size:300px 300px; background-repeat:repeat; animation:vault-bg-drift 60s linear infinite; }
html[data-vault-mode="light"] .vault-bg-dots{ opacity:.32; }
.vault-bg-glow{ position:absolute; inset:0;
	background:
		radial-gradient(45vw 45vw at 12% 8%, var(--vt-accent-soft), transparent 60%),
		radial-gradient(40vw 40vw at 88% 92%, var(--vt-accent-soft), transparent 60%);
	opacity:.7; animation:vault-bg-breathe 14s ease-in-out infinite; }
@keyframes vault-bg-drift{ from{ background-position:0 0; } to{ background-position:300px 600px; } }
@keyframes vault-bg-breathe{ 0%,100%{ opacity:.5; } 50%{ opacity:.85; } }
@media (prefers-reduced-motion:reduce){ .vault-bg-dots,.vault-bg-glow{ animation:none; } }

/* ── Particle dot-field (drifting stars) ── */
.vault-fx-dots{ position:relative; }
.vault-fx-dots > .vault-dotlayer,
.vault-fx-dots::after{
	content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.7;
	background-image:
		radial-gradient(1.5px 1.5px at 20% 30%, var(--vt-accent) 50%, transparent 51%),
		radial-gradient(1.5px 1.5px at 70% 60%, var(--vt-accent) 50%, transparent 51%),
		radial-gradient(1px 1px at 40% 80%, var(--vt-accent) 50%, transparent 51%),
		radial-gradient(1px 1px at 85% 20%, var(--vt-accent) 50%, transparent 51%),
		radial-gradient(1.5px 1.5px at 55% 15%, var(--vt-accent) 50%, transparent 51%),
		radial-gradient(1px 1px at 10% 65%, var(--vt-accent) 50%, transparent 51%);
	background-size:220px 220px; background-repeat:repeat;
	animation:vault-drift 40s linear infinite;
	-webkit-mask-image:radial-gradient(80% 80% at 50% 40%, #000 30%, transparent 75%);
	mask-image:radial-gradient(80% 80% at 50% 40%, #000 30%, transparent 75%);
}
@keyframes vault-drift{ from{ background-position:0 0; } to{ background-position:220px 440px; } }

/* ── Blueprint grid overlay ── */
.vault-fx-grid::before{
	content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.7;
	background-image:
		linear-gradient(var(--vt-line-strong,rgba(255,255,255,.16)) 1px, transparent 1px),
		linear-gradient(90deg, var(--vt-line-strong,rgba(255,255,255,.16)) 1px, transparent 1px);
	background-size:66px 66px;
	-webkit-mask-image:radial-gradient(95% 78% at 50% 30%, #000 15%, transparent 82%);
	mask-image:radial-gradient(95% 78% at 50% 30%, #000 15%, transparent 82%);
}

/* ── Single soft top spotlight ── */
.vault-fx-spot::before{
	content:""; position:absolute; top:0; left:0; right:0; height:60%; z-index:0; pointer-events:none;
	background:radial-gradient(60% 100% at 50% 0%, var(--vt-accent-soft), transparent 70%);
}

/* ── Giant outline watermark (like "STEPS") ── */
.vault-wm{ position:relative; }
.vault-wm-text{ position:absolute; left:50%; bottom:-.2em; transform:translateX(-50%); z-index:0;
	font:900 clamp(120px,22vw,340px)/.8 var(--v-font-display,var(--vt-font-head)); letter-spacing:.01em; white-space:nowrap;
	color:transparent; -webkit-text-stroke:1px var(--vt-accent-line); pointer-events:none; user-select:none; opacity:.8; }
.vault-wm-text--fill{ color:var(--vt-accent); -webkit-text-stroke:0; opacity:.10; }

/* ── Section eyebrow like "{07} Steps" ── */
.vault-kicker{ display:inline-flex; align-items:center; gap:9px; font:700 12px/1 var(--v-font-ui);
	letter-spacing:.16em; text-transform:uppercase; color:var(--vt-muted); }
.vault-kicker::before{ content:""; width:8px; height:8px; border-radius:50%;
	background:var(--vt-accent); box-shadow:0 0 10px var(--vt-accent); }
.vault-kicker b{ color:var(--vt-accent); font-weight:700; }

/* Split heading: first part solid, rest muted (Nimo style) */
.vault-splith{ font-family:var(--v-font-display); font-weight:800; letter-spacing:-.02em; color:var(--vt-text); }
.vault-splith .mut{ color:var(--vt-muted); }

/* ═══════════════════════════════════════════════════════════════════════════
   PAGE HEADER BANNER + BREADCRUMBS (inner pages)
   ═══════════════════════════════════════════════════════════════════════════ */
.vault-pagehead{ position:relative; overflow:hidden; padding:clamp(48px,7vw,88px) 24px clamp(36px,5vw,56px);
	background:var(--vt-surface); border-bottom:1px solid var(--vt-line); text-align:center; }
.vault-pagehead-in{ position:relative; z-index:2; max-width:1000px; margin:0 auto; }
.vault-pagehead-title{ font:800 clamp(30px,4.6vw,56px)/1.05 var(--v-font-display); letter-spacing:-.02em; color:var(--vt-text); margin:0; text-wrap:balance; }
.vault-crumbs{ display:inline-flex; align-items:center; gap:8px; margin-top:16px; font-size:13px; flex-wrap:wrap; justify-content:center;
	background:color-mix(in srgb,var(--vt-canvas) 60%,transparent); border:1px solid var(--vt-line); border-radius:30px; padding:8px 16px; }
.vault-crumbs a{ color:var(--vt-muted); text-decoration:none; transition:color .15s; }
.vault-crumbs a:hover{ color:var(--vt-accent); }
.vault-crumbs-sep{ color:var(--vt-faint); }
.vault-crumbs-cur{ color:var(--vt-text); font-weight:600; }

/* ═══════════════════════════════════════════════════════════════════════════
   BUTTON STYLE PRESETS (body.vault-btn-*)
   ═══════════════════════════════════════════════════════════════════════════ */
body[class*="vault-btn-"] .vault-btn--gold,
body[class*="vault-btn-"] .pvzh-cta,
body[class*="vault-btn-"] .pvz-ah-cta{ transition:transform .18s cubic-bezier(.2,.8,.25,1), box-shadow .25s, filter .2s, background .2s, color .2s; }
/* solid */
body.vault-btn-solid .vault-btn--gold,body.vault-btn-solid .pvzh-cta{ background:var(--vt-accent) !important; box-shadow:none; }
/* outline */
body.vault-btn-outline .vault-btn--gold,body.vault-btn-outline .pvzh-cta{ background:transparent !important; color:var(--vt-accent) !important;
	border:1.5px solid var(--vt-accent); box-shadow:none; }
body.vault-btn-outline .vault-btn--gold:hover,body.vault-btn-outline .pvzh-cta:hover{ background:var(--vt-accent) !important; color:var(--vt-accent-ink) !important; }
/* pill */
body.vault-btn-pill .vault-btn--gold,body.vault-btn-pill .pvzh-cta,body.vault-btn-pill .pvz-ah-cta{ border-radius:999px !important; }
/* sharp */
body.vault-btn-sharp .vault-btn--gold,body.vault-btn-sharp .pvzh-cta,body.vault-btn-sharp .pvz-ah-cta{ border-radius:6px !important; }
/* nicer default hover for all */
body[class*="vault-btn-"] .pvzh-cta:hover,body[class*="vault-btn-"] .vault-btn--gold:hover{ transform:translateY(-2px); }
/* arrow box — hide the leading icon, add a trailing tile that slides right on hover */
body.vault-btn-arrow .pvz-ah-cta .pvz-ah-cta-ic,
body.vault-btn-arrow .vault-btn--gold > span:first-child:empty{ display:none; }
body.vault-btn-arrow .vault-btn--gold,
body.vault-btn-arrow .pvzh-cta,
body.vault-btn-arrow .pvz-ah-cta{ position:relative; overflow:hidden; padding-right:56px !important; }
body.vault-btn-arrow .vault-btn--gold::after,
body.vault-btn-arrow .pvzh-cta::after,
body.vault-btn-arrow .pvz-ah-cta::after{ content:"\2192"; position:absolute; right:5px; top:5px; bottom:5px; width:34px;
	display:grid; place-items:center; border-radius:8px; font-size:16px; background:rgba(0,0,0,.22);
	transition:transform .34s cubic-bezier(.2,.7,.2,1); }
body.vault-btn-arrow .vault-btn--gold:hover::after,
body.vault-btn-arrow .pvzh-cta:hover::after,
body.vault-btn-arrow .pvz-ah-cta:hover::after{ transform:translateX(5px); }
body.vault-btn-arrow .pvzh-cta:hover,
body.vault-btn-arrow .vault-btn--gold:hover,
body.vault-btn-arrow .pvz-ah-cta:hover{ transform:none; }
/* plain — remove every icon/tile so buttons are clean text-only */
body.vault-btn-plain .pvz-ah-cta-ic,
body.vault-btn-plain .pvz-as-btn-box,
body.vault-btn-plain .pvz-ahm-cta-box,
body.vault-btn-plain .vault-btn--gold > span:empty{ display:none !important; }
body.vault-btn-plain .pvz-ah-cta::after,
body.vault-btn-plain .vault-btn--gold::after,
body.vault-btn-plain .pvzh-cta::after{ content:none !important; }
body.vault-btn-plain .pvz-as-btn-lbl,
body.vault-btn-plain .pvz-ahm-cta-lbl{ padding:15px 22px !important; }
body.vault-btn-plain .pvz-ah-cta,
body.vault-btn-plain .vault-btn--gold,
body.vault-btn-plain .pvzh-cta{ padding-right:22px !important; }

/* Arrow icon-pill color presets — apply to arrow-box buttons AND the structured
   tiles used by About Split / Medallion / Minimal heroes. */
body.vault-arrowpill-white .pvz-ah-cta::after,
body.vault-arrowpill-white .vault-btn--gold::after,
body.vault-arrowpill-white .pvzh-cta::after,
body.vault-arrowpill-white .pvz-as-btn-box,
body.vault-arrowpill-white .pvz-ahm-cta-box{ background:#fff !important; color:#0e0f12 !important; }
body.vault-arrowpill-black .pvz-ah-cta::after,
body.vault-arrowpill-black .vault-btn--gold::after,
body.vault-arrowpill-black .pvzh-cta::after,
body.vault-arrowpill-black .pvz-as-btn-box,
body.vault-arrowpill-black .pvz-ahm-cta-box{ background:#14151a !important; color:#fff !important; }
/* accent = default (already gold/accent via each component) */

/* ── 404 page ─────────────────────────────────────────────────────────── */
.vault-404{ position:relative; min-height:78vh; display:flex; align-items:center; justify-content:center; padding:80px 24px; overflow:hidden; }
.vault-404-inner{ position:relative; z-index:2; max-width:640px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:18px; }
.vault-404-logo{ line-height:0; margin-bottom:4px; }
.vault-404-art{ width:min(420px,90%); }
.vault-404-art svg{ width:100%; height:auto; filter:drop-shadow(0 30px 60px rgba(0,0,0,.5)); }
.v404-ticket{ fill:var(--vt-surface); stroke:var(--vt-line-strong); stroke-width:1.5; }
.v404-l1{ fill:var(--vt-line); } .v404-l2{ fill:var(--vt-line-strong); }
.v404-accent{ fill:var(--vt-accent); }
.vault-404-title{ font:800 clamp(28px,4vw,44px)/1.1 var(--v-font-display); color:var(--vt-text); margin:6px 0 0; }
.vault-404-sub{ color:var(--vt-muted); font-size:16px; line-height:1.6; max-width:46ch; margin:0; }
.vault-404-actions{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin-top:6px; }
.vault-404-search{ display:flex; gap:8px; margin-top:14px; width:min(400px,100%); }
.vault-404-search input{ flex:1; background:var(--vt-surface); border:1px solid var(--vt-line); border-radius:12px; padding:13px 16px; color:var(--vt-text); }
.vault-404-search input:focus{ outline:none; border-color:var(--vt-accent); box-shadow:0 0 0 3px var(--vt-accent-soft); }
.vault-404-search button{ width:50px; border:0; border-radius:12px; cursor:pointer; font-size:18px; color:var(--vt-accent-ink);
	background:linear-gradient(135deg,var(--vt-accent),var(--vt-accent-2)); }

/* ── Site loader (preloader) ──────────────────────────────────────────── */
.vault-loader{ position:fixed; inset:0; z-index:100000; display:grid; place-items:center; background:var(--vt-canvas,#0b0c0f);
	transition:opacity .5s ease, visibility .5s; }
.vault-loader.is-done{ opacity:0; visibility:hidden; }
.vault-loader-in{ display:flex; flex-direction:column; align-items:center; gap:18px; }
.vault-loader-mark{ width:56px; height:56px; animation:vault-load-pulse 1.3s ease-in-out infinite; }
@keyframes vault-load-pulse{ 0%,100%{ transform:scale(.9); opacity:.6; } 50%{ transform:scale(1.05); opacity:1; } }
.vault-loader-bar{ width:120px; height:3px; border-radius:3px; background:var(--vt-line); overflow:hidden; }
.vault-loader-bar i{ display:block; height:100%; width:40%; border-radius:3px; background:linear-gradient(90deg,var(--vt-accent),var(--vt-accent-2));
	animation:vault-load-bar 1.1s ease-in-out infinite; }
@keyframes vault-load-bar{ 0%{ transform:translateX(-120%); } 100%{ transform:translateX(320%); } }
/* Spinner ring */
.vault-loader-ring{ width:46px; height:46px; border-radius:50%; border:3px solid var(--vt-line); border-top-color:var(--vt-accent); animation:vault-spin .8s linear infinite; }
@keyframes vault-spin{ to{ transform:rotate(360deg); } }
/* Bouncing dots */
.vault-loader-dots{ display:inline-flex; gap:9px; }
.vault-loader-dots i{ width:12px; height:12px; border-radius:50%; background:linear-gradient(135deg,var(--vt-accent),var(--vt-accent-2)); animation:vault-load-pulse 1s infinite; }
.vault-loader-dots i:nth-child(2){ animation-delay:.15s; } .vault-loader-dots i:nth-child(3){ animation-delay:.3s; }
/* Wordmark wipe */
.vault-loader-word{ font:800 40px/1 var(--v-font-display); letter-spacing:.02em; color:var(--vt-text);
	-webkit-mask:linear-gradient(90deg,#000 40%,#0004 50%,#000 60%) right/280% 100%; mask:linear-gradient(90deg,#000 40%,#0004 50%,#000 60%) right/280% 100%;
	animation:vault-word-wipe 1.4s ease-in-out infinite; }
.vault-loader-word em{ font-style:normal; color:var(--vt-accent); }
@keyframes vault-word-wipe{ from{ -webkit-mask-position:left; mask-position:left; } to{ -webkit-mask-position:right; mask-position:right; } }
/* Curtain reveal */
.vault-loader--curtain{ background:transparent; }
.vault-loader-curtain{ position:absolute; top:0; bottom:0; width:50%; background:var(--vt-canvas,#0b0c0f); transition:transform .6s cubic-bezier(.7,0,.3,1); }
.vault-loader-curtain{ left:0; } .vault-loader-curtain--b{ left:auto; right:0; }
.vault-loader--curtain.is-done .vault-loader-curtain{ transform:translateX(-100%); }
.vault-loader--curtain.is-done .vault-loader-curtain--b{ transform:translateX(100%); }
@media (prefers-reduced-motion:reduce){ .vault-loader-mark,.vault-loader-bar i,.vault-loader-ring,.vault-loader-dots i,.vault-loader-word{ animation:none; } }

/* ── Scroll-to-top button ── */
.vault-scrolltop{ position:fixed; right:22px; bottom:22px; z-index:900; width:46px; height:46px; border:0; cursor:pointer;
	border-radius:14px; color:var(--vt-accent-ink); font-size:18px; font-weight:800;
	background:linear-gradient(135deg,var(--vt-accent),var(--vt-accent-2));
	box-shadow:0 14px 30px -12px var(--vt-accent-2); opacity:0; transform:translateY(14px); pointer-events:none;
	transition:opacity .3s, transform .3s; }
.vault-scrolltop.show{ opacity:1; transform:none; pointer-events:auto; }

/* ── Light-mode toggle button (header) ── */
.vault-mode-toggle{ width:38px; height:38px; border-radius:11px; cursor:pointer; display:grid; place-items:center;
	background:var(--vt-surface); border:1px solid var(--vt-line); color:var(--vt-text); position:relative; overflow:hidden; }
.vault-mode-toggle span{ position:absolute; transition:transform .35s cubic-bezier(.2,.8,.25,1), opacity .3s; font-size:16px; }
html[data-vault-mode="dark"] .vmt-sun{ transform:translateY(140%); opacity:0; }
html[data-vault-mode="dark"] .vmt-moon{ transform:none; opacity:1; color:var(--vt-accent); }
html[data-vault-mode="light"] .vmt-moon{ transform:translateY(-140%); opacity:0; }
html[data-vault-mode="light"] .vmt-sun{ transform:none; opacity:1; color:var(--vt-accent); }

/* ═══════════════════════════════════════════════════════════════════════════
   LOGO SYSTEM — custom logo (light/dark/sticky swap) or text wordmark
   ═══════════════════════════════════════════════════════════════════════════ */
.vault-logoset{ display:inline-flex; align-items:center; line-height:0; max-width:100%; }
/* Auto-fit: never exceed the header's designated logo box, scale down gracefully */
.vault-logo{ height:auto; width:auto; max-height:clamp(30px,4.4vw,44px); max-width:min(200px,42vw); object-fit:contain; display:none; }
.vault-brand-logo,.pvzh-brand{ flex-shrink:0; max-width:220px; overflow:hidden; }
/* Default: show dark logo (dark is the theme default). Once JS adds data-vault-mode, mode-specific rules take over. */
.vault-logo--dark{ display:block; }
html[data-vault-mode="light"] .vault-logo--dark{ display:none; }
html[data-vault-mode="light"] .vault-logo--light{ display:block; }
html[data-vault-mode="dark"]  .vault-logo--dark{ display:block; }
html[data-vault-mode="dark"]  .vault-logo--light{ display:none; }
/* if no dark provided, --dark falls back to same src as light, so this is safe */
.vault-logo--sticky{ display:none; }
.pvzh.is-stuck .vault-logo--sticky,
.vault-header.is-stuck .vault-logo--sticky{ display:block; }
.pvzh.is-stuck .vault-logoset .vault-logo:not(.vault-logo--sticky),
.vault-header.is-stuck .vault-logoset .vault-logo:not(.vault-logo--sticky){ display:none; }
/* Mobile square logo swap */
.vault-logo--mobile{ max-height:38px; max-width:44px; }
@media (max-width:600px){
	.vault-logoset.has-mobile .vault-logo:not(.vault-logo--mobile){ display:none !important; }
	.vault-logoset.has-mobile .vault-logo--mobile{ display:block !important; }
}

/* Text wordmark fallback (when logo removed) */
.vault-wordmark{ font:800 22px/1 var(--v-font-display,var(--vt-font-head)); letter-spacing:.02em; color:var(--vt-text); }
.vault-wordmark em{ font-style:normal; color:var(--vt-accent); }
/* Footer logo always reads on the dark footer */
.vault-footer .vault-logo--light{ display:none; }
.vault-footer .vault-logo--dark{ display:block; }
.vault-footer .vault-wordmark{ color:#f3efe6; }

/* ═══════════════════════════════════════════════════════════════════════════
   FULL-BLEED SECTIONS — section backgrounds span the viewport; content centered
   ═══════════════════════════════════════════════════════════════════════════ */
body.vault-theme .vault-fullwidth{ width:100%; max-width:100%; overflow-x:clip; }
/* TRUE full-bleed: force every top-level section background edge-to-edge with the
   100vw negative-margin technique (works even if Elementor's stretch JS/cache is
   stale). Inner content stays centered + readable. */
body.vault-theme .vault-fullwidth > .elementor > .elementor-section,
body.vault-theme .vault-fullwidth > .elementor .elementor-top-section,
body.vault-theme .vault-fullwidth > .elementor > .e-con{
	width:100vw !important; max-width:100vw !important;
	margin-left:calc(50% - 50vw) !important; margin-right:calc(50% - 50vw) !important;
}
body.vault-theme .vault-fullwidth .elementor-section > .elementor-container,
body.vault-theme .vault-fullwidth > .elementor > .e-con > .e-con-inner{
	width:100%; max-width:min(1240px, 100% - 48px); margin-inline:auto;
}
/* Header/footer templates: content spans full width (no boxed container).
   These sit OUTSIDE .vault-fullwidth, so they need their own clip. */
/* NOTE: this used to also set `overflow-x:clip` on the header. Per the CSS
   Overflow spec, an element can't have overflow-x:clip with overflow-y left
   at its default 'visible' — the browser auto-promotes overflow-y to 'auto',
   turning the header into a clipping container for BOTH axes. That silently
   cut off anything extending below the header's own box: the desktop hover
   dropdown (closes the instant it would render below the header) and the
   entire mobile nav panel (never visible/clickable at all). The global
   `html,body{overflow-x:hidden}` safety net already covers the mobile
   horizontal-scroll case this was originally added for, without that
   collateral damage — so it's removed here rather than fixed in place. */
body.vault-theme .vault-el-header,
body.vault-theme .vault-el-footer{ max-width:100%; }
body.vault-theme .vault-el-header .elementor-container,
body.vault-theme .vault-el-footer .elementor-container{ max-width:100% !important; }

/* Button ink must stay dark — override the global gold link color */
body.vault-theme a.pvzh-cta,
body.vault-theme a.pvzh-cta:visited,
body.vault-theme a.vault-btn--gold,
body.vault-theme a.pvz-ah-cta,
body.vault-theme a.pvz-as-btn,
body.vault-theme a.pvz-bn-btn{ color:var(--vt-accent-ink,#20160a) !important; }
/* Full-bleed backgrounds: force every top-level section/container to viewport
   width, keep the inner content centered. Covers legacy sections AND flexbox
   containers, and neutralizes any inherited max-width/margins. */
body.vault-theme .vault-fullwidth > .elementor,
body.vault-theme .vault-fullwidth .elementor > .elementor-section-wrap,
body.vault-theme .vault-fullwidth .elementor-inner{ max-width:100% !important; width:100% !important; margin:0 !important; padding:0 !important; }
body.vault-theme .vault-fullwidth .elementor-top-section,
body.vault-theme .vault-fullwidth > .elementor > .e-con{ width:100% !important; max-width:100% !important; margin-inline:0 !important; }
/* Centered readable content inside full-bleed sections */
body.vault-theme .vault-fullwidth .elementor-section-boxed > .elementor-container,
body.vault-theme .vault-fullwidth > .elementor > .e-con-boxed > .e-con-inner{
	max-width:min(1240px, 100% - 48px); margin-inline:auto;
}
@media (max-width:600px){
	body.vault-theme .vault-fullwidth .elementor-section-boxed > .elementor-container,
	body.vault-theme .vault-fullwidth > .elementor > .e-con-boxed > .e-con-inner{ max-width:calc(100% - 32px); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   FOOTER — force full width (widget template OR fallback) + payment/trust row
   ═══════════════════════════════════════════════════════════════════════════ */
body.vault-theme .vault-footer,
body.vault-theme .vault-el-footer,
body.vault-theme .vault-el-footer .elementor-section,
body.vault-theme .vault-el-footer .pvzf{ width:100% !important; max-width:100% !important; margin-inline:0 !important; }
body.vault-theme .vault-el-footer .elementor-section-boxed > .elementor-container{ max-width:1200px; margin-inline:auto; }

.vault-footer-trust{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
	padding:18px 0; border-top:1px solid var(--vt-line); }
.vault-paycards{ display:flex; gap:8px; flex-wrap:wrap; }
.vault-paycard{ display:inline-flex; align-items:center; justify-content:center; height:30px; min-width:46px; padding:0 10px; border-radius:7px;
	background:#f2f3f5; border:1px solid rgba(0,0,0,.08); }
.vault-paycard svg{ display:block; }
.vpay-word{ font:800 12px/1 var(--v-font-ui); letter-spacing:.02em; color:#1a1c22; white-space:nowrap; }
.vault-paycard .vpay-word[style*="stripe"]{ text-transform:lowercase; }
/* Dark mode: dark pills. Brand wordmarks are re-toned to a legible light colour
   (their native navy/blue/purple would vanish on a dark pill). Mastercard keeps
   its coloured circles; the wordmarks stay readable in a clean monochrome. */
html[data-vault-mode="dark"] .vault-paycard,
.pvzf .vault-paycard{ background:#1b1d25; border-color:rgba(255,255,255,.1); box-shadow:none; }
html[data-vault-mode="dark"] .vault-paycard .vpay-word,
html[data-vault-mode="dark"] .vault-paycard .vpay-word span,
.pvzf .vault-paycard .vpay-word,
.pvzf .vault-paycard .vpay-word span{ color:#e8eaee !important; }
/* Keep a hint of brand tint where it still reads on dark. */
html[data-vault-mode="dark"] .vault-paycard .vpay-word[style*="635bff"],
.pvzf .vault-paycard .vpay-word[style*="635bff"]{ color:#a9a4ff !important; }
.vault-trustchips{ display:flex; gap:10px; flex-wrap:wrap; }
.vault-trustchip{ display:inline-flex; align-items:center; gap:7px; font:600 12px/1 var(--v-font-ui); color:var(--vt-muted);
	border:1px solid var(--vt-line); border-radius:20px; padding:7px 13px; }
.vault-trustchip::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--vt-win,#22c55e); box-shadow:0 0 8px var(--vt-win,#22c55e); }

/* ── Footer newsletter (WPForms, restyled to the theme) ─────────────────── */
.vault-news{ margin-top:20px; }
.vault-news-text{ color:var(--vt-muted); font-size:13px; line-height:1.55; margin:0 0 12px; max-width:280px; }
.vault-news .wpforms-container{ margin:0 !important; }
.vault-news .wpforms-field-label{ display:none !important; }
.vault-news .wpforms-form .wpforms-field{ padding:0 0 10px !important; }
.vault-news input[type=email],.vault-news input[type=text]{
	width:100% !important; background:var(--vt-surface) !important; border:1px solid var(--vt-line) !important;
	border-radius:10px !important; padding:12px 14px !important; color:var(--vt-text) !important; font-size:14px !important; }
.vault-news input:focus{ outline:none !important; border-color:var(--vt-accent) !important; box-shadow:0 0 0 3px var(--vt-accent-soft) !important; }
.vault-news .wpforms-submit,.vault-news button[type=submit]{
	width:100% !important; border:0 !important; cursor:pointer; font-weight:800 !important; font-size:14px !important;
	color:var(--vt-accent-ink) !important; background:linear-gradient(135deg,var(--vt-accent),var(--vt-accent-2)) !important;
	border-radius:10px !important; padding:13px 18px !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   LIQUID-GLASS STICKY HEADER (dark-friendly)
   ═══════════════════════════════════════════════════════════════════════════ */
/* Sticky wrapper (widget header location) — the reliable sticky mechanism */
body.vault-theme .vault-sticky-wrap{ position:sticky; top:0; z-index:950; transition:transform .35s cubic-bezier(.2,.8,.25,1); will-change:transform; }
body.vault-theme .vault-sticky-wrap.is-hidden{ transform:translateY(-108%); }
/* Neutralize transforms on the header's own Elementor section so sticky isn't trapped */
body.vault-theme .vault-el-header .elementor-section,
body.vault-theme .vault-el-header .elementor-widget-wrap{ transform:none !important; }

.vault-header{ --glass:color-mix(in srgb, var(--vt-canvas) 55%, transparent); }
.vault-header.is-stuck{
	background:var(--glass) !important;
	backdrop-filter:blur(18px) saturate(1.4); -webkit-backdrop-filter:blur(18px) saturate(1.4);
	border-bottom:1px solid color-mix(in srgb, var(--vt-accent) 22%, transparent);
	box-shadow:0 10px 40px -18px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.06);
}
html[data-vault-mode="light"] .vault-header.is-stuck{ box-shadow:0 10px 34px -20px rgba(20,22,26,.4); }
/* glass sheen line */
.vault-header.is-stuck::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
	background:linear-gradient(90deg,transparent,var(--vt-accent-line),transparent); }

/* ═══════════════════════════════════════════════════════════════════════════
   STICKY SOCIAL DOCK
   ═══════════════════════════════════════════════════════════════════════════ */
.vault-socialdock{ position:fixed; z-index:850; display:flex; gap:6px; }
.vault-socialdock .vault-soc{ width:38px; height:38px; display:grid; place-items:center; border-radius:11px;
	color:var(--vt-muted); background:color-mix(in srgb,var(--vt-surface) 70%,transparent);
	backdrop-filter:blur(8px); border:1px solid var(--vt-line); transition:transform .2s cubic-bezier(.2,.8,.25,1), color .2s, border-color .2s; }
.vault-socialdock .vault-soc:hover{ color:var(--vt-accent-ink); background:linear-gradient(135deg,var(--vt-accent),var(--vt-accent-2));
	border-color:transparent; transform:translateY(-2px) scale(1.06); }
.vault-socialdock--left,.vault-socialdock--right{ top:50%; transform:translateY(-50%); flex-direction:column; }
.vault-socialdock--left{ left:16px; }
.vault-socialdock--right{ right:16px; }
.vault-socialdock--bottom{ left:50%; bottom:16px; transform:translateX(-50%); flex-direction:row;
	padding:6px; border-radius:16px; background:color-mix(in srgb,var(--vt-surface) 80%,transparent);
	backdrop-filter:blur(10px); border:1px solid var(--vt-line); }
@media (max-width:900px){ .vault-socialdock--left,.vault-socialdock--right{ display:none; } }

/* ── Social icons: shape (body.vault-socsh-*) + color preset (body.vault-soc-*) ─ */
.vault-soc{ transition:color .18s, background .18s, border-color .18s, transform .18s, box-shadow .18s; }
.vault-soc:hover{ transform:translateY(-2px); }
/* shapes */
body.vault-socsh-rounded .vault-soc{ border-radius:11px; }
body.vault-socsh-circle  .vault-soc{ border-radius:50%; }
body.vault-socsh-square  .vault-soc{ border-radius:4px; }
body:not(.vault-socsh-bare) .vault-socialdock .vault-soc{ /* dock keeps its chip regardless */ }

/* BRAND (default) — real network colors visible AT REST, chip tinted to match */
body.vault-soc-brand .vault-soc--facebook{ color:#1877f2; }
body.vault-soc-brand .vault-soc--twitter{ color:var(--vt-text); }
body.vault-soc-brand .vault-soc--instagram{ color:#e1306c; }
body.vault-soc-brand .vault-soc--youtube{ color:#ff0000; }
body.vault-soc-brand .vault-soc--telegram{ color:#26a5e4; }
body.vault-soc-brand .vault-soc--discord{ color:#5865f2; }
body.vault-soc-brand .vault-soc--tiktok{ color:#0f0f10; }
html[data-vault-mode="dark"] body.vault-soc-brand .vault-soc--tiktok,
.vault-footer body.vault-soc-brand .vault-soc--tiktok{ color:#25f4ee; }
/* on hover the chip fills with the network color */
body.vault-soc-brand.vault-socsh-rounded .vault-soc:hover,
body.vault-soc-brand.vault-socsh-circle .vault-soc:hover,
body.vault-soc-brand.vault-socsh-square .vault-soc:hover{ color:#fff; }
body.vault-soc-brand .vault-soc--facebook:hover{ background:#1877f2; border-color:#1877f2; }
body.vault-soc-brand .vault-soc--instagram:hover{ background:#e1306c; border-color:#e1306c; }
body.vault-soc-brand .vault-soc--youtube:hover{ background:#ff0000; border-color:#ff0000; }
body.vault-soc-brand .vault-soc--telegram:hover{ background:#26a5e4; border-color:#26a5e4; }
body.vault-soc-brand .vault-soc--discord:hover{ background:#5865f2; border-color:#5865f2; }
body.vault-soc-brand .vault-soc--twitter:hover{ background:#0f1419; border-color:#0f1419; color:#fff; }
body.vault-soc-brand .vault-soc--tiktok:hover{ background:#010101; border-color:#010101; color:#25f4ee; }

/* ACCENT */
body.vault-soc-accent .vault-soc{ color:var(--vt-muted); }
body.vault-soc-accent .vault-soc:hover{ color:var(--vt-accent); }
/* MONO */
body.vault-soc-mono .vault-soc{ color:var(--vt-text); opacity:.7; }
body.vault-soc-mono .vault-soc:hover{ opacity:1; }
/* OUTLINE */
body.vault-soc-outline .vault-soc{ color:var(--vt-muted); border:1px solid var(--vt-line); }
body.vault-soc-outline .vault-soc:hover{ color:var(--vt-accent); border-color:var(--vt-accent); }
/* Bare shape removes the dock chip too */
body.vault-socsh-bare .vault-socialdock{ background:none; border:0; backdrop-filter:none; padding:0; }
body.vault-socsh-bare .vault-socialdock .vault-soc{ background:none; border:0; backdrop-filter:none; }

/* ═══════════════════════════════════════════════════════════════════════════
   MOTION — ease-in titles + card shine (both gated by body classes / toggles)
   ═══════════════════════════════════════════════════════════════════════════ */
/* Ease-in headings: gentle rise as they scroll in. Enhances an already-visible
   default — no content is hidden if JS/observer never fires. */
body.vault-titles-on.vault-anim-on:not(.elementor-editor-active) .vault-fullwidth .elementor-widget-heading .elementor-heading-title{
	animation:vault-title-in .7s cubic-bezier(.16,1,.3,1) both; animation-timeline:view(); animation-range:entry 0% cover 22%;
}
@keyframes vault-title-in{ from{ opacity:.001; transform:translateY(16px); } to{ opacity:1; transform:none; } }
@supports not (animation-timeline: view()){
	body.vault-titles-on .vault-fullwidth .elementor-widget-heading .elementor-heading-title{ animation:none; }
}

/* Card shine sweep on hover — applies to our cards + generic Elementor cards. */
body.vault-shine-on .pvz-tl-card,
body.vault-shine-on .vh-step,
body.vault-shine-on .pp-card,
body.vault-shine-on .predictions-pick-card{ position:relative; overflow:hidden; }
body.vault-shine-on .pvz-tl-card::after,
body.vault-shine-on .vh-step::after{
	content:""; position:absolute; top:0; left:-140%; width:80%; height:100%; z-index:1; pointer-events:none;
	background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.12) 50%,transparent 70%);
	transform:skewX(-18deg); transition:left .7s cubic-bezier(.2,.8,.25,1); }
body.vault-shine-on .pvz-tl-card:hover::after,
body.vault-shine-on .vh-step:hover::after{ left:140%; }

@media (prefers-reduced-motion:reduce){
	.vault-fx-glow::before,.vault-fx-glow::after,.vault-fx-dots::after,.vault-fx-dots>.vault-dotlayer{ animation:none; }
	body.vault-titles-on .elementor-heading-title{ animation:none !important; }
	body.vault-shine-on .pvz-tl-card::after,body.vault-shine-on .vh-step::after{ display:none; }
}

/* ── Custom cursor dot (smooth-follow) ──────────────────────────────── */
.vault-cursor,.vault-cursor-ring{ position:fixed; top:0; left:0; pointer-events:none; z-index:99999;
	margin-left:-4px; margin-top:-4px; will-change:transform; }
.vault-cursor{ width:8px; height:8px; border-radius:50%; background:var(--vt-accent,#e7c877);
	box-shadow:0 0 12px color-mix(in srgb,var(--vt-accent,#e7c877) 70%,transparent); }
.vault-cursor-ring{ width:34px; height:34px; margin-left:-17px; margin-top:-17px; border-radius:50%;
	border:1.5px solid color-mix(in srgb,var(--vt-accent,#e7c877) 55%,transparent);
	transition:width .2s,height .2s,margin .2s,border-color .2s,background .2s; }
.vault-cursor-ring.is-active{ width:52px; height:52px; margin-left:-26px; margin-top:-26px;
	border-color:var(--vt-accent,#e7c877); background:color-mix(in srgb,var(--vt-accent,#e7c877) 10%,transparent); }
@media (pointer:coarse){ .vault-cursor,.vault-cursor-ring{ display:none; } }
@media (prefers-reduced-motion:reduce){ .vault-cursor,.vault-cursor-ring{ display:none; } }

/* ── Account action pages (log out / forgot password) ───────────────────── */
.vault-account-action{ max-width:520px; margin:20px auto; text-align:center; padding:34px 28px;
	background:var(--vt-raised); border:1px solid var(--vt-line); border-radius:var(--vt-radius,16px); }
.vault-account-action p{ color:var(--vt-muted); font-size:15px; line-height:1.6; margin:0 0 20px; }

/* ── About Split button contrast (theme-level guarantee) ─────────────────── */
html[data-vault-mode="dark"] .pvz-as-btn,
html[data-vault-mode="dark"] .pvz-as-btn:visited,
html[data-vault-mode="dark"] .pvz-as-btn:hover,
html[data-vault-mode="dark"] .pvz-as-btn .pvz-as-btn-lbl{ color:#fff !important; }
html[data-vault-mode="dark"] .pvz-as-btn{ background:var(--vt-canvas,#0e0f12) !important; border:1px solid rgba(255,255,255,.16) !important; }
html[data-vault-mode="light"] .pvz-as-btn,
html[data-vault-mode="light"] .pvz-as-btn .pvz-as-btn-lbl{ color:#14151a !important; }