/* VCL AI Adoption: the hero for the group site (vcl.solutions, WordPress and Elementor).
   Everything is scoped to .vaa-hero and the tokens live on the host, so nothing here reaches the theme and nothing of the theme is relied on.
   The scene host carries the glass gradient while three.js loads (and for good if WebGL is unavailable); the canvas fades in on its first frame. */
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,300..700&display=swap");

.vaa-hero {
  --vcl-red: #ce2823; --carbon: #161719; --bone: #f2f0eb;
  --font: "DM Sans", "Open Sans", system-ui, sans-serif;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --vaa-hero-h: clamp(560px, 86vh, 920px); /* the section's height; the standalone page overrides it to fill its frame */
  position: relative; box-sizing: border-box; width: 100%; height: var(--vaa-hero-h); overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; justify-content: flex-end; padding: 0 clamp(24px, 7.2vw, 138px) clamp(28px, 4.3vh, 40px);
  margin: 0; background: var(--carbon); color: var(--bone); font-family: var(--font); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
.vaa-hero *, .vaa-hero *::before, .vaa-hero *::after { box-sizing: border-box; }
.vaa-hero p, .vaa-hero h2, .vaa-hero a, .vaa-hero span { text-transform: none; font-style: normal; text-shadow: none; text-align: start; } /* the theme's type rules stop at the host; the tagline sets its own case below */
/* The scene: the VCL red gradient first, the canvas over it once rendered, a still as a background image on low power */
/* The host's geometry carries the whole hero, so it is pinned past any other rule on the page: the group site's own custom code carries a copy of
   the design system's .va-glass rule (position: relative), and the stage adds that class to the host */
.vaa-hero .vaa-hero__scene { position: absolute !important; inset: 0 !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; z-index: 0; overflow: hidden; background: linear-gradient(160deg, #ff8a66 0%, #e0412f 22%, #ce2823 42%, #7a1216 70%, #2a0a0c 100%); }
.vaa-hero .vaa-hero__scene > canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block; opacity: 0; transition: opacity 700ms var(--ease-out); }
.vaa-hero .vaa-hero__scene.is-ready > canvas { opacity: 1; }
.vaa-hero .vaa-hero__scene.is-frozen { background-size: cover; background-position: center; }
.vaa-hero .vaa-hero__scene.is-frozen.is-intro { animation: vaa-hero-settle 6s var(--ease-out) both; }
@keyframes vaa-hero-settle { from { transform: scale(1.12); } to { transform: none; } }
/* A soft dark scrim under the copy so it reads across a disc */
.vaa-hero::after { content: ""; position: absolute; inset: auto 0 0 0; height: 58%; background: linear-gradient(to top, rgba(20, 21, 23, .5), rgba(20, 21, 23, 0)); pointer-events: none; z-index: 1; }

/* Copy: the headline bottom-left with the solution's line under it, the standfirst and the calls to action bottom-right, both on one baseline */
.vaa-hero .vaa-hero__copy { position: relative; z-index: 2; display: grid; grid-template-columns: 1.55fr 1fr; gap: 56px; align-items: end; width: 100%; max-width: 1400px; margin: 0 auto; }
.vaa-hero .vaa-hero__name { margin: 0 0 22px; font: 500 clamp(22px, 1.9vw, 30px)/1 var(--font); letter-spacing: -.03em; color: var(--bone); }
.vaa-hero .vaa-hero__name span { position: relative; display: inline-block; white-space: nowrap; padding-right: .34em; }
.vaa-hero .vaa-hero__name span::after { content: ""; position: absolute; right: 0; bottom: .06em; width: .18em; height: .18em; border-radius: 999px; background: var(--vcl-red); } /* the VCL point closes the name */
.vaa-hero .vaa-hero__tag { display: inline-flex; align-items: center; margin: 0 0 26px; font: 500 clamp(11px, .9vw, 13px)/1 var(--font); letter-spacing: .2em; text-transform: uppercase; color: rgba(242, 240, 235, .72); white-space: nowrap; }
.vaa-hero .vaa-hero__tag, .vaa-hero .vaa-hero__tag span { text-transform: uppercase; } /* the one uppercase line, past the reset above */
.vaa-hero .vaa-hero__tag i { width: 6px; height: 6px; border-radius: 999px; background: var(--vcl-red); margin: 0 14px; flex: none; }
.vaa-hero .vaa-hero__title { margin: 0; padding: 0; max-width: 12ch; font: 500 clamp(40px, 4.6vw, 88px)/1.02 var(--font); letter-spacing: -.045em; color: var(--bone); text-align: start; text-wrap: balance; }
.vaa-hero .vaa-hero__title::before { content: none; } /* no theme ornament on the heading */
.vaa-hero .vaa-hero__title:not(.va-lines)::after, .vaa-hero .vaa-hero__title .va-line:last-child > span::after { content: ""; display: inline-block; width: .17em; height: .17em; border-radius: 999px; background: var(--vcl-red); margin-left: .14em; vertical-align: 0; } /* the point is the full stop */
.vaa-hero .vaa-hero__line { margin: 28px 0 0; max-width: 520px; font: 400 16px/24px var(--font); color: rgba(242, 240, 235, .92); }
.vaa-hero .vaa-hero__aside p { margin: 0; max-width: 470px; font: 400 17px/27px var(--font); color: rgba(242, 240, 235, .82); }
.vaa-hero .vaa-hero__actions { display: flex; gap: 28px; align-items: center; flex-wrap: wrap; margin-top: 24px; }

/* The button and the link, as on the solution site (light on a scene) */
.vaa-hero .va-btn { display: inline-flex; align-items: center; gap: 12px; height: 48px; padding: 0 8px 0 22px; border: 0; border-radius: 10px; cursor: pointer; text-decoration: none;
  font: 500 15px/1 var(--font); letter-spacing: -.005em; background: var(--bone); color: var(--carbon); transition: background 180ms var(--ease-out), transform 180ms var(--ease-out); }
.vaa-hero .va-btn:hover, .vaa-hero .va-btn:focus-visible { background: #ffffff; color: var(--carbon); text-decoration: none; }
.vaa-hero .va-btn:active { transform: scale(.98); }
.vaa-hero .va-btn__dot { width: 32px; height: 32px; border-radius: 999px; display: grid; place-items: center; background: var(--carbon); color: var(--bone); transition: transform 380ms var(--ease-out); }
.vaa-hero .va-btn__dot svg { width: 14px; height: 14px; display: block; }
.vaa-hero .va-btn:hover .va-btn__dot { transform: translateX(3px); }
.vaa-hero .va-link { position: relative; display: inline-flex; align-items: center; height: 48px; padding: 0; border: 0; background: none; font: 500 15px/1 var(--font); color: var(--bone); text-decoration: none; cursor: pointer; }
.vaa-hero .va-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 13px; height: 1px; background: currentColor; transform-origin: left; transition: transform 420ms var(--ease-out); }
.vaa-hero .va-link:hover::after { transform: scaleX(.35); }
.vaa-hero a:hover, .vaa-hero a:focus { text-decoration: none; }
.vaa-hero a:focus-visible { outline: 2px solid var(--vcl-red); outline-offset: 3px; }

/* Type motion: the headline rises line by line, the rest fades in */
.vaa-hero .va-lines .va-line { display: block; overflow: hidden; padding: 0 .5em .08em 0; margin: 0 -.5em -.08em 0; } /* room on the right for the point after the last word */
.vaa-hero .va-lines .va-line > span { display: block; white-space: nowrap; transform: translateY(104%); transition: transform 1100ms var(--ease-out); }
.vaa-hero .va-lines.is-in .va-line > span { transform: none; }
.vaa-hero .va-fade { opacity: 0; transform: translateY(12px); transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out); }
.vaa-hero .va-fade.is-in { opacity: 1; transform: none; }
.vaa-hero.is-static .va-fade { opacity: 1; transform: none; } /* no script: everything shows at once */

@media (max-width: 767px) {
  .vaa-hero { --vaa-hero-h: clamp(560px, 92vh, 820px); padding: 0 20px 24px; }
  .vaa-hero::after { height: 75%; }
  .vaa-hero .vaa-hero__copy { grid-template-columns: 1fr; gap: 22px; }
  .vaa-hero .vaa-hero__name { margin-bottom: 16px; font-size: 22px; }
  .vaa-hero .vaa-hero__tag { margin-bottom: 20px; letter-spacing: .12em; font-size: 11px; }
  .vaa-hero .vaa-hero__tag i { margin: 0 10px; }
  .vaa-hero .vaa-hero__title { max-width: none; font-size: 38px; }
  .vaa-hero .vaa-hero__line { margin-top: 18px; font-size: 15px; line-height: 22px; }
  .vaa-hero .vaa-hero__aside p { font-size: 16px; line-height: 25px; }
  .vaa-hero .vaa-hero__actions { margin-top: 18px; gap: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .vaa-hero .va-lines .va-line > span, .vaa-hero .va-fade { transform: none; transition: none; opacity: 1; }
  .vaa-hero .vaa-hero__scene > canvas { transition: none; }
  .vaa-hero .vaa-hero__scene.is-frozen.is-intro { animation: none; }
}