/* Homepage illustration: the hero supplies a single shared background. */
.hero-flow{position:relative;isolation:isolate;min-width:0;min-height:540px;margin:0;overflow:hidden;background:transparent;color:#fff}
.hero:has(.hero-flow),.hero:has(.hero-flow) .hero-copy{background:var(--navy)}
/* The outer fade follows the clipping bounds, including on very wide screens. */
.flow-surface{position:absolute;inset:68px -20px 95px;pointer-events:none;
  -webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 36%,rgba(0,0,0,.9) 48%,rgba(0,0,0,.5) 66%,rgba(0,0,0,.12) 84%,transparent 100%);
  mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 36%,rgba(0,0,0,.9) 48%,rgba(0,0,0,.5) 66%,rgba(0,0,0,.12) 84%,transparent 100%)}
.flow-poster{position:absolute;top:50%;left:0;transform:translateY(-50%);width:100%;height:auto;display:block}
.flow-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .6s ease}
.hero-flow[data-ready] .flow-canvas{opacity:1}
.hero-flow[data-ready] .flow-poster{opacity:0}
.flow-poster{transition:opacity .6s ease}
.flow-topline{position:absolute;top:36px;left:36px;right:100px;display:flex;align-items:center;justify-content:space-between;gap:20px;color:#a8c3d1;font-size:10px;font-weight:500;letter-spacing:.16em;pointer-events:none}
.flow-direction{display:flex;gap:10px;align-items:center;font-size:9px}
.flow-direction svg{width:38px;height:10px;fill:none;stroke:#8baebf;stroke-width:1}
.flow-caption{position:absolute;bottom:42px;left:36px;right:36px;display:flex;justify-content:space-between;align-items:end;gap:24px}
.flow-caption strong{display:block;font-size:18px;font-weight:500;line-height:1.3;letter-spacing:-.015em}
.flow-caption>div>span{display:block;font-size:11px;line-height:1.5;color:#b1c8d6;margin-top:7px}
.flow-key{width:125px;flex:none;padding-bottom:1px}
.flow-gradient{width:100%;height:3px;border-radius:3px}
.flow-key-labels{display:flex;justify-content:space-between;font-size:9px;color:#aac4d2;margin-top:9px}
.flow-toggle{position:absolute;top:25px;right:25px;display:grid;place-items:center;width:44px;height:44px;min-width:44px;min-height:44px;padding:0;background:transparent;border:1px solid #a4c2d140;border-radius:50%;color:#bcd3df}
.flow-toggle[hidden]{display:none}
.flow-toggle svg{width:17px;height:17px;stroke:currentColor;stroke-width:1.5;fill:none}
.flow-toggle:hover{background:#ffffff08;border-color:#a4c2d170;color:#fff}
.flow-toggle:focus-visible{outline:2px solid #fff;outline-offset:4px}
.flow-button-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.flow-play-icon{display:none}
.hero-flow[data-state=paused] .flow-play-icon{display:block}
.hero-flow[data-state=paused] .flow-pause-icon{display:none}
.high-contrast .hero:has(.hero-flow),.high-contrast .hero:has(.hero-flow) .hero-copy{background:#000}
.high-contrast .flow-surface,.high-contrast .flow-key{filter:grayscale(1)}
.high-contrast .flow-caption>div>span,.high-contrast .flow-topline,.high-contrast .flow-key-labels{color:#fff}
@media(max-width:1150px){.hero-flow{min-height:500px}.flow-caption{gap:18px}.flow-key{width:100px}}
@media(max-width:900px){.hero-flow{height:390px;min-height:390px}.flow-surface{inset:38px 0 75px}.flow-topline{left:28px}.flow-caption{left:28px;right:28px;bottom:30px}}
@media(max-width:650px){.hero-flow{height:320px;min-height:320px}.flow-topline{top:23px;left:18px;right:77px;font-size:9px}.flow-direction{font-size:8px;gap:7px}.flow-direction svg{width:28px}.flow-surface{inset:34px -18px 63px}.flow-caption{left:18px;right:18px;bottom:24px;gap:15px}.flow-caption strong{font-size:15px}.flow-caption>div>span{font-size:10px;margin-top:5px}.flow-key{width:90px}.flow-toggle{top:10px;right:12px}.flow-key-labels{font-size:8px;margin-top:7px}}
@media(prefers-reduced-motion:reduce){.flow-canvas,.flow-poster{transition:none}}
@media print{.flow-canvas,.flow-toggle{display:none!important}.hero-flow .flow-poster{opacity:1!important}}