:root {
	/* ============================================================
	   DESIGN SYSTEM — generic, reusable tokens (source of truth)
	   ============================================================ */

	/* ---- Colour primitives ---- */
	--color-primary: #0167a5;
	--color-primary-dark: #016484;
	--color-secondary: #005e43;
	--color-secondary-alt: #006163;
	--color-dark: #1a2540;
	--color-dark-hover: color-mix(in srgb, var(--color-dark), #fff 12%);
	--color-accent: #d1bc00;
	--color-ink: #000000;
	--color-body: #707070;
	--color-muted: #a5a5a5;
	--color-danger: #b3261e;
	--color-border: #dfdfdf;
	--color-bg-tint: #f3f7ff;
	--color-bg-subtle: #f5f5f5;
	--color-white: #ffffff;

	/* ---- Typography ---- */
	--font-sans: "Montserrat", system-ui, sans-serif;
	--fw-regular: 400;
	--fw-medium: 500;
	--fw-semibold: 600;
	--fw-bold: 700;

	/* ---- Type scale (tightened ~15% from the 1920 artboard sizes) ---- */
	--text-sm: 15px;
	--text-base: 17px;
	--text-md: 18px;
	--text-lg: 20px;
	--text-xl: 22px;
	--text-2xl: 24px;
	--text-3xl: 27px;
	--text-title: clamp(26px, 3vw, 42px);
	--text-hero: clamp(28px, 3.6vw, 52px);

	/* ---- Line heights ---- */
	--leading-tight: 1.15;
	--leading-heading: 1.2;
	--leading-body: 1.6;
	--leading-lead: 1.69;

	/* ---- Spacing scale ---- */
	--space-1: 8px;
	--space-2: 16px;
	--space-3: 24px;
	--space-4: 32px;
	--space-5: 48px;
	--space-6: 64px;
	--space-7: 80px;

	/* ---- Layout ---- */
	--container: 1360px;
	--gutter: 24px;
	--band-max: 1150px;
	--section-y: clamp(40px, 4.5vw, 60px);
	--hero-h: clamp(480px, 41vw, 800px);
	--hero-h-md: 480px;
	--hero-h-sm: 420px;

	/* ---- Radii ---- */
	--radius: 12px;
	--radius-lg: 20px;
}

* { box-sizing: border-box; }

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

body {
	margin: 0;
	font-family: var(--font-sans);
	color: var(--color-body);
	font-size: var(--text-sm);
	line-height: 1.65;
	background: var(--color-white);
}

h1, h2, h3, h4, h5 {
	font-family: var(--font-sans);
	color: var(--color-primary);
	line-height: var(--leading-heading);
	margin: 0 0 var(--space-2);
}

a { color: var(--color-primary); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--color-secondary); }

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}
img { max-width: 100%; height: auto; display: block; }

.base-container {
	max-width: var(--container);
	margin: 0 auto;
	padding: 0 var(--gutter);
	container-type: inline-size;
}

.base-btn {
	display: inline-block;
	background: var(--color-dark);
	color: #fff;
	font-family: var(--font-sans);
	font-weight: var(--fw-semibold);
	padding: var(--space-2) var(--space-4);
	border: 0;
	border-radius: 6px;
	cursor: pointer;
	letter-spacing: 0.3px;
	transition: background-color .28s ease, color .28s ease,
		transform .28s cubic-bezier(.22, .61, .36, 1),
		box-shadow .28s cubic-bezier(.22, .61, .36, 1);
}
.base-btn:hover { background: var(--color-dark-hover); color: #fff; }

.base-topbar {
	background: var(--color-primary);
	color: #fff;
	font-size: var(--text-sm);
}
.base-topbar .base-container {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	min-height: 48px;
	padding-top: 0;
	padding-bottom: 0;
}
.base-topbar__socials {
	position: absolute;
	right: var(--gutter);
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	gap: var(--space-2);
}
.base-topbar__socials a { color: #fff; display: inline-flex; transition: color .2s ease, opacity .2s ease; }
.base-topbar__socials a:hover { opacity: .75; }

.base-header {
	background: #fff;
	position: sticky;
	top: 0;
	z-index: 200;
	transition: box-shadow .3s ease;
}
.base-header.is-stuck { box-shadow: 0 6px 20px rgba(0,0,0,.08); }
.base-header__inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	padding: var(--space-2) 0;
	gap: var(--space-3);
}
.base-contact {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--font-sans);
	font-weight: var(--fw-bold);
	font-size: var(--text-md);
	color: var(--color-secondary);
}
.base-contact--email { color: var(--color-secondary); }
.base-contact--phone { justify-content: flex-end; color: var(--color-secondary); }
.base-contact svg { color: var(--color-secondary); flex: none; }
.base-logo { text-align: center; }
.base-logo img { margin: 0 auto; max-height: 60px; width: auto; }
.base-logo__lockup { display: inline-flex; align-items: center; gap: 12px; }
.base-logo__mark { display: inline-flex; flex: none; }
.base-logo__words { display: flex; flex-direction: column; align-items: flex-start; line-height: 1; }
.base-logo__name {
	font-family: var(--font-sans);
	font-weight: var(--fw-bold);
	font-size: var(--text-xl);
	color: var(--color-primary);
}
.base-logo__subtitle {
	font-size: 11px;
	letter-spacing: 5px;
	font-weight: var(--fw-semibold);
	color: var(--color-secondary);
	margin-top: 3px;
}

