.steps{background:#f5f5f5;padding:64px 0 66px}
.steps .section-head{display:block;text-align:center;margin:0 0 44px}
.steps .eyebrow{justify-content:center;font-size:10px;letter-spacing:1.8px}
.steps h2{margin-top:14px;font-size:clamp(28px,3vw,42px);letter-spacing:-1px;line-height:1.2}
.steps-intro{font-size:16px;color:#747469;line-height:1.7;margin:14px 0 0}
.steps .step-grid{position:relative;gap:35px}
.steps .step-grid::before{content:"";position:absolute;top:34px;left:12.5%;right:12.5%;height:1px;background:#d4d4d4}
.steps .step-grid article{position:relative;border:0;padding:0;text-align:center;display:flex;flex-direction:column;align-items:center}
.steps .step-icon{width:86px;height:68px;display:grid;place-items:center;background:#f5f5f5;position:relative;margin:0 0 18px}
.steps .step-icon svg{width:44px;height:44px;color:#292b27}
.steps article>.step-number{display:block;font-family:Montserrat,Arial,sans-serif;font-style:normal;font-size:10px;line-height:1.5;letter-spacing:1.6px;color:var(--logo-gold);font-weight:700;margin-bottom:10px}
.steps .step-grid h3{font-size:19px;line-height:1.4;letter-spacing:-.2px;margin:0 0 12px}
.steps .step-grid p{font-size:16px;line-height:1.75;color:#747469;max-width:245px;margin:0}
@media(max-width:1000px){.steps .step-grid{gap:22px}.steps .step-grid h3{font-size:17px}.steps .step-grid p{font-size:15px}}
@media(max-width:760px){.steps{padding:44px 0 46px}.steps .section-head{margin-bottom:28px}.steps h2{font-size:29px;max-width:330px;margin-left:auto;margin-right:auto}.steps-intro{font-size:15px;margin-top:12px}.steps .step-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 20px}.steps .step-grid::before{display:none}.steps .step-icon{height:54px;width:64px;margin-bottom:14px}.steps .step-icon svg{width:40px;height:40px}.steps .step-grid h3{font-size:16px;margin-bottom:8px}.steps .step-grid p{font-size:14px;line-height:1.7}.steps article>.step-number{font-size:9px;letter-spacing:1.3px;margin-bottom:8px}}

/* Individual process cards with quiet background numbering. */
.steps .step-grid{gap:22px;align-items:stretch}
.steps .step-grid::before{content:none}
.steps .step-grid article{isolation:isolate;overflow:hidden;background:#fff;border:1px solid #e4e4e4;border-radius:18px;padding:34px 22px 30px;min-height:290px;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.steps .step-grid article>.step-number{position:absolute;top:7px;right:13px;z-index:0;font-size:94px;line-height:1;font-weight:700;letter-spacing:-7px;color:var(--logo-gold);opacity:.09;margin:0;pointer-events:none;user-select:none}
.steps .step-icon{z-index:1;background:transparent;width:70px;height:66px;margin-bottom:25px}
.steps .step-grid h3,.steps .step-grid p{position:relative;z-index:1}
.steps .step-grid h3{margin-bottom:13px}
.steps .step-grid p{font-size:15px;line-height:1.8}
@media(hover:hover) and (pointer:fine){.steps .step-grid article:hover{transform:translateY(-6px);border-color:var(--logo-gold);box-shadow:0 16px 32px #57451b12}}
@media(max-width:1000px){.steps .step-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.steps .step-grid article{min-height:270px}}
@media(max-width:760px){.steps .step-grid{gap:16px}.steps .step-grid article{padding:28px 18px;min-height:270px}.steps .step-grid article>.step-number{font-size:82px;right:12px}.steps .step-grid p{font-size:14px}.steps .step-icon{margin-bottom:20px}}
@media(max-width:480px){.steps .step-grid{grid-template-columns:1fr}.steps .step-grid article{min-height:245px}.steps .step-grid p{max-width:280px}}
@media(prefers-reduced-motion:reduce){.steps .step-grid article{transition:none}.steps .step-grid article:hover{transform:none}}

.steps .step-grid article>.step-number{top:auto;bottom:-10px;right:4px;font-size:156px;letter-spacing:-12px;color:#737373;opacity:.075}
@media(max-width:760px){.steps .step-grid article>.step-number{font-size:145px;bottom:-10px;right:6px}}

/* Small process-specific icon motions; the card itself stays upright. */
.steps .step-icon svg{transform-origin:center;overflow:visible}
@media(hover:hover) and (pointer:fine){
.steps .step-grid article:nth-child(1):hover .step-icon svg{animation:step-shirt-sway .85s ease-in-out both}
.steps .step-grid article:nth-child(2):hover .step-icon svg path{animation:step-upload-rise .9s ease-in-out both}
.steps .step-grid article:nth-child(3):hover .step-icon svg path:last-child{stroke-dasharray:32;animation:step-check-draw .85s ease-out both}
.steps .step-grid article:nth-child(4):hover .step-icon svg{animation:step-package-bounce .85s ease-in-out both}
}
@keyframes step-shirt-sway{0%,100%{transform:rotate(0) scale(1)}25%{transform:rotate(-9deg) scale(1.08)}55%{transform:rotate(7deg) scale(1.08)}80%{transform:rotate(-3deg) scale(1.03)}}
@keyframes step-upload-rise{0%,100%{transform:translateY(0);opacity:1}35%{transform:translateY(-6px);opacity:.5}60%{transform:translateY(2px);opacity:1}80%{transform:translateY(-2px)}}
@keyframes step-check-draw{0%{stroke-dashoffset:32;opacity:.2}20%{opacity:1}100%{stroke-dashoffset:0;opacity:1}}
@keyframes step-package-bounce{0%,100%{transform:translateY(0) scale(1)}30%{transform:translateY(-8px) scale(1.06)}55%{transform:translateY(2px) scale(1.02,.96)}78%{transform:translateY(-3px) scale(1)}}
@media(prefers-reduced-motion:reduce){.steps .step-icon svg,.steps .step-icon svg path{animation:none!important}}

.steps{background:#2e302b}
.steps .eyebrow{color:var(--logo-gold)}
.steps h2{color:#f5f5f5}
.steps .steps-intro{color:#d4d4d4}

.three-step-process .step-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.three-step-process .step-grid p{max-width:290px}
@media(hover:hover) and (pointer:fine){.three-step-process .step-grid article:nth-child(1):hover .step-icon svg{animation:step-package-bounce .85s ease-in-out both}.three-step-process .step-grid article:nth-child(2):hover .step-icon svg{animation:step-package-bounce .85s ease-in-out both}.three-step-process .step-grid article:nth-child(2):hover .step-icon svg path{animation:none}}
@media(max-width:1000px){.three-step-process .step-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.three-step-process .step-grid{grid-template-columns:1fr}.three-step-process h2{max-width:400px}}

/* Homepage process: a quiet workshop backdrop that stays behind scrolling cards. */
.steps.steps-parallax{
  background-color:#2e302b;
  background-image:linear-gradient(rgba(30,33,30,.82),rgba(30,33,30,.86)),url("assets/home-steps-workshop.webp");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  background-attachment:fixed;
}
@media(max-width:760px),(prefers-reduced-motion:reduce){
  .steps.steps-parallax{background-attachment:scroll}
}
/* Match the trust bar's gold icon response on process cards. */
.steps .step-icon svg{transition:color .2s ease}
@media(hover:hover) and (pointer:fine){
  .steps .step-grid article:hover .step-icon svg{color:var(--logo-gold)}
}
.steps .step-grid article:focus-within .step-icon svg{color:var(--logo-gold)}
@media(prefers-reduced-motion:reduce){.steps .step-icon svg{transition:none}}