/* ==========================================================================
   Webforward: base
   Tokens, service colours, reset, type and the layout classes that the
   existing Elementor pages use.
   ========================================================================== */

:root {
	/* Base */
	--wf-blue: #290385;
	--wf-blue-deep: #22037a;
	--wf-panel: #160355;
	--wf-panel-raised: #2b0b78;
	--wf-ink: #160045;
	--wf-light: #f6f5f1;
	--wf-white: #fff;

	/* Text on the blue */
	--wf-text: #dcd6f2;
	--wf-muted: #c9bff0;
	--wf-faint: #b3a9d9;
	--wf-pink: #f2b8da;
	--wf-line: rgba(235, 231, 255, 0.18);

	/* Text on light sections */
	--wf-ink-text: #4a4560;
	--wf-ink-muted: #5c5770;

	/* Arrow icons for places where we can only use a background image */
	--wf-arrow-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23160045' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M7 17L17 7M9 7h8v8'/%3E%3C/svg%3E");
	--wf-arrow-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M7 17L17 7M9 7h8v8'/%3E%3C/svg%3E");

	--wf-rainbow: #ffd100, #fe5000, #ce0058, #bb29bb, #6d2077, #005eb8, #009fdf, #009ca6, #84bd00, #c4d600;

	/* Type. Sizes scale between a 375px phone and a 1440px desktop.
	   Body text is 24px for main paragraphs and 20px (--fs-small) for
	   card text, lists, FAQ answers and quotes. --fs-meta is for
	   captions, labels and the footer. */
	--wf-font: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	--fs-h1: clamp(2.75rem, 1.9rem + 3.6vw, 5.5rem);
	--fs-display: var(--fs-h1);
	--fs-h2: clamp(2rem, 1.6rem + 1.7vw, 3rem);
	--fs-h3: clamp(1.5rem, 1.33rem + 0.75vw, 2rem);
	--fs-h4: clamp(1.25rem, 1.16rem + 0.38vw, 1.5rem);
	--fs-intro: clamp(1.25rem, 1.07rem + 0.75vw, 1.75rem);
	--fs-lead: var(--fs-intro);
	--fs-body: clamp(1.125rem, 0.98rem + 0.6vw, 1.5rem);
	--fs-small: clamp(1.0625rem, 1rem + 0.28vw, 1.25rem);
	--fs-meta: clamp(0.9375rem, 0.92rem + 0.09vw, 1rem);

	/* Section spacing */
	--wf-pad-xs: clamp(1.5rem, 1.324rem + 0.751vw, 2rem);
	--wf-pad-sm: clamp(2.5rem, 1.972rem + 2.254vw, 4rem);
	--wf-pad-md: clamp(4rem, 3.296rem + 3.005vw, 6rem);
	--wf-pad-lg: clamp(5.5rem, 4.444rem + 4.507vw, 8.5rem);
	--wf-pad-xl: clamp(7rem, 5.415rem + 6.761vw, 11.5rem);

	/* Smaller gaps inside components */
	--wf-gap-xs: 0.5rem;
	--wf-gap-sm: 0.75rem;
	--wf-gap: 1.25rem;
	--wf-gap-lg: 2rem;
	--wf-gap-xl: 3rem;

	/* Width: one container for everything */
	--wf-width: 1440px;
	--wf-gutter: 40px;
	--wf-reading: 760px;

	--wf-radius: 22px;
	--wf-radius-sm: 12px;
	--wf-radius-lg: 32px;
	--wf-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (max-width: 1024px) {
	:root {
		--wf-gutter: 32px;
	}
}

@media (max-width: 600px) {
	:root {
		--wf-gutter: 20px;
		--wf-radius: 18px;
		--wf-radius-lg: 24px;
	}
}

/* --------------------------------------------------------------------------
   Service colours

   Add one of the wf-service-* classes to the outer container of a page in
   Elementor and the whole page picks it up (buttons, links, ribbon, CTA).
   The wf-colour-* classes do the same for a single element, like a case
   study card, without touching the rest of the page.

   --svc        the Pantone, for fills
   --svc-1..4   the button gradient
   --svc-ink    text colour on the gradient
   --svc-text   safe text colour on the blue (some Pantones fail contrast)
   --svc-ink-alt  the opposite of --svc-ink, for an arrow circle on the gradient
   --svc-arrow  arrow icon in --svc-ink, as a background image
   --svc-soft   pale tint for hover text
   --rib        ribbon colours, left to right
   --cta        the blend on the right of the CTA panel
   -------------------------------------------------------------------------- */

:root,
.wf-colour-general {
	--svc: #d0006f;
	--svc-1: #d0006f;
	--svc-2: #c8138f;
	--svc-3: #c11fa6;
	--svc-4: #bb29bb;
	--svc-ink: #fff;
	--svc-ink-alt: #160045;
	--svc-arrow: var(--wf-arrow-white);
	--svc-text: #f5bcd8;
	--svc-soft: #f5bcd8;
	--rib: #ffd100, #fe5000, #ce0058, #6d2077, #2e008b, #005eb8, #009fdf, #009ca6, #84bd00;
	--cta: #bb29bb, #8b42d0, #5752ce, #005eb8, #009fdf;
}

.wf-service-applications,
body:has(.wf-service-applications),
.wf-colour-applications {
	--svc: #c4d600;
	--svc-1: #c4d600;
	--svc-2: #afce06;
	--svc-3: #9ac505;
	--svc-4: #84bd00;
	--svc-ink: #160045;
	--svc-ink-alt: #fff;
	--svc-arrow: var(--wf-arrow-dark);
	--svc-text: #c4d600;
	--svc-soft: #eaf0b3;
	--rib: #ffd100, #c4d600, #84bd00, #009ca6, #009fdf;
	--cta: #84bd00, #3fb052, #009ca6, #009fdf;
}

.wf-service-web-design,
body:has(.wf-service-web-design),
.wf-colour-web-design {
	--svc: #d0006f;
	--svc-1: #d0006f;
	--svc-2: #ae157a;
	--svc-3: #8d1d7c;
	--svc-4: #6d2077;
	--svc-ink: #fff;
	--svc-ink-alt: #160045;
	--svc-arrow: var(--wf-arrow-white);
	--svc-text: #f5bcd8;
	--svc-soft: #f5bcd8;
	--rib: #fe5000, #ce0058, #d0006f, #a1007d, #bb29bb, #6d2077;
	--cta: #6d2077, #5752ce, #005eb8, #009fdf;
}

.wf-service-ecommerce,
body:has(.wf-service-ecommerce),
.wf-colour-ecommerce {
	--svc: #009ca6;
	--svc-1: #009ca6;
	--svc-2: #06ab93;
	--svc-3: #2fba6b;
	--svc-4: #84bd00;
	--svc-ink: #160045;
	--svc-ink-alt: #fff;
	--svc-arrow: var(--wf-arrow-dark);
	--svc-text: #3fc4cc;
	--svc-soft: #b3e4e7;
	--rib: #005eb8, #009fdf, #009ca6, #84bd00, #c4d600;
	--cta: #84bd00, #c4d600, #ffd100;
}

.wf-service-web-development,
body:has(.wf-service-web-development),
.wf-colour-web-development {
	--svc: #bb29bb;
	--svc-1: #bb29bb;
	--svc-2: #8b42d0;
	--svc-3: #5752ce;
	--svc-4: #005eb8;
	--svc-ink: #fff;
	--svc-ink-alt: #160045;
	--svc-arrow: var(--wf-arrow-white);
	--svc-text: #e9c4ec;
	--svc-soft: #e9c4ec;
	--rib: #d0006f, #bb29bb, #6d2077, #005eb8, #009fdf;
	--cta: #005eb8, #009fdf, #009ca6;
}

.wf-service-seo,
body:has(.wf-service-seo),
.wf-colour-seo {
	--svc: #009fdf;
	--svc-1: #009fdf;
	--svc-2: #008ad1;
	--svc-3: #0374c3;
	--svc-4: #005eb8;
	--svc-ink: #fff;
	--svc-ink-alt: #160045;
	--svc-arrow: var(--wf-arrow-white);
	--svc-text: #3fb8ec;
	--svc-soft: #b3e2f5;
	--rib: #6d2077, #005eb8, #009fdf, #009ca6, #84bd00;
	--cta: #005eb8, #5752ce, #bb29bb;
}

.wf-service-hosting,
body:has(.wf-service-hosting),
.wf-colour-hosting {
	--svc: #f17a1e;
	--svc-1: #f17a1e;
	--svc-2: #e65d1b;
	--svc-3: #d83d24;
	--svc-4: #c8102e;
	--svc-ink: #fff;
	--svc-ink-alt: #160045;
	--svc-arrow: var(--wf-arrow-white);
	--svc-text: #f17a1e;
	--svc-soft: #f9cda6;
	--rib: #ffc72c, #f9b90b, #f17a1e, #fe5000, #c8102e;
	--cta: #c8102e, #ce0058, #d0006f;
}

.wf-service-support,
body:has(.wf-service-support),
.wf-colour-support {
	--svc: #f9b90b;
	--svc-1: #f9b90b;
	--svc-2: #fa9c01;
	--svc-3: #fa7d02;
	--svc-4: #fe5000;
	--svc-ink: #160045;
	--svc-ink-alt: #fff;
	--svc-arrow: var(--wf-arrow-dark);
	--svc-text: #f9b90b;
	--svc-soft: #fce2a1;
	--rib: #ffd100, #ffc72c, #f9b90b, #f17a1e, #fe5000;
	--cta: #fe5000, #e5302a, #c8102e;
}

/* Built from the variables above so each colour set only lists its stops. */
:root,
[class*="wf-service-"],
[class*="wf-colour-"],
body {
	--svc-gradient: linear-gradient(100deg, var(--svc-1) 0%, var(--svc-2) 33%, var(--svc-3) 67%, var(--svc-4) 100%);
	--svc-sweep: linear-gradient(100deg, var(--svc-1) 0%, var(--svc-2) 16.7%, var(--svc-3) 33.3%, var(--svc-4) 50%, var(--svc-3) 66.7%, var(--svc-2) 83.3%, var(--svc-1) 100%);
}

/* --------------------------------------------------------------------------
   Reset and base
   -------------------------------------------------------------------------- */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-padding-top: 6rem;
}

