/*------------------------------------------------------------------
  Kilatus landing page content
  Extends the Monji template (style.css + skins/green.css):
  same Outfit type, #72b626 accent, #f4f4f4 boxes and dark skin.
-------------------------------------------------------------------*/

/*** Layout: home becomes a scrollable page ***/

.home.landing {
	display: block;
}

.landing .leftbottom {
	display: none;
}

/*** Hero (original template styles, full first screen) ***/

.landing .home-content {
	min-height: 100vh;
	padding: 110px 30px 80px;
}

.landing .home-content p {
	max-width: 560px;
}

.landing .scroll-cue {
	position: absolute;
	left: 50%;
	bottom: 30px;
	width: 2px;
	height: 50px;
	background-color: #e6e6e6;
	overflow: hidden;
}

.landing .scroll-cue:after {
	content: "";
	position: absolute;
	left: 0;
	top: -50%;
	width: 100%;
	height: 50%;
	background-color: #72b626;
	animation: scrollcue 1.8s ease-in-out infinite;
}

@keyframes scrollcue {
	to {
		top: 100%;
	}
}

/*** Shared section styles ***/

.block {
	max-width: 1250px;
	margin: 0 auto;
	padding: 0 30px 120px;
}

.section-heading {
	text-align: center;
	padding-bottom: 60px;
}

.section-heading h2 {
	margin: 0;
	font-size: 130px;
	font-weight: 800;
	line-height: 1;
	color: #000;
}

.section-heading p {
	display: inline-block;
	position: relative;
	margin: 10px 0 0;
	padding-left: 45px;
	font-size: 20px;
	color: #000;
}

.section-heading p:before {
	content: "";
	position: absolute;
	left: 0;
	top: 13px;
	width: 30px;
	height: 5px;
	background-color: #72b626;
}

/*** Stats ***/

.stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

.stat {
	background-color: #f4f4f4;
	padding: 30px;
}

.stat .figure {
	margin: 0 0 12px;
	font-size: 56px;
	font-weight: 800;
	line-height: 1;
	color: #72b626;
}

.stat .figure sup {
	font-size: 34px;
	font-weight: 300;
}

.stat p {
	margin: 0;
	font-size: 18px;
	line-height: 27px;
	color: #777;
}

.stat p span {
	display: block;
}

/*** Services ***/

.service-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.service {
	position: relative;
	padding: 40px 35px;
	background-color: #f4f4f4;
	overflow: hidden;
	transition: transform .3s;
}

.service:after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 0;
	height: 5px;
	background-color: #72b626;
	transition: width .4s cubic-bezier(0.6, 0.05, 0.4, 1);
}

.service:hover {
	transform: translateY(-6px);
}

.service:hover:after {
	width: 100%;
}

.service .num {
	display: block;
	font-size: 60px;
	font-weight: 900;
	line-height: 1;
	color: #e3e3e3;
}

.service h3 {
	margin: 18px 0 10px;
	font-size: 24px;
	font-weight: 600;
	color: #000;
}

.service p {
	margin: 0;
	font-size: 17px;
	line-height: 27px;
	color: #777;
}

/*** Timeline ***/

.timeline {
	position: relative;
	margin: 0 auto;
	padding: 0;
	max-width: 1000px;
	list-style: none;
}

.timeline:before {
	content: "";
	position: absolute;
	left: 50%;
	top: 0;
	bottom: 0;
	width: 2px;
	margin-left: -1px;
	background-color: #e6e6e6;
}

.timeline > li {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	column-gap: 80px;
	margin-bottom: 40px;
}

.timeline > li:last-child {
	margin-bottom: 0;
}

/* dot on the line */
.timeline > li:before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 16px;
	height: 16px;
	margin: -8px 0 0 -8px;
	border-radius: 50%;
	background-color: #fff;
	border: 4px solid #72b626;
	box-sizing: border-box;
	z-index: 1;
}

.timeline > li.current:before {
	background-color: #72b626;
	box-shadow: 0 0 0 8px rgba(114, 182, 38, .2);
}

.timeline .year {
	font-size: 34px;
	font-weight: 800;
	color: #000;
	text-align: right;
}

.timeline > li:nth-child(even) .year {
	order: 2;
	text-align: left;
}

.timeline > li:nth-child(even) .card {
	order: 1;
}

.timeline .card {
	padding: 28px 30px;
	background-color: #f4f4f4;
	border-left: 5px solid #72b626;
}

.timeline .region {
	display: inline-block;
	margin-bottom: 10px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: #72b626;
}

.timeline h3 {
	margin: 0 0 8px;
	font-size: 22px;
	font-weight: 600;
	color: #000;
}

.timeline .card p {
	margin: 0;
	font-size: 17px;
	line-height: 26px;
	color: #777;
}

/*** Regions ***/

.region-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	border-top: 5px solid #72b626;
}

.region-card {
	padding: 35px 30px 10px 0;
}

.region-card:not(:first-child) {
	padding-left: 30px;
	border-left: 1px solid #e6e6e6;
}

.region-card h3 {
	margin: 0 0 10px;
	font-size: 26px;
	font-weight: 700;
	color: #000;
}

.region-card p {
	margin: 0;
	font-size: 17px;
	line-height: 27px;
	color: #777;
}

/*** Contact CTA & footer ***/

.cta {
	text-align: center;
	padding-bottom: 40px;
}

.cta h2 {
	margin: 0 0 20px;
	font-size: 64px;
	font-weight: 800;
	line-height: 1.1;
	color: #000;
}

.cta .cta-text {
	margin: 0 0 20px;
	font-size: 19px;
	color: #555;
}