.base-nav { border-bottom: 3px solid var(--color-primary); }
.base-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--space-3);
}
.base-nav a {
	position: relative;
	display: block;
	padding: var(--space-2) 0;
	font-family: var(--font-sans);
	font-weight: var(--fw-regular);
	font-size: var(--text-sm);
	color: var(--color-ink);
}
.base-nav a:hover,
.base-nav .current-menu-item > a,
.base-nav .current_page_item > a { color: var(--color-primary); }
.base-nav .current-menu-item > a::after,
.base-nav .current_page_item > a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 6px;
	background: var(--color-primary);
}

.base-nav-toggle { display: none; }
.base-nav__contacts { display: none; }
.base-nav-toggle__bars,
.base-nav-toggle__bars::before,
.base-nav-toggle__bars::after {
	content: "";
	display: block;
	width: 26px;
	height: 3px;
	border-radius: 2px;
	background: var(--color-primary);
	transition: transform .25s ease, background-color .2s ease;
}
.base-nav-toggle__bars { position: relative; }
.base-nav-toggle__bars::before { position: absolute; top: -8px; left: 0; }
.base-nav-toggle__bars::after { position: absolute; top: 8px; left: 0; }
.base-nav-toggle.is-active .base-nav-toggle__bars { background: transparent; }
.base-nav-toggle.is-active .base-nav-toggle__bars::before { transform: translateY(8px) rotate(45deg); }
.base-nav-toggle.is-active .base-nav-toggle__bars::after { transform: translateY(-8px) rotate(-45deg); }

/* Header content aligns to the same band width as the page content */
.base-topbar .base-container,
.base-header .base-container,
.base-nav .base-container { max-width: var(--band-max); }

.base-section { padding: var(--section-y) 0; }

/* Smooth in-page scroll to the enquiry form (unit "More Information" links → #enquiry),
   offset so the target clears the sticky header. */
html { scroll-behavior: smooth; }
#enquiry { scroll-margin-top: 110px; }

/* Full-bleed 100vw bands (e.g. the units grey band) include the scrollbar width, which
   pushes ~15px of horizontal overflow. Clip it — `clip` (not hidden) so sticky still works. */
html, body { overflow-x: clip; }

/* Accessible/SEO heading that's visually hidden (e.g. the h1 on image-only hero pages). */
.base-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Per-section background presets (chosen in the page builder). */
.base-band--grey { background: var(--color-bg-subtle); }
.base-band--band {
	background: var(--color-bg-subtle);
	border-top: 1px solid var(--color-body);
	border-bottom: 1px solid var(--color-body);
}
.base-band--split {
	background: linear-gradient( to bottom,
		var(--color-white) calc(50% - 0.5px),
		var(--color-body) calc(50% - 0.5px), var(--color-body) calc(50% + 0.5px),
		var(--color-bg-subtle) calc(50% + 0.5px) );
}
.base-band--dark { background: var(--color-dark); }
.base-band--dark,
.base-band--dark p,
.base-band--dark h1, .base-band--dark h2, .base-band--dark h3, .base-band--dark h4, .base-band--dark h5 { color: var(--color-white); }
/* Keep layout-specific coloured text legible on a dark section. */
.base-band--dark .base-intro,
.base-band--dark .base-page__content p,
.base-band--dark .base-page__content .base-lead,
.base-band--dark .base-bignum strong,
.base-band--dark .base-bignum span,
.base-band--dark .base-bignum__text p { color: var(--color-white); }

