.how-page { background:var(--navy); color:#d8dde6 }
.how-page .site-header { color:white }
.how-page .nav-group>a,.how-page .nav-group>button { background:rgba(0,0,0,.13) }
.how-page .nav-group>a:hover,.how-page .nav-group>button:hover { background:rgba(0,0,0,.34) }
.how-page .brand img { filter:none }
.how-main { position:relative; display:grid; grid-template-columns:32% 35% 33%; padding-top:9.95vw; overflow:clip }
.how-main>.page-grid { z-index:0 }
.how-main>.page-grid i { background:rgba(255,255,255,.1) }
.how-aside { position:relative; z-index:1; min-width:0 }
.how-aside-sticky { position:sticky; top:7.8vw; padding:0 1.25vw }
.how-aside h1 { color:white; font-size:clamp(28px,2.083333vw,53px); line-height:1.18; text-transform:uppercase; white-space:nowrap }
.how-aside .script { margin:.1vw 0 0 7.35vw; color:var(--gold); font-size:clamp(19px,1.458333vw,37px); white-space:nowrap }
.how-steps { position:relative; z-index:1; min-width:0; background:#011a3d; border-top:1px solid rgba(255,255,255,.04) }
.how-step { position:relative; min-height:24.5vw; border-bottom:2px solid #053872; overflow:hidden }
.how-step .how-copy { align-self:stretch; padding:2.45vw 1.55vw 2.9vw; color:#a9b0bf }
.how-step span { display:block; color:white; font:400 clamp(32px,2.083333vw,53px)/1 var(--serif) }
.how-step h2 { margin-top:3.75vw; color:#d9dde4; font-size:clamp(17px,1.041667vw,26.67px); line-height:1.25; text-transform:uppercase }
.how-step p { max-width:94%; margin-top:1.15vw; font:300 clamp(14px,.833333vw,21.33px)/1.5 var(--sans) }
.how-photo-column { position:relative; z-index:1; min-width:0 }
.how-photo-sticky { position:sticky; top:0; height:100svh; overflow:hidden }
.how-photo-sticky img { display:block; width:100%; height:100%; object-fit:cover; object-position:75% center }
.how-step[data-how-step] .how-copy { opacity:0; transform:translate3d(0,4vw,0); transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1) }
.how-step[data-how-step].is-visible .how-copy { opacity:1; transform:none }
@media(max-width:900px) {
  .how-main { grid-template-columns:64% 36%; padding:135px 0 0 }
  .how-aside { grid-column:1 / -1 }
  .how-aside-sticky { position:relative; top:auto; padding:0 7% 50px }
  .how-aside h1 { font-size:39px; white-space:normal }
  .how-aside .script { margin:4px 0 0 22%; font-size:28px }
  .how-steps { width:100%; margin-left:0 }
  .how-step { min-height:0 }
  .how-step .how-copy { padding:42px 8% 47px }
  .how-step h2 { margin-top:40px; font-size:23px }
  .how-step p { max-width:none; margin-top:14px; font-size:17px; line-height:1.7 }
  .how-photo-sticky img { object-position:72% center }
}
@media(prefers-reduced-motion:reduce) { .how-step[data-how-step] .how-copy { opacity:1; transform:none; transition:none } }