/**
 * ManVan Elementor Widgets — Core design system.
 *
 * Loaded on every page that contains a ManVan widget. Defines the design
 * tokens (CSS custom properties), colour schemes and the shared building
 * blocks (block wrapper, section header, buttons, cards, forms, chips…)
 * that every widget stylesheet builds on.
 *
 * Token values can be overridden globally from
 * Man & Van Settings → Branding (the theme prints a :root override), and
 * per widget from the Elementor Style tab.
 *
 * @package ManVan
 */

/* ==========================================================================
   1. Design tokens
   ========================================================================== */

:root {
	/* Brand */
	--manvan-brand: #d62828;
	--manvan-brand-hover: #b71f1f;
	--manvan-brand-soft: #fdeeee;
	--manvan-on-brand: #ffffff;
	--manvan-ink: #0f1b2d;
	--manvan-ink-2: #1d2b42;
	--manvan-accent: #f5b400;
	--manvan-success: #15803d;
	--manvan-success-soft: #e8f5ec;
	--manvan-danger: #b42318;

	/* Neutrals */
	--manvan-bg: #ffffff;
	--manvan-bg-alt: #f5f7fa;
	--manvan-surface: #ffffff;
	--manvan-surface-2: #f8fafc;
	--manvan-border: #e3e8ef;
	--manvan-border-strong: #cbd3df;
	--manvan-heading: var(--manvan-ink);
	--manvan-text: #3a4658;
	--manvan-muted: #667085;

	/* Typography */
	--manvan-font: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--manvan-font-heading: var(--manvan-font);
	--manvan-fs-display: clamp(2.25rem, 1.5rem + 3.2vw, 4.25rem);
	--manvan-fs-h1: clamp(2.125rem, 1.55rem + 2.6vw, 3.75rem);
	--manvan-fs-h2: clamp(1.75rem, 1.35rem + 1.7vw, 2.75rem);
	--manvan-fs-h3: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
	--manvan-fs-lead: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
	--manvan-fs-body: 1rem;
	--manvan-fs-sm: 0.875rem;
	--manvan-fs-xs: 0.75rem;
	--manvan-lh-tight: 1.12;
	--manvan-lh-body: 1.65;

	/* Shape */
	--manvan-radius-sm: 10px;
	--manvan-radius: 18px;
	--manvan-radius-lg: 28px;
	--manvan-radius-xl: 40px;
	--manvan-radius-btn: 999px;
	--manvan-radius-input: 12px;
	--manvan-radius-pill: 999px;

	/* Buttons — primary is the dark "ink" pill, brand red is the accent. */
	--manvan-btn-bg: var(--manvan-ink);
	--manvan-btn-bg-hover: #1b2d49;
	--manvan-btn-fg: #ffffff;

	/* Elevation */
	--manvan-shadow-sm: 0 1px 2px rgba(15, 27, 45, 0.06);
	--manvan-shadow: 0 1px 2px rgba(15, 27, 45, 0.04), 0 8px 24px -8px rgba(15, 27, 45, 0.14);
	--manvan-shadow-lg: 0 2px 6px rgba(15, 27, 45, 0.05), 0 28px 56px -18px rgba(15, 27, 45, 0.26);
	--manvan-focus-ring: 0 0 0 3px rgba(214, 40, 40, 0.32);

	/* Layout */
	--manvan-container: 1240px;
	--manvan-gutter: clamp(1rem, 0.6rem + 1.8vw, 2rem);
	--manvan-section-y: clamp(3.5rem, 2.4rem + 4.6vw, 7rem);
	--manvan-gap: clamp(1rem, 0.75rem + 1vw, 1.5rem);
	--manvan-ease: cubic-bezier(0.2, 0.7, 0.2, 1);

	/* Legacy aliases — keep older markup working. */
	--manvan-primary: var(--manvan-brand);
	--manvan-primary-hover: var(--manvan-brand-hover);
	--manvan-primary-dark: var(--manvan-brand-hover);
	--manvan-secondary: var(--manvan-ink);
	--manvan-text-light: var(--manvan-muted);
	--manvan-bg-light: var(--manvan-bg-alt);
	--manvan-white: #ffffff;
	--manvan-black: #000000;
	--manvan-font-body: var(--manvan-font);
	--manvan-radius-lg-legacy: var(--manvan-radius-lg);
}

