/* ==========================================================================
   Linemark UK — legacy homepage rebuild
   Original implementation. Palette / type scale matched to the live site.
   ========================================================================== */

:root {
	--c-dark: #282828;
	--c-dark-hover: #5b5b5b;
	--c-green: #69ed46;
	--c-green-dark: #36bb12;
	--c-green-bright: #43e818;
	--c-blue: #46aced;
	--c-text: #333;
	--c-text-muted: #666;
	--c-light-grey: #ccc;
	--c-border: #f3f3f3;

	--f-body: 'Open Sans', Arial, Helvetica, sans-serif;
	--f-display: 'Jost', 'Open Sans', Arial, sans-serif;
	--f-button: 'Signika', 'Open Sans', Arial, sans-serif;

	--header-h: 100px;
	--container: 1170px;
	--gutter: 15px;
	--transition: all 0.5s ease;
}

/* --------------------------------------------------------------------------
   Reset / base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	color: var(--c-text);
	font-family: var(--f-body);
	font-size: 14px;
	line-height: 1.42857;
	background: #fff;
}

img {
	vertical-align: middle;
	border: 0;
}

.img-fluid {
	display: block;
	max-width: 100%;
	height: auto;
}

a {
	color: var(--c-green);
	text-decoration: none;
	transition: var(--transition);
}

a:hover,
a:focus {
	text-decoration: none;
}

p {
	margin: 0 0 10px;
}

ul {
	margin-top: 0;
	margin-bottom: 10px;
}

h1, h2, h3, h4, h5 {
	margin-top: 20px;
	margin-bottom: 10px;
	font-weight: 500;
	line-height: 1.1;
}

h1 {
	font-family: var(--f-display);
	font-weight: 300;
	font-size: 3.214em;
	text-transform: uppercase;
}

h2 {
	font-family: var(--f-display);
	font-weight: 300;
	font-size: 2.8em;
	text-align: center;
	text-transform: uppercase;
}

h3 { font-size: 1.786em; }
h4 { font-size: 18px; }

sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
	top: -0.5em;
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}

/* --------------------------------------------------------------------------
   Layout primitives (12-col grid, Bootstrap-3 breakpoints)
   -------------------------------------------------------------------------- */
.container {
	width: 100%;
	max-width: var(--container);
	margin: 0 auto;
	padding-left: var(--gutter);
	padding-right: var(--gutter);
}

.row {
	display: flex;
	flex-wrap: wrap;
	margin-left: calc(var(--gutter) * -1);
	margin-right: calc(var(--gutter) * -1);
}

.col {
	position: relative;
	width: 100%;
	min-height: 1px;
	padding-left: var(--gutter);
	padding-right: var(--gutter);
}

.col--xs-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
.col--xs-8 { flex: 0 0 66.6667%; max-width: 66.6667%; }

@media (min-width: 768px) {
	.col--sm-1 { flex: 0 0 8.3333%;  max-width: 8.3333%; }
	.col--sm-3 { flex: 0 0 25%;      max-width: 25%; }
	.col--sm-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
	.col--sm-5 { flex: 0 0 41.6667%; max-width: 41.6667%; }
	.col--sm-6 { flex: 0 0 50%;      max-width: 50%; }
	.col--sm-8 { flex: 0 0 66.6667%; max-width: 66.6667%; }
	.col--sm-9 { flex: 0 0 75%;      max-width: 75%; }
}

@media (min-width: 992px) {
	.col--md-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
	.col--md-6 { flex: 0 0 50%;      max-width: 50%; }
	.col--md-8 { flex: 0 0 66.6667%; max-width: 66.6667%; }
	.col--md-offset-2 { margin-left: 16.6667%; }
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
	display: inline-block;
	font-family: var(--f-button);
	font-weight: 300;
	line-height: 1.42857;
	text-align: center;
	white-space: nowrap;
	cursor: pointer;
	background: none;
	border: 1px solid transparent;
	padding: 10px 22px;
	transition: var(--transition);
}

.btn:focus {
	outline: none;
}

.btn--news {
	color: var(--c-dark);
	background: var(--c-green);
	border-color: var(--c-green);
	font-weight: 500;
	padding: 2px 8px;
	font-size: 12px;
}

.btn--news:hover,
.btn--news:focus {
	color: var(--c-dark);
	background: var(--c-green-dark);
	border-color: var(--c-green-dark);
}

.btn--videos {
	margin: 15px 0 5px;
	padding: 6px 12px;
	font-size: 14px;
	text-transform: uppercase;
	white-space: normal;
}

.btn--outline-green {
	color: #fff;
	border-color: var(--c-green);
}

.btn--outline-green:hover,
.btn--outline-green:focus {
	color: var(--c-light-grey);
	border-color: var(--c-green-dark);
}

.btn--outline-dark {
	color: #fff;
	border-color: var(--c-dark);
}

.btn--outline-dark:hover,
.btn--outline-dark:focus {
	color: #fff;
	border-color: var(--c-dark-hover);
}

.center-buttons {
	margin: 20px 0;
	text-align: center;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.site-header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 1000;
}

.header {
	background: var(--c-dark);
	font-size: 12px;
	padding: 10px 0 15px;
}

.header__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
}

.header__logo {
	display: block;
	flex: 0 1 auto;
	max-width: 75%;
	padding: 10px 0;
	order: 2;
}

.header__logo img {
	display: block;
	max-width: 100%;
	height: auto;
}

/* On small screens the wrapper is transparent to the flex layout so the
   utility menu can sit above the logo row and the nav below it. */
.header__right {
	display: contents;
}

/* Utility menu (top-right) */
.utility-menu {
	flex: 0 0 100%;
	order: 1;
	text-align: center;
	color: var(--c-green);
}

.utility-menu__list {
	display: inline-block;
	list-style: none;
	margin: 0 0 5px;
	padding: 0;
}