/* DM Sans has an optical size axis. Left on auto, browsers switch large
   text to its thin display cut, so headings lose their weight. Pin it to
   the standard cut instead. */
html,
body,
body * {
	font-optical-sizing: none;
	font-variation-settings: "opsz" 14;
}

body {
	margin: 0;
	background: var(--wf-blue);
	color: var(--wf-text);
	font-family: var(--wf-font);
	font-size: var(--fs-body);
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

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

a {
	color: var(--wf-white);
	text-decoration: none;
	transition: color 0.2s ease;
}

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

:focus-visible {
	outline: 3px solid #ffc72c;
	outline-offset: 3px;
}

::selection {
	background: #d0006f;
	color: var(--wf-white);
}

p {
	margin: 0 0 1em;
}

p:last-child {
	margin-bottom: 0;
}

/* Every heading level uses the same weight and spacing; only the size
   and line height change. */
h1, h2, h3, h4, h5, h6,
.elementor-heading-title {
	margin: 0 0 0.5em;
	color: var(--wf-white);
	font-family: var(--wf-font);
	font-weight: 700;
	letter-spacing: -0.03em;
}

.elementor-heading-title {
	margin: 0;
}

h1, h2 {
	text-wrap: balance;
}

h1 {
	font-size: var(--fs-h1);
	line-height: 1.1;
}

h2 {
	font-size: var(--fs-h2);
	line-height: 1.15;
}

h3 {
	font-size: var(--fs-h3);
	line-height: 1.2;
}

h4 {
	font-size: var(--fs-h4);
	line-height: 1.3;
}

h5,
h6 {
	font-size: var(--fs-small);
	line-height: 1.4;
}

ul,
ol {
	margin: 0 0 1em;
	padding-left: 1.25em;
}

li + li {
	margin-top: 0.4em;
}

blockquote {
	margin: 0;
}

hr {
	height: 1px;
	margin: 2.5rem 0;
	border: 0;
	background: var(--wf-line);
}

strong,
b {
	font-weight: 600;
	color: var(--wf-white);
}

small {
	font-size: var(--fs-meta);
}

/* Elementor resets heading line height to 1, which is too tight for DM Sans. */
.elementor-widget-heading .elementor-heading-title {
	font-family: var(--wf-font);
}

h1.elementor-heading-title { line-height: 1.1; }
h2.elementor-heading-title { line-height: 1.15; }
h3.elementor-heading-title { line-height: 1.2; }
h4.elementor-heading-title { line-height: 1.3; }
.wf-display .elementor-heading-title { line-height: 1.1; }

.elementor-widget-text-editor {
	color: var(--wf-text);
}

/* Type helpers */
.wf-display,
.wf-display .elementor-heading-title {
	font-size: var(--fs-display);
	line-height: 1.1;
}

/* Intro paragraph under an H1 or a section heading. */
.wf-lead,
.wf-lead p,
.wf-intro,
.wf-intro p,
.wf-text-l,
.wf-text-l p {
	font-size: var(--fs-intro);
	line-height: 1.45;
}

/* Secondary text, for when a paragraph shouldn't be full size. */
.wf-text-s,
.wf-text-s p {
	font-size: var(--fs-small);
	line-height: 1.5;
}

/* Keep running text to a readable line length. */
.wf-measure,
.wf-measure p {
	max-width: var(--wf-reading);
}

.wf-text-xl,
.wf-text-xl p {
	color: #e6e1f7;
	font-size: clamp(1.375rem, 1.1rem + 1.1vw, 1.9375rem);
	line-height: 1.45;
}

.wf-label,
.wf-eyebrow,
.wf-eyebrow :is(p, span, .elementor-heading-title) {
	margin: 0 0 0.75rem;
	color: var(--wf-muted);
	font-size: var(--fs-meta);
	font-weight: 600;
}

.wf-highlight,
.wf-highlight .elementor-heading-title {
	color: var(--svc-text);
}

.wf-skip-link {
	position: absolute;
	top: -100px;
	left: 1rem;
	z-index: 1000;
	padding: 0.75rem 1rem;
	border-radius: var(--wf-radius-sm);
	background: var(--wf-white);
	color: var(--wf-ink);
	font-weight: 600;
}

.wf-skip-link:focus {
	top: 1rem;
}

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

/* --------------------------------------------------------------------------
   Containers

   One width for everything: 1440px including the 40px gutters (1360px of content). The old 1800px
   and 1760px shells are mapped onto it so existing pages line up.
   -------------------------------------------------------------------------- */

.wf-container,
.wf-container-wide,
.wf-shell,
.wf-hero-shell,
.wf-content-shell,
.wf-section-inner {
	width: 100%;
	max-width: var(--wf-width);
	margin-inline: auto;
	padding-inline: var(--wf-gutter);
}

.wf-container-narrow {
	width: 100%;
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: var(--wf-gutter);
}

.wf-reading-shell,
.wf-container-xs {
	width: 100%;
	max-width: calc(var(--wf-reading) + 2 * var(--wf-gutter));
	margin-inline: auto;
	padding-inline: var(--wf-gutter);
}

/* Elementor's own boxed width defaults to 1140px. Match it to ours so
   containers without a wf-container class still line up. */
.wf-theme {
	--container-max-width: calc(var(--wf-width) - 2 * var(--wf-gutter));
}

.wf-theme .elementor-section.elementor-section-boxed > .elementor-container {
	max-width: calc(var(--wf-width) - 2 * var(--wf-gutter));
}

/* A container inside a container shouldn't add its gutters again. */
:is(.wf-container, .wf-container-wide, .wf-shell) :is(.wf-container, .wf-container-narrow, .wf-container-xs, .wf-reading-shell) {
	padding-inline: 0;
}

/* Elementor boxed containers: let our class own the width. */
:is(.wf-container, .wf-container-wide, .wf-shell, .wf-hero-shell, .wf-container-narrow, .wf-container-xs).e-con {
	--content-width: 100%;
	max-width: var(--wf-width);
	margin-inline: auto;
	padding-inline: var(--wf-gutter);
}

:is(.wf-container, .wf-container-wide, .wf-shell, .wf-hero-shell, .wf-container-narrow, .wf-container-xs).e-con-boxed > .e-con-inner {
	width: 100%;
	max-width: none;
	padding-inline: 0;
}

.wf-container-narrow.e-con {
	max-width: 1200px;
}

.wf-container-xs.e-con {
	max-width: calc(var(--wf-reading) + 2 * var(--wf-gutter));
}

/* Old full-width section wrappers. They no longer paint anything. */
:where(.wf-layout-base, .wf-layout-solid, .wf-layout-surface, .wf-layout-grid, .wf-layout-gradient, .wf-layout-paper-grid, .wf-layout-free) {
	position: relative;
	width: 100%;
	background: transparent;
}

/* --------------------------------------------------------------------------
   Section spacing
   -------------------------------------------------------------------------- */

.wf-pad-xs { padding-block: var(--wf-pad-xs) !important; }
.wf-pad-sm, .wf-pad-s { padding-block: var(--wf-pad-sm) !important; }
.wf-pad-md, .wf-pad-m, .wf-pad { padding-block: var(--wf-pad-md) !important; }
.wf-pad-lg, .wf-pad-l { padding-block: var(--wf-pad-lg) !important; }
.wf-pad-xl, .wf-pad-xxl { padding-block: var(--wf-pad-xl) !important; }
.wf-pad-none { padding-block: 0 !important; }

.wf-pad-top-xs { padding-top: var(--wf-pad-xs) !important; }
.wf-pad-top-sm { padding-top: var(--wf-pad-sm) !important; }
.wf-pad-top-md { padding-top: var(--wf-pad-md) !important; }
.wf-pad-top-lg { padding-top: var(--wf-pad-lg) !important; }
.wf-pad-top-xl { padding-top: var(--wf-pad-xl) !important; }
.wf-pad-top-none { padding-top: 0 !important; }

.wf-pad-bottom-xs { padding-bottom: var(--wf-pad-xs) !important; }
.wf-pad-bottom-sm { padding-bottom: var(--wf-pad-sm) !important; }
.wf-pad-bottom-md { padding-bottom: var(--wf-pad-md) !important; }
.wf-pad-bottom-lg { padding-bottom: var(--wf-pad-lg) !important; }
.wf-pad-bottom-xl { padding-bottom: var(--wf-pad-xl) !important; }
.wf-pad-bottom-none { padding-bottom: 0 !important; }

/* Older names still used on a few pages */
.wf-section-xs, .wf-section-compact { padding-block: var(--wf-pad-xs); }
.wf-section-s, .wf-section-sm, .wf-section-tight { padding-block: var(--wf-pad-sm); }
.wf-section, .wf-section-m { padding-block: var(--wf-pad-md); }
.wf-section-l, .wf-section-lg, .wf-section-large { padding-block: var(--wf-pad-lg); }
.wf-section-xl, .wf-section-xxl { padding-block: var(--wf-pad-xl); }
.wf-section-none { padding-block: 0; }

/* --------------------------------------------------------------------------
   Grids and splits
   -------------------------------------------------------------------------- */

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

.wf-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wf-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wf-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.wf-grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.wf-grid-auto { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }

.wf-grid-gap-sm { gap: var(--wf-gap); }
.wf-grid-gap-md { gap: var(--wf-gap-lg); }
.wf-grid-gap-lg { gap: clamp(2rem, 4vw, 4rem); }

.wf-grid-start { align-items: start; }
.wf-grid-center { align-items: center; }
.wf-grid-end { align-items: end; }
.wf-grid-stretch,
.wf-grid-equal { align-items: stretch; }

/* Elementor puts a boxed container's children inside .e-con-inner. */
.wf-grid.e-con-boxed > .e-con-inner,
.wf-split.e-con-boxed > .e-con-inner {
	display: grid;
	grid-template-columns: inherit;
	gap: inherit;
	align-items: inherit;
}

.wf-split {
	display: grid;
	gap: clamp(2rem, 5vw, 4rem);
}

.wf-split-10-90 { grid-template-columns: minmax(0, 1fr) minmax(0, 9fr); }
.wf-split-20-80 { grid-template-columns: minmax(0, 2fr) minmax(0, 8fr); }
.wf-split-30-70 { grid-template-columns: minmax(0, 3fr) minmax(0, 7fr); }
.wf-split-40-60 { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); }
.wf-split-50-50 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wf-split-60-40 { grid-template-columns: minmax(0, 6fr) minmax(0, 4fr); }
.wf-split-70-30 { grid-template-columns: minmax(0, 7fr) minmax(0, 3fr); }
.wf-split-80-20 { grid-template-columns: minmax(0, 8fr) minmax(0, 2fr); }
.wf-split-90-10 { grid-template-columns: minmax(0, 9fr) minmax(0, 1fr); }

