.home-process { padding-block: clamp(72px, 7vw, 100px); background: var(--color-white); }.home-process__heading { max-width: 680px; margin: 0 auto; text-align: center; }.home-process__heading .eyebrow { margin-bottom: 10px; }.home-process__heading h2 { margin-bottom: 14px; }.home-process__heading > p:last-child { margin: 0; color: var(--color-text); font-size: clamp(1rem, 1.5vw, 1.12rem); }.home-process__steps { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; margin: 50px 0 0; padding: 0; list-style: none; }.home-process__steps::before { position: absolute; z-index: 0; top: 39px; right: 12.5%; left: 12.5%; height: 2px; background: var(--color-border); content: ''; }.home-process__step { position: relative; z-index: 1; min-width: 0; text-align: center; }.home-process__marker { position: relative; display: grid; width: 78px; height: 78px; margin: 0 auto 22px; place-items: center; }.home-process__number { position: absolute; z-index: 2; top: -7px; right: -10px; display: grid; width: 30px; height: 30px; place-items: center; border: 2px solid var(--color-white); border-radius: 50%; background: var(--color-accent); color: var(--color-white); font-family: var(--font-heading); font-size: .74rem; font-weight: 800; }.home-process__icon { display: grid; width: 76px; height: 76px; place-items: center; border: 1px solid var(--color-border); border-radius: 50%; background: var(--color-white); color: var(--color-navy); box-shadow: 0 8px 20px rgba(6, 29, 59, .1); transition: transform var(--transition), box-shadow var(--transition); }.home-process__icon svg { width: 35px; height: 35px; }.home-process__icon path:last-child { stroke: var(--color-accent); }.home-process__step:hover .home-process__icon { transform: translateY(-3px); box-shadow: 0 12px 24px rgba(6, 29, 59, .14); }.home-process__copy h3 { margin: 0 0 9px; color: var(--color-heading); font-size: 1.24rem; }.home-process__copy p { max-width: 250px; margin: 0 auto; color: var(--color-text); font-size: .94rem; line-height: 1.6; }
@media (max-width: 960px) { .home-process { padding-block: 76px; }.home-process__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 38px 30px; }.home-process__steps::before { display: none; }.home-process__step { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 18px; padding: 20px; border: 1px solid var(--color-border); border-radius: 14px; background: var(--color-background); text-align: left; }.home-process__marker { margin: 0; }.home-process__copy { align-self: center; }.home-process__copy p { max-width: none; margin: 0; } }
@media (max-width: 640px) { .home-process { padding-block: 56px; }.home-process__steps { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 38px; }.home-process__steps::before { display: block; top: 42px; bottom: 42px; left: 38px; width: 2px; height: auto; right: auto; }.home-process__step { grid-template-columns: 68px minmax(0, 1fr); gap: 15px; padding: 0 0 28px; border: 0; border-radius: 0; background: transparent; }.home-process__step:last-child { padding-bottom: 0; }.home-process__marker { width: 68px; height: 68px; }.home-process__icon { width: 66px; height: 66px; }.home-process__icon svg { width: 30px; height: 30px; }.home-process__number { top: -6px; right: -3px; }.home-process__copy h3 { font-size: 1.12rem; }.home-process__copy p { font-size: .9rem; } }
@media (prefers-reduced-motion: reduce) { .home-process__icon { transition: none; }.home-process__step:hover .home-process__icon { transform: none; } }