/* ==========================================================================
   Webicious design system · v1.0.1
   Child theme of Hello Elementor for webicious.uk

   Contents
   00. Fonts (self-hosted, no third-party requests)
   01. Tokens
   02. Elementor globals lock (theme is the source of truth)
   03. Base elements
   04. Layout: sections, backgrounds, containers, grids
   05. On-dark scope
   06. Typography classes
   07. Buttons and links
   08. Forms (Elementor Pro, Essential Addons, Ultimate Addons, plain HTML)
   09. Cards, tiles and icon chips
   10. Components: trust strip, ticks, numbered list, steps, testimonials,
       promise card, report preview, FAQ, pills, captions
   11. Header and navigation
   12. Hero and closing call to action
   13. Footer
   14. Utilities
   15. Responsive: tablet (≤ 1024px), mobile (≤ 767px)
   16. Reduced motion

   Naming: every class starts wb-. Elements use __ (wb-report__row),
   variants use -- (wb-card--hover). Breakpoints match Elementor's defaults:
   tablet ≤ 1024px, mobile ≤ 767px.
   ========================================================================== */


/* ==========================================================================
   00. Fonts
   Lexend (display and UI) and Atkinson Hyperlegible (body), Latin subset,
   WOFF2, served from the theme. font-display: swap keeps text visible.
   ========================================================================== */

@font-face {
	font-family: "Lexend";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/lexend-latin-500-normal.woff2") format("woff2");
}

@font-face {
	font-family: "Lexend";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/lexend-latin-600-normal.woff2") format("woff2");
}

@font-face {
	font-family: "Lexend";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/lexend-latin-700-normal.woff2") format("woff2");
}

@font-face {
	font-family: "Atkinson Hyperlegible";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2");
}

@font-face {
	font-family: "Atkinson Hyperlegible";
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/atkinson-hyperlegible-latin-400-italic.woff2") format("woff2");
}

@font-face {
	font-family: "Atkinson Hyperlegible";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2");
}

@font-face {
	font-family: "Atkinson Hyperlegible";
	font-style: italic;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/atkinson-hyperlegible-latin-700-italic.woff2") format("woff2");
}


/* ==========================================================================
   01. Tokens
   Change a value here and it changes everywhere. Keep in step with
   inc/elementor-globals.php, then re-run Appearance › Webicious Setup.
   ========================================================================== */