.utility-menu__list li {
	display: inline;
}

.utility-menu__list li + li::before {
	content: "|";
	color: var(--c-green);
	margin: 0 4px 0 1px;
}

.utility-menu__list a {
	color: var(--c-green);
	font-size: 14px;
}

.utility-menu__list a:hover,
.utility-menu__list a:focus {
	color: var(--c-green-bright);
}

.utility-menu .btn--news {
	font-size: 14px;
	margin-left: 4px;
}

/* Hamburger */
.nav-toggle {
	order: 3;
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	gap: 4px;
	width: 44px;
	height: 34px;
	padding: 9px 10px;
	margin: 8px 0;
	background: transparent;
	border: 1px solid #fff;
	border-radius: 4px;
	cursor: pointer;
}

.nav-toggle:hover,
.nav-toggle:focus {
	background: var(--c-dark);
	outline: none;
}

.nav-toggle__bar {
	display: block;
	width: 22px;
	height: 2px;
	background: #fff;
	border-radius: 1px;
}

/* Primary nav */
.primary-nav {
	flex: 0 0 100%;
	order: 4;
	display: none;
	margin-top: 10px;
}

.primary-nav.is-open {
	display: block;
}

.primary-nav__list,
.dropdown {
	list-style: none;
	margin: 0;
	padding: 0;
}

.primary-nav__list > li > a {
	display: block;
	color: var(--c-green);
	font-size: 1.071em;
	padding: 8px 10px;
	text-transform: uppercase;
	transition: var(--transition);
}

.primary-nav__list > li > a:hover,
.primary-nav__list > li > a:focus {
	color: var(--c-light-grey);
}

.primary-nav__list > li.is-active > a {
	color: #fff;
}

.primary-nav__list > li.is-active > a:hover,
.primary-nav__list > li.is-active > a:focus {
	color: var(--c-light-grey);
}

.caret {
	display: inline-block;
	width: 0;
	height: 0;
	margin-left: 2px;
	vertical-align: middle;
	border-top: 4px solid;
	border-right: 4px solid transparent;
	border-left: 4px solid transparent;
}

.dropdown {
	background: var(--c-dark);
	border: 1px solid var(--c-dark);
	padding: 1px 0;
	display: none;
}

.has-dropdown.is-open > .dropdown {
	display: block;
}

.dropdown > li > a {
	display: block;
	color: var(--c-green);
	font-size: 1.071em;
	padding: 2px 20px;
	text-transform: uppercase;
	white-space: nowrap;
}

.dropdown > li > a:hover,
.dropdown > li > a:focus {
	color: var(--c-light-grey);
}

/* --------------------------------------------------------------------------
   Carousel (shared)
   -------------------------------------------------------------------------- */
.carousel {
	position: relative;
}

.carousel__track {
	position: relative;
	overflow: hidden;
	width: 100%;
}

/* Slides are stacked; the active slide is in normal flow (sets the track
   height) and the others overlay it, so slides cross-fade with no flash. */
.carousel__slide {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.6s ease;
}

.carousel__slide.is-active {
	position: relative;
	opacity: 1;
	pointer-events: auto;
}

.carousel__control {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 15%;
	padding: 0;
	border: 0;
	background: transparent;
	color: #fff;
	cursor: pointer;
	opacity: 0.5;
	transition: opacity 0.3s ease;
}

.carousel__control:hover,
.carousel__control:focus {
	opacity: 0.9;
	outline: none;
}

.carousel__control--prev { left: 0; }
.carousel__control--next { right: 0; }

.carousel__control::before {
	content: "";
	position: absolute;
	top: 40%;
	left: 50%;
	width: 18px;
	height: 18px;
	border-top: 3px solid currentColor;
	border-right: 3px solid currentColor;
	transform: translate(-50%, -50%) rotate(45deg);
}

