/* ==========================================================================
   Webforward: components
   Buttons, links, cards, accordion, ribbon headers, CTA, testimonials,
   case study cards, logos and the Google badge.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Buttons

   .wf-button works on a plain link and on an Elementor Button widget (put
   the class in Advanced > CSS Classes). The gradient follows the page
   colour, so on a service page it switches to that service automatically.
   -------------------------------------------------------------------------- */

.wf-button,
.wf-btn,
.elementor-widget-button:is(.wf-button, .wf-button-white, .wf-button-on-dark, .wf-button-dark) .elementor-button,
.wf-theme .elementor-widget-button:not([class*="wf-"]) .elementor-button,
.wf-menu-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 56px;
	padding: 0 30px;
	border: 0;
	border-radius: var(--wf-radius-sm);
	background-color: var(--svc-1);
	background-image: var(--svc-sweep);
	background-size: 200% 100%;
	background-position: 0 0;
	color: var(--svc-ink);
	font-family: var(--wf-font);
	font-size: 19px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-position 0.45s ease, transform 0.2s ease;
}

.wf-button:hover,
.wf-button:focus-visible,
.wf-btn:hover,
.elementor-widget-button:is(.wf-button, .wf-button-white, .wf-button-on-dark, .wf-button-dark) .elementor-button:hover,
.wf-theme .elementor-widget-button:not([class*="wf-"]) .elementor-button:hover,
.wf-menu-button:hover {
	background-position: 100% 0;
	color: var(--svc-ink);
	transform: translateY(-2px);
}

/* The Elementor widget wrapper shouldn't look like a button itself. */
.elementor-widget-button:is(.wf-button, .wf-button-white, .wf-button-on-dark, .wf-button-dark) {
	display: block;
	min-height: 0;
	padding: 0;
	background: none;
	transform: none;
}

/* White button, for the CTA panel and other coloured panels */
.wf-button.is-white,
.elementor-widget-button:is(.wf-button-white, .wf-button-on-dark) .elementor-button {
	background: var(--wf-white);
	color: var(--wf-ink);
}

.wf-button.is-white:hover,
.elementor-widget-button:is(.wf-button-white, .wf-button-on-dark) .elementor-button:hover {
	color: var(--wf-ink);
}

/* Dark button, for light service gradients and light sections */
.wf-button.is-dark,
.elementor-widget-button.wf-button-dark .elementor-button {
	background: var(--wf-ink);
	color: var(--wf-white);
}

.wf-button.is-dark:hover,
.elementor-widget-button.wf-button-dark .elementor-button:hover {
	color: var(--wf-white);
}

.wf-button-small { min-height: 44px; padding: 0 20px; font-size: 16px; }
.wf-button-large { min-height: 60px; padding: 0 34px; }
.wf-button-full { width: 100%; }

.elementor-widget-button.wf-button-small .elementor-button { min-height: 44px; padding: 0 20px; font-size: 16px; }
.elementor-widget-button.wf-button-full .elementor-button { width: 100%; }

.wf-button-group,
.wf-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 28px;
}

.wf-button-group.is-center { justify-content: center; }
.wf-button-group.is-end { justify-content: flex-end; }

/* --------------------------------------------------------------------------
   Arrow links

   Text with a white circle and arrow. On hover the circle turns 45 degrees
   and fills with the page gradient.

   On an Elementor Button widget add wf-link (the old wf-button-link,
   wf-button-secondary and wf-button-outline classes do the same now).
   -------------------------------------------------------------------------- */

.wf-link,
.elementor-widget-button:is(.wf-link, .wf-button-link, .wf-button-secondary, .wf-button-outline, .wf-button-secondary-on-dark) .elementor-button {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	min-height: 48px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--wf-white);
	font-family: var(--wf-font);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	text-decoration: none;
}

.wf-link:hover,
.elementor-widget-button:is(.wf-link, .wf-button-link, .wf-button-secondary, .wf-button-outline, .wf-button-secondary-on-dark) .elementor-button:hover {
	color: var(--wf-white);
}

.wf-arrow {
	position: relative;
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: var(--wf-white);
	color: var(--wf-ink);
	overflow: hidden;
	transition: transform 0.25s ease, color 0.25s ease;
}

.wf-arrow::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: var(--svc-gradient);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.wf-arrow svg {
	position: relative;
}

:is(.wf-link, a):hover > .wf-arrow,
:is(.wf-link, a):focus-visible > .wf-arrow {
	color: var(--svc-ink);
	transform: rotate(45deg);
}

:is(.wf-link, a):hover > .wf-arrow::before,
:is(.wf-link, a):focus-visible > .wf-arrow::before {
	opacity: 1;
}

/* Elementor buttons can't hold our span, so draw the circle after the text. */
.elementor-widget-button:is(.wf-link, .wf-button-link, .wf-button-secondary, .wf-button-outline, .wf-button-secondary-on-dark) .elementor-button::after {
	content: "";
	flex: none;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: var(--wf-arrow-dark) center / 16px no-repeat, var(--wf-white);
	transition: transform 0.25s ease;
}

.elementor-widget-button:is(.wf-link, .wf-button-link, .wf-button-secondary, .wf-button-outline, .wf-button-secondary-on-dark) .elementor-button:hover::after,
:is(.wf-card, .wf-doorway-card, .wf-card-link, .wf-card-feature, .wf-card-editorial, .wf-card-product):hover .elementor-widget-button:is(.wf-link, .wf-button-link, .wf-button-secondary, .wf-button-outline) .elementor-button::after {
	background: var(--svc-arrow) center / 16px no-repeat, var(--svc-gradient);
	transform: rotate(45deg);
}

/* Elementor puts its own icon in; the circle replaces it. */
/* Arrow links read left to right, even when the text wraps. */
.elementor-widget-button:is(.wf-link, .wf-button-link, .wf-button-secondary, .wf-button-outline, .wf-button-secondary-on-dark) .elementor-button {
	justify-content: flex-start;
	text-align: left;
}

.elementor-widget-button:is(.wf-link, .wf-button-link, .wf-button-secondary, .wf-button-outline) .elementor-button-icon {
	display: none;
}

/* On light sections the circle flips to dark. */
:is(.wf-surface-light, .wf-surface-white, .wf-surface-pale, .wf-bg-alt, .wf-surface-tint) :is(.wf-link, .elementor-button) {
	color: var(--wf-ink);
}

:is(.wf-surface-light, .wf-surface-white, .wf-surface-pale, .wf-bg-alt, .wf-surface-tint, .is-light, .wf-card-product.is-neutral) .wf-arrow {
	background: var(--wf-ink);
	color: var(--wf-white);
}

/* Small back link (case studies, breadcrumbs) */
.wf-back {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--wf-muted);
	font-size: 16px;
	text-decoration: none;
}

/* --------------------------------------------------------------------------
   Cards

   One look, built from the homepage door card: #160355, 22px corners,
   flat, no borders. On hover the card lifts 3px, its text warms to the
   card's colour and the arrow fills with it.

   Add is-light for the white version on light sections.
   Set a card's colour with a wf-colour-* class; otherwise it follows the
   page (magenta on general pages).
   -------------------------------------------------------------------------- */

.wf-card,
.wf-card-outline,
.wf-doorway-card,
.wf-card-link,
.wf-card-feature,
.wf-card-editorial,
.wf-card-product {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: 36px;
	border-radius: var(--wf-radius);
	background: var(--wf-panel);
	color: var(--wf-white);
	text-decoration: none;
	overflow: hidden;
	transition: transform 0.25s ease, color 0.25s ease;
}

/* Elementor containers carry their own padding and background settings. */
.e-con:is(.wf-card, .wf-card-outline, .wf-doorway-card, .wf-card-link, .wf-card-feature, .wf-card-editorial, .wf-card-product) {
	--padding-top: 36px;
	--padding-right: 36px;
	--padding-bottom: 36px;
	--padding-left: 36px;
	--background-color: var(--wf-panel);
	--border-radius: var(--wf-radius);
}

a:is(.wf-card, .wf-doorway-card, .wf-card-link, .wf-card-feature, .wf-card-editorial, .wf-card-product):hover,
a:is(.wf-card, .wf-doorway-card, .wf-card-link, .wf-card-feature, .wf-card-editorial, .wf-card-product):focus-visible,
:is(.wf-card, .wf-doorway-card, .wf-card-link, .wf-card-feature, .wf-card-editorial, .wf-card-product):has(a):hover,
:is(.wf-card, .wf-doorway-card, .wf-card-link, .wf-card-feature, .wf-card-editorial, .wf-card-product):has(a:focus-visible) {
	color: var(--svc-soft);
	transform: translateY(-3px);
}

/* The whole card is the link: the card's last link stretches over it, so
   the card moves and clicks as one. Other links in the card sit above it
   and still work. */
:is(.wf-card, .wf-doorway-card, .wf-card-link, .wf-card-feature, .wf-card-editorial, .wf-card-product) > :is(.elementor-widget, .wf-card-foot):last-child {
	position: static;
}

:is(.wf-card, .wf-doorway-card, .wf-card-link, .wf-card-feature, .wf-card-editorial, .wf-card-product) > :is(.elementor-widget, .wf-card-foot):last-child a::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

:is(.wf-card, .wf-doorway-card, .wf-card-link, .wf-card-feature, .wf-card-editorial, .wf-card-product) a {
	position: relative;
	z-index: 2;
}

:is(.wf-card, .wf-doorway-card, .wf-card-link, .wf-card-feature, .wf-card-editorial, .wf-card-product) > :is(.elementor-widget, .wf-card-foot):last-child a {
	position: static;
}

:is(.wf-card, .wf-doorway-card, .wf-card-link, .wf-card-feature, .wf-card-editorial, .wf-card-product):hover :is(.wf-card-title, h2, h3, h4, .elementor-heading-title, .wf-card-foot) {
	color: inherit;
}

.wf-card-label {
	display: block;
	margin-bottom: 12px;
	color: var(--wf-muted);
	font-size: 16px;
}

.wf-card-title,
:is(.wf-card, .wf-doorway-card, .wf-card-feature, .wf-card-editorial, .wf-card-product) :is(h2, h3, .elementor-heading-title) {
	display: block;
	margin: 0 0 16px;
	color: var(--wf-white);
	font-size: var(--fs-h3);
	line-height: 1.2;
	transition: color 0.25s ease;
}

.wf-card-text,
:is(.wf-card, .wf-doorway-card, .wf-card-link, .wf-card-feature, .wf-card-editorial, .wf-card-product, .wf-card-icon) :is(p, .elementor-widget-text-editor) {
	display: block;
	margin: 0;
	color: var(--wf-text);
	font-size: var(--fs-small);
	line-height: 1.5;
}

.wf-card-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: auto;
	padding-top: 28px;
	font-size: 18px;
	font-weight: 700;
}

/* The last link or button in a card sits at the bottom, so links line up
   across a row even when one card has more text. */
:is(.wf-card, .wf-doorway-card, .wf-card-link, .wf-card-feature, .wf-card-editorial, .wf-card-product) > :is(.elementor-widget-button, .wf-card-foot, .wf-link):last-child {
	/* Elementor sets its own widget margins, so this has to win. */
	margin-top: auto !important;
}

/* Card titles follow their tag: H4 and below use the small title size. */
:is(.wf-card, .wf-doorway-card, .wf-card-link, .wf-card-feature, .wf-card-editorial, .wf-card-product) :is(h4, h5, h6, h4.elementor-heading-title, h5.elementor-heading-title, h6.elementor-heading-title) {
	font-size: var(--fs-h4);
	line-height: 1.3;
}

/* Keeps short and long titles the same height across a row, so the text
   under them starts on the same line. Add to the heading widget. */
.wf-title-2 .elementor-heading-title,
h2.wf-title-2,
h3.wf-title-2,
h4.wf-title-2 {
	min-height: calc(2em * 1.3);
}

/* A Lucide icon at the top of a card */
:is(.wf-card, .wf-doorway-card, .wf-card-link, .wf-card-feature, .wf-card-editorial, .wf-card-product) .wf-lucide {
	display: block;
	margin-bottom: 8px;
	color: var(--svc-text);
}

.wf-card-foot .wf-arrow,
.wf-card-link .wf-arrow {
	width: 44px;
	height: 44px;
}

/* A plain link typed into a card's text (as on the homepage door cards)
   becomes the card's footer link, with the arrow circle after it. */
