/* Union About: soap bubble hero (v1.3.0, desktop only). Loads after union-about-v2 CSS; only touches section.ab-hero.
   Phones and touch tablets fall outside the media query and keep the standard About hero. */
@media (min-width:992px) and (hover:hover) and (pointer:fine){
.ab-hero{position:relative;isolation:isolate}
.ab-main .ab-hero{padding-top:8px}
.ab-hero>.ab-wrap{position:relative;z-index:1}
.ab-bubble-canvas{position:absolute;top:0;left:0;width:100%;z-index:0;display:block;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 24px,#000 calc(100% - 96px),transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 24px,#000 calc(100% - 96px),transparent 100%)}
/* clicks over the copy fall through to the scene (a click sends a bubble in); links stay clickable */
.ab-hero.ab-bubble-live>.ab-wrap{pointer-events:none}
.ab-hero.ab-bubble-live a{pointer-events:auto}

/* Layout: copy left, the U's slot right */
.ab-main .ab-hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);column-gap:56px;
  align-content:center;min-height:clamp(440px,58vh,580px);text-align:left;padding:0 0 16px}
.ab-hero-grid>div:first-child,.ab-hero-grid>.ab-hero-copy{grid-column:1}
.ab-main .ab-hero h1{margin:0;font-size:clamp(42px,4.2vw,56px)}
.ab-main .ab-hero h1+.ab-hero-kicker{margin:20px 0 0}
.ab-main .ab-hero-kicker{text-wrap:balance}
.ab-hero-copy{margin-top:16px}
.ab-main .ab-hero-copy p{margin:0;max-width:34em;text-wrap:balance}
.ab-hero-copy .ab-actions{justify-content:flex-start;margin-top:32px}
/* the U fits this slot; 50px side insets keep it about 20% under the full column width */
.ab-bubble-slot{position:absolute;top:0;bottom:0;right:50px;left:calc((100% - 56px) * 1.2 / 2.2 + 106px);pointer-events:none}
.ab-hero-photo{margin-top:24px}

/* While the scene runs it paints the copy itself so bubbles can refract it. The DOM text stays in
   place, transparent but selectable, for screen readers, find, translation and SEO. */
html.gl-text .ab-hero-grid :is(.ab-eyebrow,h1,.ab-hero-kicker,.ab-hero-copy p),
html.gl-text .ab-hero-grid :is(.ab-eyebrow,h1,.ab-hero-kicker,.ab-hero-copy p) *{color:transparent!important}
html.gl-text .ab-hero-grid :is(.ab-eyebrow,h1,.ab-hero-kicker,.ab-hero-copy p) ::selection,
html.gl-text .ab-hero-grid :is(.ab-eyebrow,h1,.ab-hero-kicker,.ab-hero-copy p)::selection{color:transparent;background:rgba(18,107,249,.2)}

/* No WebGL 2 or reduced motion: a still of the settled bubble in the same slot, copy shown normally */
.ab-hero.ab-bubble-static .ab-bubble-slot{background:url("https://cdn.prod.website-files.com/6a5fa0b0fbeafa074f452684/6ac6a4cd45a909649fe1a96e_union-about-bubble-still-1.0.1.webp") center/contain no-repeat}
}
@media (min-width:992px) and (hover:hover) and (pointer:fine) and (forced-colors:active){
html.gl-text .ab-hero-grid :is(.ab-eyebrow,h1,.ab-hero-kicker,.ab-hero-copy p){color:CanvasText!important}
}
/* If a desktop window is narrowed below the breakpoint, hide the scene and show the normal copy */
@media not all and (min-width:992px) and (hover:hover) and (pointer:fine){
.ab-bubble-canvas,.ab-bubble-slot{display:none!important}
}