/* ==========================================================================
   Vaulta overrides — layered on top of Sui's Webflow CSS.
   Everything Vaulta-specific (logo sizing, brand tweaks) lives here so the
   base stylesheet stays untouched and changes are easy to find/revert.
   ========================================================================== */

/* Wordmark: the PNG lockup is "VAULTA" across the top with a "Digital Assets"
   subtitle below it, in a padded 800x520 canvas. Paint it as a cropped
   background so only the "VAULTA" band shows at nav height. */
/* Wordmark PNG (padding/subtitle removed, correct aspect) at the good nav size.
   object-contain shows it whole — no clipping. */
.navbar-brand.w-nav-brand{
  width:auto !important; max-width:none !important; height:auto !important;
  flex:0 0 auto !important;
  background-image:none !important;
}
.navbar-brand .sui-logo{
  display:block !important;
  height:36px !important;                 /* image now has ~10% padding baked in */
  width:auto !important; max-width:none !important;
  object-fit:contain !important;
}

/* ==========================================================================
   Nav behaviour — transparent over the hero, floating "island" on scroll.
   body.vf-nav-scrolled is toggled by js/vaulta.js at a small scroll offset.
   ========================================================================== */

/* Sui's announcement/pencil bar is Sui content — hidden so the hero nav is clean */
.pencil_layout{ display:none !important; }

/* Sui's scroll-canvas sequence IS the timeline's central visualization — it
   wipes in over the hero->audience scroll then sits fixed behind the timeline
   cards. It must stay visible (not display:none), but never intercept pointer
   events, otherwise it blocks the hero's cursor tracker when scrolled back up. */
.canvas-wrapper, .canvas_sequence{ pointer-events:none !important; }

/* Nav is transparent over the hero. The island itself is animated by GSAP in
   js/vaulta.js: the bar contracts to centre (items slide into formation), then
   .vf-island-bg wipes in from one side. No CSS width-snap = no glitch. */
.navbar_layout{
  position:relative !important;
  background-color:transparent !important;
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  border-radius:0 !important; box-shadow:none !important;
  margin-left:auto !important; margin-right:auto !important;
}
/* the island background, drawn in from the left by GSAP (clip-path) */
.vf-island-bg{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:#000000;                        /* black — part of Vaulta's scheme */
  border-radius:0;                           /* square corners */
  /* outline is transparent by default (keeps the box size stable) and only
     turns solid white when JS detects a dark section behind the nav */
  border:1px solid transparent;
  box-sizing:border-box;
  box-shadow:0 12px 36px rgba(0,0,0,.34);
  opacity:0;                                 /* hidden at top; JS snaps it in full-width on scroll */
}
/* only over dark content sections (never the hero, never light sections) */
.vf-island-bg.vf-on-dark{ border-color:rgba(255,255,255,.15); }

/* Nav + dropdown panels use black rather than the warm dark, so the gold
   accents carry the colour instead of the background competing with them. */
