/* Union homepage hero v2: Hector's hero concept (union-hero-demo-hector), Oct 21 2026. v1.4.0 (Oct 23: hero height follows its content, works-with bar never clips; phones get a 1024px center crop of the background; ambient drift uses normal blending, not screen, so it composites at 60fps)
   All classes prefixed hx- and scoped to .hx-hero so the site's .hero/.button/.eyebrow never collide.
   The site header (overlay mode) replaces the concept's own nav, so the hero carries the nav's 132px. */
.hx-hero{--hx-ease:cubic-bezier(.22,1,.36,1);--hx-shell:min(100% - 64px,1240px);position:relative;isolation:isolate;min-height:1436px;overflow:hidden;background:#00286F;color:#FFFFFF;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;padding-top:132px}
.hx-hero *,.hx-hero *::before,.hx-hero *::after{box-sizing:border-box}
.hx-hero a{text-decoration:none}
.hx-hero::after{position:absolute;z-index:2;inset:0;content:"";pointer-events:none;background:linear-gradient(180deg,rgba(0,20,62,.08),transparent 65%,rgba(220,238,255,.12))}
.hx-shell{width:var(--hx-shell);margin-left:auto;margin-right:auto}

/* Figma background: curve, gradient field, U motif, ambient drift, orbit ring */
.hx-bg{position:absolute;z-index:0;inset:0;overflow:hidden;pointer-events:none}
.hx-bg::before{position:absolute;z-index:1;inset:-18%;content:"";background:radial-gradient(42% 38% at 68% 58%,rgba(36,146,255,.24),transparent 70%),radial-gradient(34% 30% at 24% 72%,rgba(73,167,255,.16),transparent 72%);mix-blend-mode:normal;opacity:.74;animation:hx-drift 30s ease-in-out infinite alternate;will-change:transform,opacity}
.hx-bg::after{position:absolute;z-index:2;top:67%;left:-21vw;width:150vw;min-width:1680px;aspect-ratio:1.74;content:"";border:1.5px solid rgba(202,232,255,.5);border-radius:50%;transform:rotate(-8deg);box-shadow:0 0 9px rgba(177,220,255,.6),0 0 26px rgba(53,151,255,.28);animation:hx-orbit 18s ease-in-out infinite alternate}
/* v1.1.0 (Oct 21): the four Figma background SVGs (curve, gradient field, U motif, U lines) are pre-rendered into one image. Their live blur filters cost seconds of paint time per load. Same pixels, rendered once. */
.hx-bg{background-color:#00286F;background-image:url("https://cdn.prod.website-files.com/6a5fa0b0fbeafa074f452684/6ad94a4c313ad85e9f027834_union-hero-v2-bg-2560.webp");background-repeat:no-repeat;background-position:50% 0;background-size:2560px auto}
@keyframes hx-drift{0%{transform:translate3d(-1.5%,-.8%,0) scale(1.02);opacity:.62}100%{transform:translate3d(1.8%,1.2%,0) scale(1.055);opacity:.82}}
@keyframes hx-orbit{0%{opacity:.62}100%{opacity:.96}}

/* Content */
.hx-content,.hx-showcase{position:relative;z-index:5}
.hx-content{display:flex;flex-direction:column;align-items:center;padding-top:71px;text-align:center}
.hx-hero .hx-eyebrow{margin:0 0 20px;padding:12px;border:1px solid rgba(150,204,255,.3);border-radius:7px;color:rgba(229,243,255,.86);background:rgba(0,36,100,.31);box-shadow:inset 0 0 0 1px rgba(255,255,255,.03);font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:16px;line-height:1.2;font-weight:700;letter-spacing:.105em;text-transform:uppercase;-webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px)}
.hx-hero .hx-h1{max-width:700px;margin:0;font-family:inherit;font-size:64px;font-weight:600;line-height:1.2;letter-spacing:-.02em;color:#FFFFFF;text-wrap:balance}
.hx-hero .hx-h1-acc{color:#1683FF;text-shadow:0 1px 28px rgba(0,113,255,.18)}
.hx-hero .hx-lede{max-width:597px;margin:44px auto 0;color:#DEE4FE;font-size:16px;line-height:1.5;font-weight:400;text-wrap:balance}
.hx-actions{display:flex;gap:32px;margin-top:44px}
.hx-hero .hx-btn{display:inline-flex;min-height:56px;align-items:center;justify-content:center;gap:10px;padding:0 16px;border:1px solid rgba(255,255,255,.33);border-radius:7px;color:#FFFFFF;font-family:inherit;font-size:20px;line-height:1;font-weight:600;letter-spacing:-.01em;transition:transform 220ms var(--hx-ease),box-shadow 220ms ease,background 220ms ease}
.hx-hero .hx-btn:hover{transform:translateY(-2px);color:#FFFFFF}
.hx-hero .hx-btn:focus-visible,.hx-hero .hx-vc:focus-visible{outline:3px solid rgba(255,255,255,.95);outline-offset:4px}
.hx-hero .hx-btn-solid{border-color:#1A85FF;background:#1783FF;box-shadow:0 10px 28px rgba(0,55,168,.25)}
.hx-hero .hx-btn-solid:hover{background:#3896FF;box-shadow:0 14px 32px rgba(0,45,145,.34)}
.hx-hero .hx-btn-ghost{background:rgba(0,36,105,.16);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.hx-btn img{display:block;width:16px;height:16px}

/* Video showcase */
.hx-showcase{width:min(84%,1208px);margin-top:110px;margin-left:auto;margin-right:auto}
.hx-halo{position:absolute;z-index:-1;inset:-50px -80px -95px;background:radial-gradient(ellipse at 50% 50%,rgba(143,205,255,.34),transparent 70%);filter:blur(24px)}
.hx-frame{position:relative;overflow:hidden;aspect-ratio:1336/685;padding:29px;border:1px solid rgba(237,247,255,.77);border-radius:24px;background:linear-gradient(135deg,rgba(255,255,255,.23),rgba(255,255,255,.86)),rgba(224,241,255,.76);box-shadow:0 28px 66px rgba(0,51,146,.28),inset 0 0 0 1px rgba(255,255,255,.34);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.hx-frame::before{position:absolute;z-index:2;inset:29px;content:"";border:1px solid rgba(255,255,255,.46);border-radius:12px;pointer-events:none}
.hx-video{display:block;width:100%;height:100%;border-radius:12px;object-fit:cover;background:#071C44}
.hx-hero .hx-vc{position:absolute;z-index:3;right:34px;bottom:34px;display:inline-flex;min-height:38px;align-items:center;gap:9px;margin:0;padding:0 13px;border:1px solid rgba(255,255,255,.5);border-radius:999px;color:#FFFFFF;background:rgba(0,22,64,.72);font:inherit;font-size:12px;line-height:1;cursor:pointer;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.hx-vc-icon{display:block;width:9px;height:11px;border-left:3px solid currentColor;border-right:3px solid currentColor}
.hx-vc[data-paused="true"] .hx-vc-icon{width:0;height:0;margin-left:2px;border:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:9px solid currentColor}

/* Works with */
.hx-works{position:relative;z-index:6;display:grid;grid-template-columns:auto repeat(4,auto);align-items:center;gap:33px;width:fit-content;max-width:calc(100% - 48px);min-height:64px;margin:-38px auto 0;padding:0 24px;border:10px solid rgba(227,240,255,.78);border-radius:20px;color:#26354F;background:rgba(255,255,255,.95);box-shadow:0 13px 26px rgba(0,62,161,.25);white-space:nowrap;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background-clip:padding-box}
.hx-works-label{color:#1683FF;font-size:14px;line-height:1;font-weight:600}
.hx-works img{display:block;max-width:none}
.hx-works .hx-yardi{width:89.2px;height:22.3px;filter:invert(1)}
.hx-works .hx-realpage{width:96.128px;height:21.101px}
.hx-works .hx-resman{width:90px;height:18.092px}
.hx-works .hx-entrata{width:80px;height:15.725px}
.hx-fade{position:absolute;z-index:2;right:0;bottom:0;left:0;height:210px;pointer-events:none;background:linear-gradient(180deg,transparent,rgba(220,238,255,.34))}

/* Phone (the concept's 760px breakpoint) */
@media (max-width:760px){
.hx-hero{--hx-shell:min(100% - 32px,560px);min-height:930px;padding-top:90px;background:radial-gradient(100% 47% at 72% 48%,rgba(27,145,255,.68),transparent 72%),linear-gradient(180deg,#001C58 0%,#003E9B 43%,#0D7CF4 73%,#D7EBFF 100%)}
.hx-content{padding-top:32px}
.hx-hero .hx-eyebrow{margin-bottom:18px;font-size:10px}
.hx-hero .hx-h1{max-width:520px;font-size:clamp(40px,12.5vw,58px);line-height:1}
.hx-hero .hx-lede{margin-top:24px;font-size:13px}
.hx-actions{width:100%;gap:10px;margin-top:28px}
.hx-actions .hx-btn{flex:1;padding-left:12px;padding-right:12px;font-size:13px}
.hx-showcase{width:var(--hx-shell);margin-top:64px}
.hx-frame{padding:9px;border-radius:14px}
.hx-frame::before{inset:9px;border-radius:8px}
.hx-video{border-radius:8px}
.hx-hero .hx-vc{right:18px;bottom:18px;min-width:38px;padding-left:13px;padding-right:13px}
.hx-vc-label{display:none}
.hx-works{display:flex;gap:19px;max-width:calc(100% - 24px);min-height:44px;margin-top:-18px;overflow:hidden;padding-left:14px;padding-right:14px;border-width:5px;border-radius:11px}
.hx-works-label,.hx-works img{flex:0 0 auto}
.hx-works-label{font-size:11px}
.hx-works img,.hx-works .hx-yardi,.hx-works .hx-realpage,.hx-works .hx-resman,.hx-works .hx-entrata{width:auto;height:14px}
.hx-bg{left:50%;width:1440px;transform:translateX(-50%) scale(.75);transform-origin:top center;background-image:url("https://cdn.prod.website-files.com/6a5fa0b0fbeafa074f452684/6ad94d5961cf4b7f26ed3c6d_union-hero-v2-bg-1024.webp");background-size:1024px auto}
.hx-bg::after{top:82%;left:-124vw;width:310vw;min-width:0;transform:rotate(-12deg)}
}
@media (prefers-reduced-motion:reduce){
.hx-bg::before,.hx-bg::after{animation:none!important}
.hx-hero .hx-btn{transition:none}
}

/* v1.4.0 (Oct 23 2026). 1) Height: the hero sizes to its content plus the designed space under the works-with bar (43px desktop, 54px phone), instead of a fixed 1436px / 930px. 1440 and wider are unchanged; narrower screens lose the empty band. 2) Works-with bar: gap and padding scale down between 761 and 1440 so all four logos fit at 761. On phones the label sits on its own line above one row of logos that scale with the screen, so nothing clips down to 320px. */
.hx-hero{min-height:0;padding-bottom:43px}
.hx-works{gap:clamp(20px,3.2vw,33px);padding-left:clamp(16px,2.2vw,24px);padding-right:clamp(16px,2.2vw,24px)}
@media (max-width:760px){
.hx-hero{min-height:0;padding-bottom:54px}
.hx-works{flex-wrap:wrap;justify-content:center;row-gap:7px;column-gap:clamp(9px,3vw,20px);max-width:calc(100% - 16px);padding:9px 12px;overflow:visible}
.hx-works-label{flex:0 0 100%;text-align:center}
/* The phone background art stops at 75% of the hero height (the art box is scaled to .75). Fade its last 30% so it blends into the hero gradient instead of ending on a hard horizontal edge. */
.hx-bg{-webkit-mask-image:linear-gradient(180deg,#000 70%,transparent 100%);mask-image:linear-gradient(180deg,#000 70%,transparent 100%)}
.hx-works img,.hx-works .hx-yardi,.hx-works .hx-realpage,.hx-works .hx-resman,.hx-works .hx-entrata{height:clamp(10.5px,3.4vw,14px)}
}
@media (max-width:359px){
.hx-actions .hx-btn{padding-left:8px;padding-right:8px;font-size:12px;white-space:nowrap}
}