/* ==========================================================================
   2. Colour schemes
   Applied through the widget "Section → Colour Scheme" control (adds a
   manvan-scheme-* class to the Elementor wrapper) or by a template modifier.
   ========================================================================== */

.manvan-scheme-alt .manvan-block,
.manvan-block--alt {
	background-color: var(--manvan-bg-alt);
}

.manvan-scheme-tint .manvan-block,
.manvan-block--tint {
	background-color: #ffffff;
	background-image:
		radial-gradient(60rem 30rem at 12% -10%, rgba(214, 40, 40, 0.07), transparent 60%),
		radial-gradient(40rem 30rem at 95% 10%, rgba(15, 27, 45, 0.05), transparent 60%),
		radial-gradient(circle at 1px 1px, rgba(15, 27, 45, 0.07) 1px, transparent 0);
	background-size: auto, auto, 26px 26px;
}

.manvan-scheme-dark .manvan-block,
.manvan-block--dark {
	--manvan-heading: #ffffff;
	--manvan-text: rgba(255, 255, 255, 0.8);
	--manvan-muted: rgba(255, 255, 255, 0.64);
	--manvan-surface: rgba(255, 255, 255, 0.06);
	--manvan-surface-2: rgba(255, 255, 255, 0.04);
	--manvan-border: rgba(255, 255, 255, 0.14);
	--manvan-border-strong: rgba(255, 255, 255, 0.28);
	--manvan-brand-soft: rgba(214, 40, 40, 0.18);
	background-color: var(--manvan-ink);
}

.manvan-scheme-brand .manvan-block,
.manvan-block--brand {
	--manvan-heading: #ffffff;
	--manvan-text: rgba(255, 255, 255, 0.9);
	--manvan-muted: rgba(255, 255, 255, 0.78);
	--manvan-surface: rgba(255, 255, 255, 0.1);
	--manvan-border: rgba(255, 255, 255, 0.24);
	--manvan-brand-soft: rgba(255, 255, 255, 0.16);
	background-color: var(--manvan-brand);
}

.manvan-scheme-brand .manvan-eyebrow,
.manvan-block--brand .manvan-eyebrow {
	color: #ffffff;
}

/* ==========================================================================
   3. Block wrapper & section header
   ========================================================================== */

.manvan-block {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	padding-block: var(--manvan-section-y);
	font-family: var(--manvan-font);
	font-size: var(--manvan-fs-body);
	line-height: var(--manvan-lh-body);
	color: var(--manvan-text);
	-webkit-font-smoothing: antialiased;
}

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

.manvan-block--flush {
	padding-block: 0;
}

.manvan-block--compact {
	padding-block: clamp(2rem, 1.6rem + 2vw, 3.5rem);
}

.manvan-block__inner {
	width: 100%;
	max-width: var(--manvan-container);
	margin-inline: auto;
	padding-inline: var(--manvan-gutter);
}

.manvan-block__header {
	max-width: 760px;
	margin: 0 auto clamp(2rem, 1.4rem + 2.2vw, 3.5rem);
	text-align: center;
}

.manvan-block__header--left {
	margin-left: 0;
	text-align: left;
}

.manvan-block__header--right {
	margin-right: 0;
	text-align: right;
}

.manvan-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 0.875rem;
	font-family: var(--manvan-font);
	font-size: var(--manvan-fs-xs);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--manvan-brand);
}

.manvan-eyebrow::before {
	content: "";
	flex: none;
	width: 18px;
	height: 2px;
	border-radius: 2px;
	background-color: currentColor;
}

.manvan-block__heading {
	margin: 0;
	font-family: var(--manvan-font-heading);
	font-size: var(--manvan-fs-h2);
	font-weight: 800;
	line-height: var(--manvan-lh-tight);
	letter-spacing: -0.022em;
	color: var(--manvan-heading);
	text-wrap: balance;
}

