/* Homepage: de drie kerndiensten voorop. Gekopieerd naar site/assets/home.css
   door tools/home.py en alleen op de homepage geladen. Het groen is het groen
   van het thema (us_corsa_custom_styles.css). */

.es-hero, .es-services, .es-process, .es-news, .es-contact {
	--es-green: #98c200;
	--es-green-dark: #6f8f00;
	--es-ink: #0e120f;
	--es-ink-2: #171d18;
	--es-paper: #f0f2f0;
	--es-line-dark: rgba(255, 255, 255, 0.16);
	--es-line-light: #d9deda;
	--es-muted-dark: rgba(255, 255, 255, 0.72);
	--es-muted-light: #5c665f;
	--es-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
	text-align: left;
	}

.es-eyebrow {
	font-family: var(--es-mono);
	font-size: 13px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--es-green-dark);
	margin: 0 0 18px;
	}
.es-sep {
	opacity: 0.45;
	margin: 0 8px;
	}
.es-num {
	font-family: var(--es-mono);
	font-size: 12px;
	color: var(--es-green);
	}

/* ------------------------------------------------------------------ hero */
.l-body.hometype_fullscreen .l-section:first-child .l-subsection.es-hero {
	position: relative;
	background: var(--es-ink);
	color: #fff;
	}
.es-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: url(../wp-content/uploads/2015/03/maintenance.jpg) center / cover no-repeat;
	filter: grayscale(1) contrast(1.1);
	opacity: 0.22;
	}
.es-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, var(--es-ink) 0%, rgba(14, 18, 15, 0.85) 45%, rgba(14, 18, 15, 0.2) 100%);
	}
/* De bliksemschicht: dezelfde foto, groen gekleurd en uitgeknipt. */
.es-hero-bolt {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: var(--es-green) url(../wp-content/uploads/2015/03/maintenance.jpg) center / cover no-repeat;
	background-blend-mode: luminosity;
	clip-path: polygon(80% 0, 100% 0, 100% 10%, 89% 46%, 98% 46%, 74% 100%, 63% 100%, 80% 58%, 72% 58%);
	opacity: 0.9;
	}
.es-hero .l-subsection-h {
	z-index: 2;
	}
.es-wrap {
	max-width: 1140px;
	width: 92%;
	margin: 0 auto;
	padding: 72px 0 64px;
	}
.es-hero .es-eyebrow {
	color: var(--es-green);
	}
.g-html h1.es-hero-title {
	font: 700 clamp(44px, 7.4vw, 100px)/0.95 'Dosis', sans-serif;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	color: #fff;
	max-width: 9em;
	margin: 0 0 28px;
	}
.es-hero-title em {
	font-style: normal;
	color: var(--es-green);
	}
.es-hero-lead {
	font-size: 19px;
	line-height: 1.55;
	color: var(--es-muted-dark);
	max-width: 36em;
	margin: 0 0 36px;
	}

.g-html ul.es-hero-services {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 28px;
	list-style: none;
	margin: 0 0 40px;
	padding: 0;
	}
.es-hero-services li,
.es-list li,
.es-steps li {
	list-style: none;
	}
.es-hero-services li {
	margin: 0;
	padding: 0;
	}
.es-hero-services a {
	display: inline-flex;
	align-items: baseline;
	gap: 10px;
	font-family: var(--es-mono);
	font-size: 15px;
	color: #fff;
	text-decoration: underline;
	text-decoration-color: rgba(255, 255, 255, 0.35);
	text-underline-offset: 5px;
	}
.es-hero-services a:hover {
	color: var(--es-green);
	text-decoration-color: var(--es-green);
	}

.es-stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	max-width: 760px;
	margin: 0 0 44px;
	}
.es-stat {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 14px;
	padding: 2px 20px 0 16px;
	border-left: 1px solid var(--es-line-dark);
	}
.es-stat-label {
	font-family: var(--es-mono);
	font-size: 12px;
	line-height: 1.45;
	color: var(--es-muted-dark);
	}
.es-stat-value {
	font: 700 54px/1 'Dosis', sans-serif;
	color: #fff;
	}

/* Knoppen met hoekhaken, zoals op aicodingsummit.com */
.es-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	}
.es-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 18px 30px;
	font-family: var(--es-mono);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color 0.2s, color 0.2s;
	}
.es-btn-primary,
.es-btn-primary:visited {
	background: var(--es-green);
	color: var(--es-ink);
	}
.es-btn-primary:hover {
	background: #fff;
	color: var(--es-ink);
	}
.es-btn-ghost,
.es-btn-ghost:visited {
	color: #fff;
	}
.es-btn-ghost::before,
.es-btn-ghost::after {
	content: "";
	position: absolute;
	width: 12px;
	height: 12px;
	border: 0 solid var(--es-green);
	}
.es-btn-ghost::before {
	top: 0;
	left: 0;
	border-top-width: 2px;
	border-left-width: 2px;
	}
.es-btn-ghost::after {
	right: 0;
	bottom: 0;
	border-right-width: 2px;
	border-bottom-width: 2px;
	}
