/* Problem section only. The existing Hero and its styles remain untouched. */
.problem-section{
 --hero-red-gradient:linear-gradient(180deg,#B5121B 0%,#A61019 62%,#8F0D15 100%);
 position:relative;
 isolation:isolate;
 width:min(100%,1536px);
 margin:0 auto;
 padding:48px 5% 0;
 overflow:hidden;
 background:#050505;
}
.problem-stage{
 display:grid;
 grid-template-columns:minmax(0,.96fr) minmax(0,1.04fr);
 align-items:center;
 gap:clamp(34px,4vw,70px);
 min-height:410px;
 padding-bottom:44px;
}
.problem-intro{position:relative;z-index:2;min-width:0}
.problem-eyebrow{
 display:flex;
 align-items:center;
 gap:13px;
 margin:0 0 30px;
 color:var(--red);
 font-size:12px;
 font-weight:500;
 line-height:1;
 letter-spacing:.3em;
}
.problem-eyebrow span{letter-spacing:.12em}
.problem-eyebrow span,.problem-eyebrow b,.problem-intro h2 strong,.journey-number{
 background:var(--hero-red-gradient);
 background-clip:text;
 -webkit-background-clip:text;
 color:transparent;
 -webkit-text-fill-color:transparent;
}
.problem-eyebrow b{font:inherit;letter-spacing:inherit}
.problem-eyebrow i{display:block;width:35px;height:1px;background:linear-gradient(90deg,var(--red),transparent)}
.problem-intro h2{
 margin:0;
 font-family:Anton,Impact,'Arial Narrow',sans-serif;
 font-size:clamp(54px,5.1vw,78px);
 font-weight:400;
 line-height:.95;
 letter-spacing:-.018em;
}
.problem-intro h2 span,.problem-intro h2 strong{display:block;font:inherit}
.problem-intro h2 span{color:#f2f0ef}
.problem-intro h2 strong{margin-top:.06em}
.problem-subtitle{
 margin:24px 0 0;
 color:#dedadc;
 font-size:12px;
 font-weight:300;
 line-height:1;
 letter-spacing:.3em;
}
.problem-support{
 max-width:520px;
 margin:23px 0 0;
 color:#aaa6a8;
 font-size:17px;
 font-weight:300;
 line-height:1.65;
}
.problem-system{
 position:relative;
 z-index:1;
 width:100%;
 max-width:760px;
 margin:0;
 justify-self:end;
}
.problem-system img{
 display:block;
 width:100%;
 height:auto;
 object-fit:contain;
 -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 3%,#000 97%,transparent 100%),linear-gradient(0deg,transparent 0,#000 3%,#000 97%,transparent 100%);
 -webkit-mask-composite:source-in;
 mask-image:linear-gradient(90deg,transparent 0,#000 3%,#000 97%,transparent 100%),linear-gradient(0deg,transparent 0,#000 3%,#000 97%,transparent 100%);
 mask-composite:intersect;
}
.problem-divider{
 display:grid;
 grid-template-columns:minmax(40px,1fr) auto minmax(72px,.6fr) auto;
 align-items:center;
 gap:18px;
 padding:0 0 22px;
}
.problem-divider span{height:1px;background:linear-gradient(90deg,rgba(255,255,255,.05),rgba(255,255,255,.2))}
.problem-divider span:nth-child(3){background:linear-gradient(90deg,rgba(255,255,255,.2),rgba(255,255,255,.05))}
.problem-divider p{
 margin:0;
 color:var(--red);
 font-size:10px;
 font-weight:500;
 line-height:1;
 letter-spacing:.34em;
 white-space:nowrap;
}
.problem-divider p:last-child{color:#706d6f;font-size:9px;letter-spacing:.31em}
.problem-journey{
 position:relative;
 isolation:isolate;
 display:grid;
 grid-template-columns:repeat(6,minmax(0,1fr));
 list-style:none;
 margin:0;
 padding:10px 0 28px;
}
.journey-item{
 position:relative;
 z-index:1;
 min-width:0;
 min-height:270px;
 padding:0 clamp(16px,1.45vw,24px) 12px;
 border-left:1px solid rgba(255,255,255,.085);
}
.journey-item:first-of-type{border-left:0;padding-left:8px}
.journey-number{
 display:block;
 font-family:Anton,Impact,'Arial Narrow',sans-serif;
 font-size:18px;
 font-weight:400;
 line-height:1;
 letter-spacing:.03em;
}
.journey-guide{
 position:absolute;
 top:28px;
 left:clamp(16px,1.45vw,24px);
 width:1px;
 height:42px;
 background:linear-gradient(180deg,color-mix(in srgb,var(--red) 62%,transparent),color-mix(in srgb,var(--red) 14%,transparent));
}
.journey-item:first-of-type .journey-guide{left:8px}
.journey-guide::after{
 content:"";
 position:absolute;
 left:-3px;
 bottom:-7px;
 width:7px;
 height:7px;
 border:1px solid color-mix(in srgb,var(--red) 70%,transparent);
 border-radius:50%;
 background:#080808;
 box-shadow:0 0 0 2px color-mix(in srgb,var(--red) 8%,transparent);
}
.journey-icon{
 position:relative;
 z-index:2;
 display:grid;
 place-items:center;
 width:72px;
 height:72px;
 margin:14px auto 15px;
 border:1px solid rgba(245,243,241,.18);
 border-radius:50%;
 background:radial-gradient(circle at 36% 28%,#222 0,#151515 55%,#0d0d0d 100%);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 0 0 1px color-mix(in srgb,var(--red) 3.5%,transparent);
}
.journey-icon svg{
 width:32px;
 height:32px;
 fill:none;
 stroke:#e9e6e4;
 stroke-width:1.55;
 stroke-linecap:round;
 stroke-linejoin:round;
}
.journey-item h3{
 margin:0;
 min-height:60px;
 color:#f0edeb;
 font-size:16px;
 font-weight:600;
 line-height:1.35;
 letter-spacing:-.02em;
 text-wrap:pretty;
}
.journey-item p{
 margin:6px 0 0;
 color:#969294;
 font-size:14px;
 font-weight:300;
 line-height:1.58;
}
.journey-footer{
 display:flex;
 align-items:center;
 justify-content:center;
 gap:14px;
 padding:0 0 40px;
}
.journey-footer span{
 width:clamp(50px,13vw,180px);
 height:1px;
 background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--red) 54%,transparent));
}
.journey-footer span:last-child{background:linear-gradient(90deg,color-mix(in srgb,var(--red) 54%,transparent),transparent)}
.journey-footer p{
 margin:0;
 color:#777375;
 font-size:9px;
 font-weight:400;
 line-height:1;
 letter-spacing:.36em;
 white-space:nowrap;
}
@media(max-width:1199px){
 .problem-section{padding-top:44px}
 .problem-stage{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:28px;min-height:370px;padding-bottom:42px}
}
@media(max-width:1100px){
 .problem-divider{grid-template-columns:1fr auto .55fr auto}
 .problem-journey{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:34px;padding-top:10px}
 .journey-item{min-height:260px;padding-inline:28px}
 .journey-item:first-of-type,.journey-item:nth-of-type(4){border-left:0;padding-left:12px}
 .journey-item:nth-of-type(4) .journey-guide{left:12px}
 .journey-guide{left:28px}
 .journey-item h3{min-height:44px;font-size:17px}
 .journey-item p{max-width:250px;font-size:14px}
}
@media(max-width:760px){
 .problem-section{padding:44px 5% 0}
 .problem-stage{grid-template-columns:1fr;gap:34px;min-height:0;padding-bottom:44px}
 .problem-eyebrow{margin-bottom:24px;font-size:11px}
 .problem-intro h2{font-size:clamp(46px,12vw,68px);line-height:.96}
 .problem-subtitle{margin-top:19px;font-size:11px;letter-spacing:.22em}
 .problem-support{margin-top:19px;max-width:480px;font-size:16px;line-height:1.6}
 .problem-system{justify-self:center;max-width:650px;width:106%;margin-inline:-3%}
 .problem-divider{grid-template-columns:1fr auto 1fr;gap:13px;padding-bottom:28px}
 .problem-divider p:last-child{display:none}
}
@media(max-width:650px){
 .problem-stage{gap:30px;padding-bottom:40px}
 .problem-intro h2{font-size:clamp(42px,12.4vw,54px)}
 .problem-system{width:112%;margin-inline:-6%}
 .problem-journey{grid-template-columns:1fr;row-gap:0;padding:0 0 26px}
 .journey-item,.journey-item:first-of-type,.journey-item:nth-of-type(4){
  min-height:180px;
  padding:0 0 32px 88px;
  border-left:0;
 }
 .journey-guide{display:none}
 .journey-number{font-size:17px}
 .journey-icon{position:absolute;top:36px;left:0;width:64px;height:64px;margin:0}
 .journey-icon svg{width:28px;height:28px}
 .journey-item h3{min-height:0;margin-top:16px;font-size:17px}
 .journey-item p{max-width:420px;margin-top:8px;font-size:14px;line-height:1.55}
 .journey-footer{gap:10px;padding-bottom:40px}
 .journey-footer span{width:34px}
 .journey-footer p{font-size:8px;letter-spacing:.24em}
}
@media(max-width:390px){
 .problem-intro h2{font-size:41px}
}