:is(.wf-card, .wf-doorway-card, .wf-card-feature, .wf-card-editorial, .wf-card-product) .elementor-widget-text-editor a:not([class]) {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	color: var(--wf-white);
	font-weight: 700;
	text-decoration: none;
}

:is(.wf-card, .wf-doorway-card, .wf-card-feature, .wf-card-editorial, .wf-card-product) .elementor-widget-text-editor a:not([class])::after {
	content: "";
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--wf-arrow-dark) center / 16px no-repeat, var(--wf-white);
	transition: transform 0.25s ease;
}

:is(.wf-card, .wf-doorway-card, .wf-card-feature, .wf-card-editorial, .wf-card-product) .elementor-widget-text-editor a:not([class]):hover::after,
:is(.wf-card, .wf-doorway-card, .wf-card-feature, .wf-card-editorial, .wf-card-product):hover .elementor-widget-text-editor a:not([class])::after {
	background: var(--svc-arrow) center / 16px no-repeat, var(--svc);
	transform: rotate(45deg);
}

/* Elementor versions of the card parts (see the templates). */
:is(.wf-card, .wf-doorway-card, .wf-card-link, .wf-card-feature, .wf-card-editorial, .wf-card-product) .wf-eyebrow :is(p, .elementor-widget-container) {
	margin: 0 0 12px;
	color: var(--wf-muted);
	font-size: 16px;
}

:is(.wf-card, .wf-doorway-card, .wf-card-feature, .wf-card-editorial, .wf-card-product):is(.is-light, .is-neutral) .wf-eyebrow :is(p, .elementor-widget-container) {
	color: var(--wf-ink-muted);
}

.elementor-widget.wf-card-foot {
	display: block;
	margin-top: auto;
}

.wf-card-foot a:not([class]) {
	display: flex;
	justify-content: space-between;
	width: 100%;
}

:is(.wf-card, .wf-doorway-card, .wf-card-feature, .wf-card-editorial, .wf-card-product):is(.is-light, .is-neutral) .elementor-widget-text-editor a:not([class]) {
	color: var(--wf-ink);
}

:is(.wf-card, .wf-doorway-card, .wf-card-feature, .wf-card-editorial, .wf-card-product):is(.is-light, .is-neutral) .elementor-widget-text-editor a:not([class])::after {
	background: var(--wf-arrow-white) center / 16px no-repeat, var(--wf-ink);
}

.wf-card-icon__icon .elementor-icon {
	color: inherit;
	font-size: 32px;
}

.wf-card-icon__icon .elementor-icon svg {
	width: 32px;
	height: 32px;
	fill: currentColor;
}

:is(.wf-card-media, .wf-card-product__media) :is(.elementor-widget-image, .elementor-widget-container, .elementor-widget-image a) {
	height: 100%;
}

:is(.wf-card-media, .wf-card-product__media) .elementor-widget-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: left top;
}

.wf-card-product .wf-card-product__media {
	width: 100%;
}

/* The card's arrow fills with the card colour, not the page gradient. */
:is(.wf-card, .wf-doorway-card, .wf-card-link, .wf-card-feature, .wf-card-editorial, .wf-card-product):hover .wf-arrow {
	background: var(--svc);
	color: var(--svc-ink);
	transform: rotate(45deg);
}

:is(.wf-card, .wf-doorway-card, .wf-card-link, .wf-card-feature, .wf-card-editorial, .wf-card-product):hover .wf-arrow::before {
	opacity: 0;
}

/* Outline: same layout, no fill */
.wf-card-outline {
	background: transparent;
	box-shadow: inset 0 0 0 1px var(--wf-line);
}

.e-con.wf-card-outline {
	--background-color: transparent;
}

/* Icon card: a line icon in the page colour, a title, a short line of
   text and a thin rule underneath. No panel and no box behind the icon.
   Use a Lucide icon through [wf_icon name="server"], or Elementor's icon
   widget. Add no-rule to drop the line. */
.wf-card-icon {
	display: flex;
	flex-direction: column;
	gap: 0;
	padding: 0 0 40px;
	border-bottom: 1px solid var(--wf-line);
	background: none;
}

.e-con.wf-card-icon {
	--padding-top: 0px;
	--padding-right: 0px;
	--padding-bottom: 40px;
	--padding-left: 0px;
	--gap: 0px;
	--row-gap: 0px;
	--background-color: transparent;
}

.wf-card-icon.no-rule {
	padding-bottom: 0;
	border-bottom: 0;
}

.wf-card-icon__icon,
.wf-card-icon > .wf-icon,
.wf-card-icon .wf-lucide {
	display: block;
	margin: 0 0 24px;
	color: var(--svc-text);
}

.wf-card-icon__icon :is(svg, img, i),
.wf-card-icon .wf-lucide svg {
	width: 32px;
	height: 32px;
	font-size: 32px;
}

.wf-card-icon :is(h2, h3, h4, .elementor-heading-title) {
	margin: 0 0 12px;
	color: var(--wf-white);
	font-size: var(--fs-h4);
	line-height: 1.3;
}

.wf-card-icon .elementor-widget:not(:last-child) {
	margin-bottom: 0;
}

/* Link card: short title and a line, arrow on the right */
.wf-card-link {
	flex-direction: row;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
	padding: 30px 32px;
}

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

.e-con.wf-card-link {
	--flex-direction: row;
	--padding-top: 30px;
	--padding-right: 32px;
	--padding-bottom: 30px;
	--padding-left: 32px;
}

/* Image cards: photo across the top, then the text */
.wf-card-feature .wf-card-media,
.wf-card-editorial .wf-card-media {
	display: block;
	height: 260px;
	margin: -36px -36px 32px;
	overflow: hidden;
	background: var(--wf-panel-raised);
}

.wf-card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Product card: text at the top, screenshot running off the bottom right */
.wf-card-product {
	padding: 40px 0 0 40px;
	min-height: 480px;
}

.wf-card-product > :not(.wf-card-media):not(.wf-card-product__media) {
	padding-right: 40px;
}

.wf-card-product :is(.wf-card-media, .wf-card-product__media) {
	display: block;
	height: 250px;
	margin-top: auto;
	padding-top: 32px;
}

.wf-card-product :is(.wf-card-media, .wf-card-product__media) img {
	width: 100%;
	height: 100%;
	border-radius: 16px 0 0 0;
	object-fit: cover;
	object-position: left top;
}

.e-con.wf-card-product {
	--padding-top: 40px;
	--padding-right: 0px;
	--padding-bottom: 0px;
	--padding-left: 40px;
}

/* The old tone classes now pick one of the two families. */
.wf-card-product.is-neutral,
:is(.wf-card, .wf-card-outline, .wf-doorway-card, .wf-card-link, .wf-card-feature, .wf-card-editorial, .wf-card-product).is-light {
	background: var(--wf-white);
	color: var(--wf-ink);
	box-shadow: 0 1px 0 #e4e0f0, 0 12px 32px rgba(22, 0, 69, 0.08);
}

.e-con:is(.wf-card, .wf-doorway-card, .wf-card-link, .wf-card-feature, .wf-card-editorial, .wf-card-product):is(.is-light, .is-neutral) {
	--background-color: #fff;
}

:is(.wf-card, .wf-doorway-card, .wf-card-link, .wf-card-feature, .wf-card-editorial, .wf-card-product):is(.is-light, .is-neutral) :is(.wf-card-title, h2, h3, h4, .elementor-heading-title) {
	color: var(--wf-ink);
}

:is(.wf-card, .wf-doorway-card, .wf-card-link, .wf-card-feature, .wf-card-editorial, .wf-card-product):is(.is-light, .is-neutral) :is(.wf-card-text, p, .elementor-widget-text-editor) {
	color: var(--wf-ink-text);
}

:is(.wf-card, .wf-doorway-card, .wf-card-link, .wf-card-feature, .wf-card-editorial, .wf-card-product):is(.is-light, .is-neutral) .wf-card-label {
	color: var(--wf-ink-muted);
}

/* White cards keep their text dark on hover; only the arrow takes the colour. */
a:is(.wf-card, .wf-doorway-card, .wf-card-link, .wf-card-feature, .wf-card-editorial, .wf-card-product):is(.is-light, .is-neutral):hover {
	color: var(--wf-ink);
}

/* Cards placed straight into a wf-grid stretch to the same height. */
.wf-grid > :is(.wf-card, .wf-doorway-card, .wf-card-link, .wf-card-feature, .wf-card-editorial, .wf-card-product) {
	height: 100%;
}

/* --------------------------------------------------------------------------
   Accordion

   Works with the Elementor nested Accordion widget (add wf-accordion in
   Advanced > CSS Classes) and with plain <details> inside .wf-accordion.
   Each question is a dark panel. The open one picks up a wash of the page
   colour so it's clear which is open. Lilac arrow that points down-right
   when closed and turns up-right when open.
   -------------------------------------------------------------------------- */

.wf-accordion .e-n-accordion,
.wf-accordion .elementor-accordion,
.wf-accordion:not(.elementor-widget) {
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: 100%;
}

.wf-accordion :is(details, .e-n-accordion-item, .elementor-accordion-item) {
	position: relative;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 18px;
	background: var(--wf-panel);
	overflow: hidden;
	transition: background-color 0.3s ease;
}

.wf-accordion :is(details[open], .e-n-accordion-item[open], .elementor-accordion-item:has(.elementor-active)) {
	background:
		radial-gradient(120% 160% at 100% 0%, color-mix(in srgb, var(--svc) 26%, transparent) 0%, transparent 60%),
		var(--wf-panel);
}

.wf-accordion :is(summary, .e-n-accordion-item-title, .elementor-tab-title) {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	width: 100%;
	padding: 28px 32px;
	border: 0;
	background: none;
	color: var(--wf-white);
	font-family: var(--wf-font);
	font-size: var(--fs-h4);
	font-weight: 600;
	line-height: 1.35;
	list-style: none;
	cursor: pointer;
}

/* Elementor colours the titles through its own variables; point them at ours. */
.wf-accordion {
	--n-accordion-title-normal-color: var(--wf-white);
	--n-accordion-title-hover-color: var(--wf-pink);
	--n-accordion-title-active-color: var(--wf-white);
	--n-accordion-icon-normal-color: var(--wf-muted);
	--n-accordion-icon-active-color: var(--wf-muted);
	--n-accordion-border-width: 0;
	--n-accordion-item-title-space-between: 0;
}

.wf-accordion .e-n-accordion-item-title {
	justify-content: space-between !important;
	color: var(--wf-white) !important;
}

.wf-accordion .e-n-accordion-item-title-header {
	flex: 1 1 auto;
}

.wf-accordion summary::-webkit-details-marker {
	display: none;
}

.wf-accordion :is(.e-n-accordion-item-title-text, .elementor-accordion-title) {
	color: inherit !important;
	font: inherit !important;
	transition: color 0.2s ease;
}

.wf-accordion :is(summary, .e-n-accordion-item-title, .elementor-tab-title):hover,
.wf-accordion :is(summary, .e-n-accordion-item-title):hover .e-n-accordion-item-title-text {
	color: var(--wf-pink) !important;
}

/* Swap whatever icon Elementor renders for our arrow. */
.wf-accordion :is(.e-n-accordion-item-title-icon, .elementor-accordion-icon) {
	order: 2;
	display: block;
	flex: none;
	width: 28px;
	height: 28px;
	font-size: 0;
}

.wf-accordion :is(.e-n-accordion-item-title-icon, .elementor-accordion-icon) > * {
	display: none !important;
}

.wf-accordion summary:not(.e-n-accordion-item-title)::after,
.wf-accordion :is(.e-n-accordion-item-title-icon, .elementor-accordion-icon)::before {
	content: "";
	flex: none;
	display: block;
	width: 28px;
	height: 28px;
	background: var(--wf-muted);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 9v8H9'/%3E%3C/svg%3E") center / 20px no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 9v8H9'/%3E%3C/svg%3E") center / 20px no-repeat;
	transition: transform 0.3s ease;
}

.wf-accordion summary:not(.e-n-accordion-item-title):hover::after,
.wf-accordion :is(summary, .e-n-accordion-item-title):hover .e-n-accordion-item-title-icon::before {
	transform: translate(2px, 2px);
}

