/* How It Works section only. The headline uses the existing Hero/Solutions crimson gradient. */
.how-section{
 --hero-red-gradient:linear-gradient(180deg,#B5121B 0%,#A61019 62%,#8F0D15 100%);
 width:min(100%,1536px);
 margin:0 auto;
 min-height:220vh;
 padding:0 5%;
 background:#050505;
}
.how-inner{
 position:sticky;
 top:0;
 max-width:1382px;
 height:100vh;
 margin:0 auto;
 padding:clamp(72px,9vh,100px) 0 clamp(82px,11vh,116px);
}
.how-header h2{
 margin:0;
 font-family:Anton,Impact,'Arial Narrow',sans-serif;
 font-size:clamp(56px,5.05vw,78px);
 font-weight:400;
 line-height:1.05;
 letter-spacing:-.014em;
}
.how-header h2 span,.how-header h2 strong{display:block;font:inherit}
.how-header h2 span{color:#f2f0ef}
.how-header h2 strong{
 margin-top:.07em;
 background:var(--hero-red-gradient);
 background-clip:text;
 -webkit-background-clip:text;
 color:transparent;
 -webkit-text-fill-color:transparent;
}
.how-journey{
 position:relative;
 display:grid;
 grid-template-columns:repeat(4,minmax(0,1fr));
 gap:clamp(28px,3.1vw,48px);
 margin:clamp(86px,10vh,112px) 0 0;
 padding:0;
 list-style:none;
}
.how-step{position:relative;min-width:0}
.how-step__rail{
 position:relative;
 z-index:1;
 display:flex;
 align-items:center;
 height:86px;
}
.how-step__number{
 display:block;
 color:transparent;
 -webkit-text-stroke:1px rgba(242,240,239,.5);
 font-family:Anton,Impact,'Arial Narrow',sans-serif;
 font-size:61px;
 font-weight:400;
 line-height:1;
 letter-spacing:-.035em;
}
.how-step__connector{
 flex:0 0 auto;
 width:26px;
 height:1px;
 margin:0 14px;
 background:rgba(245,243,241,.19);
}
.how-step__icon{
 position:relative;
 display:grid;
 flex:0 0 auto;
 place-items:center;
 width:72px;
 height:72px;
 border:1px solid rgba(245,243,241,.17);
 border-radius:11px;
 background:linear-gradient(145deg,#151515,#090909 76%);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.045),inset 0 -7px 14px rgba(0,0,0,.22);
 color:#eceae7;
 transition:border-color .3s ease,box-shadow .3s ease;
}
.how-step__icon svg{
 width:34px;
 height:34px;
 fill:none;
 stroke:currentColor;
 stroke-width:1.65;
 stroke-linecap:round;
 stroke-linejoin:round;
}
.how-step h3{
 margin:24px 0 11px;
 color:#f2f0ef;
 font-size:clamp(17px,1.38vw,21px);
 font-weight:700;
 line-height:1.35;
 letter-spacing:.005em;
}
.how-step p{
 max-width:255px;
 margin:0;
 color:#aaa6a8;
 font-size:16px;
 font-weight:400;
 line-height:1.55;
}
@media(hover:hover){
 .how-step:hover .how-step__icon{
  border-color:rgba(245,243,241,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),inset 0 -7px 14px rgba(0,0,0,.22);
 }
}
.how-section.is-animated .how-step{
 opacity:0;
 transform:translateY(11px);
 transition:opacity .55s ease,transform .55s cubic-bezier(.22,1,.36,1);
}
.how-section.is-animated .how-step.is-visible{opacity:1;transform:none}
.how-section.is-animated .how-step:nth-child(2).is-visible{transition-delay:.08s}
.how-section.is-animated .how-step:nth-child(3).is-visible{transition-delay:.16s}
.how-section.is-animated .how-step:nth-child(4).is-visible{transition-delay:.24s}
@media(max-width:1100px){
 .how-section{min-height:calc(100vh + 380px)}
 .how-inner{position:static;height:auto;min-height:100vh;padding:72px 0 90px}
 .how-journey{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:42px;row-gap:54px;margin-top:72px}
}
@media(min-width:651px) and (max-width:1100px) and (min-height:900px){
 .how-section{min-height:220vh}
 .how-inner{position:sticky;top:0;height:100vh}
}
@media(max-width:650px){
 .how-section{padding:0 6%}
 .how-inner{padding:62px 0 78px}
 .how-header h2{font-size:clamp(39px,10.2vw,61px);line-height:1.06;letter-spacing:-.018em}
 .how-journey{display:block;margin-top:64px;padding-left:0}
 .how-step{min-height:157px;margin:0 0 39px;padding-left:85px}
 .how-step:last-child{margin-bottom:0}
 .how-step:not(:last-child)::after{
  content:"";
  display:none;
  position:absolute;
  top:28px;
  bottom:-67px;
  left:60px;
  width:1px;
  background:rgba(245,243,241,.12);
 }
 .how-step__rail{display:block;height:56px}
 .how-step__number{position:absolute;top:1px;left:-85px;padding:0;font-size:47px}
 .how-step__connector{position:absolute;top:28px;left:-35px;width:25px;margin:0}
 .how-step__icon{width:56px;height:56px;margin:0;border-radius:9px}
 .how-step__icon svg{width:27px;height:27px}
 .how-step h3{margin:18px 0 8px;font-size:18px;line-height:1.3}
 .how-step p{max-width:290px;font-size:15px;line-height:1.55}
}
@media(max-width:390px){
 .how-header h2{font-size:38px}
 .how-step{padding-left:76px}
 .how-step__number{left:-76px}
 .how-step__connector{left:-27px;width:17px}
}
@media(max-width:1100px) and (min-width:651px){.how-step__connector{margin-inline:12px}}
@media(max-height:700px) and (min-width:1101px){
 .how-inner{padding-top:50px;padding-bottom:48px}
 .how-journey{margin-top:55px}
}
@media(prefers-reduced-motion:reduce){
 .how-section{min-height:100vh}
 .how-inner{position:static;height:auto;min-height:100vh}
 .how-step__icon,.how-section.is-animated .how-step{transition:none}
 .how-section.is-animated .how-step{opacity:1;transform:none}
}