/* ==========================================================================
   Webforward: site
   Header, menu drawer, breadcrumbs, footer, the single case study template
   and the contact form.
   ========================================================================== */

.wf-site {
	min-height: 100vh;
	overflow-x: clip;
}

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

.wf-site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	border-bottom: 1px solid #4e35a8;
	background: var(--wf-blue);
}

/* Sit below the WordPress toolbar when logged in. */
.admin-bar .wf-site-header {
	top: 32px;
}

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

/* Below 600px the toolbar scrolls away, so the header goes back to the top. */
@media (max-width: 600px) {
	.admin-bar .wf-site-header {
		top: 0;
	}
}

.wf-header-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 80px;
}

.wf-logo {
	display: flex;
	align-items: center;
	color: var(--wf-white);
	text-decoration: none;
}

.wf-logo .custom-logo {
	width: auto;
	height: 30px;
	/* The uploaded logo is the purple wordmark; show it white on the blue. */
	filter: brightness(0) invert(1);
}

.wf-logo-text {
	font-size: 22px;
	font-weight: 600;
}

.wf-header-actions {
	display: flex;
	align-items: center;
	gap: 28px;
	font-size: 15px;
}

.wf-header-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
}

/* The menu button stays on the brand magenta, even on service pages. */
.wf-menu-button {
	--svc-1: #d0006f;
	--svc-2: #c8138f;
	--svc-3: #c11fa6;
	--svc-4: #bb29bb;
	--svc-ink: #fff;
	background-image: linear-gradient(100deg, #d0006f 0%, #bb29bb 50%, #d0006f 100%);
	min-height: 44px;
	padding: 0 22px;
	border-radius: 999px;
	font-size: 16px;
}

@media (max-width: 900px) {
	.wf-header-link.is-email {
		display: none;
	}
}

@media (max-width: 560px) {
	.wf-header-inner {
		flex-wrap: nowrap;
		min-height: 68px;
	}

	.wf-logo .custom-logo {
		height: 24px;
	}

	.wf-header-link.is-phone span {
		display: none;
	}

	.wf-header-actions {
		gap: 16px;
	}

	.wf-menu-button {
		padding: 0 18px;
	}
}

/* --------------------------------------------------------------------------
   Menu drawer (opens from the right)
   -------------------------------------------------------------------------- */

.wf-menu-backdrop {
	position: fixed;
	inset: 0;
	z-index: 90;
	background: rgba(14, 0, 48, 0.6);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.wf-menu-backdrop.is-visible {
	opacity: 1;
}

.wf-menu {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 100;
	display: flex;
	flex-direction: column;
	width: min(520px, 100%);
	padding: 24px 40px 40px;
	background: var(--wf-panel);
	overflow-y: auto;
	transform: translateX(100%);
	visibility: hidden;
	transition: transform 0.4s var(--wf-ease), visibility 0s 0.4s;
}

.wf-menu.is-open {
	transform: none;
	visibility: visible;
	transition: transform 0.4s var(--wf-ease);
}

.admin-bar .wf-menu {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .wf-menu {
		top: 46px;
	}
}

.wf-menu-top {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	min-height: 56px;
	margin-bottom: 32px;
}

.wf-menu-close {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 0;
	border: 0;
	background: none;
	color: var(--wf-white);
	font-family: var(--wf-font);
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
}

.wf-menu-list,
.wf-menu-list .sub-menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.wf-menu-list > li {
	position: relative;
	margin: 0;
	border-top: 1px solid var(--wf-line);
}

.wf-menu-list > li:last-child {
	border-bottom: 1px solid var(--wf-line);
}

.wf-menu-list > li > a {
	display: block;
	padding: 16px 48px 16px 0;
	color: var(--wf-white);
	font-size: var(--fs-h4);
	font-weight: 500;
	text-decoration: none;
}

.wf-menu-list a:hover,
.wf-menu-list .current-menu-item > a {
	color: var(--wf-pink);
}

.wf-submenu-toggle {
	position: absolute;
	top: 10px;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--wf-muted);
	cursor: pointer;
}

.wf-submenu-toggle svg {
	transition: transform 0.25s ease;
}

.wf-submenu-toggle[aria-expanded="true"] svg {
	transform: rotate(180deg);
}

.wf-menu-list .sub-menu {
	display: none;
	padding: 0 0 16px;
}

.wf-menu-list .is-expanded > .sub-menu {
	display: block;
}

.wf-menu-list .sub-menu a {
	display: block;
	padding: 7px 0;
	color: var(--wf-text);
	font-size: 17px;
	text-decoration: none;
}

.wf-menu-foot {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
	margin-top: auto;
	padding-top: 40px;
}

.wf-menu-foot p {
	color: var(--wf-muted);
	font-size: 16px;
	line-height: 1.8;
}

.wf-menu-foot a:not(.wf-button) {
	text-decoration: none;
}

body.wf-menu-open {
	overflow: hidden;
}

/* --------------------------------------------------------------------------
   Breadcrumbs (Yoast)
   -------------------------------------------------------------------------- */

.wf-breadcrumbs {
	padding-top: 24px;
	color: var(--wf-faint);
	font-size: var(--fs-meta);
}

.wf-breadcrumbs p {
	margin: 0;
}

/* Yoast puts the separators between the links as plain text. Laying the
   trail out as a flex row turns each separator into its own item, so the
   gap spaces everything evenly. */
.wf-breadcrumbs #breadcrumbs > span {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 12px;
}

