/* ==========================================================================
   Anuera theme
   Colours and type are defined once here as variables. Elementor widgets
   inherit them unless you override a widget's style in Elementor.
   ========================================================================== */

:root {
	--anuera-navy: #012169;
	--anuera-teal: #0D7172;
	--anuera-teal-dark: #0a5a5b;
	--anuera-white: #ffffff;
	--anuera-mist: #e9f0ee;
	--anuera-rule: rgba(1, 33, 105, 0.16);
	--anuera-grey: #B9C2D3;

	--anuera-serif: "Libre Baskerville", Georgia, "Times New Roman", serif;
	--anuera-sans: "Libre Franklin", "Helvetica Neue", Arial, sans-serif;

	--anuera-gutter: clamp(20px, 4vw, 48px);
	--anuera-max: 1200px;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

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

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

body {
	margin: 0;
	background: var(--anuera-white);
	color: var(--anuera-navy);
	font-family: var(--anuera-sans);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img,
svg,
video {
	max-width: 100%;
	height: auto;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 0.6em;
	font-family: var(--anuera-serif);
	font-weight: 400;
	line-height: 1.2;
	color: var(--anuera-teal);
}

h1 { font-size: clamp(2.1rem, 4.4vw, 3.25rem); }
h2 { font-size: clamp(1.75rem, 3.2vw, 2.4rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); }
h4 { font-size: 1.2rem; }
h5 { font-size: 1.05rem; }
h6 { font-size: 0.95rem; }

p {
	margin: 0 0 1.1em;
}

a {
	color: var(--anuera-teal);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

a:hover {
	color: var(--anuera-teal-dark);
}

:focus-visible {
	outline: 2px solid var(--anuera-teal);
	outline-offset: 3px;
}

ul,
ol {
	padding-left: 1.2em;
}

blockquote {
	margin: 1.5em 0;
	font-family: var(--anuera-serif);
	font-style: italic;
	font-size: 1.15rem;
	color: var(--anuera-navy);
}

hr {
	border: 0;
	border-top: 1px solid var(--anuera-rule);
	margin: 2.5em 0;
}

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

.skip-link {
	position: absolute;
	left: 12px;
	top: -100px;
	z-index: 1000;
	padding: 10px 16px;
	background: var(--anuera-white);
	color: var(--anuera-navy);
	font-weight: 600;
}

.skip-link:focus {
	top: 12px;
}

/* --------------------------------------------------------------------------
   Buttons
   Theme buttons, plus the default look for Elementor's Button widget.
   To use a variant in Elementor, add the class (e.g. anuera-btn-solid-light)
   under the widget's Advanced → CSS Classes.
   -------------------------------------------------------------------------- */

.anuera-button,
body .elementor-widget-button .elementor-button,
.wp-block-button__link,
input[type="submit"],
button.metform-btn {
	display: inline-block;
	padding: 0.7em 1.9em;
	border: 1px solid var(--anuera-teal);
	border-radius: 999px;
	background: transparent;
	color: var(--anuera-teal);
	font-family: var(--anuera-serif);
	font-size: 0.95rem;
	font-weight: 400;
	line-height: 1.4;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.anuera-button:hover,
body .elementor-widget-button .elementor-button:hover,
.wp-block-button__link:hover,
input[type="submit"]:hover,
button.metform-btn:hover {
	background: var(--anuera-teal);
	color: var(--anuera-white);
}

/* White outline, for use on images and navy sections. */
.anuera-button--outline-light,
body .anuera-btn-outline-light .elementor-button,
body .anuera-dark .elementor-widget-button .elementor-button {
	border-color: var(--anuera-white);
	color: var(--anuera-white);
}

.anuera-button--outline-light:hover,
body .anuera-btn-outline-light .elementor-button:hover,
body .anuera-dark .elementor-widget-button .elementor-button:hover {
	background: var(--anuera-white);
	color: var(--anuera-navy);
}

/* Solid white, like “Our Services” on the home page hero. */
.anuera-button--solid-light,
body .anuera-btn-solid-light .elementor-button,
body .anuera-dark .anuera-btn-solid-light .elementor-button {
	border-color: var(--anuera-white);
	background: var(--anuera-white);
	color: var(--anuera-navy);
}

.anuera-button--solid-light:hover,
body .anuera-btn-solid-light .elementor-button:hover,
body .anuera-dark .anuera-btn-solid-light .elementor-button:hover {
	background: transparent;
	color: var(--anuera-white);
}

/* --------------------------------------------------------------------------
   Dark sections
   Add the class anuera-dark to an Elementor section or container
   (Advanced → CSS Classes) and headings, text and buttons turn white.
   -------------------------------------------------------------------------- */

body .anuera-dark {
	color: var(--anuera-white);
}

body .anuera-dark h1,
body .anuera-dark h2,
body .anuera-dark h3,
body .anuera-dark h4,
body .anuera-dark h5,
body .anuera-dark h6,
body .anuera-dark .elementor-heading-title,
body .anuera-dark .elementor-icon-box-title,
body .anuera-dark .elementor-icon-box-description,
body .anuera-dark .elementor-widget-text-editor,
body .anuera-dark a:not(.elementor-button) {
	color: var(--anuera-white);
}

body .anuera-dark .elementor-icon {
	color: var(--anuera-white);
	fill: var(--anuera-white);
}

/* --------------------------------------------------------------------------
   Elementor defaults
   Kept low in specificity, so anything set in Elementor's panel wins.
   -------------------------------------------------------------------------- */

body .elementor-widget-heading .elementor-heading-title {
	font-family: var(--anuera-serif);
	font-weight: 400;
	line-height: 1.2;
}

body .elementor-widget-heading .elementor-heading-title {
	color: var(--anuera-teal);
}

/* Dark sections win over the defaults above. */
body .anuera-dark .elementor-widget-heading .elementor-heading-title,
body .anuera-dark .elementor-widget-text-editor,
body .anuera-dark .elementor-widget-icon-box .elementor-icon-box-title,
body .anuera-dark .elementor-widget-icon-box .elementor-icon-box-title a,
body .anuera-dark .elementor-widget-icon-box .elementor-icon-box-description {
	color: var(--anuera-white);
}

body .anuera-dark .elementor-widget-icon-box .elementor-icon,
body .anuera-dark .elementor-widget-icon .elementor-icon {
	color: var(--anuera-white);
	fill: var(--anuera-white);
}

/* Buttons placed side by side: remove Elementor's gap under each widget, which knocks them out of line. */
body .elementor-widget-wrap > .elementor-widget-button.elementor-widget__width-auto,
body .e-con > .elementor-widget-button.elementor-widget__width-auto {
	margin-bottom: 0;
	margin-block-end: 0;
	align-self: center;
}

body .elementor-widget-text-editor {
	color: var(--anuera-navy);
	font-family: var(--anuera-sans);
}

body .anuera-dark .elementor-widget-text-editor {
	color: var(--anuera-white);
}

body .elementor-widget-icon-box .elementor-icon-box-title {
	font-family: var(--anuera-serif);
	font-weight: 400;
	color: var(--anuera-teal);
}

body .elementor-widget-icon-box .elementor-icon-box-description {
	font-family: var(--anuera-sans);
	color: var(--anuera-navy);
	font-size: 0.95rem;
}

body .elementor-widget-icon-box .elementor-icon,
body .elementor-widget-icon .elementor-icon {
	color: var(--anuera-navy);
	fill: var(--anuera-navy);
}

body .elementor-widget-text-editor ul {
	padding-left: 1.1em;
}

body .elementor-widget-text-editor li {
	margin-bottom: 0.25em;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.site-header {
	position: relative;
	z-index: 100;
	color: var(--anuera-white);
}

.anuera-header-solid .site-header {
	background: var(--anuera-navy);
}

.anuera-header-transparent .site-header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	background: linear-gradient(to bottom, rgba(1, 33, 105, 0.35), rgba(1, 33, 105, 0));
}

.admin-bar.anuera-header-transparent .site-header {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar.anuera-header-transparent .site-header {
		top: 46px;
	}
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	max-width: calc(var(--anuera-max) + 2 * var(--anuera-gutter));
	margin: 0 auto;
	padding: 26px var(--anuera-gutter);
}

.site-header__brand {
	display: block;
	color: var(--anuera-white);
	line-height: 0;
}

.anuera-logo {
	display: block;
	width: 128px;
	height: auto;
}

.site-nav {
	display: flex;
	align-items: center;
	gap: 30px;
}

.site-nav__button {
	display: inline-block;
	padding: 10px 22px;
	border: 1px solid var(--anuera-white);
	border-radius: 999px;
	background: var(--anuera-white);
	color: var(--anuera-navy);
	font-family: var(--anuera-serif);
	font-size: 0.95rem;
	line-height: 1.3;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.site-nav__button:hover {
	background: var(--anuera-mist);
	border-color: var(--anuera-mist);
	color: var(--anuera-navy);
}

.site-nav__list {
	display: flex;
	align-items: center;
	gap: 30px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-nav__list li {
	position: relative;
}

.site-nav__list a {
	display: block;
	padding: 6px 0;
	color: var(--anuera-white);
	font-family: var(--anuera-serif);
	font-size: 0.95rem;
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.site-nav__list a:hover,
.site-nav__list .current-menu-item > a,
.site-nav__list .current-menu-ancestor > a,
.site-nav__list .current_page_item > a {
	border-bottom-color: currentColor;
	color: var(--anuera-white);
}

/* Dropdowns (e.g. the six services under Services). */
.site-nav__list .sub-menu {
	position: absolute;
	top: 100%;
	left: -18px;
	min-width: 220px;
	margin: 0;
	padding: 12px 0;
	list-style: none;
	background: var(--anuera-navy);
	box-shadow: 0 12px 30px rgba(1, 33, 105, 0.25);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}

.site-nav__list li:hover > .sub-menu,
.site-nav__list li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.site-nav__list .sub-menu a {
	padding: 8px 18px;
	font-family: var(--anuera-sans);
	font-size: 0.9rem;
	border-bottom: 0;
}

.site-nav__list .sub-menu a:hover {
	background: rgba(255, 255, 255, 0.08);
}

.site-nav__toggle {
	display: none;
	position: relative;
	z-index: 102;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--anuera-white);
	cursor: pointer;
}

.site-nav__toggle-bars,
.site-nav__toggle-bars::before,
.site-nav__toggle-bars::after {
	position: absolute;
	left: 11px;
	width: 22px;
	height: 1.5px;
	background: currentColor;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.site-nav__toggle-bars {
	top: 21px;
}

.site-nav__toggle-bars::before,
.site-nav__toggle-bars::after {
	content: "";
	left: 0;
}

.site-nav__toggle-bars::before { top: -7px; }
.site-nav__toggle-bars::after { top: 7px; }

.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-bars {
	background: transparent;
}

.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-bars::before {
	transform: translateY(7px) rotate(45deg);
}

.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-bars::after {
	transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 860px) {
	.anuera-logo {
		width: 112px;
	}

	.site-nav__toggle {
		display: block;
	}

	.site-nav {
		position: fixed;
		inset: 0;
		z-index: 101;
		display: flex;
		align-items: center;
		padding: 100px var(--anuera-gutter) 40px;
		background: var(--anuera-navy);
		overflow-y: auto;
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.2s ease, visibility 0.2s;
	}

	.site-nav.is-open {
		opacity: 1;
		visibility: visible;
	}

	.site-nav {
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		gap: 36px;
	}

	.site-nav__button {
		padding: 14px 30px;
		font-size: 1.1rem;
	}

	.site-nav__list {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
		width: 100%;
	}

	.site-nav__list a {
		font-size: 1.6rem;
	}

	.site-nav__list .sub-menu {
		position: static;
		min-width: 0;
		padding: 4px 0 8px 2px;
		background: none;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	.site-nav__list .sub-menu a {
		padding: 4px 0;
		font-size: 1rem;
		opacity: 0.85;
	}

	.site-header__brand {
		position: relative;
		z-index: 102;
	}

	body.anuera-nav-open {
		overflow: hidden;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
	}
}

/* --------------------------------------------------------------------------
   Call-to-action banner
   -------------------------------------------------------------------------- */

.cta-banner {
	position: relative;
	padding: clamp(64px, 9vw, 110px) var(--anuera-gutter);
	background-color: var(--anuera-navy);
	color: var(--anuera-white);
	text-align: center;
	overflow: hidden;
}

.cta-banner.has-image {
	background-image: var(--cta-image);
	background-size: cover;
	background-position: center;
}

/* Navy that is strongest behind the text and fades out towards the edges of the image. */
.cta-banner.has-image::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse 55% 85% at 50% 50%, rgba(1, 33, 105, 0.85) 0%, rgba(1, 33, 105, 0.6) 40%, rgba(1, 33, 105, 0) 100%),
		linear-gradient(rgba(1, 33, 105, 0.18), rgba(1, 33, 105, 0.18));
	pointer-events: none;
}

@media (max-width: 600px) {
	.cta-banner.has-image::before {
		background:
			radial-gradient(ellipse 95% 80% at 50% 50%, rgba(1, 33, 105, 0.85) 0%, rgba(1, 33, 105, 0.55) 55%, rgba(1, 33, 105, 0.1) 100%);
	}
}

.cta-banner__inner {
	position: relative;
	z-index: 1;
	max-width: 720px;
	margin: 0 auto;
}

.cta-banner__heading {
	margin-bottom: 0.4em;
	color: var(--anuera-white);
	font-size: clamp(1.8rem, 3.4vw, 2.5rem);
}

.cta-banner__text {
	margin-bottom: 1.8em;
	font-size: 0.95rem;
	opacity: 0.92;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
	background: var(--anuera-navy);
	color: var(--anuera-white);
}

.site-footer a {
	color: var(--anuera-white);
	text-decoration: none;
}

.site-footer a:hover,
.site-footer a.is-underlined {
	text-decoration: underline;
}

.site-footer :focus-visible {
	outline-color: var(--anuera-white);
}

.site-footer__inner {
	display: grid;
	grid-template-columns: 1fr 1.2fr;
	gap: 48px;
	max-width: calc(var(--anuera-max) + 2 * var(--anuera-gutter));
	margin: 0 auto;
	padding: clamp(56px, 7vw, 88px) var(--anuera-gutter) 56px;
}

.cta-banner:not(.has-image) + .site-footer .site-footer__inner {
	border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.site-footer__logo-link {
	display: inline-block;
	line-height: 0;
}

.site-footer__logo {
	width: 140px;
}

.site-footer__tagline {
	max-width: 13em;
	margin: 36px 0 0;
	font-family: var(--anuera-serif);
	font-size: clamp(1.5rem, 2.4vw, 1.9rem);
	line-height: 1.15;
}

.site-footer__badges {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px 28px;
	margin: 30px 0 0;
	padding: 0;
	list-style: none;
}

.site-footer__badges li {
	margin: 0;
}

.site-footer__badges img {
	display: block;
	width: auto;
	height: 48px;
	max-width: 170px;
	object-fit: contain;
}

.site-footer__badges a {
	display: block;
	line-height: 0;
	text-decoration: none;
	transition: opacity 0.2s ease;
}

.site-footer__badges a:hover {
	opacity: 0.8;
	text-decoration: none;
}

/* Turns any logo into a white silhouette: for coloured logos on a transparent background. */
.site-footer__badges.is-white img {
	filter: brightness(0) invert(1);
}

@media (max-width: 520px) {
	.site-footer__badges img {
		height: 42px;
	}
}

.site-footer__columns {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 32px;
}

.site-footer__heading {
	margin: 0 0 14px;
	color: var(--anuera-white);
	font-family: var(--anuera-serif);
	font-size: 0.95rem;
}

.site-footer__list {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.85rem;
}

.site-footer__list li {
	margin-bottom: 10px;
}

.site-footer__address {
	margin: 0 0 10px;
	font-size: 0.85rem;
	font-style: normal;
	line-height: 1.6;
}

.site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 32px;
	max-width: calc(var(--anuera-max) + 2 * var(--anuera-gutter));
	margin: 0 auto;
	padding: 20px var(--anuera-gutter) 28px;
	font-size: 0.75rem;
}

.site-footer__copyright {
	margin: 0;
	opacity: 0.85;
}

.site-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 28px;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (max-width: 860px) {
	.site-footer__inner {
		grid-template-columns: 1fr;
		gap: 44px;
	}
}

@media (max-width: 520px) {
	.site-footer__columns {
		grid-template-columns: 1fr 1fr;
	}
}

/* --------------------------------------------------------------------------
   Pages not built with Elementor, posts and 404
   -------------------------------------------------------------------------- */

.entry {
	max-width: 760px;
	margin: 0 auto;
	padding: clamp(56px, 8vw, 96px) var(--anuera-gutter);
}

.entry--centered {
	text-align: center;
}

.entry__header {
	margin-bottom: 2rem;
}

.entry__title {
	margin-bottom: 0.3em;
}

.entry__meta {
	margin: 0;
	font-size: 0.85rem;
	opacity: 0.75;
}

.entry__image {
	margin: 0 0 2rem;
}

.entry__content > * + h2,
.entry__content > * + h3 {
	margin-top: 1.6em;
}

.post-list__item {
	padding: 28px 0;
	border-top: 1px solid var(--anuera-rule);
}

.post-list__title {
	margin-bottom: 0.2em;
	font-size: 1.4rem;
}

.post-list__title a {
	text-decoration: none;
}

.post-list__excerpt {
	margin-top: 0.8em;
}

.nav-links {
	display: flex;
	gap: 16px;
	margin-top: 2rem;
}

/* --------------------------------------------------------------------------
   Forms (including MetForm)
   Underlined fields, as in the Contact page design.
   -------------------------------------------------------------------------- */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="number"],
textarea,
select,
.site-main .mf-input {
	width: 100%;
	padding: 10px 0;
	border: 0;
	border-bottom: 1px solid var(--anuera-rule);
	border-radius: 0;
	background: transparent;
	color: var(--anuera-navy);
	font-family: var(--anuera-sans);
	font-size: 0.95rem;
	box-shadow: none;
}

input:focus,
textarea:focus,
select:focus,
.site-main .mf-input:focus {
	outline: none;
	border-bottom-color: var(--anuera-teal);
	box-shadow: 0 1px 0 0 var(--anuera-teal);
}

::placeholder {
	color: rgba(1, 33, 105, 0.45);
}

label,
.site-main .mf-input-label {
	display: block;
	margin-bottom: 4px;
	color: var(--anuera-navy);
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.search-form {
	display: flex;
	gap: 12px;
	align-items: flex-end;
	max-width: 420px;
	margin: 1.5rem auto 0;
}

/* --------------------------------------------------------------------------
   Blog: title band, post grid, single post
   -------------------------------------------------------------------------- */

.page-hero {
	padding: clamp(48px, 7vw, 88px) var(--anuera-gutter) clamp(56px, 8vw, 96px);
	background: var(--anuera-navy);
	color: var(--anuera-white);
	text-align: center;
}

.page-hero__inner {
	max-width: 720px;
	margin: 0 auto;
}

.page-hero__title {
	margin: 0;
	color: var(--anuera-white);
}

.page-hero__intro {
	margin: 1em 0 0;
	opacity: 0.92;
}

.post-grid-wrap {
	max-width: calc(var(--anuera-max) + 2 * var(--anuera-gutter));
	margin: 0 auto;
	padding: clamp(56px, 7vw, 96px) var(--anuera-gutter);
}

.post-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 56px 40px;
}

@media (max-width: 960px) {
	.post-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.post-grid {
		grid-template-columns: 1fr;
	}
}

.post-card__image {
	display: block;
	aspect-ratio: 8 / 5;
	overflow: hidden;
	background: var(--anuera-navy);
}

.post-card__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.post-card:hover .post-card__image img {
	transform: scale(1.03);
}

.post-card__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	color: rgba(255, 255, 255, 0.35);
}

.post-card__placeholder .anuera-logo {
	width: 34%;
}

.post-card__body {
	padding-top: 20px;
}

.post-card__meta,
.post-hero__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 16px;
	margin: 0 0 10px;
	font-size: 0.8rem;
}

.post-card__meta {
	color: rgba(1, 33, 105, 0.7);
}

.post-card__category {
	color: var(--anuera-teal);
}

.post-card__title {
	margin: 0 0 12px;
	font-size: 1.3rem;
	line-height: 1.3;
}

.post-card__title a {
	color: var(--anuera-navy);
	text-decoration: none;
}

.post-card__title a:hover {
	color: var(--anuera-teal);
}

.post-card__excerpt {
	font-size: 0.92rem;
}

.post-card__excerpt p {
	margin: 0;
}

.post-grid-empty {
	max-width: 560px;
	margin: 0 auto;
	text-align: center;
}

.pagination {
	margin-top: 64px;
}

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 14px;
	border: 1px solid var(--anuera-rule);
	border-radius: 999px;
	color: var(--anuera-navy);
	font-size: 0.9rem;
	text-decoration: none;
}

.pagination .page-numbers.current {
	border-color: var(--anuera-teal);
	background: var(--anuera-teal);
	color: var(--anuera-white);
}

.pagination a.page-numbers:hover {
	border-color: var(--anuera-teal);
	color: var(--anuera-teal);
}

.pagination .page-numbers.dots {
	border: 0;
}

/* Single post */

.post-hero {
	display: flex;
	align-items: flex-end;
	min-height: 0;
	padding: clamp(48px, 7vw, 88px) var(--anuera-gutter) clamp(48px, 6vw, 72px);
	background: var(--anuera-navy);
	color: var(--anuera-white);
}

.post-hero.has-image {
	min-height: min(78vh, 680px);
	padding-top: 160px;
	background-image:
		linear-gradient(to top, rgba(1, 33, 105, 0.85), rgba(1, 33, 105, 0.25) 70%, rgba(1, 33, 105, 0.35)),
		var(--hero-image);
	background-size: cover;
	background-position: center;
}

.post-hero__inner {
	width: 100%;
	max-width: 760px;
	margin: 0 auto;
}

.post-hero__meta a {
	color: var(--anuera-white);
}

.post-hero__title {
	margin: 0;
	color: var(--anuera-white);
	font-size: clamp(2rem, 4vw, 3rem);
}

.post-hero__standfirst {
	margin: 0.9em 0 0;
	font-size: 1.1rem;
	opacity: 0.92;
}

.post-body {
	max-width: calc(720px + 2 * var(--anuera-gutter));
	margin: 0 auto;
	padding: clamp(48px, 6vw, 80px) var(--anuera-gutter) 24px;
}

.post-body__content {
	font-size: 1.05rem;
	line-height: 1.75;
}

.post-body__content h2 {
	font-size: 1.7rem;
	color: var(--anuera-navy);
}

.post-body__content h3 {
	font-size: 1.3rem;
	color: var(--anuera-navy);
}

.post-body__content figure,
.post-body__content .wp-block-image {
	margin: 2em 0;
}

.post-body__content figcaption {
	margin-top: 8px;
	font-size: 0.82rem;
	opacity: 0.75;
}

.post-body__content blockquote,
.post-body__content .wp-block-quote {
	margin: 2em 0;
	padding-left: 24px;
	border-left: 2px solid var(--anuera-teal);
	font-size: 1.25rem;
	line-height: 1.5;
}

.post-body__content .alignwide {
	width: min(1100px, 100vw - 2 * var(--anuera-gutter));
	max-width: none;
	margin-left: 50%;
	transform: translateX(-50%);
}

.post-body__content .alignfull {
	width: 100vw;
	max-width: none;
	margin-left: 50%;
	transform: translateX(-50%);
}

.post-body__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 40px 0 0;
	padding: 0;
	list-style: none;
}

.post-body__tags a {
	display: inline-block;
	padding: 4px 14px;
	border: 1px solid var(--anuera-rule);
	border-radius: 999px;
	color: var(--anuera-navy);
	font-size: 0.8rem;
	text-decoration: none;
}

.post-body__tags a:hover {
	border-color: var(--anuera-teal);
	color: var(--anuera-teal);
}

.post-nav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
	max-width: calc(720px + 2 * var(--anuera-gutter));
	margin: 32px auto 0;
	padding: 32px var(--anuera-gutter) 0;
}