.carousel__control--prev::before {
	transform: translate(-50%, -50%) rotate(-135deg);
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero {
	margin-top: var(--header-h);
	text-align: center;
}

.hero__carousel {
	margin: 0 auto;
	max-width: 1404px;
}

.hero__carousel .carousel__slide img {
	display: block;
	margin: 0 auto;
	max-width: 100%;
	height: auto;
}

.hero__caption-wrap {
	position: absolute;
	top: 26px;
	left: 0;
	right: 0;
}

.hero__caption {
	text-align: left;
	padding-left: 35px;
}

@media (min-width: 480px) {
	.hero__caption {
		padding-left: 0;
	}
}

.hero__kicker {
	color: var(--c-green);
	font-size: 1.229em;
	font-weight: 600;
	margin: 0 0 10px;
	text-align: left;
}

.hero__title {
	color: #fff;
	margin: 0;
	text-align: left;
}

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */
.section {
	padding: 20px 0 30px;
}

.section--white {
	background: #fff;
	color: var(--c-text);
}

.section--dark {
	background: var(--c-dark);
	color: #fff;
}

.section--green {
	background: var(--c-green);
	color: var(--c-text);
}

.section__lead {
	font-size: 1.125em;
	font-weight: 500;
	text-align: center;
	margin: 10px 0 50px;
}

.section__lead--green { color: var(--c-green); }
.section__lead--blue  { color: var(--c-blue); font-weight: 600; margin-bottom: 30px; }

.display {
	margin-top: 20px;
	margin-bottom: 10px;
}

.display--2 { font-size: 2.6em; margin-top: 0; }
.display--3 { font-size: 2.4em; margin-top: 0; }

/* Intro */
.intro__kicker {
	color: var(--c-blue);
	font-size: 1.125em;
	font-weight: 600;
	margin: 20px 0 10px;
	text-align: left;
}

.intro__title {
	margin-top: 10px;
}

.flags {
	list-style: none;
	margin: 20px 0 0;
	padding: 0;
	text-align: left;
}

.flags li {
	display: inline-block;
	margin: 0 5px 10px 0;
}

.flags li:last-child {
	margin-right: 0;
}

.flags img {
	max-width: 100%;
	height: auto;
}

/* Impact */
.impact__copy ul {
	padding-left: 40px;
}

.impact__copy li {
	margin-bottom: 2px;
}

.angle-up {
	background: var(--c-dark);
	line-height: 0;
}

.angle-up img {
	width: 100%;
	height: auto;
	display: block;
}

/* Testimonials */
.testimonials__carousel {
	margin-bottom: 15px;
}

.testimonial {
	margin: 0;
	text-align: center;
}

.testimonial__photo {
	display: block;
	margin: 0 auto 20px;
	max-width: 175px;
	height: auto;
	border: 5px solid var(--c-border);
	border-radius: 50%;
}

.testimonial__quote {
	margin: 0 auto;
	padding: 0;
	max-width: 83.3333%;
}

.testimonial__author {
	font-size: 1em;
	font-weight: 600;
	line-height: 1.5em;
	margin: 10px auto 20px;
	max-width: 83.3333%;
}

.testimonial__org {
	color: var(--c-green);
}

.testimonial__dash {
	display: none;
}

.testimonials__carousel .carousel__control {
	color: var(--c-text);
	opacity: 1;
}

/* News */
.news__heading {
	color: var(--c-dark);
	font-weight: 600;
}

.news-card {
	margin-bottom: 20px;
}

.news-card__title {
	color: var(--c-text);
	font-weight: 600;
	transition: var(--transition);
}

.news-card a:hover .news-card__title,
.news-card a:focus .news-card__title {
	color: var(--c-text-muted);
}

.news-card__date {
	display: block;
	color: var(--c-text);
	font-weight: 600;
	margin: 0 0 10px;
}

.news-card p {
	color: var(--c-text);
}

.news-card__more {
	display: block;
	color: var(--c-text);
	margin-bottom: 10px;
}

.news-card__more:hover,
.news-card__more:focus {
	color: var(--c-text-muted);
}

.news-card img {
	margin-bottom: 15px;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.footer {
	background: var(--c-dark);
	color: #fff;
	padding: 20px 0;
}

.footer__heading {
	font-weight: 600;
}

.footer p {
	font-weight: 300;
}

.footer__label {
	color: var(--c-green);
}

.footer p a {
	color: #fff;
}

.footer p a:hover,
.footer p a:focus {
	color: var(--c-light-grey);
}

.footer__square {
	text-align: center;
}

.footer__square img {
	display: inline-block;
}

.footer__logo {
	display: block;
	margin: 10px 0;
}

.footer__spacer {
	display: none;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (min-width: 480px) {
	:root { --header-h: 85px; }

	.hero__caption-wrap { top: 40px; }
}

@media (min-width: 768px) {
	:root { --header-h: 80px; }

	.container { max-width: 750px; }

	h1, h2 { font-size: 3.286em; }
	.display--2,
	.display--3 { font-size: 2.571em; }
	.section__lead,
	.intro__kicker { font-size: 1.429em; }

	.header { padding: 10px 0 20px; }

	.utility-menu { text-align: right; }
	.utility-menu__list { margin-bottom: 0; }
	.utility-menu .btn--news { margin-left: 10px; }

	.primary-nav { margin-top: 25px; }

	.hero__caption-wrap { top: 80px; }
	.hero__kicker { font-size: 1.786em; }

	.testimonial__dash { display: inline; }
	.testimonials__carousel { margin-bottom: 10px; }

	.news-card__date { margin: 10px 0 0; }
	.news-card img { margin-bottom: 0; }

	.footer__spacer { display: block; }
	.footer__square { margin-top: 10px; }
}

@media (min-width: 992px) {
	:root { --header-h: 98px; }

	.container { max-width: 970px; }

	.header { padding: 10px 0 5px; }

	.header__inner {
		flex-wrap: nowrap;
		align-items: flex-start;
	}

	.header__logo {
		order: 1;
		max-width: none;
		padding: 0;
		margin-top: 0;
	}

	.nav-toggle { display: none; }

	.header__right {
		order: 2;
		flex: 1 1 auto;
		display: flex;
		flex-direction: column;
		align-items: flex-end;
	}

	.utility-menu {
		flex: 0 0 auto;
		order: 0;
		padding-right: 15px;
	}

	.primary-nav {
		display: block;
		flex: 0 0 auto;
		margin-top: 22px;
	}

	.primary-nav__list {
		display: flex;
		align-items: center;
	}

	.has-dropdown {
		position: relative;
	}

	.dropdown {
		position: absolute;
		top: 100%;
		left: 0;
		z-index: 1000;
		min-width: 160px;
		display: none;
	}

	.has-dropdown:hover > .dropdown,
	.has-dropdown:focus-within > .dropdown,
	.has-dropdown.is-open > .dropdown {
		display: block;
	}

	.hero__caption-wrap { top: 110px; }
}

@media (min-width: 1200px) {
	.container { max-width: 1170px; }

	.utility-menu { padding-right: 40px; }

	.hero__caption-wrap { top: 130px; }
}

/* ==========================================================================
   Inner pages
   The CMS content uses Bootstrap‑3 era class names (row / col-* / section
   white|grey|green …). Everything below is an original implementation that
   gives those class names a flexbox layout and the site's visual language.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Content grid
   -------------------------------------------------------------------------- */
[class*="col-xs-"],
[class*="col-sm-"],
[class*="col-md-"],
[class*="col-lg-"] {
	position: relative;
	width: 100%;
	min-height: 1px;
	padding-left: var(--gutter);
	padding-right: var(--gutter);
	flex: 0 0 100%;
	max-width: 100%;
}

.col-xs-1  { flex: 0 0 8.3333%;  max-width: 8.3333%; }
.col-xs-2  { flex: 0 0 16.6667%; max-width: 16.6667%; }
.col-xs-3  { flex: 0 0 25%;      max-width: 25%; }
.col-xs-4  { flex: 0 0 33.3333%; max-width: 33.3333%; }
.col-xs-5  { flex: 0 0 41.6667%; max-width: 41.6667%; }
.col-xs-6  { flex: 0 0 50%;      max-width: 50%; }
.col-xs-7  { flex: 0 0 58.3333%; max-width: 58.3333%; }
.col-xs-8  { flex: 0 0 66.6667%; max-width: 66.6667%; }
.col-xs-9  { flex: 0 0 75%;      max-width: 75%; }
.col-xs-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }
.col-xs-11 { flex: 0 0 91.6667%; max-width: 91.6667%; }
.col-xs-12 { flex: 0 0 100%;     max-width: 100%; }
.col-xs-offset-0 { margin-left: 0; }
.col-xs-offset-1 { margin-left: 8.3333%; }
.col-xs-offset-2 { margin-left: 16.6667%; }
.col-xs-offset-3 { margin-left: 25%; }

@media (min-width: 768px) {
	.col-sm-1  { flex: 0 0 8.3333%;  max-width: 8.3333%; }
	.col-sm-2  { flex: 0 0 16.6667%; max-width: 16.6667%; }
	.col-sm-3  { flex: 0 0 25%;      max-width: 25%; }
	.col-sm-4  { flex: 0 0 33.3333%; max-width: 33.3333%; }
	.col-sm-5  { flex: 0 0 41.6667%; max-width: 41.6667%; }
	.col-sm-6  { flex: 0 0 50%;      max-width: 50%; }
	.col-sm-7  { flex: 0 0 58.3333%; max-width: 58.3333%; }
	.col-sm-8  { flex: 0 0 66.6667%; max-width: 66.6667%; }
	.col-sm-9  { flex: 0 0 75%;      max-width: 75%; }
	.col-sm-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }
	.col-sm-11 { flex: 0 0 91.6667%; max-width: 91.6667%; }
	.col-sm-12 { flex: 0 0 100%;     max-width: 100%; }
	.col-sm-offset-0 { margin-left: 0; }
	.col-sm-offset-1 { margin-left: 8.3333%; }
	.col-sm-offset-2 { margin-left: 16.6667%; }
	.col-sm-offset-3 { margin-left: 25%; }
	.hidden-sm { display: none !important; }
}

@media (min-width: 992px) {
	.col-md-1  { flex: 0 0 8.3333%;  max-width: 8.3333%; }
	.col-md-2  { flex: 0 0 16.6667%; max-width: 16.6667%; }
	.col-md-3  { flex: 0 0 25%;      max-width: 25%; }
	.col-md-4  { flex: 0 0 33.3333%; max-width: 33.3333%; }
	.col-md-5  { flex: 0 0 41.6667%; max-width: 41.6667%; }
	.col-md-6  { flex: 0 0 50%;      max-width: 50%; }
	.col-md-7  { flex: 0 0 58.3333%; max-width: 58.3333%; }
	.col-md-8  { flex: 0 0 66.6667%; max-width: 66.6667%; }
	.col-md-9  { flex: 0 0 75%;      max-width: 75%; }
	.col-md-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }
	.col-md-11 { flex: 0 0 91.6667%; max-width: 91.6667%; }
	.col-md-12 { flex: 0 0 100%;     max-width: 100%; }
	.col-md-offset-0 { margin-left: 0; }
	.col-md-offset-1 { margin-left: 8.3333%; }
	.col-md-offset-2 { margin-left: 16.6667%; }
	.col-md-offset-3 { margin-left: 25%; }
	.hidden-md { display: none !important; }
	.hidden-sm { display: revert !important; }
}