.wf-split-start { align-items: start; }
.wf-split-center { align-items: center; }
.wf-split-end { align-items: end; }
.wf-split-stretch { align-items: stretch; }

.wf-split-gap-sm { gap: var(--wf-gap); }
.wf-split-gap, .wf-split-gap-md { gap: var(--wf-gap-lg); }
.wf-split-gap-lg { gap: clamp(2.5rem, 6vw, 6rem); }

.wf-split-reverse > :first-child { order: 2; }

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

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

@media (max-width: 767px) {
	.wf-grid-2,
	.wf-grid-3,
	.wf-grid-4,
	.wf-grid-5,
	[class*="wf-split-"] {
		grid-template-columns: minmax(0, 1fr);
	}

	.wf-split-reverse > :first-child { order: 0; }
}

/* --------------------------------------------------------------------------
   Small utilities that the Elementor pages already rely on
   -------------------------------------------------------------------------- */

.wf-text-left { text-align: left !important; }
.wf-text-center { text-align: center !important; }
.wf-text-right { text-align: right !important; }
.wf-mx-auto { margin-inline: auto !important; }

.wf-mt-0 { margin-top: 0 !important; }
.wf-mt-xs { margin-top: var(--wf-gap-xs) !important; }
.wf-mt-s { margin-top: var(--wf-gap-sm) !important; }
.wf-mt-m { margin-top: var(--wf-gap) !important; }
.wf-mt-l { margin-top: var(--wf-gap-lg) !important; }
.wf-mt-xl { margin-top: var(--wf-gap-xl) !important; }
.wf-mb-0 { margin-bottom: 0 !important; }
.wf-mb-xs { margin-bottom: var(--wf-gap-xs) !important; }
.wf-mb-s { margin-bottom: var(--wf-gap-sm) !important; }
.wf-mb-m { margin-bottom: var(--wf-gap) !important; }
.wf-mb-l { margin-bottom: var(--wf-gap-lg) !important; }
.wf-mb-xl { margin-bottom: var(--wf-gap-xl) !important; }