/* Motion — scroll reveal + subtle hover. Only for users who allow motion; the
   .base-anim gate (set in <head> when IntersectionObserver exists) keeps content
   visible with no flash for no-JS / unsupported browsers. Units and the enquiry
   panel fade only (no transform) so the grey-band JS still measures true positions. */
@media (prefers-reduced-motion: no-preference) {
	.base-anim .base-hero__inner,
	.base-anim .base-intro,
	.base-anim .base-card,
	.base-anim .base-feature,
	.base-anim .base-unit,
	.base-anim .base-photo-row__item,
	.base-anim .base-testimonials__head,
	.base-anim .base-carousel,
	.base-anim .base-bignum,
	.base-anim .base-page__content,
	.base-anim .base-enquiry__panel,
	.base-anim .base-newsletter > .base-container,
	.base-anim .base-footer__cols {
		opacity: 0;
		transform: translateY(22px);
		transition: opacity .7s ease, transform .7s ease;
		transition-delay: var(--reveal-delay, 0ms);
	}
	.base-anim .base-unit,
	.base-anim .base-enquiry__panel { transform: none; }
	.base-anim .is-in { opacity: 1; transform: none; }

	.base-anim-safe .base-hero__inner,
	.base-anim-safe .base-intro,
	.base-anim-safe .base-card,
	.base-anim-safe .base-feature,
	.base-anim-safe .base-unit,
	.base-anim-safe .base-photo-row__item,
	.base-anim-safe .base-testimonials__head,
	.base-anim-safe .base-carousel,
	.base-anim-safe .base-bignum,
	.base-anim-safe .base-page__content,
	.base-anim-safe .base-enquiry__panel,
	.base-anim-safe .base-newsletter > .base-container,
	.base-anim-safe .base-footer__cols {
		opacity: 1;
		transform: none;
	}

	.base-card__img { transition: transform .5s ease; }
	.base-card:hover .base-card__img { transform: scale(1.05); }

	.base-btn:hover,
	.base-newsletter__submit:hover {
		transform: translateY(-2px);
		box-shadow: 0 8px 20px color-mix(in srgb, var(--color-dark) 28%, transparent);
	}
	.base-btn:active,
	.base-newsletter__submit:active {
		transform: translateY(0);
		box-shadow: 0 3px 8px color-mix(in srgb, var(--color-dark) 24%, transparent);
	}
}
.base-section__head { text-align: center; margin-bottom: 50px; }
.base-section__head h2 { font-size: clamp(24px, 3.2vw, 30px); }

.base-newsletter { background: var(--color-white); text-align: center; padding-top: var(--section-y); }
body.home .base-newsletter { background: var(--color-bg-subtle); }
.base-newsletter h2 {
	font-size: var(--text-title);
	font-weight: var(--fw-semibold);
	color: var(--color-primary);
	margin-bottom: var(--space-6);
}
.base-newsletter__band {
	position: relative;
	min-height: 200px;
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: center;
	padding: var(--space-4) 0;
}
.base-newsletter__band > .base-container { width: 100%; }
.base-newsletter .wpcf7 { position: relative; z-index: 2; }
.base-newsletter__form {
	display: flex;
	gap: var(--space-2);
	width: 100%;
	max-width: var(--band-max);
	margin: 0 auto;
}
.base-newsletter__form > .wpcf7-form-control-wrap { flex: 1; min-width: 0; text-align: left; }
.base-newsletter__input {
	width: 100%;
	height: 64px;
	border: 0;
	background: #fff;
	padding: 0 var(--space-3);
	font-family: var(--font-sans);
	font-size: var(--text-base);
	color: var(--color-ink);
}
.base-newsletter__input::placeholder { color: var(--color-ink); opacity: 1; }
.base-newsletter .wpcf7-response-output {
	margin: var(--space-3) auto 0;
	max-width: var(--band-max);
	background: #fff;
	color: var(--color-ink);
	border-radius: 8px;
	padding: 12px 18px;
	text-align: center;
	font-size: 15px;
}
.base-newsletter .wpcf7-not-valid-tip {
	display: inline-block;
	background: var(--color-danger);
	color: #fff;
	font-size: 14px;
	text-align: left;
	margin-top: 8px;
	padding: 3px 8px;
	border-radius: 4px;
}
.base-newsletter__submit {
	flex: 0 0 24%;
	height: 64px;
	background: var(--color-dark);
	color: #fff;
	border: 0;
	cursor: pointer;
	font-family: var(--font-sans);
	font-weight: var(--fw-semibold);
	font-size: var(--text-base);
	letter-spacing: 1px;
	text-transform: uppercase;
	transition: background-color .28s ease, color .28s ease,
		transform .28s cubic-bezier(.22, .61, .36, 1),
		box-shadow .28s cubic-bezier(.22, .61, .36, 1);
}
.base-newsletter__submit:hover { background: var(--color-dark-hover); }