.manvan-block__lead {
	margin: 1rem 0 0;
	font-size: var(--manvan-fs-lead);
	line-height: 1.6;
	color: var(--manvan-muted);
	text-wrap: pretty;
}

.manvan-block__footer {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem;
	margin-top: clamp(2rem, 1.6rem + 1.6vw, 3rem);
}

/* Typography helpers for widget content. */
.manvan-h1 {
	font-size: var(--manvan-fs-h1);
}

.manvan-h3,
.manvan-block h3.manvan-h3 {
	margin: 0;
	font-family: var(--manvan-font-heading);
	font-size: var(--manvan-fs-h3);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: var(--manvan-heading);
}

.manvan-prose {
	color: var(--manvan-text);
	line-height: var(--manvan-lh-body);
}

.manvan-prose > * + * {
	margin-top: 1em;
}

.manvan-prose h2,
.manvan-prose h3,
.manvan-prose h4 {
	margin-top: 1.75em;
	margin-bottom: 0.5em;
	font-family: var(--manvan-font-heading);
	line-height: 1.25;
	letter-spacing: -0.015em;
	color: var(--manvan-heading);
}

.manvan-prose h2 {
	font-size: clamp(1.5rem, 1.3rem + 0.9vw, 2rem);
}

.manvan-prose h3 {
	font-size: clamp(1.2rem, 1.1rem + 0.4vw, 1.4rem);
}