:root {
	/* Core colour */
	--wb-navy-900: #0F2A3D;      /* Ink: headings, primary text, hero base */
	--wb-navy-950: #0A1D2B;      /* Harbour: footer, darkest gradient stop */
	--wb-teal-700: #0E6B66;      /* Primary action colour */
	--wb-teal-800: #0A524E;      /* Teal hover and pressed */
	--wb-marigold-400: #F2B544;  /* Conversion accent, dark backgrounds only */
	--wb-marigold-500: #E3A02B;  /* Marigold hover */

	/* Neutrals and surfaces */
	--wb-white: #FFFFFF;
	--wb-paper: #FAF8F4;
	--wb-mist: #F0F7F5;
	--wb-teal-100: #DDEFEC;
	--wb-line: #D5E1DE;
	--wb-field-border: #8A9BA3;
	--wb-slate-700: #3A4F5C;
	--wb-slate-500: #5B6E78;
	--wb-skeleton: #E7EEEC;
	--wb-timeline: #B9CFCB;

	/* Text on dark backgrounds */
	--wb-on-dark: #DCE8E6;
	--wb-on-dark-strong: #E6F1EF;
	--wb-on-dark-muted: #9FB3BA;
	--wb-footer-link: #CFE0DC;

	/* Feedback */
	--wb-error: #B42318;
	--wb-success: #1E7B4F;
	--wb-warn-bg: #FDF6E7;
	--wb-warn-text: #7A4F05;

	/* Gradients */
	--wb-grad-hero:
		radial-gradient(circle at 85% 12%, rgba(242, 181, 68, 0.20) 0%, rgba(242, 181, 68, 0) 45%),
		linear-gradient(135deg, #0A1D2B 0%, #0F2A3D 40%, #0E6B66 100%);
	--wb-grad-cta:
		radial-gradient(circle at 15% 100%, rgba(242, 181, 68, 0.18) 0%, rgba(242, 181, 68, 0) 50%),
		linear-gradient(135deg, #0E6B66 0%, #0A524E 100%);
	--wb-grad-step:
		radial-gradient(circle at 90% 10%, rgba(242, 181, 68, 0.22) 0%, rgba(242, 181, 68, 0) 50%),
		linear-gradient(135deg, #0F2A3D 0%, #0E6B66 100%);
	--wb-grad-mist: linear-gradient(180deg, #F0F7F5 0%, #FFFFFF 100%);
	--wb-grad-morning: linear-gradient(180deg, #FAF8F4 0%, #F0F7F5 100%);
	--wb-grad-signal: linear-gradient(90deg, #0E6B66 0%, #2E9C8F 55%, #F2B544 100%);

	/* Type families */
	--wb-font-display: "Lexend", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--wb-font-body: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

	/* Fluid type scale: mobile → desktop */
	--wb-fs-h1: clamp(2.25rem, 1.5rem + 2.5vw, 3.5rem);        /* 36 → 56 */
	--wb-fs-h2: clamp(1.75rem, 1.35rem + 1.4vw, 2.5rem);       /* 28 → 40 */
	--wb-fs-h3: clamp(1.25rem, 1.15rem + 0.35vw, 1.375rem);    /* 20 → 22 */
	--wb-fs-h4: 1.125rem;                                      /* 18 */
	--wb-fs-lead: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);   /* 18 → 20 */
	--wb-fs-body: clamp(1.0625rem, 1rem + 0.2vw, 1.125rem);    /* 17 → 18 */
	--wb-fs-small: 0.9375rem;                                  /* 15, the floor */
	--wb-fs-eyebrow: 0.875rem;                                 /* 14 */
	--wb-fs-button: 1.0625rem;                                 /* 17 */

	--wb-lh-h1: 1.08;
	--wb-lh-h2: 1.2;
	--wb-lh-h3: 1.36;
	--wb-lh-body: 1.65;
	--wb-lh-lead: 1.6;

	/* Spacing: 8-point scale */
	--wb-space-1: 4px;
	--wb-space-2: 8px;
	--wb-space-3: 12px;
	--wb-space-4: 16px;
	--wb-space-5: 24px;
	--wb-space-6: 32px;
	--wb-space-7: 48px;
	--wb-space-8: 64px;
	--wb-space-9: 96px;
	--wb-space-10: 128px;

	/* Layout */
	--wb-section-y: clamp(3.5rem, 2rem + 5vw, 6rem);  /* 56 → 96 */
	--wb-gutter: clamp(20px, 4vw, 40px);
	--wb-container: 1200px;                             /* outer, including gutters */
	--wb-measure: 68ch;
	--wb-narrow: 820px;
	--wb-grid-gap: var(--wb-space-5);
	--wb-header-h: 88px;

	/* Shape and depth */
	--wb-radius-sm: 8px;
	--wb-radius-md: 16px;
	--wb-radius-lg: 24px;
	--wb-radius-pill: 999px;
	--wb-shadow-card: 0 1px 2px rgba(15, 42, 61, 0.06), 0 8px 24px rgba(15, 42, 61, 0.08);
	--wb-shadow-hover: 0 1px 2px rgba(15, 42, 61, 0.06), 0 16px 32px rgba(15, 42, 61, 0.12);
	--wb-shadow-step: 0 16px 32px rgba(15, 42, 61, 0.18);
	--wb-shadow-raised: 0 24px 56px rgba(10, 29, 43, 0.30);
	--wb-shadow-header: 0 1px 0 #D5E1DE, 0 6px 16px rgba(15, 42, 61, 0.08);

	/* Motion and focus */
	--wb-ease: 160ms ease-out;
	--wb-focus: 3px solid var(--wb-navy-900);
	--wb-focus-offset: 3px;

	/* Inline icons (data URIs keep them self-hosted and colourable per use) */
	--wb-icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none'%3E%3Cpath d='M3.5 9.5l3.5 3.5 7.5-8' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	--wb-icon-quote: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 24'%3E%3Cpath fill='%23F2B544' d='M0 24V14C0 6 4 1 12 0l1 4c-4 1-6 4-6 8h5v12H0zm19 0V14c0-8 4-13 12-14l1 4c-4 1-6 4-6 8h5v12H19z'/%3E%3C/svg%3E");
	--wb-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M9 6l6 6-6 6' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	--wb-icon-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 5v14M5 12h14' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
}


/* ==========================================================================
   02. Elementor globals lock
   Forces Elementor's global variables to the theme tokens so widgets that
   default to "Primary", "Text" or "Accent" always match the design, even
   before the kit has been synced. The [class*="elementor-kit-"] selector
   outranks the kit's own .elementor-kit-N rule.
   Disable with the webicious_lock_elementor_globals filter (see inc/setup.php).
   ========================================================================== */

body.wb-lock-globals,
body.wb-lock-globals[class*="elementor-kit-"] {
	/* System colours */
	--e-global-color-primary: var(--wb-navy-900);
	--e-global-color-secondary: var(--wb-marigold-400);
	--e-global-color-text: var(--wb-slate-700);
	--e-global-color-accent: var(--wb-teal-700);

	/* Custom colours (IDs match inc/elementor-globals.php) */
	--e-global-color-wbharbour: var(--wb-navy-950);
	--e-global-color-wbteal800: var(--wb-teal-800);
	--e-global-color-wbgold500: var(--wb-marigold-500);
	--e-global-color-wbwhite: var(--wb-white);
	--e-global-color-wbpaper: var(--wb-paper);
	--e-global-color-wbmist: var(--wb-mist);
	--e-global-color-wbtint: var(--wb-teal-100);
	--e-global-color-wbline: var(--wb-line);
	--e-global-color-wbmuted: var(--wb-slate-500);
	--e-global-color-wbondark: var(--wb-on-dark);
	--e-global-color-wbondarkmuted: var(--wb-on-dark-muted);
	--e-global-color-wberror: var(--wb-error);
	--e-global-color-wbsuccess: var(--wb-success);

	/* System typography */
	--e-global-typography-primary-font-family: "Lexend";
	--e-global-typography-primary-font-weight: 600;
	--e-global-typography-secondary-font-family: "Lexend";
	--e-global-typography-secondary-font-weight: 500;
	--e-global-typography-text-font-family: "Atkinson Hyperlegible";
	--e-global-typography-text-font-weight: 400;
	--e-global-typography-text-font-size: var(--wb-fs-body);
	--e-global-typography-text-line-height: var(--wb-lh-body);
	--e-global-typography-accent-font-family: "Lexend";
	--e-global-typography-accent-font-weight: 600;
	--e-global-typography-accent-font-size: var(--wb-fs-button);

	/* Custom typography */
	--e-global-typography-wbh1-font-family: "Lexend";
	--e-global-typography-wbh1-font-weight: 700;
	--e-global-typography-wbh1-font-size: var(--wb-fs-h1);
	--e-global-typography-wbh1-line-height: var(--wb-lh-h1);
	--e-global-typography-wbh2-font-family: "Lexend";
	--e-global-typography-wbh2-font-weight: 600;
	--e-global-typography-wbh2-font-size: var(--wb-fs-h2);
	--e-global-typography-wbh2-line-height: var(--wb-lh-h2);
	--e-global-typography-wbh3-font-family: "Lexend";
	--e-global-typography-wbh3-font-weight: 600;
	--e-global-typography-wbh3-font-size: var(--wb-fs-h3);
	--e-global-typography-wbh3-line-height: var(--wb-lh-h3);
	--e-global-typography-wbh4-font-family: "Lexend";
	--e-global-typography-wbh4-font-weight: 600;
	--e-global-typography-wbh4-font-size: var(--wb-fs-h4);
	--e-global-typography-wbh4-line-height: 1.45;
	--e-global-typography-wblead-font-family: "Atkinson Hyperlegible";
	--e-global-typography-wblead-font-weight: 400;
	--e-global-typography-wblead-font-size: var(--wb-fs-lead);
	--e-global-typography-wblead-line-height: var(--wb-lh-lead);
	--e-global-typography-wbsmall-font-family: "Atkinson Hyperlegible";
	--e-global-typography-wbsmall-font-weight: 400;
	--e-global-typography-wbsmall-font-size: var(--wb-fs-small);
	--e-global-typography-wbsmall-line-height: 1.6;
	--e-global-typography-wbeyebrow-font-family: "Lexend";
	--e-global-typography-wbeyebrow-font-weight: 600;
	--e-global-typography-wbeyebrow-font-size: var(--wb-fs-eyebrow);
	--e-global-typography-wbeyebrow-text-transform: uppercase;
	--e-global-typography-wbeyebrow-letter-spacing: 0.1em;
}


/* ==========================================================================
   03. Base elements
   Scoped to .wb-theme so these outrank Hello Elementor's reset and any
   kit-level Theme Style values, while per-widget Elementor settings
   (which are more specific) still win.
   ========================================================================== */

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

body.wb-theme {
	margin: 0;
	background-color: var(--wb-white);
	color: var(--wb-slate-700);
	font-family: var(--wb-font-body);
	font-size: var(--wb-fs-body);
	line-height: var(--wb-lh-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

.wb-theme :is(h1, h2, h3, h4, h5, h6) {
	margin-block: 0 var(--wb-space-4);
	color: var(--wb-navy-900);
	font-family: var(--wb-font-display);
	font-weight: 600;
	letter-spacing: -0.01em;
}

.wb-theme h1 { font-size: var(--wb-fs-h1); line-height: var(--wb-lh-h1); font-weight: 700; letter-spacing: -0.02em; }
.wb-theme h2 { font-size: var(--wb-fs-h2); line-height: var(--wb-lh-h2); }
.wb-theme h3 { font-size: var(--wb-fs-h3); line-height: var(--wb-lh-h3); letter-spacing: 0; }
.wb-theme :is(h4, h5, h6) { font-size: var(--wb-fs-h4); line-height: 1.45; letter-spacing: 0; }

.wb-theme p {
	margin-block: 0 var(--wb-space-4);
}

.wb-theme p:last-child {
	margin-bottom: 0;
}

.wb-theme a {
	color: var(--wb-teal-700);
	text-underline-offset: 3px;
	transition: color var(--wb-ease);
}

.wb-theme a:hover {
	color: var(--wb-teal-800);
}

/* Links inside running text are always underlined and bold enough to find. */
.wb-theme :is(.elementor-widget-text-editor, .wb-prose) a:not(.elementor-button) {
	font-weight: 700;
	text-decoration: underline;
	text-decoration-thickness: 1px;
}

.wb-theme .elementor-widget-text-editor {
	font-family: var(--wb-font-body);
	font-size: var(--wb-fs-body);
	line-height: var(--wb-lh-body);
}

.wb-theme strong,
.wb-theme b {
	font-weight: 700;
	color: inherit;
}

.wb-theme img {
	max-width: 100%;
	height: auto;
}

.wb-theme ::selection {
	background: var(--wb-teal-100);
	color: var(--wb-navy-900);
}

/* Keyboard focus: always visible, never removed. */
.wb-theme :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: var(--wb-focus);
	outline-offset: var(--wb-focus-offset);
	box-shadow: none;
}

/* Anchor targets clear the sticky header. */
.wb-theme [id] {
	scroll-margin-top: calc(var(--wb-header-h) + 16px);
}

/* Hello Elementor skip link, restyled. */
.wb-theme .skip-link.screen-reader-text:focus {
	top: var(--wb-space-3);
	left: var(--wb-space-3);
	z-index: 100000;
	padding: var(--wb-space-3) var(--wb-space-5);
	border-radius: var(--wb-radius-sm);
	background: var(--wb-marigold-400);
	color: var(--wb-navy-900);
	font-family: var(--wb-font-display);
	font-weight: 600;
	clip: auto;
	clip-path: none;
	width: auto;
	height: auto;
}


/* ==========================================================================
   04. Layout: sections, backgrounds, containers, grids
   ========================================================================== */

/* Section padding. On an Elementor container, set its padding variables so
   per-container padding in the editor can still override. */
.wb-theme .e-con.wb-section {
	--padding-top: var(--wb-section-y);
	--padding-bottom: var(--wb-section-y);
	--padding-left: var(--wb-gutter);
	--padding-right: var(--wb-gutter);
}

.wb-theme .wb-section:not(.e-con) {
	padding: var(--wb-section-y) var(--wb-gutter);
}

/* Tighter section, e.g. the trust strip. */
.wb-theme .e-con.wb-section--tight {
	--padding-top: var(--wb-space-6);
	--padding-bottom: var(--wb-space-6);
}

.wb-theme .wb-section--tight:not(.e-con) {
	padding-block: var(--wb-space-6);
}

.wb-theme .e-con.wb-section--flush-top { --padding-top: 0; }
.wb-theme .e-con.wb-section--flush-bottom { --padding-bottom: 0; }

/* Side gutters only (for a full-width container without vertical padding). */
.wb-theme .e-con.wb-gutters {
	--padding-left: var(--wb-gutter);
	--padding-right: var(--wb-gutter);
}

/* Backgrounds */
.wb-theme .wb-bg-white { background: var(--wb-white); }
.wb-theme .wb-bg-paper { background: var(--wb-paper); }
.wb-theme .wb-bg-mist { background: var(--wb-mist); }
.wb-theme .wb-bg-tint { background: var(--wb-teal-100); }
.wb-theme .wb-bg-navy { background: var(--wb-navy-900); }
.wb-theme .wb-bg-harbour { background: var(--wb-navy-950); }
.wb-theme .wb-grad-hero { background: var(--wb-grad-hero); }
.wb-theme .wb-grad-cta { background: var(--wb-grad-cta); }
.wb-theme .wb-grad-mist { background: var(--wb-grad-mist); }
.wb-theme .wb-grad-morning { background: var(--wb-grad-morning); }

/* Hairline dividers between sections. */
.wb-theme .wb-border-bottom { border-bottom: 1px solid var(--wb-line); }
.wb-theme .wb-border-top { border-top: 1px solid var(--wb-line); }

/* Width constraints (use on an inner container or a widget). */
.wb-theme .wb-container {
	width: 100%;
	max-width: var(--wb-container);
	margin-inline: auto;
	padding-inline: var(--wb-gutter);
	box-sizing: border-box;
}

.wb-theme .wb-narrow {
	width: 100%;
	max-width: var(--wb-narrow);
	margin-inline: auto;
}

.wb-theme .wb-measure,
.wb-theme .wb-measure p {
	max-width: var(--wb-measure);
}

.wb-theme .wb-center {
	text-align: center;
	margin-inline: auto;
}

.wb-theme .wb-center.e-con,
.wb-theme .wb-center.e-con > .e-con-inner {
	align-items: center;
}

/* Grid helpers for ordinary (flexbox) containers. Elementor's native Grid
   container is preferred; these give the same result with one class.
   Works on boxed (.e-con-inner) and full-width containers. */
.wb-theme :is(.wb-grid-2, .wb-grid-3, .wb-grid-4, .wb-grid-6, .wb-cols-7-5, .wb-cols-5-7, .wb-cols-footer):not(.e-con-boxed),
.wb-theme :is(.wb-grid-2, .wb-grid-3, .wb-grid-4, .wb-grid-6, .wb-cols-7-5, .wb-cols-5-7, .wb-cols-footer).e-con-boxed > .e-con-inner {
	display: grid !important;
	gap: var(--wb-grid-gap);
	align-items: stretch;
}

.wb-theme .wb-grid-2:not(.e-con-boxed), .wb-theme .wb-grid-2.e-con-boxed > .e-con-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wb-theme .wb-grid-3:not(.e-con-boxed), .wb-theme .wb-grid-3.e-con-boxed > .e-con-inner { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wb-theme .wb-grid-4:not(.e-con-boxed), .wb-theme .wb-grid-4.e-con-boxed > .e-con-inner { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.wb-theme .wb-grid-6:not(.e-con-boxed), .wb-theme .wb-grid-6.e-con-boxed > .e-con-inner { grid-template-columns: repeat(6, minmax(0, 1fr)); }

.wb-theme .wb-cols-7-5:not(.e-con-boxed), .wb-theme .wb-cols-7-5.e-con-boxed > .e-con-inner {
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: var(--wb-space-8);
	align-items: center;
}

.wb-theme .wb-cols-5-7:not(.e-con-boxed), .wb-theme .wb-cols-5-7.e-con-boxed > .e-con-inner {
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: var(--wb-space-7);
	align-items: start;
}

.wb-theme .wb-cols-footer:not(.e-con-boxed), .wb-theme .wb-cols-footer.e-con-boxed > .e-con-inner {
	grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));
	gap: 40px;
}

/* Grid children must be allowed to shrink. */
.wb-theme :is(.wb-grid-2, .wb-grid-3, .wb-grid-4, .wb-grid-6, .wb-cols-7-5, .wb-cols-5-7, .wb-cols-footer) > *,
.wb-theme :is(.wb-grid-2, .wb-grid-3, .wb-grid-4, .wb-grid-6, .wb-cols-7-5, .wb-cols-5-7, .wb-cols-footer) > .e-con-inner > * {
	min-width: 0;
	--width: 100%;
}

/* Vertical rhythm inside a heading block: eyebrow → H2 → lead → content. */
.wb-theme .wb-stack-head {
	margin-bottom: var(--wb-space-7);
}


/* ==========================================================================
   05. On-dark scope
   Any of these classes flips text, headings, links and focus rings for a
   dark background. Use wb-on-dark on any custom dark container.
   ========================================================================== */

.wb-theme :is(.wb-on-dark, .wb-hero, .wb-cta, .wb-footer, .wb-promise, .wb-step--featured, .wb-bg-navy, .wb-bg-harbour, .wb-grad-hero, .wb-grad-cta, .wb-menu-panel) {
	color: var(--wb-on-dark);
}

.wb-theme :is(.wb-on-dark, .wb-hero, .wb-cta, .wb-footer, .wb-promise, .wb-step--featured, .wb-bg-navy, .wb-bg-harbour, .wb-grad-hero, .wb-grad-cta, .wb-menu-panel) :is(h1, h2, h3, h4, h5, h6, .elementor-heading-title, strong) {
	color: var(--wb-white);
}

.wb-theme :is(.wb-on-dark, .wb-hero, .wb-cta, .wb-footer, .wb-promise, .wb-step--featured, .wb-bg-navy, .wb-bg-harbour, .wb-grad-hero, .wb-grad-cta, .wb-menu-panel) :is(.elementor-widget-text-editor, .elementor-text-editor, .elementor-icon-list-text, p) {
	color: var(--wb-on-dark);
}

.wb-theme :is(.wb-on-dark, .wb-hero, .wb-cta, .wb-footer, .wb-promise, .wb-step--featured, .wb-bg-navy, .wb-bg-harbour, .wb-grad-hero, .wb-grad-cta, .wb-menu-panel) a:where(:not(.elementor-button, .elementor-item, .wb-btn)) {
	color: var(--wb-white);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 4px;
}

.wb-theme :is(.wb-on-dark, .wb-hero, .wb-cta, .wb-footer, .wb-promise, .wb-step--featured, .wb-bg-navy, .wb-bg-harbour, .wb-grad-hero, .wb-grad-cta, .wb-menu-panel) a:where(:not(.elementor-button, .elementor-item, .wb-btn)):hover {
	color: var(--wb-marigold-400);
}

.wb-theme :is(.wb-on-dark, .wb-hero, .wb-cta, .wb-footer, .wb-promise, .wb-step--featured, .wb-bg-navy, .wb-bg-harbour, .wb-grad-hero, .wb-grad-cta, .wb-menu-panel) :is(a, button, input, select, textarea, summary):focus-visible {
	outline-color: var(--wb-white);
}

/* A white card inside a dark section returns to light-on-dark defaults. */
.wb-theme :is(.wb-hero, .wb-cta, .wb-on-dark) :is(.wb-form-card, .wb-card, .wb-report) {
	color: var(--wb-slate-700);
}

.wb-theme :is(.wb-hero, .wb-cta, .wb-on-dark) :is(.wb-form-card, .wb-card, .wb-report) :is(h1, h2, h3, h4, .elementor-heading-title, strong, label) {
	color: var(--wb-navy-900);
}

.wb-theme :is(.wb-hero, .wb-cta, .wb-on-dark) :is(.wb-form-card, .wb-card) :is(p, .elementor-widget-text-editor) {
	color: var(--wb-slate-500);
}

.wb-theme :is(.wb-hero, .wb-cta, .wb-on-dark) :is(.wb-form-card, .wb-card) a:not(.elementor-button) {
	color: var(--wb-teal-700);
}

.wb-theme :is(.wb-hero, .wb-cta, .wb-on-dark) :is(.wb-form-card, .wb-card) :is(a, button, input, select, textarea):focus-visible {
	outline-color: var(--wb-navy-900);
}


/* ==========================================================================
   06. Typography classes
   Put these in Advanced › CSS Classes on a Heading or Text Editor widget,
   or directly on an HTML element. Size follows the class, not the tag, so
   the semantic level (H1, H2…) can be chosen for document outline.
   ========================================================================== */

.wb-theme :is(.wb-h1, .wb-h2, .wb-h3, .wb-h4) :is(.elementor-heading-title, h1, h2, h3, h4, h5, h6, p),
.wb-theme :is(h1, h2, h3, h4, h5, h6, p):is(.wb-h1, .wb-h2, .wb-h3, .wb-h4) {
	font-family: var(--wb-font-display);
	margin-top: 0;
}

.wb-theme .wb-h1 :is(.elementor-heading-title, h1, h2, h3, p), .wb-theme :is(h1, h2, h3, p).wb-h1 {
	font-size: var(--wb-fs-h1);
	line-height: var(--wb-lh-h1);
	font-weight: 700;
	letter-spacing: -0.02em;
}

.wb-theme .wb-h2 :is(.elementor-heading-title, h1, h2, h3, p), .wb-theme :is(h1, h2, h3, p).wb-h2 {
	font-size: var(--wb-fs-h2);
	line-height: var(--wb-lh-h2);
	font-weight: 600;
	letter-spacing: -0.01em;
}

.wb-theme .wb-h3 :is(.elementor-heading-title, h2, h3, h4, p), .wb-theme :is(h2, h3, h4, p).wb-h3 {
	font-size: var(--wb-fs-h3);
	line-height: var(--wb-lh-h3);
	font-weight: 600;
	letter-spacing: 0;
}

.wb-theme .wb-h4 :is(.elementor-heading-title, h3, h4, h5, p), .wb-theme :is(h3, h4, h5, p).wb-h4 {
	font-size: var(--wb-fs-h4);
	line-height: 1.45;
	font-weight: 600;
	letter-spacing: 0;
}

/* Eyebrow: small caps label above an H2. Teal on light, marigold on dark. */
.wb-theme .wb-eyebrow :is(.elementor-heading-title, p, span),
.wb-theme :is(p, span, h2, h3, h4, h5, h6).wb-eyebrow {
	margin: 0 0 var(--wb-space-3);
	color: var(--wb-teal-700);
	font-family: var(--wb-font-display);
	font-size: var(--wb-fs-eyebrow);
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.wb-theme :is(.wb-on-dark, .wb-hero, .wb-cta, .wb-footer, .wb-promise, .wb-bg-navy, .wb-bg-harbour, .wb-grad-hero, .wb-grad-cta) .wb-eyebrow :is(.elementor-heading-title, p, span),
.wb-theme :is(.wb-on-dark, .wb-hero, .wb-cta, .wb-footer, .wb-promise, .wb-bg-navy, .wb-bg-harbour, .wb-grad-hero, .wb-grad-cta) :is(p, span, h2, h3, h4).wb-eyebrow {
	color: var(--wb-marigold-400);
}

/* Lead paragraph */
.wb-theme .wb-lead,
.wb-theme .wb-lead :is(p, .elementor-widget-container) {
	font-size: var(--wb-fs-lead);
	line-height: var(--wb-lh-lead);
}

.wb-theme .wb-lead {
	max-width: 760px;
}

.wb-theme .wb-center .wb-lead,
.wb-theme .wb-lead.wb-center {
	margin-inline: auto;
}

/* Body, small and muted text */
.wb-theme .wb-body,
.wb-theme .wb-body p {
	font-size: var(--wb-fs-body);
	line-height: var(--wb-lh-body);
}

.wb-theme .wb-small,
.wb-theme .wb-small p {
	font-size: var(--wb-fs-small);
	line-height: 1.6;
}

.wb-theme .wb-muted,
.wb-theme .wb-muted p {
	color: var(--wb-slate-500);
}

.wb-theme :is(.wb-on-dark, .wb-hero, .wb-cta, .wb-footer, .wb-bg-navy, .wb-bg-harbour) :is(.wb-muted, .wb-muted p) {
	color: var(--wb-on-dark-muted);
}

.wb-theme .wb-text-teal,
.wb-theme .wb-text-teal :is(p, .elementor-heading-title) { color: var(--wb-teal-700); }

.wb-theme .wb-text-navy,
.wb-theme .wb-text-navy :is(p, .elementor-heading-title) { color: var(--wb-navy-900); }

/* Elementor Heading and Text Editor widgets pick up the scale by default. */
.wb-theme .elementor-widget-heading .elementor-heading-title {
	font-family: var(--wb-font-display);
}



/* ==========================================================================
   07. Buttons and links
   Put the class on the Button widget (Advanced › CSS Classes). Also works on
   a plain <a> or <button>, and on Essential Addons Creative Button and
   Ultimate Addons buttons inside the classed wrapper.
   ========================================================================== */

/* Shared button shape for every Elementor button on the site. */
.wb-theme :is(.elementor-button, .eael-creative-button, .uael-button, .wb-btn) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 52px;
	padding: 0 28px;
	border: 2px solid transparent;
	border-radius: var(--wb-radius-sm);
	box-sizing: border-box;
	font-family: var(--wb-font-display);
	font-size: var(--wb-fs-button);
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	text-align: center;
	cursor: pointer;
	transition: background-color var(--wb-ease), border-color var(--wb-ease), color var(--wb-ease);
}

/* Default (unclassed) Elementor buttons are primary teal. */
.wb-theme .elementor-button {
	background-color: var(--wb-teal-700);
	color: var(--wb-white);
}

.wb-theme .elementor-button:hover,
.wb-theme .elementor-button:focus-visible {
	background-color: var(--wb-teal-800);
	color: var(--wb-white);
}

.wb-theme .elementor-button .elementor-button-content-wrapper {
	align-items: center;
	gap: 10px;
}

/* Primary: teal. The default action on light backgrounds. */
.wb-theme .wb-btn-primary :is(.elementor-button, .eael-creative-button, .uael-button),
.wb-theme :is(a, button).wb-btn-primary {
	background-color: var(--wb-teal-700);
	border-color: var(--wb-teal-700);
	color: var(--wb-white);
}

.wb-theme .wb-btn-primary :is(.elementor-button, .eael-creative-button, .uael-button):hover,
.wb-theme :is(a, button).wb-btn-primary:hover {
	background-color: var(--wb-teal-800);
	border-color: var(--wb-teal-800);
	color: var(--wb-white);
}

/* Secondary: white with teal outline. */
.wb-theme .wb-btn-secondary :is(.elementor-button, .eael-creative-button, .uael-button),
.wb-theme :is(a, button).wb-btn-secondary {
	background-color: var(--wb-white);
	border-color: var(--wb-teal-700);
	color: var(--wb-teal-700);
}

.wb-theme .wb-btn-secondary :is(.elementor-button, .eael-creative-button, .uael-button):hover,
.wb-theme :is(a, button).wb-btn-secondary:hover {
	background-color: var(--wb-mist);
	border-color: var(--wb-teal-800);
	color: var(--wb-teal-800);
}

/* Accent: marigold with navy text. Free website check on dark backgrounds only. */
.wb-theme .wb-btn-accent :is(.elementor-button, .eael-creative-button, .uael-button),
.wb-theme :is(a, button).wb-btn-accent {
	background-color: var(--wb-marigold-400);
	border-color: var(--wb-marigold-400);
	color: var(--wb-navy-900);
}

.wb-theme .wb-btn-accent :is(.elementor-button, .eael-creative-button, .uael-button):hover,
.wb-theme :is(a, button).wb-btn-accent:hover {
	background-color: var(--wb-marigold-500);
	border-color: var(--wb-marigold-500);
	color: var(--wb-navy-900);
}

/* Ghost: white outline on dark backgrounds (e.g. "Ask us a question"). */
.wb-theme .wb-btn-ghost :is(.elementor-button, .eael-creative-button, .uael-button),
.wb-theme :is(a, button).wb-btn-ghost {
	background-color: transparent;
	border-color: var(--wb-white);
	color: var(--wb-white);
}

.wb-theme .wb-btn-ghost :is(.elementor-button, .eael-creative-button, .uael-button):hover,
.wb-theme :is(a, button).wb-btn-ghost:hover {
	background-color: rgba(255, 255, 255, 0.10);
	color: var(--wb-white);
}

/* Focus on dark buttons uses a white ring. */
.wb-theme :is(.wb-btn-accent, .wb-btn-ghost) :is(.elementor-button, .eael-creative-button, .uael-button):focus-visible,
.wb-theme :is(a, button):is(.wb-btn-accent, .wb-btn-ghost):focus-visible {
	outline: 3px solid var(--wb-white);
	outline-offset: 3px;
}

/* Sizes */
.wb-theme .wb-btn--large :is(.elementor-button, .eael-creative-button, .uael-button),
.wb-theme :is(a, button).wb-btn--large {
	min-height: 56px;
	font-size: 1.125rem;
}

.wb-theme .wb-btn--compact :is(.elementor-button, .eael-creative-button, .uael-button),
.wb-theme :is(a, button).wb-btn--compact {
	min-height: 44px;
	padding: 0 18px;
	font-size: 0.9375rem;
	white-space: nowrap;
}

/* Full width (Elementor: also set Alignment › Justified). */
.wb-theme .wb-btn--block,
.wb-theme .wb-btn--block .elementor-button-wrapper {
	width: 100%;
}

.wb-theme .wb-btn--block :is(.elementor-button, .eael-creative-button, .uael-button),
.wb-theme :is(a, button).wb-btn--block {
	display: flex;
	width: 100%;
}

/* Text link with an arrow, e.g. "See dental websites →" or "About us →". */
.wb-theme .wb-link-arrow :is(a, .elementor-heading-title, p),
.wb-theme a.wb-link-arrow {
	color: var(--wb-teal-700);
	font-family: var(--wb-font-display);
	font-size: 1rem;
	font-weight: 600;
	text-decoration: none;
}

.wb-theme .wb-link-arrow :is(a, .elementor-heading-title, p)::after,
.wb-theme a.wb-link-arrow::after {
	content: " →";
}

.wb-theme .wb-link-arrow a:hover,
.wb-theme a.wb-link-arrow:hover {
	color: var(--wb-teal-800);
	text-decoration: underline;
}


/* ==========================================================================
   08. Forms
   Base field styles for every form on the site (Elementor Pro Form,
   Essential Addons and Ultimate Addons form stylers, plain HTML).
   ========================================================================== */

.wb-theme :is(
	input[type="text"], input[type="email"], input[type="url"], input[type="tel"],
	input[type="number"], input[type="search"], input[type="password"], input[type="date"],
	select, textarea, .elementor-field-textual
):not(#wpadminbar *) {
	width: 100%;
	min-height: 52px;
	padding: 0 16px;
	border: 2px solid var(--wb-field-border);
	border-radius: var(--wb-radius-sm);
	background-color: var(--wb-white);
	box-sizing: border-box;
	color: var(--wb-navy-900);
	font-family: var(--wb-font-body);
	font-size: 1.0625rem;
	line-height: 1.4;
	box-shadow: none;
	transition: border-color var(--wb-ease), box-shadow var(--wb-ease);
}

.wb-theme textarea,
.wb-theme textarea.elementor-field-textual {
	min-height: 96px;
	padding: 12px 16px;
	resize: vertical;
}

.wb-theme :is(input, select, textarea, .elementor-field-textual)::placeholder {
	color: var(--wb-slate-500);
	opacity: 1;
}

/* Focus: teal border plus soft tint halo, with the standard outline. */
.wb-theme :is(input, select, textarea, .elementor-field-textual):focus {
	border-color: var(--wb-teal-700);
	box-shadow: 0 0 0 4px var(--wb-teal-100);
	outline: none;
}

.wb-theme :is(input, select, textarea, .elementor-field-textual):focus-visible {
	outline: 3px solid var(--wb-navy-900);
	outline-offset: 2px;
}

/* Errors: Elementor adds .elementor-error to the field group. */
.wb-theme :is(input, select, textarea, .elementor-field-textual)[aria-invalid="true"],
.wb-theme .elementor-error .elementor-field-textual {
	border-color: var(--wb-error);
}

.wb-theme :is(.elementor-field-group .elementor-message, .elementor-error .elementor-message, .wb-field-error) {
	color: var(--wb-error);
	font-size: var(--wb-fs-small);
}

/* Labels */
.wb-theme :is(.elementor-field-group > label, .elementor-field-label, .wb-form label, .eael-contact-form label, .uael-form label) {
	display: block;
	margin-bottom: var(--wb-space-2);
	color: var(--wb-navy-900);
	font-family: var(--wb-font-display);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.4;
}

.wb-theme .elementor-mark-required .elementor-field-label::after {
	color: var(--wb-error);
}

/* Elementor Pro Form: spacing, submit and messages. */
.wb-theme .wb-form .elementor-field-group:not(.elementor-field-type-submit):not(.elementor-field-type-html) {
	margin-bottom: 20px;
}

.wb-theme .wb-form .elementor-field-type-html {
	margin-bottom: var(--wb-space-4);
}

.wb-theme .wb-form .elementor-field-type-submit .elementor-button,
.wb-theme .wb-form .e-form__buttons__wrapper__button-next {
	width: 100%;
	min-height: 56px;
	font-size: 1.125rem;
}

.wb-theme .elementor-message {
	margin-top: var(--wb-space-4);
	font-size: var(--wb-fs-small);
	line-height: 1.5;
}

.wb-theme .elementor-message.elementor-message-success {
	color: var(--wb-success);
}

.wb-theme .elementor-message.elementor-message-danger {
	color: var(--wb-error);
}

/* Elementor Pro multi-step form: we draw our own indicator in an HTML
   field (.wb-step-indicator), so hide Elementor's. Next is full-width
   primary; Previous becomes a quiet text button underneath. */
.wb-theme .wb-form .e-form__indicators {
	display: none;
}

.wb-theme .wb-form .e-form__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wb-space-3);
}

.wb-theme .wb-form .e-form__buttons__wrapper {
	flex: 1 1 100%;
	padding: 0;
	margin: 0;
}

.wb-theme .wb-form .e-form__buttons__wrapper:has(.e-form__buttons__wrapper__button-next),
.wb-theme .wb-form .e-form__buttons__wrapper.elementor-field-type-submit {
	order: 1;
}

.wb-theme .wb-form .e-form__buttons__wrapper:has(.e-form__buttons__wrapper__button-previous) {
	order: 2;
}

.wb-theme .wb-form .e-form__buttons__wrapper__button-previous {
	min-height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--wb-teal-700);
	font-size: 1rem;
}

.wb-theme .wb-form .e-form__buttons__wrapper__button-previous:hover {
	background: transparent;
	color: var(--wb-teal-800);
	text-decoration: underline;
}

/* Step indicator (HTML field at the top of each step). */
.wb-theme .wb-step-indicator {
	margin-bottom: var(--wb-space-2);
}

.wb-theme .wb-step-indicator__label {
	display: block;
	margin: 0 0 var(--wb-space-2);
	color: var(--wb-slate-500);
	font-family: var(--wb-font-display);
	font-size: 0.875rem;
	font-weight: 600;
}

.wb-theme .wb-step-indicator__bars {
	display: flex;
	gap: 6px;
}

.wb-theme .wb-step-indicator__bars > span {
	flex: 1 1 0;
	height: 6px;
	border-radius: 3px;
	background: var(--wb-line);
}

.wb-theme .wb-step-indicator__bars > span.is-done {
	background: var(--wb-teal-700);
}

/* Form heading inside the card (HTML field or Heading widget). */
.wb-theme .wb-form-title,
.wb-theme .wb-form-title .elementor-heading-title {
	margin: 0;
	color: var(--wb-navy-900);
	font-family: var(--wb-font-display);
	font-size: clamp(1.375rem, 1.25rem + 0.4vw, 1.625rem);
	font-weight: 600;
	line-height: 1.25;
}

/* "Checking www.example.co.uk · GP surgery" summary on step 2. */
.wb-theme .wb-check-summary {
	margin: 0;
	padding: 10px 12px;
	border-radius: var(--wb-radius-sm);
	background: var(--wb-mist);
	color: var(--wb-slate-700);
	font-size: var(--wb-fs-small);
}

.wb-theme .wb-check-summary[hidden] {
	display: none;
}

.wb-theme .wb-check-summary strong {
	color: var(--wb-navy-900);
	word-break: break-word;
}

/* Form note under the button (privacy reminder). */
.wb-theme .wb-form-note {
	margin-top: var(--wb-space-4);
}

.wb-theme .wb-form-note p {
	margin: 0;
	color: var(--wb-slate-500);
	font-size: var(--wb-fs-small);
	line-height: 1.55;
}

/* The white card that holds the hero form. */
.wb-theme .wb-form-card {
	background: var(--wb-white);
	border-radius: var(--wb-radius-lg);
	box-shadow: var(--wb-shadow-raised);
	color: var(--wb-slate-700);
}

.wb-theme .e-con.wb-form-card {
	--padding-top: clamp(24px, 1rem + 2vw, 40px);
	--padding-bottom: clamp(24px, 1rem + 2vw, 40px);
	--padding-left: clamp(24px, 1rem + 2vw, 40px);
	--padding-right: clamp(24px, 1rem + 2vw, 40px);
}

.wb-theme .wb-form-card:not(.e-con) {
	padding: clamp(24px, 1rem + 2vw, 40px);
}

/* Inline URL form for the closing call to action (HTML widget). */
.wb-theme .wb-inline-form {
	display: flex;
	gap: var(--wb-space-3);
	max-width: 640px;
	margin: 0 auto;
}

.wb-theme .wb-inline-form input {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 56px;
	border-color: var(--wb-white);
}

.wb-theme .wb-inline-form :is(button, .wb-btn) {
	flex: none;
	min-height: 56px;
}

/* Visually hidden label for single-field forms. */
.wb-theme .wb-sr-only,
.wb-theme .wb-inline-form label {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}


/* ==========================================================================
   09. Cards, tiles and icon chips
   ========================================================================== */

/* Card: white surface, hairline border, soft shadow. */
.wb-theme .wb-card {
	background: var(--wb-white);
	border: 1px solid var(--wb-line);
	border-radius: var(--wb-radius-md);
	box-shadow: var(--wb-shadow-card);
}

.wb-theme .e-con.wb-card {
	--padding-top: 28px;
	--padding-bottom: 28px;
	--padding-left: 28px;
	--padding-right: 28px;
}

.wb-theme .wb-card:not(.e-con) {
	padding: 28px;
}

.wb-theme .wb-card--flat { box-shadow: none; }
.wb-theme .wb-card--paper { background: var(--wb-paper); border-color: transparent; box-shadow: none; }
.wb-theme .wb-card--mist { background: var(--wb-mist); border-color: transparent; box-shadow: none; }
.wb-theme .wb-card--lg { border-radius: var(--wb-radius-lg); }

/* Hover lift for any clickable card. */
.wb-theme :is(.wb-card--hover, .wb-tile) {
	transition: transform var(--wb-ease), box-shadow var(--wb-ease), background-color var(--wb-ease), border-color var(--wb-ease);
}

.wb-theme :is(.wb-card--hover, .wb-tile):hover,
.wb-theme :is(.wb-card--hover, .wb-tile):focus-within {
	transform: translateY(-4px);
	background-color: var(--wb-mist);
	border-color: var(--wb-teal-700);
	box-shadow: var(--wb-shadow-hover);
}

/* Practice tile: a whole-card link (Container › HTML Tag: a, with a Link). */
.wb-theme .wb-tile {
	position: relative;
	display: flex;
	flex-direction: column;
	color: var(--wb-navy-900);
	text-decoration: none;
	background: var(--wb-white);
	border: 1px solid var(--wb-line);
	border-radius: var(--wb-radius-md);
	box-shadow: var(--wb-shadow-card);
}

.wb-theme .e-con.wb-tile {
	--padding-top: 28px;
	--padding-bottom: 28px;
	--padding-left: 28px;
	--padding-right: 28px;
	--gap: 0px;
	--row-gap: 0px;
}

.wb-theme .wb-tile:not(.e-con) {
	padding: 28px;
}

/* Inner container holding title, text and link, so on mobile the tile can
   become a row of chip | body while the body stays stacked. */
.wb-theme .wb-tile__body {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	min-width: 0;
}

.wb-theme .e-con.wb-tile__body {
	--padding-top: 0;
	--padding-bottom: 0;
	--padding-left: 0;
	--padding-right: 0;
	--gap: 0px;
	--row-gap: 0px;
	--flex-direction: column;
	--flex-grow: 1;
}

.wb-theme a.wb-tile:hover {
	color: var(--wb-navy-900);
}

.wb-theme .wb-tile__title :is(.elementor-heading-title, h3, p),
.wb-theme :is(h3, p, span).wb-tile__title {
	margin: 0 0 var(--wb-space-2);
	color: var(--wb-navy-900);
	font-family: var(--wb-font-display);
	font-size: clamp(1.25rem, 1.15rem + 0.3vw, 1.3125rem);
	font-weight: 600;
	line-height: 1.3;
}

.wb-theme .wb-tile__text,
.wb-theme .wb-tile__text p {
	flex-grow: 1;
	color: var(--wb-slate-700);
	font-size: 1.0625rem;
	line-height: 1.55;
}

.wb-theme .wb-tile__text {
	flex-grow: 1;
}

.wb-theme .wb-tile__link :is(.elementor-heading-title, p, span),
.wb-theme :is(p, span).wb-tile__link {
	margin: var(--wb-space-5) 0 0;
	color: var(--wb-teal-700);
	font-family: var(--wb-font-display);
	font-size: 1rem;
	font-weight: 600;
}

.wb-theme .wb-tile__link :is(.elementor-heading-title, p, span)::after,
.wb-theme :is(p, span).wb-tile__link::after {
	content: " →";
}

.wb-theme .wb-tile:hover .wb-tile__link :is(.elementor-heading-title, p, span),
.wb-theme .wb-tile:hover :is(p, span).wb-tile__link {
	color: var(--wb-teal-800);
}

/* Icon chip: square tint chip with a teal stroke icon.
   On an Elementor Icon widget (View: Default), or an Icon Box / UAE Info Box
   inside a .wb-iconbox wrapper, or a plain span. */
.wb-theme .wb-icon-chip .elementor-icon,
.wb-theme span.wb-icon-chip,
.wb-theme .wb-iconbox .elementor-icon-box-icon .elementor-icon,
.wb-theme .wb-iconbox .uael-icon-wrap .uael-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 14px;
	background: var(--wb-teal-100);
	color: var(--wb-teal-700);
	fill: var(--wb-teal-700);
	font-size: 28px;
	line-height: 1;
	transition: background-color var(--wb-ease), color var(--wb-ease);
}

.wb-theme .wb-icon-chip .elementor-icon svg,
.wb-theme .wb-iconbox .elementor-icon svg {
	width: 28px;
	height: 28px;
	fill: currentColor;
}

.wb-theme .wb-icon-chip {
	margin-bottom: 20px;
}

.wb-theme .wb-icon-chip--sm .elementor-icon,
.wb-theme span.wb-icon-chip--sm,
.wb-theme .wb-iconbox--sm .elementor-icon-box-icon .elementor-icon {
	width: 48px;
	height: 48px;
	border-radius: 12px;
	font-size: 24px;
}

.wb-theme .wb-icon-chip--sm .elementor-icon svg,
.wb-theme .wb-iconbox--sm .elementor-icon svg {
	width: 24px;
	height: 24px;
}

/* On tile hover the chip inverts. */
.wb-theme .wb-tile:hover .wb-icon-chip .elementor-icon,
.wb-theme .wb-tile:hover span.wb-icon-chip {
	background: var(--wb-teal-700);
	color: var(--wb-white);
	fill: var(--wb-white);
}

/* Elementor Icon Box (and UAE Info Box) as a feature item. */
.wb-theme .wb-iconbox .elementor-icon-box-wrapper {
	text-align: left;
}

.wb-theme .wb-iconbox .elementor-icon-box-icon {
	margin-bottom: var(--wb-space-4);
}

.wb-theme .wb-iconbox :is(.elementor-icon-box-title, .uael-infobox-title) {
	margin: 0 0 6px;
	color: var(--wb-navy-900);
	font-family: var(--wb-font-display);
	font-size: 1.1875rem;
	font-weight: 600;
	line-height: 1.35;
}

.wb-theme .wb-iconbox :is(.elementor-icon-box-title, .uael-infobox-title) a {
	color: inherit;
	text-decoration: none;
}

.wb-theme .wb-iconbox :is(.elementor-icon-box-description, .uael-infobox-text) {
	margin: 0;
	color: var(--wb-slate-700);
	font-family: var(--wb-font-body);
	font-size: var(--wb-fs-body);
	line-height: var(--wb-lh-body);
}


/* ==========================================================================
   10. Components
   ========================================================================== */

/* --- Trust strip: Icon List widget, Layout: Inline ----------------------- */

.wb-theme .wb-trust .elementor-icon-list-items {
	display: grid !important;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 16px 24px;
	margin: 0;
	padding: 0;
}

.wb-theme .wb-trust .elementor-icon-list-item {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 !important;
	padding: 0 !important;
}

.wb-theme .wb-trust .elementor-icon-list-item::after {
	display: none !important; /* Elementor's inline divider */
}

.wb-theme .wb-trust .elementor-icon-list-icon {
	flex: none;
	color: var(--wb-teal-700);
}

.wb-theme .wb-trust .elementor-icon-list-icon :is(i, svg) {
	width: 22px;
	height: 22px;
	font-size: 22px;
	color: var(--wb-teal-700);
	fill: var(--wb-teal-700);
}

.wb-theme .wb-trust .elementor-icon-list-text {
	padding: 0 !important;
	color: var(--wb-navy-900);
	font-family: var(--wb-font-display);
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.3;
}

/* --- Tick list: Icon List widget (or a plain <ul>) --------------------------
   wb-ticks: marigold chips with navy ticks (dark backgrounds).
   wb-ticks--teal: tint chips with teal ticks (light backgrounds).
   For the Icon List, choose any icon; the chip and tick are drawn by CSS. */

.wb-theme .wb-ticks .elementor-icon-list-items,
.wb-theme ul.wb-ticks,
.wb-theme .wb-ticks ul:not(.elementor-icon-list-items) {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wb-theme .wb-ticks .elementor-icon-list-item,
.wb-theme ul.wb-ticks > li,
.wb-theme .wb-ticks ul:not(.elementor-icon-list-items) > li {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 14px;
	margin: 0 !important;
	padding: 0 !important;
	font-size: 1.0625rem;
	line-height: 1.5;
}

.wb-theme .wb-ticks .elementor-icon-list-icon,
.wb-theme ul.wb-ticks > li::before,
.wb-theme .wb-ticks ul:not(.elementor-icon-list-items) > li::before {
	content: "";
	flex: none;
	width: 28px;
	height: 28px;
	margin-top: -1px;
	border-radius: 50%;
	background-color: var(--wb-marigold-400);
	background-image: none;
	position: relative;
}

/* The tick itself, masked so its colour follows currentColor. */
.wb-theme .wb-ticks .elementor-icon-list-icon::after,
.wb-theme ul.wb-ticks > li::after,
.wb-theme .wb-ticks ul:not(.elementor-icon-list-items) > li::after {
	content: "";
	position: absolute;
	top: 6px;
	left: 7px;
	width: 14px;
	height: 14px;
	background-color: var(--wb-navy-900);
	-webkit-mask: var(--wb-icon-check) center / contain no-repeat;
	mask: var(--wb-icon-check) center / contain no-repeat;
}

/* Plain lists: the ::after sits relative to the li. */
.wb-theme ul.wb-ticks > li::after,
.wb-theme .wb-ticks ul:not(.elementor-icon-list-items) > li::after {
	top: 6px;
	left: 7px;
}

/* Hide whatever icon was picked in the Icon List; CSS draws the tick. */
.wb-theme .wb-ticks .elementor-icon-list-icon :is(i, svg) {
	display: none;
}

.wb-theme .wb-ticks .elementor-icon-list-text {
	padding: 0 !important;
	color: inherit;
}

.wb-theme .wb-ticks--teal .elementor-icon-list-icon,
.wb-theme ul.wb-ticks--teal > li::before,
.wb-theme .wb-ticks--teal ul:not(.elementor-icon-list-items) > li::before {
	background-color: var(--wb-teal-100);
}

.wb-theme .wb-ticks--teal .elementor-icon-list-icon::after,
.wb-theme ul.wb-ticks--teal > li::after,
.wb-theme .wb-ticks--teal ul:not(.elementor-icon-list-items) > li::after {
	background-color: var(--wb-teal-700);
}

.wb-theme .wb-ticks--white .elementor-icon-list-text,
.wb-theme .wb-hero .wb-ticks .elementor-icon-list-text {
	color: var(--wb-white);
	font-size: 1.125rem;
}

/* --- Numbered list: Text Editor <ol> with tint number chips ---------------- */

.wb-theme .wb-numbered ol,
.wb-theme ol.wb-numbered {
	display: flex;
	flex-direction: column;
	gap: var(--wb-space-5);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: wb-num;
}

.wb-theme .wb-numbered ol > li,
.wb-theme ol.wb-numbered > li {
	position: relative;
	min-height: 40px;
	padding-left: 58px;
	counter-increment: wb-num;
	color: var(--wb-slate-700);
	line-height: var(--wb-lh-body);
}

.wb-theme .wb-numbered ol > li::before,
.wb-theme ol.wb-numbered > li::before {
	content: counter(wb-num);
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background: var(--wb-teal-100);
	color: var(--wb-teal-700);
	font-family: var(--wb-font-display);
	font-weight: 700;
}

/* The bold lead-in of each item reads as a small heading. */
.wb-theme .wb-numbered li > strong:first-child {
	display: block;
	margin-bottom: 4px;
	color: var(--wb-navy-900);
	font-family: var(--wb-font-display);
	font-size: var(--wb-fs-h4);
	font-weight: 600;
}

/* --- How it works: steps -------------------------------------------------- */

.wb-theme .wb-step {
	position: relative;
	background: var(--wb-white);
	border: 1px solid var(--wb-line);
	border-radius: var(--wb-radius-md);
}

.wb-theme .e-con.wb-step {
	--padding-top: 28px;
	--padding-bottom: 28px;
	--padding-left: 28px;
	--padding-right: 28px;
}

.wb-theme .wb-step:not(.e-con) {
	padding: 28px;
}

.wb-theme .wb-step--featured {
	background: var(--wb-grad-step);
	border-color: transparent;
	box-shadow: var(--wb-shadow-step);
}

/* Step number: put on a Heading widget containing just the number. */
.wb-theme .wb-step__num :is(.elementor-heading-title, p, span),
.wb-theme :is(p, span).wb-step__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: 0 0 20px;
	border: 2px solid var(--wb-teal-700);
	border-radius: 50%;
	box-sizing: border-box;
	color: var(--wb-teal-700);
	font-family: var(--wb-font-display);
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1;
}

.wb-theme .wb-step--featured .wb-step__num :is(.elementor-heading-title, p, span),
.wb-theme .wb-step--featured :is(p, span).wb-step__num {
	border-color: var(--wb-marigold-400);
	background: var(--wb-marigold-400);
	color: var(--wb-navy-900);
}

/* "Start here" badge, top right of the featured step. */
.wb-theme .wb-step__badge :is(.elementor-heading-title, p, span),
.wb-theme :is(p, span).wb-step__badge {
	display: inline-block;
	padding: 4px 12px;
	border: 1px solid rgba(255, 255, 255, 0.5);
	border-radius: var(--wb-radius-pill);
	color: var(--wb-white);
	font-family: var(--wb-font-display);
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.4;
}

.wb-theme .wb-step .wb-h3 :is(.elementor-heading-title, h3) {
	margin-bottom: var(--wb-space-2);
}

/* --- Testimonials --------------------------------------------------------- */

.wb-theme .wb-testimonial {
	position: relative;
	background: var(--wb-paper);
	border-radius: var(--wb-radius-md);
}

.wb-theme .e-con.wb-testimonial {
	--padding-top: 84px; /* room for the quote mark */
	--padding-bottom: 32px;
	--padding-left: 32px;
	--padding-right: 32px;
}

.wb-theme .wb-testimonial:not(.e-con) {
	padding: 84px 32px 32px;
}

.wb-theme .wb-testimonial::before {
	content: "";
	position: absolute;
	top: 32px;
	left: 32px;
	width: 36px;
	height: 27px;
	background: var(--wb-icon-quote) center / contain no-repeat;
}

.wb-theme .wb-testimonial :is(.elementor-widget-text-editor, blockquote, .elementor-testimonial-content) {
	color: var(--wb-navy-900);
	font-size: var(--wb-fs-body);
	line-height: var(--wb-lh-body);
	font-style: normal;
}

.wb-theme .wb-testimonial blockquote {
	margin: 0;
	padding: 0;
	border: 0;
}

.wb-theme .wb-testimonial__cite :is(.elementor-heading-title, p, cite),
.wb-theme :is(p, cite, figcaption).wb-testimonial__cite,
.wb-theme .wb-testimonial .elementor-testimonial-name {
	margin: var(--wb-space-5) 0 0;
	color: var(--wb-slate-700);
	font-family: var(--wb-font-display);
	font-size: var(--wb-fs-small);
	font-style: normal;
	font-weight: 600;
}

/* Elementor Testimonial widget inside a wb-testimonial wrapper. */
.wb-theme .wb-testimonial .elementor-testimonial-wrapper {
	text-align: left;
}

.wb-theme .wb-testimonial .elementor-testimonial-image {
	display: none;
}

/* --- Promise card --------------------------------------------------------- */

.wb-theme .wb-promise {
	background: var(--wb-navy-900);
	border-radius: var(--wb-radius-lg);
}

.wb-theme .e-con.wb-promise {
	--padding-top: clamp(28px, 1rem + 2vw, 40px);
	--padding-bottom: clamp(28px, 1rem + 2vw, 40px);
	--padding-left: clamp(28px, 1rem + 2vw, 40px);
	--padding-right: clamp(28px, 1rem + 2vw, 40px);
}

.wb-theme .wb-promise:not(.e-con) {
	padding: clamp(28px, 1rem + 2vw, 40px);
}

.wb-theme .wb-promise .wb-ticks .elementor-icon-list-text {
	color: var(--wb-white);
}

/* Divider + footnote line at the bottom of the promise card. */
.wb-theme .wb-promise__foot {
	margin-top: var(--wb-space-6);
	padding-top: var(--wb-space-5);
	border-top: 1px solid rgba(255, 255, 255, 0.18);
}

/* --- Report preview (HTML widget; markup in the build guide) -------------- */

.wb-theme .wb-report {
	overflow: hidden;
	margin: 0;
	background: var(--wb-white);
	border: 1px solid var(--wb-line);
	border-radius: var(--wb-radius-lg);
	box-shadow: 0 1px 2px rgba(15, 42, 61, 0.06), 0 24px 48px rgba(15, 42, 61, 0.12);
}

.wb-theme .wb-report__head {
	padding: 24px 28px;
	background: var(--wb-navy-900);
	color: var(--wb-white);
}

.wb-theme .wb-report__label {
	margin: 0 0 4px;
	color: var(--wb-marigold-400);
	font-family: var(--wb-font-display);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.wb-theme .wb-report__title {
	margin: 0;
	color: var(--wb-white);
	font-family: var(--wb-font-display);
	font-size: 1.375rem;
	font-weight: 600;
}

.wb-theme .wb-report__meta {
	margin: 4px 0 0;
	color: var(--wb-on-dark-muted);
	font-size: 0.875rem;
}

.wb-theme .wb-report__rows {
	margin: 0;
	padding: 8px 28px 20px;
	list-style: none;
}

.wb-theme .wb-report__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wb-space-4);
	padding: var(--wb-space-4) 0;
	border-bottom: 1px solid var(--wb-line);
}

.wb-theme .wb-report__row:last-child {
	border-bottom: 0;
}

.wb-theme .wb-report__name {
	margin: 0 0 6px;
	color: var(--wb-navy-900);
	font-family: var(--wb-font-display);
	font-size: 1rem;
	font-weight: 600;
}

.wb-theme .wb-report__bar {
	display: block;
	width: var(--wb-bar, 180px);
	max-width: 100%;
	height: 8px;
	border-radius: 4px;
	background: var(--wb-skeleton);
}

/* Status pills (report rows, labels). */
.wb-theme .wb-pill {
	flex: none;
	display: inline-block;
	padding: 4px 12px;
	border-radius: var(--wb-radius-pill);
	background: var(--wb-teal-100);
	color: var(--wb-teal-800);
	font-family: var(--wb-font-display);
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.4;
}

.wb-theme .wb-pill--warn {
	background: var(--wb-warn-bg);
	color: var(--wb-warn-text);
}

/* Pill note on dark, e.g. "No tracking cookies" in the footer. */
.wb-theme .wb-pill-note,
.wb-theme .wb-pill-note p {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 8px 14px;
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: var(--wb-radius-pill);
	color: var(--wb-on-dark);
	font-size: 0.875rem;
	line-height: 1.4;
}

.wb-theme .wb-pill-note p {
	padding: 0;
	border: 0;
}

.wb-theme .wb-pill-note {
	margin-top: var(--wb-space-3);
}

/* Caption under a figure or preview. */
.wb-theme .wb-caption,
.wb-theme .wb-caption p {
	margin: 14px 0 0;
	color: var(--wb-slate-500);
	font-size: var(--wb-fs-small);
	text-align: center;
}

/* --- FAQ: Elementor nested Accordion, legacy Accordion/Toggle, EA Accordion */

.wb-theme .wb-faq :is(.e-n-accordion, .elementor-accordion, .elementor-toggle, .eael-adv-accordion) {
	border-top: 1px solid var(--wb-line);
}

.wb-theme .wb-faq :is(.e-n-accordion-item, .elementor-accordion-item, .elementor-toggle-item, .eael-accordion-list) {
	margin: 0;
	border: 0;
	border-bottom: 1px solid var(--wb-line);
	background: transparent;
}

/* Question row */
.wb-theme .wb-faq :is(.e-n-accordion-item-title, .elementor-tab-title, .eael-accordion-header) {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-direction: row;
	gap: var(--wb-space-4);
	min-height: 72px;
	padding: 12px 0;
	border: 0;
	background: transparent;
	color: var(--wb-navy-900);
	cursor: pointer;
}

.wb-theme .wb-faq :is(.e-n-accordion-item-title-text, .elementor-accordion-title, .elementor-toggle-title, .eael-accordion-tab-title) {
	color: var(--wb-navy-900);
	font-family: var(--wb-font-display);
	font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
	font-weight: 600;
	line-height: 1.35;
	text-decoration: none;
}

.wb-theme .wb-faq .elementor-tab-title a {
	color: inherit;
	text-decoration: none;
}

/* Put the open/close icon on the right as a tint chip. */
.wb-theme .wb-faq :is(.e-n-accordion-item-title-icon, .elementor-accordion-icon, .elementor-toggle-icon, .eael-accordion-tab-icon) {
	order: 2;
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	margin: 0;
	border-radius: 50%;
	background: var(--wb-teal-100);
	color: var(--wb-teal-700);
	fill: var(--wb-teal-700);
	font-size: 14px;
	transition: background-color var(--wb-ease), color var(--wb-ease);
}

.wb-theme .wb-faq :is(.e-n-accordion-item-title-icon, .elementor-accordion-icon, .elementor-toggle-icon) :is(svg, i) {
	width: 14px;
	height: 14px;
	font-size: 14px;
	fill: currentColor;
	color: currentColor;
}

.wb-theme .wb-faq .elementor-accordion-icon.elementor-accordion-icon-left,
.wb-theme .wb-faq .elementor-toggle-icon.elementor-toggle-icon-left {
	float: none;
}

/* Open state: solid teal chip. */
.wb-theme .wb-faq .e-n-accordion-item[open] .e-n-accordion-item-title-icon,
.wb-theme .wb-faq .elementor-tab-title.elementor-active :is(.elementor-accordion-icon, .elementor-toggle-icon),
.wb-theme .wb-faq .eael-accordion-header.active .eael-accordion-tab-icon {
	background: var(--wb-teal-700);
	color: var(--wb-white);
	fill: var(--wb-white);
}

/* Answer */
.wb-theme .wb-faq :is(.e-n-accordion-item > [role="region"], .elementor-tab-content, .eael-accordion-content) {
	padding: 0 0 var(--wb-space-5);
	border: 0;
	background: transparent;
	color: var(--wb-slate-700);
	font-size: var(--wb-fs-body);
	line-height: var(--wb-lh-body);
}

.wb-theme .wb-faq :is(.e-n-accordion-item > [role="region"], .elementor-tab-content) :is(p, .elementor-widget-text-editor) {
	max-width: var(--wb-measure);
}

.wb-theme .wb-faq .e-n-accordion-item > [role="region"] > .e-con {
	--padding-top: 0;
	--padding-left: 0;
	--padding-right: 0;
	--padding-bottom: 0;
	border: 0;
}

/* --- Signal band (6px gradient strip) ------------------------------------ */

.wb-theme .wb-signal-band {
	display: block;
	height: 6px;
	background: var(--wb-grad-signal);
}


/* ==========================================================================
   11. Header and navigation
   Elementor Pro Theme Builder header. Outer container: wb-header
   (+ wb-header--overlay to sit over the hero, + wb-header--sticky to stick).
   The script adds .is-scrolled after 80px; Elementor's own sticky effects
   class (.elementor-sticky--effects) is styled the same way.
   ========================================================================== */

/* The Theme Builder wrapper is what must stick, so it can travel the page. */
.wb-theme .elementor-location-header:has(.wb-header--sticky) {
	position: sticky;
	top: 0;
	z-index: 900;
}

.wb-theme.admin-bar .elementor-location-header:has(.wb-header--sticky) {
	top: 32px;
}

.wb-theme .wb-header {
	position: relative;
	z-index: 900;
	min-height: var(--wb-header-h);
	background: var(--wb-white);
	box-shadow: var(--wb-shadow-header);
	transition: background-color var(--wb-ease), box-shadow var(--wb-ease);
}

.wb-theme .e-con.wb-header {
	--padding-top: 0;
	--padding-bottom: 0;
	--padding-left: var(--wb-gutter);
	--padding-right: var(--wb-gutter);
	--min-height: var(--wb-header-h);
}

/* Overlay state: transparent over the hero gradient. */
.wb-theme:has(.wb-hero) .wb-header--overlay:not(.is-scrolled):not(.elementor-sticky--effects) {
	background: transparent;
	box-shadow: none;
}

/* Logo (Site Title widget or Heading) and tagline. */
.wb-theme .wb-logo :is(.elementor-heading-title, a, p) {
	margin: 0;
	color: var(--wb-navy-900);
	font-family: var(--wb-font-display);
	font-size: clamp(1.375rem, 1.25rem + 0.4vw, 1.625rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.02em;
	text-decoration: none;
}

.wb-theme .wb-logo-tag :is(.elementor-heading-title, p, span) {
	margin: 4px 0 0;
	color: var(--wb-slate-500);
	font-family: var(--wb-font-body);
	font-size: 0.8125rem;
	font-weight: 400;
	line-height: 1.3;
}

/* Two logo images: show the light one on the overlay, the dark one when scrolled. */
.wb-theme .wb-header .wb-logo-on-dark { display: none; }
.wb-theme:has(.wb-hero) .wb-header--overlay:not(.is-scrolled):not(.elementor-sticky--effects) .wb-logo-on-dark { display: block; }
.wb-theme:has(.wb-hero) .wb-header--overlay:not(.is-scrolled):not(.elementor-sticky--effects) .wb-logo-on-light { display: none; }

/* Navigation: Elementor Pro Nav Menu widget with class wb-nav.
   Pointer: None in the widget; the hover underline is drawn here. */
.wb-theme .wb-nav .elementor-nav-menu--main .elementor-item {
	padding: 10px 14px;
	color: var(--wb-navy-900);
	fill: var(--wb-navy-900);
	font-family: var(--wb-font-display);
	font-size: 0.9375rem;
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
}

.wb-theme .wb-nav .elementor-nav-menu--main .elementor-item:is(:hover, :focus-visible, .elementor-item-active) {
	color: var(--wb-navy-900);
	text-decoration: underline;
	text-decoration-color: var(--wb-teal-700);
	text-decoration-thickness: 2px;
	text-underline-offset: 8px;
}

/* Header CTA: marigold over the hero, teal once the header turns white. */
.wb-theme .wb-header .wb-header-cta :is(.elementor-button, .eael-creative-button) {
	min-height: 44px;
	padding: 0 18px;
	background-color: var(--wb-teal-700);
	border-color: var(--wb-teal-700);
	color: var(--wb-white);
	font-size: 0.9375rem;
	white-space: nowrap;
}

.wb-theme .wb-header .wb-header-cta :is(.elementor-button, .eael-creative-button):hover {
	background-color: var(--wb-teal-800);
	border-color: var(--wb-teal-800);
}

/* --- Overlay (transparent) colours ---------------------------------------- */

.wb-theme:has(.wb-hero) .wb-header--overlay:not(.is-scrolled):not(.elementor-sticky--effects) .wb-logo :is(.elementor-heading-title, a, p) {
	color: var(--wb-white);
}

.wb-theme:has(.wb-hero) .wb-header--overlay:not(.is-scrolled):not(.elementor-sticky--effects) .wb-logo-tag :is(.elementor-heading-title, p, span) {
	color: var(--wb-on-dark);
}

.wb-theme:has(.wb-hero) .wb-header--overlay:not(.is-scrolled):not(.elementor-sticky--effects) .wb-nav .elementor-nav-menu--main .elementor-item {
	color: var(--wb-white);
	fill: var(--wb-white);
}

.wb-theme:has(.wb-hero) .wb-header--overlay:not(.is-scrolled):not(.elementor-sticky--effects) .wb-nav .elementor-nav-menu--main .elementor-item:is(:hover, :focus-visible, .elementor-item-active) {
	color: var(--wb-white);
	text-decoration-color: var(--wb-marigold-400);
}

.wb-theme:has(.wb-hero) .wb-header--overlay:not(.is-scrolled):not(.elementor-sticky--effects) .wb-header-cta :is(.elementor-button, .eael-creative-button) {
	background-color: var(--wb-marigold-400);
	border-color: var(--wb-marigold-400);
	color: var(--wb-navy-900);
}

.wb-theme:has(.wb-hero) .wb-header--overlay:not(.is-scrolled):not(.elementor-sticky--effects) .wb-header-cta :is(.elementor-button, .eael-creative-button):hover {
	background-color: var(--wb-marigold-500);
	border-color: var(--wb-marigold-500);
}

.wb-theme:has(.wb-hero) .wb-header--overlay:not(.is-scrolled):not(.elementor-sticky--effects) :is(a, button):focus-visible {
	outline-color: var(--wb-white);
}

/* --- Menu toggle (hamburger) ---------------------------------------------- */

.wb-theme .wb-nav .elementor-menu-toggle {
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 2px solid var(--wb-navy-900);
	border-radius: var(--wb-radius-sm);
	background: transparent;
	color: var(--wb-navy-900);
	fill: var(--wb-navy-900);
	font-size: 22px;
}

.wb-theme .wb-nav .elementor-menu-toggle :is(svg, i) {
	width: 22px;
	height: 22px;
	fill: currentColor;
}

.wb-theme:has(.wb-hero) .wb-header--overlay:not(.is-scrolled):not(.elementor-sticky--effects) .wb-nav .elementor-menu-toggle {
	border-color: rgba(255, 255, 255, 0.6);
	color: var(--wb-white);
	fill: var(--wb-white);
}

/* --- Mobile dropdown: full-height navy panel ------------------------------- */

.wb-theme .wb-nav .elementor-nav-menu--dropdown {
	background: var(--wb-navy-950);
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.wb-theme .wb-nav .elementor-menu-toggle.elementor-active + .elementor-nav-menu__container.elementor-nav-menu--dropdown {
	min-height: calc(100dvh - var(--wb-header-h));
	padding: var(--wb-space-3) var(--wb-gutter) var(--wb-space-6);
	box-sizing: border-box;
	overflow-y: auto;
}

.wb-theme .wb-nav .elementor-nav-menu--dropdown .elementor-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 52px;
	padding: 0 !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.10);
	background: transparent;
	color: var(--wb-white);
	font-family: var(--wb-font-display);
	font-size: 1.25rem;
	font-weight: 500;
}

.wb-theme .wb-nav .elementor-nav-menu--dropdown .elementor-item::after {
	content: "";
	width: 18px;
	height: 18px;
	background-color: var(--wb-on-dark-muted);
	-webkit-mask: var(--wb-icon-chevron) center / contain no-repeat;
	mask: var(--wb-icon-chevron) center / contain no-repeat;
}

.wb-theme .wb-nav .elementor-nav-menu--dropdown .elementor-item:is(:hover, :focus-visible, .elementor-item-active) {
	background: transparent;
	color: var(--wb-marigold-400);
}

.wb-theme .wb-nav .elementor-nav-menu--dropdown :is(a, button):focus-visible {
	outline-color: var(--wb-white);
}

/* Stop the page scrolling behind the open menu (class set by the script). */
html.wb-menu-open,
html.wb-menu-open body {
	overflow: hidden;
}

/* --- Alternative: full-screen Elementor Popup menu (wb-menu-panel) --------- */

.wb-theme .wb-menu-panel {
	background:
		radial-gradient(circle at 100% 100%, rgba(14, 107, 102, 0.55) 0%, rgba(14, 107, 102, 0) 60%),
		var(--wb-navy-950);
}

.wb-theme .wb-menu-panel .wb-menu-group :is(.elementor-heading-title, p) {
	margin: var(--wb-space-4) 0 4px;
	color: var(--wb-marigold-400);
	font-family: var(--wb-font-display);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.wb-theme .wb-menu-panel .elementor-nav-menu--layout-vertical .elementor-item,
.wb-theme .wb-menu-panel .wb-menu-list .elementor-icon-list-item a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 52px;
	padding: 0 !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.10);
	color: var(--wb-white);
	font-family: var(--wb-font-display);
	font-size: 1.25rem;
	font-weight: 500;
	text-decoration: none;
}