.wf-p-0 { padding: 0 !important; }
.wf-gap-sm { gap: var(--wf-gap-sm) !important; }
.wf-gap { gap: var(--wf-gap) !important; }
.wf-gap-lg { gap: var(--wf-gap-lg) !important; }

.wf-hidden { display: none !important; }
.wf-w-full { width: 100% !important; }
.wf-h-full { height: 100% !important; }
.wf-relative { position: relative !important; }
.wf-overflow-hidden { overflow: hidden !important; }

.wf-border-top { border-top: 1px solid var(--wf-line); }
.wf-border-bottom { border-bottom: 1px solid var(--wf-line); }

.has-text-white,
.has-text-white :is(h1, h2, h3, h4, p, li, .elementor-heading-title) {
	color: var(--wf-white) !important;
}

.wf-text-muted,
.has-text-muted {
	color: var(--wf-muted) !important;
}

/* Section backgrounds */
.wf-bg-deep,
.wf-surface-deep {
	background: var(--wf-blue-deep) !important;
}

.wf-bg-panel {
	background: var(--wf-panel) !important;
}

/* A light band. Anything inside switches to dark text. */
.wf-surface-light,
.wf-surface-white,
.wf-surface-pale,
.wf-bg-alt {
	background: var(--wf-light) !important;
	color: var(--wf-ink-text);
}