.manvan-prose a {
	color: var(--manvan-brand);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.manvan-prose ul,
.manvan-prose ol {
	padding-left: 1.25em;
}

.manvan-prose li + li {
	margin-top: 0.4em;
}

/* Tables inside any rich-text field. */
.manvan-prose table {
	width: 100%;
	margin: 1.5em 0;
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	border: 1px solid var(--manvan-border);
	border-radius: var(--manvan-radius);
	font-size: 0.9375rem;
}

.manvan-prose th,
.manvan-prose td {
	padding: 0.75rem 1rem;
	border-bottom: 1px solid var(--manvan-border);
	text-align: left;
	vertical-align: top;
}

.manvan-prose th {
	background-color: var(--manvan-ink);
	color: #ffffff;
	font-weight: 700;
}

.manvan-prose tr:last-child td {
	border-bottom: 0;
}

.manvan-prose tbody tr:nth-child(even) td {
	background-color: var(--manvan-surface-2);
}

/*
 * Card columns for rich text: wrap blocks in <div class="manvan-cols"> … </div>
 * (each direct child <div> becomes a card; lists inside get green ticks).
 */
.manvan-prose .manvan-cols {
	display: grid;
	gap: var(--manvan-gap);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	margin: 1.75em 0;
}

.manvan-prose .manvan-cols > div {
	margin: 0;
	padding: clamp(1.25rem, 1rem + 0.8vw, 1.75rem);
	border: 1px solid var(--manvan-border);
	border-radius: var(--manvan-radius);
	background-color: var(--manvan-surface);
	box-shadow: var(--manvan-shadow-sm);
	text-align: left;
}

.manvan-prose .manvan-cols h3,
.manvan-prose .manvan-cols h4 {
	margin: 0 0 0.75rem;
}

.manvan-prose .manvan-cols ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.manvan-prose .manvan-cols li {
	position: relative;
	padding-left: 1.75rem;
}

.manvan-prose .manvan-cols li::before {
	content: "";
	position: absolute;
	top: 0.2em;
	left: 0;
	width: 1.2rem;
	height: 1.2rem;
	border-radius: 50%;
	background: var(--manvan-success-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315803d' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 0.7rem no-repeat;
}

/* ==========================================================================
   4. Buttons
   ========================================================================== */

.manvan-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	min-height: 52px;
	padding: 0.85rem 1.6rem;
	border: 1.5px solid transparent;
	border-radius: var(--manvan-radius-btn);
	background-color: var(--manvan-btn-bg);
	color: var(--manvan-btn-fg);
	font-family: var(--manvan-font);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.005em;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s var(--manvan-ease);
}

.manvan-btn:hover {
	background-color: var(--manvan-btn-bg-hover);
	color: var(--manvan-btn-fg);
	transform: translateY(-1px);
	box-shadow: 0 14px 28px -12px rgba(15, 27, 45, 0.55);
}

.manvan-btn--brand {
	background-color: var(--manvan-brand);
	color: var(--manvan-on-brand);
}

.manvan-btn--brand:hover {
	background-color: var(--manvan-brand-hover);
	color: var(--manvan-on-brand);
	box-shadow: 0 14px 28px -12px rgba(214, 40, 40, 0.6);
}

/* On dark / brand schemes the primary button flips to white. */
.manvan-scheme-dark .manvan-btn:not(.manvan-btn--brand):not(.manvan-btn--outline):not(.manvan-btn--ghost),
.manvan-block--dark .manvan-btn:not(.manvan-btn--brand):not(.manvan-btn--outline):not(.manvan-btn--ghost),
.manvan-scheme-brand .manvan-btn:not(.manvan-btn--outline):not(.manvan-btn--ghost),
.manvan-block--brand .manvan-btn:not(.manvan-btn--outline):not(.manvan-btn--ghost) {
	background-color: #ffffff;
	color: var(--manvan-ink);
}

.manvan-btn:focus-visible {
	outline: none;
	box-shadow: var(--manvan-focus-ring);
}

.manvan-btn:disabled,
.manvan-btn[aria-disabled="true"] {
	opacity: 0.55;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

.manvan-btn svg {
	flex: none;
	width: 1.15em;
	height: 1.15em;
}

.manvan-btn--dark {
	background-color: var(--manvan-ink);
	color: #ffffff;
}

.manvan-btn--dark:hover {
	background-color: var(--manvan-ink-2);
	color: #ffffff;
	box-shadow: 0 10px 22px -10px rgba(15, 27, 45, 0.55);
}

.manvan-btn--light {
	background-color: #ffffff;
	color: var(--manvan-ink);
}

.manvan-btn--light:hover {
	background-color: #f1f4f8;
	color: var(--manvan-ink);
	box-shadow: 0 10px 22px -10px rgba(15, 27, 45, 0.35);
}

.manvan-btn--outline {
	background-color: transparent;
	border-color: var(--manvan-border-strong);
	color: var(--manvan-heading);
}

.manvan-btn--outline:hover {
	background-color: transparent;
	border-color: var(--manvan-heading);
	color: var(--manvan-heading);
	box-shadow: none;
}

.manvan-btn--ghost {
	min-height: 0;
	padding: 0.25rem 0;
	background-color: transparent;
	color: var(--manvan-brand);
}

.manvan-btn--ghost:hover {
	background-color: transparent;
	color: var(--manvan-brand-hover);
	box-shadow: none;
	transform: none;
}

.manvan-btn--ghost svg {
	transition: transform 0.2s var(--manvan-ease);
}

.manvan-btn--ghost:hover svg {
	transform: translateX(3px);
}

.manvan-btn--sm {
	min-height: 40px;
	padding: 0.55rem 1rem;
	font-size: 0.9375rem;
}

.manvan-btn--lg {
	min-height: 56px;
	padding: 1rem 1.75rem;
	font-size: 1.0625rem;
}

.manvan-btn--block {
	display: flex;
	width: 100%;
}

.manvan-btn-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
}

/* ==========================================================================
   5. Cards, grids, media
   ========================================================================== */

.manvan-card {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	background-color: var(--manvan-surface);
	border: 1px solid var(--manvan-border);
	border-radius: var(--manvan-radius);
	box-shadow: var(--manvan-shadow-sm);
	color: var(--manvan-text);
	transition: transform 0.25s var(--manvan-ease), box-shadow 0.25s ease, border-color 0.25s ease, background-color 0.25s ease;
}

a.manvan-card {
	text-decoration: none;
}

.manvan-card--interactive:hover,
a.manvan-card:hover {
	transform: translateY(-3px);
	border-color: var(--manvan-border-strong);
	box-shadow: var(--manvan-shadow);
}

a.manvan-card:focus-visible {
	outline: none;
	box-shadow: var(--manvan-focus-ring);
}

.manvan-card--flat {
	box-shadow: none;
}

.manvan-card--elevated {
	border-color: transparent;
	box-shadow: var(--manvan-shadow-lg);
}

.manvan-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 0.625rem;
	padding: clamp(1.25rem, 1rem + 0.8vw, 1.75rem);
}