.wb-theme .wb-menu-panel .elementor-nav-menu--layout-vertical .elementor-item:hover {
	color: var(--wb-marigold-400);
}


/* ==========================================================================
   12. Hero and closing call to action
   ========================================================================== */

/* Hero: Deep Harbour gradient. Pulls up under an overlay header by the
   header height, then pads that space back so content clears the header. */
.wb-theme .wb-hero {
	background: var(--wb-grad-hero);
	color: var(--wb-on-dark);
}

.wb-theme .e-con.wb-hero {
	--padding-top: calc(var(--wb-header-h) + clamp(32px, 1rem + 4vw, 72px));
	--padding-bottom: clamp(56px, 2rem + 5vw, 112px);
	--padding-left: var(--wb-gutter);
	--padding-right: var(--wb-gutter);
	margin-top: calc(-1 * var(--wb-header-h));
}

.wb-theme .wb-hero:not(.e-con) {
	margin-top: calc(-1 * var(--wb-header-h));
	padding: calc(var(--wb-header-h) + clamp(32px, 1rem + 4vw, 72px)) var(--wb-gutter) clamp(56px, 2rem + 5vw, 112px);
}

/* Use wb-hero--no-overlay if the header is not an overlay on this page. */
.wb-theme .e-con.wb-hero.wb-hero--no-overlay {
	--padding-top: clamp(32px, 1rem + 4vw, 72px);
	margin-top: 0;
}