@media (min-width: 1200px) {
	.hidden-lg { display: none !important; }
	.hidden-md { display: revert !important; }
}

@media (max-width: 767px) {
	.hidden-xs { display: none !important; }
}

/* Utilities used by the content */
.img-responsive {
	display: block;
	max-width: 100%;
	height: auto;
}

.img-circle {
	border-radius: 50%;
}

.small,
small {
	font-size: 85%;
}

.lead {
	font-size: 1em;
	font-weight: 700;
	color: var(--c-blue);
}

hr {
	box-sizing: content-box;
	height: 0;
	margin: 20px 0;
	border: 0;
	border-top: 1px solid #eee;
}

.embed-responsive {
	position: relative;
	display: block;
	width: 100%;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	background: #000;
}

.embed-responsive .embed-responsive-item,
.embed-responsive iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.icon {
	display: inline-block;
	width: 1em;
	height: 1em;
	vertical-align: -0.125em;
	background-color: currentColor;
	-webkit-mask: no-repeat center / contain;
	mask: no-repeat center / contain;
}

.icon--zoom {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 2a8 8 0 1 1 4.9 14.3l5.4 5.4-1.6 1.6-5.4-5.4A8 8 0 0 1 10 2zm0 2a6 6 0 1 0 0 12 6 6 0 0 0 0-12zm-1 3h2v2h2v2h-2v2H9v-2H7V9h2V7z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 2a8 8 0 1 1 4.9 14.3l5.4 5.4-1.6 1.6-5.4-5.4A8 8 0 0 1 10 2zm0 2a6 6 0 1 0 0 12 6 6 0 0 0 0-12zm-1 3h2v2h2v2h-2v2H9v-2H7V9h2V7z'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   Section colour aliases (CMS class names)
   -------------------------------------------------------------------------- */
.section.white {
	background: #fff;
	color: var(--c-text);
}

.section.white h5 {
	color: var(--c-blue);
	font-size: 1.125em;
	font-weight: 600;
	text-align: center;
	margin-bottom: 30px;
}

.section.grey {
	background: var(--c-dark);
	color: #fff;
}

.section.grey h4 {
	color: var(--c-green);
}

.section.grey h5 {
	color: var(--c-green);
	font-size: 1.125em;
	text-align: center;
	margin-bottom: 50px;
}

.section.grey hr {
	border-top: 1px solid var(--c-green);
	margin-top: 60px;
}

.section.green {
	background: var(--c-green);
	color: var(--c-text);
}

.section.green h3 {
	color: var(--c-dark);
	font-weight: 600;
}

.section.leading h5 {
	text-align: left;
	margin-bottom: 10px;
}

.section.leading h1 {
	margin-top: 10px;
}

.section.leading p.BodyA,
.section.leading p.p1 {
	margin-bottom: 10px;
}

.white-angle-up {
	background: var(--c-dark);
	line-height: 0;
}

.white-angle-up img {
	display: block;
	width: 100%;
	height: auto;
}

/* Generic link colour inside light sections */
.section.white a:not([class]),
.section.leading a:not([class]) {
	color: var(--c-green-dark);
}

.section.white a:not([class]):hover,
.section.leading a:not([class]):hover {
	color: var(--c-text);
}

/* --------------------------------------------------------------------------
   Static hero (inner pages)
   -------------------------------------------------------------------------- */
.hero--static {
	position: relative;
	max-width: 1404px;
	margin-left: auto;
	margin-right: auto;
}

.hero--static > img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	margin: 0 auto;
}