.post-nav__item {
	padding-top: 24px;
	border-top: 1px solid var(--anuera-rule);
}

.post-nav__item--next {
	text-align: right;
}

.post-nav__label {
	display: block;
	margin-bottom: 6px;
	font-size: 0.8rem;
	opacity: 0.7;
}

.post-nav a {
	color: var(--anuera-navy);
	font-family: var(--anuera-serif);
	text-decoration: none;
}

.post-nav a:hover {
	color: var(--anuera-teal);
}

.post-back {
	margin: 56px 0 clamp(64px, 8vw, 96px);
	text-align: center;
}

@media (max-width: 600px) {
	.post-nav {
		grid-template-columns: 1fr;
	}

	.post-nav__item--next {
		text-align: left;
	}
}

/* --------------------------------------------------------------------------
   Scroll animation
   Content fades and rises gently into place as it scrolls into view.
   Only runs when JavaScript has started it (html.anuera-anim), never in the
   Elementor editor, and never for visitors who have asked for reduced motion.
   Turn it off in Appearance → Customize → Anuera theme → Animation.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
	html.anuera-anim .anuera-reveal {
		opacity: 0;
		transform: translateY(18px);
		transition:
			opacity 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) var(--reveal-delay, 0s),
			transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) var(--reveal-delay, 0s);
	}

	html.anuera-anim .anuera-reveal.is-visible {
		opacity: 1;
		transform: none;
	}
}

/* --------------------------------------------------------------------------
   Section helpers used by the page templates
   Add these under Advanced → CSS Classes on an Elementor container.
   -------------------------------------------------------------------------- */