.wf-accordion details[open] > summary:not(.e-n-accordion-item-title)::after,
.wf-accordion .e-n-accordion-item[open] > .e-n-accordion-item-title .e-n-accordion-item-title-icon::before,
.wf-accordion .elementor-tab-title.elementor-active .elementor-accordion-icon::before {
	transform: rotate(-90deg);
}

.wf-accordion :is(details > :not(summary), .e-n-accordion-item > .e-con, .elementor-tab-content) {
	margin: 0;
	padding: 0 96px 32px 32px;
	border: 0;
	background: none;
	color: var(--wf-text);
	font-size: var(--fs-small);
	line-height: 1.6;
}

.wf-accordion .e-n-accordion-item > .e-con {
	--padding-top: 0px;
	--padding-right: 96px;
	--padding-bottom: 32px;
	--padding-left: 32px;
	--border-width: 0;
	width: 100%;
	max-width: none;
}

.wf-accordion :is(.e-n-accordion-item > .e-con, .elementor-tab-content) :is(p, .elementor-widget-text-editor) {
	color: var(--wf-text);
	font-size: var(--fs-small);
}

/* FAQ section: heading and contact note on the left, questions on the right */
.wf-faq {
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
	gap: 64px;
	align-items: start;
}

.wf-faq-side {
	position: sticky;
	top: 40px;
	display: flex;
	flex-direction: column;
	gap: 32px;
}

/* The contact note. Its round photo comes from FAQ Contact Photos in the
   Customizer: a default, or the service's own photo on pages with that
   colour class. With no photo set it shows a person icon.

   To show someone else, or several people, on one page: make wf-faq-note
   a container holding one or more Image widgets, then the text. */
.wf-faq-note,
.wf-faq-note > .elementor-widget-container {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	max-width: 440px;
}

.e-con.wf-faq-note {
	--flex-direction: row;
	--align-items: flex-start;
	--gap: 16px;
}

.wf-faq-note.elementor-widget-text-editor {
	display: block;
}

.wf-faq-note.elementor-widget-text-editor > .elementor-widget-container::before {
	content: "";
	flex: none;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background:
		var(--wf-faq-photo, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239f94cf' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='12' cy='9' r='4'/%3E%3Cpath d='M4.5 20c1.4-3.3 4.2-5 7.5-5s6.1 1.7 7.5 5'/%3E%3C/svg%3E")) center / var(--wf-faq-photo-size, 28px) no-repeat,
		var(--wf-panel-raised);
}

.wf-faq-note img {
	flex: none;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	object-fit: cover;
}

.wf-faq-note .elementor-widget-image {
	flex: none;
	width: 56px;
	margin: 0;
}

/* Several people: the photos overlap in a small group, each with a ring
   in the page background so they read as separate faces. */
.wf-faq-note .elementor-widget-image + .elementor-widget-image {
	margin-left: -32px;
}

.wf-faq-note .elementor-widget-image + .elementor-widget-image img,
.wf-faq-note .elementor-widget-image:has(+ .elementor-widget-image) img {
	box-shadow: 0 0 0 3px var(--wf-blue);
}

.wf-faq-note strong {
	display: block;
	margin-bottom: 4px;
	font-size: 18px;
}

.wf-faq-note p {
	color: var(--wf-muted);
	font-size: 17px;
	line-height: 1.55;
}

.wf-faq-note a {
	font-weight: 600;
}

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

	.wf-faq-side {
		position: static;
	}

	.wf-accordion :is(summary, .e-n-accordion-item-title, .elementor-tab-title) {
		padding: 22px 24px;
	}

	.wf-accordion :is(details > :not(summary), .e-n-accordion-item > .e-con, .elementor-tab-content) {
		padding: 0 24px 24px;
	}

	.wf-accordion .e-n-accordion-item > .e-con {
		--padding-right: 24px;
		--padding-bottom: 24px;
		--padding-left: 24px;
	}
}

/* --------------------------------------------------------------------------
   Ribbon headers

   site.js draws the ribbon into any element with one of these classes:
     wf-ribbon-hero    homepage hero, full rainbow, sweeping behind the cards
     wf-ribbon-header  service and industry pages, ribbon along the bottom
                       as the divider (uses the page colour; add is-rainbow
                       for the full rainbow on industry pages)
     wf-ribbon-tiles   service header with screenshots, ribbon behind them
   -------------------------------------------------------------------------- */

:is(.wf-ribbon-hero, .wf-ribbon-header, .wf-ribbon-tiles) {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.wf-ribbon {
	position: absolute;
	left: 0;
	z-index: -1;
	width: 100%;
	pointer-events: none;
}

.wf-ribbon-hero .wf-ribbon {
	top: 380px;
	height: 900px;
}

.wf-ribbon-header {
	padding-bottom: clamp(200px, 22vw, 340px) !important;
}

.wf-ribbon-header .wf-ribbon {
	bottom: -30px;
	height: clamp(260px, 28vw, 420px);
}

.wf-ribbon-tiles .wf-ribbon {
	bottom: 40px;
	height: 420px;
}

.wf-ribbon-hero.is-rainbow,
.wf-ribbon-header.is-rainbow,
.wf-ribbon-hero {
	--rib: #ffd100, #fe5000, #ce0058, #6d2077, #2e008b, #005eb8, #009fdf, #009ca6, #84bd00;
}

/* Page header (general pages, no ribbon) */
.wf-page-header {
	padding-block: var(--wf-pad-md) var(--wf-pad-sm);
}

.wf-page-header h1,
.wf-page-title {
	max-width: 960px;
	margin: 0;
	font-size: var(--fs-h1);
	line-height: 1.1;
}

.wf-page-header .wf-lead {
	max-width: 720px;
	margin-top: 22px;
}

/* "Talk to your project lead" on the right of a service header */
.wf-header-phone {
	text-align: right;
}

@media (max-width: 767px) {
	.wf-header-phone {
		text-align: left;
	}
}

.wf-header-phone span {
	display: block;
	color: var(--wf-muted);
	font-size: 15px;
}

.wf-header-phone a {
	color: var(--svc-text);
	font-size: var(--fs-h4);
	font-weight: 600;
	text-decoration: none;
}

/* Section heading with a link on the right */
.wf-section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px 32px;
	margin-bottom: 48px;
}

.wf-section-head h2 {
	margin: 0;
}

/* Rows with a thin rule above each, like "How we help" */
.wf-rows > * {
	padding-block: 40px;
	border-top: 1px solid var(--wf-line);
}

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

/* --------------------------------------------------------------------------
   CTA panel

   The page gradient on the left, fading into a second gradient on the
   right. Text stays on the solid side.
   -------------------------------------------------------------------------- */

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

.wf-cta-panel,
.wf-cta-band {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	min-height: 460px;
	padding: clamp(48px, 7vw, 96px) clamp(28px, 6vw, 80px);
	border-radius: var(--wf-radius-lg);
	background: linear-gradient(120deg, var(--svc-1) 0%, var(--svc-2) 33%, var(--svc-3) 67%, var(--svc-4) 100%);
	color: var(--svc-ink);
}

.wf-cta-panel,
.wf-cta-band {
	background: linear-gradient(120deg, var(--svc-1) 0%, var(--svc-2) 33%, var(--svc-3) 67%, var(--svc-4) 100%) !important;
}

/* The band is the older full-width version; it now sits in the container like
   the panel. Elementor sets its own width on containers, hence the !important. */
.wf-cta-band,
.e-con.wf-cta-band {
	width: calc(100% - 2 * var(--wf-gutter)) !important;
	max-width: calc(var(--wf-width) - 2 * var(--wf-gutter)) !important;
	margin: var(--wf-pad-sm) auto var(--wf-pad-lg) !important;
}

.wf-cta-panel::after,
.wf-cta-band::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: -1;
	width: 64%;
	background: linear-gradient(120deg, var(--cta));
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 62%);
	mask-image: linear-gradient(90deg, transparent 0%, #000 62%);
}

.wf-cta-copy {
	display: flex;
	flex-direction: column;
	gap: 22px;
	max-width: 620px;
}

.wf-cta-panel :is(h2, .elementor-heading-title),
.wf-cta-band :is(h2, .elementor-heading-title) {
	margin: 0;
	color: inherit;
	font-size: var(--fs-h2);
	line-height: 1.1;
}

.wf-cta-panel :is(p, .elementor-widget-text-editor),
.wf-cta-band :is(p, .elementor-widget-text-editor) {
	margin: 0;
	color: inherit;
	opacity: 0.9;
	font-size: var(--fs-intro);
	line-height: 1.45;
}

.wf-cta-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 24px;
	margin-top: 14px;
}

.wf-cta-panel .wf-link {
	color: inherit;
}

/* White button on the darker gradients, dark on the light ones (lime, teal, gold). */
:is(.wf-cta-panel, .wf-cta-band) .wf-button.is-white {
	background: var(--svc-ink);
	color: var(--svc-ink-alt);
}

:is(.wf-cta-panel, .wf-cta-band) .wf-arrow {
	background: var(--svc-ink);
	color: var(--svc-ink-alt);
}

@media (max-width: 767px) {
	.wf-cta-panel::after,
	.wf-cta-band::after {
		width: 100%;
		-webkit-mask-image: linear-gradient(180deg, transparent 40%, #000 100%);
		mask-image: linear-gradient(180deg, transparent 40%, #000 100%);
	}
}

/* --------------------------------------------------------------------------
   Testimonials ([wf_testimonials] from the Webforward Content plugin)
   -------------------------------------------------------------------------- */

.wf-testimonials {
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
	gap: 56px;
	align-items: start;
}

.wf-testimonials-intro {
	display: flex;
	flex-direction: column;
	gap: 28px;
	padding-top: 8px;
}

.wf-testimonials-intro h2 {
	margin: 0;
}

.wf-testimonials-nav {
	display: flex;
	gap: 12px;
	margin-top: 20px;
}

.wf-testimonials-nav button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--wf-white);
	color: var(--wf-ink);
	cursor: pointer;
	transition: background 0.25s ease, color 0.25s ease;
}

.wf-testimonials-nav button:hover {
	background: var(--svc-gradient);
	color: var(--svc-ink);
}

.wf-testimonials-nav button:disabled {
	background: rgba(255, 255, 255, 0.14);
	color: rgba(255, 255, 255, 0.4);
	cursor: default;
}

/* The track runs off the right edge of the page, so the next card peeks in. */
.wf-testimonials-viewport {
	min-width: 0;
	margin-right: calc((min(100vw, var(--wf-width)) - 100vw) / 2 - var(--wf-gutter));
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
}

.wf-testimonials-viewport::-webkit-scrollbar {
	display: none;
}

.wf-testimonials-track li + li {
	margin-top: 0;
}

.wf-testimonials-track {
	display: flex;
	align-items: stretch;
	gap: 24px;
	margin: 0;
	padding: 0 var(--wf-gutter) 0 0;
	list-style: none;
}

.wf-quote {
	flex: none;
	display: flex;
	flex-direction: column;
	gap: 32px;
	width: min(400px, 82vw);
	min-height: 360px;
	margin: 0;
	padding: 36px;
	border-radius: var(--wf-radius);
	background: var(--wf-panel);
	scroll-snap-align: start;
}

.wf-quote blockquote p {
	margin: 0;
	color: var(--wf-white);
	font-size: var(--fs-small);
	font-weight: 500;
	line-height: 1.55;
}

.wf-quote-by {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: auto;
}

.wf-quote-avatar {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--svc-gradient);
	color: var(--svc-ink);
	font-size: 18px;
	font-weight: 600;
	overflow: hidden;
}

.wf-quote-avatar img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	background: var(--wf-white);
}

.wf-quote-name {
	display: block;
	color: var(--wf-white);
	font-size: 17px;
	font-weight: 600;
}

.wf-quote-detail {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--wf-muted);
	font-size: 15px;
}

.wf-stars {
	color: #ffd100;
	font-size: 15px;
	letter-spacing: 2px;
}

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

	.wf-testimonials-nav {
		margin-top: 0;
	}
}

/* --------------------------------------------------------------------------
   Case study cards ([wf_case_studies] from the Webforward Content plugin)

   Each card sits on its service gradient and leads with the result.
   -------------------------------------------------------------------------- */

.wf-work-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 48px;
	padding: 0;
	list-style: none;
}

.wf-work-filter li + li {
	margin: 0;
}