.hero--static > .container {
	position: absolute;
	top: 30%;
	left: 0;
	right: 0;
}

.hero-caption {
	text-align: left;
	padding-left: 35px;
}

.hero-caption h5 {
	color: var(--c-green);
	font-size: 1.229em;
	font-weight: 600;
	margin: 0 0 10px;
	text-align: left;
}

.hero-caption h2 {
	color: #fff;
	font-size: 1.9em;
	margin: 0;
	text-align: left;
}

.product-template .hero--static > .container {
	top: 48%;
}

/* --------------------------------------------------------------------------
   Carousel extras: indicators + inner‑page testimonial variants
   -------------------------------------------------------------------------- */
.carousel__indicators {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 12px;
	z-index: 5;
	display: flex;
	justify-content: center;
	gap: 6px;
	margin: 0;
	padding: 0;
}

.carousel__indicators button {
	width: 10px;
	height: 10px;
	padding: 0;
	border: 1px solid var(--c-green);
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
}

.carousel__indicators button.is-active {
	background: var(--c-green);
}

/* Small avatar testimonials (about / impact pages) */
.testimonials__carousel .carousel__slide {
	text-align: center;
}

.testimonials__carousel img.img-circle {
	display: block;
	margin: 0 auto 20px;
	max-width: 175px;
	height: auto;
	border: 5px solid var(--c-border);
}

.testimonials__carousel .carousel-caption {
	position: static;
	color: var(--c-text);
	text-shadow: none;
	padding: 0;
}

.testimonials__carousel .carousel-caption h4 {
	font-size: 1em;
	font-weight: 600;
	line-height: 1.5em;
}

.testimonials__carousel .organisation {
	color: var(--c-green);
}

/* Full‑bleed background testimonials */
.bg-testimonials {
	background: var(--c-dark);
	color: #fff;
}

.bg-testimonials .carousel__slide {
	min-height: 440px;
}

.bg-testimonials .carousel__slide > img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.bg-testimonials .carousel__slide::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.15) 60%, rgba(0, 0, 0, 0) 100%);
	pointer-events: none;
}

.bg-testimonials .carousel-caption {
	position: relative;
	z-index: 2;
	padding: 60px 0 60px;
	text-align: left;
}

.bg-testimonials .carousel-caption p {
	font-size: 1.1em;
	text-align: left;
}

.bg-testimonials .carousel-caption h3 {
	text-align: left;
	margin-top: 0;
}

.bg-testimonials .carousel-caption .author {
	font-size: 1.143em;
	line-height: 1.343em;
	margin-top: 15px;
}

.bg-testimonials .organisation {
	color: var(--c-green);
}

.bg-testimonials .carousel__control {
	opacity: 1;
	z-index: 3;
}

.bg-testimonials .carousel__indicators {
	bottom: 24px;
}

/* --------------------------------------------------------------------------
   Buttons (CMS class names)
   -------------------------------------------------------------------------- */
.button-green,
.button-green-dark,
.button-grey,
.button-grey-outline,
.cms_submit {
	display: inline-block;
	font-family: var(--f-button);
	font-weight: 300;
	font-size: 14px;
	line-height: 1.42857;
	text-align: center;
	cursor: pointer;
	background: none;
	border: 1px solid transparent;
	padding: 10px 22px;
	transition: var(--transition);
}

.button-green {
	color: #fff;
	border-color: var(--c-green);
}

.button-green:hover,
.button-green:focus {
	color: var(--c-light-grey);
	border-color: var(--c-green-dark);
	outline: none;
}

.button-green-dark,
.cms_submit {
	color: var(--c-text);
	border-color: var(--c-green);
	margin-bottom: 4px;
}

.button-green-dark:hover,
.button-green-dark:focus,
.cms_submit:hover,
.cms_submit:focus {
	color: var(--c-green-dark);
	border-color: var(--c-green-dark);
	outline: none;
}

.button-grey {
	color: #fff;
	background: var(--c-dark);
	border-color: var(--c-green);
}

.button-grey:hover,
.button-grey:focus,
.button-grey.is-active {
	color: var(--c-light-grey);
	background: var(--c-dark-hover);
	outline: none;
}

.button-grey-outline {
	color: #fff;
	border-color: var(--c-dark);
}

.button-grey-outline:hover,
.button-grey-outline:focus {
	border-color: var(--c-dark-hover);
	outline: none;
}