.wb-theme .wb-hero .wb-h1 :is(.elementor-heading-title, h1),
.wb-theme .wb-hero h1 {
	max-width: 640px;
	margin-bottom: var(--wb-space-5);
	color: var(--wb-white);
}

.wb-theme .wb-hero .wb-lead,
.wb-theme .wb-hero .wb-lead p {
	max-width: 600px;
	color: var(--wb-on-dark);
}

/* Closing call to action: Teal Glow gradient, centred. */
.wb-theme .wb-cta {
	background: var(--wb-grad-cta);
	color: var(--wb-on-dark-strong);
	text-align: center;
}

.wb-theme .wb-cta :is(p, .elementor-widget-text-editor) {
	color: var(--wb-on-dark-strong);
}

.wb-theme .wb-cta .wb-lead {
	margin-inline: auto;
}


/* ==========================================================================
   13. Footer
   Theme Builder footer. Outer container: wb-footer. The 6px signal band is
   drawn automatically along the top edge.
   ========================================================================== */

.wb-theme .wb-footer {
	position: relative;
	background: var(--wb-navy-950);
	color: var(--wb-on-dark);
}

.wb-theme .wb-footer::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 6px;
	background: var(--wb-grad-signal);
}

.wb-theme .e-con.wb-footer {
	--padding-top: 70px; /* 64px + the 6px band */
	--padding-bottom: 32px;
	--padding-left: var(--wb-gutter);
	--padding-right: var(--wb-gutter);
}

