.site-header{
position:sticky;
top:0;
z-index:var(--z-header);
display:flex;
align-items:center;
justify-content:space-between;
height:84px;
padding:0 4.5vw;
border-bottom:1px solid rgba(255,255,255,.14);
background:var(--color-primary);
color:#fff;
transition:box-shadow var(--transition),height var(--transition)
}
.site-header.is-scrolled{
box-shadow:0 5px 20px rgba(0,0,0,.13)
}
.nav{
display:flex;
gap:25px;
font-size:14px;
font-weight:700
}
.nav a{
opacity:.72
}
.nav a:hover,.nav .active{
opacity:1
}
.header-contact{
border-bottom:1px solid rgba(255,255,255,.6);
padding-bottom:3px;
font-size:14px;
font-weight:700
}
.menu-toggle{
display:none
}
.hero{
display:grid;
grid-template-columns:1fr 1.05fr;
min-height:calc(100vh - 84px);
max-height:900px;
background:var(--color-primary);
color:#fff;
position:relative;
overflow:hidden
}
.hero-copy{
align-self:center;
z-index:1;
max-width:730px;
padding:80px 4.5vw
}
.hero .eyebrow{
color:#9ed5d3
}
.intro{
max-width:440px;
margin-top:30px;
color:#c8d9d7;
font-size:16px
}
.actions{
display:flex;
flex-wrap:wrap;
align-items:center;
gap:27px;
margin-top:38px
}
.hero .text-link{
border-color:#fff
}
.hero-visual{
position:relative;
overflow:hidden;
clip-path:polygon(16% 0,100% 0,100% 100%,0 100%)
}
.hero-visual picture{
display:block;
width:100%;
height:100%
}
.hero-image,.solution-image,.news-image{
width:100%;
height:100%;
object-fit:cover
}
.hero-image{
filter:saturate(.7);
object-position:60% center
}
.image-tag{
position:absolute;
bottom:75px;
left:20%;
padding:10px 15px;
background:rgba(255,255,255,.92);
color:var(--color-primary);
font:500 9px var(--font-mono);
letter-spacing:.4px
}
.pulse{
display:inline-block;
width:8px;
height:8px;
margin-right:7px;
border-radius:50%;
background:var(--color-teal-dark)
}
.hero-footer{
position:absolute;
right:4.5vw;
bottom:30px;
left:4.5vw;
display:flex;
justify-content:space-between;
font:10px var(--font-mono);
letter-spacing:1px;
text-transform:uppercase
}
.statement{
max-width:1120px;
padding:150px 12vw 135px
}
.statement>p:last-child{
max-width:550px;
margin:25px 0 0 32%;
color:var(--color-muted)
}
.solutions{
display:grid;
grid-template-columns:1fr 1fr;
background:var(--color-primary);
color:#fff
}
.solution-image{
min-height:600px;
filter:saturate(.55)
}
.solution-copy{
align-self:center;
padding:110px 9vw
}
.solution-copy>p:not(.eyebrow){
max-width:440px;
margin-top:20px;
color:#b5c7c5
}
.services{
margin:37px 0 28px;
border-top:1px solid rgba(255,255,255,.2)
}
.services span{
display:block;
padding:14px 0;
border-bottom:1px solid rgba(255,255,255,.2);
color:#83c6c4;
font:10px var(--font-mono)
}
.services b{
margin-left:20px;
color:#fff;
font:600 13px var(--font-sans)
}
.inverse{
border-color:#fff
}
.site-footer{
padding:45px 4.5vw 25px;
background:var(--color-primary);
color:#fff
}
.footer-top,.footer-bottom{
display:flex;
justify-content:space-between;
gap:40px
}
.footer-columns{
display:grid;
grid-template-columns:repeat(4,minmax(110px,1fr));
gap:40px
}
.footer-columns section{
display:grid;
align-content:start;
gap:8px
}
.footer-columns h2{
margin-bottom:5px;
font-size:14px;
letter-spacing:0
}
.footer-columns a{
color:#9eb5b2;
font-size:13px
}
.footer-bottom{
color:#9eb5b2;
font-size:11px;
margin-top:55px;
padding-top:18px;
border-top:1px solid rgba(255,255,255,.2)
}
.footer-bottom div{
display:flex;
gap:18px
}