.manvan-grid {
	display: grid;
	gap: var(--manvan-gap);
	grid-template-columns: repeat(var(--manvan-cols-mobile, 1), minmax(0, 1fr));
}

/* Breakpoints match Elementor's defaults: mobile ≤767, tablet ≤1024. */
@media (min-width: 768px) {
	.manvan-grid {
		grid-template-columns: repeat(var(--manvan-cols-tablet, 2), minmax(0, 1fr));
	}
}

@media (min-width: 1025px) {
	.manvan-grid {
		grid-template-columns: repeat(var(--manvan-cols, 3), minmax(0, 1fr));
	}
}

.manvan-media {
	position: relative;
	overflow: hidden;
	border-radius: var(--manvan-radius);
	background-color: var(--manvan-bg-alt);
	aspect-ratio: var(--manvan-media-ratio, 4 / 3);
}

.manvan-media > img,
.manvan-media > video,
.manvan-media > iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	object-fit: cover;
}

/* Icon badge used on feature/service cards. */
.manvan-icon-badge {
	display: inline-grid;
	flex: none;
	place-items: center;
	width: 3rem;
	height: 3rem;
	border-radius: 12px;
	background-color: var(--manvan-brand-soft);
	color: var(--manvan-brand);
}

.manvan-icon-badge svg,
.manvan-icon-badge i {
	width: 1.5rem;
	height: 1.5rem;
	font-size: 1.5rem;
	line-height: 1;
}

.manvan-icon-badge svg {
	fill: none;
	stroke: currentColor;
}

.manvan-icon-badge svg[fill="currentColor"] {
	fill: currentColor;
	stroke: none;
}

/* ==========================================================================
   6. Chips, badges, lists, rating
   ========================================================================== */

.manvan-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.375rem 0.75rem;
	border: 1px solid var(--manvan-border);
	border-radius: var(--manvan-radius-pill);
	background-color: var(--manvan-surface);
	color: var(--manvan-heading);
	font-size: var(--manvan-fs-sm);
	font-weight: 600;
	line-height: 1.3;
}

.manvan-chip svg {
	flex: none;
	width: 1rem;
	height: 1rem;
	color: var(--manvan-success);
}

.manvan-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.25rem 0.625rem;
	border-radius: var(--manvan-radius-pill);
	background-color: var(--manvan-brand);
	color: var(--manvan-on-brand);
	font-size: 0.6875rem;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.manvan-badge--soft {
	background-color: var(--manvan-brand-soft);
	color: var(--manvan-brand);
}

.manvan-badge--dark {
	background-color: rgba(15, 27, 45, 0.78);
	color: #ffffff;
	backdrop-filter: blur(6px);
}

.manvan-checklist {
	display: grid;
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.manvan-checklist > li {
	position: relative;
	padding-left: 2rem;
	line-height: 1.55;
}

.manvan-checklist > li::before {
	content: "";
	position: absolute;
	top: 0.1em;
	left: 0;
	width: 1.375rem;
	height: 1.375rem;
	border-radius: 50%;
	background-color: var(--manvan-success-soft);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315803d' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
	background-position: center;
	background-repeat: no-repeat;
	background-size: 0.8rem;
}

.manvan-stars {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	color: var(--manvan-accent);
	line-height: 1;
}

.manvan-stars svg,
.manvan-star {
	width: 1.1em;
	height: 1.1em;
}

.manvan-divider {
	height: 1px;
	margin: 0;
	border: 0;
	background-color: var(--manvan-border);
}

/* ==========================================================================
   6b. Landing-page building blocks
   (status pill, highlighted headline, call block, trust items, floating
   cards, tinted dotted background) — shared by every hero variant.
   ========================================================================== */

/* "● Available 7 days · Same-day moves across London" */
.manvan-status-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0 0 1.5rem;
	padding: 0.5rem 1rem 0.5rem 0.85rem;
	border: 1px solid var(--manvan-border);
	border-radius: var(--manvan-radius-pill);
	background-color: rgba(255, 255, 255, 0.85);
	box-shadow: var(--manvan-shadow-sm);
	color: var(--manvan-heading);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.3;
	backdrop-filter: blur(6px);
}

