/* Readability and the home service cards (2 Nov 2026). Linked, with a version tag, from index.php and the two
   Advantages pages. Brand colours: #00613B (green), #003a24 / #002819 (dark green), #5cf2a8 (mint). */

/* --- Advantages cards (home + Advantages pages): white text on a green veil instead of the bare photo --- */
.post-block .post-image:after {
	content: "";
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	background: linear-gradient(180deg, rgba(0, 40, 25, .05) 0%, rgba(0, 40, 25, .35) 35%, rgba(0, 32, 20, .68) 100%);
	transition: opacity .3s;
}
.post-block .post-body { position: relative; z-index: 1; }
.post-block .post-body p { color: #fff; }
.post-block .post-body, .post-block .post-body h5, .post-block .post-body p, .post-block .post-body a { text-shadow: 0 1px 3px rgba(0, 0, 0, .55), 0 0 14px rgba(0, 0, 0, .35); }

/* --- Sections with text on a photo: add class sb-dim to the section --- */
.sb-dim { position: relative; }
.sb-dim:before {
	content: "";
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	background: rgba(0, 36, 22, .80);
	z-index: 0;
}
.sb-dim > .container { position: relative; z-index: 1; }
/* parallax sections draw the photo in .material-parallax; the veil goes on top of it */
.sb-dim.parallax-container:before { z-index: 1; }
.sb-dim.parallax-container > .parallax-content { position: relative; z-index: 2; }

/* testimonials */
.sb-dim .quote-text, .sb-dim .quote-text q { color: #fff; }
.sb-dim .quote-meta, .sb-dim .quote-meta * { color: rgba(255, 255, 255, .8); }

/* translator fields: one colour for every bar */
.sb-dim .list-progress .progress-bar__stroke { stroke: #5cf2a8 !important; }
.sb-dim .list-progress .progress-bar__trail { stroke: rgba(255, 255, 255, .18) !important; }
.sb-dim .list-progress p, .sb-dim .list-progress .progress-bar__body { color: #fff; }

/* --- Home hero: a dark band behind the headline, stronger on phones --- */
.swiper-variant-1 .swiper-slide:after {
	background: linear-gradient(90deg, rgba(0, 30, 18, .72) 0%, rgba(0, 30, 18, .45) 45%, rgba(0, 30, 18, 0) 75%) !important;
}
@media (max-width: 767px) {
	.swiper-variant-1 .swiper-slide:after { background: rgba(0, 30, 18, .58) !important; }
}
.swiper-variant-1 .swiper-slide-caption h2, .swiper-variant-1 .swiper-slide-caption p { text-shadow: 0 1px 12px rgba(0, 0, 0, .35); }

/* --- Home: the five services --- */
.sb-svc-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; margin-top: 30px; text-align: left; }
.sb-svc { display: flex; flex-direction: column; background: #fff; border-radius: 12px; overflow: hidden; border: 1px solid #e3ebe6; transition: box-shadow .2s, transform .2s; }
.sb-svc:hover { box-shadow: 0 12px 28px rgba(0, 97, 59, .12); transform: translateY(-2px); }
.sb-svc-img { display: block; aspect-ratio: 1 / 1; overflow: hidden; background: #e8f3ed; }
.sb-svc-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; }
.sb-svc:hover .sb-svc-img img { transform: scale(1.04); }
.sb-svc-body { display: flex; flex-direction: column; flex: 1; padding: 18px 18px 16px; }
.sb-svc h5 { font-size: 18px; line-height: 1.25; margin: 0 0 8px; }
.sb-svc h5 a { color: #1b2430; }
.sb-svc h5 a:hover { color: #00613B; }
.sb-svc p { font-size: 14px; line-height: 1.55; color: #555; margin: 0 0 14px; flex: 1; }
.sb-svc-links { display: flex; justify-content: space-between; align-items: center; gap: 10px; border-top: 1px solid #edf2ef; padding-top: 12px; font-size: 14px; font-weight: 700; }
.sb-svc-links a { color: #00613B; }
.sb-svc-links a.sb-svc-quote { background: #00613B; color: #fff; padding: 6px 12px; border-radius: 6px; }
.sb-svc-links a.sb-svc-quote:hover { background: #00472b; color: #fff; }
@media (max-width: 1199px) { .sb-svc-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767px) {
	/* phones: image beside the text, so five services stay short */
	.sb-svc-grid { grid-template-columns: 1fr; gap: 12px; }
	.sb-svc { flex-direction: row; }
	.sb-svc-img { flex: 0 0 104px; aspect-ratio: auto; }
	.sb-svc-body { padding: 12px 14px; }
	.sb-svc h5 { font-size: 16px; margin-bottom: 4px; }
	.sb-svc p { font-size: 13px; margin-bottom: 8px; }
	.sb-svc-links { padding-top: 8px; font-size: 13px; }
}