html {
  scroll-behavior: smooth;
}

:target {
  scroll-margin-top: 170px;
}

sub { position: relative; top: 4px; font-size: .75em; }
.flex { display: flex; }

p.links .button + .button { margin-left: 4rem; }
p.links + p.links { margin-top: 2rem; }

#section-areas { padding-top: 4rem; padding-bottom: 2rem; }
#section-areas h2 { margin: 0 0 4rem 0; text-align: center; }
#section-areas ul { display: flex; gap: 1.5rem; margin: 0; padding: 0; list-style: none; }
#section-areas li { flex: 1; flex-basis: 40%; position: relative; padding: 1rem 1rem 2.5rem 1rem; border: 1px solid #383838; }
#section-areas img { display: block; margin: .5rem auto 0 auto; }
#section-areas h3 { margin: 1rem 0 .5rem 0; font-size: 1rem; font-weight: bold; }
#section-areas p { margin-bottom: .5rem; font-size: .875rem; font-style: italic; }
#section-areas a { position: absolute; bottom: 1rem; font-size: .875rem; font-weight: bold; text-decoration: underline; color: #4c7db5; }
@media(max-width: 980px) {
	#section-areas ul { flex-wrap: wrap; }	
}

#section-metrics { position: relative; margin-top: 2rem; padding: 3rem; text-align: center; overflow: hidden; color: #fff; }
#section-metrics img { position: absolute; z-index: -1; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
#section-metrics h2 { margin: 0; color: inherit; }
#section-metrics h2:after { content: ':'; }
#section-metrics p { margin: .25rem 0 2rem 0; font-size: 2.25rem; }
#section-metrics ul { display: flex; gap: 4rem; justify-content: center; margin: 0; padding: 0; font-size: 1.5rem; }
#section-metrics a { color: inherit; text-decoration: none; border-bottom: 1px solid #ddd; }
#section-metrics a:hover { border-color: #fff; }
@media(max-width: 767px) {
	#section-metrics ul { flex-wrap: wrap; gap: 1rem; }
	#section-metrics li { flex-basis: 100%; list-style-position: inside; }	
}

#section-list { margin-top: 2rem; counter-reset: areas 0; }
.area-heading { margin-top: 2rem; color: #fff; background-color: #E81945; }
.area-heading .site-container { position: relative; padding: 4rem 0 3rem 0; }
.area-heading h2, .area-heading p { margin-left: 8%; font-size: 2rem; }
.area-heading h2 { margin-bottom: 0; line-height: 1.25em; color: inherit; counter-increment: areas 1; }
.area-heading h2:before { content: counter(areas) ". "; }
.area-heading p { max-width: 50rem; margin-bottom: 0; }
.area-heading img { position: absolute; right: 6%; bottom: 0; width: auto; height: 200px; margin-left: 4%; filter: brightness(100); }
#section-list .area:nth-child(even) img { left: 6%; right: 0;}
#section-list .area:nth-child(2) img { bottom: 16px; }
#section-list .area:nth-child(even) .area-heading h2, #section-list .area:nth-child(even) .area-heading p { margin-left: calc(200px + 20%); margin-right: 6%; }
#section-list .area:nth-child(4) .area-heading h2, #section-list .area:nth-child(4) .area-heading p { margin-left: calc(200px + 14%); }
#section-list .site-container.flex { margin: 4rem auto 2rem auto; gap: 4rem; }
#section-list h3 { margin-bottom: .5rem; font-size: 1.5rem; font-weight: bold; }
#section-list p.links { margin-bottom: 4rem; text-align: center; }
@media(max-width: 1200px) {
	.area-heading h2, .area-heading p { max-width: 40rem; font-size: 1.75rem; }
}
@media(max-width: 960px) {
	.area-heading h2, .area-heading p { max-width: 30rem; margin-left: 2rem !important; font-size: 1.5rem; }
	.area-heading img { height: 160px; right: 6% !important; left: auto !important; }
}
@media(max-width: 750px) {
	.area-heading .site-container { padding: 2rem 0; }
	.area-heading h2, .area-heading p { margin-right: 2rem; }
	.area-heading img { display: none; }
	#section-list .site-container.flex { flex-wrap: wrap; gap: 0; margin: 2rem 0; }
}

#kpis { padding-top: 4rem; border-top: 3px solid #ed174c; }
#kpis.site-container { max-width: 64rem; }
#kpis h2, #kpis h3 { font-weight: bold; text-align: center; }
#kpis p { margin: 1.5rem auto 2rem auto; font-size: 1.5rem; }
.arp-table { width: 100%; max-width: 60rem; margin: 4rem auto 1rem auto; font-size: 1.25rem; border: 1px solid #E6E7E8; }
.arp-table th + th { border-left: 1px solid #E6E7E8; }
.arp-table th, .arp-table td { vertical-align: middle; padding: .75rem 2rem; line-height: 1.25em; text-align: left; }
.arp-table th { color: #fff; border-left: 1px solid #fff; background-color: #ed174c; }
.arp-table td { border-left: 1px solid #E6E7E8; }
.arp-table tr + tr th:first-child, .arp-table td:first-child { border: 0; }
.arp-table tbody tr:nth-child(even) { background-color: #e6e7e8; }
#kpis small { display: block; max-width: 60rem; margin: 1rem auto; }
@media(max-width: 600px) {
	.arp-table { font-size: .85rem; }
	.arp-table th, .arp-table td { padding: .75rem 1rem; }
}

#reports { margin: 4rem 0; padding: 3rem 0; font-weight: bold; text-align: center; border-top: 3px solid #ed174c; border-bottom: 3px solid #ed174c; }
#reports h2 { font-size: 2rem; color: #000; }
#reports p { font-size: 1.5rem; }

#section-final { text-align: center; }
#section-final h2, #section-final h3 { font-weight: bold; }
#section-final h2:after { content: ':'; }
#section-final p { max-width: 68rem; margin: 1.5rem auto 2rem auto; font-size: 1.5rem; text-align: left; }
#section-final img { margin: 2rem; }