/* anuera-panel: white panel with a soft navy shadow. */
body .anuera-panel {
	position: relative;
	background: var(--anuera-white);
	box-shadow: 0 24px 60px rgba(1, 33, 105, 0.14);
}

/* anuera-overlap: pulls the container up over the bottom of the section above it. */
body .e-con.anuera-overlap,
body .elementor-section.anuera-overlap {
	position: relative;
	z-index: 2;
	margin-top: -150px;
}

@media (max-width: 767px) {
	body .e-con.anuera-overlap,
	body .elementor-section.anuera-overlap {
		margin-top: -70px;
	}
}

/* anuera-overlap-navy: navy from the point where the overlapping panel starts, so the
   panel sits half on the hero image and half on navy. Pair with anuera-overlap. */
body .e-con.anuera-overlap-navy,
body .elementor-section.anuera-overlap-navy {
	background-image: linear-gradient(to bottom, rgba(1, 33, 105, 0) 150px, var(--anuera-navy) 150px);
}

@media (max-width: 767px) {
	body .e-con.anuera-overlap-navy,
	body .elementor-section.anuera-overlap-navy {
		background-image: linear-gradient(to bottom, rgba(1, 33, 105, 0) 70px, var(--anuera-navy) 70px);
	}
}

/* anuera-overlap-cta: on the last container of a page, lets it hang over the
   call-to-action banner below, the same way anuera-overlap sits over the hero. */