.base-footer { background: var(--color-primary); color: #f6f6f6; padding: var(--space-6) 0 var(--space-5); }
.base-footer .base-container { max-width: var(--band-max); }
.base-footer__cols { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-5); }
.base-footer h4 {
	color: #fff;
	font-family: var(--font-sans);
	font-weight: var(--fw-regular);
	font-size: var(--text-md);
	margin: 0 0 var(--space-2);
}
.base-footer ul { list-style: none; margin: 0; padding: 0; }
.base-footer li { margin: 0; }
.base-footer a { color: #f6f6f6; font-size: 16px; line-height: 2; }
.base-footer a:hover { color: #fff; }
.base-footer__contact p { margin: 0; font-size: 16px; line-height: 2; }
.base-footer__address { margin-top: 1.5em; }
.base-footer__socials { display: flex; gap: var(--space-2); margin-top: var(--space-4); }
.base-footer__socials a { color: #fff; display: inline-flex; }
.base-footer__socials a:hover { color: var(--color-bg-tint); }

.base-page { padding: 70px 0; }
.base-page__content { max-width: 900px; margin: 0 auto; }
.base-page__content--center { text-align: center; }
.base-post-item { margin-bottom: 40px; }

@media (max-width: 992px) {
	/* Top bar: compact, socials live in the footer on mobile */
	.base-topbar { font-size: 13px; }
	.base-topbar .base-container { min-height: 40px; }
	.base-topbar__socials { display: none; }

	/* Header bar: logo left, burger right */
	.base-header__inner {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 14px 0;
	}
	.base-header__inner > .base-contact { display: none; }
	.base-logo { text-align: left; }
	.base-logo img { margin: 0; max-height: 46px; }
	.base-nav-toggle {
		display: flex; align-items: center; justify-content: center;
		background: none; border: 0; padding: 6px; cursor: pointer; flex: none;
	}

	/* Slide-down menu: nav links + contacts */
	.base-nav { border-bottom: 0; }
	.base-nav > .base-container { display: none; padding: 0; }
	.base-nav.is-open > .base-container { display: block; max-height: calc(100vh - 72px); overflow-y: auto; }
	.base-nav ul { display: flex; flex-direction: column; gap: 0; flex-wrap: nowrap; }
	.base-nav a {
		display: block;
		padding: 14px var(--gutter);
		border-top: 1px solid rgba(0,0,0,.08);
		font-size: 16px;
	}
	.base-nav a::after { display: none; }
	.base-nav .current-menu-item > a,
	.base-nav .current_page_item > a { color: var(--color-primary); }
	.base-nav__contacts {
		display: flex;
		flex-direction: column;
		gap: 14px;
		padding: 18px var(--gutter);
		border-top: 1px solid rgba(0,0,0,.08);
		background: var(--color-bg-subtle);
	}
	.base-nav__contacts .base-contact { justify-content: flex-start; font-size: 16px; gap: 10px; }
	.base-nav__contacts .base-contact svg { width: 20px; height: 20px; flex: none; }
}
@media (max-width: 992px) {
	.base-footer__cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
	.base-footer__cols { grid-template-columns: 1fr 1fr; gap: var(--space-4) var(--space-3); }
	.base-footer__contact { grid-column: 1 / -1; }
	.base-newsletter__form { flex-direction: column; gap: var(--space-2); }
	.base-newsletter__submit { flex: 0 0 auto; }
}