.wf-breadcrumb-sep {
	display: inline-flex;
	color: var(--wf-faint);
	opacity: 0.8;
}

.wf-breadcrumbs .breadcrumb_last strong {
	font-weight: 600;
}

.wf-breadcrumbs a {
	color: var(--wf-muted);
	text-decoration: none;
}

.wf-breadcrumbs a:hover {
	color: var(--wf-pink);
}

.wf-breadcrumbs .breadcrumb_last {
	color: var(--wf-text);
}

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

.wf-footer {
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	color: var(--wf-text);
	font-size: 15px;
}

.wf-footer > .wf-container {
	padding-block: 96px 48px;
}

.wf-footer-columns {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.3fr);
	gap: 48px;
}

.wf-footer h2 {
	margin: 0 0 18px;
	color: var(--wf-white);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.4;
}

.wf-footer-menu {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wf-footer-menu li {
	margin: 0;
}

.wf-footer a {
	color: var(--wf-text);
	text-decoration: none;
}

.wf-footer a:hover {
	color: var(--wf-pink);
}

.wf-footer-contact {
	display: flex;
	flex-direction: column;
	gap: 12px;
	line-height: 1.6;
}

.wf-footer-contact h2 {
	margin-bottom: 6px;
}

.wf-footer .wf-footer-phone {
	color: var(--wf-white);
	font-size: 20px;
	font-weight: 600;
}

.wf-footer-address {
	color: var(--wf-faint);
}

.wf-footer-bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px 28px;
	margin-top: 72px;
	padding-top: 24px;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	color: var(--wf-faint);
	font-size: 14px;
}

.wf-footer-bottom p {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 28px;
	margin: 0;
}

.wf-footer-bottom .wf-footer-menu {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 8px 28px;
}

.wf-rainbow {
	height: 18px;
	background: linear-gradient(90deg, var(--wf-rainbow));
}

@media (max-width: 900px) {
	.wf-footer-columns {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 40px 32px;
	}
}

@media (max-width: 520px) {
	.wf-footer > .wf-container {
		padding-top: 64px;
	}

	.wf-footer-columns {
		grid-template-columns: minmax(0, 1fr);
	}

	.wf-rainbow {
		height: 12px;
	}
}

/* --------------------------------------------------------------------------
   Single case study
   -------------------------------------------------------------------------- */

.wf-case-header {
	padding-block: var(--wf-pad-md) 56px;
}

.wf-case-header-grid {
	display: grid;
	grid-template-columns: minmax(0, 9fr) minmax(0, 3fr);
	gap: 64px;
	align-items: start;
}

.wf-case-title {
	display: flex;
	flex-direction: column;
	gap: 22px;
	padding-top: 16px;
}

.wf-case-title h1 {
	margin: 0;
}

.wf-case-meta {
	margin: 0;
}

.wf-case-meta > div {
	padding: 16px 0;
	border-top: 1px solid var(--wf-line);
}

.wf-case-meta dt {
	color: var(--wf-faint);
	font-size: 14px;
}

.wf-case-meta dd {
	margin: 4px 0 0;
	color: var(--wf-white);
	font-size: 18px;
	font-weight: 600;
}

/* The cover sits on the project's service gradient and runs off the bottom right. */
.wf-case-cover {
	height: clamp(320px, 44vw, 640px);
	margin: 0;
	padding: clamp(28px, 4.5vw, 64px) 0 0 clamp(28px, 4.5vw, 64px);
	border-radius: 28px;
	background: linear-gradient(160deg, var(--svc-1) 0%, var(--svc-2) 33%, var(--svc-3) 67%, var(--svc-4) 100%);
	overflow: hidden;
}

.wf-case-cover img {
	width: 100%;
	height: 100%;
	border-radius: 18px 0 0 0;
	object-fit: cover;
	object-position: left top;
}

.wf-case-results {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 24px;
	margin: 56px 0 0;
	padding: 0;
	list-style: none;
}

.wf-case-results li {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: 32px;
	border-radius: var(--wf-radius);
	background: var(--wf-panel);
}

.wf-case-results strong {
	font-size: var(--fs-h2);
	font-weight: 500;
	line-height: 1.05;
}

.wf-case-results span {
	color: var(--wf-text);
	font-size: 17px;
	line-height: 1.5;
}

.wf-case-intro {
	padding-top: var(--wf-pad-lg);
}

.wf-case-lead {
	max-width: 1080px;
	color: var(--wf-white);
	font-size: var(--fs-h3);
	line-height: 1.45;
}

.wf-case-intro .wf-ticks {
	max-width: 760px;
	margin-top: 40px;
}

.wf-case-story {
	padding-block: var(--wf-pad-lg) var(--wf-pad-md);
}