.cta>a {
	font-size: 24px;
	font-weight: 500;
	text-decoration: none;
}

.site-footer {
	display: flex;
	justify-content: space-between;
	max-width: 1190px;
	margin: 60px auto 0;
	padding: 20px 0 40px;
	border-top: 1px solid #e6e6e6;
	font-size: 14px;
	color: #333;
}

/*** Dark Skin ***/

.dark .stat,
.dark .service,
.dark .timeline .card {
	background-color: #333;
}

.dark .section-heading h2,
.dark .section-heading p,
.dark .service h3,
.dark .timeline .year,
.dark .timeline h3,
.dark .region-card h3,
.dark .cta h2,
.dark .site-footer {
	color: #fff;
}

.dark .stat p,
.dark .service p,
.dark .timeline .card p,
.dark .region-card p {
	color: #bbb;
}

.dark .service .num {
	color: #4a4a4a;
}

.dark .timeline:before,
.dark .landing .scroll-cue {
	background-color: #333;
}

.dark .timeline > li:before {
	background-color: #0d0d0d;
}

.dark .timeline > li.current:before {
	background-color: #72b626;
}

.dark .region-card:not(:first-child),
.dark .site-footer {
	border-color: #333;
}

/*** Responsive ***/

@media (max-width: 1150px) {
	.section-heading h2 {
		font-size: 100px;
	}

	.service-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.stats,
	.region-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.region-card,
	.region-card:not(:first-child) {
		padding: 30px 30px 30px 0;
		border-left: 0;
	}
}

@media (max-width: 767px) {
	.landing .home-content {
		min-height: auto;
		padding: 130px 16px 70px;
	}

	.landing .home-content>div {
		padding: 0;
	}

	.landing .scroll-cue {
		display: none;
	}

	.block {
		padding: 0 16px 80px;
	}

	.section-heading {
		padding-bottom: 35px;
	}

	.section-heading h2 {
		font-size: 60px;
	}

	.section-heading p {
		font-size: 17px;
	}

	.stats,
	.service-grid,
	.region-grid {
		grid-template-columns: 1fr;
	}

	.stats {
		gap: 12px;
	}

	.stat,
	.service {
		padding: 25px 22px;
	}

	.stat .figure {
		font-size: 44px;
	}

	/* timeline: single column, line on the left */
	.timeline:before {
		left: 7px;
	}

	.timeline > li {
		grid-template-columns: 1fr;
		row-gap: 10px;
		padding-left: 35px;
		margin-bottom: 30px;
	}

	.timeline > li:before {
		left: 7px;
		top: 14px;
	}

	.timeline .year,
	.timeline > li:nth-child(even) .year {
		order: 0;
		text-align: left;
		font-size: 24px;
	}

	.timeline > li:nth-child(even) .card {
		order: 1;
	}

	.timeline .card {
		padding: 22px 20px;
	}

	.region-card,
	.region-card:not(:first-child) {
		padding: 25px 0;
		border-bottom: 1px solid #e6e6e6;
	}

	.dark .region-card {
		border-bottom-color: #333;
	}

	.cta h2 {
		font-size: 36px;
	}

	.cta .cta-text {
	margin: 0 0 20px;
	font-size: 19px;
	color: #555;
}

.cta>a {
		font-size: 20px;
	}

	.site-footer {
		margin: 40px 16px 0;
		padding-bottom: 30px;
	}
}

/*** Timeline: intro & focus tags ***/

.journey .intro {
	max-width: 760px;
	margin: -20px auto 60px;
	font-size: 19px;
	line-height: 32px;
	text-align: center;
	color: #555;
}

.timeline .focus {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
}

.timeline .focus li {
	padding: 4px 12px;
	border: 1px solid #72b626;
	font-size: 13px;
	font-weight: 500;
	color: #72b626;
}

.dark .journey .intro {
	color: #bbb;
}

@media (max-width: 767px) {
	.journey .intro {
		margin: -10px auto 40px;
		font-size: 17px;
		line-height: 28px;
		text-align: left;
	}
}

/*** Header, links & accessibility ***/

/* header comes before the full-height hero in the DOM,
   so lift it above the hero or the toggle can't be clicked */
.landing>header .contacts,
.landing>header .skin {
	z-index: 2;
}

.landing .contacts a {
	color: inherit;
	text-decoration: none;
}

.landing .contacts a:hover {
	color: #72b626;
}

.site-footer address {
	font-style: normal;
}

.skip-link {
	position: fixed;
	left: 16px;
	top: -60px;
	z-index: 1001;
	padding: 10px 18px;
	background-color: #72b626;
	color: #fff;
	font-size: 16px;
	text-decoration: none;
	transition: top .2s;
}

.skip-link:focus {
	top: 16px;
}

.dark .cta .cta-text {
	color: #bbb;
}

/*** Approach ***/

.approach-list {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.approach-list li {
	position: relative;
	padding: 30px 25px 30px;
	background-color: #f4f4f4;
	border-top: 5px solid #72b626;
}

.approach-list h3 {
	margin: 0 0 10px;
	font-size: 20px;
	font-weight: 600;
	color: #000;
}

.approach-list p {
	margin: 0;
	font-size: 16px;
	line-height: 25px;
	color: #777;
}

.dark .approach-list li {
	background-color: #333;
}

.dark .approach-list h3 {
	color: #fff;
}

.dark .approach-list p {
	color: #bbb;
}

@media (max-width: 1150px) {
	.approach-list {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 767px) {
	.approach-list {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	.approach-list li {
		padding: 22px 20px;
	}

	.cta .cta-text {
		font-size: 17px;
	}
}