.wf-work-filter button {
	height: 44px;
	padding: 0 18px;
	border: 1.5px solid rgba(255, 255, 255, 0.28);
	border-radius: 999px;
	background: none;
	color: var(--wf-white);
	font-family: var(--wf-font);
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
}

.wf-work-filter button:hover {
	border-color: var(--wf-white);
}

.wf-work-filter button[aria-pressed="true"] {
	border-color: var(--wf-white);
	background: var(--wf-white);
	color: var(--wf-ink);
}

/* Two columns, the right one starting lower. The plugin marks every second
   card with is-offset, and site.js moves the class when the filter changes. */
.wf-work-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 40px;
	align-items: start;
	padding-bottom: 120px;
}

.wf-work-item.is-offset {
	transform: translateY(120px);
}

.wf-work-grid.is-single {
	grid-template-columns: minmax(0, 1fr);
	padding-bottom: 0;
}

.wf-work-grid.is-single .wf-work-item {
	transform: none;
}

.wf-work-card {
	display: flex;
	flex-direction: column;
	height: 560px;
	padding: 40px 40px 0;
	border-radius: var(--wf-radius);
	background: linear-gradient(160deg, var(--svc-1) 0%, var(--svc-2) 33%, var(--svc-3) 67%, var(--svc-4) 100%);
	color: var(--svc-ink);
	text-decoration: none;
	overflow: hidden;
	transition: transform 0.25s ease;
}

.wf-work-card:hover,
.wf-work-card:focus-visible {
	color: var(--svc-ink);
	transform: translateY(-4px);
}

.wf-work-card-top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
}

.wf-work-card-service {
	display: block;
	font-size: 16px;
	opacity: 0.85;
}

.wf-work-card-client {
	display: block;
	margin-top: 8px;
	font-size: var(--fs-h3);
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.2;
}

.wf-work-card .wf-arrow {
	width: 48px;
	height: 48px;
	background: var(--svc-ink);
	color: var(--svc-ink-alt);
}

.wf-work-card:hover .wf-arrow {
	background: var(--wf-white);
	color: var(--wf-ink);
	transform: rotate(45deg);
}

.wf-work-card:hover .wf-arrow::before {
	opacity: 0;
}

/* The screenshot runs 8px past the card's bottom and right edges, so when it
   shifts up and left on hover it never uncovers the card behind it. */
.wf-work-card-image {
	display: block;
	flex: 1;
	min-height: 220px;
	margin: 40px -48px -8px 0;
	transition: transform 0.45s ease;
}

.wf-work-card-image img {
	width: 100%;
	height: 100%;
	border-radius: 16px 0 0 0;
	background: var(--wf-ink);
	object-fit: cover;
	object-position: left top;
}

.wf-work-card:hover .wf-work-card-image {
	transform: translate(-8px, -8px);
}

/* One card on its own (industry pages) goes wide. */
.wf-work-grid.is-single .wf-work-card {
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
	align-items: start;
	gap: 48px;
	height: 440px;
	padding: 48px 0 0 48px;
}

.wf-work-grid.is-single .wf-work-card-image {
	grid-column: 2;
	grid-row: 1;
	align-self: stretch;
	min-height: 0;
	margin: 0 -8px -8px 0;
}

.wf-work-item[hidden] {
	display: none !important;
}

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

	.wf-work-item.is-offset {
		transform: none;
	}

	.wf-work-card {
		height: auto;
		padding: 32px 32px 0;
	}

	/* Cards are as tall as their content on phones, so the screenshot gets a set height. */
	.wf-work-card-image {
		flex: none;
		height: 268px;
		margin: 32px -40px -8px 0;
	}

	.wf-work-grid.is-single .wf-work-card {
		display: flex;
		align-items: stretch;
		height: auto;
		padding: 32px 32px 0;
	}

	.wf-work-grid.is-single .wf-work-card-image {
		height: 268px;
		margin: auto -40px -8px 0;
	}
}

/* --------------------------------------------------------------------------
   Client logos and the Google badge
   -------------------------------------------------------------------------- */

.wf-client-logo-grid {
	display: grid;
	grid-template-columns: repeat(var(--wf-logo-columns, 6), minmax(0, 1fr));
	gap: 40px 48px;
	align-items: center;
}

.wf-client-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 64px;
}

.wf-client-logo img {
	max-width: 150px;
	max-height: 48px;
	width: auto;
	object-fit: contain;
	filter: brightness(0) invert(1);
	opacity: 0.8;
	transition: opacity 0.2s ease;
}

.wf-client-logo a:hover img {
	opacity: 1;
}

.wf-client-logo-marquee {
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

.wf-client-logo-track {
	display: flex;
	width: max-content;
	animation: wf-logos var(--wf-logo-duration, 40s) linear infinite;
}

.wf-client-logo-set {
	display: flex;
	gap: 64px;
	padding-right: 64px;
}

@keyframes wf-logos {
	to {
		transform: translateX(-50%);
	}
}

@media (max-width: 767px) {
	.wf-client-logo-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 28px;
	}
}

/* Staggered (the default for [wf_client_logos]): each logo sits on its own
   tile, in rows of four wide tiles then five mixed ones, in a few shades
   of the card blue so it doesn't read as a flat wall of logos. */
.wf-client-logo-grid.is-staggered {
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 20px;
}

.wf-client-logo-grid.is-staggered .wf-client-logo {
	grid-column: span 3;
	min-height: 130px;
	padding: 24px;
	border-radius: var(--wf-radius);
	background: var(--wf-panel);
	box-sizing: border-box;
}

.wf-client-logo-grid.is-staggered .wf-client-logo:is(:nth-child(9n+5), :nth-child(9n+7), :nth-child(9n+9)) {
	grid-column: span 2;
}

.wf-client-logo-grid.is-staggered .wf-client-logo:nth-child(4n+2) {
	background: #1e0566;
}

.wf-client-logo-grid.is-staggered .wf-client-logo:nth-child(4n+3) {
	background: var(--wf-panel-raised);
}

.wf-client-logo-grid.is-staggered .wf-client-logo:nth-child(4n) {
	background: #1a0460;
}

.wf-client-logo-grid.is-staggered .wf-client-logo img {
	max-width: 70%;
	max-height: 56px;
}

@media (max-width: 767px) {
	.wf-client-logo-grid.is-staggered {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}

	.wf-client-logo-grid.is-staggered .wf-client-logo,
	.wf-client-logo-grid.is-staggered .wf-client-logo:is(:nth-child(9n+5), :nth-child(9n+7), :nth-child(9n+9)) {
		grid-column: auto;
		min-height: 96px;
	}
}

.wf-google-badge {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	color: var(--wf-white);
	text-decoration: none;
}

.wf-google-icon {
	width: 30px;
	height: 30px;
}

.wf-google-content {
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-size: 15px;
	line-height: 1.3;
}

.wf-google-title {
	color: var(--wf-text);
}

.wf-google-stars {
	display: flex;
	align-items: center;
	gap: 3px;
}

.wf-google-stars img {
	width: 14px;
	height: 14px;
}

.wf-google-score {
	margin-right: 4px;
	font-weight: 600;
}

.wf-google-meta {
	color: var(--wf-muted);
	font-size: 14px;
}

/* --------------------------------------------------------------------------
   Lists with tick circles (case studies, service pages)
   -------------------------------------------------------------------------- */

.wf-ticks {
	margin: 0;
	padding: 0;
	list-style: none;
}

.wf-ticks li {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	margin: 0;
	padding: 10px 0;
	color: var(--wf-white);
	font-size: var(--fs-small);
	line-height: 1.5;
}

.wf-ticks.is-ruled li {
	padding: 14px 0;
	border-top: 1px solid var(--wf-line);
}

.wf-tick {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	margin-top: -1px;
	border-radius: 50%;
	background: var(--svc-gradient);
	color: var(--svc-ink);
}

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */

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

	:is(.wf-button, .wf-card, .wf-work-card, .wf-doorway-card):hover {
		transform: none;
	}
}

/* --------------------------------------------------------------------------
   Hosting packages

   Package cards (wf-package-grid > wf-package) sit at the top of a hosting
   page; the comparison table ([wf_compare]) sits further down.

   Each card is a full-width Elementor container with these widgets, in
   this order: heading (package name), text .wf-package-tag, text
   .wf-package-for, text .wf-package-price, text .wf-package-quote, button,
   text with a bulleted list. The grid uses subgrid, so the same part of
   every card lines up across the row whatever the text length.

   For the "Most popular" band, add a text widget .wf-package-flag
   ("Most popular") anywhere in it, for the band along the top.

   Prices are hidden until "Show hosting prices" is ticked in the
   Customizer. Until then the card shows .wf-package-quote instead.
   -------------------------------------------------------------------------- */

.wf-package-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0 28px;
	padding-top: 40px;
}

.e-con.wf-package-grid {
	--display: grid;
	--padding-top: 40px;
	--gap: 0px 28px;
}

.wf-package {
	position: relative;
	display: grid;
	grid-row: span 6;
	grid-template-rows: subgrid;
	row-gap: 12px;
	align-content: start;
	padding: 36px 32px;
	border-radius: var(--wf-radius);
	background: var(--wf-panel);
	color: var(--wf-text);
}

.e-con.wf-package {
	--display: grid;
	--padding-top: 36px;
	--padding-right: 32px;
	--padding-bottom: 36px;
	--padding-left: 32px;
	--background-color: var(--wf-panel);
	--border-radius: var(--wf-radius);
	--gap: 12px;
	--row-gap: 12px;
}

.wf-package > .elementor-widget {
	min-width: 0;
	margin: 0;
}

/* A card only grows the band when it actually has a flag in it, so taking
   the flag out leaves it the same as the others. */
.wf-package:has(> .wf-package-flag) {
	margin-top: -40px;
	padding-top: 76px;
}

.e-con.wf-package:has(> .wf-package-flag) {
	--padding-top: 76px;
	--margin-top: -40px;
}

.wf-package-flag {
	position: absolute !important;
	top: 0;
	right: 0;
	left: 0;
	display: block;
	height: 40px;
	margin: 0 !important;
	padding: 0 32px;
	border-radius: var(--wf-radius) var(--wf-radius) 0 0;
	background: var(--svc-gradient);
	color: var(--svc-ink);
	font-size: 15px;
	font-weight: 700;
}

.wf-package-flag :is(p, .elementor-widget-container) {
	margin: 0;
	color: inherit;
	font: inherit;
	line-height: 40px;
	text-align: center;
}

.wf-package :is(h2, h3, .elementor-heading-title) {
	margin: 0;
	color: var(--wf-white);
	font-size: var(--fs-h3);
	line-height: 1.2;
}

.wf-package-tag,
.wf-package-tag :is(p, .elementor-widget-container) {
	margin: 0;
	color: var(--wf-white);
	font-size: var(--fs-h4);
	font-weight: 500;
	line-height: 1.3;
	text-wrap: balance;
}

.wf-package-for,
.wf-package-for :is(p, .elementor-widget-container) {
	margin: 0 0 12px;
	color: var(--wf-text);
	font-size: var(--fs-small);
	line-height: 1.5;
}

/* "From <strong>£145</strong> a year" */
.wf-package-price,
.wf-package-price :is(p, .elementor-widget-container) {
	align-self: end;
	margin: 0;
	color: var(--wf-muted);
	font-size: 16px;
}

.wf-package-price strong {
	margin: 0 4px;
	color: var(--wf-white);
	font-size: var(--fs-h2);
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1;
}

/* "Quoted for you" with a line of text under it */
.wf-package-quote,
.wf-package-quote :is(p, .elementor-widget-container) {
	align-self: end;
	margin: 0;
	color: var(--wf-muted);
	font-size: 16px;
	line-height: 1.45;
}

.wf-package-quote strong {
	display: block;
	margin-bottom: 4px;
	color: var(--wf-white);
	font-size: var(--fs-h4);
	font-weight: 600;
}

body:not(.wf-show-prices) .wf-package-price,
body.wf-show-prices .wf-package-quote {
	display: none !important;
}

/* The top of the card is centred; the feature list stays left-aligned so
   the ticks line up. */
.wf-package > :is(.elementor-widget-heading, h2, h3, .wf-package-tag, .wf-package-for, .wf-package-price, .wf-package-quote),
.wf-package > .elementor-widget-heading .elementor-heading-title {
	text-align: center;
}

.wf-package :is(.wf-button, .elementor-widget-button) {
	margin-top: 12px;
}