.es-btn-ghost:hover {
	color: var(--es-green);
	}

/* ------------------------------------------------------------------ diensten */
.l-subsection.es-services {
	background: var(--es-paper);
	padding: 96px 0;
	}
.g-html .es-title {
	font: 700 clamp(34px, 4.6vw, 60px)/1 'Dosis', sans-serif;
	text-transform: uppercase;
	color: var(--es-ink);
	max-width: 14em;
	margin: 0 0 48px;
	}
.es-cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	}
.es-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--es-line-light);
	padding: 36px 32px 32px;
	color: var(--es-muted-light);
	}
.es-card::before {
	content: "";
	position: absolute;
	z-index: 1;
	top: -1px;
	left: -1px;
	width: 56px;
	height: 4px;
	background: var(--es-green);
	}
.es-card-num {
	font-family: var(--es-mono);
	font-size: 13px;
	color: var(--es-green-dark);
	margin-bottom: 18px;
	}
.g-html .es-card-title {
	font: 700 26px/1.1 'Dosis', sans-serif;
	text-transform: uppercase;
	color: var(--es-ink);
	margin: 0 0 16px;
	overflow-wrap: anywhere;
	}
.es-card p {
	font-size: 16px;
	line-height: 1.6;
	margin: 0 0 22px;
	}
.g-html ul.es-list {
	list-style: none;
	margin: 0 0 28px;
	padding: 0;
	border-top: 1px solid var(--es-line-light);
	}
.g-html ul.es-list li {
	position: relative;
	margin: 0;
	padding: 11px 0 11px 22px;
	border-bottom: 1px solid var(--es-line-light);
	font-size: 15px;
	line-height: 1.45;
	color: var(--es-ink);
	}
.es-list li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 18px;
	width: 8px;
	height: 8px;
	background: var(--es-green);
	}
.es-card-link {
	margin-top: auto;
	font-family: var(--es-mono);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--es-ink);
	text-decoration: none;
	}
.es-card-link:hover {
	color: var(--es-green-dark);
	}

/* AI is de nieuwe dienst: die kaart staat in het donker. */
.es-card-accent {
	background: var(--es-ink);
	border-color: var(--es-ink);
	color: var(--es-muted-dark);
	}
.es-card-accent .es-card-num,
.es-card-accent .es-card-link {
	color: var(--es-green);
	}
.es-card-accent .es-card-link:hover {
	color: #fff;
	}
.g-html .es-card-accent .es-card-title,
.g-html .es-card-accent ul.es-list li {
	color: #fff;
	}
.g-html .es-card-accent ul.es-list,
.g-html .es-card-accent ul.es-list li {
	border-color: var(--es-line-dark);
	}

/* ------------------------------------------------------------------ werkwijze */
.l-subsection.es-process {
	background-color: var(--es-ink);
	color: var(--es-muted-dark);
	padding: 88px 0;
	}
.es-process .es-eyebrow {
	color: var(--es-green);
	}
.es-process .g-html .es-title {
	color: #fff;
	}
.g-html ol.es-steps {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0;
	list-style: none;
	margin: 0;
	padding: 0;
	}
.g-html ol.es-steps li {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: 4px 24px 0 18px;
	border-left: 1px solid var(--es-line-dark);
	font-size: 15px;
	line-height: 1.55;
	}
.es-steps strong {
	font: 700 22px/1.15 'Dosis', sans-serif;
	text-transform: uppercase;
	color: #fff;
	}

/* ------------------------------------------------------------------ nieuws */
.l-subsection.es-news {
	background: var(--es-paper);
	padding: 96px 0;
	}
.es-news-img {
	display: block;
	margin: -36px -32px 26px;
	aspect-ratio: 2 / 1;
	background: #e4e8e4;
	overflow: hidden;
	}
.es-news-img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: transform 0.3s;
	}
.es-news-card:hover .es-news-img img {
	transform: scale(1.03);
	}
/* De datum hergebruikt de spans van het thema (zodat de Engelse maandnamen
   uit tools/en.py blijven passen), maar zonder de opmaak van de blogdatum. */
.es-news .es-news-date span {
	display: inline;
	margin: 0;
	padding: 0;
	font: inherit;
	color: inherit;
	}
.es-news-date {
	text-transform: uppercase;
	}
.g-html .es-news-title {
	font-size: 22px;
	line-height: 1.15;
	}
.es-news-title a,
.es-news-title a:visited {
	color: inherit;
	text-decoration: none;
	}
.es-news-title a:hover {
	color: var(--es-green-dark);
	}
.es-news-short p {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	}

.es-news-older-label {
	margin-top: 64px;
	}
.g-html ul.es-news-older {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--es-line-light);
	}
.g-html ul.es-news-older li {
	list-style: none;
	margin: 0;
	padding: 0;
	border-bottom: 1px solid var(--es-line-light);
	}
.es-news-older a {
	display: grid;
	grid-template-columns: 9em minmax(0, 1fr) auto;
	align-items: baseline;
	gap: 24px;
	padding: 16px 4px;
	color: var(--es-ink);
	text-decoration: none;
	}