.button-news {
	color: var(--c-dark);
	background: var(--c-green);
	border: 1px solid var(--c-green);
	display: inline-block;
	font-family: var(--f-button);
	font-weight: 500;
	padding: 2px 8px;
}

.button-news:hover,
.button-news:focus {
	background: var(--c-green-dark);
	border-color: var(--c-green-dark);
	color: var(--c-dark);
}

/* --------------------------------------------------------------------------
   Timeline (About us)
   -------------------------------------------------------------------------- */
.cbp_tmtimeline {
	list-style: none;
	margin: 60px 0;
	padding: 0;
	position: relative;
}

.cbp_tmtimeline > li {
	position: relative;
	margin-bottom: 30px;
}

.cbp_tmtimeline > li .cbp_tmtime {
	display: block;
	padding: 0 0 20px;
}

.cbp_tmtimeline > li .cbp_tmtime span {
	display: block;
	text-align: left;
}

.cbp_tmtimeline > li .cbp_tmtime span:first-child {
	color: #999;
	font-size: 0.9em;
}

.cbp_tmtimeline > li .cbp_tmtime span:last-child {
	color: var(--c-green);
	font-size: 1.5em;
}

.cbp_tmtimeline > li .cbp_tmlabel {
	position: relative;
	background: #333;
	border-radius: 5px;
	color: #fff;
	font-size: 95%;
	font-weight: 400;
	line-height: 1.4;
	padding: 1em;
	margin: 0;
}

.cbp_tmtimeline > li:nth-child(odd) .cbp_tmlabel {
	background: #4d4d4d;
}

.cbp_tmtimeline > li .cbp_tmlabel h3 {
	margin-top: 0;
	padding: 0 0 10px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.4);
	font-size: 1.4em;
}

.cbp_tmtimeline > li .cbp_tmlabel::after {
	content: "";
	position: absolute;
	width: 0;
	height: 0;
	border: 10px solid transparent;
	pointer-events: none;
	left: 20px;
	top: -20px;
	border-bottom-color: #333;
}

.cbp_tmtimeline > li:nth-child(odd) .cbp_tmlabel::after {
	border-bottom-color: #4d4d4d;
}

.cbp_tmtimeline > li .cbp_tmicon {
	display: none;
	position: absolute;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--c-green);
	box-shadow: 0 0 0 8px #fff;
	top: 0;
	left: 20%;
	margin-left: -20px;
}

.cbp_tmtimeline > li .cbp_tmicon::after {
	content: "";
	position: absolute;
	inset: 12px;
	border-radius: 50%;
	background: #fff;
}

.cbp_tmlabel ul {
	padding: 0;
	text-align: left;
	margin-bottom: 0;
}

.cbp_tmlabel li {
	list-style: none;
	margin: 0 0 4px;
	padding: 0 0 0 1em;
	position: relative;
}

.cbp_tmlabel li::before {
	content: "•";
	color: var(--c-green-bright);
	position: absolute;
	left: 0;
	font-weight: bold;
}

@media (min-width: 768px) {
	.cbp_tmtimeline::before {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		left: 20%;
		width: 10px;
		margin-left: -10px;
		background: #fff;
	}

	.cbp_tmtimeline > li {
		margin-bottom: 0;
	}

	.cbp_tmtimeline > li .cbp_tmtime {
		position: absolute;
		width: 25%;
		padding-right: 100px;
	}

	.cbp_tmtimeline > li .cbp_tmtime span {
		text-align: right;
	}

	.cbp_tmtimeline > li .cbp_tmtime span:last-child {
		font-size: 1.5em;
	}

	.cbp_tmtimeline > li .cbp_tmlabel {
		margin: 0 0 15px 25%;
		padding: 2em;
		font-size: 1.2em;
		font-weight: 300;
	}

	.cbp_tmtimeline > li .cbp_tmlabel::after {
		left: auto;
		right: 100%;
		top: 10px;
		border-bottom-color: transparent;
		border-right-color: #333;
	}

	.cbp_tmtimeline > li:nth-child(odd) .cbp_tmlabel::after {
		border-bottom-color: transparent;
		border-right-color: #4d4d4d;
	}

	.cbp_tmtimeline > li .cbp_tmicon {
		display: block;
	}
}

@media (min-width: 1050px) {
	.cbp_tmtimeline > li .cbp_tmtime span:last-child {
		font-size: 2.9em;
	}
}

/* --------------------------------------------------------------------------
   Products, ranges, stats (Impact / concentrates / machines / accessories)
   -------------------------------------------------------------------------- */
.stat {
	margin: 40px 0 0;
	text-align: center;
}

.stat h3 {
	margin: 0 0 20px;
}

.stat-ring {
	display: block;
	margin: 0 auto;
	max-width: 250px;
	width: 100%;
	height: auto;
}

.stat-ring__track {
	fill: none;
	stroke: #323a45;
}

.stat-ring__value {
	fill: none;
	stroke: var(--c-green);
	stroke-linecap: butt;
	transform: rotate(-90deg);
	transform-origin: 50% 50%;
	transition: stroke-dashoffset 1.2s ease-out;
}

.stat-ring__label {
	fill: #fff;
	font-family: var(--f-body);
	font-weight: 600;
	font-size: 38px;
	text-anchor: middle;
	dominant-baseline: central;
}

.product-template .section.white .row,
.section.white .row:has(> [class*="col-"] > .product),
.section.white .row:has(> [class*="col-"] > .sports-logo) {
	align-items: stretch;
}

.product {
	display: flex;
	flex-direction: column;
	height: 100%;
	margin: 20px 0 40px;
	text-align: center;
}

.product img {
	display: block;
	margin: 15px auto;
	max-width: 75%;
	height: auto;
}

.product h3 {
	color: var(--c-text);
	font-family: var(--f-button);
	font-weight: 600;
	text-align: center;
}

