body { background:#000; color:#FFF; font-family: 'Inter', sans-serif; font-size:1em; line-height:1.5em; padding: 24px; }

h1, h2, h3, h4, h5, h6 { font-family: 'Inter', sans-serif; font-weight:600; margin:0; }

h1 { font-size:1.6em; }
h2 { font-size: 1.5em; line-height: 1.5em; margin: 0; }
h3 { font-size: 1.2em; margin-bottom:1em; }
h4 { color:#777; font-size: 0.75em; margin-bottom:16px; text-transform: uppercase; }
h5 { font-size: 1.1em;}

p { margin:0; }
.intro p { font-size: 1.6em; max-width: 800px;}

a { color:#FFF; transition: all 0.2s; }
a:hover { opacity:0.5; transition: all 0.2s; }

.grey { color:#777; }

ul { list-style: none; margin: 0; padding: 0;}
article ul { margin-bottom:3em;}

.logo { display: none; }

header.site { align-content:center; height:48px; padding: 0; }
header.site .wrapper { display:flex; position:relative; margin: 0 auto; max-width:1280px; width:100%; }
header.site .logo { margin-top: 9px; }
header.site img { height:24px; width:auto; }
header.site .wrapper nav * { display: inline-flex!important; }
header.site ul li { margin:0 0 0 16px; padding:0!important; }
header.site .social { position: absolute; top: 8px; right:0; }

header.site, section, footer { margin:0 auto 80px auto; max-width:1280px; width:100%;}

.intro h1, .intro p, .principles p, .contact p { line-height: 1.5em;}

.capabilities ul li { margin: 0 0 24px 0; }

.principles p, .contact p { font-weight:600; font-size:1.5em;}

.clients li { font-size: 1.2em; margin-bottom:0.75em;}
.previous p { font-size: 0.875em; }

footer { overflow:hidden;margin: 0 auto; max-width:1280px;}


@media screen and (min-width: 48em) {
    
    h1 { font-size:2em; }
    .intro p { font-size: 2em; }

    .logo { height:24px; width:24px; position: sticky; top:40px;}
    header.site .social { right:16px;}
    
    .capabilities ul { column-count: 3; column-gap: 24px; display: flex; flex:auto; }
    .capabilities ul li { flex:1;  }
    
     .principles p, .previous p { max-width:80%;}
    
}

@media screen and (min-width: 64em) {   
    .logo { display: block; left:40px; top:61px; }
    header.site, section { margin:0 0 80px 80px; width:80%; }
    .clients li { font-size:1.5em;}
    .capabilities ul { max-width:940px;}
    footer { margin-left:80px; max-width: 80%;}
}

@media screen and (min-width: 92.5em) {
     
    header.site, section, footer { margin: 0 auto 80px auto;  }
    .logo {display: block; left:80px;}
    .previous p, .principles p { max-width:580px; }
    footer { max-width: 1280px;}
}