/* Homepage process: four steps from the first call to a finished roof. */
.process-section { position:relative; z-index:5; padding-top:120px; padding-bottom:40px; background:var(--paper); }
.home-preview .process-section { z-index:30; }
.process-steps { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin:0; padding:0; list-style:none; }
.process-steps li { position:relative; padding:26px 26px 30px; border:1px solid #e3e8e5; border-radius:24px; background:#fff; box-shadow:0 1px 2px #1a2e2808,0 24px 44px -36px #1a2e2840; }
.process-step-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:42px; }
.process-icon { display:grid; place-items:center; width:44px; height:44px; border-radius:13px; background:#173342; color:#fff; }
.process-icon .icon { width:21px; height:21px; }
.process-number { color:#c8963a; font-size:13px; font-weight:600; letter-spacing:.06em; }
.process-steps h3 { margin:0 0 10px; font-size:19px; font-weight:500; letter-spacing:-.03em; }
.process-steps p { margin:0; font-size:14px; line-height:1.65; }
.process-actions { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:14px 28px; margin-top:40px; }
.process-call { display:inline-flex; align-items:center; gap:10px; font-size:14px; font-weight:500; }
.process-call .icon { width:18px; height:18px; color:var(--muted); }
.process-call:hover { text-decoration:underline; text-underline-offset:4px; }

@media (max-width:1000px) {
 .process-steps { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:760px) {
 .process-section { padding-top:80px; padding-bottom:24px; }
 .process-steps { grid-template-columns:1fr; gap:10px; }
 .process-steps li { display:grid; grid-template-columns:44px minmax(0,1fr); column-gap:18px; padding:22px 20px; border-radius:20px; }
 .process-step-top { display:contents; }
 .process-icon { grid-row:span 2; }
 .process-number { position:absolute; top:22px; right:20px; font-size:12px; }
 .process-steps h3 { margin:10px 40px 6px 0; font-size:17px; }
 .process-actions { flex-direction:column; align-items:stretch; gap:18px; margin-top:28px; }
 .process-actions .button { width:100%; }
 .process-call { align-self:center; }
}