.wb-theme .wb-footer__brand :is(.elementor-heading-title, p, a) {
	margin: 0 0 4px;
	color: var(--wb-white);
	font-family: var(--wb-font-display);
	font-size: clamp(1.5rem, 1.4rem + 0.3vw, 1.625rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	text-decoration: none;
}

.wb-theme .wb-footer__tag :is(.elementor-heading-title, p) {
	margin: 0 0 20px;
	color: var(--wb-marigold-400);
	font-family: var(--wb-font-body);
	font-size: 0.875rem;
	font-weight: 400;
}

.wb-theme .wb-footer__heading :is(.elementor-heading-title, h2, h3, p),
.wb-theme :is(h2, h3, p).wb-footer__heading {
	margin: 0 0 var(--wb-space-4);
	color: var(--wb-white);
	font-family: var(--wb-font-display);
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Footer link lists: Nav Menu (vertical) or Icon List with links. */
.wb-theme .wb-footer-links :is(.elementor-item, .elementor-icon-list-item a, a) {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding: 0 !important;
	background: transparent !important;
	color: var(--wb-footer-link);
	font-family: var(--wb-font-body);
	font-size: 1rem;
	font-weight: 400;
	text-decoration: none;
}

.wb-theme .wb-footer-links :is(.elementor-item, .elementor-icon-list-item a, a):hover {
	color: var(--wb-white);
	text-decoration: underline;
}

.wb-theme .wb-footer-links .elementor-icon-list-text {
	color: inherit;
}

.wb-theme .wb-footer-links .elementor-nav-menu--layout-vertical .elementor-nav-menu > li,
.wb-theme .wb-footer-links .elementor-icon-list-item {
	margin: 0 !important;
	padding: 0 !important;
}

/* Add the CSS class wb-menu-cta to the "Free website check" menu item
   (Appearance › Menus › CSS Classes) to make it marigold. */
.wb-theme .wb-footer .menu-item.wb-menu-cta > a,
.wb-theme .wb-footer .wb-menu-cta a {
	color: var(--wb-marigold-400);
	font-weight: 700;
}

.wb-theme .wb-footer__small,
.wb-theme .wb-footer__small p {
	margin: 0;
	color: var(--wb-on-dark-muted);
	font-size: 0.875rem;
	line-height: 1.6;
}

.wb-theme .wb-footer__small {
	margin-top: var(--wb-space-7);
	padding-top: var(--wb-space-5);
	border-top: 1px solid rgba(255, 255, 255, 0.14);
}

/* The footer's on-dark link rule should not underline nav items. */
.wb-theme .wb-footer .wb-footer-links a {
	font-weight: 400;
	text-decoration: none;
}


/* ==========================================================================
   14. Utilities
   ========================================================================== */

.wb-theme .wb-shadow-card { box-shadow: var(--wb-shadow-card); }
.wb-theme .wb-shadow-raised { box-shadow: var(--wb-shadow-raised); }
.wb-theme .wb-radius-sm { border-radius: var(--wb-radius-sm); }
.wb-theme .wb-radius-md { border-radius: var(--wb-radius-md); }
.wb-theme .wb-radius-lg { border-radius: var(--wb-radius-lg); }
.wb-theme .wb-mb-0, .wb-theme .wb-mb-0 :is(p, .elementor-heading-title) { margin-bottom: 0 !important; }
.wb-theme .wb-mt-auto { margin-top: auto; }
.wb-theme .wb-nowrap { white-space: nowrap; }


/* ==========================================================================
   15. Responsive
   Breakpoints match Elementor's defaults so both behave together.
   ========================================================================== */

/* --- Tablet: 1024px and below --------------------------------------------- */
@media (max-width: 1024px) {
	:root {
		--wb-header-h: 72px;
	}

	.wb-theme :is(.wb-cols-7-5, .wb-cols-5-7):not(.e-con-boxed),
	.wb-theme :is(.wb-cols-7-5, .wb-cols-5-7).e-con-boxed > .e-con-inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
	}

	.wb-theme :is(.wb-grid-3, .wb-grid-4, .wb-cols-footer):not(.e-con-boxed),
	.wb-theme :is(.wb-grid-3, .wb-grid-4, .wb-cols-footer).e-con-boxed > .e-con-inner {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.wb-theme .wb-grid-6:not(.e-con-boxed),
	.wb-theme .wb-grid-6.e-con-boxed > .e-con-inner,
	.wb-theme .wb-trust .elementor-icon-list-items {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	/* Stacked hero: keep the form card a sensible width, centred. */
	.wb-theme .wb-hero .wb-form-card {
		width: 100%;
		max-width: 560px;
		margin-inline: auto;
	}
}

/* --- Mobile: 767px and below ---------------------------------------------- */
@media (max-width: 767px) {
	:root {
		--wb-header-h: 64px;
	}

	.wb-theme.admin-bar .elementor-location-header:has(.wb-header--sticky) {
		top: 46px;
	}

	.wb-theme :is(.wb-grid-2, .wb-grid-3, .wb-grid-4, .wb-cols-footer):not(.e-con-boxed),
	.wb-theme :is(.wb-grid-2, .wb-grid-3, .wb-grid-4, .wb-cols-footer).e-con-boxed > .e-con-inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.wb-theme .wb-grid-6:not(.e-con-boxed),
	.wb-theme .wb-grid-6.e-con-boxed > .e-con-inner,
	.wb-theme .wb-trust .elementor-icon-list-items {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px 12px;
	}

	.wb-theme .wb-trust .elementor-icon-list-text {
		font-size: 0.875rem;
	}

	/* Header: compact CTA, logo without tagline. */
	.wb-theme .wb-header .wb-logo-tag {
		display: none;
	}

	.wb-theme .wb-header .wb-header-cta :is(.elementor-button, .eael-creative-button) {
		padding: 0 14px;
		font-size: 0.875rem;
	}

	/* Hero */
	.wb-theme .wb-hero .wb-form-card {
		max-width: none;
		border-radius: 20px;
	}

	.wb-theme .e-con.wb-form-card {
		--padding-top: 24px;
		--padding-bottom: 24px;
		--padding-left: 24px;
		--padding-right: 24px;
	}

	.wb-theme .wb-hero .wb-ticks .elementor-icon-list-text {
		font-size: 1.0625rem;
	}

	/* Practice tiles become compact rows: icon · text · chevron. */
	.wb-theme .e-con.wb-tile.wb-tile--row-mobile {
		--flex-direction: row;
		--align-items: center;
		--padding-top: 18px;
		--padding-bottom: 18px;
		--padding-left: 18px;
		--padding-right: 52px;
		flex-direction: row;
		align-items: center;
		gap: 16px;
	}

	.wb-theme .wb-tile--row-mobile .wb-icon-chip {
		flex: none;
		margin-bottom: 0;
	}

	.wb-theme .wb-tile--row-mobile .wb-icon-chip .elementor-icon {
		width: 52px;
		height: 52px;
	}

	.wb-theme .wb-tile--row-mobile .wb-tile__link {
		display: none;
	}

	.wb-theme .wb-tile--row-mobile .wb-tile__title :is(.elementor-heading-title, h3, p) {
		margin-bottom: 0;
		font-size: 1.125rem;
	}

	.wb-theme .wb-tile--row-mobile .wb-tile__text,
	.wb-theme .wb-tile--row-mobile .wb-tile__text p {
		font-size: 1rem;
		line-height: 1.5;
	}

	.wb-theme .wb-tile--row-mobile::after {
		content: "";
		position: absolute;
		top: 50%;
		right: 18px;
		width: 20px;
		height: 20px;
		margin-top: -10px;
		background-color: var(--wb-teal-700);
		-webkit-mask: var(--wb-icon-chevron) center / contain no-repeat;
		mask: var(--wb-icon-chevron) center / contain no-repeat;
	}

	/* Steps: stacked with a short connector line between cards. */
	.wb-theme .wb-steps .wb-step:not(:last-child)::after {
		content: "";
		position: absolute;
		left: 49px;
		bottom: -26px;
		width: 2px;
		height: 24px;
		background: var(--wb-timeline);
	}

	.wb-theme .wb-steps:not(.e-con-boxed),
	.wb-theme .wb-steps.e-con-boxed > .e-con-inner {
		row-gap: 28px !important;
	}

	/* Cards: slightly tighter padding. */
	.wb-theme .e-con:is(.wb-card, .wb-step, .wb-testimonial) {
		--padding-left: 24px;
		--padding-right: 24px;
	}

	.wb-theme .e-con.wb-testimonial {
		--padding-top: 72px;
		--padding-bottom: 24px;
	}

	.wb-theme .wb-testimonial::before {
		top: 24px;
		left: 24px;
		width: 30px;
		height: 22px;
	}

	/* Report preview */
	.wb-theme .wb-report {
		border-radius: 20px;
	}

	.wb-theme .wb-report__head {
		padding: 18px 20px;
	}

	.wb-theme .wb-report__rows {
		padding: 4px 20px 12px;
	}

	.wb-theme .wb-report__row {
		padding: 12px 0;
	}

	.wb-theme .wb-report__bar {
		display: none;
	}

	.wb-theme .wb-report__name {
		margin: 0;
		font-size: 0.9375rem;
	}

	/* Closing form: stacked, full-width button. */
	.wb-theme .wb-inline-form {
		flex-direction: column;
	}

	.wb-theme .wb-inline-form :is(button, .wb-btn) {
		width: 100%;
	}

	/* Footer: one column, 44px tap targets. */
	.wb-theme .wb-footer-links :is(.elementor-item, .elementor-icon-list-item a, a) {
		min-height: 44px;
	}

	.wb-theme .wb-cols-footer > .e-con-inner > .e-con + .e-con,
	.wb-theme .wb-cols-footer:not(.e-con-boxed) > .e-con + .e-con {
		padding-top: 20px;
		border-top: 1px solid rgba(255, 255, 255, 0.14);
	}

	/* FAQ rows */
	.wb-theme .wb-faq :is(.e-n-accordion-item-title, .elementor-tab-title, .eael-accordion-header) {
		min-height: 64px;
	}

	.wb-theme .wb-faq :is(.e-n-accordion-item-title-icon, .elementor-accordion-icon, .elementor-toggle-icon, .eael-accordion-tab-icon) {
		width: 32px;
		height: 32px;
	}
}


/* ==========================================================================
   16. Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.wb-theme *,
	.wb-theme *::before,
	.wb-theme *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}

	.wb-theme :is(.wb-card--hover, .wb-tile):hover,
	.wb-theme :is(.wb-card--hover, .wb-tile):focus-within {
		transform: none;
	}
}