.manvan-status-pill__dot {
	position: relative;
	flex: none;
	width: 0.625rem;
	height: 0.625rem;
	border-radius: 50%;
	background-color: #22c55e;
}

.manvan-status-pill__dot::after {
	content: "";
	position: absolute;
	inset: -4px;
	border-radius: 50%;
	background-color: rgba(34, 197, 94, 0.28);
	animation: manvan-pulse 2s ease-out infinite;
}

@keyframes manvan-pulse {
	0% {
		transform: scale(0.6);
		opacity: 1;
	}

	100% {
		transform: scale(1.6);
		opacity: 0;
	}
}

/* Headline with a second, brand-coloured line and hand-drawn underline. */
.manvan-headline {
	margin: 0;
	font-family: var(--manvan-font-heading);
	font-size: var(--manvan-fs-display);
	font-weight: 800;
	line-height: 1.02;
	letter-spacing: -0.04em;
	color: var(--manvan-heading);
	text-wrap: balance;
}

/* The underline is a background so long accents wrap and underline every line. */
.manvan-headline__accent {
	--manvan-accent-line: color-mix(in srgb, currentColor 28%, transparent);
	padding-bottom: 0.04em;
	background-image: linear-gradient(var(--manvan-accent-line), var(--manvan-accent-line));
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 100% 0.14em;
	color: var(--manvan-brand);
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

.manvan-headline__accent--no-line {
	background-image: none;
}

/* Pull back punctuation the brand font spaces too widely at heavy weights. */
.manvan-punct {
	margin-left: -0.12em;
}

/* "📞 Call us now / 020 …" block next to the CTA. */
.manvan-call {
	display: inline-flex;
	align-items: center;
	gap: 0.875rem;
	color: var(--manvan-heading);
	text-decoration: none;
}

.manvan-call__icon {
	display: grid;
	flex: none;
	place-items: center;
	width: 3.25rem;
	height: 3.25rem;
	border-radius: 50%;
	background-color: var(--manvan-brand-soft);
	color: var(--manvan-brand);
	transition: transform 0.2s var(--manvan-ease);
}

.manvan-call__icon svg {
	width: 1.35rem;
	height: 1.35rem;
}

.manvan-call:hover .manvan-call__icon {
	transform: scale(1.06);
}

.manvan-call__text {
	display: grid;
	line-height: 1.25;
}

.manvan-call__label {
	font-size: 0.875rem;
	color: var(--manvan-muted);
}

.manvan-call__number {
	font-size: 1.25rem;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--manvan-heading);
}

/* Trust row: icon circle + title + small subtitle. */
.manvan-trust-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.25rem 2rem;
	margin: 0;
	padding: 1.75rem 0 0;
	border-top: 1px solid var(--manvan-border);
	list-style: none;
}

.manvan-trust-item {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	min-width: 0;
}


.manvan-trust-item__icon {
	display: grid;
	flex: none;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	background-color: var(--manvan-brand-soft);
	color: var(--manvan-brand);
}

.manvan-trust-item__icon svg {
	width: 1.25rem;
	height: 1.25rem;
}

.manvan-trust-item__icon--success {
	background-color: var(--manvan-success-soft);
	color: var(--manvan-success);
}

.manvan-trust-item__icon--star {
	background-color: #fff7e0;
	color: #b7791f;
}

.manvan-trust-item__text {
	display: grid;
	line-height: 1.3;
}

.manvan-trust-item__title {
	font-size: 1rem;
	font-weight: 700;
	color: var(--manvan-heading);
}

.manvan-trust-item__sub {
	font-size: 0.875rem;
	color: var(--manvan-muted);
}

/* Big rounded photo card with floating overlay cards. */
.manvan-photo-card {
	position: relative;
	margin: 0;
}

