:root {
  --page-w: 1440px;
  --page-margin: 1em;
  --page-fg: #000000;
  --page-bg: #ffffff;
  --header-h: 77px;
  --header-fg: #E6E6E6;
  --header-bg: #5E5E5E;
  --footer-h: 62px;
  --footer-fg: #FFFFFF;
  --footer-bg: #0072E8;
  --h1-h: 40px;
  --h2-h: 30px;
  --h3-h: 25px;

  --logo-people: #999999;
  --logo-plan: #8a8a8a;
}
body {
  box-sizing: border-box;
  margin: 0;
  font-family: source-sans-pro, sans-serif;
  font-size: 14px;
  line-height: 17px;
  word-wrap: break-word;
  font-feature-settings: 'liga';
}

header,main,footer {
  max-width: var(--page-w);
  min-width: 640px;
  margin:auto;
  padding-left: 1em;
  padding-right: 1em;
}
header,footer,.full-bleed {
  clip-path: inset(0 -100vmax);
}
header {
  position: sticky;
  top: 0;   
  display:grid;
  grid-template-columns: 1.5fr 215px 1.5fr 8fr 0.5fr 10fr 2fr 1fr;
  height:var(--header-h);
  background-color: var(--header-bg);
  box-shadow: 0 0 0 100vmax var(--header-bg);
  font-weight: 600;
  color: var(--header-fg);    
}
footer {    
  display: grid;
  grid-template-columns: 1fr 2fr 8fr 3fr 2fr 5fr;
  column-gap: 2em;
  align-items: center;
  justify-items: end;
  height: var(--footer-h);
  background-color: var(--footer-bg);
  box-shadow: 0 0 0 100vmax var(--footer-bg);
  font-weight: 600;
  color: var(--footer-fg);
}

header nav {
  margin: 21px 0 0 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-content: flex-start;
  column-gap: 10%;
}
header>span {
  min-width:0;
}
header .contacts {
  min-width:190px;
  display:flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-content: flex-start;
  column-gap: 2em;
  margin: 21px 0 0 0 ;
}
header .contacts>* {
  min-width: fit-content;
}
header .onsite {
  min-width:95px;
  margin: 21px 0 0 0 ;
}
header .onsite>* {
  display:block;
  width:100%;
  text-align:right;
}
header a {
  color: var(--header-fg);
  text-decoration:none;
}

footer a {
  color: var(--footer-fg);
  text-decoration:none;
}
main {
  font-weight: 400;
}

h1 {
  position:sticky;
  top:var(--header-h);
  background-color: var(--page-bg);
  line-height: 29px;
  font-size: 24px;
  font-weight: 600;
}
#ident {
  display: inline-block;
  position: relative;
  width: 200px;
  min-height: 48px;
  margin: 15px 0 0 0;
}
#ident svg path {
    fill: var(--logo-people);
}
#ident svg .st0 {
    fill: var(--logo-people);
}

@media (min-width: 850px) {
  .col3 {
  columns: 2;
}
@media (min-width: 1250px) {
  .col3 {
    columns: 3;
  }
}