body .e-con.anuera-overlap-cta,
body .elementor-section.anuera-overlap-cta {
	position: relative;
	z-index: 2;
	margin-bottom: -120px;
}

body:has(.anuera-overlap-cta) .cta-banner {
	padding-top: calc(clamp(64px, 9vw, 110px) + 120px);
}

@media (max-width: 767px) {
	body .e-con.anuera-overlap-cta,
	body .elementor-section.anuera-overlap-cta {
		margin-bottom: -60px;
	}

	body:has(.anuera-overlap-cta) .cta-banner {
		padding-top: calc(clamp(64px, 9vw, 110px) + 60px);
	}
}

/* When both overlaps are used, the navy has to stop short of the bottom, so the
   white panel hangs over the banner image rather than the navy covering it. */
body .anuera-overlap-navy.anuera-overlap-cta {
	background-image: linear-gradient(
		to bottom,
		rgba(1, 33, 105, 0) 150px,
		var(--anuera-navy) 150px,
		var(--anuera-navy) calc(100% - 120px),
		rgba(1, 33, 105, 0) calc(100% - 120px)
	);
}

@media (max-width: 767px) {
	body .anuera-overlap-navy.anuera-overlap-cta {
		background-image: linear-gradient(
			to bottom,
			rgba(1, 33, 105, 0) 70px,
			var(--anuera-navy) 70px,
			var(--anuera-navy) calc(100% - 60px),
			rgba(1, 33, 105, 0) calc(100% - 60px)
		);
	}
}