.manvan-photo-card__frame {
	position: relative;
	overflow: hidden;
	border-radius: var(--manvan-radius-xl);
	background-color: var(--manvan-bg-alt);
	box-shadow: var(--manvan-shadow-lg);
	aspect-ratio: var(--manvan-photo-ratio, 4 / 5);
}

.manvan-photo-card__frame > img,
.manvan-photo-card__frame > video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.manvan-photo-card__caption {
	position: absolute;
	right: 1rem;
	bottom: 1rem;
	left: 1rem;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.625rem 1rem 0.625rem 0.625rem;
	border-radius: var(--manvan-radius-pill);
	background: linear-gradient(90deg, rgba(15, 27, 45, 0.72), rgba(15, 27, 45, 0.35));
	color: #ffffff;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.35;
	backdrop-filter: blur(8px);
}

.manvan-photo-card__caption-icon {
	display: grid;
	flex: none;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.16);
}

.manvan-photo-card__caption-icon svg {
	width: 1.05rem;
	height: 1.05rem;
}

.manvan-float-card {
	position: absolute;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 0.875rem;
	max-width: min(20rem, 80%);
	padding: 0.875rem 1.125rem 0.875rem 0.875rem;
	border: 1px solid rgba(227, 232, 239, 0.9);
	border-radius: var(--manvan-radius);
	background-color: rgba(255, 255, 255, 0.96);
	box-shadow: var(--manvan-shadow-lg);
	color: var(--manvan-ink);
	backdrop-filter: blur(8px);
}