.product h4 {
	color: var(--c-text);
	font-family: var(--f-button);
	font-weight: 600;
	margin-top: 20px;
	text-align: left;
}

.product .product-subtitle {
	text-align: center;
	margin-top: 10px;
	font-size: 15px;
	min-height: 1.2em;
}

.product p {
	text-align: left;
}

.product ul {
	text-align: left;
	padding: 0;
}

.product li {
	list-style: none;
	margin: 0 0 3px;
	padding: 0 0 0 1em;
	position: relative;
}

.product li::before {
	content: "•";
	color: var(--c-green-bright);
	position: absolute;
	left: 0;
	font-weight: bold;
}

.product .center-buttons {
	margin: auto 0 0;
	padding-top: 30px;
}

.colour-range {
	padding: 0;
	margin: 0 0 10px;
	text-align: left;
}

.colour-range li {
	display: inline-block;
	width: 30px;
	height: 30px;
	margin: 0 2px 4px 0;
	padding: 0;
	border: 1px solid #999;
	border-radius: 50%;
	background: #fff;
}

.colour-range li::before {
	content: none;
}

.colour-range li.red    { background: #d72525; }
.colour-range li.yellow { background: #f5e820; }
.colour-range li.blue   { background: #206bf5; }
.colour-range li.orange { background: #ffbd0a; }
.colour-range li.green  { background: #33831d; }
.colour-range li.black  { background: #000; }

.featured-product img {
	margin: 40px auto 10px;
}

.featured-product.impact img {
	margin: 10px auto !important;
}

.impact .video-text {
	text-align: center;
	margin-top: 10px;
}

.impact .video-text a,
.featured-product .video-text a {
	color: #fff;
}

.impact .video-text a:hover,
.featured-product .video-text a:hover {
	color: var(--c-light-grey);
}

.video-flags {
	text-align: center;
}

.video-flags img {
	display: inline-block;
	margin: 0 3px;
	max-width: 48px;
}

.application h1 {
	text-align: center;
}

.application h5 {
	margin-bottom: 20px;
}

.application img {
	margin-bottom: 50px;
}

/* --------------------------------------------------------------------------
   Videos
   -------------------------------------------------------------------------- */
.videos-list {
	margin: 0 0 80px;
	text-align: center;
}

.category-buttons {
	margin: 0 0 40px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
}

.category-buttons .button-grey {
	margin: 0 !important;
}

.videos-list .category-title {
	color: var(--c-green);
	font-family: var(--f-body);
	font-size: 2.143em;
	margin: 40px 0 10px;
	text-align: center;
}

.videos-list .category-content {
	display: flex;
	flex-wrap: wrap;
	margin-left: calc(var(--gutter) * -1);
	margin-right: calc(var(--gutter) * -1);
}

.videos-list hr {
	border-top: 1px solid var(--c-green);
	margin: 0 0 40px;
}

.video {
	margin: 0 0 25px;
	text-align: center;
}

.video h3 {
	font-size: 1.25em;
	min-height: 2.6em;
	margin: 10px 0;
}

.videos-list [hidden] {
	display: none !important;
}

/* --------------------------------------------------------------------------
   Sports logos
   -------------------------------------------------------------------------- */
.sports-logos-list > .container {
	padding: 0;
}

.sports-logo {
	margin: 0 0 30px;
	text-align: center;
}

.sports-logo h3 {
	margin-bottom: 5px;
	min-height: 65px;
	font-size: 1.4em;
	text-align: center;
}

.sports-logo img {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 0 auto;
}

/* --------------------------------------------------------------------------
   Distributors
   -------------------------------------------------------------------------- */
.distributors-list {
	text-align: center;
	padding-bottom: 20px;
}

.distributor {
	position: relative;
	background: #5a6470;
	color: #fff;
	margin-bottom: 30px;
	min-height: 277px;
	overflow: hidden;
	text-align: center;
}

.distributor > img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 277px;
	object-fit: cover;
	opacity: 0.35;
}

.distributor .distributor-overlay {
	position: absolute;
	inset: 0;
	padding: 0 15px 15px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.distributor h3 {
	color: var(--c-green);
	margin: 15px 0 10px;
	font-size: 1.6em;
}

.distributor p {
	margin-bottom: 6px;
}

.distributor a {
	color: #fff;
	word-break: break-word;
}

.distributor a:hover,
.distributor a:focus {
	color: var(--c-light-grey);
}

.distributors-contact {
	margin: 60px 0 80px;
}

.distributors-contact h2 {
	text-align: left;
	text-transform: none;
}

/* --------------------------------------------------------------------------
   News (listing, detail, green strip)
   -------------------------------------------------------------------------- */
.section.green .news-summary {
	margin-bottom: 20px;
}

.section.green .news-summary h4 {
	font-weight: 600;
	color: var(--c-text);
	transition: var(--transition);
}

.section.green .news-summary a:hover h4,
.section.green .news-summary a:hover p {
	color: var(--c-text-muted);
}

.section.green .news-summary p,
.section.green .news-summary a {
	color: var(--c-text);
}

.section.green .news-summary .date {
	color: var(--c-text);
	font-weight: 600;
	margin: 0 0 10px;
}

.section.green .news-summary img {
	margin-bottom: 15px;
}

.section.white .news-summary {
	margin: 0 0 40px;
}

.section.white .news-summary h4 {
	font-weight: 600;
	color: var(--c-text);
	margin-top: 10px;
}

.section.white .news-summary a:not([class]) {
	color: var(--c-text);
}

.section.white .news-summary a:not([class]):hover h4,
.section.white .news-summary a:not([class]):hover {
	color: var(--c-text-muted);
}

.section.white .news-summary .date {
	color: var(--c-text);
	margin: 0 0 10px;
}

.section.white .news-summary img {
	margin: 20px 0 5px;
}

.section.white .news-summary .small {
	color: var(--c-text-muted);
}

.section.white .news-summary .read-more {
	margin: 20px 0 0;
}

.news-summary-divide hr {
	border-top: 1px solid var(--c-green);
}

#NewsPostDetailTitle {
	margin-bottom: 10px;
}

#NewsPostDetailDate {
	margin: 20px 0 0;
}

#NewsPostDetailHorizRule {
	border-top: 1px solid var(--c-green);
	margin-top: 10px;
}

#NewsPostDetailContent {
	margin-top: 20px;
}

#NewsPostDetailReturn {
	margin: 20px 0 30px;
}

.section.leading .news-summary a[data-lightbox],
.section.leading a[data-lightbox] {
	display: block;
	color: var(--c-text);
}

/* Pagination line ("Page 1 of 11  > >>") */
.section.leading > .container > .row > [class*="col-"] > p > a,
.section.leading p > a[href*="news/page/"] {
	display: inline-block;
	min-width: 28px;
	margin: 0 2px;
	padding: 2px 8px;
	border: 1px solid var(--c-green);
	color: var(--c-text);
	text-align: center;
}

.section.leading p > a[href*="news/page/"]:hover,
.section.leading p > a[href*="news/"]:hover {
	color: var(--c-green-dark);
}

/* --------------------------------------------------------------------------
   Forms (contact / distributor enquiry)
   -------------------------------------------------------------------------- */
.cms_form {
	margin: 20px 0 40px;
	max-width: 720px;
}

.cms_form fieldset {
	border: 0;
	margin: 0;
	padding: 0;
}

.form-group {
	margin-bottom: 15px;
}

.form-group label {
	display: block;
	margin-bottom: 5px;
	font-weight: 600;
}

.cms_form input[type="text"],
.cms_form input[type="email"],
.cms_form input[type="tel"],
.cms_form textarea {
	display: block;
	width: 100%;
	padding: 6px 12px;
	font: inherit;
	color: var(--c-text);
	background: #fff;
	border: 1px solid #bfbfbf;
	border-radius: 0;
}

.cms_form input:focus,
.cms_form textarea:focus {
	outline: 3px solid var(--c-green);
	outline-offset: -1px;
}

.cms_form textarea {
	min-height: 180px;
	resize: vertical;
}

.form-note {
	padding: 10px 12px;
	background: #f6f6f6;
	border-left: 3px solid var(--c-green);
	color: var(--c-text-muted);
	font-size: 0.93em;
}

.cms_form .submit {
	margin-top: 10px;
}

.cms_form .cms_submit {
	min-width: 140px;
}

.form-sent {
	color: var(--c-green-dark);
	font-weight: 600;
	margin-top: 10px;
}

/* --------------------------------------------------------------------------
   Lightbox
   -------------------------------------------------------------------------- */
.lightbox {
	position: fixed;
	inset: 0;
	z-index: 20000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 30px;
	background: rgba(0, 0, 0, 0.88);
	animation: lightbox-in 0.25s ease;
}

@keyframes lightbox-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

.lightbox__figure {
	margin: 0;
	max-width: 100%;
	max-height: 100%;
	text-align: center;
}

.lightbox__img {
	max-width: 100%;
	max-height: calc(100vh - 120px);
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
}

.lightbox__caption {
	color: #fff;
	margin-top: 12px;
	font-size: 1em;
}

.lightbox__close {
	position: absolute;
	top: 14px;
	right: 18px;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #fff;
	font-size: 34px;
	line-height: 1;
	cursor: pointer;
}

.lightbox__close:hover,
.lightbox__close:focus {
	color: var(--c-green);
	outline: none;
}

body.lightbox-open {
	overflow: hidden;
}

/* Cursor hint on lightbox thumbnails */
a[data-lightbox] {
	cursor: zoom-in;
}

/* --------------------------------------------------------------------------
   Inner page responsive tweaks
   -------------------------------------------------------------------------- */
@media (min-width: 480px) {
	.hero-caption {
		padding-left: 0;
	}

	.hero-caption h2 {
		font-size: 2.4em;
	}
}

@media (min-width: 768px) {
	.section.white h5,
	.section.grey h5 {
		font-size: 1.429em;
	}

	.hero-caption h5 {
		font-size: 1.786em;
	}

	.hero-caption h2 {
		font-size: 3.286em;
	}

	.bg-testimonials .carousel__slide {
		min-height: 0;
	}

	.bg-testimonials .carousel__slide > img {
		position: relative;
		height: auto;
		inset: auto;
	}

	.bg-testimonials .carousel__slide::after {
		background: linear-gradient(to top, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0) 55%);
	}

	.bg-testimonials .carousel-caption {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 3%;
		padding: 0;
	}

	.bg-testimonials .carousel-caption p {
		font-size: 1.249em;
	}

	.bg-testimonials .carousel-caption .author {
		font-size: 1.133em;
	}

	.section.white .news-summary .date {
		text-align: right;
	}

	.section.white .news-summary img {
		margin: 0 0 5px;
	}

	.section.green .news-summary .date {
		text-align: left;
		margin: 10px 0 0;
	}

	.section.green .news-summary img {
		margin-bottom: 0;
	}

	#NewsPostDetailDate {
		text-align: right;
	}

	.stat {
		margin: 40px 0;
	}

	.videos-list .category-buttons {
		margin-bottom: 50px;
	}
}

@media (min-width: 1200px) {
	.bg-testimonials .carousel-caption {
		bottom: 25%;
	}

	.bg-testimonials .carousel-caption p {
		font-size: 1.429em;
	}

	.bg-testimonials .carousel-caption .author {
		font-size: 1.143em;
	}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation: none !important;
		transition: none !important;
	}
	html { scroll-behavior: auto; }
}