/* How engagements work: three tiers assemble one by one (audit, build, operate). */
#approach .head{margin-bottom:40px}
#approach .approach-title{white-space:nowrap;max-width:none;font-size:clamp(40px,5vw,78px)}
#approach .approach-title span{color:var(--red)}
.tiers-rail{height:2px;background:#e2e2e2;margin-bottom:24px;position:relative;overflow:hidden}
.tiers-rail i{position:absolute;inset:0;background:var(--red);transform:scaleX(var(--rail,1));transform-origin:left}
#approach.ap-on .tier{will-change:transform,opacity;transition:background .4s}
#approach.ap-on .tier.landed{transition:transform .35s,background .4s}
#approach.ap-pinned .approach-pin{position:sticky;top:var(--ap-top,88px)}
@keyframes apPop{0%{transform:scale(1)}40%{transform:scale(1.35)}100%{transform:scale(1)}}
#approach .tier.landed .glyph [fill="var(--red)"]{transform-box:fill-box;transform-origin:center;animation:apPop .7s cubic-bezier(.2,.7,.2,1) 1}
@media(max-width:900px){#approach .approach-title{white-space:normal;font-size:clamp(40px,10vw,56px)}.tiers-rail{display:none}}
@media(prefers-reduced-motion:reduce){#approach .tier{transform:none!important;opacity:1!important}.tiers-rail i{transform:none}}
/* Compact tiers on desktop so heading and all three cards fit one screen while pinned. */
@media(min-width:901px){
 #approach .head{margin-bottom:28px}
 #approach .head .lede{margin-top:12px}
 #approach .tier{padding:24px 26px!important}
 #approach .tier .glyph{height:62px;width:100px;margin:0 0 16px}
 #approach .tier .tag{margin-bottom:12px}
 #approach .tier h3{font-size:30px}
 #approach .tier p{font-size:15px;line-height:1.55;margin:10px 0 14px}
 #approach .tier li{font-size:14px;padding:7px 0}
}
@media(min-width:901px) and (max-height:820px){
 #approach .head{margin-bottom:20px}
 #approach .approach-title{font-size:clamp(40px,4.4vw,64px)}
 .tiers-rail{margin-bottom:16px}
 #approach .tier{padding:18px 22px!important}
 #approach .tier .glyph{height:46px;width:80px;margin:0 0 10px}
 #approach .tier h3{font-size:26px}
 #approach .tier p{font-size:14px;margin:8px 0 10px}
 #approach .tier li{font-size:13px;padding:5px 0}
}
body.approach-in-view>.wa{visibility:hidden;pointer-events:none}

/* Cards settle above the page, with a quiet pointer lift after landing. */
#approach .approach-title .ap-period{color:inherit;margin-left:.08em}
#approach .tier{border-radius:12px;border-color:#dedbd5;background:#fff}
#approach .tier:nth-child(2){background:#151515}
#approach.ap-on .tier,#approach.ap-on .tier.landed{transition:translate .55s cubic-bezier(.22,.61,.36,1),background .4s;will-change:transform,opacity}
#approach .tier.landed .glyph [fill="var(--red)"]{animation:none}
@media(hover:hover){#approach.ap-on .tier.landed:hover{translate:0 -8px}}
#approach .tier:focus-within{translate:0 -8px}
@media(prefers-reduced-motion:reduce){#approach .tier{filter:none!important;translate:none!important;box-shadow:0 8px 24px #0000000a!important}}

@media(max-width:900px){#approach .tiers{gap:26px}}