.wf-package .elementor-widget-button .elementor-button,
.wf-package a.wf-button {
	width: 100%;
}

.wf-package ul {
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
}

.wf-package li {
	position: relative;
	margin: 0;
	padding: 12px 0 12px 32px;
	border-top: 1px solid rgba(235, 231, 255, 0.14);
	color: var(--wf-white);
	font-size: var(--fs-small);
	line-height: 1.45;
}

.wf-package li:first-child {
	border-top: 0;
}

.wf-package li::before,
.wf-compare .is-yes::before {
	content: "";
	position: absolute;
	top: 16px;
	left: 0;
	width: 18px;
	height: 18px;
	background: var(--svc-text);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}

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

	.wf-package {
		margin-bottom: 28px;
	}

	.wf-package:has(> .wf-package-flag) {
		margin-top: 0;
	}
}

/* "All plans include" line: a text widget with a plain bulleted list. */
.wf-includes ul {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 32px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wf-includes li {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	color: var(--wf-white);
	font-size: var(--fs-small);
}

.wf-includes li::before {
	content: "";
	flex: none;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 14px no-repeat,
		var(--svc-gradient);
}

/* --------------------------------------------------------------------------
   Comparison table ([wf_compare])

   Feature names down the left, one dark column per package. On phones the
   table scrolls sideways and the feature names stay put.
   -------------------------------------------------------------------------- */

.wf-compare {
	position: relative;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.wf-compare table {
	width: 100%;
	min-width: 760px;
	border-collapse: separate;
	border-spacing: 20px 0;
	margin: 0 -20px;
	table-layout: fixed;
}

.wf-compare :is(th, td) {
	padding: 18px 24px;
	border: 0;
	border-top: 1px solid rgba(235, 231, 255, 0.14);
	background: var(--wf-panel);
	color: var(--wf-white);
	font-size: var(--fs-small);
	font-weight: 400;
	line-height: 1.4;
	text-align: left;
	vertical-align: middle;
}

/* The feature column sticks on phones, so it needs the section's own
   background. Set --wf-compare-bg if the table sits on another colour. */
.wf-compare :is(th, td):first-child {
	position: sticky;
	left: 0;
	z-index: 1;
	width: 26%;
	padding-left: 0;
	background: var(--wf-compare-bg, var(--wf-blue));
	color: var(--wf-text);
	font-weight: 500;
}

:is(.wf-bg-deep, .wf-surface-deep) .wf-compare {
	--wf-compare-bg: var(--wf-blue-deep);
}

.wf-compare thead :is(th, td) {
	border-top: 0;
}

.wf-compare thead th {
	padding-top: 28px;
	border-top: 0;
	border-radius: var(--wf-radius) var(--wf-radius) 0 0;
	vertical-align: top;
}

.wf-compare thead th:first-child {
	border-radius: 0;
}

.wf-compare-name {
	display: inline;
	color: var(--wf-white);
	font-size: var(--fs-h4);
	font-weight: 600;
}

.wf-compare-flag {
	display: inline-block;
	margin-left: 10px;
	color: var(--svc-text);
	font-size: 15px;
	font-weight: 700;
}

.wf-compare-price {
	display: block;
	margin-top: 6px;
	color: var(--wf-muted);
	font-size: 16px;
}

.wf-compare-price strong {
	color: var(--wf-white);
	font-size: var(--fs-h3);
	font-weight: 700;
	letter-spacing: -0.03em;
}

body:not(.wf-show-prices) .wf-compare-price {
	display: none;
}

.wf-compare tbody tr:first-child :is(th, td):not(:first-child) {
	border-top-color: rgba(235, 231, 255, 0.14);
}

.wf-compare .is-yes,
.wf-compare .is-no {
	position: relative;
}

.wf-compare .is-yes::before {
	top: 50%;
	left: 24px;
	margin-top: -9px;
}

.wf-compare .is-no {
	color: #7f74b5;
}

.wf-compare tfoot td {
	padding-top: 20px;
	padding-bottom: 28px;
	border-radius: 0 0 var(--wf-radius) var(--wf-radius);
}

.wf-compare tfoot td:first-child {
	border-radius: 0;
}

.wf-compare tfoot .wf-button {
	width: 100%;
	padding-inline: 16px;
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Brands we work with

   A heading on the left and a row of logos on the right, between two thin
   rules. Logos are shown in white so mixed brand colours sit together.
   -------------------------------------------------------------------------- */

.wf-brands {
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
	gap: 64px;
	align-items: center;
	padding-block: 56px;
	border-block: 1px solid var(--wf-line);
}

.e-con.wf-brands {
	--display: grid;
	--padding-top: 56px;
	--padding-bottom: 56px;
}

.wf-brands :is(h2, h3, h4, .elementor-heading-title) {
	margin: 0;
	font-size: var(--fs-h4);
}

.wf-brand-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 32px 48px;
}

.e-con.wf-brand-row {
	--flex-direction: row;
	--flex-wrap: wrap;
	--justify-content: space-between;
	--align-items: center;
	--gap: 32px 48px;
}

/* Elementor's widget wrappers shrink in a row, and an SVG has no size of
   its own, so each logo gets a fixed height and a width from its shape. */
.wf-brand-row > * {
	flex: 0 0 auto !important;
	width: auto !important;
	max-width: none !important;
}

.wf-brand-row img {
	display: block;
	width: auto !important;
	height: 40px !important;
	max-width: 160px;
	object-fit: contain;
	filter: brightness(0) invert(1);
	opacity: 0.72;
	transition: opacity 0.2s ease;
}

/* Keep the logos in their own colours instead of white. */
.wf-brand-row.is-original img {
	filter: none;
	opacity: 1;
}

.wf-brand-row a:hover img {
	opacity: 1;
}

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

	.wf-brand-row {
		justify-content: flex-start;
	}
}

/* Lucide icons from [wf_icon] */
.wf-lucide {
	display: inline-block;
	line-height: 0;
}

.wf-lucide svg {
	display: block;
}

/* --------------------------------------------------------------------------
   Checklists

   wf-checklist on a text widget turns its bulleted list into ticks in the
   page colour. Add is-no as well for a list of dashes (things you don't
   get), as on the "Us vs the hosting giants" block.
   -------------------------------------------------------------------------- */

.wf-checklist ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.wf-checklist li {
	position: relative;
	margin: 0;
	padding: 12px 0 12px 34px;
	border-top: 1px solid rgba(235, 231, 255, 0.14);
	color: var(--wf-white);
	font-size: var(--fs-small);
	line-height: 1.45;
}

.wf-checklist li:first-child {
	border-top: 0;
}

.wf-checklist li::before {
	content: "";
	position: absolute;
	top: 16px;
	left: 0;
	width: 20px;
	height: 20px;
	background: var(--svc-text);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.wf-checklist.is-no li {
	color: var(--wf-muted);
}

.wf-checklist.is-no li::before {
	top: 25px;
	height: 2px;
	width: 14px;
	left: 3px;
	border-radius: 2px;
	background: var(--wf-faint);
	-webkit-mask: none;
	mask: none;
}

/* Step number above a card title, for "Moving to us" */
.wf-step :is(p, .elementor-widget-container) {
	margin: 0 0 12px;
	color: var(--svc-text);
	font-size: var(--fs-meta);
	font-weight: 700;
}

/* --------------------------------------------------------------------------
   Open layouts

   Ways to lay out a section without putting everything in cards. Each one
   is a class on an Elementor container.
   -------------------------------------------------------------------------- */

/* wf-options: a row of icon links split by thin vertical lines. Each child
   container holds an icon, a heading with a link, and one short line. The
   heading's link covers the whole item. */
/* Flex rather than grid, so the items share the row equally however many
   there are, and the extra drop zone Elementor adds in the editor doesn't
   take up a column of its own. */
.wf-options {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap !important;
	gap: 32px 0;
}

.e-con.wf-options {
	--display: flex;
	--flex-direction: row;
	--flex-wrap: wrap;
	--gap: 32px 0px;
}

/* Elementor gives its child containers a full width and its own flex
   values, so these have to win. */
.wf-options > * {
	flex: 1 1 180px !important;
	width: auto !important;
	max-width: none !important;
	min-width: 0;
	position: relative;
	padding: 4px 28px;
	border-left: 1px solid var(--wf-line);
	transition: transform 0.25s ease;
}

.wf-options > :first-child {
	padding-left: 0;
	border-left: 0;
}

.wf-options > :not(.elementor-element, .e-con, div),
.wf-options > :is(.elementor-empty-view, .elementor-add-section, .e-con-select-preset) {
	flex: 0 0 0 !important;
	padding: 0;
	border: 0;
}

.wf-options .wf-lucide {
	margin-bottom: 18px;
	color: var(--svc-text);
}

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

.wf-options :is(h3, h4, .elementor-heading-title) a {
	color: var(--wf-white);
	text-decoration: none !important;
}

.wf-options :is(h3, h4, .elementor-heading-title) a::after {
	content: "\2192";
	display: inline-block;
	margin-left: 8px;
	transition: transform 0.25s ease;
}

.wf-options :is(h3, h4, .elementor-heading-title) a::before {
	content: "";
	position: absolute;
	inset: 0;
}

.wf-options > .elementor-element > .elementor-widget {
	position: static;
}

.wf-options > :hover :is(h3, h4, .elementor-heading-title) a {
	color: var(--svc-soft);
}

.wf-options > :hover :is(h3, h4, .elementor-heading-title) a::after {
	transform: translateX(4px);
}

.wf-options p {
	margin: 0;
	color: var(--wf-text);
	font-size: var(--fs-small);
	line-height: 1.45;
}

@media (max-width: 900px) {
	.wf-options > * {
		flex-basis: 40% !important;
		padding-left: 0;
		border-left: 0;
	}
}

/* wf-versus: two open columns side by side. Add is-us to the second to
   put it on a dark panel, so it stands out. */
.wf-versus {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0;
}

.e-con.wf-versus {
	--display: grid;
	--gap: 0px;
}

.wf-versus > * {
	padding: 36px 40px;
}

.wf-versus > :first-child {
	padding-left: 0;
}

.wf-versus > .is-us {
	border-radius: var(--wf-radius);
	background: var(--wf-panel);
}

.e-con.wf-versus > .is-us {
	--background-color: var(--wf-panel);
	--border-radius: var(--wf-radius);
}


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

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

	.wf-versus > :first-child {
		padding: 0 0 32px;
	}

	.wf-versus > .is-us {
		padding: 28px 24px;
	}
}

/* Tighter ruled rows, for short heading-and-line lists. */
.wf-rows.is-tight > * {
	padding-block: 22px;
}

.wf-rows :is(h3, h4, .elementor-heading-title) {
	margin: 0 0 6px;
}

/* wf-chain: items in a line joined by a thin rule, icon above a label. */
.wf-chain {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0;
	text-align: center;
}

.e-con.wf-chain {
	--display: grid;
	--gap: 0px;
}

.wf-chain::before {
	content: "";
	position: absolute;
	top: 28px;
	right: 12.5%;
	left: 12.5%;
	border-top: 1px solid var(--wf-line);
}

.wf-chain > * {
	position: relative;
	align-items: center;
}

.wf-chain .wf-lucide {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin: 0 auto 14px;
	border-radius: 50%;
	background: var(--wf-blue);
	box-shadow: inset 0 0 0 1px var(--wf-line);
	color: var(--svc-text);
}

.wf-chain .wf-lucide svg {
	width: 26px;
	height: 26px;
}

.wf-chain :is(h3, h4, .elementor-heading-title) {
	margin: 0;
	font-size: var(--fs-small);
}

/* A phone number (or any short line) at heading size. */
.wf-big-link :is(p, .elementor-widget-container) {
	margin: 0;
	font-size: var(--fs-h2);
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.15;
}

.wf-big-link a {
	color: var(--wf-white);
	text-decoration: none !important;
}

.wf-big-link a:hover {
	color: var(--svc-soft);
}

/* Photos straight on the page, no card behind them. */
.wf-photo img {
	width: 100%;
	aspect-ratio: 16 / 10;
	border-radius: var(--wf-radius);
	object-fit: cover;
}

/* A tall photo beside a block of text: fills the height of the column. */
.wf-photo.is-tall,
.wf-photo.is-tall .elementor-widget-container {
	height: 100%;
}

.wf-photo.is-tall img {
	height: 100%;
	min-height: 420px;
	aspect-ratio: auto;
}

/* Icon list beside a photo: icon on top, title, one line, no rules. */
.wf-icon-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 48px 40px;
}