/* anuera-list-grid: a two-column grid of items separated by fine lines. */
body .anuera-list-grid > .elementor-element {
	padding-top: 22px;
	padding-bottom: 22px;
}

@media (min-width: 768px) {
	body .anuera-list-grid > .elementor-element:nth-child(n+3) {
		border-top: 1px solid var(--anuera-rule);
	}
}

@media (max-width: 767px) {
	body .anuera-list-grid > .elementor-element:nth-child(n+2) {
		border-top: 1px solid var(--anuera-rule);
	}
}

body .anuera-list-grid .elementor-icon-box-wrapper {
	gap: 16px;
}

/* --------------------------------------------------------------------------
   Hover on linked items (service panel, industries grid)
   The whole item responds, not just the words, and the whole item is clickable.
   Default: a faint tint, the icon turns teal, the title nudges right and a small
   arrow fades in. Add anuera-hover-underline or anuera-hover-lift to a grid
   container instead if you prefer one of those.
   -------------------------------------------------------------------------- */

body .anuera-list-grid > .elementor-widget-icon-box,
body .anuera-hover-underline > .elementor-widget-icon-box,
body .anuera-hover-lift > .elementor-widget-icon-box {
	position: relative;
	transition: background-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

/* Makes the whole item clickable, not just the icon and title. */
body .anuera-list-grid .elementor-icon-box-title a::after,
body .anuera-hover-underline .elementor-icon-box-title a::after,
body .anuera-hover-lift .elementor-icon-box-title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

body .anuera-list-grid .elementor-icon-box-icon,
body .anuera-list-grid .elementor-icon-box-title {
	transition: transform 0.25s ease, color 0.25s ease;
}

/* At rest everything is navy; teal is kept for the hovered item. */
body .anuera-list-grid .elementor-icon-box-title,
body .anuera-list-grid .elementor-icon-box-title a {
	color: var(--anuera-navy);
}

body .anuera-list-grid .elementor-icon-box-description {
	transition: color 0.25s ease;
}

body .anuera-list-grid > .elementor-widget-icon-box:hover .elementor-icon-box-title,
body .anuera-list-grid > .elementor-widget-icon-box:hover .elementor-icon-box-title a {
	color: var(--anuera-teal);
}

/* Add anuera-hover-teal-text to the grid for the description to turn teal too. */
body .anuera-hover-teal-text > .elementor-widget-icon-box:hover .elementor-icon-box-description {
	color: var(--anuera-teal);
}

body .anuera-list-grid > .elementor-widget-icon-box:hover {
	background-color: rgba(233, 240, 238, 0.6);
}

body .anuera-list-grid > .elementor-widget-icon-box:hover .elementor-icon-box-icon,
body .anuera-list-grid > .elementor-widget-icon-box:hover .elementor-icon-box-title {
	transform: translateX(4px);
}

body .anuera-list-grid > .elementor-widget-icon-box:hover .elementor-icon {
	color: var(--anuera-teal);
	fill: var(--anuera-teal);
}

/* The arrow that fades in after the title. */
body .elementor-widget-icon-box .elementor-icon-box-title a {
	color: inherit;
	text-decoration: none;
}

body .anuera-list-grid .elementor-icon-box-title a {
	position: relative;
	padding-right: 20px;
}

body .anuera-list-grid .elementor-icon-box-title a::before {
	content: "";
	position: absolute;
	top: 50%;
	right: 2px;
	width: 11px;
	height: 11px;
	margin-top: -5px;
	background: currentColor;
	opacity: 0;
	transform: translateX(-4px);
	transition: opacity 0.25s ease, transform 0.25s ease;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M5 2l5 5-5 5'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M5 2l5 5-5 5'/%3E%3C/svg%3E") no-repeat center / contain;
}

body .anuera-list-grid > .elementor-widget-icon-box:hover .elementor-icon-box-title a::before {
	opacity: 1;
	transform: none;
}

/* Alternative: the title gains an underline that grows from the left. */
body .anuera-hover-underline .elementor-icon-box-title a {
	background-image: linear-gradient(var(--anuera-teal), var(--anuera-teal));
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0 1px;
	transition: background-size 0.3s ease;
	text-decoration: none;
}

body .anuera-hover-underline > .elementor-widget-icon-box:hover .elementor-icon-box-title a {
	background-size: 100% 1px;
}

/* Alternative: the whole item lifts slightly. */
body .anuera-hover-lift > .elementor-widget-icon-box:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 30px rgba(1, 33, 105, 0.1);
}

/* Industries on the About page sit on navy, so they tint the other way. */
body .anuera-dark .anuera-list-grid > .elementor-widget-icon-box:hover {
	background-color: rgba(255, 255, 255, 0.06);
}

