.hp-ecosystem{position:relative;padding:clamp(90px,10vw,150px) 0;background:var(--cream,#fff5ed);color:#171719;overflow:clip}
.hp-ecosystem-sticky{position:relative;min-height:900px;overflow:hidden}
.hp-ecosystem-heading{position:relative;z-index:10;width:min(92%,1536px);max-width:1536px;margin-inline:auto}
.hp-ecosystem-heading>.eyebrow{margin:0 0 24px;color:#426328;font:750 clamp(15px,1.35vw,20px)/1.2 'Instrument Sans',Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase}
.hp-ecosystem-heading h2{max-width:650px;margin:0 0 22px;color:#171719;font:650 clamp(58px,7vw,108px)/.88 'Instrument Sans',Arial,sans-serif;letter-spacing:-.072em;text-wrap:balance}
.hp-ecosystem-heading>p:not(.eyebrow){max-width:560px;margin:0;color:#655951;font:400 clamp(16px,1.25vw,20px)/1.55 Arial,sans-serif}
.hp-ecosystem-counter{display:flex;align-items:center;gap:12px;margin-top:34px;color:#171719;font:800 12px/1 Arial,sans-serif}
.hp-ecosystem-counter i{position:relative;width:120px;height:2px;background:#17171925;overflow:hidden}
.hp-ecosystem-counter i::after{content:'';position:absolute;inset:0 auto 0 0;width:calc(var(--ecosystem-progress,0) * 100%);background:#6e9e3c;transition:width .1s linear}
.hp-ecosystem-stage{width:min(92%,1536px);max-width:1536px;margin:60px auto 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.hp-ecosystem-stage::before{content:'';position:absolute;width:min(58vw,850px);aspect-ratio:1;left:55%;top:50%;border-radius:50%;background:radial-gradient(circle,#a5f25255 0,#f2bba73b 34%,transparent 68%);transform:translate(-50%,-50%);pointer-events:none}
.hp-ecosystem-card{--ecosystem-rgb:3,4,5;position:relative;isolation:isolate;display:block;aspect-ratio:4/3;border:1px solid #ffffff22;border-radius:26px;background:#030405;color:#f7f8f2;text-decoration:none;overflow:hidden;box-shadow:0 28px 72px #68493735;transform-style:preserve-3d}
.hp-ecosystem-card:nth-child(even){--ecosystem-rgb:135,230,75;border-color:#87e64b;background:#87e64b;color:#0d190a}
.hp-ecosystem-card img{position:absolute;z-index:-2;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:76% center;background:#f3f5f3;transition:transform .75s cubic-bezier(.2,.65,.2,1)}
.hp-ecosystem-card::before{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(90deg,rgba(var(--ecosystem-rgb),1) 0%,rgba(var(--ecosystem-rgb),.97) 29%,rgba(var(--ecosystem-rgb),.48) 67%,rgba(var(--ecosystem-rgb),.08) 100%),linear-gradient(0deg,rgba(var(--ecosystem-rgb),.88),transparent 58%);pointer-events:none}
.hp-ecosystem-card::after{content:"\2197";position:absolute;z-index:3;right:22px;top:22px;display:grid;place-items:center;width:40px;height:40px;border:1px solid currentColor;border-radius:50%;color:inherit;font:400 24px/1 Arial,sans-serif;pointer-events:none;transition:background .25s ease,color .25s ease,transform .25s ease}
.hp-ecosystem-card>div{position:relative;z-index:2;height:100%;padding:26px;display:grid;grid-template-columns:auto 1fr;column-gap:16px;align-content:end;background:transparent}
.hp-ecosystem-card span{grid-row:1/3;color:inherit;font:850 12px/1 Arial,sans-serif;opacity:.66}
.hp-ecosystem-card strong{font:750 clamp(21px,2vw,30px)/1 'Instrument Sans',Arial,sans-serif;letter-spacing:-.04em}
.hp-ecosystem-card small{margin-top:8px;color:inherit;font:500 12px/1.35 Arial,sans-serif;opacity:.8}
.hp-ecosystem-card:focus-visible{outline:3px solid #5f9135;outline-offset:5px}
@media(hover:hover){.hp-ecosystem-card:hover img{transform:scale(1.045)}.hp-ecosystem-card:hover::after{background:#87e64b;color:#0d190a;transform:translate(3px,-3px)}.hp-ecosystem-card:nth-child(even):hover::after{background:#0d190a;color:#87e64b}}

.has-home-ecosystem-motion .hp-ecosystem{height:850vh;padding:0}
.has-home-ecosystem-motion .hp-ecosystem-sticky{position:sticky;top:0;height:100svh;min-height:600px}
.has-home-ecosystem-motion .hp-ecosystem-heading{position:absolute;z-index:10;top:calc(var(--header-height,92px) + clamp(20px,4vh,52px));left:max(4%,calc((100vw - 1536px)/2));width:min(430px,34vw);margin:0}
.has-home-ecosystem-motion .hp-ecosystem-stage{position:absolute;inset:0;width:auto;max-width:none;margin:0;display:block;perspective:1800px}
.has-home-ecosystem-motion .hp-ecosystem-card{position:absolute;left:68%;top:44%;width:min(580px,42vw,calc((100svh - 150px)*1.2));will-change:transform,opacity}

@media(max-width:1120px){
 .hp-ecosystem-stage{grid-template-columns:repeat(2,minmax(0,1fr))}
 .has-home-ecosystem-motion .hp-ecosystem-heading{left:24px;top:calc(var(--header-height,92px) + 20px);width:calc(100% - 48px)}
 .has-home-ecosystem-motion .hp-ecosystem-heading h2{max-width:620px;font-size:clamp(48px,8vw,78px)}
 .has-home-ecosystem-motion .hp-ecosystem-heading>p:not(.eyebrow){max-width:570px;font-size:15px}
 .has-home-ecosystem-motion .hp-ecosystem-card{left:55%;top:65%;width:min(570px,76vw,calc((100svh - 200px)*1.25))}
}
@media(max-height:760px) and (min-width:1121px){
 .has-home-ecosystem-motion .hp-ecosystem-heading{top:calc(var(--header-height,92px) + 14px);width:min(390px,32vw)}
 .has-home-ecosystem-motion .hp-ecosystem-heading>.eyebrow{margin-bottom:14px;font-size:14px}
 .has-home-ecosystem-motion .hp-ecosystem-heading h2{font-size:clamp(48px,5.2vw,70px);margin-bottom:14px}
 .has-home-ecosystem-motion .hp-ecosystem-heading>p:not(.eyebrow){font-size:14px;line-height:1.42}
 .has-home-ecosystem-motion .hp-ecosystem-counter{margin-top:18px}
 .has-home-ecosystem-motion .hp-ecosystem-card{left:70%;top:43%;width:min(470px,36vw,calc((100svh - 138px)*1.2))}
}
@media(max-width:650px){
 .hp-ecosystem{padding:80px 0}.hp-ecosystem-sticky{min-height:0}.hp-ecosystem-heading,.hp-ecosystem-stage{width:calc(100% - 36px)}.hp-ecosystem-heading h2{font-size:clamp(48px,14vw,70px)}.hp-ecosystem-stage{grid-template-columns:1fr}.hp-ecosystem-card{border-radius:18px}
 .has-home-ecosystem-motion .hp-ecosystem{height:740vh;padding:0}
 .has-home-ecosystem-motion .hp-ecosystem-sticky{min-height:620px}
 .has-home-ecosystem-motion .hp-ecosystem-heading{left:18px;top:calc(var(--header-height,92px) + 14px);width:calc(100% - 36px)}
 .has-home-ecosystem-motion .hp-ecosystem-heading>.eyebrow{margin-bottom:13px;font-size:13px}
 .has-home-ecosystem-motion .hp-ecosystem-heading h2{max-width:92%;margin-bottom:12px;font-size:clamp(40px,12vw,57px)}
 .has-home-ecosystem-motion .hp-ecosystem-heading>p:not(.eyebrow){max-width:96%;font-size:13px;line-height:1.45}
 .has-home-ecosystem-motion .hp-ecosystem-counter{margin-top:16px}
 .has-home-ecosystem-motion .hp-ecosystem-card{left:50%;top:69%;width:min(86vw,calc((100svh - 340px)*1.25));border-radius:17px}
 .hp-ecosystem-card>div{padding:13px 15px}.hp-ecosystem-card strong{font-size:17px}.hp-ecosystem-card small{font-size:10px}
}
@media(prefers-reduced-motion:reduce){.has-home-ecosystem-motion .hp-ecosystem{height:auto;padding:90px 0}.has-home-ecosystem-motion .hp-ecosystem-sticky{position:relative;top:auto;height:auto;min-height:0}.has-home-ecosystem-motion .hp-ecosystem-heading{position:relative;top:auto;left:auto;width:min(92%,1536px);margin-inline:auto}.has-home-ecosystem-motion .hp-ecosystem-stage{position:relative;inset:auto;width:min(92%,1536px);margin:60px auto 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.has-home-ecosystem-motion .hp-ecosystem-card{position:relative;top:auto;left:auto;width:auto;opacity:1!important;transform:none!important}}
@media(max-width:760px) and (prefers-reduced-motion:reduce){.has-home-ecosystem-motion .hp-ecosystem-stage{grid-template-columns:1fr}}
/* On small screens reserve space for the real header, heading and complete card. */
@media(max-width:1120px) and (prefers-reduced-motion:no-preference){
 .has-home-ecosystem-motion .hp-ecosystem-sticky{height:100svh;min-height:0}
 .has-home-ecosystem-motion .hp-ecosystem-heading h2{font-size:clamp(30px,6vw,46px);line-height:1.02;max-width:90%;margin-bottom:10px}
 .has-home-ecosystem-motion .hp-ecosystem-heading>.eyebrow{font-size:12px;margin-bottom:10px;line-height:1.4}
 .has-home-ecosystem-motion .hp-ecosystem-heading>p:not(.eyebrow){font-size:13px;line-height:1.4;max-width:570px}
 .has-home-ecosystem-motion .hp-ecosystem-counter{margin-top:12px}
 .has-home-ecosystem-motion .hp-ecosystem-card{max-width:calc(100vw - 48px)}
 .has-home-ecosystem-motion .hp-ecosystem-card>div{padding:10px 12px;column-gap:10px}
 .has-home-ecosystem-motion .hp-ecosystem-card strong{font-size:clamp(14px,3.2vw,20px)}
 .has-home-ecosystem-motion .hp-ecosystem-card small{font-size:10px}
}