.e-con.wf-icon-list {
	--display: grid;
	--gap: 48px 40px;
}

.wf-icon-list > * {
	padding: 0 !important;
	border: 0 !important;
}

.wf-icon-list .wf-lucide {
	margin-bottom: 18px;
	color: var(--svc-text);
}

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

.wf-icon-list p {
	margin: 0;
	color: var(--wf-text);
	font-size: var(--fs-small);
	line-height: 1.5;
}

@media (max-width: 600px) {
	.wf-icon-list {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}
}

/* wf-steps: steps in a line, each with a large number, joined by a rule. */
.wf-steps {
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 40px;
}

.e-con.wf-steps {
	--display: grid;
	--gap: 40px;
}

.wf-steps::before {
	content: "";
	position: absolute;
	top: 32px;
	right: 0;
	left: 0;
	border-top: 1px solid var(--wf-line);
}

.wf-step-num :is(p, .elementor-widget-container) {
	position: relative;
	display: inline-block;
	margin: 0 0 20px;
	padding-right: 16px;
	background: var(--wf-blue);
	color: var(--svc-text);
	font-size: var(--fs-h1);
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 0.75;
}

:is(.wf-bg-deep, .wf-surface-deep, .wf-full-bg) :is(.wf-step-num :is(p, .elementor-widget-container), .wf-chain .wf-lucide) {
	background: var(--wf-blue-deep);
}

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

@media (max-width: 767px) {
	.wf-steps {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}

	.wf-steps::before {
		display: none;
	}

	.wf-chain {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px 0;
	}

	.wf-chain::before {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   Tabs

   Add wf-tabs to Elementor's Tabs widget. The tab titles become a row of
   outline buttons (the open one is filled), centred above one dark panel
   that holds the tab's content. Add has-ribbon as well for the page's
   ribbon along the bottom of the panel (best where there's no ribbon
   directly above it).
   -------------------------------------------------------------------------- */

.wf-tabs {
	--n-tabs-title-gap: 12px;
	--n-tabs-gap: 32px;
	--n-tabs-title-padding-top: 0px;
	--n-tabs-title-padding-right: 0px;
	--n-tabs-title-padding-bottom: 0px;
	--n-tabs-title-padding-left: 0px;
	--n-tabs-title-border-width: 0px;
	--n-tabs-border-width: 0px;
	--n-tabs-title-background-color: transparent;
	--n-tabs-title-background-color-hover: transparent;
	--n-tabs-title-background-color-active: transparent;
	--n-tabs-title-color: var(--wf-white);
	--n-tabs-title-color-hover: var(--wf-white);
	--n-tabs-title-color-active: var(--wf-ink);
}

.wf-tabs .e-n-tabs {
	gap: 32px;
}

.wf-tabs .e-n-tabs-heading {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
}

.wf-tabs .e-n-tab-title {
	flex: none !important;
	width: auto !important;
	min-height: 48px;
	margin: 0;
	padding: 0 22px !important;
	border: 1.5px solid rgba(255, 255, 255, 0.35) !important;
	border-radius: var(--wf-radius-sm) !important;
	background: transparent !important;
	color: var(--wf-white) !important;
	font-family: var(--wf-font);
	font-size: 17px;
	font-weight: 600;
	cursor: pointer;
	transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.wf-tabs .e-n-tab-title:hover {
	border-color: var(--wf-white) !important;
}

.wf-tabs .e-n-tab-title[aria-selected="true"] {
	border-color: var(--wf-white) !important;
	background: var(--wf-white) !important;
	color: var(--wf-ink) !important;
}

.wf-tabs .e-n-tab-title-text {
	color: inherit !important;
	font: inherit !important;
}

/* The panel */
.wf-tabs .e-n-tabs-content > .e-con {
	--padding-top: 64px;
	--padding-right: 64px;
	--padding-bottom: 64px;
	--padding-left: 64px;
	position: relative;
	padding: 64px !important;
	border-radius: var(--wf-radius-lg);
	background: var(--wf-panel);
	overflow: hidden;
	isolation: isolate;
}

/* The ribbon is drawn as a gradient in the page's ribbon colours, cut to
   shape with a mask, so it follows the page colour class. */
.wf-tabs.has-ribbon .e-n-tabs-content > .e-con {
	padding-bottom: 200px !important;
}

.wf-tabs.has-ribbon .e-n-tabs-content > .e-con::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -1;
	height: 220px;
	background: linear-gradient(90deg, var(--rib));
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 220' preserveAspectRatio='none'%3E%3Cpath d='M-80 80 C 260 250, 640 250, 960 165 S 1360 60, 1560 70' fill='none' stroke='black' stroke-width='84' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 220' preserveAspectRatio='none'%3E%3Cpath d='M-80 80 C 260 250, 640 250, 960 165 S 1360 60, 1560 70' fill='none' stroke='black' stroke-width='84' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
	pointer-events: none;
}

.wf-tabs .e-n-tabs-content :is(h2, h3, .elementor-heading-title) {
	margin: 0 0 16px;
	font-size: var(--fs-h3);
}

.wf-tabs .e-n-tabs-content .elementor-widget-text-editor {
	max-width: 620px;
}


/* A row of arrow links under the text */
.wf-link-row {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap !important;
	gap: 12px 32px !important;
	margin-top: 12px;
}

.wf-link-row > * {
	width: auto !important;
}

@media (max-width: 767px) {
	/* Tabs scroll sideways on phones rather than wrapping onto lines. */
	.wf-tabs .e-n-tabs-heading {
		flex-wrap: nowrap;
		justify-content: flex-start;
		margin-inline: calc(-1 * var(--wf-gutter));
		padding-inline: var(--wf-gutter);
		overflow-x: auto;
		scrollbar-width: none;
	}

	.wf-tabs .e-n-tabs-heading::-webkit-scrollbar {
		display: none;
	}

	/* Elementor adds its own margins to the tab buttons on phones, which
	   pushed the open one up and stretched the others. */
	.wf-tabs .e-n-tabs-heading {
		align-items: center;
		margin-bottom: 24px;
	}

	.wf-tabs .e-n-tab-title {
		align-self: center;
		margin: 0 !important;
	}

	.wf-tabs .e-n-tabs-content > .e-con {
		padding: 32px 24px !important;
	}

	.wf-tabs.has-ribbon .e-n-tabs-content > .e-con {
		padding-bottom: 120px !important;
	}

	.wf-tabs.has-ribbon .e-n-tabs-content > .e-con::after {
		height: 110px;
	}
}

/* --------------------------------------------------------------------------
   Pale service band

   wf-surface-tint is the light band in the page's soft service colour, for
   the section straight after a service header. Text switches to dark, the
   same as wf-surface-light. Pair it with wf-full-bg to run edge to edge.
   -------------------------------------------------------------------------- */

.wf-surface-tint {
	background: var(--svc-soft) !important;
	color: var(--wf-ink-text);
}

.wf-full-bg.wf-surface-tint {
	--wf-full-bg: var(--svc-soft);
}

/* Text widgets set their own light colour, so switch them to dark on
   light bands (but not inside a dark tab panel). */
:is(.wf-surface-light, .wf-surface-white, .wf-surface-pale, .wf-bg-alt, .wf-surface-tint) .elementor-widget-text-editor {
	color: var(--wf-ink-text);
}

:is(.wf-surface-light, .wf-surface-white, .wf-surface-pale, .wf-bg-alt, .wf-surface-tint) .wf-tabs .e-n-tabs-content .elementor-widget-text-editor {
	color: var(--wf-text);
}

/* Tabs on a light band: dark outline buttons, the panel stays dark. */
:is(.wf-surface-light, .wf-surface-tint) .wf-tabs .e-n-tab-title {
	border-color: rgba(22, 0, 69, 0.3) !important;
	color: var(--wf-ink) !important;
}

:is(.wf-surface-light, .wf-surface-tint) .wf-tabs .e-n-tab-title:hover {
	border-color: var(--wf-ink) !important;
}

:is(.wf-surface-light, .wf-surface-tint) .wf-tabs .e-n-tab-title[aria-selected="true"] {
	border-color: var(--wf-ink) !important;
	background: var(--wf-ink) !important;
	color: var(--wf-white) !important;
}

:is(.wf-surface-light, .wf-surface-tint) .wf-tabs .e-n-tabs-content {
	color: var(--wf-text);
}

:is(.wf-surface-light, .wf-surface-tint) .wf-tabs .e-n-tabs-content :is(h2, h3, h4, .elementor-heading-title, strong) {
	color: var(--wf-white);
}

:is(.wf-surface-light, .wf-surface-tint) .wf-tabs .e-n-tabs-content :is(.wf-link, .wf-link .elementor-button) {
	color: var(--wf-white);
}

:is(.wf-surface-light, .wf-surface-tint) .wf-tabs .e-n-tabs-content .wf-arrow {
	background: var(--wf-white);
	color: var(--wf-ink);
}

/* --------------------------------------------------------------------------
   Header with overlapping screenshots

   wf-ribbon-overlap is a service header where three screenshots sit across
   the bottom edge and into the next section, with the ribbon behind them.
   Put the three Image widgets in a container with wf-overlap-shots (the
   middle one is shown larger). The section after it gets extra room at
   the top automatically.
   -------------------------------------------------------------------------- */

:root {
	--wf-overlap: clamp(80px, 10vw, 150px);
}

.wf-ribbon-overlap {
	position: relative;
	z-index: 2;
	isolation: isolate;
	padding-bottom: 0 !important;
}

.wf-ribbon-overlap .wf-ribbon {
	bottom: 40px;
	height: clamp(220px, 28vw, 400px);
}

.wf-overlap-shots {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr) minmax(0, 5fr);
	align-items: end;
	gap: 28px;
	margin-top: clamp(100px, 14vw, 200px) !important;
	margin-bottom: calc(-1 * var(--wf-overlap)) !important;
}

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

.wf-overlap-shots img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	border: 8px solid var(--wf-panel);
	border-radius: 16px;
	background: var(--wf-panel-raised);
	object-fit: cover;
	object-position: top left;
}

.wf-overlap-shots > :nth-child(2) img {
	aspect-ratio: 16 / 11;
}

.wf-ribbon-overlap + .e-con {
	padding-top: var(--wf-overlap) !important;
}