.es-news-older .es-news-date {
	font-family: var(--es-mono);
	font-size: 12px;
	color: var(--es-green-dark);
	}
.es-news-row-title {
	font: 700 18px/1.3 'Dosis', sans-serif;
	text-transform: uppercase;
	}
.es-news-arrow {
	font-family: var(--es-mono);
	color: var(--es-green-dark);
	}
.es-news-older a:hover .es-news-row-title {
	color: var(--es-green-dark);
	}

/* ------------------------------------------------------------------ contact */
.l-subsection.es-contact {
	background-color: var(--es-ink);
	color: var(--es-muted-dark);
	padding: 96px 0;
	}
.es-contact .es-eyebrow {
	color: var(--es-green);
	}
.es-contact .g-html .es-title {
	color: #fff;
	margin-bottom: 20px;
	}
.es-contact .es-title strong {
	font-weight: inherit;
	}
.es-contact-lead {
	font-size: 19px;
	line-height: 1.55;
	max-width: 36em;
	margin: 0 0 48px;
	}
.es-contact-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) max-content;
	max-width: 1080px;
	margin: 0 0 48px;
	}
.es-contact-item,
.es-contact-item:visited {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 2px 24px 0 18px;
	border-left: 1px solid var(--es-line-dark);
	color: #fff;
	text-decoration: none;
	}
.es-contact-label {
	font-family: var(--es-mono);
	font-size: 12px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--es-muted-dark);
	}
.es-contact-value {
	font: 700 22px/1.3 'Dosis', sans-serif;
	color: #fff;
	overflow-wrap: anywhere;
	}
a.es-contact-item:hover .es-contact-value {
	color: var(--es-green);
	}
.es-contact-item.es-contact-cta {
	flex-direction: row;
	align-items: center;
	gap: 10px;
	padding-right: 0;
	}
.es-contact-cta .es-btn {
	height: 54px;
	padding-top: 0;
	padding-bottom: 0;
	}
/* Facebook en LinkedIn: dezelfde knop, vierkant met alleen het icoon. */
.es-btn.es-btn-icon {
	justify-content: center;
	width: 54px;
	padding-left: 0;
	padding-right: 0;
	font-size: 18px;
	}

/* ------------------------------------------------------------------ smal */
/* Tot 1280 px passen e-mailadres en drie knoppen niet op één rij: knoppen eronder. */
@media only screen and (max-width: 1279px) {
	.es-contact-grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		max-width: 760px;
		row-gap: 32px;
		}
	.es-contact-item.es-contact-cta {
		grid-column: 1 / -1;
		padding-left: 0;
		border-left: 0;
		}
	}
@media only screen and (max-width: 1023px) {
	.es-cards {
		grid-template-columns: minmax(0, 1fr);
		max-width: 640px;
		}
	.g-html ol.es-steps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: 36px;
		}
	}
@media only screen and (max-width: 767px) {
	.es-wrap {
		padding: 48px 0 44px;
		}
	.es-hero-bolt {
		opacity: 0.35;
		clip-path: polygon(78% 0, 100% 0, 100% 10%, 88% 44%, 97% 44%, 70% 100%, 60% 100%, 78% 56%, 70% 56%);
		}
	.es-hero::after {
		background: linear-gradient(90deg, var(--es-ink) 0%, rgba(14, 18, 15, 0.8) 100%);
		}
	.es-hero-lead {
		font-size: 17px;
		}
	.es-stats {
		grid-template-columns: minmax(0, 1fr);
		gap: 18px;
		}
	.es-stat {
		flex-direction: row-reverse;
		align-items: center;
		justify-content: flex-end;
		gap: 16px;
		}
	.es-stat-value {
		font-size: 40px;
		min-width: 2.6em;
		}
	.es-btn {
		width: 100%;
		justify-content: space-between;
		}
	.l-subsection.es-services,
	.l-subsection.es-process {
		padding: 64px 0;
		}
	.es-card {
		padding: 30px 22px 26px;
		}
	.es-news-img {
		margin: -30px -22px 22px;
		}
	.l-subsection.es-news {
		padding: 64px 0;
		}
	.es-news-older a {
		grid-template-columns: minmax(0, 1fr) auto;
		gap: 6px 16px;
		}
	.es-news-older .es-news-date {
		grid-column: 1 / -1;
		}
	.g-html ol.es-steps {
		grid-template-columns: minmax(0, 1fr);
		}
	.l-subsection.es-contact {
		padding: 64px 0;
		}
	.es-contact-lead {
		font-size: 17px;
		}
	.es-contact-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
		}
	.es-contact-item.es-contact-cta {
		flex-wrap: wrap;
		padding-top: 8px;
		}
	.es-contact-cta .es-btn:first-child {
		flex: 1 1 100%;
		}
	.es-contact-cta .es-btn.es-btn-icon {
		flex: 1;
		width: auto;
		}
	}

/* ------------------------------------------------------------------ oproep in de donkere band */
.es-band-cta {
	margin-top: 36px;
	}
.g-html .es-band-cta h4 {
	font-size: 24px;
	margin-bottom: 18px;
	}