:is(.wf-surface-light, .wf-surface-white, .wf-surface-pale, .wf-bg-alt, .wf-surface-tint) :is(h1, h2, h3, h4, h5, h6, .elementor-heading-title, strong) {
	color: var(--wf-ink);
}

:is(.wf-surface-light, .wf-surface-white, .wf-surface-pale, .wf-bg-alt, .wf-surface-tint) a:not([class]) {
	color: var(--wf-blue);
}

/* --------------------------------------------------------------------------
   Full-width background

   Add wf-full-bg to a block inside the page container and its background
   runs to both edges of the screen, while the content stays in line with
   the rest of the page. Pair it with a background class to pick the colour:

     wf-full-bg wf-bg-deep        darker blue (the default)
     wf-full-bg wf-bg-panel       card blue
     wf-full-bg wf-surface-light  light band, text switches to dark
     wf-full-bg wf-bg-gradient    the page colour gradient

   It paints with border-image, which doesn't add a sideways scrollbar.
   It is cut off if a parent container has overflow set to hidden.
   -------------------------------------------------------------------------- */

.wf-full-bg {
	--wf-full-bg: var(--wf-blue-deep);
	position: relative;
	border-image: linear-gradient(var(--wf-full-bg) 0 0) fill 0 / / 0 100vw;
}

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

