.how-page { --how-navy:#061f2b; }
.how-page .container { max-width:1440px; }
.how-page h2 { font-size:clamp(27px,2.2vw,38px); line-height:1.15; letter-spacing:-.8px; margin:0 0 16px; }
.how-page p { line-height:1.5; }
.how-page .how-label { display:flex; align-items:center; gap:12px; color:var(--red); font-size:11px; font-weight:700; text-transform:uppercase; margin:0 0 16px; }
.how-label::before { content:''; width:28px; height:3px; background:var(--red); flex:none; }
.how-page .button { font-size:12px; min-height:46px; padding:12px 22px; gap:24px; }
.how-hero { height:450px; position:relative; overflow:hidden; background:var(--how-navy); color:white; }
.how-hero>img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 58%; }
.how-hero::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,rgba(3,25,38,.98),rgba(3,25,38,.88) 31%,rgba(3,25,38,.18) 65%,transparent); }
.how-hero .container { height:100%; position:relative; z-index:1; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; }
.how-hero h1 { font-size:clamp(40px,3.5vw,62px); line-height:1.05; letter-spacing:-1.5px; font-weight:800; margin:0 0 20px; }
.how-hero h1 span,.how-technology-copy h2 span { color:var(--yellow); }
.how-hero .container>p:last-child { font-size:17px; max-width:550px; margin:0; }
.how-page .how-hero .how-label,.how-page .how-technology-copy .how-label,.how-page .how-cta .how-label { color:white; }
.how-hero .how-label::before,.how-technology-copy .how-label::before,.how-cta .how-label::before { height:20px; width:3px; background:var(--yellow); }
.how-workflow { padding-top:30px; padding-bottom:30px; }
.how-workflow ol { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); list-style:none; margin:0; padding:0; }
.how-workflow li { display:grid; grid-template-columns:62px 1fr; gap:14px; padding:0 22px; border-right:1px solid #e0e5e9; position:relative; }
.how-workflow li:first-child { padding-left:0; }
.how-workflow li:last-child { padding-right:0; border:0; }
.how-workflow li:not(:last-child)::after { content:'→'; position:absolute; right:-10px; top:70px; background:white; color:var(--red); font-size:23px; line-height:1; }
.how-number { color:#cdd7e1; font:700 49px/1.1 Poppins,Arial,sans-serif; }
.how-stage-icon { width:42px; height:42px; object-fit:contain; display:block; margin-bottom:14px; }
.how-icon-space { height:42px; }
.how-workflow h2 { font-size:14px; letter-spacing:-.3px; line-height:1.3; margin-bottom:12px; }
.how-workflow p { font-size:12px; color:#62676b; margin:0; }
.how-technology { display:grid; grid-template-columns:40fr 27fr 33fr; align-items:stretch; }
.how-technology-photo { position:relative; min-height:350px; }
.how-technology-photo img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.how-technology-copy { background:var(--how-navy); color:white; padding:34px; }
.how-technology-copy h2 { font-size:clamp(27px,2vw,35px); }
.how-technology-copy p:not(.how-label) { font-size:14px; margin:0 0 20px; }
.how-technology-copy .button { gap:16px; padding:12px 16px; font-size:11px; }
.how-advantages { padding:30px; background:#f3f6f7; }
.how-advantages>h2 { font-size:21px; margin-bottom:24px; }
.how-advantage-grid { display:grid; grid-template-columns:1fr 1fr; }
.how-advantage-grid>div { display:flex; align-items:flex-start; gap:12px; padding:20px 14px; border-bottom:1px solid #dce3e8; }
.how-advantage-grid>div:nth-child(odd) { border-right:1px solid #dce3e8; padding-left:0; }
.how-advantage-grid>div:nth-child(n+3) { border-bottom:0; }
.how-advantage-grid img { width:38px; height:38px; object-fit:contain; flex:none; }
.how-advantage-grid h3 { font-size:13px; line-height:1.3; margin:0 0 8px; }
.how-advantage-grid p { font-size:12px; color:#62676b; margin:0; }
.how-applications { display:grid; grid-template-columns:29fr 71fr; gap:30px; padding-top:26px; padding-bottom:26px; }
.how-applications-copy h2 { font-size:clamp(27px,1.9vw,34px); }
.how-applications-copy h2 span { color:var(--red); }
.how-applications-copy>p:not(.how-label) { font-size:14px; color:#62676b; margin:0 0 20px; }
.how-application-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.how-application-grid article { background:#f3f6f7; min-width:0; }
.how-application-grid article>img,.how-photo-pending { width:100%; height:165px; object-fit:cover; display:block; }
.how-application-grid article>div:not(.how-photo-pending) { padding:16px; }
.how-application-grid h3 { font-size:14px; line-height:1.3; margin:0 0 8px; }
.how-application-grid p { font-size:12px; margin:0; color:#62676b; }
.how-photo-pending { display:flex; align-items:center; justify-content:center; background:#e1e7ea; color:#53636e; text-align:center; font-size:11px; padding:16px; }
.how-page .how-cta { background:var(--how-navy); }
.how-cta .container { min-height:220px; }
.how-page .how-cta h2 { text-transform:none; font-size:36px; margin:0; }
.how-cta p:not(.how-label) { max-width:620px; }
.how-cta-actions { display:flex; gap:20px; flex:none; }
@media(max-width:1500px) { .how-workflow li { grid-template-columns:48px 1fr; gap:10px; padding:0 16px; } .how-number { font-size:40px; } .how-technology { grid-template-columns:34fr 31fr 35fr; } .how-technology-copy { padding:28px; } .how-advantages { padding:26px 20px; } .how-advantage-grid>div { flex-direction:column; } }
@media(max-width:1100px) { .how-workflow li { display:block; padding:0 16px; } .how-number { display:block; margin-bottom:14px; } .how-technology { grid-template-columns:1fr 1fr; } .how-advantages { grid-column:span 2; } .how-advantage-grid { grid-template-columns:repeat(4,1fr); gap:20px; } .how-advantage-grid>div { border:0 !important; padding:0; } .how-applications { grid-template-columns:1fr; } .how-applications-copy { max-width:650px; } .how-cta .container { flex-direction:column; align-items:flex-start; } }
@media(max-width:800px) { .how-workflow ol { grid-template-columns:1fr; } .how-workflow li,.how-workflow li:first-child,.how-workflow li:last-child { display:grid; grid-template-columns:64px 1fr; border:0; padding:0 0 30px; gap:20px; } .how-workflow li:not(:last-child)::after { content:''; width:1px; background:#dce3e8; left:24px; top:60px; bottom:12px; right:auto; } .how-workflow li:last-child { padding-bottom:0; } .how-workflow li>div { display:grid; grid-template-columns:42px 1fr; gap:0 18px; } .how-stage-icon { grid-row:span 2; } .how-workflow h2 { font-size:16px; } .how-workflow p { font-size:14px; } .how-advantage-grid { grid-template-columns:1fr 1fr; } .how-application-grid { grid-template-columns:1fr 1fr; } }
@media(max-width:600px) { .how-hero { height:450px; } .how-hero h1 { font-size:36px; letter-spacing:-1.3px; } .how-hero .container>p:last-child { font-size:15px; } .how-hero::after { background:linear-gradient(90deg,rgba(3,25,38,.95),rgba(3,25,38,.6)); } .how-technology { grid-template-columns:1fr; } .how-technology-photo { min-height:280px; } .how-technology-copy { padding:30px 18px; } .how-advantages { grid-column:auto; padding:28px 18px; } .how-applications { gap:24px; } .how-application-grid { gap:12px; } .how-application-grid article>img,.how-photo-pending { height:140px; } .how-application-grid article>div:not(.how-photo-pending) { padding:12px; } .how-page .how-cta h2 { font-size:29px; } .how-cta-actions { flex-wrap:wrap; gap:10px; } .how-page .how-cta .button { padding:12px 18px; gap:14px; } }