.wf-case-row {
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
	gap: 64px;
	padding: 56px 0;
	border-top: 1px solid var(--wf-line);
}

.wf-case-row h2 {
	margin: 0;
}

.wf-case-row .wf-prose {
	max-width: none;
}

.wf-case-review {
	max-width: 1000px;
	margin: 0 0 var(--wf-pad-md);
}

.wf-case-review p {
	color: var(--wf-white);
	font-size: var(--fs-h3);
	font-weight: 500;
	line-height: 1.4;
}

.wf-case-review figcaption {
	margin-top: 24px;
}

.wf-case-review strong {
	display: block;
	font-size: 17px;
}

.wf-case-review span {
	color: var(--wf-muted);
	font-size: 15px;
}

.wf-case-more {
	padding-block: var(--wf-pad-lg);
	background: var(--wf-blue-deep);
}

@media (max-width: 900px) {
	.wf-case-header-grid,
	.wf-case-row {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}

	.wf-case-row {
		padding: 40px 0;
	}
}

/* --------------------------------------------------------------------------
   Blog post
   -------------------------------------------------------------------------- */

.wf-post-image {
	margin-block: 0 var(--wf-pad-sm);
}

.wf-post-image img {
	width: 100%;
	border-radius: var(--wf-radius);
}

/* --------------------------------------------------------------------------
   Contact form (Forminator, form 15257 on /contact/)

   Sits on the door card colour. Steps are underlined, service choices are
   big tiles with a tick circle in that service's colour that fills with
   its gradient when ticked. The service colour is picked from the option
   text, so the tiles stay right if the order changes in Forminator.
   -------------------------------------------------------------------------- */

.wf-contact-page .forminator-ui.forminator-custom-form {
	margin: 0 !important;
	padding: clamp(28px, 4vw, 48px) !important;
	border: 0 !important;
	border-radius: 28px !important;
	background: var(--wf-panel) !important;
	color: var(--wf-text) !important;
	font-family: var(--wf-font) !important;
}

.wf-contact-page .forminator-ui :is(h2, h3, p, span, label, input, textarea, select, button) {
	font-family: var(--wf-font) !important;
}

/* Steps along the top */
.wf-contact-page .forminator-pagination-steps {
	display: flex !important;
	gap: 24px;
	margin: 0 0 40px !important;
	padding: 0 !important;
	border: 0 !important;
}

.wf-contact-page .forminator-pagination-steps .forminator-break,
.wf-contact-page .forminator-pagination-steps .forminator-progress-bar {
	display: none !important;
}

.wf-contact-page .forminator-step {
	flex: 1;
	margin: 0 !important;
	padding: 0 0 12px !important;
	border: 0 !important;
	border-bottom: 3px solid var(--wf-line) !important;
	border-radius: 0 !important;
	background: none !important;
	color: var(--wf-faint) !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	text-align: left !important;
}