.wf-full-bg.wf-bg-panel {
	--wf-full-bg: var(--wf-panel);
}

.wf-full-bg:is(.wf-surface-light, .wf-surface-white, .wf-surface-pale, .wf-bg-alt, .wf-surface-tint) {
	--wf-full-bg: var(--wf-light);
}

.wf-bg-gradient {
	background: var(--svc-gradient) !important;
	color: var(--svc-ink);
}

.wf-full-bg.wf-bg-gradient {
	background: none !important;
	border-image: var(--svc-gradient) fill 0 / / 0 100vw;
}

/* --------------------------------------------------------------------------
   Long-form text (blog posts, legal pages, case study copy)
   -------------------------------------------------------------------------- */

.wf-prose {
	max-width: var(--wf-reading);
	font-size: var(--fs-body);
	line-height: 1.55;
}

.wf-container.wf-prose {
	max-width: calc(var(--wf-reading) + 2 * var(--wf-gutter));
	margin-inline: 0;
	padding-bottom: var(--wf-pad-lg);
}

.wf-prose h2 {
	margin-top: 2.5rem;
	font-size: var(--fs-h3);
}

.wf-prose h3 {
	margin-top: 2rem;
	font-size: var(--fs-h4);
}

/* Links in running text are underlined; buttons and cards aren't. */
.wf-prose a:not([class]),
.elementor-widget-text-editor a:not([class]) {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

.wf-prose img {
	border-radius: var(--wf-radius);
}