@media (max-width: 767px) {
	:root {
		--wf-overlap: 60px;
	}

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

	.wf-overlap-shots > :not(:nth-child(2)) {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   Statement: one line of large text on its own. Wrap the key phrase in
   <span class="wf-highlight"> to colour it.
   -------------------------------------------------------------------------- */

.wf-statement,
.wf-statement p {
	max-width: 1180px;
	margin: 0;
	color: var(--wf-white);
	font-size: clamp(2.25rem, 1.6rem + 2.6vw, 4rem);
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.12;
	text-wrap: balance;
}

/* --------------------------------------------------------------------------
   Annotated screenshot

   wf-annotated on a container holding an Image widget and a Shortcode
   widget with wf-pins. The shortcode widget holds the markers:
     [wf_pin n="1" x="10" y="15"][wf_pin n="2" x="70" y="22"]
   x and y are percentages across and down the image. Pair it with a
   container of wf-num-list beside it, which numbers its rows to match.
   -------------------------------------------------------------------------- */

.wf-annotated {
	position: relative !important;
}

.wf-annotated img {
	display: block;
	width: 100%;
	border-radius: var(--wf-radius);
}

.wf-annotated .wf-pins {
	position: absolute !important;
	inset: 0;
	margin: 0 !important;
	pointer-events: none;
}

.wf-pin {
	position: absolute;
	top: var(--y, 50%);
	left: var(--x, 50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--svc);
	color: var(--svc-ink);
	font-size: 18px;
	font-weight: 700;
	line-height: 1;
	transform: translate(-50%, -50%);
}

.wf-num-list {
	counter-reset: wf-num;
}

.wf-num-list > * {
	position: relative;
	padding: 20px 0 20px 52px !important;
	border-top: 1px solid var(--wf-line);
	counter-increment: wf-num;
}

.wf-num-list > :first-child {
	padding-top: 0 !important;
	border-top: 0;
}

.wf-num-list > ::before {
	content: counter(wf-num);
	position: absolute;
	top: 20px;
	left: 0;
	color: var(--svc-text);
	font-size: var(--fs-h4);
	font-weight: 700;
	line-height: 1.3;
}

.wf-num-list > :first-child::before {
	top: 0;
}

.wf-num-list :is(h3, h4, .elementor-heading-title) {
	margin: 0 0 6px;
	font-size: var(--fs-h4);
}

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

@media (max-width: 767px) {
	.wf-pin {
		width: 28px;
		height: 28px;
		font-size: 14px;
	}
}

/* --------------------------------------------------------------------------
   Four steps with a photo under each: add is-4 to wf-steps and give each
   step's Image widget wf-photo. The photos line up along the bottom.
   -------------------------------------------------------------------------- */

.wf-steps.is-4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.wf-steps > * {
	display: flex !important;
	flex-direction: column;
}

.wf-steps .wf-photo {
	margin-top: auto !important;
	padding-top: 24px;
}

.wf-steps .wf-photo img {
	aspect-ratio: 4 / 3;
}

@media (max-width: 1024px) {
	.wf-steps.is-4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.wf-steps.is-4::before {
		display: none;
	}
}

@media (max-width: 767px) {
	.wf-steps.is-4 {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* A big result figure, as on the featured case study. */
.wf-stat,
.wf-stat p {
	margin: 28px 0 8px;
	color: var(--svc-text);
	font-size: var(--fs-h1);
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1;
}

/* --------------------------------------------------------------------------
   Ruled grid: short headings and a line or two of text in two columns,
   each with a rule above. No icons and no cards.
   -------------------------------------------------------------------------- */

.wf-ruled-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 64px;
}

.e-con.wf-ruled-grid {
	--display: grid;
	--gap: 0px 64px;
}

.wf-ruled-grid > * {
	padding: 28px 0 40px !important;
	border-top: 1px solid rgba(235, 231, 255, 0.25);
}

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

.wf-ruled-grid p {
	max-width: 560px;
	margin: 0;
	font-size: var(--fs-small);
	line-height: 1.55;
}

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

/* "Built with ..." line under a block of text. */
.wf-built-with {
	margin-top: 28px;
	padding-top: 24px;
	border-top: 1px solid var(--wf-line);
	font-size: var(--fs-small);
}

.wf-built-with p {
	margin: 0;
}

.wf-built-with strong {
	color: var(--wf-white);
}

/* --------------------------------------------------------------------------
   Sticky column

   Add wf-sticky to one side of a wf-split (usually the heading) and it stays
   in view, under the site header, while the other side scrolls past. It
   only sticks while the columns sit side by side.
   -------------------------------------------------------------------------- */

.wf-sticky {
	--wf-sticky-top: 120px;
	position: sticky !important;
	top: var(--wf-sticky-top);
	align-self: start;
}

.admin-bar .wf-sticky {
	--wf-sticky-top: 152px;
}

@media (max-width: 767px) {
	.wf-sticky {
		position: static !important;
	}
}

/* --------------------------------------------------------------------------
   Door card list: a ruled list of pages inside a door card, as on the
   Services page. Add wf-door-list to a Text Editor widget holding a
   bulleted list. Put a short note in a <span> after the link to show it
   on the right. Links in the list still work over the whole-card link.
   -------------------------------------------------------------------------- */

.wf-door-list ul {
	margin: 8px 0 0;
	padding: 0;
	list-style: none;
}

.wf-door-list li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin: 0;
	padding: 12px 0;
	border-top: 1px solid rgba(235, 231, 255, 0.14);
	color: var(--wf-white);
	font-size: 17px;
	line-height: 1.4;
}

.wf-door-list li span {
	color: var(--wf-faint);
	font-size: 15px;
	text-align: right;
}

/* Plain links here, not the arrow links cards normally give text links. */
:is(.wf-doorway-card, .wf-card) .wf-door-list.elementor-widget-text-editor a:not([class]) {
	display: inline;
	color: var(--wf-white);
	font-weight: 400;
	text-decoration: none;
}

:is(.wf-doorway-card, .wf-card) .wf-door-list.elementor-widget-text-editor a:not([class])::after {
	display: none;
}

:is(.wf-doorway-card, .wf-card) .wf-door-list.elementor-widget-text-editor a:not([class]):hover {
	color: var(--svc-soft);
}

/* --------------------------------------------------------------------------
   Colour band

   wf-band on a full-width section, with a wf-colour-* class for its
   colours (web-design, hosting, support and so on). The section fills with
   that colour's gradient and the text switches to the colour's ink.
   Inside: wf-band-word on a Heading widget (set its HTML tag to p) for the
   huge word, wf-eyebrow for the label above it, and wf-band-list on a Text
   Editor list of pages, with an optional note in a <span>.
   Add is-long to the word for longer words such as "Look after."
   -------------------------------------------------------------------------- */

.wf-band {
	--band-rule: rgba(255, 255, 255, 0.35);
	--band-circle: var(--wf-white);
	--band-arrow: var(--wf-arrow-dark);
	background: linear-gradient(110deg, var(--svc-1) 0%, var(--svc-2) 33%, var(--svc-3) 67%, var(--svc-4) 100%) !important;
	color: var(--svc-ink);
}

.wf-band:is(.wf-colour-support, .wf-colour-applications, .wf-colour-ecommerce) {
	--band-rule: rgba(22, 0, 69, 0.25);
	--band-circle: var(--wf-ink);
	--band-arrow: var(--wf-arrow-white);
}

.wf-band :is(h2, h3, h4, .elementor-heading-title, p, li, a, strong, .elementor-widget-text-editor) {
	color: var(--svc-ink);
}

.wf-band .wf-eyebrow :is(p, .elementor-widget-container) {
	margin-bottom: 28px;
	color: var(--svc-ink);
	font-size: 20px;
	opacity: 0.8;
}

.wf-band-word,
.wf-band-word .elementor-heading-title {
	margin: 0;
	color: var(--svc-ink);
	font-size: clamp(6rem, 2rem + 10vw, 15rem);
	font-weight: 700;
	letter-spacing: -0.05em;
	line-height: 0.82;
}

.wf-band-word.is-long .elementor-heading-title {
	font-size: clamp(4.5rem, 1.5rem + 7vw, 10.5rem);
}

.wf-band-list ul {
	margin: 24px 0 0;
	padding: 0;
	list-style: none;
}

.wf-band-list li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin: 0;
	padding: 14px 0;
	border-top: 1.5px solid var(--band-rule);
	font-size: 19px;
	font-weight: 600;
	line-height: 1.35;
}

.wf-band-list li span {
	font-size: 15px;
	font-weight: 400;
	text-align: right;
	opacity: 0.75;
}

.wf-band .wf-band-list a {
	text-decoration: none !important;
}

.wf-band .wf-band-list a:hover {
	text-decoration: underline !important;
	text-underline-offset: 4px;
}

.wf-band .elementor-widget-button.wf-link .elementor-button {
	color: var(--svc-ink);
}

.wf-band .elementor-widget-button.wf-link .elementor-button::after,
.wf-band .elementor-widget-button.wf-link .elementor-button:hover::after {
	background: var(--band-arrow) center / 16px no-repeat, var(--band-circle);
}

@media (max-width: 767px) {
	.wf-band-list li {
		font-size: 17px;
	}
}

/* --------------------------------------------------------------------------
   Reveal on scroll

   wf-reveal on a section: when it scrolls into view, its huge word
   (wf-band-word) rises up from behind the section's edge and the other
   widgets fade up one after another. It plays once. Nothing is hidden in
   the Elementor editor, without JavaScript, or for people who've asked
   their device to reduce motion.
   -------------------------------------------------------------------------- */

.wf-js .wf-reveal .wf-band-word {
	overflow: hidden;
	padding-bottom: 0.08em;
}

.wf-js .wf-reveal .wf-band-word .elementor-heading-title {
	transform: translateY(105%);
	transition: transform 1s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.wf-js .wf-reveal .wf-reveal-step {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
	transition-delay: calc(0.2s + var(--wf-step, 0) * 0.07s);
}

.wf-js .wf-reveal.is-in .wf-band-word .elementor-heading-title,
.wf-js .wf-reveal.is-in .wf-reveal-step {
	opacity: 1;
	transform: none;
}

.elementor-editor-active .wf-reveal :is(.wf-band-word .elementor-heading-title, .wf-reveal-step) {
	opacity: 1 !important;
	transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
	.wf-js .wf-reveal :is(.wf-band-word .elementor-heading-title, .wf-reveal-step) {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* Two bands side by side, for the "other services" block at the bottom of
   a service page. Put two wf-band containers inside a wf-band-pair. */
.wf-band-pair {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 !important;
}

.e-con.wf-band-pair {
	--gap: 0px;
}

.wf-band-pair > .wf-band {
	padding: clamp(3rem, 2rem + 4vw, 6rem) clamp(1.5rem, 1rem + 3vw, 4.5rem) !important;
}

.wf-band-pair .wf-band-word .elementor-heading-title,
.wf-band-pair .wf-band-word.is-long .elementor-heading-title {
	font-size: clamp(4rem, 1.5rem + 5.5vw, 8.5rem);
}

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

/* Add is-three for all three bands in a row (general pages). */
.wf-band-pair.is-three {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.wf-band-pair.is-three .wf-band-word .elementor-heading-title,
.wf-band-pair.is-three .wf-band-word.is-long .elementor-heading-title {
	font-size: clamp(3.5rem, 1rem + 4.2vw, 6rem);
}

@media (max-width: 1100px) {
	.wf-band-pair.is-three {
		grid-template-columns: minmax(0, 1fr);
	}

	.wf-band-pair.is-three .wf-band-word .elementor-heading-title,
	.wf-band-pair.is-three .wf-band-word.is-long .elementor-heading-title {
		font-size: clamp(4rem, 1.5rem + 5.5vw, 8.5rem);
	}
}

/* --------------------------------------------------------------------------
   Website design page pieces (2.7.0)
   -------------------------------------------------------------------------- */

/* Ruled grid in three columns, with a line icon above each heading:
   add is-3 to wf-ruled-grid and put [wf_icon] at the top of each item. */
.wf-ruled-grid.is-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0 48px;
}

.wf-ruled-grid .wf-lucide {
	display: block;
	margin-bottom: 20px;
	color: var(--svc-text);
}

.wf-ruled-grid.is-3 :is(h3, .elementor-heading-title) {
	font-size: var(--fs-h4);
}

@media (max-width: 1024px) {
	.wf-ruled-grid.is-3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.wf-ruled-grid.is-3 {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* A short line of proof under the header buttons. */
.wf-header-proof,
.wf-header-proof p {
	margin: 8px 0 0;
	color: var(--wf-muted);
	font-size: 16px;
}

/* Before and after: two Image widgets in a wf-before-after container, the
   first with is-before (greyscale, tilted) and the second with is-after
   (full colour, overlapping it). Label each with the image caption. */
.wf-before-after {
	position: relative !important;
	display: block !important;
	min-height: clamp(320px, 36vw, 520px);
}

.wf-before-after > :is(.is-before, .is-after) {
	position: absolute !important;
	width: 68% !important;
}

.wf-before-after > .is-before {
	top: 0;
	left: 0;
	transform: rotate(-2deg);
}

.wf-before-after > .is-after {
	right: 0;
	bottom: 0;
}

.wf-before-after img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 11;
	border: 8px solid var(--wf-panel);
	border-radius: 14px;
	object-fit: cover;
	object-position: top;
}

.wf-before-after > .is-before img {
	filter: grayscale(1);
	opacity: 0.7;
}

.wf-before-after figcaption,
.wf-before-after .widget-image-caption {
	margin: 0 0 10px 6px;
	color: var(--wf-muted);
	font-size: 15px;
	font-weight: 600;
	text-align: left;
}

.wf-before-after > .is-after :is(figcaption, .widget-image-caption) {
	color: var(--svc-text);
}

.wf-before-after figure {
	display: flex;
	flex-direction: column-reverse;
	margin: 0;
}

@media (max-width: 767px) {
	.wf-before-after {
		min-height: 0;
	}

	.wf-before-after > :is(.is-before, .is-after) {
		position: static !important;
		width: 100% !important;
		transform: none;
	}

	.wf-before-after > .is-before {
		margin-bottom: 20px;
	}
}

/* One big quote instead of a carousel. Wrap the key phrase in
   <span class="wf-highlight">, and put the name in a second paragraph. */
.wf-big-quote p:first-child {
	max-width: 1100px;
	margin: 0;
	color: var(--wf-white);
	font-size: clamp(1.75rem, 1.2rem + 2vw, 3rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.2;
}

.wf-big-quote p + p {
	margin-top: 28px;
	color: var(--wf-muted);
	font-size: var(--fs-small);
}

.wf-big-quote strong {
	color: var(--wf-white);
}

/* Small colour blocks linking to other services ("Beyond launch"). Each is
   a container with wf-launch-block and a wf-colour-* class; inside, a
   Heading with wf-launch-word, a heading, a line and a wf-link button. */
.wf-launch-blocks {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}

.e-con.wf-launch-blocks {
	--display: grid;
	--gap: 24px;
}

.wf-launch-block {
	--band-circle: var(--wf-white);
	--band-arrow: var(--wf-arrow-dark);
	min-height: 360px;
	padding: 36px !important;
	border-radius: var(--wf-radius);
	background: linear-gradient(120deg, var(--svc-1), var(--svc-2), var(--svc-3), var(--svc-4)) !important;
	color: var(--svc-ink);
	transition: transform 0.25s ease;
}

.wf-launch-block:is(.wf-colour-support, .wf-colour-applications, .wf-colour-ecommerce) {
	--band-circle: var(--wf-ink);
	--band-arrow: var(--wf-arrow-white);
}

.wf-launch-block:hover {
	transform: translateY(-3px);
}

.wf-launch-block :is(h3, h4, .elementor-heading-title, p, a) {
	color: var(--svc-ink);
}

.wf-launch-word .elementor-heading-title {
	margin: 0;
	font-size: clamp(2.5rem, 1.25rem + 2.4vw, 3.75rem);
	font-weight: 700;
	letter-spacing: -0.05em;
	line-height: 0.9;
}

.wf-launch-word {
	margin-bottom: 0 !important;
}

/* Titles line up across the blocks; the link sits at the bottom. */
.wf-launch-block > .wf-link-row:last-child {
	margin-top: auto !important;
	padding-top: 16px;
}

.wf-launch-block :is(h3, .elementor-heading-title):not(.wf-launch-word *) {
	margin-top: 28px;
	font-size: var(--fs-h4);
}

.wf-launch-block .elementor-widget-button.wf-link .elementor-button {
	color: var(--svc-ink);
}

.wf-launch-block .elementor-widget-button.wf-link .elementor-button::after,
.wf-launch-block .elementor-widget-button.wf-link .elementor-button:hover::after {
	background: var(--band-arrow) center / 16px no-repeat, var(--band-circle);
}

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

	.wf-launch-block {
		min-height: 0;
	}
}

/* --------------------------------------------------------------------------
   Enquiry form in a colour band

   Add wf-enquiry to the section (with wf-band and a colour class) holding a
   Forminator form. The first radio field becomes four choice tiles; text
   fields sit two to a row on a darker wash; the submit button is white.
   The short line under each tile comes from the option's wording.
   -------------------------------------------------------------------------- */

.wf-enquiry .forminator-ui.forminator-custom-form {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	font-family: var(--wf-font) !important;
}

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

.wf-enquiry .forminator-label {
	margin: 0 0 10px !important;
	color: var(--svc-ink) !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	opacity: 0.85;
}

.wf-enquiry .forminator-field:has(.forminator-radio) {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}

.wf-enquiry .forminator-field:has(.forminator-radio) > .forminator-label {
	grid-column: 1 / -1;
	margin-bottom: 0 !important;
}

.wf-enquiry .forminator-radio {
	display: flex !important;
	flex-direction: column;
	justify-content: space-between;
	min-height: 96px;
	margin: 0 !important;
	padding: 22px 24px !important;
	border: 2px solid rgba(255, 255, 255, 0.45) !important;
	border-radius: 18px !important;
	background: none !important;
	color: var(--wf-white) !important;
	font-size: 20px !important;
	font-weight: 700 !important;
	cursor: pointer;
}

.wf-enquiry .forminator-radio .forminator-radio-bullet {
	display: none !important;
}

.wf-enquiry .forminator-radio::after {
	margin-top: 8px;
	font-size: 15px;
	font-weight: 400;
	opacity: 0.8;
}

.wf-enquiry .forminator-radio:has(input[value*="new" i])::after { content: "Starting from scratch"; }
.wf-enquiry .forminator-radio:has(input[value*="redesign" i])::after { content: "Our site has outgrown us"; }
.wf-enquiry .forminator-radio:has(input[value*="review" i])::after { content: "Tell us what to fix"; }
.wf-enquiry .forminator-radio:has(input[value*="sure" i])::after { content: "Let’s talk it through"; }

.wf-enquiry .forminator-radio:has(input:checked) {
	border-color: var(--wf-white) !important;
	background: var(--wf-white) !important;
	color: var(--svc-4) !important;
}

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

.wf-enquiry :is(.forminator-input, .forminator-textarea) {
	min-height: 60px !important;
	padding: 14px 18px !important;
	border: 1.5px solid rgba(255, 255, 255, 0.25) !important;
	border-radius: 14px !important;
	background: rgba(22, 3, 85, 0.35) !important;
	box-shadow: none !important;
	color: var(--wf-white) !important;
	font-size: 17px !important;
}

.wf-enquiry :is(.forminator-input, .forminator-textarea)::placeholder {
	color: rgba(255, 255, 255, 0.65) !important;
	opacity: 1;
}

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

.wf-enquiry .forminator-row {
	margin-bottom: 14px !important;
}

.wf-enquiry .forminator-button-submit {
	min-height: 56px !important;
	padding: 0 30px !important;
	border: 0 !important;
	border-radius: var(--wf-radius-sm) !important;
	background: var(--wf-white) !important;
	box-shadow: none !important;
	color: var(--wf-ink) !important;
	font-size: 19px !important;
	font-weight: 700 !important;
	transition: transform 0.2s ease !important;
}

.wf-enquiry .forminator-button-submit:hover {
	transform: translateY(-2px);
}

.wf-enquiry .forminator-error-message {
	background: none !important;
	color: var(--wf-white) !important;
	font-size: 15px !important;
}

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

.wf-enquiry h2.elementor-heading-title,
.wf-enquiry .elementor-widget-heading h2 {
	font-size: var(--fs-h1);
	line-height: 1.05;
}

/* Ruled grid in four columns (2.7.1), for shorter items. */
.wf-ruled-grid.is-4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0 40px;
}

.wf-ruled-grid.is-4 > * {
	padding: 0 0 40px !important;
	border-top: 0 !important;
}

.wf-ruled-grid.is-4 :is(h3, .elementor-heading-title) {
	font-size: 20px;
}

.wf-ruled-grid.is-4 p {
	font-size: 17px;
}

@media (max-width: 1024px) {
	.wf-ruled-grid.is-4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.wf-ruled-grid.is-4 {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Big figures: a row of short, large figures with a line under each
   (for example "1 year" of hosting). Add wf-figures to a wf-grid, and
   wf-stat to the figure in each item. */
.wf-figures .wf-stat,
.wf-figures .wf-stat p {
	margin: 0 0 12px;
	font-size: clamp(2.25rem, 1.6rem + 1.4vw, 3.25rem) !important;
	line-height: 1 !important;
	white-space: nowrap;
}

.wf-figures > * {
	padding-top: 0 !important;
	border: 0 !important;
}

.wf-figures :is(h3, .elementor-heading-title) {
	margin: 0 0 8px;
	font-size: 20px;
	line-height: 1.3;
}

/* A taller photo beside text: wf-photo is-portrait. */
.wf-photo.is-portrait img {
	aspect-ratio: 4 / 5;
}

/* Website Design pages use a light neutral band instead of the pink tint
   (2.7.2): the pink sat too close to the magenta ribbon and buttons. */
body:has(.wf-service-web-design) .wf-surface-tint {
	background: #f4f1f7 !important;
}

body:has(.wf-service-web-design) .wf-full-bg.wf-surface-tint {
	--wf-full-bg: #f4f1f7;
}

/* Website Design pages (2.7.3): highlighted words and big figures are
   white rather than the pale pink; icons and ticks use the light lilac. */
body:has(.wf-service-web-design) {
	--svc-text: var(--wf-white);
}

body:has(.wf-service-web-design) :is(.wf-lucide, .wf-checklist li::before) {
	color: var(--wf-muted);
}

body:has(.wf-service-web-design) .wf-checklist li::before {
	background: var(--wf-muted);
}

/* Light bands (2.7.4): small labels switch to a dark muted colour. */
:is(.wf-surface-light, .wf-surface-white, .wf-surface-pale, .wf-bg-alt, .wf-surface-tint) .wf-eyebrow :is(p, span, .elementor-heading-title, .elementor-widget-container) {
	color: var(--wf-ink-muted);
}

/* Website Design pages: on a light band, big figures and icons use the
   full magenta, which reads well on the light grey. */
body:has(.wf-service-web-design) .wf-surface-tint :is(.wf-stat, .wf-stat p, .wf-lucide) {
	color: #d0006f !important;
}

/* Figures as cards (2.7.5): add is-cards to wf-figures. Card blue on the
   dark background, white on a light band. */
.wf-figures.is-cards {
	gap: 20px !important;
}

.e-con.wf-figures.is-cards {
	--gap: 20px;
}

.wf-figures.is-cards > * {
	padding: 32px 30px 34px !important;
	border-radius: var(--wf-radius);
	background: var(--wf-panel);
}

:is(.wf-surface-light, .wf-surface-tint) .wf-figures.is-cards > * {
	background: var(--wf-white);
}

@media (max-width: 1024px) {
	.wf-figures.is-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 600px) {
	.wf-figures.is-cards {
		grid-template-columns: minmax(0, 1fr) !important;
	}
}

/* One wide image instead of three (2.7.7): add is-single to
   wf-overlap-shots and put one Image widget in it. */
.wf-overlap-shots.is-single {
	grid-template-columns: minmax(0, 1fr);
}

.wf-overlap-shots.is-single img,
.wf-overlap-shots.is-single > :nth-child(2) img {
	aspect-ratio: 21 / 9;
}

@media (max-width: 767px) {
	.wf-overlap-shots.is-single > * {
		display: block !important;
	}

	.wf-overlap-shots.is-single img {
		aspect-ratio: 16 / 10;
	}
}

/* One wide image (2.7.8): less space above it, and a shallower ribbon, so
   the header doesn't leave an empty gap between the buttons and the image. */
.wf-overlap-shots.is-single {
	margin-top: clamp(48px, 5vw, 72px) !important;
}

.wf-ribbon-overlap:has(.is-single) .wf-ribbon {
	height: clamp(200px, 24vw, 340px);
}

/* Web development page: figures on a light band need the darker purple to read */
body:has(.wf-service-web-development) :is(.wf-surface-light, .wf-surface-tint) .wf-figures :is(.wf-stat, .wf-stat p) {
	color: #8b42d0;
}

/* Checklists inside white figure cards (support plans) */
:is(.wf-surface-light, .wf-surface-tint) .wf-figures.is-cards .wf-checklist li {
	color: var(--wf-ink-text);
	border-color: rgba(22, 0, 69, 0.08);
}

/* Support page: yellow is too pale on white, so figures use the darker orange */
body:has(.wf-service-support) :is(.wf-surface-light, .wf-surface-tint) .wf-figures :is(.wf-stat, .wf-stat p) {
	color: #e8590c;
}
body:has(.wf-service-support) :is(.wf-surface-light, .wf-surface-tint) .wf-figures .wf-checklist li::before {
	color: #e8590c;
}

/* SEO page: light blue figures need the deeper blue on white */
body:has(.wf-service-seo) :is(.wf-surface-light, .wf-surface-tint) .wf-figures :is(.wf-stat, .wf-stat p) {
	color: #0374c3;
}

/* Pages without a service colour (About and so on): figures on light bands use magenta */
body:not(:has([class*="wf-service-"])) :is(.wf-surface-light, .wf-surface-tint) .wf-figures :is(.wf-stat, .wf-stat p) {
	color: #d0006f;
}

/* A logo with a link is wrapped in <a>. Let the link fill the tile, or the
   logo's percentage width has nothing to measure against and collapses. */
.wf-client-logo > a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}