.manvan-float-card__icon {
	display: grid;
	flex: none;
	place-items: center;
	width: 3rem;
	height: 3rem;
	border-radius: 14px;
	background: linear-gradient(145deg, #22c55e, #15803d);
	color: #ffffff;
}

.manvan-float-card__icon svg {
	width: 1.5rem;
	height: 1.5rem;
}

.manvan-float-card__text {
	display: grid;
	line-height: 1.3;
}

.manvan-float-card__label {
	font-size: 0.8125rem;
	color: var(--manvan-muted);
}

.manvan-float-card__title {
	font-size: 1rem;
	font-weight: 700;
	color: var(--manvan-ink);
}

/* Solid highlight badge (bottom corner of the photo card). */
.manvan-stat-badge {
	position: absolute;
	z-index: 2;
	display: grid;
	gap: 0.15rem;
	min-width: 11rem;
	padding: 1.25rem 1.5rem;
	border-radius: var(--manvan-radius-lg);
	background: linear-gradient(150deg, var(--manvan-brand), var(--manvan-brand-hover));
	box-shadow: 0 24px 48px -18px rgba(183, 31, 31, 0.6);
	color: #ffffff;
}

.manvan-stat-badge__label {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	opacity: 0.85;
}

.manvan-stat-badge__value {
	font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.03em;
}

.manvan-stat-badge__sub {
	font-size: 0.875rem;
	font-weight: 500;
	opacity: 0.9;
}

/* Soft tinted background with a subtle dot grid (hero backdrops). */
.manvan-bg-tint {
	background-color: #ffffff;
	background-image:
		radial-gradient(60rem 30rem at 12% -10%, rgba(214, 40, 40, 0.07), transparent 60%),
		radial-gradient(40rem 30rem at 95% 10%, rgba(15, 27, 45, 0.05), transparent 60%),
		radial-gradient(circle at 1px 1px, rgba(15, 27, 45, 0.07) 1px, transparent 0);
	background-size: auto, auto, 26px 26px;
}

/* ==========================================================================
   7. Forms
   ========================================================================== */

.manvan-form {
	display: grid;
	gap: 1rem;
}

.manvan-form-row {
	display: grid;
	gap: 1rem;
}

@media (min-width: 640px) {
	.manvan-form-row--2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.manvan-form-row--3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.manvan-field {
	display: grid;
	gap: 0.4rem;
	min-width: 0;
}

.manvan-label {
	font-size: var(--manvan-fs-sm);
	font-weight: 600;
	line-height: 1.3;
	color: var(--manvan-heading);
}

.manvan-label .manvan-req,
.manvan-req {
	color: var(--manvan-brand);
}

.manvan-input,
.manvan-select,
.manvan-textarea {
	display: block;
	width: 100%;
	min-height: 48px;
	margin: 0;
	padding: 0.7rem 0.9rem;
	border: 1.5px solid var(--manvan-border-strong);
	border-radius: var(--manvan-radius-input);
	background-color: #ffffff;
	color: var(--manvan-ink);
	font-family: var(--manvan-font);
	font-size: 1rem;
	line-height: 1.4;
	box-shadow: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	-webkit-appearance: none;
	appearance: none;
}

.manvan-textarea {
	min-height: 120px;
	resize: vertical;
}

.manvan-select {
	padding-right: 2.5rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-position: right 0.85rem center;
	background-repeat: no-repeat;
	background-size: 1.1rem;
}

.manvan-input::placeholder,
.manvan-textarea::placeholder {
	color: #98a2b3;
}

.manvan-input:hover,
.manvan-select:hover,
.manvan-textarea:hover {
	border-color: #98a2b3;
}

.manvan-input:focus,
.manvan-select:focus,
.manvan-textarea:focus {
	outline: none;
	border-color: var(--manvan-brand);
	box-shadow: var(--manvan-focus-ring);
}

.manvan-input[aria-invalid="true"],
.manvan-select[aria-invalid="true"],
.manvan-textarea[aria-invalid="true"],
.manvan-field--error .manvan-input,
.manvan-field--error .manvan-select,
.manvan-field--error .manvan-textarea {
	border-color: var(--manvan-danger);
}

.manvan-field__error {
	min-height: 0;
	font-size: 0.8125rem;
	color: var(--manvan-danger);
}

.manvan-field__error:empty {
	display: none;
}

.manvan-field__hint {
	font-size: 0.8125rem;
	color: var(--manvan-muted);
}

.manvan-check {
	display: flex;
	align-items: flex-start;
	gap: 0.625rem;
	font-size: var(--manvan-fs-sm);
	line-height: 1.5;
	color: var(--manvan-text);
	cursor: pointer;
}

.manvan-check input[type="checkbox"],
.manvan-check input[type="radio"] {
	flex: none;
	width: 1.125rem;
	height: 1.125rem;
	margin: 0.15rem 0 0;
	accent-color: var(--manvan-brand);
}

.manvan-form-note {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	margin: 0;
	font-size: 0.8125rem;
	color: var(--manvan-muted);
	text-align: center;
}

.manvan-form-note svg {
	flex: none;
	width: 0.95rem;
	height: 0.95rem;
	color: var(--manvan-success);
}

.manvan-alert {
	padding: 0.875rem 1rem;
	border: 1px solid var(--manvan-border);
	border-radius: var(--manvan-radius-input);
	background-color: var(--manvan-surface-2);
	font-size: var(--manvan-fs-sm);
	line-height: 1.5;
}

.manvan-alert--success {
	border-color: rgba(21, 128, 61, 0.28);
	background-color: var(--manvan-success-soft);
	color: #14532d;
}

.manvan-alert--error {
	border-color: rgba(180, 35, 24, 0.28);
	background-color: #fef3f2;
	color: #7a271a;
}

/* Spinner used on submit buttons. */
.manvan-spinner {
	display: inline-block;
	width: 1.1em;
	height: 1.1em;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: manvan-spin 0.7s linear infinite;
}

@keyframes manvan-spin {
	to {
		transform: rotate(360deg);
	}
}

/* ==========================================================================
   8. Utilities & accessibility
   ========================================================================== */

.manvan-sr-only {
	position: absolute !important; /* Must win over any layout rule to stay hidden. */
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.manvan-block a:focus-visible,
.manvan-block button:focus-visible,
.manvan-block summary:focus-visible {
	outline: 2px solid var(--manvan-brand);
	outline-offset: 2px;
}

.manvan-block img {
	max-width: 100%;
	height: auto;
}

[x-cloak] {
	display: none !important; /* Alpine.js: hide until initialised. */
}

@media (prefers-reduced-motion: reduce) {
	.manvan-block *,
	.manvan-block *::before,
	.manvan-block *::after {
		animation-duration: 0.01ms !important; /* Respect the user's OS setting. */
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}
}