/**
 * Site footer (+ the graphic that overlaps up into the CTA block).
 *
 * Brand colours: ink #1E1F1E · slate #454645 · brand #119100 ·
 *                sky #35AFC9 · cloud #F3EFE3
 */

/* Shared wrapper around the CTA + footer. The decorative graphic is a single
   child here, so it can span both and clip cleanly at the wrapper's edges. */
.nops-footer-wrap {
	position: relative;
	overflow: hidden; /* clips the graphic to the CTA+footer bounds (all sides) */
}

.nops-footer-wrap-graphic {
	position: absolute;
	right: -215px;      /* ~half the artwork off the right edge */
	bottom: 0;          /* anchored to the wrapper bottom (= footer bottom) */
	width: 858px;
	max-width: fit-content;
	z-index: 1;         /* above the section backgrounds, below their content */
	pointer-events: none;
	line-height: 0;
}

.nops-footer-wrap-graphic svg {
	width: 100%;
	height: auto;
	display: block;
}

.nops-footer {
	position: relative;
	width: 100%;
	background: #454645; /* slate — normal section background */
	color: #f3efe3; /* cloud */
	padding: 98px 0 48px;
}

.nops-footer-inner {
	position: relative;
}

/* ---- 4 equal columns ---- */
.nops-footer-cols {
	display: grid;
	/* First column (logo) is wider; the other three share the rest evenly.
	   Proportional fractions, no hardcoded widths. */
	grid-template-columns: 1.6fr 1fr 1fr 1fr;
	gap: 48px;
}

.nops-footer-logo svg {
	display: block;
	width: 414px;      /* at 1920px */
	max-width: 100%;
	height: auto;
}

.nops-footer-heading {
	margin: 0 0 24px;
	font-weight: 400;
	line-height: 1.1;
	color: #f3efe3;
	font-size: clamp(1.75rem, 2.08vw, 40px); /* 40px */
}

/* Footer menus / lists */
.nops-footer-menu,
.nops-footer-socials {
	list-style: none;
	margin: 0;
	padding: 0;
}

.nops-footer-menu li,
.nops-footer-socials li {
	margin: 0 0 12px;
}

.nops-footer-menu a,
.nops-footer-socials a,
.nops-footer-contact,
.nops-footer-tel {
	font-size: 20px; /* all footer links/text 20px */
	line-height: 1.5;
	color: #f3efe3;
	text-decoration: none;
}

.nops-footer-menu a:hover,
.nops-footer-socials a:hover,
.nops-footer-tel:hover {
	color: #35afc9; /* sky */
}

/* Contact column */
.nops-footer-contact {
	font-style: normal;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.nops-footer-tel {
	margin-top: 12px;
	color: #ffffff; /* white clickable telephone */
}

/* ---- Bottom bar ---- */
.nops-footer-bottom {
	margin-top: 250px; /* 250px padding above the line */
	padding-top: 24px;
	border-top: 1px solid #35afc9; /* blue 1px line, full container width */
	display: flex;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}

.nops-footer-legal,
.nops-footer-credit {
	margin: 0;
	font-size: 14px; /* 14px */
	color: #f3efe3;
}

.nops-footer-legal a {
	color: #f3efe3;
	text-decoration: none;
}

.nops-footer-legal a:hover {
	color: #35afc9;
}

.nops-footer-legal .sep {
	opacity: 0.6;
}

/* ---- Below xl (1280px): logo full-width centred on its own row,
   the three columns on a row beneath. ---- */
@media (max-width: 1279px) {
	.nops-footer-cols {
		grid-template-columns: repeat(3, 1fr);
		gap: 40px;
	}

	/* Logo spans the full width, centred, above the 3 columns. */
	.nops-footer-col--brand {
		grid-column: 1 / -1;
		text-align: center;
	}

	.nops-footer-col--brand .nops-footer-logo {
		display: inline-block;
	}

	.nops-footer-bottom {
		margin-top: 120px;
	}
}

/* ---- Below md (768px): stack everything vertically. ---- */
@media (max-width: 767px) {
	.nops-footer-cols {
		grid-template-columns: 1fr;
		text-align: center;
	}

	.nops-footer-bottom {
		flex-direction: column;
	}
}

/* Clip horizontal bleed of the CTA/footer graphic at the viewport edge,
   without clipping its vertical overlap between the two sections. */
#page {
	overflow-x: hidden;
}