.navbar-dd_inner-wrapper{
  background-color:#0a0a0a !important;
  border-color:#1f1f1f !important;
}
.navbar-dd_block.has-border{ border-left-color:#2b2b2b !important; }
.cta-dd_link-block{ border-bottom-color:#2b2b2b !important; }

/* Nav/menu: white labels on neutral black — no gold accents, no olive. */
.navbar-dd_category,
.cta-dd_category,
.hm_category{
  color:#ffffff !important;
  background-color:#111111 !important;
}
.navbar-dd_icon{
  background-color:#2b2b2b !important;   /* neutral square */
  color:#ffffff !important;              /* white +/x glyph */
}
.hs-input{ background-color:#1a1a1a !important; }
.cta-dd_inner-wrapper{ border-color:#1f1f1f !important; }
/* mobile menu panel */
.hm_wrapper, .hm-dd_wrapper, .hamburger-menu_component{ background-color:#0a0a0a !important; }
/* never let the CTA collapse to vertical text while the bar contracts */
.navbar_layout .hide-tablet,
.navbar_layout [class*="button"]{ flex:0 0 auto !important; }
.navbar_layout a, .navbar_layout button{ white-space:nowrap !important; }

/* Login button — a bit darker than the bright brand gold */
.nav_cta-button{ background-color:#e0a520 !important; }

/* Hero: small tagline sits directly under the headline. z-index 6 keeps it
   above .gradient-blur (z5) so it stays crisp while the headline blurs. */
.vf-hero-tag{
  position:relative; z-index:6;
  /* font-size/colour come from .ts-21px + .color-white (same as the
     description below). Right-aligned so it sits under "layer". */
  text-align:right !important;
  margin:.35em 0 0;
  line-height:1.3;
}
/* the lower block keeps Sui's original subhead styling (ts-21px) — only the
   measure is widened. It sits low where the hero has dissolved to white, so
   the copy is dark for contrast (the tagline above stays white). */
.first_section_content_2 .ts-21px{
  max-width:1100px !important;
  margin-left:auto !important; margin-right:auto !important;
}

/* Platform mega-menu: cap item width so the 4 columns fit the dropdown. */
.platform-dd_link-block{
  max-width:262px !important;
  align-items:center !important;
  /* uniform row height so 1-line and 2-line labels still line up across columns */
  min-height:3.25em !important;
}
/* icon keeps its size no matter how long the label is (never squashed) */
.platform-dd_link-block .navbar-dd_link-icon{
  flex:0 0 auto !important;
  width:2em !important; height:2em !important;
}
/* label takes the remaining space and wraps inside its own column */
.platform-dd_link-block .w-layout-vflex{
  flex:1 1 auto !important;
  min-width:0 !important;
}
.platform-dd_link-block .navbar-dd_link{
  white-space:normal !important;
  overflow-wrap:anywhere;
  line-height:1.25;
}

/* ==========================================================================
   Partners marquee — the old site's partner logos on Sui's carousel.
   The strip sits on the white band, so logos keep their natural colour;
   vf-partner just normalises wildly different aspect ratios to one height.
   ========================================================================== */
.home-hero_marquee-ltem img.vf-partner{
  object-fit:contain !important;
  height:auto !important;
  max-height:40px !important;
  width:auto !important;
  max-width:190px !important;
  margin:0 auto !important;
}
.home-hero_marquee-ltem{ display:flex; align-items:center; justify-content:center; }

/* ==========================================================================
   Audience section — old site's tabbed structure (4 audience tabs, each with
   its 6 feature cards), built from Sui's REAL industry-card connectors
   (home-industry_grid-item / custom_cards / mw-48 / h3-28px / ts-18px).
   White version: we only override the dark colours those classes ship with,
   scoped to this section, and leave Sui's layout/typography intact.
   ========================================================================== */
.vf-aud-section{
  background:#ffffff;                      /* white band (body is black) */
  padding-top:4rem; padding-bottom:7rem;
}

/* Tab bar: a black rectangle attached to the top of the card (same width, no
   gap). The active tab is a bordered box whose bottom merges into the black
   card; inactive tabs are plain text. No dark-yellow — the bright yellows stay. */
.vf-aud-tabs{
  display:flex; flex-wrap:wrap; justify-content:flex-start; gap:.3rem;
  background:#1a1a1a; padding:.6rem .6rem; margin-bottom:0; border:0;   /* slightly lighter black */
  overflow:visible;
}
.vf-aud-tab{                         /* text styling matches the CTA text (ts-14px) */
  appearance:none; background:transparent; cursor:pointer;
  color:#8a8578;
  font-family:'TWK Everett', Arial, sans-serif; font-size:1.02rem; font-weight:400;
  letter-spacing:-.005em; line-height:1.25;
  padding:1.05rem 1.35rem; border:0; border-radius:0;        /* taller bar */
  transition:color .2s ease, background-color .2s ease; white-space:nowrap; overflow:visible;
}
.vf-aud-tab:not(.is-active):hover{ color:#fff; }
.vf-aud-tab.is-active{               /* square yellow box (CTA arrow yellow), white text */
  color:#fff; background:#ffc549;
}

.vf-aud-panel{ display:none; }
.vf-aud-panel.is-active{ display:block; }
.vf-aud-panels{ margin:0; }

/* One full Sui industry card per tab. Card is used AS-IS (its illustration,
   feature list and CTA all intact) — only the text is modified and the
   background is switched to black so it joins the black tab bar. */
.vf-single{ grid-template-columns:1fr !important; margin:0 !important; }
.vf-aud-panel .home-industry_grid-item{
  display:flex !important; width:100%; background-color:#000 !important;
}
.vf-aud-section .mw-48{ color:#ffc549; }                       /* bright-yellow main icon */
.vf-aud-section .mw-48 svg{ width:100%; height:100%; }
.vf-aud-section .home-industry_list-item{ color:#a89f8c; }     /* light feature text */
.vf-aud-section .home-industry_list-icon{ color:#ffc549; }     /* bright-yellow list bullet */

@media (max-width:600px){ .vf-aud-tab{ padding:.7rem .8rem; font-size:.9rem; } }

.scroll_expander stop[stop-color="#298dff" i]{ stop-color:#ffc549; }
.vf-footer-v{width:auto;height:36px;display:block}

/* DeepBook hero, reproduced verbatim (em-based off DeepBook's responsive --size-font), recolored to Vaulta */
.vh-hero { position: relative; width: 100%; background: #000000; overflow: hidden; font-family: 'TWK Everett', Arial, sans-serif; font-size: calc(clamp(992px, 100vw, 1680px) / 90); }
.vh-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.vh-layout { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100svh; padding-bottom: 3.75em; text-align: center; }
.vh-group { display: flex; flex-direction: column; align-items: center; column-gap: 2.5em; row-gap: 2.5em; }
.vh-textgroup { display: flex; flex-direction: column; align-items: center; column-gap: 1.5em; row-gap: 1.5em; padding: 0 1.25em; }
.vh-h1 { font-family: inherit; font-size: 5.0625em; font-weight: 500; line-height: 1; letter-spacing: -0.02em; color: #ffffff; text-align: center; margin: 0; }
.vh-sub { font-family: inherit; font-size: 1.125em; font-weight: 500; line-height: 1.2; letter-spacing: -0.03em; color: #ffffff; text-align: center; margin: 0; }
.vh-buttons { display: flex; flex-direction: row; column-gap: 0.5em; row-gap: 0.5em; }
.vh-btn { font-family: inherit; font-size: 0.938em; font-weight: 500; line-height: 1.4; letter-spacing: -0.02em; padding: 1em 1.25em; margin-bottom: -0.25em; border: 0; border-radius: 4px; cursor: pointer; text-decoration: none; display: flex; justify-content: center; align-items: center; background: #ffffff; color: #000000; }
.vh-btn--gold { background: #ffc549; color: #000000; }
@media screen and (max-width: 991px) { .vh-h1 { font-size: 4em; } }
@media screen and (max-width: 767px) { .vh-h1 { font-size: 3.5em; } .vh-sub { font-size: 1em; } .vh-buttons { flex-direction: column; } }

/* hero->grid->partners hard cuts */
#intro-v2 { margin-bottom: 0 !important; border-bottom: 64px solid #ffffff !important; -webkit-mask: none !important; mask: none !important; }

/* one big wide single-line hero sentence */
.vh-textgroup { max-width: none; padding: 0 16px; }
.vh-h1 { font-size: 4.7vw; line-height: 1.03; letter-spacing: -0.02em; white-space: nowrap; max-width: none; }
.vh-sub { max-width: 620px; }
@media (max-width: 767px) { .vh-h1 { white-space: normal; font-size: 32px; } }

/* broken centered hero heading */
.vh-layout { justify-content: center; padding-bottom: 0; }
.vh-h1 { white-space: normal; font-size: 5.5vw; line-height: 1.05; max-width: 11em; text-wrap: balance; }
@media (max-width: 767px) { .vh-h1 { font-size: 34px; } }

/* sub at bottom middle */
.vh-sub { position: absolute; left: 50%; bottom: 44px; transform: translateX(-50%); width: 90%; max-width: 620px; margin: 0; text-align: center; }

/* about-style noise hero */
.vh-hero { background:#000; }
.vh-hero .vf-comm-gradient { position:absolute; inset:0; z-index:0; background:#ffc549; -webkit-mask:url(/images/6936e54b117b6e2e19045b87_gradient.png) 50% 0%/cover no-repeat; mask:url(/images/6936e54b117b6e2e19045b87_gradient.png) 50% 0%/cover no-repeat; -webkit-mask-mode:luminance; mask-mode:luminance; pointer-events:none; }
.vh-hero .noise { z-index:1; }
.vh-hero .vh-layout { z-index:4; }

/* hero background sequence */
.vh-hero .canvas_sequence { position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover; display:block; }

/* hero background video */
.vh-hero .vh-hero-video { position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover; object-position:50% 50%; display:block; }

/* hero video grading */
.vh-hero .vh-hero-grade { position:absolute; inset:0; z-index:1; background:#ffc549; mix-blend-mode:color; opacity:.55; pointer-events:none; }
.vh-hero .vh-hero-scrim { position:absolute; inset:0; z-index:2; background:linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.55) 45%, rgba(0,0,0,.78) 100%); pointer-events:none; }
.vh-hero .noise { z-index:3; }
.vh-hero .vh-layout { z-index:5; }

/* partners page */
.vf-partner-hero { padding: 150px 0 40px; }
.vf-partner-lead { max-width: 46em; margin-top: 18px; color: rgba(255,255,255,.86); }
.vf-partner-cta { display: inline-flex; align-items: center; margin-top: 30px; background: #ffc549; color: #000000; padding: 14px 24px; border-radius: 4px; font-family: "TWK Everett", Arial, sans-serif; font-size: 15px; font-weight: 500; letter-spacing: -0.02em; text-decoration: none; }
.vf-partner-cta:hover { background: #f0b400; }
.vf-partners { padding: 24px 0 110px; }
.vf-partners_head { border-top: 1px dashed #343940; padding-top: 34px; margin-bottom: 40px; }
.vf-partners_grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.vf-partners_item { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 30px 26px; min-height: 168px; background: #0e0e0e; border: 1px solid #1f1f1f; text-decoration: none; transition: border-color .2s ease, background .2s ease; }
.vf-partners_item:hover { border-color: #ffc549; background: #141414; }
.vf-partners_item img { height: 30px; width: auto; max-width: 150px; object-fit: contain; margin-bottom: auto; }
.vf-partners_name { font-family: "TWK Everett", Arial, sans-serif; font-size: 18px; font-weight: 500; color: #ffffff; }
.vf-partners_sub { font-family: "TWK Everett", Arial, sans-serif; font-size: 13.5px; color: #8a8a8a; }
@media (max-width: 767px) { .vf-partners_grid { grid-template-columns: 1fr; } .vf-partner-hero { padding: 120px 0 30px; } }
@media (max-width:768px){
.blink_wrap .custom-span,.blink_wrap .custom-span.invert,.blink_wrap .custom-span.block{font-size:clamp(27px,7.8vw,34px)!important;line-height:1.24!important}
.blink_wrap .mw-78{width:clamp(27px,7.8vw,34px)!important;height:clamp(27px,7.8vw,34px)!important}
.blink_wrap .blinkexpander,.blink_wrap .higlight_wrapper{align-items:center!important}
}