.wf-contact-page .forminator-step.forminator-current {
	border-image: linear-gradient(90deg, #d0006f, #bb29bb) 1 !important;
	color: var(--wf-white) !important;
}

.wf-contact-page .forminator-step :is(.forminator-step-dot, .forminator-step-label) {
	all: unset;
}

/* Group headings and labels */
.wf-contact-page .forminator-field-group > .forminator-repeater-label {
	display: block;
	margin: 0 0 8px !important;
	color: var(--wf-white) !important;
	font-size: var(--fs-h4) !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
}

.wf-contact-page .forminator-label {
	margin: 0 0 8px !important;
	color: var(--wf-white) !important;
	font-size: 16px !important;
	font-weight: 600 !important;
}

.wf-contact-page .forminator-row {
	margin-bottom: 20px !important;
}

/* Inputs */
.wf-contact-page :is(.forminator-input, .forminator-textarea, .forminator-select--field, .select2-selection) {
	min-height: 56px !important;
	padding: 14px 16px !important;
	border: 1px solid rgba(255, 255, 255, 0.2) !important;
	border-radius: var(--wf-radius-sm) !important;
	background: var(--wf-blue) !important;
	box-shadow: none !important;
	color: var(--wf-white) !important;
	font-size: 17px !important;
}

.wf-contact-page .forminator-textarea {
	min-height: 160px !important;
}

.wf-contact-page :is(.forminator-input, .forminator-textarea)::placeholder {
	color: var(--wf-faint) !important;
	opacity: 1;
}

.wf-contact-page :is(.forminator-input, .forminator-textarea, .forminator-select--field):focus {
	border-color: var(--wf-white) !important;
	outline: none !important;
}

.wf-contact-page input:-webkit-autofill {
	-webkit-text-fill-color: var(--wf-white) !important;
	box-shadow: 0 0 0 1000px var(--wf-blue) inset !important;
}

/* Service tiles: the checkbox options in the first step */
.wf-contact-page .forminator-checkbox {
	--tick: var(--wf-white);
	--fill: linear-gradient(100deg, #fff, var(--wf-pink));
	--fill-ink: var(--wf-ink);
	position: relative;
	display: flex !important;
	align-items: center;
	gap: 14px;
	min-height: 72px;
	margin: 0 0 12px !important;
	padding: 18px 20px !important;
	border: 0 !important;
	border-radius: 16px !important;
	background: var(--wf-panel-raised) !important;
	color: var(--wf-white) !important;
	font-size: 17px !important;
	font-weight: 600 !important;
	cursor: pointer;
}

.wf-contact-page .forminator-checkbox:has(input[value*="applic" i], input[value*="system" i]) { --tick: #c4d600; --fill: linear-gradient(100deg, #c4d600, #84bd00); --fill-ink: #160045; }
.wf-contact-page .forminator-checkbox:has(input[value*="design" i]) { --tick: #d0006f; --fill: linear-gradient(100deg, #d0006f, #6d2077); --fill-ink: #fff; }
.wf-contact-page .forminator-checkbox:has(input[value*="commerce" i], input[value*="shop" i]) { --tick: #009ca6; --fill: linear-gradient(100deg, #009ca6, #84bd00); --fill-ink: #160045; }
.wf-contact-page .forminator-checkbox:has(input[value*="develop" i]) { --tick: #bb29bb; --fill: linear-gradient(100deg, #bb29bb, #005eb8); --fill-ink: #fff; }
.wf-contact-page .forminator-checkbox:has(input[value*="seo" i], input[value*="search" i]) { --tick: #009fdf; --fill: linear-gradient(100deg, #009fdf, #005eb8); --fill-ink: #fff; }
.wf-contact-page .forminator-checkbox:has(input[value*="host" i]) { --tick: #f17a1e; --fill: linear-gradient(100deg, #f17a1e, #c8102e); --fill-ink: #fff; }
.wf-contact-page .forminator-checkbox:has(input[value*="support" i]) { --tick: #f9b90b; --fill: linear-gradient(100deg, #f9b90b, #fe5000); --fill-ink: #160045; }

.wf-contact-page .forminator-checkbox .forminator-checkbox-box {
	position: static !important;
	flex: none;
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 28px !important;
	height: 28px !important;
	margin: 0 !important;
	border: 2px solid var(--tick) !important;
	border-radius: 50% !important;
	background: none !important;
}

.wf-contact-page .forminator-checkbox:has(input:checked) {
	background: var(--fill) !important;
	color: var(--fill-ink) !important;
}

.wf-contact-page .forminator-checkbox:has(input:checked) .forminator-checkbox-box {
	border-color: currentColor !important;
	background: currentColor !important;
}

.wf-contact-page .forminator-checkbox:has(input:focus-visible) {
	outline: 3px solid #ffc72c;
	outline-offset: 3px;
}

/* Radios (budget, timing) as pills */
.wf-contact-page .forminator-radio {
	display: inline-flex !important;
	align-items: center;
	gap: 10px;
	min-height: 48px;
	margin: 0 8px 8px 0 !important;
	padding: 10px 18px !important;
	border: 1.5px solid rgba(255, 255, 255, 0.28) !important;
	border-radius: 999px !important;
	background: none !important;
	color: var(--wf-white) !important;
	cursor: pointer;
}

.wf-contact-page .forminator-radio:has(input:checked) {
	border-color: var(--wf-white) !important;
	background: var(--wf-white) !important;
	color: var(--wf-ink) !important;
}

/* Buttons */
.wf-contact-page .forminator-pagination-footer {
	display: flex !important;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 12px;
	margin-top: 32px !important;
}

.wf-contact-page .forminator-button {
	min-height: 56px !important;
	margin: 0 !important;
	padding: 0 28px !important;
	border: 0 !important;
	border-radius: var(--wf-radius-sm) !important;
	background: none !important;
	box-shadow: none !important;
	color: var(--wf-white) !important;
	font-size: 18px !important;
	font-weight: 700 !important;
}

.wf-contact-page :is(.forminator-button-next, .forminator-button-submit, .forminator-pagination-submit) {
	background-image: linear-gradient(100deg, #d0006f 0%, #bb29bb 50%, #d0006f 100%) !important;
	background-size: 200% 100% !important;
	transition: background-position 0.45s ease, transform 0.2s ease !important;
}

.wf-contact-page :is(.forminator-button-next, .forminator-button-submit, .forminator-pagination-submit):hover {
	background-position: 100% 0 !important;
	transform: translateY(-2px);
}

.wf-contact-page .forminator-button-back:hover {
	color: var(--wf-pink) !important;
}

.wf-contact-page :is(.forminator-description, .forminator-response-message) {
	color: var(--wf-muted) !important;
}

.wf-contact-page .forminator-error-message {
	background: none !important;
	color: #ffc2d9 !important;
	font-size: 15px !important;
}

/* --------------------------------------------------------------------------
   Forminator: hide the native checkbox and radio inputs. The styled box
   next to each one is what people see and click.
   -------------------------------------------------------------------------- */

.forminator-ui :is(.forminator-checkbox, .forminator-radio) > input {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: 0 !important;
	opacity: 0 !important;
	pointer-events: none;
}

/* --------------------------------------------------------------------------
   Legal pages: the terms sit on a white band so long text is easy to read.
   wf-legal-page is added to the body for any page under Legal.
   -------------------------------------------------------------------------- */

.wf-legal-body,
.wf-legal-page .e-con:has(> .e-con-inner > .wf-container-narrow) {
	--wf-full-bg: var(--wf-white);
	margin-top: clamp(32px, 4vw, 56px);
	padding-block: clamp(56px, 6vw, 96px) !important;
	border-image: linear-gradient(var(--wf-full-bg) 0 0) fill 0 / / 0 100vw;
	color: var(--wf-ink-text);
}

.wf-legal-body :is(h1, h2, h3, h4, h5, h6, .elementor-heading-title, strong, b),
.wf-legal-page .wf-container-narrow :is(h1, h2, h3, h4, h5, h6, .elementor-heading-title, strong, b) {
	color: var(--wf-ink) !important;
}

.wf-legal-body :is(p, li, td, th, .elementor-widget-text-editor),
.wf-legal-page .wf-container-narrow :is(p, li, td, th, .elementor-widget-text-editor) {
	color: var(--wf-ink-text) !important;
}

.wf-legal-body a:not([class]),
.wf-legal-page .wf-container-narrow a:not([class]) {
	color: var(--wf-blue) !important;
}

/* Service colours by option label too, in case the option values are generic */
.wf-contact-page .forminator-checkbox:is([title*="applic" i], [title*="system" i]) { --tick: #c4d600; --fill: linear-gradient(100deg, #c4d600, #84bd00); --fill-ink: #160045; }
.wf-contact-page .forminator-checkbox:is([title*="design" i], [title*="new website" i]) { --tick: #d0006f; --fill: linear-gradient(100deg, #d0006f, #6d2077); --fill-ink: #fff; }
.wf-contact-page .forminator-checkbox:is([title*="commerce" i], [title*="shop" i]) { --tick: #009ca6; --fill: linear-gradient(100deg, #009ca6, #84bd00); --fill-ink: #160045; }
.wf-contact-page .forminator-checkbox[title*="develop" i] { --tick: #bb29bb; --fill: linear-gradient(100deg, #bb29bb, #005eb8); --fill-ink: #fff; }
.wf-contact-page .forminator-checkbox:is([title*="seo" i], [title*="search" i]) { --tick: #009fdf; --fill: linear-gradient(100deg, #009fdf, #005eb8); --fill-ink: #fff; }
.wf-contact-page .forminator-checkbox[title*="host" i] { --tick: #f17a1e; --fill: linear-gradient(100deg, #f17a1e, #c8102e); --fill-ink: #fff; }
.wf-contact-page .forminator-checkbox[title*="support" i] { --tick: #f9b90b; --fill: linear-gradient(100deg, #f9b90b, #fe5000); --fill-ink: #160045; }

/* Form fields fill their column, with the label above */
:is(.wf-contact-page, .wf-enquiry) .forminator-ui :is(.forminator-input, .forminator-textarea, select.forminator-select--field) {
	display: block !important;
	width: 100% !important;
	max-width: none !important;
	box-sizing: border-box !important;
}

:is(.wf-contact-page, .wf-enquiry) .forminator-ui .forminator-label {
	display: block !important;
}

:is(.wf-contact-page, .wf-enquiry) .forminator-ui select.forminator-select--field {
	appearance: none !important;
	padding-right: 48px !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 18px center !important;
}

/* Intro line under each group heading */
.wf-contact-page .forminator-description.forminator-repeater-description {
	display: block;
	margin: 0 0 24px !important;
	color: var(--wf-muted, rgba(255, 255, 255, 0.75)) !important;
	font-size: 17px !important;
	line-height: 1.55 !important;
}

.wf-legal-body > .wf-container-narrow {
	margin-inline: auto;
}

/* --------------------------------------------------------------------------
   Long reading text: legal pages and anything with wf-prose.
   Slightly smaller than page copy, with clear section headings and lists.
   -------------------------------------------------------------------------- */

:is(.wf-prose, .wf-legal-body, .wf-legal-page .wf-container-narrow) :is(p, li, td, th) {
	font-size: var(--fs-small) !important;
	line-height: 1.65 !important;
}

:is(.wf-prose, .wf-legal-body, .wf-legal-page .wf-container-narrow) p {
	margin: 0 0 1em !important;
}

:is(.wf-prose, .wf-legal-body, .wf-legal-page .wf-container-narrow) h2 {
	margin: 2.5rem 0 1rem !important;
	font-size: var(--fs-h3) !important;
	line-height: 1.2 !important;
}

:is(.wf-prose, .wf-legal-body, .wf-legal-page .wf-container-narrow) :is(h3, h4, h5, h6) {
	margin: 2rem 0 0.75rem !important;
	font-size: var(--fs-h4) !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
}

:is(.wf-prose, .wf-legal-body, .wf-legal-page .wf-container-narrow) :is(h2, h3, h4, h5, h6):first-child {
	margin-top: 0 !important;
}

/* Numbered sections: the number matches the heading next to it */
:is(.wf-prose, .wf-legal-body, .wf-legal-page .wf-container-narrow) ol {
	margin: 0 0 1.5em !important;
	padding-left: 2.25em !important;
}

:is(.wf-prose, .wf-legal-body, .wf-legal-page .wf-container-narrow) ol > li {
	padding-left: 0.25em;
}

:is(.wf-prose, .wf-legal-body, .wf-legal-page .wf-container-narrow) ol > li + li {
	margin-top: 2.5rem;
}

:is(.wf-prose, .wf-legal-body, .wf-legal-page .wf-container-narrow) ol > li::marker {
	color: var(--wf-ink);
	font-size: var(--fs-h4);
	font-weight: 700;
}

/* Bullet lists */
:is(.wf-prose, .wf-legal-body, .wf-legal-page .wf-container-narrow) ul {
	margin: 0.75em 0 1em !important;
	padding-left: 1.25em !important;
	list-style: disc !important;
}

:is(.wf-prose, .wf-legal-body, .wf-legal-page .wf-container-narrow) ul > li {
	margin: 0 0 0.5em !important;
	padding-left: 0.25em;
}

:is(.wf-prose, .wf-legal-body, .wf-legal-page .wf-container-narrow) ul > li::marker {
	color: var(--wf-pink);
}

:is(.wf-prose, .wf-legal-body, .wf-legal-page .wf-container-narrow) li > :is(p, ul, ol):last-child {
	margin-bottom: 0 !important;
}

/* Tables (cookie lists and the like) */
:is(.wf-prose, .wf-legal-body, .wf-legal-page .wf-container-narrow) table {
	width: 100%;
	margin: 1em 0 1.5em;
	border-collapse: collapse;
}

:is(.wf-prose, .wf-legal-body, .wf-legal-page .wf-container-narrow) :is(th, td) {
	padding: 12px 14px;
	border-bottom: 1px solid rgba(22, 0, 69, 0.1);
	text-align: left;
	vertical-align: top;
}

:is(.wf-prose, .wf-legal-body, .wf-legal-page .wf-container-narrow) th {
	color: var(--wf-ink) !important;
	font-weight: 700;
}

/* --------------------------------------------------------------------------
   Contact page layout: the full rainbow ribbon runs in under the headline,
   down through the gap between the form and the cards, and out behind the
   form. The cards under the form use the same panel colour as the form.
   -------------------------------------------------------------------------- */

.wf-ribbon-contact {
	--rib: #ffd100, #fe5000, #ce0058, #6d2077, #2e008b, #005eb8, #009fdf, #009ca6, #84bd00;
	position: relative;
	isolation: isolate;
}

.wf-ribbon-contact .wf-ribbon {
	top: 0;
	height: 100%;
}

.wf-contact-cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	margin-top: 56px !important;
}

.e-con.wf-contact-cards {
	--display: grid;
	--gap: 20px;
}

.wf-contact-card {
	padding: 28px 30px 30px !important;
	border-radius: 28px;
	background: var(--wf-panel);
}

.wf-contact-card :is(h3, .elementor-heading-title) {
	margin: 0 0 14px;
	font-size: var(--fs-h4);
	line-height: 1.25;
}

.wf-contact-card :is(p, a) {
	font-size: var(--fs-small);
}

.wf-contact-card .wf-contact-phone a {
	color: var(--wf-white);
	font-size: var(--fs-h4);
	font-weight: 700;
	text-decoration: none;
}

@media (max-width: 1024px) {
	.wf-contact-cards {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Contact form: service tiles in two columns, tick circle on the right */
.wf-contact-page .forminator-field:has(> .forminator-checkbox) {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.wf-contact-page .forminator-field:has(> .forminator-checkbox) > :not(.forminator-checkbox) {
	grid-column: 1 / -1;
}

.wf-contact-page .forminator-checkbox {
	margin: 0 !important;
	justify-content: space-between;
}

.wf-contact-page .forminator-checkbox .forminator-checkbox-box {
	order: 2;
}

@media (max-width: 600px) {
	.wf-contact-page .forminator-field:has(> .forminator-checkbox) {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Numbered steps: 1. What you need, 2. The details ... */
.wf-contact-page .forminator-pagination-steps {
	counter-reset: wf-step;
}

.wf-contact-page .forminator-step {
	counter-increment: wf-step;
}

.wf-contact-page .forminator-step .forminator-step-label::before {
	content: counter(wf-step) ". ";
}

/* Group headings (What can we help with? and so on) */
.wf-contact-page .forminator-field-group > .forminator-repeater-label {
	margin-bottom: 10px !important;
	font-size: var(--fs-h3) !important;
}

/* Contact form: bring the pills, buttons and notes into line with the labels */
.wf-contact-page .forminator-radio {
	min-height: 42px;
	padding: 8px 16px !important;
}

.wf-contact-page .forminator-radio :is(.forminator-radio-label, span) {
	font-size: 15px !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
}

.wf-contact-page .forminator-button {
	min-height: 48px !important;
	padding: 0 22px !important;
	font-size: 15px !important;
	font-weight: 700 !important;
}

.wf-contact-page .forminator-button-back {
	padding-left: 0 !important;
}

/* HTML blocks inside the form, such as the privacy note */
.wf-contact-page .forminator-field-html,
.wf-contact-page .forminator-field-html :is(p, span, a, div) {
	color: var(--wf-faint) !important;
	font-size: 15px !important;
	line-height: 1.55 !important;
}

.wf-contact-page .forminator-field-html a {
	color: var(--wf-white) !important;
	text-decoration: underline;
}

/* Stop the 24px page text size leaking into the form */
.wf-contact-page .forminator-ui.forminator-custom-form {
	font-size: 17px !important;
}

/* The privacy note doesn't need its "Please Note:" label */
.wf-contact-page .forminator-field-html .forminator-label {
	display: none !important;
}

/* Contact cards with a map: phone and meeting cards stacked on the left,
   the address card and map filling the right-hand side */
.wf-contact-cards:has(iframe) {
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
}

.wf-contact-cards:has(iframe) > .wf-contact-card {
	grid-column: 1;
}

.wf-contact-cards:has(iframe) > .wf-contact-card:has(iframe) {
	display: flex;
	flex-direction: column;
	grid-column: 2;
	grid-row: 1 / span 2;
}

.wf-contact-card:has(iframe) .elementor-widget-google_maps,
.wf-contact-card:has(iframe) .elementor-widget-google_maps :is(.elementor-widget-container, .elementor-custom-embed) {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-height: 280px;
}

.wf-contact-card iframe {
	display: block;
	flex: 1;
	width: 100%;
	height: 100% !important;
	min-height: 280px;
	margin-top: 8px;
	border: 0;
	border-radius: 16px;
}

@media (max-width: 1024px) {
	.wf-contact-cards:has(iframe) {
		grid-template-columns: minmax(0, 1fr);
	}

	.wf-contact-cards:has(iframe) > .wf-contact-card:has(iframe) {
		grid-column: 1;
		grid-row: auto;
	}
}

/* --------------------------------------------------------------------------
   Contact details in the left-hand column (under the headline), so the
   page isn't weighted towards the form side.
   -------------------------------------------------------------------------- */

.wf-contact-details {
	display: grid;
	gap: 22px;
	margin-top: clamp(28px, 3vw, 44px) !important;
}

.e-con.wf-contact-details {
	--display: grid;
	--gap: 22px;
}

.wf-contact-details :is(h3, .elementor-heading-title) {
	margin: 0 0 4px;
	color: var(--wf-faint);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
}

.wf-contact-details p {
	margin: 0;
	font-size: var(--fs-small);
	line-height: 1.5;
}

.wf-contact-details .wf-contact-phone a {
	color: var(--wf-white);
	font-size: var(--fs-h3);
	font-weight: 700;
	line-height: 1.1;
	text-decoration: none;
}

/* Map panel: the map fills a rounded panel with the address on a card */
.wf-map-panel {
	position: relative;
	overflow: hidden;
	padding: 0 !important;
	border-radius: 28px;
	background: var(--wf-panel);
}

.wf-map-panel iframe {
	display: block;
	width: 100%;
	height: clamp(320px, 32vw, 460px) !important;
	border: 0;
}

.wf-map-panel .wf-map-card {
	position: absolute;
	bottom: 24px;
	left: 24px;
	z-index: 2;
	max-width: 360px;
	padding: 24px 26px !important;
	border-radius: 20px;
	background: var(--wf-panel);
}

.wf-map-card :is(h3, .elementor-heading-title) {
	margin: 0 0 8px;
	font-size: var(--fs-h4);
}

.wf-map-card p {
	margin: 0;
	font-size: var(--fs-small);
}

/* Map in the side column, under the contact details */
.wf-contact-side .wf-map-panel {
	margin-top: 28px !important;
}

.wf-contact-side .wf-map-panel iframe {
	height: 280px !important;
}

@media (max-width: 767px) {
	.wf-map-panel .wf-map-card {
		position: static;
		max-width: none;
	}
}

/* --------------------------------------------------------------------------
   Contact page, open layout: big headline across the top, the form on the
   left, and the ways to reach us on the right.
   -------------------------------------------------------------------------- */

.wf-contact-open .wf-contact-intro {
	max-width: 640px;
	margin-bottom: clamp(28px, 3vw, 40px) !important;
}

.wf-contact-open .wf-contact-aside {
	display: grid;
	gap: 32px;
}

.e-con.wf-contact-aside {
	--display: grid;
	--gap: 32px;
}

/* Project lead pill: photo, name, call button */
.wf-lead-pill {
	display: flex !important;
	align-items: center;
	gap: 16px;
	padding: 10px 12px 10px 10px !important;
	border-radius: 999px;
	background: var(--wf-panel);
}

.e-con.wf-lead-pill {
	--flex-direction: row;
	--align-items: center;
	--gap: 16px;
}

.wf-lead-pill img {
	display: block;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	object-fit: cover;
}

.wf-lead-pill .elementor-widget-image {
	flex: none;
	width: auto !important;
}

.wf-lead-pill .elementor-widget-text-editor {
	flex: 1;
}

.wf-lead-pill p {
	margin: 0;
	font-size: 15px;
	line-height: 1.35;
}

.wf-lead-pill p strong {
	display: block;
	color: var(--wf-white);
	font-size: 17px;
}

.wf-lead-pill .elementor-widget-button {
	flex: none;
	width: auto !important;
}

.wf-contact-aside .wf-map-panel iframe {
	height: 300px !important;
}

@media (max-width: 1024px) {
	.wf-contact-open .wf-contact-aside {
		margin-top: 48px !important;
	}
}

/* Contact details in two columns: how to reach us, and where we are */
.wf-contact-details.is-two {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 28px;
	align-items: start;
}

.wf-contact-details.is-two > * {
	display: grid;
	gap: 22px;
}

.e-con.wf-contact-details.is-two > .e-con {
	--display: grid;
	--gap: 22px;
}

.wf-contact-details.is-two p {
	font-size: 17px;
	overflow-wrap: anywhere;
}

.wf-contact-details.is-two .wf-contact-phone a {
	font-size: var(--fs-h4);
}

@media (max-width: 480px) {
	.wf-contact-details.is-two {
		grid-template-columns: minmax(0, 1fr);
	}
}

.wf-contact-aside .wf-contact-details {
	margin-top: 0 !important;
}

/* Contact page, signed-off layout (3 November 2026): headline and intro
   across the top, form at 60%, then the project lead and contact details */
.wf-contact-open .wf-contact-top {
	margin-bottom: clamp(40px, 4vw, 56px) !important;
}

.wf-contact-open .wf-contact-top .wf-lead {
	max-width: 860px;
}

.wf-contact-open .wf-contact-layout {
	display: grid;
	grid-template-columns: 60% minmax(0, 1fr);
	column-gap: clamp(48px, 6vw, 96px);
	align-items: start;
}

.e-con.wf-contact-open .wf-contact-layout,
.wf-contact-open .e-con.wf-contact-layout {
	--display: grid;
}

.wf-contact-open .wf-lead-pill {
	display: inline-flex !important;
	align-self: start;
	justify-self: start;
	width: auto !important;
	padding-right: 28px !important;
}

@media (max-width: 1024px) {
	.wf-contact-open .wf-contact-layout {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 48px;
	}

	.wf-ribbon-contact.wf-contact-open .wf-ribbon {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   Key contacts (About page): round headshot beside name, role and a line
   -------------------------------------------------------------------------- */

.wf-people {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(32px, 4vw, 64px);
}

.e-con.wf-people {
	--display: grid;
	--gap: clamp(32px, 4vw, 64px);
}

.wf-person {
	display: grid !important;
	grid-template-columns: 120px minmax(0, 1fr);
	gap: 28px;
	align-items: start;
}

.e-con.wf-person {
	--display: grid;
	--gap: 28px;
}

.wf-person .elementor-widget-image {
	width: 120px !important;
}

.wf-person img {
	display: block;
	width: 120px;
	height: 120px;
	border-radius: 50%;
	object-fit: cover;
	background: var(--wf-panel-raised);
}

.wf-person :is(h3, .elementor-heading-title) {
	margin: 0 0 4px;
	font-size: var(--fs-h3);
}

.wf-person .wf-person-role p {
	margin: 0 0 16px;
	color: var(--wf-faint);
	font-size: 16px;
	font-weight: 600;
}

.wf-person p {
	font-size: var(--fs-small);
	line-height: 1.6;
}

@media (max-width: 1024px) {
	.wf-people {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 480px) {
	.wf-person {
		grid-template-columns: 88px minmax(0, 1fr);
		gap: 20px;
	}

	.wf-person .elementor-widget-image,
	.wf-person img {
		width: 88px !important;
		height: 88px;
	}
}

/* --------------------------------------------------------------------------
   Homepage: three icon points and the Rich and Emily pills under them
   -------------------------------------------------------------------------- */

.wf-icon-points {
	column-gap: clamp(32px, 4vw, 56px);
	row-gap: 40px;
}

.wf-icon-points .wf-lucide {
	display: inline-flex;
	margin-bottom: 14px;
	color: var(--svc-soft, #F5BCD8);
}

.wf-icon-points :is(h3, .elementor-heading-title) {
	margin: 0 0 10px;
	font-size: var(--fs-h4);
	line-height: 1.25;
}

.wf-icon-points p {
	font-size: var(--fs-small);
}

.wf-people-row {
	display: flex !important;
	flex-wrap: wrap;
	gap: 16px;
}

.e-con.wf-people-row {
	--flex-direction: row;
	--flex-wrap: wrap;
	--gap: 16px;
}

.wf-people-row .wf-lead-pill {
	width: auto !important;
}

.wf-lead-pill.is-small {
	gap: 14px;
	padding: 8px 24px 8px 8px !important;
}

.wf-lead-pill.is-small img {
	width: 52px;
	height: 52px;
}