/* Four illustrated steps. Text stays live and images do not require hover or motion. */
#main #process{height:auto;min-height:0;overflow:visible}
#process .steps.process-image-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin:48px 0 0;align-items:stretch}
#process .process-image-steps .step{display:flex;flex-direction:column;position:relative;isolation:isolate;min-width:0;padding:0;border:1px solid #ffffff26;border-radius:24px;overflow:hidden;background:var(--navy);color:#fff}
#process .process-image-steps .step::before{top:18px;right:18px;z-index:3;display:grid;place-items:center;width:48px;height:48px;border:1px solid #11122326;border-radius:50%;background:var(--gold);color:var(--navy);font-size:21px;line-height:1;-webkit-text-stroke:0;font-variant-numeric:tabular-nums}
#process .process-image-steps .step::after{content:none}
#process .step-art{position:relative;aspect-ratio:1;overflow:hidden;flex:none}
#process .step-art img{display:block;width:100%;height:100%;object-fit:cover}
#process .step-art::after{content:"";position:absolute;inset:65% 0 0;background:linear-gradient(transparent,var(--navy));pointer-events:none}
#process .step-copy{position:relative;z-index:2;margin-top:-24px;padding:0 24px 28px;flex:1}
#process .process-image-steps .step h3{margin:0 0 14px;color:#fff;font-size:clamp(20px,1.5vw,27px);line-height:1.2;letter-spacing:0}
#process .process-image-steps .step p{margin:0;color:#d9dbea;font-size:16px;line-height:1.65}
@media(max-width:1199px){
  #process .steps.process-image-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
}
@media(max-width:599px){
  #process .steps.process-image-steps{grid-template-columns:minmax(0,1fr);gap:24px;margin-top:32px}
  #process .process-image-steps .step h3{font-size:24px}
}