@media(max-width:900px){
.site-nav{
gap:14px
}
.site-nav>a:not(.button){
font-size:13px
}
.hero-grid,.contact-layout{
grid-template-columns:1fr
}
.hero-visual{
margin:auto;
max-width:580px;
width:100%
}
.contact-aside{
position:static
}
.service-grid{
grid-template-columns:repeat(2,1fr)
}
.values-grid{
grid-template-columns:repeat(2,1fr)
}
.journey{
grid-template-columns:repeat(2,1fr)
}
.footer-grid{
grid-template-columns:repeat(2,1fr)
}

}
@media(max-width:700px){
.nav-wrap{
min-height:68px
}
.menu-toggle{
display:block
}
.site-nav{
background:#101720;
border-bottom:1px solid var(--border-soft);
box-shadow:0 20px 30px rgba(0,0,0,.3);
display:none;
left:0;
padding:12px 24px 22px;
position:absolute;
top:68px;
width:100%
}
.site-nav.is-open{
display:flex;
flex-direction:column;
align-items:stretch
}
.site-nav>a:not(.button){
padding:9px 0
}
.site-nav>a:not(.button):after{
bottom:4px;
transform-origin:left
}
.login-button{
margin-top:5px
}
.development-login-button{
margin-top:5px
}
.hero{
padding-top:56px
}
.hero h1,.page-intro h1{
font-size:42px
}
.hero-visual{
min-height:410px
}
.browser-frame{
width:80%
}
.phone-two{
left:128px
}
.phone-frame{
height:330px;
width:158px
}
.section{
padding:62px 0
}
.card-grid,.service-grid,.package-grid,.director-grid{
grid-template-columns:1fr
}
.lifecycle{
align-items:flex-start;
flex-direction:column;
margin-left:24px
}
.lifecycle-step{
width:190px
}
.lifecycle-step:not(:last-child):after{
bottom:-26px;
left:50%;
right:auto;
top:auto;
transform:rotate(90deg)
}
.showcase-row,.showcase-row:nth-child(even){
grid-template-columns:1fr
}
.showcase-row:nth-child(even) .showcase-copy,.showcase-row:nth-child(even) .showcase-visual{
order:initial
}
.showcase-visual{
min-height:265px
}
.module-section{
display:block;
padding:34px 0
}
.module-section h2{
margin-bottom:16px
}
.check-list{
columns:1
}
.capabilities{
grid-template-columns:repeat(2,1fr)
}
.form-grid{
grid-template-columns:1fr
}
.form-field.full{
grid-column:auto
}
.cta{
border-radius:0;
margin:0;
padding:45px 24px
}
.footer-grid{
grid-template-columns:1fr
}
.page-intro{
padding:60px 0 40px
}

}
@media(max-width:390px){
.container{
padding-inline:18px
}
.hero-visual{
min-height:360px
}
.phone-one{
left:-8px
}
.phone-two{
left:105px
}
.phone-frame{
height:285px;
width:136px
}
.browser-frame{
top:32px
}
.dashboard{
padding:7px
}
.metric{
min-height:55px;
padding:6px
}
.metric strong{
font-size:14px
}
.journey{
grid-template-columns:1fr
}
.capabilities{
grid-template-columns:1fr
}

}