body .anuera-dark .anuera-list-grid .elementor-icon-box-title,
body .anuera-dark .anuera-list-grid .elementor-icon-box-title a,
body .anuera-dark .anuera-list-grid > .elementor-widget-icon-box:hover .elementor-icon-box-title,
body .anuera-dark .anuera-list-grid > .elementor-widget-icon-box:hover .elementor-icon-box-title a {
	color: var(--anuera-white);
}

body .anuera-dark .anuera-list-grid > .elementor-widget-icon-box:hover .elementor-icon {
	color: var(--anuera-white);
	fill: var(--anuera-white);
}

@media (prefers-reduced-motion: reduce) {
	body .anuera-list-grid > .elementor-widget-icon-box:hover .elementor-icon-box-icon,
	body .anuera-list-grid > .elementor-widget-icon-box:hover .elementor-icon-box-title,
	body .anuera-hover-lift > .elementor-widget-icon-box:hover {
		transform: none;
	}
}

/* anuera-stat: a figure in the credentials row (Elementor Counter widget). */
body .anuera-stat {
	padding-top: 22px;
	border-top: 1px solid rgba(255, 255, 255, 0.3);
}

body .anuera-stat .elementor-counter {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	text-align: left;
}

body .anuera-stat .elementor-counter-number-wrapper {
	order: 1;
	justify-content: flex-start;
	color: var(--anuera-white);
	font-family: var(--anuera-serif);
	font-size: clamp(2.6rem, 4.5vw, 3.5rem);
	font-weight: 400;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

body .anuera-stat .elementor-counter-title {
	order: 2;
	color: var(--anuera-white);
	font-family: var(--anuera-sans);
	font-size: 0.95rem;
	font-weight: 400;
	line-height: 1.5;
	text-align: left;
}

/* anuera-logos: client logos, centred and evenly sized. The supplied PNGs are already
   white on a transparent background; the filter below also whitens any dark logo added later. */
body .anuera-logos .elementor-widget-image img {
	max-height: 60px;
	width: auto;
	object-fit: contain;
}

body .anuera-logos-whiten .elementor-widget-image img {
	filter: brightness(0) invert(1);
}

/* anuera-steps: the container holding the numbered steps. Draws the fine line that
   connects the numbers, so the four read as one process. */
body .anuera-steps {
	position: relative;
}

body .anuera-steps::before {
	content: "";
	position: absolute;
	left: 21px;
	top: 16px;
	bottom: 16px;
	width: 1px;
	background: var(--anuera-rule);
}

/* The number sits on that line, so it needs the panel's own background behind it. */
body .anuera-steps .anuera-step__number .elementor-heading-title {
	position: relative;
	z-index: 1;
	width: 44px;
	padding: 2px 0;
	background: var(--anuera-white);
	text-align: center;
}

/* anuera-step: one numbered step in "How We Work". */
body .anuera-step {
	padding-top: 22px;
	padding-bottom: 22px;
	border-top: 1px solid var(--anuera-rule);
}

/* Inside anuera-steps the line does the work, so no rule under the last step. */
body .anuera-steps > .anuera-step:first-child {
	border-top: 0;
	padding-top: 0;
}

body .anuera-step:last-child {
	border-bottom: 1px solid var(--anuera-rule);
}

body .anuera-steps > .anuera-step:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

body .anuera-step .anuera-step__number .elementor-heading-title {
	color: var(--anuera-teal);
	font-size: 1.4rem;
}

/* anuera-ticks: on a Text Editor widget, turns its bullet list into ticks in two columns. */
body .anuera-ticks ul {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 12px 32px;
	margin: 0;
	padding: 0;
	list-style: none;
}

body .anuera-ticks li {
	position: relative;
	margin: 0;
	padding-left: 28px;
	line-height: 1.5;
}

body .anuera-ticks li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 4px;
	width: 16px;
	height: 16px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230D7172' stroke-width='1.6'%3E%3Cpath d='M3 8.5l3 3 7-7'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* --------------------------------------------------------------------------
   Services sidebar: [anuera_services_nav]
   -------------------------------------------------------------------------- */

.services-nav {
	border: 1px solid var(--anuera-rule);
}

.services-nav__title {
	margin: 0;
	padding: 20px 24px 14px;
	font-family: var(--anuera-serif);
	font-size: 1.2rem;
	color: var(--anuera-navy);
}

.services-nav__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.services-nav__list a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 24px;
	border-top: 1px solid rgba(1, 33, 105, 0.12);
	color: var(--anuera-navy);
	font-size: 0.95rem;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.services-nav__list a svg {
	color: var(--anuera-teal);
	flex: none;
	transition: transform 0.25s ease;
}

body .services-nav__list a {
	color: var(--anuera-navy);
}

/* Hover (and keyboard focus): the row tints, its name turns teal and the arrow slides along.
   The current page doesn't react: it is already marked, and shouldn't look clickable. */
body .services-nav__list a:not(.is-current):hover,
body .services-nav__list a:not(.is-current):focus-visible {
	background: var(--anuera-mist);
	color: var(--anuera-teal);
	text-decoration: none;
}

body .services-nav__list a:not(.is-current):hover svg,
body .services-nav__list a:not(.is-current):focus-visible svg {
	transform: translateX(4px);
}

body .services-nav__list a.is-current,
body .services-nav__list a.is-current:hover {
	border-top-color: var(--anuera-navy);
	background: var(--anuera-navy);
	color: var(--anuera-white);
	text-decoration: none;
}

body .services-nav__list a.is-current svg {
	color: var(--anuera-white);
}

@media (prefers-reduced-motion: reduce) {
	body .services-nav__list a:not(.is-current):hover svg,
	body .services-nav__list a:not(.is-current):focus-visible svg {
		transform: none;
	}
}

/* --------------------------------------------------------------------------
   Latest insights: [anuera_latest_posts]
   -------------------------------------------------------------------------- */

.latest-posts {
	width: 100%;
}

.latest-posts__empty {
	margin: 0;
	padding: 28px;
	border: 1px dashed var(--anuera-teal);
	text-align: center;
}

/* --------------------------------------------------------------------------
   Keeping the theme's own areas white
   Elementor's global colours load after this stylesheet and target bare tags
   (its "h2", "a" rules), which would otherwise turn the header, footer, title
   bands and call-to-action banner teal. These rules restate the theme's colours
   at a higher specificity so those areas stay white whatever is set in
   Elementor → Site Settings.
   -------------------------------------------------------------------------- */

body .site-header a,
body .site-header .site-nav__list a,
body .site-header .site-nav__list .sub-menu a,
body .site-header .site-nav__button {
	color: var(--anuera-white);
}

body .site-header .site-nav__button {
	background: var(--anuera-white);
	border-color: var(--anuera-white);
	color: var(--anuera-navy);
}

/* On hover the fill stays, so the label is always navy; the tint gives the feedback. */
body .site-header .site-nav__button:hover,
body .site-header .site-nav__button:focus-visible {
	background: var(--anuera-mist);
	border-color: var(--anuera-mist);
	color: var(--anuera-navy);
}

/* The mobile menu button is a <button>, so Elementor's global button style (its coloured
   square) would otherwise be applied to it. These rules keep it a plain white icon.
   To give it a different look, change the colours here. */
body .site-header .site-nav__toggle,
body .site-header .site-nav__toggle:hover,
body .site-header .site-nav__toggle:focus,
body .site-header .site-nav__toggle:active {
	background: transparent;
	color: var(--anuera-white);
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

body .site-header .site-nav__toggle:focus-visible {
	outline: 2px solid var(--anuera-white);
	outline-offset: 2px;
}

body .cta-banner,
body .cta-banner .cta-banner__heading,
body .cta-banner .cta-banner__text {
	color: var(--anuera-white);
}

body .cta-banner .anuera-button--outline-light {
	border-color: var(--anuera-white);
	color: var(--anuera-white);
}

body .cta-banner .anuera-button--outline-light:hover {
	background: var(--anuera-white);
	color: var(--anuera-navy);
}

body .site-footer,
body .site-footer a,
body .site-footer .site-footer__heading,
body .site-footer .site-footer__tagline,
body .site-footer .site-footer__address,
body .site-footer .site-footer__copyright {
	color: var(--anuera-white);
}

body .page-hero,
body .page-hero .page-hero__title,
body .page-hero .page-hero__intro,
body .post-hero,
body .post-hero .post-hero__title,
body .post-hero .post-hero__standfirst,
body .post-hero .post-hero__meta a {
	color: var(--anuera-white);
}

body .services-nav .services-nav__list a.is-current {
	color: var(--anuera-white);
}

/* Hover colour on navy: a soft grey rather than teal, which reads poorly there.
   Change --anuera-grey at the top of this file to adjust it everywhere. */

body .site-header__brand:hover,
body .site-header .site-nav__list a:hover,
body .site-header .site-nav__list .sub-menu a:hover,
body .site-footer a:hover,
body .site-footer a.is-underlined:hover,
body .cta-banner a:not(.anuera-button):hover {
	color: var(--anuera-grey);
}

body .site-header .site-nav__list a:hover {
	border-bottom-color: var(--anuera-grey);
}

body .site-header .site-nav__list .sub-menu a:hover {
	background: rgba(255, 255, 255, 0.08);
}

/* The logo is drawn in currentColor, so this keeps it white until hovered. */
body .site-header__brand,
body .site-footer__logo-link {
	color: var(--anuera-white);
}

body .site-footer__logo-link:hover {
	color: var(--anuera-grey);
}

/* --------------------------------------------------------------------------
   Scrolling row with arrows: add anuera-scroller to a container in Elementor
   The theme adds the arrows and progress bar; they appear only when the row
   is actually wider than the space available.
   -------------------------------------------------------------------------- */

body .anuera-scroller {
	display: grid !important;
	grid-template-columns: none !important;
	grid-auto-flow: column !important;
	grid-auto-columns: min(420px, 82%) !important;
	overflow-x: auto !important;
	gap: 20px;
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

body .anuera-scroller::-webkit-scrollbar {
	display: none;
}

body .anuera-scroller > * {
	width: auto !important;
	max-width: none !important;
	scroll-snap-align: start;
}

/* anuera-scroller-bleed: the row runs off the right edge of the screen, so the
   part-visible card reads as "there is more" rather than as a clipped card.
   The measuring is done in JavaScript, which sets --anuera-bleed. */
body .anuera-scroller-bleed {
	/* Widening the row is what reaches the edge. A negative margin does nothing here,
	   because Elementor gives its containers an explicit width. */
	width: calc(100% + var(--anuera-bleed, 0px)) !important;
	max-width: none !important;
	margin-right: 0 !important;
	padding-right: var(--anuera-bleed, 0px);
	scroll-padding-right: var(--anuera-bleed, 0px);
}

/* anuera-scroller-shadow: cards get the same soft shadow as the panels.
   The row needs room around them or the shadow is clipped by the scrolling. */
body .anuera-scroller-shadow {
	padding-top: 6px;
	padding-bottom: 30px;
}

body .anuera-scroller-shadow > * {
	box-shadow: 0 14px 34px rgba(1, 33, 105, 0.12);
}

body .anuera-scroller-shadow + .anuera-scroller-controls {
	margin-top: 8px;
}

.anuera-scroller-controls {
	display: flex;
	align-items: center;
	gap: 32px;
	margin-top: 28px;
}

.anuera-scroller-progress {
	position: relative;
	flex: 1;
	height: 3px;
	background: var(--anuera-mist);
}

.anuera-scroller-progress span {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	background: var(--anuera-teal);
	transition: width 0.2s ease, transform 0.2s ease;
}

.anuera-scroller-buttons {
	display: flex;
	gap: 10px;
}

.anuera-scroller-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--anuera-teal);
	background: var(--anuera-teal);
	color: var(--anuera-white);
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.anuera-scroller-button:hover:not(:disabled) {
	background: transparent;
	color: var(--anuera-teal);
}

.anuera-scroller-button:disabled {
	opacity: 0.35;
	cursor: default;
}

.anuera-dark .anuera-scroller-progress {
	background: rgba(255, 255, 255, 0.25);
}

.anuera-dark .anuera-scroller-progress span {
	background: var(--anuera-white);
}

.anuera-dark .anuera-scroller-button {
	border-color: var(--anuera-white);
	background: var(--anuera-white);
	color: var(--anuera-navy);
}

.anuera-dark .anuera-scroller-button:hover:not(:disabled) {
	background: transparent;
	color: var(--anuera-white);
}

/* --------------------------------------------------------------------------
   MetForm
   MetForm loads its own widget styles after the theme's, so its fields would
   otherwise fall back to its default typeface. These rules put the brand fonts
   and colours back, so a new form matches the site without being styled by hand.
   Anything set in the widget's own Style tab still wins over this.
   -------------------------------------------------------------------------- */

body .metform-form-content,
body .metform-form-content p,
body .mf-input-wrapper,
body .mf-radio-label,
body .mf-checkbox-label,
body .mf-switch-label {
	font-family: var(--anuera-sans);
	color: var(--anuera-navy);
}

body .metform-form-content .mf-input-label,
body .metform-form-content label {
	font-family: var(--anuera-sans);
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--anuera-navy);
}

/* Radio and checkbox labels read as normal text, not as field names. */
body .metform-form-content .mf-radio-label,
body .metform-form-content .mf-checkbox-label {
	font-size: 0.95rem;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
}

body .metform-form-content .mf-input,
body .metform-form-content input[type="text"],
body .metform-form-content input[type="email"],
body .metform-form-content input[type="tel"],
body .metform-form-content input[type="url"],
body .metform-form-content input[type="number"],
body .metform-form-content input[type="date"],
body .metform-form-content select,
body .metform-form-content textarea {
	width: 100%;
	padding: 10px 0;
	border: 0 !important;
	border-bottom: 1px solid var(--anuera-rule) !important;
	border-radius: 0 !important;
	background-color: transparent !important;
	box-shadow: none;
	font-family: var(--anuera-sans) !important;
	font-size: 0.95rem;
	color: var(--anuera-navy);
}

body .metform-form-content .mf-input:focus,
body .metform-form-content select:focus,
body .metform-form-content textarea:focus {
	border-bottom-color: var(--anuera-teal) !important;
	box-shadow: 0 1px 0 0 var(--anuera-teal);
	outline: none;
}

body .metform-form-content .mf-input::placeholder,
body .metform-form-content textarea::placeholder {
	color: rgba(1, 33, 105, 0.45);
}

/* Leave the browser's own arrow on a select: it is clearer than a drawn one and
   needs no styling to stay visible. */
body .metform-form-content select {
	padding-right: 4px;
}

body .metform-form-content .metform-btn,
body .metform-form-content button[type="submit"],
body .metform-form-content input[type="submit"] {
	padding: 0.7em 1.9em;
	border: 1px solid var(--anuera-teal);
	border-radius: 999px;
	background: transparent;
	color: var(--anuera-teal);
	font-family: var(--anuera-serif);
	font-size: 0.95rem;
	font-weight: 400;
}

body .metform-form-content .metform-btn:hover,
body .metform-form-content button[type="submit"]:hover,
body .metform-form-content input[type="submit"]:hover {
	background: var(--anuera-teal);
	color: var(--anuera-white);
}

/* Messages after sending, and validation warnings. */
body .metform-form-content .mf-response-message,
body .metform-form-content .mf-success-response,
body .metform-form-content .mf-error-response,
body .metform-form-content .mf-error-message,
body .metform-form-content .mf-resp-msg {
	font-family: var(--anuera-sans);
	font-size: 0.9rem;
}

body .metform-form-content .mf-error-message,
body .metform-form-content .mf-error-response {
	color: #9b2226;
}

/* On a navy section, add anuera-dark to the container as usual. */
body .anuera-dark .metform-form-content,
body .anuera-dark .metform-form-content .mf-input-label,
body .anuera-dark .metform-form-content label,
body .anuera-dark .metform-form-content .mf-input,
body .anuera-dark .metform-form-content textarea,
body .anuera-dark .metform-form-content select {
	color: var(--anuera-white);
}

body .anuera-dark .metform-form-content .mf-input,
body .anuera-dark .metform-form-content textarea,
body .anuera-dark .metform-form-content select {
	border-bottom-color: rgba(255, 255, 255, 0.35) !important;
}

body .anuera-dark .metform-form-content .mf-input::placeholder {
	color: rgba(255, 255, 255, 0.6);
}

/* --------------------------------------------------------------------------
   anuera-strip: a row of icon-and-name tiles (the services on the home page)
   Put the class on a grid container of Icon Box widgets that have no description.
   The dividers are a 1px gap over a tinted background, so they stay correct whether
   the grid shows six, three or two columns. Each whole tile is clickable.
   -------------------------------------------------------------------------- */

body .anuera-strip {
	column-gap: 1px !important;
	row-gap: 1px !important;
	background-color: rgba(1, 33, 105, 0.12);
	box-shadow: 0 24px 60px rgba(1, 33, 105, 0.14);
}

body .anuera-strip > .elementor-widget-icon-box {
	position: relative;
	margin: 0 !important;
	background-color: var(--anuera-white);
	/* The scroll animation also fades and moves these tiles, so its transitions are repeated
	   here alongside the hover ones. The lift uses the separate "scale" property so the two
	   never fight over "transform". */
	transition:
		opacity 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) var(--reveal-delay, 0s),
		transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) var(--reveal-delay, 0s),
		background-color 0.25s ease,
		box-shadow 0.25s ease,
		scale 0.25s ease;
}

body .anuera-strip .elementor-icon-box-wrapper {
	padding: 34px 10px 30px;
}

body .anuera-strip .elementor-icon-box-title a {
	color: var(--anuera-navy);
	text-decoration: none;
	transition: color 0.25s ease;
}

/* The link covers the whole tile, not just the words. */
body .anuera-strip .elementor-icon-box-title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

/* A small arrow in the corner appears on hover. */
body .anuera-strip .elementor-icon-box-title a::before {
	content: "";
	position: absolute;
	top: 14px;
	right: 14px;
	width: 11px;
	height: 11px;
	background: currentColor;
	opacity: 0;
	transform: translateX(-4px);
	transition: opacity 0.25s ease, transform 0.25s ease;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M5 2l5 5-5 5'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M5 2l5 5-5 5'/%3E%3C/svg%3E") no-repeat center / contain;
	z-index: 1;
}

body .anuera-strip > .elementor-widget-icon-box:hover,
body .anuera-strip > .elementor-widget-icon-box:focus-within {
	background-color: #F0F5F3;
}

/* The hovered tile lifts: it grows slightly and gains a shadow, and sits above its neighbours.
   Only on devices with a real pointer, so a tap on a phone doesn't leave a tile stuck raised. */
@media (hover: hover) {
	body .anuera-strip > .elementor-widget-icon-box:hover,
	body .anuera-strip > .elementor-widget-icon-box:focus-within {
		z-index: 2;
		scale: 1.05;
		box-shadow: 0 18px 40px rgba(1, 33, 105, 0.22);
	}
}

@media (prefers-reduced-motion: reduce) {
	body .anuera-strip > .elementor-widget-icon-box:hover,
	body .anuera-strip > .elementor-widget-icon-box:focus-within {
		scale: none;
	}
}

body .anuera-strip > .elementor-widget-icon-box:hover .elementor-icon-box-title a {
	color: var(--anuera-teal);
}

body .anuera-strip > .elementor-widget-icon-box:hover .elementor-icon {
	color: var(--anuera-teal);
	fill: var(--anuera-teal);
}

body .anuera-strip > .elementor-widget-icon-box:hover .elementor-icon-box-title a::before {
	opacity: 1;
	transform: none;
}

body .anuera-strip .elementor-icon-box-title a:focus-visible::after {
	outline: 2px solid var(--anuera-teal);
	outline-offset: -4px;
}

body .anuera-strip .elementor-icon-box-title {
	text-wrap: balance;
}

@media (max-width: 767px) {
	body .anuera-strip .elementor-icon-box-wrapper {
		padding: 26px 6px 22px;
	}
}

/* Touch screens have no hover, so the arrow would only ever flash. */
@media (hover: none) {
	body .anuera-strip .elementor-icon-box-title a::before {
		display: none;
	}
}